@entur/datepicker 11.6.2 → 11.7.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, isEqualDay, getWeeksInMonth, 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 { useCalendarCell, useCalendarGrid, 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";
@@ -576,6 +576,270 @@ const CalendarBase = ({
     }
   );
 };
+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 RangeCalendarGrid = ({
+  state,
+  startDate,
+  navigationDescription,
+  showWeekNumbers,
+  weekNumberHeader,
+  showOutsideMonth = false,
+  classNameForDate,
+  ariaLabelForDate,
+  ...rest
+}) => {
+  const calendarGridId = useRandomId("eds-calendar");
+  const { locale } = useLocale();
+  const gridStartDate = startDate ?? state.visibleRange.start;
+  const { gridProps, headerProps, weekDays } = useCalendarGrid(
+    { ...rest, 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]
+            );
+            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 ? /* @__PURE__ */ jsx(
+                  RangeCalendarCell,
+                  {
+                    state,
+                    date,
+                    currentMonth: gridStartDate,
+                    "aria-describedby": calendarGridId + "description",
+                    weekNumberString: showWeekNumbers ? `, ${weekNumberHeader} ${weekNumber},` : "",
+                    classNameForDate,
+                    ariaLabelForDate,
+                    showOutsideMonth
+                  },
+                  `${date.month}.${date.day}`
+                ) : /* @__PURE__ */ jsx("td", {}, i)
+              )
+            ] }, weekIndex);
+          }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(VisuallyHidden, { id: calendarGridId + "description", children: getNavigationDescription() })
+  ] });
+};
+const RangeCalendar = ({
+  locale: localOverride,
+  ...rest
+}) => {
+  const props = { isDisabled: rest.disabled, ...rest };
+  const { locale } = useLocale();
+  return /* @__PURE__ */ jsx(I18nProvider, { locale: localOverride ?? locale, children: /* @__PURE__ */ jsx(RangeCalendarBase, { ...props }) });
+};
+const RangeCalendarBase = ({
+  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]
+  );
+  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,
+      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(
+            RangeCalendarGrid,
+            {
+              ...rest,
+              state,
+              startDate,
+              navigationDescription,
+              classNameForDate,
+              ariaLabelForDate,
+              showWeekNumbers,
+              weekNumberHeader,
+              showOutsideMonth
+            }
+          )
+        ] }, i);
+      }) })
+    }
+  );
+};
 const DatePicker = ({
   selectedDate,
   locale,
@@ -1253,6 +1517,7 @@ export {
   DatePicker,
   NativeDatePicker,
   NativeTimePicker,
+  RangeCalendar,
   SimpleTimePicker,
   Time2 as Time,
   TimePicker,