@salt-ds/lab 1.0.0-alpha.55 → 1.0.0-alpha.57

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

@@ -1,43 +1,30 @@
-import { getLocalTimeZone, startOfMonth, CalendarDate, endOfMonth } from '@internationalized/date';
 import { useForkRef, useControlled, useFormFieldProps } from '@salt-ds/core';
-import { useMemo, useRef, useState, useEffect, useCallback } from 'react';
-import '../calendar/Calendar.js';
-import '../calendar/CalendarNavigation.js';
-import '../calendar/CalendarWeekHeader.js';
-import '../calendar/CalendarDateGrid.js';
-import '../calendar/internal/CalendarContext.js';
-import { getCurrentLocale } from '../calendar/formatDate.js';
-import { CALENDAR_MIN_YEAR, CALENDAR_MAX_YEAR } from '../calendar/useCalendarSelection.js';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { useLocalization } from '../localization-provider/LocalizationProvider.js';
 import { useDatePickerOverlay } from './DatePickerOverlayProvider.js';
 
 function useDatePicker(props, ref) {
+  const {
+    defaultDates: { minDate: defaultMinDate, maxDate: defaultMaxDate }
+  } = useLocalization();
   const {
     readOnly = false,
     disabled,
     selectionVariant,
-    defaultSelectedDate = null,
+    defaultSelectedDate,
     selectedDate: selectedDateProp,
-    onSelectedDateChange,
+    onSelectionChange,
     onApply,
-    minDate: minDateProp,
-    maxDate: maxDateProp,
-    timeZone = getLocalTimeZone(),
-    locale = getCurrentLocale(),
+    minDate = defaultMinDate,
+    maxDate = defaultMaxDate,
     onCancel
   } = props;
-  const minDate = useMemo(
-    () => minDateProp ?? startOfMonth(new CalendarDate(CALENDAR_MIN_YEAR, 1, 1)),
-    [minDateProp]
-  );
-  const maxDate = useMemo(
-    () => maxDateProp ?? endOfMonth(new CalendarDate(CALENDAR_MAX_YEAR, 1, 1)),
-    [maxDateProp]
-  );
+  const previousSelectedDate = useRef();
   const datePickerRef = useRef(null);
   const containerRef = useForkRef(ref, datePickerRef);
   const {
     state: { open },
-    helpers: { setOpen }
+    helpers: { setOpen, setOnDismiss }
   } = useDatePickerOverlay();
   const [selectedDate, setSelectedDate] = useControlled({
     controlled: selectedDateProp,
@@ -49,117 +36,82 @@ function useDatePicker(props, ref) {
   const [cancelled, setCancelled] = useState(false);
   useEffect(() => {
     if (open) {
+      previousSelectedDate.current = selectedDate;
+      if (enableApply) {
+        setOnDismiss(cancel);
+      }
       setCancelled(false);
     }
-  }, [open]);
+  }, [enableApply, open, setOnDismiss, setCancelled]);
+  useEffect(() => {
+    if (cancelled) {
+      setSelectedDate(previousSelectedDate == null ? void 0 : previousSelectedDate.current);
+    }
+  }, [cancelled, setSelectedDate]);
   const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } = useFormFieldProps();
   const isReadOnly = readOnly || formFieldReadOnly || false;
   const isDisabled = disabled || formFieldDisabled || false;
-  const applySingle = (appliedDate, error) => {
-    setCancelled(false);
-    setOpen(false);
-    if (selectionVariant === "single") {
-      onApply == null ? void 0 : onApply(appliedDate, error);
-    }
-  };
-  const setSelectedSingleDate = useCallback(
-    (selection, error) => {
-      let nextDate;
-      if (error || !selection) {
-        nextDate = selection;
-      } else {
-        let dateAfterMinDate = true;
-        let dateBeforeMaxDate = true;
-        if (minDate && selection) {
-          dateAfterMinDate = selection.compare(minDate) >= 0;
-        }
-        if (maxDate && selection) {
-          dateBeforeMaxDate = selection.compare(maxDate) <= 0;
-        }
-        nextDate = dateAfterMinDate && dateBeforeMaxDate ? selection : null;
+  const applySingle = useCallback(
+    (event, date) => {
+      setCancelled(false);
+      setOpen(false);
+      if (selectionVariant === "single") {
+        onApply == null ? void 0 : onApply(event, date);
       }
-      setSelectedDate(nextDate);
+    },
+    [setCancelled, setOpen, onApply]
+  );
+  const selectSingle = useCallback(
+    (event, date, details) => {
+      setSelectedDate(date);
       if (selectionVariant === "single") {
-        onSelectedDateChange == null ? void 0 : onSelectedDateChange(nextDate, error);
+        onSelectionChange == null ? void 0 : onSelectionChange(event, date, details);
       }
-      if (!enableApply) {
-        setOpen(false);
+      if (!enableApply && date) {
+        applySingle(event, date);
       }
     },
     [
+      applySingle,
       enableApply,
-      minDate,
-      maxDate,
-      onSelectedDateChange,
+      onSelectionChange,
       selectionVariant,
-      setSelectedDate,
-      setOpen
+      setSelectedDate
     ]
   );
-  const applyRange = (appliedDate, error) => {
-    setCancelled(false);
-    if ((appliedDate == null ? void 0 : appliedDate.startDate) && (appliedDate == null ? void 0 : appliedDate.endDate)) {
+  const applyRange = useCallback(
+    (event, date) => {
+      setCancelled(false);
       setOpen(false);
-    }
-    if (selectionVariant === "range") {
-      onApply == null ? void 0 : onApply(appliedDate, error);
-    }
-  };
-  const setSelectedRangeDate = useCallback(
-    (selection, error) => {
-      let nextDate;
-      let nextError = { ...error };
-      let startDateInRange = true;
-      let endDateInRange = true;
-      if ((error == null ? void 0 : error.startDate) || (error == null ? void 0 : error.endDate) || !selection) {
-        nextDate = selection;
-      } else {
-        if (maxDate && (selection == null ? void 0 : selection.startDate)) {
-          startDateInRange = selection.startDate.compare(minDate) >= 0;
-        }
-        if (maxDate && (selection == null ? void 0 : selection.endDate)) {
-          endDateInRange = (selection == null ? void 0 : selection.endDate) && selection.endDate.compare(maxDate) <= 0;
-        }
-        if (!startDateInRange && !endDateInRange) {
-          nextDate = null;
-          nextError = {
-            startDate: "is before min date",
-            endDate: "is after max date"
-          };
-        } else {
-          nextDate = {
-            startDate: selection.startDate || null,
-            endDate: selection.endDate || null
-          };
-          nextError = {
-            startDate: !startDateInRange ? "is before min date" : nextError.startDate,
-            endDate: !endDateInRange ? "is after max date" : nextError.endDate
-          };
-        }
+      if (selectionVariant === "range") {
+        onApply == null ? void 0 : onApply(event, date);
       }
-      setSelectedDate(nextDate);
+    },
+    [onApply, setCancelled, setOpen, selectionVariant]
+  );
+  const selectRange = useCallback(
+    (event, date, details) => {
+      setSelectedDate(date);
       if (selectionVariant === "range") {
-        onSelectedDateChange == null ? void 0 : onSelectedDateChange(nextDate, nextError);
+        onSelectionChange == null ? void 0 : onSelectionChange(event, date, details);
       }
-      if (!enableApply && (nextDate == null ? void 0 : nextDate.startDate) && (nextDate == null ? void 0 : nextDate.endDate)) {
-        setOpen(false);
+      if (!enableApply && (date == null ? void 0 : date.startDate) && (date == null ? void 0 : date.endDate)) {
+        applyRange(event, date);
       }
     },
     [
+      applyRange,
       enableApply,
-      minDate,
-      maxDate,
-      onSelectedDateChange,
+      onSelectionChange,
       selectionVariant,
-      setSelectedDate,
-      setOpen
+      setSelectedDate
     ]
   );
-  const cancel = () => {
+  const cancel = useCallback(() => {
     setCancelled(true);
     setOpen(false);
     onCancel == null ? void 0 : onCancel();
-  };
+  }, [setCancelled, setOpen, onCancel]);
   const returnValue = {
     state: {
       selectionVariant,
@@ -170,9 +122,7 @@ function useDatePicker(props, ref) {
       readOnly: isReadOnly,
       containerRef,
       minDate,
-      maxDate,
-      locale,
-      timeZone
+      maxDate
     },
     helpers: {
       cancel,
@@ -185,7 +135,7 @@ function useDatePicker(props, ref) {
       helpers: {
         ...returnValue.helpers,
         apply: applyRange,
-        setSelectedDate: setSelectedRangeDate
+        select: selectRange
       }
     };
   }
@@ -194,7 +144,7 @@ function useDatePicker(props, ref) {
     helpers: {
       ...returnValue.helpers,
       apply: applySingle,
-      setSelectedDate: setSelectedSingleDate
+      select: selectSingle
     }
   };
 }

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

@@ -1 +1 @@
-{"version":3,"file":"useDatePicker.js","sources":["../src/date-picker/useDatePicker.ts"],"sourcesContent":["import {\n  CalendarDate,\n  type DateValue,\n  endOfMonth,\n  getLocalTimeZone,\n  startOfMonth,\n} from \"@internationalized/date\";\nimport { useControlled, useForkRef, useFormFieldProps } from \"@salt-ds/core\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport {\n  CALENDAR_MAX_YEAR,\n  CALENDAR_MIN_YEAR,\n  type DateRangeSelection,\n  type SingleDateSelection,\n  getCurrentLocale,\n} from \"../calendar\";\nimport type {\n  RangeDatePickerError,\n  RangeDatePickerState,\n  SingleDatePickerError,\n  SingleDatePickerState,\n} from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\ninterface UseDatePickerBaseProps<T> {\n  /** If `true`, the component is disabled. */\n  disabled?: boolean;\n  /** If `true`, the component is read-only. */\n  readOnly?: boolean;\n  /**\n   * The selected date. The selected date will be controlled when this prop is provided.\n   */\n  selectedDate?: T | null;\n  /**\n   * The initial selected date, when the selected date is uncontrolled.\n   */\n  defaultSelectedDate?: UseDatePickerBaseProps<T>[\"selectedDate\"];\n  /**\n   * The minimum date for the range, default is 1900.\n   */\n  minDate?: DateValue;\n  /**\n   * The maximum date for the range, default is 2100.\n   */\n  maxDate?: DateValue;\n  /**\n   * Handler for when the date selection is cancelled.\n   */\n  onCancel?: () => void;\n  /**\n   * Time zone of the date selection, defaults to the current time zone of the user.\n   */\n  timeZone?: string;\n  /**\n   * Locale of the date selection, defaults to the current locale of the user.\n   */\n  locale?: string;\n}\n\n/**\n * Props for single date selection.\n *\n * @typedef {UseDatePickerBaseProps<SingleDateSelection>} UseDatePickerSingleProps\n * @property {\"single\"} selectionVariant - Single date selection.\n * @property {(selectedSingleDate: SingleDateSelection | null, singleError: string | false) => void} [onSelectedDateChange] - Handler called when the selected date changes.\n * @property {(appliedSingleDate: SingleDateSelection | null, singleError: string | false) => void} [onApply] - Handler called when the selected date is confirmed/applied.\n */\nexport interface UseDatePickerSingleProps\n  extends UseDatePickerBaseProps<SingleDateSelection> {\n  /**\n   * Single date selection.\n   */\n  selectionVariant: \"single\";\n  /**\n   * Handler called when the selected date changes.\n   * @param {SingleDateSelection | null} selectedSingleDate - The selected date.\n   * @param {string | false} singleError - Error returned by the parser or `false`.\n   */\n  onSelectedDateChange?: (\n    selectedSingleDate: SingleDateSelection | null,\n    singleError: string | false,\n  ) => void;\n  /**\n   * Handler called when the selected date is confirmed/applied.\n   * @param {SingleDateSelection | null} appliedSingleDate - The selected date.\n   * @param {string | false} singleError - Error returned by the parser or `false`.\n   */\n  onApply?: (\n    appliedSingleDate: SingleDateSelection | null,\n    singleError: string | false,\n  ) => void;\n}\n\n/**\n * Props for date range selection.\n *\n * @typedef {UseDatePickerBaseProps<DateRangeSelection>} UseDatePickerRangeProps\n * @property {\"range\"} selectionVariant - Date range selection.\n * @property {(selectedRangeDate: DateRangeSelection | null, rangeError: { startDate: string | false; endDate: string | false }) => void} [onSelectedDateChange] - Handler called when the selected date changes.\n * @property {(appliedRangeDate: DateRangeSelection | null, rangeError: { startDate: string | false; endDate: string | false }) => void} [onApply] - Handler called when the selected date is confirmed/applied.\n */\nexport interface UseDatePickerRangeProps\n  extends UseDatePickerBaseProps<DateRangeSelection> {\n  /**\n   * Date range selection.\n   */\n  selectionVariant: \"range\";\n  /**\n   * Handler called when the selected date changes.\n   * @param {DateRangeSelection | null} selectedRangeDate - The selected date.\n   * @param {{ startDate: string | false; endDate: string | false }} rangeError - Error returned by the parser or `false`.\n   */\n  onSelectedDateChange?: (\n    selectedRangeDate: DateRangeSelection | null,\n    rangeError: { startDate: string | false; endDate: string | false },\n  ) => void;\n  /**\n   * Handler called when the selected date is confirmed/applied.\n   * @param {DateRangeSelection | null} appliedRangeDate - The selected date.\n   * @param {{ startDate: string | false; endDate: string | false }} rangeError - Error returned by the parser or `false`.\n   */\n  onApply?: (\n    appliedRangeDate: DateRangeSelection | null,\n    rangeError: { startDate: string | false; endDate: string | false },\n  ) => void;\n}\n\n/**\n * Props for the useDatePicker hook.\n *\n * @template SelectionVariant\n * @typedef {SelectionVariant extends \"single\" ? UseDatePickerSingleProps : SelectionVariant extends \"range\" ? UseDatePickerRangeProps : never} UseDatePickerProps\n */\nexport type UseDatePickerProps<SelectionVariant> =\n  SelectionVariant extends \"single\"\n    ? UseDatePickerSingleProps\n    : SelectionVariant extends \"range\"\n      ? UseDatePickerRangeProps\n      : never;\n\n/**\n * Custom hook for managing date picker state.\n *\n * @template SelectionVariant\n * @param {UseDatePickerProps<SelectionVariant>} props - The props for the date picker.\n * @param {React.ForwardedRef<HTMLDivElement>} ref - The ref for the date picker container.\n * @returns {DatePickerState<SelectionVariant extends \"single\" ? SingleDateSelection : DateRangeSelection>} The date picker state and helpers.\n */\nexport function useDatePicker<SelectionVariant extends \"single\" | \"range\">(\n  props: UseDatePickerProps<SelectionVariant>,\n  ref: React.ForwardedRef<HTMLDivElement>,\n): SingleDatePickerState | RangeDatePickerState {\n  const {\n    readOnly = false,\n    disabled,\n    selectionVariant,\n    defaultSelectedDate = null,\n    selectedDate: selectedDateProp,\n    onSelectedDateChange,\n    onApply,\n    minDate: minDateProp,\n    maxDate: maxDateProp,\n    timeZone = getLocalTimeZone(),\n    locale = getCurrentLocale(),\n    onCancel,\n  } = props;\n\n  const minDate: DateValue = useMemo(\n    () =>\n      minDateProp ?? startOfMonth(new CalendarDate(CALENDAR_MIN_YEAR, 1, 1)),\n    [minDateProp],\n  );\n  const maxDate: DateValue = useMemo(\n    () => maxDateProp ?? endOfMonth(new CalendarDate(CALENDAR_MAX_YEAR, 1, 1)),\n    [maxDateProp],\n  );\n\n  const datePickerRef = useRef<HTMLDivElement>(null);\n  const containerRef = useForkRef(ref, datePickerRef);\n\n  const {\n    state: { open },\n    helpers: { setOpen },\n  } = useDatePickerOverlay();\n\n  const [selectedDate, setSelectedDate] = useControlled({\n    controlled: selectedDateProp,\n    default: defaultSelectedDate,\n    name: \"DatePicker\",\n    state: \"selectedDate\",\n  });\n\n  const [enableApply, setEnableApply] = useState<boolean>(false);\n  const [cancelled, setCancelled] = useState<boolean>(false);\n\n  useEffect(() => {\n    if (open) {\n      setCancelled(false);\n    }\n  }, [open]);\n\n  const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } =\n    useFormFieldProps();\n  const isReadOnly = readOnly || formFieldReadOnly || false;\n  const isDisabled = disabled || formFieldDisabled || false;\n\n  const applySingle = (\n    appliedDate: SingleDateSelection | null,\n    error: SingleDatePickerError,\n  ): void => {\n    setCancelled(false);\n    setOpen(false);\n    if (selectionVariant === \"single\") {\n      onApply?.(appliedDate, error);\n    }\n  };\n\n  const setSelectedSingleDate = useCallback(\n    (selection: SingleDateSelection | null, error: SingleDatePickerError) => {\n      let nextDate: typeof selection;\n      let nextError = error;\n      if (error || !selection) {\n        nextDate = selection;\n      } else {\n        let dateAfterMinDate = true;\n        let dateBeforeMaxDate = true;\n        if (minDate && selection) {\n          dateAfterMinDate = selection.compare(minDate) >= 0;\n        }\n        if (maxDate && selection) {\n          dateBeforeMaxDate = selection.compare(maxDate) <= 0;\n        }\n        nextDate = dateAfterMinDate && dateBeforeMaxDate ? selection : null;\n        nextError = !dateAfterMinDate ? \"is before min date\" : nextError;\n        nextError = !dateBeforeMaxDate ? \"is after max date\" : nextError;\n      }\n      setSelectedDate(nextDate);\n      if (selectionVariant === \"single\") {\n        onSelectedDateChange?.(nextDate, error);\n      }\n\n      if (!enableApply) {\n        setOpen(false);\n      }\n    },\n    [\n      enableApply,\n      minDate,\n      maxDate,\n      onSelectedDateChange,\n      selectionVariant,\n      setSelectedDate,\n      setOpen,\n    ],\n  );\n\n  const applyRange = (\n    appliedDate: DateRangeSelection | null,\n    error: RangeDatePickerError,\n  ): void => {\n    setCancelled(false);\n    if (appliedDate?.startDate && appliedDate?.endDate) {\n      setOpen(false);\n    }\n    if (selectionVariant === \"range\") {\n      onApply?.(appliedDate, error);\n    }\n  };\n\n  const setSelectedRangeDate = useCallback(\n    (selection: DateRangeSelection | null, error: RangeDatePickerError) => {\n      let nextDate: typeof selection;\n      let nextError = { ...error };\n      let startDateInRange = true;\n      let endDateInRange = true;\n      if (error?.startDate || error?.endDate || !selection) {\n        nextDate = selection;\n      } else {\n        if (maxDate && selection?.startDate) {\n          startDateInRange = selection.startDate.compare(minDate) >= 0;\n        }\n        if (maxDate && selection?.endDate) {\n          endDateInRange =\n            selection?.endDate && selection.endDate.compare(maxDate) <= 0;\n        }\n        if (!startDateInRange && !endDateInRange) {\n          nextDate = null;\n          nextError = {\n            startDate: \"is before min date\",\n            endDate: \"is after max date\",\n          };\n        } else {\n          nextDate = {\n            startDate: selection.startDate || null,\n            endDate: selection.endDate || null,\n          };\n          nextError = {\n            startDate: !startDateInRange\n              ? \"is before min date\"\n              : nextError.startDate,\n            endDate: !endDateInRange ? \"is after max date\" : nextError.endDate,\n          };\n        }\n      }\n      setSelectedDate(nextDate);\n      if (selectionVariant === \"range\") {\n        onSelectedDateChange?.(nextDate, nextError);\n      }\n      if (!enableApply && nextDate?.startDate && nextDate?.endDate) {\n        setOpen(false);\n      }\n    },\n    [\n      enableApply,\n      minDate,\n      maxDate,\n      onSelectedDateChange,\n      selectionVariant,\n      setSelectedDate,\n      setOpen,\n    ],\n  );\n\n  const cancel = () => {\n    setCancelled(true);\n    setOpen(false);\n    onCancel?.();\n  };\n\n  const returnValue = {\n    state: {\n      selectionVariant,\n      selectedDate,\n      cancelled,\n      enableApply,\n      disabled: isDisabled,\n      readOnly: isReadOnly,\n      containerRef,\n      minDate,\n      maxDate,\n      locale,\n      timeZone,\n    },\n    helpers: {\n      cancel,\n      setEnableApply,\n    },\n  };\n  if (props.selectionVariant === \"range\") {\n    return {\n      ...returnValue,\n      helpers: {\n        ...returnValue.helpers,\n        apply: applyRange,\n        setSelectedDate: setSelectedRangeDate,\n      },\n    } as RangeDatePickerState;\n  }\n  return {\n    ...returnValue,\n    helpers: {\n      ...returnValue.helpers,\n      apply: applySingle,\n      setSelectedDate: setSelectedSingleDate,\n    },\n  } as SingleDatePickerState;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useDatePicker.js","sources":["../src/date-picker/useDatePicker.ts"],"sourcesContent":["import { useControlled, useForkRef, useFormFieldProps } from \"@salt-ds/core\";\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport {\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport type { DateRangeSelection, SingleDateSelection } from \"../calendar\";\nimport type {\n  DateInputRangeDetails,\n  DateInputSingleDetails,\n} from \"../date-input\";\nimport { useLocalization } from \"../localization-provider\";\nimport type {\n  RangeDatePickerState,\n  SingleDatePickerState,\n} from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\ninterface UseDatePickerBaseProps<TDate> {\n  /** If `true`, the component is disabled. */\n  disabled?: boolean;\n  /** If `true`, the component is read-only. */\n  readOnly?: boolean;\n  /**\n   * The minimum date for the range, default is 1900.\n   */\n  minDate?: TDate;\n  /**\n   * The maximum date for the range, default is 2100.\n   */\n  maxDate?: TDate;\n  /**\n   * Handler for when the date selection is cancelled.\n   */\n  onCancel?: () => void;\n}\n\n/**\n * Props for single date selection.\n *\n * @template TDate - The type of the date framework.\n */\nexport interface UseDatePickerSingleProps<TDate extends DateFrameworkType>\n  extends UseDatePickerBaseProps<TDate> {\n  /**\n   * Single date selection.\n   */\n  selectionVariant: \"single\";\n  /**\n   * The selected date. The selected date will be controlled when this prop is provided.\n   */\n  selectedDate?: SingleDateSelection<TDate> | null;\n  /**\n   * The initial selected date, when the selected date is uncontrolled.\n   */\n  defaultSelectedDate?: SingleDateSelection<TDate> | null;\n  /**\n   * Handler called when the selected date changes.\n   * @param event - The synthetic event.\n   * @param date - The selected date or null.\n   * @param details - The selected date details.\n   */\n  onSelectionChange?: (\n    event: SyntheticEvent,\n    date: SingleDateSelection<TDate> | null,\n    details?: DateInputSingleDetails,\n  ) => void;\n  /**\n   * Handler called when the selected date is confirmed/applied.\n   * @param event - The synthetic event.\n   * @param date - The selected date or null.\n   */\n  onApply?: (\n    event: SyntheticEvent,\n    date: SingleDateSelection<TDate> | null,\n  ) => void;\n}\n\n/**\n * Props for date range selection.\n *\n * @template TDate - The type of the date framework.\n */\nexport interface UseDatePickerRangeProps<TDate extends DateFrameworkType>\n  extends UseDatePickerBaseProps<TDate> {\n  /**\n   * Date range selection.\n   */\n  selectionVariant: \"range\";\n  /**\n   * The selected date range. The selected date will be controlled when this prop is provided.\n   */\n  selectedDate?: DateRangeSelection<TDate> | null;\n  /**\n   * The initial selected date range, when the selected date is uncontrolled.\n   */\n  defaultSelectedDate?: DateRangeSelection<TDate> | null;\n  /**\n   * Handler called when the selected date range changes.\n   * @param event - The synthetic event.\n   * @param date - The selected date range or null.\n   * @param details - The selected date range details.\n   */\n  onSelectionChange?: (\n    event: SyntheticEvent,\n    date: DateRangeSelection<TDate> | null,\n    details?: DateInputRangeDetails,\n  ) => void;\n  /**\n   * Handler called when the selected date range is confirmed/applied.\n   * @param event - The synthetic event.\n   * @param date - The selected date range.\n   */\n  onApply?: (\n    event: SyntheticEvent,\n    date: DateRangeSelection<TDate> | null,\n  ) => void;\n}\n\n/**\n * Props for the useDatePicker hook.\n *\n * @template TDate - The type of the date framework.\n * @template SelectionVariant - The selection variant, either \"single\" or \"range\".\n */\nexport type UseDatePickerProps<\n  TDate extends DateFrameworkType,\n  SelectionVariant,\n> = SelectionVariant extends \"single\"\n  ? UseDatePickerSingleProps<TDate>\n  : SelectionVariant extends \"range\"\n    ? UseDatePickerRangeProps<TDate>\n    : never;\n\n/**\n * Custom hook for managing date picker state.\n *\n * @template TDate - The type of the date framework.\n * @template SelectionVariant - The selection variant, either \"single\" or \"range\".\n * @param props - The props for the date picker.\n * @param ref - The ref for the date picker container.\n * @returns The date picker state and helpers.\n */\nexport function useDatePicker<\n  TDate extends DateFrameworkType,\n  SelectionVariant extends \"single\" | \"range\",\n>(\n  props: UseDatePickerProps<TDate, SelectionVariant>,\n  ref: React.ForwardedRef<HTMLDivElement>,\n): SingleDatePickerState<TDate> | RangeDatePickerState<TDate> {\n  const {\n    defaultDates: { minDate: defaultMinDate, maxDate: defaultMaxDate },\n  } = useLocalization<TDate>();\n  const {\n    readOnly = false,\n    disabled,\n    selectionVariant,\n    defaultSelectedDate,\n    selectedDate: selectedDateProp,\n    onSelectionChange,\n    onApply,\n    minDate = defaultMinDate,\n    maxDate = defaultMaxDate,\n    onCancel,\n  } = props;\n\n  const previousSelectedDate = useRef<typeof selectedDateProp>();\n  const datePickerRef = useRef<HTMLDivElement>(null);\n  const containerRef = useForkRef(ref, datePickerRef);\n\n  const {\n    state: { open },\n    helpers: { setOpen, setOnDismiss },\n  } = useDatePickerOverlay();\n\n  const [selectedDate, setSelectedDate] = useControlled({\n    controlled: selectedDateProp,\n    default: defaultSelectedDate,\n    name: \"DatePicker\",\n    state: \"selectedDate\",\n  });\n\n  const [enableApply, setEnableApply] = useState<boolean>(false);\n  const [cancelled, setCancelled] = useState<boolean>(false);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: should run when open changes and not selected date or value\n  useEffect(() => {\n    if (open) {\n      previousSelectedDate.current = selectedDate;\n      if (enableApply) {\n        setOnDismiss(cancel);\n      }\n      setCancelled(false);\n    }\n  }, [enableApply, open, setOnDismiss, setCancelled]);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: avoid excessive re-rendering\n  useEffect(() => {\n    if (cancelled) {\n      setSelectedDate(previousSelectedDate?.current);\n    }\n  }, [cancelled, setSelectedDate]);\n\n  const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } =\n    useFormFieldProps();\n  const isReadOnly = readOnly || formFieldReadOnly || false;\n  const isDisabled = disabled || formFieldDisabled || false;\n\n  const applySingle = useCallback(\n    (event: SyntheticEvent, date: SingleDateSelection<TDate> | null): void => {\n      setCancelled(false);\n      setOpen(false);\n      if (selectionVariant === \"single\") {\n        onApply?.(event, date);\n      }\n    },\n    [setCancelled, setOpen, onApply],\n  );\n\n  const selectSingle = useCallback(\n    (\n      event: SyntheticEvent,\n      date: SingleDateSelection<TDate> | null,\n      details: DateInputSingleDetails,\n    ) => {\n      setSelectedDate(date);\n      if (selectionVariant === \"single\") {\n        onSelectionChange?.(event, date, details);\n      }\n      if (!enableApply && date) {\n        applySingle(event, date);\n      }\n    },\n    [\n      applySingle,\n      enableApply,\n      onSelectionChange,\n      selectionVariant,\n      setSelectedDate,\n    ],\n  );\n\n  const applyRange = useCallback(\n    (event: SyntheticEvent, date: DateRangeSelection<TDate> | null): void => {\n      setCancelled(false);\n      setOpen(false);\n      if (selectionVariant === \"range\") {\n        onApply?.(event, date);\n      }\n    },\n    [onApply, setCancelled, setOpen, selectionVariant],\n  );\n\n  const selectRange = useCallback(\n    (\n      event: SyntheticEvent,\n      date: DateRangeSelection<TDate> | null,\n      details: DateInputRangeDetails,\n    ) => {\n      setSelectedDate(date);\n      if (selectionVariant === \"range\") {\n        onSelectionChange?.(event, date, details);\n      }\n      if (!enableApply && date?.startDate && date?.endDate) {\n        applyRange(event, date);\n      }\n    },\n    [\n      applyRange,\n      enableApply,\n      onSelectionChange,\n      selectionVariant,\n      setSelectedDate,\n    ],\n  );\n\n  const cancel = useCallback(() => {\n    setCancelled(true);\n    setOpen(false);\n    onCancel?.();\n  }, [setCancelled, setOpen, onCancel]);\n\n  const returnValue = {\n    state: {\n      selectionVariant,\n      selectedDate,\n      cancelled,\n      enableApply,\n      disabled: isDisabled,\n      readOnly: isReadOnly,\n      containerRef,\n      minDate,\n      maxDate,\n    },\n    helpers: {\n      cancel,\n      setEnableApply,\n    },\n  };\n  if (props.selectionVariant === \"range\") {\n    return {\n      ...returnValue,\n      helpers: {\n        ...returnValue.helpers,\n        apply: applyRange,\n        select: selectRange,\n      },\n    } as RangeDatePickerState<TDate>;\n  }\n  return {\n    ...returnValue,\n    helpers: {\n      ...returnValue.helpers,\n      apply: applySingle,\n      select: selectSingle,\n    },\n  } as SingleDatePickerState<TDate>;\n}\n"],"names":[],"mappings":"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"}

package/dist-es/dropdown/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.js","sources":["../src/dropdown/DropdownButton.tsx"],"sourcesContent":["import { Button, type ButtonProps, makePrefixer, useIcon } from \"@salt-ds/core\";\nimport { DEFAULT_ICON_SIZE, type IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n  type AriaAttributes,\n  type ComponentType,\n  type ForwardedRef,\n  forwardRef,\n} from \"react\";\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport dropdownButtonCss from \"./DropdownButton.css\";\n\nexport interface DropdownButtonProps extends ButtonProps {\n  /**\n   * Replace the default Icon component\n   */\n  IconComponent?: ComponentType<any>;\n  /**\n   * Whether the dropdown button should hide role='option' via 'aria-hidden'\n   */\n  ariaHideOptionRole?: boolean;\n  /**\n   * If, `true`, the Dropdown button will occupy the full width of it's container\n   */\n  fullWidth?: boolean;\n  /**\n   * Sets the size of the down arrow icon. If this is not specified, a default size based on density is used.\n   */\n  iconSize?: IconProps[\"size\"];\n  /**\n   * Is the dropdown list open\n   */\n  isOpen?: boolean;\n  /**\n   * Label for the dropdown button\n   */\n  label?: string;\n  /**\n   * Id for the label. This is needed for ARIA attributes.\n   */\n  labelId?: string;\n  /**\n   * When the dropdown is collapsed this value is set as aria-posinset on the span containing the selected value\n   * **/\n  posInSet?: number;\n  /**\n   * When the dropdown is collapsed this value is set as aria-setsize on the span containing the selected value\n   * **/\n  setSize?: number;\n  /**\n   *\n   * **/\n  labelAriaAttributes?: Pick<\n    AriaAttributes,\n    \"aria-posinset\" | \"aria-setsize\" | \"aria-selected\"\n  >;\n}\n\nconst withBaseName = makePrefixer(\"saltDropdownButton\");\n\nexport const DropdownButton = forwardRef(function DropdownButton(\n  {\n    IconComponent,\n    ariaHideOptionRole,\n    className,\n    disabled,\n    iconSize = DEFAULT_ICON_SIZE,\n    isOpen,\n    label,\n    labelId,\n    fullWidth,\n    posInSet,\n    setSize,\n    labelAriaAttributes,\n    ...rest\n  }: DropdownButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dropdown-button\",\n    css: dropdownButtonCss,\n    window: targetWindow,\n  });\n  const { ExpandIcon } = useIcon();\n  const Icon = IconComponent === undefined ? ExpandIcon : IconComponent;\n  const { inFormField } = useFormFieldLegacyProps();\n  // FIXME: use polymorphic button\n  // We don't want the 'button' tag to be shown in the DOM to trigger some accessibility testing\n  // tool's false alarm on role of 'listbox'\n  return (\n    <Button\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"fullwidth\")]: fullWidth,\n          [withBaseName(\"formField\")]: inFormField,\n        },\n        className,\n      )}\n      data-testid=\"dropdown-button\"\n      disabled={disabled}\n      variant=\"secondary\"\n      {...rest}\n      ref={ref}\n    >\n      <div className={withBaseName(\"content\")}>\n        <span\n          // 'hidden' so that screen reader won't be confused the additional 'option' which is just a label\n          aria-hidden={ariaHideOptionRole ? \"true\" : undefined}\n          {...labelAriaAttributes}\n          className={withBaseName(\"buttonLabel\")}\n          id={labelId}\n          // 'option' role here is to suppress accessibility testing tool warning about 'listbox' missing children role.\n          role=\"option\"\n        >\n          {label}\n        </span>\n        <Icon\n          className={withBaseName(\"icon\")}\n          size={iconSize}\n          aria-label={null}\n          aria-hidden=\"true\"\n        />\n      </div>\n    </Button>\n  );\n});\n"],"names":["DropdownButton","dropdownButtonCss"],"mappings":";;;;;;;;;;;AA8DA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAEzC,MAAA,cAAA,GAAiB,UAAW,CAAA,SAASA,eAChD,CAAA;AAAA,EACE,aAAA;AAAA,EACA,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAW,GAAA,iBAAA;AAAA,EACX,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,mBAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,OAAQ,EAAA;AAC/B,EAAM,MAAA,IAAA,GAAO,aAAkB,KAAA,KAAA,CAAA,GAAY,UAAa,GAAA,aAAA;AACxD,EAAM,MAAA,EAAE,WAAY,EAAA,GAAI,uBAAwB,EAAA;AAIhD,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,SAAA;AAAA,UAC7B,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG;AAAA,SAC/B;AAAA,QACA;AAAA,OACF;AAAA,MACA,aAAY,EAAA,iBAAA;AAAA,MACZ,QAAA;AAAA,MACA,OAAQ,EAAA,WAAA;AAAA,MACP,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEA,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,SAAS,CACpC,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YAEC,aAAA,EAAa,qBAAqB,MAAS,GAAA,KAAA,CAAA;AAAA,YAC1C,GAAG,mBAAA;AAAA,YACJ,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,YACrC,EAAI,EAAA,OAAA;AAAA,YAEJ,IAAK,EAAA,QAAA;AAAA,YAEJ,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,wBACA,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,YAC9B,IAAM,EAAA,QAAA;AAAA,YACN,YAAY,EAAA,IAAA;AAAA,YACZ,aAAY,EAAA;AAAA;AAAA;AACd,OACF,EAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"DropdownButton.js","sources":["../src/dropdown/DropdownButton.tsx"],"sourcesContent":["import { Button, type ButtonProps, makePrefixer, useIcon } from \"@salt-ds/core\";\nimport { DEFAULT_ICON_SIZE, type IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n  type AriaAttributes,\n  type ComponentType,\n  type ForwardedRef,\n  forwardRef,\n} from \"react\";\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport dropdownButtonCss from \"./DropdownButton.css\";\n\nexport interface DropdownButtonProps extends ButtonProps {\n  /**\n   * Replace the default Icon component\n   */\n  IconComponent?: ComponentType<any>;\n  /**\n   * Whether the dropdown button should hide role='option' via 'aria-hidden'\n   */\n  ariaHideOptionRole?: boolean;\n  /**\n   * If, `true`, the Dropdown button will occupy the full width of it's container\n   */\n  fullWidth?: boolean;\n  /**\n   * Sets the size of the down arrow icon. If this is not specified, a default size based on density is used.\n   */\n  iconSize?: IconProps[\"size\"];\n  /**\n   * Is the dropdown list open\n   */\n  isOpen?: boolean;\n  /**\n   * Label for the dropdown button\n   */\n  label?: string;\n  /**\n   * Id for the label. This is needed for ARIA attributes.\n   */\n  labelId?: string;\n  /**\n   * When the dropdown is collapsed this value is set as aria-posinset on the span containing the selected value\n   * **/\n  posInSet?: number;\n  /**\n   * When the dropdown is collapsed this value is set as aria-setsize on the span containing the selected value\n   * **/\n  setSize?: number;\n  /**\n   *\n   * **/\n  labelAriaAttributes?: Pick<\n    AriaAttributes,\n    \"aria-posinset\" | \"aria-setsize\" | \"aria-selected\"\n  >;\n}\n\nconst withBaseName = makePrefixer(\"saltDropdownButton\");\n\nexport const DropdownButton = forwardRef(function DropdownButton(\n  {\n    IconComponent,\n    ariaHideOptionRole,\n    className,\n    disabled,\n    iconSize = DEFAULT_ICON_SIZE,\n    isOpen,\n    label,\n    labelId,\n    fullWidth,\n    posInSet,\n    setSize,\n    labelAriaAttributes,\n    ...rest\n  }: DropdownButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dropdown-button\",\n    css: dropdownButtonCss,\n    window: targetWindow,\n  });\n  const { ExpandIcon } = useIcon();\n  const Icon = IconComponent === undefined ? ExpandIcon : IconComponent;\n  const { inFormField } = useFormFieldLegacyProps();\n  // FIXME: use polymorphic button\n  // We don't want the 'button' tag to be shown in the DOM to trigger some accessibility testing\n  // tool's false alarm on role of 'listbox'\n  return (\n    <Button\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"fullwidth\")]: fullWidth,\n          [withBaseName(\"formField\")]: inFormField,\n        },\n        className,\n      )}\n      data-testid=\"dropdown-button\"\n      disabled={disabled}\n      variant=\"secondary\"\n      {...rest}\n      ref={ref}\n    >\n      <div className={withBaseName(\"content\")}>\n        <span\n          // 'hidden' so that screen reader won't be confused the additional 'option' which is just a label\n          aria-hidden={ariaHideOptionRole ? \"true\" : undefined}\n          {...labelAriaAttributes}\n          className={withBaseName(\"buttonLabel\")}\n          id={labelId}\n          // biome-ignore lint/a11y/useAriaPropsForRole: 'option' role here is to suppress accessibility testing tool warning about 'listbox' missing children role\n          role=\"option\"\n        >\n          {label}\n        </span>\n        <Icon\n          className={withBaseName(\"icon\")}\n          size={iconSize}\n          aria-label={null}\n          aria-hidden=\"true\"\n        />\n      </div>\n    </Button>\n  );\n});\n"],"names":["DropdownButton","dropdownButtonCss"],"mappings":";;;;;;;;;;;AA8DA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAEzC,MAAA,cAAA,GAAiB,UAAW,CAAA,SAASA,eAChD,CAAA;AAAA,EACE,aAAA;AAAA,EACA,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAW,GAAA,iBAAA;AAAA,EACX,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,mBAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,OAAQ,EAAA;AAC/B,EAAM,MAAA,IAAA,GAAO,aAAkB,KAAA,KAAA,CAAA,GAAY,UAAa,GAAA,aAAA;AACxD,EAAM,MAAA,EAAE,WAAY,EAAA,GAAI,uBAAwB,EAAA;AAIhD,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,SAAA;AAAA,UAC7B,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG;AAAA,SAC/B;AAAA,QACA;AAAA,OACF;AAAA,MACA,aAAY,EAAA,iBAAA;AAAA,MACZ,QAAA;AAAA,MACA,OAAQ,EAAA,WAAA;AAAA,MACP,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEA,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,SAAS,CACpC,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YAEC,aAAA,EAAa,qBAAqB,MAAS,GAAA,KAAA,CAAA;AAAA,YAC1C,GAAG,mBAAA;AAAA,YACJ,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,YACrC,EAAI,EAAA,OAAA;AAAA,YAEJ,IAAK,EAAA,QAAA;AAAA,YAEJ,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,wBACA,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,YAC9B,IAAM,EAAA,QAAA;AAAA,YACN,YAAY,EAAA,IAAA;AAAA,YACZ,aAAY,EAAA;AAAA;AAAA;AACd,OACF,EAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

package/dist-es/index.js

@@ -27,11 +27,10 @@ export { OrderedButton } from './button-bar/OrderedButton.js';
 export { Calendar } from './calendar/Calendar.js';
 export { CalendarNavigation } from './calendar/CalendarNavigation.js';
 export { CalendarWeekHeader } from './calendar/CalendarWeekHeader.js';
-export { CalendarDateGrid } from './calendar/CalendarDateGrid.js';
+export { CalendarGrid } from './calendar/CalendarGrid.js';
 export { useCalendarDay } from './calendar/useCalendarDay.js';
 export { useCalendar } from './calendar/useCalendar.js';
-export { CALENDAR_MAX_YEAR, CALENDAR_MIN_YEAR, isDateRangeSelection, isMultipleDateSelection, isSingleSelectionValueType, useCalendarSelection, useCalendarSelectionDay } from './calendar/useCalendarSelection.js';
-export { formatDate, getCurrentLocale } from './calendar/formatDate.js';
+export { isDateRangeSelection, isMultipleDateSelection, isSingleSelectionValueType, useCalendarSelection, useCalendarSelectionDay } from './calendar/useCalendarSelection.js';
 export { Carousel } from './carousel/Carousel.js';
 export { CarouselSlide } from './carousel/CarouselSlide.js';
 export { CascadingMenu } from './cascading-menu/CascadingMenu.js';
@@ -59,16 +58,16 @@ export { ContactFavoriteToggle } from './contact-details/ContactFavoriteToggle.j
 export { MailLinkComponent } from './contact-details/MailLinkComponent.js';
 export { ContentStatus } from './content-status/ContentStatus.js';
 export { DateInputSingle } from './date-input/DateInputSingle.js';
-export { DateInputRange } from './date-input/DateInputRange.js';
-export { dateSupportsTime, extractTimeFieldsFromDate, extractTimeFieldsFromDateRange, parseCalendarDate, parseZonedDateTime } from './date-input/utils.js';
+export { DateInputRange, DateParserField } from './date-input/DateInputRange.js';
 export { DatePicker, DatePickerMain } from './date-picker/DatePicker.js';
 export { DatePickerActions } from './date-picker/DatePickerActions.js';
 export { DateRangeSelectionContext, SingleDateSelectionContext, useDatePickerContext } from './date-picker/DatePickerContext.js';
 export { DatePickerOverlay } from './date-picker/DatePickerOverlay.js';
+export { DatePickerRangeInput, defaultRangeValidator } from './date-picker/DatePickerRangeInput.js';
+export { DatePickerRangePanel } from './date-picker/DatePickerRangePanel.js';
 export { DatePickerSingleInput } from './date-picker/DatePickerSingleInput.js';
 export { DatePickerSinglePanel } from './date-picker/DatePickerSinglePanel.js';
-export { DatePickerRangeInput } from './date-picker/DatePickerRangeInput.js';
-export { DatePickerRangePanel } from './date-picker/DatePickerRangePanel.js';
+export { DatePickerTrigger } from './date-picker/DatePickerTrigger.js';
 export { DeckItem } from './deck-item/DeckItem.js';
 export { DeckLayout } from './deck-layout/DeckLayout.js';
 export { DialogHeader } from './dialog/DialogHeader.js';
@@ -95,6 +94,7 @@ export { useList } from './list/useList.js';
 export { VirtualizedList } from './list/VirtualizedList.js';
 export { ListNext } from './list-next/ListNext.js';
 export { ListItemNext } from './list-next/ListItemNext.js';
+export { LocalizationProvider, LocalizationProviderContext, useLocalization } from './localization-provider/LocalizationProvider.js';
 export { Logo } from './logo/Logo.js';
 export { LogoImage } from './logo/LogoImage.js';
 export { LogoSeparator } from './logo/LogoSeparator.js';
@@ -102,6 +102,7 @@ export { MenuButton } from './menu-button/MenuButton.js';
 export { Metric } from './metric/Metric.js';
 export { MetricHeader } from './metric/MetricHeader.js';
 export { MetricContent } from './metric/MetricContent.js';
+export { OverlayHeader } from './overlay/OverlayHeader.js';
 export { Portal } from './portal/Portal.js';
 export { QueryInput } from './query-input/QueryInput.js';
 export { useQueryInput } from './query-input/useQueryInput.js';

package/dist-es/index.js.map

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

package/dist-es/localization-provider/LocalizationProvider.js

@@ -0,0 +1,44 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useMemo, useContext } from 'react';
+
+const MIN_DATE = "1900-01-01T00:00:00.000";
+const MAX_DATE = "2099-12-31T00:00:00.000";
+const LocalizationProviderContext = createContext(null);
+if (process.env.NODE_ENV !== "production") {
+  LocalizationProviderContext.displayName = "LocalizationProviderContext";
+}
+const LocalizationProvider = function LocalizationProvider2(props) {
+  const { children, DateAdapter, instance, locale, minDate, maxDate } = props;
+  const dateAdapter = useMemo(() => {
+    return new DateAdapter({
+      locale,
+      instance
+    });
+  }, [DateAdapter, locale]);
+  const defaultDates = useMemo(
+    () => ({
+      minDate: minDate || dateAdapter.date(MIN_DATE),
+      maxDate: maxDate || dateAdapter.date(MAX_DATE)
+    }),
+    [dateAdapter, minDate, maxDate]
+  );
+  const contextValue = useMemo(() => {
+    return {
+      dateAdapter,
+      defaultDates
+    };
+  }, [dateAdapter, defaultDates]);
+  return /* @__PURE__ */ jsx(LocalizationProviderContext.Provider, { value: contextValue, children });
+};
+const useLocalization = () => {
+  const localization = useContext(LocalizationProviderContext);
+  if (!localization) {
+    throw new Error(
+      "useLocalization should be called inside LocalizationProviderContext.Provider"
+    );
+  }
+  return localization;
+};
+
+export { LocalizationProvider, LocalizationProviderContext, useLocalization };
+//# sourceMappingURL=LocalizationProvider.js.map

package/dist-es/localization-provider/LocalizationProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LocalizationProvider.js","sources":["../src/localization-provider/LocalizationProvider.tsx"],"sourcesContent":["import type {\n  DateFrameworkType,\n  SaltDateAdapter,\n} from \"@salt-ds/date-adapters\";\nimport { createContext, useContext, useMemo } from \"react\";\n\nconst MIN_DATE = \"1900-01-01T00:00:00.000\";\nconst MAX_DATE = \"2099-12-31T00:00:00.000\";\n\nexport interface LocalizationProviderValue<TDate extends DateFrameworkType> {\n  defaultDates: {\n    minDate: TDate;\n    maxDate: TDate;\n  };\n  dateAdapter: SaltDateAdapter<TDate>;\n}\n\n/**\n * Props for the LocalizationProvider component.\n *\n * @template TDate - The type of the date object used in the provider.\n * @template TLocale - The type of the locale, defaulting to string.\n */\nexport interface LocalizationProviderProps<\n  TDate extends DateFrameworkType,\n  TLocale = string,\n> {\n  /**\n   * The child components to be rendered within the provider.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * The instance of the date library being used.\n   */\n  instance?: any;\n\n  /**\n   * The date adapter class, which provides methods for date manipulation and formatting.\n   * This should be a constructor for a class implementing the SaltDateAdapter interface.\n   */\n  DateAdapter: new (\n    ...args: any\n  ) => SaltDateAdapter<TDate, TLocale>;\n\n  /**\n   * The locale to be used for date formatting and manipulation.\n   */\n  locale?: TLocale;\n\n  /**\n   * The minimum date allowed for all date selections.\n   * Defaults to January 1, 1900.\n   */\n  minDate?: TDate;\n\n  /**\n   * The maximum date allowed for all date selections.\n   * Defaults to December 31, 2099.\n   */\n  maxDate?: TDate;\n}\n\nexport type LocalizationProviderContext<TDate extends DateFrameworkType> = {\n  [K in keyof LocalizationProviderValue<TDate>]:\n    | LocalizationProviderValue<TDate>[K]\n    | null;\n};\n\nexport const LocalizationProviderContext =\n  createContext<LocalizationProviderValue<any> | null>(null);\n\nif (process.env.NODE_ENV !== \"production\") {\n  LocalizationProviderContext.displayName = \"LocalizationProviderContext\";\n}\n\nexport const LocalizationProvider = function LocalizationProvider<\n  TDate extends DateFrameworkType,\n  TLocale,\n>(props: LocalizationProviderProps<TDate, TLocale>) {\n  const { children, DateAdapter, instance, locale, minDate, maxDate } = props;\n\n  const dateAdapter = useMemo(() => {\n    return new DateAdapter({\n      locale,\n      instance,\n    });\n  }, [DateAdapter, locale]);\n\n  const defaultDates: LocalizationProviderValue<TDate>[\"defaultDates\"] =\n    useMemo(\n      () => ({\n        minDate: minDate || dateAdapter.date(MIN_DATE),\n        maxDate: maxDate || dateAdapter.date(MAX_DATE),\n      }),\n      [dateAdapter, minDate, maxDate],\n    );\n\n  const contextValue: LocalizationProviderValue<TDate> = useMemo(() => {\n    return {\n      dateAdapter,\n      defaultDates,\n    };\n  }, [dateAdapter, defaultDates]);\n\n  return (\n    <LocalizationProviderContext.Provider value={contextValue}>\n      {children}\n    </LocalizationProviderContext.Provider>\n  );\n};\n\n/**\n * Custom hook to access the localization context.\n *\n * This hook provides access to the localization settings and utilities\n * within the `LocalizationProviderContext`. It should be used within a\n * component that is a descendant of `LocalizationProviderContext.Provider`.\n *\n * @template TDate - The type of the date object used in the localization context.\n *\n * @returns The localization provider value, which includes date manipulation and formatting utilities.\n *\n * @throws Will throw an error if the hook is used outside of a `LocalizationProviderContext.Provider`.\n */\nexport const useLocalization = <\n  TDate extends DateFrameworkType,\n>(): LocalizationProviderValue<TDate> => {\n  const localization = useContext(LocalizationProviderContext);\n  if (!localization) {\n    throw new Error(\n      \"useLocalization should be called inside LocalizationProviderContext.Provider\",\n    );\n  }\n  return localization;\n};\n"],"names":["LocalizationProvider"],"mappings":";;;AAMA,MAAM,QAAW,GAAA,yBAAA;AACjB,MAAM,QAAW,GAAA,yBAAA;AA8DJ,MAAA,2BAAA,GACX,cAAqD,IAAI;AAE3D,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,2BAAA,CAA4B,WAAc,GAAA,6BAAA;AAC5C;AAEa,MAAA,oBAAA,GAAuB,SAASA,qBAAAA,CAG3C,KAAkD,EAAA;AAClD,EAAA,MAAM,EAAE,QAAU,EAAA,WAAA,EAAa,UAAU,MAAQ,EAAA,OAAA,EAAS,SAAY,GAAA,KAAA;AAEtE,EAAM,MAAA,WAAA,GAAc,QAAQ,MAAM;AAChC,IAAA,OAAO,IAAI,WAAY,CAAA;AAAA,MACrB,MAAA;AAAA,MACA;AAAA,KACD,CAAA;AAAA,GACA,EAAA,CAAC,WAAa,EAAA,MAAM,CAAC,CAAA;AAExB,EAAA,MAAM,YACJ,GAAA,OAAA;AAAA,IACE,OAAO;AAAA,MACL,OAAS,EAAA,OAAA,IAAW,WAAY,CAAA,IAAA,CAAK,QAAQ,CAAA;AAAA,MAC7C,OAAS,EAAA,OAAA,IAAW,WAAY,CAAA,IAAA,CAAK,QAAQ;AAAA,KAC/C,CAAA;AAAA,IACA,CAAC,WAAa,EAAA,OAAA,EAAS,OAAO;AAAA,GAChC;AAEF,EAAM,MAAA,YAAA,GAAiD,QAAQ,MAAM;AACnE,IAAO,OAAA;AAAA,MACL,WAAA;AAAA,MACA;AAAA,KACF;AAAA,GACC,EAAA,CAAC,WAAa,EAAA,YAAY,CAAC,CAAA;AAE9B,EAAA,2BACG,2BAA4B,CAAA,QAAA,EAA5B,EAAqC,KAAA,EAAO,cAC1C,QACH,EAAA,CAAA;AAEJ;AAeO,MAAM,kBAAkB,MAEU;AACvC,EAAM,MAAA,YAAA,GAAe,WAAW,2BAA2B,CAAA;AAC3D,EAAA,IAAI,CAAC,YAAc,EAAA;AACjB,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA;AAEF,EAAO,OAAA,YAAA;AACT;;;;"}

package/dist-es/overlay/OverlayHeader.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltOverlayHeader {\n  padding: var(--salt-spacing-100);\n  width: 100%;\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  justify-content: stretch;\n  gap: var(--salt-spacing-100);\n  box-sizing: border-box;\n}\n\n.saltOverlayHeader-container {\n  flex-grow: 1;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-50);\n}\n\n.saltOverlayHeader-header > .saltText {\n  margin: 0;\n}\n\n.saltOverlayHeader-actionsContainer {\n  align-self: flex-start;\n}\n\n/* Overrides */\n.saltOverlayHeader ~ .saltOverlayPanelContent {\n  padding-top: 0;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=OverlayHeader.css.js.map

package/dist-es/overlay/OverlayHeader.css.js.map

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

package/dist-es/overlay/OverlayHeader.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, Text } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import css_248z from './OverlayHeader.css.js';
+
+const withBaseName = makePrefixer("saltOverlayHeader");
+const OverlayHeader = forwardRef(
+  function OverlayHeader2(props, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-overlay-header",
+      css: css_248z,
+      window: targetWindow
+    });
+    const { className, description, header, actions, preheader, ...rest } = props;
+    return /* @__PURE__ */ jsxs("div", { className: clsx(withBaseName(), className), ...rest, ref, children: [
+      /* @__PURE__ */ jsxs("div", { className: withBaseName("container"), children: [
+        /* @__PURE__ */ jsxs("div", { className: withBaseName("header"), children: [
+          preheader && /* @__PURE__ */ jsx(Text, { className: withBaseName("preheader"), children: preheader }),
+          header
+        ] }),
+        description && /* @__PURE__ */ jsx(Text, { color: "secondary", className: withBaseName("description"), children: description })
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: withBaseName("actionsContainer"), children: actions })
+    ] });
+  }
+);
+
+export { OverlayHeader };
+//# sourceMappingURL=OverlayHeader.js.map

package/dist-es/overlay/OverlayHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayHeader.js","sources":["../src/overlay/OverlayHeader.tsx"],"sourcesContent":["import { Text, makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport overlayHeaderCss from \"./OverlayHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayHeader\");\n\nexport interface OverlayHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Description text is displayed just below the header\n   **/\n  description?: ReactNode;\n  /**\n   * Actions to be displayed in header\n   */\n  actions?: ReactNode;\n  /**\n   * Header text\n   */\n  header?: ReactNode;\n  /**\n   * Preheader text is displayed just above the header\n   **/\n  preheader?: ReactNode;\n}\n\nexport const OverlayHeader = forwardRef<HTMLDivElement, OverlayHeaderProps>(\n  function OverlayHeader(props, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-overlay-header\",\n      css: overlayHeaderCss,\n      window: targetWindow,\n    });\n\n    const { className, description, header, actions, preheader, ...rest } =\n      props;\n\n    return (\n      <div className={clsx(withBaseName(), className)} {...rest} ref={ref}>\n        <div className={withBaseName(\"container\")}>\n          <div className={withBaseName(\"header\")}>\n            {preheader && (\n              <Text className={withBaseName(\"preheader\")}>{preheader}</Text>\n            )}\n            {header}\n          </div>\n          {description && (\n            <Text color=\"secondary\" className={withBaseName(\"description\")}>\n              {description}\n            </Text>\n          )}\n        </div>\n        {actions && (\n          <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["OverlayHeader","overlayHeaderCss"],"mappings":";;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAqB9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,WAAW,WAAa,EAAA,MAAA,EAAQ,SAAS,SAAW,EAAA,GAAG,MAC7D,GAAA,KAAA;AAEF,IACE,uBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,IAAK,CAAA,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,GACzD,EAAA,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,WAAW,CACtC,EAAA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,QAAQ,CAClC,EAAA,QAAA,EAAA;AAAA,UAAA,SAAA,wBACE,IAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,WAAW,GAAI,QAAU,EAAA,SAAA,EAAA,CAAA;AAAA,UAExD;AAAA,SACH,EAAA,CAAA;AAAA,QACC,WAAA,wBACE,IAAK,EAAA,EAAA,KAAA,EAAM,aAAY,SAAW,EAAA,YAAA,CAAa,aAAa,CAAA,EAC1D,QACH,EAAA,WAAA,EAAA;AAAA,OAEJ,EAAA,CAAA;AAAA,MACC,2BACE,GAAA,CAAA,KAAA,EAAA,EAAI,WAAW,YAAa,CAAA,kBAAkB,GAAI,QAAQ,EAAA,OAAA,EAAA;AAAA,KAE/D,EAAA,CAAA;AAAA;AAGN;;;;"}

package/dist-es/system-status/SystemStatus.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to root component */\n.saltSystemStatus {\n  --saltIcon-color: var(--salt-content-bold-foreground);\n\n  background: var(--saltSystemStatus-background, var(--systemStatus-background));\n  border-color: var(--saltSystemStatus-borderColor, var(--systemStatus-borderColor));\n  border-width: var(--saltSystemStatus-borderWidth, var(--salt-size-border));\n  border-style: var(--saltSystemStatus-borderStyle, var(--salt-container-borderStyle));\n  box-sizing: border-box;\n  display: flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltSystemStatus-padding, var(--salt-spacing-50) var(--salt-spacing-100));\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n/* Styles applied to icon */\n.saltSystemStatus-icon.saltIcon {\n  min-height: var(--salt-size-base);\n}\n\n/* Styles applied when state = \"info\" */\n.saltSystemStatus-info {\n  --systemStatus-borderColor: var(--salt-status-info-bold-background);\n  --systemStatus-background: var(--salt-status-info-bold-background);\n}\n\n/* Styles applied when state = \"error\" */\n.saltSystemStatus-error {\n  --systemStatus-borderColor: var(--salt-status-error-bold-background);\n  --systemStatus-background: var(--salt-status-error-bold-background);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltSystemStatus-warning {\n  --systemStatus-borderColor: var(--salt-status-warning-bold-background);\n  --systemStatus-background: var(--salt-status-warning-bold-background);\n}\n\n/* Styles applied when state = \"success\" */\n.saltSystemStatus-success {\n  --systemStatus-borderColor: var(--salt-status-success-bold-background);\n  --systemStatus-background: var(--salt-status-success-bold-background);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltSystemStatus {\n  background: var(--saltSystemStatus-background, var(--systemStatus-background));\n  border-color: var(--saltSystemStatus-borderColor, var(--systemStatus-borderColor));\n  border-width: var(--saltSystemStatus-borderWidth, var(--salt-size-border));\n  border-style: var(--saltSystemStatus-borderStyle, var(--salt-container-borderStyle));\n  box-sizing: border-box;\n  display: flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltSystemStatus-padding, var(--salt-spacing-50) var(--salt-spacing-100));\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n/* Styles applied to icon */\n.saltSystemStatus-icon.saltIcon {\n  min-height: var(--salt-size-base);\n  --saltIcon-color: var(--salt-content-bold-foreground);\n}\n\n/* Styles applied when state = \"info\" */\n.saltSystemStatus-info {\n  --systemStatus-borderColor: var(--salt-status-info-bold-background);\n  --systemStatus-background: var(--salt-status-info-bold-background);\n}\n\n/* Styles applied when state = \"error\" */\n.saltSystemStatus-error {\n  --systemStatus-borderColor: var(--salt-status-error-bold-background);\n  --systemStatus-background: var(--salt-status-error-bold-background);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltSystemStatus-warning {\n  --systemStatus-borderColor: var(--salt-status-warning-bold-background);\n  --systemStatus-background: var(--salt-status-warning-bold-background);\n}\n\n/* Styles applied when state = \"success\" */\n.saltSystemStatus-success {\n  --systemStatus-borderColor: var(--salt-status-success-bold-background);\n  --systemStatus-background: var(--salt-status-success-bold-background);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=SystemStatus.css.js.map

package/dist-es/tabs-next/TabListNext.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Component class applied to the root element */\n.saltTabListNext {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  position: relative;\n  background: transparent;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  gap: var(--salt-spacing-100);\n  max-width: 100%;\n}\n\n.saltTabListNext-center {\n  justify-content: center;\n}\n\n.saltTabListNext-right {\n  justify-content: flex-end;\n}\n\n.saltTabListNext-activeColorPrimary {\n  --saltTabListNext-activeColor: var(--salt-container-primary-background);\n}\n\n.saltTabListNext-activeColorSecondary {\n  --saltTabListNext-activeColor: var(--salt-container-secondary-background);\n}\n\n.saltTabListNext-activeColorTertiary {\n  --saltTabListNext-activeColor: var(--salt-container-tertiary-background);\n}\n";
+var css_248z = "/* Component class applied to the root element */\n.saltTabListNext {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  position: relative;\n  background: transparent;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  gap: var(--salt-spacing-100);\n  max-width: 100%;\n}\n\n.saltTabListNext-center {\n  justify-content: center;\n}\n\n.saltTabListNext-right {\n  justify-content: flex-end;\n}\n\n.saltTabListNext-activeColorPrimary {\n  --saltTabListNext-activeColor: var(--salt-container-primary-background);\n}\n\n.saltTabListNext-activeColorSecondary {\n  --saltTabListNext-activeColor: var(--salt-container-secondary-background);\n}\n\n.saltTabListNext-activeColorTertiary {\n  --saltTabListNext-activeColor: var(--salt-container-tertiary-background);\n}\n\n.saltTabListNext-overflowWarning {\n  display: none;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=TabListNext.css.js.map

package/dist-es/tabs-next/TabListNext.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makePrefixer, useForkRef, useIsomorphicLayoutEffect, capitalize } from '@salt-ds/core';
+import { makePrefixer, useForkRef, useIsomorphicLayoutEffect, useId, capitalize } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
@@ -15,6 +15,7 @@ const TabListNext = forwardRef(
     const {
       appearance = "bordered",
       activeColor = "primary",
+      "aria-describedby": ariaDescribedBy,
       children,
       className,
       onKeyDown,
@@ -87,6 +88,7 @@ const TabListNext = forwardRef(
         }
       });
     }, [visible, returnFocus, targetWindow, items, selected]);
+    const warningId = useId();
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -101,8 +103,10 @@ const TabListNext = forwardRef(
         "data-ismeasuring": isMeasuring ? true : void 0,
         ref: handleRef,
         onKeyDown: handleKeyDown,
+        "aria-describedby": clsx(ariaDescribedBy, warningId),
         ...rest,
         children: [
+          hidden.length > 0 && /* @__PURE__ */ jsx("span", { id: warningId, className: withBaseName("overflowWarning"), children: "Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected" }),
           visible,
           /* @__PURE__ */ jsx(
             TabOverflowList,

package/dist-es/tabs-next/TabListNext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabListNext.js","sources":["../src/tabs-next/TabListNext.tsx"],"sourcesContent":["import {\n  capitalize,\n  makePrefixer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\n\nimport tablistNextCss from \"./TabListNext.css\";\nimport { TabOverflowList } from \"./TabOverflowList\";\nimport { useTabsNext } from \"./TabsNextContext\";\nimport { useOverflow } from \"./hooks/useOverflow\";\n\nconst withBaseName = makePrefixer(\"saltTabListNext\");\n\nexport interface TabListNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * Styling active color variant. Defaults to \"primary\".\n   */\n  activeColor?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * The appearance of the tabs. Defaults to \"bordered\".\n   */\n  appearance?: \"bordered\" | \"transparent\";\n}\n\nexport const TabListNext = forwardRef<HTMLDivElement, TabListNextProps>(\n  function TabstripNext(props, ref) {\n    const {\n      appearance = \"bordered\",\n      activeColor = \"primary\",\n      children,\n      className,\n      onKeyDown,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tablist-next\",\n      css: tablistNextCss,\n      window: targetWindow,\n    });\n\n    const {\n      selected,\n      getNext,\n      getPrevious,\n      getFirst,\n      getLast,\n      items,\n      activeTab,\n      menuOpen,\n      setMenuOpen,\n      returnFocus,\n    } = useTabsNext();\n\n    const tabstripRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(tabstripRef, ref);\n    const overflowButtonRef = useRef<HTMLButtonElement>(null);\n\n    const [visible, hidden, isMeasuring] = useOverflow({\n      container: tabstripRef,\n      tabs: items,\n      children,\n      selected,\n      overflowButton: overflowButtonRef,\n    });\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      const actionMap = {\n        ArrowRight: getNext,\n        ArrowLeft: getPrevious,\n        Home: getFirst,\n        End: getLast,\n        ArrowUp: menuOpen ? getPrevious : undefined,\n        ArrowDown: menuOpen ? getNext : undefined,\n      };\n\n      const action = actionMap[event.key as keyof typeof actionMap];\n\n      if (action) {\n        event.preventDefault();\n        const activeTabId = activeTab.current?.id;\n        if (!activeTabId) return;\n        const nextItem = action(activeTabId);\n        if (nextItem) {\n          nextItem.element?.scrollIntoView({\n            block: \"nearest\",\n            inline: \"nearest\",\n          });\n          nextItem.element?.focus({ preventScroll: true });\n        }\n      }\n    };\n\n    useIsomorphicLayoutEffect(() => {\n      if (!returnFocus.current || visible.length < 1 || selected === undefined)\n        return;\n\n      const itemToFocus = items.find((i) => i.value === returnFocus.current);\n      itemToFocus?.element?.focus({ preventScroll: true });\n\n      requestAnimationFrame(() => {\n        if (targetWindow?.document?.activeElement === itemToFocus?.element) {\n          returnFocus.current = undefined;\n        }\n      });\n    }, [visible, returnFocus, targetWindow, items, selected]);\n\n    return (\n      <div\n        role=\"tablist\"\n        className={clsx(\n          withBaseName(),\n          withBaseName(appearance),\n          withBaseName(\"horizontal\"),\n          withBaseName(`activeColor${capitalize(activeColor)}`),\n          className,\n        )}\n        data-ismeasuring={isMeasuring ? true : undefined}\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {visible}\n        <TabOverflowList\n          isMeasuring={isMeasuring}\n          buttonRef={overflowButtonRef}\n          tabstripRef={tabstripRef}\n          open={menuOpen}\n          setOpen={setMenuOpen}\n        >\n          {hidden}\n        </TabOverflowList>\n      </div>\n    );\n  },\n);\n"],"names":["tablistNextCss","_a"],"mappings":"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"}
+{"version":3,"file":"TabListNext.js","sources":["../src/tabs-next/TabListNext.tsx"],"sourcesContent":["import {\n  capitalize,\n  makePrefixer,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\n\nimport tablistNextCss from \"./TabListNext.css\";\nimport { TabOverflowList } from \"./TabOverflowList\";\nimport { useTabsNext } from \"./TabsNextContext\";\nimport { useOverflow } from \"./hooks/useOverflow\";\n\nconst withBaseName = makePrefixer(\"saltTabListNext\");\n\nexport interface TabListNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * Styling active color variant. Defaults to \"primary\".\n   */\n  activeColor?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * The appearance of the tabs. Defaults to \"bordered\".\n   */\n  appearance?: \"bordered\" | \"transparent\";\n}\n\nexport const TabListNext = forwardRef<HTMLDivElement, TabListNextProps>(\n  function TabstripNext(props, ref) {\n    const {\n      appearance = \"bordered\",\n      activeColor = \"primary\",\n      \"aria-describedby\": ariaDescribedBy,\n      children,\n      className,\n      onKeyDown,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tablist-next\",\n      css: tablistNextCss,\n      window: targetWindow,\n    });\n\n    const {\n      selected,\n      getNext,\n      getPrevious,\n      getFirst,\n      getLast,\n      items,\n      activeTab,\n      menuOpen,\n      setMenuOpen,\n      returnFocus,\n    } = useTabsNext();\n\n    const tabstripRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(tabstripRef, ref);\n    const overflowButtonRef = useRef<HTMLButtonElement>(null);\n\n    const [visible, hidden, isMeasuring] = useOverflow({\n      container: tabstripRef,\n      tabs: items,\n      children,\n      selected,\n      overflowButton: overflowButtonRef,\n    });\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      const actionMap = {\n        ArrowRight: getNext,\n        ArrowLeft: getPrevious,\n        Home: getFirst,\n        End: getLast,\n        ArrowUp: menuOpen ? getPrevious : undefined,\n        ArrowDown: menuOpen ? getNext : undefined,\n      };\n\n      const action = actionMap[event.key as keyof typeof actionMap];\n\n      if (action) {\n        event.preventDefault();\n        const activeTabId = activeTab.current?.id;\n        if (!activeTabId) return;\n        const nextItem = action(activeTabId);\n        if (nextItem) {\n          nextItem.element?.scrollIntoView({\n            block: \"nearest\",\n            inline: \"nearest\",\n          });\n          nextItem.element?.focus({ preventScroll: true });\n        }\n      }\n    };\n\n    useIsomorphicLayoutEffect(() => {\n      if (!returnFocus.current || visible.length < 1 || selected === undefined)\n        return;\n\n      const itemToFocus = items.find((i) => i.value === returnFocus.current);\n      itemToFocus?.element?.focus({ preventScroll: true });\n\n      requestAnimationFrame(() => {\n        if (targetWindow?.document?.activeElement === itemToFocus?.element) {\n          returnFocus.current = undefined;\n        }\n      });\n    }, [visible, returnFocus, targetWindow, items, selected]);\n\n    const warningId = useId();\n\n    return (\n      <div\n        role=\"tablist\"\n        className={clsx(\n          withBaseName(),\n          withBaseName(appearance),\n          withBaseName(\"horizontal\"),\n          withBaseName(`activeColor${capitalize(activeColor)}`),\n          className,\n        )}\n        data-ismeasuring={isMeasuring ? true : undefined}\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        aria-describedby={clsx(ariaDescribedBy, warningId)}\n        {...rest}\n      >\n        {hidden.length > 0 && (\n          <span id={warningId} className={withBaseName(\"overflowWarning\")}>\n            Note: This tab list includes overflow; tab positions may be\n            inaccurate or change when a tab is selected\n          </span>\n        )}\n        {visible}\n        <TabOverflowList\n          isMeasuring={isMeasuring}\n          buttonRef={overflowButtonRef}\n          tabstripRef={tabstripRef}\n          open={menuOpen}\n          setOpen={setMenuOpen}\n        >\n          {hidden}\n        </TabOverflowList>\n      </div>\n    );\n  },\n);\n"],"names":["tablistNextCss","_a"],"mappings":"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"}