@instructure/ui-date-input 10.16.1-pr-snapshot-1744893671793 → 10.16.1-snapshot-0

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

@@ -1,7 +1,8 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = require("@testing-library/react");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
 var _vitest = require("vitest");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
@@ -10,7 +11,6 @@ var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
 var _Calendar = require("@instructure/ui-calendar/lib/Calendar");
 var _DateInput = _interopRequireDefault(require("../__examples__/DateInput.examples"));
 var _index = require("../index");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _Calendar$Day, _button, _button2, _Calendar$Day2, _Calendar$Day3;
 /*
  * The MIT License (MIT)
@@ -42,11 +42,11 @@ describe('<DateInput />', () => {
     const days = [];
     const date = new Date('2019-07-28');
     while (days.length < count) {
-      days.push((0, _jsxRuntime.jsx)(_Calendar.Calendar.Day, {
+      days.push(/*#__PURE__*/_react.default.createElement(_Calendar.Calendar.Day, {
+        key: date.toISOString(),
         date: date.toISOString(),
-        label: date.toISOString(),
-        children: date.getDate()
-      }, date.toISOString()));
+        label: date.toISOString()
+      }, date.getDate()));
       date.setDate(date.getDate() + 1);
     }
     return days;
@@ -63,12 +63,11 @@ describe('<DateInput />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should render an input and a calendar', async () => {
-    const _render = (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+    const _render = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
         renderLabel: "date-input",
         renderWeekdayLabels: weekdayLabels,
-        isShowingCalendar: true,
-        children: generateDays()
-      })),
+        isShowingCalendar: true
+      }, generateDays())),
       container = _render.container,
       findByRole = _render.findByRole;
     const dateInput = container.querySelector('input');
@@ -77,7 +76,7 @@ describe('<DateInput />', () => {
     await _userEvent.default.click(dateInput);
     const calendarTable = await findByRole('listbox');
     const calendarWrapper = await document.querySelector('[id^="Selectable_"][id$="-list"]');
-    await (0, _react.waitFor)(() => {
+    await (0, _react2.waitFor)(() => {
       expect(calendarWrapper).toBeInTheDocument();
       expect(calendarTable).toBeInTheDocument();
     });
@@ -85,188 +84,173 @@ describe('<DateInput />', () => {
   describe('input', () => {
     it('should render a label', () => {
       const labelText = 'label text';
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
         renderLabel: labelText,
-        renderWeekdayLabels: weekdayLabels,
-        children: generateDays()
-      }));
-      const dateInput = _react.screen.getByLabelText('label text');
+        renderWeekdayLabels: weekdayLabels
+      }, generateDays()));
+      const dateInput = _react2.screen.getByLabelText('label text');
       expect(dateInput).toBeInTheDocument();
     });
     it('should set value', () => {
       const value = 'January 5';
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
         renderLabel: "Choose date",
         value: value,
         onChange: _vitest.vi.fn(),
-        renderWeekdayLabels: weekdayLabels,
-        children: generateDays()
-      }));
-      const dateInput = _react.screen.getByLabelText('Choose date');
+        renderWeekdayLabels: weekdayLabels
+      }, generateDays()));
+      const dateInput = _react2.screen.getByLabelText('Choose date');
       expect(dateInput).toHaveValue(value);
     });
     it('should call onChange with the updated value', async () => {
       const onChange = _vitest.vi.fn();
       const value = 'May 18, 2022';
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        onChange: onChange,
-        children: generateDays()
-      }));
-      const dateInput = _react.screen.getByLabelText('Choose date');
-      _react.fireEvent.change(dateInput, {
+        onChange: onChange
+      }, generateDays()));
+      const dateInput = _react2.screen.getByLabelText('Choose date');
+      _react2.fireEvent.change(dateInput, {
         target: {
           value: value
         }
       });
-      _react.fireEvent.keyDown(dateInput, {
+      _react2.fireEvent.keyDown(dateInput, {
         key: 'Enter',
         code: 'Enter'
       });
-      _react.fireEvent.blur(dateInput);
-      await (0, _react.waitFor)(() => {
+      _react2.fireEvent.blur(dateInput);
+      await (0, _react2.waitFor)(() => {
         expect(onChange).toHaveBeenCalledTimes(1);
         expect(onChange.mock.calls[0][1].value).toEqual(expect.stringContaining(value));
       });
     });
     it('should call onBlur', () => {
       const onBlur = _vitest.vi.fn();
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        onBlur: onBlur,
-        children: generateDays()
-      }));
-      const dateInput = _react.screen.getByLabelText('Choose date');
-      _react.fireEvent.blur(dateInput);
+        onBlur: onBlur
+      }, generateDays()));
+      const dateInput = _react2.screen.getByLabelText('Choose date');
+      _react2.fireEvent.blur(dateInput);
       expect(onBlur).toHaveBeenCalledTimes(1);
     });
     it('should correctly set interaction type', async () => {
-      const _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+      const _render2 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
-          interaction: "disabled",
-          children: generateDays()
-        })),
+          interaction: "disabled"
+        }, generateDays())),
         rerender = _render2.rerender;
-      const dateInput = _react.screen.getByLabelText('Choose date');
+      const dateInput = _react2.screen.getByLabelText('Choose date');
       expect(dateInput).toHaveAttribute('disabled');
-      rerender((0, _jsxRuntime.jsx)(_index.DateInput, {
+      rerender(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        interaction: "readonly",
-        children: generateDays()
-      }));
-      const dateInputAfterUpdate = _react.screen.getByLabelText('Choose date');
-      await (0, _react.waitFor)(() => {
+        interaction: "readonly"
+      }, generateDays()));
+      const dateInputAfterUpdate = _react2.screen.getByLabelText('Choose date');
+      await (0, _react2.waitFor)(() => {
         expect(dateInputAfterUpdate).toHaveAttribute('readonly');
       });
     });
     it('should correctly set disabled', () => {
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        disabled: true,
-        children: generateDays()
-      }));
-      const dateInput = _react.screen.getByLabelText('Choose date');
+        disabled: true
+      }, generateDays()));
+      const dateInput = _react2.screen.getByLabelText('Choose date');
       expect(dateInput).toHaveAttribute('disabled');
     });
     it('should correctly set readOnly', () => {
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        readOnly: true,
-        children: generateDays()
-      }));
-      const dateInput = _react.screen.getByLabelText('Choose date');
+        readOnly: true
+      }, generateDays()));
+      const dateInput = _react2.screen.getByLabelText('Choose date');
       expect(dateInput).toHaveAttribute('readOnly');
     });
     it('should set placeholder', () => {
       const placeholder = 'Start typing to choose a date';
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        placeholder: placeholder,
-        children: generateDays()
-      }));
-      const dateInput = _react.screen.getByLabelText('Choose date');
+        placeholder: placeholder
+      }, generateDays()));
+      const dateInput = _react2.screen.getByLabelText('Choose date');
       expect(dateInput).toHaveAttribute('placeholder', placeholder);
     });
     it('should be requireable', () => {
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        isRequired: true,
-        children: generateDays()
-      }));
-      const dateInput = _react.screen.getByLabelText('Choose date *');
+        isRequired: true
+      }, generateDays()));
+      const dateInput = _react2.screen.getByLabelText('Choose date *');
       expect(dateInput).toHaveAttribute('required');
     });
     it('should provide inputRef', () => {
       const inputRef = _vitest.vi.fn();
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        inputRef: inputRef,
-        children: generateDays()
-      }));
-      const dateInput = _react.screen.getByLabelText('Choose date');
+        inputRef: inputRef
+      }, generateDays()));
+      const dateInput = _react2.screen.getByLabelText('Choose date');
       expect(inputRef).toHaveBeenCalledWith(dateInput);
     });
     it('should render messages', () => {
       const text = 'The selected date is invalid';
-      const _render3 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+      const _render3 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
           messages: [{
             type: 'error',
             text
-          }],
-          children: generateDays()
-        })),
+          }]
+        }, generateDays())),
         container = _render3.container;
       expect(container).toHaveTextContent(text);
     });
     it('should allow custom props to pass through', () => {
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
         "data-custom-attr": "custom value",
-        name: "my name",
-        children: generateDays()
-      }));
-      const dateInput = _react.screen.getByLabelText('Choose date');
+        name: "my name"
+      }, generateDays()));
+      const dateInput = _react2.screen.getByLabelText('Choose date');
       expect(dateInput).toHaveAttribute('data-custom-attr', 'custom value');
       expect(dateInput).toHaveAttribute('name', 'my name');
     });
   });
   describe('Calendar', () => {
     it('should show calendar when `isShowingCalendar` is set', async () => {
-      const _render4 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+      const _render4 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
           renderLabel: "Choose date",
-          renderWeekdayLabels: weekdayLabels,
-          children: generateDays()
-        })),
+          renderWeekdayLabels: weekdayLabels
+        }, generateDays())),
         rerender = _render4.rerender,
         queryByRole = _render4.queryByRole;
-      const dateInput = _react.screen.getByLabelText('Choose date');
+      const dateInput = _react2.screen.getByLabelText('Choose date');
       const calendarTable = await queryByRole('listbox');
       const calendarWrapper = await document.querySelector('[id^="Selectable_"][id$="-list"]');
       expect(dateInput).toBeInTheDocument();
       expect(calendarTable).not.toBeInTheDocument();
       expect(calendarWrapper).not.toBeInTheDocument();
-      rerender((0, _jsxRuntime.jsx)(_index.DateInput, {
+      rerender(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        isShowingCalendar: true,
-        children: generateDays()
-      }));
-      const dateInputAfterUpdate = _react.screen.getByLabelText('Choose date');
+        isShowingCalendar: true
+      }, generateDays()));
+      const dateInputAfterUpdate = _react2.screen.getByLabelText('Choose date');
       const calendarTableAfterUpdate = await queryByRole('listbox');
       const calendarWrapperAfterUpdate = await document.querySelector('[id^="Selectable_"][id$="-list"]');
-      await (0, _react.waitFor)(() => {
+      await (0, _react2.waitFor)(() => {
         expect(dateInputAfterUpdate).toBeInTheDocument();
         expect(calendarTableAfterUpdate).toBeInTheDocument();
         expect(calendarWrapperAfterUpdate).toBeInTheDocument();
@@ -275,155 +259,145 @@ describe('<DateInput />', () => {
     describe('onRequestShowCalendar', () => {
       it('should call onRequestShowCalendar when label is clicked', async () => {
         const onRequestShowCalendar = _vitest.vi.fn();
-        const _render5 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+        const _render5 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
             renderLabel: "Choose date",
             renderWeekdayLabels: weekdayLabels,
-            onRequestShowCalendar: onRequestShowCalendar,
-            children: generateDays()
-          })),
+            onRequestShowCalendar: onRequestShowCalendar
+          }, generateDays())),
           container = _render5.container;
         const dateInput = container.querySelector('span[class$="-formFieldLayout__label"]');
         expect(dateInput).toHaveTextContent('Choose date');
         await _userEvent.default.click(dateInput);
-        await (0, _react.waitFor)(() => {
+        await (0, _react2.waitFor)(() => {
           expect(onRequestShowCalendar).toHaveBeenCalled();
         });
       });
       it('should call onRequestShowCalendar when input is clicked', async () => {
         const onRequestShowCalendar = _vitest.vi.fn();
-        const _render6 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+        const _render6 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
             renderLabel: "Choose date",
             renderWeekdayLabels: weekdayLabels,
-            onRequestShowCalendar: onRequestShowCalendar,
-            children: generateDays()
-          })),
+            onRequestShowCalendar: onRequestShowCalendar
+          }, generateDays())),
           container = _render6.container;
         const dateInput = container.querySelector('input');
         await _userEvent.default.click(dateInput);
-        await (0, _react.waitFor)(() => {
+        await (0, _react2.waitFor)(() => {
           expect(onRequestShowCalendar).toHaveBeenCalledTimes(1);
         });
       });
       it('should call onRequestShowCalendar when input receives space event', async () => {
         const onRequestShowCalendar = _vitest.vi.fn();
-        (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+        (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
-          onRequestShowCalendar: onRequestShowCalendar,
-          children: generateDays()
-        }));
-        const dateInput = _react.screen.getByLabelText('Choose date');
+          onRequestShowCalendar: onRequestShowCalendar
+        }, generateDays()));
+        const dateInput = _react2.screen.getByLabelText('Choose date');
         await _userEvent.default.type(dateInput, '{space}');
-        await (0, _react.waitFor)(() => {
+        await (0, _react2.waitFor)(() => {
           expect(onRequestShowCalendar).toHaveBeenCalledTimes(1);
         });
       });
       it('should not call onRequestShowCalendar when input receives space event if calendar is already showing', async () => {
         const onRequestShowCalendar = _vitest.vi.fn();
-        (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+        (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
           onRequestShowCalendar: onRequestShowCalendar,
-          isShowingCalendar: true,
-          children: generateDays()
-        }));
-        const dateInput = _react.screen.getByLabelText('Choose date');
+          isShowingCalendar: true
+        }, generateDays()));
+        const dateInput = _react2.screen.getByLabelText('Choose date');
         await _userEvent.default.type(dateInput, '{space}');
-        await (0, _react.waitFor)(() => {
+        await (0, _react2.waitFor)(() => {
           expect(onRequestShowCalendar).not.toHaveBeenCalled();
         });
       });
       it('should call onRequestShowCalendar when input receives down arrow event', async () => {
         const onRequestShowCalendar = _vitest.vi.fn();
-        (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+        (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
-          onRequestShowCalendar: onRequestShowCalendar,
-          children: generateDays()
-        }));
-        const dateInput = _react.screen.getByLabelText('Choose date');
+          onRequestShowCalendar: onRequestShowCalendar
+        }, generateDays()));
+        const dateInput = _react2.screen.getByLabelText('Choose date');
         await _userEvent.default.type(dateInput, '{arrowdown}');
-        await (0, _react.waitFor)(() => {
+        await (0, _react2.waitFor)(() => {
           expect(onRequestShowCalendar).toHaveBeenCalledTimes(1);
         });
       });
       it('should not call onRequestShowCalendar when input receives down arrow event if calendar is already showing', async () => {
         const onRequestShowCalendar = _vitest.vi.fn();
-        (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+        (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
           onRequestShowCalendar: onRequestShowCalendar,
-          isShowingCalendar: true,
-          children: generateDays()
-        }));
-        const dateInput = _react.screen.getByLabelText('Choose date');
+          isShowingCalendar: true
+        }, generateDays()));
+        const dateInput = _react2.screen.getByLabelText('Choose date');
         await _userEvent.default.type(dateInput, '{arrowdown}');
-        await (0, _react.waitFor)(() => {
+        await (0, _react2.waitFor)(() => {
           expect(onRequestShowCalendar).not.toHaveBeenCalled();
         });
       });
       it('should call onRequestShowCalendar when input receives up arrow event', async () => {
         const onRequestShowCalendar = _vitest.vi.fn();
-        (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+        (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
-          onRequestShowCalendar: onRequestShowCalendar,
-          children: generateDays()
-        }));
-        const dateInput = _react.screen.getByLabelText('Choose date');
+          onRequestShowCalendar: onRequestShowCalendar
+        }, generateDays()));
+        const dateInput = _react2.screen.getByLabelText('Choose date');
         await _userEvent.default.type(dateInput, '{arrowup}');
-        await (0, _react.waitFor)(() => {
+        await (0, _react2.waitFor)(() => {
           expect(onRequestShowCalendar).toHaveBeenCalledTimes(1);
         });
       });
       it('should not call onRequestShowCalendar when input receives up arrow event if calendar is already showing', async () => {
         const onRequestShowCalendar = _vitest.vi.fn();
-        (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+        (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
           onRequestShowCalendar: onRequestShowCalendar,
-          isShowingCalendar: true,
-          children: generateDays()
-        }));
-        const dateInput = _react.screen.getByLabelText('Choose date');
+          isShowingCalendar: true
+        }, generateDays()));
+        const dateInput = _react2.screen.getByLabelText('Choose date');
         await _userEvent.default.type(dateInput, '{arrowup}');
-        await (0, _react.waitFor)(() => {
+        await (0, _react2.waitFor)(() => {
           expect(onRequestShowCalendar).not.toHaveBeenCalled();
         });
       });
       it('should call onRequestShowCalendar when input receives onChange event', async () => {
         const onRequestShowCalendar = _vitest.vi.fn();
-        (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+        (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
-          onRequestShowCalendar: onRequestShowCalendar,
-          children: generateDays()
-        }));
-        const dateInput = _react.screen.getByLabelText('Choose date');
-        _react.fireEvent.change(dateInput, {
+          onRequestShowCalendar: onRequestShowCalendar
+        }, generateDays()));
+        const dateInput = _react2.screen.getByLabelText('Choose date');
+        _react2.fireEvent.change(dateInput, {
           target: {
             value: 'January 5'
           }
         });
-        await (0, _react.waitFor)(() => {
+        await (0, _react2.waitFor)(() => {
           expect(onRequestShowCalendar).toHaveBeenCalledTimes(1);
         });
       });
       it('should not call onRequestShowCalendar when disabled', async () => {
         const onRequestShowCalendar = _vitest.vi.fn();
-        (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+        (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
           onRequestShowCalendar: onRequestShowCalendar,
-          interaction: "disabled",
-          children: generateDays()
-        }));
-        const dateInput = _react.screen.getByLabelText('Choose date');
-        _react.fireEvent.click(dateInput);
+          interaction: "disabled"
+        }, generateDays()));
+        const dateInput = _react2.screen.getByLabelText('Choose date');
+        _react2.fireEvent.click(dateInput);
         await _userEvent.default.type(dateInput, '{arrowup}{arrowdown}{space}January 5', {
           skipClick: true
         });
-        await (0, _react.waitFor)(() => {
+        await (0, _react2.waitFor)(() => {
           expect(onRequestShowCalendar).not.toHaveBeenCalled();
         });
       });
@@ -432,17 +406,16 @@ describe('<DateInput />', () => {
       it('should call onRequestHideCalendar and onRequestValidateDate input receives onBlur event', async () => {
         const onRequestHideCalendar = _vitest.vi.fn();
         const onRequestValidateDate = _vitest.vi.fn();
-        (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+        (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
           onRequestHideCalendar: onRequestHideCalendar,
           onRequestValidateDate: onRequestValidateDate,
-          isShowingCalendar: true,
-          children: generateDays()
-        }));
-        const dateInput = _react.screen.getByLabelText('Choose date');
-        _react.fireEvent.blur(dateInput);
-        await (0, _react.waitFor)(() => {
+          isShowingCalendar: true
+        }, generateDays()));
+        const dateInput = _react2.screen.getByLabelText('Choose date');
+        _react2.fireEvent.blur(dateInput);
+        await (0, _react2.waitFor)(() => {
           expect(onRequestHideCalendar).toHaveBeenCalledTimes(1);
           expect(onRequestValidateDate).toHaveBeenCalledTimes(1);
         });
@@ -450,17 +423,16 @@ describe('<DateInput />', () => {
       it('should call onRequestHideCalendar and onRequestValidateDate when input receives esc event', async () => {
         const onRequestHideCalendar = _vitest.vi.fn();
         const onRequestValidateDate = _vitest.vi.fn();
-        (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+        (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
           onRequestHideCalendar: onRequestHideCalendar,
           onRequestValidateDate: onRequestValidateDate,
-          isShowingCalendar: true,
-          children: generateDays()
-        }));
-        const dateInput = _react.screen.getByLabelText('Choose date');
+          isShowingCalendar: true
+        }, generateDays()));
+        const dateInput = _react2.screen.getByLabelText('Choose date');
         await _userEvent.default.type(dateInput, '{esc}');
-        await (0, _react.waitFor)(() => {
+        await (0, _react2.waitFor)(() => {
           expect(onRequestHideCalendar).toHaveBeenCalledTimes(1);
           expect(onRequestValidateDate).toHaveBeenCalledTimes(1);
         });
@@ -469,23 +441,22 @@ describe('<DateInput />', () => {
         const onRequestHideCalendar = _vitest.vi.fn();
         const onRequestValidateDate = _vitest.vi.fn();
         const days = generateDays();
-        days[4] = _Calendar$Day || (_Calendar$Day = (0, _jsxRuntime.jsx)(_Calendar.Calendar.Day, {
+        days[4] = _Calendar$Day || (_Calendar$Day = /*#__PURE__*/_react.default.createElement(_Calendar.Calendar.Day, {
+          key: "4",
           label: "4",
           date: "2019-09-28",
-          isSelected: true,
-          children: 4
-        }, "4"));
-        (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+          isSelected: true
+        }, 4));
+        (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
           onRequestHideCalendar: onRequestHideCalendar,
           onRequestValidateDate: onRequestValidateDate,
-          isShowingCalendar: true,
-          children: days
-        }));
-        const dateInput = _react.screen.getByLabelText('Choose date');
+          isShowingCalendar: true
+        }, days));
+        const dateInput = _react2.screen.getByLabelText('Choose date');
         await _userEvent.default.type(dateInput, '{enter}');
-        await (0, _react.waitFor)(() => {
+        await (0, _react2.waitFor)(() => {
           expect(onRequestHideCalendar).toHaveBeenCalledTimes(1);
           expect(onRequestValidateDate).toHaveBeenCalledTimes(1);
         });
@@ -493,28 +464,25 @@ describe('<DateInput />', () => {
     });
     it('should render calendar navigation label', () => {
       const label = 'January 2019';
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        renderNavigationLabel: (0, _jsxRuntime.jsx)("div", {
-          "data-testId": "label-id",
-          children: label
-        }),
-        isShowingCalendar: true,
-        children: generateDays()
-      }));
-      const navigationLabel = _react.screen.getByTestId('label-id');
+        renderNavigationLabel: /*#__PURE__*/_react.default.createElement("div", {
+          "data-testId": "label-id"
+        }, label),
+        isShowingCalendar: true
+      }, generateDays()));
+      const navigationLabel = _react2.screen.getByTestId('label-id');
       expect(navigationLabel).toBeInTheDocument();
       expect(navigationLabel).toHaveTextContent(label);
     });
     it('should render calendar weekday labels', async () => {
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        isShowingCalendar: true,
-        children: generateDays()
-      }));
-      const calendar = await _react.screen.findByRole('listbox');
+        isShowingCalendar: true
+      }, generateDays()));
+      const calendar = await _react2.screen.findByRole('listbox');
       const headers = calendar.querySelectorAll('th');
       expect(headers.length).toEqual(7);
       weekdayLabels.forEach(label => {
@@ -522,24 +490,21 @@ describe('<DateInput />', () => {
       });
     });
     it('should render all focusable elements in calendar with tabIndex="-1"', async () => {
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        renderNextMonthButton: _button || (_button = (0, _jsxRuntime.jsx)("button", {
-          "data-testId": "button-next",
-          children: "next"
-        })),
-        renderPrevMonthButton: _button2 || (_button2 = (0, _jsxRuntime.jsx)("button", {
-          "data-testId": "button-prev",
-          children: "prev"
-        })),
-        isShowingCalendar: true,
-        children: generateDays()
-      }));
-      const calendar = await _react.screen.findByRole('listbox');
+        renderNextMonthButton: _button || (_button = /*#__PURE__*/_react.default.createElement("button", {
+          "data-testId": "button-next"
+        }, "next")),
+        renderPrevMonthButton: _button2 || (_button2 = /*#__PURE__*/_react.default.createElement("button", {
+          "data-testId": "button-prev"
+        }, "prev")),
+        isShowingCalendar: true
+      }, generateDays()));
+      const calendar = await _react2.screen.findByRole('listbox');
       const calendarDays = calendar.querySelectorAll('button');
-      const nextMonthButton = _react.screen.getByTestId('button-next');
-      const prevMonthButton = _react.screen.getByTestId('button-prev');
+      const nextMonthButton = _react2.screen.getByTestId('button-next');
+      const prevMonthButton = _react2.screen.getByTestId('button-prev');
       expect(nextMonthButton).toHaveAttribute('tabIndex', '-1');
       expect(prevMonthButton).toHaveAttribute('tabIndex', '-1');
       expect(calendarDays).toHaveLength(42);
@@ -549,20 +514,19 @@ describe('<DateInput />', () => {
     });
     it('should render days with the correct role', async () => {
       const days = generateDays();
-      days[5] = _Calendar$Day2 || (_Calendar$Day2 = (0, _jsxRuntime.jsx)(_Calendar.Calendar.Day, {
+      days[5] = _Calendar$Day2 || (_Calendar$Day2 = /*#__PURE__*/_react.default.createElement(_Calendar.Calendar.Day, {
+        key: "5",
         label: "5",
         date: "2019-09-28",
         id: "5",
-        isOutsideMonth: true,
-        children: "outside"
-      }, "5"));
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+        isOutsideMonth: true
+      }, "outside"));
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        isShowingCalendar: true,
-        children: days
-      }));
-      const calendar = await _react.screen.findByRole('listbox');
+        isShowingCalendar: true
+      }, days));
+      const calendar = await _react2.screen.findByRole('listbox');
       const calendarDays = calendar.querySelectorAll('button');
       calendarDays.forEach(day => {
         if (day.textContent.includes('outside')) {
@@ -574,20 +538,19 @@ describe('<DateInput />', () => {
     });
     it('should assign aria-selected to the selected date and link it to the input', async () => {
       const days = generateDays();
-      days[7] = _Calendar$Day3 || (_Calendar$Day3 = (0, _jsxRuntime.jsx)(_Calendar.Calendar.Day, {
+      days[7] = _Calendar$Day3 || (_Calendar$Day3 = /*#__PURE__*/_react.default.createElement(_Calendar.Calendar.Day, {
+        key: "7",
         label: "7",
         date: "2019-09-28",
         id: "selected-day-id",
-        isSelected: true,
-        children: "selected"
-      }, "7"));
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+        isSelected: true
+      }, "selected"));
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        isShowingCalendar: true,
-        children: days
-      }));
-      const calendar = await _react.screen.findByRole('listbox');
+        isShowingCalendar: true
+      }, days));
+      const calendar = await _react2.screen.findByRole('listbox');
       const calendarDays = calendar.querySelectorAll('button');
       let selectedDayID = '';
       calendarDays.forEach(day => {
@@ -598,7 +561,7 @@ describe('<DateInput />', () => {
           expect(day).toHaveAttribute('aria-selected', 'false');
         }
       });
-      const dateInput = _react.screen.getByLabelText('Choose date');
+      const dateInput = _react2.screen.getByLabelText('Choose date');
       expect(dateInput).toHaveAttribute('aria-activedescendant', selectedDayID);
     });
   });
@@ -607,7 +570,7 @@ describe('<DateInput />', () => {
     it.each(generatedComponents)('should be accessible with example: $description', async ({
       content
     }) => {
-      const _render7 = (0, _react.render)(content),
+      const _render7 = (0, _react2.render)(content),
         container = _render7.container;
       const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
       expect(axeCheck).toBe(true);
@@ -616,7 +579,7 @@ describe('<DateInput />', () => {
   describe('with minimal config', () => {
     it('should render 44 buttons (a calendar) when clicked', async () => {
       const onChange = _vitest.vi.fn();
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput, {
         renderLabel: "Choose date",
         assistiveText: "Type a date or use arrow keys to navigate date picker.",
         width: "20rem",
@@ -628,13 +591,13 @@ describe('<DateInput />', () => {
         disabledDateErrorMessage: "disabled date",
         invalidDateErrorMessage: "invalid date"
       }));
-      const dateInput = _react.screen.getByLabelText('Choose date');
-      _react.fireEvent.click(dateInput);
+      const dateInput = _react2.screen.getByLabelText('Choose date');
+      _react2.fireEvent.click(dateInput);
       const calendarTable = document.querySelector('table');
       const calendarDays = calendarTable.querySelectorAll('button');
       const calendarWrapper = document.querySelector('[id^="Selectable_"][id$="-list"]');
       const calendarButtons = calendarWrapper.querySelectorAll('button');
-      await (0, _react.waitFor)(() => {
+      await (0, _react2.waitFor)(() => {
         expect(calendarButtons).toHaveLength(44);
         expect(calendarDays).toHaveLength(42);
       });