react-day-picker 8.2.0 → 8.3.0

package/src/contexts/SelectMultiple/{useSelectMultiple.test.ts → SelectMultipleContext.test.ts}

@@ -8,8 +8,10 @@ import { isMatch } from 'contexts/Modifiers/utils/isMatch';
 import { DayPickerMultipleProps } from 'types/DayPickerMultiple';
 import { ActiveModifiers } from 'types/Modifiers';
 
-import { SelectMultipleContextValue } from './SelectMultipleContext';
-import { useSelectMultiple } from './useSelectMultiple';
+import {
+  SelectMultipleContextValue,
+  useSelectMultiple
+} from './SelectMultipleContext';
 
 const today = new Date(2021, 11, 8);
 freezeBeforeAll(today);

package/src/contexts/SelectMultiple/SelectMultipleContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, ReactNode } from 'react';
+import React, { createContext, ReactNode, useContext } from 'react';
 
 import isSameDay from 'date-fns/isSameDay';
 
@@ -133,3 +133,18 @@ export function SelectMultipleProviderInternal({
     </SelectMultipleContext.Provider>
   );
 }
+
+/**
+ * Hook to access the {@link SelectMultipleContextValue}.
+ *
+ * This hook is meant to be used inside internal or custom components.
+ */
+export function useSelectMultiple(): SelectMultipleContextValue {
+  const context = useContext(SelectMultipleContext);
+  if (!context) {
+    throw new Error(
+      'useSelectMultiple must be used within a SelectMultipleProvider'
+    );
+  }
+  return context;
+}

package/src/contexts/SelectMultiple/index.ts

@@ -1,2 +1 @@
 export * from './SelectMultipleContext';
-export * from './useSelectMultiple';

package/src/contexts/SelectRange/{useSelectRange.test.ts → SelectRangeContext.test.ts}

@@ -14,8 +14,7 @@ import { DayPickerBase } from 'types/DayPickerBase';
 import { DayPickerRangeProps } from 'types/DayPickerRange';
 import { ActiveModifiers } from 'types/Modifiers';
 
-import { SelectRangeContextValue } from './SelectRangeContext';
-import { useSelectRange } from './useSelectRange';
+import { SelectRangeContextValue, useSelectRange } from './SelectRangeContext';
 
 const today = new Date(2021, 11, 8);
 freezeBeforeAll(today);
@@ -148,11 +147,13 @@ describe('when a complete range of days is selected', () => {
 });
 
 describe('when the max number of the selected days is reached', () => {
+  const from = today;
+  const to = addDays(today, 6);
   const selected = { from, to };
   const dayPickerProps: DayPickerRangeProps = {
     ...initialProps,
     selected,
-    max: Math.abs(differenceInCalendarDays(to, from))
+    max: 7
   };
   beforeAll(() => {
     setup(dayPickerProps);
@@ -183,9 +184,6 @@ describe('when the max number of the selected days is reached', () => {
         stubEvent
       );
     });
-    test('should not call onSelect', () => {
-      expect(dayPickerProps.onSelect).not.toHaveBeenCalled();
-    });
   });
 });
 
@@ -264,19 +262,4 @@ describe('when the minimum number of days are selected', () => {
       );
     });
   });
-
-  describe('when "onDayClick" is called with a day before "to"', () => {
-    const day = subDays(to, 1);
-    const activeModifiers: ActiveModifiers = { selected: true };
-
-    beforeAll(() => {
-      result.current.onDayClick?.(day, activeModifiers, stubEvent);
-    });
-    afterAll(() => {
-      jest.resetAllMocks();
-    });
-    test('should not call "onSelect"', () => {
-      expect(dayPickerProps.onSelect).not.toHaveBeenCalled();
-    });
-  });
 });

package/src/contexts/SelectRange/SelectRangeContext.tsx

@@ -1,8 +1,8 @@
-import React, { createContext, ReactNode } from 'react';
+import React, { createContext, ReactNode, useContext } from 'react';
 
+import addDays from 'date-fns/addDays';
 import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
-import isAfter from 'date-fns/isAfter';
-import isBefore from 'date-fns/isBefore';
+import subDays from 'date-fns/subDays';
 
 import { DayPickerBase } from 'types/DayPickerBase';
 import { DayPickerRangeProps, isDayPickerRange } from 'types/DayPickerRange';
@@ -90,20 +90,8 @@ export function SelectRangeProviderInternal({
 
   const onDayClick: DayClickEventHandler = (day, activeModifiers, e) => {
     initialProps.onDayClick?.(day, activeModifiers, e);
-    const range = addToRange(day, selected);
-    if (
-      (min || max) &&
-      selected &&
-      range?.to &&
-      range.from &&
-      range.from !== range.to
-    ) {
-      const diff = Math.abs(differenceInCalendarDays(range?.to, range?.from));
-      if ((min && diff < min) || (max && diff >= max)) {
-        return;
-      }
-    }
-    initialProps.onSelect?.(range, day, activeModifiers, e);
+    const newRange = addToRange(day, selected);
+    initialProps.onSelect?.(newRange, day, activeModifiers, e);
   };
 
   const modifiers: SelectRangeModifiers = {
@@ -128,26 +116,40 @@ export function SelectRangeProviderInternal({
     }
   }
 
-  if (min && selectedFrom && selectedTo) {
-    modifiers.disabled.push((date: Date) => {
-      return (
-        (isBefore(date, selectedFrom) &&
-          differenceInCalendarDays(selectedFrom, date) < min) ||
-        (isAfter(date, selectedTo) &&
-          differenceInCalendarDays(date, selectedFrom) < min)
-      );
-    });
+  if (min) {
+    if (selectedFrom && !selectedTo) {
+      modifiers.disabled.push({
+        after: subDays(selectedFrom, min - 1),
+        before: addDays(selectedFrom, min - 1)
+      });
+    }
+    if (selectedFrom && selectedTo) {
+      modifiers.disabled.push({
+        after: selectedFrom,
+        before: addDays(selectedFrom, min - 1)
+      });
+    }
   }
-
-  if (max && selectedFrom && selectedTo) {
-    modifiers.disabled.push((date: Date) => {
-      return (
-        (isBefore(date, selectedFrom) &&
-          differenceInCalendarDays(selectedTo, date) >= max) ||
-        (isAfter(date, selectedTo) &&
-          differenceInCalendarDays(date, selectedFrom) >= max)
-      );
-    });
+  if (max) {
+    if (selectedFrom && !selectedTo) {
+      modifiers.disabled.push({
+        before: addDays(selectedFrom, -max + 1)
+      });
+      modifiers.disabled.push({
+        after: addDays(selectedFrom, max - 1)
+      });
+    }
+    if (selectedFrom && selectedTo) {
+      const selectedCount =
+        differenceInCalendarDays(selectedTo, selectedFrom) + 1;
+      const offset = max - selectedCount;
+      modifiers.disabled.push({
+        before: subDays(selectedFrom, offset)
+      });
+      modifiers.disabled.push({
+        after: addDays(selectedTo, offset)
+      });
+    }
   }
 
   return (
@@ -156,3 +158,16 @@ export function SelectRangeProviderInternal({
     </SelectRangeContext.Provider>
   );
 }
+
+/**
+ * Hook to access the {@link SelectRangeContextValue}.
+ *
+ * This hook is meant to be used inside internal or custom components.
+ */
+export function useSelectRange(): SelectRangeContextValue {
+  const context = useContext(SelectRangeContext);
+  if (!context) {
+    throw new Error('useSelectRange must be used within a SelectRangeProvider');
+  }
+  return context;
+}

package/src/contexts/SelectRange/index.ts

@@ -1,2 +1 @@
 export * from './SelectRangeContext';
-export * from './useSelectRange';

package/src/contexts/SelectSingle/{useSelectSingle.test.ts → SelectSingleContext.test.ts}

@@ -7,7 +7,7 @@ import { DayPickerBase } from 'types/DayPickerBase';
 import { DayPickerSingleProps } from 'types/DayPickerSingle';
 import { ActiveModifiers } from 'types/Modifiers';
 
-import { useSelectSingle } from './useSelectSingle';
+import { useSelectSingle } from './SelectSingleContext';
 
 const today = new Date(2021, 11, 8);
 freezeBeforeAll(today);

package/src/contexts/SelectSingle/SelectSingleContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext } from 'react';
+import React, { createContext, useContext } from 'react';
 
 import { DayPickerBase } from 'types/DayPickerBase';
 import { DayPickerSingleProps, isDayPickerSingle } from 'types/DayPickerSingle';
@@ -78,3 +78,18 @@ export function SelectSingleProviderInternal({
     </SelectSingleContext.Provider>
   );
 }
+
+/**
+ * Hook to access the {@link SelectSingleContextValue}.
+ *
+ * This hook is meant to be used inside internal or custom components.
+ */
+export function useSelectSingle(): SelectSingleContextValue {
+  const context = useContext(SelectSingleContext);
+  if (!context) {
+    throw new Error(
+      'useSelectSingle must be used within a SelectSingleProvider'
+    );
+  }
+  return context;
+}

package/src/contexts/SelectSingle/index.ts

@@ -1,2 +1 @@
 export * from './SelectSingleContext';
-export * from './useSelectSingle';

package/src/hooks/useDayRender/useDayRender.tsx

@@ -3,7 +3,6 @@ import React, { useEffect } from 'react';
 import isSameDay from 'date-fns/isSameDay';
 
 import { ButtonProps } from 'components/Button';
-import { DayContent } from 'components/DayContent';
 import { useDayPicker } from 'contexts/DayPicker';
 import { useFocusContext } from 'contexts/Focus';
 import { useActiveModifiers } from 'hooks/useActiveModifiers';
@@ -48,7 +47,10 @@ export function useDayRender(
   /** A ref to the button element that will be target of focus when rendered (if required). */
   buttonRef: React.RefObject<HTMLButtonElement>
 ): DayRender {
-  const dayPicker = useDayPicker();
+  const {
+    components: { DayContent },
+    ...dayPicker
+  } = useDayPicker();
   const focusContext = useFocusContext();
   const activeModifiers = useActiveModifiers(day, displayMonth);
   const eventHandlers = useDayEventHandlers(day, activeModifiers);
@@ -83,9 +85,8 @@ export function useDayRender(
       activeModifiers.hidden
   );
 
-  const DayContentComponent = dayPicker.components?.DayContent ?? DayContent;
   const children = (
-    <DayContentComponent
+    <DayContent
       date={day}
       displayMonth={displayMonth}
       activeModifiers={activeModifiers}

package/src/style.css

@@ -54,7 +54,7 @@
   border: 2px solid transparent;
 }
 
-.rdp-button[disabled] {
+.rdp-button[disabled]:not(.rdp-day_selected) {
   opacity: 0.25;
 }
 
@@ -62,14 +62,13 @@
   cursor: pointer;
 }
 
-.rdp-button:focus-visible:not([disabled]),
-.rdp-button:active:not([disabled]) {
+.rdp-button:focus-visible:not([disabled]) {
   color: inherit;
   background-color: var(--rdp-background-color);
   border: var(--rdp-outline);
 }
 
-.rdp-button:hover:not([disabled]) {
+.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {
   background-color: var(--rdp-background-color);
 }
 
@@ -198,8 +197,7 @@
   color: unset;
 }
 
-.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label,
-.rdp-dropdown:active:not([disabled]) + .rdp-caption_label {
+.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {
   background-color: var(--rdp-background-color);
   border: var(--rdp-outline);
   border-radius: 6px;
@@ -268,15 +266,15 @@
   font-weight: bold;
 }
 
-.rdp-day_selected:not([disabled]),
-.rdp-day_selected:focus:not([disabled]),
-.rdp-day_selected:active:not([disabled]),
-.rdp-day_selected:hover:not([disabled]) {
+.rdp-day_selected,
+.rdp-day_selected:focus-visible,
+.rdp-day_selected:hover {
   color: white;
+  opacity: 1;
   background-color: var(--rdp-accent-color);
 }
 
-.rdp-day_selected:focus:not([disabled]) {
+.rdp-day_selected:focus-visible {
   /* Since the background is the same use again the outline */
   outline: var(--rdp-outline);
   outline-offset: 2px;

package/src/types/DayPickerBase.ts

@@ -68,6 +68,11 @@ export interface DayPickerBase {
    */
   modifiersStyles?: ModifiersStyles;
 
+  /**
+   * An unique id to replace the random generated id, used by DayPicker for accessibility.
+   */
+  id?: string;
+
   /**
    * The initial month to show in the calendar. Default is the current month.
    *
@@ -135,6 +140,7 @@ export interface DayPickerBase {
    *
    * **Note:** the `dropdown` layout is available only when `fromDate`,
    * `fromMonth` or`fromYear` and `toDate`, `toMonth` or `toYear` are set.
+   *
    */
   captionLayout?: CaptionLayout;
   /**
@@ -152,9 +158,30 @@ export interface DayPickerBase {
    */
   showOutsideDays?: boolean;
   /**
-   * Show the week numbers column. Default to `false`.
+   * Show the week numbers column. Weeks are numbered according to the local
+   * week index. To use ISO week numbering, use the {@link ISOWeek} prop.
+   *
+   * @defaultValue false
    */
   showWeekNumber?: boolean;
+  /**
+   * The index of the first day of the week (0 - Sunday). Overrides the locale's one.
+   */
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  /**
+   * The day of January, which is always in the first week of the year. See also
+   * https://date-fns.org/docs/getWeek and
+   * https://en.wikipedia.org/wiki/Week#Numbering
+   */
+  firstWeekContainsDate?: 1 | 2 | 3 | 4 | 5 | 6 | 7;
+  /**
+   * Use ISO week dates instead of the locale setting. See also
+   * https://en.wikipedia.org/wiki/ISO_week_date.
+   *
+   * Setting this prop will ignore {@link weekStartsOn} and {@link firstWeekContainsDate}.
+   */
+  ISOWeek?: boolean;
+
   /**
    * Map of components used to create the layout. Look at the [components source](https://github.com/gpbl/react-day-picker/tree/master/packages/react-day-picker/src/components) to understand how internal components are built.
    */
@@ -216,11 +243,6 @@ export interface DayPickerBase {
    */
   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;
@@ -283,3 +305,8 @@ export interface CustomComponents {
   /** The component for the week number in the table rows. */
   WeekNumber?: (props: WeekNumberProps) => JSX.Element | null;
 }
+
+/**
+ * All the components in use by DayPicker that can be customized via the {@link components} prop.
+ */
+export type Components = Required<CustomComponents>;

package/src/types/EventHandlers.ts

@@ -57,17 +57,15 @@ export type SelectRangeEventHandler = (
 ) => 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;
-}
+export type 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 = (

package/src/types/Matchers.ts

@@ -42,7 +42,7 @@
  *
  * // will match when the function return true
  * const functionMatcher: Matcher = (day: Date) => {
- *  return (new Date()).getMonth() === 2 // match when month is March
+ *  return day.getMonth() === 2 // match when month is March
  * };
  * ```
  *

package/dist/DayPicker.d.ts

@@ -1,93 +0,0 @@
-import { DayPickerDefaultProps } from './types/DayPickerDefault';
-import { DayPickerMultipleProps } from './types/DayPickerMultiple';
-import { DayPickerRangeProps } from './types/DayPickerRange';
-import { DayPickerSingleProps } from './types/DayPickerSingle';
-export declare type DayPickerProps = DayPickerDefaultProps | DayPickerSingleProps | DayPickerMultipleProps | DayPickerRangeProps;
-/**
- * DayPicker render a date picker component to let users pick dates from a
- * calendar. See http://react-day-picker.js.org for updated documentation and
- * examples.
- *
- * ### Customization
- *
- * DayPicker offers different customization props. For example,
- *
- * - show multiple months using `numberOfMonths`
- * - display a dropdown to navigate the months via `captionLayout`
- * - display the week numbers with `showWeekNumbers`
- * - disable or hide days with `disabled` or `hidden`
- *
- * ### Controlling the months
- *
- * Change the initially displayed month using the `defaultMonth` prop. The
- * displayed months are controlled by DayPicker and stored in its internal
- * state. To control the months yourself, use `month` instead of `defaultMonth`
- * and use the `onMonthChange` event to set it.
- *
- * To limit the months the user can navigate to, use
- * `fromDate`/`fromMonth`/`fromYear` or `toDate`/`toMonth`/`toYear`.
- *
- * ### Selection modes
- *
- * DayPicker supports different selection mode that can be toggled using the
- * `mode` prop:
- *
- * - `mode="single"`: only one day can be selected. Use `required` to make the
- *   selection required. Use the `onSelect` event handler to get the selected
- *   days.
- * - `mode="multiple"`: users can select one or more days. Limit the amount of
- *   days that can be selected with the `min` or the `max` props.
- * - `mode="range"`: users can select a range of days. Limit the amount of days
- *   in the range with the `min` or the `max` props.
- * - `mode="default"` (default): the built-in selections are disabled. Implement
- *   your own selection mode with `onDayClick`.
- *
- * The selection modes should cover the most common use cases. In case you
- * need a more refined way of selecting days, use `mode="default"`. Use the
- * `selected` props and add the day event handlers to add/remove days from the
- * selection.
- *
- * ### Modifiers
- *
- * A _modifier_ represents different styles or states for the days displayed in
- * the calendar (like "selected" or "disabled"). Define custom modifiers using
- * the `modifiers` prop.
- *
- * ### Formatters and custom component
- *
- * You can customize how the content is displayed in the date picker by using
- * either the formatters or replacing the internal components.
- *
- * For the most common cases you want to use the `formatters` prop to change how
- * the content is formatted in the calendar. Use the `components` prop to
- * replace the internal components, like the navigation icons.
- *
- * ### Styling
- *
- * DayPicker comes with a default, basic style in `react-day-picker/style` – use
- * it as template for your own style.
- *
- * If you are using CSS modules, pass the imported styles object the
- * `classNames` props.
- *
- * You can also style the elements via inline-styles using the `styles` prop.
- *
- * ### Form fields
- *
- * If you need to bind the date picker to a form field, you can use the
- * `useInput` hooks for a basic behavior. See the `useInput` source as an
- * example to bind the date picker with form fields.
- *
- * ### Localization
- *
- * To localize DayPicker, import the locale from `date-fns` package and use the
- * `locale` prop.
- *
- * For example, to use Spanish locale:
- *
- * ```
- * import es from 'date-fns/locale/es';
- * <DayPicker locale={es} />
- * ```
- */
-export declare function DayPicker(props: DayPickerDefaultProps | DayPickerSingleProps | DayPickerMultipleProps | DayPickerRangeProps): JSX.Element;

package/dist/components/Button/Button.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-/** The props for the {@link Button} component. */
-export declare type ButtonProps = React.HTMLProps<HTMLButtonElement>;
-/**
- * Render a button HTML element applying the reset class name.
- */
-export declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "multiple" | "default" | "className" | "style" | "disabled" | "hidden" | "selected" | "dir" | "onSelect" | "required" | "min" | "max" | "start" | "color" | "content" | "size" | "wrap" | "open" | "cite" | "data" | "form" | "label" | "slot" | "span" | "summary" | "title" | "pattern" | "children" | "value" | "id" | "aria-label" | "onChange" | "name" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "media" | "mediaGroup" | "method" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "target" | "type" | "useMap" | "width" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/index.d.ts

@@ -1 +0,0 @@
-export * from './Button';

package/dist/components/Caption/Caption.d.ts

@@ -1,19 +0,0 @@
-/** Represent the props of the {@link Caption} component. */
-export interface CaptionProps {
-    /** The ID for the heading element. Must be the same as the labelled-by in Table. */
-    id?: string;
-    /** The month where the caption is displayed. */
-    displayMonth: Date;
-}
-/**
- * The layout of the caption:
- *
- * - `dropdown`: display dropdowns for choosing the month and the year.
- * - `buttons`: display previous month / next month buttons.
- */
-export declare type CaptionLayout = 'dropdown' | 'buttons';
-/**
- * Render the caption of a month. The caption has a different layout when
- * setting the {@link DayPickerBase.captionLayout} prop.
- */
-export declare function Caption(props: CaptionProps): JSX.Element;

package/dist/components/Caption/index.d.ts

@@ -1 +0,0 @@
-export * from './Caption';

package/dist/components/CaptionDropdowns/CaptionDropdowns.d.ts

@@ -1,5 +0,0 @@
-import { CaptionProps } from '../../components/Caption/Caption';
-/**
- * Render a caption with the dropdowns to navigate between months and years.
- */
-export declare function CaptionDropdowns(props: CaptionProps): JSX.Element;

package/dist/components/CaptionDropdowns/index.d.ts

@@ -1 +0,0 @@
-export * from './CaptionDropdowns';

package/dist/components/CaptionLabel/CaptionLabel.d.ts

@@ -1,9 +0,0 @@
-/** The props for the {@link CaptionLabel} component. */
-export interface CaptionLabelProps {
-    /** The ID for the heading element. Must be the same as the labelled-by in Table. */
-    id?: string;
-    /** The month where the caption is displayed. */
-    displayMonth: Date;
-}
-/** Render the caption for the displayed month. This component is used when `captionLayout="buttons"`. */
-export declare function CaptionLabel(props: CaptionLabelProps): JSX.Element;

package/dist/components/CaptionLabel/index.d.ts

@@ -1 +0,0 @@
-export * from './CaptionLabel';

package/dist/components/CaptionNavigation/CaptionNavigation.d.ts

@@ -1,5 +0,0 @@
-import { CaptionProps } from '../../components/Caption/Caption';
-/**
- * Render a caption with a button-based navigation.
- */
-export declare function CaptionNavigation(props: CaptionProps): JSX.Element;

package/dist/components/CaptionNavigation/index.d.ts

@@ -1 +0,0 @@
-export * from './CaptionNavigation';

package/dist/components/Day/Day.d.ts

@@ -1,12 +0,0 @@
-/** Represent the props used by the {@link Day} component. */
-export interface DayProps {
-    /** The month where the date is displayed. */
-    displayMonth: Date;
-    /** The date to render. */
-    date: Date;
-}
-/**
- * The content of a day cell – as a button or span element according to its
- * modifiers.
- */
-export declare function Day(props: DayProps): JSX.Element;

package/dist/components/Day/index.d.ts

@@ -1 +0,0 @@
-export * from './Day';