Review rodiny Select — nálezy, bug list, rozhodnutí pro AD

Datum: 2. 9. 2026 večer · reviewer: Claude (jako senior UX/UI) · zadal Štěpán (AD) Předmět: rodina select (10 podkomponent) po dávce Forms & input, posouzená novým postupem (schválen 2. 9. 2026: inventura použití → stavová matice z kódu → story = port → design gate → web nelže → validator → tikety až po merge + AD). Ověřeno proti: acrm origin/main 4f9af7cb (klon /root/acrm-main), stories MR !2824 (větev polish/ds-select-family-stories, b3bb971d, open, no-auto-merge), DS repo site/registry.json + docs/select/* (a6112aa), web :3777/ds/components/select/<sub>?tab=examples (screenshoty všech 10 stránek v /root/.claude/jobs/1ba41f0e/tmp/review-select-*.png).

0. Shrnutí

Rodina je dobře inventarizovaná (docs znají všech 20+ pickerů v appce a správně pojmenovávají duplicity), ale web dnes lže na všech deseti stránkách: registr odkazuje na 41 story id z MR !2824, které v buildu katalogu (main) neexistují — každá sekce Examples ukazuje Ladle „Story not found", a přitom coverage svítí „stories ✓". To je přesně to, co má bod 5 nového postupu zakázat. Vedle toho se opakuje D10 z Buttonu (legacy story vedle nové v Defaultu u 3 subů) a D4 (vypůjčená story components--select--dropdown-types jako „Composition" u Entity/Product pickeru).

Z 10 podkomponent jsou všechny použité (žádný kandidát bez použití), ale dvě jsou tenké (Multi-select 1 místo, Combobox 1 místo) a dvě nejsou prvky, ale duplicity pláště (Entity picker, Product picker = AddRefMenu nad kanonickými řádky Record selectu — docs to samy říkají). Stories: žádná Composition není port (0× soubor:řádek, 7 vymyšlených layoutů, 2 porušují pravidlo skládané komponenty), 6 variant/stavů ukazuje props, které appka nepoužívá, a Rail picker ukazuje stav „busy", který žádné CSS nemá (repríza ACRM-79).

V appce: tři field-triggery jedné rodiny mají tři různé stavové sady (Select má hover+error, Record select nemá hover ani error, Combobox nemá hover/error/disabled ani focus ring bez otevřeného seznamu), single Record select kreslí checkbox místo fajfky (F261 — kanon je jen v RailPickerMenu), poslední nativní <select> žije v ChannelsPopoverEditor, a 10 dropdown plášťů stojí mimo Popover/useAnchoredMenu.

1. Nálezy per podkomponenta (ověřeno v kódu)

Inventura použití = grep '<Komponenta' v apps/web/src bez testů a bez DsInputsPage (galerie není použití).

1.1 Select (packages/ui/src/components/Select.tsx)

• Stavová matice z CSS (ds/inputs.css): trigger rest 227 · hover 244 (--surface-75) · placeholder 247 · open 262 (accent + halo) · error 266 (.is-error) · disabled 270 · ignored 278 (.is-select-ignored, 1 použití ImportPage) · focus = globální ring ds.css:2805. Chybí :active, loading, readonly (žádný z nich appka nepotřebuje). Řádky .acrm-popover-item (ds.css:1929): rest · hover 1943 · disabled 1946 · selected .chk 1997.
• Použití stavů v appce: disabled 10 souborů ✓, <option disabled> 2 ✓; className="is-error" 0, placeholder prop 0, required 0. Chyby formulářů jdou přes Field error pod polem, trigger se nikdy nečervená.
• Story States ukazuje rest · placeholder · disabled · error · open. Error a placeholder = stavy, které CSS má, ale appka nepoužívá (D5). .is-select-ignored (jediný app-only stav) ve story není.
• Story Composition „Město / Země" + „Jazyk s hintem" — bez soubor:řádek, vymyšleno (D4).
• Replika open stavu (select-shared.tsx MenuItem) emituje aria-checked, Select emituje aria-selected (D6).
• Default na webu = legacy components--inputs--select + nová components--select--default vedle sebe — repríza D10 (D2). Story soubor to výslovně hájí („its visual baseline depends on it") — baseline se přesune, není to důvod.

1.2 Multi-select (MultiSelect.tsx)

• Matice: sdílený .acrm-select-trigger (stavy jako Select); řádky .acrm-popover-item + .acrm-checkbox (inputs.css:660, on 683, mixed 687 — mixed komponenta neemituje). Listbox bez aria-multiselectable (A12).
• Použití: 1 místo (PersonRail, s placeholder); summary 0, disabled 0.
• Story Variants „custom summary" = prop bez použití (D5). „≤2 joined / >2 count" ✓ z kódu 399–406.
• Story Composition „filter row Kanály/Období" — vymyšleno; filtry aktivit v appce dělá CategoryFilterChip + CheckMenu, ne MultiSelect (D4).

1.3 Combobox (Combobox.tsx)

• Matice (inputs.css:323): pole rest · open 334 (accent + halo). Nic víc: žádný hover, error, disabled (komponenta nemá disabled prop, story to přiznává v Note), a input má outline: none → fokusované pole se zavřeným seznamem nemá žádný viditelný fokus (a11y.md to eviduje jako limit; je to A-bug, ne limit) (A1). Řádky .acrm-combobox-opt rest · .is-active 383.
• Použití: 1 místo (ChartAccountDialogs); leadingIcon 0, renderOption 0, emptyText 0 (přímo v <Combobox>).
• Story Variants „custom renderOption (icon + label)" a celá sekce „With icon & kbd" (3× leadingIcon, kbd slot neexistuje) = props bez použití (D5, D8).
• Story Composition „address form" — vymyšleno; jediné reálné použití je účetní dialog (D4).

1.4 Record select (RecordSelect.tsx)

• Matice (inputs.css:437): trigger rest (--fg-muted) · filled 454 · disabled 457 · open 475. Chybí :hover (Select trigger ho má) a .is-error — přitom Record select stojí ve 23 formulářích s clearable (assignee/owner) a 24× fullWidth ve formulářích s validací (A1). Panel: search 490, list 530, řádek 538 · hover 550 · .is-active 551 (nikdo neemituje — mrtvý selektor, A5) · .acrm-recordselect-ck 588 (RecordSelect neemituje, jen RailPickerMenu — F261, A2) · empty 598.
• Použití: 39 souborů; multi 2 (AiFormFields, ShareDialog), disabled 4, clearable 23, fullWidth 24, searchPlaceholder 14.
• Story Sizes = fullWidth (280 px vs 100 % kontejneru). To je layout prop, ne velikost — rodina nemá škálu velikostí (D9).
• Story States ✓ (placeholder · filled · disabled · open · open-empty); hover chybí v CSS → správně není ve story. Note poctivě přiznává F261.
• Story Composition „deal form Vlastník/Firma" — vymyšleno; DealDialog.tsx:584,642 používá EntityPicker, ne RecordSelect (D4).
• JSDoc komponenty: „Trigger otevíraný focusem" — kód otevírá jen onClick (A7). Search input bez aria-label (RailPickerMenu ho má), fokus se po zavření nevrací na trigger (Select vrací) (A7).

1.5 Nav select (NavSelect.tsx)

• Matice (ds.css:2650 .tchip): rest · hover 2666 · open 2669 (--active-surface) · focus globální. Bez disabled (komponenta ani CSS), bez active. Menu = PickerMenu.
• Použití: 15; icon= 14, align= 4; desc u options jsme v appce nenašli (0 v inline options).
• Story Variants „options with desc (count as tag)" = D5 (ověřit, zda desc někdo plní; jinak sekci škrtnout). „With icon & kbd" = chip ikony (arrows-sort, filter) — ikony ✓ používané, kbd neexistuje → přejmenovat obsah sekce, ne vymýšlet.
• Story Composition: SectionTopBar „Aktivita" + 2 NavSelecty + Spacer + primaryAction „Nová aktivita". Reálná AktivityPage.tsx:240–252: SectionTopBarTitle icon="inbox" · Spacer PŘED NavSelectem (chipy vpravo) · žádný primaryAction. Story navíc dává Spacer i primaryAction (SectionTopBar vkládá .vspace před primár sám, SectionTopBar.tsx:86) = dvě výplně (D4).

1.6 Picker menu (PickerMenu.tsx)

• Matice řádků .acrm-popover-item: rest · hover · disabled (:disabled 1946 — PickerItem nemá disabled, stav přes komponentu nedosažitelný) · selected .chk · .danger 2019 · .strong 2010 (0 emitentů v rodině). Trigger je render-prop (stav open dodá volající: .tchip.open, .rvsw-btn.open — 2 soubory).
• Použití: 11; header 7, dot (CrmDashboardPage, mail-glyphs) ✓, disabled 1 (deal-parts), align 1.
• Story States „trigger disabled (menu does not open)": PickerMenu.disabled jen odpojí klik a trigger musí být disabled sám (a11y.md: „does not disable the trigger visually or for AT") — story to zakrývá tím, že disabled dá Buttonu (A8). „row hover (--hover-surface) / danger row (static replica)": statická replika hover neukáže, popisek lže (D6).
• Story Composition „kebab menu — actions with separator and danger row": usage.md téže podkomponenty říká „Actions… use <Popover> directly… no check mark; Not: Picker menu". Kebab tedy patří rodině Popover; story porušuje pravidlo komponenty, kterou dokumentuje (D4). „Section title as switcher" ✓ odpovídá CompanyRecordPage/PipelinePage — chybí soubor:řádek.
• „With icon & kbd" = tytéž ikonové řádky jako Variants + živý trigger s dot → duplikát (D8).
• Default na webu = legacy components--popover-menu--picker-menu + nová (D2).

1.7 Check menu (app, components/CheckMenu.tsx + ds/check-menu.css)

• Matice: řádky .acrm-popover-item[menuitemcheckbox] + .acrm-checkbox; reorder .cm-reorder (grab/grabbing), .cm-dragging 0.45, .cm-drop-line 3 px. CheckMenuItem nemá disabled → řádek disabled nedosažitelný (story ho nepoužívá ✓).
• Použití: 2 (CategoryFilterChip, LayoutMenu s onReorder).
• Story Default/Composition chip: replika .tchip má filter · .v label · .k count za hodnotou. Reálný CategoryFilterChip.tsx:69–76: filter · .k label · .v summary · chevron. Pořadí i význam slotů obráceně (D4).
• Story Composition „⚙ layout menu": trigger button.acrm-icobtn v ručně kresleném řádku sekce. Reálný LayoutMenu.tsx:61–75: button.a.sb-cfg (tichá akce hlavičky, section-block.css:126, viditelná až po najetí na nadpis), ne icon button (D4). Popisek .k count neexistuje.
• Katalog nyní načítá check-menu.css (v MR) ✓; section-block.css ne → i správně portovaný trigger by se nevykreslil (D7).

1.8 Rail picker (app, components/RailPickerMenu.tsx)

• Matice: panel .acrm-recordselect-pop (bez vlastních stavů) · aria-busy (žádné CSS — jediné [aria-busy] v appce je reservation.css) · loading/empty = .acrm-recordselect-empty · single .acrm-recordselect-ck · multi .acrm-checkbox · kotva .rr-ev.rpk-anchor (record-rail.css:1090, --hover-surface) · patička .rpk-foot/.rpk-create (record-rail.css:1094–1105).
• Použití: 2 (OwnerPickerEditor mode="single", TagsEditor multi + footer + loading + busy).
• Story States „busy (aria-busy) — rows stay clickable" = vizuálně totéž co rest (žádné CSS) → repríza ACRM-79: story prezentuje neexistující stav (D6).
• Story Variants „with footer": .rpk-foot/.rpk-create jsou v record-rail.css, kterou katalog nenačítá — story vykreslí patičku bez linky a bez accentu a v komentáři to přiznává. Patička je součást panelu, ne railu → patří do inputs.css §7 (A6), nebo katalog načte record-rail.css (D7).
• Composition záměrně chybí (kotva = řádek railu, rodina Record rail) ✓ — ale kotva .rr-ev.rpk-anchor je v registru jako třída subu a na webu se nikde nekreslí.

1.9 Entity picker (app, EntityPicker.tsx + AddRefMenu.tsx)

• Fakt: 12 použití; plášť .acrm-popover.eref-add-pop + useAnchoredPanel = druhá implementace Popover + useAnchoredMenu (scroll/resize repozicuje místo zavření, bez scrimu, bez návratu fokusu). Řádky kanonické (.acrm-recordselect-opt s .mi-opt-ic dlaždicí místo avataru — třetí anatomie řádku). Docs to popisují správně („duplicate shell — consolidation candidate MR 15").
• Registr: status canon + Composition = vypůjčená components--select--dropdown-types, která EntityPicker vůbec nekreslí (panel D je popsán jako „RecordSelect multi / RailPickerMenu multi / TagsEditor"). Web ji přesto ukazuje jako jediný příklad Entity pickeru (D3).
• Verdikt: není samostatný prvek — je to Record select multi s async options + tokeny EntityRef removable (rodina Entity reference). Do konsolidace vést jako deprecated (cíl: Record select async), ne jako canon (R1).

1.10 Product picker (app, ProductPicker.tsx)

• Fakt: 2 použití; stejný plášť jako Entity picker; navíc řádek volného textu (P7) a stavová pilulka u draft produktů (P8). multi={false} 0 použití — docs ho popisují jako variantu.
• Registr/web: stejný problém jako 1.9 (vypůjčená story, D3). Docs „group heading pending AD gate V2" — v kódu žádný heading není ✓.
• Verdikt: jako 1.9 — Product picker = Entity picker s types=['product'] + volný text; jeden prvek, ne dva (R1).

1.11 Rodinová story „Dropdown types" (select.stories.tsx DropdownTypes)

• Čtyři panely A–D ze statických replik, popisky správně jmenují komponenty. Je to jediná story, která má smysl jako přehled rodiny — patří na stránku rodiny (/ds/components/select), ne do Composition Selectu ani jako výpůjčka jinam (D3).

2. Bug list — DS (web, registr, stories, docs)

3. Bug list — aplikace (kanon v kódu)

4. Rozhodnutí pro AD

5. Co teď

1. Web (bez AD, dnes): D1 (iframe jen pro story v buildu, coverage z buildu, pending hint s odkazem na MR), D12 (řádek „API" místo „props"). Restart element-inbox.service.
2. Registr + docs (bez AD, dnes): D2 legacy id pryč, D3 vypůjčené story pryč + dropdown-types jako rodinová story, D10 třídy, D11 docs; sub statusy zůstávají beta do AD.
3. MR !2824 (zůstává no-auto-merge): D4 Compositions přepsat jako porty s soubor:řádek, D5/D6/D8/D9 škrty, D7 vrstvy katalogu, legacy stories smazat + baseline přesunout, pnpm visual:update jen pro změněné. Brány: typecheck · lint · format:check · ds:validate:strict · ds:validate:usage.
4. acrm MR „select family — states & canon" (bez AD kromě R3/R4): A2, A5 mrtvé CSS, A6, A7, A10; validator: select-native-prefer-component → hard (po A3), nové pravidlo dropdown-shell-bespoke (warn). A1/A3/A8/A9/A11/A12 po odpovědích R1–R7.
5. AD kolo: R1–R8 jedna otázka po druhé (viz pravidlo one decision at a time); tikety rodiny se zavírají až po merge obou MR a potvrzení na :3777/ds/components/select.