@entur/datepicker 11.1.0 → 11.1.1-beta.1

package/dist/DatePicker/Calendar.d.ts

@@ -13,6 +13,7 @@ type BaseCalendarProps<DateType extends DateValue> = {
     /** Ekstra klassenavn */
     className?: string;
     onSelectedCellClick?: () => void;
+    onCellClick?: () => void;
     /** Tidligste gyldige datovalg.
      * Eks: today(getLocalTimeZone()) == i dag i lokal tidssone.
      *
@@ -49,6 +50,7 @@ type BaseCalendarProps<DateType extends DateValue> = {
      *  @example (date) => isWeekend(date, 'no-NO') ? 'helgedag' : ''
      */
     ariaLabelForDate?: (date: CalendarDate) => string;
+    disabled?: boolean;
     locale?: string;
     calendarRef?: React.MutableRefObject<HTMLDivElement | null>;
     forcedReturnType?: DateFieldProps<DateType>['forcedReturnType'];

package/dist/DatePicker/CalendarCell.d.ts

@@ -6,8 +6,9 @@ type CalendarCellProps = {
     date: CalendarDate;
     weekNumberString: string;
     onSelectedCellClick?: () => void;
+    onCellClick?: () => void;
     classNameForDate?: (date: CalendarDate) => string;
     ariaLabelForDate?: (date: CalendarDate) => string;
 };
-export declare const CalendarCell: ({ state, date, onSelectedCellClick, weekNumberString, classNameForDate, ariaLabelForDate, ...rest }: CalendarCellProps) => React.JSX.Element;
+export declare const CalendarCell: ({ state, date, onSelectedCellClick, onCellClick, weekNumberString, classNameForDate, ariaLabelForDate, ...rest }: CalendarCellProps) => React.JSX.Element;
 export {};

package/dist/DatePicker/CalendarGrid.d.ts

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

package/dist/DatePicker/DatePicker.d.ts

@@ -40,5 +40,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, forcedReturnType, 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, disableModal, labelTooltip, navigationDescription, minDate, maxDate, modalTreshold, ariaLabelForDate, append, prepend, granularity, ...rest }: DatePickerProps<DateType>) => React.JSX.Element;
 export {};

package/dist/datepicker.cjs.development.js

@@ -329,7 +329,7 @@ var CalendarButton = function CalendarButton(_ref) {
   }), children);
 };
 
-var _excluded$8 = ["state", "date", "onSelectedCellClick", "weekNumberString", "classNameForDate", "ariaLabelForDate"];
+var _excluded$8 = ["state", "date", "onSelectedCellClick", "onCellClick", "weekNumberString", "classNameForDate", "ariaLabelForDate"];
 var CalendarCell = function CalendarCell(_ref) {
   var _ariaLabelForDate, _classNameForDate, _state$timeZone, _classNames;
   var state = _ref.state,
@@ -338,6 +338,10 @@ var CalendarCell = function CalendarCell(_ref) {
     onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
       return;
     } : _ref$onSelectedCellCl,
+    _ref$onCellClick = _ref.onCellClick,
+    onCellClick = _ref$onCellClick === void 0 ? function () {
+      return;
+    } : _ref$onCellClick,
     weekNumberString = _ref.weekNumberString,
     classNameForDate = _ref.classNameForDate,
     ariaLabelForDate = _ref.ariaLabelForDate,
@@ -354,6 +358,7 @@ var CalendarCell = function CalendarCell(_ref) {
     isUnavailable = _useCalendarCell.isUnavailable,
     formattedDate = _useCalendarCell.formattedDate;
   var ariaLabel = "" + buttonProps['aria-label'] + weekNumberString + " " + ((_ariaLabelForDate = ariaLabelForDate == null ? void 0 : ariaLabelForDate(date$1)) != null ? _ariaLabelForDate : '');
+  var cellCanBeSelected = !(isOutsideVisibleRange || isDisabled || isUnavailable);
   return React.createElement("td", _extends({}, cellProps, {
     className: "eds-datepicker__calendar__grid__cell__td"
   }), React.createElement("div", _extends({}, buttonProps, {
@@ -365,16 +370,22 @@ var CalendarCell = function CalendarCell(_ref) {
   }, rest, {
     onClick: function onClick(e) {
       buttonProps.onClick && buttonProps.onClick(e);
+      // Used to force close calendar on select
       isSelected && onSelectedCellClick();
+      cellCanBeSelected && onCellClick();
     },
-    onKeyDown: function onKeyDown(e) {
-      buttonProps.onKeyDown && buttonProps.onKeyDown(e);
-      if (e.key === 'Enter' || e.key === ' ') isSelected && onSelectedCellClick();
+    onKeyUp: function onKeyUp(e) {
+      buttonProps.onKeyUp && buttonProps.onKeyUp(e);
+      if (e.key === 'Enter') {
+        // Used to force close calendar on select
+        isSelected && onSelectedCellClick();
+        cellCanBeSelected && onCellClick();
+      }
     }
   }), formattedDate));
 };
 
-var _excluded$7 = ["state", "navigationDescription", "onSelectedCellClick", "showWeekNumbers", "weekNumberHeader", "classNameForDate", "ariaLabelForDate"];
+var _excluded$7 = ["state", "navigationDescription", "onSelectedCellClick", "onCellClick", "showWeekNumbers", "weekNumberHeader", "classNameForDate", "ariaLabelForDate"];
 var CalendarGrid = function CalendarGrid(_ref) {
   var state = _ref.state,
     navigationDescription = _ref.navigationDescription,
@@ -382,6 +393,10 @@ var CalendarGrid = function CalendarGrid(_ref) {
     onSelectedCellClick = _ref$onSelectedCellCl === void 0 ? function () {
       return;
     } : _ref$onSelectedCellCl,
+    _ref$onCellClick = _ref.onCellClick,
+    onCellClick = _ref$onCellClick === void 0 ? function () {
+      return;
+    } : _ref$onCellClick,
     showWeekNumbers = _ref.showWeekNumbers,
     weekNumberHeader = _ref.weekNumberHeader,
     classNameForDate = _ref.classNameForDate,
@@ -435,6 +450,7 @@ var CalendarGrid = function CalendarGrid(_ref) {
         "aria-describedby": calendarGridId + 'description',
         weekNumberString: showWeekNumbers ? ", " + weekNumberHeader + " " + weekNumber + "," : '',
         onSelectedCellClick: onSelectedCellClick,
+        onCellClick: onCellClick,
         classNameForDate: classNameForDate,
         ariaLabelForDate: ariaLabelForDate
       }) : React.createElement("td", {
@@ -447,15 +463,18 @@ var CalendarGrid = function CalendarGrid(_ref) {
 };
 
 var _excluded$6 = ["locale"],
-  _excluded2$3 = ["selectedDate", "onChange", "minDate", "maxDate", "showWeekNumbers", "weekNumberHeader", "forcedReturnType", "style", "className", "navigationDescription", "onSelectedCellClick", "classNameForDate", "ariaLabelForDate", "calendarRef"];
+  _excluded2$3 = ["selectedDate", "onChange", "minDate", "maxDate", "showWeekNumbers", "weekNumberHeader", "forcedReturnType", "style", "className", "navigationDescription", "onSelectedCellClick", "onCellClick", "classNameForDate", "ariaLabelForDate", "calendarRef"];
 var Calendar = function Calendar(_ref) {
   var localOverride = _ref.locale,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+  var props = _extends({
+    isDisabled: rest.disabled
+  }, rest);
   var _useLocale = i18n.useLocale(),
     locale = _useLocale.locale;
   return React.createElement(i18n.I18nProvider, {
     locale: localOverride != null ? localOverride : locale
-  }, React.createElement(CalendarBase, _extends({}, rest)));
+  }, React.createElement(CalendarBase, _extends({}, props)));
 };
 var CalendarBase = function CalendarBase(_ref2) {
   var selectedDate = _ref2.selectedDate,
@@ -474,6 +493,10 @@ var CalendarBase = function CalendarBase(_ref2) {
     onSelectedCellClick = _ref2$onSelectedCellC === void 0 ? function () {
       return;
     } : _ref2$onSelectedCellC,
+    _ref2$onCellClick = _ref2.onCellClick,
+    onCellClick = _ref2$onCellClick === void 0 ? function () {
+      return;
+    } : _ref2$onCellClick,
     classNameForDate = _ref2.classNameForDate,
     ariaLabelForDate = _ref2.ariaLabelForDate,
     calendarRef = _ref2.calendarRef,
@@ -519,6 +542,7 @@ var CalendarBase = function CalendarBase(_ref2) {
     state: state,
     navigationDescription: navigationDescription,
     onSelectedCellClick: onSelectedCellClick,
+    onCellClick: onCellClick,
     classNameForDate: classNameForDate,
     ariaLabelForDate: ariaLabelForDate,
     showWeekNumbers: showWeekNumbers,
@@ -526,7 +550,7 @@ var CalendarBase = function CalendarBase(_ref2) {
   })));
 };
 
-var _excluded$5 = ["selectedDate", "locale", "disabled", "readOnly", "showTime", "showTimeZone", "classNameForDate", "className", "variant", "feedback", "validationVariant", "validationFeedback", "showWeekNumbers", "weekNumberHeader", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate", "modalTreshold", "forcedReturnType", "ariaLabelForDate", "append", "prepend", "granularity"];
+var _excluded$5 = ["selectedDate", "locale", "disabled", "readOnly", "showTime", "showTimeZone", "classNameForDate", "className", "variant", "feedback", "validationVariant", "validationFeedback", "showWeekNumbers", "weekNumberHeader", "disableModal", "labelTooltip", "navigationDescription", "minDate", "maxDate", "modalTreshold", "ariaLabelForDate", "append", "prepend", "granularity"];
 var DatePicker = function DatePicker(_ref) {
   var selectedDate = _ref.selectedDate,
     locale = _ref.locale,
@@ -563,6 +587,14 @@ var DatePicker = function DatePicker(_ref) {
   var _useWindowDimensions = utils.useWindowDimensions(),
     width = _useWindowDimensions.width;
   var _props = _extends({}, rest, {
+    onChange: function onChange(value) {
+      return handleOnChange({
+        value: value,
+        selectedDate: selectedDate,
+        forcedReturnType: rest.forcedReturnType,
+        onChange: rest.onChange
+      });
+    },
     minValue: minDate,
     // this weird logic makes sure the entire day is included if no time is provided in maxDate
     maxValue: 'hour' in (maxDate != null ? maxDate : {}) ? maxDate : maxDate !== undefined ? lastMillisecondOfDay(maxDate) : undefined,
@@ -594,18 +626,25 @@ var DatePicker = function DatePicker(_ref) {
     floatingStyles = _useFloating.floatingStyles,
     update = _useFloating.update;
   utils.useOnClickOutside([calendarRef], function () {
-    state.setOpen(false);
+    return state.setOpen(false);
   });
   utils.useOnEscape(calendarRef, function () {
-    state.setOpen(false);
+    return state.setOpen(false);
   });
   var calendarSharedProps = _extends({}, dialogProps, calendarProps, {
+    // We don't use handleOnChange here since it's handled internally by Calendar
     onChange: rest.onChange,
+    forcedReturnType: rest.forcedReturnType,
     disabled: disabled,
     navigationDescription: navigationDescription,
     onSelectedCellClick: function onSelectedCellClick() {
       return state.setOpen(false);
     },
+    // onCellClick is a temporary fix solving an issue where the
+    // calendar sometimes doesn't close on date selection
+    onCellClick: function onCellClick() {
+      return state.setOpen(false);
+    },
     selectedDate: selectedDate,
     minDate: minDate,
     maxDate: maxDate,