@fluentui/react-switch 9.0.3 → 9.0.4
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 +57 -4
- package/CHANGELOG.md +19 -5
- package/lib/components/Switch/useSwitch.js +5 -1
- package/lib/components/Switch/useSwitch.js.map +1 -1
- package/lib/components/Switch/useSwitchStyles.js +41 -32
- package/lib/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitch.js +6 -1
- package/lib-commonjs/components/Switch/useSwitch.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.js +41 -32
- package/lib-commonjs/components/Switch/useSwitchStyles.js.map +1 -1
- package/package.json +7 -6
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,60 @@
|
|
|
2
2
|
"name": "@fluentui/react-switch",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Wed, 03 Aug 2022 16:00:29 GMT",
|
|
6
|
+
"tag": "@fluentui/react-switch_v9.0.4",
|
|
7
|
+
"version": "9.0.4",
|
|
8
|
+
"comments": {
|
|
9
|
+
"none": [
|
|
10
|
+
{
|
|
11
|
+
"author": "lingfangao@hotmail.com",
|
|
12
|
+
"package": "@fluentui/react-switch",
|
|
13
|
+
"commit": "99cc385631d04a76ee10ebc143cb9fecd99640b6",
|
|
14
|
+
"comment": "chore: Add `prerelease` as disallowed changetype for 9.0.0 packages"
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
"patch": [
|
|
18
|
+
{
|
|
19
|
+
"author": "lingfangao@hotmail.com",
|
|
20
|
+
"package": "@fluentui/react-switch",
|
|
21
|
+
"commit": "71590ea6aeab8ce24d8c8e50e0ee80ece81a4392",
|
|
22
|
+
"comment": "refactor: use `useFocusWithin` hook for :focus-within styles"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"author": "miroslav.stastny@microsoft.com",
|
|
26
|
+
"package": "@fluentui/react-switch",
|
|
27
|
+
"commit": "08563664778fd80284561d3c9d254307a0a32362",
|
|
28
|
+
"comment": "chore: Bump Griffel dependencies"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"author": "sarah.higley@microsoft.com",
|
|
32
|
+
"package": "@fluentui/react-switch",
|
|
33
|
+
"commit": "c66808887bcd7fd150c22eda462b325075742694",
|
|
34
|
+
"comment": "bugfix: add reduced motion styles for avatar, spinner, switch, and input focus styles"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"author": "beachball",
|
|
38
|
+
"package": "@fluentui/react-switch",
|
|
39
|
+
"comment": "Bump @fluentui/react-label to v9.0.4",
|
|
40
|
+
"commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"author": "beachball",
|
|
44
|
+
"package": "@fluentui/react-switch",
|
|
45
|
+
"comment": "Bump @fluentui/react-tabster to v9.1.0",
|
|
46
|
+
"commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"author": "beachball",
|
|
50
|
+
"package": "@fluentui/react-switch",
|
|
51
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
|
|
52
|
+
"commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
|
|
53
|
+
}
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"date": "Thu, 14 Jul 2022 21:21:05 GMT",
|
|
6
59
|
"tag": "@fluentui/react-switch_v9.0.3",
|
|
7
60
|
"version": "9.0.3",
|
|
8
61
|
"comments": {
|
|
@@ -17,19 +70,19 @@
|
|
|
17
70
|
"author": "beachball",
|
|
18
71
|
"package": "@fluentui/react-switch",
|
|
19
72
|
"comment": "Bump @fluentui/react-label to v9.0.3",
|
|
20
|
-
"commit": "
|
|
73
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
|
21
74
|
},
|
|
22
75
|
{
|
|
23
76
|
"author": "beachball",
|
|
24
77
|
"package": "@fluentui/react-switch",
|
|
25
78
|
"comment": "Bump @fluentui/react-tabster to v9.0.3",
|
|
26
|
-
"commit": "
|
|
79
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
|
27
80
|
},
|
|
28
81
|
{
|
|
29
82
|
"author": "beachball",
|
|
30
83
|
"package": "@fluentui/react-switch",
|
|
31
84
|
"comment": "Bump @fluentui/react-utilities to v9.0.2",
|
|
32
|
-
"commit": "
|
|
85
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
|
33
86
|
}
|
|
34
87
|
]
|
|
35
88
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,20 +1,34 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-switch
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 03 Aug 2022 16:00:29 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.4)
|
|
8
|
+
|
|
9
|
+
Wed, 03 Aug 2022 16:00:29 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.3..@fluentui/react-switch_v9.0.4)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- refactor: use `useFocusWithin` hook for :focus-within styles ([PR #24154](https://github.com/microsoft/fluentui/pull/24154) by lingfangao@hotmail.com)
|
|
15
|
+
- chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
|
|
16
|
+
- bugfix: add reduced motion styles for avatar, spinner, switch, and input focus styles ([PR #23788](https://github.com/microsoft/fluentui/pull/23788) by sarah.higley@microsoft.com)
|
|
17
|
+
- Bump @fluentui/react-label to v9.0.4 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tabster to v9.1.0 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
|
|
20
|
+
|
|
7
21
|
## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.3)
|
|
8
22
|
|
|
9
|
-
Thu, 14 Jul 2022 21:
|
|
23
|
+
Thu, 14 Jul 2022 21:21:05 GMT
|
|
10
24
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.2..@fluentui/react-switch_v9.0.3)
|
|
11
25
|
|
|
12
26
|
### Patches
|
|
13
27
|
|
|
14
28
|
- fix: Fixing bad version bump of @fluentui/react-utilities. ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by Humberto.Morimoto@microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-label to v9.0.3 ([PR #
|
|
16
|
-
- Bump @fluentui/react-tabster to v9.0.3 ([PR #
|
|
17
|
-
- Bump @fluentui/react-utilities to v9.0.2 ([PR #
|
|
29
|
+
- Bump @fluentui/react-label to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
|
30
|
+
- Bump @fluentui/react-tabster to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
|
31
|
+
- Bump @fluentui/react-utilities to v9.0.2 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
|
18
32
|
|
|
19
33
|
## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.2)
|
|
20
34
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { CircleFilled } from '@fluentui/react-icons';
|
|
3
3
|
import { Label } from '@fluentui/react-label';
|
|
4
|
+
import { useFocusWithin } from '@fluentui/react-tabster';
|
|
4
5
|
import { getPartitionedNativeProps, resolveShorthand, useId, useMergedEventCallbacks } from '@fluentui/react-utilities';
|
|
5
6
|
/**
|
|
6
7
|
* Create the state required to render Switch.
|
|
@@ -28,7 +29,10 @@ export const useSwitch_unstable = (props, ref) => {
|
|
|
28
29
|
});
|
|
29
30
|
const id = useId('switch-', nativeProps.primary.id);
|
|
30
31
|
const root = resolveShorthand(props.root, {
|
|
31
|
-
defaultProps:
|
|
32
|
+
defaultProps: {
|
|
33
|
+
ref: useFocusWithin(),
|
|
34
|
+
...nativeProps.root
|
|
35
|
+
},
|
|
32
36
|
required: true
|
|
33
37
|
});
|
|
34
38
|
const indicator = resolveShorthand(props.indicator, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Switch/useSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,YAAT,QAA6B,uBAA7B;AACA,SAAS,KAAT,QAAsB,uBAAtB;AACA,SAAS,yBAAT,EAAoC,gBAApC,EAAsD,KAAtD,EAA6D,uBAA7D,QAA4F,2BAA5F;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAsE;EACtG,MAAM;IAAE,OAAF;IAAW,cAAX;IAA2B,QAA3B;IAAqC,aAAa,GAAG,OAArD;IAA8D,QAA9D;IAAwE;EAAxE,IAAqF,KAA3F;EAEA,MAAM,WAAW,GAAG,yBAAyB,CAAC;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,OAFwB;IAG5C,iBAAiB,EAAE,CAAC,SAAD,EAAY,gBAAZ,EAA8B,UAA9B;EAHyB,CAAD,CAA7C;EAMA,MAAM,EAAE,GAAG,KAAK,CAAC,SAAD,EAAY,WAAW,CAAC,OAAZ,CAAoB,EAAhC,CAAhB;EAEA,MAAM,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;IACxC,YAAY,EAAE,WAAW,CAAC,
|
|
1
|
+
{"version":3,"sources":["components/Switch/useSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,YAAT,QAA6B,uBAA7B;AACA,SAAS,KAAT,QAAsB,uBAAtB;AACA,SAAS,cAAT,QAA+B,yBAA/B;AACA,SAAS,yBAAT,EAAoC,gBAApC,EAAsD,KAAtD,EAA6D,uBAA7D,QAA4F,2BAA5F;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAsE;EACtG,MAAM;IAAE,OAAF;IAAW,cAAX;IAA2B,QAA3B;IAAqC,aAAa,GAAG,OAArD;IAA8D,QAA9D;IAAwE;EAAxE,IAAqF,KAA3F;EAEA,MAAM,WAAW,GAAG,yBAAyB,CAAC;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,OAFwB;IAG5C,iBAAiB,EAAE,CAAC,SAAD,EAAY,gBAAZ,EAA8B,UAA9B;EAHyB,CAAD,CAA7C;EAMA,MAAM,EAAE,GAAG,KAAK,CAAC,SAAD,EAAY,WAAW,CAAC,OAAZ,CAAoB,EAAhC,CAAhB;EAEA,MAAM,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;IACxC,YAAY,EAAE;MAAE,GAAG,EAAE,cAAc,EAArB;MAAyC,GAAG,WAAW,CAAC;IAAxD,CAD0B;IAExC,QAAQ,EAAE;EAF8B,CAAb,CAA7B;EAKA,MAAM,SAAS,GAAG,gBAAgB,CAAC,KAAK,CAAC,SAAP,EAAkB;IAClD,YAAY,EAAE;MACZ,eAAe,IADH;MAEZ,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,YAAD,EAAa,IAAb;IAFE,CADoC;IAKlD,QAAQ,EAAE;EALwC,CAAlB,CAAlC;EAQA,MAAM,KAAK,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;IAC1C,YAAY,EAAE;MACZ,OADY;MAEZ,cAFY;MAGZ,EAHY;MAIZ,GAJY;MAKZ,IAAI,EAAE,QALM;MAMZ,IAAI,EAAE,UANM;MAOZ,GAAG,WAAW,CAAC;IAPH,CAD4B;IAU1C,QAAQ,EAAE;EAVgC,CAAd,CAA9B;EAYA,KAAK,CAAC,QAAN,GAAiB,uBAAuB,CAAC,KAAK,CAAC,QAAP,EAAiB,EAAE,IAAI,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;IAAE,OAAO,EAAE,EAAE,CAAC,aAAH,CAAiB;EAA5B,CAAP,CAA/B,CAAxC;EAEA,MAAM,KAAK,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;IAC1C,YAAY,EAAE;MACZ,QADY;MAEZ,OAAO,EAAE,EAFG;MAGZ,QAHY;MAIZ,IAAI,EAAE;IAJM;EAD4B,CAAd,CAA9B;EASA,OAAO;IACL,aADK;IAGL;IACA,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,SAAS,EAAE,KAFD;MAGV,KAAK,EAAE,OAHG;MAIV,KAAK,EAAE;IAJG,CAJP;IAWL,IAXK;IAYL,SAZK;IAaL,KAbK;IAcL;EAdK,CAAP;AAgBD,CA/DM","sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { getPartitionedNativeProps, resolveShorthand, useId, useMergedEventCallbacks } from '@fluentui/react-utilities';\nimport type { SwitchProps, SwitchState } from './Switch.types';\n\n/**\n * Create the state required to render Switch.\n *\n * The returned state can be modified with hooks such as useSwitchStyles_unstable,\n * before being passed to renderSwitch_unstable.\n *\n * @param props - props from this instance of Switch\n * @param ref - reference to `<input>` element of Switch\n */\nexport const useSwitch_unstable = (props: SwitchProps, ref: React.Ref<HTMLInputElement>): SwitchState => {\n const { checked, defaultChecked, disabled, labelPosition = 'after', onChange, required } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n });\n\n const id = useId('switch-', nativeProps.primary.id);\n\n const root = resolveShorthand(props.root, {\n defaultProps: { ref: useFocusWithin<HTMLDivElement>(), ...nativeProps.root },\n required: true,\n });\n\n const indicator = resolveShorthand(props.indicator, {\n defaultProps: {\n 'aria-hidden': true,\n children: <CircleFilled />,\n },\n required: true,\n });\n\n const input = resolveShorthand(props.input, {\n defaultProps: {\n checked,\n defaultChecked,\n id,\n ref,\n role: 'switch',\n type: 'checkbox',\n ...nativeProps.primary,\n },\n required: true,\n });\n input.onChange = useMergedEventCallbacks(input.onChange, ev => onChange?.(ev, { checked: ev.currentTarget.checked }));\n\n const label = resolveShorthand(props.label, {\n defaultProps: {\n disabled,\n htmlFor: id,\n required,\n size: 'medium',\n },\n });\n\n return {\n labelPosition,\n\n //Slots definition\n components: {\n root: 'div',\n indicator: 'div',\n input: 'input',\n label: Label,\n },\n\n root,\n indicator,\n input,\n label,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -29,42 +29,44 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
29
29
|
"uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
|
|
30
30
|
"qhf8xq": "f10pi13n",
|
|
31
31
|
"Brovlpu": "ftqa4ok",
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
32
|
+
"B486eqv": "f2hkw1w",
|
|
33
|
+
"Bgobo1x": "fo4ocm0",
|
|
34
|
+
"Jo8lrp": ["f1uvj27t", "fecisja"],
|
|
35
|
+
"Bpke50p": "f1rzrqo7",
|
|
36
|
+
"aty7ik": ["fecisja", "f1uvj27t"],
|
|
37
|
+
"hm6prv": "f1g7kvsv",
|
|
38
|
+
"Bjex43u": "fzrlbma",
|
|
39
|
+
"sr5bkg": "fj7d4uc",
|
|
40
|
+
"F8og5": "f1l6kybf",
|
|
41
|
+
"Bvc59ag": "f1p3v545",
|
|
42
|
+
"od54ob": ["f18ooxnm", "for8r4m"],
|
|
43
|
+
"Bi136el": "f1dek44a",
|
|
44
|
+
"B3l1rvm": ["for8r4m", "f18ooxnm"],
|
|
45
|
+
"e0acac": "fo0rwiw",
|
|
46
|
+
"vp2hgr": ["f1y3sdd5", "f1xpp2ec"],
|
|
47
|
+
"h2c9ne": "f10zrybh",
|
|
48
|
+
"Bvfpqjq": ["f1xpp2ec", "f1y3sdd5"],
|
|
49
|
+
"Bd8parj": ["ft333ue", "f16uznis"],
|
|
50
|
+
"c00pmh": ["f16uznis", "ft333ue"],
|
|
51
|
+
"Bvs3b7t": ["f1sbsurx", "f1d2cokh"],
|
|
52
|
+
"Bnhloe": ["f1d2cokh", "f1sbsurx"],
|
|
53
|
+
"Hpy7w9": "fxx05f1",
|
|
54
|
+
"Bmdll0j": ["f1ph57ev", "fiz0wg0"],
|
|
55
|
+
"w8a68g": "f1tu679n",
|
|
56
|
+
"w65o9e": ["fiz0wg0", "f1ph57ev"],
|
|
57
|
+
"Bnvy6ax": "fi7ex6y",
|
|
58
|
+
"y8tio2": "f17j406i",
|
|
59
|
+
"Fgxkz8": ["fbegtek", "f21ipxl"],
|
|
60
|
+
"Bpakkmj": ["f21ipxl", "fbegtek"]
|
|
60
61
|
},
|
|
61
62
|
"vertical": {
|
|
62
63
|
"Beiy3e4": "f1vx9l62",
|
|
63
64
|
"z8tnut": "f1ywm7hm"
|
|
64
65
|
}
|
|
65
66
|
}, {
|
|
66
|
-
"d": [".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f10pi13n{position:relative;}", "
|
|
67
|
-
"f": [".ftqa4ok:focus{outline-style:none;}"]
|
|
67
|
+
"d": [".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f10pi13n{position:relative;}", ".fui-FluentProvider .fo4ocm0.fui-focus-within:focus-within{border-top-color:transparent;}", ".fui-FluentProvider .f1uvj27t.fui-focus-within:focus-within{border-right-color:transparent;}", ".fui-FluentProvider .fecisja.fui-focus-within:focus-within{border-left-color:transparent;}", ".fui-FluentProvider .f1rzrqo7.fui-focus-within:focus-within{border-bottom-color:transparent;}", ".fui-FluentProvider .f1g7kvsv.fui-focus-within:focus-within::after{content:\"\";}", ".fui-FluentProvider .fzrlbma.fui-focus-within:focus-within::after{position:absolute;}", ".fui-FluentProvider .fj7d4uc.fui-focus-within:focus-within::after{pointer-events:none;}", ".fui-FluentProvider .f1l6kybf.fui-focus-within:focus-within::after{z-index:1;}", ".fui-FluentProvider .f1p3v545.fui-focus-within:focus-within::after{border-top-style:solid;}", ".fui-FluentProvider .f18ooxnm.fui-focus-within:focus-within::after{border-right-style:solid;}", ".fui-FluentProvider .for8r4m.fui-focus-within:focus-within::after{border-left-style:solid;}", ".fui-FluentProvider .f1dek44a.fui-focus-within:focus-within::after{border-bottom-style:solid;}", ".fui-FluentProvider .fo0rwiw.fui-focus-within:focus-within::after{border-top-width:2px;}", ".fui-FluentProvider .f1y3sdd5.fui-focus-within:focus-within::after{border-right-width:2px;}", ".fui-FluentProvider .f1xpp2ec.fui-focus-within:focus-within::after{border-left-width:2px;}", ".fui-FluentProvider .f10zrybh.fui-focus-within:focus-within::after{border-bottom-width:2px;}", ".fui-FluentProvider .ft333ue.fui-focus-within:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .f16uznis.fui-focus-within:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .f1sbsurx.fui-focus-within:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .f1d2cokh.fui-focus-within:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .fxx05f1.fui-focus-within:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .f1ph57ev.fui-focus-within:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .fiz0wg0.fui-focus-within:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .f1tu679n.fui-focus-within:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .fi7ex6y.fui-focus-within:focus-within::after{top:-2px;}", ".fui-FluentProvider .f17j406i.fui-focus-within:focus-within::after{bottom:-2px;}", ".fui-FluentProvider .fbegtek.fui-focus-within:focus-within::after{left:-2px;}", ".fui-FluentProvider .f21ipxl.fui-focus-within:focus-within::after{right:-2px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}"],
|
|
68
|
+
"f": [".ftqa4ok:focus{outline-style:none;}"],
|
|
69
|
+
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
68
70
|
});
|
|
69
71
|
|
|
70
72
|
const useIndicatorStyles = /*#__PURE__*/__styles({
|
|
@@ -91,12 +93,19 @@ const useIndicatorStyles = /*#__PURE__*/__styles({
|
|
|
91
93
|
"Bkqvd7p": "f1e1a42z",
|
|
92
94
|
"Bmy1vo4": "fo99fu7",
|
|
93
95
|
"a9b677": "feqmc2u",
|
|
96
|
+
"Hwfdqs": "f1onx1g3",
|
|
94
97
|
"Hkqiji": "f1wkgtgk",
|
|
95
98
|
"Bgrs90m": "f17f8g0y",
|
|
96
|
-
"B0zx559": "f1uwej41"
|
|
99
|
+
"B0zx559": "f1uwej41",
|
|
100
|
+
"c0im90": "fpz7fqq"
|
|
97
101
|
}
|
|
98
102
|
}, {
|
|
99
|
-
"d": [".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1w9h62z{fill:currentColor;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".fg38ndl{font-size:18px;}", ".fjamq6b{height:20px;}", ".f1aehjj5{pointer-events:none;}", ".f1bnoopa{transition-duration:200ms;}", ".f1e1a42z{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".fo99fu7{transition-property:background,border,color;}", ".feqmc2u{width:40px;}", ".f1wkgtgk>*{transition-duration:200ms;}", ".f17f8g0y>*{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".f1uwej41>*{transition-property:transform;}"]
|
|
103
|
+
"d": [".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1w9h62z{fill:currentColor;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".fg38ndl{font-size:18px;}", ".fjamq6b{height:20px;}", ".f1aehjj5{pointer-events:none;}", ".f1bnoopa{transition-duration:200ms;}", ".f1e1a42z{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".fo99fu7{transition-property:background,border,color;}", ".feqmc2u{width:40px;}", ".f1wkgtgk>*{transition-duration:200ms;}", ".f17f8g0y>*{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".f1uwej41>*{transition-property:transform;}"],
|
|
104
|
+
"m": [["@media screen and (prefers-reduced-motion: reduce){.f1onx1g3{transition-duration:0.01ms;}}", {
|
|
105
|
+
"m": "screen and (prefers-reduced-motion: reduce)"
|
|
106
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.fpz7fqq>*{transition-duration:0.01ms;}}", {
|
|
107
|
+
"m": "screen and (prefers-reduced-motion: reduce)"
|
|
108
|
+
}]]
|
|
100
109
|
});
|
|
101
110
|
|
|
102
111
|
const useInputStyles = /*#__PURE__*/__styles({
|
|
@@ -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;EAC3D,IAAI,EAAE,YADqD;EAE3D,SAAS,EAAE,uBAFgD;EAG3D,KAAK,EAAE,mBAHoD;EAI3D,KAAK,EAAE;AAJoD,CAAtD;AAOP;;AAEG;;AACH,OAAO,MAAM,eAAe,GAAG,gBAAgB,CAAC,IAAzC,C,CAEP;;AACA,MAAM,yBAAyB,GAAG,CAAlC;AACA,MAAM,WAAW,GAAG,EAApB;AACA,MAAM,UAAU,GAAG,EAAnB;AACA,MAAM,SAAS,GAAG,WAAW,GAAG,yBAAhC;;AAEA,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;AAAA,EAAtB;;AAiBA,MAAM,kBAAkB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA3B;;
|
|
1
|
+
{"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n vertical: {\n flexDirection: 'column',\n paddingTop: tokens.spacingVerticalXS,\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('1px'),\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n pointerEvents: 'none',\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n '> *': {\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'transform',\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n left: 0,\n ...shorthands.margin(0),\n opacity: 0,\n position: 'absolute',\n top: 0,\n width: '100%',\n\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`,\n },\n },\n },\n\n // Disabled (both checked and unchecked)\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Enabled and checked\n ':enabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n },\n\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n },\n },\n },\n\n highContrast: {\n '@media (forced-colors: active)': {\n ':disabled': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n ...shorthands.borderColor('GrayText'),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText',\n },\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n above: {\n marginBottom: tokens.spacingVerticalXS,\n },\n after: {\n marginLeft: tokens.spacingHorizontalM,\n },\n before: {\n marginRight: tokens.spacingHorizontalM,\n },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n const rootStyles = useRootStyles();\n const indicatorStyles = useIndicatorStyles();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n\n const { labelPosition } = state;\n\n state.root.className = mergeClasses(\n switchClassNames.root,\n rootStyles.base,\n labelPosition === 'above' && rootStyles.vertical,\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n state.input.className = mergeClasses(\n switchClassNames.input,\n inputStyles.base,\n inputStyles.highContrast,\n state.input.className,\n );\n\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles[labelPosition], state.label.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -11,6 +11,8 @@ const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
|
|
|
11
11
|
|
|
12
12
|
const react_label_1 = /*#__PURE__*/require("@fluentui/react-label");
|
|
13
13
|
|
|
14
|
+
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
15
|
+
|
|
14
16
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
15
17
|
/**
|
|
16
18
|
* Create the state required to render Switch.
|
|
@@ -39,7 +41,10 @@ const useSwitch_unstable = (props, ref) => {
|
|
|
39
41
|
});
|
|
40
42
|
const id = react_utilities_1.useId('switch-', nativeProps.primary.id);
|
|
41
43
|
const root = react_utilities_1.resolveShorthand(props.root, {
|
|
42
|
-
defaultProps:
|
|
44
|
+
defaultProps: {
|
|
45
|
+
ref: react_tabster_1.useFocusWithin(),
|
|
46
|
+
...nativeProps.root
|
|
47
|
+
},
|
|
43
48
|
required: true
|
|
44
49
|
});
|
|
45
50
|
const indicator = react_utilities_1.resolveShorthand(props.indicator, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Switch/useSwitch.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAsE;EACtG,MAAM;IAAE,OAAF;IAAW,cAAX;IAA2B,QAA3B;IAAqC,aAAa,GAAG,OAArD;IAA8D,QAA9D;IAAwE;EAAxE,IAAqF,KAA3F;EAEA,MAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,OAFwB;IAG5C,iBAAiB,EAAE,CAAC,SAAD,EAAY,gBAAZ,EAA8B,UAA9B;EAHyB,CAA1B,CAApB;EAMA,MAAM,EAAE,GAAG,iBAAA,CAAA,KAAA,CAAM,SAAN,EAAiB,WAAW,CAAC,OAAZ,CAAoB,EAArC,CAAX;EAEA,MAAM,IAAI,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;IACxC,YAAY,EAAE,WAAW,CAAC,
|
|
1
|
+
{"version":3,"sources":["components/Switch/useSwitch.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAsE;EACtG,MAAM;IAAE,OAAF;IAAW,cAAX;IAA2B,QAA3B;IAAqC,aAAa,GAAG,OAArD;IAA8D,QAA9D;IAAwE;EAAxE,IAAqF,KAA3F;EAEA,MAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,OAFwB;IAG5C,iBAAiB,EAAE,CAAC,SAAD,EAAY,gBAAZ,EAA8B,UAA9B;EAHyB,CAA1B,CAApB;EAMA,MAAM,EAAE,GAAG,iBAAA,CAAA,KAAA,CAAM,SAAN,EAAiB,WAAW,CAAC,OAAZ,CAAoB,EAArC,CAAX;EAEA,MAAM,IAAI,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;IACxC,YAAY,EAAE;MAAE,GAAG,EAAE,eAAA,CAAA,cAAA,EAAP;MAAyC,GAAG,WAAW,CAAC;IAAxD,CAD0B;IAExC,QAAQ,EAAE;EAF8B,CAA7B,CAAb;EAKA,MAAM,SAAS,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,SAAvB,EAAkC;IAClD,YAAY,EAAE;MACZ,eAAe,IADH;MAEZ,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,YAAD,EAAa,IAAb;IAFE,CADoC;IAKlD,QAAQ,EAAE;EALwC,CAAlC,CAAlB;EAQA,MAAM,KAAK,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;IAC1C,YAAY,EAAE;MACZ,OADY;MAEZ,cAFY;MAGZ,EAHY;MAIZ,GAJY;MAKZ,IAAI,EAAE,QALM;MAMZ,IAAI,EAAE,UANM;MAOZ,GAAG,WAAW,CAAC;IAPH,CAD4B;IAU1C,QAAQ,EAAE;EAVgC,CAA9B,CAAd;EAYA,KAAK,CAAC,QAAN,GAAiB,iBAAA,CAAA,uBAAA,CAAwB,KAAK,CAAC,QAA9B,EAAwC,EAAE,IAAI,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;IAAE,OAAO,EAAE,EAAE,CAAC,aAAH,CAAiB;EAA5B,CAAP,CAAtD,CAAjB;EAEA,MAAM,KAAK,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;IAC1C,YAAY,EAAE;MACZ,QADY;MAEZ,OAAO,EAAE,EAFG;MAGZ,QAHY;MAIZ,IAAI,EAAE;IAJM;EAD4B,CAA9B,CAAd;EASA,OAAO;IACL,aADK;IAGL;IACA,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,SAAS,EAAE,KAFD;MAGV,KAAK,EAAE,OAHG;MAIV,KAAK,EAAE,aAAA,CAAA;IAJG,CAJP;IAWL,IAXK;IAYL,SAZK;IAaL,KAbK;IAcL;EAdK,CAAP;AAgBD,CA/DM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { getPartitionedNativeProps, resolveShorthand, useId, useMergedEventCallbacks } from '@fluentui/react-utilities';\nimport type { SwitchProps, SwitchState } from './Switch.types';\n\n/**\n * Create the state required to render Switch.\n *\n * The returned state can be modified with hooks such as useSwitchStyles_unstable,\n * before being passed to renderSwitch_unstable.\n *\n * @param props - props from this instance of Switch\n * @param ref - reference to `<input>` element of Switch\n */\nexport const useSwitch_unstable = (props: SwitchProps, ref: React.Ref<HTMLInputElement>): SwitchState => {\n const { checked, defaultChecked, disabled, labelPosition = 'after', onChange, required } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n });\n\n const id = useId('switch-', nativeProps.primary.id);\n\n const root = resolveShorthand(props.root, {\n defaultProps: { ref: useFocusWithin<HTMLDivElement>(), ...nativeProps.root },\n required: true,\n });\n\n const indicator = resolveShorthand(props.indicator, {\n defaultProps: {\n 'aria-hidden': true,\n children: <CircleFilled />,\n },\n required: true,\n });\n\n const input = resolveShorthand(props.input, {\n defaultProps: {\n checked,\n defaultChecked,\n id,\n ref,\n role: 'switch',\n type: 'checkbox',\n ...nativeProps.primary,\n },\n required: true,\n });\n input.onChange = useMergedEventCallbacks(input.onChange, ev => onChange?.(ev, { checked: ev.currentTarget.checked }));\n\n const label = resolveShorthand(props.label, {\n defaultProps: {\n disabled,\n htmlFor: id,\n required,\n size: 'medium',\n },\n });\n\n return {\n labelPosition,\n\n //Slots definition\n components: {\n root: 'div',\n indicator: 'div',\n input: 'input',\n label: Label,\n },\n\n root,\n indicator,\n input,\n label,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -39,42 +39,44 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
39
39
|
"uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
|
|
40
40
|
"qhf8xq": "f10pi13n",
|
|
41
41
|
"Brovlpu": "ftqa4ok",
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
"
|
|
68
|
-
"
|
|
69
|
-
"
|
|
42
|
+
"B486eqv": "f2hkw1w",
|
|
43
|
+
"Bgobo1x": "fo4ocm0",
|
|
44
|
+
"Jo8lrp": ["f1uvj27t", "fecisja"],
|
|
45
|
+
"Bpke50p": "f1rzrqo7",
|
|
46
|
+
"aty7ik": ["fecisja", "f1uvj27t"],
|
|
47
|
+
"hm6prv": "f1g7kvsv",
|
|
48
|
+
"Bjex43u": "fzrlbma",
|
|
49
|
+
"sr5bkg": "fj7d4uc",
|
|
50
|
+
"F8og5": "f1l6kybf",
|
|
51
|
+
"Bvc59ag": "f1p3v545",
|
|
52
|
+
"od54ob": ["f18ooxnm", "for8r4m"],
|
|
53
|
+
"Bi136el": "f1dek44a",
|
|
54
|
+
"B3l1rvm": ["for8r4m", "f18ooxnm"],
|
|
55
|
+
"e0acac": "fo0rwiw",
|
|
56
|
+
"vp2hgr": ["f1y3sdd5", "f1xpp2ec"],
|
|
57
|
+
"h2c9ne": "f10zrybh",
|
|
58
|
+
"Bvfpqjq": ["f1xpp2ec", "f1y3sdd5"],
|
|
59
|
+
"Bd8parj": ["ft333ue", "f16uznis"],
|
|
60
|
+
"c00pmh": ["f16uznis", "ft333ue"],
|
|
61
|
+
"Bvs3b7t": ["f1sbsurx", "f1d2cokh"],
|
|
62
|
+
"Bnhloe": ["f1d2cokh", "f1sbsurx"],
|
|
63
|
+
"Hpy7w9": "fxx05f1",
|
|
64
|
+
"Bmdll0j": ["f1ph57ev", "fiz0wg0"],
|
|
65
|
+
"w8a68g": "f1tu679n",
|
|
66
|
+
"w65o9e": ["fiz0wg0", "f1ph57ev"],
|
|
67
|
+
"Bnvy6ax": "fi7ex6y",
|
|
68
|
+
"y8tio2": "f17j406i",
|
|
69
|
+
"Fgxkz8": ["fbegtek", "f21ipxl"],
|
|
70
|
+
"Bpakkmj": ["f21ipxl", "fbegtek"]
|
|
70
71
|
},
|
|
71
72
|
"vertical": {
|
|
72
73
|
"Beiy3e4": "f1vx9l62",
|
|
73
74
|
"z8tnut": "f1ywm7hm"
|
|
74
75
|
}
|
|
75
76
|
}, {
|
|
76
|
-
"d": [".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f10pi13n{position:relative;}", "
|
|
77
|
-
"f": [".ftqa4ok:focus{outline-style:none;}"]
|
|
77
|
+
"d": [".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f10pi13n{position:relative;}", ".fui-FluentProvider .fo4ocm0.fui-focus-within:focus-within{border-top-color:transparent;}", ".fui-FluentProvider .f1uvj27t.fui-focus-within:focus-within{border-right-color:transparent;}", ".fui-FluentProvider .fecisja.fui-focus-within:focus-within{border-left-color:transparent;}", ".fui-FluentProvider .f1rzrqo7.fui-focus-within:focus-within{border-bottom-color:transparent;}", ".fui-FluentProvider .f1g7kvsv.fui-focus-within:focus-within::after{content:\"\";}", ".fui-FluentProvider .fzrlbma.fui-focus-within:focus-within::after{position:absolute;}", ".fui-FluentProvider .fj7d4uc.fui-focus-within:focus-within::after{pointer-events:none;}", ".fui-FluentProvider .f1l6kybf.fui-focus-within:focus-within::after{z-index:1;}", ".fui-FluentProvider .f1p3v545.fui-focus-within:focus-within::after{border-top-style:solid;}", ".fui-FluentProvider .f18ooxnm.fui-focus-within:focus-within::after{border-right-style:solid;}", ".fui-FluentProvider .for8r4m.fui-focus-within:focus-within::after{border-left-style:solid;}", ".fui-FluentProvider .f1dek44a.fui-focus-within:focus-within::after{border-bottom-style:solid;}", ".fui-FluentProvider .fo0rwiw.fui-focus-within:focus-within::after{border-top-width:2px;}", ".fui-FluentProvider .f1y3sdd5.fui-focus-within:focus-within::after{border-right-width:2px;}", ".fui-FluentProvider .f1xpp2ec.fui-focus-within:focus-within::after{border-left-width:2px;}", ".fui-FluentProvider .f10zrybh.fui-focus-within:focus-within::after{border-bottom-width:2px;}", ".fui-FluentProvider .ft333ue.fui-focus-within:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .f16uznis.fui-focus-within:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .f1sbsurx.fui-focus-within:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .f1d2cokh.fui-focus-within:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fui-FluentProvider .fxx05f1.fui-focus-within:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .f1ph57ev.fui-focus-within:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .fiz0wg0.fui-focus-within:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .f1tu679n.fui-focus-within:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fui-FluentProvider .fi7ex6y.fui-focus-within:focus-within::after{top:-2px;}", ".fui-FluentProvider .f17j406i.fui-focus-within:focus-within::after{bottom:-2px;}", ".fui-FluentProvider .fbegtek.fui-focus-within:focus-within::after{left:-2px;}", ".fui-FluentProvider .f21ipxl.fui-focus-within:focus-within::after{right:-2px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}"],
|
|
78
|
+
"f": [".ftqa4ok:focus{outline-style:none;}"],
|
|
79
|
+
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
78
80
|
});
|
|
79
81
|
|
|
80
82
|
const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
|
|
@@ -101,12 +103,19 @@ const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
|
|
|
101
103
|
"Bkqvd7p": "f1e1a42z",
|
|
102
104
|
"Bmy1vo4": "fo99fu7",
|
|
103
105
|
"a9b677": "feqmc2u",
|
|
106
|
+
"Hwfdqs": "f1onx1g3",
|
|
104
107
|
"Hkqiji": "f1wkgtgk",
|
|
105
108
|
"Bgrs90m": "f17f8g0y",
|
|
106
|
-
"B0zx559": "f1uwej41"
|
|
109
|
+
"B0zx559": "f1uwej41",
|
|
110
|
+
"c0im90": "fpz7fqq"
|
|
107
111
|
}
|
|
108
112
|
}, {
|
|
109
|
-
"d": [".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1w9h62z{fill:currentColor;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".fg38ndl{font-size:18px;}", ".fjamq6b{height:20px;}", ".f1aehjj5{pointer-events:none;}", ".f1bnoopa{transition-duration:200ms;}", ".f1e1a42z{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".fo99fu7{transition-property:background,border,color;}", ".feqmc2u{width:40px;}", ".f1wkgtgk>*{transition-duration:200ms;}", ".f17f8g0y>*{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".f1uwej41>*{transition-property:transform;}"]
|
|
113
|
+
"d": [".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1w9h62z{fill:currentColor;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".fg38ndl{font-size:18px;}", ".fjamq6b{height:20px;}", ".f1aehjj5{pointer-events:none;}", ".f1bnoopa{transition-duration:200ms;}", ".f1e1a42z{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".fo99fu7{transition-property:background,border,color;}", ".feqmc2u{width:40px;}", ".f1wkgtgk>*{transition-duration:200ms;}", ".f17f8g0y>*{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".f1uwej41>*{transition-property:transform;}"],
|
|
114
|
+
"m": [["@media screen and (prefers-reduced-motion: reduce){.f1onx1g3{transition-duration:0.01ms;}}", {
|
|
115
|
+
"m": "screen and (prefers-reduced-motion: reduce)"
|
|
116
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.fpz7fqq>*{transition-duration:0.01ms;}}", {
|
|
117
|
+
"m": "screen and (prefers-reduced-motion: reduce)"
|
|
118
|
+
}]]
|
|
110
119
|
});
|
|
111
120
|
|
|
112
121
|
const useInputStyles = /*#__PURE__*/react_1.__styles({
|
|
@@ -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;EAC3D,IAAI,EAAE,YADqD;EAE3D,SAAS,EAAE,uBAFgD;EAG3D,KAAK,EAAE,mBAHoD;EAI3D,KAAK,EAAE;AAJoD,CAAhD;AAOb;;AAEG;;AACU,OAAA,CAAA,eAAA,GAAkB,OAAA,CAAA,gBAAA,CAAiB,IAAnC,C,CAEb;;AACA,MAAM,yBAAyB,GAAG,CAAlC;AACA,MAAM,WAAW,GAAG,EAApB;AACA,MAAM,UAAU,GAAG,EAAnB;AACA,MAAM,SAAS,GAAG,WAAW,GAAG,yBAAhC;;AAEA,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;AAAA,EAAtB;;AAiBA,MAAM,kBAAkB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA3B;;
|
|
1
|
+
{"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n vertical: {\n flexDirection: 'column',\n paddingTop: tokens.spacingVerticalXS,\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('1px'),\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n pointerEvents: 'none',\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n '> *': {\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'transform',\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n left: 0,\n ...shorthands.margin(0),\n opacity: 0,\n position: 'absolute',\n top: 0,\n width: '100%',\n\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`,\n },\n },\n },\n\n // Disabled (both checked and unchecked)\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Enabled and checked\n ':enabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n },\n\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n },\n },\n },\n\n highContrast: {\n '@media (forced-colors: active)': {\n ':disabled': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n ...shorthands.borderColor('GrayText'),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText',\n },\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n above: {\n marginBottom: tokens.spacingVerticalXS,\n },\n after: {\n marginLeft: tokens.spacingHorizontalM,\n },\n before: {\n marginRight: tokens.spacingHorizontalM,\n },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n const rootStyles = useRootStyles();\n const indicatorStyles = useIndicatorStyles();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n\n const { labelPosition } = state;\n\n state.root.className = mergeClasses(\n switchClassNames.root,\n rootStyles.base,\n labelPosition === 'above' && rootStyles.vertical,\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n state.input.className = mergeClasses(\n switchClassNames.input,\n inputStyles.base,\n inputStyles.highContrast,\n state.input.className,\n );\n\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles[labelPosition], state.label.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-switch",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.4",
|
|
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": "9.0.0-beta.
|
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.12",
|
|
32
32
|
"@fluentui/scripts": "^1.0.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@fluentui/react-icons": "^2.0.175",
|
|
36
|
-
"@fluentui/react-label": "^9.0.
|
|
37
|
-
"@fluentui/react-tabster": "^9.0
|
|
36
|
+
"@fluentui/react-label": "^9.0.4",
|
|
37
|
+
"@fluentui/react-tabster": "^9.1.0",
|
|
38
38
|
"@fluentui/react-theme": "^9.0.0",
|
|
39
39
|
"@fluentui/react-utilities": "^9.0.2",
|
|
40
|
-
"@griffel/react": "^1.2.
|
|
40
|
+
"@griffel/react": "^1.2.3",
|
|
41
41
|
"tslib": "^2.1.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
@@ -48,7 +48,8 @@
|
|
|
48
48
|
},
|
|
49
49
|
"beachball": {
|
|
50
50
|
"disallowedChangeTypes": [
|
|
51
|
-
"major"
|
|
51
|
+
"major",
|
|
52
|
+
"prerelease"
|
|
52
53
|
]
|
|
53
54
|
},
|
|
54
55
|
"exports": {
|