@fluentui/react-combobox 9.6.1 → 9.7.1

package/CHANGELOG.md

@@ -1,12 +1,46 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Wed, 17 Jan 2024 16:13:09 GMT and should not be manually modified.
+This log was last generated on Tue, 23 Jan 2024 15:06:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.7.1)
+
+Tue, 23 Jan 2024 15:06:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.7.0..@fluentui/react-combobox_v9.7.1)
+
+### Patches
+
+- fix: aria-multiselectable is unnecessary with menu roles ([PR #30225](https://github.com/microsoft/fluentui/pull/30225) by sarah.higley@microsoft.com)
+- fix(Dropdown): add `type=button` to `clearButton` ([PR #30362](https://github.com/microsoft/fluentui/pull/30362) by olfedias@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.50 ([PR #30359](https://github.com/microsoft/fluentui/pull/30359) by beachball)
+- Bump @fluentui/react-field to v9.1.51 ([PR #30359](https://github.com/microsoft/fluentui/pull/30359) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.28 ([PR #30359](https://github.com/microsoft/fluentui/pull/30359) by beachball)
+- Bump @fluentui/react-portal to v9.4.11 ([PR #30359](https://github.com/microsoft/fluentui/pull/30359) by beachball)
+- Bump @fluentui/react-positioning to v9.12.5 ([PR #30359](https://github.com/microsoft/fluentui/pull/30359) by beachball)
+- Bump @fluentui/react-tabster to v9.17.4 ([PR #30359](https://github.com/microsoft/fluentui/pull/30359) by beachball)
+- Bump @fluentui/react-utilities to v9.17.0 ([PR #30359](https://github.com/microsoft/fluentui/pull/30359) by beachball)
+
+## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.7.0)
+
+Thu, 18 Jan 2024 14:25:01 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.6.1..@fluentui/react-combobox_v9.7.0)
+
+### Minor changes
+
+- feat: add `useComboboxFilter()` hook ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by olfedias@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.49 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
+- Bump @fluentui/react-field to v9.1.50 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.27 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
+- Bump @fluentui/react-portal to v9.4.10 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
+- Bump @fluentui/react-positioning to v9.12.4 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.14.0 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
+- Bump @fluentui/react-tabster to v9.17.3 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
+- Bump @fluentui/react-utilities to v9.16.1 ([PR #30046](https://github.com/microsoft/fluentui/pull/30046) by beachball)
+
 ## [9.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.6.1)
 
-Wed, 17 Jan 2024 16:13:09 GMT 
+Wed, 17 Jan 2024 16:18:49 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.6.0..@fluentui/react-combobox_v9.6.1)
 
 ### Patches

package/dist/index.d.ts

@@ -396,6 +396,27 @@ export declare const useCombobox_unstable: (props: ComboboxProps, ref: React_2.R
 
 export declare function useComboboxContextValues(state: ComboboxBaseState): ComboboxBaseContextValues;
 
+export declare function useComboboxFilter<T extends {
+    children: React_2.ReactNode;
+    value: string;
+} | string>(query: string, options: T[], config: UseComboboxFilterConfig<T>): JSX.Element[];
+
+declare type UseComboboxFilterConfig<T extends {
+    children: React_2.ReactNode;
+    value: string;
+} | string> = {
+    /** Provides a custom filter for the option. */
+    filter?: (optionText: string, query: string) => boolean;
+    /** Provides a custom message to display when there are no options. */
+    noOptionsMessage?: React_2.ReactNode;
+    /** Provides a way to map an option object to a React key. By default, "value" is used. */
+    optionToReactKey?: (option: T) => string;
+    /** Provides a way to map an option object to a text used for search. By default, "value" is used. */
+    optionToText?: (option: T) => string;
+    /** Provides a custom render for the option. */
+    renderOption?: (option: T) => JSX.Element;
+};
+
 /**
  * Apply styling to the Combobox slots based on the state
  */

package/lib/components/Dropdown/useDropdown.js

@@ -76,7 +76,8 @@ import { useButtonTriggerSlot } from './useButtonTriggerSlot';
                 'aria-label': 'Clear selection',
                 children: /*#__PURE__*/ React.createElement(DismissIcon, null),
                 // Safari doesn't allow to focus an element with this
-                tabIndex: 0
+                tabIndex: 0,
+                type: 'button'
             },
             elementType: 'button',
             renderByDefault: true

package/lib/components/Dropdown/useDropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useMergedRefs,\n  slot,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\n\n/**\n * Create the state required to render Dropdown.\n *\n * The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n *\n * @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */\nexport const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLButtonElement>): DropdownState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsSize: true });\n\n  const baseState = useComboboxBaseState(props);\n  const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions } = baseState;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children'],\n  });\n\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const listbox = useListboxSlot(props.listbox, comboboxPopupRef, {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\n  });\n\n  const trigger = useButtonTriggerSlot(props.button ?? {}, useMergedRefs(triggerRef, ref), {\n    state: baseState,\n    defaultProps: {\n      type: 'button',\n      tabIndex: 0,\n      children: baseState.value || props.placeholder,\n      ...triggerNativeProps,\n    },\n  });\n\n  const rootSlot = slot.always(props.root, {\n    defaultProps: {\n      'aria-owns': !props.inlinePopup && open ? listbox?.id : undefined,\n      children: props.children,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const showClearButton = selectedOptions.length > 0 && clearable && !multiselect;\n  const state: DropdownState = {\n    components: { root: 'div', button: 'button', clearButton: 'button', expandIcon: 'span', listbox: Listbox },\n    root: rootSlot,\n    button: trigger,\n    listbox: open || hasFocus ? listbox : undefined,\n    clearButton: slot.optional(props.clearButton, {\n      defaultProps: {\n        'aria-label': 'Clear selection',\n        children: <DismissIcon />,\n        // Safari doesn't allow to focus an element with this\n        tabIndex: 0,\n      },\n      elementType: 'button',\n      renderByDefault: true,\n    }),\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n      elementType: 'span',\n    }),\n    placeholderVisible: !baseState.value && !!props.placeholder,\n    showClearButton,\n    ...baseState,\n  };\n\n  const onClearButtonClick = useEventCallback(\n    mergeCallbacks(state.clearButton?.onClick, (ev: React.MouseEvent<HTMLButtonElement>) => {\n      clearSelection(ev);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.clearButton) {\n    state.clearButton.onClick = onClearButtonClick;\n  }\n\n  // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n  if (multiselect) {\n    state.clearButton = undefined;\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n    React.useEffect(() => {\n      if (clearable && multiselect) {\n        // eslint-disable-next-line no-console\n        console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n      }\n    }, [clearable, multiselect]);\n  }\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","getPartitionedNativeProps","mergeCallbacks","useMergedRefs","slot","useEventCallback","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useButtonTriggerSlot","useDropdown_unstable","props","ref","state","supportsLabelFor","supportsSize","baseState","clearable","clearSelection","hasFocus","multiselect","open","selectedOptions","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","triggerRef","useRef","listbox","defaultProps","children","trigger","button","type","tabIndex","value","placeholder","rootSlot","always","inlinePopup","id","undefined","elementType","showClearButton","length","components","clearButton","expandIcon","optional","renderByDefault","placeholderVisible","onClearButtonClick","onClick","ev","current","focus","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}
+{"version":3,"sources":["useDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useMergedRefs,\n  slot,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\n\n/**\n * Create the state required to render Dropdown.\n *\n * The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n *\n * @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */\nexport const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLButtonElement>): DropdownState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsSize: true });\n\n  const baseState = useComboboxBaseState(props);\n  const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions } = baseState;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children'],\n  });\n\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const listbox = useListboxSlot(props.listbox, comboboxPopupRef, {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\n  });\n\n  const trigger = useButtonTriggerSlot(props.button ?? {}, useMergedRefs(triggerRef, ref), {\n    state: baseState,\n    defaultProps: {\n      type: 'button',\n      tabIndex: 0,\n      children: baseState.value || props.placeholder,\n      ...triggerNativeProps,\n    },\n  });\n\n  const rootSlot = slot.always(props.root, {\n    defaultProps: {\n      'aria-owns': !props.inlinePopup && open ? listbox?.id : undefined,\n      children: props.children,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const showClearButton = selectedOptions.length > 0 && clearable && !multiselect;\n  const state: DropdownState = {\n    components: { root: 'div', button: 'button', clearButton: 'button', expandIcon: 'span', listbox: Listbox },\n    root: rootSlot,\n    button: trigger,\n    listbox: open || hasFocus ? listbox : undefined,\n    clearButton: slot.optional(props.clearButton, {\n      defaultProps: {\n        'aria-label': 'Clear selection',\n        children: <DismissIcon />,\n        // Safari doesn't allow to focus an element with this\n        tabIndex: 0,\n        type: 'button',\n      },\n      elementType: 'button',\n      renderByDefault: true,\n    }),\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n      elementType: 'span',\n    }),\n    placeholderVisible: !baseState.value && !!props.placeholder,\n    showClearButton,\n    ...baseState,\n  };\n\n  const onClearButtonClick = useEventCallback(\n    mergeCallbacks(state.clearButton?.onClick, (ev: React.MouseEvent<HTMLButtonElement>) => {\n      clearSelection(ev);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.clearButton) {\n    state.clearButton.onClick = onClearButtonClick;\n  }\n\n  // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n  if (multiselect) {\n    state.clearButton = undefined;\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n    React.useEffect(() => {\n      if (clearable && multiselect) {\n        // eslint-disable-next-line no-console\n        console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n      }\n    }, [clearable, multiselect]);\n  }\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","getPartitionedNativeProps","mergeCallbacks","useMergedRefs","slot","useEventCallback","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useButtonTriggerSlot","useDropdown_unstable","props","ref","state","supportsLabelFor","supportsSize","baseState","clearable","clearSelection","hasFocus","multiselect","open","selectedOptions","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","triggerRef","useRef","listbox","defaultProps","children","trigger","button","type","tabIndex","value","placeholder","rootSlot","always","inlinePopup","id","undefined","elementType","showClearButton","length","components","clearButton","expandIcon","optional","renderByDefault","placeholderVisible","onClearButtonClick","onClick","ev","current","focus","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}

package/lib/components/Listbox/useListbox.js

@@ -80,7 +80,6 @@ import { ComboboxContext } from '../../contexts/ComboboxContext';
             ref: ref,
             role: multiselect ? 'menu' : 'listbox',
             'aria-activedescendant': hasComboboxContext ? undefined : activeOption === null || activeOption === void 0 ? void 0 : activeOption.id,
-            'aria-multiselectable': multiselect,
             tabIndex: 0,
             ...props
         }), {

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

@@ -1 +1 @@
-{"version":3,"sources":["useListbox.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useScrollOptionsIntoView } from '../../utils/useScrollOptionsIntoView';\nimport { useSelection } from '../../utils/useSelection';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\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 */\nexport const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {\n  const { multiselect } = props;\n  const optionCollection = useOptionCollection();\n  const { getCount, getOptionAtIndex, getIndexOfId } = optionCollection;\n\n  const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n  const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\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  const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    const action = getDropdownActionFromKey(event, { open: true });\n    const maxIndex = getCount() - 1;\n    const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n    let newIndex = activeIndex;\n\n    switch (action) {\n      case 'Select':\n      case 'CloseSelect':\n        activeOption && selectOption(event, activeOption);\n        break;\n      default:\n        newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n    }\n\n    if (newIndex !== activeIndex) {\n      // prevent default page scroll/keyboard action if the index changed\n      event.preventDefault();\n      setActiveOption(getOptionAtIndex(newIndex));\n      setFocusVisible(true);\n    }\n  };\n\n  const onMouseOver = (event: React.MouseEvent<HTMLElement>) => {\n    setFocusVisible(false);\n  };\n\n  // get state from parent combobox, if it exists\n  const hasComboboxContext = useHasParentContext(ComboboxContext);\n  const comboboxActiveOption = useContextSelector(ComboboxContext, ctx => ctx.activeOption);\n  const comboboxFocusVisible = useContextSelector(ComboboxContext, ctx => ctx.focusVisible);\n  const comboboxSelectedOptions = useContextSelector(ComboboxContext, ctx => ctx.selectedOptions);\n  const comboboxSelectOption = useContextSelector(ComboboxContext, ctx => ctx.selectOption);\n  const comboboxSetActiveOption = useContextSelector(ComboboxContext, ctx => ctx.setActiveOption);\n\n  // without a parent combobox context, provide values directly from Listbox\n  const optionContextValues = hasComboboxContext\n    ? {\n        activeOption: comboboxActiveOption,\n        focusVisible: comboboxFocusVisible,\n        selectedOptions: comboboxSelectedOptions,\n        selectOption: comboboxSelectOption,\n        setActiveOption: comboboxSetActiveOption,\n      }\n    : {\n        activeOption,\n        focusVisible,\n        selectedOptions,\n        selectOption,\n        setActiveOption,\n      };\n\n  const state: ListboxState = {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      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: ref as React.Ref<HTMLDivElement>,\n        role: multiselect ? 'menu' : 'listbox',\n        'aria-activedescendant': hasComboboxContext ? undefined : activeOption?.id,\n        'aria-multiselectable': multiselect,\n        tabIndex: 0,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    multiselect,\n    clearSelection,\n    ...optionCollection,\n    ...optionContextValues,\n  };\n\n  const scrollContainerRef = useScrollOptionsIntoView(state);\n  state.root.ref = useMergedRefs(state.root.ref, scrollContainerRef);\n\n  state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n  state.root.onMouseOver = useEventCallback(mergeCallbacks(state.root.onMouseOver, onMouseOver));\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","useEventCallback","useMergedRefs","slot","useContextSelector","useHasParentContext","getDropdownActionFromKey","getIndexFromAction","useOptionCollection","useScrollOptionsIntoView","useSelection","ComboboxContext","useListbox_unstable","props","ref","multiselect","optionCollection","getCount","getOptionAtIndex","getIndexOfId","clearSelection","selectedOptions","selectOption","activeOption","setActiveOption","useState","focusVisible","setFocusVisible","onKeyDown","event","action","open","maxIndex","activeIndex","id","newIndex","preventDefault","onMouseOver","hasComboboxContext","comboboxActiveOption","ctx","comboboxFocusVisible","comboboxSelectedOptions","comboboxSelectOption","comboboxSetActiveOption","optionContextValues","state","components","root","always","role","undefined","tabIndex","elementType","scrollContainerRef"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,cAAc,EACdC,gBAAgB,EAChBC,aAAa,EACbC,IAAI,QACC,4BAA4B;AACnC,SAASC,kBAAkB,EAAEC,mBAAmB,QAAQ,mCAAmC;AAC3F,SAASC,wBAAwB,EAAEC,kBAAkB,QAAQ,iCAAiC;AAE9F,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,wBAAwB,QAAQ,uCAAuC;AAChF,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,eAAe,QAAQ,iCAAiC;AAGjE;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EAAEC,WAAW,EAAE,GAAGF;IACxB,MAAMG,mBAAmBR;IACzB,MAAM,EAAES,QAAQ,EAAEC,gBAAgB,EAAEC,YAAY,EAAE,GAAGH;IAErD,MAAM,EAAEI,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAE,GAAGZ,aAAaG;IAEvE,MAAM,CAACU,cAAcC,gBAAgB,GAAG1B,MAAM2B,QAAQ;IAEtD,uDAAuD;IACvD,yFAAyF;IACzF,MAAM,CAACC,cAAcC,gBAAgB,GAAG7B,MAAM2B,QAAQ,CAAC;IAEvD,MAAMG,YAAY,CAACC;QACjB,MAAMC,SAASxB,yBAAyBuB,OAAO;YAAEE,MAAM;QAAK;QAC5D,MAAMC,WAAWf,aAAa;QAC9B,MAAMgB,cAAcV,eAAeJ,aAAaI,aAAaW,EAAE,IAAI,CAAC;QACpE,IAAIC,WAAWF;QAEf,OAAQH;YACN,KAAK;YACL,KAAK;gBACHP,gBAAgBD,aAAaO,OAAON;gBACpC;YACF;gBACEY,WAAW5B,mBAAmBuB,QAAQG,aAAaD;QACvD;QAEA,IAAIG,aAAaF,aAAa;YAC5B,mEAAmE;YACnEJ,MAAMO,cAAc;YACpBZ,gBAAgBN,iBAAiBiB;YACjCR,gBAAgB;QAClB;IACF;IAEA,MAAMU,cAAc,CAACR;QACnBF,gBAAgB;IAClB;IAEA,+CAA+C;IAC/C,MAAMW,qBAAqBjC,oBAAoBM;IAC/C,MAAM4B,uBAAuBnC,mBAAmBO,iBAAiB6B,CAAAA,MAAOA,IAAIjB,YAAY;IACxF,MAAMkB,uBAAuBrC,mBAAmBO,iBAAiB6B,CAAAA,MAAOA,IAAId,YAAY;IACxF,MAAMgB,0BAA0BtC,mBAAmBO,iBAAiB6B,CAAAA,MAAOA,IAAInB,eAAe;IAC9F,MAAMsB,uBAAuBvC,mBAAmBO,iBAAiB6B,CAAAA,MAAOA,IAAIlB,YAAY;IACxF,MAAMsB,0BAA0BxC,mBAAmBO,iBAAiB6B,CAAAA,MAAOA,IAAIhB,eAAe;IAE9F,0EAA0E;IAC1E,MAAMqB,sBAAsBP,qBACxB;QACEf,cAAcgB;QACdb,cAAce;QACdpB,iBAAiBqB;QACjBpB,cAAcqB;QACdnB,iBAAiBoB;IACnB,IACA;QACErB;QACAG;QACAL;QACAC;QACAE;IACF;IAEJ,MAAMsB,QAAsB;QAC1BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAM7C,KAAK8C,MAAM,CACflD,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5Fe,KAAKA;YACLoC,MAAMnC,cAAc,SAAS;YAC7B,yBAAyBuB,qBAAqBa,YAAY5B,yBAAAA,mCAAAA,aAAcW,EAAE;YAC1E,wBAAwBnB;YACxBqC,UAAU;YACV,GAAGvC,KAAK;QACV,IACA;YAAEwC,aAAa;QAAM;QAEvBtC;QACAK;QACA,GAAGJ,gBAAgB;QACnB,GAAG6B,mBAAmB;IACxB;IAEA,MAAMS,qBAAqB7C,yBAAyBqC;IACpDA,MAAME,IAAI,CAAClC,GAAG,GAAGZ,cAAc4C,MAAME,IAAI,CAAClC,GAAG,EAAEwC;IAE/CR,MAAME,IAAI,CAACpB,SAAS,GAAG3B,iBAAiBD,eAAe8C,MAAME,IAAI,CAACpB,SAAS,EAAEA;IAC7EkB,MAAME,IAAI,CAACX,WAAW,GAAGpC,iBAAiBD,eAAe8C,MAAME,IAAI,CAACX,WAAW,EAAEA;IAEjF,OAAOS;AACT,EAAE"}
+{"version":3,"sources":["useListbox.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useScrollOptionsIntoView } from '../../utils/useScrollOptionsIntoView';\nimport { useSelection } from '../../utils/useSelection';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\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 */\nexport const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {\n  const { multiselect } = props;\n  const optionCollection = useOptionCollection();\n  const { getCount, getOptionAtIndex, getIndexOfId } = optionCollection;\n\n  const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n  const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\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  const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    const action = getDropdownActionFromKey(event, { open: true });\n    const maxIndex = getCount() - 1;\n    const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n    let newIndex = activeIndex;\n\n    switch (action) {\n      case 'Select':\n      case 'CloseSelect':\n        activeOption && selectOption(event, activeOption);\n        break;\n      default:\n        newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n    }\n\n    if (newIndex !== activeIndex) {\n      // prevent default page scroll/keyboard action if the index changed\n      event.preventDefault();\n      setActiveOption(getOptionAtIndex(newIndex));\n      setFocusVisible(true);\n    }\n  };\n\n  const onMouseOver = (event: React.MouseEvent<HTMLElement>) => {\n    setFocusVisible(false);\n  };\n\n  // get state from parent combobox, if it exists\n  const hasComboboxContext = useHasParentContext(ComboboxContext);\n  const comboboxActiveOption = useContextSelector(ComboboxContext, ctx => ctx.activeOption);\n  const comboboxFocusVisible = useContextSelector(ComboboxContext, ctx => ctx.focusVisible);\n  const comboboxSelectedOptions = useContextSelector(ComboboxContext, ctx => ctx.selectedOptions);\n  const comboboxSelectOption = useContextSelector(ComboboxContext, ctx => ctx.selectOption);\n  const comboboxSetActiveOption = useContextSelector(ComboboxContext, ctx => ctx.setActiveOption);\n\n  // without a parent combobox context, provide values directly from Listbox\n  const optionContextValues = hasComboboxContext\n    ? {\n        activeOption: comboboxActiveOption,\n        focusVisible: comboboxFocusVisible,\n        selectedOptions: comboboxSelectedOptions,\n        selectOption: comboboxSelectOption,\n        setActiveOption: comboboxSetActiveOption,\n      }\n    : {\n        activeOption,\n        focusVisible,\n        selectedOptions,\n        selectOption,\n        setActiveOption,\n      };\n\n  const state: ListboxState = {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      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: ref as React.Ref<HTMLDivElement>,\n        role: multiselect ? 'menu' : 'listbox',\n        'aria-activedescendant': hasComboboxContext ? undefined : activeOption?.id,\n        tabIndex: 0,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    multiselect,\n    clearSelection,\n    ...optionCollection,\n    ...optionContextValues,\n  };\n\n  const scrollContainerRef = useScrollOptionsIntoView(state);\n  state.root.ref = useMergedRefs(state.root.ref, scrollContainerRef);\n\n  state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n  state.root.onMouseOver = useEventCallback(mergeCallbacks(state.root.onMouseOver, onMouseOver));\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","useEventCallback","useMergedRefs","slot","useContextSelector","useHasParentContext","getDropdownActionFromKey","getIndexFromAction","useOptionCollection","useScrollOptionsIntoView","useSelection","ComboboxContext","useListbox_unstable","props","ref","multiselect","optionCollection","getCount","getOptionAtIndex","getIndexOfId","clearSelection","selectedOptions","selectOption","activeOption","setActiveOption","useState","focusVisible","setFocusVisible","onKeyDown","event","action","open","maxIndex","activeIndex","id","newIndex","preventDefault","onMouseOver","hasComboboxContext","comboboxActiveOption","ctx","comboboxFocusVisible","comboboxSelectedOptions","comboboxSelectOption","comboboxSetActiveOption","optionContextValues","state","components","root","always","role","undefined","tabIndex","elementType","scrollContainerRef"],"mappings":"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"}

package/lib/hooks/useComboboxFilter.js

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { Option } from '../Option';
+function defaultFilter(optionText, query) {
+    if (query === '') {
+        return true;
+    }
+    return optionText.toLowerCase().includes(query.toLowerCase());
+}
+function defaultToString(option) {
+    return typeof option === 'string' ? option : option.value;
+}
+export function useComboboxFilter(query, options, config) {
+    const { filter = defaultFilter, noOptionsMessage = "We couldn't find any matches.", optionToReactKey = defaultToString, optionToText = defaultToString, renderOption = (option)=>{
+        if (typeof option === 'string') {
+            return /*#__PURE__*/ React.createElement(Option, {
+                key: option
+            }, option);
+        }
+        return /*#__PURE__*/ React.createElement(Option, {
+            ...option,
+            key: optionToReactKey(option),
+            text: optionToText(option),
+            value: option.value
+        }, option.children);
+    } } = config;
+    const filteredOptions = React.useMemo(()=>{
+        const searchValue = query.trim();
+        return options.filter((option)=>filter(optionToText(option), searchValue));
+    }, [
+        options,
+        optionToText,
+        filter,
+        query
+    ]);
+    if (filteredOptions.length === 0) {
+        return [
+            /*#__PURE__*/ React.createElement(Option, {
+                "aria-disabled": "true",
+                key: "no-results",
+                text: ""
+            }, noOptionsMessage)
+        ];
+    }
+    return filteredOptions.map((option)=>renderOption(option));
+}

package/lib/hooks/useComboboxFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useComboboxFilter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Option } from '../Option';\n\ntype UseComboboxFilterConfig<T extends { children: React.ReactNode; value: string } | string> = {\n  /** Provides a custom filter for the option. */\n  filter?: (optionText: string, query: string) => boolean;\n\n  /** Provides a custom message to display when there are no options. */\n  noOptionsMessage?: React.ReactNode;\n\n  /** Provides a way to map an option object to a React key. By default, \"value\" is used. */\n  optionToReactKey?: (option: T) => string;\n\n  /** Provides a way to map an option object to a text used for search. By default, \"value\" is used. */\n  optionToText?: (option: T) => string;\n\n  /** Provides a custom render for the option. */\n  renderOption?: (option: T) => JSX.Element;\n};\n\nfunction defaultFilter(optionText: string, query: string) {\n  if (query === '') {\n    return true;\n  }\n\n  return optionText.toLowerCase().includes(query.toLowerCase());\n}\n\nfunction defaultToString(option: string | { value: string }) {\n  return typeof option === 'string' ? option : option.value;\n}\n\nexport function useComboboxFilter<T extends { children: React.ReactNode; value: string } | string>(\n  query: string,\n  options: T[],\n  config: UseComboboxFilterConfig<T>,\n) {\n  const {\n    filter = defaultFilter,\n    noOptionsMessage = \"We couldn't find any matches.\",\n    optionToReactKey = defaultToString,\n    optionToText = defaultToString,\n\n    renderOption = (option: T) => {\n      if (typeof option === 'string') {\n        return <Option key={option}>{option}</Option>;\n      }\n\n      return (\n        <Option {...option} key={optionToReactKey(option)} text={optionToText(option)} value={option.value}>\n          {option.children}\n        </Option>\n      );\n    },\n  } = config;\n\n  const filteredOptions = React.useMemo(() => {\n    const searchValue = query.trim();\n\n    return options.filter(option => filter(optionToText(option), searchValue));\n  }, [options, optionToText, filter, query]);\n\n  if (filteredOptions.length === 0) {\n    return [\n      <Option aria-disabled=\"true\" key=\"no-results\" text=\"\">\n        {noOptionsMessage}\n      </Option>,\n    ];\n  }\n\n  return filteredOptions.map(option => renderOption(option));\n}\n"],"names":["React","Option","defaultFilter","optionText","query","toLowerCase","includes","defaultToString","option","value","useComboboxFilter","options","config","filter","noOptionsMessage","optionToReactKey","optionToText","renderOption","key","text","children","filteredOptions","useMemo","searchValue","trim","length","aria-disabled","map"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,YAAY;AAmBnC,SAASC,cAAcC,UAAkB,EAAEC,KAAa;IACtD,IAAIA,UAAU,IAAI;QAChB,OAAO;IACT;IAEA,OAAOD,WAAWE,WAAW,GAAGC,QAAQ,CAACF,MAAMC,WAAW;AAC5D;AAEA,SAASE,gBAAgBC,MAAkC;IACzD,OAAO,OAAOA,WAAW,WAAWA,SAASA,OAAOC,KAAK;AAC3D;AAEA,OAAO,SAASC,kBACdN,KAAa,EACbO,OAAY,EACZC,MAAkC;IAElC,MAAM,EACJC,SAASX,aAAa,EACtBY,mBAAmB,+BAA+B,EAClDC,mBAAmBR,eAAe,EAClCS,eAAeT,eAAe,EAE9BU,eAAe,CAACT;QACd,IAAI,OAAOA,WAAW,UAAU;YAC9B,qBAAO,oBAACP;gBAAOiB,KAAKV;eAASA;QAC/B;QAEA,qBACE,oBAACP;YAAQ,GAAGO,MAAM;YAAEU,KAAKH,iBAAiBP;YAASW,MAAMH,aAAaR;YAASC,OAAOD,OAAOC,KAAK;WAC/FD,OAAOY,QAAQ;IAGtB,CAAC,EACF,GAAGR;IAEJ,MAAMS,kBAAkBrB,MAAMsB,OAAO,CAAC;QACpC,MAAMC,cAAcnB,MAAMoB,IAAI;QAE9B,OAAOb,QAAQE,MAAM,CAACL,CAAAA,SAAUK,OAAOG,aAAaR,SAASe;IAC/D,GAAG;QAACZ;QAASK;QAAcH;QAAQT;KAAM;IAEzC,IAAIiB,gBAAgBI,MAAM,KAAK,GAAG;QAChC,OAAO;0BACL,oBAACxB;gBAAOyB,iBAAc;gBAAOR,KAAI;gBAAaC,MAAK;eAChDL;SAEJ;IACH;IAEA,OAAOO,gBAAgBM,GAAG,CAACnB,CAAAA,SAAUS,aAAaT;AACpD"}

package/lib/index.js

@@ -7,3 +7,4 @@ export { Option, optionClassNames, renderOption_unstable, useOptionStyles_unstab
 export { Combobox, comboboxClassNames, renderCombobox_unstable, useComboboxStyles_unstable, useCombobox_unstable } from './Combobox';
 export { Dropdown, dropdownClassNames, renderDropdown_unstable, useDropdownStyles_unstable, useDropdown_unstable } from './Dropdown';
 export { OptionGroup, optionGroupClassNames, renderOptionGroup_unstable, useOptionGroupStyles_unstable, useOptionGroup_unstable } from './OptionGroup';
+export { useComboboxFilter } from './hooks/useComboboxFilter';

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"],"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"],"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"}
+{"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"}

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

@@ -79,7 +79,8 @@ const useDropdown_unstable = (props, ref)=>{
                 'aria-label': 'Clear selection',
                 children: /*#__PURE__*/ _react.createElement(_reacticons.DismissRegular, null),
                 // Safari doesn't allow to focus an element with this
-                tabIndex: 0
+                tabIndex: 0,
+                type: 'button'
             },
             elementType: 'button',
             renderByDefault: true

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

@@ -1 +1 @@
-{"version":3,"sources":["useDropdown.js"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, useMergedRefs, slot, useEventCallback } from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\n/**\n * Create the state required to render Dropdown.\n *\n * The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n *\n * @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */ export const useDropdown_unstable = (props, ref)=>{\n    var _state_clearButton;\n    // Merge props from surrounding <Field>, if any\n    props = useFieldControlProps_unstable(props, {\n        supportsLabelFor: true,\n        supportsSize: true\n    });\n    const baseState = useComboboxBaseState(props);\n    const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions } = baseState;\n    const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n        props,\n        primarySlotTagName: 'button',\n        excludedPropNames: [\n            'children'\n        ]\n    });\n    const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n    const triggerRef = React.useRef(null);\n    const listbox = useListboxSlot(props.listbox, comboboxPopupRef, {\n        state: baseState,\n        triggerRef,\n        defaultProps: {\n            children: props.children\n        }\n    });\n    var _props_button;\n    const trigger = useButtonTriggerSlot((_props_button = props.button) !== null && _props_button !== void 0 ? _props_button : {}, useMergedRefs(triggerRef, ref), {\n        state: baseState,\n        defaultProps: {\n            type: 'button',\n            tabIndex: 0,\n            children: baseState.value || props.placeholder,\n            ...triggerNativeProps\n        }\n    });\n    const rootSlot = slot.always(props.root, {\n        defaultProps: {\n            'aria-owns': !props.inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,\n            children: props.children,\n            ...rootNativeProps\n        },\n        elementType: 'div'\n    });\n    rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n    const showClearButton = selectedOptions.length > 0 && clearable && !multiselect;\n    const state = {\n        components: {\n            root: 'div',\n            button: 'button',\n            clearButton: 'button',\n            expandIcon: 'span',\n            listbox: Listbox\n        },\n        root: rootSlot,\n        button: trigger,\n        listbox: open || hasFocus ? listbox : undefined,\n        clearButton: slot.optional(props.clearButton, {\n            defaultProps: {\n                'aria-label': 'Clear selection',\n                children: /*#__PURE__*/ React.createElement(DismissIcon, null),\n                // Safari doesn't allow to focus an element with this\n                tabIndex: 0\n            },\n            elementType: 'button',\n            renderByDefault: true\n        }),\n        expandIcon: slot.optional(props.expandIcon, {\n            renderByDefault: true,\n            defaultProps: {\n                children: /*#__PURE__*/ React.createElement(ChevronDownIcon, null)\n            },\n            elementType: 'span'\n        }),\n        placeholderVisible: !baseState.value && !!props.placeholder,\n        showClearButton,\n        ...baseState\n    };\n    const onClearButtonClick = useEventCallback(mergeCallbacks((_state_clearButton = state.clearButton) === null || _state_clearButton === void 0 ? void 0 : _state_clearButton.onClick, (ev)=>{\n        var _triggerRef_current;\n        clearSelection(ev);\n        (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n    }));\n    if (state.clearButton) {\n        state.clearButton.onClick = onClearButtonClick;\n    }\n    // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n    if (multiselect) {\n        state.clearButton = undefined;\n    }\n    if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n        React.useEffect(()=>{\n            if (clearable && multiselect) {\n                // eslint-disable-next-line no-console\n                console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n            }\n        }, [\n            clearable,\n            multiselect\n        ]);\n    }\n    return state;\n};\n"],"names":["useDropdown_unstable","props","ref","_state_clearButton","useFieldControlProps_unstable","supportsLabelFor","supportsSize","baseState","useComboboxBaseState","clearable","clearSelection","hasFocus","multiselect","open","selectedOptions","primary","triggerNativeProps","root","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","triggerRef","React","useRef","listbox","useListboxSlot","state","defaultProps","children","_props_button","trigger","useButtonTriggerSlot","button","useMergedRefs","type","tabIndex","value","placeholder","rootSlot","slot","always","inlinePopup","id","undefined","elementType","showClearButton","length","components","clearButton","expandIcon","Listbox","optional","createElement","DismissIcon","renderByDefault","ChevronDownIcon","placeholderVisible","onClearButtonClick","useEventCallback","mergeCallbacks","onClick","ev","_triggerRef_current","current","focus","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}
+{"version":3,"sources":["useDropdown.js"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, useMergedRefs, slot, useEventCallback } from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\n/**\n * Create the state required to render Dropdown.\n *\n * The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n *\n * @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */ export const useDropdown_unstable = (props, ref)=>{\n    var _state_clearButton;\n    // Merge props from surrounding <Field>, if any\n    props = useFieldControlProps_unstable(props, {\n        supportsLabelFor: true,\n        supportsSize: true\n    });\n    const baseState = useComboboxBaseState(props);\n    const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions } = baseState;\n    const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n        props,\n        primarySlotTagName: 'button',\n        excludedPropNames: [\n            'children'\n        ]\n    });\n    const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n    const triggerRef = React.useRef(null);\n    const listbox = useListboxSlot(props.listbox, comboboxPopupRef, {\n        state: baseState,\n        triggerRef,\n        defaultProps: {\n            children: props.children\n        }\n    });\n    var _props_button;\n    const trigger = useButtonTriggerSlot((_props_button = props.button) !== null && _props_button !== void 0 ? _props_button : {}, useMergedRefs(triggerRef, ref), {\n        state: baseState,\n        defaultProps: {\n            type: 'button',\n            tabIndex: 0,\n            children: baseState.value || props.placeholder,\n            ...triggerNativeProps\n        }\n    });\n    const rootSlot = slot.always(props.root, {\n        defaultProps: {\n            'aria-owns': !props.inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,\n            children: props.children,\n            ...rootNativeProps\n        },\n        elementType: 'div'\n    });\n    rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n    const showClearButton = selectedOptions.length > 0 && clearable && !multiselect;\n    const state = {\n        components: {\n            root: 'div',\n            button: 'button',\n            clearButton: 'button',\n            expandIcon: 'span',\n            listbox: Listbox\n        },\n        root: rootSlot,\n        button: trigger,\n        listbox: open || hasFocus ? listbox : undefined,\n        clearButton: slot.optional(props.clearButton, {\n            defaultProps: {\n                'aria-label': 'Clear selection',\n                children: /*#__PURE__*/ React.createElement(DismissIcon, null),\n                // Safari doesn't allow to focus an element with this\n                tabIndex: 0,\n                type: 'button'\n            },\n            elementType: 'button',\n            renderByDefault: true\n        }),\n        expandIcon: slot.optional(props.expandIcon, {\n            renderByDefault: true,\n            defaultProps: {\n                children: /*#__PURE__*/ React.createElement(ChevronDownIcon, null)\n            },\n            elementType: 'span'\n        }),\n        placeholderVisible: !baseState.value && !!props.placeholder,\n        showClearButton,\n        ...baseState\n    };\n    const onClearButtonClick = useEventCallback(mergeCallbacks((_state_clearButton = state.clearButton) === null || _state_clearButton === void 0 ? void 0 : _state_clearButton.onClick, (ev)=>{\n        var _triggerRef_current;\n        clearSelection(ev);\n        (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n    }));\n    if (state.clearButton) {\n        state.clearButton.onClick = onClearButtonClick;\n    }\n    // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n    if (multiselect) {\n        state.clearButton = undefined;\n    }\n    if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n        React.useEffect(()=>{\n            if (clearable && multiselect) {\n                // eslint-disable-next-line no-console\n                console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n            }\n        }, [\n            clearable,\n            multiselect\n        ]);\n    }\n    return state;\n};\n"],"names":["useDropdown_unstable","props","ref","_state_clearButton","useFieldControlProps_unstable","supportsLabelFor","supportsSize","baseState","useComboboxBaseState","clearable","clearSelection","hasFocus","multiselect","open","selectedOptions","primary","triggerNativeProps","root","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","triggerRef","React","useRef","listbox","useListboxSlot","state","defaultProps","children","_props_button","trigger","useButtonTriggerSlot","button","useMergedRefs","type","tabIndex","value","placeholder","rootSlot","slot","always","inlinePopup","id","undefined","elementType","showClearButton","length","components","clearButton","expandIcon","Listbox","optional","createElement","DismissIcon","renderByDefault","ChevronDownIcon","placeholderVisible","onClearButtonClick","useEventCallback","mergeCallbacks","onClick","ev","_triggerRef_current","current","focus","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}

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

@@ -83,7 +83,6 @@ const useListbox_unstable = (props, ref)=>{
             ref: ref,
             role: multiselect ? 'menu' : 'listbox',
             'aria-activedescendant': hasComboboxContext ? undefined : activeOption === null || activeOption === void 0 ? void 0 : activeOption.id,
-            'aria-multiselectable': multiselect,
             tabIndex: 0,
             ...props
         }), {

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 { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useScrollOptionsIntoView } from '../../utils/useScrollOptionsIntoView';\nimport { useSelection } from '../../utils/useSelection';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\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 { getCount, getOptionAtIndex, getIndexOfId } = optionCollection;\n    const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n    const [activeOption, setActiveOption] = React.useState();\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    const onKeyDown = (event)=>{\n        const action = getDropdownActionFromKey(event, {\n            open: true\n        });\n        const maxIndex = getCount() - 1;\n        const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n        let newIndex = activeIndex;\n        switch(action){\n            case 'Select':\n            case 'CloseSelect':\n                activeOption && selectOption(event, activeOption);\n                break;\n            default:\n                newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n        }\n        if (newIndex !== activeIndex) {\n            // prevent default page scroll/keyboard action if the index changed\n            event.preventDefault();\n            setActiveOption(getOptionAtIndex(newIndex));\n            setFocusVisible(true);\n        }\n    };\n    const onMouseOver = (event)=>{\n        setFocusVisible(false);\n    };\n    // get state from parent combobox, if it exists\n    const hasComboboxContext = useHasParentContext(ComboboxContext);\n    const comboboxActiveOption = useContextSelector(ComboboxContext, (ctx)=>ctx.activeOption);\n    const comboboxFocusVisible = useContextSelector(ComboboxContext, (ctx)=>ctx.focusVisible);\n    const comboboxSelectedOptions = useContextSelector(ComboboxContext, (ctx)=>ctx.selectedOptions);\n    const comboboxSelectOption = useContextSelector(ComboboxContext, (ctx)=>ctx.selectOption);\n    const comboboxSetActiveOption = useContextSelector(ComboboxContext, (ctx)=>ctx.setActiveOption);\n    // without a parent combobox context, provide values directly from Listbox\n    const optionContextValues = hasComboboxContext ? {\n        activeOption: comboboxActiveOption,\n        focusVisible: comboboxFocusVisible,\n        selectedOptions: comboboxSelectedOptions,\n        selectOption: comboboxSelectOption,\n        setActiveOption: comboboxSetActiveOption\n    } : {\n        activeOption,\n        focusVisible,\n        selectedOptions,\n        selectOption,\n        setActiveOption\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: ref,\n            role: multiselect ? 'menu' : 'listbox',\n            'aria-activedescendant': hasComboboxContext ? undefined : activeOption === null || activeOption === void 0 ? void 0 : activeOption.id,\n            'aria-multiselectable': multiselect,\n            tabIndex: 0,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        multiselect,\n        clearSelection,\n        ...optionCollection,\n        ...optionContextValues\n    };\n    const scrollContainerRef = useScrollOptionsIntoView(state);\n    state.root.ref = useMergedRefs(state.root.ref, scrollContainerRef);\n    state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n    state.root.onMouseOver = useEventCallback(mergeCallbacks(state.root.onMouseOver, onMouseOver));\n    return state;\n};\n"],"names":["useListbox_unstable","props","ref","multiselect","optionCollection","useOptionCollection","getCount","getOptionAtIndex","getIndexOfId","clearSelection","selectedOptions","selectOption","useSelection","activeOption","setActiveOption","React","useState","focusVisible","setFocusVisible","onKeyDown","event","action","getDropdownActionFromKey","open","maxIndex","activeIndex","id","newIndex","getIndexFromAction","preventDefault","onMouseOver","hasComboboxContext","useHasParentContext","ComboboxContext","comboboxActiveOption","useContextSelector","ctx","comboboxFocusVisible","comboboxSelectedOptions","comboboxSelectOption","comboboxSetActiveOption","optionContextValues","state","components","root","slot","always","getIntrinsicElementProps","role","undefined","tabIndex","elementType","scrollContainerRef","useScrollOptionsIntoView","useMergedRefs","useEventCallback","mergeCallbacks"],"mappings":"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"}
+{"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 { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useScrollOptionsIntoView } from '../../utils/useScrollOptionsIntoView';\nimport { useSelection } from '../../utils/useSelection';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\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 { getCount, getOptionAtIndex, getIndexOfId } = optionCollection;\n    const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n    const [activeOption, setActiveOption] = React.useState();\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    const onKeyDown = (event)=>{\n        const action = getDropdownActionFromKey(event, {\n            open: true\n        });\n        const maxIndex = getCount() - 1;\n        const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n        let newIndex = activeIndex;\n        switch(action){\n            case 'Select':\n            case 'CloseSelect':\n                activeOption && selectOption(event, activeOption);\n                break;\n            default:\n                newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n        }\n        if (newIndex !== activeIndex) {\n            // prevent default page scroll/keyboard action if the index changed\n            event.preventDefault();\n            setActiveOption(getOptionAtIndex(newIndex));\n            setFocusVisible(true);\n        }\n    };\n    const onMouseOver = (event)=>{\n        setFocusVisible(false);\n    };\n    // get state from parent combobox, if it exists\n    const hasComboboxContext = useHasParentContext(ComboboxContext);\n    const comboboxActiveOption = useContextSelector(ComboboxContext, (ctx)=>ctx.activeOption);\n    const comboboxFocusVisible = useContextSelector(ComboboxContext, (ctx)=>ctx.focusVisible);\n    const comboboxSelectedOptions = useContextSelector(ComboboxContext, (ctx)=>ctx.selectedOptions);\n    const comboboxSelectOption = useContextSelector(ComboboxContext, (ctx)=>ctx.selectOption);\n    const comboboxSetActiveOption = useContextSelector(ComboboxContext, (ctx)=>ctx.setActiveOption);\n    // without a parent combobox context, provide values directly from Listbox\n    const optionContextValues = hasComboboxContext ? {\n        activeOption: comboboxActiveOption,\n        focusVisible: comboboxFocusVisible,\n        selectedOptions: comboboxSelectedOptions,\n        selectOption: comboboxSelectOption,\n        setActiveOption: comboboxSetActiveOption\n    } : {\n        activeOption,\n        focusVisible,\n        selectedOptions,\n        selectOption,\n        setActiveOption\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: ref,\n            role: multiselect ? 'menu' : 'listbox',\n            'aria-activedescendant': hasComboboxContext ? undefined : activeOption === null || activeOption === void 0 ? void 0 : activeOption.id,\n            tabIndex: 0,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        multiselect,\n        clearSelection,\n        ...optionCollection,\n        ...optionContextValues\n    };\n    const scrollContainerRef = useScrollOptionsIntoView(state);\n    state.root.ref = useMergedRefs(state.root.ref, scrollContainerRef);\n    state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n    state.root.onMouseOver = useEventCallback(mergeCallbacks(state.root.onMouseOver, onMouseOver));\n    return state;\n};\n"],"names":["useListbox_unstable","props","ref","multiselect","optionCollection","useOptionCollection","getCount","getOptionAtIndex","getIndexOfId","clearSelection","selectedOptions","selectOption","useSelection","activeOption","setActiveOption","React","useState","focusVisible","setFocusVisible","onKeyDown","event","action","getDropdownActionFromKey","open","maxIndex","activeIndex","id","newIndex","getIndexFromAction","preventDefault","onMouseOver","hasComboboxContext","useHasParentContext","ComboboxContext","comboboxActiveOption","useContextSelector","ctx","comboboxFocusVisible","comboboxSelectedOptions","comboboxSelectOption","comboboxSetActiveOption","optionContextValues","state","components","root","slot","always","getIntrinsicElementProps","role","undefined","tabIndex","elementType","scrollContainerRef","useScrollOptionsIntoView","useMergedRefs","useEventCallback","mergeCallbacks"],"mappings":"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"}

package/lib-commonjs/hooks/useComboboxFilter.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useComboboxFilter", {
+    enumerable: true,
+    get: function() {
+        return useComboboxFilter;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _Option = require("../Option");
+function defaultFilter(optionText, query) {
+    if (query === '') {
+        return true;
+    }
+    return optionText.toLowerCase().includes(query.toLowerCase());
+}
+function defaultToString(option) {
+    return typeof option === 'string' ? option : option.value;
+}
+function useComboboxFilter(query, options, config) {
+    const { filter = defaultFilter, noOptionsMessage = "We couldn't find any matches.", optionToReactKey = defaultToString, optionToText = defaultToString, renderOption = (option)=>{
+        if (typeof option === 'string') {
+            return /*#__PURE__*/ _react.createElement(_Option.Option, {
+                key: option
+            }, option);
+        }
+        return /*#__PURE__*/ _react.createElement(_Option.Option, {
+            ...option,
+            key: optionToReactKey(option),
+            text: optionToText(option),
+            value: option.value
+        }, option.children);
+    } } = config;
+    const filteredOptions = _react.useMemo(()=>{
+        const searchValue = query.trim();
+        return options.filter((option)=>filter(optionToText(option), searchValue));
+    }, [
+        options,
+        optionToText,
+        filter,
+        query
+    ]);
+    if (filteredOptions.length === 0) {
+        return [
+            /*#__PURE__*/ _react.createElement(_Option.Option, {
+                "aria-disabled": "true",
+                key: "no-results",
+                text: ""
+            }, noOptionsMessage)
+        ];
+    }
+    return filteredOptions.map((option)=>renderOption(option));
+}

package/lib-commonjs/hooks/useComboboxFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useComboboxFilter.js"],"sourcesContent":["import * as React from 'react';\nimport { Option } from '../Option';\nfunction defaultFilter(optionText, query) {\n    if (query === '') {\n        return true;\n    }\n    return optionText.toLowerCase().includes(query.toLowerCase());\n}\nfunction defaultToString(option) {\n    return typeof option === 'string' ? option : option.value;\n}\nexport function useComboboxFilter(query, options, config) {\n    const { filter = defaultFilter, noOptionsMessage = \"We couldn't find any matches.\", optionToReactKey = defaultToString, optionToText = defaultToString, renderOption = (option)=>{\n        if (typeof option === 'string') {\n            return /*#__PURE__*/ React.createElement(Option, {\n                key: option\n            }, option);\n        }\n        return /*#__PURE__*/ React.createElement(Option, {\n            ...option,\n            key: optionToReactKey(option),\n            text: optionToText(option),\n            value: option.value\n        }, option.children);\n    } } = config;\n    const filteredOptions = React.useMemo(()=>{\n        const searchValue = query.trim();\n        return options.filter((option)=>filter(optionToText(option), searchValue));\n    }, [\n        options,\n        optionToText,\n        filter,\n        query\n    ]);\n    if (filteredOptions.length === 0) {\n        return [\n            /*#__PURE__*/ React.createElement(Option, {\n                \"aria-disabled\": \"true\",\n                key: \"no-results\",\n                text: \"\"\n            }, noOptionsMessage)\n        ];\n    }\n    return filteredOptions.map((option)=>renderOption(option));\n}\n"],"names":["useComboboxFilter","defaultFilter","optionText","query","toLowerCase","includes","defaultToString","option","value","options","config","filter","noOptionsMessage","optionToReactKey","optionToText","renderOption","React","createElement","Option","key","text","children","filteredOptions","useMemo","searchValue","trim","length","map"],"mappings":";;;;+BAWgBA;;;eAAAA;;;;iEAXO;wBACA;AACvB,SAASC,cAAcC,UAAU,EAAEC,KAAK;IACpC,IAAIA,UAAU,IAAI;QACd,OAAO;IACX;IACA,OAAOD,WAAWE,WAAW,GAAGC,QAAQ,CAACF,MAAMC,WAAW;AAC9D;AACA,SAASE,gBAAgBC,MAAM;IAC3B,OAAO,OAAOA,WAAW,WAAWA,SAASA,OAAOC,KAAK;AAC7D;AACO,SAASR,kBAAkBG,KAAK,EAAEM,OAAO,EAAEC,MAAM;IACpD,MAAM,EAAEC,SAASV,aAAa,EAAEW,mBAAmB,+BAA+B,EAAEC,mBAAmBP,eAAe,EAAEQ,eAAeR,eAAe,EAAES,eAAe,CAACR;QACpK,IAAI,OAAOA,WAAW,UAAU;YAC5B,OAAO,WAAW,GAAGS,OAAMC,aAAa,CAACC,cAAM,EAAE;gBAC7CC,KAAKZ;YACT,GAAGA;QACP;QACA,OAAO,WAAW,GAAGS,OAAMC,aAAa,CAACC,cAAM,EAAE;YAC7C,GAAGX,MAAM;YACTY,KAAKN,iBAAiBN;YACtBa,MAAMN,aAAaP;YACnBC,OAAOD,OAAOC,KAAK;QACvB,GAAGD,OAAOc,QAAQ;IACtB,CAAC,EAAE,GAAGX;IACN,MAAMY,kBAAkBN,OAAMO,OAAO,CAAC;QAClC,MAAMC,cAAcrB,MAAMsB,IAAI;QAC9B,OAAOhB,QAAQE,MAAM,CAAC,CAACJ,SAASI,OAAOG,aAAaP,SAASiB;IACjE,GAAG;QACCf;QACAK;QACAH;QACAR;KACH;IACD,IAAImB,gBAAgBI,MAAM,KAAK,GAAG;QAC9B,OAAO;YACH,WAAW,GAAGV,OAAMC,aAAa,CAACC,cAAM,EAAE;gBACtC,iBAAiB;gBACjBC,KAAK;gBACLC,MAAM;YACV,GAAGR;SACN;IACL;IACA,OAAOU,gBAAgBK,GAAG,CAAC,CAACpB,SAASQ,aAAaR;AACtD"}

package/lib-commonjs/index.js

@@ -95,6 +95,9 @@ _export(exports, {
     },
     useOptionGroup_unstable: function() {
         return _OptionGroup.useOptionGroup_unstable;
+    },
+    useComboboxFilter: function() {
+        return _useComboboxFilter.useComboboxFilter;
     }
 });
 const _ComboboxContext = require("./contexts/ComboboxContext");
@@ -106,3 +109,4 @@ const _Option = require("./Option");
 const _Combobox = require("./Combobox");
 const _Dropdown = require("./Dropdown");
 const _OptionGroup = require("./OptionGroup");
+const _useComboboxFilter = require("./hooks/useComboboxFilter");

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export { ComboboxProvider } from './contexts/ComboboxContext';\nexport { ListboxProvider } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport { Listbox, listboxClassNames, renderListbox_unstable, useListboxStyles_unstable, useListbox_unstable } from './Listbox';\nexport { Option, optionClassNames, renderOption_unstable, useOptionStyles_unstable, useOption_unstable } from './Option';\nexport { Combobox, comboboxClassNames, renderCombobox_unstable, useComboboxStyles_unstable, useCombobox_unstable } from './Combobox';\nexport { Dropdown, dropdownClassNames, renderDropdown_unstable, useDropdownStyles_unstable, useDropdown_unstable } from './Dropdown';\nexport { OptionGroup, optionGroupClassNames, renderOptionGroup_unstable, useOptionGroupStyles_unstable, useOptionGroup_unstable } from './OptionGroup';\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"],"mappings":";;;;;;;;;;;IAASA,gBAAgB;eAAhBA,iCAAgB;;IAChBC,eAAe;eAAfA,+BAAe;;IACfC,wBAAwB;eAAxBA,kDAAwB;;IACxBC,uBAAuB;eAAvBA,gDAAuB;;IACvBC,OAAO;eAAPA,gBAAO;;IAAEC,iBAAiB;eAAjBA,0BAAiB;;IAAEC,sBAAsB;eAAtBA,+BAAsB;;IAAEC,yBAAyB;eAAzBA,kCAAyB;;IAAEC,mBAAmB;eAAnBA,4BAAmB;;IAClGC,MAAM;eAANA,cAAM;;IAAEC,gBAAgB;eAAhBA,wBAAgB;;IAAEC,qBAAqB;eAArBA,6BAAqB;;IAAEC,wBAAwB;eAAxBA,gCAAwB;;IAAEC,kBAAkB;eAAlBA,0BAAkB;;IAC7FC,QAAQ;eAARA,kBAAQ;;IAAEC,kBAAkB;eAAlBA,4BAAkB;;IAAEC,uBAAuB;eAAvBA,iCAAuB;;IAAEC,0BAA0B;eAA1BA,oCAA0B;;IAAEC,oBAAoB;eAApBA,8BAAoB;;IACvGC,QAAQ;eAARA,kBAAQ;;IAAEC,kBAAkB;eAAlBA,4BAAkB;;IAAEC,uBAAuB;eAAvBA,iCAAuB;;IAAEC,0BAA0B;eAA1BA,oCAA0B;;IAAEC,oBAAoB;eAApBA,8BAAoB;;IACvGC,WAAW;eAAXA,wBAAW;;IAAEC,qBAAqB;eAArBA,kCAAqB;;IAAEC,0BAA0B;eAA1BA,uCAA0B;;IAAEC,6BAA6B;eAA7BA,0CAA6B;;IAAEC,uBAAuB;eAAvBA,oCAAuB;;;iCAR9F;gCACD;0CACS;yCACD;yBAC2E;wBACL;0BACU;0BACA;6BACe"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export { ComboboxProvider } from './contexts/ComboboxContext';\nexport { ListboxProvider } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport { Listbox, listboxClassNames, renderListbox_unstable, useListboxStyles_unstable, useListbox_unstable } from './Listbox';\nexport { Option, optionClassNames, renderOption_unstable, useOptionStyles_unstable, useOption_unstable } from './Option';\nexport { Combobox, comboboxClassNames, renderCombobox_unstable, useComboboxStyles_unstable, useCombobox_unstable } from './Combobox';\nexport { Dropdown, dropdownClassNames, renderDropdown_unstable, useDropdownStyles_unstable, useDropdown_unstable } from './Dropdown';\nexport { OptionGroup, optionGroupClassNames, renderOptionGroup_unstable, useOptionGroupStyles_unstable, useOptionGroup_unstable } from './OptionGroup';\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":";;;;;;;;;;;IAASA,gBAAgB;eAAhBA,iCAAgB;;IAChBC,eAAe;eAAfA,+BAAe;;IACfC,wBAAwB;eAAxBA,kDAAwB;;IACxBC,uBAAuB;eAAvBA,gDAAuB;;IACvBC,OAAO;eAAPA,gBAAO;;IAAEC,iBAAiB;eAAjBA,0BAAiB;;IAAEC,sBAAsB;eAAtBA,+BAAsB;;IAAEC,yBAAyB;eAAzBA,kCAAyB;;IAAEC,mBAAmB;eAAnBA,4BAAmB;;IAClGC,MAAM;eAANA,cAAM;;IAAEC,gBAAgB;eAAhBA,wBAAgB;;IAAEC,qBAAqB;eAArBA,6BAAqB;;IAAEC,wBAAwB;eAAxBA,gCAAwB;;IAAEC,kBAAkB;eAAlBA,0BAAkB;;IAC7FC,QAAQ;eAARA,kBAAQ;;IAAEC,kBAAkB;eAAlBA,4BAAkB;;IAAEC,uBAAuB;eAAvBA,iCAAuB;;IAAEC,0BAA0B;eAA1BA,oCAA0B;;IAAEC,oBAAoB;eAApBA,8BAAoB;;IACvGC,QAAQ;eAARA,kBAAQ;;IAAEC,kBAAkB;eAAlBA,4BAAkB;;IAAEC,uBAAuB;eAAvBA,iCAAuB;;IAAEC,0BAA0B;eAA1BA,oCAA0B;;IAAEC,oBAAoB;eAApBA,8BAAoB;;IACvGC,WAAW;eAAXA,wBAAW;;IAAEC,qBAAqB;eAArBA,kCAAqB;;IAAEC,0BAA0B;eAA1BA,uCAA0B;;IAAEC,6BAA6B;eAA7BA,0CAA6B;;IAAEC,uBAAuB;eAAvBA,oCAAuB;;IACtHC,iBAAiB;eAAjBA,oCAAiB;;;iCATO;gCACD;0CACS;yCACD;yBAC2E;wBACL;0BACU;0BACA;6BACe;mCACrG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-combobox",
-  "version": "9.6.1",
+  "version": "9.7.1",
   "description": "Fluent UI React Combobox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,16 +34,16 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-context-selector": "^9.1.48",
-    "@fluentui/react-field": "^9.1.49",
+    "@fluentui/react-context-selector": "^9.1.50",
+    "@fluentui/react-field": "^9.1.51",
     "@fluentui/react-icons": "^2.0.224",
-    "@fluentui/react-jsx-runtime": "^9.0.26",
-    "@fluentui/react-portal": "^9.4.9",
-    "@fluentui/react-positioning": "^9.12.3",
-    "@fluentui/react-shared-contexts": "^9.13.2",
-    "@fluentui/react-tabster": "^9.17.2",
+    "@fluentui/react-jsx-runtime": "^9.0.28",
+    "@fluentui/react-portal": "^9.4.11",
+    "@fluentui/react-positioning": "^9.12.5",
+    "@fluentui/react-shared-contexts": "^9.14.0",
+    "@fluentui/react-tabster": "^9.17.4",
     "@fluentui/react-theme": "^9.1.16",
-    "@fluentui/react-utilities": "^9.16.0",
+    "@fluentui/react-utilities": "^9.17.0",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },