@salt-ds/core 1.72.0 → 1.74.0

package/dist-cjs/side-panel/useSidePanel.js

@@ -5,6 +5,7 @@ require('clsx');
 require('react/jsx-runtime');
 var useEventCallback = require('../utils/useEventCallback.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
+var forkRef = require('../utils/forkRef.js');
 require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
@@ -16,7 +17,6 @@ function useSidePanel() {
   const getTriggerProps = useEventCallback.useEventCallback(
     (userProps) => {
       const userOnClick = userProps == null ? void 0 : userProps.onClick;
-      const userRef = userProps == null ? void 0 : userProps.ref;
       return {
         "aria-expanded": openState,
         "aria-controls": openState ? panelId : void 0,
@@ -25,14 +25,9 @@ function useSidePanel() {
           userOnClick == null ? void 0 : userOnClick(event);
           setOpen(!openState);
         },
-        ref: (node) => {
-          setReference(node);
-          if (typeof userRef === "function") {
-            userRef(node);
-          } else if (userRef && typeof userRef === "object" && "current" in userRef) {
-            userRef.current = node;
-          }
-        }
+        // Props getters can't call hooks, so this uses the `forkRef` that
+        // `useForkRef` is built on.
+        ref: forkRef.forkRef(setReference, userProps == null ? void 0 : userProps.ref)
       };
     }
   );

package/dist-cjs/side-panel/useSidePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSidePanel.js","sources":["../src/side-panel/useSidePanel.ts"],"sourcesContent":["import type {\n  ComponentPropsWithoutRef,\n  MouseEvent,\n  MutableRefObject,\n  RefCallback,\n} from \"react\";\nimport { useEventCallback } from \"../utils\";\nimport { useSidePanelContext } from \"./internal\";\n\nexport interface SidePanelTriggerExtraProps {\n  /**\n   * Optional ref to forward alongside the focus-return registration.\n   */\n  ref?:\n    | RefCallback<HTMLElement | null>\n    | MutableRefObject<HTMLElement | null>\n    | null;\n  /**\n   * Click handler. Runs before the built-in toggle so consumers can\n   * preventDefault to skip the toggle.\n   */\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport type SidePanelTriggerPropsResult = ComponentPropsWithoutRef<\"button\"> & {\n  \"aria-expanded\": boolean;\n  \"aria-controls\": string | undefined;\n  ref: RefCallback<HTMLElement | null>;\n};\n\nexport interface SidePanelValue {\n  /**\n   * Whether the side panel is currently open.\n   */\n  openState: boolean;\n  /**\n   * Sets the open state of the panel.\n   */\n  setOpen: (open: boolean) => void;\n  /**\n   * Props getter for a trigger element outside of `SidePanelTrigger`.\n   * Returns `aria-expanded`, `aria-controls`, a `ref` (for focus-return),\n   * and an `onClick` that toggles the panel.\n   *\n   * Spread the result onto a Button to get full trigger behavior:\n   * ```tsx\n   * <Button {...getTriggerProps()}>Toggle panel</Button>\n   * ```\n   *\n   * You can pass additional props which are merged in. If you provide your\n   * own `onClick`, it runs before the built-in toggle. If you provide your\n   * own `ref`, it is forwarded alongside the internal focus-return ref.\n   *\n   * For multi-trigger scenarios (e.g. table rows), use `setTriggerRef` and\n   * manage ARIA attributes yourself instead.\n   */\n  getTriggerProps: (\n    userProps?: SidePanelTriggerExtraProps,\n  ) => SidePanelTriggerPropsResult;\n  /**\n   * Registers the element that should receive focus when the panel closes.\n   * Use this in multi-trigger scenarios (e.g. table rows) where each trigger\n   * needs explicit control over which element is the reference. Pass `null`\n   * to clear the previously-registered trigger.\n   */\n  setTriggerRef: (element: HTMLElement | null) => void;\n  /**\n   * The panel's DOM id. Use this for `aria-controls` in multi-trigger\n   * scenarios where you manage ARIA attributes yourself.\n   */\n  panelId: string | undefined;\n}\n\nexport function useSidePanel(): SidePanelValue {\n  const { openState, setOpen, setReference, panelId } = useSidePanelContext();\n\n  // useEventCallback gives a stable identity so consumers can memoise\n  // around getTriggerProps without it churning on open/close.\n  const getTriggerProps = useEventCallback(\n    (userProps?: SidePanelTriggerExtraProps): SidePanelTriggerPropsResult => {\n      const userOnClick = userProps?.onClick;\n      const userRef = userProps?.ref;\n\n      return {\n        \"aria-expanded\": openState,\n        \"aria-controls\": openState ? panelId : undefined,\n        ...userProps,\n        onClick: (event: MouseEvent<HTMLButtonElement>) => {\n          userOnClick?.(event);\n          setOpen(!openState);\n        },\n        ref: (node: HTMLElement | null) => {\n          setReference(node);\n          if (typeof userRef === \"function\") {\n            userRef(node);\n          } else if (\n            userRef &&\n            typeof userRef === \"object\" &&\n            \"current\" in userRef\n          ) {\n            userRef.current = node;\n          }\n        },\n      };\n    },\n  );\n\n  return {\n    openState,\n    setOpen,\n    getTriggerProps,\n    setTriggerRef: setReference,\n    panelId,\n  };\n}\n"],"names":["useSidePanelContext","useEventCallback"],"mappings":";;;;;;;;;;;;;AAyEO,SAAS,YAAA,GAA+B;AAC7C,EAAA,MAAM,EAAE,SAAA,EAAW,OAAA,EAAS,YAAA,EAAc,OAAA,KAAYA,oCAAA,EAAoB;AAI1E,EAAA,MAAM,eAAA,GAAkBC,iCAAA;AAAA,IACtB,CAAC,SAAA,KAAwE;AACvE,MAAA,MAAM,cAAc,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,OAAA;AAC/B,MAAA,MAAM,UAAU,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,GAAA;AAE3B,MAAA,OAAO;AAAA,QACL,eAAA,EAAiB,SAAA;AAAA,QACjB,eAAA,EAAiB,YAAY,OAAA,GAAU,MAAA;AAAA,QACvC,GAAG,SAAA;AAAA,QACH,OAAA,EAAS,CAAC,KAAA,KAAyC;AACjD,UAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,KAAA,CAAA;AACd,UAAA,OAAA,CAAQ,CAAC,SAAS,CAAA;AAAA,QACpB,CAAA;AAAA,QACA,GAAA,EAAK,CAAC,IAAA,KAA6B;AACjC,UAAA,YAAA,CAAa,IAAI,CAAA;AACjB,UAAA,IAAI,OAAO,YAAY,UAAA,EAAY;AACjC,YAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,UACd,WACE,OAAA,IACA,OAAO,OAAA,KAAY,QAAA,IACnB,aAAa,OAAA,EACb;AACA,YAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAAA,UACpB;AAAA,QACF;AAAA,OACF;AAAA,IACF;AAAA,GACF;AAEA,EAAA,OAAO;AAAA,IACL,SAAA;AAAA,IACA,OAAA;AAAA,IACA,eAAA;AAAA,IACA,aAAA,EAAe,YAAA;AAAA,IACf;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"useSidePanel.js","sources":["../src/side-panel/useSidePanel.ts"],"sourcesContent":["import type {\n  ComponentPropsWithoutRef,\n  MouseEvent,\n  MutableRefObject,\n  RefCallback,\n} from \"react\";\nimport { useEventCallback } from \"../utils\";\nimport { forkRef } from \"../utils/forkRef\";\nimport { useSidePanelContext } from \"./internal\";\n\nexport interface SidePanelTriggerExtraProps {\n  /**\n   * Optional ref to forward alongside the focus-return registration.\n   */\n  ref?:\n    | RefCallback<HTMLElement | null>\n    | MutableRefObject<HTMLElement | null>\n    | null;\n  /**\n   * Click handler. Runs before the built-in toggle so consumers can\n   * preventDefault to skip the toggle.\n   */\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport type SidePanelTriggerPropsResult = ComponentPropsWithoutRef<\"button\"> & {\n  \"aria-expanded\": boolean;\n  \"aria-controls\": string | undefined;\n  ref: RefCallback<HTMLElement | null>;\n};\n\nexport interface SidePanelValue {\n  /**\n   * Whether the side panel is currently open.\n   */\n  openState: boolean;\n  /**\n   * Sets the open state of the panel.\n   */\n  setOpen: (open: boolean) => void;\n  /**\n   * Props getter for a trigger element outside of `SidePanelTrigger`.\n   * Returns `aria-expanded`, `aria-controls`, a `ref` (for focus-return),\n   * and an `onClick` that toggles the panel.\n   *\n   * Spread the result onto a Button to get full trigger behavior:\n   * ```tsx\n   * <Button {...getTriggerProps()}>Toggle panel</Button>\n   * ```\n   *\n   * You can pass additional props which are merged in. If you provide your\n   * own `onClick`, it runs before the built-in toggle. If you provide your\n   * own `ref`, it is forwarded alongside the internal focus-return ref.\n   *\n   * For multi-trigger scenarios (e.g. table rows), use `setTriggerRef` and\n   * manage ARIA attributes yourself instead.\n   */\n  getTriggerProps: (\n    userProps?: SidePanelTriggerExtraProps,\n  ) => SidePanelTriggerPropsResult;\n  /**\n   * Registers the element that should receive focus when the panel closes.\n   * Use this in multi-trigger scenarios (e.g. table rows) where each trigger\n   * needs explicit control over which element is the reference. Pass `null`\n   * to clear the previously-registered trigger.\n   */\n  setTriggerRef: (element: HTMLElement | null) => void;\n  /**\n   * The panel's DOM id. Use this for `aria-controls` in multi-trigger\n   * scenarios where you manage ARIA attributes yourself.\n   */\n  panelId: string | undefined;\n}\n\nexport function useSidePanel(): SidePanelValue {\n  const { openState, setOpen, setReference, panelId } = useSidePanelContext();\n\n  // useEventCallback gives a stable identity so consumers can memoise\n  // around getTriggerProps without it churning on open/close.\n  const getTriggerProps = useEventCallback(\n    (userProps?: SidePanelTriggerExtraProps): SidePanelTriggerPropsResult => {\n      const userOnClick = userProps?.onClick;\n\n      return {\n        \"aria-expanded\": openState,\n        \"aria-controls\": openState ? panelId : undefined,\n        ...userProps,\n        onClick: (event: MouseEvent<HTMLButtonElement>) => {\n          userOnClick?.(event);\n          setOpen(!openState);\n        },\n        // Props getters can't call hooks, so this uses the `forkRef` that\n        // `useForkRef` is built on.\n        ref: forkRef<HTMLElement>(setReference, userProps?.ref),\n      };\n    },\n  );\n\n  return {\n    openState,\n    setOpen,\n    getTriggerProps,\n    setTriggerRef: setReference,\n    panelId,\n  };\n}\n"],"names":["useSidePanelContext","useEventCallback","forkRef"],"mappings":";;;;;;;;;;;;;;AA0EO,SAAS,YAAA,GAA+B;AAC7C,EAAA,MAAM,EAAE,SAAA,EAAW,OAAA,EAAS,YAAA,EAAc,OAAA,KAAYA,oCAAA,EAAoB;AAI1E,EAAA,MAAM,eAAA,GAAkBC,iCAAA;AAAA,IACtB,CAAC,SAAA,KAAwE;AACvE,MAAA,MAAM,cAAc,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,OAAA;AAE/B,MAAA,OAAO;AAAA,QACL,eAAA,EAAiB,SAAA;AAAA,QACjB,eAAA,EAAiB,YAAY,OAAA,GAAU,MAAA;AAAA,QACvC,GAAG,SAAA;AAAA,QACH,OAAA,EAAS,CAAC,KAAA,KAAyC;AACjD,UAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,KAAA,CAAA;AACd,UAAA,OAAA,CAAQ,CAAC,SAAS,CAAA;AAAA,QACpB,CAAA;AAAA;AAAA;AAAA,QAGA,GAAA,EAAKC,eAAA,CAAqB,YAAA,EAAc,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,GAAG;AAAA,OACxD;AAAA,IACF;AAAA,GACF;AAEA,EAAA,OAAO;AAAA,IACL,SAAA;AAAA,IACA,OAAA;AAAA,IACA,eAAA;AAAA,IACA,aAAA,EAAe,YAAA;AAAA,IACf;AAAA,GACF;AACF;;;;"}

package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js

@@ -11,8 +11,8 @@ const useManageFocusOnTarget = ({
   targetClass
 }) => {
   const [target, setTarget] = React.useState();
-  const hasTabIndex = React.useRef();
-  const shouldRemoveTabIndex = React.useRef();
+  const hasTabIndex = React.useRef(void 0);
+  const shouldRemoveTabIndex = React.useRef(void 0);
   React.useEffect(() => {
     if (targetRef == null ? void 0 : targetRef.current) {
       setTarget(targetRef.current);

package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js.map

@@ -1 +1 @@
-{"version":3,"file":"useManageFocusOnTarget.js","sources":["../src/skip-link/internal/useManageFocusOnTarget.ts"],"sourcesContent":["import {\n  type FocusEventHandler,\n  type KeyboardEventHandler,\n  type MouseEventHandler,\n  type RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nconst FOCUS_TIMEOUT = 50;\n\n// Props interface\ninterface ManageFocusOnTargetProps {\n  onBlur?: FocusEventHandler;\n  onClick?: MouseEventHandler;\n  onKeyUp?: KeyboardEventHandler;\n  targetRef: RefObject<HTMLElement> | undefined;\n  targetClass: string;\n}\n\n// Result interface\ninterface ManageFocusOnTargetResult {\n  onBlur?: FocusEventHandler<HTMLAnchorElement>;\n  onClick?: MouseEventHandler<HTMLAnchorElement>;\n  onKeyUp?: KeyboardEventHandler<HTMLAnchorElement>;\n}\nexport const useManageFocusOnTarget = ({\n  onKeyUp,\n  onBlur,\n  onClick,\n  targetRef,\n  targetClass,\n}: ManageFocusOnTargetProps): ManageFocusOnTargetResult => {\n  const [target, setTarget] = useState<HTMLElement>();\n\n  const hasTabIndex = useRef<boolean | string>();\n  const shouldRemoveTabIndex = useRef<boolean>();\n\n  useEffect(() => {\n    if (targetRef?.current) {\n      setTarget(targetRef.current);\n    }\n  }, [targetRef]);\n\n  if (!target) {\n    return {};\n  }\n\n  const addTabIndex = () => {\n    const tabIndex = target.getAttribute(\"tabIndex\");\n    hasTabIndex.current = tabIndex || tabIndex === \"0\";\n\n    if (!hasTabIndex.current) {\n      shouldRemoveTabIndex.current = true;\n      target.setAttribute(\"tabIndex\", \"-1\");\n    }\n  };\n\n  const removeTabIndex = () => {\n    if (!hasTabIndex.current && shouldRemoveTabIndex.current) {\n      target.removeAttribute(\"tabIndex\");\n    }\n  };\n\n  const handleFocusOnTarget = () => {\n    shouldRemoveTabIndex.current = false;\n    target.classList.add(targetClass);\n  };\n\n  const handleBlurFromTarget = () => {\n    shouldRemoveTabIndex.current = true;\n    removeTabIndex();\n    target.classList.remove(targetClass);\n  };\n\n  function moveToTarget() {\n    addTabIndex();\n    setTimeout(() => {\n      target?.focus();\n    }, FOCUS_TIMEOUT);\n\n    target?.addEventListener(\"focus\", handleFocusOnTarget, { once: true });\n    target?.addEventListener(\"blur\", handleBlurFromTarget, { once: true });\n  }\n\n  const handleKeyUp: KeyboardEventHandler<HTMLAnchorElement> = (event) => {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      moveToTarget();\n    }\n    onKeyUp?.(event);\n  };\n\n  const handleClick: MouseEventHandler<HTMLAnchorElement> = (event) => {\n    moveToTarget();\n    onClick?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLAnchorElement> = (event) => {\n    setTimeout(removeTabIndex, FOCUS_TIMEOUT);\n    onBlur?.(event);\n  };\n\n  return {\n    onBlur: handleBlur,\n    onClick: handleClick,\n    onKeyUp: handleKeyUp,\n  };\n};\n"],"names":["useState","useRef","useEffect"],"mappings":"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"}
+{"version":3,"file":"useManageFocusOnTarget.js","sources":["../src/skip-link/internal/useManageFocusOnTarget.ts"],"sourcesContent":["import {\n  type FocusEventHandler,\n  type KeyboardEventHandler,\n  type MouseEventHandler,\n  type RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nconst FOCUS_TIMEOUT = 50;\n\n// Props interface\ninterface ManageFocusOnTargetProps {\n  onBlur?: FocusEventHandler;\n  onClick?: MouseEventHandler;\n  onKeyUp?: KeyboardEventHandler;\n  targetRef: RefObject<HTMLElement | null> | undefined;\n  targetClass: string;\n}\n\n// Result interface\ninterface ManageFocusOnTargetResult {\n  onBlur?: FocusEventHandler<HTMLAnchorElement>;\n  onClick?: MouseEventHandler<HTMLAnchorElement>;\n  onKeyUp?: KeyboardEventHandler<HTMLAnchorElement>;\n}\nexport const useManageFocusOnTarget = ({\n  onKeyUp,\n  onBlur,\n  onClick,\n  targetRef,\n  targetClass,\n}: ManageFocusOnTargetProps): ManageFocusOnTargetResult => {\n  const [target, setTarget] = useState<HTMLElement>();\n\n  const hasTabIndex = useRef<boolean | string | undefined>(undefined);\n  const shouldRemoveTabIndex = useRef<boolean | undefined>(undefined);\n\n  useEffect(() => {\n    if (targetRef?.current) {\n      setTarget(targetRef.current);\n    }\n  }, [targetRef]);\n\n  if (!target) {\n    return {};\n  }\n\n  const addTabIndex = () => {\n    const tabIndex = target.getAttribute(\"tabIndex\");\n    hasTabIndex.current = tabIndex || tabIndex === \"0\";\n\n    if (!hasTabIndex.current) {\n      shouldRemoveTabIndex.current = true;\n      target.setAttribute(\"tabIndex\", \"-1\");\n    }\n  };\n\n  const removeTabIndex = () => {\n    if (!hasTabIndex.current && shouldRemoveTabIndex.current) {\n      target.removeAttribute(\"tabIndex\");\n    }\n  };\n\n  const handleFocusOnTarget = () => {\n    shouldRemoveTabIndex.current = false;\n    target.classList.add(targetClass);\n  };\n\n  const handleBlurFromTarget = () => {\n    shouldRemoveTabIndex.current = true;\n    removeTabIndex();\n    target.classList.remove(targetClass);\n  };\n\n  function moveToTarget() {\n    addTabIndex();\n    setTimeout(() => {\n      target?.focus();\n    }, FOCUS_TIMEOUT);\n\n    target?.addEventListener(\"focus\", handleFocusOnTarget, { once: true });\n    target?.addEventListener(\"blur\", handleBlurFromTarget, { once: true });\n  }\n\n  const handleKeyUp: KeyboardEventHandler<HTMLAnchorElement> = (event) => {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      moveToTarget();\n    }\n    onKeyUp?.(event);\n  };\n\n  const handleClick: MouseEventHandler<HTMLAnchorElement> = (event) => {\n    moveToTarget();\n    onClick?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLAnchorElement> = (event) => {\n    setTimeout(removeTabIndex, FOCUS_TIMEOUT);\n    onBlur?.(event);\n  };\n\n  return {\n    onBlur: handleBlur,\n    onClick: handleClick,\n    onKeyUp: handleKeyUp,\n  };\n};\n"],"names":["useState","useRef","useEffect"],"mappings":"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"}

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

@@ -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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"}
+{"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 Ref,\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?: Ref<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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"}

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

@@ -6,6 +6,8 @@ var window = require('@salt-ds/window');
 var clsx = require('clsx');
 require('../../text/Code.js');
 require('../../text/Display.js');
+require('../../text/Editorial.js');
+require('../../text/Eyebrow.js');
 require('../../text/Headings.js');
 require('../../text/Label.js');
 var Text = require('../../text/Text.js');

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

@@ -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-bold-borderColor)\"\n        />\n      </svg>\n      <Text className={withBaseName(\"text\")}>{value}</Text>\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","sliderTooltipCss","jsxs","clsx","jsx","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAO9C,MAAM,aAAA,GAAgB,CAAC,EAAE,KAAA,EAAO,MAAK,KAA0B;AACpE,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,qBAAA;AAAA,IACR,GAAA,EAAKC,eAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG;AAAA,QAC9B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,OAC5B,CAAA;AAAA,MACD,aAAA,EAAY,eAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAAD,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAC/B,aAAA,EAAY,MAAA;AAAA,YACZ,OAAA,EAAQ,WAAA;AAAA,YAER,QAAA,EAAA;AAAA,8BAAAE,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAA,EAAE,0BAAA;AAAA,kBACF,MAAA,EAAO;AAAA;AAAA,eACT;AAAA,8BACAA,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAA,EAAE,0BAAA;AAAA,kBACF,MAAA,EAAO;AAAA;AAAA;AACT;AAAA;AAAA,SACF;AAAA,uCACCC,SAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,MAAM,GAAI,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GAChD;AAEJ;;;;"}
+{"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-bold-borderColor)\"\n        />\n      </svg>\n      <Text className={withBaseName(\"text\")}>{value}</Text>\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","sliderTooltipCss","jsxs","clsx","jsx","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAO9C,MAAM,aAAA,GAAgB,CAAC,EAAE,KAAA,EAAO,MAAK,KAA0B;AACpE,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,qBAAA;AAAA,IACR,GAAA,EAAKC,eAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG;AAAA,QAC9B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,OAC5B,CAAA;AAAA,MACD,aAAA,EAAY,eAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAAD,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAC/B,aAAA,EAAY,MAAA;AAAA,YACZ,OAAA,EAAQ,WAAA;AAAA,YAER,QAAA,EAAA;AAAA,8BAAAE,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAA,EAAE,0BAAA;AAAA,kBACF,MAAA,EAAO;AAAA;AAAA,eACT;AAAA,8BACAA,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAA,EAAE,0BAAA;AAAA,kBACF,MAAA,EAAO;AAAA;AAAA;AACT;AAAA;AAAA,SACF;AAAA,uCACCC,SAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,MAAM,GAAI,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GAChD;AAEJ;;;;"}

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

@@ -7,6 +7,8 @@ var clsx = require('clsx');
 var React = require('react');
 require('../../text/Code.js');
 require('../../text/Display.js');
+require('../../text/Editorial.js');
+require('../../text/Eyebrow.js');
 require('../../text/Headings.js');
 require('../../text/Label.js');
 var Text = require('../../text/Text.js');

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

@@ -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 { forwardRef, type HTMLAttributes, type RefObject } 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              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              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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"}
+{"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 { forwardRef, type HTMLAttributes, type Ref } 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: Ref<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              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              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.map

@@ -1 +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 RefObject,\n  type SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport type { SliderProps } from \"../Slider\";\nimport { getClickedPosition, getKeyboardValue } from \"./utils\";\n\ntype UseRangeSliderThumbProps = Pick<SliderProps, \"min\" | \"max\" | \"step\"> & {\n  decimalPlaces: number;\n  handleInputChange: (\n    event: ChangeEvent<HTMLInputElement>,\n    thumbIndex: number,\n  ) => void;\n  inputRefs: RefObject<HTMLInputElement>[];\n  marks?: { label: string; value: number }[];\n  onChange?: (event: Event, value: [number, number]) => void;\n  onChangeEnd?: (event: Event, value: [number, number]) => 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  inputRefs,\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 [isFocusVisible, setIsFocusVisible] = 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 handleDragEnd = useCallback(\n    (event: Event) => {\n      setIsDragging(false);\n      setIsFocusVisible(false);\n      onChangeEnd?.(event, lastValueRef.current);\n    },\n    [onChangeEnd],\n  );\n\n  useEffect(() => {\n    if (isDragging) {\n      targetWindow?.addEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.addEventListener(\"pointerup\", handleDragEnd);\n      targetWindow?.addEventListener(\"pointercancel\", handleDragEnd);\n      targetWindow?.addEventListener(\"blur\", handleDragEnd);\n      targetWindow?.addEventListener(\"contextmenu\", handleDragEnd);\n    } else {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handleDragEnd);\n      targetWindow?.removeEventListener(\"pointercancel\", handleDragEnd);\n      targetWindow?.removeEventListener(\"blur\", handleDragEnd);\n      targetWindow?.removeEventListener(\"contextmenu\", handleDragEnd);\n    }\n    return () => {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handleDragEnd);\n      targetWindow?.removeEventListener(\"pointercancel\", handleDragEnd);\n      targetWindow?.removeEventListener(\"blur\", handleDragEnd);\n      targetWindow?.removeEventListener(\"contextmenu\", handleDragEnd);\n    };\n  }, [isDragging, targetWindow, handlePointerMove, handleDragEnd]);\n\n  const handlePointerDownOnThumb = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>, thumbIndex: number) => {\n      event.preventDefault();\n      // To prevent the pointerdown event from bubbling up to the slider track\n      //  and triggering its pointerdown event\n      event.stopPropagation();\n\n      inputRefs[thumbIndex].current?.focus();\n      setIsDragging(true);\n      setIsFocusVisible(false);\n      if (thumbIndex !== undefined) {\n        setIsThumbIndex(thumbIndex);\n      }\n    },\n    [inputRefs],\n  );\n\n  const handlePointerDownOnTrack = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      setIsDragging(true);\n\n      const newValue = getClickedPosition(\n        sliderRef,\n        event.clientX,\n        max,\n        min,\n        step,\n        decimalPlaces,\n        marks,\n        restrictToMarks,\n      );\n      let closestThumbIndex = 0;\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        closestThumbIndex = 1;\n      } else if (distanceToThumb0 < distanceToThumb1) {\n        // Move the first thumb\n        newValues[0] = newValue;\n        closestThumbIndex = 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          closestThumbIndex = 0;\n        } else if (newValue > newValues[1]) {\n          // Clicked position is after both thumbs, move the second thumb\n          newValues[1] = newValue;\n          closestThumbIndex = 1;\n        } else {\n          // Clicked position is between the thumbs, move the first thumb\n          newValues[0] = newValue;\n          closestThumbIndex = 0;\n        }\n      }\n      setIsThumbIndex(closestThumbIndex);\n      inputRefs[closestThumbIndex].current?.focus();\n      setIsFocusVisible(false);\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.nativeEvent, newValues);\n      }\n    },\n    [\n      decimalPlaces,\n      marks,\n      value,\n      max,\n      min,\n      inputRefs,\n      onChange,\n      restrictToMarks,\n      setValue,\n      step,\n    ],\n  );\n\n  const handleKeydownOnThumb = useCallback(\n    (event: React.KeyboardEvent, thumbIndex: number) => {\n      const newValue = getKeyboardValue(\n        event,\n        value[thumbIndex],\n        step,\n        stepMultiplier,\n        max,\n        min,\n        restrictToMarks,\n        marks,\n      );\n      if (\n        newValue === undefined ||\n        newValue === lastValueRef.current[thumbIndex]\n      ) {\n        return;\n      }\n      setIsFocusVisible(true);\n      lastValueRef.current[thumbIndex] = newValue;\n      handleInputChange(\n        {\n          target: { value: newValue.toString() },\n        } as ChangeEvent<HTMLInputElement>,\n        thumbIndex,\n      );\n    },\n    [\n      value,\n      step,\n      stepMultiplier,\n      max,\n      min,\n      restrictToMarks,\n      marks,\n      handleInputChange,\n    ],\n  );\n\n  const handleFocus = (thumbIndex: number) => {\n    setIsThumbIndex(thumbIndex);\n    setIsFocusVisible(true);\n  };\n\n  const handleBlur = (thumbIndex: number) => {\n    setIsThumbIndex(thumbIndex);\n    setIsFocusVisible(false);\n  };\n\n  return {\n    handleBlur,\n    handleFocus,\n    handleKeydownOnThumb,\n    handlePointerDownOnThumb,\n    handlePointerDownOnTrack,\n    isDragging,\n    isFocusVisible,\n    preventThumbOverlap,\n    sliderRef,\n    thumbIndexState,\n  };\n};\n"],"names":["useState","useRef","useWindow","useCallback","value","getClickedPosition","useEffect","getKeyboardValue"],"mappings":"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"}
+{"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 RefObject,\n  type SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport type { SliderProps } from \"../Slider\";\nimport { getClickedPosition, getKeyboardValue } from \"./utils\";\n\ntype UseRangeSliderThumbProps = Pick<SliderProps, \"min\" | \"max\" | \"step\"> & {\n  decimalPlaces: number;\n  handleInputChange: (\n    event: ChangeEvent<HTMLInputElement>,\n    thumbIndex: number,\n  ) => void;\n  inputRefs: RefObject<HTMLInputElement | null>[];\n  marks?: { label: string; value: number }[];\n  onChange?: (event: Event, value: [number, number]) => void;\n  onChangeEnd?: (event: Event, value: [number, number]) => 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  inputRefs,\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 [isFocusVisible, setIsFocusVisible] = 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 handleDragEnd = useCallback(\n    (event: Event) => {\n      setIsDragging(false);\n      setIsFocusVisible(false);\n      onChangeEnd?.(event, lastValueRef.current);\n    },\n    [onChangeEnd],\n  );\n\n  useEffect(() => {\n    if (isDragging) {\n      targetWindow?.addEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.addEventListener(\"pointerup\", handleDragEnd);\n      targetWindow?.addEventListener(\"pointercancel\", handleDragEnd);\n      targetWindow?.addEventListener(\"blur\", handleDragEnd);\n      targetWindow?.addEventListener(\"contextmenu\", handleDragEnd);\n    } else {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handleDragEnd);\n      targetWindow?.removeEventListener(\"pointercancel\", handleDragEnd);\n      targetWindow?.removeEventListener(\"blur\", handleDragEnd);\n      targetWindow?.removeEventListener(\"contextmenu\", handleDragEnd);\n    }\n    return () => {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handleDragEnd);\n      targetWindow?.removeEventListener(\"pointercancel\", handleDragEnd);\n      targetWindow?.removeEventListener(\"blur\", handleDragEnd);\n      targetWindow?.removeEventListener(\"contextmenu\", handleDragEnd);\n    };\n  }, [isDragging, targetWindow, handlePointerMove, handleDragEnd]);\n\n  const handlePointerDownOnThumb = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>, thumbIndex: number) => {\n      event.preventDefault();\n      // To prevent the pointerdown event from bubbling up to the slider track\n      //  and triggering its pointerdown event\n      event.stopPropagation();\n\n      inputRefs[thumbIndex].current?.focus();\n      setIsDragging(true);\n      setIsFocusVisible(false);\n      if (thumbIndex !== undefined) {\n        setIsThumbIndex(thumbIndex);\n      }\n    },\n    [inputRefs],\n  );\n\n  const handlePointerDownOnTrack = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      setIsDragging(true);\n\n      const newValue = getClickedPosition(\n        sliderRef,\n        event.clientX,\n        max,\n        min,\n        step,\n        decimalPlaces,\n        marks,\n        restrictToMarks,\n      );\n      let closestThumbIndex = 0;\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        closestThumbIndex = 1;\n      } else if (distanceToThumb0 < distanceToThumb1) {\n        // Move the first thumb\n        newValues[0] = newValue;\n        closestThumbIndex = 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          closestThumbIndex = 0;\n        } else if (newValue > newValues[1]) {\n          // Clicked position is after both thumbs, move the second thumb\n          newValues[1] = newValue;\n          closestThumbIndex = 1;\n        } else {\n          // Clicked position is between the thumbs, move the first thumb\n          newValues[0] = newValue;\n          closestThumbIndex = 0;\n        }\n      }\n      setIsThumbIndex(closestThumbIndex);\n      inputRefs[closestThumbIndex].current?.focus();\n      setIsFocusVisible(false);\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.nativeEvent, newValues);\n      }\n    },\n    [\n      decimalPlaces,\n      marks,\n      value,\n      max,\n      min,\n      inputRefs,\n      onChange,\n      restrictToMarks,\n      setValue,\n      step,\n    ],\n  );\n\n  const handleKeydownOnThumb = useCallback(\n    (event: React.KeyboardEvent, thumbIndex: number) => {\n      const newValue = getKeyboardValue(\n        event,\n        value[thumbIndex],\n        step,\n        stepMultiplier,\n        max,\n        min,\n        restrictToMarks,\n        marks,\n      );\n      if (\n        newValue === undefined ||\n        newValue === lastValueRef.current[thumbIndex]\n      ) {\n        return;\n      }\n      setIsFocusVisible(true);\n      lastValueRef.current[thumbIndex] = newValue;\n      handleInputChange(\n        {\n          target: { value: newValue.toString() },\n        } as ChangeEvent<HTMLInputElement>,\n        thumbIndex,\n      );\n    },\n    [\n      value,\n      step,\n      stepMultiplier,\n      max,\n      min,\n      restrictToMarks,\n      marks,\n      handleInputChange,\n    ],\n  );\n\n  const handleFocus = (thumbIndex: number) => {\n    setIsThumbIndex(thumbIndex);\n    setIsFocusVisible(true);\n  };\n\n  const handleBlur = (thumbIndex: number) => {\n    setIsThumbIndex(thumbIndex);\n    setIsFocusVisible(false);\n  };\n\n  return {\n    handleBlur,\n    handleFocus,\n    handleKeydownOnThumb,\n    handlePointerDownOnThumb,\n    handlePointerDownOnTrack,\n    isDragging,\n    isFocusVisible,\n    preventThumbOverlap,\n    sliderRef,\n    thumbIndexState,\n  };\n};\n"],"names":["useState","useRef","useWindow","useCallback","value","getClickedPosition","useEffect","getKeyboardValue"],"mappings":";;;;;;AA8BO,MAAM,sBAAsB,CAAC;AAAA,EAClC,aAAA;AAAA,EACA,iBAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAA,GAAM,CAAA;AAAA,EACN,GAAA,GAAM,EAAA;AAAA,EACN,IAAA,GAAO,CAAA;AAAA,EACP,QAAA;AAAA,EACA,WAAA;AAAA,EACA,eAAA;AAAA,EACA,QAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA,KAAgC;AAC9B,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIA,eAAS,KAAK,CAAA;AAClD,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAIA,eAAS,KAAK,CAAA;AAC1D,EAAA,MAAM,CAAC,eAAA,EAAiB,eAAe,CAAA,GAAIA,eAAiB,CAAC,CAAA;AAC7D,EAAA,MAAM,YAAA,GAAeC,aAAyB,KAAK,CAAA;AACnD,EAAA,MAAM,SAAA,GAAYA,aAAuB,IAAI,CAAA;AAC7C,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAE/B,EAAA,MAAM,mBAAA,GAAsBC,iBAAA;AAAA,IAC1B,CAAC,YAAA,EAAsBC,MAAAA,EAAyB,UAAA,KAAuB;AACrE,MAAA,MAAM,MAAA,GAAS,CAAC,GAAGA,MAAK,CAAA;AACxB,MAAA,IAAI,UAAA,KAAe,CAAA,IAAK,YAAA,IAAgB,MAAA,CAAO,CAAC,CAAA,EAAG;AACjD,QAAA,MAAA,CAAO,CAAC,CAAA,GAAI,MAAA,CAAO,CAAC,CAAA;AAAA,MACtB,WAAW,UAAA,KAAe,CAAA,IAAK,YAAA,IAAgB,MAAA,CAAO,CAAC,CAAA,EAAG;AACxD,QAAA,MAAA,CAAO,CAAC,CAAA,GAAI,MAAA,CAAO,CAAC,CAAA;AAAA,MACtB,CAAA,MAAO;AACL,QAAA,MAAA,CAAO,UAAU,CAAA,GAAI,YAAA;AAAA,MACvB;AACA,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,iBAAA,GAAoBD,iBAAA;AAAA,IACxB,CAAC,KAAA,KAAwB;AACvB,MAAA,IAAI,CAAC,UAAU,OAAA,EAAS;AACxB,MAAA,MAAM,QAAA,GAAWE,wBAAA;AAAA,QACf,SAAA;AAAA,QACA,KAAA,CAAM,OAAA;AAAA,QACN,GAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAA;AAAA,QACA,aAAA;AAAA,QACA,KAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,IAAI,aAAa,MAAA,EAAW;AAC5B,MAAA,MAAM,SAAA,GAAY,mBAAA;AAAA,QAChB,QAAA;AAAA,QACA,KAAA;AAAA,QACA;AAAA,OACF;AAEA,MAAA,IACE,SAAA,CAAU,CAAC,CAAA,KAAM,YAAA,CAAa,OAAA,CAAQ,CAAC,CAAA,IACvC,SAAA,CAAU,CAAC,CAAA,KAAM,YAAA,CAAa,OAAA,CAAQ,CAAC,CAAA,EACvC;AACA,QAAA,YAAA,CAAa,OAAA,GAAU,SAAA;AACvB,QAAA,QAAA,CAAS,SAAS,CAAA;AAClB,QAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,EAAO,SAAA,CAAA;AAAA,MACpB;AAAA,IACF,CAAA;AAAA,IACA;AAAA,MACE,aAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAA;AAAA,MACA,GAAA;AAAA,MACA,IAAA;AAAA,MACA,mBAAA;AAAA,MACA,eAAA;AAAA,MACA,KAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,aAAA,GAAgBF,iBAAA;AAAA,IACpB,CAAC,KAAA,KAAiB;AAChB,MAAA,aAAA,CAAc,KAAK,CAAA;AACnB,MAAA,iBAAA,CAAkB,KAAK,CAAA;AACvB,MAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,OAAO,YAAA,CAAa,OAAA,CAAA;AAAA,IACpC,CAAA;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAAG,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,UAAA,EAAY;AACd,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,iBAAiB,aAAA,EAAe,iBAAA,CAAA;AAC9C,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,iBAAiB,WAAA,EAAa,aAAA,CAAA;AAC5C,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,iBAAiB,eAAA,EAAiB,aAAA,CAAA;AAChD,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,iBAAiB,MAAA,EAAQ,aAAA,CAAA;AACvC,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,iBAAiB,aAAA,EAAe,aAAA,CAAA;AAAA,IAChD,CAAA,MAAO;AACL,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,aAAA,EAAe,iBAAA,CAAA;AACjD,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,WAAA,EAAa,aAAA,CAAA;AAC/C,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,eAAA,EAAiB,aAAA,CAAA;AACnD,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,MAAA,EAAQ,aAAA,CAAA;AAC1C,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,aAAA,EAAe,aAAA,CAAA;AAAA,IACnD;AACA,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,aAAA,EAAe,iBAAA,CAAA;AACjD,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,WAAA,EAAa,aAAA,CAAA;AAC/C,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,eAAA,EAAiB,aAAA,CAAA;AACnD,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,MAAA,EAAQ,aAAA,CAAA;AAC1C,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,aAAA,EAAe,aAAA,CAAA;AAAA,IACnD,CAAA;AAAA,EACF,GAAG,CAAC,UAAA,EAAY,YAAA,EAAc,iBAAA,EAAmB,aAAa,CAAC,CAAA;AAE/D,EAAA,MAAM,wBAAA,GAA2BH,iBAAA;AAAA,IAC/B,CAAC,OAA2C,UAAA,KAAuB;AAhJvE,MAAA,IAAA,EAAA;AAiJM,MAAA,KAAA,CAAM,cAAA,EAAe;AAGrB,MAAA,KAAA,CAAM,eAAA,EAAgB;AAEtB,MAAA,CAAA,EAAA,GAAA,SAAA,CAAU,UAAU,CAAA,CAAE,OAAA,KAAtB,IAAA,GAAA,MAAA,GAAA,EAAA,CAA+B,KAAA,EAAA;AAC/B,MAAA,aAAA,CAAc,IAAI,CAAA;AAClB,MAAA,iBAAA,CAAkB,KAAK,CAAA;AACvB,MAAA,IAAI,eAAe,MAAA,EAAW;AAC5B,QAAA,eAAA,CAAgB,UAAU,CAAA;AAAA,MAC5B;AAAA,IACF,CAAA;AAAA,IACA,CAAC,SAAS;AAAA,GACZ;AAEA,EAAA,MAAM,wBAAA,GAA2BA,iBAAA;AAAA,IAC/B,CAAC,KAAA,KAA8C;AAjKnD,MAAA,IAAA,EAAA;AAkKM,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,aAAA,CAAc,IAAI,CAAA;AAElB,MAAA,MAAM,QAAA,GAAWE,wBAAA;AAAA,QACf,SAAA;AAAA,QACA,KAAA,CAAM,OAAA;AAAA,QACN,GAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAA;AAAA,QACA,aAAA;AAAA,QACA,KAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,IAAI,iBAAA,GAAoB,CAAA;AAExB,MAAA,IAAI,aAAa,MAAA,EAAW;AAC5B,MAAA,MAAM,SAAA,GAAY,CAAC,GAAG,KAAK,CAAA;AAE3B,MAAA,MAAM,mBAAmB,IAAA,CAAK,GAAA,CAAI,QAAA,GAAW,SAAA,CAAU,CAAC,CAAC,CAAA;AACzD,MAAA,MAAM,mBAAmB,IAAA,CAAK,GAAA,CAAI,QAAA,GAAW,SAAA,CAAU,CAAC,CAAC,CAAA;AACzD,MAAA,IAAI,mBAAmB,gBAAA,EAAkB;AAEvC,QAAA,SAAA,CAAU,CAAC,CAAA,GAAI,QAAA;AACf,QAAA,iBAAA,GAAoB,CAAA;AAAA,MACtB,CAAA,MAAA,IAAW,mBAAmB,gBAAA,EAAkB;AAE9C,QAAA,SAAA,CAAU,CAAC,CAAA,GAAI,QAAA;AACf,QAAA,iBAAA,GAAoB,CAAA;AAAA,MACtB,CAAA,MAAO;AAEL,QAAA,IAAI,QAAA,GAAW,SAAA,CAAU,CAAC,CAAA,EAAG;AAE3B,UAAA,SAAA,CAAU,CAAC,CAAA,GAAI,QAAA;AACf,UAAA,iBAAA,GAAoB,CAAA;AAAA,QACtB,CAAA,MAAA,IAAW,QAAA,GAAW,SAAA,CAAU,CAAC,CAAA,EAAG;AAElC,UAAA,SAAA,CAAU,CAAC,CAAA,GAAI,QAAA;AACf,UAAA,iBAAA,GAAoB,CAAA;AAAA,QACtB,CAAA,MAAO;AAEL,UAAA,SAAA,CAAU,CAAC,CAAA,GAAI,QAAA;AACf,UAAA,iBAAA,GAAoB,CAAA;AAAA,QACtB;AAAA,MACF;AACA,MAAA,eAAA,CAAgB,iBAAiB,CAAA;AACjC,MAAA,CAAA,EAAA,GAAA,SAAA,CAAU,iBAAiB,CAAA,CAAE,OAAA,KAA7B,IAAA,GAAA,MAAA,GAAA,EAAA,CAAsC,KAAA,EAAA;AACtC,MAAA,iBAAA,CAAkB,KAAK,CAAA;AAEvB,MAAA,IACE,SAAA,CAAU,CAAC,CAAA,KAAM,YAAA,CAAa,OAAA,CAAQ,CAAC,CAAA,IACvC,SAAA,CAAU,CAAC,CAAA,KAAM,YAAA,CAAa,OAAA,CAAQ,CAAC,CAAA,EACvC;AACA,QAAA,YAAA,CAAa,OAAA,GAAU,SAAA;AACvB,QAAA,QAAA,CAAS,SAAS,CAAA;AAClB,QAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,MAAM,WAAA,EAAa,SAAA,CAAA;AAAA,MAChC;AAAA,IACF,CAAA;AAAA,IACA;AAAA,MACE,aAAA;AAAA,MACA,KAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAA;AAAA,MACA,GAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,oBAAA,GAAuBF,iBAAA;AAAA,IAC3B,CAAC,OAA4B,UAAA,KAAuB;AAClD,MAAA,MAAM,QAAA,GAAWI,sBAAA;AAAA,QACf,KAAA;AAAA,QACA,MAAM,UAAU,CAAA;AAAA,QAChB,IAAA;AAAA,QACA,cAAA;AAAA,QACA,GAAA;AAAA,QACA,GAAA;AAAA,QACA,eAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,IACE,aAAa,MAAA,IACb,QAAA,KAAa,YAAA,CAAa,OAAA,CAAQ,UAAU,CAAA,EAC5C;AACA,QAAA;AAAA,MACF;AACA,MAAA,iBAAA,CAAkB,IAAI,CAAA;AACtB,MAAA,YAAA,CAAa,OAAA,CAAQ,UAAU,CAAA,GAAI,QAAA;AACnC,MAAA,iBAAA;AAAA,QACE;AAAA,UACE,MAAA,EAAQ,EAAE,KAAA,EAAO,QAAA,CAAS,UAAS;AAAE,SACvC;AAAA,QACA;AAAA,OACF;AAAA,IACF,CAAA;AAAA,IACA;AAAA,MACE,KAAA;AAAA,MACA,IAAA;AAAA,MACA,cAAA;AAAA,MACA,GAAA;AAAA,MACA,GAAA;AAAA,MACA,eAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,WAAA,GAAc,CAAC,UAAA,KAAuB;AAC1C,IAAA,eAAA,CAAgB,UAAU,CAAA;AAC1B,IAAA,iBAAA,CAAkB,IAAI,CAAA;AAAA,EACxB,CAAA;AAEA,EAAA,MAAM,UAAA,GAAa,CAAC,UAAA,KAAuB;AACzC,IAAA,eAAA,CAAgB,UAAU,CAAA;AAC1B,IAAA,iBAAA,CAAkB,KAAK,CAAA;AAAA,EACzB,CAAA;AAEA,EAAA,OAAO;AAAA,IACL,UAAA;AAAA,IACA,WAAA;AAAA,IACA,oBAAA;AAAA,IACA,wBAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAA;AAAA,IACA,cAAA;AAAA,IACA,mBAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"useSliderThumb.js","sources":["../src/slider/internal/useSliderThumb.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport {\n  type ChangeEvent,\n  type Dispatch,\n  type RefObject,\n  type SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport type { SliderProps } from \"../Slider\";\nimport { getClickedPosition, getKeyboardValue } from \"./utils\";\n\ntype UseSliderThumbProps = Pick<SliderProps, \"min\" | \"max\" | \"step\"> & {\n  decimalPlaces: number;\n  handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;\n  inputRef: RefObject<HTMLInputElement>;\n  marks?: { label: string; value: number }[];\n  onChange?: (event: Event, value: number) => void;\n  onChangeEnd?: (event: Event, value: number) => void;\n  restrictToMarks?: boolean;\n  setValue: Dispatch<SetStateAction<number>>;\n  stepMultiplier: number;\n  value: number;\n};\n\nexport const useSliderThumb = ({\n  decimalPlaces,\n  handleInputChange,\n  inputRef,\n  marks,\n  min = 0,\n  max = 10,\n  step = 1,\n  onChange,\n  onChangeEnd,\n  restrictToMarks,\n  setValue,\n  stepMultiplier,\n  value,\n}: UseSliderThumbProps) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const [isFocusVisible, setIsFocusVisible] = useState(false);\n  const lastValueRef = useRef<number>(value);\n  const sliderRef = useRef<HTMLDivElement>(null);\n  const targetWindow = useWindow();\n\n  const handlePointerMove = useCallback(\n    (event: PointerEvent) => {\n      if (!sliderRef.current) return;\n      const newValue = getClickedPosition(\n        sliderRef,\n        event.clientX,\n        max,\n        min,\n        step,\n        decimalPlaces,\n        marks,\n        restrictToMarks,\n      );\n      if (newValue === undefined || lastValueRef.current === newValue) {\n        return;\n      }\n      lastValueRef.current = newValue;\n      setValue(newValue);\n      onChange?.(event, newValue);\n    },\n    [decimalPlaces, marks, max, min, onChange, setValue, restrictToMarks, step],\n  );\n\n  const handleDragEnd = useCallback(\n    (event: Event) => {\n      setIsDragging(false);\n      setIsFocusVisible(false);\n      onChangeEnd?.(event, lastValueRef.current);\n    },\n    [onChangeEnd],\n  );\n\n  useEffect(() => {\n    if (isDragging) {\n      targetWindow?.addEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.addEventListener(\"pointerup\", handleDragEnd);\n      targetWindow?.addEventListener(\"pointercancel\", handleDragEnd);\n      targetWindow?.addEventListener(\"blur\", handleDragEnd);\n      targetWindow?.addEventListener(\"contextmenu\", handleDragEnd);\n    } else {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handleDragEnd);\n      targetWindow?.removeEventListener(\"pointercancel\", handleDragEnd);\n      targetWindow?.removeEventListener(\"blur\", handleDragEnd);\n      targetWindow?.removeEventListener(\"contextmenu\", handleDragEnd);\n    }\n\n    return () => {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handleDragEnd);\n      targetWindow?.removeEventListener(\"pointercancel\", handleDragEnd);\n      targetWindow?.removeEventListener(\"blur\", handleDragEnd);\n      targetWindow?.removeEventListener(\"contextmenu\", handleDragEnd);\n    };\n  }, [isDragging, targetWindow, handlePointerMove, handleDragEnd]);\n\n  const handlePointerDownOnThumb = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n      if (inputRef.current) inputRef.current.focus();\n      setIsDragging(true);\n      setIsFocusVisible(false);\n    },\n    [inputRef],\n  );\n\n  const handlePointerDownOnTrack = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      if (inputRef.current) inputRef.current.focus();\n      setIsDragging(true);\n      setIsFocusVisible(false);\n      const newValue = getClickedPosition(\n        sliderRef,\n        event.clientX,\n        max,\n        min,\n        step,\n        decimalPlaces,\n        marks,\n        restrictToMarks,\n      );\n      if (newValue === undefined || lastValueRef.current === newValue) {\n        return;\n      }\n      lastValueRef.current = newValue;\n      setValue(newValue);\n      onChange?.(event.nativeEvent, newValue);\n    },\n    [\n      decimalPlaces,\n      inputRef,\n      marks,\n      max,\n      min,\n      onChange,\n      restrictToMarks,\n      setValue,\n      step,\n    ],\n  );\n\n  const handleKeydownOnThumb = useCallback(\n    (event: React.KeyboardEvent) => {\n      const newValue = getKeyboardValue(\n        event,\n        value,\n        step,\n        stepMultiplier,\n        max,\n        min,\n        restrictToMarks,\n        marks,\n      );\n      if (newValue === undefined || lastValueRef.current === newValue) {\n        return;\n      }\n      setIsFocusVisible(true);\n      lastValueRef.current = newValue;\n      handleInputChange({\n        target: { value: newValue.toString() },\n      } as ChangeEvent<HTMLInputElement>);\n    },\n    [\n      value,\n      step,\n      stepMultiplier,\n      max,\n      min,\n      restrictToMarks,\n      marks,\n      handleInputChange,\n    ],\n  );\n\n  const handleFocus = () => setIsFocusVisible(true);\n  const handleBlur = () => setIsFocusVisible(false);\n\n  return {\n    handleBlur,\n    handleFocus,\n    handleKeydownOnThumb,\n    handlePointerDownOnThumb,\n    handlePointerDownOnTrack,\n    isDragging,\n    isFocusVisible,\n    sliderRef,\n  };\n};\n"],"names":["useState","useRef","useWindow","useCallback","getClickedPosition","useEffect","getKeyboardValue"],"mappings":";;;;;;AA2BO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,aAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAA,GAAM,CAAA;AAAA,EACN,GAAA,GAAM,EAAA;AAAA,EACN,IAAA,GAAO,CAAA;AAAA,EACP,QAAA;AAAA,EACA,WAAA;AAAA,EACA,eAAA;AAAA,EACA,QAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA,KAA2B;AACzB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIA,eAAS,KAAK,CAAA;AAClD,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAIA,eAAS,KAAK,CAAA;AAC1D,EAAA,MAAM,YAAA,GAAeC,aAAe,KAAK,CAAA;AACzC,EAAA,MAAM,SAAA,GAAYA,aAAuB,IAAI,CAAA;AAC7C,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAE/B,EAAA,MAAM,iBAAA,GAAoBC,iBAAA;AAAA,IACxB,CAAC,KAAA,KAAwB;AACvB,MAAA,IAAI,CAAC,UAAU,OAAA,EAAS;AACxB,MAAA,MAAM,QAAA,GAAWC,wBAAA;AAAA,QACf,SAAA;AAAA,QACA,KAAA,CAAM,OAAA;AAAA,QACN,GAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAA;AAAA,QACA,aAAA;AAAA,QACA,KAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,IAAI,QAAA,KAAa,MAAA,IAAa,YAAA,CAAa,OAAA,KAAY,QAAA,EAAU;AAC/D,QAAA;AAAA,MACF;AACA,MAAA,YAAA,CAAa,OAAA,GAAU,QAAA;AACvB,MAAA,QAAA,CAAS,QAAQ,CAAA;AACjB,MAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,EAAO,QAAA,CAAA;AAAA,IACpB,CAAA;AAAA,IACA,CAAC,eAAe,KAAA,EAAO,GAAA,EAAK,KAAK,QAAA,EAAU,QAAA,EAAU,iBAAiB,IAAI;AAAA,GAC5E;AAEA,EAAA,MAAM,aAAA,GAAgBD,iBAAA;AAAA,IACpB,CAAC,KAAA,KAAiB;AAChB,MAAA,aAAA,CAAc,KAAK,CAAA;AACnB,MAAA,iBAAA,CAAkB,KAAK,CAAA;AACvB,MAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,OAAO,YAAA,CAAa,OAAA,CAAA;AAAA,IACpC,CAAA;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAAE,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,UAAA,EAAY;AACd,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,iBAAiB,aAAA,EAAe,iBAAA,CAAA;AAC9C,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,iBAAiB,WAAA,EAAa,aAAA,CAAA;AAC5C,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,iBAAiB,eAAA,EAAiB,aAAA,CAAA;AAChD,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,iBAAiB,MAAA,EAAQ,aAAA,CAAA;AACvC,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,iBAAiB,aAAA,EAAe,aAAA,CAAA;AAAA,IAChD,CAAA,MAAO;AACL,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,aAAA,EAAe,iBAAA,CAAA;AACjD,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,WAAA,EAAa,aAAA,CAAA;AAC/C,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,eAAA,EAAiB,aAAA,CAAA;AACnD,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,MAAA,EAAQ,aAAA,CAAA;AAC1C,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,aAAA,EAAe,aAAA,CAAA;AAAA,IACnD;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,aAAA,EAAe,iBAAA,CAAA;AACjD,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,WAAA,EAAa,aAAA,CAAA;AAC/C,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,eAAA,EAAiB,aAAA,CAAA;AACnD,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,MAAA,EAAQ,aAAA,CAAA;AAC1C,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,oBAAoB,aAAA,EAAe,aAAA,CAAA;AAAA,IACnD,CAAA;AAAA,EACF,GAAG,CAAC,UAAA,EAAY,YAAA,EAAc,iBAAA,EAAmB,aAAa,CAAC,CAAA;AAE/D,EAAA,MAAM,wBAAA,GAA2BF,iBAAA;AAAA,IAC/B,CAAC,KAAA,KAA8C;AAC7C,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,MAAA,IAAI,QAAA,CAAS,OAAA,EAAS,QAAA,CAAS,OAAA,CAAQ,KAAA,EAAM;AAC7C,MAAA,aAAA,CAAc,IAAI,CAAA;AAClB,MAAA,iBAAA,CAAkB,KAAK,CAAA;AAAA,IACzB,CAAA;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,MAAM,wBAAA,GAA2BA,iBAAA;AAAA,IAC/B,CAAC,KAAA,KAA8C;AAC7C,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,IAAI,QAAA,CAAS,OAAA,EAAS,QAAA,CAAS,OAAA,CAAQ,KAAA,EAAM;AAC7C,MAAA,aAAA,CAAc,IAAI,CAAA;AAClB,MAAA,iBAAA,CAAkB,KAAK,CAAA;AACvB,MAAA,MAAM,QAAA,GAAWC,wBAAA;AAAA,QACf,SAAA;AAAA,QACA,KAAA,CAAM,OAAA;AAAA,QACN,GAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAA;AAAA,QACA,aAAA;AAAA,QACA,KAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,IAAI,QAAA,KAAa,MAAA,IAAa,YAAA,CAAa,OAAA,KAAY,QAAA,EAAU;AAC/D,QAAA;AAAA,MACF;AACA,MAAA,YAAA,CAAa,OAAA,GAAU,QAAA;AACvB,MAAA,QAAA,CAAS,QAAQ,CAAA;AACjB,MAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,MAAM,WAAA,EAAa,QAAA,CAAA;AAAA,IAChC,CAAA;AAAA,IACA;AAAA,MACE,aAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAA;AAAA,MACA,GAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,oBAAA,GAAuBD,iBAAA;AAAA,IAC3B,CAAC,KAAA,KAA+B;AAC9B,MAAA,MAAM,QAAA,GAAWG,sBAAA;AAAA,QACf,KAAA;AAAA,QACA,KAAA;AAAA,QACA,IAAA;AAAA,QACA,cAAA;AAAA,QACA,GAAA;AAAA,QACA,GAAA;AAAA,QACA,eAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,IAAI,QAAA,KAAa,MAAA,IAAa,YAAA,CAAa,OAAA,KAAY,QAAA,EAAU;AAC/D,QAAA;AAAA,MACF;AACA,MAAA,iBAAA,CAAkB,IAAI,CAAA;AACtB,MAAA,YAAA,CAAa,OAAA,GAAU,QAAA;AACvB,MAAA,iBAAA,CAAkB;AAAA,QAChB,MAAA,EAAQ,EAAE,KAAA,EAAO,QAAA,CAAS,UAAS;AAAE,OACL,CAAA;AAAA,IACpC,CAAA;AAAA,IACA;AAAA,MACE,KAAA;AAAA,MACA,IAAA;AAAA,MACA,cAAA;AAAA,MACA,GAAA;AAAA,MACA,GAAA;AAAA,MACA,eAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,WAAA,GAAc,MAAM,iBAAA,CAAkB,IAAI,CAAA;AAChD,EAAA,MAAM,UAAA,GAAa,MAAM,iBAAA,CAAkB,KAAK,CAAA;AAEhD,EAAA,OAAO;AAAA,IACL,UAAA;AAAA,IACA,WAAA;AAAA,IACA,oBAAA;AAAA,IACA,wBAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"useSliderThumb.js","sources":["../src/slider/internal/useSliderThumb.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport {\n  type ChangeEvent,\n  type Dispatch,\n  type RefObject,\n  type SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport type { SliderProps } from \"../Slider\";\nimport { getClickedPosition, getKeyboardValue } from \"./utils\";\n\ntype UseSliderThumbProps = Pick<SliderProps, \"min\" | \"max\" | \"step\"> & {\n  decimalPlaces: number;\n  handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;\n  inputRef: RefObject<HTMLInputElement | null>;\n  marks?: { label: string; value: number }[];\n  onChange?: (event: Event, value: number) => void;\n  onChangeEnd?: (event: Event, value: number) => void;\n  restrictToMarks?: boolean;\n  setValue: Dispatch<SetStateAction<number>>;\n  stepMultiplier: number;\n  value: number;\n};\n\nexport const useSliderThumb = ({\n  decimalPlaces,\n  handleInputChange,\n  inputRef,\n  marks,\n  min = 0,\n  max = 10,\n  step = 1,\n  onChange,\n  onChangeEnd,\n  restrictToMarks,\n  setValue,\n  stepMultiplier,\n  value,\n}: UseSliderThumbProps) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const [isFocusVisible, setIsFocusVisible] = useState(false);\n  const lastValueRef = useRef<number>(value);\n  const sliderRef = useRef<HTMLDivElement>(null);\n  const targetWindow = useWindow();\n\n  const handlePointerMove = useCallback(\n    (event: PointerEvent) => {\n      if (!sliderRef.current) return;\n      const newValue = getClickedPosition(\n        sliderRef,\n        event.clientX,\n        max,\n        min,\n        step,\n        decimalPlaces,\n        marks,\n        restrictToMarks,\n      );\n      if (newValue === undefined || lastValueRef.current === newValue) {\n        return;\n      }\n      lastValueRef.current = newValue;\n      setValue(newValue);\n      onChange?.(event, newValue);\n    },\n    [decimalPlaces, marks, max, min, onChange, setValue, restrictToMarks, step],\n  );\n\n  const handleDragEnd = useCallback(\n    (event: Event) => {\n      setIsDragging(false);\n      setIsFocusVisible(false);\n      onChangeEnd?.(event, lastValueRef.current);\n    },\n    [onChangeEnd],\n  );\n\n  useEffect(() => {\n    if (isDragging) {\n      targetWindow?.addEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.addEventListener(\"pointerup\", handleDragEnd);\n      targetWindow?.addEventListener(\"pointercancel\", handleDragEnd);\n      targetWindow?.addEventListener(\"blur\", handleDragEnd);\n      targetWindow?.addEventListener(\"contextmenu\", handleDragEnd);\n    } else {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handleDragEnd);\n      targetWindow?.removeEventListener(\"pointercancel\", handleDragEnd);\n      targetWindow?.removeEventListener(\"blur\", handleDragEnd);\n      targetWindow?.removeEventListener(\"contextmenu\", handleDragEnd);\n    }\n\n    return () => {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handleDragEnd);\n      targetWindow?.removeEventListener(\"pointercancel\", handleDragEnd);\n      targetWindow?.removeEventListener(\"blur\", handleDragEnd);\n      targetWindow?.removeEventListener(\"contextmenu\", handleDragEnd);\n    };\n  }, [isDragging, targetWindow, handlePointerMove, handleDragEnd]);\n\n  const handlePointerDownOnThumb = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n      if (inputRef.current) inputRef.current.focus();\n      setIsDragging(true);\n      setIsFocusVisible(false);\n    },\n    [inputRef],\n  );\n\n  const handlePointerDownOnTrack = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      if (inputRef.current) inputRef.current.focus();\n      setIsDragging(true);\n      setIsFocusVisible(false);\n      const newValue = getClickedPosition(\n        sliderRef,\n        event.clientX,\n        max,\n        min,\n        step,\n        decimalPlaces,\n        marks,\n        restrictToMarks,\n      );\n      if (newValue === undefined || lastValueRef.current === newValue) {\n        return;\n      }\n      lastValueRef.current = newValue;\n      setValue(newValue);\n      onChange?.(event.nativeEvent, newValue);\n    },\n    [\n      decimalPlaces,\n      inputRef,\n      marks,\n      max,\n      min,\n      onChange,\n      restrictToMarks,\n      setValue,\n      step,\n    ],\n  );\n\n  const handleKeydownOnThumb = useCallback(\n    (event: React.KeyboardEvent) => {\n      const newValue = getKeyboardValue(\n        event,\n        value,\n        step,\n        stepMultiplier,\n        max,\n        min,\n        restrictToMarks,\n        marks,\n      );\n      if (newValue === undefined || lastValueRef.current === newValue) {\n        return;\n      }\n      setIsFocusVisible(true);\n      lastValueRef.current = newValue;\n      handleInputChange({\n        target: { value: newValue.toString() },\n      } as ChangeEvent<HTMLInputElement>);\n    },\n    [\n      value,\n      step,\n      stepMultiplier,\n      max,\n      min,\n      restrictToMarks,\n      marks,\n      handleInputChange,\n    ],\n  );\n\n  const handleFocus = () => setIsFocusVisible(true);\n  const handleBlur = () => setIsFocusVisible(false);\n\n  return {\n    handleBlur,\n    handleFocus,\n    handleKeydownOnThumb,\n    handlePointerDownOnThumb,\n    handlePointerDownOnTrack,\n    isDragging,\n    isFocusVisible,\n    sliderRef,\n  };\n};\n"],"names":["useState","useRef","useWindow","useCallback","getClickedPosition","useEffect","getKeyboardValue"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../src/slider/internal/utils.ts"],"sourcesContent":["import type { RefObject } from \"react\";\n\nexport const toFloat = (value: number | string) =>\n  typeof value === \"string\" ? Number.parseFloat(value) : value;\n\nexport const calculateMarkPosition = (\n  value: number | string,\n  max: number,\n  min: number,\n) => {\n  if (min === max) {\n    return 0;\n  }\n  const clampedValue = Number.isNaN(toFloat(value))\n    ? min\n    : Math.min(Math.max(toFloat(value), min), max);\n  const markPosition = ((clampedValue - min) / (max - min)) * 100;\n  return Math.round(markPosition * 100) / 100;\n};\n\nexport const calculatePercentage = (value: number, max: number, min: number) =>\n  ((value - min) / (max - min)) * 100;\n\nexport const clamp = (\n  value: number,\n  max: number,\n  min: number,\n  step: number,\n  decimalPlaces: number,\n  marks?: { value: number; label: string }[],\n  restrictToMarks?: boolean,\n) => {\n  if (Number.isNaN(value)) {\n    return min;\n  }\n  // Clamp the value between min and max\n  const clampedValue = Math.min(Math.max(value, min), max);\n  if (restrictToMarks && marks) {\n    // Find the closest mark value\n    let closestMark = marks[0].value;\n    let smallestDifference = Math.abs(clampedValue - closestMark);\n    for (let i = 1; i < marks.length; i++) {\n      const currentDifference = Math.abs(clampedValue - marks[i].value);\n      if (currentDifference < smallestDifference) {\n        smallestDifference = currentDifference;\n        closestMark = marks[i].value;\n      }\n    }\n    return closestMark;\n  }\n  // Round to the nearest multiple of the step\n  let roundedValue = Math.round(clampedValue / step) * step;\n  // Ensure the rounded value does not exceed max or min\n  if (roundedValue > max) {\n    roundedValue = max;\n  } else if (roundedValue < min) {\n    roundedValue = min;\n  }\n  return Number.parseFloat(roundedValue.toFixed(decimalPlaces));\n};\n\nexport const clampRange = (\n  range: [number, number],\n  max: number,\n  min: number,\n  step: number,\n  decimalPlaces: number,\n  marks?: { value: number; label: string }[],\n  restrictToMarks?: boolean,\n) => {\n  let [start, end] = range;\n\n  if (Number.isNaN(start)) {\n    start = min;\n  }\n  if (Number.isNaN(end)) {\n    end = max;\n  }\n  if (start > end) {\n    [start, end] = [end, start];\n  }\n  start = clamp(start, max, min, step, decimalPlaces, marks, restrictToMarks);\n  end = clamp(end, max, min, step, decimalPlaces, marks, restrictToMarks);\n  return [start, end] as [number, number];\n};\n\nexport const getClickedPosition = (\n  sliderRef: RefObject<HTMLDivElement>,\n  clientX: number,\n  max: number,\n  min: number,\n  step: number,\n  decimalPlaces: number,\n  marks?: { label: string; value: number }[],\n  restrictToMarks?: boolean,\n) => {\n  if (!sliderRef.current) return;\n\n  const sliderRect = sliderRef.current.getBoundingClientRect();\n  const rawValue =\n    ((clientX - sliderRect.left) / sliderRect.width) * (max - min) + min;\n  const steppedValue = Math.round(rawValue / step) * step;\n  return clamp(\n    steppedValue,\n    max,\n    min,\n    step,\n    decimalPlaces,\n    marks,\n    restrictToMarks,\n  );\n};\n\nexport const getKeyboardValue = (\n  event: React.KeyboardEvent,\n  value: number,\n  step: number,\n  stepMultiplier: number,\n  max: number,\n  min: number,\n  restrictToMarks?: boolean,\n  marks?: { label: string; value: number }[],\n) => {\n  let newValue = value;\n\n  if (restrictToMarks && marks && marks.length >= 1) {\n    const currentIndex = marks.findIndex((mark) => mark.value === value);\n\n    switch (event.key) {\n      case \"ArrowUp\":\n      case \"ArrowRight\":\n      case \"PageUp\":\n        if (currentIndex < marks.length - 1) {\n          newValue = marks[currentIndex + 1].value;\n        }\n        break;\n      case \"ArrowDown\":\n      case \"ArrowLeft\":\n      case \"PageDown\":\n        if (currentIndex > 0) {\n          newValue = marks[currentIndex - 1].value;\n        }\n        break;\n      default:\n        return newValue;\n    }\n  } else {\n    switch (event.key) {\n      case \"ArrowUp\":\n      case \"ArrowRight\":\n        newValue = Math.min(value + step, max);\n        break;\n      case \"ArrowDown\":\n      case \"ArrowLeft\":\n        newValue = Math.max(value - step, min);\n        break;\n      case \"Home\":\n        newValue = min;\n        break;\n      case \"End\":\n        newValue = max;\n        break;\n      case \"PageUp\":\n        newValue = Math.min(value + step * stepMultiplier, max);\n        break;\n      case \"PageDown\":\n        newValue = Math.max(value - step * stepMultiplier, min);\n        break;\n      default:\n        return newValue;\n    }\n  }\n\n  event.preventDefault();\n  return newValue;\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../src/slider/internal/utils.ts"],"sourcesContent":["import type { RefObject } from \"react\";\n\nexport const toFloat = (value: number | string) =>\n  typeof value === \"string\" ? Number.parseFloat(value) : value;\n\nexport const calculateMarkPosition = (\n  value: number | string,\n  max: number,\n  min: number,\n) => {\n  if (min === max) {\n    return 0;\n  }\n  const clampedValue = Number.isNaN(toFloat(value))\n    ? min\n    : Math.min(Math.max(toFloat(value), min), max);\n  const markPosition = ((clampedValue - min) / (max - min)) * 100;\n  return Math.round(markPosition * 100) / 100;\n};\n\nexport const calculatePercentage = (value: number, max: number, min: number) =>\n  ((value - min) / (max - min)) * 100;\n\nexport const clamp = (\n  value: number,\n  max: number,\n  min: number,\n  step: number,\n  decimalPlaces: number,\n  marks?: { value: number; label: string }[],\n  restrictToMarks?: boolean,\n) => {\n  if (Number.isNaN(value)) {\n    return min;\n  }\n  // Clamp the value between min and max\n  const clampedValue = Math.min(Math.max(value, min), max);\n  if (restrictToMarks && marks) {\n    // Find the closest mark value\n    let closestMark = marks[0].value;\n    let smallestDifference = Math.abs(clampedValue - closestMark);\n    for (let i = 1; i < marks.length; i++) {\n      const currentDifference = Math.abs(clampedValue - marks[i].value);\n      if (currentDifference < smallestDifference) {\n        smallestDifference = currentDifference;\n        closestMark = marks[i].value;\n      }\n    }\n    return closestMark;\n  }\n  // Round to the nearest multiple of the step\n  let roundedValue = Math.round(clampedValue / step) * step;\n  // Ensure the rounded value does not exceed max or min\n  if (roundedValue > max) {\n    roundedValue = max;\n  } else if (roundedValue < min) {\n    roundedValue = min;\n  }\n  return Number.parseFloat(roundedValue.toFixed(decimalPlaces));\n};\n\nexport const clampRange = (\n  range: [number, number],\n  max: number,\n  min: number,\n  step: number,\n  decimalPlaces: number,\n  marks?: { value: number; label: string }[],\n  restrictToMarks?: boolean,\n) => {\n  let [start, end] = range;\n\n  if (Number.isNaN(start)) {\n    start = min;\n  }\n  if (Number.isNaN(end)) {\n    end = max;\n  }\n  if (start > end) {\n    [start, end] = [end, start];\n  }\n  start = clamp(start, max, min, step, decimalPlaces, marks, restrictToMarks);\n  end = clamp(end, max, min, step, decimalPlaces, marks, restrictToMarks);\n  return [start, end] as [number, number];\n};\n\nexport const getClickedPosition = (\n  sliderRef: RefObject<HTMLDivElement | null>,\n  clientX: number,\n  max: number,\n  min: number,\n  step: number,\n  decimalPlaces: number,\n  marks?: { label: string; value: number }[],\n  restrictToMarks?: boolean,\n) => {\n  if (!sliderRef.current) return;\n\n  const sliderRect = sliderRef.current.getBoundingClientRect();\n  const rawValue =\n    ((clientX - sliderRect.left) / sliderRect.width) * (max - min) + min;\n  const steppedValue = Math.round(rawValue / step) * step;\n  return clamp(\n    steppedValue,\n    max,\n    min,\n    step,\n    decimalPlaces,\n    marks,\n    restrictToMarks,\n  );\n};\n\nexport const getKeyboardValue = (\n  event: React.KeyboardEvent,\n  value: number,\n  step: number,\n  stepMultiplier: number,\n  max: number,\n  min: number,\n  restrictToMarks?: boolean,\n  marks?: { label: string; value: number }[],\n) => {\n  let newValue = value;\n\n  if (restrictToMarks && marks && marks.length >= 1) {\n    const currentIndex = marks.findIndex((mark) => mark.value === value);\n\n    switch (event.key) {\n      case \"ArrowUp\":\n      case \"ArrowRight\":\n      case \"PageUp\":\n        if (currentIndex < marks.length - 1) {\n          newValue = marks[currentIndex + 1].value;\n        }\n        break;\n      case \"ArrowDown\":\n      case \"ArrowLeft\":\n      case \"PageDown\":\n        if (currentIndex > 0) {\n          newValue = marks[currentIndex - 1].value;\n        }\n        break;\n      default:\n        return newValue;\n    }\n  } else {\n    switch (event.key) {\n      case \"ArrowUp\":\n      case \"ArrowRight\":\n        newValue = Math.min(value + step, max);\n        break;\n      case \"ArrowDown\":\n      case \"ArrowLeft\":\n        newValue = Math.max(value - step, min);\n        break;\n      case \"Home\":\n        newValue = min;\n        break;\n      case \"End\":\n        newValue = max;\n        break;\n      case \"PageUp\":\n        newValue = Math.min(value + step * stepMultiplier, max);\n        break;\n      case \"PageDown\":\n        newValue = Math.max(value - step * stepMultiplier, min);\n        break;\n      default:\n        return newValue;\n    }\n  }\n\n  event.preventDefault();\n  return newValue;\n};\n"],"names":[],"mappings":"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"}

package/dist-cjs/stepper/Stepper.js

@@ -20,7 +20,7 @@ const Stepper = React.forwardRef(
     const orientationContext = React.useContext(StepperProvider.StepperOrientationContext);
     const orientation = orientationProp || orientationContext;
     styles.useComponentCssInjection({
-      testId: "salt-Stepper",
+      testId: "salt-stepper",
       css: Stepper$1,
       window: targetWindow
     });

package/dist-cjs/stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../src/stepper/Stepper.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef, useContext } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport {\n  StepperOrientationContext,\n  StepperProvider,\n} from \"./internal/StepperProvider\";\nimport StepperCSS from \"./Stepper.css\";\n\nconst withBaseName = makePrefixer(\"saltStepper\");\n\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n\nexport interface StepperProps extends ComponentPropsWithoutRef<\"ol\"> {\n  /**\n   * The orientation of the stepper: defaults to horizontal.\n   */\n  orientation?: StepperOrientation;\n}\n\nexport const Stepper = forwardRef<HTMLOListElement, StepperProps>(\n  function Stepper(\n    { orientation: orientationProp, children, className, ...props },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    const orientationContext = useContext(StepperOrientationContext);\n    const orientation = orientationProp || orientationContext;\n\n    useComponentCssInjection({\n      testId: \"salt-Stepper\",\n      css: StepperCSS,\n      window: targetWindow,\n    });\n\n    return (\n      <StepperProvider orientation={orientation}>\n        <ol\n          className={clsx(withBaseName(), withBaseName(orientation), className)}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </ol>\n      </StepperProvider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Stepper","useWindow","useContext","StepperOrientationContext","useComponentCssInjection","StepperCSS","jsx","StepperProvider","clsx"],"mappings":";;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA;AAWxC,MAAM,OAAA,GAAUC,gBAAA;AAAA,EACrB,SAASC,QAAAA,CACP,EAAE,WAAA,EAAa,eAAA,EAAiB,UAAU,SAAA,EAAW,GAAG,KAAA,EAAM,EAC9D,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAA,MAAM,kBAAA,GAAqBC,iBAAWC,yCAAyB,CAAA;AAC/D,IAAA,MAAM,cAAc,eAAA,IAAmB,kBAAA;AAEvC,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,cAAA;AAAA,MACR,GAAA,EAAKC,SAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA,CAACC,mCAAgB,WAAA,EACf,QAAA,kBAAAD,cAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,WAAWE,SAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,WAAW,GAAG,SAAS,CAAA;AAAA,QACpE,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"Stepper.js","sources":["../src/stepper/Stepper.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef, useContext } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport {\n  StepperOrientationContext,\n  StepperProvider,\n} from \"./internal/StepperProvider\";\nimport StepperCSS from \"./Stepper.css\";\n\nconst withBaseName = makePrefixer(\"saltStepper\");\n\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n\nexport interface StepperProps extends ComponentPropsWithoutRef<\"ol\"> {\n  /**\n   * The orientation of the stepper: defaults to horizontal.\n   */\n  orientation?: StepperOrientation;\n}\n\nexport const Stepper = forwardRef<HTMLOListElement, StepperProps>(\n  function Stepper(\n    { orientation: orientationProp, children, className, ...props },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    const orientationContext = useContext(StepperOrientationContext);\n    const orientation = orientationProp || orientationContext;\n\n    useComponentCssInjection({\n      testId: \"salt-stepper\",\n      css: StepperCSS,\n      window: targetWindow,\n    });\n\n    return (\n      <StepperProvider orientation={orientation}>\n        <ol\n          className={clsx(withBaseName(), withBaseName(orientation), className)}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </ol>\n      </StepperProvider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Stepper","useWindow","useContext","StepperOrientationContext","useComponentCssInjection","StepperCSS","jsx","StepperProvider","clsx"],"mappings":";;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA;AAWxC,MAAM,OAAA,GAAUC,gBAAA;AAAA,EACrB,SAASC,QAAAA,CACP,EAAE,WAAA,EAAa,eAAA,EAAiB,UAAU,SAAA,EAAW,GAAG,KAAA,EAAM,EAC9D,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAA,MAAM,kBAAA,GAAqBC,iBAAWC,yCAAyB,CAAA;AAC/D,IAAA,MAAM,cAAc,eAAA,IAAmB,kBAAA;AAEvC,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,cAAA;AAAA,MACR,GAAA,EAAKC,SAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA,CAACC,mCAAgB,WAAA,EACf,QAAA,kBAAAD,cAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,WAAWE,SAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,WAAW,GAAG,SAAS,CAAA;AAAA,QACpE,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/stepper/internal/StepText.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltStepText-label {\n  grid-area: label;\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n.saltStepper-horizontal .saltStepText-label {\n  margin-top: var(--salt-spacing-50);\n}\n\n.saltStepper-vertical .saltStepText-label {\n  padding-top: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);\n  padding-bottom: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);\n  padding-left: calc(var(--step-depth) * var(--salt-spacing-100));\n}\n\n.saltStep-depth-0 > .saltText.saltStepText-label {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n.saltStepText-description {\n  grid-area: description;\n  color: var(--salt-content-secondary-foreground);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-label-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n}\n\n.saltStepper-vertical .saltStepText-description {\n  padding-bottom: var(--salt-spacing-300);\n  padding-left: calc(var(--step-depth) * var(--salt-spacing-100));\n}\n\n.saltStep-status-warning > .saltStepText-description {\n  color: var(--salt-status-warning-foreground-informative);\n}\n\n.saltStep-status-error > .saltStepText-description {\n  color: var(--salt-status-error-foreground-informative);\n}\n";
+var css_248z = ".saltStepText-label {\n  grid-area: label;\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n.saltStepper-horizontal .saltStepText-label {\n  margin-top: var(--salt-spacing-50);\n}\n\n.saltStepper-vertical .saltStepText-label {\n  padding-top: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);\n  padding-bottom: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);\n  padding-left: calc(var(--step-depth) * var(--salt-spacing-100));\n}\n\n.saltStep-depth-0 > .saltText.saltStepText-label {\n  font-weight: var(--salt-text-fontWeight-bolder);\n}\n\n.saltStepText-description {\n  grid-area: description;\n  color: var(--salt-content-secondary-foreground);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-bolder);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-label-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n}\n\n.saltStepper-vertical .saltStepText-description {\n  padding-bottom: var(--salt-spacing-300);\n  padding-left: calc(var(--step-depth) * var(--salt-spacing-100));\n}\n\n.saltStep-status-warning > .saltStepText-description {\n  color: var(--salt-status-warning-foreground-informative);\n}\n\n.saltStep-status-error > .saltStepText-description {\n  color: var(--salt-status-error-foreground-informative);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=StepText.css.js.map

package/dist-cjs/stepper/internal/StepText.js

@@ -6,6 +6,8 @@ var window = require('@salt-ds/window');
 var clsx = require('clsx');
 require('../../text/Code.js');
 require('../../text/Display.js');
+require('../../text/Editorial.js');
+require('../../text/Eyebrow.js');
 require('../../text/Headings.js');
 require('../../text/Label.js');
 var Text = require('../../text/Text.js');

package/dist-cjs/stepper/internal/StepText.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepText.js","sources":["../src/stepper/internal/StepText.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\n\nimport { Text, type TextProps } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport stepTextCSS from \"./StepText.css\";\n\nexport interface StepTextProps extends TextProps<\"div\"> {\n  purpose: \"label\" | \"description\";\n}\n\nconst withBaseName = makePrefixer(\"saltStepText\");\n\nexport function StepText({\n  id,\n  purpose,\n  className,\n  styleAs = \"label\",\n  children,\n  ...props\n}: StepTextProps) {\n  const targetWindow = useWindow();\n\n  useComponentCssInjection({\n    testId: \"salt-step-text\",\n    css: stepTextCSS,\n    window: targetWindow,\n  });\n\n  return (\n    <Text\n      id={id}\n      className={clsx(withBaseName(), withBaseName(purpose), className)}\n      {...props}\n    >\n      {children}\n    </Text>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","stepTextCSS","jsx","Text","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AAEzC,SAAS,QAAA,CAAS;AAAA,EACvB,EAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA,GAAU,OAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAE/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,gBAAA;AAAA,IACR,GAAA,EAAKC,UAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,WAAWC,SAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,OAAO,GAAG,SAAS,CAAA;AAAA,MAC/D,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"StepText.js","sources":["../src/stepper/internal/StepText.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\n\nimport { Text, type TextProps } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport stepTextCSS from \"./StepText.css\";\n\nexport interface StepTextProps extends TextProps<\"div\"> {\n  purpose: \"label\" | \"description\";\n}\n\nconst withBaseName = makePrefixer(\"saltStepText\");\n\nexport function StepText({\n  id,\n  purpose,\n  className,\n  styleAs = \"label\",\n  children,\n  ...props\n}: StepTextProps) {\n  const targetWindow = useWindow();\n\n  useComponentCssInjection({\n    testId: \"salt-step-text\",\n    css: stepTextCSS,\n    window: targetWindow,\n  });\n\n  return (\n    <Text\n      id={id}\n      className={clsx(withBaseName(), withBaseName(purpose), className)}\n      {...props}\n    >\n      {children}\n    </Text>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","stepTextCSS","jsx","Text","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AAEzC,SAAS,QAAA,CAAS;AAAA,EACvB,EAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA,GAAU,OAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAE/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,gBAAA;AAAA,IACR,GAAA,EAAKC,UAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,WAAWC,SAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,OAAO,GAAG,SAAS,CAAA;AAAA,MAC/D,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist-cjs/table/Table.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Table: Main css class */\n.saltTable {\n  --table-header-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));\n  --table-footer-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));\n  --table-row-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));\n}\n\n.saltTable-primary {\n  --table-background: var(--salt-container-primary-background);\n}\n\n.saltTable-secondary {\n  --table-background: var(--salt-container-secondary-background);\n}\n\n.saltTable-tertiary {\n  --table-background: var(--salt-container-tertiary-background);\n}\n\n.saltTable-divider-primary {\n  --table-divider-color: var(--salt-separable-primary-borderColor);\n}\n\n.saltTable-divider-secondary {\n  --table-divider-color: var(--salt-separable-secondary-borderColor);\n}\n\n.saltTable-divider-tertiary {\n  --table-divider-color: var(--salt-separable-tertiary-borderColor);\n}\n\n/* Zebra styling */\ntable.saltTable-zebra-tertiary tbody tr:nth-of-type(odd) {\n  --table-background: var(--salt-container-tertiary-background);\n}\n\ntable.saltTable-primary.saltTable-zebra tbody tr:nth-of-type(odd) {\n  --table-background: var(--salt-container-secondary-background);\n}\n\ntable.saltTable-secondary.saltTable-zebra tbody tr:nth-of-type(odd) {\n  --table-background: var(--salt-container-primary-background);\n}\n\ntable.saltTable-tertiary.saltTable-zebra tbody tr:nth-of-type(odd) {\n  --table-background: var(--salt-container-primary-background);\n}\n\ntable.saltTable {\n  border-spacing: 0;\n  border-radius: var(--salt-palette-corner, 0);\n  border-collapse: collapse;\n  color: var(--salt-content-primary-foreground);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  width: 100%;\n}\n\n/* TR */\ntable.saltTable tr {\n  background: var(--table-background);\n}\n\ntable.saltTable tbody tr {\n  height: var(--table-row-height);\n  min-height: var(--table-row-height);\n}\n\ntable.saltTable tbody tr:not(:last-child) {\n  border-bottom: var(--salt-borderStyle-solid) var(--table-divider-color) var(--salt-size-fixed-100);\n}\n\ntable.saltTable.saltTable-divider-none tbody tr {\n  --table-divider-color: transparent;\n}\n\n/* THead */\ntable.saltTable thead {\n  border-start-start-radius: var(--salt-palette-corner);\n  border-start-end-radius: var(--salt-palette-corner);\n  color: var(--salt-content-secondary-foreground);\n  height: var(--table-header-height);\n  min-height: var(--table-header-height);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  line-height: var(--salt-text-label-lineHeight);\n}\n\ntable.saltTable thead.saltTable-thead-sticky {\n  position: sticky;\n  top: 0;\n}\n\ntable.saltTable thead.saltTable-thead-primary tr {\n  background: var(--salt-container-primary-background);\n}\n\ntable.saltTable thead.saltTable-thead-secondary tr {\n  background: var(--salt-container-secondary-background);\n}\n\ntable.saltTable thead.saltTable-thead-tertiary tr {\n  background: var(--salt-container-tertiary-background);\n}\n\ntable.saltTable thead.saltTable-thead tr {\n  border-bottom: var(--salt-borderStyle-solid) var(--table-header-divider-color) var(--salt-size-fixed-100);\n}\n\ntable.saltTable thead.saltTable-thead-divider-primary {\n  --table-header-divider-color: var(--salt-separable-primary-borderColor);\n}\n\ntable.saltTable thead.saltTable-thead-divider-secondary {\n  --table-header-divider-color: var(--salt-separable-secondary-borderColor);\n}\n\ntable.saltTable thead.saltTable-thead-divider-tertiary {\n  --table-header-divider-color: var(--salt-separable-tertiary-borderColor);\n}\n\ntable.saltTable thead.saltTable-thead-divider-none {\n  --table-header-divider-color: transparent;\n}\n\n/* TFoot */\ntable.saltTable tfoot {\n  border-end-start-radius: var(--salt-palette-corner);\n  border-end-end-radius: var(--salt-palette-corner);\n  color: var(--salt-content-primary-foreground);\n  height: var(--table-footer-height);\n  min-height: var(--table-footer-height);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-sticky {\n  position: sticky;\n  bottom: 0;\n}\n\ntable.saltTable tfoot.saltTable-tfoot tr {\n  border-top: var(--salt-borderStyle-solid) var(--table-footer-divider-color) var(--salt-size-fixed-100);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-primary tr {\n  background: var(--salt-container-primary-background);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-secondary tr {\n  background: var(--salt-container-secondary-background);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-tertiary tr {\n  background: var(--salt-container-tertiary-background);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-divider-primary tr {\n  --table-footer-divider-color: var(--salt-separable-primary-borderColor);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-divider-secondary tr {\n  --table-footer-divider-color: var(--salt-separable-secondary-borderColor);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-divider-tertiary tr {\n  --table-footer-divider-color: var(--salt-separable-tertiary-borderColor);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-divider-none tr {\n  --table-footer-divider-color: transparent;\n}\n\n/* TH */\ntable.saltTable th {\n  padding: calc(var(--salt-spacing-75) + var(--salt-spacing-50)) var(--salt-spacing-100);\n  padding-top: calc(var(--salt-spacing-75) + var(--salt-spacing-50) + var(--salt-size-fixed-100));\n  position: relative;\n  text-align: start;\n  vertical-align: top;\n  font-weight: inherit;\n}\n\ntable.saltTable th.saltTable-th-align-left {\n  text-align: start;\n}\n\ntable.saltTable th.saltTable-th-align-right {\n  text-align: end;\n}\n\ntable.saltTable tbody th[scope=\"row\"] {\n  font-weight: var(--salt-text-fontWeight-strong);\n  line-height: var(--salt-text-lineHeight);\n}\n\ntable.saltTable th + th::before {\n  background: var(--salt-separable-tertiary-borderColor);\n  content: \"\";\n  position: absolute;\n  z-index: 1;\n  display: block;\n  width: var(--salt-size-fixed-100);\n  height: calc(100% - var(--salt-spacing-200));\n  left: 0;\n  top: var(--salt-spacing-100);\n}\n\n/* TD */\ntable.saltTable td {\n  height: 100%;\n  vertical-align: top;\n  padding: calc(var(--salt-spacing-75) + var(--salt-spacing-50)) var(--salt-spacing-100);\n}\n\ntable.saltTable td.saltTable-td-align-left {\n  text-align: start;\n}\n\ntable.saltTable td.saltTable-td-align-right {\n  text-align: end;\n}\n\n.saltTable-container {\n  width: 100%;\n  overflow: auto;\n}\n";
+var css_248z = "/* Table: Main css class */\n.saltTable {\n  --table-header-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));\n  --table-footer-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));\n  --table-row-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));\n}\n\n.saltTable-primary {\n  --table-background: var(--salt-container-primary-background);\n}\n\n.saltTable-secondary {\n  --table-background: var(--salt-container-secondary-background);\n}\n\n.saltTable-tertiary {\n  --table-background: var(--salt-container-tertiary-background);\n}\n\n.saltTable-divider-primary {\n  --table-divider-color: var(--salt-separable-primary-borderColor);\n}\n\n.saltTable-divider-secondary {\n  --table-divider-color: var(--salt-separable-secondary-borderColor);\n}\n\n.saltTable-divider-tertiary {\n  --table-divider-color: var(--salt-separable-tertiary-borderColor);\n}\n\n/* Zebra styling */\ntable.saltTable-zebra-tertiary tbody tr:nth-of-type(odd) {\n  --table-background: var(--salt-container-tertiary-background);\n}\n\ntable.saltTable-primary.saltTable-zebra tbody tr:nth-of-type(odd) {\n  --table-background: var(--salt-container-secondary-background);\n}\n\ntable.saltTable-secondary.saltTable-zebra tbody tr:nth-of-type(odd) {\n  --table-background: var(--salt-container-primary-background);\n}\n\ntable.saltTable-tertiary.saltTable-zebra tbody tr:nth-of-type(odd) {\n  --table-background: var(--salt-container-primary-background);\n}\n\ntable.saltTable {\n  border-spacing: 0;\n  border-radius: var(--salt-palette-corner, 0);\n  border-collapse: collapse;\n  color: var(--salt-content-primary-foreground);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  width: 100%;\n}\n\n/* TR */\ntable.saltTable tr {\n  background: var(--table-background);\n}\n\ntable.saltTable tbody tr {\n  height: var(--table-row-height);\n  min-height: var(--table-row-height);\n}\n\ntable.saltTable tbody tr:not(:last-child) {\n  border-bottom: var(--salt-borderStyle-solid) var(--table-divider-color) var(--salt-size-fixed-100);\n}\n\ntable.saltTable.saltTable-divider-none tbody tr {\n  --table-divider-color: transparent;\n}\n\n/* THead */\ntable.saltTable thead {\n  border-start-start-radius: var(--salt-palette-corner);\n  border-start-end-radius: var(--salt-palette-corner);\n  color: var(--salt-content-secondary-foreground);\n  height: var(--table-header-height);\n  min-height: var(--table-header-height);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-bolder);\n  line-height: var(--salt-text-label-lineHeight);\n}\n\ntable.saltTable thead.saltTable-thead-sticky {\n  position: sticky;\n  top: 0;\n}\n\ntable.saltTable thead.saltTable-thead-primary tr {\n  background: var(--salt-container-primary-background);\n}\n\ntable.saltTable thead.saltTable-thead-secondary tr {\n  background: var(--salt-container-secondary-background);\n}\n\ntable.saltTable thead.saltTable-thead-tertiary tr {\n  background: var(--salt-container-tertiary-background);\n}\n\ntable.saltTable thead.saltTable-thead tr {\n  border-bottom: var(--salt-borderStyle-solid) var(--table-header-divider-color) var(--salt-size-fixed-100);\n}\n\ntable.saltTable thead.saltTable-thead-divider-primary {\n  --table-header-divider-color: var(--salt-separable-primary-borderColor);\n}\n\ntable.saltTable thead.saltTable-thead-divider-secondary {\n  --table-header-divider-color: var(--salt-separable-secondary-borderColor);\n}\n\ntable.saltTable thead.saltTable-thead-divider-tertiary {\n  --table-header-divider-color: var(--salt-separable-tertiary-borderColor);\n}\n\ntable.saltTable thead.saltTable-thead-divider-none {\n  --table-header-divider-color: transparent;\n}\n\n/* TFoot */\ntable.saltTable tfoot {\n  border-end-start-radius: var(--salt-palette-corner);\n  border-end-end-radius: var(--salt-palette-corner);\n  color: var(--salt-content-primary-foreground);\n  height: var(--table-footer-height);\n  min-height: var(--table-footer-height);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-weight: var(--salt-text-fontWeight-bolder);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-sticky {\n  position: sticky;\n  bottom: 0;\n}\n\ntable.saltTable tfoot.saltTable-tfoot tr {\n  border-top: var(--salt-borderStyle-solid) var(--table-footer-divider-color) var(--salt-size-fixed-100);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-primary tr {\n  background: var(--salt-container-primary-background);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-secondary tr {\n  background: var(--salt-container-secondary-background);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-tertiary tr {\n  background: var(--salt-container-tertiary-background);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-divider-primary tr {\n  --table-footer-divider-color: var(--salt-separable-primary-borderColor);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-divider-secondary tr {\n  --table-footer-divider-color: var(--salt-separable-secondary-borderColor);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-divider-tertiary tr {\n  --table-footer-divider-color: var(--salt-separable-tertiary-borderColor);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-divider-none tr {\n  --table-footer-divider-color: transparent;\n}\n\n/* TH */\ntable.saltTable th {\n  padding: calc(var(--salt-spacing-75) + var(--salt-spacing-50)) var(--salt-spacing-100);\n  padding-top: calc(var(--salt-spacing-75) + var(--salt-spacing-50) + var(--salt-size-fixed-100));\n  position: relative;\n  text-align: start;\n  vertical-align: top;\n  font-weight: inherit;\n}\n\ntable.saltTable th.saltTable-th-align-left {\n  text-align: start;\n}\n\ntable.saltTable th.saltTable-th-align-right {\n  text-align: end;\n}\n\ntable.saltTable tbody th[scope=\"row\"] {\n  font-weight: var(--salt-text-fontWeight-bolder);\n  line-height: var(--salt-text-lineHeight);\n}\n\ntable.saltTable th + th::before {\n  background: var(--salt-separable-tertiary-borderColor);\n  content: \"\";\n  position: absolute;\n  z-index: 1;\n  display: block;\n  width: var(--salt-size-fixed-100);\n  height: calc(100% - var(--salt-spacing-200));\n  left: 0;\n  top: var(--salt-spacing-100);\n}\n\n/* TD */\ntable.saltTable td {\n  height: 100%;\n  vertical-align: top;\n  padding: calc(var(--salt-spacing-75) + var(--salt-spacing-50)) var(--salt-spacing-100);\n}\n\ntable.saltTable td.saltTable-td-align-left {\n  text-align: start;\n}\n\ntable.saltTable td.saltTable-td-align-right {\n  text-align: end;\n}\n\n.saltTable-container {\n  width: 100%;\n  overflow: auto;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Table.css.js.map

package/dist-cjs/tabs/Tabs.js

@@ -74,7 +74,7 @@ const Tabs = React.forwardRef(
       removalVersion,
       getRemovedItems
     } = useCollection.useCollection({ targetWindow, wrap: true });
-    const activeTab = React.useRef();
+    const activeTab = React.useRef(void 0);
     const [menuOpen, setMenuOpen] = React.useState(false);
     const [selected, setSelectedState] = useControlled.useControlled({
       controlled: value,