@fluentui/react-slider 9.0.0-beta.13 → 9.0.0-beta.16
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 +160 -1
- package/CHANGELOG.md +48 -2
- package/dist/index.d.ts +27 -32
- package/{lib → dist}/tsdoc-metadata.json +0 -0
- package/lib/components/Slider/Slider.types.js.map +1 -1
- package/lib/components/Slider/useSlider.js +1 -20
- package/lib/components/Slider/useSlider.js.map +1 -1
- package/lib/components/Slider/useSliderState.js +7 -7
- package/lib/components/Slider/useSliderState.js.map +1 -1
- package/lib-commonjs/components/Slider/useSlider.js +1 -20
- package/lib-commonjs/components/Slider/useSlider.js.map +1 -1
- package/lib-commonjs/components/Slider/useSliderState.js +7 -7
- package/lib-commonjs/components/Slider/useSliderState.js.map +1 -1
- package/package.json +9 -9
- package/lib/Slider.d.ts +0 -1
- package/lib/components/Slider/Slider.d.ts +0 -6
- package/lib/components/Slider/Slider.types.d.ts +0 -93
- package/lib/components/Slider/index.d.ts +0 -6
- package/lib/components/Slider/renderSlider.d.ts +0 -5
- package/lib/components/Slider/useSlider.d.ts +0 -6
- package/lib/components/Slider/useSliderState.d.ts +0 -2
- package/lib/components/Slider/useSliderStyles.d.ts +0 -14
- package/lib/index.d.ts +0 -2
- package/lib-commonjs/Slider.d.ts +0 -1
- package/lib-commonjs/components/Slider/Slider.d.ts +0 -6
- package/lib-commonjs/components/Slider/Slider.types.d.ts +0 -93
- package/lib-commonjs/components/Slider/index.d.ts +0 -6
- package/lib-commonjs/components/Slider/renderSlider.d.ts +0 -5
- package/lib-commonjs/components/Slider/useSlider.d.ts +0 -6
- package/lib-commonjs/components/Slider/useSliderState.d.ts +0 -2
- package/lib-commonjs/components/Slider/useSliderStyles.d.ts +0 -14
- package/lib-commonjs/index.d.ts +0 -2
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,166 @@
|
|
|
2
2
|
"name": "@fluentui/react-slider",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 23 May 2022 18:54:56 GMT",
|
|
6
|
+
"tag": "@fluentui/react-slider_v9.0.0-beta.16",
|
|
7
|
+
"version": "9.0.0-beta.16",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-slider",
|
|
13
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.9",
|
|
14
|
+
"commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-slider",
|
|
19
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.11",
|
|
20
|
+
"commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-slider",
|
|
25
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.9",
|
|
26
|
+
"commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-slider",
|
|
31
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7",
|
|
32
|
+
"commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-slider",
|
|
37
|
+
"comment": "Bump @fluentui/react-label to v9.0.0-rc.3",
|
|
38
|
+
"commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
|
|
39
|
+
}
|
|
40
|
+
]
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"date": "Mon, 23 May 2022 12:13:38 GMT",
|
|
45
|
+
"tag": "@fluentui/react-slider_v9.0.0-beta.15",
|
|
46
|
+
"version": "9.0.0-beta.15",
|
|
47
|
+
"comments": {
|
|
48
|
+
"prerelease": [
|
|
49
|
+
{
|
|
50
|
+
"author": "mgodbolt@microsoft.com",
|
|
51
|
+
"package": "@fluentui/react-slider",
|
|
52
|
+
"commit": "4a05a4a5a3f0b7724ac81be01795e1572b048fd9",
|
|
53
|
+
"comment": "move slider commons into props and pick into state"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"author": "olfedias@microsoft.com",
|
|
57
|
+
"package": "@fluentui/react-slider",
|
|
58
|
+
"commit": "60804cec07a495b8a5d1fc66338bf0443b212144",
|
|
59
|
+
"comment": "chore: Update Griffel to latest version"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"author": "esteban.230@hotmail.com",
|
|
63
|
+
"package": "@fluentui/react-slider",
|
|
64
|
+
"commit": "0fac2d7a6f35c5fcebaf30da68b9604410fe0eb9",
|
|
65
|
+
"comment": "Updated react-label package version to RC."
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "olfedias@microsoft.com",
|
|
69
|
+
"package": "@fluentui/react-slider",
|
|
70
|
+
"commit": "f120fe9160ad7311a87af0cfacd8d2fb26275e34",
|
|
71
|
+
"comment": "chore: Update Griffel to latest version"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "martinhochel@microsoft.com",
|
|
75
|
+
"package": "@fluentui/react-slider",
|
|
76
|
+
"commit": "e7b70cb06f4422e5574993fd2ad44d9073647417",
|
|
77
|
+
"comment": "feat: ship rolluped only dts"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"author": "beachball",
|
|
81
|
+
"package": "@fluentui/react-slider",
|
|
82
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.8",
|
|
83
|
+
"commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"author": "beachball",
|
|
87
|
+
"package": "@fluentui/react-slider",
|
|
88
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.10",
|
|
89
|
+
"commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"author": "beachball",
|
|
93
|
+
"package": "@fluentui/react-slider",
|
|
94
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.8",
|
|
95
|
+
"commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"author": "beachball",
|
|
99
|
+
"package": "@fluentui/react-slider",
|
|
100
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.9",
|
|
101
|
+
"commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"author": "beachball",
|
|
105
|
+
"package": "@fluentui/react-slider",
|
|
106
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6",
|
|
107
|
+
"commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"author": "beachball",
|
|
111
|
+
"package": "@fluentui/react-slider",
|
|
112
|
+
"comment": "Bump @fluentui/react-label to v9.0.0-rc.2",
|
|
113
|
+
"commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
|
|
114
|
+
}
|
|
115
|
+
]
|
|
116
|
+
}
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"date": "Thu, 05 May 2022 18:26:30 GMT",
|
|
120
|
+
"tag": "@fluentui/react-slider_v9.0.0-beta.14",
|
|
121
|
+
"version": "9.0.0-beta.14",
|
|
122
|
+
"comments": {
|
|
123
|
+
"prerelease": [
|
|
124
|
+
{
|
|
125
|
+
"author": "beachball",
|
|
126
|
+
"package": "@fluentui/react-slider",
|
|
127
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.7",
|
|
128
|
+
"commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"author": "beachball",
|
|
132
|
+
"package": "@fluentui/react-slider",
|
|
133
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.9",
|
|
134
|
+
"commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
"author": "beachball",
|
|
138
|
+
"package": "@fluentui/react-slider",
|
|
139
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.7",
|
|
140
|
+
"commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"author": "beachball",
|
|
144
|
+
"package": "@fluentui/react-slider",
|
|
145
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.8",
|
|
146
|
+
"commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"author": "beachball",
|
|
150
|
+
"package": "@fluentui/react-slider",
|
|
151
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.5",
|
|
152
|
+
"commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"author": "beachball",
|
|
156
|
+
"package": "@fluentui/react-slider",
|
|
157
|
+
"comment": "Bump @fluentui/react-label to v9.0.0-beta.12",
|
|
158
|
+
"commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
|
|
159
|
+
}
|
|
160
|
+
]
|
|
161
|
+
}
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
"date": "Wed, 04 May 2022 13:26:50 GMT",
|
|
6
165
|
"tag": "@fluentui/react-slider_v9.0.0-beta.13",
|
|
7
166
|
"version": "9.0.0-beta.13",
|
|
8
167
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,58 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-slider
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 23 May 2022 18:54:56 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-beta.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-beta.16)
|
|
8
|
+
|
|
9
|
+
Mon, 23 May 2022 18:54:56 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-beta.15..@fluentui/react-slider_v9.0.0-beta.16)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
|
|
15
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.11 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
|
|
16
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
|
|
17
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
|
|
18
|
+
- Bump @fluentui/react-label to v9.0.0-rc.3 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
|
|
19
|
+
|
|
20
|
+
## [9.0.0-beta.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-beta.15)
|
|
21
|
+
|
|
22
|
+
Mon, 23 May 2022 12:13:38 GMT
|
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-beta.14..@fluentui/react-slider_v9.0.0-beta.15)
|
|
24
|
+
|
|
25
|
+
### Changes
|
|
26
|
+
|
|
27
|
+
- move slider commons into props and pick into state ([PR #22879](https://github.com/microsoft/fluentui/pull/22879) by mgodbolt@microsoft.com)
|
|
28
|
+
- chore: Update Griffel to latest version ([PR #23029](https://github.com/microsoft/fluentui/pull/23029) by olfedias@microsoft.com)
|
|
29
|
+
- Updated react-label package version to RC. ([PR #22865](https://github.com/microsoft/fluentui/pull/22865) by esteban.230@hotmail.com)
|
|
30
|
+
- chore: Update Griffel to latest version ([PR #22894](https://github.com/microsoft/fluentui/pull/22894) by olfedias@microsoft.com)
|
|
31
|
+
- feat: ship rolluped only dts ([PR #22828](https://github.com/microsoft/fluentui/pull/22828) by martinhochel@microsoft.com)
|
|
32
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
|
|
33
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.10 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
|
|
34
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
|
|
35
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
|
|
36
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
|
|
37
|
+
- Bump @fluentui/react-label to v9.0.0-rc.2 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
|
|
38
|
+
|
|
39
|
+
## [9.0.0-beta.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-beta.14)
|
|
40
|
+
|
|
41
|
+
Thu, 05 May 2022 18:26:30 GMT
|
|
42
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-beta.13..@fluentui/react-slider_v9.0.0-beta.14)
|
|
43
|
+
|
|
44
|
+
### Changes
|
|
45
|
+
|
|
46
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.7 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
|
|
47
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.9 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
|
|
48
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.7 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
|
|
49
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.8 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
|
|
50
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.5 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
|
|
51
|
+
- Bump @fluentui/react-label to v9.0.0-beta.12 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
|
|
52
|
+
|
|
7
53
|
## [9.0.0-beta.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-slider_v9.0.0-beta.13)
|
|
8
54
|
|
|
9
|
-
Wed, 04 May 2022 13:
|
|
55
|
+
Wed, 04 May 2022 13:26:50 GMT
|
|
10
56
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-slider_v9.0.0-beta.12..@fluentui/react-slider_v9.0.0-beta.13)
|
|
11
57
|
|
|
12
58
|
### Changes
|
package/dist/index.d.ts
CHANGED
|
@@ -17,27 +17,42 @@ export declare const Slider: ForwardRefComponent<SliderProps>;
|
|
|
17
17
|
|
|
18
18
|
export declare const sliderClassNames: SlotClassNames<SliderSlots>;
|
|
19
19
|
|
|
20
|
-
declare type
|
|
20
|
+
export declare type SliderOnChangeData = {
|
|
21
|
+
value: number;
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
export declare type SliderProps = Omit<ComponentProps<Partial<SliderSlots>, 'input'>, 'defaultValue' | 'onChange' | 'size' | 'value'> & {
|
|
21
25
|
/**
|
|
22
26
|
* The starting value for an uncontrolled Slider.
|
|
23
27
|
* Mutually exclusive with `value` prop.
|
|
24
28
|
*/
|
|
25
29
|
defaultValue?: number;
|
|
26
30
|
/**
|
|
27
|
-
*
|
|
28
|
-
*
|
|
31
|
+
* Whether to render the Slider as disabled.
|
|
32
|
+
*
|
|
33
|
+
* @default `false` (renders enabled)
|
|
29
34
|
*/
|
|
30
|
-
|
|
35
|
+
disabled?: boolean;
|
|
36
|
+
/**
|
|
37
|
+
* The max value of the Slider.
|
|
38
|
+
* @default 100
|
|
39
|
+
*/
|
|
40
|
+
max?: number;
|
|
31
41
|
/**
|
|
32
42
|
* The min value of the Slider.
|
|
33
43
|
* @default 0
|
|
34
44
|
*/
|
|
35
45
|
min?: number;
|
|
36
46
|
/**
|
|
37
|
-
* The
|
|
38
|
-
* @default
|
|
47
|
+
* The starting origin point for the Slider.
|
|
48
|
+
* @default min
|
|
39
49
|
*/
|
|
40
|
-
|
|
50
|
+
origin?: number;
|
|
51
|
+
/**
|
|
52
|
+
* The size of the Slider.
|
|
53
|
+
* @default 'medium'
|
|
54
|
+
*/
|
|
55
|
+
size?: 'small' | 'medium';
|
|
41
56
|
/**
|
|
42
57
|
* The number of steps that the Slider's `value` will increment upon change. When provided, the Slider
|
|
43
58
|
* will snap to the closest available value. This must be a positive value.
|
|
@@ -45,38 +60,21 @@ declare type SliderCommons = {
|
|
|
45
60
|
*/
|
|
46
61
|
step?: number;
|
|
47
62
|
/**
|
|
48
|
-
*
|
|
49
|
-
*
|
|
50
|
-
* @default `false` (renders enabled)
|
|
63
|
+
* The current value of the controlled Slider.
|
|
64
|
+
* Mutually exclusive with `defaultValue` prop.
|
|
51
65
|
*/
|
|
52
|
-
|
|
66
|
+
value?: number;
|
|
53
67
|
/**
|
|
54
68
|
* Render the Slider in a vertical orientation, smallest value on the bottom.
|
|
55
69
|
* @default `false`
|
|
56
70
|
*/
|
|
57
71
|
vertical?: boolean;
|
|
58
|
-
/**
|
|
59
|
-
* The starting origin point for the Slider.
|
|
60
|
-
* @default min
|
|
61
|
-
*/
|
|
62
|
-
origin?: number;
|
|
63
|
-
/**
|
|
64
|
-
* The size of the Slider.
|
|
65
|
-
* @default 'medium'
|
|
66
|
-
*/
|
|
67
|
-
size?: 'small' | 'medium';
|
|
68
72
|
/**
|
|
69
73
|
* Triggers a callback when the value has been changed. This will be called on every individual step.
|
|
70
74
|
*/
|
|
71
75
|
onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void;
|
|
72
76
|
};
|
|
73
77
|
|
|
74
|
-
export declare type SliderOnChangeData = {
|
|
75
|
-
value: number;
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
export declare type SliderProps = Omit<ComponentProps<Partial<SliderSlots>, 'input'>, 'defaultValue' | 'onChange' | 'size' | 'value'> & SliderCommons;
|
|
79
|
-
|
|
80
78
|
export declare type SliderSlots = {
|
|
81
79
|
/**
|
|
82
80
|
* The root of the Slider.
|
|
@@ -110,14 +108,11 @@ export declare type SliderSlots = {
|
|
|
110
108
|
};
|
|
111
109
|
};
|
|
112
110
|
|
|
113
|
-
export declare type SliderState = ComponentState<SliderSlots> &
|
|
111
|
+
export declare type SliderState = ComponentState<SliderSlots> & Pick<SliderProps, 'disabled' | 'size' | 'vertical'>;
|
|
114
112
|
|
|
115
|
-
/**
|
|
116
|
-
* Given user props, returns state and render function for a Slider.
|
|
117
|
-
*/
|
|
118
113
|
export declare const useSlider_unstable: (props: SliderProps, ref: React_2.Ref<HTMLInputElement>) => SliderState;
|
|
119
114
|
|
|
120
|
-
export declare const useSliderState_unstable: (state: SliderState) => SliderState;
|
|
115
|
+
export declare const useSliderState_unstable: (state: SliderState, props: SliderProps) => SliderState;
|
|
121
116
|
|
|
122
117
|
/**
|
|
123
118
|
* Apply styling to the Slider slots based on the state
|
|
File without changes
|
|
@@ -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\
|
|
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\nexport type SliderProps = Omit<\n ComponentProps<Partial<SliderSlots>, 'input'>,\n 'defaultValue' | 'onChange' | 'size' | 'value'\n> & {\n /**\n * The starting value for an uncontrolled Slider.\n * Mutually exclusive with `value` prop.\n */\n defaultValue?: number;\n\n /**\n * Whether to render the Slider as disabled.\n *\n * @default `false` (renders enabled)\n */\n disabled?: boolean;\n\n /**\n * The max value of the Slider.\n * @default 100\n */\n max?: number;\n\n /**\n * The min value of the Slider.\n * @default 0\n */\n min?: number;\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 * 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 * The current value of the controlled Slider.\n * Mutually exclusive with `defaultValue` prop.\n */\n value?: number;\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 * 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 SliderState = ComponentState<SliderSlots> & Pick<SliderProps, 'disabled' | 'size' | 'vertical'>;\n"]}
|
|
@@ -1,9 +1,5 @@
|
|
|
1
1
|
import { getPartitionedNativeProps, resolveShorthand, useId } from '@fluentui/react-utilities';
|
|
2
2
|
import { useSliderState_unstable } from './useSliderState';
|
|
3
|
-
/**
|
|
4
|
-
* Given user props, returns state and render function for a Slider.
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
3
|
export const useSlider_unstable = (props, ref) => {
|
|
8
4
|
const nativeProps = getPartitionedNativeProps({
|
|
9
5
|
props,
|
|
@@ -11,17 +7,9 @@ export const useSlider_unstable = (props, ref) => {
|
|
|
11
7
|
excludedPropNames: ['onChange', 'size']
|
|
12
8
|
});
|
|
13
9
|
const {
|
|
14
|
-
// Props
|
|
15
|
-
value,
|
|
16
|
-
defaultValue,
|
|
17
|
-
min = 0,
|
|
18
|
-
max = 100,
|
|
19
|
-
step,
|
|
20
10
|
disabled,
|
|
21
11
|
vertical,
|
|
22
12
|
size = 'medium',
|
|
23
|
-
origin,
|
|
24
|
-
onChange,
|
|
25
13
|
// Slots
|
|
26
14
|
root,
|
|
27
15
|
input,
|
|
@@ -29,16 +17,9 @@ export const useSlider_unstable = (props, ref) => {
|
|
|
29
17
|
thumb
|
|
30
18
|
} = props;
|
|
31
19
|
const state = {
|
|
32
|
-
defaultValue,
|
|
33
20
|
disabled,
|
|
34
|
-
max,
|
|
35
|
-
min,
|
|
36
|
-
origin,
|
|
37
21
|
size,
|
|
38
|
-
step,
|
|
39
22
|
vertical,
|
|
40
|
-
value,
|
|
41
|
-
onChange,
|
|
42
23
|
components: {
|
|
43
24
|
input: 'input',
|
|
44
25
|
rail: 'div',
|
|
@@ -67,7 +48,7 @@ export const useSlider_unstable = (props, ref) => {
|
|
|
67
48
|
required: true
|
|
68
49
|
})
|
|
69
50
|
};
|
|
70
|
-
useSliderState_unstable(state);
|
|
51
|
+
useSliderState_unstable(state, props);
|
|
71
52
|
return state;
|
|
72
53
|
};
|
|
73
54
|
//# sourceMappingURL=useSlider.js.map
|
|
@@ -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
|
|
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;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,IAAA,QADI;AAEJ,IAAA,QAFI;AAGJ,IAAA,IAAI,GAAG,QAHH;AAIJ;AACA,IAAA,IALI;AAMJ,IAAA,KANI;AAOJ,IAAA,IAPI;AAQJ,IAAA;AARI,MASF,KATJ;AAWA,QAAM,KAAK,GAAgB;AACzB,IAAA,QADyB;AAEzB,IAAA,IAFyB;AAGzB,IAAA,QAHyB;AAIzB,IAAA,UAAU,EAAE;AACV,MAAA,KAAK,EAAE,OADG;AAEV,MAAA,IAAI,EAAE,KAFI;AAGV,MAAA,IAAI,EAAE,KAHI;AAIV,MAAA,KAAK,EAAE;AAJG,KAJa;AAUzB,IAAA,IAAI,EAAE,gBAAgB,CAAC,IAAD,EAAO;AAC3B,MAAA,QAAQ,EAAE,IADiB;AAE3B,MAAA,YAAY,EAAE,EACZ,GAAG,WAAW,CAAC;AADH;AAFa,KAAP,CAVG;AAgBzB,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,CAhBE;AA0BzB,IAAA,IAAI,EAAE,gBAAgB,CAAC,IAAD,EAAO;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAP,CA1BG;AA2BzB,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAR;AA3BE,GAA3B;AA8BA,EAAA,uBAAuB,CAAC,KAAD,EAAQ,KAAR,CAAvB;AAEA,SAAO,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/"}
|
|
@@ -14,15 +14,15 @@ const getPercent = (value, min, max) => {
|
|
|
14
14
|
return max === min ? 0 : (value - min) / (max - min) * 100;
|
|
15
15
|
};
|
|
16
16
|
|
|
17
|
-
export const useSliderState_unstable = state => {
|
|
17
|
+
export const useSliderState_unstable = (state, props) => {
|
|
18
18
|
const {
|
|
19
|
-
value,
|
|
20
19
|
defaultValue = 0,
|
|
21
20
|
min = 0,
|
|
22
21
|
max = 100,
|
|
23
|
-
step
|
|
24
|
-
origin
|
|
25
|
-
|
|
22
|
+
step,
|
|
23
|
+
origin,
|
|
24
|
+
value
|
|
25
|
+
} = props;
|
|
26
26
|
const {
|
|
27
27
|
dir
|
|
28
28
|
} = useFluent();
|
|
@@ -36,7 +36,7 @@ export const useSliderState_unstable = state => {
|
|
|
36
36
|
return origin !== undefined ? getPercent(origin, min, max) : 0;
|
|
37
37
|
}, [max, min, origin]);
|
|
38
38
|
const inputOnChange = state.input.onChange;
|
|
39
|
-
const propsOnChange =
|
|
39
|
+
const propsOnChange = props.onChange;
|
|
40
40
|
const onChange = useEventCallback(ev => {
|
|
41
41
|
const newValue = Number(ev.target.value);
|
|
42
42
|
setCurrentValue(clamp(newValue, min, max));
|
|
@@ -52,7 +52,7 @@ export const useSliderState_unstable = state => {
|
|
|
52
52
|
const rootVariables = {
|
|
53
53
|
[railDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',
|
|
54
54
|
[thumbPositionVar]: valuePercent + '%',
|
|
55
|
-
[railStepsPercentVar]:
|
|
55
|
+
[railStepsPercentVar]: step && step > 0 ? `${step * 100 / (max - min)}%` : '',
|
|
56
56
|
[railOffsetVar]: origin !== undefined ? `${Math.min(valuePercent, originPercent)}%` : '0%',
|
|
57
57
|
[railProgressVar]: origin !== undefined ? `${Math.max(originPercent - valuePercent, valuePercent - originPercent)}%` : `${valuePercent}%`
|
|
58
58
|
}; // Root props
|
|
@@ -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,SAAS,aAAT,QAA8B,mBAA9B;AAGA,MAAM;AAAE,EAAA,aAAF;AAAiB,EAAA,mBAAjB;AAAsC,EAAA,eAAtC;AAAuD,EAAA,gBAAvD;AAAyE,EAAA;AAAzE,IAA8F,aAApG;;AAEA,MAAM,UAAU,GAAG,CAAC,KAAD,EAAgB,GAAhB,EAA6B,GAA7B,KAA4C;AAC7D,SAAO,GAAG,KAAK,GAAR,GAAc,CAAd,GAAmB,CAAC,KAAK,GAAG,GAAT,KAAiB,GAAG,GAAG,GAAvB,CAAD,GAAgC,GAAzD;AACD,CAFD;;AAIA,OAAO,MAAM,uBAAuB,
|
|
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, SliderProps } 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, props: SliderProps) => {\n const { defaultValue = 0, min = 0, max = 100, step, origin, 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 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 = 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 [railDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n [thumbPositionVar]: valuePercent + '%',\n [railStepsPercentVar]: step && 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/"}
|
|
@@ -8,10 +8,6 @@ exports.useSlider_unstable = void 0;
|
|
|
8
8
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
9
9
|
|
|
10
10
|
const useSliderState_1 = /*#__PURE__*/require("./useSliderState");
|
|
11
|
-
/**
|
|
12
|
-
* Given user props, returns state and render function for a Slider.
|
|
13
|
-
*/
|
|
14
|
-
|
|
15
11
|
|
|
16
12
|
const useSlider_unstable = (props, ref) => {
|
|
17
13
|
const nativeProps = react_utilities_1.getPartitionedNativeProps({
|
|
@@ -20,17 +16,9 @@ const useSlider_unstable = (props, ref) => {
|
|
|
20
16
|
excludedPropNames: ['onChange', 'size']
|
|
21
17
|
});
|
|
22
18
|
const {
|
|
23
|
-
// Props
|
|
24
|
-
value,
|
|
25
|
-
defaultValue,
|
|
26
|
-
min = 0,
|
|
27
|
-
max = 100,
|
|
28
|
-
step,
|
|
29
19
|
disabled,
|
|
30
20
|
vertical,
|
|
31
21
|
size = 'medium',
|
|
32
|
-
origin,
|
|
33
|
-
onChange,
|
|
34
22
|
// Slots
|
|
35
23
|
root,
|
|
36
24
|
input,
|
|
@@ -38,16 +26,9 @@ const useSlider_unstable = (props, ref) => {
|
|
|
38
26
|
thumb
|
|
39
27
|
} = props;
|
|
40
28
|
const state = {
|
|
41
|
-
defaultValue,
|
|
42
29
|
disabled,
|
|
43
|
-
max,
|
|
44
|
-
min,
|
|
45
|
-
origin,
|
|
46
30
|
size,
|
|
47
|
-
step,
|
|
48
31
|
vertical,
|
|
49
|
-
value,
|
|
50
|
-
onChange,
|
|
51
32
|
components: {
|
|
52
33
|
input: 'input',
|
|
53
34
|
rail: 'div',
|
|
@@ -76,7 +57,7 @@ const useSlider_unstable = (props, ref) => {
|
|
|
76
57
|
required: true
|
|
77
58
|
})
|
|
78
59
|
};
|
|
79
|
-
useSliderState_1.useSliderState_unstable(state);
|
|
60
|
+
useSliderState_1.useSliderState_unstable(state, props);
|
|
80
61
|
return state;
|
|
81
62
|
};
|
|
82
63
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Slider/useSlider.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA
|
|
1
|
+
{"version":3,"sources":["components/Slider/useSlider.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AAGO,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAsE;AACtG,QAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,OAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,UAAD,EAAa,MAAb;AAHyB,GAA1B,CAApB;AAMA,QAAM;AACJ,IAAA,QADI;AAEJ,IAAA,QAFI;AAGJ,IAAA,IAAI,GAAG,QAHH;AAIJ;AACA,IAAA,IALI;AAMJ,IAAA,KANI;AAOJ,IAAA,IAPI;AAQJ,IAAA;AARI,MASF,KATJ;AAWA,QAAM,KAAK,GAAgB;AACzB,IAAA,QADyB;AAEzB,IAAA,IAFyB;AAGzB,IAAA,QAHyB;AAIzB,IAAA,UAAU,EAAE;AACV,MAAA,KAAK,EAAE,OADG;AAEV,MAAA,IAAI,EAAE,KAFI;AAGV,MAAA,IAAI,EAAE,KAHI;AAIV,MAAA,KAAK,EAAE;AAJG,KAJa;AAUzB,IAAA,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,EAAuB;AAC3B,MAAA,QAAQ,EAAE,IADiB;AAE3B,MAAA,YAAY,EAAE,EACZ,GAAG,WAAW,CAAC;AADH;AAFa,KAAvB,CAVmB;AAgBzB,IAAA,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB;AAC7B,MAAA,QAAQ,EAAE,IADmB;AAE7B,MAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,iBAAA,CAAA,KAAA,CAAM,SAAN,EAAiB,KAAK,CAAC,EAAvB,CADQ;AAEZ,QAAA,GAFY;AAGZ,WAAG,WAAW,CAAC,OAHH;AAIZ,QAAA,IAAI,EAAE,OAJM;AAKZ,QAAA,MAAM,EAAE,QAAQ,GAAG,UAAH,GAAgB;AALpB;AAFe,KAAxB,CAhBkB;AA0BzB,IAAA,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,EAAuB;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAvB,CA1BmB;AA2BzB,IAAA,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAxB;AA3BkB,GAA3B;AA8BA,EAAA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,EAA+B,KAA/B;AAEA,SAAO,KAAP;AACD,CAnDM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","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/"}
|
|
@@ -25,15 +25,15 @@ const getPercent = (value, min, max) => {
|
|
|
25
25
|
return max === min ? 0 : (value - min) / (max - min) * 100;
|
|
26
26
|
};
|
|
27
27
|
|
|
28
|
-
const useSliderState_unstable = state => {
|
|
28
|
+
const useSliderState_unstable = (state, props) => {
|
|
29
29
|
const {
|
|
30
|
-
value,
|
|
31
30
|
defaultValue = 0,
|
|
32
31
|
min = 0,
|
|
33
32
|
max = 100,
|
|
34
|
-
step
|
|
35
|
-
origin
|
|
36
|
-
|
|
33
|
+
step,
|
|
34
|
+
origin,
|
|
35
|
+
value
|
|
36
|
+
} = props;
|
|
37
37
|
const {
|
|
38
38
|
dir
|
|
39
39
|
} = react_shared_contexts_1.useFluent();
|
|
@@ -47,7 +47,7 @@ const useSliderState_unstable = state => {
|
|
|
47
47
|
return origin !== undefined ? getPercent(origin, min, max) : 0;
|
|
48
48
|
}, [max, min, origin]);
|
|
49
49
|
const inputOnChange = state.input.onChange;
|
|
50
|
-
const propsOnChange =
|
|
50
|
+
const propsOnChange = props.onChange;
|
|
51
51
|
const onChange = react_utilities_1.useEventCallback(ev => {
|
|
52
52
|
const newValue = Number(ev.target.value);
|
|
53
53
|
setCurrentValue(react_utilities_1.clamp(newValue, min, max));
|
|
@@ -63,7 +63,7 @@ const useSliderState_unstable = state => {
|
|
|
63
63
|
const rootVariables = {
|
|
64
64
|
[railDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',
|
|
65
65
|
[thumbPositionVar]: valuePercent + '%',
|
|
66
|
-
[railStepsPercentVar]:
|
|
66
|
+
[railStepsPercentVar]: step && step > 0 ? `${step * 100 / (max - min)}%` : '',
|
|
67
67
|
[railOffsetVar]: origin !== undefined ? `${Math.min(valuePercent, originPercent)}%` : '0%',
|
|
68
68
|
[railProgressVar]: origin !== undefined ? `${Math.max(originPercent - valuePercent, valuePercent - originPercent)}%` : `${valuePercent}%`
|
|
69
69
|
}; // Root props
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Slider/useSliderState.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAGA,MAAM;AAAE,EAAA,aAAF;AAAiB,EAAA,mBAAjB;AAAsC,EAAA,eAAtC;AAAuD,EAAA,gBAAvD;AAAyE,EAAA;AAAzE,IAA8F,iBAAA,CAAA,aAApG;;AAEA,MAAM,UAAU,GAAG,CAAC,KAAD,EAAgB,GAAhB,EAA6B,GAA7B,KAA4C;AAC7D,SAAO,GAAG,KAAK,GAAR,GAAc,CAAd,GAAmB,CAAC,KAAK,GAAG,GAAT,KAAiB,GAAG,GAAG,GAAvB,CAAD,GAAgC,GAAzD;AACD,CAFD;;AAIO,MAAM,uBAAuB,
|
|
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, SliderProps } 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, props: SliderProps) => {\n const { defaultValue = 0, min = 0, max = 100, step, origin, 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 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 = 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 [railDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',\n [thumbPositionVar]: valuePercent + '%',\n [railStepsPercentVar]: step && 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/"}
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-slider",
|
|
3
|
-
"version": "9.0.0-beta.
|
|
3
|
+
"version": "9.0.0-beta.16",
|
|
4
4
|
"description": "Fluent UI React Slider component.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
7
|
-
"typings": "
|
|
7
|
+
"typings": "dist/index.d.ts",
|
|
8
8
|
"sideEffects": false,
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
@@ -28,16 +28,16 @@
|
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
30
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
32
|
-
"@fluentui/react-label": "9.0.0-
|
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.7",
|
|
32
|
+
"@fluentui/react-label": "9.0.0-rc.3",
|
|
33
33
|
"@fluentui/scripts": "^1.0.0"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@griffel/react": "1.0.
|
|
37
|
-
"@fluentui/react-shared-contexts": "9.0.0-rc.
|
|
38
|
-
"@fluentui/react-tabster": "9.0.0-rc.
|
|
39
|
-
"@fluentui/react-theme": "9.0.0-rc.
|
|
40
|
-
"@fluentui/react-utilities": "9.0.0-rc.
|
|
36
|
+
"@griffel/react": "1.0.5",
|
|
37
|
+
"@fluentui/react-shared-contexts": "9.0.0-rc.9",
|
|
38
|
+
"@fluentui/react-tabster": "9.0.0-rc.11",
|
|
39
|
+
"@fluentui/react-theme": "9.0.0-rc.9",
|
|
40
|
+
"@fluentui/react-utilities": "9.0.0-rc.9",
|
|
41
41
|
"tslib": "^2.1.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
package/lib/Slider.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './components/Slider/index';
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { SliderProps } from './Slider.types';
|
|
2
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
3
|
-
/**
|
|
4
|
-
* The Slider component allows users to quickly select a value by dragging a thumb across a rail.
|
|
5
|
-
*/
|
|
6
|
-
export declare const Slider: ForwardRefComponent<SliderProps>;
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';
|
|
3
|
-
export declare type SliderSlots = {
|
|
4
|
-
/**
|
|
5
|
-
* The root of the Slider.
|
|
6
|
-
* The root slot receives the `className` and `style` specified directly on the `<Slider>`.
|
|
7
|
-
* All other native props will be applied to the primary slot, `input`.
|
|
8
|
-
*/
|
|
9
|
-
root: NonNullable<Slot<'div'>>;
|
|
10
|
-
/**
|
|
11
|
-
* The Slider's base. It is used to visibly display the min and max selectable values.
|
|
12
|
-
*/
|
|
13
|
-
rail: NonNullable<Slot<'div'>>;
|
|
14
|
-
/**
|
|
15
|
-
* The draggable icon used to select a given value from the Slider.
|
|
16
|
-
* This is the element containing `role = 'slider'`.
|
|
17
|
-
*/
|
|
18
|
-
thumb: NonNullable<Slot<'div'>>;
|
|
19
|
-
/**
|
|
20
|
-
* The hidden input for the Slider.
|
|
21
|
-
* This is the PRIMARY slot: all native properties specified directly on `<Slider>` will be applied to this slot,
|
|
22
|
-
* except `className` and `style`, which remain on the root slot.
|
|
23
|
-
*
|
|
24
|
-
*/
|
|
25
|
-
input: NonNullable<Slot<'input'>> & {
|
|
26
|
-
/**
|
|
27
|
-
* Orient is a non standard attribute that allows for vertical orientation in Firefox. It is set internally
|
|
28
|
-
* when `vertical` is set to true.
|
|
29
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#non_standard_attributes
|
|
30
|
-
* Webkit/Chromium support for vertical inputs is provided via -webkit-appearance css property
|
|
31
|
-
*/
|
|
32
|
-
orient?: 'horizontal' | 'vertical';
|
|
33
|
-
};
|
|
34
|
-
};
|
|
35
|
-
declare type SliderCommons = {
|
|
36
|
-
/**
|
|
37
|
-
* The starting value for an uncontrolled Slider.
|
|
38
|
-
* Mutually exclusive with `value` prop.
|
|
39
|
-
*/
|
|
40
|
-
defaultValue?: number;
|
|
41
|
-
/**
|
|
42
|
-
* The current value of the controlled Slider.
|
|
43
|
-
* Mutually exclusive with `defaultValue` prop.
|
|
44
|
-
*/
|
|
45
|
-
value?: number;
|
|
46
|
-
/**
|
|
47
|
-
* The min value of the Slider.
|
|
48
|
-
* @default 0
|
|
49
|
-
*/
|
|
50
|
-
min?: number;
|
|
51
|
-
/**
|
|
52
|
-
* The max value of the Slider.
|
|
53
|
-
* @default 100
|
|
54
|
-
*/
|
|
55
|
-
max?: number;
|
|
56
|
-
/**
|
|
57
|
-
* The number of steps that the Slider's `value` will increment upon change. When provided, the Slider
|
|
58
|
-
* will snap to the closest available value. This must be a positive value.
|
|
59
|
-
* @default 1
|
|
60
|
-
*/
|
|
61
|
-
step?: number;
|
|
62
|
-
/**
|
|
63
|
-
* Whether to render the Slider as disabled.
|
|
64
|
-
*
|
|
65
|
-
* @default `false` (renders enabled)
|
|
66
|
-
*/
|
|
67
|
-
disabled?: boolean;
|
|
68
|
-
/**
|
|
69
|
-
* Render the Slider in a vertical orientation, smallest value on the bottom.
|
|
70
|
-
* @default `false`
|
|
71
|
-
*/
|
|
72
|
-
vertical?: boolean;
|
|
73
|
-
/**
|
|
74
|
-
* The starting origin point for the Slider.
|
|
75
|
-
* @default min
|
|
76
|
-
*/
|
|
77
|
-
origin?: number;
|
|
78
|
-
/**
|
|
79
|
-
* The size of the Slider.
|
|
80
|
-
* @default 'medium'
|
|
81
|
-
*/
|
|
82
|
-
size?: 'small' | 'medium';
|
|
83
|
-
/**
|
|
84
|
-
* Triggers a callback when the value has been changed. This will be called on every individual step.
|
|
85
|
-
*/
|
|
86
|
-
onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void;
|
|
87
|
-
};
|
|
88
|
-
export declare type SliderOnChangeData = {
|
|
89
|
-
value: number;
|
|
90
|
-
};
|
|
91
|
-
export declare type SliderProps = Omit<ComponentProps<Partial<SliderSlots>, 'input'>, 'defaultValue' | 'onChange' | 'size' | 'value'> & SliderCommons;
|
|
92
|
-
export declare type SliderState = ComponentState<SliderSlots> & SliderCommons;
|
|
93
|
-
export {};
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { SliderProps, SliderState } from './Slider.types';
|
|
3
|
-
/**
|
|
4
|
-
* Given user props, returns state and render function for a Slider.
|
|
5
|
-
*/
|
|
6
|
-
export declare const useSlider_unstable: (props: SliderProps, ref: React.Ref<HTMLInputElement>) => SliderState;
|
|
@@ -1,14 +0,0 @@
|
|
|
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
|
-
};
|
|
11
|
-
/**
|
|
12
|
-
* Apply styling to the Slider slots based on the state
|
|
13
|
-
*/
|
|
14
|
-
export declare const useSliderStyles_unstable: (state: SliderState) => SliderState;
|
package/lib/index.d.ts
DELETED
package/lib-commonjs/Slider.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './components/Slider/index';
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { SliderProps } from './Slider.types';
|
|
2
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
3
|
-
/**
|
|
4
|
-
* The Slider component allows users to quickly select a value by dragging a thumb across a rail.
|
|
5
|
-
*/
|
|
6
|
-
export declare const Slider: ForwardRefComponent<SliderProps>;
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';
|
|
3
|
-
export declare type SliderSlots = {
|
|
4
|
-
/**
|
|
5
|
-
* The root of the Slider.
|
|
6
|
-
* The root slot receives the `className` and `style` specified directly on the `<Slider>`.
|
|
7
|
-
* All other native props will be applied to the primary slot, `input`.
|
|
8
|
-
*/
|
|
9
|
-
root: NonNullable<Slot<'div'>>;
|
|
10
|
-
/**
|
|
11
|
-
* The Slider's base. It is used to visibly display the min and max selectable values.
|
|
12
|
-
*/
|
|
13
|
-
rail: NonNullable<Slot<'div'>>;
|
|
14
|
-
/**
|
|
15
|
-
* The draggable icon used to select a given value from the Slider.
|
|
16
|
-
* This is the element containing `role = 'slider'`.
|
|
17
|
-
*/
|
|
18
|
-
thumb: NonNullable<Slot<'div'>>;
|
|
19
|
-
/**
|
|
20
|
-
* The hidden input for the Slider.
|
|
21
|
-
* This is the PRIMARY slot: all native properties specified directly on `<Slider>` will be applied to this slot,
|
|
22
|
-
* except `className` and `style`, which remain on the root slot.
|
|
23
|
-
*
|
|
24
|
-
*/
|
|
25
|
-
input: NonNullable<Slot<'input'>> & {
|
|
26
|
-
/**
|
|
27
|
-
* Orient is a non standard attribute that allows for vertical orientation in Firefox. It is set internally
|
|
28
|
-
* when `vertical` is set to true.
|
|
29
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#non_standard_attributes
|
|
30
|
-
* Webkit/Chromium support for vertical inputs is provided via -webkit-appearance css property
|
|
31
|
-
*/
|
|
32
|
-
orient?: 'horizontal' | 'vertical';
|
|
33
|
-
};
|
|
34
|
-
};
|
|
35
|
-
declare type SliderCommons = {
|
|
36
|
-
/**
|
|
37
|
-
* The starting value for an uncontrolled Slider.
|
|
38
|
-
* Mutually exclusive with `value` prop.
|
|
39
|
-
*/
|
|
40
|
-
defaultValue?: number;
|
|
41
|
-
/**
|
|
42
|
-
* The current value of the controlled Slider.
|
|
43
|
-
* Mutually exclusive with `defaultValue` prop.
|
|
44
|
-
*/
|
|
45
|
-
value?: number;
|
|
46
|
-
/**
|
|
47
|
-
* The min value of the Slider.
|
|
48
|
-
* @default 0
|
|
49
|
-
*/
|
|
50
|
-
min?: number;
|
|
51
|
-
/**
|
|
52
|
-
* The max value of the Slider.
|
|
53
|
-
* @default 100
|
|
54
|
-
*/
|
|
55
|
-
max?: number;
|
|
56
|
-
/**
|
|
57
|
-
* The number of steps that the Slider's `value` will increment upon change. When provided, the Slider
|
|
58
|
-
* will snap to the closest available value. This must be a positive value.
|
|
59
|
-
* @default 1
|
|
60
|
-
*/
|
|
61
|
-
step?: number;
|
|
62
|
-
/**
|
|
63
|
-
* Whether to render the Slider as disabled.
|
|
64
|
-
*
|
|
65
|
-
* @default `false` (renders enabled)
|
|
66
|
-
*/
|
|
67
|
-
disabled?: boolean;
|
|
68
|
-
/**
|
|
69
|
-
* Render the Slider in a vertical orientation, smallest value on the bottom.
|
|
70
|
-
* @default `false`
|
|
71
|
-
*/
|
|
72
|
-
vertical?: boolean;
|
|
73
|
-
/**
|
|
74
|
-
* The starting origin point for the Slider.
|
|
75
|
-
* @default min
|
|
76
|
-
*/
|
|
77
|
-
origin?: number;
|
|
78
|
-
/**
|
|
79
|
-
* The size of the Slider.
|
|
80
|
-
* @default 'medium'
|
|
81
|
-
*/
|
|
82
|
-
size?: 'small' | 'medium';
|
|
83
|
-
/**
|
|
84
|
-
* Triggers a callback when the value has been changed. This will be called on every individual step.
|
|
85
|
-
*/
|
|
86
|
-
onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void;
|
|
87
|
-
};
|
|
88
|
-
export declare type SliderOnChangeData = {
|
|
89
|
-
value: number;
|
|
90
|
-
};
|
|
91
|
-
export declare type SliderProps = Omit<ComponentProps<Partial<SliderSlots>, 'input'>, 'defaultValue' | 'onChange' | 'size' | 'value'> & SliderCommons;
|
|
92
|
-
export declare type SliderState = ComponentState<SliderSlots> & SliderCommons;
|
|
93
|
-
export {};
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { SliderProps, SliderState } from './Slider.types';
|
|
3
|
-
/**
|
|
4
|
-
* Given user props, returns state and render function for a Slider.
|
|
5
|
-
*/
|
|
6
|
-
export declare const useSlider_unstable: (props: SliderProps, ref: React.Ref<HTMLInputElement>) => SliderState;
|
|
@@ -1,14 +0,0 @@
|
|
|
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
|
-
};
|
|
11
|
-
/**
|
|
12
|
-
* Apply styling to the Slider slots based on the state
|
|
13
|
-
*/
|
|
14
|
-
export declare const useSliderStyles_unstable: (state: SliderState) => SliderState;
|
package/lib-commonjs/index.d.ts
DELETED