react-day-picker 8.4.1 → 8.5.0

package/src/hooks/useDayRender/useDayRender.test.tsx

@@ -1,77 +1,65 @@
 import { createRef } from 'react';
 
-import { RenderResult } from '@testing-library/react-hooks';
 import { addDays, addMonths } from 'date-fns';
 import { DayPickerProps } from 'DayPicker';
 
-import { customRenderHook, CustomRenderHookContexts } from 'test/render';
+import { mockedContexts } from 'test/mockedContexts';
+import { renderDayPickerHook } from 'test/render';
 import { freezeBeforeAll } from 'test/utils';
 
 import { defaultClassNames } from 'contexts/DayPicker/defaultClassNames';
 import { FocusContextValue } from 'contexts/Focus';
+import { SelectMultipleContextValue } from 'contexts/SelectMultiple';
+import { SelectRangeContextValue } from 'contexts/SelectRange';
+import { SelectSingleContextValue } from 'contexts/SelectSingle';
 import { EventName } from 'hooks/useDayEventHandlers';
 
-import { DayRender } from './';
 import { useDayRender } from './useDayRender';
 
 const today = new Date(2022, 5, 13);
 
 freezeBeforeAll(today);
 
-let result: RenderResult<DayRender>;
-
-const mockedFocusContext: FocusContextValue = {
-  focus: jest.fn(),
-  focusedDay: undefined,
-  focusTarget: undefined,
-  blur: jest.fn(),
-  focusDayAfter: jest.fn(),
-  focusDayBefore: jest.fn(),
-  focusWeekBefore: jest.fn(),
-  focusWeekAfter: jest.fn(),
-  focusMonthBefore: jest.fn(),
-  focusMonthAfter: jest.fn(),
-  focusYearBefore: jest.fn(),
-  focusYearAfter: jest.fn(),
-  focusStartOfWeek: jest.fn(),
-  focusEndOfWeek: jest.fn()
-};
-
-function setup(
+function renderHook(
   date: Date,
   displayMonth: Date,
   dayPickerProps?: DayPickerProps,
-  contexts?: CustomRenderHookContexts
+  contexts?: {
+    single: SelectSingleContextValue;
+    multiple: SelectMultipleContextValue;
+    range: SelectRangeContextValue;
+    focus: FocusContextValue;
+  }
 ) {
   const buttonRef = createRef<HTMLButtonElement>();
-  const view = customRenderHook(
+  return renderDayPickerHook(
     () => useDayRender(date, displayMonth, buttonRef),
     dayPickerProps,
     contexts
   );
-  result = view.result;
 }
 
 describe('when rendering the today’s date', () => {
   const date = today;
   const displayMonth = date;
-  beforeEach(() => {
-    setup(date, displayMonth);
-  });
   test('the div should include the default class name', () => {
+    const result = renderHook(date, displayMonth);
     expect(result.current.divProps.className?.split(' ')).toContain(
       defaultClassNames.day
     );
   });
   test('the button should include the default class name', () => {
+    const result = renderHook(date, displayMonth);
     expect(result.current.buttonProps.className?.split(' ')).toContain(
       defaultClassNames.day
     );
   });
-  test('the button should not have "aria-pressed"', () => {
-    expect(result.current.buttonProps['aria-pressed']).toBeUndefined();
+  test('the button should not have "aria-selected"', () => {
+    const result = renderHook(date, displayMonth);
+    expect(result.current.buttonProps['aria-selected']).toBeUndefined();
   });
   test('the button should have 0 as "tabIndex"', () => {
+    const result = renderHook(date, displayMonth);
     expect(result.current.buttonProps.tabIndex).toBe(0);
   });
 
@@ -91,48 +79,42 @@ describe('when rendering the today’s date', () => {
   test.each(testEvents)(
     'the button should have the "%s" event handler',
     (eventName) => {
+      const result = renderHook(date, displayMonth);
       expect(result.current.buttonProps[eventName]).toBeDefined();
     }
   );
   test('should return the day active modifiers', () => {
+    const result = renderHook(date, displayMonth);
     expect(result.current.activeModifiers).toEqual({ today: true });
   });
 });
 
 describe('when not in selection mode', () => {
   const dayPickerProps = { mode: undefined };
-  beforeEach(() => {
-    setup(today, today, dayPickerProps);
-  });
   test('should not be a button', () => {
+    const result = renderHook(today, today, dayPickerProps);
     expect(result.current.isButton).toBe(false);
   });
 });
 describe('when "onDayClick" is not passed in', () => {
   const dayPickerProps = { onDayClick: undefined };
-  beforeEach(() => {
-    setup(today, today, dayPickerProps);
-  });
   test('should not be a button', () => {
+    const result = renderHook(today, today, dayPickerProps);
     expect(result.current.isButton).toBe(false);
   });
 });
 describe('when in selection mode', () => {
   const dayPickerProps: DayPickerProps = { mode: 'single' };
-  beforeEach(() => {
-    setup(today, today, dayPickerProps);
-  });
   test('should be a button', () => {
+    const result = renderHook(today, today, dayPickerProps);
     expect(result.current.isButton).toBe(true);
   });
 });
 
 describe('when "onDayClick" is passed in', () => {
   const dayPickerProps: DayPickerProps = { onDayClick: jest.fn() };
-  beforeEach(() => {
-    setup(today, today, dayPickerProps);
-  });
   test('should be a button', () => {
+    const result = renderHook(today, today, dayPickerProps);
     expect(result.current.isButton).toBe(true);
   });
 });
@@ -142,10 +124,8 @@ describe('when showing the outside days', () => {
   describe('when the day is outside', () => {
     const day = today;
     const displayMonth = addMonths(today, 1);
-    beforeEach(() => {
-      setup(day, displayMonth, dayPickerProps);
-    });
     test('should be hidden', () => {
+      const result = renderHook(day, displayMonth, dayPickerProps);
       expect(result.current.isHidden).toBe(true);
     });
   });
@@ -156,13 +136,12 @@ describe('when the day has the "hidden" modifier active', () => {
   const dayPickerProps: DayPickerProps = {
     modifiers: { hidden: date }
   };
-  beforeEach(() => {
-    setup(date, date, dayPickerProps);
-  });
   test('should have the hidden modifier active', () => {
+    const result = renderHook(date, date, dayPickerProps);
     expect(result.current.activeModifiers.hidden).toBe(true);
   });
   test('should be hidden', () => {
+    const result = renderHook(date, date, dayPickerProps);
     expect(result.current.isHidden).toBe(true);
   });
 });
@@ -173,15 +152,14 @@ describe('when "modifiersStyles" is passed in', () => {
     modifiers: { foo: date },
     modifiersStyles: { foo: { color: 'red' } }
   };
-  beforeEach(() => {
-    setup(date, date, dayPickerProps);
-  });
   test('the div props should include the modifiers style', () => {
+    const result = renderHook(date, date, dayPickerProps);
     expect(result.current.divProps.style).toStrictEqual(
       dayPickerProps.modifiersStyles.foo
     );
   });
   test('the button props should include the modifiers style', () => {
+    const result = renderHook(date, date, dayPickerProps);
     expect(result.current.buttonProps.style).toStrictEqual(
       dayPickerProps.modifiersStyles.foo
     );
@@ -192,15 +170,14 @@ describe('when "styles.day" is passed in', () => {
   const dayPickerProps = {
     styles: { day: { color: 'red' } }
   };
-  beforeEach(() => {
-    setup(date, date, dayPickerProps);
-  });
   test('the div props should include the style', () => {
+    const result = renderHook(date, date, dayPickerProps);
     expect(result.current.divProps.style).toStrictEqual(
       dayPickerProps.styles.day
     );
   });
   test('the button props should include the style', () => {
+    const result = renderHook(date, date, dayPickerProps);
     expect(result.current.buttonProps.style).toStrictEqual(
       dayPickerProps.styles.day
     );
@@ -213,9 +190,7 @@ describe('when "modifiersClassNames" is passed in', () => {
     modifiers: { foo: date },
     modifiersClassNames: { foo: 'bar' }
   };
-  beforeEach(() => {
-    setup(date, date, dayPickerProps);
-  });
+  const result = renderHook(date, date, dayPickerProps);
   test('the div props should include the modifiers classNames', () => {
     expect(result.current.divProps.className).toContain(
       dayPickerProps.modifiersClassNames.foo
@@ -233,9 +208,7 @@ describe('when "classNames.day" is passed in', () => {
   const dayPickerProps = {
     classNames: { day: 'foo' }
   };
-  beforeEach(() => {
-    setup(date, date, dayPickerProps);
-  });
+  const result = renderHook(date, date, dayPickerProps);
   test('the div props should include the class name', () => {
     expect(result.current.divProps.className).toContain(
       dayPickerProps.classNames.day
@@ -252,12 +225,15 @@ describe('when the day is not target of focus', () => {
   const yesterday = addDays(today, -1);
   const tomorrow = addDays(today, 1);
   const focusContext: FocusContextValue = {
-    ...mockedFocusContext,
+    ...mockedContexts.focus,
     focusTarget: yesterday
   };
-  beforeEach(() => {
-    setup(tomorrow, tomorrow, {}, { focus: focusContext });
-  });
+  const result = renderHook(
+    tomorrow,
+    tomorrow,
+    {},
+    { ...mockedContexts, focus: focusContext }
+  );
   test('the button should have tabIndex -1', () => {
     expect(result.current.buttonProps.tabIndex).toBe(-1);
   });
@@ -266,12 +242,15 @@ describe('when the day is not target of focus', () => {
 describe('when the day is target of focus', () => {
   const date = today;
   const focusContext: FocusContextValue = {
-    ...mockedFocusContext,
+    ...mockedContexts.focus,
     focusTarget: date
   };
-  beforeEach(() => {
-    setup(date, date, {}, { focus: focusContext });
-  });
+  const result = renderHook(
+    date,
+    date,
+    {},
+    { ...mockedContexts, focus: focusContext }
+  );
   test('the button should have tabIndex 0', () => {
     expect(result.current.buttonProps.tabIndex).toBe(0);
   });
@@ -280,17 +259,15 @@ describe('when the day is target of focus', () => {
 describe('when the day is target of focus but outside', () => {
   const date = today;
   const focusContext: FocusContextValue = {
-    ...mockedFocusContext,
+    ...mockedContexts.focus,
     focusTarget: date
   };
-  beforeEach(() => {
-    setup(
-      date,
-      date,
-      { modifiers: { outside: date } },
-      { focus: focusContext }
-    );
-  });
+  const result = renderHook(
+    date,
+    date,
+    { modifiers: { outside: date } },
+    { ...mockedContexts, focus: focusContext }
+  );
   test('the button should have tabIndex -1', () => {
     expect(result.current.buttonProps.tabIndex).toBe(-1);
   });
@@ -299,12 +276,16 @@ describe('when the day is target of focus but outside', () => {
 describe('when the day is focused', () => {
   const date = today;
   const focusContext: FocusContextValue = {
-    ...mockedFocusContext,
+    ...mockedContexts.focus,
     focusedDay: date
   };
-  beforeEach(() => {
-    setup(date, date, {}, { focus: focusContext });
-  });
+  const result = renderHook(
+    date,
+    date,
+    {},
+    { ...mockedContexts, focus: focusContext }
+  );
+
   test('the button should have tabIndex 0', () => {
     expect(result.current.buttonProps.tabIndex).toBe(0);
   });
@@ -312,12 +293,8 @@ describe('when the day is focused', () => {
 
 describe('when the day is disabled', () => {
   const date = today;
-  const dayPickerProps = {
-    disabled: date
-  };
-  beforeEach(() => {
-    setup(date, date, dayPickerProps);
-  });
+  const dayPickerProps = { disabled: date };
+  const result = renderHook(date, date, dayPickerProps);
   test('the button should be disabled', () => {
     expect(result.current.buttonProps.disabled).toBe(true);
   });
@@ -325,13 +302,9 @@ describe('when the day is disabled', () => {
 
 describe('when the day is selected', () => {
   const date = today;
-  const dayPickerProps = {
-    selected: date
-  };
-  beforeEach(() => {
-    setup(date, date, dayPickerProps);
-  });
+  const dayPickerProps = { selected: date };
+  const result = renderHook(date, date, dayPickerProps);
   test('the button should have "aria-pressed"', () => {
-    expect(result.current.buttonProps['aria-pressed']).toBe(true);
+    expect(result.current.buttonProps['aria-selected']).toBe(true);
   });
 });

package/src/hooks/useDayRender/useDayRender.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 
-import isSameDay from 'date-fns/isSameDay';
+import { isSameDay } from 'date-fns';
 
 import { ButtonProps } from 'components/Button';
 import { DayContent } from 'components/DayContent';
@@ -27,7 +27,7 @@ export type DayRender = {
   activeModifiers: ActiveModifiers;
   /** The props to apply to the button element (when `isButton` is true). */
   buttonProps: StyledComponent &
-    Pick<ButtonProps, 'disabled' | 'aria-pressed' | 'tabIndex'> &
+    Pick<ButtonProps, 'disabled' | 'aria-selected' | 'tabIndex'> &
     DayEventHandlers;
   /** The props to apply to the div element (when `isButton` is false). */
   divProps: StyledComponent;
@@ -75,9 +75,6 @@ export function useDayRender(
 
   const className = getDayClassNames(dayPicker, activeModifiers).join(' ');
   const style = getDayStyle(dayPicker, activeModifiers);
-  const ariaLabel = dayPicker.labels.labelDay(day, activeModifiers, {
-    locale: dayPicker.locale
-  });
   const isHidden = Boolean(
     (activeModifiers.outside && !dayPicker.showOutsideDays) ||
       activeModifiers.hidden
@@ -96,7 +93,7 @@ export function useDayRender(
     style,
     className,
     children,
-    'aria-label': ariaLabel
+    role: 'gridcell'
   };
 
   const isFocusTarget =
@@ -110,8 +107,8 @@ export function useDayRender(
   const buttonProps = {
     ...divProps,
     disabled: activeModifiers.disabled,
-    ['aria-pressed']: activeModifiers.selected,
-    ['aria-label']: ariaLabel,
+    role: 'gridcell',
+    ['aria-selected']: activeModifiers.selected,
     tabIndex: isFocused || isFocusTarget ? 0 : -1,
     ...eventHandlers
   };

package/src/hooks/useInput/useInput.ts

@@ -1,9 +1,7 @@
 import React, { useState } from 'react';
 
-import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
-import _format from 'date-fns/format';
-import enUS from 'date-fns/locale/en-US';
-import parse from 'date-fns/parse';
+import { differenceInCalendarDays, format as _format, parse } from 'date-fns';
+import { enUS } from 'date-fns/locale';
 
 import { parseFromToProps } from 'contexts/DayPicker/utils';
 import { DayPickerBase } from 'types/DayPickerBase';

package/src/hooks/useSelectedDays/useSelectedDays.test.ts

@@ -1,72 +1,42 @@
-import { RenderResult } from '@testing-library/react-hooks';
 import { DayPickerProps } from 'DayPicker';
 
-import { customRenderHook } from 'test/render';
+import { mockedContexts } from 'test/mockedContexts';
+import { renderDayPickerHook } from 'test/render';
+import { freezeBeforeAll } from 'test/utils';
 
-import { SelectMultipleContextValue } from 'contexts/SelectMultiple';
-import { SelectRangeContextValue } from 'contexts/SelectRange';
-import { SelectSingleContextValue } from 'contexts/SelectSingle';
-
-import { SelectedDays, useSelectedDays } from './useSelectedDays';
+import { useSelectedDays } from './useSelectedDays';
 
 const today = new Date(2021, 11, 8);
+freezeBeforeAll(today);
 
-const single: SelectSingleContextValue = {
-  selected: today
-};
-
-const multiple: SelectMultipleContextValue = {
-  selected: [today],
-  modifiers: { disabled: [] }
-};
-
-const range: SelectRangeContextValue = {
-  selected: undefined,
-  modifiers: {
-    disabled: [],
-    range_start: [],
-    range_end: [],
-    range_middle: []
-  }
-};
-const selectionContext = { single, multiple, range };
-
-let renderResult: RenderResult<SelectedDays>;
-function setup(dayPickerProps: DayPickerProps) {
-  const view = customRenderHook(
-    useSelectedDays,
+function renderHook(dayPickerProps: DayPickerProps) {
+  return renderDayPickerHook(
+    () => useSelectedDays(),
     dayPickerProps,
-    selectionContext
+    mockedContexts
   );
-  renderResult = view.result;
 }
 
 describe('when in single selection mode', () => {
   const mode = 'single';
-  beforeEach(() => {
-    setup({ mode });
-  });
   test('should return the selection from the single context', () => {
-    expect(renderResult.current).toBe(single.selected);
+    const result = renderHook({ mode, selected: today });
+    expect(result.current).toBe(mockedContexts.single.selected);
   });
 });
 
 describe('when in multiple selection mode', () => {
   const mode = 'multiple';
-  beforeEach(() => {
-    setup({ mode });
-  });
   test('should return the selection from the multiple context', () => {
-    expect(renderResult.current).toBe(multiple.selected);
+    const result = renderHook({ mode });
+    expect(result.current).toBe(mockedContexts.multiple.selected);
   });
 });
 
 describe('when in range selection mode', () => {
   const mode = 'range';
-  beforeEach(() => {
-    setup({ mode });
-  });
   test('should return the selection from the range context', () => {
-    expect(renderResult.current).toBe(range.selected);
+    const result = renderHook({ mode });
+    expect(result.current).toBe(mockedContexts.range.selected);
   });
 });

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from './DayPicker';
+import './style.css';
 
 export * from 'components/Button';
 export * from 'components/Caption';

package/src/style.css

@@ -218,7 +218,6 @@
 
 .rdp-head_cell {
   vertical-align: middle;
-  text-transform: uppercase;
   font-size: 0.75em;
   font-weight: 700;
   text-align: center;

package/src/style.css.d.ts

@@ -1,38 +1,39 @@
 declare const styles: {
-  readonly rdp: string;
-  readonly 'rdp-vhidden': string;
-  readonly 'rdp-button_reset': string;
-  readonly 'rdp-button': string;
-  readonly 'rdp-months': string;
-  readonly 'rdp-month': string;
-  readonly 'rdp-table': string;
-  readonly 'rdp-with_weeknumber': string;
-  readonly 'rdp-caption': string;
-  readonly 'rdp-multiple_months': string;
-  readonly 'rdp-caption_dropdowns': string;
-  readonly 'rdp-caption_label': string;
-  readonly 'rdp-nav': string;
-  readonly 'rdp-caption_start': string;
-  readonly 'rdp-caption_end': string;
-  readonly 'rdp-nav_button': string;
-  readonly 'rdp-dropdown_year': string;
-  readonly 'rdp-dropdown_month': string;
-  readonly 'rdp-dropdown': string;
-  readonly 'rdp-dropdown_icon': string;
-  readonly 'rdp-head': string;
-  readonly 'rdp-head_row': string;
-  readonly 'rdp-row': string;
-  readonly 'rdp-head_cell': string;
-  readonly 'rdp-tbody': string;
-  readonly 'rdp-tfoot': string;
-  readonly 'rdp-cell': string;
-  readonly 'rdp-weeknumber': string;
-  readonly 'rdp-day': string;
-  readonly 'rdp-day_today': string;
-  readonly 'rdp-day_outside': string;
-  readonly 'rdp-day_selected': string;
-  readonly 'rdp-day_range_start': string;
-  readonly 'rdp-day_range_end': string;
-  readonly 'rdp-day_range_middle': string;
+  rdp: string;
+  'rdp-vhidden': string;
+  'rdp-button_reset': string;
+  'rdp-button': string;
+  'rdp-day_selected': string;
+  'rdp-months': string;
+  'rdp-month': string;
+  'rdp-table': string;
+  'rdp-with_weeknumber': string;
+  'rdp-caption': string;
+  'rdp-multiple_months': string;
+  'rdp-caption_dropdowns': string;
+  'rdp-caption_label': string;
+  'rdp-nav': string;
+  'rdp-caption_start': string;
+  'rdp-caption_end': string;
+  'rdp-nav_button': string;
+  'rdp-dropdown_year': string;
+  'rdp-dropdown_month': string;
+  'rdp-dropdown': string;
+  'rdp-dropdown_icon': string;
+  'rdp-head': string;
+  'rdp-head_row': string;
+  'rdp-row': string;
+  'rdp-head_cell': string;
+  'rdp-tbody': string;
+  'rdp-tfoot': string;
+  'rdp-cell': string;
+  'rdp-weeknumber': string;
+  'rdp-day': string;
+  'rdp-day_today': string;
+  'rdp-day_outside': string;
+  'rdp-day_range_start': string;
+  'rdp-day_range_end': string;
+  'rdp-day_range_middle': string;
 };
-export = styles;
+
+export default styles;

package/src/types/Labels.ts

@@ -8,6 +8,7 @@ export type Labels = {
   labelYearDropdown: () => string;
   labelNext: NavButtonLabel;
   labelPrevious: NavButtonLabel;
+  /** @deprecated This label is not used anymore and this function will be removed in the future. */
   labelDay: DayLabel;
   labelWeekday: WeekdayLabel;
   labelWeekNumber: WeekNumberLabel;