Data EntryDmduskmoonimplemented4 demos

DmSearch

DmSearch collects table filters across text, choice, date, and custom fields.

Import@duskmoon-dev/components/dm-search

4API sections

28documented props

2behavior scenarios

Key API

itemsonSearchextrafastFilterItemdefaultCollapsedhideCollapseBtn

Usage

When to use

Use it in DuskMoon application screens that need a packaged, opinionated workflow component.
Reach for the lower-level standard component when the screen needs custom composition.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

DuskMoon workflow wrapper

Wraps lower-level primitives into a higher-level DuskMoon-prefixed workflow API.

Application defaults

Examples show the defaults and composition points expected by internal DuskMoon app screens.

Primary API surface

DmSearch is most often configured through `items`, `onSearch`, `extra`, `fastFilterItem`.

Covered behavior

Submits values and toggles collapsed fields

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and DmSearch from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { DmSearch } from "@duskmoon-dev/components/dm-search";

export function Example() {
  return (<DmSearch
  items={[{
    key: "name",
    title: "Name",
    dataIndex: "name",
    search: { type: "input" }
  }]}
  onSearch={(values) => console.log(values)}
/>);
}

Preview

Submits values and toggles collapsed fields

test-backed

DmSearch scenario from the component test coverage: submits values and toggles collapsed fields.

Source

import "@duskmoon-dev/components/styles.css";
import { DmSearch } from "@duskmoon-dev/components/dm-search";

export function DmSearchSubmitsValuesAndTogglesDemo() {
  return (<DmSearch
  items={[{
    key: "name",
    title: "Name",
    dataIndex: "name",
    search: { type: "input" }
  }]}
  onSearch={(values) => console.log(values)}
/>);
}

Preview

Honors searchParams and imperative reset

test-backed

DmSearch scenario from the component test coverage: honors searchparams and imperative reset.

Source

import "@duskmoon-dev/components/styles.css";
import { DmSearch } from "@duskmoon-dev/components/dm-search";

export function DmSearchHonorsSearchParamsAndImperativeDemo() {
  return (<DmSearch
  items={[{
    key: "name",
    title: "Name",
    dataIndex: "name",
    search: { type: "input" }
  }]}
  onSearch={(values) => console.log(values)}
/>);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <DmSearch
  items={[{
    key: "name",
    title: "Name",
    dataIndex: "name",
    search: { type: "input" }
  }]}
  onSearch={(values) => console.log(values)}
/>
</div>

<div data-theme="moonlight">
  <DmSearch
  items={[{
    key: "name",
    title: "Name",
    dataIndex: "name",
    search: { type: "input" }
  }]}
  onSearch={(values) => console.log(values)}
/>
</div>

API

The API reference below lists every parsed exported type or interface for DmSearch. Start with `items`, `onSearch`, `extra`, `fastFilterItem` for common usage.

Types: packages/components/src/components/dm-search/DmSearch.types.tsScenarios: packages/components/src/components/dm-search/DmSearch.test.tsx

DmSearchPropsinterface extends RefAttributes<DmSearchRef>

Prop	Type	Required	Description
`items`	`DmSearchItem[]`	No	items configures DmSearch.
`onSearch`	`(values: Record<string, unknown>) => void`	No	onSearch configures DmSearch.
`extra`	`ReactNode`	No	extra configures DmSearch.
`fastFilterItem`	`DmSearchItem`	No	fastFilterItem configures DmSearch.
`defaultCollapsed`	`boolean`	No	defaultCollapsed configures DmSearch.
`hideCollapseBtn`	`boolean`	No	hideCollapseBtn configures DmSearch.
`compact`	`boolean`	No	compact configures DmSearch.
`searchParams`	`Record<string, unknown>`	No	searchParams configures DmSearch.
`loading`	`boolean`	No	loading configures DmSearch.
`enableDefaultPlaceHolder`	`boolean`	No	enableDefaultPlaceHolder configures DmSearch.
`className`	`string`	No	className configures DmSearch.
`inputProps`	`Partial<InputProps>`	No	inputProps configures DmSearch.
`selectProps`	`Partial<SelectProps>`	No	selectProps configures DmSearch.
`datePickerProps`	`Partial<DatePickerProps & RangePickerProps>`	No	datePickerProps configures DmSearch.

DmSearchRefinterface

Prop	Type	Required	Description
`onReset`	`() => void`	Yes	onReset configures DmSearch.

DmSearchIteminterface

Prop	Type	Required	Description
`key`	`string`	Yes	key configures DmSearch.
`title`	`ReactNode`	Yes	title configures DmSearch.
`dataIndex`	`string`	Yes	dataIndex configures DmSearch.
`search`	`{`	Yes	search configures DmSearch.
`type`	`DmSearchItemType`	Yes	type configures DmSearch.
`extraProps`	`Record<string, unknown>`	No	extraProps configures DmSearch.
`formProps`	`{`	No	formProps configures DmSearch.
`initialValue`	`unknown`	No	initialValue configures DmSearch.
`rules`	`unknown[]`	No	rules configures DmSearch.
`render`	`(`	No	render configures DmSearch.
`value`	`unknown,`	Yes	value configures DmSearch.
`setValue`	`(value: unknown) => void,`	Yes	setValue configures DmSearch.
`item`	`DmSearchItem,`	Yes	item configures DmSearch.

DmSearchItemTypetype

| "input" | "input-number" | "select" | "radio" | "checkbox" | "date" | "dateRange" | "custom"