@fluentui/react-combobox 9.1.4 → 9.2.0

package/CHANGELOG.json

@@ -2,7 +2,81 @@
   "name": "@fluentui/react-combobox",
   "entries": [
     {
-      "date": "Wed, 15 Feb 2023 11:41:24 GMT",
+      "date": "Wed, 08 Mar 2023 17:38:57 GMT",
+      "tag": "@fluentui/react-combobox_v9.2.0",
+      "version": "9.2.0",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "677a67b551966986db34a6fac608cb89ee150471",
+            "comment": "style: apply prettier 2.3-2.8 formatting on whole codebase"
+          }
+        ],
+        "minor": [
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "1f63507e89fc83b0b82d5ee61a0d775890fcdcc5",
+            "comment": "feat: Adding calls to custom style hooks derived from context."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.11",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.22",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-portal to v9.1.10",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-positioning to v9.5.1",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.3.0",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-utilities to v9.6.1",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 22 Feb 2023 23:06:07 GMT",
+      "tag": "@fluentui/react-combobox_v9.1.5",
+      "version": "9.1.5",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-positioning to v9.5.0",
+            "commit": "9ee6caa17f745e014ecba467a4528181ae49be30"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 15 Feb 2023 11:44:52 GMT",
       "tag": "@fluentui/react-combobox_v9.1.4",
       "version": "9.1.4",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Wed, 15 Feb 2023 11:41:24 GMT and should not be manually modified.
+This log was last generated on Wed, 08 Mar 2023 17:38:57 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.2.0)
+
+Wed, 08 Mar 2023 17:38:57 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.1.5..@fluentui/react-combobox_v9.2.0)
+
+### Minor changes
+
+- feat: Adding calls to custom style hooks derived from context. ([PR #27063](https://github.com/microsoft/fluentui/pull/27063) by gcox@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.11 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-field to v9.0.0-alpha.22 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-portal to v9.1.10 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-positioning to v9.5.1 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.3.0 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-utilities to v9.6.1 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+
+## [9.1.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.1.5)
+
+Wed, 22 Feb 2023 23:06:07 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.1.4..@fluentui/react-combobox_v9.1.5)
+
+### Patches
+
+- Bump @fluentui/react-positioning to v9.5.0 ([PR #26616](https://github.com/microsoft/fluentui/pull/26616) by beachball)
+
 ## [9.1.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.1.4)
 
-Wed, 15 Feb 2023 11:41:24 GMT 
+Wed, 15 Feb 2023 11:44:52 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.1.3..@fluentui/react-combobox_v9.1.4)
 
 ### Patches

package/lib/components/Combobox/Combobox.js

@@ -3,6 +3,7 @@ import { useCombobox_unstable } from './useCombobox';
 import { renderCombobox_unstable } from './renderCombobox';
 import { useComboboxStyles_unstable } from './useComboboxStyles';
 import { useComboboxContextValues } from '../../contexts/useComboboxContextValues';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * Combobox component: a selection control that allows users to choose from a set of possible options
  */
@@ -10,6 +11,10 @@ export const Combobox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useCombobox_unstable(props, ref);
   const contextValues = useComboboxContextValues(state);
   useComboboxStyles_unstable(state);
+  const {
+    useComboboxStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderCombobox_unstable(state, contextValues);
 });
 Combobox.displayName = 'Combobox';

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAEhE,SAASC,wBAAwB,QAAQ,yCAAyC;AAGlF;;;AAGA,OAAO,MAAMC,QAAQ,gBAAuCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC1F,MAAMC,KAAK,GAAGR,oBAAoB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAC9C,MAAME,aAAa,GAAGN,wBAAwB,CAACK,KAAK,CAAC;EAErDN,0BAA0B,CAACM,KAAK,CAAC;EACjC,OAAOP,uBAAuB,CAACO,KAAK,EAAEC,aAAa,CAAC;AACtD,CAAC,CAAC;AAEFL,QAAQ,CAACM,WAAW,GAAG,UAAU","names":["React","useCombobox_unstable","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxContextValues","Combobox","forwardRef","props","ref","state","contextValues","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles';\nimport type { ComboboxProps } from './Combobox.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Combobox component: a selection control that allows users to choose from a set of possible options\n */\nexport const Combobox: ForwardRefComponent<ComboboxProps> = React.forwardRef((props, ref) => {\n  const state = useCombobox_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useComboboxStyles_unstable(state);\n  return renderCombobox_unstable(state, contextValues);\n});\n\nCombobox.displayName = 'Combobox';\n"]}
+{"version":3,"names":["React","useCombobox_unstable","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxContextValues","useCustomStyleHooks_unstable","Combobox","forwardRef","props","ref","state","contextValues","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-combobox/src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles';\nimport type { ComboboxProps } from './Combobox.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Combobox component: a selection control that allows users to choose from a set of possible options\n */\nexport const Combobox: ForwardRefComponent<ComboboxProps> = React.forwardRef((props, ref) => {\n  const state = useCombobox_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useComboboxStyles_unstable(state);\n\n  const { useComboboxStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderCombobox_unstable(state, contextValues);\n});\n\nCombobox.displayName = 'Combobox';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAEhE,SAASC,wBAAwB,QAAQ,yCAAyC;AAElF,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,QAAQ,gBAAuCN,KAAK,CAACO,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC1F,MAAMC,KAAK,GAAGT,oBAAoB,CAACO,KAAK,EAAEC,GAAG,CAAC;EAC9C,MAAME,aAAa,GAAGP,wBAAwB,CAACM,KAAK,CAAC;EAErDP,0BAA0B,CAACO,KAAK,CAAC;EAEjC,MAAM;IAAEP,0BAA0B,EAAES;EAAe,CAAE,GAAGP,4BAA4B,EAAE;EACtFO,eAAe,CAACF,KAAK,CAAC;EAEtB,OAAOR,uBAAuB,CAACQ,KAAK,EAAEC,aAAa,CAAC;AACtD,CAAC,CAAC;AAEFL,QAAQ,CAACO,WAAW,GAAG,UAAU"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,eAAe,QAAQ,gCAAgC;AAGhE;;;AAGA,OAAO,MAAMC,uBAAuB,GAAG,CAACC,KAAoB,EAAEC,aAAoC,KAAI;EACpG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAgBG,KAAK,CAAC;EAE3D,oBACEL,oBAACO,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,gBAC5BT,oBAACG,eAAe,CAACO,QAAQ;IAACC,KAAK,EAAEL,aAAa,CAACM;EAAQ,gBACrDZ,oBAACO,KAAK,CAACM,KAAK;IAAA,GAAKL,SAAS,CAACK;EAAK,EAAI,EACnCN,KAAK,CAACO,UAAU,iBAAId,oBAACO,KAAK,CAACO,UAAU;IAAA,GAAKN,SAAS,CAACM;EAAU,EAAI,EAClEP,KAAK,CAACQ,OAAO,KACXV,KAAK,CAACW,WAAW,gBAChBhB,oBAACO,KAAK,CAACQ,OAAO;IAAA,GAAKP,SAAS,CAACO;EAAO,EAAI,gBAExCf,oBAACC,MAAM,qBACLD,oBAACO,KAAK,CAACQ,OAAO;IAAA,GAAKP,SAAS,CAACO;EAAO,EAAI,CAE3C,CAAC,CACqB,CAChB;AAEjB,CAAC","names":["React","Portal","getSlots","ComboboxContext","renderCombobox_unstable","state","contextValues","slots","slotProps","root","Provider","value","combobox","input","expandIcon","listbox","inlinePopup"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/renderCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } 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 } = getSlots<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>\n              <slots.listbox {...slotProps.listbox} />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"names":["React","Portal","getSlots","ComboboxContext","renderCombobox_unstable","state","contextValues","slots","slotProps","createElement","root","Provider","value","combobox","input","expandIcon","listbox","inlinePopup"],"sources":["../src/packages/react-components/react-combobox/src/components/Combobox/renderCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } 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 } = getSlots<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>\n              <slots.listbox {...slotProps.listbox} />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,eAAe,QAAQ,gCAAgC;AAGhE;;;AAGA,OAAO,MAAMC,uBAAuB,GAAGA,CAACC,KAAoB,EAAEC,aAAoC,KAAI;EACpG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAgBG,KAAK,CAAC;EAE3D,oBACEL,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,gBAC5BV,KAAA,CAAAS,aAAA,CAACN,eAAe,CAACQ,QAAQ;IAACC,KAAK,EAAEN,aAAa,CAACO;EAAQ,gBACrDb,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACO,KAAK;IAAA,GAAKN,SAAS,CAACM;EAAK,EAAI,EACnCP,KAAK,CAACQ,UAAU,iBAAIf,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACQ,UAAU;IAAA,GAAKP,SAAS,CAACO;EAAU,EAAI,EAClER,KAAK,CAACS,OAAO,KACXX,KAAK,CAACY,WAAW,gBAChBjB,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACS,OAAO;IAAA,GAAKR,SAAS,CAACQ;EAAO,EAAI,gBAExChB,KAAA,CAAAS,aAAA,CAACR,MAAM,qBACLD,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACS,OAAO;IAAA,GAAKR,SAAS,CAACQ;EAAO,EAAI,CAE3C,CAAC,CACqB,CAChB;AAEjB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["React","ArrowLeft","ArrowRight","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","resolveShorthand","mergeCallbacks","useEventCallback","useId","useMergedRefs","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useCombobox_unstable","props","ref","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","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","onTriggerKeyDown","key","triggerSlot","listboxSlot","input","required","defaultProps","type","onChange","onBlur","onKeyDown","listbox","children","style","state","components","expandIcon","role","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/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"]}
+{"version":3,"names":["React","ArrowLeft","ArrowRight","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","resolveShorthand","mergeCallbacks","useEventCallback","useId","useMergedRefs","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useCombobox_unstable","props","ref","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","width","_a","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","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","focus","hasExpandLabel","defaultOpenString","chevronId","_b","chevronLabelledBy"],"sources":["../src/packages/react-components/react-combobox/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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,SAAS,EAAEC,UAAU,QAAQ,yBAAyB;AAC/D,SAASC,kBAAkB,IAAIC,eAAe,QAAQ,uBAAuB;AAC7E,SACEC,yBAAyB,EACzBC,gBAAgB,EAChBC,cAAc,EACdC,gBAAgB,EAChBC,KAAK,EACLC,aAAa,QACR,2BAA2B;AAClC,SAASC,wBAAwB,QAAQ,gCAAgC;AACzE,SAASC,oBAAoB,QAAQ,kCAAkC;AACvE,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,SAASC,sBAAsB,QAAQ,oCAAoC;AAC3E,SAASC,OAAO,QAAQ,oBAAoB;AAM5C;;;;;;;;;AASA,OAAO,MAAMC,oBAAoB,GAAGA,CAACC,KAAoB,EAAEC,GAAgC,KAAmB;;EAC5G,MAAMC,SAAS,GAAGP,oBAAoB,CAAC;IAAE,GAAGK,KAAK;IAAEG,QAAQ,EAAE;EAAI,CAAE,CAAC;EACpE,MAAM;IACJC,YAAY;IACZC,cAAc;IACdC,YAAY;IACZC,sBAAsB;IACtBC,QAAQ;IACRC,IAAI;IACJC,YAAY;IACZC,eAAe;IACfC,eAAe;IACfC,eAAe;IACfC,OAAO;IACPC,QAAQ;IACRC;EAAK,CACN,GAAGd,SAAS;EACb,MAAM;IAAEe,QAAQ;IAAEC,QAAQ;IAAEC,WAAW;IAAEC;EAAW,CAAE,GAAGpB,KAAK;EAC9D,MAAMqB,OAAO,GAAG7B,KAAK,CAAC,WAAW,CAAC;EAElC,MAAM;IAAE8B,OAAO,EAAEC,kBAAkB;IAAEC,IAAI,EAAEC;EAAe,CAAE,GAAGrC,yBAAyB,CAAC;IACvFY,KAAK;IACL0B,kBAAkB,EAAE,OAAO;IAC3BC,iBAAiB,EAAE,CAAC,UAAU,EAAE,MAAM;GACvC,CAAC;EAEF,MAAMC,OAAO,GAAG7C,KAAK,CAAC8C,MAAM,CAAiB,IAAI,CAAC;EAClD,MAAMC,UAAU,GAAG/C,KAAK,CAAC8C,MAAM,CAAmB,IAAI,CAAC;EAEvD;EACA;EACA;EACA,MAAM,CAACE,oBAAoB,EAAEC,uBAAuB,CAAC,GAAGjD,KAAK,CAACkD,QAAQ,CAAC,KAAK,CAAC;EAE7E;EACA,MAAM,CAACC,eAAe,EAAEC,kBAAkB,CAAC,GAAGpD,KAAK,CAACkD,QAAQ,EAAqB;EACjFlD,KAAK,CAACqD,SAAS,CAAC,MAAK;;IACnB;IACA,IAAI3B,IAAI,EAAE;MACR,MAAM4B,KAAK,GAAG,GAAG,CAAAC,EAAA,GAAAV,OAAO,CAACW,OAAO,cAAAD,EAAA,uBAAAA,EAAA,CAAEE,WAAW,IAAI;MACjD,IAAIH,KAAK,MAAKH,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEG,KAAK,GAAE;QACpCF,kBAAkB,CAAC;UAAEE;QAAK,CAAE,CAAC;;;EAGnC,CAAC,EAAE,CAAC5B,IAAI,EAAEyB,eAAe,CAAC,CAAC;EAE3B;EACA,MAAMO,kBAAkB,GAAIC,UAAkB,IAA6B;;IACzE,MAAMC,YAAY,GAAGD,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEE,IAAI,GAAGC,WAAW,EAAE;IAErD,IAAI,CAACF,YAAY,IAAIA,YAAY,CAACG,MAAM,KAAK,CAAC,EAAE;MAC9C;;IAGF,MAAMC,OAAO,GAAIC,UAAkB,IAAKA,UAAU,CAACH,WAAW,EAAE,CAACI,OAAO,CAACN,YAAY,CAAC,KAAK,CAAC;IAC5F,MAAMO,OAAO,GAAG3C,sBAAsB,CAACwC,OAAO,CAAC;IAE/C;IACA,IAAIG,OAAO,CAACJ,MAAM,GAAG,CAAC,IAAI1C,YAAY,EAAE;MACtC,MAAM+C,UAAU,GAAG7C,YAAY,CAACF,YAAY,CAACgD,EAAE,CAAC;MAChD,MAAMC,SAAS,GAAGH,OAAO,CAACI,IAAI,CAACC,MAAM,IAAIjD,YAAY,CAACiD,MAAM,CAACH,EAAE,CAAC,IAAID,UAAU,CAAC;MAC/E,OAAOE,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIH,OAAO,CAAC,CAAC,CAAC;;IAGhC,OAAO,CAAAZ,EAAA,GAAAY,OAAO,CAAC,CAAC,CAAC,cAAAZ,EAAA,cAAAA,EAAA,GAAIkB,SAAS;EAChC,CAAC;EAED;EAEA;EACAtD,SAAS,CAACQ,YAAY,GAAG,CAAC+C,EAAmB,EAAEF,MAAmB,KAAI;IACpExC,QAAQ,CAACyC,SAAS,CAAC;IACnB9C,YAAY,CAAC+C,EAAE,EAAEF,MAAM,CAAC;EAC1B,CAAC;EAED,MAAMG,aAAa,GAAID,EAAsC,IAAI;IAC/D;IACA,IAAI,CAACvD,SAAS,CAACO,IAAI,IAAI,CAACS,QAAQ,EAAE;MAChC;MACA,IAAIF,KAAK,IAAIZ,YAAY,IAAIY,KAAK,CAAC4B,IAAI,EAAE,CAACC,WAAW,EAAE,MAAKzC,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEuD,IAAI,CAACd,WAAW,EAAE,GAAE;QAC5F3C,SAAS,CAACQ,YAAY,CAAC+C,EAAE,EAAErD,YAAY,CAAC;;MAG1C;MACAW,QAAQ,CAACyC,SAAS,CAAC;;EAEvB,CAAC;EAEDtD,SAAS,CAACY,OAAO,GAAG,CAAC2C,EAAE,EAAEG,QAAiB,KAAI;IAC5C,IAAI3C,QAAQ,EAAE;MACZ;;IAGF,IAAI,CAAC2C,QAAQ,IAAI,CAAC1C,QAAQ,EAAE;MAC1BH,QAAQ,CAACyC,SAAS,CAAC;;IAGrB1C,OAAO,CAAC2C,EAAE,EAAEG,QAAQ,CAAC;EACvB,CAAC;EAED;EACA,MAAMC,eAAe,GAAIJ,EAAuC,IAAI;IAClE,MAAMf,UAAU,GAAGe,EAAE,CAACK,MAAM,CAAC9C,KAAK;IAClC;IACAd,SAAS,CAACa,QAAQ,CAAC2B,UAAU,CAAC;IAE9B;IACA,MAAMqB,cAAc,GAAGtB,kBAAkB,CAACC,UAAU,CAAC;IACrD9B,eAAe,CAACmD,cAAc,CAAC;IAE/BlD,eAAe,CAAC,IAAI,CAAC;IAErB;IACA,IAAI,CAACO,WAAW,IAAIT,eAAe,CAACmC,MAAM,KAAK,CAAC,KAAKJ,UAAU,CAACI,MAAM,GAAG,CAAC,IAAI,CAACiB,cAAc,CAAC,EAAE;MAC9F1D,cAAc,CAACoD,EAAE,CAAC;;EAEtB,CAAC;EAED;EACA,MAAMO,gBAAgB,GAAIP,EAAyC,IAAI;IACrE,IAAI,CAAChD,IAAI,IAAIf,wBAAwB,CAAC+D,EAAE,CAAC,KAAK,MAAM,EAAE;MACpDvD,SAAS,CAACY,OAAO,CAAC2C,EAAE,EAAE,IAAI,CAAC;;IAG7B;IACA,IAAIA,EAAE,CAACQ,GAAG,KAAKjF,SAAS,IAAIyE,EAAE,CAACQ,GAAG,KAAKhF,UAAU,EAAE;MACjD+C,uBAAuB,CAAC,IAAI,CAAC;KAC9B,MAAM;MACLA,uBAAuB,CAAC,KAAK,CAAC;;EAElC,CAAC;EAED;EACA,IAAIkC,WAA0B;EAC9B,IAAIC,WAA6C;EAEjDD,WAAW,GAAG7E,gBAAgB,CAACW,KAAK,CAACoE,KAAK,EAAE;IAC1CC,QAAQ,EAAE,IAAI;IACdC,YAAY,EAAE;MACZrE,GAAG,EAAER,aAAa,CAAC,CAAA6C,EAAA,GAAAtC,KAAK,CAACoE,KAAK,cAAA9B,EAAA,uBAAAA,EAAA,CAAErC,GAAG,EAAE6B,UAAU,CAAC;MAChDyC,IAAI,EAAE,MAAM;MACZvD,KAAK,EAAEA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAE;MAClB,GAAGO;;GAEN,CAAC;EAEF2C,WAAW,CAACM,QAAQ,GAAGlF,cAAc,CAAC4E,WAAW,CAACM,QAAQ,EAAEX,eAAe,CAAC;EAC5EK,WAAW,CAACO,MAAM,GAAGnF,cAAc,CAAC4E,WAAW,CAACO,MAAM,EAAEf,aAAa,CAAC;EACtEQ,WAAW,CAACQ,SAAS,GAAGpF,cAAc,CAAC4E,WAAW,CAACQ,SAAS,EAAEV,gBAAgB,CAAC;EAE/E;EACAG,WAAW,GACT1D,IAAI,IAAID,QAAQ,GACZnB,gBAAgB,CAACW,KAAK,CAAC2E,OAAO,EAAE;IAC9BN,QAAQ,EAAE,IAAI;IACdC,YAAY,EAAE;MACZM,QAAQ,EAAE5E,KAAK,CAAC4E,QAAQ;MACxBC,KAAK,EAAE3C;;GAEV,CAAC,GACFsB,SAAS;EAEf,CAACU,WAAW,EAAEC,WAAW,CAAC,GAAGvE,gBAAgB,CAACI,KAAK,EAAEkE,WAAW,EAAEC,WAAW,CAAC;EAC9E,CAACD,WAAW,EAAEC,WAAW,CAAC,GAAGtE,sBAAsB,CAACG,KAAK,EAAEE,SAAS,EAAED,GAAG,EAAEiE,WAAW,EAAEC,WAAW,CAAC;EAEpG,IAAIpC,oBAAoB,EAAE;IACxBmC,WAAW,CAAC,uBAAuB,CAAC,GAAGV,SAAS;;EAGlD,MAAMsB,KAAK,GAAkB;IAC3BC,UAAU,EAAE;MACVvD,IAAI,EAAE,KAAK;MACX4C,KAAK,EAAE,OAAO;MACdY,UAAU,EAAE,MAAM;MAClBL,OAAO,EAAE7E;KACV;IACD0B,IAAI,EAAEnC,gBAAgB,CAACW,KAAK,CAACwB,IAAI,EAAE;MACjC6C,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZ,WAAW,EAAE,CAACnD,WAAW,GAAGgD,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEf,EAAE,GAAGI,SAAS;QACvD,GAAG/B;;KAEN,CAAC;IACF2C,KAAK,EAAEF,WAAW;IAClBS,OAAO,EAAER,WAAW;IACpBa,UAAU,EAAE3F,gBAAgB,CAACW,KAAK,CAACgF,UAAU,EAAE;MAC7CX,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZ,eAAe,EAAE7D,IAAI;QACrBmE,QAAQ,eAAE7F,KAAA,CAAAkG,aAAA,CAAC9F,eAAe,OAAG;QAC7B+F,IAAI,EAAE;;KAET,CAAC;IACF,GAAGhF;GACJ;EAED4E,KAAK,CAACtD,IAAI,CAACvB,GAAG,GAAGR,aAAa,CAACqF,KAAK,CAACtD,IAAI,CAACvB,GAAG,EAAE2B,OAAO,CAAC;EAEvD;EACA,MAAM;IAAEuD,WAAW,EAAEC,eAAe;IAAEC,OAAO,EAAEC;EAAW,CAAE,GAAGR,KAAK,CAACE,UAAU,IAAI,EAAE;EACrF,MAAMO,qBAAqB,GAAGhG,gBAAgB,CAC5CD,cAAc,CAAC8F,eAAe,EAAE,MAAK;IACnC;IACA,IAAI3E,IAAI,EAAE;MACRP,SAAS,CAACsF,cAAc,CAACjD,OAAO,GAAG,IAAI;;EAE3C,CAAC,CAAC,CACH;EAED,MAAMkD,iBAAiB,GAAGlG,gBAAgB,CACxCD,cAAc,CAACgG,WAAW,EAAGI,KAAwC,IAAI;;IACvE;IACAZ,KAAK,CAAChE,OAAO,CAAC4E,KAAK,EAAE,CAACZ,KAAK,CAACrE,IAAI,CAAC;IACjC,CAAA6B,EAAA,GAAAR,UAAU,CAACS,OAAO,cAAAD,EAAA,uBAAAA,EAAA,CAAEqD,KAAK,EAAE;IAE3B;IACA9E,eAAe,CAAC,KAAK,CAAC;EACxB,CAAC,CAAC,CACH;EAED,IAAIiE,KAAK,CAACE,UAAU,EAAE;IACpBF,KAAK,CAACE,UAAU,CAACG,WAAW,GAAGI,qBAAqB;IACpDT,KAAK,CAACE,UAAU,CAACK,OAAO,GAAGI,iBAAiB;IAE5C;IACA;IACA;IACA;IACA;IACA;IACA,MAAMG,cAAc,GAAGd,KAAK,CAACE,UAAU,CAAC,YAAY,CAAC,IAAIF,KAAK,CAACE,UAAU,CAAC,iBAAiB,CAAC;IAC5F,MAAMa,iBAAiB,GAAG,MAAM,CAAC,CAAC;IAClC,IAAI,CAACD,cAAc,EAAE;MACnB,IAAI5F,KAAK,CAAC,iBAAiB,CAAC,EAAE;QAC5B,MAAM8F,SAAS,GAAG,CAAAC,EAAA,GAAAjB,KAAK,CAACE,UAAU,CAAC5B,EAAE,cAAA2C,EAAA,cAAAA,EAAA,GAAI,GAAG1E,OAAO,UAAU;QAC7D,MAAM2E,iBAAiB,GAAG,GAAGF,SAAS,IAAIhB,KAAK,CAACV,KAAK,CAAC,iBAAiB,CAAC,EAAE;QAE1EU,KAAK,CAACE,UAAU,CAAC,YAAY,CAAC,GAAGa,iBAAiB;QAClDf,KAAK,CAACE,UAAU,CAAC5B,EAAE,GAAG0C,SAAS;QAC/BhB,KAAK,CAACE,UAAU,CAAC,iBAAiB,CAAC,GAAGgB,iBAAiB;OACxD,MAAM,IAAIhG,KAAK,CAAC,YAAY,CAAC,EAAE;QAC9B8E,KAAK,CAACE,UAAU,CAAC,YAAY,CAAC,GAAG,GAAGa,iBAAiB,IAAI7F,KAAK,CAAC,YAAY,CAAC,EAAE;OAC/E,MAAM;QACL8E,KAAK,CAACE,UAAU,CAAC,YAAY,CAAC,GAAGa,iBAAiB;;;;EAKxD,OAAOf,KAAK;AACd,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["tokens","typographyStyles","mergeClasses","shorthands","iconSizes","comboboxClassNames","root","input","expandIcon","listbox","fieldHeights","small","medium","large","useStyles","useInputStyles","useIconStyles","useComboboxStyles_unstable","state","appearance","open","size","invalid","disabled","styles","iconStyles","inputStyles","className","outlineInteractive","invalidUnderline","listboxCollapsed","icon"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { ComboboxSlots, ComboboxState } from './Combobox.types';\n\nexport const comboboxClassNames: SlotClassNames<ComboboxSlots> = {\n  root: 'fui-Combobox',\n  input: 'fui-Combobox__input',\n  expandIcon: 'fui-Combobox__expandIcon',\n  listbox: 'fui-Combobox__listbox',\n};\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/**\n * Styles for Combobox\n */\nconst 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\n    // windows high contrast mode focus indicator\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\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\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\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\n  listbox: {\n    boxShadow: `${tokens.shadow16}`,\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    maxHeight: '80vh',\n  },\n\n  listboxCollapsed: {\n    display: 'none',\n  },\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\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\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\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});\n\nconst useInputStyles = makeStyles({\n  input: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.border('0'),\n    color: tokens.colorNeutralForeground1,\n    fontFamily: tokens.fontFamilyBase,\n\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n\n    '&::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\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});\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\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\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/**\n * Apply styling to the Combobox slots based on the state\n */\nexport const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState => {\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\n  state.root.className = mergeClasses(\n    comboboxClassNames.root,\n    styles.root,\n    styles[appearance],\n    styles[size],\n    !disabled && appearance === 'outline' && styles.outlineInteractive,\n    invalid && appearance !== 'underline' && styles.invalid,\n    invalid && appearance === 'underline' && styles.invalidUnderline,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    comboboxClassNames.input,\n    inputStyles.input,\n    inputStyles[size],\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  if (state.listbox) {\n    state.listbox.className = mergeClasses(\n      comboboxClassNames.listbox,\n      styles.listbox,\n      !open && styles.listboxCollapsed,\n      state.listbox.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(\n      comboboxClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      state.expandIcon.className,\n    );\n  }\n\n  return state;\n};\n"]}
+{"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":["../src/packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { ComboboxSlots, ComboboxState } from './Combobox.types';\n\nexport const comboboxClassNames: SlotClassNames<ComboboxSlots> = {\n  root: 'fui-Combobox',\n  input: 'fui-Combobox__input',\n  expandIcon: 'fui-Combobox__expandIcon',\n  listbox: 'fui-Combobox__listbox',\n};\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/**\n * Styles for Combobox\n */\nconst 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\n    // windows high contrast mode focus indicator\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\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\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\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\n  listbox: {\n    boxShadow: `${tokens.shadow16}`,\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    maxHeight: '80vh',\n  },\n\n  listboxCollapsed: {\n    display: 'none',\n  },\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\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\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\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});\n\nconst useInputStyles = makeStyles({\n  input: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.border('0'),\n    color: tokens.colorNeutralForeground1,\n    fontFamily: tokens.fontFamilyBase,\n\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n\n    '&::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\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});\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\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\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/**\n * Apply styling to the Combobox slots based on the state\n */\nexport const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState => {\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\n  state.root.className = mergeClasses(\n    comboboxClassNames.root,\n    styles.root,\n    styles[appearance],\n    styles[size],\n    !disabled && appearance === 'outline' && styles.outlineInteractive,\n    invalid && appearance !== 'underline' && styles.invalid,\n    invalid && appearance === 'underline' && styles.invalidUnderline,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    comboboxClassNames.input,\n    inputStyles.input,\n    inputStyles[size],\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  if (state.listbox) {\n    state.listbox.className = mergeClasses(\n      comboboxClassNames.listbox,\n      styles.listbox,\n      !open && styles.listboxCollapsed,\n      state.listbox.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(\n      comboboxClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      state.expandIcon.className,\n    );\n  }\n\n  return state;\n};\n"],"mappings":"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"}

package/lib/components/ComboboxField/ComboboxField.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA;AACA,SAA+BA,4BAA4B,EAAEC,mBAAmB,QAAQ,uBAAuB;AAE/G,SAASC,QAAQ,EAAEC,kBAAkB,QAAuB,gBAAgB;AAI5E;AACA,OAAO,MAAMC,uBAAuB,gBAAGJ,4BAA4B,CAACG,kBAAkB,CAACE,IAAI,CAAC;AAC5F;AACA,OAAO,MAAMC,aAAa,gBAA4CL,mBAAmB,CAACC,QAAQ,CAAC","names":["getDeprecatedFieldClassNames","makeDeprecatedField","Combobox","comboboxClassNames","comboboxFieldClassNames","root","ComboboxField"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/ComboboxField/ComboboxField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Combobox, comboboxClassNames, ComboboxProps } from '../../Combobox';\n\n/** @deprecated Use Field with Combobox: `<Field><Combobox /></Field>` */\nexport type ComboboxFieldProps = DeprecatedFieldProps<ComboboxProps>;\n/** @deprecated Use Field with Combobox: `<Field><Combobox /></Field>` */\nexport const comboboxFieldClassNames = getDeprecatedFieldClassNames(comboboxClassNames.root);\n/** @deprecated Use Field with Combobox: `<Field><Combobox /></Field>` */\nexport const ComboboxField: ForwardRefComponent<ComboboxFieldProps> = makeDeprecatedField(Combobox);\n"]}
+{"version":3,"names":["getDeprecatedFieldClassNames","makeDeprecatedField","Combobox","comboboxClassNames","comboboxFieldClassNames","root","ComboboxField"],"sources":["../src/packages/react-components/react-combobox/src/components/ComboboxField/ComboboxField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Combobox, comboboxClassNames, ComboboxProps } from '../../Combobox';\n\n/** @deprecated Use Field with Combobox: `<Field><Combobox /></Field>` */\nexport type ComboboxFieldProps = DeprecatedFieldProps<ComboboxProps>;\n/** @deprecated Use Field with Combobox: `<Field><Combobox /></Field>` */\nexport const comboboxFieldClassNames = getDeprecatedFieldClassNames(comboboxClassNames.root);\n/** @deprecated Use Field with Combobox: `<Field><Combobox /></Field>` */\nexport const ComboboxField: ForwardRefComponent<ComboboxFieldProps> = makeDeprecatedField(Combobox);\n"],"mappings":"AAAA;AACA,SAA+BA,4BAA4B,EAAEC,mBAAmB,QAAQ,uBAAuB;AAE/G,SAASC,QAAQ,EAAEC,kBAAkB,QAAuB,gBAAgB;AAI5E;AACA,OAAO,MAAMC,uBAAuB,gBAAGJ,4BAA4B,CAACG,kBAAkB,CAACE,IAAI,CAAC;AAC5F;AACA,OAAO,MAAMC,aAAa,gBAA4CL,mBAAmB,CAACC,QAAQ,CAAC"}

package/lib/components/Dropdown/Dropdown.js

@@ -3,6 +3,7 @@ import { useDropdown_unstable } from './useDropdown';
 import { renderDropdown_unstable } from './renderDropdown';
 import { useDropdownStyles_unstable } from './useDropdownStyles';
 import { useComboboxContextValues } from '../../contexts/useComboboxContextValues';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * Dropdown component: a selection control that allows users to choose from a set of possible options
  */
@@ -10,6 +11,10 @@ export const Dropdown = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useDropdown_unstable(props, ref);
   const contextValues = useComboboxContextValues(state);
   useDropdownStyles_unstable(state);
+  const {
+    useDropdownStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderDropdown_unstable(state, contextValues);
 });
 Dropdown.displayName = 'Dropdown';

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAEhE,SAASC,wBAAwB,QAAQ,yCAAyC;AAGlF;;;AAGA,OAAO,MAAMC,QAAQ,gBAAuCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC1F,MAAMC,KAAK,GAAGR,oBAAoB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAC9C,MAAME,aAAa,GAAGN,wBAAwB,CAACK,KAAK,CAAC;EAErDN,0BAA0B,CAACM,KAAK,CAAC;EACjC,OAAOP,uBAAuB,CAACO,KAAK,EAAEC,aAAa,CAAC;AACtD,CAAC,CAAC;AAEFL,QAAQ,CAACM,WAAW,GAAG,UAAU","names":["React","useDropdown_unstable","renderDropdown_unstable","useDropdownStyles_unstable","useComboboxContextValues","Dropdown","forwardRef","props","ref","state","contextValues","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDropdown_unstable } from './useDropdown';\nimport { renderDropdown_unstable } from './renderDropdown';\nimport { useDropdownStyles_unstable } from './useDropdownStyles';\nimport type { DropdownProps } from './Dropdown.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Dropdown component: a selection control that allows users to choose from a set of possible options\n */\nexport const Dropdown: ForwardRefComponent<DropdownProps> = React.forwardRef((props, ref) => {\n  const state = useDropdown_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useDropdownStyles_unstable(state);\n  return renderDropdown_unstable(state, contextValues);\n});\n\nDropdown.displayName = 'Dropdown';\n"]}
+{"version":3,"names":["React","useDropdown_unstable","renderDropdown_unstable","useDropdownStyles_unstable","useComboboxContextValues","useCustomStyleHooks_unstable","Dropdown","forwardRef","props","ref","state","contextValues","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDropdown_unstable } from './useDropdown';\nimport { renderDropdown_unstable } from './renderDropdown';\nimport { useDropdownStyles_unstable } from './useDropdownStyles';\nimport type { DropdownProps } from './Dropdown.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Dropdown component: a selection control that allows users to choose from a set of possible options\n */\nexport const Dropdown: ForwardRefComponent<DropdownProps> = React.forwardRef((props, ref) => {\n  const state = useDropdown_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useDropdownStyles_unstable(state);\n\n  const { useDropdownStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderDropdown_unstable(state, contextValues);\n});\n\nDropdown.displayName = 'Dropdown';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAEhE,SAASC,wBAAwB,QAAQ,yCAAyC;AAElF,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,QAAQ,gBAAuCN,KAAK,CAACO,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC1F,MAAMC,KAAK,GAAGT,oBAAoB,CAACO,KAAK,EAAEC,GAAG,CAAC;EAC9C,MAAME,aAAa,GAAGP,wBAAwB,CAACM,KAAK,CAAC;EAErDP,0BAA0B,CAACO,KAAK,CAAC;EAEjC,MAAM;IAAEP,0BAA0B,EAAES;EAAe,CAAE,GAAGP,4BAA4B,EAAE;EACtFO,eAAe,CAACF,KAAK,CAAC;EAEtB,OAAOR,uBAAuB,CAACQ,KAAK,EAAEC,aAAa,CAAC;AACtD,CAAC,CAAC;AAEFL,QAAQ,CAACO,WAAW,GAAG,UAAU"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,eAAe,QAAQ,gCAAgC;AAGhE;;;AAGA,OAAO,MAAMC,uBAAuB,GAAG,CAACC,KAAoB,EAAEC,aAAoC,KAAI;EACpG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAgBG,KAAK,CAAC;EAE3D,oBACEL,oBAACO,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,gBAC5BT,oBAACG,eAAe,CAACO,QAAQ;IAACC,KAAK,EAAEL,aAAa,CAACM;EAAQ,gBACrDZ,oBAACO,KAAK,CAACM,MAAM;IAAA,GAAKL,SAAS,CAACK;EAAM,GAC/BL,SAAS,CAACK,MAAM,CAACC,QAAQ,EACzBP,KAAK,CAACQ,UAAU,iBAAIf,oBAACO,KAAK,CAACQ,UAAU;IAAA,GAAKP,SAAS,CAACO;EAAU,EAAI,CACtD,EACdR,KAAK,CAACS,OAAO,KACXX,KAAK,CAACY,WAAW,gBAChBjB,oBAACO,KAAK,CAACS,OAAO;IAAA,GAAKR,SAAS,CAACQ;EAAO,EAAI,gBAExChB,oBAACC,MAAM,qBACLD,oBAACO,KAAK,CAACS,OAAO;IAAA,GAAKR,SAAS,CAACQ;EAAO,EAAI,CAE3C,CAAC,CACqB,CAChB;AAEjB,CAAC","names":["React","Portal","getSlots","ComboboxContext","renderDropdown_unstable","state","contextValues","slots","slotProps","root","Provider","value","combobox","button","children","expandIcon","listbox","inlinePopup"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Dropdown/renderDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } 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 } = getSlots<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>\n              <slots.listbox {...slotProps.listbox} />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"names":["React","Portal","getSlots","ComboboxContext","renderDropdown_unstable","state","contextValues","slots","slotProps","createElement","root","Provider","value","combobox","button","children","expandIcon","listbox","inlinePopup"],"sources":["../src/packages/react-components/react-combobox/src/components/Dropdown/renderDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } 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 } = getSlots<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>\n              <slots.listbox {...slotProps.listbox} />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,eAAe,QAAQ,gCAAgC;AAGhE;;;AAGA,OAAO,MAAMC,uBAAuB,GAAGA,CAACC,KAAoB,EAAEC,aAAoC,KAAI;EACpG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAgBG,KAAK,CAAC;EAE3D,oBACEL,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,gBAC5BV,KAAA,CAAAS,aAAA,CAACN,eAAe,CAACQ,QAAQ;IAACC,KAAK,EAAEN,aAAa,CAACO;EAAQ,gBACrDb,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACO,MAAM;IAAA,GAAKN,SAAS,CAACM;EAAM,GAC/BN,SAAS,CAACM,MAAM,CAACC,QAAQ,EACzBR,KAAK,CAACS,UAAU,iBAAIhB,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACS,UAAU;IAAA,GAAKR,SAAS,CAACQ;EAAU,EAAI,CACtD,EACdT,KAAK,CAACU,OAAO,KACXZ,KAAK,CAACa,WAAW,gBAChBlB,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACU,OAAO;IAAA,GAAKT,SAAS,CAACS;EAAO,EAAI,gBAExCjB,KAAA,CAAAS,aAAA,CAACR,MAAM,qBACLD,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACU,OAAO;IAAA,GAAKT,SAAS,CAACS;EAAO,EAAI,CAE3C,CAAC,CACqB,CAChB;AAEjB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","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","width","current","clientWidth","undefined","searchString","setKeyTimeout","clearKeyTimeout","getNextMatchingOption","matcher","optionText","toLowerCase","indexOf","matches","startIndex","id","length","letters","split","allSameLetter","every","letter","nextMatch","find","option","onTriggerKeyDown","ev","key","nextOption","triggerSlot","listboxSlot","button","required","defaultProps","type","children","value","placeholder","onKeyDown","hasFocus","listbox","style","state","components","expandIcon","inlinePopup","placeholderVisible"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/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 {\n    activeOption,\n    getIndexOfId,\n    getOptionsMatchingText,\n    open,\n    setActiveOption,\n    setFocusVisible,\n    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"]}
+{"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","width","_a","current","clientWidth","undefined","searchString","setKeyTimeout","clearKeyTimeout","getNextMatchingOption","matcher","optionText","toLowerCase","indexOf","matches","startIndex","id","length","letters","split","allSameLetter","every","letter","nextMatch","find","option","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/packages/react-components/react-combobox/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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"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["tokens","typographyStyles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","expandIcon","listbox","useStyles","useIconStyles","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","size","invalid","disabled","styles","iconStyles","className","outlineInteractive","invalidUnderline","placeholder","disabledText","listboxCollapsed","icon"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { DropdownSlots, DropdownState } from './Dropdown.types';\n\nexport const dropdownClassNames: SlotClassNames<DropdownSlots> = {\n  root: 'fui-Dropdown',\n  button: 'fui-Dropdown__button',\n  expandIcon: 'fui-Dropdown__expandIcon',\n  listbox: 'fui-Dropdown__listbox',\n};\n\n/**\n * Styles for Dropdown\n */\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    boxSizing: 'border-box',\n    display: 'inline-block',\n    minWidth: '250px',\n    position: 'relative',\n\n    // windows high contrast mode focus indicator\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\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(${tokens.strokeWidthThick}, ${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\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\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\n  listbox: {\n    boxShadow: `${tokens.shadow16}`,\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    maxHeight: '80vh',\n  },\n\n  listboxCollapsed: {\n    display: 'none',\n  },\n\n  button: {\n    alignItems: 'center',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.border('0'),\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    columnGap: tokens.spacingHorizontalXXS,\n    cursor: 'pointer',\n    display: 'grid',\n    fontFamily: tokens.fontFamilyBase,\n    gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n    justifyContent: 'space-between',\n    textAlign: 'left',\n    width: '100%',\n\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n  },\n\n  placeholder: {\n    color: tokens.colorNeutralForeground4,\n  },\n\n  // size variants\n  small: {\n    ...typographyStyles.caption1,\n    ...shorthands.padding(\n      '3px',\n      tokens.spacingHorizontalSNudge,\n      '3px',\n      `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n    ),\n  },\n  medium: {\n    ...typographyStyles.body1,\n    ...shorthands.padding(\n      '5px',\n      tokens.spacingHorizontalMNudge,\n      '5px',\n      `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n    ),\n  },\n  large: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...typographyStyles.body2,\n    ...shorthands.padding(\n      '7px',\n      tokens.spacingHorizontalM,\n      '7px',\n      `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n    ),\n  },\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\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', 'transparent'),\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\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\n  disabledText: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    display: 'block',\n    fontSize: tokens.fontSizeBase500,\n    gridColumnStart: 'icon',\n    gridColumnEnd: 'end',\n\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\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\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n});\n\n/**\n * Apply styling to the Dropdown slots based on the state\n */\nexport const useDropdownStyles_unstable = (state: DropdownState): DropdownState => {\n  const { appearance, open, placeholderVisible, size } = state;\n  const invalid = `${state.button['aria-invalid']}` === 'true';\n  const disabled = state.button.disabled;\n  const styles = useStyles();\n  const iconStyles = useIconStyles();\n\n  state.root.className = mergeClasses(\n    dropdownClassNames.root,\n    styles.root,\n    styles[appearance],\n    !disabled && appearance === 'outline' && styles.outlineInteractive,\n    invalid && appearance !== 'underline' && styles.invalid,\n    invalid && appearance === 'underline' && styles.invalidUnderline,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  state.button.className = mergeClasses(\n    dropdownClassNames.button,\n    styles.button,\n    styles[size],\n    placeholderVisible && styles.placeholder,\n    disabled && styles.disabledText,\n    state.button.className,\n  );\n\n  if (state.listbox) {\n    state.listbox.className = mergeClasses(\n      dropdownClassNames.listbox,\n      styles.listbox,\n      !open && styles.listboxCollapsed,\n      state.listbox.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(\n      dropdownClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      state.expandIcon.className,\n    );\n  }\n\n  return state;\n};\n"]}
+{"version":3,"names":["tokens","typographyStyles","__styles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","expandIcon","listbox","useStyles","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B7ck84d","mc9l5x","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","Bt984gj","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sj55zd","i8kkvl","Bceei9c","Bahqtrf","Budl1dq","Brf1p80","fsow6f","a9b677","Brovlpu","placeholder","small","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","z189sj","Byoj8tv","uwmqm3","medium","large","outline","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","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","disabledText","d","w","m","f","h","a","useIconStyles","icon","Br312pm","Bw0ie65","Bo70h7d","Frg6f3","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","size","styles","iconStyles","className"],"sources":["../src/packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { DropdownSlots, DropdownState } from './Dropdown.types';\n\nexport const dropdownClassNames: SlotClassNames<DropdownSlots> = {\n  root: 'fui-Dropdown',\n  button: 'fui-Dropdown__button',\n  expandIcon: 'fui-Dropdown__expandIcon',\n  listbox: 'fui-Dropdown__listbox',\n};\n\n/**\n * Styles for Dropdown\n */\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    boxSizing: 'border-box',\n    display: 'inline-block',\n    minWidth: '250px',\n    position: 'relative',\n\n    // windows high contrast mode focus indicator\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\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(${tokens.strokeWidthThick}, ${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\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\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\n  listbox: {\n    boxShadow: `${tokens.shadow16}`,\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    maxHeight: '80vh',\n  },\n\n  listboxCollapsed: {\n    display: 'none',\n  },\n\n  button: {\n    alignItems: 'center',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.border('0'),\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    columnGap: tokens.spacingHorizontalXXS,\n    cursor: 'pointer',\n    display: 'grid',\n    fontFamily: tokens.fontFamilyBase,\n    gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n    justifyContent: 'space-between',\n    textAlign: 'left',\n    width: '100%',\n\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n  },\n\n  placeholder: {\n    color: tokens.colorNeutralForeground4,\n  },\n\n  // size variants\n  small: {\n    ...typographyStyles.caption1,\n    ...shorthands.padding(\n      '3px',\n      tokens.spacingHorizontalSNudge,\n      '3px',\n      `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n    ),\n  },\n  medium: {\n    ...typographyStyles.body1,\n    ...shorthands.padding(\n      '5px',\n      tokens.spacingHorizontalMNudge,\n      '5px',\n      `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n    ),\n  },\n  large: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...typographyStyles.body2,\n    ...shorthands.padding(\n      '7px',\n      tokens.spacingHorizontalM,\n      '7px',\n      `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n    ),\n  },\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\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', 'transparent'),\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\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\n  disabledText: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    display: 'block',\n    fontSize: tokens.fontSizeBase500,\n    gridColumnStart: 'icon',\n    gridColumnEnd: 'end',\n\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\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\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n});\n\n/**\n * Apply styling to the Dropdown slots based on the state\n */\nexport const useDropdownStyles_unstable = (state: DropdownState): DropdownState => {\n  const { appearance, open, placeholderVisible, size } = state;\n  const invalid = `${state.button['aria-invalid']}` === 'true';\n  const disabled = state.button.disabled;\n  const styles = useStyles();\n  const iconStyles = useIconStyles();\n\n  state.root.className = mergeClasses(\n    dropdownClassNames.root,\n    styles.root,\n    styles[appearance],\n    !disabled && appearance === 'outline' && styles.outlineInteractive,\n    invalid && appearance !== 'underline' && styles.invalid,\n    invalid && appearance === 'underline' && styles.invalidUnderline,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  state.button.className = mergeClasses(\n    dropdownClassNames.button,\n    styles.button,\n    styles[size],\n    placeholderVisible && styles.placeholder,\n    disabled && styles.disabledText,\n    state.button.className,\n  );\n\n  if (state.listbox) {\n    state.listbox.className = mergeClasses(\n      dropdownClassNames.listbox,\n      styles.listbox,\n      !open && styles.listboxCollapsed,\n      state.listbox.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(\n      dropdownClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      state.expandIcon.className,\n    );\n  }\n\n  return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAEhE,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,SAAS,QAAQ,4BAA4B;AAGtD,OAAO,MAAMC,kBAAkB,GAAkC;EAC/DC,IAAI,EAAE,cAAc;EACpBC,MAAM,EAAE,sBAAsB;EAC9BC,UAAU,EAAE,0BAA0B;EACtCC,OAAO,EAAE;CACV;AAED;;;AAGA,MAAMC,SAAS,gBAAGT,QAAA;EAAAK,IAAA;IAAAK,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAtC,OAAA;IAAAuC,MAAA;IAAArC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAmC,OAAA;EAAA;EAAAC,gBAAA;IAAAlC,MAAA;EAAA;EAAAT,MAAA;IAAA4C,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAzC,OAAA;IAAA0C,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAA3C,MAAA;IAAA4C,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,WAAA;IAAAT,MAAA;EAAA;EAAAU,KAAA;IAAAP,OAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAf,OAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAE,KAAA;IAAAlB,MAAA;IAAAE,OAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAG,OAAA;IAAAzB,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAsB,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,kBAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,SAAA;IAAA3C,MAAA;IAAAG,OAAA;IAAAyB,MAAA;IAAAI,OAAA;IAAAzE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAA;IAAAsC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAsB,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA;IAAAjC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAsB,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAW,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAF,MAAA;EAAA;EAAAG,QAAA;IAAA3C,OAAA;IAAAP,MAAA;IAAA8B,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAkB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAlD,MAAA;IAAAE,OAAA;EAAA;AAAA;EAAAiD,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,EA2KhB;AAEF,MAAMC,aAAa,gBAAGjH,QAAA;EAAAkH,IAAA;IAAApG,OAAA;IAAA0C,MAAA;IAAAzC,MAAA;IAAAoD,OAAA;IAAAgD,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAnD,KAAA;IAAAC,OAAA;IAAAmD,MAAA;EAAA;EAAA5C,MAAA;IAAAP,OAAA;IAAAmD,MAAA;EAAA;EAAA3C,KAAA;IAAAR,OAAA;IAAAmD,MAAA;EAAA;EAAAjB,QAAA;IAAA7C,MAAA;EAAA;AAAA;EAAAmD,CAAA;AAAA,EAiCpB;AAEF;;;AAGA,OAAO,MAAMY,0BAA0B,GAAIC,KAAoB,IAAmB;EAChF,MAAM;IAAEC,UAAU;IAAEC,IAAI;IAAEC,kBAAkB;IAAEC;EAAI,CAAE,GAAGJ,KAAK;EAC5D,MAAMzB,OAAO,GAAG,GAAGyB,KAAK,CAAClH,MAAM,CAAC,cAAc,CAAC,EAAE,KAAK,MAAM;EAC5D,MAAM+F,QAAQ,GAAGmB,KAAK,CAAClH,MAAM,CAAC+F,QAAQ;EACtC,MAAMwB,MAAM,GAAGpH,SAAS,EAAE;EAC1B,MAAMqH,UAAU,GAAGb,aAAa,EAAE;EAElCO,KAAK,CAACnH,IAAI,CAAC0H,SAAS,GAAG9H,YAAY,CACjCG,kBAAkB,CAACC,IAAI,EACvBwH,MAAM,CAACxH,IAAI,EACXwH,MAAM,CAACJ,UAAU,CAAC,EAClB,CAACpB,QAAQ,IAAIoB,UAAU,KAAK,SAAS,IAAII,MAAM,CAACxC,kBAAkB,EAClEU,OAAO,IAAI0B,UAAU,KAAK,WAAW,IAAII,MAAM,CAAC9B,OAAO,EACvDA,OAAO,IAAI0B,UAAU,KAAK,WAAW,IAAII,MAAM,CAACzB,gBAAgB,EAChEC,QAAQ,IAAIwB,MAAM,CAACxB,QAAQ,EAC3BmB,KAAK,CAACnH,IAAI,CAAC0H,SAAS,CACrB;EAEDP,KAAK,CAAClH,MAAM,CAACyH,SAAS,GAAG9H,YAAY,CACnCG,kBAAkB,CAACE,MAAM,EACzBuH,MAAM,CAACvH,MAAM,EACbuH,MAAM,CAACD,IAAI,CAAC,EACZD,kBAAkB,IAAIE,MAAM,CAAC5D,WAAW,EACxCoC,QAAQ,IAAIwB,MAAM,CAACnB,YAAY,EAC/Bc,KAAK,CAAClH,MAAM,CAACyH,SAAS,CACvB;EAED,IAAIP,KAAK,CAAChH,OAAO,EAAE;IACjBgH,KAAK,CAAChH,OAAO,CAACuH,SAAS,GAAG9H,YAAY,CACpCG,kBAAkB,CAACI,OAAO,EAC1BqH,MAAM,CAACrH,OAAO,EACd,CAACkH,IAAI,IAAIG,MAAM,CAAC5E,gBAAgB,EAChCuE,KAAK,CAAChH,OAAO,CAACuH,SAAS,CACxB;;EAGH,IAAIP,KAAK,CAACjH,UAAU,EAAE;IACpBiH,KAAK,CAACjH,UAAU,CAACwH,SAAS,GAAG9H,YAAY,CACvCG,kBAAkB,CAACG,UAAU,EAC7BuH,UAAU,CAACZ,IAAI,EACfY,UAAU,CAACF,IAAI,CAAC,EAChBvB,QAAQ,IAAIyB,UAAU,CAACzB,QAAQ,EAC/BmB,KAAK,CAACjH,UAAU,CAACwH,SAAS,CAC3B;;EAGH,OAAOP,KAAK;AACd,CAAC"}

package/lib/components/Listbox/Listbox.js

@@ -3,6 +3,7 @@ import { useListbox_unstable } from './useListbox';
 import { renderListbox_unstable } from './renderListbox';
 import { useListboxStyles_unstable } from './useListboxStyles';
 import { useListboxContextValues } from '../../contexts/useListboxContextValues';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * Listbox component: a standalone selection control, or the popup in a Combobox
  */
@@ -10,6 +11,10 @@ export const Listbox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useListbox_unstable(props, ref);
   const contextValues = useListboxContextValues(state);
   useListboxStyles_unstable(state);
+  const {
+    useListboxStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderListbox_unstable(state, contextValues);
 });
 Listbox.displayName = 'Listbox';

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,mBAAmB,QAAQ,cAAc;AAClD,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,yBAAyB,QAAQ,oBAAoB;AAE9D,SAASC,uBAAuB,QAAQ,wCAAwC;AAGhF;;;AAGA,OAAO,MAAMC,OAAO,gBAAsCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGR,mBAAmB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAC7C,MAAME,aAAa,GAAGN,uBAAuB,CAACK,KAAK,CAAC;EAEpDN,yBAAyB,CAACM,KAAK,CAAC;EAChC,OAAOP,sBAAsB,CAACO,KAAK,EAAEC,aAAa,CAAC;AACrD,CAAC,CAAC;AAEFL,OAAO,CAACM,WAAW,GAAG,SAAS","names":["React","useListbox_unstable","renderListbox_unstable","useListboxStyles_unstable","useListboxContextValues","Listbox","forwardRef","props","ref","state","contextValues","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useListbox_unstable } from './useListbox';\nimport { renderListbox_unstable } from './renderListbox';\nimport { useListboxStyles_unstable } from './useListboxStyles';\nimport type { ListboxProps } from './Listbox.types';\nimport { useListboxContextValues } from '../../contexts/useListboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Listbox component: a standalone selection control, or the popup in a Combobox\n */\nexport const Listbox: ForwardRefComponent<ListboxProps> = React.forwardRef((props, ref) => {\n  const state = useListbox_unstable(props, ref);\n  const contextValues = useListboxContextValues(state);\n\n  useListboxStyles_unstable(state);\n  return renderListbox_unstable(state, contextValues);\n});\n\nListbox.displayName = 'Listbox';\n"]}
+{"version":3,"names":["React","useListbox_unstable","renderListbox_unstable","useListboxStyles_unstable","useListboxContextValues","useCustomStyleHooks_unstable","Listbox","forwardRef","props","ref","state","contextValues","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-combobox/src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useListbox_unstable } from './useListbox';\nimport { renderListbox_unstable } from './renderListbox';\nimport { useListboxStyles_unstable } from './useListboxStyles';\nimport type { ListboxProps } from './Listbox.types';\nimport { useListboxContextValues } from '../../contexts/useListboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Listbox component: a standalone selection control, or the popup in a Combobox\n */\nexport const Listbox: ForwardRefComponent<ListboxProps> = React.forwardRef((props, ref) => {\n  const state = useListbox_unstable(props, ref);\n  const contextValues = useListboxContextValues(state);\n\n  useListboxStyles_unstable(state);\n\n  const { useListboxStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderListbox_unstable(state, contextValues);\n});\n\nListbox.displayName = 'Listbox';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,mBAAmB,QAAQ,cAAc;AAClD,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,yBAAyB,QAAQ,oBAAoB;AAE9D,SAASC,uBAAuB,QAAQ,wCAAwC;AAEhF,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,OAAO,gBAAsCN,KAAK,CAACO,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGT,mBAAmB,CAACO,KAAK,EAAEC,GAAG,CAAC;EAC7C,MAAME,aAAa,GAAGP,uBAAuB,CAACM,KAAK,CAAC;EAEpDP,yBAAyB,CAACO,KAAK,CAAC;EAEhC,MAAM;IAAEP,yBAAyB,EAAES;EAAe,CAAE,GAAGP,4BAA4B,EAAE;EACrFO,eAAe,CAACF,KAAK,CAAC;EAEtB,OAAOR,sBAAsB,CAACQ,KAAK,EAAEC,aAAa,CAAC;AACrD,CAAC,CAAC;AAEFL,OAAO,CAACO,WAAW,GAAG,SAAS"}

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

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,cAAc,QAAQ,+BAA+B;AAE9D;;;AAGA,OAAO,MAAMC,sBAAsB,GAAG,CAACC,KAAmB,EAAEC,aAAmC,KAAI;EACjG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAeG,KAAK,CAAC;EAE1D,oBACEJ,oBAACE,cAAc,CAACM,QAAQ;IAACC,KAAK,EAAEJ,aAAa,CAACK;EAAO,gBACnDV,oBAACM,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,EAAI,CACV;AAE9B,CAAC","names":["React","getSlots","ListboxContext","renderListbox_unstable","state","contextValues","slots","slotProps","Provider","value","listbox","root"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Listbox/renderListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ListboxContextValues, ListboxState, ListboxSlots } from './Listbox.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Listbox\n */\nexport const renderListbox_unstable = (state: ListboxState, contextValues: ListboxContextValues) => {\n  const { slots, slotProps } = getSlots<ListboxSlots>(state);\n\n  return (\n    <ListboxContext.Provider value={contextValues.listbox}>\n      <slots.root {...slotProps.root} />\n    </ListboxContext.Provider>\n  );\n};\n"]}
+{"version":3,"names":["React","getSlots","ListboxContext","renderListbox_unstable","state","contextValues","slots","slotProps","createElement","Provider","value","listbox","root"],"sources":["../src/packages/react-components/react-combobox/src/components/Listbox/renderListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ListboxContextValues, ListboxState, ListboxSlots } from './Listbox.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Listbox\n */\nexport const renderListbox_unstable = (state: ListboxState, contextValues: ListboxContextValues) => {\n  const { slots, slotProps } = getSlots<ListboxSlots>(state);\n\n  return (\n    <ListboxContext.Provider value={contextValues.listbox}>\n      <slots.root {...slotProps.root} />\n    </ListboxContext.Provider>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,cAAc,QAAQ,+BAA+B;AAE9D;;;AAGA,OAAO,MAAMC,sBAAsB,GAAGA,CAACC,KAAmB,EAAEC,aAAmC,KAAI;EACjG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAeG,KAAK,CAAC;EAE1D,oBACEJ,KAAA,CAAAQ,aAAA,CAACN,cAAc,CAACO,QAAQ;IAACC,KAAK,EAAEL,aAAa,CAACM;EAAO,gBACnDX,KAAA,CAAAQ,aAAA,CAACF,KAAK,CAACM,IAAI;IAAA,GAAKL,SAAS,CAACK;EAAI,EAAI,CACV;AAE9B,CAAC"}