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

package/dist-es/slider/internal/SliderThumb.js

@@ -1,79 +1,139 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makePrefixer, Label } from '@salt-ds/core';
+import { makePrefixer, useId } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { useState } from 'react';
-import { useSliderContext } from './SliderContext.js';
-import { useKeyDownThumb } from './useKeyDownThumb.js';
-import { getPercentage } from './utils.js';
+import { useState, useCallback, useEffect } from 'react';
+import css_248z from './SliderThumb.css.js';
+import { SliderTooltip } from './SliderTooltip.js';
 
 const withBaseName = makePrefixer("saltSliderThumb");
-function SliderThumb(props) {
-  const { index, activeThumb, setActiveThumb } = props;
-  const [focussed, setFocussed] = useState(false);
-  const { min, max, step, value, onChange, ariaLabel } = useSliderContext();
-  const onKeyDown = useKeyDownThumb(min, max, step, value, onChange, index);
-  const thumbValue = value[index];
-  const thumbPosition = getPercentage(min, max, thumbValue);
-  const handlePointerOver = () => {
-    if (activeThumb === void 0 && index !== null) setActiveThumb(index);
-  };
-  const handleFocus = () => {
-    setFocussed(true);
-    if (index !== null) setActiveThumb(index);
-  };
-  const handleBlur = () => {
-    setFocussed(false);
-    setActiveThumb(void 0);
-  };
-  const showTooltip = focussed || activeThumb === index;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: { left: `${thumbPosition}%` },
-      className: withBaseName("container"),
-      onPointerOver: handlePointerOver,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: clsx(withBaseName("tooltip"), {
-              [withBaseName("tooltip-visible")]: showTooltip
-            }),
-            "aria-expanded": showTooltip,
-            children: [
-              /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  className: withBaseName("tooltip-arrow"),
-                  "aria-hidden": "true",
-                  viewBox: "0 1 14 14",
-                  children: /* @__PURE__ */ jsx("path", { d: "M0,0 H14 L7,7 Q7,7 7,7 Z" })
-                }
-              ),
-              /* @__PURE__ */ jsx(Label, { children: value[index] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: withBaseName(),
-            onKeyDown,
-            role: "slider",
-            "aria-valuemin": min,
-            "aria-valuemax": max,
-            "aria-valuenow": index === 1 ? value[1] : value[0],
-            "aria-label": ariaLabel,
-            "aria-orientation": "horizontal",
-            tabIndex: 0
-          }
-        )
-      ]
-    }
-  );
-}
+const SliderThumb = ({
+  "aria-label": ariaLabel,
+  "aria-valuetext": ariaValueText,
+  "aria-labelledby": ariaLabelledBy,
+  accessibleMaxText,
+  accessibleMinText,
+  disabled,
+  format,
+  onBlur,
+  onFocus,
+  handleInputChange,
+  handleKeydownOnThumb,
+  handlePointerDown,
+  index = 0,
+  inputRef,
+  isFocusVisible,
+  max,
+  maxLabel,
+  min,
+  minLabel,
+  offsetPercentage,
+  restrictToMarks,
+  showTooltip,
+  sliderValue,
+  step,
+  stepMultiplier,
+  trackDragging,
+  ...rest
+}) => {
+  {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-slider-thumb",
+      css: css_248z,
+      window: targetWindow
+    });
+    const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+    const id = useId();
+    const accessibleTextId = `saltSlider-${id}-${index}`;
+    const value = Array.isArray(sliderValue) ? sliderValue[index] : sliderValue;
+    const formattedValue = format ? format(value) : value;
+    const handleKeyDown = useCallback((event) => {
+      if (event.key === "Escape") {
+        setIsTooltipVisible(false);
+      }
+    }, []);
+    useEffect(() => {
+      if (showTooltip && isTooltipVisible) {
+        targetWindow == null ? void 0 : targetWindow.addEventListener("keydown", handleKeyDown);
+      }
+      return () => targetWindow == null ? void 0 : targetWindow.removeEventListener("keydown", handleKeyDown);
+    }, [handleKeyDown, isTooltipVisible, showTooltip, targetWindow]);
+    const handlePointerEnter = () => setIsTooltipVisible(true);
+    const handlePointerLeave = () => {
+      setTimeout(() => {
+        setIsTooltipVisible(false);
+      }, 300);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(withBaseName(), {
+          [withBaseName("focusVisible")]: isFocusVisible,
+          [withBaseName("disabled")]: disabled,
+          [withBaseName("dragging")]: trackDragging,
+          [withBaseName("secondThumb")]: index === 1
+        }),
+        "data-testid": "sliderThumb",
+        onPointerDown: handlePointerDown,
+        style: { left: offsetPercentage },
+        ...showTooltip && {
+          onPointerEnter: handlePointerEnter,
+          onPointerLeave: handlePointerLeave
+        },
+        children: [
+          showTooltip && /* @__PURE__ */ jsx(
+            SliderTooltip,
+            {
+              value: formattedValue,
+              open: (isTooltipVisible || trackDragging || isFocusVisible) && !disabled
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              disabled,
+              type: "range",
+              ref: inputRef,
+              onFocus,
+              onBlur,
+              className: withBaseName("input"),
+              value,
+              onChange: handleInputChange,
+              onKeyDown: handleKeydownOnThumb,
+              "aria-labelledby": ariaLabelledBy,
+              "aria-valuenow": value,
+              "aria-valuetext": ariaValueText || (format == null ? void 0 : format(value).toString()),
+              "aria-label": ariaLabel,
+              "aria-describedby": accessibleTextId,
+              min,
+              max,
+              step,
+              ...rest
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              "aria-hidden": "true",
+              id: accessibleTextId,
+              className: withBaseName("accessibleText"),
+              children: [
+                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]}, `,
+                "range",
+                " ",
+                accessibleMinText ? `${accessibleMinText} ${min}, ` : `minimum ${(format == null ? void 0 : format(min)) || min}, `,
+                accessibleMaxText ? `${accessibleMaxText} ${max} ` : `maximum ${(format == null ? void 0 : format(max)) || max}`,
+                restrictToMarks ? ", custom increments" : step !== 1 && `, increments of ${step}`
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+};
 
 export { SliderThumb };
 //# sourceMappingURL=SliderThumb.js.map

package/dist-es/slider/internal/SliderThumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderThumb.js","sources":["../src/slider/internal/SliderThumb.tsx"],"sourcesContent":["import { Label, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, useState } from \"react\";\nimport type { ActiveThumbIndex, ThumbIndex } from \"../types\";\nimport { useSliderContext } from \"./SliderContext\";\nimport { useKeyDownThumb } from \"./useKeyDownThumb\";\nimport { getPercentage } from \"./utils\";\n\nconst withBaseName = makePrefixer(\"saltSliderThumb\");\n\nexport interface SliderThumbProps extends ComponentPropsWithoutRef<\"div\"> {\n  index: ThumbIndex;\n  activeThumb: ActiveThumbIndex;\n  setActiveThumb: (index: ActiveThumbIndex) => void;\n}\n\nexport function SliderThumb(props: SliderThumbProps): JSX.Element {\n  const { index, activeThumb, setActiveThumb } = props;\n\n  const [focussed, setFocussed] = useState(false);\n\n  const { min, max, step, value, onChange, ariaLabel } = useSliderContext();\n\n  const onKeyDown = useKeyDownThumb(min, max, step, value, onChange, index);\n\n  const thumbValue = value[index];\n\n  const thumbPosition = getPercentage(min, max, thumbValue as number);\n\n  const handlePointerOver = () => {\n    if (activeThumb === undefined && index !== null) setActiveThumb(index);\n  };\n\n  const handleFocus = () => {\n    setFocussed(true);\n    if (index !== null) setActiveThumb(index);\n  };\n\n  const handleBlur = () => {\n    setFocussed(false);\n    setActiveThumb(undefined);\n  };\n\n  const showTooltip = focussed || activeThumb === index;\n\n  return (\n    <div\n      style={{ left: `${thumbPosition}%` }}\n      className={withBaseName(\"container\")}\n      onPointerOver={handlePointerOver}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n    >\n      <div\n        className={clsx(withBaseName(\"tooltip\"), {\n          [withBaseName(\"tooltip-visible\")]: showTooltip,\n        })}\n        aria-expanded={showTooltip}\n      >\n        <svg\n          className={withBaseName(\"tooltip-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        <Label>{value[index]}</Label>\n      </div>\n      <div\n        className={withBaseName()}\n        onKeyDown={onKeyDown}\n        role=\"slider\"\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={index === 1 ? value[1] : value[0]}\n        aria-label={ariaLabel}\n        aria-orientation=\"horizontal\"\n        tabIndex={0}\n      />\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA;AAQ5C,SAAS,YAAY,KAAsC,EAAA;AAChE,EAAA,MAAM,EAAE,KAAA,EAAO,WAAa,EAAA,cAAA,EAAmB,GAAA,KAAA;AAE/C,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAE9C,EAAM,MAAA,EAAE,KAAK,GAAK,EAAA,IAAA,EAAM,OAAO,QAAU,EAAA,SAAA,KAAc,gBAAiB,EAAA;AAExE,EAAA,MAAM,YAAY,eAAgB,CAAA,GAAA,EAAK,KAAK,IAAM,EAAA,KAAA,EAAO,UAAU,KAAK,CAAA;AAExE,EAAM,MAAA,UAAA,GAAa,MAAM,KAAK,CAAA;AAE9B,EAAA,MAAM,aAAgB,GAAA,aAAA,CAAc,GAAK,EAAA,GAAA,EAAK,UAAoB,CAAA;AAElE,EAAA,MAAM,oBAAoB,MAAM;AAC9B,IAAA,IAAI,WAAgB,KAAA,KAAA,CAAA,IAAa,KAAU,KAAA,IAAA,iBAAqB,KAAK,CAAA;AAAA,GACvE;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,WAAA,CAAY,IAAI,CAAA;AAChB,IAAI,IAAA,KAAA,KAAU,IAAM,EAAA,cAAA,CAAe,KAAK,CAAA;AAAA,GAC1C;AAEA,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,WAAA,CAAY,KAAK,CAAA;AACjB,IAAA,cAAA,CAAe,KAAS,CAAA,CAAA;AAAA,GAC1B;AAEA,EAAM,MAAA,WAAA,GAAc,YAAY,WAAgB,KAAA,KAAA;AAEhD,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA,EAAE,IAAM,EAAA,CAAA,EAAG,aAAa,CAAI,CAAA,CAAA,EAAA;AAAA,MACnC,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,MACnC,aAAe,EAAA,iBAAA;AAAA,MACf,OAAS,EAAA,WAAA;AAAA,MACT,MAAQ,EAAA,UAAA;AAAA,MAER,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,SAAS,CAAG,EAAA;AAAA,cACvC,CAAC,YAAA,CAAa,iBAAiB,CAAC,GAAG;AAAA,aACpC,CAAA;AAAA,YACD,eAAe,EAAA,WAAA;AAAA,YAEf,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,aAAa,eAAe,CAAA;AAAA,kBACvC,aAAY,EAAA,MAAA;AAAA,kBACZ,OAAQ,EAAA,WAAA;AAAA,kBAER,QAAA,kBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,CAAA,EAAE,0BAA2B,EAAA;AAAA;AAAA,eACrC;AAAA,8BACC,GAAA,CAAA,KAAA,EAAA,EAAO,QAAM,EAAA,KAAA,CAAA,KAAK,CAAE,EAAA;AAAA;AAAA;AAAA,SACvB;AAAA,wBACA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,WAAW,YAAa,EAAA;AAAA,YACxB,SAAA;AAAA,YACA,IAAK,EAAA,QAAA;AAAA,YACL,eAAe,EAAA,GAAA;AAAA,YACf,eAAe,EAAA,GAAA;AAAA,YACf,iBAAe,KAAU,KAAA,CAAA,GAAI,MAAM,CAAC,CAAA,GAAI,MAAM,CAAC,CAAA;AAAA,YAC/C,YAAY,EAAA,SAAA;AAAA,YACZ,kBAAiB,EAAA,YAAA;AAAA,YACjB,QAAU,EAAA;AAAA;AAAA;AACZ;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"SliderThumb.js","sources":["../src/slider/internal/SliderThumb.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { 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 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  onBlur: () => void;\n  onFocus: () => void;\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  onBlur,\n  onFocus,\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          onFocus={onFocus}\n          onBlur={onBlur}\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":["sliderThumbCss"],"mappings":"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"}

package/dist-es/slider/internal/SliderTooltip.css.js

@@ -0,0 +1,4 @@
+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";
+
+export { css_248z as default };
+//# sourceMappingURL=SliderTooltip.css.js.map

package/dist-es/slider/internal/SliderTooltip.css.js.map

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

package/dist-es/slider/internal/SliderTooltip.js

@@ -0,0 +1,56 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, Text } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import clsx from 'clsx';
+import css_248z from './SliderTooltip.css.js';
+
+const withBaseName = makePrefixer("saltSliderTooltip");
+const SliderTooltip = ({ value, open }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-slider-tooltip",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": true,
+      className: clsx(withBaseName(), {
+        [withBaseName("visible")]: open
+      }),
+      "data-testid": "sliderTooltip",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: withBaseName("arrow"),
+            "aria-hidden": "true",
+            viewBox: "0 1 14 14",
+            children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M0,0 H14 L7,7 Q7,7 7,7 Z",
+                  stroke: " var(--salt-container-primary-background)"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M0,0 H14 L7,7 Q7,7 7,7 Z",
+                  stroke: "var(--salt-container-primary-borderColor)"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { className: withBaseName("text"), children: value })
+      ]
+    }
+  );
+};
+
+export { SliderTooltip };
+//# sourceMappingURL=SliderTooltip.js.map

package/dist-es/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\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":["sliderTooltipCss"],"mappings":";;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAO9C,MAAM,aAAgB,GAAA,CAAC,EAAE,KAAA,EAAO,MAA+B,KAAA;AACpE,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,IAAA;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,wBAAA,IAAA;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,8BAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAE,EAAA,0BAAA;AAAA,kBACF,MAAO,EAAA;AAAA;AAAA,eACT;AAAA,8BACA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAE,EAAA,0BAAA;AAAA,kBACF,MAAO,EAAA;AAAA;AAAA;AACT;AAAA;AAAA,SACF;AAAA,4BACC,IAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,MAAM,GAAI,QAAM,EAAA,KAAA,EAAA;AAAA;AAAA;AAAA,GAChD;AAEJ;;;;"}

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

@@ -0,0 +1,4 @@
+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  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";
+
+export { css_248z as default };
+//# sourceMappingURL=SliderTrack.css.js.map

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

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

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

@@ -1,91 +1,166 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { makePrefixer } from '@salt-ds/core';
-import { useRef, useState, useEffect } from 'react';
-import { useSliderContext } from './SliderContext.js';
-import { SliderSelection } from './SliderSelection.js';
-import { SliderThumb } from './SliderThumb.js';
-import { getValue, getNearestIndex, setValue, preventOverlappingValues } from './utils.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { makePrefixer, Text } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import css_248z from './SliderTrack.css.js';
+import { calculateMarkPosition, calculatePercentage } from './utils.js';
 
 const withBaseName = makePrefixer("saltSliderTrack");
-const SliderTrack = ({ ...props }) => {
-  const { min, max, step, value, onChange } = useSliderContext();
-  const trackRef = useRef(null);
-  const valueRef = useRef(value);
-  const [activeThumb, setActiveThumbState] = useState(void 0);
-  const activeThumbRef = useRef(void 0);
-  const pointerDown = 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 = getValue(trackRef, min, max, step, clientX);
-    const nearestIndex = getNearestIndex(value, newValue);
-    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 = getValue(trackRef, min, max, step, clientX);
-    const newValue = preventOverlappingValues(
-      valueRef.current,
-      rawValue,
-      thumb
-    );
-    setValue(valueRef.current, newValue, thumb, onChange);
-  };
-  const handlePointerOut = () => {
-    if (!pointerDown.current) {
-      setActiveThumb(void 0);
-    }
-  };
-  useEffect(() => {
-    window.addEventListener("pointerup", handlePointerUp);
-    window.addEventListener("pointermove", handlePointerMove);
-    return () => {
-      window.removeEventListener("pointerup", handlePointerUp);
-      window.removeEventListener("pointermove", handlePointerMove);
+const SliderTrack = 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 = useWindow();
+    useComponentCssInjection({
+      testId: "salt-slider-track",
+      css: css_248z,
+      window: targetWindow
+    });
+    const checkIsMarkSelected = (value) => {
+      const markPercentage = calculatePercentage(value, max, min);
+      if (isRange) {
+        return markPercentage > progressPercentageRange[0] && markPercentage < progressPercentageRange[1];
+      }
+      return markPercentage < progressPercentage;
+    };
+    const checkIsMarkOverlapped = (value) => {
+      const markPercentage = 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;
+    };
+    const hasMaxTick = () => {
+      return (marks == null ? void 0 : marks.some((mark) => mark.value === max)) || false;
     };
-  }, []);
-  useEffect(() => {
-    valueRef.current = value;
-  }, [value]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: withBaseName(),
-      ref: trackRef,
-      onPointerDown: handlePointerDown,
-      onPointerOut: handlePointerOut,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: withBaseName("rail") }),
-        /* @__PURE__ */ jsx(SliderSelection, {}),
-        value.map((_, i) => {
-          return /* @__PURE__ */ jsx(
-            SliderThumb,
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(withBaseName(), className, {
+          [withBaseName("disabled")]: disabled,
+          [withBaseName("dragging")]: isDragging,
+          [withBaseName("range")]: isRange,
+          [withBaseName("withMarks")]: marks,
+          [withBaseName("constrainLabelPosition")]: constrainLabelPosition,
+          [withBaseName("withTicks")]: showTicks
+        }),
+        "data-testid": "sliderTrack",
+        ref,
+        ...rest,
+        children: /* @__PURE__ */ jsxs("div", { className: clsx(withBaseName("container")), children: [
+          minLabel && /* @__PURE__ */ jsx(
+            Text,
             {
-              index: i,
-              activeThumb,
-              setActiveThumb
-            },
-            i
-          );
-        })
-      ]
-    }
-  );
-};
+              "aria-hidden": true,
+              className: withBaseName("minLabel"),
+              color: "secondary",
+              disabled,
+              styleAs: "label",
+              children: minLabel || (format == null ? void 0 : format(min))
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              onPointerDown: handlePointerDown,
+              className: withBaseName("wrapper"),
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: clsx(withBaseName("rail"), {
+                      [withBaseName("hasMinTick")]: hasMinTick() && showTicks,
+                      [withBaseName("hasMaxTick")]: hasMaxTick() && showTicks
+                    }),
+                    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__ */ jsx("div", { className: clsx(withBaseName("fill")) }),
+                      children
+                    ]
+                  }
+                ),
+                marks && showTicks && /* @__PURE__ */ jsx("div", { className: withBaseName("ticks"), children: marks.map(({ value }) => /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      left: `${calculateMarkPosition(value, max, min)}%`
+                    },
+                    className: clsx(
+                      withBaseName("tick"),
+                      {
+                        [withBaseName("tickSelected")]: checkIsMarkSelected(value)
+                      },
+                      {
+                        [withBaseName("tickHidden")]: checkIsMarkOverlapped(value)
+                      }
+                    )
+                  },
+                  `${value}-tick`
+                )) }),
+                marks && /* @__PURE__ */ jsx("div", { className: withBaseName("marks"), children: marks.map(({ label, value }) => /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-testid": "mark",
+                    className: withBaseName("markLabel"),
+                    style: {
+                      left: `${calculateMarkPosition(value, max, min)}%`
+                    },
+                    children: label
+                  },
+                  `${value}-mark`
+                )) })
+              ]
+            }
+          ),
+          maxLabel && /* @__PURE__ */ jsx(
+            Text,
+            {
+              "aria-hidden": true,
+              className: withBaseName("maxLabel"),
+              color: "secondary",
+              disabled,
+              styleAs: "label",
+              children: maxLabel || (format == null ? void 0 : format(max))
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
 
 export { SliderTrack };
 //# sourceMappingURL=SliderTrack.js.map