@entur/datepicker 11.6.2 → 11.8.0

package/dist/datepicker.esm.js

@@ -6,10 +6,10 @@ import { useDateSegment, useDateField, useDatePicker, useTimeField } from "@reac
 import { useLocale, I18nProvider } from "@react-aria/i18n";
 import classNames from "classnames";
 import { BaseFormControl, useVariant, useInputGroupContext, isFilled, TextField } from "@entur/form";
-import { toTime, now, toZoned, toCalendarDateTime, today, toCalendarDate, GregorianCalendar, startOfWeek, startOfYear, CalendarDate, Time, getLocalTimeZone, ZonedDateTime, parseAbsolute, CalendarDateTime, isEqualDay, getWeeksInMonth, parseTime } from "@internationalized/date";
+import { toTime, now, toZoned, toCalendarDateTime, today, toCalendarDate, GregorianCalendar, startOfWeek, startOfYear, CalendarDate, Time, getLocalTimeZone, ZonedDateTime, parseAbsolute, CalendarDateTime, getWeeksInMonth, isEqualDay, isSameDay, parseTime } from "@internationalized/date";
 import { CalendarDate as CalendarDate2, CalendarDateTime as CalendarDateTime2, Time as Time2, ZonedDateTime as ZonedDateTime2 } from "@internationalized/date";
-import { useCalendarCell, useCalendarGrid, useCalendar } from "@react-aria/calendar";
-import { useCalendarState } from "@react-stately/calendar";
+import { useCalendarGrid, useCalendarCell, useCalendar, useRangeCalendar } from "@react-aria/calendar";
+import { useCalendarState, useRangeCalendarState } from "@react-stately/calendar";
 import { LeftArrowIcon, RightArrowIcon, CalendarIcon, DateIcon, ClockIcon } from "@entur/icons";
 import { useButton } from "@react-aria/button";
 import { IconButton } from "@entur/button";
@@ -303,9 +303,158 @@ const CalendarButton = ({
   const { buttonProps } = useButton(props, ref);
   return /* @__PURE__ */ jsx(IconButton, { ...buttonProps, ref, className, style, children });
 };
+const CalendarGrid = ({
+  state,
+  startDate,
+  navigationDescription,
+  showWeekNumbers,
+  weekNumberHeader,
+  renderCell
+}) => {
+  const calendarGridId = useRandomId("eds-calendar");
+  const { locale } = useLocale();
+  const gridStartDate = startDate ?? state.visibleRange.start;
+  const { gridProps, headerProps, weekDays } = useCalendarGrid(
+    { startDate: gridStartDate },
+    state
+  );
+  const weeksInMonth = getWeeksInMonth(gridStartDate, locale);
+  const weeksArray = Array.from(Array(weeksInMonth).keys());
+  const weekDaysMapped = () => {
+    if (locale.toLowerCase().includes("no"))
+      return ["ma", "ti", "on", "to", "fr", "lø", "sø"];
+    if (locale.toLowerCase().includes("en")) {
+      if (weekDays[0] === "M")
+        return ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+      if (weekDays[0] === "S")
+        return ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+    }
+    return weekDays.map((day) => day.toLowerCase());
+  };
+  const getNavigationDescription = () => {
+    if (navigationDescription) return navigationDescription;
+    if (locale.toLowerCase().includes("en"))
+      return "Use the arrow keys to navigate between dates";
+    return "Bruk piltastene til å navigere mellom datoer";
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "table",
+      {
+        ...gridProps,
+        cellSpacing: "0",
+        className: "eds-datepicker__calendar__grid",
+        children: [
+          /* @__PURE__ */ jsx("thead", { ...headerProps, children: /* @__PURE__ */ jsxs("tr", { children: [
+            showWeekNumbers && /* @__PURE__ */ jsx("th", { className: "eds-datepicker__calendar__grid__weeknumber-header", children: weekNumberHeader }),
+            weekDaysMapped().map((day) => /* @__PURE__ */ jsx("th", { children: day }, day))
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: weeksArray.map((weekIndex) => {
+            const weekNumber = getWeekNumberForDate(
+              state.getDatesInWeek(weekIndex, gridStartDate)[0]
+            );
+            const weekNumberString = showWeekNumbers ? `, ${weekNumberHeader} ${weekNumber},` : "";
+            return /* @__PURE__ */ jsxs("tr", { children: [
+              showWeekNumbers && /* @__PURE__ */ jsx(
+                "th",
+                {
+                  "aria-label": `${weekNumberHeader} ${weekNumber}`,
+                  className: "eds-datepicker__calendar__grid__weeknumber",
+                  children: weekNumber
+                }
+              ),
+              state.getDatesInWeek(weekIndex, gridStartDate).map(
+                (date, i) => date ? renderCell(
+                  date,
+                  gridStartDate,
+                  weekNumberString,
+                  calendarGridId + "description"
+                ) : /* @__PURE__ */ jsx("td", {}, i)
+              )
+            ] }, weekIndex);
+          }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(VisuallyHidden, { id: calendarGridId + "description", children: getNavigationDescription() })
+  ] });
+};
+const CalendarBase = ({
+  state,
+  calendarProps,
+  prevButtonProps,
+  nextButtonProps,
+  title,
+  calendarRef,
+  style,
+  className,
+  navigationDescription,
+  showWeekNumbers,
+  weekNumberHeader,
+  renderCell
+}) => {
+  const { locale } = useLocale();
+  const monthCount = state.visibleRange.end.month - state.visibleRange.start.month + 1 + (state.visibleRange.end.year - state.visibleRange.start.year) * 12;
+  const getMonthTitle = (startDate) => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(
+    new Date(startDate.year, startDate.month - 1)
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...calendarProps,
+      ref: calendarRef,
+      className: classNames("eds-datepicker__calendar", className),
+      style,
+      children: /* @__PURE__ */ jsx("div", { className: "eds-datepicker__calendar__grids", children: Array.from({ length: monthCount }, (_, i) => {
+        const startDate = state.visibleRange.start.add({ months: i });
+        return /* @__PURE__ */ jsxs("div", { className: "eds-datepicker__calendar__month", children: [
+          /* @__PURE__ */ jsxs("div", { className: "eds-datepicker__calendar__header", children: [
+            i === 0 && /* @__PURE__ */ jsx(
+              CalendarButton,
+              {
+                ...prevButtonProps,
+                "aria-label": ariaLabelIfNorwegian(
+                  "Forrige måned",
+                  locale,
+                  prevButtonProps
+                ),
+                children: /* @__PURE__ */ jsx(LeftArrowIcon, { size: 20 })
+              }
+            ),
+            /* @__PURE__ */ jsx("h2", { children: monthCount > 1 ? getMonthTitle(startDate) : title }),
+            i === monthCount - 1 && /* @__PURE__ */ jsx(
+              CalendarButton,
+              {
+                ...nextButtonProps,
+                "aria-label": ariaLabelIfNorwegian(
+                  "Neste måned",
+                  locale,
+                  nextButtonProps
+                ),
+                children: /* @__PURE__ */ jsx(RightArrowIcon, { size: 20 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            CalendarGrid,
+            {
+              state,
+              startDate,
+              navigationDescription,
+              showWeekNumbers,
+              weekNumberHeader,
+              renderCell
+            }
+          )
+        ] }, i);
+      }) })
+    }
+  );
+};
 const CalendarCell = ({
   state,
   date,
+  currentMonth,
   showOutsideMonth = false,
   onSelectedCellClick = () => {
     return;
@@ -329,6 +478,8 @@ const CalendarCell = ({
     formattedDate
   } = useCalendarCell({ date }, state, cellRef);
   const ariaLabel = `${buttonProps["aria-label"]}${weekNumberString} ${ariaLabelForDate?.(date) ?? ""}`;
+  const isOverflowDate = date.month !== currentMonth.month || date.year !== currentMonth.year;
+  const isBetweenVisibleMonths = isOverflowDate && !isOutsideVisibleRange;
   const cellCanBeSelected = showOutsideMonth ? !(isDisabled || isUnavailable) : !(isOutsideVisibleRange || isDisabled || isUnavailable);
   const shouldHideDate = !showOutsideMonth && isOutsideVisibleRange;
   const extendedButtonProps = {
@@ -344,21 +495,31 @@ const CalendarCell = ({
           onCellClick();
         }
       }
+    },
+    ...isBetweenVisibleMonths && {
+      tabIndex: -1,
+      role: "presentation",
+      onClick: void 0,
+      onKeyDown: void 0,
+      onKeyUp: void 0,
+      onPointerDown: void 0,
+      onFocus: void 0
     }
   };
   return /* @__PURE__ */ jsx("td", { ...cellProps, className: "eds-datepicker__calendar__grid__cell__td", children: /* @__PURE__ */ jsx(
     "div",
     {
       ...extendedButtonProps,
-      "aria-label": ariaLabel,
-      "aria-hidden": shouldHideDate,
+      "aria-label": isBetweenVisibleMonths ? void 0 : ariaLabel,
+      "aria-hidden": shouldHideDate || isBetweenVisibleMonths,
       ref: cellRef,
       hidden: shouldHideDate,
       className: classNames("eds-datepicker__calendar__grid__cell", {
         [classNameForDate?.(date) ?? ""]: !shouldHideDate,
-        "eds-datepicker__calendar__grid__cell--selected": isSelected,
+        "eds-datepicker__calendar__grid__cell--selected": isSelected && !isOverflowDate,
         "eds-datepicker__calendar__grid__cell--disabled": isDisabled || isUnavailable,
         "eds-datepicker__calendar__grid__cell--outside-month": isOutsideVisibleRange && !showOutsideMonth,
+        "eds-datepicker__calendar__grid__cell--between-months": isBetweenVisibleMonths,
         "eds-datepicker__calendar__grid__cell--outside-month--visible": isOutsideVisibleRange && showOutsideMonth,
         "eds-datepicker__calendar__grid__cell--today": isEqualDay(
           date,
@@ -367,11 +528,13 @@ const CalendarCell = ({
       }),
       ...rest,
       onClick: (e) => {
+        if (isBetweenVisibleMonths) return;
         extendedButtonProps?.onClick?.(e);
         isSelected && onSelectedCellClick();
         cellCanBeSelected && onCellClick();
       },
       onKeyUp: (e) => {
+        if (isBetweenVisibleMonths) return;
         extendedButtonProps?.onKeyUp?.(e);
         if (e.key === "Enter") {
           isSelected && onSelectedCellClick();
@@ -382,103 +545,15 @@ const CalendarCell = ({
     }
   ) });
 };
-const CalendarGrid = ({
-  state,
-  navigationDescription,
-  onSelectedCellClick = () => {
-    return;
-  },
-  onCellClick = () => {
-    return;
-  },
-  showWeekNumbers,
-  weekNumberHeader,
-  showOutsideMonth = false,
-  classNameForDate,
-  ariaLabelForDate,
-  ...rest
-}) => {
-  const calendarGridId = useRandomId("eds-calendar");
-  const { locale } = useLocale();
-  const { gridProps, headerProps, weekDays } = useCalendarGrid(rest, state);
-  const weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
-  const weeksArray = Array.from(Array(weeksInMonth).keys());
-  const weekDaysMapped = () => {
-    if (locale.toLowerCase().includes("no"))
-      return ["ma", "ti", "on", "to", "fr", "lø", "sø"];
-    if (locale.toLowerCase().includes("en")) {
-      if (weekDays[0] === "M")
-        return ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
-      if (weekDays[0] === "S")
-        return ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-    }
-    return weekDays.map((day) => day.toLowerCase());
-  };
-  const getNavigationDescription = () => {
-    if (navigationDescription) return navigationDescription;
-    if (locale.toLowerCase().includes("en"))
-      return "Use the arrow keys to navigate between dates";
-    return "Bruk piltastene til å navigere mellom datoer";
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "table",
-      {
-        ...gridProps,
-        cellSpacing: "0",
-        className: "eds-datepicker__calendar__grid",
-        children: [
-          /* @__PURE__ */ jsx("thead", { ...headerProps, children: /* @__PURE__ */ jsxs("tr", { children: [
-            showWeekNumbers && /* @__PURE__ */ jsx("th", { className: "eds-datepicker__calendar__grid__weeknumber-header", children: weekNumberHeader }),
-            weekDaysMapped().map((day) => /* @__PURE__ */ jsx("th", { children: day }, day))
-          ] }) }),
-          /* @__PURE__ */ jsx("tbody", { children: weeksArray.map((weekIndex) => {
-            const weekNumber = getWeekNumberForDate(
-              state.getDatesInWeek(weekIndex)[0]
-            );
-            return /* @__PURE__ */ jsxs("tr", { children: [
-              showWeekNumbers && /* @__PURE__ */ jsx(
-                "th",
-                {
-                  "aria-label": `${weekNumberHeader} ${weekNumber}`,
-                  className: "eds-datepicker__calendar__grid__weeknumber",
-                  children: weekNumber
-                }
-              ),
-              state.getDatesInWeek(weekIndex).map(
-                (date, i) => date ? /* @__PURE__ */ jsx(
-                  CalendarCell,
-                  {
-                    state,
-                    date,
-                    "aria-describedby": calendarGridId + "description",
-                    weekNumberString: showWeekNumbers ? `, ${weekNumberHeader} ${weekNumber},` : "",
-                    onSelectedCellClick,
-                    onCellClick,
-                    classNameForDate,
-                    ariaLabelForDate,
-                    showOutsideMonth
-                  },
-                  `${date.month}.${date.day}`
-                ) : /* @__PURE__ */ jsx("td", {}, i)
-              )
-            ] }, weekIndex);
-          }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(VisuallyHidden, { id: calendarGridId + "description", children: getNavigationDescription() })
-  ] });
-};
 const Calendar = ({
   locale: localOverride,
   ...rest
 }) => {
   const props = { isDisabled: rest.disabled, ...rest };
   const { locale } = useLocale();
-  return /* @__PURE__ */ jsx(I18nProvider, { locale: localOverride ?? locale, children: /* @__PURE__ */ jsx(CalendarBase, { ...props }) });
+  return /* @__PURE__ */ jsx(I18nProvider, { locale: localOverride ?? locale, children: /* @__PURE__ */ jsx(_Calendar, { ...props }) });
 };
-const CalendarBase = ({
+const _Calendar = ({
   selectedDate,
   onChange,
   minDate,
@@ -486,6 +561,7 @@ const CalendarBase = ({
   showWeekNumbers = false,
   weekNumberHeader = "uke",
   showOutsideMonth = false,
+  visibleDuration,
   forcedReturnType,
   style,
   className,
@@ -514,7 +590,8 @@ const CalendarBase = ({
     locale,
     createCalendar,
     minValue: minDate,
-    maxValue: getAdjustedMaxDate(maxDate)
+    maxValue: getAdjustedMaxDate(maxDate),
+    visibleDuration
   };
   const state = useCalendarState(_props);
   const { calendarProps, prevButtonProps, nextButtonProps, title } = useCalendar(_props, state);
@@ -522,57 +599,185 @@ const CalendarBase = ({
     () => rest.onValidate?.(!state.isValueInvalid),
     [state.isValueInvalid]
   );
-  return /* @__PURE__ */ jsxs(
-    "div",
+  return /* @__PURE__ */ jsx(
+    CalendarBase,
     {
-      ...calendarProps,
-      ref: calendarRef,
-      className: classNames("eds-datepicker__calendar", className),
+      state,
+      calendarProps,
+      prevButtonProps,
+      nextButtonProps,
+      title,
+      calendarRef,
       style,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "eds-datepicker__calendar__header", children: [
-          /* @__PURE__ */ jsx(
-            CalendarButton,
-            {
-              ...prevButtonProps,
-              "aria-label": ariaLabelIfNorwegian(
-                "Forrige måned",
-                locale,
-                prevButtonProps
-              ),
-              children: /* @__PURE__ */ jsx(LeftArrowIcon, { size: 20 })
-            }
-          ),
-          /* @__PURE__ */ jsx("h2", { children: title }),
-          /* @__PURE__ */ jsx(
-            CalendarButton,
-            {
-              ...nextButtonProps,
-              "aria-label": ariaLabelIfNorwegian(
-                "Neste måned",
-                locale,
-                nextButtonProps
-              ),
-              children: /* @__PURE__ */ jsx(RightArrowIcon, { size: 20 })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
-          CalendarGrid,
-          {
-            ...rest,
-            state,
-            navigationDescription,
-            onSelectedCellClick,
-            onCellClick,
-            classNameForDate,
-            ariaLabelForDate,
-            showWeekNumbers,
-            weekNumberHeader,
-            showOutsideMonth
-          }
+      className,
+      navigationDescription,
+      showWeekNumbers,
+      weekNumberHeader,
+      renderCell: (date, currentMonth, weekNumberString, ariaDescribedBy) => /* @__PURE__ */ jsx(
+        CalendarCell,
+        {
+          state,
+          date,
+          currentMonth,
+          "aria-describedby": ariaDescribedBy,
+          weekNumberString,
+          onSelectedCellClick,
+          onCellClick,
+          classNameForDate,
+          ariaLabelForDate,
+          showOutsideMonth
+        },
+        `${date.month}.${date.day}`
+      )
+    }
+  );
+};
+const RangeCalendarCell = ({
+  state,
+  date,
+  currentMonth,
+  showOutsideMonth = false,
+  weekNumberString,
+  classNameForDate,
+  ariaLabelForDate,
+  ...rest
+}) => {
+  const cellRef = useRef(null);
+  const {
+    cellProps,
+    buttonProps,
+    isSelected,
+    isOutsideVisibleRange,
+    isDisabled,
+    isUnavailable,
+    formattedDate
+  } = useCalendarCell({ date }, state, cellRef);
+  const ariaLabel = `${buttonProps["aria-label"]}${weekNumberString} ${ariaLabelForDate?.(date) ?? ""}`;
+  const highlightedRange = state.highlightedRange;
+  const isSelectionStart = isSelected && highlightedRange ? isSameDay(date, highlightedRange.start) : isSelected;
+  const isSelectionEnd = isSelected && highlightedRange ? isSameDay(date, highlightedRange.end) : isSelected;
+  const isInRange = isSelected && !isSelectionStart && !isSelectionEnd;
+  const isOverflowDate = date.month !== currentMonth.month || date.year !== currentMonth.year;
+  const isBetweenVisibleMonths = isOverflowDate && !isOutsideVisibleRange;
+  const shouldHideDate = !showOutsideMonth && isOutsideVisibleRange;
+  const extendedButtonProps = {
+    ...buttonProps,
+    ...showOutsideMonth && isOutsideVisibleRange && {
+      onClick: () => state.selectDate(date),
+      onKeyUp: (e) => {
+        if (e.key === "Enter") state.selectDate(date);
+      }
+    },
+    ...isBetweenVisibleMonths && {
+      tabIndex: -1,
+      role: "presentation",
+      onClick: void 0,
+      onKeyDown: void 0,
+      onKeyUp: void 0,
+      onPointerDown: void 0,
+      onFocus: void 0
+    }
+  };
+  return /* @__PURE__ */ jsx("td", { ...cellProps, className: "eds-datepicker__calendar__grid__cell__td", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...extendedButtonProps,
+      "aria-label": isBetweenVisibleMonths ? void 0 : ariaLabel,
+      "aria-hidden": shouldHideDate || isBetweenVisibleMonths,
+      ref: cellRef,
+      hidden: shouldHideDate,
+      className: classNames("eds-datepicker__calendar__grid__cell", {
+        [classNameForDate?.(date) ?? ""]: !shouldHideDate,
+        "eds-datepicker__calendar__grid__cell--selected": isSelected && !isOverflowDate,
+        "eds-datepicker__calendar__grid__cell--selection-start": isSelectionStart && !isOverflowDate,
+        "eds-datepicker__calendar__grid__cell--selection-end": isSelectionEnd && !isOverflowDate,
+        "eds-datepicker__calendar__grid__cell--in-range": isInRange && !isOverflowDate,
+        "eds-datepicker__calendar__grid__cell--disabled": isDisabled || isUnavailable,
+        "eds-datepicker__calendar__grid__cell--outside-month": isOutsideVisibleRange && !showOutsideMonth,
+        "eds-datepicker__calendar__grid__cell--between-months": isBetweenVisibleMonths,
+        "eds-datepicker__calendar__grid__cell--outside-month--visible": isOutsideVisibleRange && showOutsideMonth,
+        "eds-datepicker__calendar__grid__cell--today": isEqualDay(
+          date,
+          now(state.timeZone ?? getLocalTimeZone())
         )
-      ]
+      }),
+      ...rest,
+      children: formattedDate
+    }
+  ) });
+};
+const RangeCalendar = ({
+  locale: localOverride,
+  ...rest
+}) => {
+  const props = { isDisabled: rest.disabled, ...rest };
+  const { locale } = useLocale();
+  return /* @__PURE__ */ jsx(I18nProvider, { locale: localOverride ?? locale, children: /* @__PURE__ */ jsx(_RangeCalendar, { ...props }) });
+};
+const _RangeCalendar = ({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  showWeekNumbers = false,
+  weekNumberHeader = "uke",
+  showOutsideMonth = false,
+  visibleDuration,
+  style,
+  className,
+  navigationDescription,
+  classNameForDate,
+  ariaLabelForDate,
+  calendarRef,
+  ...rest
+}) => {
+  const { locale } = useLocale();
+  const internalRef = useRef(null);
+  const ref = calendarRef ?? internalRef;
+  const _props = {
+    ...rest,
+    value,
+    onChange,
+    locale,
+    createCalendar,
+    minValue: minDate,
+    maxValue: getAdjustedMaxDate(maxDate),
+    visibleDuration
+  };
+  const state = useRangeCalendarState(_props);
+  const { calendarProps, prevButtonProps, nextButtonProps, title } = useRangeCalendar(_props, state, ref);
+  useEffect(
+    () => rest.onValidate?.(!state.isValueInvalid),
+    [state.isValueInvalid]
+  );
+  return /* @__PURE__ */ jsx(
+    CalendarBase,
+    {
+      state,
+      calendarProps,
+      prevButtonProps,
+      nextButtonProps,
+      title,
+      calendarRef: ref,
+      style,
+      className,
+      navigationDescription,
+      showWeekNumbers,
+      weekNumberHeader,
+      renderCell: (date, currentMonth, weekNumberString, ariaDescribedBy) => /* @__PURE__ */ jsx(
+        RangeCalendarCell,
+        {
+          state,
+          date,
+          currentMonth,
+          "aria-describedby": ariaDescribedBy,
+          weekNumberString,
+          classNameForDate,
+          ariaLabelForDate,
+          showOutsideMonth
+        },
+        `${date.month}.${date.day}`
+      )
     }
   );
 };
@@ -1253,6 +1458,7 @@ export {
   DatePicker,
   NativeDatePicker,
   NativeTimePicker,
+  RangeCalendar,
   SimpleTimePicker,
   Time2 as Time,
   TimePicker,