@salt-ds/lab 1.0.0-alpha.64 → 1.0.0-alpha.66
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/CHANGELOG.md +65 -0
- package/css/salt-lab.css +111 -269
- package/dist-cjs/carousel/Carousel.css.js +1 -1
- package/dist-cjs/carousel/Carousel.js +30 -87
- package/dist-cjs/carousel/Carousel.js.map +1 -1
- package/dist-cjs/carousel/CarouselContext.js +62 -0
- package/dist-cjs/carousel/CarouselContext.js.map +1 -0
- package/dist-cjs/carousel/CarouselControls.css.js +6 -0
- package/dist-cjs/carousel/CarouselControls.css.js.map +1 -0
- package/dist-cjs/carousel/CarouselControls.js +122 -0
- package/dist-cjs/carousel/CarouselControls.js.map +1 -0
- package/dist-cjs/carousel/CarouselReducer.js +77 -0
- package/dist-cjs/carousel/CarouselReducer.js.map +1 -0
- package/dist-cjs/carousel/CarouselSlide.css.js +6 -0
- package/dist-cjs/carousel/CarouselSlide.css.js.map +1 -0
- package/dist-cjs/carousel/CarouselSlide.js +95 -45
- package/dist-cjs/carousel/CarouselSlide.js.map +1 -1
- package/dist-cjs/carousel/CarouselSlider.css.js +6 -0
- package/dist-cjs/carousel/CarouselSlider.css.js.map +1 -0
- package/dist-cjs/carousel/CarouselSlider.js +93 -0
- package/dist-cjs/carousel/CarouselSlider.js.map +1 -0
- package/dist-cjs/index.js +6 -6
- package/dist-es/carousel/Carousel.css.js +1 -1
- package/dist-es/carousel/Carousel.js +32 -89
- package/dist-es/carousel/Carousel.js.map +1 -1
- package/dist-es/carousel/CarouselContext.js +58 -0
- package/dist-es/carousel/CarouselContext.js.map +1 -0
- package/dist-es/carousel/CarouselControls.css.js +4 -0
- package/dist-es/carousel/CarouselControls.css.js.map +1 -0
- package/dist-es/carousel/CarouselControls.js +120 -0
- package/dist-es/carousel/CarouselControls.js.map +1 -0
- package/dist-es/carousel/CarouselReducer.js +75 -0
- package/dist-es/carousel/CarouselReducer.js.map +1 -0
- package/dist-es/carousel/CarouselSlide.css.js +4 -0
- package/dist-es/carousel/CarouselSlide.css.js.map +1 -0
- package/dist-es/carousel/CarouselSlide.js +96 -46
- package/dist-es/carousel/CarouselSlide.js.map +1 -1
- package/dist-es/carousel/CarouselSlider.css.js +4 -0
- package/dist-es/carousel/CarouselSlider.css.js.map +1 -0
- package/dist-es/carousel/CarouselSlider.js +91 -0
- package/dist-es/carousel/CarouselSlider.js.map +1 -0
- package/dist-es/index.js +3 -3
- package/dist-types/carousel/Carousel.d.ts +10 -23
- package/dist-types/carousel/CarouselContext.d.ts +11 -0
- package/dist-types/carousel/CarouselControls.d.ts +26 -0
- package/dist-types/carousel/CarouselReducer.d.ts +30 -0
- package/dist-types/carousel/CarouselSlide.d.ts +31 -8
- package/dist-types/carousel/CarouselSlider.d.ts +13 -0
- package/dist-types/carousel/index.d.ts +2 -0
- package/dist-types/index.d.ts +0 -1
- package/dist-types/utils/index.d.ts +1 -1
- package/package.json +2 -2
- package/dist-cjs/slider/RangeSlider.js +0 -182
- package/dist-cjs/slider/RangeSlider.js.map +0 -1
- package/dist-cjs/slider/Slider.js +0 -145
- package/dist-cjs/slider/Slider.js.map +0 -1
- package/dist-cjs/slider/internal/SliderThumb.css.js +0 -6
- package/dist-cjs/slider/internal/SliderThumb.css.js.map +0 -1
- package/dist-cjs/slider/internal/SliderThumb.js +0 -141
- package/dist-cjs/slider/internal/SliderThumb.js.map +0 -1
- package/dist-cjs/slider/internal/SliderTooltip.css.js +0 -6
- package/dist-cjs/slider/internal/SliderTooltip.css.js.map +0 -1
- package/dist-cjs/slider/internal/SliderTooltip.js +0 -58
- package/dist-cjs/slider/internal/SliderTooltip.js.map +0 -1
- package/dist-cjs/slider/internal/SliderTrack.css.js +0 -6
- package/dist-cjs/slider/internal/SliderTrack.css.js.map +0 -1
- package/dist-cjs/slider/internal/SliderTrack.js +0 -168
- package/dist-cjs/slider/internal/SliderTrack.js.map +0 -1
- package/dist-cjs/slider/internal/useRangeSliderThumb.js +0 -233
- package/dist-cjs/slider/internal/useRangeSliderThumb.js.map +0 -1
- package/dist-cjs/slider/internal/useSliderThumb.js +0 -162
- package/dist-cjs/slider/internal/useSliderThumb.js.map +0 -1
- package/dist-cjs/slider/internal/utils.js +0 -113
- package/dist-cjs/slider/internal/utils.js.map +0 -1
- package/dist-es/slider/RangeSlider.js +0 -180
- package/dist-es/slider/RangeSlider.js.map +0 -1
- package/dist-es/slider/Slider.js +0 -143
- package/dist-es/slider/Slider.js.map +0 -1
- package/dist-es/slider/internal/SliderThumb.css.js +0 -4
- package/dist-es/slider/internal/SliderThumb.css.js.map +0 -1
- package/dist-es/slider/internal/SliderThumb.js +0 -139
- package/dist-es/slider/internal/SliderThumb.js.map +0 -1
- package/dist-es/slider/internal/SliderTooltip.css.js +0 -4
- package/dist-es/slider/internal/SliderTooltip.css.js.map +0 -1
- package/dist-es/slider/internal/SliderTooltip.js +0 -56
- package/dist-es/slider/internal/SliderTooltip.js.map +0 -1
- package/dist-es/slider/internal/SliderTrack.css.js +0 -4
- package/dist-es/slider/internal/SliderTrack.css.js.map +0 -1
- package/dist-es/slider/internal/SliderTrack.js +0 -166
- package/dist-es/slider/internal/SliderTrack.js.map +0 -1
- package/dist-es/slider/internal/useRangeSliderThumb.js +0 -231
- package/dist-es/slider/internal/useRangeSliderThumb.js.map +0 -1
- package/dist-es/slider/internal/useSliderThumb.js +0 -160
- package/dist-es/slider/internal/useSliderThumb.js.map +0 -1
- package/dist-es/slider/internal/utils.js +0 -105
- package/dist-es/slider/internal/utils.js.map +0 -1
- package/dist-types/slider/RangeSlider.d.ts +0 -99
- package/dist-types/slider/Slider.d.ts +0 -100
- package/dist-types/slider/index.d.ts +0 -2
- package/dist-types/slider/internal/SliderThumb.d.ts +0 -28
- package/dist-types/slider/internal/SliderTooltip.d.ts +0 -6
- package/dist-types/slider/internal/SliderTrack.d.ts +0 -24
- package/dist-types/slider/internal/useRangeSliderThumb.d.ts +0 -30
- package/dist-types/slider/internal/useSliderThumb.d.ts +0 -28
- package/dist-types/slider/internal/utils.d.ts +0 -20
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const toFloat = (value) => typeof value === "string" ? Number.parseFloat(value) : value;
|
|
4
|
-
const calculateMarkPosition = (value, max, min) => {
|
|
5
|
-
if (min === max) {
|
|
6
|
-
return 0;
|
|
7
|
-
}
|
|
8
|
-
const clampedValue = Number.isNaN(toFloat(value)) ? min : Math.min(Math.max(toFloat(value), min), max);
|
|
9
|
-
const markPosition = (clampedValue - min) / (max - min) * 100;
|
|
10
|
-
return Math.round(markPosition * 100) / 100;
|
|
11
|
-
};
|
|
12
|
-
const calculatePercentage = (value, max, min) => (value - min) / (max - min) * 100;
|
|
13
|
-
const clamp = (value, max, min, step, decimalPlaces, marks, restrictToMarks) => {
|
|
14
|
-
if (Number.isNaN(value)) {
|
|
15
|
-
return min;
|
|
16
|
-
}
|
|
17
|
-
const clampedValue = Math.min(Math.max(value, min), max);
|
|
18
|
-
if (restrictToMarks && marks) {
|
|
19
|
-
let closestMark = marks[0].value;
|
|
20
|
-
let smallestDifference = Math.abs(clampedValue - closestMark);
|
|
21
|
-
for (let i = 1; i < marks.length; i++) {
|
|
22
|
-
const currentDifference = Math.abs(clampedValue - marks[i].value);
|
|
23
|
-
if (currentDifference < smallestDifference) {
|
|
24
|
-
smallestDifference = currentDifference;
|
|
25
|
-
closestMark = marks[i].value;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
return closestMark;
|
|
29
|
-
}
|
|
30
|
-
let roundedValue = Math.round(clampedValue / step) * step;
|
|
31
|
-
if (roundedValue > max) {
|
|
32
|
-
roundedValue = max;
|
|
33
|
-
} else if (roundedValue < min) {
|
|
34
|
-
roundedValue = min;
|
|
35
|
-
}
|
|
36
|
-
return Number.parseFloat(roundedValue.toFixed(decimalPlaces));
|
|
37
|
-
};
|
|
38
|
-
const clampRange = (range, max, min, step, decimalPlaces, marks, restrictToMarks) => {
|
|
39
|
-
let [start, end] = range;
|
|
40
|
-
if (Number.isNaN(start)) {
|
|
41
|
-
start = min;
|
|
42
|
-
}
|
|
43
|
-
if (Number.isNaN(end)) {
|
|
44
|
-
end = max;
|
|
45
|
-
}
|
|
46
|
-
if (start > end) {
|
|
47
|
-
[start, end] = [end, start];
|
|
48
|
-
}
|
|
49
|
-
start = clamp(start, max, min, step, decimalPlaces, marks, restrictToMarks);
|
|
50
|
-
end = clamp(end, max, min, step, decimalPlaces, marks, restrictToMarks);
|
|
51
|
-
return [start, end];
|
|
52
|
-
};
|
|
53
|
-
const getClickedPosition = (sliderRef, clientX, max, min, step, decimalPlaces, marks, restrictToMarks) => {
|
|
54
|
-
if (!sliderRef.current) return;
|
|
55
|
-
const sliderRect = sliderRef.current.getBoundingClientRect();
|
|
56
|
-
const rawValue = (clientX - sliderRect.left) / sliderRect.width * (max - min) + min;
|
|
57
|
-
const steppedValue = Math.round(rawValue / step) * step;
|
|
58
|
-
return clamp(
|
|
59
|
-
steppedValue,
|
|
60
|
-
max,
|
|
61
|
-
min,
|
|
62
|
-
step,
|
|
63
|
-
decimalPlaces,
|
|
64
|
-
marks,
|
|
65
|
-
restrictToMarks
|
|
66
|
-
);
|
|
67
|
-
};
|
|
68
|
-
const getKeyboardValue = (event, value, step, stepMultiplier, max, min, restrictToMarks, marks) => {
|
|
69
|
-
let newValue = value;
|
|
70
|
-
if (restrictToMarks && marks && marks.length >= 1) {
|
|
71
|
-
const currentIndex = marks.findIndex((mark) => mark.value === value);
|
|
72
|
-
switch (event.key) {
|
|
73
|
-
case "ArrowUp":
|
|
74
|
-
case "ArrowRight":
|
|
75
|
-
case "PageUp":
|
|
76
|
-
if (currentIndex < marks.length - 1) {
|
|
77
|
-
newValue = marks[currentIndex + 1].value;
|
|
78
|
-
}
|
|
79
|
-
break;
|
|
80
|
-
case "ArrowDown":
|
|
81
|
-
case "ArrowLeft":
|
|
82
|
-
case "PageDown":
|
|
83
|
-
if (currentIndex > 0) {
|
|
84
|
-
newValue = marks[currentIndex - 1].value;
|
|
85
|
-
}
|
|
86
|
-
break;
|
|
87
|
-
default:
|
|
88
|
-
return newValue;
|
|
89
|
-
}
|
|
90
|
-
} else {
|
|
91
|
-
switch (event.key) {
|
|
92
|
-
case "PageUp":
|
|
93
|
-
newValue = Math.min(value + step * stepMultiplier, max);
|
|
94
|
-
break;
|
|
95
|
-
case "PageDown":
|
|
96
|
-
newValue = Math.max(value - step * stepMultiplier, min);
|
|
97
|
-
break;
|
|
98
|
-
default:
|
|
99
|
-
return newValue;
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
event.preventDefault();
|
|
103
|
-
return newValue;
|
|
104
|
-
};
|
|
105
|
-
|
|
106
|
-
exports.calculateMarkPosition = calculateMarkPosition;
|
|
107
|
-
exports.calculatePercentage = calculatePercentage;
|
|
108
|
-
exports.clamp = clamp;
|
|
109
|
-
exports.clampRange = clampRange;
|
|
110
|
-
exports.getClickedPosition = getClickedPosition;
|
|
111
|
-
exports.getKeyboardValue = getKeyboardValue;
|
|
112
|
-
exports.toFloat = toFloat;
|
|
113
|
-
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../src/slider/internal/utils.ts"],"sourcesContent":["import type { RefObject } from \"react\";\n\nexport const toFloat = (value: number | string) =>\n typeof value === \"string\" ? Number.parseFloat(value) : value;\n\nexport const calculateMarkPosition = (\n value: number | string,\n max: number,\n min: number,\n) => {\n if (min === max) {\n return 0;\n }\n const clampedValue = Number.isNaN(toFloat(value))\n ? min\n : Math.min(Math.max(toFloat(value), min), max);\n const markPosition = ((clampedValue - min) / (max - min)) * 100;\n return Math.round(markPosition * 100) / 100;\n};\n\nexport const calculatePercentage = (value: number, max: number, min: number) =>\n ((value - min) / (max - min)) * 100;\n\nexport const clamp = (\n value: number,\n max: number,\n min: number,\n step: number,\n decimalPlaces: number,\n marks?: { value: number; label: string }[],\n restrictToMarks?: boolean,\n) => {\n if (Number.isNaN(value)) {\n return min;\n }\n // Clamp the value between min and max\n const clampedValue = Math.min(Math.max(value, min), max);\n if (restrictToMarks && marks) {\n // Find the closest mark value\n let closestMark = marks[0].value;\n let smallestDifference = Math.abs(clampedValue - closestMark);\n for (let i = 1; i < marks.length; i++) {\n const currentDifference = Math.abs(clampedValue - marks[i].value);\n if (currentDifference < smallestDifference) {\n smallestDifference = currentDifference;\n closestMark = marks[i].value;\n }\n }\n return closestMark;\n }\n // Round to the nearest multiple of the step\n let roundedValue = Math.round(clampedValue / step) * step;\n // Ensure the rounded value does not exceed max or min\n if (roundedValue > max) {\n roundedValue = max;\n } else if (roundedValue < min) {\n roundedValue = min;\n }\n return Number.parseFloat(roundedValue.toFixed(decimalPlaces));\n};\n\nexport const clampRange = (\n range: [number, number],\n max: number,\n min: number,\n step: number,\n decimalPlaces: number,\n marks?: { value: number; label: string }[],\n restrictToMarks?: boolean,\n) => {\n let [start, end] = range;\n\n if (Number.isNaN(start)) {\n start = min;\n }\n if (Number.isNaN(end)) {\n end = max;\n }\n if (start > end) {\n [start, end] = [end, start];\n }\n start = clamp(start, max, min, step, decimalPlaces, marks, restrictToMarks);\n end = clamp(end, max, min, step, decimalPlaces, marks, restrictToMarks);\n return [start, end] as [number, number];\n};\n\nexport const getClickedPosition = (\n sliderRef: RefObject<HTMLDivElement>,\n clientX: number,\n max: number,\n min: number,\n step: number,\n decimalPlaces: number,\n marks?: { label: string; value: number }[],\n restrictToMarks?: boolean,\n) => {\n if (!sliderRef.current) return;\n\n const sliderRect = sliderRef.current.getBoundingClientRect();\n const rawValue =\n ((clientX - sliderRect.left) / sliderRect.width) * (max - min) + min;\n const steppedValue = Math.round(rawValue / step) * step;\n return clamp(\n steppedValue,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n};\n\nexport const getKeyboardValue = (\n event: React.KeyboardEvent,\n value: number,\n step: number,\n stepMultiplier: number,\n max: number,\n min: number,\n restrictToMarks?: boolean,\n marks?: { label: string; value: number }[],\n) => {\n let newValue = value;\n\n if (restrictToMarks && marks && marks.length >= 1) {\n const currentIndex = marks.findIndex((mark) => mark.value === value);\n\n switch (event.key) {\n case \"ArrowUp\":\n case \"ArrowRight\":\n case \"PageUp\":\n if (currentIndex < marks.length - 1) {\n newValue = marks[currentIndex + 1].value;\n }\n break;\n case \"ArrowDown\":\n case \"ArrowLeft\":\n case \"PageDown\":\n if (currentIndex > 0) {\n newValue = marks[currentIndex - 1].value;\n }\n break;\n default:\n return newValue;\n }\n } else {\n switch (event.key) {\n case \"PageUp\":\n newValue = Math.min(value + step * stepMultiplier, max);\n break;\n case \"PageDown\":\n newValue = Math.max(value - step * stepMultiplier, min);\n break;\n default:\n return newValue;\n }\n }\n\n event.preventDefault();\n return newValue;\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,180 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { forwardRef, useRef } from 'react';
|
|
3
|
-
import { useControlled, useFormFieldProps } from '@salt-ds/core';
|
|
4
|
-
import { clsx } from 'clsx';
|
|
5
|
-
import { SliderThumb } from './internal/SliderThumb.js';
|
|
6
|
-
import { SliderTrack } from './internal/SliderTrack.js';
|
|
7
|
-
import { useRangeSliderThumb } from './internal/useRangeSliderThumb.js';
|
|
8
|
-
import { clampRange, calculatePercentage, toFloat } from './internal/utils.js';
|
|
9
|
-
|
|
10
|
-
const RangeSlider = forwardRef(
|
|
11
|
-
function RangeSlider2({
|
|
12
|
-
"aria-label": ariaLabel,
|
|
13
|
-
"aria-labelledby": ariaLabelledBy,
|
|
14
|
-
"aria-valuetext": ariaValueText,
|
|
15
|
-
accessibleMaxText,
|
|
16
|
-
accessibleMinText,
|
|
17
|
-
decimalPlaces = 2,
|
|
18
|
-
disabled: disabledProp = false,
|
|
19
|
-
format,
|
|
20
|
-
marks,
|
|
21
|
-
max = 10,
|
|
22
|
-
min = 0,
|
|
23
|
-
maxLabel,
|
|
24
|
-
minLabel,
|
|
25
|
-
onChange,
|
|
26
|
-
onChangeEnd,
|
|
27
|
-
restrictToMarks = false,
|
|
28
|
-
showTooltip = true,
|
|
29
|
-
step = 1,
|
|
30
|
-
stepMultiplier = 2,
|
|
31
|
-
value: valueProp,
|
|
32
|
-
defaultValue = [min, min + (max - min) / 2],
|
|
33
|
-
...rest
|
|
34
|
-
}, ref) {
|
|
35
|
-
const [valueState, setValue] = useControlled({
|
|
36
|
-
controlled: valueProp,
|
|
37
|
-
default: defaultValue,
|
|
38
|
-
name: "RangeSlider",
|
|
39
|
-
state: "value"
|
|
40
|
-
});
|
|
41
|
-
const lastValueRef = useRef(valueState);
|
|
42
|
-
const {
|
|
43
|
-
a11yProps: { "aria-labelledby": formFieldLabelledBy } = {},
|
|
44
|
-
disabled: formFieldDisabled
|
|
45
|
-
} = useFormFieldProps();
|
|
46
|
-
const disabled = formFieldDisabled || disabledProp;
|
|
47
|
-
const inputRefs = Array.from(
|
|
48
|
-
{ length: 2 },
|
|
49
|
-
() => useRef(null)
|
|
50
|
-
);
|
|
51
|
-
const value = clampRange(
|
|
52
|
-
valueState,
|
|
53
|
-
max,
|
|
54
|
-
min,
|
|
55
|
-
step,
|
|
56
|
-
decimalPlaces,
|
|
57
|
-
marks,
|
|
58
|
-
restrictToMarks
|
|
59
|
-
);
|
|
60
|
-
const progressPercentageStart = calculatePercentage(value[0], max, min);
|
|
61
|
-
const progressPercentageEnd = calculatePercentage(value[1], max, min);
|
|
62
|
-
const handleInputChange = (event, thumbIndex) => {
|
|
63
|
-
const parsedValue = toFloat(event.target.value);
|
|
64
|
-
const values = preventThumbOverlap(parsedValue, value, thumbIndex);
|
|
65
|
-
const haveValuesChanged = values[0] !== lastValueRef.current[0] || values[1] !== lastValueRef.current[1];
|
|
66
|
-
if (haveValuesChanged) {
|
|
67
|
-
const values2 = preventThumbOverlap(parsedValue, value, thumbIndex);
|
|
68
|
-
setValue(values2);
|
|
69
|
-
onChange == null ? void 0 : onChange(event.nativeEvent, values2);
|
|
70
|
-
onChangeEnd == null ? void 0 : onChangeEnd(event.nativeEvent, values2);
|
|
71
|
-
lastValueRef.current = values2;
|
|
72
|
-
}
|
|
73
|
-
};
|
|
74
|
-
const {
|
|
75
|
-
handleBlur,
|
|
76
|
-
handleFocus,
|
|
77
|
-
handleKeydownOnThumb,
|
|
78
|
-
handlePointerDownOnThumb,
|
|
79
|
-
handlePointerDownOnTrack,
|
|
80
|
-
isDragging,
|
|
81
|
-
isFocusVisible,
|
|
82
|
-
sliderRef,
|
|
83
|
-
thumbIndexState,
|
|
84
|
-
preventThumbOverlap
|
|
85
|
-
} = useRangeSliderThumb({
|
|
86
|
-
decimalPlaces,
|
|
87
|
-
handleInputChange,
|
|
88
|
-
inputRefs,
|
|
89
|
-
marks,
|
|
90
|
-
min,
|
|
91
|
-
max,
|
|
92
|
-
step,
|
|
93
|
-
value,
|
|
94
|
-
onChange,
|
|
95
|
-
onChangeEnd,
|
|
96
|
-
restrictToMarks,
|
|
97
|
-
setValue,
|
|
98
|
-
stepMultiplier
|
|
99
|
-
});
|
|
100
|
-
const thumbProps = {
|
|
101
|
-
"aria-label": ariaLabel,
|
|
102
|
-
"aria-labelledby": clsx(formFieldLabelledBy, ariaLabelledBy),
|
|
103
|
-
"aria-valuemax": max,
|
|
104
|
-
"aria-valuemin": min,
|
|
105
|
-
"aria-valuetext": ariaValueText,
|
|
106
|
-
accessibleMaxText,
|
|
107
|
-
accessibleMinText,
|
|
108
|
-
disabled,
|
|
109
|
-
format,
|
|
110
|
-
max,
|
|
111
|
-
maxLabel,
|
|
112
|
-
min,
|
|
113
|
-
minLabel,
|
|
114
|
-
restrictToMarks,
|
|
115
|
-
showTooltip,
|
|
116
|
-
step,
|
|
117
|
-
stepMultiplier,
|
|
118
|
-
sliderValue: value
|
|
119
|
-
};
|
|
120
|
-
return /* @__PURE__ */ jsxs(
|
|
121
|
-
SliderTrack,
|
|
122
|
-
{
|
|
123
|
-
disabled,
|
|
124
|
-
format,
|
|
125
|
-
handlePointerDown: handlePointerDownOnTrack,
|
|
126
|
-
isDragging,
|
|
127
|
-
isRange: true,
|
|
128
|
-
marks,
|
|
129
|
-
min,
|
|
130
|
-
minLabel,
|
|
131
|
-
max,
|
|
132
|
-
maxLabel,
|
|
133
|
-
progressPercentageRange: [
|
|
134
|
-
progressPercentageStart,
|
|
135
|
-
progressPercentageEnd
|
|
136
|
-
],
|
|
137
|
-
ref,
|
|
138
|
-
sliderRef,
|
|
139
|
-
...rest,
|
|
140
|
-
children: [
|
|
141
|
-
/* @__PURE__ */ jsx(
|
|
142
|
-
SliderThumb,
|
|
143
|
-
{
|
|
144
|
-
index: 0,
|
|
145
|
-
handleInputChange: (event) => handleInputChange(event, 0),
|
|
146
|
-
handlePointerDown: (event) => handlePointerDownOnThumb(event, 0),
|
|
147
|
-
handleKeydownOnThumb: (event) => handleKeydownOnThumb(event, 0),
|
|
148
|
-
offsetPercentage: `${calculatePercentage(value[0], max, min)}%`,
|
|
149
|
-
trackDragging: isDragging && thumbIndexState === 0,
|
|
150
|
-
isFocusVisible: isFocusVisible && thumbIndexState === 0,
|
|
151
|
-
inputRef: inputRefs[0],
|
|
152
|
-
onFocus: () => handleFocus(0),
|
|
153
|
-
onBlur: () => handleBlur(0),
|
|
154
|
-
...thumbProps
|
|
155
|
-
}
|
|
156
|
-
),
|
|
157
|
-
/* @__PURE__ */ jsx(
|
|
158
|
-
SliderThumb,
|
|
159
|
-
{
|
|
160
|
-
index: 1,
|
|
161
|
-
handleInputChange: (event) => handleInputChange(event, 1),
|
|
162
|
-
handlePointerDown: (event) => handlePointerDownOnThumb(event, 1),
|
|
163
|
-
handleKeydownOnThumb: (event) => handleKeydownOnThumb(event, 1),
|
|
164
|
-
offsetPercentage: `${calculatePercentage(value[1], max, min)}%`,
|
|
165
|
-
trackDragging: isDragging && thumbIndexState === 1,
|
|
166
|
-
isFocusVisible: isFocusVisible && thumbIndexState === 1,
|
|
167
|
-
inputRef: inputRefs[1],
|
|
168
|
-
onFocus: () => handleFocus(1),
|
|
169
|
-
onBlur: () => handleBlur(1),
|
|
170
|
-
...thumbProps
|
|
171
|
-
}
|
|
172
|
-
)
|
|
173
|
-
]
|
|
174
|
-
}
|
|
175
|
-
);
|
|
176
|
-
}
|
|
177
|
-
);
|
|
178
|
-
|
|
179
|
-
export { RangeSlider };
|
|
180
|
-
//# sourceMappingURL=RangeSlider.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RangeSlider.js","sources":["../src/slider/RangeSlider.tsx"],"sourcesContent":["import {\n type ChangeEvent,\n type HTMLAttributes,\n forwardRef,\n useRef,\n} from \"react\";\n\nimport { useControlled, useFormFieldProps } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { SliderThumb } from \"./internal/SliderThumb\";\nimport { SliderTrack } from \"./internal/SliderTrack\";\nimport { useRangeSliderThumb } from \"./internal/useRangeSliderThumb\";\nimport { calculatePercentage, clampRange, toFloat } from \"./internal/utils\";\n\nexport interface RangeSliderProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n /**\n * Accessible text to announce maximum value label.\n */\n accessibleMaxText?: string;\n /**\n * Accessible text to announce minimum value label.\n */\n accessibleMinText?: string;\n /**\n * When minimum and maximum labels are defined, ensure\n * they are confined within the boundary of the slider.\n */\n constrainLabelPosition?: boolean;\n /**\n * The number of allowed decimal places\n * @default 2\n */\n decimalPlaces?: number;\n /**\n * The default value. Use when the component is not controlled.\n * @default [min, min + (max - min) / 2]\n */\n defaultValue?: [number, number];\n /**\n * Disable the slider.\n */\n disabled?: boolean;\n /**\n * Show visual ticks above the marks.\n */\n showTicks?: boolean;\n /**\n * A callback to format the display value in the tooltip, min and max labels\n * and the `aria-valuetext` attribute.\n */\n format?: (value: number) => string | number;\n /**\n * Marks that are displayed under the track.\n */\n marks?: { label: string; value: number }[];\n /**\n * Maximum slider value.\n * @default 10\n */\n max?: number;\n /**\n * Minimum slider value.\n * @default 0\n */\n min?: number;\n /**\n * Label for maximum value.\n */\n maxLabel?: string;\n /**\n * Label for minimum value.\n */\n minLabel?: string;\n /**\n * Callback called when slider value is changed.\n * It provides a generic event and the current value of the slider.\n */\n onChange?: (event: Event, value: [number, number]) => void;\n /**\n * Callback called when the slider is stopped from being dragged or\n * its value is changed from the keyboard. It provides a generic\n * event and the current value of the slider.\n */\n onChangeEnd?: (event: Event, value: [number, number]) => void;\n /**\n * Restrict slider value to marks only. The step will be ignored.\n */\n restrictToMarks?: boolean;\n /**\n * Show the slider value in a tooltip when the thumb is hovered.\n * @default true\n */\n showTooltip?: boolean;\n /**\n * Minimum interval the slider thumb can move.\n * @default 1\n */\n step?: number;\n /**\n * Maximum interval the slider thumb can move when using PageUp and PageDown keys.\n * @default 2\n */\n stepMultiplier?: number;\n /**\n * Value of the slider, to be used when in a controlled state.\n */\n value?: [number, number];\n}\n\nexport const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>(\n function RangeSlider(\n {\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-valuetext\": ariaValueText,\n accessibleMaxText,\n accessibleMinText,\n decimalPlaces = 2,\n disabled: disabledProp = false,\n format,\n marks,\n max = 10,\n min = 0,\n maxLabel,\n minLabel,\n onChange,\n onChangeEnd,\n restrictToMarks = false,\n showTooltip = true,\n step = 1,\n stepMultiplier = 2,\n value: valueProp,\n defaultValue = [min, min + (max - min) / 2],\n ...rest\n },\n ref,\n ) {\n const [valueState, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"RangeSlider\",\n state: \"value\",\n });\n const lastValueRef = useRef<[number, number]>(valueState);\n\n const {\n a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n disabled: formFieldDisabled,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n const inputRefs = Array.from({ length: 2 }, () =>\n useRef<HTMLInputElement>(null),\n );\n const value: [number, number] = clampRange(\n valueState,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n const progressPercentageStart = calculatePercentage(value[0], max, min);\n const progressPercentageEnd = calculatePercentage(value[1], max, min);\n\n const handleInputChange = (\n event: ChangeEvent<HTMLInputElement>,\n thumbIndex: number,\n ) => {\n const parsedValue = toFloat(event.target.value);\n const values = preventThumbOverlap(parsedValue, value, thumbIndex);\n const haveValuesChanged =\n values[0] !== lastValueRef.current[0] ||\n values[1] !== lastValueRef.current[1];\n if (haveValuesChanged) {\n const values = preventThumbOverlap(parsedValue, value, thumbIndex);\n setValue(values as [number, number]);\n onChange?.(event.nativeEvent, values as [number, number]);\n onChangeEnd?.(event.nativeEvent, values as [number, number]);\n lastValueRef.current = values;\n }\n };\n\n const {\n handleBlur,\n handleFocus,\n handleKeydownOnThumb,\n handlePointerDownOnThumb,\n handlePointerDownOnTrack,\n isDragging,\n isFocusVisible,\n sliderRef,\n thumbIndexState,\n preventThumbOverlap,\n } = useRangeSliderThumb({\n decimalPlaces,\n handleInputChange,\n inputRefs,\n marks,\n min,\n max,\n step,\n value,\n onChange,\n onChangeEnd,\n restrictToMarks,\n setValue,\n stepMultiplier,\n });\n\n const thumbProps = {\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": clsx(formFieldLabelledBy, ariaLabelledBy),\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n \"aria-valuetext\": ariaValueText,\n accessibleMaxText: accessibleMaxText,\n accessibleMinText: accessibleMinText,\n disabled: disabled,\n format: format,\n max: max,\n maxLabel: maxLabel,\n min: min,\n minLabel: minLabel,\n restrictToMarks: restrictToMarks,\n showTooltip: showTooltip,\n step: step,\n stepMultiplier: stepMultiplier,\n sliderValue: value,\n };\n\n return (\n <SliderTrack\n disabled={disabled}\n format={format}\n handlePointerDown={handlePointerDownOnTrack}\n isDragging={isDragging}\n isRange\n marks={marks}\n min={min}\n minLabel={minLabel}\n max={max}\n maxLabel={maxLabel}\n progressPercentageRange={[\n progressPercentageStart,\n progressPercentageEnd,\n ]}\n ref={ref}\n sliderRef={sliderRef}\n {...rest}\n >\n <SliderThumb\n index={0}\n handleInputChange={(event) => handleInputChange(event, 0)}\n handlePointerDown={(event) => handlePointerDownOnThumb(event, 0)}\n handleKeydownOnThumb={(event) => handleKeydownOnThumb(event, 0)}\n offsetPercentage={`${calculatePercentage(value[0], max, min)}%`}\n trackDragging={isDragging && thumbIndexState === 0}\n isFocusVisible={isFocusVisible && thumbIndexState === 0}\n inputRef={inputRefs[0]}\n onFocus={() => handleFocus(0)}\n onBlur={() => handleBlur(0)}\n {...thumbProps}\n />\n <SliderThumb\n index={1}\n handleInputChange={(event) => handleInputChange(event, 1)}\n handlePointerDown={(event) => handlePointerDownOnThumb(event, 1)}\n handleKeydownOnThumb={(event) => handleKeydownOnThumb(event, 1)}\n offsetPercentage={`${calculatePercentage(value[1], max, min)}%`}\n trackDragging={isDragging && thumbIndexState === 1}\n isFocusVisible={isFocusVisible && thumbIndexState === 1}\n inputRef={inputRefs[1]}\n onFocus={() => handleFocus(1)}\n onBlur={() => handleBlur(1)}\n {...thumbProps}\n />\n </SliderTrack>\n );\n },\n);\n"],"names":["RangeSlider","values"],"mappings":";;;;;;;;;AA8GO,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YACP,CAAA;AAAA,IACE,YAAc,EAAA,SAAA;AAAA,IACd,iBAAmB,EAAA,cAAA;AAAA,IACnB,gBAAkB,EAAA,aAAA;AAAA,IAClB,iBAAA;AAAA,IACA,iBAAA;AAAA,IACA,aAAgB,GAAA,CAAA;AAAA,IAChB,UAAU,YAAe,GAAA,KAAA;AAAA,IACzB,MAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAM,GAAA,EAAA;AAAA,IACN,GAAM,GAAA,CAAA;AAAA,IACN,QAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAkB,GAAA,KAAA;AAAA,IAClB,WAAc,GAAA,IAAA;AAAA,IACd,IAAO,GAAA,CAAA;AAAA,IACP,cAAiB,GAAA,CAAA;AAAA,IACjB,KAAO,EAAA,SAAA;AAAA,IACP,eAAe,CAAC,GAAA,EAAK,GAAO,GAAA,CAAA,GAAA,GAAM,OAAO,CAAC,CAAA;AAAA,IAC1C,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,CAAC,UAAA,EAAY,QAAQ,CAAA,GAAI,aAAc,CAAA;AAAA,MAC3C,UAAY,EAAA,SAAA;AAAA,MACZ,OAAS,EAAA,YAAA;AAAA,MACT,IAAM,EAAA,aAAA;AAAA,MACN,KAAO,EAAA;AAAA,KACR,CAAA;AACD,IAAM,MAAA,YAAA,GAAe,OAAyB,UAAU,CAAA;AAExD,IAAM,MAAA;AAAA,MACJ,SAAW,EAAA,EAAE,iBAAmB,EAAA,mBAAA,KAAwB,EAAC;AAAA,MACzD,QAAU,EAAA;AAAA,QACR,iBAAkB,EAAA;AAEtB,IAAA,MAAM,WAAW,iBAAqB,IAAA,YAAA;AACtC,IAAA,MAAM,YAAY,KAAM,CAAA,IAAA;AAAA,MAAK,EAAE,QAAQ,CAAE,EAAA;AAAA,MAAG,MAC1C,OAAyB,IAAI;AAAA,KAC/B;AACA,IAAA,MAAM,KAA0B,GAAA,UAAA;AAAA,MAC9B,UAAA;AAAA,MACA,GAAA;AAAA,MACA,GAAA;AAAA,MACA,IAAA;AAAA,MACA,aAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,0BAA0B,mBAAoB,CAAA,KAAA,CAAM,CAAC,CAAA,EAAG,KAAK,GAAG,CAAA;AACtE,IAAA,MAAM,wBAAwB,mBAAoB,CAAA,KAAA,CAAM,CAAC,CAAA,EAAG,KAAK,GAAG,CAAA;AAEpE,IAAM,MAAA,iBAAA,GAAoB,CACxB,KAAA,EACA,UACG,KAAA;AACH,MAAA,MAAM,WAAc,GAAA,OAAA,CAAQ,KAAM,CAAA,MAAA,CAAO,KAAK,CAAA;AAC9C,MAAA,MAAM,MAAS,GAAA,mBAAA,CAAoB,WAAa,EAAA,KAAA,EAAO,UAAU,CAAA;AACjE,MAAA,MAAM,iBACJ,GAAA,MAAA,CAAO,CAAC,CAAA,KAAM,YAAa,CAAA,OAAA,CAAQ,CAAC,CAAA,IACpC,MAAO,CAAA,CAAC,CAAM,KAAA,YAAA,CAAa,QAAQ,CAAC,CAAA;AACtC,MAAA,IAAI,iBAAmB,EAAA;AACrB,QAAA,MAAMC,OAAS,GAAA,mBAAA,CAAoB,WAAa,EAAA,KAAA,EAAO,UAAU,CAAA;AACjE,QAAA,QAAA,CAASA,OAA0B,CAAA;AACnC,QAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAW,MAAM,WAAaA,EAAAA,OAAAA,CAAAA;AAC9B,QAAA,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAc,MAAM,WAAaA,EAAAA,OAAAA,CAAAA;AACjC,QAAA,YAAA,CAAa,OAAUA,GAAAA,OAAAA;AAAA;AACzB,KACF;AAEA,IAAM,MAAA;AAAA,MACJ,UAAA;AAAA,MACA,WAAA;AAAA,MACA,oBAAA;AAAA,MACA,wBAAA;AAAA,MACA,wBAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA;AAAA,QACE,mBAAoB,CAAA;AAAA,MACtB,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAA;AAAA,MACA,GAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,UAAa,GAAA;AAAA,MACjB,YAAc,EAAA,SAAA;AAAA,MACd,iBAAA,EAAmB,IAAK,CAAA,mBAAA,EAAqB,cAAc,CAAA;AAAA,MAC3D,eAAiB,EAAA,GAAA;AAAA,MACjB,eAAiB,EAAA,GAAA;AAAA,MACjB,gBAAkB,EAAA,aAAA;AAAA,MAClB,iBAAA;AAAA,MACA,iBAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,GAAA;AAAA,MACA,QAAA;AAAA,MACA,GAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAA;AAAA,MACA,WAAA;AAAA,MACA,IAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAa,EAAA;AAAA,KACf;AAEA,IACE,uBAAA,IAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,MAAA;AAAA,QACA,iBAAmB,EAAA,wBAAA;AAAA,QACnB,UAAA;AAAA,QACA,OAAO,EAAA,IAAA;AAAA,QACP,KAAA;AAAA,QACA,GAAA;AAAA,QACA,QAAA;AAAA,QACA,GAAA;AAAA,QACA,QAAA;AAAA,QACA,uBAAyB,EAAA;AAAA,UACvB,uBAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACA,SAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,WAAA;AAAA,YAAA;AAAA,cACC,KAAO,EAAA,CAAA;AAAA,cACP,iBAAmB,EAAA,CAAC,KAAU,KAAA,iBAAA,CAAkB,OAAO,CAAC,CAAA;AAAA,cACxD,iBAAmB,EAAA,CAAC,KAAU,KAAA,wBAAA,CAAyB,OAAO,CAAC,CAAA;AAAA,cAC/D,oBAAsB,EAAA,CAAC,KAAU,KAAA,oBAAA,CAAqB,OAAO,CAAC,CAAA;AAAA,cAC9D,gBAAA,EAAkB,GAAG,mBAAoB,CAAA,KAAA,CAAM,CAAC,CAAG,EAAA,GAAA,EAAK,GAAG,CAAC,CAAA,CAAA,CAAA;AAAA,cAC5D,aAAA,EAAe,cAAc,eAAoB,KAAA,CAAA;AAAA,cACjD,cAAA,EAAgB,kBAAkB,eAAoB,KAAA,CAAA;AAAA,cACtD,QAAA,EAAU,UAAU,CAAC,CAAA;AAAA,cACrB,OAAA,EAAS,MAAM,WAAA,CAAY,CAAC,CAAA;AAAA,cAC5B,MAAA,EAAQ,MAAM,UAAA,CAAW,CAAC,CAAA;AAAA,cACzB,GAAG;AAAA;AAAA,WACN;AAAA,0BACA,GAAA;AAAA,YAAC,WAAA;AAAA,YAAA;AAAA,cACC,KAAO,EAAA,CAAA;AAAA,cACP,iBAAmB,EAAA,CAAC,KAAU,KAAA,iBAAA,CAAkB,OAAO,CAAC,CAAA;AAAA,cACxD,iBAAmB,EAAA,CAAC,KAAU,KAAA,wBAAA,CAAyB,OAAO,CAAC,CAAA;AAAA,cAC/D,oBAAsB,EAAA,CAAC,KAAU,KAAA,oBAAA,CAAqB,OAAO,CAAC,CAAA;AAAA,cAC9D,gBAAA,EAAkB,GAAG,mBAAoB,CAAA,KAAA,CAAM,CAAC,CAAG,EAAA,GAAA,EAAK,GAAG,CAAC,CAAA,CAAA,CAAA;AAAA,cAC5D,aAAA,EAAe,cAAc,eAAoB,KAAA,CAAA;AAAA,cACjD,cAAA,EAAgB,kBAAkB,eAAoB,KAAA,CAAA;AAAA,cACtD,QAAA,EAAU,UAAU,CAAC,CAAA;AAAA,cACrB,OAAA,EAAS,MAAM,WAAA,CAAY,CAAC,CAAA;AAAA,cAC5B,MAAA,EAAQ,MAAM,UAAA,CAAW,CAAC,CAAA;AAAA,cACzB,GAAG;AAAA;AAAA;AACN;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}
|
package/dist-es/slider/Slider.js
DELETED
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { forwardRef, useRef } from 'react';
|
|
3
|
-
import { useControlled, useFormFieldProps } from '@salt-ds/core';
|
|
4
|
-
import { clsx } from 'clsx';
|
|
5
|
-
import { SliderThumb } from './internal/SliderThumb.js';
|
|
6
|
-
import { SliderTrack } from './internal/SliderTrack.js';
|
|
7
|
-
import { useSliderThumb } from './internal/useSliderThumb.js';
|
|
8
|
-
import { clamp, calculatePercentage, toFloat } from './internal/utils.js';
|
|
9
|
-
|
|
10
|
-
const Slider = forwardRef(function Slider2({
|
|
11
|
-
"aria-label": ariaLabel,
|
|
12
|
-
"aria-labelledby": ariaLabelledBy,
|
|
13
|
-
"aria-valuetext": ariaValueText,
|
|
14
|
-
accessibleMaxText,
|
|
15
|
-
accessibleMinText,
|
|
16
|
-
decimalPlaces = 2,
|
|
17
|
-
disabled: disabledProp = false,
|
|
18
|
-
format,
|
|
19
|
-
marks,
|
|
20
|
-
min = 0,
|
|
21
|
-
minLabel,
|
|
22
|
-
max = 10,
|
|
23
|
-
maxLabel,
|
|
24
|
-
onChange,
|
|
25
|
-
onChangeEnd,
|
|
26
|
-
restrictToMarks = false,
|
|
27
|
-
showTooltip = true,
|
|
28
|
-
step = 1,
|
|
29
|
-
stepMultiplier = 2,
|
|
30
|
-
value: valueProp,
|
|
31
|
-
defaultValue = min + (max - min) / 2,
|
|
32
|
-
...rest
|
|
33
|
-
}, ref) {
|
|
34
|
-
const [valueState, setValue] = useControlled({
|
|
35
|
-
controlled: valueProp,
|
|
36
|
-
default: defaultValue,
|
|
37
|
-
name: "Slider",
|
|
38
|
-
state: "value"
|
|
39
|
-
});
|
|
40
|
-
const {
|
|
41
|
-
a11yProps: { "aria-labelledby": formFieldLabelledBy } = {},
|
|
42
|
-
disabled: formFieldDisabled
|
|
43
|
-
} = useFormFieldProps();
|
|
44
|
-
const disabled = formFieldDisabled || disabledProp;
|
|
45
|
-
const inputRef = useRef(null);
|
|
46
|
-
const value = clamp(
|
|
47
|
-
valueState,
|
|
48
|
-
max,
|
|
49
|
-
min,
|
|
50
|
-
step,
|
|
51
|
-
decimalPlaces,
|
|
52
|
-
marks,
|
|
53
|
-
restrictToMarks
|
|
54
|
-
);
|
|
55
|
-
const progressPercentage = calculatePercentage(toFloat(value), max, min);
|
|
56
|
-
const lastValueRef = useRef(value);
|
|
57
|
-
const handleInputChange = (event) => {
|
|
58
|
-
const parsedValue = toFloat(event.target.value);
|
|
59
|
-
if (parsedValue !== lastValueRef.current) {
|
|
60
|
-
setValue(parsedValue);
|
|
61
|
-
onChange == null ? void 0 : onChange(event.nativeEvent, parsedValue);
|
|
62
|
-
onChangeEnd == null ? void 0 : onChangeEnd(event.nativeEvent, parsedValue);
|
|
63
|
-
lastValueRef.current = parsedValue;
|
|
64
|
-
}
|
|
65
|
-
};
|
|
66
|
-
const {
|
|
67
|
-
handleBlur,
|
|
68
|
-
handleFocus,
|
|
69
|
-
handleKeydownOnThumb,
|
|
70
|
-
handlePointerDownOnThumb,
|
|
71
|
-
handlePointerDownOnTrack,
|
|
72
|
-
isDragging,
|
|
73
|
-
isFocusVisible,
|
|
74
|
-
sliderRef
|
|
75
|
-
} = useSliderThumb({
|
|
76
|
-
decimalPlaces,
|
|
77
|
-
handleInputChange,
|
|
78
|
-
inputRef,
|
|
79
|
-
marks,
|
|
80
|
-
min,
|
|
81
|
-
max,
|
|
82
|
-
step,
|
|
83
|
-
value,
|
|
84
|
-
onChange,
|
|
85
|
-
onChangeEnd,
|
|
86
|
-
restrictToMarks,
|
|
87
|
-
setValue,
|
|
88
|
-
stepMultiplier
|
|
89
|
-
});
|
|
90
|
-
return /* @__PURE__ */ jsx(
|
|
91
|
-
SliderTrack,
|
|
92
|
-
{
|
|
93
|
-
disabled,
|
|
94
|
-
format,
|
|
95
|
-
handlePointerDown: handlePointerDownOnTrack,
|
|
96
|
-
isDragging,
|
|
97
|
-
min,
|
|
98
|
-
minLabel,
|
|
99
|
-
max,
|
|
100
|
-
maxLabel,
|
|
101
|
-
marks,
|
|
102
|
-
progressPercentage,
|
|
103
|
-
ref,
|
|
104
|
-
sliderRef,
|
|
105
|
-
...rest,
|
|
106
|
-
children: /* @__PURE__ */ jsx(
|
|
107
|
-
SliderThumb,
|
|
108
|
-
{
|
|
109
|
-
"aria-label": ariaLabel,
|
|
110
|
-
"aria-labelledby": clsx(formFieldLabelledBy, ariaLabelledBy) || void 0,
|
|
111
|
-
"aria-valuemax": max,
|
|
112
|
-
"aria-valuemin": min,
|
|
113
|
-
"aria-valuetext": ariaValueText,
|
|
114
|
-
accessibleMaxText,
|
|
115
|
-
accessibleMinText,
|
|
116
|
-
disabled,
|
|
117
|
-
format,
|
|
118
|
-
onBlur: handleBlur,
|
|
119
|
-
onFocus: handleFocus,
|
|
120
|
-
handleInputChange,
|
|
121
|
-
handlePointerDown: handlePointerDownOnThumb,
|
|
122
|
-
handleKeydownOnThumb,
|
|
123
|
-
inputRef,
|
|
124
|
-
isFocusVisible,
|
|
125
|
-
min,
|
|
126
|
-
minLabel,
|
|
127
|
-
max,
|
|
128
|
-
maxLabel,
|
|
129
|
-
offsetPercentage: `${progressPercentage}%`,
|
|
130
|
-
restrictToMarks,
|
|
131
|
-
sliderValue: value,
|
|
132
|
-
showTooltip,
|
|
133
|
-
step,
|
|
134
|
-
stepMultiplier,
|
|
135
|
-
trackDragging: isDragging
|
|
136
|
-
}
|
|
137
|
-
)
|
|
138
|
-
}
|
|
139
|
-
);
|
|
140
|
-
});
|
|
141
|
-
|
|
142
|
-
export { Slider };
|
|
143
|
-
//# sourceMappingURL=Slider.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sources":["../src/slider/Slider.tsx"],"sourcesContent":["import {\n type ChangeEvent,\n type HTMLAttributes,\n forwardRef,\n useRef,\n} from \"react\";\n\nimport { useControlled, useFormFieldProps } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { SliderThumb } from \"./internal/SliderThumb\";\nimport { SliderTrack } from \"./internal/SliderTrack\";\nimport { useSliderThumb } from \"./internal/useSliderThumb\";\nimport { calculatePercentage, clamp, toFloat } from \"./internal/utils\";\n\nexport interface SliderProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n /**\n * Accessible text to announce maximum value label.\n */\n accessibleMaxText?: string;\n /**\n * Accessible text to announce minimum value label.\n */\n accessibleMinText?: string;\n /**\n * When minimum and maximum labels are defined, ensure\n * they are confined within the boundary of the slider.\n * @default false\n */\n constrainLabelPosition?: boolean;\n /**\n * The number of allowed decimal places\n * @default 2\n */\n decimalPlaces?: number;\n /**\n * The default value. Use when the component is not controlled.\n * @default min + (max - min) / 2,\n */\n defaultValue?: number;\n /**\n * Disable the slider.\n */\n disabled?: boolean;\n /**\n * A callback to format the display value in the tooltip, min and max labels\n * and the `aria-valuetext` attribute.\n */\n format?: (value: number) => string | number;\n /**\n * Marks that are displayed under the track.\n */\n marks?: { label: string; value: number }[];\n /**\n * Maximum slider value.\n * @default 10\n */\n max?: number;\n /**\n * Minimum slider value.\n * @default 0\n */\n min?: number;\n /**\n * Label for maximum value.\n */\n maxLabel?: string;\n /**\n * Label for the minimum value.\n */\n minLabel?: string;\n /**\n * Callback called when slider value is changed.\n * It provides a generic event and the current value of the slider.\n */\n onChange?: (event: Event, value: number) => void;\n /**\n * Callback called when the slider is stopped from being dragged or\n * its value is changed from the keyboard. It provides a generic\n * event and the current value of the slider.\n */\n onChangeEnd?: (event: Event, value: number) => void;\n /**\n * Restrict slider value to marks only. The step will be ignored.\n */\n restrictToMarks?: boolean;\n /**\n * Show visual ticks above the marks.\n */\n showTicks?: boolean;\n /**\n * Show the slider value in a tooltip when the thumb is hovered.\n * @default true\n */\n showTooltip?: boolean;\n /**\n * Minimum interval the slider thumb can move.\n * @default 1\n */\n step?: number;\n /**\n * Maximum interval the slider thumb can move when using PageUp and PageDown keys.\n * @default 2\n */\n stepMultiplier?: number;\n /**\n * Value of the slider, to be used when in a controlled state.\n */\n value?: number;\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n {\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-valuetext\": ariaValueText,\n accessibleMaxText,\n accessibleMinText,\n decimalPlaces = 2,\n disabled: disabledProp = false,\n format,\n marks,\n min = 0,\n minLabel,\n max = 10,\n maxLabel,\n onChange,\n onChangeEnd,\n restrictToMarks = false,\n showTooltip = true,\n step = 1,\n stepMultiplier = 2,\n value: valueProp,\n defaultValue = min + (max - min) / 2,\n ...rest\n },\n ref,\n) {\n const [valueState, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Slider\",\n state: \"value\",\n });\n const {\n a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n disabled: formFieldDisabled,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n const inputRef = useRef<HTMLInputElement>(null);\n const value = clamp(\n valueState,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n const progressPercentage = calculatePercentage(toFloat(value), max, min);\n const lastValueRef = useRef<number>(value);\n\n const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n const parsedValue = toFloat(event.target.value);\n if (parsedValue !== lastValueRef.current) {\n setValue(parsedValue);\n onChange?.(event.nativeEvent, parsedValue);\n onChangeEnd?.(event.nativeEvent, parsedValue);\n lastValueRef.current = parsedValue;\n }\n };\n\n const {\n handleBlur,\n handleFocus,\n handleKeydownOnThumb,\n handlePointerDownOnThumb,\n handlePointerDownOnTrack,\n isDragging,\n isFocusVisible,\n sliderRef,\n } = useSliderThumb({\n decimalPlaces,\n handleInputChange,\n inputRef,\n marks,\n min,\n max,\n step,\n value,\n onChange,\n onChangeEnd,\n restrictToMarks,\n setValue,\n stepMultiplier,\n });\n\n return (\n <SliderTrack\n disabled={disabled}\n format={format}\n handlePointerDown={handlePointerDownOnTrack}\n isDragging={isDragging}\n min={min}\n minLabel={minLabel}\n max={max}\n maxLabel={maxLabel}\n marks={marks}\n progressPercentage={progressPercentage}\n ref={ref}\n sliderRef={sliderRef}\n {...rest}\n >\n <SliderThumb\n aria-label={ariaLabel}\n aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n aria-valuemax={max}\n aria-valuemin={min}\n aria-valuetext={ariaValueText}\n accessibleMaxText={accessibleMaxText}\n accessibleMinText={accessibleMinText}\n disabled={disabled}\n format={format}\n onBlur={handleBlur}\n onFocus={handleFocus}\n handleInputChange={handleInputChange}\n handlePointerDown={handlePointerDownOnThumb}\n handleKeydownOnThumb={handleKeydownOnThumb}\n inputRef={inputRef}\n isFocusVisible={isFocusVisible}\n min={min}\n minLabel={minLabel}\n max={max}\n maxLabel={maxLabel}\n offsetPercentage={`${progressPercentage}%`}\n restrictToMarks={restrictToMarks}\n sliderValue={value}\n showTooltip={showTooltip}\n step={step}\n stepMultiplier={stepMultiplier}\n trackDragging={isDragging}\n />\n </SliderTrack>\n );\n});\n"],"names":["Slider"],"mappings":"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"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = ".saltSliderThumb {\n align-items: center;\n background: var(--salt-accent-borderColor);\n cursor: var(--salt-selectable-cursor-hover);\n display: flex;\n height: var(--salt-size-selectable);\n outline: none;\n position: absolute;\n top: calc(((var(--salt-size-selectable) - var(--salt-size-bar)) / 2) * -1);\n transform: translateX(-50%);\n width: var(--salt-size-border-strong);\n}\n\n.saltSliderThumb-disabled {\n background: var(--salt-accent-borderColor-disabled);\n pointer-events: none;\n}\n\n.saltSliderThumb-focusVisible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-offset: var(--salt-focused-outlineOffset);\n outline-color: var(--salt-focused-outlineColor);\n}\n\n.saltSliderThumb:active,\n.saltSliderThumb-dragging {\n cursor: var(--draggable-grab-cursor-active);\n}\n\n.saltSliderThumb-input {\n border: 0;\n appearance: none;\n cursor: var(--salt-selectable-cursor-hover);\n height: var(--salt-size-base);\n left: var(--slider-progressPercentage);\n margin: 0;\n opacity: 0.0001;\n overflow: hidden;\n -webkit-appearance: none;\n pointer-events: none;\n width: var(--salt-size-base);\n padding: 0;\n position: absolute;\n transform: translateX(-50%);\n}\n\n.saltSliderThumb-secondThumb {\n /* The second thumb needs to sit on top the first thumb */\n z-index: 2;\n}\n\n/* Visually hide accessible text. Can not\n use visibility: hidden as we need the screen\n reader to announce it */\n.saltSliderThumb-accessibleText {\n position: absolute;\n height: 1px;\n width: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n";
|
|
2
|
-
|
|
3
|
-
export { css_248z as default };
|
|
4
|
-
//# sourceMappingURL=SliderThumb.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SliderThumb.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer, useId } from '@salt-ds/core';
|
|
3
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
|
-
import { useWindow } from '@salt-ds/window';
|
|
5
|
-
import { clsx } from 'clsx';
|
|
6
|
-
import { useState, useCallback, useEffect } from 'react';
|
|
7
|
-
import css_248z from './SliderThumb.css.js';
|
|
8
|
-
import { SliderTooltip } from './SliderTooltip.js';
|
|
9
|
-
|
|
10
|
-
const withBaseName = makePrefixer("saltSliderThumb");
|
|
11
|
-
const SliderThumb = ({
|
|
12
|
-
"aria-label": ariaLabel,
|
|
13
|
-
"aria-valuetext": ariaValueText,
|
|
14
|
-
"aria-labelledby": ariaLabelledBy,
|
|
15
|
-
accessibleMaxText,
|
|
16
|
-
accessibleMinText,
|
|
17
|
-
disabled,
|
|
18
|
-
format,
|
|
19
|
-
onBlur,
|
|
20
|
-
onFocus,
|
|
21
|
-
handleInputChange,
|
|
22
|
-
handleKeydownOnThumb,
|
|
23
|
-
handlePointerDown,
|
|
24
|
-
index = 0,
|
|
25
|
-
inputRef,
|
|
26
|
-
isFocusVisible,
|
|
27
|
-
max,
|
|
28
|
-
maxLabel,
|
|
29
|
-
min,
|
|
30
|
-
minLabel,
|
|
31
|
-
offsetPercentage,
|
|
32
|
-
restrictToMarks,
|
|
33
|
-
showTooltip,
|
|
34
|
-
sliderValue,
|
|
35
|
-
step,
|
|
36
|
-
stepMultiplier,
|
|
37
|
-
trackDragging,
|
|
38
|
-
...rest
|
|
39
|
-
}) => {
|
|
40
|
-
{
|
|
41
|
-
const targetWindow = useWindow();
|
|
42
|
-
useComponentCssInjection({
|
|
43
|
-
testId: "salt-slider-thumb",
|
|
44
|
-
css: css_248z,
|
|
45
|
-
window: targetWindow
|
|
46
|
-
});
|
|
47
|
-
const [isTooltipVisible, setIsTooltipVisible] = useState(false);
|
|
48
|
-
const id = useId();
|
|
49
|
-
const accessibleTextId = `saltSlider-${id}-${index}`;
|
|
50
|
-
const value = Array.isArray(sliderValue) ? sliderValue[index] : sliderValue;
|
|
51
|
-
const formattedValue = format ? format(value) : value;
|
|
52
|
-
const handleKeyDown = useCallback((event) => {
|
|
53
|
-
if (event.key === "Escape") {
|
|
54
|
-
setIsTooltipVisible(false);
|
|
55
|
-
}
|
|
56
|
-
}, []);
|
|
57
|
-
useEffect(() => {
|
|
58
|
-
if (showTooltip && isTooltipVisible) {
|
|
59
|
-
targetWindow == null ? void 0 : targetWindow.addEventListener("keydown", handleKeyDown);
|
|
60
|
-
}
|
|
61
|
-
return () => targetWindow == null ? void 0 : targetWindow.removeEventListener("keydown", handleKeyDown);
|
|
62
|
-
}, [handleKeyDown, isTooltipVisible, showTooltip, targetWindow]);
|
|
63
|
-
const handlePointerEnter = () => setIsTooltipVisible(true);
|
|
64
|
-
const handlePointerLeave = () => {
|
|
65
|
-
setTimeout(() => {
|
|
66
|
-
setIsTooltipVisible(false);
|
|
67
|
-
}, 300);
|
|
68
|
-
};
|
|
69
|
-
return /* @__PURE__ */ jsxs(
|
|
70
|
-
"div",
|
|
71
|
-
{
|
|
72
|
-
className: clsx(withBaseName(), {
|
|
73
|
-
[withBaseName("focusVisible")]: isFocusVisible,
|
|
74
|
-
[withBaseName("disabled")]: disabled,
|
|
75
|
-
[withBaseName("dragging")]: trackDragging,
|
|
76
|
-
[withBaseName("secondThumb")]: index === 1
|
|
77
|
-
}),
|
|
78
|
-
"data-testid": "sliderThumb",
|
|
79
|
-
onPointerDown: handlePointerDown,
|
|
80
|
-
style: { left: offsetPercentage },
|
|
81
|
-
...showTooltip && {
|
|
82
|
-
onPointerEnter: handlePointerEnter,
|
|
83
|
-
onPointerLeave: handlePointerLeave
|
|
84
|
-
},
|
|
85
|
-
children: [
|
|
86
|
-
showTooltip && /* @__PURE__ */ jsx(
|
|
87
|
-
SliderTooltip,
|
|
88
|
-
{
|
|
89
|
-
value: formattedValue,
|
|
90
|
-
open: (isTooltipVisible || trackDragging || isFocusVisible) && !disabled
|
|
91
|
-
}
|
|
92
|
-
),
|
|
93
|
-
/* @__PURE__ */ jsx(
|
|
94
|
-
"input",
|
|
95
|
-
{
|
|
96
|
-
disabled,
|
|
97
|
-
type: "range",
|
|
98
|
-
ref: inputRef,
|
|
99
|
-
onFocus,
|
|
100
|
-
onBlur,
|
|
101
|
-
className: withBaseName("input"),
|
|
102
|
-
value,
|
|
103
|
-
onChange: handleInputChange,
|
|
104
|
-
onKeyDown: handleKeydownOnThumb,
|
|
105
|
-
"aria-labelledby": ariaLabelledBy,
|
|
106
|
-
"aria-valuenow": value,
|
|
107
|
-
"aria-valuetext": ariaValueText || (format == null ? void 0 : format(value).toString()),
|
|
108
|
-
"aria-label": ariaLabel,
|
|
109
|
-
"aria-describedby": accessibleTextId,
|
|
110
|
-
min,
|
|
111
|
-
max,
|
|
112
|
-
step,
|
|
113
|
-
...rest
|
|
114
|
-
}
|
|
115
|
-
),
|
|
116
|
-
/* @__PURE__ */ jsxs(
|
|
117
|
-
"span",
|
|
118
|
-
{
|
|
119
|
-
"aria-hidden": "true",
|
|
120
|
-
id: accessibleTextId,
|
|
121
|
-
className: withBaseName("accessibleText"),
|
|
122
|
-
children: [
|
|
123
|
-
Array.isArray(sliderValue) && `${index === 0 ? "leading" : "trailing"}, ${(format == null ? void 0 : format(sliderValue[0])) || sliderValue[0]} to ${(format == null ? void 0 : format(sliderValue[1])) || sliderValue[1]}, `,
|
|
124
|
-
"range",
|
|
125
|
-
" ",
|
|
126
|
-
accessibleMinText ? `${accessibleMinText} ${min}, ` : `minimum ${(format == null ? void 0 : format(min)) || min}, `,
|
|
127
|
-
accessibleMaxText ? `${accessibleMaxText} ${max} ` : `maximum ${(format == null ? void 0 : format(max)) || max}`,
|
|
128
|
-
restrictToMarks ? ", custom increments" : step !== 1 && `, increments of ${step}`
|
|
129
|
-
]
|
|
130
|
-
}
|
|
131
|
-
)
|
|
132
|
-
]
|
|
133
|
-
}
|
|
134
|
-
);
|
|
135
|
-
}
|
|
136
|
-
};
|
|
137
|
-
|
|
138
|
-
export { SliderThumb };
|
|
139
|
-
//# sourceMappingURL=SliderThumb.js.map
|