react-day-picker - npm Package Compare versions

Comparing version 9.5.1 to 9.6.0

dist/cjs/components/Nav.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Nav = Nav;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const UI_js_1 = require("../UI.js");
@@ -19,8 +49,18 @@ const useDayPicker_js_1 = require("../useDayPicker.js");
     const { components, classNames, labels: { labelPrevious, labelNext } } = (0, useDayPicker_js_1.useDayPicker)();
+    const handleNextClick = (0, react_1.useCallback)((e) => {
+        if (nextMonth) {
+            onNextClick?.(e);
+        }
+    }, [nextMonth, onNextClick]);
+    const handlePreviousClick = (0, react_1.useCallback)((e) => {
+        if (previousMonth) {
+            onPreviousClick?.(e);
+        }
+    }, [previousMonth, onPreviousClick]);
     return (react_1.default.createElement("nav", { ...navProps },
-        react_1.default.createElement(components.PreviousMonthButton, { type: "button", className: classNames[UI_js_1.UI.PreviousMonthButton], tabIndex: previousMonth ? undefined : -1, disabled: previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth), onClick: props.onPreviousClick },
+        react_1.default.createElement(components.PreviousMonthButton, { type: "button", className: classNames[UI_js_1.UI.PreviousMonthButton], tabIndex: previousMonth ? undefined : -1, "aria-disabled": previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth), onClick: handlePreviousClick },
             react_1.default.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI_js_1.UI.Chevron], orientation: "left" })),
-        react_1.default.createElement(components.NextMonthButton, { type: "button", className: classNames[UI_js_1.UI.NextMonthButton], tabIndex: nextMonth ? undefined : -1, disabled: nextMonth ? undefined : true, "aria-label": labelNext(nextMonth), onClick: props.onNextClick },
+        react_1.default.createElement(components.NextMonthButton, { type: "button", className: classNames[UI_js_1.UI.NextMonthButton], tabIndex: nextMonth ? undefined : -1, "aria-disabled": nextMonth ? undefined : true, "aria-label": labelNext(nextMonth), onClick: handleNextClick },
             react_1.default.createElement(components.Chevron, { disabled: nextMonth ? undefined : true, orientation: "right", className: classNames[UI_js_1.UI.Chevron] }))));
 }
 //# sourceMappingURL=Nav.js.map

dist/cjs/components/Root.d.ts

@@ -1,2 +0,2 @@
-import React, { type HTMLAttributes } from "react";
+import React, { type Ref, type HTMLAttributes } from "react";
 /**
@@ -8,3 +8,6 @@ * Render the root element.
  */
-export declare function Root(props: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function Root(props: {
+    /** Ref for root element used when `animate` is `true`. */
+    rootRef?: Ref<HTMLDivElement>;
+} & HTMLAttributes<HTMLDivElement>): React.JSX.Element;
 export type RootProps = Parameters<typeof Root>[0];

dist/cjs/components/Root.js

@@ -15,4 +15,5 @@ "use strict";
 function Root(props) {
-    return react_1.default.createElement("div", { ...props });
+    const { rootRef, ...rest } = props;
+    return react_1.default.createElement("div", { ...rest, ref: rootRef });
 }
 //# sourceMappingURL=Root.js.map

dist/cjs/DayPicker.js

@@ -50,2 +50,3 @@ "use strict";
 const defaultLabels = __importStar(require("./labels/index.js"));
+const useAnimation_js_1 = require("./useAnimation.js");
 const useCalendar_js_1 = require("./useCalendar.js");
@@ -178,2 +179,9 @@ const useDayPicker_js_1 = require("./useDayPicker.js");
     const dataAttributes = (0, getDataAttributes_js_1.getDataAttributes)(props);
+    const rootElRef = (0, react_1.useRef)(null);
+    (0, useAnimation_js_1.useAnimation)(rootElRef, Boolean(props.animate), {
+        classNames,
+        months,
+        focused,
+        dateLib
+    });
     const contextValue = {
@@ -196,3 +204,3 @@ dayPickerProps: props,
     return (react_1.default.createElement(useDayPicker_js_1.dayPickerContext.Provider, { value: contextValue },
-        react_1.default.createElement(components.Root, { className: className, style: style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], ...dataAttributes },
+        react_1.default.createElement(components.Root, { rootRef: props.animate ? rootElRef : undefined, className: className, style: style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], ...dataAttributes },
             react_1.default.createElement(components.Months, { className: classNames[UI_js_1.UI.Months], style: styles?.[UI_js_1.UI.Months] },
@@ -203,4 +211,4 @@ !props.hideNavigation && (react_1.default.createElement(components.Nav, { className: classNames[UI_js_1.UI.Nav], style: styles?.[UI_js_1.UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
                     const dropdownYears = (0, getYearOptions_js_1.getYearOptions)(navStart, navEnd, formatters, dateLib);
-                    return (react_1.default.createElement(components.Month, { className: classNames[UI_js_1.UI.Month], style: styles?.[UI_js_1.UI.Month], key: displayIndex, displayIndex: displayIndex, calendarMonth: calendarMonth },
-                        react_1.default.createElement(components.MonthCaption, { className: classNames[UI_js_1.UI.MonthCaption], style: styles?.[UI_js_1.UI.MonthCaption], calendarMonth: calendarMonth, displayIndex: displayIndex }, captionLayout?.startsWith("dropdown") ? (react_1.default.createElement(components.DropdownNav, { className: classNames[UI_js_1.UI.Dropdowns], style: styles?.[UI_js_1.UI.Dropdowns] },
+                    return (react_1.default.createElement(components.Month, { "data-animated-month": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Month], style: styles?.[UI_js_1.UI.Month], key: displayIndex, displayIndex: displayIndex, calendarMonth: calendarMonth },
+                        react_1.default.createElement(components.MonthCaption, { "data-animated-caption": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.MonthCaption], style: styles?.[UI_js_1.UI.MonthCaption], calendarMonth: calendarMonth, displayIndex: displayIndex }, captionLayout?.startsWith("dropdown") ? (react_1.default.createElement(components.DropdownNav, { className: classNames[UI_js_1.UI.Dropdowns], style: styles?.[UI_js_1.UI.Dropdowns] },
                             captionLayout === "dropdown" ||
@@ -212,6 +220,6 @@ captionLayout === "dropdown-months" ? (react_1.default.createElement(components.MonthsDropdown, { className: classNames[UI_js_1.UI.MonthsDropdown], "aria-label": labelMonthDropdown(), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: dropdownMonths, style: styles?.[UI_js_1.UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) })) : (react_1.default.createElement("span", { role: "status", "aria-live": "polite" }, formatMonthDropdown(calendarMonth.date, dateLib))),
                                 undefined, className: classNames[UI_js_1.UI.MonthGrid], style: styles?.[UI_js_1.UI.MonthGrid] },
-                            !props.hideWeekdays && (react_1.default.createElement(components.Weekdays, { className: classNames[UI_js_1.UI.Weekdays], style: styles?.[UI_js_1.UI.Weekdays] },
+                            !props.hideWeekdays && (react_1.default.createElement(components.Weekdays, { "data-animated-weekdays": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Weekdays], style: styles?.[UI_js_1.UI.Weekdays] },
                                 showWeekNumber && (react_1.default.createElement(components.WeekNumberHeader, { "aria-label": labelWeekNumberHeader(dateLib.options), className: classNames[UI_js_1.UI.WeekNumberHeader], style: styles?.[UI_js_1.UI.WeekNumberHeader], scope: "col" }, formatWeekNumberHeader())),
                                 weekdays.map((weekday, i) => (react_1.default.createElement(components.Weekday, { "aria-label": labelWeekday(weekday, dateLib.options, dateLib), className: classNames[UI_js_1.UI.Weekday], key: i, style: styles?.[UI_js_1.UI.Weekday], scope: "col" }, formatWeekdayName(weekday, dateLib.options, dateLib)))))),
-                            react_1.default.createElement(components.Weeks, { className: classNames[UI_js_1.UI.Weeks], style: styles?.[UI_js_1.UI.Weeks] }, calendarMonth.weeks.map((week, weekIndex) => {
+                            react_1.default.createElement(components.Weeks, { "data-animated-weeks": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Weeks], style: styles?.[UI_js_1.UI.Weeks] }, calendarMonth.weeks.map((week, weekIndex) => {
                                 return (react_1.default.createElement(components.Week, { className: classNames[UI_js_1.UI.Week], key: week.weekNumber, style: styles?.[UI_js_1.UI.Week], week: week },
@@ -228,4 +236,3 @@ showWeekNumber && (react_1.default.createElement(components.WeekNumber, { week: week, style: styles?.[UI_js_1.UI.WeekNumber], "aria-label": labelWeekNumber(week.weekNumber, {
                                         modifiers[UI_js_1.SelectionState.selected] =
-                                            !modifiers.disabled &&
-                                                (isSelected?.(date) || modifiers.selected);
+                                            isSelected?.(date) || modifiers.selected;
                                         if ((0, typeguards_js_1.isDateRange)(selectedValue)) {
@@ -232,0 +239,0 @@ // add range modifiers

dist/cjs/helpers/getDefaultClassNames.js

@@ -24,4 +24,8 @@ "use strict";
     }
+    for (const key in UI_js_1.Animation) {
+        classNames[UI_js_1.Animation[key]] =
+            `rdp-${UI_js_1.Animation[key]}`;
+    }
     return classNames;
 }
 //# sourceMappingURL=getDefaultClassNames.js.map

dist/cjs/types/deprecated.d.ts

@@ -87,3 +87,4 @@ import { DayFlag, SelectionState } from "../UI.js";
  * @ignore
- * @deprecated This type will be removed. Use `SelectHandler<"single">` instead.
+ * @deprecated This type will be removed. Use `SelectHandler<{mode: "single"}>`
+ *   instead.
  */
@@ -93,4 +94,4 @@ export type SelectSingleEventHandler = PropsSingle["onSelect"];
  * @ignore
- * @deprecated This type will be removed. Use `SelectHandler<"multiple">`
- *   instead.
+ * @deprecated This type will be removed. Use `SelectHandler<{mode:
+ *   "multiple"}>` instead.
  */
@@ -100,3 +101,4 @@ export type SelectMultipleEventHandler = PropsMulti["onSelect"];
  * @ignore
- * @deprecated This type will be removed. Use `SelectHandler<"range">` instead.
+ * @deprecated This type will be removed. Use `SelectHandler<{mode: "range"}>`
+ *   instead.
  */
@@ -103,0 +105,0 @@ export type SelectRangeEventHandler = PropsRange["onSelect"];

dist/cjs/types/props.d.ts

@@ -221,2 +221,9 @@ import React from "react";
     /**
+     * Animate navigating between months.
+     *
+     * @since 9.6.0
+     * @see https://daypicker.dev/docs/navigation#animate
+     */
+    animate?: boolean;
+    /**
      * Display the weeks in the month following the broadcast calendar. Setting
@@ -223,0 +230,0 @@ * this prop will ignore {@link weekStartsOn} (always Monday) and

dist/cjs/types/shared.d.ts

 import type { CSSProperties } from "react";
-import { UI, DayFlag, SelectionState } from "../UI.js";
+import { UI, DayFlag, SelectionState, Animation } from "../UI.js";
 import * as components from "../components/custom-components.js";
@@ -282,3 +282,3 @@ import { formatCaption, formatDay, formatMonthCaption, formatMonthDropdown, formatWeekdayName, formatWeekNumber, formatWeekNumberHeader, formatYearCaption, formatYearDropdown } from "../formatters/index.js";
 export type ClassNames = {
-    [key in UI | SelectionState | DayFlag]: string;
+    [key in UI | SelectionState | DayFlag | Animation]: string;
 };
@@ -285,0 +285,0 @@ /**

dist/cjs/UI.d.ts

@@ -97,3 +97,26 @@ import { CSSProperties } from "react";
 }
+/** CSS classes used for animating months and captions. */
 /**
+ * Enum representing different animation states for transitioning between
+ * months.
+ */
+export declare enum Animation {
+    /** The entering weeks when they appear before the exiting month. */
+    weeks_before_enter = "weeks_before_enter",
+    /** The exiting weeks when they disappear before the entering month. */
+    weeks_before_exit = "weeks_before_exit",
+    /** The entering weeks when they appear after the exiting month. */
+    weeks_after_enter = "weeks_after_enter",
+    /** The exiting weeks when they disappear after the entering month. */
+    weeks_after_exit = "weeks_after_exit",
+    /** The entering caption when it appears after the exiting month. */
+    caption_after_enter = "caption_after_enter",
+    /** The exiting caption when it disappears after the entering month. */
+    caption_after_exit = "caption_after_exit",
+    /** The entering caption when it appears before the exiting month. */
+    caption_before_enter = "caption_before_enter",
+    /** The exiting caption when it disappears before the entering month. */
+    caption_before_exit = "caption_before_exit"
+}
+/**
  * Deprecated UI elements and flags.
@@ -100,0 +123,0 @@ *

dist/cjs/UI.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectionState = exports.DayFlag = exports.UI = void 0;
+exports.Animation = exports.SelectionState = exports.DayFlag = exports.UI = void 0;
 /**
@@ -102,2 +102,26 @@ * The UI elements composing DayPicker. These elements are mapped to
 })(SelectionState || (exports.SelectionState = SelectionState = {}));
+/** CSS classes used for animating months and captions. */
+/**
+ * Enum representing different animation states for transitioning between
+ * months.
+ */
+var Animation;
+(function (Animation) {
+    /** The entering weeks when they appear before the exiting month. */
+    Animation["weeks_before_enter"] = "weeks_before_enter";
+    /** The exiting weeks when they disappear before the entering month. */
+    Animation["weeks_before_exit"] = "weeks_before_exit";
+    /** The entering weeks when they appear after the exiting month. */
+    Animation["weeks_after_enter"] = "weeks_after_enter";
+    /** The exiting weeks when they disappear after the entering month. */
+    Animation["weeks_after_exit"] = "weeks_after_exit";
+    /** The entering caption when it appears after the exiting month. */
+    Animation["caption_after_enter"] = "caption_after_enter";
+    /** The exiting caption when it disappears after the entering month. */
+    Animation["caption_after_exit"] = "caption_after_exit";
+    /** The entering caption when it appears before the exiting month. */
+    Animation["caption_before_enter"] = "caption_before_enter";
+    /** The exiting caption when it disappears before the entering month. */
+    Animation["caption_before_exit"] = "caption_before_exit";
+})(Animation || (exports.Animation = Animation = {}));
 //# sourceMappingURL=UI.js.map

dist/esm/components/Nav.js

@@ -1,2 +0,2 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { UI } from "../UI.js";
@@ -13,8 +13,18 @@ import { useDayPicker } from "../useDayPicker.js";
     const { components, classNames, labels: { labelPrevious, labelNext } } = useDayPicker();
+    const handleNextClick = useCallback((e) => {
+        if (nextMonth) {
+            onNextClick?.(e);
+        }
+    }, [nextMonth, onNextClick]);
+    const handlePreviousClick = useCallback((e) => {
+        if (previousMonth) {
+            onPreviousClick?.(e);
+        }
+    }, [previousMonth, onPreviousClick]);
     return (React.createElement("nav", { ...navProps },
-        React.createElement(components.PreviousMonthButton, { type: "button", className: classNames[UI.PreviousMonthButton], tabIndex: previousMonth ? undefined : -1, disabled: previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth), onClick: props.onPreviousClick },
+        React.createElement(components.PreviousMonthButton, { type: "button", className: classNames[UI.PreviousMonthButton], tabIndex: previousMonth ? undefined : -1, "aria-disabled": previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth), onClick: handlePreviousClick },
             React.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI.Chevron], orientation: "left" })),
-        React.createElement(components.NextMonthButton, { type: "button", className: classNames[UI.NextMonthButton], tabIndex: nextMonth ? undefined : -1, disabled: nextMonth ? undefined : true, "aria-label": labelNext(nextMonth), onClick: props.onNextClick },
+        React.createElement(components.NextMonthButton, { type: "button", className: classNames[UI.NextMonthButton], tabIndex: nextMonth ? undefined : -1, "aria-disabled": nextMonth ? undefined : true, "aria-label": labelNext(nextMonth), onClick: handleNextClick },
             React.createElement(components.Chevron, { disabled: nextMonth ? undefined : true, orientation: "right", className: classNames[UI.Chevron] }))));
 }
 //# sourceMappingURL=Nav.js.map

dist/esm/components/Root.d.ts

@@ -1,2 +0,2 @@
-import React, { type HTMLAttributes } from "react";
+import React, { type Ref, type HTMLAttributes } from "react";
 /**
@@ -8,3 +8,6 @@ * Render the root element.
  */
-export declare function Root(props: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function Root(props: {
+    /** Ref for root element used when `animate` is `true`. */
+    rootRef?: Ref<HTMLDivElement>;
+} & HTMLAttributes<HTMLDivElement>): React.JSX.Element;
 export type RootProps = Parameters<typeof Root>[0];

dist/esm/components/Root.js

@@ -9,4 +9,5 @@ import React from "react";
 export function Root(props) {
-    return React.createElement("div", { ...props });
+    const { rootRef, ...rest } = props;
+    return React.createElement("div", { ...rest, ref: rootRef });
 }
 //# sourceMappingURL=Root.js.map

dist/esm/DayPicker.js

@@ -1,2 +0,2 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback, useMemo, useRef } from "react";
 import { UI, DayFlag, SelectionState } from "./UI.js";
@@ -14,2 +14,3 @@ import { DateLib, defaultLocale } from "./classes/DateLib.js";
 import * as defaultLabels from "./labels/index.js";
+import { useAnimation } from "./useAnimation.js";
 import { useCalendar } from "./useCalendar.js";
@@ -142,2 +143,9 @@ import { dayPickerContext } from "./useDayPicker.js";
     const dataAttributes = getDataAttributes(props);
+    const rootElRef = useRef(null);
+    useAnimation(rootElRef, Boolean(props.animate), {
+        classNames,
+        months,
+        focused,
+        dateLib
+    });
     const contextValue = {
@@ -160,3 +168,3 @@ dayPickerProps: props,
     return (React.createElement(dayPickerContext.Provider, { value: contextValue },
-        React.createElement(components.Root, { className: className, style: style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], ...dataAttributes },
+        React.createElement(components.Root, { rootRef: props.animate ? rootElRef : undefined, className: className, style: style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], ...dataAttributes },
             React.createElement(components.Months, { className: classNames[UI.Months], style: styles?.[UI.Months] },
@@ -167,4 +175,4 @@ !props.hideNavigation && (React.createElement(components.Nav, { className: classNames[UI.Nav], style: styles?.[UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
                     const dropdownYears = getYearOptions(navStart, navEnd, formatters, dateLib);
-                    return (React.createElement(components.Month, { className: classNames[UI.Month], style: styles?.[UI.Month], key: displayIndex, displayIndex: displayIndex, calendarMonth: calendarMonth },
-                        React.createElement(components.MonthCaption, { className: classNames[UI.MonthCaption], style: styles?.[UI.MonthCaption], calendarMonth: calendarMonth, displayIndex: displayIndex }, captionLayout?.startsWith("dropdown") ? (React.createElement(components.DropdownNav, { className: classNames[UI.Dropdowns], style: styles?.[UI.Dropdowns] },
+                    return (React.createElement(components.Month, { "data-animated-month": props.animate ? "true" : undefined, className: classNames[UI.Month], style: styles?.[UI.Month], key: displayIndex, displayIndex: displayIndex, calendarMonth: calendarMonth },
+                        React.createElement(components.MonthCaption, { "data-animated-caption": props.animate ? "true" : undefined, className: classNames[UI.MonthCaption], style: styles?.[UI.MonthCaption], calendarMonth: calendarMonth, displayIndex: displayIndex }, captionLayout?.startsWith("dropdown") ? (React.createElement(components.DropdownNav, { className: classNames[UI.Dropdowns], style: styles?.[UI.Dropdowns] },
                             captionLayout === "dropdown" ||
@@ -176,6 +184,6 @@ captionLayout === "dropdown-months" ? (React.createElement(components.MonthsDropdown, { className: classNames[UI.MonthsDropdown], "aria-label": labelMonthDropdown(), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: dropdownMonths, style: styles?.[UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) })) : (React.createElement("span", { role: "status", "aria-live": "polite" }, formatMonthDropdown(calendarMonth.date, dateLib))),
                                 undefined, className: classNames[UI.MonthGrid], style: styles?.[UI.MonthGrid] },
-                            !props.hideWeekdays && (React.createElement(components.Weekdays, { className: classNames[UI.Weekdays], style: styles?.[UI.Weekdays] },
+                            !props.hideWeekdays && (React.createElement(components.Weekdays, { "data-animated-weekdays": props.animate ? "true" : undefined, className: classNames[UI.Weekdays], style: styles?.[UI.Weekdays] },
                                 showWeekNumber && (React.createElement(components.WeekNumberHeader, { "aria-label": labelWeekNumberHeader(dateLib.options), className: classNames[UI.WeekNumberHeader], style: styles?.[UI.WeekNumberHeader], scope: "col" }, formatWeekNumberHeader())),
                                 weekdays.map((weekday, i) => (React.createElement(components.Weekday, { "aria-label": labelWeekday(weekday, dateLib.options, dateLib), className: classNames[UI.Weekday], key: i, style: styles?.[UI.Weekday], scope: "col" }, formatWeekdayName(weekday, dateLib.options, dateLib)))))),
-                            React.createElement(components.Weeks, { className: classNames[UI.Weeks], style: styles?.[UI.Weeks] }, calendarMonth.weeks.map((week, weekIndex) => {
+                            React.createElement(components.Weeks, { "data-animated-weeks": props.animate ? "true" : undefined, className: classNames[UI.Weeks], style: styles?.[UI.Weeks] }, calendarMonth.weeks.map((week, weekIndex) => {
                                 return (React.createElement(components.Week, { className: classNames[UI.Week], key: week.weekNumber, style: styles?.[UI.Week], week: week },
@@ -192,4 +200,3 @@ showWeekNumber && (React.createElement(components.WeekNumber, { week: week, style: styles?.[UI.WeekNumber], "aria-label": labelWeekNumber(week.weekNumber, {
                                         modifiers[SelectionState.selected] =
-                                            !modifiers.disabled &&
-                                                (isSelected?.(date) || modifiers.selected);
+                                            isSelected?.(date) || modifiers.selected;
                                         if (isDateRange(selectedValue)) {
@@ -196,0 +203,0 @@ // add range modifiers

dist/esm/helpers/getDefaultClassNames.js

@@ -1,2 +0,2 @@
-import { UI, DayFlag, SelectionState } from "../UI.js";
+import { UI, DayFlag, SelectionState, Animation } from "../UI.js";
 /**
@@ -21,4 +21,8 @@ * Get the default class names for the UI elements.
     }
+    for (const key in Animation) {
+        classNames[Animation[key]] =
+            `rdp-${Animation[key]}`;
+    }
     return classNames;
 }
 //# sourceMappingURL=getDefaultClassNames.js.map

dist/esm/types/deprecated.d.ts

@@ -87,3 +87,4 @@ import { DayFlag, SelectionState } from "../UI.js";
  * @ignore
- * @deprecated This type will be removed. Use `SelectHandler<"single">` instead.
+ * @deprecated This type will be removed. Use `SelectHandler<{mode: "single"}>`
+ *   instead.
  */
@@ -93,4 +94,4 @@ export type SelectSingleEventHandler = PropsSingle["onSelect"];
  * @ignore
- * @deprecated This type will be removed. Use `SelectHandler<"multiple">`
- *   instead.
+ * @deprecated This type will be removed. Use `SelectHandler<{mode:
+ *   "multiple"}>` instead.
  */
@@ -100,3 +101,4 @@ export type SelectMultipleEventHandler = PropsMulti["onSelect"];
  * @ignore
- * @deprecated This type will be removed. Use `SelectHandler<"range">` instead.
+ * @deprecated This type will be removed. Use `SelectHandler<{mode: "range"}>`
+ *   instead.
  */
@@ -103,0 +105,0 @@ export type SelectRangeEventHandler = PropsRange["onSelect"];

dist/esm/types/props.d.ts

@@ -221,2 +221,9 @@ import React from "react";
     /**
+     * Animate navigating between months.
+     *
+     * @since 9.6.0
+     * @see https://daypicker.dev/docs/navigation#animate
+     */
+    animate?: boolean;
+    /**
      * Display the weeks in the month following the broadcast calendar. Setting
@@ -223,0 +230,0 @@ * this prop will ignore {@link weekStartsOn} (always Monday) and

dist/esm/types/shared.d.ts

 import type { CSSProperties } from "react";
-import { UI, DayFlag, SelectionState } from "../UI.js";
+import { UI, DayFlag, SelectionState, Animation } from "../UI.js";
 import * as components from "../components/custom-components.js";
@@ -282,3 +282,3 @@ import { formatCaption, formatDay, formatMonthCaption, formatMonthDropdown, formatWeekdayName, formatWeekNumber, formatWeekNumberHeader, formatYearCaption, formatYearDropdown } from "../formatters/index.js";
 export type ClassNames = {
-    [key in UI | SelectionState | DayFlag]: string;
+    [key in UI | SelectionState | DayFlag | Animation]: string;
 };
@@ -285,0 +285,0 @@ /**

dist/esm/UI.d.ts

@@ -97,3 +97,26 @@ import { CSSProperties } from "react";
 }
+/** CSS classes used for animating months and captions. */
 /**
+ * Enum representing different animation states for transitioning between
+ * months.
+ */
+export declare enum Animation {
+    /** The entering weeks when they appear before the exiting month. */
+    weeks_before_enter = "weeks_before_enter",
+    /** The exiting weeks when they disappear before the entering month. */
+    weeks_before_exit = "weeks_before_exit",
+    /** The entering weeks when they appear after the exiting month. */
+    weeks_after_enter = "weeks_after_enter",
+    /** The exiting weeks when they disappear after the entering month. */
+    weeks_after_exit = "weeks_after_exit",
+    /** The entering caption when it appears after the exiting month. */
+    caption_after_enter = "caption_after_enter",
+    /** The exiting caption when it disappears after the entering month. */
+    caption_after_exit = "caption_after_exit",
+    /** The entering caption when it appears before the exiting month. */
+    caption_before_enter = "caption_before_enter",
+    /** The exiting caption when it disappears before the entering month. */
+    caption_before_exit = "caption_before_exit"
+}
+/**
  * Deprecated UI elements and flags.
@@ -100,0 +123,0 @@ *

dist/esm/UI.js

@@ -99,2 +99,26 @@ /**
 })(SelectionState || (SelectionState = {}));
+/** CSS classes used for animating months and captions. */
+/**
+ * Enum representing different animation states for transitioning between
+ * months.
+ */
+export var Animation;
+(function (Animation) {
+    /** The entering weeks when they appear before the exiting month. */
+    Animation["weeks_before_enter"] = "weeks_before_enter";
+    /** The exiting weeks when they disappear before the entering month. */
+    Animation["weeks_before_exit"] = "weeks_before_exit";
+    /** The entering weeks when they appear after the exiting month. */
+    Animation["weeks_after_enter"] = "weeks_after_enter";
+    /** The exiting weeks when they disappear after the entering month. */
+    Animation["weeks_after_exit"] = "weeks_after_exit";
+    /** The entering caption when it appears after the exiting month. */
+    Animation["caption_after_enter"] = "caption_after_enter";
+    /** The exiting caption when it disappears after the entering month. */
+    Animation["caption_after_exit"] = "caption_after_exit";
+    /** The entering caption when it appears before the exiting month. */
+    Animation["caption_before_enter"] = "caption_before_enter";
+    /** The exiting caption when it disappears before the entering month. */
+    Animation["caption_before_exit"] = "caption_before_exit";
+})(Animation || (Animation = {}));
 //# sourceMappingURL=UI.js.map

package.json

 {
   "name": "react-day-picker",
-  "version": "9.5.1",
+  "version": "9.6.0",
   "description": "Customizable Date Picker for React",
@@ -24,2 +24,5 @@ "author": "Giampaolo Bellavite <[e-mail]>",
   "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
@@ -175,7 +178,2 @@ ".": {
     "dist",
-    "src",
-    "examples",
-    "website/docs",
-    "tsconfig.json",
-    "tsconfig-base.json",
     "style.css",
@@ -195,2 +193,3 @@ "style.module.css",
     "@jest/types": "^29.6.3",
+    "@radix-ui/react-select": "^2.1.5",
     "@swc/core": "^1.10.8",
@@ -197,0 +196,0 @@ "@swc/jest": "^0.2.37",

No alert changes

Worsened metrics

Total package byte prevSize

710833

-43.15%

Dev dependency count

38

2.7%

Number of package files

656

-33.8%

Lines of code

12969

-48.79%

No dependency changes