@fluentui/react-slider 9.0.0-beta.18 → 9.0.0-beta.20
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 +123 -1
- package/CHANGELOG.md +34 -2
- package/MIGRATION.md +35 -11
- package/README.md +16 -8
- package/Spec.md +17 -0
- package/lib/components/Slider/Slider.js.map +1 -1
- package/lib/components/Slider/renderSlider.js.map +1 -1
- package/lib/components/Slider/useSlider.js.map +1 -1
- package/lib/components/Slider/useSliderState.js.map +1 -1
- package/lib/components/Slider/useSliderStyles.js +116 -99
- package/lib/components/Slider/useSliderStyles.js.map +1 -1
- package/lib-commonjs/components/Slider/Slider.js.map +1 -1
- package/lib-commonjs/components/Slider/index.js.map +1 -1
- package/lib-commonjs/components/Slider/renderSlider.js.map +1 -1
- package/lib-commonjs/components/Slider/useSlider.js.map +1 -1
- package/lib-commonjs/components/Slider/useSliderState.js.map +1 -1
- package/lib-commonjs/components/Slider/useSliderStyles.js +116 -99
- package/lib-commonjs/components/Slider/useSliderStyles.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +8 -8
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,129 @@
|
|
|
2
2
|
"name": "@fluentui/react-slider",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Tue,
|
|
5
|
+
"date": "Tue, 28 Jun 2022 15:09:10 GMT",
|
|
6
|
+
"tag": "@fluentui/react-slider_v9.0.0-beta.20",
|
|
7
|
+
"version": "9.0.0-beta.20",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "lingfangao@hotmail.com",
|
|
12
|
+
"package": "@fluentui/react-slider",
|
|
13
|
+
"commit": "675acea49c97f10837ddee9b8c4350ca27750125",
|
|
14
|
+
"comment": "Bump Griffel dependencies"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-slider",
|
|
19
|
+
"commit": "b3030f9e880a04e117392077385ffd18618de98e",
|
|
20
|
+
"comment": "README, spec and migration guide cleanup."
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
24
|
+
"package": "@fluentui/react-slider",
|
|
25
|
+
"commit": "79a3a86436a5194f83cdaf561cd04e24a9a07d78",
|
|
26
|
+
"comment": "README update."
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
30
|
+
"package": "@fluentui/react-slider",
|
|
31
|
+
"commit": "fd4c88b3915ed3e26d4d39bcb24390343b8299ac",
|
|
32
|
+
"comment": "fix: Removing user-select: 'none' from label."
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
36
|
+
"package": "@fluentui/react-slider",
|
|
37
|
+
"commit": "09f58dcbef2306875046261dc0b7821283ccc287",
|
|
38
|
+
"comment": "chore: Using ::before and ::after instead of :before and :after."
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "lingfangao@hotmail.com",
|
|
42
|
+
"package": "@fluentui/react-slider",
|
|
43
|
+
"commit": "e0aabd850b15adf9c151ebd4e332f7c50ad6cfdf",
|
|
44
|
+
"comment": "Update 9.0.0-rc dependencies to use caret range"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-slider",
|
|
49
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0",
|
|
50
|
+
"commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"author": "beachball",
|
|
54
|
+
"package": "@fluentui/react-slider",
|
|
55
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0",
|
|
56
|
+
"commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"author": "beachball",
|
|
60
|
+
"package": "@fluentui/react-slider",
|
|
61
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0",
|
|
62
|
+
"commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"author": "beachball",
|
|
66
|
+
"package": "@fluentui/react-slider",
|
|
67
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0",
|
|
68
|
+
"commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"author": "beachball",
|
|
72
|
+
"package": "@fluentui/react-slider",
|
|
73
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9",
|
|
74
|
+
"commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"author": "beachball",
|
|
78
|
+
"package": "@fluentui/react-slider",
|
|
79
|
+
"comment": "Bump @fluentui/react-label to v9.0.0",
|
|
80
|
+
"commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
|
|
81
|
+
}
|
|
82
|
+
],
|
|
83
|
+
"none": [
|
|
84
|
+
{
|
|
85
|
+
"author": "mgodbolt@microsoft.com",
|
|
86
|
+
"package": "@fluentui/react-slider",
|
|
87
|
+
"commit": "7f98d4ea4ac70a960365214ac4ceed7857673d6d",
|
|
88
|
+
"comment": "chore: convert slider stories to index based approach"
|
|
89
|
+
}
|
|
90
|
+
]
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"date": "Thu, 23 Jun 2022 14:25:31 GMT",
|
|
95
|
+
"tag": "@fluentui/react-slider_v9.0.0-beta.19",
|
|
96
|
+
"version": "9.0.0-beta.19",
|
|
97
|
+
"comments": {
|
|
98
|
+
"prerelease": [
|
|
99
|
+
{
|
|
100
|
+
"author": "beachball",
|
|
101
|
+
"package": "@fluentui/react-slider",
|
|
102
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.11",
|
|
103
|
+
"commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
"author": "beachball",
|
|
107
|
+
"package": "@fluentui/react-slider",
|
|
108
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.14",
|
|
109
|
+
"commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"author": "beachball",
|
|
113
|
+
"package": "@fluentui/react-slider",
|
|
114
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.10",
|
|
115
|
+
"commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
"author": "beachball",
|
|
119
|
+
"package": "@fluentui/react-slider",
|
|
120
|
+
"comment": "Bump @fluentui/react-label to v9.0.0-rc.6",
|
|
121
|
+
"commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
|
|
122
|
+
}
|
|
123
|
+
]
|
|
124
|
+
}
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"date": "Tue, 31 May 2022 21:28:46 GMT",
|
|
6
128
|
"tag": "@fluentui/react-slider_v9.0.0-beta.18",
|
|
7
129
|
"version": "9.0.0-beta.18",
|
|
8
130
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,44 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-slider
|
|
2
2
|
|
|
3
|
-
This log was last generated on Tue,
|
|
3
|
+
This log was last generated on Tue, 28 Jun 2022 15:09:10 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-beta.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-beta.20)
|
|
8
|
+
|
|
9
|
+
Tue, 28 Jun 2022 15:09:10 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-beta.19..@fluentui/react-slider_v9.0.0-beta.20)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Bump Griffel dependencies ([PR #23688](https://github.com/microsoft/fluentui/pull/23688) by lingfangao@hotmail.com)
|
|
15
|
+
- README, spec and migration guide cleanup. ([PR #23398](https://github.com/microsoft/fluentui/pull/23398) by Humberto.Morimoto@microsoft.com)
|
|
16
|
+
- README update. ([PR #23439](https://github.com/microsoft/fluentui/pull/23439) by Humberto.Morimoto@microsoft.com)
|
|
17
|
+
- fix: Removing user-select: 'none' from label. ([PR #23590](https://github.com/microsoft/fluentui/pull/23590) by Humberto.Morimoto@microsoft.com)
|
|
18
|
+
- chore: Using ::before and ::after instead of :before and :after. ([PR #23469](https://github.com/microsoft/fluentui/pull/23469) by Humberto.Morimoto@microsoft.com)
|
|
19
|
+
- Update 9.0.0-rc dependencies to use caret range ([PR #23732](https://github.com/microsoft/fluentui/pull/23732) by lingfangao@hotmail.com)
|
|
20
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
|
21
|
+
- Bump @fluentui/react-tabster to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
|
22
|
+
- Bump @fluentui/react-theme to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
|
23
|
+
- Bump @fluentui/react-utilities to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
|
24
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
|
25
|
+
- Bump @fluentui/react-label to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
|
26
|
+
|
|
27
|
+
## [9.0.0-beta.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-beta.19)
|
|
28
|
+
|
|
29
|
+
Thu, 23 Jun 2022 14:25:31 GMT
|
|
30
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-beta.18..@fluentui/react-slider_v9.0.0-beta.19)
|
|
31
|
+
|
|
32
|
+
### Changes
|
|
33
|
+
|
|
34
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.11 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
|
|
35
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.14 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
|
|
36
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.10 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
|
|
37
|
+
- Bump @fluentui/react-label to v9.0.0-rc.6 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
|
|
38
|
+
|
|
7
39
|
## [9.0.0-beta.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-beta.18)
|
|
8
40
|
|
|
9
|
-
Tue, 31 May 2022 21:
|
|
41
|
+
Tue, 31 May 2022 21:28:46 GMT
|
|
10
42
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-beta.17..@fluentui/react-slider_v9.0.0-beta.18)
|
|
11
43
|
|
|
12
44
|
### Changes
|
package/MIGRATION.md
CHANGED
|
@@ -4,26 +4,50 @@ The Slider control is a thin wrapper around an `<input type="range"/>`. Addition
|
|
|
4
4
|
|
|
5
5
|
## Migration from v8
|
|
6
6
|
|
|
7
|
+
- `ariaLabel` => use `aria-label` instead
|
|
8
|
+
- `ariaValueText` => explicitely set `aria-valuetext`
|
|
9
|
+
- `buttonProps` => Slider props, other than className and id, are passed to `input` element
|
|
7
10
|
- `componentRef` => use `ref` instead.
|
|
8
|
-
- `styles` => pass classNames to individual slots
|
|
9
|
-
- `theme` => use `FluentProvider` HOC instead
|
|
10
|
-
- `label` => Use `Label` control with `htmlFor` and `id`
|
|
11
11
|
- `inline` => use css, or wrap in flex parent
|
|
12
|
-
- `
|
|
12
|
+
- `label` => Use `Label` control with `htmlFor` and `id`
|
|
13
13
|
- `onChanged` => use onChange and onMouse events
|
|
14
|
-
- `ranged`, `defaultLowerValue` and `lowerValue` => Not supported. Multi value slider will be future work in separate control.
|
|
15
14
|
- `origin` => no longer supported
|
|
15
|
+
- `originFromZero` => no longer supported
|
|
16
|
+
- `ranged`, `defaultLowerValue` and `lowerValue` => Not supported. Multi value slider will be future work in separate control.
|
|
17
|
+
- `showValue` and `valueFormat` => use explicitly rendered value instead
|
|
16
18
|
- `snapToStep` => use `step` instead
|
|
17
|
-
- `
|
|
18
|
-
- `
|
|
19
|
-
- `ariaLabel` => use `aria-label` instead
|
|
20
|
-
- `ariaValueText` => explicitely set `aria-valuetext`
|
|
19
|
+
- `styles` => pass classNames to individual slots
|
|
20
|
+
- `theme` => use `FluentProvider` HOC instead
|
|
21
21
|
|
|
22
22
|
## Migration from v0
|
|
23
23
|
|
|
24
24
|
- `accessibility` => use `aria-*` properties directly on `Slider`
|
|
25
25
|
- `fluid` => use css, or wrap in flex parent
|
|
26
|
-
- `inputRef` => `ref`
|
|
27
26
|
- `getA11yValueMessageOnChange` => explicitely set `aria-value-text`
|
|
28
|
-
- `label` => use explicitly rendered value instead
|
|
29
27
|
- `input` => Slider props, other than className and id, are passed to `input` element
|
|
28
|
+
- `inputRef` => `ref`
|
|
29
|
+
- `label` => use explicitly rendered value instead
|
|
30
|
+
|
|
31
|
+
## Property mapping
|
|
32
|
+
|
|
33
|
+
| v8 `Slider` | v0 `Slider` | v9 `Slider` |
|
|
34
|
+
| ------------------- | ---------------- | ---------------- |
|
|
35
|
+
| | `accessibility` | |
|
|
36
|
+
| `ariaLabel` | `aria-label` | `aria-label` |
|
|
37
|
+
| `ariaValueText` | `aria-valuetext` | `aria-valuetext` |
|
|
38
|
+
| `buttonProps` | | |
|
|
39
|
+
| `componentRef` | `inputRef` | `ref` |
|
|
40
|
+
| `defaultLowerValue` | | |
|
|
41
|
+
| `inline` | | |
|
|
42
|
+
| `input` | | `input` |
|
|
43
|
+
| `label` | `label` | |
|
|
44
|
+
| `lowerValue` | | |
|
|
45
|
+
| `onChanged` | | `onChange` |
|
|
46
|
+
| `origin` | | |
|
|
47
|
+
| `originFromZero` | | |
|
|
48
|
+
| `ranged` | | |
|
|
49
|
+
| `showValue` | | |
|
|
50
|
+
| `snapToStep` | | `step` |
|
|
51
|
+
| `styles` | | `className` |
|
|
52
|
+
| `theme` | | |
|
|
53
|
+
| `valueFormat` | | |
|
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @fluentui/react-slider
|
|
2
2
|
|
|
3
|
-
**Slider
|
|
3
|
+
**Slider components for [Fluent UI React](https://aka.ms/fluentui-storybook)**
|
|
4
4
|
|
|
5
5
|
Slider allows users to quickly select a value (or range) by dragging a thumb across a rail. It is often used when setting values with a relaxed precision such as audio volume and screen brightness.
|
|
6
6
|
|
|
@@ -12,12 +12,6 @@ To import Slider:
|
|
|
12
12
|
import { Slider } from '@fluentui/react-components';
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
-
Or pull directly from slider package to pin to a specific version.
|
|
16
|
-
|
|
17
|
-
```js
|
|
18
|
-
import { Slider } from '@fluentui/react-slider';
|
|
19
|
-
```
|
|
20
|
-
|
|
21
15
|
### Examples
|
|
22
16
|
|
|
23
17
|
```jsx
|
|
@@ -27,7 +21,21 @@ import { Slider } from '@fluentui/react-slider';
|
|
|
27
21
|
<Slider min={0} max={10} />
|
|
28
22
|
<Slider vertical />
|
|
29
23
|
<Slider disabled />
|
|
30
|
-
<Slider origin={2} />
|
|
31
24
|
<Slider step={10} />
|
|
32
25
|
<Slider size="small" />
|
|
33
26
|
```
|
|
27
|
+
|
|
28
|
+
See [Fluent UI Storybook](https://aka.ms/fluentui-storybook) for more detailed usage examples.
|
|
29
|
+
|
|
30
|
+
Alternatively, run Storybook locally with:
|
|
31
|
+
|
|
32
|
+
1. `yarn start`
|
|
33
|
+
2. Select `react-slider` from the list.
|
|
34
|
+
|
|
35
|
+
### Specification
|
|
36
|
+
|
|
37
|
+
See [SPEC.md](./Spec.md).
|
|
38
|
+
|
|
39
|
+
### Migration Guide
|
|
40
|
+
|
|
41
|
+
If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating to the latest Slider implementation.
|
package/Spec.md
CHANGED
|
@@ -9,6 +9,19 @@ The Slider component allows users to quickly select a value by dragging an icon
|
|
|
9
9
|
- `vertical` displayed vertically.
|
|
10
10
|
- `disabled` read-only and does not update state.
|
|
11
11
|
|
|
12
|
+
## API
|
|
13
|
+
|
|
14
|
+
### Slots
|
|
15
|
+
|
|
16
|
+
- `root` - The outer container that wraps the slider structure.
|
|
17
|
+
- `rail` - The Slider's base. It is used to visibly display the min and max selectable values.
|
|
18
|
+
- `thumb` - The draggable icon used to select a given value from the Slider. This is the element containing `role = 'slider'`.
|
|
19
|
+
- `input` - The hidden input for the Slider. This is the PRIMARY slot: all native properties specified directly on `<Slider>` will be applied to this slot, except `className` and `style`, which remain on the root slot.
|
|
20
|
+
|
|
21
|
+
### Props
|
|
22
|
+
|
|
23
|
+
See API at [Slider.types.ts](./src/components/Slider/Slider.types.ts).
|
|
24
|
+
|
|
12
25
|
## Structure
|
|
13
26
|
|
|
14
27
|
- _**Public**_
|
|
@@ -35,6 +48,10 @@ The Slider component allows users to quickly select a value by dragging an icon
|
|
|
35
48
|
</div>
|
|
36
49
|
```
|
|
37
50
|
|
|
51
|
+
## Migration
|
|
52
|
+
|
|
53
|
+
See [MIGRATION.md](./MIGRATION.md).
|
|
54
|
+
|
|
38
55
|
## Behaviors
|
|
39
56
|
|
|
40
57
|
- _Component States_
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AAIA;;AAEG;;AACH,OAAO,MAAM,MAAM,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;
|
|
1
|
+
{"version":3,"sources":["components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AAIA;;AAEG;;AACH,OAAO,MAAM,MAAM,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtF,MAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAhC;EAEA,wBAAwB,CAAC,KAAD,CAAxB;EAEA,OAAO,qBAAqB,CAAC,KAAD,CAA5B;AACD,CANuD,CAAjD;AAOP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useSlider_unstable } from './useSlider';\nimport { renderSlider_unstable } from './renderSlider';\nimport { useSliderStyles_unstable } from './useSliderStyles';\nimport type { SliderProps } from './Slider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The Slider component allows users to quickly select a value by dragging a thumb across a rail.\n */\nexport const Slider: ForwardRefComponent<SliderProps> = React.forwardRef((props, ref) => {\n const state = useSlider_unstable(props, ref);\n\n useSliderStyles_unstable(state);\n\n return renderSlider_unstable(state);\n});\nSlider.displayName = 'Slider';\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Slider/renderSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;
|
|
1
|
+
{"version":3,"sources":["components/Slider/renderSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;EAC1D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAc,KAAd,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAFF,eAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAHF,CADF;AAOD,CAVM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SliderState, SliderSlots } from './Slider.types';\n\n/**\n * Render the final JSX of Slider\n */\nexport const renderSlider_unstable = (state: SliderState) => {\n const { slots, slotProps } = getSlots<SliderSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.input {...slotProps.input} />\n <slots.rail {...slotProps.rail} />\n <slots.thumb {...slotProps.thumb} />\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Slider/useSlider.ts"],"names":[],"mappings":"AACA,SAAS,yBAAT,EAAoC,gBAApC,EAAsD,KAAtD,QAAmE,2BAAnE;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAGA,OAAO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAsE;
|
|
1
|
+
{"version":3,"sources":["components/Slider/useSlider.ts"],"names":[],"mappings":"AACA,SAAS,yBAAT,EAAoC,gBAApC,EAAsD,KAAtD,QAAmE,2BAAnE;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAGA,OAAO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAsE;EACtG,MAAM,WAAW,GAAG,yBAAyB,CAAC;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,OAFwB;IAG5C,iBAAiB,EAAE,CAAC,UAAD,EAAa,MAAb;EAHyB,CAAD,CAA7C;EAMA,MAAM;IACJ,QADI;IAEJ,QAFI;IAGJ,IAAI,GAAG,QAHH;IAIJ;IACA,IALI;IAMJ,KANI;IAOJ,IAPI;IAQJ;EARI,IASF,KATJ;EAWA,MAAM,KAAK,GAAgB;IACzB,QADyB;IAEzB,IAFyB;IAGzB,QAHyB;IAIzB,UAAU,EAAE;MACV,KAAK,EAAE,OADG;MAEV,IAAI,EAAE,KAFI;MAGV,IAAI,EAAE,KAHI;MAIV,KAAK,EAAE;IAJG,CAJa;IAUzB,IAAI,EAAE,gBAAgB,CAAC,IAAD,EAAO;MAC3B,QAAQ,EAAE,IADiB;MAE3B,YAAY,EAAE,EACZ,GAAG,WAAW,CAAC;MADH;IAFa,CAAP,CAVG;IAgBzB,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;MAC7B,QAAQ,EAAE,IADmB;MAE7B,YAAY,EAAE;QACZ,EAAE,EAAE,KAAK,CAAC,SAAD,EAAY,KAAK,CAAC,EAAlB,CADG;QAEZ,GAFY;QAGZ,GAAG,WAAW,CAAC,OAHH;QAIZ,IAAI,EAAE,OAJM;QAKZ,MAAM,EAAE,QAAQ,GAAG,UAAH,GAAgB;MALpB;IAFe,CAAR,CAhBE;IA0BzB,IAAI,EAAE,gBAAgB,CAAC,IAAD,EAAO;MAAE,QAAQ,EAAE;IAAZ,CAAP,CA1BG;IA2BzB,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;MAAE,QAAQ,EAAE;IAAZ,CAAR;EA3BE,CAA3B;EA8BA,uBAAuB,CAAC,KAAD,EAAQ,KAAR,CAAvB;EAEA,OAAO,KAAP;AACD,CAnDM","sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { useSliderState_unstable } from './useSliderState';\nimport { SliderProps, SliderState } from './Slider.types';\n\nexport const useSlider_unstable = (props: SliderProps, ref: React.Ref<HTMLInputElement>): SliderState => {\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['onChange', 'size'],\n });\n\n const {\n disabled,\n vertical,\n size = 'medium',\n // Slots\n root,\n input,\n rail,\n thumb,\n } = props;\n\n const state: SliderState = {\n disabled,\n size,\n vertical,\n components: {\n input: 'input',\n rail: 'div',\n root: 'div',\n thumb: 'div',\n },\n root: resolveShorthand(root, {\n required: true,\n defaultProps: {\n ...nativeProps.root,\n },\n }),\n input: resolveShorthand(input, {\n required: true,\n defaultProps: {\n id: useId('slider-', props.id),\n ref,\n ...nativeProps.primary,\n type: 'range',\n orient: vertical ? 'vertical' : undefined,\n },\n }),\n rail: resolveShorthand(rail, { required: true }),\n thumb: resolveShorthand(thumb, { required: true }),\n };\n\n useSliderState_unstable(state, props);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Slider/useSliderState.tsx"],"names":[],"mappings":"AACA,SAAS,KAAT,EAAgB,oBAAhB,EAAsC,gBAAtC,QAA8D,2BAA9D;AACA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AACA,SAAS,aAAT,QAA8B,mBAA9B;AAGA,MAAM;
|
|
1
|
+
{"version":3,"sources":["components/Slider/useSliderState.tsx"],"names":[],"mappings":"AACA,SAAS,KAAT,EAAgB,oBAAhB,EAAsC,gBAAtC,QAA8D,2BAA9D;AACA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AACA,SAAS,aAAT,QAA8B,mBAA9B;AAGA,MAAM;EAAE,qBAAF;EAAyB,iBAAzB;EAA4C;AAA5C,IAAmE,aAAzE;;AAEA,MAAM,UAAU,GAAG,CAAC,KAAD,EAAgB,GAAhB,EAA6B,GAA7B,KAA4C;EAC7D,OAAO,GAAG,KAAK,GAAR,GAAc,CAAd,GAAmB,CAAC,KAAK,GAAG,GAAT,KAAiB,GAAG,GAAG,GAAvB,CAAD,GAAgC,GAAzD;AACD,CAFD;;AAIA,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAAqB,KAArB,KAA2C;EAChF,MAAM;IAAE,YAAY,GAAG,CAAjB;IAAoB,GAAG,GAAG,CAA1B;IAA6B,GAAG,GAAG,GAAnC;IAAwC,IAAxC;IAA8C;EAA9C,IAAwD,KAA9D;EACA,MAAM;IAAE;EAAF,IAAU,SAAS,EAAzB;EACA,MAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,oBAAoB,CAAC;IAC3D,KAAK,EAAE,KAAK,KAAK,SAAV,GAAsB,KAAK,CAAC,KAAD,EAAQ,GAAR,EAAa,GAAb,CAA3B,GAA+C,SADK;IAE3D,YAAY,EAAE,KAAK,CAAC,YAAD,EAAe,GAAf,EAAoB,GAApB,CAFwC;IAG3D,YAAY,EAAE;EAH6C,CAAD,CAA5D;EAKA,MAAM,YAAY,GAAG,UAAU,CAAC,YAAD,EAAe,GAAf,EAAoB,GAApB,CAA/B;EAEA,MAAM,aAAa,GAAG,KAAK,CAAC,KAAN,CAAY,QAAlC;EACA,MAAM,aAAa,GAAG,KAAK,CAAC,QAA5B;EAEA,MAAM,QAAQ,GAA+C,gBAAgB,CAAC,EAAE,IAAG;IACjF,MAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAC,MAAH,CAAU,KAAX,CAAvB;IACA,eAAe,CAAC,KAAK,CAAC,QAAD,EAAW,GAAX,EAAgB,GAAhB,CAAN,CAAf;;IAEA,IAAI,aAAa,IAAI,aAAa,KAAK,aAAvC,EAAsD;MACpD,aAAa,CAAC,EAAD,CAAb;IACD,CAFD,MAEO,IAAI,aAAJ,EAAmB;MACxB,aAAa,CAAC,EAAD,EAAK;QAAE,KAAK,EAAE;MAAT,CAAL,CAAb;IACD;EACF,CAT4E,CAA7E;EAWA,MAAM,aAAa,GAAG;IACpB,CAAC,kBAAD,GAAsB,KAAK,CAAC,QAAN,GAAiB,MAAjB,GAA0B,GAAG,KAAK,KAAR,GAAgB,OAAhB,GAA0B,QADtD;IAEpB,CAAC,qBAAD,GAAyB,IAAI,IAAI,IAAI,GAAG,CAAf,GAAmB,GAAI,IAAI,GAAG,GAAR,IAAgB,GAAG,GAAG,GAAtB,CAA0B,GAAhD,GAAsD,EAF3D;IAGpB,CAAC,iBAAD,GAAqB,GAAG,YAAY;EAHhB,CAAtB,CAxBgF,CA8BhF;;EACA,KAAK,CAAC,IAAN,CAAW,KAAX,GAAmB,EACjB,GAAG,aADc;IAEjB,GAAG,KAAK,CAAC,IAAN,CAAW;EAFG,CAAnB,CA/BgF,CAoChF;;EACA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,YAApB;EACA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,QAAvB;EAEA,OAAO,KAAP;AACD,CAzCM","sourcesContent":["import * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { sliderCSSVars } from './useSliderStyles';\nimport type { SliderState, SliderProps } from './Slider.types';\n\nconst { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = sliderCSSVars;\n\nconst getPercent = (value: number, min: number, max: number) => {\n return max === min ? 0 : ((value - min) / (max - min)) * 100;\n};\n\nexport const useSliderState_unstable = (state: SliderState, props: SliderProps) => {\n const { defaultValue = 0, min = 0, max = 100, step, value } = props;\n const { dir } = useFluent();\n const [currentValue, setCurrentValue] = useControllableState({\n state: value !== undefined ? clamp(value, min, max) : undefined,\n defaultState: clamp(defaultValue, min, max),\n initialState: 0,\n });\n const valuePercent = getPercent(currentValue, min, max);\n\n const inputOnChange = state.input.onChange;\n const propsOnChange = props.onChange;\n\n const onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(ev => {\n const newValue = Number(ev.target.value);\n setCurrentValue(clamp(newValue, min, max));\n\n if (inputOnChange && inputOnChange !== propsOnChange) {\n inputOnChange(ev);\n } else if (propsOnChange) {\n propsOnChange(ev, { value: newValue });\n }\n });\n\n const rootVariables = {\n [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n [sliderStepsPercentVar]: step && step > 0 ? `${(step * 100) / (max - min)}%` : '',\n [sliderProgressVar]: `${valuePercent}%`,\n };\n\n // Root props\n state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = currentValue;\n state.input.onChange = onChange;\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|