@salt-ds/date-components 0.0.0-snapshot-20260330155807

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerOverlayProvider.js","sources":["../src/date-picker/DatePickerOverlayProvider.tsx"],"sourcesContent":["import {\n  type ElementProps,\n  type FloatingContext,\n  type OpenChangeReason as FloatingUIOpenChangeReason,\n  flip,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { createContext, useControlled, useFloatingUI } from \"@salt-ds/core\";\nimport {\n  type ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useFocusOut } from \"./useFocusOut\";\nimport { useKeyboard } from \"./useKeyboard\";\n\n/** Reason for overlay state change, can be a custom reason */\nexport type DatePickerOpenChangeReason =\n  | FloatingUIOpenChangeReason\n  | \"apply\"\n  | \"cancel\"\n  | string;\n/**\n * Interface representing the state for a DatePicker overlay.\n */\ninterface DatePickerOverlayState {\n  /**\n   * If `true`, the overlay is open.\n   */\n  open: boolean;\n  /**\n   * If `true`, the overlay contains the active element\n   */\n  focused: boolean;\n  /**\n   * The result of the floating UI calculations.\n   */\n  floatingUIResult: ReturnType<typeof useFloatingUI>;\n  /**\n   * Ref to attach to the initially focused element, when the overlay is opened.\n   */\n  initialFocusRef?: React.MutableRefObject<HTMLElement | null>;\n}\n\n/**\n * Interface representing the helper functions for a DatePicker overlay.\n */\ninterface DatePickerOverlayHelpers {\n  /**\n   * Function to get the props for the floating element.\n   */\n  getFloatingProps: ReturnType<typeof useInteractions>[\"getFloatingProps\"];\n  /**\n   * Function to get the props for the reference element.\n   */\n  getReferenceProps: ReturnType<typeof useInteractions>[\"getReferenceProps\"];\n  /**\n   * Sets the open state of the overlay.\n   * @param newOpen - The new value for the open state.\n   * @param event - event that triggered the state change\n   * @param reason - reason for the the state change\n   */\n  setOpen: (\n    newOpen: boolean,\n    event?: Event,\n    reason?: DatePickerOpenChangeReason,\n  ) => void;\n  /**~\n   * Register a callback for when onDismiss is called\n   * @param onDismissCallback\n   */\n  setOnDismiss: (onDismissCallback: (event?: Event) => void) => void;\n}\n\n/**\n * Interface representing the context type for a DatePicker overlay.\n */\ninterface DatePickerOverlayContextType {\n  /**\n   * The state of the DatePicker overlay.\n   */\n  state: DatePickerOverlayState;\n  /**\n   * The helper functions for the DatePicker overlay.\n   */\n  helpers: DatePickerOverlayHelpers;\n}\n\n/**\n * Context for the DatePicker overlay.\n */\nconst DatePickerOverlayContext = createContext<\n  DatePickerOverlayContextType | undefined\n>(\"DatePickerOverlayContext\", undefined);\n\n/**\n * Props for the DatePickerOverlayProvider component.\n */\ninterface DatePickerOverlayProviderProps {\n  /**\n   * If `true`, the overlay is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the overlay is open.\n   */\n  open?: boolean;\n  /**\n   * When `open` is uncontrolled, set this to `true` to open on click\n   */\n  openOnClick?: boolean;\n  /**\n   * Handler for when open state changes\n   * @param newOpen - true when opened\n   * @param reason - reason for the the state change\n   */\n  onOpenChange?: (\n    newOpen: boolean,\n    reason?: DatePickerOpenChangeReason,\n  ) => void;\n  /**\n   * The default open state of the overlay.\n   */\n  defaultOpen?: boolean;\n  /**\n   * The content to be rendered inside the overlay provider.\n   */\n  children: ReactNode;\n  /**\n   * A factory method to create a set of interaction, if provided overrides the default interactions\n   */\n  interactions?: (context: FloatingContext) => Array<ElementProps>;\n  /**\n   * When true, shouldn't open the overlay.\n   */\n  readOnly?: boolean;\n}\n\nexport const DatePickerOverlayProvider: React.FC<\n  DatePickerOverlayProviderProps\n> = ({\n  disabled,\n  open: openProp,\n  openOnClick,\n  defaultOpen,\n  onOpenChange,\n  children,\n  interactions,\n  readOnly,\n}) => {\n  const [open, setOpenState, isOpenControlled] = useControlled({\n    controlled: openProp,\n    default: Boolean(defaultOpen),\n    name: \"DatePicker\",\n    state: \"openDatePickerOverlay\",\n  });\n  const triggeringElementRef = useRef<HTMLElement | null>(null);\n  const initialFocusRef = useRef<HTMLElement | null>(null);\n  const [focused, setFocused] = useState(false);\n  const onDismissCallback = useRef<(event?: Event) => void>();\n  const handleOpenChange = useCallback(\n    (newOpen: boolean, _event?: Event, reason?: DatePickerOpenChangeReason) => {\n      if (newOpen) {\n        if (readOnly) {\n          return;\n        }\n        triggeringElementRef.current = document.activeElement as HTMLElement;\n        setFocused(true);\n      } else if (!isOpenControlled && reason !== \"focus-out\") {\n        const trigger = triggeringElementRef.current as HTMLElement;\n        if (trigger) {\n          trigger.focus();\n        }\n        if (trigger instanceof HTMLInputElement) {\n          setTimeout(() => {\n            trigger.setSelectionRange(0, trigger.value.length);\n          }, 1);\n        }\n        triggeringElementRef.current = null;\n      }\n      setOpenState(newOpen);\n      onOpenChange?.(newOpen, reason);\n\n      if (\n        reason === \"focus-out\" ||\n        reason === \"escape-key\" ||\n        (reason === \"outside-press\" && onDismissCallback.current)\n      ) {\n        onDismissCallback?.current?.();\n      }\n    },\n    [isOpenControlled, onOpenChange, readOnly],\n  );\n\n  const openState = open && !readOnly;\n  const floatingUIResult = useFloatingUI({\n    open: openState,\n    onOpenChange: handleOpenChange,\n    placement: \"bottom-start\",\n    middleware: [flip({ fallbackStrategy: \"initialPlacement\" })],\n  });\n\n  const handleContainerBlur = useCallback(() => {\n    setTimeout(() => {\n      setFocused(\n        !!floatingUIResult?.refs.floating?.current?.contains(\n          document.activeElement,\n        ),\n      );\n    }, 0);\n  }, [floatingUIResult]);\n\n  const defaultInteractions = [\n    useDismiss(floatingUIResult.context, {}),\n    useKeyboard(floatingUIResult.context, {\n      enabled: !readOnly,\n      onArrowDown: (event) => {\n        handleOpenChange(true, event.nativeEvent, \"reference-press\");\n      },\n    }),\n    useClick(floatingUIResult.context, {\n      enabled: !disabled && !!openOnClick && !readOnly,\n      toggle: false,\n      keyboardHandlers: false,\n    }),\n    useFocusOut(floatingUIResult.context, {\n      enabled: !readOnly,\n    }),\n  ];\n\n  const {\n    getFloatingProps: getFloatingPropsCallback,\n    getReferenceProps: getReferencePropsCallback,\n  } = useInteractions(\n    interactions ? interactions(floatingUIResult.context) : defaultInteractions,\n  );\n\n  const getFloatingProps = useCallback(\n    (userProps: React.HTMLProps<HTMLElement> | undefined) => {\n      const { x, y, strategy, elements } = floatingUIResult;\n      return {\n        top: y ?? 0,\n        left: x ?? 0,\n        position: strategy,\n        width: elements.floating?.offsetWidth,\n        height: elements.floating?.offsetHeight,\n        ...getFloatingPropsCallback(userProps),\n        focusManagerProps: {\n          returnFocus: false,\n          context: floatingUIResult.context,\n          initialFocus: initialFocusRef,\n        },\n      };\n    },\n    [getFloatingPropsCallback, floatingUIResult],\n  );\n  const setOnDismiss = useCallback(\n    (dismissCallback: (event?: Event) => void) => {\n      onDismissCallback.current = dismissCallback;\n    },\n    [],\n  );\n\n  const state: DatePickerOverlayState = useMemo(\n    () => ({\n      open: openState,\n      focused,\n      floatingUIResult,\n      initialFocusRef,\n    }),\n    [focused, openState, floatingUIResult],\n  );\n\n  const helpers: DatePickerOverlayHelpers = useMemo(\n    () => ({\n      getFloatingProps,\n      getReferenceProps: getReferencePropsCallback,\n      setOpen: handleOpenChange,\n      setOnDismiss,\n    }),\n    [\n      getFloatingProps,\n      getReferencePropsCallback,\n      handleOpenChange,\n      setOnDismiss,\n    ],\n  );\n  const contextValue = useMemo(() => ({ state, helpers }), [state, helpers]);\n\n  return (\n    <DatePickerOverlayContext.Provider value={contextValue}>\n      <div onBlur={handleContainerBlur}>{children}</div>\n    </DatePickerOverlayContext.Provider>\n  );\n};\n\nexport const useDatePickerOverlay = (): DatePickerOverlayContextType => {\n  const context = useContext(DatePickerOverlayContext);\n  if (!context) {\n    throw new Error(\n      \"useDatePickerOverlay must be used within a DatePickerOverlayProvider\",\n    );\n  }\n  return context;\n};\n"],"names":[],"mappings":"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"}

package/dist-es/date-picker/DatePickerPanel.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltDatePickerOverlay {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n  border-radius: var(--salt-palette-corner, 0);\n  overflow: hidden;\n  overflow-y: auto;\n  position: relative;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  display: flex;\n}\n\n.saltDatePickerPanel-container {\n  width: min-content;\n  gap: 1px;\n}\n\n.saltDatePickerPanel-container > .saltDatePickerPanel-header {\n  padding: var(--salt-spacing-100);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=DatePickerPanel.css.js.map

package/dist-es/date-picker/DatePickerPanel.css.js.map

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

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

@@ -0,0 +1,248 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, useBreakpoint, resolveResponsiveValue, useControlled, useIsomorphicLayoutEffect, StackLayout, FlexItem, FormFieldHelperText, FlexLayout, FormFieldContext } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useState, useRef, useCallback } from 'react';
+import { Calendar } from '../calendar/Calendar.js';
+import { CalendarGrid } from '../calendar/CalendarGrid.js';
+import { CalendarNavigation } from '../calendar/CalendarNavigation.js';
+import '../calendar/CalendarWeekHeader.js';
+import { useLocalization } from '../localization-provider/LocalizationProvider.js';
+import { generateDatesForMonth } from '../calendar/internal/utils.js';
+import '../calendar/useCalendarSelection.js';
+import '../calendar/internal/CalendarContext.js';
+import { useDatePickerContext } from './DatePickerContext.js';
+import { useDatePickerOverlay } from './DatePickerOverlayProvider.js';
+import css_248z from './DatePickerPanel.css.js';
+
+const withBaseName = makePrefixer("saltDatePickerPanel");
+const DatePickerRangeGridPanel = forwardRef(
+  function DatePickerRangeGridPanel2(props, ref) {
+    const { dateAdapter } = useLocalization();
+    const {
+      CalendarProps,
+      CalendarNavigationProps,
+      CalendarGridProps,
+      className,
+      defaultVisibleMonth,
+      visibleMonth: visibleMonthProp,
+      onFocusedDateChange,
+      onHoveredDateChange,
+      onVisibleMonthChange,
+      helperText,
+      onSelectionChange,
+      numberOfVisibleMonths = 2,
+      columns = numberOfVisibleMonths,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-date-picker-range-grid-panel",
+      css: css_248z,
+      window: targetWindow
+    });
+    const stateAndHelpers = useDatePickerContext({
+      selectionVariant: "range"
+    });
+    const {
+      state: { focused, initialFocusRef }
+    } = useDatePickerOverlay();
+    const [hoveredDate, setHoveredDate] = useState(
+      null
+    );
+    const [focusedDate, setFocusedDate] = useState(
+      null
+    );
+    const calendarGridFocused = useRef(false);
+    const {
+      state: {
+        timezone,
+        selectedDate = null,
+        minDate = dateAdapter.startOf(dateAdapter.today(timezone), "month"),
+        maxDate = dateAdapter.add(minDate, { months: 1 })
+      },
+      helpers: { select, isDayHighlighted, isDayUnselectable }
+    } = stateAndHelpers;
+    const { matchedBreakpoints } = useBreakpoint();
+    const responsiveColumns = resolveResponsiveValue(columns, matchedBreakpoints) ?? 1;
+    const responsiveNumberOfVisibleMonths = resolveResponsiveValue(numberOfVisibleMonths, matchedBreakpoints) ?? 1;
+    const [uncontrolledDefaultVisibleMonth] = useState(() => {
+      const validDate = (selectedDate == null ? void 0 : selectedDate.startDate) && dateAdapter.isValid(selectedDate.startDate) ? selectedDate.startDate : dateAdapter.today(timezone);
+      return defaultVisibleMonth || dateAdapter.startOf(validDate, "month");
+    });
+    const [visibleMonth, setVisibleMonth] = useControlled({
+      controlled: visibleMonthProp,
+      default: uncontrolledDefaultVisibleMonth,
+      name: "DatePickerRangeGridPanel",
+      state: "visibleMonth"
+    });
+    const getNextFocusedDate = () => {
+      const isOutsideAllowedDates = (date) => {
+        return dateAdapter.compare(date, minDate) < 0 || dateAdapter.compare(date, maxDate) > 0;
+      };
+      const isDaySelectable = (date) => !(date && ((isDayUnselectable == null ? void 0 : isDayUnselectable(date)) || isOutsideAllowedDates(date)));
+      const startVisibleMonth = dateAdapter.startOf(visibleMonth, "month");
+      const endVisibleMonth = dateAdapter.add(visibleMonth, {
+        months: responsiveNumberOfVisibleMonths - 1
+      });
+      const getVisibleSelectedDate = () => {
+        const startDateStartOfMonth = (selectedDate == null ? void 0 : selectedDate.startDate) ? dateAdapter.startOf(selectedDate.startDate, "month") : null;
+        const endDateStartOfMonth = (selectedDate == null ? void 0 : selectedDate.endDate) ? dateAdapter.startOf(selectedDate.endDate, "month") : null;
+        if ((selectedDate == null ? void 0 : selectedDate.startDate) && startDateStartOfMonth && dateAdapter.compare(startDateStartOfMonth, startVisibleMonth) >= 0 && dateAdapter.compare(startDateStartOfMonth, endVisibleMonth) <= 0 && isDaySelectable(selectedDate == null ? void 0 : selectedDate.startDate)) {
+          return selectedDate == null ? void 0 : selectedDate.startDate;
+        }
+        if ((selectedDate == null ? void 0 : selectedDate.endDate) && endDateStartOfMonth && dateAdapter.compare(endDateStartOfMonth, startVisibleMonth) >= 0 && dateAdapter.compare(endDateStartOfMonth, endVisibleMonth) <= 0 && isDaySelectable(selectedDate == null ? void 0 : selectedDate.endDate)) {
+          return selectedDate == null ? void 0 : selectedDate.endDate;
+        }
+        return null;
+      };
+      const focusSelectedDate = getVisibleSelectedDate();
+      if (focusSelectedDate) {
+        return focusSelectedDate;
+      }
+      const today = dateAdapter.today(timezone);
+      const todayStartOfMonth = dateAdapter.startOf(today, "month");
+      if (dateAdapter.compare(todayStartOfMonth, startVisibleMonth) >= 0 && dateAdapter.compare(todayStartOfMonth, endVisibleMonth) <= 0 && isDaySelectable(today)) {
+        return today;
+      }
+      const getFirstSelectableDate = (startMonth, numberOfMonths) => {
+        for (let i = 0; i < numberOfMonths; i++) {
+          const currentMonth = dateAdapter.add(startMonth, { months: i });
+          const firstSelectableDate = generateDatesForMonth(
+            dateAdapter,
+            currentMonth
+          ).find((visibleDay) => isDaySelectable(visibleDay));
+          if (firstSelectableDate) {
+            return firstSelectableDate;
+          }
+        }
+        return null;
+      };
+      return getFirstSelectableDate(
+        startVisibleMonth,
+        responsiveNumberOfVisibleMonths
+      );
+    };
+    const handleSelectionChange = useCallback(
+      (event, newDate) => {
+        const dateRange = newDate;
+        select(event, dateRange);
+        onSelectionChange == null ? void 0 : onSelectionChange(event, dateRange);
+      },
+      [onSelectionChange, select]
+    );
+    const handleHoveredDateChange = useCallback(
+      (event, newHoveredDate) => {
+        setHoveredDate(newHoveredDate);
+        onHoveredDateChange == null ? void 0 : onHoveredDateChange(event, newHoveredDate);
+      },
+      [onHoveredDateChange]
+    );
+    const handleVisibleMonthChange = useCallback(
+      (event, newVisibleMonth) => {
+        setVisibleMonth(newVisibleMonth);
+        onVisibleMonthChange == null ? void 0 : onVisibleMonthChange(event, newVisibleMonth);
+      },
+      [onVisibleMonthChange]
+    );
+    const handleFocusedDateChange = useCallback(
+      (event, newFocusedDate) => {
+        setFocusedDate(newFocusedDate);
+        if (!newFocusedDate) {
+          onFocusedDateChange == null ? void 0 : onFocusedDateChange(event, newFocusedDate);
+          return;
+        }
+        const startOfFocusedMonth = dateAdapter.startOf(
+          newFocusedDate,
+          "month"
+        );
+        const lastVisibleMonth = dateAdapter.add(visibleMonth, {
+          months: responsiveNumberOfVisibleMonths - 1
+        });
+        const isBeforeVisibleMonth = dateAdapter.compare(startOfFocusedMonth, visibleMonth) < 0;
+        const isAfterLastVisibleMonth = dateAdapter.compare(startOfFocusedMonth, lastVisibleMonth) > 0;
+        if (isBeforeVisibleMonth) {
+          handleVisibleMonthChange(event, startOfFocusedMonth);
+        } else if (isAfterLastVisibleMonth) {
+          const newLastVisibleMonth = dateAdapter.subtract(
+            startOfFocusedMonth,
+            { months: responsiveNumberOfVisibleMonths - 1 }
+          );
+          handleVisibleMonthChange(event, newLastVisibleMonth);
+        }
+        onFocusedDateChange == null ? void 0 : onFocusedDateChange(event, newFocusedDate);
+      },
+      [
+        dateAdapter,
+        handleVisibleMonthChange,
+        onFocusedDateChange,
+        responsiveNumberOfVisibleMonths,
+        visibleMonth
+      ]
+    );
+    useIsomorphicLayoutEffect(() => {
+      if (focused && !calendarGridFocused.current) {
+        setFocusedDate((prevFocusedDate) => {
+          if (!prevFocusedDate) {
+            return getNextFocusedDate();
+          }
+          return prevFocusedDate;
+        });
+      }
+      calendarGridFocused.current = focused;
+    }, [focused]);
+    const calendarProps = {
+      visibleMonth,
+      focusedDateRef: initialFocusRef,
+      focusedDate: (calendarGridFocused == null ? void 0 : calendarGridFocused.current) ? focusedDate : null,
+      hoveredDate,
+      numberOfVisibleMonths: responsiveNumberOfVisibleMonths,
+      onFocusedDateChange: handleFocusedDateChange,
+      onHoveredDateChange: handleHoveredDateChange,
+      onSelectionChange: handleSelectionChange,
+      onVisibleMonthChange: handleVisibleMonthChange,
+      hideOutOfRangeDates: true,
+      isDayHighlighted,
+      isDayUnselectable,
+      selectedDate,
+      minDate,
+      maxDate,
+      timezone,
+      ...CalendarProps
+    };
+    return /* @__PURE__ */ jsxs(
+      StackLayout,
+      {
+        separators: true,
+        gap: 0,
+        className: clsx(className, withBaseName("container")),
+        ref,
+        ...rest,
+        children: [
+          helperText && /* @__PURE__ */ jsx(FlexItem, { className: withBaseName("header"), children: /* @__PURE__ */ jsx(FormFieldHelperText, { children: helperText }) }),
+          /* @__PURE__ */ jsx(FlexLayout, { gap: 0, children: /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: {}, children: /* @__PURE__ */ jsxs(
+            Calendar,
+            {
+              selectionVariant: "range",
+              ...calendarProps,
+              children: [
+                /* @__PURE__ */ jsx(CalendarNavigation, { ...CalendarNavigationProps }),
+                /* @__PURE__ */ jsx(
+                  CalendarGrid,
+                  {
+                    columns: responsiveColumns,
+                    ...CalendarGridProps
+                  }
+                )
+              ]
+            }
+          ) }) })
+        ]
+      }
+    );
+  }
+);
+
+export { DatePickerRangeGridPanel };
+//# sourceMappingURL=DatePickerRangeGridPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerRangeGridPanel.js","sources":["../src/date-picker/DatePickerRangeGridPanel.tsx"],"sourcesContent":["import {\n  FlexItem,\n  FlexLayout,\n  FormFieldContext,\n  type FormFieldContextValue,\n  FormFieldHelperText,\n  makePrefixer,\n  resolveResponsiveValue,\n  StackLayout,\n  useBreakpoint,\n  useControlled,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  forwardRef,\n  type SyntheticEvent,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  Calendar,\n  CalendarGrid,\n  CalendarNavigation,\n  type CalendarRangeProps,\n  type DateRangeSelection,\n  type SingleDateSelection,\n} from \"../calendar\";\nimport { generateDatesForMonth } from \"../calendar/internal/utils\";\nimport { useLocalization } from \"../localization-provider\";\nimport {\n  type RangeDatePickerState,\n  useDatePickerContext,\n} from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\nimport datePickerPanelCss from \"./DatePickerPanel.css\";\nimport type { DatePickerPanelBaseProps } from \"./DatePickerSingleGridPanel\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerPanel\");\n\n/**\n * Props for the DatePickerRangeGridPanel component.\n */\nexport type DatePickerRangeGridPanelProps = DatePickerPanelBaseProps &\n  DateRangeSelection & {\n    onSelectionChange?: (\n      event: SyntheticEvent,\n      selectedDate?: DateRangeSelection | null,\n    ) => void;\n    CalendarProps?: Partial<\n      Omit<\n        CalendarRangeProps,\n        | \"selectionVariant\"\n        | \"selectedDate\"\n        | \"defaultSelectedDate\"\n        | \"multiselect\"\n        | \"onHoveredDateChange\"\n        | \"onSelectionChange\"\n        | \"onVisibleMonthChange\"\n      >\n    >;\n  };\n\nexport const DatePickerRangeGridPanel = forwardRef(\n  function DatePickerRangeGridPanel(\n    props: DatePickerRangeGridPanelProps,\n    ref: React.Ref<HTMLDivElement>,\n  ) {\n    const { dateAdapter } = useLocalization();\n\n    const {\n      CalendarProps,\n      CalendarNavigationProps,\n      CalendarGridProps,\n      className,\n      defaultVisibleMonth,\n      visibleMonth: visibleMonthProp,\n      onFocusedDateChange,\n      onHoveredDateChange,\n      onVisibleMonthChange,\n      helperText,\n      onSelectionChange,\n      numberOfVisibleMonths = 2,\n      columns = numberOfVisibleMonths,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-date-picker-range-grid-panel\",\n      css: datePickerPanelCss,\n      window: targetWindow,\n    });\n\n    const stateAndHelpers = useDatePickerContext({\n      selectionVariant: \"range\",\n    }) as RangeDatePickerState;\n\n    const {\n      state: { focused, initialFocusRef },\n    } = useDatePickerOverlay();\n\n    const [hoveredDate, setHoveredDate] = useState<DateFrameworkType | null>(\n      null,\n    );\n    const [focusedDate, setFocusedDate] = useState<DateFrameworkType | null>(\n      null,\n    );\n    const calendarGridFocused = useRef(false);\n\n    const {\n      state: {\n        timezone,\n        selectedDate = null,\n        minDate = dateAdapter.startOf(dateAdapter.today(timezone), \"month\"),\n        maxDate = dateAdapter.add(minDate, { months: 1 }),\n      },\n      helpers: { select, isDayHighlighted, isDayUnselectable },\n    } = stateAndHelpers;\n\n    const { matchedBreakpoints } = useBreakpoint();\n\n    const responsiveColumns =\n      resolveResponsiveValue(columns, matchedBreakpoints) ?? 1;\n    const responsiveNumberOfVisibleMonths =\n      resolveResponsiveValue(numberOfVisibleMonths, matchedBreakpoints) ?? 1;\n\n    const [uncontrolledDefaultVisibleMonth] = useState(() => {\n      const validDate: DateFrameworkType =\n        selectedDate?.startDate && dateAdapter.isValid(selectedDate.startDate)\n          ? selectedDate.startDate\n          : dateAdapter.today(timezone);\n\n      // Ensure that defaultVisibleMonth is used if provided, otherwise use the start of the valid date\n      return defaultVisibleMonth || dateAdapter.startOf(validDate, \"month\");\n    });\n\n    const [visibleMonth, setVisibleMonth] = useControlled({\n      controlled: visibleMonthProp,\n      default: uncontrolledDefaultVisibleMonth,\n      name: \"DatePickerRangeGridPanel\",\n      state: \"visibleMonth\",\n    });\n\n    const getNextFocusedDate = () => {\n      const isOutsideAllowedDates = (date: DateFrameworkType) => {\n        return (\n          dateAdapter.compare(date, minDate) < 0 ||\n          dateAdapter.compare(date, maxDate) > 0\n        );\n      };\n\n      const isDaySelectable = (date: DateFrameworkType) =>\n        !(date && (isDayUnselectable?.(date) || isOutsideAllowedDates(date)));\n\n      const startVisibleMonth = dateAdapter.startOf(visibleMonth, \"month\");\n      const endVisibleMonth = dateAdapter.add(visibleMonth, {\n        months: responsiveNumberOfVisibleMonths - 1,\n      });\n\n      const getVisibleSelectedDate = () => {\n        const startDateStartOfMonth = selectedDate?.startDate\n          ? dateAdapter.startOf(selectedDate.startDate, \"month\")\n          : null;\n        const endDateStartOfMonth = selectedDate?.endDate\n          ? dateAdapter.startOf(selectedDate.endDate, \"month\")\n          : null;\n        if (\n          selectedDate?.startDate &&\n          startDateStartOfMonth &&\n          dateAdapter.compare(startDateStartOfMonth, startVisibleMonth) >= 0 &&\n          dateAdapter.compare(startDateStartOfMonth, endVisibleMonth) <= 0 &&\n          isDaySelectable(selectedDate?.startDate)\n        ) {\n          return selectedDate?.startDate;\n        }\n        if (\n          selectedDate?.endDate &&\n          endDateStartOfMonth &&\n          dateAdapter.compare(endDateStartOfMonth, startVisibleMonth) >= 0 &&\n          dateAdapter.compare(endDateStartOfMonth, endVisibleMonth) <= 0 &&\n          isDaySelectable(selectedDate?.endDate)\n        ) {\n          return selectedDate?.endDate;\n        }\n        return null;\n      };\n\n      const focusSelectedDate = getVisibleSelectedDate();\n      if (focusSelectedDate) {\n        return focusSelectedDate;\n      }\n\n      // Today\n      const today = dateAdapter.today(timezone);\n      const todayStartOfMonth = dateAdapter.startOf(today, \"month\");\n      if (\n        dateAdapter.compare(todayStartOfMonth, startVisibleMonth) >= 0 &&\n        dateAdapter.compare(todayStartOfMonth, endVisibleMonth) <= 0 &&\n        isDaySelectable(today)\n      ) {\n        return today;\n      }\n\n      // First selectable date across visible months\n      const getFirstSelectableDate = (\n        startMonth: DateFrameworkType,\n        numberOfMonths: number,\n      ) => {\n        for (let i = 0; i < numberOfMonths; i++) {\n          const currentMonth = dateAdapter.add(startMonth, { months: i });\n          const firstSelectableDate = generateDatesForMonth(\n            dateAdapter,\n            currentMonth,\n          ).find((visibleDay) => isDaySelectable(visibleDay));\n\n          if (firstSelectableDate) {\n            return firstSelectableDate;\n          }\n        }\n\n        return null;\n      };\n\n      return getFirstSelectableDate(\n        startVisibleMonth,\n        responsiveNumberOfVisibleMonths,\n      );\n    };\n\n    const handleSelectionChange = useCallback(\n      (\n        event: SyntheticEvent,\n        newDate: SingleDateSelection | DateRangeSelection | null,\n      ) => {\n        const dateRange = newDate as DateRangeSelection | null;\n        select(event, dateRange);\n        onSelectionChange?.(event, dateRange);\n      },\n      [onSelectionChange, select],\n    );\n\n    const handleHoveredDateChange = useCallback(\n      (event: SyntheticEvent, newHoveredDate: DateFrameworkType | null) => {\n        setHoveredDate(newHoveredDate);\n        onHoveredDateChange?.(event, newHoveredDate);\n      },\n      [onHoveredDateChange],\n    );\n\n    const handleVisibleMonthChange = useCallback(\n      (event: SyntheticEvent | null, newVisibleMonth: DateFrameworkType) => {\n        setVisibleMonth(newVisibleMonth);\n        onVisibleMonthChange?.(event, newVisibleMonth);\n      },\n      [onVisibleMonthChange],\n    );\n\n    const handleFocusedDateChange = useCallback(\n      (event: SyntheticEvent | null, newFocusedDate: DateFrameworkType) => {\n        setFocusedDate(newFocusedDate);\n        if (!newFocusedDate) {\n          onFocusedDateChange?.(event, newFocusedDate);\n          return;\n        }\n\n        const startOfFocusedMonth = dateAdapter.startOf(\n          newFocusedDate,\n          \"month\",\n        );\n        const lastVisibleMonth = dateAdapter.add(visibleMonth, {\n          months: responsiveNumberOfVisibleMonths - 1,\n        });\n\n        const isBeforeVisibleMonth =\n          dateAdapter.compare(startOfFocusedMonth, visibleMonth) < 0;\n        const isAfterLastVisibleMonth =\n          dateAdapter.compare(startOfFocusedMonth, lastVisibleMonth) > 0;\n\n        if (isBeforeVisibleMonth) {\n          handleVisibleMonthChange(event, startOfFocusedMonth);\n        } else if (isAfterLastVisibleMonth) {\n          const newLastVisibleMonth = dateAdapter.subtract(\n            startOfFocusedMonth,\n            { months: responsiveNumberOfVisibleMonths - 1 },\n          );\n          handleVisibleMonthChange(event, newLastVisibleMonth);\n        }\n        onFocusedDateChange?.(event, newFocusedDate);\n      },\n      [\n        dateAdapter,\n        handleVisibleMonthChange,\n        onFocusedDateChange,\n        responsiveNumberOfVisibleMonths,\n        visibleMonth,\n      ],\n    );\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: only run when focus/min/max date changes\n    useIsomorphicLayoutEffect(() => {\n      // Called when the overlay opens or the focus shifts between trigger and overlay\n      if (focused && !calendarGridFocused.current) {\n        setFocusedDate((prevFocusedDate: typeof focusedDate) => {\n          if (!prevFocusedDate) {\n            return getNextFocusedDate();\n          }\n          return prevFocusedDate;\n        });\n      }\n      calendarGridFocused.current = focused;\n    }, [focused]);\n\n    const calendarProps = {\n      visibleMonth,\n      focusedDateRef: initialFocusRef,\n      focusedDate: calendarGridFocused?.current ? focusedDate : null,\n      hoveredDate,\n      numberOfVisibleMonths: responsiveNumberOfVisibleMonths,\n      onFocusedDateChange: handleFocusedDateChange,\n      onHoveredDateChange: handleHoveredDateChange,\n      onSelectionChange: handleSelectionChange,\n      onVisibleMonthChange: handleVisibleMonthChange,\n      hideOutOfRangeDates: true,\n      isDayHighlighted,\n      isDayUnselectable,\n      selectedDate,\n      minDate,\n      maxDate,\n      timezone,\n      ...CalendarProps,\n    };\n\n    return (\n      <StackLayout\n        separators\n        gap={0}\n        className={clsx(className, withBaseName(\"container\"))}\n        ref={ref}\n        {...rest}\n      >\n        {helperText && (\n          <FlexItem className={withBaseName(\"header\")}>\n            <FormFieldHelperText>{helperText}</FormFieldHelperText>\n          </FlexItem>\n        )}\n        <FlexLayout gap={0}>\n          <FormFieldContext.Provider value={{} as FormFieldContextValue}>\n            <Calendar\n              selectionVariant={\"range\"}\n              {...(calendarProps as Partial<CalendarRangeProps>)}\n            >\n              <CalendarNavigation {...CalendarNavigationProps} />\n              <CalendarGrid\n                columns={responsiveColumns}\n                {...CalendarGridProps}\n              />\n            </Calendar>\n          </FormFieldContext.Provider>\n        </FlexLayout>\n      </StackLayout>\n    );\n  },\n);\n"],"names":["DatePickerRangeGridPanel","datePickerPanelCss"],"mappings":";;;;;;;;;;;;;;;;;;AA0CA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA;AAyBhD,MAAM,wBAAA,GAA2B,UAAA;AAAA,EACtC,SAASA,yBAAAA,CACP,KAAA,EACA,GAAA,EACA;AACA,IAAA,MAAM,EAAE,WAAA,EAAY,GAAI,eAAA,EAAgB;AAExC,IAAA,MAAM;AAAA,MACJ,aAAA;AAAA,MACA,uBAAA;AAAA,MACA,iBAAA;AAAA,MACA,SAAA;AAAA,MACA,mBAAA;AAAA,MACA,YAAA,EAAc,gBAAA;AAAA,MACd,mBAAA;AAAA,MACA,mBAAA;AAAA,MACA,oBAAA;AAAA,MACA,UAAA;AAAA,MACA,iBAAA;AAAA,MACA,qBAAA,GAAwB,CAAA;AAAA,MACxB,OAAA,GAAU,qBAAA;AAAA,MACV,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,mCAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,kBAAkB,oBAAA,CAAqB;AAAA,MAC3C,gBAAA,EAAkB;AAAA,KACnB,CAAA;AAED,IAAA,MAAM;AAAA,MACJ,KAAA,EAAO,EAAE,OAAA,EAAS,eAAA;AAAgB,QAChC,oBAAA,EAAqB;AAEzB,IAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,QAAA;AAAA,MACpC;AAAA,KACF;AACA,IAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,QAAA;AAAA,MACpC;AAAA,KACF;AACA,IAAA,MAAM,mBAAA,GAAsB,OAAO,KAAK,CAAA;AAExC,IAAA,MAAM;AAAA,MACJ,KAAA,EAAO;AAAA,QACL,QAAA;AAAA,QACA,YAAA,GAAe,IAAA;AAAA,QACf,UAAU,WAAA,CAAY,OAAA,CAAQ,YAAY,KAAA,CAAM,QAAQ,GAAG,OAAO,CAAA;AAAA,QAClE,UAAU,WAAA,CAAY,GAAA,CAAI,SAAS,EAAE,MAAA,EAAQ,GAAG;AAAA,OAClD;AAAA,MACA,OAAA,EAAS,EAAE,MAAA,EAAQ,gBAAA,EAAkB,iBAAA;AAAkB,KACzD,GAAI,eAAA;AAEJ,IAAA,MAAM,EAAE,kBAAA,EAAmB,GAAI,aAAA,EAAc;AAE7C,IAAA,MAAM,iBAAA,GACJ,sBAAA,CAAuB,OAAA,EAAS,kBAAkB,CAAA,IAAK,CAAA;AACzD,IAAA,MAAM,+BAAA,GACJ,sBAAA,CAAuB,qBAAA,EAAuB,kBAAkB,CAAA,IAAK,CAAA;AAEvE,IAAA,MAAM,CAAC,+BAA+B,CAAA,GAAI,QAAA,CAAS,MAAM;AACvD,MAAA,MAAM,SAAA,GAAA,CACJ,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,SAAA,KAAa,WAAA,CAAY,OAAA,CAAQ,YAAA,CAAa,SAAS,CAAA,GACjE,YAAA,CAAa,SAAA,GACb,WAAA,CAAY,KAAA,CAAM,QAAQ,CAAA;AAGhC,MAAA,OAAO,mBAAA,IAAuB,WAAA,CAAY,OAAA,CAAQ,SAAA,EAAW,OAAO,CAAA;AAAA,IACtE,CAAC,CAAA;AAED,IAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,aAAA,CAAc;AAAA,MACpD,UAAA,EAAY,gBAAA;AAAA,MACZ,OAAA,EAAS,+BAAA;AAAA,MACT,IAAA,EAAM,0BAAA;AAAA,MACN,KAAA,EAAO;AAAA,KACR,CAAA;AAED,IAAA,MAAM,qBAAqB,MAAM;AAC/B,MAAA,MAAM,qBAAA,GAAwB,CAAC,IAAA,KAA4B;AACzD,QAAA,OACE,WAAA,CAAY,OAAA,CAAQ,IAAA,EAAM,OAAO,CAAA,GAAI,KACrC,WAAA,CAAY,OAAA,CAAQ,IAAA,EAAM,OAAO,CAAA,GAAI,CAAA;AAAA,MAEzC,CAAA;AAEA,MAAA,MAAM,eAAA,GAAkB,CAAC,IAAA,KACvB,EAAE,UAAS,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAoB,IAAA,CAAA,KAAS,sBAAsB,IAAI,CAAA,CAAA,CAAA;AAEpE,MAAA,MAAM,iBAAA,GAAoB,WAAA,CAAY,OAAA,CAAQ,YAAA,EAAc,OAAO,CAAA;AACnE,MAAA,MAAM,eAAA,GAAkB,WAAA,CAAY,GAAA,CAAI,YAAA,EAAc;AAAA,QACpD,QAAQ,+BAAA,GAAkC;AAAA,OAC3C,CAAA;AAED,MAAA,MAAM,yBAAyB,MAAM;AACnC,QAAA,MAAM,qBAAA,GAAA,CAAwB,6CAAc,SAAA,IACxC,WAAA,CAAY,QAAQ,YAAA,CAAa,SAAA,EAAW,OAAO,CAAA,GACnD,IAAA;AACJ,QAAA,MAAM,mBAAA,GAAA,CAAsB,6CAAc,OAAA,IACtC,WAAA,CAAY,QAAQ,YAAA,CAAa,OAAA,EAAS,OAAO,CAAA,GACjD,IAAA;AACJ,QAAA,IAAA,CACE,6CAAc,SAAA,KACd,qBAAA,IACA,YAAY,OAAA,CAAQ,qBAAA,EAAuB,iBAAiB,CAAA,IAAK,CAAA,IACjE,WAAA,CAAY,OAAA,CAAQ,uBAAuB,eAAe,CAAA,IAAK,KAC/D,eAAA,CAAgB,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,SAAS,CAAA,EACvC;AACA,UAAA,OAAO,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,SAAA;AAAA,QACvB;AACA,QAAA,IAAA,CACE,6CAAc,OAAA,KACd,mBAAA,IACA,YAAY,OAAA,CAAQ,mBAAA,EAAqB,iBAAiB,CAAA,IAAK,CAAA,IAC/D,WAAA,CAAY,OAAA,CAAQ,qBAAqB,eAAe,CAAA,IAAK,KAC7D,eAAA,CAAgB,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,OAAO,CAAA,EACrC;AACA,UAAA,OAAO,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,OAAA;AAAA,QACvB;AACA,QAAA,OAAO,IAAA;AAAA,MACT,CAAA;AAEA,MAAA,MAAM,oBAAoB,sBAAA,EAAuB;AACjD,MAAA,IAAI,iBAAA,EAAmB;AACrB,QAAA,OAAO,iBAAA;AAAA,MACT;AAGA,MAAA,MAAM,KAAA,GAAQ,WAAA,CAAY,KAAA,CAAM,QAAQ,CAAA;AACxC,MAAA,MAAM,iBAAA,GAAoB,WAAA,CAAY,OAAA,CAAQ,KAAA,EAAO,OAAO,CAAA;AAC5D,MAAA,IACE,WAAA,CAAY,OAAA,CAAQ,iBAAA,EAAmB,iBAAiB,KAAK,CAAA,IAC7D,WAAA,CAAY,OAAA,CAAQ,iBAAA,EAAmB,eAAe,CAAA,IAAK,CAAA,IAC3D,eAAA,CAAgB,KAAK,CAAA,EACrB;AACA,QAAA,OAAO,KAAA;AAAA,MACT;AAGA,MAAA,MAAM,sBAAA,GAAyB,CAC7B,UAAA,EACA,cAAA,KACG;AACH,QAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,cAAA,EAAgB,CAAA,EAAA,EAAK;AACvC,UAAA,MAAM,eAAe,WAAA,CAAY,GAAA,CAAI,YAAY,EAAE,MAAA,EAAQ,GAAG,CAAA;AAC9D,UAAA,MAAM,mBAAA,GAAsB,qBAAA;AAAA,YAC1B,WAAA;AAAA,YACA;AAAA,YACA,IAAA,CAAK,CAAC,UAAA,KAAe,eAAA,CAAgB,UAAU,CAAC,CAAA;AAElD,UAAA,IAAI,mBAAA,EAAqB;AACvB,YAAA,OAAO,mBAAA;AAAA,UACT;AAAA,QACF;AAEA,QAAA,OAAO,IAAA;AAAA,MACT,CAAA;AAEA,MAAA,OAAO,sBAAA;AAAA,QACL,iBAAA;AAAA,QACA;AAAA,OACF;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,qBAAA,GAAwB,WAAA;AAAA,MAC5B,CACE,OACA,OAAA,KACG;AACH,QAAA,MAAM,SAAA,GAAY,OAAA;AAClB,QAAA,MAAA,CAAO,OAAO,SAAS,CAAA;AACvB,QAAA,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAoB,KAAA,EAAO,SAAA,CAAA;AAAA,MAC7B,CAAA;AAAA,MACA,CAAC,mBAAmB,MAAM;AAAA,KAC5B;AAEA,IAAA,MAAM,uBAAA,GAA0B,WAAA;AAAA,MAC9B,CAAC,OAAuB,cAAA,KAA6C;AACnE,QAAA,cAAA,CAAe,cAAc,CAAA;AAC7B,QAAA,mBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,mBAAA,CAAsB,KAAA,EAAO,cAAA,CAAA;AAAA,MAC/B,CAAA;AAAA,MACA,CAAC,mBAAmB;AAAA,KACtB;AAEA,IAAA,MAAM,wBAAA,GAA2B,WAAA;AAAA,MAC/B,CAAC,OAA8B,eAAA,KAAuC;AACpE,QAAA,eAAA,CAAgB,eAAe,CAAA;AAC/B,QAAA,oBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,oBAAA,CAAuB,KAAA,EAAO,eAAA,CAAA;AAAA,MAChC,CAAA;AAAA,MACA,CAAC,oBAAoB;AAAA,KACvB;AAEA,IAAA,MAAM,uBAAA,GAA0B,WAAA;AAAA,MAC9B,CAAC,OAA8B,cAAA,KAAsC;AACnE,QAAA,cAAA,CAAe,cAAc,CAAA;AAC7B,QAAA,IAAI,CAAC,cAAA,EAAgB;AACnB,UAAA,mBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,mBAAA,CAAsB,KAAA,EAAO,cAAA,CAAA;AAC7B,UAAA;AAAA,QACF;AAEA,QAAA,MAAM,sBAAsB,WAAA,CAAY,OAAA;AAAA,UACtC,cAAA;AAAA,UACA;AAAA,SACF;AACA,QAAA,MAAM,gBAAA,GAAmB,WAAA,CAAY,GAAA,CAAI,YAAA,EAAc;AAAA,UACrD,QAAQ,+BAAA,GAAkC;AAAA,SAC3C,CAAA;AAED,QAAA,MAAM,oBAAA,GACJ,WAAA,CAAY,OAAA,CAAQ,mBAAA,EAAqB,YAAY,CAAA,GAAI,CAAA;AAC3D,QAAA,MAAM,uBAAA,GACJ,WAAA,CAAY,OAAA,CAAQ,mBAAA,EAAqB,gBAAgB,CAAA,GAAI,CAAA;AAE/D,QAAA,IAAI,oBAAA,EAAsB;AACxB,UAAA,wBAAA,CAAyB,OAAO,mBAAmB,CAAA;AAAA,QACrD,WAAW,uBAAA,EAAyB;AAClC,UAAA,MAAM,sBAAsB,WAAA,CAAY,QAAA;AAAA,YACtC,mBAAA;AAAA,YACA,EAAE,MAAA,EAAQ,+BAAA,GAAkC,CAAA;AAAE,WAChD;AACA,UAAA,wBAAA,CAAyB,OAAO,mBAAmB,CAAA;AAAA,QACrD;AACA,QAAA,mBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,mBAAA,CAAsB,KAAA,EAAO,cAAA,CAAA;AAAA,MAC/B,CAAA;AAAA,MACA;AAAA,QACE,WAAA;AAAA,QACA,wBAAA;AAAA,QACA,mBAAA;AAAA,QACA,+BAAA;AAAA,QACA;AAAA;AACF,KACF;AAGA,IAAA,yBAAA,CAA0B,MAAM;AAE9B,MAAA,IAAI,OAAA,IAAW,CAAC,mBAAA,CAAoB,OAAA,EAAS;AAC3C,QAAA,cAAA,CAAe,CAAC,eAAA,KAAwC;AACtD,UAAA,IAAI,CAAC,eAAA,EAAiB;AACpB,YAAA,OAAO,kBAAA,EAAmB;AAAA,UAC5B;AACA,UAAA,OAAO,eAAA;AAAA,QACT,CAAC,CAAA;AAAA,MACH;AACA,MAAA,mBAAA,CAAoB,OAAA,GAAU,OAAA;AAAA,IAChC,CAAA,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,IAAA,MAAM,aAAA,GAAgB;AAAA,MACpB,YAAA;AAAA,MACA,cAAA,EAAgB,eAAA;AAAA,MAChB,WAAA,EAAA,CAAa,mBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,mBAAA,CAAqB,OAAA,IAAU,WAAA,GAAc,IAAA;AAAA,MAC1D,WAAA;AAAA,MACA,qBAAA,EAAuB,+BAAA;AAAA,MACvB,mBAAA,EAAqB,uBAAA;AAAA,MACrB,mBAAA,EAAqB,uBAAA;AAAA,MACrB,iBAAA,EAAmB,qBAAA;AAAA,MACnB,oBAAA,EAAsB,wBAAA;AAAA,MACtB,mBAAA,EAAqB,IAAA;AAAA,MACrB,gBAAA;AAAA,MACA,iBAAA;AAAA,MACA,YAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,GAAG;AAAA,KACL;AAEA,IAAA,uBACE,IAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAU,IAAA;AAAA,QACV,GAAA,EAAK,CAAA;AAAA,QACL,SAAA,EAAW,IAAA,CAAK,SAAA,EAAW,YAAA,CAAa,WAAW,CAAC,CAAA;AAAA,QACpD,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,UAAA,oBACC,GAAA,CAAC,YAAS,SAAA,EAAW,YAAA,CAAa,QAAQ,CAAA,EACxC,QAAA,kBAAA,GAAA,CAAC,mBAAA,EAAA,EAAqB,QAAA,EAAA,UAAA,EAAW,CAAA,EACnC,CAAA;AAAA,0BAEF,GAAA,CAAC,UAAA,EAAA,EAAW,GAAA,EAAK,CAAA,EACf,QAAA,kBAAA,GAAA,CAAC,iBAAiB,QAAA,EAAjB,EAA0B,KAAA,EAAO,EAAC,EACjC,QAAA,kBAAA,IAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,gBAAA,EAAkB,OAAA;AAAA,cACjB,GAAI,aAAA;AAAA,cAEL,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,kBAAA,EAAA,EAAoB,GAAG,uBAAA,EAAyB,CAAA;AAAA,gCACjD,GAAA;AAAA,kBAAC,YAAA;AAAA,kBAAA;AAAA,oBACC,OAAA,EAAS,iBAAA;AAAA,oBACR,GAAG;AAAA;AAAA;AACN;AAAA;AAAA,aAEJ,CAAA,EACF;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

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

@@ -0,0 +1,203 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useIcon, useControlled, Button } from '@salt-ds/core';
+import { DateDetailError } from '@salt-ds/date-adapters';
+import { clsx } from 'clsx';
+import { forwardRef, useRef, useEffect, useCallback } from 'react';
+import { DateInputRange } from '../date-input/DateInputRange.js';
+import '../date-input/DateInputSingle.js';
+import { useLocalization } from '../localization-provider/LocalizationProvider.js';
+import { useDatePickerContext } from './DatePickerContext.js';
+import { useDatePickerOverlay } from './DatePickerOverlayProvider.js';
+
+const withBaseName = makePrefixer("saltDatePickerRangeInput");
+function defaultRangeValidator(dateAdapter, date, details, minDate, maxDate) {
+  const { startDate, endDate } = date || {};
+  if (!startDate) {
+    details.startDate = details.startDate || {};
+    details.startDate.errors = details.startDate.errors || [];
+    const unsetStartDateError = details.startDate.errors.find(
+      (err) => err.type === DateDetailError.UNSET
+    );
+    if (unsetStartDateError) {
+      unsetStartDateError.message = "no start date defined";
+    } else {
+      details.startDate.errors.push({
+        type: DateDetailError.UNSET,
+        message: "no start date defined"
+      });
+    }
+  }
+  if (!endDate) {
+    details.endDate = details.endDate || {};
+    details.endDate.errors = details.endDate.errors || [];
+    const unsetEndDateError = details.endDate.errors.find(
+      (err) => err.type === DateDetailError.UNSET
+    );
+    if (unsetEndDateError) {
+      unsetEndDateError.message = "no end date defined";
+    } else {
+      details.endDate.errors.push({
+        type: DateDetailError.UNSET,
+        message: "no end date defined"
+      });
+    }
+  }
+  if (dateAdapter.isValid(startDate) && dateAdapter.isValid(endDate) && dateAdapter.compare(startDate, endDate) > 0) {
+    details.startDate = details.startDate || {};
+    details.startDate.errors = details.startDate.errors || [];
+    details.startDate.errors.push({
+      type: "greater-than-end-date",
+      message: "start date after end date"
+    });
+  }
+  if (minDate && dateAdapter.isValid(startDate) && dateAdapter.compare(startDate, minDate) < 0) {
+    details.startDate = details.startDate || {};
+    details.startDate.errors = details.startDate.errors || [];
+    details.startDate.errors.push({
+      type: "min-date",
+      message: "is before min date"
+    });
+  }
+  if (maxDate && dateAdapter.isValid(startDate) && dateAdapter.compare(startDate, maxDate) > 0) {
+    details.startDate = details.startDate || {};
+    details.startDate.errors = details.startDate.errors || [];
+    details.startDate.errors.push({
+      type: "max-date",
+      message: "is after max date"
+    });
+  }
+  if (minDate && dateAdapter.isValid(endDate) && dateAdapter.compare(endDate, minDate) < 0) {
+    details.endDate = details.endDate || {};
+    details.endDate.errors = details.endDate.errors || [];
+    details.endDate.errors.push({
+      type: "max-date",
+      message: "is before min date"
+    });
+  }
+  if (maxDate && dateAdapter.isValid(endDate) && dateAdapter.compare(endDate, maxDate) > 0) {
+    details.endDate = details.endDate || {};
+    details.endDate.errors = details.endDate.errors || [];
+    details.endDate.errors.push({
+      type: "max-date",
+      message: "is after max date"
+    });
+  }
+  return details;
+}
+const DatePickerRangeInput = forwardRef((props, ref) => {
+  const { dateAdapter } = useLocalization();
+  const {
+    className,
+    endInputProps,
+    startInputProps,
+    defaultValue,
+    format = "DD MMM YYYY",
+    value: valueProp,
+    validate,
+    onChange,
+    onDateValueChange,
+    ...rest
+  } = props;
+  const { CalendarIcon } = useIcon();
+  const {
+    state: {
+      selectedDate,
+      disabled,
+      readOnly,
+      cancelled,
+      minDate,
+      maxDate,
+      timezone
+    },
+    helpers: { select }
+  } = useDatePickerContext({
+    selectionVariant: "range"
+  });
+  const {
+    state: { open },
+    helpers: { setOpen }
+  } = useDatePickerOverlay();
+  const previousValue = useRef();
+  const [value, setValue] = useControlled({
+    controlled: valueProp,
+    default: defaultValue,
+    name: "DatePickerRangeInput",
+    state: "dateValue"
+  });
+  useEffect(() => {
+    setValue({
+      startDate: !(selectedDate == null ? void 0 : selectedDate.startDate) ? "" : (selectedDate == null ? void 0 : selectedDate.startDate) && dateAdapter.isValid(selectedDate.startDate) ? dateAdapter.format(selectedDate.startDate, format) : value == null ? void 0 : value.startDate,
+      endDate: !(selectedDate == null ? void 0 : selectedDate.endDate) ? "" : (selectedDate == null ? void 0 : selectedDate.endDate) && dateAdapter.isValid(selectedDate.endDate) ? dateAdapter.format(selectedDate.endDate, format) : value == null ? void 0 : value.endDate
+    });
+  }, [dateAdapter, format, selectedDate]);
+  const handleCalendarButton = useCallback(
+    (event) => {
+      event.persist();
+      setOpen(!open, event.nativeEvent, "click");
+      event.stopPropagation();
+    },
+    [open, setOpen]
+  );
+  const handleDateChange = useCallback(
+    (event, date, details) => {
+      const validatedDetails = validate ? validate(date, details) : defaultRangeValidator(dateAdapter, date, details, minDate, maxDate);
+      select(event, date, validatedDetails);
+    },
+    [dateAdapter, select, minDate, maxDate, validate]
+  );
+  const handleDateValueChange = useCallback(
+    (event, newDateValue) => {
+      setValue(newDateValue);
+      onDateValueChange == null ? void 0 : onDateValueChange(event, newDateValue);
+    },
+    [onDateValueChange]
+  );
+  useEffect(() => {
+    if (open) {
+      previousValue.current = value;
+    }
+  }, [open]);
+  useEffect(() => {
+    if (cancelled) {
+      setValue(previousValue.current);
+    }
+  }, [cancelled]);
+  return /* @__PURE__ */ jsx(
+    DateInputRange,
+    {
+      value: value ?? {
+        startDate: "",
+        endDate: ""
+      },
+      className: clsx(withBaseName(), className),
+      date: selectedDate ?? null,
+      startInputProps,
+      endInputProps,
+      readOnly,
+      disabled,
+      ref,
+      onDateChange: handleDateChange,
+      onDateValueChange: handleDateValueChange,
+      onChange,
+      endAdornment: !readOnly && /* @__PURE__ */ jsx(
+        Button,
+        {
+          appearance: "transparent",
+          sentiment: "neutral",
+          onClick: handleCalendarButton,
+          disabled,
+          "aria-haspopup": "dialog",
+          "aria-label": "Open Calendar",
+          "aria-expanded": open,
+          children: /* @__PURE__ */ jsx(CalendarIcon, { "aria-hidden": true })
+        }
+      ),
+      format,
+      timezone,
+      ...rest
+    }
+  );
+});
+
+export { DatePickerRangeInput, defaultRangeValidator };
+//# sourceMappingURL=DatePickerRangeInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerRangeInput.js","sources":["../src/date-picker/DatePickerRangeInput.tsx"],"sourcesContent":["import { Button, makePrefixer, useControlled, useIcon } from \"@salt-ds/core\";\nimport {\n  DateDetailError,\n  type DateFrameworkType,\n  type SaltDateAdapter,\n} from \"@salt-ds/date-adapters\";\nimport { clsx } from \"clsx\";\nimport {\n  forwardRef,\n  type MouseEventHandler,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport type { DateRangeSelection } from \"../calendar\";\nimport {\n  DateInputRange,\n  type DateInputRangeDetails,\n  type DateInputRangeProps,\n  type DateInputRangeValue,\n} from \"../date-input\";\nimport { useLocalization } from \"../localization-provider\";\nimport {\n  type RangeDatePickerState,\n  useDatePickerContext,\n} from \"./DatePickerContext\";\nimport { useDatePickerOverlay } from \"./DatePickerOverlayProvider\";\n\nconst withBaseName = makePrefixer(\"saltDatePickerRangeInput\");\n\n/**\n * Props for the DatePickerRangeInput component.\n */\nexport interface DatePickerRangeInputProps extends DateInputRangeProps {\n  /**\n   * Function to validate the entered date\n   * @param date - The selected date\n   * @param details - The details of date selection, either a valid date or error\n   * @returns updated DateInputRangeDetails details\n   */\n  validate?: (\n    date: DateRangeSelection | null,\n    details: DateInputRangeDetails,\n  ) => DateInputRangeDetails;\n}\n\nexport function defaultRangeValidator(\n  dateAdapter: SaltDateAdapter,\n  date: DateRangeSelection | null,\n  details: DateInputRangeDetails,\n  minDate?: DateFrameworkType,\n  maxDate?: DateFrameworkType,\n): DateInputRangeDetails {\n  const { startDate, endDate } = date || {};\n\n  if (!startDate) {\n    details.startDate = details.startDate || {};\n    details.startDate.errors = details.startDate.errors || [];\n    const unsetStartDateError = details.startDate.errors.find(\n      (err) => err.type === DateDetailError.UNSET,\n    );\n    if (unsetStartDateError) {\n      unsetStartDateError.message = \"no start date defined\";\n    } else {\n      details.startDate.errors.push({\n        type: DateDetailError.UNSET,\n        message: \"no start date defined\",\n      });\n    }\n  }\n\n  if (!endDate) {\n    details.endDate = details.endDate || {};\n    details.endDate.errors = details.endDate.errors || [];\n    const unsetEndDateError = details.endDate.errors.find(\n      (err) => err.type === DateDetailError.UNSET,\n    );\n    if (unsetEndDateError) {\n      unsetEndDateError.message = \"no end date defined\";\n    } else {\n      details.endDate.errors.push({\n        type: DateDetailError.UNSET,\n        message: \"no end date defined\",\n      });\n    }\n  }\n\n  // If startDate is after endDate\n  if (\n    dateAdapter.isValid(startDate) &&\n    dateAdapter.isValid(endDate) &&\n    dateAdapter.compare(startDate, endDate) > 0\n  ) {\n    details.startDate = details.startDate || {};\n    details.startDate.errors = details.startDate.errors || [];\n    details.startDate.errors.push({\n      type: \"greater-than-end-date\",\n      message: \"start date after end date\",\n    });\n  }\n  // If startDate is before minDate\n  if (\n    minDate &&\n    dateAdapter.isValid(startDate) &&\n    dateAdapter.compare(startDate, minDate) < 0\n  ) {\n    details.startDate = details.startDate || {};\n    details.startDate.errors = details.startDate.errors || [];\n    details.startDate.errors.push({\n      type: \"min-date\",\n      message: \"is before min date\",\n    });\n  }\n  // If startDate is after maxDate\n  if (\n    maxDate &&\n    dateAdapter.isValid(startDate) &&\n    dateAdapter.compare(startDate, maxDate) > 0\n  ) {\n    details.startDate = details.startDate || {};\n    details.startDate.errors = details.startDate.errors || [];\n    details.startDate.errors.push({\n      type: \"max-date\",\n      message: \"is after max date\",\n    });\n  }\n  if (\n    minDate &&\n    dateAdapter.isValid(endDate) &&\n    dateAdapter.compare(endDate, minDate) < 0\n  ) {\n    details.endDate = details.endDate || {};\n    details.endDate.errors = details.endDate.errors || [];\n    details.endDate.errors.push({\n      type: \"max-date\",\n      message: \"is before min date\",\n    });\n  }\n  // If endDate is after maxDate\n  if (\n    maxDate &&\n    dateAdapter.isValid(endDate) &&\n    dateAdapter.compare(endDate, maxDate) > 0\n  ) {\n    details.endDate = details.endDate || {};\n    details.endDate.errors = details.endDate.errors || [];\n    details.endDate.errors.push({\n      type: \"max-date\",\n      message: \"is after max date\",\n    });\n  }\n  return details;\n}\n\nexport const DatePickerRangeInput = forwardRef<\n  HTMLDivElement,\n  DatePickerRangeInputProps\n>((props: DatePickerRangeInputProps, ref: React.Ref<HTMLDivElement>) => {\n  const { dateAdapter } = useLocalization();\n  const {\n    className,\n    endInputProps,\n    startInputProps,\n    defaultValue,\n    format = \"DD MMM YYYY\",\n    value: valueProp,\n    validate,\n    onChange,\n    onDateValueChange,\n    ...rest\n  } = props;\n\n  const { CalendarIcon } = useIcon();\n\n  const {\n    state: {\n      selectedDate,\n      disabled,\n      readOnly,\n      cancelled,\n      minDate,\n      maxDate,\n      timezone,\n    },\n    helpers: { select },\n  } = useDatePickerContext({\n    selectionVariant: \"range\",\n  }) as RangeDatePickerState;\n  const {\n    state: { open },\n    helpers: { setOpen },\n  } = useDatePickerOverlay();\n\n  const previousValue = useRef<typeof valueProp>();\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"DatePickerRangeInput\",\n    state: \"dateValue\",\n  });\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: run when date changes to sync the value\n  useEffect(() => {\n    setValue({\n      startDate: !selectedDate?.startDate\n        ? \"\"\n        : selectedDate?.startDate && dateAdapter.isValid(selectedDate.startDate)\n          ? dateAdapter.format(selectedDate.startDate, format)\n          : value?.startDate,\n      endDate: !selectedDate?.endDate\n        ? \"\"\n        : selectedDate?.endDate && dateAdapter.isValid(selectedDate.endDate)\n          ? dateAdapter.format(selectedDate.endDate, format)\n          : value?.endDate,\n    });\n  }, [dateAdapter, format, selectedDate]);\n\n  const handleCalendarButton: MouseEventHandler<HTMLButtonElement> =\n    useCallback(\n      (event) => {\n        event.persist();\n        setOpen(!open, event.nativeEvent, \"click\");\n        event.stopPropagation();\n      },\n      [open, setOpen],\n    );\n\n  const handleDateChange = useCallback(\n    (\n      event: SyntheticEvent,\n      date: DateRangeSelection | null,\n      details: DateInputRangeDetails,\n    ) => {\n      const validatedDetails = validate\n        ? validate(date, details)\n        : defaultRangeValidator(dateAdapter, date, details, minDate, maxDate);\n      select(event, date, validatedDetails);\n    },\n    [dateAdapter, select, minDate, maxDate, validate],\n  );\n\n  const handleDateValueChange = useCallback(\n    (event: SyntheticEvent | null, newDateValue: DateInputRangeValue) => {\n      setValue(newDateValue);\n      onDateValueChange?.(event, newDateValue);\n    },\n    [onDateValueChange],\n  );\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: should run when open changes and not selected date or value\n  useEffect(() => {\n    if (open) {\n      previousValue.current = value;\n    }\n  }, [open]);\n\n  useEffect(() => {\n    if (cancelled) {\n      setValue(previousValue.current);\n    }\n  }, [cancelled]);\n\n  return (\n    <DateInputRange\n      value={\n        value ?? {\n          startDate: \"\",\n          endDate: \"\",\n        }\n      }\n      className={clsx(withBaseName(), className)}\n      date={selectedDate ?? null}\n      startInputProps={startInputProps}\n      endInputProps={endInputProps}\n      readOnly={readOnly}\n      disabled={disabled}\n      ref={ref}\n      onDateChange={handleDateChange}\n      onDateValueChange={handleDateValueChange}\n      onChange={onChange}\n      endAdornment={\n        !readOnly && (\n          <Button\n            appearance=\"transparent\"\n            sentiment=\"neutral\"\n            onClick={handleCalendarButton}\n            disabled={disabled}\n            aria-haspopup=\"dialog\"\n            aria-label=\"Open Calendar\"\n            aria-expanded={open}\n          >\n            <CalendarIcon aria-hidden />\n          </Button>\n        )\n      }\n      format={format}\n      timezone={timezone}\n      {...rest}\n    />\n  );\n});\n"],"names":[],"mappings":"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"}