@fluentui/react-switch 0.0.0-nightly-20230317-0436.1 → 0.0.0-nightly-20230317-1454.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/.swcrc +39 -0
- package/CHANGELOG.json +17 -17
- package/CHANGELOG.md +11 -11
- package/lib/Switch.js +1 -1
- package/lib/Switch.js.map +1 -1
- package/lib/SwitchField.js +1 -1
- package/lib/SwitchField.js.map +1 -1
- package/lib/components/Switch/Switch.js +6 -6
- package/lib/components/Switch/Switch.js.map +1 -1
- package/lib/components/Switch/Switch.types.js +1 -1
- package/lib/components/Switch/Switch.types.js.map +1 -1
- package/lib/components/Switch/index.js +5 -5
- package/lib/components/Switch/index.js.map +1 -1
- package/lib/components/Switch/renderSwitch.js +3 -13
- package/lib/components/Switch/renderSwitch.js.map +1 -1
- package/lib/components/Switch/useSwitch.js +17 -17
- package/lib/components/Switch/useSwitch.js.map +1 -1
- package/lib/components/Switch/useSwitchStyles.js +9 -9
- package/lib/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib/components/SwitchField/SwitchField.js +2 -3
- package/lib/components/SwitchField/SwitchField.js.map +1 -1
- package/lib/components/SwitchField/index.js +1 -1
- package/lib/components/SwitchField/index.js.map +1 -1
- package/lib/index.js +2 -2
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Switch.js +5 -4
- package/lib-commonjs/Switch.js.map +1 -1
- package/lib-commonjs/SwitchField.js +5 -4
- package/lib-commonjs/SwitchField.js.map +1 -1
- package/lib-commonjs/components/Switch/Switch.js +19 -20
- package/lib-commonjs/components/Switch/Switch.js.map +1 -1
- package/lib-commonjs/components/Switch/Switch.types.js +5 -2
- package/lib-commonjs/components/Switch/Switch.types.js.map +1 -1
- package/lib-commonjs/components/Switch/index.js +9 -8
- package/lib-commonjs/components/Switch/index.js.map +1 -1
- package/lib-commonjs/components/Switch/renderSwitch.js +14 -29
- package/lib-commonjs/components/Switch/renderSwitch.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitch.js +76 -85
- package/lib-commonjs/components/Switch/useSwitch.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.js +176 -89
- package/lib-commonjs/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib-commonjs/components/SwitchField/SwitchField.js +17 -11
- package/lib-commonjs/components/SwitchField/SwitchField.js.map +1 -1
- package/lib-commonjs/components/SwitchField/index.js +5 -4
- package/lib-commonjs/components/SwitchField/index.js.map +1 -1
- package/lib-commonjs/index.js +23 -56
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +10 -10
@@ -1,108 +1,195 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
function _export(target, all) {
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
7
|
+
enumerable: true,
|
8
|
+
get: all[name]
|
9
|
+
});
|
10
|
+
}
|
11
|
+
_export(exports, {
|
12
|
+
switchClassNames: ()=>switchClassNames,
|
13
|
+
switchClassName: ()=>switchClassName,
|
14
|
+
useSwitchStyles_unstable: ()=>useSwitchStyles_unstable
|
5
15
|
});
|
6
|
-
|
7
|
-
const
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
indicator: 'fui-Switch__indicator',
|
13
|
-
input: 'fui-Switch__input',
|
14
|
-
label: 'fui-Switch__label'
|
16
|
+
const _react = require("@griffel/react");
|
17
|
+
const switchClassNames = {
|
18
|
+
root: "fui-Switch",
|
19
|
+
indicator: "fui-Switch__indicator",
|
20
|
+
input: "fui-Switch__input",
|
21
|
+
label: "fui-Switch__label"
|
15
22
|
};
|
16
|
-
|
17
|
-
* @deprecated Use `switchClassNames.root` instead.
|
18
|
-
*/
|
19
|
-
exports.switchClassName = exports.switchClassNames.root;
|
23
|
+
const switchClassName = switchClassNames.root;
|
20
24
|
// Thumb and track sizes used by the component.
|
21
25
|
const spaceBetweenThumbAndTrack = 2;
|
22
26
|
const trackHeight = 20;
|
23
27
|
const trackWidth = 40;
|
24
28
|
const thumbSize = trackHeight - spaceBetweenThumbAndTrack;
|
25
|
-
const useRootBaseClassName = /*#__PURE__*/
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
29
|
+
const useRootBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("r1u7w45w", "rlzel8d", [
|
30
|
+
".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;}",
|
31
|
+
".r1u7w45w:focus{outline-style:none;}",
|
32
|
+
".r1u7w45w:focus-visible{outline-style:none;}",
|
33
|
+
".r1u7w45w[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
|
34
|
+
'.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;}',
|
35
|
+
".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;}",
|
36
|
+
".rlzel8d:focus{outline-style:none;}",
|
37
|
+
".rlzel8d:focus-visible{outline-style:none;}",
|
38
|
+
".rlzel8d[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
|
39
|
+
'.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;}'
|
40
|
+
]);
|
41
|
+
const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
42
|
+
vertical: {
|
43
|
+
Beiy3e4: "f1vx9l62"
|
44
|
+
}
|
30
45
|
}, {
|
31
|
-
|
46
|
+
d: [
|
47
|
+
".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"
|
48
|
+
]
|
32
49
|
});
|
33
|
-
const useIndicatorBaseClassName = /*#__PURE__*/
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
50
|
+
const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("r13wlxb8", null, [
|
51
|
+
".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;}",
|
52
|
+
"@media screen and (prefers-reduced-motion: reduce){.r13wlxb8{transition-duration:0.01ms;}}",
|
53
|
+
".r13wlxb8>*{transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:transform;}",
|
54
|
+
"@media screen and (prefers-reduced-motion: reduce){.r13wlxb8>*{transition-duration:0.01ms;}}"
|
55
|
+
]);
|
56
|
+
const useIndicatorStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
57
|
+
labelAbove: {
|
58
|
+
B6of3ja: "f1hu3pq6"
|
59
|
+
}
|
38
60
|
}, {
|
39
|
-
|
61
|
+
d: [
|
62
|
+
".f1hu3pq6{margin-top:0;}"
|
63
|
+
]
|
40
64
|
});
|
41
|
-
const useInputBaseClassName = /*#__PURE__*/
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
65
|
+
const useInputBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("r92li9d", "rxjpw57", [
|
66
|
+
".r92li9d{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}",
|
67
|
+
".r92li9d:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}",
|
68
|
+
".r92li9d:disabled{cursor:default;}",
|
69
|
+
".r92li9d:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}",
|
70
|
+
".r92li9d:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}",
|
71
|
+
".r92li9d:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}",
|
72
|
+
".r92li9d:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}",
|
73
|
+
".r92li9d:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}",
|
74
|
+
".r92li9d:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}",
|
75
|
+
".r92li9d:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}",
|
76
|
+
".r92li9d:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}",
|
77
|
+
".r92li9d:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}",
|
78
|
+
".r92li9d:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}",
|
79
|
+
".r92li9d:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}",
|
80
|
+
"@media (forced-colors: active){.r92li9d:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.r92li9d:disabled~.fui-Switch__label{color:GrayText;}}",
|
81
|
+
".rxjpw57{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}",
|
82
|
+
".rxjpw57:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px);}",
|
83
|
+
".rxjpw57:disabled{cursor:default;}",
|
84
|
+
".rxjpw57:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}",
|
85
|
+
".rxjpw57:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}",
|
86
|
+
".rxjpw57:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}",
|
87
|
+
".rxjpw57:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}",
|
88
|
+
".rxjpw57:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}",
|
89
|
+
".rxjpw57:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}",
|
90
|
+
".rxjpw57:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}",
|
91
|
+
".rxjpw57:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}",
|
92
|
+
".rxjpw57:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}",
|
93
|
+
".rxjpw57:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}",
|
94
|
+
".rxjpw57:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}",
|
95
|
+
"@media (forced-colors: active){.rxjpw57:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.rxjpw57:disabled~.fui-Switch__label{color:GrayText;}}"
|
96
|
+
]);
|
97
|
+
const useInputStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
98
|
+
before: {
|
99
|
+
j35jbq: [
|
100
|
+
"f1e31b4d",
|
101
|
+
"f1vgc2s3"
|
102
|
+
],
|
103
|
+
Bhzewxz: "f15twtuk"
|
104
|
+
},
|
105
|
+
after: {
|
106
|
+
oyh7mz: [
|
107
|
+
"f1vgc2s3",
|
108
|
+
"f1e31b4d"
|
109
|
+
],
|
110
|
+
Bhzewxz: "f15twtuk"
|
111
|
+
},
|
112
|
+
above: {
|
113
|
+
B5kzvoi: "f1yab3r1",
|
114
|
+
Bqenvij: "f1aar7gd",
|
115
|
+
a9b677: "fly5x3f"
|
116
|
+
}
|
56
117
|
}, {
|
57
|
-
|
118
|
+
d: [
|
119
|
+
".f1e31b4d{right:0;}",
|
120
|
+
".f1vgc2s3{left:0;}",
|
121
|
+
".f15twtuk{top:0;}",
|
122
|
+
".f1yab3r1{bottom:0;}",
|
123
|
+
".f1aar7gd{height:calc(20px + var(--spacingVerticalS));}",
|
124
|
+
".fly5x3f{width:100%;}"
|
125
|
+
]
|
58
126
|
});
|
59
127
|
// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
|
60
|
-
const useLabelStyles = /*#__PURE__*/
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
128
|
+
const useLabelStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
129
|
+
base: {
|
130
|
+
Bceei9c: "f1k6fduh",
|
131
|
+
jrapky: "f49ad5g",
|
132
|
+
B6of3ja: "f1xlvstr",
|
133
|
+
z8tnut: "f1kwiid1",
|
134
|
+
z189sj: [
|
135
|
+
"f1vdfbxk",
|
136
|
+
"f1f5gg8d"
|
137
|
+
],
|
138
|
+
Byoj8tv: "f5b47ha",
|
139
|
+
uwmqm3: [
|
140
|
+
"f1f5gg8d",
|
141
|
+
"f1vdfbxk"
|
142
|
+
]
|
143
|
+
},
|
144
|
+
above: {
|
145
|
+
z8tnut: "f1ywm7hm",
|
146
|
+
Byoj8tv: "f14wxoun",
|
147
|
+
a9b677: "fly5x3f"
|
148
|
+
},
|
149
|
+
after: {
|
150
|
+
uwmqm3: [
|
151
|
+
"fruq291",
|
152
|
+
"f7x41pl"
|
153
|
+
]
|
154
|
+
},
|
155
|
+
before: {
|
156
|
+
z189sj: [
|
157
|
+
"f7x41pl",
|
158
|
+
"fruq291"
|
159
|
+
]
|
160
|
+
}
|
81
161
|
}, {
|
82
|
-
|
162
|
+
d: [
|
163
|
+
".f1k6fduh{cursor:pointer;}",
|
164
|
+
".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}",
|
165
|
+
".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}",
|
166
|
+
".f1kwiid1{padding-top:var(--spacingVerticalS);}",
|
167
|
+
".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
|
168
|
+
".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
|
169
|
+
".f5b47ha{padding-bottom:var(--spacingVerticalS);}",
|
170
|
+
".f1ywm7hm{padding-top:var(--spacingVerticalXS);}",
|
171
|
+
".f14wxoun{padding-bottom:var(--spacingVerticalXS);}",
|
172
|
+
".fly5x3f{width:100%;}",
|
173
|
+
".fruq291{padding-left:var(--spacingHorizontalXS);}",
|
174
|
+
".f7x41pl{padding-right:var(--spacingHorizontalXS);}"
|
175
|
+
]
|
83
176
|
});
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
const
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
label
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
if (state.label) {
|
103
|
-
state.label.className = react_1.mergeClasses(exports.switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
|
104
|
-
}
|
105
|
-
return state;
|
106
|
-
};
|
107
|
-
exports.useSwitchStyles_unstable = useSwitchStyles_unstable;
|
177
|
+
const useSwitchStyles_unstable = (state)=>{
|
178
|
+
const rootBaseClassName = useRootBaseClassName();
|
179
|
+
const rootStyles = useRootStyles();
|
180
|
+
const indicatorBaseClassName = useIndicatorBaseClassName();
|
181
|
+
const indicatorStyles = useIndicatorStyles();
|
182
|
+
const inputBaseClassName = useInputBaseClassName();
|
183
|
+
const inputStyles = useInputStyles();
|
184
|
+
const labelStyles = useLabelStyles();
|
185
|
+
const { label , labelPosition } = state;
|
186
|
+
state.root.className = (0, _react.mergeClasses)(switchClassNames.root, rootBaseClassName, labelPosition === "above" && rootStyles.vertical, state.root.className);
|
187
|
+
state.indicator.className = (0, _react.mergeClasses)(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === "above" && indicatorStyles.labelAbove, state.indicator.className);
|
188
|
+
state.input.className = (0, _react.mergeClasses)(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], state.input.className);
|
189
|
+
if (state.label) {
|
190
|
+
state.label.className = (0, _react.mergeClasses)(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
|
191
|
+
}
|
192
|
+
return state;
|
193
|
+
}; //# sourceMappingURL=useSwitchStyles.js.map
|
194
|
+
|
108
195
|
//# sourceMappingURL=useSwitchStyles.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["react_tabster_1","require","react_theme_1","react_1","exports","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","__resetStyles","useRootStyles","__styles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","Bqenvij","a9b677","useLabelStyles","base","Bceei9c","jrapky","z8tnut","z189sj","Byoj8tv","uwmqm3","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className","mergeClasses"],"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"],"mappings":"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"}
|
1
|
+
{"version":3,"sources":["../../../lib/components/Switch/useSwitchStyles.js"],"sourcesContent":["import { createFocusOutlineStyle } from \"@fluentui/react-tabster\";\nimport { tokens } from \"@fluentui/react-theme\";\nimport { __resetStyles, __styles, mergeClasses, shorthands } from \"@griffel/react\";\nexport const switchClassNames = {\n root: \"fui-Switch\",\n indicator: \"fui-Switch__indicator\",\n input: \"fui-Switch__input\",\n label: \"fui-Switch__label\"\n};\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst 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;}\"]);\nconst useRootStyles = /*#__PURE__*/__styles({\n vertical: {\n Beiy3e4: \"f1vx9l62\"\n }\n}, {\n d: [\".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\"]\n});\nconst 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;}}\"]);\nconst useIndicatorStyles = /*#__PURE__*/__styles({\n labelAbove: {\n B6of3ja: \"f1hu3pq6\"\n }\n}, {\n d: [\".f1hu3pq6{margin-top:0;}\"]\n});\nconst 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;}}\"]);\nconst useInputStyles = /*#__PURE__*/__styles({\n before: {\n j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"],\n Bhzewxz: \"f15twtuk\"\n },\n after: {\n oyh7mz: [\"f1vgc2s3\", \"f1e31b4d\"],\n Bhzewxz: \"f15twtuk\"\n },\n above: {\n B5kzvoi: \"f1yab3r1\",\n Bqenvij: \"f1aar7gd\",\n a9b677: \"fly5x3f\"\n }\n}, {\n d: [\".f1e31b4d{right:0;}\", \".f1vgc2s3{left:0;}\", \".f15twtuk{top:0;}\", \".f1yab3r1{bottom:0;}\", \".f1aar7gd{height:calc(20px + var(--spacingVerticalS));}\", \".fly5x3f{width:100%;}\"]\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = /*#__PURE__*/__styles({\n base: {\n Bceei9c: \"f1k6fduh\",\n jrapky: \"f49ad5g\",\n B6of3ja: \"f1xlvstr\",\n z8tnut: \"f1kwiid1\",\n z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n Byoj8tv: \"f5b47ha\",\n uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n },\n above: {\n z8tnut: \"f1ywm7hm\",\n Byoj8tv: \"f14wxoun\",\n a9b677: \"fly5x3f\"\n },\n after: {\n uwmqm3: [\"fruq291\", \"f7x41pl\"]\n },\n before: {\n z189sj: [\"f7x41pl\", \"fruq291\"]\n }\n}, {\n 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);}\"]\n});\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = state => {\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 const {\n label,\n labelPosition\n } = state;\n state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === \"above\" && rootStyles.vertical, state.root.className);\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === \"above\" && indicatorStyles.labelAbove, state.indicator.className);\n state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], state.input.className);\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n }\n return state;\n};\n//# sourceMappingURL=useSwitchStyles.js.map"],"names":["switchClassNames","switchClassName","useSwitchStyles_unstable","root","indicator","input","label","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","__resetStyles","useRootStyles","__styles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","Bqenvij","a9b677","useLabelStyles","base","Bceei9c","jrapky","z8tnut","z189sj","Byoj8tv","uwmqm3","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className","mergeClasses"],"mappings":"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"}
|
@@ -1,14 +1,20 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
1
|
+
/* eslint-disable deprecation/deprecation */ "use strict";
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
function _export(target, all) {
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
7
|
+
enumerable: true,
|
8
|
+
get: all[name]
|
9
|
+
});
|
10
|
+
}
|
11
|
+
_export(exports, {
|
12
|
+
switchFieldClassNames: ()=>switchFieldClassNames,
|
13
|
+
SwitchField: ()=>SwitchField
|
5
14
|
});
|
6
|
-
|
7
|
-
|
8
|
-
const
|
9
|
-
const
|
10
|
-
|
11
|
-
exports.switchFieldClassNames = /*#__PURE__*/react_field_1.getDeprecatedFieldClassNames(Switch_1.switchClassNames.root);
|
12
|
-
/** @deprecated Use Field with Switch: `<Field><Switch /></Field>` */
|
13
|
-
exports.SwitchField = /*#__PURE__*/react_field_1.makeDeprecatedField(Switch_1.Switch);
|
15
|
+
const _reactField = require("@fluentui/react-field");
|
16
|
+
const _switch = require("../../Switch");
|
17
|
+
const switchFieldClassNames = /*#__PURE__*/ (0, _reactField.getDeprecatedFieldClassNames)(_switch.switchClassNames.root);
|
18
|
+
const SwitchField = /*#__PURE__*/ (0, _reactField.makeDeprecatedField)(_switch.Switch); //# sourceMappingURL=SwitchField.js.map
|
19
|
+
|
14
20
|
//# sourceMappingURL=SwitchField.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../../lib/components/SwitchField/SwitchField.js"],"sourcesContent":["/* eslint-disable deprecation/deprecation */import { getDeprecatedFieldClassNames, makeDeprecatedField } from \"@fluentui/react-field\";\nimport { Switch, switchClassNames } from \"../../Switch\";\n/** @deprecated Use Field with Switch: `<Field><Switch /></Field>` */\nexport const switchFieldClassNames = /*#__PURE__*/getDeprecatedFieldClassNames(switchClassNames.root);\n/** @deprecated Use Field with Switch: `<Field><Switch /></Field>` */\nexport const SwitchField = /*#__PURE__*/makeDeprecatedField(Switch);\n//# sourceMappingURL=SwitchField.js.map"],"names":["switchFieldClassNames","SwitchField","getDeprecatedFieldClassNames","switchClassNames","root","makeDeprecatedField","Switch"],"mappings":"AAAA,0CAA0C;;;;;;;;;;;IAG7BA,qBAAqB,MAArBA;IAEAC,WAAW,MAAXA;;4BALiG;wBACrE;AAElC,MAAMD,wBAAwB,WAAW,GAAEE,IAAAA,wCAA4B,EAACC,wBAAgB,CAACC,IAAI;AAE7F,MAAMH,cAAc,WAAW,GAAEI,IAAAA,+BAAmB,EAACC,cAAM,GAClE,uCAAuC"}
|
@@ -1,8 +1,9 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
3
|
+
value: true
|
5
4
|
});
|
6
|
-
const
|
7
|
-
|
5
|
+
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
6
|
+
_exportStar(require("./SwitchField"), exports);
|
7
|
+
//# sourceMappingURL=index.js.map
|
8
|
+
|
8
9
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../../../lib/components/SwitchField/index.js"],"sourcesContent":["export * from \"./SwitchField\";\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,iCAAiC"}
|
package/lib-commonjs/index.js
CHANGED
@@ -1,59 +1,26 @@
|
|
1
1
|
"use strict";
|
2
|
-
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
4
|
-
|
5
|
-
});
|
6
|
-
|
7
|
-
var
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
Object.defineProperty(exports, "switchClassNames", {
|
28
|
-
enumerable: true,
|
29
|
-
get: function () {
|
30
|
-
return Switch_1.switchClassNames;
|
31
|
-
}
|
32
|
-
});
|
33
|
-
Object.defineProperty(exports, "useSwitchStyles_unstable", {
|
34
|
-
enumerable: true,
|
35
|
-
get: function () {
|
36
|
-
return Switch_1.useSwitchStyles_unstable;
|
37
|
-
}
|
38
|
-
});
|
39
|
-
Object.defineProperty(exports, "useSwitch_unstable", {
|
40
|
-
enumerable: true,
|
41
|
-
get: function () {
|
42
|
-
return Switch_1.useSwitch_unstable;
|
43
|
-
}
|
44
|
-
});
|
45
|
-
// eslint-disable-next-line deprecation/deprecation
|
46
|
-
var SwitchField_1 = /*#__PURE__*/require("./SwitchField");
|
47
|
-
Object.defineProperty(exports, "SwitchField_unstable", {
|
48
|
-
enumerable: true,
|
49
|
-
get: function () {
|
50
|
-
return SwitchField_1.SwitchField;
|
51
|
-
}
|
52
|
-
});
|
53
|
-
Object.defineProperty(exports, "switchFieldClassNames", {
|
54
|
-
enumerable: true,
|
55
|
-
get: function () {
|
56
|
-
return SwitchField_1.switchFieldClassNames;
|
57
|
-
}
|
58
|
-
});
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
function _export(target, all) {
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
7
|
+
enumerable: true,
|
8
|
+
get: all[name]
|
9
|
+
});
|
10
|
+
}
|
11
|
+
_export(exports, {
|
12
|
+
Switch: ()=>_switch.Switch,
|
13
|
+
renderSwitch_unstable: ()=>_switch.renderSwitch_unstable,
|
14
|
+
// eslint-disable-next-line deprecation/deprecation
|
15
|
+
switchClassName: ()=>_switch.switchClassName,
|
16
|
+
switchClassNames: ()=>_switch.switchClassNames,
|
17
|
+
useSwitchStyles_unstable: ()=>_switch.useSwitchStyles_unstable,
|
18
|
+
useSwitch_unstable: ()=>_switch.useSwitch_unstable,
|
19
|
+
SwitchField_unstable: ()=>_switchField.SwitchField,
|
20
|
+
switchFieldClassNames: ()=>_switchField.switchFieldClassNames
|
21
|
+
});
|
22
|
+
const _switch = require("./Switch");
|
23
|
+
const _switchField = require("./SwitchField");
|
24
|
+
//# sourceMappingURL=index.js.map
|
25
|
+
|
59
26
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../lib/index.js"],"sourcesContent":["export { Switch, renderSwitch_unstable,\n// eslint-disable-next-line deprecation/deprecation\nswitchClassName, switchClassNames, useSwitchStyles_unstable, useSwitch_unstable } from \"./Switch\";\n// eslint-disable-next-line deprecation/deprecation\nexport { SwitchField as SwitchField_unstable, switchFieldClassNames } from \"./SwitchField\";\n//# sourceMappingURL=index.js.map"],"names":["Switch","renderSwitch_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable","useSwitch_unstable","SwitchField_unstable","SwitchField","switchFieldClassNames"],"mappings":";;;;;;;;;;;IAASA,MAAM,MAANA,cAAM;IAAEC,qBAAqB,MAArBA,6BAAqB;IACtC,mDAAmD;IACnDC,eAAe,MAAfA,uBAAe;IAAEC,gBAAgB,MAAhBA,wBAAgB;IAAEC,wBAAwB,MAAxBA,gCAAwB;IAAEC,kBAAkB,MAAlBA,0BAAkB;IAEvDC,oBAAoB,MAAnCC,wBAAW;IAA0BC,qBAAqB,MAArBA,kCAAqB;;wBAFoB;6BAEZ;CAC3E,iCAAiC"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-switch",
|
3
|
-
"version": "0.0.0-nightly-20230317-
|
3
|
+
"version": "0.0.0-nightly-20230317-1454.1",
|
4
4
|
"description": "Fluent UI React Switch component.",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -22,25 +22,25 @@
|
|
22
22
|
"test": "jest --passWithNoTests",
|
23
23
|
"storybook": "start-storybook",
|
24
24
|
"type-check": "tsc -b tsconfig.json",
|
25
|
-
"generate-api": "
|
25
|
+
"generate-api": "just-scripts generate-api"
|
26
26
|
},
|
27
27
|
"devDependencies": {
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
29
29
|
"@fluentui/react-conformance": "*",
|
30
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20230317-
|
30
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20230317-1454.1",
|
31
31
|
"@fluentui/scripts-api-extractor": "*",
|
32
32
|
"@fluentui/scripts-tasks": "*"
|
33
33
|
},
|
34
34
|
"dependencies": {
|
35
|
-
"@fluentui/react-field": "0.0.0-nightly-20230317-
|
35
|
+
"@fluentui/react-field": "0.0.0-nightly-20230317-1454.1",
|
36
36
|
"@fluentui/react-icons": "^2.0.175",
|
37
|
-
"@fluentui/react-label": "0.0.0-nightly-20230317-
|
38
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-20230317-
|
39
|
-
"@fluentui/react-tabster": "0.0.0-nightly-20230317-
|
40
|
-
"@fluentui/react-theme": "0.0.0-nightly-20230317-
|
41
|
-
"@fluentui/react-utilities": "0.0.0-nightly-20230317-
|
37
|
+
"@fluentui/react-label": "0.0.0-nightly-20230317-1454.1",
|
38
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20230317-1454.1",
|
39
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20230317-1454.1",
|
40
|
+
"@fluentui/react-theme": "0.0.0-nightly-20230317-1454.1",
|
41
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20230317-1454.1",
|
42
42
|
"@griffel/react": "^1.5.2",
|
43
|
-
"
|
43
|
+
"@swc/helpers": "^0.4.14"
|
44
44
|
},
|
45
45
|
"peerDependencies": {
|
46
46
|
"@types/react": ">=16.8.0 <19.0.0",
|