react-day-picker 8.10.1 → 8.10.2

package/README.md

@@ -30,6 +30,8 @@ pnpm install react-day-picker date-fns # using pnpm
 yarn add react-day-picker date-fns     # using yarn
 ```
 
+DayPicker v8 supports React 16.8, 17, 18, and 19, with date-fns 2 or 3.
+
 <a href="https://www.npmjs.com/package/react-day-picker"><img src="https://img.shields.io/npm/v/react-day-picker.svg?style=flat-square" alt="npm version"/></a> <img src="https://img.shields.io/npm/dm/react-day-picker.svg?style=flat-square" alt="npm downloads"/> <img src="https://img.shields.io/bundlephobia/minzip/react-day-picker" alt="Min gzipped size"/>
 
 ## Example

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { CSSProperties, ReactNode, SelectHTMLAttributes, ChangeEventHandler, MouseEvent, FocusEvent, KeyboardEvent, PointerEvent, TouchEvent, InputHTMLAttributes, HTMLProps, RefObject } from 'react';
+import { ReactElement, CSSProperties, ReactNode, SelectHTMLAttributes, ChangeEventHandler, MouseEvent, FocusEvent, KeyboardEvent, PointerEvent, TouchEvent, ComponentPropsWithRef, InputHTMLAttributes, HTMLProps, RefObject } from 'react';
 import { Locale } from 'date-fns';
 
 /** Represent the props of the {@link Caption} component. */
@@ -23,7 +23,7 @@ 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.
  */
-declare function Caption(props: CaptionProps): JSX.Element;
+declare function Caption(props: CaptionProps): ReactElement;
 
 /** The props for the {@link CaptionLabel} component. */
 interface CaptionLabelProps {
@@ -35,7 +35,7 @@ interface CaptionLabelProps {
     displayIndex?: number | undefined;
 }
 /** Render the caption for the displayed month. This component is used when `captionLayout="buttons"`. */
-declare function CaptionLabel(props: CaptionLabelProps): JSX.Element;
+declare function CaptionLabel(props: CaptionLabelProps): ReactElement;
 
 /** Represent the props used by the {@link Day} component. */
 interface DayProps {
@@ -48,7 +48,7 @@ interface DayProps {
  * The content of a day cell – as a button or span element according to its
  * modifiers.
  */
-declare function Day(props: DayProps): JSX.Element;
+declare function Day(props: DayProps): ReactElement;
 
 /**
  * A value or a function that matches a specific day.
@@ -193,7 +193,7 @@ interface DayContentProps {
     activeModifiers: ActiveModifiers;
 }
 /** Render the content of the day cell. */
-declare function DayContent(props: DayContentProps): JSX.Element;
+declare function DayContent(props: DayContentProps): ReactElement;
 
 /** The props for the {@link Dropdown} component. */
 interface DropdownProps {
@@ -213,14 +213,14 @@ interface DropdownProps {
  * Render a styled select component – displaying a caption and a custom
  * drop-down icon.
  */
-declare function Dropdown(props: DropdownProps): JSX.Element;
+declare function Dropdown(props: DropdownProps): ReactElement;
 
 interface FooterProps {
     /** The month where the footer is displayed. */
     displayMonth?: Date;
 }
 /** Render the Footer component (empty as default).*/
-declare function Footer(props: FooterProps): JSX.Element;
+declare function Footer(props: FooterProps): ReactElement;
 
 /** The props for the {@link Months} component. */
 type MonthsProps = {
@@ -229,7 +229,7 @@ type MonthsProps = {
 /**
  * Render the wrapper for the month grids.
  */
-declare function Months(props: MonthsProps): JSX.Element;
+declare function Months(props: MonthsProps): ReactElement;
 
 /**
  * The props for the {@link Row} component.
@@ -243,7 +243,7 @@ interface RowProps {
     dates: Date[];
 }
 /** Render a row in the calendar, with the days and the week number. */
-declare function Row(props: RowProps): JSX.Element;
+declare function Row(props: RowProps): ReactElement;
 
 /**
  * The props for the {@link WeekNumber} component.
@@ -258,7 +258,7 @@ interface WeekNumberProps {
  * Render the week number element. If `onWeekNumberClick` is passed to DayPicker, it
  * renders a button, otherwise a span element.
  */
-declare function WeekNumber(props: WeekNumberProps): JSX.Element;
+declare function WeekNumber(props: WeekNumberProps): ReactElement;
 
 /** The event handler when a day is clicked. */
 type DayClickEventHandler = (day: Date, activeModifiers: ActiveModifiers, e: MouseEvent) => void;
@@ -796,9 +796,9 @@ interface DayPickerBase {
  */
 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.
      *
@@ -810,29 +810,29 @@ 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;
 }
 
 /** The props for the {@link DayPicker} component when using `mode="default"` or `undefined`. */
@@ -910,7 +910,7 @@ interface DayPickerProviderProps {
  * The provider for the {@link DayPickerContext}, assigning the defaults from the
  * initial DayPicker props.
  */
-declare function DayPickerProvider(props: DayPickerProviderProps): JSX.Element;
+declare function DayPickerProvider(props: DayPickerProviderProps): ReactElement;
 /**
  * Hook to access the {@link DayPickerContextValue}.
  *
@@ -1022,45 +1022,47 @@ type DayPickerProps = DayPickerDefaultProps | DayPickerSingleProps | DayPickerMu
  * <DayPicker locale={es} />
  * ```
  */
-declare function DayPicker(props: DayPickerDefaultProps | DayPickerSingleProps | DayPickerMultipleProps | DayPickerRangeProps): JSX.Element;
+declare function DayPicker(props: DayPickerDefaultProps | DayPickerSingleProps | DayPickerMultipleProps | DayPickerRangeProps): ReactElement;
 
 /** The props for the {@link Button} component. */
-type ButtonProps = JSX.IntrinsicElements['button'];
+type ButtonProps = ComponentPropsWithRef<'button'>;
 /** Render a button HTML element applying the reset class name. */
-declare const Button: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare const Button: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | react.RefObject<HTMLButtonElement> | null | undefined;
+}, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
 /**
  * Render a caption with the dropdowns to navigate between months and years.
  */
-declare function CaptionDropdowns(props: CaptionProps): JSX.Element;
+declare function CaptionDropdowns(props: CaptionProps): ReactElement;
 
 /**
  * Render a caption with a button-based navigation.
  */
-declare function CaptionNavigation(props: CaptionProps): JSX.Element;
+declare function CaptionNavigation(props: CaptionProps): ReactElement;
 
 /** Render the table head. */
-declare function Head(): JSX.Element;
+declare function Head(): ReactElement;
 
 /**
  * Render the HeadRow component - i.e. the table head row with the weekday names.
  */
-declare function HeadRow(): JSX.Element;
+declare function HeadRow(): ReactElement;
 
 /**
  * Render the icon in the styled drop-down.
  */
-declare function IconDropdown(props: StyledComponent): JSX.Element;
+declare function IconDropdown(props: StyledComponent): ReactElement;
 
 /**
  * Render the "next month" button in the navigation.
  */
-declare function IconRight(props: StyledComponent): JSX.Element;
+declare function IconRight(props: StyledComponent): ReactElement;
 
 /**
  * Render the "previous month" button in the navigation.
  */
-declare function IconLeft(props: StyledComponent): JSX.Element;
+declare function IconLeft(props: StyledComponent): ReactElement;
 
 /** The props to attach to the input field when using {@link useInput}. */
 type InputProps = Pick<InputHTMLAttributes<HTMLInputElement>, 'onBlur' | 'onChange' | 'onFocus' | 'value' | 'placeholder'>;
@@ -1175,7 +1177,7 @@ type FocusProviderProps = {
     children: ReactNode;
 };
 /** The provider for the {@link FocusContext}. */
-declare function FocusProvider(props: FocusProviderProps): JSX.Element;
+declare function FocusProvider(props: FocusProviderProps): ReactElement;
 /**
  * Hook to access the {@link FocusContextValue}. Use this hook to handle the
  * focus state of the elements.
@@ -1209,7 +1211,7 @@ declare const NavigationContext: react.Context<NavigationContextValue | undefine
 /** Provides the values for the {@link NavigationContext}. */
 declare function NavigationProvider(props: {
     children?: ReactNode;
-}): JSX.Element;
+}): ReactElement;
 /**
  * Hook to access the {@link NavigationContextValue}. Use this hook to navigate
  * between months or years in DayPicker.
@@ -1224,7 +1226,7 @@ type RootContext = RootContextProps & {
     children?: ReactNode;
 };
 /** Provide the value for all the context providers. */
-declare function RootProvider(props: RootContext): JSX.Element;
+declare function RootProvider(props: RootContext): ReactElement;
 
 /** Represent the modifiers that are changed by the multiple selection. */
 type SelectMultipleModifiers = Pick<Modifiers, InternalModifier.Disabled>;
@@ -1249,13 +1251,13 @@ type SelectMultipleProviderProps = {
     children?: ReactNode;
 };
 /** Provides the values for the {@link SelectMultipleContext}. */
-declare function SelectMultipleProvider(props: SelectMultipleProviderProps): JSX.Element;
+declare function SelectMultipleProvider(props: SelectMultipleProviderProps): ReactElement;
 /** @private */
 interface SelectMultipleProviderInternalProps {
     initialProps: DayPickerMultipleProps;
     children?: ReactNode;
 }
-declare function SelectMultipleProviderInternal({ initialProps, children }: SelectMultipleProviderInternalProps): JSX.Element;
+declare function SelectMultipleProviderInternal({ initialProps, children }: SelectMultipleProviderInternalProps): ReactElement;
 /**
  * Hook to access the {@link SelectMultipleContextValue}.
  *
@@ -1286,13 +1288,13 @@ interface SelectRangeProviderProps {
     children?: ReactNode;
 }
 /** Provides the values for the {@link SelectRangeProvider}. */
-declare function SelectRangeProvider(props: SelectRangeProviderProps): JSX.Element;
+declare function SelectRangeProvider(props: SelectRangeProviderProps): ReactElement;
 /** @private */
 interface SelectRangeProviderInternalProps {
     initialProps: DayPickerRangeProps;
     children?: ReactNode;
 }
-declare function SelectRangeProviderInternal({ initialProps, children }: SelectRangeProviderInternalProps): JSX.Element;
+declare function SelectRangeProviderInternal({ initialProps, children }: SelectRangeProviderInternalProps): ReactElement;
 /**
  * Hook to access the {@link SelectRangeContextValue}.
  *
@@ -1319,13 +1321,13 @@ interface SelectSingleProviderProps {
     children?: ReactNode;
 }
 /** Provides the values for the {@link SelectSingleProvider}. */
-declare function SelectSingleProvider(props: SelectSingleProviderProps): JSX.Element;
+declare function SelectSingleProvider(props: SelectSingleProviderProps): ReactElement;
 /** @private */
 interface SelectSingleProviderInternal {
     initialProps: DayPickerSingleProps;
     children?: ReactNode;
 }
-declare function SelectSingleProviderInternal({ initialProps, children }: SelectSingleProviderInternal): JSX.Element;
+declare function SelectSingleProviderInternal({ initialProps, children }: SelectSingleProviderInternal): ReactElement;
 /**
  * Hook to access the {@link SelectSingleContextValue}.
  *