@uxf/datepicker 11.86.0 → 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.86.0",
+    "version": "11.87.0",
     "description": "A set of React hooks to create an awesome datepicker.",
     "main": "index.js",
     "scripts": {