build: remove allowSyntheticDefaultImports requirement (#1926)

README.md

@@ -45,14 +45,14 @@ yarn add react-day-picker date-fns     # using yarn
 ## Example
 
 ```tsx
-import React from 'react';
-
+import { useState } from 'react';
 import { format } from 'date-fns';
+
 import { DayPicker } from 'react-day-picker';
 import 'react-day-picker/dist/style.css';
 
 export default function Example() {
-  const [selected, setSelected] = React.useState<Date>();
+  const [selected, setSelected] = useState<Date>();
 
   let footer = <p>Please pick a day.</p>;
   if (selected) {

jest.config.ts

@@ -3,9 +3,6 @@ import type { Config } from '@jest/types';
 const config: Config.InitialOptions = {
   preset: 'ts-jest',
   roots: ['./src'],
-  transform: {
-    '^.+\\.tsx?$': 'ts-jest'
-  },
   moduleNameMapper: {
     '^test/(.*)': ['<rootDir>/test/$1'],
     '^components(.*)': ['<rootDir>/src/components$1'],

src/DayPicker.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { DayPickerDefaultProps } from 'types/DayPickerDefault';
 import { DayPickerMultipleProps } from 'types/DayPickerMultiple';
 import { DayPickerRangeProps } from 'types/DayPickerRange';

src/components/Button/Button.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { screen } from '@testing-library/react';
 
 import { customRender } from 'test/render';

src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 import { useDayPicker } from 'contexts/DayPicker';
 

src/components/Caption/Caption.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { screen } from '@testing-library/react';
 import { DayPickerProps } from 'DayPicker';
 

src/components/Caption/Caption.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { CaptionDropdowns } from 'components/CaptionDropdowns';
 import { CaptionLabel } from 'components/CaptionLabel';
 import { CaptionNavigation } from 'components/CaptionNavigation';

src/components/CaptionDropdowns/CaptionDropdowns.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { screen } from '@testing-library/react';
 import { setMonth, setYear } from 'date-fns';
 import { DayPickerProps } from 'DayPicker';

src/components/CaptionDropdowns/CaptionDropdowns.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { addMonths } from 'date-fns';
 
 import { CaptionProps } from 'components/Caption/Caption';

src/components/CaptionLabel/CaptionLabel.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { customRender } from 'test/render';
 import { getMonthCaption } from 'test/selectors';
 import { freezeBeforeAll } from 'test/utils';

src/components/CaptionLabel/CaptionLabel.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { useDayPicker } from 'contexts/DayPicker';
 
 /** The props for the {@link CaptionLabel} component. */

src/components/CaptionNavigation/CaptionNavigation.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { addMonths } from 'date-fns';
 import { DayPickerProps } from 'DayPicker';
 

src/components/CaptionNavigation/CaptionNavigation.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { MouseEventHandler } from 'react';
 
 import { isSameMonth } from 'date-fns';
 
@@ -25,12 +25,12 @@ export function CaptionNavigation(props: CaptionProps): JSX.Element {
   const hideNext = numberOfMonths > 1 && (isFirst || !isLast);
   const hidePrevious = numberOfMonths > 1 && (isLast || !isFirst);
 
-  const handlePreviousClick: React.MouseEventHandler = () => {
+  const handlePreviousClick: MouseEventHandler = () => {
     if (!previousMonth) return;
     goToMonth(previousMonth);
   };
 
-  const handleNextClick: React.MouseEventHandler = () => {
+  const handleNextClick: MouseEventHandler = () => {
     if (!nextMonth) return;
     goToMonth(nextMonth);
   };

src/components/Day/Day.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { screen } from '@testing-library/react';
 import { DayPickerProps } from 'DayPicker';
 

src/components/Day/Day.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 
 import { useDayRender } from 'hooks/useDayRender';
 

src/components/DayContent/DayContent.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { es } from 'date-fns/locale';
 import { DayPickerProps } from 'DayPicker';
 

src/components/DayContent/DayContent.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { useDayPicker } from 'contexts/DayPicker';
 import { ActiveModifiers } from 'types/Modifiers';
 

src/components/Dropdown/Dropdown.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { fireEvent, screen } from '@testing-library/react';
 import { DayPickerProps } from 'DayPicker';
 

src/components/Dropdown/Dropdown.tsx

@@ -1,4 +1,9 @@
-import React from 'react';
+import {
+  ChangeEventHandler,
+  CSSProperties,
+  ReactNode,
+  SelectHTMLAttributes
+} from 'react';
 
 import { IconDropdown } from 'components/IconDropdown';
 import { useDayPicker } from 'contexts/DayPicker';
@@ -8,14 +13,14 @@ export interface DropdownProps {
   /** The name attribute of the element. */
   name?: string;
   /** The caption displayed to replace the hidden select. */
-  caption?: React.ReactNode;
-  children?: React.SelectHTMLAttributes<HTMLSelectElement>['children'];
+  caption?: ReactNode;
+  children?: SelectHTMLAttributes<HTMLSelectElement>['children'];
   className?: string;
   ['aria-label']?: string;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   /** The selected value. */
   value?: string | number;
-  onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+  onChange?: ChangeEventHandler<HTMLSelectElement>;
 }
 
 /**

src/components/Footer/Footer.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { customRender } from 'test/render';
 import { getTableFooter, queryTableFooter } from 'test/selectors';
 

src/components/Footer/Footer.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { useDayPicker } from 'contexts/DayPicker';
 
 export interface FooterProps {

src/components/Head/Head.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { RenderResult, screen } from '@testing-library/react';
 import { DayPickerProps } from 'DayPicker';
 

src/components/Head/Head.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { HeadRow } from 'components/HeadRow';
 import { useDayPicker } from 'contexts/DayPicker';
 

src/components/HeadRow/HeadRow.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { RenderResult } from '@testing-library/react';
 import { DayPickerProps } from 'DayPicker';
 

src/components/HeadRow/HeadRow.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { useDayPicker } from 'contexts/DayPicker';
 
 import { getWeekdays } from './utils';

src/components/IconDropdown/IconDropdown.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { customRender } from 'test/render';
 
 import { IconDropdown } from './IconDropdown';

src/components/IconDropdown/IconDropdown.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { StyledComponent } from 'types/Styles';
 
 /**

src/components/IconLeft/IconLeft.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { customRender } from 'test/render';
 
 import { IconLeft } from './IconLeft';

src/components/IconLeft/IconLeft.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { StyledComponent } from 'types/Styles';
 
 /**

src/components/IconRight/IconRight.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { customRender } from 'test/render';
 
 import { IconRight } from './IconRight';

src/components/IconRight/IconRight.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { StyledComponent } from 'types/Styles';
 
 /**

src/components/Month/Month.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { screen } from '@testing-library/react';
 import { DayPickerProps } from 'DayPicker';
 

src/components/Month/Month.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Caption } from 'components/Caption';
 import { Table } from 'components/Table';
 import { useDayPicker } from 'contexts/DayPicker';

src/components/MonthsDropdown/MonthsDropdown.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { screen } from '@testing-library/react';
 import { addMonths, differenceInMonths } from 'date-fns';
 import { DayPickerProps } from 'DayPicker';

src/components/MonthsDropdown/MonthsDropdown.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ChangeEventHandler } from 'react';
 
 import { isSameYear, setMonth, startOfMonth } from 'date-fns';
 
@@ -46,7 +46,7 @@ export function MonthsDropdown(props: MonthsDropdownProps): JSX.Element {
     }
   }
 
-  const handleChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
+  const handleChange: ChangeEventHandler<HTMLSelectElement> = (e) => {
     const selectedMonth = Number(e.target.value);
     const newMonth = setMonth(startOfMonth(props.displayMonth), selectedMonth);
     props.onChange(newMonth);

src/components/Navigation/Navigation.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { DayPickerProps } from 'DayPicker';
 
 import { customRender } from 'test/render';

src/components/Navigation/Navigation.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { MouseEventHandler } from 'react';
 
 import { IconLeft } from 'components/IconLeft';
 import { IconRight } from 'components/IconRight';
@@ -19,9 +19,9 @@ export interface NavigationProps {
   /** Hide the next button. */
   hideNext: boolean;
   /** Event handler when the next button is clicked. */
-  onNextClick: React.MouseEventHandler<HTMLButtonElement>;
+  onNextClick: MouseEventHandler<HTMLButtonElement>;
   /** Event handler when the previous button is clicked. */
-  onPreviousClick: React.MouseEventHandler<HTMLButtonElement>;
+  onPreviousClick: MouseEventHandler<HTMLButtonElement>;
 }
 
 /** A component rendering the navigation buttons or the drop-downs. */

src/components/Root/Root.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { RenderResult } from '@testing-library/react';
 import { addDays } from 'date-fns';
 import { DayPickerProps } from 'DayPicker';

src/components/Root/Root.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { DayPickerProps } from 'DayPicker';
 

src/components/Row/Row.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { screen } from '@testing-library/react';
 import { DayPickerProps } from 'DayPicker';
 

src/components/Row/Row.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { getUnixTime } from 'date-fns';
 
 import { Day } from 'components/Day';

src/components/Table/Table.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { DayPickerProps } from 'DayPicker';
 
 import { customRender } from 'test/render/customRender';

src/components/Table/Table.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Footer } from 'components/Footer';
 import { Head } from 'components/Head';
 import { Row } from 'components/Row';

src/components/WeekNumber/WeekNumber.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { DayPickerProps } from 'DayPicker';

src/components/WeekNumber/WeekNumber.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { MouseEventHandler } from 'react';
 
 import { useDayPicker } from 'contexts/DayPicker';
 
@@ -41,7 +41,7 @@ export function WeekNumber(props: WeekNumberProps): JSX.Element {
 
   const label = labelWeekNumber(Number(weekNumber), { locale });
 
-  const handleClick: React.MouseEventHandler = function (e) {
+  const handleClick: MouseEventHandler = function (e) {
     onWeekNumberClick(weekNumber, dates, e);
   };
 

src/components/YearsDropdown/YearsDropdown.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { screen } from '@testing-library/react';
 import { addMonths, differenceInYears } from 'date-fns';
 import { DayPickerProps } from 'DayPicker';

src/components/YearsDropdown/YearsDropdown.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ChangeEventHandler } from 'react';
 
 import { setYear, startOfMonth, startOfYear } from 'date-fns';
 
@@ -45,7 +45,7 @@ export function YearsDropdown(props: YearsDropdownProps): JSX.Element {
     years.push(setYear(startOfYear(new Date()), year));
   }
 
-  const handleChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
+  const handleChange: ChangeEventHandler<HTMLSelectElement> = (e) => {
     const newMonth = setYear(
       startOfMonth(displayMonth),
       Number(e.target.value)

src/contexts/DayPicker/DayPickerContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, ReactNode, useContext } from 'react';
+import { createContext, ReactNode, useContext } from 'react';
 
 import { DayPickerProps } from 'DayPicker';
 

src/contexts/Focus/FocusContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, ReactNode, useContext, useState } from 'react';
+import { createContext, PropsWithChildren, useContext, useState } from 'react';
 
 import { isSameDay } from 'date-fns';
 
@@ -54,8 +54,10 @@ export const FocusContext = createContext<FocusContextValue | undefined>(
   undefined
 );
 
+export type FocusProviderProps = PropsWithChildren;
+
 /** The provider for the {@link FocusContext}. */
-export function FocusProvider(props: { children: ReactNode }): JSX.Element {
+export function FocusProvider(props: FocusProviderProps): JSX.Element {
   const navigation = useNavigation();
   const modifiers = useModifiers();