react-day-picker 8.8.2 → 8.9.0

package/src/index.ts

@@ -15,6 +15,7 @@ export * from 'components/HeadRow';
 export * from 'components/IconDropdown';
 export * from 'components/IconRight';
 export * from 'components/IconLeft';
+export * from 'components/Months';
 export * from 'components/Row';
 export * from 'components/WeekNumber';
 

package/src/style.css

@@ -1,12 +1,13 @@
 .rdp {
-  --rdp-cell-size: 40px;
-  --rdp-caption-font-size: 18px;
-  --rdp-accent-color: #0000ff;
-  --rdp-background-color: #e7edff;
-  --rdp-accent-color-dark: #3003e1;
-  --rdp-background-color-dark: #180270;
+  --rdp-cell-size: 40px; /* Size of the day cells. */
+  --rdp-caption-font-size: 18px; /* Font size for the caption labels. */
+  --rdp-accent-color: #0000ff; /* Accent color for the background of selected days. */
+  --rdp-background-color: #e7edff; /* Background color for the hovered/focused elements. */
+  --rdp-accent-color-dark: #3003e1; /* Accent color for the background of selected days (to use in dark-mode). */
+  --rdp-background-color-dark: #180270; /* Background color for the hovered/focused elements (to use in dark-mode). */
   --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */
   --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */
+  --rdp-selected-color: #fff; /* Color of selected day text */
 
   margin: 1em;
 }
@@ -270,7 +271,7 @@
 .rdp-day_selected,
 .rdp-day_selected:focus-visible,
 .rdp-day_selected:hover {
-  color: white;
+  color: var(--rdp-selected-color);
   opacity: 1;
   background-color: var(--rdp-accent-color);
 }

package/src/types/DayPickerBase.ts

@@ -1,11 +1,14 @@
 import type { Locale } from 'date-fns';
 
+import { CSSProperties, ReactNode } from 'react';
+
 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 { FooterProps } from 'components/Footer';
+import { MonthsProps } from 'components/Months';
 import { RowProps } from 'components/Row';
 import { WeekNumberProps } from 'components/WeekNumber';
 
@@ -64,7 +67,7 @@ export interface DayPickerBase {
   /**
    * Style to apply to the container element.
    */
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   /**
    * Change the inline styles of the HTML elements.
    */
@@ -226,7 +229,7 @@ export interface DayPickerBase {
   /**
    * Content to add to the table footer element.
    */
-  footer?: React.ReactNode;
+  footer?: ReactNode;
 
   /**
    * When a selection mode is set, DayPicker will focus the first selected day
@@ -275,35 +278,104 @@ export interface DayPickerBase {
    */
   labels?: Partial<Labels>;
 
+  /**
+   * A map of formatters. Use the formatters to override the default formatting
+   * functions.
+   */
+  formatters?: Partial<Formatters>;
+
   /**
    * The text direction of the calendar. Use `ltr` for left-to-right (default)
    * or `rtl` for right-to-left.
    */
-  dir?: string;
+  dir?: HTMLDivElement['dir'];
 
   /**
-   * A map of formatters. Use the formatters to override the default formatting
-   * functions.
+   * A cryptographic nonce ("number used once") which can be used by Content
+   * Security Policy for the inline `style` attributes.
+   **/
+  nonce?: HTMLDivElement['nonce'];
+
+  /**
+   * Add a `title` attribute to the container element.
+   **/
+  title?: HTMLDivElement['title'];
+
+  /**
+   * Add the language tag to the container element.
+   **/
+  lang?: HTMLDivElement['lang'];
+
+  /**
+   * Event callback fired when the next month button is clicked.
    */
-  formatters?: Partial<Formatters>;
+  onNextClick?: MonthChangeEventHandler;
+  /**
+   * Event callback fired when the previous month button is clicked.
+   */
+  onPrevClick?: MonthChangeEventHandler;
+  /**
+   * Event callback fired when the week number is clicked. Requires
+   * `showWeekNumbers` set.
+   */
+  onWeekNumberClick?: WeekNumberClickEventHandler;
 
+  /**
+   * Event callback fired when the user clicks on a day.
+   */
   onDayClick?: DayClickEventHandler;
+  /**
+   * Event callback fired when the user focuses on a day.
+   */
   onDayFocus?: DayFocusEventHandler;
+  /**
+   * Event callback fired when the user blurs from a day.
+   */
   onDayBlur?: DayFocusEventHandler;
+  /**
+   * Event callback fired when the user hovers on a day.
+   */
   onDayMouseEnter?: DayMouseEventHandler;
+  /**
+   * Event callback fired when the user hovers away from a day.
+   */
   onDayMouseLeave?: DayMouseEventHandler;
+  /**
+   * Event callback fired when the user presses a key on a day.
+   */
   onDayKeyDown?: DayKeyboardEventHandler;
+  /**
+   * Event callback fired when the user presses a key on a day.
+   */
   onDayKeyUp?: DayKeyboardEventHandler;
+  /**
+   * Event callback fired when the user presses a key on a day.
+   */
   onDayKeyPress?: DayKeyboardEventHandler;
+  /**
+   * Event callback fired when the pointer enters a day.
+   */
   onDayPointerEnter?: DayPointerEventHandler;
+  /**
+   * Event callback fired when the pointer leaves a day.
+   */
   onDayPointerLeave?: DayPointerEventHandler;
+  /**
+   * Event callback when a day touch event is canceled.
+   */
   onDayTouchCancel?: DayTouchEventHandler;
+  /**
+   * Event callback when a day touch event ends.
+   */
   onDayTouchEnd?: DayTouchEventHandler;
+  /**
+   * Event callback when a day touch event moves.
+   */
   onDayTouchMove?: DayTouchEventHandler;
+  /**
+   * Event callback when a day touch event starts.
+   */
   onDayTouchStart?: DayTouchEventHandler;
-  onNextClick?: MonthChangeEventHandler;
-  onPrevClick?: MonthChangeEventHandler;
-  onWeekNumberClick?: WeekNumberClickEventHandler;
 }
 
 /**
@@ -324,7 +396,7 @@ export interface CustomComponents {
    * Each `Day` in DayPicker should render one of the following, according to
    * the return value of {@link useDayRender}.
    *
-   * - an empty `React.Fragment`, to render if `isHidden` is true
+   * - an empty `Fragment`, to render if `isHidden` is true
    * - a `button` element, when the day is interactive, e.g. is selectable
    * - a `div` or a `span` element, when the day is not interactive
    *
@@ -346,6 +418,8 @@ export interface CustomComponents {
   IconRight?: (props: StyledComponent) => JSX.Element | null;
   /** The arrow left icon (used for the Navigation buttons). */
   IconLeft?: (props: StyledComponent) => JSX.Element | null;
+  /** The component wrapping the month grids. */
+  Months?: (props: MonthsProps) => 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. */

package/src/types/EventHandlers.ts

@@ -1,3 +1,11 @@
+import {
+  FocusEvent,
+  KeyboardEvent,
+  MouseEvent,
+  PointerEvent,
+  TouchEvent
+} from 'react';
+
 import { DateRange } from 'types/Matchers';
 
 import { ActiveModifiers } from './Modifiers';
@@ -6,35 +14,35 @@ import { ActiveModifiers } from './Modifiers';
 export type DayClickEventHandler = (
   day: Date,
   activeModifiers: ActiveModifiers,
-  e: React.MouseEvent
+  e: MouseEvent
 ) => void;
 
 /** The event handler when a day is focused. */
 export type DayFocusEventHandler = (
   day: Date,
   activeModifiers: ActiveModifiers,
-  e: React.FocusEvent | React.KeyboardEvent
+  e: FocusEvent | KeyboardEvent
 ) => void;
 
 /** The event handler when a day gets a keyboard event. */
 export type DayKeyboardEventHandler = (
   day: Date,
   activeModifiers: ActiveModifiers,
-  e: React.KeyboardEvent
+  e: KeyboardEvent
 ) => void;
 
 /** The event handler when a day gets a mouse event. */
 export type DayMouseEventHandler = (
   day: Date,
   activeModifiers: ActiveModifiers,
-  e: React.MouseEvent
+  e: MouseEvent
 ) => void;
 
 /** The event handler when a day gets a pointer event. */
 export type DayPointerEventHandler = (
   day: Date,
   activeModifiers: ActiveModifiers,
-  e: React.PointerEvent
+  e: PointerEvent
 ) => void;
 
 /** The event handler when a month is changed in the calendar. */
@@ -49,7 +57,7 @@ export type SelectMultipleEventHandler = (
   /** The day that was clicked */
   activeModifiers: ActiveModifiers,
   /** The mouse event that triggered this event. */
-  e: React.MouseEvent
+  e: MouseEvent
 ) => void;
 
 /** The event handler when selecting a range of days. */
@@ -60,7 +68,7 @@ export type SelectRangeEventHandler = (
   selectedDay: Date,
   /** The modifiers of the selected day. */
   activeModifiers: ActiveModifiers,
-  e: React.MouseEvent
+  e: MouseEvent
 ) => void;
 
 /** The event handler when selecting a single day. */
@@ -71,7 +79,7 @@ export type SelectSingleEventHandler = (
   selectedDay: Date,
   /** The modifiers of the selected day. */
   activeModifiers: ActiveModifiers,
-  e: React.MouseEvent
+  e: MouseEvent
 ) => void;
 
 /**The event handler when the week number is clicked. */
@@ -81,12 +89,12 @@ export type WeekNumberClickEventHandler = (
   /** The dates in the clicked week. */
   dates: Date[],
   /** The mouse event that triggered this event. */
-  e: React.MouseEvent
+  e: MouseEvent
 ) => void;
 
 /** The event handler when a day gets a touch event. */
 export type DayTouchEventHandler = (
   day: Date,
   activeModifiers: ActiveModifiers,
-  e: React.TouchEvent
+  e: TouchEvent
 ) => void;

package/src/types/Formatters.ts

@@ -1,10 +1,10 @@
-import React from 'react';
+import { ReactNode } from 'react';
 
 /** Represents a function to format a date. */
 export type DateFormatter = (
   date: Date,
   options?: { locale?: Locale }
-) => React.ReactNode;
+) => ReactNode;
 
 /** Represent a map of formatters used to render localized content. */
 export type Formatters = {
@@ -26,4 +26,4 @@ export type Formatters = {
 export type WeekNumberFormatter = (
   weekNumber: number,
   options?: { locale?: Locale }
-) => React.ReactNode;
+) => ReactNode;

package/src/types/Modifiers.ts

@@ -1,3 +1,5 @@
+import { CSSProperties } from 'react';
+
 import { Matcher } from './Matchers';
 
 /** A _modifier_ represents different styles or states of a day displayed in the calendar. */
@@ -43,8 +45,8 @@ 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>>;
+export type ModifiersStyles = Record<Modifier, CSSProperties> &
+  Partial<Record<InternalModifier, CSSProperties>>;
 
 /** The classnames to assign to each day element matching a modifier. */
 export type ModifiersClassNames = Record<Modifier, string> &

package/src/types/Styles.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import { CSSProperties, ReactNode } from 'react';
 
 /** The style (either via class names or via in-line styles) of an element. */
-export type StyledElement<T = string | React.CSSProperties> = {
+export type StyledElement<T = string | CSSProperties> = {
   /** The root element. */
   readonly root: T;
   /** The root element when `numberOfMonths > 1`. */
@@ -114,12 +114,12 @@ export type ClassNames = Partial<StyledElement<string>>;
  * `modifiersStyles` prop.
  */
 export type Styles = Partial<
-  Omit<StyledElement<React.CSSProperties>, InternalModifiersElement>
+  Omit<StyledElement<CSSProperties>, InternalModifiersElement>
 >;
 
 /** Props of a component that can be styled via classNames or inline-styles. */
 export type StyledComponent = {
   className?: string;
-  style?: React.CSSProperties;
-  children?: React.ReactNode;
+  style?: CSSProperties;
+  children?: ReactNode;
 };

package/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "module": "es6",
     "moduleResolution": "node",
     "rootDir": "./",
@@ -14,11 +14,13 @@
     "sourceMap": true,
     "outDir": "./dist",
     "importHelpers": true,
-    "esModuleInterop": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": false,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "skipLibCheck": true,
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "isolatedModules": false
   },
   "include": ["test", "src"]
 }