@fluentui/react-select 9.0.0-beta.1 → 9.0.0-beta.10

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 (21) hide show
  1. package/CHANGELOG.json +298 -1
  2. package/CHANGELOG.md +106 -2
  3. package/Spec.md +3 -8
  4. package/dist/index.d.ts +16 -7
  5. package/lib/components/Select/Select.js.map +1 -1
  6. package/lib/components/Select/Select.types.js.map +1 -1
  7. package/lib/components/Select/renderSelect.js.map +1 -1
  8. package/lib/components/Select/useSelect.js +15 -6
  9. package/lib/components/Select/useSelect.js.map +1 -1
  10. package/lib/components/Select/useSelectStyles.js +71 -26
  11. package/lib/components/Select/useSelectStyles.js.map +1 -1
  12. package/lib/index.js.map +1 -1
  13. package/lib-commonjs/components/Select/Select.js.map +1 -1
  14. package/lib-commonjs/components/Select/renderSelect.js.map +1 -1
  15. package/lib-commonjs/components/Select/useSelect.js +14 -5
  16. package/lib-commonjs/components/Select/useSelect.js.map +1 -1
  17. package/lib-commonjs/components/Select/useSelectStyles.js +71 -26
  18. package/lib-commonjs/components/Select/useSelectStyles.js.map +1 -1
  19. package/lib-commonjs/index.js.map +1 -1
  20. package/package.json +8 -8
  21. package/dist/tsdoc-metadata.json +0 -11
package/CHANGELOG.json CHANGED
@@ -2,7 +2,304 @@
2
2
  "name": "@fluentui/react-select",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 26 May 2022 21:00:04 GMT",
5
+ "date": "Tue, 20 Sep 2022 20:54:08 GMT",
6
+ "tag": "@fluentui/react-select_v9.0.0-beta.10",
7
+ "version": "9.0.0-beta.10",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "beachball",
12
+ "package": "@fluentui/react-select",
13
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14",
14
+ "commit": "9617a5a46ef4c5e310a066a5374ff2ed61db3c66"
15
+ }
16
+ ]
17
+ }
18
+ },
19
+ {
20
+ "date": "Thu, 15 Sep 2022 09:49:20 GMT",
21
+ "tag": "@fluentui/react-select_v9.0.0-beta.9",
22
+ "version": "9.0.0-beta.9",
23
+ "comments": {
24
+ "none": [
25
+ {
26
+ "author": "martinhochel@microsoft.com",
27
+ "package": "@fluentui/react-select",
28
+ "commit": "e6cf183695d6d67a24e038c49a876224e5ed35e5",
29
+ "comment": "chore: update package scaffold"
30
+ }
31
+ ],
32
+ "prerelease": [
33
+ {
34
+ "author": "olfedias@microsoft.com",
35
+ "package": "@fluentui/react-select",
36
+ "commit": "e610024474cfe5d45f61501a8b6a21daf4c794a2",
37
+ "comment": "chore: Update Griffel to latest version"
38
+ },
39
+ {
40
+ "author": "beachball",
41
+ "package": "@fluentui/react-select",
42
+ "comment": "Bump @fluentui/react-theme to v9.1.0",
43
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
44
+ },
45
+ {
46
+ "author": "beachball",
47
+ "package": "@fluentui/react-select",
48
+ "comment": "Bump @fluentui/react-utilities to v9.1.0",
49
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
50
+ },
51
+ {
52
+ "author": "beachball",
53
+ "package": "@fluentui/react-select",
54
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13",
55
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
56
+ }
57
+ ]
58
+ }
59
+ },
60
+ {
61
+ "date": "Wed, 03 Aug 2022 16:03:58 GMT",
62
+ "tag": "@fluentui/react-select_v9.0.0-beta.8",
63
+ "version": "9.0.0-beta.8",
64
+ "comments": {
65
+ "prerelease": [
66
+ {
67
+ "author": "sarah.higley@microsoft.com",
68
+ "package": "@fluentui/react-select",
69
+ "commit": "c66808887bcd7fd150c22eda462b325075742694",
70
+ "comment": "bugfix: add reduced motion styles for avatar, spinner, switch, and input focus styles"
71
+ },
72
+ {
73
+ "author": "miroslav.stastny@microsoft.com",
74
+ "package": "@fluentui/react-select",
75
+ "commit": "08563664778fd80284561d3c9d254307a0a32362",
76
+ "comment": "chore: Bump Griffel dependencies"
77
+ },
78
+ {
79
+ "author": "beachball",
80
+ "package": "@fluentui/react-select",
81
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
82
+ "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
83
+ }
84
+ ],
85
+ "none": [
86
+ {
87
+ "author": "popatudor@microsoft.com",
88
+ "package": "@fluentui/react-select",
89
+ "commit": "16c5ea573489dfd05921c6569dc3ac6c8da38a66",
90
+ "comment": "fix(docs): add Select usage warning and style best practices"
91
+ }
92
+ ]
93
+ }
94
+ },
95
+ {
96
+ "date": "Thu, 14 Jul 2022 21:21:03 GMT",
97
+ "tag": "@fluentui/react-select_v9.0.0-beta.7",
98
+ "version": "9.0.0-beta.7",
99
+ "comments": {
100
+ "prerelease": [
101
+ {
102
+ "author": "Humberto.Morimoto@microsoft.com",
103
+ "package": "@fluentui/react-select",
104
+ "commit": "802bc4e3730a88b0fc61b5bf42ef7fc6b6543fe2",
105
+ "comment": "fix: Fixing bad version bump of @fluentui/react-utilities."
106
+ },
107
+ {
108
+ "author": "beachball",
109
+ "package": "@fluentui/react-select",
110
+ "comment": "Bump @fluentui/react-utilities to v9.0.2",
111
+ "commit": "79b513146194367544160f364b0a7dd749ed93e4"
112
+ }
113
+ ]
114
+ }
115
+ },
116
+ {
117
+ "date": "Thu, 14 Jul 2022 17:06:21 GMT",
118
+ "tag": "@fluentui/react-select_v9.0.0-beta.6",
119
+ "version": "9.0.0-beta.6",
120
+ "comments": {
121
+ "prerelease": [
122
+ {
123
+ "author": "ololubek@microsoft.com",
124
+ "package": "@fluentui/react-select",
125
+ "commit": "63ab03fa7a9b3d02204147ea5356b8f78751df42",
126
+ "comment": "chore: Update @fluentui/react-icons dependency to v2.0.175"
127
+ },
128
+ {
129
+ "author": "beachball",
130
+ "package": "@fluentui/react-select",
131
+ "comment": "Bump @fluentui/react-utilities to v9.0.1-0",
132
+ "commit": "35237381e941c8935b1892c9217096cea3e5601f"
133
+ },
134
+ {
135
+ "author": "beachball",
136
+ "package": "@fluentui/react-select",
137
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11",
138
+ "commit": "35237381e941c8935b1892c9217096cea3e5601f"
139
+ }
140
+ ]
141
+ }
142
+ },
143
+ {
144
+ "date": "Tue, 28 Jun 2022 17:39:51 GMT",
145
+ "tag": "@fluentui/react-select_v9.0.0-beta.5",
146
+ "version": "9.0.0-beta.5",
147
+ "comments": {
148
+ "prerelease": [
149
+ {
150
+ "author": "lingfangao@hotmail.com",
151
+ "package": "@fluentui/react-select",
152
+ "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b",
153
+ "comment": "fix: Use caret dependency range for Griffel"
154
+ },
155
+ {
156
+ "author": "beachball",
157
+ "package": "@fluentui/react-select",
158
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10",
159
+ "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
160
+ }
161
+ ]
162
+ }
163
+ },
164
+ {
165
+ "date": "Tue, 28 Jun 2022 15:13:55 GMT",
166
+ "tag": "@fluentui/react-select_v9.0.0-beta.4",
167
+ "version": "9.0.0-beta.4",
168
+ "comments": {
169
+ "prerelease": [
170
+ {
171
+ "author": "lingfangao@hotmail.com",
172
+ "package": "@fluentui/react-select",
173
+ "commit": "e0aabd850b15adf9c151ebd4e332f7c50ad6cfdf",
174
+ "comment": "Update 9.0.0-rc dependencies to use caret range"
175
+ },
176
+ {
177
+ "author": "sarah.higley@microsoft.com",
178
+ "package": "@fluentui/react-select",
179
+ "commit": "81a5050ea49ca9dfe6eff602d3e680901ce39254",
180
+ "comment": "export change data type from select"
181
+ },
182
+ {
183
+ "author": "olfedias@microsoft.com",
184
+ "package": "@fluentui/react-select",
185
+ "commit": "aa6ff59c3664e5e29402debcc1a4d4a65a8e65c1",
186
+ "comment": "fix: handle \"defaultValue\""
187
+ },
188
+ {
189
+ "author": "lingfangao@hotmail.com",
190
+ "package": "@fluentui/react-select",
191
+ "commit": "675acea49c97f10837ddee9b8c4350ca27750125",
192
+ "comment": "Bump Griffel dependencies"
193
+ },
194
+ {
195
+ "author": "olfedias@microsoft.com",
196
+ "package": "@fluentui/react-select",
197
+ "commit": "82bd30dd41ad58df1f325e9b721200ed15d674a2",
198
+ "comment": "chore: Update @fluentui/react-icons to latest version"
199
+ },
200
+ {
201
+ "author": "Humberto.Morimoto@microsoft.com",
202
+ "package": "@fluentui/react-select",
203
+ "commit": "09f58dcbef2306875046261dc0b7821283ccc287",
204
+ "comment": "chore: Using ::before and ::after instead of :before and :after."
205
+ },
206
+ {
207
+ "author": "sarah.higley@microsoft.com",
208
+ "package": "@fluentui/react-select",
209
+ "commit": "66dc6e9684baf35e7930622e1f3accdb51ba8516",
210
+ "comment": "add custom onChange with value data to react-select"
211
+ },
212
+ {
213
+ "author": "sarah.higley@microsoft.com",
214
+ "package": "@fluentui/react-select",
215
+ "commit": "0d4794d3924d648c788993e087a48dd45fe10a1b",
216
+ "comment": "Remove inline prop from Select"
217
+ },
218
+ {
219
+ "author": "beachball",
220
+ "package": "@fluentui/react-select",
221
+ "comment": "Bump @fluentui/react-theme to v9.0.0",
222
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
223
+ },
224
+ {
225
+ "author": "beachball",
226
+ "package": "@fluentui/react-select",
227
+ "comment": "Bump @fluentui/react-utilities to v9.0.0",
228
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
229
+ },
230
+ {
231
+ "author": "beachball",
232
+ "package": "@fluentui/react-select",
233
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9",
234
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
235
+ }
236
+ ],
237
+ "none": [
238
+ {
239
+ "author": "mgodbolt@microsoft.com",
240
+ "package": "@fluentui/react-select",
241
+ "commit": "e4c4cd20632f733df2985f5a68033181ccc031c4",
242
+ "comment": "chore: update select stories to use index based approach"
243
+ }
244
+ ]
245
+ }
246
+ },
247
+ {
248
+ "date": "Thu, 23 Jun 2022 14:25:31 GMT",
249
+ "tag": "@fluentui/react-select_v9.0.0-beta.3",
250
+ "version": "9.0.0-beta.3",
251
+ "comments": {
252
+ "prerelease": [
253
+ {
254
+ "author": "beachball",
255
+ "package": "@fluentui/react-select",
256
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.10",
257
+ "commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
258
+ }
259
+ ]
260
+ }
261
+ },
262
+ {
263
+ "date": "Tue, 31 May 2022 21:28:44 GMT",
264
+ "tag": "@fluentui/react-select_v9.0.0-beta.2",
265
+ "version": "9.0.0-beta.2",
266
+ "comments": {
267
+ "prerelease": [
268
+ {
269
+ "author": "sarah.higley@microsoft.com",
270
+ "package": "@fluentui/react-select",
271
+ "commit": "969708ea8759adeceb51f3d60a401989ceb2a9b4",
272
+ "comment": "update disabled select style"
273
+ },
274
+ {
275
+ "author": "olfedias@microsoft.com",
276
+ "package": "@fluentui/react-select",
277
+ "commit": "0a5e9fa77a72eecafdd07034ccdc0b95fd49877c",
278
+ "comment": "chore: Update Griffel to latest version"
279
+ },
280
+ {
281
+ "author": "tristan.watanabe@gmail.com",
282
+ "package": "@fluentui/react-select",
283
+ "commit": "45f628f2adb838d206f374887217ea8fc8e0e433",
284
+ "comment": "Remove usage of focus-visible pseudo-class."
285
+ },
286
+ {
287
+ "author": "beachball",
288
+ "package": "@fluentui/react-select",
289
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.10",
290
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
291
+ },
292
+ {
293
+ "author": "beachball",
294
+ "package": "@fluentui/react-select",
295
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8",
296
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
297
+ }
298
+ ]
299
+ }
300
+ },
301
+ {
302
+ "date": "Thu, 26 May 2022 21:01:28 GMT",
6
303
  "tag": "@fluentui/react-select_v9.0.0-beta.1",
7
304
  "version": "9.0.0-beta.1",
8
305
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,116 @@
1
1
  # Change Log - @fluentui/react-select
2
2
 
3
- This log was last generated on Thu, 26 May 2022 21:00:04 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 20 Sep 2022 20:54:08 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-beta.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.10)
8
+
9
+ Tue, 20 Sep 2022 20:54:08 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.9..@fluentui/react-select_v9.0.0-beta.10)
11
+
12
+ ### Changes
13
+
14
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14 ([PR #24870](https://github.com/microsoft/fluentui/pull/24870) by beachball)
15
+
16
+ ## [9.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.9)
17
+
18
+ Thu, 15 Sep 2022 09:49:20 GMT
19
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.8..@fluentui/react-select_v9.0.0-beta.9)
20
+
21
+ ### Changes
22
+
23
+ - chore: Update Griffel to latest version ([PR #24221](https://github.com/microsoft/fluentui/pull/24221) by olfedias@microsoft.com)
24
+ - Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
25
+ - Bump @fluentui/react-utilities to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
26
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
27
+
28
+ ## [9.0.0-beta.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.8)
29
+
30
+ Wed, 03 Aug 2022 16:03:58 GMT
31
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.7..@fluentui/react-select_v9.0.0-beta.8)
32
+
33
+ ### Changes
34
+
35
+ - bugfix: add reduced motion styles for avatar, spinner, switch, and input focus styles ([PR #23788](https://github.com/microsoft/fluentui/pull/23788) by sarah.higley@microsoft.com)
36
+ - chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
37
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
38
+
39
+ ## [9.0.0-beta.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.7)
40
+
41
+ Thu, 14 Jul 2022 21:21:03 GMT
42
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.6..@fluentui/react-select_v9.0.0-beta.7)
43
+
44
+ ### Changes
45
+
46
+ - fix: Fixing bad version bump of @fluentui/react-utilities. ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by Humberto.Morimoto@microsoft.com)
47
+ - Bump @fluentui/react-utilities to v9.0.2 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
48
+
49
+ ## [9.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.6)
50
+
51
+ Thu, 14 Jul 2022 17:06:21 GMT
52
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.5..@fluentui/react-select_v9.0.0-beta.6)
53
+
54
+ ### Changes
55
+
56
+ - chore: Update @fluentui/react-icons dependency to v2.0.175 ([PR #23812](https://github.com/microsoft/fluentui/pull/23812) by ololubek@microsoft.com)
57
+ - Bump @fluentui/react-utilities to v9.0.1-0 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
58
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
59
+
60
+ ## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.5)
61
+
62
+ Tue, 28 Jun 2022 17:39:51 GMT
63
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.4..@fluentui/react-select_v9.0.0-beta.5)
64
+
65
+ ### Changes
66
+
67
+ - fix: Use caret dependency range for Griffel ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by lingfangao@hotmail.com)
68
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
69
+
70
+ ## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.4)
71
+
72
+ Tue, 28 Jun 2022 15:13:55 GMT
73
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.3..@fluentui/react-select_v9.0.0-beta.4)
74
+
75
+ ### Changes
76
+
77
+ - Update 9.0.0-rc dependencies to use caret range ([PR #23732](https://github.com/microsoft/fluentui/pull/23732) by lingfangao@hotmail.com)
78
+ - export change data type from select ([PR #23701](https://github.com/microsoft/fluentui/pull/23701) by sarah.higley@microsoft.com)
79
+ - fix: handle "defaultValue" ([PR #23463](https://github.com/microsoft/fluentui/pull/23463) by olfedias@microsoft.com)
80
+ - Bump Griffel dependencies ([PR #23688](https://github.com/microsoft/fluentui/pull/23688) by lingfangao@hotmail.com)
81
+ - chore: Update @fluentui/react-icons to latest version ([PR #23459](https://github.com/microsoft/fluentui/pull/23459) by olfedias@microsoft.com)
82
+ - chore: Using ::before and ::after instead of :before and :after. ([PR #23469](https://github.com/microsoft/fluentui/pull/23469) by Humberto.Morimoto@microsoft.com)
83
+ - add custom onChange with value data to react-select ([PR #23399](https://github.com/microsoft/fluentui/pull/23399) by sarah.higley@microsoft.com)
84
+ - Remove inline prop from Select ([PR #23416](https://github.com/microsoft/fluentui/pull/23416) by sarah.higley@microsoft.com)
85
+ - Bump @fluentui/react-theme to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
86
+ - Bump @fluentui/react-utilities to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
87
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
88
+
89
+ ## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.3)
90
+
91
+ Thu, 23 Jun 2022 14:25:31 GMT
92
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.2..@fluentui/react-select_v9.0.0-beta.3)
93
+
94
+ ### Changes
95
+
96
+ - Bump @fluentui/react-theme to v9.0.0-rc.10 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
97
+
98
+ ## [9.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.2)
99
+
100
+ Tue, 31 May 2022 21:28:44 GMT
101
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.1..@fluentui/react-select_v9.0.0-beta.2)
102
+
103
+ ### Changes
104
+
105
+ - update disabled select style ([PR #23265](https://github.com/microsoft/fluentui/pull/23265) by sarah.higley@microsoft.com)
106
+ - chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
107
+ - Remove usage of focus-visible pseudo-class. ([PR #23282](https://github.com/microsoft/fluentui/pull/23282) by tristan.watanabe@gmail.com)
108
+ - Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
109
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
110
+
7
111
  ## [9.0.0-beta.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.1)
8
112
 
9
- Thu, 26 May 2022 21:00:04 GMT
113
+ Thu, 26 May 2022 21:01:28 GMT
10
114
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.0..@fluentui/react-select_v9.0.0-beta.1)
11
115
 
12
116
  ### Changes
package/Spec.md CHANGED
@@ -81,11 +81,11 @@ Select with grouped options:
81
81
  </Select>
82
82
  ```
83
83
 
84
- Inline Select with appearance and size set:
84
+ Select with appearance and size set:
85
85
 
86
86
  ```tsx
87
87
  <label htmlFor="selectID">Choose a color</label>
88
- <Select id="selectID" appearance="filledDarker" size="small" inline>
88
+ <Select id="selectID" appearance="filledDarker" size="small">
89
89
  <option>Red</option>
90
90
  <option>Green</option>
91
91
  <option>Blue</option>
@@ -105,11 +105,6 @@ Disabled Select with second option selected:
105
105
 
106
106
  ## Variants
107
107
 
108
- ### Layout
109
-
110
- - Block (default)
111
- - Inline
112
-
113
108
  ### Size
114
109
 
115
110
  - Small
@@ -219,7 +214,7 @@ The Select component is a new approach that was not present in `@fluentui/react`
219
214
  | n/a | headerMessage | optgroup child with `name` |
220
215
  | n/a | highlightFirstItemOnOpen | n/a |
221
216
  | n/a | highlightedIndex | n/a |
222
- | n/a | inline | inline |
217
+ | n/a | inline | use custom styles |
223
218
  | n/a | inverted | n/a |
224
219
  | n/a | loading | n/a |
225
220
  | n/a | noResultsMessage | use children |
package/dist/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
+ /// <reference types="react" />
2
+
1
3
  import type { ComponentProps } from '@fluentui/react-utilities';
2
4
  import type { ComponentState } from '@fluentui/react-utilities';
3
5
  import type { ForwardRefComponent } from '@fluentui/react-utilities';
@@ -17,7 +19,17 @@ export declare const Select: ForwardRefComponent<SelectProps>;
17
19
 
18
20
  export declare const selectClassNames: SlotClassNames<SelectSlots>;
19
21
 
20
- export declare type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size'> & {
22
+ /**
23
+ * Data passed to the `onChange` callback when a new option is selected.
24
+ */
25
+ export declare type SelectOnChangeData = {
26
+ /**
27
+ * Updated `<select>` value, taken from either the selected option's value prop or inner text.
28
+ */
29
+ value: string;
30
+ };
31
+
32
+ export declare type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size' | 'onChange'> & {
21
33
  /**
22
34
  * Controls the colors and borders of the Select.
23
35
  *
@@ -25,12 +37,9 @@ export declare type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'sel
25
37
  */
26
38
  appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';
27
39
  /**
28
- * If true, the Select will have an inline `display`, allowing it to be inline with other content.
29
- * By default, Select has block layout.
30
- *
31
- * @default false
40
+ * Called when the user changes the select element's value by selecting an option.
32
41
  */
33
- inline?: boolean;
42
+ onChange?: (ev: React_2.ChangeEvent<HTMLSelectElement>, data: SelectOnChangeData) => void;
34
43
  /**
35
44
  * Matches the Input sizes
36
45
  *
@@ -47,7 +56,7 @@ export declare type SelectSlots = {
47
56
  icon: Slot<'span'>;
48
57
  };
49
58
 
50
- export declare type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'inline' | 'size'>>;
59
+ export declare type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'size'>>;
51
60
 
52
61
  /**
53
62
  * Create the state required to render Select.
package/lib/components/Select/Select.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AAIA;;AAEG;;AACH,OAAO,MAAM,MAAM,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAhC;AAEA,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AACA,SAAO,qBAAqB,CAAC,KAAD,CAA5B;AACD,CALuD,CAAjD;AAOP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useSelect_unstable } from './useSelect';\nimport { renderSelect_unstable } from './renderSelect';\nimport { useSelectStyles_unstable } from './useSelectStyles';\nimport type { SelectProps } from './Select.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Select component\n */\nexport const Select: ForwardRefComponent<SelectProps> = React.forwardRef((props, ref) => {\n const state = useSelect_unstable(props, ref);\n\n useSelectStyles_unstable(state);\n return renderSelect_unstable(state);\n});\n\nSelect.displayName = 'Select';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AAIA;;AAEG;;AACH,OAAO,MAAM,MAAM,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtF,MAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAhC;EAEA,wBAAwB,CAAC,KAAD,CAAxB;EACA,OAAO,qBAAqB,CAAC,KAAD,CAA5B;AACD,CALuD,CAAjD;AAOP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useSelect_unstable } from './useSelect';\nimport { renderSelect_unstable } from './renderSelect';\nimport { useSelectStyles_unstable } from './useSelectStyles';\nimport type { SelectProps } from './Select.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Select component\n */\nexport const Select: ForwardRefComponent<SelectProps> = React.forwardRef((props, ref) => {\n const state = useSelect_unstable(props, ref);\n\n useSelectStyles_unstable(state);\n return renderSelect_unstable(state);\n});\n\nSelect.displayName = 'Select';\n"],"sourceRoot":"../src/"}
package/lib/components/Select/Select.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Select.types.js","sourceRoot":"../src/","sources":["components/Select/Select.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SelectSlots = {\n /*\n * Wrapper for both the select and icon, renders as a `<span>`.\n * The `className` and `style` props on `<Select>` are applied to this slot;\n * All other top-level props are applied to the primary slot, `select`.\n */\n root: NonNullable<Slot<'span'>>;\n\n /** Primary slot: the actual `<select>` element */\n select: NonNullable<Slot<'select'>>;\n\n /** the icon, typically a down arrow */\n icon: Slot<'span'>;\n};\n\nexport type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size'> & {\n /**\n * Controls the colors and borders of the Select.\n *\n * @default 'outline'\n */\n appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';\n\n /**\n * If true, the Select will have an inline `display`, allowing it to be inline with other content.\n * By default, Select has block layout.\n *\n * @default false\n */\n inline?: boolean;\n\n /**\n * Matches the Input sizes\n *\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n};\n\nexport type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'inline' | 'size'>>;\n"]}
1
+ {"version":3,"file":"Select.types.js","sourceRoot":"../src/","sources":["components/Select/Select.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SelectSlots = {\n /*\n * Wrapper for both the select and icon, renders as a `<span>`.\n * The `className` and `style` props on `<Select>` are applied to this slot;\n * All other top-level props are applied to the primary slot, `select`.\n */\n root: NonNullable<Slot<'span'>>;\n\n /** Primary slot: the actual `<select>` element */\n select: NonNullable<Slot<'select'>>;\n\n /** the icon, typically a down arrow */\n icon: Slot<'span'>;\n};\n\nexport type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size' | 'onChange'> & {\n /**\n * Controls the colors and borders of the Select.\n *\n * @default 'outline'\n */\n appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';\n\n /**\n * Called when the user changes the select element's value by selecting an option.\n */\n onChange?: (ev: React.ChangeEvent<HTMLSelectElement>, data: SelectOnChangeData) => void;\n\n /**\n * Matches the Input sizes\n *\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n};\n\nexport type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'size'>>;\n\n/**\n * Data passed to the `onChange` callback when a new option is selected.\n */\nexport type SelectOnChangeData = {\n /**\n * Updated `<select>` value, taken from either the selected option's value prop or inner text.\n */\n value: string;\n};\n"]}
package/lib/components/Select/renderSelect.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Select/renderSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;AAC1D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAc,KAAd,CAArC;AACA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,EAAqC,SAAS,CAAC,MAAV,CAAiB,QAAtD,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAFF,CADF;AAMD,CARM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\n/**\n * Render the final JSX of Select\n */\nexport const renderSelect_unstable = (state: SelectState) => {\n const { slots, slotProps } = getSlots<SelectSlots>(state);\n return (\n <slots.root {...slotProps.root}>\n <slots.select {...slotProps.select}>{slotProps.select.children}</slots.select>\n <slots.icon {...slotProps.icon} />\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Select/renderSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;EAC1D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAc,KAAd,CAArC;EACA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,EAAqC,SAAS,CAAC,MAAV,CAAiB,QAAtD,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAFF,CADF;AAMD,CARM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\n/**\n * Render the final JSX of Select\n */\nexport const renderSelect_unstable = (state: SelectState) => {\n const { slots, slotProps } = getSlots<SelectSlots>(state);\n return (\n <slots.root {...slotProps.root}>\n <slots.select {...slotProps.select}>{slotProps.select.children}</slots.select>\n <slots.icon {...slotProps.icon} />\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
package/lib/components/Select/useSelect.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { getPartitionedNativeProps, resolveShorthand } from '@fluentui/react-utilities';
2
+ import { getPartitionedNativeProps, resolveShorthand, useEventCallback } from '@fluentui/react-utilities';
3
3
  import { ChevronDownRegular } from '@fluentui/react-icons';
4
4
  /**
5
5
  * Create the state required to render Select.
@@ -13,22 +13,23 @@ import { ChevronDownRegular } from '@fluentui/react-icons';
13
13
 
14
14
  export const useSelect_unstable = (props, ref) => {
15
15
  const {
16
+ defaultValue,
17
+ value,
16
18
  select,
17
19
  icon,
18
20
  root,
19
- size = 'medium',
20
21
  appearance = 'outline',
21
- inline = false
22
+ onChange,
23
+ size = 'medium'
22
24
  } = props;
23
25
  const nativeProps = getPartitionedNativeProps({
24
26
  props,
25
27
  primarySlotTagName: 'select',
26
- excludedPropNames: ['appearance', 'inline', 'size']
28
+ excludedPropNames: ['appearance', 'defaultValue', 'onChange', 'size', 'value']
27
29
  });
28
- return {
30
+ const state = {
29
31
  size,
30
32
  appearance,
31
- inline,
32
33
  components: {
33
34
  root: 'span',
34
35
  select: 'select',
@@ -37,6 +38,8 @@ export const useSelect_unstable = (props, ref) => {
37
38
  select: resolveShorthand(select, {
38
39
  required: true,
39
40
  defaultProps: {
41
+ defaultValue,
42
+ value,
40
43
  ref,
41
44
  ...nativeProps.primary
42
45
  }
@@ -52,5 +55,11 @@ export const useSelect_unstable = (props, ref) => {
52
55
  defaultProps: nativeProps.root
53
56
  })
54
57
  };
58
+ state.select.onChange = useEventCallback(event => {
59
+ onChange === null || onChange === void 0 ? void 0 : onChange(event, {
60
+ value: event.target.value
61
+ });
62
+ });
63
+ return state;
55
64
  };
56
65
  //# sourceMappingURL=useSelect.js.map
package/lib/components/Select/useSelect.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Select/useSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,EAAoC,gBAApC,QAA4D,2BAA5D;AACA,SAAS,kBAAT,QAAmC,uBAAnC;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAuE;AACvG,QAAM;AAAE,IAAA,MAAF;AAAU,IAAA,IAAV;AAAgB,IAAA,IAAhB;AAAsB,IAAA,IAAI,GAAG,QAA7B;AAAuC,IAAA,UAAU,GAAG,SAApD;AAA+D,IAAA,MAAM,GAAG;AAAxE,MAAkF,KAAxF;AAEA,QAAM,WAAW,GAAG,yBAAyB,CAAC;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,QAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,YAAD,EAAe,QAAf,EAAyB,MAAzB;AAHyB,GAAD,CAA7C;AAMA,SAAO;AACL,IAAA,IADK;AAEL,IAAA,UAFK;AAGL,IAAA,MAHK;AAIL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,MADI;AAEV,MAAA,MAAM,EAAE,QAFE;AAGV,MAAA,IAAI,EAAE;AAHI,KAJP;AASL,IAAA,MAAM,EAAE,gBAAgB,CAAC,MAAD,EAAS;AAC/B,MAAA,QAAQ,EAAE,IADqB;AAE/B,MAAA,YAAY,EAAE;AACZ,QAAA,GADY;AAEZ,WAAG,WAAW,CAAC;AAFH;AAFiB,KAAT,CATnB;AAgBL,IAAA,IAAI,EAAE,gBAAgB,CAAC,IAAD,EAAO;AAC3B,MAAA,QAAQ,EAAE,IADiB;AAE3B,MAAA,YAAY,EAAE;AAAE,QAAA,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,kBAAD,EAAmB,IAAnB;AAAZ;AAFa,KAAP,CAhBjB;AAoBL,IAAA,IAAI,EAAE,gBAAgB,CAAC,IAAD,EAAO;AAC3B,MAAA,QAAQ,EAAE,IADiB;AAE3B,MAAA,YAAY,EAAE,WAAW,CAAC;AAFC,KAAP;AApBjB,GAAP;AAyBD,CAlCM","sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { SelectProps, SelectState } from './Select.types';\n\n/**\n * Create the state required to render Select.\n *\n * The returned state can be modified with hooks such as useSelectStyles,\n * before being passed to renderSelect.\n *\n * @param props - props from this instance of Select\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {\n const { select, icon, root, size = 'medium', appearance = 'outline', inline = false } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'select',\n excludedPropNames: ['appearance', 'inline', 'size'],\n });\n\n return {\n size,\n appearance,\n inline,\n components: {\n root: 'span',\n select: 'select',\n icon: 'span',\n },\n select: resolveShorthand(select, {\n required: true,\n defaultProps: {\n ref,\n ...nativeProps.primary,\n },\n }),\n icon: resolveShorthand(icon, {\n required: true,\n defaultProps: { children: <ChevronDownRegular /> },\n }),\n root: resolveShorthand(root, {\n required: true,\n defaultProps: nativeProps.root,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Select/useSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,EAAoC,gBAApC,EAAsD,gBAAtD,QAA8E,2BAA9E;AACA,SAAS,kBAAT,QAAmC,uBAAnC;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAuE;EACvG,MAAM;IACJ,YADI;IAEJ,KAFI;IAGJ,MAHI;IAIJ,IAJI;IAKJ,IALI;IAMJ,UAAU,GAAG,SANT;IAQJ,QARI;IASJ,IAAI,GAAG;EATH,IAUF,KAVJ;EAYA,MAAM,WAAW,GAAG,yBAAyB,CAAC;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,QAFwB;IAG5C,iBAAiB,EAAE,CAAC,YAAD,EAAe,cAAf,EAA+B,UAA/B,EAA2C,MAA3C,EAAmD,OAAnD;EAHyB,CAAD,CAA7C;EAMA,MAAM,KAAK,GAAgB;IACzB,IADyB;IAEzB,UAFyB;IAGzB,UAAU,EAAE;MACV,IAAI,EAAE,MADI;MAEV,MAAM,EAAE,QAFE;MAGV,IAAI,EAAE;IAHI,CAHa;IAQzB,MAAM,EAAE,gBAAgB,CAAC,MAAD,EAAS;MAC/B,QAAQ,EAAE,IADqB;MAE/B,YAAY,EAAE;QACZ,YADY;QAEZ,KAFY;QAGZ,GAHY;QAIZ,GAAG,WAAW,CAAC;MAJH;IAFiB,CAAT,CARC;IAiBzB,IAAI,EAAE,gBAAgB,CAAC,IAAD,EAAO;MAC3B,QAAQ,EAAE,IADiB;MAE3B,YAAY,EAAE;QAAE,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,kBAAD,EAAmB,IAAnB;MAAZ;IAFa,CAAP,CAjBG;IAqBzB,IAAI,EAAE,gBAAgB,CAAC,IAAD,EAAO;MAC3B,QAAQ,EAAE,IADiB;MAE3B,YAAY,EAAE,WAAW,CAAC;IAFC,CAAP;EArBG,CAA3B;EA2BA,KAAK,CAAC,MAAN,CAAa,QAAb,GAAwB,gBAAgB,CAAC,KAAK,IAAG;IAC/C,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,KAAH,EAAU;MAAE,KAAK,EAAG,KAAK,CAAC,MAAN,CAAmC;IAA7C,CAAV,CAAR;EACD,CAFuC,CAAxC;EAIA,OAAO,KAAP;AACD,CAnDM","sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, resolveShorthand, useEventCallback } from '@fluentui/react-utilities';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { SelectProps, SelectState } from './Select.types';\n\n/**\n * Create the state required to render Select.\n *\n * The returned state can be modified with hooks such as useSelectStyles,\n * before being passed to renderSelect.\n *\n * @param props - props from this instance of Select\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {\n const {\n defaultValue,\n value,\n select,\n icon,\n root,\n appearance = 'outline',\n\n onChange,\n size = 'medium',\n } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'select',\n excludedPropNames: ['appearance', 'defaultValue', 'onChange', 'size', 'value'],\n });\n\n const state: SelectState = {\n size,\n appearance,\n components: {\n root: 'span',\n select: 'select',\n icon: 'span',\n },\n select: resolveShorthand(select, {\n required: true,\n defaultProps: {\n defaultValue,\n value,\n ref,\n ...nativeProps.primary,\n },\n }),\n icon: resolveShorthand(icon, {\n required: true,\n defaultProps: { children: <ChevronDownRegular /> },\n }),\n root: resolveShorthand(root, {\n required: true,\n defaultProps: nativeProps.root,\n }),\n };\n\n state.select.onChange = useEventCallback(event => {\n onChange?.(event, { value: (event.target as HTMLSelectElement).value });\n });\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib/components/Select/useSelectStyles.js CHANGED
@@ -34,29 +34,42 @@ const useRootStyles = /*#__PURE__*/__styles({
34
34
  "Eh141a": "flvyvdh",
35
35
  "Bahqtrf": "fk6fouc",
36
36
  "qhf8xq": "f10pi13n",
37
- "Bb096xy": "fw24s6l",
38
- "frdscb": ["fvxed1z", "f1j2a01o"],
39
- "B9nohqn": ["f1j2a01o", "fvxed1z"],
40
- "B1dhsta": ["f1pvm60u", "f179ivkp"],
41
- "Bjdmjzx": ["f179ivkp", "f1pvm60u"],
42
- "oqd9ik": "ffdc0f3",
43
- "Bs6t6z0": "fqc6z8f",
44
- "mpb1vu": "feciixf",
45
- "Hdbjpj": "f11ef69",
46
- "Bj55yzk": "fw2wsqs",
47
- "jc51t6": ["f1cvlmu2", "f15lyva8"],
48
- "cnmfks": ["f15lyva8", "f1cvlmu2"],
49
- "xn0juu": "f1lmmjng",
50
- "wbfbqe": "fopw4to",
51
- "mafdb0": "f1jogkkn",
52
- "s1xtto": "f1hql58f",
37
+ "h62rwi": "f7ll8cq",
38
+ "B3778ie": ["f1ibwz09", "f1kp91vd"],
39
+ "d9w3h3": ["f1kp91vd", "f1ibwz09"],
40
+ "Bl18szs": ["f18vqdqu", "f53nyzz"],
41
+ "B4j8arr": ["f53nyzz", "f18vqdqu"],
42
+ "li1rpt": "f1gw3sf2",
43
+ "Bsft5z2": "f13zj6fq",
44
+ "Dlnsje": "fhwjr99",
45
+ "E3zdtr": "f1mdlcz9",
46
+ "By385i5": "fo72kxq",
47
+ "Eqx8gd": ["f1n6gb5g", "f15yvnhg"],
48
+ "B1piin3": ["f15yvnhg", "f1n6gb5g"],
49
+ "b1kco5": "f1yk9hq",
50
+ "Ba2ppi3": "fhwpy7i",
51
+ "F2fol1": "f14ee0xe",
52
+ "lck23g": "f1xhbsuh",
53
+ "df92cz": "fv8e3ye",
54
+ "I188md": "ftb5wc6",
53
55
  "umuwi5": "fjw5xc1",
54
56
  "Blcqepd": "f1xdyd5c",
55
57
  "nplu4u": "fatpbeo",
56
- "Bioka5o": "fb7uyps"
58
+ "Bioka5o": "fb7uyps",
59
+ "H713fs": "f1cmft4k",
60
+ "B9ooomg": "f1x58t8o"
57
61
  }
58
62
  }, {
59
- "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f10pi13n{position:relative;}", ".fw24s6l:after{background-image:linear-gradient(\n 0deg,\n var(--colorCompoundBrandStroke) 0%,\n var(--colorCompoundBrandStroke) 50%,\n transparent 50%,\n transparent 100%\n );}", ".fvxed1z:after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1j2a01o:after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1pvm60u:after{border-top-right-radius:0;}", ".f179ivkp:after{border-top-left-radius:0;}", ".ffdc0f3:after{box-sizing:border-box;}", ".fqc6z8f:after{content:\"\";}", ".feciixf:after{height:var(--borderRadiusMedium);}", ".f11ef69:after{position:absolute;}", ".fw2wsqs:after{bottom:0;}", ".f1cvlmu2:after{left:0;}", ".f15lyva8:after{right:0;}", ".f1lmmjng:after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fopw4to:after{transition-property:transform;}", ".f1jogkkn:after{transition-duration:var(--durationUltraFast);}", ".f1hql58f:after{transition-delay:var(--curveAccelerateMid);}"],
63
+ "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f10pi13n{position:relative;}", ".f7ll8cq::after{background-image:linear-gradient(\n 0deg,\n var(--colorCompoundBrandStroke) 0%,\n var(--colorCompoundBrandStroke) 50%,\n transparent 50%,\n transparent 100%\n );}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f18vqdqu::after{border-top-right-radius:0;}", ".f53nyzz::after{border-top-left-radius:0;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".fhwjr99::after{height:var(--borderRadiusMedium);}", ".f1mdlcz9::after{position:absolute;}", ".fo72kxq::after{bottom:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right: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);}"],
64
+ "m": [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
65
+ "m": "screen and (prefers-reduced-motion: reduce)"
66
+ }], ["@media screen and (prefers-reduced-motion: reduce){.ftb5wc6::after{transition-delay:0.01ms;}}", {
67
+ "m": "screen and (prefers-reduced-motion: reduce)"
68
+ }], ["@media screen and (prefers-reduced-motion: reduce){.f1cmft4k:focus-within::after{transition-duration:0.01ms;}}", {
69
+ "m": "screen and (prefers-reduced-motion: reduce)"
70
+ }], ["@media screen and (prefers-reduced-motion: reduce){.f1x58t8o:focus-within::after{transition-delay:0.01ms;}}", {
71
+ "m": "screen and (prefers-reduced-motion: reduce)"
72
+ }]],
60
73
  "w": [".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);}"]
61
74
  });
62
75
 
@@ -83,14 +96,30 @@ const useSelectStyles = /*#__PURE__*/__styles({
83
96
  "B7ck84d": "f1ewtqcl",
84
97
  "sj55zd": "f19n0e5",
85
98
  "Bh6795r": "fqerorx",
86
- "Beohmeb": "f11uhznr",
87
- "B486eqv": "f1u8i3ug",
88
- "vu0emg": "fe1nke"
99
+ "B3aqqti": "fatbyko",
100
+ "Brovlpu": "f1grzc83",
101
+ "Bxa1mx5": "f19shzzi"
89
102
  },
90
103
  "disabled": {
91
104
  "De3pzq": "f1c21dwh",
105
+ "B4j52fo": "f5ogflp",
106
+ "Bekrc4i": ["f1hqa2wf", "finvdd3"],
107
+ "Bn0qgzm": "f1f09k3d",
108
+ "ibv6hh": ["finvdd3", "f1hqa2wf"],
109
+ "icvyot": "fzkkow9",
110
+ "vrafjx": ["fcdblym", "fjik90z"],
111
+ "oivjwe": "fg706s2",
112
+ "wvpqe5": ["fjik90z", "fcdblym"],
113
+ "g2u3we": "f1jj8ep1",
114
+ "h3c5rm": ["f15xbau", "fy0fskl"],
115
+ "B9xav0g": "f4ikngz",
116
+ "zhjwy3": ["fy0fskl", "f15xbau"],
92
117
  "sj55zd": "f1s2aq7o",
93
- "Bceei9c": "fdrzuqr"
118
+ "Bceei9c": "fdrzuqr",
119
+ "Bjwas2f": "fg455y9",
120
+ "Bn1d65q": ["f1rvyvqg", "f14g86mu"],
121
+ "Bxeuatn": "f1cwzwz",
122
+ "n51gp8": ["f14g86mu", "f1rvyvqg"]
94
123
  },
95
124
  "small": {
96
125
  "Bqenvij": "frvgh55",
@@ -155,8 +184,17 @@ const useSelectStyles = /*#__PURE__*/__styles({
155
184
  "De3pzq": "f16xq7d1"
156
185
  }
157
186
  }, {
158
- "d": [".fqrijq1{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".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);}", ".f1couhl3{box-shadow:none;}", ".f1ewtqcl{box-sizing:border-box;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".frvgh55{height:24px;}", ".f1g0x7ka{padding-top:0;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1qch9an{padding-bottom:0;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1d2rq10{height:32px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fbhnoac{height:40px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".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);}", ".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);}"],
159
- "i": [".f11uhznr:focus-visible{outline-width:2px;}", ".f1u8i3ug:focus-visible{outline-style:solid;}", ".fe1nke:focus-visible{outline-color:transparent;}"]
187
+ "d": [".fqrijq1{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".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);}", ".f1couhl3{box-shadow:none;}", ".f1ewtqcl{box-sizing:border-box;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".frvgh55{height:24px;}", ".f1g0x7ka{padding-top:0;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1qch9an{padding-bottom:0;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1d2rq10{height:32px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fbhnoac{height:40px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".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);}", ".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);}"],
188
+ "f": [".fatbyko:focus{outline-width:2px;}", ".f1grzc83:focus{outline-style:solid;}", ".f19shzzi:focus{outline-color:transparent;}"],
189
+ "m": [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
190
+ "m": "(forced-colors: active)"
191
+ }], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
192
+ "m": "(forced-colors: active)"
193
+ }], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
194
+ "m": "(forced-colors: active)"
195
+ }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
196
+ "m": "(forced-colors: active)"
197
+ }]]
160
198
  });
161
199
 
162
200
  const useIconStyles = /*#__PURE__*/__styles({
@@ -169,6 +207,10 @@ const useIconStyles = /*#__PURE__*/__styles({
169
207
  "Bkecrkj": "f1aehjj5",
170
208
  "Bo70h7d": "fvc9v3g"
171
209
  },
210
+ "disabled": {
211
+ "sj55zd": "f1s2aq7o",
212
+ "Bbusuzp": "f1dcs8yz"
213
+ },
172
214
  "small": {
173
215
  "Be2twd7": "f4ybsrx",
174
216
  "Bqenvij": "fd461yt",
@@ -191,7 +233,10 @@ const useIconStyles = /*#__PURE__*/__styles({
191
233
  "a9b677": "fq4mcun"
192
234
  }
193
235
  }, {
194
- "d": [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1euv43f{position:absolute;}", ".fnyteob{right:var(--spacingHorizontalMNudge);}", ".f1enpzzf{left:var(--spacingHorizontalMNudge);}", ".f1aehjj5{pointer-events:none;}", ".fvc9v3g svg{display:block;}", ".f4ybsrx{font-size:16px;}", ".fd461yt{height:16px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fjw5fx7{width:16px;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}"]
236
+ "d": [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1euv43f{position:absolute;}", ".fnyteob{right:var(--spacingHorizontalMNudge);}", ".f1enpzzf{left:var(--spacingHorizontalMNudge);}", ".f1aehjj5{pointer-events:none;}", ".fvc9v3g svg{display:block;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f4ybsrx{font-size:16px;}", ".fd461yt{height:16px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fjw5fx7{width:16px;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}"],
237
+ "m": [["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
238
+ "m": "(forced-colors: active)"
239
+ }]]
195
240
  });
196
241
  /**
197
242
  * Apply styling to the Select slots based on the state
@@ -211,7 +256,7 @@ export const useSelectStyles_unstable = state => {
211
256
  state.select.className = mergeClasses(selectClassNames.select, selectStyles.base, selectStyles[size], selectStyles[appearance], disabled && selectStyles.disabled, state.select.className);
212
257
 
213
258
  if (state.icon) {
214
- state.icon.className = mergeClasses(selectClassNames.icon, iconStyles.icon, iconStyles[size], state.icon.className);
259
+ state.icon.className = mergeClasses(selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);
215
260
  }
216
261
 
217
262
  return state;
package/lib/components/Select/useSelectStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Select/useSelectStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,EAAiB,gBAAjB,QAAyC,uBAAzC;AAIA,OAAO,MAAM,gBAAgB,GAAgC;AAC3D,EAAA,IAAI,EAAE,YADqD;AAE3D,EAAA,MAAM,EAAE,oBAFmD;AAG3D,EAAA,IAAI,EAAE;AAHqD,CAAtD;AAMP,MAAM,SAAS,GAAG;AAChB,EAAA,KAAK,EAAE,MADS;AAEhB,EAAA,MAAM,EAAE,MAFQ;AAGhB,EAAA,KAAK,EAAE;AAHS,CAAlB,C,CAMA;AACA;;AACA,MAAM,YAAY,GAAG;AACnB,OAAK;AACH,IAAA,QAAQ,EAAE,MAAM,CAAC,eADd;AAEH,IAAA,UAAU,EAAE,MAAM,CAAC;AAFhB;AADc,CAArB,C,CAOA;;AACA,MAAM,YAAY,GAAG;AACnB,EAAA,KAAK,EAAE,MADY;AAEnB,EAAA,MAAM,EAAE,MAFW;AAGnB,EAAA,KAAK,EAAE;AAHY,CAArB;AAMA;;AAEA,MAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAwCA,MAAM,eAAe,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAxB;;AAsDA,MAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;AAsCA;;AAEG;;;AACH,OAAO,MAAM,wBAAwB,GAAI,KAAD,IAAoC;AAC1E,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA;AAAR,MAAuB,KAA7B;AACA,QAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,CAAa,QAA9B;AAEA,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,YAAY,GAAG,eAAe,EAApC;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,gBAAgB,CAAC,IAAlB,EAAwB,UAAU,CAAC,IAAnC,EAAyC,KAAK,CAAC,IAAN,CAAW,SAApD,CAAnC;AAEA,EAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CACnC,gBAAgB,CAAC,MADkB,EAEnC,YAAY,CAAC,IAFsB,EAGnC,YAAY,CAAC,IAAD,CAHuB,EAInC,YAAY,CAAC,UAAD,CAJuB,EAKnC,QAAQ,IAAI,YAAY,CAAC,QALU,EAMnC,KAAK,CAAC,MAAN,CAAa,SANsB,CAArC;;AASA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,gBAAgB,CAAC,IAAlB,EAAwB,UAAU,CAAC,IAAnC,EAAyC,UAAU,CAAC,IAAD,CAAnD,EAA2D,KAAK,CAAC,IAAN,CAAW,SAAtE,CAAnC;AACD;;AAED,SAAO,KAAP;AACD,CAxBM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\nexport const selectClassNames: SlotClassNames<SelectSlots> = {\n root: 'fui-Select',\n select: 'fui-Select__select',\n icon: 'fui-Select__icon',\n};\n\nconst iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px',\n};\n\n// TODO: This 400 style is not in the typography styles.\n// May need a design change\nconst contentSizes = {\n 400: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n};\n\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n/* end of shared values */\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexWrap: 'nowrap',\n fontFamily: tokens.fontFamilyBase,\n position: 'relative',\n\n '&:after': {\n backgroundImage: `linear-gradient(\n 0deg,\n ${tokens.colorCompoundBrandStroke} 0%,\n ${tokens.colorCompoundBrandStroke} 50%,\n transparent 50%,\n transparent 100%\n )`,\n ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n content: '\"\"',\n height: tokens.borderRadiusMedium,\n position: 'absolute',\n bottom: '0',\n left: '0',\n right: '0',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n },\n\n '&:focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n },\n },\n});\n\nconst useSelectStyles = makeStyles({\n base: {\n appearance: 'none',\n ...shorthands.border('1px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxShadow: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n flexGrow: 1,\n\n ':focus-visible': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n },\n small: {\n height: fieldHeights.small,\n ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\n ...typographyStyles.caption1,\n },\n medium: {\n height: fieldHeights.medium,\n ...shorthands.padding('0', tokens.spacingHorizontalMNudge),\n ...typographyStyles.body1,\n },\n large: {\n height: fieldHeights.large,\n ...shorthands.padding('0', tokens.spacingHorizontalM),\n ...contentSizes[400],\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom('1px', '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});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n position: 'absolute',\n right: tokens.spacingHorizontalMNudge,\n pointerEvents: 'none',\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 small: {\n fontSize: iconSizes.small,\n height: iconSizes.small,\n paddingRight: tokens.spacingHorizontalSNudge,\n paddingLeft: tokens.spacingHorizontalXXS,\n width: iconSizes.small,\n },\n medium: {\n fontSize: iconSizes.medium,\n height: iconSizes.medium,\n paddingRight: tokens.spacingHorizontalM,\n paddingLeft: tokens.spacingHorizontalXXS,\n width: iconSizes.medium,\n },\n large: {\n fontSize: iconSizes.large,\n height: iconSizes.large,\n paddingRight: tokens.spacingHorizontalM,\n paddingLeft: tokens.spacingHorizontalSNudge,\n width: iconSizes.large,\n },\n});\n\n/**\n * Apply styling to the Select slots based on the state\n */\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n const { size, appearance } = state;\n const disabled = state.select.disabled;\n\n const iconStyles = useIconStyles();\n const rootStyles = useRootStyles();\n const selectStyles = useSelectStyles();\n\n state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n\n state.select.className = mergeClasses(\n selectClassNames.select,\n selectStyles.base,\n selectStyles[size],\n selectStyles[appearance],\n disabled && selectStyles.disabled,\n state.select.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(selectClassNames.icon, iconStyles.icon, iconStyles[size], state.icon.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Select/useSelectStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\nexport const selectClassNames: SlotClassNames<SelectSlots> = {\n root: 'fui-Select',\n select: 'fui-Select__select',\n icon: 'fui-Select__icon',\n};\n\nconst iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px',\n};\n\n// TODO: This 400 style is not in the typography styles.\n// May need a design change\nconst contentSizes = {\n 400: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n};\n\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n/* end of shared values */\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexWrap: 'nowrap',\n fontFamily: tokens.fontFamilyBase,\n position: 'relative',\n\n '&::after': {\n backgroundImage: `linear-gradient(\n 0deg,\n ${tokens.colorCompoundBrandStroke} 0%,\n ${tokens.colorCompoundBrandStroke} 50%,\n transparent 50%,\n transparent 100%\n )`,\n ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n content: '\"\"',\n height: tokens.borderRadiusMedium,\n position: 'absolute',\n bottom: '0',\n left: '0',\n right: '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\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 },\n});\n\nconst useSelectStyles = makeStyles({\n base: {\n appearance: 'none',\n ...shorthands.border('1px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxShadow: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n flexGrow: 1,\n\n ':focus': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n small: {\n height: fieldHeights.small,\n ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\n ...typographyStyles.caption1,\n },\n medium: {\n height: fieldHeights.medium,\n ...shorthands.padding('0', tokens.spacingHorizontalMNudge),\n ...typographyStyles.body1,\n },\n large: {\n height: fieldHeights.large,\n ...shorthands.padding('0', tokens.spacingHorizontalM),\n ...contentSizes[400],\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom('1px', '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});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n position: 'absolute',\n right: tokens.spacingHorizontalMNudge,\n pointerEvents: 'none',\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 disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n small: {\n fontSize: iconSizes.small,\n height: iconSizes.small,\n paddingRight: tokens.spacingHorizontalSNudge,\n paddingLeft: tokens.spacingHorizontalXXS,\n width: iconSizes.small,\n },\n medium: {\n fontSize: iconSizes.medium,\n height: iconSizes.medium,\n paddingRight: tokens.spacingHorizontalM,\n paddingLeft: tokens.spacingHorizontalXXS,\n width: iconSizes.medium,\n },\n large: {\n fontSize: iconSizes.large,\n height: iconSizes.large,\n paddingRight: tokens.spacingHorizontalM,\n paddingLeft: tokens.spacingHorizontalSNudge,\n width: iconSizes.large,\n },\n});\n\n/**\n * Apply styling to the Select slots based on the state\n */\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n const { size, appearance } = state;\n const disabled = state.select.disabled;\n\n const iconStyles = useIconStyles();\n const rootStyles = useRootStyles();\n const selectStyles = useSelectStyles();\n\n state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n\n state.select.className = mergeClasses(\n selectClassNames.select,\n selectStyles.base,\n selectStyles[size],\n selectStyles[appearance],\n disabled && selectStyles.disabled,\n state.select.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n selectClassNames.icon,\n iconStyles.icon,\n disabled && iconStyles.disabled,\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE,gBAFF,EAGE,qBAHF,EAIE,wBAJF,EAKE,kBALF,QAMO,UANP","sourcesContent":["export {\n Select,\n selectClassNames,\n renderSelect_unstable,\n useSelectStyles_unstable,\n useSelect_unstable,\n} from './Select';\nexport type { SelectProps, SelectSlots, SelectState } from './Select';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE,gBAFF,EAGE,qBAHF,EAIE,wBAJF,EAKE,kBALF,QAMO,UANP","sourcesContent":["export {\n Select,\n selectClassNames,\n renderSelect_unstable,\n useSelectStyles_unstable,\n useSelect_unstable,\n} from './Select';\nexport type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './Select';\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Select/Select.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Select/Select.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;AAEA,EAAA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;AACA,SAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP;AACD,CALuD,CAA3C;AAOb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useSelect_unstable } from './useSelect';\nimport { renderSelect_unstable } from './renderSelect';\nimport { useSelectStyles_unstable } from './useSelectStyles';\nimport type { SelectProps } from './Select.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Select component\n */\nexport const Select: ForwardRefComponent<SelectProps> = React.forwardRef((props, ref) => {\n const state = useSelect_unstable(props, ref);\n\n useSelectStyles_unstable(state);\n return renderSelect_unstable(state);\n});\n\nSelect.displayName = 'Select';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Select/Select.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtF,MAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;EAEA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;EACA,OAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP;AACD,CALuD,CAA3C;AAOb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useSelect_unstable } from './useSelect';\nimport { renderSelect_unstable } from './renderSelect';\nimport { useSelectStyles_unstable } from './useSelectStyles';\nimport type { SelectProps } from './Select.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Select component\n */\nexport const Select: ForwardRefComponent<SelectProps> = React.forwardRef((props, ref) => {\n const state = useSelect_unstable(props, ref);\n\n useSelectStyles_unstable(state);\n return renderSelect_unstable(state);\n});\n\nSelect.displayName = 'Select';\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Select/renderSelect.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Select/renderSelect.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,qBAAqB,GAAI,KAAD,IAAuB;AAC1D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,CAA7B;AACA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,EAAqC,SAAS,CAAC,MAAV,CAAiB,QAAtD,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAFF,CADF;AAMD,CARM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\n/**\n * Render the final JSX of Select\n */\nexport const renderSelect_unstable = (state: SelectState) => {\n const { slots, slotProps } = getSlots<SelectSlots>(state);\n return (\n <slots.root {...slotProps.root}>\n <slots.select {...slotProps.select}>{slotProps.select.children}</slots.select>\n <slots.icon {...slotProps.icon} />\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Select/renderSelect.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,qBAAqB,GAAI,KAAD,IAAuB;EAC1D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,CAA7B;EACA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,EAAqC,SAAS,CAAC,MAAV,CAAiB,QAAtD,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAFF,CADF;AAMD,CARM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\n/**\n * Render the final JSX of Select\n */\nexport const renderSelect_unstable = (state: SelectState) => {\n const { slots, slotProps } = getSlots<SelectSlots>(state);\n return (\n <slots.root {...slotProps.root}>\n <slots.select {...slotProps.select}>{slotProps.select.children}</slots.select>\n <slots.icon {...slotProps.icon} />\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Select/useSelect.js CHANGED
@@ -23,22 +23,23 @@ const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
23
23
 
24
24
  const useSelect_unstable = (props, ref) => {
25
25
  const {
26
+ defaultValue,
27
+ value,
26
28
  select,
27
29
  icon,
28
30
  root,
29
- size = 'medium',
30
31
  appearance = 'outline',
31
- inline = false
32
+ onChange,
33
+ size = 'medium'
32
34
  } = props;
33
35
  const nativeProps = react_utilities_1.getPartitionedNativeProps({
34
36
  props,
35
37
  primarySlotTagName: 'select',
36
- excludedPropNames: ['appearance', 'inline', 'size']
38
+ excludedPropNames: ['appearance', 'defaultValue', 'onChange', 'size', 'value']
37
39
  });
38
- return {
40
+ const state = {
39
41
  size,
40
42
  appearance,
41
- inline,
42
43
  components: {
43
44
  root: 'span',
44
45
  select: 'select',
@@ -47,6 +48,8 @@ const useSelect_unstable = (props, ref) => {
47
48
  select: react_utilities_1.resolveShorthand(select, {
48
49
  required: true,
49
50
  defaultProps: {
51
+ defaultValue,
52
+ value,
50
53
  ref,
51
54
  ...nativeProps.primary
52
55
  }
@@ -62,6 +65,12 @@ const useSelect_unstable = (props, ref) => {
62
65
  defaultProps: nativeProps.root
63
66
  })
64
67
  };
68
+ state.select.onChange = react_utilities_1.useEventCallback(event => {
69
+ onChange === null || onChange === void 0 ? void 0 : onChange(event, {
70
+ value: event.target.value
71
+ });
72
+ });
73
+ return state;
65
74
  };
66
75
 
67
76
  exports.useSelect_unstable = useSelect_unstable;
package/lib-commonjs/components/Select/useSelect.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Select/useSelect.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAuE;AACvG,QAAM;AAAE,IAAA,MAAF;AAAU,IAAA,IAAV;AAAgB,IAAA,IAAhB;AAAsB,IAAA,IAAI,GAAG,QAA7B;AAAuC,IAAA,UAAU,GAAG,SAApD;AAA+D,IAAA,MAAM,GAAG;AAAxE,MAAkF,KAAxF;AAEA,QAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,QAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,YAAD,EAAe,QAAf,EAAyB,MAAzB;AAHyB,GAA1B,CAApB;AAMA,SAAO;AACL,IAAA,IADK;AAEL,IAAA,UAFK;AAGL,IAAA,MAHK;AAIL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,MADI;AAEV,MAAA,MAAM,EAAE,QAFE;AAGV,MAAA,IAAI,EAAE;AAHI,KAJP;AASL,IAAA,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,MAAjB,EAAyB;AAC/B,MAAA,QAAQ,EAAE,IADqB;AAE/B,MAAA,YAAY,EAAE;AACZ,QAAA,GADY;AAEZ,WAAG,WAAW,CAAC;AAFH;AAFiB,KAAzB,CATH;AAgBL,IAAA,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,EAAuB;AAC3B,MAAA,QAAQ,EAAE,IADiB;AAE3B,MAAA,YAAY,EAAE;AAAE,QAAA,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,kBAAD,EAAmB,IAAnB;AAAZ;AAFa,KAAvB,CAhBD;AAoBL,IAAA,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,EAAuB;AAC3B,MAAA,QAAQ,EAAE,IADiB;AAE3B,MAAA,YAAY,EAAE,WAAW,CAAC;AAFC,KAAvB;AApBD,GAAP;AAyBD,CAlCM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { SelectProps, SelectState } from './Select.types';\n\n/**\n * Create the state required to render Select.\n *\n * The returned state can be modified with hooks such as useSelectStyles,\n * before being passed to renderSelect.\n *\n * @param props - props from this instance of Select\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {\n const { select, icon, root, size = 'medium', appearance = 'outline', inline = false } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'select',\n excludedPropNames: ['appearance', 'inline', 'size'],\n });\n\n return {\n size,\n appearance,\n inline,\n components: {\n root: 'span',\n select: 'select',\n icon: 'span',\n },\n select: resolveShorthand(select, {\n required: true,\n defaultProps: {\n ref,\n ...nativeProps.primary,\n },\n }),\n icon: resolveShorthand(icon, {\n required: true,\n defaultProps: { children: <ChevronDownRegular /> },\n }),\n root: resolveShorthand(root, {\n required: true,\n defaultProps: nativeProps.root,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Select/useSelect.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAuE;EACvG,MAAM;IACJ,YADI;IAEJ,KAFI;IAGJ,MAHI;IAIJ,IAJI;IAKJ,IALI;IAMJ,UAAU,GAAG,SANT;IAQJ,QARI;IASJ,IAAI,GAAG;EATH,IAUF,KAVJ;EAYA,MAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,QAFwB;IAG5C,iBAAiB,EAAE,CAAC,YAAD,EAAe,cAAf,EAA+B,UAA/B,EAA2C,MAA3C,EAAmD,OAAnD;EAHyB,CAA1B,CAApB;EAMA,MAAM,KAAK,GAAgB;IACzB,IADyB;IAEzB,UAFyB;IAGzB,UAAU,EAAE;MACV,IAAI,EAAE,MADI;MAEV,MAAM,EAAE,QAFE;MAGV,IAAI,EAAE;IAHI,CAHa;IAQzB,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,MAAjB,EAAyB;MAC/B,QAAQ,EAAE,IADqB;MAE/B,YAAY,EAAE;QACZ,YADY;QAEZ,KAFY;QAGZ,GAHY;QAIZ,GAAG,WAAW,CAAC;MAJH;IAFiB,CAAzB,CARiB;IAiBzB,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,EAAuB;MAC3B,QAAQ,EAAE,IADiB;MAE3B,YAAY,EAAE;QAAE,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,kBAAD,EAAmB,IAAnB;MAAZ;IAFa,CAAvB,CAjBmB;IAqBzB,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,EAAuB;MAC3B,QAAQ,EAAE,IADiB;MAE3B,YAAY,EAAE,WAAW,CAAC;IAFC,CAAvB;EArBmB,CAA3B;EA2BA,KAAK,CAAC,MAAN,CAAa,QAAb,GAAwB,iBAAA,CAAA,gBAAA,CAAiB,KAAK,IAAG;IAC/C,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,KAAH,EAAU;MAAE,KAAK,EAAG,KAAK,CAAC,MAAN,CAAmC;IAA7C,CAAV,CAAR;EACD,CAFuB,CAAxB;EAIA,OAAO,KAAP;AACD,CAnDM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, resolveShorthand, useEventCallback } from '@fluentui/react-utilities';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { SelectProps, SelectState } from './Select.types';\n\n/**\n * Create the state required to render Select.\n *\n * The returned state can be modified with hooks such as useSelectStyles,\n * before being passed to renderSelect.\n *\n * @param props - props from this instance of Select\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {\n const {\n defaultValue,\n value,\n select,\n icon,\n root,\n appearance = 'outline',\n\n onChange,\n size = 'medium',\n } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'select',\n excludedPropNames: ['appearance', 'defaultValue', 'onChange', 'size', 'value'],\n });\n\n const state: SelectState = {\n size,\n appearance,\n components: {\n root: 'span',\n select: 'select',\n icon: 'span',\n },\n select: resolveShorthand(select, {\n required: true,\n defaultProps: {\n defaultValue,\n value,\n ref,\n ...nativeProps.primary,\n },\n }),\n icon: resolveShorthand(icon, {\n required: true,\n defaultProps: { children: <ChevronDownRegular /> },\n }),\n root: resolveShorthand(root, {\n required: true,\n defaultProps: nativeProps.root,\n }),\n };\n\n state.select.onChange = useEventCallback(event => {\n onChange?.(event, { value: (event.target as HTMLSelectElement).value });\n });\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Select/useSelectStyles.js CHANGED
@@ -43,29 +43,42 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
43
43
  "Eh141a": "flvyvdh",
44
44
  "Bahqtrf": "fk6fouc",
45
45
  "qhf8xq": "f10pi13n",
46
- "Bb096xy": "fw24s6l",
47
- "frdscb": ["fvxed1z", "f1j2a01o"],
48
- "B9nohqn": ["f1j2a01o", "fvxed1z"],
49
- "B1dhsta": ["f1pvm60u", "f179ivkp"],
50
- "Bjdmjzx": ["f179ivkp", "f1pvm60u"],
51
- "oqd9ik": "ffdc0f3",
52
- "Bs6t6z0": "fqc6z8f",
53
- "mpb1vu": "feciixf",
54
- "Hdbjpj": "f11ef69",
55
- "Bj55yzk": "fw2wsqs",
56
- "jc51t6": ["f1cvlmu2", "f15lyva8"],
57
- "cnmfks": ["f15lyva8", "f1cvlmu2"],
58
- "xn0juu": "f1lmmjng",
59
- "wbfbqe": "fopw4to",
60
- "mafdb0": "f1jogkkn",
61
- "s1xtto": "f1hql58f",
46
+ "h62rwi": "f7ll8cq",
47
+ "B3778ie": ["f1ibwz09", "f1kp91vd"],
48
+ "d9w3h3": ["f1kp91vd", "f1ibwz09"],
49
+ "Bl18szs": ["f18vqdqu", "f53nyzz"],
50
+ "B4j8arr": ["f53nyzz", "f18vqdqu"],
51
+ "li1rpt": "f1gw3sf2",
52
+ "Bsft5z2": "f13zj6fq",
53
+ "Dlnsje": "fhwjr99",
54
+ "E3zdtr": "f1mdlcz9",
55
+ "By385i5": "fo72kxq",
56
+ "Eqx8gd": ["f1n6gb5g", "f15yvnhg"],
57
+ "B1piin3": ["f15yvnhg", "f1n6gb5g"],
58
+ "b1kco5": "f1yk9hq",
59
+ "Ba2ppi3": "fhwpy7i",
60
+ "F2fol1": "f14ee0xe",
61
+ "lck23g": "f1xhbsuh",
62
+ "df92cz": "fv8e3ye",
63
+ "I188md": "ftb5wc6",
62
64
  "umuwi5": "fjw5xc1",
63
65
  "Blcqepd": "f1xdyd5c",
64
66
  "nplu4u": "fatpbeo",
65
- "Bioka5o": "fb7uyps"
67
+ "Bioka5o": "fb7uyps",
68
+ "H713fs": "f1cmft4k",
69
+ "B9ooomg": "f1x58t8o"
66
70
  }
67
71
  }, {
68
- "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f10pi13n{position:relative;}", ".fw24s6l:after{background-image:linear-gradient(\n 0deg,\n var(--colorCompoundBrandStroke) 0%,\n var(--colorCompoundBrandStroke) 50%,\n transparent 50%,\n transparent 100%\n );}", ".fvxed1z:after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1j2a01o:after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1pvm60u:after{border-top-right-radius:0;}", ".f179ivkp:after{border-top-left-radius:0;}", ".ffdc0f3:after{box-sizing:border-box;}", ".fqc6z8f:after{content:\"\";}", ".feciixf:after{height:var(--borderRadiusMedium);}", ".f11ef69:after{position:absolute;}", ".fw2wsqs:after{bottom:0;}", ".f1cvlmu2:after{left:0;}", ".f15lyva8:after{right:0;}", ".f1lmmjng:after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fopw4to:after{transition-property:transform;}", ".f1jogkkn:after{transition-duration:var(--durationUltraFast);}", ".f1hql58f:after{transition-delay:var(--curveAccelerateMid);}"],
72
+ "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f10pi13n{position:relative;}", ".f7ll8cq::after{background-image:linear-gradient(\n 0deg,\n var(--colorCompoundBrandStroke) 0%,\n var(--colorCompoundBrandStroke) 50%,\n transparent 50%,\n transparent 100%\n );}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f18vqdqu::after{border-top-right-radius:0;}", ".f53nyzz::after{border-top-left-radius:0;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".fhwjr99::after{height:var(--borderRadiusMedium);}", ".f1mdlcz9::after{position:absolute;}", ".fo72kxq::after{bottom:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right: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);}"],
73
+ "m": [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
74
+ "m": "screen and (prefers-reduced-motion: reduce)"
75
+ }], ["@media screen and (prefers-reduced-motion: reduce){.ftb5wc6::after{transition-delay:0.01ms;}}", {
76
+ "m": "screen and (prefers-reduced-motion: reduce)"
77
+ }], ["@media screen and (prefers-reduced-motion: reduce){.f1cmft4k:focus-within::after{transition-duration:0.01ms;}}", {
78
+ "m": "screen and (prefers-reduced-motion: reduce)"
79
+ }], ["@media screen and (prefers-reduced-motion: reduce){.f1x58t8o:focus-within::after{transition-delay:0.01ms;}}", {
80
+ "m": "screen and (prefers-reduced-motion: reduce)"
81
+ }]],
69
82
  "w": [".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);}"]
70
83
  });
71
84
 
@@ -92,14 +105,30 @@ const useSelectStyles = /*#__PURE__*/react_1.__styles({
92
105
  "B7ck84d": "f1ewtqcl",
93
106
  "sj55zd": "f19n0e5",
94
107
  "Bh6795r": "fqerorx",
95
- "Beohmeb": "f11uhznr",
96
- "B486eqv": "f1u8i3ug",
97
- "vu0emg": "fe1nke"
108
+ "B3aqqti": "fatbyko",
109
+ "Brovlpu": "f1grzc83",
110
+ "Bxa1mx5": "f19shzzi"
98
111
  },
99
112
  "disabled": {
100
113
  "De3pzq": "f1c21dwh",
114
+ "B4j52fo": "f5ogflp",
115
+ "Bekrc4i": ["f1hqa2wf", "finvdd3"],
116
+ "Bn0qgzm": "f1f09k3d",
117
+ "ibv6hh": ["finvdd3", "f1hqa2wf"],
118
+ "icvyot": "fzkkow9",
119
+ "vrafjx": ["fcdblym", "fjik90z"],
120
+ "oivjwe": "fg706s2",
121
+ "wvpqe5": ["fjik90z", "fcdblym"],
122
+ "g2u3we": "f1jj8ep1",
123
+ "h3c5rm": ["f15xbau", "fy0fskl"],
124
+ "B9xav0g": "f4ikngz",
125
+ "zhjwy3": ["fy0fskl", "f15xbau"],
101
126
  "sj55zd": "f1s2aq7o",
102
- "Bceei9c": "fdrzuqr"
127
+ "Bceei9c": "fdrzuqr",
128
+ "Bjwas2f": "fg455y9",
129
+ "Bn1d65q": ["f1rvyvqg", "f14g86mu"],
130
+ "Bxeuatn": "f1cwzwz",
131
+ "n51gp8": ["f14g86mu", "f1rvyvqg"]
103
132
  },
104
133
  "small": {
105
134
  "Bqenvij": "frvgh55",
@@ -164,8 +193,17 @@ const useSelectStyles = /*#__PURE__*/react_1.__styles({
164
193
  "De3pzq": "f16xq7d1"
165
194
  }
166
195
  }, {
167
- "d": [".fqrijq1{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".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);}", ".f1couhl3{box-shadow:none;}", ".f1ewtqcl{box-sizing:border-box;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".frvgh55{height:24px;}", ".f1g0x7ka{padding-top:0;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1qch9an{padding-bottom:0;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1d2rq10{height:32px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fbhnoac{height:40px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".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);}", ".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);}"],
168
- "i": [".f11uhznr:focus-visible{outline-width:2px;}", ".f1u8i3ug:focus-visible{outline-style:solid;}", ".fe1nke:focus-visible{outline-color:transparent;}"]
196
+ "d": [".fqrijq1{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".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);}", ".f1couhl3{box-shadow:none;}", ".f1ewtqcl{box-sizing:border-box;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".frvgh55{height:24px;}", ".f1g0x7ka{padding-top:0;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1qch9an{padding-bottom:0;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1d2rq10{height:32px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fbhnoac{height:40px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".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);}", ".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);}"],
197
+ "f": [".fatbyko:focus{outline-width:2px;}", ".f1grzc83:focus{outline-style:solid;}", ".f19shzzi:focus{outline-color:transparent;}"],
198
+ "m": [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
199
+ "m": "(forced-colors: active)"
200
+ }], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
201
+ "m": "(forced-colors: active)"
202
+ }], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
203
+ "m": "(forced-colors: active)"
204
+ }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
205
+ "m": "(forced-colors: active)"
206
+ }]]
169
207
  });
170
208
 
171
209
  const useIconStyles = /*#__PURE__*/react_1.__styles({
@@ -178,6 +216,10 @@ const useIconStyles = /*#__PURE__*/react_1.__styles({
178
216
  "Bkecrkj": "f1aehjj5",
179
217
  "Bo70h7d": "fvc9v3g"
180
218
  },
219
+ "disabled": {
220
+ "sj55zd": "f1s2aq7o",
221
+ "Bbusuzp": "f1dcs8yz"
222
+ },
181
223
  "small": {
182
224
  "Be2twd7": "f4ybsrx",
183
225
  "Bqenvij": "fd461yt",
@@ -200,7 +242,10 @@ const useIconStyles = /*#__PURE__*/react_1.__styles({
200
242
  "a9b677": "fq4mcun"
201
243
  }
202
244
  }, {
203
- "d": [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1euv43f{position:absolute;}", ".fnyteob{right:var(--spacingHorizontalMNudge);}", ".f1enpzzf{left:var(--spacingHorizontalMNudge);}", ".f1aehjj5{pointer-events:none;}", ".fvc9v3g svg{display:block;}", ".f4ybsrx{font-size:16px;}", ".fd461yt{height:16px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fjw5fx7{width:16px;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}"]
245
+ "d": [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1euv43f{position:absolute;}", ".fnyteob{right:var(--spacingHorizontalMNudge);}", ".f1enpzzf{left:var(--spacingHorizontalMNudge);}", ".f1aehjj5{pointer-events:none;}", ".fvc9v3g svg{display:block;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f4ybsrx{font-size:16px;}", ".fd461yt{height:16px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fjw5fx7{width:16px;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}"],
246
+ "m": [["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
247
+ "m": "(forced-colors: active)"
248
+ }]]
204
249
  });
205
250
  /**
206
251
  * Apply styling to the Select slots based on the state
@@ -220,7 +265,7 @@ const useSelectStyles_unstable = state => {
220
265
  state.select.className = react_1.mergeClasses(exports.selectClassNames.select, selectStyles.base, selectStyles[size], selectStyles[appearance], disabled && selectStyles.disabled, state.select.className);
221
266
 
222
267
  if (state.icon) {
223
- state.icon.className = react_1.mergeClasses(exports.selectClassNames.icon, iconStyles.icon, iconStyles[size], state.icon.className);
268
+ state.icon.className = react_1.mergeClasses(exports.selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);
224
269
  }
225
270
 
226
271
  return state;
package/lib-commonjs/components/Select/useSelectStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Select/useSelectStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\nexport const selectClassNames: SlotClassNames<SelectSlots> = {\n root: 'fui-Select',\n select: 'fui-Select__select',\n icon: 'fui-Select__icon',\n};\n\nconst iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px',\n};\n\n// TODO: This 400 style is not in the typography styles.\n// May need a design change\nconst contentSizes = {\n 400: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n};\n\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n/* end of shared values */\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexWrap: 'nowrap',\n fontFamily: tokens.fontFamilyBase,\n position: 'relative',\n\n '&:after': {\n backgroundImage: `linear-gradient(\n 0deg,\n ${tokens.colorCompoundBrandStroke} 0%,\n ${tokens.colorCompoundBrandStroke} 50%,\n transparent 50%,\n transparent 100%\n )`,\n ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n content: '\"\"',\n height: tokens.borderRadiusMedium,\n position: 'absolute',\n bottom: '0',\n left: '0',\n right: '0',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n },\n\n '&:focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n },\n },\n});\n\nconst useSelectStyles = makeStyles({\n base: {\n appearance: 'none',\n ...shorthands.border('1px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxShadow: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n flexGrow: 1,\n\n ':focus-visible': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n },\n small: {\n height: fieldHeights.small,\n ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\n ...typographyStyles.caption1,\n },\n medium: {\n height: fieldHeights.medium,\n ...shorthands.padding('0', tokens.spacingHorizontalMNudge),\n ...typographyStyles.body1,\n },\n large: {\n height: fieldHeights.large,\n ...shorthands.padding('0', tokens.spacingHorizontalM),\n ...contentSizes[400],\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom('1px', '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});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n position: 'absolute',\n right: tokens.spacingHorizontalMNudge,\n pointerEvents: 'none',\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 small: {\n fontSize: iconSizes.small,\n height: iconSizes.small,\n paddingRight: tokens.spacingHorizontalSNudge,\n paddingLeft: tokens.spacingHorizontalXXS,\n width: iconSizes.small,\n },\n medium: {\n fontSize: iconSizes.medium,\n height: iconSizes.medium,\n paddingRight: tokens.spacingHorizontalM,\n paddingLeft: tokens.spacingHorizontalXXS,\n width: iconSizes.medium,\n },\n large: {\n fontSize: iconSizes.large,\n height: iconSizes.large,\n paddingRight: tokens.spacingHorizontalM,\n paddingLeft: tokens.spacingHorizontalSNudge,\n width: iconSizes.large,\n },\n});\n\n/**\n * Apply styling to the Select slots based on the state\n */\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n const { size, appearance } = state;\n const disabled = state.select.disabled;\n\n const iconStyles = useIconStyles();\n const rootStyles = useRootStyles();\n const selectStyles = useSelectStyles();\n\n state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n\n state.select.className = mergeClasses(\n selectClassNames.select,\n selectStyles.base,\n selectStyles[size],\n selectStyles[appearance],\n disabled && selectStyles.disabled,\n state.select.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(selectClassNames.icon, iconStyles.icon, iconStyles[size], state.icon.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Select/useSelectStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,gBAAA,GAAgD;EAC3D,IAAI,EAAE,YADqD;EAE3D,MAAM,EAAE,oBAFmD;EAG3D,IAAI,EAAE;AAHqD,CAAhD;AAMb,MAAM,SAAS,GAAG;EAChB,KAAK,EAAE,MADS;EAEhB,MAAM,EAAE,MAFQ;EAGhB,KAAK,EAAE;AAHS,CAAlB,C,CAMA;AACA;;AACA,MAAM,YAAY,GAAG;EACnB,KAAK;IACH,QAAQ,EAAE,aAAA,CAAA,MAAA,CAAO,eADd;IAEH,UAAU,EAAE,aAAA,CAAA,MAAA,CAAO;EAFhB;AADc,CAArB,C,CAOA;;AACA,MAAM,YAAY,GAAG;EACnB,KAAK,EAAE,MADY;EAEnB,MAAM,EAAE,MAFW;EAGnB,KAAK,EAAE;AAHY,CAArB;AAMA;;AAEA,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;EAAA;AAAA,EAAtB;;AAkDA,MAAM,eAAe,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAxB;;AA0DA,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;AAAA,EAAtB;AA4CA;;AAEG;;;AACI,MAAM,wBAAwB,GAAI,KAAD,IAAoC;EAC1E,MAAM;IAAE,IAAF;IAAQ;EAAR,IAAuB,KAA7B;EACA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,CAAa,QAA9B;EAEA,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,MAAM,YAAY,GAAG,eAAe,EAApC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,gBAAA,CAAiB,IAA9B,EAAoC,UAAU,CAAC,IAA/C,EAAqD,KAAK,CAAC,IAAN,CAAW,SAAhE,CAAvB;EAEA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CACvB,OAAA,CAAA,gBAAA,CAAiB,MADM,EAEvB,YAAY,CAAC,IAFU,EAGvB,YAAY,CAAC,IAAD,CAHW,EAIvB,YAAY,CAAC,UAAD,CAJW,EAKvB,QAAQ,IAAI,YAAY,CAAC,QALF,EAMvB,KAAK,CAAC,MAAN,CAAa,SANU,CAAzB;;EASA,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,gBAAA,CAAiB,IADI,EAErB,UAAU,CAAC,IAFU,EAGrB,QAAQ,IAAI,UAAU,CAAC,QAHF,EAIrB,UAAU,CAAC,IAAD,CAJW,EAKrB,KAAK,CAAC,IAAN,CAAW,SALU,CAAvB;EAOD;;EAED,OAAO,KAAP;AACD,CA9BM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\nexport const selectClassNames: SlotClassNames<SelectSlots> = {\n root: 'fui-Select',\n select: 'fui-Select__select',\n icon: 'fui-Select__icon',\n};\n\nconst iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px',\n};\n\n// TODO: This 400 style is not in the typography styles.\n// May need a design change\nconst contentSizes = {\n 400: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n};\n\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n/* end of shared values */\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexWrap: 'nowrap',\n fontFamily: tokens.fontFamilyBase,\n position: 'relative',\n\n '&::after': {\n backgroundImage: `linear-gradient(\n 0deg,\n ${tokens.colorCompoundBrandStroke} 0%,\n ${tokens.colorCompoundBrandStroke} 50%,\n transparent 50%,\n transparent 100%\n )`,\n ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n content: '\"\"',\n height: tokens.borderRadiusMedium,\n position: 'absolute',\n bottom: '0',\n left: '0',\n right: '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\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 },\n});\n\nconst useSelectStyles = makeStyles({\n base: {\n appearance: 'none',\n ...shorthands.border('1px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxShadow: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n flexGrow: 1,\n\n ':focus': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n small: {\n height: fieldHeights.small,\n ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\n ...typographyStyles.caption1,\n },\n medium: {\n height: fieldHeights.medium,\n ...shorthands.padding('0', tokens.spacingHorizontalMNudge),\n ...typographyStyles.body1,\n },\n large: {\n height: fieldHeights.large,\n ...shorthands.padding('0', tokens.spacingHorizontalM),\n ...contentSizes[400],\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom('1px', '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});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n position: 'absolute',\n right: tokens.spacingHorizontalMNudge,\n pointerEvents: 'none',\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 disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n small: {\n fontSize: iconSizes.small,\n height: iconSizes.small,\n paddingRight: tokens.spacingHorizontalSNudge,\n paddingLeft: tokens.spacingHorizontalXXS,\n width: iconSizes.small,\n },\n medium: {\n fontSize: iconSizes.medium,\n height: iconSizes.medium,\n paddingRight: tokens.spacingHorizontalM,\n paddingLeft: tokens.spacingHorizontalXXS,\n width: iconSizes.medium,\n },\n large: {\n fontSize: iconSizes.large,\n height: iconSizes.large,\n paddingRight: tokens.spacingHorizontalM,\n paddingLeft: tokens.spacingHorizontalSNudge,\n width: iconSizes.large,\n },\n});\n\n/**\n * Apply styling to the Select slots based on the state\n */\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n const { size, appearance } = state;\n const disabled = state.select.disabled;\n\n const iconStyles = useIconStyles();\n const rootStyles = useRootStyles();\n const selectStyles = useSelectStyles();\n\n state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n\n state.select.className = mergeClasses(\n selectClassNames.select,\n selectStyles.base,\n selectStyles[size],\n selectStyles[appearance],\n disabled && selectStyles.disabled,\n state.select.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n selectClassNames.icon,\n iconStyles.icon,\n disabled && iconStyles.disabled,\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,QAAA,gBAAA,OAAA,CAAA,UAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,QAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,MAAA;AAAM;AAAN,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,qBAAA;AAAqB;AAArB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,wBAAA;AAAwB;AAAxB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,kBAAA;AAAkB;AAAlB,CAAA","sourcesContent":["export {\n Select,\n selectClassNames,\n renderSelect_unstable,\n useSelectStyles_unstable,\n useSelect_unstable,\n} from './Select';\nexport type { SelectProps, SelectSlots, SelectState } from './Select';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,QAAA,gBAAA,OAAA,CAAA,UAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,QAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,MAAA;EAAM;AAAN,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,gBAAA;EAAgB;AAAhB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,qBAAA;EAAqB;AAArB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,wBAAA;EAAwB;AAAxB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA","sourcesContent":["export {\n Select,\n selectClassNames,\n renderSelect_unstable,\n useSelectStyles_unstable,\n useSelect_unstable,\n} from './Select';\nexport type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './Select';\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-select",
3
- "version": "9.0.0-beta.1",
3
+ "version": "9.0.0-beta.10",
4
4
  "description": "Fluent UI React Select component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -21,20 +21,20 @@
21
21
  "start": "yarn storybook",
22
22
  "test": "jest --passWithNoTests",
23
23
  "docs": "api-extractor run --config=config/api-extractor.local.json --local",
24
- "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-select/src && yarn docs",
25
- "storybook": "node ../../../scripts/storybook/runner",
24
+ "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-select/src && yarn docs",
25
+ "storybook": "start-storybook",
26
26
  "type-check": "tsc -b tsconfig.json"
27
27
  },
28
28
  "devDependencies": {
29
29
  "@fluentui/eslint-plugin": "*",
30
30
  "@fluentui/react-conformance": "*",
31
- "@fluentui/react-conformance-griffel": "9.0.0-beta.7"
31
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.14"
32
32
  },
33
33
  "dependencies": {
34
- "@fluentui/react-icons": "^2.0.166-rc.3",
35
- "@fluentui/react-theme": "9.0.0-rc.9",
36
- "@fluentui/react-utilities": "9.0.0-rc.9",
37
- "@griffel/react": "1.0.5",
34
+ "@fluentui/react-icons": "^2.0.175",
35
+ "@fluentui/react-theme": "^9.1.0",
36
+ "@fluentui/react-utilities": "^9.1.0",
37
+ "@griffel/react": "^1.3.0",
38
38
  "tslib": "^2.1.0"
39
39
  },
40
40
  "peerDependencies": {
package/dist/tsdoc-metadata.json DELETED
@@ -1,11 +0,0 @@
1
- // This file is read by tools that parse documentation comments conforming to the TSDoc standard.
2
- // It should be published with your NPM package. It should not be tracked by Git.
3
- {
4
- "tsdocVersion": "0.12",
5
- "toolPackages": [
6
- {
7
- "packageName": "@microsoft/api-extractor",
8
- "packageVersion": "7.18.1"
9
- }
10
- ]
11
- }