@fluentui/react-switch 0.0.0-nightly-20220511-0419.1 → 0.0.0-nightly-20220516-0419.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +28 -16
- package/CHANGELOG.md +12 -10
- package/dist/index.d.ts +17 -18
- package/lib/components/Switch/Switch.types.js.map +1 -1
- package/lib/components/Switch/useSwitchStyles.js +16 -18
- package/lib/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.js +16 -18
- package/lib-commonjs/components/Switch/useSwitchStyles.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.json
CHANGED
|
@@ -2,16 +2,22 @@
|
|
|
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": "Mon, 16 May 2022 04:32:32 GMT",
|
|
6
|
+
"tag": "@fluentui/react-switch_v0.0.0-nightly-20220516-0419.1",
|
|
7
|
+
"version": "0.0.0-nightly-20220516-0419.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
11
|
-
"author": "
|
|
11
|
+
"author": "olfedias@microsoft.com",
|
|
12
12
|
"package": "@fluentui/react-switch",
|
|
13
|
-
"commit": "
|
|
14
|
-
"comment": "
|
|
13
|
+
"commit": "f120fe9160ad7311a87af0cfacd8d2fb26275e34",
|
|
14
|
+
"comment": "chore: Update Griffel to latest version"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "behowell@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-switch",
|
|
19
|
+
"commit": "45ec789399b65b76b80cc8023d977de7d2b8b579",
|
|
20
|
+
"comment": "Refactor styles to remove usage of flex gap"
|
|
15
21
|
},
|
|
16
22
|
{
|
|
17
23
|
"author": "esteban.230@hotmail.com",
|
|
@@ -25,35 +31,41 @@
|
|
|
25
31
|
"commit": "eb1084fd607c0d1086f9d465168be5822daa5e40",
|
|
26
32
|
"comment": "feat: ship rolluped only dts"
|
|
27
33
|
},
|
|
34
|
+
{
|
|
35
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
36
|
+
"package": "@fluentui/react-switch",
|
|
37
|
+
"commit": "ec6c1a33b3c4cec9422d07bcffc48b85928c22d2",
|
|
38
|
+
"comment": "Removing SwitchCommons type in @fluentui/react-switch."
|
|
39
|
+
},
|
|
28
40
|
{
|
|
29
41
|
"author": "beachball",
|
|
30
42
|
"package": "@fluentui/react-switch",
|
|
31
|
-
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20220516-0419.1",
|
|
44
|
+
"commit": "737cd1292dec6412494b80cf051d7e51e2a0993f"
|
|
33
45
|
},
|
|
34
46
|
{
|
|
35
47
|
"author": "beachball",
|
|
36
48
|
"package": "@fluentui/react-switch",
|
|
37
|
-
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
49
|
+
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220516-0419.1",
|
|
50
|
+
"commit": "737cd1292dec6412494b80cf051d7e51e2a0993f"
|
|
39
51
|
},
|
|
40
52
|
{
|
|
41
53
|
"author": "beachball",
|
|
42
54
|
"package": "@fluentui/react-switch",
|
|
43
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
55
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220516-0419.1",
|
|
56
|
+
"commit": "737cd1292dec6412494b80cf051d7e51e2a0993f"
|
|
45
57
|
},
|
|
46
58
|
{
|
|
47
59
|
"author": "beachball",
|
|
48
60
|
"package": "@fluentui/react-switch",
|
|
49
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
50
|
-
"commit": "
|
|
61
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220516-0419.1",
|
|
62
|
+
"commit": "737cd1292dec6412494b80cf051d7e51e2a0993f"
|
|
51
63
|
},
|
|
52
64
|
{
|
|
53
65
|
"author": "beachball",
|
|
54
66
|
"package": "@fluentui/react-switch",
|
|
55
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
56
|
-
"commit": "
|
|
67
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220516-0419.1",
|
|
68
|
+
"commit": "737cd1292dec6412494b80cf051d7e51e2a0993f"
|
|
57
69
|
}
|
|
58
70
|
]
|
|
59
71
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,24 +1,26 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-switch
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 16 May 2022 04:32:32 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-20220516-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v0.0.0-nightly-20220516-0419.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-rc.9..@fluentui/react-switch_v0.0.0-nightly-
|
|
9
|
+
Mon, 16 May 2022 04:32:32 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-rc.9..@fluentui/react-switch_v0.0.0-nightly-20220516-0419.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
|
-
-
|
|
14
|
+
- chore: Update Griffel to latest version ([PR #22894](https://github.com/microsoft/fluentui/pull/22894) by olfedias@microsoft.com)
|
|
15
|
+
- Refactor styles to remove usage of flex gap ([PR #22976](https://github.com/microsoft/fluentui/pull/22976) by behowell@microsoft.com)
|
|
15
16
|
- Updated react-label package version to RC. ([PR #22865](https://github.com/microsoft/fluentui/pull/22865) by esteban.230@hotmail.com)
|
|
16
17
|
- feat: ship rolluped only dts ([PR #22874](https://github.com/microsoft/fluentui/pull/22874) by martinhochel@microsoft.com)
|
|
17
|
-
-
|
|
18
|
-
- Bump @fluentui/react-
|
|
19
|
-
- Bump @fluentui/react-
|
|
20
|
-
- Bump @fluentui/react-
|
|
21
|
-
- Bump @fluentui/react-
|
|
18
|
+
- Removing SwitchCommons type in @fluentui/react-switch. ([PR #22943](https://github.com/microsoft/fluentui/pull/22943) by Humberto.Morimoto@microsoft.com)
|
|
19
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20220516-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/737cd1292dec6412494b80cf051d7e51e2a0993f) by beachball)
|
|
20
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20220516-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/737cd1292dec6412494b80cf051d7e51e2a0993f) by beachball)
|
|
21
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20220516-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/737cd1292dec6412494b80cf051d7e51e2a0993f) by beachball)
|
|
22
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20220516-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/737cd1292dec6412494b80cf051d7e51e2a0993f) by beachball)
|
|
23
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220516-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/737cd1292dec6412494b80cf051d7e51e2a0993f) by beachball)
|
|
22
24
|
|
|
23
25
|
## [9.0.0-rc.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-rc.9)
|
|
24
26
|
|
package/dist/index.d.ts
CHANGED
|
@@ -23,36 +23,35 @@ export declare const switchClassName: string;
|
|
|
23
23
|
|
|
24
24
|
export declare const switchClassNames: SlotClassNames<SwitchSlots>;
|
|
25
25
|
|
|
26
|
-
declare type
|
|
26
|
+
export declare type SwitchOnChangeData = {
|
|
27
|
+
checked: boolean;
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* Switch Props
|
|
32
|
+
*/
|
|
33
|
+
export declare type SwitchProps = Omit<ComponentProps<Partial<SwitchSlots>, 'input'>, 'onChange'> & {
|
|
27
34
|
/**
|
|
28
35
|
* Defines the controlled checked state of the Switch.
|
|
29
36
|
* If passed, Switch ignores the `defaultChecked` property.
|
|
30
37
|
* This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the
|
|
31
38
|
* correct value based on handling `onChange` events and re-rendering.
|
|
39
|
+
*
|
|
32
40
|
* @default false
|
|
33
41
|
*/
|
|
34
42
|
checked?: boolean;
|
|
35
|
-
/**
|
|
36
|
-
* The position of the label relative to the Switch.
|
|
37
|
-
*
|
|
38
|
-
* @default after
|
|
39
|
-
*/
|
|
40
|
-
labelPosition: 'above' | 'after' | 'before';
|
|
41
|
-
};
|
|
42
|
-
|
|
43
|
-
export declare type SwitchOnChangeData = {
|
|
44
|
-
checked: boolean;
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
/**
|
|
48
|
-
* Switch Props
|
|
49
|
-
*/
|
|
50
|
-
export declare type SwitchProps = Omit<ComponentProps<Partial<SwitchSlots>, 'input'>, 'onChange'> & Partial<SwitchCommons> & {
|
|
51
43
|
/**
|
|
52
44
|
* Defines whether the Switch is initially in a checked state or not when rendered.
|
|
45
|
+
*
|
|
53
46
|
* @default false
|
|
54
47
|
*/
|
|
55
48
|
defaultChecked?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* The position of the label relative to the Switch.
|
|
51
|
+
*
|
|
52
|
+
* @default after
|
|
53
|
+
*/
|
|
54
|
+
labelPosition?: 'above' | 'after' | 'before';
|
|
56
55
|
/**
|
|
57
56
|
* Callback to be called when the checked state value changes.
|
|
58
57
|
*/
|
|
@@ -87,7 +86,7 @@ export declare type SwitchSlots = {
|
|
|
87
86
|
/**
|
|
88
87
|
* State used in rendering Switch
|
|
89
88
|
*/
|
|
90
|
-
export declare type SwitchState = ComponentState<SwitchSlots> &
|
|
89
|
+
export declare type SwitchState = ComponentState<SwitchSlots> & Required<Pick<SwitchProps, 'labelPosition'>>;
|
|
91
90
|
|
|
92
91
|
/**
|
|
93
92
|
* Create the state required to render Switch.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.types.js","sourceRoot":"../src/","sources":["components/Switch/Switch.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SwitchSlots = {\n /**\n * The root element of the Switch.\n *\n * The root slot receives the `className` and `style` specified directly on the `<Switch>` tag.\n * All other native props will be applied to the primary slot: `input`.\n */\n root: NonNullable<Slot<'div'>>;\n\n /**\n * The track and the thumb sliding over it indicating the on and off status of the Switch.\n */\n indicator: NonNullable<Slot<'div'>>;\n\n /**\n * Hidden input that handles the Switch's functionality.\n *\n * This is the PRIMARY slot: all native properties specified directly on the `<Switch>` tag will be applied to this\n * slot, except `className` and `style`, which remain on the root slot.\n */\n input: NonNullable<Slot<'input'>>;\n\n /**\n * The Switch's label.\n */\n label?: Slot<typeof Label>;\n};\n\
|
|
1
|
+
{"version":3,"file":"Switch.types.js","sourceRoot":"../src/","sources":["components/Switch/Switch.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SwitchSlots = {\n /**\n * The root element of the Switch.\n *\n * The root slot receives the `className` and `style` specified directly on the `<Switch>` tag.\n * All other native props will be applied to the primary slot: `input`.\n */\n root: NonNullable<Slot<'div'>>;\n\n /**\n * The track and the thumb sliding over it indicating the on and off status of the Switch.\n */\n indicator: NonNullable<Slot<'div'>>;\n\n /**\n * Hidden input that handles the Switch's functionality.\n *\n * This is the PRIMARY slot: all native properties specified directly on the `<Switch>` tag will be applied to this\n * slot, except `className` and `style`, which remain on the root slot.\n */\n input: NonNullable<Slot<'input'>>;\n\n /**\n * The Switch's label.\n */\n label?: Slot<typeof Label>;\n};\n\nexport type SwitchOnChangeData = {\n checked: boolean;\n};\n\n/**\n * Switch Props\n */\nexport type SwitchProps = Omit<ComponentProps<Partial<SwitchSlots>, 'input'>, 'onChange'> & {\n /**\n * Defines the controlled checked state of the Switch.\n * If passed, Switch ignores the `defaultChecked` property.\n * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n * correct value based on handling `onChange` events and re-rendering.\n *\n * @default false\n */\n checked?: boolean;\n\n /**\n * Defines whether the Switch is initially in a checked state or not when rendered.\n *\n * @default false\n */\n defaultChecked?: boolean;\n\n /**\n * The position of the label relative to the Switch.\n *\n * @default after\n */\n labelPosition?: 'above' | 'after' | 'before';\n\n /**\n * Callback to be called when the checked state value changes.\n */\n onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SwitchOnChangeData) => void;\n};\n\n/**\n * State used in rendering Switch\n */\nexport type SwitchState = ComponentState<SwitchSlots> & Required<Pick<SwitchProps, 'labelPosition'>>;\n"]}
|
|
@@ -24,8 +24,8 @@ const trackWidth = 40;
|
|
|
24
24
|
|
|
25
25
|
const useRootStyles = /*#__PURE__*/__styles({
|
|
26
26
|
"base": {
|
|
27
|
+
"Bt984gj": "f6jr5hl",
|
|
27
28
|
"B7ck84d": "f1ewtqcl",
|
|
28
|
-
"i8kkvl": "f4akndk",
|
|
29
29
|
"mc9l5x": "ftuwxu6",
|
|
30
30
|
"z8tnut": "fp9bwmr",
|
|
31
31
|
"z189sj": ["f19lj068", "f177v4lu"],
|
|
@@ -62,23 +62,12 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
62
62
|
"Bc94xmo": ["fxfgh6q", "f8l10fm"],
|
|
63
63
|
"Bj23z95": ["f8l10fm", "fxfgh6q"]
|
|
64
64
|
},
|
|
65
|
-
"
|
|
65
|
+
"vertical": {
|
|
66
66
|
"Beiy3e4": "f1vx9l62",
|
|
67
|
-
"z8tnut": "f10ra9hq"
|
|
68
|
-
"Belr9w4": "f1ma2n7n"
|
|
69
|
-
},
|
|
70
|
-
"after": {
|
|
71
|
-
"Bt984gj": "f6jr5hl",
|
|
72
|
-
"i8kkvl": "f4akndk",
|
|
73
|
-
"Beiy3e4": "f1063pyq"
|
|
74
|
-
},
|
|
75
|
-
"before": {
|
|
76
|
-
"Bt984gj": "f6jr5hl",
|
|
77
|
-
"i8kkvl": "f4akndk",
|
|
78
|
-
"Beiy3e4": "f1063pyq"
|
|
67
|
+
"z8tnut": "f10ra9hq"
|
|
79
68
|
}
|
|
80
69
|
}, {
|
|
81
|
-
"d": [".
|
|
70
|
+
"d": [".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".f10pi13n{position:relative;}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f1kbdjx9:focus-within:after{border-top-style:solid;}", "[data-keyboard-nav] .fw1d893:focus-within:after{border-right-style:solid;}", "[data-keyboard-nav] .fpuz8dn:focus-within:after{border-left-style:solid;}", "[data-keyboard-nav] .f14hlsw1:focus-within:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f1bkt4b4:focus-within:after{border-top-width:2px;}", "[data-keyboard-nav] .f16hf5f2:focus-within:after{border-right-width:2px;}", "[data-keyboard-nav] .f1qhqcal:focus-within:after{border-left-width:2px;}", "[data-keyboard-nav] .fyyqeim:focus-within:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f1aneyfs:focus-within:after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f15nmyc0:focus-within:after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f3cpy5b:focus-within:after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f13v6kgv:focus-within:after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .filx0we:focus-within:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1horip2:focus-within:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgnx9ah:focus-within:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fkii2tb:focus-within:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f10ra9hq{padding-top:4px;}"],
|
|
82
71
|
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
83
72
|
});
|
|
84
73
|
|
|
@@ -190,9 +179,18 @@ const useInputStyles = /*#__PURE__*/__styles({
|
|
|
190
179
|
const useLabelStyles = /*#__PURE__*/__styles({
|
|
191
180
|
"base": {
|
|
192
181
|
"famaaq": "f1xqy1su"
|
|
182
|
+
},
|
|
183
|
+
"above": {
|
|
184
|
+
"jrapky": "fd1gkq"
|
|
185
|
+
},
|
|
186
|
+
"after": {
|
|
187
|
+
"Frg6f3": ["f1hf5xhj", "f1x4n1mu"]
|
|
188
|
+
},
|
|
189
|
+
"before": {
|
|
190
|
+
"t21cq0": ["f1x4n1mu", "f1hf5xhj"]
|
|
193
191
|
}
|
|
194
192
|
}, {
|
|
195
|
-
"d": [".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"]
|
|
193
|
+
"d": [".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".fd1gkq{margin-bottom:4px;}", ".f1hf5xhj{margin-left:12px;}", ".f1x4n1mu{margin-right:12px;}"]
|
|
196
194
|
});
|
|
197
195
|
/**
|
|
198
196
|
* Apply styling to the Switch slots based on the state
|
|
@@ -207,12 +205,12 @@ export const useSwitchStyles_unstable = state => {
|
|
|
207
205
|
const {
|
|
208
206
|
labelPosition
|
|
209
207
|
} = state;
|
|
210
|
-
state.root.className = mergeClasses(switchClassNames.root, rootStyles.base, rootStyles
|
|
208
|
+
state.root.className = mergeClasses(switchClassNames.root, rootStyles.base, labelPosition === 'above' && rootStyles.vertical, state.root.className);
|
|
211
209
|
state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, state.indicator.className);
|
|
212
210
|
state.input.className = mergeClasses(switchClassNames.input, inputStyles.base, inputStyles.highContrast, state.input.className);
|
|
213
211
|
|
|
214
212
|
if (state.label) {
|
|
215
|
-
state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, state.label.className);
|
|
213
|
+
state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
|
|
216
214
|
}
|
|
217
215
|
|
|
218
216
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"AAAA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAIA,OAAO,MAAM,gBAAgB,GAAgC;AAC3D,EAAA,IAAI,EAAE,YADqD;AAE3D,EAAA,SAAS,EAAE,uBAFgD;AAG3D,EAAA,KAAK,EAAE,mBAHoD;AAI3D,EAAA,KAAK,EAAE;AAJoD,CAAtD;AAOP;;AAEG;;AACH,OAAO,MAAM,eAAe,GAAG,gBAAgB,CAAC,IAAzC,C,CAEP;;AACA,MAAM,SAAS,GAAG,CAAlB;AACA,MAAM,QAAQ,GAAG,CAAjB;AACA,MAAM,QAAQ,GAAG,EAAjB,C,CAEA;;AACA,MAAM,yBAAyB,GAAG,CAAlC;AACA,MAAM,SAAS,GAAG,EAAlB;AACA,MAAM,WAAW,GAAG,EAApB;AACA,MAAM,UAAU,GAAG,EAAnB;;AAEA,MAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
1
|
+
{"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// TODO replace these spacing constants with theme values once they're on the theme.\nconst spacingXS = 4;\nconst spacingS = 8;\nconst spacingM = 12;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst thumbSize = 14;\nconst trackHeight = 20;\nconst trackWidth = 40;\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n ...shorthands.padding(`${spacingS}px`),\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n vertical: {\n flexDirection: 'column',\n paddingTop: `${spacingXS}px`,\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('1px'),\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize + spaceBetweenThumbAndTrack}px`,\n height: `${trackHeight}px`,\n pointerEvents: 'none',\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n\n '> *': {\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'transform',\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n left: 0,\n ...shorthands.margin(0),\n opacity: 0,\n position: 'absolute',\n top: 0,\n width: '100%',\n\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack * 2}px)`,\n },\n },\n },\n\n // Disabled (both checked and unchecked)\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Enabled and checked\n ':enabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n },\n\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n },\n },\n },\n\n highContrast: {\n '@media (forced-colors: active)': {\n ':disabled': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n ...shorthands.borderColor('GrayText'),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText',\n },\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n userSelect: 'none',\n },\n\n above: {\n marginBottom: `${spacingXS}px`,\n },\n after: {\n marginLeft: `${spacingM}px`,\n },\n before: {\n marginRight: `${spacingM}px`,\n },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n const rootStyles = useRootStyles();\n const indicatorStyles = useIndicatorStyles();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n\n const { labelPosition } = state;\n\n state.root.className = mergeClasses(\n switchClassNames.root,\n rootStyles.base,\n labelPosition === 'above' && rootStyles.vertical,\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n state.input.className = mergeClasses(\n switchClassNames.input,\n inputStyles.base,\n inputStyles.highContrast,\n state.input.className,\n );\n\n if (state.label) {\n state.label.className = mergeClasses(\n switchClassNames.label,\n labelStyles.base,\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -34,8 +34,8 @@ const trackWidth = 40;
|
|
|
34
34
|
|
|
35
35
|
const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
36
36
|
"base": {
|
|
37
|
+
"Bt984gj": "f6jr5hl",
|
|
37
38
|
"B7ck84d": "f1ewtqcl",
|
|
38
|
-
"i8kkvl": "f4akndk",
|
|
39
39
|
"mc9l5x": "ftuwxu6",
|
|
40
40
|
"z8tnut": "fp9bwmr",
|
|
41
41
|
"z189sj": ["f19lj068", "f177v4lu"],
|
|
@@ -72,23 +72,12 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
72
72
|
"Bc94xmo": ["fxfgh6q", "f8l10fm"],
|
|
73
73
|
"Bj23z95": ["f8l10fm", "fxfgh6q"]
|
|
74
74
|
},
|
|
75
|
-
"
|
|
75
|
+
"vertical": {
|
|
76
76
|
"Beiy3e4": "f1vx9l62",
|
|
77
|
-
"z8tnut": "f10ra9hq"
|
|
78
|
-
"Belr9w4": "f1ma2n7n"
|
|
79
|
-
},
|
|
80
|
-
"after": {
|
|
81
|
-
"Bt984gj": "f6jr5hl",
|
|
82
|
-
"i8kkvl": "f4akndk",
|
|
83
|
-
"Beiy3e4": "f1063pyq"
|
|
84
|
-
},
|
|
85
|
-
"before": {
|
|
86
|
-
"Bt984gj": "f6jr5hl",
|
|
87
|
-
"i8kkvl": "f4akndk",
|
|
88
|
-
"Beiy3e4": "f1063pyq"
|
|
77
|
+
"z8tnut": "f10ra9hq"
|
|
89
78
|
}
|
|
90
79
|
}, {
|
|
91
|
-
"d": [".
|
|
80
|
+
"d": [".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".f10pi13n{position:relative;}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f1kbdjx9:focus-within:after{border-top-style:solid;}", "[data-keyboard-nav] .fw1d893:focus-within:after{border-right-style:solid;}", "[data-keyboard-nav] .fpuz8dn:focus-within:after{border-left-style:solid;}", "[data-keyboard-nav] .f14hlsw1:focus-within:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f1bkt4b4:focus-within:after{border-top-width:2px;}", "[data-keyboard-nav] .f16hf5f2:focus-within:after{border-right-width:2px;}", "[data-keyboard-nav] .f1qhqcal:focus-within:after{border-left-width:2px;}", "[data-keyboard-nav] .fyyqeim:focus-within:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f1aneyfs:focus-within:after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f15nmyc0:focus-within:after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f3cpy5b:focus-within:after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f13v6kgv:focus-within:after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .filx0we:focus-within:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1horip2:focus-within:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgnx9ah:focus-within:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fkii2tb:focus-within:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f10ra9hq{padding-top:4px;}"],
|
|
92
81
|
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
93
82
|
});
|
|
94
83
|
|
|
@@ -200,9 +189,18 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
|
|
|
200
189
|
const useLabelStyles = /*#__PURE__*/react_1.__styles({
|
|
201
190
|
"base": {
|
|
202
191
|
"famaaq": "f1xqy1su"
|
|
192
|
+
},
|
|
193
|
+
"above": {
|
|
194
|
+
"jrapky": "fd1gkq"
|
|
195
|
+
},
|
|
196
|
+
"after": {
|
|
197
|
+
"Frg6f3": ["f1hf5xhj", "f1x4n1mu"]
|
|
198
|
+
},
|
|
199
|
+
"before": {
|
|
200
|
+
"t21cq0": ["f1x4n1mu", "f1hf5xhj"]
|
|
203
201
|
}
|
|
204
202
|
}, {
|
|
205
|
-
"d": [".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"]
|
|
203
|
+
"d": [".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".fd1gkq{margin-bottom:4px;}", ".f1hf5xhj{margin-left:12px;}", ".f1x4n1mu{margin-right:12px;}"]
|
|
206
204
|
});
|
|
207
205
|
/**
|
|
208
206
|
* Apply styling to the Switch slots based on the state
|
|
@@ -217,12 +215,12 @@ const useSwitchStyles_unstable = state => {
|
|
|
217
215
|
const {
|
|
218
216
|
labelPosition
|
|
219
217
|
} = state;
|
|
220
|
-
state.root.className = react_1.mergeClasses(exports.switchClassNames.root, rootStyles.base, rootStyles
|
|
218
|
+
state.root.className = react_1.mergeClasses(exports.switchClassNames.root, rootStyles.base, labelPosition === 'above' && rootStyles.vertical, state.root.className);
|
|
221
219
|
state.indicator.className = react_1.mergeClasses(exports.switchClassNames.indicator, indicatorStyles.base, state.indicator.className);
|
|
222
220
|
state.input.className = react_1.mergeClasses(exports.switchClassNames.input, inputStyles.base, inputStyles.highContrast, state.input.className);
|
|
223
221
|
|
|
224
222
|
if (state.label) {
|
|
225
|
-
state.label.className = react_1.mergeClasses(exports.switchClassNames.label, labelStyles.base, state.label.className);
|
|
223
|
+
state.label.className = react_1.mergeClasses(exports.switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
|
|
226
224
|
}
|
|
227
225
|
|
|
228
226
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAIa,OAAA,CAAA,gBAAA,GAAgD;AAC3D,EAAA,IAAI,EAAE,YADqD;AAE3D,EAAA,SAAS,EAAE,uBAFgD;AAG3D,EAAA,KAAK,EAAE,mBAHoD;AAI3D,EAAA,KAAK,EAAE;AAJoD,CAAhD;AAOb;;AAEG;;AACU,OAAA,CAAA,eAAA,GAAkB,OAAA,CAAA,gBAAA,CAAiB,IAAnC,C,CAEb;;AACA,MAAM,SAAS,GAAG,CAAlB;AACA,MAAM,QAAQ,GAAG,CAAjB;AACA,MAAM,QAAQ,GAAG,EAAjB,C,CAEA;;AACA,MAAM,yBAAyB,GAAG,CAAlC;AACA,MAAM,SAAS,GAAG,EAAlB;AACA,MAAM,WAAW,GAAG,EAApB;AACA,MAAM,UAAU,GAAG,EAAnB;;AAEA,MAAM,aAAa,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
1
|
+
{"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAIa,OAAA,CAAA,gBAAA,GAAgD;AAC3D,EAAA,IAAI,EAAE,YADqD;AAE3D,EAAA,SAAS,EAAE,uBAFgD;AAG3D,EAAA,KAAK,EAAE,mBAHoD;AAI3D,EAAA,KAAK,EAAE;AAJoD,CAAhD;AAOb;;AAEG;;AACU,OAAA,CAAA,eAAA,GAAkB,OAAA,CAAA,gBAAA,CAAiB,IAAnC,C,CAEb;;AACA,MAAM,SAAS,GAAG,CAAlB;AACA,MAAM,QAAQ,GAAG,CAAjB;AACA,MAAM,QAAQ,GAAG,EAAjB,C,CAEA;;AACA,MAAM,yBAAyB,GAAG,CAAlC;AACA,MAAM,SAAS,GAAG,EAAlB;AACA,MAAM,WAAW,GAAG,EAApB;AACA,MAAM,UAAU,GAAG,EAAnB;;AAEA,MAAM,aAAa,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAiBA,MAAM,kBAAkB,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA3B;;AAwBA,MAAM,cAAc,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAmHA,MAAM,cAAc,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;AAgBA;;AAEG;;;AACI,MAAM,wBAAwB,GAAI,KAAD,IAAoC;AAC1E,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,eAAe,GAAG,kBAAkB,EAA1C;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AAEA,QAAM;AAAE,IAAA;AAAF,MAAoB,KAA1B;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,gBAAA,CAAiB,IADI,EAErB,UAAU,CAAC,IAFU,EAGrB,aAAa,KAAK,OAAlB,IAA6B,UAAU,CAAC,QAHnB,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;AAOA,EAAA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,gBAAA,CAAiB,SAA9B,EAAyC,eAAe,CAAC,IAAzD,EAA+D,KAAK,CAAC,SAAN,CAAgB,SAA/E,CAA5B;AAEA,EAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CACtB,OAAA,CAAA,gBAAA,CAAiB,KADK,EAEtB,WAAW,CAAC,IAFU,EAGtB,WAAW,CAAC,YAHU,EAItB,KAAK,CAAC,KAAN,CAAY,SAJU,CAAxB;;AAOA,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CACtB,OAAA,CAAA,gBAAA,CAAiB,KADK,EAEtB,WAAW,CAAC,IAFU,EAGtB,WAAW,CAAC,aAAD,CAHW,EAItB,KAAK,CAAC,KAAN,CAAY,SAJU,CAAxB;AAMD;;AAED,SAAO,KAAP;AACD,CAlCM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// TODO replace these spacing constants with theme values once they're on the theme.\nconst spacingXS = 4;\nconst spacingS = 8;\nconst spacingM = 12;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst thumbSize = 14;\nconst trackHeight = 20;\nconst trackWidth = 40;\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n ...shorthands.padding(`${spacingS}px`),\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n vertical: {\n flexDirection: 'column',\n paddingTop: `${spacingXS}px`,\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('1px'),\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize + spaceBetweenThumbAndTrack}px`,\n height: `${trackHeight}px`,\n pointerEvents: 'none',\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n\n '> *': {\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'transform',\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n left: 0,\n ...shorthands.margin(0),\n opacity: 0,\n position: 'absolute',\n top: 0,\n width: '100%',\n\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack * 2}px)`,\n },\n },\n },\n\n // Disabled (both checked and unchecked)\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Enabled and checked\n ':enabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n },\n\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n },\n },\n },\n\n highContrast: {\n '@media (forced-colors: active)': {\n ':disabled': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n ...shorthands.borderColor('GrayText'),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText',\n },\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n userSelect: 'none',\n },\n\n above: {\n marginBottom: `${spacingXS}px`,\n },\n after: {\n marginLeft: `${spacingM}px`,\n },\n before: {\n marginRight: `${spacingM}px`,\n },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n const rootStyles = useRootStyles();\n const indicatorStyles = useIndicatorStyles();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n\n const { labelPosition } = state;\n\n state.root.className = mergeClasses(\n switchClassNames.root,\n rootStyles.base,\n labelPosition === 'above' && rootStyles.vertical,\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n state.input.className = mergeClasses(\n switchClassNames.input,\n inputStyles.base,\n inputStyles.highContrast,\n state.input.className,\n );\n\n if (state.label) {\n state.label.className = mergeClasses(\n switchClassNames.label,\n labelStyles.base,\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
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-20220516-0419.1",
|
|
4
4
|
"description": "Fluent UI React Switch component.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -28,16 +28,16 @@
|
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
30
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
31
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20220516-0419.1",
|
|
32
32
|
"@fluentui/scripts": "^1.0.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@fluentui/react-icons": "^2.0.166-rc.3",
|
|
36
|
-
"@fluentui/react-label": "0.0.0-nightly-
|
|
37
|
-
"@fluentui/react-tabster": "0.0.0-nightly-
|
|
38
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
39
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
40
|
-
"@griffel/react": "1.0.
|
|
36
|
+
"@fluentui/react-label": "0.0.0-nightly-20220516-0419.1",
|
|
37
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20220516-0419.1",
|
|
38
|
+
"@fluentui/react-theme": "0.0.0-nightly-20220516-0419.1",
|
|
39
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20220516-0419.1",
|
|
40
|
+
"@griffel/react": "1.0.4",
|
|
41
41
|
"tslib": "^2.1.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|