@radix-ui/react-slider 1.1.2 → 1.2.0-rc.10
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/dist/index.d.mts +31 -19
- package/dist/index.d.ts +31 -19
- package/dist/index.js +526 -580
- package/dist/index.js.map +7 -1
- package/dist/index.mjs +495 -566
- package/dist/index.mjs.map +7 -1
- package/package.json +16 -16
- package/dist/index.d.ts.map +0 -1
package/dist/index.mjs
CHANGED
|
@@ -1,621 +1,550 @@
|
|
|
1
|
-
|
|
2
|
-
import {forwardRef as $g1Vy2$forwardRef, useState as $g1Vy2$useState, useRef as $g1Vy2$useRef, createElement as $g1Vy2$createElement, useMemo as $g1Vy2$useMemo, useEffect as $g1Vy2$useEffect} from "react";
|
|
3
|
-
import {clamp as $g1Vy2$clamp} from "@radix-ui/number";
|
|
4
|
-
import {composeEventHandlers as $g1Vy2$composeEventHandlers} from "@radix-ui/primitive";
|
|
5
|
-
import {useComposedRefs as $g1Vy2$useComposedRefs} from "@radix-ui/react-compose-refs";
|
|
6
|
-
import {createContextScope as $g1Vy2$createContextScope} from "@radix-ui/react-context";
|
|
7
|
-
import {useControllableState as $g1Vy2$useControllableState} from "@radix-ui/react-use-controllable-state";
|
|
8
|
-
import {useDirection as $g1Vy2$useDirection} from "@radix-ui/react-direction";
|
|
9
|
-
import {usePrevious as $g1Vy2$usePrevious} from "@radix-ui/react-use-previous";
|
|
10
|
-
import {useSize as $g1Vy2$useSize} from "@radix-ui/react-use-size";
|
|
11
|
-
import {Primitive as $g1Vy2$Primitive} from "@radix-ui/react-primitive";
|
|
12
|
-
import {createCollection as $g1Vy2$createCollection} from "@radix-ui/react-collection";
|
|
1
|
+
"use client";
|
|
13
2
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
'ArrowRight'
|
|
35
|
-
];
|
|
36
|
-
const $faa2e61a3361514f$var$BACK_KEYS = {
|
|
37
|
-
'from-left': [
|
|
38
|
-
'Home',
|
|
39
|
-
'PageDown',
|
|
40
|
-
'ArrowDown',
|
|
41
|
-
'ArrowLeft'
|
|
42
|
-
],
|
|
43
|
-
'from-right': [
|
|
44
|
-
'Home',
|
|
45
|
-
'PageDown',
|
|
46
|
-
'ArrowDown',
|
|
47
|
-
'ArrowRight'
|
|
48
|
-
],
|
|
49
|
-
'from-bottom': [
|
|
50
|
-
'Home',
|
|
51
|
-
'PageDown',
|
|
52
|
-
'ArrowDown',
|
|
53
|
-
'ArrowLeft'
|
|
54
|
-
],
|
|
55
|
-
'from-top': [
|
|
56
|
-
'Home',
|
|
57
|
-
'PageDown',
|
|
58
|
-
'ArrowUp',
|
|
59
|
-
'ArrowLeft'
|
|
60
|
-
]
|
|
3
|
+
// packages/react/slider/src/Slider.tsx
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
import { clamp } from "@radix-ui/number";
|
|
6
|
+
import { composeEventHandlers } from "@radix-ui/primitive";
|
|
7
|
+
import { useComposedRefs } from "@radix-ui/react-compose-refs";
|
|
8
|
+
import { createContextScope } from "@radix-ui/react-context";
|
|
9
|
+
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
10
|
+
import { useDirection } from "@radix-ui/react-direction";
|
|
11
|
+
import { usePrevious } from "@radix-ui/react-use-previous";
|
|
12
|
+
import { useSize } from "@radix-ui/react-use-size";
|
|
13
|
+
import { Primitive } from "@radix-ui/react-primitive";
|
|
14
|
+
import { createCollection } from "@radix-ui/react-collection";
|
|
15
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
16
|
+
var PAGE_KEYS = ["PageUp", "PageDown"];
|
|
17
|
+
var ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
|
|
18
|
+
var BACK_KEYS = {
|
|
19
|
+
"from-left": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
|
|
20
|
+
"from-right": ["Home", "PageDown", "ArrowDown", "ArrowRight"],
|
|
21
|
+
"from-bottom": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
|
|
22
|
+
"from-top": ["Home", "PageDown", "ArrowUp", "ArrowLeft"]
|
|
61
23
|
};
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
const [$faa2e61a3361514f$var$createSliderContext, $faa2e61a3361514f$export$ef72632d7b901f97] = $g1Vy2$createContextScope($faa2e61a3361514f$var$SLIDER_NAME, [
|
|
67
|
-
$faa2e61a3361514f$var$createCollectionScope
|
|
24
|
+
var SLIDER_NAME = "Slider";
|
|
25
|
+
var [Collection, useCollection, createCollectionScope] = createCollection(SLIDER_NAME);
|
|
26
|
+
var [createSliderContext, createSliderScope] = createContextScope(SLIDER_NAME, [
|
|
27
|
+
createCollectionScope
|
|
68
28
|
]);
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
29
|
+
var [SliderProvider, useSliderContext] = createSliderContext(SLIDER_NAME);
|
|
30
|
+
var Slider = React.forwardRef(
|
|
31
|
+
(props, forwardedRef) => {
|
|
32
|
+
const {
|
|
33
|
+
name,
|
|
34
|
+
min = 0,
|
|
35
|
+
max = 100,
|
|
36
|
+
step = 1,
|
|
37
|
+
orientation = "horizontal",
|
|
38
|
+
disabled = false,
|
|
39
|
+
minStepsBetweenThumbs = 0,
|
|
40
|
+
defaultValue = [min],
|
|
41
|
+
value,
|
|
42
|
+
onValueChange = () => {
|
|
43
|
+
},
|
|
44
|
+
onValueCommit = () => {
|
|
45
|
+
},
|
|
46
|
+
inverted = false,
|
|
47
|
+
...sliderProps
|
|
48
|
+
} = props;
|
|
49
|
+
const thumbRefs = React.useRef(/* @__PURE__ */ new Set());
|
|
50
|
+
const valueIndexToChangeRef = React.useRef(0);
|
|
51
|
+
const isHorizontal = orientation === "horizontal";
|
|
52
|
+
const SliderOrientation = isHorizontal ? SliderHorizontal : SliderVertical;
|
|
53
|
+
const [values = [], setValues] = useControllableState({
|
|
54
|
+
prop: value,
|
|
55
|
+
defaultProp: defaultValue,
|
|
56
|
+
onChange: (value2) => {
|
|
57
|
+
const thumbs = [...thumbRefs.current];
|
|
58
|
+
thumbs[valueIndexToChangeRef.current]?.focus();
|
|
59
|
+
onValueChange(value2);
|
|
60
|
+
}
|
|
93
61
|
});
|
|
94
|
-
const valuesBeforeSlideStartRef =
|
|
95
|
-
function handleSlideStart(
|
|
96
|
-
|
|
97
|
-
|
|
62
|
+
const valuesBeforeSlideStartRef = React.useRef(values);
|
|
63
|
+
function handleSlideStart(value2) {
|
|
64
|
+
const closestIndex = getClosestValueIndex(values, value2);
|
|
65
|
+
updateValues(value2, closestIndex);
|
|
98
66
|
}
|
|
99
|
-
function handleSlideMove(
|
|
100
|
-
|
|
67
|
+
function handleSlideMove(value2) {
|
|
68
|
+
updateValues(value2, valueIndexToChangeRef.current);
|
|
101
69
|
}
|
|
102
70
|
function handleSlideEnd() {
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
71
|
+
const prevValue = valuesBeforeSlideStartRef.current[valueIndexToChangeRef.current];
|
|
72
|
+
const nextValue = values[valueIndexToChangeRef.current];
|
|
73
|
+
const hasChanged = nextValue !== prevValue;
|
|
74
|
+
if (hasChanged) onValueCommit(values);
|
|
107
75
|
}
|
|
108
|
-
function updateValues(
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
const
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
return hasChanged ? nextValues : prevValues;
|
|
124
|
-
} else return prevValues;
|
|
125
|
-
});
|
|
76
|
+
function updateValues(value2, atIndex, { commit } = { commit: false }) {
|
|
77
|
+
const decimalCount = getDecimalCount(step);
|
|
78
|
+
const snapToStep = roundValue(Math.round((value2 - min) / step) * step + min, decimalCount);
|
|
79
|
+
const nextValue = clamp(snapToStep, [min, max]);
|
|
80
|
+
setValues((prevValues = []) => {
|
|
81
|
+
const nextValues = getNextSortedValues(prevValues, nextValue, atIndex);
|
|
82
|
+
if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {
|
|
83
|
+
valueIndexToChangeRef.current = nextValues.indexOf(nextValue);
|
|
84
|
+
const hasChanged = String(nextValues) !== String(prevValues);
|
|
85
|
+
if (hasChanged && commit) onValueCommit(nextValues);
|
|
86
|
+
return hasChanged ? nextValues : prevValues;
|
|
87
|
+
} else {
|
|
88
|
+
return prevValues;
|
|
89
|
+
}
|
|
90
|
+
});
|
|
126
91
|
}
|
|
127
|
-
return
|
|
92
|
+
return /* @__PURE__ */ jsx(
|
|
93
|
+
SliderProvider,
|
|
94
|
+
{
|
|
128
95
|
scope: props.__scopeSlider,
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
96
|
+
name,
|
|
97
|
+
disabled,
|
|
98
|
+
min,
|
|
99
|
+
max,
|
|
100
|
+
valueIndexToChangeRef,
|
|
133
101
|
thumbs: thumbRefs.current,
|
|
134
|
-
values
|
|
135
|
-
orientation
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
onEndKeyDown: ()=>!disabled && updateValues(max, values.length - 1, {
|
|
159
|
-
commit: true
|
|
160
|
-
})
|
|
161
|
-
,
|
|
162
|
-
onStepKeyDown: ({ event: event , direction: stepDirection })=>{
|
|
163
|
-
if (!disabled) {
|
|
164
|
-
const isPageKey = $faa2e61a3361514f$var$PAGE_KEYS.includes(event.key);
|
|
165
|
-
const isSkipKey = isPageKey || event.shiftKey && $faa2e61a3361514f$var$ARROW_KEYS.includes(event.key);
|
|
102
|
+
values,
|
|
103
|
+
orientation,
|
|
104
|
+
children: /* @__PURE__ */ jsx(Collection.Provider, { scope: props.__scopeSlider, children: /* @__PURE__ */ jsx(Collection.Slot, { scope: props.__scopeSlider, children: /* @__PURE__ */ jsx(
|
|
105
|
+
SliderOrientation,
|
|
106
|
+
{
|
|
107
|
+
"aria-disabled": disabled,
|
|
108
|
+
"data-disabled": disabled ? "" : void 0,
|
|
109
|
+
...sliderProps,
|
|
110
|
+
ref: forwardedRef,
|
|
111
|
+
onPointerDown: composeEventHandlers(sliderProps.onPointerDown, () => {
|
|
112
|
+
if (!disabled) valuesBeforeSlideStartRef.current = values;
|
|
113
|
+
}),
|
|
114
|
+
min,
|
|
115
|
+
max,
|
|
116
|
+
inverted,
|
|
117
|
+
onSlideStart: disabled ? void 0 : handleSlideStart,
|
|
118
|
+
onSlideMove: disabled ? void 0 : handleSlideMove,
|
|
119
|
+
onSlideEnd: disabled ? void 0 : handleSlideEnd,
|
|
120
|
+
onHomeKeyDown: () => !disabled && updateValues(min, 0, { commit: true }),
|
|
121
|
+
onEndKeyDown: () => !disabled && updateValues(max, values.length - 1, { commit: true }),
|
|
122
|
+
onStepKeyDown: ({ event, direction: stepDirection }) => {
|
|
123
|
+
if (!disabled) {
|
|
124
|
+
const isPageKey = PAGE_KEYS.includes(event.key);
|
|
125
|
+
const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.includes(event.key);
|
|
166
126
|
const multiplier = isSkipKey ? 10 : 1;
|
|
167
127
|
const atIndex = valueIndexToChangeRef.current;
|
|
168
|
-
const
|
|
128
|
+
const value2 = values[atIndex];
|
|
169
129
|
const stepInDirection = step * multiplier * stepDirection;
|
|
170
|
-
updateValues(
|
|
171
|
-
|
|
172
|
-
});
|
|
130
|
+
updateValues(value2 + stepInDirection, atIndex, { commit: true });
|
|
131
|
+
}
|
|
173
132
|
}
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
name: name ? name + (values.length > 1 ? '[]' : '') : undefined,
|
|
178
|
-
value: value
|
|
179
|
-
})
|
|
180
|
-
));
|
|
181
|
-
});
|
|
182
|
-
/*#__PURE__*/ Object.assign($faa2e61a3361514f$export$472062a354075cee, {
|
|
183
|
-
displayName: $faa2e61a3361514f$var$SLIDER_NAME
|
|
184
|
-
});
|
|
185
|
-
/* -------------------------------------------------------------------------------------------------
|
|
186
|
-
* SliderHorizontal
|
|
187
|
-
* -----------------------------------------------------------------------------------------------*/ const [$faa2e61a3361514f$var$SliderOrientationProvider, $faa2e61a3361514f$var$useSliderOrientationContext] = $faa2e61a3361514f$var$createSliderContext($faa2e61a3361514f$var$SLIDER_NAME, {
|
|
188
|
-
startEdge: 'left',
|
|
189
|
-
endEdge: 'right',
|
|
190
|
-
size: 'width',
|
|
191
|
-
direction: 1
|
|
192
|
-
});
|
|
193
|
-
const $faa2e61a3361514f$var$SliderHorizontal = /*#__PURE__*/ $g1Vy2$forwardRef((props, forwardedRef)=>{
|
|
194
|
-
const { min: min , max: max , dir: dir , inverted: inverted , onSlideStart: onSlideStart , onSlideMove: onSlideMove , onSlideEnd: onSlideEnd , onStepKeyDown: onStepKeyDown , ...sliderProps } = props;
|
|
195
|
-
const [slider, setSlider] = $g1Vy2$useState(null);
|
|
196
|
-
const composedRefs = $g1Vy2$useComposedRefs(forwardedRef, (node)=>setSlider(node)
|
|
133
|
+
}
|
|
134
|
+
) }) })
|
|
135
|
+
}
|
|
197
136
|
);
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
137
|
+
}
|
|
138
|
+
);
|
|
139
|
+
Slider.displayName = SLIDER_NAME;
|
|
140
|
+
var [SliderOrientationProvider, useSliderOrientationContext] = createSliderContext(SLIDER_NAME, {
|
|
141
|
+
startEdge: "left",
|
|
142
|
+
endEdge: "right",
|
|
143
|
+
size: "width",
|
|
144
|
+
direction: 1
|
|
145
|
+
});
|
|
146
|
+
var SliderHorizontal = React.forwardRef(
|
|
147
|
+
(props, forwardedRef) => {
|
|
148
|
+
const {
|
|
149
|
+
min,
|
|
150
|
+
max,
|
|
151
|
+
dir,
|
|
152
|
+
inverted,
|
|
153
|
+
onSlideStart,
|
|
154
|
+
onSlideMove,
|
|
155
|
+
onSlideEnd,
|
|
156
|
+
onStepKeyDown,
|
|
157
|
+
...sliderProps
|
|
158
|
+
} = props;
|
|
159
|
+
const [slider, setSlider] = React.useState(null);
|
|
160
|
+
const composedRefs = useComposedRefs(forwardedRef, (node) => setSlider(node));
|
|
161
|
+
const rectRef = React.useRef();
|
|
162
|
+
const direction = useDirection(dir);
|
|
163
|
+
const isDirectionLTR = direction === "ltr";
|
|
201
164
|
const isSlidingFromLeft = isDirectionLTR && !inverted || !isDirectionLTR && inverted;
|
|
202
165
|
function getValueFromPointer(pointerPosition) {
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
min,
|
|
210
|
-
max
|
|
211
|
-
] : [
|
|
212
|
-
max,
|
|
213
|
-
min
|
|
214
|
-
];
|
|
215
|
-
const value = $faa2e61a3361514f$var$linearScale(input, output);
|
|
216
|
-
rectRef.current = rect;
|
|
217
|
-
return value(pointerPosition - rect.left);
|
|
166
|
+
const rect = rectRef.current || slider.getBoundingClientRect();
|
|
167
|
+
const input = [0, rect.width];
|
|
168
|
+
const output = isSlidingFromLeft ? [min, max] : [max, min];
|
|
169
|
+
const value = linearScale(input, output);
|
|
170
|
+
rectRef.current = rect;
|
|
171
|
+
return value(pointerPosition - rect.left);
|
|
218
172
|
}
|
|
219
|
-
return
|
|
173
|
+
return /* @__PURE__ */ jsx(
|
|
174
|
+
SliderOrientationProvider,
|
|
175
|
+
{
|
|
220
176
|
scope: props.__scopeSlider,
|
|
221
|
-
startEdge: isSlidingFromLeft ?
|
|
222
|
-
endEdge: isSlidingFromLeft ?
|
|
177
|
+
startEdge: isSlidingFromLeft ? "left" : "right",
|
|
178
|
+
endEdge: isSlidingFromLeft ? "right" : "left",
|
|
223
179
|
direction: isSlidingFromLeft ? 1 : -1,
|
|
224
|
-
size: "width"
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
onSlideStart
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
onSlideMove
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
onSlideEnd
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
const
|
|
262
|
-
|
|
180
|
+
size: "width",
|
|
181
|
+
children: /* @__PURE__ */ jsx(
|
|
182
|
+
SliderImpl,
|
|
183
|
+
{
|
|
184
|
+
dir: direction,
|
|
185
|
+
"data-orientation": "horizontal",
|
|
186
|
+
...sliderProps,
|
|
187
|
+
ref: composedRefs,
|
|
188
|
+
style: {
|
|
189
|
+
...sliderProps.style,
|
|
190
|
+
["--radix-slider-thumb-transform"]: "translateX(-50%)"
|
|
191
|
+
},
|
|
192
|
+
onSlideStart: (event) => {
|
|
193
|
+
const value = getValueFromPointer(event.clientX);
|
|
194
|
+
onSlideStart?.(value);
|
|
195
|
+
},
|
|
196
|
+
onSlideMove: (event) => {
|
|
197
|
+
const value = getValueFromPointer(event.clientX);
|
|
198
|
+
onSlideMove?.(value);
|
|
199
|
+
},
|
|
200
|
+
onSlideEnd: () => {
|
|
201
|
+
rectRef.current = void 0;
|
|
202
|
+
onSlideEnd?.();
|
|
203
|
+
},
|
|
204
|
+
onStepKeyDown: (event) => {
|
|
205
|
+
const slideDirection = isSlidingFromLeft ? "from-left" : "from-right";
|
|
206
|
+
const isBackKey = BACK_KEYS[slideDirection].includes(event.key);
|
|
207
|
+
onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
)
|
|
211
|
+
}
|
|
212
|
+
);
|
|
213
|
+
}
|
|
214
|
+
);
|
|
215
|
+
var SliderVertical = React.forwardRef(
|
|
216
|
+
(props, forwardedRef) => {
|
|
217
|
+
const {
|
|
218
|
+
min,
|
|
219
|
+
max,
|
|
220
|
+
inverted,
|
|
221
|
+
onSlideStart,
|
|
222
|
+
onSlideMove,
|
|
223
|
+
onSlideEnd,
|
|
224
|
+
onStepKeyDown,
|
|
225
|
+
...sliderProps
|
|
226
|
+
} = props;
|
|
227
|
+
const sliderRef = React.useRef(null);
|
|
228
|
+
const ref = useComposedRefs(forwardedRef, sliderRef);
|
|
229
|
+
const rectRef = React.useRef();
|
|
263
230
|
const isSlidingFromBottom = !inverted;
|
|
264
231
|
function getValueFromPointer(pointerPosition) {
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
max,
|
|
272
|
-
min
|
|
273
|
-
] : [
|
|
274
|
-
min,
|
|
275
|
-
max
|
|
276
|
-
];
|
|
277
|
-
const value = $faa2e61a3361514f$var$linearScale(input, output);
|
|
278
|
-
rectRef.current = rect;
|
|
279
|
-
return value(pointerPosition - rect.top);
|
|
232
|
+
const rect = rectRef.current || sliderRef.current.getBoundingClientRect();
|
|
233
|
+
const input = [0, rect.height];
|
|
234
|
+
const output = isSlidingFromBottom ? [max, min] : [min, max];
|
|
235
|
+
const value = linearScale(input, output);
|
|
236
|
+
rectRef.current = rect;
|
|
237
|
+
return value(pointerPosition - rect.top);
|
|
280
238
|
}
|
|
281
|
-
return
|
|
239
|
+
return /* @__PURE__ */ jsx(
|
|
240
|
+
SliderOrientationProvider,
|
|
241
|
+
{
|
|
282
242
|
scope: props.__scopeSlider,
|
|
283
|
-
startEdge: isSlidingFromBottom ?
|
|
284
|
-
endEdge: isSlidingFromBottom ?
|
|
243
|
+
startEdge: isSlidingFromBottom ? "bottom" : "top",
|
|
244
|
+
endEdge: isSlidingFromBottom ? "top" : "bottom",
|
|
285
245
|
size: "height",
|
|
286
|
-
direction: isSlidingFromBottom ? 1 : -1
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
onSlideStart
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
onSlideMove
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
onSlideEnd
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
});
|
|
314
|
-
}
|
|
315
|
-
})));
|
|
316
|
-
});
|
|
317
|
-
/* -------------------------------------------------------------------------------------------------
|
|
318
|
-
* SliderImpl
|
|
319
|
-
* -----------------------------------------------------------------------------------------------*/ const $faa2e61a3361514f$var$SliderImpl = /*#__PURE__*/ $g1Vy2$forwardRef((props, forwardedRef)=>{
|
|
320
|
-
const { __scopeSlider: __scopeSlider , onSlideStart: onSlideStart , onSlideMove: onSlideMove , onSlideEnd: onSlideEnd , onHomeKeyDown: onHomeKeyDown , onEndKeyDown: onEndKeyDown , onStepKeyDown: onStepKeyDown , ...sliderProps } = props;
|
|
321
|
-
const context = $faa2e61a3361514f$var$useSliderContext($faa2e61a3361514f$var$SLIDER_NAME, __scopeSlider);
|
|
322
|
-
return /*#__PURE__*/ $g1Vy2$createElement($g1Vy2$Primitive.span, $g1Vy2$babelruntimehelpersesmextends({}, sliderProps, {
|
|
323
|
-
ref: forwardedRef,
|
|
324
|
-
onKeyDown: $g1Vy2$composeEventHandlers(props.onKeyDown, (event)=>{
|
|
325
|
-
if (event.key === 'Home') {
|
|
326
|
-
onHomeKeyDown(event); // Prevent scrolling to page start
|
|
327
|
-
event.preventDefault();
|
|
328
|
-
} else if (event.key === 'End') {
|
|
329
|
-
onEndKeyDown(event); // Prevent scrolling to page end
|
|
330
|
-
event.preventDefault();
|
|
331
|
-
} else if ($faa2e61a3361514f$var$PAGE_KEYS.concat($faa2e61a3361514f$var$ARROW_KEYS).includes(event.key)) {
|
|
332
|
-
onStepKeyDown(event); // Prevent scrolling for directional key presses
|
|
333
|
-
event.preventDefault();
|
|
246
|
+
direction: isSlidingFromBottom ? 1 : -1,
|
|
247
|
+
children: /* @__PURE__ */ jsx(
|
|
248
|
+
SliderImpl,
|
|
249
|
+
{
|
|
250
|
+
"data-orientation": "vertical",
|
|
251
|
+
...sliderProps,
|
|
252
|
+
ref,
|
|
253
|
+
style: {
|
|
254
|
+
...sliderProps.style,
|
|
255
|
+
["--radix-slider-thumb-transform"]: "translateY(50%)"
|
|
256
|
+
},
|
|
257
|
+
onSlideStart: (event) => {
|
|
258
|
+
const value = getValueFromPointer(event.clientY);
|
|
259
|
+
onSlideStart?.(value);
|
|
260
|
+
},
|
|
261
|
+
onSlideMove: (event) => {
|
|
262
|
+
const value = getValueFromPointer(event.clientY);
|
|
263
|
+
onSlideMove?.(value);
|
|
264
|
+
},
|
|
265
|
+
onSlideEnd: () => {
|
|
266
|
+
rectRef.current = void 0;
|
|
267
|
+
onSlideEnd?.();
|
|
268
|
+
},
|
|
269
|
+
onStepKeyDown: (event) => {
|
|
270
|
+
const slideDirection = isSlidingFromBottom ? "from-bottom" : "from-top";
|
|
271
|
+
const isBackKey = BACK_KEYS[slideDirection].includes(event.key);
|
|
272
|
+
onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });
|
|
334
273
|
}
|
|
274
|
+
}
|
|
275
|
+
)
|
|
276
|
+
}
|
|
277
|
+
);
|
|
278
|
+
}
|
|
279
|
+
);
|
|
280
|
+
var SliderImpl = React.forwardRef(
|
|
281
|
+
(props, forwardedRef) => {
|
|
282
|
+
const {
|
|
283
|
+
__scopeSlider,
|
|
284
|
+
onSlideStart,
|
|
285
|
+
onSlideMove,
|
|
286
|
+
onSlideEnd,
|
|
287
|
+
onHomeKeyDown,
|
|
288
|
+
onEndKeyDown,
|
|
289
|
+
onStepKeyDown,
|
|
290
|
+
...sliderProps
|
|
291
|
+
} = props;
|
|
292
|
+
const context = useSliderContext(SLIDER_NAME, __scopeSlider);
|
|
293
|
+
return /* @__PURE__ */ jsx(
|
|
294
|
+
Primitive.span,
|
|
295
|
+
{
|
|
296
|
+
...sliderProps,
|
|
297
|
+
ref: forwardedRef,
|
|
298
|
+
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
|
|
299
|
+
if (event.key === "Home") {
|
|
300
|
+
onHomeKeyDown(event);
|
|
301
|
+
event.preventDefault();
|
|
302
|
+
} else if (event.key === "End") {
|
|
303
|
+
onEndKeyDown(event);
|
|
304
|
+
event.preventDefault();
|
|
305
|
+
} else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {
|
|
306
|
+
onStepKeyDown(event);
|
|
307
|
+
event.preventDefault();
|
|
308
|
+
}
|
|
335
309
|
}),
|
|
336
|
-
onPointerDown:
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
310
|
+
onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
|
|
311
|
+
const target = event.target;
|
|
312
|
+
target.setPointerCapture(event.pointerId);
|
|
313
|
+
event.preventDefault();
|
|
314
|
+
if (context.thumbs.has(target)) {
|
|
315
|
+
target.focus();
|
|
316
|
+
} else {
|
|
317
|
+
onSlideStart(event);
|
|
318
|
+
}
|
|
343
319
|
}),
|
|
344
|
-
onPointerMove:
|
|
345
|
-
|
|
346
|
-
|
|
320
|
+
onPointerMove: composeEventHandlers(props.onPointerMove, (event) => {
|
|
321
|
+
const target = event.target;
|
|
322
|
+
if (target.hasPointerCapture(event.pointerId)) onSlideMove(event);
|
|
347
323
|
}),
|
|
348
|
-
onPointerUp:
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
324
|
+
onPointerUp: composeEventHandlers(props.onPointerUp, (event) => {
|
|
325
|
+
const target = event.target;
|
|
326
|
+
if (target.hasPointerCapture(event.pointerId)) {
|
|
327
|
+
target.releasePointerCapture(event.pointerId);
|
|
328
|
+
onSlideEnd(event);
|
|
329
|
+
}
|
|
354
330
|
})
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
const
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
331
|
+
}
|
|
332
|
+
);
|
|
333
|
+
}
|
|
334
|
+
);
|
|
335
|
+
var TRACK_NAME = "SliderTrack";
|
|
336
|
+
var SliderTrack = React.forwardRef(
|
|
337
|
+
(props, forwardedRef) => {
|
|
338
|
+
const { __scopeSlider, ...trackProps } = props;
|
|
339
|
+
const context = useSliderContext(TRACK_NAME, __scopeSlider);
|
|
340
|
+
return /* @__PURE__ */ jsx(
|
|
341
|
+
Primitive.span,
|
|
342
|
+
{
|
|
343
|
+
"data-disabled": context.disabled ? "" : void 0,
|
|
344
|
+
"data-orientation": context.orientation,
|
|
345
|
+
...trackProps,
|
|
367
346
|
ref: forwardedRef
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
const
|
|
377
|
-
const
|
|
378
|
-
const
|
|
379
|
-
const
|
|
380
|
-
const
|
|
381
|
-
const composedRefs = $g1Vy2$useComposedRefs(forwardedRef, ref);
|
|
347
|
+
}
|
|
348
|
+
);
|
|
349
|
+
}
|
|
350
|
+
);
|
|
351
|
+
SliderTrack.displayName = TRACK_NAME;
|
|
352
|
+
var RANGE_NAME = "SliderRange";
|
|
353
|
+
var SliderRange = React.forwardRef(
|
|
354
|
+
(props, forwardedRef) => {
|
|
355
|
+
const { __scopeSlider, ...rangeProps } = props;
|
|
356
|
+
const context = useSliderContext(RANGE_NAME, __scopeSlider);
|
|
357
|
+
const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider);
|
|
358
|
+
const ref = React.useRef(null);
|
|
359
|
+
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
382
360
|
const valuesCount = context.values.length;
|
|
383
|
-
const percentages = context.values.map(
|
|
361
|
+
const percentages = context.values.map(
|
|
362
|
+
(value) => convertValueToPercentage(value, context.min, context.max)
|
|
384
363
|
);
|
|
385
364
|
const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
|
|
386
365
|
const offsetEnd = 100 - Math.max(...percentages);
|
|
387
|
-
return
|
|
366
|
+
return /* @__PURE__ */ jsx(
|
|
367
|
+
Primitive.span,
|
|
368
|
+
{
|
|
388
369
|
"data-orientation": context.orientation,
|
|
389
|
-
"data-disabled": context.disabled ?
|
|
390
|
-
|
|
370
|
+
"data-disabled": context.disabled ? "" : void 0,
|
|
371
|
+
...rangeProps,
|
|
391
372
|
ref: composedRefs,
|
|
392
373
|
style: {
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
374
|
+
...props.style,
|
|
375
|
+
[orientation.startEdge]: offsetStart + "%",
|
|
376
|
+
[orientation.endEdge]: offsetEnd + "%"
|
|
396
377
|
}
|
|
397
|
-
|
|
398
|
-
});
|
|
399
|
-
/*#__PURE__*/ Object.assign($faa2e61a3361514f$export$a5cf38a7a000fe77, {
|
|
400
|
-
displayName: $faa2e61a3361514f$var$RANGE_NAME
|
|
401
|
-
});
|
|
402
|
-
/* -------------------------------------------------------------------------------------------------
|
|
403
|
-
* SliderThumb
|
|
404
|
-
* -----------------------------------------------------------------------------------------------*/ const $faa2e61a3361514f$var$THUMB_NAME = 'SliderThumb';
|
|
405
|
-
const $faa2e61a3361514f$export$2c1b491743890dec = /*#__PURE__*/ $g1Vy2$forwardRef((props, forwardedRef)=>{
|
|
406
|
-
const getItems = $faa2e61a3361514f$var$useCollection(props.__scopeSlider);
|
|
407
|
-
const [thumb, setThumb] = $g1Vy2$useState(null);
|
|
408
|
-
const composedRefs = $g1Vy2$useComposedRefs(forwardedRef, (node)=>setThumb(node)
|
|
378
|
+
}
|
|
409
379
|
);
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
const { __scopeSlider: __scopeSlider , index: index , ...thumbProps } = props;
|
|
423
|
-
const context = $faa2e61a3361514f$var$useSliderContext($faa2e61a3361514f$var$THUMB_NAME, __scopeSlider);
|
|
424
|
-
const orientation = $faa2e61a3361514f$var$useSliderOrientationContext($faa2e61a3361514f$var$THUMB_NAME, __scopeSlider);
|
|
425
|
-
const [thumb, setThumb] = $g1Vy2$useState(null);
|
|
426
|
-
const composedRefs = $g1Vy2$useComposedRefs(forwardedRef, (node)=>setThumb(node)
|
|
380
|
+
}
|
|
381
|
+
);
|
|
382
|
+
SliderRange.displayName = RANGE_NAME;
|
|
383
|
+
var THUMB_NAME = "SliderThumb";
|
|
384
|
+
var SliderThumb = React.forwardRef(
|
|
385
|
+
(props, forwardedRef) => {
|
|
386
|
+
const getItems = useCollection(props.__scopeSlider);
|
|
387
|
+
const [thumb, setThumb] = React.useState(null);
|
|
388
|
+
const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));
|
|
389
|
+
const index = React.useMemo(
|
|
390
|
+
() => thumb ? getItems().findIndex((item) => item.ref.current === thumb) : -1,
|
|
391
|
+
[getItems, thumb]
|
|
427
392
|
);
|
|
428
|
-
|
|
393
|
+
return /* @__PURE__ */ jsx(SliderThumbImpl, { ...props, ref: composedRefs, index });
|
|
394
|
+
}
|
|
395
|
+
);
|
|
396
|
+
var SliderThumbImpl = React.forwardRef(
|
|
397
|
+
(props, forwardedRef) => {
|
|
398
|
+
const { __scopeSlider, index, name, ...thumbProps } = props;
|
|
399
|
+
const context = useSliderContext(THUMB_NAME, __scopeSlider);
|
|
400
|
+
const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider);
|
|
401
|
+
const [thumb, setThumb] = React.useState(null);
|
|
402
|
+
const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));
|
|
403
|
+
const isFormControl = thumb ? Boolean(thumb.closest("form")) : true;
|
|
404
|
+
const size = useSize(thumb);
|
|
429
405
|
const value = context.values[index];
|
|
430
|
-
const percent = value ===
|
|
431
|
-
const label =
|
|
432
|
-
const orientationSize = size
|
|
433
|
-
const thumbInBoundsOffset = orientationSize ?
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
}, [
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
return /*#__PURE__*/ $g1Vy2$createElement("span", {
|
|
446
|
-
style: {
|
|
447
|
-
transform: 'var(--radix-slider-thumb-transform)',
|
|
448
|
-
position: 'absolute',
|
|
449
|
-
[orientation.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`
|
|
450
|
-
}
|
|
451
|
-
}, /*#__PURE__*/ $g1Vy2$createElement($faa2e61a3361514f$var$Collection.ItemSlot, {
|
|
452
|
-
scope: props.__scopeSlider
|
|
453
|
-
}, /*#__PURE__*/ $g1Vy2$createElement($g1Vy2$Primitive.span, $g1Vy2$babelruntimehelpersesmextends({
|
|
454
|
-
role: "slider",
|
|
455
|
-
"aria-label": props['aria-label'] || label,
|
|
456
|
-
"aria-valuemin": context.min,
|
|
457
|
-
"aria-valuenow": value,
|
|
458
|
-
"aria-valuemax": context.max,
|
|
459
|
-
"aria-orientation": context.orientation,
|
|
460
|
-
"data-orientation": context.orientation,
|
|
461
|
-
"data-disabled": context.disabled ? '' : undefined,
|
|
462
|
-
tabIndex: context.disabled ? undefined : 0
|
|
463
|
-
}, thumbProps, {
|
|
464
|
-
ref: composedRefs,
|
|
465
|
-
style: value === undefined ? {
|
|
466
|
-
display: 'none'
|
|
467
|
-
} : props.style,
|
|
468
|
-
onFocus: $g1Vy2$composeEventHandlers(props.onFocus, ()=>{
|
|
469
|
-
context.valueIndexToChangeRef.current = index;
|
|
470
|
-
})
|
|
471
|
-
}))));
|
|
472
|
-
});
|
|
473
|
-
/*#__PURE__*/ Object.assign($faa2e61a3361514f$export$2c1b491743890dec, {
|
|
474
|
-
displayName: $faa2e61a3361514f$var$THUMB_NAME
|
|
475
|
-
});
|
|
476
|
-
/* -----------------------------------------------------------------------------------------------*/ const $faa2e61a3361514f$var$BubbleInput = (props)=>{
|
|
477
|
-
const { value: value , ...inputProps } = props;
|
|
478
|
-
const ref = $g1Vy2$useRef(null);
|
|
479
|
-
const prevValue = $g1Vy2$usePrevious(value); // Bubble value change to parents (e.g form change event)
|
|
480
|
-
$g1Vy2$useEffect(()=>{
|
|
481
|
-
const input = ref.current;
|
|
482
|
-
const inputProto = window.HTMLInputElement.prototype;
|
|
483
|
-
const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'value');
|
|
484
|
-
const setValue = descriptor.set;
|
|
485
|
-
if (prevValue !== value && setValue) {
|
|
486
|
-
const event = new Event('input', {
|
|
487
|
-
bubbles: true
|
|
488
|
-
});
|
|
489
|
-
setValue.call(input, value);
|
|
490
|
-
input.dispatchEvent(event);
|
|
491
|
-
}
|
|
492
|
-
}, [
|
|
493
|
-
prevValue,
|
|
494
|
-
value
|
|
495
|
-
]);
|
|
496
|
-
/**
|
|
497
|
-
* We purposefully do not use `type="hidden"` here otherwise forms that
|
|
498
|
-
* wrap it will not be able to access its value via the FormData API.
|
|
499
|
-
*
|
|
500
|
-
* We purposefully do not add the `value` attribute here to allow the value
|
|
501
|
-
* to be set programatically and bubble to any parent form `onChange` event.
|
|
502
|
-
* Adding the `value` will cause React to consider the programatic
|
|
503
|
-
* dispatch a duplicate and it will get swallowed.
|
|
504
|
-
*/ return /*#__PURE__*/ $g1Vy2$createElement("input", $g1Vy2$babelruntimehelpersesmextends({
|
|
406
|
+
const percent = value === void 0 ? 0 : convertValueToPercentage(value, context.min, context.max);
|
|
407
|
+
const label = getLabel(index, context.values.length);
|
|
408
|
+
const orientationSize = size?.[orientation.size];
|
|
409
|
+
const thumbInBoundsOffset = orientationSize ? getThumbInBoundsOffset(orientationSize, percent, orientation.direction) : 0;
|
|
410
|
+
React.useEffect(() => {
|
|
411
|
+
if (thumb) {
|
|
412
|
+
context.thumbs.add(thumb);
|
|
413
|
+
return () => {
|
|
414
|
+
context.thumbs.delete(thumb);
|
|
415
|
+
};
|
|
416
|
+
}
|
|
417
|
+
}, [thumb, context.thumbs]);
|
|
418
|
+
return /* @__PURE__ */ jsxs(
|
|
419
|
+
"span",
|
|
420
|
+
{
|
|
505
421
|
style: {
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
422
|
+
transform: "var(--radix-slider-thumb-transform)",
|
|
423
|
+
position: "absolute",
|
|
424
|
+
[orientation.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`
|
|
425
|
+
},
|
|
426
|
+
children: [
|
|
427
|
+
/* @__PURE__ */ jsx(Collection.ItemSlot, { scope: props.__scopeSlider, children: /* @__PURE__ */ jsx(
|
|
428
|
+
Primitive.span,
|
|
429
|
+
{
|
|
430
|
+
role: "slider",
|
|
431
|
+
"aria-label": props["aria-label"] || label,
|
|
432
|
+
"aria-valuemin": context.min,
|
|
433
|
+
"aria-valuenow": value,
|
|
434
|
+
"aria-valuemax": context.max,
|
|
435
|
+
"aria-orientation": context.orientation,
|
|
436
|
+
"data-orientation": context.orientation,
|
|
437
|
+
"data-disabled": context.disabled ? "" : void 0,
|
|
438
|
+
tabIndex: context.disabled ? void 0 : 0,
|
|
439
|
+
...thumbProps,
|
|
440
|
+
ref: composedRefs,
|
|
441
|
+
style: value === void 0 ? { display: "none" } : props.style,
|
|
442
|
+
onFocus: composeEventHandlers(props.onFocus, () => {
|
|
443
|
+
context.valueIndexToChangeRef.current = index;
|
|
444
|
+
})
|
|
445
|
+
}
|
|
446
|
+
) }),
|
|
447
|
+
isFormControl && /* @__PURE__ */ jsx(
|
|
448
|
+
BubbleInput,
|
|
449
|
+
{
|
|
450
|
+
name: name ?? (context.name ? context.name + (context.values.length > 1 ? "[]" : "") : void 0),
|
|
451
|
+
value
|
|
452
|
+
},
|
|
453
|
+
index
|
|
454
|
+
)
|
|
455
|
+
]
|
|
456
|
+
}
|
|
519
457
|
);
|
|
458
|
+
}
|
|
459
|
+
);
|
|
460
|
+
SliderThumb.displayName = THUMB_NAME;
|
|
461
|
+
var BubbleInput = (props) => {
|
|
462
|
+
const { value, ...inputProps } = props;
|
|
463
|
+
const ref = React.useRef(null);
|
|
464
|
+
const prevValue = usePrevious(value);
|
|
465
|
+
React.useEffect(() => {
|
|
466
|
+
const input = ref.current;
|
|
467
|
+
const inputProto = window.HTMLInputElement.prototype;
|
|
468
|
+
const descriptor = Object.getOwnPropertyDescriptor(inputProto, "value");
|
|
469
|
+
const setValue = descriptor.set;
|
|
470
|
+
if (prevValue !== value && setValue) {
|
|
471
|
+
const event = new Event("input", { bubbles: true });
|
|
472
|
+
setValue.call(input, value);
|
|
473
|
+
input.dispatchEvent(event);
|
|
474
|
+
}
|
|
475
|
+
}, [prevValue, value]);
|
|
476
|
+
return /* @__PURE__ */ jsx("input", { style: { display: "none" }, ...inputProps, ref, defaultValue: value });
|
|
477
|
+
};
|
|
478
|
+
function getNextSortedValues(prevValues = [], nextValue, atIndex) {
|
|
479
|
+
const nextValues = [...prevValues];
|
|
480
|
+
nextValues[atIndex] = nextValue;
|
|
481
|
+
return nextValues.sort((a, b) => a - b);
|
|
520
482
|
}
|
|
521
|
-
function
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
0,
|
|
527
|
-
100
|
|
528
|
-
]);
|
|
483
|
+
function convertValueToPercentage(value, min, max) {
|
|
484
|
+
const maxSteps = max - min;
|
|
485
|
+
const percentPerStep = 100 / maxSteps;
|
|
486
|
+
const percentage = percentPerStep * (value - min);
|
|
487
|
+
return clamp(percentage, [0, 100]);
|
|
529
488
|
}
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
else return undefined;
|
|
489
|
+
function getLabel(index, totalValues) {
|
|
490
|
+
if (totalValues > 2) {
|
|
491
|
+
return `Value ${index + 1} of ${totalValues}`;
|
|
492
|
+
} else if (totalValues === 2) {
|
|
493
|
+
return ["Minimum", "Maximum"][index];
|
|
494
|
+
} else {
|
|
495
|
+
return void 0;
|
|
496
|
+
}
|
|
539
497
|
}
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
* // returns 1
|
|
546
|
-
* getClosestValueIndex([10, 30], 25);
|
|
547
|
-
*/ function $faa2e61a3361514f$var$getClosestValueIndex(values, nextValue) {
|
|
548
|
-
if (values.length === 1) return 0;
|
|
549
|
-
const distances = values.map((value)=>Math.abs(value - nextValue)
|
|
550
|
-
);
|
|
551
|
-
const closestDistance = Math.min(...distances);
|
|
552
|
-
return distances.indexOf(closestDistance);
|
|
498
|
+
function getClosestValueIndex(values, nextValue) {
|
|
499
|
+
if (values.length === 1) return 0;
|
|
500
|
+
const distances = values.map((value) => Math.abs(value - nextValue));
|
|
501
|
+
const closestDistance = Math.min(...distances);
|
|
502
|
+
return distances.indexOf(closestDistance);
|
|
553
503
|
}
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
const halfPercent = 50;
|
|
560
|
-
const offset = $faa2e61a3361514f$var$linearScale([
|
|
561
|
-
0,
|
|
562
|
-
halfPercent
|
|
563
|
-
], [
|
|
564
|
-
0,
|
|
565
|
-
halfWidth
|
|
566
|
-
]);
|
|
567
|
-
return (halfWidth - offset(left) * direction) * direction;
|
|
504
|
+
function getThumbInBoundsOffset(width, left, direction) {
|
|
505
|
+
const halfWidth = width / 2;
|
|
506
|
+
const halfPercent = 50;
|
|
507
|
+
const offset = linearScale([0, halfPercent], [0, halfWidth]);
|
|
508
|
+
return (halfWidth - offset(left) * direction) * direction;
|
|
568
509
|
}
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
*
|
|
572
|
-
* @example
|
|
573
|
-
* // returns [1, 9]
|
|
574
|
-
* getStepsBetweenValues([10, 11, 20]);
|
|
575
|
-
*/ function $faa2e61a3361514f$var$getStepsBetweenValues(values) {
|
|
576
|
-
return values.slice(0, -1).map((value, index)=>values[index + 1] - value
|
|
577
|
-
);
|
|
510
|
+
function getStepsBetweenValues(values) {
|
|
511
|
+
return values.slice(0, -1).map((value, index) => values[index + 1] - value);
|
|
578
512
|
}
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
*
|
|
587
|
-
* @example
|
|
588
|
-
* // returns true
|
|
589
|
-
* hasMinStepsBetweenValues([1,2,3], 1);
|
|
590
|
-
*/ function $faa2e61a3361514f$var$hasMinStepsBetweenValues(values, minStepsBetweenValues) {
|
|
591
|
-
if (minStepsBetweenValues > 0) {
|
|
592
|
-
const stepsBetweenValues = $faa2e61a3361514f$var$getStepsBetweenValues(values);
|
|
593
|
-
const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues);
|
|
594
|
-
return actualMinStepsBetweenValues >= minStepsBetweenValues;
|
|
595
|
-
}
|
|
596
|
-
return true;
|
|
597
|
-
} // https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js
|
|
598
|
-
function $faa2e61a3361514f$var$linearScale(input, output) {
|
|
599
|
-
return (value)=>{
|
|
600
|
-
if (input[0] === input[1] || output[0] === output[1]) return output[0];
|
|
601
|
-
const ratio = (output[1] - output[0]) / (input[1] - input[0]);
|
|
602
|
-
return output[0] + ratio * (value - input[0]);
|
|
603
|
-
};
|
|
513
|
+
function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
|
|
514
|
+
if (minStepsBetweenValues > 0) {
|
|
515
|
+
const stepsBetweenValues = getStepsBetweenValues(values);
|
|
516
|
+
const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues);
|
|
517
|
+
return actualMinStepsBetweenValues >= minStepsBetweenValues;
|
|
518
|
+
}
|
|
519
|
+
return true;
|
|
604
520
|
}
|
|
605
|
-
function
|
|
606
|
-
|
|
521
|
+
function linearScale(input, output) {
|
|
522
|
+
return (value) => {
|
|
523
|
+
if (input[0] === input[1] || output[0] === output[1]) return output[0];
|
|
524
|
+
const ratio = (output[1] - output[0]) / (input[1] - input[0]);
|
|
525
|
+
return output[0] + ratio * (value - input[0]);
|
|
526
|
+
};
|
|
607
527
|
}
|
|
608
|
-
function
|
|
609
|
-
|
|
610
|
-
return Math.round(value * rounder) / rounder;
|
|
528
|
+
function getDecimalCount(value) {
|
|
529
|
+
return (String(value).split(".")[1] || "").length;
|
|
611
530
|
}
|
|
612
|
-
|
|
613
|
-
const
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
export {
|
|
531
|
+
function roundValue(value, decimalCount) {
|
|
532
|
+
const rounder = Math.pow(10, decimalCount);
|
|
533
|
+
return Math.round(value * rounder) / rounder;
|
|
534
|
+
}
|
|
535
|
+
var Root = Slider;
|
|
536
|
+
var Track = SliderTrack;
|
|
537
|
+
var Range = SliderRange;
|
|
538
|
+
var Thumb = SliderThumb;
|
|
539
|
+
export {
|
|
540
|
+
Range,
|
|
541
|
+
Root,
|
|
542
|
+
Slider,
|
|
543
|
+
SliderRange,
|
|
544
|
+
SliderThumb,
|
|
545
|
+
SliderTrack,
|
|
546
|
+
Thumb,
|
|
547
|
+
Track,
|
|
548
|
+
createSliderScope
|
|
549
|
+
};
|
|
621
550
|
//# sourceMappingURL=index.mjs.map
|