react-day-picker 8.0.0-beta.33 → 8.0.0-beta.38

package/{build → dist}/types/DayPicker.d.ts

@@ -1,228 +1,249 @@
-/// <reference types="react" />
-import { Locale } from 'date-fns';
-import { CaptionLabelProps, CaptionLayout, CaptionProps, DayContentProps, DayProps, DropdownProps, RowProps, WeekNumberProps } from '../components';
-import { DayClickEventHandler, DayFocusEventHandler, DayKeyboardEventHandler, DayMouseEventHandler, DayTouchEventHandler, MonthChangeEventHandler, WeekNumberClickEventHandler } from './EventHandlers';
-import { Formatters } from './Formatters';
-import { Labels } from './Labels';
-import { Matcher } from './Matchers';
-import { CustomModifiers, ModifierClassNames, ModifierStyles } from './Modifiers';
-import { ClassNames, StyledComponent, Styles } from './Styles';
-/**
- * The props for the [[DayPicker]] component.
- */
-export interface DayPickerProps {
-    /** CSS class to add to the root UI element. */
-    className?: string;
-    /**
-     * Change the class names.
-     *
-     * Use this prop when you need to change the default class names — for example
-     * when using CSS modules.
-     */
-    classNames?: ClassNames;
-    /**
-     * Change the class name for the day matching the [[modifiers]].
-     */
-    modifierClassNames?: ModifierClassNames;
-    /**
-     * Style to apply to the container element.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Change the inline styles for each UIElement.
-     */
-    styles?: Styles;
-    /**
-     * Change the inline style for the day matching the [[modifiers]].
-     */
-    modifierStyles?: ModifierStyles;
-    /**
-     * The initial month to show in the calendar. Default is the current month.
-     *
-     * As opposed to [[month]], use this prop to let DayPicker control the current
-     * month.
-     */
-    defaultMonth?: Date;
-    /**
-     * The month to display in the calendar.
-     *
-     * As opposed to [[defaultMonth]], use this prop with [[onMonthChange]] to
-     * change the month programmatically.
-     */
-    month?: Date;
-    /**
-     * Event fired when the user navigates between months.
-     */
-    onMonthChange?: MonthChangeEventHandler;
-    /**
-     * The number of displayed months. Defaults to `1`.
-     */
-    numberOfMonths?: number;
-    /**
-     * The earliest day to start the month navigation.
-     */
-    fromDate?: Date;
-    /**
-     * The latest day to end the month navigation.
-     */
-    toDate?: Date;
-    /**
-     * The earliest month to start the month navigation.
-     */
-    fromMonth?: Date;
-    /**
-     * The latest month to end the month navigation.
-     */
-    toMonth?: Date;
-    /**
-     * The earliest year to start the month navigation.
-     */
-    fromYear?: number;
-    /**
-     * The latest year to end the month navigation.
-     */
-    toYear?: number;
-    /**
-     * Disable the navigation between months.
-     */
-    disableNavigation?: boolean;
-    /**
-     * Paginate the month navigation displaying the [[numberOfMonths]] at time.
-     */
-    pagedNavigation?: boolean;
-    /**
-     * Render the months in reversed order (when [[numberOfMonths]] is greater
-     * than `1`) to display the most recent month first.
-     */
-    reverseMonths?: boolean;
-    /**
-     * Change the layout of the caption:
-     *
-     * - `buttons` (default): display prev/right buttons
-     * - `dropdown`: display drop-downs to change the month and the year
-     *
-     * **Note** `dropdown` is valid only when `fromDate/fromMonth/fromYear` and
-     * `toDate/toMonth/toYear` are set.
-     */
-    captionLayout?: CaptionLayout;
-    /**
-     * Display six weeks per months, regardless the month’s number of weeks.
-     * To use this prop, [[showOutsideDays]] must be set. Default to `false`.
-     */
-    fixedWeeks?: boolean;
-    /**
-     * Hide the month’s head displaying the weekday names.
-     */
-    hideHead?: boolean;
-    /**
-     * Show the outside days.  An outside day is a day falling in the next or the
-     * previous month. Default is `false`.
-     */
-    showOutsideDays?: boolean;
-    /**
-     * Show the week numbers column. Default to `false`.
-     */
-    showWeekNumber?: boolean;
-    /**
-     * A map of components used to create the layout.
-     */
-    components?: Partial<Components>;
-    /** Content to add to the `tfoot` element. */
-    footer?: React.ReactNode;
-    /**
-     * Apply the `disabled` modifier to the matching days.
-     */
-    disabled?: Matcher | Matcher[];
-    /**
-     * Apply the `hidden` modifier to the matching days. Will hide them from the
-     * calendar.
-     */
-    hidden?: Matcher | Matcher[];
-    /**
-     * The today’s date. Default is the current date. This Date will get the
-     * `today` modifier to style the day.
-     */
-    today?: Date;
-    /**
-     * Add modifiers to the matching days.
-     */
-    modifiers?: CustomModifiers;
-    /**
-     * The prefix to add to the modifiers class names. Default is `rdp-day_`.
-     *
-     * Each day will get a `${modifierPrefix}${modifier}` class name when matching
-     * a modifier.
-     */
-    modifierPrefix?: string;
-    /**
-     * Toggle the controlled selection mode.
-     *
-     * As default, no selection mode is set and the days are not interactive.
-     *
-     * - `single`: control the selection of single days
-     * - `multiple`: control the selection of multiple days
-     * - `range`: control the selection of a range of days
-     * - `custom`: customize what is selected by using `onDayClick`
-     */
-    mode?: 'custom' | 'single' | 'multiple' | 'range';
-    /**
-     * The date-fns locale object to localize the user interface. Defaults to
-     * `en-US`.
-     */
-    locale?: Locale;
-    /**
-     * A map of labels creators used for the ARIA labels attributes.
-     */
-    labels?: Partial<Labels>;
-    /**
-     * The text direction of the calendar. Use `ltr` for left-to-right (default)
-     * or `rtl` for right-to-left.
-     */
-    dir?: string;
-    /**
-     * A map of formatters to change the default formatting functions.
-     */
-    formatters?: Partial<Formatters>;
-    onDayClick?: DayClickEventHandler;
-    onDayFocus?: DayFocusEventHandler;
-    onDayBlur?: DayFocusEventHandler;
-    onDayMouseEnter?: DayMouseEventHandler;
-    onDayMouseLeave?: DayMouseEventHandler;
-    onDayKeyDown?: DayKeyboardEventHandler;
-    onDayKeyUp?: DayKeyboardEventHandler;
-    onDayKeyPress?: DayKeyboardEventHandler;
-    onDayTouchCancel?: DayTouchEventHandler;
-    onDayTouchEnd?: DayTouchEventHandler;
-    onDayTouchMove?: DayTouchEventHandler;
-    onDayTouchStart?: DayTouchEventHandler;
-    onNextClick?: MonthChangeEventHandler;
-    onPrevClick?: MonthChangeEventHandler;
-    onWeekNumberClick?: WeekNumberClickEventHandler;
-}
-/** A map of the component that can be changed via the `components` prop. */
-export interface Components {
-    /** The component for the caption element. */
-    Caption: (props: CaptionProps) => JSX.Element | null;
-    /** The component for the caption element. */
-    CaptionLabel: (props: CaptionLabelProps) => JSX.Element | null;
-    /** The component for the day element. This is a button or a span. */
-    Day: (props: DayProps) => JSX.Element | null;
-    /** The component for the content of the day element. */
-    DayContent: (props: DayContentProps) => JSX.Element | null;
-    /** The component for the drop-down elements. */
-    Dropdown: (props: DropdownProps) => JSX.Element | null;
-    /** The component for the table footer. */
-    Footer: () => JSX.Element | null;
-    /** The component for the table’s head. */
-    Head: () => JSX.Element | null;
-    /** The component for the small icon in the drop-downs. */
-    IconDropdown: (props: StyledComponent) => JSX.Element | null;
-    /** The arrow right icon (used for the Navigation buttons). */
-    IconRight: (props: StyledComponent) => JSX.Element | null;
-    /** The arrow left icon (used for the Navigation buttons). */
-    IconLeft: (props: StyledComponent) => JSX.Element | null;
-    /** The component for the table rows. */
-    Row: (props: RowProps) => JSX.Element | null;
-    /** The component for the week number in the table rows. */
-    WeekNumber: (props: WeekNumberProps) => JSX.Element | null;
-}
+/// <reference types="react" />
+import { Locale } from 'date-fns';
+import { CaptionLayout, CaptionProps } from '../components/Caption';
+import { CaptionLabelProps } from '../components/CaptionLabel';
+import { DayProps } from '../components/Day';
+import { DayContentProps } from '../components/DayContent';
+import { DropdownProps } from '../components/Dropdown';
+import { RowProps } from '../components/Row';
+import { WeekNumberProps } from '../components/WeekNumber';
+import { DayClickEventHandler, DayFocusEventHandler, DayKeyboardEventHandler, DayMouseEventHandler, DayTouchEventHandler, MonthChangeEventHandler, WeekNumberClickEventHandler } from './EventHandlers';
+import { Formatters } from './Formatters';
+import { Labels } from './Labels';
+import { Matcher } from './Matchers';
+import { DayModifiers, ModifiersClassNames, ModifiersStyles } from './Modifiers';
+import { ClassNames, StyledComponent, Styles } from './Styles';
+/**
+ * Selection modes supported by DayPicker.
+ *
+ * - `single`: use DayPicker to select single days.
+ * - `multiple`: allow selecting multiple days.
+ * - `range`: use DayPicker to select a range of days
+ * - `custom`: customize what is selected by using `onDayClick`
+ */
+export declare type DaySelectionMode = 'custom' | 'single' | 'multiple' | 'range';
+/**
+ * The props for the [[DayPicker]] component.
+ */
+export interface DayPickerProps {
+    /** The CSS class to add to the container element. */
+    className?: string;
+    /**
+     * Change the class names of the HTML elements.
+     *
+     * Use this prop when you need to change the default class names — for example
+     * when using CSS modules.
+     */
+    classNames?: ClassNames;
+    /**
+     * Change the class name for the day matching the [[modifiers]].
+     */
+    modifiersClassNames?: ModifiersClassNames;
+    /**
+     * Style to apply to the container element.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Change the inline styles for each UIElement.
+     */
+    styles?: Styles;
+    /**
+     * Change the inline style for the day matching the [[modifiers]].
+     */
+    modifiersStyles?: ModifiersStyles;
+    /**
+     * The initial month to show in the calendar. Default is the current month.
+     *
+     * Use this prop to let DayPicker control the current month. If you need to set the month programmatically, use [[month]] and [[onMonthChange]].
+     */
+    defaultMonth?: Date;
+    /**
+     * The month to display in the calendar.
+     *
+     * As opposed to [[defaultMonth]], use this prop with [[onMonthChange]] to
+     * change the month programmatically.
+     */
+    month?: Date;
+    /**
+     * Event fired when the user navigates between months.
+     */
+    onMonthChange?: MonthChangeEventHandler;
+    /**
+     * The number of displayed months. Defaults to `1`.
+     */
+    numberOfMonths?: number;
+    /**
+     * The earliest day to start the month navigation.
+     */
+    fromDate?: Date;
+    /**
+     * The latest day to end the month navigation.
+     */
+    toDate?: Date;
+    /**
+     * The earliest month to start the month navigation.
+     */
+    fromMonth?: Date;
+    /**
+     * The latest month to end the month navigation.
+     */
+    toMonth?: Date;
+    /**
+     * The earliest year to start the month navigation.
+     */
+    fromYear?: number;
+    /**
+     * The latest year to end the month navigation.
+     */
+    toYear?: number;
+    /**
+     * Disable the navigation between months.
+     */
+    disableNavigation?: boolean;
+    /**
+     * Paginate the month navigation displaying the [[numberOfMonths]] at time.
+     */
+    pagedNavigation?: boolean;
+    /**
+     * Render the months in reversed order (when [[numberOfMonths]] is greater
+     * than `1`) to display the most recent month first.
+     */
+    reverseMonths?: boolean;
+    /**
+     * Change the layout of the caption:
+     *
+     * - `buttons` (default): display prev/right buttons
+     * - `dropdown`: display drop-downs to change the month and the year
+     *
+     * **Note:** the `dropdown` layout is available only when `fromDate`,
+     * `fromMonth` or`fromYear` and `toDate`, `toMonth` or `toYear` are set.
+     */
+    captionLayout?: CaptionLayout;
+    /**
+     * Display six weeks per months, regardless the month’s number of weeks.
+     * To use this prop, [[showOutsideDays]] must be set. Default to `false`.
+     */
+    fixedWeeks?: boolean;
+    /**
+     * Hide the month’s head displaying the weekday names.
+     */
+    hideHead?: boolean;
+    /**
+     * Show the outside days.  An outside day is a day falling in the next or the
+     * previous month. Default is `false`.
+     */
+    showOutsideDays?: boolean;
+    /**
+     * Show the week numbers column. Default to `false`.
+     */
+    showWeekNumber?: boolean;
+    /**
+     * A map of components used to create the layout.
+     */
+    components?: CustomComponents;
+    /** Content to add to the `tfoot` element. */
+    footer?: React.ReactNode;
+    /**
+     * When a selection mode is set, DayPicker will focus the first selected day
+     * (if set) or the today's date (if not disabled).
+     *
+     * Use this prop when you need to focus DayPicker after a user actions, for
+     * improved accessibility.
+     */
+    initialFocus?: boolean;
+    /**
+     * Apply the `disabled` modifier to the matching days.
+     */
+    disabled?: Matcher | Matcher[];
+    /**
+     * Apply the `hidden` modifier to the matching days. Will hide them from the
+     * calendar.
+     */
+    hidden?: Matcher | Matcher[];
+    /** Apply the `selected` modifier to the matching days. */
+    selected?: Matcher | Matcher[];
+    /**
+     * The today’s date. Default is the current date. This Date will get the
+     * `today` modifier to style the day.
+     */
+    today?: Date;
+    /**
+     * Add modifiers to the matching days.
+     */
+    modifiers?: DayModifiers;
+    /**
+     * The prefix to add to the modifiers class names. Default is `rdp-day_`.
+     *
+     * Each day will get a `${modifierPrefix}${modifier}` class name when matching
+     * a modifier.
+     */
+    modifierPrefix?: string;
+    /**
+     * Toggle the selection mode.
+     *
+     * - `single`: use DayPicker to select single days.
+     * - `multiple`: allow selecting multiple days.
+     * - `range`: use DayPicker to select a range of days
+     * - `custom`: customize what is selected by using `onDayClick`
+     */
+    mode?: DaySelectionMode;
+    /** The date-fns locale object used to localize dates. Defaults to* `en-US`. */
+    locale?: Locale;
+    /**
+     * Labels creators to override the defaults. Use this prop to customize the
+     * ARIA labels attributes.
+     */
+    labels?: Partial<Labels>;
+    /**
+     * The text direction of the calendar. Use `ltr` for left-to-right (default)
+     * or `rtl` for right-to-left.
+     */
+    dir?: string;
+    /**
+     * A map of formatters. Use the formatters to override the default formatting
+     * functions.
+     */
+    formatters?: Partial<Formatters>;
+    onDayClick?: DayClickEventHandler;
+    onDayFocus?: DayFocusEventHandler;
+    onDayBlur?: DayFocusEventHandler;
+    onDayMouseEnter?: DayMouseEventHandler;
+    onDayMouseLeave?: DayMouseEventHandler;
+    onDayKeyDown?: DayKeyboardEventHandler;
+    onDayKeyUp?: DayKeyboardEventHandler;
+    onDayKeyPress?: DayKeyboardEventHandler;
+    onDayTouchCancel?: DayTouchEventHandler;
+    onDayTouchEnd?: DayTouchEventHandler;
+    onDayTouchMove?: DayTouchEventHandler;
+    onDayTouchStart?: DayTouchEventHandler;
+    onNextClick?: MonthChangeEventHandler;
+    onPrevClick?: MonthChangeEventHandler;
+    onWeekNumberClick?: WeekNumberClickEventHandler;
+}
+/** A map of the component that can be changed via the `components` prop. */
+export interface CustomComponents {
+    /** The component for the caption element. */
+    Caption?: (props: CaptionProps) => JSX.Element | null;
+    /** The component for the caption element. */
+    CaptionLabel?: (props: CaptionLabelProps) => JSX.Element | null;
+    /** The component for the day element. This is a button or a span. */
+    Day?: (props: DayProps) => JSX.Element | null;
+    /** The component for the content of the day element. */
+    DayContent?: (props: DayContentProps) => JSX.Element | null;
+    /** The component for the drop-down elements. */
+    Dropdown?: (props: DropdownProps) => JSX.Element | null;
+    /** The component for the table footer. */
+    Footer?: () => JSX.Element | null;
+    /** The component for the table’s head. */
+    Head?: () => JSX.Element | null;
+    /** The component for the small icon in the drop-downs. */
+    IconDropdown?: (props: StyledComponent) => JSX.Element | null;
+    /** The arrow right icon (used for the Navigation buttons). */
+    IconRight?: (props: StyledComponent) => JSX.Element | null;
+    /** The arrow left icon (used for the Navigation buttons). */
+    IconLeft?: (props: StyledComponent) => JSX.Element | null;
+    /** The component for the table rows. */
+    Row?: (props: RowProps) => JSX.Element | null;
+    /** The component for the week number in the table rows. */
+    WeekNumber?: (props: WeekNumberProps) => JSX.Element | null;
+}

package/{build → dist}/types/DayPickerCustom.d.ts

@@ -1,11 +1,9 @@
-import { DayPickerProps } from './DayPicker';
-/** The props for the [[DayPicker]] component when using `mode="custom"`. */
-export interface DayPickerCustomProps extends DayPickerProps {
-    mode: 'custom';
-    /** The selected day(s). */
-    selected?: unknown;
-    /** Use `onDayClick` and related event instead. */
-    onSelect: never;
-}
-/** Returns true when the props are of type [[DayPickerCustom]]. */
-export declare function isDayPickerCustom(props: DayPickerProps): props is DayPickerCustomProps;
+import { DayPickerProps } from './DayPicker';
+/** The props for the [[DayPicker]] component when using `mode="custom"`. */
+export interface DayPickerCustomProps extends DayPickerProps {
+    mode: 'custom';
+    /** Use `onDayClick` and related events instead. */
+    onSelect: never;
+}
+/** Returns true when the props are of type [[DayPickerCustom]]. */
+export declare function isDayPickerCustom(props: DayPickerProps): props is DayPickerCustomProps;

package/{build → dist}/types/DayPickerMultiple.d.ts

@@ -1,16 +1,16 @@
-import { DayPickerProps } from './DayPicker';
-import { SelectMultipleEventHandler } from './EventHandlers';
-/** The props for the [[DayPicker]] component when using `mode="multiple"`. */
-export interface DayPickerMultipleProps extends DayPickerProps {
-    mode: 'multiple';
-    /** The selected days. */
-    selected?: Date[];
-    /** Event fired when a days added or removed to the selection. */
-    onSelect?: SelectMultipleEventHandler;
-    /** The minimum amount of days that can be selected. */
-    min?: number;
-    /** The maximum amount of days that can be selected. */
-    max?: number;
-}
-/** Returns true when the props are of type [[DayPickerMultiple]]. */
-export declare function isDayPickerMultiple(props: DayPickerProps): props is DayPickerMultipleProps;
+import { DayPickerProps } from './DayPicker';
+import { SelectMultipleEventHandler } from './EventHandlers';
+/** The props for the [[DayPicker]] component when using `mode="multiple"`. */
+export interface DayPickerMultipleProps extends DayPickerProps {
+    mode: 'multiple';
+    /** The selected days. */
+    selected?: Date[];
+    /** Event fired when a days added or removed to the selection. */
+    onSelect?: SelectMultipleEventHandler;
+    /** The minimum amount of days that can be selected. */
+    min?: number;
+    /** The maximum amount of days that can be selected. */
+    max?: number;
+}
+/** Returns true when the props are of type [[DayPickerMultiple]]. */
+export declare function isDayPickerMultiple(props: DayPickerProps): props is DayPickerMultipleProps;

package/{build → dist}/types/DayPickerRange.d.ts

@@ -1,17 +1,17 @@
-import { DayPickerProps } from './DayPicker';
-import { SelectRangeEventHandler } from './EventHandlers';
-import { DateRange } from './Matchers';
-/** The props for the [[DayPicker]] component when using `mode="range"`. */
-export interface DayPickerRangeProps extends DayPickerProps {
-    mode: 'range';
-    /** The selected range of days. */
-    selected?: DateRange;
-    /** Event fired when a range (or a part of the range) is selected. */
-    onSelect?: SelectRangeEventHandler;
-    /** The minimum amount of days that can be selected. */
-    min?: number;
-    /** The maximum amount of days that can be selected. */
-    max?: number;
-}
-/** Returns true when the props are of type [[DayPickerRange]]. */
-export declare function isDayPickerRange(props: DayPickerProps): props is DayPickerRangeProps;
+import { DayPickerProps } from './DayPicker';
+import { SelectRangeEventHandler } from './EventHandlers';
+import { DateRange } from './Matchers';
+/** The props for the [[DayPicker]] component when using `mode="range"`. */
+export interface DayPickerRangeProps extends DayPickerProps {
+    mode: 'range';
+    /** The selected range of days. */
+    selected?: DateRange;
+    /** Event fired when a range (or a part of the range) is selected. */
+    onSelect?: SelectRangeEventHandler;
+    /** The minimum amount of days that can be selected. */
+    min?: number;
+    /** The maximum amount of days that can be selected. */
+    max?: number;
+}
+/** Returns true when the props are of type [[DayPickerRange]]. */
+export declare function isDayPickerRange(props: DayPickerProps): props is DayPickerRangeProps;

package/{build → dist}/types/DayPickerSingle.d.ts

@@ -1,14 +1,14 @@
-import { DayPickerProps } from './DayPicker';
-import { SelectSingleEventHandler } from './EventHandlers';
-/** The props for the [[DayPicker]] component when using `mode="single"`. */
-export interface DayPickerSingleProps extends DayPickerProps {
-    mode: 'single';
-    /** The selected day. */
-    selected?: Date | undefined;
-    /** Event fired when a day is selected. */
-    onSelect?: SelectSingleEventHandler;
-    /** Make the selection required. */
-    required?: boolean;
-}
-/** Returns true when the props are of type [[DayPickerSingle]]. */
-export declare function isDayPickerSingle(props: DayPickerProps): props is DayPickerSingleProps;
+import { DayPickerProps } from './DayPicker';
+import { SelectSingleEventHandler } from './EventHandlers';
+/** The props for the [[DayPicker]] component when using `mode="single"`. */
+export interface DayPickerSingleProps extends DayPickerProps {
+    mode: 'single';
+    /** The selected day. */
+    selected?: Date | undefined;
+    /** Event fired when a day is selected. */
+    onSelect?: SelectSingleEventHandler;
+    /** Make the selection required. */
+    required?: boolean;
+}
+/** Returns true when the props are of type [[DayPickerSingle]]. */
+export declare function isDayPickerSingle(props: DayPickerProps): props is DayPickerSingleProps;