@fluentui/react-slider 9.0.0-beta.10 → 9.0.0-beta.11
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 +20 -50
- package/README.md +6 -14
- package/Spec.md +81 -0
- package/dist/react-slider.d.ts +4 -7
- package/lib/components/Slider/Slider.types.d.ts +2 -6
- package/lib/components/Slider/Slider.types.js.map +1 -1
- package/lib/components/Slider/index.d.ts +1 -1
- package/lib/components/Slider/index.js +1 -1
- package/lib/components/Slider/index.js.map +1 -1
- package/lib/components/Slider/useSlider.js +0 -2
- package/lib/components/Slider/useSlider.js.map +1 -1
- package/lib/components/Slider/useSliderState.js +8 -3
- package/lib/components/Slider/useSliderState.js.map +1 -1
- package/lib/components/Slider/useSliderStyles.d.ts +10 -19
- package/lib/components/Slider/useSliderStyles.js +135 -86
- package/lib/components/Slider/useSliderStyles.js.map +1 -1
- package/lib/index.d.ts +2 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/Slider/Slider.types.d.ts +2 -6
- package/lib-commonjs/components/Slider/index.d.ts +1 -1
- package/lib-commonjs/components/Slider/index.js +3 -3
- package/lib-commonjs/components/Slider/index.js.map +1 -1
- package/lib-commonjs/components/Slider/useSlider.js +0 -2
- package/lib-commonjs/components/Slider/useSlider.js.map +1 -1
- package/lib-commonjs/components/Slider/useSliderState.js +13 -7
- package/lib-commonjs/components/Slider/useSliderState.js.map +1 -1
- package/lib-commonjs/components/Slider/useSliderStyles.d.ts +10 -19
- package/lib-commonjs/components/Slider/useSliderStyles.js +139 -90
- package/lib-commonjs/components/Slider/useSliderStyles.js.map +1 -1
- package/lib-commonjs/index.d.ts +2 -1
- package/lib-commonjs/index.js +38 -2
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +9 -17
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,90 @@
|
|
|
2
2
|
"name": "@fluentui/react-slider",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 19 Apr 2022 19:14:03 GMT",
|
|
6
|
+
"tag": "@fluentui/react-slider_v9.0.0-beta.11",
|
|
7
|
+
"version": "9.0.0-beta.11",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "olfedias@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-slider",
|
|
13
|
+
"commit": "e569d6e04d83cbcc6225e61db52ff81d2addd363",
|
|
14
|
+
"comment": "chore: Update Griffel to latest version"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-slider",
|
|
19
|
+
"commit": "a302a52dbea435e71aeee8d66ad74d0a411f982a",
|
|
20
|
+
"comment": "Removing star exports."
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "mgodbolt@microsoft.com",
|
|
24
|
+
"package": "@fluentui/react-slider",
|
|
25
|
+
"commit": "2226401b0f1dc7eb977276164c203c13eb2b0cb5",
|
|
26
|
+
"comment": "add inline slider, update tests and examples"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "mgodbolt@microsoft.com",
|
|
30
|
+
"package": "@fluentui/react-slider",
|
|
31
|
+
"commit": "cd1325747168c6a13810e5ce1248bb9b2e7d3e95",
|
|
32
|
+
"comment": "Moved Slider to RC, updated exported CSS variable name"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-slider",
|
|
37
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.5",
|
|
38
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-slider",
|
|
43
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.6",
|
|
44
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-slider",
|
|
49
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.5",
|
|
50
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"author": "beachball",
|
|
54
|
+
"package": "@fluentui/react-slider",
|
|
55
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.6",
|
|
56
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"author": "beachball",
|
|
60
|
+
"package": "@fluentui/react-slider",
|
|
61
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4",
|
|
62
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"author": "beachball",
|
|
66
|
+
"package": "@fluentui/react-slider",
|
|
67
|
+
"comment": "Bump @fluentui/react-label to v9.0.0-beta.10",
|
|
68
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
69
|
+
}
|
|
70
|
+
],
|
|
71
|
+
"none": [
|
|
72
|
+
{
|
|
73
|
+
"author": "elcraig@microsoft.com",
|
|
74
|
+
"package": "@fluentui/react-slider",
|
|
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-slider",
|
|
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:29 GMT",
|
|
6
89
|
"tag": "@fluentui/react-slider_v9.0.0-beta.10",
|
|
7
90
|
"version": "9.0.0-beta.10",
|
|
8
91
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,30 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-slider
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 19 Apr 2022 19:14:03 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-beta.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-beta.11)
|
|
8
|
+
|
|
9
|
+
Tue, 19 Apr 2022 19:14:03 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-beta.10..@fluentui/react-slider_v9.0.0-beta.11)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- chore: Update Griffel to latest version ([PR #21976](https://github.com/microsoft/fluentui/pull/21976) by olfedias@microsoft.com)
|
|
15
|
+
- Removing star exports. ([PR #22150](https://github.com/microsoft/fluentui/pull/22150) by Humberto.Morimoto@microsoft.com)
|
|
16
|
+
- add inline slider, update tests and examples ([PR #21813](https://github.com/microsoft/fluentui/pull/21813) by mgodbolt@microsoft.com)
|
|
17
|
+
- Moved Slider to RC, updated exported CSS variable name ([PR #22224](https://github.com/microsoft/fluentui/pull/22224) by mgodbolt@microsoft.com)
|
|
18
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.5 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
19
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.6 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
20
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
21
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
22
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
23
|
+
- Bump @fluentui/react-label to v9.0.0-beta.10 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
24
|
+
|
|
7
25
|
## [9.0.0-beta.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-beta.10)
|
|
8
26
|
|
|
9
|
-
Fri, 04 Mar 2022 05:
|
|
27
|
+
Fri, 04 Mar 2022 05:17:29 GMT
|
|
10
28
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-beta.9..@fluentui/react-slider_v9.0.0-beta.10)
|
|
11
29
|
|
|
12
30
|
### Changes
|
package/MIGRATION.md
CHANGED
|
@@ -1,58 +1,28 @@
|
|
|
1
1
|
# Slider Migration
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
This Migration guide is a work in progress and is not yet ready for use.
|
|
3
|
+
The Slider control is a thin wrapper around an `<input type="range"/>`. Additional elements like labels and current value will need to be explicitly rendered.
|
|
6
4
|
|
|
7
5
|
## Migration from v8
|
|
8
6
|
|
|
9
|
-
- `componentRef` =>
|
|
10
|
-
- `styles` =>
|
|
11
|
-
- `theme` =>
|
|
12
|
-
- `
|
|
13
|
-
- `
|
|
14
|
-
- `
|
|
15
|
-
- `
|
|
16
|
-
- `lowerValue` =>
|
|
17
|
-
- `
|
|
18
|
-
- `
|
|
19
|
-
- `
|
|
20
|
-
- `
|
|
21
|
-
- `
|
|
22
|
-
- `ranged` => NOT SUPPORTED
|
|
23
|
-
- `label` => NOT SUPPORTED
|
|
7
|
+
- `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
|
+
- `inline` => use css, or wrap in flex parent
|
|
12
|
+
- `showValue` and `valueFormat` => use explicitly rendered value instead
|
|
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
|
+
- `snapToStep` => use `step` instead
|
|
16
|
+
- `originFromZero` => `origin`
|
|
17
|
+
- `buttonProps` => Slider props, other than className and id, are passed to `input` element
|
|
18
|
+
- `ariaLabel` => use `aria-label` instead
|
|
19
|
+
- `ariaValueText` => explicitely set `aria-valuetext`
|
|
24
20
|
|
|
25
21
|
## Migration from v0
|
|
26
22
|
|
|
27
|
-
- `
|
|
28
|
-
- `
|
|
29
|
-
- `
|
|
30
|
-
- `
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
### v8
|
|
35
|
-
|
|
36
|
-
| v8 `Slider` | Converged `Slider` |
|
|
37
|
-
| ----------------- | ------------------ |
|
|
38
|
-
| originFromZero | origin |
|
|
39
|
-
| ariaLabel | - |
|
|
40
|
-
| valueLabel | - |
|
|
41
|
-
| defaultLowerValue | - |
|
|
42
|
-
| lowerValue | - |
|
|
43
|
-
| showValue | - |
|
|
44
|
-
| onChanged | - |
|
|
45
|
-
| snapToStep | - |
|
|
46
|
-
| buttonProps | - |
|
|
47
|
-
| valueFormat | - |
|
|
48
|
-
| ranged | - |
|
|
49
|
-
| label | - |
|
|
50
|
-
|
|
51
|
-
### v0
|
|
52
|
-
|
|
53
|
-
| v0 `Slider` | Converged `Slider` |
|
|
54
|
-
| --------------------------- | ------------------ |
|
|
55
|
-
| inputRef | - |
|
|
56
|
-
| getA11yValueMessageOnChange | - |
|
|
57
|
-
| fluid | - |
|
|
58
|
-
| label | - |
|
|
23
|
+
- `accessibility` => use `aria-*` properties directly on `Slider`
|
|
24
|
+
- `fluid` => use css, or wrap in flex parent
|
|
25
|
+
- `inputRef` => `ref`
|
|
26
|
+
- `getA11yValueMessageOnChange` => explicitely set `aria-value-text`
|
|
27
|
+
- `label` => use explicitly rendered value instead
|
|
28
|
+
- `input` => Slider props, other than className and id, are passed to `input` element
|
package/README.md
CHANGED
|
@@ -1,25 +1,21 @@
|
|
|
1
1
|
# @fluentui/react-slider
|
|
2
2
|
|
|
3
|
-
**
|
|
3
|
+
**Slider component for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
## STATUS: WIP 🚧
|
|
8
|
-
|
|
9
|
-
These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
|
|
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.
|
|
10
6
|
|
|
11
7
|
## Usage
|
|
12
8
|
|
|
13
9
|
To import Slider:
|
|
14
10
|
|
|
15
11
|
```js
|
|
16
|
-
import { Slider } from '@fluentui/react-
|
|
12
|
+
import { Slider } from '@fluentui/react-components';
|
|
17
13
|
```
|
|
18
14
|
|
|
19
|
-
|
|
15
|
+
Or pull directly from slider package to pin to a specific version.
|
|
20
16
|
|
|
21
17
|
```js
|
|
22
|
-
import { Slider } from '@fluentui/react-
|
|
18
|
+
import { Slider } from '@fluentui/react-slider';
|
|
23
19
|
```
|
|
24
20
|
|
|
25
21
|
### Examples
|
|
@@ -32,10 +28,6 @@ import { Slider } from '@fluentui/react-components';
|
|
|
32
28
|
<Slider vertical />
|
|
33
29
|
<Slider disabled />
|
|
34
30
|
<Slider origin={2} />
|
|
35
|
-
<Slider step={10}
|
|
36
|
-
<Slider marks={true} max={10} />
|
|
37
|
-
<Slider marks={[30, 40, 80, 100]} />
|
|
38
|
-
<Slider marks={[2, { value: 50, label: "50" }]} />
|
|
39
|
-
<Slider marks={[2, { value: 50, mark: <MyComponent/>, label: <MyComponent/> }]} />
|
|
31
|
+
<Slider step={10} />
|
|
40
32
|
<Slider size="small" />
|
|
41
33
|
```
|
package/Spec.md
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
# @fluentui/react-slider Spec
|
|
2
|
+
|
|
3
|
+
## Background
|
|
4
|
+
|
|
5
|
+
The Slider component allows users to quickly select a value by dragging an icon across a bar. It is often used when setting values with a relaxed precision such as audio volume and screen brightness.
|
|
6
|
+
|
|
7
|
+
## Variants
|
|
8
|
+
|
|
9
|
+
- `vertical` displayed vertically.
|
|
10
|
+
- `disabled` read-only and does not update state.
|
|
11
|
+
|
|
12
|
+
## Structure
|
|
13
|
+
|
|
14
|
+
- _**Public**_
|
|
15
|
+
```jsx
|
|
16
|
+
<Slider defaultValue={50} min={10} max={100} />
|
|
17
|
+
```
|
|
18
|
+
- _**Internal**_
|
|
19
|
+
|
|
20
|
+
```jsx
|
|
21
|
+
<slots.root {...slotProps.root}>
|
|
22
|
+
<slots.input {...slotProps.input} />
|
|
23
|
+
<slots.rail {...slotProps.rail} />
|
|
24
|
+
<slots.thumb {...slotProps.thumb} />
|
|
25
|
+
</slots.root>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
- _**DOM** - how the component will be rendered as HTML elements_
|
|
29
|
+
|
|
30
|
+
```jsx
|
|
31
|
+
<div className="fui-Slider">
|
|
32
|
+
<input className="fui-Slider__input" type="range" value="50" min="10" max="100" />
|
|
33
|
+
<div className="fui-Slider__rail" />
|
|
34
|
+
<div className="fui-Slider__thumb" />
|
|
35
|
+
</div>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Behaviors
|
|
39
|
+
|
|
40
|
+
- _Component States_
|
|
41
|
+
|
|
42
|
+
- **Disabled**
|
|
43
|
+
- When disabled, all touch and mouse events are ignored, and the Slider's value never updates.
|
|
44
|
+
- Does not allow focus and is read only.
|
|
45
|
+
- **Focused**
|
|
46
|
+
- Focus indicators only appear when keyboard tabbing/directional keystrokes and disappears when the mouse/touch interactions occur.
|
|
47
|
+
|
|
48
|
+
- _Interaction_
|
|
49
|
+
- _Keyboard_
|
|
50
|
+
| Key | Description |
|
|
51
|
+
| - | - |
|
|
52
|
+
| `Up`/`Right` | Increments the value of the slider by the `step` prop. |
|
|
53
|
+
| `Down`/`Left` | Decrements the value of the slider by the `step` prop.|
|
|
54
|
+
| `PageUp`/`Up/Right & Shift`| Increments the value of the slider by 10 _ `step`. |
|
|
55
|
+
| `PageDown` /`Down/Left & Shift`| Decrements the value of the slider by 10 _ `step`. |
|
|
56
|
+
| `Home` | Sets value to the `min` prop. |
|
|
57
|
+
| `End` | Sets value to the `max` prop. |
|
|
58
|
+
- _Cursor_
|
|
59
|
+
`pointerdown` sets the current value immediately.
|
|
60
|
+
`pointermove` changes the slider value as mouse is moved
|
|
61
|
+
- _Touch_
|
|
62
|
+
Handles the same events as the _Cursor_
|
|
63
|
+
- _Screen readers_
|
|
64
|
+
- **`root`:**
|
|
65
|
+
- renders `as` div
|
|
66
|
+
- **`hidden input element`:**
|
|
67
|
+
- Handles aria for the Slider.
|
|
68
|
+
|
|
69
|
+
## Accessibility
|
|
70
|
+
|
|
71
|
+
`Slider` design pattern: [W3 Slider](https://www.w3.org/TR/wai-aria-1.1/#slider)
|
|
72
|
+
|
|
73
|
+
## Open UI Research
|
|
74
|
+
|
|
75
|
+
https://open-ui.org/components/slider.research.parts
|
|
76
|
+
https://open-ui.org/components/slider.research
|
|
77
|
+
|
|
78
|
+
## Out of scope
|
|
79
|
+
|
|
80
|
+
- built in marks
|
|
81
|
+
- dual thumb 'ranged' slider
|
package/dist/react-slider.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
|
|
|
3
3
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
4
4
|
import * as React_2 from 'react';
|
|
5
5
|
import type { Slot } from '@fluentui/react-utilities';
|
|
6
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
6
7
|
|
|
7
8
|
/**
|
|
8
9
|
* Render the final JSX of Slider
|
|
@@ -14,7 +15,7 @@ export declare const renderSlider_unstable: (state: SliderState) => JSX.Element;
|
|
|
14
15
|
*/
|
|
15
16
|
export declare const Slider: ForwardRefComponent<SliderProps>;
|
|
16
17
|
|
|
17
|
-
export declare const
|
|
18
|
+
export declare const sliderClassNames: SlotClassNames<SliderSlots>;
|
|
18
19
|
|
|
19
20
|
declare type SliderCommons = {
|
|
20
21
|
/**
|
|
@@ -50,8 +51,8 @@ declare type SliderCommons = {
|
|
|
50
51
|
*/
|
|
51
52
|
disabled?: boolean;
|
|
52
53
|
/**
|
|
53
|
-
*
|
|
54
|
-
* @default `false`
|
|
54
|
+
* Render the Slider in a vertical orientation, smallest value on the bottom.
|
|
55
|
+
* @default `false`
|
|
55
56
|
*/
|
|
56
57
|
vertical?: boolean;
|
|
57
58
|
/**
|
|
@@ -68,10 +69,6 @@ declare type SliderCommons = {
|
|
|
68
69
|
* Triggers a callback when the value has been changed. This will be called on every individual step.
|
|
69
70
|
*/
|
|
70
71
|
onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void;
|
|
71
|
-
/**
|
|
72
|
-
* The Slider's current value label to be read by the screen reader.
|
|
73
|
-
*/
|
|
74
|
-
getAriaValueText?: (value: number) => string;
|
|
75
72
|
};
|
|
76
73
|
|
|
77
74
|
export declare type SliderOnChangeData = {
|
|
@@ -66,8 +66,8 @@ declare type SliderCommons = {
|
|
|
66
66
|
*/
|
|
67
67
|
disabled?: boolean;
|
|
68
68
|
/**
|
|
69
|
-
*
|
|
70
|
-
* @default `false`
|
|
69
|
+
* Render the Slider in a vertical orientation, smallest value on the bottom.
|
|
70
|
+
* @default `false`
|
|
71
71
|
*/
|
|
72
72
|
vertical?: boolean;
|
|
73
73
|
/**
|
|
@@ -84,10 +84,6 @@ declare type SliderCommons = {
|
|
|
84
84
|
* Triggers a callback when the value has been changed. This will be called on every individual step.
|
|
85
85
|
*/
|
|
86
86
|
onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void;
|
|
87
|
-
/**
|
|
88
|
-
* The Slider's current value label to be read by the screen reader.
|
|
89
|
-
*/
|
|
90
|
-
getAriaValueText?: (value: number) => string;
|
|
91
87
|
};
|
|
92
88
|
export declare type SliderOnChangeData = {
|
|
93
89
|
value: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.types.js","sourceRoot":"../src/","sources":["components/Slider/Slider.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';\n\nexport type SliderSlots = {\n /**\n * The root of the Slider.\n * The root slot receives the `className` and `style` specified directly on the `<Slider>`.\n * All other native props will be applied to the primary slot, `input`.\n */\n root: NonNullable<Slot<'div'>>;\n\n /**\n * The Slider's base. It is used to visibly display the min and max selectable values.\n */\n rail: NonNullable<Slot<'div'>>;\n\n /**\n * The draggable icon used to select a given value from the Slider.\n * This is the element containing `role = 'slider'`.\n */\n thumb: NonNullable<Slot<'div'>>;\n\n /**\n * The hidden input for the Slider.\n * This is the PRIMARY slot: all native properties specified directly on `<Slider>` will be applied to this slot,\n * except `className` and `style`, which remain on the root slot.\n *\n */\n input: NonNullable<Slot<'input'>> & {\n /**\n * Orient is a non standard attribute that allows for vertical orientation in Firefox. It is set internally\n * when `vertical` is set to true.\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#non_standard_attributes\n * Webkit/Chromium support for vertical inputs is provided via -webkit-appearance css property\n */\n orient?: 'horizontal' | 'vertical';\n };\n};\n\ntype SliderCommons = {\n /**\n * The starting value for an uncontrolled Slider.\n * Mutually exclusive with `value` prop.\n */\n defaultValue?: number;\n\n /**\n * The current value of the controlled Slider.\n * Mutually exclusive with `defaultValue` prop.\n */\n value?: number;\n\n /**\n * The min value of the Slider.\n * @default 0\n */\n min?: number;\n\n /**\n * The max value of the Slider.\n * @default 100\n */\n max?: number;\n\n /**\n * The number of steps that the Slider's `value` will increment upon change. When provided, the Slider\n * will snap to the closest available value. This must be a positive value.\n * @default 1\n */\n step?: number;\n\n /**\n * Whether to render the Slider as disabled.\n *\n * @default `false` (renders enabled)\n */\n disabled?: boolean;\n\n /**\n *
|
|
1
|
+
{"version":3,"file":"Slider.types.js","sourceRoot":"../src/","sources":["components/Slider/Slider.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';\n\nexport type SliderSlots = {\n /**\n * The root of the Slider.\n * The root slot receives the `className` and `style` specified directly on the `<Slider>`.\n * All other native props will be applied to the primary slot, `input`.\n */\n root: NonNullable<Slot<'div'>>;\n\n /**\n * The Slider's base. It is used to visibly display the min and max selectable values.\n */\n rail: NonNullable<Slot<'div'>>;\n\n /**\n * The draggable icon used to select a given value from the Slider.\n * This is the element containing `role = 'slider'`.\n */\n thumb: NonNullable<Slot<'div'>>;\n\n /**\n * The hidden input for the Slider.\n * This is the PRIMARY slot: all native properties specified directly on `<Slider>` will be applied to this slot,\n * except `className` and `style`, which remain on the root slot.\n *\n */\n input: NonNullable<Slot<'input'>> & {\n /**\n * Orient is a non standard attribute that allows for vertical orientation in Firefox. It is set internally\n * when `vertical` is set to true.\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#non_standard_attributes\n * Webkit/Chromium support for vertical inputs is provided via -webkit-appearance css property\n */\n orient?: 'horizontal' | 'vertical';\n };\n};\n\ntype SliderCommons = {\n /**\n * The starting value for an uncontrolled Slider.\n * Mutually exclusive with `value` prop.\n */\n defaultValue?: number;\n\n /**\n * The current value of the controlled Slider.\n * Mutually exclusive with `defaultValue` prop.\n */\n value?: number;\n\n /**\n * The min value of the Slider.\n * @default 0\n */\n min?: number;\n\n /**\n * The max value of the Slider.\n * @default 100\n */\n max?: number;\n\n /**\n * The number of steps that the Slider's `value` will increment upon change. When provided, the Slider\n * will snap to the closest available value. This must be a positive value.\n * @default 1\n */\n step?: number;\n\n /**\n * Whether to render the Slider as disabled.\n *\n * @default `false` (renders enabled)\n */\n disabled?: boolean;\n\n /**\n * Render the Slider in a vertical orientation, smallest value on the bottom.\n * @default `false`\n */\n vertical?: boolean;\n\n /**\n * The starting origin point for the Slider.\n * @default min\n */\n origin?: number;\n\n /**\n * The size of the Slider.\n * @default 'medium'\n */\n size?: 'small' | 'medium';\n\n /**\n * Triggers a callback when the value has been changed. This will be called on every individual step.\n */\n onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void;\n};\n\nexport type SliderOnChangeData = {\n value: number;\n};\n\nexport type SliderProps = Omit<\n ComponentProps<Partial<SliderSlots>, 'input'>,\n 'defaultValue' | 'onChange' | 'size' | 'value'\n> &\n SliderCommons;\n\nexport type SliderState = ComponentState<SliderSlots> & SliderCommons;\n"]}
|
|
@@ -3,4 +3,4 @@ export * from './Slider.types';
|
|
|
3
3
|
export * from './renderSlider';
|
|
4
4
|
export * from './useSlider';
|
|
5
5
|
export { useSliderState_unstable } from './useSliderState';
|
|
6
|
-
export {
|
|
6
|
+
export { sliderClassNames, useSliderStyles_unstable } from './useSliderStyles';
|
|
@@ -3,5 +3,5 @@ export * from './Slider.types';
|
|
|
3
3
|
export * from './renderSlider';
|
|
4
4
|
export * from './useSlider';
|
|
5
5
|
export { useSliderState_unstable } from './useSliderState';
|
|
6
|
-
export {
|
|
6
|
+
export { sliderClassNames, useSliderStyles_unstable } from './useSliderStyles';
|
|
7
7
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Slider/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Slider/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export * from './Slider';\nexport * from './Slider.types';\nexport * from './renderSlider';\nexport * from './useSlider';\nexport { useSliderState_unstable } from './useSliderState';\nexport { sliderClassNames, useSliderStyles_unstable } from './useSliderStyles';\n"]}
|
|
@@ -18,7 +18,6 @@ export const useSlider_unstable = (props, ref) => {
|
|
|
18
18
|
max = 100,
|
|
19
19
|
step,
|
|
20
20
|
disabled,
|
|
21
|
-
getAriaValueText,
|
|
22
21
|
vertical,
|
|
23
22
|
size = 'medium',
|
|
24
23
|
origin,
|
|
@@ -30,7 +29,6 @@ export const useSlider_unstable = (props, ref) => {
|
|
|
30
29
|
thumb
|
|
31
30
|
} = props;
|
|
32
31
|
const state = {
|
|
33
|
-
getAriaValueText,
|
|
34
32
|
defaultValue,
|
|
35
33
|
disabled,
|
|
36
34
|
max,
|
|
@@ -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;;AAEG;;AACH,OAAO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAsE;AACtG,QAAM,WAAW,GAAG,yBAAyB,CAAC;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,OAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,UAAD,EAAa,MAAb;AAHyB,GAAD,CAA7C;AAMA,QAAM;AACJ;AACA,IAAA,KAFI;AAGJ,IAAA,YAHI;AAIJ,IAAA,GAAG,GAAG,CAJF;AAKJ,IAAA,GAAG,GAAG,GALF;AAMJ,IAAA,IANI;AAOJ,IAAA,QAPI;AAQJ,IAAA,
|
|
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;;AAEG;;AACH,OAAO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAsE;AACtG,QAAM,WAAW,GAAG,yBAAyB,CAAC;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,OAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,UAAD,EAAa,MAAb;AAHyB,GAAD,CAA7C;AAMA,QAAM;AACJ;AACA,IAAA,KAFI;AAGJ,IAAA,YAHI;AAIJ,IAAA,GAAG,GAAG,CAJF;AAKJ,IAAA,GAAG,GAAG,GALF;AAMJ,IAAA,IANI;AAOJ,IAAA,QAPI;AAQJ,IAAA,QARI;AASJ,IAAA,IAAI,GAAG,QATH;AAUJ,IAAA,MAVI;AAWJ,IAAA,QAXI;AAYJ;AACA,IAAA,IAbI;AAcJ,IAAA,KAdI;AAeJ,IAAA,IAfI;AAgBJ,IAAA;AAhBI,MAiBF,KAjBJ;AAmBA,QAAM,KAAK,GAAgB;AACzB,IAAA,YADyB;AAEzB,IAAA,QAFyB;AAGzB,IAAA,GAHyB;AAIzB,IAAA,GAJyB;AAKzB,IAAA,MALyB;AAMzB,IAAA,IANyB;AAOzB,IAAA,IAPyB;AAQzB,IAAA,QARyB;AASzB,IAAA,KATyB;AAUzB,IAAA,QAVyB;AAWzB,IAAA,UAAU,EAAE;AACV,MAAA,KAAK,EAAE,OADG;AAEV,MAAA,IAAI,EAAE,KAFI;AAGV,MAAA,IAAI,EAAE,KAHI;AAIV,MAAA,KAAK,EAAE;AAJG,KAXa;AAiBzB,IAAA,IAAI,EAAE,gBAAgB,CAAC,IAAD,EAAO;AAC3B,MAAA,QAAQ,EAAE,IADiB;AAE3B,MAAA,YAAY,EAAE,EACZ,GAAG,WAAW,CAAC;AADH;AAFa,KAAP,CAjBG;AAuBzB,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;AAC7B,MAAA,QAAQ,EAAE,IADmB;AAE7B,MAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,KAAK,CAAC,SAAD,EAAY,KAAK,CAAC,EAAlB,CADG;AAEZ,QAAA,GAFY;AAGZ,WAAG,WAAW,CAAC,OAHH;AAIZ,QAAA,IAAI,EAAE,OAJM;AAKZ,QAAA,MAAM,EAAE,QAAQ,GAAG,UAAH,GAAgB;AALpB;AAFe,KAAR,CAvBE;AAiCzB,IAAA,IAAI,EAAE,gBAAgB,CAAC,IAAD,EAAO;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAP,CAjCG;AAkCzB,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAR;AAlCE,GAA3B;AAqCA,EAAA,uBAAuB,CAAC,KAAD,CAAvB;AAEA,SAAO,KAAP;AACD,CAlEM","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\n/**\n * Given user props, returns state and render function for a Slider.\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 // Props\n value,\n defaultValue,\n min = 0,\n max = 100,\n step,\n disabled,\n vertical,\n size = 'medium',\n origin,\n onChange,\n // Slots\n root,\n input,\n rail,\n thumb,\n } = props;\n\n const state: SliderState = {\n defaultValue,\n disabled,\n max,\n min,\n origin,\n size,\n step,\n vertical,\n value,\n onChange,\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);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';
|
|
3
3
|
import { useFluent } from '@fluentui/react-shared-contexts';
|
|
4
|
-
import {
|
|
4
|
+
import { sliderCSSVars } from './useSliderStyles';
|
|
5
|
+
const {
|
|
6
|
+
railOffsetVar,
|
|
7
|
+
railStepsPercentVar,
|
|
8
|
+
railProgressVar,
|
|
9
|
+
thumbPositionVar,
|
|
10
|
+
railDirectionVar
|
|
11
|
+
} = sliderCSSVars;
|
|
5
12
|
|
|
6
13
|
const getPercent = (value, min, max) => {
|
|
7
14
|
return max === min ? 0 : (value - min) / (max - min) * 100;
|
|
@@ -14,7 +21,6 @@ export const useSliderState_unstable = state => {
|
|
|
14
21
|
min = 0,
|
|
15
22
|
max = 100,
|
|
16
23
|
step = 1,
|
|
17
|
-
getAriaValueText,
|
|
18
24
|
origin
|
|
19
25
|
} = state;
|
|
20
26
|
const {
|
|
@@ -56,7 +62,6 @@ export const useSliderState_unstable = state => {
|
|
|
56
62
|
}; // Input Props
|
|
57
63
|
|
|
58
64
|
state.input.value = currentValue;
|
|
59
|
-
getAriaValueText && (state.input['aria-valuetext'] = getAriaValueText(currentValue));
|
|
60
65
|
state.input.onChange = onChange;
|
|
61
66
|
return state;
|
|
62
67
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Slider/useSliderState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,KAAT,EAAgB,oBAAhB,EAAsC,gBAAtC,QAA8D,2BAA9D;AACA,SAAS,SAAT,QAA0B,iCAA1B;AACA,
|
|
1
|
+
{"version":3,"sources":["components/Slider/useSliderState.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport { sliderCSSVars } from './useSliderStyles';\nimport type { SliderState } from './Slider.types';\n\nconst { railOffsetVar, railStepsPercentVar, railProgressVar, thumbPositionVar, railDirectionVar } = 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) => {\n const { value, defaultValue = 0, min = 0, max = 100, step = 1, origin } = state;\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 const originPercent = React.useMemo(() => {\n return origin !== undefined ? getPercent(origin, min, max) : 0;\n }, [max, min, origin]);\n\n const inputOnChange = state.input.onChange;\n const propsOnChange = state.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 [railDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n [thumbPositionVar]: valuePercent + '%',\n [railStepsPercentVar]: state.step && state.step > 0 ? `${(step * 100) / (max - min)}%` : '',\n [railOffsetVar]: origin !== undefined ? `${Math.min(valuePercent, originPercent)}%` : '0%',\n [railProgressVar]:\n origin !== undefined\n ? `${Math.max(originPercent - valuePercent, valuePercent - originPercent)}%`\n : `${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/"}
|
|
@@ -1,22 +1,13 @@
|
|
|
1
|
-
import type { SliderState } from './Slider.types';
|
|
2
|
-
|
|
3
|
-
export declare const
|
|
4
|
-
export declare const
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
export declare const useRootStyles: () => Record<"small" | "disabled" | "horizontal" | "vertical" | "medium" | "root" | "enabled" | "focusIndicatorHorizontal" | "focusIndicatorVertical", string>;
|
|
12
|
-
/**
|
|
13
|
-
* Styles for the rail slot
|
|
14
|
-
*/
|
|
15
|
-
export declare const useRailStyles: () => Record<"horizontal" | "vertical" | "rail", string>;
|
|
16
|
-
/**
|
|
17
|
-
* Styles for the thumb slot
|
|
18
|
-
*/
|
|
19
|
-
export declare const useThumbStyles: () => Record<"disabled" | "horizontal" | "vertical" | "thumb", string>;
|
|
1
|
+
import type { SliderState, SliderSlots } from './Slider.types';
|
|
2
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
+
export declare const sliderClassNames: SlotClassNames<SliderSlots>;
|
|
4
|
+
export declare const sliderCSSVars: {
|
|
5
|
+
railDirectionVar: string;
|
|
6
|
+
railOffsetVar: string;
|
|
7
|
+
railProgressVar: string;
|
|
8
|
+
railStepsPercentVar: string;
|
|
9
|
+
thumbPositionVar: string;
|
|
10
|
+
};
|
|
20
11
|
/**
|
|
21
12
|
* Apply styling to the Slider slots based on the state
|
|
22
13
|
*/
|