@navikt/ds-react 1.3.20 → 1.3.22

package/_docs.json

@@ -8673,6 +8673,25 @@
           "name": "boolean"
         }
       },
+      "onDateChange": {
+        "defaultValue": null,
+        "description": "Callback for changed state",
+        "name": "onDateChange",
+        "parent": {
+          "fileName": "src/date/hooks/useDatepicker.tsx",
+          "name": "UseDatepickerOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "src/date/hooks/useDatepicker.tsx",
+            "name": "UseDatepickerOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "((val?: Date) => void)"
+        }
+      },
       "locale": {
         "defaultValue": {
           "value": "\"nb\" (norsk bokmål)"
@@ -8797,6 +8816,25 @@
           "name": "boolean"
         }
       },
+      "onMonthChange": {
+        "defaultValue": null,
+        "description": "Callback for month-change",
+        "name": "onMonthChange",
+        "parent": {
+          "fileName": "src/date/hooks/useMonthPicker.tsx",
+          "name": "UseMonthPickerOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "src/date/hooks/useMonthPicker.tsx",
+            "name": "UseMonthPickerOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "((date?: Date) => void)"
+        }
+      },
       "locale": {
         "defaultValue": {
           "value": "\"nb\" (norsk bokmål)"
@@ -8919,6 +8957,25 @@
           "name": "DateRange"
         }
       },
+      "onRangeChange": {
+        "defaultValue": null,
+        "description": "Callback for changed state",
+        "name": "onRangeChange",
+        "parent": {
+          "fileName": "src/date/hooks/useRangeDatepicker.tsx",
+          "name": "UseRangeDatepickerOptions"
+        },
+        "declarations": [
+          {
+            "fileName": "src/date/hooks/useRangeDatepicker.tsx",
+            "name": "UseRangeDatepickerOptions"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "((val?: DateRange) => void)"
+        }
+      },
       "locale": {
         "defaultValue": {
           "value": "\"nb\" (norsk bokmål)"

package/cjs/button/Button.js

@@ -62,6 +62,7 @@ exports.Button = (0, react_1.forwardRef)((_a, ref) => {
     return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: mergedRef, className: (0, clsx_1.default)(className, "navds-button", `navds-button--${variant}`, `navds-button--${size}`, {
             "navds-button--loading": widthOverride,
             "navds-button--icon-only": !!icon && !children,
+            "navds-button--disabled": disabled !== null && disabled !== void 0 ? disabled : widthOverride,
         }), style: Object.assign(Object.assign({}, style), { width: widthOverride }), disabled: (disabled !== null && disabled !== void 0 ? disabled : widthOverride) ? true : undefined }), widthOverride ? (react_1.default.createElement(__1.Loader, { size: size })) : (react_1.default.createElement(react_1.default.Fragment, null,
         icon && iconPosition === "left" && (react_1.default.createElement("span", { className: "navds-button__icon" }, icon)),
         children && (react_1.default.createElement(__1.Label, { as: "span", size: size === "medium" ? "medium" : "small", "aria-live": "polite" }, children)),

package/cjs/date/datepicker/DatePicker.js

@@ -39,7 +39,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePicker = void 0;
 const clsx_1 = __importDefault(require("clsx"));
-const date_fns_1 = require("date-fns");
+const isWeekend_1 = __importDefault(require("date-fns/isWeekend"));
 const react_1 = __importStar(require("react"));
 const react_day_picker_1 = require("react-day-picker");
 const __1 = require("../..");
@@ -102,10 +102,10 @@ exports.DatePicker = (0, react_1.forwardRef)((_a, ref) => {
                     }, className: (0, clsx_1.default)("navds-date", className), classNames: {
                         vhidden: "navds-sr-only",
                     }, disabled: (day) => {
-                        return ((disableWeekends && (0, date_fns_1.isWeekend)(day)) ||
+                        return ((disableWeekends && (0, isWeekend_1.default)(day)) ||
                             (0, react_day_picker_1.isMatch)(day, disabled));
                     }, weekStartsOn: 1, initialFocus: false, labels: utils_1.labels, modifiers: {
-                        weekend: (day) => disableWeekends && (0, date_fns_1.isWeekend)(day),
+                        weekend: (day) => disableWeekends && (0, isWeekend_1.default)(day),
                     }, modifiersClassNames: {
                         weekend: "rdp-day__weekend",
                     }, showWeekNumber: showWeekNumber }, (0, __1.omit)(rest, ["onSelect"]))))))));

package/cjs/date/datepicker/DatePickerStandalone.js

@@ -39,7 +39,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePickerStandalone = void 0;
 const clsx_1 = __importDefault(require("clsx"));
-const date_fns_1 = require("date-fns");
+const isWeekend_1 = __importDefault(require("date-fns/isWeekend"));
 const react_1 = __importStar(require("react"));
 const react_day_picker_1 = require("react-day-picker");
 const __1 = require("../..");
@@ -73,9 +73,9 @@ exports.DatePickerStandalone = (0, react_1.forwardRef)((_a, ref) => {
         react_1.default.createElement(react_day_picker_1.DayPicker, Object.assign({ locale: (0, utils_1.getLocaleFromString)(locale) }, overrideProps, { selected: selected !== null && selected !== void 0 ? selected : selectedDates, components: {
                 Caption: dropdownCaption ? caption_1.DropdownCaption : caption_1.Caption,
             }, className: "navds-date", classNames: { vhidden: "navds-sr-only" }, disabled: (day) => {
-                return ((disableWeekends && (0, date_fns_1.isWeekend)(day)) || (0, react_day_picker_1.isMatch)(day, disabled));
+                return ((disableWeekends && (0, isWeekend_1.default)(day)) || (0, react_day_picker_1.isMatch)(day, disabled));
             }, weekStartsOn: 1, initialFocus: false, labels: utils_1.labels, modifiers: {
-                weekend: (day) => disableWeekends && (0, date_fns_1.isWeekend)(day),
+                weekend: (day) => disableWeekends && (0, isWeekend_1.default)(day),
             }, modifiersClassNames: {
                 weekend: "rdp-day__weekend",
             }, showWeekNumber: showWeekNumber }, (0, __1.omit)(rest, ["onSelect"])))));

package/cjs/date/datepicker/DayButton.js

@@ -22,16 +22,19 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DayButton = void 0;
-const date_fns_1 = require("date-fns");
+const format_1 = __importDefault(require("date-fns/format"));
 const react_1 = __importStar(require("react"));
 const react_day_picker_1 = require("react-day-picker");
 const DayButton = (props) => {
     const buttonRef = (0, react_1.useRef)(null);
     const dayRender = (0, react_day_picker_1.useDayRender)(props.date, props.displayMonth, buttonRef);
     const { locale } = (0, react_day_picker_1.useDayPicker)();
-    const dateTime = (0, date_fns_1.format)(props.date, "cccc d", { locale });
+    const dateTime = (0, format_1.default)(props.date, "cccc d", { locale });
     if (dayRender.isHidden) {
         return react_1.default.createElement(react_1.default.Fragment, null);
     }

package/cjs/date/datepicker/caption/DropdownCaption.js

@@ -5,7 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownCaption = void 0;
 const ds_icons_1 = require("@navikt/ds-icons");
-const date_fns_1 = require("date-fns");
+const setMonth_1 = __importDefault(require("date-fns/setMonth"));
+const setYear_1 = __importDefault(require("date-fns/setYear"));
+const startOfMonth_1 = __importDefault(require("date-fns/startOfMonth"));
 const react_1 = __importDefault(require("react"));
 const react_day_picker_1 = require("react-day-picker");
 const __1 = require("../../..");
@@ -18,8 +20,8 @@ const DropdownCaption = ({ displayMonth, id }) => {
         console.warn("Using dropdownCaption required fromDate and toDate");
         return null;
     }
-    const handleYearChange = (e) => goToMonth((0, date_fns_1.setYear)((0, date_fns_1.startOfMonth)(displayMonth), Number(e.target.value)));
-    const handleMonthChange = (e) => goToMonth((0, date_fns_1.setMonth)((0, date_fns_1.startOfMonth)(displayMonth), Number(e.target.value)));
+    const handleYearChange = (e) => goToMonth((0, setYear_1.default)((0, startOfMonth_1.default)(displayMonth), Number(e.target.value)));
+    const handleMonthChange = (e) => goToMonth((0, setMonth_1.default)((0, startOfMonth_1.default)(displayMonth), Number(e.target.value)));
     const years = (0, get_dates_1.getYears)(fromDate, toDate);
     const months = (0, get_dates_1.getMonths)(fromDate, toDate, displayMonth);
     const previousLabel = labelPrevious(previousMonth, { locale });

package/cjs/date/hooks/useDatepicker.js

@@ -1,15 +1,20 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDatepicker = void 0;
-const date_fns_1 = require("date-fns");
+const differenceInCalendarDays_1 = __importDefault(require("date-fns/differenceInCalendarDays"));
+const isWeekend_1 = __importDefault(require("date-fns/isWeekend"));
 const react_1 = require("react");
 const react_day_picker_1 = require("react-day-picker");
 const utils_1 = require("../utils");
 const useDatepicker = (opt = {}) => {
-    const { locale: _locale = "nb", required, defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, } = opt;
+    const { locale: _locale = "nb", required, defaultSelected: _defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, onDateChange, } = opt;
     const locale = (0, utils_1.getLocaleFromString)(_locale);
     const inputRef = (0, react_1.useRef)(null);
     const daypickerRef = (0, react_1.useRef)(null);
+    const [defaultSelected, setDefaultSelected] = (0, react_1.useState)(_defaultSelected);
     // Initialize states
     const [month, setMonth] = (0, react_1.useState)(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : today);
     const [selectedDay, setSelectedDay] = (0, react_1.useState)(defaultSelected);
@@ -18,6 +23,10 @@ const useDatepicker = (opt = {}) => {
         ? (0, utils_1.formatDateForInput)(defaultSelected, locale, "date")
         : "";
     const [inputValue, setInputValue] = (0, react_1.useState)(defaultInputValue);
+    const getSelectedDate = (date) => {
+        onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(date);
+        return date;
+    };
     const handleFocusIn = (0, react_1.useCallback)((e) => {
         var _a;
         ![
@@ -38,21 +47,18 @@ const useDatepicker = (opt = {}) => {
         };
     }, [handleFocusIn]);
     const reset = () => {
-        setSelectedDay(defaultSelected);
+        setSelectedDay(getSelectedDate(defaultSelected));
         setMonth(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : today);
         setInputValue(defaultInputValue !== null && defaultInputValue !== void 0 ? defaultInputValue : "");
+        setDefaultSelected(_defaultSelected);
     };
     const setSelected = (date) => {
-        setSelectedDay(date);
+        setSelectedDay(getSelectedDate(date));
         setMonth(date !== null && date !== void 0 ? date : today);
         setInputValue(date ? (0, utils_1.formatDateForInput)(date, locale, "date") : "");
     };
     const handleFocus = (e) => {
         !open && setOpen(true);
-        if (!e.target.value) {
-            reset();
-            return;
-        }
         let day = (0, utils_1.parseDate)(e.target.value, today, locale, "date");
         if ((0, utils_1.isValidDate)(day)) {
             setMonth(day);
@@ -70,11 +76,11 @@ const useDatepicker = (opt = {}) => {
             inputRef.current && inputRef.current.focus();
         }
         if (!required && selected) {
-            setSelectedDay(undefined);
+            setSelectedDay(getSelectedDate(undefined));
             setInputValue("");
             return;
         }
-        setSelectedDay(day);
+        setSelectedDay(getSelectedDate(day));
         setMonth(day);
         setInputValue(day ? (0, utils_1.formatDateForInput)(day, locale, "date") : "");
     };
@@ -86,17 +92,17 @@ const useDatepicker = (opt = {}) => {
         const day = (0, utils_1.parseDate)(e.target.value, today, locale, "date");
         if (!(0, utils_1.isValidDate)(day) ||
             (disabled &&
-                ((disableWeekends && (0, date_fns_1.isWeekend)(day)) || (0, react_day_picker_1.isMatch)(day, disabled)))) {
-            setSelectedDay(undefined);
+                ((disableWeekends && (0, isWeekend_1.default)(day)) || (0, react_day_picker_1.isMatch)(day, disabled)))) {
+            setSelectedDay(getSelectedDate(undefined));
             return;
         }
-        const isBefore = fromDate && (0, date_fns_1.differenceInCalendarDays)(fromDate, day) > 0;
-        const isAfter = toDate && (0, date_fns_1.differenceInCalendarDays)(day, toDate) > 0;
+        const isBefore = fromDate && (0, differenceInCalendarDays_1.default)(fromDate, day) > 0;
+        const isAfter = toDate && (0, differenceInCalendarDays_1.default)(day, toDate) > 0;
         if (isBefore || isAfter) {
-            setSelectedDay(undefined);
+            setSelectedDay(getSelectedDate(undefined));
             return;
         }
-        setSelectedDay(day);
+        setSelectedDay(getSelectedDate(day));
         setMonth(day);
     };
     const handleClose = (0, react_1.useCallback)(() => {

package/cjs/date/hooks/useMonthPicker.js

@@ -4,7 +4,8 @@ exports.useMonthpicker = void 0;
 const react_1 = require("react");
 const utils_1 = require("../utils");
 const useMonthpicker = (opt = {}) => {
-    const { locale: _locale = "nb", defaultSelected, fromDate, toDate, disabled, required, } = opt;
+    const { locale: _locale = "nb", defaultSelected: _defaultSelected, fromDate, toDate, disabled, required, onMonthChange, } = opt;
+    const [defaultSelected, setDefaultSelected] = (0, react_1.useState)(_defaultSelected);
     const today = new Date();
     const locale = (0, utils_1.getLocaleFromString)(_locale);
     const inputRef = (0, react_1.useRef)(null);
@@ -17,6 +18,10 @@ const useMonthpicker = (opt = {}) => {
         ? (0, utils_1.formatDateForInput)(defaultSelected, locale, "month")
         : "";
     const [inputValue, setInputValue] = (0, react_1.useState)(defaultInputValue);
+    const getMonth = (date) => {
+        onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(date);
+        return date;
+    };
     const handleFocusIn = (0, react_1.useCallback)((e) => {
         var _a;
         return ![
@@ -37,21 +42,18 @@ const useMonthpicker = (opt = {}) => {
         };
     }, [handleFocusIn]);
     const reset = () => {
-        setSelectedMonth(defaultSelected);
+        setSelectedMonth(getMonth(defaultSelected));
         setYear(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : today);
         setInputValue(defaultInputValue !== null && defaultInputValue !== void 0 ? defaultInputValue : "");
+        setDefaultSelected(_defaultSelected);
     };
     const setSelected = (date) => {
-        setSelectedMonth(date);
+        setSelectedMonth(getMonth(date));
         setYear(date !== null && date !== void 0 ? date : today);
         setInputValue(date ? (0, utils_1.formatDateForInput)(date, locale, "month") : "");
     };
     const handleFocus = (e) => {
         !open && setOpen(true);
-        if (!e.target.value) {
-            reset();
-            return;
-        }
         let day = (0, utils_1.parseDate)(e.target.value, today, locale, "month");
         if ((0, utils_1.isValidDate)(day)) {
             setYear(day);
@@ -69,11 +71,11 @@ const useMonthpicker = (opt = {}) => {
             inputRef.current && inputRef.current.focus();
         }
         if (!required && !month) {
-            setSelectedMonth(undefined);
+            setSelectedMonth(getMonth(undefined));
             setInputValue("");
             return;
         }
-        setSelectedMonth(month);
+        setSelectedMonth(getMonth(month));
         setInputValue(month ? (0, utils_1.formatDateForInput)(month, locale, "month") : "");
     };
     // When changing the input field, save its value in state and check if the
@@ -83,7 +85,7 @@ const useMonthpicker = (opt = {}) => {
         setInputValue(e.target.value);
         const month = (0, utils_1.parseDate)(e.target.value, today, locale, "month");
         if (!(0, utils_1.isValidDate)(month) || (disabled && (0, utils_1.isMatch)(month, disabled))) {
-            setSelectedMonth(undefined);
+            setSelectedMonth(getMonth(undefined));
             return;
         }
         const isBefore = fromDate &&
@@ -97,10 +99,10 @@ const useMonthpicker = (opt = {}) => {
         if (isAfter ||
             isBefore ||
             (fromDate && toDate && !(0, utils_1.isMatch)(month, [{ from: fromDate, to: toDate }]))) {
-            setSelectedMonth(undefined);
+            setSelectedMonth(getMonth(undefined));
             return;
         }
-        setSelectedMonth(month);
+        setSelectedMonth(getMonth(month));
         setYear(month);
     };
     const handleClose = (0, react_1.useCallback)(() => {

package/cjs/date/hooks/useRangeDatepicker.js

@@ -1,7 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRangeDatepicker = void 0;
-const date_fns_1 = require("date-fns");
+const differenceInCalendarDays_1 = __importDefault(require("date-fns/differenceInCalendarDays"));
+const isWeekend_1 = __importDefault(require("date-fns/isWeekend"));
 const react_1 = require("react");
 const react_day_picker_1 = require("react-day-picker");
 const utils_1 = require("../utils");
@@ -10,14 +14,15 @@ const RANGE = {
     TO: "TO",
 };
 const useRangeDatepicker = (opt = {}) => {
-    const { locale: _locale = "nb", defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, } = opt;
+    const { locale: _locale = "nb", defaultSelected: _defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, onRangeChange, } = opt;
     const locale = (0, utils_1.getLocaleFromString)(_locale);
     const inputRefTo = (0, react_1.useRef)(null);
     const inputRefFrom = (0, react_1.useRef)(null);
     const datePickerRef = (0, react_1.useRef)(null);
+    const [defaultSelected, setDefaultSelected] = (0, react_1.useState)(_defaultSelected);
     // Initialize states
-    const [month, setMonth] = (0, react_1.useState)(defaultSelected ? defaultSelected.from : today);
-    const [selectedRange, setSelectedRange] = (0, react_1.useState)(defaultSelected);
+    const [month, setMonth] = (0, react_1.useState)(defaultSelected ? defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.from : 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")
         : "");
@@ -25,6 +30,10 @@ const useRangeDatepicker = (opt = {}) => {
         ? (0, utils_1.formatDateForInput)(defaultSelected.to, locale, "date")
         : "");
     const [open, setOpen] = (0, react_1.useState)(false);
+    const getSelectedRange = (range) => {
+        onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange(range);
+        return range;
+    };
     const handleFocusIn = (0, react_1.useCallback)((e) => {
         var _a, _b;
         return ![
@@ -47,17 +56,18 @@ const useRangeDatepicker = (opt = {}) => {
         };
     }, [handleFocusIn]);
     const reset = () => {
-        setSelectedRange(defaultSelected);
-        setMonth(defaultSelected ? defaultSelected.from : today);
+        setSelectedRange(getSelectedRange(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : { from: undefined, to: undefined }));
+        setMonth(defaultSelected ? defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.from : today);
         setFromInputValue((defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.from)
             ? (0, utils_1.formatDateForInput)(defaultSelected.from, locale, "date")
             : "");
         setToInputValue((defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.to)
             ? (0, utils_1.formatDateForInput)(defaultSelected.to, locale, "date")
             : "");
+        setDefaultSelected(_defaultSelected);
     };
     const setSelected = (range) => {
-        setSelectedRange(range);
+        setSelectedRange(getSelectedRange(range));
         setFromInputValue((range === null || range === void 0 ? void 0 : range.from) ? (0, utils_1.formatDateForInput)(range.from, locale, "date") : "");
         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") : "");
     };
@@ -74,7 +84,7 @@ const useRangeDatepicker = (opt = {}) => {
     const handleInputs = (day, src) => {
         if (src === RANGE.FROM) {
             const isAfter = toInputValue &&
-                (0, date_fns_1.differenceInCalendarDays)(day, (0, utils_1.parseDate)(toInputValue, today, locale, "date")) > 0;
+                (0, differenceInCalendarDays_1.default)(day, (0, utils_1.parseDate)(toInputValue, today, locale, "date")) > 0;
             if (isAfter) {
                 setFromInputValue((0, utils_1.formatDateForInput)((0, utils_1.parseDate)(toInputValue, today, locale, "date"), locale, "date"));
                 setToInputValue((0, utils_1.formatDateForInput)(day, locale, "date"));
@@ -85,7 +95,7 @@ const useRangeDatepicker = (opt = {}) => {
         }
         else if (src === RANGE.TO) {
             const isBefore = fromInputValue &&
-                (0, date_fns_1.differenceInCalendarDays)((0, utils_1.parseDate)(fromInputValue, today, locale, "date"), day) > 0;
+                (0, differenceInCalendarDays_1.default)((0, utils_1.parseDate)(fromInputValue, today, locale, "date"), day) > 0;
             if (isBefore) {
                 setToInputValue((0, utils_1.formatDateForInput)((0, utils_1.parseDate)(fromInputValue, today, locale, "date"), locale, "date"));
                 setFromInputValue((0, utils_1.formatDateForInput)(day, locale, "date"));
@@ -103,7 +113,7 @@ const useRangeDatepicker = (opt = {}) => {
         handleInputs(day, src);
     };
     const handleSelect = (range) => {
-        if (range.from && range.to) {
+        if ((range === null || range === void 0 ? void 0 : range.from) && (range === null || range === void 0 ? void 0 : range.to)) {
             setOpen(false);
         }
         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;
@@ -113,7 +123,7 @@ const useRangeDatepicker = (opt = {}) => {
         prevToRange
             ? setToInputValue((0, utils_1.formatDateForInput)(prevToRange, locale, "date"))
             : setToInputValue("");
-        setSelectedRange({ from: range === null || range === void 0 ? void 0 : range.from, to: prevToRange });
+        setSelectedRange(getSelectedRange({ from: range === null || range === void 0 ? void 0 : range.from, to: prevToRange }));
     };
     /* live-update datepicker based on changes in inputfields */
     const handleChange = (e, src) => {
@@ -123,37 +133,39 @@ const useRangeDatepicker = (opt = {}) => {
         const day = (0, utils_1.parseDate)(e.target.value, today, locale, "date");
         if (!(0, utils_1.isValidDate)(day) ||
             (disabled &&
-                ((disableWeekends && (0, date_fns_1.isWeekend)(day)) || (0, react_day_picker_1.isMatch)(day, disabled)))) {
-            setSelectedRange((x) => src === RANGE.FROM
-                ? Object.assign(Object.assign({}, x), { from: undefined }) : { from: x === null || x === void 0 ? void 0 : x.from, to: undefined });
+                ((disableWeekends && (0, isWeekend_1.default)(day)) || (0, react_day_picker_1.isMatch)(day, disabled)))) {
+            setSelectedRange((x) => getSelectedRange(src === RANGE.FROM
+                ? Object.assign(Object.assign({}, x), { from: undefined }) : { from: x === null || x === void 0 ? void 0 : x.from, to: undefined }));
             return;
         }
-        const isBefore = fromDate && (0, date_fns_1.differenceInCalendarDays)(fromDate, day) > 0;
-        const isAfter = toDate && (0, date_fns_1.differenceInCalendarDays)(day, toDate) > 0;
+        const isBefore = fromDate && (0, differenceInCalendarDays_1.default)(fromDate, day) > 0;
+        const isAfter = toDate && (0, differenceInCalendarDays_1.default)(day, toDate) > 0;
         if (isBefore || isAfter) {
             src === RANGE.FROM
-                ? setSelectedRange((x) => (Object.assign(Object.assign({}, x), { from: undefined })))
-                : setSelectedRange((x) => ({ from: x === null || x === void 0 ? void 0 : x.from, to: undefined }));
+                ? setSelectedRange((x) => getSelectedRange(Object.assign(Object.assign({}, x), { from: undefined })))
+                : setSelectedRange((x) => getSelectedRange({ from: x === null || x === void 0 ? void 0 : x.from, to: undefined }));
             return;
         }
         /* If to-value < from-value, switch places in state */
         if (src === RANGE.TO &&
             (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) {
-            setSelectedRange({ from: day, to: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from });
+            (0, differenceInCalendarDays_1.default)(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from, day) >= 0) {
+            setSelectedRange(getSelectedRange({ from: day, to: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from }));
             setMonth(day);
             return;
         }
         /* If from-value > to-value  , switch places in state */
         if (src === RANGE.FROM &&
             (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) {
-            setSelectedRange({ to: day, from: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to });
+            (0, differenceInCalendarDays_1.default)(day, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) >= 0) {
+            setSelectedRange(getSelectedRange({ to: day, from: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to }));
             setMonth(day);
             return;
         }
-        src === RANGE.FROM && setSelectedRange((x) => (Object.assign(Object.assign({}, x), { from: day })));
-        src === RANGE.TO && setSelectedRange((x) => ({ from: x === null || x === void 0 ? void 0 : x.from, to: day }));
+        src === RANGE.FROM &&
+            setSelectedRange((x) => getSelectedRange(Object.assign(Object.assign({}, x), { from: day })));
+        src === RANGE.TO &&
+            setSelectedRange((x) => getSelectedRange({ from: x === null || x === void 0 ? void 0 : x.from, to: day }));
         setMonth(day);
     };
     const handleClose = (0, react_1.useCallback)(() => {

package/cjs/date/hooks/useSharedMonthContext.js

@@ -22,9 +22,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SharedMonthProvider = exports.useSharedMonthContext = exports.SharedMonthContext = void 0;
-const date_fns_1 = require("date-fns");
+const setYear_1 = __importDefault(require("date-fns/setYear"));
+const startOfMonth_1 = __importDefault(require("date-fns/startOfMonth"));
 const react_1 = __importStar(require("react"));
 const react_day_picker_1 = require("react-day-picker");
 const utils_1 = require("../utils");
@@ -56,7 +60,7 @@ const SharedMonthProvider = ({ children, dropdownCaption, disabled, selected, on
             disabled,
             selected,
             onSelect: (v) => v
-                ? onSelect((0, date_fns_1.setYear)((0, date_fns_1.startOfMonth)(v), (_year !== null && _year !== void 0 ? _year : year).getFullYear()))
+                ? onSelect((0, setYear_1.default)((0, startOfMonth_1.default)(v), (_year !== null && _year !== void 0 ? _year : year).getFullYear()))
                 : onSelect(undefined),
         } }, children));
 };

package/cjs/date/monthpicker/MonthButton.js

@@ -28,20 +28,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MonthButton = void 0;
 const clsx_1 = __importDefault(require("clsx"));
-const date_fns_1 = require("date-fns");
+const compareAsc_1 = __importDefault(require("date-fns/compareAsc"));
+const compareDesc_1 = __importDefault(require("date-fns/compareDesc"));
+const format_1 = __importDefault(require("date-fns/format"));
+const isSameMonth_1 = __importDefault(require("date-fns/isSameMonth"));
+const setYear_1 = __importDefault(require("date-fns/setYear"));
 const react_1 = __importStar(require("react"));
 const react_day_picker_1 = require("react-day-picker");
 const hooks_1 = require("../hooks");
 const utils_1 = require("../utils");
 const disableMonth = (month, fromDate, toDate) => {
     if (fromDate && toDate) {
-        return ((0, date_fns_1.compareAsc)(month, fromDate) === -1 || (0, date_fns_1.compareDesc)(month, toDate) === -1);
+        return ((0, compareAsc_1.default)(month, fromDate) === -1 || (0, compareDesc_1.default)(month, toDate) === -1);
     }
     else if (fromDate) {
-        return (0, date_fns_1.compareAsc)(month, fromDate) === -1;
+        return (0, compareAsc_1.default)(month, fromDate) === -1;
     }
     else if (toDate) {
-        return (0, date_fns_1.compareDesc)(month, toDate) === -1;
+        return (0, compareDesc_1.default)(month, toDate) === -1;
     }
     return false;
 };
@@ -49,20 +53,20 @@ const MonthButton = ({ month, months, focus, setFocus, tabRoot, setTabRoot, }) =
     const ref = (0, react_1.useRef)(null);
     const { hasDropdown, selected, onSelect, year, toYear, disabled } = (0, hooks_1.useSharedMonthContext)();
     const { fromDate, toDate, locale } = (0, react_day_picker_1.useDayPicker)();
-    const isSelected = selected && (0, date_fns_1.isSameMonth)(month, selected);
+    const isSelected = selected && (0, isSameMonth_1.default)(month, selected);
     (0, react_1.useEffect)(() => {
         if (focus) {
-            (0, date_fns_1.isSameMonth)(month, focus) && ref.current && ref.current.focus();
+            (0, isSameMonth_1.default)(month, focus) && ref.current && ref.current.focus();
             setFocus();
         }
     }, [focus, month, setFocus]);
-    const isDisabled = (0, utils_1.isMatch)((0, date_fns_1.setYear)(month, year.getFullYear()), disabled) ||
+    const isDisabled = (0, utils_1.isMatch)((0, setYear_1.default)(month, year.getFullYear()), disabled) ||
         disableMonth(month, fromDate, toDate);
     return (react_1.default.createElement("button", { ref: ref, type: "button", onClick: () => onSelect(isSelected ? undefined : month), disabled: isDisabled, className: (0, clsx_1.default)("navds-date__month-button", {
             "rdp-day_today": (0, utils_1.dateIsInCurrentMonth)(month, year),
             "rdp-day_selected": isSelected,
             "rdp-day_disabled": isDisabled,
-        }), tabIndex: tabRoot && (0, date_fns_1.isSameMonth)(month, (0, date_fns_1.setYear)(tabRoot, year.getFullYear()))
+        }), tabIndex: tabRoot && (0, isSameMonth_1.default)(month, (0, setYear_1.default)(tabRoot, year.getFullYear()))
             ? 0
             : -1, onKeyDown: (e) => {
             const next = (0, utils_1.nextEnabled)(months, e.key, disabled, month, toYear, year, hasDropdown, fromDate, toDate);
@@ -71,10 +75,10 @@ const MonthButton = ({ month, months, focus, setFocus, tabRoot, setTabRoot, }) =
         }, onFocus: () => {
             setTabRoot(focus);
         } },
-        react_1.default.createElement("span", { "aria-hidden": "true" }, (0, date_fns_1.format)(new Date(month), "LLL", { locale })
+        react_1.default.createElement("span", { "aria-hidden": "true" }, (0, format_1.default)(new Date(month), "LLL", { locale })
             .replace(".", "")
             .substring(0, 3)),
-        react_1.default.createElement("span", { className: "navds-sr-only" }, (0, date_fns_1.format)(new Date(month), "LLLL", { locale }))));
+        react_1.default.createElement("span", { className: "navds-sr-only" }, (0, format_1.default)(new Date(month), "LLLL", { locale }))));
 };
 exports.MonthButton = MonthButton;
 exports.default = exports.MonthButton;