@dhis2-ui/calendar 10.0.0-alpha.1 → 10.0.0-alpha.3

package/build/cjs/calendar/calendar.js

@@ -78,7 +78,7 @@ Calendar.defaultProps = {
 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,
-  /** Called with signature `(null)` \|\| `({ dateCalendarString: string })` with `dateCalendarString` being the stringified date in the specified calendar in the format `yyyy-MM-dd` */
+  /** Called with signature `(null)` \|\| `({ dateCalendarString: string, validation: { error: boolean, warning: boolean, validationText: string} })` 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,

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

@@ -48,7 +48,6 @@ const CalendarInput = function () {
   const ref = (0, _react.useRef)();
   const [open, setOpen] = (0, _react.useState)(false);
   const [partialDate, setPartialDate] = (0, _react.useState)(date);
-  const [isIconDisplayed, setIsIconDisplayed] = (0, _react.useState)(false);
   const excludeRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => setPartialDate(date), [date]);
   const useDatePickerOptions = (0, _react.useMemo)(() => ({
@@ -59,18 +58,17 @@ const CalendarInput = function () {
   }), [calendar, locale, numberingSystem, weekDayFormat]);
   const pickerResults = (0, _multiCalendarDates.useDatePicker)({
     onDateSelect: result => {
-      const validated = (0, _multiCalendarDates.validateDateString)(result.calendarDateString, {
+      const validation = (0, _multiCalendarDates.validateDateString)(result.calendarDateString, {
         calendar,
         format,
         minDateString: minDate,
         maxDateString: maxDate,
         strictValidation
       });
-      setIsIconDisplayed(validated.errorMessage || validated.warningMessage);
       setOpen(false);
       parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
         calendarDateString: result.calendarDateString,
-        ...validated
+        validation
       });
     },
     date,
@@ -85,17 +83,16 @@ const CalendarInput = function () {
     setPartialDate(e.value);
   };
   const handleBlur = (_, e) => {
-    const validated = (0, _multiCalendarDates.validateDateString)(partialDate, {
+    const validation = (0, _multiCalendarDates.validateDateString)(partialDate, {
       calendar,
       format,
       minDateString: minDate,
       maxDateString: maxDate,
       strictValidation
     });
-    setIsIconDisplayed(validated.errorMessage || validated.warningMessage);
     parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
       calendarDateString: partialDate,
-      ...validated
+      validation
     });
     if (excludeRef.current && !excludeRef.current.contains(e.relatedTarget)) {
       setOpen(false);
@@ -124,7 +121,7 @@ const CalendarInput = function () {
   }, [cellSize, date, pickerResults, width, languageDirection]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
-    className: _style.default.dynamic([["1003597543", [inputWidth, isIconDisplayed ? '36px' : '6px']]]) + " " + "calendar-input-wrapper"
+    className: _style.default.dynamic([["423137534", [inputWidth, rest.error || rest.warning ? '36px' : '6px']]]) + " " + "calendar-input-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_input.InputField, _extends({
     label: _index.default.t('Pick a date')
   }, rest, {
@@ -133,12 +130,9 @@ const CalendarInput = function () {
     value: partialDate,
     onChange: handleChange,
     onBlur: handleBlur,
-    validationText: pickerResults.errorMessage || pickerResults.warningMessage,
-    error: !!pickerResults.errorMessage,
-    warning: !!pickerResults.warningMessage,
     inputWidth: inputWidth
   })), clearable && /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["1003597543", [inputWidth, isIconDisplayed ? '36px' : '6px']]]) + " " + ((0, _classnames.default)('calendar-clear-button', {
+    className: _style.default.dynamic([["423137534", [inputWidth, rest.error || rest.warning ? '36px' : '6px']]]) + " " + ((0, _classnames.default)('calendar-clear-button', {
       'with-icon': rest.valid || rest.error || rest.warning || rest.loading,
       'with-dense-wrapper': rest.dense
     }) || "")
@@ -148,7 +142,6 @@ const CalendarInput = function () {
     small: true,
     onClick: () => {
       parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(null);
-      setIsIconDisplayed(false);
     },
     type: "button"
   }, _index.default.t('Clear')))), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
@@ -163,9 +156,9 @@ const CalendarInput = function () {
     excludedRef: excludeRef,
     unfocusable: true
   }))))), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "1003597543",
-    dynamic: [inputWidth, isIconDisplayed ? '36px' : '6px']
-  }, [`.calendar-input-wrapper.__jsx-style-dynamic-selector{position:relative;width:${inputWidth};}`, `.calendar-clear-button.__jsx-style-dynamic-selector{position:absolute;inset-inline-end:${isIconDisplayed ? '36px' : '6px'};-webkit-inset-block-start:27px;-ms-intb-rlock-start:27px;inset-block-start:27px;}`, ".calendar-clear-button.with-icon.__jsx-style-dynamic-selector{inset-inline-end:36px;}", ".calendar-clear-button.with-dense-wrapper.__jsx-style-dynamic-selector{-webkit-inset-block-start:23px;-ms-intb-rlock-start:23px;inset-block-start:23px;}"]));
+    id: "423137534",
+    dynamic: [inputWidth, rest.error || rest.warning ? '36px' : '6px']
+  }, [`.calendar-input-wrapper.__jsx-style-dynamic-selector{position:relative;width:${inputWidth};}`, `.calendar-clear-button.__jsx-style-dynamic-selector{position:absolute;inset-inline-end:${rest.error || rest.warning ? '36px' : '6px'};-webkit-inset-block-start:27px;-ms-intb-rlock-start:27px;inset-block-start:27px;}`, ".calendar-clear-button.with-icon.__jsx-style-dynamic-selector{inset-inline-end:36px;}", ".calendar-clear-button.with-dense-wrapper.__jsx-style-dynamic-selector{-webkit-inset-block-start:23px;-ms-intb-rlock-start:23px;inset-block-start:23px;}"]));
 };
 exports.CalendarInput = CalendarInput;
 CalendarInput.defaultProps = {
@@ -177,7 +170,7 @@ CalendarInput.defaultProps = {
 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 })` with `dateCalendarString` being the stringified date in the specified calendar in the format `yyyy-MM-dd` */
+  /** Called with signature `(null)` \|\| `({ dateCalendarString: string, validation: { error: boolean, warning: boolean, validationText: string} })` 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,

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CalendarWithClearButton = void 0;
+exports.CalendarWithEditableInputReactForm = CalendarWithEditableInputReactForm;
 exports.CalendarWithEditiableInput = CalendarWithEditiableInput;
-exports.CalendarWithEditiableInputReactForm = CalendarWithEditiableInputReactForm;
 exports.default = exports.NepaliWithNepali = exports.NepaliWithEnglish = exports.IslamicWithArabic = exports.GregorianWithEnglish = exports.GregorianWithArabic = exports.EthiopicWithEnglish = exports.EthiopicWithAmharic = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactFinalForm = require("react-final-form");
@@ -135,11 +135,11 @@ function CalendarWithEditiableInput() {
     clearable: true
   })));
 }
-function CalendarWithEditiableInputReactForm() {
-  const [calendarError, setCalendarError] = (0, _react.useState)(undefined);
+function CalendarWithEditableInputReactForm() {
+  const [validation, setValidation] = (0, _react.useState)({});
   const errored = () => {
     return {
-      calendar: calendarError
+      calendar: validation.validationText
     };
   };
   return /*#__PURE__*/_react.default.createElement(_reactFinalForm.Form, {
@@ -155,7 +155,8 @@ function CalendarWithEditiableInputReactForm() {
     validate: errored
   }, _ref3 => {
     let {
-      handleSubmit
+      handleSubmit,
+      invalid
     } = _ref3;
     return /*#__PURE__*/_react.default.createElement("form", {
       onSubmit: handleSubmit
@@ -166,19 +167,20 @@ function CalendarWithEditiableInputReactForm() {
       meta: props.meta,
       editable: true,
       date: props.input.value,
-      calendar: "gregory",
+      calendar: "gregory"
+    }, validation, {
+      minDate: "2022-11-01",
       onDateSelect: date => {
-        if (!date.isValid) {
-          setCalendarError(date.errorMessage);
-        } else {
-          setCalendarError(undefined);
-        }
+        const validation = {
+          ...date.validation,
+          validationText: date.validation.validationCode === 'WRONG_FORMAT' ? 'custom validation message for format' : date.validation.validationText
+        };
+        setValidation(validation);
         props.input.onChange(date ? date === null || date === void 0 ? void 0 : date.calendarDateString : '');
-      },
-      timeZone: 'UTC'
+      }
     }))), /*#__PURE__*/_react.default.createElement("button", {
       type: "submit",
-      disabled: false,
+      disabled: invalid,
       onClick: handleSubmit
     }, "Submit"));
   });

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

@@ -143,7 +143,8 @@ const CalendarStoryWrapper = props => {
     date: selectedDate.calendarDateString,
     onDateSelect: date => {
       setSelectedDate(date);
-    },
+    }
+  }, selectedDate.validation, {
     timeZone: timeZone,
     weekDayFormat: selectedWeekFormat,
     numberingSystem: selectedNumberingSystem

package/build/es/calendar/calendar.js

@@ -68,7 +68,7 @@ Calendar.defaultProps = {
 export const CalendarProps = {
   /** the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts  */
   calendar: PropTypes.any.isRequired,
-  /** Called with signature `(null)` \|\| `({ dateCalendarString: string })` with `dateCalendarString` being the stringified date in the specified calendar in the format `yyyy-MM-dd` */
+  /** Called with signature `(null)` \|\| `({ dateCalendarString: string, validation: { error: boolean, warning: boolean, validationText: string} })` 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,

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

@@ -39,7 +39,6 @@ export const CalendarInput = function () {
   const ref = useRef();
   const [open, setOpen] = useState(false);
   const [partialDate, setPartialDate] = useState(date);
-  const [isIconDisplayed, setIsIconDisplayed] = useState(false);
   const excludeRef = useRef(null);
   useEffect(() => setPartialDate(date), [date]);
   const useDatePickerOptions = useMemo(() => ({
@@ -50,18 +49,17 @@ export const CalendarInput = function () {
   }), [calendar, locale, numberingSystem, weekDayFormat]);
   const pickerResults = useDatePicker({
     onDateSelect: result => {
-      const validated = validateDateString(result.calendarDateString, {
+      const validation = validateDateString(result.calendarDateString, {
         calendar,
         format,
         minDateString: minDate,
         maxDateString: maxDate,
         strictValidation
       });
-      setIsIconDisplayed(validated.errorMessage || validated.warningMessage);
       setOpen(false);
       parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
         calendarDateString: result.calendarDateString,
-        ...validated
+        validation
       });
     },
     date,
@@ -76,17 +74,16 @@ export const CalendarInput = function () {
     setPartialDate(e.value);
   };
   const handleBlur = (_, e) => {
-    const validated = validateDateString(partialDate, {
+    const validation = validateDateString(partialDate, {
       calendar,
       format,
       minDateString: minDate,
       maxDateString: maxDate,
       strictValidation
     });
-    setIsIconDisplayed(validated.errorMessage || validated.warningMessage);
     parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
       calendarDateString: partialDate,
-      ...validated
+      validation
     });
     if (excludeRef.current && !excludeRef.current.contains(e.relatedTarget)) {
       setOpen(false);
@@ -115,7 +112,7 @@ export const CalendarInput = function () {
   }, [cellSize, date, pickerResults, width, languageDirection]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: _JSXStyle.dynamic([["1003597543", [inputWidth, isIconDisplayed ? '36px' : '6px']]]) + " " + "calendar-input-wrapper"
+    className: _JSXStyle.dynamic([["423137534", [inputWidth, rest.error || rest.warning ? '36px' : '6px']]]) + " " + "calendar-input-wrapper"
   }, /*#__PURE__*/React.createElement(InputField, _extends({
     label: i18n.t('Pick a date')
   }, rest, {
@@ -124,12 +121,9 @@ export const CalendarInput = function () {
     value: partialDate,
     onChange: handleChange,
     onBlur: handleBlur,
-    validationText: pickerResults.errorMessage || pickerResults.warningMessage,
-    error: !!pickerResults.errorMessage,
-    warning: !!pickerResults.warningMessage,
     inputWidth: inputWidth
   })), clearable && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1003597543", [inputWidth, isIconDisplayed ? '36px' : '6px']]]) + " " + (cx('calendar-clear-button', {
+    className: _JSXStyle.dynamic([["423137534", [inputWidth, rest.error || rest.warning ? '36px' : '6px']]]) + " " + (cx('calendar-clear-button', {
       'with-icon': rest.valid || rest.error || rest.warning || rest.loading,
       'with-dense-wrapper': rest.dense
     }) || "")
@@ -139,7 +133,6 @@ export const CalendarInput = function () {
     small: true,
     onClick: () => {
       parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(null);
-      setIsIconDisplayed(false);
     },
     type: "button"
   }, i18n.t('Clear')))), open && /*#__PURE__*/React.createElement(Layer, {
@@ -154,9 +147,9 @@ export const CalendarInput = function () {
     excludedRef: excludeRef,
     unfocusable: true
   }))))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1003597543",
-    dynamic: [inputWidth, isIconDisplayed ? '36px' : '6px']
-  }, [`.calendar-input-wrapper.__jsx-style-dynamic-selector{position:relative;width:${inputWidth};}`, `.calendar-clear-button.__jsx-style-dynamic-selector{position:absolute;inset-inline-end:${isIconDisplayed ? '36px' : '6px'};-webkit-inset-block-start:27px;-ms-intb-rlock-start:27px;inset-block-start:27px;}`, ".calendar-clear-button.with-icon.__jsx-style-dynamic-selector{inset-inline-end:36px;}", ".calendar-clear-button.with-dense-wrapper.__jsx-style-dynamic-selector{-webkit-inset-block-start:23px;-ms-intb-rlock-start:23px;inset-block-start:23px;}"]));
+    id: "423137534",
+    dynamic: [inputWidth, rest.error || rest.warning ? '36px' : '6px']
+  }, [`.calendar-input-wrapper.__jsx-style-dynamic-selector{position:relative;width:${inputWidth};}`, `.calendar-clear-button.__jsx-style-dynamic-selector{position:absolute;inset-inline-end:${rest.error || rest.warning ? '36px' : '6px'};-webkit-inset-block-start:27px;-ms-intb-rlock-start:27px;inset-block-start:27px;}`, ".calendar-clear-button.with-icon.__jsx-style-dynamic-selector{inset-inline-end:36px;}", ".calendar-clear-button.with-dense-wrapper.__jsx-style-dynamic-selector{-webkit-inset-block-start:23px;-ms-intb-rlock-start:23px;inset-block-start:23px;}"]));
 };
 CalendarInput.defaultProps = {
   dataTest: 'dhis2-uiwidgets-calendar-inputfield',
@@ -167,7 +160,7 @@ CalendarInput.defaultProps = {
 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 })` with `dateCalendarString` being the stringified date in the specified calendar in the format `yyyy-MM-dd` */
+  /** Called with signature `(null)` \|\| `({ dateCalendarString: string, validation: { error: boolean, warning: boolean, validationText: string} })` 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,

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

@@ -122,11 +122,11 @@ export function CalendarWithEditiableInput() {
     clearable: true
   })));
 }
-export function CalendarWithEditiableInputReactForm() {
-  const [calendarError, setCalendarError] = useState(undefined);
+export function CalendarWithEditableInputReactForm() {
+  const [validation, setValidation] = useState({});
   const errored = () => {
     return {
-      calendar: calendarError
+      calendar: validation.validationText
     };
   };
   return /*#__PURE__*/React.createElement(Form, {
@@ -142,7 +142,8 @@ export function CalendarWithEditiableInputReactForm() {
     validate: errored
   }, _ref3 => {
     let {
-      handleSubmit
+      handleSubmit,
+      invalid
     } = _ref3;
     return /*#__PURE__*/React.createElement("form", {
       onSubmit: handleSubmit
@@ -153,19 +154,20 @@ export function CalendarWithEditiableInputReactForm() {
       meta: props.meta,
       editable: true,
       date: props.input.value,
-      calendar: "gregory",
+      calendar: "gregory"
+    }, validation, {
+      minDate: "2022-11-01",
       onDateSelect: date => {
-        if (!date.isValid) {
-          setCalendarError(date.errorMessage);
-        } else {
-          setCalendarError(undefined);
-        }
+        const validation = {
+          ...date.validation,
+          validationText: date.validation.validationCode === 'WRONG_FORMAT' ? 'custom validation message for format' : date.validation.validationText
+        };
+        setValidation(validation);
         props.input.onChange(date ? date === null || date === void 0 ? void 0 : date.calendarDateString : '');
-      },
-      timeZone: 'UTC'
+      }
     }))), /*#__PURE__*/React.createElement("button", {
       type: "submit",
-      disabled: false,
+      disabled: invalid,
       onClick: handleSubmit
     }, "Submit"));
   });

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

@@ -134,7 +134,8 @@ export const CalendarStoryWrapper = props => {
     date: selectedDate.calendarDateString,
     onDateSelect: date => {
       setSelectedDate(date);
-    },
+    }
+  }, selectedDate.validation, {
     timeZone: timeZone,
     weekDayFormat: selectedWeekFormat,
     numberingSystem: selectedNumberingSystem

package/package.json

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

package/types/index.d.ts

@@ -20,6 +20,11 @@ export interface CalendarProps {
      * the size of a single cell in the table forming the calendar
      */
     cellSize?: string
+
+    /**
+     * Add a "clear" button to delete the selected date
+     */
+    clearable?: boolean
     /**
      * the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601)
      */
@@ -52,10 +57,7 @@ export interface CalendarProps {
 
 export const Calendar: React.FC<CalendarProps>
 
-export type CalendarInputProps = Omit<
-    InputFieldProps,
-    'label' | 'type' | 'value'
-> &
+export type CalendarInputProps = Omit<InputFieldProps, 'type' | 'value'> &
     CalendarProps
 
 export const CalendarInput: React.FC<CalendarInputProps>