@dhis2-ui/calendar 9.12.0-alpha.4 → 9.13.0

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,117 +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,
-    strictValidation,
-    inputWidth,
+    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 [isIconDisplayed, setIsIconDisplayed] = useState(false);
-  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 validated = validateDateString(result.calendarDateString, {
-        calendar,
-        format,
-        minDateString: minDate,
-        maxDateString: maxDate,
-        strictValidation
-      });
-      setIsIconDisplayed(validated.errorMessage || validated.warningMessage);
+  const calendarProps = React.useMemo(() => {
+    const onDateSelectWrapper = selectedDate => {
       setOpen(false);
-      parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
-        calendarDateString: result.calendarDateString,
-        ...validated
-      });
-    },
-    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
-    });
-    setIsIconDisplayed(validated.errorMessage || validated.warningMessage);
-    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: _JSXStyle.dynamic([["1003597543", [inputWidth, isIconDisplayed ? '36px' : '6px']]]) + " " + "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,
-    inputWidth: inputWidth
+    value: date
   })), clearable && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1003597543", [inputWidth, isIconDisplayed ? '36px' : '6px']]]) + " " + (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
     }) || "")
@@ -137,10 +76,7 @@ export const CalendarInput = function () {
     dataTest: "calendar-clear-button",
     secondary: true,
     small: true,
-    onClick: () => {
-      parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect(null);
-      setIsIconDisplayed(false);
-    },
+    onClick: () => calendarProps.onDateSelect(null),
     type: "button"
   }, i18n.t('Clear')))), open && /*#__PURE__*/React.createElement(Layer, {
     onBackdropClick: () => {
@@ -150,51 +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: "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;}"]));
-};
-CalendarInput.defaultProps = {
-  dataTest: 'dhis2-uiwidgets-calendar-inputfield',
-  cellSize: '32px',
-  width: '300px',
-  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']),
-  /** the width of input field */
-  inputWidth: PropTypes.string,
-  /** 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/features/supports_ethiopic_calendar/supports_ethiopic_calendar.js

@@ -35,4 +35,5 @@ Then('we should be able to select a day', () => {
   cy.get(`[data-test="${date}"]`).click();
   cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"] input').should('have.value', date);
   cy.get('[data-test="storybook-calendar-result"]').should('have.text', date);
+  cy.get('[data-test="storybook-calendar-result-iso"]').should('have.text', '13 October 2021');
 });

package/build/es/features/supports_gregorian_calendar/supports_gregorian_calendar.js

@@ -32,4 +32,5 @@ Then('we should be able to select a day', () => {
   cy.get(`[data-test="${date}"]`).click();
   cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"] input').should('have.value', date);
   cy.get('[data-test="storybook-calendar-result"]').should('have.text', date);
+  cy.get('[data-test="storybook-calendar-result-iso"]').should('have.text', '13 October 2021');
 });

package/build/es/features/supports_nepali_calendar/supports_nepali_calendar.js

@@ -36,4 +36,5 @@ Then('we should be able to select a day', () => {
   cy.get(`[data-test="${nepaliDate}"]`).click();
   cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"] input').should('have.value', nepaliDate);
   cy.get('[data-test="storybook-calendar-result"]').should('have.text', nepaliDate);
+  cy.get('[data-test="storybook-calendar-result-iso"]').should('have.text', '13 October 2021');
 });

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,67 +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, {
-    date: date,
-    calendar: "gregory",
-    onDateSelect: selectedDate => {
-      const date = selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.calendarDateString;
-      setDate(date);
-    },
-    width: "400px",
-    minDate: "2020-07-01",
-    maxDate: "2020-07-09",
-    clearable: true
-  })));
-}
-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

@@ -8,14 +8,15 @@ const {
   numberingSystems
 } = constants;
 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();
@@ -148,12 +149,11 @@ export const CalendarStoryWrapper = props => {
     }
   }, /*#__PURE__*/React.createElement("div", null, selectedDate && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "calendar date: "), /*#__PURE__*/React.createElement("span", {
     "data-test": "storybook-calendar-result"
-  }, selectedDate.calendarDateString)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "callback:"), JSON.stringify(selectedDate, null, 2))))));
-};
-CalendarStoryWrapper.defaultProps = {
-  calendar: 'gregorian',
-  component: Calendar,
-  weekDayFormat: 'narrow'
+  }, selectedDate.calendarDateString)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "iso date: "), /*#__PURE__*/React.createElement("span", {
+    "data-test": "storybook-calendar-result-iso"
+  }, (_selectedDate$calenda = selectedDate.calendarDate) === null || _selectedDate$calenda === void 0 ? void 0 : _selectedDate$calenda.withCalendar('iso8601').toLocaleString('en-GB', {
+    dateStyle: 'long'
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "callback:"), JSON.stringify(selectedDate, null, 2))))));
 };
 CalendarStoryWrapper.propTypes = {
   calendar: PropTypes.string.isRequired,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/calendar",
-    "version": "9.12.0-alpha.4",
+    "version": "9.13.0",
     "description": "UI Calendar",
     "repository": {
         "type": "git",
@@ -28,20 +28,20 @@
     },
     "peerDependencies": {
         "@dhis2/d2-i18n": "^1",
-        "react": "^16.13",
-        "react-dom": "^16.13",
+        "react": "^16.13 || ^18",
+        "react-dom": "^16.13 || ^18",
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/button": "9.12.0-alpha.4",
-        "@dhis2-ui/card": "9.12.0-alpha.4",
-        "@dhis2-ui/input": "9.12.0-alpha.4",
-        "@dhis2-ui/layer": "9.12.0-alpha.4",
-        "@dhis2-ui/popper": "9.12.0-alpha.4",
-        "@dhis2/multi-calendar-dates": "1.3.0",
+        "@dhis2-ui/button": "9.13.0",
+        "@dhis2-ui/card": "9.13.0",
+        "@dhis2-ui/input": "9.13.0",
+        "@dhis2-ui/layer": "9.13.0",
+        "@dhis2-ui/popper": "9.13.0",
+        "@dhis2/multi-calendar-dates": "^1.2.3",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.12.0-alpha.4",
-        "@dhis2/ui-icons": "9.12.0-alpha.4",
+        "@dhis2/ui-constants": "9.13.0",
+        "@dhis2/ui-icons": "9.13.0",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
@@ -51,8 +51,8 @@
     ],
     "devDependencies": {
         "@dhis2/d2-i18n": "^1.1.0",
-        "react": "16.13",
-        "react-dom": "16.13",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "styled-jsx": "^4.0.1"
     },
     "types": "types"

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

@@ -1,81 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CalendarContainer = void 0;
-var _style = _interopRequireDefault(require("styled-jsx/style"));
-var _uiConstants = require("@dhis2/ui-constants");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireWildcard(require("react"));
-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 }; }
-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 wrapperBorderColor = _uiConstants.colors.grey300;
-const backgroundColor = 'none';
-const CalendarContainer = exports.CalendarContainer = /*#__PURE__*/_react.default.memo(function CalendarContainer(_ref) {
-  let {
-    date,
-    width,
-    cellSize,
-    calendarWeekDays,
-    weekDayLabels,
-    currMonth,
-    currYear,
-    nextMonth,
-    nextYear,
-    prevMonth,
-    prevYear,
-    languageDirection,
-    excludedRef,
-    unfocusable
-  } = _ref;
-  const navigationProps = (0, _react.useMemo)(() => {
-    return {
-      currMonth,
-      currYear,
-      nextMonth,
-      nextYear,
-      prevMonth,
-      prevYear,
-      languageDirection
-    };
-  }, [currMonth, currYear, languageDirection, nextMonth, nextYear, prevMonth, prevYear]);
-  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("div", {
-    ref: excludedRef,
-    className: _style.default.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]])
-  }, /*#__PURE__*/_react.default.createElement(_navigationContainer.NavigationContainer, _extends({}, navigationProps, {
-    unfocusable: unfocusable
-  })), /*#__PURE__*/_react.default.createElement(_calendarTable.CalendarTable, {
-    selectedDate: date,
-    calendarWeekDays: calendarWeekDays,
-    weekDayLabels: weekDayLabels,
-    cellSize: cellSize,
-    width: width,
-    unfocusable: unfocusable
-  }))), /*#__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;}`]));
-});
-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.default.string,
-  unfocusable: _propTypes.default.bool,
-  ..._calendarTable.CalendarTableProps,
-  ..._navigationContainer.NavigationContainerProps
-};

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

@@ -1,46 +0,0 @@
-"use strict";
-
-var _react = require("@testing-library/react");
-var _react2 = _interopRequireDefault(require("react"));
-var _calendarInput = require("../calendar-input.js");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-describe('Calendar Input', () => {
-  it('allow selection of a date through the calendar widget', async () => {
-    const onDateSelectMock = jest.fn();
-    const screen = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_calendarInput.CalendarInput, {
-      calendar: "gregory",
-      onDateSelect: onDateSelectMock
-    }));
-    const dateInput = (0, _react.within)(screen.getByTestId('dhis2-uicore-input')).getByRole('textbox');
-    _react.fireEvent.focus(dateInput);
-    const calendar = await screen.findByTestId('calendar');
-    expect(calendar).toBeInTheDocument();
-    const todayString = new Date().toISOString().slice(0, -14);
-    const today = (0, _react.within)(calendar).getByTestId(todayString);
-    _react.fireEvent.click(today);
-    await (0, _react.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 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_calendarInput.CalendarInput, {
-      calendar: "gregory",
-      onDateSelect: onDateSelectMock
-    }));
-    const dateInputString = '2024/10/12';
-    const dateInput = (0, _react.within)(screen.getByTestId('dhis2-uicore-input')).getByRole('textbox');
-    _react.fireEvent.change(dateInput, {
-      target: {
-        value: dateInputString
-      }
-    });
-    _react.fireEvent.blur(dateInput);
-    expect(onDateSelectMock).toHaveBeenCalledWith(expect.objectContaining({
-      calendarDateString: dateInputString
-    }));
-  });
-});

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

@@ -1,72 +0,0 @@
-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-input/__tests__/calendar-input.test.js

@@ -1,43 +0,0 @@
-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
-    }));
-  });
-});