@uxf/datepicker 11.88.0 → 11.90.0

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

@@ -36,14 +36,17 @@ test("base data with min and max date", () => {
 });
 test("actions", () => {
     const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)([{ month: 8, year: 2021, date: new Date("2021-09-01") }]));
-    const { result, rerender } = (0, react_1.renderHook)(() => (0, use_date_picker_navigation_1.useDatePickerNavigation)({
-        activeMonths: state.current[0],
-        setActiveMonths: (data) => state.current[1](data),
-        numberOfMonths: 1,
-        setFocusedDate: () => undefined,
-        minBookingDate: new Date("2020-12-25"),
-        maxBookingDate: new Date("2022-03-11"),
-    }));
+    const { result, rerender } = (0, react_1.renderHook)(() => {
+        const [activeMonths, setActiveMonths] = state.current;
+        return (0, use_date_picker_navigation_1.useDatePickerNavigation)({
+            activeMonths,
+            setActiveMonths,
+            numberOfMonths: 1,
+            setFocusedDate: () => undefined,
+            minBookingDate: new Date("2020-12-25"),
+            maxBookingDate: new Date("2022-03-11"),
+        });
+    });
     // go to year 2020
     expect(result.current.canGoToPrevYear).toBe(true);
     (0, react_1.act)(() => {

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

@@ -26,7 +26,8 @@ test("base data", () => {
 test("date focus", () => {
     const BASE_DATE = new Date("2021-09-15");
     const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)(BASE_DATE));
-    const { result } = (0, react_1.renderHook)(() => (0, use_date_picker_1.useDatePicker)({ selectedDate: state.current[0], onDateChange: (date) => state.current[1](date) }));
+    const [selectedDate, setSelectedDate] = state.current;
+    const { result } = (0, react_1.renderHook)(() => (0, use_date_picker_1.useDatePicker)({ selectedDate, onDateChange: setSelectedDate }));
     const NEW_DATE = new Date("2022-12-22");
     expect(result.current.isDateFocused(BASE_DATE)).toBe(true);
     expect(result.current.isDateFocused(NEW_DATE)).toBe(false);
@@ -39,7 +40,10 @@ test("date focus", () => {
 test("date select", () => {
     const BASE_DATE = new Date("2021-09-15");
     const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)(BASE_DATE));
-    const { result, rerender } = (0, react_1.renderHook)(() => (0, use_date_picker_1.useDatePicker)({ selectedDate: state.current[0], onDateChange: (date) => state.current[1](date) }));
+    const { result, rerender } = (0, react_1.renderHook)(() => {
+        const [selectedDate, setSelectedDate] = state.current;
+        return (0, use_date_picker_1.useDatePicker)({ selectedDate, onDateChange: setSelectedDate });
+    });
     const NEW_DATE = new Date("2022-12-22");
     expect(result.current.isDateSelected(BASE_DATE)).toBe(true);
     expect(result.current.isDateSelected(NEW_DATE)).toBe(false);

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

@@ -19,16 +19,8 @@ test("base data", () => {
     expect(result.current.focusedDate).toBe(null);
     expect(result.current.hoveredDate).toBe(null);
     expect(result.current.activeMonths).toStrictEqual([
-        {
-            date: new Date("2021-09-01"),
-            month: 8,
-            year: 2021,
-        },
-        {
-            date: new Date("2021-10-01"),
-            month: 9,
-            year: 2021,
-        },
+        { date: new Date("2021-09-01"), month: 8, year: 2021 },
+        { date: new Date("2021-10-01"), month: 9, year: 2021 },
     ]);
     expect(result.current.isDateBlocked(new Date("2020-01-01"))).toBe(false);
     expect(result.current.isDateBlocked(new Date("2019-12-31"))).toBe(true);
@@ -36,11 +28,12 @@ test("base data", () => {
 test("date focus", () => {
     const BASE_DATE = new Date("2021-09-15");
     const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)({ startDate: null, endDate: null, focusedInput: "startDate" }));
+    const [{ startDate, endDate, focusedInput }, onDatesChange] = state.current;
     const { result } = (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,
+        startDate,
+        endDate,
+        onDatesChange,
+        focusedInput,
         minBookingDate: new Date("2020-01-01"),
     }));
     const NEW_DATE = new Date("2022-12-22");
@@ -55,13 +48,16 @@ test("date focus", () => {
 test("date select", () => {
     const BASE_DATE = new Date("2021-09-15");
     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 { result, rerender } = (0, react_1.renderHook)(() => {
+        const [{ startDate, endDate, focusedInput }, onDatesChange] = state.current;
+        return (0, use_date_range_picker_1.useDateRangePicker)({
+            startDate,
+            endDate,
+            onDatesChange,
+            focusedInput,
+            minBookingDate: new Date("2020-01-01"),
+        });
+    });
     const NEW_DATE = new Date("2022-12-22");
     expect(result.current.isDateSelected(BASE_DATE)).toBe(false);
     expect(result.current.isDateSelected(NEW_DATE)).toBe(false);
@@ -87,13 +83,16 @@ test("date select", () => {
 });
 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 { result, rerender } = (0, react_1.renderHook)(() => {
+        const [{ startDate, endDate, focusedInput }, onDatesChange] = state.current;
+        return (0, use_date_range_picker_1.useDateRangePicker)({
+            startDate,
+            endDate,
+            onDatesChange,
+            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)(() => {
@@ -106,31 +105,38 @@ test("date range select - valid range", () => {
 });
 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 { result, rerender } = (0, react_1.renderHook)(() => {
+        const [{ startDate, endDate, focusedInput }, onDatesChange] = state.current;
+        return (0, use_date_range_picker_1.useDateRangePicker)({
+            startDate,
+            endDate,
+            onDatesChange,
+            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);
+    const [{ endDate: newEndDate }] = state.current;
+    expect(newEndDate).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 { result, rerender } = (0, react_1.renderHook)(() => {
+        const [{ startDate, endDate, focusedInput }, onDatesChange] = state.current;
+        return (0, use_date_range_picker_1.useDateRangePicker)({
+            startDate,
+            endDate,
+            onDatesChange,
+            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)(() => {
@@ -160,15 +166,18 @@ test("date range select - invalid range with minBookingDays", () => {
 });
 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 { result, rerender } = (0, react_1.renderHook)(() => {
+        const [{ startDate, endDate, focusedInput }, onDatesChange] = state.current;
+        return (0, use_date_range_picker_1.useDateRangePicker)({
+            startDate,
+            endDate,
+            onDatesChange,
+            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)(() => {
@@ -197,15 +206,19 @@ test("date range select - blocked dates in range", () => {
     expect(onDatesChange).not.toHaveBeenCalled();
 });
 test("date range select - with changeActiveMonthOnSelect", () => {
+    var _a, _b;
     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 { result, rerender } = (0, react_1.renderHook)(() => {
+        const [{ startDate, endDate, focusedInput }, onDatesChange] = state.current;
+        return (0, use_date_range_picker_1.useDateRangePicker)({
+            startDate,
+            endDate,
+            onDatesChange,
+            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;
@@ -214,8 +227,8 @@ test("date range select - with changeActiveMonthOnSelect", () => {
         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((_a = result.current.activeMonths.at(0)) === null || _a === void 0 ? void 0 : _a.year).toBe(2022);
+    expect((_b = result.current.activeMonths.at(0)) === null || _b === void 0 ? void 0 : _b.month).toBe(11); // December is month 11
     expect(result.current.activeMonths).not.toEqual(initialActiveMonths);
 });
 test("date range select - respects maxBookingDate", () => {

package/hooks/use-time-picker.test.js

@@ -5,17 +5,15 @@ const react_2 = require("react");
 const use_time_picker_1 = require("./use-time-picker");
 test("base data", () => {
     const BASE_TIME = { hour: 12, minute: 57 };
-    const { result } = (0, react_1.renderHook)(() => (0, use_time_picker_1.useTimePicker)({
-        selectedTime: BASE_TIME,
-        onTimeChange: () => undefined,
-    }));
+    const { result } = (0, react_1.renderHook)(() => (0, use_time_picker_1.useTimePicker)({ selectedTime: BASE_TIME, onTimeChange: () => undefined }));
     expect(result.current.focusedHour).toBe(BASE_TIME.hour);
     expect(result.current.focusedMinute).toBe(BASE_TIME.minute);
 });
 test("time focus", () => {
     const BASE_TIME = { hour: 12, minute: 57 };
     const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)(BASE_TIME));
-    const { result } = (0, react_1.renderHook)(() => (0, use_time_picker_1.useTimePicker)({ selectedTime: state.current[0], onTimeChange: (time) => state.current[1](time) }));
+    const [selectedTime, setSelectedTime] = state.current;
+    const { result } = (0, react_1.renderHook)(() => (0, use_time_picker_1.useTimePicker)({ selectedTime, onTimeChange: (time) => setSelectedTime(time) }));
     const NEW_TIME = { hour: 13, minute: 15 };
     expect(result.current.isHourFocused(BASE_TIME.hour)).toBe(true);
     expect(result.current.isHourFocused(NEW_TIME.hour)).toBe(false);
@@ -33,7 +31,10 @@ test("time focus", () => {
 test("time select", () => {
     const BASE_TIME = { hour: 12, minute: 57 };
     const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)(BASE_TIME));
-    const { result, rerender } = (0, react_1.renderHook)(() => (0, use_time_picker_1.useTimePicker)({ selectedTime: state.current[0], onTimeChange: (time) => state.current[1](time) }));
+    const { result, rerender } = (0, react_1.renderHook)(() => {
+        const [selectedTime, setSelectedTime] = state.current;
+        return (0, use_time_picker_1.useTimePicker)({ selectedTime, onTimeChange: (time) => setSelectedTime(time) });
+    });
     const NEW_TIME = { hour: 13, minute: 15 };
     expect(result.current.isHourSelected(BASE_TIME.hour)).toBe(true);
     expect(result.current.isHourSelected(NEW_TIME.hour)).toBe(false);
@@ -51,35 +52,42 @@ test("time select", () => {
 test("time navigation", () => {
     const BASE_TIME = { hour: 1, minute: 58 };
     const { result: state } = (0, react_1.renderHook)(() => (0, react_2.useState)(BASE_TIME));
-    const { result, rerender } = (0, react_1.renderHook)(() => (0, use_time_picker_1.useTimePicker)({ selectedTime: state.current[0], onTimeChange: (time) => state.current[1](time) }));
+    const { result, rerender } = (0, react_1.renderHook)(() => {
+        const [selectedTime, setSelectedTime] = state.current;
+        return (0, use_time_picker_1.useTimePicker)({ selectedTime, onTimeChange: (time) => setSelectedTime(time) });
+    });
+    const getSelectedTime = () => {
+        const [selectedTime] = state.current;
+        return selectedTime;
+    };
     (0, react_1.act)(() => {
         result.current.goToPrevHour();
         rerender();
     });
-    expect(state.current[0]).toStrictEqual({ hour: 0, minute: 58 });
+    expect(getSelectedTime()).toStrictEqual({ hour: 0, minute: 58 });
     (0, react_1.act)(() => {
         result.current.goToNextMinute();
         rerender();
     });
-    expect(state.current[0]).toStrictEqual({ hour: 0, minute: 59 });
+    expect(getSelectedTime()).toStrictEqual({ hour: 0, minute: 59 });
     (0, react_1.act)(() => {
         result.current.goToPrevHour();
         rerender();
     });
-    expect(state.current[0]).toStrictEqual({ hour: 23, minute: 59 });
+    expect(getSelectedTime()).toStrictEqual({ hour: 23, minute: 59 });
     (0, react_1.act)(() => {
         result.current.goToNextHour();
         rerender();
     });
-    expect(state.current[0]).toStrictEqual({ hour: 0, minute: 59 });
+    expect(getSelectedTime()).toStrictEqual({ hour: 0, minute: 59 });
     (0, react_1.act)(() => {
         result.current.goToNextMinute();
         rerender();
     });
-    expect(state.current[0]).toStrictEqual({ hour: 1, minute: 0 });
+    expect(getSelectedTime()).toStrictEqual({ hour: 1, minute: 0 });
     (0, react_1.act)(() => {
         result.current.goToPrevMinute();
         rerender();
     });
-    expect(state.current[0]).toStrictEqual({ hour: 0, minute: 59 });
+    expect(getSelectedTime()).toStrictEqual({ hour: 0, minute: 59 });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/datepicker",
-    "version": "11.88.0",
+    "version": "11.90.0",
     "description": "A set of React hooks to create an awesome datepicker.",
     "main": "index.js",
     "scripts": {
@@ -26,7 +26,7 @@
     },
     "devDependencies": {
         "@testing-library/react": "16.3.0",
-        "@types/react": "18.3.26",
+        "@types/react": "18.3.27",
         "@types/react-dom": "18.3.7",
         "react": "18.3.1",
         "react-dom": "18.3.1"

package/utils/get-date-intervals.test.js

@@ -22,17 +22,17 @@ describe("getDateIntervals", () => {
             (0, dayjs_1.default)("2023-10-17").toDate(),
         ];
         const expected = [
-            { start: dates[0], end: dates[2] },
-            { start: dates[3], end: dates[4] },
+            { start: dates.at(0), end: dates.at(2) },
+            { start: dates.at(3), end: dates.at(4) },
         ];
         expect((0, get_date_invervals_1.getDateIntervals)(dates)).toStrictEqual(expected);
     });
     it("should handle non-contiguous dates", () => {
         const dates = [(0, dayjs_1.default)("2023-10-12").toDate(), (0, dayjs_1.default)("2023-10-14").toDate(), (0, dayjs_1.default)("2023-10-16").toDate()];
         const expected = [
-            { start: dates[0], end: dates[0] },
-            { start: dates[1], end: dates[1] },
-            { start: dates[2], end: dates[2] },
+            { start: dates.at(0), end: dates.at(0) },
+            { start: dates.at(1), end: dates.at(1) },
+            { start: dates.at(2), end: dates.at(2) },
         ];
         expect((0, get_date_invervals_1.getDateIntervals)(dates)).toStrictEqual(expected);
     });