@navikt/ds-react 7.14.0-alpha.1 → 7.14.1

package/cjs/date/hooks/useMonthPicker.d.ts

@@ -1,85 +0,0 @@
-import React from "react";
-import { MonthPickerProps } from "../monthpicker/types";
-import { DateInputProps } from "../parts/DateInput";
-export interface UseMonthPickerOptions extends Pick<MonthPickerProps, "locale" | "fromDate" | "toDate" | "disabled" | "defaultSelected"> {
-    /**
-     * Make Date-selection required
-     */
-    required?: boolean;
-    /**
-     * Callback for month-change
-     */
-    onMonthChange?: (date?: Date) => void;
-    /**
-     * Input-format
-     * @default "MMMM yyyy"
-     */
-    inputFormat?: string;
-    /**
-     * validation-callback
-     */
-    onValidate?: (val: MonthValidationT) => void;
-    /**
-     * Default shown year
-     */
-    defaultYear?: Date;
-    /**
-     * Allows input of with `yy` year format.
-     *
-     * Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
-     * In 2024 this equals to 1944 - 2043
-     * @default true
-     */
-    allowTwoDigitYear?: boolean;
-}
-interface UseMonthPickerValue {
-    /**
-     * Use: <MonthPicker {...monthpickerProps} />
-     */
-    monthpickerProps: MonthPickerProps;
-    /**
-     * Use: <MonthPicker.Input {...inputProps} />
-     */
-    inputProps: Pick<DateInputProps, "onChange" | "onFocus" | "value"> & {
-        /**
-         * @private
-         */
-        setAnchorRef: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;
-    };
-    /**
-     * Currently selected Date
-     * Up to user to validate value and extract month
-     */
-    selectedMonth?: Date;
-    /**
-     * Manually set selected month if needed
-     */
-    setSelected: (date?: Date) => void;
-    /**
-     * Resets all states
-     */
-    reset: () => void;
-}
-export type MonthValidationT = {
-    isDisabled: boolean;
-    isEmpty: boolean;
-    isInvalid: boolean;
-    isValidMonth: boolean;
-    isBefore: boolean;
-    isAfter: boolean;
-};
-/**
- *
- * @see 🏷️ {@link UseMonthPickerOptions}
- * @see 🏷️ {@link UseMonthPickerValue}
- * @see 🏷️ {@link MonthValidationT}
- * @example
- * const { monthpickerProps, inputProps } = useMonthpicker({
- *   fromDate: new Date("Aug 23 2019"),
- *   toDate: new Date("Feb 23 2024"),
- *   onMonthChange: console.log,
- *   onValidate: console.log,
- * });
- */
-export declare const useMonthpicker: (opt?: UseMonthPickerOptions) => UseMonthPickerValue;
-export {};

package/cjs/date/hooks/useMonthPicker.js

@@ -1,174 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMonthpicker = void 0;
-const react_1 = require("react");
-const i18n_hooks_1 = require("../../util/i18n/i18n.hooks");
-const utils_1 = require("../utils");
-const getValidationMessage = (val = {}) => (Object.assign({ isDisabled: false, isEmpty: false, isInvalid: false, isBefore: false, isAfter: false, isValidMonth: true }, val));
-const getIsBefore = (opt) => opt.fromDate &&
-    opt.date &&
-    (opt.fromDate.getFullYear() > opt.date.getFullYear() ||
-        (opt.fromDate.getFullYear() === opt.date.getFullYear() &&
-            opt.fromDate.getMonth() > opt.date.getMonth()));
-const getIsAfter = (opt) => opt.toDate &&
-    opt.date &&
-    (opt.toDate.getFullYear() < opt.date.getFullYear() ||
-        (opt.toDate.getFullYear() === opt.date.getFullYear() &&
-            opt.toDate.getMonth() < opt.date.getMonth()));
-/**
- *
- * @see 🏷️ {@link UseMonthPickerOptions}
- * @see 🏷️ {@link UseMonthPickerValue}
- * @see 🏷️ {@link MonthValidationT}
- * @example
- * const { monthpickerProps, inputProps } = useMonthpicker({
- *   fromDate: new Date("Aug 23 2019"),
- *   toDate: new Date("Feb 23 2024"),
- *   onMonthChange: console.log,
- *   onValidate: console.log,
- * });
- */
-const useMonthpicker = (opt = {}) => {
-    var _a;
-    const { locale: _locale, defaultSelected: _defaultSelected, fromDate, toDate, disabled, required, onMonthChange, inputFormat, onValidate, defaultYear, allowTwoDigitYear = true, } = opt;
-    const [anchorRef, setAnchorRef] = (0, react_1.useState)(null);
-    const [defaultSelected, setDefaultSelected] = (0, react_1.useState)(_defaultSelected);
-    const today = (0, react_1.useMemo)(() => new Date(), []);
-    const localeFromProvider = (0, i18n_hooks_1.useDateLocale)();
-    const locale = _locale ? (0, utils_1.getLocaleFromString)(_locale) : localeFromProvider;
-    // Initialize states
-    const [year, setYear] = (0, react_1.useState)((_a = defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : defaultYear) !== null && _a !== void 0 ? _a : today);
-    const [selectedMonth, setSelectedMonth] = (0, react_1.useState)(defaultSelected);
-    const [open, setOpen] = (0, react_1.useState)(false);
-    const defaultInputValue = defaultSelected
-        ? (0, utils_1.formatDateForInput)(defaultSelected, locale, "month", inputFormat)
-        : "";
-    const [inputValue, setInputValue] = (0, react_1.useState)(defaultInputValue);
-    const handleOpen = (0, react_1.useCallback)((newOpen) => {
-        var _a, _b;
-        setOpen(newOpen);
-        newOpen &&
-            setYear((_b = (_a = selectedMonth !== null && selectedMonth !== void 0 ? selectedMonth : defaultSelected) !== null && _a !== void 0 ? _a : defaultYear) !== null && _b !== void 0 ? _b : today);
-    }, [defaultSelected, defaultYear, selectedMonth, today]);
-    const updateMonth = (date) => {
-        onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(date);
-        setSelectedMonth(date);
-    };
-    const updateValidation = (val = {}) => onValidate === null || onValidate === void 0 ? void 0 : onValidate(getValidationMessage(val));
-    const reset = () => {
-        var _a;
-        updateMonth(defaultSelected);
-        setYear((_a = defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : defaultYear) !== null && _a !== void 0 ? _a : today);
-        setInputValue(defaultInputValue !== null && defaultInputValue !== void 0 ? defaultInputValue : "");
-        setDefaultSelected(_defaultSelected);
-    };
-    const setSelected = (date) => {
-        var _a;
-        updateMonth(date);
-        setYear((_a = date !== null && date !== void 0 ? date : defaultYear) !== null && _a !== void 0 ? _a : today);
-        setInputValue(date ? (0, utils_1.formatDateForInput)(date, locale, "month", inputFormat) : "");
-    };
-    const handleFocus = (e) => {
-        var _a;
-        if (e.target.readOnly) {
-            return;
-        }
-        const day = (0, utils_1.parseDate)(e.target.value, today, locale, "month", allowTwoDigitYear);
-        const isBefore = getIsBefore({ fromDate, date: day });
-        const isAfter = getIsAfter({ toDate, date: day });
-        if ((0, utils_1.isValidDate)(day)) {
-            !isBefore && !isAfter && setYear(day);
-            setInputValue((0, utils_1.formatDateForInput)(day, locale, "month", inputFormat));
-        }
-        else {
-            setYear((_a = defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : defaultYear) !== null && _a !== void 0 ? _a : today);
-        }
-    };
-    const handleBlur = (e) => {
-        const day = (0, utils_1.parseDate)(e.target.value, today, locale, "month", allowTwoDigitYear);
-        (0, utils_1.isValidDate)(day) &&
-            setInputValue((0, utils_1.formatDateForInput)(day, locale, "month", inputFormat));
-    };
-    /* Only allow de-selecting if not required */
-    const handleMonthClick = (month) => {
-        if (!month && required) {
-            return;
-        }
-        if (month) {
-            handleOpen(false);
-            setYear(month);
-            anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.focus();
-        }
-        if (!month) {
-            updateMonth(undefined);
-            updateValidation({ isValidMonth: false, isEmpty: true });
-            setInputValue("");
-            setYear(defaultYear !== null && defaultYear !== void 0 ? defaultYear : today);
-            return;
-        }
-        updateMonth(month);
-        updateValidation();
-        setInputValue(month ? (0, utils_1.formatDateForInput)(month, locale, "month", inputFormat) : "");
-    };
-    // When changing the input field, save its value in state and check if the
-    // string is a valid date. If it is a valid day, set it as selected and update
-    // the calendar’s month.
-    const handleChange = (e) => {
-        setInputValue(e.target.value);
-        const month = (0, utils_1.parseDate)(e.target.value, today, locale, "month", allowTwoDigitYear);
-        const isBefore = getIsBefore({ fromDate, date: month });
-        const isAfter = getIsAfter({ toDate, date: month });
-        if (!(0, utils_1.isValidDate)(month) || (disabled && (0, utils_1.isMatch)(month, disabled))) {
-            updateMonth(undefined);
-            updateValidation({
-                isInvalid: (0, utils_1.isValidDate)(month),
-                isDisabled: disabled && (0, utils_1.isMatch)(month, disabled),
-                isValidMonth: false,
-                isEmpty: !e.target.value,
-                isBefore: isBefore !== null && isBefore !== void 0 ? isBefore : false,
-                isAfter: isAfter !== null && isAfter !== void 0 ? isAfter : false,
-            });
-            return;
-        }
-        if (isAfter ||
-            isBefore ||
-            (fromDate && toDate && !(0, utils_1.isMatch)(month, [{ from: fromDate, to: toDate }]))) {
-            updateMonth(undefined);
-            updateValidation({
-                isValidMonth: false,
-                isBefore: isBefore !== null && isBefore !== void 0 ? isBefore : false,
-                isAfter: isAfter !== null && isAfter !== void 0 ? isAfter : false,
-            });
-            return;
-        }
-        updateMonth(month);
-        updateValidation();
-        setYear(month);
-    };
-    const monthpickerProps = {
-        year,
-        onYearChange: (y) => setYear(y !== null && y !== void 0 ? y : today),
-        onMonthSelect: handleMonthClick,
-        selected: selectedMonth,
-        locale: _locale,
-        fromDate,
-        toDate,
-        open,
-        onOpenToggle: () => handleOpen(!open),
-        onClose: () => {
-            handleOpen(false);
-            anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.focus();
-        },
-        disabled,
-    };
-    const inputProps = {
-        onChange: handleChange,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        value: inputValue,
-        setAnchorRef,
-    };
-    return { monthpickerProps, inputProps, reset, selectedMonth, setSelected };
-};
-exports.useMonthpicker = useMonthpicker;
-//# sourceMappingURL=useMonthPicker.js.map

package/cjs/date/hooks/useMonthPicker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMonthPicker.js","sourceRoot":"","sources":["../../../src/date/hooks/useMonthPicker.tsx"],"names":[],"mappings":"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"}

package/cjs/date/hooks/useRangeDatepicker.d.ts

@@ -1,76 +0,0 @@
-import React from "react";
-import { DateRange } from "react-day-picker";
-import { DatePickerProps } from "../datepicker/DatePicker";
-import { DateInputProps } from "../parts/DateInput";
-import { DateValidationT, UseDatepickerOptions } from "./useDatepicker";
-export type RangeValidationT = {
-    from: DateValidationT;
-    to: DateValidationT & {
-        isBeforeFrom?: boolean;
-    };
-};
-interface UseRangeDatepickerOptions extends Omit<UseDatepickerOptions, "defaultSelected" | "onDateChange" | "onValidate"> {
-    /**
-     * The initially selected DateRange
-     */
-    defaultSelected?: DateRange;
-    /**
-     * Callback for changed state
-     */
-    onRangeChange?: (val?: DateRange) => void;
-    /**
-     * validation-callback
-     */
-    onValidate?: (val: RangeValidationT) => void;
-}
-interface UseRangeDatepickerValue {
-    /**
-     * Use: <DatePicker {...datepickerProps}/>
-     */
-    datepickerProps: DatePickerProps;
-    /**
-     * Use: <DatePicker.Input label="from" {...fromInputProps}/>
-     */
-    fromInputProps: Pick<DateInputProps, "onChange" | "onFocus" | "onBlur" | "value"> & {
-        /**
-         * @private
-         */
-        setAnchorRef: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;
-    };
-    /**
-     * Use: <DatePicker.Input label="to" {...toInputProps}/>
-     */
-    toInputProps: Pick<DateInputProps, "onChange" | "onFocus" | "onBlur" | "value"> & {
-        /**
-         * @private
-         */
-        setAnchorRef?: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;
-    };
-    /**
-     * Resets all states (callback)
-     */
-    reset: () => void;
-    /**
-     * Currently selected DateRange
-     * Up to user to validate values
-     */
-    selectedRange?: DateRange;
-    /**
-     * Manually override currently selected day
-     */
-    setSelected: (date?: DateRange) => void;
-}
-/**
- *
- * @see 🏷️ {@link UseRangeDatepickerOptions}
- * @see 🏷️ {@link UseRangeDatepickerValue}
- * @see 🏷️ {@link RangeValidationT}
- * @example
- * const { datepickerProps, fromInputProps, toInputProps } = useRangeDatepicker({
- *   fromDate: new Date("Aug 23 2019"),
- *   onRangeChange: console.log,
- *   onValidate: console.log,
- * });
- */
-export declare const useRangeDatepicker: (opt?: UseRangeDatepickerOptions) => UseRangeDatepickerValue;
-export {};

package/cjs/date/hooks/useRangeDatepicker.js

@@ -1,319 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRangeDatepicker = void 0;
-const date_fns_1 = require("date-fns");
-const react_1 = require("react");
-const react_day_picker_1 = require("react-day-picker");
-const i18n_hooks_1 = require("../../util/i18n/i18n.hooks");
-const utils_1 = require("../utils");
-const getValidationMessage = (from = {}, to = {}) => ({
-    from: Object.assign({ isDisabled: false, isWeekend: false, isEmpty: false, isInvalid: false, isBefore: false, isAfter: false, isValidDate: true }, from),
-    to: Object.assign({ isDisabled: false, isWeekend: false, isEmpty: false, isInvalid: false, isBefore: false, isAfter: false, isBeforeFrom: false, isValidDate: true }, to),
-});
-const RANGE = {
-    FROM: "FROM",
-    TO: "TO",
-};
-const fromValidation = (day, opt) => {
-    const isBefore = (opt === null || opt === void 0 ? void 0 : opt.fromDate) && day && (0, date_fns_1.differenceInCalendarDays)(opt === null || opt === void 0 ? void 0 : opt.fromDate, day) > 0;
-    const isAfter = (opt === null || opt === void 0 ? void 0 : opt.toDate) && day && (0, date_fns_1.differenceInCalendarDays)(day, opt === null || opt === void 0 ? void 0 : opt.toDate) > 0;
-    if ((0, utils_1.isValidDate)(day) &&
-        !((opt === null || opt === void 0 ? void 0 : opt.disableWeekends) && (0, date_fns_1.isWeekend)(day)) &&
-        !((opt === null || opt === void 0 ? void 0 : opt.disabled) && (0, react_day_picker_1.isMatch)(day, opt.disabled))) {
-        return {
-            isValidDate: false,
-            isInvalid: !(0, utils_1.isValidDate)(day),
-            isWeekend: (opt === null || opt === void 0 ? void 0 : opt.disableWeekends) && (0, date_fns_1.isWeekend)(day),
-            isDisabled: (opt === null || opt === void 0 ? void 0 : opt.disabled) && (0, react_day_picker_1.isMatch)(day, opt.disabled),
-            isBefore,
-            isAfter,
-        };
-    }
-    if (isBefore || isAfter) {
-        return {
-            isValidDate: false,
-            isBefore,
-            isAfter,
-        };
-    }
-};
-const toValidation = (day, from, opt) => {
-    var _a;
-    const isBefore = (opt === null || opt === void 0 ? void 0 : opt.fromDate) && day && (0, date_fns_1.differenceInCalendarDays)(opt === null || opt === void 0 ? void 0 : opt.fromDate, day) > 0;
-    const isAfter = (opt === null || opt === void 0 ? void 0 : opt.toDate) && day && (0, date_fns_1.differenceInCalendarDays)(day, opt === null || opt === void 0 ? void 0 : opt.toDate) > 0;
-    const isBeforeFrom = (_a = (from && (0, date_fns_1.differenceInCalendarDays)(from, day) > 0)) !== null && _a !== void 0 ? _a : false;
-    if ((0, utils_1.isValidDate)(day) &&
-        !((opt === null || opt === void 0 ? void 0 : opt.disableWeekends) && (0, date_fns_1.isWeekend)(day)) &&
-        !((opt === null || opt === void 0 ? void 0 : opt.disabled) && (0, react_day_picker_1.isMatch)(day, opt.disabled))) {
-        return {
-            isValidDate: false,
-            isInvalid: !(0, utils_1.isValidDate)(day),
-            isWeekend: (opt === null || opt === void 0 ? void 0 : opt.disableWeekends) && (0, date_fns_1.isWeekend)(day),
-            isDisabled: (opt === null || opt === void 0 ? void 0 : opt.disabled) && (0, react_day_picker_1.isMatch)(day, opt.disabled),
-            isBefore,
-            isAfter,
-            isBeforeFrom,
-        };
-    }
-    if (isBefore || isAfter || isBeforeFrom) {
-        return {
-            isValidDate: false,
-            isBefore,
-            isAfter,
-            isBeforeFrom,
-        };
-    }
-};
-const initialValidation = (range, opt) => {
-    if (!range || !(range === null || range === void 0 ? void 0 : range.from)) {
-        return getValidationMessage({ isEmpty: true, isValidDate: false }, { isEmpty: true, isValidDate: false });
-    }
-    const fromVal = fromValidation(range.from, opt);
-    const toVal = range.to
-        ? toValidation(range.to, range.from, opt)
-        : { isEmpty: true, isValidDate: false };
-    return getValidationMessage(Object.assign({}, fromVal), Object.assign({}, toVal));
-};
-/**
- *
- * @see 🏷️ {@link UseRangeDatepickerOptions}
- * @see 🏷️ {@link UseRangeDatepickerValue}
- * @see 🏷️ {@link RangeValidationT}
- * @example
- * const { datepickerProps, fromInputProps, toInputProps } = useRangeDatepicker({
- *   fromDate: new Date("Aug 23 2019"),
- *   onRangeChange: console.log,
- *   onValidate: console.log,
- * });
- */
-const useRangeDatepicker = (opt = {}) => {
-    const { locale: _locale, defaultSelected: _defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, onRangeChange, inputFormat, onValidate, defaultMonth, allowTwoDigitYear = true, } = opt;
-    const [anchorRef, setAnchorRef] = (0, react_1.useState)(null);
-    const localeFromProvider = (0, i18n_hooks_1.useDateLocale)();
-    const locale = _locale ? (0, utils_1.getLocaleFromString)(_locale) : localeFromProvider;
-    const [defaultSelected, setDefaultSelected] = (0, react_1.useState)(_defaultSelected);
-    // Initialize states
-    const [month, setMonth] = (0, react_1.useState)(defaultSelected ? defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.from : defaultMonth !== null && defaultMonth !== void 0 ? defaultMonth : today);
-    const [selectedRange, setSelectedRange] = (0, react_1.useState)(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : { from: undefined, to: undefined });
-    const [fromInputValue, setFromInputValue] = (0, react_1.useState)((defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.from)
-        ? (0, utils_1.formatDateForInput)(defaultSelected.from, locale, "date", inputFormat)
-        : "");
-    const [toInputValue, setToInputValue] = (0, react_1.useState)((defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.to)
-        ? (0, utils_1.formatDateForInput)(defaultSelected.to, locale, "date", inputFormat)
-        : "");
-    const [validation, setValidation] = (0, react_1.useState)(initialValidation(selectedRange, opt));
-    const [open, setOpen] = (0, react_1.useState)(false);
-    const updateRange = (range) => {
-        onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange(range);
-        setSelectedRange(range);
-    };
-    const updateValidation = (from = {}, to = {}) => {
-        const msg = getValidationMessage(from, to);
-        setValidation(msg);
-        onValidate === null || onValidate === void 0 ? void 0 : onValidate(msg);
-    };
-    const reset = () => {
-        updateRange(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : { from: undefined, to: undefined });
-        setMonth(defaultSelected ? defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.from : defaultMonth !== null && defaultMonth !== void 0 ? defaultMonth : today);
-        setValidation(initialValidation(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : { from: undefined, to: undefined }, opt));
-        setFromInputValue((defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.from)
-            ? (0, utils_1.formatDateForInput)(defaultSelected.from, locale, "date", inputFormat)
-            : "");
-        setToInputValue((defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.to)
-            ? (0, utils_1.formatDateForInput)(defaultSelected.to, locale, "date", inputFormat)
-            : "");
-        setDefaultSelected(_defaultSelected);
-    };
-    const setSelected = (range) => {
-        updateRange(range);
-        setFromInputValue((range === null || range === void 0 ? void 0 : range.from)
-            ? (0, utils_1.formatDateForInput)(range.from, locale, "date", inputFormat)
-            : "");
-        setToInputValue((range === null || range === void 0 ? void 0 : range.to)
-            ? (0, utils_1.formatDateForInput)(range === null || range === void 0 ? void 0 : range.to, locale, "date", inputFormat)
-            : "");
-        setValidation(initialValidation(range, opt));
-    };
-    const handleFocus = (e, src) => {
-        if (e.target.readOnly) {
-            return;
-        }
-        const day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
-        if ((0, utils_1.isValidDate)(day)) {
-            src === RANGE.FROM
-                ? setFromInputValue((0, utils_1.formatDateForInput)(day, locale, "date", inputFormat))
-                : setToInputValue((0, utils_1.formatDateForInput)(day, locale, "date", inputFormat));
-            const isBefore = fromDate && day && (0, date_fns_1.differenceInCalendarDays)(fromDate, day) > 0;
-            const isAfter = toDate && day && (0, date_fns_1.differenceInCalendarDays)(day, toDate) > 0;
-            !isBefore && !isAfter && setMonth(day);
-        }
-    };
-    const handleBlur = (e, src) => {
-        const day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
-        if (!(0, utils_1.isValidDate)(day)) {
-            return;
-        }
-        if (src === RANGE.FROM) {
-            setFromInputValue((0, utils_1.formatDateForInput)(day, locale, "date", inputFormat));
-        }
-        else if (src === RANGE.TO) {
-            setToInputValue((0, utils_1.formatDateForInput)(day, locale, "date", inputFormat));
-        }
-    };
-    const validateDay = (day) => {
-        return ((0, utils_1.isValidDate)(day) &&
-            !(disableWeekends && (0, date_fns_1.isWeekend)(day)) &&
-            !(disabled && (0, react_day_picker_1.isMatch)(day, disabled)));
-    };
-    const handleSelect = (range) => {
-        if ((range === null || range === void 0 ? void 0 : range.from) && (range === null || range === void 0 ? void 0 : range.to)) {
-            setOpen(false);
-            anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.focus();
-        }
-        const prevToRange = !(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) ? selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to : range === null || range === void 0 ? void 0 : range.to;
-        const resetTo = (0, date_fns_1.isBefore)(prevToRange, range === null || range === void 0 ? void 0 : range.from);
-        (range === null || range === void 0 ? void 0 : range.from)
-            ? setFromInputValue((0, utils_1.formatDateForInput)(range === null || range === void 0 ? void 0 : range.from, locale, "date", inputFormat))
-            : setFromInputValue("");
-        prevToRange && !resetTo
-            ? setToInputValue((0, utils_1.formatDateForInput)(prevToRange, locale, "date", inputFormat))
-            : setToInputValue("");
-        updateRange({ from: range === null || range === void 0 ? void 0 : range.from, to: resetTo ? undefined : prevToRange });
-        updateValidation({ isValidDate: !!(range === null || range === void 0 ? void 0 : range.from), isEmpty: !(range === null || range === void 0 ? void 0 : range.from) }, { isValidDate: !!(range === null || range === void 0 ? void 0 : range.to), isEmpty: !prevToRange || resetTo });
-    };
-    const fromChange = (val = "", day, isBefore = false, isAfter = false) => {
-        setFromInputValue(val);
-        if (!validateDay(day)) {
-            updateRange(Object.assign(Object.assign({}, selectedRange), { from: undefined }));
-            updateValidation({
-                isEmpty: !val,
-                isValidDate: false,
-                isInvalid: !(0, utils_1.isValidDate)(day),
-                isWeekend: disableWeekends && (0, date_fns_1.isWeekend)(day),
-                isDisabled: disabled && (0, react_day_picker_1.isMatch)(day, disabled),
-                isBefore,
-                isAfter,
-            }, validation.to);
-            return;
-        }
-        if (isBefore || isAfter) {
-            updateRange(Object.assign(Object.assign({}, selectedRange), { from: undefined }));
-            updateValidation({
-                isValidDate: false,
-                isBefore,
-                isAfter,
-            }, validation.to);
-            return;
-        }
-        if ((selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) &&
-            (0, date_fns_1.differenceInCalendarDays)(day, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) > 0) {
-            updateRange({ to: day, from: day });
-            setToInputValue((0, utils_1.formatDateForInput)(day, locale, "date", inputFormat));
-            setMonth(day);
-            updateValidation();
-            return;
-        }
-        if (toInputValue && !(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to)) {
-            const toDay = (0, utils_1.parseDate)(toInputValue, today, locale, "date", allowTwoDigitYear);
-            if (validateDay(toDay)) {
-                updateRange({ from: day, to: toDay });
-                setMonth(day);
-                updateValidation();
-                return;
-            }
-        }
-        updateRange(Object.assign(Object.assign({}, selectedRange), { from: day }));
-        updateValidation({}, validation.to);
-        setMonth(day);
-    };
-    const toChange = (val = "", day, isBefore = false, isAfter = false) => {
-        setToInputValue(val);
-        if (!validateDay(day)) {
-            updateRange({ from: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from, to: undefined });
-            updateValidation(validation.from, {
-                isEmpty: !val,
-                isValidDate: false,
-                isInvalid: !(0, utils_1.isValidDate)(day),
-                isWeekend: disableWeekends && (0, date_fns_1.isWeekend)(day),
-                isDisabled: disabled && (0, react_day_picker_1.isMatch)(day, disabled),
-                isBefore,
-                isAfter,
-            });
-            return;
-        }
-        if (isBefore || isAfter) {
-            updateRange({ from: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from, to: undefined });
-            updateValidation(validation.from, {
-                isValidDate: false,
-                isBefore,
-                isAfter,
-            });
-            return;
-        }
-        /* If to-value < from-value */
-        if ((selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) &&
-            (0, date_fns_1.differenceInCalendarDays)(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from, day) > 0) {
-            updateRange({ from: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from, to: undefined });
-            updateValidation(validation.from, {
-                isValidDate: false,
-                isBeforeFrom: true,
-            });
-            return;
-        }
-        updateRange({ from: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from, to: day });
-        updateValidation(validation.from, {});
-        setMonth(day);
-    };
-    /* live-update datepicker based on changes in inputfields */
-    const handleChange = (e, src) => {
-        const day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
-        const isBefore = fromDate && (0, date_fns_1.differenceInCalendarDays)(fromDate, day) > 0;
-        const isAfter = toDate && (0, date_fns_1.differenceInCalendarDays)(day, toDate) > 0;
-        return src === RANGE.FROM
-            ? fromChange(e.target.value, day, isBefore, isAfter)
-            : toChange(e.target.value, day, isBefore, isAfter);
-    };
-    const datepickerProps = {
-        month,
-        onMonthChange: setMonth,
-        onSelect: handleSelect,
-        selected: selectedRange,
-        locale: _locale,
-        fromDate,
-        toDate,
-        today,
-        mode: "range",
-        open,
-        onOpenToggle: () => setOpen((x) => !x),
-        onClose: () => {
-            setOpen(false);
-            anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.focus();
-        },
-        disabled,
-        disableWeekends,
-    };
-    const fromInputProps = {
-        onChange: (e) => handleChange(e, RANGE.FROM),
-        onFocus: (e) => handleFocus(e, RANGE.FROM),
-        onBlur: (e) => handleBlur(e, RANGE.FROM),
-        value: fromInputValue,
-        setAnchorRef,
-    };
-    const toInputProps = {
-        onChange: (e) => handleChange(e, RANGE.TO),
-        onFocus: (e) => handleFocus(e, RANGE.TO),
-        onBlur: (e) => handleBlur(e, RANGE.TO),
-        value: toInputValue,
-        setAnchorRef,
-    };
-    return {
-        datepickerProps,
-        fromInputProps,
-        toInputProps,
-        reset,
-        selectedRange,
-        setSelected,
-    };
-};
-exports.useRangeDatepicker = useRangeDatepicker;
-//# sourceMappingURL=useRangeDatepicker.js.map