react-day-picker 8.8.0 → 8.8.2

package/dist/index.d.ts

@@ -7,6 +7,8 @@ interface CaptionProps {
     id?: string;
     /** The month where the caption is displayed. */
     displayMonth: Date;
+    /** The index of the month where the caption is displayed. Older custom components may miss this prop. */
+    displayIndex?: number | undefined;
 }
 /**
  * The layout of the caption:
@@ -28,6 +30,8 @@ interface CaptionLabelProps {
     id?: string;
     /** The month where the caption is displayed. */
     displayMonth: Date;
+    /** The index of the month where the caption is displayed. Older custom components may miss this prop. */
+    displayIndex?: number | undefined;
 }
 /** Render the caption for the displayed month. This component is used when `captionLayout="buttons"`. */
 declare function CaptionLabel(props: CaptionLabelProps): JSX.Element;
@@ -68,7 +72,7 @@ declare function Day(props: DayProps): JSX.Element;
  * // 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); };
+ * const beforeMatcher: DateBefore = { before: new Date(2019, 1, 2); };
  *
  * // will match Sundays
  * const dayOfWeekMatcher: DayOfWeek = {
@@ -632,7 +636,7 @@ interface DayPickerBase {
     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)
+     * source](https://github.com/gpbl/react-day-picker/tree/main/src/components)
      * to understand how internal components are built and provide your custom components.
      */
     components?: CustomComponents;
@@ -713,7 +717,7 @@ interface DayPickerBase {
  * Map of the components that can be changed using the `components` prop.
  *
  * Look at the [components
- * source](https://github.com/gpbl/react-day-picker/tree/master/packages/react-day-picker/src/components)
+ * source](https://github.com/gpbl/react-day-picker/tree/main/src/components)
  * to understand how internal components are built.
  */
 interface CustomComponents {

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default, { createContext, useContext, useState, forwardRef, useEffect, useRef } from 'react';
-import { enUS } from 'date-fns/locale';
 import { format, startOfMonth, endOfMonth, startOfDay, isSameYear, setMonth, setYear, startOfYear, differenceInCalendarMonths, addMonths, isSameMonth, isBefore, startOfISOWeek, startOfWeek, addDays, isSameDay, isAfter, subDays, differenceInCalendarDays, isDate, max, min, addWeeks, addYears, endOfISOWeek, endOfWeek, getUnixTime, getISOWeek, getWeek, getWeeksInMonth, parse } from 'date-fns';
+import { enUS } from 'date-fns/locale';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -49,7 +49,12 @@ function __spreadArray(to, from, pack) {
         }
     }
     return to.concat(ar || Array.prototype.slice.call(from));
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 /** Returns true when the props are of type {@link DayPickerMultipleProps}. */
 function isDayPickerMultiple(props) {
@@ -596,7 +601,7 @@ function CaptionDropdowns(props) {
     var _b = useDayPicker(), classNames = _b.classNames, styles = _b.styles, components = _b.components;
     var goToMonth = useNavigation().goToMonth;
     var handleMonthChange = function (newMonth) {
-        goToMonth(newMonth);
+        goToMonth(addMonths(newMonth, props.displayIndex ? -props.displayIndex : 0));
     };
     var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
     var captionLabel = (React__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
@@ -704,12 +709,12 @@ function Caption(props) {
     }
     else if (captionLayout === 'dropdown-buttons') {
         caption = (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }),
-            React__default.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id })));
+            React__default.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, displayIndex: props.displayIndex, id: props.id }),
+            React__default.createElement(CaptionNavigation, { displayMonth: props.displayMonth, displayIndex: props.displayIndex, id: props.id })));
     }
     else {
         caption = (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }),
+            React__default.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth, displayIndex: props.displayIndex }),
             React__default.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id })));
     }
     return (React__default.createElement("div", { className: classNames.caption, style: styles.caption }, caption));
@@ -858,31 +863,34 @@ function useSelectMultiple() {
  */
 function addToRange(day, range) {
     var _a = range || {}, from = _a.from, to = _a.to;
-    if (!from) {
-        return { from: day, to: undefined };
-    }
-    if (!to && isSameDay(from, day)) {
+    if (from && to) {
+        if (isSameDay(to, day) && isSameDay(from, day)) {
+            return undefined;
+        }
+        if (isSameDay(to, day)) {
+            return { from: to, to: undefined };
+        }
+        if (isSameDay(from, day)) {
+            return undefined;
+        }
+        if (isAfter(from, day)) {
+            return { from: day, to: to };
+        }
         return { from: from, to: day };
     }
-    if (!to && isBefore(day, from)) {
-        return { from: day, to: from };
+    if (to) {
+        if (isAfter(day, to)) {
+            return { from: to, to: day };
+        }
+        return { from: day, to: to };
     }
-    if (!to) {
+    if (from) {
+        if (isBefore(day, from)) {
+            return { from: day, to: from };
+        }
         return { from: from, to: day };
     }
-    if (isSameDay(to, day) && isSameDay(from, day)) {
-        return undefined;
-    }
-    if (isSameDay(to, day)) {
-        return { from: to, to: undefined };
-    }
-    if (isSameDay(from, day)) {
-        return undefined;
-    }
-    if (isAfter(from, day)) {
-        return { from: day, to: to };
-    }
-    return { from: from, to: day };
+    return { from: day, to: undefined };
 }
 
 /**
@@ -943,6 +951,10 @@ function SelectRangeProviderInternal(_a) {
             }
         }
     }
+    else if (selectedTo) {
+        modifiers.range_start = [selectedTo];
+        modifiers.range_end = [selectedTo];
+    }
     if (min) {
         if (selectedFrom && !selectedTo) {
             modifiers.disabled.push({
@@ -956,6 +968,12 @@ function SelectRangeProviderInternal(_a) {
                 before: addDays(selectedFrom, min - 1)
             });
         }
+        if (!selectedFrom && selectedTo) {
+            modifiers.disabled.push({
+                after: subDays(selectedTo, min - 1),
+                before: addDays(selectedTo, min - 1)
+            });
+        }
     }
     if (max) {
         if (selectedFrom && !selectedTo) {
@@ -976,6 +994,14 @@ function SelectRangeProviderInternal(_a) {
                 after: addDays(selectedTo, offset)
             });
         }
+        if (!selectedFrom && selectedTo) {
+            modifiers.disabled.push({
+                before: addDays(selectedTo, -max + 1)
+            });
+            modifiers.disabled.push({
+                after: addDays(selectedTo, max - 1)
+            });
+        }
     }
     return (React__default.createElement(SelectRangeContext.Provider, { value: { selected: selected, onDayClick: onDayClick, modifiers: modifiers } }, children));
 }
@@ -1122,22 +1148,22 @@ function isDayOfWeekType(value) {
 function isDateInRange(date, range) {
     var _a;
     var from = range.from, to = range.to;
-    if (!from) {
-        return false;
-    }
-    if (!to && isSameDay(from, date)) {
-        return true;
+    if (from && to) {
+        var isRangeInverted = differenceInCalendarDays(to, from) < 0;
+        if (isRangeInverted) {
+            _a = [to, from], from = _a[0], to = _a[1];
+        }
+        var isInRange = differenceInCalendarDays(date, from) >= 0 &&
+            differenceInCalendarDays(to, date) >= 0;
+        return isInRange;
     }
-    if (!to) {
-        return false;
+    if (to) {
+        return isSameDay(to, date);
     }
-    var isRangeInverted = differenceInCalendarDays(to, from) < 0;
-    if (isRangeInverted) {
-        _a = [to, from], from = _a[0], to = _a[1];
+    if (from) {
+        return isSameDay(from, date);
     }
-    var isInRange = differenceInCalendarDays(date, from) >= 0 &&
-        differenceInCalendarDays(to, date) >= 0;
-    return isInRange;
+    return false;
 }
 
 /** Returns true if `value` is a Date type. */
@@ -1853,7 +1879,7 @@ function Table(props) {
     var FooterComponent = (_c = components === null || components === void 0 ? void 0 : components.Footer) !== null && _c !== void 0 ? _c : Footer;
     return (React__default.createElement("table", { id: props.id, className: classNames.table, style: styles.table, role: "grid", "aria-labelledby": props['aria-labelledby'] },
         !hideHead && React__default.createElement(HeadComponent, null),
-        React__default.createElement("tbody", { className: classNames.tbody, style: styles.tbody, role: "rowgroup" }, weeks.map(function (week) { return (React__default.createElement(RowComponent, { displayMonth: props.displayMonth, key: week.weekNumber, dates: week.dates, weekNumber: week.weekNumber })); })),
+        React__default.createElement("tbody", { className: classNames.tbody, style: styles.tbody }, weeks.map(function (week) { return (React__default.createElement(RowComponent, { displayMonth: props.displayMonth, key: week.weekNumber, dates: week.dates, weekNumber: week.weekNumber })); })),
         React__default.createElement(FooterComponent, { displayMonth: props.displayMonth })));
 }
 
@@ -1967,7 +1993,7 @@ function Month(props) {
     }
     var CaptionComponent = (_b = components === null || components === void 0 ? void 0 : components.Caption) !== null && _b !== void 0 ? _b : Caption;
     return (React__default.createElement("div", { key: props.displayIndex, className: className.join(' '), style: style },
-        React__default.createElement(CaptionComponent, { id: captionId, displayMonth: props.displayMonth }),
+        React__default.createElement(CaptionComponent, { id: captionId, displayMonth: props.displayMonth, displayIndex: props.displayIndex }),
         React__default.createElement(Table, { id: tableId, "aria-labelledby": captionId, displayMonth: props.displayMonth })));
 }