react-day-picker 8.2.1 → 8.3.1

package/dist/index.esm.js

@@ -14,18 +14,23 @@ import isBefore from 'date-fns/isBefore';
 import isSameMonth from 'date-fns/isSameMonth';
 import differenceInCalendarMonths from 'date-fns/differenceInCalendarMonths';
 import addDays from 'date-fns/addDays';
+import startOfISOWeek from 'date-fns/startOfISOWeek';
 import startOfWeek from 'date-fns/startOfWeek';
 import getUnixTime from 'date-fns/getUnixTime';
 import isSameDay from 'date-fns/isSameDay';
 import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
+import subDays from 'date-fns/subDays';
 import isAfter from 'date-fns/isAfter';
+import { isAfter as isAfter$1 } from 'date-fns';
 import isDate from 'date-fns/isDate';
 import addWeeks from 'date-fns/addWeeks';
 import addYears from 'date-fns/addYears';
+import endOfISOWeek from 'date-fns/endOfISOWeek';
 import endOfWeek from 'date-fns/endOfWeek';
 import max from 'date-fns/max';
 import min from 'date-fns/min';
 import getWeeksInMonth from 'date-fns/getWeeksInMonth';
+import getISOWeek from 'date-fns/getISOWeek';
 import getWeek from 'date-fns/getWeek';
 import parse from 'date-fns/parse';
 
@@ -255,7 +260,7 @@ var labels = /*#__PURE__*/Object.freeze({
  * Returns the default values to use in the DayPickerContext, in case they are
  * not passed down with the DayPicker initial props.
  */
-function getDefaultContextValue() {
+function getDefaultContextValues() {
     var captionLayout = 'buttons';
     var classNames = defaultClassNames;
     var locale = enUS;
@@ -314,12 +319,13 @@ var DayPickerContext = createContext(undefined);
  * initial DayPicker props.
  */
 function DayPickerProvider(props) {
-    var _a, _b, _c, _d;
+    var _a;
     var initialProps = props.initialProps;
-    var defaults = getDefaultContextValue();
-    var _e = parseFromToProps(initialProps), fromDate = _e.fromDate, toDate = _e.toDate;
-    var captionLayout = (_a = initialProps.captionLayout) !== null && _a !== void 0 ? _a : defaults.captionLayout;
+    var defaultContextValues = getDefaultContextValues();
+    var _b = parseFromToProps(initialProps), fromDate = _b.fromDate, toDate = _b.toDate;
+    var captionLayout = (_a = initialProps.captionLayout) !== null && _a !== void 0 ? _a : defaultContextValues.captionLayout;
     if (captionLayout !== 'buttons' && (!fromDate || !toDate)) {
+        // When no from/to dates are set, the caption is always buttons
         captionLayout = 'buttons';
     }
     var onSelect;
@@ -328,61 +334,9 @@ function DayPickerProvider(props) {
         isDayPickerRange(initialProps)) {
         onSelect = initialProps.onSelect;
     }
-    var value = {
-        captionLayout: captionLayout,
-        className: initialProps.className,
-        classNames: __assign(__assign({}, defaults.classNames), initialProps.classNames),
-        components: __assign(__assign({}, defaults.components), initialProps.components),
-        defaultMonth: initialProps.defaultMonth,
-        dir: initialProps.dir,
-        disabled: initialProps.disabled,
-        disableNavigation: initialProps.disableNavigation,
-        fixedWeeks: initialProps.fixedWeeks,
-        footer: initialProps.footer,
-        formatters: __assign(__assign({}, defaults.formatters), initialProps.formatters),
-        fromDate: fromDate,
-        hidden: initialProps.hidden,
-        hideHead: initialProps.hideHead,
-        initialFocus: initialProps.initialFocus,
-        labels: __assign(__assign({}, defaults.labels), initialProps.labels),
-        locale: (_b = initialProps.locale) !== null && _b !== void 0 ? _b : defaults.locale,
-        mode: initialProps.mode || 'default',
-        modifiers: __assign(__assign({}, defaults.modifiers), initialProps.modifiers),
-        modifiersClassNames: __assign(__assign({}, defaults.modifiersClassNames), initialProps.modifiersClassNames),
-        modifiersStyles: initialProps.modifiersStyles,
-        month: initialProps.month,
-        numberOfMonths: (_c = initialProps.numberOfMonths) !== null && _c !== void 0 ? _c : defaults.numberOfMonths,
-        onDayBlur: initialProps.onDayBlur,
-        onDayClick: initialProps.onDayClick,
-        onDayFocus: initialProps.onDayFocus,
-        onDayKeyDown: initialProps.onDayKeyDown,
-        onDayKeyPress: initialProps.onDayKeyPress,
-        onDayKeyUp: initialProps.onDayKeyUp,
-        onDayMouseEnter: initialProps.onDayMouseEnter,
-        onDayMouseLeave: initialProps.onDayMouseLeave,
-        onDayTouchCancel: initialProps.onDayTouchCancel,
-        onDayTouchEnd: initialProps.onDayTouchEnd,
-        onDayTouchMove: initialProps.onDayTouchMove,
-        onDayTouchStart: initialProps.onDayTouchStart,
-        onMonthChange: initialProps.onMonthChange,
-        onNextClick: initialProps.onNextClick,
-        onPrevClick: initialProps.onPrevClick,
-        onSelect: onSelect,
-        onWeekNumberClick: initialProps.onWeekNumberClick,
-        pagedNavigation: initialProps.pagedNavigation,
-        reverseMonths: initialProps.reverseMonths,
-        selected: initialProps.selected,
-        showOutsideDays: initialProps.showOutsideDays,
-        showWeekNumber: initialProps.showWeekNumber,
-        style: initialProps.style,
-        styles: __assign(__assign({}, defaults.styles), initialProps.styles),
-        toDate: toDate,
-        today: (_d = initialProps.today) !== null && _d !== void 0 ? _d : defaults.today,
-        weekStartsOn: initialProps.weekStartsOn
-    };
+    var value = __assign(__assign(__assign({}, defaultContextValues), initialProps), { captionLayout: captionLayout, classNames: __assign(__assign({}, defaultContextValues.classNames), initialProps.classNames), components: __assign({}, initialProps.components), formatters: __assign(__assign({}, defaultContextValues.formatters), initialProps.formatters), fromDate: fromDate, labels: __assign(__assign({}, defaultContextValues.labels), initialProps.labels), mode: initialProps.mode || defaultContextValues.mode, modifiers: __assign(__assign({}, defaultContextValues.modifiers), initialProps.modifiers), modifiersClassNames: __assign(__assign({}, defaultContextValues.modifiersClassNames), initialProps.modifiersClassNames), onSelect: onSelect, styles: __assign(__assign({}, defaultContextValues.styles), initialProps.styles), toDate: toDate });
     return (React__default.createElement(DayPickerContext.Provider, { value: value }, props.children));
 }
-
 /**
  * Hook to access the {@link DayPickerContextValue}.
  *
@@ -651,7 +605,6 @@ function NavigationProvider(props) {
     };
     return (React__default.createElement(NavigationContext.Provider, { value: value }, props.children));
 }
-
 /**
  * Hook to access the {@link NavigationContextValue}. Use this hook to navigate
  * between months or years in DayPicker.
@@ -812,9 +765,13 @@ function Footer() {
  * the weekday names (Monday, Tuesday, etc.).
  */
 function getWeekdays(locale, 
-/** The index of the first day of the week (0 - Sunday) */
-weekStartsOn) {
-    var start = startOfWeek(new Date(), { locale: locale, weekStartsOn: weekStartsOn });
+/** The index of the first day of the week (0 - Sunday). */
+weekStartsOn, 
+/** Use ISOWeek instead of locale/ */
+ISOWeek) {
+    var start = ISOWeek
+        ? startOfISOWeek(new Date())
+        : startOfWeek(new Date(), { locale: locale, weekStartsOn: weekStartsOn });
     var days = [];
     for (var i = 0; i < 7; i++) {
         var day = addDays(start, i);
@@ -827,8 +784,8 @@ weekStartsOn) {
  * Render the HeadRow component - i.e. the table head row with the weekday names.
  */
 function HeadRow() {
-    var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles, showWeekNumber = _a.showWeekNumber, locale = _a.locale, weekStartsOn = _a.weekStartsOn, formatWeekdayName = _a.formatters.formatWeekdayName, labelWeekday = _a.labels.labelWeekday;
-    var weekdays = getWeekdays(locale, weekStartsOn);
+    var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles, showWeekNumber = _a.showWeekNumber, locale = _a.locale, weekStartsOn = _a.weekStartsOn, ISOWeek = _a.ISOWeek, formatWeekdayName = _a.formatters.formatWeekdayName, labelWeekday = _a.labels.labelWeekday;
+    var weekdays = getWeekdays(locale, weekStartsOn, ISOWeek);
     return (React__default.createElement("tr", { style: styles.head_row, className: classNames.head_row },
         showWeekNumber && (React__default.createElement("th", { scope: "col", style: styles.head_cell, className: classNames.head_cell })),
         weekdays.map(function (weekday, i) { return (React__default.createElement("th", { key: i, scope: "col", className: classNames.head_cell, style: styles.head_cell },
@@ -916,7 +873,6 @@ function SelectMultipleProviderInternal(_a) {
     };
     return (React__default.createElement(SelectMultipleContext.Provider, { value: contextValue }, children));
 }
-
 /**
  * Hook to access the {@link SelectMultipleContextValue}.
  *
@@ -997,18 +953,8 @@ function SelectRangeProviderInternal(_a) {
     var onDayClick = function (day, activeModifiers, e) {
         var _a, _b;
         (_a = initialProps.onDayClick) === null || _a === void 0 ? void 0 : _a.call(initialProps, day, activeModifiers, e);
-        var range = addToRange(day, selected);
-        if ((min || max) &&
-            selected &&
-            (range === null || range === void 0 ? void 0 : range.to) &&
-            range.from &&
-            range.from !== range.to) {
-            var diff = Math.abs(differenceInCalendarDays(range === null || range === void 0 ? void 0 : range.to, range === null || range === void 0 ? void 0 : range.from));
-            if ((min && diff < min) || (max && diff >= max)) {
-                return;
-            }
-        }
-        (_b = initialProps.onSelect) === null || _b === void 0 ? void 0 : _b.call(initialProps, range, day, activeModifiers, e);
+        var newRange = addToRange(day, selected);
+        (_b = initialProps.onSelect) === null || _b === void 0 ? void 0 : _b.call(initialProps, newRange, day, activeModifiers, e);
     };
     var modifiers = {
         range_start: [],
@@ -1031,25 +977,42 @@ function SelectRangeProviderInternal(_a) {
             ];
         }
     }
-    if (min && selectedFrom && selectedTo) {
-        modifiers.disabled.push(function (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(function (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) {
+            var selectedCount = differenceInCalendarDays(selectedTo, selectedFrom) + 1;
+            var offset = max - selectedCount;
+            modifiers.disabled.push({
+                before: subDays(selectedFrom, offset)
+            });
+            modifiers.disabled.push({
+                after: addDays(selectedTo, offset)
+            });
+        }
     }
     return (React__default.createElement(SelectRangeContext.Provider, { value: { selected: selected, onDayClick: onDayClick, modifiers: modifiers } }, children));
 }
-
 /**
  * Hook to access the {@link SelectRangeContextValue}.
  *
@@ -1150,7 +1113,6 @@ function ModifiersProvider(props) {
     var modifiers = __assign(__assign({}, internalModifiers), customModifiers);
     return (React__default.createElement(ModifiersContext.Provider, { value: modifiers }, props.children));
 }
-
 /**
  * Return the modifiers used by DayPicker.
  *
@@ -1254,9 +1216,17 @@ function isMatch(day, matchers) {
             return matcher.dayOfWeek.includes(day.getDay());
         }
         if (isDateInterval(matcher)) {
-            var isBefore = differenceInCalendarDays(matcher.before, day) > 0;
-            var isAfter = differenceInCalendarDays(day, matcher.after) > 0;
-            return isBefore && isAfter;
+            var diffBefore = differenceInCalendarDays(matcher.before, day);
+            var diffAfter = differenceInCalendarDays(matcher.after, day);
+            var isDayBefore = diffBefore > 0;
+            var isDayAfter = diffAfter < 0;
+            var isClosedInterval = isAfter$1(matcher.before, matcher.after);
+            if (isClosedInterval) {
+                return isDayAfter && isDayBefore;
+            }
+            else {
+                return isDayBefore || isDayAfter;
+            }
         }
         if (isDateAfterType(matcher)) {
             return differenceInCalendarDays(day, matcher.after) > 0;
@@ -1326,18 +1296,26 @@ function getInitialFocusTarget(displayMonths, modifiers) {
     }
 }
 
+var MAX_RETRY = 365;
 /** Return the next date to be focused. */
-function getNextFocus(
-/** The day that is focused. */
-focusedDay, moveBy, direction, options, modifiers) {
-    var weekStartsOn = options.weekStartsOn, fromDate = options.fromDate, toDate = options.toDate, locale = options.locale;
+function getNextFocus(focusedDay, options) {
+    var moveBy = options.moveBy, direction = options.direction, context = options.context, modifiers = options.modifiers, _a = options.retry, retry = _a === void 0 ? { count: 0, lastFocused: focusedDay } : _a;
+    var weekStartsOn = context.weekStartsOn, fromDate = context.fromDate, toDate = context.toDate, locale = context.locale;
     var moveFns = {
         day: addDays,
         week: addWeeks,
         month: addMonths,
         year: addYears,
-        startOfWeek: function (date) { return startOfWeek(date, { locale: locale, weekStartsOn: weekStartsOn }); },
-        endOfWeek: function (date) { return endOfWeek(date, { locale: locale, weekStartsOn: weekStartsOn }); }
+        startOfWeek: function (date) {
+            return context.ISOWeek
+                ? startOfISOWeek(date)
+                : startOfWeek(date, { locale: locale, weekStartsOn: weekStartsOn });
+        },
+        endOfWeek: function (date) {
+            return context.ISOWeek
+                ? endOfISOWeek(date)
+                : endOfWeek(date, { locale: locale, weekStartsOn: weekStartsOn });
+        }
     };
     var newFocusedDay = moveFns[moveBy](focusedDay, direction === 'after' ? 1 : -1);
     if (direction === 'before' && fromDate) {
@@ -1346,14 +1324,26 @@ focusedDay, moveBy, direction, options, modifiers) {
     else if (direction === 'after' && toDate) {
         newFocusedDay = min([toDate, newFocusedDay]);
     }
+    var isFocusable = true;
     if (modifiers) {
         var activeModifiers = getActiveModifiers(newFocusedDay, modifiers);
-        var isFocusable = !activeModifiers.disabled && !activeModifiers.hidden;
-        if (!isFocusable) {
-            return getNextFocus(newFocusedDay, moveBy, direction, options, modifiers);
+        isFocusable = !activeModifiers.disabled && !activeModifiers.hidden;
+    }
+    if (isFocusable) {
+        return newFocusedDay;
+    }
+    else {
+        if (retry.count > MAX_RETRY) {
+            return retry.lastFocused;
         }
+        return getNextFocus(newFocusedDay, {
+            moveBy: moveBy,
+            direction: direction,
+            context: context,
+            modifiers: modifiers,
+            retry: __assign(__assign({}, retry), { count: retry.count + 1 })
+        });
     }
-    return newFocusedDay;
 }
 
 /**
@@ -1380,11 +1370,16 @@ function FocusProvider(props) {
     var focus = function (date) {
         setFocusedDay(date);
     };
-    var dayPicker = useDayPicker();
+    var context = useDayPicker();
     var moveFocus = function (moveBy, direction) {
         if (!focusedDay)
             return;
-        var nextFocused = getNextFocus(focusedDay, moveBy, direction, dayPicker, modifiers);
+        var nextFocused = getNextFocus(focusedDay, {
+            moveBy: moveBy,
+            direction: direction,
+            context: context,
+            modifiers: modifiers
+        });
         if (isSameDay(focusedDay, nextFocused))
             return undefined;
         navigation.goToDate(nextFocused, focusedDay);
@@ -1408,7 +1403,6 @@ function FocusProvider(props) {
     };
     return (React__default.createElement(FocusContext.Provider, { value: value }, props.children));
 }
-
 /**
  * Hook to access the {@link FocusContextValue}. Use this hook to handle the
  * focus state of the elements.
@@ -1476,7 +1470,6 @@ function SelectSingleProviderInternal(_a) {
     };
     return (React__default.createElement(SelectSingleContext.Provider, { value: contextValue }, children));
 }
-
 /**
  * Hook to access the {@link SelectSingleContextValue}.
  *
@@ -1811,15 +1804,21 @@ function Row(props) {
 
 /** Return the weeks between two dates.  */
 function daysToMonthWeeks(fromDate, toDate, options) {
-    var toWeek = endOfWeek(toDate, options);
-    var fromWeek = startOfWeek(fromDate, options);
+    var toWeek = (options === null || options === void 0 ? void 0 : options.ISOWeek)
+        ? endOfISOWeek(toDate)
+        : endOfWeek(toDate, options);
+    var fromWeek = (options === null || options === void 0 ? void 0 : options.ISOWeek)
+        ? startOfISOWeek(fromDate)
+        : startOfWeek(fromDate, options);
     var nOfDays = differenceInCalendarDays(toWeek, fromWeek);
     var days = [];
     for (var i = 0; i <= nOfDays; i++) {
         days.push(addDays(fromWeek, i));
     }
     var weeksInMonth = days.reduce(function (result, date) {
-        var weekNumber = getWeek(date, options);
+        var weekNumber = (options === null || options === void 0 ? void 0 : options.ISOWeek)
+            ? getISOWeek(date)
+            : getWeek(date, options);
         var existingWeek = result.find(function (value) { return value.weekNumber === weekNumber; });
         if (existingWeek) {
             existingWeek.dates.push(date);
@@ -1838,12 +1837,10 @@ function daysToMonthWeeks(fromDate, toDate, options) {
  * Return the weeks belonging to the given month, adding the "outside days" to
  * the first and last week.
  */
-function getMonthWeeks(
-/** The month to get the weeks from */
-month, options) {
+function getMonthWeeks(month, options) {
     var weeksInMonth = daysToMonthWeeks(startOfMonth(month), endOfMonth(month), options);
-    // Add extra weeks to the month, up to 6 weeks
     if (options === null || options === void 0 ? void 0 : options.useFixedWeeks) {
+        // Add extra weeks to the month, up to 6 weeks
         var nrOfMonthWeeks = getWeeksInMonth(month, options);
         if (nrOfMonthWeeks < 6) {
             var lastWeek = weeksInMonth[weeksInMonth.length - 1];
@@ -1859,11 +1856,13 @@ month, options) {
 /** Render the table with the calendar. */
 function Table(props) {
     var _a, _b, _c;
-    var _d = useDayPicker(), locale = _d.locale, classNames = _d.classNames, styles = _d.styles, hideHead = _d.hideHead, fixedWeeks = _d.fixedWeeks, components = _d.components, weekStartsOn = _d.weekStartsOn;
+    var _d = useDayPicker(), locale = _d.locale, classNames = _d.classNames, styles = _d.styles, hideHead = _d.hideHead, fixedWeeks = _d.fixedWeeks, components = _d.components, weekStartsOn = _d.weekStartsOn, firstWeekContainsDate = _d.firstWeekContainsDate, ISOWeek = _d.ISOWeek;
     var weeks = getMonthWeeks(props.displayMonth, {
         useFixedWeeks: Boolean(fixedWeeks),
+        ISOWeek: ISOWeek,
         locale: locale,
-        weekStartsOn: weekStartsOn
+        weekStartsOn: weekStartsOn,
+        firstWeekContainsDate: firstWeekContainsDate
     });
     var HeadComponent = (_a = components === null || components === void 0 ? void 0 : components.Head) !== null && _a !== void 0 ? _a : Head;
     var RowComponent = (_b = components === null || components === void 0 ? void 0 : components.Row) !== null && _b !== void 0 ? _b : Row;
@@ -1958,7 +1957,7 @@ function Month(props) {
     var dayPicker = useDayPicker();
     var dir = dayPicker.dir, classNames = dayPicker.classNames, styles = dayPicker.styles, components = dayPicker.components;
     var displayMonths = useNavigation().displayMonths;
-    var captionId = useId();
+    var captionId = useId(dayPicker.id ? "".concat(dayPicker.id, "-").concat(props.displayIndex) : undefined);
     var className = [classNames.month];
     var style = styles.month;
     var isStart = props.displayIndex === 0;