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