@fluentui/react-combobox 9.5.1 → 9.5.2

package/CHANGELOG.json

@@ -2,7 +2,64 @@
   "name": "@fluentui/react-combobox",
   "entries": [
     {
-      "date": "Fri, 04 Aug 2023 08:48:25 GMT",
+      "date": "Wed, 09 Aug 2023 13:11:34 GMT",
+      "tag": "@fluentui/react-combobox_v9.5.2",
+      "version": "9.5.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "b090c0339983847a62b9dc6187d08dc8c4b1d55f",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "d740ac698cb7e8c3332e21f6466896f3f2763ae3",
+            "comment": "chore(cxe-coastal): migrate to new slot API"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-field to v9.1.16",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-portal to v9.3.6",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-positioning to v9.9.3",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.2",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-theme to v9.1.11",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 04 Aug 2023 08:52:58 GMT",
       "tag": "@fluentui/react-combobox_v9.5.1",
       "version": "9.5.1",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Fri, 04 Aug 2023 08:48:25 GMT and should not be manually modified.
+This log was last generated on Wed, 09 Aug 2023 13:11:34 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.2)
+
+Wed, 09 Aug 2023 13:11:34 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.5.1..@fluentui/react-combobox_v9.5.2)
+
+### Patches
+
+- chore: Update Griffel to latest version ([PR #28684](https://github.com/microsoft/fluentui/pull/28684) by olfedias@microsoft.com)
+- chore(cxe-coastal): migrate to new slot API ([PR #28754](https://github.com/microsoft/fluentui/pull/28754) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-field to v9.1.16 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-portal to v9.3.6 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-positioning to v9.9.3 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.2 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-theme to v9.1.11 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+
 ## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.1)
 
-Fri, 04 Aug 2023 08:48:25 GMT 
+Fri, 04 Aug 2023 08:52:58 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.5.0..@fluentui/react-combobox_v9.5.1)
 
 ### Patches

package/lib/components/Combobox/renderCombobox.js

@@ -1,14 +1,14 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { Portal } from '@fluentui/react-portal';
 import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 import { ComboboxContext } from '../../contexts/ComboboxContext';
 /**
  * Render the final JSX of Combobox
  */ export const renderCombobox_unstable = (state, contextValues)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(ComboboxContext.Provider, {
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null, /*#__PURE__*/ createElement(ComboboxContext.Provider, {
         value: contextValues.combobox
-    }, /*#__PURE__*/ createElement(slots.input, slotProps.input), slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon), slots.listbox && (state.inlinePopup ? /*#__PURE__*/ createElement(slots.listbox, slotProps.listbox) : /*#__PURE__*/ createElement(Portal, {
+    }, /*#__PURE__*/ createElement(state.input, null), state.expandIcon && /*#__PURE__*/ createElement(state.expandIcon, null), state.listbox && (state.inlinePopup ? /*#__PURE__*/ createElement(state.listbox, null) : /*#__PURE__*/ createElement(Portal, {
         mountNode: state.mountNode
-    }, /*#__PURE__*/ createElement(slots.listbox, slotProps.listbox)))));
+    }, /*#__PURE__*/ createElement(state.listbox, null)))));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\nimport { Portal } from '@fluentui/react-portal';\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues) => {\n  const { slots, slotProps } = getSlotsNext<ComboboxSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <ComboboxContext.Provider value={contextValues.combobox}>\n        <slots.input {...slotProps.input} />\n        {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n        {slots.listbox &&\n          (state.inlinePopup ? (\n            <slots.listbox {...slotProps.listbox} />\n          ) : (\n            <Portal mountNode={state.mountNode}>\n              <slots.listbox {...slotProps.listbox} />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </slots.root>\n  );\n};\n"],"names":["Portal","createElement","getSlotsNext","ComboboxContext","renderCombobox_unstable","state","contextValues","slots","slotProps","root","Provider","value","combobox","input","expandIcon","listbox","inlinePopup","mountNode"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GACvB,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,eAAe,QAAQ,iCAAiC;AAGjE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC,gBAAyC;IACrG,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAA4BG;IAEzD,qBACE,AAhBJ,cAgBKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,gBAC5B,AAjBN,cAiBON,gBAAgBO,QAAQ;QAACC,OAAOL,cAAcM,QAAQ;qBACrD,AAlBR,cAkBSL,MAAMM,KAAK,EAAKL,UAAUK,KAAK,GAC/BN,MAAMO,UAAU,kBAAI,AAnB7B,cAmB8BP,MAAMO,UAAU,EAAKN,UAAUM,UAAU,GAC9DP,MAAMQ,OAAO,IACXV,CAAAA,MAAMW,WAAW,iBAChB,AAtBZ,cAsBaT,MAAMQ,OAAO,EAAKP,UAAUO,OAAO,kBAEpC,AAxBZ,cAwBaf;QAAOiB,WAAWZ,MAAMY,SAAS;qBAChC,AAzBd,cAyBeV,MAAMQ,OAAO,EAAKP,UAAUO,OAAO,EAEvC,AAAD;AAIV,EAAE"}
+{"version":3,"sources":["renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\nimport { Portal } from '@fluentui/react-portal';\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues) => {\n  assertSlots<ComboboxSlots>(state);\n\n  return (\n    <state.root>\n      <ComboboxContext.Provider value={contextValues.combobox}>\n        <state.input />\n        {state.expandIcon && <state.expandIcon />}\n        {state.listbox &&\n          (state.inlinePopup ? (\n            <state.listbox />\n          ) : (\n            <Portal mountNode={state.mountNode}>\n              <state.listbox />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </state.root>\n  );\n};\n"],"names":["Portal","createElement","assertSlots","ComboboxContext","renderCombobox_unstable","state","contextValues","root","Provider","value","combobox","input","expandIcon","listbox","inlinePopup","mountNode"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GACvB,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,eAAe,QAAQ,iCAAiC;AAGjE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC,gBAAyC;IACrGJ,YAA2BG;IAE3B,qBACE,AAhBJ,cAgBKA,MAAME,IAAI,sBACT,AAjBN,cAiBOJ,gBAAgBK,QAAQ;QAACC,OAAOH,cAAcI,QAAQ;qBACrD,AAlBR,cAkBSL,MAAMM,KAAK,SACXN,MAAMO,UAAU,kBAAI,AAnB7B,cAmB8BP,MAAMO,UAAU,SACrCP,MAAMQ,OAAO,IACXR,CAAAA,MAAMS,WAAW,iBAChB,AAtBZ,cAsBaT,MAAMQ,OAAO,wBAEd,AAxBZ,cAwBab;QAAOe,WAAWV,MAAMU,SAAS;qBAChC,AAzBd,cAyBeV,MAAMQ,OAAO,QAEjB,AAAD;AAIV,EAAE"}

package/lib/components/Combobox/useCombobox.js

@@ -2,7 +2,7 @@ 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';
+import { getPartitionedNativeProps, mergeCallbacks, useEventCallback, useId, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
 import { useComboboxBaseState } from '../../utils/useComboboxBaseState';
 import { useComboboxPopup } from '../../utils/useComboboxPopup';
@@ -124,25 +124,25 @@ import { Listbox } from '../Listbox/Listbox';
     // resolve input and listbox slot props
     let triggerSlot;
     let listboxSlot;
-    triggerSlot = resolveShorthand(props.input, {
-        required: true,
+    triggerSlot = slot.always(props.input, {
         defaultProps: {
             ref: useMergedRefs((_props_input = props.input) === null || _props_input === void 0 ? void 0 : _props_input.ref, triggerRef),
             type: 'text',
             value: value !== null && value !== void 0 ? value : '',
             ...triggerNativeProps
-        }
+        },
+        elementType: 'input'
     });
     const resolvedPropsOnKeyDown = triggerSlot.onKeyDown;
     triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);
-    triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);
-    // only resolve listbox slot if needed
-    listboxSlot = open || hasFocus ? resolveShorthand(props.listbox, {
-        required: true,
+    triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur); // only resolve listbox slot if needed
+    listboxSlot = open || hasFocus ? slot.optional(props.listbox, {
+        renderByDefault: true,
         defaultProps: {
             children: props.children,
             style: popupDimensions
-        }
+        },
+        elementType: Listbox
     }) : undefined;
     [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);
     [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);
@@ -156,22 +156,23 @@ import { Listbox } from '../Listbox/Listbox';
             expandIcon: 'span',
             listbox: Listbox
         },
-        root: resolveShorthand(props.root, {
-            required: true,
+        root: slot.always(props.root, {
             defaultProps: {
                 'aria-owns': !inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,
                 ...rootNativeProps
-            }
+            },
+            elementType: 'div'
         }),
         input: triggerSlot,
         listbox: listboxSlot,
-        expandIcon: resolveShorthand(props.expandIcon, {
-            required: true,
+        expandIcon: slot.optional(props.expandIcon, {
+            renderByDefault: true,
             defaultProps: {
                 'aria-expanded': open,
                 children: /*#__PURE__*/ React.createElement(ChevronDownIcon, null),
                 role: 'button'
-            }
+            },
+            elementType: 'span'
         }),
         ...baseState
     };

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

@@ -1 +1 @@
-{"version":3,"sources":["useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { 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  // save the typing vs. navigating options state, as the space key should behave differently in each case\n  // we do not want to update the combobox when this changes, just save the value between renders\n  const isTyping = React.useRef(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  // 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  const resolvedPropsOnKeyDown = triggerSlot.onKeyDown;\n  triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n  triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);\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  /* Set input.onKeyDown here, so we can override the default behavior for spacebar */\n  const defaultOnTriggerKeyDown = state.input.onKeyDown;\n  state.input.onKeyDown = useEventCallback((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    // update typing state to true if the user is typing\n    const action = getDropdownActionFromKey(ev, { open, multiselect });\n    if (action === 'Type') {\n      isTyping.current = true;\n    }\n    // otherwise, update the typing state to false if opening or navigating dropdown options\n    // other actions, like closing the dropdown, should not impact typing state.\n    else if (\n      (action === 'Open' && ev.key !== ' ') ||\n      action === 'Next' ||\n      action === 'Previous' ||\n      action === 'First' ||\n      action === 'Last' ||\n      action === 'PageUp' ||\n      action === 'PageDown'\n    ) {\n      isTyping.current = false;\n    }\n\n    // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n    if (freeform && (isTyping.current || !open) && ev.key === ' ') {\n      resolvedPropsOnKeyDown?.(ev);\n      return;\n    }\n\n    // if we're not allowing space to type, continue with default behavior\n    defaultOnTriggerKeyDown?.(ev);\n  });\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"],"names":["React","useFieldControlProps_unstable","ArrowLeft","ArrowRight","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","resolveShorthand","mergeCallbacks","useEventCallback","useId","useMergedRefs","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useCombobox_unstable","props","ref","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","isTyping","popupDimensions","setPopupDimensions","useEffect","width","current","clientWidth","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","undefined","ev","onTriggerBlur","text","newState","onTriggerChange","target","matchingOption","triggerSlot","listboxSlot","input","required","defaultProps","type","resolvedPropsOnKeyDown","onKeyDown","onChange","onBlur","listbox","children","style","state","components","expandIcon","role","defaultOnTriggerKeyDown","key","action","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy"],"mappings":"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"}
+{"version":3,"sources":["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  mergeCallbacks,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n  slot,\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  // save the typing vs. navigating options state, as the space key should behave differently in each case\n  // we do not want to update the combobox when this changes, just save the value between renders\n  const isTyping = React.useRef(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  // resolve input and listbox slot props\n  let triggerSlot: Slot<'input'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = slot.always(props.input, {\n    defaultProps: {\n      ref: useMergedRefs(props.input?.ref, triggerRef),\n      type: 'text',\n      value: value ?? '',\n      ...triggerNativeProps,\n    },\n    elementType: 'input',\n  });\n  const resolvedPropsOnKeyDown = triggerSlot.onKeyDown;\n  triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n  triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur); // only resolve listbox slot if needed\n  listboxSlot =\n    open || hasFocus\n      ? slot.optional(props.listbox, {\n          renderByDefault: true,\n          defaultProps: { children: props.children, style: popupDimensions },\n          elementType: Listbox,\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: ComboboxState = {\n    components: { root: 'div', input: 'input', expandIcon: 'span', listbox: Listbox },\n    root: slot.always(props.root, {\n      defaultProps: {\n        'aria-owns': !inlinePopup ? listboxSlot?.id : undefined,\n        ...rootNativeProps,\n      },\n      elementType: 'div',\n    }),\n    input: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-expanded': open,\n        children: <ChevronDownIcon />,\n        role: 'button',\n      },\n      elementType: 'span',\n    }),\n    ...baseState,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  /* Set input.onKeyDown here, so we can override the default behavior for spacebar */\n  const defaultOnTriggerKeyDown = state.input.onKeyDown;\n  state.input.onKeyDown = useEventCallback((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    // update typing state to true if the user is typing\n    const action = getDropdownActionFromKey(ev, { open, multiselect });\n    if (action === 'Type') {\n      isTyping.current = true;\n    }\n    // otherwise, update the typing state to false if opening or navigating dropdown options\n    // other actions, like closing the dropdown, should not impact typing state.\n    else if (\n      (action === 'Open' && ev.key !== ' ') ||\n      action === 'Next' ||\n      action === 'Previous' ||\n      action === 'First' ||\n      action === 'Last' ||\n      action === 'PageUp' ||\n      action === 'PageDown'\n    ) {\n      isTyping.current = false;\n    }\n\n    // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n    if (freeform && (isTyping.current || !open) && ev.key === ' ') {\n      resolvedPropsOnKeyDown?.(ev);\n      return;\n    }\n\n    // if we're not allowing space to type, continue with default behavior\n    defaultOnTriggerKeyDown?.(ev);\n  });\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"],"names":["React","useFieldControlProps_unstable","ArrowLeft","ArrowRight","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","mergeCallbacks","useEventCallback","useId","useMergedRefs","slot","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useCombobox_unstable","props","ref","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","isTyping","popupDimensions","setPopupDimensions","useEffect","width","current","clientWidth","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","undefined","ev","onTriggerBlur","text","newState","onTriggerChange","target","matchingOption","triggerSlot","listboxSlot","always","input","defaultProps","type","elementType","resolvedPropsOnKeyDown","onKeyDown","onChange","onBlur","optional","listbox","renderByDefault","children","style","state","components","expandIcon","role","defaultOnTriggerKeyDown","key","action","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy"],"mappings":"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"}

package/lib/components/Combobox/useComboboxStyles.styles.js

@@ -169,8 +169,8 @@ const useStyles = /*#__PURE__*/__styles({
     n51gp8: ["f14g86mu", "f1rvyvqg"]
   }
 }, {
-  d: [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".fwk3njj{display:-ms-inline-grid;display:inline-grid;}", ".fz17x9o{-ms-grid-columns:1fr auto;grid-template-columns:1fr auto;}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".f1hg901r{box-shadow:var(--shadow16);}", ".fmmk62d{max-height:80vh;}", ".fjseox{display:none;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
-  w: [".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}", ".fjw5xc1:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}"],
+  d: [".f122n59{align-items:center;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14mj54c{column-gap:var(--spacingHorizontalXXS);}", ".fwk3njj{display:inline-grid;}", ".fz17x9o{grid-template-columns:1fr auto;}", ".f1869bpl{justify-content:space-between;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".f1hg901r{box-shadow:var(--shadow16);}", ".fmmk62d{max-height:80vh;}", ".fjseox{display:none;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
+  w: [".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}", ".fjw5xc1:focus-within::after{transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}"],
   m: [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
     m: "screen and (prefers-reduced-motion: reduce)"
   }], ["@media screen and (prefers-reduced-motion: reduce){.ftb5wc6::after{transition-delay:0.01ms;}}", {
@@ -185,8 +185,6 @@ const useStyles = /*#__PURE__*/__styles({
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
-    m: "(forced-colors: active)"
   }]],
   h: [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".flmw63s:hover{border-bottom-color:var(--colorNeutralStrokeAccessible);}"],
   a: [".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fqhmt4z:active{border-bottom-color:var(--colorNeutralStrokeAccessible);}"]

package/lib/components/Combobox/useComboboxStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","typographyStyles","__styles","mergeClasses","shorthands","iconSizes","comboboxClassNames","root","input","expandIcon","listbox","fieldHeights","small","medium","large","useStyles","Bt984gj","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B7ck84d","i8kkvl","mc9l5x","Budl1dq","Brf1p80","Bf4jedk","qhf8xq","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","Bcgy8vk","Bw17bha","B1q35kw","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","E5pizo","Bxyxcbc","listboxCollapsed","z189sj","outline","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","d","w","m","h","a","useInputStyles","sj55zd","Bahqtrf","Brovlpu","yvdlaj","B3o7kgh","Bqenvij","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","Byoj8tv","uwmqm3","f","useIconStyles","icon","Bo70h7d","Frg6f3","useComboboxStyles_unstable","state","appearance","open","size","styles","iconStyles","inputStyles","className"],"sources":["useComboboxStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const comboboxClassNames = {\n    root: 'fui-Combobox',\n    input: 'fui-Combobox__input',\n    expandIcon: 'fui-Combobox__expandIcon',\n    listbox: 'fui-Combobox__listbox'\n};\n// Matches internal heights for Select and Input, but there are no theme variables for these\n// field heights are 2px less than other controls, since the border is on the parent element.\nconst fieldHeights = {\n    small: '22px',\n    medium: '30px',\n    large: '38px'\n};\n/**\n * Styles for Combobox\n */ const useStyles = makeStyles({\n    root: {\n        alignItems: 'center',\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        boxSizing: 'border-box',\n        columnGap: tokens.spacingHorizontalXXS,\n        display: 'inline-grid',\n        gridTemplateColumns: '1fr auto',\n        justifyContent: 'space-between',\n        minWidth: '250px',\n        position: 'relative',\n        // windows high contrast mode focus indicator\n        ':focus-within': {\n            outlineWidth: '2px',\n            outlineStyle: 'solid',\n            outlineColor: 'transparent'\n        },\n        // bottom focus border, shared with Input, Select, and SpinButton\n        '::after': {\n            boxSizing: 'border-box',\n            content: '\"\"',\n            position: 'absolute',\n            left: '-1px',\n            bottom: '-1px',\n            right: '-1px',\n            height: `max(2px, ${tokens.borderRadiusMedium})`,\n            borderBottomLeftRadius: tokens.borderRadiusMedium,\n            borderBottomRightRadius: tokens.borderRadiusMedium,\n            ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n            clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n            transform: 'scaleX(0)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationUltraFast,\n            transitionDelay: tokens.curveAccelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within::after': {\n            transform: 'scaleX(1)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationNormal,\n            transitionDelay: tokens.curveDecelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within:active::after': {\n            borderBottomColor: tokens.colorCompoundBrandStrokePressed\n        }\n    },\n    listbox: {\n        boxShadow: `${tokens.shadow16}`,\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        maxHeight: '80vh'\n    },\n    listboxCollapsed: {\n        display: 'none'\n    },\n    // size variants\n    small: {\n        paddingRight: tokens.spacingHorizontalSNudge\n    },\n    medium: {\n        paddingRight: tokens.spacingHorizontalMNudge\n    },\n    large: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        paddingRight: tokens.spacingHorizontalM\n    },\n    // appearance variants\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n        borderBottomColor: tokens.colorNeutralStrokeAccessible\n    },\n    outlineInteractive: {\n        '&:hover': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessible\n        },\n        '&:active': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessible\n        }\n    },\n    underline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n        ...shorthands.borderRadius(0)\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke)\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke)\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    },\n    invalidUnderline: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            borderBottomColor: tokens.colorPaletteRedBorder2\n        }\n    },\n    disabled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        }\n    }\n});\nconst useInputStyles = makeStyles({\n    input: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.border('0'),\n        color: tokens.colorNeutralForeground1,\n        fontFamily: tokens.fontFamilyBase,\n        '&:focus': {\n            outlineStyle: 'none'\n        },\n        '&::placeholder': {\n            color: tokens.colorNeutralForeground4,\n            opacity: 1\n        }\n    },\n    // size variants\n    small: {\n        height: fieldHeights.small,\n        ...typographyStyles.caption1,\n        ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`)\n    },\n    medium: {\n        height: fieldHeights.medium,\n        ...typographyStyles.body1,\n        ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`)\n    },\n    large: {\n        height: fieldHeights.large,\n        ...typographyStyles.body2,\n        ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`)\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: tokens.colorTransparentBackground,\n        cursor: 'not-allowed',\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    }\n});\nconst useIconStyles = makeStyles({\n    icon: {\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralStrokeAccessible,\n        cursor: 'pointer',\n        display: 'block',\n        fontSize: tokens.fontSizeBase500,\n        // the SVG must have display: block for accurate positioning\n        // otherwise an extra inline space is inserted after the svg element\n        '& svg': {\n            display: 'block'\n        }\n    },\n    // icon size variants\n    small: {\n        fontSize: iconSizes.small,\n        marginLeft: tokens.spacingHorizontalXXS\n    },\n    medium: {\n        fontSize: iconSizes.medium,\n        marginLeft: tokens.spacingHorizontalXXS\n    },\n    large: {\n        fontSize: iconSizes.large,\n        marginLeft: tokens.spacingHorizontalSNudge\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed'\n    }\n});\n/**\n * Apply styling to the Combobox slots based on the state\n */ export const useComboboxStyles_unstable = (state)=>{\n    const { appearance , open , size  } = state;\n    const invalid = `${state.input['aria-invalid']}` === 'true';\n    const disabled = state.input.disabled;\n    const styles = useStyles();\n    const iconStyles = useIconStyles();\n    const inputStyles = useInputStyles();\n    state.root.className = mergeClasses(comboboxClassNames.root, styles.root, styles[appearance], styles[size], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n    state.input.className = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);\n    if (state.listbox) {\n        state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);\n    }\n    if (state.expandIcon) {\n        state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, state.expandIcon.className);\n    }\n    return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["tokens","typographyStyles","__styles","mergeClasses","shorthands","iconSizes","comboboxClassNames","root","input","expandIcon","listbox","fieldHeights","small","medium","large","useStyles","Bt984gj","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B7ck84d","i8kkvl","mc9l5x","Budl1dq","Brf1p80","Bf4jedk","qhf8xq","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","Bcgy8vk","Bw17bha","B1q35kw","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","E5pizo","Bxyxcbc","listboxCollapsed","z189sj","outline","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","d","w","m","h","a","useInputStyles","sj55zd","Bahqtrf","Brovlpu","yvdlaj","B3o7kgh","Bqenvij","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","Byoj8tv","uwmqm3","f","useIconStyles","icon","Bo70h7d","Frg6f3","useComboboxStyles_unstable","state","appearance","open","size","styles","iconStyles","inputStyles","className"],"sources":["useComboboxStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const comboboxClassNames = {\n    root: 'fui-Combobox',\n    input: 'fui-Combobox__input',\n    expandIcon: 'fui-Combobox__expandIcon',\n    listbox: 'fui-Combobox__listbox'\n};\n// Matches internal heights for Select and Input, but there are no theme variables for these\n// field heights are 2px less than other controls, since the border is on the parent element.\nconst fieldHeights = {\n    small: '22px',\n    medium: '30px',\n    large: '38px'\n};\n/**\n * Styles for Combobox\n */ const useStyles = makeStyles({\n    root: {\n        alignItems: 'center',\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        boxSizing: 'border-box',\n        columnGap: tokens.spacingHorizontalXXS,\n        display: 'inline-grid',\n        gridTemplateColumns: '1fr auto',\n        justifyContent: 'space-between',\n        minWidth: '250px',\n        position: 'relative',\n        // windows high contrast mode focus indicator\n        ':focus-within': {\n            outlineWidth: '2px',\n            outlineStyle: 'solid',\n            outlineColor: 'transparent'\n        },\n        // bottom focus border, shared with Input, Select, and SpinButton\n        '::after': {\n            boxSizing: 'border-box',\n            content: '\"\"',\n            position: 'absolute',\n            left: '-1px',\n            bottom: '-1px',\n            right: '-1px',\n            height: `max(2px, ${tokens.borderRadiusMedium})`,\n            borderBottomLeftRadius: tokens.borderRadiusMedium,\n            borderBottomRightRadius: tokens.borderRadiusMedium,\n            ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n            clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n            transform: 'scaleX(0)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationUltraFast,\n            transitionDelay: tokens.curveAccelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within::after': {\n            transform: 'scaleX(1)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationNormal,\n            transitionDelay: tokens.curveDecelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within:active::after': {\n            borderBottomColor: tokens.colorCompoundBrandStrokePressed\n        }\n    },\n    listbox: {\n        boxShadow: `${tokens.shadow16}`,\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        maxHeight: '80vh'\n    },\n    listboxCollapsed: {\n        display: 'none'\n    },\n    // size variants\n    small: {\n        paddingRight: tokens.spacingHorizontalSNudge\n    },\n    medium: {\n        paddingRight: tokens.spacingHorizontalMNudge\n    },\n    large: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        paddingRight: tokens.spacingHorizontalM\n    },\n    // appearance variants\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n        borderBottomColor: tokens.colorNeutralStrokeAccessible\n    },\n    outlineInteractive: {\n        '&:hover': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessible\n        },\n        '&:active': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessible\n        }\n    },\n    underline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n        ...shorthands.borderRadius(0)\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke)\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke)\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    },\n    invalidUnderline: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            borderBottomColor: tokens.colorPaletteRedBorder2\n        }\n    },\n    disabled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        }\n    }\n});\nconst useInputStyles = makeStyles({\n    input: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.border('0'),\n        color: tokens.colorNeutralForeground1,\n        fontFamily: tokens.fontFamilyBase,\n        '&:focus': {\n            outlineStyle: 'none'\n        },\n        '&::placeholder': {\n            color: tokens.colorNeutralForeground4,\n            opacity: 1\n        }\n    },\n    // size variants\n    small: {\n        height: fieldHeights.small,\n        ...typographyStyles.caption1,\n        ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`)\n    },\n    medium: {\n        height: fieldHeights.medium,\n        ...typographyStyles.body1,\n        ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`)\n    },\n    large: {\n        height: fieldHeights.large,\n        ...typographyStyles.body2,\n        ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`)\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: tokens.colorTransparentBackground,\n        cursor: 'not-allowed',\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    }\n});\nconst useIconStyles = makeStyles({\n    icon: {\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralStrokeAccessible,\n        cursor: 'pointer',\n        display: 'block',\n        fontSize: tokens.fontSizeBase500,\n        // the SVG must have display: block for accurate positioning\n        // otherwise an extra inline space is inserted after the svg element\n        '& svg': {\n            display: 'block'\n        }\n    },\n    // icon size variants\n    small: {\n        fontSize: iconSizes.small,\n        marginLeft: tokens.spacingHorizontalXXS\n    },\n    medium: {\n        fontSize: iconSizes.medium,\n        marginLeft: tokens.spacingHorizontalXXS\n    },\n    large: {\n        fontSize: iconSizes.large,\n        marginLeft: tokens.spacingHorizontalSNudge\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed'\n    }\n});\n/**\n * Apply styling to the Combobox slots based on the state\n */ export const useComboboxStyles_unstable = (state)=>{\n    const { appearance , open , size  } = state;\n    const invalid = `${state.input['aria-invalid']}` === 'true';\n    const disabled = state.input.disabled;\n    const styles = useStyles();\n    const iconStyles = useIconStyles();\n    const inputStyles = useInputStyles();\n    state.root.className = mergeClasses(comboboxClassNames.root, styles.root, styles[appearance], styles[size], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n    state.input.className = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);\n    if (state.listbox) {\n        state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);\n    }\n    if (state.expandIcon) {\n        state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, state.expandIcon.className);\n    }\n    return state;\n};\n"],"mappings":"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"}

package/lib/components/Dropdown/renderDropdown.js

@@ -1,14 +1,14 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { Portal } from '@fluentui/react-portal';
 import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 import { ComboboxContext } from '../../contexts/ComboboxContext';
 /**
  * Render the final JSX of Dropdown
  */ export const renderDropdown_unstable = (state, contextValues)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(ComboboxContext.Provider, {
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null, /*#__PURE__*/ createElement(ComboboxContext.Provider, {
         value: contextValues.combobox
-    }, /*#__PURE__*/ createElement(slots.button, slotProps.button, slotProps.button.children, slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon)), slots.listbox && (state.inlinePopup ? /*#__PURE__*/ createElement(slots.listbox, slotProps.listbox) : /*#__PURE__*/ createElement(Portal, {
+    }, /*#__PURE__*/ createElement(state.button, null, state.button.children, state.expandIcon && /*#__PURE__*/ createElement(state.expandIcon, null)), state.listbox && (state.inlinePopup ? /*#__PURE__*/ createElement(state.listbox, null) : /*#__PURE__*/ createElement(Portal, {
         mountNode: state.mountNode
-    }, /*#__PURE__*/ createElement(slots.listbox, slotProps.listbox)))));
+    }, /*#__PURE__*/ createElement(state.listbox, null)))));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDropdown.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { Portal } from '@fluentui/react-portal';\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues) => {\n  const { slots, slotProps } = getSlotsNext<DropdownSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <ComboboxContext.Provider value={contextValues.combobox}>\n        <slots.button {...slotProps.button}>\n          {slotProps.button.children}\n          {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n        </slots.button>\n        {slots.listbox &&\n          (state.inlinePopup ? (\n            <slots.listbox {...slotProps.listbox} />\n          ) : (\n            <Portal mountNode={state.mountNode}>\n              <slots.listbox {...slotProps.listbox} />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </slots.root>\n  );\n};\n"],"names":["Portal","createElement","getSlotsNext","ComboboxContext","renderDropdown_unstable","state","contextValues","slots","slotProps","root","Provider","value","combobox","button","children","expandIcon","listbox","inlinePopup","mountNode"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,eAAe,QAAQ,iCAAiC;AAGjE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC,gBAAyC;IACrG,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAA4BG;IAEzD,qBACE,AAjBJ,cAiBKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,gBAC5B,AAlBN,cAkBON,gBAAgBO,QAAQ;QAACC,OAAOL,cAAcM,QAAQ;qBACrD,AAnBR,cAmBSL,MAAMM,MAAM,EAAKL,UAAUK,MAAM,EAC/BL,UAAUK,MAAM,CAACC,QAAQ,EACzBP,MAAMQ,UAAU,kBAAI,AArB/B,cAqBgCR,MAAMQ,UAAU,EAAKP,UAAUO,UAAU,IAEhER,MAAMS,OAAO,IACXX,CAAAA,MAAMY,WAAW,iBAChB,AAzBZ,cAyBaV,MAAMS,OAAO,EAAKR,UAAUQ,OAAO,kBAEpC,AA3BZ,cA2BahB;QAAOkB,WAAWb,MAAMa,SAAS;qBAChC,AA5Bd,cA4BeX,MAAMS,OAAO,EAAKR,UAAUQ,OAAO,EAEvC,AAAD;AAIV,EAAE"}
+{"version":3,"sources":["renderDropdown.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { Portal } from '@fluentui/react-portal';\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues) => {\n  assertSlots<DropdownSlots>(state);\n\n  return (\n    <state.root>\n      <ComboboxContext.Provider value={contextValues.combobox}>\n        <state.button>\n          {state.button.children}\n          {state.expandIcon && <state.expandIcon />}\n        </state.button>\n        {state.listbox &&\n          (state.inlinePopup ? (\n            <state.listbox />\n          ) : (\n            <Portal mountNode={state.mountNode}>\n              <state.listbox />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </state.root>\n  );\n};\n"],"names":["Portal","createElement","assertSlots","ComboboxContext","renderDropdown_unstable","state","contextValues","root","Provider","value","combobox","button","children","expandIcon","listbox","inlinePopup","mountNode"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,eAAe,QAAQ,iCAAiC;AAGjE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC,gBAAyC;IACrGJ,YAA2BG;IAE3B,qBACE,AAjBJ,cAiBKA,MAAME,IAAI,sBACT,AAlBN,cAkBOJ,gBAAgBK,QAAQ;QAACC,OAAOH,cAAcI,QAAQ;qBACrD,AAnBR,cAmBSL,MAAMM,MAAM,QACVN,MAAMM,MAAM,CAACC,QAAQ,EACrBP,MAAMQ,UAAU,kBAAI,AArB/B,cAqBgCR,MAAMQ,UAAU,UAEvCR,MAAMS,OAAO,IACXT,CAAAA,MAAMU,WAAW,iBAChB,AAzBZ,cAyBaV,MAAMS,OAAO,wBAEd,AA3BZ,cA2Bad;QAAOgB,WAAWX,MAAMW,SAAS;qBAChC,AA5Bd,cA4BeX,MAAMS,OAAO,QAEjB,AAAD;AAIV,EAAE"}

package/lib/components/Dropdown/useDropdown.js

@@ -1,13 +1,12 @@
 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 { getPartitionedNativeProps, mergeCallbacks, useMergedRefs, useTimeout, slot } from '@fluentui/react-utilities';
 import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
 import { useComboboxBaseState } from '../../utils/useComboboxBaseState';
 import { useComboboxPopup } from '../../utils/useComboboxPopup';
 import { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';
 import { Listbox } from '../Listbox/Listbox';
-import { useMergedRefs } from '@fluentui/react-utilities';
 /**
  * Create the state required to render Dropdown.
  *
@@ -95,23 +94,24 @@ import { useMergedRefs } from '@fluentui/react-utilities';
     // resolve button and listbox slot props
     let triggerSlot;
     let listboxSlot;
-    triggerSlot = resolveShorthand(props.button, {
-        required: true,
+    triggerSlot = slot.always(props.button, {
         defaultProps: {
             type: 'button',
             children: baseState.value || props.placeholder,
             ...triggerNativeProps
-        }
+        },
+        elementType: 'button'
     });
     triggerSlot.onKeyDown = mergeCallbacks(onTriggerKeyDown, triggerSlot.onKeyDown);
-    listboxSlot = baseState.open || baseState.hasFocus ? resolveShorthand(props.listbox, {
-        required: true,
+    listboxSlot = baseState.open || baseState.hasFocus ? slot.optional(props.listbox, {
+        renderByDefault: true,
         defaultProps: {
             children: props.children,
             style: {
                 width: popupWidth
             }
-        }
+        },
+        elementType: Listbox
     }) : undefined;
     [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);
     [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);
@@ -122,21 +122,22 @@ import { useMergedRefs } from '@fluentui/react-utilities';
             expandIcon: 'span',
             listbox: Listbox
         },
-        root: resolveShorthand(props.root, {
-            required: true,
+        root: slot.always(props.root, {
             defaultProps: {
                 'aria-owns': !props.inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,
                 children: props.children,
                 ...rootNativeProps
-            }
+            },
+            elementType: 'div'
         }),
         button: triggerSlot,
         listbox: listboxSlot,
-        expandIcon: resolveShorthand(props.expandIcon, {
-            required: true,
+        expandIcon: slot.optional(props.expandIcon, {
+            renderByDefault: true,
             defaultProps: {
                 children: /*#__PURE__*/ React.createElement(ChevronDownIcon, null)
-            }
+            },
+            elementType: 'span'
         }),
         placeholderVisible: !baseState.value && !!props.placeholder,
         ...baseState