Picker menu
canonAnchored menu of items with optional check marks and icons.
Slots added 27 Sep 2026 (acrm !3909, wave D): separator rows `{ key, sep: true }` with role=separator (edge/double separators dropped, same rule as Menu button), per-item `ariaLabel` for rows whose visible text is shorter than the full sentence, and a clear row (`clearLabel`/`clearIcon`/`onClear`) — role=menuitem, no check, NOT danger (clearing a value is reversible; red is only for deleting data). No group headings. Registry repaired 17 Oct 2026 (review F6): added exported PickerMenuPanel to react[].
Used in 51 files · 36 areas · 64× — components/AppShell, components/FilterBar, components/ai-employees, components/assistant, components/calendar, components/callwrapup …
@acrm/ui <PickerMenu> <PickerMenuPanel>.acrm-popover .acrm-popover-item .acrm-popover-sep .acrm-popover-emptySourceStoryLegacy card popover.htmlImport
import { PickerMenu, PickerMenuPanel } from '@acrm/ui'Props
PickerMenu packages/ui/src/components/PickerMenu.tsx
| Name | Type | Default | Description |
|---|---|---|---|
items * | PickerMenuRow[] | — | — |
value * | string | null | — | — |
onPick * | (key: string) => void | — | — |
header | string | — | Na desktopu neviditelné jméno nabídky (ariaLabel), na telefonu nadpis šuplíku. |
align | 'start' | 'end' | — | — |
clearLabel | string | — | Popisek řádku „bez hodnoty" (např. „Bez výpočtu", „Zrušit"). Bez onClear se řádek nekreslí. |
clearIcon | string | — | Glyf řádku „bez hodnoty"; výchozí x. |
onClear | () => void | — | Vlastní řádek za oddělovačem na konci — volající si sám nastaví hodnotu na null/undefined. |
searchPlaceholder | string | — | Zapne řádek hledání nad položkami (dlouhý číselník); text = placeholder i jméno pole. |
emptyLabel | string | — | Věta místo řádků, když hledání nic nenajde — nebo když nabídka nemá položky vůbec (načítání, chyba, prázdná sada: host pošle items=[] a větu stavu). |
width | number | — | Pevná šířka nabídky na desktopu — dlouhý číselník s hledáním nesmí při psaní poskakovat. |
query | string | — | Řízený dotaz hledání (AD 1. 10. 2026, stejné pravidlo jako RecordSelect): když je query zadané, nabídka dotaz nedrží a změny hlásí přes onQueryChange — text žije u hostitele (např. „/" v composeru Áji). Bez query drží dotaz sama a při zavření ho zahodí. |
onQueryChange | (q: string) => void | — | — |
onEmptyBackspace | () => void | — | Backspace v PRÁZDNÉM hledání — host vrátí fokus tam, odkud nabídka vzešla (smaže „/"). |
actions | PickerMenuAction[] | — | Akční řádky pod seznamem za čarou — tvar 1:1 s CheckMenu ({key, label, icon, onClick}). Nejsou to hodnoty (žádná fajfka): „Nové zadání…", „Spravovat". Klik nabídku zavře. |
trigger * | (open: boolean) => ReactNode | — | Trigger element; dostane open pro stylování (např. .rvsw-btn.open). |
disabled | boolean | — | — |
defaultOpen | boolean | false | Otevřít hned po mountu — menu jako EDITOR pole railu (P430): editace = otevřené menu. |
onOpenChange | (open: boolean) => void | — | Změna otevření (i zavření bez výběru: Esc, klik mimo) — hostitel-editor podle ní ukončí editaci. |
PickerMenuPanel packages/ui/src/components/PickerMenu.tsx
| Name | Type | Default | Description |
|---|---|---|---|
items * | PickerMenuRow[] | — | — |
value * | string | null | — | — |
onPick * | (key: string) => void | — | — |
header | string | — | Na desktopu neviditelné jméno nabídky (ariaLabel), na telefonu nadpis šuplíku. |
align | 'start' | 'end' | 'start' | — |
clearLabel | string | — | Popisek řádku „bez hodnoty" (např. „Bez výpočtu", „Zrušit"). Bez onClear se řádek nekreslí. |
clearIcon | string | 'x' | Glyf řádku „bez hodnoty"; výchozí x. |
onClear | () => void | — | Vlastní řádek za oddělovačem na konci — volající si sám nastaví hodnotu na null/undefined. |
searchPlaceholder | string | — | Zapne řádek hledání nad položkami (dlouhý číselník); text = placeholder i jméno pole. |
emptyLabel | string | 'Nic nenalezeno' | Věta místo řádků, když hledání nic nenajde — nebo když nabídka nemá položky vůbec (načítání, chyba, prázdná sada: host pošle items=[] a větu stavu). |
width | number | — | Pevná šířka nabídky na desktopu — dlouhý číselník s hledáním nesmí při psaní poskakovat. |
query | string | — | Řízený dotaz hledání (AD 1. 10. 2026, stejné pravidlo jako RecordSelect): když je query zadané, nabídka dotaz nedrží a změny hlásí přes onQueryChange — text žije u hostitele (např. „/" v composeru Áji). Bez query drží dotaz sama a při zavření ho zahodí. |
onQueryChange | (q: string) => void | — | — |
onEmptyBackspace | () => void | — | Backspace v PRÁZDNÉM hledání — host vrátí fokus tam, odkud nabídka vzešla (smaže „/"). |
actions | PickerMenuAction[] | — | Akční řádky pod seznamem za čarou — tvar 1:1 s CheckMenu ({key, label, icon, onClick}). Nejsou to hodnoty (žádná fajfka): „Nové zadání…", „Spravovat". Klik nabídku zavře. |
anchorEl * | HTMLElement | null | — | — |
open * | boolean | — | — |
onClose * | () => void | — | — |
CSS classes
.acrm-popover.acrm-popover-item.acrm-popover-sep.acrm-popover-empty