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

package/es/Calendar/index.js

@@ -23,8 +23,7 @@ var _dec, _dec2, _class, _Calendar, _IconButton, _IconButton2;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
-import React, { Children, Component } from 'react';
+import { Children, Component } from 'react';
 import { View } from '@instructure/ui-view';
 import { safeCloneElement, callRenderProp, omitProps } from '@instructure/ui-react-utils';
 import { createChainedFunction } from '@instructure/ui-utils';
@@ -32,7 +31,7 @@ import { logError as error } from '@instructure/console';
 import { uid } from '@instructure/uid';
 import { AccessibleContent } from '@instructure/ui-a11y-content';
 import { testable } from '@instructure/ui-testable';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import { Locale, DateTime, ApplyLocaleContext } from '@instructure/ui-i18n';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
@@ -47,6 +46,7 @@ import { SimpleSelect } from '@instructure/ui-simple-select';
 category: components
 ---
 **/
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_Calendar = class Calendar extends Component {
   constructor(props) {
     super(props);
@@ -72,20 +72,20 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
         renderNextMonthButton = _this$props.renderNextMonthButton,
         renderPrevMonthButton = _this$props.renderPrevMonthButton;
       return {
-        prevButton: renderPrevMonthButton ? callRenderProp(renderPrevMonthButton) : _IconButton || (_IconButton = jsx(IconButton, {
+        prevButton: renderPrevMonthButton ? callRenderProp(renderPrevMonthButton) : _IconButton || (_IconButton = _jsx(IconButton, {
           size: "small",
           withBackground: false,
           withBorder: false,
-          renderIcon: jsx(IconArrowOpenStartSolid, {
+          renderIcon: _jsx(IconArrowOpenStartSolid, {
             color: "primary"
           }),
           screenReaderLabel: "Previous month"
         })),
-        nextButton: renderNextMonthButton ? callRenderProp(renderNextMonthButton) : _IconButton2 || (_IconButton2 = jsx(IconButton, {
+        nextButton: renderNextMonthButton ? callRenderProp(renderNextMonthButton) : _IconButton2 || (_IconButton2 = _jsx(IconButton, {
           size: "small",
           withBackground: false,
           withBorder: false,
-          renderIcon: jsx(IconArrowOpenEndSolid, {
+          renderIcon: _jsx(IconArrowOpenEndSolid, {
             color: "primary"
           }),
           screenReaderLabel: "Next month"
@@ -209,69 +209,87 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
         yearList.push(DateTime.parse(year.toString(), this.locale(), this.timezone()).format('YYYY'));
       }
     }
-    return jsx("div", null, jsx("div", {
-      css: style
-    }, prevButton && cloneButton(prevButton, this.handleMonthChange('prev')), renderNavigationLabel ? callRenderProp(renderNavigationLabel) : jsx("span", null, jsx("div", null, visibleMonth.format('MMMM')), !withYearPicker ? jsx("div", null, visibleMonth.format('YYYY')) : null), nextButton && cloneButton(nextButton, this.handleMonthChange('next'))), withYearPicker ? jsx("div", {
-      css: styles === null || styles === void 0 ? void 0 : styles.yearPicker
-    }, jsx(SimpleSelect, {
-      width: "90px",
-      renderLabel: "",
-      placeholder: "--",
-      assistiveText: withYearPicker.screenReaderLabel,
-      value: visibleMonth.format('YYYY'),
-      onChange: (e, {
-        value
-      }) => this.handleYearChange(e, `${value}`)
-    }, yearList.map(year => jsx(SimpleSelect.Option, {
-      key: year,
-      id: `opt-${year}`,
-      value: year
-    }, `${year}`)))) : null);
+    return _jsxs("div", {
+      children: [_jsxs("div", {
+        css: style,
+        children: [prevButton && cloneButton(prevButton, this.handleMonthChange('prev')), renderNavigationLabel ? callRenderProp(renderNavigationLabel) : _jsxs("span", {
+          children: [_jsx("div", {
+            children: visibleMonth.format('MMMM')
+          }), !withYearPicker ? _jsx("div", {
+            children: visibleMonth.format('YYYY')
+          }) : null]
+        }), nextButton && cloneButton(nextButton, this.handleMonthChange('next'))]
+      }), withYearPicker ? _jsx("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.yearPicker,
+        children: _jsx(SimpleSelect, {
+          width: "90px",
+          renderLabel: "",
+          placeholder: "--",
+          assistiveText: withYearPicker.screenReaderLabel,
+          value: visibleMonth.format('YYYY'),
+          onChange: (e, {
+            value
+          }) => this.handleYearChange(e, `${value}`),
+          children: yearList.map(year => _jsx(SimpleSelect.Option, {
+            id: `opt-${year}`,
+            value: year,
+            children: `${year}`
+          }, year))
+        })
+      }) : null]
+    });
   }
   renderBody() {
-    return jsx("table", {
-      role: this.role
-    }, jsx("thead", null, this.renderWeekdayHeaders()), jsx("tbody", null, this.renderDays()));
+    return _jsxs("table", {
+      role: this.role,
+      children: [_jsx("thead", {
+        children: this.renderWeekdayHeaders()
+      }), _jsx("tbody", {
+        children: this.renderDays()
+      })]
+    });
   }
   renderWeekdayHeaders() {
     const styles = this.props.styles;
     const renderWeekdayLabels = this.props.renderWeekdayLabels || this.defaultWeekdays;
     const length = renderWeekdayLabels.length;
     error(length === 7, `[Calendar] \`renderWeekdayLabels\` should be an array with 7 labels (one for each weekday). ${length} provided.`);
-    return jsx("tr", null, renderWeekdayLabels.map((label, i) => {
-      return jsx("th", {
-        key: i,
-        scope: "col",
-        css: styles === null || styles === void 0 ? void 0 : styles.weekdayHeader,
-        id: this._weekdayHeaderIds[i]
-      }, callRenderProp(label));
-    }));
+    return _jsx("tr", {
+      children: renderWeekdayLabels.map((label, i) => {
+        return _jsx("th", {
+          scope: "col",
+          css: styles === null || styles === void 0 ? void 0 : styles.weekdayHeader,
+          id: this._weekdayHeaderIds[i],
+          children: callRenderProp(label)
+        }, i);
+      })
+    });
   }
   get defaultWeekdays() {
     const shortDayNames = DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'short');
     const longDayNames = DateTime.getLocalDayNamesOfTheWeek(this.locale(), 'long');
-    return [jsx(AccessibleContent, {
-      key: 1,
-      alt: longDayNames[0]
-    }, shortDayNames[0]), jsx(AccessibleContent, {
-      key: 2,
-      alt: longDayNames[1]
-    }, shortDayNames[1]), jsx(AccessibleContent, {
-      key: 3,
-      alt: longDayNames[2]
-    }, shortDayNames[2]), jsx(AccessibleContent, {
-      key: 4,
-      alt: longDayNames[3]
-    }, shortDayNames[3]), jsx(AccessibleContent, {
-      key: 5,
-      alt: longDayNames[4]
-    }, shortDayNames[4]), jsx(AccessibleContent, {
-      key: 6,
-      alt: longDayNames[5]
-    }, shortDayNames[5]), jsx(AccessibleContent, {
-      key: 7,
-      alt: longDayNames[6]
-    }, shortDayNames[6])];
+    return [_jsx(AccessibleContent, {
+      alt: longDayNames[0],
+      children: shortDayNames[0]
+    }, 1), _jsx(AccessibleContent, {
+      alt: longDayNames[1],
+      children: shortDayNames[1]
+    }, 2), _jsx(AccessibleContent, {
+      alt: longDayNames[2],
+      children: shortDayNames[2]
+    }, 3), _jsx(AccessibleContent, {
+      alt: longDayNames[3],
+      children: shortDayNames[3]
+    }, 4), _jsx(AccessibleContent, {
+      alt: longDayNames[4],
+      children: shortDayNames[4]
+    }, 5), _jsx(AccessibleContent, {
+      alt: longDayNames[5],
+      children: shortDayNames[5]
+    }, 6), _jsx(AccessibleContent, {
+      alt: longDayNames[6],
+      children: shortDayNames[6]
+    }, 7)];
   }
   renderDays() {
     const children = this.props.children;
@@ -284,15 +302,15 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
       if (!days[index]) days.push([]);
       days[index].push(day);
       return days; // 7xN 2D array of `Day`s
-    }, []).map(row => jsx("tr", {
-      key: `row${row[0].props.date}`,
-      role: role
-    }, row.map((day, i) => jsx("td", {
-      key: day.props.date,
-      role: role
-    }, role === 'presentation' ? safeCloneElement(day, {
-      'aria-describedby': this._weekdayHeaderIds[i]
-    }) : day))));
+    }, []).map(row => _jsx("tr", {
+      role: role,
+      children: row.map((day, i) => _jsx("td", {
+        role: role,
+        children: role === 'presentation' ? safeCloneElement(day, {
+          'aria-describedby': this._weekdayHeaderIds[i]
+        }) : day
+      }, day.props.date))
+    }, `row${row[0].props.date}`));
   }
   locale() {
     if (this.props.locale) {
@@ -357,8 +375,7 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
     }
     return arr.map(date => {
       const dateStr = date.toISOString();
-      return jsx(Calendar.Day, {
-        key: dateStr,
+      return _jsx(Calendar.Day, {
         date: dateStr,
         isSelected: selectedDate ? date.isSame(selectedDate, 'day') : false,
         isToday: date.isSame(today, 'day'),
@@ -366,19 +383,22 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
         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.omitViewProps(omitProps(this.props, Calendar.allowedProps), Calendar);
-    return jsx(View, Object.assign({}, passthroughProps, {
+    return _jsxs(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, _Calendar.Day = Day, _Calendar.DAY_COUNT = 42, _Calendar.propTypes = propTypes, _Calendar.allowedProps = allowedProps, _Calendar.defaultProps = {
   as: 'span',

package/lib/Calendar/Day/__new-tests__/Day.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 _index = require("../index");
 var _Day12 = _interopRequireDefault(require("../__examples__/Day.examples"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _Day, _Day2, _Day3, _Day4, _Day5, _Day6, _Day7, _Day8, _Day9, _Day10, _Day11;
 /*
  * The MIT License (MIT)
@@ -37,113 +37,125 @@ var _Day, _Day2, _Day3, _Day4, _Day5, _Day6, _Day7, _Day8, _Day9, _Day10, _Day11
 // eslint-disable-next-line no-restricted-imports
 describe('Day', () => {
   it('should render children', async () => {
-    const _render = (0, _react2.render)(_Day || (_Day = /*#__PURE__*/_react.default.createElement(_index.Day, {
+    const _render = (0, _react.render)(_Day || (_Day = (0, _jsxRuntime.jsx)(_index.Day, {
         date: "2019-08-02",
-        label: "1 August 2019 Friday"
-      }, "8"))),
+        label: "1 August 2019 Friday",
+        children: "8"
+      }))),
       rerender = _render.rerender;
-    const child = _react2.screen.getByText('8');
+    const child = _react.screen.getByText('8');
     expect(child).toBeInTheDocument();
-    rerender(_Day2 || (_Day2 = /*#__PURE__*/_react.default.createElement(_index.Day, {
+    rerender(_Day2 || (_Day2 = (0, _jsxRuntime.jsx)(_index.Day, {
       date: "2019-08-02",
-      label: "1 August 2019 Friday"
-    }, "31")));
-    const childUpdated = _react2.screen.getByText('31');
+      label: "1 August 2019 Friday",
+      children: "31"
+    })));
+    const childUpdated = _react.screen.getByText('31');
     expect(childUpdated).toBeInTheDocument();
   });
   it('should have an accessible label', async () => {
     const label = '1 August 2019 Friday';
-    const _render2 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Day, {
+    const _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.Day, {
         date: "2019-08-02",
-        label: label
-      }, "8")),
+        label: label,
+        children: "8"
+      })),
       container = _render2.container;
-    const screenReaderContent = container.querySelector('[class$="-screenReaderContent"]');
+    const screenReaderContent = container.querySelector('[class*="-screenReaderContent"]');
     expect(screenReaderContent).toBeInTheDocument();
     expect(screenReaderContent).toHaveTextContent(label);
   });
   it('should set aria-current="date" when `isToday`', async () => {
-    const _render3 = (0, _react2.render)(_Day3 || (_Day3 = /*#__PURE__*/_react.default.createElement(_index.Day, {
+    const _render3 = (0, _react.render)(_Day3 || (_Day3 = (0, _jsxRuntime.jsx)(_index.Day, {
         date: "2019-08-02",
         label: "1 August 2019 Friday",
-        isToday: true
-      }, "8"))),
+        isToday: true,
+        children: "8"
+      }))),
       container = _render3.container,
       rerender = _render3.rerender;
-    const today = container.querySelector('[class$="-calendarDay"]');
+    const today = container.querySelector('[class*="-calendarDay"]');
     expect(today).toHaveAttribute('aria-current', 'date');
-    rerender(_Day4 || (_Day4 = /*#__PURE__*/_react.default.createElement(_index.Day, {
+    rerender(_Day4 || (_Day4 = (0, _jsxRuntime.jsx)(_index.Day, {
       date: "2019-08-02",
       label: "1 August 2019 Friday",
-      isToday: false
-    }, "8")));
-    const day = container.querySelector('[class$="-calendarDay"]');
+      isToday: false,
+      children: "8"
+    })));
+    const day = container.querySelector('[class*="-calendarDay"]');
     expect(day).not.toHaveAttribute('aria-current', 'date');
   });
   it('should not set aria-selected without a role', async () => {
-    const _render4 = (0, _react2.render)(_Day5 || (_Day5 = /*#__PURE__*/_react.default.createElement(_index.Day, {
+    const _render4 = (0, _react.render)(_Day5 || (_Day5 = (0, _jsxRuntime.jsx)(_index.Day, {
         date: "2019-08-02",
-        label: "1 August 2019 Friday"
-      }, "8"))),
+        label: "1 August 2019 Friday",
+        children: "8"
+      }))),
       container = _render4.container,
       rerender = _render4.rerender;
-    const day = container.querySelector('[class$="-calendarDay"]');
+    const day = container.querySelector('[class*="-calendarDay"]');
     expect(day).not.toHaveAttribute('aria-selected');
-    rerender(_Day6 || (_Day6 = /*#__PURE__*/_react.default.createElement(_index.Day, {
+    rerender(_Day6 || (_Day6 = (0, _jsxRuntime.jsx)(_index.Day, {
       date: "2019-08-02",
       label: "1 August 2019 Friday",
-      isSelected: true
-    }, "8")));
-    const daySelected = container.querySelector('[class$="-calendarDay"]');
+      isSelected: true,
+      children: "8"
+    })));
+    const daySelected = container.querySelector('[class*="-calendarDay"]');
     expect(daySelected).not.toHaveAttribute('aria-selected');
   });
   it('should set aria-selected="true/false" when `isSelected` and `role` is `option` or `gridcell`', async () => {
-    const _render5 = (0, _react2.render)(_Day7 || (_Day7 = /*#__PURE__*/_react.default.createElement(_index.Day, {
+    const _render5 = (0, _react.render)(_Day7 || (_Day7 = (0, _jsxRuntime.jsx)(_index.Day, {
         date: "2019-08-02",
         label: "1 August 2019 Friday",
-        role: "option"
-      }, "8"))),
+        role: "option",
+        children: "8"
+      }))),
       container = _render5.container,
       rerender = _render5.rerender;
-    const day = container.querySelector('[class$="-calendarDay"]');
+    const day = container.querySelector('[class*="-calendarDay"]');
     expect(day).toHaveAttribute('aria-selected', 'false');
-    rerender(_Day8 || (_Day8 = /*#__PURE__*/_react.default.createElement(_index.Day, {
+    rerender(_Day8 || (_Day8 = (0, _jsxRuntime.jsx)(_index.Day, {
       date: "2019-08-02",
       label: "1 August 2019 Friday",
       role: "option",
-      isSelected: true
-    }, "8")));
-    const daySelected = container.querySelector('[class$="-calendarDay"]');
+      isSelected: true,
+      children: "8"
+    })));
+    const daySelected = container.querySelector('[class*="-calendarDay"]');
     expect(daySelected).toHaveAttribute('aria-selected', 'true');
-    rerender(_Day9 || (_Day9 = /*#__PURE__*/_react.default.createElement(_index.Day, {
+    rerender(_Day9 || (_Day9 = (0, _jsxRuntime.jsx)(_index.Day, {
       date: "2019-08-02",
       label: "1 August 2019 Friday",
       role: "gridcell",
-      isSelected: false
-    }, "8")));
-    const dayCell = container.querySelector('[class$="-calendarDay"]');
+      isSelected: false,
+      children: "8"
+    })));
+    const dayCell = container.querySelector('[class*="-calendarDay"]');
     expect(dayCell).toHaveAttribute('aria-selected', 'false');
-    rerender(_Day10 || (_Day10 = /*#__PURE__*/_react.default.createElement(_index.Day, {
+    rerender(_Day10 || (_Day10 = (0, _jsxRuntime.jsx)(_index.Day, {
       date: "2019-08-02",
       label: "1 August 2019 Friday",
       role: "gridcell",
-      isSelected: true
-    }, "8")));
-    const dayCellSelected = container.querySelector('[class$="-calendarDay"]');
+      isSelected: true,
+      children: "8"
+    })));
+    const dayCellSelected = container.querySelector('[class*="-calendarDay"]');
     expect(dayCellSelected).toHaveAttribute('aria-selected', 'true');
   });
   it('should call onClick with date', async () => {
     const onClick = _vitest.vi.fn();
     const date = '2019-08-02';
-    const _render6 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Day, {
+    const _render6 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.Day, {
         date: date,
         label: "1 August 2019 Friday",
-        onClick: onClick
-      }, "8")),
+        onClick: onClick,
+        children: "8"
+      })),
       container = _render6.container;
-    const day = container.querySelector('[class$="-calendarDay"]');
+    const day = container.querySelector('[class*="-calendarDay"]');
     await _userEvent.default.click(day);
-    await (0, _react2.waitFor)(() => {
+    await (0, _react.waitFor)(() => {
       const args = onClick.mock.calls[0][1];
       expect(onClick).toHaveBeenCalledTimes(1);
       expect(args).toHaveProperty('date', date);
@@ -152,16 +164,17 @@ describe('Day', () => {
   it('should call onKeyDown with date', async () => {
     const onKeyDown = _vitest.vi.fn();
     const date = '2019-08-02';
-    const _render7 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Day, {
+    const _render7 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.Day, {
         date: date,
         label: "1 August 2019 Friday",
         onKeyDown: onKeyDown,
-        onClick: () => {}
-      }, "8")),
+        onClick: () => {},
+        children: "8"
+      })),
       container = _render7.container;
-    const day = container.querySelector('[class$="-calendarDay"]');
+    const day = container.querySelector('[class*="-calendarDay"]');
     _userEvent.default.type(day, '{enter}');
-    await (0, _react2.waitFor)(() => {
+    await (0, _react.waitFor)(() => {
       const args = onKeyDown.mock.calls[0][1];
       expect(onKeyDown).toHaveBeenCalledTimes(1);
       expect(args).toHaveProperty('date', date);
@@ -169,16 +182,17 @@ describe('Day', () => {
   });
   it('should apply disabled when interaction is `disabled`', async () => {
     const onClick = _vitest.vi.fn();
-    const _render8 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Day, {
+    const _render8 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.Day, {
         date: "2019-08-02",
         label: "1 August 2019 Friday",
         onClick: onClick,
-        interaction: "disabled"
-      }, "8")),
+        interaction: "disabled",
+        children: "8"
+      })),
       container = _render8.container;
-    const day = container.querySelector('[class$="-calendarDay"]');
+    const day = container.querySelector('[class*="-calendarDay"]');
     _userEvent.default.click(day);
-    await (0, _react2.waitFor)(() => {
+    await (0, _react.waitFor)(() => {
       expect(onClick).not.toHaveBeenCalled();
       expect(day).toHaveAttribute('disabled');
     });
@@ -188,44 +202,48 @@ describe('Day', () => {
     const elementRef = el => {
       element = el;
     };
-    const _render9 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Day, {
+    const _render9 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.Day, {
         date: "2019-08-02",
         label: "1 August 2019 Friday",
-        elementRef: elementRef
-      }, "8")),
+        elementRef: elementRef,
+        children: "8"
+      })),
       container = _render9.container;
-    const day = container.querySelector('[class$="-calendarDay"]');
+    const day = container.querySelector('[class*="-calendarDay"]');
     expect(day).toEqual(element);
   });
   describe('element type', () => {
     it('should render as a span by default', async () => {
-      const _render10 = (0, _react2.render)(_Day11 || (_Day11 = /*#__PURE__*/_react.default.createElement(_index.Day, {
+      const _render10 = (0, _react.render)(_Day11 || (_Day11 = (0, _jsxRuntime.jsx)(_index.Day, {
           date: "2019-08-02",
-          label: "1 August 2019 Friday"
-        }, "8"))),
+          label: "1 August 2019 Friday",
+          children: "8"
+        }))),
         container = _render10.container;
-      const day = container.querySelector('[class$="-calendarDay"]');
+      const day = container.querySelector('[class*="-calendarDay"]');
       expect(day === null || day === void 0 ? void 0 : day.tagName).toEqual('SPAN');
     });
     it('should render as a button when onClick is provided', async () => {
-      const _render11 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Day, {
+      const _render11 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.Day, {
           date: "2019-08-02",
           label: "1 August 2019 Friday",
-          onClick: () => {}
-        }, "8")),
+          onClick: () => {},
+          children: "8"
+        })),
         container = _render11.container;
-      const day = container.querySelector('[class$="-calendarDay"]');
+      const day = container.querySelector('[class*="-calendarDay"]');
       expect(day === null || day === void 0 ? void 0 : day.tagName).toEqual('BUTTON');
     });
     it('default elementTypes should be overwritten when `as` prop is set', async () => {
-      const _render12 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Day, {
+      const _render12 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.Day, {
           date: "2019-08-02",
           label: "1 August 2019 Friday",
           onClick: () => {},
-          as: "li"
-        }, "8")),
+          as: "li",
+          children: "8"
+        })),
         container = _render12.container;
-      const day = container.querySelector('[class$="-calendarDay"]');
+      const day = container.querySelector('[class*="-calendarDay"]');
       expect(day === null || day === void 0 ? void 0 : day.tagName).toEqual('LI');
     });
   });
@@ -233,7 +251,7 @@ describe('Day', () => {
     const generatedComponents = (0, _generateA11yTests.generateA11yTests)(_index.Day, _Day12.default);
     for (const component of generatedComponents) {
       it(component.description, async () => {
-        const _render13 = (0, _react2.render)(component.content),
+        const _render13 = (0, _react.render)(component.content),
           container = _render13.container;
         const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
         expect(axeCheck).toBe(true);

package/lib/Calendar/Day/index.js

@@ -17,6 +17,7 @@ var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["children", "label", "interaction", "isOutsideMonth", "isSelected", "isToday", "onClick", "onKeyDown", "as", "styles"];
 var _dec, _dec2, _class, _Day;
 /*
@@ -42,7 +43,6 @@ var _dec, _dec2, _class, _Day;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
 /**
 ---
 parent: Calendar
@@ -122,7 +122,8 @@ let Day = exports.Day = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
     const elementType = this.elementType,
       isDisabled = this.isDisabled;
     const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(props, Day.allowedProps), Day);
-    return (0, _emotion.jsx)(_View.View, Object.assign({}, passthroughProps, {
+    return (0, _jsxRuntime.jsx)(_View.View, {
+      ...passthroughProps,
       as: elementType,
       css: styles === null || styles === void 0 ? void 0 : styles.calendarDay,
       display: "inline-block",
@@ -136,12 +137,15 @@ let Day = exports.Day = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
       "aria-selected": this.shouldApplyAriaSelected() ? isSelected ? 'true' : 'false' : void 0,
       onClick: onClick && this.handleClick,
       onKeyDown: onKeyDown && this.handleKeyDown,
-      elementRef: this.handleElementRef
-    }), (0, _emotion.jsx)("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.day
-    }, (0, _emotion.jsx)(_AccessibleContent.AccessibleContent, {
-      alt: label
-    }, (0, _callRenderProp.callRenderProp)(children))));
+      elementRef: this.handleElementRef,
+      children: (0, _jsxRuntime.jsx)("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.day,
+        children: (0, _jsxRuntime.jsx)(_AccessibleContent.AccessibleContent, {
+          alt: label,
+          children: (0, _callRenderProp.callRenderProp)(children)
+        })
+      })
+    });
   }
 }, _Day.displayName = "Day", _Day.componentId = 'Calendar.Day', _Day.propTypes = _props.propTypes, _Day.allowedProps = _props.allowedProps, _Day.defaultProps = {
   interaction: 'enabled',