@fluentui/react-combobox 9.8.0 → 9.9.0

package/lib/contexts/useComboboxContextValues.js

@@ -1,20 +1,27 @@
 import * as React from 'react';
 export function useComboboxContextValues(state) {
-    const { appearance, open, registerOption, selectedOptions, selectOption, setOpen, size, activeDescendantController, // eslint-disable-next-line @typescript-eslint/naming-convention, deprecation/deprecation
-    activeOption: UNSAFE_activeOption, // eslint-disable-next-line @typescript-eslint/naming-convention, deprecation/deprecation
-    setActiveOption: UNSAFE_setActiveOption } = state;
+    const { appearance, open, registerOption, selectedOptions, selectOption, setOpen, size, activeDescendantController, onOptionClick } = state;
     const combobox = {
-        activeOption: UNSAFE_activeOption,
+        activeOption: undefined,
         appearance,
         focusVisible: false,
         open,
         registerOption,
         selectedOptions,
         selectOption,
-        setActiveOption: UNSAFE_setActiveOption,
+        setActiveOption: ()=>null,
         setOpen,
         size
     };
+    const listbox = {
+        activeOption: undefined,
+        focusVisible: false,
+        registerOption,
+        selectedOptions,
+        selectOption,
+        setActiveOption: ()=>null,
+        onOptionClick
+    };
     const activeDescendant = React.useMemo(()=>({
             controller: activeDescendantController
         }), [
@@ -22,6 +29,7 @@ export function useComboboxContextValues(state) {
     ]);
     return {
         combobox,
-        activeDescendant
+        activeDescendant,
+        listbox
     };
 }

package/lib/contexts/useComboboxContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useComboboxContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type { ComboboxBaseContextValues, ComboboxBaseState } from '../utils/ComboboxBase.types';\n\nexport function useComboboxContextValues(\n  state: ComboboxBaseState & { activeDescendantController: ActiveDescendantImperativeRef },\n): ComboboxBaseContextValues {\n  const {\n    appearance,\n    open,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setOpen,\n    size,\n    activeDescendantController,\n    // eslint-disable-next-line @typescript-eslint/naming-convention, deprecation/deprecation\n    activeOption: UNSAFE_activeOption,\n    // eslint-disable-next-line @typescript-eslint/naming-convention, deprecation/deprecation\n    setActiveOption: UNSAFE_setActiveOption,\n  } = state;\n\n  const combobox = {\n    activeOption: UNSAFE_activeOption,\n    appearance,\n    focusVisible: false,\n    open,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setActiveOption: UNSAFE_setActiveOption,\n    setOpen,\n    size,\n  };\n\n  const activeDescendant = React.useMemo(\n    () => ({\n      controller: activeDescendantController,\n    }),\n    [activeDescendantController],\n  );\n\n  return { combobox, activeDescendant };\n}\n"],"names":["React","useComboboxContextValues","state","appearance","open","registerOption","selectedOptions","selectOption","setOpen","size","activeDescendantController","activeOption","UNSAFE_activeOption","setActiveOption","UNSAFE_setActiveOption","combobox","focusVisible","activeDescendant","useMemo","controller"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,yBACdC,KAAwF;IAExF,MAAM,EACJC,UAAU,EACVC,IAAI,EACJC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,OAAO,EACPC,IAAI,EACJC,0BAA0B,EAC1B,yFAAyF;IACzFC,cAAcC,mBAAmB,EACjC,yFAAyF;IACzFC,iBAAiBC,sBAAsB,EACxC,GAAGZ;IAEJ,MAAMa,WAAW;QACfJ,cAAcC;QACdT;QACAa,cAAc;QACdZ;QACAC;QACAC;QACAC;QACAM,iBAAiBC;QACjBN;QACAC;IACF;IAEA,MAAMQ,mBAAmBjB,MAAMkB,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYT;QACd,CAAA,GACA;QAACA;KAA2B;IAG9B,OAAO;QAAEK;QAAUE;IAAiB;AACtC"}
+{"version":3,"sources":["useComboboxContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { ComboboxState } from '../Combobox';\nimport type { ComboboxBaseContextValues, ComboboxBaseState } from '../utils/ComboboxBase.types';\n\nexport function useComboboxContextValues(\n  state: ComboboxBaseState & Pick<ComboboxState, 'activeDescendantController'>,\n): ComboboxBaseContextValues {\n  const {\n    appearance,\n    open,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setOpen,\n    size,\n    activeDescendantController,\n    onOptionClick,\n  } = state;\n\n  const combobox = {\n    activeOption: undefined,\n    appearance,\n    focusVisible: false,\n    open,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setActiveOption: () => null,\n    setOpen,\n    size,\n  };\n\n  const listbox = {\n    activeOption: undefined,\n    focusVisible: false,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setActiveOption: () => null,\n    onOptionClick,\n  };\n\n  const activeDescendant = React.useMemo(\n    () => ({\n      controller: activeDescendantController,\n    }),\n    [activeDescendantController],\n  );\n\n  return { combobox, activeDescendant, listbox };\n}\n"],"names":["React","useComboboxContextValues","state","appearance","open","registerOption","selectedOptions","selectOption","setOpen","size","activeDescendantController","onOptionClick","combobox","activeOption","undefined","focusVisible","setActiveOption","listbox","activeDescendant","useMemo","controller"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,yBACdC,KAA4E;IAE5E,MAAM,EACJC,UAAU,EACVC,IAAI,EACJC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,OAAO,EACPC,IAAI,EACJC,0BAA0B,EAC1BC,aAAa,EACd,GAAGT;IAEJ,MAAMU,WAAW;QACfC,cAAcC;QACdX;QACAY,cAAc;QACdX;QACAC;QACAC;QACAC;QACAS,iBAAiB,IAAM;QACvBR;QACAC;IACF;IAEA,MAAMQ,UAAU;QACdJ,cAAcC;QACdC,cAAc;QACdV;QACAC;QACAC;QACAS,iBAAiB,IAAM;QACvBL;IACF;IAEA,MAAMO,mBAAmBlB,MAAMmB,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYV;QACd,CAAA,GACA;QAACA;KAA2B;IAG9B,OAAO;QAAEE;QAAUM;QAAkBD;IAAQ;AAC/C"}

package/lib/contexts/useListboxContextValues.js

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';
-import { ComboboxContext } from './ComboboxContext';
+import { useHasParentContext } from '@fluentui/react-context-selector';
+import { ListboxContext, useListboxContext_unstable } from './ListboxContext';
 export function useListboxContextValues(state) {
-    const hasComboboxContext = useHasParentContext(ComboboxContext);
+    const hasListboxContext = useHasParentContext(ListboxContext);
     const { multiselect, registerOption, selectedOptions, selectOption, activeDescendantController } = state;
     // get register/unregister functions from parent combobox context
-    const comboboxRegisterOption = useContextSelector(ComboboxContext, (ctx)=>ctx.registerOption);
-    const registerOptionValue = hasComboboxContext ? comboboxRegisterOption : registerOption;
+    const parentRegisterOption = useListboxContext_unstable((ctx)=>ctx.registerOption);
+    const onOptionClick = useListboxContext_unstable((ctx)=>ctx.onOptionClick);
+    const registerOptionValue = hasListboxContext ? parentRegisterOption : registerOption;
     const listbox = {
         activeOption: undefined,
         focusVisible: false,
@@ -14,7 +15,8 @@ export function useListboxContextValues(state) {
         registerOption: registerOptionValue,
         selectedOptions,
         selectOption,
-        setActiveOption: ()=>undefined
+        setActiveOption: ()=>undefined,
+        onOptionClick
     };
     const activeDescendant = React.useMemo(()=>({
             controller: activeDescendantController

package/lib/contexts/useListboxContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useListboxContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { ListboxContextValues, ListboxState } from '../components/Listbox/Listbox.types';\nimport { ComboboxContext } from './ComboboxContext';\n\nexport function useListboxContextValues(state: ListboxState): ListboxContextValues {\n  const hasComboboxContext = useHasParentContext(ComboboxContext);\n  const { multiselect, registerOption, selectedOptions, selectOption, activeDescendantController } = state;\n\n  // get register/unregister functions from parent combobox context\n  const comboboxRegisterOption = useContextSelector(ComboboxContext, ctx => ctx.registerOption);\n\n  const registerOptionValue = hasComboboxContext ? comboboxRegisterOption : registerOption;\n\n  const listbox = {\n    activeOption: undefined,\n    focusVisible: false,\n    multiselect,\n    registerOption: registerOptionValue,\n    selectedOptions,\n    selectOption,\n    setActiveOption: () => undefined,\n  };\n\n  const activeDescendant = React.useMemo(\n    () => ({\n      controller: activeDescendantController,\n    }),\n    [activeDescendantController],\n  );\n\n  return { listbox, activeDescendant };\n}\n"],"names":["React","useContextSelector","useHasParentContext","ComboboxContext","useListboxContextValues","state","hasComboboxContext","multiselect","registerOption","selectedOptions","selectOption","activeDescendantController","comboboxRegisterOption","ctx","registerOptionValue","listbox","activeOption","undefined","focusVisible","setActiveOption","activeDescendant","useMemo","controller"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,EAAEC,mBAAmB,QAAQ,mCAAmC;AAE3F,SAASC,eAAe,QAAQ,oBAAoB;AAEpD,OAAO,SAASC,wBAAwBC,KAAmB;IACzD,MAAMC,qBAAqBJ,oBAAoBC;IAC/C,MAAM,EAAEI,WAAW,EAAEC,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAEC,0BAA0B,EAAE,GAAGN;IAEnG,iEAAiE;IACjE,MAAMO,yBAAyBX,mBAAmBE,iBAAiBU,CAAAA,MAAOA,IAAIL,cAAc;IAE5F,MAAMM,sBAAsBR,qBAAqBM,yBAAyBJ;IAE1E,MAAMO,UAAU;QACdC,cAAcC;QACdC,cAAc;QACdX;QACAC,gBAAgBM;QAChBL;QACAC;QACAS,iBAAiB,IAAMF;IACzB;IAEA,MAAMG,mBAAmBpB,MAAMqB,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYX;QACd,CAAA,GACA;QAACA;KAA2B;IAG9B,OAAO;QAAEI;QAASK;IAAiB;AACrC"}
+{"version":3,"sources":["useListboxContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { ListboxContextValues, ListboxState } from '../components/Listbox/Listbox.types';\nimport { ListboxContext, useListboxContext_unstable } from './ListboxContext';\n\nexport function useListboxContextValues(state: ListboxState): ListboxContextValues {\n  const hasListboxContext = useHasParentContext(ListboxContext);\n  const { multiselect, registerOption, selectedOptions, selectOption, activeDescendantController } = state;\n\n  // get register/unregister functions from parent combobox context\n  const parentRegisterOption = useListboxContext_unstable(ctx => ctx.registerOption);\n  const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n\n  const registerOptionValue = hasListboxContext ? parentRegisterOption : registerOption;\n\n  const listbox = {\n    activeOption: undefined,\n    focusVisible: false,\n    multiselect,\n    registerOption: registerOptionValue,\n    selectedOptions,\n    selectOption,\n    setActiveOption: () => undefined,\n    onOptionClick,\n  };\n\n  const activeDescendant = React.useMemo(\n    () => ({\n      controller: activeDescendantController,\n    }),\n    [activeDescendantController],\n  );\n\n  return { listbox, activeDescendant };\n}\n"],"names":["React","useHasParentContext","ListboxContext","useListboxContext_unstable","useListboxContextValues","state","hasListboxContext","multiselect","registerOption","selectedOptions","selectOption","activeDescendantController","parentRegisterOption","ctx","onOptionClick","registerOptionValue","listbox","activeOption","undefined","focusVisible","setActiveOption","activeDescendant","useMemo","controller"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,mCAAmC;AAEvE,SAASC,cAAc,EAAEC,0BAA0B,QAAQ,mBAAmB;AAE9E,OAAO,SAASC,wBAAwBC,KAAmB;IACzD,MAAMC,oBAAoBL,oBAAoBC;IAC9C,MAAM,EAAEK,WAAW,EAAEC,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAEC,0BAA0B,EAAE,GAAGN;IAEnG,iEAAiE;IACjE,MAAMO,uBAAuBT,2BAA2BU,CAAAA,MAAOA,IAAIL,cAAc;IACjF,MAAMM,gBAAgBX,2BAA2BU,CAAAA,MAAOA,IAAIC,aAAa;IAEzE,MAAMC,sBAAsBT,oBAAoBM,uBAAuBJ;IAEvE,MAAMQ,UAAU;QACdC,cAAcC;QACdC,cAAc;QACdZ;QACAC,gBAAgBO;QAChBN;QACAC;QACAU,iBAAiB,IAAMF;QACvBJ;IACF;IAEA,MAAMO,mBAAmBrB,MAAMsB,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYZ;QACd,CAAA,GACA;QAACA;KAA2B;IAG9B,OAAO;QAAEK;QAASK;IAAiB;AACrC"}

package/lib/index.js

@@ -1,5 +1,6 @@
+// eslint-disable-next-line deprecation/deprecation
 export { ComboboxProvider } from './contexts/ComboboxContext';
-export { ListboxProvider } from './contexts/ListboxContext';
+export { ListboxProvider, useListboxContext_unstable } from './contexts/ListboxContext';
 export { useComboboxContextValues } from './contexts/useComboboxContextValues';
 export { useListboxContextValues } from './contexts/useListboxContextValues';
 export { Listbox, listboxClassNames, renderListbox_unstable, useListboxStyles_unstable, useListbox_unstable } from './Listbox';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export { ComboboxProvider } from './contexts/ComboboxContext';\nexport type { ComboboxContextValue } from './contexts/ComboboxContext';\nexport { ListboxProvider } from './contexts/ListboxContext';\nexport type { ListboxContextValue } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport {\n  Listbox,\n  listboxClassNames,\n  renderListbox_unstable,\n  useListboxStyles_unstable,\n  useListbox_unstable,\n} from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox';\nexport {\n  Option,\n  optionClassNames,\n  renderOption_unstable,\n  useOptionStyles_unstable,\n  useOption_unstable,\n} from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option';\nexport {\n  Combobox,\n  comboboxClassNames,\n  renderCombobox_unstable,\n  useComboboxStyles_unstable,\n  useCombobox_unstable,\n} from './Combobox';\nexport type {\n  ComboboxContextValues,\n  ComboboxOpenChangeData,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxSlots,\n  ComboboxState,\n} from './Combobox';\nexport {\n  Dropdown,\n  dropdownClassNames,\n  renderDropdown_unstable,\n  useDropdownStyles_unstable,\n  useDropdown_unstable,\n} from './Dropdown';\nexport type {\n  DropdownContextValues,\n  DropdownOpenChangeData,\n  DropdownOpenEvents,\n  DropdownProps,\n  DropdownSlots,\n  DropdownState,\n} from './Dropdown';\nexport {\n  OptionGroup,\n  optionGroupClassNames,\n  renderOptionGroup_unstable,\n  useOptionGroupStyles_unstable,\n  useOptionGroup_unstable,\n} from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup';\nexport type { OptionOnSelectData, SelectionEvents } from './Selection';\n\nexport { useComboboxFilter } from './hooks/useComboboxFilter';\n"],"names":["ComboboxProvider","ListboxProvider","useComboboxContextValues","useListboxContextValues","Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable","Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useCombobox_unstable","Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdown_unstable","OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable","useComboboxFilter"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,6BAA6B;AAE9D,SAASC,eAAe,QAAQ,4BAA4B;AAE5D,SAASC,wBAAwB,QAAQ,sCAAsC;AAC/E,SAASC,uBAAuB,QAAQ,qCAAqC;AAC7E,SACEC,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,YAAY;AAEnB,SACEC,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,WAAW;AAElB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa;AASpB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa;AASpB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAIvB,SAASC,iBAAiB,QAAQ,4BAA4B"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["// eslint-disable-next-line deprecation/deprecation\nexport { ComboboxProvider } from './contexts/ComboboxContext';\nexport type { ComboboxContextValue } from './contexts/ComboboxContext';\nexport { ListboxProvider, useListboxContext_unstable } from './contexts/ListboxContext';\nexport type { ListboxContextValue } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport {\n  Listbox,\n  listboxClassNames,\n  renderListbox_unstable,\n  useListboxStyles_unstable,\n  useListbox_unstable,\n} from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox';\nexport {\n  Option,\n  optionClassNames,\n  renderOption_unstable,\n  useOptionStyles_unstable,\n  useOption_unstable,\n} from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option';\nexport {\n  Combobox,\n  comboboxClassNames,\n  renderCombobox_unstable,\n  useComboboxStyles_unstable,\n  useCombobox_unstable,\n} from './Combobox';\nexport type {\n  ComboboxContextValues,\n  ComboboxOpenChangeData,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxSlots,\n  ComboboxState,\n} from './Combobox';\nexport {\n  Dropdown,\n  dropdownClassNames,\n  renderDropdown_unstable,\n  useDropdownStyles_unstable,\n  useDropdown_unstable,\n} from './Dropdown';\nexport type {\n  DropdownContextValues,\n  DropdownOpenChangeData,\n  DropdownOpenEvents,\n  DropdownProps,\n  DropdownSlots,\n  DropdownState,\n} from './Dropdown';\nexport {\n  OptionGroup,\n  optionGroupClassNames,\n  renderOptionGroup_unstable,\n  useOptionGroupStyles_unstable,\n  useOptionGroup_unstable,\n} from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup';\nexport type { OptionOnSelectData, SelectionEvents } from './Selection';\n\nexport { useComboboxFilter } from './hooks/useComboboxFilter';\n"],"names":["ComboboxProvider","ListboxProvider","useListboxContext_unstable","useComboboxContextValues","useListboxContextValues","Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable","Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useCombobox_unstable","Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdown_unstable","OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable","useComboboxFilter"],"mappings":"AAAA,mDAAmD;AACnD,SAASA,gBAAgB,QAAQ,6BAA6B;AAE9D,SAASC,eAAe,EAAEC,0BAA0B,QAAQ,4BAA4B;AAExF,SAASC,wBAAwB,QAAQ,sCAAsC;AAC/E,SAASC,uBAAuB,QAAQ,qCAAqC;AAC7E,SACEC,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,YAAY;AAEnB,SACEC,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,WAAW;AAElB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa;AASpB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa;AASpB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAIvB,SAASC,iBAAiB,QAAQ,4BAA4B"}

package/lib/utils/ComboboxBase.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ComboboxBase.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ActiveDescendantContextValue } from '@fluentui/react-aria';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { ComboboxContextValue } from '../contexts/ComboboxContext';\nimport type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';\nimport { SelectionProps, SelectionState } from '../utils/Selection.types';\nimport { PortalProps } from '@fluentui/react-portal';\n\n/**\n * ComboboxBase Props\n * Shared types between Combobox and Dropdown components\n */\nexport type ComboboxBaseProps = SelectionProps &\n  Pick<PortalProps, 'mountNode'> & {\n    /**\n     * Controls the colors and borders of the combobox trigger.\n     * @default 'outline'\n     */\n    appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';\n\n    /**\n     * If set, the combobox will show an icon to clear the current value.\n     */\n    clearable?: boolean;\n\n    /**\n     * The default open state when open is uncontrolled\n     */\n    defaultOpen?: boolean;\n\n    /**\n     * The default value displayed in the trigger input or button when the combobox's value is uncontrolled\n     */\n    defaultValue?: string;\n\n    /**\n     * Render the combobox's popup inline in the DOM.\n     * This has accessibility benefits, particularly for touch screen readers.\n     */\n    inlinePopup?: boolean;\n\n    /**\n     * Callback when the open/closed state of the dropdown changes\n     */\n    // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n    onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;\n\n    /**\n     * Sets the open/closed state of the dropdown.\n     * Use together with onOpenChange to fully control the dropdown's visibility\n     */\n    open?: boolean;\n\n    /**\n     * If set, the placeholder will show when no value is selected\n     */\n    placeholder?: string;\n\n    /**\n     * Configure the positioning of the combobox dropdown\n     *\n     * @defaultvalue below\n     */\n    positioning?: PositioningShorthand;\n\n    /**\n     * Controls the size of the combobox faceplate\n     * @default 'medium'\n     */\n    size?: 'small' | 'medium' | 'large';\n\n    /**\n     * The value displayed by the Combobox.\n     * Use this with `onOptionSelect` to directly control the displayed value string\n     */\n    value?: string;\n  };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxBaseState = Required<\n  Pick<ComboboxBaseProps, 'appearance' | 'open' | 'clearable' | 'inlinePopup' | 'size'>\n> &\n  Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> &\n  OptionCollectionState &\n  SelectionState & {\n    /**\n     * @deprecated - no longer used internally\n     * @see activeDescendantController.active() instead\n     */\n    activeOption?: OptionValue;\n\n    /**\n     * @deprecated - no longer used internally\n     */\n    focusVisible: boolean;\n\n    /**\n     * @deprecated - no longer used internally\n     * Whether the next blur event should be ignored, and the combobox/dropdown will not close.\n     */\n    ignoreNextBlur: React.MutableRefObject<boolean>;\n\n    /**\n     * @deprecated - no longer used internally\n     * @see activeDescendantController.focus(id) instead\n     */\n    setActiveOption: React.Dispatch<React.SetStateAction<OptionValue | undefined>>;\n\n    /**\n     * whether the combobox/dropdown currently has focus\n     */\n    hasFocus: boolean;\n\n    setFocusVisible(focusVisible: boolean): void;\n\n    setHasFocus(hasFocus: boolean): void;\n\n    setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;\n\n    setValue(newValue: string | undefined): void;\n  };\n\n/**\n * Data for the Combobox onOpenChange event.\n */\nexport type ComboboxBaseOpenChangeData = {\n  open: boolean;\n};\n\n/* Possible event types for onOpen */\nexport type ComboboxBaseOpenEvents =\n  | React.MouseEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.FocusEvent<HTMLElement>;\n\nexport type ComboboxBaseContextValues = {\n  combobox: ComboboxContextValue;\n  activeDescendant: ActiveDescendantContextValue;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["ComboboxBase.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ActiveDescendantContextValue } from '@fluentui/react-aria';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { ComboboxContextValue } from '../contexts/ComboboxContext';\nimport type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';\nimport { SelectionProps, SelectionState } from '../utils/Selection.types';\nimport { PortalProps } from '@fluentui/react-portal';\nimport { ListboxContextValue } from '../contexts/ListboxContext';\n\n/**\n * ComboboxBase Props\n * Shared types between Combobox and Dropdown components\n */\nexport type ComboboxBaseProps = SelectionProps &\n  Pick<PortalProps, 'mountNode'> & {\n    /**\n     * Controls the colors and borders of the combobox trigger.\n     * @default 'outline'\n     */\n    appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';\n\n    /**\n     * If set, the combobox will show an icon to clear the current value.\n     */\n    clearable?: boolean;\n\n    /**\n     * The default open state when open is uncontrolled\n     */\n    defaultOpen?: boolean;\n\n    /**\n     * The default value displayed in the trigger input or button when the combobox's value is uncontrolled\n     */\n    defaultValue?: string;\n\n    /**\n     * Render the combobox's popup inline in the DOM.\n     * This has accessibility benefits, particularly for touch screen readers.\n     */\n    inlinePopup?: boolean;\n\n    /**\n     * Callback when the open/closed state of the dropdown changes\n     */\n    // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n    onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;\n\n    /**\n     * Sets the open/closed state of the dropdown.\n     * Use together with onOpenChange to fully control the dropdown's visibility\n     */\n    open?: boolean;\n\n    /**\n     * If set, the placeholder will show when no value is selected\n     */\n    placeholder?: string;\n\n    /**\n     * Configure the positioning of the combobox dropdown\n     *\n     * @defaultvalue below\n     */\n    positioning?: PositioningShorthand;\n\n    /**\n     * Controls the size of the combobox faceplate\n     * @default 'medium'\n     */\n    size?: 'small' | 'medium' | 'large';\n\n    /**\n     * The value displayed by the Combobox.\n     * Use this with `onOptionSelect` to directly control the displayed value string\n     */\n    value?: string;\n  };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxBaseState = Required<\n  Pick<ComboboxBaseProps, 'appearance' | 'open' | 'clearable' | 'inlinePopup' | 'size'>\n> &\n  Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> &\n  OptionCollectionState &\n  SelectionState & {\n    /**\n     * @deprecated - no longer used internally\n     */\n    activeOption?: OptionValue;\n\n    /**\n     * @deprecated - no longer used internally and handled automatically be activedescendant utilities\n     * @see ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE for writing styles involving focusVisible\n     */\n    focusVisible: boolean;\n\n    /**\n     * @deprecated - no longer used internally\n     * Whether the next blur event should be ignored, and the combobox/dropdown will not close.\n     */\n    ignoreNextBlur: React.MutableRefObject<boolean>;\n\n    /**\n     * @deprecated - no longer used internally\n     */\n    setActiveOption: React.Dispatch<React.SetStateAction<OptionValue | undefined>>;\n\n    /**\n     * @deprecated - no longer used internally and handled automatically be activedescendant utilities\n     * @see useSetKeyboardNavigation for imperatively setting focus visible state\n     */\n    setFocusVisible(focusVisible: boolean): void;\n\n    /**\n     * whether the combobox/dropdown currently has focus\n     */\n    hasFocus: boolean;\n\n    setHasFocus(hasFocus: boolean): void;\n\n    setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;\n\n    setValue(newValue: string | undefined): void;\n\n    onOptionClick: (e: React.MouseEvent<HTMLElement>) => void;\n  };\n\n/**\n * Data for the Combobox onOpenChange event.\n */\nexport type ComboboxBaseOpenChangeData = {\n  open: boolean;\n};\n\n/* Possible event types for onOpen */\nexport type ComboboxBaseOpenEvents =\n  | React.MouseEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.FocusEvent<HTMLElement>;\n\nexport type ComboboxBaseContextValues = {\n  combobox: ComboboxContextValue;\n  activeDescendant: ActiveDescendantContextValue;\n  listbox: ListboxContextValue;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/utils/useComboboxBaseState.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useControllableState, useFirstMount } from '@fluentui/react-utilities';
+import { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';
 import { useOptionCollection } from '../utils/useOptionCollection';
 import { useSelection } from '../utils/useSelection';
 /**
@@ -133,11 +133,11 @@ import { useSelection } from '../utils/useSelection';
         appearance,
         clearable,
         focusVisible,
-        hasFocus,
         ignoreNextBlur,
         inlinePopup,
         mountNode,
         open,
+        hasFocus,
         setActiveOption: UNSAFE_setActiveOption,
         setFocusVisible,
         setHasFocus,
@@ -145,6 +145,11 @@ import { useSelection } from '../utils/useSelection';
         setValue,
         size,
         value,
-        multiselect
+        multiselect,
+        onOptionClick: useEventCallback((e)=>{
+            if (!multiselect) {
+                setOpen(e, false);
+            }
+        })
     };
 };

package/lib/utils/useComboboxBaseState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\n\n/**\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n  props: ComboboxBaseProps & {\n    children?: React.ReactNode;\n    editable?: boolean;\n    activeDescendantController: ActiveDescendantImperativeRef;\n  },\n): ComboboxBaseState => {\n  const {\n    appearance = 'outline',\n    children,\n    clearable = false,\n    editable = false,\n    inlinePopup = false,\n    mountNode = undefined,\n    multiselect,\n    onOpenChange,\n    size = 'medium',\n    activeDescendantController,\n  } = props;\n\n  const optionCollection = useOptionCollection();\n  const { getOptionsMatchingValue } = optionCollection;\n\n  const { getOptionById } = optionCollection;\n  const getActiveOption = React.useCallback(() => {\n    const activeOptionId = activeDescendantController.active();\n    return activeOptionId ? getOptionById(activeOptionId) : undefined;\n  }, [activeDescendantController, getOptionById]);\n\n  // Keeping some kind of backwards compatible functionality here\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const UNSAFE_activeOption = getActiveOption();\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const UNSAFE_setActiveOption = React.useCallback(\n    (option: OptionValue | undefined | ((prev: OptionValue | undefined) => OptionValue | undefined)) => {\n      let nextOption: OptionValue | undefined = undefined;\n      if (typeof option === 'function') {\n        const activeOption = getActiveOption();\n        nextOption = option(activeOption);\n      }\n\n      if (nextOption) {\n        activeDescendantController.focus(nextOption.id);\n      } else {\n        activeDescendantController.blur();\n      }\n    },\n    [activeDescendantController, getActiveOption],\n  );\n\n  // track whether keyboard focus outline should be shown\n  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n  const [focusVisible, setFocusVisible] = React.useState(false);\n\n  // track focused state to conditionally render collapsed listbox\n  // when the trigger is focused - the listbox should but hidden until the open state is changed\n  const [hasFocus, setHasFocus] = React.useState(false);\n\n  const ignoreNextBlur = React.useRef(false);\n\n  const selectionState = useSelection(props);\n  const { selectedOptions } = selectionState;\n\n  // calculate value based on props, internal value changes, and selected options\n  const isFirstMount = useFirstMount();\n  const [controllableValue, setValue] = useControllableState({\n    state: props.value,\n    initialState: undefined,\n  });\n\n  const value = React.useMemo(() => {\n    // don't compute the value if it is defined through props or setValue,\n    if (controllableValue !== undefined) {\n      return controllableValue;\n    }\n\n    // handle defaultValue here, so it is overridden by selection\n    if (isFirstMount && props.defaultValue !== undefined) {\n      return props.defaultValue;\n    }\n\n    const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n      return selectedOptions.includes(optionValue);\n    }).map(option => option.text);\n\n    if (multiselect) {\n      // editable inputs should not display multiple selected options in the input as text\n      return editable ? '' : selectedOptionsText.join(', ');\n    }\n\n    return selectedOptionsText[0];\n\n    // do not change value after isFirstMount changes,\n    // we do not want to accidentally override defaultValue on a second render\n    // unless another value is intentionally set\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [controllableValue, editable, getOptionsMatchingValue, multiselect, props.defaultValue, selectedOptions]);\n\n  // Handle open state, which is shared with options in context\n  const [open, setOpenState] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const setOpen = React.useCallback(\n    (event: ComboboxBaseOpenEvents, newState: boolean) => {\n      onOpenChange?.(event, { open: newState });\n      setOpenState(newState);\n    },\n    [onOpenChange, setOpenState],\n  );\n\n  // update active option based on change in open state\n  React.useEffect(() => {\n    if (open) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n        if (selectedOption?.id) {\n          activeDescendantController.focus(selectedOption.id);\n        }\n      }\n    } else {\n      activeDescendantController.blur();\n    }\n    // this should only be run in response to changes in the open state or children\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, activeDescendantController]);\n\n  // Fallback focus when children are updated in an open popover results in no item being focused\n  React.useEffect(() => {\n    if (open) {\n      if (!activeDescendantController.active()) {\n        activeDescendantController.first();\n      }\n    }\n    // this should only be run in response to changes in the open state or children\n  }, [open, children, activeDescendantController]);\n\n  return {\n    ...optionCollection,\n    ...selectionState,\n    activeOption: UNSAFE_activeOption,\n    appearance,\n    clearable,\n    focusVisible,\n    hasFocus,\n    ignoreNextBlur,\n    inlinePopup,\n    mountNode,\n    open,\n    setActiveOption: UNSAFE_setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n    setValue,\n    size,\n    value,\n    multiselect,\n  };\n};\n"],"names":["React","useControllableState","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","optionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","selectedOptions","isFirstMount","controllableValue","setValue","state","value","initialState","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","setActiveOption"],"mappings":"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"}
+{"version":3,"sources":["useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\n\n/**\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n  props: ComboboxBaseProps & {\n    children?: React.ReactNode;\n    editable?: boolean;\n    activeDescendantController: ActiveDescendantImperativeRef;\n  },\n): ComboboxBaseState => {\n  const {\n    appearance = 'outline',\n    children,\n    clearable = false,\n    editable = false,\n    inlinePopup = false,\n    mountNode = undefined,\n    multiselect,\n    onOpenChange,\n    size = 'medium',\n    activeDescendantController,\n  } = props;\n\n  const optionCollection = useOptionCollection();\n  const { getOptionsMatchingValue } = optionCollection;\n\n  const { getOptionById } = optionCollection;\n  const getActiveOption = React.useCallback(() => {\n    const activeOptionId = activeDescendantController.active();\n    return activeOptionId ? getOptionById(activeOptionId) : undefined;\n  }, [activeDescendantController, getOptionById]);\n\n  // Keeping some kind of backwards compatible functionality here\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const UNSAFE_activeOption = getActiveOption();\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const UNSAFE_setActiveOption = React.useCallback(\n    (option: OptionValue | undefined | ((prev: OptionValue | undefined) => OptionValue | undefined)) => {\n      let nextOption: OptionValue | undefined = undefined;\n      if (typeof option === 'function') {\n        const activeOption = getActiveOption();\n        nextOption = option(activeOption);\n      }\n\n      if (nextOption) {\n        activeDescendantController.focus(nextOption.id);\n      } else {\n        activeDescendantController.blur();\n      }\n    },\n    [activeDescendantController, getActiveOption],\n  );\n\n  // track whether keyboard focus outline should be shown\n  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n  const [focusVisible, setFocusVisible] = React.useState(false);\n\n  // track focused state to conditionally render collapsed listbox\n  // when the trigger is focused - the listbox should but hidden until the open state is changed\n  const [hasFocus, setHasFocus] = React.useState(false);\n\n  const ignoreNextBlur = React.useRef(false);\n\n  const selectionState = useSelection(props);\n  const { selectedOptions } = selectionState;\n\n  // calculate value based on props, internal value changes, and selected options\n  const isFirstMount = useFirstMount();\n  const [controllableValue, setValue] = useControllableState({\n    state: props.value,\n    initialState: undefined,\n  });\n\n  const value = React.useMemo(() => {\n    // don't compute the value if it is defined through props or setValue,\n    if (controllableValue !== undefined) {\n      return controllableValue;\n    }\n\n    // handle defaultValue here, so it is overridden by selection\n    if (isFirstMount && props.defaultValue !== undefined) {\n      return props.defaultValue;\n    }\n\n    const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n      return selectedOptions.includes(optionValue);\n    }).map(option => option.text);\n\n    if (multiselect) {\n      // editable inputs should not display multiple selected options in the input as text\n      return editable ? '' : selectedOptionsText.join(', ');\n    }\n\n    return selectedOptionsText[0];\n\n    // do not change value after isFirstMount changes,\n    // we do not want to accidentally override defaultValue on a second render\n    // unless another value is intentionally set\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [controllableValue, editable, getOptionsMatchingValue, multiselect, props.defaultValue, selectedOptions]);\n\n  // Handle open state, which is shared with options in context\n  const [open, setOpenState] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const setOpen = React.useCallback(\n    (event: ComboboxBaseOpenEvents, newState: boolean) => {\n      onOpenChange?.(event, { open: newState });\n      setOpenState(newState);\n    },\n    [onOpenChange, setOpenState],\n  );\n\n  // update active option based on change in open state\n  React.useEffect(() => {\n    if (open) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n        if (selectedOption?.id) {\n          activeDescendantController.focus(selectedOption.id);\n        }\n      }\n    } else {\n      activeDescendantController.blur();\n    }\n    // this should only be run in response to changes in the open state or children\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, activeDescendantController]);\n\n  // Fallback focus when children are updated in an open popover results in no item being focused\n  React.useEffect(() => {\n    if (open) {\n      if (!activeDescendantController.active()) {\n        activeDescendantController.first();\n      }\n    }\n    // this should only be run in response to changes in the open state or children\n  }, [open, children, activeDescendantController]);\n\n  return {\n    ...optionCollection,\n    ...selectionState,\n    activeOption: UNSAFE_activeOption,\n    appearance,\n    clearable,\n    focusVisible,\n    ignoreNextBlur,\n    inlinePopup,\n    mountNode,\n    open,\n    hasFocus,\n    setActiveOption: UNSAFE_setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n    setValue,\n    size,\n    value,\n    multiselect,\n    onOptionClick: useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n      if (!multiselect) {\n        setOpen(e, false);\n      }\n    }),\n  };\n};\n"],"names":["React","useControllableState","useEventCallback","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","optionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","selectedOptions","isFirstMount","controllableValue","setValue","state","value","initialState","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","setActiveOption","onOptionClick","e"],"mappings":"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"}

package/lib/utils/useListboxSlot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useListboxSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  mergeCallbacks,\n  useId,\n  useEventCallback,\n  slot,\n  isResolvedShorthand,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport type { ComboboxBaseState } from './ComboboxBase.types';\nimport { Listbox } from '../Listbox';\nimport { ListboxProps } from '../Listbox';\n\nexport type UseTriggerSlotState = Pick<ComboboxBaseState, 'multiselect'>;\n\ntype UseListboxSlotOptions = {\n  state: ComboboxBaseState;\n  triggerRef: React.RefObject<HTMLInputElement> | React.RefObject<HTMLButtonElement>;\n  defaultProps?: Partial<ListboxProps>;\n};\n\n/**\n * @returns  listbox slot with desired behaviour and props\n */\nexport function useListboxSlot(\n  listboxSlotFromProp: Slot<typeof Listbox> | undefined,\n  ref: React.Ref<HTMLDivElement>,\n  options: UseListboxSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<typeof Listbox>>> | undefined {\n  const {\n    state: { multiselect },\n    triggerRef,\n    defaultProps,\n  } = options;\n\n  const listboxId = useId(\n    'fluent-listbox',\n    isResolvedShorthand(listboxSlotFromProp) ? listboxSlotFromProp.id : undefined,\n  );\n\n  const listboxSlot = slot.optional(listboxSlotFromProp, {\n    renderByDefault: true,\n    elementType: Listbox,\n    defaultProps: {\n      id: listboxId,\n      multiselect,\n      tabIndex: undefined,\n      ...defaultProps,\n    },\n  });\n\n  /**\n   * Clicking on the listbox should never blur the trigger\n   * in a combobox\n   */\n  const onMouseDown = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      event.preventDefault();\n    }, listboxSlot?.onMouseDown),\n  );\n\n  const onClick = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      triggerRef.current?.focus();\n    }, listboxSlot?.onClick),\n  );\n\n  const listboxRef = useMergedRefs(listboxSlot?.ref, ref);\n  if (listboxSlot) {\n    listboxSlot.ref = listboxRef;\n    listboxSlot.onMouseDown = onMouseDown;\n    listboxSlot.onClick = onClick;\n  }\n\n  return listboxSlot;\n}\n"],"names":["React","mergeCallbacks","useId","useEventCallback","slot","isResolvedShorthand","useMergedRefs","Listbox","useListboxSlot","listboxSlotFromProp","ref","options","state","multiselect","triggerRef","defaultProps","listboxId","id","undefined","listboxSlot","optional","renderByDefault","elementType","tabIndex","onMouseDown","event","preventDefault","onClick","current","focus","listboxRef"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,cAAc,EACdC,KAAK,EACLC,gBAAgB,EAChBC,IAAI,EACJC,mBAAmB,EACnBC,aAAa,QACR,4BAA4B;AAGnC,SAASC,OAAO,QAAQ,aAAa;AAWrC;;CAEC,GACD,OAAO,SAASC,eACdC,mBAAqD,EACrDC,GAA8B,EAC9BC,OAA8B;IAE9B,MAAM,EACJC,OAAO,EAAEC,WAAW,EAAE,EACtBC,UAAU,EACVC,YAAY,EACb,GAAGJ;IAEJ,MAAMK,YAAYd,MAChB,kBACAG,oBAAoBI,uBAAuBA,oBAAoBQ,EAAE,GAAGC;IAGtE,MAAMC,cAAcf,KAAKgB,QAAQ,CAACX,qBAAqB;QACrDY,iBAAiB;QACjBC,aAAaf;QACbQ,cAAc;YACZE,IAAID;YACJH;YACAU,UAAUL;YACV,GAAGH,YAAY;QACjB;IACF;IAEA;;;GAGC,GACD,MAAMS,cAAcrB,iBAClBF,eAAe,CAACwB;QACdA,MAAMC,cAAc;IACtB,GAAGP,wBAAAA,kCAAAA,YAAaK,WAAW;IAG7B,MAAMG,UAAUxB,iBACdF,eAAe,CAACwB;YAEdX;QADAW,MAAMC,cAAc;SACpBZ,sBAAAA,WAAWc,OAAO,cAAlBd,0CAAAA,oBAAoBe,KAAK;IAC3B,GAAGV,wBAAAA,kCAAAA,YAAaQ,OAAO;IAGzB,MAAMG,aAAaxB,cAAca,wBAAAA,kCAAAA,YAAaT,GAAG,EAAEA;IACnD,IAAIS,aAAa;QACfA,YAAYT,GAAG,GAAGoB;QAClBX,YAAYK,WAAW,GAAGA;QAC1BL,YAAYQ,OAAO,GAAGA;IACxB;IAEA,OAAOR;AACT"}
+{"version":3,"sources":["useListboxSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  mergeCallbacks,\n  useId,\n  useEventCallback,\n  slot,\n  isResolvedShorthand,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport type { ComboboxBaseState } from './ComboboxBase.types';\nimport { Listbox } from '../Listbox';\nimport { ListboxProps } from '../Listbox';\n\nexport type UseListboxSlotState = Pick<ComboboxBaseState, 'multiselect'>;\n\ntype UseListboxSlotOptions = {\n  state: UseListboxSlotState;\n  triggerRef: React.RefObject<HTMLInputElement> | React.RefObject<HTMLButtonElement>;\n  defaultProps?: Partial<ListboxProps>;\n};\n\n/**\n * @returns  listbox slot with desired behaviour and props\n */\nexport function useListboxSlot(\n  listboxSlotFromProp: Slot<typeof Listbox> | undefined,\n  ref: React.Ref<HTMLDivElement>,\n  options: UseListboxSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<typeof Listbox>>> | undefined {\n  const {\n    state: { multiselect },\n    triggerRef,\n    defaultProps,\n  } = options;\n\n  const listboxId = useId(\n    'fluent-listbox',\n    isResolvedShorthand(listboxSlotFromProp) ? listboxSlotFromProp.id : undefined,\n  );\n\n  const listboxSlot = slot.optional(listboxSlotFromProp, {\n    renderByDefault: true,\n    elementType: Listbox,\n    defaultProps: {\n      id: listboxId,\n      multiselect,\n      tabIndex: undefined,\n      ...defaultProps,\n    },\n  });\n\n  /**\n   * Clicking on the listbox should never blur the trigger\n   * in a combobox\n   */\n  const onMouseDown = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      event.preventDefault();\n    }, listboxSlot?.onMouseDown),\n  );\n\n  const onClick = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      triggerRef.current?.focus();\n    }, listboxSlot?.onClick),\n  );\n\n  const listboxRef = useMergedRefs(listboxSlot?.ref, ref);\n  if (listboxSlot) {\n    listboxSlot.ref = listboxRef;\n    listboxSlot.onMouseDown = onMouseDown;\n    listboxSlot.onClick = onClick;\n  }\n\n  return listboxSlot;\n}\n"],"names":["React","mergeCallbacks","useId","useEventCallback","slot","isResolvedShorthand","useMergedRefs","Listbox","useListboxSlot","listboxSlotFromProp","ref","options","state","multiselect","triggerRef","defaultProps","listboxId","id","undefined","listboxSlot","optional","renderByDefault","elementType","tabIndex","onMouseDown","event","preventDefault","onClick","current","focus","listboxRef"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,cAAc,EACdC,KAAK,EACLC,gBAAgB,EAChBC,IAAI,EACJC,mBAAmB,EACnBC,aAAa,QACR,4BAA4B;AAGnC,SAASC,OAAO,QAAQ,aAAa;AAWrC;;CAEC,GACD,OAAO,SAASC,eACdC,mBAAqD,EACrDC,GAA8B,EAC9BC,OAA8B;IAE9B,MAAM,EACJC,OAAO,EAAEC,WAAW,EAAE,EACtBC,UAAU,EACVC,YAAY,EACb,GAAGJ;IAEJ,MAAMK,YAAYd,MAChB,kBACAG,oBAAoBI,uBAAuBA,oBAAoBQ,EAAE,GAAGC;IAGtE,MAAMC,cAAcf,KAAKgB,QAAQ,CAACX,qBAAqB;QACrDY,iBAAiB;QACjBC,aAAaf;QACbQ,cAAc;YACZE,IAAID;YACJH;YACAU,UAAUL;YACV,GAAGH,YAAY;QACjB;IACF;IAEA;;;GAGC,GACD,MAAMS,cAAcrB,iBAClBF,eAAe,CAACwB;QACdA,MAAMC,cAAc;IACtB,GAAGP,wBAAAA,kCAAAA,YAAaK,WAAW;IAG7B,MAAMG,UAAUxB,iBACdF,eAAe,CAACwB;YAEdX;QADAW,MAAMC,cAAc;SACpBZ,sBAAAA,WAAWc,OAAO,cAAlBd,0CAAAA,oBAAoBe,KAAK;IAC3B,GAAGV,wBAAAA,kCAAAA,YAAaQ,OAAO;IAGzB,MAAMG,aAAaxB,cAAca,wBAAAA,kCAAAA,YAAaT,GAAG,EAAEA;IACnD,IAAIS,aAAa;QACfA,YAAYT,GAAG,GAAGoB;QAClBX,YAAYK,WAAW,GAAGA;QAC1BL,YAAYQ,OAAO,GAAGA;IACxB;IAEA,OAAOR;AACT"}

package/lib-commonjs/components/Combobox/renderCombobox.js

@@ -13,22 +13,26 @@ const _reactportal = require("@fluentui/react-portal");
 const _reactaria = require("@fluentui/react-aria");
 const _reactutilities = require("@fluentui/react-utilities");
 const _ComboboxContext = require("../../contexts/ComboboxContext");
+const _ListboxContext = require("../../contexts/ListboxContext");
 const renderCombobox_unstable = (state, contextValues)=>{
     (0, _reactutilities.assertSlots)(state);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactaria.ActiveDescendantContextProvider, {
             value: contextValues.activeDescendant,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_ComboboxContext.ComboboxContext.Provider, {
-                value: contextValues.combobox,
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(state.input, {}),
-                    state.clearIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.clearIcon, {}),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {}),
-                    state.listbox && (state.inlinePopup ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactportal.Portal, {
-                        mountNode: state.mountNode,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {})
-                    }))
-                ]
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ListboxContext.ListboxProvider, {
+                value: contextValues.listbox,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_ComboboxContext.ComboboxContext.Provider, {
+                    value: contextValues.combobox,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(state.input, {}),
+                        state.clearIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.clearIcon, {}),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {}),
+                        state.listbox && (state.inlinePopup ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactportal.Portal, {
+                            mountNode: state.mountNode,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {})
+                        }))
+                    ]
+                })
             })
         })
     });

package/lib-commonjs/components/Combobox/renderCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderCombobox.js"],"sourcesContent":["  import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { Portal } from '@fluentui/react-portal';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\n/**\n * Render the final JSX of Combobox\n */ export const renderCombobox_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(state.root, {\n        children: /*#__PURE__*/ _jsx(ActiveDescendantContextProvider, {\n            value: contextValues.activeDescendant,\n            children: /*#__PURE__*/ _jsxs(ComboboxContext.Provider, {\n                value: contextValues.combobox,\n                children: [\n                    /*#__PURE__*/ _jsx(state.input, {}),\n                    state.clearIcon && /*#__PURE__*/ _jsx(state.clearIcon, {}),\n                    /*#__PURE__*/ _jsx(state.expandIcon, {}),\n                    state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {\n                        mountNode: state.mountNode,\n                        children: /*#__PURE__*/ _jsx(state.listbox, {})\n                    }))\n                ]\n            })\n        })\n    });\n};\n"],"names":["renderCombobox_unstable","state","contextValues","assertSlots","_jsx","root","children","ActiveDescendantContextProvider","value","activeDescendant","_jsxs","ComboboxContext","Provider","combobox","input","clearIcon","expandIcon","listbox","inlinePopup","Portal","mountNode"],"mappings":";;;;+BAOiBA;;;eAAAA;;;4BAP4B;6BACtB;2BACyB;gCACpB;iCACI;AAGrB,MAAMA,0BAA0B,CAACC,OAAOC;IAC/CC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACH,MAAMI,IAAI,EAAE;QAClCC,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACG,0CAA+B,EAAE;YAC1DC,OAAON,cAAcO,gBAAgB;YACrCH,UAAU,WAAW,GAAGI,IAAAA,gBAAK,EAACC,gCAAe,CAACC,QAAQ,EAAE;gBACpDJ,OAAON,cAAcW,QAAQ;gBAC7BP,UAAU;oBACN,WAAW,GAAGF,IAAAA,eAAI,EAACH,MAAMa,KAAK,EAAE,CAAC;oBACjCb,MAAMc,SAAS,IAAI,WAAW,GAAGX,IAAAA,eAAI,EAACH,MAAMc,SAAS,EAAE,CAAC;oBACxD,WAAW,GAAGX,IAAAA,eAAI,EAACH,MAAMe,UAAU,EAAE,CAAC;oBACtCf,MAAMgB,OAAO,IAAKhB,CAAAA,MAAMiB,WAAW,GAAG,WAAW,GAAGd,IAAAA,eAAI,EAACH,MAAMgB,OAAO,EAAE,CAAC,KAAK,WAAW,GAAGb,IAAAA,eAAI,EAACe,mBAAM,EAAE;wBACrGC,WAAWnB,MAAMmB,SAAS;wBAC1Bd,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACH,MAAMgB,OAAO,EAAE,CAAC;oBACjD,EAAC;iBACJ;YACL;QACJ;IACJ;AACJ"}
+{"version":3,"sources":["renderCombobox.js"],"sourcesContent":["  import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { Portal } from '@fluentui/react-portal';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxProvider } from '../../contexts/ListboxContext';\n/**\n * Render the final JSX of Combobox\n */ export const renderCombobox_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(state.root, {\n        children: /*#__PURE__*/ _jsx(ActiveDescendantContextProvider, {\n            value: contextValues.activeDescendant,\n            children: /*#__PURE__*/ _jsx(ListboxProvider, {\n                value: contextValues.listbox,\n                children: /*#__PURE__*/ _jsxs(ComboboxContext.Provider, {\n                    value: contextValues.combobox,\n                    children: [\n                        /*#__PURE__*/ _jsx(state.input, {}),\n                        state.clearIcon && /*#__PURE__*/ _jsx(state.clearIcon, {}),\n                        /*#__PURE__*/ _jsx(state.expandIcon, {}),\n                        state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {\n                            mountNode: state.mountNode,\n                            children: /*#__PURE__*/ _jsx(state.listbox, {})\n                        }))\n                    ]\n                })\n            })\n        })\n    });\n};\n"],"names":["renderCombobox_unstable","state","contextValues","assertSlots","_jsx","root","children","ActiveDescendantContextProvider","value","activeDescendant","ListboxProvider","listbox","_jsxs","ComboboxContext","Provider","combobox","input","clearIcon","expandIcon","inlinePopup","Portal","mountNode"],"mappings":";;;;+BAQiBA;;;eAAAA;;;4BAR4B;6BACtB;2BACyB;gCACpB;iCACI;gCACA;AAGrB,MAAMA,0BAA0B,CAACC,OAAOC;IAC/CC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACH,MAAMI,IAAI,EAAE;QAClCC,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACG,0CAA+B,EAAE;YAC1DC,OAAON,cAAcO,gBAAgB;YACrCH,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACM,+BAAe,EAAE;gBAC1CF,OAAON,cAAcS,OAAO;gBAC5BL,UAAU,WAAW,GAAGM,IAAAA,gBAAK,EAACC,gCAAe,CAACC,QAAQ,EAAE;oBACpDN,OAAON,cAAca,QAAQ;oBAC7BT,UAAU;wBACN,WAAW,GAAGF,IAAAA,eAAI,EAACH,MAAMe,KAAK,EAAE,CAAC;wBACjCf,MAAMgB,SAAS,IAAI,WAAW,GAAGb,IAAAA,eAAI,EAACH,MAAMgB,SAAS,EAAE,CAAC;wBACxD,WAAW,GAAGb,IAAAA,eAAI,EAACH,MAAMiB,UAAU,EAAE,CAAC;wBACtCjB,MAAMU,OAAO,IAAKV,CAAAA,MAAMkB,WAAW,GAAG,WAAW,GAAGf,IAAAA,eAAI,EAACH,MAAMU,OAAO,EAAE,CAAC,KAAK,WAAW,GAAGP,IAAAA,eAAI,EAACgB,mBAAM,EAAE;4BACrGC,WAAWpB,MAAMoB,SAAS;4BAC1Bf,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACH,MAAMU,OAAO,EAAE,CAAC;wBACjD,EAAC;qBACJ;gBACL;YACJ;QACJ;IACJ;AACJ"}

package/lib-commonjs/components/Dropdown/renderDropdown.js

@@ -13,26 +13,30 @@ const _reactportal = require("@fluentui/react-portal");
 const _reactutilities = require("@fluentui/react-utilities");
 const _reactaria = require("@fluentui/react-aria");
 const _ComboboxContext = require("../../contexts/ComboboxContext");
+const _ListboxContext = require("../../contexts/ListboxContext");
 const renderDropdown_unstable = (state, contextValues)=>{
     (0, _reactutilities.assertSlots)(state);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactaria.ActiveDescendantContextProvider, {
             value: contextValues.activeDescendant,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_ComboboxContext.ComboboxContext.Provider, {
-                value: contextValues.combobox,
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.button, {
-                        children: [
-                            state.button.children,
-                            state.expandIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {})
-                        ]
-                    }),
-                    state.clearButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.clearButton, {}),
-                    state.listbox && (state.inlinePopup ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactportal.Portal, {
-                        mountNode: state.mountNode,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {})
-                    }))
-                ]
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ListboxContext.ListboxContext.Provider, {
+                value: contextValues.listbox,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_ComboboxContext.ComboboxContext.Provider, {
+                    value: contextValues.combobox,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.button, {
+                            children: [
+                                state.button.children,
+                                state.expandIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {})
+                            ]
+                        }),
+                        state.clearButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.clearButton, {}),
+                        state.listbox && (state.inlinePopup ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactportal.Portal, {
+                            mountNode: state.mountNode,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {})
+                        }))
+                    ]
+                })
             })
         })
     });

package/lib-commonjs/components/Dropdown/renderDropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDropdown.js"],"sourcesContent":["  import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\n/**\n * Render the final JSX of Dropdown\n */ export const renderDropdown_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(state.root, {\n        children: /*#__PURE__*/ _jsx(ActiveDescendantContextProvider, {\n            value: contextValues.activeDescendant,\n            children: /*#__PURE__*/ _jsxs(ComboboxContext.Provider, {\n                value: contextValues.combobox,\n                children: [\n                    /*#__PURE__*/ _jsxs(state.button, {\n                        children: [\n                            state.button.children,\n                            state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {})\n                        ]\n                    }),\n                    state.clearButton && /*#__PURE__*/ _jsx(state.clearButton, {}),\n                    state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {\n                        mountNode: state.mountNode,\n                        children: /*#__PURE__*/ _jsx(state.listbox, {})\n                    }))\n                ]\n            })\n        })\n    });\n};\n"],"names":["renderDropdown_unstable","state","contextValues","assertSlots","_jsx","root","children","ActiveDescendantContextProvider","value","activeDescendant","_jsxs","ComboboxContext","Provider","combobox","button","expandIcon","clearButton","listbox","inlinePopup","Portal","mountNode"],"mappings":";;;;+BAOiBA;;;eAAAA;;;4BAP4B;6BACtB;gCACK;2BACoB;iCAChB;AAGrB,MAAMA,0BAA0B,CAACC,OAAOC;IAC/CC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACH,MAAMI,IAAI,EAAE;QAClCC,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACG,0CAA+B,EAAE;YAC1DC,OAAON,cAAcO,gBAAgB;YACrCH,UAAU,WAAW,GAAGI,IAAAA,gBAAK,EAACC,gCAAe,CAACC,QAAQ,EAAE;gBACpDJ,OAAON,cAAcW,QAAQ;gBAC7BP,UAAU;oBACN,WAAW,GAAGI,IAAAA,gBAAK,EAACT,MAAMa,MAAM,EAAE;wBAC9BR,UAAU;4BACNL,MAAMa,MAAM,CAACR,QAAQ;4BACrBL,MAAMc,UAAU,IAAI,WAAW,GAAGX,IAAAA,eAAI,EAACH,MAAMc,UAAU,EAAE,CAAC;yBAC7D;oBACL;oBACAd,MAAMe,WAAW,IAAI,WAAW,GAAGZ,IAAAA,eAAI,EAACH,MAAMe,WAAW,EAAE,CAAC;oBAC5Df,MAAMgB,OAAO,IAAKhB,CAAAA,MAAMiB,WAAW,GAAG,WAAW,GAAGd,IAAAA,eAAI,EAACH,MAAMgB,OAAO,EAAE,CAAC,KAAK,WAAW,GAAGb,IAAAA,eAAI,EAACe,mBAAM,EAAE;wBACrGC,WAAWnB,MAAMmB,SAAS;wBAC1Bd,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACH,MAAMgB,OAAO,EAAE,CAAC;oBACjD,EAAC;iBACJ;YACL;QACJ;IACJ;AACJ"}
+{"version":3,"sources":["renderDropdown.js"],"sourcesContent":["  import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n/**\n * Render the final JSX of Dropdown\n */ export const renderDropdown_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(state.root, {\n        children: /*#__PURE__*/ _jsx(ActiveDescendantContextProvider, {\n            value: contextValues.activeDescendant,\n            children: /*#__PURE__*/ _jsx(ListboxContext.Provider, {\n                value: contextValues.listbox,\n                children: /*#__PURE__*/ _jsxs(ComboboxContext.Provider, {\n                    value: contextValues.combobox,\n                    children: [\n                        /*#__PURE__*/ _jsxs(state.button, {\n                            children: [\n                                state.button.children,\n                                state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {})\n                            ]\n                        }),\n                        state.clearButton && /*#__PURE__*/ _jsx(state.clearButton, {}),\n                        state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {\n                            mountNode: state.mountNode,\n                            children: /*#__PURE__*/ _jsx(state.listbox, {})\n                        }))\n                    ]\n                })\n            })\n        })\n    });\n};\n"],"names":["renderDropdown_unstable","state","contextValues","assertSlots","_jsx","root","children","ActiveDescendantContextProvider","value","activeDescendant","ListboxContext","Provider","listbox","_jsxs","ComboboxContext","combobox","button","expandIcon","clearButton","inlinePopup","Portal","mountNode"],"mappings":";;;;+BAQiBA;;;eAAAA;;;4BAR4B;6BACtB;gCACK;2BACoB;iCAChB;gCACD;AAGpB,MAAMA,0BAA0B,CAACC,OAAOC;IAC/CC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACH,MAAMI,IAAI,EAAE;QAClCC,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACG,0CAA+B,EAAE;YAC1DC,OAAON,cAAcO,gBAAgB;YACrCH,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACM,8BAAc,CAACC,QAAQ,EAAE;gBAClDH,OAAON,cAAcU,OAAO;gBAC5BN,UAAU,WAAW,GAAGO,IAAAA,gBAAK,EAACC,gCAAe,CAACH,QAAQ,EAAE;oBACpDH,OAAON,cAAca,QAAQ;oBAC7BT,UAAU;wBACN,WAAW,GAAGO,IAAAA,gBAAK,EAACZ,MAAMe,MAAM,EAAE;4BAC9BV,UAAU;gCACNL,MAAMe,MAAM,CAACV,QAAQ;gCACrBL,MAAMgB,UAAU,IAAI,WAAW,GAAGb,IAAAA,eAAI,EAACH,MAAMgB,UAAU,EAAE,CAAC;6BAC7D;wBACL;wBACAhB,MAAMiB,WAAW,IAAI,WAAW,GAAGd,IAAAA,eAAI,EAACH,MAAMiB,WAAW,EAAE,CAAC;wBAC5DjB,MAAMW,OAAO,IAAKX,CAAAA,MAAMkB,WAAW,GAAG,WAAW,GAAGf,IAAAA,eAAI,EAACH,MAAMW,OAAO,EAAE,CAAC,KAAK,WAAW,GAAGR,IAAAA,eAAI,EAACgB,mBAAM,EAAE;4BACrGC,WAAWpB,MAAMoB,SAAS;4BAC1Bf,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACH,MAAMW,OAAO,EAAE,CAAC;wBACjD,EAAC;qBACJ;gBACL;YACJ;QACJ;IACJ;AACJ"}

package/lib-commonjs/components/Listbox/useListbox.js

@@ -16,8 +16,8 @@ const _reactaria = require("@fluentui/react-aria");
 const _dropdownKeyActions = require("../../utils/dropdownKeyActions");
 const _useOptionCollection = require("../../utils/useOptionCollection");
 const _useSelection = require("../../utils/useSelection");
-const _ComboboxContext = require("../../contexts/ComboboxContext");
 const _useOptionStylesstyles = require("../Option/useOptionStyles.styles");
+const _ListboxContext = require("../../contexts/ListboxContext");
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const UNSAFE_noLongerUsed = {
     activeOption: undefined,
@@ -70,13 +70,13 @@ const useListbox_unstable = (props, ref)=>{
         }
     };
     // get state from parent combobox, if it exists
-    const hasComboboxContext = (0, _reactcontextselector.useHasParentContext)(_ComboboxContext.ComboboxContext);
-    const comboboxSelectedOptions = (0, _reactcontextselector.useContextSelector)(_ComboboxContext.ComboboxContext, (ctx)=>ctx.selectedOptions);
-    const comboboxSelectOption = (0, _reactcontextselector.useContextSelector)(_ComboboxContext.ComboboxContext, (ctx)=>ctx.selectOption);
+    const hasListboxContext = (0, _reactcontextselector.useHasParentContext)(_ListboxContext.ListboxContext);
+    const contextSelectedOptions = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.selectedOptions);
+    const contextSelectOption = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.selectOption);
     // without a parent combobox context, provide values directly from Listbox
-    const optionContextValues = hasComboboxContext ? {
-        selectedOptions: comboboxSelectedOptions,
-        selectOption: comboboxSelectOption,
+    const optionContextValues = hasListboxContext ? {
+        selectedOptions: contextSelectedOptions,
+        selectOption: contextSelectOption,
         ...UNSAFE_noLongerUsed
     } : {
         selectedOptions,

package/lib-commonjs/components/Listbox/useListbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useListbox.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { useActiveDescendant, useActiveDescendantContext, useHasParentActiveDescendantContext } from '@fluentui/react-aria';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useSelection } from '../../utils/useSelection';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst UNSAFE_noLongerUsed = {\n    activeOption: undefined,\n    focusVisible: false,\n    setActiveOption: ()=>null\n};\n/**\n * Create the state required to render Listbox.\n *\n * The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n *\n * @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */ export const useListbox_unstable = (props, ref)=>{\n    const { multiselect } = props;\n    const optionCollection = useOptionCollection();\n    const { getOptionById } = optionCollection;\n    const { listboxRef: activeDescendantListboxRef, activeParentRef, controller } = useActiveDescendant({\n        matchOption: (el)=>el.classList.contains(optionClassNames.root)\n    });\n    const activeDescendantContext = useActiveDescendantContext();\n    const activeDescendantController = useHasParentActiveDescendantContext() ? activeDescendantContext.controller : controller;\n    const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n    const onKeyDown = (event)=>{\n        const action = getDropdownActionFromKey(event, {\n            open: true\n        });\n        const activeOptionId = activeDescendantController.active();\n        const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n        switch(action){\n            case 'Next':\n                if (activeOption) {\n                    activeDescendantController.next();\n                } else {\n                    activeDescendantController.first();\n                }\n                break;\n            case 'Previous':\n                if (activeOption) {\n                    activeDescendantController.prev();\n                } else {\n                    activeDescendantController.first();\n                }\n                break;\n            case 'PageUp':\n            case 'First':\n                activeDescendantController.first();\n                break;\n            case 'PageDown':\n            case 'Last':\n                activeDescendantController.last();\n                break;\n            case 'Select':\n            case 'CloseSelect':\n                activeOption && selectOption(event, activeOption);\n                break;\n        }\n    };\n    // get state from parent combobox, if it exists\n    const hasComboboxContext = useHasParentContext(ComboboxContext);\n    const comboboxSelectedOptions = useContextSelector(ComboboxContext, (ctx)=>ctx.selectedOptions);\n    const comboboxSelectOption = useContextSelector(ComboboxContext, (ctx)=>ctx.selectOption);\n    // without a parent combobox context, provide values directly from Listbox\n    const optionContextValues = hasComboboxContext ? {\n        selectedOptions: comboboxSelectedOptions,\n        selectOption: comboboxSelectOption,\n        ...UNSAFE_noLongerUsed\n    } : {\n        selectedOptions,\n        selectOption,\n        ...UNSAFE_noLongerUsed\n    };\n    const state = {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: useMergedRefs(ref, activeParentRef, activeDescendantListboxRef),\n            role: multiselect ? 'menu' : 'listbox',\n            tabIndex: 0,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        multiselect,\n        clearSelection,\n        activeDescendantController,\n        ...optionCollection,\n        ...optionContextValues\n    };\n    state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n    return state;\n};\n"],"names":["useListbox_unstable","UNSAFE_noLongerUsed","activeOption","undefined","focusVisible","setActiveOption","props","ref","multiselect","optionCollection","useOptionCollection","getOptionById","listboxRef","activeDescendantListboxRef","activeParentRef","controller","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","activeDescendantContext","useActiveDescendantContext","activeDescendantController","useHasParentActiveDescendantContext","clearSelection","selectedOptions","selectOption","useSelection","onKeyDown","event","action","getDropdownActionFromKey","open","activeOptionId","active","next","first","prev","last","hasComboboxContext","useHasParentContext","ComboboxContext","comboboxSelectedOptions","useContextSelector","ctx","comboboxSelectOption","optionContextValues","state","components","slot","always","getIntrinsicElementProps","useMergedRefs","role","tabIndex","elementType","useEventCallback","mergeCallbacks"],"mappings":";;;;+BAuBiBA;;;eAAAA;;;;iEAvBM;gCACyE;sCACxC;2BAC6C;oCAC5D;qCACL;8BACP;iCACG;uCACC;AACjC,gEAAgE;AAChE,MAAMC,sBAAsB;IACxBC,cAAcC;IACdC,cAAc;IACdC,iBAAiB,IAAI;AACzB;AASW,MAAML,sBAAsB,CAACM,OAAOC;IAC3C,MAAM,EAAEC,WAAW,EAAE,GAAGF;IACxB,MAAMG,mBAAmBC,IAAAA,wCAAmB;IAC5C,MAAM,EAAEC,aAAa,EAAE,GAAGF;IAC1B,MAAM,EAAEG,YAAYC,0BAA0B,EAAEC,eAAe,EAAEC,UAAU,EAAE,GAAGC,IAAAA,8BAAmB,EAAC;QAChGC,aAAa,CAACC,KAAKA,GAAGC,SAAS,CAACC,QAAQ,CAACC,uCAAgB,CAACC,IAAI;IAClE;IACA,MAAMC,0BAA0BC,IAAAA,qCAA0B;IAC1D,MAAMC,6BAA6BC,IAAAA,8CAAmC,MAAKH,wBAAwBR,UAAU,GAAGA;IAChH,MAAM,EAAEY,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAE,GAAGC,IAAAA,0BAAY,EAACxB;IACvE,MAAMyB,YAAY,CAACC;QACf,MAAMC,SAASC,IAAAA,4CAAwB,EAACF,OAAO;YAC3CG,MAAM;QACV;QACA,MAAMC,iBAAiBX,2BAA2BY,MAAM;QACxD,MAAMnC,eAAekC,iBAAiBzB,cAAcyB,kBAAkB;QACtE,OAAOH;YACH,KAAK;gBACD,IAAI/B,cAAc;oBACduB,2BAA2Ba,IAAI;gBACnC,OAAO;oBACHb,2BAA2Bc,KAAK;gBACpC;gBACA;YACJ,KAAK;gBACD,IAAIrC,cAAc;oBACduB,2BAA2Be,IAAI;gBACnC,OAAO;oBACHf,2BAA2Bc,KAAK;gBACpC;gBACA;YACJ,KAAK;YACL,KAAK;gBACDd,2BAA2Bc,KAAK;gBAChC;YACJ,KAAK;YACL,KAAK;gBACDd,2BAA2BgB,IAAI;gBAC/B;YACJ,KAAK;YACL,KAAK;gBACDvC,gBAAgB2B,aAAaG,OAAO9B;gBACpC;QACR;IACJ;IACA,+CAA+C;IAC/C,MAAMwC,qBAAqBC,IAAAA,yCAAmB,EAACC,gCAAe;IAC9D,MAAMC,0BAA0BC,IAAAA,wCAAkB,EAACF,gCAAe,EAAE,CAACG,MAAMA,IAAInB,eAAe;IAC9F,MAAMoB,uBAAuBF,IAAAA,wCAAkB,EAACF,gCAAe,EAAE,CAACG,MAAMA,IAAIlB,YAAY;IACxF,0EAA0E;IAC1E,MAAMoB,sBAAsBP,qBAAqB;QAC7Cd,iBAAiBiB;QACjBhB,cAAcmB;QACd,GAAG/C,mBAAmB;IAC1B,IAAI;QACA2B;QACAC;QACA,GAAG5B,mBAAmB;IAC1B;IACA,MAAMiD,QAAQ;QACVC,YAAY;YACR7B,MAAM;QACV;QACAA,MAAM8B,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5F/C,KAAKgD,IAAAA,6BAAa,EAAChD,KAAKO,iBAAiBD;YACzC2C,MAAMhD,cAAc,SAAS;YAC7BiD,UAAU;YACV,GAAGnD,KAAK;QACZ,IAAI;YACAoD,aAAa;QACjB;QACAlD;QACAmB;QACAF;QACA,GAAGhB,gBAAgB;QACnB,GAAGwC,mBAAmB;IAC1B;IACAC,MAAM5B,IAAI,CAACS,SAAS,GAAG4B,IAAAA,gCAAgB,EAACC,IAAAA,8BAAc,EAACV,MAAM5B,IAAI,CAACS,SAAS,EAAEA;IAC7E,OAAOmB;AACX"}
+{"version":3,"sources":["useListbox.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, useEventCallback, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useActiveDescendant, useActiveDescendantContext, useHasParentActiveDescendantContext } from '@fluentui/react-aria';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useSelection } from '../../utils/useSelection';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport { ListboxContext, useListboxContext_unstable } from '../../contexts/ListboxContext';\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst UNSAFE_noLongerUsed = {\n    activeOption: undefined,\n    focusVisible: false,\n    setActiveOption: ()=>null\n};\n/**\n * Create the state required to render Listbox.\n *\n * The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n *\n * @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */ export const useListbox_unstable = (props, ref)=>{\n    const { multiselect } = props;\n    const optionCollection = useOptionCollection();\n    const { getOptionById } = optionCollection;\n    const { listboxRef: activeDescendantListboxRef, activeParentRef, controller } = useActiveDescendant({\n        matchOption: (el)=>el.classList.contains(optionClassNames.root)\n    });\n    const activeDescendantContext = useActiveDescendantContext();\n    const activeDescendantController = useHasParentActiveDescendantContext() ? activeDescendantContext.controller : controller;\n    const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n    const onKeyDown = (event)=>{\n        const action = getDropdownActionFromKey(event, {\n            open: true\n        });\n        const activeOptionId = activeDescendantController.active();\n        const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n        switch(action){\n            case 'Next':\n                if (activeOption) {\n                    activeDescendantController.next();\n                } else {\n                    activeDescendantController.first();\n                }\n                break;\n            case 'Previous':\n                if (activeOption) {\n                    activeDescendantController.prev();\n                } else {\n                    activeDescendantController.first();\n                }\n                break;\n            case 'PageUp':\n            case 'First':\n                activeDescendantController.first();\n                break;\n            case 'PageDown':\n            case 'Last':\n                activeDescendantController.last();\n                break;\n            case 'Select':\n            case 'CloseSelect':\n                activeOption && selectOption(event, activeOption);\n                break;\n        }\n    };\n    // get state from parent combobox, if it exists\n    const hasListboxContext = useHasParentContext(ListboxContext);\n    const contextSelectedOptions = useListboxContext_unstable((ctx)=>ctx.selectedOptions);\n    const contextSelectOption = useListboxContext_unstable((ctx)=>ctx.selectOption);\n    // without a parent combobox context, provide values directly from Listbox\n    const optionContextValues = hasListboxContext ? {\n        selectedOptions: contextSelectedOptions,\n        selectOption: contextSelectOption,\n        ...UNSAFE_noLongerUsed\n    } : {\n        selectedOptions,\n        selectOption,\n        ...UNSAFE_noLongerUsed\n    };\n    const state = {\n        components: {\n            root: 'div'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: useMergedRefs(ref, activeParentRef, activeDescendantListboxRef),\n            role: multiselect ? 'menu' : 'listbox',\n            tabIndex: 0,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        multiselect,\n        clearSelection,\n        activeDescendantController,\n        ...optionCollection,\n        ...optionContextValues\n    };\n    state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n    return state;\n};\n"],"names":["useListbox_unstable","UNSAFE_noLongerUsed","activeOption","undefined","focusVisible","setActiveOption","props","ref","multiselect","optionCollection","useOptionCollection","getOptionById","listboxRef","activeDescendantListboxRef","activeParentRef","controller","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","activeDescendantContext","useActiveDescendantContext","activeDescendantController","useHasParentActiveDescendantContext","clearSelection","selectedOptions","selectOption","useSelection","onKeyDown","event","action","getDropdownActionFromKey","open","activeOptionId","active","next","first","prev","last","hasListboxContext","useHasParentContext","ListboxContext","contextSelectedOptions","useListboxContext_unstable","ctx","contextSelectOption","optionContextValues","state","components","slot","always","getIntrinsicElementProps","useMergedRefs","role","tabIndex","elementType","useEventCallback","mergeCallbacks"],"mappings":";;;;+BAuBiBA;;;eAAAA;;;;iEAvBM;gCACyE;sCAC5D;2BACiE;oCAC5D;qCACL;8BACP;uCACI;gCAC0B;AAC3D,gEAAgE;AAChE,MAAMC,sBAAsB;IACxBC,cAAcC;IACdC,cAAc;IACdC,iBAAiB,IAAI;AACzB;AASW,MAAML,sBAAsB,CAACM,OAAOC;IAC3C,MAAM,EAAEC,WAAW,EAAE,GAAGF;IACxB,MAAMG,mBAAmBC,IAAAA,wCAAmB;IAC5C,MAAM,EAAEC,aAAa,EAAE,GAAGF;IAC1B,MAAM,EAAEG,YAAYC,0BAA0B,EAAEC,eAAe,EAAEC,UAAU,EAAE,GAAGC,IAAAA,8BAAmB,EAAC;QAChGC,aAAa,CAACC,KAAKA,GAAGC,SAAS,CAACC,QAAQ,CAACC,uCAAgB,CAACC,IAAI;IAClE;IACA,MAAMC,0BAA0BC,IAAAA,qCAA0B;IAC1D,MAAMC,6BAA6BC,IAAAA,8CAAmC,MAAKH,wBAAwBR,UAAU,GAAGA;IAChH,MAAM,EAAEY,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAE,GAAGC,IAAAA,0BAAY,EAACxB;IACvE,MAAMyB,YAAY,CAACC;QACf,MAAMC,SAASC,IAAAA,4CAAwB,EAACF,OAAO;YAC3CG,MAAM;QACV;QACA,MAAMC,iBAAiBX,2BAA2BY,MAAM;QACxD,MAAMnC,eAAekC,iBAAiBzB,cAAcyB,kBAAkB;QACtE,OAAOH;YACH,KAAK;gBACD,IAAI/B,cAAc;oBACduB,2BAA2Ba,IAAI;gBACnC,OAAO;oBACHb,2BAA2Bc,KAAK;gBACpC;gBACA;YACJ,KAAK;gBACD,IAAIrC,cAAc;oBACduB,2BAA2Be,IAAI;gBACnC,OAAO;oBACHf,2BAA2Bc,KAAK;gBACpC;gBACA;YACJ,KAAK;YACL,KAAK;gBACDd,2BAA2Bc,KAAK;gBAChC;YACJ,KAAK;YACL,KAAK;gBACDd,2BAA2BgB,IAAI;gBAC/B;YACJ,KAAK;YACL,KAAK;gBACDvC,gBAAgB2B,aAAaG,OAAO9B;gBACpC;QACR;IACJ;IACA,+CAA+C;IAC/C,MAAMwC,oBAAoBC,IAAAA,yCAAmB,EAACC,8BAAc;IAC5D,MAAMC,yBAAyBC,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAInB,eAAe;IACpF,MAAMoB,sBAAsBF,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIlB,YAAY;IAC9E,0EAA0E;IAC1E,MAAMoB,sBAAsBP,oBAAoB;QAC5Cd,iBAAiBiB;QACjBhB,cAAcmB;QACd,GAAG/C,mBAAmB;IAC1B,IAAI;QACA2B;QACAC;QACA,GAAG5B,mBAAmB;IAC1B;IACA,MAAMiD,QAAQ;QACVC,YAAY;YACR7B,MAAM;QACV;QACAA,MAAM8B,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5F/C,KAAKgD,IAAAA,6BAAa,EAAChD,KAAKO,iBAAiBD;YACzC2C,MAAMhD,cAAc,SAAS;YAC7BiD,UAAU;YACV,GAAGnD,KAAK;QACZ,IAAI;YACAoD,aAAa;QACjB;QACAlD;QACAmB;QACAF;QACA,GAAGhB,gBAAgB;QACnB,GAAGwC,mBAAmB;IAC1B;IACAC,MAAM5B,IAAI,CAACS,SAAS,GAAG4B,IAAAA,gCAAgB,EAACC,IAAAA,8BAAc,EAACV,MAAM5B,IAAI,CAACS,SAAS,EAAEA;IAC7E,OAAOmB;AACX"}

package/lib-commonjs/components/Option/useOption.js

@@ -11,10 +11,8 @@ Object.defineProperty(exports, "useOption_unstable", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
-const _reactcontextselector = require("@fluentui/react-context-selector");
 const _reactaria = require("@fluentui/react-aria");
 const _reacticons = require("@fluentui/react-icons");
-const _ComboboxContext = require("../../contexts/ComboboxContext");
 const _ListboxContext = require("../../contexts/ListboxContext");
 function getTextString(text, children) {
     if (text !== undefined) {
@@ -55,16 +53,16 @@ const useOption_unstable = (props, ref)=>{
         optionText,
         optionValue
     ]);
-    const { controller: activeDescendantController } = (0, _reactaria.useActiveDescendantContext)();
     // context values
-    const multiselect = (0, _reactcontextselector.useContextSelector)(_ListboxContext.ListboxContext, (ctx)=>ctx.multiselect);
-    const registerOption = (0, _reactcontextselector.useContextSelector)(_ListboxContext.ListboxContext, (ctx)=>ctx.registerOption);
-    const selected = (0, _reactcontextselector.useContextSelector)(_ListboxContext.ListboxContext, (ctx)=>{
+    const { controller: activeDescendantController } = (0, _reactaria.useActiveDescendantContext)();
+    const multiselect = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.multiselect);
+    const registerOption = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.registerOption);
+    const selected = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>{
         const selectedOptions = ctx.selectedOptions;
         return !!optionValue && !!selectedOptions.find((o)=>o === optionValue);
     });
-    const selectOption = (0, _reactcontextselector.useContextSelector)(_ListboxContext.ListboxContext, (ctx)=>ctx.selectOption);
-    const setOpen = (0, _reactcontextselector.useContextSelector)(_ComboboxContext.ComboboxContext, (ctx)=>ctx.setOpen);
+    const selectOption = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.selectOption);
+    const onOptionClick = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.onOptionClick);
     // check icon
     let CheckIcon = /*#__PURE__*/ _react.createElement(_reacticons.CheckmarkFilled, null);
     if (multiselect) {
@@ -76,14 +74,10 @@ const useOption_unstable = (props, ref)=>{
             event.preventDefault();
             return;
         }
-        // clicked option should always become active option
         activeDescendantController.focus(id);
-        // close on option click for single-select options in a combobox
-        if (!multiselect) {
-            setOpen === null || setOpen === void 0 ? void 0 : setOpen(event, false);
-        }
         // handle selection change
         selectOption(event, optionData);
+        onOptionClick(event);
         (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
     };
     // register option data with context

package/lib-commonjs/components/Option/useOption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOption.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } from '../../contexts/ListboxContext';\nfunction getTextString(text, children) {\n    if (text !== undefined) {\n        return text;\n    }\n    let textString = '';\n    let hasNonStringChild = false;\n    React.Children.forEach(children, (child)=>{\n        if (typeof child === 'string') {\n            textString += child;\n        } else {\n            hasNonStringChild = true;\n        }\n    });\n    // warn if an Option has non-string children and no text prop\n    if (hasNonStringChild) {\n        // eslint-disable-next-line no-console\n        console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n    }\n    return textString;\n}\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */ export const useOption_unstable = (props, ref)=>{\n    const { children, disabled, text, value } = props;\n    const optionRef = React.useRef(null);\n    const optionText = getTextString(text, children);\n    const optionValue = value !== null && value !== void 0 ? value : optionText;\n    // use the id if provided, otherwise use a generated id\n    const id = useId('fluent-option', props.id);\n    // data used for context registration & events\n    const optionData = React.useMemo(()=>({\n            id,\n            disabled,\n            text: optionText,\n            value: optionValue\n        }), [\n        id,\n        disabled,\n        optionText,\n        optionValue\n    ]);\n    const { controller: activeDescendantController } = useActiveDescendantContext();\n    // context values\n    const multiselect = useContextSelector(ListboxContext, (ctx)=>ctx.multiselect);\n    const registerOption = useContextSelector(ListboxContext, (ctx)=>ctx.registerOption);\n    const selected = useContextSelector(ListboxContext, (ctx)=>{\n        const selectedOptions = ctx.selectedOptions;\n        return !!optionValue && !!selectedOptions.find((o)=>o === optionValue);\n    });\n    const selectOption = useContextSelector(ListboxContext, (ctx)=>ctx.selectOption);\n    const setOpen = useContextSelector(ComboboxContext, (ctx)=>ctx.setOpen);\n    // check icon\n    let CheckIcon = /*#__PURE__*/ React.createElement(CheckmarkFilled, null);\n    if (multiselect) {\n        CheckIcon = selected ? /*#__PURE__*/ React.createElement(Checkmark12Filled, null) : '';\n    }\n    const onClick = (event)=>{\n        var _props_onClick;\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n        // clicked option should always become active option\n        activeDescendantController.focus(id);\n        // close on option click for single-select options in a combobox\n        if (!multiselect) {\n            setOpen === null || setOpen === void 0 ? void 0 : setOpen(event, false);\n        }\n        // handle selection change\n        selectOption(event, optionData);\n        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);\n    };\n    // register option data with context\n    React.useEffect(()=>{\n        if (id && optionRef.current) {\n            return registerOption(optionData, optionRef.current);\n        }\n    }, [\n        id,\n        optionData,\n        registerOption\n    ]);\n    const semanticProps = multiselect ? {\n        role: 'menuitemcheckbox',\n        'aria-checked': selected\n    } : {\n        role: 'option',\n        'aria-selected': selected\n    };\n    return {\n        components: {\n            root: 'div',\n            checkIcon: 'span'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: useMergedRefs(ref, optionRef),\n            'aria-disabled': disabled ? 'true' : undefined,\n            id,\n            ...semanticProps,\n            ...props,\n            onClick\n        }), {\n            elementType: 'div'\n        }),\n        checkIcon: slot.optional(props.checkIcon, {\n            renderByDefault: true,\n            defaultProps: {\n                'aria-hidden': 'true',\n                children: CheckIcon\n            },\n            elementType: 'span'\n        }),\n        disabled,\n        multiselect,\n        selected,\n        // no longer used\n        focusVisible: false,\n        active: false\n    };\n};\n"],"names":["useOption_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","React","Children","forEach","child","console","warn","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","useId","optionData","useMemo","controller","activeDescendantController","useActiveDescendantContext","multiselect","useContextSelector","ListboxContext","ctx","registerOption","selected","selectedOptions","find","o","selectOption","setOpen","ComboboxContext","CheckIcon","createElement","CheckmarkFilled","Checkmark12Filled","onClick","event","_props_onClick","preventDefault","focus","call","useEffect","current","semanticProps","role","components","root","checkIcon","slot","always","getIntrinsicElementProps","useMergedRefs","elementType","optional","renderByDefault","defaultProps","focusVisible","active"],"mappings":"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"}
+{"version":3,"sources":["useOption.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { useListboxContext_unstable } from '../../contexts/ListboxContext';\nfunction getTextString(text, children) {\n    if (text !== undefined) {\n        return text;\n    }\n    let textString = '';\n    let hasNonStringChild = false;\n    React.Children.forEach(children, (child)=>{\n        if (typeof child === 'string') {\n            textString += child;\n        } else {\n            hasNonStringChild = true;\n        }\n    });\n    // warn if an Option has non-string children and no text prop\n    if (hasNonStringChild) {\n        // eslint-disable-next-line no-console\n        console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n    }\n    return textString;\n}\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */ export const useOption_unstable = (props, ref)=>{\n    const { children, disabled, text, value } = props;\n    const optionRef = React.useRef(null);\n    const optionText = getTextString(text, children);\n    const optionValue = value !== null && value !== void 0 ? value : optionText;\n    // use the id if provided, otherwise use a generated id\n    const id = useId('fluent-option', props.id);\n    // data used for context registration & events\n    const optionData = React.useMemo(()=>({\n            id,\n            disabled,\n            text: optionText,\n            value: optionValue\n        }), [\n        id,\n        disabled,\n        optionText,\n        optionValue\n    ]);\n    // context values\n    const { controller: activeDescendantController } = useActiveDescendantContext();\n    const multiselect = useListboxContext_unstable((ctx)=>ctx.multiselect);\n    const registerOption = useListboxContext_unstable((ctx)=>ctx.registerOption);\n    const selected = useListboxContext_unstable((ctx)=>{\n        const selectedOptions = ctx.selectedOptions;\n        return !!optionValue && !!selectedOptions.find((o)=>o === optionValue);\n    });\n    const selectOption = useListboxContext_unstable((ctx)=>ctx.selectOption);\n    const onOptionClick = useListboxContext_unstable((ctx)=>ctx.onOptionClick);\n    // check icon\n    let CheckIcon = /*#__PURE__*/ React.createElement(CheckmarkFilled, null);\n    if (multiselect) {\n        CheckIcon = selected ? /*#__PURE__*/ React.createElement(Checkmark12Filled, null) : '';\n    }\n    const onClick = (event)=>{\n        var _props_onClick;\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n        activeDescendantController.focus(id);\n        // handle selection change\n        selectOption(event, optionData);\n        onOptionClick(event);\n        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);\n    };\n    // register option data with context\n    React.useEffect(()=>{\n        if (id && optionRef.current) {\n            return registerOption(optionData, optionRef.current);\n        }\n    }, [\n        id,\n        optionData,\n        registerOption\n    ]);\n    const semanticProps = multiselect ? {\n        role: 'menuitemcheckbox',\n        'aria-checked': selected\n    } : {\n        role: 'option',\n        'aria-selected': selected\n    };\n    return {\n        components: {\n            root: 'div',\n            checkIcon: 'span'\n        },\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n            // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n            ref: useMergedRefs(ref, optionRef),\n            'aria-disabled': disabled ? 'true' : undefined,\n            id,\n            ...semanticProps,\n            ...props,\n            onClick\n        }), {\n            elementType: 'div'\n        }),\n        checkIcon: slot.optional(props.checkIcon, {\n            renderByDefault: true,\n            defaultProps: {\n                'aria-hidden': 'true',\n                children: CheckIcon\n            },\n            elementType: 'span'\n        }),\n        disabled,\n        multiselect,\n        selected,\n        // no longer used\n        focusVisible: false,\n        active: false\n    };\n};\n"],"names":["useOption_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","React","Children","forEach","child","console","warn","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","useId","optionData","useMemo","controller","activeDescendantController","useActiveDescendantContext","multiselect","useListboxContext_unstable","ctx","registerOption","selected","selectedOptions","find","o","selectOption","onOptionClick","CheckIcon","createElement","CheckmarkFilled","Checkmark12Filled","onClick","event","_props_onClick","preventDefault","focus","call","useEffect","current","semanticProps","role","components","root","checkIcon","slot","always","getIntrinsicElementProps","useMergedRefs","elementType","optional","renderByDefault","defaultProps","focusVisible","active"],"mappings":"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"}

package/lib-commonjs/contexts/ComboboxContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ComboboxContext.js"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ComboboxContext = createContext({\n    activeOption: undefined,\n    appearance: 'outline',\n    focusVisible: false,\n    open: false,\n    registerOption () {\n        return ()=>undefined;\n    },\n    selectedOptions: [],\n    selectOption () {\n    // noop\n    },\n    setActiveOption () {\n    // noop\n    },\n    setOpen () {\n    // noop\n    },\n    size: 'medium'\n});\nexport const ComboboxProvider = ComboboxContext.Provider;\n"],"names":["ComboboxContext","ComboboxProvider","createContext","activeOption","undefined","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","Provider"],"mappings":";;;;;;;;;;;IAEaA,eAAe;eAAfA;;IAoBAC,gBAAgB;eAAhBA;;;sCAtBiB;AAEvB,MAAMD,kBAAkBE,IAAAA,mCAAa,EAAC;IACzCC,cAAcC;IACdC,YAAY;IACZC,cAAc;IACdC,MAAM;IACNC;QACI,OAAO,IAAIJ;IACf;IACAK,iBAAiB,EAAE;IACnBC;IACA,OAAO;IACP;IACAC;IACA,OAAO;IACP;IACAC;IACA,OAAO;IACP;IACAC,MAAM;AACV;AACO,MAAMZ,mBAAmBD,gBAAgBc,QAAQ"}
+{"version":3,"sources":["ComboboxContext.js"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\n/**\n * @deprecated - use ListboxContext instead\n * @see ListboxContext\n */ // eslint-disable-next-line @fluentui/no-context-default-value\nexport const ComboboxContext = createContext({\n    activeOption: undefined,\n    appearance: 'outline',\n    focusVisible: false,\n    open: false,\n    registerOption () {\n        return ()=>undefined;\n    },\n    selectedOptions: [],\n    selectOption () {\n    // noop\n    },\n    setActiveOption () {\n    // noop\n    },\n    setOpen () {\n    // noop\n    },\n    size: 'medium'\n});\n/**\n * @deprecated - render ListboxProvider instead\n * @see ListboxProvider\n * @see useListboxContext_unstable\n */ // eslint-disable-next-line deprecation/deprecation\nexport const ComboboxProvider = ComboboxContext.Provider;\n"],"names":["ComboboxContext","ComboboxProvider","createContext","activeOption","undefined","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","Provider"],"mappings":";;;;;;;;;;;IAKaA,eAAe;eAAfA;;IAyBAC,gBAAgB;eAAhBA;;;sCA9BiB;AAKvB,MAAMD,kBAAkBE,IAAAA,mCAAa,EAAC;IACzCC,cAAcC;IACdC,YAAY;IACZC,cAAc;IACdC,MAAM;IACNC;QACI,OAAO,IAAIJ;IACf;IACAK,iBAAiB,EAAE;IACnBC;IACA,OAAO;IACP;IACAC;IACA,OAAO;IACP;IACAC;IACA,OAAO;IACP;IACAC,MAAM;AACV;AAMO,MAAMZ,mBAAmBD,gBAAgBc,QAAQ"}