react-day-picker 8.10.0 → 8.10.2

package/src/components/Caption/Caption.tsx

@@ -1,3 +1,5 @@
+import type { ReactElement } from 'react';
+
 import { CaptionDropdowns } from 'components/CaptionDropdowns';
 import { CaptionLabel } from 'components/CaptionLabel';
 import { CaptionNavigation } from 'components/CaptionNavigation';
@@ -26,13 +28,13 @@ export type CaptionLayout = 'dropdown' | 'buttons' | 'dropdown-buttons';
  * Render the caption of a month. The caption has a different layout when
  * setting the {@link DayPickerBase.captionLayout} prop.
  */
-export function Caption(props: CaptionProps): JSX.Element {
+export function Caption(props: CaptionProps): ReactElement {
   const { classNames, disableNavigation, styles, captionLayout, components } =
     useDayPicker();
 
   const CaptionLabelComponent = components?.CaptionLabel ?? CaptionLabel;
 
-  let caption: JSX.Element;
+  let caption: ReactElement;
   if (disableNavigation) {
     caption = (
       <CaptionLabelComponent id={props.id} displayMonth={props.displayMonth} />

package/src/components/CaptionDropdowns/CaptionDropdowns.tsx

@@ -1,3 +1,5 @@
+import type { ReactElement } from 'react';
+
 import { addMonths } from 'date-fns';
 
 import { CaptionProps } from 'components/Caption/Caption';
@@ -11,7 +13,7 @@ import { MonthChangeEventHandler } from 'types/EventHandlers';
 /**
  * Render a caption with the dropdowns to navigate between months and years.
  */
-export function CaptionDropdowns(props: CaptionProps): JSX.Element {
+export function CaptionDropdowns(props: CaptionProps): ReactElement {
   const { classNames, styles, components } = useDayPicker();
   const { goToMonth } = useNavigation();
 

package/src/components/CaptionLabel/CaptionLabel.tsx

@@ -1,3 +1,5 @@
+import type { ReactElement } from 'react';
+
 import { useDayPicker } from 'contexts/DayPicker';
 
 /** The props for the {@link CaptionLabel} component. */
@@ -11,7 +13,7 @@ export interface CaptionLabelProps {
 }
 
 /** Render the caption for the displayed month. This component is used when `captionLayout="buttons"`. */
-export function CaptionLabel(props: CaptionLabelProps): JSX.Element {
+export function CaptionLabel(props: CaptionLabelProps): ReactElement {
   const {
     locale,
     classNames,

package/src/components/CaptionNavigation/CaptionNavigation.tsx

@@ -1,4 +1,4 @@
-import { MouseEventHandler } from 'react';
+import type { MouseEventHandler, ReactElement } from 'react';
 
 import { isSameMonth } from 'date-fns';
 
@@ -10,7 +10,7 @@ import { useNavigation } from 'contexts/Navigation';
 /**
  * Render a caption with a button-based navigation.
  */
-export function CaptionNavigation(props: CaptionProps): JSX.Element {
+export function CaptionNavigation(props: CaptionProps): ReactElement {
   const { numberOfMonths } = useDayPicker();
   const { previousMonth, nextMonth, goToMonth, displayMonths } =
     useNavigation();

package/src/components/Day/Day.tsx

@@ -1,4 +1,5 @@
 import { useRef } from 'react';
+import type { ReactElement } from 'react';
 
 import { useDayRender } from 'hooks/useDayRender';
 
@@ -16,7 +17,7 @@ export interface DayProps {
  * The content of a day cell – as a button or span element according to its
  * modifiers.
  */
-export function Day(props: DayProps): JSX.Element {
+export function Day(props: DayProps): ReactElement {
   const buttonRef = useRef<HTMLButtonElement>(null);
   const dayRender = useDayRender(props.date, props.displayMonth, buttonRef);
 

package/src/components/DayContent/DayContent.tsx

@@ -1,3 +1,5 @@
+import type { ReactElement } from 'react';
+
 import { useDayPicker } from 'contexts/DayPicker';
 import { ActiveModifiers } from 'types/Modifiers';
 
@@ -12,7 +14,7 @@ export interface DayContentProps {
 }
 
 /** Render the content of the day cell. */
-export function DayContent(props: DayContentProps): JSX.Element {
+export function DayContent(props: DayContentProps): ReactElement {
   const {
     locale,
     formatters: { formatDay }

package/src/components/Dropdown/Dropdown.tsx

@@ -1,6 +1,7 @@
-import {
+import type {
   ChangeEventHandler,
   CSSProperties,
+  ReactElement,
   ReactNode,
   SelectHTMLAttributes
 } from 'react';
@@ -27,7 +28,7 @@ export interface DropdownProps {
  * Render a styled select component – displaying a caption and a custom
  * drop-down icon.
  */
-export function Dropdown(props: DropdownProps): JSX.Element {
+export function Dropdown(props: DropdownProps): ReactElement {
   const { onChange, value, children, caption, className, style } = props;
   const dayPicker = useDayPicker();
 

package/src/components/Footer/Footer.tsx

@@ -1,3 +1,5 @@
+import type { ReactElement } from 'react';
+
 import { useDayPicker } from 'contexts/DayPicker';
 
 export interface FooterProps {
@@ -6,7 +8,7 @@ export interface FooterProps {
 }
 /** Render the Footer component (empty as default).*/
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function Footer(props: FooterProps): JSX.Element {
+export function Footer(props: FooterProps): ReactElement {
   const {
     footer,
     styles,

package/src/components/Head/Head.tsx

@@ -1,8 +1,10 @@
+import type { ReactElement } from 'react';
+
 import { HeadRow } from 'components/HeadRow';
 import { useDayPicker } from 'contexts/DayPicker';
 
 /** Render the table head. */
-export function Head(): JSX.Element {
+export function Head(): ReactElement {
   const { classNames, styles, components } = useDayPicker();
   const HeadRowComponent = components?.HeadRow ?? HeadRow;
   return (

package/src/components/HeadRow/HeadRow.tsx

@@ -1,3 +1,5 @@
+import type { ReactElement } from 'react';
+
 import { useDayPicker } from 'contexts/DayPicker';
 
 import { getWeekdays } from './utils';
@@ -5,7 +7,7 @@ import { getWeekdays } from './utils';
 /**
  * Render the HeadRow component - i.e. the table head row with the weekday names.
  */
-export function HeadRow(): JSX.Element {
+export function HeadRow(): ReactElement {
   const {
     classNames,
     styles,

package/src/components/IconDropdown/IconDropdown.tsx

@@ -1,9 +1,11 @@
+import type { ReactElement } from 'react';
+
 import { StyledComponent } from 'types/Styles';
 
 /**
  * Render the icon in the styled drop-down.
  */
-export function IconDropdown(props: StyledComponent): JSX.Element {
+export function IconDropdown(props: StyledComponent): ReactElement {
   return (
     <svg
       width="8px"

package/src/components/IconLeft/IconLeft.tsx

@@ -1,9 +1,11 @@
+import type { ReactElement } from 'react';
+
 import { StyledComponent } from 'types/Styles';
 
 /**
  * Render the "previous month" button in the navigation.
  */
-export function IconLeft(props: StyledComponent): JSX.Element {
+export function IconLeft(props: StyledComponent): ReactElement {
   return (
     <svg width="16px" height="16px" viewBox="0 0 120 120" {...props}>
       <path

package/src/components/IconRight/IconRight.tsx

@@ -1,9 +1,11 @@
+import type { ReactElement } from 'react';
+
 import { StyledComponent } from 'types/Styles';
 
 /**
  * Render the "next month" button in the navigation.
  */
-export function IconRight(props: StyledComponent): JSX.Element {
+export function IconRight(props: StyledComponent): ReactElement {
   return (
     <svg width="16px" height="16px" viewBox="0 0 120 120" {...props}>
       <path

package/src/components/Months/Months.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import { useDayPicker } from 'contexts/DayPicker';
 
@@ -8,7 +8,7 @@ export type MonthsProps = { children: ReactNode };
 /**
  * Render the wrapper for the month grids.
  */
-export function Months(props: MonthsProps): JSX.Element {
+export function Months(props: MonthsProps): ReactElement {
   const { classNames, styles } = useDayPicker();
 
   return (

package/src/components/MonthsDropdown/MonthsDropdown.tsx

@@ -1,4 +1,4 @@
-import { ChangeEventHandler } from 'react';
+import type { ChangeEventHandler, ReactElement } from 'react';
 
 import { isSameYear, setMonth, startOfMonth } from 'date-fns';
 
@@ -14,7 +14,7 @@ export interface MonthsDropdownProps {
 }
 
 /** Render the dropdown to navigate between months. */
-export function MonthsDropdown(props: MonthsDropdownProps): JSX.Element {
+export function MonthsDropdown(props: MonthsDropdownProps): ReactElement {
   const {
     fromDate,
     toDate,

package/src/components/Navigation/Navigation.tsx

@@ -1,4 +1,4 @@
-import { MouseEventHandler } from 'react';
+import type { MouseEventHandler, ReactElement } from 'react';
 
 import { IconLeft } from 'components/IconLeft';
 import { IconRight } from 'components/IconRight';
@@ -25,7 +25,7 @@ export interface NavigationProps {
 }
 
 /** A component rendering the navigation buttons or the drop-downs. */
-export function Navigation(props: NavigationProps): JSX.Element {
+export function Navigation(props: NavigationProps): ReactElement {
   const {
     dir,
     locale,

package/src/components/Root/Root.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import type { ReactElement } from 'react';
 
 import { DayPickerProps } from 'DayPicker';
 
@@ -19,7 +20,7 @@ export interface RootProps {
 }
 
 /** Render the container with the months according to the number of months to display. */
-export function Root({ initialProps }: RootProps): JSX.Element {
+export function Root({ initialProps }: RootProps): ReactElement {
   const dayPicker = useDayPicker();
   const focusContext = useFocusContext();
   const navigation = useNavigation();

package/src/components/Row/Row.tsx

@@ -1,3 +1,5 @@
+import type { ReactElement } from 'react';
+
 import { getUnixTime } from 'date-fns';
 
 import { Day } from 'components/Day';
@@ -17,7 +19,7 @@ export interface RowProps {
 }
 
 /** Render a row in the calendar, with the days and the week number. */
-export function Row(props: RowProps): JSX.Element {
+export function Row(props: RowProps): ReactElement {
   const { styles, classNames, showWeekNumber, components } = useDayPicker();
 
   const DayComponent = components?.Day ?? Day;

package/src/components/Table/Table.tsx

@@ -1,3 +1,5 @@
+import type { ReactElement } from 'react';
+
 import { Footer } from 'components/Footer';
 import { Head } from 'components/Head';
 import { Row } from 'components/Row';
@@ -16,7 +18,7 @@ export interface TableProps {
 }
 
 /** Render the table with the calendar. */
-export function Table(props: TableProps): JSX.Element {
+export function Table(props: TableProps): ReactElement {
   const {
     locale,
     classNames,

package/src/components/WeekNumber/WeekNumber.tsx

@@ -1,4 +1,4 @@
-import { MouseEventHandler } from 'react';
+import type { MouseEventHandler, ReactElement } from 'react';
 
 import { useDayPicker } from 'contexts/DayPicker';
 
@@ -18,7 +18,7 @@ export interface WeekNumberProps {
  * Render the week number element. If `onWeekNumberClick` is passed to DayPicker, it
  * renders a button, otherwise a span element.
  */
-export function WeekNumber(props: WeekNumberProps): JSX.Element {
+export function WeekNumber(props: WeekNumberProps): ReactElement {
   const { number: weekNumber, dates } = props;
   const {
     onWeekNumberClick,

package/src/components/YearsDropdown/YearsDropdown.tsx

@@ -1,4 +1,4 @@
-import { ChangeEventHandler } from 'react';
+import type { ChangeEventHandler, ReactElement } from 'react';
 
 import { setYear, startOfMonth, startOfYear } from 'date-fns';
 
@@ -20,7 +20,7 @@ export interface YearsDropdownProps {
  * Render a dropdown to change the year. Take in account the `nav.fromDate` and
  * `toDate` from context.
  */
-export function YearsDropdown(props: YearsDropdownProps): JSX.Element {
+export function YearsDropdown(props: YearsDropdownProps): ReactElement {
   const { displayMonth } = props;
   const {
     fromDate,

package/src/contexts/DayPicker/DayPickerContext.tsx

@@ -1,4 +1,5 @@
-import { createContext, ReactNode, useContext } from 'react';
+import { createContext, useContext } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import { Locale } from 'date-fns';
 import { DayPickerProps } from 'DayPicker';
@@ -68,7 +69,7 @@ export interface DayPickerProviderProps {
  * The provider for the {@link DayPickerContext}, assigning the defaults from the
  * initial DayPicker props.
  */
-export function DayPickerProvider(props: DayPickerProviderProps): JSX.Element {
+export function DayPickerProvider(props: DayPickerProviderProps): ReactElement {
   const { initialProps } = props;
 
   const defaultContextValues = getDefaultContextValues();

package/src/contexts/Focus/FocusContext.tsx

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

package/src/contexts/Modifiers/ModifiersContext.tsx

@@ -1,4 +1,5 @@
-import { createContext, useContext, ReactNode } from 'react';
+import { createContext, useContext } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import { useDayPicker } from 'contexts/DayPicker';
 import { useSelectMultiple } from 'contexts/SelectMultiple';
@@ -14,7 +15,7 @@ export const ModifiersContext = createContext<Modifiers | undefined>(undefined);
 export type ModifiersProviderProps = { children: ReactNode };
 
 /** Provide the value for the {@link ModifiersContext}. */
-export function ModifiersProvider(props: ModifiersProviderProps): JSX.Element {
+export function ModifiersProvider(props: ModifiersProviderProps): ReactElement {
   const dayPicker = useDayPicker();
   const selectMultiple = useSelectMultiple();
   const selectRange = useSelectRange();

package/src/contexts/Navigation/NavigationContext.tsx

@@ -1,4 +1,5 @@
-import { createContext, ReactNode, useContext } from 'react';
+import { createContext, useContext } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import { addMonths, isBefore, isSameMonth } from 'date-fns';
 
@@ -37,7 +38,7 @@ export const NavigationContext = createContext<
 /** Provides the values for the {@link NavigationContext}. */
 export function NavigationProvider(props: {
   children?: ReactNode;
-}): JSX.Element {
+}): ReactElement {
   const dayPicker = useDayPicker();
   const [currentMonth, goToMonth] = useNavigationState();
 

package/src/contexts/RootProvider.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import { ModifiersProvider } from 'contexts/Modifiers/ModifiersContext';
 
@@ -8,14 +8,24 @@ import { NavigationProvider } from './Navigation';
 import { SelectMultipleProvider } from './SelectMultiple';
 import { SelectRangeProvider } from './SelectRange';
 import { SelectSingleProvider } from './SelectSingle';
+import { DayPickerDefaultProps } from 'types/DayPickerDefault';
+import { DayPickerSingleProps } from 'types/DayPickerSingle';
+import { DayPickerMultipleProps } from 'types/DayPickerMultiple';
+import { DayPickerRangeProps } from 'types/DayPickerRange';
+
+type RootContextProps =
+  | Partial<DayPickerDefaultProps>
+  | Partial<DayPickerSingleProps>
+  | Partial<DayPickerMultipleProps>
+  | Partial<DayPickerRangeProps>;
 
 /** The props of {@link RootProvider}. */
-export interface RootContext {
+export type RootContext = RootContextProps & {
   children?: ReactNode;
-}
+};
 
 /** Provide the value for all the context providers. */
-export function RootProvider(props: RootContext): JSX.Element {
+export function RootProvider(props: RootContext): ReactElement {
   const { children, ...initialProps } = props;
 
   return (

package/src/contexts/SelectMultiple/SelectMultipleContext.test.ts

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import type { MouseEvent } from 'react';
 
 import { addDays, addMonths } from 'date-fns';
 import { DayPickerProps } from 'DayPicker';

package/src/contexts/SelectMultiple/SelectMultipleContext.tsx

@@ -1,4 +1,5 @@
-import { createContext, ReactNode, useContext } from 'react';
+import { createContext, useContext } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import { isSameDay } from 'date-fns';
 
@@ -44,7 +45,7 @@ export type SelectMultipleProviderProps = {
 /** Provides the values for the {@link SelectMultipleContext}. */
 export function SelectMultipleProvider(
   props: SelectMultipleProviderProps
-): JSX.Element {
+): ReactElement {
   if (!isDayPickerMultiple(props.initialProps)) {
     const emptyContextValue: SelectMultipleContextValue = {
       selected: undefined,
@@ -75,7 +76,7 @@ export interface SelectMultipleProviderInternalProps {
 export function SelectMultipleProviderInternal({
   initialProps,
   children
-}: SelectMultipleProviderInternalProps): JSX.Element {
+}: SelectMultipleProviderInternalProps): ReactElement {
   const { selected, min, max } = initialProps;
 
   const onDayClick: DayClickEventHandler = (day, activeModifiers, e) => {

package/src/contexts/SelectRange/SelectRangeContext.test.ts

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import type { MouseEvent } from 'react';
 
 import {
   addDays,

package/src/contexts/SelectRange/SelectRangeContext.tsx

@@ -1,4 +1,5 @@
-import { createContext, ReactNode, useContext } from 'react';
+import { createContext, useContext } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import {
   addDays,
@@ -52,7 +53,7 @@ export interface SelectRangeProviderProps {
 /** Provides the values for the {@link SelectRangeProvider}. */
 export function SelectRangeProvider(
   props: SelectRangeProviderProps
-): JSX.Element {
+): ReactElement {
   if (!isDayPickerRange(props.initialProps)) {
     const emptyContextValue: SelectRangeContextValue = {
       selected: undefined,
@@ -86,7 +87,7 @@ export interface SelectRangeProviderInternalProps {
 export function SelectRangeProviderInternal({
   initialProps,
   children
-}: SelectRangeProviderInternalProps): JSX.Element {
+}: SelectRangeProviderInternalProps): ReactElement {
   const { selected } = initialProps;
   const { from: selectedFrom, to: selectedTo } = selected || {};
   const min = initialProps.min;

package/src/contexts/SelectSingle/SelectSingleContext.test.ts

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import type { MouseEvent } from 'react';
 
 import { DayPickerProps } from 'DayPicker';
 

package/src/contexts/SelectSingle/SelectSingleContext.tsx

@@ -1,4 +1,5 @@
-import { createContext, ReactNode, useContext } from 'react';
+import { createContext, useContext } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import { DayPickerBase } from 'types/DayPickerBase';
 import { DayPickerSingleProps, isDayPickerSingle } from 'types/DayPickerSingle';
@@ -30,7 +31,7 @@ export interface SelectSingleProviderProps {
 /** Provides the values for the {@link SelectSingleProvider}. */
 export function SelectSingleProvider(
   props: SelectSingleProviderProps
-): JSX.Element {
+): ReactElement {
   if (!isDayPickerSingle(props.initialProps)) {
     const emptyContextValue: SelectSingleContextValue = {
       selected: undefined
@@ -58,7 +59,7 @@ export interface SelectSingleProviderInternal {
 export function SelectSingleProviderInternal({
   initialProps,
   children
-}: SelectSingleProviderInternal): JSX.Element {
+}: SelectSingleProviderInternal): ReactElement {
   const onDayClick: DayClickEventHandler = (day, activeModifiers, e) => {
     initialProps.onDayClick?.(day, activeModifiers, e);
 

package/src/hooks/useControlledValue/useControlledValue.test.ts

@@ -1,4 +1,4 @@
-import { act } from 'react-dom/test-utils';
+import { act } from '@testing-library/react';
 
 import { renderDayPickerHook } from 'test/render';
 

package/src/hooks/useDayEventHandlers/useDayEventHandlers.tsx

@@ -1,4 +1,4 @@
-import {
+import type {
   FocusEventHandler,
   HTMLProps,
   KeyboardEventHandler,

package/src/hooks/useDayRender/useDayRender.tsx

@@ -1,4 +1,5 @@
-import { RefObject, useEffect } from 'react';
+import { useEffect } from 'react';
+import type { RefObject } from 'react';
 
 import { isSameDay } from 'date-fns';
 

package/src/hooks/useDayRender/utils/getDayStyle.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 import { DayPickerContextValue } from 'contexts/DayPicker';
 import { ActiveModifiers } from 'types/Modifiers';

package/src/hooks/useInput/useInput.ts

@@ -1,8 +1,8 @@
-import {
+import { useState } from 'react';
+import type {
   ChangeEventHandler,
   FocusEventHandler,
-  InputHTMLAttributes,
-  useState
+  InputHTMLAttributes
 } from 'react';
 
 import { differenceInCalendarDays, format as _format, parse } from 'date-fns';

package/src/types/DayPickerBase.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
 
 import { Locale } from 'date-fns';
 
@@ -386,9 +386,9 @@ export interface DayPickerBase {
  */
 export interface CustomComponents {
   /** The component for the caption element. */
-  Caption?: (props: CaptionProps) => JSX.Element | null;
+  Caption?: (props: CaptionProps) => ReactElement | null;
   /** The component for the caption element. */
-  CaptionLabel?: (props: CaptionLabelProps) => JSX.Element | null;
+  CaptionLabel?: (props: CaptionLabelProps) => ReactElement | null;
   /**
    * The component for the day element.
    *
@@ -400,27 +400,27 @@ export interface CustomComponents {
    * - a `div` or a `span` element, when the day is not interactive
    *
    */
-  Day?: (props: DayProps) => JSX.Element | null;
+  Day?: (props: DayProps) => ReactElement | null;
   /** The component for the content of the day element. */
-  DayContent?: (props: DayContentProps) => JSX.Element | null;
+  DayContent?: (props: DayContentProps) => ReactElement | null;
   /** The component for the drop-down elements. */
-  Dropdown?: (props: DropdownProps) => JSX.Element | null;
+  Dropdown?: (props: DropdownProps) => ReactElement | null;
   /** The component for the table footer. */
-  Footer?: (props: FooterProps) => JSX.Element | null;
+  Footer?: (props: FooterProps) => ReactElement | null;
   /** The component for the table’s head. */
-  Head?: () => JSX.Element | null;
+  Head?: () => ReactElement | null;
   /** The component for the table’s head row. */
-  HeadRow?: () => JSX.Element | null;
+  HeadRow?: () => ReactElement | null;
   /** The component for the small icon in the drop-downs. */
-  IconDropdown?: (props: StyledComponent) => JSX.Element | null;
+  IconDropdown?: (props: StyledComponent) => ReactElement | null;
   /** The arrow right icon (used for the Navigation buttons). */
-  IconRight?: (props: StyledComponent) => JSX.Element | null;
+  IconRight?: (props: StyledComponent) => ReactElement | null;
   /** The arrow left icon (used for the Navigation buttons). */
-  IconLeft?: (props: StyledComponent) => JSX.Element | null;
+  IconLeft?: (props: StyledComponent) => ReactElement | null;
   /** The component wrapping the month grids. */
-  Months?: (props: MonthsProps) => JSX.Element | null;
+  Months?: (props: MonthsProps) => ReactElement | null;
   /** The component for the table rows. */
-  Row?: (props: RowProps) => JSX.Element | null;
+  Row?: (props: RowProps) => ReactElement | null;
   /** The component for the week number in the table rows. */
-  WeekNumber?: (props: WeekNumberProps) => JSX.Element | null;
+  WeekNumber?: (props: WeekNumberProps) => ReactElement | null;
 }

package/src/types/EventHandlers.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   FocusEvent,
   KeyboardEvent,
   MouseEvent,

package/src/types/Formatters.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import { Locale } from 'date-fns';