TimeframeWeekFlatContent

Flat list of selectable week items for the TimeframeControls week selector.

import { TimeframeWeekFlatContent } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`visibleWeeks`	Required	`Week[]`	—	—

Usage

Controls for selecting a reporting time frame: year, month, and optional week picker.

Component	Description
`TimeframeControls`	Full time-frame picker: year, month, and optional week selection in horizontal or vertical layout.
`TimeframeWeekTreeContent`	Hierarchical year → month → week tree used inside `TimeframeControls`.

TimeframeControls Props

Prop	Type	Required	Default	Description
`hint`	`string`	no	—	Helper text below the controls.
`dateRange`	`DateRange`	no	—	Current date range.
`isMonthSelectVisible`	`boolean`	no	`true`	Show month selector.
`isWeekSelectVisible`	`boolean`	no	`true`	Show week selector.
`onRangeChange`	`(range) => void`	no	—	Called when the range changes.
`timeframeType`	`string`	no	—	Active timeframe type.
`onTimeframeTypeChange`	`(type) => void`	no	—	Called when timeframe type changes.
`layout`	`"horizontal" \| "vertical"`	no	`"horizontal"`	Layout direction.

Examples

import { TimeframeWeekTreeContent } from '@tetherto/mdk-react-devkit'export const TimeframeWeekTreeContentExample = () => (  <div className="mdk-example-row">    <TimeframeWeekTreeContent timezone="UTC" selectedYear={2026} selectedMonth={4} />  </div>)

import { TimeframeControls } from '@tetherto/mdk-react-devkit'export const TimeframeControlsExample = () => (  <div className="mdk-example-row">    <TimeframeControls      onRangeChange={(range) => console.warn('range changed', range)}      layout="horizontal"    />  </div>)