@fluentui/react-switch 9.1.27 → 9.1.29
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 +109 -1
- package/CHANGELOG.md +33 -2
- package/lib/components/Switch/renderSwitch.js +3 -3
- package/lib/components/Switch/renderSwitch.js.map +1 -1
- package/lib/components/Switch/useSwitch.js +10 -10
- package/lib/components/Switch/useSwitch.js.map +1 -1
- package/lib/components/Switch/useSwitchStyles.styles.js +10 -4
- package/lib/components/Switch/useSwitchStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Switch/renderSwitch.js +2 -2
- package/lib-commonjs/components/Switch/renderSwitch.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitch.js +9 -9
- package/lib-commonjs/components/Switch/useSwitch.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.styles.js +49 -41
- package/lib-commonjs/components/Switch/useSwitchStyles.styles.js.map +1 -1
- package/package.json +9 -9
package/CHANGELOG.json
CHANGED
@@ -2,7 +2,115 @@
|
|
2
2
|
"name": "@fluentui/react-switch",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
5
|
+
"date": "Wed, 09 Aug 2023 13:11:46 GMT",
|
6
|
+
"tag": "@fluentui/react-switch_v9.1.29",
|
7
|
+
"version": "9.1.29",
|
8
|
+
"comments": {
|
9
|
+
"patch": [
|
10
|
+
{
|
11
|
+
"author": "bernardo.sunderhus@gmail.com",
|
12
|
+
"package": "@fluentui/react-switch",
|
13
|
+
"commit": "796e4426c50ede34b30e2dc2392328dcbadc2702",
|
14
|
+
"comment": "chore(cxe-red): migrate to new slot API"
|
15
|
+
},
|
16
|
+
{
|
17
|
+
"author": "olfedias@microsoft.com",
|
18
|
+
"package": "@fluentui/react-switch",
|
19
|
+
"commit": "b090c0339983847a62b9dc6187d08dc8c4b1d55f",
|
20
|
+
"comment": "chore: Update Griffel to latest version"
|
21
|
+
},
|
22
|
+
{
|
23
|
+
"author": "beachball",
|
24
|
+
"package": "@fluentui/react-switch",
|
25
|
+
"comment": "Bump @fluentui/react-field to v9.1.16",
|
26
|
+
"commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
|
27
|
+
},
|
28
|
+
{
|
29
|
+
"author": "beachball",
|
30
|
+
"package": "@fluentui/react-switch",
|
31
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14",
|
32
|
+
"commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
|
33
|
+
},
|
34
|
+
{
|
35
|
+
"author": "beachball",
|
36
|
+
"package": "@fluentui/react-switch",
|
37
|
+
"comment": "Bump @fluentui/react-label to v9.1.24",
|
38
|
+
"commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
|
39
|
+
},
|
40
|
+
{
|
41
|
+
"author": "beachball",
|
42
|
+
"package": "@fluentui/react-switch",
|
43
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.7.2",
|
44
|
+
"commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
|
45
|
+
},
|
46
|
+
{
|
47
|
+
"author": "beachball",
|
48
|
+
"package": "@fluentui/react-switch",
|
49
|
+
"comment": "Bump @fluentui/react-tabster to v9.12.1",
|
50
|
+
"commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
|
51
|
+
},
|
52
|
+
{
|
53
|
+
"author": "beachball",
|
54
|
+
"package": "@fluentui/react-switch",
|
55
|
+
"comment": "Bump @fluentui/react-theme to v9.1.11",
|
56
|
+
"commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
|
57
|
+
}
|
58
|
+
]
|
59
|
+
}
|
60
|
+
},
|
61
|
+
{
|
62
|
+
"date": "Fri, 04 Aug 2023 08:52:58 GMT",
|
63
|
+
"tag": "@fluentui/react-switch_v9.1.28",
|
64
|
+
"version": "9.1.28",
|
65
|
+
"comments": {
|
66
|
+
"patch": [
|
67
|
+
{
|
68
|
+
"author": "beachball",
|
69
|
+
"package": "@fluentui/react-switch",
|
70
|
+
"comment": "Bump @fluentui/react-field to v9.1.15",
|
71
|
+
"commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
|
72
|
+
},
|
73
|
+
{
|
74
|
+
"author": "beachball",
|
75
|
+
"package": "@fluentui/react-switch",
|
76
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.13",
|
77
|
+
"commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
|
78
|
+
},
|
79
|
+
{
|
80
|
+
"author": "beachball",
|
81
|
+
"package": "@fluentui/react-switch",
|
82
|
+
"comment": "Bump @fluentui/react-label to v9.1.23",
|
83
|
+
"commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
|
84
|
+
},
|
85
|
+
{
|
86
|
+
"author": "beachball",
|
87
|
+
"package": "@fluentui/react-switch",
|
88
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.7.1",
|
89
|
+
"commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
|
90
|
+
},
|
91
|
+
{
|
92
|
+
"author": "beachball",
|
93
|
+
"package": "@fluentui/react-switch",
|
94
|
+
"comment": "Bump @fluentui/react-tabster to v9.12.0",
|
95
|
+
"commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
|
96
|
+
},
|
97
|
+
{
|
98
|
+
"author": "beachball",
|
99
|
+
"package": "@fluentui/react-switch",
|
100
|
+
"comment": "Bump @fluentui/react-theme to v9.1.10",
|
101
|
+
"commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
|
102
|
+
},
|
103
|
+
{
|
104
|
+
"author": "beachball",
|
105
|
+
"package": "@fluentui/react-switch",
|
106
|
+
"comment": "Bump @fluentui/react-utilities to v9.11.0",
|
107
|
+
"commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
|
108
|
+
}
|
109
|
+
]
|
110
|
+
}
|
111
|
+
},
|
112
|
+
{
|
113
|
+
"date": "Tue, 01 Aug 2023 10:17:21 GMT",
|
6
114
|
"tag": "@fluentui/react-switch_v9.1.27",
|
7
115
|
"version": "9.1.27",
|
8
116
|
"comments": {
|
package/CHANGELOG.md
CHANGED
@@ -1,12 +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, 09 Aug 2023 13:11:46 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.1.29](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.1.29)
|
8
|
+
|
9
|
+
Wed, 09 Aug 2023 13:11:46 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.1.28..@fluentui/react-switch_v9.1.29)
|
11
|
+
|
12
|
+
### Patches
|
13
|
+
|
14
|
+
- chore(cxe-red): migrate to new slot API ([PR #28753](https://github.com/microsoft/fluentui/pull/28753) by bernardo.sunderhus@gmail.com)
|
15
|
+
- chore: Update Griffel to latest version ([PR #28684](https://github.com/microsoft/fluentui/pull/28684) by olfedias@microsoft.com)
|
16
|
+
- Bump @fluentui/react-field to v9.1.16 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
|
17
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
|
18
|
+
- Bump @fluentui/react-label to v9.1.24 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
|
19
|
+
- Bump @fluentui/react-shared-contexts to v9.7.2 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
|
20
|
+
- Bump @fluentui/react-tabster to v9.12.1 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
|
21
|
+
- Bump @fluentui/react-theme to v9.1.11 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
|
22
|
+
|
23
|
+
## [9.1.28](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.1.28)
|
24
|
+
|
25
|
+
Fri, 04 Aug 2023 08:52:58 GMT
|
26
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.1.27..@fluentui/react-switch_v9.1.28)
|
27
|
+
|
28
|
+
### Patches
|
29
|
+
|
30
|
+
- Bump @fluentui/react-field to v9.1.15 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
|
31
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.13 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
|
32
|
+
- Bump @fluentui/react-label to v9.1.23 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
|
33
|
+
- Bump @fluentui/react-shared-contexts to v9.7.1 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
|
34
|
+
- Bump @fluentui/react-tabster to v9.12.0 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
|
35
|
+
- Bump @fluentui/react-theme to v9.1.10 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
|
36
|
+
- Bump @fluentui/react-utilities to v9.11.0 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
|
37
|
+
|
7
38
|
## [9.1.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.1.27)
|
8
39
|
|
9
|
-
Tue, 01 Aug 2023 10:
|
40
|
+
Tue, 01 Aug 2023 10:17:21 GMT
|
10
41
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.1.26..@fluentui/react-switch_v9.1.27)
|
11
42
|
|
12
43
|
### Patches
|
@@ -1,9 +1,9 @@
|
|
1
1
|
/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
|
2
|
-
import {
|
2
|
+
import { assertSlots } from '@fluentui/react-utilities';
|
3
3
|
/**
|
4
4
|
* Render a Switch component by passing the state defined props to the appropriate slots.
|
5
5
|
*/ export const renderSwitch_unstable = (state)=>{
|
6
|
-
|
6
|
+
assertSlots(state);
|
7
7
|
const { labelPosition } = state;
|
8
|
-
return /*#__PURE__*/ createElement(
|
8
|
+
return /*#__PURE__*/ createElement(state.root, null, /*#__PURE__*/ createElement(state.input, null), labelPosition !== 'after' && state.label && /*#__PURE__*/ createElement(state.label, null), /*#__PURE__*/ createElement(state.indicator, null), labelPosition === 'after' && state.label && /*#__PURE__*/ createElement(state.label, null));
|
9
9
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["renderSwitch.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport {
|
1
|
+
{"version":3,"sources":["renderSwitch.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { SwitchState, SwitchSlots } from './Switch.types';\n\n/**\n * Render a Switch component by passing the state defined props to the appropriate slots.\n */\nexport const renderSwitch_unstable = (state: SwitchState) => {\n assertSlots<SwitchSlots>(state);\n const { labelPosition } = state;\n\n return (\n <state.root>\n <state.input />\n {labelPosition !== 'after' && state.label && <state.label />}\n <state.indicator />\n {labelPosition === 'after' && state.label && <state.label />}\n </state.root>\n );\n};\n"],"names":["createElement","assertSlots","renderSwitch_unstable","state","labelPosition","root","input","label","indicator"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,QAAuB;IAC3DF,YAAyBE;IACzB,MAAM,EAAEC,cAAa,EAAE,GAAGD;IAE1B,qBACE,AAfJ,cAeKA,MAAME,IAAI,sBACT,AAhBN,cAgBOF,MAAMG,KAAK,SACXF,kBAAkB,WAAWD,MAAMI,KAAK,kBAAI,AAjBnD,cAiBoDJ,MAAMI,KAAK,uBACzD,AAlBN,cAkBOJ,MAAMK,SAAS,SACfJ,kBAAkB,WAAWD,MAAMI,KAAK,kBAAI,AAnBnD,cAmBoDJ,MAAMI,KAAK;AAG/D,EAAE"}
|
@@ -3,7 +3,7 @@ import { useFieldControlProps_unstable } from '@fluentui/react-field';
|
|
3
3
|
import { CircleFilled } from '@fluentui/react-icons';
|
4
4
|
import { Label } from '@fluentui/react-label';
|
5
5
|
import { useFocusWithin } from '@fluentui/react-tabster';
|
6
|
-
import { getPartitionedNativeProps, mergeCallbacks,
|
6
|
+
import { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';
|
7
7
|
/**
|
8
8
|
* Create the state required to render Switch.
|
9
9
|
*
|
@@ -29,21 +29,21 @@ import { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useId } fr
|
|
29
29
|
]
|
30
30
|
});
|
31
31
|
const id = useId('switch-', nativeProps.primary.id);
|
32
|
-
const root =
|
32
|
+
const root = slot.always(props.root, {
|
33
33
|
defaultProps: {
|
34
34
|
ref: useFocusWithin(),
|
35
35
|
...nativeProps.root
|
36
36
|
},
|
37
|
-
|
37
|
+
elementType: 'div'
|
38
38
|
});
|
39
|
-
const indicator =
|
39
|
+
const indicator = slot.always(props.indicator, {
|
40
40
|
defaultProps: {
|
41
41
|
'aria-hidden': true,
|
42
42
|
children: /*#__PURE__*/ React.createElement(CircleFilled, null)
|
43
43
|
},
|
44
|
-
|
44
|
+
elementType: 'div'
|
45
45
|
});
|
46
|
-
const input =
|
46
|
+
const input = slot.always(props.input, {
|
47
47
|
defaultProps: {
|
48
48
|
checked,
|
49
49
|
defaultChecked,
|
@@ -53,24 +53,24 @@ import { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useId } fr
|
|
53
53
|
type: 'checkbox',
|
54
54
|
...nativeProps.primary
|
55
55
|
},
|
56
|
-
|
56
|
+
elementType: 'input'
|
57
57
|
});
|
58
58
|
input.onChange = mergeCallbacks(input.onChange, (ev)=>{
|
59
59
|
return onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
|
60
60
|
checked: ev.currentTarget.checked
|
61
61
|
});
|
62
62
|
});
|
63
|
-
const label =
|
63
|
+
const label = slot.optional(props.label, {
|
64
64
|
defaultProps: {
|
65
65
|
disabled,
|
66
66
|
htmlFor: id,
|
67
67
|
required,
|
68
68
|
size: 'medium'
|
69
|
-
}
|
69
|
+
},
|
70
|
+
elementType: Label
|
70
71
|
});
|
71
72
|
return {
|
72
73
|
labelPosition,
|
73
|
-
//Slots definition
|
74
74
|
components: {
|
75
75
|
root: 'div',
|
76
76
|
indicator: 'div',
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { getPartitionedNativeProps, mergeCallbacks,
|
1
|
+
{"version":3,"sources":["useSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { getPartitionedNativeProps, mergeCallbacks, useId, slot } 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 // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\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 = slot.always(props.root, {\n defaultProps: { ref: useFocusWithin<HTMLDivElement>(), ...nativeProps.root },\n elementType: 'div',\n });\n const indicator = slot.always(props.indicator, {\n defaultProps: { 'aria-hidden': true, children: <CircleFilled /> },\n elementType: 'div',\n });\n const input = slot.always(props.input, {\n defaultProps: { checked, defaultChecked, id, ref, role: 'switch', type: 'checkbox', ...nativeProps.primary },\n elementType: 'input',\n });\n input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { checked: ev.currentTarget.checked }));\n const label = slot.optional(props.label, {\n defaultProps: { disabled, htmlFor: id, required, size: 'medium' },\n elementType: Label,\n });\n return {\n labelPosition, //Slots definition\n components: { root: 'div', indicator: 'div', input: 'input', label: Label },\n\n root,\n indicator,\n input,\n label,\n };\n};\n"],"names":["React","useFieldControlProps_unstable","CircleFilled","Label","useFocusWithin","getPartitionedNativeProps","mergeCallbacks","useId","slot","useSwitch_unstable","props","ref","supportsLabelFor","supportsRequired","checked","defaultChecked","disabled","labelPosition","onChange","required","nativeProps","primarySlotTagName","excludedPropNames","id","primary","root","always","defaultProps","elementType","indicator","children","input","role","type","ev","currentTarget","label","optional","htmlFor","size","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,yBAAyB,EAAEC,cAAc,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAGnG;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC,MAAkD;IACvG,+CAA+C;IAC/CD,QAAQT,8BAA8BS,OAAO;QAAEE,kBAAkB,IAAI;QAAEC,kBAAkB,IAAI;IAAC;IAE9F,MAAM,EAAEC,QAAO,EAAEC,eAAc,EAAEC,SAAQ,EAAEC,eAAgB,QAAO,EAAEC,SAAQ,EAAEC,SAAQ,EAAE,GAAGT;IAE3F,MAAMU,cAAcf,0BAA0B;QAC5CK;QACAW,oBAAoB;QACpBC,mBAAmB;YAAC;YAAW;YAAkB;SAAW;IAC9D;IAEA,MAAMC,KAAKhB,MAAM,WAAWa,YAAYI,OAAO,CAACD,EAAE;IAElD,MAAME,OAAOjB,KAAKkB,MAAM,CAAChB,MAAMe,IAAI,EAAE;QACnCE,cAAc;YAAEhB,KAAKP;YAAkC,GAAGgB,YAAYK,IAAI;QAAC;QAC3EG,aAAa;IACf;IACA,MAAMC,YAAYrB,KAAKkB,MAAM,CAAChB,MAAMmB,SAAS,EAAE;QAC7CF,cAAc;YAAE,eAAe,IAAI;YAAEG,wBAAU,oBAAC5B;QAAgB;QAChE0B,aAAa;IACf;IACA,MAAMG,QAAQvB,KAAKkB,MAAM,CAAChB,MAAMqB,KAAK,EAAE;QACrCJ,cAAc;YAAEb;YAASC;YAAgBQ;YAAIZ;YAAKqB,MAAM;YAAUC,MAAM;YAAY,GAAGb,YAAYI,OAAO;QAAC;QAC3GI,aAAa;IACf;IACAG,MAAMb,QAAQ,GAAGZ,eAAeyB,MAAMb,QAAQ,EAAEgB,CAAAA;QAAMhB,OAAAA,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAWgB,IAAI;YAAEpB,SAASoB,GAAGC,aAAa,CAACrB,OAAO;QAAC;;IACzG,MAAMsB,QAAQ5B,KAAK6B,QAAQ,CAAC3B,MAAM0B,KAAK,EAAE;QACvCT,cAAc;YAAEX;YAAUsB,SAASf;YAAIJ;YAAUoB,MAAM;QAAS;QAChEX,aAAazB;IACf;IACA,OAAO;QACLc;QACAuB,YAAY;YAAEf,MAAM;YAAOI,WAAW;YAAOE,OAAO;YAASK,OAAOjC;QAAM;QAE1EsB;QACAI;QACAE;QACAK;IACF;AACF,EAAE"}
|
@@ -16,15 +16,18 @@ const spaceBetweenThumbAndTrack = 2;
|
|
16
16
|
const trackHeight = 20;
|
17
17
|
const trackWidth = 40;
|
18
18
|
const thumbSize = trackHeight - spaceBetweenThumbAndTrack;
|
19
|
-
const useRootBaseClassName = /*#__PURE__*/__resetStyles("rugt7u1", "rqv95o1", [".rugt7u1{
|
19
|
+
const useRootBaseClassName = /*#__PURE__*/__resetStyles("rugt7u1", "rqv95o1", [".rugt7u1{align-items:flex-start;box-sizing:border-box;display:inline-flex;position:relative;}", ".rugt7u1:focus{outline-style:none;}", ".rugt7u1:focus-visible{outline-style:none;}", ".rugt7u1[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".rugt7u1[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:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".rqv95o1{align-items:flex-start;box-sizing:border-box;display:inline-flex;position:relative;}", ".rqv95o1:focus{outline-style:none;}", ".rqv95o1:focus-visible{outline-style:none;}", ".rqv95o1[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".rqv95o1[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:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"]);
|
20
20
|
const useRootStyles = /*#__PURE__*/__styles({
|
21
21
|
vertical: {
|
22
22
|
Beiy3e4: "f1vx9l62"
|
23
23
|
}
|
24
24
|
}, {
|
25
|
-
d: [".f1vx9l62{
|
25
|
+
d: [".f1vx9l62{flex-direction:column;}"]
|
26
|
+
});
|
27
|
+
const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("r13wlxb8", null, {
|
28
|
+
r: [".r13wlxb8{border-radius:var(--borderRadiusCircular);border:1px solid;line-height:0;box-sizing:border-box;fill:currentColor;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;}", ".r13wlxb8>*{transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:transform;}"],
|
29
|
+
s: ["@media screen and (prefers-reduced-motion: reduce){.r13wlxb8{transition-duration:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r13wlxb8>*{transition-duration:0.01ms;}}"]
|
26
30
|
});
|
27
|
-
const 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;}}"]);
|
28
31
|
const useIndicatorStyles = /*#__PURE__*/__styles({
|
29
32
|
labelAbove: {
|
30
33
|
B6of3ja: "f1hu3pq6"
|
@@ -32,7 +35,10 @@ const useIndicatorStyles = /*#__PURE__*/__styles({
|
|
32
35
|
}, {
|
33
36
|
d: [".f1hu3pq6{margin-top:0;}"]
|
34
37
|
});
|
35
|
-
const useInputBaseClassName = /*#__PURE__*/__resetStyles("rw4brat", "r1f4bxyr",
|
38
|
+
const useInputBaseClassName = /*#__PURE__*/__resetStyles("rw4brat", "r1f4bxyr", {
|
39
|
+
r: [".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>*{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);}", ".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>*{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);}"],
|
40
|
+
s: ["@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;}}", "@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;}}"]
|
41
|
+
});
|
36
42
|
const useInputStyles = /*#__PURE__*/__styles({
|
37
43
|
before: {
|
38
44
|
j35jbq: ["f1e31b4d", "f1vgc2s3"],
|
@@ -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":["useSwitchStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, 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 */ export 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 = makeResetStyles({\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n position: 'relative',\n ...createFocusOutlineStyle({\n style: {},\n selector: 'focus-within'\n })\n});\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column'\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 '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n '> *': {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n }\n});\nconst useIndicatorStyles = makeStyles({\n labelAbove: {\n marginTop: 0\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 // 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 // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n }\n }\n },\n // Disabled (both checked and unchecked)\n ':disabled': {\n cursor: 'default',\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled\n },\n [`& ~ .${switchClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n borderColor: tokens.colorNeutralStrokeAccessible\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed\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 ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorTransparentStrokeInteractive\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n borderColor: tokens.colorTransparentStrokeInteractive\n }\n }\n },\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled\n }\n },\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n borderColor: tokens.colorTransparentStrokeDisabled\n }\n },\n '@media (forced-colors: active)': {\n ':disabled': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n borderColor: 'GrayText'\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText'\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});\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// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n cursor: 'pointer',\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 ...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 * Apply styling to the Switch slots based on the state\n */ export 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 { label , labelPosition } = 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"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,OAAO,MAAMC,gBAAgB,GAAG;EAC5BC,IAAI,EAAE,YAAY;EAClBC,SAAS,EAAE,uBAAuB;EAClCC,KAAK,EAAE,mBAAmB;EAC1BC,KAAK,EAAE;AACX,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,eAAe,GAAGL,gBAAgB,CAACC,IAAI;AACxD;AACA,MAAMK,yBAAyB,GAAG,CAAC;AACnC,MAAMC,WAAW,GAAG,EAAE;AACtB,MAAMC,UAAU,GAAG,EAAE;AACrB,MAAMC,SAAS,GAAGF,WAAW,GAAGD,yBAAyB;AACzD,MAAMI,oBAAoB,gBAAGd,aAAA,yiFAS5B,CAAC;AACF,MAAMe,aAAa,gBAAGd,QAAA;EAAAe,QAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIrB,CAAC;AACF,MAAMC,yBAAyB,gBAAGnB,aAAA,2wBA0BjC,CAAC;AACF,MAAMoB,kBAAkB,gBAAGnB,QAAA;EAAAoB,UAAA;IAAAC,OAAA;EAAA;AAAA;EAAAJ,CAAA;AAAA,CAI1B,CAAC;AACF,MAAMK,qBAAqB,gBAAGvB,aAAA,kiJA2G7B,CAAC;AACF,MAAMwB,cAAc,gBAAGvB,QAAA;EAAAwB,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAC,MAAA;IAAAF,OAAA;EAAA;EAAAG,KAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAf,CAAA;AAAA,CActB,CAAC;AACF;AACA,MAAMgB,cAAc,gBAAGjC,QAAA;EAAAkC,IAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAf,OAAA;IAAAgB,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAX,KAAA;IAAAQ,MAAA;IAAAE,OAAA;IAAAP,MAAA;EAAA;EAAAL,KAAA;IAAAa,MAAA;EAAA;EAAAhB,MAAA;IAAAc,MAAA;EAAA;AAAA;EAAArB,CAAA;AAAA,CAoBtB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMwB,wBAAwB,GAAIC,KAAK,IAAG;EACjD,MAAMC,iBAAiB,GAAG9B,oBAAoB,CAAC,CAAC;EAChD,MAAM+B,UAAU,GAAG9B,aAAa,CAAC,CAAC;EAClC,MAAM+B,sBAAsB,GAAG3B,yBAAyB,CAAC,CAAC;EAC1D,MAAM4B,eAAe,GAAG3B,kBAAkB,CAAC,CAAC;EAC5C,MAAM4B,kBAAkB,GAAGzB,qBAAqB,CAAC,CAAC;EAClD,MAAM0B,WAAW,GAAGzB,cAAc,CAAC,CAAC;EACpC,MAAM0B,WAAW,GAAGhB,cAAc,CAAC,CAAC;EACpC,MAAM;IAAE1B,KAAK;IAAG2C;EAAe,CAAC,GAAGR,KAAK;EACxCA,KAAK,CAACtC,IAAI,CAAC+C,SAAS,GAAGlD,YAAY,CAACE,gBAAgB,CAACC,IAAI,EAAEuC,iBAAiB,EAAEO,aAAa,KAAK,OAAO,IAAIN,UAAU,CAAC7B,QAAQ,EAAE2B,KAAK,CAACtC,IAAI,CAAC+C,SAAS,CAAC;EACrJT,KAAK,CAACrC,SAAS,CAAC8C,SAAS,GAAGlD,YAAY,CAACE,gBAAgB,CAACE,SAAS,EAAEwC,sBAAsB,EAAEtC,KAAK,IAAI2C,aAAa,KAAK,OAAO,IAAIJ,eAAe,CAAC1B,UAAU,EAAEsB,KAAK,CAACrC,SAAS,CAAC8C,SAAS,CAAC;EACzLT,KAAK,CAACpC,KAAK,CAAC6C,SAAS,GAAGlD,YAAY,CAACE,gBAAgB,CAACG,KAAK,EAAEyC,kBAAkB,EAAExC,KAAK,IAAIyC,WAAW,CAACE,aAAa,CAAC,EAAER,KAAK,CAACpC,KAAK,CAAC6C,SAAS,CAAC;EAC5I,IAAIT,KAAK,CAACnC,KAAK,EAAE;IACbmC,KAAK,CAACnC,KAAK,CAAC4C,SAAS,GAAGlD,YAAY,CAACE,gBAAgB,CAACI,KAAK,EAAE0C,WAAW,CAACf,IAAI,EAAEe,WAAW,CAACC,aAAa,CAAC,EAAER,KAAK,CAACnC,KAAK,CAAC4C,SAAS,CAAC;EACrI;EACA,OAAOT,KAAK;AAChB,CAAC"}
|
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","r","s","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":["useSwitchStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, 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 */ export 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 = makeResetStyles({\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n position: 'relative',\n ...createFocusOutlineStyle({\n style: {},\n selector: 'focus-within'\n })\n});\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column'\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 '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n '> *': {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n }\n});\nconst useIndicatorStyles = makeStyles({\n labelAbove: {\n marginTop: 0\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 // 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 // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n }\n }\n },\n // Disabled (both checked and unchecked)\n ':disabled': {\n cursor: 'default',\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled\n },\n [`& ~ .${switchClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n borderColor: tokens.colorNeutralStrokeAccessible\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed\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 ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorTransparentStrokeInteractive\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n borderColor: tokens.colorTransparentStrokeInteractive\n }\n }\n },\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled\n }\n },\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n borderColor: tokens.colorTransparentStrokeDisabled\n }\n },\n '@media (forced-colors: active)': {\n ':disabled': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n borderColor: 'GrayText'\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText'\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});\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// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n cursor: 'pointer',\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 ...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 * Apply styling to the Switch slots based on the state\n */ export 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 { label , labelPosition } = 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"],"mappings":"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"}
|
@@ -9,7 +9,7 @@ Object.defineProperty(exports, "renderSwitch_unstable", {
|
|
9
9
|
const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
|
10
10
|
const _reactUtilities = require("@fluentui/react-utilities");
|
11
11
|
const renderSwitch_unstable = (state)=>{
|
12
|
-
|
12
|
+
(0, _reactUtilities.assertSlots)(state);
|
13
13
|
const { labelPosition } = state;
|
14
|
-
return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(
|
14
|
+
return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.input, null), labelPosition !== 'after' && state.label && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.label, null), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.indicator, null), labelPosition === 'after' && state.label && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.label, null));
|
15
15
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["renderSwitch.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport {
|
1
|
+
{"version":3,"sources":["renderSwitch.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render a Switch component by passing the state defined props to the appropriate slots.\n */ export const renderSwitch_unstable = (state)=>{\n assertSlots(state);\n const { labelPosition } = state;\n return /*#__PURE__*/ createElement(state.root, null, /*#__PURE__*/ createElement(state.input, null), labelPosition !== 'after' && state.label && /*#__PURE__*/ createElement(state.label, null), /*#__PURE__*/ createElement(state.indicator, null), labelPosition === 'after' && state.label && /*#__PURE__*/ createElement(state.label, null));\n};\n"],"names":["renderSwitch_unstable","state","assertSlots","labelPosition","createElement","root","input","label","indicator"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAIjCA;;aAAAA;;iCAJkE;gCACvD;AAGjB,MAAMA,wBAAwB,CAACC,QAAQ;IAC9CC,IAAAA,2BAAW,EAACD;IACZ,MAAM,EAAEE,cAAa,EAAG,GAAGF;IAC3B,OAAO,WAAW,GAAGG,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAE,IAAI,EAAE,WAAW,GAAGD,IAAAA,8BAAa,EAACH,MAAMK,KAAK,EAAE,IAAI,GAAGH,kBAAkB,WAAWF,MAAMM,KAAK,IAAI,WAAW,GAAGH,IAAAA,8BAAa,EAACH,MAAMM,KAAK,EAAE,IAAI,GAAG,WAAW,GAAGH,IAAAA,8BAAa,EAACH,MAAMO,SAAS,EAAE,IAAI,GAAGL,kBAAkB,WAAWF,MAAMM,KAAK,IAAI,WAAW,GAAGH,IAAAA,8BAAa,EAACH,MAAMM,KAAK,EAAE,IAAI;AAClV"}
|
@@ -30,21 +30,21 @@ const useSwitch_unstable = (props, ref)=>{
|
|
30
30
|
]
|
31
31
|
});
|
32
32
|
const id = (0, _reactUtilities.useId)('switch-', nativeProps.primary.id);
|
33
|
-
const root =
|
33
|
+
const root = _reactUtilities.slot.always(props.root, {
|
34
34
|
defaultProps: {
|
35
35
|
ref: (0, _reactTabster.useFocusWithin)(),
|
36
36
|
...nativeProps.root
|
37
37
|
},
|
38
|
-
|
38
|
+
elementType: 'div'
|
39
39
|
});
|
40
|
-
const indicator =
|
40
|
+
const indicator = _reactUtilities.slot.always(props.indicator, {
|
41
41
|
defaultProps: {
|
42
42
|
'aria-hidden': true,
|
43
43
|
children: /*#__PURE__*/ _react.createElement(_reactIcons.CircleFilled, null)
|
44
44
|
},
|
45
|
-
|
45
|
+
elementType: 'div'
|
46
46
|
});
|
47
|
-
const input =
|
47
|
+
const input = _reactUtilities.slot.always(props.input, {
|
48
48
|
defaultProps: {
|
49
49
|
checked,
|
50
50
|
defaultChecked,
|
@@ -54,24 +54,24 @@ const useSwitch_unstable = (props, ref)=>{
|
|
54
54
|
type: 'checkbox',
|
55
55
|
...nativeProps.primary
|
56
56
|
},
|
57
|
-
|
57
|
+
elementType: 'input'
|
58
58
|
});
|
59
59
|
input.onChange = (0, _reactUtilities.mergeCallbacks)(input.onChange, (ev)=>{
|
60
60
|
return onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
|
61
61
|
checked: ev.currentTarget.checked
|
62
62
|
});
|
63
63
|
});
|
64
|
-
const label =
|
64
|
+
const label = _reactUtilities.slot.optional(props.label, {
|
65
65
|
defaultProps: {
|
66
66
|
disabled,
|
67
67
|
htmlFor: id,
|
68
68
|
required,
|
69
69
|
size: 'medium'
|
70
|
-
}
|
70
|
+
},
|
71
|
+
elementType: _reactLabel.Label
|
71
72
|
});
|
72
73
|
return {
|
73
74
|
labelPosition,
|
74
|
-
//Slots definition
|
75
75
|
components: {
|
76
76
|
root: 'div',
|
77
77
|
indicator: 'div',
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useSwitch.js"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { getPartitionedNativeProps, mergeCallbacks,
|
1
|
+
{"version":3,"sources":["useSwitch.js"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { getPartitionedNativeProps, mergeCallbacks, useId, slot } 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 */ export const useSwitch_unstable = (props, ref)=>{\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, {\n supportsLabelFor: true,\n supportsRequired: true\n });\n const { checked , defaultChecked , disabled , labelPosition ='after' , onChange , required } = props;\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: [\n 'checked',\n 'defaultChecked',\n 'onChange'\n ]\n });\n const id = useId('switch-', nativeProps.primary.id);\n const root = slot.always(props.root, {\n defaultProps: {\n ref: useFocusWithin(),\n ...nativeProps.root\n },\n elementType: 'div'\n });\n const indicator = slot.always(props.indicator, {\n defaultProps: {\n 'aria-hidden': true,\n children: /*#__PURE__*/ React.createElement(CircleFilled, null)\n },\n elementType: 'div'\n });\n const input = slot.always(props.input, {\n defaultProps: {\n checked,\n defaultChecked,\n id,\n ref,\n role: 'switch',\n type: 'checkbox',\n ...nativeProps.primary\n },\n elementType: 'input'\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 = slot.optional(props.label, {\n defaultProps: {\n disabled,\n htmlFor: id,\n required,\n size: 'medium'\n },\n elementType: Label\n });\n return {\n labelPosition,\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"],"names":["useSwitch_unstable","props","ref","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","checked","defaultChecked","disabled","labelPosition","onChange","required","nativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","id","useId","primary","root","slot","always","defaultProps","useFocusWithin","elementType","indicator","children","React","createElement","CircleFilled","input","role","type","mergeCallbacks","ev","currentTarget","label","optional","htmlFor","size","Label","components"],"mappings":";;;;+BAciBA;;aAAAA;;;6DAdM;4BACuB;4BACjB;4BACP;8BACS;gCACwC;AAS5D,MAAMA,qBAAqB,CAACC,OAAOC,MAAM;IAChD,+CAA+C;IAC/CD,QAAQE,IAAAA,yCAA6B,EAACF,OAAO;QACzCG,kBAAkB,IAAI;QACtBC,kBAAkB,IAAI;IAC1B;IACA,MAAM,EAAEC,QAAO,EAAGC,eAAc,EAAGC,SAAQ,EAAGC,eAAe,QAAO,EAAGC,SAAQ,EAAGC,SAAQ,EAAG,GAAGV;IAChG,MAAMW,cAAcC,IAAAA,yCAAyB,EAAC;QAC1CZ;QACAa,oBAAoB;QACpBC,mBAAmB;YACf;YACA;YACA;SACH;IACL;IACA,MAAMC,KAAKC,IAAAA,qBAAK,EAAC,WAAWL,YAAYM,OAAO,CAACF,EAAE;IAClD,MAAMG,OAAOC,oBAAI,CAACC,MAAM,CAACpB,MAAMkB,IAAI,EAAE;QACjCG,cAAc;YACVpB,KAAKqB,IAAAA,4BAAc;YACnB,GAAGX,YAAYO,IAAI;QACvB;QACAK,aAAa;IACjB;IACA,MAAMC,YAAYL,oBAAI,CAACC,MAAM,CAACpB,MAAMwB,SAAS,EAAE;QAC3CH,cAAc;YACV,eAAe,IAAI;YACnBI,UAAU,WAAW,GAAGC,OAAMC,aAAa,CAACC,wBAAY,EAAE,IAAI;QAClE;QACAL,aAAa;IACjB;IACA,MAAMM,QAAQV,oBAAI,CAACC,MAAM,CAACpB,MAAM6B,KAAK,EAAE;QACnCR,cAAc;YACVhB;YACAC;YACAS;YACAd;YACA6B,MAAM;YACNC,MAAM;YACN,GAAGpB,YAAYM,OAAO;QAC1B;QACAM,aAAa;IACjB;IACAM,MAAMpB,QAAQ,GAAGuB,IAAAA,8BAAc,EAACH,MAAMpB,QAAQ,EAAE,CAACwB,KAAK;QAClD,OAAOxB,aAAa,IAAI,IAAIA,aAAa,KAAK,IAAI,KAAK,IAAIA,SAASwB,IAAI;YACpE5B,SAAS4B,GAAGC,aAAa,CAAC7B,OAAO;QACrC,EAAE;IACN;IACA,MAAM8B,QAAQhB,oBAAI,CAACiB,QAAQ,CAACpC,MAAMmC,KAAK,EAAE;QACrCd,cAAc;YACVd;YACA8B,SAAStB;YACTL;YACA4B,MAAM;QACV;QACAf,aAAagB,iBAAK;IACtB;IACA,OAAO;QACH/B;QACAgC,YAAY;YACRtB,MAAM;YACNM,WAAW;YACXK,OAAO;YACPM,OAAOI,iBAAK;QAChB;QACArB;QACAM;QACAK;QACAM;IACJ;AACJ"}
|
@@ -27,12 +27,12 @@ const trackHeight = 20;
|
|
27
27
|
const trackWidth = 40;
|
28
28
|
const thumbSize = trackHeight - spaceBetweenThumbAndTrack;
|
29
29
|
const useRootBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("rugt7u1", "rqv95o1", [
|
30
|
-
".rugt7u1{
|
30
|
+
".rugt7u1{align-items:flex-start;box-sizing:border-box;display:inline-flex;position:relative;}",
|
31
31
|
".rugt7u1:focus{outline-style:none;}",
|
32
32
|
".rugt7u1:focus-visible{outline-style:none;}",
|
33
33
|
".rugt7u1[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
|
34
34
|
".rugt7u1[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:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
|
35
|
-
".rqv95o1{
|
35
|
+
".rqv95o1{align-items:flex-start;box-sizing:border-box;display:inline-flex;position:relative;}",
|
36
36
|
".rqv95o1:focus{outline-style:none;}",
|
37
37
|
".rqv95o1:focus-visible{outline-style:none;}",
|
38
38
|
".rqv95o1[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
|
@@ -44,15 +44,19 @@ const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
|
44
44
|
}
|
45
45
|
}, {
|
46
46
|
d: [
|
47
|
-
".f1vx9l62{
|
47
|
+
".f1vx9l62{flex-direction:column;}"
|
48
|
+
]
|
49
|
+
});
|
50
|
+
const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("r13wlxb8", null, {
|
51
|
+
r: [
|
52
|
+
".r13wlxb8{border-radius:var(--borderRadiusCircular);border:1px solid;line-height:0;box-sizing:border-box;fill:currentColor;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;}",
|
53
|
+
".r13wlxb8>*{transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:transform;}"
|
54
|
+
],
|
55
|
+
s: [
|
56
|
+
"@media screen and (prefers-reduced-motion: reduce){.r13wlxb8{transition-duration:0.01ms;}}",
|
57
|
+
"@media screen and (prefers-reduced-motion: reduce){.r13wlxb8>*{transition-duration:0.01ms;}}"
|
48
58
|
]
|
49
59
|
});
|
50
|
-
const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("r13wlxb8", null, [
|
51
|
-
".r13wlxb8{border-radius:var(--borderRadiusCircular);border:1px solid;line-height:0;box-sizing:border-box;fill:currentColor;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:18px;height:20px;margin:var(--spacingVerticalS) var(--spacingHorizontalS);pointer-events:none;transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:background,border,color;width:40px;}",
|
52
|
-
"@media screen and (prefers-reduced-motion: reduce){.r13wlxb8{transition-duration:0.01ms;}}",
|
53
|
-
".r13wlxb8>*{transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:transform;}",
|
54
|
-
"@media screen and (prefers-reduced-motion: reduce){.r13wlxb8>*{transition-duration:0.01ms;}}"
|
55
|
-
]);
|
56
60
|
const useIndicatorStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
57
61
|
labelAbove: {
|
58
62
|
B6of3ja: "f1hu3pq6"
|
@@ -62,38 +66,42 @@ const useIndicatorStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
|
62
66
|
".f1hu3pq6{margin-top:0;}"
|
63
67
|
]
|
64
68
|
});
|
65
|
-
const useInputBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("rw4brat", "r1f4bxyr",
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
69
|
+
const useInputBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("rw4brat", "r1f4bxyr", {
|
70
|
+
r: [
|
71
|
+
".rw4brat{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}",
|
72
|
+
".rw4brat:checked~.fui-Switch__indicator>*{transform:translateX(20px);}",
|
73
|
+
".rw4brat:disabled{cursor:default;}",
|
74
|
+
".rw4brat:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}",
|
75
|
+
".rw4brat:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}",
|
76
|
+
".rw4brat:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}",
|
77
|
+
".rw4brat:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}",
|
78
|
+
".rw4brat:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}",
|
79
|
+
".rw4brat:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}",
|
80
|
+
".rw4brat:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}",
|
81
|
+
".rw4brat:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}",
|
82
|
+
".rw4brat:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}",
|
83
|
+
".rw4brat:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}",
|
84
|
+
".rw4brat:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}",
|
85
|
+
".r1f4bxyr{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}",
|
86
|
+
".r1f4bxyr:checked~.fui-Switch__indicator>*{transform:translateX(-20px);}",
|
87
|
+
".r1f4bxyr:disabled{cursor:default;}",
|
88
|
+
".r1f4bxyr:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}",
|
89
|
+
".r1f4bxyr:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}",
|
90
|
+
".r1f4bxyr:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}",
|
91
|
+
".r1f4bxyr:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}",
|
92
|
+
".r1f4bxyr:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}",
|
93
|
+
".r1f4bxyr:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}",
|
94
|
+
".r1f4bxyr:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}",
|
95
|
+
".r1f4bxyr:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}",
|
96
|
+
".r1f4bxyr:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}",
|
97
|
+
".r1f4bxyr:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}",
|
98
|
+
".r1f4bxyr:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}"
|
99
|
+
],
|
100
|
+
s: [
|
101
|
+
"@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;}}",
|
102
|
+
"@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;}}"
|
103
|
+
]
|
104
|
+
});
|
97
105
|
const useInputStyles = /*#__PURE__*/ (0, _react["__styles"])({
|
98
106
|
before: {
|
99
107
|
j35jbq: [
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useSwitchStyles.styles.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(\"rugt7u1\", \"rqv95o1\", [\".rugt7u1{-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;}\", \".rugt7u1:focus{outline-style:none;}\", \".rugt7u1:focus-visible{outline-style:none;}\", \".rugt7u1[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".rugt7u1[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:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".rqv95o1{-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;}\", \".rqv95o1:focus{outline-style:none;}\", \".rqv95o1:focus-visible{outline-style:none;}\", \".rqv95o1[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".rqv95o1[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:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"]);\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.styles.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":["useSwitchStyles.styles.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(\"rugt7u1\", \"rqv95o1\", [\".rugt7u1{align-items:flex-start;box-sizing:border-box;display:inline-flex;position:relative;}\", \".rugt7u1:focus{outline-style:none;}\", \".rugt7u1:focus-visible{outline-style:none;}\", \".rugt7u1[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".rugt7u1[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:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".rqv95o1{align-items:flex-start;box-sizing:border-box;display:inline-flex;position:relative;}\", \".rqv95o1:focus{outline-style:none;}\", \".rqv95o1:focus-visible{outline-style:none;}\", \".rqv95o1[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".rqv95o1[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:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"]);\nconst useRootStyles = /*#__PURE__*/__styles({\n vertical: {\n Beiy3e4: \"f1vx9l62\"\n }\n}, {\n d: [\".f1vx9l62{flex-direction:column;}\"]\n});\nconst useIndicatorBaseClassName = /*#__PURE__*/__resetStyles(\"r13wlxb8\", null, {\n r: [\".r13wlxb8{border-radius:var(--borderRadiusCircular);border:1px solid;line-height:0;box-sizing:border-box;fill:currentColor;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;}\", \".r13wlxb8>*{transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:transform;}\"],\n s: [\"@media screen and (prefers-reduced-motion: reduce){.r13wlxb8{transition-duration:0.01ms;}}\", \"@media screen and (prefers-reduced-motion: reduce){.r13wlxb8>*{transition-duration:0.01ms;}}\"]\n});\nconst useIndicatorStyles = /*#__PURE__*/__styles({\n labelAbove: {\n B6of3ja: \"f1hu3pq6\"\n }\n}, {\n d: [\".f1hu3pq6{margin-top:0;}\"]\n});\nconst useInputBaseClassName = /*#__PURE__*/__resetStyles(\"rw4brat\", \"r1f4bxyr\", {\n r: [\".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>*{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);}\", \".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>*{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);}\"],\n s: [\"@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;}}\", \"@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;}}\"]\n});\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.styles.js.map"],"names":["switchClassNames","switchClassName","useSwitchStyles_unstable","root","indicator","input","label","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","__resetStyles","useRootStyles","__styles","vertical","Beiy3e4","d","useIndicatorBaseClassName","r","s","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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"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-switch",
|
3
|
-
"version": "9.1.
|
3
|
+
"version": "9.1.29",
|
4
4
|
"description": "Fluent UI React Switch component.",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -33,15 +33,15 @@
|
|
33
33
|
"@fluentui/scripts-tasks": "*"
|
34
34
|
},
|
35
35
|
"dependencies": {
|
36
|
-
"@fluentui/react-field": "^9.1.
|
36
|
+
"@fluentui/react-field": "^9.1.16",
|
37
37
|
"@fluentui/react-icons": "^2.0.207",
|
38
|
-
"@fluentui/react-jsx-runtime": "9.0.0-alpha.
|
39
|
-
"@fluentui/react-label": "^9.1.
|
40
|
-
"@fluentui/react-shared-contexts": "^9.7.
|
41
|
-
"@fluentui/react-tabster": "^9.
|
42
|
-
"@fluentui/react-theme": "^9.1.
|
43
|
-
"@fluentui/react-utilities": "^9.
|
44
|
-
"@griffel/react": "^1.5.
|
38
|
+
"@fluentui/react-jsx-runtime": "9.0.0-alpha.14",
|
39
|
+
"@fluentui/react-label": "^9.1.24",
|
40
|
+
"@fluentui/react-shared-contexts": "^9.7.2",
|
41
|
+
"@fluentui/react-tabster": "^9.12.1",
|
42
|
+
"@fluentui/react-theme": "^9.1.11",
|
43
|
+
"@fluentui/react-utilities": "^9.11.0",
|
44
|
+
"@griffel/react": "^1.5.14",
|
45
45
|
"@swc/helpers": "^0.4.14"
|
46
46
|
},
|
47
47
|
"peerDependencies": {
|