@salt-ds/core 1.43.0 → 1.44.1
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 +49 -0
- package/css/salt-core.css +256 -1
- package/dist-cjs/combo-box/ComboBox.js +4 -1
- package/dist-cjs/combo-box/ComboBox.js.map +1 -1
- package/dist-cjs/dropdown/Dropdown.js +6 -2
- package/dist-cjs/dropdown/Dropdown.js.map +1 -1
- package/dist-cjs/index.js +4 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/list-box/ListBox.js +6 -2
- package/dist-cjs/list-box/ListBox.js.map +1 -1
- package/dist-cjs/list-control/ListControlState.js +6 -5
- package/dist-cjs/list-control/ListControlState.js.map +1 -1
- package/dist-cjs/slider/RangeSlider.js +188 -0
- package/dist-cjs/slider/RangeSlider.js.map +1 -0
- package/dist-cjs/slider/Slider.js +151 -0
- package/dist-cjs/slider/Slider.js.map +1 -0
- package/dist-cjs/slider/internal/SliderThumb.css.js +6 -0
- package/dist-cjs/slider/internal/SliderThumb.css.js.map +1 -0
- package/dist-cjs/slider/internal/SliderThumb.js +141 -0
- package/dist-cjs/slider/internal/SliderThumb.js.map +1 -0
- package/dist-cjs/slider/internal/SliderTooltip.css.js +6 -0
- package/dist-cjs/slider/internal/SliderTooltip.css.js.map +1 -0
- package/dist-cjs/slider/internal/SliderTooltip.js +70 -0
- package/dist-cjs/slider/internal/SliderTooltip.js.map +1 -0
- package/dist-cjs/slider/internal/SliderTrack.css.js +6 -0
- package/dist-cjs/slider/internal/SliderTrack.css.js.map +1 -0
- package/dist-cjs/slider/internal/SliderTrack.js +179 -0
- package/dist-cjs/slider/internal/SliderTrack.js.map +1 -0
- package/dist-cjs/slider/internal/useRangeSliderThumb.js +234 -0
- package/dist-cjs/slider/internal/useRangeSliderThumb.js.map +1 -0
- package/dist-cjs/slider/internal/useSliderThumb.js +162 -0
- package/dist-cjs/slider/internal/useSliderThumb.js.map +1 -0
- package/dist-cjs/slider/internal/utils.js +127 -0
- package/dist-cjs/slider/internal/utils.js.map +1 -0
- package/dist-cjs/switch/Switch.js.map +1 -1
- package/dist-es/combo-box/ComboBox.js +4 -1
- package/dist-es/combo-box/ComboBox.js.map +1 -1
- package/dist-es/dropdown/Dropdown.js +6 -2
- package/dist-es/dropdown/Dropdown.js.map +1 -1
- package/dist-es/index.js +2 -0
- package/dist-es/index.js.map +1 -1
- package/dist-es/list-box/ListBox.js +6 -2
- package/dist-es/list-box/ListBox.js.map +1 -1
- package/dist-es/list-control/ListControlState.js +6 -5
- package/dist-es/list-control/ListControlState.js.map +1 -1
- package/dist-es/slider/RangeSlider.js +186 -0
- package/dist-es/slider/RangeSlider.js.map +1 -0
- package/dist-es/slider/Slider.js +149 -0
- package/dist-es/slider/Slider.js.map +1 -0
- package/dist-es/slider/internal/SliderThumb.css.js +4 -0
- package/dist-es/slider/internal/SliderThumb.css.js.map +1 -0
- package/dist-es/slider/internal/SliderThumb.js +139 -0
- package/dist-es/slider/internal/SliderThumb.js.map +1 -0
- package/dist-es/slider/internal/SliderTooltip.css.js +4 -0
- package/dist-es/slider/internal/SliderTooltip.css.js.map +1 -0
- package/dist-es/slider/internal/SliderTooltip.js +68 -0
- package/dist-es/slider/internal/SliderTooltip.js.map +1 -0
- package/dist-es/slider/internal/SliderTrack.css.js +4 -0
- package/dist-es/slider/internal/SliderTrack.css.js.map +1 -0
- package/dist-es/slider/internal/SliderTrack.js +177 -0
- package/dist-es/slider/internal/SliderTrack.js.map +1 -0
- package/dist-es/slider/internal/useRangeSliderThumb.js +232 -0
- package/dist-es/slider/internal/useRangeSliderThumb.js.map +1 -0
- package/dist-es/slider/internal/useSliderThumb.js +160 -0
- package/dist-es/slider/internal/useSliderThumb.js.map +1 -0
- package/dist-es/slider/internal/utils.js +119 -0
- package/dist-es/slider/internal/utils.js.map +1 -0
- package/dist-es/switch/Switch.js.map +1 -1
- package/dist-types/combo-box/useComboBox.d.ts +7 -7
- package/dist-types/index.d.ts +1 -0
- package/dist-types/list-control/ListControlState.d.ts +7 -7
- package/dist-types/slider/RangeSlider.d.ts +99 -0
- package/dist-types/slider/Slider.d.ts +100 -0
- package/dist-types/slider/index.d.ts +2 -0
- package/dist-types/slider/internal/SliderThumb.d.ts +26 -0
- package/dist-types/slider/internal/SliderTooltip.d.ts +6 -0
- package/dist-types/slider/internal/SliderTrack.d.ts +24 -0
- package/dist-types/slider/internal/useRangeSliderThumb.d.ts +30 -0
- package/dist-types/slider/internal/useSliderThumb.d.ts +28 -0
- package/dist-types/slider/internal/utils.d.ts +20 -0
- package/dist-types/switch/Switch.d.ts +7 -7
- package/package.json +1 -1
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var styles = require('@salt-ds/styles');
|
|
5
|
+
var window = require('@salt-ds/window');
|
|
6
|
+
var clsx = require('clsx');
|
|
7
|
+
var React = require('react');
|
|
8
|
+
var makePrefixer = require('../../utils/makePrefixer.js');
|
|
9
|
+
require('../../utils/useFloatingUI/useFloatingUI.js');
|
|
10
|
+
var useId = require('../../utils/useId.js');
|
|
11
|
+
require('../../salt-provider/SaltProvider.js');
|
|
12
|
+
require('../../viewport/ViewportProvider.js');
|
|
13
|
+
var SliderThumb$1 = require('./SliderThumb.css.js');
|
|
14
|
+
var SliderTooltip = require('./SliderTooltip.js');
|
|
15
|
+
|
|
16
|
+
const withBaseName = makePrefixer.makePrefixer("saltSliderThumb");
|
|
17
|
+
const SliderThumb = ({
|
|
18
|
+
"aria-label": ariaLabel,
|
|
19
|
+
"aria-valuetext": ariaValueText,
|
|
20
|
+
"aria-labelledby": ariaLabelledBy,
|
|
21
|
+
accessibleMaxText,
|
|
22
|
+
accessibleMinText,
|
|
23
|
+
disabled,
|
|
24
|
+
format,
|
|
25
|
+
handleInputChange,
|
|
26
|
+
handleKeydownOnThumb,
|
|
27
|
+
handlePointerDown,
|
|
28
|
+
index = 0,
|
|
29
|
+
inputRef,
|
|
30
|
+
isFocusVisible,
|
|
31
|
+
max,
|
|
32
|
+
maxLabel,
|
|
33
|
+
min,
|
|
34
|
+
minLabel,
|
|
35
|
+
offsetPercentage,
|
|
36
|
+
restrictToMarks,
|
|
37
|
+
showTooltip,
|
|
38
|
+
sliderValue,
|
|
39
|
+
step,
|
|
40
|
+
stepMultiplier,
|
|
41
|
+
trackDragging,
|
|
42
|
+
...rest
|
|
43
|
+
}) => {
|
|
44
|
+
{
|
|
45
|
+
const targetWindow = window.useWindow();
|
|
46
|
+
styles.useComponentCssInjection({
|
|
47
|
+
testId: "salt-slider-thumb",
|
|
48
|
+
css: SliderThumb$1,
|
|
49
|
+
window: targetWindow
|
|
50
|
+
});
|
|
51
|
+
const [isTooltipVisible, setIsTooltipVisible] = React.useState(false);
|
|
52
|
+
const id = useId.useId();
|
|
53
|
+
const accessibleTextId = `saltSlider-${id}-${index}`;
|
|
54
|
+
const value = Array.isArray(sliderValue) ? sliderValue[index] : sliderValue;
|
|
55
|
+
const formattedValue = format ? format(value) : value;
|
|
56
|
+
const handleKeyDown = React.useCallback((event) => {
|
|
57
|
+
if (event.key === "Escape") {
|
|
58
|
+
setIsTooltipVisible(false);
|
|
59
|
+
}
|
|
60
|
+
}, []);
|
|
61
|
+
React.useEffect(() => {
|
|
62
|
+
if (showTooltip && isTooltipVisible) {
|
|
63
|
+
targetWindow == null ? void 0 : targetWindow.addEventListener("keydown", handleKeyDown);
|
|
64
|
+
}
|
|
65
|
+
return () => targetWindow == null ? void 0 : targetWindow.removeEventListener("keydown", handleKeyDown);
|
|
66
|
+
}, [handleKeyDown, isTooltipVisible, showTooltip, targetWindow]);
|
|
67
|
+
const handlePointerEnter = () => setIsTooltipVisible(true);
|
|
68
|
+
const handlePointerLeave = () => {
|
|
69
|
+
setTimeout(() => {
|
|
70
|
+
setIsTooltipVisible(false);
|
|
71
|
+
}, 300);
|
|
72
|
+
};
|
|
73
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
74
|
+
"div",
|
|
75
|
+
{
|
|
76
|
+
className: clsx.clsx(withBaseName(), {
|
|
77
|
+
[withBaseName("focusVisible")]: isFocusVisible,
|
|
78
|
+
[withBaseName("disabled")]: disabled,
|
|
79
|
+
[withBaseName("dragging")]: trackDragging,
|
|
80
|
+
[withBaseName("secondThumb")]: index === 1
|
|
81
|
+
}),
|
|
82
|
+
"data-testid": "sliderThumb",
|
|
83
|
+
onPointerDown: handlePointerDown,
|
|
84
|
+
style: { left: offsetPercentage },
|
|
85
|
+
...showTooltip && {
|
|
86
|
+
onPointerEnter: handlePointerEnter,
|
|
87
|
+
onPointerLeave: handlePointerLeave
|
|
88
|
+
},
|
|
89
|
+
children: [
|
|
90
|
+
showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
|
|
91
|
+
SliderTooltip.SliderTooltip,
|
|
92
|
+
{
|
|
93
|
+
value: formattedValue,
|
|
94
|
+
open: (isTooltipVisible || trackDragging || isFocusVisible) && !disabled
|
|
95
|
+
}
|
|
96
|
+
),
|
|
97
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
98
|
+
"input",
|
|
99
|
+
{
|
|
100
|
+
disabled,
|
|
101
|
+
type: "range",
|
|
102
|
+
ref: inputRef,
|
|
103
|
+
className: withBaseName("input"),
|
|
104
|
+
value,
|
|
105
|
+
onChange: handleInputChange,
|
|
106
|
+
onKeyDown: handleKeydownOnThumb,
|
|
107
|
+
"aria-labelledby": ariaLabelledBy,
|
|
108
|
+
"aria-valuenow": value,
|
|
109
|
+
"aria-valuetext": ariaValueText || (format == null ? void 0 : format(value).toString()),
|
|
110
|
+
"aria-label": ariaLabel,
|
|
111
|
+
"aria-describedby": accessibleTextId,
|
|
112
|
+
min,
|
|
113
|
+
max,
|
|
114
|
+
step,
|
|
115
|
+
...rest
|
|
116
|
+
}
|
|
117
|
+
),
|
|
118
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
119
|
+
"span",
|
|
120
|
+
{
|
|
121
|
+
"aria-hidden": "true",
|
|
122
|
+
id: accessibleTextId,
|
|
123
|
+
className: withBaseName("accessibleText"),
|
|
124
|
+
children: [
|
|
125
|
+
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]}, `,
|
|
126
|
+
"range",
|
|
127
|
+
" ",
|
|
128
|
+
accessibleMinText ? `${accessibleMinText} ${min}, ` : `minimum ${(format == null ? void 0 : format(min)) || min}, `,
|
|
129
|
+
accessibleMaxText ? `${accessibleMaxText} ${max} ` : `maximum ${(format == null ? void 0 : format(max)) || max}`,
|
|
130
|
+
restrictToMarks ? ", custom increments" : step !== 1 && `, increments of ${step}`
|
|
131
|
+
]
|
|
132
|
+
}
|
|
133
|
+
)
|
|
134
|
+
]
|
|
135
|
+
}
|
|
136
|
+
);
|
|
137
|
+
}
|
|
138
|
+
};
|
|
139
|
+
|
|
140
|
+
exports.SliderThumb = SliderThumb;
|
|
141
|
+
//# sourceMappingURL=SliderThumb.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SliderThumb.js","sources":["../src/slider/internal/SliderThumb.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n type RefObject,\n useCallback,\n useEffect,\n useState,\n} from \"react\";\nimport { makePrefixer, useId } from \"../../utils\";\nimport sliderThumbCss from \"./SliderThumb.css\";\nimport { SliderTooltip } from \"./SliderTooltip\";\n\nconst withBaseName = makePrefixer(\"saltSliderThumb\");\n\ninterface SliderThumbProps\n extends Omit<\n ComponentPropsWithoutRef<\"input\">,\n \"onChange\" | \"defaultValue\" | \"min\" | \"max\"\n > {\n accessibleMaxText?: string;\n accessibleMinText?: string;\n disabled: boolean;\n format?: (value: number) => number | string;\n handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;\n handleKeydownOnThumb: (event: React.KeyboardEvent) => void;\n handlePointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;\n index?: number;\n inputRef?: RefObject<HTMLInputElement>;\n isFocusVisible: boolean;\n max: number;\n maxLabel?: string;\n min: number;\n minLabel?: string;\n offsetPercentage?: string;\n restrictToMarks?: boolean;\n showTooltip?: boolean;\n sliderValue: [number, number] | number;\n step: number;\n stepMultiplier: number;\n trackDragging: boolean;\n}\n\nexport const SliderThumb = ({\n \"aria-label\": ariaLabel,\n \"aria-valuetext\": ariaValueText,\n \"aria-labelledby\": ariaLabelledBy,\n accessibleMaxText,\n accessibleMinText,\n disabled,\n format,\n handleInputChange,\n handleKeydownOnThumb,\n handlePointerDown,\n index = 0,\n inputRef,\n isFocusVisible,\n max,\n maxLabel,\n min,\n minLabel,\n offsetPercentage,\n restrictToMarks,\n showTooltip,\n sliderValue,\n step,\n stepMultiplier,\n trackDragging,\n ...rest\n}: SliderThumbProps) => {\n {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-slider-thumb\",\n css: sliderThumbCss,\n window: targetWindow,\n });\n\n const [isTooltipVisible, setIsTooltipVisible] = useState(false);\n const id = useId();\n const accessibleTextId = `saltSlider-${id}-${index}`;\n const value = Array.isArray(sliderValue) ? sliderValue[index] : sliderValue;\n const formattedValue = format ? format(value) : value;\n\n const handleKeyDown = useCallback((event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n setIsTooltipVisible(false);\n }\n }, []);\n\n useEffect(() => {\n if (showTooltip && isTooltipVisible) {\n targetWindow?.addEventListener(\"keydown\", handleKeyDown);\n }\n return () => targetWindow?.removeEventListener(\"keydown\", handleKeyDown);\n }, [handleKeyDown, isTooltipVisible, showTooltip, targetWindow]);\n\n const handlePointerEnter = () => setIsTooltipVisible(true);\n\n const handlePointerLeave = () => {\n // Delay hiding the tooltip to enable tooltip\n // visibility on hover\n setTimeout(() => {\n setIsTooltipVisible(false);\n }, 300);\n };\n\n return (\n <div\n className={clsx(withBaseName(), {\n [withBaseName(\"focusVisible\")]: isFocusVisible,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"dragging\")]: trackDragging,\n [withBaseName(\"secondThumb\")]: index === 1,\n })}\n data-testid=\"sliderThumb\"\n onPointerDown={handlePointerDown}\n style={{ left: offsetPercentage }}\n {...(showTooltip && {\n onPointerEnter: handlePointerEnter,\n onPointerLeave: handlePointerLeave,\n })}\n >\n {showTooltip && (\n <SliderTooltip\n value={formattedValue}\n open={\n (isTooltipVisible || trackDragging || isFocusVisible) && !disabled\n }\n />\n )}\n <input\n disabled={disabled}\n type=\"range\"\n ref={inputRef}\n className={withBaseName(\"input\")}\n value={value}\n onChange={handleInputChange}\n onKeyDown={handleKeydownOnThumb}\n aria-labelledby={ariaLabelledBy}\n aria-valuenow={value}\n aria-valuetext={ariaValueText || format?.(value).toString()}\n aria-label={ariaLabel}\n aria-describedby={accessibleTextId}\n min={min}\n max={max}\n step={step}\n {...rest}\n />\n {/* Accessible text */}\n <span\n aria-hidden=\"true\"\n id={accessibleTextId}\n className={withBaseName(\"accessibleText\")}\n >\n {Array.isArray(sliderValue) &&\n `${index === 0 ? \"leading\" : \"trailing\"}, ${format?.(sliderValue[0]) || sliderValue[0]} to ${format?.(sliderValue[1]) || sliderValue[1]}, `}\n range{\" \"}\n {accessibleMinText\n ? `${accessibleMinText} ${min}, `\n : `minimum ${format?.(min) || min}, `}\n {accessibleMaxText\n ? `${accessibleMaxText} ${max} `\n : `maximum ${format?.(max) || max}`}\n {restrictToMarks\n ? \", custom increments\"\n : step !== 1 && `, increments of ${step}`}\n </span>\n </div>\n );\n }\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","sliderThumbCss","useState","useId","useCallback","useEffect","jsxs","clsx","jsx","SliderTooltip"],"mappings":"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"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = ".saltSliderTooltip {\n background: var(--salt-container-primary-background);\n border-color: var(--salt-container-primary-borderColor);\n border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));\n border-width: var(--saltTooltip-borderWidth, var(--salt-size-border));\n border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));\n box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n bottom: 50%;\n left: 50%;\n padding: var(--salt-spacing-50) var(--salt-spacing-100);\n position: absolute;\n transform: translate(-50%, -50%);\n text-align: var(--saltTooltip-textAlign, left);\n user-select: none;\n visibility: hidden;\n z-index: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n}\n\n.saltSliderTooltip-visible,\n.saltSliderTooltip:hover {\n visibility: visible;\n}\n\n.saltSliderTooltip-arrow {\n fill: var(--salt-container-primary-background);\n height: var(--salt-size-icon);\n left: 50%;\n position: absolute;\n pointer-events: none;\n top: 100%;\n transform: translateX(-50%);\n stroke: var(--salt-container-primary-borderColor);\n stroke-width: var(--salt-size-border);\n width: var(--salt-size-icon);\n}\n\n.saltSliderTooltip-text {\n white-space: nowrap;\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=SliderTooltip.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SliderTooltip.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var styles = require('@salt-ds/styles');
|
|
5
|
+
var window = require('@salt-ds/window');
|
|
6
|
+
var clsx = require('clsx');
|
|
7
|
+
var Text = require('../../text/Text.js');
|
|
8
|
+
require('../../text/Code.js');
|
|
9
|
+
require('../../text/Display.js');
|
|
10
|
+
require('../../text/Headings.js');
|
|
11
|
+
require('../../text/Label.js');
|
|
12
|
+
require('../../text/TextAction.js');
|
|
13
|
+
require('../../text/TextNotation.js');
|
|
14
|
+
require('react');
|
|
15
|
+
var makePrefixer = require('../../utils/makePrefixer.js');
|
|
16
|
+
require('../../utils/useFloatingUI/useFloatingUI.js');
|
|
17
|
+
require('../../utils/useId.js');
|
|
18
|
+
require('../../salt-provider/SaltProvider.js');
|
|
19
|
+
require('../../viewport/ViewportProvider.js');
|
|
20
|
+
var SliderTooltip$1 = require('./SliderTooltip.css.js');
|
|
21
|
+
|
|
22
|
+
const withBaseName = makePrefixer.makePrefixer("saltSliderTooltip");
|
|
23
|
+
const SliderTooltip = ({ value, open }) => {
|
|
24
|
+
const targetWindow = window.useWindow();
|
|
25
|
+
styles.useComponentCssInjection({
|
|
26
|
+
testId: "salt-slider-tooltip",
|
|
27
|
+
css: SliderTooltip$1,
|
|
28
|
+
window: targetWindow
|
|
29
|
+
});
|
|
30
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
31
|
+
"div",
|
|
32
|
+
{
|
|
33
|
+
"aria-hidden": true,
|
|
34
|
+
className: clsx(withBaseName(), {
|
|
35
|
+
[withBaseName("visible")]: open
|
|
36
|
+
}),
|
|
37
|
+
"data-testid": "sliderTooltip",
|
|
38
|
+
children: [
|
|
39
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
40
|
+
"svg",
|
|
41
|
+
{
|
|
42
|
+
className: withBaseName("arrow"),
|
|
43
|
+
"aria-hidden": "true",
|
|
44
|
+
viewBox: "0 1 14 14",
|
|
45
|
+
children: [
|
|
46
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
47
|
+
"path",
|
|
48
|
+
{
|
|
49
|
+
d: "M0,0 H14 L7,7 Q7,7 7,7 Z",
|
|
50
|
+
stroke: " var(--salt-container-primary-background)"
|
|
51
|
+
}
|
|
52
|
+
),
|
|
53
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
54
|
+
"path",
|
|
55
|
+
{
|
|
56
|
+
d: "M0,0 H14 L7,7 Q7,7 7,7 Z",
|
|
57
|
+
stroke: "var(--salt-container-primary-borderColor)"
|
|
58
|
+
}
|
|
59
|
+
)
|
|
60
|
+
]
|
|
61
|
+
}
|
|
62
|
+
),
|
|
63
|
+
/* @__PURE__ */ jsxRuntime.jsx(Text.Text, { className: withBaseName("text"), children: value })
|
|
64
|
+
]
|
|
65
|
+
}
|
|
66
|
+
);
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
exports.SliderTooltip = SliderTooltip;
|
|
70
|
+
//# sourceMappingURL=SliderTooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SliderTooltip.js","sources":["../src/slider/internal/SliderTooltip.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport { Text } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport sliderTooltipCss from \"./SliderTooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderTooltip\");\n\ninterface SliderTooltipProps {\n value: number | string;\n open?: boolean;\n}\n\nexport const SliderTooltip = ({ value, open }: SliderTooltipProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-slider-tooltip\",\n css: sliderTooltipCss,\n window: targetWindow,\n });\n\n return (\n <div\n aria-hidden\n className={clsx(withBaseName(), {\n [withBaseName(\"visible\")]: open,\n })}\n data-testid=\"sliderTooltip\"\n >\n <svg\n className={withBaseName(\"arrow\")}\n aria-hidden=\"true\"\n viewBox=\"0 1 14 14\"\n >\n <path\n d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\"\n stroke=\" var(--salt-container-primary-background)\"\n />\n <path\n d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\"\n stroke=\"var(--salt-container-primary-borderColor)\"\n />\n </svg>\n <Text className={withBaseName(\"text\")}>{value}</Text>\n </div>\n );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","sliderTooltipCss","jsxs","jsx","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAO9C,MAAM,aAAgB,GAAA,CAAC,EAAE,KAAA,EAAO,MAA+B,KAAA;AACpE,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAW,EAAA,IAAA;AAAA,MACX,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,QAC9B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,OAC5B,CAAA;AAAA,MACD,aAAY,EAAA,eAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAAA,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAC/B,aAAY,EAAA,MAAA;AAAA,YACZ,OAAQ,EAAA,WAAA;AAAA,YAER,QAAA,EAAA;AAAA,8BAAAC,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAE,EAAA,0BAAA;AAAA,kBACF,MAAO,EAAA;AAAA;AAAA,eACT;AAAA,8BACAA,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAE,EAAA,0BAAA;AAAA,kBACF,MAAO,EAAA;AAAA;AAAA;AACT;AAAA;AAAA,SACF;AAAA,uCACCC,SAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,MAAM,GAAI,QAAM,EAAA,KAAA,EAAA;AAAA;AAAA;AAAA,GAChD;AAEJ;;;;"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = ".saltSliderTrack {\n --slider-track-background: var(--salt-track-borderColor);\n --slider-track-fill: var(--salt-accent-borderColor);\n --slider-progressPercentage: 0%;\n --slider-tick-height: calc((var(--salt-size-selectable) - var(--salt-size-bar)) / 2);\n /* For range */\n --slider-progressPercentageStart: 0%;\n --slider-progressPercentageEnd: 0%;\n\n display: flex;\n touch-action: none;\n width: 100%;\n}\n\n.saltSliderTrack.saltSliderTrack-withMarks {\n /* To wrap the marks within the boundary box */\n margin-bottom: calc(var(--salt-size-base) / 2);\n}\n\n.saltSliderTrack-disabled {\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltSliderTrack-container {\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: var(--salt-spacing-100);\n width: 100%;\n}\n\n.saltSliderTrack-wrapper {\n align-items: center;\n cursor: var(--salt-selectable-cursor-hover);\n display: flex;\n flex: 1;\n height: var(--salt-size-selectable);\n position: relative;\n width: 100%;\n}\n\n.saltSliderTrack-disabled,\n.saltSliderTrack-disabled .saltSliderTrack-wrapper {\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltSliderTrack-disabled .saltSliderTrack-wrapper {\n pointer-events: none;\n}\n\n.saltSliderTrack-rail {\n display: flex;\n flex: 100%;\n height: var(--salt-size-bar);\n justify-content: space-between;\n position: relative;\n}\n\n.saltSliderTrack-rail::before,\n.saltSliderTrack-rail::after {\n content: \"\";\n display: block;\n height: 100%;\n}\n\n.saltSliderTrack-rail::before {\n background: var(--slider-track-fill);\n border-top-left-radius: var(--salt-palette-corner-weaker);\n border-bottom-left-radius: var(--salt-palette-corner-weaker);\n width: calc(var(--slider-progressPercentage) - 1.5 * var(--salt-size-border-strong));\n}\n\n.saltSliderTrack-hasMinTick.saltSliderTrack-rail::before {\n border-bottom-left-radius: unset;\n}\n\n.saltSliderTrack-rail::after {\n background: var(--slider-track-background);\n border-top-right-radius: var(--salt-palette-corner-weaker);\n border-bottom-right-radius: var(--salt-palette-corner-weaker);\n width: calc(100% - var(--slider-progressPercentage) - 1.5 * var(--salt-size-border-strong));\n}\n\n.saltSliderTrack-hasMaxTick.saltSliderTrack-rail::after {\n border-bottom-right-radius: unset;\n}\n\n.saltSliderTrack-range .saltSliderTrack-rail::before {\n background: var(--slider-track-background);\n width: calc(var(--slider-progressPercentageStart) - (var(--salt-size-border-strong) * 1.5));\n}\n\n.saltSliderTrack-range .saltSliderTrack-rail::after {\n background: var(--slider-track-background);\n width: calc(100% - var(--slider-progressPercentageEnd) - (var(--salt-size-border-strong) * 1.5));\n}\n\n.saltSliderTrack-range .saltSliderTrack-rail .saltSliderTrack-fill {\n background: var(--slider-track-fill);\n height: 100%;\n left: calc(var(--slider-progressPercentageStart) + 1.5 * var(--salt-size-border-strong));\n position: absolute;\n width: calc(var(--slider-progressPercentageEnd) - var(--slider-progressPercentageStart) - var(--salt-size-border-strong) * 3);\n}\n\n.saltSliderTrack-minLabel,\n.saltSliderTrack-maxLabel {\n user-select: none;\n}\n\n.saltSliderTrack-dragging,\n.saltSliderTrack-dragging .saltSliderTrack-wrapper {\n cursor: var(--salt-draggable-grab-cursor-active);\n}\n\n.saltSliderTrack-disabled {\n --slider-track-fill: var(--salt-accent-borderColor-disabled);\n --slider-track-background: var(--salt-track-borderColor-disabled);\n}\n\n.saltSliderTrack-ticks {\n top: calc(var(--salt-size-bar) + var(--slider-tick-height));\n position: absolute;\n width: 100%;\n}\n\n.saltSliderTrack-tick {\n background: var(--slider-track-background);\n height: var(--slider-tick-height);\n position: absolute;\n transform: translate(-50%);\n width: var(--salt-size-border-strong);\n}\n\n.saltSliderTrack-withTicks .saltSliderTrack-tickHidden {\n visibility: hidden;\n}\n\n.saltSliderTrack-tickSelected {\n background: var(--slider-track-fill);\n}\n\n.saltSliderTrack-tick:first-of-type {\n transform: unset;\n}\n\n.saltSliderTrack-tick:last-of-type {\n transform: translateX(-100%);\n}\n\n.saltSliderTrack-marks {\n position: absolute;\n user-select: none;\n width: 100%;\n}\n\n.saltSliderTrack-markLabel {\n color: var(--salt-content-secondary-foreground);\n font-family: var(--salt-text-label-fontFamily);\n font-weight: var(--salt-text-label-fontWeight);\n font-size: var(--salt-text-label-fontSize);\n line-height: var(--salt-text-label-lineHeight);\n overflow: hidden;\n position: absolute;\n text-overflow: ellipsis;\n transform: translateX(-50%);\n top: calc(var(--slider-tick-height) + var(--salt-spacing-50));\n white-space: nowrap;\n}\n\n.saltSliderTrack-constrainLabelPosition .saltSliderTrack-markLabel:first-of-type {\n transform: translateX(0%);\n}\n\n.saltSliderTrack-constrainLabelPosition .saltSliderTrack-markLabel:last-of-type {\n transform: translateX(-100%);\n}\n\n/* Styles applied when slider and range slider are inside a form field */\n\n.saltFormField .saltSliderTrack.saltSliderTrack-withMark {\n margin-bottom: 0;\n}\n\n.saltFormField .saltSliderTrack-container {\n --saltFormField-label-width: 10%;\n\n height: var(--salt-size-base);\n}\n\n.saltFormField .saltSliderTrack-markLabel {\n top: calc((var(--salt-size-base) - var(--salt-size-bar)) / 2);\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=SliderTrack.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SliderTrack.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var styles = require('@salt-ds/styles');
|
|
5
|
+
var window = require('@salt-ds/window');
|
|
6
|
+
var clsx = require('clsx');
|
|
7
|
+
var React = require('react');
|
|
8
|
+
var Text = require('../../text/Text.js');
|
|
9
|
+
require('../../text/Code.js');
|
|
10
|
+
require('../../text/Display.js');
|
|
11
|
+
require('../../text/Headings.js');
|
|
12
|
+
require('../../text/Label.js');
|
|
13
|
+
require('../../text/TextAction.js');
|
|
14
|
+
require('../../text/TextNotation.js');
|
|
15
|
+
var makePrefixer = require('../../utils/makePrefixer.js');
|
|
16
|
+
require('../../utils/useFloatingUI/useFloatingUI.js');
|
|
17
|
+
require('../../utils/useId.js');
|
|
18
|
+
require('../../salt-provider/SaltProvider.js');
|
|
19
|
+
require('../../viewport/ViewportProvider.js');
|
|
20
|
+
var SliderTrack$1 = require('./SliderTrack.css.js');
|
|
21
|
+
var utils = require('./utils.js');
|
|
22
|
+
|
|
23
|
+
const withBaseName = makePrefixer.makePrefixer("saltSliderTrack");
|
|
24
|
+
const SliderTrack = React.forwardRef(
|
|
25
|
+
function SliderTrack2({
|
|
26
|
+
children,
|
|
27
|
+
className,
|
|
28
|
+
constrainLabelPosition = false,
|
|
29
|
+
disabled,
|
|
30
|
+
showTicks,
|
|
31
|
+
format,
|
|
32
|
+
handlePointerDown,
|
|
33
|
+
isDragging,
|
|
34
|
+
isRange = false,
|
|
35
|
+
marks,
|
|
36
|
+
max,
|
|
37
|
+
maxLabel,
|
|
38
|
+
min,
|
|
39
|
+
minLabel,
|
|
40
|
+
progressPercentage = 0,
|
|
41
|
+
progressPercentageRange = [0, 0],
|
|
42
|
+
sliderRef,
|
|
43
|
+
...rest
|
|
44
|
+
}, ref) {
|
|
45
|
+
const targetWindow = window.useWindow();
|
|
46
|
+
styles.useComponentCssInjection({
|
|
47
|
+
testId: "salt-slider-track",
|
|
48
|
+
css: SliderTrack$1,
|
|
49
|
+
window: targetWindow
|
|
50
|
+
});
|
|
51
|
+
const checkIsMarkSelected = (value) => {
|
|
52
|
+
const markPercentage = utils.calculatePercentage(value, max, min);
|
|
53
|
+
if (isRange) {
|
|
54
|
+
return markPercentage > progressPercentageRange[0] && markPercentage < progressPercentageRange[1];
|
|
55
|
+
}
|
|
56
|
+
return markPercentage < progressPercentage;
|
|
57
|
+
};
|
|
58
|
+
const checkIsMarkOverlapped = (value) => {
|
|
59
|
+
const markPercentage = utils.calculatePercentage(value, max, min);
|
|
60
|
+
if (isRange) {
|
|
61
|
+
return markPercentage === progressPercentageRange[0] || markPercentage === progressPercentageRange[1];
|
|
62
|
+
}
|
|
63
|
+
return markPercentage === progressPercentage;
|
|
64
|
+
};
|
|
65
|
+
const hasMinTick = () => {
|
|
66
|
+
return (marks == null ? void 0 : marks.some((mark) => mark.value === min)) || false;
|
|
67
|
+
};
|
|
68
|
+
const hasMaxTick = () => {
|
|
69
|
+
return (marks == null ? void 0 : marks.some((mark) => mark.value === max)) || false;
|
|
70
|
+
};
|
|
71
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
72
|
+
"div",
|
|
73
|
+
{
|
|
74
|
+
className: clsx.clsx(withBaseName(), className, {
|
|
75
|
+
[withBaseName("disabled")]: disabled,
|
|
76
|
+
[withBaseName("dragging")]: isDragging,
|
|
77
|
+
[withBaseName("range")]: isRange,
|
|
78
|
+
[withBaseName("withMarks")]: marks,
|
|
79
|
+
[withBaseName("constrainLabelPosition")]: constrainLabelPosition,
|
|
80
|
+
[withBaseName("withTicks")]: showTicks
|
|
81
|
+
}),
|
|
82
|
+
"data-testid": "sliderTrack",
|
|
83
|
+
ref,
|
|
84
|
+
...rest,
|
|
85
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(withBaseName("container")), children: [
|
|
86
|
+
minLabel && /* @__PURE__ */ jsxRuntime.jsx(
|
|
87
|
+
Text.Text,
|
|
88
|
+
{
|
|
89
|
+
"aria-hidden": true,
|
|
90
|
+
className: withBaseName("minLabel"),
|
|
91
|
+
color: "secondary",
|
|
92
|
+
disabled,
|
|
93
|
+
styleAs: "label",
|
|
94
|
+
children: minLabel || (format == null ? void 0 : format(min))
|
|
95
|
+
}
|
|
96
|
+
),
|
|
97
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
98
|
+
"div",
|
|
99
|
+
{
|
|
100
|
+
onPointerDown: handlePointerDown,
|
|
101
|
+
className: withBaseName("wrapper"),
|
|
102
|
+
children: [
|
|
103
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
104
|
+
"div",
|
|
105
|
+
{
|
|
106
|
+
className: clsx.clsx(withBaseName("rail"), {
|
|
107
|
+
[withBaseName("hasMinTick")]: hasMinTick() && showTicks,
|
|
108
|
+
[withBaseName("hasMaxTick")]: hasMaxTick() && showTicks
|
|
109
|
+
}),
|
|
110
|
+
ref: sliderRef,
|
|
111
|
+
style: {
|
|
112
|
+
...progressPercentage !== void 0 && {
|
|
113
|
+
"--slider-progressPercentage": `${progressPercentage}%`
|
|
114
|
+
},
|
|
115
|
+
...(progressPercentageRange == null ? void 0 : progressPercentageRange[0]) !== void 0 && {
|
|
116
|
+
"--slider-progressPercentageStart": `${progressPercentageRange[0]}%`
|
|
117
|
+
},
|
|
118
|
+
...(progressPercentageRange == null ? void 0 : progressPercentageRange[1]) !== void 0 && {
|
|
119
|
+
"--slider-progressPercentageEnd": `${progressPercentageRange[1]}%`
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
children: [
|
|
123
|
+
isRange && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName("fill")) }),
|
|
124
|
+
children
|
|
125
|
+
]
|
|
126
|
+
}
|
|
127
|
+
),
|
|
128
|
+
marks && showTicks && /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("ticks"), children: marks.map(({ value }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
129
|
+
"span",
|
|
130
|
+
{
|
|
131
|
+
style: {
|
|
132
|
+
left: `${utils.calculateMarkPosition(value, max, min)}%`
|
|
133
|
+
},
|
|
134
|
+
className: clsx.clsx(
|
|
135
|
+
withBaseName("tick"),
|
|
136
|
+
{
|
|
137
|
+
[withBaseName("tickSelected")]: checkIsMarkSelected(value)
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
[withBaseName("tickHidden")]: checkIsMarkOverlapped(value)
|
|
141
|
+
}
|
|
142
|
+
)
|
|
143
|
+
},
|
|
144
|
+
`${value}-tick`
|
|
145
|
+
)) }),
|
|
146
|
+
marks && /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("marks"), children: marks.map(({ label, value }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
147
|
+
"span",
|
|
148
|
+
{
|
|
149
|
+
"data-testid": "mark",
|
|
150
|
+
className: withBaseName("markLabel"),
|
|
151
|
+
style: {
|
|
152
|
+
left: `${utils.calculateMarkPosition(value, max, min)}%`
|
|
153
|
+
},
|
|
154
|
+
children: label
|
|
155
|
+
},
|
|
156
|
+
`${value}-mark`
|
|
157
|
+
)) })
|
|
158
|
+
]
|
|
159
|
+
}
|
|
160
|
+
),
|
|
161
|
+
maxLabel && /* @__PURE__ */ jsxRuntime.jsx(
|
|
162
|
+
Text.Text,
|
|
163
|
+
{
|
|
164
|
+
"aria-hidden": true,
|
|
165
|
+
className: withBaseName("maxLabel"),
|
|
166
|
+
color: "secondary",
|
|
167
|
+
disabled,
|
|
168
|
+
styleAs: "label",
|
|
169
|
+
children: maxLabel || (format == null ? void 0 : format(max))
|
|
170
|
+
}
|
|
171
|
+
)
|
|
172
|
+
] })
|
|
173
|
+
}
|
|
174
|
+
);
|
|
175
|
+
}
|
|
176
|
+
);
|
|
177
|
+
|
|
178
|
+
exports.SliderTrack = SliderTrack;
|
|
179
|
+
//# sourceMappingURL=SliderTrack.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SliderTrack.js","sources":["../src/slider/internal/SliderTrack.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, type RefObject, forwardRef } from \"react\";\nimport { Text } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport sliderTrackCss from \"./SliderTrack.css\";\nimport { calculateMarkPosition, calculatePercentage } from \"./utils\";\n\nconst withBaseName = makePrefixer(\"saltSliderTrack\");\n\ninterface SliderTrackProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n children: React.ReactNode;\n constrainLabelPosition?: boolean;\n disabled: boolean;\n showTicks?: boolean;\n format?: (value: number) => string | number;\n handlePointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;\n isDragging: boolean;\n isRange?: boolean;\n marks?: { label: string; value: number }[];\n max: number;\n maxLabel?: number | string;\n min: number;\n minLabel?: number | string;\n progressPercentage?: number;\n progressPercentageRange?: [number, number];\n sliderRef: RefObject<HTMLDivElement>;\n}\n\nexport const SliderTrack = forwardRef<HTMLDivElement, SliderTrackProps>(\n function SliderTrack(\n {\n children,\n className,\n constrainLabelPosition = false,\n disabled,\n showTicks,\n format,\n handlePointerDown,\n isDragging,\n isRange = false,\n marks,\n max,\n maxLabel,\n min,\n minLabel,\n progressPercentage = 0,\n progressPercentageRange = [0, 0],\n sliderRef,\n ...rest\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-slider-track\",\n css: sliderTrackCss,\n window: targetWindow,\n });\n\n const checkIsMarkSelected = (value: number) => {\n const markPercentage = calculatePercentage(value, max, min);\n if (isRange) {\n return (\n markPercentage > progressPercentageRange[0] &&\n markPercentage < progressPercentageRange[1]\n );\n }\n return markPercentage < progressPercentage;\n };\n\n const checkIsMarkOverlapped = (value: number) => {\n const markPercentage = calculatePercentage(value, max, min);\n if (isRange) {\n return (\n markPercentage === progressPercentageRange[0] ||\n markPercentage === progressPercentageRange[1]\n );\n }\n return markPercentage === progressPercentage;\n };\n\n const hasMinTick = () => {\n return marks?.some((mark) => mark.value === min) || false;\n };\n\n const hasMaxTick = () => {\n return marks?.some((mark) => mark.value === max) || false;\n };\n\n return (\n <div\n className={clsx(withBaseName(), className, {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"dragging\")]: isDragging,\n [withBaseName(\"range\")]: isRange,\n [withBaseName(\"withMarks\")]: marks,\n [withBaseName(\"constrainLabelPosition\")]: constrainLabelPosition,\n [withBaseName(\"withTicks\")]: showTicks,\n })}\n data-testid=\"sliderTrack\"\n ref={ref}\n {...rest}\n >\n <div className={clsx(withBaseName(\"container\"))}>\n {minLabel && (\n <Text\n aria-hidden\n className={withBaseName(\"minLabel\")}\n color=\"secondary\"\n disabled={disabled}\n styleAs=\"label\"\n >\n {minLabel || format?.(min)}\n </Text>\n )}\n {/* Slider Track */}\n <div\n onPointerDown={handlePointerDown}\n className={withBaseName(\"wrapper\")}\n >\n <div\n className={clsx(withBaseName(\"rail\"), {\n [withBaseName(\"hasMinTick\")]: hasMinTick() && showTicks,\n [withBaseName(\"hasMaxTick\")]: hasMaxTick() && showTicks,\n })}\n ref={sliderRef}\n style={\n {\n ...(progressPercentage !== undefined && {\n \"--slider-progressPercentage\": `${progressPercentage}%`,\n }),\n ...(progressPercentageRange?.[0] !== undefined && {\n \"--slider-progressPercentageStart\": `${progressPercentageRange[0]}%`,\n }),\n ...(progressPercentageRange?.[1] !== undefined && {\n \"--slider-progressPercentageEnd\": `${progressPercentageRange[1]}%`,\n }),\n } as React.CSSProperties\n }\n >\n {isRange && <div className={clsx(withBaseName(\"fill\"))} />}\n {children}\n </div>\n {/* Ticks */}\n {marks && showTicks && (\n <div className={withBaseName(\"ticks\")}>\n {marks.map(({ value }) => (\n <span\n key={`${value}-tick`}\n style={{\n left: `${calculateMarkPosition(value, max, min)}%`,\n }}\n className={clsx(\n withBaseName(\"tick\"),\n {\n [withBaseName(\"tickSelected\")]:\n checkIsMarkSelected(value),\n },\n {\n [withBaseName(\"tickHidden\")]:\n checkIsMarkOverlapped(value),\n },\n )}\n />\n ))}\n </div>\n )}\n {/* Marks */}\n {marks && (\n <div className={withBaseName(\"marks\")}>\n {marks.map(({ label, value }) => (\n <span\n data-testid=\"mark\"\n key={`${value}-mark`}\n className={withBaseName(\"markLabel\")}\n style={{\n left: `${calculateMarkPosition(value, max, min)}%`,\n }}\n >\n {label}\n </span>\n ))}\n </div>\n )}\n </div>\n {maxLabel && (\n <Text\n aria-hidden\n className={withBaseName(\"maxLabel\")}\n color=\"secondary\"\n disabled={disabled}\n styleAs=\"label\"\n >\n {maxLabel || format?.(max)}\n </Text>\n )}\n </div>\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","SliderTrack","useWindow","useComponentCssInjection","sliderTrackCss","calculatePercentage","jsx","clsx","Text","jsxs","calculateMarkPosition"],"mappings":"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"}
|