@fluentui/react-combobox 9.13.7 → 9.13.8

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Mon, 23 Sep 2024 12:36:04 GMT and should not be manually modified.
+This log was last generated on Thu, 26 Sep 2024 14:14:11 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.13.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.13.8)
+
+Thu, 26 Sep 2024 14:14:11 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.13.7..@fluentui/react-combobox_v9.13.8)
+
+### Patches
+
+- fix tabIndex for clear button in Dropdown component ([PR #32278](https://github.com/microsoft/fluentui/pull/32278) by kirpadv@gmail.com)
+
 ## [9.13.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.13.7)
 
-Mon, 23 Sep 2024 12:36:04 GMT 
+Mon, 23 Sep 2024 12:40:17 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.13.6..@fluentui/react-combobox_v9.13.7)
 
 ### Patches

package/lib/components/Dropdown/useDropdown.js

@@ -67,7 +67,8 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
         state: baseState,
         defaultProps: {
             type: 'button',
-            tabIndex: 0,
+            // tabster navigation breaks if the button is disabled and tabIndex is 0
+            tabIndex: triggerNativeProps.disabled ? undefined : 0,
             children: baseState.value || props.placeholder,
             'aria-controls': open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
             ...triggerNativeProps
@@ -100,7 +101,8 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
                 'aria-label': 'Clear selection',
                 children: /*#__PURE__*/ React.createElement(DismissIcon, null),
                 // Safari doesn't allow to focus an element with this
-                tabIndex: 0,
+                // when the element is not visible (display: none) we need to remove it to avoid tabster issues
+                tabIndex: showClearButton ? 0 : undefined,
                 type: 'button'
             },
             elementType: 'button',

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 { useActiveDescendant } from '@fluentui/react-aria';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useMergedRefs,\n  slot,\n  useEventCallback,\n  useOnClickOutside,\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';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport type { ComboboxOpenEvents } from '../Combobox/Combobox.types';\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  'use no memo';\n\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsSize: true });\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller: activeDescendantController,\n  } = useActiveDescendant<HTMLButtonElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n\n  const baseState = useComboboxBaseState({ ...props, activeDescendantController, freeform: false });\n  const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions, setOpen } = 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, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\n  });\n\n  const { targetDocument } = useFluent();\n\n  useOnClickOutside({\n    element: targetDocument,\n    callback: event => setOpen(event as unknown as ComboboxOpenEvents, false),\n    refs: [triggerRef, comboboxPopupRef, comboboxTargetRef],\n    disabled: !open,\n  });\n\n  const trigger = useButtonTriggerSlot(props.button ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n    state: baseState,\n    defaultProps: {\n      type: 'button',\n      tabIndex: 0,\n      children: baseState.value || props.placeholder,\n      'aria-controls': open ? listbox?.id : undefined,\n      ...triggerNativeProps,\n    },\n    activeDescendantController,\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    activeDescendantController,\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","useActiveDescendant","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","useFluent_unstable","useFluent","getPartitionedNativeProps","mergeCallbacks","useMergedRefs","slot","useEventCallback","useOnClickOutside","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useButtonTriggerSlot","optionClassNames","useDropdown_unstable","props","ref","state","supportsLabelFor","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","baseState","freeform","clearable","clearSelection","hasFocus","multiselect","open","selectedOptions","setOpen","primary","triggerNativeProps","rootNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","triggerRef","useRef","listbox","defaultProps","children","targetDocument","element","callback","event","refs","disabled","trigger","button","type","tabIndex","value","placeholder","id","undefined","rootSlot","always","inlinePopup","elementType","showClearButton","length","components","clearButton","expandIcon","optional","renderByDefault","placeholderVisible","onClearButtonClick","onClick","ev","current","focus","process","env","NODE_ENV","useEffect","console","error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useMergedRefs,\n  slot,\n  useEventCallback,\n  useOnClickOutside,\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';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport type { ComboboxOpenEvents } from '../Combobox/Combobox.types';\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  'use no memo';\n\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsSize: true });\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller: activeDescendantController,\n  } = useActiveDescendant<HTMLButtonElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n\n  const baseState = useComboboxBaseState({ ...props, activeDescendantController, freeform: false });\n  const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions, setOpen } = 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, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\n  });\n\n  const { targetDocument } = useFluent();\n\n  useOnClickOutside({\n    element: targetDocument,\n    callback: event => setOpen(event as unknown as ComboboxOpenEvents, false),\n    refs: [triggerRef, comboboxPopupRef, comboboxTargetRef],\n    disabled: !open,\n  });\n\n  const trigger = useButtonTriggerSlot(props.button ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n    state: baseState,\n    defaultProps: {\n      type: 'button',\n      // tabster navigation breaks if the button is disabled and tabIndex is 0\n      tabIndex: triggerNativeProps.disabled ? undefined : 0,\n      children: baseState.value || props.placeholder,\n      'aria-controls': open ? listbox?.id : undefined,\n      ...triggerNativeProps,\n    },\n    activeDescendantController,\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        // when the element is not visible (display: none) we need to remove it to avoid tabster issues\n        tabIndex: showClearButton ? 0 : undefined,\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    activeDescendantController,\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","useActiveDescendant","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","useFluent_unstable","useFluent","getPartitionedNativeProps","mergeCallbacks","useMergedRefs","slot","useEventCallback","useOnClickOutside","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useButtonTriggerSlot","optionClassNames","useDropdown_unstable","props","ref","state","supportsLabelFor","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","baseState","freeform","clearable","clearSelection","hasFocus","multiselect","open","selectedOptions","setOpen","primary","triggerNativeProps","rootNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","triggerRef","useRef","listbox","defaultProps","children","targetDocument","element","callback","event","refs","disabled","trigger","button","type","tabIndex","undefined","value","placeholder","id","rootSlot","always","inlinePopup","elementType","showClearButton","length","components","clearButton","expandIcon","optional","renderByDefault","placeholderVisible","onClearButtonClick","onClick","ev","current","focus","process","env","NODE_ENV","useEffect","console","error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -70,7 +70,8 @@ const useDropdown_unstable = (props, ref)=>{
         state: baseState,
         defaultProps: {
             type: 'button',
-            tabIndex: 0,
+            // tabster navigation breaks if the button is disabled and tabIndex is 0
+            tabIndex: triggerNativeProps.disabled ? undefined : 0,
             children: baseState.value || props.placeholder,
             'aria-controls': open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
             ...triggerNativeProps
@@ -103,7 +104,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,
+                // when the element is not visible (display: none) we need to remove it to avoid tabster issues
+                tabIndex: showClearButton ? 0 : undefined,
                 type: 'button'
             },
             elementType: 'button',

package/lib-commonjs/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 { useActiveDescendant } from '@fluentui/react-aria';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useMergedRefs,\n  slot,\n  useEventCallback,\n  useOnClickOutside,\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';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport type { ComboboxOpenEvents } from '../Combobox/Combobox.types';\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  'use no memo';\n\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsSize: true });\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller: activeDescendantController,\n  } = useActiveDescendant<HTMLButtonElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n\n  const baseState = useComboboxBaseState({ ...props, activeDescendantController, freeform: false });\n  const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions, setOpen } = 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, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\n  });\n\n  const { targetDocument } = useFluent();\n\n  useOnClickOutside({\n    element: targetDocument,\n    callback: event => setOpen(event as unknown as ComboboxOpenEvents, false),\n    refs: [triggerRef, comboboxPopupRef, comboboxTargetRef],\n    disabled: !open,\n  });\n\n  const trigger = useButtonTriggerSlot(props.button ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n    state: baseState,\n    defaultProps: {\n      type: 'button',\n      tabIndex: 0,\n      children: baseState.value || props.placeholder,\n      'aria-controls': open ? listbox?.id : undefined,\n      ...triggerNativeProps,\n    },\n    activeDescendantController,\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    activeDescendantController,\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":["useDropdown_unstable","props","ref","state","useFieldControlProps_unstable","supportsLabelFor","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","baseState","useComboboxBaseState","freeform","clearable","clearSelection","hasFocus","multiselect","open","selectedOptions","setOpen","primary","triggerNativeProps","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","triggerRef","React","useRef","listbox","useListboxSlot","useMergedRefs","defaultProps","children","targetDocument","useFluent","useOnClickOutside","element","callback","event","refs","disabled","trigger","useButtonTriggerSlot","button","type","tabIndex","value","placeholder","id","undefined","rootSlot","slot","always","inlinePopup","elementType","showClearButton","length","components","clearButton","expandIcon","Listbox","optional","createElement","DismissIcon","renderByDefault","ChevronDownIcon","placeholderVisible","onClearButtonClick","useEventCallback","mergeCallbacks","onClick","ev","current","focus","process","env","NODE_ENV","useEffect","console","error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useMergedRefs,\n  slot,\n  useEventCallback,\n  useOnClickOutside,\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';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport type { ComboboxOpenEvents } from '../Combobox/Combobox.types';\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  'use no memo';\n\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsSize: true });\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller: activeDescendantController,\n  } = useActiveDescendant<HTMLButtonElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n\n  const baseState = useComboboxBaseState({ ...props, activeDescendantController, freeform: false });\n  const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions, setOpen } = 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, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\n  });\n\n  const { targetDocument } = useFluent();\n\n  useOnClickOutside({\n    element: targetDocument,\n    callback: event => setOpen(event as unknown as ComboboxOpenEvents, false),\n    refs: [triggerRef, comboboxPopupRef, comboboxTargetRef],\n    disabled: !open,\n  });\n\n  const trigger = useButtonTriggerSlot(props.button ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n    state: baseState,\n    defaultProps: {\n      type: 'button',\n      // tabster navigation breaks if the button is disabled and tabIndex is 0\n      tabIndex: triggerNativeProps.disabled ? undefined : 0,\n      children: baseState.value || props.placeholder,\n      'aria-controls': open ? listbox?.id : undefined,\n      ...triggerNativeProps,\n    },\n    activeDescendantController,\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        // when the element is not visible (display: none) we need to remove it to avoid tabster issues\n        tabIndex: showClearButton ? 0 : undefined,\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    activeDescendantController,\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":["useDropdown_unstable","props","ref","state","useFieldControlProps_unstable","supportsLabelFor","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","baseState","useComboboxBaseState","freeform","clearable","clearSelection","hasFocus","multiselect","open","selectedOptions","setOpen","primary","triggerNativeProps","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","triggerRef","React","useRef","listbox","useListboxSlot","useMergedRefs","defaultProps","children","targetDocument","useFluent","useOnClickOutside","element","callback","event","refs","disabled","trigger","useButtonTriggerSlot","button","type","tabIndex","undefined","value","placeholder","id","rootSlot","slot","always","inlinePopup","elementType","showClearButton","length","components","clearButton","expandIcon","Listbox","optional","createElement","DismissIcon","renderByDefault","ChevronDownIcon","placeholderVisible","onClearButtonClick","useEventCallback","mergeCallbacks","onClick","ev","current","focus","process","env","NODE_ENV","useEffect","console","error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-combobox",
-  "version": "9.13.7",
+  "version": "9.13.8",
   "description": "Fluent UI React Combobox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",