react-day-picker 8.8.2 → 8.9.1

package/src/hooks/useId/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,31 @@
+import { useEffect, useLayoutEffect } from 'react';
+
+import { canUseDOM } from './useId';
+
+/**
+ * React currently throws a warning when using useLayoutEffect on the server. To
+ * get around it, we can conditionally useEffect on the server (no-op) and
+ * useLayoutEffect in the browser. We occasionally need useLayoutEffect to
+ * ensure we don't get a render flash for certain operations, but we may also
+ * need affected components to render on the server. One example is when setting
+ * a component's descendants to retrieve their index values.
+ *
+ * Important to note that using this hook as an escape hatch will break the
+ * eslint dependency warnings unless you rename the import to `useLayoutEffect`.
+ * Use sparingly only when the effect won't effect the rendered HTML to avoid
+ * any server/client mismatch.
+ *
+ * If a useLayoutEffect is needed and the result would create a mismatch, it's
+ * likely that the component in question shouldn't be rendered on the server at
+ * all, so a better approach would be to lazily render those in a parent
+ * component after client-side hydration.
+ *
+ * https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+ * https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js
+ *
+ * @param effect
+ * @param deps
+ */
+export const useIsomorphicLayoutEffect = canUseDOM()
+  ? useLayoutEffect
+  : useEffect;

package/src/hooks/useInput/useInput.ts

@@ -1,4 +1,9 @@
-import React, { useState } from 'react';
+import {
+  ChangeEventHandler,
+  FocusEventHandler,
+  InputHTMLAttributes,
+  useState
+} from 'react';
 
 import { differenceInCalendarDays, format as _format, parse } from 'date-fns';
 import { enUS } from 'date-fns/locale';
@@ -14,8 +19,8 @@ import {
 import { isValidDate } from './utils/isValidDate';
 
 /** The props to attach to the input field when using {@link useInput}. */
-export type InputHTMLAttributes = Pick<
-  React.InputHTMLAttributes<HTMLInputElement>,
+export type InputProps = Pick<
+  InputHTMLAttributes<HTMLInputElement>,
   'onBlur' | 'onChange' | 'onFocus' | 'value' | 'placeholder'
 >;
 
@@ -62,7 +67,7 @@ export interface UseInputValue {
   /** The props to pass to a DayPicker component. */
   dayPickerProps: InputDayPickerProps;
   /** The props to pass to an input field. */
-  inputProps: InputHTMLAttributes;
+  inputProps: InputProps;
   /** A function to reset to the initial state. */
   reset: () => void;
   /** A function to set the selected day. */
@@ -120,7 +125,7 @@ export function useInput(options: UseInputOptions = {}): UseInputValue {
   // When changing the input field, save its value in state and check if the
   // string is a valid date. If it is a valid day, set it as selected and update
   // the calendar’s month.
-  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {
     setInputValue(e.target.value);
     const day = parseValue(e.target.value);
     const isBefore = fromDate && differenceInCalendarDays(fromDate, day) > 0;
@@ -135,7 +140,7 @@ export function useInput(options: UseInputOptions = {}): UseInputValue {
 
   // Special case for _required_ fields: on blur, if the value of the input is not
   // a valid date, reset the calendar and the input value.
-  const handleBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
+  const handleBlur: FocusEventHandler<HTMLInputElement> = (e) => {
     const day = parseValue(e.target.value);
     if (!isValidDate(day)) {
       reset();
@@ -144,7 +149,7 @@ export function useInput(options: UseInputOptions = {}): UseInputValue {
 
   // When focusing, make sure DayPicker visualizes the month of the date in the
   // input field.
-  const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
+  const handleFocus: FocusEventHandler<HTMLInputElement> = (e) => {
     if (!e.target.value) {
       reset();
       return;
@@ -166,7 +171,7 @@ export function useInput(options: UseInputOptions = {}): UseInputValue {
     today
   };
 
-  const inputProps: InputHTMLAttributes = {
+  const inputProps: InputProps = {
     onBlur: handleBlur,
     onChange: handleChange,
     onFocus: handleFocus,

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,4 +1,6 @@
-import type { Locale } from 'date-fns';
+import { CSSProperties, ReactNode } from 'react';
+
+import { Locale } from 'date-fns';
 
 import { CaptionLayout, CaptionProps } from 'components/Caption';
 import { CaptionLabelProps } from 'components/CaptionLabel';
@@ -6,6 +8,7 @@ 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,14 @@
-import React from 'react';
+import { ReactNode } from 'react';
+
+import { Locale } from 'date-fns';
 
 /** Represents a function to format a date. */
 export type DateFormatter = (
   date: Date,
-  options?: { locale?: Locale }
-) => React.ReactNode;
+  options?: {
+    locale?: Locale;
+  }
+) => ReactNode;
 
 /** Represent a map of formatters used to render localized content. */
 export type Formatters = {
@@ -25,5 +29,7 @@ export type Formatters = {
 /** Represent a function to format the week number. */
 export type WeekNumberFormatter = (
   weekNumber: number,
-  options?: { locale?: Locale }
-) => React.ReactNode;
+  options?: {
+    locale?: Locale;
+  }
+) => ReactNode;

package/src/types/Labels.ts

@@ -1,4 +1,4 @@
-import type { Locale } from 'date-fns';
+import { Locale } from 'date-fns';
 
 import { ActiveModifiers } from 'types/Modifiers';
 
@@ -18,20 +18,31 @@ export type Labels = {
 export type DayLabel = (
   day: Date,
   activeModifiers: ActiveModifiers,
-  options?: { locale?: Locale }
+  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 }
+  options?: {
+    locale?: Locale;
+  }
 ) => string;
 
 /** Return the ARIA label for the Head component.*/
-export type WeekdayLabel = (day: Date, options?: { locale?: Locale }) => string;
+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 }
+  options?: {
+    locale?: Locale;
+  }
 ) => string;

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"]
 }