@fluentui/react-switch 9.0.0-rc.5 → 9.0.0-rc.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +84 -1
- package/CHANGELOG.md +20 -2
- package/MIGRATION.md +89 -22
- package/Spec.md +179 -84
- package/dist/react-switch.d.ts +3 -0
- package/lib/components/Switch/useSwitchStyles.d.ts +3 -0
- package/lib/components/Switch/useSwitchStyles.js +25 -8
- package/lib/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib/index.d.ts +2 -2
- package/lib/index.js +2 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.d.ts +3 -0
- package/lib-commonjs/components/Switch/useSwitchStyles.js +25 -8
- package/lib-commonjs/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib-commonjs/index.d.ts +2 -2
- package/lib-commonjs/index.js +39 -2
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +9 -19
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,90 @@
|
|
|
2
2
|
"name": "@fluentui/react-switch",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 19 Apr 2022 19:14:04 GMT",
|
|
6
|
+
"tag": "@fluentui/react-switch_v9.0.0-rc.6",
|
|
7
|
+
"version": "9.0.0-rc.6",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "seanmonahan@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-switch",
|
|
13
|
+
"commit": "086a675fd0c648944ff4048450190a0a13467de3",
|
|
14
|
+
"comment": "Add deprecation messages to react-switch"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "olfedias@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-switch",
|
|
19
|
+
"commit": "e569d6e04d83cbcc6225e61db52ff81d2addd363",
|
|
20
|
+
"comment": "chore: Update Griffel to latest version"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "seanmonahan@microsoft.com",
|
|
24
|
+
"package": "@fluentui/react-switch",
|
|
25
|
+
"commit": "bea6aecfed8612f7b0664ab8bac77c5fccee1efb",
|
|
26
|
+
"comment": "update react-icons version to ^2.0.166-rc.3 from ^2.0.159-beta.10"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
30
|
+
"package": "@fluentui/react-switch",
|
|
31
|
+
"commit": "956f5731d132a960d313f3a9e794ce4e1c990e68",
|
|
32
|
+
"comment": "Removing star exports."
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "email not defined",
|
|
36
|
+
"package": "@fluentui/react-switch",
|
|
37
|
+
"commit": "99b11f73ab60b87b45c554403f7abcc21c713454",
|
|
38
|
+
"comment": "Switch: Updating spec and migration guide to reflect latest state of the component."
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-switch",
|
|
43
|
+
"comment": "Bump @fluentui/react-label to v9.0.0-beta.10",
|
|
44
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-switch",
|
|
49
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.6",
|
|
50
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"author": "beachball",
|
|
54
|
+
"package": "@fluentui/react-switch",
|
|
55
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.5",
|
|
56
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"author": "beachball",
|
|
60
|
+
"package": "@fluentui/react-switch",
|
|
61
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.6",
|
|
62
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"author": "beachball",
|
|
66
|
+
"package": "@fluentui/react-switch",
|
|
67
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4",
|
|
68
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
69
|
+
}
|
|
70
|
+
],
|
|
71
|
+
"none": [
|
|
72
|
+
{
|
|
73
|
+
"author": "elcraig@microsoft.com",
|
|
74
|
+
"package": "@fluentui/react-switch",
|
|
75
|
+
"commit": "b7f17e976f9e058f39c9fce4f0f9bb6eb4dfa577",
|
|
76
|
+
"comment": "Update React dev deps and hoist them to the repo root"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"author": "mgodbolt@microsoft.com",
|
|
80
|
+
"package": "@fluentui/react-switch",
|
|
81
|
+
"commit": "905e46db07ada986fd7885531f72a71b7bbaabdc",
|
|
82
|
+
"comment": "create v9 api extractor config and set all v9 packags to use it, suppress forgotten export"
|
|
83
|
+
}
|
|
84
|
+
]
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"date": "Fri, 04 Mar 2022 05:17:30 GMT",
|
|
6
89
|
"tag": "@fluentui/react-switch_v9.0.0-rc.5",
|
|
7
90
|
"version": "9.0.0-rc.5",
|
|
8
91
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,30 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-switch
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 19 Apr 2022 19:14:04 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-rc.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-rc.6)
|
|
8
|
+
|
|
9
|
+
Tue, 19 Apr 2022 19:14:04 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-rc.5..@fluentui/react-switch_v9.0.0-rc.6)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Add deprecation messages to react-switch ([PR #21960](https://github.com/microsoft/fluentui/pull/21960) by seanmonahan@microsoft.com)
|
|
15
|
+
- chore: Update Griffel to latest version ([PR #21976](https://github.com/microsoft/fluentui/pull/21976) by olfedias@microsoft.com)
|
|
16
|
+
- update react-icons version to ^2.0.166-rc.3 from ^2.0.159-beta.10 ([PR #22512](https://github.com/microsoft/fluentui/pull/22512) by seanmonahan@microsoft.com)
|
|
17
|
+
- Removing star exports. ([PR #22139](https://github.com/microsoft/fluentui/pull/22139) by Humberto.Morimoto@microsoft.com)
|
|
18
|
+
- Switch: Updating spec and migration guide to reflect latest state of the component. ([PR #22011](https://github.com/microsoft/fluentui/pull/22011) by email not defined)
|
|
19
|
+
- Bump @fluentui/react-label to v9.0.0-beta.10 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
20
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.6 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
21
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
22
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
23
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
24
|
+
|
|
7
25
|
## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-rc.5)
|
|
8
26
|
|
|
9
|
-
Fri, 04 Mar 2022 05:
|
|
27
|
+
Fri, 04 Mar 2022 05:17:30 GMT
|
|
10
28
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-rc.4..@fluentui/react-switch_v9.0.0-rc.5)
|
|
11
29
|
|
|
12
30
|
### Changes
|
package/MIGRATION.md
CHANGED
|
@@ -4,25 +4,92 @@
|
|
|
4
4
|
|
|
5
5
|
This Migration guide is a work in progress and is not yet ready for use.
|
|
6
6
|
|
|
7
|
-
## Migration from v8
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
- `
|
|
12
|
-
- `
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
- `
|
|
17
|
-
- `
|
|
18
|
-
- `
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
- `
|
|
7
|
+
## Migration from v8's Toggle
|
|
8
|
+
|
|
9
|
+
### Props that remain as is
|
|
10
|
+
|
|
11
|
+
- `checked`
|
|
12
|
+
- `defaultChecked`
|
|
13
|
+
|
|
14
|
+
### Props that have the same name but have a different implementation
|
|
15
|
+
|
|
16
|
+
- `as` - Uses new pattern for `as` introduced in v9
|
|
17
|
+
- `label` - Now implemented as a v9 slot
|
|
18
|
+
- `onChange` - Has a slightly different API with our new event data handling pattern
|
|
19
|
+
|
|
20
|
+
### Props removed because we can get them from HTML props
|
|
21
|
+
|
|
22
|
+
- `ariaLabel` => Getting it as `aria-label` instead
|
|
23
|
+
- `disabled`
|
|
24
|
+
- `role`
|
|
25
|
+
|
|
26
|
+
### Props no longer supported with an equivalent funtionality in v9's Switch
|
|
27
|
+
|
|
28
|
+
- `as`
|
|
29
|
+
- `componentRef` => Use regular `ref` instead
|
|
30
|
+
- `inlineLabel` => Use `labelPosition` instead
|
|
31
|
+
- `styles` => Use new styling system via `tokens` instead
|
|
32
|
+
|
|
33
|
+
### Props no longer supported without an equivalent functionality in v9's Switch
|
|
34
|
+
|
|
35
|
+
- `offText`
|
|
36
|
+
- `onText`
|
|
37
|
+
- `theme`
|
|
38
|
+
|
|
39
|
+
## Migration from v0's Checkbox
|
|
40
|
+
|
|
41
|
+
### Props that remain as is
|
|
42
|
+
|
|
43
|
+
- `checked`
|
|
44
|
+
- `defaultChecked`
|
|
45
|
+
- `labelPosition`
|
|
46
|
+
|
|
47
|
+
### Props that have the same name but have a different implementation
|
|
48
|
+
|
|
49
|
+
- `as` - Uses new pattern for `as` introduced in v9
|
|
50
|
+
- `indicator` => Now implemented as a v9 slot
|
|
51
|
+
- `label` - Now implemented as a v9 slot
|
|
52
|
+
- `onChange` - Has a slightly different API with our new event data handling pattern
|
|
53
|
+
|
|
54
|
+
### Props removed because we can get them from HTML props
|
|
55
|
+
|
|
56
|
+
- `className`
|
|
57
|
+
- `disabled`
|
|
58
|
+
- `onClick`
|
|
59
|
+
|
|
60
|
+
### Props no longer supported with an equivalent functionality in v9's Switch
|
|
61
|
+
|
|
62
|
+
- `accessibility` => Override accessibility behavior by composing the `Switch` however you want
|
|
63
|
+
- `styles` => Use new styling system via `tokens` instead
|
|
64
|
+
- `toggle` => Default behavior for `Switch` in v9
|
|
65
|
+
- `variables` => Use new styling system via `tokens` instead
|
|
66
|
+
|
|
67
|
+
### Props no longer supported without an equivalent functionality in v9's Switch
|
|
68
|
+
|
|
69
|
+
- `design`
|
|
70
|
+
|
|
71
|
+
## Propery mapping
|
|
72
|
+
|
|
73
|
+
| v8 `Toggle` | v0 `Checkbox` | v9 `Switch` |
|
|
74
|
+
| ---------------- | --------------- | ---------------- |
|
|
75
|
+
| | `accessibility` | |
|
|
76
|
+
| `arialabel` | `aria-label` | `aria-label` |
|
|
77
|
+
| `as` | `as` | `as` |
|
|
78
|
+
| `checked` | `checked` | `checked` |
|
|
79
|
+
| `className` | `className` | `className` |
|
|
80
|
+
| `componentRef` | | `ref` |
|
|
81
|
+
| `defaultChecked` | | |
|
|
82
|
+
| | `design` | |
|
|
83
|
+
| `disabled` | `disabled` | `disabled` |
|
|
84
|
+
| | `indicator` | `indicator` |
|
|
85
|
+
| `inlineLabel` | `labelPosition` | `labelPosition` |
|
|
86
|
+
| `label` | `label` | `label` |
|
|
87
|
+
| `offText` | | |
|
|
88
|
+
| `onChange` | `onChange` | `onChange` |
|
|
89
|
+
| `onClick` | `onClick` | `onClick` |
|
|
90
|
+
| `onText` | | |
|
|
91
|
+
| `role` | | `role` |
|
|
92
|
+
| `styles` | `styles` | |
|
|
93
|
+
| `theme` | | |
|
|
94
|
+
| Default behavior | `toggle` | Default behavior |
|
|
95
|
+
| | `variables` | |
|
package/Spec.md
CHANGED
|
@@ -1,134 +1,229 @@
|
|
|
1
1
|
# @fluentui/react-switch Spec
|
|
2
2
|
|
|
3
|
+
**GitHub Epic issue** - [Switch Convergence #19409](https://github.com/microsoft/fluentui/issues/19409)
|
|
4
|
+
|
|
3
5
|
## Background
|
|
4
6
|
|
|
5
|
-
Previously called Toggle in
|
|
6
|
-
introduces a quick way of switching between Boolean values by pressing the thumb.
|
|
7
|
+
Previously called `Toggle` in v8 and `Checkbox` in v0, the `Switch` component introduces a quick way of switching between on/off states by clicking/tapping the thumb.
|
|
7
8
|
|
|
8
9
|
## Prior Art
|
|
9
10
|
|
|
10
|
-
|
|
11
|
+
### Open UI
|
|
12
|
+
|
|
13
|
+
The Open UI [Switch Research](https://open-ui.org/components/switch) page shows that the component is used in UI platforms across the web, with the `Switch` moniker being the most prominently used across major component libraries.
|
|
14
|
+
|
|
15
|
+
### Comparison of v8 and v0
|
|
16
|
+
|
|
17
|
+
The existing components are:
|
|
18
|
+
|
|
19
|
+
- v8 - [Toggle](https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle)
|
|
20
|
+
- v0 - [Checkbox](https://fluentsite.z22.web.core.windows.net/0.52.2/components/checkbox/definition)
|
|
11
21
|
|
|
12
|
-
|
|
22
|
+
### [Toggle in v8/Fabric](https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle)
|
|
13
23
|
|
|
14
|
-
|
|
24
|
+
The v8 `Toggle` component
|
|
15
25
|
|
|
16
|
-
|
|
17
|
-
|
|
26
|
+
supports both `indeterminate` and `checked` states. In this case, an input tag is used and its opacity is set to 0. This allows for the logic to be performed by the native element while a div is rendered to show the styled checkbox.
|
|
27
|
+
|
|
28
|
+
Example
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
<Checkbox
|
|
32
|
+
label="Indeterminate checkbox (controlled)"
|
|
33
|
+
indeterminate={isIndeterminate}
|
|
34
|
+
checked={isChecked}
|
|
35
|
+
onChange={onChange}
|
|
36
|
+
/>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Component props:
|
|
40
|
+
|
|
41
|
+
| Prop | Description |
|
|
42
|
+
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
43
|
+
| `ariaLabel` | Text for screen-reader to announce as the name of the toggle. |
|
|
44
|
+
| `as` | Render the root element as another type. |
|
|
45
|
+
| `checked` | Checked state of the toggle. If you are maintaining state yourself, use this property. Otherwise use `defaultChecked`. |
|
|
46
|
+
| `componentRef` | Optional callback to access the IToggle interface. Use this instead of ref for accessing the public methods and properties of the component. |
|
|
47
|
+
| `defaultChecked` | Initial state of the toggle. If you want the toggle to maintain its own state, use this. Otherwise use `checked`. |
|
|
48
|
+
| `disabled` | Optional disabled flag. |
|
|
49
|
+
| `inlineLabel` | Whether the label (not the onText/offText) should bbe positioned inline with the toggle control. |
|
|
50
|
+
| `label` | A label for the toggle. |
|
|
51
|
+
| `offText` | Text to display when toggle is OFF. |
|
|
52
|
+
| `onChange` | Callback issued when the value changes. |
|
|
53
|
+
| `onText` | Text to display when toggle is ON. |
|
|
54
|
+
| `role` | Whether to use the 'switch' role (ARIA 1.1) or the 'checkbox' role (ARIA 1.0). |
|
|
55
|
+
| `styles` | Optional styles for the component. |
|
|
56
|
+
| `theme` | Theme provided by HOC. |
|
|
57
|
+
|
|
58
|
+
### [Checkbox in v0/Northstar](https://fluentsite.z22.web.core.windows.net/0.56.0/components/checkbox/definition)
|
|
59
|
+
|
|
60
|
+
The v0 `Checkbox` component
|
|
61
|
+
|
|
62
|
+
supports a mixed state, which is the same as indeterminate in v8. It is rendered as a `div` with `role="checkbox"` and does not use the native input element.
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
// string
|
|
66
|
+
<Checkbox label="Make my profile visible" />
|
|
67
|
+
|
|
68
|
+
// jsx
|
|
69
|
+
<Checkbox
|
|
70
|
+
label={
|
|
71
|
+
<span>
|
|
72
|
+
Long labels will wrap and the indicator <br /> should remain top-aligned.
|
|
73
|
+
</span>
|
|
74
|
+
}
|
|
75
|
+
/>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
Component props:
|
|
79
|
+
|
|
80
|
+
| Prop | Description |
|
|
81
|
+
| ---------------- | ------------------------------------------------------------------ |
|
|
82
|
+
| `accessibility` | Accessibility behavior if overridden by the user. |
|
|
83
|
+
| `as` | Render as given string or component. |
|
|
84
|
+
| `checked` | Checkbox's checked state. |
|
|
85
|
+
| `className` | Additional styles. |
|
|
86
|
+
| `defaultChecked` | Whether the checkbox should be set to checked by default. |
|
|
87
|
+
| `design` | ... |
|
|
88
|
+
| `disabled` | Whether the checkbox is disabled or not. |
|
|
89
|
+
| `indicator` | Checkbox's icon indicator. |
|
|
90
|
+
| `label` | Label text or jsx to be rendered in the label. |
|
|
91
|
+
| `labelPosition` | Whether the label is rendered on left or right (`start` or `end`). |
|
|
92
|
+
| `onChange` | Event handler to be called after checked state has changed. |
|
|
93
|
+
| `onClick` | Event handler to be called after the checkbox is clicked. |
|
|
94
|
+
| `styles` | Additional styles. |
|
|
95
|
+
| `toggle` | Render a toggle style checkbox with on and off choices. |
|
|
96
|
+
| `variables` | Additional styles. |
|
|
18
97
|
|
|
19
98
|
## Sample Code
|
|
20
99
|
|
|
21
|
-
```
|
|
100
|
+
```tsx
|
|
22
101
|
<Switch checked />
|
|
23
102
|
<Switch checked disabled/>
|
|
24
103
|
<Switch checked onChange={onChange}/>
|
|
25
104
|
```
|
|
26
105
|
|
|
106
|
+
https://github.com/microsoft/fluentui/blob/master/packages/react-checkbox/src/components/Checkbox/Checkbox.types.ts
|
|
107
|
+
|
|
27
108
|
## API
|
|
28
109
|
|
|
29
|
-
|
|
30
|
-
| -------------- | ------- | ------- | --------------------------------------------------------------------------- |
|
|
31
|
-
| checked | ✓ | ✓ | The value of the Switch. If `true` then the Switch will be enabled. |
|
|
32
|
-
| defaultChecked | ✓ | ✓ | The default value of the Switch. If `true` then the Switch will be enabled. |
|
|
33
|
-
| disabled | ✓ | ✓ | Whether the Switch should be disabled. |
|
|
34
|
-
| onChange | ✓ | ✓ | Callback to be called when the checked state value changes. |
|
|
110
|
+
### Switch Props
|
|
35
111
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
<img src="https://img.shields.io/badge/Used%20in-v0-orange" alt="drawing" width="100"/>
|
|
39
|
-
|
|
40
|
-
| Name | Description | Reason |
|
|
41
|
-
| ------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------ |
|
|
42
|
-
| indicator | A checkbox's indicator icon can be customized. | Toggle will have a slot for the thumb. |
|
|
43
|
-
| label | A checkbox can render a label next to its indicator. | To be decided on how it is handled |
|
|
44
|
-
| labelPosition | Determines whether the label should be positioned before or after the Switch. | To be decided on how it is handled |
|
|
45
|
-
| onClick | Called after a checkbox is clicked. | The native input element handles onClick. |
|
|
46
|
-
| toggle | A checkbox can be formatted to show an "on or off" choice. | Toggle is separated from checkbox due to vast styling differences. |
|
|
47
|
-
|
|
48
|
-
<img src="https://img.shields.io/badge/Used%20in-v8-blue" alt="drawing" width="120"/>
|
|
49
|
-
|
|
50
|
-
| Name | Description | Reason |
|
|
51
|
-
| ------------- | ----------------------------------------------------------------------------------------------- | ----------------------------------- |
|
|
52
|
-
| componentRef | Optional callback to access the IToggle interface. | Not used in converged components |
|
|
53
|
-
| label | A label for the toggle. | To be decided on how it is handled. |
|
|
54
|
-
| labelPosition | Determines whether the label should be positioned before or after the Switch. | To be decided on how it is handled |
|
|
55
|
-
| onText | Text to display when toggle is ON. | To be decided. |
|
|
56
|
-
| offText | Text to display when toggle is OFF. | To be decided. |
|
|
57
|
-
| ariaLabel | Text for screen-reader to announce as the name of the toggle. | Toggle has a hidden input element. |
|
|
58
|
-
| onAriaLabel | @deprecated Use `ariaLabel` for name, and let the metadata convey state | deprecated |
|
|
59
|
-
| offAriaLabel | @deprecated Use `ariaLabel` for name, and let the metadata convey state | deprecated |
|
|
60
|
-
| inlineLabel | Whether the label (not the onText/offText) should be positioned inline with the toggle control. | It can be manually styled |
|
|
61
|
-
| onChanged | @deprecated Use `onChange` instead. | deprecated |
|
|
62
|
-
| theme | Theme provided by HOC. | Not used in converged components |
|
|
63
|
-
| styles | Optional styles for the component. | Not used in converged components |
|
|
64
|
-
| role | Whether to use the 'switch' role (ARIA 1.1) or the 'checkbox' role (ARIA 1.0). | Toggle has a hidden input element. |
|
|
112
|
+
See [Switch.types.ts](https://github.com/microsoft/fluentui/blob/master/packages/react-switch/src/components/Switch/Switch.types.ts).
|
|
65
113
|
|
|
66
114
|
## Structure
|
|
67
115
|
|
|
68
|
-
|
|
116
|
+
### Slots
|
|
117
|
+
|
|
118
|
+
- `root` - The outer `<div>` wrapping the `indicator`, `input` and `label` to provide the correct layout styling.
|
|
119
|
+
- `indicator` - The track and the thumb sliding over it indicating the on and off status of the Switch.
|
|
120
|
+
- `input` - The visually hidden `<input type="checkbox">` that handles the `Switch`'s functionality. This is the **primary** slot: it receives all of the native props passed to the `Switch` component. It has opacity 0 and overlaps the entire `root` slot, for hit testing.
|
|
121
|
+
- `label` - (optional) The `<label>` describing this `Switch`.
|
|
69
122
|
|
|
70
|
-
|
|
71
|
-
|
|
123
|
+
### Public
|
|
124
|
+
|
|
125
|
+
```tsx
|
|
126
|
+
<Switch checked={true} />
|
|
72
127
|
```
|
|
73
128
|
|
|
74
|
-
|
|
129
|
+
### Internal
|
|
75
130
|
|
|
76
|
-
```
|
|
131
|
+
```tsx
|
|
77
132
|
<slots.root {...slotProps.root}>
|
|
78
|
-
<slots.
|
|
79
|
-
<slots.
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
133
|
+
<slots.input {...slotProps.input} />
|
|
134
|
+
{labelPosition !== 'after' && slots.label && <slots.label {...slotProps.label} />}
|
|
135
|
+
<slots.indicator {...slotProps.indicator} />
|
|
136
|
+
{labelPosition === 'after' && slots.label && <slots.label {...slotProps.label} />}
|
|
137
|
+
</slots.root>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
### DOM
|
|
141
|
+
|
|
142
|
+
_With label before the track thumb indicator:_
|
|
143
|
+
|
|
144
|
+
```tsx
|
|
145
|
+
<div class="fui-Switch">
|
|
146
|
+
<input class="fui-Switch__input" id="switch-1" role="switch" type="checkbox" />
|
|
147
|
+
<label class="fui-Switch__label" for="switch-1" />
|
|
148
|
+
<div aria-hidden="true" class="fui-Switch__indicator">
|
|
149
|
+
<CircleFilled />
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
84
152
|
```
|
|
85
153
|
|
|
86
|
-
|
|
154
|
+
_With label after the track thumb indicator:_
|
|
87
155
|
|
|
88
|
-
```
|
|
89
|
-
<div
|
|
90
|
-
<
|
|
91
|
-
<div
|
|
92
|
-
<
|
|
156
|
+
```tsx
|
|
157
|
+
<div class="fui-Switch">
|
|
158
|
+
<input class="fui-Switch__input" id="switch-1" role="switch" type="checkbox" />
|
|
159
|
+
<div aria-hidden="true" class="fui-Switch__indicator">
|
|
160
|
+
<CircleFilled />
|
|
93
161
|
</div>
|
|
94
|
-
<
|
|
95
|
-
</div
|
|
162
|
+
<label class="fui-Switch__label" for="switch-1" />
|
|
163
|
+
</div>
|
|
96
164
|
```
|
|
97
165
|
|
|
166
|
+
## Migration
|
|
167
|
+
|
|
168
|
+
See [MIGRATION.md](MIGRATION.md).
|
|
169
|
+
|
|
98
170
|
## Behaviors
|
|
99
171
|
|
|
100
|
-
###
|
|
172
|
+
### States
|
|
173
|
+
|
|
174
|
+
The following section describes the different states in which a `Switch` can be throughout the course of interaction with it.
|
|
175
|
+
|
|
176
|
+
#### Enabled state
|
|
177
|
+
|
|
178
|
+
An enabled `Switch` communicates interaction by having styling that invites the user to click/tap on it to toggle between on/off states.
|
|
179
|
+
|
|
180
|
+
#### Disabled state
|
|
181
|
+
|
|
182
|
+
A disabled `Switch` is non-interactive, ignoring all events and never updating its value. It does not allow focus and changes its styling to indicates this lack of interaction.
|
|
101
183
|
|
|
102
|
-
|
|
103
|
-
- When disabled, all events are ignored, and the Switch's value never updates.
|
|
104
|
-
- Does not allow focus.
|
|
105
|
-
- The cursor changes to `not-allowed`.
|
|
106
|
-
- **Checked**
|
|
107
|
-
- Switch is off when the “thumb” is indicated on the left.
|
|
108
|
-
- Switch is on when the thumb is indicated on the right.
|
|
109
|
-
- This is switched in RTL.
|
|
110
|
-
- When toggling switches on and off, the on state should change using the checked state appearance styles.
|
|
184
|
+
#### Hovered state
|
|
111
185
|
|
|
112
|
-
|
|
186
|
+
A hovered `Switch` changes styling to communicate that the user has placed a cursor above it.
|
|
113
187
|
|
|
114
|
-
|
|
188
|
+
#### Pressed state
|
|
115
189
|
|
|
116
|
-
|
|
190
|
+
A pressed `Switch` changes styling to communicate that the user is currently pressing it.
|
|
117
191
|
|
|
118
|
-
|
|
119
|
-
The expected keyboard shortcut for activating a Switch is the spacebar key.
|
|
192
|
+
#### Unchecked state
|
|
120
193
|
|
|
121
|
-
|
|
122
|
-
2. Use the spacebar to switch on
|
|
194
|
+
An unchecked `Switch` has the thumb on the left (right in RTL) and styling to indicate that it is off.
|
|
123
195
|
|
|
124
|
-
|
|
196
|
+
#### Checked state
|
|
125
197
|
|
|
126
|
-
|
|
198
|
+
A checked `Switch` has the thumb on the right (left in RTL) and styling to indicate that it is on.
|
|
127
199
|
|
|
128
|
-
###
|
|
200
|
+
### Interaction
|
|
129
201
|
|
|
130
|
-
|
|
202
|
+
### Keyboard interaction
|
|
203
|
+
|
|
204
|
+
The following is a set of keys that interact with the `Switch` component:
|
|
205
|
+
|
|
206
|
+
| Key | Description |
|
|
207
|
+
| ------- | ------------------------------- |
|
|
208
|
+
| `Space` | Switches between on/off states. |
|
|
209
|
+
|
|
210
|
+
### Cursor interaction
|
|
211
|
+
|
|
212
|
+
- `click`: Triggers a toggle between on and off values. The thumb animates from left to right [off > on] and right to left [on > off] to reflect this change (the directions are reversed in RTL).
|
|
213
|
+
|
|
214
|
+
### Touch interaction
|
|
215
|
+
|
|
216
|
+
The same behavior as above is traslated for touch events.
|
|
131
217
|
|
|
132
218
|
## Accessibility
|
|
133
219
|
|
|
134
|
-
|
|
220
|
+
### Relevant documents
|
|
221
|
+
|
|
222
|
+
- [WAI-ARIA 1.1 Spec](https://www.w3.org/TR/wai-aria-1.1/#switch)
|
|
223
|
+
- [WAI-ARIA 1.2 Spec](https://www.w3.org/TR/wai-aria-1.2/#switch)
|
|
224
|
+
- [WAI-ARIA 1.2 Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/#switch)
|
|
225
|
+
|
|
226
|
+
### Expected behavior
|
|
227
|
+
|
|
228
|
+
- Switch uses a standard HTML `<input type="checkbox">` with `role="switch"` set and does not require any additional handling for aria on the input element.
|
|
229
|
+
- The track and thumb indicator has `aria-hidden="true"` as it is a purely visual representation of the state of the underlying input.
|
package/dist/react-switch.d.ts
CHANGED
|
@@ -16,6 +16,9 @@ export declare const renderSwitch_unstable: (state: SwitchState) => JSX.Element;
|
|
|
16
16
|
*/
|
|
17
17
|
export declare const Switch: ForwardRefComponent<SwitchProps>;
|
|
18
18
|
|
|
19
|
+
/**
|
|
20
|
+
* @deprecated Use `switchClassNames.root` instead.
|
|
21
|
+
*/
|
|
19
22
|
export declare const switchClassName: string;
|
|
20
23
|
|
|
21
24
|
export declare const switchClassNames: SlotClassNames<SwitchSlots>;
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
2
2
|
import type { SwitchSlots, SwitchState } from './Switch.types';
|
|
3
3
|
export declare const switchClassNames: SlotClassNames<SwitchSlots>;
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `switchClassNames.root` instead.
|
|
6
|
+
*/
|
|
4
7
|
export declare const switchClassName: string;
|
|
5
8
|
/**
|
|
6
9
|
* Apply styling to the Switch slots based on the state
|
|
@@ -6,7 +6,10 @@ export const switchClassNames = {
|
|
|
6
6
|
indicator: 'fui-Switch__indicator',
|
|
7
7
|
input: 'fui-Switch__input',
|
|
8
8
|
label: 'fui-Switch__label'
|
|
9
|
-
};
|
|
9
|
+
};
|
|
10
|
+
/**
|
|
11
|
+
* @deprecated Use `switchClassNames.root` instead.
|
|
12
|
+
*/
|
|
10
13
|
|
|
11
14
|
export const switchClassName = switchClassNames.root; // TODO replace these spacing constants with theme values once they're on the theme.
|
|
12
15
|
|
|
@@ -30,16 +33,30 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
30
33
|
"uwmqm3": ["f177v4lu", "f19lj068"],
|
|
31
34
|
"qhf8xq": "f10pi13n",
|
|
32
35
|
"B486eqv": "f2hkw1w",
|
|
33
|
-
"
|
|
36
|
+
"vchsgm": "fbiesyy",
|
|
37
|
+
"ozrjjd": ["fq2kn9", "f1jxwnad"],
|
|
38
|
+
"B7lelfh": "f1il7mou",
|
|
39
|
+
"Bp3tz3o": ["f1jxwnad", "fq2kn9"],
|
|
34
40
|
"B8vm7ur": "f12sql3b",
|
|
35
41
|
"f4hv8x": "f1i4q40k",
|
|
36
42
|
"Gpan81": "fcrbge9",
|
|
37
|
-
"z7afg": "ft464mn",
|
|
38
43
|
"rsjj6t": "fskqmiq",
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
44
|
+
"E86f5s": "f1kbdjx9",
|
|
45
|
+
"f5nhos": ["fw1d893", "fpuz8dn"],
|
|
46
|
+
"Bhtq6h7": "f14hlsw1",
|
|
47
|
+
"Bubk9yy": ["fpuz8dn", "fw1d893"],
|
|
48
|
+
"dzajus": "f1bkt4b4",
|
|
49
|
+
"B8gmrwi": ["f16hf5f2", "f1qhqcal"],
|
|
50
|
+
"Byq6oy9": "fyyqeim",
|
|
51
|
+
"Bdy2j38": ["f1qhqcal", "f16hf5f2"],
|
|
52
|
+
"Bi8bqab": ["f1aneyfs", "f15nmyc0"],
|
|
53
|
+
"kq6z4e": ["f15nmyc0", "f1aneyfs"],
|
|
54
|
+
"l5tc3q": ["f3cpy5b", "f13v6kgv"],
|
|
55
|
+
"d1z3ck": ["f13v6kgv", "f3cpy5b"],
|
|
56
|
+
"epcuuz": "filx0we",
|
|
57
|
+
"Ba33l6n": ["f1horip2", "fgnx9ah"],
|
|
58
|
+
"va7z1g": "fkii2tb",
|
|
59
|
+
"Bmi6mq9": ["fgnx9ah", "f1horip2"],
|
|
43
60
|
"Bjkpy09": "f1unftzx",
|
|
44
61
|
"Jxg1p8": "f8rjbh6",
|
|
45
62
|
"Bc94xmo": ["fxfgh6q", "f8l10fm"],
|
|
@@ -61,7 +78,7 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
61
78
|
"Beiy3e4": "f1063pyq"
|
|
62
79
|
}
|
|
63
80
|
}, {
|
|
64
|
-
"d": [".f1ewtqcl{box-sizing:border-box;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".f10pi13n{position:relative;}", "[data-keyboard-nav] .
|
|
81
|
+
"d": [".f1ewtqcl{box-sizing:border-box;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".f10pi13n{position:relative;}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f1kbdjx9:focus-within:after{border-top-style:solid;}", "[data-keyboard-nav] .fw1d893:focus-within:after{border-right-style:solid;}", "[data-keyboard-nav] .fpuz8dn:focus-within:after{border-left-style:solid;}", "[data-keyboard-nav] .f14hlsw1:focus-within:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f1bkt4b4:focus-within:after{border-top-width:2px;}", "[data-keyboard-nav] .f16hf5f2:focus-within:after{border-right-width:2px;}", "[data-keyboard-nav] .f1qhqcal:focus-within:after{border-left-width:2px;}", "[data-keyboard-nav] .fyyqeim:focus-within:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f1aneyfs:focus-within:after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f15nmyc0:focus-within:after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f3cpy5b:focus-within:after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f13v6kgv:focus-within:after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .filx0we:focus-within:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1horip2:focus-within:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgnx9ah:focus-within:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fkii2tb:focus-within:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f10ra9hq{padding-top:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}"],
|
|
65
82
|
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
66
83
|
});
|
|
67
84
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"AAAA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAIA,OAAO,MAAM,gBAAgB,GAAgC;AAC3D,EAAA,IAAI,EAAE,YADqD;AAE3D,EAAA,SAAS,EAAE,uBAFgD;AAG3D,EAAA,KAAK,EAAE,mBAHoD;AAI3D,EAAA,KAAK,EAAE;AAJoD,CAAtD
|
|
1
|
+
{"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// TODO replace these spacing constants with theme values once they're on the theme.\nconst spacingXS = 4;\nconst spacingS = 8;\nconst spacingM = 12;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst thumbSize = 14;\nconst trackHeight = 20;\nconst trackWidth = 40;\n\nconst useRootStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n columnGap: `${spacingM}px`,\n display: 'inline-flex',\n ...shorthands.padding(`${spacingS}px`),\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n // Label position variations\n above: {\n flexDirection: 'column',\n paddingTop: `${spacingXS}px`,\n rowGap: `${spacingXS}px`,\n },\n after: {\n alignItems: 'flex-start',\n columnGap: `${spacingM}px`,\n flexDirection: 'row',\n },\n before: {\n alignItems: 'flex-start',\n columnGap: `${spacingM}px`,\n flexDirection: 'row',\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('1px'),\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize + spaceBetweenThumbAndTrack}px`,\n height: `${trackHeight}px`,\n pointerEvents: 'none',\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n\n '> *': {\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'transform',\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n left: 0,\n ...shorthands.margin(0),\n opacity: 0,\n position: 'absolute',\n top: 0,\n width: '100%',\n\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack * 2}px)`,\n },\n },\n },\n\n // Disabled (both checked and unchecked)\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Enabled and checked\n ':enabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n },\n\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n userSelect: 'none',\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 rootStyles[labelPosition],\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n state.input.className = mergeClasses(switchClassNames.input, inputStyles.base, state.input.className);\n\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, state.label.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
package/lib/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export {};
|
|
2
|
-
export
|
|
1
|
+
export { Switch, renderSwitch_unstable, switchClassName, switchClassNames, useSwitchStyles_unstable, useSwitch_unstable, } from './Switch';
|
|
2
|
+
export type { SwitchOnChangeData, SwitchProps, SwitchSlots, SwitchState } from './Switch';
|
package/lib/index.js
CHANGED
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE,qBAFF,EAGE;AACA,eAJF,EAKE,gBALF,EAME,wBANF,EAOE,kBAPF,QAQO,UARP","sourcesContent":["export {\n Switch,\n renderSwitch_unstable,\n // eslint-disable-next-line deprecation/deprecation\n switchClassName,\n switchClassNames,\n useSwitchStyles_unstable,\n useSwitch_unstable,\n} from './Switch';\nexport type { SwitchOnChangeData, SwitchProps, SwitchSlots, SwitchState } from './Switch';\n"],"sourceRoot":"../src/"}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
2
2
|
import type { SwitchSlots, SwitchState } from './Switch.types';
|
|
3
3
|
export declare const switchClassNames: SlotClassNames<SwitchSlots>;
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `switchClassNames.root` instead.
|
|
6
|
+
*/
|
|
4
7
|
export declare const switchClassName: string;
|
|
5
8
|
/**
|
|
6
9
|
* Apply styling to the Switch slots based on the state
|
|
@@ -16,7 +16,10 @@ exports.switchClassNames = {
|
|
|
16
16
|
indicator: 'fui-Switch__indicator',
|
|
17
17
|
input: 'fui-Switch__input',
|
|
18
18
|
label: 'fui-Switch__label'
|
|
19
|
-
};
|
|
19
|
+
};
|
|
20
|
+
/**
|
|
21
|
+
* @deprecated Use `switchClassNames.root` instead.
|
|
22
|
+
*/
|
|
20
23
|
|
|
21
24
|
exports.switchClassName = exports.switchClassNames.root; // TODO replace these spacing constants with theme values once they're on the theme.
|
|
22
25
|
|
|
@@ -40,16 +43,30 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
40
43
|
"uwmqm3": ["f177v4lu", "f19lj068"],
|
|
41
44
|
"qhf8xq": "f10pi13n",
|
|
42
45
|
"B486eqv": "f2hkw1w",
|
|
43
|
-
"
|
|
46
|
+
"vchsgm": "fbiesyy",
|
|
47
|
+
"ozrjjd": ["fq2kn9", "f1jxwnad"],
|
|
48
|
+
"B7lelfh": "f1il7mou",
|
|
49
|
+
"Bp3tz3o": ["f1jxwnad", "fq2kn9"],
|
|
44
50
|
"B8vm7ur": "f12sql3b",
|
|
45
51
|
"f4hv8x": "f1i4q40k",
|
|
46
52
|
"Gpan81": "fcrbge9",
|
|
47
|
-
"z7afg": "ft464mn",
|
|
48
53
|
"rsjj6t": "fskqmiq",
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
54
|
+
"E86f5s": "f1kbdjx9",
|
|
55
|
+
"f5nhos": ["fw1d893", "fpuz8dn"],
|
|
56
|
+
"Bhtq6h7": "f14hlsw1",
|
|
57
|
+
"Bubk9yy": ["fpuz8dn", "fw1d893"],
|
|
58
|
+
"dzajus": "f1bkt4b4",
|
|
59
|
+
"B8gmrwi": ["f16hf5f2", "f1qhqcal"],
|
|
60
|
+
"Byq6oy9": "fyyqeim",
|
|
61
|
+
"Bdy2j38": ["f1qhqcal", "f16hf5f2"],
|
|
62
|
+
"Bi8bqab": ["f1aneyfs", "f15nmyc0"],
|
|
63
|
+
"kq6z4e": ["f15nmyc0", "f1aneyfs"],
|
|
64
|
+
"l5tc3q": ["f3cpy5b", "f13v6kgv"],
|
|
65
|
+
"d1z3ck": ["f13v6kgv", "f3cpy5b"],
|
|
66
|
+
"epcuuz": "filx0we",
|
|
67
|
+
"Ba33l6n": ["f1horip2", "fgnx9ah"],
|
|
68
|
+
"va7z1g": "fkii2tb",
|
|
69
|
+
"Bmi6mq9": ["fgnx9ah", "f1horip2"],
|
|
53
70
|
"Bjkpy09": "f1unftzx",
|
|
54
71
|
"Jxg1p8": "f8rjbh6",
|
|
55
72
|
"Bc94xmo": ["fxfgh6q", "f8l10fm"],
|
|
@@ -71,7 +88,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
71
88
|
"Beiy3e4": "f1063pyq"
|
|
72
89
|
}
|
|
73
90
|
}, {
|
|
74
|
-
"d": [".f1ewtqcl{box-sizing:border-box;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".f10pi13n{position:relative;}", "[data-keyboard-nav] .
|
|
91
|
+
"d": [".f1ewtqcl{box-sizing:border-box;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".f10pi13n{position:relative;}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f1kbdjx9:focus-within:after{border-top-style:solid;}", "[data-keyboard-nav] .fw1d893:focus-within:after{border-right-style:solid;}", "[data-keyboard-nav] .fpuz8dn:focus-within:after{border-left-style:solid;}", "[data-keyboard-nav] .f14hlsw1:focus-within:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f1bkt4b4:focus-within:after{border-top-width:2px;}", "[data-keyboard-nav] .f16hf5f2:focus-within:after{border-right-width:2px;}", "[data-keyboard-nav] .f1qhqcal:focus-within:after{border-left-width:2px;}", "[data-keyboard-nav] .fyyqeim:focus-within:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f1aneyfs:focus-within:after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f15nmyc0:focus-within:after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f3cpy5b:focus-within:after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f13v6kgv:focus-within:after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .filx0we:focus-within:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1horip2:focus-within:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgnx9ah:focus-within:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fkii2tb:focus-within:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f10ra9hq{padding-top:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}"],
|
|
75
92
|
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
76
93
|
});
|
|
77
94
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAIa,OAAA,CAAA,gBAAA,GAAgD;AAC3D,EAAA,IAAI,EAAE,YADqD;AAE3D,EAAA,SAAS,EAAE,uBAFgD;AAG3D,EAAA,KAAK,EAAE,mBAHoD;AAI3D,EAAA,KAAK,EAAE;AAJoD,CAAhD
|
|
1
|
+
{"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// TODO replace these spacing constants with theme values once they're on the theme.\nconst spacingXS = 4;\nconst spacingS = 8;\nconst spacingM = 12;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst thumbSize = 14;\nconst trackHeight = 20;\nconst trackWidth = 40;\n\nconst useRootStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n columnGap: `${spacingM}px`,\n display: 'inline-flex',\n ...shorthands.padding(`${spacingS}px`),\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n // Label position variations\n above: {\n flexDirection: 'column',\n paddingTop: `${spacingXS}px`,\n rowGap: `${spacingXS}px`,\n },\n after: {\n alignItems: 'flex-start',\n columnGap: `${spacingM}px`,\n flexDirection: 'row',\n },\n before: {\n alignItems: 'flex-start',\n columnGap: `${spacingM}px`,\n flexDirection: 'row',\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('1px'),\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize + spaceBetweenThumbAndTrack}px`,\n height: `${trackHeight}px`,\n pointerEvents: 'none',\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n\n '> *': {\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'transform',\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n left: 0,\n ...shorthands.margin(0),\n opacity: 0,\n position: 'absolute',\n top: 0,\n width: '100%',\n\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack * 2}px)`,\n },\n },\n },\n\n // Disabled (both checked and unchecked)\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Enabled and checked\n ':enabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n },\n\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n userSelect: 'none',\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 rootStyles[labelPosition],\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n state.input.className = mergeClasses(switchClassNames.input, inputStyles.base, state.input.className);\n\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, state.label.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
package/lib-commonjs/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export {};
|
|
2
|
-
export
|
|
1
|
+
export { Switch, renderSwitch_unstable, switchClassName, switchClassNames, useSwitchStyles_unstable, useSwitch_unstable, } from './Switch';
|
|
2
|
+
export type { SwitchOnChangeData, SwitchProps, SwitchSlots, SwitchState } from './Switch';
|
package/lib-commonjs/index.js
CHANGED
|
@@ -3,8 +3,45 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
exports.useSwitch_unstable = exports.useSwitchStyles_unstable = exports.switchClassNames = exports.switchClassName = exports.renderSwitch_unstable = exports.Switch = void 0;
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
var Switch_1 = /*#__PURE__*/require("./Switch");
|
|
8
9
|
|
|
9
|
-
|
|
10
|
+
Object.defineProperty(exports, "Switch", {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function () {
|
|
13
|
+
return Switch_1.Switch;
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
Object.defineProperty(exports, "renderSwitch_unstable", {
|
|
17
|
+
enumerable: true,
|
|
18
|
+
get: function () {
|
|
19
|
+
return Switch_1.renderSwitch_unstable;
|
|
20
|
+
}
|
|
21
|
+
}); // eslint-disable-next-line deprecation/deprecation
|
|
22
|
+
|
|
23
|
+
Object.defineProperty(exports, "switchClassName", {
|
|
24
|
+
enumerable: true,
|
|
25
|
+
get: function () {
|
|
26
|
+
return Switch_1.switchClassName;
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
Object.defineProperty(exports, "switchClassNames", {
|
|
30
|
+
enumerable: true,
|
|
31
|
+
get: function () {
|
|
32
|
+
return Switch_1.switchClassNames;
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
Object.defineProperty(exports, "useSwitchStyles_unstable", {
|
|
36
|
+
enumerable: true,
|
|
37
|
+
get: function () {
|
|
38
|
+
return Switch_1.useSwitchStyles_unstable;
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
Object.defineProperty(exports, "useSwitch_unstable", {
|
|
42
|
+
enumerable: true,
|
|
43
|
+
get: function () {
|
|
44
|
+
return Switch_1.useSwitch_unstable;
|
|
45
|
+
}
|
|
46
|
+
});
|
|
10
47
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,QAAA,gBAAA,OAAA,CAAA,UAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,QAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,MAAA;AAAM;AAAN,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,qBAAA;AAAqB;AAArB,CAAA,E,CACA;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,wBAAA;AAAwB;AAAxB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,QAAA,CAAA,kBAAA;AAAkB;AAAlB,CAAA","sourcesContent":["export {\n Switch,\n renderSwitch_unstable,\n // eslint-disable-next-line deprecation/deprecation\n switchClassName,\n switchClassNames,\n useSwitchStyles_unstable,\n useSwitch_unstable,\n} from './Switch';\nexport type { SwitchOnChangeData, SwitchProps, SwitchSlots, SwitchState } from './Switch';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-switch",
|
|
3
|
-
"version": "9.0.0-rc.
|
|
3
|
+
"version": "9.0.0-rc.6",
|
|
4
4
|
"description": "Fluent UI React Switch component.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -28,26 +28,16 @@
|
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
30
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
32
|
-
"@fluentui/scripts": "^1.0.0"
|
|
33
|
-
"@types/enzyme": "3.10.3",
|
|
34
|
-
"@types/enzyme-adapter-react-16": "1.0.3",
|
|
35
|
-
"@types/react": "16.9.42",
|
|
36
|
-
"@types/react-dom": "16.9.10",
|
|
37
|
-
"@types/react-test-renderer": "^16.0.0",
|
|
38
|
-
"enzyme": "~3.10.0",
|
|
39
|
-
"enzyme-adapter-react-16": "^1.15.0",
|
|
40
|
-
"react": "16.8.6",
|
|
41
|
-
"react-dom": "16.8.6",
|
|
42
|
-
"react-test-renderer": "^16.3.0"
|
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.4",
|
|
32
|
+
"@fluentui/scripts": "^1.0.0"
|
|
43
33
|
},
|
|
44
34
|
"dependencies": {
|
|
45
|
-
"@fluentui/react-icons": "^2.0.
|
|
46
|
-
"@fluentui/react-label": "9.0.0-beta.
|
|
47
|
-
"@fluentui/react-tabster": "9.0.0-rc.
|
|
48
|
-
"@fluentui/react-theme": "9.0.0-rc.
|
|
49
|
-
"@fluentui/react-utilities": "9.0.0-rc.
|
|
50
|
-
"@griffel/react": "1.0.
|
|
35
|
+
"@fluentui/react-icons": "^2.0.166-rc.3",
|
|
36
|
+
"@fluentui/react-label": "9.0.0-beta.10",
|
|
37
|
+
"@fluentui/react-tabster": "9.0.0-rc.6",
|
|
38
|
+
"@fluentui/react-theme": "9.0.0-rc.5",
|
|
39
|
+
"@fluentui/react-utilities": "9.0.0-rc.6",
|
|
40
|
+
"@griffel/react": "1.0.3",
|
|
51
41
|
"tslib": "^2.1.0"
|
|
52
42
|
},
|
|
53
43
|
"peerDependencies": {
|