@uxf/datepicker 10.8.0 → 11.0.0

package/README.md

@@ -10,7 +10,7 @@ A set of React hooks to create an awesome datepicker.
 
 ### Main logic component
 
-```typescript
+```tsx
 export const DatePicker: FC = () => {
     // prepare state to handle selected date
     const [selectedDate, setSelectedDate] = useState<OnDateChangeType>(null);
@@ -42,7 +42,7 @@ export const DatePicker: FC = () => {
 
 ### Month component
 
-```typescript
+```tsx
 export const DateRangePickerMonth: FC<UseMonthProps> = ({
     firstDayOfWeek,
     month,
@@ -69,7 +69,7 @@ export const DateRangePickerMonth: FC<UseMonthProps> = ({
 
 ### Day component
 
-```typescript
+```tsx
 export const DateRangePickerDay: FC<{ day: string; date: Date }> = ({ day, date }) => {
     const dayRef = useRef(null);
     const {
@@ -134,7 +134,8 @@ export const DateRangePickerDay: FC<{ day: string; date: Date }> = ({ day, date
 | numberOfMonths      | `number`                         |          | `1`           |             |
 | onDateChange        | `(data: OnDateChangeType): void` | yes      |               |             |
 | selectedDate        | `Date \| null`                   | yes      |               |             |
-| unavailableDates    | `Date[]`                         |          | `[]`          |             |
+| unavailableDates    | `Date[]`                         |          | `[]`          | @deprecated |
+| datesConfig         | `DatesConfig[]`                  |          | `[]`          |             |
 
 **UseDatePickerReturnType**
 
@@ -186,7 +187,8 @@ export const DateRangePickerDay: FC<{ day: string; date: Date }> = ({ day, date
 | numberOfMonths            | `number`                          |          | `2`           |             |
 | onDatesChange             | `(data: OnDatesChangeType): void` | yes      |               |             |
 | startDate                 | `Date \| null`                    | yes      |               |             |
-| unavailableDates          | `Date[]`                          |          | `[]`          |             |
+| unavailableDates          | `Date[]`                          |          | `[]`          | @deprecated |
+| datesConfig               | `DatesConfig[]`                   |          | `[]`          |             |
 
 **UseDateRangePickerReturnType**
 
@@ -280,24 +282,29 @@ export const DateRangePickerDay: FC<{ day: string; date: Date }> = ({ day, date
 
 **UseDayProps**
 
-| name           | type                      | required | default | description |
-|----------------|---------------------------|----------|---------|-------------|
-| date           | `Date`                    | yes      |         |             |
-| dayRef         | `RefObject`               |          |         |             |
-| focusedDate    | `Date \| null`            | yes      |         |             |
-| isDateBlocked  | `(date: Date) => boolean` | yes      |         |             |
-| isDateFocused  | `(date: Date) => boolean` | yes      |         |             |
-| isDateHovered  | `(date: Date) => boolean` | yes      |         |             |
-| isDateSelected | `(date: Date) => boolean` | yes      |         |             |
-| onDateFocus    | `(date: Date) => void`    | yes      |         |             |
-| onDateHover    | `(date: Date) => void`    | yes      |         |             |
-| onDateSelect   | `(date: Date) => void`    | yes      |         |             |
+| name             | type                      | required | default | description |
+|------------------|---------------------------|----------|---------|-------------|
+| date             | `Date`                    | yes      |         |             |
+| dayRef           | `RefObject`               |          |         |             |
+| focusedDate      | `Date \| null`            | yes      |         |             |
+| isDateBlocked    | `(date: Date) => boolean` | yes      |         |             |
+| isDateFocused    | `(date: Date) => boolean` | yes      |         |             |
+| isDateHovered    | `(date: Date) => boolean` | yes      |         |             |
+| isDateSelected   | `(date: Date) => boolean` | yes      |         |             |
+| onDateFocus      | `(date: Date) => void`    | yes      |         |             |
+| onDateHover      | `(date: Date) => void`    | yes      |         |             |
+| onDateSelect     | `(date: Date) => void`    | yes      |         |             |
+| unavailableDates | `Date[]`                  |          |         | @deprecated |
+| datesConfig      | `DatesConfig[]`           |          |         |             |
 
 **UseDayReturnType**
 
 | name               | type                         | description |
 |--------------------|------------------------------|-------------|
 | disabledDate       | `boolean`                    |             |
+| isFirstDisabled    | `boolean`                    |             |
+| isLastDisabled     | `boolean`                    |             |
+| disabledDate       | `boolean`                    |             |
 | isHovered          | `boolean`                    |             |
 | isSelected         | `boolean`                    |             |
 | isToday            | `boolean`                    |             |
@@ -306,6 +313,7 @@ export const DateRangePickerDay: FC<{ day: string; date: Date }> = ({ day, date
 | onKeyDown          | `(e: KeyboardEvent) => void` |             |
 | onMouseEnter       | `() => void`                 |             |
 | tabIndex           | `number`                     |             |
+| flags              | `Flag[]`                     |             |
 
 ## Known issues
 

package/contexts/date-picker-context.js

@@ -4,6 +4,7 @@ exports.DatePickerContext = void 0;
 const react_1 = require("react");
 exports.DatePickerContext = (0, react_1.createContext)({
     activeMonths: [],
+    datesConfig: [],
     canGoToMonth: () => true,
     canGoToNextMonth: true,
     canGoToNextYear: true,

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

@@ -4,6 +4,7 @@ exports.DateRangePickerContext = void 0;
 const react_1 = require("react");
 exports.DateRangePickerContext = (0, react_1.createContext)({
     activeMonths: [],
+    datesConfig: [],
     canGoToMonth: () => true,
     canGoToNextMonth: true,
     canGoToNextYear: true,

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

@@ -1,7 +1,8 @@
-import { FirstDayOfWeek, MonthType } from "../utils/types";
+import { DatesConfig, FirstDayOfWeek, MonthType } from "../utils/types";
 import { UseDatePickerNavigationReturnType } from "./use-date-picker-navigation";
 export type OnDateChangeType = Date | null;
 export interface UseDatePickerProps {
+    datesConfig?: DatesConfig[];
     firstDayOfWeek?: FirstDayOfWeek;
     initialVisibleMonth?: Date;
     isDateBlocked?: (date: Date) => boolean;
@@ -11,10 +12,12 @@ export interface UseDatePickerProps {
     onDateChange: (data: OnDateChangeType) => void;
     preventScroll?: boolean;
     selectedDate: Date | null;
+    /** @deprecated */
     unavailableDates?: Date[];
 }
 export interface UseDatePickerReturnType extends UseDatePickerNavigationReturnType {
     activeMonths: MonthType[];
+    datesConfig?: DatesConfig[];
     firstDayOfWeek: FirstDayOfWeek;
     focusedDate: Date | null;
     hoveredDate: Date | null;
@@ -28,6 +31,7 @@ export interface UseDatePickerReturnType extends UseDatePickerNavigationReturnTy
     onDateSelect: (date: Date) => void;
     onResetDates: () => void;
     preventScroll?: boolean;
+    /** deprecated */
     unavailableDates: Date[];
 }
-export declare function useDatePicker({ firstDayOfWeek, initialVisibleMonth, isDateBlocked: isDateBlockedProps, maxBookingDate, minBookingDate, numberOfMonths, onDateChange, preventScroll, selectedDate, unavailableDates, }: UseDatePickerProps): UseDatePickerReturnType;
+export declare function useDatePicker({ datesConfig, firstDayOfWeek, initialVisibleMonth, isDateBlocked: isDateBlockedProps, maxBookingDate, minBookingDate, numberOfMonths, onDateChange, preventScroll, selectedDate, unavailableDates, }: UseDatePickerProps): UseDatePickerReturnType;

package/hooks/use-date-picker.js

@@ -10,14 +10,16 @@ const is_date_hovered_1 = require("../utils/is-date-hovered");
 const is_in_unavailable_dates_1 = require("../utils/is-in-unavailable-dates");
 const is_start_date_1 = require("../utils/is-start-date");
 const use_date_picker_navigation_1 = require("./use-date-picker-navigation");
-function useDatePicker({ firstDayOfWeek = 0, initialVisibleMonth, isDateBlocked: isDateBlockedProps = () => false, maxBookingDate, minBookingDate, numberOfMonths = 1, onDateChange, preventScroll, selectedDate, unavailableDates = [], }) {
+function useDatePicker({ datesConfig = [], firstDayOfWeek = 0, initialVisibleMonth, isDateBlocked: isDateBlockedProps = () => false, maxBookingDate, minBookingDate, numberOfMonths = 1, onDateChange, preventScroll, selectedDate, unavailableDates = [], }) {
+    const disabledDatesFromConfig = datesConfig.filter((config) => config.isDisabled).flatMap((config) => config.dates);
+    const disabledDates = [...unavailableDates, ...disabledDatesFromConfig];
     const [activeMonths, setActiveMonths] = (0, react_1.useState)(() => selectedDate
         ? (0, get_initial_months_1.getInitialMonths)(numberOfMonths, selectedDate)
         : (0, get_initial_months_1.getInitialMonths)(numberOfMonths, initialVisibleMonth || null));
     const [hoveredDate, setHoveredDate] = (0, react_1.useState)(null);
     const [focusedDate, setFocusedDate] = (0, react_1.useState)(selectedDate);
     const disabledDatesByUser = (date) => {
-        return (0, is_in_unavailable_dates_1.isInUnavailableDates)(unavailableDates, date) || isDateBlockedProps(date);
+        return (0, is_in_unavailable_dates_1.isInUnavailableDates)(disabledDates, date) || isDateBlockedProps(date);
     };
     const onDateFocus = (0, react_1.useCallback)((date) => {
         setFocusedDate(date);
@@ -97,6 +99,7 @@ function useDatePicker({ firstDayOfWeek = 0, initialVisibleMonth, isDateBlocked:
             setFocusedDate,
         }),
         activeMonths,
+        datesConfig,
         firstDayOfWeek,
         focusedDate,
         hoveredDate,
@@ -110,7 +113,7 @@ function useDatePicker({ firstDayOfWeek = 0, initialVisibleMonth, isDateBlocked:
         onDateSelect,
         onResetDates: onReset,
         preventScroll,
-        unavailableDates,
+        unavailableDates: disabledDates,
     };
 }
 exports.useDatePicker = useDatePicker;

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

@@ -1,4 +1,4 @@
-import { FirstDayOfWeek, MonthType } from "../utils/types";
+import { DatesConfig, FirstDayOfWeek, MonthType } from "../utils/types";
 import { UseDatePickerNavigationReturnType } from "./use-date-picker-navigation";
 export declare const START_DATE = "startDate";
 export declare const END_DATE = "endDate";
@@ -10,6 +10,7 @@ export interface OnDatesChangeProps {
 }
 export interface UseDateRangePickerProps {
     changeActiveMonthOnSelect?: boolean;
+    datesConfig?: DatesConfig[];
     endDate: Date | null;
     exactMinBookingDays?: boolean;
     firstDayOfWeek?: FirstDayOfWeek;
@@ -23,10 +24,12 @@ export interface UseDateRangePickerProps {
     onDatesChange: (data: OnDatesChangeProps) => void;
     preventScroll?: boolean;
     startDate: Date | null;
+    /** @deprecated */
     unavailableDates?: Date[];
 }
 export interface UseDateRangePickerReturnType extends UseDatePickerNavigationReturnType {
     activeMonths: MonthType[];
+    datesConfig?: DatesConfig[];
     firstDayOfWeek: FirstDayOfWeek;
     focusedDate: Date | null;
     hoveredDate: Date | null;
@@ -45,4 +48,4 @@ export interface UseDateRangePickerReturnType extends UseDatePickerNavigationRet
     preventScroll?: boolean;
     unavailableDates: Date[];
 }
-export declare function useDateRangePicker({ changeActiveMonthOnSelect, endDate, exactMinBookingDays, firstDayOfWeek, focusedInput, initialVisibleMonth, isDateBlocked: isDateBlockedProps, maxBookingDate, minBookingDate, minBookingDays, numberOfMonths, onDatesChange, startDate, unavailableDates, }: UseDateRangePickerProps): UseDateRangePickerReturnType;
+export declare function useDateRangePicker({ changeActiveMonthOnSelect, datesConfig, endDate, exactMinBookingDays, firstDayOfWeek, focusedInput, initialVisibleMonth, isDateBlocked: isDateBlockedProps, maxBookingDate, minBookingDate, minBookingDays, numberOfMonths, onDatesChange, startDate, unavailableDates, }: UseDateRangePickerProps): UseDateRangePickerReturnType;

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

@@ -16,14 +16,16 @@ 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, 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 = () => false, 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
         ? (0, get_initial_months_1.getInitialMonths)(numberOfMonths, startDate)
         : (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)(unavailableDates, date) || isDateBlockedProps(date);
+        return (0, is_in_unavailable_dates_1.isInUnavailableDates)(disabledDates, date) || isDateBlockedProps(date);
     };
     const onDateFocus = (0, react_1.useCallback)((date) => {
         setFocusedDate(date);
@@ -205,6 +207,7 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, endDate, exactM
             setFocusedDate,
         }),
         activeMonths,
+        datesConfig,
         firstDayOfWeek,
         focusedDate,
         hoveredDate,
@@ -220,7 +223,7 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, endDate, exactM
         onDateHover,
         onDateSelect,
         onResetDates,
-        unavailableDates,
+        unavailableDates: disabledDates,
     };
 }
 exports.useDateRangePicker = useDateRangePicker;

package/hooks/use-day.d.ts

@@ -1,6 +1,8 @@
 import { KeyboardEvent, RefObject } from "react";
+import { DatesConfig, Flag } from "../utils/types";
 export interface UseDayProps {
     date: Date;
+    datesConfig?: DatesConfig[];
     dayRef?: RefObject<HTMLElement>;
     focusedDate: Date | null;
     isDateBlocked: (date: Date) => boolean;
@@ -12,15 +14,17 @@ export interface UseDayProps {
     onDateHover: (date: Date) => void;
     onDateSelect: (date: Date) => void;
     preventScroll?: boolean;
+    /** @deprecated */
     unavailableDates: Date[];
 }
 export interface UseDayReturnType {
-    isFirstDisabled: boolean;
-    isLastDisabled: boolean;
+    flags: Flag[];
     disabledDate: boolean;
+    isFirstDisabled: boolean;
     isHovered: boolean;
-    isSelected: boolean;
     isInsideRange: boolean;
+    isLastDisabled: boolean;
+    isSelected: boolean;
     isToday: boolean;
     isWithinHoverRange: boolean;
     onClick?: () => void;
@@ -28,4 +32,4 @@ export interface UseDayReturnType {
     onMouseEnter: () => void;
     tabIndex: number;
 }
-export declare function useDay({ date, dayRef, focusedDate, isDateBlocked, isDateFocused, isDateHovered, isDateInsideRange, isDateSelected, onDateFocus, onDateHover, onDateSelect, preventScroll, unavailableDates, }: UseDayProps): UseDayReturnType;
+export declare function useDay({ date, datesConfig, dayRef, focusedDate, isDateBlocked, isDateFocused, isDateHovered, isDateInsideRange, isDateSelected, onDateFocus, onDateHover, onDateSelect, preventScroll, unavailableDates, }: UseDayProps): UseDayReturnType;

package/hooks/use-day.js

@@ -8,7 +8,10 @@ const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = require("react");
 const dayjs_en_1 = require("../utils/dayjs-en");
 const get_date_invervals_1 = require("../utils/get-date-invervals");
-function useDay({ date, dayRef, focusedDate, isDateBlocked, isDateFocused, isDateHovered, isDateInsideRange, isDateSelected, onDateFocus, onDateHover, onDateSelect, preventScroll, unavailableDates, }) {
+function useDay({ date, datesConfig, dayRef, focusedDate, isDateBlocked, isDateFocused, isDateHovered, isDateInsideRange, isDateSelected, onDateFocus, onDateHover, onDateSelect, preventScroll, unavailableDates, }) {
+    var _a;
+    const disabledDatesFromConfig = (_a = datesConfig === null || datesConfig === void 0 ? void 0 : datesConfig.filter((config) => config.isDisabled).flatMap((config) => config.dates)) !== null && _a !== void 0 ? _a : [];
+    const disabledDates = [...unavailableDates, ...disabledDatesFromConfig];
     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);
@@ -39,27 +42,40 @@ function useDay({ date, dayRef, focusedDate, isDateBlocked, isDateFocused, isDat
             }
         }
     }, [date, onDateFocus]);
-    const sortedUnavailableDates = unavailableDates.slice().sort((a, b) => a.getTime() - b.getTime());
-    const dateIntervals = (0, get_date_invervals_1.getDateIntervals)(sortedUnavailableDates);
+    const dateIntervals = (0, get_date_invervals_1.getDateIntervals)(disabledDates);
     const _isFirstUnavailableDate = () => {
         return dateIntervals.some((interval) => (0, dayjs_1.default)(interval.start).isSame(date, "day"));
     };
     const _isLastUnavailableDate = () => {
         return dateIntervals.some((interval) => (0, dayjs_1.default)(interval.end).isSame(date, "day"));
     };
+    const applicableDatesConfigs = datesConfig === null || datesConfig === void 0 ? void 0 : datesConfig.filter((config) => config.dates.some((configDay) => (0, dayjs_1.default)(configDay).isSame(date, "day")));
+    const flags = applicableDatesConfigs === null || applicableDatesConfigs === void 0 ? void 0 : applicableDatesConfigs.reduce((acc, curr) => {
+        if (!curr.flag) {
+            return acc;
+        }
+        const intervals = (0, get_date_invervals_1.getDateIntervals)(curr.dates);
+        acc.push({
+            flag: curr.flag,
+            isFirst: intervals.some((interval) => (0, dayjs_1.default)(interval.start).isSame(date, "day")),
+            isLast: intervals.some((interval) => (0, dayjs_1.default)(interval.end).isSame(date, "day")),
+        });
+        return acc;
+    }, []);
     return {
+        flags: flags !== null && flags !== void 0 ? flags : [],
         disabledDate: disabled,
         isFirstDisabled: _isFirstUnavailableDate(),
-        isLastDisabled: _isLastUnavailableDate(),
         isHovered: isDateHovered(date),
-        isSelected: isDateSelected(date),
         isInsideRange: isDateInsideRange ? isDateInsideRange(date) : false,
+        isLastDisabled: _isLastUnavailableDate(),
+        isSelected: isDateSelected(date),
+        isToday,
         isWithinHoverRange: isDateHovered(date),
         onClick: !disabled ? onClick : undefined,
         onKeyDown,
         onMouseEnter,
         tabIndex: focusedDate === null || isDateFocused(date) ? 0 : -1,
-        isToday,
     };
 }
 exports.useDay = useDay;

package/hooks/use-day.test.js

@@ -15,13 +15,14 @@ beforeAll(() => {
 test("useDay", () => {
     const { result } = (0, react_hooks_1.renderHook)(() => (0, use_day_1.useDay)({
         date: new Date("2021-09-05"),
-        isDateBlocked: () => false,
+        datesConfig: [],
         focusedDate: null,
-        onDateFocus: () => undefined,
+        isDateBlocked: () => false,
         isDateFocused: () => false,
         isDateHovered: () => false,
-        isDateSelected: () => false,
         isDateInsideRange: () => false,
+        isDateSelected: () => false,
+        onDateFocus: () => undefined,
         onDateHover: () => undefined,
         onDateSelect: () => undefined,
         unavailableDates: [],
@@ -39,13 +40,14 @@ test("useDay", () => {
 test("useDay with unavailableDates", () => {
     const { result } = (0, react_hooks_1.renderHook)(() => (0, use_day_1.useDay)({
         date: new Date("2021-09-05"),
-        isDateBlocked: () => true,
+        datesConfig: [],
         focusedDate: null,
-        onDateFocus: () => undefined,
+        isDateBlocked: () => true,
         isDateFocused: () => false,
         isDateHovered: () => false,
-        isDateSelected: () => false,
         isDateInsideRange: () => false,
+        isDateSelected: () => false,
+        onDateFocus: () => undefined,
         onDateHover: () => undefined,
         onDateSelect: () => undefined,
         unavailableDates: [new Date("2021-09-05")],
@@ -60,6 +62,32 @@ test("useDay with unavailableDates", () => {
     expect(result.current.isInsideRange).toBe(false);
     expect(result.current.isWithinHoverRange).toBe(false);
 });
+test("useDay with datesConfig", () => {
+    const { result } = (0, react_hooks_1.renderHook)(() => (0, use_day_1.useDay)({
+        date: new Date("2021-09-05"),
+        datesConfig: [{ dates: [new Date("2021-09-05")], flag: "custom-classname", isDisabled: true }],
+        focusedDate: null,
+        isDateBlocked: () => true,
+        isDateFocused: () => false,
+        isDateHovered: () => false,
+        isDateInsideRange: () => false,
+        isDateSelected: () => false,
+        onDateFocus: () => undefined,
+        onDateHover: () => undefined,
+        onDateSelect: () => undefined,
+        unavailableDates: [],
+    }));
+    expect(result.current.tabIndex).toBe(0);
+    expect(result.current.disabledDate).toBe(true);
+    expect(result.current.isFirstDisabled).toBe(true);
+    expect(result.current.isLastDisabled).toBe(true);
+    expect(result.current.isHovered).toBe(false);
+    expect(result.current.isToday).toBe(false);
+    expect(result.current.isSelected).toBe(false);
+    expect(result.current.isInsideRange).toBe(false);
+    expect(result.current.isWithinHoverRange).toBe(false);
+    expect(result.current.flags).toStrictEqual([{ flag: "custom-classname", isFirst: true, isLast: true }]);
+});
 test("actions", () => {
     let hoveredDate = null;
     let selectedDate = null;
@@ -68,16 +96,17 @@ test("actions", () => {
     const { result: ref } = (0, react_hooks_1.renderHook)(() => (0, react_1.useRef)(null));
     const { result, rerender } = (0, react_hooks_1.renderHook)(() => (0, use_day_1.useDay)({
         date: new Date("2021-09-05"),
-        isDateBlocked: () => false,
+        datesConfig: [],
+        dayRef: ref.current,
         focusedDate: null,
-        onDateFocus: (date) => (focusedDate = date),
+        isDateBlocked: () => false,
         isDateFocused: (date) => (0, dayjs_1.default)(date).isSame(focusedDate, "day"),
         isDateHovered: (date) => (0, dayjs_1.default)(date).isSame(hoveredDate, "day"),
-        isDateSelected: (date) => (0, dayjs_1.default)(date).isSame(selectedDate, "day"),
         isDateInsideRange: (date) => (0, dayjs_1.default)(date).isSame(insideRangeDate, "day"),
+        isDateSelected: (date) => (0, dayjs_1.default)(date).isSame(selectedDate, "day"),
+        onDateFocus: (date) => (focusedDate = date),
         onDateHover: (date) => (hoveredDate = date),
         onDateSelect: (date) => (selectedDate = date),
-        dayRef: ref.current,
         unavailableDates: [new Date("2021-09-05")],
     }));
     // hover

package/package.json

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

package/utils/get-date-invervals.js

@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getDateIntervals = void 0;
 const dayjs_1 = __importDefault(require("dayjs"));
 function getDateIntervals(dates) {
+    const sortedDates = dates.slice().sort((a, b) => a.getTime() - b.getTime());
     const intervals = [];
-    let currentStart = dates[0];
-    let currentEnd = dates[0];
-    for (let i = 1; i < dates.length; i++) {
-        const currentDate = dates[i];
+    let currentStart = sortedDates[0];
+    let currentEnd = sortedDates[0];
+    for (let i = 1; i < sortedDates.length; i++) {
+        const currentDate = sortedDates[i];
         const nextDate = (0, dayjs_1.default)(currentEnd).add(1, "day").toDate();
         // If the current date matches the expected next date, it's contiguous
         if ((0, dayjs_1.default)(currentDate).isSame(nextDate, "day")) {
@@ -22,7 +23,7 @@ function getDateIntervals(dates) {
             currentEnd = currentDate;
         }
     }
-    if (dates[0]) {
+    if (sortedDates[0]) {
         // Push the last interval
         intervals.push({ start: currentStart, end: currentEnd });
     }

package/utils/types.d.ts

@@ -4,3 +4,13 @@ export interface MonthType {
     month: number;
     date: Date;
 }
+export type DatesConfig = {
+    flag?: string;
+    dates: Date[];
+    isDisabled?: boolean;
+};
+export type Flag = {
+    flag: string;
+    isFirst: boolean;
+    isLast: boolean;
+};