@fluentui/react-switch 9.0.3 → 9.0.5

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.
Files changed (12) hide show
  1. package/CHANGELOG.json +122 -4
  2. package/CHANGELOG.md +35 -5
  3. package/lib/components/Switch/useSwitch.js +7 -3
  4. package/lib/components/Switch/useSwitch.js.map +1 -1
  5. package/lib/components/Switch/useSwitchStyles.js +46 -37
  6. package/lib/components/Switch/useSwitchStyles.js.map +1 -1
  7. package/lib-commonjs/components/Switch/useSwitch.js +7 -2
  8. package/lib-commonjs/components/Switch/useSwitch.js.map +1 -1
  9. package/lib-commonjs/components/Switch/useSwitchStyles.js +46 -37
  10. package/lib-commonjs/components/Switch/useSwitchStyles.js.map +1 -1
  11. package/package.json +11 -10
  12. package/dist/tsdoc-metadata.json +0 -11
package/CHANGELOG.json CHANGED
@@ -2,7 +2,125 @@
2
2
  "name": "@fluentui/react-switch",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 14 Jul 2022 21:18:39 GMT",
5
+ "date": "Thu, 15 Sep 2022 09:44:46 GMT",
6
+ "tag": "@fluentui/react-switch_v9.0.5",
7
+ "version": "9.0.5",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "seanmonahan@microsoft.com",
12
+ "package": "@fluentui/react-switch",
13
+ "commit": "1d0a72865a151962362aa3e5054ac9bf8178f09c",
14
+ "comment": "fix: update color tokens"
15
+ },
16
+ {
17
+ "author": "olfedias@microsoft.com",
18
+ "package": "@fluentui/react-switch",
19
+ "commit": "e610024474cfe5d45f61501a8b6a21daf4c794a2",
20
+ "comment": "chore: Update Griffel to latest version"
21
+ },
22
+ {
23
+ "author": "behowell@microsoft.com",
24
+ "package": "@fluentui/react-switch",
25
+ "commit": "e598325b985cad3e5057f00893e0176416edd292",
26
+ "comment": "refactor: Replace useMergedEventCallbacks utility with mergeCallbacks"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-switch",
31
+ "comment": "Bump @fluentui/react-label to v9.0.5",
32
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-switch",
37
+ "comment": "Bump @fluentui/react-tabster to v9.1.1",
38
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
39
+ },
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui/react-switch",
43
+ "comment": "Bump @fluentui/react-theme to v9.1.0",
44
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
45
+ },
46
+ {
47
+ "author": "beachball",
48
+ "package": "@fluentui/react-switch",
49
+ "comment": "Bump @fluentui/react-utilities to v9.1.0",
50
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
51
+ },
52
+ {
53
+ "author": "beachball",
54
+ "package": "@fluentui/react-switch",
55
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13",
56
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
57
+ }
58
+ ],
59
+ "none": [
60
+ {
61
+ "author": "martinhochel@microsoft.com",
62
+ "package": "@fluentui/react-switch",
63
+ "commit": "e6cf183695d6d67a24e038c49a876224e5ed35e5",
64
+ "comment": "chore: update package scaffold"
65
+ }
66
+ ]
67
+ }
68
+ },
69
+ {
70
+ "date": "Wed, 03 Aug 2022 16:04:02 GMT",
71
+ "tag": "@fluentui/react-switch_v9.0.4",
72
+ "version": "9.0.4",
73
+ "comments": {
74
+ "none": [
75
+ {
76
+ "author": "lingfangao@hotmail.com",
77
+ "package": "@fluentui/react-switch",
78
+ "commit": "99cc385631d04a76ee10ebc143cb9fecd99640b6",
79
+ "comment": "chore: Add `prerelease` as disallowed changetype for 9.0.0 packages"
80
+ }
81
+ ],
82
+ "patch": [
83
+ {
84
+ "author": "lingfangao@hotmail.com",
85
+ "package": "@fluentui/react-switch",
86
+ "commit": "71590ea6aeab8ce24d8c8e50e0ee80ece81a4392",
87
+ "comment": "refactor: use `useFocusWithin` hook for :focus-within styles"
88
+ },
89
+ {
90
+ "author": "miroslav.stastny@microsoft.com",
91
+ "package": "@fluentui/react-switch",
92
+ "commit": "08563664778fd80284561d3c9d254307a0a32362",
93
+ "comment": "chore: Bump Griffel dependencies"
94
+ },
95
+ {
96
+ "author": "sarah.higley@microsoft.com",
97
+ "package": "@fluentui/react-switch",
98
+ "commit": "c66808887bcd7fd150c22eda462b325075742694",
99
+ "comment": "bugfix: add reduced motion styles for avatar, spinner, switch, and input focus styles"
100
+ },
101
+ {
102
+ "author": "beachball",
103
+ "package": "@fluentui/react-switch",
104
+ "comment": "Bump @fluentui/react-label to v9.0.4",
105
+ "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
106
+ },
107
+ {
108
+ "author": "beachball",
109
+ "package": "@fluentui/react-switch",
110
+ "comment": "Bump @fluentui/react-tabster to v9.1.0",
111
+ "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
112
+ },
113
+ {
114
+ "author": "beachball",
115
+ "package": "@fluentui/react-switch",
116
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
117
+ "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
118
+ }
119
+ ]
120
+ }
121
+ },
122
+ {
123
+ "date": "Thu, 14 Jul 2022 21:21:05 GMT",
6
124
  "tag": "@fluentui/react-switch_v9.0.3",
7
125
  "version": "9.0.3",
8
126
  "comments": {
@@ -17,19 +135,19 @@
17
135
  "author": "beachball",
18
136
  "package": "@fluentui/react-switch",
19
137
  "comment": "Bump @fluentui/react-label to v9.0.3",
20
- "commit": "802bc4e3730a88b0fc61b5bf42ef7fc6b6543fe2"
138
+ "commit": "79b513146194367544160f364b0a7dd749ed93e4"
21
139
  },
22
140
  {
23
141
  "author": "beachball",
24
142
  "package": "@fluentui/react-switch",
25
143
  "comment": "Bump @fluentui/react-tabster to v9.0.3",
26
- "commit": "802bc4e3730a88b0fc61b5bf42ef7fc6b6543fe2"
144
+ "commit": "79b513146194367544160f364b0a7dd749ed93e4"
27
145
  },
28
146
  {
29
147
  "author": "beachball",
30
148
  "package": "@fluentui/react-switch",
31
149
  "comment": "Bump @fluentui/react-utilities to v9.0.2",
32
- "commit": "802bc4e3730a88b0fc61b5bf42ef7fc6b6543fe2"
150
+ "commit": "79b513146194367544160f364b0a7dd749ed93e4"
33
151
  }
34
152
  ]
35
153
  }
package/CHANGELOG.md CHANGED
@@ -1,20 +1,50 @@
1
1
  # Change Log - @fluentui/react-switch
2
2
 
3
- This log was last generated on Thu, 14 Jul 2022 21:18:39 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 15 Sep 2022 09:44:46 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.5)
8
+
9
+ Thu, 15 Sep 2022 09:44:46 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.4..@fluentui/react-switch_v9.0.5)
11
+
12
+ ### Patches
13
+
14
+ - fix: update color tokens ([PR #24027](https://github.com/microsoft/fluentui/pull/24027) by seanmonahan@microsoft.com)
15
+ - chore: Update Griffel to latest version ([PR #24221](https://github.com/microsoft/fluentui/pull/24221) by olfedias@microsoft.com)
16
+ - refactor: Replace useMergedEventCallbacks utility with mergeCallbacks ([PR #24152](https://github.com/microsoft/fluentui/pull/24152) by behowell@microsoft.com)
17
+ - Bump @fluentui/react-label to v9.0.5 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
18
+ - Bump @fluentui/react-tabster to v9.1.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
19
+ - Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
20
+ - Bump @fluentui/react-utilities to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
21
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
22
+
23
+ ## [9.0.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.4)
24
+
25
+ Wed, 03 Aug 2022 16:04:02 GMT
26
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.3..@fluentui/react-switch_v9.0.4)
27
+
28
+ ### Patches
29
+
30
+ - refactor: use `useFocusWithin` hook for :focus-within styles ([PR #24154](https://github.com/microsoft/fluentui/pull/24154) by lingfangao@hotmail.com)
31
+ - chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
32
+ - 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)
33
+ - Bump @fluentui/react-label to v9.0.4 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
34
+ - Bump @fluentui/react-tabster to v9.1.0 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
35
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
36
+
7
37
  ## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.3)
8
38
 
9
- Thu, 14 Jul 2022 21:18:39 GMT
39
+ Thu, 14 Jul 2022 21:21:05 GMT
10
40
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.2..@fluentui/react-switch_v9.0.3)
11
41
 
12
42
  ### Patches
13
43
 
14
44
  - 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 #23920](https://github.com/microsoft/fluentui/pull/23920) by beachball)
16
- - Bump @fluentui/react-tabster to v9.0.3 ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by beachball)
17
- - Bump @fluentui/react-utilities to v9.0.2 ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by beachball)
45
+ - Bump @fluentui/react-label to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
46
+ - Bump @fluentui/react-tabster to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
47
+ - Bump @fluentui/react-utilities to v9.0.2 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
18
48
 
19
49
  ## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.2)
20
50
 
package/lib/components/Switch/useSwitch.js CHANGED
@@ -1,7 +1,8 @@
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 { getPartitionedNativeProps, resolveShorthand, useId, useMergedEventCallbacks } from '@fluentui/react-utilities';
4
+ import { useFocusWithin } from '@fluentui/react-tabster';
5
+ import { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';
5
6
  /**
6
7
  * Create the state required to render Switch.
7
8
  *
@@ -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: nativeProps.root,
32
+ defaultProps: {
33
+ ref: useFocusWithin(),
34
+ ...nativeProps.root
35
+ },
32
36
  required: true
33
37
  });
34
38
  const indicator = resolveShorthand(props.indicator, {
@@ -50,7 +54,7 @@ export const useSwitch_unstable = (props, ref) => {
50
54
  },
51
55
  required: true
52
56
  });
53
- input.onChange = useMergedEventCallbacks(input.onChange, ev => onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
57
+ input.onChange = mergeCallbacks(input.onChange, ev => onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
54
58
  checked: ev.currentTarget.checked
55
59
  }));
56
60
  const label = resolveShorthand(props.label, {
package/lib/components/Switch/useSwitch.js.map CHANGED
@@ -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,IADc;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 { 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: 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/"}
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,cAApC,EAAoD,gBAApD,EAAsE,KAAtE,QAAmF,2BAAnF;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,cAAc,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,CAA/B;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, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { SwitchProps, SwitchState } from './Switch.types';\n\n/**\n * Create the state required to render Switch.\n *\n * The returned state can be modified with hooks such as useSwitchStyles_unstable,\n * before being passed to renderSwitch_unstable.\n *\n * @param props - props from this instance of Switch\n * @param ref - reference to `<input>` element of Switch\n */\nexport const useSwitch_unstable = (props: SwitchProps, ref: React.Ref<HTMLInputElement>): SwitchState => {\n const { checked, defaultChecked, disabled, labelPosition = 'after', onChange, required } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n });\n\n const id = useId('switch-', nativeProps.primary.id);\n\n const root = resolveShorthand(props.root, {\n defaultProps: { ref: useFocusWithin<HTMLDivElement>(), ...nativeProps.root },\n required: true,\n });\n\n const indicator = resolveShorthand(props.indicator, {\n defaultProps: {\n 'aria-hidden': true,\n children: <CircleFilled />,\n },\n required: true,\n });\n\n const input = resolveShorthand(props.input, {\n defaultProps: {\n checked,\n defaultChecked,\n id,\n ref,\n role: 'switch',\n type: 'checkbox',\n ...nativeProps.primary,\n },\n required: true,\n });\n input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { checked: ev.currentTarget.checked }));\n\n const label = resolveShorthand(props.label, {\n defaultProps: {\n disabled,\n htmlFor: id,\n required,\n size: 'medium',\n },\n });\n\n return {\n labelPosition,\n\n //Slots definition\n components: {\n root: 'div',\n indicator: 'div',\n input: 'input',\n label: Label,\n },\n\n root,\n indicator,\n input,\n label,\n };\n};\n"],"sourceRoot":"../src/"}
package/lib/components/Switch/useSwitchStyles.js CHANGED
@@ -29,42 +29,44 @@ const useRootStyles = /*#__PURE__*/__styles({
29
29
  "uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
30
30
  "qhf8xq": "f10pi13n",
31
31
  "Brovlpu": "ftqa4ok",
32
- "vchsgm": "fbiesyy",
33
- "ozrjjd": ["fq2kn9", "f1jxwnad"],
34
- "B7lelfh": "f1il7mou",
35
- "Bp3tz3o": ["f1jxwnad", "fq2kn9"],
36
- "Bbs9wvz": "f13adjqr",
37
- "q02eyl": "f1188tw4",
38
- "llgh1x": "ffcuypr",
39
- "Dmi4yx": "f1ykafvd",
40
- "rnk8mc": "fsk03u7",
41
- "i8s5n4": ["fektfg6", "fb9zr6h"],
42
- "Bvhkk4y": "fbtctfn",
43
- "Jba7ju": ["fb9zr6h", "fektfg6"],
44
- "B5kfbxi": "f13yiatr",
45
- "aia6cn": ["f2he9yp", "f1qjzjrd"],
46
- "dmu3zb": "f1kex75c",
47
- "ozsp9x": ["f1qjzjrd", "f2he9yp"],
48
- "izr52t": ["ft7spqo", "fmlur2k"],
49
- "ei1ezu": ["fmlur2k", "ft7spqo"],
50
- "Bbawuig": ["f1y3ebu", "f1utkke9"],
51
- "B0g2sgm": ["f1utkke9", "f1y3ebu"],
52
- "peent8": "fdu7fj4",
53
- "B7odns5": ["f1ai831i", "f1mabxol"],
54
- "Bk28q0d": "f1gu1oxr",
55
- "cuest6": ["f1mabxol", "f1ai831i"],
56
- "Bqelifr": "f1yuf49m",
57
- "qwo3bi": "f1ekbqkk",
58
- "t4augk": ["fgj76h3", "f1vonxve"],
59
- "Beavxtj": ["f1vonxve", "fgj76h3"]
32
+ "B486eqv": "f2hkw1w",
33
+ "Brlowmp": "fck78tx",
34
+ "Fxwv4m": ["f8gneoz", "f14g6lul"],
35
+ "Bkrqzay": "f1tc23yq",
36
+ "Bg2fdrq": ["f14g6lul", "f8gneoz"],
37
+ "Bhpuztq": "ffjpq3d",
38
+ "Hxt1dp": "fo0h4cx",
39
+ "Fwynku": "f1vef9e5",
40
+ "nwv0sh": "fob2zhe",
41
+ "sewbek": "ftqc7yw",
42
+ "Bmcqtu5": ["fbod6wy", "f4eroa4"],
43
+ "Iuyy0o": "flecwt7",
44
+ "B1jyaxe": ["f4eroa4", "fbod6wy"],
45
+ "Gic0m5": "fzb327l",
46
+ "B8s345i": ["f1s2knrb", "f6wuwpp"],
47
+ "Btrf9ny": "f1g8ecfq",
48
+ "Bz0zc98": ["f6wuwpp", "f1s2knrb"],
49
+ "Bdowj5x": ["f1hnqdjl", "fk9eigt"],
50
+ "zit2e2": ["fk9eigt", "f1hnqdjl"],
51
+ "xdtxim": ["f1g8yfuc", "f1kv2i3z"],
52
+ "mjwzc8": ["f1kv2i3z", "f1g8yfuc"],
53
+ "Bdlkd80": "ffthsbc",
54
+ "mrk28m": ["f1nq9gk1", "f1pmlwz5"],
55
+ "Byzfkqq": "f1naw2e2",
56
+ "Bnh9nsd": ["f1pmlwz5", "f1nq9gk1"],
57
+ "r9zwrz": "fmtt8yl",
58
+ "B4yg94n": "fr8phvc",
59
+ "glb4xk": ["f5m5r8m", "f1bizo4j"],
60
+ "mla9w6": ["f1bizo4j", "f5m5r8m"]
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;}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f13adjqr:focus-within::after{content:\"\";}", "[data-keyboard-nav] .f1188tw4:focus-within::after{position:absolute;}", "[data-keyboard-nav] .ffcuypr:focus-within::after{pointer-events:none;}", "[data-keyboard-nav] .f1ykafvd:focus-within::after{z-index:1;}", "[data-keyboard-nav] .fsk03u7:focus-within::after{border-top-style:solid;}", "[data-keyboard-nav] .fektfg6:focus-within::after{border-right-style:solid;}", "[data-keyboard-nav] .fb9zr6h:focus-within::after{border-left-style:solid;}", "[data-keyboard-nav] .fbtctfn:focus-within::after{border-bottom-style:solid;}", "[data-keyboard-nav] .f13yiatr:focus-within::after{border-top-width:2px;}", "[data-keyboard-nav] .f2he9yp:focus-within::after{border-right-width:2px;}", "[data-keyboard-nav] .f1qjzjrd:focus-within::after{border-left-width:2px;}", "[data-keyboard-nav] .f1kex75c:focus-within::after{border-bottom-width:2px;}", "[data-keyboard-nav] .ft7spqo:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .fmlur2k:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1y3ebu:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1utkke9:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .fdu7fj4:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1ai831i:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1mabxol:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1gu1oxr:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1yuf49m:focus-within::after{top:-2px;}", "[data-keyboard-nav] .f1ekbqkk:focus-within::after{bottom:-2px;}", "[data-keyboard-nav] .fgj76h3:focus-within::after{left:-2px;}", "[data-keyboard-nav] .f1vonxve:focus-within::after{right:-2px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}"],
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;}", ".fck78tx.fui-focus-within:focus-within{border-top-color:transparent;}", ".f8gneoz.fui-focus-within:focus-within{border-right-color:transparent;}", ".f14g6lul.fui-focus-within:focus-within{border-left-color:transparent;}", ".f1tc23yq.fui-focus-within:focus-within{border-bottom-color:transparent;}", ".ffjpq3d.fui-focus-within:focus-within::after{content:\"\";}", ".fo0h4cx.fui-focus-within:focus-within::after{position:absolute;}", ".f1vef9e5.fui-focus-within:focus-within::after{pointer-events:none;}", ".fob2zhe.fui-focus-within:focus-within::after{z-index:1;}", ".ftqc7yw.fui-focus-within:focus-within::after{border-top-style:solid;}", ".fbod6wy.fui-focus-within:focus-within::after{border-right-style:solid;}", ".f4eroa4.fui-focus-within:focus-within::after{border-left-style:solid;}", ".flecwt7.fui-focus-within:focus-within::after{border-bottom-style:solid;}", ".fzb327l.fui-focus-within:focus-within::after{border-top-width:2px;}", ".f1s2knrb.fui-focus-within:focus-within::after{border-right-width:2px;}", ".f6wuwpp.fui-focus-within:focus-within::after{border-left-width:2px;}", ".f1g8ecfq.fui-focus-within:focus-within::after{border-bottom-width:2px;}", ".f1hnqdjl.fui-focus-within:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".fk9eigt.fui-focus-within:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1g8yfuc.fui-focus-within:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f1kv2i3z.fui-focus-within:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".ffthsbc.fui-focus-within:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1nq9gk1.fui-focus-within:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".f1pmlwz5.fui-focus-within:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1naw2e2.fui-focus-within:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fmtt8yl.fui-focus-within:focus-within::after{top:-2px;}", ".fr8phvc.fui-focus-within:focus-within::after{bottom:-2px;}", ".f5m5r8m.fui-focus-within:focus-within::after{left:-2px;}", ".f1bizo4j.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({
@@ -133,18 +142,18 @@ const useInputStyles = /*#__PURE__*/__styles({
133
142
  "Hnmc4c": ["f1pvt3n7", "f14i0clv"],
134
143
  "By8gkvz": "fq9gcw4",
135
144
  "lekrm4": ["f14i0clv", "f1pvt3n7"],
136
- "Bei91sp": "fft44l1",
137
- "Bksztz9": "fwlrvmy",
145
+ "Bei91sp": "f1se0d6r",
146
+ "Bksztz9": "f8l9son",
138
147
  "h3gz1v": "f1c4gun2",
139
148
  "Cw6427": ["flhgtcm", "fx1zdd8"],
140
149
  "Bpbd9g9": "fayrp2e",
141
150
  "ssulyh": ["fx1zdd8", "flhgtcm"],
142
- "vq7rp1": "f1vk2knj",
151
+ "vq7rp1": "f1p715pa",
143
152
  "ynrfiu": "firogjh",
144
153
  "Bf5tpyt": ["f1crd6p1", "for8100"],
145
154
  "Brhic7g": "f1v5j4zb",
146
155
  "Cqvc5u": ["for8100", "f1crd6p1"],
147
- "B4e80u0": "f1rt7qcq",
156
+ "B4e80u0": "f116zuoq",
148
157
  "Bwj41i9": "fxvotg6",
149
158
  "B2iiaa1": ["fk9ur30", "f3u5smv"],
150
159
  "Bejmxmv": "fdtj07x",
@@ -168,7 +177,7 @@ const useInputStyles = /*#__PURE__*/__styles({
168
177
  "Bhmcd6p": "f1jaqqzs"
169
178
  }
170
179
  }, {
171
- "d": [".f1ewtqcl{box-sizing:border-box;}", ".f1k6fduh{cursor:pointer;}", ".f1l02sjl{height:100%;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f3l1kk6:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}", ".f1kez0x4:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px);}", ".fvxnmui:disabled{cursor:default;}", ".f1cxq9o1:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".f1ks1zsm:disabled~.fui-Switch__label{color:var(--colorNeutralForegroundDisabled);}", ".fiqfi0i:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);}", ".f9aagkg:enabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".fgv8l18:enabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f1p3jmxb:enabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f11yi64e:enabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fthrly9:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".fhdp2ht:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);}", ".f1rzj6jj:enabled:not(:checked):hover~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1jywl1l:enabled:not(:checked):hover~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f13d626x:enabled:not(:checked):hover~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1ivtmze:enabled:not(:checked):hover~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1uvnr57:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);}", ".frhcydi:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1pvt3n7:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f14i0clv:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fq9gcw4:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fft44l1:enabled:checked~.fui-Switch__indicator{background-color:var(--colorBrandBackground);}", ".fwlrvmy:enabled:checked~.fui-Switch__indicator{color:var(--colorNeutralForegroundOnBrand);}", ".f1c4gun2:enabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStroke);}", ".flhgtcm:enabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStroke);}", ".fx1zdd8:enabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStroke);}", ".fayrp2e:enabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStroke);}", ".f1vk2knj:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorBrandBackgroundHover);}", ".firogjh:enabled:checked:hover~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1crd6p1:enabled:checked:hover~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".for8100:enabled:checked:hover~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1v5j4zb:enabled:checked:hover~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1rt7qcq:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorBrandBackgroundPressed);}", ".fxvotg6:enabled:checked:hover:active~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fk9ur30:enabled:checked:hover:active~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f3u5smv:enabled:checked:hover:active~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fdtj07x:enabled:checked:hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fv5mb1o:disabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1i2l8ou:disabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fxj1kmv:disabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fku528b:disabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fabcpc0:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);}", ".f17xwy6w:disabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeDisabled);}", ".fipwscc:disabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeDisabled);}", ".fab39iv:disabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeDisabled);}", ".f1th5z1l:disabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeDisabled);}"],
180
+ "d": [".f1ewtqcl{box-sizing:border-box;}", ".f1k6fduh{cursor:pointer;}", ".f1l02sjl{height:100%;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f3l1kk6:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}", ".f1kez0x4:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px);}", ".fvxnmui:disabled{cursor:default;}", ".f1cxq9o1:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".f1ks1zsm:disabled~.fui-Switch__label{color:var(--colorNeutralForegroundDisabled);}", ".fiqfi0i:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);}", ".f9aagkg:enabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".fgv8l18:enabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f1p3jmxb:enabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f11yi64e:enabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fthrly9:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".fhdp2ht:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);}", ".f1rzj6jj:enabled:not(:checked):hover~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1jywl1l:enabled:not(:checked):hover~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f13d626x:enabled:not(:checked):hover~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1ivtmze:enabled:not(:checked):hover~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1uvnr57:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);}", ".frhcydi:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1pvt3n7:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f14i0clv:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fq9gcw4:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1se0d6r:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);}", ".f8l9son:enabled:checked~.fui-Switch__indicator{color:var(--colorNeutralForegroundInverted);}", ".f1c4gun2:enabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStroke);}", ".flhgtcm:enabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStroke);}", ".fx1zdd8:enabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStroke);}", ".fayrp2e:enabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStroke);}", ".f1p715pa:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}", ".firogjh:enabled:checked:hover~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1crd6p1:enabled:checked:hover~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".for8100:enabled:checked:hover~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1v5j4zb:enabled:checked:hover~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f116zuoq:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}", ".fxvotg6:enabled:checked:hover:active~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fk9ur30:enabled:checked:hover:active~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f3u5smv:enabled:checked:hover:active~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fdtj07x:enabled:checked:hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fv5mb1o:disabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1i2l8ou:disabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fxj1kmv:disabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fku528b:disabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fabcpc0:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);}", ".f17xwy6w:disabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeDisabled);}", ".fipwscc:disabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeDisabled);}", ".fab39iv:disabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeDisabled);}", ".f1th5z1l:disabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeDisabled);}"],
172
181
  "m": [["@media (forced-colors: active){.f19h63kc:disabled~.fui-Switch__indicator{color:GrayText;}}", {
173
182
  "m": "(forced-colors: active)"
174
183
  }], ["@media (forced-colors: active){.ffutfdj:disabled~.fui-Switch__indicator{border-top-color:GrayText;}}", {
package/lib/components/Switch/useSwitchStyles.js.map CHANGED
@@ -1 +1 @@
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 '> *': {\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'transform',\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n left: 0,\n ...shorthands.margin(0),\n opacity: 0,\n position: 'absolute',\n top: 0,\n width: '100%',\n\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}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/"}
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.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\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/lib-commonjs/components/Switch/useSwitch.js CHANGED
@@ -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: nativeProps.root,
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, {
@@ -61,7 +66,7 @@ const useSwitch_unstable = (props, ref) => {
61
66
  },
62
67
  required: true
63
68
  });
64
- input.onChange = react_utilities_1.useMergedEventCallbacks(input.onChange, ev => onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
69
+ input.onChange = react_utilities_1.mergeCallbacks(input.onChange, ev => onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
65
70
  checked: ev.currentTarget.checked
66
71
  }));
67
72
  const label = react_utilities_1.resolveShorthand(props.label, {
package/lib-commonjs/components/Switch/useSwitch.js.map CHANGED
@@ -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,IADc;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 { 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: 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/"}
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,cAAA,CAAe,KAAK,CAAC,QAArB,EAA+B,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,CAA7C,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, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { SwitchProps, SwitchState } from './Switch.types';\n\n/**\n * Create the state required to render Switch.\n *\n * The returned state can be modified with hooks such as useSwitchStyles_unstable,\n * before being passed to renderSwitch_unstable.\n *\n * @param props - props from this instance of Switch\n * @param ref - reference to `<input>` element of Switch\n */\nexport const useSwitch_unstable = (props: SwitchProps, ref: React.Ref<HTMLInputElement>): SwitchState => {\n const { checked, defaultChecked, disabled, labelPosition = 'after', onChange, required } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n });\n\n const id = useId('switch-', nativeProps.primary.id);\n\n const root = resolveShorthand(props.root, {\n defaultProps: { ref: useFocusWithin<HTMLDivElement>(), ...nativeProps.root },\n required: true,\n });\n\n const indicator = resolveShorthand(props.indicator, {\n defaultProps: {\n 'aria-hidden': true,\n children: <CircleFilled />,\n },\n required: true,\n });\n\n const input = resolveShorthand(props.input, {\n defaultProps: {\n checked,\n defaultChecked,\n id,\n ref,\n role: 'switch',\n type: 'checkbox',\n ...nativeProps.primary,\n },\n required: true,\n });\n input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { checked: ev.currentTarget.checked }));\n\n const label = resolveShorthand(props.label, {\n defaultProps: {\n disabled,\n htmlFor: id,\n required,\n size: 'medium',\n },\n });\n\n return {\n labelPosition,\n\n //Slots definition\n components: {\n root: 'div',\n indicator: 'div',\n input: 'input',\n label: Label,\n },\n\n root,\n indicator,\n input,\n label,\n };\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Switch/useSwitchStyles.js CHANGED
@@ -39,42 +39,44 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
39
39
  "uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
40
40
  "qhf8xq": "f10pi13n",
41
41
  "Brovlpu": "ftqa4ok",
42
- "vchsgm": "fbiesyy",
43
- "ozrjjd": ["fq2kn9", "f1jxwnad"],
44
- "B7lelfh": "f1il7mou",
45
- "Bp3tz3o": ["f1jxwnad", "fq2kn9"],
46
- "Bbs9wvz": "f13adjqr",
47
- "q02eyl": "f1188tw4",
48
- "llgh1x": "ffcuypr",
49
- "Dmi4yx": "f1ykafvd",
50
- "rnk8mc": "fsk03u7",
51
- "i8s5n4": ["fektfg6", "fb9zr6h"],
52
- "Bvhkk4y": "fbtctfn",
53
- "Jba7ju": ["fb9zr6h", "fektfg6"],
54
- "B5kfbxi": "f13yiatr",
55
- "aia6cn": ["f2he9yp", "f1qjzjrd"],
56
- "dmu3zb": "f1kex75c",
57
- "ozsp9x": ["f1qjzjrd", "f2he9yp"],
58
- "izr52t": ["ft7spqo", "fmlur2k"],
59
- "ei1ezu": ["fmlur2k", "ft7spqo"],
60
- "Bbawuig": ["f1y3ebu", "f1utkke9"],
61
- "B0g2sgm": ["f1utkke9", "f1y3ebu"],
62
- "peent8": "fdu7fj4",
63
- "B7odns5": ["f1ai831i", "f1mabxol"],
64
- "Bk28q0d": "f1gu1oxr",
65
- "cuest6": ["f1mabxol", "f1ai831i"],
66
- "Bqelifr": "f1yuf49m",
67
- "qwo3bi": "f1ekbqkk",
68
- "t4augk": ["fgj76h3", "f1vonxve"],
69
- "Beavxtj": ["f1vonxve", "fgj76h3"]
42
+ "B486eqv": "f2hkw1w",
43
+ "Brlowmp": "fck78tx",
44
+ "Fxwv4m": ["f8gneoz", "f14g6lul"],
45
+ "Bkrqzay": "f1tc23yq",
46
+ "Bg2fdrq": ["f14g6lul", "f8gneoz"],
47
+ "Bhpuztq": "ffjpq3d",
48
+ "Hxt1dp": "fo0h4cx",
49
+ "Fwynku": "f1vef9e5",
50
+ "nwv0sh": "fob2zhe",
51
+ "sewbek": "ftqc7yw",
52
+ "Bmcqtu5": ["fbod6wy", "f4eroa4"],
53
+ "Iuyy0o": "flecwt7",
54
+ "B1jyaxe": ["f4eroa4", "fbod6wy"],
55
+ "Gic0m5": "fzb327l",
56
+ "B8s345i": ["f1s2knrb", "f6wuwpp"],
57
+ "Btrf9ny": "f1g8ecfq",
58
+ "Bz0zc98": ["f6wuwpp", "f1s2knrb"],
59
+ "Bdowj5x": ["f1hnqdjl", "fk9eigt"],
60
+ "zit2e2": ["fk9eigt", "f1hnqdjl"],
61
+ "xdtxim": ["f1g8yfuc", "f1kv2i3z"],
62
+ "mjwzc8": ["f1kv2i3z", "f1g8yfuc"],
63
+ "Bdlkd80": "ffthsbc",
64
+ "mrk28m": ["f1nq9gk1", "f1pmlwz5"],
65
+ "Byzfkqq": "f1naw2e2",
66
+ "Bnh9nsd": ["f1pmlwz5", "f1nq9gk1"],
67
+ "r9zwrz": "fmtt8yl",
68
+ "B4yg94n": "fr8phvc",
69
+ "glb4xk": ["f5m5r8m", "f1bizo4j"],
70
+ "mla9w6": ["f1bizo4j", "f5m5r8m"]
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;}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f13adjqr:focus-within::after{content:\"\";}", "[data-keyboard-nav] .f1188tw4:focus-within::after{position:absolute;}", "[data-keyboard-nav] .ffcuypr:focus-within::after{pointer-events:none;}", "[data-keyboard-nav] .f1ykafvd:focus-within::after{z-index:1;}", "[data-keyboard-nav] .fsk03u7:focus-within::after{border-top-style:solid;}", "[data-keyboard-nav] .fektfg6:focus-within::after{border-right-style:solid;}", "[data-keyboard-nav] .fb9zr6h:focus-within::after{border-left-style:solid;}", "[data-keyboard-nav] .fbtctfn:focus-within::after{border-bottom-style:solid;}", "[data-keyboard-nav] .f13yiatr:focus-within::after{border-top-width:2px;}", "[data-keyboard-nav] .f2he9yp:focus-within::after{border-right-width:2px;}", "[data-keyboard-nav] .f1qjzjrd:focus-within::after{border-left-width:2px;}", "[data-keyboard-nav] .f1kex75c:focus-within::after{border-bottom-width:2px;}", "[data-keyboard-nav] .ft7spqo:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .fmlur2k:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1y3ebu:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1utkke9:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .fdu7fj4:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1ai831i:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1mabxol:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1gu1oxr:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1yuf49m:focus-within::after{top:-2px;}", "[data-keyboard-nav] .f1ekbqkk:focus-within::after{bottom:-2px;}", "[data-keyboard-nav] .fgj76h3:focus-within::after{left:-2px;}", "[data-keyboard-nav] .f1vonxve:focus-within::after{right:-2px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}"],
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;}", ".fck78tx.fui-focus-within:focus-within{border-top-color:transparent;}", ".f8gneoz.fui-focus-within:focus-within{border-right-color:transparent;}", ".f14g6lul.fui-focus-within:focus-within{border-left-color:transparent;}", ".f1tc23yq.fui-focus-within:focus-within{border-bottom-color:transparent;}", ".ffjpq3d.fui-focus-within:focus-within::after{content:\"\";}", ".fo0h4cx.fui-focus-within:focus-within::after{position:absolute;}", ".f1vef9e5.fui-focus-within:focus-within::after{pointer-events:none;}", ".fob2zhe.fui-focus-within:focus-within::after{z-index:1;}", ".ftqc7yw.fui-focus-within:focus-within::after{border-top-style:solid;}", ".fbod6wy.fui-focus-within:focus-within::after{border-right-style:solid;}", ".f4eroa4.fui-focus-within:focus-within::after{border-left-style:solid;}", ".flecwt7.fui-focus-within:focus-within::after{border-bottom-style:solid;}", ".fzb327l.fui-focus-within:focus-within::after{border-top-width:2px;}", ".f1s2knrb.fui-focus-within:focus-within::after{border-right-width:2px;}", ".f6wuwpp.fui-focus-within:focus-within::after{border-left-width:2px;}", ".f1g8ecfq.fui-focus-within:focus-within::after{border-bottom-width:2px;}", ".f1hnqdjl.fui-focus-within:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".fk9eigt.fui-focus-within:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1g8yfuc.fui-focus-within:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f1kv2i3z.fui-focus-within:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".ffthsbc.fui-focus-within:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1nq9gk1.fui-focus-within:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".f1pmlwz5.fui-focus-within:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1naw2e2.fui-focus-within:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fmtt8yl.fui-focus-within:focus-within::after{top:-2px;}", ".fr8phvc.fui-focus-within:focus-within::after{bottom:-2px;}", ".f5m5r8m.fui-focus-within:focus-within::after{left:-2px;}", ".f1bizo4j.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({
@@ -143,18 +152,18 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
143
152
  "Hnmc4c": ["f1pvt3n7", "f14i0clv"],
144
153
  "By8gkvz": "fq9gcw4",
145
154
  "lekrm4": ["f14i0clv", "f1pvt3n7"],
146
- "Bei91sp": "fft44l1",
147
- "Bksztz9": "fwlrvmy",
155
+ "Bei91sp": "f1se0d6r",
156
+ "Bksztz9": "f8l9son",
148
157
  "h3gz1v": "f1c4gun2",
149
158
  "Cw6427": ["flhgtcm", "fx1zdd8"],
150
159
  "Bpbd9g9": "fayrp2e",
151
160
  "ssulyh": ["fx1zdd8", "flhgtcm"],
152
- "vq7rp1": "f1vk2knj",
161
+ "vq7rp1": "f1p715pa",
153
162
  "ynrfiu": "firogjh",
154
163
  "Bf5tpyt": ["f1crd6p1", "for8100"],
155
164
  "Brhic7g": "f1v5j4zb",
156
165
  "Cqvc5u": ["for8100", "f1crd6p1"],
157
- "B4e80u0": "f1rt7qcq",
166
+ "B4e80u0": "f116zuoq",
158
167
  "Bwj41i9": "fxvotg6",
159
168
  "B2iiaa1": ["fk9ur30", "f3u5smv"],
160
169
  "Bejmxmv": "fdtj07x",
@@ -178,7 +187,7 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
178
187
  "Bhmcd6p": "f1jaqqzs"
179
188
  }
180
189
  }, {
181
- "d": [".f1ewtqcl{box-sizing:border-box;}", ".f1k6fduh{cursor:pointer;}", ".f1l02sjl{height:100%;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f3l1kk6:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}", ".f1kez0x4:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px);}", ".fvxnmui:disabled{cursor:default;}", ".f1cxq9o1:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".f1ks1zsm:disabled~.fui-Switch__label{color:var(--colorNeutralForegroundDisabled);}", ".fiqfi0i:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);}", ".f9aagkg:enabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".fgv8l18:enabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f1p3jmxb:enabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f11yi64e:enabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fthrly9:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".fhdp2ht:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);}", ".f1rzj6jj:enabled:not(:checked):hover~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1jywl1l:enabled:not(:checked):hover~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f13d626x:enabled:not(:checked):hover~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1ivtmze:enabled:not(:checked):hover~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1uvnr57:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);}", ".frhcydi:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1pvt3n7:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f14i0clv:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fq9gcw4:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fft44l1:enabled:checked~.fui-Switch__indicator{background-color:var(--colorBrandBackground);}", ".fwlrvmy:enabled:checked~.fui-Switch__indicator{color:var(--colorNeutralForegroundOnBrand);}", ".f1c4gun2:enabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStroke);}", ".flhgtcm:enabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStroke);}", ".fx1zdd8:enabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStroke);}", ".fayrp2e:enabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStroke);}", ".f1vk2knj:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorBrandBackgroundHover);}", ".firogjh:enabled:checked:hover~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1crd6p1:enabled:checked:hover~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".for8100:enabled:checked:hover~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1v5j4zb:enabled:checked:hover~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1rt7qcq:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorBrandBackgroundPressed);}", ".fxvotg6:enabled:checked:hover:active~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fk9ur30:enabled:checked:hover:active~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f3u5smv:enabled:checked:hover:active~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fdtj07x:enabled:checked:hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fv5mb1o:disabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1i2l8ou:disabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fxj1kmv:disabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fku528b:disabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fabcpc0:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);}", ".f17xwy6w:disabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeDisabled);}", ".fipwscc:disabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeDisabled);}", ".fab39iv:disabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeDisabled);}", ".f1th5z1l:disabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeDisabled);}"],
190
+ "d": [".f1ewtqcl{box-sizing:border-box;}", ".f1k6fduh{cursor:pointer;}", ".f1l02sjl{height:100%;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f3l1kk6:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}", ".f1kez0x4:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px);}", ".fvxnmui:disabled{cursor:default;}", ".f1cxq9o1:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".f1ks1zsm:disabled~.fui-Switch__label{color:var(--colorNeutralForegroundDisabled);}", ".fiqfi0i:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);}", ".f9aagkg:enabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".fgv8l18:enabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f1p3jmxb:enabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f11yi64e:enabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fthrly9:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".fhdp2ht:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);}", ".f1rzj6jj:enabled:not(:checked):hover~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1jywl1l:enabled:not(:checked):hover~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f13d626x:enabled:not(:checked):hover~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1ivtmze:enabled:not(:checked):hover~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1uvnr57:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);}", ".frhcydi:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1pvt3n7:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f14i0clv:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fq9gcw4:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1se0d6r:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);}", ".f8l9son:enabled:checked~.fui-Switch__indicator{color:var(--colorNeutralForegroundInverted);}", ".f1c4gun2:enabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStroke);}", ".flhgtcm:enabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStroke);}", ".fx1zdd8:enabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStroke);}", ".fayrp2e:enabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStroke);}", ".f1p715pa:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}", ".firogjh:enabled:checked:hover~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1crd6p1:enabled:checked:hover~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".for8100:enabled:checked:hover~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1v5j4zb:enabled:checked:hover~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f116zuoq:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}", ".fxvotg6:enabled:checked:hover:active~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fk9ur30:enabled:checked:hover:active~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f3u5smv:enabled:checked:hover:active~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fdtj07x:enabled:checked:hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fv5mb1o:disabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1i2l8ou:disabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fxj1kmv:disabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fku528b:disabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fabcpc0:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);}", ".f17xwy6w:disabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeDisabled);}", ".fipwscc:disabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeDisabled);}", ".fab39iv:disabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeDisabled);}", ".f1th5z1l:disabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeDisabled);}"],
182
191
  "m": [["@media (forced-colors: active){.f19h63kc:disabled~.fui-Switch__indicator{color:GrayText;}}", {
183
192
  "m": "(forced-colors: active)"
184
193
  }], ["@media (forced-colors: active){.ffutfdj:disabled~.fui-Switch__indicator{border-top-color:GrayText;}}", {
package/lib-commonjs/components/Switch/useSwitchStyles.js.map CHANGED
@@ -1 +1 @@
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 '> *': {\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'transform',\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n left: 0,\n ...shorthands.margin(0),\n opacity: 0,\n position: 'absolute',\n top: 0,\n width: '100%',\n\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}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/"}
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.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\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",
3
+ "version": "9.0.5",
4
4
  "description": "Fluent UI React Switch component.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -21,23 +21,23 @@
21
21
  "start": "yarn storybook",
22
22
  "test": "jest --passWithNoTests",
23
23
  "docs": "api-extractor run --config=config/api-extractor.local.json --local",
24
- "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-switch/src && yarn docs",
25
- "storybook": "node ../../../scripts/storybook/runner",
24
+ "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-switch/src && yarn docs",
25
+ "storybook": "start-storybook",
26
26
  "type-check": "tsc -b tsconfig.json"
27
27
  },
28
28
  "devDependencies": {
29
29
  "@fluentui/eslint-plugin": "*",
30
30
  "@fluentui/react-conformance": "*",
31
- "@fluentui/react-conformance-griffel": "9.0.0-beta.11",
31
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.13",
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.3",
37
- "@fluentui/react-tabster": "^9.0.3",
38
- "@fluentui/react-theme": "^9.0.0",
39
- "@fluentui/react-utilities": "^9.0.2",
40
- "@griffel/react": "^1.2.0",
36
+ "@fluentui/react-label": "^9.0.5",
37
+ "@fluentui/react-tabster": "^9.1.1",
38
+ "@fluentui/react-theme": "^9.1.0",
39
+ "@fluentui/react-utilities": "^9.1.0",
40
+ "@griffel/react": "^1.3.0",
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": {
package/dist/tsdoc-metadata.json DELETED
@@ -1,11 +0,0 @@
1
- // This file is read by tools that parse documentation comments conforming to the TSDoc standard.
2
- // It should be published with your NPM package. It should not be tracked by Git.
3
- {
4
- "tsdocVersion": "0.12",
5
- "toolPackages": [
6
- {
7
- "packageName": "@microsoft/api-extractor",
8
- "packageVersion": "7.18.1"
9
- }
10
- ]
11
- }