@fluentui/react-combobox 9.7.2 → 9.7.3

package/CHANGELOG.md

@@ -1,12 +1,23 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Fri, 26 Jan 2024 10:38:59 GMT and should not be manually modified.
+This log was last generated on Mon, 29 Jan 2024 13:53:38 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.7.3)
+
+Mon, 29 Jan 2024 13:53:38 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.7.2..@fluentui/react-combobox_v9.7.3)
+
+### Patches
+
+- fix: add aria-controls to combobox and dropdown ([PR #30352](https://github.com/microsoft/fluentui/pull/30352) by sarah.higley@microsoft.com)
+- Bump @fluentui/react-field to v9.1.52 ([PR #30383](https://github.com/microsoft/fluentui/pull/30383) by beachball)
+- Bump @fluentui/react-positioning to v9.13.1 ([PR #30383](https://github.com/microsoft/fluentui/pull/30383) by beachball)
+
 ## [9.7.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.7.2)
 
-Fri, 26 Jan 2024 10:38:59 GMT 
+Fri, 26 Jan 2024 10:40:22 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.7.1..@fluentui/react-combobox_v9.7.2)
 
 ### Patches

package/lib/components/Combobox/useCombobox.js

@@ -68,6 +68,7 @@ import { useInputTriggerSlot } from './useInputTriggerSlot';
         defaultProps: {
             type: 'text',
             value: value !== null && value !== void 0 ? value : '',
+            'aria-controls': open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
             ...triggerNativeProps
         }
     });

package/lib/components/Combobox/useCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCombobox.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  useEventCallback,\n  useId,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useInputTriggerSlot } from './useInputTriggerSlot';\n\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const baseState = useComboboxBaseState({ ...props, editable: true });\n  const {\n    clearable,\n    clearSelection,\n    multiselect,\n    open,\n    selectedOptions,\n    selectOption,\n    setOpen,\n    setValue,\n    value,\n    hasFocus,\n  } = baseState;\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n  const { disabled, freeform, inlinePopup } = props;\n  const comboId = useId('combobox-');\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['children', 'size'],\n  });\n\n  // reset any typed value when an option is selected\n  baseState.selectOption = (ev: SelectionEvents, option: OptionValue) => {\n    setValue(undefined);\n    selectOption(ev, option);\n  };\n\n  baseState.setOpen = (ev, newState: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    if (!newState && !freeform) {\n      setValue(undefined);\n    }\n\n    setOpen(ev, newState);\n  };\n\n  const triggerRef = React.useRef<HTMLInputElement>(null);\n\n  const listbox = useListboxSlot(props.listbox, comboboxPopupRef, {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\n  });\n\n  const triggerSlot = useInputTriggerSlot(props.input ?? {}, useMergedRefs(triggerRef, ref), {\n    state: baseState,\n    freeform,\n    defaultProps: {\n      type: 'text',\n      value: value ?? '',\n      ...triggerNativeProps,\n    },\n  });\n\n  const rootSlot = slot.always(props.root, {\n    defaultProps: {\n      'aria-owns': !inlinePopup && open ? listbox?.id : undefined,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const showClearIcon = selectedOptions.length > 0 && clearable && !multiselect;\n  const state: ComboboxState = {\n    components: { root: 'div', input: 'input', expandIcon: 'span', listbox: Listbox, clearIcon: 'span' },\n    root: rootSlot,\n    input: triggerSlot,\n    listbox: open || hasFocus ? listbox : undefined,\n    clearIcon: slot.optional(props.clearIcon, {\n      defaultProps: {\n        'aria-hidden': 'true',\n        children: <DismissIcon />,\n      },\n      elementType: 'span',\n      renderByDefault: true,\n    }),\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-expanded': open,\n        children: <ChevronDownIcon />,\n        role: 'button',\n      },\n      elementType: 'span',\n    }),\n    showClearIcon,\n    ...baseState,\n  };\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown } = state.expandIcon || {};\n\n  const onExpandIconMouseDown = useEventCallback(\n    mergeCallbacks(onIconMouseDown, (event: React.MouseEvent<HTMLSpanElement>) => {\n      event.preventDefault();\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n\n    // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n    // using the following steps:\n    // 1. If there is an aria-label, it is \"Open [aria-label]\"\n    // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n    // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n    // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n    const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];\n    const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n    if (!hasExpandLabel) {\n      if (props['aria-labelledby']) {\n        const chevronId = state.expandIcon.id ?? `${comboId}-chevron`;\n        const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\n\n        state.expandIcon['aria-label'] = defaultOpenString;\n        state.expandIcon.id = chevronId;\n        state.expandIcon['aria-labelledby'] = chevronLabelledBy;\n      } else if (props['aria-label']) {\n        state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;\n      } else {\n        state.expandIcon['aria-label'] = defaultOpenString;\n      }\n    }\n  }\n\n  const onClearIconMouseDown = useEventCallback(\n    mergeCallbacks(state.clearIcon?.onMouseDown, (ev: React.MouseEvent<HTMLSpanElement>) => {\n      ev.preventDefault();\n    }),\n  );\n  const onClearIconClick = useEventCallback(\n    mergeCallbacks(state.clearIcon?.onClick, (ev: React.MouseEvent<HTMLSpanElement>) => {\n      clearSelection(ev);\n    }),\n  );\n\n  if (state.clearIcon) {\n    state.clearIcon.onMouseDown = onClearIconMouseDown;\n    state.clearIcon.onClick = onClearIconClick;\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.clearIcon = 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","useEventCallback","useId","useMergedRefs","slot","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useInputTriggerSlot","useCombobox_unstable","props","ref","state","supportsLabelFor","supportsRequired","supportsSize","baseState","editable","clearable","clearSelection","multiselect","open","selectedOptions","selectOption","setOpen","setValue","value","hasFocus","comboboxPopupRef","comboboxTargetRef","disabled","freeform","inlinePopup","comboId","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","ev","option","undefined","newState","triggerRef","useRef","listbox","defaultProps","children","triggerSlot","input","type","rootSlot","always","id","elementType","showClearIcon","length","components","expandIcon","clearIcon","optional","renderByDefault","role","onMouseDown","onIconMouseDown","onExpandIconMouseDown","event","preventDefault","current","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy","onClearIconMouseDown","onClearIconClick","onClick","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}
+{"version":3,"sources":["useCombobox.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  useEventCallback,\n  useId,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useInputTriggerSlot } from './useInputTriggerSlot';\n\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const baseState = useComboboxBaseState({ ...props, editable: true });\n  const {\n    clearable,\n    clearSelection,\n    multiselect,\n    open,\n    selectedOptions,\n    selectOption,\n    setOpen,\n    setValue,\n    value,\n    hasFocus,\n  } = baseState;\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n  const { disabled, freeform, inlinePopup } = props;\n  const comboId = useId('combobox-');\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['children', 'size'],\n  });\n\n  // reset any typed value when an option is selected\n  baseState.selectOption = (ev: SelectionEvents, option: OptionValue) => {\n    setValue(undefined);\n    selectOption(ev, option);\n  };\n\n  baseState.setOpen = (ev, newState: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    if (!newState && !freeform) {\n      setValue(undefined);\n    }\n\n    setOpen(ev, newState);\n  };\n\n  const triggerRef = React.useRef<HTMLInputElement>(null);\n\n  const listbox = useListboxSlot(props.listbox, comboboxPopupRef, {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\n  });\n\n  const triggerSlot = useInputTriggerSlot(props.input ?? {}, useMergedRefs(triggerRef, ref), {\n    state: baseState,\n    freeform,\n    defaultProps: {\n      type: 'text',\n      value: value ?? '',\n      'aria-controls': open ? listbox?.id : undefined,\n      ...triggerNativeProps,\n    },\n  });\n\n  const rootSlot = slot.always(props.root, {\n    defaultProps: {\n      'aria-owns': !inlinePopup && open ? listbox?.id : undefined,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const showClearIcon = selectedOptions.length > 0 && clearable && !multiselect;\n  const state: ComboboxState = {\n    components: { root: 'div', input: 'input', expandIcon: 'span', listbox: Listbox, clearIcon: 'span' },\n    root: rootSlot,\n    input: triggerSlot,\n    listbox: open || hasFocus ? listbox : undefined,\n    clearIcon: slot.optional(props.clearIcon, {\n      defaultProps: {\n        'aria-hidden': 'true',\n        children: <DismissIcon />,\n      },\n      elementType: 'span',\n      renderByDefault: true,\n    }),\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-expanded': open,\n        children: <ChevronDownIcon />,\n        role: 'button',\n      },\n      elementType: 'span',\n    }),\n    showClearIcon,\n    ...baseState,\n  };\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown } = state.expandIcon || {};\n\n  const onExpandIconMouseDown = useEventCallback(\n    mergeCallbacks(onIconMouseDown, (event: React.MouseEvent<HTMLSpanElement>) => {\n      event.preventDefault();\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n\n    // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n    // using the following steps:\n    // 1. If there is an aria-label, it is \"Open [aria-label]\"\n    // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n    // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n    // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n    const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];\n    const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n    if (!hasExpandLabel) {\n      if (props['aria-labelledby']) {\n        const chevronId = state.expandIcon.id ?? `${comboId}-chevron`;\n        const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\n\n        state.expandIcon['aria-label'] = defaultOpenString;\n        state.expandIcon.id = chevronId;\n        state.expandIcon['aria-labelledby'] = chevronLabelledBy;\n      } else if (props['aria-label']) {\n        state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;\n      } else {\n        state.expandIcon['aria-label'] = defaultOpenString;\n      }\n    }\n  }\n\n  const onClearIconMouseDown = useEventCallback(\n    mergeCallbacks(state.clearIcon?.onMouseDown, (ev: React.MouseEvent<HTMLSpanElement>) => {\n      ev.preventDefault();\n    }),\n  );\n  const onClearIconClick = useEventCallback(\n    mergeCallbacks(state.clearIcon?.onClick, (ev: React.MouseEvent<HTMLSpanElement>) => {\n      clearSelection(ev);\n    }),\n  );\n\n  if (state.clearIcon) {\n    state.clearIcon.onMouseDown = onClearIconMouseDown;\n    state.clearIcon.onClick = onClearIconClick;\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.clearIcon = 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","useEventCallback","useId","useMergedRefs","slot","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useInputTriggerSlot","useCombobox_unstable","props","ref","state","supportsLabelFor","supportsRequired","supportsSize","baseState","editable","clearable","clearSelection","multiselect","open","selectedOptions","selectOption","setOpen","setValue","value","hasFocus","comboboxPopupRef","comboboxTargetRef","disabled","freeform","inlinePopup","comboId","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","ev","option","undefined","newState","triggerRef","useRef","listbox","defaultProps","children","triggerSlot","input","type","id","rootSlot","always","elementType","showClearIcon","length","components","expandIcon","clearIcon","optional","renderByDefault","role","onMouseDown","onIconMouseDown","onExpandIconMouseDown","event","preventDefault","current","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy","onClearIconMouseDown","onClearIconClick","onClick","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}

package/lib/components/Dropdown/useDropdown.js

@@ -47,6 +47,7 @@ import { useButtonTriggerSlot } from './useButtonTriggerSlot';
             type: 'button',
             tabIndex: 0,
             children: baseState.value || props.placeholder,
+            'aria-controls': open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
             ...triggerNativeProps
         }
     });

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        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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"}
+{"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      'aria-controls': open ? listbox?.id : undefined,\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","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"],"mappings":"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"}

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

@@ -71,6 +71,7 @@ const useCombobox_unstable = (props, ref)=>{
         defaultProps: {
             type: 'text',
             value: value !== null && value !== void 0 ? value : '',
+            'aria-controls': open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
             ...triggerNativeProps
         }
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["useCombobox.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, useEventCallback, useId, useMergedRefs, slot } 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 { useInputTriggerSlot } from './useInputTriggerSlot';\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */ export const useCombobox_unstable = (props, ref)=>{\n    var _state_clearIcon, _state_clearIcon1;\n    // Merge props from surrounding <Field>, if any\n    props = useFieldControlProps_unstable(props, {\n        supportsLabelFor: true,\n        supportsRequired: true,\n        supportsSize: true\n    });\n    const baseState = useComboboxBaseState({\n        ...props,\n        editable: true\n    });\n    const { clearable, clearSelection, multiselect, open, selectedOptions, selectOption, setOpen, setValue, value, hasFocus } = baseState;\n    const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n    const { disabled, freeform, inlinePopup } = props;\n    const comboId = useId('combobox-');\n    const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n        props,\n        primarySlotTagName: 'input',\n        excludedPropNames: [\n            'children',\n            'size'\n        ]\n    });\n    // reset any typed value when an option is selected\n    baseState.selectOption = (ev, option)=>{\n        setValue(undefined);\n        selectOption(ev, option);\n    };\n    baseState.setOpen = (ev, newState)=>{\n        if (disabled) {\n            return;\n        }\n        if (!newState && !freeform) {\n            setValue(undefined);\n        }\n        setOpen(ev, newState);\n    };\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_input;\n    const triggerSlot = useInputTriggerSlot((_props_input = props.input) !== null && _props_input !== void 0 ? _props_input : {}, useMergedRefs(triggerRef, ref), {\n        state: baseState,\n        freeform,\n        defaultProps: {\n            type: 'text',\n            value: value !== null && value !== void 0 ? value : '',\n            ...triggerNativeProps\n        }\n    });\n    const rootSlot = slot.always(props.root, {\n        defaultProps: {\n            'aria-owns': !inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,\n            ...rootNativeProps\n        },\n        elementType: 'div'\n    });\n    rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n    const showClearIcon = selectedOptions.length > 0 && clearable && !multiselect;\n    const state = {\n        components: {\n            root: 'div',\n            input: 'input',\n            expandIcon: 'span',\n            listbox: Listbox,\n            clearIcon: 'span'\n        },\n        root: rootSlot,\n        input: triggerSlot,\n        listbox: open || hasFocus ? listbox : undefined,\n        clearIcon: slot.optional(props.clearIcon, {\n            defaultProps: {\n                'aria-hidden': 'true',\n                children: /*#__PURE__*/ React.createElement(DismissIcon, null)\n            },\n            elementType: 'span',\n            renderByDefault: true\n        }),\n        expandIcon: slot.optional(props.expandIcon, {\n            renderByDefault: true,\n            defaultProps: {\n                'aria-expanded': open,\n                children: /*#__PURE__*/ React.createElement(ChevronDownIcon, null),\n                role: 'button'\n            },\n            elementType: 'span'\n        }),\n        showClearIcon,\n        ...baseState\n    };\n    /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown } = state.expandIcon || {};\n    const onExpandIconMouseDown = useEventCallback(mergeCallbacks(onIconMouseDown, (event)=>{\n        var _triggerRef_current;\n        event.preventDefault();\n        state.setOpen(event, !state.open);\n        (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n    }));\n    if (state.expandIcon) {\n        state.expandIcon.onMouseDown = onExpandIconMouseDown;\n        // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n        // using the following steps:\n        // 1. If there is an aria-label, it is \"Open [aria-label]\"\n        // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n        // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n        // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n        const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];\n        const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n        if (!hasExpandLabel) {\n            if (props['aria-labelledby']) {\n                var _state_expandIcon_id;\n                const chevronId = (_state_expandIcon_id = state.expandIcon.id) !== null && _state_expandIcon_id !== void 0 ? _state_expandIcon_id : `${comboId}-chevron`;\n                const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\n                state.expandIcon['aria-label'] = defaultOpenString;\n                state.expandIcon.id = chevronId;\n                state.expandIcon['aria-labelledby'] = chevronLabelledBy;\n            } else if (props['aria-label']) {\n                state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;\n            } else {\n                state.expandIcon['aria-label'] = defaultOpenString;\n            }\n        }\n    }\n    const onClearIconMouseDown = useEventCallback(mergeCallbacks((_state_clearIcon = state.clearIcon) === null || _state_clearIcon === void 0 ? void 0 : _state_clearIcon.onMouseDown, (ev)=>{\n        ev.preventDefault();\n    }));\n    const onClearIconClick = useEventCallback(mergeCallbacks((_state_clearIcon1 = state.clearIcon) === null || _state_clearIcon1 === void 0 ? void 0 : _state_clearIcon1.onClick, (ev)=>{\n        clearSelection(ev);\n    }));\n    if (state.clearIcon) {\n        state.clearIcon.onMouseDown = onClearIconMouseDown;\n        state.clearIcon.onClick = onClearIconClick;\n    }\n    // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n    if (multiselect) {\n        state.clearIcon = 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":["useCombobox_unstable","props","ref","_state_clearIcon","_state_clearIcon1","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","supportsSize","baseState","useComboboxBaseState","editable","clearable","clearSelection","multiselect","open","selectedOptions","selectOption","setOpen","setValue","value","hasFocus","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","disabled","freeform","inlinePopup","comboId","useId","primary","triggerNativeProps","root","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","ev","option","undefined","newState","triggerRef","React","useRef","listbox","useListboxSlot","state","defaultProps","children","_props_input","triggerSlot","useInputTriggerSlot","input","useMergedRefs","type","rootSlot","slot","always","id","elementType","showClearIcon","length","components","expandIcon","Listbox","clearIcon","optional","createElement","DismissIcon","renderByDefault","ChevronDownIcon","role","onMouseDown","onIconMouseDown","onExpandIconMouseDown","useEventCallback","mergeCallbacks","event","_triggerRef_current","preventDefault","current","focus","hasExpandLabel","defaultOpenString","_state_expandIcon_id","chevronId","chevronLabelledBy","onClearIconMouseDown","onClearIconClick","onClick","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}
+{"version":3,"sources":["useCombobox.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, useEventCallback, useId, useMergedRefs, slot } 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 { useInputTriggerSlot } from './useInputTriggerSlot';\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */ export const useCombobox_unstable = (props, ref)=>{\n    var _state_clearIcon, _state_clearIcon1;\n    // Merge props from surrounding <Field>, if any\n    props = useFieldControlProps_unstable(props, {\n        supportsLabelFor: true,\n        supportsRequired: true,\n        supportsSize: true\n    });\n    const baseState = useComboboxBaseState({\n        ...props,\n        editable: true\n    });\n    const { clearable, clearSelection, multiselect, open, selectedOptions, selectOption, setOpen, setValue, value, hasFocus } = baseState;\n    const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n    const { disabled, freeform, inlinePopup } = props;\n    const comboId = useId('combobox-');\n    const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n        props,\n        primarySlotTagName: 'input',\n        excludedPropNames: [\n            'children',\n            'size'\n        ]\n    });\n    // reset any typed value when an option is selected\n    baseState.selectOption = (ev, option)=>{\n        setValue(undefined);\n        selectOption(ev, option);\n    };\n    baseState.setOpen = (ev, newState)=>{\n        if (disabled) {\n            return;\n        }\n        if (!newState && !freeform) {\n            setValue(undefined);\n        }\n        setOpen(ev, newState);\n    };\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_input;\n    const triggerSlot = useInputTriggerSlot((_props_input = props.input) !== null && _props_input !== void 0 ? _props_input : {}, useMergedRefs(triggerRef, ref), {\n        state: baseState,\n        freeform,\n        defaultProps: {\n            type: 'text',\n            value: value !== null && value !== void 0 ? value : '',\n            'aria-controls': open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,\n            ...triggerNativeProps\n        }\n    });\n    const rootSlot = slot.always(props.root, {\n        defaultProps: {\n            'aria-owns': !inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,\n            ...rootNativeProps\n        },\n        elementType: 'div'\n    });\n    rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n    const showClearIcon = selectedOptions.length > 0 && clearable && !multiselect;\n    const state = {\n        components: {\n            root: 'div',\n            input: 'input',\n            expandIcon: 'span',\n            listbox: Listbox,\n            clearIcon: 'span'\n        },\n        root: rootSlot,\n        input: triggerSlot,\n        listbox: open || hasFocus ? listbox : undefined,\n        clearIcon: slot.optional(props.clearIcon, {\n            defaultProps: {\n                'aria-hidden': 'true',\n                children: /*#__PURE__*/ React.createElement(DismissIcon, null)\n            },\n            elementType: 'span',\n            renderByDefault: true\n        }),\n        expandIcon: slot.optional(props.expandIcon, {\n            renderByDefault: true,\n            defaultProps: {\n                'aria-expanded': open,\n                children: /*#__PURE__*/ React.createElement(ChevronDownIcon, null),\n                role: 'button'\n            },\n            elementType: 'span'\n        }),\n        showClearIcon,\n        ...baseState\n    };\n    /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown } = state.expandIcon || {};\n    const onExpandIconMouseDown = useEventCallback(mergeCallbacks(onIconMouseDown, (event)=>{\n        var _triggerRef_current;\n        event.preventDefault();\n        state.setOpen(event, !state.open);\n        (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n    }));\n    if (state.expandIcon) {\n        state.expandIcon.onMouseDown = onExpandIconMouseDown;\n        // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n        // using the following steps:\n        // 1. If there is an aria-label, it is \"Open [aria-label]\"\n        // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n        // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n        // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n        const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];\n        const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n        if (!hasExpandLabel) {\n            if (props['aria-labelledby']) {\n                var _state_expandIcon_id;\n                const chevronId = (_state_expandIcon_id = state.expandIcon.id) !== null && _state_expandIcon_id !== void 0 ? _state_expandIcon_id : `${comboId}-chevron`;\n                const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\n                state.expandIcon['aria-label'] = defaultOpenString;\n                state.expandIcon.id = chevronId;\n                state.expandIcon['aria-labelledby'] = chevronLabelledBy;\n            } else if (props['aria-label']) {\n                state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;\n            } else {\n                state.expandIcon['aria-label'] = defaultOpenString;\n            }\n        }\n    }\n    const onClearIconMouseDown = useEventCallback(mergeCallbacks((_state_clearIcon = state.clearIcon) === null || _state_clearIcon === void 0 ? void 0 : _state_clearIcon.onMouseDown, (ev)=>{\n        ev.preventDefault();\n    }));\n    const onClearIconClick = useEventCallback(mergeCallbacks((_state_clearIcon1 = state.clearIcon) === null || _state_clearIcon1 === void 0 ? void 0 : _state_clearIcon1.onClick, (ev)=>{\n        clearSelection(ev);\n    }));\n    if (state.clearIcon) {\n        state.clearIcon.onMouseDown = onClearIconMouseDown;\n        state.clearIcon.onClick = onClearIconClick;\n    }\n    // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n    if (multiselect) {\n        state.clearIcon = 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":["useCombobox_unstable","props","ref","_state_clearIcon","_state_clearIcon1","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","supportsSize","baseState","useComboboxBaseState","editable","clearable","clearSelection","multiselect","open","selectedOptions","selectOption","setOpen","setValue","value","hasFocus","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","disabled","freeform","inlinePopup","comboId","useId","primary","triggerNativeProps","root","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","ev","option","undefined","newState","triggerRef","React","useRef","listbox","useListboxSlot","state","defaultProps","children","_props_input","triggerSlot","useInputTriggerSlot","input","useMergedRefs","type","id","rootSlot","slot","always","elementType","showClearIcon","length","components","expandIcon","Listbox","clearIcon","optional","createElement","DismissIcon","renderByDefault","ChevronDownIcon","role","onMouseDown","onIconMouseDown","onExpandIconMouseDown","useEventCallback","mergeCallbacks","event","_triggerRef_current","preventDefault","current","focus","hasExpandLabel","defaultOpenString","_state_expandIcon_id","chevronId","chevronLabelledBy","onClearIconMouseDown","onClearIconClick","onClick","process","env","NODE_ENV","useEffect","console","error"],"mappings":";;;;+BAiBiBA;;;eAAAA;;;;iEAjBM;4BACuB;4BACuC;gCACmB;sCACnE;wCACE;yBACf;gCACO;qCACK;AASzB,MAAMA,uBAAuB,CAACC,OAAOC;IAC5C,IAAIC,kBAAkBC;IACtB,+CAA+C;IAC/CH,QAAQI,IAAAA,yCAA6B,EAACJ,OAAO;QACzCK,kBAAkB;QAClBC,kBAAkB;QAClBC,cAAc;IAClB;IACA,MAAMC,YAAYC,IAAAA,0CAAoB,EAAC;QACnC,GAAGT,KAAK;QACRU,UAAU;IACd;IACA,MAAM,EAAEC,SAAS,EAAEC,cAAc,EAAEC,WAAW,EAAEC,IAAI,EAAEC,eAAe,EAAEC,YAAY,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGZ;IAC5H,MAAM,CAACa,kBAAkBC,kBAAkB,GAAGC,IAAAA,8CAAsB,EAACvB;IACrE,MAAM,EAAEwB,QAAQ,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAG1B;IAC5C,MAAM2B,UAAUC,IAAAA,qBAAK,EAAC;IACtB,MAAM,EAAEC,SAASC,kBAAkB,EAAEC,MAAMC,eAAe,EAAE,GAAGC,IAAAA,yCAAyB,EAAC;QACrFjC;QACAkC,oBAAoB;QACpBC,mBAAmB;YACf;YACA;SACH;IACL;IACA,mDAAmD;IACnD3B,UAAUQ,YAAY,GAAG,CAACoB,IAAIC;QAC1BnB,SAASoB;QACTtB,aAAaoB,IAAIC;IACrB;IACA7B,UAAUS,OAAO,GAAG,CAACmB,IAAIG;QACrB,IAAIf,UAAU;YACV;QACJ;QACA,IAAI,CAACe,YAAY,CAACd,UAAU;YACxBP,SAASoB;QACb;QACArB,QAAQmB,IAAIG;IAChB;IACA,MAAMC,aAAaC,OAAMC,MAAM,CAAC;IAChC,MAAMC,UAAUC,IAAAA,8BAAc,EAAC5C,MAAM2C,OAAO,EAAEtB,kBAAkB;QAC5DwB,OAAOrC;QACPgC;QACAM,cAAc;YACVC,UAAU/C,MAAM+C,QAAQ;QAC5B;IACJ;IACA,IAAIC;IACJ,MAAMC,cAAcC,IAAAA,wCAAmB,EAAC,AAACF,CAAAA,eAAehD,MAAMmD,KAAK,AAAD,MAAO,QAAQH,iBAAiB,KAAK,IAAIA,eAAe,CAAC,GAAGI,IAAAA,6BAAa,EAACZ,YAAYvC,MAAM;QAC1J4C,OAAOrC;QACPiB;QACAqB,cAAc;YACVO,MAAM;YACNlC,OAAOA,UAAU,QAAQA,UAAU,KAAK,IAAIA,QAAQ;YACpD,iBAAiBL,OAAO6B,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQW,EAAE,GAAGhB;YACvF,GAAGR,kBAAkB;QACzB;IACJ;IACA,MAAMyB,WAAWC,oBAAI,CAACC,MAAM,CAACzD,MAAM+B,IAAI,EAAE;QACrCe,cAAc;YACV,aAAa,CAACpB,eAAeZ,OAAO6B,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQW,EAAE,GAAGhB;YACnG,GAAGN,eAAe;QACtB;QACA0B,aAAa;IACjB;IACAH,SAAStD,GAAG,GAAGmD,IAAAA,6BAAa,EAACG,SAAStD,GAAG,EAAEqB;IAC3C,MAAMqC,gBAAgB5C,gBAAgB6C,MAAM,GAAG,KAAKjD,aAAa,CAACE;IAClE,MAAMgC,QAAQ;QACVgB,YAAY;YACR9B,MAAM;YACNoB,OAAO;YACPW,YAAY;YACZnB,SAASoB,gBAAO;YAChBC,WAAW;QACf;QACAjC,MAAMwB;QACNJ,OAAOF;QACPN,SAAS7B,QAAQM,WAAWuB,UAAUL;QACtC0B,WAAWR,oBAAI,CAACS,QAAQ,CAACjE,MAAMgE,SAAS,EAAE;YACtClB,cAAc;gBACV,eAAe;gBACfC,UAAU,WAAW,GAAGN,OAAMyB,aAAa,CAACC,0BAAW,EAAE;YAC7D;YACAT,aAAa;YACbU,iBAAiB;QACrB;QACAN,YAAYN,oBAAI,CAACS,QAAQ,CAACjE,MAAM8D,UAAU,EAAE;YACxCM,iBAAiB;YACjBtB,cAAc;gBACV,iBAAiBhC;gBACjBiC,UAAU,WAAW,GAAGN,OAAMyB,aAAa,CAACG,8BAAe,EAAE;gBAC7DC,MAAM;YACV;YACAZ,aAAa;QACjB;QACAC;QACA,GAAGnD,SAAS;IAChB;IACA,6DAA6D,GAAG,MAAM,EAAE+D,aAAaC,eAAe,EAAE,GAAG3B,MAAMiB,UAAU,IAAI,CAAC;IAC9H,MAAMW,wBAAwBC,IAAAA,gCAAgB,EAACC,IAAAA,8BAAc,EAACH,iBAAiB,CAACI;QAC5E,IAAIC;QACJD,MAAME,cAAc;QACpBjC,MAAM5B,OAAO,CAAC2D,OAAO,CAAC/B,MAAM/B,IAAI;QAC/B+D,CAAAA,sBAAsBrC,WAAWuC,OAAO,AAAD,MAAO,QAAQF,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBG,KAAK;IAC9H;IACA,IAAInC,MAAMiB,UAAU,EAAE;QAClBjB,MAAMiB,UAAU,CAACS,WAAW,GAAGE;QAC/B,iGAAiG;QACjG,6BAA6B;QAC7B,0DAA0D;QAC1D,yGAAyG;QACzG,mEAAmE;QACnE,kGAAkG;QAClG,MAAMQ,iBAAiBpC,MAAMiB,UAAU,CAAC,aAAa,IAAIjB,MAAMiB,UAAU,CAAC,kBAAkB;QAC5F,MAAMoB,oBAAoB,QAAQ,gDAAgD;QAClF,IAAI,CAACD,gBAAgB;YACjB,IAAIjF,KAAK,CAAC,kBAAkB,EAAE;gBAC1B,IAAImF;gBACJ,MAAMC,YAAY,AAACD,CAAAA,uBAAuBtC,MAAMiB,UAAU,CAACR,EAAE,AAAD,MAAO,QAAQ6B,yBAAyB,KAAK,IAAIA,uBAAuB,CAAC,EAAExD,QAAQ,QAAQ,CAAC;gBACxJ,MAAM0D,oBAAoB,CAAC,EAAED,UAAU,CAAC,EAAEvC,MAAMM,KAAK,CAAC,kBAAkB,CAAC,CAAC;gBAC1EN,MAAMiB,UAAU,CAAC,aAAa,GAAGoB;gBACjCrC,MAAMiB,UAAU,CAACR,EAAE,GAAG8B;gBACtBvC,MAAMiB,UAAU,CAAC,kBAAkB,GAAGuB;YAC1C,OAAO,IAAIrF,KAAK,CAAC,aAAa,EAAE;gBAC5B6C,MAAMiB,UAAU,CAAC,aAAa,GAAG,CAAC,EAAEoB,kBAAkB,CAAC,EAAElF,KAAK,CAAC,aAAa,CAAC,CAAC;YAClF,OAAO;gBACH6C,MAAMiB,UAAU,CAAC,aAAa,GAAGoB;YACrC;QACJ;IACJ;IACA,MAAMI,uBAAuBZ,IAAAA,gCAAgB,EAACC,IAAAA,8BAAc,EAAC,AAACzE,CAAAA,mBAAmB2C,MAAMmB,SAAS,AAAD,MAAO,QAAQ9D,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBqE,WAAW,EAAE,CAACnC;QAChLA,GAAG0C,cAAc;IACrB;IACA,MAAMS,mBAAmBb,IAAAA,gCAAgB,EAACC,IAAAA,8BAAc,EAAC,AAACxE,CAAAA,oBAAoB0C,MAAMmB,SAAS,AAAD,MAAO,QAAQ7D,sBAAsB,KAAK,IAAI,KAAK,IAAIA,kBAAkBqF,OAAO,EAAE,CAACpD;QAC3KxB,eAAewB;IACnB;IACA,IAAIS,MAAMmB,SAAS,EAAE;QACjBnB,MAAMmB,SAAS,CAACO,WAAW,GAAGe;QAC9BzC,MAAMmB,SAAS,CAACwB,OAAO,GAAGD;IAC9B;IACA,gGAAgG;IAChG,IAAI1E,aAAa;QACbgC,MAAMmB,SAAS,GAAG1B;IACtB;IACA,IAAImD,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACvC,kGAAkG;QAClGlD,OAAMmD,SAAS,CAAC;YACZ,IAAIjF,aAAaE,aAAa;gBAC1B,sCAAsC;gBACtCgF,QAAQC,KAAK,CAAC,CAAC,iFAAiF,CAAC;YACrG;QACJ,GAAG;YACCnF;YACAE;SACH;IACL;IACA,OAAOgC;AACX"}

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

@@ -50,6 +50,7 @@ const useDropdown_unstable = (props, ref)=>{
             type: 'button',
             tabIndex: 0,
             children: baseState.value || props.placeholder,
+            'aria-controls': open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
             ...triggerNativeProps
         }
     });

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                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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"}
+{"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            'aria-controls': open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,\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","id","undefined","rootSlot","slot","always","inlinePopup","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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-combobox",
-  "version": "9.7.2",
+  "version": "9.7.3",
   "description": "Fluent UI React Combobox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,11 +35,11 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.7",
     "@fluentui/react-context-selector": "^9.1.50",
-    "@fluentui/react-field": "^9.1.51",
+    "@fluentui/react-field": "^9.1.52",
     "@fluentui/react-icons": "^2.0.224",
     "@fluentui/react-jsx-runtime": "^9.0.28",
     "@fluentui/react-portal": "^9.4.11",
-    "@fluentui/react-positioning": "^9.13.0",
+    "@fluentui/react-positioning": "^9.13.1",
     "@fluentui/react-shared-contexts": "^9.14.0",
     "@fluentui/react-tabster": "^9.17.4",
     "@fluentui/react-theme": "^9.1.16",