@navikt/ds-react 1.3.8 → 1.3.9

package/cjs/date/DateInput.js

@@ -0,0 +1,79 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MonthPickerInput = exports.DatePickerInput = void 0;
+const ds_icons_1 = require("@navikt/ds-icons");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+const __1 = require("..");
+const useFormField_1 = require("../form/useFormField");
+const hooks_1 = require("./hooks");
+const DateInput = (0, react_1.forwardRef)((props, ref) => {
+    const { className, hideLabel = false, label, description, variant = "datepicker" } = props, rest = __rest(props, ["className", "hideLabel", "label", "description", "variant"]);
+    const isDatepickerVariant = variant === "datepicker";
+    const conditionalVariables = {
+        prefix: isDatepickerVariant ? "datepicker-input" : "monthpicker-input",
+        iconTitle: {
+            open: isDatepickerVariant ? "Åpne datovelger" : "Åpne månedsvelger",
+            close: isDatepickerVariant ? "Lukk datovelger" : "Lukk månedsvelger",
+        },
+    };
+    const { onOpen, ariaId, open } = (0, hooks_1.useDateInputContext)();
+    const { inputProps, size = "medium", inputDescriptionId, errorId, showErrorMsg, hasError, } = (0, useFormField_1.useFormField)(props, conditionalVariables.prefix);
+    return (react_1.default.createElement("div", { className: (0, clsx_1.default)(className, "navds-form-field", `navds-form-field--${size}`, "navds-date__field", {
+            "navds-text-field--error": hasError,
+            "navds-date__field--error": hasError,
+            "navds-form-field--disabled": !!inputProps.disabled,
+            "navds-text-field--disabled": !!inputProps.disabled,
+        }), ref: props === null || props === void 0 ? void 0 : props.wrapperRef },
+        react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, className: (0, clsx_1.default)("navds-form-field__label", {
+                "navds-sr-only": hideLabel,
+            }) }, label),
+        !!description && (react_1.default.createElement(__1.BodyShort, { as: "div", className: (0, clsx_1.default)("navds-form-field__description", {
+                "navds-sr-only": hideLabel,
+            }), id: inputDescriptionId, size: size }, description)),
+        react_1.default.createElement("div", { className: "navds-date__field-wrapper" },
+            react_1.default.createElement("input", Object.assign({ ref: ref }, (0, __1.omit)(rest, ["error", "errorId", "size", "wrapperRef"]), inputProps, { autoComplete: "off", "aria-controls": ariaId, className: (0, clsx_1.default)(className, "navds-date__field-input", "navds-text-field__input", "navds-body-short", `navds-body-${size}`), size: 14 })),
+            react_1.default.createElement(__1.Button, { variant: "tertiary", type: "button", size: "small", onClick: () => onOpen(), className: "navds-date__field-button", tabIndex: open ? -1 : 0, disabled: inputProps.disabled, icon: react_1.default.createElement(ds_icons_1.Calender, { title: open
+                        ? conditionalVariables.iconTitle.close
+                        : conditionalVariables.iconTitle.open }) })),
+        react_1.default.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && (react_1.default.createElement(__1.ErrorMessage, { size: size }, props.error)))));
+});
+exports.DatePickerInput = (0, react_1.forwardRef)((props, ref) => react_1.default.createElement(DateInput, Object.assign({}, props, { ref: ref })));
+exports.MonthPickerInput = (0, react_1.forwardRef)((props, ref) => react_1.default.createElement(DateInput, Object.assign({}, props, { variant: "monthpicker", ref: ref })));

package/cjs/date/datepicker/DatePicker.js

@@ -0,0 +1,113 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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 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 caption_1 = require("./caption");
+const DatePickerStandalone_1 = __importDefault(require("./DatePickerStandalone"));
+const DayButton_1 = require("./DayButton");
+exports.DatePicker = (0, react_1.forwardRef)((_a, ref) => {
+    var { children, locale = "nb", dropdownCaption, disabled = [], disableWeekends = false, showWeekNumber = false, selected, id, defaultSelected, className, wrapperClassName, open: _open, onClose, onOpenToggle } = _a, rest = __rest(_a, ["children", "locale", "dropdownCaption", "disabled", "disableWeekends", "showWeekNumber", "selected", "id", "defaultSelected", "className", "wrapperClassName", "open", "onClose", "onOpenToggle"]);
+    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 [selectedDates, setSelectedDates] = react_1.default.useState(defaultSelected);
+    const handleSingleSelect = (selectedDay) => {
+        var _a;
+        setSelectedDates(selectedDay);
+        selectedDay && ((_a = onClose === null || onClose === void 0 ? void 0 : onClose()) !== null && _a !== void 0 ? _a : setOpen(false));
+        (rest === null || rest === void 0 ? void 0 : rest.onSelect) && (rest === null || rest === void 0 ? void 0 : rest.onSelect)(selectedDay);
+    };
+    const handleMultipleSelect = (selectedDays) => {
+        setSelectedDates(selectedDays);
+        (rest === null || rest === void 0 ? void 0 : rest.onSelect) &&
+            (rest === null || rest === void 0 ? void 0 : rest.onSelect)(selectedDays);
+    };
+    const handleRangeSelect = (selectedDays) => {
+        var _a;
+        setSelectedDates(selectedDays);
+        (selectedDays === null || selectedDays === void 0 ? void 0 : selectedDays.from) && (selectedDays === null || selectedDays === void 0 ? void 0 : selectedDays.to) && ((_a = onClose === null || onClose === void 0 ? void 0 : onClose()) !== null && _a !== void 0 ? _a : setOpen(false));
+        (rest === null || rest === void 0 ? void 0 : rest.onSelect) &&
+            (rest === null || rest === void 0 ? void 0 : rest.onSelect)(selectedDays);
+    };
+    const overrideProps = {
+        onSelect: (rest === null || rest === void 0 ? void 0 : rest.mode) === "single"
+            ? handleSingleSelect
+            : (rest === null || rest === void 0 ? void 0 : rest.mode) === "multiple"
+                ? handleMultipleSelect
+                : handleRangeSelect,
+    };
+    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;
+                    (_a = onClose === null || onClose === void 0 ? void 0 : onClose()) !== null && _a !== void 0 ? _a : setOpen(false);
+                }, placement: "bottom-start", id: ariaId, role: "dialog", ref: 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,
+                        Day: DayButton_1.DayButton,
+                    }, className: (0, clsx_1.default)("navds-date", className), classNames: {
+                        vhidden: "navds-sr-only",
+                    }, disabled: (day) => {
+                        return ((disableWeekends && (0, date_fns_1.isWeekend)(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),
+                    }, modifiersClassNames: {
+                        weekend: "rdp-day__weekend",
+                    }, showWeekNumber: showWeekNumber }, (0, __1.omit)(rest, ["onSelect"]))))))));
+});
+exports.DatePicker.Standalone = DatePickerStandalone_1.default;
+exports.DatePicker.Input = DateInput_1.DatePickerInput;
+exports.default = exports.DatePicker;

package/cjs/date/datepicker/DatePickerStandalone.js

@@ -0,0 +1,81 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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 react_1 = __importStar(require("react"));
+const react_day_picker_1 = require("react-day-picker");
+const __1 = require("../..");
+const utils_1 = require("../utils");
+const caption_1 = require("./caption");
+exports.DatePickerStandalone = (0, react_1.forwardRef)((_a, ref) => {
+    var { children, className, locale = "nb", dropdownCaption, disabled = [], disableWeekends = false, showWeekNumber = false, selected, id, defaultSelected, onSelect } = _a, rest = __rest(_a, ["children", "className", "locale", "dropdownCaption", "disabled", "disableWeekends", "showWeekNumber", "selected", "id", "defaultSelected", "onSelect"]);
+    const [selectedDates, setSelectedDates] = react_1.default.useState(defaultSelected);
+    const handleSingleSelect = (selectedDay) => {
+        setSelectedDates(selectedDay);
+        onSelect && onSelect(selectedDay);
+    };
+    const handleMultipleSelect = (selectedDays) => {
+        setSelectedDates(selectedDays);
+        onSelect && onSelect(selectedDays);
+    };
+    const handleRangeSelect = (selectedDays) => {
+        setSelectedDates(selectedDays);
+        onSelect && onSelect(selectedDays);
+    };
+    const overrideProps = {
+        onSelect: (rest === null || rest === void 0 ? void 0 : rest.mode) === "single"
+            ? handleSingleSelect
+            : (rest === null || rest === void 0 ? void 0 : rest.mode) === "multiple"
+                ? handleMultipleSelect
+                : handleRangeSelect,
+    };
+    return (react_1.default.createElement("div", { ref: ref, className: (0, clsx_1.default)("navds-date__standalone-wrapper", className) },
+        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));
+            }, weekStartsOn: 1, initialFocus: false, labels: utils_1.labels, modifiers: {
+                weekend: (day) => disableWeekends && (0, date_fns_1.isWeekend)(day),
+            }, modifiersClassNames: {
+                weekend: "rdp-day__weekend",
+            }, showWeekNumber: showWeekNumber }, (0, __1.omit)(rest, ["onSelect"])))));
+});
+exports.default = exports.DatePickerStandalone;

package/cjs/date/datepicker/DayButton.js

@@ -0,0 +1,43 @@
+"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.DayButton = 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 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 });
+    if (dayRender.isHidden) {
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    }
+    if (!dayRender.isButton) {
+        return react_1.default.createElement("div", Object.assign({}, dayRender.divProps));
+    }
+    return (react_1.default.createElement(react_day_picker_1.Button, Object.assign({ name: "day", ref: buttonRef }, dayRender.buttonProps, { "aria-label": dateTime })));
+};
+exports.DayButton = DayButton;

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

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerCaption = void 0;
+const ds_icons_1 = require("@navikt/ds-icons");
+const react_1 = __importDefault(require("react"));
+const react_day_picker_1 = require("react-day-picker");
+const __1 = require("../../..");
+const DatePickerCaption = ({ displayMonth, id }) => {
+    const { goToMonth, nextMonth, previousMonth } = (0, react_day_picker_1.useNavigation)();
+    const { labels: { labelPrevious, labelNext }, formatters: { formatCaption }, locale, } = (0, react_day_picker_1.useDayPicker)();
+    const previousLabel = labelPrevious(previousMonth, { locale });
+    const nextLabel = labelNext(nextMonth, { locale });
+    return (react_1.default.createElement("div", { className: "navds-date__caption" },
+        react_1.default.createElement(__1.Label, { as: "span", "aria-live": "polite", "aria-atomic": "true", id: id, className: "navds-date__caption-label" }, formatCaption(displayMonth, { locale })),
+        react_1.default.createElement("div", { className: "navds-date__caption__month-wrapper" },
+            react_1.default.createElement(__1.Button, { "aria-label": previousLabel, variant: "tertiary", disabled: !previousMonth, onClick: () => previousMonth && goToMonth(previousMonth), icon: react_1.default.createElement(ds_icons_1.Left, { title: "velg forrige m\u00E5ned" }), className: "navds-date__caption-button" }),
+            react_1.default.createElement(__1.Button, { "aria-label": nextLabel, icon: react_1.default.createElement(ds_icons_1.Right, { title: "velg neste m\u00E5ned" }), onClick: () => nextMonth && goToMonth(nextMonth), disabled: !nextMonth, variant: "tertiary", className: "navds-date__caption-button" }))));
+};
+exports.DatePickerCaption = DatePickerCaption;
+exports.default = exports.DatePickerCaption;

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

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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 react_1 = __importDefault(require("react"));
+const react_day_picker_1 = require("react-day-picker");
+const __1 = require("../../..");
+const get_dates_1 = require("../../utils/get-dates");
+const labels_1 = require("../../utils/labels");
+const DropdownCaption = ({ displayMonth, id }) => {
+    const { goToMonth, nextMonth, previousMonth } = (0, react_day_picker_1.useNavigation)();
+    const { fromDate, toDate, formatters: { formatYearCaption, formatMonthCaption, formatCaption }, labels: { labelPrevious, labelNext }, locale, } = (0, react_day_picker_1.useDayPicker)();
+    if (!fromDate || !toDate) {
+        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 years = (0, get_dates_1.getYears)(fromDate, toDate);
+    const months = (0, get_dates_1.getMonths)(fromDate, toDate, displayMonth);
+    const previousLabel = labelPrevious(previousMonth, { locale });
+    const nextLabel = labelNext(nextMonth, { locale });
+    const yearDropdownLabel = (0, labels_1.labelYearDropdown)(locale);
+    const MonthDropdownLabel = (0, labels_1.labelMonthDropdown)(locale);
+    return (react_1.default.createElement("div", { className: "navds-date__caption-dropdown" },
+        react_1.default.createElement("span", { "aria-live": "polite", "aria-atomic": "true", id: id, className: "navds-sr-only" }, formatCaption(displayMonth, { locale })),
+        react_1.default.createElement(__1.Button, { "aria-label": previousLabel, variant: "tertiary", disabled: !previousMonth, onClick: () => previousMonth && goToMonth(previousMonth), icon: react_1.default.createElement(ds_icons_1.Left, { title: "velg forrige m\u00E5ned" }), className: "navds-date__caption-button" }),
+        react_1.default.createElement("div", { className: "navds-date__caption__month-wrapper" },
+            react_1.default.createElement(__1.Select, { label: MonthDropdownLabel, hideLabel: true, className: "navds-date__caption__month", value: displayMonth.getMonth(), onChange: handleMonthChange }, months.map((m) => (react_1.default.createElement("option", { key: m.getMonth(), value: m.getMonth() }, formatMonthCaption(m, { locale }))))),
+            react_1.default.createElement(__1.Select, { label: yearDropdownLabel, hideLabel: true, value: displayMonth.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(__1.Button, { "aria-label": nextLabel, icon: react_1.default.createElement(ds_icons_1.Right, { title: "velg neste m\u00E5ned" }), onClick: () => nextMonth && goToMonth(nextMonth), disabled: !nextMonth, variant: "tertiary", className: "navds-date__caption-button" })));
+};
+exports.DropdownCaption = DropdownCaption;
+exports.default = exports.DropdownCaption;

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

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownCaption = exports.Caption = void 0;
+var Caption_1 = require("./Caption");
+Object.defineProperty(exports, "Caption", { enumerable: true, get: function () { return __importDefault(Caption_1).default; } });
+var DropdownCaption_1 = require("./DropdownCaption");
+Object.defineProperty(exports, "DropdownCaption", { enumerable: true, get: function () { return __importDefault(DropdownCaption_1).default; } });

package/cjs/date/datepicker/caption/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../../../esm/date/datepicker/caption/index.js",
+  "types": "../../../../esm/date/datepicker/caption/index.d.ts"
+}

package/cjs/date/hooks/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SharedMonthProvider = exports.useSharedMonthContext = exports.DateContext = exports.useDateInputContext = exports.UNSAFE_useMonthPicker = exports.UNSAFE_useRangeDatepicker = exports.UNSAFE_useDatepicker = void 0;
+var useDatepicker_1 = require("./useDatepicker");
+Object.defineProperty(exports, "UNSAFE_useDatepicker", { enumerable: true, get: function () { return useDatepicker_1.useDatepicker; } });
+var useRangeDatepicker_1 = require("./useRangeDatepicker");
+Object.defineProperty(exports, "UNSAFE_useRangeDatepicker", { enumerable: true, get: function () { return useRangeDatepicker_1.useRangeDatepicker; } });
+var useMonthPicker_1 = require("./useMonthPicker");
+Object.defineProperty(exports, "UNSAFE_useMonthPicker", { enumerable: true, get: function () { return useMonthPicker_1.useMonthPicker; } });
+var useDateInputContext_1 = require("./useDateInputContext");
+Object.defineProperty(exports, "useDateInputContext", { enumerable: true, get: function () { return useDateInputContext_1.useDateInputContext; } });
+Object.defineProperty(exports, "DateContext", { enumerable: true, get: function () { return useDateInputContext_1.DateContext; } });
+var useSharedMonthContext_1 = require("./useSharedMonthContext");
+Object.defineProperty(exports, "useSharedMonthContext", { enumerable: true, get: function () { return useSharedMonthContext_1.useSharedMonthContext; } });
+Object.defineProperty(exports, "SharedMonthProvider", { enumerable: true, get: function () { return useSharedMonthContext_1.SharedMonthProvider; } });

package/cjs/date/hooks/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../../esm/date/hooks/index.js",
+  "types": "../../../esm/date/hooks/index.d.ts"
+}

package/cjs/date/hooks/useDateInputContext.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDateInputContext = exports.DateContext = void 0;
+const react_1 = require("react");
+exports.DateContext = (0, react_1.createContext)({
+    open: false,
+    onOpen: () => null,
+    ariaId: undefined,
+});
+const useDateInputContext = () => {
+    const context = (0, react_1.useContext)(exports.DateContext);
+    if (!context) {
+        console.warn("useDateInputContext must be used with DateContext");
+    }
+    return context;
+};
+exports.useDateInputContext = useDateInputContext;

package/cjs/date/hooks/useDatepicker.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDatepicker = 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 useDatepicker = (opt = {}) => {
+    const { locale: _locale = "nb", required, defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, } = opt;
+    const locale = (0, utils_1.getLocaleFromString)(_locale);
+    const inputRef = (0, react_1.useRef)(null);
+    const daypickerRef = (0, react_1.useRef)(null);
+    // Initialize states
+    const [month, setMonth] = (0, react_1.useState)(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : today);
+    const [selectedDay, setSelectedDay] = (0, react_1.useState)(defaultSelected);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const defaultInputValue = defaultSelected
+        ? (0, utils_1.formatDateForInput)(defaultSelected, locale, "date")
+        : "";
+    const [inputValue, setInputValue] = (0, react_1.useState)(defaultInputValue);
+    const handleFocusIn = (0, react_1.useCallback)((e) => {
+        var _a;
+        ![
+            daypickerRef.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 = () => {
+        setSelectedDay(defaultSelected);
+        setMonth(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : today);
+        setInputValue(defaultInputValue !== null && defaultInputValue !== void 0 ? defaultInputValue : "");
+    };
+    const setSelected = (date) => {
+        setSelectedDay(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);
+            setInputValue((0, utils_1.formatDateForInput)(day, locale, "date"));
+        }
+    };
+    const handleBlur = (e) => {
+        let day = (0, utils_1.parseDate)(e.target.value, today, locale, "date");
+        (0, utils_1.isValidDate)(day) && setInputValue((0, utils_1.formatDateForInput)(day, locale, "date"));
+    };
+    /* Only allow de-selecting if not required */
+    const handleDayClick = (day, { selected }) => {
+        if (day && !selected) {
+            setOpen(false);
+            inputRef.current && inputRef.current.focus();
+        }
+        if (!required && selected) {
+            setSelectedDay(undefined);
+            setInputValue("");
+            return;
+        }
+        setSelectedDay(day);
+        setMonth(day);
+        setInputValue(day ? (0, utils_1.formatDateForInput)(day, locale, "date") : "");
+    };
+    // 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 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);
+            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) {
+            setSelectedDay(undefined);
+            return;
+        }
+        setSelectedDay(day);
+        setMonth(day);
+    };
+    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 datepickerProps = {
+        month,
+        onMonthChange: (month) => setMonth(month),
+        onDayClick: handleDayClick,
+        selected: selectedDay,
+        locale: _locale,
+        fromDate,
+        toDate,
+        today,
+        open,
+        onOpenToggle: () => setOpen((x) => !x),
+        ref: daypickerRef,
+    };
+    const inputProps = {
+        onChange: handleChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        value: inputValue,
+        ref: inputRef,
+    };
+    return { datepickerProps, inputProps, reset, selectedDay, setSelected };
+};
+exports.useDatepicker = useDatepicker;