react-day-picker 8.0.2 → 8.0.5

package/src/types/DayPickerBase.ts

@@ -0,0 +1,267 @@
+import type { 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
+ * - `default`: disable the built-in selection behavior. Customize what is selected by using [[onDayClick]].
+ */
+export type DaySelectionMode = 'single' | 'multiple' | 'range' | 'default';
+
+/**
+ * The base props for the [[DayPicker]] component.
+ */
+export interface DayPickerBase {
+  /** 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 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>;
+
+  /**
+   * The index of the first day of the week (0 - Sunday). Overrides the locale's one.
+   */
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+  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/src/types/DayPickerDefault.ts

@@ -0,0 +1,15 @@
+import { DayPickerProps } from 'DayPicker';
+
+import { DayPickerBase } from './DayPickerBase';
+
+/** The props for the [[DayPicker]] component when using `mode="default"` or `undefined`. */
+export interface DayPickerDefaultProps extends DayPickerBase {
+  mode?: 'default';
+}
+
+/** Returns true when the props are of type [[DayPickerDefault]]. */
+export function isDayPickerDefault(
+  props: DayPickerProps
+): props is DayPickerDefaultProps {
+  return props.mode === undefined || props.mode === 'default';
+}

package/src/types/DayPickerMultiple.ts

@@ -0,0 +1,26 @@
+import { DayPickerProps } from 'DayPicker';
+
+import { DayPickerContextValue } from 'contexts/DayPicker';
+
+import { DayPickerBase } from './DayPickerBase';
+import { SelectMultipleEventHandler } from './EventHandlers';
+
+/** The props for the [[DayPicker]] component when using `mode="multiple"`. */
+export interface DayPickerMultipleProps extends DayPickerBase {
+  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 function isDayPickerMultiple(
+  props: DayPickerProps | DayPickerContextValue
+): props is DayPickerMultipleProps {
+  return props.mode === 'multiple';
+}

package/src/types/DayPickerRange.ts

@@ -0,0 +1,27 @@
+import { DayPickerProps } from 'DayPicker';
+
+import { DayPickerContextValue } from 'contexts/DayPicker';
+
+import { DayPickerBase } from './DayPickerBase';
+import { SelectRangeEventHandler } from './EventHandlers';
+import { DateRange } from './Matchers';
+
+/** The props for the [[DayPicker]] component when using `mode="range"`. */
+export interface DayPickerRangeProps extends DayPickerBase {
+  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 function isDayPickerRange(
+  props: DayPickerProps | DayPickerContextValue
+): props is DayPickerRangeProps {
+  return props.mode === 'range';
+}

package/src/types/DayPickerSingle.ts

@@ -0,0 +1,24 @@
+import { DayPickerProps } from 'DayPicker';
+
+import { DayPickerContextValue } from 'contexts/DayPicker';
+
+import { DayPickerBase } from './DayPickerBase';
+import { SelectSingleEventHandler } from './EventHandlers';
+
+/** The props for the [[DayPicker]] component when using `mode="single"`. */
+export interface DayPickerSingleProps extends DayPickerBase {
+  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 function isDayPickerSingle(
+  props: DayPickerProps | DayPickerContextValue
+): props is DayPickerSingleProps {
+  return props.mode === 'single';
+}

package/src/types/EventHandlers.ts

@@ -0,0 +1,87 @@
+import { DateRange } from 'types/Matchers';
+
+import { ActiveModifiers } from './Modifiers';
+
+/** The event handler when a day is clicked. */
+export type DayClickEventHandler = (
+  day: Date,
+  activeModifiers: ActiveModifiers,
+  e: React.MouseEvent
+) => void;
+
+/** The event handler when a day is focused. */
+export type DayFocusEventHandler = (
+  day: Date,
+  activeModifiers: ActiveModifiers,
+  e: React.FocusEvent | React.KeyboardEvent
+) => void;
+
+/** The event handler when a day gets a keyboard event. */
+export type DayKeyboardEventHandler = (
+  day: Date,
+  activeModifiers: ActiveModifiers,
+  e: React.KeyboardEvent
+) => void;
+
+/** The event handler when a day gets a mouse event. */
+export type DayMouseEventHandler = (
+  day: Date,
+  activeModifiers: ActiveModifiers,
+  e: React.MouseEvent
+) => void;
+
+/** The event handler when a month is changed in the calendar. */
+export type MonthChangeEventHandler = (month: Date) => void;
+
+/** The event handler when selecting multiple days. */
+export type SelectMultipleEventHandler = (
+  /** The selected days */
+  days: Date[] | undefined,
+  /** The day that was clicked triggering the event. */
+  selectedDay: Date,
+  /** The day that was clicked */
+  activeModifiers: ActiveModifiers,
+  /** The mouse event that triggered this event. */
+  e: React.MouseEvent
+) => void;
+
+/** The event handler when selecting a range of days. */
+export 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. */
+  activeModifiers: ActiveModifiers,
+  e: React.MouseEvent
+) => void;
+
+/** 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. */
+    activeModifiers: ActiveModifiers,
+    e: React.MouseEvent
+  ): void;
+}
+
+/**The event handler when the week number is clicked. */
+export type WeekNumberClickEventHandler = (
+  /** The week number that has been clicked. */
+  weekNumber: number,
+  /** The dates in the clicked week. */
+  dates: Date[],
+  /** The mouse event that triggered this event. */
+  e: React.MouseEvent
+) => void;
+
+/** The event handler when a day gets a touch event. */
+export type DayTouchEventHandler = (
+  day: Date,
+  activeModifiers: ActiveModifiers,
+  e: React.TouchEvent
+) => void;

package/src/types/Formatters.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+
+/** Represents a function to format a date. */
+export type DateFormatter = (
+  date: Date,
+  options?: { locale?: Locale }
+) => React.ReactNode;
+
+/** Represent a map of formatters used to render localized content. */
+export 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;
+};
+
+/** Represent a function to format the week number. */
+export type WeekNumberFormatter = (
+  weekNumber: number,
+  options?: { locale?: Locale }
+) => React.ReactNode;

package/src/types/Labels.ts

@@ -0,0 +1,36 @@
+import type { Locale } from 'date-fns';
+
+import { ActiveModifiers } from 'types/Modifiers';
+
+/** Map of functions to translate ARIA labels for the relative elements. */
+export type Labels = {
+  labelMonthDropdown: () => string;
+  labelYearDropdown: () => string;
+  labelNext: NavButtonLabel;
+  labelPrevious: NavButtonLabel;
+  labelDay: DayLabel;
+  labelWeekday: WeekdayLabel;
+  labelWeekNumber: WeekNumberLabel;
+};
+
+/** Return the ARIA label for the [[Day]] component. */
+export type DayLabel = (
+  day: Date,
+  activeModifiers: ActiveModifiers,
+  options?: { locale?: Locale }
+) => string;
+
+/** Return the ARIA label for the "next month" / "prev month" buttons in the navigation.*/
+export type NavButtonLabel = (
+  month?: Date,
+  options?: { locale?: Locale }
+) => string;
+
+/** Return the ARIA label for the Head component.*/
+export type WeekdayLabel = (day: Date, options?: { locale?: Locale }) => string;
+
+/** Return the ARIA label of the week number.*/
+export type WeekNumberLabel = (
+  n: number,
+  options?: { locale?: Locale }
+) => string;

package/src/types/Matchers.ts

@@ -0,0 +1,106 @@
+/**
+ * A value or a function that matches a specific day.
+ *
+ *
+ * Matchers are passed to DayPicker via [[DayPickerProps.disabled]],
+ * [[DayPickerProps.hidden]] or [[DayPickerProps.selected]] and are used to
+ * determine if a day should get a [[Modifier]].
+ *
+ * Matchers can be of different types:
+ *
+ * ```
+ * // will always match the day
+ * const booleanMatcher: Matcher = true;
+ *
+ *  // will match the today's date
+ * const dateMatcher: Matcher = new Date();
+ *
+ * // will match the days in the array
+ * const arrayMatcher: Matcher = [new Date(2019, 1, 2);, new Date(2019, 1, 4)];
+ *
+ * // will match days after the 2nd of February 2019
+ * const afterMatcher: DateAfter = { after: new Date(2019, 1, 2); };
+ *  // will match days before the 2nd of February 2019 }
+ * const beforeMatcher: DateBefore = { before: : new Date(2019, 1, 2); };
+ *
+ * // will match Sundays
+ * const dayOfWeekMatcher: DayOfWeek = {
+ *  dayOfWeek: 0
+ * };
+ *
+ * // will match the included days, except the two dates
+ * const intervalMatcher: DateInterval = {
+ *    after: new Date(2019, 1, 2);,
+ *    before: new Date(2019, 1, 5)
+ * };
+ *
+ * // will match the included days, including the two dates
+ * const rangeMatcher: DateRange = {
+ *    from: new Date(2019, 1, 2);,
+ *    to: new Date(2019, 1, 5)
+ * };
+ *
+ * // will match when the function return true
+ * const functionMatcher: Matcher = (day: Date) => {
+ *  return (new Date()).getMonth() === 2 // match when month is March
+ * };
+ * ```
+ *
+ * @see [[isMatch]]
+ *
+ * */
+export type Matcher =
+  | boolean
+  | ((date: Date) => boolean)
+  | Date
+  | Date[]
+  | DateRange
+  | DateBefore
+  | DateAfter
+  | DateInterval
+  | DayOfWeek;
+
+/** A matcher to match a day falling after the specified date, with the date not included. */
+export type DateAfter = { after: Date };
+
+/** A matcher to match a day falling before the specified date, with the date not included. */
+export type DateBefore = { before: Date };
+
+/** A matcher to match a day falling before and after two dates, where the dates are not included. */
+export type DateInterval = { before: Date; after: Date };
+
+/** A matcher to match a range of dates. The range can be open. Differently from [[DateInterval]], the dates here are included. */
+export type DateRange = { from: Date | undefined; to?: Date | undefined };
+
+/** A matcher to match a date being one of the specified days of the week (`0-7`, where `0` is Sunday). */
+export type DayOfWeek = { dayOfWeek: number[] };
+
+/** Returns true if `matcher` is of type [[DateInterval]]. */
+export function isDateInterval(matcher: unknown): matcher is DateInterval {
+  return Boolean(
+    matcher &&
+      typeof matcher === 'object' &&
+      'before' in matcher &&
+      'after' in matcher
+  );
+}
+
+/** Returns true if `value` is a [[DateRange]] type. */
+export function isDateRange(value: unknown): value is DateRange {
+  return Boolean(value && typeof value === 'object' && 'from' in value);
+}
+
+/** Returns true if `value` is of type [[DateAfter]]. */
+export function isDateAfterType(value: unknown): value is DateAfter {
+  return Boolean(value && typeof value === 'object' && 'after' in value);
+}
+
+/** Returns true if `value` is of type [[DateBefore]]. */
+export function isDateBeforeType(value: unknown): value is DateBefore {
+  return Boolean(value && typeof value === 'object' && 'before' in value);
+}
+
+/** Returns true if `value` is a [[DayOfWeek]] type. */
+export function isDayOfWeekType(value: unknown): value is DayOfWeek {
+  return Boolean(value && typeof value === 'object' && 'dayOfWeek' in value);
+}

package/src/types/Modifiers.ts

@@ -0,0 +1,62 @@
+import { Matcher } from './Matchers';
+
+/** A _modifier_ represents different styles or states of a day displayed in the calendar. */
+export type Modifier = string;
+
+/** The modifiers used by DayPicker. */
+export type Modifiers = CustomModifiers & InternalModifiers;
+
+/** The name of the modifiers that are used internally by DayPicker. */
+export enum InternalModifier {
+  Outside = 'outside',
+  /** Name of the modifier applied to the disabled days, using the `disabled` prop. */
+  Disabled = 'disabled',
+  /** Name of the modifier applied to the selected days using the `selected` prop). */
+  Selected = 'selected',
+  /** Name of the modifier applied to the hidden days using the `hidden` prop). */
+  Hidden = 'hidden',
+  /** Name of the modifier applied to the day specified using the `today` prop). */
+  Today = 'today',
+  /** The modifier applied to the day starting a selected range, when in range selection mode.  */
+  RangeStart = 'range_start',
+  /** The modifier applied to the day ending a selected range, when in range selection mode.  */
+  RangeEnd = 'range_end',
+  /** The modifier applied to the days between the start and the end of a selected range, when in range selection mode.  */
+  RangeMiddle = 'range_middle'
+}
+
+/** Map of matchers used for the internal modifiers. */
+export type InternalModifiers = Record<InternalModifier, Matcher[]>;
+
+/**
+ * Active modifiers are those Modifiers matching a specific day.
+ *
+ * @example
+ *
+ * ```
+ * const activeModifiers: ActiveModifiers = {
+ *  selected: true,
+ *  customModifier: true
+ * }
+ * ```
+ *
+ * */
+export type ActiveModifiers = Record<Modifier, true> &
+  Partial<Record<InternalModifier, true>>;
+
+/** The style to apply to each day element matching a modifier. */
+export type ModifiersStyles = Record<Modifier, React.CSSProperties> &
+  Partial<Record<InternalModifier, React.CSSProperties>>;
+
+/** The classnames to assign to each day element matching a modifier. */
+export type ModifiersClassNames = Record<Modifier, string> &
+  Partial<Record<InternalModifier, string>>;
+
+/** The custom modifiers passed to the [[DayPickerProps.modifiers]]. */
+export type DayModifiers = Record<Modifier, Matcher | Matcher[]>;
+
+/**
+ * A map of matchers used as custom modifiers by DayPicker component. This is
+ * the same as [[DayModifiers]], but it accepts only array of [[Matcher]]s.
+ */
+export type CustomModifiers = Record<Modifier, Matcher[]>;