@fluentui/react-switch 0.0.0-nightly-20230109-0423.1 → 0.0.0-nightly-20230110-0424.1
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 +48 -15
- package/CHANGELOG.md +22 -10
- package/lib/components/Switch/useSwitchStyles.js +14 -163
- package/lib/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.js +13 -162
- package/lib-commonjs/components/Switch/useSwitchStyles.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-switch",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-switch_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Tue, 10 Jan 2023 04:30:57 GMT",
|
|
6
|
+
"tag": "@fluentui/react-switch_v0.0.0-nightly-20230110-0424.1",
|
|
7
|
+
"version": "0.0.0-nightly-20230110-0424.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,38 +16,71 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-switch",
|
|
19
|
-
"comment": "Bump @fluentui/react-field to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-field to v0.0.0-nightly-20230110-0424.1",
|
|
20
|
+
"commit": "bd68cab128eb040a3f480ee9dcd89237ca3dc4d4"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-switch",
|
|
25
|
-
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20230110-0424.1",
|
|
26
|
+
"commit": "bd68cab128eb040a3f480ee9dcd89237ca3dc4d4"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-switch",
|
|
31
|
-
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230110-0424.1",
|
|
32
|
+
"commit": "bd68cab128eb040a3f480ee9dcd89237ca3dc4d4"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-switch",
|
|
37
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230110-0424.1",
|
|
38
|
+
"commit": "bd68cab128eb040a3f480ee9dcd89237ca3dc4d4"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-switch",
|
|
43
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230110-0424.1",
|
|
44
|
+
"commit": "bd68cab128eb040a3f480ee9dcd89237ca3dc4d4"
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
"author": "beachball",
|
|
48
48
|
"package": "@fluentui/react-switch",
|
|
49
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
50
|
-
"commit": "
|
|
49
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230110-0424.1",
|
|
50
|
+
"commit": "bd68cab128eb040a3f480ee9dcd89237ca3dc4d4"
|
|
51
|
+
}
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"date": "Mon, 09 Jan 2023 14:35:02 GMT",
|
|
57
|
+
"tag": "@fluentui/react-switch_v9.0.17",
|
|
58
|
+
"version": "9.0.17",
|
|
59
|
+
"comments": {
|
|
60
|
+
"patch": [
|
|
61
|
+
{
|
|
62
|
+
"author": "beachball",
|
|
63
|
+
"package": "@fluentui/react-switch",
|
|
64
|
+
"comment": "Bump @fluentui/react-field to v9.0.0-alpha.14",
|
|
65
|
+
"commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "beachball",
|
|
69
|
+
"package": "@fluentui/react-switch",
|
|
70
|
+
"comment": "Bump @fluentui/react-label to v9.0.16",
|
|
71
|
+
"commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "beachball",
|
|
75
|
+
"package": "@fluentui/react-switch",
|
|
76
|
+
"comment": "Bump @fluentui/react-tabster to v9.3.6",
|
|
77
|
+
"commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"author": "beachball",
|
|
81
|
+
"package": "@fluentui/react-switch",
|
|
82
|
+
"comment": "Bump @fluentui/react-utilities to v9.4.0",
|
|
83
|
+
"commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
|
|
51
84
|
}
|
|
52
85
|
]
|
|
53
86
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,23 +1,35 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-switch
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 10 Jan 2023 04:30:57 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20230110-0424.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v0.0.0-nightly-20230110-0424.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.
|
|
9
|
+
Tue, 10 Jan 2023 04:30:57 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.17..@fluentui/react-switch_v0.0.0-nightly-20230110-0424.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-field to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-label to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-field to v0.0.0-nightly-20230110-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/bd68cab128eb040a3f480ee9dcd89237ca3dc4d4) by beachball)
|
|
16
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20230110-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/bd68cab128eb040a3f480ee9dcd89237ca3dc4d4) by beachball)
|
|
17
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20230110-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/bd68cab128eb040a3f480ee9dcd89237ca3dc4d4) by beachball)
|
|
18
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20230110-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/bd68cab128eb040a3f480ee9dcd89237ca3dc4d4) by beachball)
|
|
19
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230110-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/bd68cab128eb040a3f480ee9dcd89237ca3dc4d4) by beachball)
|
|
20
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230110-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/bd68cab128eb040a3f480ee9dcd89237ca3dc4d4) by beachball)
|
|
21
|
+
|
|
22
|
+
## [9.0.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.17)
|
|
23
|
+
|
|
24
|
+
Mon, 09 Jan 2023 14:35:02 GMT
|
|
25
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.16..@fluentui/react-switch_v9.0.17)
|
|
26
|
+
|
|
27
|
+
### Patches
|
|
28
|
+
|
|
29
|
+
- Bump @fluentui/react-field to v9.0.0-alpha.14 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
|
|
30
|
+
- Bump @fluentui/react-label to v9.0.16 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
|
|
31
|
+
- Bump @fluentui/react-tabster to v9.3.6 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
|
|
32
|
+
- Bump @fluentui/react-utilities to v9.4.0 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
|
|
21
33
|
|
|
22
34
|
## [9.0.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.16)
|
|
23
35
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
|
-
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
3
|
+
import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
4
4
|
export const switchClassNames = {
|
|
5
5
|
root: 'fui-Switch',
|
|
6
6
|
indicator: 'fui-Switch__indicator',
|
|
@@ -16,164 +16,24 @@ const spaceBetweenThumbAndTrack = 2;
|
|
|
16
16
|
const trackHeight = 20;
|
|
17
17
|
const trackWidth = 40;
|
|
18
18
|
const thumbSize = trackHeight - spaceBetweenThumbAndTrack;
|
|
19
|
+
const useRootBaseClassName = /*#__PURE__*/__resetStyles("r1u7w45w", "rlzel8d", [".r1u7w45w{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}", ".r1u7w45w:focus{outline-style:none;}", ".r1u7w45w:focus-visible{outline-style:none;}", ".r1u7w45w[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1u7w45w[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;left:-2px;right:-2px;}", ".rlzel8d{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}", ".rlzel8d:focus{outline-style:none;}", ".rlzel8d:focus-visible{outline-style:none;}", ".rlzel8d[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".rlzel8d[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;right:-2px;left:-2px;}"]);
|
|
19
20
|
const useRootStyles = /*#__PURE__*/__styles({
|
|
20
|
-
base: {
|
|
21
|
-
Bt984gj: "f6jr5hl",
|
|
22
|
-
B7ck84d: "f1ewtqcl",
|
|
23
|
-
mc9l5x: "ftuwxu6",
|
|
24
|
-
qhf8xq: "f10pi13n",
|
|
25
|
-
Brovlpu: "ftqa4ok",
|
|
26
|
-
B486eqv: "f2hkw1w",
|
|
27
|
-
Bssx7fj: "f1b1k54r",
|
|
28
|
-
uh7if5: ["f4ne723", "fqqcjud"],
|
|
29
|
-
clntm0: "fh7aioi",
|
|
30
|
-
Dlk2r6: ["fqqcjud", "f4ne723"],
|
|
31
|
-
B2j2mmj: "ffht0p2",
|
|
32
|
-
wigs8: "f1p0ul1q",
|
|
33
|
-
pbfy6t: "f1c901ms",
|
|
34
|
-
B0v4ure: "f1alokd7",
|
|
35
|
-
ghq09: "f78i1la",
|
|
36
|
-
B24cy0v: ["f1kvsw7t", "f1bw8brt"],
|
|
37
|
-
Bwckmig: "f8k7e5g",
|
|
38
|
-
Bvwlmkc: ["f1bw8brt", "f1kvsw7t"],
|
|
39
|
-
Bbgo44z: "f1pmxfrl",
|
|
40
|
-
Bil7v7r: ["fszkfcr", "f1ap5ily"],
|
|
41
|
-
skfxo0: "f57dp0y",
|
|
42
|
-
jo1ztg: ["f1ap5ily", "fszkfcr"],
|
|
43
|
-
Ba3ybja: ["f11dm2qb", "f136rfnd"],
|
|
44
|
-
az1dzo: ["f136rfnd", "f11dm2qb"],
|
|
45
|
-
vppk2z: ["fdsq1qd", "f1khssms"],
|
|
46
|
-
B6352mv: ["f1khssms", "fdsq1qd"],
|
|
47
|
-
nr063g: "fq4eyks",
|
|
48
|
-
Blmvk6g: ["f1ya6x16", "ftuszwa"],
|
|
49
|
-
Bsiemmq: "f1e2iu44",
|
|
50
|
-
B98u21t: ["ftuszwa", "f1ya6x16"],
|
|
51
|
-
B2pnrqr: "f1xkdug0",
|
|
52
|
-
Bhhzhcn: "f1m1ywml",
|
|
53
|
-
Bec0n69: ["f7u4kgv", "f1a36mvi"],
|
|
54
|
-
B29w5g4: ["f1a36mvi", "f7u4kgv"]
|
|
55
|
-
},
|
|
56
21
|
vertical: {
|
|
57
22
|
Beiy3e4: "f1vx9l62"
|
|
58
23
|
}
|
|
59
24
|
}, {
|
|
60
|
-
d: [".
|
|
61
|
-
f: [".ftqa4ok:focus{outline-style:none;}"],
|
|
62
|
-
i: [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
25
|
+
d: [".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"]
|
|
63
26
|
});
|
|
27
|
+
const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("r13wlxb8", null, [".r13wlxb8{border-radius:var(--borderRadiusCircular);border:1px solid;line-height:0;box-sizing:border-box;fill:currentColor;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:18px;height:20px;margin:var(--spacingVerticalS) var(--spacingHorizontalS);pointer-events:none;transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:background,border,color;width:40px;}", "@media screen and (prefers-reduced-motion: reduce){.r13wlxb8{transition-duration:0.01ms;}}", ".r13wlxb8>*{transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:transform;}", "@media screen and (prefers-reduced-motion: reduce){.r13wlxb8>*{transition-duration:0.01ms;}}"]);
|
|
64
28
|
const useIndicatorStyles = /*#__PURE__*/__styles({
|
|
65
|
-
base: {
|
|
66
|
-
Bbmb7ep: ["f8fbkgy", "f1nfllo7"],
|
|
67
|
-
Beyfa6y: ["f1nfllo7", "f8fbkgy"],
|
|
68
|
-
B7oj6ja: ["f1djnp8u", "f1s8kh49"],
|
|
69
|
-
Btl43ni: ["f1s8kh49", "f1djnp8u"],
|
|
70
|
-
icvyot: "fzkkow9",
|
|
71
|
-
vrafjx: ["fcdblym", "fjik90z"],
|
|
72
|
-
oivjwe: "fg706s2",
|
|
73
|
-
wvpqe5: ["fjik90z", "fcdblym"],
|
|
74
|
-
B4j52fo: "f5ogflp",
|
|
75
|
-
Bekrc4i: ["f1hqa2wf", "finvdd3"],
|
|
76
|
-
Bn0qgzm: "f1f09k3d",
|
|
77
|
-
ibv6hh: ["finvdd3", "f1hqa2wf"],
|
|
78
|
-
Bg96gwp: "fez10in",
|
|
79
|
-
B7ck84d: "f1ewtqcl",
|
|
80
|
-
Bkfmm31: "f1w9h62z",
|
|
81
|
-
Bnnss6s: "fi64zpg",
|
|
82
|
-
Be2twd7: "fg38ndl",
|
|
83
|
-
Bqenvij: "fjamq6b",
|
|
84
|
-
B6of3ja: "frnwi6n",
|
|
85
|
-
t21cq0: ["f1vcna3q", "foyynoy"],
|
|
86
|
-
jrapky: "fqcjy3b",
|
|
87
|
-
Frg6f3: ["foyynoy", "f1vcna3q"],
|
|
88
|
-
Bkecrkj: "f1aehjj5",
|
|
89
|
-
B3o57yi: "f1vze9yt",
|
|
90
|
-
Bkqvd7p: "f17wnm97",
|
|
91
|
-
Bmy1vo4: "fo99fu7",
|
|
92
|
-
a9b677: "feqmc2u",
|
|
93
|
-
Hwfdqs: "f1onx1g3",
|
|
94
|
-
Hkqiji: "f1h74hm9",
|
|
95
|
-
Bgrs90m: "f1592id",
|
|
96
|
-
B0zx559: "f1uwej41",
|
|
97
|
-
c0im90: "fpz7fqq"
|
|
98
|
-
},
|
|
99
29
|
labelAbove: {
|
|
100
30
|
B6of3ja: "f1hu3pq6"
|
|
101
31
|
}
|
|
102
32
|
}, {
|
|
103
|
-
d: [".
|
|
104
|
-
m: [["@media screen and (prefers-reduced-motion: reduce){.f1onx1g3{transition-duration:0.01ms;}}", {
|
|
105
|
-
m: "screen and (prefers-reduced-motion: reduce)"
|
|
106
|
-
}], ["@media screen and (prefers-reduced-motion: reduce){.fpz7fqq>*{transition-duration:0.01ms;}}", {
|
|
107
|
-
m: "screen and (prefers-reduced-motion: reduce)"
|
|
108
|
-
}]]
|
|
33
|
+
d: [".f1hu3pq6{margin-top:0;}"]
|
|
109
34
|
});
|
|
35
|
+
const useInputBaseClassName = /*#__PURE__*/__resetStyles("r92li9d", "rxjpw57", [".r92li9d{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}", ".r92li9d:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}", ".r92li9d:disabled{cursor:default;}", ".r92li9d:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".r92li9d:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", ".r92li9d:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}", ".r92li9d:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".r92li9d:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r92li9d:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r92li9d:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}", ".r92li9d:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}", ".r92li9d:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}", ".r92li9d:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}", ".r92li9d:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}", "@media (forced-colors: active){.r92li9d:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.r92li9d:disabled~.fui-Switch__label{color:GrayText;}}", ".rxjpw57{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}", ".rxjpw57:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px);}", ".rxjpw57:disabled{cursor:default;}", ".rxjpw57:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".rxjpw57:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", ".rxjpw57:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}", ".rxjpw57:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".rxjpw57:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}", ".rxjpw57:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".rxjpw57:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}", ".rxjpw57:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}", ".rxjpw57:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}", ".rxjpw57:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}", ".rxjpw57:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}", "@media (forced-colors: active){.rxjpw57:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.rxjpw57:disabled~.fui-Switch__label{color:GrayText;}}"]);
|
|
110
36
|
const useInputStyles = /*#__PURE__*/__styles({
|
|
111
|
-
base: {
|
|
112
|
-
B7ck84d: "f1ewtqcl",
|
|
113
|
-
Bceei9c: "f1k6fduh",
|
|
114
|
-
Bqenvij: "f1l02sjl",
|
|
115
|
-
B6of3ja: "f1hu3pq6",
|
|
116
|
-
t21cq0: ["f11qmguv", "f1tyq0we"],
|
|
117
|
-
jrapky: "f19f4twv",
|
|
118
|
-
Frg6f3: ["f1tyq0we", "f11qmguv"],
|
|
119
|
-
abs64n: "fk73vx1",
|
|
120
|
-
qhf8xq: "f1euv43f",
|
|
121
|
-
a9b677: "f1ry1bn9",
|
|
122
|
-
fv8x6k: ["f3l1kk6", "f1kez0x4"],
|
|
123
|
-
ezr58z: "fvxnmui",
|
|
124
|
-
Blezdol: "f1cxq9o1",
|
|
125
|
-
k28iui: "f1q9yyk5",
|
|
126
|
-
B8f96ig: "f1ks1zsm",
|
|
127
|
-
po7uxr: "fiqfi0i",
|
|
128
|
-
inq7wv: "f9aagkg",
|
|
129
|
-
Cdugon: ["fgv8l18", "f1p3jmxb"],
|
|
130
|
-
ptsei1: "f11yi64e",
|
|
131
|
-
bl04ud: ["f1p3jmxb", "fgv8l18"],
|
|
132
|
-
Bu7dm46: "fthrly9",
|
|
133
|
-
Gwwlnz: "fhdp2ht",
|
|
134
|
-
wb1her: "f1rzj6jj",
|
|
135
|
-
Bmieemq: ["f1jywl1l", "f13d626x"],
|
|
136
|
-
Bdgjgzg: "f1ivtmze",
|
|
137
|
-
B05cvx7: ["f13d626x", "f1jywl1l"],
|
|
138
|
-
Bx4eqiv: "f1uvnr57",
|
|
139
|
-
xhnoxe: "frhcydi",
|
|
140
|
-
Hnmc4c: ["f1pvt3n7", "f14i0clv"],
|
|
141
|
-
By8gkvz: "fq9gcw4",
|
|
142
|
-
lekrm4: ["f14i0clv", "f1pvt3n7"],
|
|
143
|
-
Bei91sp: "f1se0d6r",
|
|
144
|
-
Bksztz9: "f8l9son",
|
|
145
|
-
h3gz1v: "f1c4gun2",
|
|
146
|
-
Cw6427: ["flhgtcm", "fx1zdd8"],
|
|
147
|
-
Bpbd9g9: "fayrp2e",
|
|
148
|
-
ssulyh: ["fx1zdd8", "flhgtcm"],
|
|
149
|
-
vq7rp1: "f1p715pa",
|
|
150
|
-
ynrfiu: "firogjh",
|
|
151
|
-
Bf5tpyt: ["f1crd6p1", "for8100"],
|
|
152
|
-
Brhic7g: "f1v5j4zb",
|
|
153
|
-
Cqvc5u: ["for8100", "f1crd6p1"],
|
|
154
|
-
B4e80u0: "f116zuoq",
|
|
155
|
-
Bwj41i9: "fxvotg6",
|
|
156
|
-
B2iiaa1: ["fk9ur30", "f3u5smv"],
|
|
157
|
-
Bejmxmv: "fdtj07x",
|
|
158
|
-
rqauf5: ["f3u5smv", "fk9ur30"],
|
|
159
|
-
wo5z87: "fv5mb1o",
|
|
160
|
-
B50joxe: ["f1i2l8ou", "fxj1kmv"],
|
|
161
|
-
Bmuizf1: "fku528b",
|
|
162
|
-
f4urji: ["fxj1kmv", "f1i2l8ou"],
|
|
163
|
-
Bxiq1ly: "fabcpc0",
|
|
164
|
-
vbmdq8: "f17xwy6w",
|
|
165
|
-
u4vbwo: ["fipwscc", "fab39iv"],
|
|
166
|
-
Bfjga03: "f1th5z1l",
|
|
167
|
-
F0s3py: ["fab39iv", "fipwscc"]
|
|
168
|
-
},
|
|
169
|
-
highContrast: {
|
|
170
|
-
Bskmvfo: "f19h63kc",
|
|
171
|
-
zhypoe: "ffutfdj",
|
|
172
|
-
Bb6xxwe: ["f72m8yo", "f1ud47z9"],
|
|
173
|
-
o89t22: "f15xfkur",
|
|
174
|
-
B7qxyha: ["f1ud47z9", "f72m8yo"],
|
|
175
|
-
Bhmcd6p: "f1jaqqzs"
|
|
176
|
-
},
|
|
177
37
|
before: {
|
|
178
38
|
j35jbq: ["f1e31b4d", "f1vgc2s3"],
|
|
179
39
|
Bhzewxz: "f15twtuk"
|
|
@@ -188,21 +48,9 @@ const useInputStyles = /*#__PURE__*/__styles({
|
|
|
188
48
|
a9b677: "fly5x3f"
|
|
189
49
|
}
|
|
190
50
|
}, {
|
|
191
|
-
d: [".
|
|
192
|
-
m: [["@media (forced-colors: active){.f19h63kc:disabled~.fui-Switch__indicator{color:GrayText;}}", {
|
|
193
|
-
m: "(forced-colors: active)"
|
|
194
|
-
}], ["@media (forced-colors: active){.ffutfdj:disabled~.fui-Switch__indicator{border-top-color:GrayText;}}", {
|
|
195
|
-
m: "(forced-colors: active)"
|
|
196
|
-
}], ["@media (forced-colors: active){.f72m8yo:disabled~.fui-Switch__indicator{border-right-color:GrayText;}.f1ud47z9:disabled~.fui-Switch__indicator{border-left-color:GrayText;}}", {
|
|
197
|
-
m: "(forced-colors: active)"
|
|
198
|
-
}], ["@media (forced-colors: active){.f15xfkur:disabled~.fui-Switch__indicator{border-bottom-color:GrayText;}}", {
|
|
199
|
-
m: "(forced-colors: active)"
|
|
200
|
-
}], ["@media (forced-colors: active){.f1ud47z9:disabled~.fui-Switch__indicator{border-left-color:GrayText;}.f72m8yo:disabled~.fui-Switch__indicator{border-right-color:GrayText;}}", {
|
|
201
|
-
m: "(forced-colors: active)"
|
|
202
|
-
}], ["@media (forced-colors: active){.f1jaqqzs:disabled~.fui-Switch__label{color:GrayText;}}", {
|
|
203
|
-
m: "(forced-colors: active)"
|
|
204
|
-
}]]
|
|
51
|
+
d: [".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".f1aar7gd{height:calc(20px + var(--spacingVerticalS));}", ".fly5x3f{width:100%;}"]
|
|
205
52
|
});
|
|
53
|
+
// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
|
|
206
54
|
const useLabelStyles = /*#__PURE__*/__styles({
|
|
207
55
|
base: {
|
|
208
56
|
Bceei9c: "f1k6fduh",
|
|
@@ -231,17 +79,20 @@ const useLabelStyles = /*#__PURE__*/__styles({
|
|
|
231
79
|
* Apply styling to the Switch slots based on the state
|
|
232
80
|
*/
|
|
233
81
|
export const useSwitchStyles_unstable = state => {
|
|
82
|
+
const rootBaseClassName = useRootBaseClassName();
|
|
234
83
|
const rootStyles = useRootStyles();
|
|
84
|
+
const indicatorBaseClassName = useIndicatorBaseClassName();
|
|
235
85
|
const indicatorStyles = useIndicatorStyles();
|
|
86
|
+
const inputBaseClassName = useInputBaseClassName();
|
|
236
87
|
const inputStyles = useInputStyles();
|
|
237
88
|
const labelStyles = useLabelStyles();
|
|
238
89
|
const {
|
|
239
90
|
label,
|
|
240
91
|
labelPosition
|
|
241
92
|
} = state;
|
|
242
|
-
state.root.className = mergeClasses(switchClassNames.root,
|
|
243
|
-
state.indicator.className = mergeClasses(switchClassNames.indicator,
|
|
244
|
-
state.input.className = mergeClasses(switchClassNames.input,
|
|
93
|
+
state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);
|
|
94
|
+
state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);
|
|
95
|
+
state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], state.input.className);
|
|
245
96
|
if (state.label) {
|
|
246
97
|
state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
|
|
247
98
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"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","names":["createFocusOutlineStyle","tokens","mergeClasses","shorthands","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootStyles","useIndicatorStyles","useInputStyles","useLabelStyles","useSwitchStyles_unstable","state","rootStyles","indicatorStyles","inputStyles","labelStyles","labelPosition","className","base","vertical","labelAbove","highContrast"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-switch/src/components/Switch/useSwitchStyles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('1px'),\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n ...shorthands.margin(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n pointerEvents: 'none',\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n '> *': {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n },\n },\n\n labelAbove: {\n marginTop: 0,\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n ...shorthands.margin(0),\n opacity: 0,\n position: 'absolute',\n\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the switch.\n width: `calc(${trackWidth}px + 2 * ${tokens.spacingHorizontalS})`,\n\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`,\n },\n },\n },\n\n // Disabled (both checked and unchecked)\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Enabled and checked\n ':enabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n },\n\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n },\n },\n },\n\n highContrast: {\n '@media (forced-colors: active)': {\n ':disabled': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n ...shorthands.borderColor('GrayText'),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText',\n },\n },\n },\n },\n\n before: {\n right: 0,\n top: 0,\n },\n after: {\n left: 0,\n top: 0,\n },\n above: {\n bottom: 0,\n height: `calc(${trackHeight}px + ${tokens.spacingVerticalS})`,\n width: '100%',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n cursor: 'pointer',\n\n // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n marginBottom: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n marginTop: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n above: {\n paddingTop: tokens.spacingVerticalXS,\n paddingBottom: tokens.spacingVerticalXS,\n width: '100%',\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n before: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n const rootStyles = useRootStyles();\n const indicatorStyles = useIndicatorStyles();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n\n const { label, labelPosition } = state;\n\n state.root.className = mergeClasses(\n switchClassNames.root,\n rootStyles.base,\n labelPosition === 'above' && rootStyles.vertical,\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(\n switchClassNames.indicator,\n indicatorStyles.base,\n label && labelPosition === 'above' && indicatorStyles.labelAbove,\n state.indicator.className,\n );\n\n state.input.className = mergeClasses(\n switchClassNames.input,\n inputStyles.base,\n inputStyles.highContrast,\n label && inputStyles[labelPosition],\n state.input.className,\n );\n\n if (state.label) {\n state.label.className = mergeClasses(\n switchClassNames.label,\n labelStyles.base,\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"]}
|
|
1
|
+
{"version":3,"mappings":"AAAA,SAASA,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,kCAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAItF,OAAO,MAAMC,gBAAgB,GAAgC;EAC3DC,IAAI,EAAE,YAAY;EAClBC,SAAS,EAAE,uBAAuB;EAClCC,KAAK,EAAE,mBAAmB;EAC1BC,KAAK,EAAE;CACR;AAED;;;AAGA,OAAO,MAAMC,eAAe,GAAGL,gBAAgB,CAACC,IAAI;AAEpD;AACA,MAAMK,yBAAyB,GAAG,CAAC;AACnC,MAAMC,WAAW,GAAG,EAAE;AACtB,MAAMC,UAAU,GAAG,EAAE;AACrB,MAAMC,SAAS,GAAGF,WAAW,GAAGD,yBAAyB;AAEzD,MAAMI,oBAAoB,gBAAG,6+EAO3B;AAEF,MAAMC,aAAa,gBAAG;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAIpB;AAEF,MAAMC,yBAAyB,gBAAG,yxBA6BhC;AAEF,MAAMC,kBAAkB,gBAAG;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAIzB;AAEF,MAAMC,qBAAqB,gBAAG,6qIA+G5B;AAEF,MAAMC,cAAc,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAcrB;AAEF;AACA,MAAMC,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAsBrB;AAEF;;;AAGA,OAAO,MAAMC,wBAAwB,GAAIC,KAAkB,IAAiB;EAC1E,MAAMC,iBAAiB,GAAGT,oBAAoB,EAAE;EAChD,MAAMU,UAAU,GAAGT,aAAa,EAAE;EAClC,MAAMU,sBAAsB,GAAGT,yBAAyB,EAAE;EAC1D,MAAMU,eAAe,GAAGT,kBAAkB,EAAE;EAC5C,MAAMU,kBAAkB,GAAGT,qBAAqB,EAAE;EAClD,MAAMU,WAAW,GAAGT,cAAc,EAAE;EACpC,MAAMU,WAAW,GAAGT,cAAc,EAAE;EAEpC,MAAM;IAAEZ,KAAK;IAAEsB;EAAa,CAAE,GAAGR,KAAK;EAEtCA,KAAK,CAACjB,IAAI,CAAC0B,SAAS,GAAG7B,YAAY,CACjCE,gBAAgB,CAACC,IAAI,EACrBkB,iBAAiB,EACjBO,aAAa,KAAK,OAAO,IAAIN,UAAU,CAACQ,QAAQ,EAChDV,KAAK,CAACjB,IAAI,CAAC0B,SAAS,CACrB;EAEDT,KAAK,CAAChB,SAAS,CAACyB,SAAS,GAAG7B,YAAY,CACtCE,gBAAgB,CAACE,SAAS,EAC1BmB,sBAAsB,EACtBjB,KAAK,IAAIsB,aAAa,KAAK,OAAO,IAAIJ,eAAe,CAACO,UAAU,EAChEX,KAAK,CAAChB,SAAS,CAACyB,SAAS,CAC1B;EAEDT,KAAK,CAACf,KAAK,CAACwB,SAAS,GAAG7B,YAAY,CAClCE,gBAAgB,CAACG,KAAK,EACtBoB,kBAAkB,EAClBnB,KAAK,IAAIoB,WAAW,CAACE,aAAa,CAAC,EACnCR,KAAK,CAACf,KAAK,CAACwB,SAAS,CACtB;EAED,IAAIT,KAAK,CAACd,KAAK,EAAE;IACfc,KAAK,CAACd,KAAK,CAACuB,SAAS,GAAG7B,YAAY,CAClCE,gBAAgB,CAACI,KAAK,EACtBqB,WAAW,CAACK,IAAI,EAChBL,WAAW,CAACC,aAAa,CAAC,EAC1BR,KAAK,CAACd,KAAK,CAACuB,SAAS,CACtB;;EAGH,OAAOT,KAAK;AACd,CAAC","names":["createFocusOutlineStyle","tokens","mergeClasses","shorthands","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","useRootStyles","useIndicatorBaseClassName","useIndicatorStyles","useInputBaseClassName","useInputStyles","useLabelStyles","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className","vertical","labelAbove","base"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-switch/src/components/Switch/useSwitchStyles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: '1px solid',\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n pointerEvents: 'none',\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n '> *': {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n labelAbove: {\n marginTop: 0,\n },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the switch.\n width: `calc(${trackWidth}px + 2 * ${tokens.spacingHorizontalS})`,\n\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`,\n },\n },\n },\n\n // Disabled (both checked and unchecked)\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n borderColor: tokens.colorNeutralStrokeAccessible,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n // Enabled and checked\n ':enabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n borderColor: tokens.colorTransparentStroke,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorTransparentStrokeInteractive,\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n borderColor: tokens.colorTransparentStrokeInteractive,\n },\n },\n },\n\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n borderColor: tokens.colorTransparentStrokeDisabled,\n },\n },\n\n '@media (forced-colors: active)': {\n ':disabled': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n borderColor: 'GrayText',\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText',\n },\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n top: 0,\n },\n after: {\n left: 0,\n top: 0,\n },\n above: {\n bottom: 0,\n height: `calc(${trackHeight}px + ${tokens.spacingVerticalS})`,\n width: '100%',\n },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n cursor: 'pointer',\n\n // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n marginBottom: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n marginTop: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n above: {\n paddingTop: tokens.spacingVerticalXS,\n paddingBottom: tokens.spacingVerticalXS,\n width: '100%',\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n before: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n\n const { label, labelPosition } = state;\n\n state.root.className = mergeClasses(\n switchClassNames.root,\n rootBaseClassName,\n labelPosition === 'above' && rootStyles.vertical,\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(\n switchClassNames.indicator,\n indicatorBaseClassName,\n label && labelPosition === 'above' && indicatorStyles.labelAbove,\n state.indicator.className,\n );\n\n state.input.className = mergeClasses(\n switchClassNames.input,\n inputBaseClassName,\n label && inputStyles[labelPosition],\n state.input.className,\n );\n\n if (state.label) {\n state.label.className = mergeClasses(\n switchClassNames.label,\n labelStyles.base,\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"]}
|
|
@@ -22,164 +22,24 @@ const spaceBetweenThumbAndTrack = 2;
|
|
|
22
22
|
const trackHeight = 20;
|
|
23
23
|
const trackWidth = 40;
|
|
24
24
|
const thumbSize = trackHeight - spaceBetweenThumbAndTrack;
|
|
25
|
+
const useRootBaseClassName = /*#__PURE__*/react_1.__resetStyles("r1u7w45w", "rlzel8d", [".r1u7w45w{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}", ".r1u7w45w:focus{outline-style:none;}", ".r1u7w45w:focus-visible{outline-style:none;}", ".r1u7w45w[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1u7w45w[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;left:-2px;right:-2px;}", ".rlzel8d{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}", ".rlzel8d:focus{outline-style:none;}", ".rlzel8d:focus-visible{outline-style:none;}", ".rlzel8d[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".rlzel8d[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;right:-2px;left:-2px;}"]);
|
|
25
26
|
const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
26
|
-
base: {
|
|
27
|
-
Bt984gj: "f6jr5hl",
|
|
28
|
-
B7ck84d: "f1ewtqcl",
|
|
29
|
-
mc9l5x: "ftuwxu6",
|
|
30
|
-
qhf8xq: "f10pi13n",
|
|
31
|
-
Brovlpu: "ftqa4ok",
|
|
32
|
-
B486eqv: "f2hkw1w",
|
|
33
|
-
Bssx7fj: "f1b1k54r",
|
|
34
|
-
uh7if5: ["f4ne723", "fqqcjud"],
|
|
35
|
-
clntm0: "fh7aioi",
|
|
36
|
-
Dlk2r6: ["fqqcjud", "f4ne723"],
|
|
37
|
-
B2j2mmj: "ffht0p2",
|
|
38
|
-
wigs8: "f1p0ul1q",
|
|
39
|
-
pbfy6t: "f1c901ms",
|
|
40
|
-
B0v4ure: "f1alokd7",
|
|
41
|
-
ghq09: "f78i1la",
|
|
42
|
-
B24cy0v: ["f1kvsw7t", "f1bw8brt"],
|
|
43
|
-
Bwckmig: "f8k7e5g",
|
|
44
|
-
Bvwlmkc: ["f1bw8brt", "f1kvsw7t"],
|
|
45
|
-
Bbgo44z: "f1pmxfrl",
|
|
46
|
-
Bil7v7r: ["fszkfcr", "f1ap5ily"],
|
|
47
|
-
skfxo0: "f57dp0y",
|
|
48
|
-
jo1ztg: ["f1ap5ily", "fszkfcr"],
|
|
49
|
-
Ba3ybja: ["f11dm2qb", "f136rfnd"],
|
|
50
|
-
az1dzo: ["f136rfnd", "f11dm2qb"],
|
|
51
|
-
vppk2z: ["fdsq1qd", "f1khssms"],
|
|
52
|
-
B6352mv: ["f1khssms", "fdsq1qd"],
|
|
53
|
-
nr063g: "fq4eyks",
|
|
54
|
-
Blmvk6g: ["f1ya6x16", "ftuszwa"],
|
|
55
|
-
Bsiemmq: "f1e2iu44",
|
|
56
|
-
B98u21t: ["ftuszwa", "f1ya6x16"],
|
|
57
|
-
B2pnrqr: "f1xkdug0",
|
|
58
|
-
Bhhzhcn: "f1m1ywml",
|
|
59
|
-
Bec0n69: ["f7u4kgv", "f1a36mvi"],
|
|
60
|
-
B29w5g4: ["f1a36mvi", "f7u4kgv"]
|
|
61
|
-
},
|
|
62
27
|
vertical: {
|
|
63
28
|
Beiy3e4: "f1vx9l62"
|
|
64
29
|
}
|
|
65
30
|
}, {
|
|
66
|
-
d: [".
|
|
67
|
-
f: [".ftqa4ok:focus{outline-style:none;}"],
|
|
68
|
-
i: [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
31
|
+
d: [".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"]
|
|
69
32
|
});
|
|
33
|
+
const useIndicatorBaseClassName = /*#__PURE__*/react_1.__resetStyles("r13wlxb8", null, [".r13wlxb8{border-radius:var(--borderRadiusCircular);border:1px solid;line-height:0;box-sizing:border-box;fill:currentColor;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:18px;height:20px;margin:var(--spacingVerticalS) var(--spacingHorizontalS);pointer-events:none;transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:background,border,color;width:40px;}", "@media screen and (prefers-reduced-motion: reduce){.r13wlxb8{transition-duration:0.01ms;}}", ".r13wlxb8>*{transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:transform;}", "@media screen and (prefers-reduced-motion: reduce){.r13wlxb8>*{transition-duration:0.01ms;}}"]);
|
|
70
34
|
const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
|
|
71
|
-
base: {
|
|
72
|
-
Bbmb7ep: ["f8fbkgy", "f1nfllo7"],
|
|
73
|
-
Beyfa6y: ["f1nfllo7", "f8fbkgy"],
|
|
74
|
-
B7oj6ja: ["f1djnp8u", "f1s8kh49"],
|
|
75
|
-
Btl43ni: ["f1s8kh49", "f1djnp8u"],
|
|
76
|
-
icvyot: "fzkkow9",
|
|
77
|
-
vrafjx: ["fcdblym", "fjik90z"],
|
|
78
|
-
oivjwe: "fg706s2",
|
|
79
|
-
wvpqe5: ["fjik90z", "fcdblym"],
|
|
80
|
-
B4j52fo: "f5ogflp",
|
|
81
|
-
Bekrc4i: ["f1hqa2wf", "finvdd3"],
|
|
82
|
-
Bn0qgzm: "f1f09k3d",
|
|
83
|
-
ibv6hh: ["finvdd3", "f1hqa2wf"],
|
|
84
|
-
Bg96gwp: "fez10in",
|
|
85
|
-
B7ck84d: "f1ewtqcl",
|
|
86
|
-
Bkfmm31: "f1w9h62z",
|
|
87
|
-
Bnnss6s: "fi64zpg",
|
|
88
|
-
Be2twd7: "fg38ndl",
|
|
89
|
-
Bqenvij: "fjamq6b",
|
|
90
|
-
B6of3ja: "frnwi6n",
|
|
91
|
-
t21cq0: ["f1vcna3q", "foyynoy"],
|
|
92
|
-
jrapky: "fqcjy3b",
|
|
93
|
-
Frg6f3: ["foyynoy", "f1vcna3q"],
|
|
94
|
-
Bkecrkj: "f1aehjj5",
|
|
95
|
-
B3o57yi: "f1vze9yt",
|
|
96
|
-
Bkqvd7p: "f17wnm97",
|
|
97
|
-
Bmy1vo4: "fo99fu7",
|
|
98
|
-
a9b677: "feqmc2u",
|
|
99
|
-
Hwfdqs: "f1onx1g3",
|
|
100
|
-
Hkqiji: "f1h74hm9",
|
|
101
|
-
Bgrs90m: "f1592id",
|
|
102
|
-
B0zx559: "f1uwej41",
|
|
103
|
-
c0im90: "fpz7fqq"
|
|
104
|
-
},
|
|
105
35
|
labelAbove: {
|
|
106
36
|
B6of3ja: "f1hu3pq6"
|
|
107
37
|
}
|
|
108
38
|
}, {
|
|
109
|
-
d: [".
|
|
110
|
-
m: [["@media screen and (prefers-reduced-motion: reduce){.f1onx1g3{transition-duration:0.01ms;}}", {
|
|
111
|
-
m: "screen and (prefers-reduced-motion: reduce)"
|
|
112
|
-
}], ["@media screen and (prefers-reduced-motion: reduce){.fpz7fqq>*{transition-duration:0.01ms;}}", {
|
|
113
|
-
m: "screen and (prefers-reduced-motion: reduce)"
|
|
114
|
-
}]]
|
|
39
|
+
d: [".f1hu3pq6{margin-top:0;}"]
|
|
115
40
|
});
|
|
41
|
+
const useInputBaseClassName = /*#__PURE__*/react_1.__resetStyles("r92li9d", "rxjpw57", [".r92li9d{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}", ".r92li9d:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}", ".r92li9d:disabled{cursor:default;}", ".r92li9d:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".r92li9d:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", ".r92li9d:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}", ".r92li9d:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".r92li9d:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r92li9d:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r92li9d:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}", ".r92li9d:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}", ".r92li9d:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}", ".r92li9d:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}", ".r92li9d:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}", "@media (forced-colors: active){.r92li9d:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.r92li9d:disabled~.fui-Switch__label{color:GrayText;}}", ".rxjpw57{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}", ".rxjpw57:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px);}", ".rxjpw57:disabled{cursor:default;}", ".rxjpw57:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".rxjpw57:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", ".rxjpw57:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}", ".rxjpw57:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".rxjpw57:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}", ".rxjpw57:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".rxjpw57:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}", ".rxjpw57:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}", ".rxjpw57:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}", ".rxjpw57:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}", ".rxjpw57:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}", "@media (forced-colors: active){.rxjpw57:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.rxjpw57:disabled~.fui-Switch__label{color:GrayText;}}"]);
|
|
116
42
|
const useInputStyles = /*#__PURE__*/react_1.__styles({
|
|
117
|
-
base: {
|
|
118
|
-
B7ck84d: "f1ewtqcl",
|
|
119
|
-
Bceei9c: "f1k6fduh",
|
|
120
|
-
Bqenvij: "f1l02sjl",
|
|
121
|
-
B6of3ja: "f1hu3pq6",
|
|
122
|
-
t21cq0: ["f11qmguv", "f1tyq0we"],
|
|
123
|
-
jrapky: "f19f4twv",
|
|
124
|
-
Frg6f3: ["f1tyq0we", "f11qmguv"],
|
|
125
|
-
abs64n: "fk73vx1",
|
|
126
|
-
qhf8xq: "f1euv43f",
|
|
127
|
-
a9b677: "f1ry1bn9",
|
|
128
|
-
fv8x6k: ["f3l1kk6", "f1kez0x4"],
|
|
129
|
-
ezr58z: "fvxnmui",
|
|
130
|
-
Blezdol: "f1cxq9o1",
|
|
131
|
-
k28iui: "f1q9yyk5",
|
|
132
|
-
B8f96ig: "f1ks1zsm",
|
|
133
|
-
po7uxr: "fiqfi0i",
|
|
134
|
-
inq7wv: "f9aagkg",
|
|
135
|
-
Cdugon: ["fgv8l18", "f1p3jmxb"],
|
|
136
|
-
ptsei1: "f11yi64e",
|
|
137
|
-
bl04ud: ["f1p3jmxb", "fgv8l18"],
|
|
138
|
-
Bu7dm46: "fthrly9",
|
|
139
|
-
Gwwlnz: "fhdp2ht",
|
|
140
|
-
wb1her: "f1rzj6jj",
|
|
141
|
-
Bmieemq: ["f1jywl1l", "f13d626x"],
|
|
142
|
-
Bdgjgzg: "f1ivtmze",
|
|
143
|
-
B05cvx7: ["f13d626x", "f1jywl1l"],
|
|
144
|
-
Bx4eqiv: "f1uvnr57",
|
|
145
|
-
xhnoxe: "frhcydi",
|
|
146
|
-
Hnmc4c: ["f1pvt3n7", "f14i0clv"],
|
|
147
|
-
By8gkvz: "fq9gcw4",
|
|
148
|
-
lekrm4: ["f14i0clv", "f1pvt3n7"],
|
|
149
|
-
Bei91sp: "f1se0d6r",
|
|
150
|
-
Bksztz9: "f8l9son",
|
|
151
|
-
h3gz1v: "f1c4gun2",
|
|
152
|
-
Cw6427: ["flhgtcm", "fx1zdd8"],
|
|
153
|
-
Bpbd9g9: "fayrp2e",
|
|
154
|
-
ssulyh: ["fx1zdd8", "flhgtcm"],
|
|
155
|
-
vq7rp1: "f1p715pa",
|
|
156
|
-
ynrfiu: "firogjh",
|
|
157
|
-
Bf5tpyt: ["f1crd6p1", "for8100"],
|
|
158
|
-
Brhic7g: "f1v5j4zb",
|
|
159
|
-
Cqvc5u: ["for8100", "f1crd6p1"],
|
|
160
|
-
B4e80u0: "f116zuoq",
|
|
161
|
-
Bwj41i9: "fxvotg6",
|
|
162
|
-
B2iiaa1: ["fk9ur30", "f3u5smv"],
|
|
163
|
-
Bejmxmv: "fdtj07x",
|
|
164
|
-
rqauf5: ["f3u5smv", "fk9ur30"],
|
|
165
|
-
wo5z87: "fv5mb1o",
|
|
166
|
-
B50joxe: ["f1i2l8ou", "fxj1kmv"],
|
|
167
|
-
Bmuizf1: "fku528b",
|
|
168
|
-
f4urji: ["fxj1kmv", "f1i2l8ou"],
|
|
169
|
-
Bxiq1ly: "fabcpc0",
|
|
170
|
-
vbmdq8: "f17xwy6w",
|
|
171
|
-
u4vbwo: ["fipwscc", "fab39iv"],
|
|
172
|
-
Bfjga03: "f1th5z1l",
|
|
173
|
-
F0s3py: ["fab39iv", "fipwscc"]
|
|
174
|
-
},
|
|
175
|
-
highContrast: {
|
|
176
|
-
Bskmvfo: "f19h63kc",
|
|
177
|
-
zhypoe: "ffutfdj",
|
|
178
|
-
Bb6xxwe: ["f72m8yo", "f1ud47z9"],
|
|
179
|
-
o89t22: "f15xfkur",
|
|
180
|
-
B7qxyha: ["f1ud47z9", "f72m8yo"],
|
|
181
|
-
Bhmcd6p: "f1jaqqzs"
|
|
182
|
-
},
|
|
183
43
|
before: {
|
|
184
44
|
j35jbq: ["f1e31b4d", "f1vgc2s3"],
|
|
185
45
|
Bhzewxz: "f15twtuk"
|
|
@@ -194,21 +54,9 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
|
|
|
194
54
|
a9b677: "fly5x3f"
|
|
195
55
|
}
|
|
196
56
|
}, {
|
|
197
|
-
d: [".
|
|
198
|
-
m: [["@media (forced-colors: active){.f19h63kc:disabled~.fui-Switch__indicator{color:GrayText;}}", {
|
|
199
|
-
m: "(forced-colors: active)"
|
|
200
|
-
}], ["@media (forced-colors: active){.ffutfdj:disabled~.fui-Switch__indicator{border-top-color:GrayText;}}", {
|
|
201
|
-
m: "(forced-colors: active)"
|
|
202
|
-
}], ["@media (forced-colors: active){.f72m8yo:disabled~.fui-Switch__indicator{border-right-color:GrayText;}.f1ud47z9:disabled~.fui-Switch__indicator{border-left-color:GrayText;}}", {
|
|
203
|
-
m: "(forced-colors: active)"
|
|
204
|
-
}], ["@media (forced-colors: active){.f15xfkur:disabled~.fui-Switch__indicator{border-bottom-color:GrayText;}}", {
|
|
205
|
-
m: "(forced-colors: active)"
|
|
206
|
-
}], ["@media (forced-colors: active){.f1ud47z9:disabled~.fui-Switch__indicator{border-left-color:GrayText;}.f72m8yo:disabled~.fui-Switch__indicator{border-right-color:GrayText;}}", {
|
|
207
|
-
m: "(forced-colors: active)"
|
|
208
|
-
}], ["@media (forced-colors: active){.f1jaqqzs:disabled~.fui-Switch__label{color:GrayText;}}", {
|
|
209
|
-
m: "(forced-colors: active)"
|
|
210
|
-
}]]
|
|
57
|
+
d: [".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".f1aar7gd{height:calc(20px + var(--spacingVerticalS));}", ".fly5x3f{width:100%;}"]
|
|
211
58
|
});
|
|
59
|
+
// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
|
|
212
60
|
const useLabelStyles = /*#__PURE__*/react_1.__styles({
|
|
213
61
|
base: {
|
|
214
62
|
Bceei9c: "f1k6fduh",
|
|
@@ -237,17 +85,20 @@ const useLabelStyles = /*#__PURE__*/react_1.__styles({
|
|
|
237
85
|
* Apply styling to the Switch slots based on the state
|
|
238
86
|
*/
|
|
239
87
|
const useSwitchStyles_unstable = state => {
|
|
88
|
+
const rootBaseClassName = useRootBaseClassName();
|
|
240
89
|
const rootStyles = useRootStyles();
|
|
90
|
+
const indicatorBaseClassName = useIndicatorBaseClassName();
|
|
241
91
|
const indicatorStyles = useIndicatorStyles();
|
|
92
|
+
const inputBaseClassName = useInputBaseClassName();
|
|
242
93
|
const inputStyles = useInputStyles();
|
|
243
94
|
const labelStyles = useLabelStyles();
|
|
244
95
|
const {
|
|
245
96
|
label,
|
|
246
97
|
labelPosition
|
|
247
98
|
} = state;
|
|
248
|
-
state.root.className = react_1.mergeClasses(exports.switchClassNames.root,
|
|
249
|
-
state.indicator.className = react_1.mergeClasses(exports.switchClassNames.indicator,
|
|
250
|
-
state.input.className = react_1.mergeClasses(exports.switchClassNames.input,
|
|
99
|
+
state.root.className = react_1.mergeClasses(exports.switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);
|
|
100
|
+
state.indicator.className = react_1.mergeClasses(exports.switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);
|
|
101
|
+
state.input.className = react_1.mergeClasses(exports.switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], state.input.className);
|
|
251
102
|
if (state.label) {
|
|
252
103
|
state.label.className = react_1.mergeClasses(exports.switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
|
|
253
104
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"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","names":["exports","root","indicator","input","label","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootStyles","react_1","useIndicatorStyles","useInputStyles","useLabelStyles","useSwitchStyles_unstable","state","rootStyles","indicatorStyles","inputStyles","labelStyles","labelPosition","className","base","vertical","labelAbove","highContrast"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-switch/src/components/Switch/useSwitchStyles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('1px'),\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n ...shorthands.margin(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n pointerEvents: 'none',\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n '> *': {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n },\n },\n\n labelAbove: {\n marginTop: 0,\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n ...shorthands.margin(0),\n opacity: 0,\n position: 'absolute',\n\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the switch.\n width: `calc(${trackWidth}px + 2 * ${tokens.spacingHorizontalS})`,\n\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`,\n },\n },\n },\n\n // Disabled (both checked and unchecked)\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Enabled and checked\n ':enabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n },\n\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n },\n },\n },\n\n highContrast: {\n '@media (forced-colors: active)': {\n ':disabled': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n ...shorthands.borderColor('GrayText'),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText',\n },\n },\n },\n },\n\n before: {\n right: 0,\n top: 0,\n },\n after: {\n left: 0,\n top: 0,\n },\n above: {\n bottom: 0,\n height: `calc(${trackHeight}px + ${tokens.spacingVerticalS})`,\n width: '100%',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n cursor: 'pointer',\n\n // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n marginBottom: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n marginTop: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n above: {\n paddingTop: tokens.spacingVerticalXS,\n paddingBottom: tokens.spacingVerticalXS,\n width: '100%',\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n before: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n const rootStyles = useRootStyles();\n const indicatorStyles = useIndicatorStyles();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n\n const { label, labelPosition } = state;\n\n state.root.className = mergeClasses(\n switchClassNames.root,\n rootStyles.base,\n labelPosition === 'above' && rootStyles.vertical,\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(\n switchClassNames.indicator,\n indicatorStyles.base,\n label && labelPosition === 'above' && indicatorStyles.labelAbove,\n state.indicator.className,\n );\n\n state.input.className = mergeClasses(\n switchClassNames.input,\n inputStyles.base,\n inputStyles.highContrast,\n label && inputStyles[labelPosition],\n state.input.className,\n );\n\n if (state.label) {\n state.label.className = mergeClasses(\n switchClassNames.label,\n labelStyles.base,\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"]}
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAIaA,wBAAgB,GAAgC;EAC3DC,IAAI,EAAE,YAAY;EAClBC,SAAS,EAAE,uBAAuB;EAClCC,KAAK,EAAE,mBAAmB;EAC1BC,KAAK,EAAE;CACR;AAED;;;AAGaJ,uBAAe,GAAGA,wBAAgB,CAACC,IAAI;AAEpD;AACA,MAAMI,yBAAyB,GAAG,CAAC;AACnC,MAAMC,WAAW,GAAG,EAAE;AACtB,MAAMC,UAAU,GAAG,EAAE;AACrB,MAAMC,SAAS,GAAGF,WAAW,GAAGD,yBAAyB;AAEzD,MAAMI,oBAAoB,gBAAGC,qBAAe,g+EAO1C;AAEF,MAAMC,aAAa,gBAAGD,gBAAU;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAI9B;AAEF,MAAME,yBAAyB,gBAAGF,qBAAe,4wBA6B/C;AAEF,MAAMG,kBAAkB,gBAAGH,gBAAU;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAInC;AAEF,MAAMI,qBAAqB,gBAAGJ,qBAAe,gqIA+G3C;AAEF,MAAMK,cAAc,gBAAGL,gBAAU;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAc/B;AAEF;AACA,MAAMM,cAAc,gBAAGN,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAsB/B;AAEF;;;AAGO,MAAMO,wBAAwB,GAAIC,KAAkB,IAAiB;EAC1E,MAAMC,iBAAiB,GAAGV,oBAAoB,EAAE;EAChD,MAAMW,UAAU,GAAGT,aAAa,EAAE;EAClC,MAAMU,sBAAsB,GAAGT,yBAAyB,EAAE;EAC1D,MAAMU,eAAe,GAAGT,kBAAkB,EAAE;EAC5C,MAAMU,kBAAkB,GAAGT,qBAAqB,EAAE;EAClD,MAAMU,WAAW,GAAGT,cAAc,EAAE;EACpC,MAAMU,WAAW,GAAGT,cAAc,EAAE;EAEpC,MAAM;IAAEZ,KAAK;IAAEsB;EAAa,CAAE,GAAGR,KAAK;EAEtCA,KAAK,CAACjB,IAAI,CAAC0B,SAAS,GAAGjB,oBAAY,CACjCV,wBAAgB,CAACC,IAAI,EACrBkB,iBAAiB,EACjBO,aAAa,KAAK,OAAO,IAAIN,UAAU,CAACQ,QAAQ,EAChDV,KAAK,CAACjB,IAAI,CAAC0B,SAAS,CACrB;EAEDT,KAAK,CAAChB,SAAS,CAACyB,SAAS,GAAGjB,oBAAY,CACtCV,wBAAgB,CAACE,SAAS,EAC1BmB,sBAAsB,EACtBjB,KAAK,IAAIsB,aAAa,KAAK,OAAO,IAAIJ,eAAe,CAACO,UAAU,EAChEX,KAAK,CAAChB,SAAS,CAACyB,SAAS,CAC1B;EAEDT,KAAK,CAACf,KAAK,CAACwB,SAAS,GAAGjB,oBAAY,CAClCV,wBAAgB,CAACG,KAAK,EACtBoB,kBAAkB,EAClBnB,KAAK,IAAIoB,WAAW,CAACE,aAAa,CAAC,EACnCR,KAAK,CAACf,KAAK,CAACwB,SAAS,CACtB;EAED,IAAIT,KAAK,CAACd,KAAK,EAAE;IACfc,KAAK,CAACd,KAAK,CAACuB,SAAS,GAAGjB,oBAAY,CAClCV,wBAAgB,CAACI,KAAK,EACtBqB,WAAW,CAACK,IAAI,EAChBL,WAAW,CAACC,aAAa,CAAC,EAC1BR,KAAK,CAACd,KAAK,CAACuB,SAAS,CACtB;;EAGH,OAAOT,KAAK;AACd,CAAC;AA1CYlB,gCAAwB","names":["exports","root","indicator","input","label","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","react_1","useRootStyles","useIndicatorBaseClassName","useIndicatorStyles","useInputBaseClassName","useInputStyles","useLabelStyles","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className","vertical","labelAbove","base"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-switch/src/components/Switch/useSwitchStyles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: '1px solid',\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n pointerEvents: 'none',\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n '> *': {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n labelAbove: {\n marginTop: 0,\n },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the switch.\n width: `calc(${trackWidth}px + 2 * ${tokens.spacingHorizontalS})`,\n\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`,\n },\n },\n },\n\n // Disabled (both checked and unchecked)\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n borderColor: tokens.colorNeutralStrokeAccessible,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n // Enabled and checked\n ':enabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n borderColor: tokens.colorTransparentStroke,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorTransparentStrokeInteractive,\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n borderColor: tokens.colorTransparentStrokeInteractive,\n },\n },\n },\n\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n borderColor: tokens.colorTransparentStrokeDisabled,\n },\n },\n\n '@media (forced-colors: active)': {\n ':disabled': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n borderColor: 'GrayText',\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText',\n },\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n top: 0,\n },\n after: {\n left: 0,\n top: 0,\n },\n above: {\n bottom: 0,\n height: `calc(${trackHeight}px + ${tokens.spacingVerticalS})`,\n width: '100%',\n },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n cursor: 'pointer',\n\n // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n marginBottom: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n marginTop: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n above: {\n paddingTop: tokens.spacingVerticalXS,\n paddingBottom: tokens.spacingVerticalXS,\n width: '100%',\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n before: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n\n const { label, labelPosition } = state;\n\n state.root.className = mergeClasses(\n switchClassNames.root,\n rootBaseClassName,\n labelPosition === 'above' && rootStyles.vertical,\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(\n switchClassNames.indicator,\n indicatorBaseClassName,\n label && labelPosition === 'above' && indicatorStyles.labelAbove,\n state.indicator.className,\n );\n\n state.input.className = mergeClasses(\n switchClassNames.input,\n inputBaseClassName,\n label && inputStyles[labelPosition],\n state.input.className,\n );\n\n if (state.label) {\n state.label.className = mergeClasses(\n switchClassNames.label,\n labelStyles.base,\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-switch",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20230110-0424.1",
|
|
4
4
|
"description": "Fluent UI React Switch component.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -27,16 +27,16 @@
|
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
|
29
29
|
"@fluentui/react-conformance": "*",
|
|
30
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
30
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20230110-0424.1",
|
|
31
31
|
"@fluentui/scripts": "*"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@fluentui/react-field": "0.0.0-nightly-
|
|
34
|
+
"@fluentui/react-field": "0.0.0-nightly-20230110-0424.1",
|
|
35
35
|
"@fluentui/react-icons": "^2.0.175",
|
|
36
|
-
"@fluentui/react-label": "0.0.0-nightly-
|
|
37
|
-
"@fluentui/react-tabster": "0.0.0-nightly-
|
|
38
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
39
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
36
|
+
"@fluentui/react-label": "0.0.0-nightly-20230110-0424.1",
|
|
37
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20230110-0424.1",
|
|
38
|
+
"@fluentui/react-theme": "0.0.0-nightly-20230110-0424.1",
|
|
39
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20230110-0424.1",
|
|
40
40
|
"@griffel/react": "^1.5.2",
|
|
41
41
|
"tslib": "^2.1.0"
|
|
42
42
|
},
|