Product picker
betaProduct field: product chips plus Add, built on the canonical RecordSelect in adding mode, with free text.
3 Oct 2026 (AD): deprecated → beta. The duplicate shell is gone (AddRefMenu removed, 4a9a934e0; ProductPicker on RecordSelect since 1 Oct); it is a composition over RecordSelect, not a second picker. Migrating its consumers would rebuild the same composition each time. Canon after: move into @acrm/ui with stories (Default · States · Composition) + baselines, usage/a11y rewritten. 3 Oct 2026: shell is DS.RecordRefField in @acrm/ui (acrm !4502); EntityPicker / ProductPicker are data wrappers around it, DOM 1:1. Focus returns to Přidat on close. Registry repaired 17 Oct 2026 (review F1): AddRefMenu.tsx is gone from main (file reference dropped). Registry repaired 17 Oct 2026 (review F2): removed classes with no CSS definition and no TSX use on main: .acrm-popover.eref-add-pop.
Used in 3 files · 3 areas · 3× — components/EntityPicker, components/assistant, components/callwrapup
apps/web <ProductPicker> <RecordRefField>.eref-field .eref-add .add-ref .acrm-recordselect-search +5SourceLegacy card Inputs.htmlImport
Not exported from @acrm/ui — <ProductPicker>, <RecordRefField> lives in the app (apps/web/src/components/ProductPicker.tsx). Reuse the CSS classes below, or move the component into the package first.
Props
ProductPicker
No props extracted (not in props.json).
RecordRefField packages/ui/src/components/RecordRefField.tsx
| Name | Type | Default | Description |
|---|---|---|---|
label | string | — | Nadpis pole (.acrm-field-label). Bez něj se kreslí jen tokeny a „Přidat“ bez obalu .acrm-field (ProductPicker vložený do řádku). Jméno listboxu nese panel.ariaLabel. |
hideLabel | boolean | false | Skryje viditelný nadpis (řádek railu má svůj klíč vlevo); obal .acrm-field zůstává. |
addLabel | string | 'Přidat' | Text afordance (default „Přidat“). |
children | ReactNode | — | Tokeny — typicky <EntityRef removable> / náhled záznamu. |
canAdd | boolean | true | false = limit dosažen, „Přidat“ se nekreslí. |
open * | boolean | — | — |
onOpenChange * | (open: boolean) => void | — | — |
panel * | Omit<RecordSelectProps, 'anchorRef' | 'value' | 'onClose'> | — | Panel = RecordSelect v režimu přidávání; kotvu, zavření a value drží pole. |
CSS classes
Files
apps/web/src/components/ProductPicker.tsxapps/web/src/components/useAddRefPopover.tspackages/ui/src/components/RecordRefField.tsxpackages/ui/stories/record-ref-field.stories.tsxapps/web/src/ds/inputs.cssapps/web/src/ds.cssapps/web/src/ds/task-form.css