@dhis2-ui/calendar 8.8.0

package/README.md

@@ -0,0 +1,10 @@
+> :warning:
+> This is currently considered internal, please use `@dhis2/ui`.
+>
+> See the [Getting started
+> guide](https://github.com/dhis2/ui/blob/master/docs/getting-started.md)
+> for more information.
+
+ToDo
+
+For usage instructions see [the documentation for this component](https://ui.dhis2.nu/components/calendar).

package/build/cjs/__e2e__/calendarInput.stories.e2e.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EthiopicWithAmharic", {
+  enumerable: true,
+  get: function () {
+    return _calendarInputStories.EthiopicWithAmharic;
+  }
+});
+Object.defineProperty(exports, "EthiopicWithEnglish", {
+  enumerable: true,
+  get: function () {
+    return _calendarInputStories.EthiopicWithEnglish;
+  }
+});
+Object.defineProperty(exports, "GregorianWithArabic", {
+  enumerable: true,
+  get: function () {
+    return _calendarInputStories.GregorianWithArabic;
+  }
+});
+Object.defineProperty(exports, "GregorianWithEnglish", {
+  enumerable: true,
+  get: function () {
+    return _calendarInputStories.GregorianWithEnglish;
+  }
+});
+Object.defineProperty(exports, "IslamicWithArabic", {
+  enumerable: true,
+  get: function () {
+    return _calendarInputStories.IslamicWithArabic;
+  }
+});
+Object.defineProperty(exports, "NepaliWithEnglish", {
+  enumerable: true,
+  get: function () {
+    return _calendarInputStories.NepaliWithEnglish;
+  }
+});
+Object.defineProperty(exports, "NepaliWithNepali", {
+  enumerable: true,
+  get: function () {
+    return _calendarInputStories.NepaliWithNepali;
+  }
+});
+exports.default = void 0;
+
+var _index = require("../index.js");
+
+var _calendarInputStories = require("../stories/calendarInput.stories.js");
+
+var _default = {
+  title: 'CalendarInputTesting',
+  component: _index.CalendarInput
+};
+exports.default = _default;

package/build/cjs/calendar/calendar-prop-types.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalendarProps = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const CalendarProps = {
+  calendar: _propTypes.default.any.isRequired,
+  cellSize: _propTypes.default.string,
+  date: _propTypes.default.string,
+  dir: _propTypes.default.oneOf(['ltr', 'rtl']),
+  locale: _propTypes.default.string,
+  numberingSystem: _propTypes.default.string,
+  timeZone: _propTypes.default.string,
+  weekDayFormat: _propTypes.default.string,
+  width: _propTypes.default.string,
+  onDateSelect: _propTypes.default.func
+};
+exports.CalendarProps = CalendarProps;

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

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalendarTableCell = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _uiConstants = require("@dhis2/ui-constants");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const CalendarTableCell = _ref => {
+  let {
+    day,
+    cellSize
+  } = _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]]])
+  }, /*#__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,
+      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, ";}")]));
+};
+
+exports.CalendarTableCell = CalendarTableCell;
+CalendarTableCell.propTypes = {
+  cellSize: _propTypes.default.string,
+  day: _propTypes.default.shape({
+    calendarDate: _propTypes.default.string,
+    isInCurrentMonth: _propTypes.default.bool,
+    isSelected: _propTypes.default.bool,
+    isToday: _propTypes.default.bool,
+    label: _propTypes.default.string,
+    onClick: _propTypes.default.func
+  })
+};

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalendarTableDaysHeader = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _uiConstants = require("@dhis2/ui-constants");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const CalendarTableDaysHeader = _ref => {
+  let {
+    weekDayLabels
+  } = _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]]])
+  }, /*#__PURE__*/_react.default.createElement("tr", {
+    className: _style.default.dynamic([["275131861", [dayNamesColor]]])
+  }, weekDayLabels.map((label, i) => /*#__PURE__*/_react.default.createElement("th", {
+    scope: "col",
+    key: "weekday-".concat(i),
+    className: _style.default.dynamic([["275131861", [dayNamesColor]]])
+  }, label)))), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "275131861",
+    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;}"]));
+};
+
+exports.CalendarTableDaysHeader = CalendarTableDaysHeader;
+CalendarTableDaysHeader.propTypes = {
+  weekDayLabels: _propTypes.default.arrayOf(_propTypes.default.string)
+};

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

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalendarTable = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _uiConstants = require("@dhis2/ui-constants");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _calendarTableCell = require("./calendar-table-cell.js");
+
+var _calendarTableDaysHeader = require("./calendar-table-days-header.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const CalendarTable = _ref => {
+  let {
+    weekDayLabels,
+    calendarWeekDays,
+    width,
+    cellSize
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["452536960", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4]]]) + " " + "calendar-table-wrapper"
+  }, /*#__PURE__*/_react.default.createElement("table", {
+    className: _style.default.dynamic([["452536960", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4]]]) + " " + "calendar-table"
+  }, /*#__PURE__*/_react.default.createElement(_calendarTableDaysHeader.CalendarTableDaysHeader, {
+    weekDayLabels: weekDayLabels
+  }), /*#__PURE__*/_react.default.createElement("tbody", {
+    className: _style.default.dynamic([["452536960", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4]]])
+  }, calendarWeekDays.map((week, weekIndex) => /*#__PURE__*/_react.default.createElement("tr", {
+    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, {
+    day: day,
+    key: day === null || day === void 0 ? void 0 : day.calendarDate,
+    cellSize: cellSize,
+    width: width
+  })))))), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "452536960",
+    dynamic: [_uiConstants.spacers.dp4, _uiConstants.spacers.dp4]
+  }, [".calendar-table.__jsx-style-dynamic-selector{border:none;border-collapse:collapse;width:100%;margin-block:".concat(_uiConstants.spacers.dp4, ";}"), ".calendar-table.__jsx-style-dynamic-selector tr.__jsx-style-dynamic-selector,.calendar-table.__jsx-style-dynamic-selector td.__jsx-style-dynamic-selector{border:none;}", ".calendar-table-wrapper.__jsx-style-dynamic-selector{padding-inline:".concat(_uiConstants.spacers.dp4, ";}")]));
+};
+
+exports.CalendarTable = CalendarTable;
+CalendarTable.propTypes = {
+  calendarWeekDays: _propTypes.default.arrayOf(_propTypes.default.string),
+  cellSize: _propTypes.default.string,
+  weekDayLabels: _propTypes.default.arrayOf(_propTypes.default.string),
+  width: _propTypes.default.string
+};

package/build/cjs/calendar/index.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Calendar = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _multiCalendarDates = require("@dhis2/multi-calendar-dates");
+
+var _uiConstants = require("@dhis2/ui-constants");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _calendarPropTypes = require("./calendar-prop-types.js");
+
+var _calendarTable = require("./calendar-table.js");
+
+var _navigationContainer = require("./navigation-container.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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Calendar = _ref => {
+  let {
+    onDateSelect,
+    calendar,
+    date,
+    dir,
+    locale,
+    numberingSystem,
+    weekDayFormat,
+    timeZone,
+    width,
+    cellSize
+  } = _ref;
+  const wrapperBorderColor = _uiConstants.colors.grey300;
+  const backgroundColor = 'none';
+  const [selectedDateString, setSelectedDateString] = (0, _react.useState)(date);
+  const languageDirection = (0, _multiCalendarDates.useResolvedDirection)(dir, locale);
+  const options = {
+    locale,
+    calendar,
+    timeZone,
+    numberingSystem,
+    weekDayFormat
+  };
+  const pickerOptions = (0, _multiCalendarDates.useDatePicker)({
+    onDateSelect: result => {
+      const {
+        calendarDateString
+      } = result;
+      setSelectedDateString(calendarDateString);
+      onDateSelect(result);
+    },
+    date: selectedDateString,
+    options
+  });
+  const {
+    calendarWeekDays,
+    weekDayLabels
+  } = pickerOptions;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    dir: languageDirection,
+    "data-test": "calendar",
+    className: _style.default.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]]) + " " + "calendar-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_navigationContainer.NavigationContainer, {
+    pickerOptions: pickerOptions,
+    languageDirection: languageDirection
+  }), /*#__PURE__*/_react.default.createElement(_calendarTable.CalendarTable, {
+    calendarWeekDays: calendarWeekDays,
+    weekDayLabels: weekDayLabels,
+    cellSize: cellSize,
+    width: width
+  })), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "2823859047",
+    dynamic: [backgroundColor, wrapperBorderColor, width]
+  }, [".calendar-wrapper.__jsx-style-dynamic-selector{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;background-color:".concat(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 ").concat(wrapperBorderColor, ";border-radius:3px;min-width:").concat(width, ";width:-webkit-max-content;width:-moz-max-content;width:max-content;box-shadow:0px 4px 6px -2px #2129340d;box-shadow:0px 10px 15px -3px #2129341a;}")]));
+};
+
+exports.Calendar = Calendar;
+Calendar.defaultProps = {
+  cellSize: '32px',
+  width: '240px',
+  weekDayFormat: 'narrow'
+};
+Calendar.propTypes = _calendarPropTypes.CalendarProps;

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

@@ -0,0 +1,134 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavigationContainer = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _uiConstants = require("@dhis2/ui-constants");
+
+var _uiIcons = require("@dhis2/ui-icons");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+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;
+
+const NavigationContainer = _ref => {
+  let {
+    languageDirection,
+    pickerOptions
+  } = _ref;
+  const PreviousIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronLeft16 : _uiIcons.IconChevronRight16;
+  const NextIcon = languageDirection === 'ltr' ? _uiIcons.IconChevronRight16 : _uiIcons.IconChevronLeft16;
+  const {
+    currMonth,
+    currYear,
+    nextMonth,
+    nextYear,
+    prevMonth,
+    prevYear
+  } = 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"
+  }, /*#__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"
+  }, /*#__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"
+  }, /*#__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]]])
+  }, /*#__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]]])
+  }))), /*#__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"
+  }, /*#__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"
+  }, 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"
+  }, /*#__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]]])
+  }, /*#__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]]])
+  })))), /*#__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"
+  }, /*#__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"
+  }, /*#__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]]])
+  }, /*#__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]]])
+  }))), /*#__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"
+  }, /*#__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"
+  }, 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"
+  }, /*#__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]]])
+  }, /*#__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]]])
+  }))))), /*#__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;}")]));
+};
+
+exports.NavigationContainer = NavigationContainer;
+NavigationContainer.propTypes = {
+  languageDirection: _propTypes.default.oneOf(['ltr', 'rtl']),
+  pickerOptions: _propTypes.default.shape({
+    currMonth: _propTypes.default.shape({
+      label: _propTypes.default.string
+    }),
+    currYear: _propTypes.default.shape({
+      label: _propTypes.default.string
+    }),
+    nextMonth: _propTypes.default.shape({
+      label: _propTypes.default.string,
+      navigateTo: _propTypes.default.func
+    }),
+    nextYear: _propTypes.default.shape({
+      label: _propTypes.default.string,
+      navigateTo: _propTypes.default.func
+    }),
+    prevMonth: _propTypes.default.shape({
+      label: _propTypes.default.string,
+      navigateTo: _propTypes.default.func
+    }),
+    prevYear: _propTypes.default.shape({
+      label: _propTypes.default.string,
+      navigateTo: _propTypes.default.func
+    })
+  })
+};

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

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalendarInput = void 0;
+
+var _card = require("@dhis2-ui/card");
+
+var _input = require("@dhis2-ui/input");
+
+var _layer = require("@dhis2-ui/layer");
+
+var _popper = require("@dhis2-ui/popper");
+
+var _multiCalendarDates = require("@dhis2/multi-calendar-dates");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _calendarPropTypes = require("../calendar/calendar-prop-types.js");
+
+var _index = require("../calendar/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); }
+
+const padWithZeroes = function (number) {
+  let count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  return String(number).padStart(count, '0');
+};
+
+const offsetModifier = {
+  name: 'offset',
+  options: {
+    offset: [0, 2]
+  }
+};
+
+const CalendarInput = function () {
+  let {
+    onDateSelect,
+    calendar,
+    date,
+    dir,
+    locale,
+    numberingSystem,
+    weekDayFormat,
+    timeZone,
+    width,
+    cellSize,
+    ...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);
+    };
+
+    return {
+      onDateSelect: onDateSelectWrapper,
+      calendar,
+      date,
+      dir,
+      locale,
+      numberingSystem,
+      weekDayFormat,
+      timeZone,
+      width,
+      cellSize
+    };
+  }, [calendar, cellSize, date, dir, locale, numberingSystem, onDateSelect, timeZone, weekDayFormat, width]);
+
+  const onFocus = () => {
+    setOpen(true);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref
+  }, /*#__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, {
+    onBackdropClick: () => {
+      setOpen(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
+    reference: ref,
+    placement: "bottom-start",
+    modifiers: [offsetModifier]
+  }, /*#__PURE__*/_react.default.createElement(_card.Card, null, /*#__PURE__*/_react.default.createElement(_index.Calendar, _extends({}, calendarProps, {
+    date: value
+  }))))));
+};
+
+exports.CalendarInput = CalendarInput;
+CalendarInput.defaultProps = {
+  dataTest: 'dhis2-uiwidgets-calendar-inputfield'
+};
+CalendarInput.propTypes = { ..._calendarPropTypes.CalendarProps,
+  ..._input.InputFieldProps
+};

package/build/cjs/features/supports_ethiopic_calendar/supports_ethiopic_calendar.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _steps = require("cypress-cucumber-preprocessor/steps");
+
+(0, _steps.Given)('an Ethiopic calendar is rendered in {word}', language => {
+  cy.visitStory('CalendarInputTesting', "Ethiopic With ".concat(language));
+  cy.get('[data-test="dhis2-uiwidgets-calendar-inputfield"]').click();
+  cy.get('[data-test=calendar]').should('be.visible');
+});
+(0, _steps.Then)('days should be rendered in "{word}"', language => {
+  const days = language === 'amharic' ? ['ሰኞ', 'ማክሰ', 'ረቡዕ', 'ሐሙስ', 'ዓርብ', 'ቅዳሜ', 'እሑድ'] : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+  days.forEach(day => {
+    cy.contains(day).should('be.visible');
+  });
+});
+(0, _steps.And)('months should be rendered in "{word}" with navigation', language => {
+  const months = language === 'amharic' ? {
+    current: 'ጥቅምት',
+    previous: 'መስከረም',
+    next: 'ኅዳር'
+  } : {
+    current: 'Tekemt',
+    previous: 'Meskerem',
+    next: 'Hedar'
+  };
+  cy.contains(months.current).should('be.visible');
+  cy.get('[data-test="calendar-next-month"]').click();
+  cy.contains(months.next).should('be.visible');
+  cy.get('[data-test="calendar-previous-month"]').click();
+  cy.get('[data-test="calendar-previous-month"]').click();
+  cy.contains(months.previous).should('be.visible');
+});
+(0, _steps.Then)('we should be able to select a day', () => {
+  const date = '2014-02-03';
+  cy.get("[data-test=\"".concat(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/cjs/features/supports_ethiopic_calendar.feature

@@ -0,0 +1,19 @@
+Feature: The Calendar renders in the Ethiopic calendar system
+
+    Scenario: Display an Ethiopic calendar in Amharic
+        Given an Ethiopic calendar is rendered in "amharic"
+        Then days should be rendered in "amharic"
+        And months should be rendered in "amharic" with navigation
+
+    Scenario: Select a day in the Ethiopic calendar in Amharic
+        Given an Ethiopic calendar is rendered in "amharic"
+        Then we should be able to select a day
+
+    Scenario: Display an Ethiopic calendar in English
+        Given an Ethiopic calendar is rendered in "english"
+        Then days should be rendered in "english"
+        And months should be rendered in "english" with navigation
+
+    Scenario: Select a day in the Ethiopic calendar in English
+        Given an Ethiopic calendar is rendered in English
+        Then we should be able to select a day