Filter

Components for filtering and searching data.

Prerequisites

Install the packages

npm install \
  @tetherto/mdk-react-devkit \
  @tetherto/mdk-react-adapter \
  @tetherto/mdk-ui-foundation

Import styles: import '@tetherto/mdk-react-devkit/styles.css'

Components

@tetherto/mdk-react-devkit

Import the public APIs on this page from @tetherto/mdk-react-devkit.

`ListViewFilter`

Toolbar of dropdown/checkbox filters that drive a list view; emits the active filter set to the parent

agent-ready

Source

src/primitives/components/list-view-filter/USAGE.md

src/primitives/components/list-view-filter/index.tsx

Props

Prop	Status	Type / Options	Default	Description
`onChange`	Required	`(selections: CascaderValue[]) => void`	-	Callback when filters change
`options`	Required	`CascaderOption[]`	-	`Cascader` options for filtering
`className`	Optional	`string`	-	Custom className for the filter button
`filterKey`	Optional	`string`	`"default"`	Optional key to force re-mounting the `Cascader` when filters change Useful if you want to reset the internal state of the `Cascader` when filters change
`localFilters`	Optional	`LocalFilters`	-	Current filter values as key-value pairs Example: { type: 'Antminer S19XP H', status: ['active', 'pending'] }

Reporting-period control: a rolling preset or a custom day range, the buckets the page aggregates into (a bucket that does not fit the range is disabled), and Reset. Pair it with usePeriod, which keeps the period in the URL

agent-ready

Source

src/domain/components/timeframe/period-control/USAGE.md

src/domain/components/timeframe/period-control/period-control.tsx

Props

Prop	Status	Type / Options	Default	Description
`state`	Required	`PeriodState`	-	The period to show and change, from `usePeriod`
`timezone`	Required	`string`	-	The site's timezone, in which custom ranges are whole days
`className`	Optional	`string`	-	Additional class for the root element
`showGranularity`	Optional	`boolean`	`true`	Show the bucket toggle. Hide it on a page that shows one figure per period

`ReportTimeFrameSelector`

Reporting-period selector with preset windows (1d / 7d / 30d / custom range)

agent-ready

Source

src/domain/components/timeframe/report-time-frame-selector/USAGE.md

src/domain/components/timeframe/report-time-frame-selector/report-time-frame-selector.tsx

Props

Prop	Status	Type / Options	Default	Description
`dateRange`	Required	`[Date, Date]`	-	Custom date range as a `[start, end]` tuple
`presetTimeFrame`	Required	`number \| null`	-	Selected preset in days (`1`, `7`, `30`); `null` means the custom range is active
`setDateRange`	Required	`(value: [Date, Date]) => void`	-	Update the custom date range
`setPresetTimeFrame`	Required	`(value: number \| null) => void`	-	Update the preset selection

`TimeframeControls`

Date-range picker for financial reporting pages — supports year, month, and week granularity via connected selects

agent-ready

Source

src/domain/components/timeframe/timeframe-controls/USAGE.md

src/domain/components/timeframe/timeframe-controls/timeframe-controls.tsx

Props

Prop	Status	Type / Options	Default	Description
`dateRange`	Optional	`TimeframeControlsDateRange`	-	Current date range
`hint`	Optional	`string`	-	Helper text below the controls
`isMonthSelectVisible`	Optional	`boolean`	`true`	Show month selector
`isWeekSelectVisible`	Optional	`boolean`	`true`	Show week selector
`layout`	Optional	`"horizontal" \| "stacked"`	`"horizontal"`	Layout direction
`onRangeChange`	Optional	`TimeframeControlsOnRangeChange`	-	Called when the range changes
`onReset`	Optional	`VoidFunction`	-	Called when the Reset button is clicked
`onTimeframeTypeChange`	Optional	`(type: TimeframeTypeValue) => void`	-	Called when timeframe type changes
`showResetButton`	Optional	`boolean`	`false`	Shows the Reset button
`timeframeType`	Optional	`null \| "month" \| "week" \| "year"`	-	Active timeframe type

`TimeframeControlsDateRange`

Prop	Status	Type / Options	Default	Description
`end`	Required	`number`	-	Range end (epoch ms); matched with `start` against calendar weeks to restore a week selection
`start`	Required	`number`	-	Range start (epoch ms); the year/month/week pickers sync to this date

`TimeframeWeekFlatContent`

Flat list of selectable week items for the TimeframeControls week selector

agent-ready

Source

src/domain/components/timeframe/timeframe-controls/USAGE.md

src/domain/components/timeframe/timeframe-controls/timeframe-controls-week-content.tsx

Props

Prop	Status	Type / Options	Default	Description
`visibleWeeks`	Required	`Week[]`	-	-

`Week`

Prop	Status	Type / Options	Default	Description
`bucketMonth`	Required	`number`	-	Month (0-11) of the week's end date in the selected timezone; sent as `month` to `onRangeChange`
`bucketYear`	Required	`number`	-	Year of the week's end date in the selected timezone; sent as `year` to `onRangeChange`
`end`	Required	`Date`	-	Sunday 23:59:59.999 (local time) that closes the week, capped to the end of yesterday
`label`	Required	`string`	-	Option text, `DD/MM - DD/MM` in the selected timezone
`start`	Required	`Date`	-	Monday 00:00:00.000 (local time) that opens the week
`disabled`	Optional	`boolean`	-	True when the week starts after the end of yesterday; the option is shown but not selectable