react-day-picker 8.2.1 → 8.3.1

package/dist/index.js

@@ -17,18 +17,23 @@ var isBefore = require('date-fns/isBefore');
 var isSameMonth = require('date-fns/isSameMonth');
 var differenceInCalendarMonths = require('date-fns/differenceInCalendarMonths');
 var addDays = require('date-fns/addDays');
+var startOfISOWeek = require('date-fns/startOfISOWeek');
 var startOfWeek = require('date-fns/startOfWeek');
 var getUnixTime = require('date-fns/getUnixTime');
 var isSameDay = require('date-fns/isSameDay');
 var differenceInCalendarDays = require('date-fns/differenceInCalendarDays');
+var subDays = require('date-fns/subDays');
 var isAfter = require('date-fns/isAfter');
+var dateFns = require('date-fns');
 var isDate = require('date-fns/isDate');
 var addWeeks = require('date-fns/addWeeks');
 var addYears = require('date-fns/addYears');
+var endOfISOWeek = require('date-fns/endOfISOWeek');
 var endOfWeek = require('date-fns/endOfWeek');
 var max = require('date-fns/max');
 var min = require('date-fns/min');
 var getWeeksInMonth = require('date-fns/getWeeksInMonth');
+var getISOWeek = require('date-fns/getISOWeek');
 var getWeek = require('date-fns/getWeek');
 var parse = require('date-fns/parse');
 
@@ -68,18 +73,22 @@ var isBefore__default = /*#__PURE__*/_interopDefaultLegacy(isBefore);
 var isSameMonth__default = /*#__PURE__*/_interopDefaultLegacy(isSameMonth);
 var differenceInCalendarMonths__default = /*#__PURE__*/_interopDefaultLegacy(differenceInCalendarMonths);
 var addDays__default = /*#__PURE__*/_interopDefaultLegacy(addDays);
+var startOfISOWeek__default = /*#__PURE__*/_interopDefaultLegacy(startOfISOWeek);
 var startOfWeek__default = /*#__PURE__*/_interopDefaultLegacy(startOfWeek);
 var getUnixTime__default = /*#__PURE__*/_interopDefaultLegacy(getUnixTime);
 var isSameDay__default = /*#__PURE__*/_interopDefaultLegacy(isSameDay);
 var differenceInCalendarDays__default = /*#__PURE__*/_interopDefaultLegacy(differenceInCalendarDays);
+var subDays__default = /*#__PURE__*/_interopDefaultLegacy(subDays);
 var isAfter__default = /*#__PURE__*/_interopDefaultLegacy(isAfter);
 var isDate__default = /*#__PURE__*/_interopDefaultLegacy(isDate);
 var addWeeks__default = /*#__PURE__*/_interopDefaultLegacy(addWeeks);
 var addYears__default = /*#__PURE__*/_interopDefaultLegacy(addYears);
+var endOfISOWeek__default = /*#__PURE__*/_interopDefaultLegacy(endOfISOWeek);
 var endOfWeek__default = /*#__PURE__*/_interopDefaultLegacy(endOfWeek);
 var max__default = /*#__PURE__*/_interopDefaultLegacy(max);
 var min__default = /*#__PURE__*/_interopDefaultLegacy(min);
 var getWeeksInMonth__default = /*#__PURE__*/_interopDefaultLegacy(getWeeksInMonth);
+var getISOWeek__default = /*#__PURE__*/_interopDefaultLegacy(getISOWeek);
 var getWeek__default = /*#__PURE__*/_interopDefaultLegacy(getWeek);
 var parse__default = /*#__PURE__*/_interopDefaultLegacy(parse);
 
@@ -309,7 +318,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__default["default"];
@@ -368,12 +377,13 @@ var DayPickerContext = React.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;
@@ -382,61 +392,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["default"].createElement(DayPickerContext.Provider, { value: value }, props.children));
 }
-
 /**
  * Hook to access the {@link DayPickerContextValue}.
  *
@@ -705,7 +663,6 @@ function NavigationProvider(props) {
     };
     return (React__default["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.
@@ -866,9 +823,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__default["default"](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__default["default"](new Date())
+        : startOfWeek__default["default"](new Date(), { locale: locale, weekStartsOn: weekStartsOn });
     var days = [];
     for (var i = 0; i < 7; i++) {
         var day = addDays__default["default"](start, i);
@@ -881,8 +842,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["default"].createElement("tr", { style: styles.head_row, className: classNames.head_row },
         showWeekNumber && (React__default["default"].createElement("th", { scope: "col", style: styles.head_cell, className: classNames.head_cell })),
         weekdays.map(function (weekday, i) { return (React__default["default"].createElement("th", { key: i, scope: "col", className: classNames.head_cell, style: styles.head_cell },
@@ -970,7 +931,6 @@ function SelectMultipleProviderInternal(_a) {
     };
     return (React__default["default"].createElement(SelectMultipleContext.Provider, { value: contextValue }, children));
 }
-
 /**
  * Hook to access the {@link SelectMultipleContextValue}.
  *
@@ -1051,18 +1011,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__default["default"](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: [],
@@ -1085,25 +1035,42 @@ function SelectRangeProviderInternal(_a) {
             ];
         }
     }
-    if (min && selectedFrom && selectedTo) {
-        modifiers.disabled.push(function (date) {
-            return ((isBefore__default["default"](date, selectedFrom) &&
-                differenceInCalendarDays__default["default"](selectedFrom, date) < min) ||
-                (isAfter__default["default"](date, selectedTo) &&
-                    differenceInCalendarDays__default["default"](date, selectedFrom) < min));
-        });
+    if (min) {
+        if (selectedFrom && !selectedTo) {
+            modifiers.disabled.push({
+                after: subDays__default["default"](selectedFrom, min - 1),
+                before: addDays__default["default"](selectedFrom, min - 1)
+            });
+        }
+        if (selectedFrom && selectedTo) {
+            modifiers.disabled.push({
+                after: selectedFrom,
+                before: addDays__default["default"](selectedFrom, min - 1)
+            });
+        }
     }
-    if (max && selectedFrom && selectedTo) {
-        modifiers.disabled.push(function (date) {
-            return ((isBefore__default["default"](date, selectedFrom) &&
-                differenceInCalendarDays__default["default"](selectedTo, date) >= max) ||
-                (isAfter__default["default"](date, selectedTo) &&
-                    differenceInCalendarDays__default["default"](date, selectedFrom) >= max));
-        });
+    if (max) {
+        if (selectedFrom && !selectedTo) {
+            modifiers.disabled.push({
+                before: addDays__default["default"](selectedFrom, -max + 1)
+            });
+            modifiers.disabled.push({
+                after: addDays__default["default"](selectedFrom, max - 1)
+            });
+        }
+        if (selectedFrom && selectedTo) {
+            var selectedCount = differenceInCalendarDays__default["default"](selectedTo, selectedFrom) + 1;
+            var offset = max - selectedCount;
+            modifiers.disabled.push({
+                before: subDays__default["default"](selectedFrom, offset)
+            });
+            modifiers.disabled.push({
+                after: addDays__default["default"](selectedTo, offset)
+            });
+        }
     }
     return (React__default["default"].createElement(SelectRangeContext.Provider, { value: { selected: selected, onDayClick: onDayClick, modifiers: modifiers } }, children));
 }
-
 /**
  * Hook to access the {@link SelectRangeContextValue}.
  *
@@ -1204,7 +1171,6 @@ function ModifiersProvider(props) {
     var modifiers = __assign(__assign({}, internalModifiers), customModifiers);
     return (React__default["default"].createElement(ModifiersContext.Provider, { value: modifiers }, props.children));
 }
-
 /**
  * Return the modifiers used by DayPicker.
  *
@@ -1308,9 +1274,17 @@ function isMatch(day, matchers) {
             return matcher.dayOfWeek.includes(day.getDay());
         }
         if (isDateInterval(matcher)) {
-            var isBefore = differenceInCalendarDays__default["default"](matcher.before, day) > 0;
-            var isAfter = differenceInCalendarDays__default["default"](day, matcher.after) > 0;
-            return isBefore && isAfter;
+            var diffBefore = differenceInCalendarDays__default["default"](matcher.before, day);
+            var diffAfter = differenceInCalendarDays__default["default"](matcher.after, day);
+            var isDayBefore = diffBefore > 0;
+            var isDayAfter = diffAfter < 0;
+            var isClosedInterval = dateFns.isAfter(matcher.before, matcher.after);
+            if (isClosedInterval) {
+                return isDayAfter && isDayBefore;
+            }
+            else {
+                return isDayBefore || isDayAfter;
+            }
         }
         if (isDateAfterType(matcher)) {
             return differenceInCalendarDays__default["default"](day, matcher.after) > 0;
@@ -1380,18 +1354,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__default["default"],
         week: addWeeks__default["default"],
         month: addMonths__default["default"],
         year: addYears__default["default"],
-        startOfWeek: function (date) { return startOfWeek__default["default"](date, { locale: locale, weekStartsOn: weekStartsOn }); },
-        endOfWeek: function (date) { return endOfWeek__default["default"](date, { locale: locale, weekStartsOn: weekStartsOn }); }
+        startOfWeek: function (date) {
+            return context.ISOWeek
+                ? startOfISOWeek__default["default"](date)
+                : startOfWeek__default["default"](date, { locale: locale, weekStartsOn: weekStartsOn });
+        },
+        endOfWeek: function (date) {
+            return context.ISOWeek
+                ? endOfISOWeek__default["default"](date)
+                : endOfWeek__default["default"](date, { locale: locale, weekStartsOn: weekStartsOn });
+        }
     };
     var newFocusedDay = moveFns[moveBy](focusedDay, direction === 'after' ? 1 : -1);
     if (direction === 'before' && fromDate) {
@@ -1400,14 +1382,26 @@ focusedDay, moveBy, direction, options, modifiers) {
     else if (direction === 'after' && toDate) {
         newFocusedDay = min__default["default"]([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;
 }
 
 /**
@@ -1434,11 +1428,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__default["default"](focusedDay, nextFocused))
             return undefined;
         navigation.goToDate(nextFocused, focusedDay);
@@ -1462,7 +1461,6 @@ function FocusProvider(props) {
     };
     return (React__default["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.
@@ -1530,7 +1528,6 @@ function SelectSingleProviderInternal(_a) {
     };
     return (React__default["default"].createElement(SelectSingleContext.Provider, { value: contextValue }, children));
 }
-
 /**
  * Hook to access the {@link SelectSingleContextValue}.
  *
@@ -1865,15 +1862,21 @@ function Row(props) {
 
 /** Return the weeks between two dates.  */
 function daysToMonthWeeks(fromDate, toDate, options) {
-    var toWeek = endOfWeek__default["default"](toDate, options);
-    var fromWeek = startOfWeek__default["default"](fromDate, options);
+    var toWeek = (options === null || options === void 0 ? void 0 : options.ISOWeek)
+        ? endOfISOWeek__default["default"](toDate)
+        : endOfWeek__default["default"](toDate, options);
+    var fromWeek = (options === null || options === void 0 ? void 0 : options.ISOWeek)
+        ? startOfISOWeek__default["default"](fromDate)
+        : startOfWeek__default["default"](fromDate, options);
     var nOfDays = differenceInCalendarDays__default["default"](toWeek, fromWeek);
     var days = [];
     for (var i = 0; i <= nOfDays; i++) {
         days.push(addDays__default["default"](fromWeek, i));
     }
     var weeksInMonth = days.reduce(function (result, date) {
-        var weekNumber = getWeek__default["default"](date, options);
+        var weekNumber = (options === null || options === void 0 ? void 0 : options.ISOWeek)
+            ? getISOWeek__default["default"](date)
+            : getWeek__default["default"](date, options);
         var existingWeek = result.find(function (value) { return value.weekNumber === weekNumber; });
         if (existingWeek) {
             existingWeek.dates.push(date);
@@ -1892,12 +1895,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__default["default"](month), endOfMonth__default["default"](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__default["default"](month, options);
         if (nrOfMonthWeeks < 6) {
             var lastWeek = weeksInMonth[weeksInMonth.length - 1];
@@ -1913,11 +1914,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;
@@ -2012,7 +2015,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;