@entur/datepicker 11.3.0 → 11.4.0-beta.0

package/dist/datepicker.esm.js

@@ -191,6 +191,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,
@@ -235,8 +240,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
   };
@@ -290,6 +294,7 @@ const CalendarButton = ({
 const CalendarCell = ({
   state,
   date,
+  showOutsideMonth = false,
   onSelectedCellClick = () => {
     return;
   },
@@ -312,20 +317,37 @@ const CalendarCell = ({
     formattedDate
   } = useCalendarCell({ date }, state, cellRef);
   const ariaLabel = `${buttonProps["aria-label"]}${weekNumberString} ${ariaLabelForDate?.(date) ?? ""}`;
-  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);
+        onCellClick();
+      },
+      onKeyUp: (e) => {
+        if (e.key === "Enter") {
+          state.selectDate(date);
+          onCellClick();
+        }
+      }
+    }
+  };
   return /* @__PURE__ */ jsx("td", { ...cellProps, className: "eds-datepicker__calendar__grid__cell__td", children: /* @__PURE__ */ 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) ?? ""]: !isOutsideVisibleRange,
+        [classNameForDate?.(date) ?? ""]: !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": isEqualDay(
           date,
           now(state.timeZone ?? getLocalTimeZone())
@@ -333,12 +355,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();
@@ -359,6 +381,7 @@ const CalendarGrid = ({
   },
   showWeekNumbers,
   weekNumberHeader,
+  showOutsideMonth = false,
   classNameForDate,
   ariaLabelForDate,
   ...rest
@@ -405,7 +428,7 @@ const CalendarGrid = ({
               showWeekNumbers && /* @__PURE__ */ jsx(
                 "th",
                 {
-                  "aria-hidden": true,
+                  "aria-label": `${weekNumberHeader} ${weekNumber}`,
                   className: "eds-datepicker__calendar__grid__weeknumber",
                   children: weekNumber
                 }
@@ -421,7 +444,8 @@ const CalendarGrid = ({
                     onSelectedCellClick,
                     onCellClick,
                     classNameForDate,
-                    ariaLabelForDate
+                    ariaLabelForDate,
+                    showOutsideMonth
                   },
                   `${date.month}.${date.day}`
                 ) : /* @__PURE__ */ jsx("td", {}, i)
@@ -449,6 +473,7 @@ const CalendarBase = ({
   maxDate,
   showWeekNumbers = false,
   weekNumberHeader = "uke",
+  showOutsideMonth = false,
   forcedReturnType,
   style,
   className,
@@ -477,7 +502,7 @@ const CalendarBase = ({
     locale,
     createCalendar,
     minValue: minDate,
-    maxValue: maxDate
+    maxValue: getAdjustedMaxDate(maxDate)
   };
   const state = useCalendarState(_props);
   const { calendarProps, prevButtonProps, nextButtonProps, title } = useCalendar(_props, state);
@@ -531,7 +556,8 @@ const CalendarBase = ({
             classNameForDate,
             ariaLabelForDate,
             showWeekNumbers,
-            weekNumberHeader
+            weekNumberHeader,
+            showOutsideMonth
           }
         )
       ]
@@ -553,6 +579,7 @@ const DatePicker = ({
   validationFeedback,
   showWeekNumbers,
   weekNumberHeader,
+  showOutsideMonth = false,
   disableModal = false,
   labelTooltip,
   navigationDescription,
@@ -579,7 +606,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
@@ -623,7 +650,8 @@ const DatePicker = ({
     classNameForDate,
     ariaLabelForDate,
     showWeekNumbers,
-    weekNumberHeader
+    weekNumberHeader,
+    showOutsideMonth
   };
   const isModal = typeof width !== "undefined" && width <= CALENDAR_MODAL_MAX_SCREEN_WIDTH && !disableModal;
   const popoverCalendar = /* @__PURE__ */ jsx(
@@ -1221,6 +1249,7 @@ export {
   convertValueToType,
   createCalendar,
   focusSegment,
+  getAdjustedMaxDate,
   getWeekNumberForDate,
   handleOnChange,
   lastMillisecondOfDay,