filterMenuKeys

Why JS: a filterable picker is typed into and steered from its filter field, and only script hears those keys.

tsx

import { filterMenuKeys } from "@sdxc/ui/app";

View code

tsx

// FilterMenu's list carries filterMenuKeys(), so ↑↓ move and Enter picks while focus stays in the filter.
<FilterMenu
	id="ref-picker"
	mode="navigate"
	tabs
	trigger={<><GitBranchIcon size={16} aria-hidden="true" /> main</>}
	groups={[
		{ label: "Branches", items: branches.map((branch) => ({
			value: branch.name,
			label: branch.name,
			href: `/acme/delta/tree/${branch.name}`,
			badge: branch.isDefault ? "default" : undefined,
			selected: branch.name === current,
		})) },
		{ label: "Tags", items: tags.map((tag) => ({ value: tag, label: tag, href: `/acme/delta/tree/${tag}` })) },
	]}
	filterAction="/acme/delta/branches"
	footer={<a href="/acme/delta/branches">View all branches</a>}
	labels={{
		title: "Switch branches/tags",
		filter: "Find a branch…",
		empty: "Nothing to show",
		more: "{count} more",
		save: "Save",
		tabs: "Ref type",
	}}
/>

Usage

Applied to the list's root: listens for typing and keys in the filter field, changes to the row and tab inputs, and pointer moves over rows, and hands each to handlers. Escape is taken from the search field, so it closes the menu instead of only clearing the text.

Signature

typescript

filterMenuKeys(handlers: FilterMenuKeys.Handlers): MixinDescriptor<HTMLElement>

Parameters

Parameter	Type	Required	Description
`handlers`	`FilterMenuKeys.Handlers`	Yes

Examples

tsx

<div mix={[filterMenuKeys({ input: "refs-filter", onFilter, onMove, onChoose, onClose, onTab, onPick, onHover })]}>…</div>

The events, constants and types its module publishes, each imported from @sdxc/ui/app too.

Constant

FILTER_MENU_ROW_SLOT

The slot every row of the list carries, with its entry's key in data-key.

typescript

const FILTER_MENU_ROW_SLOT = "filter-menu-row"

Interface

FilterMenuKeys.Handlers

What the list does for each gesture; the latest handlers always answer.

Member	Type	Required	Description
`input`	`string`	Yes	The filter field's id; typing and keys count only there.
`onFilter`	`void`	Yes	The filter field's text changed.
`onMove`	`void`	Yes	↓ (`1`) or ↑ (`-1`) moved the highlighted row.
`onChoose`	`void`	Yes	Enter picked the highlighted row.
`onClose`	`void`	Yes	Escape closed the menu, whatever the field holds.
`onTab`	`void`	Yes	A tab radio, marked `data-tab-index`, was chosen.
`onPick`	`void`	Yes	A row's radio or checkbox changed.
`onHover`	`void`	Yes	The pointer moved onto the row whose key this is.