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

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

@@ -7,8 +7,7 @@ export const CalendarTableCell = _ref => {
   let {
     day,
     cellSize,
-    selectedDate,
-    unfocusable
+    selectedDate
   } = _ref;
   const dayHoverBackgroundColor = colors.grey200;
   const selectedDayBackgroundColor = colors.teal700;
@@ -18,7 +17,6 @@ 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,
@@ -39,6 +37,5 @@ CalendarTableCell.propTypes = {
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     onClick: PropTypes.func
   }),
-  selectedDate: PropTypes.string,
-  unfocusable: PropTypes.bool
+  selectedDate: PropTypes.string
 };

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

@@ -10,8 +10,7 @@ export const CalendarTable = _ref => {
     calendarWeekDays,
     width,
     cellSize,
-    selectedDate,
-    unfocusable
+    selectedDate
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["452536960", [spacers.dp4, spacers.dp4]]]) + " " + "calendar-table-wrapper"
@@ -29,14 +28,13 @@ export 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.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};}`]));
 };
-export const CalendarTableProps = {
+CalendarTable.propTypes = {
   calendarWeekDays: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.shape({
     calendarDate: PropTypes.string,
     isInCurrentMonth: PropTypes.bool,
@@ -48,8 +46,6 @@ export const CalendarTableProps = {
   }).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,7 +1,10 @@
+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, { useMemo, useState } from 'react';
-import { CalendarContainer } from './calendar-container.js';
+import React, { useState } from 'react';
+import { CalendarTable } from './calendar-table.js';
+import { NavigationContainer } from './navigation-container.js';
 export const Calendar = _ref => {
   let {
     onDateSelect,
@@ -10,11 +13,13 @@ export const Calendar = _ref => {
     dir,
     locale,
     numberingSystem,
-    weekDayFormat,
+    weekDayFormat = 'narrow',
     timeZone,
-    width,
-    cellSize
+    width = '240px',
+    cellSize = '32px'
   } = _ref;
+  const wrapperBorderColor = colors.grey300;
+  const backgroundColor = 'none';
   const [selectedDateString, setSelectedDateString] = useState(date);
   const languageDirection = useResolvedDirection(dir, locale);
   const options = {
@@ -24,7 +29,7 @@ export const Calendar = _ref => {
     numberingSystem,
     weekDayFormat
   };
-  const pickerResults = useDatePicker({
+  const pickerOptions = useDatePicker({
     onDateSelect: result => {
       const {
         calendarDateString
@@ -35,35 +40,29 @@ export const Calendar = _ref => {
     date: selectedDateString,
     options
   });
-  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',
-  width: '240px',
-  weekDayFormat: 'narrow'
+  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;}`]));
 };
 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  */

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

@@ -10,16 +10,18 @@ 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,
-    unfocusable
-  } = _ref;
-  const PreviousIcon = languageDirection === 'ltr' ? IconChevronLeft16 : IconChevronRight16;
-  const NextIcon = languageDirection === 'ltr' ? IconChevronRight16 : 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
@@ -36,7 +38,6 @@ 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]]])
@@ -52,7 +53,6 @@ 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,7 +65,6 @@ 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]]])
@@ -81,7 +80,6 @@ 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]]])
@@ -90,30 +88,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;}`]));
 };
-export const NavigationContainerProps = {
-  currMonth: PropTypes.shape({
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  }),
-  currYear: PropTypes.shape({
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  }),
+NavigationContainer.propTypes = {
   languageDirection: PropTypes.oneOf(['ltr', 'rtl']),
-  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;
+  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
+    })
+  })
+};

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

@@ -1,15 +1,13 @@
 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, validateDateString } from '@dhis2/multi-calendar-dates';
 import { Button } from '@dhis2-ui/button';
 import { Card } from '@dhis2-ui/card';
-import { InputField } from '@dhis2-ui/input';
+import { InputField, InputFieldProps } from '@dhis2-ui/input';
 import { Layer } from '@dhis2-ui/layer';
 import { Popper } from '@dhis2-ui/popper';
 import cx from 'classnames';
-import PropTypes from 'prop-types';
-import React, { useRef, useState, useMemo, useEffect } from 'react';
-import { CalendarContainer } from '../calendar/calendar-container.js';
+import React, { useRef, useState } from 'react';
+import { Calendar, CalendarProps } from '../calendar/calendar.js';
 import i18n from '../locales/index.js';
 const offsetModifier = {
   name: 'offset',
@@ -19,103 +17,58 @@ const offsetModifier = {
 };
 export 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 = useRef();
   const [open, setOpen] = useState(false);
-  const [partialDate, setPartialDate] = useState(date);
-  const excludeRef = useRef(null);
-  useEffect(() => setPartialDate(date), [date]);
-  const useDatePickerOptions = useMemo(() => ({
-    calendar,
-    locale,
-    numberingSystem,
-    weekDayFormat
-  }), [calendar, locale, numberingSystem, weekDayFormat]);
-  const pickerResults = useDatePicker({
-    onDateSelect: result => {
+  const calendarProps = React.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 = 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 = useResolvedDirection(dir, locale);
-  const calendarProps = 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: "jsx-633677374" + " " + "calendar-input-wrapper"
+    className: "jsx-862452676" + " " + "calendar-input-wrapper"
   }, /*#__PURE__*/React.createElement(InputField, _extends({
     label: i18n.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.createElement("div", {
-    className: "jsx-633677374" + " " + (cx('calendar-clear-button', {
+    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
       'with-icon': rest.valid || rest.error || rest.warning || rest.loading,
       'with-dense-wrapper': rest.dense
     }) || "")
@@ -123,9 +76,7 @@ export 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"
   }, i18n.t('Clear')))), open && /*#__PURE__*/React.createElement(Layer, {
     onBackdropClick: () => {
@@ -135,48 +86,13 @@ export const CalendarInput = function () {
     reference: ref,
     placement: "bottom-start",
     modifiers: [offsetModifier]
-  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CalendarContainer, _extends({}, calendarProps, {
-    excludedRef: excludeRef,
-    unfocusable: true
+  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Calendar, _extends({}, calendarProps, {
+    date: date
   }))))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "633677374"
-  }, [".calendar-input-wrapper.jsx-633677374{position:relative;}", ".calendar-clear-button.jsx-633677374{position:absolute;inset-inline-end:6px;-webkit-inset-block-start:27px;-ms-intb-rlock-start:27px;inset-block-start:27px;}", ".calendar-clear-button.with-icon.jsx-633677374{inset-inline-end:36px;}", ".calendar-clear-button.with-dense-wrapper.jsx-633677374{-webkit-inset-block-start:23px;-ms-intb-rlock-start:23px;inset-block-start:23px;}"]));
-};
-CalendarInput.defaultProps = {
-  dataTest: 'dhis2-uiwidgets-calendar-inputfield',
-  cellSize: '32px',
-  width: '240px',
-  weekDayFormat: 'narrow'
+    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;}"]));
 };
 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.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.func.isRequired,
-  /** the size of a single cell in the table forming the calendar */
-  cellSize: PropTypes.string,
-  /** Whether the clear button is displayed */
-  clearable: PropTypes.bool,
-  /** 'data-test' attribute of `InputField` component */
-  dataTest: PropTypes.string,
-  /** the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601) */
-  date: PropTypes.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.oneOf(['ltr', 'rtl']),
-  /** The date format to use either `YYYY-MM-DD` or `DD-MM-YYYY` */
-  format: PropTypes.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.string,
-  /** The maximum selectable date */
-  maxDate: PropTypes.string,
-  /** The minimum selectable date */
-  minDate: PropTypes.string,
-  /** numbering system to use - full list here https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/numberingSystems.ts */
-  numberingSystem: PropTypes.string,
-  /** Whether to use strict validation by showing errors for out-of-range dates when enabled (default), and warnings when disabled */
-  strictValidation: PropTypes.bool,
-  /** the format to display for the week day, i.e. Monday (long), Mon (short), M (narrow) */
-  weekDayFormat: PropTypes.oneOf(['narrow', 'short', 'long']),
-  /** the width of the calendar component */
-  width: PropTypes.string
+  ...CalendarProps,
+  ...InputFieldProps
 };

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

@@ -1,6 +1,4 @@
-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 React, { useState } from 'react';
-import { Field, Form } from 'react-final-form';
 import { CalendarInput } from '../calendar-input/calendar-input.js';
 import { CalendarStoryWrapper } from './calendar-story-wrapper.js';
 const subtitle = `[Experimental] Calendar Input is a wrapper around Calendar displaying an input that triggers the calendar`;
@@ -106,68 +104,4 @@ 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",
-    minDate: '2020-07-01',
-    maxDate: '2020-07-09'
-  })));
-}
-export function CalendarWithEditiableInputReactForm() {
-  const [calendarError, setCalendarError] = useState(undefined);
-  const errored = () => {
-    return {
-      calendar: calendarError
-    };
-  };
-  return /*#__PURE__*/React.createElement(Form, {
-    onSubmit: (values, meta) => {
-      console.log('SUBMITTING', {
-        values,
-        meta
-      });
-    },
-    initialValues: {
-      calendar: '2022-10-12'
-    },
-    validate: errored
-  }, _ref3 => {
-    let {
-      handleSubmit
-    } = _ref3;
-    return /*#__PURE__*/React.createElement("form", {
-      onSubmit: handleSubmit
-    }, /*#__PURE__*/React.createElement(Field, {
-      name: "calendar"
-    }, props => /*#__PURE__*/React.createElement(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.createElement("button", {
-      type: "submit",
-      disabled: false,
-      onClick: handleSubmit
-    }, "Submit"));
-  });
-}
+};

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

@@ -10,13 +10,13 @@ const {
 export const CalendarStoryWrapper = props => {
   var _selectedDate$calenda;
   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();
@@ -155,11 +155,6 @@ export const CalendarStoryWrapper = props => {
     dateStyle: 'long'
   }))), /*#__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": "9.12.0-alpha.3",
+    "version": "9.12.0",
     "description": "UI Calendar",
     "repository": {
         "type": "git",
@@ -33,15 +33,15 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/button": "9.12.0-alpha.3",
-        "@dhis2-ui/card": "9.12.0-alpha.3",
-        "@dhis2-ui/input": "9.12.0-alpha.3",
-        "@dhis2-ui/layer": "9.12.0-alpha.3",
-        "@dhis2-ui/popper": "9.12.0-alpha.3",
-        "@dhis2/multi-calendar-dates": "1.3.0",
+        "@dhis2-ui/button": "9.12.0",
+        "@dhis2-ui/card": "9.12.0",
+        "@dhis2-ui/input": "9.12.0",
+        "@dhis2-ui/layer": "9.12.0",
+        "@dhis2-ui/popper": "9.12.0",
+        "@dhis2/multi-calendar-dates": "^1.2.3",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.12.0-alpha.3",
-        "@dhis2/ui-icons": "9.12.0-alpha.3",
+        "@dhis2/ui-constants": "9.12.0",
+        "@dhis2/ui-icons": "9.12.0",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },