@fluentui/react-select 9.0.0-beta.1 → 9.0.0-beta.2
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.
- package/CHANGELOG.json +40 -1
- package/CHANGELOG.md +15 -2
- package/lib/components/Select/useSelectStyles.js +30 -8
- package/lib/components/Select/useSelectStyles.js.map +1 -1
- package/lib-commonjs/components/Select/useSelectStyles.js +30 -8
- package/lib-commonjs/components/Select/useSelectStyles.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,46 @@
|
|
|
2
2
|
"name": "@fluentui/react-select",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 31 May 2022 21:26:38 GMT",
|
|
6
|
+
"tag": "@fluentui/react-select_v9.0.0-beta.2",
|
|
7
|
+
"version": "9.0.0-beta.2",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "sarah.higley@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-select",
|
|
13
|
+
"commit": "969708ea8759adeceb51f3d60a401989ceb2a9b4",
|
|
14
|
+
"comment": "update disabled select style"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "olfedias@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-select",
|
|
19
|
+
"commit": "0a5e9fa77a72eecafdd07034ccdc0b95fd49877c",
|
|
20
|
+
"comment": "chore: Update Griffel to latest version"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "tristan.watanabe@gmail.com",
|
|
24
|
+
"package": "@fluentui/react-select",
|
|
25
|
+
"commit": "45f628f2adb838d206f374887217ea8fc8e0e433",
|
|
26
|
+
"comment": "Remove usage of focus-visible pseudo-class."
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-select",
|
|
31
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.10",
|
|
32
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-select",
|
|
37
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8",
|
|
38
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
39
|
+
}
|
|
40
|
+
]
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"date": "Thu, 26 May 2022 21:01:28 GMT",
|
|
6
45
|
"tag": "@fluentui/react-select_v9.0.0-beta.1",
|
|
7
46
|
"version": "9.0.0-beta.1",
|
|
8
47
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,25 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-select
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 31 May 2022 21:26:38 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.2)
|
|
8
|
+
|
|
9
|
+
Tue, 31 May 2022 21:26:38 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.1..@fluentui/react-select_v9.0.0-beta.2)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- update disabled select style ([PR #23265](https://github.com/microsoft/fluentui/pull/23265) by sarah.higley@microsoft.com)
|
|
15
|
+
- chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
|
|
16
|
+
- Remove usage of focus-visible pseudo-class. ([PR #23282](https://github.com/microsoft/fluentui/pull/23282) by tristan.watanabe@gmail.com)
|
|
17
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
18
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
19
|
+
|
|
7
20
|
## [9.0.0-beta.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.1)
|
|
8
21
|
|
|
9
|
-
Thu, 26 May 2022 21:
|
|
22
|
+
Thu, 26 May 2022 21:01:28 GMT
|
|
10
23
|
[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
24
|
|
|
12
25
|
### Changes
|
|
@@ -83,14 +83,30 @@ const useSelectStyles = /*#__PURE__*/__styles({
|
|
|
83
83
|
"B7ck84d": "f1ewtqcl",
|
|
84
84
|
"sj55zd": "f19n0e5",
|
|
85
85
|
"Bh6795r": "fqerorx",
|
|
86
|
-
"
|
|
87
|
-
"
|
|
88
|
-
"
|
|
86
|
+
"B3aqqti": "fatbyko",
|
|
87
|
+
"Brovlpu": "f1grzc83",
|
|
88
|
+
"Bxa1mx5": "f19shzzi"
|
|
89
89
|
},
|
|
90
90
|
"disabled": {
|
|
91
91
|
"De3pzq": "f1c21dwh",
|
|
92
|
+
"B4j52fo": "f5ogflp",
|
|
93
|
+
"Bekrc4i": ["f1hqa2wf", "finvdd3"],
|
|
94
|
+
"Bn0qgzm": "f1f09k3d",
|
|
95
|
+
"ibv6hh": ["finvdd3", "f1hqa2wf"],
|
|
96
|
+
"icvyot": "fzkkow9",
|
|
97
|
+
"vrafjx": ["fcdblym", "fjik90z"],
|
|
98
|
+
"oivjwe": "fg706s2",
|
|
99
|
+
"wvpqe5": ["fjik90z", "fcdblym"],
|
|
100
|
+
"g2u3we": "f1jj8ep1",
|
|
101
|
+
"h3c5rm": ["f15xbau", "fy0fskl"],
|
|
102
|
+
"B9xav0g": "f4ikngz",
|
|
103
|
+
"zhjwy3": ["fy0fskl", "f15xbau"],
|
|
92
104
|
"sj55zd": "f1s2aq7o",
|
|
93
|
-
"Bceei9c": "fdrzuqr"
|
|
105
|
+
"Bceei9c": "fdrzuqr",
|
|
106
|
+
"Bjwas2f": "fg455y9",
|
|
107
|
+
"Bn1d65q": ["f1rvyvqg", "f14g86mu"],
|
|
108
|
+
"Bxeuatn": "f1cwzwz",
|
|
109
|
+
"n51gp8": ["f14g86mu", "f1rvyvqg"]
|
|
94
110
|
},
|
|
95
111
|
"small": {
|
|
96
112
|
"Bqenvij": "frvgh55",
|
|
@@ -155,8 +171,9 @@ const useSelectStyles = /*#__PURE__*/__styles({
|
|
|
155
171
|
"De3pzq": "f16xq7d1"
|
|
156
172
|
}
|
|
157
173
|
}, {
|
|
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
|
-
"
|
|
174
|
+
"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);}"],
|
|
175
|
+
"f": [".fatbyko:focus{outline-width:2px;}", ".f1grzc83:focus{outline-style:solid;}", ".f19shzzi:focus{outline-color:transparent;}"],
|
|
176
|
+
"t": ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", "@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", "@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}"]
|
|
160
177
|
});
|
|
161
178
|
|
|
162
179
|
const useIconStyles = /*#__PURE__*/__styles({
|
|
@@ -169,6 +186,10 @@ const useIconStyles = /*#__PURE__*/__styles({
|
|
|
169
186
|
"Bkecrkj": "f1aehjj5",
|
|
170
187
|
"Bo70h7d": "fvc9v3g"
|
|
171
188
|
},
|
|
189
|
+
"disabled": {
|
|
190
|
+
"sj55zd": "f1s2aq7o",
|
|
191
|
+
"Bbusuzp": "f1dcs8yz"
|
|
192
|
+
},
|
|
172
193
|
"small": {
|
|
173
194
|
"Be2twd7": "f4ybsrx",
|
|
174
195
|
"Bqenvij": "fd461yt",
|
|
@@ -191,7 +212,8 @@ const useIconStyles = /*#__PURE__*/__styles({
|
|
|
191
212
|
"a9b677": "fq4mcun"
|
|
192
213
|
}
|
|
193
214
|
}, {
|
|
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;}"]
|
|
215
|
+
"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;}"],
|
|
216
|
+
"t": ["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}"]
|
|
195
217
|
});
|
|
196
218
|
/**
|
|
197
219
|
* Apply styling to the Select slots based on the state
|
|
@@ -211,7 +233,7 @@ export const useSelectStyles_unstable = state => {
|
|
|
211
233
|
state.select.className = mergeClasses(selectClassNames.select, selectStyles.base, selectStyles[size], selectStyles[appearance], disabled && selectStyles.disabled, state.select.className);
|
|
212
234
|
|
|
213
235
|
if (state.icon) {
|
|
214
|
-
state.icon.className = mergeClasses(selectClassNames.icon, iconStyles.icon, iconStyles[size], state.icon.className);
|
|
236
|
+
state.icon.className = mergeClasses(selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);
|
|
215
237
|
}
|
|
216
238
|
|
|
217
239
|
return state;
|
|
@@ -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;;
|
|
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': {\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/"}
|
|
@@ -92,14 +92,30 @@ const useSelectStyles = /*#__PURE__*/react_1.__styles({
|
|
|
92
92
|
"B7ck84d": "f1ewtqcl",
|
|
93
93
|
"sj55zd": "f19n0e5",
|
|
94
94
|
"Bh6795r": "fqerorx",
|
|
95
|
-
"
|
|
96
|
-
"
|
|
97
|
-
"
|
|
95
|
+
"B3aqqti": "fatbyko",
|
|
96
|
+
"Brovlpu": "f1grzc83",
|
|
97
|
+
"Bxa1mx5": "f19shzzi"
|
|
98
98
|
},
|
|
99
99
|
"disabled": {
|
|
100
100
|
"De3pzq": "f1c21dwh",
|
|
101
|
+
"B4j52fo": "f5ogflp",
|
|
102
|
+
"Bekrc4i": ["f1hqa2wf", "finvdd3"],
|
|
103
|
+
"Bn0qgzm": "f1f09k3d",
|
|
104
|
+
"ibv6hh": ["finvdd3", "f1hqa2wf"],
|
|
105
|
+
"icvyot": "fzkkow9",
|
|
106
|
+
"vrafjx": ["fcdblym", "fjik90z"],
|
|
107
|
+
"oivjwe": "fg706s2",
|
|
108
|
+
"wvpqe5": ["fjik90z", "fcdblym"],
|
|
109
|
+
"g2u3we": "f1jj8ep1",
|
|
110
|
+
"h3c5rm": ["f15xbau", "fy0fskl"],
|
|
111
|
+
"B9xav0g": "f4ikngz",
|
|
112
|
+
"zhjwy3": ["fy0fskl", "f15xbau"],
|
|
101
113
|
"sj55zd": "f1s2aq7o",
|
|
102
|
-
"Bceei9c": "fdrzuqr"
|
|
114
|
+
"Bceei9c": "fdrzuqr",
|
|
115
|
+
"Bjwas2f": "fg455y9",
|
|
116
|
+
"Bn1d65q": ["f1rvyvqg", "f14g86mu"],
|
|
117
|
+
"Bxeuatn": "f1cwzwz",
|
|
118
|
+
"n51gp8": ["f14g86mu", "f1rvyvqg"]
|
|
103
119
|
},
|
|
104
120
|
"small": {
|
|
105
121
|
"Bqenvij": "frvgh55",
|
|
@@ -164,8 +180,9 @@ const useSelectStyles = /*#__PURE__*/react_1.__styles({
|
|
|
164
180
|
"De3pzq": "f16xq7d1"
|
|
165
181
|
}
|
|
166
182
|
}, {
|
|
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
|
-
"
|
|
183
|
+
"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);}"],
|
|
184
|
+
"f": [".fatbyko:focus{outline-width:2px;}", ".f1grzc83:focus{outline-style:solid;}", ".f19shzzi:focus{outline-color:transparent;}"],
|
|
185
|
+
"t": ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", "@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", "@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}"]
|
|
169
186
|
});
|
|
170
187
|
|
|
171
188
|
const useIconStyles = /*#__PURE__*/react_1.__styles({
|
|
@@ -178,6 +195,10 @@ const useIconStyles = /*#__PURE__*/react_1.__styles({
|
|
|
178
195
|
"Bkecrkj": "f1aehjj5",
|
|
179
196
|
"Bo70h7d": "fvc9v3g"
|
|
180
197
|
},
|
|
198
|
+
"disabled": {
|
|
199
|
+
"sj55zd": "f1s2aq7o",
|
|
200
|
+
"Bbusuzp": "f1dcs8yz"
|
|
201
|
+
},
|
|
181
202
|
"small": {
|
|
182
203
|
"Be2twd7": "f4ybsrx",
|
|
183
204
|
"Bqenvij": "fd461yt",
|
|
@@ -200,7 +221,8 @@ const useIconStyles = /*#__PURE__*/react_1.__styles({
|
|
|
200
221
|
"a9b677": "fq4mcun"
|
|
201
222
|
}
|
|
202
223
|
}, {
|
|
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;}"]
|
|
224
|
+
"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;}"],
|
|
225
|
+
"t": ["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}"]
|
|
204
226
|
});
|
|
205
227
|
/**
|
|
206
228
|
* Apply styling to the Select slots based on the state
|
|
@@ -220,7 +242,7 @@ const useSelectStyles_unstable = state => {
|
|
|
220
242
|
state.select.className = react_1.mergeClasses(exports.selectClassNames.select, selectStyles.base, selectStyles[size], selectStyles[appearance], disabled && selectStyles.disabled, state.select.className);
|
|
221
243
|
|
|
222
244
|
if (state.icon) {
|
|
223
|
-
state.icon.className = react_1.mergeClasses(exports.selectClassNames.icon, iconStyles.icon, iconStyles[size], state.icon.className);
|
|
245
|
+
state.icon.className = react_1.mergeClasses(exports.selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);
|
|
224
246
|
}
|
|
225
247
|
|
|
226
248
|
return state;
|
|
@@ -1 +1 @@
|
|
|
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;AAC3D,EAAA,IAAI,EAAE,YADqD;AAE3D,EAAA,MAAM,EAAE,oBAFmD;AAG3D,EAAA,IAAI,EAAE;AAHqD,CAAhD;AAMb,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,aAAA,CAAA,MAAA,CAAO,eADd;AAEH,IAAA,UAAU,EAAE,aAAA,CAAA,MAAA,CAAO;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,OAAA,SAAA;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,OAAA,SAAA;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;;
|
|
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': {\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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-select",
|
|
3
|
-
"version": "9.0.0-beta.
|
|
3
|
+
"version": "9.0.0-beta.2",
|
|
4
4
|
"description": "Fluent UI React Select component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -28,13 +28,13 @@
|
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
30
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.8"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@fluentui/react-icons": "^2.0.166-rc.3",
|
|
35
35
|
"@fluentui/react-theme": "9.0.0-rc.9",
|
|
36
|
-
"@fluentui/react-utilities": "9.0.0-rc.
|
|
37
|
-
"@griffel/react": "1.0
|
|
36
|
+
"@fluentui/react-utilities": "9.0.0-rc.10",
|
|
37
|
+
"@griffel/react": "1.1.0",
|
|
38
38
|
"tslib": "^2.1.0"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|