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

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

@@ -1,45 +1,32 @@
 'use strict';
 
-var date = require('@internationalized/date');
 var core = require('@salt-ds/core');
 var react = require('react');
-require('../calendar/Calendar.js');
-require('../calendar/CalendarNavigation.js');
-require('../calendar/CalendarWeekHeader.js');
-require('../calendar/CalendarDateGrid.js');
-require('../calendar/internal/CalendarContext.js');
-var formatDate = require('../calendar/formatDate.js');
-var useCalendarSelection = require('../calendar/useCalendarSelection.js');
+var LocalizationProvider = require('../localization-provider/LocalizationProvider.js');
 var DatePickerOverlayProvider = require('./DatePickerOverlayProvider.js');
 
 function useDatePicker(props, ref) {
+  const {
+    defaultDates: { minDate: defaultMinDate, maxDate: defaultMaxDate }
+  } = LocalizationProvider.useLocalization();
   const {
     readOnly = false,
     disabled,
     selectionVariant,
-    defaultSelectedDate = null,
+    defaultSelectedDate,
     selectedDate: selectedDateProp,
-    onSelectedDateChange,
+    onSelectionChange,
     onApply,
-    minDate: minDateProp,
-    maxDate: maxDateProp,
-    timeZone = date.getLocalTimeZone(),
-    locale = formatDate.getCurrentLocale(),
+    minDate = defaultMinDate,
+    maxDate = defaultMaxDate,
     onCancel
   } = props;
-  const minDate = react.useMemo(
-    () => minDateProp ?? date.startOfMonth(new date.CalendarDate(useCalendarSelection.CALENDAR_MIN_YEAR, 1, 1)),
-    [minDateProp]
-  );
-  const maxDate = react.useMemo(
-    () => maxDateProp ?? date.endOfMonth(new date.CalendarDate(useCalendarSelection.CALENDAR_MAX_YEAR, 1, 1)),
-    [maxDateProp]
-  );
+  const previousSelectedDate = react.useRef();
   const datePickerRef = react.useRef(null);
   const containerRef = core.useForkRef(ref, datePickerRef);
   const {
     state: { open },
-    helpers: { setOpen }
+    helpers: { setOpen, setOnDismiss }
   } = DatePickerOverlayProvider.useDatePickerOverlay();
   const [selectedDate, setSelectedDate] = core.useControlled({
     controlled: selectedDateProp,
@@ -51,117 +38,82 @@ function useDatePicker(props, ref) {
   const [cancelled, setCancelled] = react.useState(false);
   react.useEffect(() => {
     if (open) {
+      previousSelectedDate.current = selectedDate;
+      if (enableApply) {
+        setOnDismiss(cancel);
+      }
       setCancelled(false);
     }
-  }, [open]);
+  }, [enableApply, open, setOnDismiss, setCancelled]);
+  react.useEffect(() => {
+    if (cancelled) {
+      setSelectedDate(previousSelectedDate == null ? void 0 : previousSelectedDate.current);
+    }
+  }, [cancelled, setSelectedDate]);
   const { disabled: formFieldDisabled, readOnly: formFieldReadOnly } = core.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 = react.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 = react.useCallback(
+    (event, date) => {
+      setCancelled(false);
+      setOpen(false);
+      if (selectionVariant === "single") {
+        onApply == null ? void 0 : onApply(event, date);
       }
-      setSelectedDate(nextDate);
+    },
+    [setCancelled, setOpen, onApply]
+  );
+  const selectSingle = react.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 = react.useCallback(
+    (event, date) => {
+      setCancelled(false);
       setOpen(false);
-    }
-    if (selectionVariant === "range") {
-      onApply == null ? void 0 : onApply(appliedDate, error);
-    }
-  };
-  const setSelectedRangeDate = react.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 = react.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 = react.useCallback(() => {
     setCancelled(true);
     setOpen(false);
     onCancel == null ? void 0 : onCancel();
-  };
+  }, [setCancelled, setOpen, onCancel]);
   const returnValue = {
     state: {
       selectionVariant,
@@ -172,9 +124,7 @@ function useDatePicker(props, ref) {
       readOnly: isReadOnly,
       containerRef,
       minDate,
-      maxDate,
-      locale,
-      timeZone
+      maxDate
     },
     helpers: {
       cancel,
@@ -187,7 +137,7 @@ function useDatePicker(props, ref) {
       helpers: {
         ...returnValue.helpers,
         apply: applyRange,
-        setSelectedDate: setSelectedRangeDate
+        select: selectRange
       }
     };
   }
@@ -196,7 +146,7 @@ function useDatePicker(props, ref) {
     helpers: {
       ...returnValue.helpers,
       apply: applySingle,
-      setSelectedDate: setSelectedSingleDate
+      select: selectSingle
     }
   };
 }

package/dist-cjs/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":["getLocalTimeZone","getCurrentLocale","useMemo","startOfMonth","CalendarDate","CALENDAR_MIN_YEAR","endOfMonth","CALENDAR_MAX_YEAR","useRef","useForkRef","useDatePickerOverlay","useControlled","useState","useEffect","useFormFieldProps","useCallback"],"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":["useLocalization","useRef","useForkRef","useDatePickerOverlay","useControlled","useState","useEffect","useFormFieldProps","useCallback"],"mappings":";;;;;;;AAkJgB,SAAA,aAAA,CAId,OACA,GAC4D,EAAA;AAC5D,EAAM,MAAA;AAAA,IACJ,YAAc,EAAA,EAAE,OAAS,EAAA,cAAA,EAAgB,SAAS,cAAe;AAAA,MAC/DA,oCAAuB,EAAA;AAC3B,EAAM,MAAA;AAAA,IACJ,QAAW,GAAA,KAAA;AAAA,IACX,QAAA;AAAA,IACA,gBAAA;AAAA,IACA,mBAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA,IACd,iBAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAU,GAAA,cAAA;AAAA,IACV,OAAU,GAAA,cAAA;AAAA,IACV;AAAA,GACE,GAAA,KAAA;AAEJ,EAAA,MAAM,uBAAuBC,YAAgC,EAAA;AAC7D,EAAM,MAAA,aAAA,GAAgBA,aAAuB,IAAI,CAAA;AACjD,EAAM,MAAA,YAAA,GAAeC,eAAW,CAAA,GAAA,EAAK,aAAa,CAAA;AAElD,EAAM,MAAA;AAAA,IACJ,KAAA,EAAO,EAAE,IAAK,EAAA;AAAA,IACd,OAAA,EAAS,EAAE,OAAA,EAAS,YAAa;AAAA,MAC/BC,8CAAqB,EAAA;AAEzB,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIC,kBAAc,CAAA;AAAA,IACpD,UAAY,EAAA,gBAAA;AAAA,IACZ,OAAS,EAAA,mBAAA;AAAA,IACT,IAAM,EAAA,YAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIC,eAAkB,KAAK,CAAA;AAC7D,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAkB,KAAK,CAAA;AAGzD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,oBAAA,CAAqB,OAAU,GAAA,YAAA;AAC/B,MAAA,IAAI,WAAa,EAAA;AACf,QAAA,YAAA,CAAa,MAAM,CAAA;AAAA;AAErB,MAAA,YAAA,CAAa,KAAK,CAAA;AAAA;AACpB,KACC,CAAC,WAAA,EAAa,IAAM,EAAA,YAAA,EAAc,YAAY,CAAC,CAAA;AAGlD,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAW,EAAA;AACb,MAAA,eAAA,CAAgB,6DAAsB,OAAO,CAAA;AAAA;AAC/C,GACC,EAAA,CAAC,SAAW,EAAA,eAAe,CAAC,CAAA;AAE/B,EAAA,MAAM,EAAE,QAAU,EAAA,iBAAA,EAAmB,QAAU,EAAA,iBAAA,KAC7CC,sBAAkB,EAAA;AACpB,EAAM,MAAA,UAAA,GAAa,YAAY,iBAAqB,IAAA,KAAA;AACpD,EAAM,MAAA,UAAA,GAAa,YAAY,iBAAqB,IAAA,KAAA;AAEpD,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,CAAC,OAAuB,IAAkD,KAAA;AACxE,MAAA,YAAA,CAAa,KAAK,CAAA;AAClB,MAAA,OAAA,CAAQ,KAAK,CAAA;AACb,MAAA,IAAI,qBAAqB,QAAU,EAAA;AACjC,QAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAU,KAAO,EAAA,IAAA,CAAA;AAAA;AACnB,KACF;AAAA,IACA,CAAC,YAAc,EAAA,OAAA,EAAS,OAAO;AAAA,GACjC;AAEA,EAAA,MAAM,YAAe,GAAAA,iBAAA;AAAA,IACnB,CACE,KACA,EAAA,IAAA,EACA,OACG,KAAA;AACH,MAAA,eAAA,CAAgB,IAAI,CAAA;AACpB,MAAA,IAAI,qBAAqB,QAAU,EAAA;AACjC,QAAA,iBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAoB,OAAO,IAAM,EAAA,OAAA,CAAA;AAAA;AAEnC,MAAI,IAAA,CAAC,eAAe,IAAM,EAAA;AACxB,QAAA,WAAA,CAAY,OAAO,IAAI,CAAA;AAAA;AACzB,KACF;AAAA,IACA;AAAA,MACE,WAAA;AAAA,MACA,WAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,UAAa,GAAAA,iBAAA;AAAA,IACjB,CAAC,OAAuB,IAAiD,KAAA;AACvE,MAAA,YAAA,CAAa,KAAK,CAAA;AAClB,MAAA,OAAA,CAAQ,KAAK,CAAA;AACb,MAAA,IAAI,qBAAqB,OAAS,EAAA;AAChC,QAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAU,KAAO,EAAA,IAAA,CAAA;AAAA;AACnB,KACF;AAAA,IACA,CAAC,OAAA,EAAS,YAAc,EAAA,OAAA,EAAS,gBAAgB;AAAA,GACnD;AAEA,EAAA,MAAM,WAAc,GAAAA,iBAAA;AAAA,IAClB,CACE,KACA,EAAA,IAAA,EACA,OACG,KAAA;AACH,MAAA,eAAA,CAAgB,IAAI,CAAA;AACpB,MAAA,IAAI,qBAAqB,OAAS,EAAA;AAChC,QAAA,iBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAoB,OAAO,IAAM,EAAA,OAAA,CAAA;AAAA;AAEnC,MAAA,IAAI,CAAC,WAAA,KAAe,IAAM,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,IAAA,CAAA,SAAA,CAAA,KAAa,6BAAM,OAAS,CAAA,EAAA;AACpD,QAAA,UAAA,CAAW,OAAO,IAAI,CAAA;AAAA;AACxB,KACF;AAAA,IACA;AAAA,MACE,UAAA;AAAA,MACA,WAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAM,MAAA,MAAA,GAASA,kBAAY,MAAM;AAC/B,IAAA,YAAA,CAAa,IAAI,CAAA;AACjB,IAAA,OAAA,CAAQ,KAAK,CAAA;AACb,IAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,EAAA;AAAA,GACC,EAAA,CAAC,YAAc,EAAA,OAAA,EAAS,QAAQ,CAAC,CAAA;AAEpC,EAAA,MAAM,WAAc,GAAA;AAAA,IAClB,KAAO,EAAA;AAAA,MACL,gBAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAU,EAAA,UAAA;AAAA,MACV,QAAU,EAAA,UAAA;AAAA,MACV,YAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,OAAS,EAAA;AAAA,MACP,MAAA;AAAA,MACA;AAAA;AACF,GACF;AACA,EAAI,IAAA,KAAA,CAAM,qBAAqB,OAAS,EAAA;AACtC,IAAO,OAAA;AAAA,MACL,GAAG,WAAA;AAAA,MACH,OAAS,EAAA;AAAA,QACP,GAAG,WAAY,CAAA,OAAA;AAAA,QACf,KAAO,EAAA,UAAA;AAAA,QACP,MAAQ,EAAA;AAAA;AACV,KACF;AAAA;AAEF,EAAO,OAAA;AAAA,IACL,GAAG,WAAA;AAAA,IACH,OAAS,EAAA;AAAA,MACP,GAAG,WAAY,CAAA,OAAA;AAAA,MACf,KAAO,EAAA,WAAA;AAAA,MACP,MAAQ,EAAA;AAAA;AACV,GACF;AACF;;;;"}

package/dist-cjs/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":["makePrefixer","forwardRef","DropdownButton","DEFAULT_ICON_SIZE","useWindow","useComponentCssInjection","dropdownButtonCss","useIcon","useFormFieldLegacyProps","jsx","Button","clsx","jsxs"],"mappings":";;;;;;;;;;;;;AA8DA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AAEzC,MAAA,cAAA,GAAiBC,gBAAW,CAAA,SAASC,eAChD,CAAA;AAAA,EACE,aAAA;AAAA,EACA,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAW,GAAAC,uBAAA;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,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAM,MAAA,EAAE,UAAW,EAAA,GAAIC,YAAQ,EAAA;AAC/B,EAAM,MAAA,IAAA,GAAO,aAAkB,KAAA,KAAA,CAAA,GAAY,UAAa,GAAA,aAAA;AACxD,EAAM,MAAA,EAAE,WAAY,EAAA,GAAIC,+CAAwB,EAAA;AAIhD,EACE,uBAAAC,cAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,SAAA;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,kBAAAC,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,SAAS,CACpC,EAAA,QAAA,EAAA;AAAA,wBAAAH,cAAA;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,wBACAA,cAAA;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":["makePrefixer","forwardRef","DropdownButton","DEFAULT_ICON_SIZE","useWindow","useComponentCssInjection","dropdownButtonCss","useIcon","useFormFieldLegacyProps","jsx","Button","clsx","jsxs"],"mappings":";;;;;;;;;;;;;AA8DA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AAEzC,MAAA,cAAA,GAAiBC,gBAAW,CAAA,SAASC,eAChD,CAAA;AAAA,EACE,aAAA;AAAA,EACA,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAW,GAAAC,uBAAA;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,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAM,MAAA,EAAE,UAAW,EAAA,GAAIC,YAAQ,EAAA;AAC/B,EAAM,MAAA,IAAA,GAAO,aAAkB,KAAA,KAAA,CAAA,GAAY,UAAa,GAAA,aAAA;AACxD,EAAM,MAAA,EAAE,WAAY,EAAA,GAAIC,+CAAwB,EAAA;AAIhD,EACE,uBAAAC,cAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,SAAA;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,kBAAAC,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,SAAS,CACpC,EAAA,QAAA,EAAA;AAAA,wBAAAH,cAAA;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,wBACAA,cAAA;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-cjs/index.js

@@ -29,11 +29,10 @@ var OrderedButton = require('./button-bar/OrderedButton.js');
 var Calendar = require('./calendar/Calendar.js');
 var CalendarNavigation = require('./calendar/CalendarNavigation.js');
 var CalendarWeekHeader = require('./calendar/CalendarWeekHeader.js');
-var CalendarDateGrid = require('./calendar/CalendarDateGrid.js');
+var CalendarGrid = require('./calendar/CalendarGrid.js');
 var useCalendarDay = require('./calendar/useCalendarDay.js');
 var useCalendar = require('./calendar/useCalendar.js');
 var useCalendarSelection = require('./calendar/useCalendarSelection.js');
-var formatDate = require('./calendar/formatDate.js');
 var Carousel = require('./carousel/Carousel.js');
 var CarouselSlide = require('./carousel/CarouselSlide.js');
 var CascadingMenu = require('./cascading-menu/CascadingMenu.js');
@@ -62,15 +61,15 @@ var MailLinkComponent = require('./contact-details/MailLinkComponent.js');
 var ContentStatus = require('./content-status/ContentStatus.js');
 var DateInputSingle = require('./date-input/DateInputSingle.js');
 var DateInputRange = require('./date-input/DateInputRange.js');
-var utils = require('./date-input/utils.js');
 var DatePicker = require('./date-picker/DatePicker.js');
 var DatePickerActions = require('./date-picker/DatePickerActions.js');
 var DatePickerContext = require('./date-picker/DatePickerContext.js');
 var DatePickerOverlay = require('./date-picker/DatePickerOverlay.js');
-var DatePickerSingleInput = require('./date-picker/DatePickerSingleInput.js');
-var DatePickerSinglePanel = require('./date-picker/DatePickerSinglePanel.js');
 var DatePickerRangeInput = require('./date-picker/DatePickerRangeInput.js');
 var DatePickerRangePanel = require('./date-picker/DatePickerRangePanel.js');
+var DatePickerSingleInput = require('./date-picker/DatePickerSingleInput.js');
+var DatePickerSinglePanel = require('./date-picker/DatePickerSinglePanel.js');
+var DatePickerTrigger = require('./date-picker/DatePickerTrigger.js');
 var DeckItem = require('./deck-item/DeckItem.js');
 var DeckLayout = require('./deck-layout/DeckLayout.js');
 var DialogHeader = require('./dialog/DialogHeader.js');
@@ -97,6 +96,7 @@ var useList = require('./list/useList.js');
 var VirtualizedList = require('./list/VirtualizedList.js');
 var ListNext = require('./list-next/ListNext.js');
 var ListItemNext = require('./list-next/ListItemNext.js');
+var LocalizationProvider = require('./localization-provider/LocalizationProvider.js');
 var Logo = require('./logo/Logo.js');
 var LogoImage = require('./logo/LogoImage.js');
 var LogoSeparator = require('./logo/LogoSeparator.js');
@@ -104,6 +104,7 @@ var MenuButton = require('./menu-button/MenuButton.js');
 var Metric = require('./metric/Metric.js');
 var MetricHeader = require('./metric/MetricHeader.js');
 var MetricContent = require('./metric/MetricContent.js');
+var OverlayHeader = require('./overlay/OverlayHeader.js');
 var Portal = require('./portal/Portal.js');
 var QueryInput = require('./query-input/QueryInput.js');
 var useQueryInput = require('./query-input/useQueryInput.js');
@@ -116,7 +117,7 @@ var useOverflowCollectionItems = require('./responsive/useOverflowCollectionItem
 var useOverflowLayout = require('./responsive/useOverflowLayout.js');
 var useWidth = require('./responsive/useWidth.js');
 var overflowUtils = require('./responsive/overflowUtils.js');
-var utils$1 = require('./responsive/utils.js');
+var utils = require('./responsive/utils.js');
 var SearchInput = require('./search-input/SearchInput.js');
 var SkipLink = require('./skip-link/SkipLink.js');
 var SkipLinks = require('./skip-link/SkipLinks.js');
@@ -183,18 +184,14 @@ exports.OrderedButton = OrderedButton.OrderedButton;
 exports.Calendar = Calendar.Calendar;
 exports.CalendarNavigation = CalendarNavigation.CalendarNavigation;
 exports.CalendarWeekHeader = CalendarWeekHeader.CalendarWeekHeader;
-exports.CalendarDateGrid = CalendarDateGrid.CalendarDateGrid;
+exports.CalendarGrid = CalendarGrid.CalendarGrid;
 exports.useCalendarDay = useCalendarDay.useCalendarDay;
 exports.useCalendar = useCalendar.useCalendar;
-exports.CALENDAR_MAX_YEAR = useCalendarSelection.CALENDAR_MAX_YEAR;
-exports.CALENDAR_MIN_YEAR = useCalendarSelection.CALENDAR_MIN_YEAR;
 exports.isDateRangeSelection = useCalendarSelection.isDateRangeSelection;
 exports.isMultipleDateSelection = useCalendarSelection.isMultipleDateSelection;
 exports.isSingleSelectionValueType = useCalendarSelection.isSingleSelectionValueType;
 exports.useCalendarSelection = useCalendarSelection.useCalendarSelection;
 exports.useCalendarSelectionDay = useCalendarSelection.useCalendarSelectionDay;
-exports.formatDate = formatDate.formatDate;
-exports.getCurrentLocale = formatDate.getCurrentLocale;
 exports.Carousel = Carousel.Carousel;
 exports.CarouselSlide = CarouselSlide.CarouselSlide;
 exports.CascadingMenu = CascadingMenu.CascadingMenu;
@@ -230,11 +227,7 @@ exports.MailLinkComponent = MailLinkComponent.MailLinkComponent;
 exports.ContentStatus = ContentStatus.ContentStatus;
 exports.DateInputSingle = DateInputSingle.DateInputSingle;
 exports.DateInputRange = DateInputRange.DateInputRange;
-exports.dateSupportsTime = utils.dateSupportsTime;
-exports.extractTimeFieldsFromDate = utils.extractTimeFieldsFromDate;
-exports.extractTimeFieldsFromDateRange = utils.extractTimeFieldsFromDateRange;
-exports.parseCalendarDate = utils.parseCalendarDate;
-exports.parseZonedDateTime = utils.parseZonedDateTime;
+exports.DateParserField = DateInputRange.DateParserField;
 exports.DatePicker = DatePicker.DatePicker;
 exports.DatePickerMain = DatePicker.DatePickerMain;
 exports.DatePickerActions = DatePickerActions.DatePickerActions;
@@ -242,10 +235,12 @@ exports.DateRangeSelectionContext = DatePickerContext.DateRangeSelectionContext;
 exports.SingleDateSelectionContext = DatePickerContext.SingleDateSelectionContext;
 exports.useDatePickerContext = DatePickerContext.useDatePickerContext;
 exports.DatePickerOverlay = DatePickerOverlay.DatePickerOverlay;
-exports.DatePickerSingleInput = DatePickerSingleInput.DatePickerSingleInput;
-exports.DatePickerSinglePanel = DatePickerSinglePanel.DatePickerSinglePanel;
 exports.DatePickerRangeInput = DatePickerRangeInput.DatePickerRangeInput;
+exports.defaultRangeValidator = DatePickerRangeInput.defaultRangeValidator;
 exports.DatePickerRangePanel = DatePickerRangePanel.DatePickerRangePanel;
+exports.DatePickerSingleInput = DatePickerSingleInput.DatePickerSingleInput;
+exports.DatePickerSinglePanel = DatePickerSinglePanel.DatePickerSinglePanel;
+exports.DatePickerTrigger = DatePickerTrigger.DatePickerTrigger;
 exports.DeckItem = DeckItem.DeckItem;
 exports.DeckLayout = DeckLayout.DeckLayout;
 exports.DialogHeader = DialogHeader.DialogHeader;
@@ -274,6 +269,9 @@ exports.useList = useList.useList;
 exports.VirtualizedList = VirtualizedList.VirtualizedList;
 exports.ListNext = ListNext.ListNext;
 exports.ListItemNext = ListItemNext.ListItemNext;
+exports.LocalizationProvider = LocalizationProvider.LocalizationProvider;
+exports.LocalizationProviderContext = LocalizationProvider.LocalizationProviderContext;
+exports.useLocalization = LocalizationProvider.useLocalization;
 exports.Logo = Logo.Logo;
 exports.LogoImage = LogoImage.LogoImage;
 exports.LogoSeparator = LogoSeparator.LogoSeparator;
@@ -281,6 +279,7 @@ exports.MenuButton = MenuButton.MenuButton;
 exports.Metric = Metric.Metric;
 exports.MetricHeader = MetricHeader.MetricHeader;
 exports.MetricContent = MetricContent.MetricContent;
+exports.OverlayHeader = OverlayHeader.OverlayHeader;
 exports.Portal = Portal.Portal;
 exports.QueryInput = QueryInput.QueryInput;
 exports.useQueryInput = useQueryInput.useQueryInput;
@@ -317,8 +316,8 @@ exports.measureElementSize = overflowUtils.measureElementSize;
 exports.measureOverflowItems = overflowUtils.measureOverflowItems;
 exports.notOverflowed = overflowUtils.notOverflowed;
 exports.popNextItemByPriority = overflowUtils.popNextItemByPriority;
-exports.isResponsiveAttribute = utils$1.isResponsiveAttribute;
-exports.liftResponsivePropsToFormField = utils$1.liftResponsivePropsToFormField;
+exports.isResponsiveAttribute = utils.isResponsiveAttribute;
+exports.liftResponsivePropsToFormField = utils.liftResponsivePropsToFormField;
 exports.SearchInput = SearchInput.SearchInput;
 exports.SkipLink = SkipLink.SkipLink;
 exports.SkipLinks = SkipLinks.SkipLinks;

package/dist-cjs/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-cjs/localization-provider/LocalizationProvider.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const MIN_DATE = "1900-01-01T00:00:00.000";
+const MAX_DATE = "2099-12-31T00:00:00.000";
+const LocalizationProviderContext = react.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 = react.useMemo(() => {
+    return new DateAdapter({
+      locale,
+      instance
+    });
+  }, [DateAdapter, locale]);
+  const defaultDates = react.useMemo(
+    () => ({
+      minDate: minDate || dateAdapter.date(MIN_DATE),
+      maxDate: maxDate || dateAdapter.date(MAX_DATE)
+    }),
+    [dateAdapter, minDate, maxDate]
+  );
+  const contextValue = react.useMemo(() => {
+    return {
+      dateAdapter,
+      defaultDates
+    };
+  }, [dateAdapter, defaultDates]);
+  return /* @__PURE__ */ jsxRuntime.jsx(LocalizationProviderContext.Provider, { value: contextValue, children });
+};
+const useLocalization = () => {
+  const localization = react.useContext(LocalizationProviderContext);
+  if (!localization) {
+    throw new Error(
+      "useLocalization should be called inside LocalizationProviderContext.Provider"
+    );
+  }
+  return localization;
+};
+
+exports.LocalizationProvider = LocalizationProvider;
+exports.LocalizationProviderContext = LocalizationProviderContext;
+exports.useLocalization = useLocalization;
+//# sourceMappingURL=LocalizationProvider.js.map

package/dist-cjs/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":["createContext","LocalizationProvider","useMemo","useContext"],"mappings":";;;;;AAMA,MAAM,QAAW,GAAA,yBAAA;AACjB,MAAM,QAAW,GAAA,yBAAA;AA8DJ,MAAA,2BAAA,GACXA,oBAAqD,IAAI;AAE3D,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,2BAAA,CAA4B,WAAc,GAAA,6BAAA;AAC5C;AAEa,MAAA,oBAAA,GAAuB,SAASC,qBAAAA,CAG3C,KAAkD,EAAA;AAClD,EAAA,MAAM,EAAE,QAAU,EAAA,WAAA,EAAa,UAAU,MAAQ,EAAA,OAAA,EAAS,SAAY,GAAA,KAAA;AAEtE,EAAM,MAAA,WAAA,GAAcC,cAAQ,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,GAAAA,aAAA;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,GAAiDA,cAAQ,MAAM;AACnE,IAAO,OAAA;AAAA,MACL,WAAA;AAAA,MACA;AAAA,KACF;AAAA,GACC,EAAA,CAAC,WAAa,EAAA,YAAY,CAAC,CAAA;AAE9B,EAAA,sCACG,2BAA4B,CAAA,QAAA,EAA5B,EAAqC,KAAA,EAAO,cAC1C,QACH,EAAA,CAAA;AAEJ;AAeO,MAAM,kBAAkB,MAEU;AACvC,EAAM,MAAA,YAAA,GAAeC,iBAAW,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-cjs/overlay/OverlayHeader.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+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";
+
+module.exports = css_248z;
+//# sourceMappingURL=OverlayHeader.css.js.map

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

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

package/dist-cjs/overlay/OverlayHeader.js

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

package/dist-cjs/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":["makePrefixer","forwardRef","OverlayHeader","useWindow","useComponentCssInjection","overlayHeaderCss","jsxs","clsx","Text","jsx"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA;AAqB9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;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,uBAAAC,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAWC,SAAK,CAAA,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,GACzD,EAAA,QAAA,EAAA;AAAA,sBAAAD,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,WAAW,CACtC,EAAA,QAAA,EAAA;AAAA,wBAAAA,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,QAAQ,CAClC,EAAA,QAAA,EAAA;AAAA,UAAA,SAAA,mCACEE,SAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,WAAW,GAAI,QAAU,EAAA,SAAA,EAAA,CAAA;AAAA,UAExD;AAAA,SACH,EAAA,CAAA;AAAA,QACC,WAAA,mCACEA,SAAK,EAAA,EAAA,KAAA,EAAM,aAAY,SAAW,EAAA,YAAA,CAAa,aAAa,CAAA,EAC1D,QACH,EAAA,WAAA,EAAA;AAAA,OAEJ,EAAA,CAAA;AAAA,MACC,2BACEC,cAAA,CAAA,KAAA,EAAA,EAAI,WAAW,YAAa,CAAA,kBAAkB,GAAI,QAAQ,EAAA,OAAA,EAAA;AAAA,KAE/D,EAAA,CAAA;AAAA;AAGN;;;;"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-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";
 
 module.exports = css_248z;
 //# sourceMappingURL=SystemStatus.css.js.map