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

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

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

package/dist-cjs/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":["makePrefixer","DateDetailError","forwardRef","useLocalization","useIcon","useDatePickerContext","useDatePickerOverlay","useRef","useControlled","useEffect","useCallback","jsx","DateInputRange","clsx","Button"],"mappings":"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"}

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

@@ -0,0 +1,365 @@
+'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 Calendar = require('../calendar/Calendar.js');
+var CalendarGrid = require('../calendar/CalendarGrid.js');
+var CalendarNavigation = require('../calendar/CalendarNavigation.js');
+require('../calendar/CalendarWeekHeader.js');
+var LocalizationProvider = require('../localization-provider/LocalizationProvider.js');
+var utils = require('../calendar/internal/utils.js');
+require('../calendar/useCalendarSelection.js');
+require('../calendar/internal/CalendarContext.js');
+var DatePickerContext = require('./DatePickerContext.js');
+var DatePickerOverlayProvider = require('./DatePickerOverlayProvider.js');
+var DatePickerPanel = require('./DatePickerPanel.css.js');
+
+function getFallbackVisibleMonths(dateAdapter, selectedDate, timezone = "default") {
+  function createConsecutiveRange(date) {
+    const startDate = dateAdapter.startOf(date, "month");
+    const endDate = dateAdapter.add(startDate, { months: 1 });
+    return [startDate, endDate];
+  }
+  if (selectedDate && dateAdapter.isValid(selectedDate == null ? void 0 : selectedDate.startDate)) {
+    const { startDate, endDate } = selectedDate;
+    if (dateAdapter.isValid(endDate)) {
+      return dateAdapter.isSame(startDate, endDate, "month") ? createConsecutiveRange(startDate) : [
+        dateAdapter.startOf(startDate, "month"),
+        dateAdapter.startOf(endDate, "month")
+      ];
+    }
+    return createConsecutiveRange(startDate);
+  }
+  const currentMonth = dateAdapter.startOf(
+    dateAdapter.today(timezone),
+    "month"
+  );
+  return [currentMonth, dateAdapter.add(currentMonth, { months: 1 })];
+}
+const withBaseName = core.makePrefixer("saltDatePickerPanel");
+const DatePickerRangePanel = react.forwardRef(function DatePickerRangePanel2(props, ref) {
+  const { dateAdapter } = LocalizationProvider.useLocalization();
+  const {
+    className,
+    defaultStartVisibleMonth: defaultStartVisibleMonthProp,
+    startVisibleMonth: startVisibleMonthProp,
+    onStartVisibleMonthChange,
+    defaultEndVisibleMonth: defaultEndVisibleMonthProp,
+    endVisibleMonth: endVisibleMonthProp,
+    onEndVisibleMonthChange,
+    helperText,
+    onFocusedDateChange,
+    onHoveredDateChange,
+    onSelectionChange,
+    StartCalendarProps: StartCalendarPropsProp,
+    StartCalendarNavigationProps,
+    StartCalendarGridProps,
+    EndCalendarProps: EndCalendarPropsProp,
+    EndCalendarNavigationProps,
+    EndCalendarGridProps,
+    ...rest
+  } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-date-picker-range-panel",
+    css: DatePickerPanel,
+    window: targetWindow
+  });
+  const calendarsRef = react.useRef(null);
+  const containerRef = core.useForkRef(ref, calendarsRef);
+  const {
+    state: {
+      timezone,
+      selectedDate,
+      minDate = dateAdapter.startOf(dateAdapter.today(timezone), "month"),
+      maxDate = dateAdapter.add(minDate, { months: 1 })
+    },
+    helpers: { select, isDayHighlighted, isDayUnselectable }
+  } = DatePickerContext.useDatePickerContext({
+    selectionVariant: "range"
+  });
+  const {
+    state: { initialFocusRef, focused }
+  } = DatePickerOverlayProvider.useDatePickerOverlay();
+  const [hoveredDate, setHoveredDate] = react.useState(
+    null
+  );
+  const [[fallbackStartVisibleMonth, fallbackEndVisibleMonth]] = react.useState(
+    () => getFallbackVisibleMonths(dateAdapter, selectedDate, timezone)
+  );
+  const [startVisibleMonth, setStartVisibleMonth] = core.useControlled({
+    controlled: startVisibleMonthProp,
+    default: defaultStartVisibleMonthProp || fallbackStartVisibleMonth,
+    name: "DatePickerRangePanel",
+    state: "startVisibleMonth"
+  });
+  const [endVisibleMonth, setEndVisibleMonth] = core.useControlled({
+    controlled: endVisibleMonthProp,
+    default: defaultEndVisibleMonthProp || fallbackEndVisibleMonth,
+    name: "DatePickerRangePanel",
+    state: "endVisibleMonth"
+  });
+  const handleSelectionChange = react.useCallback(
+    (event, newDate) => {
+      select(event, newDate);
+      onSelectionChange == null ? void 0 : onSelectionChange(event, newDate);
+    },
+    [select, onSelectionChange]
+  );
+  const handleHoveredStartDateChange = react.useCallback(
+    (event, newHoveredDate) => {
+      setHoveredDate(newHoveredDate);
+      onHoveredDateChange == null ? void 0 : onHoveredDateChange(event, newHoveredDate);
+    },
+    [onHoveredDateChange]
+  );
+  const handleHoveredEndDateChange = react.useCallback(
+    (event, newHoveredDate) => {
+      setHoveredDate(newHoveredDate);
+      onHoveredDateChange == null ? void 0 : onHoveredDateChange(event, newHoveredDate);
+    },
+    [onHoveredDateChange]
+  );
+  const handleStartVisibleMonthChange = react.useCallback(
+    (event, newVisibleMonth) => {
+      setStartVisibleMonth(newVisibleMonth);
+      if (dateAdapter.compare(newVisibleMonth, endVisibleMonth) >= 0) {
+        setEndVisibleMonth(dateAdapter.add(newVisibleMonth, { months: 1 }));
+      }
+      onStartVisibleMonthChange == null ? void 0 : onStartVisibleMonthChange(event, newVisibleMonth);
+    },
+    [dateAdapter, endVisibleMonth, onStartVisibleMonthChange]
+  );
+  const handleEndVisibleMonthChange = react.useCallback(
+    (event, newVisibleMonth) => {
+      setEndVisibleMonth(newVisibleMonth);
+      if (dateAdapter.compare(newVisibleMonth, startVisibleMonth) <= 0) {
+        setStartVisibleMonth(
+          dateAdapter.startOf(
+            dateAdapter.subtract(newVisibleMonth, { months: 1 }),
+            "month"
+          )
+        );
+      }
+      onEndVisibleMonthChange == null ? void 0 : onEndVisibleMonthChange(event, newVisibleMonth);
+    },
+    [dateAdapter, startVisibleMonth, onEndVisibleMonthChange]
+  );
+  const calendarSelectedDate = {
+    startDate: selectedDate && dateAdapter.isValid(selectedDate.startDate) ? selectedDate.startDate : null,
+    endDate: selectedDate && dateAdapter.isValid(selectedDate.endDate) ? selectedDate.endDate : null
+  };
+  const [focusedDate, setFocusedDate] = react.useState(
+    null
+  );
+  const handleStartCalendarFocusedDateChange = react.useCallback(
+    (event, newFocusedDate) => {
+      setFocusedDate(newFocusedDate);
+      if (newFocusedDate && !dateAdapter.isSame(startVisibleMonth, newFocusedDate, "month")) {
+        handleStartVisibleMonthChange(
+          event,
+          dateAdapter.startOf(newFocusedDate, "month")
+        );
+      }
+      onFocusedDateChange == null ? void 0 : onFocusedDateChange(event, newFocusedDate);
+    },
+    [
+      dateAdapter,
+      startVisibleMonth,
+      handleStartVisibleMonthChange,
+      onFocusedDateChange
+    ]
+  );
+  const handleEndCalendarFocusedDateChange = react.useCallback(
+    (event, newFocusedDate) => {
+      setFocusedDate(newFocusedDate);
+      if (newFocusedDate && !dateAdapter.isSame(endVisibleMonth, newFocusedDate, "month")) {
+        handleEndVisibleMonthChange(
+          event,
+          dateAdapter.startOf(newFocusedDate, "month")
+        );
+      }
+      onFocusedDateChange == null ? void 0 : onFocusedDateChange(event, newFocusedDate);
+    },
+    [
+      dateAdapter,
+      endVisibleMonth,
+      handleEndVisibleMonthChange,
+      onFocusedDateChange
+    ]
+  );
+  const getNextFocusedDate = (nextStartVisibleMonth, nextEndVisibleMonth) => {
+    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 getVisibleSelectedDate = (visibleMonth) => {
+      if ((selectedDate == null ? void 0 : selectedDate.startDate) && dateAdapter.isSame(visibleMonth, selectedDate.startDate, "month") && isDaySelectable(selectedDate.startDate)) {
+        return selectedDate.startDate;
+      }
+      if ((selectedDate == null ? void 0 : selectedDate.endDate) && dateAdapter.isSame(visibleMonth, selectedDate.endDate, "month") && isDaySelectable(selectedDate.endDate)) {
+        return selectedDate.endDate;
+      }
+      return null;
+    };
+    let focusSelectedDate = getVisibleSelectedDate(nextStartVisibleMonth);
+    focusSelectedDate = focusSelectedDate ?? getVisibleSelectedDate(nextEndVisibleMonth);
+    if (focusSelectedDate && isDaySelectable(focusSelectedDate)) {
+      return focusSelectedDate;
+    }
+    const today = dateAdapter.today(timezone);
+    if ((dateAdapter.isSame(nextStartVisibleMonth, today, "month") || dateAdapter.isSame(nextEndVisibleMonth, today, "month")) && isDaySelectable(today)) {
+      return today;
+    }
+    const getFirstSelectableDate = (visibleMonth) => {
+      const firstSelectableDate = utils.generateDatesForMonth(
+        dateAdapter,
+        visibleMonth
+      ).find((visibleDay) => isDaySelectable(visibleDay));
+      return firstSelectableDate ?? null;
+    };
+    return getFirstSelectableDate(nextStartVisibleMonth) ?? getFirstSelectableDate(nextEndVisibleMonth);
+  };
+  core.useIsomorphicLayoutEffect(() => {
+    if (!focused) {
+      setFocusedDate(null);
+      return;
+    }
+    const isStartDateValid = (selectedDate == null ? void 0 : selectedDate.startDate) && dateAdapter.isValid(selectedDate.startDate) && dateAdapter.compare(selectedDate.startDate, minDate) >= 0 && dateAdapter.compare(selectedDate.startDate, maxDate) <= 0;
+    const isEndDateValid = (selectedDate == null ? void 0 : selectedDate.endDate) && dateAdapter.isValid(selectedDate.endDate) && dateAdapter.compare(selectedDate.endDate, minDate) >= 0 && dateAdapter.compare(selectedDate.endDate, maxDate) <= 0;
+    let nextStartVisibleMonth = startVisibleMonth;
+    let nextEndVisibleMonth = endVisibleMonth;
+    const setVisibleMonths = (start, end) => {
+      nextStartVisibleMonth = dateAdapter.startOf(start, "month");
+      nextEndVisibleMonth = dateAdapter.startOf(end, "month");
+    };
+    if ((selectedDate == null ? void 0 : selectedDate.startDate) && (selectedDate == null ? void 0 : selectedDate.endDate) && isStartDateValid && isEndDateValid) {
+      if (dateAdapter.isSame(
+        selectedDate.startDate,
+        startVisibleMonth,
+        "month"
+      ) && dateAdapter.isSame(selectedDate.endDate, startVisibleMonth, "month")) {
+        setVisibleMonths(
+          selectedDate.startDate,
+          dateAdapter.add(selectedDate.startDate, { months: 1 })
+        );
+      } else {
+        setVisibleMonths(selectedDate.startDate, selectedDate.endDate);
+      }
+    } else if ((selectedDate == null ? void 0 : selectedDate.startDate) && isStartDateValid) {
+      setVisibleMonths(
+        selectedDate.startDate,
+        dateAdapter.add(selectedDate.startDate, { months: 1 })
+      );
+    } else if ((selectedDate == null ? void 0 : selectedDate.endDate) && isEndDateValid) {
+      setVisibleMonths(
+        dateAdapter.subtract(selectedDate.endDate, { months: 1 }),
+        selectedDate.endDate
+      );
+    }
+    if (!focusedDate) {
+      setFocusedDate((prevFocusedDate) => {
+        if (!prevFocusedDate) {
+          return getNextFocusedDate(nextStartVisibleMonth, nextEndVisibleMonth);
+        }
+        return prevFocusedDate;
+      });
+    }
+  }, [dateAdapter, minDate, maxDate, focused]);
+  const StartCalendarProps = {
+    visibleMonth: startVisibleMonth,
+    hoveredDate,
+    selectedDate: calendarSelectedDate,
+    isDayHighlighted,
+    isDayUnselectable,
+    focusedDateRef: initialFocusRef,
+    focusedDate: focusedDate && dateAdapter.compare(
+      focusedDate,
+      dateAdapter.startOf(endVisibleMonth, "month")
+    ) < 0 ? focusedDate : null,
+    onHoveredDateChange: handleHoveredStartDateChange,
+    onFocusedDateChange: handleStartCalendarFocusedDateChange,
+    onVisibleMonthChange: handleStartVisibleMonthChange,
+    onSelectionChange: handleSelectionChange,
+    hideOutOfRangeDates: true,
+    minDate,
+    maxDate,
+    timezone,
+    ...StartCalendarPropsProp
+  };
+  const EndCalendarProps = {
+    visibleMonth: endVisibleMonth,
+    hoveredDate,
+    isDayHighlighted,
+    isDayUnselectable,
+    focusedDateRef: initialFocusRef,
+    focusedDate: focusedDate && dateAdapter.compare(
+      focusedDate,
+      dateAdapter.startOf(endVisibleMonth, "month")
+    ) >= 0 ? focusedDate : null,
+    selectedDate: calendarSelectedDate,
+    onFocusedDateChange: handleEndCalendarFocusedDateChange,
+    onHoveredDateChange: handleHoveredEndDateChange,
+    onVisibleMonthChange: handleEndVisibleMonthChange,
+    onSelectionChange: handleSelectionChange,
+    hideOutOfRangeDates: true,
+    minDate,
+    maxDate,
+    timezone,
+    ...EndCalendarPropsProp
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    core.StackLayout,
+    {
+      separators: true,
+      gap: 0,
+      className: clsx.clsx(className, withBaseName("container")),
+      ref: containerRef,
+      ...rest,
+      children: [
+        helperText && /* @__PURE__ */ jsxRuntime.jsx(core.FlexItem, { className: withBaseName("header"), children: /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldHelperText, { children: helperText }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.FlexLayout, { gap: 0, children: /* @__PURE__ */ jsxRuntime.jsxs(core.FormFieldContext.Provider, { value: {}, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Calendar.Calendar, { selectionVariant: "range", ...StartCalendarProps, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              CalendarNavigation.CalendarNavigation,
+              {
+                NextButtonProps: {
+                  disabled: dateAdapter.isSame(
+                    startVisibleMonth,
+                    dateAdapter.subtract(maxDate, { months: 1 }),
+                    "month"
+                  )
+                },
+                ...StartCalendarNavigationProps
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(CalendarGrid.CalendarGrid, { ...StartCalendarGridProps })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Calendar.Calendar, { selectionVariant: "range", ...EndCalendarProps, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              CalendarNavigation.CalendarNavigation,
+              {
+                NextButtonProps: {
+                  disabled: dateAdapter.isSame(
+                    endVisibleMonth,
+                    dateAdapter.add(minDate, { months: 1 }),
+                    "month"
+                  )
+                },
+                ...EndCalendarNavigationProps
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(CalendarGrid.CalendarGrid, { ...EndCalendarGridProps })
+          ] })
+        ] }) })
+      ]
+    }
+  );
+});
+
+exports.DatePickerRangePanel = DatePickerRangePanel;
+//# sourceMappingURL=DatePickerRangePanel.js.map