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