@dhis2-ui/calendar 9.11.4 → 9.12.0-alpha.2

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

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalendarContainer = void 0;
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+var _uiConstants = require("@dhis2/ui-constants");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _calendarTable = require("./calendar-table.js");
+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) {
+  let {
+    date,
+    width,
+    cellSize,
+    calendarWeekDays,
+    weekDayLabels,
+    currMonth,
+    currYear,
+    nextMonth,
+    nextYear,
+    prevMonth,
+    prevYear,
+    languageDirection,
+    excludedRef,
+    unfocusable
+  } = _ref;
+  const navigationProps = (0, _react.useMemo)(() => {
+    return {
+      currMonth,
+      currYear,
+      nextMonth,
+      nextYear,
+      prevMonth,
+      prevYear,
+      languageDirection
+    };
+  }, [currMonth, currYear, languageDirection, nextMonth, nextYear, prevMonth, prevYear]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    dir: languageDirection,
+    "data-test": "calendar",
+    className: _style.default.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]]) + " " + "calendar-wrapper"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: excludedRef,
+    className: _style.default.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]])
+  }, /*#__PURE__*/_react.default.createElement(_navigationContainer.NavigationContainer, _extends({}, navigationProps, {
+    unfocusable: unfocusable
+  })), /*#__PURE__*/_react.default.createElement(_calendarTable.CalendarTable, {
+    selectedDate: date,
+    calendarWeekDays: calendarWeekDays,
+    weekDayLabels: weekDayLabels,
+    cellSize: cellSize,
+    width: width,
+    unfocusable: unfocusable
+  }))), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "2823859047",
+    dynamic: [backgroundColor, wrapperBorderColor, width]
+  }, [`.calendar-wrapper.__jsx-style-dynamic-selector{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;background-color:${backgroundColor};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:1px solid ${wrapperBorderColor};border-radius:3px;min-width:${width};width:-webkit-max-content;width:-moz-max-content;width:max-content;box-shadow:0px 4px 6px -2px #2129340d;box-shadow:0px 10px 15px -3px #2129341a;}`]));
+});
+CalendarContainer.defaultProps = {
+  cellSize: '32px',
+  width: '240px',
+  unfocusable: false
+};
+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,7 +14,8 @@ const CalendarTableCell = _ref => {
   let {
     day,
     cellSize,
-    selectedDate
+    selectedDate,
+    unfocusable
   } = _ref;
   const dayHoverBackgroundColor = _uiConstants.colors.grey200;
   const selectedDayBackgroundColor = _uiConstants.colors.teal700;
@@ -24,6 +25,7 @@ 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.calendarDate),
       isToday: day.isToday,
@@ -45,5 +47,6 @@ CalendarTableCell.propTypes = {
     label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
     onClick: _propTypes.default.func
   }),
-  selectedDate: _propTypes.default.string
+  selectedDate: _propTypes.default.string,
+  unfocusable: _propTypes.default.bool
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CalendarTable = void 0;
+exports.CalendarTableProps = exports.CalendarTable = void 0;
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _uiConstants = require("@dhis2/ui-constants");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -17,7 +17,8 @@ const CalendarTable = _ref => {
     calendarWeekDays,
     width,
     cellSize,
-    selectedDate
+    selectedDate,
+    unfocusable
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.dynamic([["452536960", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4]]]) + " " + "calendar-table-wrapper"
@@ -35,14 +36,15 @@ const CalendarTable = _ref => {
     day: day,
     key: day === null || day === void 0 ? void 0 : day.calendarDate,
     cellSize: cellSize,
-    width: width
+    width: width,
+    unfocusable: unfocusable
   })))))), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "452536960",
     dynamic: [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4]
   }, [`.calendar-table.__jsx-style-dynamic-selector{border:none;border-collapse:collapse;width:100%;margin-block:${_uiConstants.spacers.dp4};}`, ".calendar-table.__jsx-style-dynamic-selector tr.__jsx-style-dynamic-selector,.calendar-table.__jsx-style-dynamic-selector td.__jsx-style-dynamic-selector{border:none;}", `.calendar-table-wrapper.__jsx-style-dynamic-selector{padding-inline:${_uiConstants.spacers.dp4};}`]));
 };
 exports.CalendarTable = CalendarTable;
-CalendarTable.propTypes = {
+const CalendarTableProps = exports.CalendarTableProps = {
   calendarWeekDays: _propTypes.default.arrayOf(_propTypes.default.arrayOf(_propTypes.default.shape({
     calendarDate: _propTypes.default.string,
     isInCurrentMonth: _propTypes.default.bool,
@@ -54,6 +56,8 @@ CalendarTable.propTypes = {
   }).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
-};
+};
+CalendarTable.propTypes = CalendarTableProps;

package/build/cjs/calendar/calendar.js

@@ -4,13 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CalendarProps = exports.Calendar = void 0;
-var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _multiCalendarDates = require("@dhis2/multi-calendar-dates");
-var _uiConstants = require("@dhis2/ui-constants");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
-var _calendarTable = require("./calendar-table.js");
-var _navigationContainer = require("./navigation-container.js");
+var _calendarContainer = require("./calendar-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 }; }
@@ -27,8 +24,6 @@ const Calendar = _ref => {
     width,
     cellSize
   } = _ref;
-  const wrapperBorderColor = _uiConstants.colors.grey300;
-  const backgroundColor = 'none';
   const [selectedDateString, setSelectedDateString] = (0, _react.useState)(date);
   const languageDirection = (0, _multiCalendarDates.useResolvedDirection)(dir, locale);
   const options = {
@@ -38,7 +33,7 @@ const Calendar = _ref => {
     numberingSystem,
     weekDayFormat
   };
-  const pickerOptions = (0, _multiCalendarDates.useDatePicker)({
+  const pickerResults = (0, _multiCalendarDates.useDatePicker)({
     onDateSelect: result => {
       const {
         calendarDateString
@@ -49,29 +44,30 @@ const Calendar = _ref => {
     date: selectedDateString,
     options
   });
-  const {
-    calendarWeekDays,
-    weekDayLabels
-  } = pickerOptions;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]])
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    dir: languageDirection,
-    "data-test": "calendar",
-    className: _style.default.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]]) + " " + "calendar-wrapper"
-  }, /*#__PURE__*/_react.default.createElement(_navigationContainer.NavigationContainer, {
-    pickerOptions: pickerOptions,
-    languageDirection: languageDirection
-  }), /*#__PURE__*/_react.default.createElement(_calendarTable.CalendarTable, {
-    selectedDate: selectedDateString,
-    calendarWeekDays: calendarWeekDays,
-    weekDayLabels: weekDayLabels,
-    cellSize: cellSize,
-    width: width
-  })), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "2823859047",
-    dynamic: [backgroundColor, wrapperBorderColor, width]
-  }, [`.calendar-wrapper.__jsx-style-dynamic-selector{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;background-color:${backgroundColor};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:1px solid ${wrapperBorderColor};border-radius:3px;min-width:${width};width:-webkit-max-content;width:-moz-max-content;width:max-content;box-shadow:0px 4px 6px -2px #2129340d;box-shadow:0px 10px 15px -3px #2129341a;}`]));
+  const calendarProps = (0, _react.useMemo)(() => {
+    return {
+      date,
+      dir,
+      locale,
+      width,
+      cellSize,
+      // minDate,
+      // maxDate,
+      // validation, // todo: clarify how we use validation props (and format) in Calendar (not CalendarInput)
+      // format,
+      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, dir, locale, pickerResults, width, languageDirection]);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_calendarContainer.CalendarContainer, calendarProps));
 };
 exports.Calendar = Calendar;
 Calendar.defaultProps = {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NavigationContainer = void 0;
+exports.NavigationContainerProps = exports.NavigationContainer = void 0;
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _uiConstants = require("@dhis2/ui-constants");
 var _uiIcons = require("@dhis2/ui-icons");
@@ -17,18 +17,16 @@ const NavigationContainer = _ref => {
   var _currYear$label;
   let {
     languageDirection,
-    pickerOptions
-  } = _ref;
-  const PreviousIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronLeft16 : _uiIcons.IconChevronRight16;
-  const NextIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronRight16 : _uiIcons.IconChevronLeft16;
-  const {
     currMonth,
     currYear,
     nextMonth,
     nextYear,
     prevMonth,
-    prevYear
-  } = pickerOptions;
+    prevYear,
+    unfocusable
+  } = _ref;
+  const PreviousIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronLeft16 : _uiIcons.IconChevronRight16;
+  const NextIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronRight16 : _uiIcons.IconChevronLeft16;
 
   // Ethiopic years - when localised to English - add the era (i.e. 2015 ERA1), which is redundant in practice (like writing AD for gregorian years)
   // there is an ongoing discussion in JS-Temporal polyfill whether the era should be included or not, but for our case, it's safer to remove it
@@ -45,6 +43,7 @@ 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([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
   }, /*#__PURE__*/_react.default.createElement(PreviousIcon, {
     className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
@@ -60,6 +59,7 @@ 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([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
   }, /*#__PURE__*/_react.default.createElement(NextIcon, {
     className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
@@ -72,6 +72,7 @@ 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([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
   }, /*#__PURE__*/_react.default.createElement(PreviousIcon, {
     className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
@@ -87,6 +88,7 @@ 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([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
   }, /*#__PURE__*/_react.default.createElement(NextIcon, {
     className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
@@ -96,30 +98,30 @@ const NavigationContainer = _ref => {
   }, ["button.__jsx-style-dynamic-selector{background:none;border:0;}", ".month.__jsx-style-dynamic-selector,.year.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:default;}", ".month.__jsx-style-dynamic-selector .curr.__jsx-style-dynamic-selector,.year.__jsx-style-dynamic-selector .curr.__jsx-style-dynamic-selector{-webkit-flex:2;-ms-flex:2;flex:2;white-space:nowrap;}", ".prev.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;text-align:center;}", `.prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector{padding:${_uiConstants.spacers.dp4};height:24px;width:24px;color:${_uiConstants.colors.grey600};border-radius:3px;}`, ".prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector{width:16px;height:16px;}", `.prev.__jsx-style-dynamic-selector:hover button.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector:hover button.__jsx-style-dynamic-selector{background-color:${_uiConstants.colors.grey200};color:${_uiConstants.colors.grey900};cursor:pointer;}`, `.prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector:active,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector:active{background-color:${_uiConstants.colors.grey300};}`, ".label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:4px 8px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;min-height:16px;}", `.navigation-container.__jsx-style-dynamic-selector{gap:${_uiConstants.spacers.dp8};padding:${_uiConstants.spacers.dp4};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;border-bottom:1px solid ${wrapperBorderColor};background-color:${headerBackground};font-size:1.08em;}`]));
 };
 exports.NavigationContainer = NavigationContainer;
-NavigationContainer.propTypes = {
+const NavigationContainerProps = exports.NavigationContainerProps = {
+  currMonth: _propTypes.default.shape({
+    label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+  }),
+  currYear: _propTypes.default.shape({
+    label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+  }),
   languageDirection: _propTypes.default.oneOf(['ltr', 'rtl']),
-  pickerOptions: _propTypes.default.shape({
-    currMonth: _propTypes.default.shape({
-      label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
-    }),
-    currYear: _propTypes.default.shape({
-      label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
-    }),
-    nextMonth: _propTypes.default.shape({
-      label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-      navigateTo: _propTypes.default.func
-    }),
-    nextYear: _propTypes.default.shape({
-      label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-      navigateTo: _propTypes.default.func
-    }),
-    prevMonth: _propTypes.default.shape({
-      label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-      navigateTo: _propTypes.default.func
-    }),
-    prevYear: _propTypes.default.shape({
-      label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-      navigateTo: _propTypes.default.func
-    })
-  })
-};
+  nextMonth: _propTypes.default.shape({
+    label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    navigateTo: _propTypes.default.func
+  }),
+  nextYear: _propTypes.default.shape({
+    label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    navigateTo: _propTypes.default.func
+  }),
+  prevMonth: _propTypes.default.shape({
+    label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    navigateTo: _propTypes.default.func
+  }),
+  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/__tests__/calendar-input.test.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _react2 = _interopRequireDefault(require("react"));
+var _calendarInput = require("../calendar-input.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+describe('Calendar Input', () => {
+  it('allow selection of a date through the calendar widget', async () => {
+    const onDateSelectMock = jest.fn();
+    const screen = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_calendarInput.CalendarInput, {
+      calendar: "gregory",
+      onDateSelect: onDateSelectMock
+    }));
+    const dateInput = (0, _react.within)(screen.getByTestId('dhis2-uicore-input')).getByRole('textbox');
+    _react.fireEvent.focus(dateInput);
+    const calendar = await screen.findByTestId('calendar');
+    expect(calendar).toBeInTheDocument();
+    const todayString = new Date().toISOString().slice(0, -14);
+    const today = (0, _react.within)(calendar).getByTestId(todayString);
+    _react.fireEvent.click(today);
+    await (0, _react.waitFor)(() => {
+      expect(calendar).not.toBeInTheDocument();
+    });
+    expect(onDateSelectMock).toHaveBeenCalledWith(expect.objectContaining({
+      calendarDateString: todayString
+    }));
+  });
+  it('allow selection of a date through the input', async () => {
+    const onDateSelectMock = jest.fn();
+    const screen = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_calendarInput.CalendarInput, {
+      calendar: "gregory",
+      onDateSelect: onDateSelectMock
+    }));
+    const dateInputString = '2024/10/12';
+    const dateInput = (0, _react.within)(screen.getByTestId('dhis2-uicore-input')).getByRole('textbox');
+    _react.fireEvent.change(dateInput, {
+      target: {
+        value: dateInputString
+      }
+    });
+    _react.fireEvent.blur(dateInput);
+    expect(onDateSelectMock).toHaveBeenCalledWith(expect.objectContaining({
+      calendarDateString: dateInputString
+    }));
+  });
+});

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CalendarInput = void 0;
 var _style = _interopRequireDefault(require("styled-jsx/style"));
+var _multiCalendarDates = require("@dhis2/multi-calendar-dates");
 var _button = require("@dhis2-ui/button");
 var _card = require("@dhis2-ui/card");
 var _input = require("@dhis2-ui/input");
@@ -12,6 +13,7 @@ var _layer = require("@dhis2-ui/layer");
 var _popper = require("@dhis2-ui/popper");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
+var _calendarContainer = require("../calendar/calendar-container.js");
 var _calendar = require("../calendar/calendar.js");
 var _index = _interopRequireDefault(require("../locales/index.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); }
@@ -26,7 +28,7 @@ const offsetModifier = {
 };
 const CalendarInput = function () {
   let {
-    onDateSelect,
+    onDateSelect: parentOnDateSelect,
     calendar,
     date,
     dir,
@@ -37,45 +39,86 @@ const CalendarInput = function () {
     width,
     cellSize,
     clearable,
+    minDate,
+    maxDate,
+    format,
+    // todo: props and types for format and validation
+    strictValidation,
     ...rest
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const ref = (0, _react.useRef)();
   const [open, setOpen] = (0, _react.useState)(false);
-  const calendarProps = _react.default.useMemo(() => {
-    const onDateSelectWrapper = selectedDate => {
+  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,
+    locale,
+    timeZone,
+    // todo: we probably shouldn't have had timezone here in the first place
+    numberingSystem,
+    weekDayFormat
+  }), [calendar, locale, numberingSystem, timeZone, weekDayFormat]);
+  const pickerResults = (0, _multiCalendarDates.useDatePicker)({
+    onDateSelect: result => {
       setOpen(false);
-      onDateSelect === null || onDateSelect === void 0 ? void 0 : onDateSelect(selectedDate);
-    };
+      parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(result);
+    },
+    date,
+    minDate: minDate,
+    maxDate: maxDate,
+    strictValidation: strictValidation,
+    format: format,
+    options: useDatePickerOptions
+  });
+  const handleChange = e => {
+    setPartialDate(e.value);
+  };
+  const handleBlur = (_, e) => {
+    parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
+      calendarDateString: partialDate
+    });
+    if (excludeRef.current && !excludeRef.current.contains(e.relatedTarget)) {
+      setOpen(false);
+    }
+  };
+  const onFocus = () => {
+    setOpen(true);
+  };
+  const languageDirection = (0, _multiCalendarDates.useResolvedDirection)(dir, locale);
+  const calendarProps = (0, _react.useMemo)(() => {
     return {
-      onDateSelect: onDateSelectWrapper,
-      calendar,
       date,
-      dir,
-      locale,
-      numberingSystem,
-      weekDayFormat,
-      timeZone,
       width,
-      cellSize
+      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
     };
-  }, [calendar, cellSize, date, dir, locale, numberingSystem, onDateSelect, timeZone, weekDayFormat, width]);
-  const onFocus = () => {
-    setOpen(true);
-  };
+  }, [cellSize, date, pickerResults, width, languageDirection]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
-    className: "jsx-862452676" + " " + "calendar-input-wrapper"
+    className: "jsx-633677374" + " " + "calendar-input-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_input.InputField, _extends({
     label: _index.default.t('Pick a date')
   }, rest, {
     type: "text",
     onFocus: onFocus,
-    value: date
+    value: partialDate,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    validationText: pickerResults.errorMessage || pickerResults.warningMessage,
+    error: !!pickerResults.errorMessage,
+    warning: !!pickerResults.warningMessage
   })), clearable && /*#__PURE__*/_react.default.createElement("div", {
-    className: "jsx-862452676" + " " + ((0, _classnames.default)('calendar-clear-button', {
-      // ToDo: this is a workaround to show the clear button in the correct place when an icon is shown.
-      // Long-term, we should abstract and share the logic multi-select uses for the input-wrapper
-      // https://dhis2.atlassian.net/browse/DHIS2-14848
+    className: "jsx-633677374" + " " + ((0, _classnames.default)('calendar-clear-button', {
       'with-icon': rest.valid || rest.error || rest.warning || rest.loading,
       'with-dense-wrapper': rest.dense
     }) || "")
@@ -83,7 +126,9 @@ const CalendarInput = function () {
     dataTest: "calendar-clear-button",
     secondary: true,
     small: true,
-    onClick: () => calendarProps.onDateSelect(null),
+    onClick: () => {
+      parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(null);
+    },
     type: "button"
   }, _index.default.t('Clear')))), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
     onBackdropClick: () => {
@@ -93,17 +138,17 @@ const CalendarInput = function () {
     reference: ref,
     placement: "bottom-start",
     modifiers: [offsetModifier]
-  }, /*#__PURE__*/_react.default.createElement(_card.Card, null, /*#__PURE__*/_react.default.createElement(_calendar.Calendar, _extends({}, calendarProps, {
-    date: date
+  }, /*#__PURE__*/_react.default.createElement(_card.Card, null, /*#__PURE__*/_react.default.createElement(_calendarContainer.CalendarContainer, _extends({}, calendarProps, {
+    excludedRef: excludeRef,
+    unfocusable: true
   }))))), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "862452676"
-  }, [".calendar-input-wrapper.jsx-862452676{position:relative;}", ".calendar-clear-button.jsx-862452676{position:absolute;inset-inline-end:6px;-webkit-inset-block-start:27px;-ms-intb-rlock-start:27px;inset-block-start:27px;}", ".calendar-clear-button.with-icon.jsx-862452676{inset-inline-end:36px;}", ".calendar-clear-button.with-dense-wrapper.jsx-862452676{-webkit-inset-block-start:23px;-ms-intb-rlock-start:23px;inset-block-start:23px;}"]));
+    id: "633677374"
+  }, [".calendar-input-wrapper.jsx-633677374{position:relative;}", ".calendar-clear-button.jsx-633677374{position:absolute;inset-inline-end:6px;-webkit-inset-block-start:27px;-ms-intb-rlock-start:27px;inset-block-start:27px;}", ".calendar-clear-button.with-icon.jsx-633677374{inset-inline-end:36px;}", ".calendar-clear-button.with-dense-wrapper.jsx-633677374{-webkit-inset-block-start:23px;-ms-intb-rlock-start:23px;inset-block-start:23px;}"]));
 };
 exports.CalendarInput = CalendarInput;
 CalendarInput.defaultProps = {
   dataTest: 'dhis2-uiwidgets-calendar-inputfield'
 };
 CalendarInput.propTypes = {
-  ..._calendar.CalendarProps,
-  ..._input.InputFieldProps
+  ..._calendar.CalendarProps
 };

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

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.NepaliWithNepali = exports.NepaliWithEnglish = exports.IslamicWithArabic = exports.GregorianWithEnglish = exports.GregorianWithArabic = exports.EthiopicWithEnglish = exports.EthiopicWithAmharic = exports.CalendarWithClearButton = void 0;
+exports.CalendarWithClearButton = void 0;
+exports.CalendarWithEditiableInput = CalendarWithEditiableInput;
+exports.default = exports.NepaliWithNepali = exports.NepaliWithEnglish = exports.IslamicWithArabic = exports.GregorianWithEnglish = exports.GregorianWithArabic = exports.EthiopicWithEnglish = exports.EthiopicWithAmharic = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _calendarInput = require("../calendar-input/calendar-input.js");
 var _calendarStoryWrapper = require("./calendar-story-wrapper.js");
@@ -114,4 +116,21 @@ const CalendarWithClearButton = _ref2 => {
     "data-test": "storybook-calendar-date-value"
   }, date !== null && date !== void 0 ? date : 'undefined')));
 };
-exports.CalendarWithClearButton = CalendarWithClearButton;
+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, {
+    editable: true,
+    date: date,
+    calendar: "gregory",
+    onDateSelect: selectedDate => {
+      const date = selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.calendarDateString;
+      setDate(date);
+    },
+    width: '700px',
+    inputWidth: "900px",
+    timeZone: 'UTC',
+    minDate: '2020-07-01',
+    maxDate: '2020-07-09'
+  })));
+}

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

@@ -0,0 +1,72 @@
+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';
+import { CalendarTable, CalendarTableProps } from './calendar-table.js';
+import { NavigationContainer, NavigationContainerProps } from './navigation-container.js';
+const wrapperBorderColor = colors.grey300;
+const backgroundColor = 'none';
+export const CalendarContainer = /*#__PURE__*/React.memo(function CalendarContainer(_ref) {
+  let {
+    date,
+    width,
+    cellSize,
+    calendarWeekDays,
+    weekDayLabels,
+    currMonth,
+    currYear,
+    nextMonth,
+    nextYear,
+    prevMonth,
+    prevYear,
+    languageDirection,
+    excludedRef,
+    unfocusable
+  } = _ref;
+  const navigationProps = useMemo(() => {
+    return {
+      currMonth,
+      currYear,
+      nextMonth,
+      nextYear,
+      prevMonth,
+      prevYear,
+      languageDirection
+    };
+  }, [currMonth, currYear, languageDirection, nextMonth, nextYear, prevMonth, prevYear]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]])
+  }, /*#__PURE__*/React.createElement("div", {
+    dir: languageDirection,
+    "data-test": "calendar",
+    className: _JSXStyle.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]]) + " " + "calendar-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: excludedRef,
+    className: _JSXStyle.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]])
+  }, /*#__PURE__*/React.createElement(NavigationContainer, _extends({}, navigationProps, {
+    unfocusable: unfocusable
+  })), /*#__PURE__*/React.createElement(CalendarTable, {
+    selectedDate: date,
+    calendarWeekDays: calendarWeekDays,
+    weekDayLabels: weekDayLabels,
+    cellSize: cellSize,
+    width: width,
+    unfocusable: unfocusable
+  }))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2823859047",
+    dynamic: [backgroundColor, wrapperBorderColor, width]
+  }, [`.calendar-wrapper.__jsx-style-dynamic-selector{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;background-color:${backgroundColor};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:1px solid ${wrapperBorderColor};border-radius:3px;min-width:${width};width:-webkit-max-content;width:-moz-max-content;width:max-content;box-shadow:0px 4px 6px -2px #2129340d;box-shadow:0px 10px 15px -3px #2129341a;}`]));
+});
+CalendarContainer.defaultProps = {
+  cellSize: '32px',
+  width: '240px',
+  unfocusable: false
+};
+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,7 +7,8 @@ export const CalendarTableCell = _ref => {
   let {
     day,
     cellSize,
-    selectedDate
+    selectedDate,
+    unfocusable
   } = _ref;
   const dayHoverBackgroundColor = colors.grey200;
   const selectedDayBackgroundColor = colors.teal700;
@@ -17,6 +18,7 @@ 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.calendarDate),
       isToday: day.isToday,
@@ -37,5 +39,6 @@ CalendarTableCell.propTypes = {
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     onClick: PropTypes.func
   }),
-  selectedDate: PropTypes.string
+  selectedDate: PropTypes.string,
+  unfocusable: PropTypes.bool
 };

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

@@ -10,7 +10,8 @@ export const CalendarTable = _ref => {
     calendarWeekDays,
     width,
     cellSize,
-    selectedDate
+    selectedDate,
+    unfocusable
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["452536960", [spacers.dp4, spacers.dp4]]]) + " " + "calendar-table-wrapper"
@@ -28,13 +29,14 @@ export const CalendarTable = _ref => {
     day: day,
     key: day === null || day === void 0 ? void 0 : day.calendarDate,
     cellSize: cellSize,
-    width: width
+    width: width,
+    unfocusable: unfocusable
   })))))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "452536960",
     dynamic: [spacers.dp4, spacers.dp4]
   }, [`.calendar-table.__jsx-style-dynamic-selector{border:none;border-collapse:collapse;width:100%;margin-block:${spacers.dp4};}`, ".calendar-table.__jsx-style-dynamic-selector tr.__jsx-style-dynamic-selector,.calendar-table.__jsx-style-dynamic-selector td.__jsx-style-dynamic-selector{border:none;}", `.calendar-table-wrapper.__jsx-style-dynamic-selector{padding-inline:${spacers.dp4};}`]));
 };
-CalendarTable.propTypes = {
+export const CalendarTableProps = {
   calendarWeekDays: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.shape({
     calendarDate: PropTypes.string,
     isInCurrentMonth: PropTypes.bool,
@@ -46,6 +48,8 @@ CalendarTable.propTypes = {
   }).isRequired).isRequired).isRequired,
   cellSize: PropTypes.string,
   selectedDate: PropTypes.string,
+  unfocusable: PropTypes.bool,
   weekDayLabels: PropTypes.arrayOf(PropTypes.string),
   width: PropTypes.string
-};
+};
+CalendarTable.propTypes = CalendarTableProps;

package/build/es/calendar/calendar.js

@@ -1,10 +1,7 @@
-import _JSXStyle from "styled-jsx/style";
 import { useDatePicker, useResolvedDirection } from '@dhis2/multi-calendar-dates';
-import { colors } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
-import React, { useState } from 'react';
-import { CalendarTable } from './calendar-table.js';
-import { NavigationContainer } from './navigation-container.js';
+import React, { useMemo, useState } from 'react';
+import { CalendarContainer } from './calendar-container.js';
 export const Calendar = _ref => {
   let {
     onDateSelect,
@@ -18,8 +15,6 @@ export const Calendar = _ref => {
     width,
     cellSize
   } = _ref;
-  const wrapperBorderColor = colors.grey300;
-  const backgroundColor = 'none';
   const [selectedDateString, setSelectedDateString] = useState(date);
   const languageDirection = useResolvedDirection(dir, locale);
   const options = {
@@ -29,7 +24,7 @@ export const Calendar = _ref => {
     numberingSystem,
     weekDayFormat
   };
-  const pickerOptions = useDatePicker({
+  const pickerResults = useDatePicker({
     onDateSelect: result => {
       const {
         calendarDateString
@@ -40,29 +35,30 @@ export const Calendar = _ref => {
     date: selectedDateString,
     options
   });
-  const {
-    calendarWeekDays,
-    weekDayLabels
-  } = pickerOptions;
-  return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]])
-  }, /*#__PURE__*/React.createElement("div", {
-    dir: languageDirection,
-    "data-test": "calendar",
-    className: _JSXStyle.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]]) + " " + "calendar-wrapper"
-  }, /*#__PURE__*/React.createElement(NavigationContainer, {
-    pickerOptions: pickerOptions,
-    languageDirection: languageDirection
-  }), /*#__PURE__*/React.createElement(CalendarTable, {
-    selectedDate: selectedDateString,
-    calendarWeekDays: calendarWeekDays,
-    weekDayLabels: weekDayLabels,
-    cellSize: cellSize,
-    width: width
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2823859047",
-    dynamic: [backgroundColor, wrapperBorderColor, width]
-  }, [`.calendar-wrapper.__jsx-style-dynamic-selector{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;background-color:${backgroundColor};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:1px solid ${wrapperBorderColor};border-radius:3px;min-width:${width};width:-webkit-max-content;width:-moz-max-content;width:max-content;box-shadow:0px 4px 6px -2px #2129340d;box-shadow:0px 10px 15px -3px #2129341a;}`]));
+  const calendarProps = useMemo(() => {
+    return {
+      date,
+      dir,
+      locale,
+      width,
+      cellSize,
+      // minDate,
+      // maxDate,
+      // validation, // todo: clarify how we use validation props (and format) in Calendar (not CalendarInput)
+      // format,
+      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, dir, locale, pickerResults, width, languageDirection]);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CalendarContainer, calendarProps));
 };
 Calendar.defaultProps = {
   cellSize: '32px',

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

@@ -10,18 +10,16 @@ export const NavigationContainer = _ref => {
   var _currYear$label;
   let {
     languageDirection,
-    pickerOptions
-  } = _ref;
-  const PreviousIcon = languageDirection === 'ltr' ? IconChevronLeft16 : IconChevronRight16;
-  const NextIcon = languageDirection === 'ltr' ? IconChevronRight16 : IconChevronLeft16;
-  const {
     currMonth,
     currYear,
     nextMonth,
     nextYear,
     prevMonth,
-    prevYear
-  } = pickerOptions;
+    prevYear,
+    unfocusable
+  } = _ref;
+  const PreviousIcon = languageDirection === 'ltr' ? IconChevronLeft16 : IconChevronRight16;
+  const NextIcon = languageDirection === 'ltr' ? IconChevronRight16 : IconChevronLeft16;
 
   // Ethiopic years - when localised to English - add the era (i.e. 2015 ERA1), which is redundant in practice (like writing AD for gregorian years)
   // there is an ongoing discussion in JS-Temporal polyfill whether the era should be included or not, but for our case, it's safer to remove it
@@ -38,6 +36,7 @@ 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([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
   }, /*#__PURE__*/React.createElement(PreviousIcon, {
     className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
@@ -53,6 +52,7 @@ export const NavigationContainer = _ref => {
     name: "next-month",
     "aria-label": `${i18n.t(`Go to ${nextMonth.label}`)}`,
     type: "button",
+    tabIndex: unfocusable ? -1 : 0,
     className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
   }, /*#__PURE__*/React.createElement(NextIcon, {
     className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
@@ -65,6 +65,7 @@ export const NavigationContainer = _ref => {
     name: "previous-year",
     "aria-label": `${i18n.t('Go to previous year')}`,
     type: "button",
+    tabIndex: unfocusable ? -1 : 0,
     className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
   }, /*#__PURE__*/React.createElement(PreviousIcon, {
     className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
@@ -80,6 +81,7 @@ export const NavigationContainer = _ref => {
     name: "next-year",
     "aria-label": `${i18n.t('Go to next year')}`,
     type: "button",
+    tabIndex: unfocusable ? -1 : 0,
     className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
   }, /*#__PURE__*/React.createElement(NextIcon, {
     className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
@@ -88,30 +90,30 @@ export const NavigationContainer = _ref => {
     dynamic: [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]
   }, ["button.__jsx-style-dynamic-selector{background:none;border:0;}", ".month.__jsx-style-dynamic-selector,.year.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:default;}", ".month.__jsx-style-dynamic-selector .curr.__jsx-style-dynamic-selector,.year.__jsx-style-dynamic-selector .curr.__jsx-style-dynamic-selector{-webkit-flex:2;-ms-flex:2;flex:2;white-space:nowrap;}", ".prev.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;text-align:center;}", `.prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector{padding:${spacers.dp4};height:24px;width:24px;color:${colors.grey600};border-radius:3px;}`, ".prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector{width:16px;height:16px;}", `.prev.__jsx-style-dynamic-selector:hover button.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector:hover button.__jsx-style-dynamic-selector{background-color:${colors.grey200};color:${colors.grey900};cursor:pointer;}`, `.prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector:active,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector:active{background-color:${colors.grey300};}`, ".label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:4px 8px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;min-height:16px;}", `.navigation-container.__jsx-style-dynamic-selector{gap:${spacers.dp8};padding:${spacers.dp4};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;border-bottom:1px solid ${wrapperBorderColor};background-color:${headerBackground};font-size:1.08em;}`]));
 };
-NavigationContainer.propTypes = {
+export const NavigationContainerProps = {
+  currMonth: PropTypes.shape({
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  }),
+  currYear: PropTypes.shape({
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  }),
   languageDirection: PropTypes.oneOf(['ltr', 'rtl']),
-  pickerOptions: PropTypes.shape({
-    currMonth: PropTypes.shape({
-      label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-    }),
-    currYear: PropTypes.shape({
-      label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-    }),
-    nextMonth: PropTypes.shape({
-      label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      navigateTo: PropTypes.func
-    }),
-    nextYear: PropTypes.shape({
-      label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      navigateTo: PropTypes.func
-    }),
-    prevMonth: PropTypes.shape({
-      label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      navigateTo: PropTypes.func
-    }),
-    prevYear: PropTypes.shape({
-      label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      navigateTo: PropTypes.func
-    })
-  })
-};
+  nextMonth: PropTypes.shape({
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    navigateTo: PropTypes.func
+  }),
+  nextYear: PropTypes.shape({
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    navigateTo: PropTypes.func
+  }),
+  prevMonth: PropTypes.shape({
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    navigateTo: PropTypes.func
+  }),
+  prevYear: PropTypes.shape({
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    navigateTo: PropTypes.func
+  }),
+  unfocusable: PropTypes.bool
+};
+NavigationContainer.propTypes = NavigationContainerProps;

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

@@ -0,0 +1,43 @@
+import { fireEvent, render, waitFor, within } from '@testing-library/react';
+import React from 'react';
+import { CalendarInput } from '../calendar-input.js';
+describe('Calendar Input', () => {
+  it('allow selection of a date through the calendar widget', async () => {
+    const onDateSelectMock = jest.fn();
+    const screen = render( /*#__PURE__*/React.createElement(CalendarInput, {
+      calendar: "gregory",
+      onDateSelect: onDateSelectMock
+    }));
+    const dateInput = within(screen.getByTestId('dhis2-uicore-input')).getByRole('textbox');
+    fireEvent.focus(dateInput);
+    const calendar = await screen.findByTestId('calendar');
+    expect(calendar).toBeInTheDocument();
+    const todayString = new Date().toISOString().slice(0, -14);
+    const today = within(calendar).getByTestId(todayString);
+    fireEvent.click(today);
+    await waitFor(() => {
+      expect(calendar).not.toBeInTheDocument();
+    });
+    expect(onDateSelectMock).toHaveBeenCalledWith(expect.objectContaining({
+      calendarDateString: todayString
+    }));
+  });
+  it('allow selection of a date through the input', async () => {
+    const onDateSelectMock = jest.fn();
+    const screen = render( /*#__PURE__*/React.createElement(CalendarInput, {
+      calendar: "gregory",
+      onDateSelect: onDateSelectMock
+    }));
+    const dateInputString = '2024/10/12';
+    const dateInput = within(screen.getByTestId('dhis2-uicore-input')).getByRole('textbox');
+    fireEvent.change(dateInput, {
+      target: {
+        value: dateInputString
+      }
+    });
+    fireEvent.blur(dateInput);
+    expect(onDateSelectMock).toHaveBeenCalledWith(expect.objectContaining({
+      calendarDateString: dateInputString
+    }));
+  });
+});

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

@@ -1,13 +1,15 @@
 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 { useDatePicker, useResolvedDirection } from '@dhis2/multi-calendar-dates';
 import { Button } from '@dhis2-ui/button';
 import { Card } from '@dhis2-ui/card';
-import { InputField, InputFieldProps } from '@dhis2-ui/input';
+import { InputField } from '@dhis2-ui/input';
 import { Layer } from '@dhis2-ui/layer';
 import { Popper } from '@dhis2-ui/popper';
 import cx from 'classnames';
-import React, { useRef, useState } from 'react';
-import { Calendar, CalendarProps } from '../calendar/calendar.js';
+import React, { useRef, useState, useMemo, useEffect } from 'react';
+import { CalendarContainer } from '../calendar/calendar-container.js';
+import { CalendarProps } from '../calendar/calendar.js';
 import i18n from '../locales/index.js';
 const offsetModifier = {
   name: 'offset',
@@ -17,7 +19,7 @@ const offsetModifier = {
 };
 export const CalendarInput = function () {
   let {
-    onDateSelect,
+    onDateSelect: parentOnDateSelect,
     calendar,
     date,
     dir,
@@ -28,45 +30,86 @@ export const CalendarInput = function () {
     width,
     cellSize,
     clearable,
+    minDate,
+    maxDate,
+    format,
+    // todo: props and types for format and validation
+    strictValidation,
     ...rest
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const ref = useRef();
   const [open, setOpen] = useState(false);
-  const calendarProps = React.useMemo(() => {
-    const onDateSelectWrapper = selectedDate => {
+  const [partialDate, setPartialDate] = useState(date);
+  const excludeRef = useRef(null);
+  useEffect(() => setPartialDate(date), [date]);
+  const useDatePickerOptions = useMemo(() => ({
+    calendar,
+    locale,
+    timeZone,
+    // todo: we probably shouldn't have had timezone here in the first place
+    numberingSystem,
+    weekDayFormat
+  }), [calendar, locale, numberingSystem, timeZone, weekDayFormat]);
+  const pickerResults = useDatePicker({
+    onDateSelect: result => {
       setOpen(false);
-      onDateSelect === null || onDateSelect === void 0 ? void 0 : onDateSelect(selectedDate);
-    };
+      parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(result);
+    },
+    date,
+    minDate: minDate,
+    maxDate: maxDate,
+    strictValidation: strictValidation,
+    format: format,
+    options: useDatePickerOptions
+  });
+  const handleChange = e => {
+    setPartialDate(e.value);
+  };
+  const handleBlur = (_, e) => {
+    parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
+      calendarDateString: partialDate
+    });
+    if (excludeRef.current && !excludeRef.current.contains(e.relatedTarget)) {
+      setOpen(false);
+    }
+  };
+  const onFocus = () => {
+    setOpen(true);
+  };
+  const languageDirection = useResolvedDirection(dir, locale);
+  const calendarProps = useMemo(() => {
     return {
-      onDateSelect: onDateSelectWrapper,
-      calendar,
       date,
-      dir,
-      locale,
-      numberingSystem,
-      weekDayFormat,
-      timeZone,
       width,
-      cellSize
+      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
     };
-  }, [calendar, cellSize, date, dir, locale, numberingSystem, onDateSelect, timeZone, weekDayFormat, width]);
-  const onFocus = () => {
-    setOpen(true);
-  };
+  }, [cellSize, date, pickerResults, width, languageDirection]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: "jsx-862452676" + " " + "calendar-input-wrapper"
+    className: "jsx-633677374" + " " + "calendar-input-wrapper"
   }, /*#__PURE__*/React.createElement(InputField, _extends({
     label: i18n.t('Pick a date')
   }, rest, {
     type: "text",
     onFocus: onFocus,
-    value: date
+    value: partialDate,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    validationText: pickerResults.errorMessage || pickerResults.warningMessage,
+    error: !!pickerResults.errorMessage,
+    warning: !!pickerResults.warningMessage
   })), clearable && /*#__PURE__*/React.createElement("div", {
-    className: "jsx-862452676" + " " + (cx('calendar-clear-button', {
-      // ToDo: this is a workaround to show the clear button in the correct place when an icon is shown.
-      // Long-term, we should abstract and share the logic multi-select uses for the input-wrapper
-      // https://dhis2.atlassian.net/browse/DHIS2-14848
+    className: "jsx-633677374" + " " + (cx('calendar-clear-button', {
       'with-icon': rest.valid || rest.error || rest.warning || rest.loading,
       'with-dense-wrapper': rest.dense
     }) || "")
@@ -74,7 +117,9 @@ export const CalendarInput = function () {
     dataTest: "calendar-clear-button",
     secondary: true,
     small: true,
-    onClick: () => calendarProps.onDateSelect(null),
+    onClick: () => {
+      parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(null);
+    },
     type: "button"
   }, i18n.t('Clear')))), open && /*#__PURE__*/React.createElement(Layer, {
     onBackdropClick: () => {
@@ -84,16 +129,16 @@ export const CalendarInput = function () {
     reference: ref,
     placement: "bottom-start",
     modifiers: [offsetModifier]
-  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Calendar, _extends({}, calendarProps, {
-    date: date
+  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CalendarContainer, _extends({}, calendarProps, {
+    excludedRef: excludeRef,
+    unfocusable: true
   }))))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "862452676"
-  }, [".calendar-input-wrapper.jsx-862452676{position:relative;}", ".calendar-clear-button.jsx-862452676{position:absolute;inset-inline-end:6px;-webkit-inset-block-start:27px;-ms-intb-rlock-start:27px;inset-block-start:27px;}", ".calendar-clear-button.with-icon.jsx-862452676{inset-inline-end:36px;}", ".calendar-clear-button.with-dense-wrapper.jsx-862452676{-webkit-inset-block-start:23px;-ms-intb-rlock-start:23px;inset-block-start:23px;}"]));
+    id: "633677374"
+  }, [".calendar-input-wrapper.jsx-633677374{position:relative;}", ".calendar-clear-button.jsx-633677374{position:absolute;inset-inline-end:6px;-webkit-inset-block-start:27px;-ms-intb-rlock-start:27px;inset-block-start:27px;}", ".calendar-clear-button.with-icon.jsx-633677374{inset-inline-end:36px;}", ".calendar-clear-button.with-dense-wrapper.jsx-633677374{-webkit-inset-block-start:23px;-ms-intb-rlock-start:23px;inset-block-start:23px;}"]));
 };
 CalendarInput.defaultProps = {
   dataTest: 'dhis2-uiwidgets-calendar-inputfield'
 };
 CalendarInput.propTypes = {
-  ...CalendarProps,
-  ...InputFieldProps
+  ...CalendarProps
 };

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

@@ -104,4 +104,21 @@ export const CalendarWithClearButton = _ref2 => {
   }), /*#__PURE__*/React.createElement("div", null, "value:", /*#__PURE__*/React.createElement("span", {
     "data-test": "storybook-calendar-date-value"
   }, 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, {
+    editable: true,
+    date: date,
+    calendar: "gregory",
+    onDateSelect: selectedDate => {
+      const date = selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.calendarDateString;
+      setDate(date);
+    },
+    width: '700px',
+    inputWidth: "900px",
+    timeZone: 'UTC',
+    minDate: '2020-07-01',
+    maxDate: '2020-07-09'
+  })));
+}

package/package.json

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