@entur/datepicker 11.6.2 → 11.7.0

package/dist/DatePicker/RangeCalendar.d.ts

@@ -0,0 +1,69 @@
+import { default as React } from 'react';
+import { AriaRangeCalendarProps } from '@react-aria/calendar';
+import { CalendarDate, DateDuration, DateValue } from '@internationalized/date';
+import { RangeValue } from '@react-types/shared';
+import { MappedDateValue } from '@react-types/datepicker';
+type BaseRangeCalendarProps<DateType extends DateValue> = {
+    /** Det valgte datoperioden. Null hvis ingen periode er valgt. */
+    value: RangeValue<MappedDateValue<DateType>> | null;
+    /** Callback som kalles når valgt periode endres. */
+    onChange?: (value: RangeValue<MappedDateValue<DateType>> | null) => void;
+    navigationDescription?: string;
+    style?: React.CSSProperties;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Tidligste gyldige datovalg.
+     * Eks: today(getLocalTimeZone()) == i dag i lokal tidssone.
+     *
+     * OBS: Hvis du bruker dato med tid vil tidspunktet også tas hensyn til.
+     * Gyldig fra og med den tiden som legges inn som minDate.
+     * Dato uten tid vil være gyldig hele minDate-dagen */
+    minDate?: DateValue;
+    /** Seneste gyldige datovalg.
+     * Eks: today(getLocalTimeZone()).add({days: 1}) == i morgen i lokal tidssone
+     *
+     * OBS: Hvis du bruker dato med tid vil tidspunktet også tas hensyn til.
+     * Gyldig til og med den tiden som legges inn som maxDate.
+     * Dato uten tid vil være gyldig hele maxDate-dagen */
+    maxDate?: DateValue;
+    /** Slå på visning av ukenummere i kalenderen. Overskriften for ukenummer-kolonnen
+     * kan endres med prop-en 'weekNumberHeader'
+     * @default false */
+    showWeekNumbers?: boolean;
+    /** Overskrift som vises for ukenummer-kolonnen. Vises kun hvis 'showWeekNumbers' er true.
+     * @default 'uke' */
+    weekNumberHeader?: string;
+    /** Vis datoer som ligger utenfor den viste måneden.
+     * @example Hvis uken starter på onsdag vises de to siste datoene i forrige måned i ruten til mandagen og tirsdagen før.
+     * @default false */
+    showOutsideMonth?: boolean;
+    /** Brukes for å legge til klassenavn på spesifikke datoer i kalenderen.
+     *  Tar inn en dato og skal returnere klassenavnet som skal legges til den datoen.
+     *  @default undefined
+     *  @example (date) => isWeekend(date, 'no-NO') ? 'weekend' : ''
+     *
+     *  OBS: hvis stylingen er meningsbærende bør du bruke ariaLabelForDate i tillegg for å beskrive
+     *  meningen til skjermlesere o.l.
+     */
+    classNameForDate?: (date: CalendarDate) => string;
+    /** Legger til teksten som returneres på datoen i kalenderen sin aria-label.
+     *  Bør brukes sammen med classNameForDate hvis styling-endringene gjort der er meningsbærende.
+     *  @default undefined
+     *  @example (date) => isWeekend(date, 'no-NO') ? 'helgedag' : ''
+     */
+    ariaLabelForDate?: (date: CalendarDate) => string;
+    /** Callback-funksjon for når valideringen til datovelgeren endrer seg */
+    onValidate?: (isValid?: boolean) => void;
+    disabled?: boolean;
+    locale?: string;
+    calendarRef?: React.MutableRefObject<HTMLDivElement | null>;
+    /** Vis flere måneder samtidig i kalenderen.
+     * @default {months: 1}
+     * @example {months: 2}
+     */
+    visibleDuration?: Pick<DateDuration, 'months'>;
+};
+type ExtendedRangeCalendarProps<DateType extends DateValue> = Omit<AriaRangeCalendarProps<DateType>, keyof BaseRangeCalendarProps<DateType> | 'value' | 'label' | 'hideTimeZone' | 'placeholder' | 'placeholderValue' | 'defaultValue' | 'minValue' | 'maxValue'>;
+export type RangeCalendarProps<DateType extends DateValue> = BaseRangeCalendarProps<DateType> & ExtendedRangeCalendarProps<DateType>;
+export declare const RangeCalendar: <DateType extends DateValue>({ locale: localOverride, ...rest }: RangeCalendarProps<DateType>) => React.JSX.Element;
+export {};

package/dist/DatePicker/RangeCalendarCell.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { RangeCalendarState } from '@react-stately/calendar';
+import { CalendarDate } from '@internationalized/date';
+type RangeCalendarCellProps = {
+    state: RangeCalendarState;
+    date: CalendarDate;
+    currentMonth: CalendarDate;
+    weekNumberString: string;
+    showOutsideMonth?: boolean;
+    classNameForDate?: (date: CalendarDate) => string;
+    ariaLabelForDate?: (date: CalendarDate) => string;
+};
+export declare const RangeCalendarCell: ({ state, date, currentMonth, showOutsideMonth, weekNumberString, classNameForDate, ariaLabelForDate, ...rest }: RangeCalendarCellProps) => React.JSX.Element;
+export {};

package/dist/DatePicker/RangeCalendarGrid.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { RangeCalendarState } from '@react-stately/calendar';
+import { CalendarDate } from '@internationalized/date';
+type RangeCalendarGridProps = {
+    state: RangeCalendarState;
+    startDate?: CalendarDate;
+    navigationDescription?: string;
+    showWeekNumbers: boolean;
+    weekNumberHeader: string;
+    showOutsideMonth?: boolean;
+    classNameForDate?: (date: CalendarDate) => string;
+    ariaLabelForDate?: (date: CalendarDate) => string;
+};
+export declare const RangeCalendarGrid: ({ state, startDate, navigationDescription, showWeekNumbers, weekNumberHeader, showOutsideMonth, classNameForDate, ariaLabelForDate, ...rest }: RangeCalendarGridProps) => React.JSX.Element;
+export {};

package/dist/DatePicker/index.d.ts

@@ -1,4 +1,5 @@
 export * from './DateField';
 export * from './Calendar';
+export * from './RangeCalendar';
 export * from './DatePicker';
 export * from './NativeDatePicker';

package/dist/datepicker.cjs.js

@@ -577,6 +577,270 @@ const CalendarBase = ({
     }
   );
 };
+const RangeCalendarCell = ({
+  state,
+  date: date$1,
+  currentMonth,
+  showOutsideMonth = false,
+  weekNumberString,
+  classNameForDate,
+  ariaLabelForDate,
+  ...rest
+}) => {
+  const cellRef = React.useRef(null);
+  const {
+    cellProps,
+    buttonProps,
+    isSelected,
+    isOutsideVisibleRange,
+    isDisabled,
+    isUnavailable,
+    formattedDate
+  } = calendar.useCalendarCell({ date: date$1 }, state, cellRef);
+  const ariaLabel = `${buttonProps["aria-label"]}${weekNumberString} ${ariaLabelForDate?.(date$1) ?? ""}`;
+  const highlightedRange = state.highlightedRange;
+  const isSelectionStart = isSelected && highlightedRange ? date.isSameDay(date$1, highlightedRange.start) : isSelected;
+  const isSelectionEnd = isSelected && highlightedRange ? date.isSameDay(date$1, highlightedRange.end) : isSelected;
+  const isInRange = isSelected && !isSelectionStart && !isSelectionEnd;
+  const isOverflowDate = date$1.month !== currentMonth.month || date$1.year !== currentMonth.year;
+  const isBetweenVisibleMonths = isOverflowDate && !isOutsideVisibleRange;
+  const shouldHideDate = !showOutsideMonth && isOutsideVisibleRange;
+  const extendedButtonProps = {
+    ...buttonProps,
+    ...showOutsideMonth && isOutsideVisibleRange && {
+      onClick: () => state.selectDate(date$1),
+      onKeyUp: (e) => {
+        if (e.key === "Enter") state.selectDate(date$1);
+      }
+    },
+    ...isBetweenVisibleMonths && {
+      tabIndex: -1,
+      role: "presentation",
+      onClick: void 0,
+      onKeyDown: void 0,
+      onKeyUp: void 0,
+      onPointerDown: void 0,
+      onFocus: void 0
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("td", { ...cellProps, className: "eds-datepicker__calendar__grid__cell__td", children: /* @__PURE__ */ jsxRuntime.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$1) ?? ""]: !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": date.isEqualDay(
+          date$1,
+          date.now(state.timeZone ?? date.getLocalTimeZone())
+        )
+      }),
+      ...rest,
+      children: formattedDate
+    }
+  ) });
+};
+const RangeCalendarGrid = ({
+  state,
+  startDate,
+  navigationDescription,
+  showWeekNumbers,
+  weekNumberHeader,
+  showOutsideMonth = false,
+  classNameForDate,
+  ariaLabelForDate,
+  ...rest
+}) => {
+  const calendarGridId = utils.useRandomId("eds-calendar");
+  const { locale } = i18n.useLocale();
+  const gridStartDate = startDate ?? state.visibleRange.start;
+  const { gridProps, headerProps, weekDays } = calendar.useCalendarGrid(
+    { ...rest, startDate: gridStartDate },
+    state
+  );
+  const weeksInMonth = date.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "table",
+      {
+        ...gridProps,
+        cellSpacing: "0",
+        className: "eds-datepicker__calendar__grid",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { ...headerProps, children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+            showWeekNumbers && /* @__PURE__ */ jsxRuntime.jsx("th", { className: "eds-datepicker__calendar__grid__weeknumber-header", children: weekNumberHeader }),
+            weekDaysMapped().map((day) => /* @__PURE__ */ jsxRuntime.jsx("th", { children: day }, day))
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: weeksArray.map((weekIndex) => {
+            const weekNumber = getWeekNumberForDate(
+              state.getDatesInWeek(weekIndex, gridStartDate)[0]
+            );
+            return /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+              showWeekNumbers && /* @__PURE__ */ jsxRuntime.jsx(
+                "th",
+                {
+                  "aria-label": `${weekNumberHeader} ${weekNumber}`,
+                  className: "eds-datepicker__calendar__grid__weeknumber",
+                  children: weekNumber
+                }
+              ),
+              state.getDatesInWeek(weekIndex, gridStartDate).map(
+                (date2, i) => date2 ? /* @__PURE__ */ jsxRuntime.jsx(
+                  RangeCalendarCell,
+                  {
+                    state,
+                    date: date2,
+                    currentMonth: gridStartDate,
+                    "aria-describedby": calendarGridId + "description",
+                    weekNumberString: showWeekNumbers ? `, ${weekNumberHeader} ${weekNumber},` : "",
+                    classNameForDate,
+                    ariaLabelForDate,
+                    showOutsideMonth
+                  },
+                  `${date2.month}.${date2.day}`
+                ) : /* @__PURE__ */ jsxRuntime.jsx("td", {}, i)
+              )
+            ] }, weekIndex);
+          }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(a11y.VisuallyHidden, { id: calendarGridId + "description", children: getNavigationDescription() })
+  ] });
+};
+const RangeCalendar = ({
+  locale: localOverride,
+  ...rest
+}) => {
+  const props = { isDisabled: rest.disabled, ...rest };
+  const { locale } = i18n.useLocale();
+  return /* @__PURE__ */ jsxRuntime.jsx(i18n.I18nProvider, { locale: localOverride ?? locale, children: /* @__PURE__ */ jsxRuntime.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 } = i18n.useLocale();
+  const internalRef = React.useRef(null);
+  const ref = calendarRef ?? internalRef;
+  const _props = {
+    ...rest,
+    value,
+    onChange,
+    locale,
+    createCalendar,
+    minValue: minDate,
+    maxValue: getAdjustedMaxDate(maxDate),
+    visibleDuration
+  };
+  const state = calendar$1.useRangeCalendarState(_props);
+  const { calendarProps, prevButtonProps, nextButtonProps, title } = calendar.useRangeCalendar(_props, state, ref);
+  React.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...calendarProps,
+      ref,
+      className: classNames("eds-datepicker__calendar", className),
+      style,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "eds-datepicker__calendar__grids", children: Array.from({ length: monthCount }, (_, i) => {
+        const startDate = state.visibleRange.start.add({ months: i });
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "eds-datepicker__calendar__month", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "eds-datepicker__calendar__header", children: [
+            i === 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              CalendarButton,
+              {
+                ...prevButtonProps,
+                "aria-label": ariaLabelIfNorwegian(
+                  "Forrige måned",
+                  locale,
+                  prevButtonProps
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx(icons.LeftArrowIcon, { size: 20 })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { children: monthCount > 1 ? getMonthTitle(startDate) : title }),
+            i === monthCount - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+              CalendarButton,
+              {
+                ...nextButtonProps,
+                "aria-label": ariaLabelIfNorwegian(
+                  "Neste måned",
+                  locale,
+                  nextButtonProps
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx(icons.RightArrowIcon, { size: 20 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RangeCalendarGrid,
+            {
+              ...rest,
+              state,
+              startDate,
+              navigationDescription,
+              classNameForDate,
+              ariaLabelForDate,
+              showWeekNumbers,
+              weekNumberHeader,
+              showOutsideMonth
+            }
+          )
+        ] }, i);
+      }) })
+    }
+  );
+};
 const DatePicker = ({
   selectedDate,
   locale,
@@ -1267,6 +1531,7 @@ exports.DateField = DateField;
 exports.DatePicker = DatePicker;
 exports.NativeDatePicker = NativeDatePicker;
 exports.NativeTimePicker = NativeTimePicker;
+exports.RangeCalendar = RangeCalendar;
 exports.SimpleTimePicker = SimpleTimePicker;
 exports.TimePicker = TimePicker;
 exports.ariaLabelIfNorwegian = ariaLabelIfNorwegian;