@fluentui/react-switch 9.0.14 → 9.0.16
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 +101 -1
- package/CHANGELOG.md +28 -2
- package/lib/components/Switch/Switch.js +0 -1
- package/lib/components/Switch/Switch.js.map +1 -1
- package/lib/components/Switch/renderSwitch.js +10 -6
- package/lib/components/Switch/renderSwitch.js.map +1 -1
- package/lib/components/Switch/useSwitch.js +0 -1
- package/lib/components/Switch/useSwitch.js.map +1 -1
- package/lib/components/Switch/useSwitchStyles.js +180 -189
- package/lib/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib/components/SwitchField/SwitchField.js.map +1 -1
- package/lib/index.js +2 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Switch.js +0 -2
- package/lib-commonjs/Switch.js.map +1 -1
- package/lib-commonjs/SwitchField.js +0 -2
- package/lib-commonjs/SwitchField.js.map +1 -1
- package/lib-commonjs/components/Switch/Switch.js +0 -6
- package/lib-commonjs/components/Switch/Switch.js.map +1 -1
- package/lib-commonjs/components/Switch/Switch.types.js.map +1 -1
- package/lib-commonjs/components/Switch/index.js +0 -6
- package/lib-commonjs/components/Switch/index.js.map +1 -1
- package/lib-commonjs/components/Switch/renderSwitch.js +10 -10
- package/lib-commonjs/components/Switch/renderSwitch.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitch.js +0 -8
- package/lib-commonjs/components/Switch/useSwitch.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.js +180 -194
- package/lib-commonjs/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib-commonjs/components/SwitchField/SwitchField.js +0 -4
- package/lib-commonjs/components/SwitchField/SwitchField.js.map +1 -1
- package/lib-commonjs/components/SwitchField/index.js +0 -2
- package/lib-commonjs/components/SwitchField/index.js.map +1 -1
- package/lib-commonjs/index.js +2 -6
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +9 -9
|
@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useSwitchStyles_unstable = exports.switchClassName = exports.switchClassNames = void 0;
|
|
7
|
-
|
|
8
7
|
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
9
|
-
|
|
10
8
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
11
|
-
|
|
12
9
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
13
|
-
|
|
14
10
|
exports.switchClassNames = {
|
|
15
11
|
root: 'fui-Switch',
|
|
16
12
|
indicator: 'fui-Switch__indicator',
|
|
@@ -20,233 +16,226 @@ exports.switchClassNames = {
|
|
|
20
16
|
/**
|
|
21
17
|
* @deprecated Use `switchClassNames.root` instead.
|
|
22
18
|
*/
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
19
|
+
exports.switchClassName = exports.switchClassNames.root;
|
|
20
|
+
// Thumb and track sizes used by the component.
|
|
26
21
|
const spaceBetweenThumbAndTrack = 2;
|
|
27
22
|
const trackHeight = 20;
|
|
28
23
|
const trackWidth = 40;
|
|
29
24
|
const thumbSize = trackHeight - spaceBetweenThumbAndTrack;
|
|
30
|
-
|
|
31
25
|
const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
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"]
|
|
67
61
|
},
|
|
68
|
-
|
|
69
|
-
|
|
62
|
+
vertical: {
|
|
63
|
+
Beiy3e4: "f1vx9l62"
|
|
70
64
|
}
|
|
71
65
|
}, {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
66
|
+
d: [".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", ".f78i1la[data-fui-focus-within]:focus-within::after{border-top-style:solid;}", ".f1kvsw7t[data-fui-focus-within]:focus-within::after{border-right-style:solid;}", ".f1bw8brt[data-fui-focus-within]:focus-within::after{border-left-style:solid;}", ".f8k7e5g[data-fui-focus-within]:focus-within::after{border-bottom-style:solid;}", ".f1pmxfrl[data-fui-focus-within]:focus-within::after{border-top-width:2px;}", ".fszkfcr[data-fui-focus-within]:focus-within::after{border-right-width:2px;}", ".f1ap5ily[data-fui-focus-within]:focus-within::after{border-left-width:2px;}", ".f57dp0y[data-fui-focus-within]:focus-within::after{border-bottom-width:2px;}", ".f11dm2qb[data-fui-focus-within]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f136rfnd[data-fui-focus-within]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fdsq1qd[data-fui-focus-within]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f1khssms[data-fui-focus-within]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fq4eyks[data-fui-focus-within]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1ya6x16[data-fui-focus-within]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".ftuszwa[data-fui-focus-within]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1e2iu44[data-fui-focus-within]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f1xkdug0[data-fui-focus-within]:focus-within::after{top:-2px;}", ".f1m1ywml[data-fui-focus-within]:focus-within::after{bottom:-2px;}", ".f7u4kgv[data-fui-focus-within]:focus-within::after{left:-2px;}", ".f1a36mvi[data-fui-focus-within]:focus-within::after{right:-2px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"],
|
|
67
|
+
f: [".ftqa4ok:focus{outline-style:none;}"],
|
|
68
|
+
i: [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
75
69
|
});
|
|
76
|
-
|
|
77
70
|
const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
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"
|
|
111
104
|
},
|
|
112
|
-
|
|
113
|
-
|
|
105
|
+
labelAbove: {
|
|
106
|
+
B6of3ja: "f1hu3pq6"
|
|
114
107
|
}
|
|
115
108
|
}, {
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
109
|
+
d: [".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fez10in{line-height:0;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1w9h62z{fill:currentColor;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".fg38ndl{font-size:18px;}", ".fjamq6b{height:20px;}", ".frnwi6n{margin-top:var(--spacingVerticalS);}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".fqcjy3b{margin-bottom:var(--spacingVerticalS);}", ".f1aehjj5{pointer-events:none;}", ".f1vze9yt{transition-duration:var(--durationNormal);}", ".f17wnm97{transition-timing-function:var(--curveEasyEase);}", ".fo99fu7{transition-property:background,border,color;}", ".feqmc2u{width:40px;}", ".f1h74hm9>*{transition-duration:var(--durationNormal);}", ".f1592id>*{transition-timing-function:var(--curveEasyEase);}", ".f1uwej41>*{transition-property:transform;}", ".f1hu3pq6{margin-top:0;}"],
|
|
110
|
+
m: [["@media screen and (prefers-reduced-motion: reduce){.f1onx1g3{transition-duration:0.01ms;}}", {
|
|
111
|
+
m: "screen and (prefers-reduced-motion: reduce)"
|
|
119
112
|
}], ["@media screen and (prefers-reduced-motion: reduce){.fpz7fqq>*{transition-duration:0.01ms;}}", {
|
|
120
|
-
|
|
113
|
+
m: "screen and (prefers-reduced-motion: reduce)"
|
|
121
114
|
}]]
|
|
122
115
|
});
|
|
123
|
-
|
|
124
116
|
const useInputStyles = /*#__PURE__*/react_1.__styles({
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
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"]
|
|
182
174
|
},
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
175
|
+
highContrast: {
|
|
176
|
+
Bskmvfo: "f19h63kc",
|
|
177
|
+
zhypoe: "ffutfdj",
|
|
178
|
+
Bb6xxwe: ["f72m8yo", "f1ud47z9"],
|
|
179
|
+
o89t22: "f15xfkur",
|
|
180
|
+
B7qxyha: ["f1ud47z9", "f72m8yo"],
|
|
181
|
+
Bhmcd6p: "f1jaqqzs"
|
|
190
182
|
},
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
183
|
+
before: {
|
|
184
|
+
j35jbq: ["f1e31b4d", "f1vgc2s3"],
|
|
185
|
+
Bhzewxz: "f15twtuk"
|
|
194
186
|
},
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
187
|
+
after: {
|
|
188
|
+
oyh7mz: ["f1vgc2s3", "f1e31b4d"],
|
|
189
|
+
Bhzewxz: "f15twtuk"
|
|
198
190
|
},
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
191
|
+
above: {
|
|
192
|
+
B5kzvoi: "f1yab3r1",
|
|
193
|
+
Bqenvij: "f1aar7gd",
|
|
194
|
+
a9b677: "fly5x3f"
|
|
203
195
|
}
|
|
204
196
|
}, {
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
197
|
+
d: [".f1ewtqcl{box-sizing:border-box;}", ".f1k6fduh{cursor:pointer;}", ".f1l02sjl{height:100%;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1euv43f{position:absolute;}", ".f1ry1bn9{width:calc(40px + 2 * var(--spacingHorizontalS));}", ".f3l1kk6:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}", ".f1kez0x4:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px);}", ".fvxnmui:disabled{cursor:default;}", ".f1cxq9o1:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".f1q9yyk5:disabled~.fui-Switch__label{cursor:default;}", ".f1ks1zsm:disabled~.fui-Switch__label{color:var(--colorNeutralForegroundDisabled);}", ".fiqfi0i:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);}", ".f9aagkg:enabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".fgv8l18:enabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f1p3jmxb:enabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f11yi64e:enabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fthrly9:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".fhdp2ht:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);}", ".f1rzj6jj:enabled:not(:checked):hover~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1jywl1l:enabled:not(:checked):hover~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f13d626x:enabled:not(:checked):hover~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1ivtmze:enabled:not(:checked):hover~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1uvnr57:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);}", ".frhcydi:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1pvt3n7:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f14i0clv:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fq9gcw4:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1se0d6r:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);}", ".f8l9son:enabled:checked~.fui-Switch__indicator{color:var(--colorNeutralForegroundInverted);}", ".f1c4gun2:enabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStroke);}", ".flhgtcm:enabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStroke);}", ".fx1zdd8:enabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStroke);}", ".fayrp2e:enabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStroke);}", ".f1p715pa:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}", ".firogjh:enabled:checked:hover~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1crd6p1:enabled:checked:hover~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".for8100:enabled:checked:hover~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1v5j4zb:enabled:checked:hover~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f116zuoq:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}", ".fxvotg6:enabled:checked:hover:active~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fk9ur30:enabled:checked:hover:active~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f3u5smv:enabled:checked:hover:active~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fdtj07x:enabled:checked:hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fv5mb1o:disabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1i2l8ou:disabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fxj1kmv:disabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fku528b:disabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fabcpc0:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);}", ".f17xwy6w:disabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeDisabled);}", ".fipwscc:disabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeDisabled);}", ".fab39iv:disabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeDisabled);}", ".f1th5z1l:disabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeDisabled);}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".f1aar7gd{height:calc(20px + var(--spacingVerticalS));}", ".fly5x3f{width:100%;}"],
|
|
198
|
+
m: [["@media (forced-colors: active){.f19h63kc:disabled~.fui-Switch__indicator{color:GrayText;}}", {
|
|
199
|
+
m: "(forced-colors: active)"
|
|
208
200
|
}], ["@media (forced-colors: active){.ffutfdj:disabled~.fui-Switch__indicator{border-top-color:GrayText;}}", {
|
|
209
|
-
|
|
201
|
+
m: "(forced-colors: active)"
|
|
210
202
|
}], ["@media (forced-colors: active){.f72m8yo:disabled~.fui-Switch__indicator{border-right-color:GrayText;}.f1ud47z9:disabled~.fui-Switch__indicator{border-left-color:GrayText;}}", {
|
|
211
|
-
|
|
203
|
+
m: "(forced-colors: active)"
|
|
212
204
|
}], ["@media (forced-colors: active){.f15xfkur:disabled~.fui-Switch__indicator{border-bottom-color:GrayText;}}", {
|
|
213
|
-
|
|
205
|
+
m: "(forced-colors: active)"
|
|
214
206
|
}], ["@media (forced-colors: active){.f1ud47z9:disabled~.fui-Switch__indicator{border-left-color:GrayText;}.f72m8yo:disabled~.fui-Switch__indicator{border-right-color:GrayText;}}", {
|
|
215
|
-
|
|
207
|
+
m: "(forced-colors: active)"
|
|
216
208
|
}], ["@media (forced-colors: active){.f1jaqqzs:disabled~.fui-Switch__label{color:GrayText;}}", {
|
|
217
|
-
|
|
209
|
+
m: "(forced-colors: active)"
|
|
218
210
|
}]]
|
|
219
211
|
});
|
|
220
|
-
|
|
221
212
|
const useLabelStyles = /*#__PURE__*/react_1.__styles({
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
213
|
+
base: {
|
|
214
|
+
Bceei9c: "f1k6fduh",
|
|
215
|
+
jrapky: "f49ad5g",
|
|
216
|
+
B6of3ja: "f1xlvstr",
|
|
217
|
+
z8tnut: "f1kwiid1",
|
|
218
|
+
z189sj: ["f1vdfbxk", "f1f5gg8d"],
|
|
219
|
+
Byoj8tv: "f5b47ha",
|
|
220
|
+
uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
|
|
230
221
|
},
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
222
|
+
above: {
|
|
223
|
+
z8tnut: "f1ywm7hm",
|
|
224
|
+
Byoj8tv: "f14wxoun",
|
|
225
|
+
a9b677: "fly5x3f"
|
|
235
226
|
},
|
|
236
|
-
|
|
237
|
-
|
|
227
|
+
after: {
|
|
228
|
+
uwmqm3: ["fruq291", "f7x41pl"]
|
|
238
229
|
},
|
|
239
|
-
|
|
240
|
-
|
|
230
|
+
before: {
|
|
231
|
+
z189sj: ["f7x41pl", "fruq291"]
|
|
241
232
|
}
|
|
242
233
|
}, {
|
|
243
|
-
|
|
234
|
+
d: [".f1k6fduh{cursor:pointer;}", ".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}", ".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".fly5x3f{width:100%;}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}"]
|
|
244
235
|
});
|
|
245
236
|
/**
|
|
246
237
|
* Apply styling to the Switch slots based on the state
|
|
247
238
|
*/
|
|
248
|
-
|
|
249
|
-
|
|
250
239
|
const useSwitchStyles_unstable = state => {
|
|
251
240
|
const rootStyles = useRootStyles();
|
|
252
241
|
const indicatorStyles = useIndicatorStyles();
|
|
@@ -259,13 +248,10 @@ const useSwitchStyles_unstable = state => {
|
|
|
259
248
|
state.root.className = react_1.mergeClasses(exports.switchClassNames.root, rootStyles.base, labelPosition === 'above' && rootStyles.vertical, state.root.className);
|
|
260
249
|
state.indicator.className = react_1.mergeClasses(exports.switchClassNames.indicator, indicatorStyles.base, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);
|
|
261
250
|
state.input.className = react_1.mergeClasses(exports.switchClassNames.input, inputStyles.base, inputStyles.highContrast, label && inputStyles[labelPosition], state.input.className);
|
|
262
|
-
|
|
263
251
|
if (state.label) {
|
|
264
252
|
state.label.className = react_1.mergeClasses(exports.switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
|
|
265
253
|
}
|
|
266
|
-
|
|
267
254
|
return state;
|
|
268
255
|
};
|
|
269
|
-
|
|
270
256
|
exports.useSwitchStyles_unstable = useSwitchStyles_unstable;
|
|
271
257
|
//# sourceMappingURL=useSwitchStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-switch/src/components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","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"],"sourceRoot":"../src/"}
|
|
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,aAAa,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAa9B;AAEF,MAAMC,kBAAkB,gBAAGD,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAoCnC;AAEF,MAAME,cAAc,gBAAGF,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAiI/B;AAEF,MAAMG,cAAc,gBAAGH,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,MAAMI,wBAAwB,GAAIC,KAAkB,IAAiB;EAC1E,MAAMC,UAAU,GAAGP,aAAa,EAAE;EAClC,MAAMQ,eAAe,GAAGN,kBAAkB,EAAE;EAC5C,MAAMO,WAAW,GAAGN,cAAc,EAAE;EACpC,MAAMO,WAAW,GAAGN,cAAc,EAAE;EAEpC,MAAM;IAAET,KAAK;IAAEgB;EAAa,CAAE,GAAGL,KAAK;EAEtCA,KAAK,CAACd,IAAI,CAACoB,SAAS,GAAGX,oBAAY,CACjCV,wBAAgB,CAACC,IAAI,EACrBe,UAAU,CAACM,IAAI,EACfF,aAAa,KAAK,OAAO,IAAIJ,UAAU,CAACO,QAAQ,EAChDR,KAAK,CAACd,IAAI,CAACoB,SAAS,CACrB;EAEDN,KAAK,CAACb,SAAS,CAACmB,SAAS,GAAGX,oBAAY,CACtCV,wBAAgB,CAACE,SAAS,EAC1Be,eAAe,CAACK,IAAI,EACpBlB,KAAK,IAAIgB,aAAa,KAAK,OAAO,IAAIH,eAAe,CAACO,UAAU,EAChET,KAAK,CAACb,SAAS,CAACmB,SAAS,CAC1B;EAEDN,KAAK,CAACZ,KAAK,CAACkB,SAAS,GAAGX,oBAAY,CAClCV,wBAAgB,CAACG,KAAK,EACtBe,WAAW,CAACI,IAAI,EAChBJ,WAAW,CAACO,YAAY,EACxBrB,KAAK,IAAIc,WAAW,CAACE,aAAa,CAAC,EACnCL,KAAK,CAACZ,KAAK,CAACkB,SAAS,CACtB;EAED,IAAIN,KAAK,CAACX,KAAK,EAAE;IACfW,KAAK,CAACX,KAAK,CAACiB,SAAS,GAAGX,oBAAY,CAClCV,wBAAgB,CAACI,KAAK,EACtBe,WAAW,CAACG,IAAI,EAChBH,WAAW,CAACC,aAAa,CAAC,EAC1BL,KAAK,CAACX,KAAK,CAACiB,SAAS,CACtB;;EAGH,OAAON,KAAK;AACd,CAAC;AAxCYf,gCAAwB","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":"../src/","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"]}
|
|
@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.SwitchField = exports.switchFieldClassNames = void 0;
|
|
7
|
-
|
|
8
7
|
const React = /*#__PURE__*/require("react");
|
|
9
|
-
|
|
10
8
|
const react_field_1 = /*#__PURE__*/require("@fluentui/react-field");
|
|
11
|
-
|
|
12
9
|
const Switch_1 = /*#__PURE__*/require("../../Switch");
|
|
13
|
-
|
|
14
10
|
exports.switchFieldClassNames = /*#__PURE__*/react_field_1.getFieldClassNames('SwitchField');
|
|
15
11
|
exports.SwitchField = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
16
12
|
const state = react_field_1.useField_unstable(props, ref, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAEA;AAOA;AAMaA,6BAAqB,gBAAGC,gCAAkB,CAAC,aAAa,CAAC;AAEzDD,mBAAW,gBAA0CE,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGL,+BAAiB,CAACG,KAAK,EAAEC,GAAG,EAAE;IAAEE,SAAS,EAAEC,eAAM;IAAEC,UAAU,EAAET;EAAqB,CAAE,CAAC;EACrGC,qCAAuB,CAACK,KAAK,CAAC;EAC9B,OAAOL,kCAAoB,CAACK,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFN,mBAAW,CAACU,WAAW,GAAG,aAAa","names":["exports","react_field_1","React","forwardRef","props","ref","state","component","Switch_1","classNames","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-switch/src/components/SwitchField/SwitchField.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n getFieldClassNames,\n renderField_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Switch } from '../../Switch';\n\n// The Field's `label` prop overrides the Switch's built-in `label`.\n// Therefore, the Switch's `labelPosition` has no effect and is omitted to avoid confusion.\nexport type SwitchFieldProps = Omit<FieldProps<typeof Switch>, 'labelPosition'>;\n\nexport const switchFieldClassNames = getFieldClassNames('SwitchField');\n\nexport const SwitchField: ForwardRefComponent<SwitchFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, { component: Switch, classNames: switchFieldClassNames });\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nSwitchField.displayName = 'SwitchField';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-switch/src/components/SwitchField/index.ts"],"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-switch/src/components/SwitchField/index.ts"],"sourcesContent":["export * from './SwitchField';\n"]}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.switchFieldClassNames = exports.SwitchField_unstable = exports.useSwitch_unstable = exports.useSwitchStyles_unstable = exports.switchClassNames = exports.switchClassName = exports.renderSwitch_unstable = exports.Switch = void 0;
|
|
7
|
-
|
|
8
7
|
var Switch_1 = /*#__PURE__*/require("./Switch");
|
|
9
|
-
|
|
10
8
|
Object.defineProperty(exports, "Switch", {
|
|
11
9
|
enumerable: true,
|
|
12
10
|
get: function () {
|
|
@@ -18,8 +16,8 @@ Object.defineProperty(exports, "renderSwitch_unstable", {
|
|
|
18
16
|
get: function () {
|
|
19
17
|
return Switch_1.renderSwitch_unstable;
|
|
20
18
|
}
|
|
21
|
-
});
|
|
22
|
-
|
|
19
|
+
});
|
|
20
|
+
// eslint-disable-next-line deprecation/deprecation
|
|
23
21
|
Object.defineProperty(exports, "switchClassName", {
|
|
24
22
|
enumerable: true,
|
|
25
23
|
get: function () {
|
|
@@ -44,9 +42,7 @@ Object.defineProperty(exports, "useSwitch_unstable", {
|
|
|
44
42
|
return Switch_1.useSwitch_unstable;
|
|
45
43
|
}
|
|
46
44
|
});
|
|
47
|
-
|
|
48
45
|
var SwitchField_1 = /*#__PURE__*/require("./SwitchField");
|
|
49
|
-
|
|
50
46
|
Object.defineProperty(exports, "SwitchField_unstable", {
|
|
51
47
|
enumerable: true,
|
|
52
48
|
get: function () {
|