@entur/datepicker 11.1.0 → 11.1.1-beta.1

package/dist/datepicker.esm.js

@@ -326,7 +326,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,
@@ -335,6 +335,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,
@@ -351,6 +355,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)) != 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, {
@@ -362,16 +367,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,
@@ -379,6 +390,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,
@@ -432,6 +447,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", {
@@ -444,15 +460,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 = useLocale(),
     locale = _useLocale.locale;
   return React.createElement(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,
@@ -471,6 +490,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,
@@ -516,6 +539,7 @@ var CalendarBase = function CalendarBase(_ref2) {
     state: state,
     navigationDescription: navigationDescription,
     onSelectedCellClick: onSelectedCellClick,
+    onCellClick: onCellClick,
     classNameForDate: classNameForDate,
     ariaLabelForDate: ariaLabelForDate,
     showWeekNumbers: showWeekNumbers,
@@ -523,7 +547,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,
@@ -560,6 +584,14 @@ var DatePicker = function DatePicker(_ref) {
   var _useWindowDimensions = 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,
@@ -591,18 +623,25 @@ var DatePicker = function DatePicker(_ref) {
     floatingStyles = _useFloating.floatingStyles,
     update = _useFloating.update;
   useOnClickOutside([calendarRef], function () {
-    state.setOpen(false);
+    return state.setOpen(false);
   });
   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,