@mortenbrudvik/waveui 0.10.0 → 0.11.0

package/dist/components/input/Option.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),i=require("../../lib/composeEventHandlers.cjs"),a=require("../../lib/classNames.cjs"),o=require("../../hooks/useId.cjs"),s=require("../../hooks/useMergedRefs.cjs"),c=require("../../hooks/useListbox.cjs"),l=require("../../hooks/useDismiss.cjs"),u=require("../portal/Portal.cjs"),d=require("../../lib/styles.cjs"),f=require("../../lib/icons.cjs"),p=require("../../hooks/usePopupPosition.cjs");let m=require("react");m=e.__toESM(m,1);let h=require("react/jsx-runtime");var g=m.createContext(!0);g.displayName=`OptionCheckContext`;var _=t.cn(`flex cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-body-1 text-foreground`,`bg-(--option-bg) [--option-bg:transparent]`,`not-disabled:not-aria-disabled:hover:[--option-bg:var(--wave-subtle-hover)]`,`data-[selected]:[--option-bg:var(--wave-subtle-selected)]`,`data-[active]:[--option-bg:var(--wave-subtle-hover)]`,`data-[active]:outline-2 data-[active]:-outline-offset-2 data-[active]:outline-ring`,`aria-disabled:cursor-not-allowed aria-disabled:text-muted-foreground`),v=class{counts=new Map;listeners=new Set;subscribe=e=>(this.listeners.add(e),()=>{this.listeners.delete(e)});add(e){return this.counts.set(e,(this.counts.get(e)??0)+1),this.notify(),()=>{let t=(this.counts.get(e)??1)-1;t>0?this.counts.set(e,t):this.counts.delete(e),this.notify()}}allHidden(e){if(e===void 0||this.counts.size===0)return!1;for(let t of this.counts.keys())if(!e.isHidden(t))return!1;return!0}notify(){for(let e of[...this.listeners])e()}},y=m.createContext([]);y.displayName=`OptionGroupContext`;var b=m.createContext(!1);b.displayName=`OptionGroupHiddenContext`;function x(e){let t=m.useContext(y);m.useLayoutEffect(()=>{if(t.length===0)return;let n=t.map(t=>t.add(e));return()=>{for(let e of n)e()}},[t,e])}var S=`forced-colors:border-[GrayText] forced-colors:bg-[Canvas]`,C=`forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none`;function w(e,{selected:n,multiselect:i,disabled:o}){if(!i){let i=t.cn(a.optionClassNames.checkIcon,`shrink-0`,!n&&`invisible`);return e===void 0?(0,h.jsx)(f.CheckIcon,{className:i}):r.renderSlot(e,`span`,t.cn(`inline-flex`,i),{"aria-hidden":!0})}let s;s=o?t.cn(`border-current bg-transparent`,S):n?t.cn(`border-primary bg-primary text-primary-foreground`,d.forcedColors.selectedLeaf):t.cn(`border-stroke-accessible bg-transparent`,d.forcedColors.control);let c=o?C:void 0;return(0,h.jsx)(`span`,{"aria-hidden":`true`,"data-wave-option-box":``,className:t.cn(a.optionClassNames.indicator,`flex h-4 w-4 shrink-0 items-center justify-center rounded-xs border`,s),children:n&&(e===void 0?(0,h.jsx)(f.CheckIcon,{size:12,className:t.cn(a.optionClassNames.checkIcon,c)}):r.renderSlot(e,`span`,t.cn(a.optionClassNames.checkIcon,`inline-flex shrink-0`,c),{"aria-hidden":!0}))})}function T(e){let{value:o,label:s,textValue:l,disabled:u=!1,hidden:f=!1,checkIcon:p,className:v,children:y,onClick:S,onMouseDown:C,onPointerMove:T,ref:E,...D}=e,O=m.useContext(g),k=m.useContext(b),{selected:A,multiselect:j,optionProps:M}=c.useListboxOption({value:o,label:s,textValue:l,disabled:u,hidden:f||k},E);x(o);let{ref:N,onClick:P,onMouseDown:F,onPointerMove:I,...L}=M,R=p!=null&&r.slotRendersContent(p),z=p!=null&&!R;return m.useEffect(()=>{z&&n.warnOnce(`Option:checkIcon-empty`,"Option: `checkIcon` renders nothing, so the default check shows: a selected option must show its state. Pass a glyph, or leave it unset.")},[z]),(0,h.jsxs)(`li`,{"data-value":o,...D,...L,ref:N,onClick:i.composeEventHandlers(S,P),onMouseDown:i.composeEventHandlers(C,F),onPointerMove:i.composeEventHandlers(T,I),className:t.cn(a.optionClassNames.root,_,A&&!(j&&O)&&d.forcedColors.selectedContainer,v),children:[O&&w(R?p:void 0,{selected:A,multiselect:j,disabled:u}),(0,h.jsx)(`span`,{className:t.cn(a.optionClassNames.content,`min-w-0 flex-1`),children:y??o})]})}T.displayName=`Option`;var E=m.memo(T);E.displayName=`Option`;var D=c.markListboxElement(E,`option`),O=1,k=3;function A(e){if(e===null)return``;if(e.nodeType===k)return e.textContent??``;if(e.nodeType!==O)return``;let t=e;if(t.getAttribute(`aria-hidden`)===`true`||t.hasAttribute(`hidden`))return``;let n=t.getAttribute(`aria-label`)?.trim();if(n)return n;if(t.localName===`img`)return t.getAttribute(`alt`)??``;let r=``;for(let e of Array.from(t.childNodes))r+=A(e);return r}function j(e,t,n,r,i){return n!==void 0&&n!==r&&n.trim()!==``||t!==void 0&&t.trim()!==``?!0:n===r?typeof e==`string`||typeof e==`number`?String(e).trim()!==``:A(i).trim()!==``:!1}var M=`OptionGroup:unnamed`;function N({label:e,className:i,children:s,hidden:l,"aria-label":u,"aria-labelledby":d,ref:f,...p}){let g=o.useId(`option-group`),_=m.useContext(c.ListboxContext)?.store,x=m.useContext(y),S=m.useContext(b)||!!l,[C]=m.useState(()=>new v),w=m.useMemo(()=>[...x,C],[x,C]),T=m.useCallback(e=>{let t=C.subscribe(e),n=_?.subscribe(e);return()=>{t(),n?.()}},[C,_]),E=m.useSyncExternalStore(T,()=>C.allHidden(_),()=>!1),D=r.slotRendersContent(e),O=d??(u===void 0&&D?g:void 0),k=m.useRef(null);return m.useEffect(()=>{n.isDev&&!n.hasWarned(M)&&(j(e,u,O,g,k.current)||n.warnOnce(M,"OptionGroup: the group has no name. Give it a text `label`, `aria-label` or `aria-labelledby`."))},[e,u,O,g]),(0,h.jsxs)(`li`,{...p,ref:f,role:`presentation`,hidden:l||E||void 0,className:t.cn(a.optionGroupClassNames.root,i),children:[D&&(0,h.jsx)(`div`,{ref:k,id:g,role:`presentation`,className:t.cn(a.optionGroupClassNames.label,`px-3 py-1 text-caption-1 font-semibold text-muted-foreground`),children:r.materialiseSlotContent(e)}),(0,h.jsx)(`ul`,{role:`group`,"aria-label":u,"aria-labelledby":O,className:a.optionGroupClassNames.list,children:(0,h.jsx)(b.Provider,{value:S,children:(0,h.jsx)(y.Provider,{value:w,children:s})})})]})}N.displayName=`OptionGroup`;var P=c.markListboxElement(N,`group`);function F({value:e,children:t}){return(0,h.jsx)(c.ListboxContext.Provider,{value:e,children:t})}F.displayName=`ListboxProvider`;function I(e){let{open:t,surfaceOpen:n,onDismiss:r,rootRef:i,anchorRef:a}=e,o=m.useRef(null),{setReference:c,setFloating:u,floatingProps:d}=p.usePopupPosition({open:n,side:`bottom`,align:`start`,matchReferenceWidth:!0,fitViewport:!0}),{layerId:f}=l.useDismiss({open:t,onDismiss:e=>r(e),refs:[i,o],anchorRef:a,kind:`listbox`,escape:n,focusOutside:!0});return{layerId:f,setReference:c,surfaceRef:s.useMergedRefs(o,u),floatingProps:d}}function L(e){e.preventDefault()}function R(e){let{listbox:n,layerId:r,surfaceRef:i,floatingProps:o,open:s,expanded:c,emptyContent:l,"aria-label":d,"aria-labelledby":f,showCheck:p=!0,listClassName:m,surfaceClassName:_,children:v}=e,y=(0,h.jsx)(g.Provider,{value:p,children:(0,h.jsx)(F,{value:n.context,children:(0,h.jsx)(`ul`,{...n.getListboxProps(),"aria-label":d,"aria-labelledby":f,hidden:!c||void 0,className:t.cn(a.listboxSurfaceClassNames.list,`min-h-0 max-h-60 overflow-auto`,m),children:v})})});return!c&&(!s||c||l==null)?y:(0,h.jsxs)(h.Fragment,{children:[!c&&y,(0,h.jsx)(u.Portal,{layerId:r,children:(0,h.jsx)(`div`,{ref:i,...o,"data-wave-listbox-surface":``,onMouseDown:L,className:t.cn(a.listboxSurfaceClassNames.root,`flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4`,_),children:c?y:l})})]})}R.displayName=`ListboxSurface`,exports.ListboxProvider=F,exports.ListboxSurface=R,exports.Option=D,exports.OptionGroup=P,exports.useListboxPopup=I;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),i=require("../../lib/composeEventHandlers.cjs"),a=require("../../lib/classNames.cjs"),o=require("../../hooks/useId.cjs"),s=require("../../hooks/useMergedRefs.cjs"),c=require("../../hooks/useListbox.cjs"),l=require("../../hooks/useDismiss.cjs"),u=require("../portal/Portal.cjs"),d=require("../../lib/styles.cjs"),f=require("../../lib/icons.cjs"),p=require("../../hooks/usePopupPosition.cjs");let m=require("react");m=e.__toESM(m,1);let h=require("react/jsx-runtime");var g=m.createContext(!0);g.displayName=`OptionCheckContext`;var _=t.cn(`flex cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-body-1 text-foreground`,`bg-(--option-bg) [--option-bg:transparent]`,`not-disabled:not-aria-disabled:hover:[--option-bg:var(--wave-subtle-hover)]`,`data-[selected]:[--option-bg:var(--wave-subtle-selected)]`,`data-[active]:[--option-bg:var(--wave-subtle-hover)]`,`data-[active]:outline-2 data-[active]:-outline-offset-2 data-[active]:outline-ring`,`aria-disabled:cursor-not-allowed aria-disabled:text-muted-foreground`),v=class{counts=new Map;listeners=new Set;subscribe=e=>(this.listeners.add(e),()=>{this.listeners.delete(e)});add(e){return this.counts.set(e,(this.counts.get(e)??0)+1),this.notify(),()=>{let t=(this.counts.get(e)??1)-1;t>0?this.counts.set(e,t):this.counts.delete(e),this.notify()}}allHidden(e){if(e===void 0||this.counts.size===0)return!1;for(let t of this.counts.keys())if(!e.isHidden(t))return!1;return!0}notify(){for(let e of[...this.listeners])e()}},y=m.createContext([]);y.displayName=`OptionGroupContext`;var b=m.createContext(!1);b.displayName=`OptionGroupHiddenContext`;function x(e){let t=m.useContext(y);m.useLayoutEffect(()=>{if(t.length===0)return;let n=t.map(t=>t.add(e));return()=>{for(let e of n)e()}},[t,e])}var S=`forced-colors:border-[GrayText] forced-colors:bg-[Canvas]`,C=`forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none`;function w(e,{selected:n,multiselect:i,disabled:o}){if(!i){let i=t.cn(a.optionClassNames.checkIcon,`shrink-0`,!n&&`invisible`);return e===void 0?(0,h.jsx)(f.CheckIcon,{className:i}):r.renderSlot(e,`span`,t.cn(`inline-flex`,i),{"aria-hidden":!0})}let s;s=o?t.cn(`border-current bg-transparent`,S):n?t.cn(`border-primary bg-primary text-primary-foreground`,d.forcedColors.selectedLeaf):t.cn(`border-stroke-accessible bg-transparent`,d.forcedColors.control);let c=o?C:void 0;return(0,h.jsx)(`span`,{"aria-hidden":`true`,"data-wave-option-box":``,className:t.cn(a.optionClassNames.indicator,`flex h-4 w-4 shrink-0 items-center justify-center rounded-xs border`,s),children:n&&(e===void 0?(0,h.jsx)(f.CheckIcon,{size:12,className:t.cn(a.optionClassNames.checkIcon,c)}):r.renderSlot(e,`span`,t.cn(a.optionClassNames.checkIcon,`inline-flex shrink-0`,c),{"aria-hidden":!0}))})}function T(e){let{value:o,label:s,textValue:l,disabled:u=!1,hidden:f=!1,checkIcon:p,className:v,children:y,onClick:S,onMouseDown:C,onPointerMove:T,ref:E,...D}=e,O=m.useContext(g),k=m.useContext(b),{selected:A,multiselect:j,optionProps:M}=c.useListboxOption({value:o,label:s,textValue:l,disabled:u,hidden:f||k},E);x(o);let{ref:N,onClick:P,onMouseDown:F,onPointerMove:I,...L}=M,R=p!=null&&r.slotRendersContent(p),z=p!=null&&!R;return m.useEffect(()=>{z&&n.warnOnce(`Option:checkIcon-empty`,"Option: `checkIcon` renders nothing, so the default check shows: a selected option must show its state. Pass a glyph, or leave it unset.")},[z]),(0,h.jsxs)(`li`,{"data-value":o,...D,...L,ref:N,onClick:i.composeEventHandlers(S,P),onMouseDown:i.composeEventHandlers(C,F),onPointerMove:i.composeEventHandlers(T,I),className:t.cn(a.optionClassNames.root,_,A&&!(j&&O)&&d.forcedColors.selectedContainer,v),children:[O&&w(R?p:void 0,{selected:A,multiselect:j,disabled:u}),(0,h.jsx)(`span`,{className:t.cn(a.optionClassNames.content,`min-w-0 flex-1`),children:y??o})]})}T.displayName=`Option`;var E=m.memo(T);E.displayName=`Option`;var D=c.markListboxElement(E,`option`),O=1,k=3;function A(e){if(e===null)return``;if(e.nodeType===k)return e.textContent??``;if(e.nodeType!==O)return``;let t=e;if(t.getAttribute(`aria-hidden`)===`true`||t.hasAttribute(`hidden`))return``;let n=t.getAttribute(`aria-label`)?.trim();if(n)return n;if(t.localName===`img`)return t.getAttribute(`alt`)??``;let r=``;for(let e of Array.from(t.childNodes))r+=A(e);return r}function j(e,t,n,r,i){return n!==void 0&&n!==r&&n.trim()!==``||t!==void 0&&t.trim()!==``?!0:n===r?typeof e==`string`||typeof e==`number`?String(e).trim()!==``:A(i).trim()!==``:!1}var M=`OptionGroup:unnamed`;function N({label:e,className:i,children:s,hidden:l,"aria-label":u,"aria-labelledby":d,ref:f,...p}){let g=o.useId(`option-group`),_=m.useContext(c.ListboxContext)?.store,x=m.useContext(y),S=m.useContext(b)||!!l,[C]=m.useState(()=>new v),w=m.useMemo(()=>[...x,C],[x,C]),T=m.useCallback(e=>{let t=C.subscribe(e),n=_?.subscribe(e);return()=>{t(),n?.()}},[C,_]),E=m.useSyncExternalStore(T,()=>C.allHidden(_),()=>!1),D=r.slotRendersContent(e),O=d??(u===void 0&&D?g:void 0),k=m.useRef(null);return m.useEffect(()=>{n.isDev&&!n.hasWarned(M)&&(j(e,u,O,g,k.current)||n.warnOnce(M,"OptionGroup: the group has no name. Give it a text `label`, `aria-label` or `aria-labelledby`."))},[e,u,O,g]),(0,h.jsxs)(`li`,{...p,ref:f,role:`presentation`,hidden:l||E||void 0,className:t.cn(a.optionGroupClassNames.root,i),children:[D&&(0,h.jsx)(`div`,{ref:k,id:g,role:`presentation`,className:t.cn(a.optionGroupClassNames.label,`px-3 py-1 text-caption-1 font-semibold text-muted-foreground`),children:r.materialiseSlotContent(e)}),(0,h.jsx)(`ul`,{role:`group`,"aria-label":u,"aria-labelledby":O,className:a.optionGroupClassNames.list,children:(0,h.jsx)(b.Provider,{value:S,children:(0,h.jsx)(y.Provider,{value:w,children:s})})})]})}N.displayName=`OptionGroup`;var P=c.markListboxElement(N,`group`);function F({value:e,children:t}){return(0,h.jsx)(c.ListboxContext.Provider,{value:e,children:t})}F.displayName=`ListboxProvider`;function I(e){let{open:t,surfaceOpen:n,onDismiss:r,rootRef:i,anchorRef:a}=e,o=m.useRef(null),{setReference:c,setFloating:u,floatingProps:d}=p.usePopupPosition({open:n,side:`bottom`,align:`start`,matchReferenceWidth:!0,fitViewport:!0}),{layerId:f}=l.useDismiss({open:t,onDismiss:e=>r(e),refs:[i,o],anchorRef:a,kind:`listbox`,escape:n,focusOutside:!0});return{layerId:f,setReference:c,surfaceRef:s.useMergedRefs(o,u),floatingProps:d}}function L(e){e.preventDefault()}function R(e){let{listbox:n,layerId:r,surfaceRef:o,floatingProps:c,open:l,expanded:d,emptyContent:f,"aria-label":p,"aria-labelledby":m,showCheck:_=!0,listClassName:v,surfaceClassName:y,listProps:b,children:x}=e,{ref:S,onMouseDown:C,...w}=b??{},T=n.getListboxProps(),E=s.useMergedRefs(S,T.ref),D=(0,h.jsx)(g.Provider,{value:_,children:(0,h.jsx)(F,{value:n.context,children:(0,h.jsx)(`ul`,{...w,...T,"aria-multiselectable":T[`aria-multiselectable`],"aria-activedescendant":T[`aria-activedescendant`],onMouseDown:i.composeEventHandlers(C,T.onMouseDown),ref:E,"aria-label":p,"aria-labelledby":m,hidden:!d||void 0,className:t.cn(a.listboxSurfaceClassNames.list,`min-h-0 max-h-60 overflow-auto`,v),children:x})})});return!d&&(!l||d||f==null)?D:(0,h.jsxs)(h.Fragment,{children:[!d&&D,(0,h.jsx)(u.Portal,{layerId:r,children:(0,h.jsx)(`div`,{ref:o,...c,"data-wave-listbox-surface":``,onMouseDown:L,className:t.cn(a.listboxSurfaceClassNames.root,`flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4`,y),children:d?D:f})})]})}R.displayName=`ListboxSurface`,exports.ListboxProvider=F,exports.ListboxSurface=R,exports.Option=D,exports.OptionGroup=P,exports.useListboxPopup=I;
 //# sourceMappingURL=Option.cjs.map

package/dist/components/input/Option.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Option.cjs","names":["React","cn","optionClassNames","CheckIcon","renderSlot","forcedColors","useListboxOption","slotRendersContent","composeEventHandlers","useId","ListboxContext","isDev","hasWarned","optionGroupClassNames","materialiseSlotContent","usePopupPosition","useDismiss","useMergedRefs","listboxSurfaceClassNames","_Fragment","Portal","require_runtime","require_cn","require_dev","require_slot","require_composeEventHandlers","require_classNames","require_useId","require_useMergedRefs","require_useListbox","require_useDismiss","require_Portal","require_styles","require_icons","require_usePopupPosition","react","react_jsx_runtime","OptionCheckContext","OPTION_CLASSES","OptionGroupMembers","listener","value","count","store","OptionGroupContext","OptionGroupHiddenContext","useOptionGroupMembership","groups","removes","group","remove","DISABLED_BOX_FORCED_COLORS","DISABLED_GLYPH_FORCED_COLORS","renderCheck","multiselect","classes","selected","glyph","boxClasses","disabled","glyphClasses","OptionImpl","rest","props","showCheck","groupHidden","hidden","ref","optionRef","selectOption","pressOption","highlightOption","optionAttributes","optionProps","checkIconRenders","checkIcon","checkIconEmpty","onClick","onMouseDown","onPointerMove","className","children","MemoOption","Option","ELEMENT_NODE","TEXT_NODE","nameText","node","element","ownLabel","text","child","groupHasName","labelledBy","labelId","ariaLabel","label","heading","UNNAMED_GROUP_WARNING","OptionGroupImpl","ariaLabelledBy","parentGroups","hiddenByConsumer","members","subscribe","unsubscribeMembers","unsubscribeStore","empty","hasLabel","headingRef","OptionGroup","ListboxProvider","useListboxPopup","options","surfaceElementRef","surfaceOpen","onDismiss","reason","rootRef","setFloating","preventMouseDown","event","ListboxSurface","list","listbox","expanded","listClassName","emptyContent","surfaceRef","floatingProps","surfaceClassName"],"sources":["../../../src/components/input/Option.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  listboxSurfaceClassNames,\n  optionClassNames,\n  optionGroupClassNames,\n} from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { hasWarned, isDev, warnOnce } from '../../lib/dev';\nimport { CheckIcon } from '../../lib/icons';\nimport { materialiseSlotContent, renderSlot, slotRendersContent, type Slot } from '../../lib/slot';\nimport { forcedColors } from '../../lib/styles';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport type { DismissReason } from '../../hooks/useDismiss';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport {\n  ListboxContext,\n  markListboxElement,\n  useListboxOption,\n  type ListboxContextValue,\n  type ListboxStore,\n  type UseListboxResult,\n} from '../../hooks/useListbox';\nimport { Portal } from '../portal/Portal';\n\n/* ------------------------------------------------------------------ */\n/*  Option                                                             */\n/* ------------------------------------------------------------------ */\n\n/**\n * Props of {@link Option}, an option of a listbox (Listbox, Combobox, Dropdown or a custom\n * picker's list).\n */\nexport interface OptionProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'value'> {\n  /** Value associated with this option. Unique within its listbox. */\n  value: string;\n  /**\n   * Text shown in the combobox (Combobox input, Dropdown trigger) when this option is selected.\n   * Defaults to `textValue`, then the option's text content, then `value`. Pass it when the\n   * children are not plain text (icons, custom components).\n   */\n  label?: string;\n  /** Text matched by typeahead and filtering instead of the label. */\n  textValue?: string;\n  /**\n   * Whether the option is disabled: it stays in the list but can never be selected (a click, Enter\n   * and Space do nothing). Keyboard navigation and typeahead skip it, unless the listbox keeps\n   * disabled options focusable (`disabledOptionsFocusable`), where they reach it. It is drawn in\n   * the muted text colour, its check included: in a multi-select list the checkbox square takes\n   * that colour instead of the brand colour, checked or not.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Replaces the check glyph that marks the option while it is selected (decorative,\n   * `aria-hidden`); in a multi-select list the glyph is drawn inside the option's 16px checkbox\n   * square. The check is a required indicator, the sign of the selection that does not rely on\n   * colour: `null` and `undefined` keep the default glyph, and so does a value that renders\n   * nothing (`false`, `''`, an empty array), which also logs a development warning. Unlike\n   * `Combobox.expandIcon`, a value that renders nothing does not hide the indicator (Fluent's\n   * `checkIcon={null}` removes it).\n   * @default a check mark\n   */\n  checkIcon?: Slot<'span'>;\n  /**\n   * Hides the option, like a native `<option hidden>`: it is not shown, keyboard navigation and\n   * typeahead skip it, and it never becomes the active option. Its label stays known, so a\n   * selected hidden option (a placeholder) still shows in the combobox. The options of a hidden\n   * `OptionGroup` are hidden the same way.\n   * @default false\n   */\n  hidden?: boolean;\n  /** Ref to the option `<li>` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\n/** Whether options draw the selected check mark (P05-internal; TagPicker lists no selected options). */\nconst OptionCheckContext = React.createContext(true);\nOptionCheckContext.displayName = 'OptionCheckContext';\n\n/*\n * State is exposed as data attributes (C-CLASS): `data-active` (keyboard/pointer highlight),\n * `data-selected`, `data-disabled`. State classes come before the consumer's `className` in `cn()`.\n *\n * Backgrounds (input-pickers#20): one unconditional `bg-(--option-bg)` paints the option, and the\n * hover/selected/active variants only set `--option-bg`. A variant that set `background-color`\n * itself (class + attribute or pseudo-class) would out-specify a consumer's plain `bg-*` class in\n * the cascade even though `cn()` keeps it; instead tailwind-merge replaces `bg-(--option-bg)` with\n * the consumer's class, which is then the only background declaration on the option. A consumer\n * `data-[active]:bg-…` / `data-[selected]:bg-…` restyles a single state (it out-specifies the\n * unconditional reader). The active outline is the focus indicator and stays a state variant.\n *\n * A filtered-out option carries the `hidden` attribute; base.css's scoped `[hidden]` rule hides\n * it over `flex` and over a consumer's display class.\n */\nconst OPTION_CLASSES = cn(\n  'flex cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-body-1 text-foreground',\n  'bg-(--option-bg) [--option-bg:transparent]',\n  'not-disabled:not-aria-disabled:hover:[--option-bg:var(--wave-subtle-hover)]',\n  'data-[selected]:[--option-bg:var(--wave-subtle-selected)]',\n  'data-[active]:[--option-bg:var(--wave-subtle-hover)]',\n  'data-[active]:outline-2 data-[active]:-outline-offset-2 data-[active]:outline-ring',\n  'aria-disabled:cursor-not-allowed aria-disabled:text-muted-foreground',\n);\n\n/**\n * The values of the options rendered inside an `OptionGroup`, whatever wraps them (custom\n * components, Fragments, nested groups): each option adds its value from a layout effect.\n */\nclass OptionGroupMembers {\n  private readonly counts = new Map<string, number>();\n  private readonly listeners = new Set<() => void>();\n\n  subscribe = (listener: () => void): (() => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  add(value: string): () => void {\n    this.counts.set(value, (this.counts.get(value) ?? 0) + 1);\n    this.notify();\n    return () => {\n      const count = (this.counts.get(value) ?? 1) - 1;\n      if (count > 0) this.counts.set(value, count);\n      else this.counts.delete(value);\n      this.notify();\n    };\n  }\n\n  /** At least one option, and every one of them is hidden (filtered out, or by the consumer). */\n  allHidden(store: ListboxStore | undefined): boolean {\n    if (store === undefined || this.counts.size === 0) return false;\n    for (const value of this.counts.keys()) if (!store.isHidden(value)) return false;\n    return true;\n  }\n\n  private notify(): void {\n    for (const listener of [...this.listeners]) listener();\n  }\n}\n\n/** The groups around an option, outermost first (P05-internal). */\nconst OptionGroupContext = React.createContext<readonly OptionGroupMembers[]>([]);\nOptionGroupContext.displayName = 'OptionGroupContext';\n\n/** A group around the option has the consumer's `hidden` attribute (P05-internal). */\nconst OptionGroupHiddenContext = React.createContext(false);\nOptionGroupHiddenContext.displayName = 'OptionGroupHiddenContext';\n\n/** Adds an option's value to every group around it while the option is mounted. */\nfunction useOptionGroupMembership(value: string): void {\n  const groups = React.useContext(OptionGroupContext);\n  React.useLayoutEffect(() => {\n    if (groups.length === 0) return;\n    const removes = groups.map((group) => group.add(value));\n    return () => {\n      for (const remove of removes) remove();\n    };\n  }, [groups, value]);\n}\n\n/*\n * Forced colours of a disabled option's box, as Checkbox draws a disabled box: GrayText on Canvas\n * for the square and its glyph, without the Highlight background of `forcedColors.selectedLeaf`.\n */\nconst DISABLED_BOX_FORCED_COLORS = 'forced-colors:border-[GrayText] forced-colors:bg-[Canvas]';\nconst DISABLED_GLYPH_FORCED_COLORS =\n  'forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none';\n\n/** What the check column of an option draws (see {@link renderCheck}). */\ninterface CheckState {\n  selected: boolean;\n  multiselect: boolean;\n  disabled: boolean;\n}\n\n/**\n * The check column of an option. Single-select: the check glyph, kept in its place but not drawn\n * while the option is not selected, so the option texts line up. Multi-select: a 16px checkbox\n * square in Checkbox's colours, with the glyph inside only while selected; as a leaf indicator it\n * takes `forcedColors.selectedLeaf` while checked. A disabled option's square follows the row, as\n * the single-select glyph does: its muted text colour draws the square and the glyph, in place of\n * the brand colour. `glyph` is the consumer's `checkIcon` when it renders content, else\n * `undefined` for the default glyph.\n */\nfunction renderCheck(\n  glyph: Slot<'span'> | undefined,\n  { selected, multiselect, disabled }: CheckState,\n): React.ReactNode {\n  if (!multiselect) {\n    const classes = cn(optionClassNames.checkIcon, 'shrink-0', !selected && 'invisible');\n    return glyph === undefined ? (\n      <CheckIcon className={classes} />\n    ) : (\n      renderSlot(glyph, 'span', cn('inline-flex', classes), { 'aria-hidden': true })\n    );\n  }\n  // One class set per state, so a disabled box never carries the brand classes it replaces.\n  let boxClasses: string;\n  if (disabled) {\n    boxClasses = cn('border-current bg-transparent', DISABLED_BOX_FORCED_COLORS);\n  } else if (selected) {\n    boxClasses = cn('border-primary bg-primary text-primary-foreground', forcedColors.selectedLeaf);\n  } else {\n    boxClasses = cn('border-stroke-accessible bg-transparent', forcedColors.control);\n  }\n  const glyphClasses = disabled ? DISABLED_GLYPH_FORCED_COLORS : undefined;\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-wave-option-box=\"\"\n      className={cn(\n        optionClassNames.indicator,\n        'flex h-4 w-4 shrink-0 items-center justify-center rounded-xs border',\n        boxClasses,\n      )}\n    >\n      {selected &&\n        (glyph === undefined ? (\n          <CheckIcon size={12} className={cn(optionClassNames.checkIcon, glyphClasses)} />\n        ) : (\n          renderSlot(\n            glyph,\n            'span',\n            cn(optionClassNames.checkIcon, 'inline-flex shrink-0', glyphClasses),\n            {\n              'aria-hidden': true,\n            },\n          )\n        ))}\n    </span>\n  );\n}\n\nfunction OptionImpl(props: OptionProps) {\n  const {\n    value,\n    label,\n    textValue,\n    disabled = false,\n    hidden = false,\n    checkIcon,\n    className,\n    children,\n    onClick,\n    onMouseDown,\n    onPointerMove,\n    ref,\n    ...rest\n  } = props;\n  const showCheck = React.useContext(OptionCheckContext);\n  const groupHidden = React.useContext(OptionGroupHiddenContext);\n  // A consumer-hidden option is not navigable; optionProps renders `hidden`.\n  const { selected, multiselect, optionProps } = useListboxOption<HTMLLIElement>(\n    { value, label, textValue, disabled, hidden: hidden || groupHidden },\n    ref,\n  );\n  useOptionGroupMembership(value);\n  const {\n    ref: optionRef,\n    onClick: selectOption,\n    // Standalone mode only: the pointer press that focuses the list.\n    onMouseDown: pressOption,\n    onPointerMove: highlightOption,\n    ...optionAttributes\n  } = optionProps;\n\n  // The check is a required indicator (C-SLOTS): a `checkIcon` that renders nothing keeps the\n  // default glyph and warns once.\n  const checkIconRenders = checkIcon != null && slotRendersContent(checkIcon);\n  const checkIconEmpty = checkIcon != null && !checkIconRenders;\n  React.useEffect(() => {\n    if (checkIconEmpty) {\n      warnOnce(\n        'Option:checkIcon-empty',\n        'Option: `checkIcon` renders nothing, so the default check shows: a selected option must show its state. Pass a glyph, or leave it unset.',\n      );\n    }\n  }, [checkIconEmpty]);\n\n  return (\n    <li\n      data-value={value}\n      {...rest}\n      {...optionAttributes}\n      ref={optionRef}\n      onClick={composeEventHandlers(onClick, selectOption)}\n      onMouseDown={composeEventHandlers(onMouseDown, pressOption)}\n      onPointerMove={composeEventHandlers(onPointerMove, highlightOption)}\n      className={cn(\n        optionClassNames.root,\n        OPTION_CLASSES,\n        // While a multi-select option draws its box, the box carries the state, and\n        // `forcedColors.selectedContainer` would draw every selected option like the active one.\n        selected && !(multiselect && showCheck) && forcedColors.selectedContainer,\n        className,\n      )}\n    >\n      {showCheck &&\n        renderCheck(checkIconRenders ? checkIcon : undefined, { selected, multiselect, disabled })}\n      <span className={cn(optionClassNames.content, 'min-w-0 flex-1')}>{children ?? value}</span>\n    </li>\n  );\n}\nOptionImpl.displayName = 'Option';\n\nconst MemoOption = /* @__PURE__ */ React.memo(OptionImpl);\nMemoOption.displayName = 'Option';\n\n/**\n * An option of a listbox: a `Listbox`, `Combobox` or `Dropdown` (and `TagPicker`'s generated\n * list), or a custom picker's list, rendered through `ListboxSurface` or under a\n * `ListboxProvider`. Renders `<li role=\"option\">` with a stable id (`aria-activedescendant`\n * target), `aria-selected`, a check mark while selected (`checkIcon` replaces it; in a\n * multi-select list it sits in a checkbox square) and `data-active`/`data-selected`/\n * `data-disabled` attributes for styling.\n *\n * Options register with the surrounding listbox (in DOM order, groups included), so they can be\n * wrapped, grouped or rendered conditionally. The option is memoized: moving the highlight\n * re-renders only the previously and the newly active option.\n *\n * Styling: `className` comes last. A plain background class (`className=\"bg-primary\"`) replaces\n * the built-in hover, selected and active backgrounds in every state. To restyle one state only,\n * use its data variant (`data-[active]:bg-…`, `data-[selected]:bg-…`). The active option keeps\n * its focus outline.\n *\n * Use it inside a listbox only; it throws in development elsewhere.\n */\nexport const Option: React.NamedExoticComponent<OptionProps> = /* @__PURE__ */ markListboxElement(\n  MemoOption,\n  'option',\n);\n\n/* ------------------------------------------------------------------ */\n/*  OptionGroup                                                        */\n/* ------------------------------------------------------------------ */\n\n/**\n * Props of {@link OptionGroup}. `aria-label` and `aria-labelledby` go to the group's\n * `role=\"group\"` list; the other props go to its `<li role=\"presentation\">` item.\n */\nexport interface OptionGroupProps extends React.LiHTMLAttributes<HTMLLIElement> {\n  /**\n   * The group's heading, which names the group. Keep it text (an icon next to the text is fine): a\n   * label cannot be interactive, since nothing in it is reachable inside a listbox. Without a\n   * label no heading renders; name the group with `aria-label` or `aria-labelledby` then. A group\n   * without a name logs a development warning.\n   */\n  label?: React.ReactNode;\n  /**\n   * Names the group's list in place of the label (the heading still shows). A prop that holds\n   * `undefined`, as from a wrapper that forwards it, leaves the label in charge.\n   */\n  'aria-label'?: string;\n  /**\n   * Ids of the elements that name the group's list, in place of the label (the heading still\n   * shows). A prop that holds `undefined` leaves the label in charge.\n   */\n  'aria-labelledby'?: string;\n  /**\n   * Hides the group and every option in it (see `Option`'s `hidden`): keyboard navigation and\n   * typeahead skip its options.\n   * @default false\n   */\n  hidden?: boolean;\n  /** Ref to the group's `<li role=\"presentation\">` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\nconst ELEMENT_NODE = 1;\nconst TEXT_NODE = 3;\n\n/**\n * The text a heading gives the name of its group, for the development check of `OptionGroup`: its\n * text without `aria-hidden` or `hidden` parts, where an element's `aria-label` or an image's `alt`\n * stands for its content.\n */\nfunction nameText(node: Node | null): string {\n  if (node === null) return '';\n  if (node.nodeType === TEXT_NODE) return node.textContent ?? '';\n  if (node.nodeType !== ELEMENT_NODE) return '';\n  const element = node as Element;\n  if (element.getAttribute('aria-hidden') === 'true' || element.hasAttribute('hidden')) return '';\n  const ownLabel = element.getAttribute('aria-label')?.trim();\n  if (ownLabel) return ownLabel;\n  if (element.localName === 'img') return element.getAttribute('alt') ?? '';\n  let text = '';\n  for (const child of Array.from(element.childNodes)) text += nameText(child);\n  return text;\n}\n\n/**\n * Whether a group's list has a name, for the development check of `OptionGroup`, in the order the\n * name is computed: a consumer `aria-labelledby` that is not blank (its presence counts; the\n * elements it names are not read), else a non-blank `aria-label`, else the heading that labels the\n * list. A string or number label is its own text; only an element label is read from the rendered\n * heading ({@link nameText}).\n */\nfunction groupHasName(\n  label: React.ReactNode,\n  ariaLabel: string | undefined,\n  labelledBy: string | undefined,\n  labelId: string,\n  heading: HTMLElement | null,\n): boolean {\n  if (labelledBy !== undefined && labelledBy !== labelId && labelledBy.trim() !== '') return true;\n  if (ariaLabel !== undefined && ariaLabel.trim() !== '') return true;\n  if (labelledBy !== labelId) return false;\n  if (typeof label === 'string' || typeof label === 'number') return String(label).trim() !== '';\n  return nameText(heading).trim() !== '';\n}\n\nconst UNNAMED_GROUP_WARNING = 'OptionGroup:unnamed';\n\nfunction OptionGroupImpl({\n  label,\n  className,\n  children,\n  hidden,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ref,\n  ...rest\n}: OptionGroupProps) {\n  const labelId = useId('option-group');\n  const store = React.useContext(ListboxContext)?.store;\n  const parentGroups = React.useContext(OptionGroupContext);\n  const hiddenByConsumer = React.useContext(OptionGroupHiddenContext) || !!hidden;\n  const [members] = React.useState(() => new OptionGroupMembers());\n  const groups = React.useMemo(() => [...parentGroups, members], [parentGroups, members]);\n  const subscribe = React.useCallback(\n    (listener: () => void) => {\n      const unsubscribeMembers = members.subscribe(listener);\n      const unsubscribeStore = store?.subscribe(listener);\n      return () => {\n        unsubscribeMembers();\n        unsubscribeStore?.();\n      };\n    },\n    [members, store],\n  );\n  // Hidden while every option inside it is filtered out or hidden, also options wrapped in a\n  // component (the options register with the group; re-read when they do and when the listbox\n  // state changes).\n  // The server render and the first client render show the group: no option has registered yet.\n  const empty = React.useSyncExternalStore(\n    subscribe,\n    () => members.allHidden(store),\n    () => false,\n  );\n\n  // The heading renders only for a label that renders content, so the list never points at an\n  // empty heading. A consumer name wins over the heading; a prop that holds `undefined` (a wrapper\n  // forwarding it) is no name of the consumer's.\n  const hasLabel = slotRendersContent(label);\n  const labelledBy = ariaLabelledBy ?? (ariaLabel === undefined && hasLabel ? labelId : undefined);\n\n  // C-DEV: warn once when nothing names the group, checked again whenever the label, the\n  // consumer `aria-label` or the resolved `aria-labelledby` changes.\n  const headingRef = React.useRef<HTMLDivElement | null>(null);\n  React.useEffect(() => {\n    if (!isDev || hasWarned(UNNAMED_GROUP_WARNING)) return;\n    if (groupHasName(label, ariaLabel, labelledBy, labelId, headingRef.current)) return;\n    warnOnce(\n      UNNAMED_GROUP_WARNING,\n      'OptionGroup: the group has no name. Give it a text `label`, `aria-label` or `aria-labelledby`.',\n    );\n  }, [label, ariaLabel, labelledBy, labelId]);\n\n  return (\n    <li\n      {...rest}\n      ref={ref}\n      role=\"presentation\"\n      hidden={hidden || empty || undefined}\n      className={cn(optionGroupClassNames.root, className)}\n    >\n      {hasLabel && (\n        <div\n          ref={headingRef}\n          id={labelId}\n          role=\"presentation\"\n          className={cn(\n            optionGroupClassNames.label,\n            'px-3 py-1 text-caption-1 font-semibold text-muted-foreground',\n          )}\n        >\n          {materialiseSlotContent(label)}\n        </div>\n      )}\n      <ul\n        role=\"group\"\n        aria-label={ariaLabel}\n        aria-labelledby={labelledBy}\n        className={optionGroupClassNames.list}\n      >\n        <OptionGroupHiddenContext.Provider value={hiddenByConsumer}>\n          <OptionGroupContext.Provider value={groups}>{children}</OptionGroupContext.Provider>\n        </OptionGroupHiddenContext.Provider>\n      </ul>\n    </li>\n  );\n}\nOptionGroupImpl.displayName = 'OptionGroup';\n\n/**\n * Groups options under an optional heading: `<li role=\"presentation\">` with the heading and a\n * `<ul role=\"group\">` of the options, named by the heading (`label`) or by your `aria-label` or\n * `aria-labelledby`, which win over it. Hidden while a filter (or their own `hidden`) hides all\n * its options, also options wrapped in a component or in nested groups. Use it inside a listbox,\n * as `Option`.\n */\nexport const OptionGroup: React.FC<OptionGroupProps> = /* @__PURE__ */ markListboxElement(\n  OptionGroupImpl,\n  'group',\n);\n\n/* ------------------------------------------------------------------ */\n/*  ListboxProvider                                                    */\n/* ------------------------------------------------------------------ */\n\n/** Props of {@link ListboxProvider}. */\nexport interface ListboxProviderProps {\n  /** The context of a listbox: `useListbox(...).context`. */\n  value: ListboxContextValue;\n  /** The options (`Option`, `OptionGroup` or options of your own on `useListboxOption`). */\n  children?: React.ReactNode;\n}\n\n/**\n * Provides a listbox's context to its options, for a custom picker that renders its list without\n * `ListboxSurface`: `<ListboxProvider value={listbox.context}><ul {...listbox.getListboxProps()}>…</ul></ListboxProvider>`.\n */\nexport function ListboxProvider({ value, children }: ListboxProviderProps) {\n  return <ListboxContext.Provider value={value}>{children}</ListboxContext.Provider>;\n}\nListboxProvider.displayName = 'ListboxProvider';\n\n/* ------------------------------------------------------------------ */\n/*  Listbox popup: useListboxPopup and ListboxSurface                  */\n/* ------------------------------------------------------------------ */\n\n/** Options of {@link useListboxPopup}. */\nexport interface UseListboxPopupOptions {\n  /**\n   * The listbox is open (your open state). While it is, a press outside your picker and its\n   * surface, and focus leaving them, dismiss it.\n   */\n  open: boolean;\n  /**\n   * The surface is shown (the list, or the empty content of {@link ListboxSurface}): it is\n   * positioned, and Escape dismisses it. While the listbox is open with nothing shown (no options\n   * to show), Escape is left to an enclosing layer, such as a Dialog around the picker.\n   */\n  surfaceOpen: boolean;\n  /**\n   * Called when the popup should close: set your open state to `false`. `reason` is `'escape'`,\n   * `'outside-press'` or `'focus-outside'`.\n   */\n  onDismiss: (reason: DismissReason) => void;\n  /** Your picker's root element: presses and focus inside it are not outside the popup. */\n  rootRef: React.RefObject<HTMLElement | null>;\n  /**\n   * The combobox element, which anchors the popup's dismiss layer. Pass the element to\n   * `setReference` too (merged into its ref), which places the surface against it.\n   */\n  anchorRef: React.RefObject<HTMLElement | null>;\n}\n\n/**\n * Result of {@link useListboxPopup}. Destructure it: `eslint-plugin-react-hooks` treats an object\n * with a member passed to a `ref` prop as a ref, and rejects reading its other members during\n * render (`react-hooks/refs`).\n */\nexport interface UseListboxPopupResult {\n  /** The popup's dismiss layer: pass it to {@link ListboxSurface}. */\n  layerId: string;\n  /**\n   * Ref callback for the element the surface is placed against: merge it into your combobox's ref.\n   */\n  setReference: (el: HTMLElement | null) => void;\n  /** Ref callback for the surface: pass it to {@link ListboxSurface}. */\n  surfaceRef: React.RefCallback<HTMLElement>;\n  /** The surface's `data-side`, `data-align` and position style: pass them to {@link ListboxSurface}. */\n  floatingProps: { 'data-side': string; 'data-align': string; style: React.CSSProperties };\n}\n\n/**\n * Dismissal and positioning of a custom picker's listbox popup, for {@link ListboxSurface}. The\n * popup is dismissed by Escape, by a press outside your picker and its surface, and by focus\n * leaving them (`onDismiss` says which). The surface opens below the anchor and as wide as it,\n * flips above it when there is no room below, and is limited to the space available; its\n * `data-side` and `data-align` attributes give the final placement.\n *\n * While the listbox is open with nothing to show (`surfaceOpen` is `false`), Escape is left to an\n * enclosing layer, such as a Dialog around the picker. Let your combobox's key handler leave it\n * too: on such an Escape, set your open state to `false` without calling `listbox.onKeyDown`,\n * which handles Escape (and prevents its default) whenever the listbox is open. Do so only when\n * `!event.nativeEvent.isComposing`, as Dropdown, Combobox and TagPicker do: an Escape that only\n * cancels an IME composition must not close the listbox, and `listbox.onKeyDown` ignores such\n * keys too.\n *\n * @example\n * const expanded = open && listbox.items.length > 0;\n * const { layerId, setReference, surfaceRef, floatingProps } = useListboxPopup({\n *   open,\n *   surfaceOpen: expanded,\n *   onDismiss: () => setOpen(false),\n *   rootRef,\n *   anchorRef: buttonRef,\n * });\n * const buttonMergedRef = useMergedRefs(buttonRef, setReference);\n */\nexport function useListboxPopup(options: UseListboxPopupOptions): UseListboxPopupResult {\n  const { open, surfaceOpen, onDismiss, rootRef, anchorRef } = options;\n  const surfaceElementRef = React.useRef<HTMLElement | null>(null);\n  const { setReference, setFloating, floatingProps } = usePopupPosition({\n    open: surfaceOpen,\n    side: 'bottom',\n    align: 'start',\n    matchReferenceWidth: true,\n    fitViewport: true,\n  });\n  const { layerId } = useDismiss({\n    open,\n    onDismiss: (reason) => onDismiss(reason),\n    refs: [rootRef, surfaceElementRef],\n    anchorRef,\n    kind: 'listbox',\n    escape: surfaceOpen,\n    focusOutside: true,\n  });\n  const surfaceRef = useMergedRefs<HTMLElement>(surfaceElementRef, setFloating);\n  return { layerId, setReference, surfaceRef, floatingProps };\n}\n\n/**\n * Props of {@link ListboxSurface}. The options of one listbox live in one list at a time, and this\n * surface renders that list: render every option of the listbox inside it, never in a second list\n * of your own, not even for an exit animation.\n */\nexport interface ListboxSurfaceProps {\n  /** The listbox: the result of `useListbox` in select-only or editable mode. */\n  listbox: UseListboxResult;\n  /** `layerId` from {@link useListboxPopup}: the surface joins the popup's dismiss layer. */\n  layerId: string;\n  /** `surfaceRef` from {@link useListboxPopup}. */\n  surfaceRef: React.RefCallback<HTMLElement>;\n  /** `floatingProps` from {@link useListboxPopup}: the surface's placement. */\n  floatingProps: UseListboxPopupResult['floatingProps'];\n  /** The listbox is open (your open state). `emptyContent` shows only while it is. */\n  open: boolean;\n  /**\n   * The list is shown: the listbox is open and has options to show (`open &&\n   * listbox.items.length > 0`). The list then renders in the surface, and otherwise `hidden`, in\n   * place inside your picker. Set your combobox's `aria-expanded` to this value after spreading\n   * `getComboboxProps()`, which reports `open`, so the combobox is not announced as expanded while\n   * nothing is shown.\n   */\n  expanded: boolean;\n  /**\n   * Shown in the surface while the listbox is open but not expanded, such as a \"No matches\"\n   * message. `undefined` and `null` show no surface; any other value shows one, so `false` and\n   * `''` show an empty surface.\n   */\n  emptyContent?: React.ReactNode;\n  /** Names the list. Name it with this or `aria-labelledby`, usually your picker's label. */\n  'aria-label'?: string;\n  /** Ids of the elements that name the list, usually your picker's label. */\n  'aria-labelledby'?: string;\n  /**\n   * Options draw a check while selected (in a multi-select list, a checkbox square). Turn it off\n   * for a list that never shows selected options, such as the suggestions of a tag picker.\n   * @default true\n   */\n  showCheck?: boolean;\n  /**\n   * Classes merged last onto the list: they replace the list's own classes they conflict with,\n   * its maximum height included.\n   */\n  listClassName?: string;\n  /**\n   * Classes merged last onto the surface, the popup around the list: they replace its own\n   * classes they conflict with.\n   */\n  surfaceClassName?: string;\n  /** The options (`Option`, `OptionGroup` or options of your own on `useListboxOption`). */\n  children?: React.ReactNode;\n}\n\nfunction preventMouseDown(event: React.MouseEvent) {\n  event.preventDefault();\n}\n\n/**\n * The option list of a custom picker and the popup it opens in: a `<ul role=\"listbox\">` with the\n * options (spread from `listbox.getListboxProps()`), rendered `hidden` in place inside your\n * picker while the list is not shown, so the options register and their ids exist from the first\n * render, and in a portaled surface placed by {@link useListboxPopup} while it is, never in both.\n * While the listbox is open with nothing to show, the surface shows `emptyContent` instead, if\n * any. A press on the surface keeps focus on your combobox. It provides the listbox's context to\n * the options, so it needs no {@link ListboxProvider}.\n *\n * @example\n * <ListboxSurface\n *   listbox={listbox}\n *   layerId={layerId}\n *   surfaceRef={surfaceRef}\n *   floatingProps={floatingProps}\n *   open={open}\n *   expanded={expanded}\n *   aria-labelledby={labelId}\n * >\n *   <Option value=\"georgia\">Georgia</Option>\n * </ListboxSurface>\n */\nexport function ListboxSurface(props: ListboxSurfaceProps) {\n  const {\n    listbox,\n    layerId,\n    surfaceRef,\n    floatingProps,\n    open,\n    expanded,\n    emptyContent,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    showCheck = true,\n    listClassName,\n    surfaceClassName,\n    children,\n  } = props;\n\n  const list = (\n    <OptionCheckContext.Provider value={showCheck}>\n      <ListboxProvider value={listbox.context}>\n        <ul\n          {...listbox.getListboxProps()}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          hidden={!expanded || undefined}\n          className={cn(\n            listboxSurfaceClassNames.list,\n            'min-h-0 max-h-60 overflow-auto',\n            listClassName,\n          )}\n        >\n          {children}\n        </ul>\n      </ListboxProvider>\n    </OptionCheckContext.Provider>\n  );\n\n  // A closed listbox never leaves a surface behind: the text typed before closing survives it.\n  const showEmpty = open && !expanded && emptyContent !== undefined && emptyContent !== null;\n  if (!expanded && !showEmpty) return list;\n\n  return (\n    <>\n      {!expanded && list}\n      <Portal layerId={layerId}>\n        <div\n          ref={surfaceRef}\n          {...floatingProps}\n          data-wave-listbox-surface=\"\"\n          onMouseDown={preventMouseDown}\n          className={cn(\n            listboxSurfaceClassNames.root,\n            'flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4',\n            surfaceClassName,\n          )}\n        >\n          {expanded ? list : emptyContent}\n        </div>\n      </Portal>\n    </>\n  );\n}\nListboxSurface.displayName = 'ListboxSurface';\n"],"mappings":"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"}
+{"version":3,"file":"Option.cjs","names":["React","cn","optionClassNames","CheckIcon","renderSlot","forcedColors","useListboxOption","slotRendersContent","composeEventHandlers","useId","ListboxContext","isDev","hasWarned","optionGroupClassNames","materialiseSlotContent","usePopupPosition","useDismiss","useMergedRefs","listboxSurfaceClassNames","_Fragment","Portal","require_runtime","require_cn","require_dev","require_slot","require_composeEventHandlers","require_classNames","require_useId","require_useMergedRefs","require_useListbox","require_useDismiss","require_Portal","require_styles","require_icons","require_usePopupPosition","react","react_jsx_runtime","OptionCheckContext","OPTION_CLASSES","OptionGroupMembers","listener","value","count","store","OptionGroupContext","OptionGroupHiddenContext","useOptionGroupMembership","groups","removes","group","remove","DISABLED_BOX_FORCED_COLORS","DISABLED_GLYPH_FORCED_COLORS","renderCheck","multiselect","classes","selected","glyph","boxClasses","disabled","glyphClasses","OptionImpl","rest","props","showCheck","groupHidden","hidden","ref","optionRef","selectOption","pressOption","highlightOption","optionAttributes","optionProps","checkIconRenders","checkIcon","checkIconEmpty","onClick","onMouseDown","onPointerMove","className","children","MemoOption","Option","ELEMENT_NODE","TEXT_NODE","nameText","node","element","ownLabel","text","child","groupHasName","labelledBy","labelId","ariaLabel","label","heading","UNNAMED_GROUP_WARNING","OptionGroupImpl","ariaLabelledBy","parentGroups","hiddenByConsumer","members","subscribe","unsubscribeMembers","unsubscribeStore","empty","hasLabel","headingRef","OptionGroup","ListboxProvider","useListboxPopup","options","surfaceElementRef","surfaceOpen","onDismiss","reason","rootRef","setFloating","preventMouseDown","event","ListboxSurface","listRefProp","listMouseDown","listRest","listProps","listboxProps","listbox","listRef","list","expanded","listClassName","emptyContent","surfaceRef","floatingProps","surfaceClassName"],"sources":["../../../src/components/input/Option.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  listboxSurfaceClassNames,\n  optionClassNames,\n  optionGroupClassNames,\n} from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { hasWarned, isDev, warnOnce } from '../../lib/dev';\nimport { CheckIcon } from '../../lib/icons';\nimport { materialiseSlotContent, renderSlot, slotRendersContent, type Slot } from '../../lib/slot';\nimport { forcedColors } from '../../lib/styles';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport type { DismissReason } from '../../hooks/useDismiss';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport {\n  ListboxContext,\n  markListboxElement,\n  useListboxOption,\n  type ListboxContextValue,\n  type ListboxStore,\n  type UseListboxResult,\n} from '../../hooks/useListbox';\nimport { Portal } from '../portal/Portal';\n\n/* ------------------------------------------------------------------ */\n/*  Option                                                             */\n/* ------------------------------------------------------------------ */\n\n/**\n * Props of {@link Option}, an option of a listbox (Listbox, Combobox, Dropdown or a custom\n * picker's list).\n */\nexport interface OptionProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'value'> {\n  /** Value associated with this option. Unique within its listbox. */\n  value: string;\n  /**\n   * Text shown in the combobox (Combobox input, Dropdown trigger) when this option is selected.\n   * Defaults to `textValue`, then the option's text content, then `value`. Pass it when the\n   * children are not plain text (icons, custom components).\n   */\n  label?: string;\n  /** Text matched by typeahead and filtering instead of the label. */\n  textValue?: string;\n  /**\n   * Whether the option is disabled: it stays in the list but can never be selected (a click, Enter\n   * and Space do nothing). Keyboard navigation and typeahead skip it, unless the listbox keeps\n   * disabled options focusable (`disabledOptionsFocusable`), where they reach it. It is drawn in\n   * the muted text colour, its check included: in a multi-select list the checkbox square takes\n   * that colour instead of the brand colour, checked or not.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Replaces the check glyph that marks the option while it is selected (decorative,\n   * `aria-hidden`); in a multi-select list the glyph is drawn inside the option's 16px checkbox\n   * square. The check is a required indicator, the sign of the selection that does not rely on\n   * colour: `null` and `undefined` keep the default glyph, and so does a value that renders\n   * nothing (`false`, `''`, an empty array), which also logs a development warning. Unlike\n   * `Combobox.expandIcon`, a value that renders nothing does not hide the indicator (Fluent's\n   * `checkIcon={null}` removes it).\n   * @default a check mark\n   */\n  checkIcon?: Slot<'span'>;\n  /**\n   * Hides the option, like a native `<option hidden>`: it is not shown, keyboard navigation and\n   * typeahead skip it, and it never becomes the active option. Its label stays known, so a\n   * selected hidden option (a placeholder) still shows in the combobox. The options of a hidden\n   * `OptionGroup` are hidden the same way.\n   * @default false\n   */\n  hidden?: boolean;\n  /** Ref to the option `<li>` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\n/** Whether options draw the selected check mark (P05-internal; TagPicker lists no selected options). */\nconst OptionCheckContext = React.createContext(true);\nOptionCheckContext.displayName = 'OptionCheckContext';\n\n/*\n * State is exposed as data attributes (C-CLASS): `data-active` (keyboard/pointer highlight),\n * `data-selected`, `data-disabled`. State classes come before the consumer's `className` in `cn()`.\n *\n * Backgrounds (input-pickers#20): one unconditional `bg-(--option-bg)` paints the option, and the\n * hover/selected/active variants only set `--option-bg`. A variant that set `background-color`\n * itself (class + attribute or pseudo-class) would out-specify a consumer's plain `bg-*` class in\n * the cascade even though `cn()` keeps it; instead tailwind-merge replaces `bg-(--option-bg)` with\n * the consumer's class, which is then the only background declaration on the option. A consumer\n * `data-[active]:bg-…` / `data-[selected]:bg-…` restyles a single state (it out-specifies the\n * unconditional reader). The active outline is the focus indicator and stays a state variant.\n *\n * A filtered-out option carries the `hidden` attribute; base.css's scoped `[hidden]` rule hides\n * it over `flex` and over a consumer's display class.\n */\nconst OPTION_CLASSES = cn(\n  'flex cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-body-1 text-foreground',\n  'bg-(--option-bg) [--option-bg:transparent]',\n  'not-disabled:not-aria-disabled:hover:[--option-bg:var(--wave-subtle-hover)]',\n  'data-[selected]:[--option-bg:var(--wave-subtle-selected)]',\n  'data-[active]:[--option-bg:var(--wave-subtle-hover)]',\n  'data-[active]:outline-2 data-[active]:-outline-offset-2 data-[active]:outline-ring',\n  'aria-disabled:cursor-not-allowed aria-disabled:text-muted-foreground',\n);\n\n/**\n * The values of the options rendered inside an `OptionGroup`, whatever wraps them (custom\n * components, Fragments, nested groups): each option adds its value from a layout effect.\n */\nclass OptionGroupMembers {\n  private readonly counts = new Map<string, number>();\n  private readonly listeners = new Set<() => void>();\n\n  subscribe = (listener: () => void): (() => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  add(value: string): () => void {\n    this.counts.set(value, (this.counts.get(value) ?? 0) + 1);\n    this.notify();\n    return () => {\n      const count = (this.counts.get(value) ?? 1) - 1;\n      if (count > 0) this.counts.set(value, count);\n      else this.counts.delete(value);\n      this.notify();\n    };\n  }\n\n  /** At least one option, and every one of them is hidden (filtered out, or by the consumer). */\n  allHidden(store: ListboxStore | undefined): boolean {\n    if (store === undefined || this.counts.size === 0) return false;\n    for (const value of this.counts.keys()) if (!store.isHidden(value)) return false;\n    return true;\n  }\n\n  private notify(): void {\n    for (const listener of [...this.listeners]) listener();\n  }\n}\n\n/** The groups around an option, outermost first (P05-internal). */\nconst OptionGroupContext = React.createContext<readonly OptionGroupMembers[]>([]);\nOptionGroupContext.displayName = 'OptionGroupContext';\n\n/** A group around the option has the consumer's `hidden` attribute (P05-internal). */\nconst OptionGroupHiddenContext = React.createContext(false);\nOptionGroupHiddenContext.displayName = 'OptionGroupHiddenContext';\n\n/** Adds an option's value to every group around it while the option is mounted. */\nfunction useOptionGroupMembership(value: string): void {\n  const groups = React.useContext(OptionGroupContext);\n  React.useLayoutEffect(() => {\n    if (groups.length === 0) return;\n    const removes = groups.map((group) => group.add(value));\n    return () => {\n      for (const remove of removes) remove();\n    };\n  }, [groups, value]);\n}\n\n/*\n * Forced colours of a disabled option's box, as Checkbox draws a disabled box: GrayText on Canvas\n * for the square and its glyph, without the Highlight background of `forcedColors.selectedLeaf`.\n */\nconst DISABLED_BOX_FORCED_COLORS = 'forced-colors:border-[GrayText] forced-colors:bg-[Canvas]';\nconst DISABLED_GLYPH_FORCED_COLORS =\n  'forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none';\n\n/** What the check column of an option draws (see {@link renderCheck}). */\ninterface CheckState {\n  selected: boolean;\n  multiselect: boolean;\n  disabled: boolean;\n}\n\n/**\n * The check column of an option. Single-select: the check glyph, kept in its place but not drawn\n * while the option is not selected, so the option texts line up. Multi-select: a 16px checkbox\n * square in Checkbox's colours, with the glyph inside only while selected; as a leaf indicator it\n * takes `forcedColors.selectedLeaf` while checked. A disabled option's square follows the row, as\n * the single-select glyph does: its muted text colour draws the square and the glyph, in place of\n * the brand colour. `glyph` is the consumer's `checkIcon` when it renders content, else\n * `undefined` for the default glyph.\n */\nfunction renderCheck(\n  glyph: Slot<'span'> | undefined,\n  { selected, multiselect, disabled }: CheckState,\n): React.ReactNode {\n  if (!multiselect) {\n    const classes = cn(optionClassNames.checkIcon, 'shrink-0', !selected && 'invisible');\n    return glyph === undefined ? (\n      <CheckIcon className={classes} />\n    ) : (\n      renderSlot(glyph, 'span', cn('inline-flex', classes), { 'aria-hidden': true })\n    );\n  }\n  // One class set per state, so a disabled box never carries the brand classes it replaces.\n  let boxClasses: string;\n  if (disabled) {\n    boxClasses = cn('border-current bg-transparent', DISABLED_BOX_FORCED_COLORS);\n  } else if (selected) {\n    boxClasses = cn('border-primary bg-primary text-primary-foreground', forcedColors.selectedLeaf);\n  } else {\n    boxClasses = cn('border-stroke-accessible bg-transparent', forcedColors.control);\n  }\n  const glyphClasses = disabled ? DISABLED_GLYPH_FORCED_COLORS : undefined;\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-wave-option-box=\"\"\n      className={cn(\n        optionClassNames.indicator,\n        'flex h-4 w-4 shrink-0 items-center justify-center rounded-xs border',\n        boxClasses,\n      )}\n    >\n      {selected &&\n        (glyph === undefined ? (\n          <CheckIcon size={12} className={cn(optionClassNames.checkIcon, glyphClasses)} />\n        ) : (\n          renderSlot(\n            glyph,\n            'span',\n            cn(optionClassNames.checkIcon, 'inline-flex shrink-0', glyphClasses),\n            {\n              'aria-hidden': true,\n            },\n          )\n        ))}\n    </span>\n  );\n}\n\nfunction OptionImpl(props: OptionProps) {\n  const {\n    value,\n    label,\n    textValue,\n    disabled = false,\n    hidden = false,\n    checkIcon,\n    className,\n    children,\n    onClick,\n    onMouseDown,\n    onPointerMove,\n    ref,\n    ...rest\n  } = props;\n  const showCheck = React.useContext(OptionCheckContext);\n  const groupHidden = React.useContext(OptionGroupHiddenContext);\n  // A consumer-hidden option is not navigable; optionProps renders `hidden`.\n  const { selected, multiselect, optionProps } = useListboxOption<HTMLLIElement>(\n    { value, label, textValue, disabled, hidden: hidden || groupHidden },\n    ref,\n  );\n  useOptionGroupMembership(value);\n  const {\n    ref: optionRef,\n    onClick: selectOption,\n    // Standalone mode only: the pointer press that focuses the list.\n    onMouseDown: pressOption,\n    onPointerMove: highlightOption,\n    ...optionAttributes\n  } = optionProps;\n\n  // The check is a required indicator (C-SLOTS): a `checkIcon` that renders nothing keeps the\n  // default glyph and warns once.\n  const checkIconRenders = checkIcon != null && slotRendersContent(checkIcon);\n  const checkIconEmpty = checkIcon != null && !checkIconRenders;\n  React.useEffect(() => {\n    if (checkIconEmpty) {\n      warnOnce(\n        'Option:checkIcon-empty',\n        'Option: `checkIcon` renders nothing, so the default check shows: a selected option must show its state. Pass a glyph, or leave it unset.',\n      );\n    }\n  }, [checkIconEmpty]);\n\n  return (\n    <li\n      data-value={value}\n      {...rest}\n      {...optionAttributes}\n      ref={optionRef}\n      onClick={composeEventHandlers(onClick, selectOption)}\n      onMouseDown={composeEventHandlers(onMouseDown, pressOption)}\n      onPointerMove={composeEventHandlers(onPointerMove, highlightOption)}\n      className={cn(\n        optionClassNames.root,\n        OPTION_CLASSES,\n        // While a multi-select option draws its box, the box carries the state, and\n        // `forcedColors.selectedContainer` would draw every selected option like the active one.\n        selected && !(multiselect && showCheck) && forcedColors.selectedContainer,\n        className,\n      )}\n    >\n      {showCheck &&\n        renderCheck(checkIconRenders ? checkIcon : undefined, { selected, multiselect, disabled })}\n      <span className={cn(optionClassNames.content, 'min-w-0 flex-1')}>{children ?? value}</span>\n    </li>\n  );\n}\nOptionImpl.displayName = 'Option';\n\nconst MemoOption = /* @__PURE__ */ React.memo(OptionImpl);\nMemoOption.displayName = 'Option';\n\n/**\n * An option of a listbox: a `Listbox`, `Combobox` or `Dropdown` (and `TagPicker`'s generated\n * list), or a custom picker's list, rendered through `ListboxSurface` or under a\n * `ListboxProvider`. Renders `<li role=\"option\">` with a stable id (`aria-activedescendant`\n * target), `aria-selected`, a check mark while selected (`checkIcon` replaces it; in a\n * multi-select list it sits in a checkbox square) and `data-active`/`data-selected`/\n * `data-disabled` attributes for styling.\n *\n * Options register with the surrounding listbox (in DOM order, groups included), so they can be\n * wrapped, grouped or rendered conditionally. The option is memoized: moving the highlight\n * re-renders only the previously and the newly active option.\n *\n * Styling: `className` comes last. A plain background class (`className=\"bg-primary\"`) replaces\n * the built-in hover, selected and active backgrounds in every state. To restyle one state only,\n * use its data variant (`data-[active]:bg-…`, `data-[selected]:bg-…`). The active option keeps\n * its focus outline.\n *\n * Use it inside a listbox only; it throws in development elsewhere.\n */\nexport const Option: React.NamedExoticComponent<OptionProps> = /* @__PURE__ */ markListboxElement(\n  MemoOption,\n  'option',\n);\n\n/* ------------------------------------------------------------------ */\n/*  OptionGroup                                                        */\n/* ------------------------------------------------------------------ */\n\n/**\n * Props of {@link OptionGroup}. `aria-label` and `aria-labelledby` go to the group's\n * `role=\"group\"` list; the other props go to its `<li role=\"presentation\">` item.\n */\nexport interface OptionGroupProps extends React.LiHTMLAttributes<HTMLLIElement> {\n  /**\n   * The group's heading, which names the group. Keep it text (an icon next to the text is fine): a\n   * label cannot be interactive, since nothing in it is reachable inside a listbox. Without a\n   * label no heading renders; name the group with `aria-label` or `aria-labelledby` then. A group\n   * without a name logs a development warning.\n   */\n  label?: React.ReactNode;\n  /**\n   * Names the group's list in place of the label (the heading still shows). A prop that holds\n   * `undefined`, as from a wrapper that forwards it, leaves the label in charge.\n   */\n  'aria-label'?: string;\n  /**\n   * Ids of the elements that name the group's list, in place of the label (the heading still\n   * shows). A prop that holds `undefined` leaves the label in charge.\n   */\n  'aria-labelledby'?: string;\n  /**\n   * Hides the group and every option in it (see `Option`'s `hidden`): keyboard navigation and\n   * typeahead skip its options.\n   * @default false\n   */\n  hidden?: boolean;\n  /** Ref to the group's `<li role=\"presentation\">` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\nconst ELEMENT_NODE = 1;\nconst TEXT_NODE = 3;\n\n/**\n * The text a heading gives the name of its group, for the development check of `OptionGroup`: its\n * text without `aria-hidden` or `hidden` parts, where an element's `aria-label` or an image's `alt`\n * stands for its content.\n */\nfunction nameText(node: Node | null): string {\n  if (node === null) return '';\n  if (node.nodeType === TEXT_NODE) return node.textContent ?? '';\n  if (node.nodeType !== ELEMENT_NODE) return '';\n  const element = node as Element;\n  if (element.getAttribute('aria-hidden') === 'true' || element.hasAttribute('hidden')) return '';\n  const ownLabel = element.getAttribute('aria-label')?.trim();\n  if (ownLabel) return ownLabel;\n  if (element.localName === 'img') return element.getAttribute('alt') ?? '';\n  let text = '';\n  for (const child of Array.from(element.childNodes)) text += nameText(child);\n  return text;\n}\n\n/**\n * Whether a group's list has a name, for the development check of `OptionGroup`, in the order the\n * name is computed: a consumer `aria-labelledby` that is not blank (its presence counts; the\n * elements it names are not read), else a non-blank `aria-label`, else the heading that labels the\n * list. A string or number label is its own text; only an element label is read from the rendered\n * heading ({@link nameText}).\n */\nfunction groupHasName(\n  label: React.ReactNode,\n  ariaLabel: string | undefined,\n  labelledBy: string | undefined,\n  labelId: string,\n  heading: HTMLElement | null,\n): boolean {\n  if (labelledBy !== undefined && labelledBy !== labelId && labelledBy.trim() !== '') return true;\n  if (ariaLabel !== undefined && ariaLabel.trim() !== '') return true;\n  if (labelledBy !== labelId) return false;\n  if (typeof label === 'string' || typeof label === 'number') return String(label).trim() !== '';\n  return nameText(heading).trim() !== '';\n}\n\nconst UNNAMED_GROUP_WARNING = 'OptionGroup:unnamed';\n\nfunction OptionGroupImpl({\n  label,\n  className,\n  children,\n  hidden,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ref,\n  ...rest\n}: OptionGroupProps) {\n  const labelId = useId('option-group');\n  const store = React.useContext(ListboxContext)?.store;\n  const parentGroups = React.useContext(OptionGroupContext);\n  const hiddenByConsumer = React.useContext(OptionGroupHiddenContext) || !!hidden;\n  const [members] = React.useState(() => new OptionGroupMembers());\n  const groups = React.useMemo(() => [...parentGroups, members], [parentGroups, members]);\n  const subscribe = React.useCallback(\n    (listener: () => void) => {\n      const unsubscribeMembers = members.subscribe(listener);\n      const unsubscribeStore = store?.subscribe(listener);\n      return () => {\n        unsubscribeMembers();\n        unsubscribeStore?.();\n      };\n    },\n    [members, store],\n  );\n  // Hidden while every option inside it is filtered out or hidden, also options wrapped in a\n  // component (the options register with the group; re-read when they do and when the listbox\n  // state changes).\n  // The server render and the first client render show the group: no option has registered yet.\n  const empty = React.useSyncExternalStore(\n    subscribe,\n    () => members.allHidden(store),\n    () => false,\n  );\n\n  // The heading renders only for a label that renders content, so the list never points at an\n  // empty heading. A consumer name wins over the heading; a prop that holds `undefined` (a wrapper\n  // forwarding it) is no name of the consumer's.\n  const hasLabel = slotRendersContent(label);\n  const labelledBy = ariaLabelledBy ?? (ariaLabel === undefined && hasLabel ? labelId : undefined);\n\n  // C-DEV: warn once when nothing names the group, checked again whenever the label, the\n  // consumer `aria-label` or the resolved `aria-labelledby` changes.\n  const headingRef = React.useRef<HTMLDivElement | null>(null);\n  React.useEffect(() => {\n    if (!isDev || hasWarned(UNNAMED_GROUP_WARNING)) return;\n    if (groupHasName(label, ariaLabel, labelledBy, labelId, headingRef.current)) return;\n    warnOnce(\n      UNNAMED_GROUP_WARNING,\n      'OptionGroup: the group has no name. Give it a text `label`, `aria-label` or `aria-labelledby`.',\n    );\n  }, [label, ariaLabel, labelledBy, labelId]);\n\n  return (\n    <li\n      {...rest}\n      ref={ref}\n      role=\"presentation\"\n      hidden={hidden || empty || undefined}\n      className={cn(optionGroupClassNames.root, className)}\n    >\n      {hasLabel && (\n        <div\n          ref={headingRef}\n          id={labelId}\n          role=\"presentation\"\n          className={cn(\n            optionGroupClassNames.label,\n            'px-3 py-1 text-caption-1 font-semibold text-muted-foreground',\n          )}\n        >\n          {materialiseSlotContent(label)}\n        </div>\n      )}\n      <ul\n        role=\"group\"\n        aria-label={ariaLabel}\n        aria-labelledby={labelledBy}\n        className={optionGroupClassNames.list}\n      >\n        <OptionGroupHiddenContext.Provider value={hiddenByConsumer}>\n          <OptionGroupContext.Provider value={groups}>{children}</OptionGroupContext.Provider>\n        </OptionGroupHiddenContext.Provider>\n      </ul>\n    </li>\n  );\n}\nOptionGroupImpl.displayName = 'OptionGroup';\n\n/**\n * Groups options under an optional heading: `<li role=\"presentation\">` with the heading and a\n * `<ul role=\"group\">` of the options, named by the heading (`label`) or by your `aria-label` or\n * `aria-labelledby`, which win over it. Hidden while a filter (or their own `hidden`) hides all\n * its options, also options wrapped in a component or in nested groups. Use it inside a listbox,\n * as `Option`.\n */\nexport const OptionGroup: React.FC<OptionGroupProps> = /* @__PURE__ */ markListboxElement(\n  OptionGroupImpl,\n  'group',\n);\n\n/* ------------------------------------------------------------------ */\n/*  ListboxProvider                                                    */\n/* ------------------------------------------------------------------ */\n\n/** Props of {@link ListboxProvider}. */\nexport interface ListboxProviderProps {\n  /** The context of a listbox: `useListbox(...).context`. */\n  value: ListboxContextValue;\n  /** The options (`Option`, `OptionGroup` or options of your own on `useListboxOption`). */\n  children?: React.ReactNode;\n}\n\n/**\n * Provides a listbox's context to its options, for a custom picker that renders its list without\n * `ListboxSurface`: `<ListboxProvider value={listbox.context}><ul {...listbox.getListboxProps()}>…</ul></ListboxProvider>`.\n */\nexport function ListboxProvider({ value, children }: ListboxProviderProps) {\n  return <ListboxContext.Provider value={value}>{children}</ListboxContext.Provider>;\n}\nListboxProvider.displayName = 'ListboxProvider';\n\n/* ------------------------------------------------------------------ */\n/*  Listbox popup: useListboxPopup and ListboxSurface                  */\n/* ------------------------------------------------------------------ */\n\n/** Options of {@link useListboxPopup}. */\nexport interface UseListboxPopupOptions {\n  /**\n   * The listbox is open (your open state). While it is, a press outside your picker and its\n   * surface, and focus leaving them, dismiss it.\n   */\n  open: boolean;\n  /**\n   * The surface is shown (the list, or the empty content of {@link ListboxSurface}): it is\n   * positioned, and Escape dismisses it. While the listbox is open with nothing shown (no options\n   * to show), Escape is left to an enclosing layer, such as a Dialog around the picker.\n   */\n  surfaceOpen: boolean;\n  /**\n   * Called when the popup should close: set your open state to `false`. `reason` is `'escape'`,\n   * `'outside-press'` or `'focus-outside'`.\n   */\n  onDismiss: (reason: DismissReason) => void;\n  /** Your picker's root element: presses and focus inside it are not outside the popup. */\n  rootRef: React.RefObject<HTMLElement | null>;\n  /**\n   * The combobox element, which anchors the popup's dismiss layer. Pass the element to\n   * `setReference` too (merged into its ref), which places the surface against it.\n   */\n  anchorRef: React.RefObject<HTMLElement | null>;\n}\n\n/**\n * Result of {@link useListboxPopup}. Destructure it: `eslint-plugin-react-hooks` treats an object\n * with a member passed to a `ref` prop as a ref, and rejects reading its other members during\n * render (`react-hooks/refs`).\n */\nexport interface UseListboxPopupResult {\n  /** The popup's dismiss layer: pass it to {@link ListboxSurface}. */\n  layerId: string;\n  /**\n   * Ref callback for the element the surface is placed against: merge it into your combobox's ref.\n   */\n  setReference: (el: HTMLElement | null) => void;\n  /** Ref callback for the surface: pass it to {@link ListboxSurface}. */\n  surfaceRef: React.RefCallback<HTMLElement>;\n  /** The surface's `data-side`, `data-align` and position style: pass them to {@link ListboxSurface}. */\n  floatingProps: { 'data-side': string; 'data-align': string; style: React.CSSProperties };\n}\n\n/**\n * Dismissal and positioning of a custom picker's listbox popup, for {@link ListboxSurface}. The\n * popup is dismissed by Escape, by a press outside your picker and its surface, and by focus\n * leaving them (`onDismiss` says which). The surface opens below the anchor and as wide as it,\n * flips above it when there is no room below, and is limited to the space available; its\n * `data-side` and `data-align` attributes give the final placement.\n *\n * While the listbox is open with nothing to show (`surfaceOpen` is `false`), Escape is left to an\n * enclosing layer, such as a Dialog around the picker. Let your combobox's key handler leave it\n * too: on such an Escape, set your open state to `false` without calling `listbox.onKeyDown`,\n * which handles Escape (and prevents its default) whenever the listbox is open. Do so only when\n * `!event.nativeEvent.isComposing`, as Dropdown, Combobox and TagPicker do: an Escape that only\n * cancels an IME composition must not close the listbox, and `listbox.onKeyDown` ignores such\n * keys too.\n *\n * @example\n * const expanded = open && listbox.items.length > 0;\n * const { layerId, setReference, surfaceRef, floatingProps } = useListboxPopup({\n *   open,\n *   surfaceOpen: expanded,\n *   onDismiss: () => setOpen(false),\n *   rootRef,\n *   anchorRef: buttonRef,\n * });\n * const buttonMergedRef = useMergedRefs(buttonRef, setReference);\n */\nexport function useListboxPopup(options: UseListboxPopupOptions): UseListboxPopupResult {\n  const { open, surfaceOpen, onDismiss, rootRef, anchorRef } = options;\n  const surfaceElementRef = React.useRef<HTMLElement | null>(null);\n  const { setReference, setFloating, floatingProps } = usePopupPosition({\n    open: surfaceOpen,\n    side: 'bottom',\n    align: 'start',\n    matchReferenceWidth: true,\n    fitViewport: true,\n  });\n  const { layerId } = useDismiss({\n    open,\n    onDismiss: (reason) => onDismiss(reason),\n    refs: [rootRef, surfaceElementRef],\n    anchorRef,\n    kind: 'listbox',\n    escape: surfaceOpen,\n    focusOutside: true,\n  });\n  const surfaceRef = useMergedRefs<HTMLElement>(surfaceElementRef, setFloating);\n  return { layerId, setReference, surfaceRef, floatingProps };\n}\n\n/**\n * Attributes of the list element that ListboxSurface renders (see `listProps`). Its content is the\n * surface's `children`.\n */\nexport type ListboxSurfaceListProps = Omit<\n  React.HTMLAttributes<HTMLUListElement>,\n  | 'role'\n  | 'id'\n  | 'hidden'\n  | 'tabIndex'\n  | 'className'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-multiselectable'\n  | 'aria-activedescendant'\n  | 'children'\n  | 'dangerouslySetInnerHTML'\n> & {\n  /** Ref to the `role=\"listbox\"` element (it moves between the picker and the popup). */\n  ref?: React.Ref<HTMLUListElement>;\n};\n\n/**\n * Props of {@link ListboxSurface}. The options of one listbox live in one list at a time, and this\n * surface renders that list: render every option of the listbox inside it, never in a second list\n * of your own, not even for an exit animation.\n */\nexport interface ListboxSurfaceProps {\n  /** The listbox: the result of `useListbox` in select-only or editable mode. */\n  listbox: UseListboxResult;\n  /** `layerId` from {@link useListboxPopup}: the surface joins the popup's dismiss layer. */\n  layerId: string;\n  /** `surfaceRef` from {@link useListboxPopup}. */\n  surfaceRef: React.RefCallback<HTMLElement>;\n  /** `floatingProps` from {@link useListboxPopup}: the surface's placement. */\n  floatingProps: UseListboxPopupResult['floatingProps'];\n  /** The listbox is open (your open state). `emptyContent` shows only while it is. */\n  open: boolean;\n  /**\n   * The list is shown: the listbox is open and has options to show (`open &&\n   * listbox.items.length > 0`). The list then renders in the surface, and otherwise `hidden`, in\n   * place inside your picker. Set your combobox's `aria-expanded` to this value after spreading\n   * `getComboboxProps()`, which reports `open`, so the combobox is not announced as expanded while\n   * nothing is shown.\n   */\n  expanded: boolean;\n  /**\n   * Shown in the surface while the listbox is open but not expanded, such as a \"No matches\"\n   * message. `undefined` and `null` show no surface; any other value shows one, so `false` and\n   * `''` show an empty surface.\n   */\n  emptyContent?: React.ReactNode;\n  /** Names the list. Name it with this or `aria-labelledby`, usually your picker's label. */\n  'aria-label'?: string;\n  /** Ids of the elements that name the list, usually your picker's label. */\n  'aria-labelledby'?: string;\n  /**\n   * Options draw a check while selected (in a multi-select list, a checkbox square). Turn it off\n   * for a list that never shows selected options, such as the suggestions of a tag picker.\n   * @default true\n   */\n  showCheck?: boolean;\n  /**\n   * Classes merged last onto the list: they replace the list's own classes they conflict with,\n   * its maximum height included.\n   */\n  listClassName?: string;\n  /**\n   * Classes merged last onto the surface, the popup around the list: they replace its own\n   * classes they conflict with.\n   */\n  surfaceClassName?: string;\n  /**\n   * Attributes spread onto the list element before the listbox's own (`role`, `id`, `tabIndex`,\n   * `aria-multiselectable`, `aria-activedescendant` and `hidden` win, also where the listbox\n   * renders none of the last two): `data-*` and other `aria-*` attributes, `style`, and handlers,\n   * composed before the listbox's own `onMouseDown`. `ref` is merged with the list's. Name the list\n   * with `aria-label`/`aria-labelledby` (the props above), not here.\n   */\n  listProps?: ListboxSurfaceListProps;\n  /** The options (`Option`, `OptionGroup` or options of your own on `useListboxOption`). */\n  children?: React.ReactNode;\n}\n\nfunction preventMouseDown(event: React.MouseEvent) {\n  event.preventDefault();\n}\n\n/**\n * The option list of a custom picker and the popup it opens in: a `<ul role=\"listbox\">` with the\n * options (spread from `listbox.getListboxProps()`), rendered `hidden` in place inside your\n * picker while the list is not shown, so the options register and their ids exist from the first\n * render, and in a portaled surface placed by {@link useListboxPopup} while it is, never in both.\n * While the listbox is open with nothing to show, the surface shows `emptyContent` instead, if\n * any. A press on the surface keeps focus on your combobox. It provides the listbox's context to\n * the options, so it needs no {@link ListboxProvider}.\n *\n * @example\n * <ListboxSurface\n *   listbox={listbox}\n *   layerId={layerId}\n *   surfaceRef={surfaceRef}\n *   floatingProps={floatingProps}\n *   open={open}\n *   expanded={expanded}\n *   aria-labelledby={labelId}\n * >\n *   <Option value=\"georgia\">Georgia</Option>\n * </ListboxSurface>\n */\nexport function ListboxSurface(props: ListboxSurfaceProps) {\n  const {\n    listbox,\n    layerId,\n    surfaceRef,\n    floatingProps,\n    open,\n    expanded,\n    emptyContent,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    showCheck = true,\n    listClassName,\n    surfaceClassName,\n    listProps,\n    children,\n  } = props;\n\n  // The consumer's list attributes go first, so the listbox's own win; its `onMouseDown` runs\n  // before the list's (which keeps focus on the combobox) and its `ref` is merged with the list's.\n  const { ref: listRefProp, onMouseDown: listMouseDown, ...listRest } = listProps ?? {};\n  const listboxProps = listbox.getListboxProps();\n  const listRef = useMergedRefs<HTMLUListElement>(listRefProp, listboxProps.ref);\n\n  const list = (\n    <OptionCheckContext.Provider value={showCheck}>\n      <ListboxProvider value={listbox.context}>\n        <ul\n          {...listRest}\n          {...listboxProps}\n          // Absent from `listboxProps` when not set: a caller's value never survives the spread.\n          aria-multiselectable={listboxProps['aria-multiselectable']}\n          aria-activedescendant={listboxProps['aria-activedescendant']}\n          onMouseDown={composeEventHandlers(listMouseDown, listboxProps.onMouseDown)}\n          ref={listRef}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          hidden={!expanded || undefined}\n          className={cn(\n            listboxSurfaceClassNames.list,\n            'min-h-0 max-h-60 overflow-auto',\n            listClassName,\n          )}\n        >\n          {children}\n        </ul>\n      </ListboxProvider>\n    </OptionCheckContext.Provider>\n  );\n\n  // A closed listbox never leaves a surface behind: the text typed before closing survives it.\n  const showEmpty = open && !expanded && emptyContent !== undefined && emptyContent !== null;\n  if (!expanded && !showEmpty) return list;\n\n  return (\n    <>\n      {!expanded && list}\n      <Portal layerId={layerId}>\n        <div\n          ref={surfaceRef}\n          {...floatingProps}\n          data-wave-listbox-surface=\"\"\n          onMouseDown={preventMouseDown}\n          className={cn(\n            listboxSurfaceClassNames.root,\n            'flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4',\n            surfaceClassName,\n          )}\n        >\n          {expanded ? list : emptyContent}\n        </div>\n      </Portal>\n    </>\n  );\n}\nListboxSurface.displayName = 'ListboxSurface';\n"],"mappings":"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"}

package/dist/components/input/Option.mjs

@@ -199,29 +199,34 @@ function K(e) {
 	e.preventDefault();
 }
 function q(t) {
-	let { listbox: n, layerId: r, surfaceRef: i, floatingProps: a, open: o, expanded: s, emptyContent: l, "aria-label": u, "aria-labelledby": d, showCheck: f = !0, listClassName: p, surfaceClassName: m, children: h } = t, g = /* @__PURE__ */ C(T.Provider, {
-		value: f,
+	let { listbox: n, layerId: r, surfaceRef: i, floatingProps: a, open: o, expanded: l, emptyContent: u, "aria-label": d, "aria-labelledby": p, showCheck: m = !0, listClassName: h, surfaceClassName: g, listProps: v, children: y } = t, { ref: b, onMouseDown: x, ...E } = v ?? {}, D = n.getListboxProps(), O = f(b, D.ref), k = /* @__PURE__ */ C(T.Provider, {
+		value: m,
 		children: /* @__PURE__ */ C(W, {
 			value: n.context,
 			children: /* @__PURE__ */ C("ul", {
-				...n.getListboxProps(),
-				"aria-label": u,
-				"aria-labelledby": d,
-				hidden: !s || void 0,
-				className: e(c.list, "min-h-0 max-h-60 overflow-auto", p),
-				children: h
+				...E,
+				...D,
+				"aria-multiselectable": D["aria-multiselectable"],
+				"aria-activedescendant": D["aria-activedescendant"],
+				onMouseDown: s(x, D.onMouseDown),
+				ref: O,
+				"aria-label": d,
+				"aria-labelledby": p,
+				hidden: !l || void 0,
+				className: e(c.list, "min-h-0 max-h-60 overflow-auto", h),
+				children: y
 			})
 		})
 	});
-	return !s && (!o || s || l == null) ? g : /* @__PURE__ */ w(S, { children: [!s && g, /* @__PURE__ */ C(_, {
+	return !l && (!o || l || u == null) ? k : /* @__PURE__ */ w(S, { children: [!l && k, /* @__PURE__ */ C(_, {
 		layerId: r,
 		children: /* @__PURE__ */ C("div", {
 			ref: i,
 			...a,
 			"data-wave-listbox-surface": "",
 			onMouseDown: K,
-			className: e(c.root, "flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4", m),
-			children: s ? g : l
+			className: e(c.root, "flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4", g),
+			children: l ? k : u
 		})
 	})] });
 }

package/dist/components/input/Option.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Option.mjs","names":["useId","_Fragment","useId$1","React","OptionCheckContext","OPTION_CLASSES","cn","OptionGroupMembers","listener","value","count","store","OptionGroupContext","OptionGroupHiddenContext","useOptionGroupMembership","groups","removes","group","remove","DISABLED_BOX_FORCED_COLORS","DISABLED_GLYPH_FORCED_COLORS","renderCheck","multiselect","classes","optionClassNames","selected","glyph","CheckIcon","renderSlot","boxClasses","disabled","forcedColors","glyphClasses","OptionImpl","rest","props","showCheck","groupHidden","useListboxOption","hidden","ref","optionRef","selectOption","pressOption","highlightOption","optionAttributes","optionProps","checkIconRenders","checkIcon","slotRendersContent","checkIconEmpty","warnOnce","composeEventHandlers","onClick","onMouseDown","onPointerMove","className","children","MemoOption","Option","ELEMENT_NODE","TEXT_NODE","nameText","node","element","ownLabel","text","child","groupHasName","labelledBy","labelId","ariaLabel","label","heading","UNNAMED_GROUP_WARNING","OptionGroupImpl","ariaLabelledBy","ListboxContext","parentGroups","hiddenByConsumer","members","subscribe","unsubscribeMembers","unsubscribeStore","empty","hasLabel","headingRef","isDev","optionGroupClassNames","materialiseSlotContent","OptionGroup","ListboxProvider","useListboxPopup","options","surfaceElementRef","usePopupPosition","surfaceOpen","useDismiss","onDismiss","reason","rootRef","useMergedRefs","setFloating","preventMouseDown","ListboxSurface","list","listbox","expanded","listboxSurfaceClassNames","listClassName","emptyContent","Fragment","Portal","surfaceRef","floatingProps","surfaceClassName"],"sources":["../../../src/components/input/Option.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  listboxSurfaceClassNames,\n  optionClassNames,\n  optionGroupClassNames,\n} from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { hasWarned, isDev, warnOnce } from '../../lib/dev';\nimport { CheckIcon } from '../../lib/icons';\nimport { materialiseSlotContent, renderSlot, slotRendersContent, type Slot } from '../../lib/slot';\nimport { forcedColors } from '../../lib/styles';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport type { DismissReason } from '../../hooks/useDismiss';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport {\n  ListboxContext,\n  markListboxElement,\n  useListboxOption,\n  type ListboxContextValue,\n  type ListboxStore,\n  type UseListboxResult,\n} from '../../hooks/useListbox';\nimport { Portal } from '../portal/Portal';\n\n/* ------------------------------------------------------------------ */\n/*  Option                                                             */\n/* ------------------------------------------------------------------ */\n\n/**\n * Props of {@link Option}, an option of a listbox (Listbox, Combobox, Dropdown or a custom\n * picker's list).\n */\nexport interface OptionProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'value'> {\n  /** Value associated with this option. Unique within its listbox. */\n  value: string;\n  /**\n   * Text shown in the combobox (Combobox input, Dropdown trigger) when this option is selected.\n   * Defaults to `textValue`, then the option's text content, then `value`. Pass it when the\n   * children are not plain text (icons, custom components).\n   */\n  label?: string;\n  /** Text matched by typeahead and filtering instead of the label. */\n  textValue?: string;\n  /**\n   * Whether the option is disabled: it stays in the list but can never be selected (a click, Enter\n   * and Space do nothing). Keyboard navigation and typeahead skip it, unless the listbox keeps\n   * disabled options focusable (`disabledOptionsFocusable`), where they reach it. It is drawn in\n   * the muted text colour, its check included: in a multi-select list the checkbox square takes\n   * that colour instead of the brand colour, checked or not.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Replaces the check glyph that marks the option while it is selected (decorative,\n   * `aria-hidden`); in a multi-select list the glyph is drawn inside the option's 16px checkbox\n   * square. The check is a required indicator, the sign of the selection that does not rely on\n   * colour: `null` and `undefined` keep the default glyph, and so does a value that renders\n   * nothing (`false`, `''`, an empty array), which also logs a development warning. Unlike\n   * `Combobox.expandIcon`, a value that renders nothing does not hide the indicator (Fluent's\n   * `checkIcon={null}` removes it).\n   * @default a check mark\n   */\n  checkIcon?: Slot<'span'>;\n  /**\n   * Hides the option, like a native `<option hidden>`: it is not shown, keyboard navigation and\n   * typeahead skip it, and it never becomes the active option. Its label stays known, so a\n   * selected hidden option (a placeholder) still shows in the combobox. The options of a hidden\n   * `OptionGroup` are hidden the same way.\n   * @default false\n   */\n  hidden?: boolean;\n  /** Ref to the option `<li>` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\n/** Whether options draw the selected check mark (P05-internal; TagPicker lists no selected options). */\nconst OptionCheckContext = React.createContext(true);\nOptionCheckContext.displayName = 'OptionCheckContext';\n\n/*\n * State is exposed as data attributes (C-CLASS): `data-active` (keyboard/pointer highlight),\n * `data-selected`, `data-disabled`. State classes come before the consumer's `className` in `cn()`.\n *\n * Backgrounds (input-pickers#20): one unconditional `bg-(--option-bg)` paints the option, and the\n * hover/selected/active variants only set `--option-bg`. A variant that set `background-color`\n * itself (class + attribute or pseudo-class) would out-specify a consumer's plain `bg-*` class in\n * the cascade even though `cn()` keeps it; instead tailwind-merge replaces `bg-(--option-bg)` with\n * the consumer's class, which is then the only background declaration on the option. A consumer\n * `data-[active]:bg-…` / `data-[selected]:bg-…` restyles a single state (it out-specifies the\n * unconditional reader). The active outline is the focus indicator and stays a state variant.\n *\n * A filtered-out option carries the `hidden` attribute; base.css's scoped `[hidden]` rule hides\n * it over `flex` and over a consumer's display class.\n */\nconst OPTION_CLASSES = cn(\n  'flex cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-body-1 text-foreground',\n  'bg-(--option-bg) [--option-bg:transparent]',\n  'not-disabled:not-aria-disabled:hover:[--option-bg:var(--wave-subtle-hover)]',\n  'data-[selected]:[--option-bg:var(--wave-subtle-selected)]',\n  'data-[active]:[--option-bg:var(--wave-subtle-hover)]',\n  'data-[active]:outline-2 data-[active]:-outline-offset-2 data-[active]:outline-ring',\n  'aria-disabled:cursor-not-allowed aria-disabled:text-muted-foreground',\n);\n\n/**\n * The values of the options rendered inside an `OptionGroup`, whatever wraps them (custom\n * components, Fragments, nested groups): each option adds its value from a layout effect.\n */\nclass OptionGroupMembers {\n  private readonly counts = new Map<string, number>();\n  private readonly listeners = new Set<() => void>();\n\n  subscribe = (listener: () => void): (() => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  add(value: string): () => void {\n    this.counts.set(value, (this.counts.get(value) ?? 0) + 1);\n    this.notify();\n    return () => {\n      const count = (this.counts.get(value) ?? 1) - 1;\n      if (count > 0) this.counts.set(value, count);\n      else this.counts.delete(value);\n      this.notify();\n    };\n  }\n\n  /** At least one option, and every one of them is hidden (filtered out, or by the consumer). */\n  allHidden(store: ListboxStore | undefined): boolean {\n    if (store === undefined || this.counts.size === 0) return false;\n    for (const value of this.counts.keys()) if (!store.isHidden(value)) return false;\n    return true;\n  }\n\n  private notify(): void {\n    for (const listener of [...this.listeners]) listener();\n  }\n}\n\n/** The groups around an option, outermost first (P05-internal). */\nconst OptionGroupContext = React.createContext<readonly OptionGroupMembers[]>([]);\nOptionGroupContext.displayName = 'OptionGroupContext';\n\n/** A group around the option has the consumer's `hidden` attribute (P05-internal). */\nconst OptionGroupHiddenContext = React.createContext(false);\nOptionGroupHiddenContext.displayName = 'OptionGroupHiddenContext';\n\n/** Adds an option's value to every group around it while the option is mounted. */\nfunction useOptionGroupMembership(value: string): void {\n  const groups = React.useContext(OptionGroupContext);\n  React.useLayoutEffect(() => {\n    if (groups.length === 0) return;\n    const removes = groups.map((group) => group.add(value));\n    return () => {\n      for (const remove of removes) remove();\n    };\n  }, [groups, value]);\n}\n\n/*\n * Forced colours of a disabled option's box, as Checkbox draws a disabled box: GrayText on Canvas\n * for the square and its glyph, without the Highlight background of `forcedColors.selectedLeaf`.\n */\nconst DISABLED_BOX_FORCED_COLORS = 'forced-colors:border-[GrayText] forced-colors:bg-[Canvas]';\nconst DISABLED_GLYPH_FORCED_COLORS =\n  'forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none';\n\n/** What the check column of an option draws (see {@link renderCheck}). */\ninterface CheckState {\n  selected: boolean;\n  multiselect: boolean;\n  disabled: boolean;\n}\n\n/**\n * The check column of an option. Single-select: the check glyph, kept in its place but not drawn\n * while the option is not selected, so the option texts line up. Multi-select: a 16px checkbox\n * square in Checkbox's colours, with the glyph inside only while selected; as a leaf indicator it\n * takes `forcedColors.selectedLeaf` while checked. A disabled option's square follows the row, as\n * the single-select glyph does: its muted text colour draws the square and the glyph, in place of\n * the brand colour. `glyph` is the consumer's `checkIcon` when it renders content, else\n * `undefined` for the default glyph.\n */\nfunction renderCheck(\n  glyph: Slot<'span'> | undefined,\n  { selected, multiselect, disabled }: CheckState,\n): React.ReactNode {\n  if (!multiselect) {\n    const classes = cn(optionClassNames.checkIcon, 'shrink-0', !selected && 'invisible');\n    return glyph === undefined ? (\n      <CheckIcon className={classes} />\n    ) : (\n      renderSlot(glyph, 'span', cn('inline-flex', classes), { 'aria-hidden': true })\n    );\n  }\n  // One class set per state, so a disabled box never carries the brand classes it replaces.\n  let boxClasses: string;\n  if (disabled) {\n    boxClasses = cn('border-current bg-transparent', DISABLED_BOX_FORCED_COLORS);\n  } else if (selected) {\n    boxClasses = cn('border-primary bg-primary text-primary-foreground', forcedColors.selectedLeaf);\n  } else {\n    boxClasses = cn('border-stroke-accessible bg-transparent', forcedColors.control);\n  }\n  const glyphClasses = disabled ? DISABLED_GLYPH_FORCED_COLORS : undefined;\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-wave-option-box=\"\"\n      className={cn(\n        optionClassNames.indicator,\n        'flex h-4 w-4 shrink-0 items-center justify-center rounded-xs border',\n        boxClasses,\n      )}\n    >\n      {selected &&\n        (glyph === undefined ? (\n          <CheckIcon size={12} className={cn(optionClassNames.checkIcon, glyphClasses)} />\n        ) : (\n          renderSlot(\n            glyph,\n            'span',\n            cn(optionClassNames.checkIcon, 'inline-flex shrink-0', glyphClasses),\n            {\n              'aria-hidden': true,\n            },\n          )\n        ))}\n    </span>\n  );\n}\n\nfunction OptionImpl(props: OptionProps) {\n  const {\n    value,\n    label,\n    textValue,\n    disabled = false,\n    hidden = false,\n    checkIcon,\n    className,\n    children,\n    onClick,\n    onMouseDown,\n    onPointerMove,\n    ref,\n    ...rest\n  } = props;\n  const showCheck = React.useContext(OptionCheckContext);\n  const groupHidden = React.useContext(OptionGroupHiddenContext);\n  // A consumer-hidden option is not navigable; optionProps renders `hidden`.\n  const { selected, multiselect, optionProps } = useListboxOption<HTMLLIElement>(\n    { value, label, textValue, disabled, hidden: hidden || groupHidden },\n    ref,\n  );\n  useOptionGroupMembership(value);\n  const {\n    ref: optionRef,\n    onClick: selectOption,\n    // Standalone mode only: the pointer press that focuses the list.\n    onMouseDown: pressOption,\n    onPointerMove: highlightOption,\n    ...optionAttributes\n  } = optionProps;\n\n  // The check is a required indicator (C-SLOTS): a `checkIcon` that renders nothing keeps the\n  // default glyph and warns once.\n  const checkIconRenders = checkIcon != null && slotRendersContent(checkIcon);\n  const checkIconEmpty = checkIcon != null && !checkIconRenders;\n  React.useEffect(() => {\n    if (checkIconEmpty) {\n      warnOnce(\n        'Option:checkIcon-empty',\n        'Option: `checkIcon` renders nothing, so the default check shows: a selected option must show its state. Pass a glyph, or leave it unset.',\n      );\n    }\n  }, [checkIconEmpty]);\n\n  return (\n    <li\n      data-value={value}\n      {...rest}\n      {...optionAttributes}\n      ref={optionRef}\n      onClick={composeEventHandlers(onClick, selectOption)}\n      onMouseDown={composeEventHandlers(onMouseDown, pressOption)}\n      onPointerMove={composeEventHandlers(onPointerMove, highlightOption)}\n      className={cn(\n        optionClassNames.root,\n        OPTION_CLASSES,\n        // While a multi-select option draws its box, the box carries the state, and\n        // `forcedColors.selectedContainer` would draw every selected option like the active one.\n        selected && !(multiselect && showCheck) && forcedColors.selectedContainer,\n        className,\n      )}\n    >\n      {showCheck &&\n        renderCheck(checkIconRenders ? checkIcon : undefined, { selected, multiselect, disabled })}\n      <span className={cn(optionClassNames.content, 'min-w-0 flex-1')}>{children ?? value}</span>\n    </li>\n  );\n}\nOptionImpl.displayName = 'Option';\n\nconst MemoOption = /* @__PURE__ */ React.memo(OptionImpl);\nMemoOption.displayName = 'Option';\n\n/**\n * An option of a listbox: a `Listbox`, `Combobox` or `Dropdown` (and `TagPicker`'s generated\n * list), or a custom picker's list, rendered through `ListboxSurface` or under a\n * `ListboxProvider`. Renders `<li role=\"option\">` with a stable id (`aria-activedescendant`\n * target), `aria-selected`, a check mark while selected (`checkIcon` replaces it; in a\n * multi-select list it sits in a checkbox square) and `data-active`/`data-selected`/\n * `data-disabled` attributes for styling.\n *\n * Options register with the surrounding listbox (in DOM order, groups included), so they can be\n * wrapped, grouped or rendered conditionally. The option is memoized: moving the highlight\n * re-renders only the previously and the newly active option.\n *\n * Styling: `className` comes last. A plain background class (`className=\"bg-primary\"`) replaces\n * the built-in hover, selected and active backgrounds in every state. To restyle one state only,\n * use its data variant (`data-[active]:bg-…`, `data-[selected]:bg-…`). The active option keeps\n * its focus outline.\n *\n * Use it inside a listbox only; it throws in development elsewhere.\n */\nexport const Option: React.NamedExoticComponent<OptionProps> = /* @__PURE__ */ markListboxElement(\n  MemoOption,\n  'option',\n);\n\n/* ------------------------------------------------------------------ */\n/*  OptionGroup                                                        */\n/* ------------------------------------------------------------------ */\n\n/**\n * Props of {@link OptionGroup}. `aria-label` and `aria-labelledby` go to the group's\n * `role=\"group\"` list; the other props go to its `<li role=\"presentation\">` item.\n */\nexport interface OptionGroupProps extends React.LiHTMLAttributes<HTMLLIElement> {\n  /**\n   * The group's heading, which names the group. Keep it text (an icon next to the text is fine): a\n   * label cannot be interactive, since nothing in it is reachable inside a listbox. Without a\n   * label no heading renders; name the group with `aria-label` or `aria-labelledby` then. A group\n   * without a name logs a development warning.\n   */\n  label?: React.ReactNode;\n  /**\n   * Names the group's list in place of the label (the heading still shows). A prop that holds\n   * `undefined`, as from a wrapper that forwards it, leaves the label in charge.\n   */\n  'aria-label'?: string;\n  /**\n   * Ids of the elements that name the group's list, in place of the label (the heading still\n   * shows). A prop that holds `undefined` leaves the label in charge.\n   */\n  'aria-labelledby'?: string;\n  /**\n   * Hides the group and every option in it (see `Option`'s `hidden`): keyboard navigation and\n   * typeahead skip its options.\n   * @default false\n   */\n  hidden?: boolean;\n  /** Ref to the group's `<li role=\"presentation\">` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\nconst ELEMENT_NODE = 1;\nconst TEXT_NODE = 3;\n\n/**\n * The text a heading gives the name of its group, for the development check of `OptionGroup`: its\n * text without `aria-hidden` or `hidden` parts, where an element's `aria-label` or an image's `alt`\n * stands for its content.\n */\nfunction nameText(node: Node | null): string {\n  if (node === null) return '';\n  if (node.nodeType === TEXT_NODE) return node.textContent ?? '';\n  if (node.nodeType !== ELEMENT_NODE) return '';\n  const element = node as Element;\n  if (element.getAttribute('aria-hidden') === 'true' || element.hasAttribute('hidden')) return '';\n  const ownLabel = element.getAttribute('aria-label')?.trim();\n  if (ownLabel) return ownLabel;\n  if (element.localName === 'img') return element.getAttribute('alt') ?? '';\n  let text = '';\n  for (const child of Array.from(element.childNodes)) text += nameText(child);\n  return text;\n}\n\n/**\n * Whether a group's list has a name, for the development check of `OptionGroup`, in the order the\n * name is computed: a consumer `aria-labelledby` that is not blank (its presence counts; the\n * elements it names are not read), else a non-blank `aria-label`, else the heading that labels the\n * list. A string or number label is its own text; only an element label is read from the rendered\n * heading ({@link nameText}).\n */\nfunction groupHasName(\n  label: React.ReactNode,\n  ariaLabel: string | undefined,\n  labelledBy: string | undefined,\n  labelId: string,\n  heading: HTMLElement | null,\n): boolean {\n  if (labelledBy !== undefined && labelledBy !== labelId && labelledBy.trim() !== '') return true;\n  if (ariaLabel !== undefined && ariaLabel.trim() !== '') return true;\n  if (labelledBy !== labelId) return false;\n  if (typeof label === 'string' || typeof label === 'number') return String(label).trim() !== '';\n  return nameText(heading).trim() !== '';\n}\n\nconst UNNAMED_GROUP_WARNING = 'OptionGroup:unnamed';\n\nfunction OptionGroupImpl({\n  label,\n  className,\n  children,\n  hidden,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ref,\n  ...rest\n}: OptionGroupProps) {\n  const labelId = useId('option-group');\n  const store = React.useContext(ListboxContext)?.store;\n  const parentGroups = React.useContext(OptionGroupContext);\n  const hiddenByConsumer = React.useContext(OptionGroupHiddenContext) || !!hidden;\n  const [members] = React.useState(() => new OptionGroupMembers());\n  const groups = React.useMemo(() => [...parentGroups, members], [parentGroups, members]);\n  const subscribe = React.useCallback(\n    (listener: () => void) => {\n      const unsubscribeMembers = members.subscribe(listener);\n      const unsubscribeStore = store?.subscribe(listener);\n      return () => {\n        unsubscribeMembers();\n        unsubscribeStore?.();\n      };\n    },\n    [members, store],\n  );\n  // Hidden while every option inside it is filtered out or hidden, also options wrapped in a\n  // component (the options register with the group; re-read when they do and when the listbox\n  // state changes).\n  // The server render and the first client render show the group: no option has registered yet.\n  const empty = React.useSyncExternalStore(\n    subscribe,\n    () => members.allHidden(store),\n    () => false,\n  );\n\n  // The heading renders only for a label that renders content, so the list never points at an\n  // empty heading. A consumer name wins over the heading; a prop that holds `undefined` (a wrapper\n  // forwarding it) is no name of the consumer's.\n  const hasLabel = slotRendersContent(label);\n  const labelledBy = ariaLabelledBy ?? (ariaLabel === undefined && hasLabel ? labelId : undefined);\n\n  // C-DEV: warn once when nothing names the group, checked again whenever the label, the\n  // consumer `aria-label` or the resolved `aria-labelledby` changes.\n  const headingRef = React.useRef<HTMLDivElement | null>(null);\n  React.useEffect(() => {\n    if (!isDev || hasWarned(UNNAMED_GROUP_WARNING)) return;\n    if (groupHasName(label, ariaLabel, labelledBy, labelId, headingRef.current)) return;\n    warnOnce(\n      UNNAMED_GROUP_WARNING,\n      'OptionGroup: the group has no name. Give it a text `label`, `aria-label` or `aria-labelledby`.',\n    );\n  }, [label, ariaLabel, labelledBy, labelId]);\n\n  return (\n    <li\n      {...rest}\n      ref={ref}\n      role=\"presentation\"\n      hidden={hidden || empty || undefined}\n      className={cn(optionGroupClassNames.root, className)}\n    >\n      {hasLabel && (\n        <div\n          ref={headingRef}\n          id={labelId}\n          role=\"presentation\"\n          className={cn(\n            optionGroupClassNames.label,\n            'px-3 py-1 text-caption-1 font-semibold text-muted-foreground',\n          )}\n        >\n          {materialiseSlotContent(label)}\n        </div>\n      )}\n      <ul\n        role=\"group\"\n        aria-label={ariaLabel}\n        aria-labelledby={labelledBy}\n        className={optionGroupClassNames.list}\n      >\n        <OptionGroupHiddenContext.Provider value={hiddenByConsumer}>\n          <OptionGroupContext.Provider value={groups}>{children}</OptionGroupContext.Provider>\n        </OptionGroupHiddenContext.Provider>\n      </ul>\n    </li>\n  );\n}\nOptionGroupImpl.displayName = 'OptionGroup';\n\n/**\n * Groups options under an optional heading: `<li role=\"presentation\">` with the heading and a\n * `<ul role=\"group\">` of the options, named by the heading (`label`) or by your `aria-label` or\n * `aria-labelledby`, which win over it. Hidden while a filter (or their own `hidden`) hides all\n * its options, also options wrapped in a component or in nested groups. Use it inside a listbox,\n * as `Option`.\n */\nexport const OptionGroup: React.FC<OptionGroupProps> = /* @__PURE__ */ markListboxElement(\n  OptionGroupImpl,\n  'group',\n);\n\n/* ------------------------------------------------------------------ */\n/*  ListboxProvider                                                    */\n/* ------------------------------------------------------------------ */\n\n/** Props of {@link ListboxProvider}. */\nexport interface ListboxProviderProps {\n  /** The context of a listbox: `useListbox(...).context`. */\n  value: ListboxContextValue;\n  /** The options (`Option`, `OptionGroup` or options of your own on `useListboxOption`). */\n  children?: React.ReactNode;\n}\n\n/**\n * Provides a listbox's context to its options, for a custom picker that renders its list without\n * `ListboxSurface`: `<ListboxProvider value={listbox.context}><ul {...listbox.getListboxProps()}>…</ul></ListboxProvider>`.\n */\nexport function ListboxProvider({ value, children }: ListboxProviderProps) {\n  return <ListboxContext.Provider value={value}>{children}</ListboxContext.Provider>;\n}\nListboxProvider.displayName = 'ListboxProvider';\n\n/* ------------------------------------------------------------------ */\n/*  Listbox popup: useListboxPopup and ListboxSurface                  */\n/* ------------------------------------------------------------------ */\n\n/** Options of {@link useListboxPopup}. */\nexport interface UseListboxPopupOptions {\n  /**\n   * The listbox is open (your open state). While it is, a press outside your picker and its\n   * surface, and focus leaving them, dismiss it.\n   */\n  open: boolean;\n  /**\n   * The surface is shown (the list, or the empty content of {@link ListboxSurface}): it is\n   * positioned, and Escape dismisses it. While the listbox is open with nothing shown (no options\n   * to show), Escape is left to an enclosing layer, such as a Dialog around the picker.\n   */\n  surfaceOpen: boolean;\n  /**\n   * Called when the popup should close: set your open state to `false`. `reason` is `'escape'`,\n   * `'outside-press'` or `'focus-outside'`.\n   */\n  onDismiss: (reason: DismissReason) => void;\n  /** Your picker's root element: presses and focus inside it are not outside the popup. */\n  rootRef: React.RefObject<HTMLElement | null>;\n  /**\n   * The combobox element, which anchors the popup's dismiss layer. Pass the element to\n   * `setReference` too (merged into its ref), which places the surface against it.\n   */\n  anchorRef: React.RefObject<HTMLElement | null>;\n}\n\n/**\n * Result of {@link useListboxPopup}. Destructure it: `eslint-plugin-react-hooks` treats an object\n * with a member passed to a `ref` prop as a ref, and rejects reading its other members during\n * render (`react-hooks/refs`).\n */\nexport interface UseListboxPopupResult {\n  /** The popup's dismiss layer: pass it to {@link ListboxSurface}. */\n  layerId: string;\n  /**\n   * Ref callback for the element the surface is placed against: merge it into your combobox's ref.\n   */\n  setReference: (el: HTMLElement | null) => void;\n  /** Ref callback for the surface: pass it to {@link ListboxSurface}. */\n  surfaceRef: React.RefCallback<HTMLElement>;\n  /** The surface's `data-side`, `data-align` and position style: pass them to {@link ListboxSurface}. */\n  floatingProps: { 'data-side': string; 'data-align': string; style: React.CSSProperties };\n}\n\n/**\n * Dismissal and positioning of a custom picker's listbox popup, for {@link ListboxSurface}. The\n * popup is dismissed by Escape, by a press outside your picker and its surface, and by focus\n * leaving them (`onDismiss` says which). The surface opens below the anchor and as wide as it,\n * flips above it when there is no room below, and is limited to the space available; its\n * `data-side` and `data-align` attributes give the final placement.\n *\n * While the listbox is open with nothing to show (`surfaceOpen` is `false`), Escape is left to an\n * enclosing layer, such as a Dialog around the picker. Let your combobox's key handler leave it\n * too: on such an Escape, set your open state to `false` without calling `listbox.onKeyDown`,\n * which handles Escape (and prevents its default) whenever the listbox is open. Do so only when\n * `!event.nativeEvent.isComposing`, as Dropdown, Combobox and TagPicker do: an Escape that only\n * cancels an IME composition must not close the listbox, and `listbox.onKeyDown` ignores such\n * keys too.\n *\n * @example\n * const expanded = open && listbox.items.length > 0;\n * const { layerId, setReference, surfaceRef, floatingProps } = useListboxPopup({\n *   open,\n *   surfaceOpen: expanded,\n *   onDismiss: () => setOpen(false),\n *   rootRef,\n *   anchorRef: buttonRef,\n * });\n * const buttonMergedRef = useMergedRefs(buttonRef, setReference);\n */\nexport function useListboxPopup(options: UseListboxPopupOptions): UseListboxPopupResult {\n  const { open, surfaceOpen, onDismiss, rootRef, anchorRef } = options;\n  const surfaceElementRef = React.useRef<HTMLElement | null>(null);\n  const { setReference, setFloating, floatingProps } = usePopupPosition({\n    open: surfaceOpen,\n    side: 'bottom',\n    align: 'start',\n    matchReferenceWidth: true,\n    fitViewport: true,\n  });\n  const { layerId } = useDismiss({\n    open,\n    onDismiss: (reason) => onDismiss(reason),\n    refs: [rootRef, surfaceElementRef],\n    anchorRef,\n    kind: 'listbox',\n    escape: surfaceOpen,\n    focusOutside: true,\n  });\n  const surfaceRef = useMergedRefs<HTMLElement>(surfaceElementRef, setFloating);\n  return { layerId, setReference, surfaceRef, floatingProps };\n}\n\n/**\n * Props of {@link ListboxSurface}. The options of one listbox live in one list at a time, and this\n * surface renders that list: render every option of the listbox inside it, never in a second list\n * of your own, not even for an exit animation.\n */\nexport interface ListboxSurfaceProps {\n  /** The listbox: the result of `useListbox` in select-only or editable mode. */\n  listbox: UseListboxResult;\n  /** `layerId` from {@link useListboxPopup}: the surface joins the popup's dismiss layer. */\n  layerId: string;\n  /** `surfaceRef` from {@link useListboxPopup}. */\n  surfaceRef: React.RefCallback<HTMLElement>;\n  /** `floatingProps` from {@link useListboxPopup}: the surface's placement. */\n  floatingProps: UseListboxPopupResult['floatingProps'];\n  /** The listbox is open (your open state). `emptyContent` shows only while it is. */\n  open: boolean;\n  /**\n   * The list is shown: the listbox is open and has options to show (`open &&\n   * listbox.items.length > 0`). The list then renders in the surface, and otherwise `hidden`, in\n   * place inside your picker. Set your combobox's `aria-expanded` to this value after spreading\n   * `getComboboxProps()`, which reports `open`, so the combobox is not announced as expanded while\n   * nothing is shown.\n   */\n  expanded: boolean;\n  /**\n   * Shown in the surface while the listbox is open but not expanded, such as a \"No matches\"\n   * message. `undefined` and `null` show no surface; any other value shows one, so `false` and\n   * `''` show an empty surface.\n   */\n  emptyContent?: React.ReactNode;\n  /** Names the list. Name it with this or `aria-labelledby`, usually your picker's label. */\n  'aria-label'?: string;\n  /** Ids of the elements that name the list, usually your picker's label. */\n  'aria-labelledby'?: string;\n  /**\n   * Options draw a check while selected (in a multi-select list, a checkbox square). Turn it off\n   * for a list that never shows selected options, such as the suggestions of a tag picker.\n   * @default true\n   */\n  showCheck?: boolean;\n  /**\n   * Classes merged last onto the list: they replace the list's own classes they conflict with,\n   * its maximum height included.\n   */\n  listClassName?: string;\n  /**\n   * Classes merged last onto the surface, the popup around the list: they replace its own\n   * classes they conflict with.\n   */\n  surfaceClassName?: string;\n  /** The options (`Option`, `OptionGroup` or options of your own on `useListboxOption`). */\n  children?: React.ReactNode;\n}\n\nfunction preventMouseDown(event: React.MouseEvent) {\n  event.preventDefault();\n}\n\n/**\n * The option list of a custom picker and the popup it opens in: a `<ul role=\"listbox\">` with the\n * options (spread from `listbox.getListboxProps()`), rendered `hidden` in place inside your\n * picker while the list is not shown, so the options register and their ids exist from the first\n * render, and in a portaled surface placed by {@link useListboxPopup} while it is, never in both.\n * While the listbox is open with nothing to show, the surface shows `emptyContent` instead, if\n * any. A press on the surface keeps focus on your combobox. It provides the listbox's context to\n * the options, so it needs no {@link ListboxProvider}.\n *\n * @example\n * <ListboxSurface\n *   listbox={listbox}\n *   layerId={layerId}\n *   surfaceRef={surfaceRef}\n *   floatingProps={floatingProps}\n *   open={open}\n *   expanded={expanded}\n *   aria-labelledby={labelId}\n * >\n *   <Option value=\"georgia\">Georgia</Option>\n * </ListboxSurface>\n */\nexport function ListboxSurface(props: ListboxSurfaceProps) {\n  const {\n    listbox,\n    layerId,\n    surfaceRef,\n    floatingProps,\n    open,\n    expanded,\n    emptyContent,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    showCheck = true,\n    listClassName,\n    surfaceClassName,\n    children,\n  } = props;\n\n  const list = (\n    <OptionCheckContext.Provider value={showCheck}>\n      <ListboxProvider value={listbox.context}>\n        <ul\n          {...listbox.getListboxProps()}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          hidden={!expanded || undefined}\n          className={cn(\n            listboxSurfaceClassNames.list,\n            'min-h-0 max-h-60 overflow-auto',\n            listClassName,\n          )}\n        >\n          {children}\n        </ul>\n      </ListboxProvider>\n    </OptionCheckContext.Provider>\n  );\n\n  // A closed listbox never leaves a surface behind: the text typed before closing survives it.\n  const showEmpty = open && !expanded && emptyContent !== undefined && emptyContent !== null;\n  if (!expanded && !showEmpty) return list;\n\n  return (\n    <>\n      {!expanded && list}\n      <Portal layerId={layerId}>\n        <div\n          ref={surfaceRef}\n          {...floatingProps}\n          data-wave-listbox-surface=\"\"\n          onMouseDown={preventMouseDown}\n          className={cn(\n            listboxSurfaceClassNames.root,\n            'flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4',\n            surfaceClassName,\n          )}\n        >\n          {expanded ? list : emptyContent}\n        </div>\n      </Portal>\n    </>\n  );\n}\nListboxSurface.displayName = 'ListboxSurface';\n"],"mappings":"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"}
+{"version":3,"file":"Option.mjs","names":["useId","_Fragment","useId$1","React","OptionCheckContext","OPTION_CLASSES","cn","OptionGroupMembers","listener","value","count","store","OptionGroupContext","OptionGroupHiddenContext","useOptionGroupMembership","groups","removes","group","remove","DISABLED_BOX_FORCED_COLORS","DISABLED_GLYPH_FORCED_COLORS","renderCheck","multiselect","classes","optionClassNames","selected","glyph","CheckIcon","renderSlot","boxClasses","disabled","forcedColors","glyphClasses","OptionImpl","rest","props","showCheck","groupHidden","useListboxOption","hidden","ref","optionRef","selectOption","pressOption","highlightOption","optionAttributes","optionProps","checkIconRenders","checkIcon","slotRendersContent","checkIconEmpty","warnOnce","composeEventHandlers","onClick","onMouseDown","onPointerMove","className","children","MemoOption","Option","ELEMENT_NODE","TEXT_NODE","nameText","node","element","ownLabel","text","child","groupHasName","labelledBy","labelId","ariaLabel","label","heading","UNNAMED_GROUP_WARNING","OptionGroupImpl","ariaLabelledBy","ListboxContext","parentGroups","hiddenByConsumer","members","subscribe","unsubscribeMembers","unsubscribeStore","empty","hasLabel","headingRef","isDev","optionGroupClassNames","materialiseSlotContent","OptionGroup","ListboxProvider","useListboxPopup","options","surfaceElementRef","usePopupPosition","surfaceOpen","useDismiss","onDismiss","reason","rootRef","useMergedRefs","setFloating","preventMouseDown","ListboxSurface","listRefProp","listMouseDown","listRest","listProps","listboxProps","listbox","listRef","list","expanded","listboxSurfaceClassNames","listClassName","emptyContent","Fragment","Portal","surfaceRef","floatingProps","surfaceClassName"],"sources":["../../../src/components/input/Option.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  listboxSurfaceClassNames,\n  optionClassNames,\n  optionGroupClassNames,\n} from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { hasWarned, isDev, warnOnce } from '../../lib/dev';\nimport { CheckIcon } from '../../lib/icons';\nimport { materialiseSlotContent, renderSlot, slotRendersContent, type Slot } from '../../lib/slot';\nimport { forcedColors } from '../../lib/styles';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport type { DismissReason } from '../../hooks/useDismiss';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport {\n  ListboxContext,\n  markListboxElement,\n  useListboxOption,\n  type ListboxContextValue,\n  type ListboxStore,\n  type UseListboxResult,\n} from '../../hooks/useListbox';\nimport { Portal } from '../portal/Portal';\n\n/* ------------------------------------------------------------------ */\n/*  Option                                                             */\n/* ------------------------------------------------------------------ */\n\n/**\n * Props of {@link Option}, an option of a listbox (Listbox, Combobox, Dropdown or a custom\n * picker's list).\n */\nexport interface OptionProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'value'> {\n  /** Value associated with this option. Unique within its listbox. */\n  value: string;\n  /**\n   * Text shown in the combobox (Combobox input, Dropdown trigger) when this option is selected.\n   * Defaults to `textValue`, then the option's text content, then `value`. Pass it when the\n   * children are not plain text (icons, custom components).\n   */\n  label?: string;\n  /** Text matched by typeahead and filtering instead of the label. */\n  textValue?: string;\n  /**\n   * Whether the option is disabled: it stays in the list but can never be selected (a click, Enter\n   * and Space do nothing). Keyboard navigation and typeahead skip it, unless the listbox keeps\n   * disabled options focusable (`disabledOptionsFocusable`), where they reach it. It is drawn in\n   * the muted text colour, its check included: in a multi-select list the checkbox square takes\n   * that colour instead of the brand colour, checked or not.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Replaces the check glyph that marks the option while it is selected (decorative,\n   * `aria-hidden`); in a multi-select list the glyph is drawn inside the option's 16px checkbox\n   * square. The check is a required indicator, the sign of the selection that does not rely on\n   * colour: `null` and `undefined` keep the default glyph, and so does a value that renders\n   * nothing (`false`, `''`, an empty array), which also logs a development warning. Unlike\n   * `Combobox.expandIcon`, a value that renders nothing does not hide the indicator (Fluent's\n   * `checkIcon={null}` removes it).\n   * @default a check mark\n   */\n  checkIcon?: Slot<'span'>;\n  /**\n   * Hides the option, like a native `<option hidden>`: it is not shown, keyboard navigation and\n   * typeahead skip it, and it never becomes the active option. Its label stays known, so a\n   * selected hidden option (a placeholder) still shows in the combobox. The options of a hidden\n   * `OptionGroup` are hidden the same way.\n   * @default false\n   */\n  hidden?: boolean;\n  /** Ref to the option `<li>` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\n/** Whether options draw the selected check mark (P05-internal; TagPicker lists no selected options). */\nconst OptionCheckContext = React.createContext(true);\nOptionCheckContext.displayName = 'OptionCheckContext';\n\n/*\n * State is exposed as data attributes (C-CLASS): `data-active` (keyboard/pointer highlight),\n * `data-selected`, `data-disabled`. State classes come before the consumer's `className` in `cn()`.\n *\n * Backgrounds (input-pickers#20): one unconditional `bg-(--option-bg)` paints the option, and the\n * hover/selected/active variants only set `--option-bg`. A variant that set `background-color`\n * itself (class + attribute or pseudo-class) would out-specify a consumer's plain `bg-*` class in\n * the cascade even though `cn()` keeps it; instead tailwind-merge replaces `bg-(--option-bg)` with\n * the consumer's class, which is then the only background declaration on the option. A consumer\n * `data-[active]:bg-…` / `data-[selected]:bg-…` restyles a single state (it out-specifies the\n * unconditional reader). The active outline is the focus indicator and stays a state variant.\n *\n * A filtered-out option carries the `hidden` attribute; base.css's scoped `[hidden]` rule hides\n * it over `flex` and over a consumer's display class.\n */\nconst OPTION_CLASSES = cn(\n  'flex cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-body-1 text-foreground',\n  'bg-(--option-bg) [--option-bg:transparent]',\n  'not-disabled:not-aria-disabled:hover:[--option-bg:var(--wave-subtle-hover)]',\n  'data-[selected]:[--option-bg:var(--wave-subtle-selected)]',\n  'data-[active]:[--option-bg:var(--wave-subtle-hover)]',\n  'data-[active]:outline-2 data-[active]:-outline-offset-2 data-[active]:outline-ring',\n  'aria-disabled:cursor-not-allowed aria-disabled:text-muted-foreground',\n);\n\n/**\n * The values of the options rendered inside an `OptionGroup`, whatever wraps them (custom\n * components, Fragments, nested groups): each option adds its value from a layout effect.\n */\nclass OptionGroupMembers {\n  private readonly counts = new Map<string, number>();\n  private readonly listeners = new Set<() => void>();\n\n  subscribe = (listener: () => void): (() => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  add(value: string): () => void {\n    this.counts.set(value, (this.counts.get(value) ?? 0) + 1);\n    this.notify();\n    return () => {\n      const count = (this.counts.get(value) ?? 1) - 1;\n      if (count > 0) this.counts.set(value, count);\n      else this.counts.delete(value);\n      this.notify();\n    };\n  }\n\n  /** At least one option, and every one of them is hidden (filtered out, or by the consumer). */\n  allHidden(store: ListboxStore | undefined): boolean {\n    if (store === undefined || this.counts.size === 0) return false;\n    for (const value of this.counts.keys()) if (!store.isHidden(value)) return false;\n    return true;\n  }\n\n  private notify(): void {\n    for (const listener of [...this.listeners]) listener();\n  }\n}\n\n/** The groups around an option, outermost first (P05-internal). */\nconst OptionGroupContext = React.createContext<readonly OptionGroupMembers[]>([]);\nOptionGroupContext.displayName = 'OptionGroupContext';\n\n/** A group around the option has the consumer's `hidden` attribute (P05-internal). */\nconst OptionGroupHiddenContext = React.createContext(false);\nOptionGroupHiddenContext.displayName = 'OptionGroupHiddenContext';\n\n/** Adds an option's value to every group around it while the option is mounted. */\nfunction useOptionGroupMembership(value: string): void {\n  const groups = React.useContext(OptionGroupContext);\n  React.useLayoutEffect(() => {\n    if (groups.length === 0) return;\n    const removes = groups.map((group) => group.add(value));\n    return () => {\n      for (const remove of removes) remove();\n    };\n  }, [groups, value]);\n}\n\n/*\n * Forced colours of a disabled option's box, as Checkbox draws a disabled box: GrayText on Canvas\n * for the square and its glyph, without the Highlight background of `forcedColors.selectedLeaf`.\n */\nconst DISABLED_BOX_FORCED_COLORS = 'forced-colors:border-[GrayText] forced-colors:bg-[Canvas]';\nconst DISABLED_GLYPH_FORCED_COLORS =\n  'forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none';\n\n/** What the check column of an option draws (see {@link renderCheck}). */\ninterface CheckState {\n  selected: boolean;\n  multiselect: boolean;\n  disabled: boolean;\n}\n\n/**\n * The check column of an option. Single-select: the check glyph, kept in its place but not drawn\n * while the option is not selected, so the option texts line up. Multi-select: a 16px checkbox\n * square in Checkbox's colours, with the glyph inside only while selected; as a leaf indicator it\n * takes `forcedColors.selectedLeaf` while checked. A disabled option's square follows the row, as\n * the single-select glyph does: its muted text colour draws the square and the glyph, in place of\n * the brand colour. `glyph` is the consumer's `checkIcon` when it renders content, else\n * `undefined` for the default glyph.\n */\nfunction renderCheck(\n  glyph: Slot<'span'> | undefined,\n  { selected, multiselect, disabled }: CheckState,\n): React.ReactNode {\n  if (!multiselect) {\n    const classes = cn(optionClassNames.checkIcon, 'shrink-0', !selected && 'invisible');\n    return glyph === undefined ? (\n      <CheckIcon className={classes} />\n    ) : (\n      renderSlot(glyph, 'span', cn('inline-flex', classes), { 'aria-hidden': true })\n    );\n  }\n  // One class set per state, so a disabled box never carries the brand classes it replaces.\n  let boxClasses: string;\n  if (disabled) {\n    boxClasses = cn('border-current bg-transparent', DISABLED_BOX_FORCED_COLORS);\n  } else if (selected) {\n    boxClasses = cn('border-primary bg-primary text-primary-foreground', forcedColors.selectedLeaf);\n  } else {\n    boxClasses = cn('border-stroke-accessible bg-transparent', forcedColors.control);\n  }\n  const glyphClasses = disabled ? DISABLED_GLYPH_FORCED_COLORS : undefined;\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-wave-option-box=\"\"\n      className={cn(\n        optionClassNames.indicator,\n        'flex h-4 w-4 shrink-0 items-center justify-center rounded-xs border',\n        boxClasses,\n      )}\n    >\n      {selected &&\n        (glyph === undefined ? (\n          <CheckIcon size={12} className={cn(optionClassNames.checkIcon, glyphClasses)} />\n        ) : (\n          renderSlot(\n            glyph,\n            'span',\n            cn(optionClassNames.checkIcon, 'inline-flex shrink-0', glyphClasses),\n            {\n              'aria-hidden': true,\n            },\n          )\n        ))}\n    </span>\n  );\n}\n\nfunction OptionImpl(props: OptionProps) {\n  const {\n    value,\n    label,\n    textValue,\n    disabled = false,\n    hidden = false,\n    checkIcon,\n    className,\n    children,\n    onClick,\n    onMouseDown,\n    onPointerMove,\n    ref,\n    ...rest\n  } = props;\n  const showCheck = React.useContext(OptionCheckContext);\n  const groupHidden = React.useContext(OptionGroupHiddenContext);\n  // A consumer-hidden option is not navigable; optionProps renders `hidden`.\n  const { selected, multiselect, optionProps } = useListboxOption<HTMLLIElement>(\n    { value, label, textValue, disabled, hidden: hidden || groupHidden },\n    ref,\n  );\n  useOptionGroupMembership(value);\n  const {\n    ref: optionRef,\n    onClick: selectOption,\n    // Standalone mode only: the pointer press that focuses the list.\n    onMouseDown: pressOption,\n    onPointerMove: highlightOption,\n    ...optionAttributes\n  } = optionProps;\n\n  // The check is a required indicator (C-SLOTS): a `checkIcon` that renders nothing keeps the\n  // default glyph and warns once.\n  const checkIconRenders = checkIcon != null && slotRendersContent(checkIcon);\n  const checkIconEmpty = checkIcon != null && !checkIconRenders;\n  React.useEffect(() => {\n    if (checkIconEmpty) {\n      warnOnce(\n        'Option:checkIcon-empty',\n        'Option: `checkIcon` renders nothing, so the default check shows: a selected option must show its state. Pass a glyph, or leave it unset.',\n      );\n    }\n  }, [checkIconEmpty]);\n\n  return (\n    <li\n      data-value={value}\n      {...rest}\n      {...optionAttributes}\n      ref={optionRef}\n      onClick={composeEventHandlers(onClick, selectOption)}\n      onMouseDown={composeEventHandlers(onMouseDown, pressOption)}\n      onPointerMove={composeEventHandlers(onPointerMove, highlightOption)}\n      className={cn(\n        optionClassNames.root,\n        OPTION_CLASSES,\n        // While a multi-select option draws its box, the box carries the state, and\n        // `forcedColors.selectedContainer` would draw every selected option like the active one.\n        selected && !(multiselect && showCheck) && forcedColors.selectedContainer,\n        className,\n      )}\n    >\n      {showCheck &&\n        renderCheck(checkIconRenders ? checkIcon : undefined, { selected, multiselect, disabled })}\n      <span className={cn(optionClassNames.content, 'min-w-0 flex-1')}>{children ?? value}</span>\n    </li>\n  );\n}\nOptionImpl.displayName = 'Option';\n\nconst MemoOption = /* @__PURE__ */ React.memo(OptionImpl);\nMemoOption.displayName = 'Option';\n\n/**\n * An option of a listbox: a `Listbox`, `Combobox` or `Dropdown` (and `TagPicker`'s generated\n * list), or a custom picker's list, rendered through `ListboxSurface` or under a\n * `ListboxProvider`. Renders `<li role=\"option\">` with a stable id (`aria-activedescendant`\n * target), `aria-selected`, a check mark while selected (`checkIcon` replaces it; in a\n * multi-select list it sits in a checkbox square) and `data-active`/`data-selected`/\n * `data-disabled` attributes for styling.\n *\n * Options register with the surrounding listbox (in DOM order, groups included), so they can be\n * wrapped, grouped or rendered conditionally. The option is memoized: moving the highlight\n * re-renders only the previously and the newly active option.\n *\n * Styling: `className` comes last. A plain background class (`className=\"bg-primary\"`) replaces\n * the built-in hover, selected and active backgrounds in every state. To restyle one state only,\n * use its data variant (`data-[active]:bg-…`, `data-[selected]:bg-…`). The active option keeps\n * its focus outline.\n *\n * Use it inside a listbox only; it throws in development elsewhere.\n */\nexport const Option: React.NamedExoticComponent<OptionProps> = /* @__PURE__ */ markListboxElement(\n  MemoOption,\n  'option',\n);\n\n/* ------------------------------------------------------------------ */\n/*  OptionGroup                                                        */\n/* ------------------------------------------------------------------ */\n\n/**\n * Props of {@link OptionGroup}. `aria-label` and `aria-labelledby` go to the group's\n * `role=\"group\"` list; the other props go to its `<li role=\"presentation\">` item.\n */\nexport interface OptionGroupProps extends React.LiHTMLAttributes<HTMLLIElement> {\n  /**\n   * The group's heading, which names the group. Keep it text (an icon next to the text is fine): a\n   * label cannot be interactive, since nothing in it is reachable inside a listbox. Without a\n   * label no heading renders; name the group with `aria-label` or `aria-labelledby` then. A group\n   * without a name logs a development warning.\n   */\n  label?: React.ReactNode;\n  /**\n   * Names the group's list in place of the label (the heading still shows). A prop that holds\n   * `undefined`, as from a wrapper that forwards it, leaves the label in charge.\n   */\n  'aria-label'?: string;\n  /**\n   * Ids of the elements that name the group's list, in place of the label (the heading still\n   * shows). A prop that holds `undefined` leaves the label in charge.\n   */\n  'aria-labelledby'?: string;\n  /**\n   * Hides the group and every option in it (see `Option`'s `hidden`): keyboard navigation and\n   * typeahead skip its options.\n   * @default false\n   */\n  hidden?: boolean;\n  /** Ref to the group's `<li role=\"presentation\">` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\nconst ELEMENT_NODE = 1;\nconst TEXT_NODE = 3;\n\n/**\n * The text a heading gives the name of its group, for the development check of `OptionGroup`: its\n * text without `aria-hidden` or `hidden` parts, where an element's `aria-label` or an image's `alt`\n * stands for its content.\n */\nfunction nameText(node: Node | null): string {\n  if (node === null) return '';\n  if (node.nodeType === TEXT_NODE) return node.textContent ?? '';\n  if (node.nodeType !== ELEMENT_NODE) return '';\n  const element = node as Element;\n  if (element.getAttribute('aria-hidden') === 'true' || element.hasAttribute('hidden')) return '';\n  const ownLabel = element.getAttribute('aria-label')?.trim();\n  if (ownLabel) return ownLabel;\n  if (element.localName === 'img') return element.getAttribute('alt') ?? '';\n  let text = '';\n  for (const child of Array.from(element.childNodes)) text += nameText(child);\n  return text;\n}\n\n/**\n * Whether a group's list has a name, for the development check of `OptionGroup`, in the order the\n * name is computed: a consumer `aria-labelledby` that is not blank (its presence counts; the\n * elements it names are not read), else a non-blank `aria-label`, else the heading that labels the\n * list. A string or number label is its own text; only an element label is read from the rendered\n * heading ({@link nameText}).\n */\nfunction groupHasName(\n  label: React.ReactNode,\n  ariaLabel: string | undefined,\n  labelledBy: string | undefined,\n  labelId: string,\n  heading: HTMLElement | null,\n): boolean {\n  if (labelledBy !== undefined && labelledBy !== labelId && labelledBy.trim() !== '') return true;\n  if (ariaLabel !== undefined && ariaLabel.trim() !== '') return true;\n  if (labelledBy !== labelId) return false;\n  if (typeof label === 'string' || typeof label === 'number') return String(label).trim() !== '';\n  return nameText(heading).trim() !== '';\n}\n\nconst UNNAMED_GROUP_WARNING = 'OptionGroup:unnamed';\n\nfunction OptionGroupImpl({\n  label,\n  className,\n  children,\n  hidden,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ref,\n  ...rest\n}: OptionGroupProps) {\n  const labelId = useId('option-group');\n  const store = React.useContext(ListboxContext)?.store;\n  const parentGroups = React.useContext(OptionGroupContext);\n  const hiddenByConsumer = React.useContext(OptionGroupHiddenContext) || !!hidden;\n  const [members] = React.useState(() => new OptionGroupMembers());\n  const groups = React.useMemo(() => [...parentGroups, members], [parentGroups, members]);\n  const subscribe = React.useCallback(\n    (listener: () => void) => {\n      const unsubscribeMembers = members.subscribe(listener);\n      const unsubscribeStore = store?.subscribe(listener);\n      return () => {\n        unsubscribeMembers();\n        unsubscribeStore?.();\n      };\n    },\n    [members, store],\n  );\n  // Hidden while every option inside it is filtered out or hidden, also options wrapped in a\n  // component (the options register with the group; re-read when they do and when the listbox\n  // state changes).\n  // The server render and the first client render show the group: no option has registered yet.\n  const empty = React.useSyncExternalStore(\n    subscribe,\n    () => members.allHidden(store),\n    () => false,\n  );\n\n  // The heading renders only for a label that renders content, so the list never points at an\n  // empty heading. A consumer name wins over the heading; a prop that holds `undefined` (a wrapper\n  // forwarding it) is no name of the consumer's.\n  const hasLabel = slotRendersContent(label);\n  const labelledBy = ariaLabelledBy ?? (ariaLabel === undefined && hasLabel ? labelId : undefined);\n\n  // C-DEV: warn once when nothing names the group, checked again whenever the label, the\n  // consumer `aria-label` or the resolved `aria-labelledby` changes.\n  const headingRef = React.useRef<HTMLDivElement | null>(null);\n  React.useEffect(() => {\n    if (!isDev || hasWarned(UNNAMED_GROUP_WARNING)) return;\n    if (groupHasName(label, ariaLabel, labelledBy, labelId, headingRef.current)) return;\n    warnOnce(\n      UNNAMED_GROUP_WARNING,\n      'OptionGroup: the group has no name. Give it a text `label`, `aria-label` or `aria-labelledby`.',\n    );\n  }, [label, ariaLabel, labelledBy, labelId]);\n\n  return (\n    <li\n      {...rest}\n      ref={ref}\n      role=\"presentation\"\n      hidden={hidden || empty || undefined}\n      className={cn(optionGroupClassNames.root, className)}\n    >\n      {hasLabel && (\n        <div\n          ref={headingRef}\n          id={labelId}\n          role=\"presentation\"\n          className={cn(\n            optionGroupClassNames.label,\n            'px-3 py-1 text-caption-1 font-semibold text-muted-foreground',\n          )}\n        >\n          {materialiseSlotContent(label)}\n        </div>\n      )}\n      <ul\n        role=\"group\"\n        aria-label={ariaLabel}\n        aria-labelledby={labelledBy}\n        className={optionGroupClassNames.list}\n      >\n        <OptionGroupHiddenContext.Provider value={hiddenByConsumer}>\n          <OptionGroupContext.Provider value={groups}>{children}</OptionGroupContext.Provider>\n        </OptionGroupHiddenContext.Provider>\n      </ul>\n    </li>\n  );\n}\nOptionGroupImpl.displayName = 'OptionGroup';\n\n/**\n * Groups options under an optional heading: `<li role=\"presentation\">` with the heading and a\n * `<ul role=\"group\">` of the options, named by the heading (`label`) or by your `aria-label` or\n * `aria-labelledby`, which win over it. Hidden while a filter (or their own `hidden`) hides all\n * its options, also options wrapped in a component or in nested groups. Use it inside a listbox,\n * as `Option`.\n */\nexport const OptionGroup: React.FC<OptionGroupProps> = /* @__PURE__ */ markListboxElement(\n  OptionGroupImpl,\n  'group',\n);\n\n/* ------------------------------------------------------------------ */\n/*  ListboxProvider                                                    */\n/* ------------------------------------------------------------------ */\n\n/** Props of {@link ListboxProvider}. */\nexport interface ListboxProviderProps {\n  /** The context of a listbox: `useListbox(...).context`. */\n  value: ListboxContextValue;\n  /** The options (`Option`, `OptionGroup` or options of your own on `useListboxOption`). */\n  children?: React.ReactNode;\n}\n\n/**\n * Provides a listbox's context to its options, for a custom picker that renders its list without\n * `ListboxSurface`: `<ListboxProvider value={listbox.context}><ul {...listbox.getListboxProps()}>…</ul></ListboxProvider>`.\n */\nexport function ListboxProvider({ value, children }: ListboxProviderProps) {\n  return <ListboxContext.Provider value={value}>{children}</ListboxContext.Provider>;\n}\nListboxProvider.displayName = 'ListboxProvider';\n\n/* ------------------------------------------------------------------ */\n/*  Listbox popup: useListboxPopup and ListboxSurface                  */\n/* ------------------------------------------------------------------ */\n\n/** Options of {@link useListboxPopup}. */\nexport interface UseListboxPopupOptions {\n  /**\n   * The listbox is open (your open state). While it is, a press outside your picker and its\n   * surface, and focus leaving them, dismiss it.\n   */\n  open: boolean;\n  /**\n   * The surface is shown (the list, or the empty content of {@link ListboxSurface}): it is\n   * positioned, and Escape dismisses it. While the listbox is open with nothing shown (no options\n   * to show), Escape is left to an enclosing layer, such as a Dialog around the picker.\n   */\n  surfaceOpen: boolean;\n  /**\n   * Called when the popup should close: set your open state to `false`. `reason` is `'escape'`,\n   * `'outside-press'` or `'focus-outside'`.\n   */\n  onDismiss: (reason: DismissReason) => void;\n  /** Your picker's root element: presses and focus inside it are not outside the popup. */\n  rootRef: React.RefObject<HTMLElement | null>;\n  /**\n   * The combobox element, which anchors the popup's dismiss layer. Pass the element to\n   * `setReference` too (merged into its ref), which places the surface against it.\n   */\n  anchorRef: React.RefObject<HTMLElement | null>;\n}\n\n/**\n * Result of {@link useListboxPopup}. Destructure it: `eslint-plugin-react-hooks` treats an object\n * with a member passed to a `ref` prop as a ref, and rejects reading its other members during\n * render (`react-hooks/refs`).\n */\nexport interface UseListboxPopupResult {\n  /** The popup's dismiss layer: pass it to {@link ListboxSurface}. */\n  layerId: string;\n  /**\n   * Ref callback for the element the surface is placed against: merge it into your combobox's ref.\n   */\n  setReference: (el: HTMLElement | null) => void;\n  /** Ref callback for the surface: pass it to {@link ListboxSurface}. */\n  surfaceRef: React.RefCallback<HTMLElement>;\n  /** The surface's `data-side`, `data-align` and position style: pass them to {@link ListboxSurface}. */\n  floatingProps: { 'data-side': string; 'data-align': string; style: React.CSSProperties };\n}\n\n/**\n * Dismissal and positioning of a custom picker's listbox popup, for {@link ListboxSurface}. The\n * popup is dismissed by Escape, by a press outside your picker and its surface, and by focus\n * leaving them (`onDismiss` says which). The surface opens below the anchor and as wide as it,\n * flips above it when there is no room below, and is limited to the space available; its\n * `data-side` and `data-align` attributes give the final placement.\n *\n * While the listbox is open with nothing to show (`surfaceOpen` is `false`), Escape is left to an\n * enclosing layer, such as a Dialog around the picker. Let your combobox's key handler leave it\n * too: on such an Escape, set your open state to `false` without calling `listbox.onKeyDown`,\n * which handles Escape (and prevents its default) whenever the listbox is open. Do so only when\n * `!event.nativeEvent.isComposing`, as Dropdown, Combobox and TagPicker do: an Escape that only\n * cancels an IME composition must not close the listbox, and `listbox.onKeyDown` ignores such\n * keys too.\n *\n * @example\n * const expanded = open && listbox.items.length > 0;\n * const { layerId, setReference, surfaceRef, floatingProps } = useListboxPopup({\n *   open,\n *   surfaceOpen: expanded,\n *   onDismiss: () => setOpen(false),\n *   rootRef,\n *   anchorRef: buttonRef,\n * });\n * const buttonMergedRef = useMergedRefs(buttonRef, setReference);\n */\nexport function useListboxPopup(options: UseListboxPopupOptions): UseListboxPopupResult {\n  const { open, surfaceOpen, onDismiss, rootRef, anchorRef } = options;\n  const surfaceElementRef = React.useRef<HTMLElement | null>(null);\n  const { setReference, setFloating, floatingProps } = usePopupPosition({\n    open: surfaceOpen,\n    side: 'bottom',\n    align: 'start',\n    matchReferenceWidth: true,\n    fitViewport: true,\n  });\n  const { layerId } = useDismiss({\n    open,\n    onDismiss: (reason) => onDismiss(reason),\n    refs: [rootRef, surfaceElementRef],\n    anchorRef,\n    kind: 'listbox',\n    escape: surfaceOpen,\n    focusOutside: true,\n  });\n  const surfaceRef = useMergedRefs<HTMLElement>(surfaceElementRef, setFloating);\n  return { layerId, setReference, surfaceRef, floatingProps };\n}\n\n/**\n * Attributes of the list element that ListboxSurface renders (see `listProps`). Its content is the\n * surface's `children`.\n */\nexport type ListboxSurfaceListProps = Omit<\n  React.HTMLAttributes<HTMLUListElement>,\n  | 'role'\n  | 'id'\n  | 'hidden'\n  | 'tabIndex'\n  | 'className'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-multiselectable'\n  | 'aria-activedescendant'\n  | 'children'\n  | 'dangerouslySetInnerHTML'\n> & {\n  /** Ref to the `role=\"listbox\"` element (it moves between the picker and the popup). */\n  ref?: React.Ref<HTMLUListElement>;\n};\n\n/**\n * Props of {@link ListboxSurface}. The options of one listbox live in one list at a time, and this\n * surface renders that list: render every option of the listbox inside it, never in a second list\n * of your own, not even for an exit animation.\n */\nexport interface ListboxSurfaceProps {\n  /** The listbox: the result of `useListbox` in select-only or editable mode. */\n  listbox: UseListboxResult;\n  /** `layerId` from {@link useListboxPopup}: the surface joins the popup's dismiss layer. */\n  layerId: string;\n  /** `surfaceRef` from {@link useListboxPopup}. */\n  surfaceRef: React.RefCallback<HTMLElement>;\n  /** `floatingProps` from {@link useListboxPopup}: the surface's placement. */\n  floatingProps: UseListboxPopupResult['floatingProps'];\n  /** The listbox is open (your open state). `emptyContent` shows only while it is. */\n  open: boolean;\n  /**\n   * The list is shown: the listbox is open and has options to show (`open &&\n   * listbox.items.length > 0`). The list then renders in the surface, and otherwise `hidden`, in\n   * place inside your picker. Set your combobox's `aria-expanded` to this value after spreading\n   * `getComboboxProps()`, which reports `open`, so the combobox is not announced as expanded while\n   * nothing is shown.\n   */\n  expanded: boolean;\n  /**\n   * Shown in the surface while the listbox is open but not expanded, such as a \"No matches\"\n   * message. `undefined` and `null` show no surface; any other value shows one, so `false` and\n   * `''` show an empty surface.\n   */\n  emptyContent?: React.ReactNode;\n  /** Names the list. Name it with this or `aria-labelledby`, usually your picker's label. */\n  'aria-label'?: string;\n  /** Ids of the elements that name the list, usually your picker's label. */\n  'aria-labelledby'?: string;\n  /**\n   * Options draw a check while selected (in a multi-select list, a checkbox square). Turn it off\n   * for a list that never shows selected options, such as the suggestions of a tag picker.\n   * @default true\n   */\n  showCheck?: boolean;\n  /**\n   * Classes merged last onto the list: they replace the list's own classes they conflict with,\n   * its maximum height included.\n   */\n  listClassName?: string;\n  /**\n   * Classes merged last onto the surface, the popup around the list: they replace its own\n   * classes they conflict with.\n   */\n  surfaceClassName?: string;\n  /**\n   * Attributes spread onto the list element before the listbox's own (`role`, `id`, `tabIndex`,\n   * `aria-multiselectable`, `aria-activedescendant` and `hidden` win, also where the listbox\n   * renders none of the last two): `data-*` and other `aria-*` attributes, `style`, and handlers,\n   * composed before the listbox's own `onMouseDown`. `ref` is merged with the list's. Name the list\n   * with `aria-label`/`aria-labelledby` (the props above), not here.\n   */\n  listProps?: ListboxSurfaceListProps;\n  /** The options (`Option`, `OptionGroup` or options of your own on `useListboxOption`). */\n  children?: React.ReactNode;\n}\n\nfunction preventMouseDown(event: React.MouseEvent) {\n  event.preventDefault();\n}\n\n/**\n * The option list of a custom picker and the popup it opens in: a `<ul role=\"listbox\">` with the\n * options (spread from `listbox.getListboxProps()`), rendered `hidden` in place inside your\n * picker while the list is not shown, so the options register and their ids exist from the first\n * render, and in a portaled surface placed by {@link useListboxPopup} while it is, never in both.\n * While the listbox is open with nothing to show, the surface shows `emptyContent` instead, if\n * any. A press on the surface keeps focus on your combobox. It provides the listbox's context to\n * the options, so it needs no {@link ListboxProvider}.\n *\n * @example\n * <ListboxSurface\n *   listbox={listbox}\n *   layerId={layerId}\n *   surfaceRef={surfaceRef}\n *   floatingProps={floatingProps}\n *   open={open}\n *   expanded={expanded}\n *   aria-labelledby={labelId}\n * >\n *   <Option value=\"georgia\">Georgia</Option>\n * </ListboxSurface>\n */\nexport function ListboxSurface(props: ListboxSurfaceProps) {\n  const {\n    listbox,\n    layerId,\n    surfaceRef,\n    floatingProps,\n    open,\n    expanded,\n    emptyContent,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    showCheck = true,\n    listClassName,\n    surfaceClassName,\n    listProps,\n    children,\n  } = props;\n\n  // The consumer's list attributes go first, so the listbox's own win; its `onMouseDown` runs\n  // before the list's (which keeps focus on the combobox) and its `ref` is merged with the list's.\n  const { ref: listRefProp, onMouseDown: listMouseDown, ...listRest } = listProps ?? {};\n  const listboxProps = listbox.getListboxProps();\n  const listRef = useMergedRefs<HTMLUListElement>(listRefProp, listboxProps.ref);\n\n  const list = (\n    <OptionCheckContext.Provider value={showCheck}>\n      <ListboxProvider value={listbox.context}>\n        <ul\n          {...listRest}\n          {...listboxProps}\n          // Absent from `listboxProps` when not set: a caller's value never survives the spread.\n          aria-multiselectable={listboxProps['aria-multiselectable']}\n          aria-activedescendant={listboxProps['aria-activedescendant']}\n          onMouseDown={composeEventHandlers(listMouseDown, listboxProps.onMouseDown)}\n          ref={listRef}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          hidden={!expanded || undefined}\n          className={cn(\n            listboxSurfaceClassNames.list,\n            'min-h-0 max-h-60 overflow-auto',\n            listClassName,\n          )}\n        >\n          {children}\n        </ul>\n      </ListboxProvider>\n    </OptionCheckContext.Provider>\n  );\n\n  // A closed listbox never leaves a surface behind: the text typed before closing survives it.\n  const showEmpty = open && !expanded && emptyContent !== undefined && emptyContent !== null;\n  if (!expanded && !showEmpty) return list;\n\n  return (\n    <>\n      {!expanded && list}\n      <Portal layerId={layerId}>\n        <div\n          ref={surfaceRef}\n          {...floatingProps}\n          data-wave-listbox-surface=\"\"\n          onMouseDown={preventMouseDown}\n          className={cn(\n            listboxSurfaceClassNames.root,\n            'flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4',\n            surfaceClassName,\n          )}\n        >\n          {expanded ? list : emptyContent}\n        </div>\n      </Portal>\n    </>\n  );\n}\nListboxSurface.displayName = 'ListboxSurface';\n"],"mappings":"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"}