@dhis2-ui/calendar 10.0.0-alpha.5 → 10.0.0-alpha.7

package/build/cjs/calendar/calendar.js

@@ -19,10 +19,10 @@ const Calendar = _ref => {
     dir,
     locale,
     numberingSystem,
-    weekDayFormat,
+    weekDayFormat = 'narrow',
     timeZone,
-    width,
-    cellSize
+    width = '240px',
+    cellSize = '32px'
   } = _ref;
   const [selectedDateString, setSelectedDateString] = (0, _react.useState)(date);
   const languageDirection = (0, _multiCalendarDates.useResolvedDirection)(dir, locale);
@@ -70,11 +70,6 @@ const Calendar = _ref => {
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_calendarContainer.CalendarContainer, calendarProps));
 };
 exports.Calendar = Calendar;
-Calendar.defaultProps = {
-  cellSize: '32px',
-  width: '240px',
-  weekDayFormat: 'narrow'
-};
 const CalendarProps = exports.CalendarProps = {
   /** the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts  */
   calendar: _propTypes.default.any.isRequired,

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

@@ -1,10 +1,21 @@
 "use strict";
 
+var _button = require("@dhis2-ui/button");
 var _react = require("@testing-library/react");
-var _react2 = _interopRequireDefault(require("react"));
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _react2 = _interopRequireWildcard(require("react"));
+var _reactFinalForm = require("react-final-form");
 var _calendarInput = require("../calendar-input.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); }
 describe('Calendar Input', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date('2024-10-22T09:05:00.000Z'));
+  });
+  afterEach(jest.useRealTimers);
   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, {
@@ -15,7 +26,7 @@ describe('Calendar Input', () => {
     _react.fireEvent.focus(dateInput);
     const calendar = await screen.findByTestId('calendar');
     expect(calendar).toBeInTheDocument();
-    const todayString = new Date().toISOString().slice(0, -14);
+    const todayString = '2024-10-22';
     const today = (0, _react.within)(calendar).getByTestId(todayString);
     _react.fireEvent.click(today);
     await (0, _react.waitFor)(() => {
@@ -43,4 +54,210 @@ describe('Calendar Input', () => {
       calendarDateString: dateInputString
     }));
   });
-});
+  describe('validation', () => {
+    it('should validate minimum date', async () => {
+      const onDateSelectMock = jest.fn();
+      const screen = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(CalendarWithValidation, {
+        calendar: "gregory",
+        minDate: "2024-01-01",
+        onDateSelect: onDateSelectMock
+      }));
+      const dateInputString = '2023-10-12';
+      const dateInput = (0, _react.within)(screen.getByTestId('dhis2-uicore-input')).getByRole('textbox');
+      _userEvent.default.clear(dateInput);
+      _userEvent.default.type(dateInput, dateInputString);
+      _userEvent.default.tab();
+      expect(await screen.findByText('Date 2023-10-12 is less than the minimum allowed date 2024-01-01.'));
+      expect(onDateSelectMock).toHaveBeenCalledTimes(1);
+    });
+    it('should validate maximum date', async () => {
+      const {
+        getByTestId,
+        findByText
+      } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(CalendarWithValidation, {
+        calendar: "gregory",
+        maxDate: "2024-01-01"
+      }));
+      const dateInputString = '2024-10-12';
+      const dateInput = (0, _react.within)(getByTestId('dhis2-uicore-input')).getByRole('textbox');
+      _userEvent.default.clear(dateInput);
+      _userEvent.default.type(dateInput, dateInputString);
+      _userEvent.default.tab();
+      expect(await findByText('Date 2024-10-12 is greater than the maximum allowed date 2024-01-01.'));
+    });
+    it('should validate date in ethiopic calendar', async () => {
+      const onDateSelectMock = jest.fn();
+      const {
+        getByTestId,
+        findByText,
+        queryByText
+      } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(CalendarWithValidation, {
+        calendar: "ethiopian",
+        minDate: "2018-13-04",
+        onDateSelect: onDateSelectMock
+      }));
+      let dateInputString = '2018-13-02';
+      const dateInput = (0, _react.within)(getByTestId('dhis2-uicore-input')).getByRole('textbox');
+      _userEvent.default.clear(dateInput);
+      _userEvent.default.type(dateInput, dateInputString);
+      _userEvent.default.tab();
+      expect(await findByText('Date 2018-13-02 is less than the minimum allowed date 2018-13-04.'));
+      dateInputString = '2018-13-05';
+      _userEvent.default.clear(dateInput);
+      _userEvent.default.type(dateInput, dateInputString);
+      _userEvent.default.tab();
+      expect(queryByText('Date 2018-13-04 is less than the minimum allowed date 2018-13-05.')).not.toBeInTheDocument();
+      dateInputString = '2018-13-07';
+      _userEvent.default.clear(dateInput);
+      _userEvent.default.type(dateInput, dateInputString);
+      _userEvent.default.tab();
+      expect(await findByText('Invalid date in specified calendar')).toBeInTheDocument();
+    });
+    it('should validate date in nepali calendar', async () => {
+      const onDateSelectMock = jest.fn();
+      const {
+        getByTestId,
+        findByText,
+        queryByText
+      } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(CalendarWithValidation, {
+        calendar: "nepali",
+        maxDate: "2080-05-30",
+        onDateSelect: onDateSelectMock
+      }));
+      let dateInputString = '2080-06-01';
+      const dateInput = (0, _react.within)(getByTestId('dhis2-uicore-input')).getByRole('textbox');
+      _userEvent.default.clear(dateInput);
+      _userEvent.default.type(dateInput, dateInputString);
+      _userEvent.default.tab();
+      expect(await findByText('Date 2080-06-01 is greater than the maximum allowed date 2080-05-30.'));
+      dateInputString = '2080-04-32';
+      _userEvent.default.clear(dateInput);
+      _userEvent.default.type(dateInput, dateInputString);
+      _userEvent.default.tab();
+      expect(queryByText(/greater than the maximum allowed date/)).not.toBeInTheDocument();
+      dateInputString = '2080-01-32';
+      _userEvent.default.clear(dateInput);
+      _userEvent.default.type(dateInput, dateInputString);
+      _userEvent.default.tab();
+      expect(await findByText('Invalid date in specified calendar')).toBeInTheDocument();
+    });
+    it('should validate from date picker', async () => {
+      const onDateSelectMock = jest.fn();
+      const {
+        queryByText,
+        getByText,
+        getByTestId
+      } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(CalendarWithValidation, {
+        calendar: "gregory",
+        minDate: "2024-02-16",
+        onDateSelect: onDateSelectMock
+      }));
+      const dateInput = (0, _react.within)(getByTestId('dhis2-uicore-input')).getByRole('textbox');
+      await _userEvent.default.click(dateInput);
+      await _userEvent.default.click(getByText('17'));
+      expect(queryByText('17')).not.toBeInTheDocument();
+
+      // Bug where callback used to be called first with undefined
+      expect(onDateSelectMock).toHaveBeenCalledTimes(1);
+      expect(onDateSelectMock).toHaveBeenCalledWith({
+        calendarDateString: '2024-10-17',
+        validation: {
+          error: false,
+          valid: true,
+          warning: false
+        }
+      });
+    });
+    it('should validate with Clear', async () => {
+      const onDateSelectMock = jest.fn();
+      const {
+        queryByText,
+        getByText,
+        getByTestId
+      } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(CalendarWithValidation, {
+        calendar: "gregory",
+        minDate: "2024-02-16",
+        onDateSelect: onDateSelectMock,
+        clearable: true
+      }));
+      const dateInputString = '2023-10-12';
+      const dateInput = (0, _react.within)(getByTestId('dhis2-uicore-input')).getByRole('textbox');
+      _userEvent.default.clear(dateInput);
+      _userEvent.default.type(dateInput, dateInputString);
+      _userEvent.default.tab();
+      expect(getByTestId('dhis2-uiwidgets-calendar-inputfield-validation')).toBeInTheDocument();
+      await _userEvent.default.click(getByText('Clear'));
+      expect(queryByText('17')).not.toBeInTheDocument();
+      expect(onDateSelectMock).toHaveBeenLastCalledWith({
+        calendarDateString: null,
+        validation: {
+          valid: true
+        }
+      });
+    });
+    it('should validate when Clearing manually (i.e. deleting text not using clear button)', async () => {
+      const onDateSelectMock = jest.fn();
+      const {
+        getByTestId
+      } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(CalendarWithValidation, {
+        calendar: "gregory",
+        minDate: "2024-02-16",
+        onDateSelect: onDateSelectMock,
+        clearable: true
+      }));
+      const dateInputString = '2023-10-12';
+      const dateInput = (0, _react.within)(getByTestId('dhis2-uicore-input')).getByRole('textbox');
+      _userEvent.default.clear(dateInput);
+      _userEvent.default.type(dateInput, dateInputString);
+      _userEvent.default.tab();
+      expect(getByTestId('dhis2-uiwidgets-calendar-inputfield-validation')).toBeInTheDocument();
+      _userEvent.default.clear(dateInput);
+      _userEvent.default.tab();
+      expect(onDateSelectMock).toHaveBeenCalledWith({
+        calendarDateString: null,
+        validation: {
+          valid: true
+        }
+      });
+    });
+  });
+});
+const CalendarWithValidation = propsFromParent => {
+  const [date, setDate] = (0, _react2.useState)();
+  const [validation, setValidation] = (0, _react2.useState)({});
+  const errored = () => {
+    if (validation !== null && validation !== void 0 && validation.error) {
+      return {
+        calendar: validation.validationText
+      };
+    }
+  };
+  return /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Form, {
+    onSubmit: () => {},
+    validate: errored
+  }, _ref => {
+    let {
+      handleSubmit,
+      invalid
+    } = _ref;
+    return /*#__PURE__*/_react2.default.createElement("form", null, /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+      name: "calendar"
+    }, props => /*#__PURE__*/_react2.default.createElement(_calendarInput.CalendarInput, _extends({}, props, {
+      date: date,
+      label: "Enter a date",
+      editable: true,
+      calendar: "gregory"
+    }, validation, propsFromParent, {
+      onDateSelect: date => {
+        var _propsFromParent$onDa;
+        setDate(date === null || date === void 0 ? void 0 : date.calendarDateString);
+        setValidation(date === null || date === void 0 ? void 0 : date.validation);
+        (_propsFromParent$onDa = propsFromParent.onDateSelect) === null || _propsFromParent$onDa === void 0 ? void 0 : _propsFromParent$onDa.call(propsFromParent, date);
+      }
+    }))), /*#__PURE__*/_react2.default.createElement(_button.Button, {
+      type: "submit",
+      disabled: invalid,
+      onClick: handleSubmit
+    }, "Submit"));
+  });
+};

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

@@ -43,6 +43,7 @@ const CalendarInput = function () {
     format,
     strictValidation,
     inputWidth,
+    dataTest = 'dhis2-uiwidgets-calendar-inputfield',
     ...rest
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const ref = (0, _react.useRef)();
@@ -56,26 +57,43 @@ const CalendarInput = function () {
     numberingSystem,
     weekDayFormat
   }), [calendar, locale, numberingSystem, weekDayFormat]);
+  const onChooseDate = (date, validationOptions) => {
+    // Handling clearing (with clicking the Clear button, or deleting input)
+    if (clearable && (date === null || date === '')) {
+      parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
+        calendarDateString: null,
+        validation: {
+          valid: true
+        }
+      });
+      return;
+    }
+
+    // ToDo: This is now a workaround for handling choosing from the date picker
+    // where the blur event gets triggered causing a call with undefined first
+    if (date === undefined) {
+      return;
+    }
+    const validation = (0, _multiCalendarDates.validateDateString)(date, validationOptions);
+    parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
+      calendarDateString: date,
+      validation
+    });
+  };
+  const validationOptions = (0, _react.useMemo)(() => ({
+    calendar,
+    format,
+    minDateString: minDate,
+    maxDateString: maxDate,
+    strictValidation
+  }), [calendar, format, maxDate, minDate, strictValidation]);
   const pickerResults = (0, _multiCalendarDates.useDatePicker)({
     onDateSelect: result => {
-      const validation = (0, _multiCalendarDates.validateDateString)(result.calendarDateString, {
-        calendar,
-        format,
-        minDateString: minDate,
-        maxDateString: maxDate,
-        strictValidation
-      });
+      onChooseDate(result.calendarDateString, validationOptions);
       setOpen(false);
-      parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
-        calendarDateString: result.calendarDateString,
-        validation
-      });
     },
     date,
-    minDate: minDate,
-    maxDate: maxDate,
-    strictValidation: strictValidation,
-    format: format,
+    ...validationOptions,
     options: useDatePickerOptions
   });
   const handleChange = e => {
@@ -83,17 +101,7 @@ const CalendarInput = function () {
     setPartialDate(e.value);
   };
   const handleBlur = (_, e) => {
-    const validation = (0, _multiCalendarDates.validateDateString)(partialDate, {
-      calendar,
-      format,
-      minDateString: minDate,
-      maxDateString: maxDate,
-      strictValidation
-    });
-    parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
-      calendarDateString: partialDate,
-      validation
-    });
+    onChooseDate(partialDate, validationOptions);
     if (excludeRef.current && !excludeRef.current.contains(e.relatedTarget)) {
       setOpen(false);
     }
@@ -127,6 +135,7 @@ const CalendarInput = function () {
   }, /*#__PURE__*/_react.default.createElement(_input.InputField, _extends({
     label: _index.default.t('Pick a date')
   }, rest, {
+    dataTest: dataTest,
     type: "text",
     onFocus: onFocus,
     value: partialDate,
@@ -143,7 +152,7 @@ const CalendarInput = function () {
     secondary: true,
     small: true,
     onClick: () => {
-      parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(null);
+      onChooseDate(null);
     },
     type: "button"
   }, _index.default.t('Clear')))), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {

package/build/cjs/stories/calendar-story-wrapper.js

@@ -18,13 +18,13 @@ const {
 } = _multiCalendarDates.constants;
 const CalendarStoryWrapper = props => {
   const {
-    calendar,
+    calendar = 'gregory',
     locale,
     timeZone,
     dir,
-    component: Component,
+    component: Component = _calendar.Calendar,
     date,
-    weekDayFormat
+    weekDayFormat = 'narrow'
   } = props;
   const [selectedCalendar, setSelectedCalendar] = (0, _react.useState)(calendar);
   const [selectedNumberingSystem, setSelectedNumberingSystem] = (0, _react.useState)();
@@ -161,11 +161,6 @@ const CalendarStoryWrapper = props => {
   }, selectedDate.calendarDateString)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", null, "callback:"), JSON.stringify(selectedDate, null, 2))))));
 };
 exports.CalendarStoryWrapper = CalendarStoryWrapper;
-CalendarStoryWrapper.defaultProps = {
-  calendar: 'gregorian',
-  component: _calendar.Calendar,
-  weekDayFormat: 'narrow'
-};
 CalendarStoryWrapper.propTypes = {
   calendar: _propTypes.default.string.isRequired,
   component: _propTypes.default.elementType.isRequired,

package/build/es/calendar/calendar.js

@@ -10,10 +10,10 @@ export const Calendar = _ref => {
     dir,
     locale,
     numberingSystem,
-    weekDayFormat,
+    weekDayFormat = 'narrow',
     timeZone,
-    width,
-    cellSize
+    width = '240px',
+    cellSize = '32px'
   } = _ref;
   const [selectedDateString, setSelectedDateString] = useState(date);
   const languageDirection = useResolvedDirection(dir, locale);
@@ -60,11 +60,6 @@ export const Calendar = _ref => {
   }, [cellSize, date, dir, locale, pickerResults, width, languageDirection]);
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CalendarContainer, calendarProps));
 };
-Calendar.defaultProps = {
-  cellSize: '32px',
-  width: '240px',
-  weekDayFormat: 'narrow'
-};
 export const CalendarProps = {
   /** the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts  */
   calendar: PropTypes.any.isRequired,

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

@@ -1,7 +1,16 @@
+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 { Button } from '@dhis2-ui/button';
 import { fireEvent, render, waitFor, within } from '@testing-library/react';
-import React from 'react';
+import userEvent from '@testing-library/user-event';
+import React, { useState } from 'react';
+import { Field, Form } from 'react-final-form';
 import { CalendarInput } from '../calendar-input.js';
 describe('Calendar Input', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date('2024-10-22T09:05:00.000Z'));
+  });
+  afterEach(jest.useRealTimers);
   it('allow selection of a date through the calendar widget', async () => {
     const onDateSelectMock = jest.fn();
     const screen = render( /*#__PURE__*/React.createElement(CalendarInput, {
@@ -12,7 +21,7 @@ describe('Calendar Input', () => {
     fireEvent.focus(dateInput);
     const calendar = await screen.findByTestId('calendar');
     expect(calendar).toBeInTheDocument();
-    const todayString = new Date().toISOString().slice(0, -14);
+    const todayString = '2024-10-22';
     const today = within(calendar).getByTestId(todayString);
     fireEvent.click(today);
     await waitFor(() => {
@@ -40,4 +49,210 @@ describe('Calendar Input', () => {
       calendarDateString: dateInputString
     }));
   });
-});
+  describe('validation', () => {
+    it('should validate minimum date', async () => {
+      const onDateSelectMock = jest.fn();
+      const screen = render( /*#__PURE__*/React.createElement(CalendarWithValidation, {
+        calendar: "gregory",
+        minDate: "2024-01-01",
+        onDateSelect: onDateSelectMock
+      }));
+      const dateInputString = '2023-10-12';
+      const dateInput = within(screen.getByTestId('dhis2-uicore-input')).getByRole('textbox');
+      userEvent.clear(dateInput);
+      userEvent.type(dateInput, dateInputString);
+      userEvent.tab();
+      expect(await screen.findByText('Date 2023-10-12 is less than the minimum allowed date 2024-01-01.'));
+      expect(onDateSelectMock).toHaveBeenCalledTimes(1);
+    });
+    it('should validate maximum date', async () => {
+      const {
+        getByTestId,
+        findByText
+      } = render( /*#__PURE__*/React.createElement(CalendarWithValidation, {
+        calendar: "gregory",
+        maxDate: "2024-01-01"
+      }));
+      const dateInputString = '2024-10-12';
+      const dateInput = within(getByTestId('dhis2-uicore-input')).getByRole('textbox');
+      userEvent.clear(dateInput);
+      userEvent.type(dateInput, dateInputString);
+      userEvent.tab();
+      expect(await findByText('Date 2024-10-12 is greater than the maximum allowed date 2024-01-01.'));
+    });
+    it('should validate date in ethiopic calendar', async () => {
+      const onDateSelectMock = jest.fn();
+      const {
+        getByTestId,
+        findByText,
+        queryByText
+      } = render( /*#__PURE__*/React.createElement(CalendarWithValidation, {
+        calendar: "ethiopian",
+        minDate: "2018-13-04",
+        onDateSelect: onDateSelectMock
+      }));
+      let dateInputString = '2018-13-02';
+      const dateInput = within(getByTestId('dhis2-uicore-input')).getByRole('textbox');
+      userEvent.clear(dateInput);
+      userEvent.type(dateInput, dateInputString);
+      userEvent.tab();
+      expect(await findByText('Date 2018-13-02 is less than the minimum allowed date 2018-13-04.'));
+      dateInputString = '2018-13-05';
+      userEvent.clear(dateInput);
+      userEvent.type(dateInput, dateInputString);
+      userEvent.tab();
+      expect(queryByText('Date 2018-13-04 is less than the minimum allowed date 2018-13-05.')).not.toBeInTheDocument();
+      dateInputString = '2018-13-07';
+      userEvent.clear(dateInput);
+      userEvent.type(dateInput, dateInputString);
+      userEvent.tab();
+      expect(await findByText('Invalid date in specified calendar')).toBeInTheDocument();
+    });
+    it('should validate date in nepali calendar', async () => {
+      const onDateSelectMock = jest.fn();
+      const {
+        getByTestId,
+        findByText,
+        queryByText
+      } = render( /*#__PURE__*/React.createElement(CalendarWithValidation, {
+        calendar: "nepali",
+        maxDate: "2080-05-30",
+        onDateSelect: onDateSelectMock
+      }));
+      let dateInputString = '2080-06-01';
+      const dateInput = within(getByTestId('dhis2-uicore-input')).getByRole('textbox');
+      userEvent.clear(dateInput);
+      userEvent.type(dateInput, dateInputString);
+      userEvent.tab();
+      expect(await findByText('Date 2080-06-01 is greater than the maximum allowed date 2080-05-30.'));
+      dateInputString = '2080-04-32';
+      userEvent.clear(dateInput);
+      userEvent.type(dateInput, dateInputString);
+      userEvent.tab();
+      expect(queryByText(/greater than the maximum allowed date/)).not.toBeInTheDocument();
+      dateInputString = '2080-01-32';
+      userEvent.clear(dateInput);
+      userEvent.type(dateInput, dateInputString);
+      userEvent.tab();
+      expect(await findByText('Invalid date in specified calendar')).toBeInTheDocument();
+    });
+    it('should validate from date picker', async () => {
+      const onDateSelectMock = jest.fn();
+      const {
+        queryByText,
+        getByText,
+        getByTestId
+      } = render( /*#__PURE__*/React.createElement(CalendarWithValidation, {
+        calendar: "gregory",
+        minDate: "2024-02-16",
+        onDateSelect: onDateSelectMock
+      }));
+      const dateInput = within(getByTestId('dhis2-uicore-input')).getByRole('textbox');
+      await userEvent.click(dateInput);
+      await userEvent.click(getByText('17'));
+      expect(queryByText('17')).not.toBeInTheDocument();
+
+      // Bug where callback used to be called first with undefined
+      expect(onDateSelectMock).toHaveBeenCalledTimes(1);
+      expect(onDateSelectMock).toHaveBeenCalledWith({
+        calendarDateString: '2024-10-17',
+        validation: {
+          error: false,
+          valid: true,
+          warning: false
+        }
+      });
+    });
+    it('should validate with Clear', async () => {
+      const onDateSelectMock = jest.fn();
+      const {
+        queryByText,
+        getByText,
+        getByTestId
+      } = render( /*#__PURE__*/React.createElement(CalendarWithValidation, {
+        calendar: "gregory",
+        minDate: "2024-02-16",
+        onDateSelect: onDateSelectMock,
+        clearable: true
+      }));
+      const dateInputString = '2023-10-12';
+      const dateInput = within(getByTestId('dhis2-uicore-input')).getByRole('textbox');
+      userEvent.clear(dateInput);
+      userEvent.type(dateInput, dateInputString);
+      userEvent.tab();
+      expect(getByTestId('dhis2-uiwidgets-calendar-inputfield-validation')).toBeInTheDocument();
+      await userEvent.click(getByText('Clear'));
+      expect(queryByText('17')).not.toBeInTheDocument();
+      expect(onDateSelectMock).toHaveBeenLastCalledWith({
+        calendarDateString: null,
+        validation: {
+          valid: true
+        }
+      });
+    });
+    it('should validate when Clearing manually (i.e. deleting text not using clear button)', async () => {
+      const onDateSelectMock = jest.fn();
+      const {
+        getByTestId
+      } = render( /*#__PURE__*/React.createElement(CalendarWithValidation, {
+        calendar: "gregory",
+        minDate: "2024-02-16",
+        onDateSelect: onDateSelectMock,
+        clearable: true
+      }));
+      const dateInputString = '2023-10-12';
+      const dateInput = within(getByTestId('dhis2-uicore-input')).getByRole('textbox');
+      userEvent.clear(dateInput);
+      userEvent.type(dateInput, dateInputString);
+      userEvent.tab();
+      expect(getByTestId('dhis2-uiwidgets-calendar-inputfield-validation')).toBeInTheDocument();
+      userEvent.clear(dateInput);
+      userEvent.tab();
+      expect(onDateSelectMock).toHaveBeenCalledWith({
+        calendarDateString: null,
+        validation: {
+          valid: true
+        }
+      });
+    });
+  });
+});
+const CalendarWithValidation = propsFromParent => {
+  const [date, setDate] = useState();
+  const [validation, setValidation] = useState({});
+  const errored = () => {
+    if (validation !== null && validation !== void 0 && validation.error) {
+      return {
+        calendar: validation.validationText
+      };
+    }
+  };
+  return /*#__PURE__*/React.createElement(Form, {
+    onSubmit: () => {},
+    validate: errored
+  }, _ref => {
+    let {
+      handleSubmit,
+      invalid
+    } = _ref;
+    return /*#__PURE__*/React.createElement("form", null, /*#__PURE__*/React.createElement(Field, {
+      name: "calendar"
+    }, props => /*#__PURE__*/React.createElement(CalendarInput, _extends({}, props, {
+      date: date,
+      label: "Enter a date",
+      editable: true,
+      calendar: "gregory"
+    }, validation, propsFromParent, {
+      onDateSelect: date => {
+        var _propsFromParent$onDa;
+        setDate(date === null || date === void 0 ? void 0 : date.calendarDateString);
+        setValidation(date === null || date === void 0 ? void 0 : date.validation);
+        (_propsFromParent$onDa = propsFromParent.onDateSelect) === null || _propsFromParent$onDa === void 0 ? void 0 : _propsFromParent$onDa.call(propsFromParent, date);
+      }
+    }))), /*#__PURE__*/React.createElement(Button, {
+      type: "submit",
+      disabled: invalid,
+      onClick: handleSubmit
+    }, "Submit"));
+  });
+};

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

@@ -34,6 +34,7 @@ export const CalendarInput = function () {
     format,
     strictValidation,
     inputWidth,
+    dataTest = 'dhis2-uiwidgets-calendar-inputfield',
     ...rest
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const ref = useRef();
@@ -47,26 +48,43 @@ export const CalendarInput = function () {
     numberingSystem,
     weekDayFormat
   }), [calendar, locale, numberingSystem, weekDayFormat]);
+  const onChooseDate = (date, validationOptions) => {
+    // Handling clearing (with clicking the Clear button, or deleting input)
+    if (clearable && (date === null || date === '')) {
+      parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
+        calendarDateString: null,
+        validation: {
+          valid: true
+        }
+      });
+      return;
+    }
+
+    // ToDo: This is now a workaround for handling choosing from the date picker
+    // where the blur event gets triggered causing a call with undefined first
+    if (date === undefined) {
+      return;
+    }
+    const validation = validateDateString(date, validationOptions);
+    parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
+      calendarDateString: date,
+      validation
+    });
+  };
+  const validationOptions = useMemo(() => ({
+    calendar,
+    format,
+    minDateString: minDate,
+    maxDateString: maxDate,
+    strictValidation
+  }), [calendar, format, maxDate, minDate, strictValidation]);
   const pickerResults = useDatePicker({
     onDateSelect: result => {
-      const validation = validateDateString(result.calendarDateString, {
-        calendar,
-        format,
-        minDateString: minDate,
-        maxDateString: maxDate,
-        strictValidation
-      });
+      onChooseDate(result.calendarDateString, validationOptions);
       setOpen(false);
-      parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
-        calendarDateString: result.calendarDateString,
-        validation
-      });
     },
     date,
-    minDate: minDate,
-    maxDate: maxDate,
-    strictValidation: strictValidation,
-    format: format,
+    ...validationOptions,
     options: useDatePickerOptions
   });
   const handleChange = e => {
@@ -74,17 +92,7 @@ export const CalendarInput = function () {
     setPartialDate(e.value);
   };
   const handleBlur = (_, e) => {
-    const validation = validateDateString(partialDate, {
-      calendar,
-      format,
-      minDateString: minDate,
-      maxDateString: maxDate,
-      strictValidation
-    });
-    parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
-      calendarDateString: partialDate,
-      validation
-    });
+    onChooseDate(partialDate, validationOptions);
     if (excludeRef.current && !excludeRef.current.contains(e.relatedTarget)) {
       setOpen(false);
     }
@@ -118,6 +126,7 @@ export const CalendarInput = function () {
   }, /*#__PURE__*/React.createElement(InputField, _extends({
     label: i18n.t('Pick a date')
   }, rest, {
+    dataTest: dataTest,
     type: "text",
     onFocus: onFocus,
     value: partialDate,
@@ -134,7 +143,7 @@ export const CalendarInput = function () {
     secondary: true,
     small: true,
     onClick: () => {
-      parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(null);
+      onChooseDate(null);
     },
     type: "button"
   }, i18n.t('Clear')))), open && /*#__PURE__*/React.createElement(Layer, {

package/build/es/stories/calendar-story-wrapper.js

@@ -9,13 +9,13 @@ const {
 } = constants;
 export const CalendarStoryWrapper = props => {
   const {
-    calendar,
+    calendar = 'gregory',
     locale,
     timeZone,
     dir,
-    component: Component,
+    component: Component = Calendar,
     date,
-    weekDayFormat
+    weekDayFormat = 'narrow'
   } = props;
   const [selectedCalendar, setSelectedCalendar] = useState(calendar);
   const [selectedNumberingSystem, setSelectedNumberingSystem] = useState();
@@ -151,11 +151,6 @@ export const CalendarStoryWrapper = props => {
     "data-test": "storybook-calendar-result"
   }, selectedDate.calendarDateString)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "callback:"), JSON.stringify(selectedDate, null, 2))))));
 };
-CalendarStoryWrapper.defaultProps = {
-  calendar: 'gregorian',
-  component: Calendar,
-  weekDayFormat: 'narrow'
-};
 CalendarStoryWrapper.propTypes = {
   calendar: PropTypes.string.isRequired,
   component: PropTypes.elementType.isRequired,

package/package.json

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