@entur/datepicker 11.7.0 → 12.0.0-next.0

package/dist/datepicker.esm.js

@@ -1,14 +1,14 @@
-import { useRandomId, ConditionalWrapper, mergeRefs, useWindowDimensions, useOnClickOutside, useOnEscape, useOnMount, warnAboutMissingStyles } from "@entur/utils";
+import { ConditionalWrapper, mergeRefs, useWindowDimensions, useOnClickOutside, useOnEscape, useOnMount, warnAboutMissingStyles } from "@entur/utils";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { useRef, useEffect, useState } from "react";
+import React, { useRef, useEffect, useId, useState } from "react";
 import { useDateFieldState, useDatePickerState, useTimeFieldState } from "@react-stately/datepicker";
 import { useDateSegment, useDateField, useDatePicker, useTimeField } from "@react-aria/datepicker";
 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, isSameDay, 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, useRangeCalendar } from "@react-aria/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";
@@ -258,7 +258,7 @@ const DateField = ({
   const dateFieldRef = useRef(null);
   const { labelProps, fieldProps } = useDateField(_props, state, dateFieldRef);
   useEffect(() => onValidate?.(!state.isInvalid), [state.isInvalid]);
-  const id = useRandomId("datefield");
+  const id = `datefield${useId()}`;
   return /* @__PURE__ */ jsx(
     ConditionalWrapper,
     {
@@ -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 = `eds-calendar${useId()}`;
+  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,36 @@ 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}`
+      )
     }
   );
 };
@@ -650,101 +706,15 @@ const RangeCalendarCell = ({
     }
   ) });
 };
-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 }) });
+  return /* @__PURE__ */ jsx(I18nProvider, { locale: localOverride ?? locale, children: /* @__PURE__ */ jsx(_RangeCalendar, { ...props }) });
 };
-const RangeCalendarBase = ({
+const _RangeCalendar = ({
   value,
   onChange,
   minDate,
@@ -780,63 +750,34 @@ const RangeCalendarBase = ({
     () => 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",
+    CalendarBase,
     {
-      ...calendarProps,
-      ref,
-      className: classNames("eds-datepicker__calendar", className),
+      state,
+      calendarProps,
+      prevButtonProps,
+      nextButtonProps,
+      title,
+      calendarRef: ref,
       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);
-      }) })
+      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}`
+      )
     }
   );
 };
@@ -1016,7 +957,7 @@ const NativeDatePicker = React.forwardRef(
     prepend = /* @__PURE__ */ jsx(DateIcon, { inline: true }),
     ...rest
   }, ref) => {
-    const nativedatepickerId = useRandomId("eds-nativetimepicker");
+    const nativedatepickerId = `eds-nativetimepicker${useId()}`;
     return /* @__PURE__ */ jsx(
       BaseFormControl,
       {
@@ -1133,7 +1074,7 @@ const TimePicker = ({
 }) => {
   let { locale } = useLocale();
   if (customLocale) locale = customLocale;
-  const timePickerId = useRandomId("eds-timepicker");
+  const timePickerId = `eds-timepicker${useId()}`;
   const timeZone = forcedTimeZone ?? (selectedTime !== null && "timeZone" in selectedTime ? selectedTime.timeZone : "Europe/Oslo");
   const handleOnChange2 = (value) => {
     if (forcedReturnType !== void 0 || !selectedTime) {
@@ -1164,7 +1105,7 @@ const TimePicker = ({
     state,
     timeFieldRef
   );
-  const id = useRandomId("timepicker");
+  const id = `timepicker${useId()}`;
   const getCurrentTime = () => {
     const getCurrentTimeWithCorrectType = convertValueToType({
       value: now(timeZone),
@@ -1264,7 +1205,7 @@ const TimePicker = ({
 };
 const NativeTimePicker = React.forwardRef(
   ({ className, style, onChange, label, feedback, variant, prepend, ...rest }, ref) => {
-    const nativetimepickerId = useRandomId("eds-native-timepicker");
+    const nativetimepickerId = `eds-native-timepicker${useId()}`;
     return /* @__PURE__ */ jsx(
       BaseFormControl,
       {