@entur/datepicker 11.3.0 → 11.4.0-beta.1

package/dist/DatePicker/Calendar.d.ts

@@ -34,6 +34,10 @@ type BaseCalendarProps<DateType extends DateValue> = {
     /** 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

package/dist/DatePicker/CalendarCell.d.ts

@@ -5,10 +5,11 @@ type CalendarCellProps = {
     state: CalendarState;
     date: CalendarDate;
     weekNumberString: string;
+    showOutsideMonth?: boolean;
     onSelectedCellClick?: () => void;
     onCellClick?: () => void;
     classNameForDate?: (date: CalendarDate) => string;
     ariaLabelForDate?: (date: CalendarDate) => string;
 };
-export declare const CalendarCell: ({ state, date, onSelectedCellClick, onCellClick, weekNumberString, classNameForDate, ariaLabelForDate, ...rest }: CalendarCellProps) => React.JSX.Element;
+export declare const CalendarCell: ({ state, date, showOutsideMonth, onSelectedCellClick, onCellClick, weekNumberString, classNameForDate, ariaLabelForDate, ...rest }: CalendarCellProps) => React.JSX.Element;
 export {};

package/dist/DatePicker/CalendarGrid.d.ts

@@ -6,10 +6,11 @@ type CalendarGridProps = {
     navigationDescription?: string;
     showWeekNumbers: boolean;
     weekNumberHeader: string;
+    showOutsideMonth?: boolean;
     onSelectedCellClick?: () => void;
     onCellClick?: () => void;
     classNameForDate?: (date: CalendarDate) => string;
     ariaLabelForDate?: (date: CalendarDate) => string;
 };
-export declare const CalendarGrid: ({ state, navigationDescription, onSelectedCellClick, onCellClick, showWeekNumbers, weekNumberHeader, classNameForDate, ariaLabelForDate, ...rest }: CalendarGridProps) => React.JSX.Element;
+export declare const CalendarGrid: ({ state, navigationDescription, onSelectedCellClick, onCellClick, showWeekNumbers, weekNumberHeader, showOutsideMonth, classNameForDate, ariaLabelForDate, ...rest }: CalendarGridProps) => React.JSX.Element;
 export {};

package/dist/DatePicker/DatePicker.d.ts

@@ -9,6 +9,10 @@ type BaseDatePickerProps = {
     /** Overskrift som vises for ukenummer-kolonnen. Vises kun hvis 'showWeekNumbers' er true.
      * @default '#' */
     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;
     /** Hvis true vil kalenderen alltid vises i en popover når den åpnes
      *  @default false
      */
@@ -39,5 +43,5 @@ type BaseDatePickerProps = {
     ariaLabelForDate?: (date: CalendarDate) => string;
 };
 export type DatePickerProps<DateType extends DateValue> = Omit<BaseDateFieldProps<DateType>, keyof BaseDatePickerProps | 'labelProps' | 'fieldProps' | 'groupProps' | 'dateFieldRef'> & BaseDatePickerProps & ExtendedDateFieldProps<DateType>;
-export declare const DatePicker: <DateType extends DateValue>({ selectedDate, locale, disabled, readOnly, showTime, showTimeZone, classNameForDate, className, variant, feedback, validationVariant, validationFeedback, showWeekNumbers, weekNumberHeader, disableModal, labelTooltip, navigationDescription, minDate, maxDate, modalTreshold, ariaLabelForDate, append, prepend, granularity, ...rest }: DatePickerProps<DateType>) => React.JSX.Element;
+export declare const DatePicker: <DateType extends DateValue>({ selectedDate, locale, disabled, readOnly, showTime, showTimeZone, classNameForDate, className, variant, feedback, validationVariant, validationFeedback, showWeekNumbers, weekNumberHeader, showOutsideMonth, disableModal, labelTooltip, navigationDescription, minDate, maxDate, modalTreshold, ariaLabelForDate, append, prepend, granularity, ...rest }: DatePickerProps<DateType>) => React.JSX.Element;
 export {};

package/dist/datepicker.cjs.js

@@ -192,6 +192,11 @@ function handleOnChange({
   }
   onChange?.(value);
 }
+function getAdjustedMaxDate(maxDate) {
+  if ("hour" in (maxDate ?? {})) return maxDate;
+  if (maxDate !== void 0) return lastMillisecondOfDay(maxDate);
+  return void 0;
+}
 const DateField = ({
   selectedDate,
   onChange,
@@ -236,8 +241,7 @@ const DateField = ({
     hideTimeZone: !showTimeZone,
     granularity,
     minValue: minDate,
-    // this weird logic makes sure the entire day is included if no time is provided in maxDate
-    maxValue: "hour" in (maxDate ?? {}) ? maxDate : maxDate !== void 0 ? lastMillisecondOfDay(maxDate) : void 0,
+    maxValue: getAdjustedMaxDate(maxDate),
     isDisabled: isDisabled || disabled || readOnly,
     shouldForceLeadingZeros: true
   };
@@ -291,6 +295,7 @@ const CalendarButton = ({
 const CalendarCell = ({
   state,
   date: date$1,
+  showOutsideMonth = false,
   onSelectedCellClick = () => {
     return;
   },
@@ -313,20 +318,37 @@ const CalendarCell = ({
     formattedDate
   } = calendar.useCalendarCell({ date: date$1 }, state, cellRef);
   const ariaLabel = `${buttonProps["aria-label"]}${weekNumberString} ${ariaLabelForDate?.(date$1) ?? ""}`;
-  const cellCanBeSelected = !(isOutsideVisibleRange || isDisabled || isUnavailable);
+  const cellCanBeSelected = showOutsideMonth ? !(isDisabled || isUnavailable) : !(isOutsideVisibleRange || isDisabled || isUnavailable);
+  const shouldHideDate = !showOutsideMonth && isOutsideVisibleRange;
+  const extendedButtonProps = {
+    ...buttonProps,
+    ...showOutsideMonth && isOutsideVisibleRange && {
+      onClick: () => {
+        state.selectDate(date$1);
+        onCellClick();
+      },
+      onKeyUp: (e) => {
+        if (e.key === "Enter") {
+          state.selectDate(date$1);
+          onCellClick();
+        }
+      }
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsx("td", { ...cellProps, className: "eds-datepicker__calendar__grid__cell__td", children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      ...buttonProps,
+      ...extendedButtonProps,
       "aria-label": ariaLabel,
-      "aria-hidden": isOutsideVisibleRange,
+      "aria-hidden": shouldHideDate,
       ref: cellRef,
-      hidden: isOutsideVisibleRange,
+      hidden: shouldHideDate,
       className: classNames("eds-datepicker__calendar__grid__cell", {
-        [classNameForDate?.(date$1) ?? ""]: !isOutsideVisibleRange,
+        [classNameForDate?.(date$1) ?? ""]: !shouldHideDate,
         "eds-datepicker__calendar__grid__cell--selected": isSelected,
         "eds-datepicker__calendar__grid__cell--disabled": isDisabled || isUnavailable,
-        "eds-datepicker__calendar__grid__cell--outside-month": isOutsideVisibleRange,
+        "eds-datepicker__calendar__grid__cell--outside-month": isOutsideVisibleRange && !showOutsideMonth,
+        "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())
@@ -334,12 +356,12 @@ const CalendarCell = ({
       }),
       ...rest,
       onClick: (e) => {
-        buttonProps.onClick && buttonProps.onClick(e);
+        extendedButtonProps?.onClick?.(e);
         isSelected && onSelectedCellClick();
         cellCanBeSelected && onCellClick();
       },
       onKeyUp: (e) => {
-        buttonProps.onKeyUp && buttonProps.onKeyUp(e);
+        extendedButtonProps?.onKeyUp?.(e);
         if (e.key === "Enter") {
           isSelected && onSelectedCellClick();
           cellCanBeSelected && onCellClick();
@@ -360,6 +382,7 @@ const CalendarGrid = ({
   },
   showWeekNumbers,
   weekNumberHeader,
+  showOutsideMonth = false,
   classNameForDate,
   ariaLabelForDate,
   ...rest
@@ -406,7 +429,7 @@ const CalendarGrid = ({
               showWeekNumbers && /* @__PURE__ */ jsxRuntime.jsx(
                 "th",
                 {
-                  "aria-hidden": true,
+                  "aria-label": `${weekNumberHeader} ${weekNumber}`,
                   className: "eds-datepicker__calendar__grid__weeknumber",
                   children: weekNumber
                 }
@@ -422,7 +445,8 @@ const CalendarGrid = ({
                     onSelectedCellClick,
                     onCellClick,
                     classNameForDate,
-                    ariaLabelForDate
+                    ariaLabelForDate,
+                    showOutsideMonth
                   },
                   `${date2.month}.${date2.day}`
                 ) : /* @__PURE__ */ jsxRuntime.jsx("td", {}, i)
@@ -450,6 +474,7 @@ const CalendarBase = ({
   maxDate,
   showWeekNumbers = false,
   weekNumberHeader = "uke",
+  showOutsideMonth = false,
   forcedReturnType,
   style,
   className,
@@ -478,7 +503,7 @@ const CalendarBase = ({
     locale,
     createCalendar,
     minValue: minDate,
-    maxValue: maxDate
+    maxValue: getAdjustedMaxDate(maxDate)
   };
   const state = calendar$1.useCalendarState(_props);
   const { calendarProps, prevButtonProps, nextButtonProps, title } = calendar.useCalendar(_props, state);
@@ -532,7 +557,8 @@ const CalendarBase = ({
             classNameForDate,
             ariaLabelForDate,
             showWeekNumbers,
-            weekNumberHeader
+            weekNumberHeader,
+            showOutsideMonth
           }
         )
       ]
@@ -554,6 +580,7 @@ const DatePicker = ({
   validationFeedback,
   showWeekNumbers,
   weekNumberHeader,
+  showOutsideMonth = false,
   disableModal = false,
   labelTooltip,
   navigationDescription,
@@ -580,7 +607,7 @@ const DatePicker = ({
     }),
     minValue: minDate,
     // this weird logic makes sure the entire day is included if no time is provided in maxDate
-    maxValue: "hour" in (maxDate ?? {}) ? maxDate : maxDate !== void 0 ? lastMillisecondOfDay(maxDate) : void 0,
+    maxValue: getAdjustedMaxDate(maxDate),
     value: selectedDate,
     granularity,
     isDisabled: disabled || readOnly
@@ -624,7 +651,8 @@ const DatePicker = ({
     classNameForDate,
     ariaLabelForDate,
     showWeekNumbers,
-    weekNumberHeader
+    weekNumberHeader,
+    showOutsideMonth
   };
   const isModal = typeof width !== "undefined" && width <= CALENDAR_MODAL_MAX_SCREEN_WIDTH && !disableModal;
   const popoverCalendar = /* @__PURE__ */ jsxRuntime.jsx(
@@ -1233,6 +1261,7 @@ exports.ariaLabelIfNorwegian = ariaLabelIfNorwegian;
 exports.convertValueToType = convertValueToType;
 exports.createCalendar = createCalendar;
 exports.focusSegment = focusSegment;
+exports.getAdjustedMaxDate = getAdjustedMaxDate;
 exports.getWeekNumberForDate = getWeekNumberForDate;
 exports.handleOnChange = handleOnChange;
 exports.lastMillisecondOfDay = lastMillisecondOfDay;