react-day-picker 8.4.1 → 8.5.0

package/src/components/CaptionDropdowns/CaptionDropdowns.test.tsx

@@ -5,13 +5,13 @@ import userEvent from '@testing-library/user-event';
 import { setMonth, setYear } from 'date-fns';
 import { DayPickerProps } from 'DayPicker';
 
+import { customRender } from 'test/render';
 import {
   getMonthDropdown,
   getYearDropdown,
   queryMonthDropdown,
   queryYearDropdown
-} from 'test/po';
-import { customRender } from 'test/render';
+} from 'test/selectors';
 import { freezeBeforeAll } from 'test/utils';
 
 import { CaptionProps } from 'components/Caption';
@@ -25,6 +25,7 @@ const toYear = 2025;
 
 freezeBeforeAll(today);
 
+const user = userEvent.setup();
 function setup(props: CaptionProps, dayPickerProps?: DayPickerProps) {
   customRender(<CaptionDropdowns {...props} />, dayPickerProps);
 }
@@ -85,8 +86,8 @@ describe('when a month is selected', () => {
   });
   describe('from the months drop-down', () => {
     const newMonth = setMonth(today, 0);
-    beforeEach(() => {
-      userEvent.selectOptions(
+    beforeEach(async () => {
+      await user.selectOptions(
         getMonthDropdown(),
         newMonth.getMonth().toString()
       );
@@ -97,8 +98,8 @@ describe('when a month is selected', () => {
   });
   describe('from the years drop-down', () => {
     const newYear = setYear(today, 2022);
-    beforeEach(() => {
-      userEvent.selectOptions(
+    beforeEach(async () => {
+      await user.selectOptions(
         getYearDropdown(),
         newYear.getFullYear().toString()
       );

package/src/components/CaptionLabel/CaptionLabel.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { getMonthCaption } from 'test/po';
 import { customRender } from 'test/render';
+import { getMonthCaption } from 'test/selectors';
 import { freezeBeforeAll } from 'test/utils';
 
 import { CaptionLabel } from './CaptionLabel';

package/src/components/CaptionLabel/CaptionLabel.tsx

@@ -19,14 +19,14 @@ export function CaptionLabel(props: CaptionLabelProps): JSX.Element {
     formatters: { formatCaption }
   } = useDayPicker();
   return (
-    <h2
+    <div
       className={classNames.caption_label}
       style={styles.caption_label}
       aria-live="polite"
-      aria-atomic="true"
+      role="presentation"
       id={props.id}
     >
       {formatCaption(props.displayMonth, { locale })}
-    </h2>
+    </div>
   );
 }

package/src/components/CaptionNavigation/CaptionNavigation.test.tsx

@@ -5,14 +5,14 @@ import userEvent from '@testing-library/user-event';
 import { addMonths } from 'date-fns';
 import { DayPickerProps } from 'DayPicker';
 
+import { customRender } from 'test/render';
 import {
   getMonthCaption,
   getNextButton,
   getPrevButton,
   queryNextButton,
   queryPrevButton
-} from 'test/po';
-import { customRender } from 'test/render';
+} from 'test/selectors';
 import { freezeBeforeAll } from 'test/utils';
 
 import { CaptionProps } from 'components/Caption';
@@ -24,6 +24,7 @@ const today = new Date(2021, 8);
 
 freezeBeforeAll(today);
 
+const user = userEvent.setup();
 function setup(props: CaptionProps, dayPickerProps?: DayPickerProps) {
   customRender(<CaptionNavigation {...props} />, dayPickerProps);
 }
@@ -115,9 +116,9 @@ describe('when rendered', () => {
         onMonthChange: jest.fn()
       };
       const previousMonth = addMonths(today, -1);
-      beforeEach(() => {
+      beforeEach(async () => {
         customRender(<CaptionNavigation displayMonth={today} />, testContext);
-        userEvent.click(getPrevButton());
+        await user.click(getPrevButton());
       });
       test('should call the `onMonthChange` callback', () => {
         expect(testContext.onMonthChange).toHaveBeenCalledWith(previousMonth);
@@ -129,9 +130,9 @@ describe('when rendered', () => {
         fromDate: today,
         onMonthChange: jest.fn()
       };
-      beforeEach(() => {
+      beforeEach(async () => {
         customRender(<CaptionNavigation displayMonth={today} />, testContext);
-        userEvent.click(getPrevButton());
+        await user.click(getPrevButton());
       });
       test('should call the `onMonthChange` callback', () => {
         expect(testContext.onMonthChange).not.toHaveBeenCalled();
@@ -146,9 +147,9 @@ describe('when rendered', () => {
         onMonthChange: jest.fn()
       };
       const nextMonth = addMonths(today, 1);
-      beforeEach(() => {
+      beforeEach(async () => {
         customRender(<CaptionNavigation displayMonth={today} />, testContext);
-        userEvent.click(getNextButton());
+        await user.click(getNextButton());
       });
       test('should call the `onMonthChange` callback', () => {
         expect(testContext.onMonthChange).toHaveBeenCalledWith(nextMonth);
@@ -160,9 +161,9 @@ describe('when rendered', () => {
         toDate: today,
         onMonthChange: jest.fn()
       };
-      beforeEach(() => {
+      beforeEach(async () => {
         customRender(<CaptionNavigation displayMonth={today} />, testContext);
-        userEvent.click(getNextButton());
+        await user.click(getNextButton());
       });
       test('should call the `onMonthChange` callback', () => {
         expect(testContext.onMonthChange).not.toHaveBeenCalled();

package/src/components/CaptionNavigation/CaptionNavigation.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import isSameMonth from 'date-fns/isSameMonth';
+import { isSameMonth } from 'date-fns';
 
 import { CaptionProps } from 'components/Caption/Caption';
 import { CaptionLabel } from 'components/CaptionLabel';

package/src/components/Day/Day.test.tsx

@@ -13,11 +13,6 @@ import { Day, DayProps } from './Day';
 const today = new Date(2021, 8);
 
 freezeBeforeAll(today);
-let container: HTMLElement;
-function setup(props: DayProps, dayPickerProps?: DayPickerProps) {
-  const view = customRender(<Day {...props} />, dayPickerProps);
-  container = view.container;
-}
 
 const date = today;
 const displayMonth = today;
@@ -31,19 +26,21 @@ describe('when the day to render has an hidden modifier', () => {
     modifiers: { hidden: date }
   };
   beforeEach(() => {
-    setup(props, dayPickerProps);
+    customRender(<Day {...props} />, dayPickerProps);
   });
-  test('should render an empty element', () => {
-    expect(container).toBeEmptyDOMElement();
+  test('should render an empty grid cell', () => {
+    const cell = screen.getByRole('gridcell');
+    expect(cell).toBeEmptyDOMElement();
   });
 });
 describe('when a no selection mode and no "onDayClick"', () => {
   const dayPickerProps: DayPickerProps = { mode: 'default' };
   beforeEach(() => {
-    setup(props, dayPickerProps);
+    customRender(<Day {...props} />, dayPickerProps);
   });
   test('should render a div', () => {
-    expect(container.firstChild?.nodeName).toBe('DIV');
+    const cell = screen.getByRole('gridcell');
+    expect(cell.nodeName).toBe('DIV');
   });
 });
 
@@ -52,11 +49,12 @@ describe('when a selection mode is set', () => {
     mode: 'single'
   };
   beforeEach(() => {
-    setup(props, dayPickerProps);
+    customRender(<Day {...props} />, dayPickerProps);
   });
   test('should render a button named "day"', () => {
-    expect(container.firstChild?.nodeName).toBe('BUTTON');
-    expect(container.firstChild).toHaveAttribute('name', 'day');
+    const cell = screen.getByRole('gridcell');
+    expect(cell.nodeName).toBe('BUTTON');
+    expect(cell).toHaveAttribute('name', 'day');
   });
 });
 
@@ -65,10 +63,11 @@ describe('when "onDayClick" is present', () => {
     onDayClick: jest.fn()
   };
   beforeEach(() => {
-    setup(props, dayPickerProps);
+    customRender(<Day {...props} />, dayPickerProps);
   });
   test('should render a button', () => {
-    expect(container.firstChild?.nodeName).toBe('BUTTON');
+    const cell = screen.getByRole('gridcell');
+    expect(cell.nodeName).toBe('BUTTON');
   });
 });
 
@@ -77,7 +76,7 @@ describe('when using a custom DayContent component', () => {
     DayContent: () => <>Custom DayContent</>
   };
   beforeEach(() => {
-    setup(props, { components });
+    customRender(<Day {...props} />, { components });
   });
   test('it should render the custom component instead', () => {
     expect(screen.getByText('Custom DayContent')).toBeInTheDocument();

package/src/components/Day/Day.tsx

@@ -21,7 +21,7 @@ export function Day(props: DayProps): JSX.Element {
   const dayRender = useDayRender(props.date, props.displayMonth, buttonRef);
 
   if (dayRender.isHidden) {
-    return <></>;
+    return <div role="gridcell"></div>;
   }
   if (!dayRender.isButton) {
     return <div {...dayRender.divProps} />;

package/src/components/DayContent/DayContent.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import es from 'date-fns/locale/es';
+import { es } from 'date-fns/locale';
 import { DayPickerProps } from 'DayPicker';
 
 import { customRender } from 'test/render';

package/src/components/Footer/Footer.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { getTableFooter, queryTableFooter } from 'test/po';
 import { customRender } from 'test/render';
+import { getTableFooter, queryTableFooter } from 'test/selectors';
 
 import { Footer } from './Footer';
 

package/src/components/HeadRow/HeadRow.test.tsx

@@ -1,16 +1,11 @@
 import React from 'react';
 
-import { RenderResult, screen } from '@testing-library/react';
+import { RenderResult } from '@testing-library/react';
 import { DayPickerProps } from 'DayPicker';
 
 import { customRender } from 'test/render';
 
-import { defaultClassNames } from 'contexts/DayPicker/defaultClassNames';
-import { formatWeekdayName } from 'contexts/DayPicker/formatters';
-import { labelWeekday } from 'contexts/DayPicker/labels';
-
 import { HeadRow } from './HeadRow';
-import { getWeekdays } from './utils/getWeekdays';
 
 let container: HTMLElement;
 let view: RenderResult;
@@ -65,20 +60,6 @@ describe('when rendered', () => {
       expect(el).toHaveClass(dayPickerProps.classNames.head_cell);
     });
   });
-  test('the formatted weekday name should be ARIA-hidden', () => {
-    const weekdays = getWeekdays();
-    weekdays.forEach((weekday) => {
-      const text = formatWeekdayName(weekday);
-      expect(screen.getByText(text)).toHaveAttribute('aria-hidden', 'true');
-    });
-  });
-  test('the label should not be visible', () => {
-    const weekdays = getWeekdays();
-    weekdays.forEach((weekday) => {
-      const text = labelWeekday(weekday);
-      expect(screen.getByText(text)).toHaveClass(defaultClassNames.vhidden);
-    });
-  });
 });
 
 describe('when showing the week numbers', () => {

package/src/components/HeadRow/HeadRow.tsx

@@ -36,13 +36,9 @@ export function HeadRow(): JSX.Element {
           scope="col"
           className={classNames.head_cell}
           style={styles.head_cell}
+          aria-label={labelWeekday(weekday, { locale })}
         >
-          <span aria-hidden={true}>
-            {formatWeekdayName(weekday, { locale })}
-          </span>
-          <span className={classNames.vhidden}>
-            {labelWeekday(weekday, { locale })}
-          </span>
+          {formatWeekdayName(weekday, { locale })}
         </th>
       ))}
     </tr>

package/src/components/HeadRow/utils/getWeekdays.test.ts

@@ -1,4 +1,4 @@
-import es from 'date-fns/locale/es';
+import { es } from 'date-fns/locale';
 
 import { freezeBeforeAll } from 'test/utils';
 

package/src/components/HeadRow/utils/getWeekdays.ts

@@ -1,8 +1,4 @@
-import addDays from 'date-fns/addDays';
-import startOfISOWeek from 'date-fns/startOfISOWeek';
-import startOfWeek from 'date-fns/startOfWeek';
-
-import type { Locale } from 'date-fns';
+import { addDays, Locale, startOfISOWeek, startOfWeek } from 'date-fns';
 
 /**
  * Generate a series of 7 days, starting from the week, to use for formatting

package/src/components/Month/Month.test.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 import { DayPickerProps } from 'DayPicker';
 
-import { getMonthCaption, getMonthGrid } from 'test/po';
 import { customRender } from 'test/render';
+import { getMonthCaption, getMonthGrid } from 'test/selectors';
 
 import { CustomComponents } from 'types/DayPickerBase';
 

package/src/components/MonthsDropdown/MonthsDropdown.test.tsx

@@ -18,6 +18,7 @@ let root: HTMLDivElement;
 let options: HTMLCollectionOf<HTMLOptionElement> | undefined;
 let select: HTMLSelectElement | null;
 
+const user = userEvent.setup();
 function setup(props: MonthsDropdownProps, dayPickerProps?: DayPickerProps) {
   const view = customRender(<MonthsDropdown {...props} />, dayPickerProps);
   root = view.container.firstChild as HTMLDivElement;
@@ -98,8 +99,8 @@ describe('when "fromDate" and "toDate" are not in the same year', () => {
   });
 
   describe('when the dropdown changes', () => {
-    beforeEach(() => {
-      if (select) userEvent.selectOptions(select, 'February');
+    beforeEach(async () => {
+      if (select) await user.selectOptions(select, 'February');
     });
     test('should fire the "onChange" event handler', () => {
       const expectedMonth = new Date(2015, 1, 1);

package/src/components/MonthsDropdown/MonthsDropdown.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 
-import isSameYear from 'date-fns/isSameYear';
-import setMonth from 'date-fns/setMonth';
-import startOfMonth from 'date-fns/startOfMonth';
+import { isSameYear, setMonth, startOfMonth } from 'date-fns';
 
 import { Dropdown } from 'components/Dropdown';
 import { useDayPicker } from 'contexts/DayPicker';

package/src/components/Navigation/Navigation.test.tsx

@@ -3,13 +3,14 @@ import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { DayPickerProps } from 'DayPicker';
 
-import { getNextButton, getPrevButton } from 'test/po';
 import { customRender } from 'test/render';
+import { getNextButton, getPrevButton } from 'test/selectors';
 
 import { Navigation, NavigationProps } from './Navigation';
 
 let root: HTMLElement;
 
+const user = userEvent.setup();
 function setup(props: NavigationProps, dayPickerProps?: DayPickerProps) {
   const view = customRender(<Navigation {...props} />, dayPickerProps);
   root = view.container.firstChild as HTMLElement;
@@ -62,16 +63,16 @@ describe('when rendered', () => {
   test('the next button should be named "next-month"', () => {
     expect(getNextButton()).toHaveAttribute('name', 'next-month');
   });
-  beforeEach(() => {
-    userEvent.click(getPrevButton());
+  beforeEach(async () => {
+    await user.click(getPrevButton());
   });
   test('should call "onPreviousClick"', () => {
     expect(props.onPreviousClick).toHaveBeenCalled();
   });
 
   describe('when clicking the next button', () => {
-    beforeEach(() => {
-      userEvent.click(getNextButton());
+    beforeEach(async () => {
+      await user.click(getNextButton());
     });
     test('should call "onNextClick"', () => {
       expect(props.onNextClick).toHaveBeenCalled();
@@ -93,16 +94,16 @@ describe('when in right-to-left direction', () => {
   });
 
   describe('when clicking the previous button', () => {
-    beforeEach(() => {
-      userEvent.click(getPrevButton());
+    beforeEach(async () => {
+      await user.click(getPrevButton());
     });
     test('should call "onPreviousClick"', () => {
       expect(props.onPreviousClick).toHaveBeenCalled();
     });
   });
   describe('when clicking the next button', () => {
-    beforeEach(() => {
-      userEvent.click(getNextButton());
+    beforeEach(async () => {
+      await user.click(getNextButton());
     });
     test('should call "onNextClick"', () => {
       expect(props.onNextClick).toHaveBeenCalled();

package/src/components/Root/Root.test.tsx

@@ -4,9 +4,8 @@ import { RenderResult } from '@testing-library/react';
 import { addDays } from 'date-fns';
 import { DayPickerProps } from 'DayPicker';
 
-import { focusDay } from 'test/actions';
-import { getDayButton, queryMonthGrids } from 'test/po';
 import { customRender } from 'test/render';
+import { getDayButton, queryMonthGrids } from 'test/selectors';
 import { freezeBeforeAll } from 'test/utils';
 
 import { defaultClassNames } from 'contexts/DayPicker/defaultClassNames';
@@ -103,7 +102,7 @@ describe('when "initialFocus" is set', () => {
     });
     describe('when a new day is focused', () => {
       beforeEach(() => {
-        focusDay(addDays(today, 1));
+        getDayButton(addDays(today, 1)).focus();
       });
       describe('and the calendar is rerendered', () => {
         test.todo('should focus the new day');

package/src/components/Row/Row.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import getUnixTime from 'date-fns/getUnixTime';
+import { getUnixTime } from 'date-fns';
 
 import { Day } from 'components/Day';
 import { WeekNumber } from 'components/WeekNumber';
@@ -42,6 +42,7 @@ export function Row(props: RowProps): JSX.Element {
           className={classNames.cell}
           style={styles.cell}
           key={getUnixTime(date)}
+          role="presentation"
         >
           <DayComponent displayMonth={props.displayMonth} date={date} />
         </td>

package/src/components/Table/Table.tsx

@@ -48,7 +48,7 @@ export function Table(props: TableProps): JSX.Element {
       aria-labelledby={props['aria-labelledby']}
     >
       {!hideHead && <HeadComponent />}
-      <tbody className={classNames.tbody} style={styles.tbody}>
+      <tbody className={classNames.tbody} style={styles.tbody} role="rowgroup">
         {weeks.map((week) => (
           <RowComponent
             displayMonth={props.displayMonth}