@instructure/ui-calendar 10.16.1-snapshot-0 → 10.16.1

package/lib/Calendar/__new-tests__/Calendar.test.js

@@ -1,8 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
+var _react = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _vitest = require("vitest");
 require("@testing-library/jest-dom");
@@ -10,6 +9,7 @@ var _generateA11yTests = require("@instructure/ui-scripts/lib/test/generateA11yT
 var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
 var _Calendar5 = _interopRequireDefault(require("../__examples__/Calendar.examples"));
 var _index = _interopRequireDefault(require("../index"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _Calendar, _Calendar2, _Calendar3, _Calendar4, _span, _button, _button2, _button3, _button4, _button5, _button6;
 /*
  * The MIT License (MIT)
@@ -40,12 +40,12 @@ const generateDays = (count = _index.default.DAY_COUNT) => {
   const days = [];
   const date = new Date('2019-07-28');
   while (days.length < count) {
-    days.push(/*#__PURE__*/_react.default.createElement(_index.default.Day, {
-      key: date.toISOString(),
+    days.push((0, _jsxRuntime.jsx)(_index.default.Day, {
       date: date.toISOString(),
       label: date.toISOString(),
-      isOutsideMonth: date.getMonth() !== 7
-    }, date.getDate()));
+      isOutsideMonth: date.getMonth() !== 7,
+      children: date.getDate()
+    }, date.toISOString()));
     date.setDate(date.getDate() + 1);
   }
   return days;
@@ -64,18 +64,18 @@ describe('<Calendar />', () => {
   });
   describe('with minimal config', () => {
     it('should render 44 buttons without config', async () => {
-      (0, _react2.render)(_Calendar || (_Calendar = /*#__PURE__*/_react.default.createElement(_index.default, null)));
+      (0, _react.render)(_Calendar || (_Calendar = (0, _jsxRuntime.jsx)(_index.default, {})));
       const buttons = document.getElementsByTagName('button');
       expect(buttons.length).toEqual(44);
     });
     it('should render proper week names by default', async () => {
-      const _render = (0, _react2.render)(_Calendar2 || (_Calendar2 = /*#__PURE__*/_react.default.createElement(_index.default, null))),
+      const _render = (0, _react.render)(_Calendar2 || (_Calendar2 = (0, _jsxRuntime.jsx)(_index.default, {}))),
         container = _render.container;
       const thead = container.querySelector('thead');
       expect(thead).toHaveTextContent('SundaySuMondayMoTuesdayTuWednesdayWeThursdayThFridayFrSaturdaySa');
     });
     it('should render proper week names if locale is set', async () => {
-      const _render2 = (0, _react2.render)(_Calendar3 || (_Calendar3 = /*#__PURE__*/_react.default.createElement(_index.default, {
+      const _render2 = (0, _react.render)(_Calendar3 || (_Calendar3 = (0, _jsxRuntime.jsx)(_index.default, {
           locale: "hu"
         }))),
         container = _render2.container;
@@ -83,7 +83,7 @@ describe('<Calendar />', () => {
       expect(thead).toHaveTextContent('hétfőhkeddkszerdaszecsütörtökcspéntekpszombatszovasárnapv');
     });
     it('should disable days properly', async () => {
-      const _render3 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+      const _render3 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
           currentDate: "2023-12-15",
           disabledDates: ['2023-12-22', '2023-12-12', '2023-12-11']
         })),
@@ -96,11 +96,11 @@ describe('<Calendar />', () => {
     });
     it('should indicate selected day', async () => {
       var _screen$queryByText, _screen$queryByText$p;
-      (0, _react2.render)(_Calendar4 || (_Calendar4 = /*#__PURE__*/_react.default.createElement(_index.default, {
+      (0, _react.render)(_Calendar4 || (_Calendar4 = (0, _jsxRuntime.jsx)(_index.default, {
         currentDate: "2023-12-15",
         selectedDate: "2023-12-22"
       })));
-      const selectedDay = (_screen$queryByText = _react2.screen.queryByText('22 December 2023')) === null || _screen$queryByText === void 0 ? void 0 : (_screen$queryByText$p = _screen$queryByText.parentElement) === null || _screen$queryByText$p === void 0 ? void 0 : _screen$queryByText$p.parentElement;
+      const selectedDay = (_screen$queryByText = _react.screen.queryByText('22 December 2023')) === null || _screen$queryByText === void 0 ? void 0 : (_screen$queryByText$p = _screen$queryByText.parentElement) === null || _screen$queryByText$p === void 0 ? void 0 : _screen$queryByText$p.parentElement;
       expect(selectedDay).toBeDefined();
       if (selectedDay) {
         var _window$getComputedSt;
@@ -109,25 +109,28 @@ describe('<Calendar />', () => {
     });
   });
   it('should render children', async () => {
-    const _render4 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
-        renderWeekdayLabels: weekdayLabels
-      }, generateDays())),
+    const _render4 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
+        renderWeekdayLabels: weekdayLabels,
+        children: generateDays()
+      })),
       container = _render4.container;
-    const calendarDays = container.querySelectorAll('span[class$="-calendarDay__day"]');
+    const calendarDays = container.querySelectorAll('span[class*="-calendarDay__day"]');
     expect(calendarDays.length).toEqual(_index.default.DAY_COUNT);
   });
   it(`should warn if the correct number of children are not provided`, async () => {
     const count = _index.default.DAY_COUNT - 1;
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
-      renderWeekdayLabels: weekdayLabels
-    }, generateDays(count)));
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
+      renderWeekdayLabels: weekdayLabels,
+      children: generateDays(count)
+    }));
     const expectedErrorMessage = `should have exactly ${_index.default.DAY_COUNT} children. ${count} provided.`;
     expect(consoleErrorMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
   });
   it('should render weekday labels', async () => {
-    const _render5 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
-        renderWeekdayLabels: weekdayLabels
-      }, generateDays())),
+    const _render5 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
+        renderWeekdayLabels: weekdayLabels,
+        children: generateDays()
+      })),
       container = _render5.container,
       rerender = _render5.rerender;
     const originalHeaders = container.querySelectorAll('th');
@@ -138,9 +141,10 @@ describe('<Calendar />', () => {
     const functionalWeekdayLabels = [() => 'Sx', () => 'Mx', () => 'Tx', () => 'Wx', () => 'Tx', () => 'Fx', () => 'Sx'];
 
     // Set prop: renderWeekdayLabels
-    rerender(/*#__PURE__*/_react.default.createElement(_index.default, {
-      renderWeekdayLabels: functionalWeekdayLabels
-    }, generateDays()));
+    rerender((0, _jsxRuntime.jsx)(_index.default, {
+      renderWeekdayLabels: functionalWeekdayLabels,
+      children: generateDays()
+    }));
     const updatedHeaders = container.querySelectorAll('th');
     expect(updatedHeaders.length).toEqual(7);
     functionalWeekdayLabels.forEach((functionalLabel, i) => {
@@ -148,16 +152,18 @@ describe('<Calendar />', () => {
     });
   });
   it('should warn if 7 weekday labels are not provided', async () => {
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
-      renderWeekdayLabels: []
-    }, generateDays()));
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
+      renderWeekdayLabels: [],
+      children: generateDays()
+    }));
     const expectedErrorMessage = '`renderWeekdayLabels` should be an array with 7 labels (one for each weekday). 0 provided.';
     expect(consoleErrorMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
   });
   it('should format the weekday labels and days correctly', async () => {
-    const _render6 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
-        renderWeekdayLabels: weekdayLabels
-      }, generateDays())),
+    const _render6 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
+        renderWeekdayLabels: weekdayLabels,
+        children: generateDays()
+      })),
       container = _render6.container;
     const headerRow = container.querySelectorAll('thead > tr');
     expect(headerRow.length).toEqual(1);
@@ -171,82 +177,107 @@ describe('<Calendar />', () => {
     }
   });
   it('should render navigation label', async () => {
-    const navLabel = _span || (_span = /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("div", null, "March"), /*#__PURE__*/_react.default.createElement("div", null, "2019")));
-    const _render7 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+    const navLabel = _span || (_span = (0, _jsxRuntime.jsxs)("span", {
+      children: [(0, _jsxRuntime.jsx)("div", {
+        children: "March"
+      }), (0, _jsxRuntime.jsx)("div", {
+        children: "2019"
+      })]
+    }));
+    const _render7 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
         renderWeekdayLabels: weekdayLabels,
-        renderNavigationLabel: navLabel
-      }, generateDays())),
+        renderNavigationLabel: navLabel,
+        children: generateDays()
+      })),
       rerender = _render7.rerender;
-    const month = _react2.screen.getByText('March');
-    const year = _react2.screen.getByText('2019');
+    const month = _react.screen.getByText('March');
+    const year = _react.screen.getByText('2019');
     expect(month).toBeInTheDocument();
     expect(year).toBeInTheDocument();
 
     // Set prop: renderNavigationLabel
-    rerender(/*#__PURE__*/_react.default.createElement(_index.default, {
+    rerender((0, _jsxRuntime.jsx)(_index.default, {
       renderWeekdayLabels: weekdayLabels,
-      renderNavigationLabel: () => navLabel
-    }, generateDays()));
-    const updatedMonth = _react2.screen.getByText('March');
-    const updatedYear = _react2.screen.getByText('2019');
+      renderNavigationLabel: () => navLabel,
+      children: generateDays()
+    }));
+    const updatedMonth = _react.screen.getByText('March');
+    const updatedYear = _react.screen.getByText('2019');
     expect(updatedMonth).toBeInTheDocument();
     expect(updatedYear).toBeInTheDocument();
   });
   it('should render next and prev buttons', async () => {
-    const _render8 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
-        renderWeekdayLabels: weekdayLabels
-      }, generateDays())),
+    const _render8 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
+        renderWeekdayLabels: weekdayLabels,
+        children: generateDays()
+      })),
       rerender = _render8.rerender;
-    const defaultPrevButton = _react2.screen.getByText('Previous month');
-    const defaultNextButton = _react2.screen.getByText('Next month');
+    const defaultPrevButton = _react.screen.getByText('Previous month');
+    const defaultNextButton = _react.screen.getByText('Next month');
     expect(defaultPrevButton).toBeInTheDocument();
     expect(defaultNextButton).toBeInTheDocument();
-    rerender(/*#__PURE__*/_react.default.createElement(_index.default, {
+    rerender((0, _jsxRuntime.jsx)(_index.default, {
       renderWeekdayLabels: weekdayLabels,
-      renderPrevMonthButton: _button || (_button = /*#__PURE__*/_react.default.createElement("button", null, "test-prev")),
-      renderNextMonthButton: _button2 || (_button2 = /*#__PURE__*/_react.default.createElement("button", null, "test-next"))
-    }, generateDays()));
-    const customPrevButton = _react2.screen.getByText('test-prev');
-    const customNextButton = _react2.screen.getByText('test-next');
+      renderPrevMonthButton: _button || (_button = (0, _jsxRuntime.jsx)("button", {
+        children: "test-prev"
+      })),
+      renderNextMonthButton: _button2 || (_button2 = (0, _jsxRuntime.jsx)("button", {
+        children: "test-next"
+      })),
+      children: generateDays()
+    }));
+    const customPrevButton = _react.screen.getByText('test-prev');
+    const customNextButton = _react.screen.getByText('test-next');
     expect(customPrevButton).toBeInTheDocument();
     expect(customNextButton).toBeInTheDocument();
-    rerender(/*#__PURE__*/_react.default.createElement(_index.default, {
+    rerender((0, _jsxRuntime.jsx)(_index.default, {
       renderWeekdayLabels: weekdayLabels,
-      renderPrevMonthButton: () => _button3 || (_button3 = /*#__PURE__*/_react.default.createElement("button", null, "func-test-prev")),
-      renderNextMonthButton: () => _button4 || (_button4 = /*#__PURE__*/_react.default.createElement("button", null, "func-test-next"))
-    }, generateDays()));
-    const funcPrevButton = _react2.screen.getByText('func-test-prev');
-    const funcNextButton = _react2.screen.getByText('func-test-next');
+      renderPrevMonthButton: () => _button3 || (_button3 = (0, _jsxRuntime.jsx)("button", {
+        children: "func-test-prev"
+      })),
+      renderNextMonthButton: () => _button4 || (_button4 = (0, _jsxRuntime.jsx)("button", {
+        children: "func-test-next"
+      })),
+      children: generateDays()
+    }));
+    const funcPrevButton = _react.screen.getByText('func-test-prev');
+    const funcNextButton = _react.screen.getByText('func-test-next');
     expect(funcPrevButton).toBeInTheDocument();
     expect(funcNextButton).toBeInTheDocument();
   });
   it('should call onRequestRenderNextMonth and onRequestRenderPrevMonth', async () => {
     const onRequestRenderPrevMonth = _vitest.vi.fn();
     const onRequestRenderNextMonth = _vitest.vi.fn();
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
       renderWeekdayLabels: weekdayLabels,
-      renderPrevMonthButton: _button5 || (_button5 = /*#__PURE__*/_react.default.createElement("button", null, "prev month")),
-      renderNextMonthButton: _button6 || (_button6 = /*#__PURE__*/_react.default.createElement("button", null, "next month")),
+      renderPrevMonthButton: _button5 || (_button5 = (0, _jsxRuntime.jsx)("button", {
+        children: "prev month"
+      })),
+      renderNextMonthButton: _button6 || (_button6 = (0, _jsxRuntime.jsx)("button", {
+        children: "next month"
+      })),
       onRequestRenderPrevMonth: onRequestRenderPrevMonth,
-      onRequestRenderNextMonth: onRequestRenderNextMonth
-    }, generateDays()));
-    const prevButton = _react2.screen.getByText('prev month');
-    const nextButton = _react2.screen.getByText('next month');
+      onRequestRenderNextMonth: onRequestRenderNextMonth,
+      children: generateDays()
+    }));
+    const prevButton = _react.screen.getByText('prev month');
+    const nextButton = _react.screen.getByText('next month');
     expect(onRequestRenderPrevMonth).not.toHaveBeenCalled();
     expect(onRequestRenderNextMonth).not.toHaveBeenCalled();
     await _userEvent.default.click(prevButton);
     await _userEvent.default.click(nextButton);
-    await (0, _react2.waitFor)(() => {
+    await (0, _react.waitFor)(() => {
       expect(onRequestRenderPrevMonth).toHaveBeenCalledTimes(1);
       expect(onRequestRenderNextMonth).toHaveBeenCalledTimes(1);
     });
   });
   describe('when role="listbox"', () => {
     it('should set role="listbox" on table root and role="presentation" on the correct elements', async () => {
-      const _render9 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+      const _render9 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
           renderWeekdayLabels: weekdayLabels,
-          role: "listbox"
-        }, generateDays())),
+          role: "listbox",
+          children: generateDays()
+        })),
         container = _render9.container;
       const table = container.querySelector('table');
       expect(table).toHaveAttribute('role', 'listbox');
@@ -260,26 +291,28 @@ describe('<Calendar />', () => {
       }
     });
     it("should link each day with it's weekday header via `aria-describedby`", async () => {
-      const _render10 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+      const _render10 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
           renderWeekdayLabels: weekdayLabels,
-          role: "listbox"
-        }, generateDays())),
+          role: "listbox",
+          children: generateDays()
+        })),
         container = _render10.container;
       const days = container.querySelectorAll('tbody > tr > td');
       const headers = container.querySelectorAll('th');
       days.forEach((dayTd, i) => {
         const index = i % 7;
-        const day = dayTd.querySelector('span[class$="-calendarDay"]');
+        const day = dayTd.querySelector('span[class*="-calendarDay"]');
         expect(day).toHaveAttribute('aria-describedby', headers[index].getAttribute('id'));
       });
     });
   });
   it('should render root as designated by the `as` prop', async () => {
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
       renderWeekdayLabels: weekdayLabels,
-      as: "ul"
-    }, generateDays()));
-    const calendar = _react2.screen.getByRole('list');
+      as: "ul",
+      children: generateDays()
+    }));
+    const calendar = _react.screen.getByRole('list');
     expect(calendar.tagName).toBe('UL');
     expect(calendar).toHaveTextContent(weekdayLabels.join(''));
   });
@@ -287,7 +320,7 @@ describe('<Calendar />', () => {
     const generatedComponents = (0, _generateA11yTests.generateA11yTests)(_index.default, _Calendar5.default);
     for (const component of generatedComponents) {
       it(component.description, async () => {
-        const _render11 = (0, _react2.render)(component.content),
+        const _render11 = (0, _react.render)(component.content),
           container = _render11.container;
         const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
         expect(axeCheck).toBe(true);

package/lib/Calendar/index.js

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Calendar = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _View = require("@instructure/ui-view/lib/View");
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
@@ -28,6 +27,7 @@ var _IconButton3 = require("@instructure/ui-buttons/lib/IconButton");
 var _IconArrowOpenStartSolid = require("@instructure/ui-icons/lib/IconArrowOpenStartSolid.js");
 var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEndSolid.js");
 var _SimpleSelect = require("@instructure/ui-simple-select/lib/SimpleSelect");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _dec2, _class, _Calendar, _IconButton, _IconButton2;
 /*
  * The MIT License (MIT)
@@ -52,7 +52,6 @@ var _dec, _dec2, _class, _Calendar, _IconButton, _IconButton2;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
 /**
 ---
 category: components
@@ -83,20 +82,20 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
         renderNextMonthButton = _this$props.renderNextMonthButton,
         renderPrevMonthButton = _this$props.renderPrevMonthButton;
       return {
-        prevButton: renderPrevMonthButton ? (0, _callRenderProp.callRenderProp)(renderPrevMonthButton) : _IconButton || (_IconButton = (0, _emotion.jsx)(_IconButton3.IconButton, {
+        prevButton: renderPrevMonthButton ? (0, _callRenderProp.callRenderProp)(renderPrevMonthButton) : _IconButton || (_IconButton = (0, _jsxRuntime.jsx)(_IconButton3.IconButton, {
           size: "small",
           withBackground: false,
           withBorder: false,
-          renderIcon: (0, _emotion.jsx)(_IconArrowOpenStartSolid.IconArrowOpenStartSolid, {
+          renderIcon: (0, _jsxRuntime.jsx)(_IconArrowOpenStartSolid.IconArrowOpenStartSolid, {
             color: "primary"
           }),
           screenReaderLabel: "Previous month"
         })),
-        nextButton: renderNextMonthButton ? (0, _callRenderProp.callRenderProp)(renderNextMonthButton) : _IconButton2 || (_IconButton2 = (0, _emotion.jsx)(_IconButton3.IconButton, {
+        nextButton: renderNextMonthButton ? (0, _callRenderProp.callRenderProp)(renderNextMonthButton) : _IconButton2 || (_IconButton2 = (0, _jsxRuntime.jsx)(_IconButton3.IconButton, {
           size: "small",
           withBackground: false,
           withBorder: false,
-          renderIcon: (0, _emotion.jsx)(_IconArrowOpenEndSolid.IconArrowOpenEndSolid, {
+          renderIcon: (0, _jsxRuntime.jsx)(_IconArrowOpenEndSolid.IconArrowOpenEndSolid, {
             color: "primary"
           }),
           screenReaderLabel: "Next month"
@@ -220,69 +219,87 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
         yearList.push(_DateTime.DateTime.parse(year.toString(), this.locale(), this.timezone()).format('YYYY'));
       }
     }
-    return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("div", {
-      css: style
-    }, prevButton && cloneButton(prevButton, this.handleMonthChange('prev')), renderNavigationLabel ? (0, _callRenderProp.callRenderProp)(renderNavigationLabel) : (0, _emotion.jsx)("span", null, (0, _emotion.jsx)("div", null, visibleMonth.format('MMMM')), !withYearPicker ? (0, _emotion.jsx)("div", null, visibleMonth.format('YYYY')) : null), nextButton && cloneButton(nextButton, this.handleMonthChange('next'))), withYearPicker ? (0, _emotion.jsx)("div", {
-      css: styles === null || styles === void 0 ? void 0 : styles.yearPicker
-    }, (0, _emotion.jsx)(_SimpleSelect.SimpleSelect, {
-      width: "90px",
-      renderLabel: "",
-      placeholder: "--",
-      assistiveText: withYearPicker.screenReaderLabel,
-      value: visibleMonth.format('YYYY'),
-      onChange: (e, {
-        value
-      }) => this.handleYearChange(e, `${value}`)
-    }, yearList.map(year => (0, _emotion.jsx)(_SimpleSelect.SimpleSelect.Option, {
-      key: year,
-      id: `opt-${year}`,
-      value: year
-    }, `${year}`)))) : null);
+    return (0, _jsxRuntime.jsxs)("div", {
+      children: [(0, _jsxRuntime.jsxs)("div", {
+        css: style,
+        children: [prevButton && cloneButton(prevButton, this.handleMonthChange('prev')), renderNavigationLabel ? (0, _callRenderProp.callRenderProp)(renderNavigationLabel) : (0, _jsxRuntime.jsxs)("span", {
+          children: [(0, _jsxRuntime.jsx)("div", {
+            children: visibleMonth.format('MMMM')
+          }), !withYearPicker ? (0, _jsxRuntime.jsx)("div", {
+            children: visibleMonth.format('YYYY')
+          }) : null]
+        }), nextButton && cloneButton(nextButton, this.handleMonthChange('next'))]
+      }), withYearPicker ? (0, _jsxRuntime.jsx)("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.yearPicker,
+        children: (0, _jsxRuntime.jsx)(_SimpleSelect.SimpleSelect, {
+          width: "90px",
+          renderLabel: "",
+          placeholder: "--",
+          assistiveText: withYearPicker.screenReaderLabel,
+          value: visibleMonth.format('YYYY'),
+          onChange: (e, {
+            value
+          }) => this.handleYearChange(e, `${value}`),
+          children: yearList.map(year => (0, _jsxRuntime.jsx)(_SimpleSelect.SimpleSelect.Option, {
+            id: `opt-${year}`,
+            value: year,
+            children: `${year}`
+          }, year))
+        })
+      }) : null]
+    });
   }
   renderBody() {
-    return (0, _emotion.jsx)("table", {
-      role: this.role
-    }, (0, _emotion.jsx)("thead", null, this.renderWeekdayHeaders()), (0, _emotion.jsx)("tbody", null, this.renderDays()));
+    return (0, _jsxRuntime.jsxs)("table", {
+      role: this.role,
+      children: [(0, _jsxRuntime.jsx)("thead", {
+        children: this.renderWeekdayHeaders()
+      }), (0, _jsxRuntime.jsx)("tbody", {
+        children: this.renderDays()
+      })]
+    });
   }
   renderWeekdayHeaders() {
     const styles = this.props.styles;
     const renderWeekdayLabels = this.props.renderWeekdayLabels || this.defaultWeekdays;
     const length = renderWeekdayLabels.length;
     (0, _console.logError)(length === 7, `[Calendar] \`renderWeekdayLabels\` should be an array with 7 labels (one for each weekday). ${length} provided.`);
-    return (0, _emotion.jsx)("tr", null, renderWeekdayLabels.map((label, i) => {
-      return (0, _emotion.jsx)("th", {
-        key: i,
-        scope: "col",
-        css: styles === null || styles === void 0 ? void 0 : styles.weekdayHeader,
-        id: this._weekdayHeaderIds[i]
-      }, (0, _callRenderProp.callRenderProp)(label));
-    }));
+    return (0, _jsxRuntime.jsx)("tr", {
+      children: renderWeekdayLabels.map((label, i) => {
+        return (0, _jsxRuntime.jsx)("th", {
+          scope: "col",
+          css: styles === null || styles === void 0 ? void 0 : styles.weekdayHeader,
+          id: this._weekdayHeaderIds[i],
+          children: (0, _callRenderProp.callRenderProp)(label)
+        }, i);
+      })
+    });
   }
   get defaultWeekdays() {
     const shortDayNames = _DateTime.DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'short');
     const longDayNames = _DateTime.DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'long');
-    return [(0, _emotion.jsx)(_AccessibleContent.AccessibleContent, {
-      key: 1,
-      alt: longDayNames[0]
-    }, shortDayNames[0]), (0, _emotion.jsx)(_AccessibleContent.AccessibleContent, {
-      key: 2,
-      alt: longDayNames[1]
-    }, shortDayNames[1]), (0, _emotion.jsx)(_AccessibleContent.AccessibleContent, {
-      key: 3,
-      alt: longDayNames[2]
-    }, shortDayNames[2]), (0, _emotion.jsx)(_AccessibleContent.AccessibleContent, {
-      key: 4,
-      alt: longDayNames[3]
-    }, shortDayNames[3]), (0, _emotion.jsx)(_AccessibleContent.AccessibleContent, {
-      key: 5,
-      alt: longDayNames[4]
-    }, shortDayNames[4]), (0, _emotion.jsx)(_AccessibleContent.AccessibleContent, {
-      key: 6,
-      alt: longDayNames[5]
-    }, shortDayNames[5]), (0, _emotion.jsx)(_AccessibleContent.AccessibleContent, {
-      key: 7,
-      alt: longDayNames[6]
-    }, shortDayNames[6])];
+    return [(0, _jsxRuntime.jsx)(_AccessibleContent.AccessibleContent, {
+      alt: longDayNames[0],
+      children: shortDayNames[0]
+    }, 1), (0, _jsxRuntime.jsx)(_AccessibleContent.AccessibleContent, {
+      alt: longDayNames[1],
+      children: shortDayNames[1]
+    }, 2), (0, _jsxRuntime.jsx)(_AccessibleContent.AccessibleContent, {
+      alt: longDayNames[2],
+      children: shortDayNames[2]
+    }, 3), (0, _jsxRuntime.jsx)(_AccessibleContent.AccessibleContent, {
+      alt: longDayNames[3],
+      children: shortDayNames[3]
+    }, 4), (0, _jsxRuntime.jsx)(_AccessibleContent.AccessibleContent, {
+      alt: longDayNames[4],
+      children: shortDayNames[4]
+    }, 5), (0, _jsxRuntime.jsx)(_AccessibleContent.AccessibleContent, {
+      alt: longDayNames[5],
+      children: shortDayNames[5]
+    }, 6), (0, _jsxRuntime.jsx)(_AccessibleContent.AccessibleContent, {
+      alt: longDayNames[6],
+      children: shortDayNames[6]
+    }, 7)];
   }
   renderDays() {
     const children = this.props.children;
@@ -295,15 +312,15 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
       if (!days[index]) days.push([]);
       days[index].push(day);
       return days; // 7xN 2D array of `Day`s
-    }, []).map(row => (0, _emotion.jsx)("tr", {
-      key: `row${row[0].props.date}`,
-      role: role
-    }, row.map((day, i) => (0, _emotion.jsx)("td", {
-      key: day.props.date,
-      role: role
-    }, role === 'presentation' ? (0, _safeCloneElement.safeCloneElement)(day, {
-      'aria-describedby': this._weekdayHeaderIds[i]
-    }) : day))));
+    }, []).map(row => (0, _jsxRuntime.jsx)("tr", {
+      role: role,
+      children: row.map((day, i) => (0, _jsxRuntime.jsx)("td", {
+        role: role,
+        children: role === 'presentation' ? (0, _safeCloneElement.safeCloneElement)(day, {
+          'aria-describedby': this._weekdayHeaderIds[i]
+        }) : day
+      }, day.props.date))
+    }, `row${row[0].props.date}`));
   }
   locale() {
     if (this.props.locale) {
@@ -368,8 +385,7 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
     }
     return arr.map(date => {
       const dateStr = date.toISOString();
-      return (0, _emotion.jsx)(Calendar.Day, {
-        key: dateStr,
+      return (0, _jsxRuntime.jsx)(Calendar.Day, {
         date: dateStr,
         isSelected: selectedDate ? date.isSame(selectedDate, 'day') : false,
         isToday: date.isSame(today, 'day'),
@@ -377,19 +393,22 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
         label: date.format('D MMMM YYYY') // used by screen readers
         ,
         onClick: this.handleDayClick,
-        interaction: this.isDisabledDate(date) ? 'disabled' : 'enabled'
-      }, date.format('DD'));
+        interaction: this.isDisabledDate(date) ? 'disabled' : 'enabled',
+        children: date.format('DD')
+      }, dateStr);
     });
   }
   render() {
     const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Calendar.allowedProps), Calendar);
-    return (0, _emotion.jsx)(_View.View, Object.assign({}, passthroughProps, {
+    return (0, _jsxRuntime.jsxs)(_View.View, {
+      ...passthroughProps,
       as: this.props.as,
       display: "inline-block",
       padding: "small",
       background: "primary",
-      elementRef: this.handleRef
-    }), this.renderHeader(), this.renderBody());
+      elementRef: this.handleRef,
+      children: [this.renderHeader(), this.renderBody()]
+    });
   }
 }, _Calendar.displayName = "Calendar", _Calendar.componentId = 'Calendar', _Calendar.contextType = _ApplyLocaleContext.ApplyLocaleContext, _Calendar.Day = _Day.Day, _Calendar.DAY_COUNT = 42, _Calendar.propTypes = _props.propTypes, _Calendar.allowedProps = _props.allowedProps, _Calendar.defaultProps = {
   as: 'span',