@fluentui/react-combobox 9.0.0-beta.13 → 9.0.0-beta.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/CHANGELOG.json +148 -7
  2. package/CHANGELOG.md +41 -8
  3. package/README.md +1 -1
  4. package/dist/index.d.ts +9 -0
  5. package/lib/ComboboxField.js +2 -0
  6. package/lib/ComboboxField.js.map +1 -0
  7. package/lib/components/Combobox/useComboboxStyles.js +65 -21
  8. package/lib/components/Combobox/useComboboxStyles.js.map +1 -1
  9. package/lib/components/ComboboxField/ComboboxField.js +14 -0
  10. package/lib/components/ComboboxField/ComboboxField.js.map +1 -0
  11. package/lib/components/ComboboxField/index.js +2 -0
  12. package/lib/components/ComboboxField/index.js.map +1 -0
  13. package/lib/components/Dropdown/useDropdownStyles.js +57 -19
  14. package/lib/components/Dropdown/useDropdownStyles.js.map +1 -1
  15. package/lib/index.js +1 -0
  16. package/lib/index.js.map +1 -1
  17. package/lib-commonjs/ComboboxField.js +10 -0
  18. package/lib-commonjs/ComboboxField.js.map +1 -0
  19. package/lib-commonjs/components/Combobox/useComboboxStyles.js +65 -21
  20. package/lib-commonjs/components/Combobox/useComboboxStyles.js.map +1 -1
  21. package/lib-commonjs/components/ComboboxField/ComboboxField.js +24 -0
  22. package/lib-commonjs/components/ComboboxField/ComboboxField.js.map +1 -0
  23. package/lib-commonjs/components/ComboboxField/index.js +10 -0
  24. package/lib-commonjs/components/ComboboxField/index.js.map +1 -0
  25. package/lib-commonjs/components/Dropdown/useDropdownStyles.js +57 -19
  26. package/lib-commonjs/components/Dropdown/useDropdownStyles.js.map +1 -1
  27. package/lib-commonjs/index.js +16 -1
  28. package/lib-commonjs/index.js.map +1 -1
  29. package/package.json +14 -12
package/CHANGELOG.json CHANGED
@@ -2,7 +2,148 @@
2
2
  "name": "@fluentui/react-combobox",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 20 Oct 2022 08:35:06 GMT",
5
+ "date": "Fri, 11 Nov 2022 14:53:45 GMT",
6
+ "tag": "@fluentui/react-combobox_v9.0.0-beta.15",
7
+ "version": "9.0.0-beta.15",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "behowell@microsoft.com",
12
+ "package": "@fluentui/react-combobox",
13
+ "commit": "39ba7b6d4648781b979fcf694579f97b851348af",
14
+ "comment": "chore: Move InputField into the @fluentui/react-input package and export as _unstable"
15
+ },
16
+ {
17
+ "author": "martinhochel@microsoft.com",
18
+ "package": "@fluentui/react-combobox",
19
+ "commit": "b3907043bd8d7b650c55e8e7c3119b14f2606c38",
20
+ "comment": "fix: create valid export maps"
21
+ },
22
+ {
23
+ "author": "sarah.higley@microsoft.com",
24
+ "package": "@fluentui/react-combobox",
25
+ "commit": "023737b640281434710caecc55270838895b50bc",
26
+ "comment": "fix: update disabled + underline styles, have all text-like form control disabled states match"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-combobox",
31
+ "comment": "Bump @fluentui/keyboard-keys to v9.0.1",
32
+ "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-combobox",
37
+ "comment": "Bump @fluentui/react-context-selector to v9.1.1",
38
+ "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
39
+ },
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui/react-combobox",
43
+ "comment": "Bump @fluentui/react-field to v9.0.0-alpha.8",
44
+ "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
45
+ },
46
+ {
47
+ "author": "beachball",
48
+ "package": "@fluentui/react-combobox",
49
+ "comment": "Bump @fluentui/react-portal to v9.0.10",
50
+ "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
51
+ },
52
+ {
53
+ "author": "beachball",
54
+ "package": "@fluentui/react-combobox",
55
+ "comment": "Bump @fluentui/react-positioning to v9.3.1",
56
+ "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
57
+ },
58
+ {
59
+ "author": "beachball",
60
+ "package": "@fluentui/react-combobox",
61
+ "comment": "Bump @fluentui/react-theme to v9.1.2",
62
+ "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
63
+ },
64
+ {
65
+ "author": "beachball",
66
+ "package": "@fluentui/react-combobox",
67
+ "comment": "Bump @fluentui/react-utilities to v9.2.1",
68
+ "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
69
+ },
70
+ {
71
+ "author": "beachball",
72
+ "package": "@fluentui/react-combobox",
73
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.18",
74
+ "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
75
+ }
76
+ ]
77
+ }
78
+ },
79
+ {
80
+ "date": "Wed, 02 Nov 2022 11:57:49 GMT",
81
+ "tag": "@fluentui/react-combobox_v9.0.0-beta.14",
82
+ "version": "9.0.0-beta.14",
83
+ "comments": {
84
+ "prerelease": [
85
+ {
86
+ "author": "olfedias@microsoft.com",
87
+ "package": "@fluentui/react-combobox",
88
+ "commit": "c619ba066f11a8654e95375314824ba6b81b003e",
89
+ "comment": "chore: Update Griffel to latest version"
90
+ },
91
+ {
92
+ "author": "beachball",
93
+ "package": "@fluentui/react-combobox",
94
+ "comment": "Bump @fluentui/react-context-selector to v9.1.0",
95
+ "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
96
+ },
97
+ {
98
+ "author": "beachball",
99
+ "package": "@fluentui/react-combobox",
100
+ "comment": "Bump @fluentui/react-portal to v9.0.9",
101
+ "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
102
+ },
103
+ {
104
+ "author": "beachball",
105
+ "package": "@fluentui/react-combobox",
106
+ "comment": "Bump @fluentui/react-positioning to v9.3.0",
107
+ "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
108
+ },
109
+ {
110
+ "author": "beachball",
111
+ "package": "@fluentui/react-combobox",
112
+ "comment": "Bump @fluentui/react-utilities to v9.2.0",
113
+ "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
114
+ },
115
+ {
116
+ "author": "beachball",
117
+ "package": "@fluentui/react-combobox",
118
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.17",
119
+ "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
120
+ }
121
+ ]
122
+ }
123
+ },
124
+ {
125
+ "date": "Tue, 25 Oct 2022 00:35:29 GMT",
126
+ "tag": "@fluentui/react-combobox_v9.0.0-beta.13",
127
+ "version": "9.0.0-beta.13",
128
+ "comments": {
129
+ "none": [
130
+ {
131
+ "author": "sarah.higley@microsoft.com",
132
+ "package": "@fluentui/react-combobox",
133
+ "commit": "d9dda6aafb1571b08e5cc0ba3437a24a20c694f6",
134
+ "comment": "feat: add full Dropdown component accessibility spec"
135
+ },
136
+ {
137
+ "author": "miroslav.stastny@microsoft.com",
138
+ "package": "@fluentui/react-combobox",
139
+ "commit": "6ced976a8d0e6a0e2e207da8fe0eb810e2bd19bc",
140
+ "comment": "Update package readme"
141
+ }
142
+ ]
143
+ }
144
+ },
145
+ {
146
+ "date": "Thu, 20 Oct 2022 08:39:30 GMT",
6
147
  "tag": "@fluentui/react-combobox_v9.0.0-beta.13",
7
148
  "version": "9.0.0-beta.13",
8
149
  "comments": {
@@ -29,37 +170,37 @@
29
170
  "author": "beachball",
30
171
  "package": "@fluentui/react-combobox",
31
172
  "comment": "Bump @fluentui/react-context-selector to v9.0.5",
32
- "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
173
+ "commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
33
174
  },
34
175
  {
35
176
  "author": "beachball",
36
177
  "package": "@fluentui/react-combobox",
37
178
  "comment": "Bump @fluentui/react-portal to v9.0.8",
38
- "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
179
+ "commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
39
180
  },
40
181
  {
41
182
  "author": "beachball",
42
183
  "package": "@fluentui/react-combobox",
43
184
  "comment": "Bump @fluentui/react-positioning to v9.2.2",
44
- "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
185
+ "commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
45
186
  },
46
187
  {
47
188
  "author": "beachball",
48
189
  "package": "@fluentui/react-combobox",
49
190
  "comment": "Bump @fluentui/react-theme to v9.1.1",
50
- "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
191
+ "commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
51
192
  },
52
193
  {
53
194
  "author": "beachball",
54
195
  "package": "@fluentui/react-combobox",
55
196
  "comment": "Bump @fluentui/react-utilities to v9.1.2",
56
- "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
197
+ "commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
57
198
  },
58
199
  {
59
200
  "author": "beachball",
60
201
  "package": "@fluentui/react-combobox",
61
202
  "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16",
62
- "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
203
+ "commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
63
204
  }
64
205
  ]
65
206
  }
package/CHANGELOG.md CHANGED
@@ -1,12 +1,45 @@
1
1
  # Change Log - @fluentui/react-combobox
2
2
 
3
- This log was last generated on Thu, 20 Oct 2022 08:35:06 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 11 Nov 2022 14:53:45 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-beta.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.0.0-beta.15)
8
+
9
+ Fri, 11 Nov 2022 14:53:45 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.0.0-beta.14..@fluentui/react-combobox_v9.0.0-beta.15)
11
+
12
+ ### Changes
13
+
14
+ - 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)
15
+ - fix: create valid export maps ([PR #25558](https://github.com/microsoft/fluentui/pull/25558) by martinhochel@microsoft.com)
16
+ - 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)
17
+ - Bump @fluentui/keyboard-keys to v9.0.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
18
+ - Bump @fluentui/react-context-selector to v9.1.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
19
+ - Bump @fluentui/react-field to v9.0.0-alpha.8 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
20
+ - Bump @fluentui/react-portal to v9.0.10 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
21
+ - Bump @fluentui/react-positioning to v9.3.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
22
+ - Bump @fluentui/react-theme to v9.1.2 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
23
+ - Bump @fluentui/react-utilities to v9.2.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
24
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.18 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
25
+
26
+ ## [9.0.0-beta.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.0.0-beta.14)
27
+
28
+ Wed, 02 Nov 2022 11:57:49 GMT
29
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.0.0-beta.13..@fluentui/react-combobox_v9.0.0-beta.14)
30
+
31
+ ### Changes
32
+
33
+ - chore: Update Griffel to latest version ([PR #25412](https://github.com/microsoft/fluentui/pull/25412) by olfedias@microsoft.com)
34
+ - Bump @fluentui/react-context-selector to v9.1.0 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
35
+ - Bump @fluentui/react-portal to v9.0.9 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
36
+ - Bump @fluentui/react-positioning to v9.3.0 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
37
+ - Bump @fluentui/react-utilities to v9.2.0 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
38
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.17 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
39
+
7
40
  ## [9.0.0-beta.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.0.0-beta.13)
8
41
 
9
- Thu, 20 Oct 2022 08:35:06 GMT
42
+ Thu, 20 Oct 2022 08:39:30 GMT
10
43
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.0.0-beta.12..@fluentui/react-combobox_v9.0.0-beta.13)
11
44
 
12
45
  ### Changes
@@ -14,12 +47,12 @@ Thu, 20 Oct 2022 08:35:06 GMT
14
47
  - chore: Update Griffel to latest version ([PR #25212](https://github.com/microsoft/fluentui/pull/25212) by olfedias@microsoft.com)
15
48
  - chore: Bump peer deps to support React 18 ([PR #24972](https://github.com/microsoft/fluentui/pull/24972) by mgodbolt@microsoft.com)
16
49
  - feat: Add red border when aria-invalid is set ([PR #25252](https://github.com/microsoft/fluentui/pull/25252) by behowell@microsoft.com)
17
- - Bump @fluentui/react-context-selector to v9.0.5 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
18
- - Bump @fluentui/react-portal to v9.0.8 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
19
- - Bump @fluentui/react-positioning to v9.2.2 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
20
- - Bump @fluentui/react-theme to v9.1.1 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
21
- - Bump @fluentui/react-utilities to v9.1.2 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
22
- - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
50
+ - Bump @fluentui/react-context-selector to v9.0.5 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
51
+ - Bump @fluentui/react-portal to v9.0.8 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
52
+ - Bump @fluentui/react-positioning to v9.2.2 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
53
+ - Bump @fluentui/react-theme to v9.1.1 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
54
+ - Bump @fluentui/react-utilities to v9.1.2 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
55
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
23
56
 
24
57
  ## [9.0.0-beta.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.0.0-beta.12)
25
58
 
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  # @fluentui/react-combobox
2
2
 
3
- **Combobox component for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
3
+ **Combobox component for [Fluent UI React](https://react.fluentui.dev)**
4
4
 
5
5
  These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
package/dist/index.d.ts CHANGED
@@ -3,6 +3,9 @@
3
3
  import type { ComponentProps } from '@fluentui/react-utilities';
4
4
  import type { ComponentState } from '@fluentui/react-utilities';
5
5
  import { FC } from 'react';
6
+ import { FieldControl } from '@fluentui/react-field';
7
+ import type { FieldProps } from '@fluentui/react-field';
8
+ import { FieldSlots } from '@fluentui/react-field';
6
9
  import type { ForwardRefComponent } from '@fluentui/react-utilities';
7
10
  import type { PositioningShorthand } from '@fluentui/react-positioning';
8
11
  import { Provider } from 'react';
@@ -108,6 +111,12 @@ export declare type ComboboxContextValue = Pick<ComboboxState, 'activeOption' |
108
111
 
109
112
  export declare type ComboboxContextValues = ComboboxBaseContextValues;
110
113
 
114
+ export declare const ComboboxField_unstable: ForwardRefComponent<ComboboxFieldProps_unstable>;
115
+
116
+ export declare const comboboxFieldClassNames: SlotClassNames<FieldSlots<FieldControl>>;
117
+
118
+ export declare type ComboboxFieldProps_unstable = FieldProps<typeof Combobox>;
119
+
111
120
  export declare type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;
112
121
 
113
122
  export declare type ComboboxOpenEvents = ComboboxBaseOpenEvents;
package/lib/ComboboxField.js ADDED
@@ -0,0 +1,2 @@
1
+ export * from './components/ComboboxField/index';
2
+ //# sourceMappingURL=ComboboxField.js.map
package/lib/ComboboxField.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ComboboxField.js","sourceRoot":"../src/","sources":["ComboboxField.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/ComboboxField/index';\n"]}
package/lib/components/Combobox/useComboboxStyles.js CHANGED
@@ -21,18 +21,6 @@ const fieldHeights = {
21
21
  const useStyles = /*#__PURE__*/__styles({
22
22
  "root": {
23
23
  "Bt984gj": "f122n59",
24
- "B4j52fo": "f192inf7",
25
- "Bekrc4i": ["f5tn483", "f1ojsxk5"],
26
- "Bn0qgzm": "f1vxd6vx",
27
- "ibv6hh": ["f1ojsxk5", "f5tn483"],
28
- "icvyot": "fzkkow9",
29
- "vrafjx": ["fcdblym", "fjik90z"],
30
- "oivjwe": "fg706s2",
31
- "wvpqe5": ["fjik90z", "fcdblym"],
32
- "g2u3we": "f1p3nwhy",
33
- "h3c5rm": ["f11589ue", "f1pdflbu"],
34
- "B9xav0g": "f1q5o8ev",
35
- "zhjwy3": ["f1pdflbu", "f11589ue"],
36
24
  "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
37
25
  "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
38
26
  "B7oj6ja": ["f1jar5jt", "fyu767a"],
@@ -101,7 +89,9 @@ const useStyles = /*#__PURE__*/__styles({
101
89
  "g2u3we": "fj3muxo",
102
90
  "h3c5rm": ["f1akhkt", "f1lxtadh"],
103
91
  "B9xav0g": "f1c1zstj",
104
- "zhjwy3": ["f1lxtadh", "f1akhkt"],
92
+ "zhjwy3": ["f1lxtadh", "f1akhkt"]
93
+ },
94
+ "outlineInteractive": {
105
95
  "Bgoe8wy": "fvcxoqz",
106
96
  "Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
107
97
  "oetu4i": "flmw63s",
@@ -122,10 +112,34 @@ const useStyles = /*#__PURE__*/__styles({
122
112
  "Btl43ni": ["f1ozlkrg", "f10ostut"]
123
113
  },
124
114
  "filled-lighter": {
125
- "De3pzq": "fxugw4r"
115
+ "De3pzq": "fxugw4r",
116
+ "B4j52fo": "f192inf7",
117
+ "Bekrc4i": ["f5tn483", "f1ojsxk5"],
118
+ "Bn0qgzm": "f1vxd6vx",
119
+ "ibv6hh": ["f1ojsxk5", "f5tn483"],
120
+ "icvyot": "fzkkow9",
121
+ "vrafjx": ["fcdblym", "fjik90z"],
122
+ "oivjwe": "fg706s2",
123
+ "wvpqe5": ["fjik90z", "fcdblym"],
124
+ "g2u3we": "fghlq4f",
125
+ "h3c5rm": ["f1gn591s", "fjscplz"],
126
+ "B9xav0g": "fb073pr",
127
+ "zhjwy3": ["fjscplz", "f1gn591s"]
126
128
  },
127
129
  "filled-darker": {
128
- "De3pzq": "f16xq7d1"
130
+ "De3pzq": "f16xq7d1",
131
+ "B4j52fo": "f192inf7",
132
+ "Bekrc4i": ["f5tn483", "f1ojsxk5"],
133
+ "Bn0qgzm": "f1vxd6vx",
134
+ "ibv6hh": ["f1ojsxk5", "f5tn483"],
135
+ "icvyot": "fzkkow9",
136
+ "vrafjx": ["fcdblym", "fjik90z"],
137
+ "oivjwe": "fg706s2",
138
+ "wvpqe5": ["fjik90z", "fcdblym"],
139
+ "g2u3we": "fghlq4f",
140
+ "h3c5rm": ["f1gn591s", "fjscplz"],
141
+ "B9xav0g": "fb073pr",
142
+ "zhjwy3": ["fjscplz", "f1gn591s"]
129
143
  },
130
144
  "invalid": {
131
145
  "tvckwq": "fs4k3qj",
@@ -135,9 +149,21 @@ const useStyles = /*#__PURE__*/__styles({
135
149
  },
136
150
  "invalidUnderline": {
137
151
  "hhx65j": "f1fgmyf4"
152
+ },
153
+ "disabled": {
154
+ "Bceei9c": "fdrzuqr",
155
+ "De3pzq": "f1c21dwh",
156
+ "g2u3we": "f1jj8ep1",
157
+ "h3c5rm": ["f15xbau", "fy0fskl"],
158
+ "B9xav0g": "f4ikngz",
159
+ "zhjwy3": ["fy0fskl", "f15xbau"],
160
+ "Bjwas2f": "fg455y9",
161
+ "Bn1d65q": ["f1rvyvqg", "f14g86mu"],
162
+ "Bxeuatn": "f1cwzwz",
163
+ "n51gp8": ["f14g86mu", "f1rvyvqg"]
138
164
  }
139
165
  }, {
140
- "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);}"],
166
+ "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);}"],
141
167
  "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);}"],
142
168
  "m": [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
143
169
  "m": "screen and (prefers-reduced-motion: reduce)"
@@ -147,6 +173,14 @@ const useStyles = /*#__PURE__*/__styles({
147
173
  "m": "screen and (prefers-reduced-motion: reduce)"
148
174
  }], ["@media screen and (prefers-reduced-motion: reduce){.f1x58t8o:focus-within::after{transition-delay:0.01ms;}}", {
149
175
  "m": "screen and (prefers-reduced-motion: reduce)"
176
+ }], ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
177
+ "m": "(forced-colors: active)"
178
+ }], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
179
+ "m": "(forced-colors: active)"
180
+ }], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
181
+ "m": "(forced-colors: active)"
182
+ }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
183
+ "m": "(forced-colors: active)"
150
184
  }]],
151
185
  "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);}"],
152
186
  "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({
191
225
  "z189sj": ["fhxju0i", "f1cnd47f"],
192
226
  "Byoj8tv": "f1qch9an",
193
227
  "uwmqm3": ["fnphzt9", "flt1dlf"]
228
+ },
229
+ "disabled": {
230
+ "sj55zd": "f1s2aq7o",
231
+ "De3pzq": "f1c21dwh",
232
+ "Bceei9c": "fdrzuqr",
233
+ "yvdlaj": "fahhnxm"
194
234
  }
195
235
  }, {
196
- "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));}"],
236
+ "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);}"],
197
237
  "f": [".ftqa4ok:focus{outline-style:none;}"]
198
238
  });
199
239
 
@@ -216,9 +256,12 @@ const useIconStyles = /*#__PURE__*/__styles({
216
256
  "large": {
217
257
  "Be2twd7": "f1rt2boy",
218
258
  "Frg6f3": ["f1t5qyk5", "f1ikr372"]
259
+ },
260
+ "disabled": {
261
+ "sj55zd": "f1s2aq7o"
219
262
  }
220
263
  }, {
221
- "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);}"]
264
+ "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);}"]
222
265
  });
223
266
  /**
224
267
  * Apply styling to the Combobox slots based on the state
@@ -232,18 +275,19 @@ export const useComboboxStyles_unstable = state => {
232
275
  size
233
276
  } = state;
234
277
  const invalid = `${state.input['aria-invalid']}` === 'true';
278
+ const disabled = state.input.disabled;
235
279
  const styles = useStyles();
236
280
  const iconStyles = useIconStyles();
237
281
  const inputStyles = useInputStyles();
238
- 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);
239
- state.input.className = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], state.input.className);
282
+ 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);
283
+ state.input.className = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
240
284
 
241
285
  if (state.listbox) {
242
286
  state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);
243
287
  }
244
288
 
245
289
  if (state.expandIcon) {
246
- state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], state.expandIcon.className);
290
+ state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, state.expandIcon.className);
247
291
  }
248
292
 
249
293
  return state;
package/lib/components/Combobox/useComboboxStyles.js.map CHANGED
@@ -1 +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/"}
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.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 ADDED
@@ -0,0 +1,14 @@
1
+ import * as React from 'react';
2
+ import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '@fluentui/react-field';
3
+ import { Combobox } from '../../Combobox';
4
+ export const comboboxFieldClassNames = /*#__PURE__*/getFieldClassNames('ComboboxField');
5
+ export const ComboboxField = /*#__PURE__*/React.forwardRef((props, ref) => {
6
+ const state = useField_unstable(props, ref, {
7
+ component: Combobox,
8
+ classNames: comboboxFieldClassNames
9
+ });
10
+ useFieldStyles_unstable(state);
11
+ return renderField_unstable(state);
12
+ });
13
+ ComboboxField.displayName = 'ComboboxField';
14
+ //# sourceMappingURL=ComboboxField.js.map
package/lib/components/ComboboxField/ComboboxField.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["components/ComboboxField/ComboboxField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SACE,kBADF,EAEE,oBAFF,EAGE,uBAHF,EAIE,iBAJF,QAKO,uBALP;AAOA,SAAS,QAAT,QAAyB,gBAAzB;AAIA,OAAO,MAAM,uBAAuB,gBAAG,kBAAkB,CAAC,eAAD,CAAlD;AAEP,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAAE,SAAS,EAAE,QAAb;IAAuB,UAAU,EAAE;EAAnC,CAAb,CAA/B;EACA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CAJqE,CAA/D;AAMP,aAAa,CAAC,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n getFieldClassNames,\n renderField_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Combobox } from '../../Combobox';\n\nexport type ComboboxFieldProps = FieldProps<typeof Combobox>;\n\nexport const comboboxFieldClassNames = getFieldClassNames('ComboboxField');\n\nexport const ComboboxField: ForwardRefComponent<ComboboxFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, { component: Combobox, classNames: comboboxFieldClassNames });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nComboboxField.displayName = 'ComboboxField';\n"],"sourceRoot":"../src/"}
package/lib/components/ComboboxField/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export * from './ComboboxField';
2
+ //# sourceMappingURL=index.js.map
package/lib/components/ComboboxField/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/ComboboxField/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './ComboboxField';\n"]}