@instructure/ui-calendar 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-calendar
 

package/es/Calendar/Day/__new-tests__/Day.test.js

@@ -23,7 +23,6 @@ var _Day, _Day2, _Day3, _Day4, _Day5, _Day6, _Day7, _Day8, _Day9, _Day10, _Day11
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { vi } from 'vitest';
@@ -34,113 +33,126 @@ import { generateA11yTests } from '@instructure/ui-scripts/lib/test/generateA11y
 import { runAxeCheck } from '@instructure/ui-axe-check';
 import { Day } from '../index';
 import DayExamples from '../__examples__/Day.examples';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 describe('Day', () => {
   it('should render children', async () => {
-    const _render = render(_Day || (_Day = /*#__PURE__*/React.createElement(Day, {
+    const _render = render(_Day || (_Day = _jsx(Day, {
         date: "2019-08-02",
-        label: "1 August 2019 Friday"
-      }, "8"))),
+        label: "1 August 2019 Friday",
+        children: "8"
+      }))),
       rerender = _render.rerender;
     const child = screen.getByText('8');
     expect(child).toBeInTheDocument();
-    rerender(_Day2 || (_Day2 = /*#__PURE__*/React.createElement(Day, {
+    rerender(_Day2 || (_Day2 = _jsx(Day, {
       date: "2019-08-02",
-      label: "1 August 2019 Friday"
-    }, "31")));
+      label: "1 August 2019 Friday",
+      children: "31"
+    })));
     const childUpdated = screen.getByText('31');
     expect(childUpdated).toBeInTheDocument();
   });
   it('should have an accessible label', async () => {
     const label = '1 August 2019 Friday';
-    const _render2 = render(/*#__PURE__*/React.createElement(Day, {
+    const _render2 = render(_jsx(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 = render(_Day3 || (_Day3 = /*#__PURE__*/React.createElement(Day, {
+    const _render3 = render(_Day3 || (_Day3 = _jsx(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.createElement(Day, {
+    rerender(_Day4 || (_Day4 = _jsx(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 = render(_Day5 || (_Day5 = /*#__PURE__*/React.createElement(Day, {
+    const _render4 = render(_Day5 || (_Day5 = _jsx(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.createElement(Day, {
+    rerender(_Day6 || (_Day6 = _jsx(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 = render(_Day7 || (_Day7 = /*#__PURE__*/React.createElement(Day, {
+    const _render5 = render(_Day7 || (_Day7 = _jsx(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.createElement(Day, {
+    rerender(_Day8 || (_Day8 = _jsx(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.createElement(Day, {
+    rerender(_Day9 || (_Day9 = _jsx(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.createElement(Day, {
+    rerender(_Day10 || (_Day10 = _jsx(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 = vi.fn();
     const date = '2019-08-02';
-    const _render6 = render(/*#__PURE__*/React.createElement(Day, {
+    const _render6 = render(_jsx(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.click(day);
     await waitFor(() => {
       const args = onClick.mock.calls[0][1];
@@ -151,14 +163,15 @@ describe('Day', () => {
   it('should call onKeyDown with date', async () => {
     const onKeyDown = vi.fn();
     const date = '2019-08-02';
-    const _render7 = render(/*#__PURE__*/React.createElement(Day, {
+    const _render7 = render(_jsx(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.type(day, '{enter}');
     await waitFor(() => {
       const args = onKeyDown.mock.calls[0][1];
@@ -168,14 +181,15 @@ describe('Day', () => {
   });
   it('should apply disabled when interaction is `disabled`', async () => {
     const onClick = vi.fn();
-    const _render8 = render(/*#__PURE__*/React.createElement(Day, {
+    const _render8 = render(_jsx(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.click(day);
     await waitFor(() => {
       expect(onClick).not.toHaveBeenCalled();
@@ -187,44 +201,48 @@ describe('Day', () => {
     const elementRef = el => {
       element = el;
     };
-    const _render9 = render(/*#__PURE__*/React.createElement(Day, {
+    const _render9 = render(_jsx(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 = render(_Day11 || (_Day11 = /*#__PURE__*/React.createElement(Day, {
+      const _render10 = render(_Day11 || (_Day11 = _jsx(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 = render(/*#__PURE__*/React.createElement(Day, {
+      const _render11 = render(_jsx(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 = render(/*#__PURE__*/React.createElement(Day, {
+      const _render12 = render(_jsx(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');
     });
   });

package/es/Calendar/Day/index.js

@@ -25,16 +25,16 @@ var _dec, _dec2, _class, _Day;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Component } from 'react';
 import { View } from '@instructure/ui-view';
 import { AccessibleContent } from '@instructure/ui-a11y-content';
 import { omitProps, callRenderProp, getElementType } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
 parent: Calendar
@@ -114,7 +114,8 @@ let Day = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = test
     const elementType = this.elementType,
       isDisabled = this.isDisabled;
     const passthroughProps = View.omitViewProps(omitProps(props, Day.allowedProps), Day);
-    return jsx(View, Object.assign({}, passthroughProps, {
+    return _jsx(View, {
+      ...passthroughProps,
       as: elementType,
       css: styles === null || styles === void 0 ? void 0 : styles.calendarDay,
       display: "inline-block",
@@ -128,12 +129,15 @@ let Day = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = test
       "aria-selected": this.shouldApplyAriaSelected() ? isSelected ? 'true' : 'false' : void 0,
       onClick: onClick && this.handleClick,
       onKeyDown: onKeyDown && this.handleKeyDown,
-      elementRef: this.handleElementRef
-    }), jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.day
-    }, jsx(AccessibleContent, {
-      alt: label
-    }, callRenderProp(children))));
+      elementRef: this.handleElementRef,
+      children: _jsx("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.day,
+        children: _jsx(AccessibleContent, {
+          alt: label,
+          children: callRenderProp(children)
+        })
+      })
+    });
   }
 }, _Day.displayName = "Day", _Day.componentId = 'Calendar.Day', _Day.propTypes = propTypes, _Day.allowedProps = allowedProps, _Day.defaultProps = {
   interaction: 'enabled',

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

@@ -22,7 +22,7 @@ var _Calendar, _Calendar2, _Calendar3, _Calendar4, _span, _button, _button2, _bu
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react';
+
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { vi } from 'vitest';
@@ -33,17 +33,18 @@ import { generateA11yTests } from '@instructure/ui-scripts/lib/test/generateA11y
 import { runAxeCheck } from '@instructure/ui-axe-check';
 import CalendarExamples from '../__examples__/Calendar.examples';
 import Calendar from '../index';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 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(),
-      isOutsideMonth: date.getMonth() !== 7
-    }, date.getDate()));
+      isOutsideMonth: date.getMonth() !== 7,
+      children: date.getDate()
+    }, date.toISOString()));
     date.setDate(date.getDate() + 1);
   }
   return days;
@@ -62,18 +63,18 @@ describe('<Calendar />', () => {
   });
   describe('with minimal config', () => {
     it('should render 44 buttons without config', async () => {
-      render(_Calendar || (_Calendar = /*#__PURE__*/React.createElement(Calendar, null)));
+      render(_Calendar || (_Calendar = _jsx(Calendar, {})));
       const buttons = document.getElementsByTagName('button');
       expect(buttons.length).toEqual(44);
     });
     it('should render proper week names by default', async () => {
-      const _render = render(_Calendar2 || (_Calendar2 = /*#__PURE__*/React.createElement(Calendar, null))),
+      const _render = render(_Calendar2 || (_Calendar2 = _jsx(Calendar, {}))),
         container = _render.container;
       const thead = container.querySelector('thead');
       expect(thead).toHaveTextContent('SundaySuMondayMoTuesdayTuWednesdayWeThursdayThFridayFrSaturdaySa');
     });
     it('should render proper week names if locale is set', async () => {
-      const _render2 = render(_Calendar3 || (_Calendar3 = /*#__PURE__*/React.createElement(Calendar, {
+      const _render2 = render(_Calendar3 || (_Calendar3 = _jsx(Calendar, {
           locale: "hu"
         }))),
         container = _render2.container;
@@ -81,7 +82,7 @@ describe('<Calendar />', () => {
       expect(thead).toHaveTextContent('hétfőhkeddkszerdaszecsütörtökcspéntekpszombatszovasárnapv');
     });
     it('should disable days properly', async () => {
-      const _render3 = render(/*#__PURE__*/React.createElement(Calendar, {
+      const _render3 = render(_jsx(Calendar, {
           currentDate: "2023-12-15",
           disabledDates: ['2023-12-22', '2023-12-12', '2023-12-11']
         })),
@@ -94,7 +95,7 @@ describe('<Calendar />', () => {
     });
     it('should indicate selected day', async () => {
       var _screen$queryByText, _screen$queryByText$p;
-      render(_Calendar4 || (_Calendar4 = /*#__PURE__*/React.createElement(Calendar, {
+      render(_Calendar4 || (_Calendar4 = _jsx(Calendar, {
         currentDate: "2023-12-15",
         selectedDate: "2023-12-22"
       })));
@@ -107,25 +108,28 @@ describe('<Calendar />', () => {
     });
   });
   it('should render children', async () => {
-    const _render4 = render(/*#__PURE__*/React.createElement(Calendar, {
-        renderWeekdayLabels: weekdayLabels
-      }, generateDays())),
+    const _render4 = render(_jsx(Calendar, {
+        renderWeekdayLabels: weekdayLabels,
+        children: generateDays()
+      })),
       container = _render4.container;
-    const calendarDays = container.querySelectorAll('span[class$="-calendarDay__day"]');
+    const calendarDays = container.querySelectorAll('span[class*="-calendarDay__day"]');
     expect(calendarDays.length).toEqual(Calendar.DAY_COUNT);
   });
   it(`should warn if the correct number of children are not provided`, async () => {
     const count = Calendar.DAY_COUNT - 1;
-    render(/*#__PURE__*/React.createElement(Calendar, {
-      renderWeekdayLabels: weekdayLabels
-    }, generateDays(count)));
+    render(_jsx(Calendar, {
+      renderWeekdayLabels: weekdayLabels,
+      children: generateDays(count)
+    }));
     const expectedErrorMessage = `should have exactly ${Calendar.DAY_COUNT} children. ${count} provided.`;
     expect(consoleErrorMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
   });
   it('should render weekday labels', async () => {
-    const _render5 = render(/*#__PURE__*/React.createElement(Calendar, {
-        renderWeekdayLabels: weekdayLabels
-      }, generateDays())),
+    const _render5 = render(_jsx(Calendar, {
+        renderWeekdayLabels: weekdayLabels,
+        children: generateDays()
+      })),
       container = _render5.container,
       rerender = _render5.rerender;
     const originalHeaders = container.querySelectorAll('th');
@@ -136,9 +140,10 @@ describe('<Calendar />', () => {
     const functionalWeekdayLabels = [() => 'Sx', () => 'Mx', () => 'Tx', () => 'Wx', () => 'Tx', () => 'Fx', () => 'Sx'];
 
     // Set prop: renderWeekdayLabels
-    rerender(/*#__PURE__*/React.createElement(Calendar, {
-      renderWeekdayLabels: functionalWeekdayLabels
-    }, generateDays()));
+    rerender(_jsx(Calendar, {
+      renderWeekdayLabels: functionalWeekdayLabels,
+      children: generateDays()
+    }));
     const updatedHeaders = container.querySelectorAll('th');
     expect(updatedHeaders.length).toEqual(7);
     functionalWeekdayLabels.forEach((functionalLabel, i) => {
@@ -146,16 +151,18 @@ describe('<Calendar />', () => {
     });
   });
   it('should warn if 7 weekday labels are not provided', async () => {
-    render(/*#__PURE__*/React.createElement(Calendar, {
-      renderWeekdayLabels: []
-    }, generateDays()));
+    render(_jsx(Calendar, {
+      renderWeekdayLabels: [],
+      children: generateDays()
+    }));
     const expectedErrorMessage = '`renderWeekdayLabels` should be an array with 7 labels (one for each weekday). 0 provided.';
     expect(consoleErrorMock).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
   });
   it('should format the weekday labels and days correctly', async () => {
-    const _render6 = render(/*#__PURE__*/React.createElement(Calendar, {
-        renderWeekdayLabels: weekdayLabels
-      }, generateDays())),
+    const _render6 = render(_jsx(Calendar, {
+        renderWeekdayLabels: weekdayLabels,
+        children: generateDays()
+      })),
       container = _render6.container;
     const headerRow = container.querySelectorAll('thead > tr');
     expect(headerRow.length).toEqual(1);
@@ -169,11 +176,18 @@ describe('<Calendar />', () => {
     }
   });
   it('should render navigation label', async () => {
-    const navLabel = _span || (_span = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", null, "March"), /*#__PURE__*/React.createElement("div", null, "2019")));
-    const _render7 = render(/*#__PURE__*/React.createElement(Calendar, {
+    const navLabel = _span || (_span = _jsxs("span", {
+      children: [_jsx("div", {
+        children: "March"
+      }), _jsx("div", {
+        children: "2019"
+      })]
+    }));
+    const _render7 = render(_jsx(Calendar, {
         renderWeekdayLabels: weekdayLabels,
-        renderNavigationLabel: navLabel
-      }, generateDays())),
+        renderNavigationLabel: navLabel,
+        children: generateDays()
+      })),
       rerender = _render7.rerender;
     const month = screen.getByText('March');
     const year = screen.getByText('2019');
@@ -181,38 +195,50 @@ describe('<Calendar />', () => {
     expect(year).toBeInTheDocument();
 
     // Set prop: renderNavigationLabel
-    rerender(/*#__PURE__*/React.createElement(Calendar, {
+    rerender(_jsx(Calendar, {
       renderWeekdayLabels: weekdayLabels,
-      renderNavigationLabel: () => navLabel
-    }, generateDays()));
+      renderNavigationLabel: () => navLabel,
+      children: generateDays()
+    }));
     const updatedMonth = screen.getByText('March');
     const updatedYear = screen.getByText('2019');
     expect(updatedMonth).toBeInTheDocument();
     expect(updatedYear).toBeInTheDocument();
   });
   it('should render next and prev buttons', async () => {
-    const _render8 = render(/*#__PURE__*/React.createElement(Calendar, {
-        renderWeekdayLabels: weekdayLabels
-      }, generateDays())),
+    const _render8 = render(_jsx(Calendar, {
+        renderWeekdayLabels: weekdayLabels,
+        children: generateDays()
+      })),
       rerender = _render8.rerender;
     const defaultPrevButton = screen.getByText('Previous month');
     const defaultNextButton = screen.getByText('Next month');
     expect(defaultPrevButton).toBeInTheDocument();
     expect(defaultNextButton).toBeInTheDocument();
-    rerender(/*#__PURE__*/React.createElement(Calendar, {
+    rerender(_jsx(Calendar, {
       renderWeekdayLabels: weekdayLabels,
-      renderPrevMonthButton: _button || (_button = /*#__PURE__*/React.createElement("button", null, "test-prev")),
-      renderNextMonthButton: _button2 || (_button2 = /*#__PURE__*/React.createElement("button", null, "test-next"))
-    }, generateDays()));
+      renderPrevMonthButton: _button || (_button = _jsx("button", {
+        children: "test-prev"
+      })),
+      renderNextMonthButton: _button2 || (_button2 = _jsx("button", {
+        children: "test-next"
+      })),
+      children: generateDays()
+    }));
     const customPrevButton = screen.getByText('test-prev');
     const customNextButton = screen.getByText('test-next');
     expect(customPrevButton).toBeInTheDocument();
     expect(customNextButton).toBeInTheDocument();
-    rerender(/*#__PURE__*/React.createElement(Calendar, {
+    rerender(_jsx(Calendar, {
       renderWeekdayLabels: weekdayLabels,
-      renderPrevMonthButton: () => _button3 || (_button3 = /*#__PURE__*/React.createElement("button", null, "func-test-prev")),
-      renderNextMonthButton: () => _button4 || (_button4 = /*#__PURE__*/React.createElement("button", null, "func-test-next"))
-    }, generateDays()));
+      renderPrevMonthButton: () => _button3 || (_button3 = _jsx("button", {
+        children: "func-test-prev"
+      })),
+      renderNextMonthButton: () => _button4 || (_button4 = _jsx("button", {
+        children: "func-test-next"
+      })),
+      children: generateDays()
+    }));
     const funcPrevButton = screen.getByText('func-test-prev');
     const funcNextButton = screen.getByText('func-test-next');
     expect(funcPrevButton).toBeInTheDocument();
@@ -221,13 +247,18 @@ describe('<Calendar />', () => {
   it('should call onRequestRenderNextMonth and onRequestRenderPrevMonth', async () => {
     const onRequestRenderPrevMonth = vi.fn();
     const onRequestRenderNextMonth = vi.fn();
-    render(/*#__PURE__*/React.createElement(Calendar, {
+    render(_jsx(Calendar, {
       renderWeekdayLabels: weekdayLabels,
-      renderPrevMonthButton: _button5 || (_button5 = /*#__PURE__*/React.createElement("button", null, "prev month")),
-      renderNextMonthButton: _button6 || (_button6 = /*#__PURE__*/React.createElement("button", null, "next month")),
+      renderPrevMonthButton: _button5 || (_button5 = _jsx("button", {
+        children: "prev month"
+      })),
+      renderNextMonthButton: _button6 || (_button6 = _jsx("button", {
+        children: "next month"
+      })),
       onRequestRenderPrevMonth: onRequestRenderPrevMonth,
-      onRequestRenderNextMonth: onRequestRenderNextMonth
-    }, generateDays()));
+      onRequestRenderNextMonth: onRequestRenderNextMonth,
+      children: generateDays()
+    }));
     const prevButton = screen.getByText('prev month');
     const nextButton = screen.getByText('next month');
     expect(onRequestRenderPrevMonth).not.toHaveBeenCalled();
@@ -241,10 +272,11 @@ describe('<Calendar />', () => {
   });
   describe('when role="listbox"', () => {
     it('should set role="listbox" on table root and role="presentation" on the correct elements', async () => {
-      const _render9 = render(/*#__PURE__*/React.createElement(Calendar, {
+      const _render9 = render(_jsx(Calendar, {
           renderWeekdayLabels: weekdayLabels,
-          role: "listbox"
-        }, generateDays())),
+          role: "listbox",
+          children: generateDays()
+        })),
         container = _render9.container;
       const table = container.querySelector('table');
       expect(table).toHaveAttribute('role', 'listbox');
@@ -258,25 +290,27 @@ describe('<Calendar />', () => {
       }
     });
     it("should link each day with it's weekday header via `aria-describedby`", async () => {
-      const _render10 = render(/*#__PURE__*/React.createElement(Calendar, {
+      const _render10 = render(_jsx(Calendar, {
           renderWeekdayLabels: weekdayLabels,
-          role: "listbox"
-        }, generateDays())),
+          role: "listbox",
+          children: generateDays()
+        })),
         container = _render10.container;
       const days = container.querySelectorAll('tbody > tr > td');
       const headers = container.querySelectorAll('th');
       days.forEach((dayTd, i) => {
         const index = i % 7;
-        const day = dayTd.querySelector('span[class$="-calendarDay"]');
+        const day = dayTd.querySelector('span[class*="-calendarDay"]');
         expect(day).toHaveAttribute('aria-describedby', headers[index].getAttribute('id'));
       });
     });
   });
   it('should render root as designated by the `as` prop', async () => {
-    render(/*#__PURE__*/React.createElement(Calendar, {
+    render(_jsx(Calendar, {
       renderWeekdayLabels: weekdayLabels,
-      as: "ul"
-    }, generateDays()));
+      as: "ul",
+      children: generateDays()
+    }));
     const calendar = screen.getByRole('list');
     expect(calendar.tagName).toBe('UL');
     expect(calendar).toHaveTextContent(weekdayLabels.join(''));