@react-aria/slider 3.7.1-nightly.4149 → 3.7.1-nightly.4157
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/import.mjs +18 -18
- package/dist/main.js +18 -18
- package/dist/main.js.map +1 -1
- package/dist/module.js +18 -18
- package/dist/module.js.map +1 -1
- package/package.json +12 -12
package/dist/import.mjs
CHANGED
|
@@ -39,7 +39,7 @@ function $aa519ee6cf463259$export$68e648cbec363a18(state, index) {
|
|
|
39
39
|
|
|
40
40
|
|
|
41
41
|
function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
42
|
-
let { labelProps: labelProps
|
|
42
|
+
let { labelProps: labelProps, fieldProps: fieldProps } = (0, $fA3fN$useLabel)(props);
|
|
43
43
|
let isVertical = props.orientation === "vertical";
|
|
44
44
|
var _labelProps_id;
|
|
45
45
|
// Attach id of the label to the state so it can be accessed by useSliderThumb.
|
|
@@ -48,8 +48,8 @@ function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
48
48
|
"aria-describedby": props["aria-describedby"],
|
|
49
49
|
"aria-details": props["aria-details"]
|
|
50
50
|
});
|
|
51
|
-
let { direction: direction
|
|
52
|
-
let { addGlobalListener: addGlobalListener
|
|
51
|
+
let { direction: direction } = (0, $fA3fN$useLocale)();
|
|
52
|
+
let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $fA3fN$useGlobalListeners)();
|
|
53
53
|
// When the user clicks or drags the track, we want the motion to set and drag the
|
|
54
54
|
// closest thumb. Hence we also need to install useMove() on the track element.
|
|
55
55
|
// Here, we keep track of which index is the "closest" to the drag start point.
|
|
@@ -57,12 +57,12 @@ function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
57
57
|
const realTimeTrackDraggingIndex = (0, $fA3fN$useRef)(null);
|
|
58
58
|
const reverseX = direction === "rtl";
|
|
59
59
|
const currentPosition = (0, $fA3fN$useRef)(null);
|
|
60
|
-
const { moveProps: moveProps
|
|
60
|
+
const { moveProps: moveProps } = (0, $fA3fN$useMove)({
|
|
61
61
|
onMoveStart () {
|
|
62
62
|
currentPosition.current = null;
|
|
63
63
|
},
|
|
64
|
-
onMove ({ deltaX: deltaX
|
|
65
|
-
let { height: height
|
|
64
|
+
onMove ({ deltaX: deltaX, deltaY: deltaY }) {
|
|
65
|
+
let { height: height, width: width } = trackRef.current.getBoundingClientRect();
|
|
66
66
|
let size = isVertical ? height : width;
|
|
67
67
|
if (currentPosition.current == null) currentPosition.current = state.getThumbPercent(realTimeTrackDraggingIndex.current) * size;
|
|
68
68
|
let delta = isVertical ? deltaY : deltaX;
|
|
@@ -84,7 +84,7 @@ function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
84
84
|
let onDownTrack = (e, id, clientX, clientY)=>{
|
|
85
85
|
// We only trigger track-dragging if the user clicks on the track itself and nothing is currently being dragged.
|
|
86
86
|
if (trackRef.current && !props.isDisabled && state.values.every((_, i)=>!state.isThumbDragging(i))) {
|
|
87
|
-
let { height: height
|
|
87
|
+
let { height: height, width: width, top: top, left: left } = trackRef.current.getBoundingClientRect();
|
|
88
88
|
let size = isVertical ? height : width;
|
|
89
89
|
// Find the closest thumb
|
|
90
90
|
const trackPosition = isVertical ? top : left;
|
|
@@ -190,14 +190,14 @@ function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
190
190
|
|
|
191
191
|
|
|
192
192
|
function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
193
|
-
let { index: index = 0
|
|
193
|
+
let { index: index = 0, isRequired: isRequired, validationState: validationState, isInvalid: isInvalid, trackRef: trackRef, inputRef: inputRef, orientation: orientation = state.orientation, name: name } = opts;
|
|
194
194
|
let isDisabled = opts.isDisabled || state.isDisabled;
|
|
195
195
|
let isVertical = orientation === "vertical";
|
|
196
|
-
let { direction: direction
|
|
197
|
-
let { addGlobalListener: addGlobalListener
|
|
196
|
+
let { direction: direction } = (0, $fA3fN$useLocale)();
|
|
197
|
+
let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $fA3fN$useGlobalListeners)();
|
|
198
198
|
let data = (0, $aa519ee6cf463259$export$d6c8d9636a3dc49c).get(state);
|
|
199
199
|
var _opts_arialabelledby;
|
|
200
|
-
const { labelProps: labelProps
|
|
200
|
+
const { labelProps: labelProps, fieldProps: fieldProps } = (0, $fA3fN$useLabel)({
|
|
201
201
|
...opts,
|
|
202
202
|
id: (0, $aa519ee6cf463259$export$68e648cbec363a18)(state, index),
|
|
203
203
|
"aria-labelledby": `${data.id} ${(_opts_arialabelledby = opts["aria-labelledby"]) !== null && _opts_arialabelledby !== void 0 ? _opts_arialabelledby : ""}`.trim()
|
|
@@ -217,9 +217,9 @@ function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
|
217
217
|
]);
|
|
218
218
|
let reverseX = direction === "rtl";
|
|
219
219
|
let currentPosition = (0, $fA3fN$useRef)(null);
|
|
220
|
-
let { keyboardProps: keyboardProps
|
|
220
|
+
let { keyboardProps: keyboardProps } = (0, $fA3fN$useKeyboard)({
|
|
221
221
|
onKeyDown (e) {
|
|
222
|
-
let { getThumbMaxValue: getThumbMaxValue
|
|
222
|
+
let { getThumbMaxValue: getThumbMaxValue, getThumbMinValue: getThumbMinValue, decrementThumb: decrementThumb, incrementThumb: incrementThumb, setThumbValue: setThumbValue, setThumbDragging: setThumbDragging, pageSize: pageSize } = state;
|
|
223
223
|
// these are the cases that useMove or useSlider don't handle
|
|
224
224
|
if (!/^(PageUp|PageDown|Home|End)$/.test(e.key)) {
|
|
225
225
|
e.continuePropagation();
|
|
@@ -246,14 +246,14 @@ function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
|
246
246
|
setThumbDragging(index, false);
|
|
247
247
|
}
|
|
248
248
|
});
|
|
249
|
-
let { moveProps: moveProps
|
|
249
|
+
let { moveProps: moveProps } = (0, $fA3fN$useMove)({
|
|
250
250
|
onMoveStart () {
|
|
251
251
|
currentPosition.current = null;
|
|
252
252
|
state.setThumbDragging(index, true);
|
|
253
253
|
},
|
|
254
|
-
onMove ({ deltaX: deltaX
|
|
255
|
-
const { getThumbPercent: getThumbPercent
|
|
256
|
-
let { width: width
|
|
254
|
+
onMove ({ deltaX: deltaX, deltaY: deltaY, pointerType: pointerType, shiftKey: shiftKey }) {
|
|
255
|
+
const { getThumbPercent: getThumbPercent, setThumbPercent: setThumbPercent, decrementThumb: decrementThumb, incrementThumb: incrementThumb, step: step, pageSize: pageSize } = state;
|
|
256
|
+
let { width: width, height: height } = trackRef.current.getBoundingClientRect();
|
|
257
257
|
let size = isVertical ? height : width;
|
|
258
258
|
if (currentPosition.current == null) currentPosition.current = getThumbPercent(index) * size;
|
|
259
259
|
if (pointerType === "keyboard") {
|
|
@@ -272,7 +272,7 @@ function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
|
272
272
|
});
|
|
273
273
|
// Immediately register editability with the state
|
|
274
274
|
state.setThumbEditable(index, !isDisabled);
|
|
275
|
-
const { focusableProps: focusableProps
|
|
275
|
+
const { focusableProps: focusableProps } = (0, $fA3fN$useFocusable)((0, $fA3fN$mergeProps)(opts, {
|
|
276
276
|
onFocus: ()=>state.setFocusedThumb(index),
|
|
277
277
|
onBlur: ()=>state.setFocusedThumb(undefined)
|
|
278
278
|
}), inputRef);
|
package/dist/main.js
CHANGED
|
@@ -45,7 +45,7 @@ function $28db8d634be2fa58$export$68e648cbec363a18(state, index) {
|
|
|
45
45
|
|
|
46
46
|
|
|
47
47
|
function $481f97d830e3ede6$export$56b2c08e277f365(props, state, trackRef) {
|
|
48
|
-
let { labelProps: labelProps
|
|
48
|
+
let { labelProps: labelProps, fieldProps: fieldProps } = (0, $coMqq$reactarialabel.useLabel)(props);
|
|
49
49
|
let isVertical = props.orientation === "vertical";
|
|
50
50
|
var _labelProps_id;
|
|
51
51
|
// Attach id of the label to the state so it can be accessed by useSliderThumb.
|
|
@@ -54,8 +54,8 @@ function $481f97d830e3ede6$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
54
54
|
"aria-describedby": props["aria-describedby"],
|
|
55
55
|
"aria-details": props["aria-details"]
|
|
56
56
|
});
|
|
57
|
-
let { direction: direction
|
|
58
|
-
let { addGlobalListener: addGlobalListener
|
|
57
|
+
let { direction: direction } = (0, $coMqq$reactariai18n.useLocale)();
|
|
58
|
+
let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $coMqq$reactariautils.useGlobalListeners)();
|
|
59
59
|
// When the user clicks or drags the track, we want the motion to set and drag the
|
|
60
60
|
// closest thumb. Hence we also need to install useMove() on the track element.
|
|
61
61
|
// Here, we keep track of which index is the "closest" to the drag start point.
|
|
@@ -63,12 +63,12 @@ function $481f97d830e3ede6$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
63
63
|
const realTimeTrackDraggingIndex = (0, $coMqq$react.useRef)(null);
|
|
64
64
|
const reverseX = direction === "rtl";
|
|
65
65
|
const currentPosition = (0, $coMqq$react.useRef)(null);
|
|
66
|
-
const { moveProps: moveProps
|
|
66
|
+
const { moveProps: moveProps } = (0, $coMqq$reactariainteractions.useMove)({
|
|
67
67
|
onMoveStart () {
|
|
68
68
|
currentPosition.current = null;
|
|
69
69
|
},
|
|
70
|
-
onMove ({ deltaX: deltaX
|
|
71
|
-
let { height: height
|
|
70
|
+
onMove ({ deltaX: deltaX, deltaY: deltaY }) {
|
|
71
|
+
let { height: height, width: width } = trackRef.current.getBoundingClientRect();
|
|
72
72
|
let size = isVertical ? height : width;
|
|
73
73
|
if (currentPosition.current == null) currentPosition.current = state.getThumbPercent(realTimeTrackDraggingIndex.current) * size;
|
|
74
74
|
let delta = isVertical ? deltaY : deltaX;
|
|
@@ -90,7 +90,7 @@ function $481f97d830e3ede6$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
90
90
|
let onDownTrack = (e, id, clientX, clientY)=>{
|
|
91
91
|
// We only trigger track-dragging if the user clicks on the track itself and nothing is currently being dragged.
|
|
92
92
|
if (trackRef.current && !props.isDisabled && state.values.every((_, i)=>!state.isThumbDragging(i))) {
|
|
93
|
-
let { height: height
|
|
93
|
+
let { height: height, width: width, top: top, left: left } = trackRef.current.getBoundingClientRect();
|
|
94
94
|
let size = isVertical ? height : width;
|
|
95
95
|
// Find the closest thumb
|
|
96
96
|
const trackPosition = isVertical ? top : left;
|
|
@@ -196,14 +196,14 @@ function $481f97d830e3ede6$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
196
196
|
|
|
197
197
|
|
|
198
198
|
function $5eb806b626475377$export$8d15029008292ae(opts, state) {
|
|
199
|
-
let { index: index = 0
|
|
199
|
+
let { index: index = 0, isRequired: isRequired, validationState: validationState, isInvalid: isInvalid, trackRef: trackRef, inputRef: inputRef, orientation: orientation = state.orientation, name: name } = opts;
|
|
200
200
|
let isDisabled = opts.isDisabled || state.isDisabled;
|
|
201
201
|
let isVertical = orientation === "vertical";
|
|
202
|
-
let { direction: direction
|
|
203
|
-
let { addGlobalListener: addGlobalListener
|
|
202
|
+
let { direction: direction } = (0, $coMqq$reactariai18n.useLocale)();
|
|
203
|
+
let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $coMqq$reactariautils.useGlobalListeners)();
|
|
204
204
|
let data = (0, $28db8d634be2fa58$export$d6c8d9636a3dc49c).get(state);
|
|
205
205
|
var _opts_arialabelledby;
|
|
206
|
-
const { labelProps: labelProps
|
|
206
|
+
const { labelProps: labelProps, fieldProps: fieldProps } = (0, $coMqq$reactarialabel.useLabel)({
|
|
207
207
|
...opts,
|
|
208
208
|
id: (0, $28db8d634be2fa58$export$68e648cbec363a18)(state, index),
|
|
209
209
|
"aria-labelledby": `${data.id} ${(_opts_arialabelledby = opts["aria-labelledby"]) !== null && _opts_arialabelledby !== void 0 ? _opts_arialabelledby : ""}`.trim()
|
|
@@ -223,9 +223,9 @@ function $5eb806b626475377$export$8d15029008292ae(opts, state) {
|
|
|
223
223
|
]);
|
|
224
224
|
let reverseX = direction === "rtl";
|
|
225
225
|
let currentPosition = (0, $coMqq$react.useRef)(null);
|
|
226
|
-
let { keyboardProps: keyboardProps
|
|
226
|
+
let { keyboardProps: keyboardProps } = (0, $coMqq$reactariainteractions.useKeyboard)({
|
|
227
227
|
onKeyDown (e) {
|
|
228
|
-
let { getThumbMaxValue: getThumbMaxValue
|
|
228
|
+
let { getThumbMaxValue: getThumbMaxValue, getThumbMinValue: getThumbMinValue, decrementThumb: decrementThumb, incrementThumb: incrementThumb, setThumbValue: setThumbValue, setThumbDragging: setThumbDragging, pageSize: pageSize } = state;
|
|
229
229
|
// these are the cases that useMove or useSlider don't handle
|
|
230
230
|
if (!/^(PageUp|PageDown|Home|End)$/.test(e.key)) {
|
|
231
231
|
e.continuePropagation();
|
|
@@ -252,14 +252,14 @@ function $5eb806b626475377$export$8d15029008292ae(opts, state) {
|
|
|
252
252
|
setThumbDragging(index, false);
|
|
253
253
|
}
|
|
254
254
|
});
|
|
255
|
-
let { moveProps: moveProps
|
|
255
|
+
let { moveProps: moveProps } = (0, $coMqq$reactariainteractions.useMove)({
|
|
256
256
|
onMoveStart () {
|
|
257
257
|
currentPosition.current = null;
|
|
258
258
|
state.setThumbDragging(index, true);
|
|
259
259
|
},
|
|
260
|
-
onMove ({ deltaX: deltaX
|
|
261
|
-
const { getThumbPercent: getThumbPercent
|
|
262
|
-
let { width: width
|
|
260
|
+
onMove ({ deltaX: deltaX, deltaY: deltaY, pointerType: pointerType, shiftKey: shiftKey }) {
|
|
261
|
+
const { getThumbPercent: getThumbPercent, setThumbPercent: setThumbPercent, decrementThumb: decrementThumb, incrementThumb: incrementThumb, step: step, pageSize: pageSize } = state;
|
|
262
|
+
let { width: width, height: height } = trackRef.current.getBoundingClientRect();
|
|
263
263
|
let size = isVertical ? height : width;
|
|
264
264
|
if (currentPosition.current == null) currentPosition.current = getThumbPercent(index) * size;
|
|
265
265
|
if (pointerType === "keyboard") {
|
|
@@ -278,7 +278,7 @@ function $5eb806b626475377$export$8d15029008292ae(opts, state) {
|
|
|
278
278
|
});
|
|
279
279
|
// Immediately register editability with the state
|
|
280
280
|
state.setThumbEditable(index, !isDisabled);
|
|
281
|
-
const { focusableProps: focusableProps
|
|
281
|
+
const { focusableProps: focusableProps } = (0, $coMqq$reactariafocus.useFocusable)((0, $coMqq$reactariautils.mergeProps)(opts, {
|
|
282
282
|
onFocus: ()=>state.setFocusedThumb(index),
|
|
283
283
|
onBlur: ()=>state.setFocusedThumb(undefined)
|
|
284
284
|
}), inputRef);
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-aria/slider/src/index.ts","packages/@react-aria/slider/src/useSlider.ts","packages/@react-aria/slider/src/utils.ts","packages/@react-aria/slider/src/useSliderThumb.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport {useSlider} from './useSlider';\nexport {useSliderThumb} from './useSliderThumb';\nexport type {AriaSliderProps} from '@react-types/slider';\nexport type {SliderAria} from './useSlider';\nexport type {AriaSliderThumbOptions, SliderThumbAria} from './useSliderThumb';\nexport type {AriaSliderThumbProps} from '@react-types/slider';\nexport type {Orientation} from '@react-types/shared';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaSliderProps} from '@react-types/slider';\nimport {clamp, mergeProps, useGlobalListeners} from '@react-aria/utils';\nimport {DOMAttributes} from '@react-types/shared';\nimport {getSliderThumbId, sliderData} from './utils';\nimport React, {LabelHTMLAttributes, OutputHTMLAttributes, RefObject, useRef} from 'react';\nimport {setInteractionModality, useMove} from '@react-aria/interactions';\nimport {SliderState} from '@react-stately/slider';\nimport {useLabel} from '@react-aria/label';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface SliderAria {\n /** Props for the label element. */\n labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n\n /** Props for the root element of the slider component; groups slider inputs. */\n groupProps: DOMAttributes,\n\n /** Props for the track element. */\n trackProps: DOMAttributes,\n\n /** Props for the output element, displaying the value of the slider thumbs. */\n outputProps: OutputHTMLAttributes<HTMLOutputElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a slider component representing one or more values.\n *\n * @param props Props for the slider.\n * @param state State for the slider, as returned by `useSliderState`.\n * @param trackRef Ref for the \"track\" element. The width of this element provides the \"length\"\n * of the track -- the span of one dimensional space that the slider thumb can be. It also\n * accepts click and drag motions, so that the closest thumb will follow clicks and drags on\n * the track.\n */\nexport function useSlider<T extends number | number[]>(\n props: AriaSliderProps<T>,\n state: SliderState,\n trackRef: RefObject<Element>\n): SliderAria {\n let {labelProps, fieldProps} = useLabel(props);\n\n let isVertical = props.orientation === 'vertical';\n\n // Attach id of the label to the state so it can be accessed by useSliderThumb.\n sliderData.set(state, {\n id: labelProps.id ?? fieldProps.id,\n 'aria-describedby': props['aria-describedby'],\n 'aria-details': props['aria-details']\n });\n\n let {direction} = useLocale();\n\n let {addGlobalListener, removeGlobalListener} = useGlobalListeners();\n\n // When the user clicks or drags the track, we want the motion to set and drag the\n // closest thumb. Hence we also need to install useMove() on the track element.\n // Here, we keep track of which index is the \"closest\" to the drag start point.\n // It is set onMouseDown/onTouchDown; see trackProps below.\n const realTimeTrackDraggingIndex = useRef<number | null>(null);\n\n const reverseX = direction === 'rtl';\n const currentPosition = useRef<number>(null);\n const {moveProps} = useMove({\n onMoveStart() {\n currentPosition.current = null;\n },\n onMove({deltaX, deltaY}) {\n let {height, width} = trackRef.current.getBoundingClientRect();\n let size = isVertical ? height : width;\n\n if (currentPosition.current == null) {\n currentPosition.current = state.getThumbPercent(realTimeTrackDraggingIndex.current) * size;\n }\n\n let delta = isVertical ? deltaY : deltaX;\n if (isVertical || reverseX) {\n delta = -delta;\n }\n\n currentPosition.current += delta;\n\n if (realTimeTrackDraggingIndex.current != null && trackRef.current) {\n const percent = clamp(currentPosition.current / size, 0, 1);\n state.setThumbPercent(realTimeTrackDraggingIndex.current, percent);\n }\n },\n onMoveEnd() {\n if (realTimeTrackDraggingIndex.current != null) {\n state.setThumbDragging(realTimeTrackDraggingIndex.current, false);\n realTimeTrackDraggingIndex.current = null;\n }\n }\n });\n\n let currentPointer = useRef<number | null | undefined>(undefined);\n let onDownTrack = (e: React.UIEvent, id: number, clientX: number, clientY: number) => {\n // We only trigger track-dragging if the user clicks on the track itself and nothing is currently being dragged.\n if (trackRef.current && !props.isDisabled && state.values.every((_, i) => !state.isThumbDragging(i))) {\n let {height, width, top, left} = trackRef.current.getBoundingClientRect();\n let size = isVertical ? height : width;\n // Find the closest thumb\n const trackPosition = isVertical ? top : left;\n const clickPosition = isVertical ? clientY : clientX;\n const offset = clickPosition - trackPosition;\n let percent = offset / size;\n if (direction === 'rtl' || isVertical) {\n percent = 1 - percent;\n }\n let value = state.getPercentValue(percent);\n\n // to find the closet thumb we split the array based on the first thumb position to the \"right/end\" of the click.\n let closestThumb;\n let split = state.values.findIndex(v => value - v < 0);\n if (split === 0) { // If the index is zero then the closetThumb is the first one\n closestThumb = split;\n } else if (split === -1) { // If no index is found they've clicked past all the thumbs\n closestThumb = state.values.length - 1;\n } else {\n let lastLeft = state.values[split - 1];\n let firstRight = state.values[split];\n // Pick the last left/start thumb, unless they are stacked on top of each other, then pick the right/end one\n if (Math.abs(lastLeft - value) < Math.abs(firstRight - value)) {\n closestThumb = split - 1;\n } else {\n closestThumb = split;\n }\n }\n\n // Confirm that the found closest thumb is editable, not disabled, and move it\n if (closestThumb >= 0 && state.isThumbEditable(closestThumb)) {\n // Don't unfocus anything\n e.preventDefault();\n\n realTimeTrackDraggingIndex.current = closestThumb;\n state.setFocusedThumb(closestThumb);\n currentPointer.current = id;\n\n state.setThumbDragging(realTimeTrackDraggingIndex.current, true);\n state.setThumbValue(closestThumb, value);\n\n addGlobalListener(window, 'mouseup', onUpTrack, false);\n addGlobalListener(window, 'touchend', onUpTrack, false);\n addGlobalListener(window, 'pointerup', onUpTrack, false);\n } else {\n realTimeTrackDraggingIndex.current = null;\n }\n }\n };\n\n let onUpTrack = (e) => {\n let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n if (id === currentPointer.current) {\n if (realTimeTrackDraggingIndex.current != null) {\n state.setThumbDragging(realTimeTrackDraggingIndex.current, false);\n realTimeTrackDraggingIndex.current = null;\n }\n\n removeGlobalListener(window, 'mouseup', onUpTrack, false);\n removeGlobalListener(window, 'touchend', onUpTrack, false);\n removeGlobalListener(window, 'pointerup', onUpTrack, false);\n }\n };\n\n if ('htmlFor' in labelProps && labelProps.htmlFor) {\n // Ideally the `for` attribute should point to the first thumb, but VoiceOver on iOS\n // causes this to override the `aria-labelledby` on the thumb. This causes the first\n // thumb to only be announced as the slider label rather than its individual name as well.\n // See https://bugs.webkit.org/show_bug.cgi?id=172464.\n delete labelProps.htmlFor;\n labelProps.onClick = () => {\n // Safari does not focus <input type=\"range\"> elements when clicking on an associated <label>,\n // so do it manually. In addition, make sure we show the focus ring.\n document.getElementById(getSliderThumbId(state, 0))?.focus();\n setInteractionModality('keyboard');\n };\n }\n\n return {\n labelProps,\n // The root element of the Slider will have role=\"group\" to group together\n // all the thumb inputs in the Slider. The label of the Slider will\n // be used to label the group.\n groupProps: {\n role: 'group',\n ...fieldProps\n },\n trackProps: mergeProps({\n onMouseDown(e: React.MouseEvent) {\n if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n return;\n }\n onDownTrack(e, undefined, e.clientX, e.clientY);\n },\n onPointerDown(e: React.PointerEvent) {\n if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {\n return;\n }\n onDownTrack(e, e.pointerId, e.clientX, e.clientY);\n },\n onTouchStart(e: React.TouchEvent) { onDownTrack(e, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY); },\n style: {\n position: 'relative',\n touchAction: 'none'\n }\n }, moveProps),\n outputProps: {\n htmlFor: state.values.map((_, index) => getSliderThumbId(state, index)).join(' '),\n 'aria-live': 'off'\n }\n };\n}\n","import {SliderState} from '@react-stately/slider';\n\ninterface SliderData {\n id: string,\n 'aria-describedby'?: string,\n 'aria-details'?: string\n}\n\nexport const sliderData = new WeakMap<SliderState, SliderData>();\n\nexport function getSliderThumbId(state: SliderState, index: number) {\n let data = sliderData.get(state);\n if (!data) {\n throw new Error('Unknown slider state');\n }\n\n return `${data.id}-${index}`;\n}\n","import {AriaSliderThumbProps} from '@react-types/slider';\nimport {clamp, focusWithoutScrolling, mergeProps, useFormReset, useGlobalListeners} from '@react-aria/utils';\nimport {DOMAttributes} from '@react-types/shared';\nimport {getSliderThumbId, sliderData} from './utils';\nimport React, {ChangeEvent, InputHTMLAttributes, LabelHTMLAttributes, RefObject, useCallback, useEffect, useRef} from 'react';\nimport {SliderState} from '@react-stately/slider';\nimport {useFocusable} from '@react-aria/focus';\nimport {useKeyboard, useMove} from '@react-aria/interactions';\nimport {useLabel} from '@react-aria/label';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface SliderThumbAria {\n /** Props for the root thumb element; handles the dragging motion. */\n thumbProps: DOMAttributes,\n\n /** Props for the visually hidden range input element. */\n inputProps: InputHTMLAttributes<HTMLInputElement>,\n\n /** Props for the label element for this thumb (optional). */\n labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n\n /** Whether this thumb is currently being dragged. */\n isDragging: boolean,\n /** Whether the thumb is currently focused. */\n isFocused: boolean,\n /** Whether the thumb is disabled. */\n isDisabled: boolean\n}\n\nexport interface AriaSliderThumbOptions extends AriaSliderThumbProps {\n /** A ref to the track element. */\n trackRef: RefObject<Element>,\n /** A ref to the thumb input element. */\n inputRef: RefObject<HTMLInputElement>\n}\n\n/**\n * Provides behavior and accessibility for a thumb of a slider component.\n *\n * @param opts Options for this Slider thumb.\n * @param state Slider state, created via `useSliderState`.\n */\nexport function useSliderThumb(\n opts: AriaSliderThumbOptions,\n state: SliderState\n): SliderThumbAria {\n let {\n index = 0,\n isRequired,\n validationState,\n isInvalid,\n trackRef,\n inputRef,\n orientation = state.orientation,\n name\n } = opts;\n\n let isDisabled = opts.isDisabled || state.isDisabled;\n let isVertical = orientation === 'vertical';\n\n let {direction} = useLocale();\n let {addGlobalListener, removeGlobalListener} = useGlobalListeners();\n\n let data = sliderData.get(state);\n const {labelProps, fieldProps} = useLabel({\n ...opts,\n id: getSliderThumbId(state, index),\n 'aria-labelledby': `${data.id} ${opts['aria-labelledby'] ?? ''}`.trim()\n });\n\n const value = state.values[index];\n\n const focusInput = useCallback(() => {\n if (inputRef.current) {\n focusWithoutScrolling(inputRef.current);\n }\n }, [inputRef]);\n\n const isFocused = state.focusedThumb === index;\n\n useEffect(() => {\n if (isFocused) {\n focusInput();\n }\n }, [isFocused, focusInput]);\n\n let reverseX = direction === 'rtl';\n let currentPosition = useRef<number>(null);\n\n let {keyboardProps} = useKeyboard({\n onKeyDown(e) {\n let {\n getThumbMaxValue,\n getThumbMinValue,\n decrementThumb,\n incrementThumb,\n setThumbValue,\n setThumbDragging,\n pageSize\n } = state;\n // these are the cases that useMove or useSlider don't handle\n if (!/^(PageUp|PageDown|Home|End)$/.test(e.key)) {\n e.continuePropagation();\n return;\n }\n // same handling as useMove, stopPropagation to prevent useSlider from handling the event as well.\n e.preventDefault();\n // remember to set this so that onChangeEnd is fired\n setThumbDragging(index, true);\n switch (e.key) {\n case 'PageUp':\n incrementThumb(index, pageSize);\n break;\n case 'PageDown':\n decrementThumb(index, pageSize);\n break;\n case 'Home':\n setThumbValue(index, getThumbMinValue(index));\n break;\n case 'End':\n setThumbValue(index, getThumbMaxValue(index));\n break;\n }\n setThumbDragging(index, false);\n }\n });\n\n let {moveProps} = useMove({\n onMoveStart() {\n currentPosition.current = null;\n state.setThumbDragging(index, true);\n },\n onMove({deltaX, deltaY, pointerType, shiftKey}) {\n const {\n getThumbPercent,\n setThumbPercent,\n decrementThumb,\n incrementThumb,\n step,\n pageSize\n } = state;\n let {width, height} = trackRef.current.getBoundingClientRect();\n let size = isVertical ? height : width;\n\n if (currentPosition.current == null) {\n currentPosition.current = getThumbPercent(index) * size;\n }\n if (pointerType === 'keyboard') {\n if ((deltaX > 0 && reverseX) || (deltaX < 0 && !reverseX) || deltaY > 0) {\n decrementThumb(index, shiftKey ? pageSize : step);\n } else {\n incrementThumb(index, shiftKey ? pageSize : step);\n }\n } else {\n let delta = isVertical ? deltaY : deltaX;\n if (isVertical || reverseX) {\n delta = -delta;\n }\n\n currentPosition.current += delta;\n setThumbPercent(index, clamp(currentPosition.current / size, 0, 1));\n }\n },\n onMoveEnd() {\n state.setThumbDragging(index, false);\n }\n });\n\n // Immediately register editability with the state\n state.setThumbEditable(index, !isDisabled);\n\n const {focusableProps} = useFocusable(\n mergeProps(opts, {\n onFocus: () => state.setFocusedThumb(index),\n onBlur: () => state.setFocusedThumb(undefined)\n }),\n inputRef\n );\n\n let currentPointer = useRef<number | undefined>(undefined);\n let onDown = (id?: number) => {\n focusInput();\n currentPointer.current = id;\n state.setThumbDragging(index, true);\n\n addGlobalListener(window, 'mouseup', onUp, false);\n addGlobalListener(window, 'touchend', onUp, false);\n addGlobalListener(window, 'pointerup', onUp, false);\n\n };\n\n let onUp = (e) => {\n let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n if (id === currentPointer.current) {\n focusInput();\n state.setThumbDragging(index, false);\n removeGlobalListener(window, 'mouseup', onUp, false);\n removeGlobalListener(window, 'touchend', onUp, false);\n removeGlobalListener(window, 'pointerup', onUp, false);\n }\n };\n\n let thumbPosition = state.getThumbPercent(index);\n if (isVertical || direction === 'rtl') {\n thumbPosition = 1 - thumbPosition;\n }\n\n let interactions = !isDisabled ? mergeProps(\n keyboardProps,\n moveProps,\n {\n onMouseDown: (e: React.MouseEvent) => {\n if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n return;\n }\n onDown();\n },\n onPointerDown: (e: React.PointerEvent) => {\n if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n return;\n }\n onDown(e.pointerId);\n },\n onTouchStart: (e: React.TouchEvent) => {onDown(e.changedTouches[0].identifier);}\n }\n ) : {};\n\n useFormReset(inputRef, value, (v) => {\n state.setThumbValue(index, v);\n });\n\n // We install mouse handlers for the drag motion on the thumb div, but\n // not the key handler for moving the thumb with the slider. Instead,\n // we focus the range input, and let the browser handle the keyboard\n // interactions; we then listen to input's onChange to update state.\n return {\n inputProps: mergeProps(focusableProps, fieldProps, {\n type: 'range',\n tabIndex: !isDisabled ? 0 : undefined,\n min: state.getThumbMinValue(index),\n max: state.getThumbMaxValue(index),\n step: state.step,\n value: value,\n name,\n disabled: isDisabled,\n 'aria-orientation': orientation,\n 'aria-valuetext': state.getThumbValueLabel(index),\n 'aria-required': isRequired || undefined,\n 'aria-invalid': isInvalid || validationState === 'invalid' || undefined,\n 'aria-errormessage': opts['aria-errormessage'],\n 'aria-describedby': [data['aria-describedby'], opts['aria-describedby']].filter(Boolean).join(' '),\n 'aria-details': [data['aria-details'], opts['aria-details']].filter(Boolean).join(' '),\n onChange: (e: ChangeEvent<HTMLInputElement>) => {\n state.setThumbValue(index, parseFloat(e.target.value));\n }\n }),\n thumbProps: {\n ...interactions,\n style: {\n position: 'absolute',\n [isVertical ? 'top' : 'left']: `${thumbPosition * 100}%`,\n transform: 'translate(-50%, -50%)',\n touchAction: 'none'\n }\n },\n labelProps,\n isDragging: state.isThumbDragging(index),\n isDisabled,\n isFocused\n };\n}\n"],"names":[],"version":3,"file":"main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/slider/src/index.ts","packages/@react-aria/slider/src/useSlider.ts","packages/@react-aria/slider/src/utils.ts","packages/@react-aria/slider/src/useSliderThumb.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport {useSlider} from './useSlider';\nexport {useSliderThumb} from './useSliderThumb';\nexport type {AriaSliderProps} from '@react-types/slider';\nexport type {SliderAria} from './useSlider';\nexport type {AriaSliderThumbOptions, SliderThumbAria} from './useSliderThumb';\nexport type {AriaSliderThumbProps} from '@react-types/slider';\nexport type {Orientation} from '@react-types/shared';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaSliderProps} from '@react-types/slider';\nimport {clamp, mergeProps, useGlobalListeners} from '@react-aria/utils';\nimport {DOMAttributes} from '@react-types/shared';\nimport {getSliderThumbId, sliderData} from './utils';\nimport React, {LabelHTMLAttributes, OutputHTMLAttributes, RefObject, useRef} from 'react';\nimport {setInteractionModality, useMove} from '@react-aria/interactions';\nimport {SliderState} from '@react-stately/slider';\nimport {useLabel} from '@react-aria/label';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface SliderAria {\n /** Props for the label element. */\n labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n\n /** Props for the root element of the slider component; groups slider inputs. */\n groupProps: DOMAttributes,\n\n /** Props for the track element. */\n trackProps: DOMAttributes,\n\n /** Props for the output element, displaying the value of the slider thumbs. */\n outputProps: OutputHTMLAttributes<HTMLOutputElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a slider component representing one or more values.\n *\n * @param props Props for the slider.\n * @param state State for the slider, as returned by `useSliderState`.\n * @param trackRef Ref for the \"track\" element. The width of this element provides the \"length\"\n * of the track -- the span of one dimensional space that the slider thumb can be. It also\n * accepts click and drag motions, so that the closest thumb will follow clicks and drags on\n * the track.\n */\nexport function useSlider<T extends number | number[]>(\n props: AriaSliderProps<T>,\n state: SliderState,\n trackRef: RefObject<Element>\n): SliderAria {\n let {labelProps, fieldProps} = useLabel(props);\n\n let isVertical = props.orientation === 'vertical';\n\n // Attach id of the label to the state so it can be accessed by useSliderThumb.\n sliderData.set(state, {\n id: labelProps.id ?? fieldProps.id,\n 'aria-describedby': props['aria-describedby'],\n 'aria-details': props['aria-details']\n });\n\n let {direction} = useLocale();\n\n let {addGlobalListener, removeGlobalListener} = useGlobalListeners();\n\n // When the user clicks or drags the track, we want the motion to set and drag the\n // closest thumb. Hence we also need to install useMove() on the track element.\n // Here, we keep track of which index is the \"closest\" to the drag start point.\n // It is set onMouseDown/onTouchDown; see trackProps below.\n const realTimeTrackDraggingIndex = useRef<number | null>(null);\n\n const reverseX = direction === 'rtl';\n const currentPosition = useRef<number>(null);\n const {moveProps} = useMove({\n onMoveStart() {\n currentPosition.current = null;\n },\n onMove({deltaX, deltaY}) {\n let {height, width} = trackRef.current.getBoundingClientRect();\n let size = isVertical ? height : width;\n\n if (currentPosition.current == null) {\n currentPosition.current = state.getThumbPercent(realTimeTrackDraggingIndex.current) * size;\n }\n\n let delta = isVertical ? deltaY : deltaX;\n if (isVertical || reverseX) {\n delta = -delta;\n }\n\n currentPosition.current += delta;\n\n if (realTimeTrackDraggingIndex.current != null && trackRef.current) {\n const percent = clamp(currentPosition.current / size, 0, 1);\n state.setThumbPercent(realTimeTrackDraggingIndex.current, percent);\n }\n },\n onMoveEnd() {\n if (realTimeTrackDraggingIndex.current != null) {\n state.setThumbDragging(realTimeTrackDraggingIndex.current, false);\n realTimeTrackDraggingIndex.current = null;\n }\n }\n });\n\n let currentPointer = useRef<number | null | undefined>(undefined);\n let onDownTrack = (e: React.UIEvent, id: number, clientX: number, clientY: number) => {\n // We only trigger track-dragging if the user clicks on the track itself and nothing is currently being dragged.\n if (trackRef.current && !props.isDisabled && state.values.every((_, i) => !state.isThumbDragging(i))) {\n let {height, width, top, left} = trackRef.current.getBoundingClientRect();\n let size = isVertical ? height : width;\n // Find the closest thumb\n const trackPosition = isVertical ? top : left;\n const clickPosition = isVertical ? clientY : clientX;\n const offset = clickPosition - trackPosition;\n let percent = offset / size;\n if (direction === 'rtl' || isVertical) {\n percent = 1 - percent;\n }\n let value = state.getPercentValue(percent);\n\n // to find the closet thumb we split the array based on the first thumb position to the \"right/end\" of the click.\n let closestThumb;\n let split = state.values.findIndex(v => value - v < 0);\n if (split === 0) { // If the index is zero then the closetThumb is the first one\n closestThumb = split;\n } else if (split === -1) { // If no index is found they've clicked past all the thumbs\n closestThumb = state.values.length - 1;\n } else {\n let lastLeft = state.values[split - 1];\n let firstRight = state.values[split];\n // Pick the last left/start thumb, unless they are stacked on top of each other, then pick the right/end one\n if (Math.abs(lastLeft - value) < Math.abs(firstRight - value)) {\n closestThumb = split - 1;\n } else {\n closestThumb = split;\n }\n }\n\n // Confirm that the found closest thumb is editable, not disabled, and move it\n if (closestThumb >= 0 && state.isThumbEditable(closestThumb)) {\n // Don't unfocus anything\n e.preventDefault();\n\n realTimeTrackDraggingIndex.current = closestThumb;\n state.setFocusedThumb(closestThumb);\n currentPointer.current = id;\n\n state.setThumbDragging(realTimeTrackDraggingIndex.current, true);\n state.setThumbValue(closestThumb, value);\n\n addGlobalListener(window, 'mouseup', onUpTrack, false);\n addGlobalListener(window, 'touchend', onUpTrack, false);\n addGlobalListener(window, 'pointerup', onUpTrack, false);\n } else {\n realTimeTrackDraggingIndex.current = null;\n }\n }\n };\n\n let onUpTrack = (e) => {\n let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n if (id === currentPointer.current) {\n if (realTimeTrackDraggingIndex.current != null) {\n state.setThumbDragging(realTimeTrackDraggingIndex.current, false);\n realTimeTrackDraggingIndex.current = null;\n }\n\n removeGlobalListener(window, 'mouseup', onUpTrack, false);\n removeGlobalListener(window, 'touchend', onUpTrack, false);\n removeGlobalListener(window, 'pointerup', onUpTrack, false);\n }\n };\n\n if ('htmlFor' in labelProps && labelProps.htmlFor) {\n // Ideally the `for` attribute should point to the first thumb, but VoiceOver on iOS\n // causes this to override the `aria-labelledby` on the thumb. This causes the first\n // thumb to only be announced as the slider label rather than its individual name as well.\n // See https://bugs.webkit.org/show_bug.cgi?id=172464.\n delete labelProps.htmlFor;\n labelProps.onClick = () => {\n // Safari does not focus <input type=\"range\"> elements when clicking on an associated <label>,\n // so do it manually. In addition, make sure we show the focus ring.\n document.getElementById(getSliderThumbId(state, 0))?.focus();\n setInteractionModality('keyboard');\n };\n }\n\n return {\n labelProps,\n // The root element of the Slider will have role=\"group\" to group together\n // all the thumb inputs in the Slider. The label of the Slider will\n // be used to label the group.\n groupProps: {\n role: 'group',\n ...fieldProps\n },\n trackProps: mergeProps({\n onMouseDown(e: React.MouseEvent) {\n if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n return;\n }\n onDownTrack(e, undefined, e.clientX, e.clientY);\n },\n onPointerDown(e: React.PointerEvent) {\n if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {\n return;\n }\n onDownTrack(e, e.pointerId, e.clientX, e.clientY);\n },\n onTouchStart(e: React.TouchEvent) { onDownTrack(e, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY); },\n style: {\n position: 'relative',\n touchAction: 'none'\n }\n }, moveProps),\n outputProps: {\n htmlFor: state.values.map((_, index) => getSliderThumbId(state, index)).join(' '),\n 'aria-live': 'off'\n }\n };\n}\n","import {SliderState} from '@react-stately/slider';\n\ninterface SliderData {\n id: string,\n 'aria-describedby'?: string,\n 'aria-details'?: string\n}\n\nexport const sliderData = new WeakMap<SliderState, SliderData>();\n\nexport function getSliderThumbId(state: SliderState, index: number) {\n let data = sliderData.get(state);\n if (!data) {\n throw new Error('Unknown slider state');\n }\n\n return `${data.id}-${index}`;\n}\n","import {AriaSliderThumbProps} from '@react-types/slider';\nimport {clamp, focusWithoutScrolling, mergeProps, useFormReset, useGlobalListeners} from '@react-aria/utils';\nimport {DOMAttributes} from '@react-types/shared';\nimport {getSliderThumbId, sliderData} from './utils';\nimport React, {ChangeEvent, InputHTMLAttributes, LabelHTMLAttributes, RefObject, useCallback, useEffect, useRef} from 'react';\nimport {SliderState} from '@react-stately/slider';\nimport {useFocusable} from '@react-aria/focus';\nimport {useKeyboard, useMove} from '@react-aria/interactions';\nimport {useLabel} from '@react-aria/label';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface SliderThumbAria {\n /** Props for the root thumb element; handles the dragging motion. */\n thumbProps: DOMAttributes,\n\n /** Props for the visually hidden range input element. */\n inputProps: InputHTMLAttributes<HTMLInputElement>,\n\n /** Props for the label element for this thumb (optional). */\n labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n\n /** Whether this thumb is currently being dragged. */\n isDragging: boolean,\n /** Whether the thumb is currently focused. */\n isFocused: boolean,\n /** Whether the thumb is disabled. */\n isDisabled: boolean\n}\n\nexport interface AriaSliderThumbOptions extends AriaSliderThumbProps {\n /** A ref to the track element. */\n trackRef: RefObject<Element>,\n /** A ref to the thumb input element. */\n inputRef: RefObject<HTMLInputElement>\n}\n\n/**\n * Provides behavior and accessibility for a thumb of a slider component.\n *\n * @param opts Options for this Slider thumb.\n * @param state Slider state, created via `useSliderState`.\n */\nexport function useSliderThumb(\n opts: AriaSliderThumbOptions,\n state: SliderState\n): SliderThumbAria {\n let {\n index = 0,\n isRequired,\n validationState,\n isInvalid,\n trackRef,\n inputRef,\n orientation = state.orientation,\n name\n } = opts;\n\n let isDisabled = opts.isDisabled || state.isDisabled;\n let isVertical = orientation === 'vertical';\n\n let {direction} = useLocale();\n let {addGlobalListener, removeGlobalListener} = useGlobalListeners();\n\n let data = sliderData.get(state);\n const {labelProps, fieldProps} = useLabel({\n ...opts,\n id: getSliderThumbId(state, index),\n 'aria-labelledby': `${data.id} ${opts['aria-labelledby'] ?? ''}`.trim()\n });\n\n const value = state.values[index];\n\n const focusInput = useCallback(() => {\n if (inputRef.current) {\n focusWithoutScrolling(inputRef.current);\n }\n }, [inputRef]);\n\n const isFocused = state.focusedThumb === index;\n\n useEffect(() => {\n if (isFocused) {\n focusInput();\n }\n }, [isFocused, focusInput]);\n\n let reverseX = direction === 'rtl';\n let currentPosition = useRef<number>(null);\n\n let {keyboardProps} = useKeyboard({\n onKeyDown(e) {\n let {\n getThumbMaxValue,\n getThumbMinValue,\n decrementThumb,\n incrementThumb,\n setThumbValue,\n setThumbDragging,\n pageSize\n } = state;\n // these are the cases that useMove or useSlider don't handle\n if (!/^(PageUp|PageDown|Home|End)$/.test(e.key)) {\n e.continuePropagation();\n return;\n }\n // same handling as useMove, stopPropagation to prevent useSlider from handling the event as well.\n e.preventDefault();\n // remember to set this so that onChangeEnd is fired\n setThumbDragging(index, true);\n switch (e.key) {\n case 'PageUp':\n incrementThumb(index, pageSize);\n break;\n case 'PageDown':\n decrementThumb(index, pageSize);\n break;\n case 'Home':\n setThumbValue(index, getThumbMinValue(index));\n break;\n case 'End':\n setThumbValue(index, getThumbMaxValue(index));\n break;\n }\n setThumbDragging(index, false);\n }\n });\n\n let {moveProps} = useMove({\n onMoveStart() {\n currentPosition.current = null;\n state.setThumbDragging(index, true);\n },\n onMove({deltaX, deltaY, pointerType, shiftKey}) {\n const {\n getThumbPercent,\n setThumbPercent,\n decrementThumb,\n incrementThumb,\n step,\n pageSize\n } = state;\n let {width, height} = trackRef.current.getBoundingClientRect();\n let size = isVertical ? height : width;\n\n if (currentPosition.current == null) {\n currentPosition.current = getThumbPercent(index) * size;\n }\n if (pointerType === 'keyboard') {\n if ((deltaX > 0 && reverseX) || (deltaX < 0 && !reverseX) || deltaY > 0) {\n decrementThumb(index, shiftKey ? pageSize : step);\n } else {\n incrementThumb(index, shiftKey ? pageSize : step);\n }\n } else {\n let delta = isVertical ? deltaY : deltaX;\n if (isVertical || reverseX) {\n delta = -delta;\n }\n\n currentPosition.current += delta;\n setThumbPercent(index, clamp(currentPosition.current / size, 0, 1));\n }\n },\n onMoveEnd() {\n state.setThumbDragging(index, false);\n }\n });\n\n // Immediately register editability with the state\n state.setThumbEditable(index, !isDisabled);\n\n const {focusableProps} = useFocusable(\n mergeProps(opts, {\n onFocus: () => state.setFocusedThumb(index),\n onBlur: () => state.setFocusedThumb(undefined)\n }),\n inputRef\n );\n\n let currentPointer = useRef<number | undefined>(undefined);\n let onDown = (id?: number) => {\n focusInput();\n currentPointer.current = id;\n state.setThumbDragging(index, true);\n\n addGlobalListener(window, 'mouseup', onUp, false);\n addGlobalListener(window, 'touchend', onUp, false);\n addGlobalListener(window, 'pointerup', onUp, false);\n\n };\n\n let onUp = (e) => {\n let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n if (id === currentPointer.current) {\n focusInput();\n state.setThumbDragging(index, false);\n removeGlobalListener(window, 'mouseup', onUp, false);\n removeGlobalListener(window, 'touchend', onUp, false);\n removeGlobalListener(window, 'pointerup', onUp, false);\n }\n };\n\n let thumbPosition = state.getThumbPercent(index);\n if (isVertical || direction === 'rtl') {\n thumbPosition = 1 - thumbPosition;\n }\n\n let interactions = !isDisabled ? mergeProps(\n keyboardProps,\n moveProps,\n {\n onMouseDown: (e: React.MouseEvent) => {\n if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n return;\n }\n onDown();\n },\n onPointerDown: (e: React.PointerEvent) => {\n if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n return;\n }\n onDown(e.pointerId);\n },\n onTouchStart: (e: React.TouchEvent) => {onDown(e.changedTouches[0].identifier);}\n }\n ) : {};\n\n useFormReset(inputRef, value, (v) => {\n state.setThumbValue(index, v);\n });\n\n // We install mouse handlers for the drag motion on the thumb div, but\n // not the key handler for moving the thumb with the slider. Instead,\n // we focus the range input, and let the browser handle the keyboard\n // interactions; we then listen to input's onChange to update state.\n return {\n inputProps: mergeProps(focusableProps, fieldProps, {\n type: 'range',\n tabIndex: !isDisabled ? 0 : undefined,\n min: state.getThumbMinValue(index),\n max: state.getThumbMaxValue(index),\n step: state.step,\n value: value,\n name,\n disabled: isDisabled,\n 'aria-orientation': orientation,\n 'aria-valuetext': state.getThumbValueLabel(index),\n 'aria-required': isRequired || undefined,\n 'aria-invalid': isInvalid || validationState === 'invalid' || undefined,\n 'aria-errormessage': opts['aria-errormessage'],\n 'aria-describedby': [data['aria-describedby'], opts['aria-describedby']].filter(Boolean).join(' '),\n 'aria-details': [data['aria-details'], opts['aria-details']].filter(Boolean).join(' '),\n onChange: (e: ChangeEvent<HTMLInputElement>) => {\n state.setThumbValue(index, parseFloat(e.target.value));\n }\n }),\n thumbProps: {\n ...interactions,\n style: {\n position: 'absolute',\n [isVertical ? 'top' : 'left']: `${thumbPosition * 100}%`,\n transform: 'translate(-50%, -50%)',\n touchAction: 'none'\n }\n },\n labelProps,\n isDragging: state.isThumbDragging(index),\n isDisabled,\n isFocused\n };\n}\n"],"names":[],"version":3,"file":"main.js.map"}
|
package/dist/module.js
CHANGED
|
@@ -39,7 +39,7 @@ function $aa519ee6cf463259$export$68e648cbec363a18(state, index) {
|
|
|
39
39
|
|
|
40
40
|
|
|
41
41
|
function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
42
|
-
let { labelProps: labelProps
|
|
42
|
+
let { labelProps: labelProps, fieldProps: fieldProps } = (0, $fA3fN$useLabel)(props);
|
|
43
43
|
let isVertical = props.orientation === "vertical";
|
|
44
44
|
var _labelProps_id;
|
|
45
45
|
// Attach id of the label to the state so it can be accessed by useSliderThumb.
|
|
@@ -48,8 +48,8 @@ function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
48
48
|
"aria-describedby": props["aria-describedby"],
|
|
49
49
|
"aria-details": props["aria-details"]
|
|
50
50
|
});
|
|
51
|
-
let { direction: direction
|
|
52
|
-
let { addGlobalListener: addGlobalListener
|
|
51
|
+
let { direction: direction } = (0, $fA3fN$useLocale)();
|
|
52
|
+
let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $fA3fN$useGlobalListeners)();
|
|
53
53
|
// When the user clicks or drags the track, we want the motion to set and drag the
|
|
54
54
|
// closest thumb. Hence we also need to install useMove() on the track element.
|
|
55
55
|
// Here, we keep track of which index is the "closest" to the drag start point.
|
|
@@ -57,12 +57,12 @@ function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
57
57
|
const realTimeTrackDraggingIndex = (0, $fA3fN$useRef)(null);
|
|
58
58
|
const reverseX = direction === "rtl";
|
|
59
59
|
const currentPosition = (0, $fA3fN$useRef)(null);
|
|
60
|
-
const { moveProps: moveProps
|
|
60
|
+
const { moveProps: moveProps } = (0, $fA3fN$useMove)({
|
|
61
61
|
onMoveStart () {
|
|
62
62
|
currentPosition.current = null;
|
|
63
63
|
},
|
|
64
|
-
onMove ({ deltaX: deltaX
|
|
65
|
-
let { height: height
|
|
64
|
+
onMove ({ deltaX: deltaX, deltaY: deltaY }) {
|
|
65
|
+
let { height: height, width: width } = trackRef.current.getBoundingClientRect();
|
|
66
66
|
let size = isVertical ? height : width;
|
|
67
67
|
if (currentPosition.current == null) currentPosition.current = state.getThumbPercent(realTimeTrackDraggingIndex.current) * size;
|
|
68
68
|
let delta = isVertical ? deltaY : deltaX;
|
|
@@ -84,7 +84,7 @@ function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
84
84
|
let onDownTrack = (e, id, clientX, clientY)=>{
|
|
85
85
|
// We only trigger track-dragging if the user clicks on the track itself and nothing is currently being dragged.
|
|
86
86
|
if (trackRef.current && !props.isDisabled && state.values.every((_, i)=>!state.isThumbDragging(i))) {
|
|
87
|
-
let { height: height
|
|
87
|
+
let { height: height, width: width, top: top, left: left } = trackRef.current.getBoundingClientRect();
|
|
88
88
|
let size = isVertical ? height : width;
|
|
89
89
|
// Find the closest thumb
|
|
90
90
|
const trackPosition = isVertical ? top : left;
|
|
@@ -190,14 +190,14 @@ function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
190
190
|
|
|
191
191
|
|
|
192
192
|
function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
193
|
-
let { index: index = 0
|
|
193
|
+
let { index: index = 0, isRequired: isRequired, validationState: validationState, isInvalid: isInvalid, trackRef: trackRef, inputRef: inputRef, orientation: orientation = state.orientation, name: name } = opts;
|
|
194
194
|
let isDisabled = opts.isDisabled || state.isDisabled;
|
|
195
195
|
let isVertical = orientation === "vertical";
|
|
196
|
-
let { direction: direction
|
|
197
|
-
let { addGlobalListener: addGlobalListener
|
|
196
|
+
let { direction: direction } = (0, $fA3fN$useLocale)();
|
|
197
|
+
let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $fA3fN$useGlobalListeners)();
|
|
198
198
|
let data = (0, $aa519ee6cf463259$export$d6c8d9636a3dc49c).get(state);
|
|
199
199
|
var _opts_arialabelledby;
|
|
200
|
-
const { labelProps: labelProps
|
|
200
|
+
const { labelProps: labelProps, fieldProps: fieldProps } = (0, $fA3fN$useLabel)({
|
|
201
201
|
...opts,
|
|
202
202
|
id: (0, $aa519ee6cf463259$export$68e648cbec363a18)(state, index),
|
|
203
203
|
"aria-labelledby": `${data.id} ${(_opts_arialabelledby = opts["aria-labelledby"]) !== null && _opts_arialabelledby !== void 0 ? _opts_arialabelledby : ""}`.trim()
|
|
@@ -217,9 +217,9 @@ function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
|
217
217
|
]);
|
|
218
218
|
let reverseX = direction === "rtl";
|
|
219
219
|
let currentPosition = (0, $fA3fN$useRef)(null);
|
|
220
|
-
let { keyboardProps: keyboardProps
|
|
220
|
+
let { keyboardProps: keyboardProps } = (0, $fA3fN$useKeyboard)({
|
|
221
221
|
onKeyDown (e) {
|
|
222
|
-
let { getThumbMaxValue: getThumbMaxValue
|
|
222
|
+
let { getThumbMaxValue: getThumbMaxValue, getThumbMinValue: getThumbMinValue, decrementThumb: decrementThumb, incrementThumb: incrementThumb, setThumbValue: setThumbValue, setThumbDragging: setThumbDragging, pageSize: pageSize } = state;
|
|
223
223
|
// these are the cases that useMove or useSlider don't handle
|
|
224
224
|
if (!/^(PageUp|PageDown|Home|End)$/.test(e.key)) {
|
|
225
225
|
e.continuePropagation();
|
|
@@ -246,14 +246,14 @@ function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
|
246
246
|
setThumbDragging(index, false);
|
|
247
247
|
}
|
|
248
248
|
});
|
|
249
|
-
let { moveProps: moveProps
|
|
249
|
+
let { moveProps: moveProps } = (0, $fA3fN$useMove)({
|
|
250
250
|
onMoveStart () {
|
|
251
251
|
currentPosition.current = null;
|
|
252
252
|
state.setThumbDragging(index, true);
|
|
253
253
|
},
|
|
254
|
-
onMove ({ deltaX: deltaX
|
|
255
|
-
const { getThumbPercent: getThumbPercent
|
|
256
|
-
let { width: width
|
|
254
|
+
onMove ({ deltaX: deltaX, deltaY: deltaY, pointerType: pointerType, shiftKey: shiftKey }) {
|
|
255
|
+
const { getThumbPercent: getThumbPercent, setThumbPercent: setThumbPercent, decrementThumb: decrementThumb, incrementThumb: incrementThumb, step: step, pageSize: pageSize } = state;
|
|
256
|
+
let { width: width, height: height } = trackRef.current.getBoundingClientRect();
|
|
257
257
|
let size = isVertical ? height : width;
|
|
258
258
|
if (currentPosition.current == null) currentPosition.current = getThumbPercent(index) * size;
|
|
259
259
|
if (pointerType === "keyboard") {
|
|
@@ -272,7 +272,7 @@ function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
|
272
272
|
});
|
|
273
273
|
// Immediately register editability with the state
|
|
274
274
|
state.setThumbEditable(index, !isDisabled);
|
|
275
|
-
const { focusableProps: focusableProps
|
|
275
|
+
const { focusableProps: focusableProps } = (0, $fA3fN$useFocusable)((0, $fA3fN$mergeProps)(opts, {
|
|
276
276
|
onFocus: ()=>state.setFocusedThumb(index),
|
|
277
277
|
onBlur: ()=>state.setFocusedThumb(undefined)
|
|
278
278
|
}), inputRef);
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;AAAA;;;;;;;;;;ACAA;;;;;;;;;;CAUC;ACFM,MAAM,4CAAa,IAAI;AAEvB,SAAS,0CAAiB,KAAkB,EAAE,KAAa;IAChE,IAAI,OAAO,0CAAW,IAAI;IAC1B,IAAI,CAAC,MACH,MAAM,IAAI,MAAM;IAGlB,OAAO,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,CAAC;AAC9B;;;;;;;AD6BO,SAAS,yCACd,KAAyB,EACzB,KAAkB,EAClB,QAA4B;IAE5B,IAAI,cAAC,WAAU,cAAE,WAAU,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;IAExC,IAAI,aAAa,MAAM,gBAAgB;QAIjC;IAFN,+EAA+E;IAC/E,CAAA,GAAA,yCAAS,EAAE,IAAI,OAAO;QACpB,IAAI,CAAA,iBAAA,WAAW,gBAAX,4BAAA,iBAAiB,WAAW;QAChC,oBAAoB,KAAK,CAAC,mBAAmB;QAC7C,gBAAgB,KAAK,CAAC,eAAe;IACvC;IAEA,IAAI,aAAC,UAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAE1B,IAAI,qBAAC,kBAAiB,wBAAE,qBAAoB,EAAC,GAAG,CAAA,GAAA,yBAAiB;IAEjE,kFAAkF;IAClF,gFAAgF;IAChF,+EAA+E;IAC/E,2DAA2D;IAC3D,MAAM,6BAA6B,CAAA,GAAA,aAAK,EAAiB;IAEzD,MAAM,WAAW,cAAc;IAC/B,MAAM,kBAAkB,CAAA,GAAA,aAAK,EAAU;IACvC,MAAM,aAAC,UAAS,EAAC,GAAG,CAAA,GAAA,cAAM,EAAE;QAC1B;YACE,gBAAgB,UAAU;QAC5B;QACA,QAAO,UAAC,OAAM,UAAE,OAAM,EAAC;YACrB,IAAI,UAAC,OAAM,SAAE,MAAK,EAAC,GAAG,SAAS,QAAQ;YACvC,IAAI,OAAO,aAAa,SAAS;YAEjC,IAAI,gBAAgB,WAAW,MAC7B,gBAAgB,UAAU,MAAM,gBAAgB,2BAA2B,WAAW;YAGxF,IAAI,QAAQ,aAAa,SAAS;YAClC,IAAI,cAAc,UAChB,QAAQ,CAAC;YAGX,gBAAgB,WAAW;YAE3B,IAAI,2BAA2B,WAAW,QAAQ,SAAS,SAAS;gBAClE,MAAM,UAAU,CAAA,GAAA,YAAI,EAAE,gBAAgB,UAAU,MAAM,GAAG;gBACzD,MAAM,gBAAgB,2BAA2B,SAAS;YAC5D;QACF;QACA;YACE,IAAI,2BAA2B,WAAW,MAAM;gBAC9C,MAAM,iBAAiB,2BAA2B,SAAS;gBAC3D,2BAA2B,UAAU;YACvC;QACF;IACF;IAEA,IAAI,iBAAiB,CAAA,GAAA,aAAK,EAA6B;IACvD,IAAI,cAAc,CAAC,GAAkB,IAAY,SAAiB;QAChE,gHAAgH;QAChH,IAAI,SAAS,WAAW,CAAC,MAAM,cAAc,MAAM,OAAO,MAAM,CAAC,GAAG,IAAM,CAAC,MAAM,gBAAgB,KAAK;YACpG,IAAI,UAAC,OAAM,SAAE,MAAK,OAAE,IAAG,QAAE,KAAI,EAAC,GAAG,SAAS,QAAQ;YAClD,IAAI,OAAO,aAAa,SAAS;YACjC,yBAAyB;YACzB,MAAM,gBAAgB,aAAa,MAAM;YACzC,MAAM,gBAAgB,aAAa,UAAU;YAC7C,MAAM,SAAS,gBAAgB;YAC/B,IAAI,UAAU,SAAS;YACvB,IAAI,cAAc,SAAS,YACzB,UAAU,IAAI;YAEhB,IAAI,QAAQ,MAAM,gBAAgB;YAElC,iHAAiH;YACjH,IAAI;YACJ,IAAI,QAAQ,MAAM,OAAO,UAAU,CAAA,IAAK,QAAQ,IAAI;YACpD,IAAI,UAAU,GACZ,eAAe;iBACV,IAAI,UAAU,IACnB,eAAe,MAAM,OAAO,SAAS;iBAChC;gBACL,IAAI,WAAW,MAAM,MAAM,CAAC,QAAQ,EAAE;gBACtC,IAAI,aAAa,MAAM,MAAM,CAAC,MAAM;gBACpC,4GAA4G;gBAC5G,IAAI,KAAK,IAAI,WAAW,SAAS,KAAK,IAAI,aAAa,QACrD,eAAe,QAAQ;qBAEvB,eAAe;YAEnB;YAEA,8EAA8E;YAC9E,IAAI,gBAAgB,KAAK,MAAM,gBAAgB,eAAe;gBAC5D,yBAAyB;gBACzB,EAAE;gBAEF,2BAA2B,UAAU;gBACrC,MAAM,gBAAgB;gBACtB,eAAe,UAAU;gBAEzB,MAAM,iBAAiB,2BAA2B,SAAS;gBAC3D,MAAM,cAAc,cAAc;gBAElC,kBAAkB,QAAQ,WAAW,WAAW;gBAChD,kBAAkB,QAAQ,YAAY,WAAW;gBACjD,kBAAkB,QAAQ,aAAa,WAAW;YACpD,OACE,2BAA2B,UAAU;QAEzC;IACF;IAEA,IAAI,YAAY,CAAC;YACS;YAAf;QAAT,IAAI,KAAK,CAAA,eAAA,EAAE,uBAAF,0BAAA,eAAe,CAAA,oBAAA,EAAE,4BAAF,+BAAA,KAAA,IAAA,iBAAkB,CAAC,EAAE,CAAC;QAC9C,IAAI,OAAO,eAAe,SAAS;YACjC,IAAI,2BAA2B,WAAW,MAAM;gBAC9C,MAAM,iBAAiB,2BAA2B,SAAS;gBAC3D,2BAA2B,UAAU;YACvC;YAEA,qBAAqB,QAAQ,WAAW,WAAW;YACnD,qBAAqB,QAAQ,YAAY,WAAW;YACpD,qBAAqB,QAAQ,aAAa,WAAW;QACvD;IACF;IAEA,IAAI,aAAa,cAAc,WAAW,SAAS;QACjD,oFAAoF;QACpF,oFAAoF;QACpF,0FAA0F;QAC1F,sDAAsD;QACtD,OAAO,WAAW;QAClB,WAAW,UAAU;gBACnB,8FAA8F;YAC9F,oEAAoE;YACpE;YAAA,CAAA,2BAAA,SAAS,eAAe,CAAA,GAAA,yCAAe,EAAE,OAAO,iBAAhD,sCAAA,KAAA,IAAA,yBAAqD;YACrD,CAAA,GAAA,6BAAqB,EAAE;QACzB;IACF;IAEA,OAAO;oBACL;QACA,0EAA0E;QAC1E,oEAAoE;QACpE,8BAA8B;QAC9B,YAAY;YACV,MAAM;YACN,GAAG,UAAU;QACf;QACA,YAAY,CAAA,GAAA,iBAAS,EAAE;YACrB,aAAY,CAAmB;gBAC7B,IAAI,EAAE,WAAW,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,SAC/C;gBAEF,YAAY,GAAG,WAAW,EAAE,SAAS,EAAE;YACzC;YACA,eAAc,CAAqB;gBACjC,IAAI,EAAE,gBAAgB,WAAY,CAAA,EAAE,WAAW,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,OAAM,GACnF;gBAEF,YAAY,GAAG,EAAE,WAAW,EAAE,SAAS,EAAE;YAC3C;YACA,cAAa,CAAmB;gBAAI,YAAY,GAAG,EAAE,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,CAAC,EAAE,CAAC;YAAU;YAC9I,OAAO;gBACL,UAAU;gBACV,aAAa;YACf;QACF,GAAG;QACH,aAAa;YACX,SAAS,MAAM,OAAO,IAAI,CAAC,GAAG,QAAU,CAAA,GAAA,yCAAe,EAAE,OAAO,QAAQ,KAAK;YAC7E,aAAa;QACf;IACF;AACF;;CDpNC;;;;;;;;AGgCM,SAAS,yCACd,IAA4B,EAC5B,KAAkB;IAElB,IAAI,SACF,QAAQ,gBACR,WAAU,mBACV,gBAAe,aACf,UAAS,YACT,SAAQ,YACR,SAAQ,eACR,cAAc,MAAM,oBACpB,KAAI,EACL,GAAG;IAEJ,IAAI,aAAa,KAAK,cAAc,MAAM;IAC1C,IAAI,aAAa,gBAAgB;IAEjC,IAAI,aAAC,UAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAC1B,IAAI,qBAAC,kBAAiB,wBAAE,qBAAoB,EAAC,GAAG,CAAA,GAAA,yBAAiB;IAEjE,IAAI,OAAO,CAAA,GAAA,yCAAS,EAAE,IAAI;QAIS;IAHnC,MAAM,cAAC,WAAU,cAAE,WAAU,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;QACxC,GAAG,IAAI;QACP,IAAI,CAAA,GAAA,yCAAe,EAAE,OAAO;QAC5B,mBAAmB,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,CAAA,uBAAA,IAAI,CAAC,kBAAkB,cAAvB,kCAAA,uBAA2B,GAAG,CAAC,CAAC;IACnE;IAEA,MAAM,QAAQ,MAAM,MAAM,CAAC,MAAM;IAEjC,MAAM,aAAa,CAAA,GAAA,kBAAU,EAAE;QAC7B,IAAI,SAAS,SACX,CAAA,GAAA,4BAAoB,EAAE,SAAS;IAEnC,GAAG;QAAC;KAAS;IAEb,MAAM,YAAY,MAAM,iBAAiB;IAEzC,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,WACF;IAEJ,GAAG;QAAC;QAAW;KAAW;IAE1B,IAAI,WAAW,cAAc;IAC7B,IAAI,kBAAkB,CAAA,GAAA,aAAK,EAAU;IAErC,IAAI,iBAAC,cAAa,EAAC,GAAG,CAAA,GAAA,kBAAU,EAAE;QAChC,WAAU,CAAC;YACT,IAAI,oBACF,iBAAgB,oBAChB,iBAAgB,kBAChB,eAAc,kBACd,eAAc,iBACd,cAAa,oBACb,iBAAgB,YAChB,SAAQ,EACT,GAAG;YACJ,6DAA6D;YAC7D,IAAI,CAAC,+BAA+B,KAAK,EAAE,MAAM;gBAC/C,EAAE;gBACF;YACF;YACA,kGAAkG;YAClG,EAAE;YACF,oDAAoD;YACpD,iBAAiB,OAAO;YACxB,OAAQ,EAAE;gBACR,KAAK;oBACH,eAAe,OAAO;oBACtB;gBACF,KAAK;oBACH,eAAe,OAAO;oBACtB;gBACF,KAAK;oBACH,cAAc,OAAO,iBAAiB;oBACtC;gBACF,KAAK;oBACH,cAAc,OAAO,iBAAiB;oBACtC;YACJ;YACA,iBAAiB,OAAO;QAC1B;IACF;IAEA,IAAI,aAAC,UAAS,EAAC,GAAG,CAAA,GAAA,cAAM,EAAE;QACxB;YACE,gBAAgB,UAAU;YAC1B,MAAM,iBAAiB,OAAO;QAChC;QACA,QAAO,UAAC,OAAM,UAAE,OAAM,eAAE,YAAW,YAAE,SAAQ,EAAC;YAC5C,MAAM,mBACJ,gBAAe,mBACf,gBAAe,kBACf,eAAc,kBACd,eAAc,QACd,KAAI,YACJ,SAAQ,EACT,GAAG;YACJ,IAAI,SAAC,MAAK,UAAE,OAAM,EAAC,GAAG,SAAS,QAAQ;YACvC,IAAI,OAAO,aAAa,SAAS;YAEjC,IAAI,gBAAgB,WAAW,MAC7B,gBAAgB,UAAU,gBAAgB,SAAS;YAErD,IAAI,gBAAgB;gBAClB,IAAI,AAAC,SAAS,KAAK,YAAc,SAAS,KAAK,CAAC,YAAa,SAAS,GACpE,eAAe,OAAO,WAAW,WAAW;qBAE5C,eAAe,OAAO,WAAW,WAAW;mBAEzC;gBACL,IAAI,QAAQ,aAAa,SAAS;gBAClC,IAAI,cAAc,UAChB,QAAQ,CAAC;gBAGX,gBAAgB,WAAW;gBAC3B,gBAAgB,OAAO,CAAA,GAAA,YAAI,EAAE,gBAAgB,UAAU,MAAM,GAAG;YAClE;QACF;QACA;YACE,MAAM,iBAAiB,OAAO;QAChC;IACF;IAEA,kDAAkD;IAClD,MAAM,iBAAiB,OAAO,CAAC;IAE/B,MAAM,kBAAC,eAAc,EAAC,GAAG,CAAA,GAAA,mBAAW,EAClC,CAAA,GAAA,iBAAS,EAAE,MAAM;QACf,SAAS,IAAM,MAAM,gBAAgB;QACrC,QAAQ,IAAM,MAAM,gBAAgB;IACtC,IACA;IAGF,IAAI,iBAAiB,CAAA,GAAA,aAAK,EAAsB;IAChD,IAAI,SAAS,CAAC;QACZ;QACA,eAAe,UAAU;QACzB,MAAM,iBAAiB,OAAO;QAE9B,kBAAkB,QAAQ,WAAW,MAAM;QAC3C,kBAAkB,QAAQ,YAAY,MAAM;QAC5C,kBAAkB,QAAQ,aAAa,MAAM;IAE/C;IAEA,IAAI,OAAO,CAAC;YACc;YAAf;QAAT,IAAI,KAAK,CAAA,eAAA,EAAE,uBAAF,0BAAA,eAAe,CAAA,oBAAA,EAAE,4BAAF,+BAAA,KAAA,IAAA,iBAAkB,CAAC,EAAE,CAAC;QAC9C,IAAI,OAAO,eAAe,SAAS;YACjC;YACA,MAAM,iBAAiB,OAAO;YAC9B,qBAAqB,QAAQ,WAAW,MAAM;YAC9C,qBAAqB,QAAQ,YAAY,MAAM;YAC/C,qBAAqB,QAAQ,aAAa,MAAM;QAClD;IACF;IAEA,IAAI,gBAAgB,MAAM,gBAAgB;IAC1C,IAAI,cAAc,cAAc,OAC9B,gBAAgB,IAAI;IAGtB,IAAI,eAAe,CAAC,aAAa,CAAA,GAAA,iBAAS,EACxC,eACA,WACA;QACE,aAAa,CAAC;YACZ,IAAI,EAAE,WAAW,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,SAC/C;YAEF;QACF;QACA,eAAe,CAAC;YACd,IAAI,EAAE,WAAW,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,SAC/C;YAEF,OAAO,EAAE;QACX;QACA,cAAc,CAAC;YAAyB,OAAO,EAAE,cAAc,CAAC,EAAE,CAAC;QAAY;IACjF,KACE,CAAC;IAEL,CAAA,GAAA,mBAAW,EAAE,UAAU,OAAO,CAAC;QAC7B,MAAM,cAAc,OAAO;IAC7B;IAEA,sEAAsE;IACtE,sEAAsE;IACtE,oEAAoE;IACpE,oEAAoE;IACpE,OAAO;QACL,YAAY,CAAA,GAAA,iBAAS,EAAE,gBAAgB,YAAY;YACjD,MAAM;YACN,UAAU,CAAC,aAAa,IAAI;YAC5B,KAAK,MAAM,iBAAiB;YAC5B,KAAK,MAAM,iBAAiB;YAC5B,MAAM,MAAM;YACZ,OAAO;kBACP;YACA,UAAU;YACV,oBAAoB;YACpB,kBAAkB,MAAM,mBAAmB;YAC3C,iBAAiB,cAAc;YAC/B,gBAAgB,aAAa,oBAAoB,aAAa;YAC9D,qBAAqB,IAAI,CAAC,oBAAoB;YAC9C,oBAAoB;gBAAC,IAAI,CAAC,mBAAmB;gBAAE,IAAI,CAAC,mBAAmB;aAAC,CAAC,OAAO,SAAS,KAAK;YAC9F,gBAAgB;gBAAC,IAAI,CAAC,eAAe;gBAAE,IAAI,CAAC,eAAe;aAAC,CAAC,OAAO,SAAS,KAAK;YAClF,UAAU,CAAC;gBACT,MAAM,cAAc,OAAO,WAAW,EAAE,OAAO;YACjD;QACF;QACA,YAAY;YACV,GAAG,YAAY;YACf,OAAO;gBACL,UAAU;gBACV,CAAC,aAAa,QAAQ,OAAO,EAAE,CAAC,EAAE,gBAAgB,IAAI,CAAC,CAAC;gBACxD,WAAW;gBACX,aAAa;YACf;QACF;oBACA;QACA,YAAY,MAAM,gBAAgB;oBAClC;mBACA;IACF;AACF;","sources":["packages/@react-aria/slider/src/index.ts","packages/@react-aria/slider/src/useSlider.ts","packages/@react-aria/slider/src/utils.ts","packages/@react-aria/slider/src/useSliderThumb.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport {useSlider} from './useSlider';\nexport {useSliderThumb} from './useSliderThumb';\nexport type {AriaSliderProps} from '@react-types/slider';\nexport type {SliderAria} from './useSlider';\nexport type {AriaSliderThumbOptions, SliderThumbAria} from './useSliderThumb';\nexport type {AriaSliderThumbProps} from '@react-types/slider';\nexport type {Orientation} from '@react-types/shared';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaSliderProps} from '@react-types/slider';\nimport {clamp, mergeProps, useGlobalListeners} from '@react-aria/utils';\nimport {DOMAttributes} from '@react-types/shared';\nimport {getSliderThumbId, sliderData} from './utils';\nimport React, {LabelHTMLAttributes, OutputHTMLAttributes, RefObject, useRef} from 'react';\nimport {setInteractionModality, useMove} from '@react-aria/interactions';\nimport {SliderState} from '@react-stately/slider';\nimport {useLabel} from '@react-aria/label';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface SliderAria {\n /** Props for the label element. */\n labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n\n /** Props for the root element of the slider component; groups slider inputs. */\n groupProps: DOMAttributes,\n\n /** Props for the track element. */\n trackProps: DOMAttributes,\n\n /** Props for the output element, displaying the value of the slider thumbs. */\n outputProps: OutputHTMLAttributes<HTMLOutputElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a slider component representing one or more values.\n *\n * @param props Props for the slider.\n * @param state State for the slider, as returned by `useSliderState`.\n * @param trackRef Ref for the \"track\" element. The width of this element provides the \"length\"\n * of the track -- the span of one dimensional space that the slider thumb can be. It also\n * accepts click and drag motions, so that the closest thumb will follow clicks and drags on\n * the track.\n */\nexport function useSlider<T extends number | number[]>(\n props: AriaSliderProps<T>,\n state: SliderState,\n trackRef: RefObject<Element>\n): SliderAria {\n let {labelProps, fieldProps} = useLabel(props);\n\n let isVertical = props.orientation === 'vertical';\n\n // Attach id of the label to the state so it can be accessed by useSliderThumb.\n sliderData.set(state, {\n id: labelProps.id ?? fieldProps.id,\n 'aria-describedby': props['aria-describedby'],\n 'aria-details': props['aria-details']\n });\n\n let {direction} = useLocale();\n\n let {addGlobalListener, removeGlobalListener} = useGlobalListeners();\n\n // When the user clicks or drags the track, we want the motion to set and drag the\n // closest thumb. Hence we also need to install useMove() on the track element.\n // Here, we keep track of which index is the \"closest\" to the drag start point.\n // It is set onMouseDown/onTouchDown; see trackProps below.\n const realTimeTrackDraggingIndex = useRef<number | null>(null);\n\n const reverseX = direction === 'rtl';\n const currentPosition = useRef<number>(null);\n const {moveProps} = useMove({\n onMoveStart() {\n currentPosition.current = null;\n },\n onMove({deltaX, deltaY}) {\n let {height, width} = trackRef.current.getBoundingClientRect();\n let size = isVertical ? height : width;\n\n if (currentPosition.current == null) {\n currentPosition.current = state.getThumbPercent(realTimeTrackDraggingIndex.current) * size;\n }\n\n let delta = isVertical ? deltaY : deltaX;\n if (isVertical || reverseX) {\n delta = -delta;\n }\n\n currentPosition.current += delta;\n\n if (realTimeTrackDraggingIndex.current != null && trackRef.current) {\n const percent = clamp(currentPosition.current / size, 0, 1);\n state.setThumbPercent(realTimeTrackDraggingIndex.current, percent);\n }\n },\n onMoveEnd() {\n if (realTimeTrackDraggingIndex.current != null) {\n state.setThumbDragging(realTimeTrackDraggingIndex.current, false);\n realTimeTrackDraggingIndex.current = null;\n }\n }\n });\n\n let currentPointer = useRef<number | null | undefined>(undefined);\n let onDownTrack = (e: React.UIEvent, id: number, clientX: number, clientY: number) => {\n // We only trigger track-dragging if the user clicks on the track itself and nothing is currently being dragged.\n if (trackRef.current && !props.isDisabled && state.values.every((_, i) => !state.isThumbDragging(i))) {\n let {height, width, top, left} = trackRef.current.getBoundingClientRect();\n let size = isVertical ? height : width;\n // Find the closest thumb\n const trackPosition = isVertical ? top : left;\n const clickPosition = isVertical ? clientY : clientX;\n const offset = clickPosition - trackPosition;\n let percent = offset / size;\n if (direction === 'rtl' || isVertical) {\n percent = 1 - percent;\n }\n let value = state.getPercentValue(percent);\n\n // to find the closet thumb we split the array based on the first thumb position to the \"right/end\" of the click.\n let closestThumb;\n let split = state.values.findIndex(v => value - v < 0);\n if (split === 0) { // If the index is zero then the closetThumb is the first one\n closestThumb = split;\n } else if (split === -1) { // If no index is found they've clicked past all the thumbs\n closestThumb = state.values.length - 1;\n } else {\n let lastLeft = state.values[split - 1];\n let firstRight = state.values[split];\n // Pick the last left/start thumb, unless they are stacked on top of each other, then pick the right/end one\n if (Math.abs(lastLeft - value) < Math.abs(firstRight - value)) {\n closestThumb = split - 1;\n } else {\n closestThumb = split;\n }\n }\n\n // Confirm that the found closest thumb is editable, not disabled, and move it\n if (closestThumb >= 0 && state.isThumbEditable(closestThumb)) {\n // Don't unfocus anything\n e.preventDefault();\n\n realTimeTrackDraggingIndex.current = closestThumb;\n state.setFocusedThumb(closestThumb);\n currentPointer.current = id;\n\n state.setThumbDragging(realTimeTrackDraggingIndex.current, true);\n state.setThumbValue(closestThumb, value);\n\n addGlobalListener(window, 'mouseup', onUpTrack, false);\n addGlobalListener(window, 'touchend', onUpTrack, false);\n addGlobalListener(window, 'pointerup', onUpTrack, false);\n } else {\n realTimeTrackDraggingIndex.current = null;\n }\n }\n };\n\n let onUpTrack = (e) => {\n let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n if (id === currentPointer.current) {\n if (realTimeTrackDraggingIndex.current != null) {\n state.setThumbDragging(realTimeTrackDraggingIndex.current, false);\n realTimeTrackDraggingIndex.current = null;\n }\n\n removeGlobalListener(window, 'mouseup', onUpTrack, false);\n removeGlobalListener(window, 'touchend', onUpTrack, false);\n removeGlobalListener(window, 'pointerup', onUpTrack, false);\n }\n };\n\n if ('htmlFor' in labelProps && labelProps.htmlFor) {\n // Ideally the `for` attribute should point to the first thumb, but VoiceOver on iOS\n // causes this to override the `aria-labelledby` on the thumb. This causes the first\n // thumb to only be announced as the slider label rather than its individual name as well.\n // See https://bugs.webkit.org/show_bug.cgi?id=172464.\n delete labelProps.htmlFor;\n labelProps.onClick = () => {\n // Safari does not focus <input type=\"range\"> elements when clicking on an associated <label>,\n // so do it manually. In addition, make sure we show the focus ring.\n document.getElementById(getSliderThumbId(state, 0))?.focus();\n setInteractionModality('keyboard');\n };\n }\n\n return {\n labelProps,\n // The root element of the Slider will have role=\"group\" to group together\n // all the thumb inputs in the Slider. The label of the Slider will\n // be used to label the group.\n groupProps: {\n role: 'group',\n ...fieldProps\n },\n trackProps: mergeProps({\n onMouseDown(e: React.MouseEvent) {\n if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n return;\n }\n onDownTrack(e, undefined, e.clientX, e.clientY);\n },\n onPointerDown(e: React.PointerEvent) {\n if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {\n return;\n }\n onDownTrack(e, e.pointerId, e.clientX, e.clientY);\n },\n onTouchStart(e: React.TouchEvent) { onDownTrack(e, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY); },\n style: {\n position: 'relative',\n touchAction: 'none'\n }\n }, moveProps),\n outputProps: {\n htmlFor: state.values.map((_, index) => getSliderThumbId(state, index)).join(' '),\n 'aria-live': 'off'\n }\n };\n}\n","import {SliderState} from '@react-stately/slider';\n\ninterface SliderData {\n id: string,\n 'aria-describedby'?: string,\n 'aria-details'?: string\n}\n\nexport const sliderData = new WeakMap<SliderState, SliderData>();\n\nexport function getSliderThumbId(state: SliderState, index: number) {\n let data = sliderData.get(state);\n if (!data) {\n throw new Error('Unknown slider state');\n }\n\n return `${data.id}-${index}`;\n}\n","import {AriaSliderThumbProps} from '@react-types/slider';\nimport {clamp, focusWithoutScrolling, mergeProps, useFormReset, useGlobalListeners} from '@react-aria/utils';\nimport {DOMAttributes} from '@react-types/shared';\nimport {getSliderThumbId, sliderData} from './utils';\nimport React, {ChangeEvent, InputHTMLAttributes, LabelHTMLAttributes, RefObject, useCallback, useEffect, useRef} from 'react';\nimport {SliderState} from '@react-stately/slider';\nimport {useFocusable} from '@react-aria/focus';\nimport {useKeyboard, useMove} from '@react-aria/interactions';\nimport {useLabel} from '@react-aria/label';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface SliderThumbAria {\n /** Props for the root thumb element; handles the dragging motion. */\n thumbProps: DOMAttributes,\n\n /** Props for the visually hidden range input element. */\n inputProps: InputHTMLAttributes<HTMLInputElement>,\n\n /** Props for the label element for this thumb (optional). */\n labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n\n /** Whether this thumb is currently being dragged. */\n isDragging: boolean,\n /** Whether the thumb is currently focused. */\n isFocused: boolean,\n /** Whether the thumb is disabled. */\n isDisabled: boolean\n}\n\nexport interface AriaSliderThumbOptions extends AriaSliderThumbProps {\n /** A ref to the track element. */\n trackRef: RefObject<Element>,\n /** A ref to the thumb input element. */\n inputRef: RefObject<HTMLInputElement>\n}\n\n/**\n * Provides behavior and accessibility for a thumb of a slider component.\n *\n * @param opts Options for this Slider thumb.\n * @param state Slider state, created via `useSliderState`.\n */\nexport function useSliderThumb(\n opts: AriaSliderThumbOptions,\n state: SliderState\n): SliderThumbAria {\n let {\n index = 0,\n isRequired,\n validationState,\n isInvalid,\n trackRef,\n inputRef,\n orientation = state.orientation,\n name\n } = opts;\n\n let isDisabled = opts.isDisabled || state.isDisabled;\n let isVertical = orientation === 'vertical';\n\n let {direction} = useLocale();\n let {addGlobalListener, removeGlobalListener} = useGlobalListeners();\n\n let data = sliderData.get(state);\n const {labelProps, fieldProps} = useLabel({\n ...opts,\n id: getSliderThumbId(state, index),\n 'aria-labelledby': `${data.id} ${opts['aria-labelledby'] ?? ''}`.trim()\n });\n\n const value = state.values[index];\n\n const focusInput = useCallback(() => {\n if (inputRef.current) {\n focusWithoutScrolling(inputRef.current);\n }\n }, [inputRef]);\n\n const isFocused = state.focusedThumb === index;\n\n useEffect(() => {\n if (isFocused) {\n focusInput();\n }\n }, [isFocused, focusInput]);\n\n let reverseX = direction === 'rtl';\n let currentPosition = useRef<number>(null);\n\n let {keyboardProps} = useKeyboard({\n onKeyDown(e) {\n let {\n getThumbMaxValue,\n getThumbMinValue,\n decrementThumb,\n incrementThumb,\n setThumbValue,\n setThumbDragging,\n pageSize\n } = state;\n // these are the cases that useMove or useSlider don't handle\n if (!/^(PageUp|PageDown|Home|End)$/.test(e.key)) {\n e.continuePropagation();\n return;\n }\n // same handling as useMove, stopPropagation to prevent useSlider from handling the event as well.\n e.preventDefault();\n // remember to set this so that onChangeEnd is fired\n setThumbDragging(index, true);\n switch (e.key) {\n case 'PageUp':\n incrementThumb(index, pageSize);\n break;\n case 'PageDown':\n decrementThumb(index, pageSize);\n break;\n case 'Home':\n setThumbValue(index, getThumbMinValue(index));\n break;\n case 'End':\n setThumbValue(index, getThumbMaxValue(index));\n break;\n }\n setThumbDragging(index, false);\n }\n });\n\n let {moveProps} = useMove({\n onMoveStart() {\n currentPosition.current = null;\n state.setThumbDragging(index, true);\n },\n onMove({deltaX, deltaY, pointerType, shiftKey}) {\n const {\n getThumbPercent,\n setThumbPercent,\n decrementThumb,\n incrementThumb,\n step,\n pageSize\n } = state;\n let {width, height} = trackRef.current.getBoundingClientRect();\n let size = isVertical ? height : width;\n\n if (currentPosition.current == null) {\n currentPosition.current = getThumbPercent(index) * size;\n }\n if (pointerType === 'keyboard') {\n if ((deltaX > 0 && reverseX) || (deltaX < 0 && !reverseX) || deltaY > 0) {\n decrementThumb(index, shiftKey ? pageSize : step);\n } else {\n incrementThumb(index, shiftKey ? pageSize : step);\n }\n } else {\n let delta = isVertical ? deltaY : deltaX;\n if (isVertical || reverseX) {\n delta = -delta;\n }\n\n currentPosition.current += delta;\n setThumbPercent(index, clamp(currentPosition.current / size, 0, 1));\n }\n },\n onMoveEnd() {\n state.setThumbDragging(index, false);\n }\n });\n\n // Immediately register editability with the state\n state.setThumbEditable(index, !isDisabled);\n\n const {focusableProps} = useFocusable(\n mergeProps(opts, {\n onFocus: () => state.setFocusedThumb(index),\n onBlur: () => state.setFocusedThumb(undefined)\n }),\n inputRef\n );\n\n let currentPointer = useRef<number | undefined>(undefined);\n let onDown = (id?: number) => {\n focusInput();\n currentPointer.current = id;\n state.setThumbDragging(index, true);\n\n addGlobalListener(window, 'mouseup', onUp, false);\n addGlobalListener(window, 'touchend', onUp, false);\n addGlobalListener(window, 'pointerup', onUp, false);\n\n };\n\n let onUp = (e) => {\n let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n if (id === currentPointer.current) {\n focusInput();\n state.setThumbDragging(index, false);\n removeGlobalListener(window, 'mouseup', onUp, false);\n removeGlobalListener(window, 'touchend', onUp, false);\n removeGlobalListener(window, 'pointerup', onUp, false);\n }\n };\n\n let thumbPosition = state.getThumbPercent(index);\n if (isVertical || direction === 'rtl') {\n thumbPosition = 1 - thumbPosition;\n }\n\n let interactions = !isDisabled ? mergeProps(\n keyboardProps,\n moveProps,\n {\n onMouseDown: (e: React.MouseEvent) => {\n if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n return;\n }\n onDown();\n },\n onPointerDown: (e: React.PointerEvent) => {\n if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n return;\n }\n onDown(e.pointerId);\n },\n onTouchStart: (e: React.TouchEvent) => {onDown(e.changedTouches[0].identifier);}\n }\n ) : {};\n\n useFormReset(inputRef, value, (v) => {\n state.setThumbValue(index, v);\n });\n\n // We install mouse handlers for the drag motion on the thumb div, but\n // not the key handler for moving the thumb with the slider. Instead,\n // we focus the range input, and let the browser handle the keyboard\n // interactions; we then listen to input's onChange to update state.\n return {\n inputProps: mergeProps(focusableProps, fieldProps, {\n type: 'range',\n tabIndex: !isDisabled ? 0 : undefined,\n min: state.getThumbMinValue(index),\n max: state.getThumbMaxValue(index),\n step: state.step,\n value: value,\n name,\n disabled: isDisabled,\n 'aria-orientation': orientation,\n 'aria-valuetext': state.getThumbValueLabel(index),\n 'aria-required': isRequired || undefined,\n 'aria-invalid': isInvalid || validationState === 'invalid' || undefined,\n 'aria-errormessage': opts['aria-errormessage'],\n 'aria-describedby': [data['aria-describedby'], opts['aria-describedby']].filter(Boolean).join(' '),\n 'aria-details': [data['aria-details'], opts['aria-details']].filter(Boolean).join(' '),\n onChange: (e: ChangeEvent<HTMLInputElement>) => {\n state.setThumbValue(index, parseFloat(e.target.value));\n }\n }),\n thumbProps: {\n ...interactions,\n style: {\n position: 'absolute',\n [isVertical ? 'top' : 'left']: `${thumbPosition * 100}%`,\n transform: 'translate(-50%, -50%)',\n touchAction: 'none'\n }\n },\n labelProps,\n isDragging: state.isThumbDragging(index),\n isDisabled,\n isFocused\n };\n}\n"],"names":[],"version":3,"file":"module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/slider/src/index.ts","packages/@react-aria/slider/src/useSlider.ts","packages/@react-aria/slider/src/utils.ts","packages/@react-aria/slider/src/useSliderThumb.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport {useSlider} from './useSlider';\nexport {useSliderThumb} from './useSliderThumb';\nexport type {AriaSliderProps} from '@react-types/slider';\nexport type {SliderAria} from './useSlider';\nexport type {AriaSliderThumbOptions, SliderThumbAria} from './useSliderThumb';\nexport type {AriaSliderThumbProps} from '@react-types/slider';\nexport type {Orientation} from '@react-types/shared';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaSliderProps} from '@react-types/slider';\nimport {clamp, mergeProps, useGlobalListeners} from '@react-aria/utils';\nimport {DOMAttributes} from '@react-types/shared';\nimport {getSliderThumbId, sliderData} from './utils';\nimport React, {LabelHTMLAttributes, OutputHTMLAttributes, RefObject, useRef} from 'react';\nimport {setInteractionModality, useMove} from '@react-aria/interactions';\nimport {SliderState} from '@react-stately/slider';\nimport {useLabel} from '@react-aria/label';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface SliderAria {\n /** Props for the label element. */\n labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n\n /** Props for the root element of the slider component; groups slider inputs. */\n groupProps: DOMAttributes,\n\n /** Props for the track element. */\n trackProps: DOMAttributes,\n\n /** Props for the output element, displaying the value of the slider thumbs. */\n outputProps: OutputHTMLAttributes<HTMLOutputElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a slider component representing one or more values.\n *\n * @param props Props for the slider.\n * @param state State for the slider, as returned by `useSliderState`.\n * @param trackRef Ref for the \"track\" element. The width of this element provides the \"length\"\n * of the track -- the span of one dimensional space that the slider thumb can be. It also\n * accepts click and drag motions, so that the closest thumb will follow clicks and drags on\n * the track.\n */\nexport function useSlider<T extends number | number[]>(\n props: AriaSliderProps<T>,\n state: SliderState,\n trackRef: RefObject<Element>\n): SliderAria {\n let {labelProps, fieldProps} = useLabel(props);\n\n let isVertical = props.orientation === 'vertical';\n\n // Attach id of the label to the state so it can be accessed by useSliderThumb.\n sliderData.set(state, {\n id: labelProps.id ?? fieldProps.id,\n 'aria-describedby': props['aria-describedby'],\n 'aria-details': props['aria-details']\n });\n\n let {direction} = useLocale();\n\n let {addGlobalListener, removeGlobalListener} = useGlobalListeners();\n\n // When the user clicks or drags the track, we want the motion to set and drag the\n // closest thumb. Hence we also need to install useMove() on the track element.\n // Here, we keep track of which index is the \"closest\" to the drag start point.\n // It is set onMouseDown/onTouchDown; see trackProps below.\n const realTimeTrackDraggingIndex = useRef<number | null>(null);\n\n const reverseX = direction === 'rtl';\n const currentPosition = useRef<number>(null);\n const {moveProps} = useMove({\n onMoveStart() {\n currentPosition.current = null;\n },\n onMove({deltaX, deltaY}) {\n let {height, width} = trackRef.current.getBoundingClientRect();\n let size = isVertical ? height : width;\n\n if (currentPosition.current == null) {\n currentPosition.current = state.getThumbPercent(realTimeTrackDraggingIndex.current) * size;\n }\n\n let delta = isVertical ? deltaY : deltaX;\n if (isVertical || reverseX) {\n delta = -delta;\n }\n\n currentPosition.current += delta;\n\n if (realTimeTrackDraggingIndex.current != null && trackRef.current) {\n const percent = clamp(currentPosition.current / size, 0, 1);\n state.setThumbPercent(realTimeTrackDraggingIndex.current, percent);\n }\n },\n onMoveEnd() {\n if (realTimeTrackDraggingIndex.current != null) {\n state.setThumbDragging(realTimeTrackDraggingIndex.current, false);\n realTimeTrackDraggingIndex.current = null;\n }\n }\n });\n\n let currentPointer = useRef<number | null | undefined>(undefined);\n let onDownTrack = (e: React.UIEvent, id: number, clientX: number, clientY: number) => {\n // We only trigger track-dragging if the user clicks on the track itself and nothing is currently being dragged.\n if (trackRef.current && !props.isDisabled && state.values.every((_, i) => !state.isThumbDragging(i))) {\n let {height, width, top, left} = trackRef.current.getBoundingClientRect();\n let size = isVertical ? height : width;\n // Find the closest thumb\n const trackPosition = isVertical ? top : left;\n const clickPosition = isVertical ? clientY : clientX;\n const offset = clickPosition - trackPosition;\n let percent = offset / size;\n if (direction === 'rtl' || isVertical) {\n percent = 1 - percent;\n }\n let value = state.getPercentValue(percent);\n\n // to find the closet thumb we split the array based on the first thumb position to the \"right/end\" of the click.\n let closestThumb;\n let split = state.values.findIndex(v => value - v < 0);\n if (split === 0) { // If the index is zero then the closetThumb is the first one\n closestThumb = split;\n } else if (split === -1) { // If no index is found they've clicked past all the thumbs\n closestThumb = state.values.length - 1;\n } else {\n let lastLeft = state.values[split - 1];\n let firstRight = state.values[split];\n // Pick the last left/start thumb, unless they are stacked on top of each other, then pick the right/end one\n if (Math.abs(lastLeft - value) < Math.abs(firstRight - value)) {\n closestThumb = split - 1;\n } else {\n closestThumb = split;\n }\n }\n\n // Confirm that the found closest thumb is editable, not disabled, and move it\n if (closestThumb >= 0 && state.isThumbEditable(closestThumb)) {\n // Don't unfocus anything\n e.preventDefault();\n\n realTimeTrackDraggingIndex.current = closestThumb;\n state.setFocusedThumb(closestThumb);\n currentPointer.current = id;\n\n state.setThumbDragging(realTimeTrackDraggingIndex.current, true);\n state.setThumbValue(closestThumb, value);\n\n addGlobalListener(window, 'mouseup', onUpTrack, false);\n addGlobalListener(window, 'touchend', onUpTrack, false);\n addGlobalListener(window, 'pointerup', onUpTrack, false);\n } else {\n realTimeTrackDraggingIndex.current = null;\n }\n }\n };\n\n let onUpTrack = (e) => {\n let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n if (id === currentPointer.current) {\n if (realTimeTrackDraggingIndex.current != null) {\n state.setThumbDragging(realTimeTrackDraggingIndex.current, false);\n realTimeTrackDraggingIndex.current = null;\n }\n\n removeGlobalListener(window, 'mouseup', onUpTrack, false);\n removeGlobalListener(window, 'touchend', onUpTrack, false);\n removeGlobalListener(window, 'pointerup', onUpTrack, false);\n }\n };\n\n if ('htmlFor' in labelProps && labelProps.htmlFor) {\n // Ideally the `for` attribute should point to the first thumb, but VoiceOver on iOS\n // causes this to override the `aria-labelledby` on the thumb. This causes the first\n // thumb to only be announced as the slider label rather than its individual name as well.\n // See https://bugs.webkit.org/show_bug.cgi?id=172464.\n delete labelProps.htmlFor;\n labelProps.onClick = () => {\n // Safari does not focus <input type=\"range\"> elements when clicking on an associated <label>,\n // so do it manually. In addition, make sure we show the focus ring.\n document.getElementById(getSliderThumbId(state, 0))?.focus();\n setInteractionModality('keyboard');\n };\n }\n\n return {\n labelProps,\n // The root element of the Slider will have role=\"group\" to group together\n // all the thumb inputs in the Slider. The label of the Slider will\n // be used to label the group.\n groupProps: {\n role: 'group',\n ...fieldProps\n },\n trackProps: mergeProps({\n onMouseDown(e: React.MouseEvent) {\n if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n return;\n }\n onDownTrack(e, undefined, e.clientX, e.clientY);\n },\n onPointerDown(e: React.PointerEvent) {\n if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {\n return;\n }\n onDownTrack(e, e.pointerId, e.clientX, e.clientY);\n },\n onTouchStart(e: React.TouchEvent) { onDownTrack(e, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY); },\n style: {\n position: 'relative',\n touchAction: 'none'\n }\n }, moveProps),\n outputProps: {\n htmlFor: state.values.map((_, index) => getSliderThumbId(state, index)).join(' '),\n 'aria-live': 'off'\n }\n };\n}\n","import {SliderState} from '@react-stately/slider';\n\ninterface SliderData {\n id: string,\n 'aria-describedby'?: string,\n 'aria-details'?: string\n}\n\nexport const sliderData = new WeakMap<SliderState, SliderData>();\n\nexport function getSliderThumbId(state: SliderState, index: number) {\n let data = sliderData.get(state);\n if (!data) {\n throw new Error('Unknown slider state');\n }\n\n return `${data.id}-${index}`;\n}\n","import {AriaSliderThumbProps} from '@react-types/slider';\nimport {clamp, focusWithoutScrolling, mergeProps, useFormReset, useGlobalListeners} from '@react-aria/utils';\nimport {DOMAttributes} from '@react-types/shared';\nimport {getSliderThumbId, sliderData} from './utils';\nimport React, {ChangeEvent, InputHTMLAttributes, LabelHTMLAttributes, RefObject, useCallback, useEffect, useRef} from 'react';\nimport {SliderState} from '@react-stately/slider';\nimport {useFocusable} from '@react-aria/focus';\nimport {useKeyboard, useMove} from '@react-aria/interactions';\nimport {useLabel} from '@react-aria/label';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface SliderThumbAria {\n /** Props for the root thumb element; handles the dragging motion. */\n thumbProps: DOMAttributes,\n\n /** Props for the visually hidden range input element. */\n inputProps: InputHTMLAttributes<HTMLInputElement>,\n\n /** Props for the label element for this thumb (optional). */\n labelProps: LabelHTMLAttributes<HTMLLabelElement>,\n\n /** Whether this thumb is currently being dragged. */\n isDragging: boolean,\n /** Whether the thumb is currently focused. */\n isFocused: boolean,\n /** Whether the thumb is disabled. */\n isDisabled: boolean\n}\n\nexport interface AriaSliderThumbOptions extends AriaSliderThumbProps {\n /** A ref to the track element. */\n trackRef: RefObject<Element>,\n /** A ref to the thumb input element. */\n inputRef: RefObject<HTMLInputElement>\n}\n\n/**\n * Provides behavior and accessibility for a thumb of a slider component.\n *\n * @param opts Options for this Slider thumb.\n * @param state Slider state, created via `useSliderState`.\n */\nexport function useSliderThumb(\n opts: AriaSliderThumbOptions,\n state: SliderState\n): SliderThumbAria {\n let {\n index = 0,\n isRequired,\n validationState,\n isInvalid,\n trackRef,\n inputRef,\n orientation = state.orientation,\n name\n } = opts;\n\n let isDisabled = opts.isDisabled || state.isDisabled;\n let isVertical = orientation === 'vertical';\n\n let {direction} = useLocale();\n let {addGlobalListener, removeGlobalListener} = useGlobalListeners();\n\n let data = sliderData.get(state);\n const {labelProps, fieldProps} = useLabel({\n ...opts,\n id: getSliderThumbId(state, index),\n 'aria-labelledby': `${data.id} ${opts['aria-labelledby'] ?? ''}`.trim()\n });\n\n const value = state.values[index];\n\n const focusInput = useCallback(() => {\n if (inputRef.current) {\n focusWithoutScrolling(inputRef.current);\n }\n }, [inputRef]);\n\n const isFocused = state.focusedThumb === index;\n\n useEffect(() => {\n if (isFocused) {\n focusInput();\n }\n }, [isFocused, focusInput]);\n\n let reverseX = direction === 'rtl';\n let currentPosition = useRef<number>(null);\n\n let {keyboardProps} = useKeyboard({\n onKeyDown(e) {\n let {\n getThumbMaxValue,\n getThumbMinValue,\n decrementThumb,\n incrementThumb,\n setThumbValue,\n setThumbDragging,\n pageSize\n } = state;\n // these are the cases that useMove or useSlider don't handle\n if (!/^(PageUp|PageDown|Home|End)$/.test(e.key)) {\n e.continuePropagation();\n return;\n }\n // same handling as useMove, stopPropagation to prevent useSlider from handling the event as well.\n e.preventDefault();\n // remember to set this so that onChangeEnd is fired\n setThumbDragging(index, true);\n switch (e.key) {\n case 'PageUp':\n incrementThumb(index, pageSize);\n break;\n case 'PageDown':\n decrementThumb(index, pageSize);\n break;\n case 'Home':\n setThumbValue(index, getThumbMinValue(index));\n break;\n case 'End':\n setThumbValue(index, getThumbMaxValue(index));\n break;\n }\n setThumbDragging(index, false);\n }\n });\n\n let {moveProps} = useMove({\n onMoveStart() {\n currentPosition.current = null;\n state.setThumbDragging(index, true);\n },\n onMove({deltaX, deltaY, pointerType, shiftKey}) {\n const {\n getThumbPercent,\n setThumbPercent,\n decrementThumb,\n incrementThumb,\n step,\n pageSize\n } = state;\n let {width, height} = trackRef.current.getBoundingClientRect();\n let size = isVertical ? height : width;\n\n if (currentPosition.current == null) {\n currentPosition.current = getThumbPercent(index) * size;\n }\n if (pointerType === 'keyboard') {\n if ((deltaX > 0 && reverseX) || (deltaX < 0 && !reverseX) || deltaY > 0) {\n decrementThumb(index, shiftKey ? pageSize : step);\n } else {\n incrementThumb(index, shiftKey ? pageSize : step);\n }\n } else {\n let delta = isVertical ? deltaY : deltaX;\n if (isVertical || reverseX) {\n delta = -delta;\n }\n\n currentPosition.current += delta;\n setThumbPercent(index, clamp(currentPosition.current / size, 0, 1));\n }\n },\n onMoveEnd() {\n state.setThumbDragging(index, false);\n }\n });\n\n // Immediately register editability with the state\n state.setThumbEditable(index, !isDisabled);\n\n const {focusableProps} = useFocusable(\n mergeProps(opts, {\n onFocus: () => state.setFocusedThumb(index),\n onBlur: () => state.setFocusedThumb(undefined)\n }),\n inputRef\n );\n\n let currentPointer = useRef<number | undefined>(undefined);\n let onDown = (id?: number) => {\n focusInput();\n currentPointer.current = id;\n state.setThumbDragging(index, true);\n\n addGlobalListener(window, 'mouseup', onUp, false);\n addGlobalListener(window, 'touchend', onUp, false);\n addGlobalListener(window, 'pointerup', onUp, false);\n\n };\n\n let onUp = (e) => {\n let id = e.pointerId ?? e.changedTouches?.[0].identifier;\n if (id === currentPointer.current) {\n focusInput();\n state.setThumbDragging(index, false);\n removeGlobalListener(window, 'mouseup', onUp, false);\n removeGlobalListener(window, 'touchend', onUp, false);\n removeGlobalListener(window, 'pointerup', onUp, false);\n }\n };\n\n let thumbPosition = state.getThumbPercent(index);\n if (isVertical || direction === 'rtl') {\n thumbPosition = 1 - thumbPosition;\n }\n\n let interactions = !isDisabled ? mergeProps(\n keyboardProps,\n moveProps,\n {\n onMouseDown: (e: React.MouseEvent) => {\n if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n return;\n }\n onDown();\n },\n onPointerDown: (e: React.PointerEvent) => {\n if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {\n return;\n }\n onDown(e.pointerId);\n },\n onTouchStart: (e: React.TouchEvent) => {onDown(e.changedTouches[0].identifier);}\n }\n ) : {};\n\n useFormReset(inputRef, value, (v) => {\n state.setThumbValue(index, v);\n });\n\n // We install mouse handlers for the drag motion on the thumb div, but\n // not the key handler for moving the thumb with the slider. Instead,\n // we focus the range input, and let the browser handle the keyboard\n // interactions; we then listen to input's onChange to update state.\n return {\n inputProps: mergeProps(focusableProps, fieldProps, {\n type: 'range',\n tabIndex: !isDisabled ? 0 : undefined,\n min: state.getThumbMinValue(index),\n max: state.getThumbMaxValue(index),\n step: state.step,\n value: value,\n name,\n disabled: isDisabled,\n 'aria-orientation': orientation,\n 'aria-valuetext': state.getThumbValueLabel(index),\n 'aria-required': isRequired || undefined,\n 'aria-invalid': isInvalid || validationState === 'invalid' || undefined,\n 'aria-errormessage': opts['aria-errormessage'],\n 'aria-describedby': [data['aria-describedby'], opts['aria-describedby']].filter(Boolean).join(' '),\n 'aria-details': [data['aria-details'], opts['aria-details']].filter(Boolean).join(' '),\n onChange: (e: ChangeEvent<HTMLInputElement>) => {\n state.setThumbValue(index, parseFloat(e.target.value));\n }\n }),\n thumbProps: {\n ...interactions,\n style: {\n position: 'absolute',\n [isVertical ? 'top' : 'left']: `${thumbPosition * 100}%`,\n transform: 'translate(-50%, -50%)',\n touchAction: 'none'\n }\n },\n labelProps,\n isDragging: state.isThumbDragging(index),\n isDisabled,\n isFocused\n };\n}\n"],"names":[],"version":3,"file":"module.js.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/slider",
|
|
3
|
-
"version": "3.7.1-nightly.
|
|
3
|
+
"version": "3.7.1-nightly.4157+633bb4fb6",
|
|
4
4
|
"description": "Slider",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -22,16 +22,16 @@
|
|
|
22
22
|
"url": "https://github.com/adobe/react-spectrum"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@react-aria/focus": "3.0.0-nightly.
|
|
26
|
-
"@react-aria/i18n": "3.0.0-nightly.
|
|
27
|
-
"@react-aria/interactions": "3.0.0-nightly.
|
|
28
|
-
"@react-aria/label": "3.0.0-nightly.
|
|
29
|
-
"@react-aria/utils": "3.0.0-nightly.
|
|
30
|
-
"@react-stately/radio": "3.0.0-nightly.
|
|
31
|
-
"@react-stately/slider": "3.4.3-nightly.
|
|
32
|
-
"@react-types/radio": "3.0.0-nightly.
|
|
33
|
-
"@react-types/shared": "3.0.0-nightly.
|
|
34
|
-
"@react-types/slider": "3.6.2-nightly.
|
|
25
|
+
"@react-aria/focus": "3.0.0-nightly.2448+633bb4fb6",
|
|
26
|
+
"@react-aria/i18n": "3.0.0-nightly.2448+633bb4fb6",
|
|
27
|
+
"@react-aria/interactions": "3.0.0-nightly.2448+633bb4fb6",
|
|
28
|
+
"@react-aria/label": "3.0.0-nightly.2448+633bb4fb6",
|
|
29
|
+
"@react-aria/utils": "3.0.0-nightly.2448+633bb4fb6",
|
|
30
|
+
"@react-stately/radio": "3.0.0-nightly.2448+633bb4fb6",
|
|
31
|
+
"@react-stately/slider": "3.4.3-nightly.4157+633bb4fb6",
|
|
32
|
+
"@react-types/radio": "3.0.0-nightly.2448+633bb4fb6",
|
|
33
|
+
"@react-types/shared": "3.0.0-nightly.2448+633bb4fb6",
|
|
34
|
+
"@react-types/slider": "3.6.2-nightly.4157+633bb4fb6",
|
|
35
35
|
"@swc/helpers": "^0.5.0"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
@@ -40,5 +40,5 @@
|
|
|
40
40
|
"publishConfig": {
|
|
41
41
|
"access": "public"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "633bb4fb6cc205b9911a21fb81a7a70c662ec0ce"
|
|
44
44
|
}
|