@fluentui/react-switch 9.0.0-rc.7 → 9.0.0
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 +393 -1
- package/CHANGELOG.md +152 -36
- package/MIGRATION.md +1 -5
- package/README.md +20 -14
- package/Spec.md +2 -2
- package/dist/{react-switch.d.ts → index.d.ts} +19 -18
- package/{lib → dist}/tsdoc-metadata.json +0 -0
- package/lib/components/Switch/Switch.js.map +1 -1
- package/lib/components/Switch/Switch.types.js.map +1 -1
- package/lib/components/Switch/renderSwitch.js.map +1 -1
- package/lib/components/Switch/useSwitch.js.map +1 -1
- package/lib/components/Switch/useSwitchStyles.js +73 -61
- package/lib/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib-commonjs/components/Switch/Switch.js.map +1 -1
- package/lib-commonjs/components/Switch/renderSwitch.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitch.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.js +73 -61
- package/lib-commonjs/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +12 -14
- package/lib/Switch.d.ts +0 -1
- package/lib/components/Switch/Switch.d.ts +0 -6
- package/lib/components/Switch/Switch.types.d.ts +0 -65
- package/lib/components/Switch/index.d.ts +0 -5
- package/lib/components/Switch/renderSwitch.d.ts +0 -5
- package/lib/components/Switch/useSwitch.d.ts +0 -12
- package/lib/components/Switch/useSwitchStyles.d.ts +0 -11
- package/lib/index.d.ts +0 -2
- package/lib-commonjs/Switch.d.ts +0 -1
- package/lib-commonjs/components/Switch/Switch.d.ts +0 -6
- package/lib-commonjs/components/Switch/Switch.types.d.ts +0 -65
- package/lib-commonjs/components/Switch/index.d.ts +0 -5
- package/lib-commonjs/components/Switch/renderSwitch.d.ts +0 -5
- package/lib-commonjs/components/Switch/useSwitch.d.ts +0 -12
- package/lib-commonjs/components/Switch/useSwitchStyles.d.ts +0 -11
- package/lib-commonjs/index.d.ts +0 -2
|
@@ -21,75 +21,60 @@ exports.switchClassNames = {
|
|
|
21
21
|
* @deprecated Use `switchClassNames.root` instead.
|
|
22
22
|
*/
|
|
23
23
|
|
|
24
|
-
exports.switchClassName = exports.switchClassNames.root; //
|
|
25
|
-
|
|
26
|
-
const spacingXS = 4;
|
|
27
|
-
const spacingS = 8;
|
|
28
|
-
const spacingM = 12; // Thumb and track sizes used by the component.
|
|
24
|
+
exports.switchClassName = exports.switchClassNames.root; // Thumb and track sizes used by the component.
|
|
29
25
|
|
|
30
26
|
const spaceBetweenThumbAndTrack = 2;
|
|
31
|
-
const thumbSize = 14;
|
|
32
27
|
const trackHeight = 20;
|
|
33
28
|
const trackWidth = 40;
|
|
29
|
+
const thumbSize = trackHeight - spaceBetweenThumbAndTrack;
|
|
34
30
|
|
|
35
31
|
const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
36
32
|
"base": {
|
|
33
|
+
"Bt984gj": "f6jr5hl",
|
|
37
34
|
"B7ck84d": "f1ewtqcl",
|
|
38
|
-
"i8kkvl": "f4akndk",
|
|
39
35
|
"mc9l5x": "ftuwxu6",
|
|
40
|
-
"z8tnut": "
|
|
41
|
-
"z189sj": ["
|
|
42
|
-
"Byoj8tv": "
|
|
43
|
-
"uwmqm3": ["
|
|
36
|
+
"z8tnut": "f1kwiid1",
|
|
37
|
+
"z189sj": ["f1vdfbxk", "f1f5gg8d"],
|
|
38
|
+
"Byoj8tv": "f5b47ha",
|
|
39
|
+
"uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
|
|
44
40
|
"qhf8xq": "f10pi13n",
|
|
45
|
-
"
|
|
41
|
+
"Brovlpu": "ftqa4ok",
|
|
46
42
|
"vchsgm": "fbiesyy",
|
|
47
43
|
"ozrjjd": ["fq2kn9", "f1jxwnad"],
|
|
48
44
|
"B7lelfh": "f1il7mou",
|
|
49
45
|
"Bp3tz3o": ["f1jxwnad", "fq2kn9"],
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
"
|
|
68
|
-
"
|
|
69
|
-
"
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
"
|
|
73
|
-
"
|
|
46
|
+
"Bbs9wvz": "f13adjqr",
|
|
47
|
+
"q02eyl": "f1188tw4",
|
|
48
|
+
"llgh1x": "ffcuypr",
|
|
49
|
+
"Dmi4yx": "f1ykafvd",
|
|
50
|
+
"rnk8mc": "fsk03u7",
|
|
51
|
+
"i8s5n4": ["fektfg6", "fb9zr6h"],
|
|
52
|
+
"Bvhkk4y": "fbtctfn",
|
|
53
|
+
"Jba7ju": ["fb9zr6h", "fektfg6"],
|
|
54
|
+
"B5kfbxi": "f13yiatr",
|
|
55
|
+
"aia6cn": ["f2he9yp", "f1qjzjrd"],
|
|
56
|
+
"dmu3zb": "f1kex75c",
|
|
57
|
+
"ozsp9x": ["f1qjzjrd", "f2he9yp"],
|
|
58
|
+
"izr52t": ["ft7spqo", "fmlur2k"],
|
|
59
|
+
"ei1ezu": ["fmlur2k", "ft7spqo"],
|
|
60
|
+
"Bbawuig": ["f1y3ebu", "f1utkke9"],
|
|
61
|
+
"B0g2sgm": ["f1utkke9", "f1y3ebu"],
|
|
62
|
+
"peent8": "fdu7fj4",
|
|
63
|
+
"B7odns5": ["f1ai831i", "f1mabxol"],
|
|
64
|
+
"Bk28q0d": "f1gu1oxr",
|
|
65
|
+
"cuest6": ["f1mabxol", "f1ai831i"],
|
|
66
|
+
"Bqelifr": "f1yuf49m",
|
|
67
|
+
"qwo3bi": "f1ekbqkk",
|
|
68
|
+
"t4augk": ["fgj76h3", "f1vonxve"],
|
|
69
|
+
"Beavxtj": ["f1vonxve", "fgj76h3"]
|
|
74
70
|
},
|
|
75
|
-
"
|
|
71
|
+
"vertical": {
|
|
76
72
|
"Beiy3e4": "f1vx9l62",
|
|
77
|
-
"z8tnut": "
|
|
78
|
-
"Belr9w4": "f1ma2n7n"
|
|
79
|
-
},
|
|
80
|
-
"after": {
|
|
81
|
-
"Bt984gj": "f6jr5hl",
|
|
82
|
-
"i8kkvl": "f4akndk",
|
|
83
|
-
"Beiy3e4": "f1063pyq"
|
|
84
|
-
},
|
|
85
|
-
"before": {
|
|
86
|
-
"Bt984gj": "f6jr5hl",
|
|
87
|
-
"i8kkvl": "f4akndk",
|
|
88
|
-
"Beiy3e4": "f1063pyq"
|
|
73
|
+
"z8tnut": "f1ywm7hm"
|
|
89
74
|
}
|
|
90
75
|
}, {
|
|
91
|
-
"d": [".
|
|
92
|
-
"
|
|
76
|
+
"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;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f10pi13n{position:relative;}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f13adjqr:focus-within::after{content:\"\";}", "[data-keyboard-nav] .f1188tw4:focus-within::after{position:absolute;}", "[data-keyboard-nav] .ffcuypr:focus-within::after{pointer-events:none;}", "[data-keyboard-nav] .f1ykafvd:focus-within::after{z-index:1;}", "[data-keyboard-nav] .fsk03u7:focus-within::after{border-top-style:solid;}", "[data-keyboard-nav] .fektfg6:focus-within::after{border-right-style:solid;}", "[data-keyboard-nav] .fb9zr6h:focus-within::after{border-left-style:solid;}", "[data-keyboard-nav] .fbtctfn:focus-within::after{border-bottom-style:solid;}", "[data-keyboard-nav] .f13yiatr:focus-within::after{border-top-width:2px;}", "[data-keyboard-nav] .f2he9yp:focus-within::after{border-right-width:2px;}", "[data-keyboard-nav] .f1qjzjrd:focus-within::after{border-left-width:2px;}", "[data-keyboard-nav] .f1kex75c:focus-within::after{border-bottom-width:2px;}", "[data-keyboard-nav] .ft7spqo:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .fmlur2k:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1y3ebu:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1utkke9:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .fdu7fj4:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1ai831i:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1mabxol:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1gu1oxr:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1yuf49m:focus-within::after{top:-2px;}", "[data-keyboard-nav] .f1ekbqkk:focus-within::after{bottom:-2px;}", "[data-keyboard-nav] .fgj76h3:focus-within::after{left:-2px;}", "[data-keyboard-nav] .f1vonxve:focus-within::after{right:-2px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}"],
|
|
77
|
+
"f": [".ftqa4ok:focus{outline-style:none;}"]
|
|
93
78
|
});
|
|
94
79
|
|
|
95
80
|
const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
|
|
@@ -109,7 +94,7 @@ const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
|
|
|
109
94
|
"B7ck84d": "f1ewtqcl",
|
|
110
95
|
"Bkfmm31": "f1w9h62z",
|
|
111
96
|
"Bnnss6s": "fi64zpg",
|
|
112
|
-
"Be2twd7": "
|
|
97
|
+
"Be2twd7": "fg38ndl",
|
|
113
98
|
"Bqenvij": "fjamq6b",
|
|
114
99
|
"Bkecrkj": "f1aehjj5",
|
|
115
100
|
"B3o57yi": "f1bnoopa",
|
|
@@ -121,7 +106,7 @@ const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
|
|
|
121
106
|
"B0zx559": "f1uwej41"
|
|
122
107
|
}
|
|
123
108
|
}, {
|
|
124
|
-
"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;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1w9h62z{fill:currentColor;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".
|
|
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;}", ".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;}", ".f1aehjj5{pointer-events:none;}", ".f1bnoopa{transition-duration:200ms;}", ".f1e1a42z{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".fo99fu7{transition-property:background,border,color;}", ".feqmc2u{width:40px;}", ".f1wkgtgk>*{transition-duration:200ms;}", ".f17f8g0y>*{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".f1uwej41>*{transition-property:transform;}"]
|
|
125
110
|
});
|
|
126
111
|
|
|
127
112
|
const useInputStyles = /*#__PURE__*/react_1.__styles({
|
|
@@ -138,7 +123,7 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
|
|
|
138
123
|
"qhf8xq": "f1euv43f",
|
|
139
124
|
"Bhzewxz": "f15twtuk",
|
|
140
125
|
"a9b677": "fly5x3f",
|
|
141
|
-
"fv8x6k": ["
|
|
126
|
+
"fv8x6k": ["f3l1kk6", "f1kez0x4"],
|
|
142
127
|
"ezr58z": "fvxnmui",
|
|
143
128
|
"Blezdol": "f1cxq9o1",
|
|
144
129
|
"B8f96ig": "f1ks1zsm",
|
|
@@ -183,17 +168,44 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
|
|
|
183
168
|
"u4vbwo": ["fipwscc", "fab39iv"],
|
|
184
169
|
"Bfjga03": "f1th5z1l",
|
|
185
170
|
"F0s3py": ["fab39iv", "fipwscc"]
|
|
171
|
+
},
|
|
172
|
+
"highContrast": {
|
|
173
|
+
"Bskmvfo": "f19h63kc",
|
|
174
|
+
"zhypoe": "ffutfdj",
|
|
175
|
+
"Bb6xxwe": ["f72m8yo", "f1ud47z9"],
|
|
176
|
+
"o89t22": "f15xfkur",
|
|
177
|
+
"B7qxyha": ["f1ud47z9", "f72m8yo"],
|
|
178
|
+
"Bhmcd6p": "f1jaqqzs"
|
|
186
179
|
}
|
|
187
180
|
}, {
|
|
188
|
-
"d": [".f1ewtqcl{box-sizing:border-box;}", ".f1k6fduh{cursor:pointer;}", ".f1l02sjl{height:100%;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".
|
|
181
|
+
"d": [".f1ewtqcl{box-sizing:border-box;}", ".f1k6fduh{cursor:pointer;}", ".f1l02sjl{height:100%;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".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);}", ".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);}", ".fft44l1:enabled:checked~.fui-Switch__indicator{background-color:var(--colorBrandBackground);}", ".fwlrvmy:enabled:checked~.fui-Switch__indicator{color:var(--colorNeutralForegroundOnBrand);}", ".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);}", ".f1vk2knj:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorBrandBackgroundHover);}", ".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);}", ".f1rt7qcq:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorBrandBackgroundPressed);}", ".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);}"],
|
|
182
|
+
"m": [["@media (forced-colors: active){.f19h63kc:disabled~.fui-Switch__indicator{color:GrayText;}}", {
|
|
183
|
+
"m": "(forced-colors: active)"
|
|
184
|
+
}], ["@media (forced-colors: active){.ffutfdj:disabled~.fui-Switch__indicator{border-top-color:GrayText;}}", {
|
|
185
|
+
"m": "(forced-colors: active)"
|
|
186
|
+
}], ["@media (forced-colors: active){.f72m8yo:disabled~.fui-Switch__indicator{border-right-color:GrayText;}.f1ud47z9:disabled~.fui-Switch__indicator{border-left-color:GrayText;}}", {
|
|
187
|
+
"m": "(forced-colors: active)"
|
|
188
|
+
}], ["@media (forced-colors: active){.f15xfkur:disabled~.fui-Switch__indicator{border-bottom-color:GrayText;}}", {
|
|
189
|
+
"m": "(forced-colors: active)"
|
|
190
|
+
}], ["@media (forced-colors: active){.f1ud47z9:disabled~.fui-Switch__indicator{border-left-color:GrayText;}.f72m8yo:disabled~.fui-Switch__indicator{border-right-color:GrayText;}}", {
|
|
191
|
+
"m": "(forced-colors: active)"
|
|
192
|
+
}], ["@media (forced-colors: active){.f1jaqqzs:disabled~.fui-Switch__label{color:GrayText;}}", {
|
|
193
|
+
"m": "(forced-colors: active)"
|
|
194
|
+
}]]
|
|
189
195
|
});
|
|
190
196
|
|
|
191
197
|
const useLabelStyles = /*#__PURE__*/react_1.__styles({
|
|
192
|
-
"
|
|
193
|
-
"
|
|
198
|
+
"above": {
|
|
199
|
+
"jrapky": "f8l5zjj"
|
|
200
|
+
},
|
|
201
|
+
"after": {
|
|
202
|
+
"Frg6f3": ["f199hnxi", "fkujibs"]
|
|
203
|
+
},
|
|
204
|
+
"before": {
|
|
205
|
+
"t21cq0": ["fkujibs", "f199hnxi"]
|
|
194
206
|
}
|
|
195
207
|
}, {
|
|
196
|
-
"d": [".
|
|
208
|
+
"d": [".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}"]
|
|
197
209
|
});
|
|
198
210
|
/**
|
|
199
211
|
* Apply styling to the Switch slots based on the state
|
|
@@ -208,12 +220,12 @@ const useSwitchStyles_unstable = state => {
|
|
|
208
220
|
const {
|
|
209
221
|
labelPosition
|
|
210
222
|
} = state;
|
|
211
|
-
state.root.className = react_1.mergeClasses(exports.switchClassNames.root, rootStyles.base, rootStyles
|
|
223
|
+
state.root.className = react_1.mergeClasses(exports.switchClassNames.root, rootStyles.base, labelPosition === 'above' && rootStyles.vertical, state.root.className);
|
|
212
224
|
state.indicator.className = react_1.mergeClasses(exports.switchClassNames.indicator, indicatorStyles.base, state.indicator.className);
|
|
213
|
-
state.input.className = react_1.mergeClasses(exports.switchClassNames.input, inputStyles.base, state.input.className);
|
|
225
|
+
state.input.className = react_1.mergeClasses(exports.switchClassNames.input, inputStyles.base, inputStyles.highContrast, state.input.className);
|
|
214
226
|
|
|
215
227
|
if (state.label) {
|
|
216
|
-
state.label.className = react_1.mergeClasses(exports.switchClassNames.label, labelStyles
|
|
228
|
+
state.label.className = react_1.mergeClasses(exports.switchClassNames.label, labelStyles[labelPosition], state.label.className);
|
|
217
229
|
}
|
|
218
230
|
|
|
219
231
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAIa,OAAA,CAAA,gBAAA,GAAgD;
|
|
1
|
+
{"version":3,"sources":["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 ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n vertical: {\n flexDirection: 'column',\n paddingTop: tokens.spacingVerticalXS,\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('1px'),\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n pointerEvents: 'none',\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n\n '> *': {\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'transform',\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n left: 0,\n ...shorthands.margin(0),\n opacity: 0,\n position: 'absolute',\n top: 0,\n width: '100%',\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 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.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundPressed,\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\nconst useLabelStyles = makeStyles({\n above: {\n marginBottom: tokens.spacingVerticalXS,\n },\n after: {\n marginLeft: tokens.spacingHorizontalM,\n },\n before: {\n marginRight: tokens.spacingHorizontalM,\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 { 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(switchClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n state.input.className = mergeClasses(\n switchClassNames.input,\n inputStyles.base,\n inputStyles.highContrast,\n state.input.className,\n );\n\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles[labelPosition], state.label.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,QAAA,gBAAA,OAAA,CAAA,UAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,QAAA,EAAA;
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,QAAA,gBAAA,OAAA,CAAA,UAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,QAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,MAAA;EAAM;AAAN,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,qBAAA;EAAqB;AAArB,CAAA,E,CACA;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,eAAA;EAAe;AAAf,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,gBAAA;EAAgB;AAAhB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,wBAAA;EAAwB;AAAxB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA","sourcesContent":["export {\n Switch,\n renderSwitch_unstable,\n // eslint-disable-next-line deprecation/deprecation\n switchClassName,\n switchClassNames,\n useSwitchStyles_unstable,\n useSwitch_unstable,\n} from './Switch';\nexport type { SwitchOnChangeData, SwitchProps, SwitchSlots, SwitchState } from './Switch';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-switch",
|
|
3
|
-
"version": "9.0.0
|
|
3
|
+
"version": "9.0.0",
|
|
4
4
|
"description": "Fluent UI React Switch component.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
7
|
-
"typings": "
|
|
7
|
+
"typings": "dist/index.d.ts",
|
|
8
8
|
"sideEffects": false,
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
@@ -21,23 +21,23 @@
|
|
|
21
21
|
"start": "yarn storybook",
|
|
22
22
|
"test": "jest --passWithNoTests",
|
|
23
23
|
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
|
|
24
|
-
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node
|
|
25
|
-
"storybook": "node
|
|
24
|
+
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-switch/src && yarn docs",
|
|
25
|
+
"storybook": "node ../../../scripts/storybook/runner",
|
|
26
26
|
"type-check": "tsc -b tsconfig.json"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
30
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.9",
|
|
32
32
|
"@fluentui/scripts": "^1.0.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-icons": "^2.0.
|
|
36
|
-
"@fluentui/react-label": "9.0.0
|
|
37
|
-
"@fluentui/react-tabster": "9.0.0
|
|
38
|
-
"@fluentui/react-theme": "9.0.0
|
|
39
|
-
"@fluentui/react-utilities": "9.0.0
|
|
40
|
-
"@griffel/react": "1.0
|
|
35
|
+
"@fluentui/react-icons": "^2.0.172-rc.8",
|
|
36
|
+
"@fluentui/react-label": "^9.0.0",
|
|
37
|
+
"@fluentui/react-tabster": "^9.0.0",
|
|
38
|
+
"@fluentui/react-theme": "^9.0.0",
|
|
39
|
+
"@fluentui/react-utilities": "^9.0.0",
|
|
40
|
+
"@griffel/react": "1.2.0",
|
|
41
41
|
"tslib": "^2.1.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
@@ -48,9 +48,7 @@
|
|
|
48
48
|
},
|
|
49
49
|
"beachball": {
|
|
50
50
|
"disallowedChangeTypes": [
|
|
51
|
-
"major"
|
|
52
|
-
"minor",
|
|
53
|
-
"patch"
|
|
51
|
+
"major"
|
|
54
52
|
]
|
|
55
53
|
},
|
|
56
54
|
"exports": {
|
package/lib/Switch.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './components/Switch/index';
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { SwitchProps } from './Switch.types';
|
|
2
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
3
|
-
/**
|
|
4
|
-
* Switches enable users to trigger an option on or off through pressing the component.
|
|
5
|
-
*/
|
|
6
|
-
export declare const Switch: ForwardRefComponent<SwitchProps>;
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { Label } from '@fluentui/react-label';
|
|
3
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
4
|
-
export declare type SwitchSlots = {
|
|
5
|
-
/**
|
|
6
|
-
* The root element of the Switch.
|
|
7
|
-
*
|
|
8
|
-
* The root slot receives the `className` and `style` specified directly on the `<Switch>` tag.
|
|
9
|
-
* All other native props will be applied to the primary slot: `input`.
|
|
10
|
-
*/
|
|
11
|
-
root: NonNullable<Slot<'div'>>;
|
|
12
|
-
/**
|
|
13
|
-
* The track and the thumb sliding over it indicating the on and off status of the Switch.
|
|
14
|
-
*/
|
|
15
|
-
indicator: NonNullable<Slot<'div'>>;
|
|
16
|
-
/**
|
|
17
|
-
* Hidden input that handles the Switch's functionality.
|
|
18
|
-
*
|
|
19
|
-
* This is the PRIMARY slot: all native properties specified directly on the `<Switch>` tag will be applied to this
|
|
20
|
-
* slot, except `className` and `style`, which remain on the root slot.
|
|
21
|
-
*/
|
|
22
|
-
input: NonNullable<Slot<'input'>>;
|
|
23
|
-
/**
|
|
24
|
-
* The Switch's label.
|
|
25
|
-
*/
|
|
26
|
-
label?: Slot<typeof Label>;
|
|
27
|
-
};
|
|
28
|
-
declare type SwitchCommons = {
|
|
29
|
-
/**
|
|
30
|
-
* Defines the controlled checked state of the Switch.
|
|
31
|
-
* If passed, Switch ignores the `defaultChecked` property.
|
|
32
|
-
* This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the
|
|
33
|
-
* correct value based on handling `onChange` events and re-rendering.
|
|
34
|
-
* @default false
|
|
35
|
-
*/
|
|
36
|
-
checked?: boolean;
|
|
37
|
-
/**
|
|
38
|
-
* The position of the label relative to the Switch.
|
|
39
|
-
*
|
|
40
|
-
* @default after
|
|
41
|
-
*/
|
|
42
|
-
labelPosition: 'above' | 'after' | 'before';
|
|
43
|
-
};
|
|
44
|
-
export declare type SwitchOnChangeData = {
|
|
45
|
-
checked: boolean;
|
|
46
|
-
};
|
|
47
|
-
/**
|
|
48
|
-
* Switch Props
|
|
49
|
-
*/
|
|
50
|
-
export declare type SwitchProps = Omit<ComponentProps<Partial<SwitchSlots>, 'input'>, 'onChange'> & Partial<SwitchCommons> & {
|
|
51
|
-
/**
|
|
52
|
-
* Defines whether the Switch is initially in a checked state or not when rendered.
|
|
53
|
-
* @default false
|
|
54
|
-
*/
|
|
55
|
-
defaultChecked?: boolean;
|
|
56
|
-
/**
|
|
57
|
-
* Callback to be called when the checked state value changes.
|
|
58
|
-
*/
|
|
59
|
-
onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SwitchOnChangeData) => void;
|
|
60
|
-
};
|
|
61
|
-
/**
|
|
62
|
-
* State used in rendering Switch
|
|
63
|
-
*/
|
|
64
|
-
export declare type SwitchState = ComponentState<SwitchSlots> & SwitchCommons;
|
|
65
|
-
export {};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { SwitchProps, SwitchState } from './Switch.types';
|
|
3
|
-
/**
|
|
4
|
-
* Create the state required to render Switch.
|
|
5
|
-
*
|
|
6
|
-
* The returned state can be modified with hooks such as useSwitchStyles_unstable,
|
|
7
|
-
* before being passed to renderSwitch_unstable.
|
|
8
|
-
*
|
|
9
|
-
* @param props - props from this instance of Switch
|
|
10
|
-
* @param ref - reference to `<input>` element of Switch
|
|
11
|
-
*/
|
|
12
|
-
export declare const useSwitch_unstable: (props: SwitchProps, ref: React.Ref<HTMLInputElement>) => SwitchState;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
2
|
-
import type { SwitchSlots, SwitchState } from './Switch.types';
|
|
3
|
-
export declare const switchClassNames: SlotClassNames<SwitchSlots>;
|
|
4
|
-
/**
|
|
5
|
-
* @deprecated Use `switchClassNames.root` instead.
|
|
6
|
-
*/
|
|
7
|
-
export declare const switchClassName: string;
|
|
8
|
-
/**
|
|
9
|
-
* Apply styling to the Switch slots based on the state
|
|
10
|
-
*/
|
|
11
|
-
export declare const useSwitchStyles_unstable: (state: SwitchState) => SwitchState;
|
package/lib/index.d.ts
DELETED
package/lib-commonjs/Switch.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './components/Switch/index';
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { SwitchProps } from './Switch.types';
|
|
2
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
3
|
-
/**
|
|
4
|
-
* Switches enable users to trigger an option on or off through pressing the component.
|
|
5
|
-
*/
|
|
6
|
-
export declare const Switch: ForwardRefComponent<SwitchProps>;
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { Label } from '@fluentui/react-label';
|
|
3
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
4
|
-
export declare type SwitchSlots = {
|
|
5
|
-
/**
|
|
6
|
-
* The root element of the Switch.
|
|
7
|
-
*
|
|
8
|
-
* The root slot receives the `className` and `style` specified directly on the `<Switch>` tag.
|
|
9
|
-
* All other native props will be applied to the primary slot: `input`.
|
|
10
|
-
*/
|
|
11
|
-
root: NonNullable<Slot<'div'>>;
|
|
12
|
-
/**
|
|
13
|
-
* The track and the thumb sliding over it indicating the on and off status of the Switch.
|
|
14
|
-
*/
|
|
15
|
-
indicator: NonNullable<Slot<'div'>>;
|
|
16
|
-
/**
|
|
17
|
-
* Hidden input that handles the Switch's functionality.
|
|
18
|
-
*
|
|
19
|
-
* This is the PRIMARY slot: all native properties specified directly on the `<Switch>` tag will be applied to this
|
|
20
|
-
* slot, except `className` and `style`, which remain on the root slot.
|
|
21
|
-
*/
|
|
22
|
-
input: NonNullable<Slot<'input'>>;
|
|
23
|
-
/**
|
|
24
|
-
* The Switch's label.
|
|
25
|
-
*/
|
|
26
|
-
label?: Slot<typeof Label>;
|
|
27
|
-
};
|
|
28
|
-
declare type SwitchCommons = {
|
|
29
|
-
/**
|
|
30
|
-
* Defines the controlled checked state of the Switch.
|
|
31
|
-
* If passed, Switch ignores the `defaultChecked` property.
|
|
32
|
-
* This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the
|
|
33
|
-
* correct value based on handling `onChange` events and re-rendering.
|
|
34
|
-
* @default false
|
|
35
|
-
*/
|
|
36
|
-
checked?: boolean;
|
|
37
|
-
/**
|
|
38
|
-
* The position of the label relative to the Switch.
|
|
39
|
-
*
|
|
40
|
-
* @default after
|
|
41
|
-
*/
|
|
42
|
-
labelPosition: 'above' | 'after' | 'before';
|
|
43
|
-
};
|
|
44
|
-
export declare type SwitchOnChangeData = {
|
|
45
|
-
checked: boolean;
|
|
46
|
-
};
|
|
47
|
-
/**
|
|
48
|
-
* Switch Props
|
|
49
|
-
*/
|
|
50
|
-
export declare type SwitchProps = Omit<ComponentProps<Partial<SwitchSlots>, 'input'>, 'onChange'> & Partial<SwitchCommons> & {
|
|
51
|
-
/**
|
|
52
|
-
* Defines whether the Switch is initially in a checked state or not when rendered.
|
|
53
|
-
* @default false
|
|
54
|
-
*/
|
|
55
|
-
defaultChecked?: boolean;
|
|
56
|
-
/**
|
|
57
|
-
* Callback to be called when the checked state value changes.
|
|
58
|
-
*/
|
|
59
|
-
onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SwitchOnChangeData) => void;
|
|
60
|
-
};
|
|
61
|
-
/**
|
|
62
|
-
* State used in rendering Switch
|
|
63
|
-
*/
|
|
64
|
-
export declare type SwitchState = ComponentState<SwitchSlots> & SwitchCommons;
|
|
65
|
-
export {};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { SwitchProps, SwitchState } from './Switch.types';
|
|
3
|
-
/**
|
|
4
|
-
* Create the state required to render Switch.
|
|
5
|
-
*
|
|
6
|
-
* The returned state can be modified with hooks such as useSwitchStyles_unstable,
|
|
7
|
-
* before being passed to renderSwitch_unstable.
|
|
8
|
-
*
|
|
9
|
-
* @param props - props from this instance of Switch
|
|
10
|
-
* @param ref - reference to `<input>` element of Switch
|
|
11
|
-
*/
|
|
12
|
-
export declare const useSwitch_unstable: (props: SwitchProps, ref: React.Ref<HTMLInputElement>) => SwitchState;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
2
|
-
import type { SwitchSlots, SwitchState } from './Switch.types';
|
|
3
|
-
export declare const switchClassNames: SlotClassNames<SwitchSlots>;
|
|
4
|
-
/**
|
|
5
|
-
* @deprecated Use `switchClassNames.root` instead.
|
|
6
|
-
*/
|
|
7
|
-
export declare const switchClassName: string;
|
|
8
|
-
/**
|
|
9
|
-
* Apply styling to the Switch slots based on the state
|
|
10
|
-
*/
|
|
11
|
-
export declare const useSwitchStyles_unstable: (state: SwitchState) => SwitchState;
|
package/lib-commonjs/index.d.ts
DELETED