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

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-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-0) (2025-04-15)
+## [10.16.1](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1) (2025-04-22)
 
 **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,17 +34,18 @@ 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(/*#__PURE__*/React.createElement(Calendar.Day, {
-        key: date.toISOString(),
+      days.push(_jsx(Calendar.Day, {
         date: date.toISOString(),
-        label: date.toISOString()
-      }, date.getDate()));
+        label: date.toISOString(),
+        children: date.getDate()
+      }, date.toISOString()));
       date.setDate(date.getDate() + 1);
     }
     return days;
@@ -61,11 +62,12 @@ describe('<DateInput />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should render an input and a calendar', async () => {
-    const _render = render(/*#__PURE__*/React.createElement(DateInput, {
+    const _render = render(_jsx(DateInput, {
         renderLabel: "date-input",
         renderWeekdayLabels: weekdayLabels,
-        isShowingCalendar: true
-      }, generateDays())),
+        isShowingCalendar: true,
+        children: generateDays()
+      })),
       container = _render.container,
       findByRole = _render.findByRole;
     const dateInput = container.querySelector('input');
@@ -82,32 +84,35 @@ describe('<DateInput />', () => {
   describe('input', () => {
     it('should render a label', () => {
       const labelText = 'label text';
-      render(/*#__PURE__*/React.createElement(DateInput, {
+      render(_jsx(DateInput, {
         renderLabel: labelText,
-        renderWeekdayLabels: weekdayLabels
-      }, generateDays()));
+        renderWeekdayLabels: weekdayLabels,
+        children: generateDays()
+      }));
       const dateInput = screen.getByLabelText('label text');
       expect(dateInput).toBeInTheDocument();
     });
     it('should set value', () => {
       const value = 'January 5';
-      render(/*#__PURE__*/React.createElement(DateInput, {
+      render(_jsx(DateInput, {
         renderLabel: "Choose date",
         value: value,
         onChange: vi.fn(),
-        renderWeekdayLabels: weekdayLabels
-      }, generateDays()));
+        renderWeekdayLabels: weekdayLabels,
+        children: 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(/*#__PURE__*/React.createElement(DateInput, {
+      render(_jsx(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        onChange: onChange
-      }, generateDays()));
+        onChange: onChange,
+        children: generateDays()
+      }));
       const dateInput = screen.getByLabelText('Choose date');
       fireEvent.change(dateInput, {
         target: {
@@ -126,101 +131,111 @@ describe('<DateInput />', () => {
     });
     it('should call onBlur', () => {
       const onBlur = vi.fn();
-      render(/*#__PURE__*/React.createElement(DateInput, {
+      render(_jsx(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        onBlur: onBlur
-      }, generateDays()));
+        onBlur: onBlur,
+        children: generateDays()
+      }));
       const dateInput = screen.getByLabelText('Choose date');
       fireEvent.blur(dateInput);
       expect(onBlur).toHaveBeenCalledTimes(1);
     });
     it('should correctly set interaction type', async () => {
-      const _render2 = render(/*#__PURE__*/React.createElement(DateInput, {
+      const _render2 = render(_jsx(DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
-          interaction: "disabled"
-        }, generateDays())),
+          interaction: "disabled",
+          children: generateDays()
+        })),
         rerender = _render2.rerender;
       const dateInput = screen.getByLabelText('Choose date');
       expect(dateInput).toHaveAttribute('disabled');
-      rerender(/*#__PURE__*/React.createElement(DateInput, {
+      rerender(_jsx(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        interaction: "readonly"
-      }, generateDays()));
+        interaction: "readonly",
+        children: generateDays()
+      }));
       const dateInputAfterUpdate = screen.getByLabelText('Choose date');
       await waitFor(() => {
         expect(dateInputAfterUpdate).toHaveAttribute('readonly');
       });
     });
     it('should correctly set disabled', () => {
-      render(/*#__PURE__*/React.createElement(DateInput, {
+      render(_jsx(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        disabled: true
-      }, generateDays()));
+        disabled: true,
+        children: generateDays()
+      }));
       const dateInput = screen.getByLabelText('Choose date');
       expect(dateInput).toHaveAttribute('disabled');
     });
     it('should correctly set readOnly', () => {
-      render(/*#__PURE__*/React.createElement(DateInput, {
+      render(_jsx(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        readOnly: true
-      }, generateDays()));
+        readOnly: true,
+        children: generateDays()
+      }));
       const dateInput = screen.getByLabelText('Choose date');
       expect(dateInput).toHaveAttribute('readOnly');
     });
     it('should set placeholder', () => {
       const placeholder = 'Start typing to choose a date';
-      render(/*#__PURE__*/React.createElement(DateInput, {
+      render(_jsx(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        placeholder: placeholder
-      }, generateDays()));
+        placeholder: placeholder,
+        children: generateDays()
+      }));
       const dateInput = screen.getByLabelText('Choose date');
       expect(dateInput).toHaveAttribute('placeholder', placeholder);
     });
     it('should be requireable', () => {
-      render(/*#__PURE__*/React.createElement(DateInput, {
+      render(_jsx(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        isRequired: true
-      }, generateDays()));
+        isRequired: true,
+        children: generateDays()
+      }));
       const dateInput = screen.getByLabelText('Choose date *');
       expect(dateInput).toHaveAttribute('required');
     });
     it('should provide inputRef', () => {
       const inputRef = vi.fn();
-      render(/*#__PURE__*/React.createElement(DateInput, {
+      render(_jsx(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        inputRef: inputRef
-      }, generateDays()));
+        inputRef: inputRef,
+        children: 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(/*#__PURE__*/React.createElement(DateInput, {
+      const _render3 = render(_jsx(DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
           messages: [{
             type: 'error',
             text
-          }]
-        }, generateDays())),
+          }],
+          children: generateDays()
+        })),
         container = _render3.container;
       expect(container).toHaveTextContent(text);
     });
     it('should allow custom props to pass through', () => {
-      render(/*#__PURE__*/React.createElement(DateInput, {
+      render(_jsx(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
         "data-custom-attr": "custom value",
-        name: "my name"
-      }, generateDays()));
+        name: "my name",
+        children: generateDays()
+      }));
       const dateInput = screen.getByLabelText('Choose date');
       expect(dateInput).toHaveAttribute('data-custom-attr', 'custom value');
       expect(dateInput).toHaveAttribute('name', 'my name');
@@ -228,10 +243,11 @@ describe('<DateInput />', () => {
   });
   describe('Calendar', () => {
     it('should show calendar when `isShowingCalendar` is set', async () => {
-      const _render4 = render(/*#__PURE__*/React.createElement(DateInput, {
+      const _render4 = render(_jsx(DateInput, {
           renderLabel: "Choose date",
-          renderWeekdayLabels: weekdayLabels
-        }, generateDays())),
+          renderWeekdayLabels: weekdayLabels,
+          children: generateDays()
+        })),
         rerender = _render4.rerender,
         queryByRole = _render4.queryByRole;
       const dateInput = screen.getByLabelText('Choose date');
@@ -240,11 +256,12 @@ describe('<DateInput />', () => {
       expect(dateInput).toBeInTheDocument();
       expect(calendarTable).not.toBeInTheDocument();
       expect(calendarWrapper).not.toBeInTheDocument();
-      rerender(/*#__PURE__*/React.createElement(DateInput, {
+      rerender(_jsx(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        isShowingCalendar: true
-      }, generateDays()));
+        isShowingCalendar: true,
+        children: generateDays()
+      }));
       const dateInputAfterUpdate = screen.getByLabelText('Choose date');
       const calendarTableAfterUpdate = await queryByRole('listbox');
       const calendarWrapperAfterUpdate = await document.querySelector('[id^="Selectable_"][id$="-list"]');
@@ -257,11 +274,12 @@ describe('<DateInput />', () => {
     describe('onRequestShowCalendar', () => {
       it('should call onRequestShowCalendar when label is clicked', async () => {
         const onRequestShowCalendar = vi.fn();
-        const _render5 = render(/*#__PURE__*/React.createElement(DateInput, {
+        const _render5 = render(_jsx(DateInput, {
             renderLabel: "Choose date",
             renderWeekdayLabels: weekdayLabels,
-            onRequestShowCalendar: onRequestShowCalendar
-          }, generateDays())),
+            onRequestShowCalendar: onRequestShowCalendar,
+            children: generateDays()
+          })),
           container = _render5.container;
         const dateInput = container.querySelector('span[class$="-formFieldLayout__label"]');
         expect(dateInput).toHaveTextContent('Choose date');
@@ -272,11 +290,12 @@ describe('<DateInput />', () => {
       });
       it('should call onRequestShowCalendar when input is clicked', async () => {
         const onRequestShowCalendar = vi.fn();
-        const _render6 = render(/*#__PURE__*/React.createElement(DateInput, {
+        const _render6 = render(_jsx(DateInput, {
             renderLabel: "Choose date",
             renderWeekdayLabels: weekdayLabels,
-            onRequestShowCalendar: onRequestShowCalendar
-          }, generateDays())),
+            onRequestShowCalendar: onRequestShowCalendar,
+            children: generateDays()
+          })),
           container = _render6.container;
         const dateInput = container.querySelector('input');
         await userEvent.click(dateInput);
@@ -286,11 +305,12 @@ describe('<DateInput />', () => {
       });
       it('should call onRequestShowCalendar when input receives space event', async () => {
         const onRequestShowCalendar = vi.fn();
-        render(/*#__PURE__*/React.createElement(DateInput, {
+        render(_jsx(DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
-          onRequestShowCalendar: onRequestShowCalendar
-        }, generateDays()));
+          onRequestShowCalendar: onRequestShowCalendar,
+          children: generateDays()
+        }));
         const dateInput = screen.getByLabelText('Choose date');
         await userEvent.type(dateInput, '{space}');
         await waitFor(() => {
@@ -299,12 +319,13 @@ describe('<DateInput />', () => {
       });
       it('should not call onRequestShowCalendar when input receives space event if calendar is already showing', async () => {
         const onRequestShowCalendar = vi.fn();
-        render(/*#__PURE__*/React.createElement(DateInput, {
+        render(_jsx(DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
           onRequestShowCalendar: onRequestShowCalendar,
-          isShowingCalendar: true
-        }, generateDays()));
+          isShowingCalendar: true,
+          children: generateDays()
+        }));
         const dateInput = screen.getByLabelText('Choose date');
         await userEvent.type(dateInput, '{space}');
         await waitFor(() => {
@@ -313,11 +334,12 @@ describe('<DateInput />', () => {
       });
       it('should call onRequestShowCalendar when input receives down arrow event', async () => {
         const onRequestShowCalendar = vi.fn();
-        render(/*#__PURE__*/React.createElement(DateInput, {
+        render(_jsx(DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
-          onRequestShowCalendar: onRequestShowCalendar
-        }, generateDays()));
+          onRequestShowCalendar: onRequestShowCalendar,
+          children: generateDays()
+        }));
         const dateInput = screen.getByLabelText('Choose date');
         await userEvent.type(dateInput, '{arrowdown}');
         await waitFor(() => {
@@ -326,12 +348,13 @@ describe('<DateInput />', () => {
       });
       it('should not call onRequestShowCalendar when input receives down arrow event if calendar is already showing', async () => {
         const onRequestShowCalendar = vi.fn();
-        render(/*#__PURE__*/React.createElement(DateInput, {
+        render(_jsx(DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
           onRequestShowCalendar: onRequestShowCalendar,
-          isShowingCalendar: true
-        }, generateDays()));
+          isShowingCalendar: true,
+          children: generateDays()
+        }));
         const dateInput = screen.getByLabelText('Choose date');
         await userEvent.type(dateInput, '{arrowdown}');
         await waitFor(() => {
@@ -340,11 +363,12 @@ describe('<DateInput />', () => {
       });
       it('should call onRequestShowCalendar when input receives up arrow event', async () => {
         const onRequestShowCalendar = vi.fn();
-        render(/*#__PURE__*/React.createElement(DateInput, {
+        render(_jsx(DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
-          onRequestShowCalendar: onRequestShowCalendar
-        }, generateDays()));
+          onRequestShowCalendar: onRequestShowCalendar,
+          children: generateDays()
+        }));
         const dateInput = screen.getByLabelText('Choose date');
         await userEvent.type(dateInput, '{arrowup}');
         await waitFor(() => {
@@ -353,12 +377,13 @@ describe('<DateInput />', () => {
       });
       it('should not call onRequestShowCalendar when input receives up arrow event if calendar is already showing', async () => {
         const onRequestShowCalendar = vi.fn();
-        render(/*#__PURE__*/React.createElement(DateInput, {
+        render(_jsx(DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
           onRequestShowCalendar: onRequestShowCalendar,
-          isShowingCalendar: true
-        }, generateDays()));
+          isShowingCalendar: true,
+          children: generateDays()
+        }));
         const dateInput = screen.getByLabelText('Choose date');
         await userEvent.type(dateInput, '{arrowup}');
         await waitFor(() => {
@@ -367,11 +392,12 @@ describe('<DateInput />', () => {
       });
       it('should call onRequestShowCalendar when input receives onChange event', async () => {
         const onRequestShowCalendar = vi.fn();
-        render(/*#__PURE__*/React.createElement(DateInput, {
+        render(_jsx(DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
-          onRequestShowCalendar: onRequestShowCalendar
-        }, generateDays()));
+          onRequestShowCalendar: onRequestShowCalendar,
+          children: generateDays()
+        }));
         const dateInput = screen.getByLabelText('Choose date');
         fireEvent.change(dateInput, {
           target: {
@@ -384,12 +410,13 @@ describe('<DateInput />', () => {
       });
       it('should not call onRequestShowCalendar when disabled', async () => {
         const onRequestShowCalendar = vi.fn();
-        render(/*#__PURE__*/React.createElement(DateInput, {
+        render(_jsx(DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
           onRequestShowCalendar: onRequestShowCalendar,
-          interaction: "disabled"
-        }, generateDays()));
+          interaction: "disabled",
+          children: generateDays()
+        }));
         const dateInput = screen.getByLabelText('Choose date');
         fireEvent.click(dateInput);
         await userEvent.type(dateInput, '{arrowup}{arrowdown}{space}January 5', {
@@ -404,13 +431,14 @@ describe('<DateInput />', () => {
       it('should call onRequestHideCalendar and onRequestValidateDate input receives onBlur event', async () => {
         const onRequestHideCalendar = vi.fn();
         const onRequestValidateDate = vi.fn();
-        render(/*#__PURE__*/React.createElement(DateInput, {
+        render(_jsx(DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
           onRequestHideCalendar: onRequestHideCalendar,
           onRequestValidateDate: onRequestValidateDate,
-          isShowingCalendar: true
-        }, generateDays()));
+          isShowingCalendar: true,
+          children: generateDays()
+        }));
         const dateInput = screen.getByLabelText('Choose date');
         fireEvent.blur(dateInput);
         await waitFor(() => {
@@ -421,13 +449,14 @@ describe('<DateInput />', () => {
       it('should call onRequestHideCalendar and onRequestValidateDate when input receives esc event', async () => {
         const onRequestHideCalendar = vi.fn();
         const onRequestValidateDate = vi.fn();
-        render(/*#__PURE__*/React.createElement(DateInput, {
+        render(_jsx(DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
           onRequestHideCalendar: onRequestHideCalendar,
           onRequestValidateDate: onRequestValidateDate,
-          isShowingCalendar: true
-        }, generateDays()));
+          isShowingCalendar: true,
+          children: generateDays()
+        }));
         const dateInput = screen.getByLabelText('Choose date');
         await userEvent.type(dateInput, '{esc}');
         await waitFor(() => {
@@ -439,19 +468,20 @@ describe('<DateInput />', () => {
         const onRequestHideCalendar = vi.fn();
         const onRequestValidateDate = vi.fn();
         const days = generateDays();
-        days[4] = _Calendar$Day || (_Calendar$Day = /*#__PURE__*/React.createElement(Calendar.Day, {
-          key: "4",
+        days[4] = _Calendar$Day || (_Calendar$Day = _jsx(Calendar.Day, {
           label: "4",
           date: "2019-09-28",
-          isSelected: true
-        }, 4));
-        render(/*#__PURE__*/React.createElement(DateInput, {
+          isSelected: true,
+          children: 4
+        }, "4"));
+        render(_jsx(DateInput, {
           renderLabel: "Choose date",
           renderWeekdayLabels: weekdayLabels,
           onRequestHideCalendar: onRequestHideCalendar,
           onRequestValidateDate: onRequestValidateDate,
-          isShowingCalendar: true
-        }, days));
+          isShowingCalendar: true,
+          children: days
+        }));
         const dateInput = screen.getByLabelText('Choose date');
         await userEvent.type(dateInput, '{enter}');
         await waitFor(() => {
@@ -462,24 +492,27 @@ describe('<DateInput />', () => {
     });
     it('should render calendar navigation label', () => {
       const label = 'January 2019';
-      render(/*#__PURE__*/React.createElement(DateInput, {
+      render(_jsx(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        renderNavigationLabel: /*#__PURE__*/React.createElement("div", {
-          "data-testId": "label-id"
-        }, label),
-        isShowingCalendar: true
-      }, generateDays()));
+        renderNavigationLabel: _jsx("div", {
+          "data-testId": "label-id",
+          children: label
+        }),
+        isShowingCalendar: true,
+        children: generateDays()
+      }));
       const navigationLabel = screen.getByTestId('label-id');
       expect(navigationLabel).toBeInTheDocument();
       expect(navigationLabel).toHaveTextContent(label);
     });
     it('should render calendar weekday labels', async () => {
-      render(/*#__PURE__*/React.createElement(DateInput, {
+      render(_jsx(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        isShowingCalendar: true
-      }, generateDays()));
+        isShowingCalendar: true,
+        children: generateDays()
+      }));
       const calendar = await screen.findByRole('listbox');
       const headers = calendar.querySelectorAll('th');
       expect(headers.length).toEqual(7);
@@ -488,17 +521,20 @@ describe('<DateInput />', () => {
       });
     });
     it('should render all focusable elements in calendar with tabIndex="-1"', async () => {
-      render(/*#__PURE__*/React.createElement(DateInput, {
+      render(_jsx(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        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()));
+        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()
+      }));
       const calendar = await screen.findByRole('listbox');
       const calendarDays = calendar.querySelectorAll('button');
       const nextMonthButton = screen.getByTestId('button-next');
@@ -512,18 +548,19 @@ describe('<DateInput />', () => {
     });
     it('should render days with the correct role', async () => {
       const days = generateDays();
-      days[5] = _Calendar$Day2 || (_Calendar$Day2 = /*#__PURE__*/React.createElement(Calendar.Day, {
-        key: "5",
+      days[5] = _Calendar$Day2 || (_Calendar$Day2 = _jsx(Calendar.Day, {
         label: "5",
         date: "2019-09-28",
         id: "5",
-        isOutsideMonth: true
-      }, "outside"));
-      render(/*#__PURE__*/React.createElement(DateInput, {
+        isOutsideMonth: true,
+        children: "outside"
+      }, "5"));
+      render(_jsx(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        isShowingCalendar: true
-      }, days));
+        isShowingCalendar: true,
+        children: days
+      }));
       const calendar = await screen.findByRole('listbox');
       const calendarDays = calendar.querySelectorAll('button');
       calendarDays.forEach(day => {
@@ -536,18 +573,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 = /*#__PURE__*/React.createElement(Calendar.Day, {
-        key: "7",
+      days[7] = _Calendar$Day3 || (_Calendar$Day3 = _jsx(Calendar.Day, {
         label: "7",
         date: "2019-09-28",
         id: "selected-day-id",
-        isSelected: true
-      }, "selected"));
-      render(/*#__PURE__*/React.createElement(DateInput, {
+        isSelected: true,
+        children: "selected"
+      }, "7"));
+      render(_jsx(DateInput, {
         renderLabel: "Choose date",
         renderWeekdayLabels: weekdayLabels,
-        isShowingCalendar: true
-      }, days));
+        isShowingCalendar: true,
+        children: days
+      }));
       const calendar = await screen.findByRole('listbox');
       const calendarDays = calendar.querySelectorAll('button');
       let selectedDayID = '';
@@ -577,7 +615,7 @@ describe('<DateInput />', () => {
   describe('with minimal config', () => {
     it('should render 44 buttons (a calendar) when clicked', async () => {
       const onChange = vi.fn();
-      render(/*#__PURE__*/React.createElement(DateInput, {
+      render(_jsx(DateInput, {
         renderLabel: "Choose date",
         assistiveText: "Type a date or use arrow keys to navigate date picker.",
         width: "20rem",