react-day-picker 8.10.1 → 8.10.2

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';
 
@@ -25,7 +25,7 @@ export type RootContext = RootContextProps & {
 };
 
 /** 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';
 

package/src/types/Modifiers.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 import { Matcher } from './Matchers';
 

package/src/types/Styles.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
 /** The style (either via class names or via in-line styles) of an element. */
 export type StyledElement<T = string | CSSProperties> = {