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

package/build/cjs/features/supports_nepali_calendar/supports_nepali_calendar.js

@@ -38,4 +38,5 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
   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/cjs/stories/calendar-input.prod.stories.js

@@ -3,17 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CalendarWithClearButton = void 0;
-exports.CalendarWithEditiableInput = CalendarWithEditiableInput;
-exports.CalendarWithEditiableInputReactForm = CalendarWithEditiableInputReactForm;
-exports.default = exports.NepaliWithNepali = exports.NepaliWithEnglish = exports.IslamicWithArabic = exports.GregorianWithEnglish = exports.GregorianWithArabic = exports.EthiopicWithEnglish = exports.EthiopicWithAmharic = void 0;
+exports.default = exports.NepaliWithNepali = exports.NepaliWithEnglish = exports.IslamicWithArabic = exports.GregorianWithEnglish = exports.GregorianWithArabic = exports.EthiopicWithEnglish = exports.EthiopicWithAmharic = exports.CalendarWithClearButton = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactFinalForm = require("react-final-form");
 var _calendarInput = require("../calendar-input/calendar-input.js");
 var _calendarStoryWrapper = require("./calendar-story-wrapper.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 _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 subtitle = `[Experimental] Calendar Input is a wrapper around Calendar displaying an input that triggers the calendar`;
 const description = `
 Use a CalendarInput where there is a need to let the user input a date.
@@ -119,67 +114,4 @@ const CalendarWithClearButton = _ref2 => {
     "data-test": "storybook-calendar-date-value"
   }, date !== null && date !== void 0 ? date : 'undefined')));
 };
-exports.CalendarWithClearButton = CalendarWithClearButton;
-function CalendarWithEditiableInput() {
-  const [date, setDate] = (0, _react.useState)('2020-07-03');
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_calendarInput.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
-  })));
-}
-function CalendarWithEditiableInputReactForm() {
-  const [calendarError, setCalendarError] = (0, _react.useState)(undefined);
-  const errored = () => {
-    return {
-      calendar: calendarError
-    };
-  };
-  return /*#__PURE__*/_react.default.createElement(_reactFinalForm.Form, {
-    onSubmit: (values, meta) => {
-      console.log('SUBMITTING', {
-        values,
-        meta
-      });
-    },
-    initialValues: {
-      calendar: '2022-10-12'
-    },
-    validate: errored
-  }, _ref3 => {
-    let {
-      handleSubmit
-    } = _ref3;
-    return /*#__PURE__*/_react.default.createElement("form", {
-      onSubmit: handleSubmit
-    }, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
-      name: "calendar"
-    }, props => /*#__PURE__*/_react.default.createElement(_calendarInput.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.default.createElement("button", {
-      type: "submit",
-      disabled: false,
-      onClick: handleSubmit
-    }, "Submit"));
-  });
-}
+exports.CalendarWithClearButton = CalendarWithClearButton;

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

@@ -17,14 +17,15 @@ const {
   numberingSystems
 } = _multiCalendarDates.constants;
 const CalendarStoryWrapper = props => {
+  var _selectedDate$calenda;
   const {
-    calendar,
+    calendar = 'gregory',
     locale,
     timeZone,
     dir,
-    component: Component,
+    component: Component = _calendar.Calendar,
     date,
-    weekDayFormat
+    weekDayFormat = 'narrow'
   } = props;
   const [selectedCalendar, setSelectedCalendar] = (0, _react.useState)(calendar);
   const [selectedNumberingSystem, setSelectedNumberingSystem] = (0, _react.useState)();
@@ -157,14 +158,13 @@ const CalendarStoryWrapper = props => {
     }
   }, /*#__PURE__*/_react.default.createElement("div", null, selectedDate && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", null, "calendar date: "), /*#__PURE__*/_react.default.createElement("span", {
     "data-test": "storybook-calendar-result"
-  }, selectedDate.calendarDateString)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", null, "callback:"), JSON.stringify(selectedDate, null, 2))))));
+  }, selectedDate.calendarDateString)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", null, "iso date: "), /*#__PURE__*/_react.default.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.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", null, "callback:"), JSON.stringify(selectedDate, null, 2))))));
 };
 exports.CalendarStoryWrapper = CalendarStoryWrapper;
-CalendarStoryWrapper.defaultProps = {
-  calendar: 'gregorian',
-  component: _calendar.Calendar,
-  weekDayFormat: 'narrow'
-};
 CalendarStoryWrapper.propTypes = {
   calendar: _propTypes.default.string.isRequired,
   component: _propTypes.default.elementType.isRequired,

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

@@ -7,8 +7,7 @@ export const CalendarTableCell = _ref => {
   let {
     day,
     cellSize,
-    selectedDate,
-    unfocusable
+    selectedDate
   } = _ref;
   const dayHoverBackgroundColor = colors.grey200;
   const selectedDayBackgroundColor = colors.teal700;
@@ -18,7 +17,6 @@ export const CalendarTableCell = _ref => {
     className: _JSXStyle.dynamic([["2052411850", [cellSize, cellSize, cellSize, cellSize, colors.grey900, dayHoverBackgroundColor, colors.grey300, selectedDayBackgroundColor, colors.teal600, colors.teal200, colors.grey600]]])
   }, /*#__PURE__*/React.createElement("button", {
     name: "day",
-    tabIndex: unfocusable ? -1 : 0,
     className: _JSXStyle.dynamic([["2052411850", [cellSize, cellSize, cellSize, cellSize, colors.grey900, dayHoverBackgroundColor, colors.grey300, selectedDayBackgroundColor, colors.teal600, colors.teal200, colors.grey600]]]) + " " + (cx('day', {
       isSelected: selectedDate === (day === null || day === void 0 ? void 0 : day.calendarDate),
       isToday: day.isToday,
@@ -39,6 +37,5 @@ CalendarTableCell.propTypes = {
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     onClick: PropTypes.func
   }),
-  selectedDate: PropTypes.string,
-  unfocusable: PropTypes.bool
+  selectedDate: PropTypes.string
 };

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

@@ -10,8 +10,7 @@ export const CalendarTable = _ref => {
     calendarWeekDays,
     width,
     cellSize,
-    selectedDate,
-    unfocusable
+    selectedDate
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["452536960", [spacers.dp4, spacers.dp4]]]) + " " + "calendar-table-wrapper"
@@ -29,14 +28,13 @@ export const CalendarTable = _ref => {
     day: day,
     key: day === null || day === void 0 ? void 0 : day.calendarDate,
     cellSize: cellSize,
-    width: width,
-    unfocusable: unfocusable
+    width: width
   })))))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "452536960",
     dynamic: [spacers.dp4, spacers.dp4]
   }, [`.calendar-table.__jsx-style-dynamic-selector{border:none;border-collapse:collapse;width:100%;margin-block:${spacers.dp4};}`, ".calendar-table.__jsx-style-dynamic-selector tr.__jsx-style-dynamic-selector,.calendar-table.__jsx-style-dynamic-selector td.__jsx-style-dynamic-selector{border:none;}", `.calendar-table-wrapper.__jsx-style-dynamic-selector{padding-inline:${spacers.dp4};}`]));
 };
-export const CalendarTableProps = {
+CalendarTable.propTypes = {
   calendarWeekDays: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.shape({
     calendarDate: PropTypes.string,
     isInCurrentMonth: PropTypes.bool,
@@ -48,8 +46,6 @@ export const CalendarTableProps = {
   }).isRequired).isRequired).isRequired,
   cellSize: PropTypes.string,
   selectedDate: PropTypes.string,
-  unfocusable: PropTypes.bool,
   weekDayLabels: PropTypes.arrayOf(PropTypes.string),
   width: PropTypes.string
-};
-CalendarTable.propTypes = CalendarTableProps;
+};

package/build/es/calendar/calendar.js

@@ -1,7 +1,10 @@
+import _JSXStyle from "styled-jsx/style";
 import { useDatePicker, useResolvedDirection } from '@dhis2/multi-calendar-dates';
+import { colors } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
-import React, { useMemo, useState } from 'react';
-import { CalendarContainer } from './calendar-container.js';
+import React, { useState } from 'react';
+import { CalendarTable } from './calendar-table.js';
+import { NavigationContainer } from './navigation-container.js';
 export const Calendar = _ref => {
   let {
     onDateSelect,
@@ -10,11 +13,13 @@ export const Calendar = _ref => {
     dir,
     locale,
     numberingSystem,
-    weekDayFormat,
+    weekDayFormat = 'narrow',
     timeZone,
-    width,
-    cellSize
+    width = '240px',
+    cellSize = '32px'
   } = _ref;
+  const wrapperBorderColor = colors.grey300;
+  const backgroundColor = 'none';
   const [selectedDateString, setSelectedDateString] = useState(date);
   const languageDirection = useResolvedDirection(dir, locale);
   const options = {
@@ -24,7 +29,7 @@ export const Calendar = _ref => {
     numberingSystem,
     weekDayFormat
   };
-  const pickerResults = useDatePicker({
+  const pickerOptions = useDatePicker({
     onDateSelect: result => {
       const {
         calendarDateString
@@ -35,35 +40,29 @@ export const Calendar = _ref => {
     date: selectedDateString,
     options
   });
-  const calendarProps = useMemo(() => {
-    return {
-      date,
-      dir,
-      locale,
-      width,
-      cellSize,
-      // minDate,
-      // maxDate,
-      // validation, // todo: clarify how we use validation props (and format) in Calendar (not CalendarInput)
-      // format,
-      isValid: pickerResults.isValid,
-      calendarWeekDays: pickerResults.calendarWeekDays,
-      weekDayLabels: pickerResults.weekDayLabels,
-      currMonth: pickerResults.currMonth,
-      currYear: pickerResults.currYear,
-      nextMonth: pickerResults.nextMonth,
-      nextYear: pickerResults.nextYear,
-      prevMonth: pickerResults.prevMonth,
-      prevYear: pickerResults.prevYear,
-      languageDirection
-    };
-  }, [cellSize, date, dir, locale, pickerResults, width, languageDirection]);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CalendarContainer, calendarProps));
-};
-Calendar.defaultProps = {
-  cellSize: '32px',
-  width: '240px',
-  weekDayFormat: 'narrow'
+  const {
+    calendarWeekDays,
+    weekDayLabels
+  } = pickerOptions;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]])
+  }, /*#__PURE__*/React.createElement("div", {
+    dir: languageDirection,
+    "data-test": "calendar",
+    className: _JSXStyle.dynamic([["2823859047", [backgroundColor, wrapperBorderColor, width]]]) + " " + "calendar-wrapper"
+  }, /*#__PURE__*/React.createElement(NavigationContainer, {
+    pickerOptions: pickerOptions,
+    languageDirection: languageDirection
+  }), /*#__PURE__*/React.createElement(CalendarTable, {
+    selectedDate: selectedDateString,
+    calendarWeekDays: calendarWeekDays,
+    weekDayLabels: weekDayLabels,
+    cellSize: cellSize,
+    width: width
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2823859047",
+    dynamic: [backgroundColor, wrapperBorderColor, width]
+  }, [`.calendar-wrapper.__jsx-style-dynamic-selector{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;background-color:${backgroundColor};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:1px solid ${wrapperBorderColor};border-radius:3px;min-width:${width};width:-webkit-max-content;width:-moz-max-content;width:max-content;box-shadow:0px 4px 6px -2px #2129340d;box-shadow:0px 10px 15px -3px #2129341a;}`]));
 };
 export const CalendarProps = {
   /** the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts  */

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

@@ -10,110 +10,108 @@ export const NavigationContainer = _ref => {
   var _currYear$label;
   let {
     languageDirection,
+    pickerOptions
+  } = _ref;
+  const PreviousIcon = languageDirection === 'ltr' ? IconChevronLeft16 : IconChevronRight16;
+  const NextIcon = languageDirection === 'ltr' ? IconChevronRight16 : IconChevronLeft16;
+  const {
     currMonth,
     currYear,
     nextMonth,
     nextYear,
     prevMonth,
-    prevYear,
-    unfocusable
-  } = _ref;
-  const PreviousIcon = languageDirection === 'ltr' ? IconChevronLeft16 : IconChevronRight16;
-  const NextIcon = languageDirection === 'ltr' ? IconChevronRight16 : IconChevronLeft16;
+    prevYear
+  } = pickerOptions;
 
   // Ethiopic years - when localised to English - add the era (i.e. 2015 ERA1), which is redundant in practice (like writing AD for gregorian years)
   // there is an ongoing discussion in JS-Temporal polyfill whether the era should be included or not, but for our case, it's safer to remove it
   const currentYearLabel = (_currYear$label = currYear.label) === null || _currYear$label === void 0 ? void 0 : _currYear$label.toString().replace(/ERA1/, '');
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]]) + " " + "navigation-container"
+    className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "navigation-container"
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]]) + " " + "month"
+    className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "month"
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]]) + " " + "prev"
+    className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "prev"
   }, /*#__PURE__*/React.createElement("button", {
     onClick: prevMonth.navigateTo,
     name: "previous-month",
     "data-test": "calendar-previous-month",
     "aria-label": `${i18n.t(`Go to ${prevMonth.label}`)}`,
     type: "button",
-    tabIndex: unfocusable ? -1 : 0,
-    className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]])
+    className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
   }, /*#__PURE__*/React.createElement(PreviousIcon, {
-    className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]])
+    className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
   }))), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]]) + " " + "curr"
+    className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "curr"
   }, /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]]) + " " + "label"
+    className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "label"
   }, currMonth.label)), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]]) + " " + "next"
+    className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "next"
   }, /*#__PURE__*/React.createElement("button", {
     onClick: nextMonth.navigateTo,
     "data-test": "calendar-next-month",
     name: "next-month",
     "aria-label": `${i18n.t(`Go to ${nextMonth.label}`)}`,
     type: "button",
-    tabIndex: unfocusable ? -1 : 0,
-    className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]])
+    className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
   }, /*#__PURE__*/React.createElement(NextIcon, {
-    className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]])
+    className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
   })))), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]]) + " " + "year"
+    className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "year"
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]]) + " " + "prev"
+    className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "prev"
   }, /*#__PURE__*/React.createElement("button", {
     onClick: prevYear.navigateTo,
     name: "previous-year",
     "aria-label": `${i18n.t('Go to previous year')}`,
     type: "button",
-    tabIndex: unfocusable ? -1 : 0,
-    className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]])
+    className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
   }, /*#__PURE__*/React.createElement(PreviousIcon, {
-    className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]])
+    className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
   }))), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]]) + " " + "curr"
+    className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "curr"
   }, /*#__PURE__*/React.createElement("span", {
     "data-test": "calendar-current-year",
-    className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]]) + " " + "label"
+    className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "label"
   }, currentYearLabel)), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]]) + " " + "next"
+    className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]]) + " " + "next"
   }, /*#__PURE__*/React.createElement("button", {
     onClick: nextYear.navigateTo,
     name: "next-year",
     "aria-label": `${i18n.t('Go to next year')}`,
     type: "button",
-    tabIndex: unfocusable ? -1 : 0,
-    className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]])
+    className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
   }, /*#__PURE__*/React.createElement(NextIcon, {
-    className: _JSXStyle.dynamic([["1327991300", [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]]])
+    className: _JSXStyle.dynamic([["3883083596", [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]]])
   }))))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1327991300",
-    dynamic: [spacers.dp4, wrapperBorderColor, headerBackground, spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp4, spacers.dp8]
-  }, [`.navigation-container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:${spacers.dp4};border-bottom:1px solid ${wrapperBorderColor};background-color:${headerBackground};font-size:1.08em;}`, ".month.__jsx-style-dynamic-selector,.year.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;width:50%;}", ".prev.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector,.curr.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-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;}", ".prev.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector{width:24px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".curr.__jsx-style-dynamic-selector{-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;overflow:hidden;}", `button.__jsx-style-dynamic-selector{background:none;border:0;padding:${spacers.dp4};height:24px;width:24px;color:${colors.grey600};border-radius:3px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-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;}`, `button.__jsx-style-dynamic-selector:hover{background-color:${colors.grey200};color:${colors.grey900};cursor:pointer;}`, `button.__jsx-style-dynamic-selector:active{background-color:${colors.grey300};}`, `.label.__jsx-style-dynamic-selector{padding:${spacers.dp4} ${spacers.dp8};white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;max-width:100%;}`]));
+    id: "3883083596",
+    dynamic: [spacers.dp4, colors.grey600, colors.grey200, colors.grey900, colors.grey300, spacers.dp8, spacers.dp4, wrapperBorderColor, headerBackground]
+  }, ["button.__jsx-style-dynamic-selector{background:none;border:0;}", ".month.__jsx-style-dynamic-selector,.year.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:default;}", ".month.__jsx-style-dynamic-selector .curr.__jsx-style-dynamic-selector,.year.__jsx-style-dynamic-selector .curr.__jsx-style-dynamic-selector{-webkit-flex:2;-ms-flex:2;flex:2;white-space:nowrap;}", ".prev.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;text-align:center;}", `.prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector{padding:${spacers.dp4};height:24px;width:24px;color:${colors.grey600};border-radius:3px;}`, ".prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector{width:16px;height:16px;}", `.prev.__jsx-style-dynamic-selector:hover button.__jsx-style-dynamic-selector,.next.__jsx-style-dynamic-selector:hover button.__jsx-style-dynamic-selector{background-color:${colors.grey200};color:${colors.grey900};cursor:pointer;}`, `.prev.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector:active,.next.__jsx-style-dynamic-selector button.__jsx-style-dynamic-selector:active{background-color:${colors.grey300};}`, ".label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:4px 8px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;min-height:16px;}", `.navigation-container.__jsx-style-dynamic-selector{gap:${spacers.dp8};padding:${spacers.dp4};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;border-bottom:1px solid ${wrapperBorderColor};background-color:${headerBackground};font-size:1.08em;}`]));
 };
-export const NavigationContainerProps = {
-  currMonth: PropTypes.shape({
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  }),
-  currYear: PropTypes.shape({
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  }),
+NavigationContainer.propTypes = {
   languageDirection: PropTypes.oneOf(['ltr', 'rtl']),
-  nextMonth: PropTypes.shape({
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    navigateTo: PropTypes.func
-  }),
-  nextYear: PropTypes.shape({
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    navigateTo: PropTypes.func
-  }),
-  prevMonth: PropTypes.shape({
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    navigateTo: PropTypes.func
-  }),
-  prevYear: PropTypes.shape({
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    navigateTo: PropTypes.func
-  }),
-  unfocusable: PropTypes.bool
-};
-NavigationContainer.propTypes = NavigationContainerProps;
+  pickerOptions: PropTypes.shape({
+    currMonth: PropTypes.shape({
+      label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    }),
+    currYear: PropTypes.shape({
+      label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    }),
+    nextMonth: PropTypes.shape({
+      label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      navigateTo: PropTypes.func
+    }),
+    nextYear: PropTypes.shape({
+      label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      navigateTo: PropTypes.func
+    }),
+    prevMonth: PropTypes.shape({
+      label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      navigateTo: PropTypes.func
+    }),
+    prevYear: PropTypes.shape({
+      label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      navigateTo: PropTypes.func
+    })
+  })
+};