Products

Layer filter popover

Filters a product list by the layer it belongs to.

Available

Ports as-is

Examples

Rendered live from the maintained Storybook story. Lantern stores only the story id and embeds Storybook rather than duplicating the component or its demo.

Layer filter popover

Rendered live from Storybook

Open

Storybook must be running for this to load — bun run start:storybook from the monorepo root, or set NEXT_PUBLIC_STORYBOOK_URL to a deployed instance.

Props

The component's public API, read from its TypeScript source. Descriptions come from TSDoc on the prop, so this table cannot drift from the component.

Prop	Type	Default	Description
`trigger`*	`ReactNode`	—	The element the popover hangs off. Rendered `asChild`, so pass exactly one node — and one that forwards its ref to a DOM element. A plain function component swallows the ref, Radix never gets an anchor to measure, and the panel renders unpositioned at `translate(0, -200%)` (i.e. invisible above the viewport). `ui/Button` and any `React.forwardRef` wrapper are fine.
`options`*	`string[]`	—	The layer names available to filter on. An empty array is a real state: the list is replaced by "No layers available" and Apply goes disabled.
`open`	`boolean`	—	Controlled open state. Leave undefined to let the component own it.
`defaultOpen`	`boolean`	`false`	Uncontrolled initial open state, so an open popover is a static snapshot.
`onOpenChange`	`(open: boolean) => void`	—	Undocumented — add TSDoc to the prop in the library.
`initialLayers`	`string[]`	—	Checked on open. The selection resets to this every time the popover opens.
`onApply`	`(layers: string[]) => void`	—	Fired with the selection when Apply is pressed; the popover then closes.
`title`	`string`	`"Filter by layer"`	Header text above the list.
`emptyLabel`	`string`	`"No layers available"`	Shown in place of the list when `options` is empty.
`applyLabel`	`string`	`"Apply"`	Label on the confirm button.
`className`	`string`	—	Merged onto the popover panel.

Reference

Transcribed from the component audit. If this disagrees with the source, the source is right.

Source: src/components/products/LayerFilterPopover.tsx
Portability: Copies across unchanged — only the utils import path moves.