From f3327c92ee2142ec4ced28a257ba3c84386f8127 Mon Sep 17 00:00:00 2001 From: Giampaolo Bellavite Date: Thu, 12 Oct 2023 14:23:57 -0500 Subject: [PATCH] build: remove allowSyntheticDefaultImports requirement (#1926) --- README.md | 6 ++-- jest.config.ts | 3 -- src/DayPicker.tsx | 2 -- src/components/Button/Button.test.tsx | 2 -- src/components/Button/Button.tsx | 2 +- src/components/Caption/Caption.test.tsx | 2 -- src/components/Caption/Caption.tsx | 2 -- .../CaptionDropdowns.test.tsx | 2 -- .../CaptionDropdowns/CaptionDropdowns.tsx | 2 -- .../CaptionLabel/CaptionLabel.test.tsx | 2 -- src/components/CaptionLabel/CaptionLabel.tsx | 2 -- .../CaptionNavigation.test.tsx | 2 -- .../CaptionNavigation/CaptionNavigation.tsx | 6 ++-- src/components/Day/Day.test.tsx | 2 -- src/components/Day/Day.tsx | 2 +- src/components/DayContent/DayContent.test.tsx | 2 -- src/components/DayContent/DayContent.tsx | 2 -- src/components/Dropdown/Dropdown.test.tsx | 2 -- src/components/Dropdown/Dropdown.tsx | 15 ++++++--- src/components/Footer/Footer.test.tsx | 2 -- src/components/Footer/Footer.tsx | 2 -- src/components/Head/Head.test.tsx | 2 -- src/components/Head/Head.tsx | 2 -- src/components/HeadRow/HeadRow.test.tsx | 2 -- src/components/HeadRow/HeadRow.tsx | 2 -- .../IconDropdown/IconDropdown.test.tsx | 2 -- src/components/IconDropdown/IconDropdown.tsx | 2 -- src/components/IconLeft/IconLeft.test.tsx | 2 -- src/components/IconLeft/IconLeft.tsx | 2 -- src/components/IconRight/IconRight.test.tsx | 2 -- src/components/IconRight/IconRight.tsx | 2 -- src/components/Month/Month.test.tsx | 2 -- src/components/Month/Month.tsx | 2 -- .../MonthsDropdown/MonthsDropdown.test.tsx | 2 -- .../MonthsDropdown/MonthsDropdown.tsx | 4 +-- src/components/Navigation/Navigation.test.tsx | 2 -- src/components/Navigation/Navigation.tsx | 6 ++-- src/components/Root/Root.test.tsx | 2 -- src/components/Root/Root.tsx | 2 +- src/components/Row/Row.test.tsx | 2 -- src/components/Row/Row.tsx | 2 -- src/components/Table/Table.test.tsx | 2 -- src/components/Table/Table.tsx | 2 -- src/components/WeekNumber/WeekNumber.test.tsx | 2 -- src/components/WeekNumber/WeekNumber.tsx | 4 +-- .../YearsDropdown/YearsDropdown.test.tsx | 2 -- .../YearsDropdown/YearsDropdown.tsx | 4 +-- src/contexts/DayPicker/DayPickerContext.tsx | 2 +- src/contexts/Focus/FocusContext.tsx | 6 ++-- src/contexts/Modifiers/ModifiersContext.tsx | 6 ++-- src/contexts/Navigation/NavigationContext.tsx | 2 +- src/contexts/RootProvider.tsx | 6 ++-- .../SelectMultipleContext.test.ts | 10 +++--- .../SelectMultiple/SelectMultipleContext.tsx | 2 +- .../SelectRange/SelectRangeContext.test.ts | 4 ++- .../SelectRange/SelectRangeContext.tsx | 8 ++--- .../SelectSingle/SelectSingleContext.test.ts | 6 ++-- .../SelectSingle/SelectSingleContext.tsx | 6 ++-- .../useControlledValue/useControlledValue.ts | 4 +-- src/hooks/useDayRender/useDayRender.tsx | 4 +-- src/hooks/useDayRender/utils/getDayStyle.ts | 6 ++-- src/hooks/useId/useId.ts | 12 +++---- src/hooks/useId/useIsomorphicLayoutEffect.ts | 31 +++++++++++++++++++ src/hooks/useInput/useInput.ts | 21 ++++++++----- src/types/DayPickerBase.ts | 8 +++-- src/types/EventHandlers.ts | 28 +++++++++++------ src/types/Formatters.ts | 6 ++-- src/types/Modifiers.ts | 6 ++-- src/types/Styles.ts | 10 +++--- test/render/customRender.tsx | 4 +-- test/render/renderDayPickerHook.tsx | 2 -- tsconfig.json | 8 +++-- website/examples/controlled.tsx | 2 +- website/examples/custom-disable-row.tsx | 2 +- website/examples/formatters.tsx | 2 +- website/examples/from-to-month.tsx | 1 + website/examples/from-to-year.tsx | 1 + website/examples/modifiers-classnames.tsx | 1 + website/examples/modifiers-custom.tsx | 1 + website/examples/modifiers-hidden.tsx | 1 + website/examples/modifiers-style.tsx | 1 + website/examples/multiple-months-paged.tsx | 1 + website/examples/outside-days.tsx | 1 + website/examples/styling-css.tsx | 1 + website/examples/styling-inline.tsx | 1 + website/examples/weeknumber.tsx | 1 + 86 files changed, 170 insertions(+), 181 deletions(-) create mode 100644 src/hooks/useId/useIsomorphicLayoutEffect.ts diff --git a/README.md b/README.md index 8b24db71ef..42d439241c 100644 --- a/README.md +++ b/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(); + const [selected, setSelected] = useState(); let footer =

Please pick a day.

; if (selected) { diff --git a/jest.config.ts b/jest.config.ts index f31ba72930..5958c27653 100644 --- a/jest.config.ts +++ b/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/(.*)': ['/test/$1'], '^components(.*)': ['/src/components$1'], diff --git a/src/DayPicker.tsx b/src/DayPicker.tsx index c461dfd361..b4133eaadd 100644 --- a/src/DayPicker.tsx +++ b/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'; diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx index cb2844522a..bba5713f9f 100644 --- a/src/components/Button/Button.test.tsx +++ b/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'; diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 4fa82738a3..325a3122de 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef } from 'react'; +import { forwardRef } from 'react'; import { useDayPicker } from 'contexts/DayPicker'; diff --git a/src/components/Caption/Caption.test.tsx b/src/components/Caption/Caption.test.tsx index 607c633189..353f5fae39 100644 --- a/src/components/Caption/Caption.test.tsx +++ b/src/components/Caption/Caption.test.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { screen } from '@testing-library/react'; import { DayPickerProps } from 'DayPicker'; diff --git a/src/components/Caption/Caption.tsx b/src/components/Caption/Caption.tsx index 66b8c3ff60..18b6274665 100644 --- a/src/components/Caption/Caption.tsx +++ b/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'; diff --git a/src/components/CaptionDropdowns/CaptionDropdowns.test.tsx b/src/components/CaptionDropdowns/CaptionDropdowns.test.tsx index 105a67c01d..0d69008078 100644 --- a/src/components/CaptionDropdowns/CaptionDropdowns.test.tsx +++ b/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'; diff --git a/src/components/CaptionDropdowns/CaptionDropdowns.tsx b/src/components/CaptionDropdowns/CaptionDropdowns.tsx index b199b5ae93..073f2852f2 100644 --- a/src/components/CaptionDropdowns/CaptionDropdowns.tsx +++ b/src/components/CaptionDropdowns/CaptionDropdowns.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { addMonths } from 'date-fns'; import { CaptionProps } from 'components/Caption/Caption'; diff --git a/src/components/CaptionLabel/CaptionLabel.test.tsx b/src/components/CaptionLabel/CaptionLabel.test.tsx index 80ca8cb1ca..c154984b56 100644 --- a/src/components/CaptionLabel/CaptionLabel.test.tsx +++ b/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'; diff --git a/src/components/CaptionLabel/CaptionLabel.tsx b/src/components/CaptionLabel/CaptionLabel.tsx index 0598227d61..86eb995afe 100644 --- a/src/components/CaptionLabel/CaptionLabel.tsx +++ b/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. */ diff --git a/src/components/CaptionNavigation/CaptionNavigation.test.tsx b/src/components/CaptionNavigation/CaptionNavigation.test.tsx index 8f952b2d90..b9c1c6e030 100644 --- a/src/components/CaptionNavigation/CaptionNavigation.test.tsx +++ b/src/components/CaptionNavigation/CaptionNavigation.test.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { addMonths } from 'date-fns'; import { DayPickerProps } from 'DayPicker'; diff --git a/src/components/CaptionNavigation/CaptionNavigation.tsx b/src/components/CaptionNavigation/CaptionNavigation.tsx index feea2d3017..5412a89cfc 100644 --- a/src/components/CaptionNavigation/CaptionNavigation.tsx +++ b/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); }; diff --git a/src/components/Day/Day.test.tsx b/src/components/Day/Day.test.tsx index 5ad5e8ca89..90de5886e9 100644 --- a/src/components/Day/Day.test.tsx +++ b/src/components/Day/Day.test.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { screen } from '@testing-library/react'; import { DayPickerProps } from 'DayPicker'; diff --git a/src/components/Day/Day.tsx b/src/components/Day/Day.tsx index cb52e814b6..ee9e953787 100644 --- a/src/components/Day/Day.tsx +++ b/src/components/Day/Day.tsx @@ -1,4 +1,4 @@ -import React, { useRef } from 'react'; +import { useRef } from 'react'; import { useDayRender } from 'hooks/useDayRender'; diff --git a/src/components/DayContent/DayContent.test.tsx b/src/components/DayContent/DayContent.test.tsx index d05235ba78..8ed3c008a7 100644 --- a/src/components/DayContent/DayContent.test.tsx +++ b/src/components/DayContent/DayContent.test.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { es } from 'date-fns/locale'; import { DayPickerProps } from 'DayPicker'; diff --git a/src/components/DayContent/DayContent.tsx b/src/components/DayContent/DayContent.tsx index b22cf8529a..afa729a34a 100644 --- a/src/components/DayContent/DayContent.tsx +++ b/src/components/DayContent/DayContent.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { useDayPicker } from 'contexts/DayPicker'; import { ActiveModifiers } from 'types/Modifiers'; diff --git a/src/components/Dropdown/Dropdown.test.tsx b/src/components/Dropdown/Dropdown.test.tsx index b9d71f15ab..8512b13ad1 100644 --- a/src/components/Dropdown/Dropdown.test.tsx +++ b/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'; diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index cca1a2548d..c0e92432fa 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/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['children']; + caption?: ReactNode; + children?: SelectHTMLAttributes['children']; className?: string; ['aria-label']?: string; - style?: React.CSSProperties; + style?: CSSProperties; /** The selected value. */ value?: string | number; - onChange?: React.ChangeEventHandler; + onChange?: ChangeEventHandler; } /** diff --git a/src/components/Footer/Footer.test.tsx b/src/components/Footer/Footer.test.tsx index b1c4dd0d81..47aea42219 100644 --- a/src/components/Footer/Footer.test.tsx +++ b/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'; diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 2bb2bb9ac2..4e5446b192 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { useDayPicker } from 'contexts/DayPicker'; export interface FooterProps { diff --git a/src/components/Head/Head.test.tsx b/src/components/Head/Head.test.tsx index 63b7374061..747ea52a2b 100644 --- a/src/components/Head/Head.test.tsx +++ b/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'; diff --git a/src/components/Head/Head.tsx b/src/components/Head/Head.tsx index 834673c1d3..972c5dbfe8 100644 --- a/src/components/Head/Head.tsx +++ b/src/components/Head/Head.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { HeadRow } from 'components/HeadRow'; import { useDayPicker } from 'contexts/DayPicker'; diff --git a/src/components/HeadRow/HeadRow.test.tsx b/src/components/HeadRow/HeadRow.test.tsx index 17a1c04a99..f58b608477 100644 --- a/src/components/HeadRow/HeadRow.test.tsx +++ b/src/components/HeadRow/HeadRow.test.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { RenderResult } from '@testing-library/react'; import { DayPickerProps } from 'DayPicker'; diff --git a/src/components/HeadRow/HeadRow.tsx b/src/components/HeadRow/HeadRow.tsx index 84a7c5f0ba..6c4b9d0adf 100644 --- a/src/components/HeadRow/HeadRow.tsx +++ b/src/components/HeadRow/HeadRow.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { useDayPicker } from 'contexts/DayPicker'; import { getWeekdays } from './utils'; diff --git a/src/components/IconDropdown/IconDropdown.test.tsx b/src/components/IconDropdown/IconDropdown.test.tsx index c2f951fda1..7d4a6882b5 100644 --- a/src/components/IconDropdown/IconDropdown.test.tsx +++ b/src/components/IconDropdown/IconDropdown.test.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { customRender } from 'test/render'; import { IconDropdown } from './IconDropdown'; diff --git a/src/components/IconDropdown/IconDropdown.tsx b/src/components/IconDropdown/IconDropdown.tsx index 1fdca9c65d..a2ed253a26 100644 --- a/src/components/IconDropdown/IconDropdown.tsx +++ b/src/components/IconDropdown/IconDropdown.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { StyledComponent } from 'types/Styles'; /** diff --git a/src/components/IconLeft/IconLeft.test.tsx b/src/components/IconLeft/IconLeft.test.tsx index da53e2556b..aea3ee59a3 100644 --- a/src/components/IconLeft/IconLeft.test.tsx +++ b/src/components/IconLeft/IconLeft.test.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { customRender } from 'test/render'; import { IconLeft } from './IconLeft'; diff --git a/src/components/IconLeft/IconLeft.tsx b/src/components/IconLeft/IconLeft.tsx index f27ebba0db..58f26b4eb2 100644 --- a/src/components/IconLeft/IconLeft.tsx +++ b/src/components/IconLeft/IconLeft.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { StyledComponent } from 'types/Styles'; /** diff --git a/src/components/IconRight/IconRight.test.tsx b/src/components/IconRight/IconRight.test.tsx index 131f57c7ae..7bd1fcc638 100644 --- a/src/components/IconRight/IconRight.test.tsx +++ b/src/components/IconRight/IconRight.test.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { customRender } from 'test/render'; import { IconRight } from './IconRight'; diff --git a/src/components/IconRight/IconRight.tsx b/src/components/IconRight/IconRight.tsx index edb7ca2091..d8e80750ed 100644 --- a/src/components/IconRight/IconRight.tsx +++ b/src/components/IconRight/IconRight.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { StyledComponent } from 'types/Styles'; /** diff --git a/src/components/Month/Month.test.tsx b/src/components/Month/Month.test.tsx index feaf34ff60..477ccf1e9d 100644 --- a/src/components/Month/Month.test.tsx +++ b/src/components/Month/Month.test.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { screen } from '@testing-library/react'; import { DayPickerProps } from 'DayPicker'; diff --git a/src/components/Month/Month.tsx b/src/components/Month/Month.tsx index 20c8cb13bd..be5de8c220 100644 --- a/src/components/Month/Month.tsx +++ b/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'; diff --git a/src/components/MonthsDropdown/MonthsDropdown.test.tsx b/src/components/MonthsDropdown/MonthsDropdown.test.tsx index ad51f3a0d1..d4a130e6a7 100644 --- a/src/components/MonthsDropdown/MonthsDropdown.test.tsx +++ b/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'; diff --git a/src/components/MonthsDropdown/MonthsDropdown.tsx b/src/components/MonthsDropdown/MonthsDropdown.tsx index e2b4e3dae2..51ca570704 100644 --- a/src/components/MonthsDropdown/MonthsDropdown.tsx +++ b/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 = (e) => { + const handleChange: ChangeEventHandler = (e) => { const selectedMonth = Number(e.target.value); const newMonth = setMonth(startOfMonth(props.displayMonth), selectedMonth); props.onChange(newMonth); diff --git a/src/components/Navigation/Navigation.test.tsx b/src/components/Navigation/Navigation.test.tsx index f0fbb135f8..615a3161a8 100644 --- a/src/components/Navigation/Navigation.test.tsx +++ b/src/components/Navigation/Navigation.test.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { DayPickerProps } from 'DayPicker'; import { customRender } from 'test/render'; diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx index e1f8270545..04d6b0dff4 100644 --- a/src/components/Navigation/Navigation.tsx +++ b/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; + onNextClick: MouseEventHandler; /** Event handler when the previous button is clicked. */ - onPreviousClick: React.MouseEventHandler; + onPreviousClick: MouseEventHandler; } /** A component rendering the navigation buttons or the drop-downs. */ diff --git a/src/components/Root/Root.test.tsx b/src/components/Root/Root.test.tsx index ef051508b5..38c33b001d 100644 --- a/src/components/Root/Root.test.tsx +++ b/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'; diff --git a/src/components/Root/Root.tsx b/src/components/Root/Root.tsx index e03f6b4de0..0722ec313f 100644 --- a/src/components/Root/Root.tsx +++ b/src/components/Root/Root.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { DayPickerProps } from 'DayPicker'; diff --git a/src/components/Row/Row.test.tsx b/src/components/Row/Row.test.tsx index 26f9fbe148..4c672211ba 100644 --- a/src/components/Row/Row.test.tsx +++ b/src/components/Row/Row.test.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { screen } from '@testing-library/react'; import { DayPickerProps } from 'DayPicker'; diff --git a/src/components/Row/Row.tsx b/src/components/Row/Row.tsx index 53c384d8e7..ef59547a13 100644 --- a/src/components/Row/Row.tsx +++ b/src/components/Row/Row.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { getUnixTime } from 'date-fns'; import { Day } from 'components/Day'; diff --git a/src/components/Table/Table.test.tsx b/src/components/Table/Table.test.tsx index d8bdec0839..51209cc0a0 100644 --- a/src/components/Table/Table.test.tsx +++ b/src/components/Table/Table.test.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { DayPickerProps } from 'DayPicker'; import { customRender } from 'test/render/customRender'; diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 5548c0af20..1446b53352 100644 --- a/src/components/Table/Table.tsx +++ b/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'; diff --git a/src/components/WeekNumber/WeekNumber.test.tsx b/src/components/WeekNumber/WeekNumber.test.tsx index b329f23eff..1005984de5 100644 --- a/src/components/WeekNumber/WeekNumber.test.tsx +++ b/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'; diff --git a/src/components/WeekNumber/WeekNumber.tsx b/src/components/WeekNumber/WeekNumber.tsx index 7850003e87..8245816d76 100644 --- a/src/components/WeekNumber/WeekNumber.tsx +++ b/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); }; diff --git a/src/components/YearsDropdown/YearsDropdown.test.tsx b/src/components/YearsDropdown/YearsDropdown.test.tsx index 6f0e67f2e4..5e63a8da07 100644 --- a/src/components/YearsDropdown/YearsDropdown.test.tsx +++ b/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'; diff --git a/src/components/YearsDropdown/YearsDropdown.tsx b/src/components/YearsDropdown/YearsDropdown.tsx index 6f6c466cb2..2fb8f09a88 100644 --- a/src/components/YearsDropdown/YearsDropdown.tsx +++ b/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 = (e) => { + const handleChange: ChangeEventHandler = (e) => { const newMonth = setYear( startOfMonth(displayMonth), Number(e.target.value) diff --git a/src/contexts/DayPicker/DayPickerContext.tsx b/src/contexts/DayPicker/DayPickerContext.tsx index f4d914dca2..198b82793d 100644 --- a/src/contexts/DayPicker/DayPickerContext.tsx +++ b/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'; diff --git a/src/contexts/Focus/FocusContext.tsx b/src/contexts/Focus/FocusContext.tsx index 8cc1311207..db2a78f5f4 100644 --- a/src/contexts/Focus/FocusContext.tsx +++ b/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( 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(); diff --git a/src/contexts/Modifiers/ModifiersContext.tsx b/src/contexts/Modifiers/ModifiersContext.tsx index 2150b935e2..dc493d63fc 100644 --- a/src/contexts/Modifiers/ModifiersContext.tsx +++ b/src/contexts/Modifiers/ModifiersContext.tsx @@ -1,4 +1,4 @@ -import React, { createContext, ReactNode, useContext } from 'react'; +import { createContext, PropsWithChildren, useContext } from 'react'; import { useDayPicker } from 'contexts/DayPicker'; import { useSelectMultiple } from 'contexts/SelectMultiple'; @@ -11,9 +11,7 @@ import { getInternalModifiers } from './utils/getInternalModifiers'; /** The Modifiers context store the modifiers used in DayPicker. To access the value of this context, use {@link useModifiers}. */ export const ModifiersContext = createContext(undefined); -export type ModifiersProviderProps = { - children: ReactNode; -}; +export type ModifiersProviderProps = PropsWithChildren; /** Provide the value for the {@link ModifiersContext}. */ export function ModifiersProvider(props: ModifiersProviderProps): JSX.Element { diff --git a/src/contexts/Navigation/NavigationContext.tsx b/src/contexts/Navigation/NavigationContext.tsx index 6c0d4ad157..0f4cb065fe 100644 --- a/src/contexts/Navigation/NavigationContext.tsx +++ b/src/contexts/Navigation/NavigationContext.tsx @@ -1,4 +1,4 @@ -import React, { createContext, ReactNode, useContext } from 'react'; +import { createContext, ReactNode, useContext } from 'react'; import { addMonths, isBefore, isSameMonth } from 'date-fns'; diff --git a/src/contexts/RootProvider.tsx b/src/contexts/RootProvider.tsx index 6354d63ec2..6c2c35254e 100644 --- a/src/contexts/RootProvider.tsx +++ b/src/contexts/RootProvider.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { PropsWithChildren } from 'react'; import { ModifiersProvider } from 'contexts/Modifiers/ModifiersContext'; import { DayPickerBase } from 'types/DayPickerBase'; @@ -11,9 +11,7 @@ import { SelectRangeProvider } from './SelectRange'; import { SelectSingleProvider } from './SelectSingle'; /** The props of {@link RootProvider}. */ -export type RootContext = DayPickerBase & { - children: React.ReactNode; -}; +export type RootContext = PropsWithChildren; /** Provide the value for all the context providers. */ export function RootProvider(props: RootContext): JSX.Element { diff --git a/src/contexts/SelectMultiple/SelectMultipleContext.test.ts b/src/contexts/SelectMultiple/SelectMultipleContext.test.ts index c7ae471c00..3457f264b5 100644 --- a/src/contexts/SelectMultiple/SelectMultipleContext.test.ts +++ b/src/contexts/SelectMultiple/SelectMultipleContext.test.ts @@ -1,3 +1,5 @@ +import { MouseEvent } from 'react'; + import { addDays, addMonths } from 'date-fns'; import { DayPickerProps } from 'DayPicker'; @@ -57,7 +59,7 @@ describe('when days are selected', () => { describe('when `onDayClick` is called with a not selected day', () => { const clickedDay = addDays(selectedDay1, -1); const activeModifiers = {}; - const event = {} as React.MouseEvent; + const event = {} as MouseEvent; beforeAll(() => { const result = renderHook(dayPickerProps); result.current.onDayClick?.(clickedDay, activeModifiers, event); @@ -92,7 +94,7 @@ describe('when days are selected', () => { afterAll(() => { jest.resetAllMocks(); }); - const event = {} as React.MouseEvent; + const event = {} as MouseEvent; test('should call the `onDayClick` from the DayPicker props', () => { expect(dayPickerProps.onDayClick).toHaveBeenCalledWith( clickedDay, @@ -142,7 +144,7 @@ describe('when the maximum number of days are selected', () => { afterAll(() => { jest.resetAllMocks(); }); - const event = {} as React.MouseEvent; + const event = {} as MouseEvent; test('should call the `onDayClick` from the DayPicker props', () => { expect(dayPickerProps.onDayClick).toHaveBeenCalledWith( clickedDay, @@ -173,7 +175,7 @@ describe('when the minimum number of days are selected', () => { afterAll(() => { jest.resetAllMocks(); }); - const event = {} as React.MouseEvent; + const event = {} as MouseEvent; test('should call the `onDayClick` from the DayPicker props', () => { expect(dayPickerProps.onDayClick).toHaveBeenCalledWith( clickedDay, diff --git a/src/contexts/SelectMultiple/SelectMultipleContext.tsx b/src/contexts/SelectMultiple/SelectMultipleContext.tsx index eaf6851aeb..537108369a 100644 --- a/src/contexts/SelectMultiple/SelectMultipleContext.tsx +++ b/src/contexts/SelectMultiple/SelectMultipleContext.tsx @@ -1,4 +1,4 @@ -import React, { createContext, ReactNode, useContext } from 'react'; +import { createContext, ReactNode, useContext } from 'react'; import { isSameDay } from 'date-fns'; diff --git a/src/contexts/SelectRange/SelectRangeContext.test.ts b/src/contexts/SelectRange/SelectRangeContext.test.ts index 0074208217..bd8000c7ad 100644 --- a/src/contexts/SelectRange/SelectRangeContext.test.ts +++ b/src/contexts/SelectRange/SelectRangeContext.test.ts @@ -1,3 +1,5 @@ +import { MouseEvent } from 'react'; + import { addDays, addMonths, @@ -36,7 +38,7 @@ const initialProps: DayPickerRangeProps = { const from = today; const to = addDays(today, 6); -const stubEvent = {} as React.MouseEvent; +const stubEvent = {} as MouseEvent; describe('when no days are selected', () => { test('the selected days should be undefined', () => { diff --git a/src/contexts/SelectRange/SelectRangeContext.tsx b/src/contexts/SelectRange/SelectRangeContext.tsx index 1a6e9d44ec..8ecb2e7e99 100644 --- a/src/contexts/SelectRange/SelectRangeContext.tsx +++ b/src/contexts/SelectRange/SelectRangeContext.tsx @@ -1,4 +1,4 @@ -import React, { createContext, ReactNode, useContext } from 'react'; +import { createContext, PropsWithChildren, useContext } from 'react'; import { addDays, @@ -46,8 +46,7 @@ export const SelectRangeContext = createContext< type SelectRangeProviderProps = { initialProps: DayPickerBase; - children: ReactNode; -}; +} & PropsWithChildren; /** Provides the values for the {@link SelectRangeProvider}. */ export function SelectRangeProvider( @@ -79,8 +78,7 @@ export function SelectRangeProvider( type SelectRangeProviderInternalProps = { initialProps: DayPickerRangeProps; - children: ReactNode; -}; +} & PropsWithChildren; export function SelectRangeProviderInternal({ initialProps, diff --git a/src/contexts/SelectSingle/SelectSingleContext.test.ts b/src/contexts/SelectSingle/SelectSingleContext.test.ts index 8eef75177a..30fb546492 100644 --- a/src/contexts/SelectSingle/SelectSingleContext.test.ts +++ b/src/contexts/SelectSingle/SelectSingleContext.test.ts @@ -1,4 +1,4 @@ -import React from 'react'; +import { MouseEvent } from 'react'; import { DayPickerProps } from 'DayPicker'; @@ -44,7 +44,7 @@ describe('when onDayClick is called', () => { }; const result = renderHook(dayPickerProps); const activeModifiers = {}; - const event = {} as React.MouseEvent; + const event = {} as MouseEvent; test('should call the `onSelect` event handler', () => { result.current.onDayClick?.(today, activeModifiers, event); expect(dayPickerProps.onSelect).toHaveBeenCalledWith( @@ -72,7 +72,7 @@ describe('if a selected day is not required', () => { test('should call the `onSelect` event handler with an undefined day', () => { const result = renderHook(dayPickerProps); const activeModifiers: ActiveModifiers = { selected: true }; - const event = {} as React.MouseEvent; + const event = {} as MouseEvent; result.current.onDayClick?.(today, activeModifiers, event); expect(dayPickerProps.onSelect).toHaveBeenCalledWith( undefined, diff --git a/src/contexts/SelectSingle/SelectSingleContext.tsx b/src/contexts/SelectSingle/SelectSingleContext.tsx index 5d2c2baf8b..e81cb8c1e1 100644 --- a/src/contexts/SelectSingle/SelectSingleContext.tsx +++ b/src/contexts/SelectSingle/SelectSingleContext.tsx @@ -1,4 +1,4 @@ -import React, { createContext, useContext } from 'react'; +import { createContext, ReactNode, useContext } from 'react'; import { DayPickerBase } from 'types/DayPickerBase'; import { DayPickerSingleProps, isDayPickerSingle } from 'types/DayPickerSingle'; @@ -24,7 +24,7 @@ export const SelectSingleContext = createContext< type SelectSingleProviderProps = { initialProps: DayPickerBase; - children: React.ReactNode; + children: ReactNode; }; /** Provides the values for the {@link SelectSingleProvider}. */ @@ -51,7 +51,7 @@ export function SelectSingleProvider( type SelectSingleProviderInternal = { initialProps: DayPickerSingleProps; - children: React.ReactNode; + children: ReactNode; }; export function SelectSingleProviderInternal({ diff --git a/src/hooks/useControlledValue/useControlledValue.ts b/src/hooks/useControlledValue/useControlledValue.ts index 3d3effc083..9d0ced5581 100644 --- a/src/hooks/useControlledValue/useControlledValue.ts +++ b/src/hooks/useControlledValue/useControlledValue.ts @@ -1,6 +1,6 @@ -import React, { useState } from 'react'; +import { Dispatch, SetStateAction, useState } from 'react'; -export type DispatchStateAction = React.Dispatch>; +export type DispatchStateAction = Dispatch>; /** * Helper hook for using controlled/uncontrolled values from a component props. diff --git a/src/hooks/useDayRender/useDayRender.tsx b/src/hooks/useDayRender/useDayRender.tsx index 6a3cbddb3f..5646a71239 100644 --- a/src/hooks/useDayRender/useDayRender.tsx +++ b/src/hooks/useDayRender/useDayRender.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import { RefObject, useEffect } from 'react'; import { isSameDay } from 'date-fns'; @@ -46,7 +46,7 @@ export function useDayRender( /** The month where the date is displayed (if not the same as `date`, it means it is an "outside" day). */ displayMonth: Date, /** A ref to the button element that will be target of focus when rendered (if required). */ - buttonRef: React.RefObject + buttonRef: RefObject ): DayRender { const dayPicker = useDayPicker(); const focusContext = useFocusContext(); diff --git a/src/hooks/useDayRender/utils/getDayStyle.ts b/src/hooks/useDayRender/utils/getDayStyle.ts index 4051973137..58858dafef 100644 --- a/src/hooks/useDayRender/utils/getDayStyle.ts +++ b/src/hooks/useDayRender/utils/getDayStyle.ts @@ -1,3 +1,5 @@ +import { CSSProperties } from 'react'; + import { DayPickerContextValue } from 'contexts/DayPicker'; import { ActiveModifiers } from 'types/Modifiers'; @@ -5,8 +7,8 @@ import { ActiveModifiers } from 'types/Modifiers'; export function getDayStyle( dayPicker: Pick, activeModifiers: ActiveModifiers -): React.CSSProperties { - let style: React.CSSProperties = { +): CSSProperties { + let style: CSSProperties = { ...dayPicker.styles.day }; Object.keys(activeModifiers).forEach((modifier) => { diff --git a/src/hooks/useId/useId.ts b/src/hooks/useId/useId.ts index 32a8279893..801d1a4627 100644 --- a/src/hooks/useId/useId.ts +++ b/src/hooks/useId/useId.ts @@ -67,7 +67,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI * server hydration and never again, SO BACK OFF ALRIGHT? */ -import * as React from 'react'; +import { useEffect, useLayoutEffect, useState } from 'react'; function canUseDOM() { return !!( @@ -100,9 +100,7 @@ function canUseDOM() { * @param effect * @param deps */ -const useIsomorphicLayoutEffect = canUseDOM() - ? React.useLayoutEffect - : React.useEffect; +const useIsomorphicLayoutEffect = canUseDOM() ? useLayoutEffect : useEffect; let serverHandoffComplete = false; let id = 0; @@ -140,7 +138,7 @@ function useId(providedId?: number | string | undefined | null) { // If this instance isn't part of the initial render, we don't have to do the // double render/patch-up dance. We can just generate the ID and return it. let initialId = providedId ?? (serverHandoffComplete ? genId() : null); - let [id, setId] = React.useState(initialId); + let [id, setId] = useState(initialId); useIsomorphicLayoutEffect(() => { if (id === null) { @@ -153,7 +151,7 @@ function useId(providedId?: number | string | undefined | null) { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - React.useEffect(() => { + useEffect(() => { if (serverHandoffComplete === false) { // Flag all future uses of `useId` to skip the update dance. This is in // `useEffect` because it goes after `useLayoutEffect`, ensuring we don't @@ -165,4 +163,4 @@ function useId(providedId?: number | string | undefined | null) { return providedId ?? id ?? undefined; } -export { useId }; +export { useId, canUseDOM }; diff --git a/src/hooks/useId/useIsomorphicLayoutEffect.ts b/src/hooks/useId/useIsomorphicLayoutEffect.ts new file mode 100644 index 0000000000..e47c3620b1 --- /dev/null +++ b/src/hooks/useId/useIsomorphicLayoutEffect.ts @@ -0,0 +1,31 @@ +import { useEffect, useLayoutEffect } from 'react'; + +import { canUseDOM } from './useId'; + +/** + * React currently throws a warning when using useLayoutEffect on the server. To + * get around it, we can conditionally useEffect on the server (no-op) and + * useLayoutEffect in the browser. We occasionally need useLayoutEffect to + * ensure we don't get a render flash for certain operations, but we may also + * need affected components to render on the server. One example is when setting + * a component's descendants to retrieve their index values. + * + * Important to note that using this hook as an escape hatch will break the + * eslint dependency warnings unless you rename the import to `useLayoutEffect`. + * Use sparingly only when the effect won't effect the rendered HTML to avoid + * any server/client mismatch. + * + * If a useLayoutEffect is needed and the result would create a mismatch, it's + * likely that the component in question shouldn't be rendered on the server at + * all, so a better approach would be to lazily render those in a parent + * component after client-side hydration. + * + * https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85 + * https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js + * + * @param effect + * @param deps + */ +export const useIsomorphicLayoutEffect = canUseDOM() + ? useLayoutEffect + : useEffect; diff --git a/src/hooks/useInput/useInput.ts b/src/hooks/useInput/useInput.ts index 588e1496cf..7cfa71bd00 100644 --- a/src/hooks/useInput/useInput.ts +++ b/src/hooks/useInput/useInput.ts @@ -1,4 +1,9 @@ -import React, { useState } from 'react'; +import { + ChangeEventHandler, + FocusEventHandler, + InputHTMLAttributes, + useState +} from 'react'; import { differenceInCalendarDays, format as _format, parse } from 'date-fns'; import { enUS } from 'date-fns/locale'; @@ -14,8 +19,8 @@ import { import { isValidDate } from './utils/isValidDate'; /** The props to attach to the input field when using {@link useInput}. */ -export type InputHTMLAttributes = Pick< - React.InputHTMLAttributes, +export type InputProps = Pick< + InputHTMLAttributes, 'onBlur' | 'onChange' | 'onFocus' | 'value' | 'placeholder' >; @@ -62,7 +67,7 @@ export interface UseInputValue { /** The props to pass to a DayPicker component. */ dayPickerProps: InputDayPickerProps; /** The props to pass to an input field. */ - inputProps: InputHTMLAttributes; + inputProps: InputProps; /** A function to reset to the initial state. */ reset: () => void; /** A function to set the selected day. */ @@ -120,7 +125,7 @@ export function useInput(options: UseInputOptions = {}): UseInputValue { // When changing the input field, save its value in state and check if the // string is a valid date. If it is a valid day, set it as selected and update // the calendar’s month. - const handleChange: React.ChangeEventHandler = (e) => { + const handleChange: ChangeEventHandler = (e) => { setInputValue(e.target.value); const day = parseValue(e.target.value); const isBefore = fromDate && differenceInCalendarDays(fromDate, day) > 0; @@ -135,7 +140,7 @@ export function useInput(options: UseInputOptions = {}): UseInputValue { // Special case for _required_ fields: on blur, if the value of the input is not // a valid date, reset the calendar and the input value. - const handleBlur: React.FocusEventHandler = (e) => { + const handleBlur: FocusEventHandler = (e) => { const day = parseValue(e.target.value); if (!isValidDate(day)) { reset(); @@ -144,7 +149,7 @@ export function useInput(options: UseInputOptions = {}): UseInputValue { // When focusing, make sure DayPicker visualizes the month of the date in the // input field. - const handleFocus: React.FocusEventHandler = (e) => { + const handleFocus: FocusEventHandler = (e) => { if (!e.target.value) { reset(); return; @@ -166,7 +171,7 @@ export function useInput(options: UseInputOptions = {}): UseInputValue { today }; - const inputProps: InputHTMLAttributes = { + const inputProps: InputProps = { onBlur: handleBlur, onChange: handleChange, onFocus: handleFocus, diff --git a/src/types/DayPickerBase.ts b/src/types/DayPickerBase.ts index 4216988bc0..6db683b563 100644 --- a/src/types/DayPickerBase.ts +++ b/src/types/DayPickerBase.ts @@ -1,5 +1,7 @@ import type { Locale } from 'date-fns'; +import { CSSProperties, ReactNode } from 'react'; + import { CaptionLayout, CaptionProps } from 'components/Caption'; import { CaptionLabelProps } from 'components/CaptionLabel'; import { DayProps } from 'components/Day'; @@ -64,7 +66,7 @@ export interface DayPickerBase { /** * Style to apply to the container element. */ - style?: React.CSSProperties; + style?: CSSProperties; /** * Change the inline styles of the HTML elements. */ @@ -226,7 +228,7 @@ export interface DayPickerBase { /** * Content to add to the table footer element. */ - footer?: React.ReactNode; + footer?: ReactNode; /** * When a selection mode is set, DayPicker will focus the first selected day @@ -393,7 +395,7 @@ export interface CustomComponents { * Each `Day` in DayPicker should render one of the following, according to * the return value of {@link useDayRender}. * - * - an empty `React.Fragment`, to render if `isHidden` is true + * - an empty `Fragment`, to render if `isHidden` is true * - a `button` element, when the day is interactive, e.g. is selectable * - a `div` or a `span` element, when the day is not interactive * diff --git a/src/types/EventHandlers.ts b/src/types/EventHandlers.ts index cbeeb17922..18484d13d9 100644 --- a/src/types/EventHandlers.ts +++ b/src/types/EventHandlers.ts @@ -1,3 +1,11 @@ +import { + FocusEvent, + KeyboardEvent, + MouseEvent, + PointerEvent, + TouchEvent +} from 'react'; + import { DateRange } from 'types/Matchers'; import { ActiveModifiers } from './Modifiers'; @@ -6,35 +14,35 @@ import { ActiveModifiers } from './Modifiers'; export type DayClickEventHandler = ( day: Date, activeModifiers: ActiveModifiers, - e: React.MouseEvent + e: MouseEvent ) => void; /** The event handler when a day is focused. */ export type DayFocusEventHandler = ( day: Date, activeModifiers: ActiveModifiers, - e: React.FocusEvent | React.KeyboardEvent + e: FocusEvent | KeyboardEvent ) => void; /** The event handler when a day gets a keyboard event. */ export type DayKeyboardEventHandler = ( day: Date, activeModifiers: ActiveModifiers, - e: React.KeyboardEvent + e: KeyboardEvent ) => void; /** The event handler when a day gets a mouse event. */ export type DayMouseEventHandler = ( day: Date, activeModifiers: ActiveModifiers, - e: React.MouseEvent + e: MouseEvent ) => void; /** The event handler when a day gets a pointer event. */ export type DayPointerEventHandler = ( day: Date, activeModifiers: ActiveModifiers, - e: React.PointerEvent + e: PointerEvent ) => void; /** The event handler when a month is changed in the calendar. */ @@ -49,7 +57,7 @@ export type SelectMultipleEventHandler = ( /** The day that was clicked */ activeModifiers: ActiveModifiers, /** The mouse event that triggered this event. */ - e: React.MouseEvent + e: MouseEvent ) => void; /** The event handler when selecting a range of days. */ @@ -60,7 +68,7 @@ export type SelectRangeEventHandler = ( selectedDay: Date, /** The modifiers of the selected day. */ activeModifiers: ActiveModifiers, - e: React.MouseEvent + e: MouseEvent ) => void; /** The event handler when selecting a single day. */ @@ -71,7 +79,7 @@ export type SelectSingleEventHandler = ( selectedDay: Date, /** The modifiers of the selected day. */ activeModifiers: ActiveModifiers, - e: React.MouseEvent + e: MouseEvent ) => void; /**The event handler when the week number is clicked. */ @@ -81,12 +89,12 @@ export type WeekNumberClickEventHandler = ( /** The dates in the clicked week. */ dates: Date[], /** The mouse event that triggered this event. */ - e: React.MouseEvent + e: MouseEvent ) => void; /** The event handler when a day gets a touch event. */ export type DayTouchEventHandler = ( day: Date, activeModifiers: ActiveModifiers, - e: React.TouchEvent + e: TouchEvent ) => void; diff --git a/src/types/Formatters.ts b/src/types/Formatters.ts index 2364337275..6886f971e8 100644 --- a/src/types/Formatters.ts +++ b/src/types/Formatters.ts @@ -1,10 +1,10 @@ -import React from 'react'; +import { ReactNode } from 'react'; /** Represents a function to format a date. */ export type DateFormatter = ( date: Date, options?: { locale?: Locale } -) => React.ReactNode; +) => ReactNode; /** Represent a map of formatters used to render localized content. */ export type Formatters = { @@ -26,4 +26,4 @@ export type Formatters = { export type WeekNumberFormatter = ( weekNumber: number, options?: { locale?: Locale } -) => React.ReactNode; +) => ReactNode; diff --git a/src/types/Modifiers.ts b/src/types/Modifiers.ts index 25f559f076..201df9a4cb 100644 --- a/src/types/Modifiers.ts +++ b/src/types/Modifiers.ts @@ -1,3 +1,5 @@ +import { CSSProperties } from 'react'; + import { Matcher } from './Matchers'; /** A _modifier_ represents different styles or states of a day displayed in the calendar. */ @@ -43,8 +45,8 @@ export type ActiveModifiers = Record & Partial>; /** The style to apply to each day element matching a modifier. */ -export type ModifiersStyles = Record & - Partial>; +export type ModifiersStyles = Record & + Partial>; /** The classnames to assign to each day element matching a modifier. */ export type ModifiersClassNames = Record & diff --git a/src/types/Styles.ts b/src/types/Styles.ts index b30d157282..a7d432b223 100644 --- a/src/types/Styles.ts +++ b/src/types/Styles.ts @@ -1,7 +1,7 @@ -import React from 'react'; +import { CSSProperties, ReactNode } from 'react'; /** The style (either via class names or via in-line styles) of an element. */ -export type StyledElement = { +export type StyledElement = { /** The root element. */ readonly root: T; /** The root element when `numberOfMonths > 1`. */ @@ -114,12 +114,12 @@ export type ClassNames = Partial>; * `modifiersStyles` prop. */ export type Styles = Partial< - Omit, InternalModifiersElement> + Omit, InternalModifiersElement> >; /** Props of a component that can be styled via classNames or inline-styles. */ export type StyledComponent = { className?: string; - style?: React.CSSProperties; - children?: React.ReactNode; + style?: CSSProperties; + children?: ReactNode; }; diff --git a/test/render/customRender.tsx b/test/render/customRender.tsx index 470cf2450d..e1f0d1d367 100644 --- a/test/render/customRender.tsx +++ b/test/render/customRender.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { ReactElement } from 'react'; import { render } from '@testing-library/react'; import { DayPickerProps } from 'DayPicker'; @@ -8,7 +8,7 @@ import { RootProvider } from 'contexts/RootProvider'; /** Render a React Element wrapped with the Root Provider. */ export function customRender( /** The element to render. */ - element: React.ReactElement, + element: ReactElement, /** The initial DayPicker props to pass to the Root Provider. */ dayPickerProps: DayPickerProps = {} ) { diff --git a/test/render/renderDayPickerHook.tsx b/test/render/renderDayPickerHook.tsx index 3b7906c793..165859f27e 100644 --- a/test/render/renderDayPickerHook.tsx +++ b/test/render/renderDayPickerHook.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { render } from '@testing-library/react'; import { DayPickerProps } from 'DayPicker'; diff --git a/tsconfig.json b/tsconfig.json index a65b3f9dfc..a893aaefdc 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,7 +1,7 @@ { "compilerOptions": { "target": "es5", - "jsx": "react", + "jsx": "react-jsx", "module": "es6", "moduleResolution": "node", "rootDir": "./", @@ -14,11 +14,13 @@ "sourceMap": true, "outDir": "./dist", "importHelpers": true, - "esModuleInterop": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": false, "forceConsistentCasingInFileNames": true, "strict": true, "skipLibCheck": true, - "resolveJsonModule": true + "resolveJsonModule": true, + "isolatedModules": false }, "include": ["test", "src"] } diff --git a/website/examples/controlled.tsx b/website/examples/controlled.tsx index a3257d0b02..b5af40b213 100644 --- a/website/examples/controlled.tsx +++ b/website/examples/controlled.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; -import { DayPicker } from 'react-day-picker'; import { addMonths, isSameMonth } from 'date-fns'; +import { DayPicker } from 'react-day-picker'; export default function App() { const today = new Date(); diff --git a/website/examples/custom-disable-row.tsx b/website/examples/custom-disable-row.tsx index 6d269aa68f..1665e6103d 100644 --- a/website/examples/custom-disable-row.tsx +++ b/website/examples/custom-disable-row.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { DayPicker, Row, RowProps } from 'react-day-picker'; import { differenceInCalendarDays } from 'date-fns'; +import { DayPicker, Row, RowProps } from 'react-day-picker'; function isPastDate(date: Date) { return differenceInCalendarDays(date, new Date()) < 0; diff --git a/website/examples/formatters.tsx b/website/examples/formatters.tsx index c94165b072..976faf1e56 100644 --- a/website/examples/formatters.tsx +++ b/website/examples/formatters.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { DateFormatter, DayPicker } from 'react-day-picker'; import { format } from 'date-fns'; +import { DateFormatter, DayPicker } from 'react-day-picker'; const seasonEmoji: Record = { winter: '⛄️', diff --git a/website/examples/from-to-month.tsx b/website/examples/from-to-month.tsx index 5090fdf94e..fd37bb33ec 100644 --- a/website/examples/from-to-month.tsx +++ b/website/examples/from-to-month.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import { DayPicker } from 'react-day-picker'; export default function App() { diff --git a/website/examples/from-to-year.tsx b/website/examples/from-to-year.tsx index 3bfdcf44c9..77352f4947 100644 --- a/website/examples/from-to-year.tsx +++ b/website/examples/from-to-year.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import { DayPicker } from 'react-day-picker'; export default function App() { diff --git a/website/examples/modifiers-classnames.tsx b/website/examples/modifiers-classnames.tsx index 6a4538d457..6ed18d89c1 100644 --- a/website/examples/modifiers-classnames.tsx +++ b/website/examples/modifiers-classnames.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import { DayPicker } from 'react-day-picker'; const bookedDays = [ diff --git a/website/examples/modifiers-custom.tsx b/website/examples/modifiers-custom.tsx index c7c26a138d..5bd5a5c779 100644 --- a/website/examples/modifiers-custom.tsx +++ b/website/examples/modifiers-custom.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import { DayClickEventHandler, DayPicker } from 'react-day-picker'; const bookedDays = [new Date(2021, 5, 8), new Date(2021, 5, 9)]; diff --git a/website/examples/modifiers-hidden.tsx b/website/examples/modifiers-hidden.tsx index 06f10fd3b3..2a6c634f14 100644 --- a/website/examples/modifiers-hidden.tsx +++ b/website/examples/modifiers-hidden.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import { DayPicker } from 'react-day-picker'; export default function App() { diff --git a/website/examples/modifiers-style.tsx b/website/examples/modifiers-style.tsx index f36539d462..3612ff0c6d 100644 --- a/website/examples/modifiers-style.tsx +++ b/website/examples/modifiers-style.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import { DayPicker } from 'react-day-picker'; const availableDays = [new Date(2021, 5, 23), new Date(2021, 5, 24)]; diff --git a/website/examples/multiple-months-paged.tsx b/website/examples/multiple-months-paged.tsx index 8c7c1e8585..ac47d312a5 100644 --- a/website/examples/multiple-months-paged.tsx +++ b/website/examples/multiple-months-paged.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import { DayPicker } from 'react-day-picker'; export default function App() { diff --git a/website/examples/outside-days.tsx b/website/examples/outside-days.tsx index 8709785d8e..a7b4d93305 100644 --- a/website/examples/outside-days.tsx +++ b/website/examples/outside-days.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import { DayPicker } from 'react-day-picker'; export default function App() { diff --git a/website/examples/styling-css.tsx b/website/examples/styling-css.tsx index 5c3711522e..8bedca27cd 100644 --- a/website/examples/styling-css.tsx +++ b/website/examples/styling-css.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import { DayPicker } from 'react-day-picker'; export default function App() { diff --git a/website/examples/styling-inline.tsx b/website/examples/styling-inline.tsx index bc2b737212..b086f81ff0 100644 --- a/website/examples/styling-inline.tsx +++ b/website/examples/styling-inline.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import { DayPicker } from 'react-day-picker'; export default function App() { diff --git a/website/examples/weeknumber.tsx b/website/examples/weeknumber.tsx index c823ea7a72..5e66fe85f5 100644 --- a/website/examples/weeknumber.tsx +++ b/website/examples/weeknumber.tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; + import { DayPicker } from 'react-day-picker'; export default function App() {