@fluentui/react-combobox 9.5.9 → 9.5.11

package/CHANGELOG.json

@@ -2,7 +2,127 @@
   "name": "@fluentui/react-combobox",
   "entries": [
     {
-      "date": "Tue, 29 Aug 2023 12:53:36 GMT",
+      "date": "Tue, 05 Sep 2023 15:35:07 GMT",
+      "tag": "@fluentui/react-combobox_v9.5.11",
+      "version": "9.5.11",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.33",
+            "commit": "94019033dfe3fd39ec0cde7dfb3b57c22805aa91"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-field to v9.1.24",
+            "commit": "94019033dfe3fd39ec0cde7dfb3b57c22805aa91"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.5",
+            "commit": "94019033dfe3fd39ec0cde7dfb3b57c22805aa91"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-portal to v9.3.12",
+            "commit": "94019033dfe3fd39ec0cde7dfb3b57c22805aa91"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-positioning to v9.9.10",
+            "commit": "94019033dfe3fd39ec0cde7dfb3b57c22805aa91"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-utilities to v9.13.2",
+            "commit": "94019033dfe3fd39ec0cde7dfb3b57c22805aa91"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 05 Sep 2023 13:29:18 GMT",
+      "tag": "@fluentui/react-combobox_v9.5.10",
+      "version": "9.5.10",
+      "comments": {
+        "patch": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "b93c2ac22355b6cb6f33dd509c6cd9c21f4fffc8",
+            "comment": "bumps @swc/helpers version to 0.5.1"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "eea6d93a62249ba4fba3347fb291c67ee1a3fb24",
+            "comment": "chore: migrate package to use JSX importSource"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/keyboard-keys to v9.0.4",
+            "commit": "da959e66f36b429e40ae61810d08dc71c16e154a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.32",
+            "commit": "da959e66f36b429e40ae61810d08dc71c16e154a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-field to v9.1.23",
+            "commit": "da959e66f36b429e40ae61810d08dc71c16e154a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.4",
+            "commit": "da959e66f36b429e40ae61810d08dc71c16e154a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-portal to v9.3.11",
+            "commit": "da959e66f36b429e40ae61810d08dc71c16e154a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-positioning to v9.9.9",
+            "commit": "da959e66f36b429e40ae61810d08dc71c16e154a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.3",
+            "commit": "da959e66f36b429e40ae61810d08dc71c16e154a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-theme to v9.1.12",
+            "commit": "da959e66f36b429e40ae61810d08dc71c16e154a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-utilities to v9.13.1",
+            "commit": "da959e66f36b429e40ae61810d08dc71c16e154a"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 29 Aug 2023 12:57:36 GMT",
       "tag": "@fluentui/react-combobox_v9.5.9",
       "version": "9.5.9",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,45 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Tue, 29 Aug 2023 12:53:36 GMT and should not be manually modified.
+This log was last generated on Tue, 05 Sep 2023 15:35:07 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.11)
+
+Tue, 05 Sep 2023 15:35:07 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.5.10..@fluentui/react-combobox_v9.5.11)
+
+### Patches
+
+- Bump @fluentui/react-context-selector to v9.1.33 ([PR #29055](https://github.com/microsoft/fluentui/pull/29055) by beachball)
+- Bump @fluentui/react-field to v9.1.24 ([PR #29055](https://github.com/microsoft/fluentui/pull/29055) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.5 ([PR #29055](https://github.com/microsoft/fluentui/pull/29055) by beachball)
+- Bump @fluentui/react-portal to v9.3.12 ([PR #29055](https://github.com/microsoft/fluentui/pull/29055) by beachball)
+- Bump @fluentui/react-positioning to v9.9.10 ([PR #29055](https://github.com/microsoft/fluentui/pull/29055) by beachball)
+- Bump @fluentui/react-utilities to v9.13.2 ([PR #29055](https://github.com/microsoft/fluentui/pull/29055) by beachball)
+
+## [9.5.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.10)
+
+Tue, 05 Sep 2023 13:29:18 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.5.9..@fluentui/react-combobox_v9.5.10)
+
+### Patches
+
+- bumps @swc/helpers version to 0.5.1 ([PR #28989](https://github.com/microsoft/fluentui/pull/28989) by bernardo.sunderhus@gmail.com)
+- chore: migrate package to use JSX importSource ([PR #28959](https://github.com/microsoft/fluentui/pull/28959) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/keyboard-keys to v9.0.4 ([PR #29056](https://github.com/microsoft/fluentui/pull/29056) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.32 ([PR #29056](https://github.com/microsoft/fluentui/pull/29056) by beachball)
+- Bump @fluentui/react-field to v9.1.23 ([PR #29056](https://github.com/microsoft/fluentui/pull/29056) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.4 ([PR #29056](https://github.com/microsoft/fluentui/pull/29056) by beachball)
+- Bump @fluentui/react-portal to v9.3.11 ([PR #29056](https://github.com/microsoft/fluentui/pull/29056) by beachball)
+- Bump @fluentui/react-positioning to v9.9.9 ([PR #29056](https://github.com/microsoft/fluentui/pull/29056) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.3 ([PR #29056](https://github.com/microsoft/fluentui/pull/29056) by beachball)
+- Bump @fluentui/react-theme to v9.1.12 ([PR #29056](https://github.com/microsoft/fluentui/pull/29056) by beachball)
+- Bump @fluentui/react-utilities to v9.13.1 ([PR #29056](https://github.com/microsoft/fluentui/pull/29056) by beachball)
+
 ## [9.5.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.9)
 
-Tue, 29 Aug 2023 12:53:36 GMT 
+Tue, 29 Aug 2023 12:57:36 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.5.8..@fluentui/react-combobox_v9.5.9)
 
 ### Patches

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

@@ -1 +1 @@
-{"version":3,"sources":["Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles.styles';\nimport type { ComboboxProps } from './Combobox.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_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  useCustomStyleHook_unstable('useComboboxStyles_unstable')(state);\n\n  return renderCombobox_unstable(state, contextValues);\n});\n\nCombobox.displayName = 'Combobox';\n"],"names":["React","useCombobox_unstable","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxContextValues","useCustomStyleHook_unstable","Combobox","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAExE,SAASC,wBAAwB,QAAQ,0CAA0C;AAEnF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC3F,MAAMC,QAAQT,qBAAqBO,OAAOC;IAC1C,MAAME,gBAAgBP,yBAAyBM;IAE/CP,2BAA2BO;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOR,wBAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}
+{"version":3,"sources":["Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles.styles';\nimport type { ComboboxProps } from './Combobox.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_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  useCustomStyleHook_unstable('useComboboxStyles_unstable')(state);\n\n  return renderCombobox_unstable(state, contextValues);\n});\n\nCombobox.displayName = 'Combobox';\n"],"names":["React","useCombobox_unstable","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxContextValues","useCustomStyleHook_unstable","Combobox","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAExE,SAASC,wBAAwB,QAAQ,0CAA0C;AAEnF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQT,qBAAqBO,OAAOC;IAC1C,MAAME,gBAAgBP,yBAAyBM;IAE/CP,2BAA2BO;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOR,wBAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

package/lib/components/Combobox/renderCombobox.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\nimport { Portal } from '@fluentui/react-portal';\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues) => {\n  assertSlots<ComboboxSlots>(state);\n\n  return (\n    <state.root>\n      <ComboboxContext.Provider value={contextValues.combobox}>\n        <state.input />\n        {state.expandIcon && <state.expandIcon />}\n        {state.listbox &&\n          (state.inlinePopup ? (\n            <state.listbox />\n          ) : (\n            <Portal mountNode={state.mountNode}>\n              <state.listbox />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </state.root>\n  );\n};\n"],"names":["Portal","createElement","assertSlots","ComboboxContext","renderCombobox_unstable","state","contextValues","root","Provider","value","combobox","input","expandIcon","listbox","inlinePopup","mountNode"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GACvB,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,eAAe,QAAQ,iCAAiC;AAGjE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC,gBAAyC;IACrGJ,YAA2BG;IAE3B,qBACE,AAhBJ,cAgBKA,MAAME,IAAI,sBACT,AAjBN,cAiBOJ,gBAAgBK,QAAQ;QAACC,OAAOH,cAAcI,QAAQ;qBACrD,AAlBR,cAkBSL,MAAMM,KAAK,SACXN,MAAMO,UAAU,kBAAI,AAnB7B,cAmB8BP,MAAMO,UAAU,SACrCP,MAAMQ,OAAO,IACXR,CAAAA,MAAMS,WAAW,iBAChB,AAtBZ,cAsBaT,MAAMQ,OAAO,wBAEd,AAxBZ,cAwBab;QAAOe,WAAWV,MAAMU,SAAS;qBAChC,AAzBd,cAyBeV,MAAMQ,OAAO,QAEjB,AAAD;AAIV,EAAE"}
+{"version":3,"sources":["renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { Portal } from '@fluentui/react-portal';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues) => {\n  assertSlots<ComboboxSlots>(state);\n\n  return (\n    <state.root>\n      <ComboboxContext.Provider value={contextValues.combobox}>\n        <state.input />\n        {state.expandIcon && <state.expandIcon />}\n        {state.listbox &&\n          (state.inlinePopup ? (\n            <state.listbox />\n          ) : (\n            <Portal mountNode={state.mountNode}>\n              <state.listbox />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </state.root>\n  );\n};\n"],"names":["Portal","assertSlots","ComboboxContext","renderCombobox_unstable","state","contextValues","root","Provider","value","combobox","input","expandIcon","listbox","inlinePopup","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,eAAe,QAAQ,iCAAiC;AAGjE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DJ,YAA2BG;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,MAACJ,gBAAgBK,QAAQ;YAACC,OAAOH,cAAcI,QAAQ;;8BACrD,KAACL,MAAMM,KAAK;gBACXN,MAAMO,UAAU,kBAAI,KAACP,MAAMO,UAAU;gBACrCP,MAAMQ,OAAO,IACXR,CAAAA,MAAMS,WAAW,iBAChB,KAACT,MAAMQ,OAAO,sBAEd,KAACZ;oBAAOc,WAAWV,MAAMU,SAAS;8BAChC,cAAA,KAACV,MAAMQ,OAAO;kBAElB;;;;AAIV,EAAE"}

package/lib/components/Combobox/useCombobox.js

@@ -17,7 +17,7 @@ import { Listbox } from '../Listbox/Listbox';
  * @param props - props from this instance of Combobox
  * @param ref - reference to root HTMLElement of Combobox
  */ export const useCombobox_unstable = (props, ref)=>{
-    var _props_input;
+    var _props_input, _listboxSlot;
     // Merge props from surrounding <Field>, if any
     props = useFieldControlProps_unstable(props, {
         supportsLabelFor: true,
@@ -28,10 +28,10 @@ import { Listbox } from '../Listbox/Listbox';
         ...props,
         editable: true
     });
-    const { activeOption , clearSelection , getIndexOfId , getOptionsMatchingText , hasFocus , open , selectOption , selectedOptions , setActiveOption , setFocusVisible , setOpen , setValue , value  } = baseState;
-    const { disabled , freeform , inlinePopup , multiselect  } = props;
+    const { activeOption, clearSelection, getIndexOfId, getOptionsMatchingText, hasFocus, open, selectOption, selectedOptions, setActiveOption, setFocusVisible, setOpen, setValue, value } = baseState;
+    const { disabled, freeform, inlinePopup, multiselect } = props;
     const comboId = useId('combobox-');
-    const { primary: triggerNativeProps , root: rootNativeProps  } = getPartitionedNativeProps({
+    const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({
         props,
         primarySlotTagName: 'input',
         excludedPropNames: [
@@ -53,9 +53,9 @@ import { Listbox } from '../Listbox/Listbox';
     React.useEffect(()=>{
         // only recalculate width when opening
         if (open) {
-            var _rootRef_current;
+            var _rootRef_current, _popupDimensions;
             const width = `${(_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.clientWidth}px`;
-            if (width !== (popupDimensions === null || popupDimensions === void 0 ? void 0 : popupDimensions.width)) {
+            if (width !== ((_popupDimensions = popupDimensions) === null || _popupDimensions === void 0 ? void 0 : _popupDimensions.width)) {
                 setPopupDimensions({
                     width
                 });
@@ -67,7 +67,8 @@ import { Listbox } from '../Listbox/Listbox';
     ]);
     // set active option and selection based on typing
     const getOptionFromInput = (inputValue)=>{
-        const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();
+        var _inputValue;
+        const searchString = (_inputValue = inputValue) === null || _inputValue === void 0 ? void 0 : _inputValue.trim().toLowerCase();
         if (!searchString || searchString.length === 0) {
             return;
         }
@@ -90,8 +91,9 @@ import { Listbox } from '../Listbox/Listbox';
     const onTriggerBlur = (ev)=>{
         // handle selection and updating value if freeform is false
         if (!baseState.open && !freeform) {
+            var _activeOption;
             // select matching option, if the value fully matches
-            if (value && activeOption && value.trim().toLowerCase() === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.text.toLowerCase())) {
+            if (value && activeOption && value.trim().toLowerCase() === ((_activeOption = activeOption) === null || _activeOption === void 0 ? void 0 : _activeOption.text.toLowerCase())) {
                 baseState.selectOption(ev, activeOption);
             }
             // reset typed value when the input loses focus while collapsed, unless freeform is true
@@ -158,7 +160,7 @@ import { Listbox } from '../Listbox/Listbox';
         },
         root: slot.always(props.root, {
             defaultProps: {
-                'aria-owns': !inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,
+                'aria-owns': !inlinePopup ? (_listboxSlot = listboxSlot) === null || _listboxSlot === void 0 ? void 0 : _listboxSlot.id : undefined,
                 ...rootNativeProps
             },
             elementType: 'div'
@@ -179,6 +181,8 @@ import { Listbox } from '../Listbox/Listbox';
     state.root.ref = useMergedRefs(state.root.ref, rootRef);
     /* Set input.onKeyDown here, so we can override the default behavior for spacebar */ const defaultOnTriggerKeyDown = state.input.onKeyDown;
     state.input.onKeyDown = useEventCallback((ev)=>{
+        var // if we're not allowing space to type, continue with default behavior
+        _defaultOnTriggerKeyDown;
         if (!open && getDropdownActionFromKey(ev) === 'Type') {
             baseState.setOpen(ev, true);
         }
@@ -200,13 +204,13 @@ import { Listbox } from '../Listbox/Listbox';
         }
         // allow space to insert a character if freeform & the last action was typing, or if the popup is closed
         if (freeform && (isTyping.current || !open) && ev.key === ' ') {
-            resolvedPropsOnKeyDown === null || resolvedPropsOnKeyDown === void 0 ? void 0 : resolvedPropsOnKeyDown(ev);
+            var _resolvedPropsOnKeyDown;
+            (_resolvedPropsOnKeyDown = resolvedPropsOnKeyDown) === null || _resolvedPropsOnKeyDown === void 0 ? void 0 : _resolvedPropsOnKeyDown(ev);
             return;
         }
-        // if we're not allowing space to type, continue with default behavior
-        defaultOnTriggerKeyDown === null || defaultOnTriggerKeyDown === void 0 ? void 0 : defaultOnTriggerKeyDown(ev);
+        (_defaultOnTriggerKeyDown = defaultOnTriggerKeyDown) === null || _defaultOnTriggerKeyDown === void 0 ? void 0 : _defaultOnTriggerKeyDown(ev);
     });
-    /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown , onClick: onIconClick  } = state.expandIcon || {};
+    /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};
     const onExpandIconMouseDown = useEventCallback(mergeCallbacks(onIconMouseDown, ()=>{
         // do not dismiss on blur when closing via clicking the icon
         if (open) {

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

@@ -1 +1 @@
-{"version":3,"sources":["useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\n\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const baseState = useComboboxBaseState({ ...props, editable: true });\n  const {\n    activeOption,\n    clearSelection,\n    getIndexOfId,\n    getOptionsMatchingText,\n    hasFocus,\n    open,\n    selectOption,\n    selectedOptions,\n    setActiveOption,\n    setFocusVisible,\n    setOpen,\n    setValue,\n    value,\n  } = baseState;\n  const { disabled, freeform, inlinePopup, multiselect } = props;\n  const comboId = useId('combobox-');\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['children', 'size'],\n  });\n\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const triggerRef = React.useRef<HTMLInputElement>(null);\n\n  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n  // save the typing vs. navigating options state, as the space key should behave differently in each case\n  // we do not want to update the combobox when this changes, just save the value between renders\n  const isTyping = React.useRef(false);\n\n  // calculate listbox width style based on trigger width\n  const [popupDimensions, setPopupDimensions] = React.useState<{ width: string }>();\n  React.useEffect(() => {\n    // only recalculate width when opening\n    if (open) {\n      const width = `${rootRef.current?.clientWidth}px`;\n      if (width !== popupDimensions?.width) {\n        setPopupDimensions({ width });\n      }\n    }\n  }, [open, popupDimensions]);\n\n  // set active option and selection based on typing\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = inputValue?.trim().toLowerCase();\n\n    if (!searchString || searchString.length === 0) {\n      return;\n    }\n\n    const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n    const matches = getOptionsMatchingText(matcher);\n\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const startIndex = getIndexOfId(activeOption.id);\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  /* Handle typed input */\n\n  // reset any typed value when an option is selected\n  baseState.selectOption = (ev: SelectionEvents, option: OptionValue) => {\n    setValue(undefined);\n    selectOption(ev, option);\n  };\n\n  const onTriggerBlur = (ev: React.FocusEvent<HTMLInputElement>) => {\n    // handle selection and updating value if freeform is false\n    if (!baseState.open && !freeform) {\n      // select matching option, if the value fully matches\n      if (value && activeOption && value.trim().toLowerCase() === activeOption?.text.toLowerCase()) {\n        baseState.selectOption(ev, activeOption);\n      }\n\n      // reset typed value when the input loses focus while collapsed, unless freeform is true\n      setValue(undefined);\n    }\n  };\n\n  baseState.setOpen = (ev, newState: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    if (!newState && !freeform) {\n      setValue(undefined);\n    }\n\n    setOpen(ev, newState);\n  };\n\n  // update value and active option based on input\n  const onTriggerChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = ev.target.value;\n    // update uncontrolled value\n    baseState.setValue(inputValue);\n\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n    setActiveOption(matchingOption);\n\n    setFocusVisible(true);\n\n    // clear selection for single-select if the input value no longer matches the selection\n    if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n      clearSelection(ev);\n    }\n  };\n\n  // resolve input and listbox slot props\n  let triggerSlot: Slot<'input'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = slot.always(props.input, {\n    defaultProps: {\n      ref: useMergedRefs(props.input?.ref, triggerRef),\n      type: 'text',\n      value: value ?? '',\n      ...triggerNativeProps,\n    },\n    elementType: 'input',\n  });\n  const resolvedPropsOnKeyDown = triggerSlot.onKeyDown;\n  triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n  triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur); // only resolve listbox slot if needed\n  listboxSlot =\n    open || hasFocus\n      ? slot.optional(props.listbox, {\n          renderByDefault: true,\n          defaultProps: { children: props.children, style: popupDimensions },\n          elementType: Listbox,\n        })\n      : undefined;\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n  if (hideActiveDescendant) {\n    triggerSlot['aria-activedescendant'] = undefined;\n  }\n  const state: ComboboxState = {\n    components: { root: 'div', input: 'input', expandIcon: 'span', listbox: Listbox },\n    root: slot.always(props.root, {\n      defaultProps: {\n        'aria-owns': !inlinePopup ? listboxSlot?.id : undefined,\n        ...rootNativeProps,\n      },\n      elementType: 'div',\n    }),\n    input: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-expanded': open,\n        children: <ChevronDownIcon />,\n        role: 'button',\n      },\n      elementType: 'span',\n    }),\n    ...baseState,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  /* Set input.onKeyDown here, so we can override the default behavior for spacebar */\n  const defaultOnTriggerKeyDown = state.input.onKeyDown;\n  state.input.onKeyDown = useEventCallback((ev: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!open && getDropdownActionFromKey(ev) === 'Type') {\n      baseState.setOpen(ev, true);\n    }\n\n    // clear activedescendant when moving the text insertion cursor\n    if (ev.key === ArrowLeft || ev.key === ArrowRight) {\n      setHideActiveDescendant(true);\n    } else {\n      setHideActiveDescendant(false);\n    }\n\n    // update typing state to true if the user is typing\n    const action = getDropdownActionFromKey(ev, { open, multiselect });\n    if (action === 'Type') {\n      isTyping.current = true;\n    }\n    // otherwise, update the typing state to false if opening or navigating dropdown options\n    // other actions, like closing the dropdown, should not impact typing state.\n    else if (\n      (action === 'Open' && ev.key !== ' ') ||\n      action === 'Next' ||\n      action === 'Previous' ||\n      action === 'First' ||\n      action === 'Last' ||\n      action === 'PageUp' ||\n      action === 'PageDown'\n    ) {\n      isTyping.current = false;\n    }\n\n    // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n    if (freeform && (isTyping.current || !open) && ev.key === ' ') {\n      resolvedPropsOnKeyDown?.(ev);\n      return;\n    }\n\n    // if we're not allowing space to type, continue with default behavior\n    defaultOnTriggerKeyDown?.(ev);\n  });\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};\n  const onExpandIconMouseDown = useEventCallback(\n    mergeCallbacks(onIconMouseDown, () => {\n      // do not dismiss on blur when closing via clicking the icon\n      if (open) {\n        baseState.ignoreNextBlur.current = true;\n      }\n    }),\n  );\n\n  const onExpandIconClick = useEventCallback(\n    mergeCallbacks(onIconClick, (event: React.MouseEvent<HTMLSpanElement>) => {\n      // open and set focus\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n\n      // set focus visible=false, since this can only be done with the mouse/pointer\n      setFocusVisible(false);\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n    state.expandIcon.onClick = onExpandIconClick;\n\n    // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n    // using the following steps:\n    // 1. If there is an aria-label, it is \"Open [aria-label]\"\n    // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n    // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n    // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n    const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];\n    const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n    if (!hasExpandLabel) {\n      if (props['aria-labelledby']) {\n        const chevronId = state.expandIcon.id ?? `${comboId}-chevron`;\n        const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\n\n        state.expandIcon['aria-label'] = defaultOpenString;\n        state.expandIcon.id = chevronId;\n        state.expandIcon['aria-labelledby'] = chevronLabelledBy;\n      } else if (props['aria-label']) {\n        state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;\n      } else {\n        state.expandIcon['aria-label'] = defaultOpenString;\n      }\n    }\n  }\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","ArrowLeft","ArrowRight","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","mergeCallbacks","useEventCallback","useId","useMergedRefs","slot","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useCombobox_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","baseState","editable","activeOption","clearSelection","getIndexOfId","getOptionsMatchingText","hasFocus","open","selectOption","selectedOptions","setActiveOption","setFocusVisible","setOpen","setValue","value","disabled","freeform","inlinePopup","multiselect","comboId","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","triggerRef","hideActiveDescendant","setHideActiveDescendant","useState","isTyping","popupDimensions","setPopupDimensions","useEffect","width","current","clientWidth","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","undefined","ev","onTriggerBlur","text","newState","onTriggerChange","target","matchingOption","triggerSlot","listboxSlot","always","input","defaultProps","type","elementType","resolvedPropsOnKeyDown","onKeyDown","onChange","onBlur","optional","listbox","renderByDefault","children","style","state","components","expandIcon","role","defaultOnTriggerKeyDown","key","action","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy"],"mappings":"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"}
+{"version":3,"sources":["useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\n\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const baseState = useComboboxBaseState({ ...props, editable: true });\n  const {\n    activeOption,\n    clearSelection,\n    getIndexOfId,\n    getOptionsMatchingText,\n    hasFocus,\n    open,\n    selectOption,\n    selectedOptions,\n    setActiveOption,\n    setFocusVisible,\n    setOpen,\n    setValue,\n    value,\n  } = baseState;\n  const { disabled, freeform, inlinePopup, multiselect } = props;\n  const comboId = useId('combobox-');\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['children', 'size'],\n  });\n\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const triggerRef = React.useRef<HTMLInputElement>(null);\n\n  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n  // save the typing vs. navigating options state, as the space key should behave differently in each case\n  // we do not want to update the combobox when this changes, just save the value between renders\n  const isTyping = React.useRef(false);\n\n  // calculate listbox width style based on trigger width\n  const [popupDimensions, setPopupDimensions] = React.useState<{ width: string }>();\n  React.useEffect(() => {\n    // only recalculate width when opening\n    if (open) {\n      const width = `${rootRef.current?.clientWidth}px`;\n      if (width !== popupDimensions?.width) {\n        setPopupDimensions({ width });\n      }\n    }\n  }, [open, popupDimensions]);\n\n  // set active option and selection based on typing\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = inputValue?.trim().toLowerCase();\n\n    if (!searchString || searchString.length === 0) {\n      return;\n    }\n\n    const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n    const matches = getOptionsMatchingText(matcher);\n\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const startIndex = getIndexOfId(activeOption.id);\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  /* Handle typed input */\n\n  // reset any typed value when an option is selected\n  baseState.selectOption = (ev: SelectionEvents, option: OptionValue) => {\n    setValue(undefined);\n    selectOption(ev, option);\n  };\n\n  const onTriggerBlur = (ev: React.FocusEvent<HTMLInputElement>) => {\n    // handle selection and updating value if freeform is false\n    if (!baseState.open && !freeform) {\n      // select matching option, if the value fully matches\n      if (value && activeOption && value.trim().toLowerCase() === activeOption?.text.toLowerCase()) {\n        baseState.selectOption(ev, activeOption);\n      }\n\n      // reset typed value when the input loses focus while collapsed, unless freeform is true\n      setValue(undefined);\n    }\n  };\n\n  baseState.setOpen = (ev, newState: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    if (!newState && !freeform) {\n      setValue(undefined);\n    }\n\n    setOpen(ev, newState);\n  };\n\n  // update value and active option based on input\n  const onTriggerChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = ev.target.value;\n    // update uncontrolled value\n    baseState.setValue(inputValue);\n\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n    setActiveOption(matchingOption);\n\n    setFocusVisible(true);\n\n    // clear selection for single-select if the input value no longer matches the selection\n    if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n      clearSelection(ev);\n    }\n  };\n\n  // resolve input and listbox slot props\n  let triggerSlot: Slot<'input'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = slot.always(props.input, {\n    defaultProps: {\n      ref: useMergedRefs(props.input?.ref, triggerRef),\n      type: 'text',\n      value: value ?? '',\n      ...triggerNativeProps,\n    },\n    elementType: 'input',\n  });\n  const resolvedPropsOnKeyDown = triggerSlot.onKeyDown;\n  triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n  triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur); // only resolve listbox slot if needed\n  listboxSlot =\n    open || hasFocus\n      ? slot.optional(props.listbox, {\n          renderByDefault: true,\n          defaultProps: { children: props.children, style: popupDimensions },\n          elementType: Listbox,\n        })\n      : undefined;\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n  if (hideActiveDescendant) {\n    triggerSlot['aria-activedescendant'] = undefined;\n  }\n  const state: ComboboxState = {\n    components: { root: 'div', input: 'input', expandIcon: 'span', listbox: Listbox },\n    root: slot.always(props.root, {\n      defaultProps: {\n        'aria-owns': !inlinePopup ? listboxSlot?.id : undefined,\n        ...rootNativeProps,\n      },\n      elementType: 'div',\n    }),\n    input: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-expanded': open,\n        children: <ChevronDownIcon />,\n        role: 'button',\n      },\n      elementType: 'span',\n    }),\n    ...baseState,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  /* Set input.onKeyDown here, so we can override the default behavior for spacebar */\n  const defaultOnTriggerKeyDown = state.input.onKeyDown;\n  state.input.onKeyDown = useEventCallback((ev: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!open && getDropdownActionFromKey(ev) === 'Type') {\n      baseState.setOpen(ev, true);\n    }\n\n    // clear activedescendant when moving the text insertion cursor\n    if (ev.key === ArrowLeft || ev.key === ArrowRight) {\n      setHideActiveDescendant(true);\n    } else {\n      setHideActiveDescendant(false);\n    }\n\n    // update typing state to true if the user is typing\n    const action = getDropdownActionFromKey(ev, { open, multiselect });\n    if (action === 'Type') {\n      isTyping.current = true;\n    }\n    // otherwise, update the typing state to false if opening or navigating dropdown options\n    // other actions, like closing the dropdown, should not impact typing state.\n    else if (\n      (action === 'Open' && ev.key !== ' ') ||\n      action === 'Next' ||\n      action === 'Previous' ||\n      action === 'First' ||\n      action === 'Last' ||\n      action === 'PageUp' ||\n      action === 'PageDown'\n    ) {\n      isTyping.current = false;\n    }\n\n    // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n    if (freeform && (isTyping.current || !open) && ev.key === ' ') {\n      resolvedPropsOnKeyDown?.(ev);\n      return;\n    }\n\n    // if we're not allowing space to type, continue with default behavior\n    defaultOnTriggerKeyDown?.(ev);\n  });\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};\n  const onExpandIconMouseDown = useEventCallback(\n    mergeCallbacks(onIconMouseDown, () => {\n      // do not dismiss on blur when closing via clicking the icon\n      if (open) {\n        baseState.ignoreNextBlur.current = true;\n      }\n    }),\n  );\n\n  const onExpandIconClick = useEventCallback(\n    mergeCallbacks(onIconClick, (event: React.MouseEvent<HTMLSpanElement>) => {\n      // open and set focus\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n\n      // set focus visible=false, since this can only be done with the mouse/pointer\n      setFocusVisible(false);\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n    state.expandIcon.onClick = onExpandIconClick;\n\n    // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n    // using the following steps:\n    // 1. If there is an aria-label, it is \"Open [aria-label]\"\n    // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n    // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n    // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n    const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];\n    const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n    if (!hasExpandLabel) {\n      if (props['aria-labelledby']) {\n        const chevronId = state.expandIcon.id ?? `${comboId}-chevron`;\n        const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\n\n        state.expandIcon['aria-label'] = defaultOpenString;\n        state.expandIcon.id = chevronId;\n        state.expandIcon['aria-labelledby'] = chevronLabelledBy;\n      } else if (props['aria-label']) {\n        state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;\n      } else {\n        state.expandIcon['aria-label'] = defaultOpenString;\n      }\n    }\n  }\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","ArrowLeft","ArrowRight","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","mergeCallbacks","useEventCallback","useId","useMergedRefs","slot","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useCombobox_unstable","props","ref","listboxSlot","supportsLabelFor","supportsRequired","supportsSize","baseState","editable","activeOption","clearSelection","getIndexOfId","getOptionsMatchingText","hasFocus","open","selectOption","selectedOptions","setActiveOption","setFocusVisible","setOpen","setValue","value","disabled","freeform","inlinePopup","multiselect","comboId","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","triggerRef","hideActiveDescendant","setHideActiveDescendant","useState","isTyping","popupDimensions","setPopupDimensions","useEffect","width","current","clientWidth","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","undefined","ev","onTriggerBlur","text","newState","onTriggerChange","target","matchingOption","triggerSlot","always","input","defaultProps","type","elementType","resolvedPropsOnKeyDown","onKeyDown","onChange","onBlur","optional","listbox","renderByDefault","children","style","state","components","expandIcon","role","defaultOnTriggerKeyDown","key","action","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["Dropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDropdown_unstable } from './useDropdown';\nimport { renderDropdown_unstable } from './renderDropdown';\nimport { useDropdownStyles_unstable } from './useDropdownStyles.styles';\nimport type { DropdownProps } from './Dropdown.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_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  useCustomStyleHook_unstable('useDropdownStyles_unstable')(state);\n\n  return renderDropdown_unstable(state, contextValues);\n});\n\nDropdown.displayName = 'Dropdown';\n"],"names":["React","useDropdown_unstable","renderDropdown_unstable","useDropdownStyles_unstable","useComboboxContextValues","useCustomStyleHook_unstable","Dropdown","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAExE,SAASC,wBAAwB,QAAQ,0CAA0C;AAEnF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC3F,MAAMC,QAAQT,qBAAqBO,OAAOC;IAC1C,MAAME,gBAAgBP,yBAAyBM;IAE/CP,2BAA2BO;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOR,wBAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}
+{"version":3,"sources":["Dropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDropdown_unstable } from './useDropdown';\nimport { renderDropdown_unstable } from './renderDropdown';\nimport { useDropdownStyles_unstable } from './useDropdownStyles.styles';\nimport type { DropdownProps } from './Dropdown.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_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  useCustomStyleHook_unstable('useDropdownStyles_unstable')(state);\n\n  return renderDropdown_unstable(state, contextValues);\n});\n\nDropdown.displayName = 'Dropdown';\n"],"names":["React","useDropdown_unstable","renderDropdown_unstable","useDropdownStyles_unstable","useComboboxContextValues","useCustomStyleHook_unstable","Dropdown","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAExE,SAASC,wBAAwB,QAAQ,0CAA0C;AAEnF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQT,qBAAqBO,OAAOC;IAC1C,MAAME,gBAAgBP,yBAAyBM;IAE/CP,2BAA2BO;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOR,wBAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

package/lib/components/Dropdown/renderDropdown.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDropdown.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { Portal } from '@fluentui/react-portal';\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues) => {\n  assertSlots<DropdownSlots>(state);\n\n  return (\n    <state.root>\n      <ComboboxContext.Provider value={contextValues.combobox}>\n        <state.button>\n          {state.button.children}\n          {state.expandIcon && <state.expandIcon />}\n        </state.button>\n        {state.listbox &&\n          (state.inlinePopup ? (\n            <state.listbox />\n          ) : (\n            <Portal mountNode={state.mountNode}>\n              <state.listbox />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </state.root>\n  );\n};\n"],"names":["Portal","createElement","assertSlots","ComboboxContext","renderDropdown_unstable","state","contextValues","root","Provider","value","combobox","button","children","expandIcon","listbox","inlinePopup","mountNode"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,eAAe,QAAQ,iCAAiC;AAGjE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC,gBAAyC;IACrGJ,YAA2BG;IAE3B,qBACE,AAjBJ,cAiBKA,MAAME,IAAI,sBACT,AAlBN,cAkBOJ,gBAAgBK,QAAQ;QAACC,OAAOH,cAAcI,QAAQ;qBACrD,AAnBR,cAmBSL,MAAMM,MAAM,QACVN,MAAMM,MAAM,CAACC,QAAQ,EACrBP,MAAMQ,UAAU,kBAAI,AArB/B,cAqBgCR,MAAMQ,UAAU,UAEvCR,MAAMS,OAAO,IACXT,CAAAA,MAAMU,WAAW,iBAChB,AAzBZ,cAyBaV,MAAMS,OAAO,wBAEd,AA3BZ,cA2Bad;QAAOgB,WAAWX,MAAMW,SAAS;qBAChC,AA5Bd,cA4BeX,MAAMS,OAAO,QAEjB,AAAD;AAIV,EAAE"}
+{"version":3,"sources":["renderDropdown.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Portal } from '@fluentui/react-portal';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues) => {\n  assertSlots<DropdownSlots>(state);\n\n  return (\n    <state.root>\n      <ComboboxContext.Provider value={contextValues.combobox}>\n        <state.button>\n          {state.button.children}\n          {state.expandIcon && <state.expandIcon />}\n        </state.button>\n        {state.listbox &&\n          (state.inlinePopup ? (\n            <state.listbox />\n          ) : (\n            <Portal mountNode={state.mountNode}>\n              <state.listbox />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </state.root>\n  );\n};\n"],"names":["Portal","assertSlots","ComboboxContext","renderDropdown_unstable","state","contextValues","root","Provider","value","combobox","button","children","expandIcon","listbox","inlinePopup","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,eAAe,QAAQ,iCAAiC;AAGjE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DJ,YAA2BG;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,MAACJ,gBAAgBK,QAAQ;YAACC,OAAOH,cAAcI,QAAQ;;8BACrD,MAACL,MAAMM,MAAM;;wBACVN,MAAMM,MAAM,CAACC,QAAQ;wBACrBP,MAAMQ,UAAU,kBAAI,KAACR,MAAMQ,UAAU;;;gBAEvCR,MAAMS,OAAO,IACXT,CAAAA,MAAMU,WAAW,iBAChB,KAACV,MAAMS,OAAO,sBAEd,KAACb;oBAAOe,WAAWX,MAAMW,SAAS;8BAChC,cAAA,KAACX,MAAMS,OAAO;kBAElB;;;;AAIV,EAAE"}

package/lib/components/Dropdown/useDropdown.js

@@ -16,14 +16,15 @@ import { Listbox } from '../Listbox/Listbox';
  * @param props - props from this instance of Dropdown
  * @param ref - reference to root HTMLElement of Dropdown
  */ export const useDropdown_unstable = (props, ref)=>{
+    var _listboxSlot;
     // Merge props from surrounding <Field>, if any
     props = useFieldControlProps_unstable(props, {
         supportsLabelFor: true,
         supportsSize: true
     });
     const baseState = useComboboxBaseState(props);
-    const { activeOption , getIndexOfId , getOptionsMatchingText , open , setActiveOption , setFocusVisible , setOpen  } = baseState;
-    const { primary: triggerNativeProps , root: rootNativeProps  } = getPartitionedNativeProps({
+    const { activeOption, getIndexOfId, getOptionsMatchingText, open, setActiveOption, setFocusVisible, setOpen } = baseState;
+    const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({
         props,
         primarySlotTagName: 'button',
         excludedPropNames: [
@@ -124,7 +125,7 @@ import { Listbox } from '../Listbox/Listbox';
         },
         root: slot.always(props.root, {
             defaultProps: {
-                'aria-owns': !props.inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,
+                'aria-owns': !props.inlinePopup ? (_listboxSlot = listboxSlot) === null || _listboxSlot === void 0 ? void 0 : _listboxSlot.id : undefined,
                 children: props.children,
                 ...rootNativeProps
             },