@fluentui/react-combobox 9.2.6 → 9.2.8

package/CHANGELOG.json

@@ -2,34 +2,88 @@
   "name": "@fluentui/react-combobox",
   "entries": [
     {
-      "date": "Thu, 23 Mar 2023 12:28:45 GMT",
-      "tag": "@fluentui/react-combobox_v9.2.6",
-      "version": "9.2.6",
+      "date": "Thu, 06 Apr 2023 23:59:46 GMT",
+      "tag": "@fluentui/react-combobox_v9.2.8",
+      "version": "9.2.8",
       "comments": {
         "patch": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "eee5716e76dc6a5bef9316546a352694bbe5750a",
+            "comment": "chore: Update package version of react-field"
+          },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "5a8d7a29645b3b500eb7145d2e42ac34fcafc4c6",
+            "comment": "chore: Hook up FieldContext for use inside a Field"
+          },
           {
             "author": "beachball",
             "package": "@fluentui/react-combobox",
-            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.28",
-            "commit": "be0ca69899300abe3c8478c435e0f6837138479b"
+            "comment": "Bump @fluentui/react-field to v9.0.0-beta.1",
+            "commit": "7a46cab3d31a233b89b7188e994b24712af5393c"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 04 Apr 2023 18:44:48 GMT",
+      "tag": "@fluentui/react-combobox_v9.2.7",
+      "version": "9.2.7",
+      "comments": {
+        "patch": [
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "83c18ac81b068a45f6ea4d3b7912d5d6873e9d06",
+            "comment": "fix: make Option's checkIcon slot render conditionally"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-combobox",
-            "comment": "Bump @fluentui/react-portal to v9.2.3",
-            "commit": "be0ca69899300abe3c8478c435e0f6837138479b"
+            "comment": "Bump @fluentui/react-context-selector to v9.1.16",
+            "commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-combobox",
-            "comment": "Bump @fluentui/react-positioning to v9.5.7",
-            "commit": "be0ca69899300abe3c8478c435e0f6837138479b"
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.29",
+            "commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-combobox",
-            "comment": "Bump @fluentui/react-shared-contexts to v9.3.3",
-            "commit": "be0ca69899300abe3c8478c435e0f6837138479b"
+            "comment": "Bump @fluentui/react-portal to v9.2.4",
+            "commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-positioning to v9.5.8",
+            "commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-utilities to v9.7.3",
+            "commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 24 Mar 2023 14:58:55 GMT",
+      "tag": "@fluentui/react-combobox_v9.2.6",
+      "version": "9.2.6",
+      "comments": {
+        "none": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "0f198d87130e4f9fcacdaa187b850e507e0b1ec8",
+            "comment": "Sync with latest released version on npm"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,20 +1,33 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Thu, 23 Mar 2023 12:28:45 GMT and should not be manually modified.
+This log was last generated on Thu, 06 Apr 2023 23:59:46 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [9.2.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.2.6)
+## [9.2.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.2.8)
 
-Thu, 23 Mar 2023 12:28:45 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.2.5..@fluentui/react-combobox_v9.2.6)
+Thu, 06 Apr 2023 23:59:46 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.2.7..@fluentui/react-combobox_v9.2.8)
 
 ### Patches
 
-- Bump @fluentui/react-field to v9.0.0-alpha.28 ([PR #27286](https://github.com/microsoft/fluentui/pull/27286) by beachball)
-- Bump @fluentui/react-portal to v9.2.3 ([PR #27286](https://github.com/microsoft/fluentui/pull/27286) by beachball)
-- Bump @fluentui/react-positioning to v9.5.7 ([PR #27286](https://github.com/microsoft/fluentui/pull/27286) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.3.3 ([PR #27286](https://github.com/microsoft/fluentui/pull/27286) by beachball)
+- chore: Update package version of react-field ([PR #27458](https://github.com/microsoft/fluentui/pull/27458) by behowell@microsoft.com)
+- chore: Hook up FieldContext for use inside a Field ([PR #27399](https://github.com/microsoft/fluentui/pull/27399) by behowell@microsoft.com)
+- Bump @fluentui/react-field to v9.0.0-beta.1 ([PR #27420](https://github.com/microsoft/fluentui/pull/27420) by beachball)
+
+## [9.2.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.2.7)
+
+Tue, 04 Apr 2023 18:44:48 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.2.6..@fluentui/react-combobox_v9.2.7)
+
+### Patches
+
+- fix: make Option's checkIcon slot render conditionally ([PR #27409](https://github.com/microsoft/fluentui/pull/27409) by seanmonahan@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.16 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
+- Bump @fluentui/react-field to v9.0.0-alpha.29 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
+- Bump @fluentui/react-portal to v9.2.4 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
+- Bump @fluentui/react-positioning to v9.5.8 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
+- Bump @fluentui/react-utilities to v9.7.3 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
 
 ## [9.2.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.2.5)
 

package/lib/components/Combobox/useCombobox.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useFieldControlProps_unstable } from '@fluentui/react-field';
 import { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';
 import { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';
 import { getPartitionedNativeProps, resolveShorthand, mergeCallbacks, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';
@@ -18,6 +19,12 @@ import { Listbox } from '../Listbox/Listbox';
  */
 export const useCombobox_unstable = (props, ref) => {
   var _props_input;
+  // Merge props from surrounding <Field>, if any
+  props = useFieldControlProps_unstable(props, {
+    supportsLabelFor: true,
+    supportsRequired: true,
+    supportsSize: true
+  });
   const baseState = useComboboxBaseState({
     ...props,
     editable: true

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

@@ -1 +1 @@
-{"version":3,"names":["React","ArrowLeft","ArrowRight","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","resolveShorthand","mergeCallbacks","useEventCallback","useId","useMergedRefs","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useCombobox_unstable","props","ref","_props_input","baseState","editable","activeOption","clearSelection","getIndexOfId","getOptionsMatchingText","hasFocus","open","selectOption","selectedOptions","setActiveOption","setFocusVisible","setOpen","setValue","value","disabled","freeform","inlinePopup","multiselect","comboId","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","triggerRef","hideActiveDescendant","setHideActiveDescendant","useState","popupDimensions","setPopupDimensions","useEffect","_rootRef_current","width","current","clientWidth","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","_matches_","undefined","ev","onTriggerBlur","text","newState","onTriggerChange","target","matchingOption","onTriggerKeyDown","key","triggerSlot","listboxSlot","input","required","defaultProps","type","onChange","onBlur","onKeyDown","listbox","children","style","state","components","expandIcon","createElement","role","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","_triggerRef_current","focus","hasExpandLabel","defaultOpenString","_state_expandIcon_id","chevronId","chevronLabelledBy"],"sources":["../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  mergeCallbacks,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\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  const baseState = useComboboxBaseState({ ...props, editable: true });\n  const {\n    activeOption,\n    clearSelection,\n    getIndexOfId,\n    getOptionsMatchingText,\n    hasFocus,\n    open,\n    selectOption,\n    selectedOptions,\n    setActiveOption,\n    setFocusVisible,\n    setOpen,\n    setValue,\n    value,\n  } = baseState;\n  const { disabled, freeform, inlinePopup, multiselect } = 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  const rootRef = React.useRef<HTMLDivElement>(null);\n  const triggerRef = React.useRef<HTMLInputElement>(null);\n\n  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n  // calculate listbox width style based on trigger width\n  const [popupDimensions, setPopupDimensions] = React.useState<{ width: string }>();\n  React.useEffect(() => {\n    // only recalculate width when opening\n    if (open) {\n      const width = `${rootRef.current?.clientWidth}px`;\n      if (width !== popupDimensions?.width) {\n        setPopupDimensions({ width });\n      }\n    }\n  }, [open, popupDimensions]);\n\n  // set active option and selection based on typing\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = inputValue?.trim().toLowerCase();\n\n    if (!searchString || searchString.length === 0) {\n      return;\n    }\n\n    const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n    const matches = getOptionsMatchingText(matcher);\n\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const startIndex = getIndexOfId(activeOption.id);\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  /* Handle typed input */\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  const onTriggerBlur = (ev: React.FocusEvent<HTMLInputElement>) => {\n    // handle selection and updating value if freeform is false\n    if (!baseState.open && !freeform) {\n      // select matching option, if the value fully matches\n      if (value && activeOption && value.trim().toLowerCase() === activeOption?.text.toLowerCase()) {\n        baseState.selectOption(ev, activeOption);\n      }\n\n      // reset typed value when the input loses focus while collapsed, unless freeform is true\n      setValue(undefined);\n    }\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  // update value and active option based on input\n  const onTriggerChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = ev.target.value;\n    // update uncontrolled value\n    baseState.setValue(inputValue);\n\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n    setActiveOption(matchingOption);\n\n    setFocusVisible(true);\n\n    // clear selection for single-select if the input value no longer matches the selection\n    if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n      clearSelection(ev);\n    }\n  };\n\n  // open Combobox when typing\n  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!open && getDropdownActionFromKey(ev) === 'Type') {\n      baseState.setOpen(ev, true);\n    }\n\n    // clear activedescendant when moving the text insertion cursor\n    if (ev.key === ArrowLeft || ev.key === ArrowRight) {\n      setHideActiveDescendant(true);\n    } else {\n      setHideActiveDescendant(false);\n    }\n  };\n\n  // resolve input and listbox slot props\n  let triggerSlot: Slot<'input'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = resolveShorthand(props.input, {\n    required: true,\n    defaultProps: {\n      ref: useMergedRefs(props.input?.ref, triggerRef),\n      type: 'text',\n      value: value ?? '',\n      ...triggerNativeProps,\n    },\n  });\n\n  triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n  triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);\n  triggerSlot.onKeyDown = mergeCallbacks(triggerSlot.onKeyDown, onTriggerKeyDown);\n\n  // only resolve listbox slot if needed\n  listboxSlot =\n    open || hasFocus\n      ? resolveShorthand(props.listbox, {\n          required: true,\n          defaultProps: {\n            children: props.children,\n            style: popupDimensions,\n          },\n        })\n      : undefined;\n\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n  if (hideActiveDescendant) {\n    triggerSlot['aria-activedescendant'] = undefined;\n  }\n\n  const state: ComboboxState = {\n    components: {\n      root: 'div',\n      input: 'input',\n      expandIcon: 'span',\n      listbox: Listbox,\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        'aria-owns': !inlinePopup ? listboxSlot?.id : undefined,\n        ...rootNativeProps,\n      },\n    }),\n    input: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: resolveShorthand(props.expandIcon, {\n      required: true,\n      defaultProps: {\n        'aria-expanded': open,\n        children: <ChevronDownIcon />,\n        role: 'button',\n      },\n    }),\n    ...baseState,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};\n  const onExpandIconMouseDown = useEventCallback(\n    mergeCallbacks(onIconMouseDown, () => {\n      // do not dismiss on blur when closing via clicking the icon\n      if (open) {\n        baseState.ignoreNextBlur.current = true;\n      }\n    }),\n  );\n\n  const onExpandIconClick = useEventCallback(\n    mergeCallbacks(onIconClick, (event: React.MouseEvent<HTMLSpanElement>) => {\n      // open and set focus\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n\n      // set focus visible=false, since this can only be done with the mouse/pointer\n      setFocusVisible(false);\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n    state.expandIcon.onClick = onExpandIconClick;\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  return state;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,SAAS,EAAEC,UAAU,QAAQ;AACtC,SAASC,kBAAA,IAAsBC,eAAe,QAAQ;AACtD,SACEC,yBAAyB,EACzBC,gBAAgB,EAChBC,cAAc,EACdC,gBAAgB,EAChBC,KAAK,EACLC,aAAa,QACR;AACP,SAASC,wBAAwB,QAAQ;AACzC,SAASC,oBAAoB,QAAQ;AACrC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,sBAAsB,QAAQ;AACvC,SAASC,OAAO,QAAQ;AAMxB;;;;;;;;;AASA,OAAO,MAAMC,oBAAA,GAAuBA,CAACC,KAAA,EAAsBC,GAAA,KAAoD;MA2ItFC,YAAA;EA1IvB,MAAMC,SAAA,GAAYR,oBAAA,CAAqB;IAAE,GAAGK,KAAK;IAAEI,QAAA,EAAU;EAAK;EAClE,MAAM;IACJC,YAAA;IACAC,cAAA;IACAC,YAAA;IACAC,sBAAA;IACAC,QAAA;IACAC,IAAA;IACAC,YAAA;IACAC,eAAA;IACAC,eAAA;IACAC,eAAA;IACAC,OAAA;IACAC,QAAA;IACAC;EAAK,CACN,GAAGd,SAAA;EACJ,MAAM;IAAEe,QAAA;IAAUC,QAAA;IAAUC,WAAA;IAAaC;EAAW,CAAE,GAAGrB,KAAA;EACzD,MAAMsB,OAAA,GAAU9B,KAAA,CAAM;EAEtB,MAAM;IAAE+B,OAAA,EAASC,kBAAA;IAAoBC,IAAA,EAAMC;EAAe,CAAE,GAAGtC,yBAAA,CAA0B;IACvFY,KAAA;IACA2B,kBAAA,EAAoB;IACpBC,iBAAA,EAAmB,CAAC,YAAY;EAClC;EAEA,MAAMC,OAAA,GAAU9C,KAAA,CAAM+C,MAAM,CAAiB,IAAI;EACjD,MAAMC,UAAA,GAAahD,KAAA,CAAM+C,MAAM,CAAmB,IAAI;EAEtD;EACA;EACA;EACA,MAAM,CAACE,oBAAA,EAAsBC,uBAAA,CAAwB,GAAGlD,KAAA,CAAMmD,QAAQ,CAAC,KAAK;EAE5E;EACA,MAAM,CAACC,eAAA,EAAiBC,kBAAA,CAAmB,GAAGrD,KAAA,CAAMmD,QAAQ;EAC5DnD,KAAA,CAAMsD,SAAS,CAAC,MAAM;IACpB;IACA,IAAI3B,IAAA,EAAM;UACS4B,gBAAA;MAAjB,MAAMC,KAAA,GAAS,GAAE,CAAAD,gBAAA,GAAAT,OAAA,CAAQW,OAAO,cAAfF,gBAAA,uBAAAA,gBAAA,CAAiBG,WAAY,IAAG;MACjD,IAAIF,KAAA,MAAUJ,eAAA,aAAAA,eAAA,uBAAAA,eAAA,CAAiBI,KAAK,CAAD,EAAG;QACpCH,kBAAA,CAAmB;UAAEG;QAAM;MAC7B;IACF;EACF,GAAG,CAAC7B,IAAA,EAAMyB,eAAA,CAAgB;EAE1B;EACA,MAAMO,kBAAA,GAAsBC,UAAA,IAAgD;IAC1E,MAAMC,YAAA,GAAeD,UAAA,aAAAA,UAAA,uBAAAA,UAAA,CAAYE,IAAI,GAAGC,WAAW,EAAE;IAErD,IAAI,CAACF,YAAA,IAAgBA,YAAA,CAAaG,MAAM,KAAK,GAAG;MAC9C;IACF;IAEA,MAAMC,OAAA,GAAWC,UAAA,IAAuBA,UAAA,CAAWH,WAAW,GAAGI,OAAO,CAACN,YAAA,MAAkB;IAC3F,MAAMO,OAAA,GAAU3C,sBAAA,CAAuBwC,OAAA;IAEvC;IACA,IAAIG,OAAA,CAAQJ,MAAM,GAAG,KAAK1C,YAAA,EAAc;MACtC,MAAM+C,UAAA,GAAa7C,YAAA,CAAaF,YAAA,CAAagD,EAAE;MAC/C,MAAMC,SAAA,GAAYH,OAAA,CAAQI,IAAI,CAACC,MAAA,IAAUjD,YAAA,CAAaiD,MAAA,CAAOH,EAAE,KAAKD,UAAA;MACpE,OAAOE,SAAA,aAAAA,SAAA,cAAAA,SAAA,GAAaH,OAAO,CAAC,EAAE;IAChC;QAEOM,SAAA;IAAP,OAAO,CAAAA,SAAA,GAAAN,OAAO,CAAC,EAAE,cAAVM,SAAA,cAAAA,SAAA,GAAcC,SAAS;EAChC;EAEA,yBAEA;EACAvD,SAAA,CAAUQ,YAAY,GAAG,CAACgD,EAAA,EAAqBH,MAAA,KAAwB;IACrExC,QAAA,CAAS0C,SAAA;IACT/C,YAAA,CAAagD,EAAA,EAAIH,MAAA;EACnB;EAEA,MAAMI,aAAA,GAAiBD,EAAA,IAA2C;IAChE;IACA,IAAI,CAACxD,SAAA,CAAUO,IAAI,IAAI,CAACS,QAAA,EAAU;MAChC;MACA,IAAIF,KAAA,IAASZ,YAAA,IAAgBY,KAAA,CAAM4B,IAAI,GAAGC,WAAW,QAAOzC,YAAA,aAAAA,YAAA,uBAAAA,YAAA,CAAcwD,IAAI,CAACf,WAAW,EAAE,CAAD,EAAG;QAC5F3C,SAAA,CAAUQ,YAAY,CAACgD,EAAA,EAAItD,YAAA;MAC7B;MAEA;MACAW,QAAA,CAAS0C,SAAA;IACX;EACF;EAEAvD,SAAA,CAAUY,OAAO,GAAG,CAAC4C,EAAA,EAAIG,QAAA,KAAsB;IAC7C,IAAI5C,QAAA,EAAU;MACZ;IACF;IAEA,IAAI,CAAC4C,QAAA,IAAY,CAAC3C,QAAA,EAAU;MAC1BH,QAAA,CAAS0C,SAAA;IACX;IAEA3C,OAAA,CAAQ4C,EAAA,EAAIG,QAAA;EACd;EAEA;EACA,MAAMC,eAAA,GAAmBJ,EAAA,IAA4C;IACnE,MAAMhB,UAAA,GAAagB,EAAA,CAAGK,MAAM,CAAC/C,KAAK;IAClC;IACAd,SAAA,CAAUa,QAAQ,CAAC2B,UAAA;IAEnB;IACA,MAAMsB,cAAA,GAAiBvB,kBAAA,CAAmBC,UAAA;IAC1C9B,eAAA,CAAgBoD,cAAA;IAEhBnD,eAAA,CAAgB,IAAI;IAEpB;IACA,IAAI,CAACO,WAAA,IAAeT,eAAA,CAAgBmC,MAAM,KAAK,MAAMJ,UAAA,CAAWI,MAAM,GAAG,KAAK,CAACkB,cAAa,GAAI;MAC9F3D,cAAA,CAAeqD,EAAA;IACjB;EACF;EAEA;EACA,MAAMO,gBAAA,GAAoBP,EAAA,IAA8C;IACtE,IAAI,CAACjD,IAAA,IAAQhB,wBAAA,CAAyBiE,EAAA,MAAQ,QAAQ;MACpDxD,SAAA,CAAUY,OAAO,CAAC4C,EAAA,EAAI,IAAI;IAC5B;IAEA;IACA,IAAIA,EAAA,CAAGQ,GAAG,KAAKnF,SAAA,IAAa2E,EAAA,CAAGQ,GAAG,KAAKlF,UAAA,EAAY;MACjDgD,uBAAA,CAAwB,IAAI;IAC9B,OAAO;MACLA,uBAAA,CAAwB,KAAK;IAC/B;EACF;EAEA;EACA,IAAImC,WAAA;EACJ,IAAIC,WAAA;EAEJD,WAAA,GAAc/E,gBAAA,CAAiBW,KAAA,CAAMsE,KAAK,EAAE;IAC1CC,QAAA,EAAU,IAAI;IACdC,YAAA,EAAc;MACZvE,GAAA,EAAKR,aAAA,CAAc,CAAAS,YAAA,GAAAF,KAAA,CAAMsE,KAAK,cAAXpE,YAAA,uBAAAA,YAAA,CAAaD,GAAG,EAAE8B,UAAA;MACrC0C,IAAA,EAAM;MACNxD,KAAA,EAAOA,KAAA,aAAAA,KAAA,cAAAA,KAAA,GAAS,EAAE;MAClB,GAAGO;IACL;EACF;EAEA4C,WAAA,CAAYM,QAAQ,GAAGpF,cAAA,CAAe8E,WAAA,CAAYM,QAAQ,EAAEX,eAAA;EAC5DK,WAAA,CAAYO,MAAM,GAAGrF,cAAA,CAAe8E,WAAA,CAAYO,MAAM,EAAEf,aAAA;EACxDQ,WAAA,CAAYQ,SAAS,GAAGtF,cAAA,CAAe8E,WAAA,CAAYQ,SAAS,EAAEV,gBAAA;EAE9D;EACAG,WAAA,GACE3D,IAAA,IAAQD,QAAA,GACJpB,gBAAA,CAAiBW,KAAA,CAAM6E,OAAO,EAAE;IAC9BN,QAAA,EAAU,IAAI;IACdC,YAAA,EAAc;MACZM,QAAA,EAAU9E,KAAA,CAAM8E,QAAQ;MACxBC,KAAA,EAAO5C;IACT;EACF,KACAuB,SAAS;EAEf,CAACU,WAAA,EAAaC,WAAA,CAAY,GAAGzE,gBAAA,CAAiBI,KAAA,EAAOoE,WAAA,EAAaC,WAAA;EAClE,CAACD,WAAA,EAAaC,WAAA,CAAY,GAAGxE,sBAAA,CAAuBG,KAAA,EAAOG,SAAA,EAAWF,GAAA,EAAKmE,WAAA,EAAaC,WAAA;EAExF,IAAIrC,oBAAA,EAAsB;IACxBoC,WAAW,CAAC,wBAAwB,GAAGV,SAAA;EACzC;EAEA,MAAMsB,KAAA,GAAuB;IAC3BC,UAAA,EAAY;MACVxD,IAAA,EAAM;MACN6C,KAAA,EAAO;MACPY,UAAA,EAAY;MACZL,OAAA,EAAS/E;IACX;IACA2B,IAAA,EAAMpC,gBAAA,CAAiBW,KAAA,CAAMyB,IAAI,EAAE;MACjC8C,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZ,aAAa,CAACpD,WAAA,GAAciD,WAAA,aAAAA,WAAA,uBAAAA,WAAA,CAAahB,EAAE,GAAGK,SAAS;QACvD,GAAGhC;MACL;IACF;IACA4C,KAAA,EAAOF,WAAA;IACPS,OAAA,EAASR,WAAA;IACTa,UAAA,EAAY7F,gBAAA,CAAiBW,KAAA,CAAMkF,UAAU,EAAE;MAC7CX,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZ,iBAAiB9D,IAAA;QACjBoE,QAAA,eAAU/F,KAAA,CAAAoG,aAAA,CAAChG,eAAA;QACXiG,IAAA,EAAM;MACR;IACF;IACA,GAAGjF;EACL;EAEA6E,KAAA,CAAMvD,IAAI,CAACxB,GAAG,GAAGR,aAAA,CAAcuF,KAAA,CAAMvD,IAAI,CAACxB,GAAG,EAAE4B,OAAA;EAE/C;EACA,MAAM;IAAEwD,WAAA,EAAaC,eAAA;IAAiBC,OAAA,EAASC;EAAW,CAAE,GAAGR,KAAA,CAAME,UAAU,IAAI,CAAC;EACpF,MAAMO,qBAAA,GAAwBlG,gBAAA,CAC5BD,cAAA,CAAegG,eAAA,EAAiB,MAAM;IACpC;IACA,IAAI5E,IAAA,EAAM;MACRP,SAAA,CAAUuF,cAAc,CAAClD,OAAO,GAAG,IAAI;IACzC;EACF;EAGF,MAAMmD,iBAAA,GAAoBpG,gBAAA,CACxBD,cAAA,CAAekG,WAAA,EAAcI,KAAA,IAA6C;QAGxEC,mBAAA;IAFA;IACAb,KAAA,CAAMjE,OAAO,CAAC6E,KAAA,EAAO,CAACZ,KAAA,CAAMtE,IAAI;IAChC,CAAAmF,mBAAA,GAAA9D,UAAA,CAAWS,OAAO,cAAlBqD,mBAAA,uBAAAA,mBAAA,CAAoBC,KAAA;IAEpB;IACAhF,eAAA,CAAgB,KAAK;EACvB;EAGF,IAAIkE,KAAA,CAAME,UAAU,EAAE;IACpBF,KAAA,CAAME,UAAU,CAACG,WAAW,GAAGI,qBAAA;IAC/BT,KAAA,CAAME,UAAU,CAACK,OAAO,GAAGI,iBAAA;IAE3B;IACA;IACA;IACA;IACA;IACA;IACA,MAAMI,cAAA,GAAiBf,KAAA,CAAME,UAAU,CAAC,aAAa,IAAIF,KAAA,CAAME,UAAU,CAAC,kBAAkB;IAC5F,MAAMc,iBAAA,GAAoB,QAAQ;IAClC,IAAI,CAACD,cAAA,EAAgB;MACnB,IAAI/F,KAAK,CAAC,kBAAkB,EAAE;YACViG,oBAAA;QAAlB,MAAMC,SAAA,GAAY,CAAAD,oBAAA,GAAAjB,KAAA,CAAME,UAAU,CAAC7B,EAAE,cAAnB4C,oBAAA,cAAAA,oBAAA,GAAwB,GAAE3E,OAAQ,UAAS;QAC7D,MAAM6E,iBAAA,GAAqB,GAAED,SAAU,IAAGlB,KAAA,CAAMV,KAAK,CAAC,kBAAmB,EAAC;QAE1EU,KAAA,CAAME,UAAU,CAAC,aAAa,GAAGc,iBAAA;QACjChB,KAAA,CAAME,UAAU,CAAC7B,EAAE,GAAG6C,SAAA;QACtBlB,KAAA,CAAME,UAAU,CAAC,kBAAkB,GAAGiB,iBAAA;MACxC,OAAO,IAAInG,KAAK,CAAC,aAAa,EAAE;QAC9BgF,KAAA,CAAME,UAAU,CAAC,aAAa,GAAI,GAAEc,iBAAkB,IAAGhG,KAAK,CAAC,aAAc,EAAC;MAChF,OAAO;QACLgF,KAAA,CAAME,UAAU,CAAC,aAAa,GAAGc,iBAAA;MACnC;IACF;EACF;EAEA,OAAOhB,KAAA;AACT"}
+{"version":3,"names":["React","useFieldControlProps_unstable","ArrowLeft","ArrowRight","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","resolveShorthand","mergeCallbacks","useEventCallback","useId","useMergedRefs","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useCombobox_unstable","props","ref","_props_input","supportsLabelFor","supportsRequired","supportsSize","baseState","editable","activeOption","clearSelection","getIndexOfId","getOptionsMatchingText","hasFocus","open","selectOption","selectedOptions","setActiveOption","setFocusVisible","setOpen","setValue","value","disabled","freeform","inlinePopup","multiselect","comboId","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","triggerRef","hideActiveDescendant","setHideActiveDescendant","useState","popupDimensions","setPopupDimensions","useEffect","_rootRef_current","width","current","clientWidth","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","_matches_","undefined","ev","onTriggerBlur","text","newState","onTriggerChange","target","matchingOption","onTriggerKeyDown","key","triggerSlot","listboxSlot","input","required","defaultProps","type","onChange","onBlur","onKeyDown","listbox","children","style","state","components","expandIcon","createElement","role","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","_triggerRef_current","focus","hasExpandLabel","defaultOpenString","_state_expandIcon_id","chevronId","chevronLabelledBy"],"sources":["../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  mergeCallbacks,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\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    activeOption,\n    clearSelection,\n    getIndexOfId,\n    getOptionsMatchingText,\n    hasFocus,\n    open,\n    selectOption,\n    selectedOptions,\n    setActiveOption,\n    setFocusVisible,\n    setOpen,\n    setValue,\n    value,\n  } = baseState;\n  const { disabled, freeform, inlinePopup, multiselect } = 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  const rootRef = React.useRef<HTMLDivElement>(null);\n  const triggerRef = React.useRef<HTMLInputElement>(null);\n\n  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n  // calculate listbox width style based on trigger width\n  const [popupDimensions, setPopupDimensions] = React.useState<{ width: string }>();\n  React.useEffect(() => {\n    // only recalculate width when opening\n    if (open) {\n      const width = `${rootRef.current?.clientWidth}px`;\n      if (width !== popupDimensions?.width) {\n        setPopupDimensions({ width });\n      }\n    }\n  }, [open, popupDimensions]);\n\n  // set active option and selection based on typing\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = inputValue?.trim().toLowerCase();\n\n    if (!searchString || searchString.length === 0) {\n      return;\n    }\n\n    const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n    const matches = getOptionsMatchingText(matcher);\n\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const startIndex = getIndexOfId(activeOption.id);\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  /* Handle typed input */\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  const onTriggerBlur = (ev: React.FocusEvent<HTMLInputElement>) => {\n    // handle selection and updating value if freeform is false\n    if (!baseState.open && !freeform) {\n      // select matching option, if the value fully matches\n      if (value && activeOption && value.trim().toLowerCase() === activeOption?.text.toLowerCase()) {\n        baseState.selectOption(ev, activeOption);\n      }\n\n      // reset typed value when the input loses focus while collapsed, unless freeform is true\n      setValue(undefined);\n    }\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  // update value and active option based on input\n  const onTriggerChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = ev.target.value;\n    // update uncontrolled value\n    baseState.setValue(inputValue);\n\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n    setActiveOption(matchingOption);\n\n    setFocusVisible(true);\n\n    // clear selection for single-select if the input value no longer matches the selection\n    if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n      clearSelection(ev);\n    }\n  };\n\n  // open Combobox when typing\n  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!open && getDropdownActionFromKey(ev) === 'Type') {\n      baseState.setOpen(ev, true);\n    }\n\n    // clear activedescendant when moving the text insertion cursor\n    if (ev.key === ArrowLeft || ev.key === ArrowRight) {\n      setHideActiveDescendant(true);\n    } else {\n      setHideActiveDescendant(false);\n    }\n  };\n\n  // resolve input and listbox slot props\n  let triggerSlot: Slot<'input'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = resolveShorthand(props.input, {\n    required: true,\n    defaultProps: {\n      ref: useMergedRefs(props.input?.ref, triggerRef),\n      type: 'text',\n      value: value ?? '',\n      ...triggerNativeProps,\n    },\n  });\n\n  triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n  triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);\n  triggerSlot.onKeyDown = mergeCallbacks(triggerSlot.onKeyDown, onTriggerKeyDown);\n\n  // only resolve listbox slot if needed\n  listboxSlot =\n    open || hasFocus\n      ? resolveShorthand(props.listbox, {\n          required: true,\n          defaultProps: {\n            children: props.children,\n            style: popupDimensions,\n          },\n        })\n      : undefined;\n\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n  if (hideActiveDescendant) {\n    triggerSlot['aria-activedescendant'] = undefined;\n  }\n\n  const state: ComboboxState = {\n    components: {\n      root: 'div',\n      input: 'input',\n      expandIcon: 'span',\n      listbox: Listbox,\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        'aria-owns': !inlinePopup ? listboxSlot?.id : undefined,\n        ...rootNativeProps,\n      },\n    }),\n    input: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: resolveShorthand(props.expandIcon, {\n      required: true,\n      defaultProps: {\n        'aria-expanded': open,\n        children: <ChevronDownIcon />,\n        role: 'button',\n      },\n    }),\n    ...baseState,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};\n  const onExpandIconMouseDown = useEventCallback(\n    mergeCallbacks(onIconMouseDown, () => {\n      // do not dismiss on blur when closing via clicking the icon\n      if (open) {\n        baseState.ignoreNextBlur.current = true;\n      }\n    }),\n  );\n\n  const onExpandIconClick = useEventCallback(\n    mergeCallbacks(onIconClick, (event: React.MouseEvent<HTMLSpanElement>) => {\n      // open and set focus\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n\n      // set focus visible=false, since this can only be done with the mouse/pointer\n      setFocusVisible(false);\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n    state.expandIcon.onClick = onExpandIconClick;\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  return state;\n};\n"],"mappings":"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"}

package/lib/components/Dropdown/useDropdown.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useFieldControlProps_unstable } from '@fluentui/react-field';
 import { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';
 import { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useTimeout } from '@fluentui/react-utilities';
 import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
@@ -17,6 +18,11 @@ import { useMergedRefs } from '@fluentui/react-utilities';
  * @param ref - reference to root HTMLElement of Dropdown
  */
 export const useDropdown_unstable = (props, ref) => {
+  // Merge props from surrounding <Field>, if any
+  props = useFieldControlProps_unstable(props, {
+    supportsLabelFor: true,
+    supportsSize: true
+  });
   const baseState = useComboboxBaseState(props);
   const {
     activeOption,

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

@@ -1 +1 @@
-{"version":3,"names":["React","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","mergeCallbacks","resolveShorthand","useTimeout","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useMergedRefs","useDropdown_unstable","props","ref","baseState","activeOption","getIndexOfId","getOptionsMatchingText","open","setActiveOption","setFocusVisible","setOpen","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","popupWidth","setPopupWidth","useState","useEffect","_rootRef_current","width","current","clientWidth","undefined","searchString","setKeyTimeout","clearKeyTimeout","getNextMatchingOption","matcher","optionText","toLowerCase","indexOf","matches","startIndex","id","length","letters","split","allSameLetter","every","letter","nextMatch","find","option","_matches_","onTriggerKeyDown","ev","key","nextOption","triggerSlot","listboxSlot","button","required","defaultProps","type","children","value","placeholder","onKeyDown","hasFocus","listbox","style","state","components","expandIcon","inlinePopup","createElement","placeholderVisible"],"sources":["../../../src/components/Dropdown/useDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useTimeout } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { useMergedRefs } from '@fluentui/react-utilities';\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  const baseState = useComboboxBaseState(props);\n  const { activeOption, getIndexOfId, getOptionsMatchingText, open, setActiveOption, setFocusVisible, setOpen } =\n    baseState;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children'],\n  });\n\n  // set listbox popup width based off the root/trigger width\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const [popupWidth, setPopupWidth] = React.useState<string>();\n  React.useEffect(() => {\n    const width = open ? `${rootRef.current?.clientWidth}px` : undefined;\n    setPopupWidth(width);\n  }, [open]);\n\n  // jump to matching option based on typing\n  const searchString = React.useRef('');\n  const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n\n  const getNextMatchingOption = (): OptionValue | undefined => {\n    // first check for matches for the full searchString\n    let matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString.current) === 0;\n    let matches = getOptionsMatchingText(matcher);\n    let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;\n\n    // if the dropdown is already open and the searchstring is a single character,\n    // then look after the current activeOption for letters\n    // this is so slowly typing the same letter will cycle through matches\n    if (open && searchString.current.length === 1) {\n      startIndex++;\n    }\n\n    // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n    if (!matches.length) {\n      const letters = searchString.current.split('');\n      const allSameLetter = letters.length && letters.every(letter => letter === letters[0]);\n\n      // if the search is all the same letter, cycle through options starting with that letter\n      if (allSameLetter) {\n        startIndex++;\n        matcher = (optionText: string) => optionText.toLowerCase().indexOf(letters[0]) === 0;\n        matches = getOptionsMatchingText(matcher);\n      }\n    }\n\n    // if there is an active option and multiple matches,\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    // clear timeout, if it exists\n    clearKeyTimeout();\n\n    // if the key was a char key, update search string\n    if (getDropdownActionFromKey(ev) === 'Type') {\n      // update search string\n      searchString.current += ev.key.toLowerCase();\n      setKeyTimeout(() => {\n        searchString.current = '';\n      }, 500);\n\n      // update state\n      !open && setOpen(ev, true);\n\n      const nextOption = getNextMatchingOption();\n      setActiveOption(nextOption);\n      setFocusVisible(true);\n    }\n  };\n\n  // resolve button and listbox slot props\n  let triggerSlot: Slot<'button'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = resolveShorthand(props.button, {\n    required: true,\n    defaultProps: {\n      type: 'button',\n      children: baseState.value || props.placeholder,\n      ...triggerNativeProps,\n    },\n  });\n\n  triggerSlot.onKeyDown = mergeCallbacks(onTriggerKeyDown, triggerSlot.onKeyDown);\n\n  listboxSlot =\n    baseState.open || baseState.hasFocus\n      ? resolveShorthand(props.listbox, {\n          required: true,\n          defaultProps: {\n            children: props.children,\n            style: { width: popupWidth },\n          },\n        })\n      : undefined;\n\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n  const state: DropdownState = {\n    components: {\n      root: 'div',\n      button: 'button',\n      expandIcon: 'span',\n      listbox: Listbox,\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        'aria-owns': !props.inlinePopup ? listboxSlot?.id : undefined,\n        children: props.children,\n        ...rootNativeProps,\n      },\n    }),\n    button: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: resolveShorthand(props.expandIcon, {\n      required: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n    }),\n    placeholderVisible: !baseState.value && !!props.placeholder,\n    ...baseState,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","mergeCallbacks","resolveShorthand","useTimeout","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useMergedRefs","useDropdown_unstable","props","ref","supportsLabelFor","supportsSize","baseState","activeOption","getIndexOfId","getOptionsMatchingText","open","setActiveOption","setFocusVisible","setOpen","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","popupWidth","setPopupWidth","useState","useEffect","_rootRef_current","width","current","clientWidth","undefined","searchString","setKeyTimeout","clearKeyTimeout","getNextMatchingOption","matcher","optionText","toLowerCase","indexOf","matches","startIndex","id","length","letters","split","allSameLetter","every","letter","nextMatch","find","option","_matches_","onTriggerKeyDown","ev","key","nextOption","triggerSlot","listboxSlot","button","required","defaultProps","type","children","value","placeholder","onKeyDown","hasFocus","listbox","style","state","components","expandIcon","inlinePopup","createElement","placeholderVisible"],"sources":["../../../src/components/Dropdown/useDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useTimeout } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { useMergedRefs } from '@fluentui/react-utilities';\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 { activeOption, getIndexOfId, getOptionsMatchingText, open, setActiveOption, setFocusVisible, setOpen } =\n    baseState;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children'],\n  });\n\n  // set listbox popup width based off the root/trigger width\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const [popupWidth, setPopupWidth] = React.useState<string>();\n  React.useEffect(() => {\n    const width = open ? `${rootRef.current?.clientWidth}px` : undefined;\n    setPopupWidth(width);\n  }, [open]);\n\n  // jump to matching option based on typing\n  const searchString = React.useRef('');\n  const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n\n  const getNextMatchingOption = (): OptionValue | undefined => {\n    // first check for matches for the full searchString\n    let matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString.current) === 0;\n    let matches = getOptionsMatchingText(matcher);\n    let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;\n\n    // if the dropdown is already open and the searchstring is a single character,\n    // then look after the current activeOption for letters\n    // this is so slowly typing the same letter will cycle through matches\n    if (open && searchString.current.length === 1) {\n      startIndex++;\n    }\n\n    // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n    if (!matches.length) {\n      const letters = searchString.current.split('');\n      const allSameLetter = letters.length && letters.every(letter => letter === letters[0]);\n\n      // if the search is all the same letter, cycle through options starting with that letter\n      if (allSameLetter) {\n        startIndex++;\n        matcher = (optionText: string) => optionText.toLowerCase().indexOf(letters[0]) === 0;\n        matches = getOptionsMatchingText(matcher);\n      }\n    }\n\n    // if there is an active option and multiple matches,\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    // clear timeout, if it exists\n    clearKeyTimeout();\n\n    // if the key was a char key, update search string\n    if (getDropdownActionFromKey(ev) === 'Type') {\n      // update search string\n      searchString.current += ev.key.toLowerCase();\n      setKeyTimeout(() => {\n        searchString.current = '';\n      }, 500);\n\n      // update state\n      !open && setOpen(ev, true);\n\n      const nextOption = getNextMatchingOption();\n      setActiveOption(nextOption);\n      setFocusVisible(true);\n    }\n  };\n\n  // resolve button and listbox slot props\n  let triggerSlot: Slot<'button'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = resolveShorthand(props.button, {\n    required: true,\n    defaultProps: {\n      type: 'button',\n      children: baseState.value || props.placeholder,\n      ...triggerNativeProps,\n    },\n  });\n\n  triggerSlot.onKeyDown = mergeCallbacks(onTriggerKeyDown, triggerSlot.onKeyDown);\n\n  listboxSlot =\n    baseState.open || baseState.hasFocus\n      ? resolveShorthand(props.listbox, {\n          required: true,\n          defaultProps: {\n            children: props.children,\n            style: { width: popupWidth },\n          },\n        })\n      : undefined;\n\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n  const state: DropdownState = {\n    components: {\n      root: 'div',\n      button: 'button',\n      expandIcon: 'span',\n      listbox: Listbox,\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        'aria-owns': !props.inlinePopup ? listboxSlot?.id : undefined,\n        children: props.children,\n        ...rootNativeProps,\n      },\n    }),\n    button: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: resolveShorthand(props.expandIcon, {\n      required: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n    }),\n    placeholderVisible: !baseState.value && !!props.placeholder,\n    ...baseState,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  return state;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,6BAA6B,QAAQ;AAC9C,SAASC,kBAAA,IAAsBC,eAAe,QAAQ;AACtD,SAASC,yBAAyB,EAAEC,cAAc,EAAEC,gBAAgB,EAAEC,UAAU,QAAQ;AACxF,SAASC,wBAAwB,QAAQ;AACzC,SAASC,oBAAoB,QAAQ;AACrC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,sBAAsB,QAAQ;AACvC,SAASC,OAAO,QAAQ;AAIxB,SAASC,aAAa,QAAQ;AAE9B;;;;;;;;;AASA,OAAO,MAAMC,oBAAA,GAAuBA,CAACC,KAAA,EAAsBC,GAAA,KAAqD;EAC9G;EACAD,KAAA,GAAQd,6BAAA,CAA8Bc,KAAA,EAAO;IAAEE,gBAAA,EAAkB,IAAI;IAAEC,YAAA,EAAc;EAAK;EAE1F,MAAMC,SAAA,GAAYV,oBAAA,CAAqBM,KAAA;EACvC,MAAM;IAAEK,YAAA;IAAcC,YAAA;IAAcC,sBAAA;IAAwBC,IAAA;IAAMC,eAAA;IAAiBC,eAAA;IAAiBC;EAAO,CAAE,GAC3GP,SAAA;EAEF,MAAM;IAAEQ,OAAA,EAASC,kBAAA;IAAoBC,IAAA,EAAMC;EAAe,CAAE,GAAG1B,yBAAA,CAA0B;IACvFW,KAAA;IACAgB,kBAAA,EAAoB;IACpBC,iBAAA,EAAmB,CAAC;EACtB;EAEA;EACA,MAAMC,OAAA,GAAUjC,KAAA,CAAMkC,MAAM,CAAiB,IAAI;EACjD,MAAM,CAACC,UAAA,EAAYC,aAAA,CAAc,GAAGpC,KAAA,CAAMqC,QAAQ;EAClDrC,KAAA,CAAMsC,SAAS,CAAC,MAAM;QACIC,gBAAA;IAAxB,MAAMC,KAAA,GAAQjB,IAAA,GAAQ,GAAE,CAAAgB,gBAAA,GAAAN,OAAA,CAAQQ,OAAO,cAAfF,gBAAA,uBAAAA,gBAAA,CAAiBG,WAAY,IAAG,GAAGC,SAAS;IACpEP,aAAA,CAAcI,KAAA;EAChB,GAAG,CAACjB,IAAA,CAAK;EAET;EACA,MAAMqB,YAAA,GAAe5C,KAAA,CAAMkC,MAAM,CAAC;EAClC,MAAM,CAACW,aAAA,EAAeC,eAAA,CAAgB,GAAGvC,UAAA;EAEzC,MAAMwC,qBAAA,GAAwBA,CAAA,KAA+B;IAC3D;IACA,IAAIC,OAAA,GAAWC,UAAA,IAAuBA,UAAA,CAAWC,WAAW,GAAGC,OAAO,CAACP,YAAA,CAAaH,OAAO,MAAM;IACjG,IAAIW,OAAA,GAAU9B,sBAAA,CAAuB0B,OAAA;IACrC,IAAIK,UAAA,GAAajC,YAAA,GAAeC,YAAA,CAAaD,YAAA,CAAakC,EAAE,IAAI,CAAC;IAEjE;IACA;IACA;IACA,IAAI/B,IAAA,IAAQqB,YAAA,CAAaH,OAAO,CAACc,MAAM,KAAK,GAAG;MAC7CF,UAAA;IACF;IAEA;IACA,IAAI,CAACD,OAAA,CAAQG,MAAM,EAAE;MACnB,MAAMC,OAAA,GAAUZ,YAAA,CAAaH,OAAO,CAACgB,KAAK,CAAC;MAC3C,MAAMC,aAAA,GAAgBF,OAAA,CAAQD,MAAM,IAAIC,OAAA,CAAQG,KAAK,CAACC,MAAA,IAAUA,MAAA,KAAWJ,OAAO,CAAC,EAAE;MAErF;MACA,IAAIE,aAAA,EAAe;QACjBL,UAAA;QACAL,OAAA,GAAWC,UAAA,IAAuBA,UAAA,CAAWC,WAAW,GAAGC,OAAO,CAACK,OAAO,CAAC,EAAE,MAAM;QACnFJ,OAAA,GAAU9B,sBAAA,CAAuB0B,OAAA;MACnC;IACF;IAEA;IACA;IACA,IAAII,OAAA,CAAQG,MAAM,GAAG,KAAKnC,YAAA,EAAc;MACtC,MAAMyC,SAAA,GAAYT,OAAA,CAAQU,IAAI,CAACC,MAAA,IAAU1C,YAAA,CAAa0C,MAAA,CAAOT,EAAE,KAAKD,UAAA;MACpE,OAAOQ,SAAA,aAAAA,SAAA,cAAAA,SAAA,GAAaT,OAAO,CAAC,EAAE;IAChC;QAEOY,SAAA;IAAP,OAAO,CAAAA,SAAA,GAAAZ,OAAO,CAAC,EAAE,cAAVY,SAAA,cAAAA,SAAA,GAAcrB,SAAS;EAChC;EAEA,MAAMsB,gBAAA,GAAoBC,EAAA,IAA+C;IACvE;IACApB,eAAA;IAEA;IACA,IAAItC,wBAAA,CAAyB0D,EAAA,MAAQ,QAAQ;MAC3C;MACAtB,YAAA,CAAaH,OAAO,IAAIyB,EAAA,CAAGC,GAAG,CAACjB,WAAW;MAC1CL,aAAA,CAAc,MAAM;QAClBD,YAAA,CAAaH,OAAO,GAAG;MACzB,GAAG;MAEH;MACA,CAAClB,IAAA,IAAQG,OAAA,CAAQwC,EAAA,EAAI,IAAI;MAEzB,MAAME,UAAA,GAAarB,qBAAA;MACnBvB,eAAA,CAAgB4C,UAAA;MAChB3C,eAAA,CAAgB,IAAI;IACtB;EACF;EAEA;EACA,IAAI4C,WAAA;EACJ,IAAIC,WAAA;EAEJD,WAAA,GAAc/D,gBAAA,CAAiBS,KAAA,CAAMwD,MAAM,EAAE;IAC3CC,QAAA,EAAU,IAAI;IACdC,YAAA,EAAc;MACZC,IAAA,EAAM;MACNC,QAAA,EAAUxD,SAAA,CAAUyD,KAAK,IAAI7D,KAAA,CAAM8D,WAAW;MAC9C,GAAGjD;IACL;EACF;EAEAyC,WAAA,CAAYS,SAAS,GAAGzE,cAAA,CAAe4D,gBAAA,EAAkBI,WAAA,CAAYS,SAAS;EAE9ER,WAAA,GACEnD,SAAA,CAAUI,IAAI,IAAIJ,SAAA,CAAU4D,QAAQ,GAChCzE,gBAAA,CAAiBS,KAAA,CAAMiE,OAAO,EAAE;IAC9BR,QAAA,EAAU,IAAI;IACdC,YAAA,EAAc;MACZE,QAAA,EAAU5D,KAAA,CAAM4D,QAAQ;MACxBM,KAAA,EAAO;QAAEzC,KAAA,EAAOL;MAAW;IAC7B;EACF,KACAQ,SAAS;EAEf,CAAC0B,WAAA,EAAaC,WAAA,CAAY,GAAG5D,gBAAA,CAAiBK,KAAA,EAAOsD,WAAA,EAAaC,WAAA;EAClE,CAACD,WAAA,EAAaC,WAAA,CAAY,GAAG3D,sBAAA,CAAuBI,KAAA,EAAOI,SAAA,EAAWH,GAAA,EAAKqD,WAAA,EAAaC,WAAA;EAExF,MAAMY,KAAA,GAAuB;IAC3BC,UAAA,EAAY;MACVtD,IAAA,EAAM;MACN0C,MAAA,EAAQ;MACRa,UAAA,EAAY;MACZJ,OAAA,EAASpE;IACX;IACAiB,IAAA,EAAMvB,gBAAA,CAAiBS,KAAA,CAAMc,IAAI,EAAE;MACjC2C,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZ,aAAa,CAAC1D,KAAA,CAAMsE,WAAW,GAAGf,WAAA,aAAAA,WAAA,uBAAAA,WAAA,CAAahB,EAAE,GAAGX,SAAS;QAC7DgC,QAAA,EAAU5D,KAAA,CAAM4D,QAAQ;QACxB,GAAG7C;MACL;IACF;IACAyC,MAAA,EAAQF,WAAA;IACRW,OAAA,EAASV,WAAA;IACTc,UAAA,EAAY9E,gBAAA,CAAiBS,KAAA,CAAMqE,UAAU,EAAE;MAC7CZ,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZE,QAAA,eAAU3E,KAAA,CAAAsF,aAAA,CAACnF,eAAA;MACb;IACF;IACAoF,kBAAA,EAAoB,CAACpE,SAAA,CAAUyD,KAAK,IAAI,CAAC,CAAC7D,KAAA,CAAM8D,WAAW;IAC3D,GAAG1D;EACL;EAEA+D,KAAA,CAAMrD,IAAI,CAACb,GAAG,GAAGH,aAAA,CAAcqE,KAAA,CAAMrD,IAAI,CAACb,GAAG,EAAEiB,OAAA;EAE/C,OAAOiD,KAAA;AACT"}

package/lib/components/Option/renderOption.js

@@ -8,6 +8,6 @@ export const renderOption_unstable = state => {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, /*#__PURE__*/React.createElement(slots.checkIcon, slotProps.checkIcon), slotProps.root.children);
+  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, slots.checkIcon && /*#__PURE__*/React.createElement(slots.checkIcon, slotProps.checkIcon), slotProps.root.children);
 };
 //# sourceMappingURL=renderOption.js.map

package/lib/components/Option/renderOption.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","renderOption_unstable","state","slots","slotProps","createElement","root","checkIcon","children"],"sources":["../../../src/components/Option/renderOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { OptionState, OptionSlots } from './Option.types';\n\n/**\n * Render the final JSX of Option\n */\nexport const renderOption_unstable = (state: OptionState) => {\n  const { slots, slotProps } = getSlots<OptionSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.checkIcon {...slotProps.checkIcon} />\n      {slotProps.root.children}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,qBAAA,GAAyBC,KAAA,IAAuB;EAC3D,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAAsBE,KAAA;EAEnD,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,eAC5BP,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMI,SAAS,EAAKH,SAAA,CAAUG,SAAS,GACvCH,SAAA,CAAUE,IAAI,CAACE,QAAQ;AAG9B"}
+{"version":3,"names":["React","getSlots","renderOption_unstable","state","slots","slotProps","createElement","root","checkIcon","children"],"sources":["../../../src/components/Option/renderOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { OptionState, OptionSlots } from './Option.types';\n\n/**\n * Render the final JSX of Option\n */\nexport const renderOption_unstable = (state: OptionState) => {\n  const { slots, slotProps } = getSlots<OptionSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.checkIcon && <slots.checkIcon {...slotProps.checkIcon} />}\n      {slotProps.root.children}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,qBAAA,GAAyBC,KAAA,IAAuB;EAC3D,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAAsBE,KAAA;EAEnD,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,EAC3BH,KAAA,CAAMI,SAAS,iBAAIR,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMI,SAAS,EAAKH,SAAA,CAAUG,SAAS,GAC3DH,SAAA,CAAUE,IAAI,CAACE,QAAQ;AAG9B"}

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "useCombobox_unstable", {
 });
 const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactField = require("@fluentui/react-field");
 const _keyboardKeys = require("@fluentui/keyboard-keys");
 const _reactIcons = require("@fluentui/react-icons");
 const _reactUtilities = require("@fluentui/react-utilities");
@@ -18,6 +19,12 @@ const _useTriggerListboxSlots = require("../../utils/useTriggerListboxSlots");
 const _listbox = require("../Listbox/Listbox");
 const useCombobox_unstable = (props, ref)=>{
     var _props_input;
+    // Merge props from surrounding <Field>, if any
+    props = (0, _reactField.useFieldControlProps_unstable)(props, {
+        supportsLabelFor: true,
+        supportsRequired: true,
+        supportsSize: true
+    });
     const baseState = (0, _useComboboxBaseState.useComboboxBaseState)({
         ...props,
         editable: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Combobox/useCombobox.js"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, resolveShorthand, mergeCallbacks, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\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, ref) => {\n  var _props_input;\n  const baseState = useComboboxBaseState({\n    ...props,\n    editable: true\n  });\n  const {\n    activeOption,\n    clearSelection,\n    getIndexOfId,\n    getOptionsMatchingText,\n    hasFocus,\n    open,\n    selectOption,\n    selectedOptions,\n    setActiveOption,\n    setFocusVisible,\n    setOpen,\n    setValue,\n    value\n  } = baseState;\n  const {\n    disabled,\n    freeform,\n    inlinePopup,\n    multiselect\n  } = props;\n  const comboId = useId('combobox-');\n  const {\n    primary: triggerNativeProps,\n    root: rootNativeProps\n  } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['children', 'size']\n  });\n  const rootRef = React.useRef(null);\n  const triggerRef = React.useRef(null);\n  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n  // calculate listbox width style based on trigger width\n  const [popupDimensions, setPopupDimensions] = React.useState();\n  React.useEffect(() => {\n    // only recalculate width when opening\n    if (open) {\n      var _rootRef_current;\n      const width = `${(_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.clientWidth}px`;\n      if (width !== (popupDimensions === null || popupDimensions === void 0 ? void 0 : popupDimensions.width)) {\n        setPopupDimensions({\n          width\n        });\n      }\n    }\n  }, [open, popupDimensions]);\n  // set active option and selection based on typing\n  const getOptionFromInput = inputValue => {\n    const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();\n    if (!searchString || searchString.length === 0) {\n      return;\n    }\n    const matcher = optionText => optionText.toLowerCase().indexOf(searchString) === 0;\n    const matches = getOptionsMatchingText(matcher);\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const startIndex = getIndexOfId(activeOption.id);\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];\n    }\n    var _matches_;\n    return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;\n  };\n  /* Handle typed input */ // reset any typed value when an option is selected\n  baseState.selectOption = (ev, option) => {\n    setValue(undefined);\n    selectOption(ev, option);\n  };\n  const onTriggerBlur = ev => {\n    // handle selection and updating value if freeform is false\n    if (!baseState.open && !freeform) {\n      // select matching option, if the value fully matches\n      if (value && activeOption && value.trim().toLowerCase() === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.text.toLowerCase())) {\n        baseState.selectOption(ev, activeOption);\n      }\n      // reset typed value when the input loses focus while collapsed, unless freeform is true\n      setValue(undefined);\n    }\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  // update value and active option based on input\n  const onTriggerChange = ev => {\n    const inputValue = ev.target.value;\n    // update uncontrolled value\n    baseState.setValue(inputValue);\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n    setActiveOption(matchingOption);\n    setFocusVisible(true);\n    // clear selection for single-select if the input value no longer matches the selection\n    if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n      clearSelection(ev);\n    }\n  };\n  // open Combobox when typing\n  const onTriggerKeyDown = ev => {\n    if (!open && getDropdownActionFromKey(ev) === 'Type') {\n      baseState.setOpen(ev, true);\n    }\n    // clear activedescendant when moving the text insertion cursor\n    if (ev.key === ArrowLeft || ev.key === ArrowRight) {\n      setHideActiveDescendant(true);\n    } else {\n      setHideActiveDescendant(false);\n    }\n  };\n  // resolve input and listbox slot props\n  let triggerSlot;\n  let listboxSlot;\n  triggerSlot = resolveShorthand(props.input, {\n    required: true,\n    defaultProps: {\n      ref: useMergedRefs((_props_input = props.input) === null || _props_input === void 0 ? void 0 : _props_input.ref, triggerRef),\n      type: 'text',\n      value: value !== null && value !== void 0 ? value : '',\n      ...triggerNativeProps\n    }\n  });\n  triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n  triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);\n  triggerSlot.onKeyDown = mergeCallbacks(triggerSlot.onKeyDown, onTriggerKeyDown);\n  // only resolve listbox slot if needed\n  listboxSlot = open || hasFocus ? resolveShorthand(props.listbox, {\n    required: true,\n    defaultProps: {\n      children: props.children,\n      style: popupDimensions\n    }\n  }) : undefined;\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n  if (hideActiveDescendant) {\n    triggerSlot['aria-activedescendant'] = undefined;\n  }\n  const state = {\n    components: {\n      root: 'div',\n      input: 'input',\n      expandIcon: 'span',\n      listbox: Listbox\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        'aria-owns': !inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,\n        ...rootNativeProps\n      }\n    }),\n    input: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: resolveShorthand(props.expandIcon, {\n      required: true,\n      defaultProps: {\n        'aria-expanded': open,\n        children: /*#__PURE__*/React.createElement(ChevronDownIcon, null),\n        role: 'button'\n      }\n    }),\n    ...baseState\n  };\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n  /* handle open/close + focus change when clicking expandIcon */\n  const {\n    onMouseDown: onIconMouseDown,\n    onClick: onIconClick\n  } = state.expandIcon || {};\n  const onExpandIconMouseDown = useEventCallback(mergeCallbacks(onIconMouseDown, () => {\n    // do not dismiss on blur when closing via clicking the icon\n    if (open) {\n      baseState.ignoreNextBlur.current = true;\n    }\n  }));\n  const onExpandIconClick = useEventCallback(mergeCallbacks(onIconClick, event => {\n    var _triggerRef_current;\n    // open and set focus\n    state.setOpen(event, !state.open);\n    (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n    // set focus visible=false, since this can only be done with the mouse/pointer\n    setFocusVisible(false);\n  }));\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n    state.expandIcon.onClick = onExpandIconClick;\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  return state;\n};\n//# sourceMappingURL=useCombobox.js.map"],"names":["useCombobox_unstable","props","ref","_props_input","baseState","useComboboxBaseState","editable","activeOption","clearSelection","getIndexOfId","getOptionsMatchingText","hasFocus","open","selectOption","selectedOptions","setActiveOption","setFocusVisible","setOpen","setValue","value","disabled","freeform","inlinePopup","multiselect","comboId","useId","primary","triggerNativeProps","root","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","rootRef","React","useRef","triggerRef","hideActiveDescendant","setHideActiveDescendant","useState","popupDimensions","setPopupDimensions","useEffect","_rootRef_current","width","current","clientWidth","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","_matches_","undefined","ev","onTriggerBlur","text","newState","onTriggerChange","target","matchingOption","onTriggerKeyDown","getDropdownActionFromKey","key","ArrowLeft","ArrowRight","triggerSlot","listboxSlot","resolveShorthand","input","required","defaultProps","useMergedRefs","type","onChange","mergeCallbacks","onBlur","onKeyDown","listbox","children","style","useComboboxPopup","useTriggerListboxSlots","state","components","expandIcon","Listbox","createElement","ChevronDownIcon","role","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","useEventCallback","ignoreNextBlur","onExpandIconClick","event","_triggerRef_current","focus","hasExpandLabel","defaultOpenString","_state_expandIcon_id","chevronId","chevronLabelledBy"],"mappings":"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"}
+{"version":3,"sources":["../../../lib/components/Combobox/useCombobox.js"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, resolveShorthand, mergeCallbacks, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\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, ref) => {\n  var _props_input;\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 {\n    activeOption,\n    clearSelection,\n    getIndexOfId,\n    getOptionsMatchingText,\n    hasFocus,\n    open,\n    selectOption,\n    selectedOptions,\n    setActiveOption,\n    setFocusVisible,\n    setOpen,\n    setValue,\n    value\n  } = baseState;\n  const {\n    disabled,\n    freeform,\n    inlinePopup,\n    multiselect\n  } = props;\n  const comboId = useId('combobox-');\n  const {\n    primary: triggerNativeProps,\n    root: rootNativeProps\n  } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['children', 'size']\n  });\n  const rootRef = React.useRef(null);\n  const triggerRef = React.useRef(null);\n  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n  // calculate listbox width style based on trigger width\n  const [popupDimensions, setPopupDimensions] = React.useState();\n  React.useEffect(() => {\n    // only recalculate width when opening\n    if (open) {\n      var _rootRef_current;\n      const width = `${(_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.clientWidth}px`;\n      if (width !== (popupDimensions === null || popupDimensions === void 0 ? void 0 : popupDimensions.width)) {\n        setPopupDimensions({\n          width\n        });\n      }\n    }\n  }, [open, popupDimensions]);\n  // set active option and selection based on typing\n  const getOptionFromInput = inputValue => {\n    const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();\n    if (!searchString || searchString.length === 0) {\n      return;\n    }\n    const matcher = optionText => optionText.toLowerCase().indexOf(searchString) === 0;\n    const matches = getOptionsMatchingText(matcher);\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const startIndex = getIndexOfId(activeOption.id);\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];\n    }\n    var _matches_;\n    return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;\n  };\n  /* Handle typed input */ // reset any typed value when an option is selected\n  baseState.selectOption = (ev, option) => {\n    setValue(undefined);\n    selectOption(ev, option);\n  };\n  const onTriggerBlur = ev => {\n    // handle selection and updating value if freeform is false\n    if (!baseState.open && !freeform) {\n      // select matching option, if the value fully matches\n      if (value && activeOption && value.trim().toLowerCase() === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.text.toLowerCase())) {\n        baseState.selectOption(ev, activeOption);\n      }\n      // reset typed value when the input loses focus while collapsed, unless freeform is true\n      setValue(undefined);\n    }\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  // update value and active option based on input\n  const onTriggerChange = ev => {\n    const inputValue = ev.target.value;\n    // update uncontrolled value\n    baseState.setValue(inputValue);\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n    setActiveOption(matchingOption);\n    setFocusVisible(true);\n    // clear selection for single-select if the input value no longer matches the selection\n    if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n      clearSelection(ev);\n    }\n  };\n  // open Combobox when typing\n  const onTriggerKeyDown = ev => {\n    if (!open && getDropdownActionFromKey(ev) === 'Type') {\n      baseState.setOpen(ev, true);\n    }\n    // clear activedescendant when moving the text insertion cursor\n    if (ev.key === ArrowLeft || ev.key === ArrowRight) {\n      setHideActiveDescendant(true);\n    } else {\n      setHideActiveDescendant(false);\n    }\n  };\n  // resolve input and listbox slot props\n  let triggerSlot;\n  let listboxSlot;\n  triggerSlot = resolveShorthand(props.input, {\n    required: true,\n    defaultProps: {\n      ref: useMergedRefs((_props_input = props.input) === null || _props_input === void 0 ? void 0 : _props_input.ref, triggerRef),\n      type: 'text',\n      value: value !== null && value !== void 0 ? value : '',\n      ...triggerNativeProps\n    }\n  });\n  triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n  triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);\n  triggerSlot.onKeyDown = mergeCallbacks(triggerSlot.onKeyDown, onTriggerKeyDown);\n  // only resolve listbox slot if needed\n  listboxSlot = open || hasFocus ? resolveShorthand(props.listbox, {\n    required: true,\n    defaultProps: {\n      children: props.children,\n      style: popupDimensions\n    }\n  }) : undefined;\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n  if (hideActiveDescendant) {\n    triggerSlot['aria-activedescendant'] = undefined;\n  }\n  const state = {\n    components: {\n      root: 'div',\n      input: 'input',\n      expandIcon: 'span',\n      listbox: Listbox\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        'aria-owns': !inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,\n        ...rootNativeProps\n      }\n    }),\n    input: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: resolveShorthand(props.expandIcon, {\n      required: true,\n      defaultProps: {\n        'aria-expanded': open,\n        children: /*#__PURE__*/React.createElement(ChevronDownIcon, null),\n        role: 'button'\n      }\n    }),\n    ...baseState\n  };\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n  /* handle open/close + focus change when clicking expandIcon */\n  const {\n    onMouseDown: onIconMouseDown,\n    onClick: onIconClick\n  } = state.expandIcon || {};\n  const onExpandIconMouseDown = useEventCallback(mergeCallbacks(onIconMouseDown, () => {\n    // do not dismiss on blur when closing via clicking the icon\n    if (open) {\n      baseState.ignoreNextBlur.current = true;\n    }\n  }));\n  const onExpandIconClick = useEventCallback(mergeCallbacks(onIconClick, event => {\n    var _triggerRef_current;\n    // open and set focus\n    state.setOpen(event, !state.open);\n    (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n    // set focus visible=false, since this can only be done with the mouse/pointer\n    setFocusVisible(false);\n  }));\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n    state.expandIcon.onClick = onExpandIconClick;\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  return state;\n};\n//# sourceMappingURL=useCombobox.js.map"],"names":["useCombobox_unstable","props","ref","_props_input","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","supportsSize","baseState","useComboboxBaseState","editable","activeOption","clearSelection","getIndexOfId","getOptionsMatchingText","hasFocus","open","selectOption","selectedOptions","setActiveOption","setFocusVisible","setOpen","setValue","value","disabled","freeform","inlinePopup","multiselect","comboId","useId","primary","triggerNativeProps","root","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","rootRef","React","useRef","triggerRef","hideActiveDescendant","setHideActiveDescendant","useState","popupDimensions","setPopupDimensions","useEffect","_rootRef_current","width","current","clientWidth","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","_matches_","undefined","ev","onTriggerBlur","text","newState","onTriggerChange","target","matchingOption","onTriggerKeyDown","getDropdownActionFromKey","key","ArrowLeft","ArrowRight","triggerSlot","listboxSlot","resolveShorthand","input","required","defaultProps","useMergedRefs","type","onChange","mergeCallbacks","onBlur","onKeyDown","listbox","children","style","useComboboxPopup","useTriggerListboxSlots","state","components","expandIcon","Listbox","createElement","ChevronDownIcon","role","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","useEventCallback","ignoreNextBlur","onExpandIconClick","event","_triggerRef_current","focus","hasExpandLabel","defaultOpenString","_state_expandIcon_id","chevronId","chevronLabelledBy"],"mappings":"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"}

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "useDropdown_unstable", {
 });
 const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactField = require("@fluentui/react-field");
 const _reactIcons = require("@fluentui/react-icons");
 const _reactUtilities = require("@fluentui/react-utilities");
 const _dropdownKeyActions = require("../../utils/dropdownKeyActions");
@@ -16,6 +17,11 @@ const _useComboboxPopup = require("../../utils/useComboboxPopup");
 const _useTriggerListboxSlots = require("../../utils/useTriggerListboxSlots");
 const _listbox = require("../Listbox/Listbox");
 const useDropdown_unstable = (props, ref)=>{
+    // Merge props from surrounding <Field>, if any
+    props = (0, _reactField.useFieldControlProps_unstable)(props, {
+        supportsLabelFor: true,
+        supportsSize: true
+    });
     const baseState = (0, _useComboboxBaseState.useComboboxBaseState)(props);
     const { activeOption , getIndexOfId , getOptionsMatchingText , open , setActiveOption , setFocusVisible , setOpen  } = baseState;
     const { primary: triggerNativeProps , root: rootNativeProps  } = (0, _reactUtilities.getPartitionedNativeProps)({

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Dropdown/useDropdown.js"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useTimeout } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport { useMergedRefs } from '@fluentui/react-utilities';\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, ref) => {\n  const baseState = useComboboxBaseState(props);\n  const {\n    activeOption,\n    getIndexOfId,\n    getOptionsMatchingText,\n    open,\n    setActiveOption,\n    setFocusVisible,\n    setOpen\n  } = baseState;\n  const {\n    primary: triggerNativeProps,\n    root: rootNativeProps\n  } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children']\n  });\n  // set listbox popup width based off the root/trigger width\n  const rootRef = React.useRef(null);\n  const [popupWidth, setPopupWidth] = React.useState();\n  React.useEffect(() => {\n    var _rootRef_current;\n    const width = open ? `${(_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.clientWidth}px` : undefined;\n    setPopupWidth(width);\n  }, [open]);\n  // jump to matching option based on typing\n  const searchString = React.useRef('');\n  const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n  const getNextMatchingOption = () => {\n    // first check for matches for the full searchString\n    let matcher = optionText => optionText.toLowerCase().indexOf(searchString.current) === 0;\n    let matches = getOptionsMatchingText(matcher);\n    let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;\n    // if the dropdown is already open and the searchstring is a single character,\n    // then look after the current activeOption for letters\n    // this is so slowly typing the same letter will cycle through matches\n    if (open && searchString.current.length === 1) {\n      startIndex++;\n    }\n    // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n    if (!matches.length) {\n      const letters = searchString.current.split('');\n      const allSameLetter = letters.length && letters.every(letter => letter === letters[0]);\n      // if the search is all the same letter, cycle through options starting with that letter\n      if (allSameLetter) {\n        startIndex++;\n        matcher = optionText => optionText.toLowerCase().indexOf(letters[0]) === 0;\n        matches = getOptionsMatchingText(matcher);\n      }\n    }\n    // if there is an active option and multiple matches,\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];\n    }\n    var _matches_;\n    return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;\n  };\n  const onTriggerKeyDown = ev => {\n    // clear timeout, if it exists\n    clearKeyTimeout();\n    // if the key was a char key, update search string\n    if (getDropdownActionFromKey(ev) === 'Type') {\n      // update search string\n      searchString.current += ev.key.toLowerCase();\n      setKeyTimeout(() => {\n        searchString.current = '';\n      }, 500);\n      // update state\n      !open && setOpen(ev, true);\n      const nextOption = getNextMatchingOption();\n      setActiveOption(nextOption);\n      setFocusVisible(true);\n    }\n  };\n  // resolve button and listbox slot props\n  let triggerSlot;\n  let listboxSlot;\n  triggerSlot = resolveShorthand(props.button, {\n    required: true,\n    defaultProps: {\n      type: 'button',\n      children: baseState.value || props.placeholder,\n      ...triggerNativeProps\n    }\n  });\n  triggerSlot.onKeyDown = mergeCallbacks(onTriggerKeyDown, triggerSlot.onKeyDown);\n  listboxSlot = baseState.open || baseState.hasFocus ? resolveShorthand(props.listbox, {\n    required: true,\n    defaultProps: {\n      children: props.children,\n      style: {\n        width: popupWidth\n      }\n    }\n  }) : undefined;\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n  const state = {\n    components: {\n      root: 'div',\n      button: 'button',\n      expandIcon: 'span',\n      listbox: Listbox\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        'aria-owns': !props.inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,\n        children: props.children,\n        ...rootNativeProps\n      }\n    }),\n    button: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: resolveShorthand(props.expandIcon, {\n      required: true,\n      defaultProps: {\n        children: /*#__PURE__*/React.createElement(ChevronDownIcon, null)\n      }\n    }),\n    placeholderVisible: !baseState.value && !!props.placeholder,\n    ...baseState\n  };\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n  return state;\n};\n//# sourceMappingURL=useDropdown.js.map"],"names":["useDropdown_unstable","props","ref","baseState","useComboboxBaseState","activeOption","getIndexOfId","getOptionsMatchingText","open","setActiveOption","setFocusVisible","setOpen","primary","triggerNativeProps","root","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","rootRef","React","useRef","popupWidth","setPopupWidth","useState","useEffect","_rootRef_current","width","current","clientWidth","undefined","searchString","setKeyTimeout","clearKeyTimeout","useTimeout","getNextMatchingOption","matcher","optionText","toLowerCase","indexOf","matches","startIndex","id","length","letters","split","allSameLetter","every","letter","nextMatch","find","option","_matches_","onTriggerKeyDown","ev","getDropdownActionFromKey","key","nextOption","triggerSlot","listboxSlot","resolveShorthand","button","required","defaultProps","type","children","value","placeholder","onKeyDown","mergeCallbacks","hasFocus","listbox","style","useComboboxPopup","useTriggerListboxSlots","state","components","expandIcon","Listbox","inlinePopup","createElement","ChevronDownIcon","placeholderVisible","useMergedRefs"],"mappings":"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"}
+{"version":3,"sources":["../../../lib/components/Dropdown/useDropdown.js"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useTimeout } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport { useMergedRefs } from '@fluentui/react-utilities';\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, ref) => {\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 {\n    activeOption,\n    getIndexOfId,\n    getOptionsMatchingText,\n    open,\n    setActiveOption,\n    setFocusVisible,\n    setOpen\n  } = baseState;\n  const {\n    primary: triggerNativeProps,\n    root: rootNativeProps\n  } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children']\n  });\n  // set listbox popup width based off the root/trigger width\n  const rootRef = React.useRef(null);\n  const [popupWidth, setPopupWidth] = React.useState();\n  React.useEffect(() => {\n    var _rootRef_current;\n    const width = open ? `${(_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.clientWidth}px` : undefined;\n    setPopupWidth(width);\n  }, [open]);\n  // jump to matching option based on typing\n  const searchString = React.useRef('');\n  const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n  const getNextMatchingOption = () => {\n    // first check for matches for the full searchString\n    let matcher = optionText => optionText.toLowerCase().indexOf(searchString.current) === 0;\n    let matches = getOptionsMatchingText(matcher);\n    let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;\n    // if the dropdown is already open and the searchstring is a single character,\n    // then look after the current activeOption for letters\n    // this is so slowly typing the same letter will cycle through matches\n    if (open && searchString.current.length === 1) {\n      startIndex++;\n    }\n    // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n    if (!matches.length) {\n      const letters = searchString.current.split('');\n      const allSameLetter = letters.length && letters.every(letter => letter === letters[0]);\n      // if the search is all the same letter, cycle through options starting with that letter\n      if (allSameLetter) {\n        startIndex++;\n        matcher = optionText => optionText.toLowerCase().indexOf(letters[0]) === 0;\n        matches = getOptionsMatchingText(matcher);\n      }\n    }\n    // if there is an active option and multiple matches,\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];\n    }\n    var _matches_;\n    return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;\n  };\n  const onTriggerKeyDown = ev => {\n    // clear timeout, if it exists\n    clearKeyTimeout();\n    // if the key was a char key, update search string\n    if (getDropdownActionFromKey(ev) === 'Type') {\n      // update search string\n      searchString.current += ev.key.toLowerCase();\n      setKeyTimeout(() => {\n        searchString.current = '';\n      }, 500);\n      // update state\n      !open && setOpen(ev, true);\n      const nextOption = getNextMatchingOption();\n      setActiveOption(nextOption);\n      setFocusVisible(true);\n    }\n  };\n  // resolve button and listbox slot props\n  let triggerSlot;\n  let listboxSlot;\n  triggerSlot = resolveShorthand(props.button, {\n    required: true,\n    defaultProps: {\n      type: 'button',\n      children: baseState.value || props.placeholder,\n      ...triggerNativeProps\n    }\n  });\n  triggerSlot.onKeyDown = mergeCallbacks(onTriggerKeyDown, triggerSlot.onKeyDown);\n  listboxSlot = baseState.open || baseState.hasFocus ? resolveShorthand(props.listbox, {\n    required: true,\n    defaultProps: {\n      children: props.children,\n      style: {\n        width: popupWidth\n      }\n    }\n  }) : undefined;\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n  const state = {\n    components: {\n      root: 'div',\n      button: 'button',\n      expandIcon: 'span',\n      listbox: Listbox\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        'aria-owns': !props.inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,\n        children: props.children,\n        ...rootNativeProps\n      }\n    }),\n    button: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: resolveShorthand(props.expandIcon, {\n      required: true,\n      defaultProps: {\n        children: /*#__PURE__*/React.createElement(ChevronDownIcon, null)\n      }\n    }),\n    placeholderVisible: !baseState.value && !!props.placeholder,\n    ...baseState\n  };\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n  return state;\n};\n//# sourceMappingURL=useDropdown.js.map"],"names":["useDropdown_unstable","props","ref","useFieldControlProps_unstable","supportsLabelFor","supportsSize","baseState","useComboboxBaseState","activeOption","getIndexOfId","getOptionsMatchingText","open","setActiveOption","setFocusVisible","setOpen","primary","triggerNativeProps","root","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","rootRef","React","useRef","popupWidth","setPopupWidth","useState","useEffect","_rootRef_current","width","current","clientWidth","undefined","searchString","setKeyTimeout","clearKeyTimeout","useTimeout","getNextMatchingOption","matcher","optionText","toLowerCase","indexOf","matches","startIndex","id","length","letters","split","allSameLetter","every","letter","nextMatch","find","option","_matches_","onTriggerKeyDown","ev","getDropdownActionFromKey","key","nextOption","triggerSlot","listboxSlot","resolveShorthand","button","required","defaultProps","type","children","value","placeholder","onKeyDown","mergeCallbacks","hasFocus","listbox","style","useComboboxPopup","useTriggerListboxSlots","state","components","expandIcon","Listbox","inlinePopup","createElement","ChevronDownIcon","placeholderVisible","useMergedRefs"],"mappings":"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"}

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

@@ -11,7 +11,7 @@ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _reactUtilities = require("@fluentui/react-utilities");
 const renderOption_unstable = (state)=>{
     const { slots , slotProps  } = (0, _reactUtilities.getSlots)(state);
-    return /*#__PURE__*/ _react.createElement(slots.root, slotProps.root, /*#__PURE__*/ _react.createElement(slots.checkIcon, slotProps.checkIcon), slotProps.root.children);
+    return /*#__PURE__*/ _react.createElement(slots.root, slotProps.root, slots.checkIcon && /*#__PURE__*/ _react.createElement(slots.checkIcon, slotProps.checkIcon), slotProps.root.children);
 }; //# sourceMappingURL=renderOption.js.map
 
 //# sourceMappingURL=renderOption.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Option/renderOption.js"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Option\n */\nexport const renderOption_unstable = state => {\n  const {\n    slots,\n    slotProps\n  } = getSlots(state);\n  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, /*#__PURE__*/React.createElement(slots.checkIcon, slotProps.checkIcon), slotProps.root.children);\n};\n//# sourceMappingURL=renderOption.js.map"],"names":["renderOption_unstable","state","slots","slotProps","getSlots","React","createElement","root","checkIcon","children"],"mappings":";;;;+BAKaA;;aAAAA;;;6DALU;gCACE;AAIlB,MAAMA,wBAAwBC,CAAAA,QAAS;IAC5C,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACH;IACb,OAAO,WAAW,GAAEI,OAAMC,aAAa,CAACJ,MAAMK,IAAI,EAAEJ,UAAUI,IAAI,EAAE,WAAW,GAAEF,OAAMC,aAAa,CAACJ,MAAMM,SAAS,EAAEL,UAAUK,SAAS,GAAGL,UAAUI,IAAI,CAACE,QAAQ;AACrK,GACA,wCAAwC"}
+{"version":3,"sources":["../../../lib/components/Option/renderOption.js"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Option\n */\nexport const renderOption_unstable = state => {\n  const {\n    slots,\n    slotProps\n  } = getSlots(state);\n  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, slots.checkIcon && /*#__PURE__*/React.createElement(slots.checkIcon, slotProps.checkIcon), slotProps.root.children);\n};\n//# sourceMappingURL=renderOption.js.map"],"names":["renderOption_unstable","state","slots","slotProps","getSlots","React","createElement","root","checkIcon","children"],"mappings":";;;;+BAKaA;;aAAAA;;;6DALU;gCACE;AAIlB,MAAMA,wBAAwBC,CAAAA,QAAS;IAC5C,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACH;IACb,OAAO,WAAW,GAAEI,OAAMC,aAAa,CAACJ,MAAMK,IAAI,EAAEJ,UAAUI,IAAI,EAAEL,MAAMM,SAAS,IAAI,WAAW,GAAEH,OAAMC,aAAa,CAACJ,MAAMM,SAAS,EAAEL,UAAUK,SAAS,GAAGL,UAAUI,IAAI,CAACE,QAAQ;AACxL,GACA,wCAAwC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-combobox",
-  "version": "9.2.6",
+  "version": "9.2.8",
   "description": "Fluent UI React Combobox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,14 +33,14 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.2",
-    "@fluentui/react-context-selector": "^9.1.15",
-    "@fluentui/react-field": "9.0.0-alpha.28",
+    "@fluentui/react-context-selector": "^9.1.16",
+    "@fluentui/react-field": "9.0.0-beta.1",
     "@fluentui/react-icons": "^2.0.196",
-    "@fluentui/react-portal": "^9.2.3",
-    "@fluentui/react-positioning": "^9.5.7",
+    "@fluentui/react-portal": "^9.2.4",
+    "@fluentui/react-positioning": "^9.5.8",
     "@fluentui/react-shared-contexts": "^9.3.3",
     "@fluentui/react-theme": "^9.1.7",
-    "@fluentui/react-utilities": "^9.7.2",
+    "@fluentui/react-utilities": "^9.7.3",
     "@griffel/react": "^1.5.2",
     "@swc/helpers": "^0.4.14"
   },
@@ -52,7 +52,6 @@
     "scheduler": "^0.19.0 || ^0.20.0"
   },
   "beachball": {
-    "tag": "beta",
     "disallowedChangeTypes": [
       "major",
       "prerelease"