@navikt/ds-react 1.3.7 → 1.3.9

package/cjs/date/hooks/useMonthPicker.js

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 today = new Date();
+    const locale = (0, utils_1.getLocaleFromString)(_locale);
+    const inputRef = (0, react_1.useRef)(null);
+    const monthpickerRef = (0, react_1.useRef)(null);
+    // Initialize states
+    const [year, setYear] = (0, react_1.useState)(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : 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")
+        : "";
+    const [inputValue, setInputValue] = (0, react_1.useState)(defaultInputValue);
+    const handleFocusIn = (0, react_1.useCallback)((e) => {
+        var _a;
+        return ![
+            monthpickerRef.current,
+            inputRef.current,
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.nextSibling,
+        ].some((element) => element === null || element === void 0 ? void 0 : element.contains(e.target)) &&
+            open &&
+            setOpen(false);
+    }, [open]);
+    (0, react_1.useEffect)(() => {
+        window.addEventListener("focusin", handleFocusIn);
+        window.addEventListener("click", handleFocusIn);
+        return () => {
+            var _a, _b;
+            (_a = window === null || window === void 0 ? void 0 : window.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(window, "focusin", handleFocusIn);
+            (_b = window === null || window === void 0 ? void 0 : window.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(window, "click", handleFocusIn);
+        };
+    }, [handleFocusIn]);
+    const reset = () => {
+        setSelectedMonth(defaultSelected);
+        setYear(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : today);
+        setInputValue(defaultInputValue !== null && defaultInputValue !== void 0 ? defaultInputValue : "");
+    };
+    const setSelected = (date) => {
+        setSelectedMonth(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);
+            setInputValue((0, utils_1.formatDateForInput)(day, locale, "month"));
+        }
+    };
+    const handleBlur = (e) => {
+        let day = (0, utils_1.parseDate)(e.target.value, today, locale, "month");
+        (0, utils_1.isValidDate)(day) && setInputValue((0, utils_1.formatDateForInput)(day, locale, "month"));
+    };
+    /* Only allow de-selecting if not required */
+    const handleMonthClick = (month) => {
+        if (month) {
+            setOpen(false);
+            inputRef.current && inputRef.current.focus();
+        }
+        if (!required && !month) {
+            setSelectedMonth(undefined);
+            setInputValue("");
+            return;
+        }
+        setSelectedMonth(month);
+        setInputValue(month ? (0, utils_1.formatDateForInput)(month, locale, "month") : "");
+    };
+    // 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");
+        if (!(0, utils_1.isValidDate)(month) || (disabled && (0, utils_1.isMatch)(month, disabled))) {
+            setSelectedMonth(undefined);
+            return;
+        }
+        const isBefore = fromDate &&
+            (fromDate.getFullYear() > month.getFullYear() ||
+                (fromDate.getFullYear() === month.getFullYear() &&
+                    fromDate.getMonth() > month.getMonth()));
+        const isAfter = toDate &&
+            (toDate.getFullYear() < month.getFullYear() ||
+                (toDate.getFullYear() === month.getFullYear() &&
+                    toDate.getMonth() < month.getMonth()));
+        if (isAfter ||
+            isBefore ||
+            (fromDate && toDate && !(0, utils_1.isMatch)(month, [{ from: fromDate, to: toDate }]))) {
+            setSelectedMonth(undefined);
+            return;
+        }
+        setSelectedMonth(month);
+        setYear(month);
+    };
+    const handleClose = (0, react_1.useCallback)(() => {
+        setOpen(false);
+        inputRef.current && inputRef.current.focus();
+    }, []);
+    const escape = (0, react_1.useCallback)((e) => open && e.key === "Escape" && handleClose(), [handleClose, open]);
+    (0, react_1.useEffect)(() => {
+        window.addEventListener("keydown", escape, false);
+        return () => {
+            window.removeEventListener("keydown", escape, false);
+        };
+    }, [escape]);
+    const monthpickerProps = {
+        year,
+        onYearChange: (y) => setYear(y !== null && y !== void 0 ? y : today),
+        onMonthSelect: handleMonthClick,
+        selected: selectedMonth,
+        locale: _locale,
+        fromDate,
+        toDate,
+        open,
+        onOpenToggle: () => setOpen((x) => !x),
+        disabled,
+        ref: monthpickerRef,
+    };
+    const inputProps = {
+        onChange: handleChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        value: inputValue,
+        ref: inputRef,
+    };
+    return { monthpickerProps, inputProps, reset, selectedMonth, setSelected };
+};
+exports.useMonthPicker = useMonthPicker;

package/cjs/date/hooks/useRangeDatepicker.js

@@ -0,0 +1,215 @@
+"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 utils_1 = require("../utils");
+const RANGE = {
+    FROM: "FROM",
+    TO: "TO",
+};
+const useRangeDatepicker = (opt = {}) => {
+    const { locale: _locale = "nb", defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, } = 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);
+    // Initialize states
+    const [month, setMonth] = (0, react_1.useState)(defaultSelected ? defaultSelected.from : today);
+    const [selectedRange, setSelectedRange] = (0, react_1.useState)(defaultSelected);
+    const [fromInputValue, setFromInputValue] = (0, react_1.useState)((defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.from)
+        ? (0, utils_1.formatDateForInput)(defaultSelected.from, locale, "date")
+        : "");
+    const [toInputValue, setToInputValue] = (0, react_1.useState)((defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.to)
+        ? (0, utils_1.formatDateForInput)(defaultSelected.to, locale, "date")
+        : "");
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const handleFocusIn = (0, react_1.useCallback)((e) => {
+        var _a, _b;
+        return ![
+            datePickerRef.current,
+            inputRefTo.current,
+            inputRefFrom.current,
+            (_a = inputRefTo.current) === null || _a === void 0 ? void 0 : _a.nextSibling,
+            (_b = inputRefFrom.current) === null || _b === void 0 ? void 0 : _b.nextSibling,
+        ].some((element) => element === null || element === void 0 ? void 0 : element.contains(e.target)) &&
+            open &&
+            setOpen(false);
+    }, [open]);
+    (0, react_1.useEffect)(() => {
+        window.addEventListener("focusin", handleFocusIn);
+        window.addEventListener("click", handleFocusIn);
+        return () => {
+            var _a, _b;
+            (_a = window === null || window === void 0 ? void 0 : window.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(window, "focusin", handleFocusIn);
+            (_b = window === null || window === void 0 ? void 0 : window.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(window, "click", handleFocusIn);
+        };
+    }, [handleFocusIn]);
+    const reset = () => {
+        setSelectedRange(defaultSelected);
+        setMonth(defaultSelected ? 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")
+            : "");
+    };
+    const setSelected = (range) => {
+        setSelectedRange(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") : "");
+    };
+    const handleFocus = (e, src) => {
+        !open && setOpen(true);
+        let day = (0, utils_1.parseDate)(e.target.value, today, locale, "date");
+        if ((0, utils_1.isValidDate)(day)) {
+            setMonth(day);
+            src === RANGE.FROM
+                ? setFromInputValue((0, utils_1.formatDateForInput)(day, locale, "date"))
+                : setToInputValue((0, utils_1.formatDateForInput)(day, locale, "date"));
+        }
+    };
+    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;
+            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"));
+            }
+            else {
+                setFromInputValue((0, utils_1.formatDateForInput)(day, locale, "date"));
+            }
+        }
+        else if (src === RANGE.TO) {
+            const isBefore = fromInputValue &&
+                (0, date_fns_1.differenceInCalendarDays)((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"));
+            }
+            else {
+                setToInputValue((0, utils_1.formatDateForInput)(day, locale, "date"));
+            }
+        }
+    };
+    const handleBlur = (e, src) => {
+        let day = (0, utils_1.parseDate)(e.target.value, today, locale, "date");
+        if (!(0, utils_1.isValidDate)(day)) {
+            return;
+        }
+        handleInputs(day, src);
+    };
+    const handleSelect = (range) => {
+        if (range.from && range.to) {
+            setOpen(false);
+            // TODO: fokus på en av input-feltene?
+        }
+        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;
+        (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"))
+            : setFromInputValue("");
+        prevToRange
+            ? setToInputValue((0, utils_1.formatDateForInput)(prevToRange, locale, "date"))
+            : setToInputValue("");
+        setSelectedRange({ from: range === null || range === void 0 ? void 0 : range.from, to: prevToRange });
+    };
+    /* live-update datepicker based on changes in inputfields */
+    const handleChange = (e, src) => {
+        src === RANGE.FROM
+            ? setFromInputValue(e.target.value)
+            : setToInputValue(e.target.value);
+        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 });
+            return;
+        }
+        const isBefore = fromDate && (0, date_fns_1.differenceInCalendarDays)(fromDate, day) > 0;
+        const isAfter = toDate && (0, date_fns_1.differenceInCalendarDays)(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 }));
+            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 });
+            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 });
+            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 }));
+        setMonth(day);
+    };
+    const handleClose = (0, react_1.useCallback)(() => {
+        var _a, _b;
+        setOpen(false);
+        if ((selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) && !(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to)) {
+            (_a = inputRefTo === null || inputRefTo === void 0 ? void 0 : inputRefTo.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            console.log(inputRefFrom);
+            (_b = inputRefFrom === null || inputRefFrom === void 0 ? void 0 : inputRefFrom.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }, [selectedRange]);
+    const escape = (0, react_1.useCallback)((e) => open && e.key === "Escape" && handleClose(), [handleClose, open]);
+    (0, react_1.useEffect)(() => {
+        window.addEventListener("keydown", escape, false);
+        return () => {
+            window.removeEventListener("keydown", escape, false);
+        };
+    }, [escape]);
+    const datepickerProps = {
+        month: month,
+        onMonthChange: (month) => setMonth(month),
+        onSelect: handleSelect,
+        selected: selectedRange,
+        locale: _locale,
+        fromDate,
+        toDate,
+        today,
+        mode: "range",
+        open,
+        onOpenToggle: () => setOpen((x) => !x),
+        ref: datePickerRef,
+    };
+    const fromInputProps = {
+        onChange: (e) => handleChange(e, RANGE.FROM),
+        onFocus: (e) => handleFocus(e, RANGE.FROM),
+        onBlur: (e) => handleBlur(e, RANGE.FROM),
+        value: fromInputValue,
+        ref: inputRefFrom,
+    };
+    const toInputProps = {
+        onChange: (e) => handleChange(e, RANGE.TO),
+        onFocus: (e) => handleFocus(e, RANGE.TO),
+        onBlur: (e) => handleBlur(e, RANGE.TO),
+        value: toInputValue,
+        ref: inputRefTo,
+    };
+    return {
+        datepickerProps,
+        fromInputProps,
+        toInputProps,
+        reset,
+        selectedRange,
+        setSelected,
+    };
+};
+exports.useRangeDatepicker = useRangeDatepicker;

package/cjs/date/hooks/useSharedMonthContext.js

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SharedMonthProvider = exports.useSharedMonthContext = exports.SharedMonthContext = void 0;
+const date_fns_1 = require("date-fns");
+const react_1 = __importStar(require("react"));
+const react_day_picker_1 = require("react-day-picker");
+const utils_1 = require("../utils");
+exports.SharedMonthContext = (0, react_1.createContext)({
+    hasDropdown: false,
+    year: new Date(),
+    toYear: () => null,
+    disabled: [],
+    onSelect: () => null,
+});
+const useSharedMonthContext = () => (0, react_1.useContext)(exports.SharedMonthContext);
+exports.useSharedMonthContext = useSharedMonthContext;
+const SharedMonthProvider = ({ children, dropdownCaption, disabled, selected, onSelect, year: _year, onYearChange, }) => {
+    const context = (0, react_day_picker_1.useDayPicker)();
+    const [year, toYear] = (0, react_1.useState)((0, utils_1.getInitialYear)(context));
+    const hasDropdown = !!(dropdownCaption && context.fromDate && context.toDate);
+    if (context.fromDate &&
+        context.toDate &&
+        (context === null || context === void 0 ? void 0 : context.fromDate) >= (context === null || context === void 0 ? void 0 : context.toDate)) {
+        console.warn("fromDate needs to be before toDate - MonthPicker");
+    }
+    return (react_1.default.createElement(exports.SharedMonthContext.Provider, { value: {
+            year: _year !== null && _year !== void 0 ? _year : year,
+            toYear: (y) => {
+                toYear(y);
+                onYearChange === null || onYearChange === void 0 ? void 0 : onYearChange(y);
+            },
+            hasDropdown,
+            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(undefined),
+        } }, children));
+};
+exports.SharedMonthProvider = SharedMonthProvider;

package/cjs/date/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UNSAFE_MonthPicker = exports.UNSAFE_useRangeDatepicker = exports.UNSAFE_useMonthPicker = exports.UNSAFE_useDatepicker = exports.UNSAFE_DatePicker = void 0;
+var DatePicker_1 = require("./datepicker/DatePicker");
+Object.defineProperty(exports, "UNSAFE_DatePicker", { enumerable: true, get: function () { return __importDefault(DatePicker_1).default; } });
+var hooks_1 = require("./hooks");
+Object.defineProperty(exports, "UNSAFE_useDatepicker", { enumerable: true, get: function () { return hooks_1.UNSAFE_useDatepicker; } });
+Object.defineProperty(exports, "UNSAFE_useMonthPicker", { enumerable: true, get: function () { return hooks_1.UNSAFE_useMonthPicker; } });
+Object.defineProperty(exports, "UNSAFE_useRangeDatepicker", { enumerable: true, get: function () { return hooks_1.UNSAFE_useRangeDatepicker; } });
+var MonthPicker_1 = require("./monthpicker/MonthPicker");
+Object.defineProperty(exports, "UNSAFE_MonthPicker", { enumerable: true, get: function () { return __importDefault(MonthPicker_1).default; } });

package/cjs/date/monthpicker/MonthButton.js

@@ -0,0 +1,80 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.MonthButton = void 0;
+const clsx_1 = __importDefault(require("clsx"));
+const date_fns_1 = require("date-fns");
+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);
+    }
+    else if (fromDate) {
+        return (0, date_fns_1.compareAsc)(month, fromDate) === -1;
+    }
+    else if (toDate) {
+        return (0, date_fns_1.compareDesc)(month, toDate) === -1;
+    }
+    return false;
+};
+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);
+    (0, react_1.useEffect)(() => {
+        if (focus) {
+            (0, date_fns_1.isSameMonth)(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) ||
+        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()))
+            ? 0
+            : -1, onKeyDown: (e) => {
+            const next = (0, utils_1.nextEnabled)(months, e.key, disabled, month, toYear, year, hasDropdown, fromDate, toDate);
+            setFocus(next);
+            setTabRoot(next);
+        }, onFocus: () => {
+            setTabRoot(focus);
+        } },
+        react_1.default.createElement("span", { "aria-hidden": "true" }, (0, date_fns_1.format)(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 }))));
+};
+exports.MonthButton = MonthButton;
+exports.default = exports.MonthButton;

package/cjs/date/monthpicker/MonthCaption.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MonthCaption = void 0;
+const ds_icons_1 = require("@navikt/ds-icons");
+const date_fns_1 = require("date-fns");
+const react_1 = __importDefault(require("react"));
+const react_day_picker_1 = require("react-day-picker");
+const __1 = require("../..");
+const hooks_1 = require("../hooks");
+const utils_1 = require("../utils");
+const MonthCaption = () => {
+    const { fromDate, toDate, formatters: { formatYearCaption }, locale, } = (0, react_day_picker_1.useDayPicker)();
+    const { hasDropdown, year, toYear } = (0, hooks_1.useSharedMonthContext)();
+    const years = [];
+    if (hasDropdown && fromDate && toDate) {
+        const fromYear = fromDate.getFullYear();
+        const toYear = toDate.getFullYear();
+        for (let year = fromYear; year <= toYear; year++) {
+            years.push((0, date_fns_1.setYear)((0, date_fns_1.startOfYear)(new Date()), year));
+        }
+    }
+    const handleYearChange = (e) => toYear((0, date_fns_1.setYear)((0, date_fns_1.startOfMonth)(new Date()), Number(e.target.value)));
+    const handleButtonClick = (val) => {
+        let newMonth;
+        if (hasDropdown && (0, utils_1.hasNextYear)(year, years, val)) {
+            newMonth = (0, date_fns_1.setYear)(new Date(), year.getFullYear() + val);
+            toYear(newMonth);
+        }
+        else if (!hasDropdown) {
+            const newYear = Number(year.getFullYear() + val);
+            newMonth = (0, date_fns_1.setYear)(year, newYear);
+            toYear(newMonth);
+        }
+    };
+    const hasFollowingYear = (value) => {
+        return years.some((y) => (0, date_fns_1.isSameYear)(y, (0, date_fns_1.setYear)(year, Number(year.getFullYear() + value))));
+    };
+    return (react_1.default.createElement("div", { className: "navds-date__caption" },
+        react_1.default.createElement(__1.Button, { className: "navds-date__caption-button", disabled: !hasDropdown ? false : !hasFollowingYear(-1), onClick: () => handleButtonClick(-1), "aria-label": (0, utils_1.labelPrevYear)(locale === null || locale === void 0 ? void 0 : locale.code), icon: react_1.default.createElement(ds_icons_1.Left, { "aria-hidden": true }), variant: "tertiary", type: "button" }),
+        hasDropdown ? (react_1.default.createElement(__1.Select, { label: "velg \u00E5r", hideLabel: true, value: year === null || year === void 0 ? void 0 : year.getFullYear(), onChange: handleYearChange, className: "navds-date__caption__year" }, years.map((year) => (react_1.default.createElement("option", { key: year.getFullYear(), value: year.getFullYear() }, formatYearCaption(year, { locale })))))) : (react_1.default.createElement("span", { className: "navds-date__year-label", "aria-live": "polite" }, year.getFullYear())),
+        react_1.default.createElement(__1.Button, { className: "navds-date__caption-button", disabled: !hasDropdown ? false : !hasFollowingYear(1), onClick: () => handleButtonClick(1), "aria-label": (0, utils_1.labelNextYear)(locale === null || locale === void 0 ? void 0 : locale.code), icon: react_1.default.createElement(ds_icons_1.Right, { "aria-hidden": true }), variant: "tertiary", type: "button" })));
+};
+exports.MonthCaption = MonthCaption;
+exports.default = exports.MonthCaption;

package/cjs/date/monthpicker/MonthPicker.js

@@ -0,0 +1,74 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.MonthPicker = void 0;
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+const react_day_picker_1 = require("react-day-picker");
+const __1 = require("../..");
+const DateInput_1 = require("../DateInput");
+const hooks_1 = require("../hooks");
+const utils_1 = require("../utils");
+const MonthCaption_1 = __importDefault(require("./MonthCaption"));
+const MonthPickerStandalone_1 = __importDefault(require("./MonthPickerStandalone"));
+const MonthSelector_1 = __importDefault(require("./MonthSelector"));
+exports.MonthPicker = (0, react_1.forwardRef)(({ children, dropdownCaption = false, fromDate, toDate, disabled = [], selected, open: _open, id, onClose, onOpenToggle, locale = "nb", onMonthSelect, className, wrapperClassName, defaultSelected, year, onYearChange, }, ref) => {
+    const ariaId = (0, __1.useId)(id);
+    const [open, setOpen] = (0, react_1.useState)(_open !== null && _open !== void 0 ? _open : false);
+    const wrapperRef = (0, react_1.useRef)(null);
+    const [selectedMonth, setSelectedMonth] = (0, react_1.useState)(defaultSelected);
+    const handleSelect = (month) => {
+        var _a;
+        setSelectedMonth(month);
+        onMonthSelect === null || onMonthSelect === void 0 ? void 0 : onMonthSelect(month);
+        month && ((_a = onClose === null || onClose === void 0 ? void 0 : onClose()) !== null && _a !== void 0 ? _a : setOpen(false));
+    };
+    if (dropdownCaption && (!fromDate || !toDate)) {
+        console.warn("Using dropdownCaption required fromDate and toDate");
+        return null;
+    }
+    return (react_1.default.createElement(hooks_1.DateContext.Provider, { value: {
+            open: _open !== null && _open !== void 0 ? _open : open,
+            onOpen: () => {
+                setOpen((x) => !x);
+                onOpenToggle === null || onOpenToggle === void 0 ? void 0 : onOpenToggle();
+            },
+            ariaId,
+        } },
+        react_1.default.createElement("div", { ref: wrapperRef, className: (0, clsx_1.default)("navds-date__wrapper", wrapperClassName) },
+            children,
+            (_open !== null && _open !== void 0 ? _open : open) && (react_1.default.createElement(__1.Popover, { arrow: false, anchorEl: wrapperRef.current, open: _open !== null && _open !== void 0 ? _open : open, onClose: () => { var _a; return (_a = onClose === null || onClose === void 0 ? void 0 : onClose()) !== null && _a !== void 0 ? _a : setOpen(false); }, placement: "bottom-start", role: "dialog", ref: ref, id: ariaId, className: "navds-date" },
+                react_1.default.createElement(react_day_picker_1.RootProvider, { locale: (0, utils_1.getLocaleFromString)(locale), selected: selected, toDate: toDate, fromDate: fromDate, month: selected !== null && selected !== void 0 ? selected : selectedMonth },
+                    react_1.default.createElement("div", { className: (0, clsx_1.default)("rdp-month", className) },
+                        react_1.default.createElement(hooks_1.SharedMonthProvider, { dropdownCaption: dropdownCaption, disabled: disabled, selected: selected !== null && selected !== void 0 ? selected : selectedMonth, onSelect: handleSelect, year: year, onYearChange: onYearChange },
+                            react_1.default.createElement(MonthCaption_1.default, null),
+                            react_1.default.createElement(MonthSelector_1.default, null)))))))));
+});
+exports.MonthPicker.Standalone = MonthPickerStandalone_1.default;
+exports.MonthPicker.Input = DateInput_1.MonthPickerInput;
+exports.default = exports.MonthPicker;