@react-aria/slider 3.7.8-nightly.4624 → 3.7.9-nightly.4629
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/useSlider.main.js +19 -19
- package/dist/useSlider.mjs +19 -19
- package/dist/useSlider.module.js +19 -19
- package/dist/useSliderThumb.main.js +33 -33
- package/dist/useSliderThumb.mjs +33 -33
- package/dist/useSliderThumb.module.js +33 -33
- package/dist/utils.main.js +1 -1
- package/dist/utils.mjs +1 -1
- package/dist/utils.module.js +1 -1
- package/package.json +10 -10
package/dist/useSlider.main.js
CHANGED
|
@@ -29,13 +29,13 @@ $parcel$export(module.exports, "useSlider", () => $481f97d830e3ede6$export$56b2c
|
|
|
29
29
|
|
|
30
30
|
function $481f97d830e3ede6$export$56b2c08e277f365(props, state, trackRef) {
|
|
31
31
|
let { labelProps: labelProps, fieldProps: fieldProps } = (0, $eVqG0$reactarialabel.useLabel)(props);
|
|
32
|
-
let isVertical = props.orientation ===
|
|
32
|
+
let isVertical = props.orientation === 'vertical';
|
|
33
33
|
var _labelProps_id;
|
|
34
34
|
// Attach id of the label to the state so it can be accessed by useSliderThumb.
|
|
35
35
|
(0, $28db8d634be2fa58$exports.sliderData).set(state, {
|
|
36
36
|
id: (_labelProps_id = labelProps.id) !== null && _labelProps_id !== void 0 ? _labelProps_id : fieldProps.id,
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
'aria-describedby': props['aria-describedby'],
|
|
38
|
+
'aria-details': props['aria-details']
|
|
39
39
|
});
|
|
40
40
|
let { direction: direction } = (0, $eVqG0$reactariai18n.useLocale)();
|
|
41
41
|
let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $eVqG0$reactariautils.useGlobalListeners)();
|
|
@@ -44,7 +44,7 @@ function $481f97d830e3ede6$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
44
44
|
// Here, we keep track of which index is the "closest" to the drag start point.
|
|
45
45
|
// It is set onMouseDown/onTouchDown; see trackProps below.
|
|
46
46
|
const realTimeTrackDraggingIndex = (0, $eVqG0$react.useRef)(null);
|
|
47
|
-
const reverseX = direction ===
|
|
47
|
+
const reverseX = direction === 'rtl';
|
|
48
48
|
const currentPosition = (0, $eVqG0$react.useRef)(null);
|
|
49
49
|
const { moveProps: moveProps } = (0, $eVqG0$reactariainteractions.useMove)({
|
|
50
50
|
onMoveStart () {
|
|
@@ -80,7 +80,7 @@ function $481f97d830e3ede6$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
80
80
|
const clickPosition = isVertical ? clientY : clientX;
|
|
81
81
|
const offset = clickPosition - trackPosition;
|
|
82
82
|
let percent = offset / size;
|
|
83
|
-
if (direction ===
|
|
83
|
+
if (direction === 'rtl' || isVertical) percent = 1 - percent;
|
|
84
84
|
let value = state.getPercentValue(percent);
|
|
85
85
|
// to find the closet thumb we split the array based on the first thumb position to the "right/end" of the click.
|
|
86
86
|
let closestThumb;
|
|
@@ -103,9 +103,9 @@ function $481f97d830e3ede6$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
103
103
|
currentPointer.current = id;
|
|
104
104
|
state.setThumbDragging(realTimeTrackDraggingIndex.current, true);
|
|
105
105
|
state.setThumbValue(closestThumb, value);
|
|
106
|
-
addGlobalListener(window,
|
|
107
|
-
addGlobalListener(window,
|
|
108
|
-
addGlobalListener(window,
|
|
106
|
+
addGlobalListener(window, 'mouseup', onUpTrack, false);
|
|
107
|
+
addGlobalListener(window, 'touchend', onUpTrack, false);
|
|
108
|
+
addGlobalListener(window, 'pointerup', onUpTrack, false);
|
|
109
109
|
} else realTimeTrackDraggingIndex.current = null;
|
|
110
110
|
}
|
|
111
111
|
};
|
|
@@ -118,12 +118,12 @@ function $481f97d830e3ede6$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
118
118
|
state.setThumbDragging(realTimeTrackDraggingIndex.current, false);
|
|
119
119
|
realTimeTrackDraggingIndex.current = null;
|
|
120
120
|
}
|
|
121
|
-
removeGlobalListener(window,
|
|
122
|
-
removeGlobalListener(window,
|
|
123
|
-
removeGlobalListener(window,
|
|
121
|
+
removeGlobalListener(window, 'mouseup', onUpTrack, false);
|
|
122
|
+
removeGlobalListener(window, 'touchend', onUpTrack, false);
|
|
123
|
+
removeGlobalListener(window, 'pointerup', onUpTrack, false);
|
|
124
124
|
}
|
|
125
125
|
};
|
|
126
|
-
if (
|
|
126
|
+
if ('htmlFor' in labelProps && labelProps.htmlFor) {
|
|
127
127
|
// Ideally the `for` attribute should point to the first thumb, but VoiceOver on iOS
|
|
128
128
|
// causes this to override the `aria-labelledby` on the thumb. This causes the first
|
|
129
129
|
// thumb to only be announced as the slider label rather than its individual name as well.
|
|
@@ -134,7 +134,7 @@ function $481f97d830e3ede6$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
134
134
|
// so do it manually. In addition, make sure we show the focus ring.
|
|
135
135
|
_document_getElementById;
|
|
136
136
|
(_document_getElementById = document.getElementById((0, $28db8d634be2fa58$exports.getSliderThumbId)(state, 0))) === null || _document_getElementById === void 0 ? void 0 : _document_getElementById.focus();
|
|
137
|
-
(0, $eVqG0$reactariainteractions.setInteractionModality)(
|
|
137
|
+
(0, $eVqG0$reactariainteractions.setInteractionModality)('keyboard');
|
|
138
138
|
};
|
|
139
139
|
}
|
|
140
140
|
return {
|
|
@@ -143,7 +143,7 @@ function $481f97d830e3ede6$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
143
143
|
// all the thumb inputs in the Slider. The label of the Slider will
|
|
144
144
|
// be used to label the group.
|
|
145
145
|
groupProps: {
|
|
146
|
-
role:
|
|
146
|
+
role: 'group',
|
|
147
147
|
...fieldProps
|
|
148
148
|
},
|
|
149
149
|
trackProps: (0, $eVqG0$reactariautils.mergeProps)({
|
|
@@ -152,20 +152,20 @@ function $481f97d830e3ede6$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
152
152
|
onDownTrack(e, undefined, e.clientX, e.clientY);
|
|
153
153
|
},
|
|
154
154
|
onPointerDown (e) {
|
|
155
|
-
if (e.pointerType ===
|
|
155
|
+
if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
|
|
156
156
|
onDownTrack(e, e.pointerId, e.clientX, e.clientY);
|
|
157
157
|
},
|
|
158
158
|
onTouchStart (e) {
|
|
159
159
|
onDownTrack(e, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY);
|
|
160
160
|
},
|
|
161
161
|
style: {
|
|
162
|
-
position:
|
|
163
|
-
touchAction:
|
|
162
|
+
position: 'relative',
|
|
163
|
+
touchAction: 'none'
|
|
164
164
|
}
|
|
165
165
|
}, moveProps),
|
|
166
166
|
outputProps: {
|
|
167
|
-
htmlFor: state.values.map((_, index)=>(0, $28db8d634be2fa58$exports.getSliderThumbId)(state, index)).join(
|
|
168
|
-
|
|
167
|
+
htmlFor: state.values.map((_, index)=>(0, $28db8d634be2fa58$exports.getSliderThumbId)(state, index)).join(' '),
|
|
168
|
+
'aria-live': 'off'
|
|
169
169
|
}
|
|
170
170
|
};
|
|
171
171
|
}
|
package/dist/useSlider.mjs
CHANGED
|
@@ -23,13 +23,13 @@ import {useLocale as $468t2$useLocale} from "@react-aria/i18n";
|
|
|
23
23
|
|
|
24
24
|
function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
25
25
|
let { labelProps: labelProps, fieldProps: fieldProps } = (0, $468t2$useLabel)(props);
|
|
26
|
-
let isVertical = props.orientation ===
|
|
26
|
+
let isVertical = props.orientation === 'vertical';
|
|
27
27
|
var _labelProps_id;
|
|
28
28
|
// Attach id of the label to the state so it can be accessed by useSliderThumb.
|
|
29
29
|
(0, $aa519ee6cf463259$export$d6c8d9636a3dc49c).set(state, {
|
|
30
30
|
id: (_labelProps_id = labelProps.id) !== null && _labelProps_id !== void 0 ? _labelProps_id : fieldProps.id,
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
'aria-describedby': props['aria-describedby'],
|
|
32
|
+
'aria-details': props['aria-details']
|
|
33
33
|
});
|
|
34
34
|
let { direction: direction } = (0, $468t2$useLocale)();
|
|
35
35
|
let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $468t2$useGlobalListeners)();
|
|
@@ -38,7 +38,7 @@ function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
38
38
|
// Here, we keep track of which index is the "closest" to the drag start point.
|
|
39
39
|
// It is set onMouseDown/onTouchDown; see trackProps below.
|
|
40
40
|
const realTimeTrackDraggingIndex = (0, $468t2$useRef)(null);
|
|
41
|
-
const reverseX = direction ===
|
|
41
|
+
const reverseX = direction === 'rtl';
|
|
42
42
|
const currentPosition = (0, $468t2$useRef)(null);
|
|
43
43
|
const { moveProps: moveProps } = (0, $468t2$useMove)({
|
|
44
44
|
onMoveStart () {
|
|
@@ -74,7 +74,7 @@ function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
74
74
|
const clickPosition = isVertical ? clientY : clientX;
|
|
75
75
|
const offset = clickPosition - trackPosition;
|
|
76
76
|
let percent = offset / size;
|
|
77
|
-
if (direction ===
|
|
77
|
+
if (direction === 'rtl' || isVertical) percent = 1 - percent;
|
|
78
78
|
let value = state.getPercentValue(percent);
|
|
79
79
|
// to find the closet thumb we split the array based on the first thumb position to the "right/end" of the click.
|
|
80
80
|
let closestThumb;
|
|
@@ -97,9 +97,9 @@ function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
97
97
|
currentPointer.current = id;
|
|
98
98
|
state.setThumbDragging(realTimeTrackDraggingIndex.current, true);
|
|
99
99
|
state.setThumbValue(closestThumb, value);
|
|
100
|
-
addGlobalListener(window,
|
|
101
|
-
addGlobalListener(window,
|
|
102
|
-
addGlobalListener(window,
|
|
100
|
+
addGlobalListener(window, 'mouseup', onUpTrack, false);
|
|
101
|
+
addGlobalListener(window, 'touchend', onUpTrack, false);
|
|
102
|
+
addGlobalListener(window, 'pointerup', onUpTrack, false);
|
|
103
103
|
} else realTimeTrackDraggingIndex.current = null;
|
|
104
104
|
}
|
|
105
105
|
};
|
|
@@ -112,12 +112,12 @@ function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
112
112
|
state.setThumbDragging(realTimeTrackDraggingIndex.current, false);
|
|
113
113
|
realTimeTrackDraggingIndex.current = null;
|
|
114
114
|
}
|
|
115
|
-
removeGlobalListener(window,
|
|
116
|
-
removeGlobalListener(window,
|
|
117
|
-
removeGlobalListener(window,
|
|
115
|
+
removeGlobalListener(window, 'mouseup', onUpTrack, false);
|
|
116
|
+
removeGlobalListener(window, 'touchend', onUpTrack, false);
|
|
117
|
+
removeGlobalListener(window, 'pointerup', onUpTrack, false);
|
|
118
118
|
}
|
|
119
119
|
};
|
|
120
|
-
if (
|
|
120
|
+
if ('htmlFor' in labelProps && labelProps.htmlFor) {
|
|
121
121
|
// Ideally the `for` attribute should point to the first thumb, but VoiceOver on iOS
|
|
122
122
|
// causes this to override the `aria-labelledby` on the thumb. This causes the first
|
|
123
123
|
// thumb to only be announced as the slider label rather than its individual name as well.
|
|
@@ -128,7 +128,7 @@ function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
128
128
|
// so do it manually. In addition, make sure we show the focus ring.
|
|
129
129
|
_document_getElementById;
|
|
130
130
|
(_document_getElementById = document.getElementById((0, $aa519ee6cf463259$export$68e648cbec363a18)(state, 0))) === null || _document_getElementById === void 0 ? void 0 : _document_getElementById.focus();
|
|
131
|
-
(0, $468t2$setInteractionModality)(
|
|
131
|
+
(0, $468t2$setInteractionModality)('keyboard');
|
|
132
132
|
};
|
|
133
133
|
}
|
|
134
134
|
return {
|
|
@@ -137,7 +137,7 @@ function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
137
137
|
// all the thumb inputs in the Slider. The label of the Slider will
|
|
138
138
|
// be used to label the group.
|
|
139
139
|
groupProps: {
|
|
140
|
-
role:
|
|
140
|
+
role: 'group',
|
|
141
141
|
...fieldProps
|
|
142
142
|
},
|
|
143
143
|
trackProps: (0, $468t2$mergeProps)({
|
|
@@ -146,20 +146,20 @@ function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
146
146
|
onDownTrack(e, undefined, e.clientX, e.clientY);
|
|
147
147
|
},
|
|
148
148
|
onPointerDown (e) {
|
|
149
|
-
if (e.pointerType ===
|
|
149
|
+
if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
|
|
150
150
|
onDownTrack(e, e.pointerId, e.clientX, e.clientY);
|
|
151
151
|
},
|
|
152
152
|
onTouchStart (e) {
|
|
153
153
|
onDownTrack(e, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY);
|
|
154
154
|
},
|
|
155
155
|
style: {
|
|
156
|
-
position:
|
|
157
|
-
touchAction:
|
|
156
|
+
position: 'relative',
|
|
157
|
+
touchAction: 'none'
|
|
158
158
|
}
|
|
159
159
|
}, moveProps),
|
|
160
160
|
outputProps: {
|
|
161
|
-
htmlFor: state.values.map((_, index)=>(0, $aa519ee6cf463259$export$68e648cbec363a18)(state, index)).join(
|
|
162
|
-
|
|
161
|
+
htmlFor: state.values.map((_, index)=>(0, $aa519ee6cf463259$export$68e648cbec363a18)(state, index)).join(' '),
|
|
162
|
+
'aria-live': 'off'
|
|
163
163
|
}
|
|
164
164
|
};
|
|
165
165
|
}
|
package/dist/useSlider.module.js
CHANGED
|
@@ -23,13 +23,13 @@ import {useLocale as $468t2$useLocale} from "@react-aria/i18n";
|
|
|
23
23
|
|
|
24
24
|
function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
25
25
|
let { labelProps: labelProps, fieldProps: fieldProps } = (0, $468t2$useLabel)(props);
|
|
26
|
-
let isVertical = props.orientation ===
|
|
26
|
+
let isVertical = props.orientation === 'vertical';
|
|
27
27
|
var _labelProps_id;
|
|
28
28
|
// Attach id of the label to the state so it can be accessed by useSliderThumb.
|
|
29
29
|
(0, $aa519ee6cf463259$export$d6c8d9636a3dc49c).set(state, {
|
|
30
30
|
id: (_labelProps_id = labelProps.id) !== null && _labelProps_id !== void 0 ? _labelProps_id : fieldProps.id,
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
'aria-describedby': props['aria-describedby'],
|
|
32
|
+
'aria-details': props['aria-details']
|
|
33
33
|
});
|
|
34
34
|
let { direction: direction } = (0, $468t2$useLocale)();
|
|
35
35
|
let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $468t2$useGlobalListeners)();
|
|
@@ -38,7 +38,7 @@ function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
38
38
|
// Here, we keep track of which index is the "closest" to the drag start point.
|
|
39
39
|
// It is set onMouseDown/onTouchDown; see trackProps below.
|
|
40
40
|
const realTimeTrackDraggingIndex = (0, $468t2$useRef)(null);
|
|
41
|
-
const reverseX = direction ===
|
|
41
|
+
const reverseX = direction === 'rtl';
|
|
42
42
|
const currentPosition = (0, $468t2$useRef)(null);
|
|
43
43
|
const { moveProps: moveProps } = (0, $468t2$useMove)({
|
|
44
44
|
onMoveStart () {
|
|
@@ -74,7 +74,7 @@ function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
74
74
|
const clickPosition = isVertical ? clientY : clientX;
|
|
75
75
|
const offset = clickPosition - trackPosition;
|
|
76
76
|
let percent = offset / size;
|
|
77
|
-
if (direction ===
|
|
77
|
+
if (direction === 'rtl' || isVertical) percent = 1 - percent;
|
|
78
78
|
let value = state.getPercentValue(percent);
|
|
79
79
|
// to find the closet thumb we split the array based on the first thumb position to the "right/end" of the click.
|
|
80
80
|
let closestThumb;
|
|
@@ -97,9 +97,9 @@ function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
97
97
|
currentPointer.current = id;
|
|
98
98
|
state.setThumbDragging(realTimeTrackDraggingIndex.current, true);
|
|
99
99
|
state.setThumbValue(closestThumb, value);
|
|
100
|
-
addGlobalListener(window,
|
|
101
|
-
addGlobalListener(window,
|
|
102
|
-
addGlobalListener(window,
|
|
100
|
+
addGlobalListener(window, 'mouseup', onUpTrack, false);
|
|
101
|
+
addGlobalListener(window, 'touchend', onUpTrack, false);
|
|
102
|
+
addGlobalListener(window, 'pointerup', onUpTrack, false);
|
|
103
103
|
} else realTimeTrackDraggingIndex.current = null;
|
|
104
104
|
}
|
|
105
105
|
};
|
|
@@ -112,12 +112,12 @@ function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
112
112
|
state.setThumbDragging(realTimeTrackDraggingIndex.current, false);
|
|
113
113
|
realTimeTrackDraggingIndex.current = null;
|
|
114
114
|
}
|
|
115
|
-
removeGlobalListener(window,
|
|
116
|
-
removeGlobalListener(window,
|
|
117
|
-
removeGlobalListener(window,
|
|
115
|
+
removeGlobalListener(window, 'mouseup', onUpTrack, false);
|
|
116
|
+
removeGlobalListener(window, 'touchend', onUpTrack, false);
|
|
117
|
+
removeGlobalListener(window, 'pointerup', onUpTrack, false);
|
|
118
118
|
}
|
|
119
119
|
};
|
|
120
|
-
if (
|
|
120
|
+
if ('htmlFor' in labelProps && labelProps.htmlFor) {
|
|
121
121
|
// Ideally the `for` attribute should point to the first thumb, but VoiceOver on iOS
|
|
122
122
|
// causes this to override the `aria-labelledby` on the thumb. This causes the first
|
|
123
123
|
// thumb to only be announced as the slider label rather than its individual name as well.
|
|
@@ -128,7 +128,7 @@ function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
128
128
|
// so do it manually. In addition, make sure we show the focus ring.
|
|
129
129
|
_document_getElementById;
|
|
130
130
|
(_document_getElementById = document.getElementById((0, $aa519ee6cf463259$export$68e648cbec363a18)(state, 0))) === null || _document_getElementById === void 0 ? void 0 : _document_getElementById.focus();
|
|
131
|
-
(0, $468t2$setInteractionModality)(
|
|
131
|
+
(0, $468t2$setInteractionModality)('keyboard');
|
|
132
132
|
};
|
|
133
133
|
}
|
|
134
134
|
return {
|
|
@@ -137,7 +137,7 @@ function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
137
137
|
// all the thumb inputs in the Slider. The label of the Slider will
|
|
138
138
|
// be used to label the group.
|
|
139
139
|
groupProps: {
|
|
140
|
-
role:
|
|
140
|
+
role: 'group',
|
|
141
141
|
...fieldProps
|
|
142
142
|
},
|
|
143
143
|
trackProps: (0, $468t2$mergeProps)({
|
|
@@ -146,20 +146,20 @@ function $bcca50147b47f54d$export$56b2c08e277f365(props, state, trackRef) {
|
|
|
146
146
|
onDownTrack(e, undefined, e.clientX, e.clientY);
|
|
147
147
|
},
|
|
148
148
|
onPointerDown (e) {
|
|
149
|
-
if (e.pointerType ===
|
|
149
|
+
if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
|
|
150
150
|
onDownTrack(e, e.pointerId, e.clientX, e.clientY);
|
|
151
151
|
},
|
|
152
152
|
onTouchStart (e) {
|
|
153
153
|
onDownTrack(e, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY);
|
|
154
154
|
},
|
|
155
155
|
style: {
|
|
156
|
-
position:
|
|
157
|
-
touchAction:
|
|
156
|
+
position: 'relative',
|
|
157
|
+
touchAction: 'none'
|
|
158
158
|
}
|
|
159
159
|
}, moveProps),
|
|
160
160
|
outputProps: {
|
|
161
|
-
htmlFor: state.values.map((_, index)=>(0, $aa519ee6cf463259$export$68e648cbec363a18)(state, index)).join(
|
|
162
|
-
|
|
161
|
+
htmlFor: state.values.map((_, index)=>(0, $aa519ee6cf463259$export$68e648cbec363a18)(state, index)).join(' '),
|
|
162
|
+
'aria-live': 'off'
|
|
163
163
|
}
|
|
164
164
|
};
|
|
165
165
|
}
|
|
@@ -22,7 +22,7 @@ $parcel$export(module.exports, "useSliderThumb", () => $5eb806b626475377$export$
|
|
|
22
22
|
function $5eb806b626475377$export$8d15029008292ae(opts, state) {
|
|
23
23
|
let { index: index = 0, isRequired: isRequired, validationState: validationState, isInvalid: isInvalid, trackRef: trackRef, inputRef: inputRef, orientation: orientation = state.orientation, name: name } = opts;
|
|
24
24
|
let isDisabled = opts.isDisabled || state.isDisabled;
|
|
25
|
-
let isVertical = orientation ===
|
|
25
|
+
let isVertical = orientation === 'vertical';
|
|
26
26
|
let { direction: direction } = (0, $cqSUd$reactariai18n.useLocale)();
|
|
27
27
|
let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $cqSUd$reactariautils.useGlobalListeners)();
|
|
28
28
|
let data = (0, $28db8d634be2fa58$exports.sliderData).get(state);
|
|
@@ -30,7 +30,7 @@ function $5eb806b626475377$export$8d15029008292ae(opts, state) {
|
|
|
30
30
|
const { labelProps: labelProps, fieldProps: fieldProps } = (0, $cqSUd$reactarialabel.useLabel)({
|
|
31
31
|
...opts,
|
|
32
32
|
id: (0, $28db8d634be2fa58$exports.getSliderThumbId)(state, index),
|
|
33
|
-
|
|
33
|
+
'aria-labelledby': `${data.id} ${(_opts_arialabelledby = opts['aria-labelledby']) !== null && _opts_arialabelledby !== void 0 ? _opts_arialabelledby : ''}`.trim()
|
|
34
34
|
});
|
|
35
35
|
const value = state.values[index];
|
|
36
36
|
const focusInput = (0, $cqSUd$react.useCallback)(()=>{
|
|
@@ -45,7 +45,7 @@ function $5eb806b626475377$export$8d15029008292ae(opts, state) {
|
|
|
45
45
|
isFocused,
|
|
46
46
|
focusInput
|
|
47
47
|
]);
|
|
48
|
-
let reverseX = direction ===
|
|
48
|
+
let reverseX = direction === 'rtl';
|
|
49
49
|
let currentPosition = (0, $cqSUd$react.useRef)(null);
|
|
50
50
|
let { keyboardProps: keyboardProps } = (0, $cqSUd$reactariainteractions.useKeyboard)({
|
|
51
51
|
onKeyDown (e) {
|
|
@@ -60,16 +60,16 @@ function $5eb806b626475377$export$8d15029008292ae(opts, state) {
|
|
|
60
60
|
// remember to set this so that onChangeEnd is fired
|
|
61
61
|
setThumbDragging(index, true);
|
|
62
62
|
switch(e.key){
|
|
63
|
-
case
|
|
63
|
+
case 'PageUp':
|
|
64
64
|
incrementThumb(index, pageSize);
|
|
65
65
|
break;
|
|
66
|
-
case
|
|
66
|
+
case 'PageDown':
|
|
67
67
|
decrementThumb(index, pageSize);
|
|
68
68
|
break;
|
|
69
|
-
case
|
|
69
|
+
case 'Home':
|
|
70
70
|
setThumbValue(index, getThumbMinValue(index));
|
|
71
71
|
break;
|
|
72
|
-
case
|
|
72
|
+
case 'End':
|
|
73
73
|
setThumbValue(index, getThumbMaxValue(index));
|
|
74
74
|
break;
|
|
75
75
|
}
|
|
@@ -86,7 +86,7 @@ function $5eb806b626475377$export$8d15029008292ae(opts, state) {
|
|
|
86
86
|
let { width: width, height: height } = trackRef.current.getBoundingClientRect();
|
|
87
87
|
let size = isVertical ? height : width;
|
|
88
88
|
if (currentPosition.current == null) currentPosition.current = getThumbPercent(index) * size;
|
|
89
|
-
if (pointerType ===
|
|
89
|
+
if (pointerType === 'keyboard') {
|
|
90
90
|
if (deltaX > 0 && reverseX || deltaX < 0 && !reverseX || deltaY > 0) decrementThumb(index, shiftKey ? pageSize : step);
|
|
91
91
|
else incrementThumb(index, shiftKey ? pageSize : step);
|
|
92
92
|
} else {
|
|
@@ -111,9 +111,9 @@ function $5eb806b626475377$export$8d15029008292ae(opts, state) {
|
|
|
111
111
|
focusInput();
|
|
112
112
|
currentPointer.current = id;
|
|
113
113
|
state.setThumbDragging(index, true);
|
|
114
|
-
addGlobalListener(window,
|
|
115
|
-
addGlobalListener(window,
|
|
116
|
-
addGlobalListener(window,
|
|
114
|
+
addGlobalListener(window, 'mouseup', onUp, false);
|
|
115
|
+
addGlobalListener(window, 'touchend', onUp, false);
|
|
116
|
+
addGlobalListener(window, 'pointerup', onUp, false);
|
|
117
117
|
};
|
|
118
118
|
let onUp = (e)=>{
|
|
119
119
|
var _e_changedTouches;
|
|
@@ -122,13 +122,13 @@ function $5eb806b626475377$export$8d15029008292ae(opts, state) {
|
|
|
122
122
|
if (id === currentPointer.current) {
|
|
123
123
|
focusInput();
|
|
124
124
|
state.setThumbDragging(index, false);
|
|
125
|
-
removeGlobalListener(window,
|
|
126
|
-
removeGlobalListener(window,
|
|
127
|
-
removeGlobalListener(window,
|
|
125
|
+
removeGlobalListener(window, 'mouseup', onUp, false);
|
|
126
|
+
removeGlobalListener(window, 'touchend', onUp, false);
|
|
127
|
+
removeGlobalListener(window, 'pointerup', onUp, false);
|
|
128
128
|
}
|
|
129
129
|
};
|
|
130
130
|
let thumbPosition = state.getThumbPercent(index);
|
|
131
|
-
if (isVertical || direction ===
|
|
131
|
+
if (isVertical || direction === 'rtl') thumbPosition = 1 - thumbPosition;
|
|
132
132
|
let interactions = !isDisabled ? (0, $cqSUd$reactariautils.mergeProps)(keyboardProps, moveProps, {
|
|
133
133
|
onMouseDown: (e)=>{
|
|
134
134
|
if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
|
|
@@ -151,7 +151,7 @@ function $5eb806b626475377$export$8d15029008292ae(opts, state) {
|
|
|
151
151
|
// interactions; we then listen to input's onChange to update state.
|
|
152
152
|
return {
|
|
153
153
|
inputProps: (0, $cqSUd$reactariautils.mergeProps)(focusableProps, fieldProps, {
|
|
154
|
-
type:
|
|
154
|
+
type: 'range',
|
|
155
155
|
tabIndex: !isDisabled ? 0 : undefined,
|
|
156
156
|
min: state.getThumbMinValue(index),
|
|
157
157
|
max: state.getThumbMaxValue(index),
|
|
@@ -159,19 +159,19 @@ function $5eb806b626475377$export$8d15029008292ae(opts, state) {
|
|
|
159
159
|
value: value,
|
|
160
160
|
name: name,
|
|
161
161
|
disabled: isDisabled,
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
data[
|
|
169
|
-
opts[
|
|
170
|
-
].filter(Boolean).join(
|
|
171
|
-
|
|
172
|
-
data[
|
|
173
|
-
opts[
|
|
174
|
-
].filter(Boolean).join(
|
|
162
|
+
'aria-orientation': orientation,
|
|
163
|
+
'aria-valuetext': state.getThumbValueLabel(index),
|
|
164
|
+
'aria-required': isRequired || undefined,
|
|
165
|
+
'aria-invalid': isInvalid || validationState === 'invalid' || undefined,
|
|
166
|
+
'aria-errormessage': opts['aria-errormessage'],
|
|
167
|
+
'aria-describedby': [
|
|
168
|
+
data['aria-describedby'],
|
|
169
|
+
opts['aria-describedby']
|
|
170
|
+
].filter(Boolean).join(' '),
|
|
171
|
+
'aria-details': [
|
|
172
|
+
data['aria-details'],
|
|
173
|
+
opts['aria-details']
|
|
174
|
+
].filter(Boolean).join(' '),
|
|
175
175
|
onChange: (e)=>{
|
|
176
176
|
state.setThumbValue(index, parseFloat(e.target.value));
|
|
177
177
|
}
|
|
@@ -179,10 +179,10 @@ function $5eb806b626475377$export$8d15029008292ae(opts, state) {
|
|
|
179
179
|
thumbProps: {
|
|
180
180
|
...interactions,
|
|
181
181
|
style: {
|
|
182
|
-
position:
|
|
183
|
-
[isVertical ?
|
|
184
|
-
transform:
|
|
185
|
-
touchAction:
|
|
182
|
+
position: 'absolute',
|
|
183
|
+
[isVertical ? 'top' : 'left']: `${thumbPosition * 100}%`,
|
|
184
|
+
transform: 'translate(-50%, -50%)',
|
|
185
|
+
touchAction: 'none'
|
|
186
186
|
}
|
|
187
187
|
},
|
|
188
188
|
labelProps: labelProps,
|
package/dist/useSliderThumb.mjs
CHANGED
|
@@ -16,7 +16,7 @@ import {useLocale as $lSlq7$useLocale} from "@react-aria/i18n";
|
|
|
16
16
|
function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
17
17
|
let { index: index = 0, isRequired: isRequired, validationState: validationState, isInvalid: isInvalid, trackRef: trackRef, inputRef: inputRef, orientation: orientation = state.orientation, name: name } = opts;
|
|
18
18
|
let isDisabled = opts.isDisabled || state.isDisabled;
|
|
19
|
-
let isVertical = orientation ===
|
|
19
|
+
let isVertical = orientation === 'vertical';
|
|
20
20
|
let { direction: direction } = (0, $lSlq7$useLocale)();
|
|
21
21
|
let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $lSlq7$useGlobalListeners)();
|
|
22
22
|
let data = (0, $aa519ee6cf463259$export$d6c8d9636a3dc49c).get(state);
|
|
@@ -24,7 +24,7 @@ function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
|
24
24
|
const { labelProps: labelProps, fieldProps: fieldProps } = (0, $lSlq7$useLabel)({
|
|
25
25
|
...opts,
|
|
26
26
|
id: (0, $aa519ee6cf463259$export$68e648cbec363a18)(state, index),
|
|
27
|
-
|
|
27
|
+
'aria-labelledby': `${data.id} ${(_opts_arialabelledby = opts['aria-labelledby']) !== null && _opts_arialabelledby !== void 0 ? _opts_arialabelledby : ''}`.trim()
|
|
28
28
|
});
|
|
29
29
|
const value = state.values[index];
|
|
30
30
|
const focusInput = (0, $lSlq7$useCallback)(()=>{
|
|
@@ -39,7 +39,7 @@ function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
|
39
39
|
isFocused,
|
|
40
40
|
focusInput
|
|
41
41
|
]);
|
|
42
|
-
let reverseX = direction ===
|
|
42
|
+
let reverseX = direction === 'rtl';
|
|
43
43
|
let currentPosition = (0, $lSlq7$useRef)(null);
|
|
44
44
|
let { keyboardProps: keyboardProps } = (0, $lSlq7$useKeyboard)({
|
|
45
45
|
onKeyDown (e) {
|
|
@@ -54,16 +54,16 @@ function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
|
54
54
|
// remember to set this so that onChangeEnd is fired
|
|
55
55
|
setThumbDragging(index, true);
|
|
56
56
|
switch(e.key){
|
|
57
|
-
case
|
|
57
|
+
case 'PageUp':
|
|
58
58
|
incrementThumb(index, pageSize);
|
|
59
59
|
break;
|
|
60
|
-
case
|
|
60
|
+
case 'PageDown':
|
|
61
61
|
decrementThumb(index, pageSize);
|
|
62
62
|
break;
|
|
63
|
-
case
|
|
63
|
+
case 'Home':
|
|
64
64
|
setThumbValue(index, getThumbMinValue(index));
|
|
65
65
|
break;
|
|
66
|
-
case
|
|
66
|
+
case 'End':
|
|
67
67
|
setThumbValue(index, getThumbMaxValue(index));
|
|
68
68
|
break;
|
|
69
69
|
}
|
|
@@ -80,7 +80,7 @@ function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
|
80
80
|
let { width: width, height: height } = trackRef.current.getBoundingClientRect();
|
|
81
81
|
let size = isVertical ? height : width;
|
|
82
82
|
if (currentPosition.current == null) currentPosition.current = getThumbPercent(index) * size;
|
|
83
|
-
if (pointerType ===
|
|
83
|
+
if (pointerType === 'keyboard') {
|
|
84
84
|
if (deltaX > 0 && reverseX || deltaX < 0 && !reverseX || deltaY > 0) decrementThumb(index, shiftKey ? pageSize : step);
|
|
85
85
|
else incrementThumb(index, shiftKey ? pageSize : step);
|
|
86
86
|
} else {
|
|
@@ -105,9 +105,9 @@ function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
|
105
105
|
focusInput();
|
|
106
106
|
currentPointer.current = id;
|
|
107
107
|
state.setThumbDragging(index, true);
|
|
108
|
-
addGlobalListener(window,
|
|
109
|
-
addGlobalListener(window,
|
|
110
|
-
addGlobalListener(window,
|
|
108
|
+
addGlobalListener(window, 'mouseup', onUp, false);
|
|
109
|
+
addGlobalListener(window, 'touchend', onUp, false);
|
|
110
|
+
addGlobalListener(window, 'pointerup', onUp, false);
|
|
111
111
|
};
|
|
112
112
|
let onUp = (e)=>{
|
|
113
113
|
var _e_changedTouches;
|
|
@@ -116,13 +116,13 @@ function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
|
116
116
|
if (id === currentPointer.current) {
|
|
117
117
|
focusInput();
|
|
118
118
|
state.setThumbDragging(index, false);
|
|
119
|
-
removeGlobalListener(window,
|
|
120
|
-
removeGlobalListener(window,
|
|
121
|
-
removeGlobalListener(window,
|
|
119
|
+
removeGlobalListener(window, 'mouseup', onUp, false);
|
|
120
|
+
removeGlobalListener(window, 'touchend', onUp, false);
|
|
121
|
+
removeGlobalListener(window, 'pointerup', onUp, false);
|
|
122
122
|
}
|
|
123
123
|
};
|
|
124
124
|
let thumbPosition = state.getThumbPercent(index);
|
|
125
|
-
if (isVertical || direction ===
|
|
125
|
+
if (isVertical || direction === 'rtl') thumbPosition = 1 - thumbPosition;
|
|
126
126
|
let interactions = !isDisabled ? (0, $lSlq7$mergeProps)(keyboardProps, moveProps, {
|
|
127
127
|
onMouseDown: (e)=>{
|
|
128
128
|
if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
|
|
@@ -145,7 +145,7 @@ function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
|
145
145
|
// interactions; we then listen to input's onChange to update state.
|
|
146
146
|
return {
|
|
147
147
|
inputProps: (0, $lSlq7$mergeProps)(focusableProps, fieldProps, {
|
|
148
|
-
type:
|
|
148
|
+
type: 'range',
|
|
149
149
|
tabIndex: !isDisabled ? 0 : undefined,
|
|
150
150
|
min: state.getThumbMinValue(index),
|
|
151
151
|
max: state.getThumbMaxValue(index),
|
|
@@ -153,19 +153,19 @@ function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
|
153
153
|
value: value,
|
|
154
154
|
name: name,
|
|
155
155
|
disabled: isDisabled,
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
data[
|
|
163
|
-
opts[
|
|
164
|
-
].filter(Boolean).join(
|
|
165
|
-
|
|
166
|
-
data[
|
|
167
|
-
opts[
|
|
168
|
-
].filter(Boolean).join(
|
|
156
|
+
'aria-orientation': orientation,
|
|
157
|
+
'aria-valuetext': state.getThumbValueLabel(index),
|
|
158
|
+
'aria-required': isRequired || undefined,
|
|
159
|
+
'aria-invalid': isInvalid || validationState === 'invalid' || undefined,
|
|
160
|
+
'aria-errormessage': opts['aria-errormessage'],
|
|
161
|
+
'aria-describedby': [
|
|
162
|
+
data['aria-describedby'],
|
|
163
|
+
opts['aria-describedby']
|
|
164
|
+
].filter(Boolean).join(' '),
|
|
165
|
+
'aria-details': [
|
|
166
|
+
data['aria-details'],
|
|
167
|
+
opts['aria-details']
|
|
168
|
+
].filter(Boolean).join(' '),
|
|
169
169
|
onChange: (e)=>{
|
|
170
170
|
state.setThumbValue(index, parseFloat(e.target.value));
|
|
171
171
|
}
|
|
@@ -173,10 +173,10 @@ function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
|
173
173
|
thumbProps: {
|
|
174
174
|
...interactions,
|
|
175
175
|
style: {
|
|
176
|
-
position:
|
|
177
|
-
[isVertical ?
|
|
178
|
-
transform:
|
|
179
|
-
touchAction:
|
|
176
|
+
position: 'absolute',
|
|
177
|
+
[isVertical ? 'top' : 'left']: `${thumbPosition * 100}%`,
|
|
178
|
+
transform: 'translate(-50%, -50%)',
|
|
179
|
+
touchAction: 'none'
|
|
180
180
|
}
|
|
181
181
|
},
|
|
182
182
|
labelProps: labelProps,
|
|
@@ -16,7 +16,7 @@ import {useLocale as $lSlq7$useLocale} from "@react-aria/i18n";
|
|
|
16
16
|
function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
17
17
|
let { index: index = 0, isRequired: isRequired, validationState: validationState, isInvalid: isInvalid, trackRef: trackRef, inputRef: inputRef, orientation: orientation = state.orientation, name: name } = opts;
|
|
18
18
|
let isDisabled = opts.isDisabled || state.isDisabled;
|
|
19
|
-
let isVertical = orientation ===
|
|
19
|
+
let isVertical = orientation === 'vertical';
|
|
20
20
|
let { direction: direction } = (0, $lSlq7$useLocale)();
|
|
21
21
|
let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $lSlq7$useGlobalListeners)();
|
|
22
22
|
let data = (0, $aa519ee6cf463259$export$d6c8d9636a3dc49c).get(state);
|
|
@@ -24,7 +24,7 @@ function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
|
24
24
|
const { labelProps: labelProps, fieldProps: fieldProps } = (0, $lSlq7$useLabel)({
|
|
25
25
|
...opts,
|
|
26
26
|
id: (0, $aa519ee6cf463259$export$68e648cbec363a18)(state, index),
|
|
27
|
-
|
|
27
|
+
'aria-labelledby': `${data.id} ${(_opts_arialabelledby = opts['aria-labelledby']) !== null && _opts_arialabelledby !== void 0 ? _opts_arialabelledby : ''}`.trim()
|
|
28
28
|
});
|
|
29
29
|
const value = state.values[index];
|
|
30
30
|
const focusInput = (0, $lSlq7$useCallback)(()=>{
|
|
@@ -39,7 +39,7 @@ function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
|
39
39
|
isFocused,
|
|
40
40
|
focusInput
|
|
41
41
|
]);
|
|
42
|
-
let reverseX = direction ===
|
|
42
|
+
let reverseX = direction === 'rtl';
|
|
43
43
|
let currentPosition = (0, $lSlq7$useRef)(null);
|
|
44
44
|
let { keyboardProps: keyboardProps } = (0, $lSlq7$useKeyboard)({
|
|
45
45
|
onKeyDown (e) {
|
|
@@ -54,16 +54,16 @@ function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
|
54
54
|
// remember to set this so that onChangeEnd is fired
|
|
55
55
|
setThumbDragging(index, true);
|
|
56
56
|
switch(e.key){
|
|
57
|
-
case
|
|
57
|
+
case 'PageUp':
|
|
58
58
|
incrementThumb(index, pageSize);
|
|
59
59
|
break;
|
|
60
|
-
case
|
|
60
|
+
case 'PageDown':
|
|
61
61
|
decrementThumb(index, pageSize);
|
|
62
62
|
break;
|
|
63
|
-
case
|
|
63
|
+
case 'Home':
|
|
64
64
|
setThumbValue(index, getThumbMinValue(index));
|
|
65
65
|
break;
|
|
66
|
-
case
|
|
66
|
+
case 'End':
|
|
67
67
|
setThumbValue(index, getThumbMaxValue(index));
|
|
68
68
|
break;
|
|
69
69
|
}
|
|
@@ -80,7 +80,7 @@ function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
|
80
80
|
let { width: width, height: height } = trackRef.current.getBoundingClientRect();
|
|
81
81
|
let size = isVertical ? height : width;
|
|
82
82
|
if (currentPosition.current == null) currentPosition.current = getThumbPercent(index) * size;
|
|
83
|
-
if (pointerType ===
|
|
83
|
+
if (pointerType === 'keyboard') {
|
|
84
84
|
if (deltaX > 0 && reverseX || deltaX < 0 && !reverseX || deltaY > 0) decrementThumb(index, shiftKey ? pageSize : step);
|
|
85
85
|
else incrementThumb(index, shiftKey ? pageSize : step);
|
|
86
86
|
} else {
|
|
@@ -105,9 +105,9 @@ function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
|
105
105
|
focusInput();
|
|
106
106
|
currentPointer.current = id;
|
|
107
107
|
state.setThumbDragging(index, true);
|
|
108
|
-
addGlobalListener(window,
|
|
109
|
-
addGlobalListener(window,
|
|
110
|
-
addGlobalListener(window,
|
|
108
|
+
addGlobalListener(window, 'mouseup', onUp, false);
|
|
109
|
+
addGlobalListener(window, 'touchend', onUp, false);
|
|
110
|
+
addGlobalListener(window, 'pointerup', onUp, false);
|
|
111
111
|
};
|
|
112
112
|
let onUp = (e)=>{
|
|
113
113
|
var _e_changedTouches;
|
|
@@ -116,13 +116,13 @@ function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
|
116
116
|
if (id === currentPointer.current) {
|
|
117
117
|
focusInput();
|
|
118
118
|
state.setThumbDragging(index, false);
|
|
119
|
-
removeGlobalListener(window,
|
|
120
|
-
removeGlobalListener(window,
|
|
121
|
-
removeGlobalListener(window,
|
|
119
|
+
removeGlobalListener(window, 'mouseup', onUp, false);
|
|
120
|
+
removeGlobalListener(window, 'touchend', onUp, false);
|
|
121
|
+
removeGlobalListener(window, 'pointerup', onUp, false);
|
|
122
122
|
}
|
|
123
123
|
};
|
|
124
124
|
let thumbPosition = state.getThumbPercent(index);
|
|
125
|
-
if (isVertical || direction ===
|
|
125
|
+
if (isVertical || direction === 'rtl') thumbPosition = 1 - thumbPosition;
|
|
126
126
|
let interactions = !isDisabled ? (0, $lSlq7$mergeProps)(keyboardProps, moveProps, {
|
|
127
127
|
onMouseDown: (e)=>{
|
|
128
128
|
if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
|
|
@@ -145,7 +145,7 @@ function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
|
145
145
|
// interactions; we then listen to input's onChange to update state.
|
|
146
146
|
return {
|
|
147
147
|
inputProps: (0, $lSlq7$mergeProps)(focusableProps, fieldProps, {
|
|
148
|
-
type:
|
|
148
|
+
type: 'range',
|
|
149
149
|
tabIndex: !isDisabled ? 0 : undefined,
|
|
150
150
|
min: state.getThumbMinValue(index),
|
|
151
151
|
max: state.getThumbMaxValue(index),
|
|
@@ -153,19 +153,19 @@ function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
|
153
153
|
value: value,
|
|
154
154
|
name: name,
|
|
155
155
|
disabled: isDisabled,
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
data[
|
|
163
|
-
opts[
|
|
164
|
-
].filter(Boolean).join(
|
|
165
|
-
|
|
166
|
-
data[
|
|
167
|
-
opts[
|
|
168
|
-
].filter(Boolean).join(
|
|
156
|
+
'aria-orientation': orientation,
|
|
157
|
+
'aria-valuetext': state.getThumbValueLabel(index),
|
|
158
|
+
'aria-required': isRequired || undefined,
|
|
159
|
+
'aria-invalid': isInvalid || validationState === 'invalid' || undefined,
|
|
160
|
+
'aria-errormessage': opts['aria-errormessage'],
|
|
161
|
+
'aria-describedby': [
|
|
162
|
+
data['aria-describedby'],
|
|
163
|
+
opts['aria-describedby']
|
|
164
|
+
].filter(Boolean).join(' '),
|
|
165
|
+
'aria-details': [
|
|
166
|
+
data['aria-details'],
|
|
167
|
+
opts['aria-details']
|
|
168
|
+
].filter(Boolean).join(' '),
|
|
169
169
|
onChange: (e)=>{
|
|
170
170
|
state.setThumbValue(index, parseFloat(e.target.value));
|
|
171
171
|
}
|
|
@@ -173,10 +173,10 @@ function $47b897dc8cdb026b$export$8d15029008292ae(opts, state) {
|
|
|
173
173
|
thumbProps: {
|
|
174
174
|
...interactions,
|
|
175
175
|
style: {
|
|
176
|
-
position:
|
|
177
|
-
[isVertical ?
|
|
178
|
-
transform:
|
|
179
|
-
touchAction:
|
|
176
|
+
position: 'absolute',
|
|
177
|
+
[isVertical ? 'top' : 'left']: `${thumbPosition * 100}%`,
|
|
178
|
+
transform: 'translate(-50%, -50%)',
|
|
179
|
+
touchAction: 'none'
|
|
180
180
|
}
|
|
181
181
|
},
|
|
182
182
|
labelProps: labelProps,
|
package/dist/utils.main.js
CHANGED
|
@@ -8,7 +8,7 @@ $parcel$export(module.exports, "getSliderThumbId", () => $28db8d634be2fa58$expor
|
|
|
8
8
|
const $28db8d634be2fa58$export$d6c8d9636a3dc49c = new WeakMap();
|
|
9
9
|
function $28db8d634be2fa58$export$68e648cbec363a18(state, index) {
|
|
10
10
|
let data = $28db8d634be2fa58$export$d6c8d9636a3dc49c.get(state);
|
|
11
|
-
if (!data) throw new Error(
|
|
11
|
+
if (!data) throw new Error('Unknown slider state');
|
|
12
12
|
return `${data.id}-${index}`;
|
|
13
13
|
}
|
|
14
14
|
|
package/dist/utils.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
const $aa519ee6cf463259$export$d6c8d9636a3dc49c = new WeakMap();
|
|
2
2
|
function $aa519ee6cf463259$export$68e648cbec363a18(state, index) {
|
|
3
3
|
let data = $aa519ee6cf463259$export$d6c8d9636a3dc49c.get(state);
|
|
4
|
-
if (!data) throw new Error(
|
|
4
|
+
if (!data) throw new Error('Unknown slider state');
|
|
5
5
|
return `${data.id}-${index}`;
|
|
6
6
|
}
|
|
7
7
|
|
package/dist/utils.module.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
const $aa519ee6cf463259$export$d6c8d9636a3dc49c = new WeakMap();
|
|
2
2
|
function $aa519ee6cf463259$export$68e648cbec363a18(state, index) {
|
|
3
3
|
let data = $aa519ee6cf463259$export$d6c8d9636a3dc49c.get(state);
|
|
4
|
-
if (!data) throw new Error(
|
|
4
|
+
if (!data) throw new Error('Unknown slider state');
|
|
5
5
|
return `${data.id}-${index}`;
|
|
6
6
|
}
|
|
7
7
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/slider",
|
|
3
|
-
"version": "3.7.
|
|
3
|
+
"version": "3.7.9-nightly.4629+c34886769",
|
|
4
4
|
"description": "Slider",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -22,14 +22,14 @@
|
|
|
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/slider": "3.5.
|
|
31
|
-
"@react-types/shared": "3.0.0-nightly.
|
|
32
|
-
"@react-types/slider": "3.7.
|
|
25
|
+
"@react-aria/focus": "3.0.0-nightly.2917+c34886769",
|
|
26
|
+
"@react-aria/i18n": "3.0.0-nightly.2917+c34886769",
|
|
27
|
+
"@react-aria/interactions": "3.0.0-nightly.2917+c34886769",
|
|
28
|
+
"@react-aria/label": "3.0.0-nightly.2917+c34886769",
|
|
29
|
+
"@react-aria/utils": "3.0.0-nightly.2917+c34886769",
|
|
30
|
+
"@react-stately/slider": "3.5.5-nightly.4629+c34886769",
|
|
31
|
+
"@react-types/shared": "3.0.0-nightly.2917+c34886769",
|
|
32
|
+
"@react-types/slider": "3.7.4-nightly.4629+c34886769",
|
|
33
33
|
"@swc/helpers": "^0.5.0"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
@@ -38,5 +38,5 @@
|
|
|
38
38
|
"publishConfig": {
|
|
39
39
|
"access": "public"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "c34886769d3e69bb56553a02eead6a0fd877e754"
|
|
42
42
|
}
|