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

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.16.1-pr-snapshot-1744893671793](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-pr-snapshot-1744893671793) (2025-04-17)
+## [10.16.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-0) (2025-04-15)
 
 **Note:** Version bump only for package @instructure/ui-date-input
 

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

@@ -22,7 +22,7 @@ var _Calendar$Day, _button, _button2, _Calendar$Day2, _Calendar$Day3;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
+import React from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
@@ -34,18 +34,17 @@ import { runAxeCheck } from '@instructure/ui-axe-check';
 import { Calendar } from '@instructure/ui-calendar';
 import Examples from '../__examples__/DateInput.examples';
 import { DateInput } from '../index';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('<DateInput />', () => {
   const weekdayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
   const generateDays = (count = Calendar.DAY_COUNT) => {
     const days = [];
     const date = new Date('2019-07-28');
     while (days.length < count) {
-      days.push(_jsx(Calendar.Day, {
+      days.push(/*#__PURE__*/React.createElement(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;
@@ -62,12 +61,11 @@ describe('<DateInput />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should render an input and a calendar', async () => {
-    const _render = render(_jsx(DateInput, {
+    const _render = render(/*#__PURE__*/React.createElement(DateInput, {
         renderLabel: "date-input",
         renderWeekdayLabels: weekdayLabels,
-        isShowingCalendar: true,
-        children: generateDays()
-      })),
+        isShowingCalendar: true
+      }, generateDays())),
       container = _render.container,
       findByRole = _render.findByRole;
     const dateInput = container.querySelector('input');
@@ -84,35 +82,32 @@ describe('<DateInput />', () => {
   describe('input', () => {
     it('should render a label', () => {
       const labelText = 'label text';
-      render(_jsx(DateInput, {
+      render(/*#__PURE__*/React.createElement(DateInput, {
         renderLabel: labelText,
-        renderWeekdayLabels: weekdayLabels,
-        children: generateDays()
-      }));
+        renderWeekdayLabels: weekdayLabels
+      }, generateDays()));
       const dateInput = screen.getByLabelText('label text');
       expect(dateInput).toBeInTheDocument();
     });
     it('should set value', () => {
       const value = 'January 5';
-      render(_jsx(DateInput, {
+      render(/*#__PURE__*/React.createElement(DateInput, {
         renderLabel: "Choose date",
         value: value,
         onChange: vi.fn(),
-        renderWeekdayLabels: weekdayLabels,
-        children: generateDays()
-      }));
+        renderWeekdayLabels: weekdayLabels
+      }, generateDays()));
       const dateInput = screen.getByLabelText('Choose date');
       expect(dateInput).toHaveValue(value);
     });
     it('should call onChange with the updated value', async () => {
       const onChange = vi.fn();
       const value = 'May 18, 2022';
-      render(_jsx(DateInput, {
+      render(/*#__PURE__*/React.createElement(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        onChange: onChange,
-        children: generateDays()
-      }));
+        onChange: onChange
+      }, generateDays()));
       const dateInput = screen.getByLabelText('Choose date');
       fireEvent.change(dateInput, {
         target: {
@@ -131,111 +126,101 @@ describe('<DateInput />', () => {
     });
     it('should call onBlur', () => {
       const onBlur = vi.fn();
-      render(_jsx(DateInput, {
+      render(/*#__PURE__*/React.createElement(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        onBlur: onBlur,
-        children: generateDays()
-      }));
+        onBlur: onBlur
+      }, generateDays()));
       const dateInput = screen.getByLabelText('Choose date');
       fireEvent.blur(dateInput);
       expect(onBlur).toHaveBeenCalledTimes(1);
     });
     it('should correctly set interaction type', async () => {
-      const _render2 = render(_jsx(DateInput, {
+      const _render2 = render(/*#__PURE__*/React.createElement(DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
-          interaction: "disabled",
-          children: generateDays()
-        })),
+          interaction: "disabled"
+        }, generateDays())),
         rerender = _render2.rerender;
       const dateInput = screen.getByLabelText('Choose date');
       expect(dateInput).toHaveAttribute('disabled');
-      rerender(_jsx(DateInput, {
+      rerender(/*#__PURE__*/React.createElement(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        interaction: "readonly",
-        children: generateDays()
-      }));
+        interaction: "readonly"
+      }, generateDays()));
       const dateInputAfterUpdate = screen.getByLabelText('Choose date');
       await waitFor(() => {
         expect(dateInputAfterUpdate).toHaveAttribute('readonly');
       });
     });
     it('should correctly set disabled', () => {
-      render(_jsx(DateInput, {
+      render(/*#__PURE__*/React.createElement(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        disabled: true,
-        children: generateDays()
-      }));
+        disabled: true
+      }, generateDays()));
       const dateInput = screen.getByLabelText('Choose date');
       expect(dateInput).toHaveAttribute('disabled');
     });
     it('should correctly set readOnly', () => {
-      render(_jsx(DateInput, {
+      render(/*#__PURE__*/React.createElement(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        readOnly: true,
-        children: generateDays()
-      }));
+        readOnly: true
+      }, generateDays()));
       const dateInput = screen.getByLabelText('Choose date');
       expect(dateInput).toHaveAttribute('readOnly');
     });
     it('should set placeholder', () => {
       const placeholder = 'Start typing to choose a date';
-      render(_jsx(DateInput, {
+      render(/*#__PURE__*/React.createElement(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        placeholder: placeholder,
-        children: generateDays()
-      }));
+        placeholder: placeholder
+      }, generateDays()));
       const dateInput = screen.getByLabelText('Choose date');
       expect(dateInput).toHaveAttribute('placeholder', placeholder);
     });
     it('should be requireable', () => {
-      render(_jsx(DateInput, {
+      render(/*#__PURE__*/React.createElement(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        isRequired: true,
-        children: generateDays()
-      }));
+        isRequired: true
+      }, generateDays()));
       const dateInput = screen.getByLabelText('Choose date *');
       expect(dateInput).toHaveAttribute('required');
     });
     it('should provide inputRef', () => {
       const inputRef = vi.fn();
-      render(_jsx(DateInput, {
+      render(/*#__PURE__*/React.createElement(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        inputRef: inputRef,
-        children: generateDays()
-      }));
+        inputRef: inputRef
+      }, generateDays()));
       const dateInput = screen.getByLabelText('Choose date');
       expect(inputRef).toHaveBeenCalledWith(dateInput);
     });
     it('should render messages', () => {
       const text = 'The selected date is invalid';
-      const _render3 = render(_jsx(DateInput, {
+      const _render3 = render(/*#__PURE__*/React.createElement(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', () => {
-      render(_jsx(DateInput, {
+      render(/*#__PURE__*/React.createElement(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
         "data-custom-attr": "custom value",
-        name: "my name",
-        children: generateDays()
-      }));
+        name: "my name"
+      }, generateDays()));
       const dateInput = screen.getByLabelText('Choose date');
       expect(dateInput).toHaveAttribute('data-custom-attr', 'custom value');
       expect(dateInput).toHaveAttribute('name', 'my name');
@@ -243,11 +228,10 @@ describe('<DateInput />', () => {
   });
   describe('Calendar', () => {
     it('should show calendar when `isShowingCalendar` is set', async () => {
-      const _render4 = render(_jsx(DateInput, {
+      const _render4 = render(/*#__PURE__*/React.createElement(DateInput, {
           renderLabel: "Choose date",
-          renderWeekdayLabels: weekdayLabels,
-          children: generateDays()
-        })),
+          renderWeekdayLabels: weekdayLabels
+        }, generateDays())),
         rerender = _render4.rerender,
         queryByRole = _render4.queryByRole;
       const dateInput = screen.getByLabelText('Choose date');
@@ -256,12 +240,11 @@ describe('<DateInput />', () => {
       expect(dateInput).toBeInTheDocument();
       expect(calendarTable).not.toBeInTheDocument();
       expect(calendarWrapper).not.toBeInTheDocument();
-      rerender(_jsx(DateInput, {
+      rerender(/*#__PURE__*/React.createElement(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        isShowingCalendar: true,
-        children: generateDays()
-      }));
+        isShowingCalendar: true
+      }, generateDays()));
       const dateInputAfterUpdate = screen.getByLabelText('Choose date');
       const calendarTableAfterUpdate = await queryByRole('listbox');
       const calendarWrapperAfterUpdate = await document.querySelector('[id^="Selectable_"][id$="-list"]');
@@ -274,12 +257,11 @@ describe('<DateInput />', () => {
     describe('onRequestShowCalendar', () => {
       it('should call onRequestShowCalendar when label is clicked', async () => {
         const onRequestShowCalendar = vi.fn();
-        const _render5 = render(_jsx(DateInput, {
+        const _render5 = render(/*#__PURE__*/React.createElement(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');
@@ -290,12 +272,11 @@ describe('<DateInput />', () => {
       });
       it('should call onRequestShowCalendar when input is clicked', async () => {
         const onRequestShowCalendar = vi.fn();
-        const _render6 = render(_jsx(DateInput, {
+        const _render6 = render(/*#__PURE__*/React.createElement(DateInput, {
             renderLabel: "Choose date",
             renderWeekdayLabels: weekdayLabels,
-            onRequestShowCalendar: onRequestShowCalendar,
-            children: generateDays()
-          })),
+            onRequestShowCalendar: onRequestShowCalendar
+          }, generateDays())),
           container = _render6.container;
         const dateInput = container.querySelector('input');
         await userEvent.click(dateInput);
@@ -305,12 +286,11 @@ describe('<DateInput />', () => {
       });
       it('should call onRequestShowCalendar when input receives space event', async () => {
         const onRequestShowCalendar = vi.fn();
-        render(_jsx(DateInput, {
+        render(/*#__PURE__*/React.createElement(DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
-          onRequestShowCalendar: onRequestShowCalendar,
-          children: generateDays()
-        }));
+          onRequestShowCalendar: onRequestShowCalendar
+        }, generateDays()));
         const dateInput = screen.getByLabelText('Choose date');
         await userEvent.type(dateInput, '{space}');
         await waitFor(() => {
@@ -319,13 +299,12 @@ describe('<DateInput />', () => {
       });
       it('should not call onRequestShowCalendar when input receives space event if calendar is already showing', async () => {
         const onRequestShowCalendar = vi.fn();
-        render(_jsx(DateInput, {
+        render(/*#__PURE__*/React.createElement(DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
           onRequestShowCalendar: onRequestShowCalendar,
-          isShowingCalendar: true,
-          children: generateDays()
-        }));
+          isShowingCalendar: true
+        }, generateDays()));
         const dateInput = screen.getByLabelText('Choose date');
         await userEvent.type(dateInput, '{space}');
         await waitFor(() => {
@@ -334,12 +313,11 @@ describe('<DateInput />', () => {
       });
       it('should call onRequestShowCalendar when input receives down arrow event', async () => {
         const onRequestShowCalendar = vi.fn();
-        render(_jsx(DateInput, {
+        render(/*#__PURE__*/React.createElement(DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
-          onRequestShowCalendar: onRequestShowCalendar,
-          children: generateDays()
-        }));
+          onRequestShowCalendar: onRequestShowCalendar
+        }, generateDays()));
         const dateInput = screen.getByLabelText('Choose date');
         await userEvent.type(dateInput, '{arrowdown}');
         await waitFor(() => {
@@ -348,13 +326,12 @@ describe('<DateInput />', () => {
       });
       it('should not call onRequestShowCalendar when input receives down arrow event if calendar is already showing', async () => {
         const onRequestShowCalendar = vi.fn();
-        render(_jsx(DateInput, {
+        render(/*#__PURE__*/React.createElement(DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
           onRequestShowCalendar: onRequestShowCalendar,
-          isShowingCalendar: true,
-          children: generateDays()
-        }));
+          isShowingCalendar: true
+        }, generateDays()));
         const dateInput = screen.getByLabelText('Choose date');
         await userEvent.type(dateInput, '{arrowdown}');
         await waitFor(() => {
@@ -363,12 +340,11 @@ describe('<DateInput />', () => {
       });
       it('should call onRequestShowCalendar when input receives up arrow event', async () => {
         const onRequestShowCalendar = vi.fn();
-        render(_jsx(DateInput, {
+        render(/*#__PURE__*/React.createElement(DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
-          onRequestShowCalendar: onRequestShowCalendar,
-          children: generateDays()
-        }));
+          onRequestShowCalendar: onRequestShowCalendar
+        }, generateDays()));
         const dateInput = screen.getByLabelText('Choose date');
         await userEvent.type(dateInput, '{arrowup}');
         await waitFor(() => {
@@ -377,13 +353,12 @@ describe('<DateInput />', () => {
       });
       it('should not call onRequestShowCalendar when input receives up arrow event if calendar is already showing', async () => {
         const onRequestShowCalendar = vi.fn();
-        render(_jsx(DateInput, {
+        render(/*#__PURE__*/React.createElement(DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
           onRequestShowCalendar: onRequestShowCalendar,
-          isShowingCalendar: true,
-          children: generateDays()
-        }));
+          isShowingCalendar: true
+        }, generateDays()));
         const dateInput = screen.getByLabelText('Choose date');
         await userEvent.type(dateInput, '{arrowup}');
         await waitFor(() => {
@@ -392,12 +367,11 @@ describe('<DateInput />', () => {
       });
       it('should call onRequestShowCalendar when input receives onChange event', async () => {
         const onRequestShowCalendar = vi.fn();
-        render(_jsx(DateInput, {
+        render(/*#__PURE__*/React.createElement(DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
-          onRequestShowCalendar: onRequestShowCalendar,
-          children: generateDays()
-        }));
+          onRequestShowCalendar: onRequestShowCalendar
+        }, generateDays()));
         const dateInput = screen.getByLabelText('Choose date');
         fireEvent.change(dateInput, {
           target: {
@@ -410,13 +384,12 @@ describe('<DateInput />', () => {
       });
       it('should not call onRequestShowCalendar when disabled', async () => {
         const onRequestShowCalendar = vi.fn();
-        render(_jsx(DateInput, {
+        render(/*#__PURE__*/React.createElement(DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
           onRequestShowCalendar: onRequestShowCalendar,
-          interaction: "disabled",
-          children: generateDays()
-        }));
+          interaction: "disabled"
+        }, generateDays()));
         const dateInput = screen.getByLabelText('Choose date');
         fireEvent.click(dateInput);
         await userEvent.type(dateInput, '{arrowup}{arrowdown}{space}January 5', {
@@ -431,14 +404,13 @@ describe('<DateInput />', () => {
       it('should call onRequestHideCalendar and onRequestValidateDate input receives onBlur event', async () => {
         const onRequestHideCalendar = vi.fn();
         const onRequestValidateDate = vi.fn();
-        render(_jsx(DateInput, {
+        render(/*#__PURE__*/React.createElement(DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
           onRequestHideCalendar: onRequestHideCalendar,
           onRequestValidateDate: onRequestValidateDate,
-          isShowingCalendar: true,
-          children: generateDays()
-        }));
+          isShowingCalendar: true
+        }, generateDays()));
         const dateInput = screen.getByLabelText('Choose date');
         fireEvent.blur(dateInput);
         await waitFor(() => {
@@ -449,14 +421,13 @@ describe('<DateInput />', () => {
       it('should call onRequestHideCalendar and onRequestValidateDate when input receives esc event', async () => {
         const onRequestHideCalendar = vi.fn();
         const onRequestValidateDate = vi.fn();
-        render(_jsx(DateInput, {
+        render(/*#__PURE__*/React.createElement(DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
           onRequestHideCalendar: onRequestHideCalendar,
           onRequestValidateDate: onRequestValidateDate,
-          isShowingCalendar: true,
-          children: generateDays()
-        }));
+          isShowingCalendar: true
+        }, generateDays()));
         const dateInput = screen.getByLabelText('Choose date');
         await userEvent.type(dateInput, '{esc}');
         await waitFor(() => {
@@ -468,20 +439,19 @@ describe('<DateInput />', () => {
         const onRequestHideCalendar = vi.fn();
         const onRequestValidateDate = vi.fn();
         const days = generateDays();
-        days[4] = _Calendar$Day || (_Calendar$Day = _jsx(Calendar.Day, {
+        days[4] = _Calendar$Day || (_Calendar$Day = /*#__PURE__*/React.createElement(Calendar.Day, {
+          key: "4",
           label: "4",
           date: "2019-09-28",
-          isSelected: true,
-          children: 4
-        }, "4"));
-        render(_jsx(DateInput, {
+          isSelected: true
+        }, 4));
+        render(/*#__PURE__*/React.createElement(DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
           onRequestHideCalendar: onRequestHideCalendar,
           onRequestValidateDate: onRequestValidateDate,
-          isShowingCalendar: true,
-          children: days
-        }));
+          isShowingCalendar: true
+        }, days));
         const dateInput = screen.getByLabelText('Choose date');
         await userEvent.type(dateInput, '{enter}');
         await waitFor(() => {
@@ -492,27 +462,24 @@ describe('<DateInput />', () => {
     });
     it('should render calendar navigation label', () => {
       const label = 'January 2019';
-      render(_jsx(DateInput, {
+      render(/*#__PURE__*/React.createElement(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        renderNavigationLabel: _jsx("div", {
-          "data-testId": "label-id",
-          children: label
-        }),
-        isShowingCalendar: true,
-        children: generateDays()
-      }));
+        renderNavigationLabel: /*#__PURE__*/React.createElement("div", {
+          "data-testId": "label-id"
+        }, label),
+        isShowingCalendar: true
+      }, generateDays()));
       const navigationLabel = screen.getByTestId('label-id');
       expect(navigationLabel).toBeInTheDocument();
       expect(navigationLabel).toHaveTextContent(label);
     });
     it('should render calendar weekday labels', async () => {
-      render(_jsx(DateInput, {
+      render(/*#__PURE__*/React.createElement(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        isShowingCalendar: true,
-        children: generateDays()
-      }));
+        isShowingCalendar: true
+      }, generateDays()));
       const calendar = await screen.findByRole('listbox');
       const headers = calendar.querySelectorAll('th');
       expect(headers.length).toEqual(7);
@@ -521,20 +488,17 @@ describe('<DateInput />', () => {
       });
     });
     it('should render all focusable elements in calendar with tabIndex="-1"', async () => {
-      render(_jsx(DateInput, {
+      render(/*#__PURE__*/React.createElement(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        renderNextMonthButton: _button || (_button = _jsx("button", {
-          "data-testId": "button-next",
-          children: "next"
-        })),
-        renderPrevMonthButton: _button2 || (_button2 = _jsx("button", {
-          "data-testId": "button-prev",
-          children: "prev"
-        })),
-        isShowingCalendar: true,
-        children: generateDays()
-      }));
+        renderNextMonthButton: _button || (_button = /*#__PURE__*/React.createElement("button", {
+          "data-testId": "button-next"
+        }, "next")),
+        renderPrevMonthButton: _button2 || (_button2 = /*#__PURE__*/React.createElement("button", {
+          "data-testId": "button-prev"
+        }, "prev")),
+        isShowingCalendar: true
+      }, generateDays()));
       const calendar = await screen.findByRole('listbox');
       const calendarDays = calendar.querySelectorAll('button');
       const nextMonthButton = screen.getByTestId('button-next');
@@ -548,19 +512,18 @@ describe('<DateInput />', () => {
     });
     it('should render days with the correct role', async () => {
       const days = generateDays();
-      days[5] = _Calendar$Day2 || (_Calendar$Day2 = _jsx(Calendar.Day, {
+      days[5] = _Calendar$Day2 || (_Calendar$Day2 = /*#__PURE__*/React.createElement(Calendar.Day, {
+        key: "5",
         label: "5",
         date: "2019-09-28",
         id: "5",
-        isOutsideMonth: true,
-        children: "outside"
-      }, "5"));
-      render(_jsx(DateInput, {
+        isOutsideMonth: true
+      }, "outside"));
+      render(/*#__PURE__*/React.createElement(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        isShowingCalendar: true,
-        children: days
-      }));
+        isShowingCalendar: true
+      }, days));
       const calendar = await screen.findByRole('listbox');
       const calendarDays = calendar.querySelectorAll('button');
       calendarDays.forEach(day => {
@@ -573,19 +536,18 @@ 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 = _jsx(Calendar.Day, {
+      days[7] = _Calendar$Day3 || (_Calendar$Day3 = /*#__PURE__*/React.createElement(Calendar.Day, {
+        key: "7",
         label: "7",
         date: "2019-09-28",
         id: "selected-day-id",
-        isSelected: true,
-        children: "selected"
-      }, "7"));
-      render(_jsx(DateInput, {
+        isSelected: true
+      }, "selected"));
+      render(/*#__PURE__*/React.createElement(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        isShowingCalendar: true,
-        children: days
-      }));
+        isShowingCalendar: true
+      }, days));
       const calendar = await screen.findByRole('listbox');
       const calendarDays = calendar.querySelectorAll('button');
       let selectedDayID = '';
@@ -615,7 +577,7 @@ describe('<DateInput />', () => {
   describe('with minimal config', () => {
     it('should render 44 buttons (a calendar) when clicked', async () => {
       const onChange = vi.fn();
-      render(_jsx(DateInput, {
+      render(/*#__PURE__*/React.createElement(DateInput, {
         renderLabel: "Choose date",
         assistiveText: "Type a date or use arrow keys to navigate date picker.",
         width: "20rem",