@uxf/datepicker 11.99.0 → 11.100.1

package/hooks/use-date-range-picker.js

@@ -16,7 +16,7 @@ const is_start_date_1 = require("../utils/is-start-date");
 const use_date_picker_navigation_1 = require("./use-date-picker-navigation");
 exports.START_DATE = "startDate";
 exports.END_DATE = "endDate";
-function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [], endDate, exactMinBookingDays = false, firstDayOfWeek = 0, focusedInput, initialVisibleMonth, isDateBlocked: isDateBlockedProps = () => false, maxBookingDate, minBookingDate, minBookingDays = 1, numberOfMonths = 2, onDatesChange, startDate, unavailableDates = [], }) {
+function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [], endDate, exactMinBookingDays = false, firstDayOfWeek = 0, focusedInput, initialVisibleMonth, isDateBlocked: isDateBlockedProps, maxBookingDate, minBookingDate, minBookingDays = 1, numberOfMonths = 2, onDatesChange, startDate, unavailableDates = [], }) {
     const disabledDatesFromConfig = datesConfig.filter((config) => config.isDisabled).flatMap((config) => config.dates);
     const disabledDates = [...unavailableDates, ...disabledDatesFromConfig];
     const [activeMonths, setActiveMonths] = (0, react_1.useState)(() => startDate
@@ -24,9 +24,12 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [
         : (0, get_initial_months_1.getInitialMonths)(numberOfMonths, initialVisibleMonth || null));
     const [hoveredDate, setHoveredDate] = (0, react_1.useState)(null);
     const [focusedDate, setFocusedDate] = (0, react_1.useState)(startDate);
-    const disabledDatesByUser = (date) => {
-        return (0, is_in_unavailable_dates_1.isInUnavailableDates)(disabledDates, date) || isDateBlockedProps(date);
-    };
+    const disabledDatesByUser = isDateBlockedProps || disabledDates.length > 0
+        ? (date) => {
+            var _a;
+            return (0, is_in_unavailable_dates_1.isInUnavailableDates)(disabledDates, date) || ((_a = isDateBlockedProps === null || isDateBlockedProps === void 0 ? void 0 : isDateBlockedProps(date)) !== null && _a !== void 0 ? _a : false);
+        }
+        : null;
     const onDateFocus = (0, react_1.useCallback)((date) => {
         setFocusedDate(date);
         if (!focusedDate || !activeMonths.map((m) => m.month).includes((0, dayjs_utils_1.dayjsEnRaw)(date).month())) {

package/hooks/use-day.js

@@ -12,7 +12,6 @@ function useDay({ date, datesConfig, dayRef, focusedDate, isDateBlocked, isDateF
     const disabledDates = [...unavailableDates, ...disabledDatesFromConfig].filter((day, index, self) => index === self.findIndex((d) => d.getTime() === day.getTime()));
     const onClick = (0, react_1.useCallback)(() => onDateSelect(date), [date, onDateSelect]);
     const onMouseEnter = (0, react_1.useCallback)(() => onDateHover(date), [date, onDateHover]);
-    const disabled = isDateBlocked(date) && !isDateHovered(date);
     const isToday = (0, dayjs_utils_1.dayjsEnWithTz)().isSame(date, "day");
     (0, react_1.useEffect)(() => {
         if (dayRef && dayRef.current && isDateFocused(date)) {
@@ -60,17 +59,19 @@ function useDay({ date, datesConfig, dayRef, focusedDate, isDateBlocked, isDateF
         });
         return acc;
     }, []);
+    const isHovered = isDateHovered(date);
+    const isDisabled = isDateBlocked(date) && !isHovered;
     return {
         flags: flags !== null && flags !== void 0 ? flags : empty_array_1.EMPTY_ARRAY,
-        disabledDate: disabled,
+        disabledDate: isDisabled,
         isFirstDisabled: _isFirstUnavailableDate(),
-        isHovered: isDateHovered(date),
+        isHovered: isHovered,
         isInsideRange: isDateInsideRange ? isDateInsideRange(date) : false,
         isLastDisabled: _isLastUnavailableDate(),
         isSelected: isDateSelected(date),
         isToday,
-        isWithinHoverRange: isDateHovered(date),
-        onClick: !disabled ? onClick : undefined,
+        isWithinHoverRange: isHovered,
+        onClick: !isDisabled ? onClick : undefined,
         onKeyDown,
         onMouseEnter,
         tabIndex: focusedDate === null || isDateFocused(date) ? 0 : -1,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/datepicker",
-    "version": "11.99.0",
+    "version": "11.100.1",
     "description": "A set of React hooks to create an awesome datepicker.",
     "main": "index.js",
     "scripts": {

package/utils/can-select-range.d.ts

@@ -1,7 +1,7 @@
 export interface CanSelectRangeProps {
     startDate: Date;
     endDate: Date | null;
-    isDateBlocked(date: Date): boolean;
+    isDateBlocked: ((date: Date) => boolean) | null;
     minBookingDays: number;
     exactMinBookingDays?: boolean;
     minBookingDate?: Date;

package/utils/can-select-range.js

@@ -21,15 +21,18 @@ function canSelectRange({ startDate, endDate, isDateBlocked, minBookingDays, exa
     if (!isStartDateAfterOrEqualMinDate || !isStartDateBeforeOrEqualMaxDate || !isEndDatBeforeOrEqualMaxDate) {
         return false;
     }
-    if (minBookingDays === 1 && !endDate && !isDateBlocked(startDate)) {
+    if (minBookingDays === 1 && !endDate && !(isDateBlocked === null || isDateBlocked === void 0 ? void 0 : isDateBlocked(startDate))) {
         return true;
     }
     else if ((minBookingDays > 1 && !endDate && !exactMinBookingDays) ||
         (minBookingDays > 0 && exactMinBookingDays) ||
         (minBookingDays > 0 && exactMinBookingDays && !minBookingDate && !maxBookingDate)) {
+        if (!isDateBlocked) {
+            return true;
+        }
         return !(0, get_each_1.getEach)(startDate, (0, dayjs_utils_1.dayjsEnRaw)(startDate)
             .add(minBookingDays - 1, "day")
-            .toDate(), "day").some((d) => isDateBlocked(d));
+            .toDate(), "day").some(isDateBlocked);
     }
     else if (endDate && !exactMinBookingDays) {
         const minBookingDaysDate = (0, dayjs_utils_1.dayjsEnRaw)(startDate)
@@ -38,7 +41,10 @@ function canSelectRange({ startDate, endDate, isDateBlocked, minBookingDays, exa
         if ((0, dayjs_utils_1.dayjsEnRaw)(endDate).isBefore(minBookingDaysDate)) {
             return false;
         }
-        return !(0, get_each_1.getEach)(startDate, endDate, "day").some((d) => isDateBlocked(d));
+        if (!isDateBlocked) {
+            return true;
+        }
+        return !(0, get_each_1.getEach)(startDate, endDate, "day").some(isDateBlocked);
     }
     return false;
 }

package/utils/get-initial-months.js

@@ -10,7 +10,7 @@ function getInitialMonths(numberOfMonths, startDate) {
     let months = [firstMonth];
     if (numberOfMonths > 1) {
         months = Array.from(Array(numberOfMonths - 1).keys()).reduce((m) => {
-            prevMonthDate = (0, dayjs_utils_1.dayjsEnRaw)(m[m.length - 1].date)
+            prevMonthDate = (0, dayjs_utils_1.dayjsEnWithTz)(m[m.length - 1].date)
                 .add(1, "month")
                 .toDate();
             return m.concat([(0, get_date_month_and_year_1.getDateMonthAndYear)(prevMonthDate)]);

package/utils/get-initial-months.test.js

@@ -24,6 +24,21 @@ test("getInitialMonths 2 months", () => {
         },
     ]);
 });
+// ensures that it works correctly on DST change
+test("getInitialMonths March", () => {
+    expect((0, get_initial_months_1.getInitialMonths)(2, new Date("2021-03-15"))).toStrictEqual([
+        {
+            date: new Date("2021-03-01T00:00:00Z"),
+            month: 2,
+            year: 2021,
+        },
+        {
+            date: new Date("2021-04-01T00:00:00Z"),
+            month: 3,
+            year: 2021,
+        },
+    ]);
+});
 test("getInitialMonths without date", () => {
     jest.useFakeTimers();
     jest.setSystemTime(new Date("2021-09-15"));

package/utils/is-date-blocked.d.ts

@@ -5,7 +5,7 @@ interface IsDateBlockedProps {
     minBookingDays?: number;
     minBookingDate?: Date;
     maxBookingDate?: Date;
-    isDateBlockedFn?: (date: Date) => boolean;
+    isDateBlockedFn?: ((date: Date) => boolean) | null;
     unavailableDates?: Date[];
 }
 export declare function isDateBlocked({ date, minBookingDate, maxBookingDate, isDateBlockedFn, startDate, endDate, minBookingDays, unavailableDates, }: IsDateBlockedProps): boolean;

package/utils/is-date-hovered.d.ts

@@ -2,7 +2,7 @@ export interface IsDateHoveredProps {
     startDate: Date | null;
     endDate: Date | null;
     date: Date;
-    isDateBlocked(date: Date): boolean;
+    isDateBlocked: ((date: Date) => boolean) | null;
     hoveredDate: Date | null;
     minBookingDays: number;
     exactMinBookingDays: boolean;

package/utils/is-date-hovered.js

@@ -10,6 +10,9 @@ function isDateHovered({ date, startDate, endDate, isDateBlocked, hoveredDate, m
         minBookingDays > 1 &&
         exactMinBookingDays &&
         (0, dayjs_utils_1.dayjsEnRaw)(date).isBetween(hoveredDate, (0, dayjs_utils_1.dayjsEnRaw)(hoveredDate).add(minBookingDays - 1, "day"))) {
+        if (!isDateBlocked) {
+            return true;
+        }
         return !(0, get_each_1.getEach)(hoveredDate, (0, dayjs_utils_1.dayjsEnRaw)(hoveredDate)
             .add(minBookingDays - 1, "day")
             .toDate(), "day").some((d) => isDateBlocked(d));
@@ -22,6 +25,9 @@ function isDateHovered({ date, startDate, endDate, isDateBlocked, hoveredDate, m
         (0, dayjs_utils_1.dayjsEnRaw)(date).isBetween(startDate, (0, dayjs_utils_1.dayjsEnRaw)(startDate).add(minBookingDays - 1, "day")) &&
         (0, dayjs_utils_1.dayjsEnRaw)(startDate).isSame(hoveredDate, "days") &&
         minBookingDays > 1) {
+        if (!isDateBlocked) {
+            return true;
+        }
         return !(0, get_each_1.getEach)(startDate, (0, dayjs_utils_1.dayjsEnRaw)(startDate)
             .add(minBookingDays - 1, "day")
             .toDate(), "day").some((d) => isDateBlocked(d));
@@ -33,6 +39,9 @@ function isDateHovered({ date, startDate, endDate, isDateBlocked, hoveredDate, m
         hoveredDate &&
         !(0, dayjs_utils_1.dayjsEnRaw)(hoveredDate).isBefore(startDate) &&
         (0, dayjs_utils_1.dayjsEnRaw)(date).isBetween(startDate, hoveredDate)) {
+        if (!isDateBlocked) {
+            return true;
+        }
         return !(0, get_each_1.getEach)(startDate, hoveredDate, "day").some((d) => isDateBlocked(d));
     }
     return false;