@dhis2-ui/calendar 8.11.2 → 8.12.1

package/build/cjs/__e2e__/{calendarInput.stories.e2e.js → calendar-input.stories.e2e.js}

@@ -45,14 +45,32 @@ Object.defineProperty(exports, "NepaliWithNepali", {
     return _calendarInputStories.NepaliWithNepali;
   }
 });
-exports.default = void 0;
+exports.default = exports.TestCalendarWithClearButton = void 0;
+
+var _react = _interopRequireDefault(require("react"));
 
 var _index = require("../index.js");
 
-var _calendarInputStories = require("../stories/calendarInput.stories.js");
+var _calendarInputStories = require("../stories/calendar-input.stories.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var _default = {
   title: 'CalendarInputTesting',
   component: _index.CalendarInput
 };
-exports.default = _default;
+exports.default = _default;
+
+const TestCalendarWithClearButton = () => {
+  var _params$get, _params$get2;
+
+  const params = new URLSearchParams(location.search);
+  const calendar = (_params$get = params.get('calendar')) !== null && _params$get !== void 0 ? _params$get : 'gregory';
+  const initialDate = (_params$get2 = params.get('initialDate')) !== null && _params$get2 !== void 0 ? _params$get2 : null;
+  return /*#__PURE__*/_react.default.createElement(_calendarInputStories.CalendarWithClearButton, {
+    calendar: calendar,
+    date: initialDate
+  });
+};
+
+exports.TestCalendarWithClearButton = TestCalendarWithClearButton;

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

@@ -20,25 +20,26 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const CalendarTableCell = _ref => {
   let {
     day,
-    cellSize
+    cellSize,
+    selectedDate
   } = _ref;
   const dayHoverBackgroundColor = _uiConstants.colors.grey200;
   const selectedDayBackgroundColor = _uiConstants.colors.teal700;
   return /*#__PURE__*/_react.default.createElement("td", {
     "data-test": day === null || day === void 0 ? void 0 : day.calendarDate,
     onClick: day.onClick,
-    className: _style.default.dynamic([["86824133", [cellSize, cellSize, cellSize, cellSize, _uiConstants.spacers.dp2, _uiConstants.colors.grey900, dayHoverBackgroundColor, selectedDayBackgroundColor, _uiConstants.colors.grey600]]])
+    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",
-    className: _style.default.dynamic([["86824133", [cellSize, cellSize, cellSize, cellSize, _uiConstants.spacers.dp2, _uiConstants.colors.grey900, dayHoverBackgroundColor, selectedDayBackgroundColor, _uiConstants.colors.grey600]]]) + " " + ((0, _classnames.default)('day', {
-      isSelected: day.isSelected,
+    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,
       otherMonth: !day.isInCurrentMonth
     }) || "")
   }, day.label), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "86824133",
-    dynamic: [cellSize, cellSize, cellSize, cellSize, _uiConstants.spacers.dp2, _uiConstants.colors.grey900, dayHoverBackgroundColor, selectedDayBackgroundColor, _uiConstants.colors.grey600]
-  }, ["td.__jsx-style-dynamic-selector{width:".concat(cellSize, ";height:100%;height:").concat(cellSize, ";text-align:center;border:2px solid transparent;}"), "td.__jsx-style-dynamic-selector span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;padding:2px 2px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border:2px solid transparent;min-width:16px;}", "button.__jsx-style-dynamic-selector{border:0;overflow:hidden;width:".concat(cellSize, ";height:").concat(cellSize, ";border:2px solid transparent;border-radius:3px;background:none;margin:").concat(_uiConstants.spacers.dp2, ";color:").concat(_uiConstants.colors.grey900, ";}"), "button.__jsx-style-dynamic-selector:hover{background-color:".concat(dayHoverBackgroundColor, ";-webkit-text-decoration:underline;text-decoration:underline;}"), "button.isSelected.__jsx-style-dynamic-selector,button.otherMonth.isSelected.__jsx-style-dynamic-selector{background-color:".concat(selectedDayBackgroundColor, ";color:white;}"), "button.isToday.__jsx-style-dynamic-selector{-webkit-text-decoration:underline;text-decoration:underline;}", "button.otherMonth.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey600, ";}")]));
+    id: "2052411850",
+    dynamic: [cellSize, cellSize, cellSize, cellSize, _uiConstants.colors.grey900, dayHoverBackgroundColor, _uiConstants.colors.grey300, selectedDayBackgroundColor, _uiConstants.colors.teal600, _uiConstants.colors.teal200, _uiConstants.colors.grey600]
+  }, ["td.__jsx-style-dynamic-selector{width:".concat(cellSize, ";height:100%;height:").concat(cellSize, ";text-align:center;border:2px solid transparent;padding:0;}"), "td.__jsx-style-dynamic-selector span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;padding:2px 2px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border:2px solid transparent;min-width:16px;}", "button.__jsx-style-dynamic-selector{border:0;overflow:hidden;width:".concat(cellSize, ";height:").concat(cellSize, ";border:2px solid transparent;border-radius:3px;background:none;color:").concat(_uiConstants.colors.grey900, ";}"), "button.__jsx-style-dynamic-selector:hover{background-color:".concat(dayHoverBackgroundColor, ";-webkit-text-decoration:underline;text-decoration:underline;cursor:pointer;}"), "button.__jsx-style-dynamic-selector:active{background-color:".concat(_uiConstants.colors.grey300, ";}"), "button.isSelected.__jsx-style-dynamic-selector,button.otherMonth.isSelected.__jsx-style-dynamic-selector{background-color:".concat(selectedDayBackgroundColor, ";color:white;}"), "button.isToday.__jsx-style-dynamic-selector{position:relative;}", "button.isToday.__jsx-style-dynamic-selector::after{content:'';position:absolute;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);height:4px;width:4px;bottom:2px;left:50%;border-radius:100%;background-color:".concat(_uiConstants.colors.teal600, ";}"), "button.isSelected.isToday.__jsx-style-dynamic-selector::after{background-color:".concat(_uiConstants.colors.teal200, ";}"), "button.otherMonth.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey600, ";}")]));
 };
 
 exports.CalendarTableCell = CalendarTableCell;
@@ -49,7 +50,8 @@ CalendarTableCell.propTypes = {
     isInCurrentMonth: _propTypes.default.bool,
     isSelected: _propTypes.default.bool,
     isToday: _propTypes.default.bool,
-    label: _propTypes.default.string,
+    label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
     onClick: _propTypes.default.func
-  })
+  }),
+  selectedDate: _propTypes.default.string
 };

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

@@ -21,17 +21,17 @@ const CalendarTableDaysHeader = _ref => {
   } = _ref;
   const dayNamesColor = _uiConstants.colors.grey700;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("thead", {
-    className: _style.default.dynamic([["275131861", [dayNamesColor]]])
+    className: _style.default.dynamic([["1577512909", [dayNamesColor]]])
   }, /*#__PURE__*/_react.default.createElement("tr", {
-    className: _style.default.dynamic([["275131861", [dayNamesColor]]])
+    className: _style.default.dynamic([["1577512909", [dayNamesColor]]])
   }, weekDayLabels.map((label, i) => /*#__PURE__*/_react.default.createElement("th", {
     scope: "col",
     key: "weekday-".concat(i),
-    className: _style.default.dynamic([["275131861", [dayNamesColor]]])
+    className: _style.default.dynamic([["1577512909", [dayNamesColor]]])
   }, label)))), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "275131861",
+    id: "1577512909",
     dynamic: [dayNamesColor]
-  }, ["th.__jsx-style-dynamic-selector{color:".concat(dayNamesColor, ";font-weight:300;font-style:normal;padding:8px 8px;background:none;font-size:0.85em;border:none;}"), "tr.__jsx-style-dynamic-selector{border:none;}"]));
+  }, ["th.__jsx-style-dynamic-selector{color:".concat(dayNamesColor, ";font-weight:300;font-style:normal;padding:8px 8px;background:none;font-size:0.85em;border:none;cursor:default;}"), "tr.__jsx-style-dynamic-selector{border:none;}"]));
 };
 
 exports.CalendarTableDaysHeader = CalendarTableDaysHeader;

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

@@ -24,7 +24,8 @@ const CalendarTable = _ref => {
     weekDayLabels,
     calendarWeekDays,
     width,
-    cellSize
+    cellSize,
+    selectedDate
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.dynamic([["452536960", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4]]]) + " " + "calendar-table-wrapper"
@@ -38,6 +39,7 @@ const CalendarTable = _ref => {
     key: "week-".concat(weekIndex + 1),
     className: _style.default.dynamic([["452536960", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4]]])
   }, week.map(day => /*#__PURE__*/_react.default.createElement(_calendarTableCell.CalendarTableCell, {
+    selectedDate: selectedDate,
     day: day,
     key: day === null || day === void 0 ? void 0 : day.calendarDate,
     cellSize: cellSize,
@@ -55,11 +57,12 @@ CalendarTable.propTypes = {
     isInCurrentMonth: _propTypes.default.bool,
     isSelected: _propTypes.default.bool,
     isToday: _propTypes.default.bool,
-    label: _propTypes.default.string,
+    label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
     zdt: _propTypes.default.object,
     onClick: _propTypes.default.func
   }).isRequired).isRequired).isRequired,
   cellSize: _propTypes.default.string,
+  selectedDate: _propTypes.default.string,
   weekDayLabels: _propTypes.default.arrayOf(_propTypes.default.string),
   width: _propTypes.default.string
 };

package/build/cjs/calendar/{index.js → calendar.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Calendar = void 0;
+exports.CalendarProps = exports.Calendar = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 
@@ -11,9 +11,9 @@ var _multiCalendarDates = require("@dhis2/multi-calendar-dates");
 
 var _uiConstants = require("@dhis2/ui-constants");
 
-var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _calendarPropTypes = require("./calendar-prop-types.js");
+var _react = _interopRequireWildcard(require("react"));
 
 var _calendarTable = require("./calendar-table.js");
 
@@ -74,6 +74,7 @@ const Calendar = _ref => {
     pickerOptions: pickerOptions,
     languageDirection: languageDirection
   }), /*#__PURE__*/_react.default.createElement(_calendarTable.CalendarTable, {
+    selectedDate: selectedDateString,
     calendarWeekDays: calendarWeekDays,
     weekDayLabels: weekDayLabels,
     cellSize: cellSize,
@@ -90,4 +91,36 @@ Calendar.defaultProps = {
   width: '240px',
   weekDayFormat: 'narrow'
 };
-Calendar.propTypes = _calendarPropTypes.CalendarProps;
+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.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,
+
+  /** 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']),
+
+  /** 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,
+
+  /** numbering system to use - full list here https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/numberingSystems.ts */
+  numberingSystem: _propTypes.default.string,
+
+  /** the timeZone to use */
+  timeZone: _propTypes.default.string,
+
+  /** 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
+};
+exports.CalendarProps = CalendarProps;
+Calendar.propTypes = CalendarProps;

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

@@ -19,7 +19,6 @@ var _index = _interopRequireDefault(require("../locales/index.js"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const chevronColor = _uiConstants.colors.grey600;
 const wrapperBorderColor = _uiConstants.colors.grey300;
 const headerBackground = _uiConstants.colors.grey050;
 
@@ -39,69 +38,65 @@ const NavigationContainer = _ref => {
     prevYear
   } = pickerOptions;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["4112940194", [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.spacers.dp36, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "navigation-container"
+    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]]]) + " " + "navigation-container"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["4112940194", [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.spacers.dp36, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "month"
+    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]]]) + " " + "month"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["4112940194", [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.spacers.dp36, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "prev"
+    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]]]) + " " + "prev"
   }, /*#__PURE__*/_react.default.createElement("button", {
     onClick: prevMonth.navigateTo,
     name: "previous-month",
     "data-test": "calendar-previous-month",
     "aria-label": "".concat(_index.default.t("Go to ".concat(prevMonth.label))),
     type: "button",
-    className: _style.default.dynamic([["4112940194", [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.spacers.dp36, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
+    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, {
-    color: chevronColor,
-    className: _style.default.dynamic([["4112940194", [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.spacers.dp36, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
+    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("div", {
-    className: _style.default.dynamic([["4112940194", [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.spacers.dp36, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "curr"
+    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]]]) + " " + "curr"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.dynamic([["4112940194", [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.spacers.dp36, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "label"
+    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]]]) + " " + "label"
   }, currMonth.label)), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["4112940194", [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.spacers.dp36, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "next"
+    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]]]) + " " + "next"
   }, /*#__PURE__*/_react.default.createElement("button", {
     onClick: nextMonth.navigateTo,
     "data-test": "calendar-next-month",
     name: "next-month",
     "aria-label": "".concat(_index.default.t("Go to ".concat(nextMonth.label))),
     type: "button",
-    className: _style.default.dynamic([["4112940194", [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.spacers.dp36, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
+    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, {
-    color: chevronColor,
-    className: _style.default.dynamic([["4112940194", [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.spacers.dp36, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
+    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("div", {
-    className: _style.default.dynamic([["4112940194", [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.spacers.dp36, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "year"
+    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]]]) + " " + "year"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["4112940194", [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.spacers.dp36, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "prev"
+    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]]]) + " " + "prev"
   }, /*#__PURE__*/_react.default.createElement("button", {
     onClick: prevYear.navigateTo,
     name: "previous-year",
     "aria-label": "".concat(_index.default.t('Go to previous year')),
     type: "button",
-    className: _style.default.dynamic([["4112940194", [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.spacers.dp36, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
+    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, {
-    color: chevronColor,
-    className: _style.default.dynamic([["4112940194", [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.spacers.dp36, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
+    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("div", {
-    className: _style.default.dynamic([["4112940194", [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.spacers.dp36, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "curr"
+    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]]]) + " " + "curr"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.dynamic([["4112940194", [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.spacers.dp36, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "label"
+    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]]]) + " " + "label"
   }, currYear.label)), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["4112940194", [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.spacers.dp36, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "next"
+    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]]]) + " " + "next"
   }, /*#__PURE__*/_react.default.createElement("button", {
     onClick: nextYear.navigateTo,
     name: "next-year",
     "aria-label": "".concat(_index.default.t('Go to next year')),
     type: "button",
-    className: _style.default.dynamic([["4112940194", [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.spacers.dp36, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
+    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, {
-    color: chevronColor,
-    className: _style.default.dynamic([["4112940194", [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.spacers.dp36, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, wrapperBorderColor, headerBackground]]])
+    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(_style.default, {
-    id: "4112940194",
-    dynamic: [_uiConstants.spacers.dp4, _uiConstants.colors.grey200, _uiConstants.spacers.dp36, _uiConstants.spacers.dp8, _uiConstants.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;}", ".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:".concat(_uiConstants.spacers.dp4, ";}"), ".prev.__jsx-style-dynamic-selector:hover button.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector:hover button.__jsx-style-dynamic-selector{background-color:".concat(_uiConstants.colors.grey200, ";cursor:pointer;}"), ".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{height:".concat(_uiConstants.spacers.dp36, ";gap:").concat(_uiConstants.spacers.dp8, ";padding:").concat(_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 ").concat(wrapperBorderColor, ";background-color:").concat(headerBackground, ";font-size:1.08em;}")]));
+    id: "3883083596",
+    dynamic: [_uiConstants.spacers.dp4, _uiConstants.colors.grey600, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.spacers.dp8, _uiConstants.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:".concat(_uiConstants.spacers.dp4, ";height:24px;width:24px;color:").concat(_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:".concat(_uiConstants.colors.grey200, ";color:").concat(_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:".concat(_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:".concat(_uiConstants.spacers.dp8, ";padding:").concat(_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 ").concat(wrapperBorderColor, ";background-color:").concat(headerBackground, ";font-size:1.08em;}")]));
 };
 
 exports.NavigationContainer = NavigationContainer;
@@ -109,25 +104,25 @@ NavigationContainer.propTypes = {
   languageDirection: _propTypes.default.oneOf(['ltr', 'rtl']),
   pickerOptions: _propTypes.default.shape({
     currMonth: _propTypes.default.shape({
-      label: _propTypes.default.string
+      label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
     }),
     currYear: _propTypes.default.shape({
-      label: _propTypes.default.string
+      label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
     }),
     nextMonth: _propTypes.default.shape({
-      label: _propTypes.default.string,
+      label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
       navigateTo: _propTypes.default.func
     }),
     nextYear: _propTypes.default.shape({
-      label: _propTypes.default.string,
+      label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
       navigateTo: _propTypes.default.func
     }),
     prevMonth: _propTypes.default.shape({
-      label: _propTypes.default.string,
+      label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
       navigateTo: _propTypes.default.func
     }),
     prevYear: _propTypes.default.shape({
-      label: _propTypes.default.string,
+      label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
       navigateTo: _propTypes.default.func
     })
   })

package/build/cjs/calendar-input/{index.js → calendar-input.js}

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CalendarInput = void 0;
 
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _button = require("@dhis2-ui/button");
+
 var _card = require("@dhis2-ui/card");
 
 var _input = require("@dhis2-ui/input");
@@ -13,24 +17,21 @@ var _layer = require("@dhis2-ui/layer");
 
 var _popper = require("@dhis2-ui/popper");
 
-var _multiCalendarDates = require("@dhis2/multi-calendar-dates");
+var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _calendarPropTypes = require("../calendar/calendar-prop-types.js");
+var _calendar = require("../calendar/calendar.js");
 
-var _index = require("../calendar/index.js");
+var _index = _interopRequireDefault(require("../locales/index.js"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const padWithZeroes = function (number) {
-  let count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
-  return String(number).padStart(count, '0');
-};
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const offsetModifier = {
   name: 'offset',
@@ -51,20 +52,14 @@ const CalendarInput = function () {
     timeZone,
     width,
     cellSize,
+    clearable,
     ...rest
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const ref = (0, _react.useRef)();
   const [open, setOpen] = (0, _react.useState)(false);
-  const currentDate = (0, _multiCalendarDates.getNowInCalendar)(calendar, timeZone);
-  const initialDate = date || "".concat(currentDate.eraYear || currentDate.year, "-").concat(padWithZeroes(currentDate.month), "-").concat(padWithZeroes(currentDate.day));
-  const [value, setValue] = (0, _react.useState)(initialDate);
 
   const calendarProps = _react.default.useMemo(() => {
     const onDateSelectWrapper = selectedDate => {
-      const {
-        calendarDateString
-      } = selectedDate;
-      setValue(calendarDateString);
       setOpen(false);
       onDateSelect === null || onDateSelect === void 0 ? void 0 : onDateSelect(selectedDate);
     };
@@ -88,14 +83,29 @@ const CalendarInput = function () {
   };
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    ref: ref
+    ref: ref,
+    className: "jsx-862452676" + " " + "calendar-input-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_input.InputField, _extends({
     label: "Pick a date"
   }, rest, {
     type: "text",
     onFocus: onFocus,
-    value: value
-  }))), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
+    value: date
+  })), clearable && /*#__PURE__*/_react.default.createElement("div", {
+    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
+    }) || "")
+  }, /*#__PURE__*/_react.default.createElement(_button.Button, {
+    dataTest: "calendar-clear-button",
+    secondary: true,
+    small: true,
+    onClick: () => calendarProps.onDateSelect(null),
+    type: "button"
+  }, _index.default.t('Clear')))), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
     onBackdropClick: () => {
       setOpen(false);
     }
@@ -103,15 +113,17 @@ const CalendarInput = function () {
     reference: ref,
     placement: "bottom-start",
     modifiers: [offsetModifier]
-  }, /*#__PURE__*/_react.default.createElement(_card.Card, null, /*#__PURE__*/_react.default.createElement(_index.Calendar, _extends({}, calendarProps, {
-    date: value
-  }))))));
+  }, /*#__PURE__*/_react.default.createElement(_card.Card, null, /*#__PURE__*/_react.default.createElement(_calendar.Calendar, _extends({}, calendarProps, {
+    date: date
+  }))))), /*#__PURE__*/_react.default.createElement(_style.default, {
+    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'
 };
-CalendarInput.propTypes = { ..._calendarPropTypes.CalendarProps,
+CalendarInput.propTypes = { ..._calendar.CalendarProps,
   ..._input.InputFieldProps
 };

package/build/cjs/features/supports_calendar_clear_button/supports_calendar_clear_button.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _steps = require("cypress-cucumber-preprocessor/steps");
+
+(0, _steps.Given)('a "{word}" calendar is rendered with a selected date "{word}"', (calendar, initialDate) => {
+  cy.visitStory('CalendarInputTesting', 'Test Calendar With Clear Button', {
+    qs: {
+      initialDate,
+      calendar
+    }
+  });
+  cy.get('[data-test="storybook-calendar-date-value"]').should('have.text', initialDate);
+});
+(0, _steps.Then)('we should be able to clear it', () => {
+  cy.get("[data-test=\"calendar-clear-button\"]").click();
+  cy.get('[data-test="storybook-calendar-date-value"]').should('have.text', 'undefined');
+});
+(0, _steps.And)('show the current month afterwards', () => {
+  cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]').click();
+  cy.get('.isToday').should('be.visible');
+});
+(0, _steps.And)("allow selecting today's date", () => {
+  cy.get('.isToday').parent().invoke('attr', 'data-test').then(todayDate => {
+    cy.get('.isToday').click();
+    cy.get('[data-test="storybook-calendar-date-value"]').should('have.text', todayDate);
+    cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"] input').should('have.value', todayDate);
+  });
+});
+(0, _steps.And)('highlight today as the selected date', () => {
+  cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]').click();
+  cy.get('.isToday').parent().invoke('attr', 'data-test').then(todayDate => {
+    cy.get('.isSelected').should('have.text', Number(todayDate.split('-')[2]).toString());
+  });
+});

package/build/cjs/features/supports_calendar_clear_button.feature

@@ -0,0 +1,23 @@
+Feature: The Calendar allows clearing the selection
+
+    Scenario: Clear the selection in the Gregorian calendar
+        Given a "gregory" calendar is rendered with a selected date "2021-10-13"
+        Then we should be able to clear it
+        And show the current month afterwards
+        And allow selecting today's date
+        And highlight today as the selected date
+
+    Scenario: Clear the selection in the Ethiopic calendar
+        Given a "ethiopic" calendar is rendered with a selected date "2014-02-03"
+        Then we should be able to clear it
+        And show the current month afterwards
+        And allow selecting today's date
+        And highlight today as the selected date
+
+    Scenario: Clear the selection in the Nepali calendar
+        Given a "nepali" calendar is rendered with a selected date "2078-06-27"
+        Then we should be able to clear it
+        And show the current month afterwards
+        And allow selecting today's date
+        And highlight today as the selected date
+

package/build/cjs/index.js

@@ -6,16 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Calendar", {
   enumerable: true,
   get: function () {
-    return _index.Calendar;
+    return _calendar.Calendar;
   }
 });
 Object.defineProperty(exports, "CalendarInput", {
   enumerable: true,
   get: function () {
-    return _index2.CalendarInput;
+    return _calendarInput.CalendarInput;
   }
 });
 
-var _index = require("./calendar/index.js");
+var _calendar = require("./calendar/calendar.js");
 
-var _index2 = require("./calendar-input/index.js");
+var _calendarInput = require("./calendar-input/calendar-input.js");

package/build/cjs/locales/en/translations.json

@@ -1,4 +1,5 @@
 {
     "Go to previous year": "Go to previous year",
-    "Go to next year": "Go to next year"
+    "Go to next year": "Go to next year",
+    "Clear": "Clear"
 }