react-day-picker 8.0.0-beta.27 → 8.0.0-beta.31

package/build/types/Components.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import { 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 { StyledComponentProps } from './StyledComponentProps';
+/**
+ * Represent 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: StyledComponentProps) => JSX.Element | null;
+    /** The icon for the "next month" button in Navigation. */
+    IconNext: (props: StyledComponentProps) => JSX.Element | null;
+    /** icon for the "previous month" button in the Navigation. */
+    IconPrevious: (props: StyledComponentProps) => 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/types/CustomModifiers.d.ts

@@ -0,0 +1,4 @@
+import { Matcher } from './Matcher';
+import { Modifier } from './Modifier';
+/** A map of matchers to use as custom modifiers.*/
+export declare type CustomModifiers = Record<Modifier, Matcher | Matcher[]>;

package/build/types/DateAfter.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Represent a matcher to match a day falling after the specified date, with the
+ * date not included.
+ */
+export declare type DateAfter = {
+    after: Date;
+};

package/build/types/DateBefore.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Represent a matcher to match a day falling before the specified date, with
+ * the date not included.
+ */
+export declare type DateBefore = {
+    before: Date;
+};

package/build/types/DateFormatter.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Locale } from 'date-fns';
+/** Represents a function to format a date. */
+export declare type DateFormatter = (date: Date, options?: {
+    locale?: Locale;
+}) => React.ReactNode;

package/build/types/DateInterval.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Represent a matcher to match a day falling before and after two dates, where
+ * the dates are not included.
+ */
+export declare type DateInterval = {
+    before: Date;
+    after: Date;
+};

package/build/types/DateRange.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Represent a matcher to match a range of dates. The range can be open.
+ * Differently from [[DateInterval]], the dates here are included.
+ */
+export declare type DateRange = {
+    from: Date | undefined;
+    to?: Date | undefined;
+};

package/build/types/DayClickEventHandler.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ModifierStatus } from './ModifierStatus';
+/**
+ * Represent the event handler when a day is clicked.
+ */
+export declare type DayClickEventHandler = (day: Date, modifiers: ModifierStatus, e: React.MouseEvent) => void;

package/build/types/DayFocusEventHandler.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ModifierStatus } from './ModifierStatus';
+/**
+ * Represent the event handler when a day is focused.
+ */
+export declare type DayFocusEventHandler = (day: Date, modifiers: ModifierStatus, e: React.FocusEvent | React.KeyboardEvent) => void;

package/build/types/DayKeyboardEventHandler.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ModifierStatus } from './ModifierStatus';
+/**
+ * Represent the event handler when a day gets a keyboard event.
+ */
+export declare type DayKeyboardEventHandler = (day: Date, modifiers: ModifierStatus, e: React.KeyboardEvent) => void;

package/build/types/DayLabelFormatter.d.ts

@@ -0,0 +1,7 @@
+import { ModifierStatus } from '../types';
+/**
+ * Represent a function to format the ARIA label for the [[Day]] component.
+ */
+export declare type DayLabelFormatter = (day: Date, modifiers: ModifierStatus, options?: {
+    locale?: Locale;
+}) => string;

package/build/types/DayMouseEventHandler.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ModifierStatus } from './ModifierStatus';
+/**
+ * Represent the event handler when a day gets a mouse event.
+ */
+export declare type DayMouseEventHandler = (day: Date, modifiers: ModifierStatus, e: React.MouseEvent) => void;

package/build/types/DayOfWeekMatcher.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Represent a matcher to match a date being one of the specified days of the week (`0-7`, where `0`
+ * is Sunday).
+ */
+export declare type DayOfWeek = {
+    dayOfWeek: number[];
+};

package/build/types/DayPickerBase.d.ts

@@ -0,0 +1,238 @@
+/// <reference types="react" />
+import { Locale } from 'date-fns';
+import { CaptionLayout } from './CaptionLayout';
+import { ClassNames } from './ClassNames';
+import { Components } from './Components';
+import { CustomModifiers } from './CustomModifiers';
+import { DayClickEventHandler } from './DayClickEventHandler';
+import { DayFocusEventHandler } from './DayFocusEventHandler';
+import { DayKeyboardEventHandler } from './DayKeyboardEventHandler';
+import { DayMouseEventHandler } from './DayMouseEventHandler';
+import { DayTouchEventHandler } from './DayTouchEventHandler';
+import { Formatters } from './Formatters';
+import { Labels } from './Labels';
+import { Matcher } from './Matcher';
+import { ModifierClassNames } from './ModifierClassNames';
+import { ModifierStyles } from './ModifierStyles';
+import { MonthChangeEventHandler } from './MonthChangeEventHandler';
+import { SelectMultipleEventHandler } from './SelectMultipleEventHandler';
+import { SelectRangeEventHandler } from './SelectRangeEventHandler';
+import { SelectSingleEventHandler } from './SelectSingleEventHandler';
+import { Styles } from './Styles';
+import { WeekNumberClickEventHandler } from './WeekNumberClickEventHandler';
+/**
+ * The shared props for the [[DayPicker]] component.
+ */
+export interface DayPickerBase {
+    /** 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 `selected` modifier to the matching days.
+     */
+    selected?: 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.
+     *
+     * - `custom`: customize what is selected
+     * - `single`: control the selection of single days
+     * - `multiple`: control the selection of multiple days
+     * - `range`: control the selection of a range of days
+     */
+    mode?: 'custom' | 'single' | 'multiple' | 'range';
+    /**
+     * The default selected days when the `mode` is `single`, `multiple` or `range`.
+     */
+    defaultSelected?: Matcher | Matcher[];
+    /**
+     * When in single selection mode, make the selection required.
+     */
+    required?: boolean;
+    /**
+     * When in multiple or range selection mode, the minimum amount of days that
+     * can be selected.
+     */
+    min?: number;
+    /**
+     * When in multiple or range selection mode, the maximum amount of days that
+     * can be selected.
+     */
+    max?: number;
+    /**
+     * Event handler when a day is selected (valid only in controlled selection mode).
+     */
+    onSelect?: SelectSingleEventHandler | SelectMultipleEventHandler | SelectRangeEventHandler;
+    /**
+     * 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;
+}

package/build/types/DayPickerCustom.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The props for the [[DayPicker]] component when using custom selection mode.
+ */
+export interface DayPickerCustom {
+    mode?: 'custom';
+    defaultSelected?: never;
+}

package/build/types/DayPickerMultiple.d.ts

@@ -0,0 +1,17 @@
+import { SelectMultipleEventHandler } from './SelectMultipleEventHandler';
+/**
+ * The props for the [[DayPicker]] component when using multiple selection mode.
+ */
+export interface DayPickerMultiple {
+    mode?: 'multiple';
+    /** The selected dates when using controlled behavior. */
+    selected?: Date[];
+    /** The default selected dates when using uncontrolled behavior (not using selected). */
+    defaultSelected?: 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;
+}

package/build/types/DayPickerProps.d.ts

@@ -0,0 +1,9 @@
+import { DayPickerBase } from './DayPickerBase';
+import { DayPickerMultiple } from './DayPickerMultiple';
+import { DayPickerRange } from './DayPickerRange';
+import { DayPickerSingle } from './DayPickerSingle';
+import { DayPickerCustom } from './DayPickerCustom';
+/** Represent the props for the selection modes. */
+export declare type DayPickerSelectionProps = DayPickerRange | DayPickerMultiple | DayPickerSingle | DayPickerCustom;
+/** The props for the [[DayPicker]] component. */
+export declare type DayPickerProps = DayPickerBase & DayPickerSelectionProps;

package/build/types/DayPickerRange.d.ts

@@ -0,0 +1,20 @@
+import { DateRange } from './DateRange';
+import { SelectRangeEventHandler } from './SelectRangeEventHandler';
+/**
+ * The props for the [[DayPicker]] component when using range selection mode.
+ */
+export interface DayPickerRange {
+    mode?: 'range';
+    /**
+     * Apply the `selected` modifier to the matching days.
+     */
+    selected?: DateRange;
+    /** The default selected range. */
+    defaultSelected?: 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;
+}

package/build/types/DayPickerSingle.d.ts

@@ -0,0 +1,15 @@
+import { SelectSingleEventHandler } from './SelectSingleEventHandler';
+/**
+ * The props for the [[DayPicker]] component when using single selection mode.
+ */
+export interface DayPickerSingle {
+    mode?: 'single';
+    /** The selected day when using controlled behavior. */
+    selected?: Date;
+    /** The default selected day when using uncontrolled (not using selected). */
+    defaultSelected?: Date;
+    /** Event fired when a day is selected. */
+    onSelect?: SelectSingleEventHandler;
+    /** When set, user cannot unselect days. */
+    required?: boolean;
+}

package/build/types/DayTouchEventHandler.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ModifierStatus } from './ModifierStatus';
+/**
+ * Represent the event handler when a day gets a touch event.
+ */
+export declare type DayTouchEventHandler = (day: Date, modifiers: ModifierStatus, e: React.TouchEvent) => void;

package/build/types/Formatters.d.ts

@@ -0,0 +1,19 @@
+import { DateFormatter } from './DateFormatter';
+import { WeekNumberFormatter } from './WeekNumberFormatter';
+/**
+ * Represent a map of formatters used to render localized content.
+ */
+export declare type Formatters = {
+    /** Format the month in the caption when `captionLayout` is `buttons`. */
+    formatCaption: DateFormatter;
+    /** Format the month in the navigation dropdown. */
+    formatMonthCaption: DateFormatter;
+    /** Format the year in the navigation dropdown. */
+    formatYearCaption: DateFormatter;
+    /** Format the day in the day cell. */
+    formatDay: DateFormatter;
+    /** Format the week number. */
+    formatWeekNumber: WeekNumberFormatter;
+    /** Format the week day name in the header */
+    formatWeekdayName: DateFormatter;
+};

package/build/types/InternalModifier.d.ts

@@ -0,0 +1,2 @@
+/** Represent the modifiers that are used internally in DayPicker. */
+export declare type InternalModifier = 'selected' | 'disabled' | 'hidden' | 'range_start' | 'range_end' | 'range_middle';

package/build/types/Labels.d.ts

@@ -0,0 +1,17 @@
+import { DayLabelFormatter } from './DayLabelFormatter';
+import { NavButtonLabelFormatter } from './NavButtonLabelFormatter';
+import { WeekdayLabelFormatter } from './WeekdayLabelFormatter';
+import { WeekNumberLabelFormatter } from './WeekNumberLabelFormatter';
+/**
+ * Represent a map of formatters used to format ARIA labels for the relative
+ * elements.
+ */
+export declare type Labels = {
+    labelMonthDropdown: () => string;
+    labelYearDropdown: () => string;
+    labelNext: NavButtonLabelFormatter;
+    labelPrevious: NavButtonLabelFormatter;
+    labelDay: DayLabelFormatter;
+    labelWeekday: WeekdayLabelFormatter;
+    labelWeekNumber: WeekNumberLabelFormatter;
+};

package/build/types/Matcher.d.ts

@@ -0,0 +1,10 @@
+import { DateAfter } from './DateAfter';
+import { DateBefore } from './DateBefore';
+import { DateInterval } from './DateInterval';
+import { DateRange } from './DateRange';
+import { DayOfWeek } from './DayOfWeekMatcher';
+/**
+ * A `Matcher` is a function, a date, an object, or an array of them used to
+ * determine if a day matches a modifier.
+ */
+export declare type Matcher = ((date: Date) => boolean) | Date | Date[] | DateRange | DateBefore | DateAfter | DateInterval | DayOfWeek;

package/build/types/Modifier.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A _modifier_ represents different styles or states of a day displayed in the
+ * calendar.
+ **/
+export declare type Modifier = string;

package/build/types/ModifierClassNames.d.ts

@@ -0,0 +1,5 @@
+import { Modifier } from './Modifier';
+/**
+ * Represent the classnames to assign to each modifier.
+ */
+export declare type ModifierClassNames = Record<Modifier, string>;

package/build/types/ModifierStatus.d.ts

@@ -0,0 +1,5 @@
+import { Modifier } from './Modifier';
+/**
+ * Represent the status of a modifiers when matched a day.
+ */
+export declare type ModifierStatus = Record<Modifier, true>;

package/build/types/ModifierStyles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { Modifier } from './Modifier';
+/** The inline-style to apply to the day matching `modifier`. */
+export declare type ModifierStyles = Record<Modifier, React.CSSProperties>;

package/build/types/Modifiers.d.ts

@@ -0,0 +1,5 @@
+import { InternalModifier } from './InternalModifier';
+import { Matcher } from './Matcher';
+import { Modifier } from './Modifier';
+/** Represent the map of modifiers with an array of matcher. */
+export declare type Modifiers = Record<Modifier, Matcher[]> & Record<InternalModifier, Matcher[]>;

package/build/types/MonthChangeEventHandler.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Represent the event handler when a month is changed in the calendar.
+ */
+export declare type MonthChangeEventHandler = (month: Date) => void;

package/build/types/NavButtonLabelFormatter.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Represent a function to format the ARIA label for the "next month" / "prev
+ * month" buttons in the navigation.
+ */
+export declare type NavButtonLabelFormatter = (month?: Date, options?: {
+    locale?: Locale;
+}) => string;

package/build/types/SelectMultipleEventHandler.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ModifierStatus } from './ModifierStatus';
+/** Represent the event handler when selecting multiple days. */
+export declare type SelectMultipleEventHandler = (
+/** The selected days */
+days: Date[] | undefined, 
+/** The day that was clicked triggering the event. */
+selectedDay: Date, 
+/** The day that was clicked */
+modifiers: ModifierStatus, 
+/** The mouse event that triggered this event. */
+e: React.MouseEvent) => void;

package/build/types/SelectRangeEventHandler.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { DateRange, ModifierStatus } from '../types';
+/** Represent the event handler when selecting a range of days. */
+export declare type SelectRangeEventHandler = (
+/** The current range of the selected days. */
+range: DateRange | undefined, 
+/** The day that was selected (or clicked) triggering the event. */
+selectedDay: Date, 
+/** The modifiers of the selected day. */
+modifiers: ModifierStatus, e: React.MouseEvent) => void;

package/build/types/SelectSingleEventHandler.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ModifierStatus } from './ModifierStatus';
+/** Represent the event handler when selecting a single day. */
+export interface SelectSingleEventHandler {
+    (
+    /** The selected day, `undefined` when `required={false}` (default) and the day is clicked again. */
+    day: Date | undefined, 
+    /** The day that was selected (or clicked) triggering the event. */
+    selectedDay: Date, 
+    /** The modifiers of the selected day. */
+    modifiers: ModifierStatus, e: React.MouseEvent): void;
+}

package/build/types/StyledComponentProps.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+/** Represent component props to style a component inline or via CSS. */
+export declare type StyledComponentProps = {
+    /** The class name to apply to the container element. */
+    className?: string;
+    /** The inline style of the container element. */
+    style?: React.CSSProperties;
+    /** The content of the element. */
+    children?: React.ReactNode;
+};