@dhis2-ui/calendar 10.0.2 → 10.0.3

package/build/cjs/calendar/calendar-container.js

@@ -13,7 +13,6 @@ var _navigationContainer = require("./navigation-container.js");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const wrapperBorderColor = _uiConstants.colors.grey300;
 const backgroundColor = 'none';
 const CalendarContainer = exports.CalendarContainer = /*#__PURE__*/_react.default.memo(function CalendarContainer(_ref) {
@@ -30,8 +29,7 @@ const CalendarContainer = exports.CalendarContainer = /*#__PURE__*/_react.defaul
     prevMonth,
     prevYear,
     languageDirection,
-    excludedRef,
-    unfocusable = false
+    calendarRef
   } = _ref;
   const navigationProps = (0, _react.useMemo)(() => {
     return {
@@ -51,17 +49,14 @@ const CalendarContainer = exports.CalendarContainer = /*#__PURE__*/_react.defaul
     "data-test": "calendar",
     className: _style.default.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]]) + " " + "calendar-wrapper"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    ref: excludedRef,
+    ref: calendarRef,
     className: _style.default.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]])
-  }, /*#__PURE__*/_react.default.createElement(_navigationContainer.NavigationContainer, _extends({}, navigationProps, {
-    unfocusable: unfocusable
-  })), /*#__PURE__*/_react.default.createElement(_calendarTable.CalendarTable, {
+  }, /*#__PURE__*/_react.default.createElement(_navigationContainer.NavigationContainer, navigationProps), /*#__PURE__*/_react.default.createElement(_calendarTable.CalendarTable, {
     selectedDate: date,
     calendarWeekDays: calendarWeekDays,
     weekDayLabels: weekDayLabels,
     cellSize: cellSize,
-    width: width,
-    unfocusable: unfocusable
+    width: width
   }))), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "2823859047",
     dynamic: [backgroundColor, wrapperBorderColor, width]
@@ -70,7 +65,6 @@ const CalendarContainer = exports.CalendarContainer = /*#__PURE__*/_react.defaul
 CalendarContainer.propTypes = {
   /** the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601) */
   date: _propTypes.default.string,
-  unfocusable: _propTypes.default.bool,
   ..._calendarTable.CalendarTableProps,
   ..._navigationContainer.NavigationContainerProps
 };

package/build/cjs/calendar/calendar-table-cell.js

@@ -14,8 +14,7 @@ const CalendarTableCell = _ref => {
   let {
     day,
     cellSize,
-    selectedDate,
-    unfocusable
+    selectedDate
   } = _ref;
   const dayHoverBackgroundColor = _uiConstants.colors.grey200;
   const selectedDayBackgroundColor = _uiConstants.colors.teal700;
@@ -25,7 +24,6 @@ const CalendarTableCell = _ref => {
     className: _style.default.dynamic([["2052411850", [cellSize, cellSize, cellSize, cellSize, _uiConstants.colors.grey900, dayHoverBackgroundColor, _uiConstants.colors.grey300, selectedDayBackgroundColor, _uiConstants.colors.teal600, _uiConstants.colors.teal200, _uiConstants.colors.grey600]]])
   }, /*#__PURE__*/_react.default.createElement("button", {
     name: "day",
-    tabIndex: unfocusable ? -1 : 0,
     className: _style.default.dynamic([["2052411850", [cellSize, cellSize, cellSize, cellSize, _uiConstants.colors.grey900, dayHoverBackgroundColor, _uiConstants.colors.grey300, selectedDayBackgroundColor, _uiConstants.colors.teal600, _uiConstants.colors.teal200, _uiConstants.colors.grey600]]]) + " " + ((0, _classnames.default)('day', {
       isSelected: selectedDate === (day === null || day === void 0 ? void 0 : day.dateValue),
       isToday: day.isToday,
@@ -47,6 +45,5 @@ CalendarTableCell.propTypes = {
     label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
     onClick: _propTypes.default.func
   }),
-  selectedDate: _propTypes.default.string,
-  unfocusable: _propTypes.default.bool
+  selectedDate: _propTypes.default.string
 };

package/build/cjs/calendar/calendar-table.js

@@ -17,8 +17,7 @@ const CalendarTable = _ref => {
     calendarWeekDays,
     width,
     cellSize,
-    selectedDate,
-    unfocusable
+    selectedDate
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.dynamic([["452536960", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4]]]) + " " + "calendar-table-wrapper"
@@ -36,8 +35,7 @@ const CalendarTable = _ref => {
     day: day,
     key: day === null || day === void 0 ? void 0 : day.dateValue,
     cellSize: cellSize,
-    width: width,
-    unfocusable: unfocusable
+    width: width
   })))))), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "452536960",
     dynamic: [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4]
@@ -56,7 +54,6 @@ const CalendarTableProps = exports.CalendarTableProps = {
   }).isRequired).isRequired).isRequired,
   cellSize: _propTypes.default.string,
   selectedDate: _propTypes.default.string,
-  unfocusable: _propTypes.default.bool,
   weekDayLabels: _propTypes.default.arrayOf(_propTypes.default.string),
   width: _propTypes.default.string
 };

package/build/cjs/calendar/navigation-container.js

@@ -22,8 +22,7 @@ const NavigationContainer = _ref => {
     nextMonth,
     nextYear,
     prevMonth,
-    prevYear,
-    unfocusable
+    prevYear
   } = _ref;
   const PreviousIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronLeft16 : _uiIcons.IconChevronRight16;
   const NextIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronRight16 : _uiIcons.IconChevronLeft16;
@@ -43,7 +42,6 @@ const NavigationContainer = _ref => {
     "data-test": "calendar-previous-month",
     "aria-label": `${_index.default.t(`Go to ${prevMonth.label}`)}`,
     type: "button",
-    tabIndex: unfocusable ? -1 : 0,
     className: _style.default.dynamic([["1327991300", [_uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.spacers.dp8]]])
   }, /*#__PURE__*/_react.default.createElement(PreviousIcon, {
     className: _style.default.dynamic([["1327991300", [_uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.spacers.dp8]]])
@@ -59,7 +57,6 @@ const NavigationContainer = _ref => {
     name: "next-month",
     "aria-label": `${_index.default.t(`Go to ${nextMonth.label}`)}`,
     type: "button",
-    tabIndex: unfocusable ? -1 : 0,
     className: _style.default.dynamic([["1327991300", [_uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.spacers.dp8]]])
   }, /*#__PURE__*/_react.default.createElement(NextIcon, {
     className: _style.default.dynamic([["1327991300", [_uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.spacers.dp8]]])
@@ -72,7 +69,6 @@ const NavigationContainer = _ref => {
     name: "previous-year",
     "aria-label": `${_index.default.t('Go to previous year')}`,
     type: "button",
-    tabIndex: unfocusable ? -1 : 0,
     className: _style.default.dynamic([["1327991300", [_uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.spacers.dp8]]])
   }, /*#__PURE__*/_react.default.createElement(PreviousIcon, {
     className: _style.default.dynamic([["1327991300", [_uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.spacers.dp8]]])
@@ -88,7 +84,6 @@ const NavigationContainer = _ref => {
     name: "next-year",
     "aria-label": `${_index.default.t('Go to next year')}`,
     type: "button",
-    tabIndex: unfocusable ? -1 : 0,
     className: _style.default.dynamic([["1327991300", [_uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.spacers.dp8]]])
   }, /*#__PURE__*/_react.default.createElement(NextIcon, {
     className: _style.default.dynamic([["1327991300", [_uiConstants.spacers.dp4, wrapperBorderColor, headerBackground, _uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp4, _uiConstants.spacers.dp8]]])
@@ -121,7 +116,6 @@ const NavigationContainerProps = exports.NavigationContainerProps = {
   prevYear: _propTypes.default.shape({
     label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
     navigateTo: _propTypes.default.func
-  }),
-  unfocusable: _propTypes.default.bool
+  })
 };
 NavigationContainer.propTypes = NavigationContainerProps;

package/build/cjs/calendar-input/calendar-input.js

@@ -47,9 +47,9 @@ const CalendarInput = function () {
     ...rest
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const ref = (0, _react.useRef)();
+  const calendarRef = (0, _react.useRef)();
   const [open, setOpen] = (0, _react.useState)(false);
   const [partialDate, setPartialDate] = (0, _react.useState)(date);
-  const excludeRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => setPartialDate(date), [date]);
   const useDatePickerOptions = (0, _react.useMemo)(() => ({
     calendar,
@@ -58,8 +58,7 @@ const CalendarInput = function () {
     weekDayFormat
   }), [calendar, locale, numberingSystem, weekDayFormat]);
   const onChooseDate = (date, validationOptions) => {
-    // Handling clearing (with clicking the Clear button, or deleting input)
-    if (clearable && (date === null || date === '')) {
+    if (!date) {
       parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
         calendarDateString: null,
         validation: {
@@ -68,12 +67,6 @@ const CalendarInput = function () {
       });
       return;
     }
-
-    // ToDo: This is now a workaround for handling choosing from the date picker
-    // where the blur event gets triggered causing a call with undefined first
-    if (date === undefined) {
-      return;
-    }
     const validation = (0, _multiCalendarDates.validateDateString)(date, validationOptions);
     parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
       calendarDateString: date,
@@ -101,10 +94,12 @@ const CalendarInput = function () {
     setPartialDate(e.value);
   };
   const handleBlur = (_, e) => {
-    onChooseDate(partialDate, validationOptions);
-    if (excludeRef.current && !excludeRef.current.contains(e.relatedTarget)) {
-      setOpen(false);
+    var _calendarRef$current;
+    if (e.relatedTarget && (_calendarRef$current = calendarRef.current) !== null && _calendarRef$current !== void 0 && _calendarRef$current.contains(e.relatedTarget)) {
+      return;
     }
+    onChooseDate(partialDate, validationOptions);
+    setOpen(false);
   };
   const onFocus = () => {
     var _rest$onFocus;
@@ -112,23 +107,21 @@ const CalendarInput = function () {
     rest === null || rest === void 0 ? void 0 : (_rest$onFocus = rest.onFocus) === null || _rest$onFocus === void 0 ? void 0 : _rest$onFocus.call(rest);
   };
   const languageDirection = (0, _multiCalendarDates.useResolvedDirection)(dir, locale);
-  const calendarProps = (0, _react.useMemo)(() => {
-    return {
-      date,
-      width,
-      cellSize,
-      isValid: pickerResults.isValid,
-      calendarWeekDays: pickerResults.calendarWeekDays,
-      weekDayLabels: pickerResults.weekDayLabels,
-      currMonth: pickerResults.currMonth,
-      currYear: pickerResults.currYear,
-      nextMonth: pickerResults.nextMonth,
-      nextYear: pickerResults.nextYear,
-      prevMonth: pickerResults.prevMonth,
-      prevYear: pickerResults.prevYear,
-      languageDirection
-    };
-  }, [cellSize, date, pickerResults, width, languageDirection]);
+  const calendarProps = (0, _react.useMemo)(() => ({
+    date,
+    width,
+    cellSize,
+    isValid: pickerResults.isValid,
+    calendarWeekDays: pickerResults.calendarWeekDays,
+    weekDayLabels: pickerResults.weekDayLabels,
+    currMonth: pickerResults.currMonth,
+    currYear: pickerResults.currYear,
+    nextMonth: pickerResults.nextMonth,
+    nextYear: pickerResults.nextYear,
+    prevMonth: pickerResults.prevMonth,
+    prevYear: pickerResults.prevYear,
+    languageDirection
+  }), [cellSize, date, pickerResults, width, languageDirection]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     className: _style.default.dynamic([["423137534", [inputWidth, rest.error || rest.warning ? '36px' : '6px']]]) + " " + "calendar-input-wrapper"
@@ -151,21 +144,16 @@ const CalendarInput = function () {
     dataTest: "calendar-clear-button",
     secondary: true,
     small: true,
-    onClick: () => {
-      onChooseDate(null);
-    },
+    onClick: () => onChooseDate(null),
     type: "button"
   }, _index.default.t('Clear')))), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
-    onBackdropClick: () => {
-      setOpen(false);
-    }
+    onBackdropClick: () => setOpen(false)
   }, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
     reference: ref,
     placement: "bottom-start",
     modifiers: [offsetModifier]
   }, /*#__PURE__*/_react.default.createElement(_card.Card, null, /*#__PURE__*/_react.default.createElement(_calendarContainer.CalendarContainer, _extends({}, calendarProps, {
-    excludedRef: excludeRef,
-    unfocusable: true
+    calendarRef: calendarRef
   }))))), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "423137534",
     dynamic: [inputWidth, rest.error || rest.warning ? '36px' : '6px']

package/build/cjs/stories/calendar-input.prod.stories.js

@@ -123,22 +123,30 @@ const CalendarWithClearButton = _ref2 => {
 };
 exports.CalendarWithClearButton = CalendarWithClearButton;
 function CalendarWithEditiableInput() {
-  const [date, setDate] = (0, _react.useState)('2020-07-03');
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_calendarInput.CalendarInput, {
+  const [date, setDate] = (0, _react.useState)('');
+  const [validation, setValidation] = (0, _react.useState)({});
+  const errorProps = {
+    error: !!(validation !== null && validation !== void 0 && validation.error),
+    validationText: validation === null || validation === void 0 ? void 0 : validation.validationText
+  };
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_calendarInput.CalendarInput, _extends({
     date: date,
     calendar: "gregory",
-    onDateSelect: selectedDate => {
-      const date = selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.calendarDateString;
-      setDate(date);
+    onDateSelect: result => {
+      const {
+        calendarDateString,
+        validation
+      } = result || {};
+      setDate(calendarDateString);
+      setValidation(validation);
     },
     onFocus: () => {
       console.log('focused');
     },
-    width: "400px",
-    minDate: "2020-07-01",
-    maxDate: "2020-07-09",
+    width: "400px"
+  }, errorProps, {
     clearable: true
-  })));
+  }))));
 }
 function CalendarWithStrictValidation() {
   const [validation, setValidation] = (0, _react.useState)({});

package/build/es/calendar/calendar-container.js

@@ -1,5 +1,4 @@
 import _JSXStyle from "styled-jsx/style";
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { colors } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React, { useMemo } from 'react';
@@ -21,8 +20,7 @@ export const CalendarContainer = /*#__PURE__*/React.memo(function CalendarContai
     prevMonth,
     prevYear,
     languageDirection,
-    excludedRef,
-    unfocusable = false
+    calendarRef
   } = _ref;
   const navigationProps = useMemo(() => {
     return {
@@ -42,17 +40,14 @@ export const CalendarContainer = /*#__PURE__*/React.memo(function CalendarContai
     "data-test": "calendar",
     className: _JSXStyle.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]]) + " " + "calendar-wrapper"
   }, /*#__PURE__*/React.createElement("div", {
-    ref: excludedRef,
+    ref: calendarRef,
     className: _JSXStyle.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]])
-  }, /*#__PURE__*/React.createElement(NavigationContainer, _extends({}, navigationProps, {
-    unfocusable: unfocusable
-  })), /*#__PURE__*/React.createElement(CalendarTable, {
+  }, /*#__PURE__*/React.createElement(NavigationContainer, navigationProps), /*#__PURE__*/React.createElement(CalendarTable, {
     selectedDate: date,
     calendarWeekDays: calendarWeekDays,
     weekDayLabels: weekDayLabels,
     cellSize: cellSize,
-    width: width,
-    unfocusable: unfocusable
+    width: width
   }))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2823859047",
     dynamic: [backgroundColor, wrapperBorderColor, width]
@@ -61,7 +56,6 @@ export const CalendarContainer = /*#__PURE__*/React.memo(function CalendarContai
 CalendarContainer.propTypes = {
   /** the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601) */
   date: PropTypes.string,
-  unfocusable: PropTypes.bool,
   ...CalendarTableProps,
   ...NavigationContainerProps
 };

package/build/es/calendar/calendar-table-cell.js

@@ -7,8 +7,7 @@ export const CalendarTableCell = _ref => {
   let {
     day,
     cellSize,
-    selectedDate,
-    unfocusable
+    selectedDate
   } = _ref;
   const dayHoverBackgroundColor = colors.grey200;
   const selectedDayBackgroundColor = colors.teal700;
@@ -18,7 +17,6 @@ export const CalendarTableCell = _ref => {
     className: _JSXStyle.dynamic([["2052411850", [cellSize, cellSize, cellSize, cellSize, colors.grey900, dayHoverBackgroundColor, colors.grey300, selectedDayBackgroundColor, colors.teal600, colors.teal200, colors.grey600]]])
   }, /*#__PURE__*/React.createElement("button", {
     name: "day",
-    tabIndex: unfocusable ? -1 : 0,
     className: _JSXStyle.dynamic([["2052411850", [cellSize, cellSize, cellSize, cellSize, colors.grey900, dayHoverBackgroundColor, colors.grey300, selectedDayBackgroundColor, colors.teal600, colors.teal200, colors.grey600]]]) + " " + (cx('day', {
       isSelected: selectedDate === (day === null || day === void 0 ? void 0 : day.dateValue),
       isToday: day.isToday,
@@ -39,6 +37,5 @@ CalendarTableCell.propTypes = {
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     onClick: PropTypes.func
   }),
-  selectedDate: PropTypes.string,
-  unfocusable: PropTypes.bool
+  selectedDate: PropTypes.string
 };

package/build/es/calendar/calendar-table.js

@@ -10,8 +10,7 @@ export const CalendarTable = _ref => {
     calendarWeekDays,
     width,
     cellSize,
-    selectedDate,
-    unfocusable
+    selectedDate
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["452536960", [spacers.dp4, spacers.dp4]]]) + " " + "calendar-table-wrapper"
@@ -29,8 +28,7 @@ export const CalendarTable = _ref => {
     day: day,
     key: day === null || day === void 0 ? void 0 : day.dateValue,
     cellSize: cellSize,
-    width: width,
-    unfocusable: unfocusable
+    width: width
   })))))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "452536960",
     dynamic: [spacers.dp4, spacers.dp4]
@@ -48,7 +46,6 @@ export const CalendarTableProps = {
   }).isRequired).isRequired).isRequired,
   cellSize: PropTypes.string,
   selectedDate: PropTypes.string,
-  unfocusable: PropTypes.bool,
   weekDayLabels: PropTypes.arrayOf(PropTypes.string),
   width: PropTypes.string
 };

package/build/es/calendar/navigation-container.js

@@ -15,8 +15,7 @@ export const NavigationContainer = _ref => {
     nextMonth,
     nextYear,
     prevMonth,
-    prevYear,
-    unfocusable
+    prevYear
   } = _ref;
   const PreviousIcon = languageDirection === 'ltr' ? IconChevronLeft16 : IconChevronRight16;
   const NextIcon = languageDirection === 'ltr' ? IconChevronRight16 : IconChevronLeft16;
@@ -36,7 +35,6 @@ export const NavigationContainer = _ref => {
     "data-test": "calendar-previous-month",
     "aria-label": `${i18n.t(`Go to ${prevMonth.label}`)}`,
     type: "button",
-    tabIndex: unfocusable ? -1 : 0,
     className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]])
   }, /*#__PURE__*/React.createElement(PreviousIcon, {
     className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]])
@@ -52,7 +50,6 @@ export const NavigationContainer = _ref => {
     name: "next-month",
     "aria-label": `${i18n.t(`Go to ${nextMonth.label}`)}`,
     type: "button",
-    tabIndex: unfocusable ? -1 : 0,
     className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]])
   }, /*#__PURE__*/React.createElement(NextIcon, {
     className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]])
@@ -65,7 +62,6 @@ export const NavigationContainer = _ref => {
     name: "previous-year",
     "aria-label": `${i18n.t('Go to previous year')}`,
     type: "button",
-    tabIndex: unfocusable ? -1 : 0,
     className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]])
   }, /*#__PURE__*/React.createElement(PreviousIcon, {
     className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]])
@@ -81,7 +77,6 @@ export const NavigationContainer = _ref => {
     name: "next-year",
     "aria-label": `${i18n.t('Go to next year')}`,
     type: "button",
-    tabIndex: unfocusable ? -1 : 0,
     className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]])
   }, /*#__PURE__*/React.createElement(NextIcon, {
     className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]])
@@ -113,7 +108,6 @@ export const NavigationContainerProps = {
   prevYear: PropTypes.shape({
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     navigateTo: PropTypes.func
-  }),
-  unfocusable: PropTypes.bool
+  })
 };
 NavigationContainer.propTypes = NavigationContainerProps;

package/build/es/calendar-input/calendar-input.js

@@ -38,9 +38,9 @@ export const CalendarInput = function () {
     ...rest
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const ref = useRef();
+  const calendarRef = useRef();
   const [open, setOpen] = useState(false);
   const [partialDate, setPartialDate] = useState(date);
-  const excludeRef = useRef(null);
   useEffect(() => setPartialDate(date), [date]);
   const useDatePickerOptions = useMemo(() => ({
     calendar,
@@ -49,8 +49,7 @@ export const CalendarInput = function () {
     weekDayFormat
   }), [calendar, locale, numberingSystem, weekDayFormat]);
   const onChooseDate = (date, validationOptions) => {
-    // Handling clearing (with clicking the Clear button, or deleting input)
-    if (clearable && (date === null || date === '')) {
+    if (!date) {
       parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
         calendarDateString: null,
         validation: {
@@ -59,12 +58,6 @@ export const CalendarInput = function () {
       });
       return;
     }
-
-    // ToDo: This is now a workaround for handling choosing from the date picker
-    // where the blur event gets triggered causing a call with undefined first
-    if (date === undefined) {
-      return;
-    }
     const validation = validateDateString(date, validationOptions);
     parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
       calendarDateString: date,
@@ -92,10 +85,12 @@ export const CalendarInput = function () {
     setPartialDate(e.value);
   };
   const handleBlur = (_, e) => {
-    onChooseDate(partialDate, validationOptions);
-    if (excludeRef.current && !excludeRef.current.contains(e.relatedTarget)) {
-      setOpen(false);
+    var _calendarRef$current;
+    if (e.relatedTarget && (_calendarRef$current = calendarRef.current) !== null && _calendarRef$current !== void 0 && _calendarRef$current.contains(e.relatedTarget)) {
+      return;
     }
+    onChooseDate(partialDate, validationOptions);
+    setOpen(false);
   };
   const onFocus = () => {
     var _rest$onFocus;
@@ -103,23 +98,21 @@ export const CalendarInput = function () {
     rest === null || rest === void 0 ? void 0 : (_rest$onFocus = rest.onFocus) === null || _rest$onFocus === void 0 ? void 0 : _rest$onFocus.call(rest);
   };
   const languageDirection = useResolvedDirection(dir, locale);
-  const calendarProps = useMemo(() => {
-    return {
-      date,
-      width,
-      cellSize,
-      isValid: pickerResults.isValid,
-      calendarWeekDays: pickerResults.calendarWeekDays,
-      weekDayLabels: pickerResults.weekDayLabels,
-      currMonth: pickerResults.currMonth,
-      currYear: pickerResults.currYear,
-      nextMonth: pickerResults.nextMonth,
-      nextYear: pickerResults.nextYear,
-      prevMonth: pickerResults.prevMonth,
-      prevYear: pickerResults.prevYear,
-      languageDirection
-    };
-  }, [cellSize, date, pickerResults, width, languageDirection]);
+  const calendarProps = useMemo(() => ({
+    date,
+    width,
+    cellSize,
+    isValid: pickerResults.isValid,
+    calendarWeekDays: pickerResults.calendarWeekDays,
+    weekDayLabels: pickerResults.weekDayLabels,
+    currMonth: pickerResults.currMonth,
+    currYear: pickerResults.currYear,
+    nextMonth: pickerResults.nextMonth,
+    nextYear: pickerResults.nextYear,
+    prevMonth: pickerResults.prevMonth,
+    prevYear: pickerResults.prevYear,
+    languageDirection
+  }), [cellSize, date, pickerResults, width, languageDirection]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: _JSXStyle.dynamic([["423137534", [inputWidth, rest.error || rest.warning ? '36px' : '6px']]]) + " " + "calendar-input-wrapper"
@@ -142,21 +135,16 @@ export const CalendarInput = function () {
     dataTest: "calendar-clear-button",
     secondary: true,
     small: true,
-    onClick: () => {
-      onChooseDate(null);
-    },
+    onClick: () => onChooseDate(null),
     type: "button"
   }, i18n.t('Clear')))), open && /*#__PURE__*/React.createElement(Layer, {
-    onBackdropClick: () => {
-      setOpen(false);
-    }
+    onBackdropClick: () => setOpen(false)
   }, /*#__PURE__*/React.createElement(Popper, {
     reference: ref,
     placement: "bottom-start",
     modifiers: [offsetModifier]
   }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CalendarContainer, _extends({}, calendarProps, {
-    excludedRef: excludeRef,
-    unfocusable: true
+    calendarRef: calendarRef
   }))))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "423137534",
     dynamic: [inputWidth, rest.error || rest.warning ? '36px' : '6px']

package/build/es/stories/calendar-input.prod.stories.js

@@ -109,22 +109,30 @@ export const CalendarWithClearButton = _ref2 => {
   }, date !== null && date !== void 0 ? date : 'undefined')));
 };
 export function CalendarWithEditiableInput() {
-  const [date, setDate] = useState('2020-07-03');
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CalendarInput, {
+  const [date, setDate] = useState('');
+  const [validation, setValidation] = useState({});
+  const errorProps = {
+    error: !!(validation !== null && validation !== void 0 && validation.error),
+    validationText: validation === null || validation === void 0 ? void 0 : validation.validationText
+  };
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CalendarInput, _extends({
     date: date,
     calendar: "gregory",
-    onDateSelect: selectedDate => {
-      const date = selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.calendarDateString;
-      setDate(date);
+    onDateSelect: result => {
+      const {
+        calendarDateString,
+        validation
+      } = result || {};
+      setDate(calendarDateString);
+      setValidation(validation);
     },
     onFocus: () => {
       console.log('focused');
     },
-    width: "400px",
-    minDate: "2020-07-01",
-    maxDate: "2020-07-09",
+    width: "400px"
+  }, errorProps, {
     clearable: true
-  })));
+  }))));
 }
 export function CalendarWithStrictValidation() {
   const [validation, setValidation] = useState({});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/calendar",
-    "version": "10.0.2",
+    "version": "10.0.3",
     "description": "UI Calendar",
     "repository": {
         "type": "git",
@@ -33,15 +33,15 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/button": "10.0.2",
-        "@dhis2-ui/card": "10.0.2",
-        "@dhis2-ui/input": "10.0.2",
-        "@dhis2-ui/layer": "10.0.2",
-        "@dhis2-ui/popper": "10.0.2",
+        "@dhis2-ui/button": "10.0.3",
+        "@dhis2-ui/card": "10.0.3",
+        "@dhis2-ui/input": "10.0.3",
+        "@dhis2-ui/layer": "10.0.3",
+        "@dhis2-ui/popper": "10.0.3",
         "@dhis2/multi-calendar-dates": "2.0.0",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "10.0.2",
-        "@dhis2/ui-icons": "10.0.2",
+        "@dhis2/ui-constants": "10.0.3",
+        "@dhis2/ui-icons": "10.0.3",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },