react-day-picker 8.1.2 → 8.2.0

package/src/components/WeekNumber/WeekNumber.test.tsx

@@ -27,12 +27,19 @@ describe('without "onWeekNumberClick" prop', () => {
 
 describe('with "onWeekNumberClick" prop', () => {
   const dayPickerProps: DayPickerProps = { onWeekNumberClick: jest.fn() };
-  const { container } = setup(props, dayPickerProps);
+  let container: HTMLElement;
+  beforeEach(() => {
+    container = setup(props, dayPickerProps).container;
+  });
   test('it should return a button element', () => {
+    expect(screen.getByRole('button')).toBeInTheDocument();
+    expect(container.firstChild).toHaveAttribute('name', 'week-number');
     expect(container.firstChild).toMatchSnapshot();
   });
   describe('when the button element is clicked', () => {
-    userEvent.click(screen.getByRole('button'));
+    beforeEach(async () => {
+      await userEvent.click(screen.getByRole('button'));
+    });
     test('should call onWeekNumberClick', () => {
       expect(dayPickerProps.onWeekNumberClick).toHaveBeenCalledWith(
         props.number,

package/src/components/WeekNumber/WeekNumber.tsx

@@ -47,6 +47,7 @@ export function WeekNumber(props: WeekNumberProps): JSX.Element {
 
   return (
     <Button
+      name="week-number"
       aria-label={label}
       className={classNames.weeknumber}
       style={styles.weeknumber}

package/src/components/WeekNumber/__snapshots__/WeekNumber.test.tsx.snap

@@ -1,6 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`with "onWeekNumberClick" prop it should return a button element 1`] = `null`;
+exports[`with "onWeekNumberClick" prop it should return a button element 1`] = `
+<button
+  aria-label="Week n. 10"
+  class="rdp-button_reset rdp-button rdp-weeknumber"
+  name="week-number"
+  type="button"
+>
+  10
+</button>
+`;
 
 exports[`without "onWeekNumberClick" prop it should return a span element 1`] = `
 <span

package/src/components/YearsDropdown/YearsDropdown.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { differenceInYears } from 'date-fns';
+import { addMonths, differenceInYears } from 'date-fns';
 import { DayPickerProps } from 'DayPicker';
 
 import { customRender } from 'test/render';
@@ -30,6 +30,16 @@ const props: YearsDropdownProps = {
   onChange: jest.fn()
 };
 
+describe('when fromDate and toDate are passed in', () => {
+  beforeEach(() => {
+    setup(props, { fromDate: new Date(), toDate: addMonths(new Date(), 1) });
+  });
+  test('should render the dropdown element', () => {
+    expect(root).toMatchSnapshot();
+    expect(select).toHaveAttribute('name', 'years');
+  });
+});
+
 describe('when "fromDate" is not set', () => {
   beforeEach(() => {
     setup(props, { fromDate: undefined });

package/src/components/YearsDropdown/YearsDropdown.tsx

@@ -59,6 +59,7 @@ export function YearsDropdown(props: YearsDropdownProps): JSX.Element {
 
   return (
     <DropdownComponent
+      name="years"
       aria-label={labelYearDropdown()}
       className={classNames.dropdown_year}
       style={styles.dropdown_year}

package/src/components/YearsDropdown/__snapshots__/YearsDropdown.test.tsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`when fromDate and toDate are passed in should render the dropdown element 1`] = `
+<div
+  class="rdp-dropdown_year"
+>
+  <span
+    class="rdp-vhidden"
+  >
+    Year: 
+  </span>
+  <select
+    aria-label="Year: "
+    class="rdp-dropdown"
+    name="years"
+  >
+    <option
+      value="2021"
+    >
+      2021
+    </option>
+  </select>
+  <div
+    aria-hidden="true"
+    class="rdp-caption_label"
+  >
+    2021
+    <svg
+      class="rdp-dropdown_icon"
+      data-testid="iconDropdown"
+      height="8px"
+      viewBox="0 0 120 120"
+      width="8px"
+    >
+      <path
+        d="M4.22182541,48.2218254 C8.44222828,44.0014225 15.2388494,43.9273804 19.5496459,47.9996989 L19.7781746,48.2218254 L60,88.443 L100.221825,48.2218254 C104.442228,44.0014225 111.238849,43.9273804 115.549646,47.9996989 L115.778175,48.2218254 C119.998577,52.4422283 120.07262,59.2388494 116.000301,63.5496459 L115.778175,63.7781746 L67.7781746,111.778175 C63.5577717,115.998577 56.7611506,116.07262 52.4503541,112.000301 L52.2218254,111.778175 L4.22182541,63.7781746 C-0.0739418023,59.4824074 -0.0739418023,52.5175926 4.22182541,48.2218254 Z"
+        fill="currentColor"
+        fill-rule="nonzero"
+      />
+    </svg>
+  </div>
+</div>
+`;

package/src/hooks/useDayEventHandlers/useDayEventHandlers.test.tsx

@@ -115,15 +115,18 @@ describe.each<'single' | 'multiple' | 'range'>(['single', 'multiple', 'range'])(
   'when calling "onClick" in "%s" selection mode',
   (mode) => {
     const activeModifiers: ActiveModifiers = {};
-    const dayPickerProps = { mode, onDayClick: jest.fn() };
+    const dayPickerProps = {
+      mode,
+      onDayClick: mockedContexts[mode].onDayClick
+    };
     const mouseEvent = {} as React.MouseEvent<HTMLButtonElement, MouseEvent>;
     const date = today;
     beforeEach(() => {
       setup(date, activeModifiers, dayPickerProps);
       renderResult.current.onClick?.(mouseEvent);
     });
-    test(`should have called "onDayClick" from the day picker props`, () => {
-      expect(dayPickerProps.onDayClick).toHaveBeenCalled();
+    test(`should have called "onDayClick" from the ${mode} context`, () => {
+      expect(dayPickerProps.onDayClick).toHaveBeenCalledTimes(1);
     });
   }
 );

package/src/hooks/useDayEventHandlers/useDayEventHandlers.tsx

@@ -94,8 +94,9 @@ export function useDayEventHandlers(
       multiple.onDayClick?.(date, activeModifiers, e);
     } else if (isDayPickerRange(dayPicker)) {
       range.onDayClick?.(date, activeModifiers, e);
+    } else {
+      dayPicker.onDayClick?.(date, activeModifiers, e);
     }
-    dayPicker.onDayClick?.(date, activeModifiers, e);
   };
 
   const onFocus: FocusEventHandler = (e) => {

package/src/hooks/useDayRender/useDayRender.tsx

@@ -75,7 +75,9 @@ 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
@@ -93,7 +95,8 @@ export function useDayRender(
   const divProps = {
     style,
     className,
-    children
+    children,
+    'aria-label': ariaLabel
   };
 
   const isFocusTarget = Boolean(
@@ -103,6 +106,7 @@ export function useDayRender(
     ...divProps,
     disabled: activeModifiers.disabled,
     ['aria-pressed']: activeModifiers.selected,
+    ['aria-label']: ariaLabel,
     tabIndex: isFocusTarget ? 0 : -1,
     ...eventHandlers
   };

package/src/hooks/useInput/useInput.ts

@@ -158,8 +158,8 @@ export function useInput(options: UseInputOptions = {}): UseInputValue {
     onMonthChange: handleMonthChange,
     selected: selectedDay,
     locale,
-    fromDate: options?.fromDate,
-    toDate: options?.toDate,
+    fromDate,
+    toDate,
     today
   };
 

package/src/index.ts

@@ -10,6 +10,7 @@ export * from 'components/DayContent';
 export * from 'components/Dropdown';
 export * from 'components/Footer';
 export * from 'components/Head';
+export * from 'components/HeadRow';
 export * from 'components/IconDropdown';
 export * from 'components/IconRight';
 export * from 'components/IconLeft';

package/src/style.css

@@ -5,7 +5,7 @@
   --rdp-accent-color-dark: #3003e1;
   --rdp-background-color-dark: #180270;
   --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */
-  --rdp-outline-selected: 2px solid rgba(0, 0, 0, 0.75); /* Outline border for focused _and_ selected elements */
+  --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */
 
   margin: 1em;
 }
@@ -38,7 +38,6 @@
   padding: 0;
   cursor: default;
   color: inherit;
-  outline: none;
   background: none;
   font: inherit;
 
@@ -46,6 +45,11 @@
   -webkit-appearance: none;
 }
 
+.rdp-button_reset:focus-visible {
+  /* Make sure to reset outline only when :focus-visible is supported */
+  outline: none;
+}
+
 .rdp-button {
   border: 2px solid transparent;
 }
@@ -58,11 +62,11 @@
   cursor: pointer;
 }
 
-.rdp-button:focus:not([disabled]),
+.rdp-button:focus-visible:not([disabled]),
 .rdp-button:active:not([disabled]) {
   color: inherit;
-  border: var(--rdp-outline);
   background-color: var(--rdp-background-color);
+  border: var(--rdp-outline);
 }
 
 .rdp-button:hover:not([disabled]) {
@@ -194,11 +198,11 @@
   color: unset;
 }
 
-.rdp-dropdown:focus:not([disabled]) + .rdp-caption_label,
+.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label,
 .rdp-dropdown:active:not([disabled]) + .rdp-caption_label {
+  background-color: var(--rdp-background-color);
   border: var(--rdp-outline);
   border-radius: 6px;
-  background-color: var(--rdp-background-color);
 }
 
 .rdp-dropdown_icon {
@@ -273,7 +277,10 @@
 }
 
 .rdp-day_selected:focus:not([disabled]) {
-  border: var(--rdp-outline-selected);
+  /* Since the background is the same use again the outline */
+  outline: var(--rdp-outline);
+  outline-offset: 2px;
+  z-index: 1;
 }
 
 .rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {

package/src/types/DayPickerBase.ts

@@ -175,15 +175,15 @@ export interface DayPickerBase {
   /**
    * Apply the `disabled` modifier to the matching days.
    */
-  disabled?: Matcher | Matcher[];
+  disabled?: Matcher | Matcher[] | undefined;
   /**
    * Apply the `hidden` modifier to the matching days. Will hide them from the
    * calendar.
    */
-  hidden?: Matcher | Matcher[];
+  hidden?: Matcher | Matcher[] | undefined;
 
   /** Apply the `selected` modifier to the matching days. */
-  selected?: Matcher | Matcher[];
+  selected?: Matcher | Matcher[] | undefined;
 
   /**
    * The today’s date. Default is the current date. This Date will get the
@@ -270,6 +270,8 @@ export interface CustomComponents {
   Footer?: () => JSX.Element | null;
   /** The component for the table’s head. */
   Head?: () => JSX.Element | null;
+  /** The component for the table’s head row. */
+  HeadRow?: () => JSX.Element | null;
   /** The component for the small icon in the drop-downs. */
   IconDropdown?: (props: StyledComponent) => JSX.Element | null;
   /** The arrow right icon (used for the Navigation buttons). */

package/src/types/DayPickerMultiple.ts

@@ -9,7 +9,7 @@ import { SelectMultipleEventHandler } from './EventHandlers';
 export interface DayPickerMultipleProps extends DayPickerBase {
   mode: 'multiple';
   /** The selected days. */
-  selected?: Date[];
+  selected?: Date[] | undefined;
   /** Event fired when a days added or removed to the selection. */
   onSelect?: SelectMultipleEventHandler;
   /** The minimum amount of days that can be selected. */

package/src/types/DayPickerRange.ts

@@ -10,7 +10,7 @@ import { DateRange } from './Matchers';
 export interface DayPickerRangeProps extends DayPickerBase {
   mode: 'range';
   /** The selected range of days. */
-  selected?: DateRange;
+  selected?: DateRange | undefined;
   /** Event fired when a range (or a part of the range) is selected. */
   onSelect?: SelectRangeEventHandler;
   /** The minimum amount of days that can be selected. */