react-day-picker 8.3.0 → 8.3.1

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

@@ -960,30 +960,48 @@ exports[`when using custom components should render correctly 1`] = `
   class="rdp-table"
   role="grid"
 >
-  <div>
-    CustomHead
-  </div>
+  <thead>
+    <tr>
+      <td>
+        CustomHead
+      </td>
+    </tr>
+  </thead>
   <tbody
     class="rdp-tbody"
   >
-    <div>
-      CustomRow
-    </div>
-    <div>
-      CustomRow
-    </div>
-    <div>
-      CustomRow
-    </div>
-    <div>
-      CustomRow
-    </div>
-    <div>
-      CustomRow
-    </div>
+    <tr>
+      <td>
+        CustomRow
+      </td>
+    </tr>
+    <tr>
+      <td>
+        CustomRow
+      </td>
+    </tr>
+    <tr>
+      <td>
+        CustomRow
+      </td>
+    </tr>
+    <tr>
+      <td>
+        CustomRow
+      </td>
+    </tr>
+    <tr>
+      <td>
+        CustomRow
+      </td>
+    </tr>
   </tbody>
-  <div>
-    CustomFooter
-  </div>
+  <tfoot>
+    <tr>
+      <td>
+        CustomFooter
+      </td>
+    </tr>
+  </tfoot>
 </table>
 `;

package/src/components/YearsDropdown/YearsDropdown.tsx

@@ -4,6 +4,7 @@ import setYear from 'date-fns/setYear';
 import startOfMonth from 'date-fns/startOfMonth';
 import startOfYear from 'date-fns/startOfYear';
 
+import { Dropdown } from 'components/Dropdown';
 import { useDayPicker } from 'contexts/DayPicker';
 import { MonthChangeEventHandler } from 'types/EventHandlers';
 
@@ -29,7 +30,7 @@ export function YearsDropdown(props: YearsDropdownProps): JSX.Element {
     locale,
     styles,
     classNames,
-    components: { Dropdown },
+    components,
     formatters: { formatYearCaption },
     labels: { labelYearDropdown }
   } = useDayPicker();
@@ -54,8 +55,10 @@ export function YearsDropdown(props: YearsDropdownProps): JSX.Element {
     props.onChange(newMonth);
   };
 
+  const DropdownComponent = components?.Dropdown ?? Dropdown;
+
   return (
-    <Dropdown
+    <DropdownComponent
       name="years"
       aria-label={labelYearDropdown()}
       className={classNames.dropdown_year}
@@ -69,6 +72,6 @@ export function YearsDropdown(props: YearsDropdownProps): JSX.Element {
           {formatYearCaption(year, { locale })}
         </option>
       ))}
-    </Dropdown>
+    </DropdownComponent>
   );
 }

package/src/contexts/DayPicker/DayPickerContext.tsx

@@ -3,11 +3,7 @@ import React, { createContext, ReactNode, useContext } from 'react';
 import { DayPickerProps } from 'DayPicker';
 
 import { CaptionLayout } from 'components/Caption';
-import {
-  Components,
-  DayPickerBase,
-  DaySelectionMode
-} from 'types/DayPickerBase';
+import { DayPickerBase, DaySelectionMode } from 'types/DayPickerBase';
 import {
   DayPickerMultipleProps,
   isDayPickerMultiple
@@ -39,7 +35,6 @@ export interface DayPickerContextValue extends DayPickerBase {
   selected?: Matcher | Matcher[];
 
   captionLayout: CaptionLayout;
-  components: Components;
   classNames: Required<ClassNames>;
   formatters: Formatters;
   labels: Labels;
@@ -104,7 +99,6 @@ export function DayPickerProvider(props: DayPickerProviderProps): JSX.Element {
       ...initialProps.classNames
     },
     components: {
-      ...defaultContextValues.components,
       ...initialProps.components
     },
     formatters: {

package/src/contexts/DayPicker/defaultContextValues.ts

@@ -1,20 +1,7 @@
 import enUS from 'date-fns/locale/en-US';
 
-import { Caption, CaptionLayout } from 'components/Caption';
-import { CaptionLabel } from 'components/CaptionLabel';
-import { Day } from 'components/Day';
-import { DayContent } from 'components/DayContent';
-import { Dropdown } from 'components/Dropdown';
-import { Footer } from 'components/Footer';
-import { Head } from 'components/Head';
-import { HeadRow } from 'components/HeadRow';
-import { IconDropdown } from 'components/IconDropdown';
-import { IconLeft } from 'components/IconLeft';
-import { IconRight } from 'components/IconRight';
-import { Row } from 'components/Row';
-import { WeekNumber } from 'components/WeekNumber';
+import { CaptionLayout } from 'components/Caption';
 import { DayPickerContextValue } from 'contexts/DayPicker';
-import { Components } from 'types/DayPickerBase';
 
 import { defaultClassNames } from './defaultClassNames';
 import * as formatters from './formatters';
@@ -23,7 +10,6 @@ import * as labels from './labels';
 export type DefaultContextProps =
   | 'captionLayout'
   | 'classNames'
-  | 'components'
   | 'formatters'
   | 'locale'
   | 'labels'
@@ -52,26 +38,9 @@ export function getDefaultContextValues(): DefaultContextValues {
   const styles = {};
   const today = new Date();
 
-  const components: Components = {
-    Caption,
-    CaptionLabel,
-    Day,
-    DayContent,
-    Dropdown,
-    Footer,
-    Head,
-    HeadRow,
-    IconDropdown,
-    IconRight,
-    IconLeft,
-    Row,
-    WeekNumber
-  };
-
   return {
     captionLayout,
     classNames,
-    components,
     formatters,
     labels,
     locale,

package/src/contexts/Modifiers/utils/isMatch.test.ts

@@ -1,4 +1,4 @@
-import { addDays } from 'date-fns';
+import { addDays, subDays } from 'date-fns';
 
 import {
   DateAfter,
@@ -56,13 +56,32 @@ describe('when matching the day of week', () => {
   });
 });
 
-describe('when matching date interval', () => {
+describe('when matching date interval (closed)', () => {
   const matcher: DateInterval = {
-    after: addDays(testDay, -1),
-    before: addDays(testDay, 1)
+    before: addDays(testDay, 5),
+    after: subDays(testDay, 3)
   };
   const result = isMatch(testDay, [matcher]);
-  test('should return true', () => {
+  test('should return true for the included day', () => {
+    expect(result).toBe(true);
+  });
+});
+
+describe('when matching date interval (open)', () => {
+  const matcher: DateInterval = {
+    before: subDays(testDay, 4),
+    after: addDays(testDay, 5)
+  };
+  test('should return false', () => {
+    const result = isMatch(testDay, [matcher]);
+    expect(result).toBe(false);
+  });
+  test('should return true for the days before', () => {
+    const result = isMatch(subDays(testDay, 8), [matcher]);
+    expect(result).toBe(true);
+  });
+  test('should return true for the days after', () => {
+    const result = isMatch(addDays(testDay, 8), [matcher]);
     expect(result).toBe(true);
   });
 });

package/src/contexts/Modifiers/utils/isMatch.ts

@@ -1,3 +1,4 @@
+import { isAfter } from 'date-fns';
 import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
 import isDate from 'date-fns/isDate';
 import isSameDay from 'date-fns/isSameDay';
@@ -58,9 +59,16 @@ export function isMatch(day: Date, matchers: Matcher[]): boolean {
       return matcher.dayOfWeek.includes(day.getDay());
     }
     if (isDateInterval(matcher)) {
-      const isBefore = differenceInCalendarDays(matcher.before, day) > 0;
-      const isAfter = differenceInCalendarDays(day, matcher.after) > 0;
-      return isBefore && isAfter;
+      const diffBefore = differenceInCalendarDays(matcher.before, day);
+      const diffAfter = differenceInCalendarDays(matcher.after, day);
+      const isDayBefore = diffBefore > 0;
+      const isDayAfter = diffAfter < 0;
+      const isClosedInterval = isAfter(matcher.before, matcher.after);
+      if (isClosedInterval) {
+        return isDayAfter && isDayBefore;
+      } else {
+        return isDayBefore || isDayAfter;
+      }
     }
     if (isDateAfterType(matcher)) {
       return differenceInCalendarDays(day, matcher.after) > 0;

package/src/contexts/Navigation/NavigationContext.test.ts

@@ -1,4 +1,4 @@
-import { RenderResult } from '@testing-library/react-hooks';
+import { act, RenderResult } from '@testing-library/react-hooks';
 import { addMonths, startOfMonth, subMonths } from 'date-fns';
 
 import { customRenderHook } from 'test/render/customRenderHook';
@@ -39,7 +39,9 @@ describe('when rendered', () => {
   describe('when goToMonth is called', () => {
     const newMonth = addMonths(todaysMonth, 10);
     beforeEach(() => {
-      result.current.goToMonth(newMonth);
+      act(() => {
+        result.current.goToMonth(newMonth);
+      });
     });
     test('should go to the specified month', () => {
       expect(result.current.currentMonth).toEqual(newMonth);
@@ -59,7 +61,7 @@ describe('when rendered', () => {
     const onMonthChange = jest.fn();
     beforeEach(() => {
       setup({ onMonthChange });
-      result.current.goToDate(newDate);
+      act(() => result.current.goToDate(newDate));
     });
     test('should go to the specified month', () => {
       const date = startOfMonth(newDate);

package/src/contexts/Navigation/useNavigationState.test.ts

@@ -1,3 +1,4 @@
+import { act } from '@testing-library/react-hooks';
 import { addMonths, startOfMonth } from 'date-fns';
 
 import { customRenderHook } from 'test/render/customRenderHook';
@@ -23,7 +24,9 @@ describe('when goToMonth is called', () => {
     const onMonthChange = jest.fn();
     const result = setup({ onMonthChange });
     const month = addMonths(today, 2);
-    result.current[1](month);
+    act(() => {
+      result.current[1](month);
+    });
     expect(result.current[0]).toEqual(startOfMonth(month));
     expect(onMonthChange).toBeCalledWith(startOfMonth(month));
   });

package/src/hooks/useDayRender/useDayRender.tsx

@@ -3,6 +3,7 @@ import React, { useEffect } from 'react';
 import isSameDay from 'date-fns/isSameDay';
 
 import { ButtonProps } from 'components/Button';
+import { DayContent } from 'components/DayContent';
 import { useDayPicker } from 'contexts/DayPicker';
 import { useFocusContext } from 'contexts/Focus';
 import { useActiveModifiers } from 'hooks/useActiveModifiers';
@@ -47,10 +48,7 @@ export function useDayRender(
   /** A ref to the button element that will be target of focus when rendered (if required). */
   buttonRef: React.RefObject<HTMLButtonElement>
 ): DayRender {
-  const {
-    components: { DayContent },
-    ...dayPicker
-  } = useDayPicker();
+  const dayPicker = useDayPicker();
   const focusContext = useFocusContext();
   const activeModifiers = useActiveModifiers(day, displayMonth);
   const eventHandlers = useDayEventHandlers(day, activeModifiers);
@@ -85,8 +83,9 @@ export function useDayRender(
       activeModifiers.hidden
   );
 
+  const DayContentComponent = dayPicker.components?.DayContent ?? DayContent;
   const children = (
-    <DayContent
+    <DayContentComponent
       date={day}
       displayMonth={displayMonth}
       activeModifiers={activeModifiers}

package/src/types/DayPickerBase.ts

@@ -305,8 +305,3 @@ export interface CustomComponents {
   /** The component for the week number in the table rows. */
   WeekNumber?: (props: WeekNumberProps) => JSX.Element | null;
 }
-
-/**
- * All the components in use by DayPicker that can be customized via the {@link components} prop.
- */
-export type Components = Required<CustomComponents>;

package/src/types/DayPickerDefault.ts

@@ -1,10 +1,10 @@
 import { DayPickerProps } from 'DayPicker';
 
-import { DayPickerBase, DaySelectionMode } from './DayPickerBase';
+import { DayPickerBase } from './DayPickerBase';
 
 /** The props for the {@link DayPicker} component when using `mode="default"` or `undefined`. */
 export interface DayPickerDefaultProps extends DayPickerBase {
-  mode?: DaySelectionMode;
+  mode?: undefined | 'default';
 }
 
 /** Returns true when the props are of type {@link DayPickerDefaultProps}. */

package/src/types/Matchers.ts

@@ -66,7 +66,7 @@ export type DateAfter = { after: Date };
 /** A matcher to match a day falling before the specified date, with the date not included. */
 export type DateBefore = { before: Date };
 
-/** A matcher to match a day falling before and after two dates, where the dates are not included. */
+/** A matcher to match a day falling before and/or after two dates, where the dates are not included. */
 export type DateInterval = { before: Date; after: Date };
 
 /** A matcher to match a range of dates. The range can be open. Differently from {@link DateInterval}, the dates here are included. */