@dhis2-ui/calendar 9.12.0-alpha.3 → 9.12.0

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

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

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

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

package/build/cjs/calendar/calendar.js

@@ -4,10 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CalendarProps = exports.Calendar = void 0;
+var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _multiCalendarDates = require("@dhis2/multi-calendar-dates");
+var _uiConstants = require("@dhis2/ui-constants");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
-var _calendarContainer = require("./calendar-container.js");
+var _calendarTable = require("./calendar-table.js");
+var _navigationContainer = require("./navigation-container.js");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -19,11 +22,13 @@ const Calendar = _ref => {
     dir,
     locale,
     numberingSystem,
-    weekDayFormat,
+    weekDayFormat = 'narrow',
     timeZone,
-    width,
-    cellSize
+    width = '240px',
+    cellSize = '32px'
   } = _ref;
+  const wrapperBorderColor = _uiConstants.colors.grey300;
+  const backgroundColor = 'none';
   const [selectedDateString, setSelectedDateString] = (0, _react.useState)(date);
   const languageDirection = (0, _multiCalendarDates.useResolvedDirection)(dir, locale);
   const options = {
@@ -33,7 +38,7 @@ const Calendar = _ref => {
     numberingSystem,
     weekDayFormat
   };
-  const pickerResults = (0, _multiCalendarDates.useDatePicker)({
+  const pickerOptions = (0, _multiCalendarDates.useDatePicker)({
     onDateSelect: result => {
       const {
         calendarDateString
@@ -44,37 +49,31 @@ const Calendar = _ref => {
     date: selectedDateString,
     options
   });
-  const calendarProps = (0, _react.useMemo)(() => {
-    return {
-      date,
-      dir,
-      locale,
-      width,
-      cellSize,
-      // minDate,
-      // maxDate,
-      // validation, // todo: clarify how we use validation props (and format) in Calendar (not CalendarInput)
-      // format,
-      isValid: pickerResults.isValid,
-      calendarWeekDays: pickerResults.calendarWeekDays,
-      weekDayLabels: pickerResults.weekDayLabels,
-      currMonth: pickerResults.currMonth,
-      currYear: pickerResults.currYear,
-      nextMonth: pickerResults.nextMonth,
-      nextYear: pickerResults.nextYear,
-      prevMonth: pickerResults.prevMonth,
-      prevYear: pickerResults.prevYear,
-      languageDirection
-    };
-  }, [cellSize, date, dir, locale, pickerResults, width, languageDirection]);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_calendarContainer.CalendarContainer, calendarProps));
+  const {
+    calendarWeekDays,
+    weekDayLabels
+  } = pickerOptions;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    dir: languageDirection,
+    "data-test": "calendar",
+    className: _style.default.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]]) + " " + "calendar-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_navigationContainer.NavigationContainer, {
+    pickerOptions: pickerOptions,
+    languageDirection: languageDirection
+  }), /*#__PURE__*/_react.default.createElement(_calendarTable.CalendarTable, {
+    selectedDate: selectedDateString,
+    calendarWeekDays: calendarWeekDays,
+    weekDayLabels: weekDayLabels,
+    cellSize: cellSize,
+    width: width
+  })), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "2823859047",
+    dynamic: [backgroundColor, wrapperBorderColor, width]
+  }, [`.calendar-wrapper.__jsx-style-dynamic-selector{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;background-color:${backgroundColor};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:1px solid ${wrapperBorderColor};border-radius:3px;min-width:${width};width:-webkit-max-content;width:-moz-max-content;width:max-content;box-shadow:0px 4px 6px -2px #2129340d;box-shadow:0px 10px 15px -3px #2129341a;}`]));
 };
 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/navigation-container.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NavigationContainerProps = exports.NavigationContainer = void 0;
+exports.NavigationContainer = void 0;
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _uiConstants = require("@dhis2/ui-constants");
 var _uiIcons = require("@dhis2/ui-icons");
@@ -17,16 +17,18 @@ const NavigationContainer = _ref => {
   var _currYear$label;
   let {
     languageDirection,
+    pickerOptions
+  } = _ref;
+  const PreviousIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronLeft16 : _uiIcons.IconChevronRight16;
+  const NextIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronRight16 : _uiIcons.IconChevronLeft16;
+  const {
     currMonth,
     currYear,
     nextMonth,
     nextYear,
     prevMonth,
-    prevYear,
-    unfocusable
-  } = _ref;
-  const PreviousIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronLeft16 : _uiIcons.IconChevronRight16;
-  const NextIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronRight16 : _uiIcons.IconChevronLeft16;
+    prevYear
+  } = pickerOptions;
 
   // 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
@@ -43,7 +45,6 @@ const NavigationContainer = _ref => {
     "data-test": "calendar-previous-month",
     "aria-label": `${_index.default.t(`Go to ${prevMonth.label}`)}`,
     type: "button",
-    tabIndex: unfocusable ? -1 : 0,
     className: _style.default.dynamic([["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]]])
@@ -59,7 +60,6 @@ const NavigationContainer = _ref => {
     name: "next-month",
     "aria-label": `${_index.default.t(`Go to ${nextMonth.label}`)}`,
     type: "button",
-    tabIndex: unfocusable ? -1 : 0,
     className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
   }, /*#__PURE__*/_react.default.createElement(NextIcon, {
     className: _style.default.dynamic([["3883083596", [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
@@ -72,7 +72,6 @@ const NavigationContainer = _ref => {
     name: "previous-year",
     "aria-label": `${_index.default.t('Go to previous year')}`,
     type: "button",
-    tabIndex: unfocusable ? -1 : 0,
     className: _style.default.dynamic([["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]]])
@@ -88,7 +87,6 @@ const NavigationContainer = _ref => {
     name: "next-year",
     "aria-label": `${_index.default.t('Go to next year')}`,
     type: "button",
-    tabIndex: unfocusable ? -1 : 0,
     className: _style.default.dynamic([["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]]])
@@ -98,30 +96,30 @@ const NavigationContainer = _ref => {
   }, ["button.__jsx-style-dynamic-selector{background:none;border:0;}", ".month.__jsx-style-dynamic-selector,.year.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:default;}", ".month.__jsx-style-dynamic-selector .curr.__jsx-style-dynamic-selector,.year.__jsx-style-dynamic-selector .curr.__jsx-style-dynamic-selector{-webkit-flex:2;-ms-flex:2;flex:2;white-space:nowrap;}", ".prev.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;text-align:center;}", `.prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector{padding:${_uiConstants.spacers.dp4};height:24px;width:24px;color:${_uiConstants.colors.grey600};border-radius:3px;}`, ".prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector{width:16px;height:16px;}", `.prev.__jsx-style-dynamic-selector:hover button.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector:hover button.__jsx-style-dynamic-selector{background-color:${_uiConstants.colors.grey200};color:${_uiConstants.colors.grey900};cursor:pointer;}`, `.prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector:active,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector:active{background-color:${_uiConstants.colors.grey300};}`, ".label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:4px 8px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;min-height:16px;}", `.navigation-container.__jsx-style-dynamic-selector{gap:${_uiConstants.spacers.dp8};padding:${_uiConstants.spacers.dp4};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;border-bottom:1px solid ${wrapperBorderColor};background-color:${headerBackground};font-size:1.08em;}`]));
 };
 exports.NavigationContainer = NavigationContainer;
-const NavigationContainerProps = exports.NavigationContainerProps = {
-  currMonth: _propTypes.default.shape({
-    label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
-  }),
-  currYear: _propTypes.default.shape({
-    label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
-  }),
+NavigationContainer.propTypes = {
   languageDirection: _propTypes.default.oneOf(['ltr', 'rtl']),
-  nextMonth: _propTypes.default.shape({
-    label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-    navigateTo: _propTypes.default.func
-  }),
-  nextYear: _propTypes.default.shape({
-    label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-    navigateTo: _propTypes.default.func
-  }),
-  prevMonth: _propTypes.default.shape({
-    label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-    navigateTo: _propTypes.default.func
-  }),
-  prevYear: _propTypes.default.shape({
-    label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-    navigateTo: _propTypes.default.func
-  }),
-  unfocusable: _propTypes.default.bool
-};
-NavigationContainer.propTypes = NavigationContainerProps;
+  pickerOptions: _propTypes.default.shape({
+    currMonth: _propTypes.default.shape({
+      label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+    }),
+    currYear: _propTypes.default.shape({
+      label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+    }),
+    nextMonth: _propTypes.default.shape({
+      label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+      navigateTo: _propTypes.default.func
+    }),
+    nextYear: _propTypes.default.shape({
+      label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+      navigateTo: _propTypes.default.func
+    }),
+    prevMonth: _propTypes.default.shape({
+      label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+      navigateTo: _propTypes.default.func
+    }),
+    prevYear: _propTypes.default.shape({
+      label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+      navigateTo: _propTypes.default.func
+    })
+  })
+};

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

@@ -5,16 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CalendarInput = void 0;
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-var _multiCalendarDates = require("@dhis2/multi-calendar-dates");
 var _button = require("@dhis2-ui/button");
 var _card = require("@dhis2-ui/card");
 var _input = require("@dhis2-ui/input");
 var _layer = require("@dhis2-ui/layer");
 var _popper = require("@dhis2-ui/popper");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
-var _calendarContainer = require("../calendar/calendar-container.js");
+var _calendar = require("../calendar/calendar.js");
 var _index = _interopRequireDefault(require("../locales/index.js"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 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; }
@@ -28,103 +26,58 @@ const offsetModifier = {
 };
 const CalendarInput = function () {
   let {
-    onDateSelect: parentOnDateSelect,
+    onDateSelect,
     calendar,
     date,
     dir,
     locale,
     numberingSystem,
     weekDayFormat,
+    timeZone,
     width,
     cellSize,
     clearable,
-    minDate,
-    maxDate,
-    format,
-    // todo: props and types for format and validation
-    strictValidation,
+    dataTest = 'dhis2-uiwidgets-calendar-inputfield',
     ...rest
   } = 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,
-    numberingSystem,
-    weekDayFormat
-  }), [calendar, locale, numberingSystem, weekDayFormat]);
-  const pickerResults = (0, _multiCalendarDates.useDatePicker)({
-    onDateSelect: result => {
+  const calendarProps = _react.default.useMemo(() => {
+    const onDateSelectWrapper = selectedDate => {
       setOpen(false);
-      parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(result);
-    },
-    date,
-    minDate: minDate,
-    maxDate: maxDate,
-    strictValidation: strictValidation,
-    format: format,
-    options: useDatePickerOptions
-  });
-  const handleChange = e => {
-    setOpen(false);
-    setPartialDate(e.value);
-  };
-  const handleBlur = (_, e) => {
-    const validated = (0, _multiCalendarDates.validateDateString)(partialDate, {
-      calendar,
-      format,
-      minDateString: minDate,
-      maxDateString: maxDate,
-      strictValidation
-    });
-    parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
-      calendarDateString: partialDate,
-      ...validated
-    });
-    if (excludeRef.current && !excludeRef.current.contains(e.relatedTarget)) {
-      setOpen(false);
-    }
-  };
-  const onFocus = () => {
-    setOpen(true);
-  };
-  const languageDirection = (0, _multiCalendarDates.useResolvedDirection)(dir, locale);
-  const calendarProps = (0, _react.useMemo)(() => {
+      onDateSelect === null || onDateSelect === void 0 ? void 0 : onDateSelect(selectedDate);
+    };
     return {
+      onDateSelect: onDateSelectWrapper,
+      calendar,
       date,
+      dir,
+      locale,
+      numberingSystem,
+      weekDayFormat,
+      timeZone,
       width,
-      cellSize,
-      isValid: pickerResults.isValid,
-      calendarWeekDays: pickerResults.calendarWeekDays,
-      weekDayLabels: pickerResults.weekDayLabels,
-      currMonth: pickerResults.currMonth,
-      currYear: pickerResults.currYear,
-      nextMonth: pickerResults.nextMonth,
-      nextYear: pickerResults.nextYear,
-      prevMonth: pickerResults.prevMonth,
-      prevYear: pickerResults.prevYear,
-      languageDirection
+      cellSize
     };
-  }, [cellSize, date, pickerResults, width, languageDirection]);
+  }, [calendar, cellSize, date, dir, locale, numberingSystem, onDateSelect, timeZone, weekDayFormat, width]);
+  const onFocus = () => {
+    setOpen(true);
+  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
-    className: "jsx-633677374" + " " + "calendar-input-wrapper"
+    className: "jsx-862452676" + " " + "calendar-input-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_input.InputField, _extends({
     label: _index.default.t('Pick a date')
   }, rest, {
+    dataTest: dataTest,
     type: "text",
     onFocus: onFocus,
-    value: partialDate,
-    onChange: handleChange,
-    onBlur: handleBlur,
-    validationText: pickerResults.errorMessage || pickerResults.warningMessage,
-    error: !!pickerResults.errorMessage,
-    warning: !!pickerResults.warningMessage
+    value: date
   })), clearable && /*#__PURE__*/_react.default.createElement("div", {
-    className: "jsx-633677374" + " " + ((0, _classnames.default)('calendar-clear-button', {
+    className: "jsx-862452676" + " " + ((0, _classnames.default)('calendar-clear-button', {
+      // ToDo: this is a workaround to show the clear button in the correct place when an icon is shown.
+      // Long-term, we should abstract and share the logic multi-select uses for the input-wrapper
+      // https://dhis2.atlassian.net/browse/DHIS2-14848
       'with-icon': rest.valid || rest.error || rest.warning || rest.loading,
       'with-dense-wrapper': rest.dense
     }) || "")
@@ -132,9 +85,7 @@ const CalendarInput = function () {
     dataTest: "calendar-clear-button",
     secondary: true,
     small: true,
-    onClick: () => {
-      parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(null);
-    },
+    onClick: () => calendarProps.onDateSelect(null),
     type: "button"
   }, _index.default.t('Clear')))), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
     onBackdropClick: () => {
@@ -144,49 +95,14 @@ const CalendarInput = function () {
     reference: ref,
     placement: "bottom-start",
     modifiers: [offsetModifier]
-  }, /*#__PURE__*/_react.default.createElement(_card.Card, null, /*#__PURE__*/_react.default.createElement(_calendarContainer.CalendarContainer, _extends({}, calendarProps, {
-    excludedRef: excludeRef,
-    unfocusable: true
+  }, /*#__PURE__*/_react.default.createElement(_card.Card, null, /*#__PURE__*/_react.default.createElement(_calendar.Calendar, _extends({}, calendarProps, {
+    date: date
   }))))), /*#__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;}"]));
+    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;}"]));
 };
 exports.CalendarInput = CalendarInput;
-CalendarInput.defaultProps = {
-  dataTest: 'dhis2-uiwidgets-calendar-inputfield',
-  cellSize: '32px',
-  width: '240px',
-  weekDayFormat: 'narrow'
-};
 CalendarInput.propTypes = {
-  /** 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,
-  /** Called with signature `(null)` \|\| `({ dateCalendarString: string, dateCalendar: Temporal.ZonedDateTime })` with `dateCalendarString` being the stringified date in the specified calendar in the format `yyyy-MM-dd` */
-  onDateSelect: _propTypes.default.func.isRequired,
-  /** the size of a single cell in the table forming the calendar */
-  cellSize: _propTypes.default.string,
-  /** Whether the clear button is displayed */
-  clearable: _propTypes.default.bool,
-  /** 'data-test' attribute of `InputField` component */
-  dataTest: _propTypes.default.string,
-  /** the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601) */
-  date: _propTypes.default.string,
-  /** the direction of the library - internally the library will use rtl for rtl-languages but this can be overridden here for more control */
-  dir: _propTypes.default.oneOf(['ltr', 'rtl']),
-  /** The date format to use either `YYYY-MM-DD` or `DD-MM-YYYY` */
-  format: _propTypes.default.oneOf(['YYYY-MM-DD', 'DD-MM-YYYY']),
-  /** any valid locale -  if none provided, the internal library will fallback to the user locale (more info here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/hooks/internal/useResolvedLocaleOptions.ts#L15) */
-  locale: _propTypes.default.string,
-  /** The maximum selectable date */
-  maxDate: _propTypes.default.string,
-  /** The minimum selectable date */
-  minDate: _propTypes.default.string,
-  /** numbering system to use - full list here https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/numberingSystems.ts */
-  numberingSystem: _propTypes.default.string,
-  /** Whether to use strict validation by showing errors for out-of-range dates when enabled (default), and warnings when disabled */
-  strictValidation: _propTypes.default.bool,
-  /** the format to display for the week day, i.e. Monday (long), Mon (short), M (narrow) */
-  weekDayFormat: _propTypes.default.oneOf(['narrow', 'short', 'long']),
-  /** the width of the calendar component */
-  width: _propTypes.default.string
+  ..._calendar.CalendarProps,
+  ..._input.InputFieldProps
 };

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

@@ -3,17 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CalendarWithClearButton = void 0;
-exports.CalendarWithEditiableInput = CalendarWithEditiableInput;
-exports.CalendarWithEditiableInputReactForm = CalendarWithEditiableInputReactForm;
-exports.default = exports.NepaliWithNepali = exports.NepaliWithEnglish = exports.IslamicWithArabic = exports.GregorianWithEnglish = exports.GregorianWithArabic = exports.EthiopicWithEnglish = exports.EthiopicWithAmharic = void 0;
+exports.default = exports.NepaliWithNepali = exports.NepaliWithEnglish = exports.IslamicWithArabic = exports.GregorianWithEnglish = exports.GregorianWithArabic = exports.EthiopicWithEnglish = exports.EthiopicWithAmharic = exports.CalendarWithClearButton = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactFinalForm = require("react-final-form");
 var _calendarInput = require("../calendar-input/calendar-input.js");
 var _calendarStoryWrapper = require("./calendar-story-wrapper.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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const subtitle = `[Experimental] Calendar Input is a wrapper around Calendar displaying an input that triggers the calendar`;
 const description = `
 Use a CalendarInput where there is a need to let the user input a date.
@@ -119,68 +114,4 @@ const CalendarWithClearButton = _ref2 => {
     "data-test": "storybook-calendar-date-value"
   }, date !== null && date !== void 0 ? date : 'undefined')));
 };
-exports.CalendarWithClearButton = CalendarWithClearButton;
-function CalendarWithEditiableInput() {
-  const [date, setDate] = (0, _react.useState)('2020-07-03');
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_calendarInput.CalendarInput, {
-    editable: true,
-    date: date,
-    calendar: "gregory",
-    onDateSelect: selectedDate => {
-      const date = selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.calendarDateString;
-      setDate(date);
-    },
-    width: '700px',
-    inputWidth: "900px",
-    minDate: '2020-07-01',
-    maxDate: '2020-07-09'
-  })));
-}
-function CalendarWithEditiableInputReactForm() {
-  const [calendarError, setCalendarError] = (0, _react.useState)(undefined);
-  const errored = () => {
-    return {
-      calendar: calendarError
-    };
-  };
-  return /*#__PURE__*/_react.default.createElement(_reactFinalForm.Form, {
-    onSubmit: (values, meta) => {
-      console.log('SUBMITTING', {
-        values,
-        meta
-      });
-    },
-    initialValues: {
-      calendar: '2022-10-12'
-    },
-    validate: errored
-  }, _ref3 => {
-    let {
-      handleSubmit
-    } = _ref3;
-    return /*#__PURE__*/_react.default.createElement("form", {
-      onSubmit: handleSubmit
-    }, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
-      name: "calendar"
-    }, props => /*#__PURE__*/_react.default.createElement(_calendarInput.CalendarInput, _extends({}, props, {
-      input: props.input,
-      meta: props.meta,
-      editable: true,
-      date: props.input.value,
-      calendar: "gregory",
-      onDateSelect: date => {
-        if (!date.isValid) {
-          setCalendarError(date.errorMessage);
-        } else {
-          setCalendarError(undefined);
-        }
-        props.input.onChange(date ? date === null || date === void 0 ? void 0 : date.calendarDateString : '');
-      },
-      timeZone: 'UTC'
-    }))), /*#__PURE__*/_react.default.createElement("button", {
-      type: "submit",
-      disabled: false,
-      onClick: handleSubmit
-    }, "Submit"));
-  });
-}
+exports.CalendarWithClearButton = CalendarWithClearButton;

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

@@ -19,13 +19,13 @@ const {
 const CalendarStoryWrapper = props => {
   var _selectedDate$calenda;
   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)();
@@ -165,11 +165,6 @@ const CalendarStoryWrapper = props => {
   }))), /*#__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,