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