@uxf/datepicker 11.80.4 → 11.87.0

package/contexts/date-range-picker-context.js

@@ -32,6 +32,7 @@ exports.DateRangePickerContext = (0, react_1.createContext)({
     onDateFocus: () => undefined,
     onDateHover: () => undefined,
     onDateSelect: () => undefined,
+    onDatesSelect: () => undefined,
     onResetDates: () => undefined,
     unavailableDates: [],
 });

package/hooks/use-date-range-picker.d.ts

@@ -44,6 +44,7 @@ export interface UseDateRangePickerReturnType extends UseDatePickerNavigationRet
     onDateFocus: (date: Date) => void;
     onDateHover: (date: Date | null) => void;
     onDateSelect: (date: Date) => void;
+    onDatesSelect: (startDate: Date, endDate: Date | null) => void;
     onResetDates: () => void;
     preventScroll?: boolean;
     unavailableDates: Date[];

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

@@ -153,6 +153,28 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [
             setActiveMonths((0, get_initial_months_1.getInitialMonths)(numberOfMonths, date));
         }
     }
+    function onDatesSelect(start, end) {
+        if ((0, can_select_range_1.canSelectRange)({
+            minBookingDays,
+            exactMinBookingDays,
+            minBookingDate,
+            maxBookingDate,
+            isDateBlocked: disabledDatesByUser,
+            startDate: start,
+            endDate: end,
+        })) {
+            onDatesChange({
+                endDate: end,
+                startDate: start,
+                focusedInput: exports.START_DATE,
+            });
+        }
+        if (focusedInput !== exports.END_DATE &&
+            (!focusedDate || !(0, dayjs_en_1.dayjsEn)(start).isSame(focusedDate, "month")) &&
+            changeActiveMonthOnSelect) {
+            setActiveMonths((0, get_initial_months_1.getInitialMonths)(numberOfMonths, start));
+        }
+    }
     // eslint-disable-next-line complexity
     function onDateHover(date) {
         if (!date) {
@@ -224,6 +246,7 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, datesConfig = [
         onDateFocus,
         onDateHover,
         onDateSelect,
+        onDatesSelect,
         onResetDates,
         unavailableDates: disabledDates,
     };

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

@@ -85,3 +85,173 @@ test("date select", () => {
     });
     expect(result.current.isDateSelected(BASE_DATE)).toBe(false);
 });
+test("date range select - valid range", () => {
+    const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)({ startDate: null, endDate: null, focusedInput: "startDate" }));
+    const { result, rerender } = (0, react_1.renderHook)(() => (0, use_date_range_picker_1.useDateRangePicker)({
+        startDate: state.current[0].startDate,
+        endDate: state.current[0].endDate,
+        onDatesChange: (data) => state.current[1](data),
+        focusedInput: state.current[0].focusedInput,
+        minBookingDate: new Date("2020-01-01"),
+    }));
+    const START_DATE = new Date("2021-09-15");
+    const END_DATE = new Date("2021-09-20");
+    (0, react_1.act)(() => {
+        result.current.onDatesSelect(START_DATE, END_DATE);
+        rerender();
+    });
+    expect(result.current.isStartDate(START_DATE)).toBe(true);
+    expect(result.current.isEndDate(END_DATE)).toBe(true);
+    expect(result.current.isDateInsideRange(new Date("2021-09-17"))).toBe(true);
+});
+test("date range select - with null end date", () => {
+    const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)({ startDate: null, endDate: null, focusedInput: "startDate" }));
+    const { result, rerender } = (0, react_1.renderHook)(() => (0, use_date_range_picker_1.useDateRangePicker)({
+        startDate: state.current[0].startDate,
+        endDate: state.current[0].endDate,
+        onDatesChange: (data) => state.current[1](data),
+        focusedInput: state.current[0].focusedInput,
+        minBookingDate: new Date("2020-01-01"),
+    }));
+    const START_DATE = new Date("2021-09-15");
+    (0, react_1.act)(() => {
+        result.current.onDatesSelect(START_DATE, null);
+        rerender();
+    });
+    expect(result.current.isStartDate(START_DATE)).toBe(true);
+    expect(state.current[0].endDate).toBe(null);
+});
+test("date range select - with minBookingDays", () => {
+    const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)({ startDate: null, endDate: null, focusedInput: "startDate" }));
+    const { result, rerender } = (0, react_1.renderHook)(() => (0, use_date_range_picker_1.useDateRangePicker)({
+        startDate: state.current[0].startDate,
+        endDate: state.current[0].endDate,
+        onDatesChange: (data) => state.current[1](data),
+        focusedInput: state.current[0].focusedInput,
+        minBookingDate: new Date("2020-01-01"),
+        minBookingDays: 3,
+    }));
+    const START_DATE = new Date("2021-09-15");
+    const END_DATE = new Date("2021-09-17");
+    (0, react_1.act)(() => {
+        result.current.onDatesSelect(START_DATE, END_DATE);
+        rerender();
+    });
+    expect(result.current.isStartDate(START_DATE)).toBe(true);
+    expect(result.current.isEndDate(END_DATE)).toBe(true);
+});
+test("date range select - invalid range with minBookingDays", () => {
+    const onDatesChange = jest.fn();
+    const { result } = (0, react_1.renderHook)(() => (0, use_date_range_picker_1.useDateRangePicker)({
+        startDate: null,
+        endDate: null,
+        onDatesChange,
+        focusedInput: "startDate",
+        minBookingDate: new Date("2020-01-01"),
+        minBookingDays: 5,
+    }));
+    const START_DATE = new Date("2021-09-15");
+    const END_DATE = new Date("2021-09-17"); // Only 3 days, but minBookingDays is 5
+    (0, react_1.act)(() => {
+        result.current.onDatesSelect(START_DATE, END_DATE);
+    });
+    // onDatesChange should not be called with invalid range
+    expect(onDatesChange).not.toHaveBeenCalled();
+});
+test("date range select - with exactMinBookingDays", () => {
+    const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)({ startDate: null, endDate: null, focusedInput: "startDate" }));
+    const { result, rerender } = (0, react_1.renderHook)(() => (0, use_date_range_picker_1.useDateRangePicker)({
+        startDate: state.current[0].startDate,
+        endDate: state.current[0].endDate,
+        onDatesChange: (data) => state.current[1](data),
+        focusedInput: state.current[0].focusedInput,
+        minBookingDate: new Date("2020-01-01"),
+        minBookingDays: 3,
+        exactMinBookingDays: true,
+    }));
+    const START_DATE = new Date("2021-09-15");
+    const END_DATE = new Date("2021-09-17");
+    (0, react_1.act)(() => {
+        result.current.onDatesSelect(START_DATE, END_DATE);
+        rerender();
+    });
+    expect(result.current.isStartDate(START_DATE)).toBe(true);
+    expect(result.current.isEndDate(END_DATE)).toBe(true);
+});
+test("date range select - blocked dates in range", () => {
+    const onDatesChange = jest.fn();
+    const { result } = (0, react_1.renderHook)(() => (0, use_date_range_picker_1.useDateRangePicker)({
+        startDate: null,
+        endDate: null,
+        onDatesChange,
+        focusedInput: "startDate",
+        minBookingDate: new Date("2020-01-01"),
+        unavailableDates: [new Date("2021-09-17")],
+    }));
+    const START_DATE = new Date("2021-09-15");
+    const END_DATE = new Date("2021-09-20");
+    (0, react_1.act)(() => {
+        result.current.onDatesSelect(START_DATE, END_DATE);
+    });
+    // onDatesChange should not be called when blocked date is in range
+    expect(onDatesChange).not.toHaveBeenCalled();
+});
+test("date range select - with changeActiveMonthOnSelect", () => {
+    const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)({ startDate: null, endDate: null, focusedInput: "startDate" }));
+    const { result, rerender } = (0, react_1.renderHook)(() => (0, use_date_range_picker_1.useDateRangePicker)({
+        startDate: state.current[0].startDate,
+        endDate: state.current[0].endDate,
+        onDatesChange: (data) => state.current[1](data),
+        focusedInput: state.current[0].focusedInput,
+        minBookingDate: new Date("2020-01-01"),
+        changeActiveMonthOnSelect: true,
+    }));
+    const START_DATE = new Date("2022-12-15");
+    const END_DATE = new Date("2022-12-20");
+    const initialActiveMonths = result.current.activeMonths;
+    (0, react_1.act)(() => {
+        result.current.onDatesSelect(START_DATE, END_DATE);
+        rerender();
+    });
+    // Active months should change to the selected date's month
+    expect(result.current.activeMonths[0].year).toBe(2022);
+    expect(result.current.activeMonths[0].month).toBe(11); // December is month 11
+    expect(result.current.activeMonths).not.toEqual(initialActiveMonths);
+});
+test("date range select - respects maxBookingDate", () => {
+    const onDatesChange = jest.fn();
+    const { result } = (0, react_1.renderHook)(() => (0, use_date_range_picker_1.useDateRangePicker)({
+        startDate: null,
+        endDate: null,
+        onDatesChange,
+        focusedInput: "startDate",
+        minBookingDate: new Date("2020-01-01"),
+        maxBookingDate: new Date("2021-09-18"),
+    }));
+    const START_DATE = new Date("2021-09-15");
+    const END_DATE = new Date("2021-09-20"); // After maxBookingDate
+    (0, react_1.act)(() => {
+        result.current.onDatesSelect(START_DATE, END_DATE);
+    });
+    // onDatesChange should not be called when end date is after maxBookingDate
+    expect(onDatesChange).not.toHaveBeenCalled();
+});
+test("date range select - with isDateBlocked callback", () => {
+    const onDatesChange = jest.fn();
+    const isDateBlocked = (date) => date.getDate() === 17;
+    const { result } = (0, react_1.renderHook)(() => (0, use_date_range_picker_1.useDateRangePicker)({
+        startDate: null,
+        endDate: null,
+        onDatesChange,
+        focusedInput: "startDate",
+        minBookingDate: new Date("2020-01-01"),
+        isDateBlocked,
+    }));
+    const START_DATE = new Date("2021-09-15");
+    const END_DATE = new Date("2021-09-20");
+    (0, react_1.act)(() => {
+        result.current.onDatesSelect(START_DATE, END_DATE);
+    });
+    // onDatesChange should not be called when a blocked date (17th) is in the range
+    expect(onDatesChange).not.toHaveBeenCalled();
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/datepicker",
-    "version": "11.80.4",
+    "version": "11.87.0",
     "description": "A set of React hooks to create an awesome datepicker.",
     "main": "index.js",
     "scripts": {
@@ -25,9 +25,9 @@
         "react-dom": ">=18.2.0"
     },
     "devDependencies": {
-        "@testing-library/react": "16.0.1",
-        "@types/react": "18.3.5",
-        "@types/react-dom": "18.3.0",
+        "@testing-library/react": "16.3.0",
+        "@types/react": "18.3.26",
+        "@types/react-dom": "18.3.7",
         "react": "18.3.1",
         "react-dom": "18.3.1"
     }

package/utils/dayjs-en.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/utils/get-each.test.js

@@ -27,5 +27,5 @@ test("getEach year", () => {
     ]);
 });
 test("getEach invalid input", () => {
-    expect(() => (0, get_each_1.getEach)(new Date("2015-05-05"), new Date("2014-05-07"), "day")).toThrowError();
+    expect(() => (0, get_each_1.getEach)(new Date("2015-05-05"), new Date("2014-05-07"), "day")).toThrow();
 });