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

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

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

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

@@ -0,0 +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 SetStateAction,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport type { SliderProps } from \"../Slider\";\nimport { getClickedPosition, getKeyboardValue } from \"./utils\";\n\ntype UseSliderThumbProps = Pick<SliderProps, \"min\" | \"max\" | \"step\"> & {\n  decimalPlaces: number;\n  handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;\n  marks?: { label: string; value: number }[];\n  onChange?: (event: SyntheticEvent<unknown> | Event, value: number) => void;\n  onChangeEnd?: (event: SyntheticEvent<unknown> | 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  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 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 handlePointerUp = useCallback(\n    (event: PointerEvent) => {\n      setIsDragging(false);\n      onChangeEnd?.(event, lastValueRef.current);\n    },\n    [onChangeEnd],\n  );\n\n  useEffect(() => {\n    if (isDragging) {\n      targetWindow?.addEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.addEventListener(\"pointerup\", handlePointerUp);\n    } else {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n    }\n    return () => {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n    };\n  }, [handlePointerMove, handlePointerUp, isDragging, targetWindow]);\n\n  const handlePointerDownOnThumb = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDragging(true);\n    },\n    [],\n  );\n\n  const handlePointerDownOnTrack = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      setIsDragging(true);\n      const newValue = getClickedPosition(\n        sliderRef,\n        event.clientX,\n        max,\n        min,\n        step,\n        decimalPlaces,\n        marks,\n        restrictToMarks,\n      );\n      if (newValue === undefined || lastValueRef.current === newValue) {\n        return;\n      }\n      lastValueRef.current = newValue;\n      setValue(newValue);\n      onChange?.(event, newValue);\n    },\n    [decimalPlaces, marks, max, min, onChange, restrictToMarks, setValue, step],\n  );\n\n  const handleKeydownOnThumb = (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\n    handleInputChange({\n      target: { value: newValue.toString() },\n    } as ChangeEvent<HTMLInputElement>);\n  };\n\n  return {\n    handleKeydownOnThumb,\n    handlePointerDownOnThumb,\n    handlePointerDownOnTrack,\n    isDragging,\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

@@ -1,86 +1,111 @@
 'use strict';
 
-const getValue = (trackRef, min, max, step, clientX) => {
-  const { width, x } = trackRef.current.getBoundingClientRect();
-  const localX = clientX - x;
-  const normaliseBetweenValues = localX / width * (max - min) + min;
-  const roundedToStep = roundToStep(normaliseBetweenValues, step);
-  const decimals = countDecimalPlaces(step);
-  const rounded = Number(roundedToStep.toFixed(decimals));
-  const value = clampValue(rounded, [min, max]);
-  return value;
-};
-const setValue = (value, newValue, index, onChange) => {
-  if (value.length === 2) {
-    const newValueArray = [...value];
-    newValueArray.splice(index, 1, newValue);
-    onChange(newValueArray);
-    return;
+const toFloat = (value) => typeof value === "string" ? Number.parseFloat(value) : value;
+const calculateMarkPosition = (value, max, min) => {
+  if (min === max) {
+    return 0;
   }
-  onChange([newValue]);
+  const clampedValue = Number.isNaN(toFloat(value)) ? min : Math.min(Math.max(toFloat(value), min), max);
+  const markPosition = (clampedValue - min) / (max - min) * 100;
+  return Math.round(markPosition * 100) / 100;
 };
-const roundToStep = (value, step) => Math.round(value / step) * step;
-const clampValue = (value, [min, max]) => {
-  if (value > max) {
-    return max;
-  }
-  if (value < min) {
+const calculatePercentage = (value, max, min) => (value - min) / (max - min) * 100;
+const clamp = (value, max, min, step, decimalPlaces, marks, restrictToMarks) => {
+  if (Number.isNaN(value)) {
     return min;
   }
-  return value;
-};
-const getPercentage = (min, max, value) => {
-  const percentage = (value - min) / (max - min) * 100;
-  return Math.min(Math.max(percentage, 0), 100);
-};
-const countDecimalPlaces = (num) => {
-  const parts = num.toString().split(".");
-  return parts.length > 1 ? parts[1].length : 0;
+  const clampedValue = Math.min(Math.max(value, min), max);
+  if (restrictToMarks && marks) {
+    let closestMark = marks[0].value;
+    let smallestDifference = Math.abs(clampedValue - closestMark);
+    for (let i = 1; i < marks.length; i++) {
+      const currentDifference = Math.abs(clampedValue - marks[i].value);
+      if (currentDifference < smallestDifference) {
+        smallestDifference = currentDifference;
+        closestMark = marks[i].value;
+      }
+    }
+    return closestMark;
+  }
+  let roundedValue = Math.round(clampedValue / step) * step;
+  if (roundedValue > max) {
+    roundedValue = max;
+  }
+  return Number.parseFloat(roundedValue.toFixed(decimalPlaces));
 };
-const getMarkStyles = (min, max, step) => {
-  const marks = [];
-  for (let i = min; i <= max; i = Number((i + step).toPrecision(4))) {
-    const value = Number(i.toPrecision(4));
-    const position = `${getPercentage(min, max, value)}%`;
-    marks.push({ value, position });
+const clampRange = (range, max, min, step, decimalPlaces, marks, restrictToMarks) => {
+  let [start, end] = range;
+  if (Number.isNaN(start)) {
+    start = min;
+  }
+  if (Number.isNaN(end)) {
+    end = max;
+  }
+  if (start > end) {
+    [start, end] = [end, start];
   }
-  const decimals = Math.max(
-    ...marks.map((mark) => countDecimalPlaces(mark.value))
+  start = clamp(start, max, min, step, decimalPlaces, marks, restrictToMarks);
+  end = clamp(end, max, min, step, decimalPlaces, marks, restrictToMarks);
+  return [start, end];
+};
+const getClickedPosition = (sliderRef, clientX, max, min, step, decimalPlaces, marks, restrictToMarks) => {
+  if (!sliderRef.current) return;
+  const sliderRect = sliderRef.current.getBoundingClientRect();
+  const rawValue = (clientX - sliderRect.left) / sliderRect.width * (max - min) + min;
+  const steppedValue = Math.round(rawValue / step) * step;
+  return clamp(
+    steppedValue,
+    max,
+    min,
+    step,
+    decimalPlaces,
+    marks,
+    restrictToMarks
   );
-  return marks.map((mark) => ({
-    ...mark,
-    label: mark.value.toFixed(decimals)
-  }));
 };
-const getNearestIndex = (value, newValue) => {
-  if (value.length === 1) return 0;
-  if (value[0] === value[1]) {
-    if (newValue < value[0]) return 0;
-    return 1;
+const getKeyboardValue = (event, value, step, stepMultiplier, max, min, restrictToMarks, marks) => {
+  let newValue = value;
+  if (restrictToMarks && marks && marks.length >= 1) {
+    const currentIndex = marks.findIndex((mark) => mark.value === value);
+    switch (event.key) {
+      case "ArrowUp":
+      case "ArrowRight":
+      case "PageUp":
+        if (currentIndex < marks.length - 1) {
+          newValue = marks[currentIndex + 1].value;
+        }
+        break;
+      case "ArrowDown":
+      case "ArrowLeft":
+      case "PageDown":
+        if (currentIndex > 0) {
+          newValue = marks[currentIndex - 1].value;
+        }
+        break;
+      default:
+        return newValue;
+    }
+  } else {
+    switch (event.key) {
+      case "PageUp":
+        newValue = Math.min(value + step * stepMultiplier, max);
+        break;
+      case "PageDown":
+        newValue = Math.max(value - step * stepMultiplier, min);
+        break;
+      default:
+        return newValue;
+    }
   }
-  const distances = value.map((value2) => Math.abs(newValue - value2));
-  const minDistance = Math.min(...distances);
-  const nearestIndex = distances.indexOf(minDistance);
-  return nearestIndex;
-};
-const preventOverlappingValues = (value, newValue, index) => value.length === 2 ? index === 0 ? Math.min(newValue, value[1]) : Math.max(newValue, value[0]) : newValue;
-const parseValueProp = (value, min, max) => {
-  if (typeof value === "undefined" || value.length < 1) return;
-  const a = clampValue(value[0], [min, max]);
-  if (value.length === 1) return [a];
-  const b = clampValue(value[1], [min, max]);
-  if (a > b) return [a, a];
-  return [a, b];
+  event.preventDefault();
+  return newValue;
 };
 
-exports.clampValue = clampValue;
-exports.countDecimalPlaces = countDecimalPlaces;
-exports.getMarkStyles = getMarkStyles;
-exports.getNearestIndex = getNearestIndex;
-exports.getPercentage = getPercentage;
-exports.getValue = getValue;
-exports.parseValueProp = parseValueProp;
-exports.preventOverlappingValues = preventOverlappingValues;
-exports.roundToStep = roundToStep;
-exports.setValue = setValue;
+exports.calculateMarkPosition = calculateMarkPosition;
+exports.calculatePercentage = calculatePercentage;
+exports.clamp = clamp;
+exports.clampRange = clampRange;
+exports.getClickedPosition = getClickedPosition;
+exports.getKeyboardValue = getKeyboardValue;
+exports.toFloat = toFloat;
 //# sourceMappingURL=utils.js.map

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\";\nimport type { SliderChangeHandler, SliderValue, ThumbIndex } from \"../types\";\n\nexport const getValue = (\n  trackRef: RefObject<Element>,\n  min: number,\n  max: number,\n  step: number,\n  clientX: number,\n) => {\n  const { width, x } = trackRef.current!.getBoundingClientRect();\n  const localX = clientX - x;\n  const normaliseBetweenValues = (localX / width) * (max - min) + min;\n  const roundedToStep = roundToStep(normaliseBetweenValues, step);\n  const decimals = countDecimalPlaces(step);\n  const rounded = Number(roundedToStep.toFixed(decimals));\n  const value = clampValue(rounded, [min, max]);\n  return value;\n};\n\nexport const setValue = (\n  value: SliderValue,\n  newValue: number,\n  index: ThumbIndex,\n  onChange: SliderChangeHandler,\n) => {\n  if (value.length === 2) {\n    const newValueArray = [...value];\n    newValueArray.splice(index, 1, newValue);\n    onChange(newValueArray as SliderValue);\n    return;\n  }\n  onChange([newValue]);\n};\n\nexport const roundToStep = (value: number, step: number) =>\n  Math.round(value / step) * step;\n\nexport const clampValue = (value: number, [min, max]: number[]) => {\n  if (value > max) {\n    return max;\n  }\n  if (value < min) {\n    return min;\n  }\n  return value;\n};\n\nexport const getPercentage = (min: number, max: number, value: number) => {\n  const percentage = ((value - min) / (max - min)) * 100;\n  return Math.min(Math.max(percentage, 0), 100);\n};\n\nexport const getPercentageDifference = (\n  min: number,\n  max: number,\n  value: number[],\n) => {\n  const valueDiff = value[1] - value[0];\n  const percentage = ((valueDiff - min) / (max - min)) * 100;\n  return `${Math.min(Math.max(percentage, 0), 100)}%`;\n};\n\nexport const getPercentageOffset = (\n  min: number,\n  max: number,\n  value: number[],\n) => {\n  const offsetLeft = ((value[0] - min) / (max - min)) * 100;\n  return `${Math.min(Math.max(offsetLeft, 0), 100)}%`;\n};\n\nexport const countDecimalPlaces = (num: number) => {\n  const parts = num.toString().split(\".\");\n  return parts.length > 1 ? parts[1].length : 0;\n};\n\nexport const getMarkStyles = (min: number, max: number, step: number) => {\n  const marks = [];\n  for (let i = min; i <= max; i = Number((i + step).toPrecision(4))) {\n    const value = Number(i.toPrecision(4));\n    const position = `${getPercentage(min, max, value)}%`;\n    marks.push({ value, position });\n  }\n  const decimals = Math.max(\n    ...marks.map((mark) => countDecimalPlaces(mark.value)),\n  );\n  return marks.map((mark) => ({\n    ...mark,\n    label: mark.value.toFixed(decimals),\n  }));\n};\n\nexport const getNearestIndex = (value: SliderValue, newValue: number) => {\n  if (value.length === 1) return 0;\n\n  if (value[0] === value[1]) {\n    if (newValue < value[0]) return 0;\n    return 1;\n  }\n\n  const distances = value.map((value) => Math.abs(newValue - value));\n  const minDistance = Math.min(...distances);\n  const nearestIndex = distances.indexOf(minDistance);\n\n  return nearestIndex as ThumbIndex;\n};\n\nexport const preventOverlappingValues = (\n  value: SliderValue,\n  newValue: number,\n  index: ThumbIndex,\n) =>\n  value.length === 2\n    ? index === 0\n      ? Math.min(newValue, value[1])\n      : Math.max(newValue, value[0])\n    : newValue;\n\nexport const parseValueProp = (\n  value: number[] | undefined,\n  min: number,\n  max: number,\n) => {\n  if (typeof value === \"undefined\" || value.length < 1) return;\n  const a = clampValue(value[0], [min, max]);\n  if (value.length === 1) return [a] as SliderValue;\n  const b = clampValue(value[1], [min, max]);\n  if (a > b) return [a, a] as SliderValue;\n  return [a, b] as SliderValue;\n};\n"],"names":["value"],"mappings":";;AAGO,MAAM,WAAW,CACtB,QAAA,EACA,GACA,EAAA,GAAA,EACA,MACA,OACG,KAAA;AACH,EAAA,MAAM,EAAE,KAAO,EAAA,CAAA,EAAM,GAAA,QAAA,CAAS,QAAS,qBAAsB,EAAA;AAC7D,EAAA,MAAM,SAAS,OAAU,GAAA,CAAA;AACzB,EAAA,MAAM,sBAA0B,GAAA,MAAA,GAAS,KAAU,IAAA,GAAA,GAAM,GAAO,CAAA,GAAA,GAAA;AAChE,EAAM,MAAA,aAAA,GAAgB,WAAY,CAAA,sBAAA,EAAwB,IAAI,CAAA;AAC9D,EAAM,MAAA,QAAA,GAAW,mBAAmB,IAAI,CAAA;AACxC,EAAA,MAAM,OAAU,GAAA,MAAA,CAAO,aAAc,CAAA,OAAA,CAAQ,QAAQ,CAAC,CAAA;AACtD,EAAA,MAAM,QAAQ,UAAW,CAAA,OAAA,EAAS,CAAC,GAAA,EAAK,GAAG,CAAC,CAAA;AAC5C,EAAO,OAAA,KAAA;AACT;AAEO,MAAM,QAAW,GAAA,CACtB,KACA,EAAA,QAAA,EACA,OACA,QACG,KAAA;AACH,EAAI,IAAA,KAAA,CAAM,WAAW,CAAG,EAAA;AACtB,IAAM,MAAA,aAAA,GAAgB,CAAC,GAAG,KAAK,CAAA;AAC/B,IAAc,aAAA,CAAA,MAAA,CAAO,KAAO,EAAA,CAAA,EAAG,QAAQ,CAAA;AACvC,IAAA,QAAA,CAAS,aAA4B,CAAA;AACrC,IAAA;AAAA;AAEF,EAAS,QAAA,CAAA,CAAC,QAAQ,CAAC,CAAA;AACrB;AAEa,MAAA,WAAA,GAAc,CAAC,KAAe,EAAA,IAAA,KACzC,KAAK,KAAM,CAAA,KAAA,GAAQ,IAAI,CAAI,GAAA;AAEtB,MAAM,aAAa,CAAC,KAAA,EAAe,CAAC,GAAA,EAAK,GAAG,CAAgB,KAAA;AACjE,EAAA,IAAI,QAAQ,GAAK,EAAA;AACf,IAAO,OAAA,GAAA;AAAA;AAET,EAAA,IAAI,QAAQ,GAAK,EAAA;AACf,IAAO,OAAA,GAAA;AAAA;AAET,EAAO,OAAA,KAAA;AACT;AAEO,MAAM,aAAgB,GAAA,CAAC,GAAa,EAAA,GAAA,EAAa,KAAkB,KAAA;AACxE,EAAA,MAAM,UAAe,GAAA,CAAA,KAAA,GAAQ,GAAQ,KAAA,GAAA,GAAM,GAAQ,CAAA,GAAA,GAAA;AACnD,EAAA,OAAO,KAAK,GAAI,CAAA,IAAA,CAAK,IAAI,UAAY,EAAA,CAAC,GAAG,GAAG,CAAA;AAC9C;AAqBa,MAAA,kBAAA,GAAqB,CAAC,GAAgB,KAAA;AACjD,EAAA,MAAM,KAAQ,GAAA,GAAA,CAAI,QAAS,EAAA,CAAE,MAAM,GAAG,CAAA;AACtC,EAAA,OAAO,MAAM,MAAS,GAAA,CAAA,GAAI,KAAM,CAAA,CAAC,EAAE,MAAS,GAAA,CAAA;AAC9C;AAEO,MAAM,aAAgB,GAAA,CAAC,GAAa,EAAA,GAAA,EAAa,IAAiB,KAAA;AACvE,EAAA,MAAM,QAAQ,EAAC;AACf,EAAS,KAAA,IAAA,CAAA,GAAI,GAAK,EAAA,CAAA,IAAK,GAAK,EAAA,CAAA,GAAI,MAAQ,CAAA,CAAA,CAAA,GAAI,IAAM,EAAA,WAAA,CAAY,CAAC,CAAC,CAAG,EAAA;AACjE,IAAA,MAAM,KAAQ,GAAA,MAAA,CAAO,CAAE,CAAA,WAAA,CAAY,CAAC,CAAC,CAAA;AACrC,IAAA,MAAM,WAAW,CAAG,EAAA,aAAA,CAAc,GAAK,EAAA,GAAA,EAAK,KAAK,CAAC,CAAA,CAAA,CAAA;AAClD,IAAA,KAAA,CAAM,IAAK,CAAA,EAAE,KAAO,EAAA,QAAA,EAAU,CAAA;AAAA;AAEhC,EAAA,MAAM,WAAW,IAAK,CAAA,GAAA;AAAA,IACpB,GAAG,MAAM,GAAI,CAAA,CAAC,SAAS,kBAAmB,CAAA,IAAA,CAAK,KAAK,CAAC;AAAA,GACvD;AACA,EAAO,OAAA,KAAA,CAAM,GAAI,CAAA,CAAC,IAAU,MAAA;AAAA,IAC1B,GAAG,IAAA;AAAA,IACH,KAAO,EAAA,IAAA,CAAK,KAAM,CAAA,OAAA,CAAQ,QAAQ;AAAA,GAClC,CAAA,CAAA;AACJ;AAEa,MAAA,eAAA,GAAkB,CAAC,KAAA,EAAoB,QAAqB,KAAA;AACvE,EAAI,IAAA,KAAA,CAAM,MAAW,KAAA,CAAA,EAAU,OAAA,CAAA;AAE/B,EAAA,IAAI,KAAM,CAAA,CAAC,CAAM,KAAA,KAAA,CAAM,CAAC,CAAG,EAAA;AACzB,IAAA,IAAI,QAAW,GAAA,KAAA,CAAM,CAAC,CAAA,EAAU,OAAA,CAAA;AAChC,IAAO,OAAA,CAAA;AAAA;AAGT,EAAM,MAAA,SAAA,GAAY,MAAM,GAAI,CAAA,CAACA,WAAU,IAAK,CAAA,GAAA,CAAI,QAAWA,GAAAA,MAAK,CAAC,CAAA;AACjE,EAAA,MAAM,WAAc,GAAA,IAAA,CAAK,GAAI,CAAA,GAAG,SAAS,CAAA;AACzC,EAAM,MAAA,YAAA,GAAe,SAAU,CAAA,OAAA,CAAQ,WAAW,CAAA;AAElD,EAAO,OAAA,YAAA;AACT;AAEa,MAAA,wBAAA,GAA2B,CACtC,KACA,EAAA,QAAA,EACA,UAEA,KAAM,CAAA,MAAA,KAAW,CACb,GAAA,KAAA,KAAU,CACR,GAAA,IAAA,CAAK,IAAI,QAAU,EAAA,KAAA,CAAM,CAAC,CAAC,CAC3B,GAAA,IAAA,CAAK,IAAI,QAAU,EAAA,KAAA,CAAM,CAAC,CAAC,CAC7B,GAAA;AAEC,MAAM,cAAiB,GAAA,CAC5B,KACA,EAAA,GAAA,EACA,GACG,KAAA;AACH,EAAA,IAAI,OAAO,KAAA,KAAU,WAAe,IAAA,KAAA,CAAM,SAAS,CAAG,EAAA;AACtD,EAAM,MAAA,CAAA,GAAI,WAAW,KAAM,CAAA,CAAC,GAAG,CAAC,GAAA,EAAK,GAAG,CAAC,CAAA;AACzC,EAAA,IAAI,KAAM,CAAA,MAAA,KAAW,CAAG,EAAA,OAAO,CAAC,CAAC,CAAA;AACjC,EAAM,MAAA,CAAA,GAAI,WAAW,KAAM,CAAA,CAAC,GAAG,CAAC,GAAA,EAAK,GAAG,CAAC,CAAA;AACzC,EAAA,IAAI,CAAI,GAAA,CAAA,EAAU,OAAA,CAAC,GAAG,CAAC,CAAA;AACvB,EAAO,OAAA,CAAC,GAAG,CAAC,CAAA;AACd;;;;;;;;;;;;;"}
+{"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\n  if (roundedValue > max) {\n    roundedValue = max;\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 \"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/tabs-next/TabOverflowList.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltTabOverflow {\n  position: relative;\n}\n\n.saltTabOverflow-list {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  position: absolute;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner, 0);\n}\n\n.saltTabOverflow-listContainer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-size-border);\n  max-height: inherit;\n  min-height: inherit;\n}\n\n.saltTabOverflow-list[data-hidden=\"true\"] {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.saltTabOverflow-list .saltTabNext {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  align-items: center;\n  cursor: var(--salt-selectable-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n  justify-content: flex-start;\n}\n\n.saltTabOverflow-list .saltTabNext .saltTabNextTrigger {\n  justify-content: start;\n}\n\n.saltTabOverflow-list .saltTabNext::after {\n  display: none;\n}\n\n.saltTabOverflow-list .saltTabNext[aria-disabled=\"true\"] {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltTabOverflow-list .saltTabNext-focusVisible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-border) * -2);\n}\n\n.saltTabOverflow-list .saltTabNext:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltTabOverflow-list .saltTabNext:active {\n  background: var(--salt-selectable-background-selected);\n  box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);\n}\n";
+var css_248z = ".saltTabOverflow {\n  position: relative;\n}\n\n.saltTabOverflow-list {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  position: absolute;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner, 0);\n}\n\n.saltTabOverflow-listContainer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-size-border);\n  max-height: inherit;\n  min-height: inherit;\n}\n\n.saltTabOverflow-list[data-hidden=\"true\"] {\n  opacity: 0;\n  pointer-events: none;\n  /* Avoid causing page to overflow with the hidden elements */\n  width: 1px;\n  height: 1px;\n}\n\n.saltTabOverflow-list .saltTabNext {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  align-items: center;\n  cursor: var(--salt-selectable-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n  justify-content: flex-start;\n}\n\n.saltTabOverflow-list .saltTabNext .saltTabNextTrigger {\n  justify-content: start;\n}\n\n.saltTabOverflow-list .saltTabNext::after {\n  display: none;\n}\n\n.saltTabOverflow-list .saltTabNext[aria-disabled=\"true\"] {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltTabOverflow-list .saltTabNext-focusVisible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-border) * -2);\n}\n\n.saltTabOverflow-list .saltTabNext:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltTabOverflow-list .saltTabNext:active {\n  background: var(--salt-selectable-background-selected);\n  box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=TabOverflowList.css.js.map

package/dist-cjs/tabs-next/TabOverflowList.js

@@ -54,7 +54,8 @@ const TabOverflowList = react.forwardRef(
               maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`
             });
           }
-        })
+        }),
+        react$1.flip()
       ]
     });
     const { getFloatingProps } = react$1.useInteractions([react$1.useDismiss(context)]);

package/dist-cjs/tabs-next/TabOverflowList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabOverflowList.js","sources":["../src/tabs-next/TabOverflowList.tsx"],"sourcesContent":["import {\n  FloatingTree,\n  offset,\n  size,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport {\n  Button,\n  makePrefixer,\n  useFloatingUI,\n  useForkRef,\n  useIcon,\n  useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  type Dispatch,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n  type SetStateAction,\n  forwardRef,\n  useCallback,\n  useRef,\n} from \"react\";\nimport tabOverflowListCss from \"./TabOverflowList.css\";\nimport { useFocusOutside } from \"./hooks/useFocusOutside\";\n\ninterface TabOverflowListProps extends ComponentPropsWithoutRef<\"button\"> {\n  buttonRef?: Ref<HTMLButtonElement>;\n  tabstripRef: RefObject<HTMLDivElement>;\n  children?: ReactNode;\n  isMeasuring?: boolean;\n  open: boolean;\n  setOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nconst withBaseName = makePrefixer(\"saltTabOverflow\");\n\nexport const TabOverflowList = forwardRef<HTMLDivElement, TabOverflowListProps>(\n  function TabOverflowList(props, ref) {\n    const {\n      buttonRef,\n      tabstripRef,\n      children,\n      isMeasuring,\n      open,\n      setOpen,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tabs-next-overflow-list\",\n      css: tabOverflowListCss,\n      window: targetWindow,\n    });\n\n    const { OverflowIcon } = useIcon();\n\n    const { refs, x, y, strategy, context } = useFloatingUI({\n      open: open,\n      onOpenChange(open, _, reason) {\n        if (reason === \"escape-key\") {\n          queueMicrotask(() => {\n            const allTabs =\n              tabstripRef.current?.querySelectorAll<HTMLElement>(\n                '[role=\"tab\"]:not([aria-hidden])',\n              ) ?? [];\n            const numberOfTabsInOverflow =\n              listRef.current?.querySelectorAll<HTMLElement>('[role=\"tab\"]')\n                .length ?? 0;\n\n            allTabs[allTabs.length - numberOfTabsInOverflow - 1]?.focus({\n              preventScroll: true,\n            });\n          });\n        }\n\n        setOpen(open);\n      },\n      placement: \"bottom-start\",\n      middleware: [\n        offset(1),\n        size({\n          apply({ elements, availableHeight }) {\n            Object.assign(elements.floating.style, {\n              maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n            });\n          },\n        }),\n      ],\n    });\n\n    const { getFloatingProps } = useInteractions([useDismiss(context)]);\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const handleRootRef = useForkRef(rootRef, ref);\n    const listRef = useRef<HTMLDivElement>(null);\n    const handleListRef = useForkRef<HTMLDivElement>(listRef, refs.setFloating);\n\n    const handleFocusOutside = useCallback(() => {\n      setOpen(false);\n    }, [setOpen]);\n\n    useFocusOutside(\n      rootRef,\n      handleFocusOutside,\n      open,\n      \"[data-floating-ui-portal]\",\n    );\n\n    const handleClick = () => {\n      if (!open) {\n        listRef.current\n          ?.querySelectorAll<HTMLElement>('[role=\"tab\"]')[0]\n          ?.focus({ preventScroll: true });\n      } else {\n        setOpen(false);\n      }\n    };\n\n    const handleFocus = () => {\n      setOpen(true);\n    };\n\n    const handleButtonRef = useForkRef<HTMLButtonElement>(\n      buttonRef,\n      refs.setReference,\n    );\n\n    const listId = useId();\n\n    const childCount = Children.count(children);\n    if (childCount === 0 && !isMeasuring) return null;\n\n    return (\n      <div className={withBaseName()} ref={handleRootRef} data-overflow>\n        <Button\n          data-overflowbutton\n          tabIndex={-1}\n          appearance=\"transparent\"\n          sentiment=\"neutral\"\n          onClick={handleClick}\n          ref={handleButtonRef}\n          aria-label={`Overflow menu. ${childCount} tabs hidden`}\n          aria-expanded={open}\n          aria-controls={listId}\n          aria-hidden=\"true\"\n          role=\"tab\"\n          aria-haspopup\n          {...rest}\n        >\n          <OverflowIcon aria-hidden />\n        </Button>\n        <FloatingTree>\n          <div\n            ref={handleListRef}\n            {...getFloatingProps({\n              onFocus: handleFocus,\n              role: \"presentation\",\n            })}\n            className={withBaseName(\"list\")}\n            data-hidden={!open}\n            style={\n              open\n                ? { left: x ?? 0, top: y ?? 0, position: strategy }\n                : undefined\n            }\n            id={listId}\n          >\n            <div className={withBaseName(\"listContainer\")}>{children}</div>\n          </div>\n        </FloatingTree>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","TabOverflowList","useWindow","useComponentCssInjection","tabOverflowListCss","useIcon","useFloatingUI","open","offset","size","useInteractions","useDismiss","useRef","useForkRef","useCallback","useFocusOutside","useId","Children","jsxs","jsx","Button","FloatingTree"],"mappings":"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"}
+{"version":3,"file":"TabOverflowList.js","sources":["../src/tabs-next/TabOverflowList.tsx"],"sourcesContent":["import {\n  FloatingTree,\n  flip,\n  offset,\n  size,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport {\n  Button,\n  makePrefixer,\n  useFloatingUI,\n  useForkRef,\n  useIcon,\n  useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  type Dispatch,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n  type SetStateAction,\n  forwardRef,\n  useCallback,\n  useRef,\n} from \"react\";\nimport tabOverflowListCss from \"./TabOverflowList.css\";\nimport { useFocusOutside } from \"./hooks/useFocusOutside\";\n\ninterface TabOverflowListProps extends ComponentPropsWithoutRef<\"button\"> {\n  buttonRef?: Ref<HTMLButtonElement>;\n  tabstripRef: RefObject<HTMLDivElement>;\n  children?: ReactNode;\n  isMeasuring?: boolean;\n  open: boolean;\n  setOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nconst withBaseName = makePrefixer(\"saltTabOverflow\");\n\nexport const TabOverflowList = forwardRef<HTMLDivElement, TabOverflowListProps>(\n  function TabOverflowList(props, ref) {\n    const {\n      buttonRef,\n      tabstripRef,\n      children,\n      isMeasuring,\n      open,\n      setOpen,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tabs-next-overflow-list\",\n      css: tabOverflowListCss,\n      window: targetWindow,\n    });\n\n    const { OverflowIcon } = useIcon();\n\n    const { refs, x, y, strategy, context } = useFloatingUI({\n      open: open,\n      onOpenChange(open, _, reason) {\n        if (reason === \"escape-key\") {\n          queueMicrotask(() => {\n            const allTabs =\n              tabstripRef.current?.querySelectorAll<HTMLElement>(\n                '[role=\"tab\"]:not([aria-hidden])',\n              ) ?? [];\n            const numberOfTabsInOverflow =\n              listRef.current?.querySelectorAll<HTMLElement>('[role=\"tab\"]')\n                .length ?? 0;\n\n            allTabs[allTabs.length - numberOfTabsInOverflow - 1]?.focus({\n              preventScroll: true,\n            });\n          });\n        }\n\n        setOpen(open);\n      },\n      placement: \"bottom-start\",\n      middleware: [\n        offset(1),\n        size({\n          apply({ elements, availableHeight }) {\n            Object.assign(elements.floating.style, {\n              maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n            });\n          },\n        }),\n        flip(),\n      ],\n    });\n\n    const { getFloatingProps } = useInteractions([useDismiss(context)]);\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const handleRootRef = useForkRef(rootRef, ref);\n    const listRef = useRef<HTMLDivElement>(null);\n    const handleListRef = useForkRef<HTMLDivElement>(listRef, refs.setFloating);\n\n    const handleFocusOutside = useCallback(() => {\n      setOpen(false);\n    }, [setOpen]);\n\n    useFocusOutside(\n      rootRef,\n      handleFocusOutside,\n      open,\n      \"[data-floating-ui-portal]\",\n    );\n\n    const handleClick = () => {\n      if (!open) {\n        listRef.current\n          ?.querySelectorAll<HTMLElement>('[role=\"tab\"]')[0]\n          ?.focus({ preventScroll: true });\n      } else {\n        setOpen(false);\n      }\n    };\n\n    const handleFocus = () => {\n      setOpen(true);\n    };\n\n    const handleButtonRef = useForkRef<HTMLButtonElement>(\n      buttonRef,\n      refs.setReference,\n    );\n\n    const listId = useId();\n\n    const childCount = Children.count(children);\n    if (childCount === 0 && !isMeasuring) return null;\n\n    return (\n      <div className={withBaseName()} ref={handleRootRef} data-overflow>\n        <Button\n          data-overflowbutton\n          tabIndex={-1}\n          appearance=\"transparent\"\n          sentiment=\"neutral\"\n          onClick={handleClick}\n          ref={handleButtonRef}\n          aria-label={`Overflow menu. ${childCount} tabs hidden`}\n          aria-expanded={open}\n          aria-controls={listId}\n          aria-hidden=\"true\"\n          role=\"tab\"\n          aria-haspopup\n          {...rest}\n        >\n          <OverflowIcon aria-hidden />\n        </Button>\n        <FloatingTree>\n          <div\n            ref={handleListRef}\n            {...getFloatingProps({\n              onFocus: handleFocus,\n              role: \"presentation\",\n            })}\n            className={withBaseName(\"list\")}\n            data-hidden={!open}\n            style={\n              open\n                ? { left: x ?? 0, top: y ?? 0, position: strategy }\n                : undefined\n            }\n            id={listId}\n          >\n            <div className={withBaseName(\"listContainer\")}>{children}</div>\n          </div>\n        </FloatingTree>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","TabOverflowList","useWindow","useComponentCssInjection","tabOverflowListCss","useIcon","useFloatingUI","open","offset","size","flip","useInteractions","useDismiss","useRef","useForkRef","useCallback","useFocusOutside","useId","Children","jsxs","jsx","Button","FloatingTree"],"mappings":"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"}

package/dist-es/date-picker/DatePicker.js

@@ -48,13 +48,14 @@ const DatePickerMain = forwardRef(
   }
 );
 const DatePicker = forwardRef(function DatePicker2(props, ref) {
-  const { open, defaultOpen, onOpen, readOnly, ...rest } = props;
+  const { defaultOpen, open, openOnClick, onOpenChange, readOnly, ...rest } = props;
   return /* @__PURE__ */ jsx(
     DatePickerOverlayProvider,
     {
-      open,
       defaultOpen,
-      onOpen,
+      open,
+      openOnClick,
+      onOpenChange,
       readOnly,
       children: /* @__PURE__ */ jsx(DatePickerMain, { ...rest, readOnly, ref })
     }

package/dist-es/date-picker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../src/date-picker/DatePicker.tsx"],"sourcesContent":["import type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { type ReactNode, forwardRef } from \"react\";\nimport {\n  DateRangeSelectionContext,\n  type RangeDatePickerState,\n  type SingleDatePickerState,\n  SingleDateSelectionContext,\n} from \"./DatePickerContext\";\nimport { DatePickerOverlayProvider } from \"./DatePickerOverlayProvider\";\nimport {\n  type UseDatePickerRangeProps,\n  type UseDatePickerSingleProps,\n  useDatePicker,\n} from \"./useDatePicker\";\n\n/**\n * Base props for DatePicker.\n */\nexport interface DatePickerBaseProps {\n  className?: string;\n  children?: ReactNode;\n  /** the open/close state of the overlay. The open/close state will be controlled when this prop is provided. */\n  open?: boolean;\n  /**\n   * Handler for when open state changes\n   * @param newOpen - true when opened\n   */\n  onOpen?: (newOpen: boolean) => void;\n  /**\n   * the initial open/close state of the overlay, when the open/close state is un-controlled.\n   */\n  defaultOpen?: DatePickerBaseProps[\"open\"];\n}\n\n/**\n * Props for the DatePicker component, when `selectionVariant` is `single`.\n * @template T\n */\nexport interface DatePickerSingleProps<TDate extends DateFrameworkType>\n  extends DatePickerBaseProps,\n    UseDatePickerSingleProps<TDate> {\n  selectionVariant: \"single\";\n}\n\n/**\n * Props for the DatePicker component, when `selectionVariant` is `range`.\n * @template T\n */\nexport interface DatePickerRangeProps<TDate extends DateFrameworkType>\n  extends DatePickerBaseProps,\n    UseDatePickerRangeProps<TDate> {\n  selectionVariant: \"range\";\n}\n\n/**\n * Props for the DatePicker component.\n * @template T\n */\nexport type DatePickerProps<TDate extends DateFrameworkType> =\n  | DatePickerSingleProps<TDate>\n  | DatePickerRangeProps<TDate>;\n\nexport const DatePickerMain = forwardRef<HTMLDivElement, DatePickerProps<any>>(\n  <TDate extends DateFrameworkType>(\n    props: DatePickerProps<TDate>,\n    ref: React.Ref<HTMLDivElement>,\n  ) => {\n    const {\n      children,\n      readOnly,\n      disabled,\n      selectionVariant,\n      defaultSelectedDate,\n      selectedDate,\n      onSelectionChange,\n      onApply,\n      minDate,\n      maxDate,\n      onCancel,\n      ...rest\n    } = props;\n    // biome-ignore lint/suspicious/noExplicitAny: type guard\n    const useDatePickerProps: any = {\n      readOnly,\n      disabled,\n      selectionVariant,\n      defaultSelectedDate,\n      selectedDate,\n      onSelectionChange,\n      onApply,\n      minDate,\n      maxDate,\n      onCancel,\n    };\n\n    if (props.selectionVariant === \"range\") {\n      const stateAndHelpers = useDatePicker<TDate, \"range\">(\n        useDatePickerProps,\n        ref,\n      ) as RangeDatePickerState<TDate>;\n      return (\n        <DateRangeSelectionContext.Provider value={stateAndHelpers}>\n          <div ref={stateAndHelpers?.state?.containerRef} {...rest}>\n            {children}\n          </div>\n        </DateRangeSelectionContext.Provider>\n      );\n    }\n    const stateAndHelpers = useDatePicker(\n      useDatePickerProps,\n      ref,\n    ) as SingleDatePickerState<TDate>;\n\n    return (\n      <SingleDateSelectionContext.Provider value={stateAndHelpers}>\n        <div ref={stateAndHelpers?.state?.containerRef} {...rest}>\n          {children}\n        </div>\n      </SingleDateSelectionContext.Provider>\n    );\n  },\n);\n\nexport const DatePicker = forwardRef(function DatePicker<\n  TDate extends DateFrameworkType,\n>(props: DatePickerProps<TDate>, ref: React.Ref<HTMLDivElement>) {\n  const { open, defaultOpen, onOpen, readOnly, ...rest } = props;\n\n  return (\n    <DatePickerOverlayProvider\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpen={onOpen}\n      readOnly={readOnly}\n    >\n      <DatePickerMain {...rest} readOnly={readOnly} ref={ref} />\n    </DatePickerOverlayProvider>\n  );\n});\n"],"names":["stateAndHelpers","DatePicker"],"mappings":";;;;;;AA8DO,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,CACE,OACA,GACG,KAAA;AAlEP,IAAA,IAAA,EAAA,EAAA,EAAA;AAmEI,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAA;AAAA,MACA,iBAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,kBAA0B,GAAA;AAAA,MAC9B,QAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAA;AAAA,MACA,iBAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAI,IAAA,KAAA,CAAM,qBAAqB,OAAS,EAAA;AACtC,MAAA,MAAMA,gBAAkB,GAAA,aAAA;AAAA,QACtB,kBAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,2BACG,yBAA0B,CAAA,QAAA,EAA1B,EAAmC,KAAOA,EAAAA,gBAAAA,EACzC,8BAAC,KAAI,EAAA,EAAA,GAAA,EAAA,CAAK,KAAAA,gBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAAA,iBAAiB,KAAjB,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAwB,cAAe,GAAG,IAAA,EACjD,UACH,CACF,EAAA,CAAA;AAAA;AAGJ,IAAA,MAAM,eAAkB,GAAA,aAAA;AAAA,MACtB,kBAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,2BACG,0BAA2B,CAAA,QAAA,EAA3B,EAAoC,KAAA,EAAO,iBAC1C,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAI,GAAK,EAAA,CAAA,EAAA,GAAA,eAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,eAAA,CAAiB,UAAjB,IAAwB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,YAAA,EAAe,GAAG,IAAA,EACjD,UACH,CACF,EAAA,CAAA;AAAA;AAGN;AAEO,MAAM,UAAa,GAAA,UAAA,CAAW,SAASC,WAAAA,CAE5C,OAA+B,GAAgC,EAAA;AAC/D,EAAA,MAAM,EAAE,IAAM,EAAA,WAAA,EAAa,QAAQ,QAAU,EAAA,GAAG,MAAS,GAAA,KAAA;AAEzD,EACE,uBAAA,GAAA;AAAA,IAAC,yBAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MAEA,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA,EAAgB,GAAG,IAAA,EAAM,UAAoB,GAAU,EAAA;AAAA;AAAA,GAC1D;AAEJ,CAAC;;;;"}
+{"version":3,"file":"DatePicker.js","sources":["../src/date-picker/DatePicker.tsx"],"sourcesContent":["import type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { type ReactNode, forwardRef } from \"react\";\nimport {\n  DateRangeSelectionContext,\n  type RangeDatePickerState,\n  type SingleDatePickerState,\n  SingleDateSelectionContext,\n} from \"./DatePickerContext\";\nimport {\n  type DatePickerOpenChangeReason,\n  DatePickerOverlayProvider,\n} from \"./DatePickerOverlayProvider\";\nimport {\n  type UseDatePickerRangeProps,\n  type UseDatePickerSingleProps,\n  useDatePicker,\n} from \"./useDatePicker\";\n\n/**\n * Base props for DatePicker.\n */\nexport interface DatePickerBaseProps {\n  className?: string;\n  children?: ReactNode;\n  /** the open/close state of the overlay. The open/close state will be controlled when this prop is provided. */\n  open?: boolean;\n  /** When `open` is uncontrolled, set this to `true` to open on click */\n  openOnClick?: boolean;\n  /**\n   * Handler for when open state changes\n   * @param newOpen - true when opened\n   * @param event - event that triggered the state change\n   * @param reason - reason for the the state change\n   */\n  onOpenChange?: (\n    newOpen: boolean,\n    event?: Event,\n    reason?: DatePickerOpenChangeReason,\n  ) => void;\n  /**\n   * the initial open/close state of the overlay, when the open/close state is un-controlled.\n   */\n  defaultOpen?: DatePickerBaseProps[\"open\"];\n}\n\n/**\n * Props for the DatePicker component, when `selectionVariant` is `single`.\n * @template T\n */\nexport interface DatePickerSingleProps<TDate extends DateFrameworkType>\n  extends DatePickerBaseProps,\n    UseDatePickerSingleProps<TDate> {\n  selectionVariant: \"single\";\n}\n\n/**\n * Props for the DatePicker component, when `selectionVariant` is `range`.\n * @template T\n */\nexport interface DatePickerRangeProps<TDate extends DateFrameworkType>\n  extends DatePickerBaseProps,\n    UseDatePickerRangeProps<TDate> {\n  selectionVariant: \"range\";\n}\n\n/**\n * Props for the DatePicker component.\n * @template T\n */\nexport type DatePickerProps<TDate extends DateFrameworkType> =\n  | DatePickerSingleProps<TDate>\n  | DatePickerRangeProps<TDate>;\n\nexport const DatePickerMain = forwardRef<HTMLDivElement, DatePickerProps<any>>(\n  <TDate extends DateFrameworkType>(\n    props: DatePickerProps<TDate>,\n    ref: React.Ref<HTMLDivElement>,\n  ) => {\n    const {\n      children,\n      readOnly,\n      disabled,\n      selectionVariant,\n      defaultSelectedDate,\n      selectedDate,\n      onSelectionChange,\n      onApply,\n      minDate,\n      maxDate,\n      onCancel,\n      ...rest\n    } = props;\n    // biome-ignore lint/suspicious/noExplicitAny: type guard\n    const useDatePickerProps: any = {\n      readOnly,\n      disabled,\n      selectionVariant,\n      defaultSelectedDate,\n      selectedDate,\n      onSelectionChange,\n      onApply,\n      minDate,\n      maxDate,\n      onCancel,\n    };\n\n    if (props.selectionVariant === \"range\") {\n      const stateAndHelpers = useDatePicker<TDate, \"range\">(\n        useDatePickerProps,\n        ref,\n      ) as RangeDatePickerState<TDate>;\n      return (\n        <DateRangeSelectionContext.Provider value={stateAndHelpers}>\n          <div ref={stateAndHelpers?.state?.containerRef} {...rest}>\n            {children}\n          </div>\n        </DateRangeSelectionContext.Provider>\n      );\n    }\n    const stateAndHelpers = useDatePicker(\n      useDatePickerProps,\n      ref,\n    ) as SingleDatePickerState<TDate>;\n\n    return (\n      <SingleDateSelectionContext.Provider value={stateAndHelpers}>\n        <div ref={stateAndHelpers?.state?.containerRef} {...rest}>\n          {children}\n        </div>\n      </SingleDateSelectionContext.Provider>\n    );\n  },\n);\n\nexport const DatePicker = forwardRef(function DatePicker<\n  TDate extends DateFrameworkType,\n>(props: DatePickerProps<TDate>, ref: React.Ref<HTMLDivElement>) {\n  const { defaultOpen, open, openOnClick, onOpenChange, readOnly, ...rest } =\n    props;\n\n  return (\n    <DatePickerOverlayProvider\n      defaultOpen={defaultOpen}\n      open={open}\n      openOnClick={openOnClick}\n      onOpenChange={onOpenChange}\n      readOnly={readOnly}\n    >\n      <DatePickerMain {...rest} readOnly={readOnly} ref={ref} />\n    </DatePickerOverlayProvider>\n  );\n});\n"],"names":["stateAndHelpers","DatePicker"],"mappings":";;;;;;AAyEO,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,CACE,OACA,GACG,KAAA;AA7EP,IAAA,IAAA,EAAA,EAAA,EAAA;AA8EI,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAA;AAAA,MACA,iBAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,kBAA0B,GAAA;AAAA,MAC9B,QAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAA;AAAA,MACA,iBAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAI,IAAA,KAAA,CAAM,qBAAqB,OAAS,EAAA;AACtC,MAAA,MAAMA,gBAAkB,GAAA,aAAA;AAAA,QACtB,kBAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,2BACG,yBAA0B,CAAA,QAAA,EAA1B,EAAmC,KAAOA,EAAAA,gBAAAA,EACzC,8BAAC,KAAI,EAAA,EAAA,GAAA,EAAA,CAAK,KAAAA,gBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAAA,iBAAiB,KAAjB,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAwB,cAAe,GAAG,IAAA,EACjD,UACH,CACF,EAAA,CAAA;AAAA;AAGJ,IAAA,MAAM,eAAkB,GAAA,aAAA;AAAA,MACtB,kBAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,2BACG,0BAA2B,CAAA,QAAA,EAA3B,EAAoC,KAAA,EAAO,iBAC1C,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAI,GAAK,EAAA,CAAA,EAAA,GAAA,eAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,eAAA,CAAiB,UAAjB,IAAwB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,YAAA,EAAe,GAAG,IAAA,EACjD,UACH,CACF,EAAA,CAAA;AAAA;AAGN;AAEO,MAAM,UAAa,GAAA,UAAA,CAAW,SAASC,WAAAA,CAE5C,OAA+B,GAAgC,EAAA;AAC/D,EAAM,MAAA,EAAE,aAAa,IAAM,EAAA,WAAA,EAAa,cAAc,QAAU,EAAA,GAAG,MACjE,GAAA,KAAA;AAEF,EACE,uBAAA,GAAA;AAAA,IAAC,yBAAA;AAAA,IAAA;AAAA,MACC,WAAA;AAAA,MACA,IAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MAEA,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA,EAAgB,GAAG,IAAA,EAAM,UAAoB,GAAU,EAAA;AAAA;AAAA,GAC1D;AAEJ,CAAC;;;;"}

package/dist-es/date-picker/DatePickerActions.js

@@ -46,7 +46,7 @@ const DatePickerActions = forwardRef(function DatePickerRangeInput(props, ref) {
   }, [setEnableApply]);
   const handleCancel = (event) => {
     var _a;
-    cancel();
+    cancel(event);
     (_a = CancelButtonProps == null ? void 0 : CancelButtonProps.onClick) == null ? void 0 : _a.call(CancelButtonProps, event);
     onCancel == null ? void 0 : onCancel(event);
   };

package/dist-es/date-picker/DatePickerActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerActions.js","sources":["../src/date-picker/DatePickerActions.tsx"],"sourcesContent":["import { Button, type ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type MouseEventHandler,\n  type Ref,\n  type SyntheticEvent,\n  forwardRef,\n  useEffect,\n} from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport {\n  type RangeDatePickerState,\n  type SingleDatePickerState,\n  useDatePickerContext,\n} from \"./DatePickerContext\";\nimport \"./DatePickerActions.css\";\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport datePickerActions from \"./DatePickerActions.css\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerActions\");\n\n/**\n * Base props for DatePicker actions component.\n */\nexport interface DatePickerActionsBaseProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Callback fired when the cancel action is triggered.\n   * @param _event - The synthetic event.\n   */\n  onCancel?: (_event: SyntheticEvent) => void;\n  /**\n   * Ref to apply button\n   */\n  applyButtonRef?: Ref<HTMLButtonElement>;\n  /**\n   * Props for the apply button.\n   */\n  ApplyButtonProps?: ButtonProps;\n  /**\n   * Props for the cancel button.\n   */\n  CancelButtonProps?: ButtonProps;\n  /**\n   * Ref to cancel button\n   */\n  cancelButtonRef?: Ref<HTMLButtonElement>;\n}\n\n/**\n * Props for the DatePicker actions component.\n * @template SelectionVariant - The selection variant, either \"single\" or \"range\".\n */\nexport type DatePickerActionsProps<\n  TDate extends DateFrameworkType,\n  SelectionVariant extends \"single\" | \"range\",\n> = SelectionVariant extends \"single\"\n  ? DatePickerActionsBaseProps & {\n      /**\n       * The selection variant, set to \"single\".\n       */\n      selectionVariant: \"single\";\n      /**\n       * Callback fired when the apply action is triggered.\n       * @param _event - The synthetic event.\n       * @param date - The selected single date or null.\n       */\n      onApply?: (\n        _event: SyntheticEvent,\n        date: SingleDateSelection<TDate> | null,\n      ) => void;\n    }\n  : DatePickerActionsBaseProps & {\n      /**\n       * The selection variant, set to \"range\".\n       */\n      selectionVariant: \"range\";\n      /**\n       * Callback fired when the apply action is triggered.\n       * @param _event - The synthetic event.\n       * @param date - The selected date range or null.\n       */\n      onApply?: (\n        _event: SyntheticEvent,\n        date: DateRangeSelection<TDate> | null,\n      ) => void;\n    };\n\nexport const DatePickerActions = forwardRef(function DatePickerRangeInput<\n  TDate extends DateFrameworkType,\n>(\n  props: DatePickerActionsProps<TDate, \"single\" | \"range\">,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const {\n    applyButtonRef,\n    ApplyButtonProps,\n    cancelButtonRef,\n    children,\n    className,\n    CancelButtonProps,\n    onApply,\n    onCancel,\n    selectionVariant,\n    ...rest\n  } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-date-picker-actions\",\n    css: datePickerActions,\n    window: targetWindow,\n  });\n\n  // biome-ignore lint/suspicious/noExplicitAny: state and helpers coerced based on selectionVariant\n  let stateAndHelpers: any;\n  if (selectionVariant === \"range\") {\n    stateAndHelpers = useDatePickerContext({\n      selectionVariant: \"range\",\n    }) as RangeDatePickerState<TDate>;\n  } else {\n    stateAndHelpers = useDatePickerContext({\n      selectionVariant: \"single\",\n    }) as SingleDatePickerState<TDate>;\n  }\n\n  const {\n    state: { selectedDate },\n    helpers: { cancel, apply, setEnableApply },\n  } = stateAndHelpers;\n\n  useEffect(() => {\n    setEnableApply(true);\n  }, [setEnableApply]);\n\n  const handleCancel: MouseEventHandler<HTMLButtonElement> = (event) => {\n    cancel();\n    CancelButtonProps?.onClick?.(event);\n    onCancel?.(event);\n  };\n\n  const handleApply: MouseEventHandler<HTMLButtonElement> = (event) => {\n    apply(event, selectedDate);\n    onApply?.(event, selectedDate);\n    ApplyButtonProps?.onClick?.(event);\n  };\n\n  return (\n    <div className={clsx(className, withBaseName())} ref={ref} {...rest}>\n      <div className={withBaseName(\"body\")}>{children}</div>\n      <Button\n        appearance=\"transparent\"\n        sentiment=\"neutral\"\n        ref={cancelButtonRef}\n        {...CancelButtonProps}\n        onClick={handleCancel}\n        className={clsx(withBaseName(\"action\"), CancelButtonProps?.className)}\n      >\n        Cancel\n      </Button>\n      <Button\n        appearance=\"solid\"\n        sentiment=\"accented\"\n        ref={applyButtonRef}\n        {...ApplyButtonProps}\n        onClick={handleApply}\n        className={clsx(withBaseName(\"action\"), ApplyButtonProps?.className)}\n      >\n        Apply\n      </Button>\n    </div>\n  );\n});\n"],"names":["datePickerActions"],"mappings":"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"}
+{"version":3,"file":"DatePickerActions.js","sources":["../src/date-picker/DatePickerActions.tsx"],"sourcesContent":["import { Button, type ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type MouseEventHandler,\n  type Ref,\n  type SyntheticEvent,\n  forwardRef,\n  useEffect,\n} from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport {\n  type RangeDatePickerState,\n  type SingleDatePickerState,\n  useDatePickerContext,\n} from \"./DatePickerContext\";\nimport \"./DatePickerActions.css\";\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport datePickerActions from \"./DatePickerActions.css\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerActions\");\n\n/**\n * Base props for DatePicker actions component.\n */\nexport interface DatePickerActionsBaseProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Callback fired when the cancel action is triggered.\n   * @param _event - The synthetic event.\n   */\n  onCancel?: (_event: SyntheticEvent) => void;\n  /**\n   * Ref to apply button\n   */\n  applyButtonRef?: Ref<HTMLButtonElement>;\n  /**\n   * Props for the apply button.\n   */\n  ApplyButtonProps?: ButtonProps;\n  /**\n   * Props for the cancel button.\n   */\n  CancelButtonProps?: ButtonProps;\n  /**\n   * Ref to cancel button\n   */\n  cancelButtonRef?: Ref<HTMLButtonElement>;\n}\n\n/**\n * Props for the DatePicker actions component.\n * @template SelectionVariant - The selection variant, either \"single\" or \"range\".\n */\nexport type DatePickerActionsProps<\n  TDate extends DateFrameworkType,\n  SelectionVariant extends \"single\" | \"range\",\n> = SelectionVariant extends \"single\"\n  ? DatePickerActionsBaseProps & {\n      /**\n       * The selection variant, set to \"single\".\n       */\n      selectionVariant: \"single\";\n      /**\n       * Callback fired when the apply action is triggered.\n       * @param _event - The synthetic event.\n       * @param date - The selected single date or null.\n       */\n      onApply?: (\n        _event: SyntheticEvent,\n        date: SingleDateSelection<TDate> | null,\n      ) => void;\n    }\n  : DatePickerActionsBaseProps & {\n      /**\n       * The selection variant, set to \"range\".\n       */\n      selectionVariant: \"range\";\n      /**\n       * Callback fired when the apply action is triggered.\n       * @param _event - The synthetic event.\n       * @param date - The selected date range or null.\n       */\n      onApply?: (\n        _event: SyntheticEvent,\n        date: DateRangeSelection<TDate> | null,\n      ) => void;\n    };\n\nexport const DatePickerActions = forwardRef(function DatePickerRangeInput<\n  TDate extends DateFrameworkType,\n>(\n  props: DatePickerActionsProps<TDate, \"single\" | \"range\">,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const {\n    applyButtonRef,\n    ApplyButtonProps,\n    cancelButtonRef,\n    children,\n    className,\n    CancelButtonProps,\n    onApply,\n    onCancel,\n    selectionVariant,\n    ...rest\n  } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-date-picker-actions\",\n    css: datePickerActions,\n    window: targetWindow,\n  });\n\n  // biome-ignore lint/suspicious/noExplicitAny: state and helpers coerced based on selectionVariant\n  let stateAndHelpers: any;\n  if (selectionVariant === \"range\") {\n    stateAndHelpers = useDatePickerContext({\n      selectionVariant: \"range\",\n    }) as RangeDatePickerState<TDate>;\n  } else {\n    stateAndHelpers = useDatePickerContext({\n      selectionVariant: \"single\",\n    }) as SingleDatePickerState<TDate>;\n  }\n\n  const {\n    state: { selectedDate },\n    helpers: { cancel, apply, setEnableApply },\n  } = stateAndHelpers;\n\n  useEffect(() => {\n    setEnableApply(true);\n  }, [setEnableApply]);\n\n  const handleCancel: MouseEventHandler<HTMLButtonElement> = (event) => {\n    cancel(event);\n    CancelButtonProps?.onClick?.(event);\n    onCancel?.(event);\n  };\n\n  const handleApply: MouseEventHandler<HTMLButtonElement> = (event) => {\n    apply(event, selectedDate);\n    onApply?.(event, selectedDate);\n    ApplyButtonProps?.onClick?.(event);\n  };\n\n  return (\n    <div className={clsx(className, withBaseName())} ref={ref} {...rest}>\n      <div className={withBaseName(\"body\")}>{children}</div>\n      <Button\n        appearance=\"transparent\"\n        sentiment=\"neutral\"\n        ref={cancelButtonRef}\n        {...CancelButtonProps}\n        onClick={handleCancel}\n        className={clsx(withBaseName(\"action\"), CancelButtonProps?.className)}\n      >\n        Cancel\n      </Button>\n      <Button\n        appearance=\"solid\"\n        sentiment=\"accented\"\n        ref={applyButtonRef}\n        {...ApplyButtonProps}\n        onClick={handleApply}\n        className={clsx(withBaseName(\"action\"), ApplyButtonProps?.className)}\n      >\n        Apply\n      </Button>\n    </div>\n  );\n});\n"],"names":["datePickerActions"],"mappings":"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"}

package/dist-es/date-picker/DatePickerContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerContext.js","sources":["../src/date-picker/DatePickerContext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { type Context, type Ref, type SyntheticEvent, useContext } from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport type {\n  DateInputRangeDetails,\n  DateInputSingleDetails,\n} from \"../date-input\";\n\n/**\n * Interface representing the base state for a DatePicker.\n */\ninterface DatePickerBaseState<TDate extends DateFrameworkType> {\n  /**\n   * The state properties of the DatePicker.\n   */\n  state: {\n    /**\n     * If `true`, the DatePicker is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, the DatePicker is read-only.\n     */\n    readOnly?: boolean;\n    /**\n     * If `true`, the DatePicker has been cancelled.\n     */\n    cancelled?: boolean;\n    /**\n     * If `true`, the apply action is enabled.\n     */\n    enableApply?: boolean;\n    /**\n     * The minimum selectable date.\n     */\n    minDate?: TDate;\n    /**\n     * The maximum selectable date.\n     */\n    maxDate?: TDate;\n    /**\n     * Reference to the container element.\n     */\n    containerRef: Ref<HTMLDivElement>;\n  };\n  /**\n   * Helper functions for managing the DatePicker state.\n   */\n  helpers: {\n    /**\n     * Cancels the DatePicker action.\n     */\n    cancel: () => void;\n    /**\n     * Sets the enableApply state.\n     * @param newEnableApply - The new value for enableApply.\n     */\n    setEnableApply: (newEnableApply: boolean) => void;\n  };\n}\n\n/**\n * Interface representing the state for a single date picker.\n */\nexport interface SingleDatePickerState<TDate extends DateFrameworkType>\n  extends DatePickerBaseState<TDate> {\n  /**\n   * The state properties of the single date picker.\n   */\n  state: DatePickerBaseState<TDate>[\"state\"] & {\n    /**\n     * The selected date.\n     */\n    selectedDate: SingleDateSelection<TDate> | null;\n    /**\n     * The default selected date.\n     */\n    defaultSelectedDate?: SingleDateSelection<TDate>;\n  };\n  /**\n   * Helper functions for managing the single date picker state.\n   */\n  helpers: DatePickerBaseState<TDate>[\"helpers\"] & {\n    /**\n     * Apply the selected single date.\n     * @param event - The synthetic event.\n     * @param date - The new applied date.\n     */\n    apply: (\n      event: SyntheticEvent,\n      date: SingleDateSelection<TDate> | null,\n    ) => void;\n    /**\n     * Select a single date.\n     * @param event - The synthetic event.\n     * @param date - The selected date or null.\n     * @param details - Details of selection, such as errors and original value.\n     */\n    select: (\n      event: SyntheticEvent,\n      date: SingleDateSelection<TDate> | null,\n      details?: DateInputSingleDetails,\n    ) => void;\n  };\n}\n\n/**\n * Interface representing the state for a range date picker.\n */\nexport interface RangeDatePickerState<TDate extends DateFrameworkType>\n  extends DatePickerBaseState<TDate> {\n  /**\n   * The state properties of the range date picker.\n   */\n  state: DatePickerBaseState<TDate>[\"state\"] & {\n    /**\n     * The selected date range.\n     */\n    selectedDate: DateRangeSelection<TDate> | null;\n    /**\n     * The default selected date range.\n     */\n    defaultSelectedDate?: DateRangeSelection<TDate>;\n  };\n  /**\n   * Helper functions for managing the range date picker state.\n   */\n  helpers: DatePickerBaseState<TDate>[\"helpers\"] & {\n    /**\n     * Apply the selected date range.\n     * @param event - The synthetic event.\n     * @param date - The new applied date range\n     */\n    apply: (\n      event: SyntheticEvent,\n      date: DateRangeSelection<TDate> | null,\n    ) => void;\n    /**\n     * Select a date range.\n     * @param event - The synthetic event.\n     * @param date - The selected date.\n     * @param details - Details of selection, such as errors and original value.     */\n    select: (\n      event: SyntheticEvent,\n      date: DateRangeSelection<TDate> | null,\n      details?: DateInputRangeDetails,\n    ) => void;\n  };\n}\n\n/**\n * Type representing the state of a date picker, either single or range.\n */\nexport type DatePickerState<TDate extends DateFrameworkType> =\n  | SingleDatePickerState<TDate>\n  | RangeDatePickerState<TDate>;\n\n/**\n * Context for single date selection.\n */\nexport const SingleDateSelectionContext = createContext<\n  SingleDatePickerState<any> | undefined\n>(\"SingleDateSelectionContext\", undefined);\n\n/**\n * Context for date range selection.\n */\nexport const DateRangeSelectionContext = createContext<\n  RangeDatePickerState<any> | undefined\n>(\"DateRangeSelectionContext\", undefined);\n\n/**\n * Props for using the date picker context.\n */\nexport interface UseDatePickerContextProps {\n  /**\n   * The selection variant, either \"single\" or \"range\".\n   */\n  selectionVariant: \"single\" | \"range\";\n}\n\n// Overloads\n\n/**\n * Hook to use the date picker context for single date selection.\n * @param props - The props for the hook.\n * @returns The state of the single date picker.\n */\nexport function useDatePickerContext<TDate extends DateFrameworkType>(props: {\n  selectionVariant: \"single\";\n}): SingleDatePickerState<TDate>;\n\n/**\n * Hook to use the date picker context for range date selection.\n * @param props - The props for the hook.\n * @returns The state of the range date picker.\n */\nexport function useDatePickerContext<TDate extends DateFrameworkType>(props: {\n  selectionVariant: \"range\";\n}): RangeDatePickerState<TDate>;\n\nexport function useDatePickerContext<TDate extends DateFrameworkType>({\n  selectionVariant,\n}: UseDatePickerContextProps): DatePickerState<TDate> {\n  if (selectionVariant === \"range\") {\n    const context = useContext(\n      DateRangeSelectionContext as Context<\n        RangeDatePickerState<TDate> | undefined\n      >,\n    );\n    if (!context) {\n      throw new Error(\n        'useDatePickerSelection should be called with props { selectionVariant : \"range\" } inside DateRangeSelectionContext.Provider',\n      );\n    }\n    return context;\n  }\n  const context = useContext(\n    SingleDateSelectionContext as Context<\n      SingleDatePickerState<TDate> | undefined\n    >,\n  );\n  if (!context) {\n    throw new Error(\n      'useDatePickerSelection should be called with props { selectionVariant : \"single\" } inside SingleDateSelectionContext.Provider',\n    );\n  }\n  return context;\n}\n"],"names":["context"],"mappings":";;;AAiKa,MAAA,0BAAA,GAA6B,aAExC,CAAA,4BAAA,EAA8B,KAAS,CAAA;AAK5B,MAAA,yBAAA,GAA4B,aAEvC,CAAA,2BAAA,EAA6B,KAAS,CAAA;AAgCjC,SAAS,oBAAsD,CAAA;AAAA,EACpE;AACF,CAAsD,EAAA;AACpD,EAAA,IAAI,qBAAqB,OAAS,EAAA;AAChC,IAAA,MAAMA,QAAU,GAAA,UAAA;AAAA,MACd;AAAA,KAGF;AACA,IAAA,IAAI,CAACA,QAAS,EAAA;AACZ,MAAA,MAAM,IAAI,KAAA;AAAA,QACR;AAAA,OACF;AAAA;AAEF,IAAOA,OAAAA,QAAAA;AAAA;AAET,EAAA,MAAM,OAAU,GAAA,UAAA;AAAA,IACd;AAAA,GAGF;AACA,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA;AAEF,EAAO,OAAA,OAAA;AACT;;;;"}
+{"version":3,"file":"DatePickerContext.js","sources":["../src/date-picker/DatePickerContext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { type Context, type Ref, type SyntheticEvent, useContext } from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport type {\n  DateInputRangeDetails,\n  DateInputSingleDetails,\n} from \"../date-input\";\n\n/**\n * Interface representing the base state for a DatePicker.\n */\ninterface DatePickerBaseState<TDate extends DateFrameworkType> {\n  /**\n   * The state properties of the DatePicker.\n   */\n  state: {\n    /**\n     * If `true`, the DatePicker is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, the DatePicker is read-only.\n     */\n    readOnly?: boolean;\n    /**\n     * If `true`, the DatePicker has been cancelled.\n     */\n    cancelled?: boolean;\n    /**\n     * If `true`, the apply action is enabled.\n     */\n    enableApply?: boolean;\n    /**\n     * The minimum selectable date.\n     */\n    minDate?: TDate;\n    /**\n     * The maximum selectable date.\n     */\n    maxDate?: TDate;\n    /**\n     * Reference to the container element.\n     */\n    containerRef: Ref<HTMLDivElement>;\n  };\n  /**\n   * Helper functions for managing the DatePicker state.\n   */\n  helpers: {\n    /**\n     * Cancels the DatePicker action.\n     * @param event - event that triggered the state change\n     */\n    cancel: (event?: Event) => void;\n    /**\n     * Sets the enableApply state.\n     * @param newEnableApply - The new value for enableApply.\n     */\n    setEnableApply: (newEnableApply: boolean) => void;\n  };\n}\n\n/**\n * Interface representing the state for a single date picker.\n */\nexport interface SingleDatePickerState<TDate extends DateFrameworkType>\n  extends DatePickerBaseState<TDate> {\n  /**\n   * The state properties of the single date picker.\n   */\n  state: DatePickerBaseState<TDate>[\"state\"] & {\n    /**\n     * The selected date.\n     */\n    selectedDate: SingleDateSelection<TDate> | null;\n    /**\n     * The default selected date.\n     */\n    defaultSelectedDate?: SingleDateSelection<TDate>;\n  };\n  /**\n   * Helper functions for managing the single date picker state.\n   */\n  helpers: DatePickerBaseState<TDate>[\"helpers\"] & {\n    /**\n     * Apply the selected single date.\n     * @param event - The synthetic event.\n     * @param date - The new applied date.\n     */\n    apply: (\n      event: SyntheticEvent,\n      date: SingleDateSelection<TDate> | null,\n    ) => void;\n    /**\n     * Select a single date.\n     * @param event - The synthetic event.\n     * @param date - The selected date or null.\n     * @param details - Details of selection, such as errors and original value.\n     */\n    select: (\n      event: SyntheticEvent,\n      date: SingleDateSelection<TDate> | null,\n      details?: DateInputSingleDetails,\n    ) => void;\n  };\n}\n\n/**\n * Interface representing the state for a range date picker.\n */\nexport interface RangeDatePickerState<TDate extends DateFrameworkType>\n  extends DatePickerBaseState<TDate> {\n  /**\n   * The state properties of the range date picker.\n   */\n  state: DatePickerBaseState<TDate>[\"state\"] & {\n    /**\n     * The selected date range.\n     */\n    selectedDate: DateRangeSelection<TDate> | null;\n    /**\n     * The default selected date range.\n     */\n    defaultSelectedDate?: DateRangeSelection<TDate>;\n  };\n  /**\n   * Helper functions for managing the range date picker state.\n   */\n  helpers: DatePickerBaseState<TDate>[\"helpers\"] & {\n    /**\n     * Apply the selected date range.\n     * @param event - The synthetic event.\n     * @param date - The new applied date range\n     */\n    apply: (\n      event: SyntheticEvent,\n      date: DateRangeSelection<TDate> | null,\n    ) => void;\n    /**\n     * Select a date range.\n     * @param event - The synthetic event.\n     * @param date - The selected date.\n     * @param details - Details of selection, such as errors and original value.     */\n    select: (\n      event: SyntheticEvent,\n      date: DateRangeSelection<TDate> | null,\n      details?: DateInputRangeDetails,\n    ) => void;\n  };\n}\n\n/**\n * Type representing the state of a date picker, either single or range.\n */\nexport type DatePickerState<TDate extends DateFrameworkType> =\n  | SingleDatePickerState<TDate>\n  | RangeDatePickerState<TDate>;\n\n/**\n * Context for single date selection.\n */\nexport const SingleDateSelectionContext = createContext<\n  SingleDatePickerState<any> | undefined\n>(\"SingleDateSelectionContext\", undefined);\n\n/**\n * Context for date range selection.\n */\nexport const DateRangeSelectionContext = createContext<\n  RangeDatePickerState<any> | undefined\n>(\"DateRangeSelectionContext\", undefined);\n\n/**\n * Props for using the date picker context.\n */\nexport interface UseDatePickerContextProps {\n  /**\n   * The selection variant, either \"single\" or \"range\".\n   */\n  selectionVariant: \"single\" | \"range\";\n}\n\n// Overloads\n\n/**\n * Hook to use the date picker context for single date selection.\n * @param props - The props for the hook.\n * @returns The state of the single date picker.\n */\nexport function useDatePickerContext<TDate extends DateFrameworkType>(props: {\n  selectionVariant: \"single\";\n}): SingleDatePickerState<TDate>;\n\n/**\n * Hook to use the date picker context for range date selection.\n * @param props - The props for the hook.\n * @returns The state of the range date picker.\n */\nexport function useDatePickerContext<TDate extends DateFrameworkType>(props: {\n  selectionVariant: \"range\";\n}): RangeDatePickerState<TDate>;\n\nexport function useDatePickerContext<TDate extends DateFrameworkType>({\n  selectionVariant,\n}: UseDatePickerContextProps): DatePickerState<TDate> {\n  if (selectionVariant === \"range\") {\n    const context = useContext(\n      DateRangeSelectionContext as Context<\n        RangeDatePickerState<TDate> | undefined\n      >,\n    );\n    if (!context) {\n      throw new Error(\n        'useDatePickerSelection should be called with props { selectionVariant : \"range\" } inside DateRangeSelectionContext.Provider',\n      );\n    }\n    return context;\n  }\n  const context = useContext(\n    SingleDateSelectionContext as Context<\n      SingleDatePickerState<TDate> | undefined\n    >,\n  );\n  if (!context) {\n    throw new Error(\n      'useDatePickerSelection should be called with props { selectionVariant : \"single\" } inside SingleDateSelectionContext.Provider',\n    );\n  }\n  return context;\n}\n"],"names":["context"],"mappings":";;;AAkKa,MAAA,0BAAA,GAA6B,aAExC,CAAA,4BAAA,EAA8B,KAAS,CAAA;AAK5B,MAAA,yBAAA,GAA4B,aAEvC,CAAA,2BAAA,EAA6B,KAAS,CAAA;AAgCjC,SAAS,oBAAsD,CAAA;AAAA,EACpE;AACF,CAAsD,EAAA;AACpD,EAAA,IAAI,qBAAqB,OAAS,EAAA;AAChC,IAAA,MAAMA,QAAU,GAAA,UAAA;AAAA,MACd;AAAA,KAGF;AACA,IAAA,IAAI,CAACA,QAAS,EAAA;AACZ,MAAA,MAAM,IAAI,KAAA;AAAA,QACR;AAAA,OACF;AAAA;AAEF,IAAOA,OAAAA,QAAAA;AAAA;AAET,EAAA,MAAM,OAAU,GAAA,UAAA;AAAA,IACd;AAAA,GAGF;AACA,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA;AAEF,EAAO,OAAA,OAAA;AACT;;;;"}