@dhis2-ui/calendar 9.11.3 → 9.12.0-alpha.1

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithAnyCalendar = exports.Nepali = exports.Ethiopic = void 0;
+exports.default = exports.WithAnyCalendar = exports.Nepali = exports.Ethiopic = exports.Basic = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _calendar = require("../calendar/calendar.js");
 var _calendarStoryWrapper = require("./calendar-story-wrapper.js");
@@ -29,8 +29,35 @@ var _default = exports.default = {
         component: description
       }
     }
+  },
+  argTypes: {
+    calendar: {
+      control: 'select',
+      options: ['gregory', 'islamic', 'nepali', 'ethiopic', 'persian', 'indian']
+    },
+    weekDayFormat: {
+      control: 'select',
+      options: ['long', 'short', 'narrow']
+    },
+    locale: {
+      control: 'text'
+    },
+    numberingSystem: {
+      control: 'select',
+      options: ['latn', 'arab', 'ethi']
+    }
   }
 };
+const Basic = args => {
+  return /*#__PURE__*/_react.default.createElement(_calendar.Calendar, args);
+};
+exports.Basic = Basic;
+Basic.args = {
+  onDateSelect: date => console.log(date),
+  calendar: 'gregory',
+  weekDayFormat: 'narrow',
+  locale: 'en'
+};
 const Ethiopic = args => {
   return /*#__PURE__*/_react.default.createElement(_calendarStoryWrapper.CalendarStoryWrapper, _extends({
     calendar: "ethiopic",

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/build/es/stories/calendar.prod.stories.js

@@ -22,8 +22,34 @@ export default {
         component: description
       }
     }
+  },
+  argTypes: {
+    calendar: {
+      control: 'select',
+      options: ['gregory', 'islamic', 'nepali', 'ethiopic', 'persian', 'indian']
+    },
+    weekDayFormat: {
+      control: 'select',
+      options: ['long', 'short', 'narrow']
+    },
+    locale: {
+      control: 'text'
+    },
+    numberingSystem: {
+      control: 'select',
+      options: ['latn', 'arab', 'ethi']
+    }
   }
 };
+export const Basic = args => {
+  return /*#__PURE__*/React.createElement(Calendar, args);
+};
+Basic.args = {
+  onDateSelect: date => console.log(date),
+  calendar: 'gregory',
+  weekDayFormat: 'narrow',
+  locale: 'en'
+};
 export const Ethiopic = args => {
   return /*#__PURE__*/React.createElement(CalendarStoryWrapper, _extends({
     calendar: "ethiopic",