@salt-ds/lab 1.0.0-alpha.62 → 1.0.0-alpha.63

package/dist-cjs/slider/internal/SliderTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderTooltip.js","sources":["../src/slider/internal/SliderTooltip.tsx"],"sourcesContent":["import { Text, makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\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 d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\" />\n      </svg>\n      <Text>{value}</Text>\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","sliderTooltipCss","jsxs","jsx","Text"],"mappings":";;;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,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,wBAAAC,cAAA;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,kBAAAA,cAAA,CAAC,MAAK,EAAA,EAAA,CAAA,EAAE,0BAA2B,EAAA;AAAA;AAAA,SACrC;AAAA,wBACAA,cAAA,CAACC,aAAM,QAAM,EAAA,KAAA,EAAA;AAAA;AAAA;AAAA,GACf;AAEJ;;;;"}

package/dist-cjs/slider/internal/SliderTrack.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+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  /* For range */\n  --slider-progressPercentageStart: 0%;\n  --slider-progressPercentageEnd: 0%;\n\n  --slider-mark-percentage: 0%;\n\n  display: flex;\n  width: 100%;\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-50);\n  width: 100%;\n}\n\n.saltSliderTrack-wrapper {\n  align-items: center;\n  display: flex;\n  flex: 1;\n  height: var(--salt-size-base);\n  position: relative;\n  width: 100%;\n}\n\n.saltSliderTrack-rail {\n  cursor: var(--salt-selectable-cursor-hover);\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) - (var(--salt-size-border-strong) / 2));\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) - (var(--salt-size-border-strong) * 2));\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) * 2));\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) * 2));\n}\n\n.saltSliderTrack-range .saltSliderTrack-rail .saltSliderTrack-fill {\n  background: var(--slider-track-fill);\n  height: 100%;\n  left: calc(var(--slider-progressPercentageStart) + (var(--salt-size-border-strong) / 2));\n  position: absolute;\n  width: calc(var(--slider-progressPercentageEnd) - var(--slider-progressPercentageStart) - var(--salt-size-border-strong));\n}\n\n.saltSliderTrack-minLabel,\n.saltSliderTrack-maxLabel {\n  user-select: none;\n}\n\n.saltSliderTrack-dragging,\n.saltSliderTrack-dragging .saltSliderTrack-rail {\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-disabled .saltSliderTrack-rail {\n  pointer-events: none;\n}\n\n.saltSliderTrack-marks {\n  position: absolute;\n  user-select: none;\n  width: 100%;\n  top: calc((var(--salt-size-base) / 2) + (var(--salt-size-bar) / 2));\n}\n\n.saltSliderTrack-mark {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  justify-content: center;\n  left: var(--slider-mark-percentage);\n  transform: translateX(-50%);\n  gap: 4px;\n}\n\n.saltSliderTrack-markLabel {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.saltSliderTrack-markTick {\n  height: 5px;\n  width: var(--salt-size-border-strong);\n  background: var(--slider-track-background);\n  visibility: hidden;\n}\n\n.saltSliderTrack-withMarkTicks .saltSliderTrack-markTick {\n  visibility: visible;\n}\n\n.saltSliderTrack-withMarkTicks .saltSliderTrack-markTickHidden {\n  visibility: hidden;\n}\n\n.saltSliderTrack-mark:last-of-type .saltSliderTrack-markTick {\n  transform: translateX(-50%);\n}\n\n.saltSliderTrack-mark:first-of-type .saltSliderTrack-markTick {\n  transform: translateX(50%);\n}\n\n.saltSliderTrack-markSelected {\n  background: var(--slider-track-fill);\n}\n\n.saltSliderTrack-constrainLabelPosition .saltSliderTrack-mark:first-of-type .saltSliderTrack-markLabel {\n  transform: translateX(50%);\n}\n\n.saltSliderTrack-constrainLabelPosition .saltSliderTrack-mark:last-of-type .saltSliderTrack-markLabel {\n  transform: translateX(-50%);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=SliderTrack.css.js.map

package/dist-cjs/slider/internal/SliderTrack.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderTrack.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/slider/internal/SliderTrack.js

@@ -2,92 +2,172 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
 var react = require('react');
-var SliderContext = require('./SliderContext.js');
-var SliderSelection = require('./SliderSelection.js');
-var SliderThumb = require('./SliderThumb.js');
+var SliderTrack$1 = require('./SliderTrack.css.js');
 var utils = require('./utils.js');
 
 const withBaseName = core.makePrefixer("saltSliderTrack");
-const SliderTrack = ({ ...props }) => {
-  const { min, max, step, value, onChange } = SliderContext.useSliderContext();
-  const trackRef = react.useRef(null);
-  const valueRef = react.useRef(value);
-  const [activeThumb, setActiveThumbState] = react.useState(void 0);
-  const activeThumbRef = react.useRef(void 0);
-  const pointerDown = react.useRef(false);
-  const setActiveThumb = (index) => {
-    setActiveThumbState(index);
-    activeThumbRef.current = index;
-  };
-  const handlePointerUp = () => {
-    setActiveThumb(void 0);
-    pointerDown.current = false;
-  };
-  const handlePointerDown = (event) => {
-    if (event.button !== 0) return;
-    const { clientX } = event;
-    const newValue = utils.getValue(trackRef, min, max, step, clientX);
-    const nearestIndex = utils.getNearestIndex(value, newValue);
-    utils.setValue(value, newValue, value.length > 1 ? nearestIndex : 0, onChange);
-    setActiveThumb(nearestIndex);
-    pointerDown.current = true;
-  };
-  const handlePointerMove = (event) => {
-    if (!pointerDown.current || typeof activeThumbRef.current === "undefined")
-      return;
-    const thumb = activeThumbRef.current;
-    const { clientX } = event;
-    const rawValue = utils.getValue(trackRef, min, max, step, clientX);
-    const newValue = utils.preventOverlappingValues(
-      valueRef.current,
-      rawValue,
-      thumb
-    );
-    utils.setValue(valueRef.current, newValue, thumb, onChange);
-  };
-  const handlePointerOut = () => {
-    if (!pointerDown.current) {
-      setActiveThumb(void 0);
-    }
-  };
-  react.useEffect(() => {
-    window.addEventListener("pointerup", handlePointerUp);
-    window.addEventListener("pointermove", handlePointerMove);
-    return () => {
-      window.removeEventListener("pointerup", handlePointerUp);
-      window.removeEventListener("pointermove", handlePointerMove);
+const SliderTrack = react.forwardRef(
+  function SliderTrack2({
+    children,
+    className,
+    constrainLabelPosition = false,
+    disabled,
+    showTicks,
+    format,
+    handlePointerDown,
+    isDragging,
+    isRange = false,
+    marks,
+    max,
+    maxLabel,
+    min,
+    minLabel,
+    progressPercentage = 0,
+    progressPercentageRange = [0, 0],
+    sliderRef,
+    ...rest
+  }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-slider-track",
+      css: SliderTrack$1,
+      window: targetWindow
+    });
+    const checkIsMarkSelected = (value) => {
+      const markPercentage = utils.calculatePercentage(value, max, min);
+      if (isRange) {
+        return markPercentage > progressPercentageRange[0] && markPercentage < progressPercentageRange[1];
+      }
+      return markPercentage < progressPercentage;
+    };
+    const checkIsMarkOverlapped = (value) => {
+      const markPercentage = utils.calculatePercentage(value, max, min);
+      if (isRange) {
+        return markPercentage === progressPercentageRange[0] || markPercentage === progressPercentageRange[1];
+      }
+      return markPercentage === progressPercentage;
+    };
+    const hasMinTick = () => {
+      return (marks == null ? void 0 : marks.some((mark) => mark.value === min)) || false;
     };
-  }, []);
-  react.useEffect(() => {
-    valueRef.current = value;
-  }, [value]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: withBaseName(),
-      ref: trackRef,
-      onPointerDown: handlePointerDown,
-      onPointerOut: handlePointerOut,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("rail") }),
-        /* @__PURE__ */ jsxRuntime.jsx(SliderSelection.SliderSelection, {}),
-        value.map((_, i) => {
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            SliderThumb.SliderThumb,
+    const hasMaxTick = () => {
+      return (marks == null ? void 0 : marks.some((mark) => mark.value === max)) || false;
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: clsx.clsx(withBaseName(), className, {
+          [withBaseName("disabled")]: disabled,
+          [withBaseName("dragging")]: isDragging,
+          [withBaseName("range")]: isRange,
+          [withBaseName("withMarks")]: marks,
+          [withBaseName("constrainLabelPosition")]: constrainLabelPosition,
+          [withBaseName("withMarkTicks")]: showTicks
+        }),
+        "data-testid": "sliderTrack",
+        ref,
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(withBaseName("container")), children: [
+          minLabel && /* @__PURE__ */ jsxRuntime.jsx(
+            core.Text,
+            {
+              "aria-hidden": true,
+              className: withBaseName("minLabel"),
+              color: "secondary",
+              disabled,
+              styleAs: "label",
+              children: minLabel || (format == null ? void 0 : format(min))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: withBaseName("wrapper"), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: clsx.clsx(withBaseName("rail"), {
+                  [withBaseName("hasMinTick")]: hasMinTick() && showTicks,
+                  [withBaseName("hasMaxTick")]: hasMaxTick() && showTicks
+                }),
+                onPointerDown: handlePointerDown,
+                ref: sliderRef,
+                style: {
+                  ...progressPercentage !== void 0 && {
+                    "--slider-progressPercentage": `${progressPercentage}%`
+                  },
+                  ...(progressPercentageRange == null ? void 0 : progressPercentageRange[0]) !== void 0 && {
+                    "--slider-progressPercentageStart": `${progressPercentageRange[0]}%`
+                  },
+                  ...(progressPercentageRange == null ? void 0 : progressPercentageRange[1]) !== void 0 && {
+                    "--slider-progressPercentageEnd": `${progressPercentageRange[1]}%`
+                  }
+                },
+                children: [
+                  isRange && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName("fill")) }),
+                  children
+                ]
+              }
+            ),
+            marks && /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("marks"), children: marks.map(({ label, value }) => {
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: withBaseName("mark"),
+                  style: {
+                    "--slider-mark-percentage": `${utils.calculateMarkPosition(value, max, min)}%`
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: clsx.clsx(
+                          withBaseName("markTick"),
+                          {
+                            [withBaseName("markSelected")]: checkIsMarkSelected(value)
+                          },
+                          {
+                            [withBaseName("markTickHidden")]: checkIsMarkOverlapped(value)
+                          }
+                        ),
+                        "data-testid": "markTick"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      core.Text,
+                      {
+                        "aria-hidden": true,
+                        className: withBaseName("markLabel"),
+                        "data-testid": "mark",
+                        disabled,
+                        color: "secondary",
+                        styleAs: "label",
+                        children: label
+                      }
+                    )
+                  ]
+                },
+                value
+              );
+            }) })
+          ] }),
+          maxLabel && /* @__PURE__ */ jsxRuntime.jsx(
+            core.Text,
             {
-              index: i,
-              activeThumb,
-              setActiveThumb
-            },
-            i
-          );
-        })
-      ]
-    }
-  );
-};
+              "aria-hidden": true,
+              className: withBaseName("maxLabel"),
+              color: "secondary",
+              disabled,
+              styleAs: "label",
+              children: maxLabel || (format == null ? void 0 : format(max))
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
 
 exports.SliderTrack = SliderTrack;
 //# sourceMappingURL=SliderTrack.js.map

package/dist-cjs/slider/internal/SliderTrack.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderTrack.js","sources":["../src/slider/internal/SliderTrack.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport {\n  type ComponentPropsWithoutRef,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { ActiveThumbIndex, SliderValue, ThumbIndex } from \"../types\";\nimport { useSliderContext } from \"./SliderContext\";\nimport { SliderSelection } from \"./SliderSelection\";\nimport { SliderThumb } from \"./SliderThumb\";\nimport {\n  getNearestIndex,\n  getValue,\n  preventOverlappingValues,\n  setValue,\n} from \"./utils\";\n\nexport interface SliderTrackProps extends ComponentPropsWithoutRef<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltSliderTrack\");\n\nexport const SliderTrack = ({ ...props }: SliderTrackProps) => {\n  const { min, max, step, value, onChange } = useSliderContext();\n\n  const trackRef = useRef<HTMLDivElement>(null);\n\n  const valueRef = useRef<SliderValue>(value);\n\n  const [activeThumb, setActiveThumbState] =\n    useState<ActiveThumbIndex>(undefined);\n  const activeThumbRef = useRef<ActiveThumbIndex>(undefined);\n  const pointerDown = useRef(false);\n\n  const setActiveThumb = (index: ActiveThumbIndex) => {\n    setActiveThumbState(index);\n    activeThumbRef.current = index;\n  };\n\n  const handlePointerUp = () => {\n    setActiveThumb(undefined);\n    pointerDown.current = false;\n  };\n\n  const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n    if (event.button !== 0) return;\n    const { clientX } = event;\n    const newValue: number = getValue(trackRef, min, max, step, clientX);\n    const nearestIndex = getNearestIndex(value, newValue);\n    setValue(value, newValue, value.length > 1 ? nearestIndex : 0, onChange);\n    setActiveThumb(nearestIndex);\n    pointerDown.current = true;\n  };\n\n  const handlePointerMove = (event: PointerEvent) => {\n    if (!pointerDown.current || typeof activeThumbRef.current === \"undefined\")\n      return;\n    const thumb = activeThumbRef.current;\n    const { clientX } = event;\n    const rawValue: number = getValue(trackRef, min, max, step, clientX);\n    const newValue = preventOverlappingValues(\n      valueRef.current,\n      rawValue,\n      thumb,\n    );\n    setValue(valueRef.current, newValue, thumb, onChange);\n  };\n\n  const handlePointerOut = () => {\n    if (!pointerDown.current) {\n      setActiveThumb(undefined);\n    }\n  };\n\n  useEffect(() => {\n    window.addEventListener(\"pointerup\", handlePointerUp);\n    window.addEventListener(\"pointermove\", handlePointerMove);\n    return () => {\n      window.removeEventListener(\"pointerup\", handlePointerUp);\n      window.removeEventListener(\"pointermove\", handlePointerMove);\n    };\n  }, []);\n\n  useEffect(() => {\n    valueRef.current = value;\n  }, [value]);\n\n  return (\n    <div\n      className={withBaseName()}\n      ref={trackRef}\n      onPointerDown={handlePointerDown}\n      onPointerOut={handlePointerOut}\n      {...props}\n    >\n      <div className={withBaseName(\"rail\")} />\n      <SliderSelection />\n      {value.map((_, i) => {\n        return (\n          <SliderThumb\n            key={i}\n            index={i as ThumbIndex}\n            activeThumb={activeThumb}\n            setActiveThumb={setActiveThumb}\n          />\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["makePrefixer","useSliderContext","useRef","useState","getValue","getNearestIndex","setValue","preventOverlappingValues","useEffect","jsxs","jsx","SliderSelection","SliderThumb"],"mappings":"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"}
+{"version":3,"file":"SliderTrack.js","sources":["../src/slider/internal/SliderTrack.tsx"],"sourcesContent":["import { Text, makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, type RefObject, forwardRef } from \"react\";\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(\"withMarkTicks\")]: 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 className={withBaseName(\"wrapper\")}>\n            <div\n              className={clsx(withBaseName(\"rail\"), {\n                [withBaseName(\"hasMinTick\")]: hasMinTick() && showTicks,\n                [withBaseName(\"hasMaxTick\")]: hasMaxTick() && showTicks,\n              })}\n              onPointerDown={handlePointerDown}\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            {/* Marks */}\n            {marks && (\n              <div className={withBaseName(\"marks\")}>\n                {marks.map(({ label, value }) => {\n                  return (\n                    <div\n                      className={withBaseName(\"mark\")}\n                      key={value}\n                      style={\n                        {\n                          \"--slider-mark-percentage\": `${calculateMarkPosition(value, max, min)}%`,\n                        } as React.CSSProperties\n                      }\n                    >\n                      <div\n                        className={clsx(\n                          withBaseName(\"markTick\"),\n                          {\n                            [withBaseName(\"markSelected\")]:\n                              checkIsMarkSelected(value),\n                          },\n                          {\n                            [withBaseName(\"markTickHidden\")]:\n                              checkIsMarkOverlapped(value),\n                          },\n                        )}\n                        data-testid=\"markTick\"\n                      />\n                      <Text\n                        aria-hidden\n                        className={withBaseName(\"markLabel\")}\n                        data-testid=\"mark\"\n                        disabled={disabled}\n                        color=\"secondary\"\n                        styleAs=\"label\"\n                      >\n                        {label}\n                      </Text>\n                    </div>\n                  );\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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"}

package/dist-cjs/slider/internal/useRangeSliderThumb.js

@@ -0,0 +1,194 @@
+'use strict';
+
+var window = require('@salt-ds/window');
+var react = require('react');
+var utils = require('./utils.js');
+
+const useRangeSliderThumb = ({
+  decimalPlaces,
+  handleInputChange,
+  marks,
+  min = 0,
+  max = 10,
+  step = 1,
+  onChange,
+  onChangeEnd,
+  restrictToMarks,
+  setValue,
+  stepMultiplier,
+  value
+}) => {
+  const [isDragging, setIsDragging] = react.useState(false);
+  const [thumbIndexState, setIsThumbIndex] = react.useState(0);
+  const lastValueRef = react.useRef(value);
+  const sliderRef = react.useRef(null);
+  const targetWindow = window.useWindow();
+  const preventThumbOverlap = react.useCallback(
+    (currentValue, value2, thumbIndex) => {
+      const values = [...value2];
+      if (thumbIndex === 0 && currentValue >= values[1]) {
+        values[0] = values[1];
+      } else if (thumbIndex === 1 && currentValue <= values[0]) {
+        values[1] = values[0];
+      } else {
+        values[thumbIndex] = currentValue;
+      }
+      return values;
+    },
+    []
+  );
+  const handlePointerMove = react.useCallback(
+    (event) => {
+      if (!sliderRef.current) return;
+      const newValue = utils.getClickedPosition(
+        sliderRef,
+        event.clientX,
+        max,
+        min,
+        step,
+        decimalPlaces,
+        marks,
+        restrictToMarks
+      );
+      if (newValue === void 0) return;
+      const newValues = preventThumbOverlap(
+        newValue,
+        value,
+        thumbIndexState
+      );
+      if (newValues[0] !== lastValueRef.current[0] || newValues[1] !== lastValueRef.current[1]) {
+        lastValueRef.current = newValues;
+        setValue(newValues);
+        onChange == null ? void 0 : onChange(event, newValues);
+      }
+    },
+    [
+      decimalPlaces,
+      marks,
+      max,
+      min,
+      step,
+      preventThumbOverlap,
+      restrictToMarks,
+      value,
+      thumbIndexState,
+      setValue,
+      onChange
+    ]
+  );
+  const handlePointerUp = react.useCallback(
+    (event) => {
+      setIsDragging(false);
+      onChangeEnd == null ? void 0 : onChangeEnd(event, lastValueRef.current);
+    },
+    [onChangeEnd]
+  );
+  react.useEffect(() => {
+    if (isDragging) {
+      targetWindow == null ? void 0 : targetWindow.addEventListener("pointermove", handlePointerMove);
+      targetWindow == null ? void 0 : targetWindow.addEventListener("pointerup", handlePointerUp);
+    } else {
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointermove", handlePointerMove);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointerup", handlePointerUp);
+    }
+    return () => {
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointermove", handlePointerMove);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointerup", handlePointerUp);
+    };
+  }, [handlePointerMove, handlePointerUp, isDragging, targetWindow]);
+  const handlePointerDownOnThumb = react.useCallback(
+    (event, thumbIndex) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setIsDragging(true);
+      if (thumbIndex !== void 0) {
+        setIsThumbIndex(thumbIndex);
+      }
+    },
+    []
+  );
+  const handlePointerDownOnTrack = react.useCallback(
+    (event) => {
+      event.preventDefault();
+      setIsDragging(true);
+      const newValue = utils.getClickedPosition(
+        sliderRef,
+        event.clientX,
+        max,
+        min,
+        step,
+        decimalPlaces,
+        marks,
+        restrictToMarks
+      );
+      if (newValue === void 0) return;
+      const newValues = [...value];
+      const distanceToThumb0 = Math.abs(newValue - newValues[0]);
+      const distanceToThumb1 = Math.abs(newValue - newValues[1]);
+      if (distanceToThumb0 > distanceToThumb1) {
+        newValues[1] = newValue;
+        setIsThumbIndex(1);
+      } else if (distanceToThumb0 < distanceToThumb1) {
+        newValues[0] = newValue;
+        setIsThumbIndex(0);
+      } else {
+        if (newValue < newValues[0]) {
+          newValues[0] = newValue;
+          setIsThumbIndex(0);
+        } else if (newValue > newValues[1]) {
+          newValues[1] = newValue;
+          setIsThumbIndex(1);
+        } else {
+          newValues[0] = newValue;
+          setIsThumbIndex(0);
+        }
+      }
+      if (newValues[0] !== lastValueRef.current[0] || newValues[1] !== lastValueRef.current[1]) {
+        lastValueRef.current = newValues;
+        setValue(newValues);
+        onChange == null ? void 0 : onChange(event, newValues);
+      }
+    },
+    [
+      decimalPlaces,
+      marks,
+      value,
+      max,
+      min,
+      onChange,
+      restrictToMarks,
+      setValue,
+      step
+    ]
+  );
+  const handleKeydownOnThumb = (event, thumbIndex) => {
+    const newValue = utils.getKeyboardValue(
+      event,
+      value[thumbIndex],
+      step,
+      stepMultiplier,
+      max,
+      min,
+      restrictToMarks,
+      marks
+    );
+    handleInputChange(
+      {
+        target: { value: newValue.toString() }
+      },
+      thumbIndex
+    );
+  };
+  return {
+    handleKeydownOnThumb,
+    handlePointerDownOnThumb,
+    handlePointerDownOnTrack,
+    isDragging,
+    preventThumbOverlap,
+    sliderRef,
+    thumbIndexState
+  };
+};
+
+exports.useRangeSliderThumb = useRangeSliderThumb;
+//# sourceMappingURL=useRangeSliderThumb.js.map

package/dist-cjs/slider/internal/useRangeSliderThumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRangeSliderThumb.js","sources":["../src/slider/internal/useRangeSliderThumb.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport {\n  type ChangeEvent,\n  type Dispatch,\n  type SetStateAction,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport type { SliderProps } from \"../Slider\";\nimport { getClickedPosition, getKeyboardValue } from \"./utils\";\n\ntype UseRangeSliderThumbProps = Pick<SliderProps, \"min\" | \"max\" | \"step\"> & {\n  decimalPlaces: number;\n  handleInputChange: (\n    event: ChangeEvent<HTMLInputElement>,\n    thumbIndex: number,\n  ) => void;\n  marks?: { label: string; value: number }[];\n  onChange?: (\n    event: SyntheticEvent<unknown> | Event,\n    value: [number, number],\n  ) => void;\n  onChangeEnd?: (\n    event: SyntheticEvent<unknown> | Event,\n    value: [number, number],\n  ) => void;\n  restrictToMarks?: boolean;\n  setValue: Dispatch<SetStateAction<[number, number]>>;\n  stepMultiplier: number;\n  value: [number, number];\n};\n\nexport const useRangeSliderThumb = ({\n  decimalPlaces,\n  handleInputChange,\n  marks,\n  min = 0,\n  max = 10,\n  step = 1,\n  onChange,\n  onChangeEnd,\n  restrictToMarks,\n  setValue,\n  stepMultiplier,\n  value,\n}: UseRangeSliderThumbProps) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const [thumbIndexState, setIsThumbIndex] = useState<number>(0);\n  const lastValueRef = useRef<[number, number]>(value);\n  const sliderRef = useRef<HTMLDivElement>(null);\n  const targetWindow = useWindow();\n\n  const preventThumbOverlap = useCallback(\n    (currentValue: number, value: [number, number], thumbIndex: number) => {\n      const values = [...value] as [number, number];\n      if (thumbIndex === 0 && currentValue >= values[1]) {\n        values[0] = values[1];\n      } else if (thumbIndex === 1 && currentValue <= values[0]) {\n        values[1] = values[0];\n      } else {\n        values[thumbIndex] = currentValue;\n      }\n      return values;\n    },\n    [],\n  );\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) return;\n      const newValues = preventThumbOverlap(\n        newValue,\n        value as [number, number],\n        thumbIndexState,\n      );\n\n      if (\n        newValues[0] !== lastValueRef.current[0] ||\n        newValues[1] !== lastValueRef.current[1]\n      ) {\n        lastValueRef.current = newValues;\n        setValue(newValues);\n        onChange?.(event, newValues);\n      }\n    },\n    [\n      decimalPlaces,\n      marks,\n      max,\n      min,\n      step,\n      preventThumbOverlap,\n      restrictToMarks,\n      value,\n      thumbIndexState,\n      setValue,\n      onChange,\n    ],\n  );\n\n  const handlePointerUp = useCallback(\n    (event: PointerEvent) => {\n      setIsDragging(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>, thumbIndex?: number) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDragging(true);\n      if (thumbIndex !== undefined) {\n        setIsThumbIndex(thumbIndex);\n      }\n    },\n    [],\n  );\n\n  const handlePointerDownOnTrack = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      setIsDragging(true);\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) return;\n      const newValues = [...value] as [number, number];\n      // Find nearest thumb\n      const distanceToThumb0 = Math.abs(newValue - newValues[0]);\n      const distanceToThumb1 = Math.abs(newValue - newValues[1]);\n      if (distanceToThumb0 > distanceToThumb1) {\n        // Move the second thumb\n        newValues[1] = newValue;\n        setIsThumbIndex(1);\n      } else if (distanceToThumb0 < distanceToThumb1) {\n        // Move the first thumb\n        newValues[0] = newValue;\n        setIsThumbIndex(0);\n      } else {\n        // If distances are equal, determine based on the click position\n        if (newValue < newValues[0]) {\n          // Clicked position is before both thumbs, move the first thumb\n          newValues[0] = newValue;\n          setIsThumbIndex(0);\n        } else if (newValue > newValues[1]) {\n          // Clicked position is after both thumbs, move the second thumb\n          newValues[1] = newValue;\n          setIsThumbIndex(1);\n        } else {\n          // Clicked position is between the thumbs, move the first thumb\n          newValues[0] = newValue;\n          setIsThumbIndex(0);\n        }\n      }\n      if (\n        newValues[0] !== lastValueRef.current[0] ||\n        newValues[1] !== lastValueRef.current[1]\n      ) {\n        lastValueRef.current = newValues;\n        setValue(newValues);\n        onChange?.(event, newValues);\n      }\n    },\n    [\n      decimalPlaces,\n      marks,\n      value,\n      max,\n      min,\n      onChange,\n      restrictToMarks,\n      setValue,\n      step,\n    ],\n  );\n\n  const handleKeydownOnThumb = (\n    event: React.KeyboardEvent,\n    thumbIndex: number,\n  ) => {\n    const newValue = getKeyboardValue(\n      event,\n      value[thumbIndex],\n      step,\n      stepMultiplier,\n      max,\n      min,\n      restrictToMarks,\n      marks,\n    );\n\n    handleInputChange(\n      {\n        target: { value: newValue.toString() },\n      } as ChangeEvent<HTMLInputElement>,\n      thumbIndex,\n    );\n  };\n\n  return {\n    handleKeydownOnThumb,\n    handlePointerDownOnThumb,\n    handlePointerDownOnTrack,\n    isDragging,\n    preventThumbOverlap,\n    sliderRef,\n    thumbIndexState,\n  };\n};\n"],"names":["useState","useRef","useWindow","useCallback","value","getClickedPosition","useEffect","getKeyboardValue"],"mappings":"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"}