@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.
Files changed (105) hide show
  1. package/CHANGELOG.md +65 -0
  2. package/css/salt-lab.css +111 -269
  3. package/dist-cjs/carousel/Carousel.css.js +1 -1
  4. package/dist-cjs/carousel/Carousel.js +30 -87
  5. package/dist-cjs/carousel/Carousel.js.map +1 -1
  6. package/dist-cjs/carousel/CarouselContext.js +62 -0
  7. package/dist-cjs/carousel/CarouselContext.js.map +1 -0
  8. package/dist-cjs/carousel/CarouselControls.css.js +6 -0
  9. package/dist-cjs/carousel/CarouselControls.css.js.map +1 -0
  10. package/dist-cjs/carousel/CarouselControls.js +122 -0
  11. package/dist-cjs/carousel/CarouselControls.js.map +1 -0
  12. package/dist-cjs/carousel/CarouselReducer.js +77 -0
  13. package/dist-cjs/carousel/CarouselReducer.js.map +1 -0
  14. package/dist-cjs/carousel/CarouselSlide.css.js +6 -0
  15. package/dist-cjs/carousel/CarouselSlide.css.js.map +1 -0
  16. package/dist-cjs/carousel/CarouselSlide.js +95 -45
  17. package/dist-cjs/carousel/CarouselSlide.js.map +1 -1
  18. package/dist-cjs/carousel/CarouselSlider.css.js +6 -0
  19. package/dist-cjs/carousel/CarouselSlider.css.js.map +1 -0
  20. package/dist-cjs/carousel/CarouselSlider.js +93 -0
  21. package/dist-cjs/carousel/CarouselSlider.js.map +1 -0
  22. package/dist-cjs/index.js +6 -6
  23. package/dist-es/carousel/Carousel.css.js +1 -1
  24. package/dist-es/carousel/Carousel.js +32 -89
  25. package/dist-es/carousel/Carousel.js.map +1 -1
  26. package/dist-es/carousel/CarouselContext.js +58 -0
  27. package/dist-es/carousel/CarouselContext.js.map +1 -0
  28. package/dist-es/carousel/CarouselControls.css.js +4 -0
  29. package/dist-es/carousel/CarouselControls.css.js.map +1 -0
  30. package/dist-es/carousel/CarouselControls.js +120 -0
  31. package/dist-es/carousel/CarouselControls.js.map +1 -0
  32. package/dist-es/carousel/CarouselReducer.js +75 -0
  33. package/dist-es/carousel/CarouselReducer.js.map +1 -0
  34. package/dist-es/carousel/CarouselSlide.css.js +4 -0
  35. package/dist-es/carousel/CarouselSlide.css.js.map +1 -0
  36. package/dist-es/carousel/CarouselSlide.js +96 -46
  37. package/dist-es/carousel/CarouselSlide.js.map +1 -1
  38. package/dist-es/carousel/CarouselSlider.css.js +4 -0
  39. package/dist-es/carousel/CarouselSlider.css.js.map +1 -0
  40. package/dist-es/carousel/CarouselSlider.js +91 -0
  41. package/dist-es/carousel/CarouselSlider.js.map +1 -0
  42. package/dist-es/index.js +3 -3
  43. package/dist-types/carousel/Carousel.d.ts +10 -23
  44. package/dist-types/carousel/CarouselContext.d.ts +11 -0
  45. package/dist-types/carousel/CarouselControls.d.ts +26 -0
  46. package/dist-types/carousel/CarouselReducer.d.ts +30 -0
  47. package/dist-types/carousel/CarouselSlide.d.ts +31 -8
  48. package/dist-types/carousel/CarouselSlider.d.ts +13 -0
  49. package/dist-types/carousel/index.d.ts +2 -0
  50. package/dist-types/index.d.ts +0 -1
  51. package/dist-types/utils/index.d.ts +1 -1
  52. package/package.json +2 -2
  53. package/dist-cjs/slider/RangeSlider.js +0 -182
  54. package/dist-cjs/slider/RangeSlider.js.map +0 -1
  55. package/dist-cjs/slider/Slider.js +0 -145
  56. package/dist-cjs/slider/Slider.js.map +0 -1
  57. package/dist-cjs/slider/internal/SliderThumb.css.js +0 -6
  58. package/dist-cjs/slider/internal/SliderThumb.css.js.map +0 -1
  59. package/dist-cjs/slider/internal/SliderThumb.js +0 -141
  60. package/dist-cjs/slider/internal/SliderThumb.js.map +0 -1
  61. package/dist-cjs/slider/internal/SliderTooltip.css.js +0 -6
  62. package/dist-cjs/slider/internal/SliderTooltip.css.js.map +0 -1
  63. package/dist-cjs/slider/internal/SliderTooltip.js +0 -58
  64. package/dist-cjs/slider/internal/SliderTooltip.js.map +0 -1
  65. package/dist-cjs/slider/internal/SliderTrack.css.js +0 -6
  66. package/dist-cjs/slider/internal/SliderTrack.css.js.map +0 -1
  67. package/dist-cjs/slider/internal/SliderTrack.js +0 -168
  68. package/dist-cjs/slider/internal/SliderTrack.js.map +0 -1
  69. package/dist-cjs/slider/internal/useRangeSliderThumb.js +0 -233
  70. package/dist-cjs/slider/internal/useRangeSliderThumb.js.map +0 -1
  71. package/dist-cjs/slider/internal/useSliderThumb.js +0 -162
  72. package/dist-cjs/slider/internal/useSliderThumb.js.map +0 -1
  73. package/dist-cjs/slider/internal/utils.js +0 -113
  74. package/dist-cjs/slider/internal/utils.js.map +0 -1
  75. package/dist-es/slider/RangeSlider.js +0 -180
  76. package/dist-es/slider/RangeSlider.js.map +0 -1
  77. package/dist-es/slider/Slider.js +0 -143
  78. package/dist-es/slider/Slider.js.map +0 -1
  79. package/dist-es/slider/internal/SliderThumb.css.js +0 -4
  80. package/dist-es/slider/internal/SliderThumb.css.js.map +0 -1
  81. package/dist-es/slider/internal/SliderThumb.js +0 -139
  82. package/dist-es/slider/internal/SliderThumb.js.map +0 -1
  83. package/dist-es/slider/internal/SliderTooltip.css.js +0 -4
  84. package/dist-es/slider/internal/SliderTooltip.css.js.map +0 -1
  85. package/dist-es/slider/internal/SliderTooltip.js +0 -56
  86. package/dist-es/slider/internal/SliderTooltip.js.map +0 -1
  87. package/dist-es/slider/internal/SliderTrack.css.js +0 -4
  88. package/dist-es/slider/internal/SliderTrack.css.js.map +0 -1
  89. package/dist-es/slider/internal/SliderTrack.js +0 -166
  90. package/dist-es/slider/internal/SliderTrack.js.map +0 -1
  91. package/dist-es/slider/internal/useRangeSliderThumb.js +0 -231
  92. package/dist-es/slider/internal/useRangeSliderThumb.js.map +0 -1
  93. package/dist-es/slider/internal/useSliderThumb.js +0 -160
  94. package/dist-es/slider/internal/useSliderThumb.js.map +0 -1
  95. package/dist-es/slider/internal/utils.js +0 -105
  96. package/dist-es/slider/internal/utils.js.map +0 -1
  97. package/dist-types/slider/RangeSlider.d.ts +0 -99
  98. package/dist-types/slider/Slider.d.ts +0 -100
  99. package/dist-types/slider/index.d.ts +0 -2
  100. package/dist-types/slider/internal/SliderThumb.d.ts +0 -28
  101. package/dist-types/slider/internal/SliderTooltip.d.ts +0 -6
  102. package/dist-types/slider/internal/SliderTrack.d.ts +0 -24
  103. package/dist-types/slider/internal/useRangeSliderThumb.d.ts +0 -30
  104. package/dist-types/slider/internal/useSliderThumb.d.ts +0 -28
  105. package/dist-types/slider/internal/utils.d.ts +0 -20
@@ -1,160 +0,0 @@
1
- import { useWindow } from '@salt-ds/window';
2
- import { useState, useRef, useCallback, useEffect } from 'react';
3
- import { getClickedPosition, getKeyboardValue } from './utils.js';
4
-
5
- const useSliderThumb = ({
6
- decimalPlaces,
7
- handleInputChange,
8
- inputRef,
9
- marks,
10
- min = 0,
11
- max = 10,
12
- step = 1,
13
- onChange,
14
- onChangeEnd,
15
- restrictToMarks,
16
- setValue,
17
- stepMultiplier,
18
- value
19
- }) => {
20
- const [isDragging, setIsDragging] = useState(false);
21
- const [isFocusVisible, setIsFocusVisible] = useState(false);
22
- const lastValueRef = useRef(value);
23
- const sliderRef = useRef(null);
24
- const targetWindow = useWindow();
25
- const handlePointerMove = useCallback(
26
- (event) => {
27
- if (!sliderRef.current) return;
28
- const newValue = getClickedPosition(
29
- sliderRef,
30
- event.clientX,
31
- max,
32
- min,
33
- step,
34
- decimalPlaces,
35
- marks,
36
- restrictToMarks
37
- );
38
- if (newValue === void 0 || lastValueRef.current === newValue) {
39
- return;
40
- }
41
- lastValueRef.current = newValue;
42
- setValue(newValue);
43
- onChange == null ? void 0 : onChange(event, newValue);
44
- },
45
- [decimalPlaces, marks, max, min, onChange, setValue, restrictToMarks, step]
46
- );
47
- const handlePointerUp = useCallback(
48
- (event) => {
49
- setIsDragging(false);
50
- setIsFocusVisible(false);
51
- onChangeEnd == null ? void 0 : onChangeEnd(event, lastValueRef.current);
52
- },
53
- [onChangeEnd]
54
- );
55
- useEffect(() => {
56
- if (isDragging) {
57
- targetWindow == null ? void 0 : targetWindow.addEventListener("pointermove", handlePointerMove);
58
- targetWindow == null ? void 0 : targetWindow.addEventListener("pointerup", handlePointerUp);
59
- } else {
60
- targetWindow == null ? void 0 : targetWindow.removeEventListener("pointermove", handlePointerMove);
61
- targetWindow == null ? void 0 : targetWindow.removeEventListener("pointerup", handlePointerUp);
62
- }
63
- return () => {
64
- targetWindow == null ? void 0 : targetWindow.removeEventListener("pointermove", handlePointerMove);
65
- targetWindow == null ? void 0 : targetWindow.removeEventListener("pointerup", handlePointerUp);
66
- };
67
- }, [handlePointerMove, handlePointerUp, isDragging, targetWindow]);
68
- const handlePointerDownOnThumb = useCallback(
69
- (event) => {
70
- event.preventDefault();
71
- event.stopPropagation();
72
- if (inputRef.current) inputRef.current.focus();
73
- setIsDragging(true);
74
- setIsFocusVisible(false);
75
- },
76
- [inputRef]
77
- );
78
- const handlePointerDownOnTrack = useCallback(
79
- (event) => {
80
- event.preventDefault();
81
- if (inputRef.current) inputRef.current.focus();
82
- setIsDragging(true);
83
- setIsFocusVisible(false);
84
- const newValue = getClickedPosition(
85
- sliderRef,
86
- event.clientX,
87
- max,
88
- min,
89
- step,
90
- decimalPlaces,
91
- marks,
92
- restrictToMarks
93
- );
94
- if (newValue === void 0 || lastValueRef.current === newValue) {
95
- return;
96
- }
97
- lastValueRef.current = newValue;
98
- setValue(newValue);
99
- onChange == null ? void 0 : onChange(event.nativeEvent, newValue);
100
- },
101
- [
102
- decimalPlaces,
103
- inputRef,
104
- marks,
105
- max,
106
- min,
107
- onChange,
108
- restrictToMarks,
109
- setValue,
110
- step
111
- ]
112
- );
113
- const handleKeydownOnThumb = useCallback(
114
- (event) => {
115
- const newValue = getKeyboardValue(
116
- event,
117
- value,
118
- step,
119
- stepMultiplier,
120
- max,
121
- min,
122
- restrictToMarks,
123
- marks
124
- );
125
- setIsFocusVisible(true);
126
- if (newValue === void 0 || lastValueRef.current === newValue) {
127
- return;
128
- }
129
- lastValueRef.current = newValue;
130
- handleInputChange({
131
- target: { value: newValue.toString() }
132
- });
133
- },
134
- [
135
- value,
136
- step,
137
- stepMultiplier,
138
- max,
139
- min,
140
- restrictToMarks,
141
- marks,
142
- handleInputChange
143
- ]
144
- );
145
- const handleFocus = () => setIsFocusVisible(true);
146
- const handleBlur = () => setIsFocusVisible(false);
147
- return {
148
- handleBlur,
149
- handleFocus,
150
- handleKeydownOnThumb,
151
- handlePointerDownOnThumb,
152
- handlePointerDownOnTrack,
153
- isDragging,
154
- isFocusVisible,
155
- sliderRef
156
- };
157
- };
158
-
159
- export { useSliderThumb };
160
- //# sourceMappingURL=useSliderThumb.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useSliderThumb.js","sources":["../src/slider/internal/useSliderThumb.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport {\n type ChangeEvent,\n type Dispatch,\n type RefObject,\n type SetStateAction,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport type { SliderProps } from \"../Slider\";\nimport { getClickedPosition, getKeyboardValue } from \"./utils\";\n\ntype UseSliderThumbProps = Pick<SliderProps, \"min\" | \"max\" | \"step\"> & {\n decimalPlaces: number;\n handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;\n inputRef: RefObject<HTMLInputElement>;\n marks?: { label: string; value: number }[];\n onChange?: (event: Event, value: number) => void;\n onChangeEnd?: (event: Event, value: number) => void;\n restrictToMarks?: boolean;\n setValue: Dispatch<SetStateAction<number>>;\n stepMultiplier: number;\n value: number;\n};\n\nexport const useSliderThumb = ({\n decimalPlaces,\n handleInputChange,\n inputRef,\n marks,\n min = 0,\n max = 10,\n step = 1,\n onChange,\n onChangeEnd,\n restrictToMarks,\n setValue,\n stepMultiplier,\n value,\n}: UseSliderThumbProps) => {\n const [isDragging, setIsDragging] = useState(false);\n const [isFocusVisible, setIsFocusVisible] = useState(false);\n const lastValueRef = useRef<number>(value);\n const sliderRef = useRef<HTMLDivElement>(null);\n const targetWindow = useWindow();\n\n const handlePointerMove = useCallback(\n (event: PointerEvent) => {\n if (!sliderRef.current) return;\n const newValue = getClickedPosition(\n sliderRef,\n event.clientX,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n if (newValue === undefined || lastValueRef.current === newValue) {\n return;\n }\n lastValueRef.current = newValue;\n setValue(newValue);\n onChange?.(event, newValue);\n },\n [decimalPlaces, marks, max, min, onChange, setValue, restrictToMarks, step],\n );\n\n const handlePointerUp = useCallback(\n (event: PointerEvent) => {\n setIsDragging(false);\n setIsFocusVisible(false);\n onChangeEnd?.(event, lastValueRef.current);\n },\n [onChangeEnd],\n );\n\n useEffect(() => {\n if (isDragging) {\n targetWindow?.addEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.addEventListener(\"pointerup\", handlePointerUp);\n } else {\n targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n }\n return () => {\n targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n };\n }, [handlePointerMove, handlePointerUp, isDragging, targetWindow]);\n\n const handlePointerDownOnThumb = useCallback(\n (event: React.PointerEvent<HTMLDivElement>) => {\n event.preventDefault();\n // To prevent the pointerdown event from bubbling up to the slider track\n // and triggering its pointerdown event\n event.stopPropagation();\n if (inputRef.current) inputRef.current.focus();\n setIsDragging(true);\n setIsFocusVisible(false);\n },\n [inputRef],\n );\n\n const handlePointerDownOnTrack = useCallback(\n (event: React.PointerEvent<HTMLDivElement>) => {\n event.preventDefault();\n if (inputRef.current) inputRef.current.focus();\n setIsDragging(true);\n setIsFocusVisible(false);\n const newValue = getClickedPosition(\n sliderRef,\n event.clientX,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n if (newValue === undefined || lastValueRef.current === newValue) {\n return;\n }\n lastValueRef.current = newValue;\n setValue(newValue);\n onChange?.(event.nativeEvent, newValue);\n },\n [\n decimalPlaces,\n inputRef,\n marks,\n max,\n min,\n onChange,\n restrictToMarks,\n setValue,\n step,\n ],\n );\n\n const handleKeydownOnThumb = useCallback(\n (event: React.KeyboardEvent) => {\n const newValue = getKeyboardValue(\n event,\n value,\n step,\n stepMultiplier,\n max,\n min,\n restrictToMarks,\n marks,\n );\n\n setIsFocusVisible(true);\n if (newValue === undefined || lastValueRef.current === newValue) {\n return;\n }\n lastValueRef.current = newValue;\n handleInputChange({\n target: { value: newValue.toString() },\n } as ChangeEvent<HTMLInputElement>);\n },\n [\n value,\n step,\n stepMultiplier,\n max,\n min,\n restrictToMarks,\n marks,\n handleInputChange,\n ],\n );\n\n const handleFocus = () => setIsFocusVisible(true);\n\n const handleBlur = () => setIsFocusVisible(false);\n\n return {\n handleBlur,\n handleFocus,\n handleKeydownOnThumb,\n handlePointerDownOnThumb,\n handlePointerDownOnTrack,\n isDragging,\n isFocusVisible,\n sliderRef,\n };\n};\n"],"names":[],"mappings":"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"}
@@ -1,105 +0,0 @@
1
- const toFloat = (value) => typeof value === "string" ? Number.parseFloat(value) : value;
2
- const calculateMarkPosition = (value, max, min) => {
3
- if (min === max) {
4
- return 0;
5
- }
6
- const clampedValue = Number.isNaN(toFloat(value)) ? min : Math.min(Math.max(toFloat(value), min), max);
7
- const markPosition = (clampedValue - min) / (max - min) * 100;
8
- return Math.round(markPosition * 100) / 100;
9
- };
10
- const calculatePercentage = (value, max, min) => (value - min) / (max - min) * 100;
11
- const clamp = (value, max, min, step, decimalPlaces, marks, restrictToMarks) => {
12
- if (Number.isNaN(value)) {
13
- return min;
14
- }
15
- const clampedValue = Math.min(Math.max(value, min), max);
16
- if (restrictToMarks && marks) {
17
- let closestMark = marks[0].value;
18
- let smallestDifference = Math.abs(clampedValue - closestMark);
19
- for (let i = 1; i < marks.length; i++) {
20
- const currentDifference = Math.abs(clampedValue - marks[i].value);
21
- if (currentDifference < smallestDifference) {
22
- smallestDifference = currentDifference;
23
- closestMark = marks[i].value;
24
- }
25
- }
26
- return closestMark;
27
- }
28
- let roundedValue = Math.round(clampedValue / step) * step;
29
- if (roundedValue > max) {
30
- roundedValue = max;
31
- } else if (roundedValue < min) {
32
- roundedValue = min;
33
- }
34
- return Number.parseFloat(roundedValue.toFixed(decimalPlaces));
35
- };
36
- const clampRange = (range, max, min, step, decimalPlaces, marks, restrictToMarks) => {
37
- let [start, end] = range;
38
- if (Number.isNaN(start)) {
39
- start = min;
40
- }
41
- if (Number.isNaN(end)) {
42
- end = max;
43
- }
44
- if (start > end) {
45
- [start, end] = [end, start];
46
- }
47
- start = clamp(start, max, min, step, decimalPlaces, marks, restrictToMarks);
48
- end = clamp(end, max, min, step, decimalPlaces, marks, restrictToMarks);
49
- return [start, end];
50
- };
51
- const getClickedPosition = (sliderRef, clientX, max, min, step, decimalPlaces, marks, restrictToMarks) => {
52
- if (!sliderRef.current) return;
53
- const sliderRect = sliderRef.current.getBoundingClientRect();
54
- const rawValue = (clientX - sliderRect.left) / sliderRect.width * (max - min) + min;
55
- const steppedValue = Math.round(rawValue / step) * step;
56
- return clamp(
57
- steppedValue,
58
- max,
59
- min,
60
- step,
61
- decimalPlaces,
62
- marks,
63
- restrictToMarks
64
- );
65
- };
66
- const getKeyboardValue = (event, value, step, stepMultiplier, max, min, restrictToMarks, marks) => {
67
- let newValue = value;
68
- if (restrictToMarks && marks && marks.length >= 1) {
69
- const currentIndex = marks.findIndex((mark) => mark.value === value);
70
- switch (event.key) {
71
- case "ArrowUp":
72
- case "ArrowRight":
73
- case "PageUp":
74
- if (currentIndex < marks.length - 1) {
75
- newValue = marks[currentIndex + 1].value;
76
- }
77
- break;
78
- case "ArrowDown":
79
- case "ArrowLeft":
80
- case "PageDown":
81
- if (currentIndex > 0) {
82
- newValue = marks[currentIndex - 1].value;
83
- }
84
- break;
85
- default:
86
- return newValue;
87
- }
88
- } else {
89
- switch (event.key) {
90
- case "PageUp":
91
- newValue = Math.min(value + step * stepMultiplier, max);
92
- break;
93
- case "PageDown":
94
- newValue = Math.max(value - step * stepMultiplier, min);
95
- break;
96
- default:
97
- return newValue;
98
- }
99
- }
100
- event.preventDefault();
101
- return newValue;
102
- };
103
-
104
- export { calculateMarkPosition, calculatePercentage, clamp, clampRange, getClickedPosition, getKeyboardValue, toFloat };
105
- //# 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,99 +0,0 @@
1
- import { type HTMLAttributes } from "react";
2
- export interface RangeSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
3
- /**
4
- * Accessible text to announce maximum value label.
5
- */
6
- accessibleMaxText?: string;
7
- /**
8
- * Accessible text to announce minimum value label.
9
- */
10
- accessibleMinText?: string;
11
- /**
12
- * When minimum and maximum labels are defined, ensure
13
- * they are confined within the boundary of the slider.
14
- */
15
- constrainLabelPosition?: boolean;
16
- /**
17
- * The number of allowed decimal places
18
- * @default 2
19
- */
20
- decimalPlaces?: number;
21
- /**
22
- * The default value. Use when the component is not controlled.
23
- * @default [min, min + (max - min) / 2]
24
- */
25
- defaultValue?: [number, number];
26
- /**
27
- * Disable the slider.
28
- */
29
- disabled?: boolean;
30
- /**
31
- * Show visual ticks above the marks.
32
- */
33
- showTicks?: boolean;
34
- /**
35
- * A callback to format the display value in the tooltip, min and max labels
36
- * and the `aria-valuetext` attribute.
37
- */
38
- format?: (value: number) => string | number;
39
- /**
40
- * Marks that are displayed under the track.
41
- */
42
- marks?: {
43
- label: string;
44
- value: number;
45
- }[];
46
- /**
47
- * Maximum slider value.
48
- * @default 10
49
- */
50
- max?: number;
51
- /**
52
- * Minimum slider value.
53
- * @default 0
54
- */
55
- min?: number;
56
- /**
57
- * Label for maximum value.
58
- */
59
- maxLabel?: string;
60
- /**
61
- * Label for minimum value.
62
- */
63
- minLabel?: string;
64
- /**
65
- * Callback called when slider value is changed.
66
- * It provides a generic event and the current value of the slider.
67
- */
68
- onChange?: (event: Event, value: [number, number]) => void;
69
- /**
70
- * Callback called when the slider is stopped from being dragged or
71
- * its value is changed from the keyboard. It provides a generic
72
- * event and the current value of the slider.
73
- */
74
- onChangeEnd?: (event: Event, value: [number, number]) => void;
75
- /**
76
- * Restrict slider value to marks only. The step will be ignored.
77
- */
78
- restrictToMarks?: boolean;
79
- /**
80
- * Show the slider value in a tooltip when the thumb is hovered.
81
- * @default true
82
- */
83
- showTooltip?: boolean;
84
- /**
85
- * Minimum interval the slider thumb can move.
86
- * @default 1
87
- */
88
- step?: number;
89
- /**
90
- * Maximum interval the slider thumb can move when using PageUp and PageDown keys.
91
- * @default 2
92
- */
93
- stepMultiplier?: number;
94
- /**
95
- * Value of the slider, to be used when in a controlled state.
96
- */
97
- value?: [number, number];
98
- }
99
- export declare const RangeSlider: import("react").ForwardRefExoticComponent<RangeSliderProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -1,100 +0,0 @@
1
- import { type HTMLAttributes } from "react";
2
- export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
3
- /**
4
- * Accessible text to announce maximum value label.
5
- */
6
- accessibleMaxText?: string;
7
- /**
8
- * Accessible text to announce minimum value label.
9
- */
10
- accessibleMinText?: string;
11
- /**
12
- * When minimum and maximum labels are defined, ensure
13
- * they are confined within the boundary of the slider.
14
- * @default false
15
- */
16
- constrainLabelPosition?: boolean;
17
- /**
18
- * The number of allowed decimal places
19
- * @default 2
20
- */
21
- decimalPlaces?: number;
22
- /**
23
- * The default value. Use when the component is not controlled.
24
- * @default min + (max - min) / 2,
25
- */
26
- defaultValue?: number;
27
- /**
28
- * Disable the slider.
29
- */
30
- disabled?: boolean;
31
- /**
32
- * A callback to format the display value in the tooltip, min and max labels
33
- * and the `aria-valuetext` attribute.
34
- */
35
- format?: (value: number) => string | number;
36
- /**
37
- * Marks that are displayed under the track.
38
- */
39
- marks?: {
40
- label: string;
41
- value: number;
42
- }[];
43
- /**
44
- * Maximum slider value.
45
- * @default 10
46
- */
47
- max?: number;
48
- /**
49
- * Minimum slider value.
50
- * @default 0
51
- */
52
- min?: number;
53
- /**
54
- * Label for maximum value.
55
- */
56
- maxLabel?: string;
57
- /**
58
- * Label for the minimum value.
59
- */
60
- minLabel?: string;
61
- /**
62
- * Callback called when slider value is changed.
63
- * It provides a generic event and the current value of the slider.
64
- */
65
- onChange?: (event: Event, value: number) => void;
66
- /**
67
- * Callback called when the slider is stopped from being dragged or
68
- * its value is changed from the keyboard. It provides a generic
69
- * event and the current value of the slider.
70
- */
71
- onChangeEnd?: (event: Event, value: number) => void;
72
- /**
73
- * Restrict slider value to marks only. The step will be ignored.
74
- */
75
- restrictToMarks?: boolean;
76
- /**
77
- * Show visual ticks above the marks.
78
- */
79
- showTicks?: boolean;
80
- /**
81
- * Show the slider value in a tooltip when the thumb is hovered.
82
- * @default true
83
- */
84
- showTooltip?: boolean;
85
- /**
86
- * Minimum interval the slider thumb can move.
87
- * @default 1
88
- */
89
- step?: number;
90
- /**
91
- * Maximum interval the slider thumb can move when using PageUp and PageDown keys.
92
- * @default 2
93
- */
94
- stepMultiplier?: number;
95
- /**
96
- * Value of the slider, to be used when in a controlled state.
97
- */
98
- value?: number;
99
- }
100
- export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -1,2 +0,0 @@
1
- export * from "./Slider";
2
- export * from "./RangeSlider";
@@ -1,28 +0,0 @@
1
- import { type ChangeEvent, type ComponentPropsWithoutRef, type RefObject } from "react";
2
- interface SliderThumbProps extends Omit<ComponentPropsWithoutRef<"input">, "onChange" | "defaultValue" | "min" | "max"> {
3
- accessibleMaxText?: string;
4
- accessibleMinText?: string;
5
- disabled: boolean;
6
- format?: (value: number) => number | string;
7
- handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
8
- handleKeydownOnThumb: (event: React.KeyboardEvent) => void;
9
- handlePointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
10
- index?: number;
11
- inputRef?: RefObject<HTMLInputElement>;
12
- isFocusVisible: boolean;
13
- max: number;
14
- maxLabel?: string;
15
- min: number;
16
- minLabel?: string;
17
- offsetPercentage?: string;
18
- onBlur: () => void;
19
- onFocus: () => void;
20
- restrictToMarks?: boolean;
21
- showTooltip?: boolean;
22
- sliderValue: [number, number] | number;
23
- step: number;
24
- stepMultiplier: number;
25
- trackDragging: boolean;
26
- }
27
- export declare const SliderThumb: ({ "aria-label": ariaLabel, "aria-valuetext": ariaValueText, "aria-labelledby": ariaLabelledBy, accessibleMaxText, accessibleMinText, disabled, format, onBlur, onFocus, handleInputChange, handleKeydownOnThumb, handlePointerDown, index, inputRef, isFocusVisible, max, maxLabel, min, minLabel, offsetPercentage, restrictToMarks, showTooltip, sliderValue, step, stepMultiplier, trackDragging, ...rest }: SliderThumbProps) => import("react/jsx-runtime").JSX.Element;
28
- export {};
@@ -1,6 +0,0 @@
1
- interface SliderTooltipProps {
2
- value: number | string;
3
- open?: boolean;
4
- }
5
- export declare const SliderTooltip: ({ value, open }: SliderTooltipProps) => import("react/jsx-runtime").JSX.Element;
6
- export {};
@@ -1,24 +0,0 @@
1
- import { type HTMLAttributes, type RefObject } from "react";
2
- interface SliderTrackProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
3
- children: React.ReactNode;
4
- constrainLabelPosition?: boolean;
5
- disabled: boolean;
6
- showTicks?: boolean;
7
- format?: (value: number) => string | number;
8
- handlePointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
9
- isDragging: boolean;
10
- isRange?: boolean;
11
- marks?: {
12
- label: string;
13
- value: number;
14
- }[];
15
- max: number;
16
- maxLabel?: number | string;
17
- min: number;
18
- minLabel?: number | string;
19
- progressPercentage?: number;
20
- progressPercentageRange?: [number, number];
21
- sliderRef: RefObject<HTMLDivElement>;
22
- }
23
- export declare const SliderTrack: import("react").ForwardRefExoticComponent<SliderTrackProps & import("react").RefAttributes<HTMLDivElement>>;
24
- export {};
@@ -1,30 +0,0 @@
1
- import { type ChangeEvent, type Dispatch, type RefObject, type SetStateAction } from "react";
2
- import type { SliderProps } from "../Slider";
3
- declare type UseRangeSliderThumbProps = Pick<SliderProps, "min" | "max" | "step"> & {
4
- decimalPlaces: number;
5
- handleInputChange: (event: ChangeEvent<HTMLInputElement>, thumbIndex: number) => void;
6
- inputRefs: RefObject<HTMLInputElement>[];
7
- marks?: {
8
- label: string;
9
- value: number;
10
- }[];
11
- onChange?: (event: Event, value: [number, number]) => void;
12
- onChangeEnd?: (event: Event, value: [number, number]) => void;
13
- restrictToMarks?: boolean;
14
- setValue: Dispatch<SetStateAction<[number, number]>>;
15
- stepMultiplier: number;
16
- value: [number, number];
17
- };
18
- export declare const useRangeSliderThumb: ({ decimalPlaces, handleInputChange, inputRefs, marks, min, max, step, onChange, onChangeEnd, restrictToMarks, setValue, stepMultiplier, value, }: UseRangeSliderThumbProps) => {
19
- handleBlur: (thumbIndex: number) => void;
20
- handleFocus: (thumbIndex: number) => void;
21
- handleKeydownOnThumb: (event: React.KeyboardEvent, thumbIndex: number) => void;
22
- handlePointerDownOnThumb: (event: React.PointerEvent<HTMLDivElement>, thumbIndex: number) => void;
23
- handlePointerDownOnTrack: (event: React.PointerEvent<HTMLDivElement>) => void;
24
- isDragging: boolean;
25
- isFocusVisible: boolean;
26
- preventThumbOverlap: (currentValue: number, value: [number, number], thumbIndex: number) => [number, number];
27
- sliderRef: RefObject<HTMLDivElement>;
28
- thumbIndexState: number;
29
- };
30
- export {};
@@ -1,28 +0,0 @@
1
- import { type ChangeEvent, type Dispatch, type RefObject, type SetStateAction } from "react";
2
- import type { SliderProps } from "../Slider";
3
- declare type UseSliderThumbProps = Pick<SliderProps, "min" | "max" | "step"> & {
4
- decimalPlaces: number;
5
- handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
6
- inputRef: RefObject<HTMLInputElement>;
7
- marks?: {
8
- label: string;
9
- value: number;
10
- }[];
11
- onChange?: (event: Event, value: number) => void;
12
- onChangeEnd?: (event: Event, value: number) => void;
13
- restrictToMarks?: boolean;
14
- setValue: Dispatch<SetStateAction<number>>;
15
- stepMultiplier: number;
16
- value: number;
17
- };
18
- export declare const useSliderThumb: ({ decimalPlaces, handleInputChange, inputRef, marks, min, max, step, onChange, onChangeEnd, restrictToMarks, setValue, stepMultiplier, value, }: UseSliderThumbProps) => {
19
- handleBlur: () => void;
20
- handleFocus: () => void;
21
- handleKeydownOnThumb: (event: React.KeyboardEvent) => void;
22
- handlePointerDownOnThumb: (event: React.PointerEvent<HTMLDivElement>) => void;
23
- handlePointerDownOnTrack: (event: React.PointerEvent<HTMLDivElement>) => void;
24
- isDragging: boolean;
25
- isFocusVisible: boolean;
26
- sliderRef: RefObject<HTMLDivElement>;
27
- };
28
- export {};
@@ -1,20 +0,0 @@
1
- import type { RefObject } from "react";
2
- export declare const toFloat: (value: number | string) => number;
3
- export declare const calculateMarkPosition: (value: number | string, max: number, min: number) => number;
4
- export declare const calculatePercentage: (value: number, max: number, min: number) => number;
5
- export declare const clamp: (value: number, max: number, min: number, step: number, decimalPlaces: number, marks?: {
6
- value: number;
7
- label: string;
8
- }[] | undefined, restrictToMarks?: boolean | undefined) => number;
9
- export declare const clampRange: (range: [number, number], max: number, min: number, step: number, decimalPlaces: number, marks?: {
10
- value: number;
11
- label: string;
12
- }[] | undefined, restrictToMarks?: boolean | undefined) => [number, number];
13
- export declare const getClickedPosition: (sliderRef: RefObject<HTMLDivElement>, clientX: number, max: number, min: number, step: number, decimalPlaces: number, marks?: {
14
- label: string;
15
- value: number;
16
- }[] | undefined, restrictToMarks?: boolean | undefined) => number | undefined;
17
- export declare const getKeyboardValue: (event: React.KeyboardEvent, value: number, step: number, stepMultiplier: number, max: number, min: number, restrictToMarks?: boolean | undefined, marks?: {
18
- label: string;
19
- value: number;
20
- }[] | undefined) => number;