@fluentui/react-combobox 9.0.0-beta.14 → 9.0.0-beta.16

package/CHANGELOG.json

@@ -2,7 +2,135 @@
   "name": "@fluentui/react-combobox",
   "entries": [
     {
-      "date": "Wed, 02 Nov 2022 11:54:50 GMT",
+      "date": "Thu, 17 Nov 2022 23:02:33 GMT",
+      "tag": "@fluentui/react-combobox_v9.0.0-beta.16",
+      "version": "9.0.0-beta.16",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
+            "comment": "chore: update package scaffold"
+          },
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "7fde358cdf0a2caac13bd79d3af893d435c81e33",
+            "comment": "feat: add Accessibility section to Dropdown docs page"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.2",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.9",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-portal to v9.0.11",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-positioning to v9.3.2",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-utilities to v9.2.2",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 11 Nov 2022 14:57:58 GMT",
+      "tag": "@fluentui/react-combobox_v9.0.0-beta.15",
+      "version": "9.0.0-beta.15",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "39ba7b6d4648781b979fcf694579f97b851348af",
+            "comment": "chore: Move InputField into the @fluentui/react-input package and export as _unstable"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "b3907043bd8d7b650c55e8e7c3119b14f2606c38",
+            "comment": "fix: create valid export maps"
+          },
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "023737b640281434710caecc55270838895b50bc",
+            "comment": "fix: update disabled + underline styles, have all text-like form control disabled states match"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/keyboard-keys to v9.0.1",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.1",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.8",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-portal to v9.0.10",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-positioning to v9.3.1",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-theme to v9.1.2",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-utilities to v9.2.1",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.18",
+            "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 02 Nov 2022 11:57:49 GMT",
       "tag": "@fluentui/react-combobox_v9.0.0-beta.14",
       "version": "9.0.0-beta.14",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,44 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Wed, 02 Nov 2022 11:54:50 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Nov 2022 23:02:33 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.0.0-beta.16)
+
+Thu, 17 Nov 2022 23:02:33 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.0.0-beta.15..@fluentui/react-combobox_v9.0.0-beta.16)
+
+### Changes
+
+- Bump @fluentui/react-context-selector to v9.1.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-field to v9.0.0-alpha.9 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-portal to v9.0.11 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-positioning to v9.3.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-utilities to v9.2.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+
+## [9.0.0-beta.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.0.0-beta.15)
+
+Fri, 11 Nov 2022 14:57:58 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.0.0-beta.14..@fluentui/react-combobox_v9.0.0-beta.15)
+
+### Changes
+
+- chore: Move InputField into the @fluentui/react-input package and export as _unstable ([PR #25593](https://github.com/microsoft/fluentui/pull/25593) by behowell@microsoft.com)
+- fix: create valid export maps ([PR #25558](https://github.com/microsoft/fluentui/pull/25558) by martinhochel@microsoft.com)
+- fix: update disabled + underline styles, have all text-like form control disabled states match ([PR #25543](https://github.com/microsoft/fluentui/pull/25543) by sarah.higley@microsoft.com)
+- Bump @fluentui/keyboard-keys to v9.0.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-field to v9.0.0-alpha.8 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-portal to v9.0.10 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-positioning to v9.3.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-theme to v9.1.2 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-utilities to v9.2.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.18 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
+
 ## [9.0.0-beta.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.0.0-beta.14)
 
-Wed, 02 Nov 2022 11:54:50 GMT 
+Wed, 02 Nov 2022 11:57:49 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.0.0-beta.13..@fluentui/react-combobox_v9.0.0-beta.14)
 
 ### Changes

package/dist/index.d.ts

@@ -3,6 +3,9 @@
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import { FC } from 'react';
+import { FieldControl } from '@fluentui/react-field';
+import type { FieldProps } from '@fluentui/react-field';
+import { FieldSlots } from '@fluentui/react-field';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { PositioningShorthand } from '@fluentui/react-positioning';
 import { Provider } from 'react';
@@ -108,6 +111,12 @@ export declare type ComboboxContextValue = Pick<ComboboxState, 'activeOption' |
 
 export declare type ComboboxContextValues = ComboboxBaseContextValues;
 
+export declare const ComboboxField_unstable: ForwardRefComponent<ComboboxFieldProps_unstable>;
+
+export declare const comboboxFieldClassNames: SlotClassNames<FieldSlots<FieldControl>>;
+
+export declare type ComboboxFieldProps_unstable = FieldProps<typeof Combobox>;
+
 export declare type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;
 
 export declare type ComboboxOpenEvents = ComboboxBaseOpenEvents;

package/lib/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sourceRoot":"../src/","sources":["Combobox.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './components/Combobox/index';\n"]}
+{"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"]}

package/lib/ComboboxField.js

@@ -0,0 +1,2 @@
+export * from './components/ComboboxField/index';
+//# sourceMappingURL=ComboboxField.js.map

package/lib/ComboboxField.js.map

@@ -0,0 +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"]}

package/lib/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"../src/","sources":["Dropdown.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './components/Dropdown/index';\n"]}
+{"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"]}

package/lib/Listbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Listbox.js","sourceRoot":"../src/","sources":["Listbox.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './components/Listbox/index';\n"]}
+{"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"]}

package/lib/Option.js.map

@@ -1 +1 @@
-{"version":3,"file":"Option.js","sourceRoot":"../src/","sources":["Option.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './components/Option/index';\n"]}
+{"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"]}

package/lib/OptionGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"OptionGroup.js","sourceRoot":"../src/","sources":["OptionGroup.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC","sourcesContent":["export * from './components/OptionGroup/index';\n"]}
+{"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"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Combobox/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AAEA,SAAS,wBAAT,QAAyC,yCAAzC;AAGA;;AAEG;;AACH,OAAO,MAAM,QAAQ,gBAAuC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,oBAAoB,CAAC,KAAD,EAAQ,GAAR,CAAlC;EACA,MAAM,aAAa,GAAG,wBAAwB,CAAC,KAAD,CAA9C;EAEA,0BAA0B,CAAC,KAAD,CAA1B;EACA,OAAO,uBAAuB,CAAC,KAAD,EAAQ,aAAR,CAA9B;AACD,CAN2D,CAArD;AAQP,QAAQ,CAAC,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles';\nimport type { ComboboxProps } from './Combobox.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Combobox component: a selection control that allows users to choose from a set of possible options\n */\nexport const Combobox: ForwardRefComponent<ComboboxProps> = React.forwardRef((props, ref) => {\n  const state = useCombobox_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useComboboxStyles_unstable(state);\n  return renderCombobox_unstable(state, contextValues);\n});\n\nCombobox.displayName = 'Combobox';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-combobox/src/components/Combobox/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AAEA,SAAS,wBAAT,QAAyC,yCAAzC;AAGA;;AAEG;;AACH,OAAO,MAAM,QAAQ,gBAAuC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,oBAAoB,CAAC,KAAD,EAAQ,GAAR,CAAlC;EACA,MAAM,aAAa,GAAG,wBAAwB,CAAC,KAAD,CAA9C;EAEA,0BAA0B,CAAC,KAAD,CAA1B;EACA,OAAO,uBAAuB,CAAC,KAAD,EAAQ,aAAR,CAA9B;AACD,CAN2D,CAArD;AAQP,QAAQ,CAAC,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles';\nimport type { ComboboxProps } from './Combobox.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Combobox component: a selection control that allows users to choose from a set of possible options\n */\nexport const Combobox: ForwardRefComponent<ComboboxProps> = React.forwardRef((props, ref) => {\n  const state = useCombobox_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useComboboxStyles_unstable(state);\n  return renderCombobox_unstable(state, contextValues);\n});\n\nCombobox.displayName = 'Combobox';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.types.js","sourceRoot":"../src/","sources":["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,"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"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["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,"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"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Combobox/renderCombobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,eAAT,QAAgC,gCAAhC;AAGA;;AAEG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAAuB,aAAvB,KAA+D;EACpG,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAgB,KAAhB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,eAAe,CAAC,QAAjB,EAAyB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAzB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,EAEG,KAAK,CAAC,UAAN,iBAAoB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAjB,CAFvB,EAGG,KAAK,CAAC,OAAN,KACE,KAAK,CAAC,WAAN,gBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CADD,gBAGC,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO,IAAP,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CADF,CAJH,CAHH,CADF,CADF;AAgBD,CAnBM","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-combobox/src/components/Combobox/renderCombobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,eAAT,QAAgC,gCAAhC;AAGA;;AAEG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAAuB,aAAvB,KAA+D;EACpG,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAgB,KAAhB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,eAAe,CAAC,QAAjB,EAAyB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAzB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,EAEG,KAAK,CAAC,UAAN,iBAAoB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAjB,CAFvB,EAGG,KAAK,CAAC,OAAN,KACE,KAAK,CAAC,WAAN,gBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CADD,gBAGC,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO,IAAP,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CADF,CAJH,CAHH,CADF,CADF;AAgBD,CAnBM","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"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Combobox/useCombobox.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\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);\n  const {\n    activeOption,\n    clearSelection,\n    getIndexOfId,\n    getOptionsMatchingValue,\n    hasFocus,\n    open,\n    selectOption,\n    selectedOptions,\n    setActiveOption,\n    setFocusVisible,\n    setOpen,\n    setValue,\n    value,\n  } = baseState;\n  const { freeform, multiselect } = props;\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  // calculate listbox width style based on trigger width\n  const [popupWidth, setPopupWidth] = React.useState<string>();\n  React.useEffect(() => {\n    const width = open ? `${rootRef.current?.clientWidth}px` : undefined;\n    setPopupWidth(width);\n  }, [open]);\n\n  // handle input type-to-select\n  const getSearchString = (inputValue: string): string => {\n    // if there are commas in the value string, take the text after the last comma\n    const searchString = inputValue.split(',').pop();\n\n    return searchString?.trim().toLowerCase() || '';\n  };\n\n  // set active option and selection based on typing\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = getSearchString(inputValue);\n\n    if (searchString.length === 0) {\n      return;\n    }\n\n    const matcher = (optionValue: string) => optionValue.toLowerCase().indexOf(searchString) === 0;\n    const matches = getOptionsMatchingValue(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 && getSearchString(value) === activeOption?.value.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 (!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 (\n      !multiselect &&\n      selectedOptions.length === 1 &&\n      (inputValue.length < 1 || selectedOptions[0].indexOf(inputValue) !== 0)\n    ) {\n      clearSelection(ev);\n    }\n  };\n\n  // resolve input and listbox slot props\n  let triggerSlot: Slot<'input'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = resolveShorthand(props.input, {\n    required: true,\n    defaultProps: {\n      ref: useMergedRefs(props.input?.ref, triggerRef),\n      type: 'text',\n      value: value ?? '',\n      ...triggerNativeProps,\n    },\n  });\n\n  triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n  triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);\n\n  // only resolve listbox slot if needed\n  listboxSlot =\n    open || hasFocus\n      ? resolveShorthand(props.listbox, {\n          required: true,\n          defaultProps: {\n            children: props.children,\n            style: { width: popupWidth },\n          },\n        })\n      : undefined;\n\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n  const state: 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        ...rootNativeProps,\n      },\n    }),\n    input: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: resolveShorthand(props.expandIcon, {\n      required: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n    }),\n    ...baseState,\n    setOpen,\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 clicking the icon\n      baseState.ignoreNextBlur.current = true;\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  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n    state.expandIcon.onClick = onExpandIconClick;\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\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);\n  const {\n    activeOption,\n    clearSelection,\n    getIndexOfId,\n    getOptionsMatchingValue,\n    hasFocus,\n    open,\n    selectOption,\n    selectedOptions,\n    setActiveOption,\n    setFocusVisible,\n    setOpen,\n    setValue,\n    value,\n  } = baseState;\n  const { freeform, multiselect } = props;\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  // calculate listbox width style based on trigger width\n  const [popupWidth, setPopupWidth] = React.useState<string>();\n  React.useEffect(() => {\n    const width = open ? `${rootRef.current?.clientWidth}px` : undefined;\n    setPopupWidth(width);\n  }, [open]);\n\n  // handle input type-to-select\n  const getSearchString = (inputValue: string): string => {\n    // if there are commas in the value string, take the text after the last comma\n    const searchString = inputValue.split(',').pop();\n\n    return searchString?.trim().toLowerCase() || '';\n  };\n\n  // set active option and selection based on typing\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = getSearchString(inputValue);\n\n    if (searchString.length === 0) {\n      return;\n    }\n\n    const matcher = (optionValue: string) => optionValue.toLowerCase().indexOf(searchString) === 0;\n    const matches = getOptionsMatchingValue(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 && getSearchString(value) === activeOption?.value.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 (!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 (\n      !multiselect &&\n      selectedOptions.length === 1 &&\n      (inputValue.length < 1 || selectedOptions[0].indexOf(inputValue) !== 0)\n    ) {\n      clearSelection(ev);\n    }\n  };\n\n  // resolve input and listbox slot props\n  let triggerSlot: Slot<'input'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = resolveShorthand(props.input, {\n    required: true,\n    defaultProps: {\n      ref: useMergedRefs(props.input?.ref, triggerRef),\n      type: 'text',\n      value: value ?? '',\n      ...triggerNativeProps,\n    },\n  });\n\n  triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n  triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);\n\n  // only resolve listbox slot if needed\n  listboxSlot =\n    open || hasFocus\n      ? resolveShorthand(props.listbox, {\n          required: true,\n          defaultProps: {\n            children: props.children,\n            style: { width: popupWidth },\n          },\n        })\n      : undefined;\n\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n  const state: 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        ...rootNativeProps,\n      },\n    }),\n    input: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: resolveShorthand(props.expandIcon, {\n      required: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n    }),\n    ...baseState,\n    setOpen,\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 clicking the icon\n      baseState.ignoreNextBlur.current = true;\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  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n    state.expandIcon.onClick = onExpandIconClick;\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Combobox/useComboboxStyles.js

@@ -21,18 +21,6 @@ const fieldHeights = {
 const useStyles = /*#__PURE__*/__styles({
   "root": {
     "Bt984gj": "f122n59",
-    "B4j52fo": "f192inf7",
-    "Bekrc4i": ["f5tn483", "f1ojsxk5"],
-    "Bn0qgzm": "f1vxd6vx",
-    "ibv6hh": ["f1ojsxk5", "f5tn483"],
-    "icvyot": "fzkkow9",
-    "vrafjx": ["fcdblym", "fjik90z"],
-    "oivjwe": "fg706s2",
-    "wvpqe5": ["fjik90z", "fcdblym"],
-    "g2u3we": "f1p3nwhy",
-    "h3c5rm": ["f11589ue", "f1pdflbu"],
-    "B9xav0g": "f1q5o8ev",
-    "zhjwy3": ["f1pdflbu", "f11589ue"],
     "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
     "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
     "B7oj6ja": ["f1jar5jt", "fyu767a"],
@@ -101,7 +89,9 @@ const useStyles = /*#__PURE__*/__styles({
     "g2u3we": "fj3muxo",
     "h3c5rm": ["f1akhkt", "f1lxtadh"],
     "B9xav0g": "f1c1zstj",
-    "zhjwy3": ["f1lxtadh", "f1akhkt"],
+    "zhjwy3": ["f1lxtadh", "f1akhkt"]
+  },
+  "outlineInteractive": {
     "Bgoe8wy": "fvcxoqz",
     "Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
     "oetu4i": "flmw63s",
@@ -122,10 +112,34 @@ const useStyles = /*#__PURE__*/__styles({
     "Btl43ni": ["f1ozlkrg", "f10ostut"]
   },
   "filled-lighter": {
-    "De3pzq": "fxugw4r"
+    "De3pzq": "fxugw4r",
+    "B4j52fo": "f192inf7",
+    "Bekrc4i": ["f5tn483", "f1ojsxk5"],
+    "Bn0qgzm": "f1vxd6vx",
+    "ibv6hh": ["f1ojsxk5", "f5tn483"],
+    "icvyot": "fzkkow9",
+    "vrafjx": ["fcdblym", "fjik90z"],
+    "oivjwe": "fg706s2",
+    "wvpqe5": ["fjik90z", "fcdblym"],
+    "g2u3we": "fghlq4f",
+    "h3c5rm": ["f1gn591s", "fjscplz"],
+    "B9xav0g": "fb073pr",
+    "zhjwy3": ["fjscplz", "f1gn591s"]
   },
   "filled-darker": {
-    "De3pzq": "f16xq7d1"
+    "De3pzq": "f16xq7d1",
+    "B4j52fo": "f192inf7",
+    "Bekrc4i": ["f5tn483", "f1ojsxk5"],
+    "Bn0qgzm": "f1vxd6vx",
+    "ibv6hh": ["f1ojsxk5", "f5tn483"],
+    "icvyot": "fzkkow9",
+    "vrafjx": ["fcdblym", "fjik90z"],
+    "oivjwe": "fg706s2",
+    "wvpqe5": ["fjik90z", "fcdblym"],
+    "g2u3we": "fghlq4f",
+    "h3c5rm": ["f1gn591s", "fjscplz"],
+    "B9xav0g": "fb073pr",
+    "zhjwy3": ["fjscplz", "f1gn591s"]
   },
   "invalid": {
     "tvckwq": "fs4k3qj",
@@ -135,9 +149,21 @@ const useStyles = /*#__PURE__*/__styles({
   },
   "invalidUnderline": {
     "hhx65j": "f1fgmyf4"
+  },
+  "disabled": {
+    "Bceei9c": "fdrzuqr",
+    "De3pzq": "f1c21dwh",
+    "g2u3we": "f1jj8ep1",
+    "h3c5rm": ["f15xbau", "fy0fskl"],
+    "B9xav0g": "f4ikngz",
+    "zhjwy3": ["fy0fskl", "f15xbau"],
+    "Bjwas2f": "fg455y9",
+    "Bn1d65q": ["f1rvyvqg", "f14g86mu"],
+    "Bxeuatn": "f1cwzwz",
+    "n51gp8": ["f14g86mu", "f1rvyvqg"]
   }
 }, {
-  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".fwk3njj{display:inline-grid;}", ".fz17x9o{grid-template-columns:1fr auto;}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".fjseox{display:none;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}"],
+  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".fwk3njj{display:inline-grid;}", ".fz17x9o{grid-template-columns:1fr auto;}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".fjseox{display:none;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
   "w": [".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}", ".fjw5xc1:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}"],
   "m": [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
     "m": "screen and (prefers-reduced-motion: reduce)"
@@ -147,6 +173,14 @@ const useStyles = /*#__PURE__*/__styles({
     "m": "screen and (prefers-reduced-motion: reduce)"
   }], ["@media screen and (prefers-reduced-motion: reduce){.f1x58t8o:focus-within::after{transition-delay:0.01ms;}}", {
     "m": "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
+    "m": "(forced-colors: active)"
   }]],
   "h": [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".flmw63s:hover{border-bottom-color:var(--colorNeutralStrokeAccessible);}"],
   "a": [".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fqhmt4z:active{border-bottom-color:var(--colorNeutralStrokeAccessible);}"]
@@ -191,9 +225,15 @@ const useInputStyles = /*#__PURE__*/__styles({
     "z189sj": ["fhxju0i", "f1cnd47f"],
     "Byoj8tv": "f1qch9an",
     "uwmqm3": ["fnphzt9", "flt1dlf"]
+  },
+  "disabled": {
+    "sj55zd": "f1s2aq7o",
+    "De3pzq": "f1c21dwh",
+    "Bceei9c": "fdrzuqr",
+    "yvdlaj": "fahhnxm"
   }
 }, {
-  "d": [".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".f50nw0v{height:22px;}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1tvdnth{height:30px;}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f1ihhdec{height:38px;}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}"],
+  "d": [".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".f50nw0v{height:22px;}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1tvdnth{height:30px;}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f1ihhdec{height:38px;}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"],
   "f": [".ftqa4ok:focus{outline-style:none;}"]
 });
 
@@ -216,9 +256,12 @@ const useIconStyles = /*#__PURE__*/__styles({
   "large": {
     "Be2twd7": "f1rt2boy",
     "Frg6f3": ["f1t5qyk5", "f1ikr372"]
+  },
+  "disabled": {
+    "sj55zd": "f1s2aq7o"
   }
 }, {
-  "d": [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fvc9v3g svg{display:block;}", ".f4ybsrx{font-size:16px;}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}"]
+  "d": [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fvc9v3g svg{display:block;}", ".f4ybsrx{font-size:16px;}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"]
 });
 /**
  * Apply styling to the Combobox slots based on the state
@@ -232,18 +275,19 @@ export const useComboboxStyles_unstable = state => {
     size
   } = state;
   const invalid = `${state.input['aria-invalid']}` === 'true';
+  const disabled = state.input.disabled;
   const styles = useStyles();
   const iconStyles = useIconStyles();
   const inputStyles = useInputStyles();
-  state.root.className = mergeClasses(comboboxClassNames.root, styles.root, styles[appearance], styles[size], invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, state.root.className);
-  state.input.className = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], state.input.className);
+  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);
+  state.input.className = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
 
   if (state.listbox) {
     state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);
   }
 
   if (state.expandIcon) {
-    state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], state.expandIcon.className);
+    state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, state.expandIcon.className);
   }
 
   return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Combobox/useComboboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens } 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.border(tokens.strokeWidthThin, 'solid', 'transparent'),\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\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    '&: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  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\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\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    fontSize: tokens.fontSizeBase200,\n    height: fieldHeights.small,\n    lineHeight: tokens.lineHeightBase200,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`),\n  },\n  medium: {\n    fontSize: tokens.fontSizeBase300,\n    height: fieldHeights.medium,\n    lineHeight: tokens.lineHeightBase300,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`),\n  },\n  large: {\n    fontSize: tokens.fontSizeBase400,\n    height: fieldHeights.large,\n    lineHeight: tokens.lineHeightBase400,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`),\n  },\n});\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\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});\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 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    invalid && appearance !== 'underline' && styles.invalid,\n    invalid && appearance === 'underline' && styles.invalidUnderline,\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    comboboxClassNames.input,\n    inputStyles.input,\n    inputStyles[size],\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      state.expandIcon.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens } 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\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    fontSize: tokens.fontSizeBase200,\n    height: fieldHeights.small,\n    lineHeight: tokens.lineHeightBase200,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`),\n  },\n  medium: {\n    fontSize: tokens.fontSizeBase300,\n    height: fieldHeights.medium,\n    lineHeight: tokens.lineHeightBase300,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`),\n  },\n  large: {\n    fontSize: tokens.fontSizeBase400,\n    height: fieldHeights.large,\n    lineHeight: tokens.lineHeightBase400,\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    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  },\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"],"sourceRoot":"../src/"}

package/lib/components/ComboboxField/ComboboxField.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '@fluentui/react-field';
+import { Combobox } from '../../Combobox';
+export const comboboxFieldClassNames = /*#__PURE__*/getFieldClassNames('ComboboxField');
+export const ComboboxField = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useField_unstable(props, ref, {
+    component: Combobox,
+    classNames: comboboxFieldClassNames
+  });
+  useFieldStyles_unstable(state);
+  return renderField_unstable(state);
+});
+ComboboxField.displayName = 'ComboboxField';
+//# sourceMappingURL=ComboboxField.js.map