@fluentui/react-switch 0.0.0-nightly-20230317-1454.1 → 0.0.0-nightly-20230322-0439.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 +2 -11
- package/CHANGELOG.json +92 -17
- package/CHANGELOG.md +30 -11
- package/lib/Switch.js +1 -1
- package/lib/SwitchField.js +1 -1
- package/lib/components/Switch/Switch.js +6 -6
- package/lib/components/Switch/Switch.types.js +1 -1
- package/lib/components/Switch/index.js +5 -5
- package/lib/components/Switch/renderSwitch.js +3 -3
- package/lib/components/Switch/useSwitch.js +21 -19
- package/lib/components/Switch/useSwitch.js.map +1 -1
- package/lib/components/Switch/useSwitchStyles.js +10 -10
- package/lib/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib/components/SwitchField/SwitchField.js +2 -2
- package/lib/components/SwitchField/index.js +1 -1
- package/lib/index.js +2 -2
- package/lib-commonjs/Switch.js.map +1 -1
- package/lib-commonjs/SwitchField.js.map +1 -1
- package/lib-commonjs/components/Switch/Switch.js +1 -1
- 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.map +1 -1
- package/lib-commonjs/components/Switch/renderSwitch.js +1 -1
- package/lib-commonjs/components/Switch/renderSwitch.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitch.js +17 -15
- package/lib-commonjs/components/Switch/useSwitch.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.js +39 -39
- package/lib-commonjs/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib-commonjs/components/SwitchField/SwitchField.js.map +1 -1
- package/lib-commonjs/components/SwitchField/index.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +10 -9
package/.swcrc
CHANGED
@@ -1,15 +1,5 @@
|
|
1
1
|
{
|
2
2
|
"$schema": "https://json.schemastore.org/swcrc",
|
3
|
-
"env": {
|
4
|
-
"targets": {
|
5
|
-
"chrome": "84",
|
6
|
-
"edge": "84",
|
7
|
-
"firefox": "75",
|
8
|
-
"opera": "73",
|
9
|
-
"safari": "14.1"
|
10
|
-
},
|
11
|
-
"bugfixes": true
|
12
|
-
},
|
13
3
|
"exclude": [
|
14
4
|
"/testing",
|
15
5
|
"/**/*.cy.ts",
|
@@ -32,7 +22,8 @@
|
|
32
22
|
"runtime": "classic",
|
33
23
|
"useSpread": true
|
34
24
|
}
|
35
|
-
}
|
25
|
+
},
|
26
|
+
"target": "es2019"
|
36
27
|
},
|
37
28
|
"minify": false,
|
38
29
|
"sourceMaps": true
|
package/CHANGELOG.json
CHANGED
@@ -2,9 +2,9 @@
|
|
2
2
|
"name": "@fluentui/react-switch",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
6
|
-
"tag": "@fluentui/react-switch_v0.0.0-nightly-
|
7
|
-
"version": "0.0.0-nightly-
|
5
|
+
"date": "Wed, 22 Mar 2023 04:46:52 GMT",
|
6
|
+
"tag": "@fluentui/react-switch_v0.0.0-nightly-20230322-0439.1",
|
7
|
+
"version": "0.0.0-nightly-20230322-0439.1",
|
8
8
|
"comments": {
|
9
9
|
"prerelease": [
|
10
10
|
{
|
@@ -16,44 +16,119 @@
|
|
16
16
|
{
|
17
17
|
"author": "beachball",
|
18
18
|
"package": "@fluentui/react-switch",
|
19
|
-
"comment": "Bump @fluentui/react-field to v0.0.0-nightly-
|
20
|
-
"commit": "
|
19
|
+
"comment": "Bump @fluentui/react-field to v0.0.0-nightly-20230322-0439.1",
|
20
|
+
"commit": "49dde84493fc2c3e96abac5ce918169c9668ba66"
|
21
21
|
},
|
22
22
|
{
|
23
23
|
"author": "beachball",
|
24
24
|
"package": "@fluentui/react-switch",
|
25
|
-
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-
|
26
|
-
"commit": "
|
25
|
+
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20230322-0439.1",
|
26
|
+
"commit": "49dde84493fc2c3e96abac5ce918169c9668ba66"
|
27
27
|
},
|
28
28
|
{
|
29
29
|
"author": "beachball",
|
30
30
|
"package": "@fluentui/react-switch",
|
31
|
-
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
32
|
-
"commit": "
|
31
|
+
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230322-0439.1",
|
32
|
+
"commit": "49dde84493fc2c3e96abac5ce918169c9668ba66"
|
33
33
|
},
|
34
34
|
{
|
35
35
|
"author": "beachball",
|
36
36
|
"package": "@fluentui/react-switch",
|
37
|
-
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-
|
38
|
-
"commit": "
|
37
|
+
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230322-0439.1",
|
38
|
+
"commit": "49dde84493fc2c3e96abac5ce918169c9668ba66"
|
39
39
|
},
|
40
40
|
{
|
41
41
|
"author": "beachball",
|
42
42
|
"package": "@fluentui/react-switch",
|
43
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
44
|
-
"commit": "
|
43
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230322-0439.1",
|
44
|
+
"commit": "49dde84493fc2c3e96abac5ce918169c9668ba66"
|
45
45
|
},
|
46
46
|
{
|
47
47
|
"author": "beachball",
|
48
48
|
"package": "@fluentui/react-switch",
|
49
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
50
|
-
"commit": "
|
49
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230322-0439.1",
|
50
|
+
"commit": "49dde84493fc2c3e96abac5ce918169c9668ba66"
|
51
51
|
},
|
52
52
|
{
|
53
53
|
"author": "beachball",
|
54
54
|
"package": "@fluentui/react-switch",
|
55
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
56
|
-
"commit": "
|
55
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230322-0439.1",
|
56
|
+
"commit": "49dde84493fc2c3e96abac5ce918169c9668ba66"
|
57
|
+
}
|
58
|
+
]
|
59
|
+
}
|
60
|
+
},
|
61
|
+
{
|
62
|
+
"date": "Tue, 21 Mar 2023 21:23:05 GMT",
|
63
|
+
"tag": "@fluentui/react-switch_v9.1.5",
|
64
|
+
"version": "9.1.5",
|
65
|
+
"comments": {
|
66
|
+
"patch": [
|
67
|
+
{
|
68
|
+
"author": "tristan.watanabe@gmail.com",
|
69
|
+
"package": "@fluentui/react-switch",
|
70
|
+
"commit": "ead1c6d4c2ac3f3596b62b8cbc07b0a03041f11f",
|
71
|
+
"comment": "fix: add node field to package.json exports map."
|
72
|
+
},
|
73
|
+
{
|
74
|
+
"author": "lingfangao@hotmail.com",
|
75
|
+
"package": "@fluentui/react-switch",
|
76
|
+
"commit": "1a45088ee3492f352e23748539bf207af57f99a8",
|
77
|
+
"comment": "fix: Make checked switch more visible in high contrast mode"
|
78
|
+
},
|
79
|
+
{
|
80
|
+
"author": "makotom@microsoft.com",
|
81
|
+
"package": "@fluentui/react-switch",
|
82
|
+
"commit": "7fde5c94869ff9841b142b7ff1d0a3df0ab58f74",
|
83
|
+
"comment": "chore: Bumping version of @fluentui/react-icons to ^2.0.196."
|
84
|
+
},
|
85
|
+
{
|
86
|
+
"author": "tristan.watanabe@gmail.com",
|
87
|
+
"package": "@fluentui/react-switch",
|
88
|
+
"commit": "2fac1a139149bd13b76b1306207bc988dca9c72c",
|
89
|
+
"comment": "chore: migrate to swc transpilation approach."
|
90
|
+
},
|
91
|
+
{
|
92
|
+
"author": "beachball",
|
93
|
+
"package": "@fluentui/react-switch",
|
94
|
+
"comment": "Bump @fluentui/react-field to v9.0.0-alpha.27",
|
95
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
96
|
+
},
|
97
|
+
{
|
98
|
+
"author": "beachball",
|
99
|
+
"package": "@fluentui/react-switch",
|
100
|
+
"comment": "Bump @fluentui/react-label to v9.1.5",
|
101
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
102
|
+
},
|
103
|
+
{
|
104
|
+
"author": "beachball",
|
105
|
+
"package": "@fluentui/react-switch",
|
106
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.3.2",
|
107
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
108
|
+
},
|
109
|
+
{
|
110
|
+
"author": "beachball",
|
111
|
+
"package": "@fluentui/react-switch",
|
112
|
+
"comment": "Bump @fluentui/react-tabster to v9.6.1",
|
113
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
114
|
+
},
|
115
|
+
{
|
116
|
+
"author": "beachball",
|
117
|
+
"package": "@fluentui/react-switch",
|
118
|
+
"comment": "Bump @fluentui/react-theme to v9.1.7",
|
119
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
120
|
+
},
|
121
|
+
{
|
122
|
+
"author": "beachball",
|
123
|
+
"package": "@fluentui/react-switch",
|
124
|
+
"comment": "Bump @fluentui/react-utilities to v9.7.2",
|
125
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
126
|
+
},
|
127
|
+
{
|
128
|
+
"author": "beachball",
|
129
|
+
"package": "@fluentui/react-switch",
|
130
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20",
|
131
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
57
132
|
}
|
58
133
|
]
|
59
134
|
}
|
package/CHANGELOG.md
CHANGED
@@ -1,24 +1,43 @@
|
|
1
1
|
# Change Log - @fluentui/react-switch
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Wed, 22 Mar 2023 04:46:52 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
-
## [0.0.0-nightly-
|
7
|
+
## [0.0.0-nightly-20230322-0439.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v0.0.0-nightly-20230322-0439.1)
|
8
8
|
|
9
|
-
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.1.
|
9
|
+
Wed, 22 Mar 2023 04:46:52 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.1.5..@fluentui/react-switch_v0.0.0-nightly-20230322-0439.1)
|
11
11
|
|
12
12
|
### Changes
|
13
13
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
15
|
-
- Bump @fluentui/react-field to v0.0.0-nightly-
|
16
|
-
- Bump @fluentui/react-label to v0.0.0-nightly-
|
17
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
18
|
-
- Bump @fluentui/react-tabster to v0.0.0-nightly-
|
19
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
20
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
21
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
15
|
+
- Bump @fluentui/react-field to v0.0.0-nightly-20230322-0439.1 ([commit](https://github.com/microsoft/fluentui/commit/49dde84493fc2c3e96abac5ce918169c9668ba66) by beachball)
|
16
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20230322-0439.1 ([commit](https://github.com/microsoft/fluentui/commit/49dde84493fc2c3e96abac5ce918169c9668ba66) by beachball)
|
17
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230322-0439.1 ([commit](https://github.com/microsoft/fluentui/commit/49dde84493fc2c3e96abac5ce918169c9668ba66) by beachball)
|
18
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20230322-0439.1 ([commit](https://github.com/microsoft/fluentui/commit/49dde84493fc2c3e96abac5ce918169c9668ba66) by beachball)
|
19
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20230322-0439.1 ([commit](https://github.com/microsoft/fluentui/commit/49dde84493fc2c3e96abac5ce918169c9668ba66) by beachball)
|
20
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230322-0439.1 ([commit](https://github.com/microsoft/fluentui/commit/49dde84493fc2c3e96abac5ce918169c9668ba66) by beachball)
|
21
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230322-0439.1 ([commit](https://github.com/microsoft/fluentui/commit/49dde84493fc2c3e96abac5ce918169c9668ba66) by beachball)
|
22
|
+
|
23
|
+
## [9.1.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.1.5)
|
24
|
+
|
25
|
+
Tue, 21 Mar 2023 21:23:05 GMT
|
26
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.1.4..@fluentui/react-switch_v9.1.5)
|
27
|
+
|
28
|
+
### Patches
|
29
|
+
|
30
|
+
- fix: add node field to package.json exports map. ([PR #27154](https://github.com/microsoft/fluentui/pull/27154) by tristan.watanabe@gmail.com)
|
31
|
+
- fix: Make checked switch more visible in high contrast mode ([PR #27257](https://github.com/microsoft/fluentui/pull/27257) by lingfangao@hotmail.com)
|
32
|
+
- chore: Bumping version of @fluentui/react-icons to ^2.0.196. ([PR #27100](https://github.com/microsoft/fluentui/pull/27100) by makotom@microsoft.com)
|
33
|
+
- chore: migrate to swc transpilation approach. ([PR #27250](https://github.com/microsoft/fluentui/pull/27250) by tristan.watanabe@gmail.com)
|
34
|
+
- Bump @fluentui/react-field to v9.0.0-alpha.27 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
35
|
+
- Bump @fluentui/react-label to v9.1.5 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
36
|
+
- Bump @fluentui/react-shared-contexts to v9.3.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
37
|
+
- Bump @fluentui/react-tabster to v9.6.1 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
38
|
+
- Bump @fluentui/react-theme to v9.1.7 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
39
|
+
- Bump @fluentui/react-utilities to v9.7.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
40
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
22
41
|
|
23
42
|
## [9.1.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.1.4)
|
24
43
|
|
package/lib/Switch.js
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
export * from
|
1
|
+
export * from './components/Switch/index';
|
2
2
|
//# sourceMappingURL=Switch.js.map
|
package/lib/SwitchField.js
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
export * from
|
1
|
+
export * from './components/SwitchField/index';
|
2
2
|
//# sourceMappingURL=SwitchField.js.map
|
@@ -1,8 +1,8 @@
|
|
1
|
-
import * as React from
|
2
|
-
import { useSwitch_unstable } from
|
3
|
-
import { renderSwitch_unstable } from
|
4
|
-
import { useSwitchStyles_unstable } from
|
5
|
-
import { useCustomStyleHooks_unstable } from
|
1
|
+
import * as React from 'react';
|
2
|
+
import { useSwitch_unstable } from './useSwitch';
|
3
|
+
import { renderSwitch_unstable } from './renderSwitch';
|
4
|
+
import { useSwitchStyles_unstable } from './useSwitchStyles';
|
5
|
+
import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
|
6
6
|
/**
|
7
7
|
* Switches enable users to trigger an option on or off through pressing the component.
|
8
8
|
*/
|
@@ -15,5 +15,5 @@ export const Switch = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
15
15
|
useCustomStyles(state);
|
16
16
|
return renderSwitch_unstable(state);
|
17
17
|
});
|
18
|
-
Switch.displayName =
|
18
|
+
Switch.displayName = 'Switch';
|
19
19
|
//# sourceMappingURL=Switch.js.map
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import * as React from
|
1
|
+
import * as React from 'react';
|
2
2
|
//# sourceMappingURL=Switch.types.js.map
|
@@ -1,6 +1,6 @@
|
|
1
|
-
export * from
|
2
|
-
export * from
|
3
|
-
export * from
|
4
|
-
export * from
|
5
|
-
export * from
|
1
|
+
export * from './Switch';
|
2
|
+
export * from './Switch.types';
|
3
|
+
export * from './renderSwitch';
|
4
|
+
export * from './useSwitch';
|
5
|
+
export * from './useSwitchStyles';
|
6
6
|
//# sourceMappingURL=index.js.map
|
@@ -1,5 +1,5 @@
|
|
1
|
-
import * as React from
|
2
|
-
import { getSlots } from
|
1
|
+
import * as React from 'react';
|
2
|
+
import { getSlots } from '@fluentui/react-utilities';
|
3
3
|
/**
|
4
4
|
* Render a Switch component by passing the state defined props to the appropriate slots.
|
5
5
|
*/
|
@@ -11,6 +11,6 @@ export const renderSwitch_unstable = state => {
|
|
11
11
|
const {
|
12
12
|
labelPosition
|
13
13
|
} = state;
|
14
|
-
return /*#__PURE__*/React.createElement(slots.root, slotProps.root, /*#__PURE__*/React.createElement(slots.input, slotProps.input), labelPosition !==
|
14
|
+
return /*#__PURE__*/React.createElement(slots.root, slotProps.root, /*#__PURE__*/React.createElement(slots.input, slotProps.input), labelPosition !== 'after' && slots.label && /*#__PURE__*/React.createElement(slots.label, slotProps.label), /*#__PURE__*/React.createElement(slots.indicator, slotProps.indicator), labelPosition === 'after' && slots.label && /*#__PURE__*/React.createElement(slots.label, slotProps.label));
|
15
15
|
};
|
16
16
|
//# sourceMappingURL=renderSwitch.js.map
|
@@ -1,8 +1,8 @@
|
|
1
|
-
import * as React from
|
2
|
-
import { CircleFilled } from
|
3
|
-
import { Label } from
|
4
|
-
import { useFocusWithin } from
|
5
|
-
import { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useId } from
|
1
|
+
import * as React from 'react';
|
2
|
+
import { CircleFilled } from '@fluentui/react-icons';
|
3
|
+
import { Label } from '@fluentui/react-label';
|
4
|
+
import { useFocusWithin } from '@fluentui/react-tabster';
|
5
|
+
import { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';
|
6
6
|
/**
|
7
7
|
* Create the state required to render Switch.
|
8
8
|
*
|
@@ -17,16 +17,16 @@ export const useSwitch_unstable = (props, ref) => {
|
|
17
17
|
checked,
|
18
18
|
defaultChecked,
|
19
19
|
disabled,
|
20
|
-
labelPosition =
|
20
|
+
labelPosition = 'after',
|
21
21
|
onChange,
|
22
22
|
required
|
23
23
|
} = props;
|
24
24
|
const nativeProps = getPartitionedNativeProps({
|
25
25
|
props,
|
26
|
-
primarySlotTagName:
|
27
|
-
excludedPropNames: [
|
26
|
+
primarySlotTagName: 'input',
|
27
|
+
excludedPropNames: ['checked', 'defaultChecked', 'onChange']
|
28
28
|
});
|
29
|
-
const id = useId(
|
29
|
+
const id = useId('switch-', nativeProps.primary.id);
|
30
30
|
const root = resolveShorthand(props.root, {
|
31
31
|
defaultProps: {
|
32
32
|
ref: useFocusWithin(),
|
@@ -36,7 +36,7 @@ export const useSwitch_unstable = (props, ref) => {
|
|
36
36
|
});
|
37
37
|
const indicator = resolveShorthand(props.indicator, {
|
38
38
|
defaultProps: {
|
39
|
-
|
39
|
+
'aria-hidden': true,
|
40
40
|
children: /*#__PURE__*/React.createElement(CircleFilled, null)
|
41
41
|
},
|
42
42
|
required: true
|
@@ -47,30 +47,32 @@ export const useSwitch_unstable = (props, ref) => {
|
|
47
47
|
defaultChecked,
|
48
48
|
id,
|
49
49
|
ref,
|
50
|
-
role:
|
51
|
-
type:
|
50
|
+
role: 'switch',
|
51
|
+
type: 'checkbox',
|
52
52
|
...nativeProps.primary
|
53
53
|
},
|
54
54
|
required: true
|
55
55
|
});
|
56
|
-
input.onChange = mergeCallbacks(input.onChange, ev =>
|
57
|
-
|
58
|
-
|
56
|
+
input.onChange = mergeCallbacks(input.onChange, ev => {
|
57
|
+
return onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
|
58
|
+
checked: ev.currentTarget.checked
|
59
|
+
});
|
60
|
+
});
|
59
61
|
const label = resolveShorthand(props.label, {
|
60
62
|
defaultProps: {
|
61
63
|
disabled,
|
62
64
|
htmlFor: id,
|
63
65
|
required,
|
64
|
-
size:
|
66
|
+
size: 'medium'
|
65
67
|
}
|
66
68
|
});
|
67
69
|
return {
|
68
70
|
labelPosition,
|
69
71
|
//Slots definition
|
70
72
|
components: {
|
71
|
-
root:
|
72
|
-
indicator:
|
73
|
-
input:
|
73
|
+
root: 'div',
|
74
|
+
indicator: 'div',
|
75
|
+
input: 'input',
|
74
76
|
label: Label
|
75
77
|
},
|
76
78
|
root,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","CircleFilled","Label","useFocusWithin","getPartitionedNativeProps","mergeCallbacks","resolveShorthand","useId","useSwitch_unstable","props","ref","checked","defaultChecked","disabled","labelPosition","onChange","required","nativeProps","primarySlotTagName","excludedPropNames","id","primary","root","defaultProps","indicator","children","createElement","input","role","type","ev","currentTarget","label","htmlFor","size","components"],"sources":["../../../src/components/Switch/useSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { SwitchProps, SwitchState } from './Switch.types';\n\n/**\n * Create the state required to render Switch.\n *\n * The returned state can be modified with hooks such as useSwitchStyles_unstable,\n * before being passed to renderSwitch_unstable.\n *\n * @param props - props from this instance of Switch\n * @param ref - reference to `<input>` element of Switch\n */\nexport const useSwitch_unstable = (props: SwitchProps, ref: React.Ref<HTMLInputElement>): SwitchState => {\n const { checked, defaultChecked, disabled, labelPosition = 'after', onChange, required } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n });\n\n const id = useId('switch-', nativeProps.primary.id);\n\n const root = resolveShorthand(props.root, {\n defaultProps: { ref: useFocusWithin<HTMLDivElement>(), ...nativeProps.root },\n required: true,\n });\n\n const indicator = resolveShorthand(props.indicator, {\n defaultProps: {\n 'aria-hidden': true,\n children: <CircleFilled />,\n },\n required: true,\n });\n\n const input = resolveShorthand(props.input, {\n defaultProps: {\n checked,\n defaultChecked,\n id,\n ref,\n role: 'switch',\n type: 'checkbox',\n ...nativeProps.primary,\n },\n required: true,\n });\n input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { checked: ev.currentTarget.checked }));\n\n const label = resolveShorthand(props.label, {\n defaultProps: {\n disabled,\n htmlFor: id,\n required,\n size: 'medium',\n },\n });\n\n return {\n labelPosition,\n\n //Slots definition\n components: {\n root: 'div',\n indicator: 'div',\n input: 'input',\n label: Label,\n },\n\n root,\n indicator,\n input,\n label,\n };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,YAAY,QAAQ;AAC7B,SAASC,KAAK,QAAQ;AACtB,SAASC,cAAc,QAAQ;AAC/B,SAASC,yBAAyB,EAAEC,cAAc,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ;AAGnF;;;;;;;;;AASA,OAAO,MAAMC,kBAAA,GAAqBA,CAACC,KAAA,EAAoBC,GAAA,KAAkD;EACvG,MAAM;IAAEC,OAAA;IAASC,cAAA;IAAgBC,QAAA;IAAUC,aAAA,GAAgB;IAASC,QAAA;IAAUC;EAAQ,CAAE,GAAGP,KAAA;EAE3F,MAAMQ,WAAA,GAAcb,yBAAA,CAA0B;IAC5CK,KAAA;IACAS,kBAAA,EAAoB;IACpBC,iBAAA,EAAmB,CAAC,WAAW,kBAAkB;EACnD;EAEA,MAAMC,EAAA,GAAKb,KAAA,CAAM,WAAWU,WAAA,CAAYI,OAAO,CAACD,EAAE;EAElD,MAAME,IAAA,GAAOhB,gBAAA,CAAiBG,KAAA,CAAMa,IAAI,EAAE;IACxCC,YAAA,EAAc;MAAEb,GAAA,EAAKP,cAAA;MAAkC,GAAGc,WAAA,CAAYK;IAAK;IAC3EN,QAAA,EAAU;EACZ;EAEA,MAAMQ,SAAA,GAAYlB,gBAAA,CAAiBG,KAAA,CAAMe,SAAS,EAAE;IAClDD,YAAA,EAAc;MACZ,eAAe,IAAI;MACnBE,QAAA,eAAUzB,KAAA,CAAA0B,aAAA,CAACzB,YAAA;IACb;IACAe,QAAA,EAAU;EACZ;EAEA,MAAMW,KAAA,GAAQrB,gBAAA,CAAiBG,KAAA,CAAMkB,KAAK,EAAE;IAC1CJ,YAAA,EAAc;MACZZ,OAAA;MACAC,cAAA;MACAQ,EAAA;MACAV,GAAA;MACAkB,IAAA,EAAM;MACNC,IAAA,EAAM;MACN,GAAGZ,WAAA,CAAYI;IACjB;IACAL,QAAA,EAAU;EACZ;EACAW,KAAA,CAAMZ,QAAQ,GAAGV,cAAA,CAAesB,KAAA,CAAMZ,QAAQ,EAAEe,EAAA,
|
1
|
+
{"version":3,"names":["React","CircleFilled","Label","useFocusWithin","getPartitionedNativeProps","mergeCallbacks","resolveShorthand","useId","useSwitch_unstable","props","ref","checked","defaultChecked","disabled","labelPosition","onChange","required","nativeProps","primarySlotTagName","excludedPropNames","id","primary","root","defaultProps","indicator","children","createElement","input","role","type","ev","currentTarget","label","htmlFor","size","components"],"sources":["../../../src/components/Switch/useSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { SwitchProps, SwitchState } from './Switch.types';\n\n/**\n * Create the state required to render Switch.\n *\n * The returned state can be modified with hooks such as useSwitchStyles_unstable,\n * before being passed to renderSwitch_unstable.\n *\n * @param props - props from this instance of Switch\n * @param ref - reference to `<input>` element of Switch\n */\nexport const useSwitch_unstable = (props: SwitchProps, ref: React.Ref<HTMLInputElement>): SwitchState => {\n const { checked, defaultChecked, disabled, labelPosition = 'after', onChange, required } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n });\n\n const id = useId('switch-', nativeProps.primary.id);\n\n const root = resolveShorthand(props.root, {\n defaultProps: { ref: useFocusWithin<HTMLDivElement>(), ...nativeProps.root },\n required: true,\n });\n\n const indicator = resolveShorthand(props.indicator, {\n defaultProps: {\n 'aria-hidden': true,\n children: <CircleFilled />,\n },\n required: true,\n });\n\n const input = resolveShorthand(props.input, {\n defaultProps: {\n checked,\n defaultChecked,\n id,\n ref,\n role: 'switch',\n type: 'checkbox',\n ...nativeProps.primary,\n },\n required: true,\n });\n input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { checked: ev.currentTarget.checked }));\n\n const label = resolveShorthand(props.label, {\n defaultProps: {\n disabled,\n htmlFor: id,\n required,\n size: 'medium',\n },\n });\n\n return {\n labelPosition,\n\n //Slots definition\n components: {\n root: 'div',\n indicator: 'div',\n input: 'input',\n label: Label,\n },\n\n root,\n indicator,\n input,\n label,\n };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,YAAY,QAAQ;AAC7B,SAASC,KAAK,QAAQ;AACtB,SAASC,cAAc,QAAQ;AAC/B,SAASC,yBAAyB,EAAEC,cAAc,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ;AAGnF;;;;;;;;;AASA,OAAO,MAAMC,kBAAA,GAAqBA,CAACC,KAAA,EAAoBC,GAAA,KAAkD;EACvG,MAAM;IAAEC,OAAA;IAASC,cAAA;IAAgBC,QAAA;IAAUC,aAAA,GAAgB;IAASC,QAAA;IAAUC;EAAQ,CAAE,GAAGP,KAAA;EAE3F,MAAMQ,WAAA,GAAcb,yBAAA,CAA0B;IAC5CK,KAAA;IACAS,kBAAA,EAAoB;IACpBC,iBAAA,EAAmB,CAAC,WAAW,kBAAkB;EACnD;EAEA,MAAMC,EAAA,GAAKb,KAAA,CAAM,WAAWU,WAAA,CAAYI,OAAO,CAACD,EAAE;EAElD,MAAME,IAAA,GAAOhB,gBAAA,CAAiBG,KAAA,CAAMa,IAAI,EAAE;IACxCC,YAAA,EAAc;MAAEb,GAAA,EAAKP,cAAA;MAAkC,GAAGc,WAAA,CAAYK;IAAK;IAC3EN,QAAA,EAAU;EACZ;EAEA,MAAMQ,SAAA,GAAYlB,gBAAA,CAAiBG,KAAA,CAAMe,SAAS,EAAE;IAClDD,YAAA,EAAc;MACZ,eAAe,IAAI;MACnBE,QAAA,eAAUzB,KAAA,CAAA0B,aAAA,CAACzB,YAAA;IACb;IACAe,QAAA,EAAU;EACZ;EAEA,MAAMW,KAAA,GAAQrB,gBAAA,CAAiBG,KAAA,CAAMkB,KAAK,EAAE;IAC1CJ,YAAA,EAAc;MACZZ,OAAA;MACAC,cAAA;MACAQ,EAAA;MACAV,GAAA;MACAkB,IAAA,EAAM;MACNC,IAAA,EAAM;MACN,GAAGZ,WAAA,CAAYI;IACjB;IACAL,QAAA,EAAU;EACZ;EACAW,KAAA,CAAMZ,QAAQ,GAAGV,cAAA,CAAesB,KAAA,CAAMZ,QAAQ,EAAEe,EAAA;IAAM,OAAAf,QAAA,aAAAA,QAAA,uBAAAA,QAAA,CAAWe,EAAA,EAAI;MAAEnB,OAAA,EAASmB,EAAA,CAAGC,aAAa,CAACpB;IAAQ;;EAEzG,MAAMqB,KAAA,GAAQ1B,gBAAA,CAAiBG,KAAA,CAAMuB,KAAK,EAAE;IAC1CT,YAAA,EAAc;MACZV,QAAA;MACAoB,OAAA,EAASb,EAAA;MACTJ,QAAA;MACAkB,IAAA,EAAM;IACR;EACF;EAEA,OAAO;IACLpB,aAAA;IAEA;IACAqB,UAAA,EAAY;MACVb,IAAA,EAAM;MACNE,SAAA,EAAW;MACXG,KAAA,EAAO;MACPK,KAAA,EAAO9B;IACT;IAEAoB,IAAA;IACAE,SAAA;IACAG,KAAA;IACAK;EACF;AACF"}
|
@@ -1,11 +1,11 @@
|
|
1
|
-
import { createFocusOutlineStyle } from
|
2
|
-
import { tokens } from
|
3
|
-
import { __resetStyles, __styles, mergeClasses, shorthands } from
|
1
|
+
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
|
2
|
+
import { tokens } from '@fluentui/react-theme';
|
3
|
+
import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
|
4
4
|
export const switchClassNames = {
|
5
|
-
root:
|
6
|
-
indicator:
|
7
|
-
input:
|
8
|
-
label:
|
5
|
+
root: 'fui-Switch',
|
6
|
+
indicator: 'fui-Switch__indicator',
|
7
|
+
input: 'fui-Switch__input',
|
8
|
+
label: 'fui-Switch__label'
|
9
9
|
};
|
10
10
|
/**
|
11
11
|
* @deprecated Use `switchClassNames.root` instead.
|
@@ -32,7 +32,7 @@ const useIndicatorStyles = /*#__PURE__*/__styles({
|
|
32
32
|
}, {
|
33
33
|
d: [".f1hu3pq6{margin-top:0;}"]
|
34
34
|
});
|
35
|
-
const useInputBaseClassName = /*#__PURE__*/__resetStyles("
|
35
|
+
const useInputBaseClassName = /*#__PURE__*/__resetStyles("rw4brat", "r1f4bxyr", [".rw4brat{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}", ".rw4brat:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}", ".rw4brat:disabled{cursor:default;}", ".rw4brat:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".rw4brat:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", ".rw4brat:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}", ".rw4brat:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".rw4brat:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}", ".rw4brat:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".rw4brat:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}", ".rw4brat:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}", ".rw4brat:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}", ".rw4brat:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}", ".rw4brat:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}", "@media (forced-colors: active){.rw4brat:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.rw4brat:disabled~.fui-Switch__label{color:GrayText;}.rw4brat:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rw4brat:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}", ".r1f4bxyr{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}", ".r1f4bxyr:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px);}", ".r1f4bxyr:disabled{cursor:default;}", ".r1f4bxyr:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".r1f4bxyr:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", ".r1f4bxyr:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}", ".r1f4bxyr:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".r1f4bxyr:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r1f4bxyr:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r1f4bxyr:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}", ".r1f4bxyr:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}", ".r1f4bxyr:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}", ".r1f4bxyr:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}", ".r1f4bxyr:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}", "@media (forced-colors: active){.r1f4bxyr:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.r1f4bxyr:disabled~.fui-Switch__label{color:GrayText;}.r1f4bxyr:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r1f4bxyr:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}"]);
|
36
36
|
const useInputStyles = /*#__PURE__*/__styles({
|
37
37
|
before: {
|
38
38
|
j35jbq: ["f1e31b4d", "f1vgc2s3"],
|
@@ -90,8 +90,8 @@ export const useSwitchStyles_unstable = state => {
|
|
90
90
|
label,
|
91
91
|
labelPosition
|
92
92
|
} = state;
|
93
|
-
state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition ===
|
94
|
-
state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition ===
|
93
|
+
state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);
|
94
|
+
state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);
|
95
95
|
state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], state.input.className);
|
96
96
|
if (state.label) {
|
97
97
|
state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","shorthands","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","useRootStyles","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"],"sources":["../../../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,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","shorthands","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","useRootStyles","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"],"sources":["../../../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 ':enabled:checked': {\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas',\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,5 +1,5 @@
|
|
1
|
-
/* eslint-disable deprecation/deprecation */import { getDeprecatedFieldClassNames, makeDeprecatedField } from
|
2
|
-
import { Switch, switchClassNames } from
|
1
|
+
/* eslint-disable deprecation/deprecation */import { getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';
|
2
|
+
import { Switch, switchClassNames } from '../../Switch';
|
3
3
|
/** @deprecated Use Field with Switch: `<Field><Switch /></Field>` */
|
4
4
|
export const switchFieldClassNames = /*#__PURE__*/getDeprecatedFieldClassNames(switchClassNames.root);
|
5
5
|
/** @deprecated Use Field with Switch: `<Field><Switch /></Field>` */
|
@@ -1,2 +1,2 @@
|
|
1
|
-
export * from
|
1
|
+
export * from './SwitchField';
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
export { Switch, renderSwitch_unstable,
|
2
2
|
// eslint-disable-next-line deprecation/deprecation
|
3
|
-
switchClassName, switchClassNames, useSwitchStyles_unstable, useSwitch_unstable } from
|
3
|
+
switchClassName, switchClassNames, useSwitchStyles_unstable, useSwitch_unstable } from './Switch';
|
4
4
|
// eslint-disable-next-line deprecation/deprecation
|
5
|
-
export { SwitchField as SwitchField_unstable, switchFieldClassNames } from
|
5
|
+
export { SwitchField as SwitchField_unstable, switchFieldClassNames } from './SwitchField';
|
6
6
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../lib/Switch.js"],"sourcesContent":["export * from
|
1
|
+
{"version":3,"sources":["../lib/Switch.js"],"sourcesContent":["export * from './components/Switch/index';\n//# sourceMappingURL=Switch.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,kCAAkC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../lib/SwitchField.js"],"sourcesContent":["export * from
|
1
|
+
{"version":3,"sources":["../lib/SwitchField.js"],"sourcesContent":["export * from './components/SwitchField/index';\n//# sourceMappingURL=SwitchField.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,uCAAuC"}
|
@@ -19,6 +19,6 @@ const Switch = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
19
19
|
useCustomStyles(state);
|
20
20
|
return (0, _renderSwitch.renderSwitch_unstable)(state);
|
21
21
|
});
|
22
|
-
Switch.displayName =
|
22
|
+
Switch.displayName = 'Switch'; //# sourceMappingURL=Switch.js.map
|
23
23
|
|
24
24
|
//# sourceMappingURL=Switch.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Switch/Switch.js"],"sourcesContent":["import * as React from
|
1
|
+
{"version":3,"sources":["../../../lib/components/Switch/Switch.js"],"sourcesContent":["import * as React from 'react';\nimport { useSwitch_unstable } from './useSwitch';\nimport { renderSwitch_unstable } from './renderSwitch';\nimport { useSwitchStyles_unstable } from './useSwitchStyles';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n/**\n * Switches enable users to trigger an option on or off through pressing the component.\n */\nexport const Switch = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useSwitch_unstable(props, ref);\n useSwitchStyles_unstable(state);\n const {\n useSwitchStyles_unstable: useCustomStyles\n } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n return renderSwitch_unstable(state);\n});\nSwitch.displayName = 'Switch';\n//# sourceMappingURL=Switch.js.map"],"names":["Switch","React","forwardRef","props","ref","state","useSwitch_unstable","useSwitchStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderSwitch_unstable","displayName"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;2BACY;8BACG;iCACG;qCACI;AAItC,MAAMA,SAAS,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAClE,MAAMC,QAAQC,IAAAA,6BAAkB,EAACH,OAAOC;IACxCG,IAAAA,yCAAwB,EAACF;IACzB,MAAM,EACJE,0BAA0BC,gBAAe,EAC1C,GAAGC,IAAAA,iDAA4B;IAChCD,gBAAgBH;IAChB,OAAOK,IAAAA,mCAAqB,EAACL;AAC/B;AACAL,OAAOW,WAAW,GAAG,UACrB,kCAAkC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Switch/Switch.types.js"],"sourcesContent":["import * as React from
|
1
|
+
{"version":3,"sources":["../../../lib/components/Switch/Switch.types.js"],"sourcesContent":["import * as React from 'react';\n//# sourceMappingURL=Switch.types.js.map"],"names":[],"mappings":";;;;;6DAAuB;CACvB,wCAAwC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Switch/index.js"],"sourcesContent":["export * from
|
1
|
+
{"version":3,"sources":["../../../lib/components/Switch/index.js"],"sourcesContent":["export * from './Switch';\nexport * from './Switch.types';\nexport * from './renderSwitch';\nexport * from './useSwitch';\nexport * from './useSwitchStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
|
@@ -12,7 +12,7 @@ const _reactUtilities = require("@fluentui/react-utilities");
|
|
12
12
|
const renderSwitch_unstable = (state)=>{
|
13
13
|
const { slots , slotProps } = (0, _reactUtilities.getSlots)(state);
|
14
14
|
const { labelPosition } = state;
|
15
|
-
return /*#__PURE__*/ _react.createElement(slots.root, slotProps.root, /*#__PURE__*/ _react.createElement(slots.input, slotProps.input), labelPosition !==
|
15
|
+
return /*#__PURE__*/ _react.createElement(slots.root, slotProps.root, /*#__PURE__*/ _react.createElement(slots.input, slotProps.input), labelPosition !== 'after' && slots.label && /*#__PURE__*/ _react.createElement(slots.label, slotProps.label), /*#__PURE__*/ _react.createElement(slots.indicator, slotProps.indicator), labelPosition === 'after' && slots.label && /*#__PURE__*/ _react.createElement(slots.label, slotProps.label));
|
16
16
|
}; //# sourceMappingURL=renderSwitch.js.map
|
17
17
|
|
18
18
|
//# sourceMappingURL=renderSwitch.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Switch/renderSwitch.js"],"sourcesContent":["import * as React from
|
1
|
+
{"version":3,"sources":["../../../lib/components/Switch/renderSwitch.js"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\n/**\n * Render a Switch component by passing the state defined props to the appropriate slots.\n */\nexport const renderSwitch_unstable = state => {\n const {\n slots,\n slotProps\n } = getSlots(state);\n const {\n labelPosition\n } = state;\n return /*#__PURE__*/React.createElement(slots.root, slotProps.root, /*#__PURE__*/React.createElement(slots.input, slotProps.input), labelPosition !== 'after' && slots.label && /*#__PURE__*/React.createElement(slots.label, slotProps.label), /*#__PURE__*/React.createElement(slots.indicator, slotProps.indicator), labelPosition === 'after' && slots.label && /*#__PURE__*/React.createElement(slots.label, slotProps.label));\n};\n//# sourceMappingURL=renderSwitch.js.map"],"names":["renderSwitch_unstable","state","slots","slotProps","getSlots","labelPosition","React","createElement","root","input","label","indicator"],"mappings":";;;;+BAKaA;;aAAAA;;;6DALU;gCACE;AAIlB,MAAMA,wBAAwBC,CAAAA,QAAS;IAC5C,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACH;IACb,MAAM,EACJI,cAAa,EACd,GAAGJ;IACJ,OAAO,WAAW,GAAEK,OAAMC,aAAa,CAACL,MAAMM,IAAI,EAAEL,UAAUK,IAAI,EAAE,WAAW,GAAEF,OAAMC,aAAa,CAACL,MAAMO,KAAK,EAAEN,UAAUM,KAAK,GAAGJ,kBAAkB,WAAWH,MAAMQ,KAAK,IAAI,WAAW,GAAEJ,OAAMC,aAAa,CAACL,MAAMQ,KAAK,EAAEP,UAAUO,KAAK,GAAG,WAAW,GAAEJ,OAAMC,aAAa,CAACL,MAAMS,SAAS,EAAER,UAAUQ,SAAS,GAAGN,kBAAkB,WAAWH,MAAMQ,KAAK,IAAI,WAAW,GAAEJ,OAAMC,aAAa,CAACL,MAAMQ,KAAK,EAAEP,UAAUO,KAAK;AACna,GACA,wCAAwC"}
|
@@ -13,17 +13,17 @@ const _reactLabel = require("@fluentui/react-label");
|
|
13
13
|
const _reactTabster = require("@fluentui/react-tabster");
|
14
14
|
const _reactUtilities = require("@fluentui/react-utilities");
|
15
15
|
const useSwitch_unstable = (props, ref)=>{
|
16
|
-
const { checked , defaultChecked , disabled , labelPosition =
|
16
|
+
const { checked , defaultChecked , disabled , labelPosition ='after' , onChange , required } = props;
|
17
17
|
const nativeProps = (0, _reactUtilities.getPartitionedNativeProps)({
|
18
18
|
props,
|
19
|
-
primarySlotTagName:
|
19
|
+
primarySlotTagName: 'input',
|
20
20
|
excludedPropNames: [
|
21
|
-
|
22
|
-
|
23
|
-
|
21
|
+
'checked',
|
22
|
+
'defaultChecked',
|
23
|
+
'onChange'
|
24
24
|
]
|
25
25
|
});
|
26
|
-
const id = (0, _reactUtilities.useId)(
|
26
|
+
const id = (0, _reactUtilities.useId)('switch-', nativeProps.primary.id);
|
27
27
|
const root = (0, _reactUtilities.resolveShorthand)(props.root, {
|
28
28
|
defaultProps: {
|
29
29
|
ref: (0, _reactTabster.useFocusWithin)(),
|
@@ -33,7 +33,7 @@ const useSwitch_unstable = (props, ref)=>{
|
|
33
33
|
});
|
34
34
|
const indicator = (0, _reactUtilities.resolveShorthand)(props.indicator, {
|
35
35
|
defaultProps: {
|
36
|
-
|
36
|
+
'aria-hidden': true,
|
37
37
|
children: /*#__PURE__*/ _react.createElement(_reactIcons.CircleFilled, null)
|
38
38
|
},
|
39
39
|
required: true
|
@@ -44,30 +44,32 @@ const useSwitch_unstable = (props, ref)=>{
|
|
44
44
|
defaultChecked,
|
45
45
|
id,
|
46
46
|
ref,
|
47
|
-
role:
|
48
|
-
type:
|
47
|
+
role: 'switch',
|
48
|
+
type: 'checkbox',
|
49
49
|
...nativeProps.primary
|
50
50
|
},
|
51
51
|
required: true
|
52
52
|
});
|
53
|
-
input.onChange = (0, _reactUtilities.mergeCallbacks)(input.onChange, (ev)=>
|
53
|
+
input.onChange = (0, _reactUtilities.mergeCallbacks)(input.onChange, (ev)=>{
|
54
|
+
return onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
|
54
55
|
checked: ev.currentTarget.checked
|
55
|
-
})
|
56
|
+
});
|
57
|
+
});
|
56
58
|
const label = (0, _reactUtilities.resolveShorthand)(props.label, {
|
57
59
|
defaultProps: {
|
58
60
|
disabled,
|
59
61
|
htmlFor: id,
|
60
62
|
required,
|
61
|
-
size:
|
63
|
+
size: 'medium'
|
62
64
|
}
|
63
65
|
});
|
64
66
|
return {
|
65
67
|
labelPosition,
|
66
68
|
//Slots definition
|
67
69
|
components: {
|
68
|
-
root:
|
69
|
-
indicator:
|
70
|
-
input:
|
70
|
+
root: 'div',
|
71
|
+
indicator: 'div',
|
72
|
+
input: 'input',
|
71
73
|
label: _reactLabel.Label
|
72
74
|
},
|
73
75
|
root,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/Switch/useSwitch.js"],"sourcesContent":["import * as React from
|
1
|
+
{"version":3,"sources":["../../../lib/components/Switch/useSwitch.js"],"sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\n/**\n * Create the state required to render Switch.\n *\n * The returned state can be modified with hooks such as useSwitchStyles_unstable,\n * before being passed to renderSwitch_unstable.\n *\n * @param props - props from this instance of Switch\n * @param ref - reference to `<input>` element of Switch\n */\nexport const useSwitch_unstable = (props, ref) => {\n const {\n checked,\n defaultChecked,\n disabled,\n labelPosition = 'after',\n onChange,\n required\n } = props;\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange']\n });\n const id = useId('switch-', nativeProps.primary.id);\n const root = resolveShorthand(props.root, {\n defaultProps: {\n ref: useFocusWithin(),\n ...nativeProps.root\n },\n required: true\n });\n const indicator = resolveShorthand(props.indicator, {\n defaultProps: {\n 'aria-hidden': true,\n children: /*#__PURE__*/React.createElement(CircleFilled, null)\n },\n required: true\n });\n const input = resolveShorthand(props.input, {\n defaultProps: {\n checked,\n defaultChecked,\n id,\n ref,\n role: 'switch',\n type: 'checkbox',\n ...nativeProps.primary\n },\n required: true\n });\n input.onChange = mergeCallbacks(input.onChange, ev => {\n return onChange === null || onChange === void 0 ? void 0 : onChange(ev, {\n checked: ev.currentTarget.checked\n });\n });\n const label = resolveShorthand(props.label, {\n defaultProps: {\n disabled,\n htmlFor: id,\n required,\n size: 'medium'\n }\n });\n return {\n labelPosition,\n //Slots definition\n components: {\n root: 'div',\n indicator: 'div',\n input: 'input',\n label: Label\n },\n root,\n indicator,\n input,\n label\n };\n};\n//# sourceMappingURL=useSwitch.js.map"],"names":["useSwitch_unstable","props","ref","checked","defaultChecked","disabled","labelPosition","onChange","required","nativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","id","useId","primary","root","resolveShorthand","defaultProps","useFocusWithin","indicator","children","React","createElement","CircleFilled","input","role","type","mergeCallbacks","ev","currentTarget","label","htmlFor","size","components","Label"],"mappings":";;;;+BAcaA;;aAAAA;;;6DAdU;4BACM;4BACP;8BACS;gCACoD;AAU5E,MAAMA,qBAAqB,CAACC,OAAOC,MAAQ;IAChD,MAAM,EACJC,QAAO,EACPC,eAAc,EACdC,SAAQ,EACRC,eAAgB,QAAO,EACvBC,SAAQ,EACRC,SAAQ,EACT,GAAGP;IACJ,MAAMQ,cAAcC,IAAAA,yCAAyB,EAAC;QAC5CT;QACAU,oBAAoB;QACpBC,mBAAmB;YAAC;YAAW;YAAkB;SAAW;IAC9D;IACA,MAAMC,KAAKC,IAAAA,qBAAK,EAAC,WAAWL,YAAYM,OAAO,CAACF,EAAE;IAClD,MAAMG,OAAOC,IAAAA,gCAAgB,EAAChB,MAAMe,IAAI,EAAE;QACxCE,cAAc;YACZhB,KAAKiB,IAAAA,4BAAc;YACnB,GAAGV,YAAYO,IAAI;QACrB;QACAR,UAAU,IAAI;IAChB;IACA,MAAMY,YAAYH,IAAAA,gCAAgB,EAAChB,MAAMmB,SAAS,EAAE;QAClDF,cAAc;YACZ,eAAe,IAAI;YACnBG,UAAU,WAAW,GAAEC,OAAMC,aAAa,CAACC,wBAAY,EAAE,IAAI;QAC/D;QACAhB,UAAU,IAAI;IAChB;IACA,MAAMiB,QAAQR,IAAAA,gCAAgB,EAAChB,MAAMwB,KAAK,EAAE;QAC1CP,cAAc;YACZf;YACAC;YACAS;YACAX;YACAwB,MAAM;YACNC,MAAM;YACN,GAAGlB,YAAYM,OAAO;QACxB;QACAP,UAAU,IAAI;IAChB;IACAiB,MAAMlB,QAAQ,GAAGqB,IAAAA,8BAAc,EAACH,MAAMlB,QAAQ,EAAEsB,CAAAA,KAAM;QACpD,OAAOtB,aAAa,IAAI,IAAIA,aAAa,KAAK,IAAI,KAAK,IAAIA,SAASsB,IAAI;YACtE1B,SAAS0B,GAAGC,aAAa,CAAC3B,OAAO;QACnC,EAAE;IACJ;IACA,MAAM4B,QAAQd,IAAAA,gCAAgB,EAAChB,MAAM8B,KAAK,EAAE;QAC1Cb,cAAc;YACZb;YACA2B,SAASnB;YACTL;YACAyB,MAAM;QACR;IACF;IACA,OAAO;QACL3B;QACA,kBAAkB;QAClB4B,YAAY;YACVlB,MAAM;YACNI,WAAW;YACXK,OAAO;YACPM,OAAOI,iBAAK;QACd;QACAnB;QACAI;QACAK;QACAM;IACF;AACF,GACA,qCAAqC"}
|
@@ -15,10 +15,10 @@ _export(exports, {
|
|
15
15
|
});
|
16
16
|
const _react = require("@griffel/react");
|
17
17
|
const switchClassNames = {
|
18
|
-
root:
|
19
|
-
indicator:
|
20
|
-
input:
|
21
|
-
label:
|
18
|
+
root: 'fui-Switch',
|
19
|
+
indicator: 'fui-Switch__indicator',
|
20
|
+
input: 'fui-Switch__input',
|
21
|
+
label: 'fui-Switch__label'
|
22
22
|
};
|
23
23
|
const switchClassName = switchClassNames.root;
|
24
24
|
// Thumb and track sizes used by the component.
|
@@ -31,12 +31,12 @@ const useRootBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("r1u7w45
|
|
31
31
|
".r1u7w45w:focus{outline-style:none;}",
|
32
32
|
".r1u7w45w:focus-visible{outline-style:none;}",
|
33
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
|
-
|
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
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
36
|
".rlzel8d:focus{outline-style:none;}",
|
37
37
|
".rlzel8d:focus-visible{outline-style:none;}",
|
38
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
|
-
|
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
40
|
]);
|
41
41
|
const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
42
42
|
vertical: {
|
@@ -62,37 +62,37 @@ const useIndicatorStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
|
62
62
|
".f1hu3pq6{margin-top:0;}"
|
63
63
|
]
|
64
64
|
});
|
65
|
-
const useInputBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("
|
66
|
-
".
|
67
|
-
".
|
68
|
-
".
|
69
|
-
".
|
70
|
-
".
|
71
|
-
".
|
72
|
-
".
|
73
|
-
".
|
74
|
-
".
|
75
|
-
".
|
76
|
-
".
|
77
|
-
".
|
78
|
-
".
|
79
|
-
".
|
80
|
-
"@media (forced-colors: active){.
|
81
|
-
".
|
82
|
-
".
|
83
|
-
".
|
84
|
-
".
|
85
|
-
".
|
86
|
-
".
|
87
|
-
".
|
88
|
-
".
|
89
|
-
".
|
90
|
-
".
|
91
|
-
".
|
92
|
-
".
|
93
|
-
".
|
94
|
-
".
|
95
|
-
"@media (forced-colors: active){.
|
65
|
+
const useInputBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("rw4brat", "r1f4bxyr", [
|
66
|
+
".rw4brat{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}",
|
67
|
+
".rw4brat:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}",
|
68
|
+
".rw4brat:disabled{cursor:default;}",
|
69
|
+
".rw4brat:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}",
|
70
|
+
".rw4brat:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}",
|
71
|
+
".rw4brat:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}",
|
72
|
+
".rw4brat:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}",
|
73
|
+
".rw4brat:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}",
|
74
|
+
".rw4brat:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}",
|
75
|
+
".rw4brat:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}",
|
76
|
+
".rw4brat:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}",
|
77
|
+
".rw4brat:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}",
|
78
|
+
".rw4brat:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}",
|
79
|
+
".rw4brat:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}",
|
80
|
+
"@media (forced-colors: active){.rw4brat:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.rw4brat:disabled~.fui-Switch__label{color:GrayText;}.rw4brat:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rw4brat:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}",
|
81
|
+
".r1f4bxyr{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}",
|
82
|
+
".r1f4bxyr:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px);}",
|
83
|
+
".r1f4bxyr:disabled{cursor:default;}",
|
84
|
+
".r1f4bxyr:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}",
|
85
|
+
".r1f4bxyr:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}",
|
86
|
+
".r1f4bxyr:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}",
|
87
|
+
".r1f4bxyr:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}",
|
88
|
+
".r1f4bxyr:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}",
|
89
|
+
".r1f4bxyr:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}",
|
90
|
+
".r1f4bxyr:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}",
|
91
|
+
".r1f4bxyr:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}",
|
92
|
+
".r1f4bxyr:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}",
|
93
|
+
".r1f4bxyr:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}",
|
94
|
+
".r1f4bxyr:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}",
|
95
|
+
"@media (forced-colors: active){.r1f4bxyr:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.r1f4bxyr:disabled~.fui-Switch__label{color:GrayText;}.r1f4bxyr:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r1f4bxyr:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}"
|
96
96
|
]);
|
97
97
|
const useInputStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
98
98
|
before: {
|
@@ -183,8 +183,8 @@ const useSwitchStyles_unstable = (state)=>{
|
|
183
183
|
const inputStyles = useInputStyles();
|
184
184
|
const labelStyles = useLabelStyles();
|
185
185
|
const { label , labelPosition } = state;
|
186
|
-
state.root.className = (0, _react.mergeClasses)(switchClassNames.root, rootBaseClassName, labelPosition ===
|
187
|
-
state.indicator.className = (0, _react.mergeClasses)(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition ===
|
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
188
|
state.input.className = (0, _react.mergeClasses)(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], state.input.className);
|
189
189
|
if (state.label) {
|
190
190
|
state.label.className = (0, _react.mergeClasses)(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
|
@@ -1 +1 @@
|
|
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
|
+
{"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(\"rw4brat\", \"r1f4bxyr\", [\".rw4brat{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}\", \".rw4brat:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}\", \".rw4brat:disabled{cursor:default;}\", \".rw4brat:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}\", \".rw4brat:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}\", \".rw4brat:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}\", \".rw4brat:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}\", \".rw4brat:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".rw4brat:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".rw4brat:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}\", \".rw4brat:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}\", \".rw4brat:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}\", \".rw4brat:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}\", \".rw4brat:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}\", \"@media (forced-colors: active){.rw4brat:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.rw4brat:disabled~.fui-Switch__label{color:GrayText;}.rw4brat:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.rw4brat:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}\", \".r1f4bxyr{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}\", \".r1f4bxyr:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px);}\", \".r1f4bxyr:disabled{cursor:default;}\", \".r1f4bxyr:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}\", \".r1f4bxyr:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}\", \".r1f4bxyr:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}\", \".r1f4bxyr:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}\", \".r1f4bxyr:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".r1f4bxyr:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".r1f4bxyr:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}\", \".r1f4bxyr:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}\", \".r1f4bxyr:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}\", \".r1f4bxyr:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}\", \".r1f4bxyr:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}\", \"@media (forced-colors: active){.r1f4bxyr:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.r1f4bxyr:disabled~.fui-Switch__label{color:GrayText;}.r1f4bxyr:enabled:checked:hover~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}.r1f4bxyr:enabled:checked~.fui-Switch__indicator{background-color:Highlight;color:Canvas;}}\"]);\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 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/SwitchField/SwitchField.js"],"sourcesContent":["/* eslint-disable deprecation/deprecation */import { getDeprecatedFieldClassNames, makeDeprecatedField } from
|
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 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../lib/components/SwitchField/index.js"],"sourcesContent":["export * from
|
1
|
+
{"version":3,"sources":["../../../lib/components/SwitchField/index.js"],"sourcesContent":["export * from './SwitchField';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,iCAAiC"}
|
@@ -1 +1 @@
|
|
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
|
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-
|
3
|
+
"version": "0.0.0-nightly-20230322-0439.1",
|
4
4
|
"description": "Fluent UI React Switch component.",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -27,18 +27,18 @@
|
|
27
27
|
"devDependencies": {
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
29
29
|
"@fluentui/react-conformance": "*",
|
30
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
30
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20230322-0439.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-
|
36
|
-
"@fluentui/react-icons": "^2.0.
|
37
|
-
"@fluentui/react-label": "0.0.0-nightly-
|
38
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
39
|
-
"@fluentui/react-tabster": "0.0.0-nightly-
|
40
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
41
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
35
|
+
"@fluentui/react-field": "0.0.0-nightly-20230322-0439.1",
|
36
|
+
"@fluentui/react-icons": "^2.0.196",
|
37
|
+
"@fluentui/react-label": "0.0.0-nightly-20230322-0439.1",
|
38
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20230322-0439.1",
|
39
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20230322-0439.1",
|
40
|
+
"@fluentui/react-theme": "0.0.0-nightly-20230322-0439.1",
|
41
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20230322-0439.1",
|
42
42
|
"@griffel/react": "^1.5.2",
|
43
43
|
"@swc/helpers": "^0.4.14"
|
44
44
|
},
|
@@ -52,6 +52,7 @@
|
|
52
52
|
"exports": {
|
53
53
|
".": {
|
54
54
|
"types": "./dist/index.d.ts",
|
55
|
+
"node": "./lib-commonjs/index.js",
|
55
56
|
"import": "./lib/index.js",
|
56
57
|
"require": "./lib-commonjs/index.js"
|
57
58
|
},
|