@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.
Files changed (82) hide show
  1. package/CHANGELOG.md +49 -0
  2. package/css/salt-core.css +256 -1
  3. package/dist-cjs/combo-box/ComboBox.js +4 -1
  4. package/dist-cjs/combo-box/ComboBox.js.map +1 -1
  5. package/dist-cjs/dropdown/Dropdown.js +6 -2
  6. package/dist-cjs/dropdown/Dropdown.js.map +1 -1
  7. package/dist-cjs/index.js +4 -0
  8. package/dist-cjs/index.js.map +1 -1
  9. package/dist-cjs/list-box/ListBox.js +6 -2
  10. package/dist-cjs/list-box/ListBox.js.map +1 -1
  11. package/dist-cjs/list-control/ListControlState.js +6 -5
  12. package/dist-cjs/list-control/ListControlState.js.map +1 -1
  13. package/dist-cjs/slider/RangeSlider.js +188 -0
  14. package/dist-cjs/slider/RangeSlider.js.map +1 -0
  15. package/dist-cjs/slider/Slider.js +151 -0
  16. package/dist-cjs/slider/Slider.js.map +1 -0
  17. package/dist-cjs/slider/internal/SliderThumb.css.js +6 -0
  18. package/dist-cjs/slider/internal/SliderThumb.css.js.map +1 -0
  19. package/dist-cjs/slider/internal/SliderThumb.js +141 -0
  20. package/dist-cjs/slider/internal/SliderThumb.js.map +1 -0
  21. package/dist-cjs/slider/internal/SliderTooltip.css.js +6 -0
  22. package/dist-cjs/slider/internal/SliderTooltip.css.js.map +1 -0
  23. package/dist-cjs/slider/internal/SliderTooltip.js +70 -0
  24. package/dist-cjs/slider/internal/SliderTooltip.js.map +1 -0
  25. package/dist-cjs/slider/internal/SliderTrack.css.js +6 -0
  26. package/dist-cjs/slider/internal/SliderTrack.css.js.map +1 -0
  27. package/dist-cjs/slider/internal/SliderTrack.js +179 -0
  28. package/dist-cjs/slider/internal/SliderTrack.js.map +1 -0
  29. package/dist-cjs/slider/internal/useRangeSliderThumb.js +234 -0
  30. package/dist-cjs/slider/internal/useRangeSliderThumb.js.map +1 -0
  31. package/dist-cjs/slider/internal/useSliderThumb.js +162 -0
  32. package/dist-cjs/slider/internal/useSliderThumb.js.map +1 -0
  33. package/dist-cjs/slider/internal/utils.js +127 -0
  34. package/dist-cjs/slider/internal/utils.js.map +1 -0
  35. package/dist-cjs/switch/Switch.js.map +1 -1
  36. package/dist-es/combo-box/ComboBox.js +4 -1
  37. package/dist-es/combo-box/ComboBox.js.map +1 -1
  38. package/dist-es/dropdown/Dropdown.js +6 -2
  39. package/dist-es/dropdown/Dropdown.js.map +1 -1
  40. package/dist-es/index.js +2 -0
  41. package/dist-es/index.js.map +1 -1
  42. package/dist-es/list-box/ListBox.js +6 -2
  43. package/dist-es/list-box/ListBox.js.map +1 -1
  44. package/dist-es/list-control/ListControlState.js +6 -5
  45. package/dist-es/list-control/ListControlState.js.map +1 -1
  46. package/dist-es/slider/RangeSlider.js +186 -0
  47. package/dist-es/slider/RangeSlider.js.map +1 -0
  48. package/dist-es/slider/Slider.js +149 -0
  49. package/dist-es/slider/Slider.js.map +1 -0
  50. package/dist-es/slider/internal/SliderThumb.css.js +4 -0
  51. package/dist-es/slider/internal/SliderThumb.css.js.map +1 -0
  52. package/dist-es/slider/internal/SliderThumb.js +139 -0
  53. package/dist-es/slider/internal/SliderThumb.js.map +1 -0
  54. package/dist-es/slider/internal/SliderTooltip.css.js +4 -0
  55. package/dist-es/slider/internal/SliderTooltip.css.js.map +1 -0
  56. package/dist-es/slider/internal/SliderTooltip.js +68 -0
  57. package/dist-es/slider/internal/SliderTooltip.js.map +1 -0
  58. package/dist-es/slider/internal/SliderTrack.css.js +4 -0
  59. package/dist-es/slider/internal/SliderTrack.css.js.map +1 -0
  60. package/dist-es/slider/internal/SliderTrack.js +177 -0
  61. package/dist-es/slider/internal/SliderTrack.js.map +1 -0
  62. package/dist-es/slider/internal/useRangeSliderThumb.js +232 -0
  63. package/dist-es/slider/internal/useRangeSliderThumb.js.map +1 -0
  64. package/dist-es/slider/internal/useSliderThumb.js +160 -0
  65. package/dist-es/slider/internal/useSliderThumb.js.map +1 -0
  66. package/dist-es/slider/internal/utils.js +119 -0
  67. package/dist-es/slider/internal/utils.js.map +1 -0
  68. package/dist-es/switch/Switch.js.map +1 -1
  69. package/dist-types/combo-box/useComboBox.d.ts +7 -7
  70. package/dist-types/index.d.ts +1 -0
  71. package/dist-types/list-control/ListControlState.d.ts +7 -7
  72. package/dist-types/slider/RangeSlider.d.ts +99 -0
  73. package/dist-types/slider/Slider.d.ts +100 -0
  74. package/dist-types/slider/index.d.ts +2 -0
  75. package/dist-types/slider/internal/SliderThumb.d.ts +26 -0
  76. package/dist-types/slider/internal/SliderTooltip.d.ts +6 -0
  77. package/dist-types/slider/internal/SliderTrack.d.ts +24 -0
  78. package/dist-types/slider/internal/useRangeSliderThumb.d.ts +30 -0
  79. package/dist-types/slider/internal/useSliderThumb.d.ts +28 -0
  80. package/dist-types/slider/internal/utils.d.ts +20 -0
  81. package/dist-types/switch/Switch.d.ts +7 -7
  82. 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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"}