@dhis2-ui/calendar 9.9.0-alpha.2 → 9.9.0-alpha.4

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

@@ -23,6 +23,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const wrapperBorderColor = _uiConstants.colors.grey300;
 const backgroundColor = 'none';
 
@@ -39,7 +41,9 @@ const CalendarContainer = _ref => {
     nextYear,
     prevMonth,
     prevYear,
-    languageDirection
+    languageDirection,
+    excludedRef,
+    unfocusable
   } = _ref;
   const navigationProps = (0, _react.useMemo)(() => {
     return {
@@ -58,13 +62,19 @@ const CalendarContainer = _ref => {
     dir: languageDirection,
     "data-test": "calendar",
     className: _style.default.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]]) + " " + "calendar-wrapper"
-  }, /*#__PURE__*/_react.default.createElement(_navigationContainer.NavigationContainer, navigationProps), /*#__PURE__*/_react.default.createElement(_calendarTable.CalendarTable, {
+  }, /*#__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
-  })), /*#__PURE__*/_react.default.createElement(_style.default, {
+    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:".concat(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 ").concat(wrapperBorderColor, ";border-radius:3px;min-width:").concat(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;}")]));
@@ -73,11 +83,13 @@ const CalendarContainer = _ref => {
 exports.CalendarContainer = CalendarContainer;
 CalendarContainer.defaultProps = {
   cellSize: '32px',
-  width: '240px'
+  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

@@ -21,7 +21,8 @@ const CalendarTableCell = _ref => {
   let {
     day,
     cellSize,
-    selectedDate
+    selectedDate,
+    unfocusable
   } = _ref;
   const dayHoverBackgroundColor = _uiConstants.colors.grey200;
   const selectedDayBackgroundColor = _uiConstants.colors.teal700;
@@ -31,6 +32,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,
@@ -53,5 +55,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

@@ -25,7 +25,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"
@@ -43,7 +44,8 @@ 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]
@@ -63,6 +65,7 @@ const 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

@@ -32,7 +32,8 @@ const NavigationContainer = _ref => {
     nextMonth,
     nextYear,
     prevMonth,
-    prevYear
+    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)
@@ -51,6 +52,7 @@ const NavigationContainer = _ref => {
     "data-test": "calendar-previous-month",
     "aria-label": "".concat(_index.default.t("Go to ".concat(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]]])
@@ -66,6 +68,7 @@ const NavigationContainer = _ref => {
     name: "next-month",
     "aria-label": "".concat(_index.default.t("Go to ".concat(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]]])
@@ -78,6 +81,7 @@ const NavigationContainer = _ref => {
     name: "previous-year",
     "aria-label": "".concat(_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]]])
@@ -93,6 +97,7 @@ const NavigationContainer = _ref => {
     name: "next-year",
     "aria-label": "".concat(_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]]])
@@ -126,7 +131,8 @@ const NavigationContainerProps = {
   prevYear: _propTypes.default.shape({
     label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
     navigateTo: _propTypes.default.func
-  })
+  }),
+  unfocusable: _propTypes.default.bool
 };
 exports.NavigationContainerProps = NavigationContainerProps;
 NavigationContainer.propTypes = NavigationContainerProps;

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

@@ -0,0 +1,57 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _calendarInput = require("../calendar-input.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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

@@ -66,6 +66,9 @@ const CalendarInput = function () {
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const ref = (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,
     locale,
@@ -88,9 +91,17 @@ const CalendarInput = function () {
   });
 
   const handleChange = e => {
+    setPartialDate(e.value);
+  };
+
+  const handleBlur = (_, e) => {
     parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
-      calendarDateString: e.value
+      calendarDateString: partialDate
     });
+
+    if (excludeRef.current && !excludeRef.current.contains(e.relatedTarget)) {
+      setOpen(false);
+    }
   };
 
   const onFocus = () => {
@@ -123,8 +134,9 @@ const CalendarInput = function () {
   }, rest, {
     type: "text",
     onFocus: onFocus,
-    value: date,
+    value: partialDate,
     onChange: handleChange,
+    onBlur: handleBlur,
     validationText: pickerResults.errorMessage || pickerResults.warningMessage,
     error: !!pickerResults.errorMessage,
     warning: !!pickerResults.warningMessage
@@ -149,7 +161,10 @@ const CalendarInput = function () {
     reference: ref,
     placement: "bottom-start",
     modifiers: [offsetModifier]
-  }, /*#__PURE__*/_react.default.createElement(_card.Card, null, /*#__PURE__*/_react.default.createElement(_calendarContainer.CalendarContainer, calendarProps)))), /*#__PURE__*/_react.default.createElement(_style.default, {
+  }, /*#__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: "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;}"]));
 };

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

@@ -1,4 +1,7 @@
 import _JSXStyle from "styled-jsx/style";
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import { colors } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React, { useMemo } from 'react';
@@ -19,7 +22,9 @@ export const CalendarContainer = _ref => {
     nextYear,
     prevMonth,
     prevYear,
-    languageDirection
+    languageDirection,
+    excludedRef,
+    unfocusable
   } = _ref;
   const navigationProps = useMemo(() => {
     return {
@@ -38,24 +43,32 @@ export const CalendarContainer = _ref => {
     dir: languageDirection,
     "data-test": "calendar",
     className: _JSXStyle.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]]) + " " + "calendar-wrapper"
-  }, /*#__PURE__*/React.createElement(NavigationContainer, navigationProps), /*#__PURE__*/React.createElement(CalendarTable, {
+  }, /*#__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
-  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    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:".concat(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 ").concat(wrapperBorderColor, ";border-radius:3px;min-width:").concat(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'
+  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,7 +29,8 @@ 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]
@@ -46,6 +48,7 @@ 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

@@ -16,7 +16,8 @@ export const NavigationContainer = _ref => {
     nextMonth,
     nextYear,
     prevMonth,
-    prevYear
+    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)
@@ -35,6 +36,7 @@ export const NavigationContainer = _ref => {
     "data-test": "calendar-previous-month",
     "aria-label": "".concat(i18n.t("Go to ".concat(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]]])
@@ -50,6 +52,7 @@ export const NavigationContainer = _ref => {
     name: "next-month",
     "aria-label": "".concat(i18n.t("Go to ".concat(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]]])
@@ -62,6 +65,7 @@ export const NavigationContainer = _ref => {
     name: "previous-year",
     "aria-label": "".concat(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]]])
@@ -77,6 +81,7 @@ export const NavigationContainer = _ref => {
     name: "next-year",
     "aria-label": "".concat(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]]])
@@ -108,6 +113,7 @@ 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/__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

@@ -9,7 +9,7 @@ import { Layer } from '@dhis2-ui/layer';
 import { Popper } from '@dhis2-ui/popper';
 import { useDatePicker, useResolvedDirection } from '@dhis2/multi-calendar-dates';
 import cx from 'classnames';
-import React, { useRef, useState, useMemo } from 'react';
+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';
@@ -41,6 +41,9 @@ export const CalendarInput = function () {
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const ref = useRef();
   const [open, setOpen] = useState(false);
+  const [partialDate, setPartialDate] = useState(date);
+  const excludeRef = useRef(null);
+  useEffect(() => setPartialDate(date), [date]);
   const useDatePickerOptions = useMemo(() => ({
     calendar,
     locale,
@@ -63,9 +66,17 @@ export const CalendarInput = function () {
   });
 
   const handleChange = e => {
+    setPartialDate(e.value);
+  };
+
+  const handleBlur = (_, e) => {
     parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
-      calendarDateString: e.value
+      calendarDateString: partialDate
     });
+
+    if (excludeRef.current && !excludeRef.current.contains(e.relatedTarget)) {
+      setOpen(false);
+    }
   };
 
   const onFocus = () => {
@@ -98,8 +109,9 @@ export const CalendarInput = function () {
   }, rest, {
     type: "text",
     onFocus: onFocus,
-    value: date,
+    value: partialDate,
     onChange: handleChange,
+    onBlur: handleBlur,
     validationText: pickerResults.errorMessage || pickerResults.warningMessage,
     error: !!pickerResults.errorMessage,
     warning: !!pickerResults.warningMessage
@@ -124,7 +136,10 @@ export const CalendarInput = function () {
     reference: ref,
     placement: "bottom-start",
     modifiers: [offsetModifier]
-  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CalendarContainer, calendarProps)))), /*#__PURE__*/React.createElement(_JSXStyle, {
+  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CalendarContainer, _extends({}, calendarProps, {
+    excludedRef: excludeRef,
+    unfocusable: true
+  }))))), /*#__PURE__*/React.createElement(_JSXStyle, {
     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;}"]));
 };

package/package.json

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