@fluentui/react-combobox 9.2.4 → 9.2.6

package/.swcrc

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "exclude": [
+    "/testing",
+    "/**/*.cy.ts",
+    "/**/*.cy.tsx",
+    "/**/*.spec.ts",
+    "/**/*.spec.tsx",
+    "/**/*.test.ts",
+    "/**/*.test.tsx"
+  ],
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "externalHelpers": true,
+    "transform": {
+      "react": {
+        "runtime": "classic",
+        "useSpread": true
+      }
+    },
+    "target": "es2019"
+  },
+  "minify": false,
+  "sourceMaps": true
+}

package/CHANGELOG.json

@@ -2,7 +2,121 @@
   "name": "@fluentui/react-combobox",
   "entries": [
     {
-      "date": "Thu, 16 Mar 2023 14:33:33 GMT",
+      "date": "Thu, 23 Mar 2023 12:28:45 GMT",
+      "tag": "@fluentui/react-combobox_v9.2.6",
+      "version": "9.2.6",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.28",
+            "commit": "be0ca69899300abe3c8478c435e0f6837138479b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-portal to v9.2.3",
+            "commit": "be0ca69899300abe3c8478c435e0f6837138479b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-positioning to v9.5.7",
+            "commit": "be0ca69899300abe3c8478c435e0f6837138479b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.3.3",
+            "commit": "be0ca69899300abe3c8478c435e0f6837138479b"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 21 Mar 2023 21:23:28 GMT",
+      "tag": "@fluentui/react-combobox_v9.2.5",
+      "version": "9.2.5",
+      "comments": {
+        "patch": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "2fac1a139149bd13b76b1306207bc988dca9c72c",
+            "comment": "chore: migrate to swc transpilation approach."
+          },
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "ead1c6d4c2ac3f3596b62b8cbc07b0a03041f11f",
+            "comment": "fix: add node field to package.json exports map."
+          },
+          {
+            "author": "makotom@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "7fde5c94869ff9841b142b7ff1d0a3df0ab58f74",
+            "comment": "chore: Bumping version of @fluentui/react-icons to ^2.0.196."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/keyboard-keys to v9.0.2",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.15",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.27",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-portal to v9.2.2",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-positioning to v9.5.6",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.3.2",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-theme to v9.1.7",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-utilities to v9.7.2",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 16 Mar 2023 14:36:59 GMT",
       "tag": "@fluentui/react-combobox_v9.2.4",
       "version": "9.2.4",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,44 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Thu, 16 Mar 2023 14:33:33 GMT and should not be manually modified.
+This log was last generated on Thu, 23 Mar 2023 12:28:45 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.2.6)
+
+Thu, 23 Mar 2023 12:28:45 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.2.5..@fluentui/react-combobox_v9.2.6)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.0.0-alpha.28 ([PR #27286](https://github.com/microsoft/fluentui/pull/27286) by beachball)
+- Bump @fluentui/react-portal to v9.2.3 ([PR #27286](https://github.com/microsoft/fluentui/pull/27286) by beachball)
+- Bump @fluentui/react-positioning to v9.5.7 ([PR #27286](https://github.com/microsoft/fluentui/pull/27286) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.3.3 ([PR #27286](https://github.com/microsoft/fluentui/pull/27286) by beachball)
+
+## [9.2.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.2.5)
+
+Tue, 21 Mar 2023 21:23:28 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.2.4..@fluentui/react-combobox_v9.2.5)
+
+### Patches
+
+- chore: migrate to swc transpilation approach. ([PR #27250](https://github.com/microsoft/fluentui/pull/27250) by tristan.watanabe@gmail.com)
+- fix: add node field to package.json exports map. ([PR #27154](https://github.com/microsoft/fluentui/pull/27154) by tristan.watanabe@gmail.com)
+- chore: Bumping version of @fluentui/react-icons to ^2.0.196. ([PR #27100](https://github.com/microsoft/fluentui/pull/27100) by makotom@microsoft.com)
+- Bump @fluentui/keyboard-keys to v9.0.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.15 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-field to v9.0.0-alpha.27 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-portal to v9.2.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-positioning to v9.5.6 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.3.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-theme to v9.1.7 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-utilities to v9.7.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+
 ## [9.2.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.2.4)
 
-Thu, 16 Mar 2023 14:33:33 GMT 
+Thu, 16 Mar 2023 14:36:59 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.2.3..@fluentui/react-combobox_v9.2.4)
 
 ### Patches

package/lib/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/Combobox.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './components/Combobox/index';\n"]}
+{"version":3,"names":[],"sources":["../src/Combobox.ts"],"sourcesContent":["export * from './components/Combobox/index';\n"],"mappings":"AAAA,cAAc"}

package/lib/ComboboxField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxField.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/ComboboxField.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/ComboboxField/index';\n"]}
+{"version":3,"names":[],"sources":["../src/ComboboxField.ts"],"sourcesContent":["export * from './components/ComboboxField/index';\n"],"mappings":"AAAA,cAAc"}

package/lib/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/Dropdown.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './components/Dropdown/index';\n"]}
+{"version":3,"names":[],"sources":["../src/Dropdown.ts"],"sourcesContent":["export * from './components/Dropdown/index';\n"],"mappings":"AAAA,cAAc"}

package/lib/Listbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Listbox.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/Listbox.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './components/Listbox/index';\n"]}
+{"version":3,"names":[],"sources":["../src/Listbox.ts"],"sourcesContent":["export * from './components/Listbox/index';\n"],"mappings":"AAAA,cAAc"}

package/lib/Option.js.map

@@ -1 +1 @@
-{"version":3,"file":"Option.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/Option.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './components/Option/index';\n"]}
+{"version":3,"names":[],"sources":["../src/Option.ts"],"sourcesContent":["export * from './components/Option/index';\n"],"mappings":"AAAA,cAAc"}

package/lib/OptionGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"OptionGroup.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/OptionGroup.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC","sourcesContent":["export * from './components/OptionGroup/index';\n"]}
+{"version":3,"names":[],"sources":["../src/OptionGroup.ts"],"sourcesContent":["export * from './components/OptionGroup/index';\n"],"mappings":"AAAA,cAAc"}

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"names":["React","useCombobox_unstable","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxContextValues","useCustomStyleHooks_unstable","Combobox","forwardRef","props","ref","state","contextValues","useCustomStyles","displayName"],"sources":["../../../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,YAAYA,KAAA,MAAW;AACvB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,uBAAuB,QAAQ;AACxC,SAASC,0BAA0B,QAAQ;AAE3C,SAASC,wBAAwB,QAAQ;AAEzC,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,QAAA,gBAA+CN,KAAA,CAAMO,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC3F,MAAMC,KAAA,GAAQT,oBAAA,CAAqBO,KAAA,EAAOC,GAAA;EAC1C,MAAME,aAAA,GAAgBP,wBAAA,CAAyBM,KAAA;EAE/CP,0BAAA,CAA2BO,KAAA;EAE3B,MAAM;IAAEP,0BAAA,EAA4BS;EAAe,CAAE,GAAGP,4BAAA;EACxDO,eAAA,CAAgBF,KAAA;EAEhB,OAAOR,uBAAA,CAAwBQ,KAAA,EAAOC,aAAA;AACxC;AAEAL,QAAA,CAASO,WAAW,GAAG"}

package/lib/components/Combobox/Combobox.types.js

@@ -1,2 +1,2 @@
-export {};
+import * as React from 'react';
 //# sourceMappingURL=Combobox.types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/Combobox.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type ComboboxSlots = {\n  /* The root combobox slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /* The dropdown arrow icon */\n  expandIcon: Slot<'span'>;\n\n  /* The primary slot, an input with role=\"combobox\" */\n  input: NonNullable<Slot<'input'>>;\n\n  /* The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Combobox Props\n */\nexport type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> &\n  ComboboxBaseProps & {\n    /*\n     * Whether the ComboBox allows freeform user input, rather than restricting to the provided options.\n     */\n    freeform?: boolean;\n\n    /*\n     * The primary slot, `<input>`, does not support children so we need to explicitly include it here.\n     */\n    children?: React.ReactNode;\n  };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxState = ComponentState<ComboboxSlots> & ComboboxBaseState;\n\n/* Export types defined in ComboboxBase */\nexport type ComboboxContextValues = ComboboxBaseContextValues;\nexport type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ComboboxOpenEvents = ComboboxBaseOpenEvents;\n"]}
+{"version":3,"names":["React"],"sources":["../../../src/components/Combobox/Combobox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type ComboboxSlots = {\n  /* The root combobox slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /* The dropdown arrow icon */\n  expandIcon: Slot<'span'>;\n\n  /* The primary slot, an input with role=\"combobox\" */\n  input: NonNullable<Slot<'input'>>;\n\n  /* The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Combobox Props\n */\nexport type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> &\n  ComboboxBaseProps & {\n    /*\n     * Whether the ComboBox allows freeform user input, rather than restricting to the provided options.\n     */\n    freeform?: boolean;\n\n    /*\n     * The primary slot, `<input>`, does not support children so we need to explicitly include it here.\n     */\n    children?: React.ReactNode;\n  };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxState = ComponentState<ComboboxSlots> & ComboboxBaseState;\n\n/* Export types defined in ComboboxBase */\nexport type ComboboxContextValues = ComboboxBaseContextValues;\nexport type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ComboboxOpenEvents = ComboboxBaseOpenEvents;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './Combobox';\nexport * from './Combobox.types';\nexport * from './renderCombobox';\nexport * from './useCombobox';\nexport * from './useComboboxStyles';\n"]}
+{"version":3,"names":[],"sources":["../../../src/components/Combobox/index.ts"],"sourcesContent":["export * from './Combobox';\nexport * from './Combobox.types';\nexport * from './renderCombobox';\nexport * from './useCombobox';\nexport * from './useComboboxStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/Combobox/renderCombobox.js

@@ -10,18 +10,8 @@ export const renderCombobox_unstable = (state, contextValues) => {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, {
-    ...slotProps.root
-  }, /*#__PURE__*/React.createElement(ComboboxContext.Provider, {
+  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, /*#__PURE__*/React.createElement(ComboboxContext.Provider, {
     value: contextValues.combobox
-  }, /*#__PURE__*/React.createElement(slots.input, {
-    ...slotProps.input
-  }), slots.expandIcon && /*#__PURE__*/React.createElement(slots.expandIcon, {
-    ...slotProps.expandIcon
-  }), slots.listbox && (state.inlinePopup ? /*#__PURE__*/React.createElement(slots.listbox, {
-    ...slotProps.listbox
-  }) : /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(slots.listbox, {
-    ...slotProps.listbox
-  })))));
+  }, /*#__PURE__*/React.createElement(slots.input, slotProps.input), slots.expandIcon && /*#__PURE__*/React.createElement(slots.expandIcon, slotProps.expandIcon), slots.listbox && (state.inlinePopup ? /*#__PURE__*/React.createElement(slots.listbox, slotProps.listbox) : /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(slots.listbox, slotProps.listbox)))));
 };
 //# sourceMappingURL=renderCombobox.js.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"names":["React","Portal","getSlots","ComboboxContext","renderCombobox_unstable","state","contextValues","slots","slotProps","createElement","root","Provider","value","combobox","input","expandIcon","listbox","inlinePopup"],"sources":["../../../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,YAAYA,KAAA,MAAW;AACvB,SAASC,MAAM,QAAQ;AACvB,SAASC,QAAQ,QAAQ;AACzB,SAASC,eAAe,QAAQ;AAGhC;;;AAGA,OAAO,MAAMC,uBAAA,GAA0BA,CAACC,KAAA,EAAsBC,aAAA,KAAyC;EACrG,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGN,QAAA,CAAwBG,KAAA;EAErD,oBACEL,KAAA,CAAAS,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,eAC5BV,KAAA,CAAAS,aAAA,CAACN,eAAA,CAAgBQ,QAAQ;IAACC,KAAA,EAAON,aAAA,CAAcO;kBAC7Cb,KAAA,CAAAS,aAAA,CAACF,KAAA,CAAMO,KAAK,EAAKN,SAAA,CAAUM,KAAK,GAC/BP,KAAA,CAAMQ,UAAU,iBAAIf,KAAA,CAAAS,aAAA,CAACF,KAAA,CAAMQ,UAAU,EAAKP,SAAA,CAAUO,UAAU,GAC9DR,KAAA,CAAMS,OAAO,KACXX,KAAA,CAAMY,WAAW,gBAChBjB,KAAA,CAAAS,aAAA,CAACF,KAAA,CAAMS,OAAO,EAAKR,SAAA,CAAUQ,OAAO,iBAEpChB,KAAA,CAAAS,aAAA,CAACR,MAAA,qBACCD,KAAA,CAAAS,aAAA,CAACF,KAAA,CAAMS,OAAO,EAAKR,SAAA,CAAUQ,OAAO,EAEvC,CAAD;AAIV"}

package/lib/components/Combobox/useCombobox.js

@@ -17,7 +17,7 @@ import { Listbox } from '../Listbox/Listbox';
  * @param ref - reference to root HTMLElement of Combobox
  */
 export const useCombobox_unstable = (props, ref) => {
-  var _a, _b;
+  var _props_input;
   const baseState = useComboboxBaseState({
     ...props,
     editable: true
@@ -61,10 +61,10 @@ export const useCombobox_unstable = (props, ref) => {
   // calculate listbox width style based on trigger width
   const [popupDimensions, setPopupDimensions] = React.useState();
   React.useEffect(() => {
-    var _a;
     // only recalculate width when opening
     if (open) {
-      const width = `${(_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth}px`;
+      var _rootRef_current;
+      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)) {
         setPopupDimensions({
           width
@@ -74,7 +74,6 @@ export const useCombobox_unstable = (props, ref) => {
   }, [open, popupDimensions]);
   // set active option and selection based on typing
   const getOptionFromInput = inputValue => {
-    var _a;
     const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();
     if (!searchString || searchString.length === 0) {
       return;
@@ -87,10 +86,10 @@ export const useCombobox_unstable = (props, ref) => {
       const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);
       return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];
     }
-    return (_a = matches[0]) !== null && _a !== void 0 ? _a : undefined;
+    var _matches_;
+    return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;
   };
-  /* Handle typed input */
-  // reset any typed value when an option is selected
+  /* Handle typed input */ // reset any typed value when an option is selected
   baseState.selectOption = (ev, option) => {
     setValue(undefined);
     selectOption(ev, option);
@@ -147,7 +146,7 @@ export const useCombobox_unstable = (props, ref) => {
   triggerSlot = resolveShorthand(props.input, {
     required: true,
     defaultProps: {
-      ref: useMergedRefs((_a = props.input) === null || _a === void 0 ? void 0 : _a.ref, triggerRef),
+      ref: useMergedRefs((_props_input = props.input) === null || _props_input === void 0 ? void 0 : _props_input.ref, triggerRef),
       type: 'text',
       value: value !== null && value !== void 0 ? value : '',
       ...triggerNativeProps
@@ -208,10 +207,10 @@ export const useCombobox_unstable = (props, ref) => {
     }
   }));
   const onExpandIconClick = useEventCallback(mergeCallbacks(onIconClick, event => {
-    var _a;
+    var _triggerRef_current;
     // open and set focus
     state.setOpen(event, !state.open);
-    (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
     // set focus visible=false, since this can only be done with the mouse/pointer
     setFocusVisible(false);
   }));
@@ -228,7 +227,8 @@ export const useCombobox_unstable = (props, ref) => {
     const defaultOpenString = 'Open'; // this is english-only since it is the fallback
     if (!hasExpandLabel) {
       if (props['aria-labelledby']) {
-        const chevronId = (_b = state.expandIcon.id) !== null && _b !== void 0 ? _b : `${comboId}-chevron`;
+        var _state_expandIcon_id;
+        const chevronId = (_state_expandIcon_id = state.expandIcon.id) !== null && _state_expandIcon_id !== void 0 ? _state_expandIcon_id : `${comboId}-chevron`;
         const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;
         state.expandIcon['aria-label'] = defaultOpenString;
         state.expandIcon.id = chevronId;

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

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

package/lib/components/Combobox/useComboboxStyles.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":["../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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"}
+{"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/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

@@ -1,5 +1,4 @@
-/* eslint-disable deprecation/deprecation */
-import { getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';
+/* eslint-disable deprecation/deprecation */import { getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';
 import { Combobox, comboboxClassNames } from '../../Combobox';
 /** @deprecated Use Field with Combobox: `<Field><Combobox /></Field>` */
 export const comboboxFieldClassNames = /*#__PURE__*/getDeprecatedFieldClassNames(comboboxClassNames.root);

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"names":["getDeprecatedFieldClassNames","makeDeprecatedField","Combobox","comboboxClassNames","comboboxFieldClassNames","root","ComboboxField"],"sources":["../../../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,4CACA,SAA+BA,4BAA4B,EAAEC,mBAAmB,QAAQ;AAExF,SAASC,QAAQ,EAAEC,kBAAkB,QAAuB;AAI5D;AACA,OAAO,MAAMC,uBAAA,gBAA0BJ,4BAAA,CAA6BG,kBAAA,CAAmBE,IAAI;AAC3F;AACA,OAAO,MAAMC,aAAA,gBAAyDL,mBAAA,CAAoBC,QAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/ComboboxField/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './ComboboxField';\n"]}
+{"version":3,"names":[],"sources":["../../../src/components/ComboboxField/index.ts"],"sourcesContent":["export * from './ComboboxField';\n"],"mappings":"AAAA,cAAc"}