@navikt/ds-react 5.8.0 → 5.9.0

package/cjs/date/context/useDateInputContext.js

@@ -2,11 +2,7 @@
 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,
-});
+exports.DateContext = (0, react_1.createContext)(null);
 const useDateInputContext = () => {
     const context = (0, react_1.useContext)(exports.DateContext);
     if (!context) {

package/cjs/date/datepicker/DatePicker.js

@@ -42,10 +42,10 @@ const clsx_1 = __importDefault(require("clsx"));
 const isWeekend_1 = __importDefault(require("date-fns/isWeekend"));
 const react_1 = __importStar(require("react"));
 const react_day_picker_1 = require("react-day-picker");
-const popover_1 = require("../../popover");
 const util_1 = require("../../util");
-const DateInput_1 = require("../DateInput");
 const context_1 = require("../context");
+const DateInput_1 = require("../parts/DateInput");
+const DateWrapper_1 = require("../parts/DateWrapper");
 const utils_1 = require("../utils");
 const DatePickerStandalone_1 = __importDefault(require("./DatePickerStandalone"));
 const Caption_1 = __importDefault(require("./parts/Caption"));
@@ -79,10 +79,11 @@ const WeekNumber_1 = __importDefault(require("./parts/WeekNumber"));
  */
 exports.DatePicker = (0, react_1.forwardRef)((_a, ref) => {
     var _b;
-    var { children, locale = "nb", dropdownCaption, disabled = [], disableWeekends = false, showWeekNumber = false, selected, id, defaultSelected, className, wrapperClassName, open: _open, onClose, onOpenToggle, strategy, bubbleEscape = false, onWeekNumberClick } = _a, rest = __rest(_a, ["children", "locale", "dropdownCaption", "disabled", "disableWeekends", "showWeekNumber", "selected", "id", "defaultSelected", "className", "wrapperClassName", "open", "onClose", "onOpenToggle", "strategy", "bubbleEscape", "onWeekNumberClick"]);
+    var { children, locale = "nb", dropdownCaption, disabled = [], disableWeekends = false, showWeekNumber = false, selected, id, defaultSelected, className, wrapperClassName, open: _open, onClose, onOpenToggle, strategy, onWeekNumberClick } = _a, rest = __rest(_a, ["children", "locale", "dropdownCaption", "disabled", "disableWeekends", "showWeekNumber", "selected", "id", "defaultSelected", "className", "wrapperClassName", "open", "onClose", "onOpenToggle", "strategy", "onWeekNumberClick"]);
     const ariaId = (0, util_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 mergedRef = (0, react_1.useMemo)(() => (0, util_1.mergeRefs)([wrapperRef, ref]), [ref]);
     const [selectedDates, setSelectedDates] = react_1.default.useState(defaultSelected);
     const mode = (_b = rest.mode) !== null && _b !== void 0 ? _b : "single";
     /**
@@ -99,6 +100,22 @@ exports.DatePicker = (0, react_1.forwardRef)((_a, ref) => {
         }
         (_c = rest === null || rest === void 0 ? void 0 : rest.onSelect) === null || _c === void 0 ? void 0 : _c.call(rest, newSelected);
     };
+    const DatePickerComponent = (react_1.default.createElement(react_day_picker_1.DayPicker, Object.assign({ locale: (0, utils_1.getLocaleFromString)(locale), mode: mode, onSelect: handleSelect, selected: selected !== null && selected !== void 0 ? selected : selectedDates, components: {
+            Caption: dropdownCaption ? DropdownCaption_1.default : Caption_1.default,
+            Head: TableHead_1.default,
+            HeadRow: HeadRow_1.HeadRow,
+            WeekNumber: WeekNumber_1.default,
+            Row: Row_1.default,
+            Day: DayButton_1.default,
+        }, className: (0, clsx_1.default)("navds-date", className), classNames: {
+            vhidden: "navds-sr-only",
+        }, disabled: (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, isWeekend_1.default)(day),
+        }, modifiersClassNames: {
+            weekend: "rdp-day__weekend",
+        }, showWeekNumber: showWeekNumber, onWeekNumberClick: mode === "multiple" ? onWeekNumberClick : undefined, fixedWeeks: true, showOutsideDays: true }, (0, util_1.omit)(rest, ["onSelect"]))));
     return (react_1.default.createElement(context_1.DateContext.Provider, { value: {
             open: _open !== null && _open !== void 0 ? _open : open,
             onOpen: () => {
@@ -106,30 +123,14 @@ exports.DatePicker = (0, react_1.forwardRef)((_a, ref) => {
                 onOpenToggle === null || onOpenToggle === void 0 ? void 0 : onOpenToggle();
             },
             ariaId,
+            defined: true,
         } },
-        react_1.default.createElement("div", { ref: wrapperRef, className: (0, clsx_1.default)("navds-date__wrapper", wrapperClassName) },
+        react_1.default.createElement("div", { ref: mergedRef, className: (0, clsx_1.default)("navds-date__wrapper", wrapperClassName) },
             children,
-            (_open !== null && _open !== void 0 ? _open : open) && (react_1.default.createElement(popover_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, strategy: strategy, className: "navds-date__popover", bubbleEscape: bubbleEscape, flip: false },
-                react_1.default.createElement(react_day_picker_1.DayPicker, Object.assign({ locale: (0, utils_1.getLocaleFromString)(locale), mode: mode, onSelect: handleSelect, selected: selected !== null && selected !== void 0 ? selected : selectedDates, components: {
-                        Caption: dropdownCaption ? DropdownCaption_1.default : Caption_1.default,
-                        Head: TableHead_1.default,
-                        HeadRow: HeadRow_1.HeadRow,
-                        WeekNumber: WeekNumber_1.default,
-                        Row: Row_1.default,
-                        Day: DayButton_1.default,
-                    }, className: (0, clsx_1.default)("navds-date", className), classNames: {
-                        vhidden: "navds-sr-only",
-                    }, disabled: (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, isWeekend_1.default)(day),
-                    }, modifiersClassNames: {
-                        weekend: "rdp-day__weekend",
-                    }, showWeekNumber: showWeekNumber, onWeekNumberClick: mode === "multiple" ? onWeekNumberClick : undefined, fixedWeeks: true, showOutsideDays: true }, (0, util_1.omit)(rest, ["onSelect"]))))))));
+            react_1.default.createElement(DateWrapper_1.DateWrapper, { open: _open !== null && _open !== void 0 ? _open : open, anchor: wrapperRef.current, onClose: () => { var _a; return (_a = onClose === null || onClose === void 0 ? void 0 : onClose()) !== null && _a !== void 0 ? _a : setOpen(false); }, locale: locale, variant: mode, popoverProps: {
+                    id: ariaId,
+                    strategy,
+                } }, DatePickerComponent))));
 });
 exports.DatePicker.Standalone = DatePickerStandalone_1.default;
 exports.DatePicker.Input = DateInput_1.DatePickerInput;

package/cjs/date/hooks/useDatepicker.js

@@ -9,8 +9,6 @@ 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 useEscape_1 = require("./useEscape");
-const useOutsideClickHandler_1 = require("./useOutsideClickHandler");
 const getValidationMessage = (val = {}) => (Object.assign({ isDisabled: false, isWeekend: false, isEmpty: false, isInvalid: false, isBefore: false, isAfter: false, isValidDate: true }, val));
 /**
  *
@@ -26,11 +24,10 @@ const getValidationMessage = (val = {}) => (Object.assign({ isDisabled: false, i
  * });
  */
 const useDatepicker = (opt = {}) => {
-    var _a, _b;
-    const { locale: _locale = "nb", required, defaultSelected: _defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, onDateChange, inputFormat, onValidate, defaultMonth, allowTwoDigitYear = true, openOnFocus = true, } = opt;
+    var _a;
+    const { locale: _locale = "nb", required, defaultSelected: _defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, onDateChange, inputFormat, onValidate, defaultMonth, allowTwoDigitYear = true, } = opt;
+    const [anchorRef, setAnchorRef] = (0, react_1.useState)(null);
     const locale = (0, utils_1.getLocaleFromString)(_locale);
-    const inputRef = (0, react_1.useRef)(null);
-    const [daypickerRef, setDaypickerRef] = (0, react_1.useState)();
     const [defaultSelected, setDefaultSelected] = (0, react_1.useState)(_defaultSelected);
     // Initialize states
     const [month, setMonth] = (0, react_1.useState)((_a = defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : defaultMonth) !== null && _a !== void 0 ? _a : today);
@@ -46,12 +43,6 @@ const useDatepicker = (opt = {}) => {
         newOpen &&
             setMonth((_b = (_a = selectedDay !== null && selectedDay !== void 0 ? selectedDay : defaultSelected) !== null && _a !== void 0 ? _a : defaultMonth) !== null && _b !== void 0 ? _b : today);
     }, [defaultMonth, defaultSelected, selectedDay, today]);
-    (0, useOutsideClickHandler_1.useOutsideClickHandler)(open, handleOpen, [
-        daypickerRef,
-        inputRef.current,
-        (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.nextSibling,
-    ]);
-    (0, useEscape_1.useEscape)(open, handleOpen, inputRef);
     const updateDate = (date) => {
         onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(date);
         setSelectedDay(date);
@@ -74,7 +65,6 @@ const useDatepicker = (opt = {}) => {
         if (e.target.readOnly) {
             return;
         }
-        !open && openOnFocus && handleOpen(true);
         const day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
         if ((0, utils_1.isValidDate)(day)) {
             setInputValue((0, utils_1.formatDateForInput)(day, locale, "date", inputFormat));
@@ -92,7 +82,7 @@ const useDatepicker = (opt = {}) => {
     const handleDayClick = (day, { selected }) => {
         if (day && !selected) {
             handleOpen(false);
-            inputRef.current && inputRef.current.focus();
+            anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.focus();
         }
         if (!required && selected) {
             updateDate(undefined);
@@ -151,18 +141,20 @@ const useDatepicker = (opt = {}) => {
         toDate,
         today,
         open,
+        onClose: () => {
+            handleOpen(false);
+            anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.focus();
+        },
         onOpenToggle: () => handleOpen(!open),
         disabled,
         disableWeekends,
-        bubbleEscape: true,
-        ref: setDaypickerRef,
     };
     const inputProps = {
         onChange: handleChange,
         onFocus: handleFocus,
         onBlur: handleBlur,
         value: inputValue,
-        ref: inputRef,
+        setAnchorRef,
     };
     return { datepickerProps, inputProps, reset, selectedDay, setSelected };
 };

package/cjs/date/hooks/useMonthPicker.js

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMonthpicker = void 0;
 const react_1 = require("react");
 const utils_1 = require("../utils");
-const useEscape_1 = require("./useEscape");
-const useOutsideClickHandler_1 = require("./useOutsideClickHandler");
 const getValidationMessage = (val = {}) => (Object.assign({ isDisabled: false, isEmpty: false, isInvalid: false, isBefore: false, isAfter: false, isValidMonth: true }, val));
 const getIsBefore = (opt) => opt.fromDate &&
     opt.date &&
@@ -30,13 +28,12 @@ const getIsAfter = (opt) => opt.toDate &&
  * });
  */
 const useMonthpicker = (opt = {}) => {
-    var _a, _b;
-    const { locale: _locale = "nb", defaultSelected: _defaultSelected, fromDate, toDate, disabled, required, onMonthChange, inputFormat, onValidate, defaultYear, allowTwoDigitYear = true, openOnFocus = true, } = opt;
+    var _a;
+    const { locale: _locale = "nb", defaultSelected: _defaultSelected, fromDate, toDate, disabled, required, onMonthChange, inputFormat, onValidate, defaultYear, allowTwoDigitYear = true, } = opt;
+    const [anchorRef, setAnchorRef] = (0, react_1.useState)(null);
     const [defaultSelected, setDefaultSelected] = (0, react_1.useState)(_defaultSelected);
     const today = (0, react_1.useMemo)(() => new Date(), []);
     const locale = (0, utils_1.getLocaleFromString)(_locale);
-    const inputRef = (0, react_1.useRef)(null);
-    const [monthpickerRef, setMonthpickerRef] = (0, react_1.useState)();
     // Initialize states
     const [year, setYear] = (0, react_1.useState)((_a = defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : defaultYear) !== null && _a !== void 0 ? _a : today);
     const [selectedMonth, setSelectedMonth] = (0, react_1.useState)(defaultSelected);
@@ -51,12 +48,6 @@ const useMonthpicker = (opt = {}) => {
         newOpen &&
             setYear((_b = (_a = selectedMonth !== null && selectedMonth !== void 0 ? selectedMonth : defaultSelected) !== null && _a !== void 0 ? _a : defaultYear) !== null && _b !== void 0 ? _b : today);
     }, [defaultSelected, defaultYear, selectedMonth, today]);
-    (0, useOutsideClickHandler_1.useOutsideClickHandler)(open, handleOpen, [
-        monthpickerRef,
-        inputRef.current,
-        (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.nextSibling,
-    ]);
-    (0, useEscape_1.useEscape)(open, handleOpen, inputRef);
     const updateMonth = (date) => {
         onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(date);
         setSelectedMonth(date);
@@ -80,7 +71,6 @@ const useMonthpicker = (opt = {}) => {
         if (e.target.readOnly) {
             return;
         }
-        !open && openOnFocus && handleOpen(true);
         const day = (0, utils_1.parseDate)(e.target.value, today, locale, "month", allowTwoDigitYear);
         const isBefore = getIsBefore({ fromDate, date: day });
         const isAfter = getIsAfter({ toDate, date: day });
@@ -101,8 +91,8 @@ const useMonthpicker = (opt = {}) => {
     const handleMonthClick = (month) => {
         if (month) {
             handleOpen(false);
-            inputRef.current && inputRef.current.focus();
             setYear(month);
+            anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.focus();
         }
         if (!required && !month) {
             updateMonth(undefined);
@@ -160,16 +150,18 @@ const useMonthpicker = (opt = {}) => {
         toDate,
         open,
         onOpenToggle: () => handleOpen(!open),
+        onClose: () => {
+            handleOpen(false);
+            anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.focus();
+        },
         disabled,
-        bubbleEscape: true,
-        ref: setMonthpickerRef,
     };
     const inputProps = {
         onChange: handleChange,
         onFocus: handleFocus,
         onBlur: handleBlur,
         value: inputValue,
-        ref: inputRef,
+        setAnchorRef,
     };
     return { monthpickerProps, inputProps, reset, selectedMonth, setSelected };
 };

package/cjs/date/hooks/useRangeDatepicker.js

@@ -10,8 +10,6 @@ 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 useEscape_1 = require("./useEscape");
-const useOutsideClickHandler_1 = require("./useOutsideClickHandler");
 const getValidationMessage = (from = {}, to = {}) => ({
     from: Object.assign({ isDisabled: false, isWeekend: false, isEmpty: false, isInvalid: false, isBefore: false, isAfter: false, isValidDate: true }, from),
     to: Object.assign({ isDisabled: false, isWeekend: false, isEmpty: false, isInvalid: false, isBefore: false, isAfter: false, isBeforeFrom: false, isValidDate: true }, to),
@@ -93,12 +91,9 @@ const initialValidation = (range, opt) => {
  * });
  */
 const useRangeDatepicker = (opt = {}) => {
-    var _a, _b;
-    const { locale: _locale = "nb", defaultSelected: _defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, onRangeChange, inputFormat, onValidate, defaultMonth, allowTwoDigitYear = true, openOnFocus = true, } = opt;
+    const { locale: _locale = "nb", defaultSelected: _defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, onRangeChange, inputFormat, onValidate, defaultMonth, allowTwoDigitYear = true, } = opt;
+    const [anchorRef, setAnchorRef] = (0, react_1.useState)(null);
     const locale = (0, utils_1.getLocaleFromString)(_locale);
-    const inputRefTo = (0, react_1.useRef)(null);
-    const inputRefFrom = (0, react_1.useRef)(null);
-    const [daypickerRef, setDaypickerRef] = (0, react_1.useState)();
     const [defaultSelected, setDefaultSelected] = (0, react_1.useState)(_defaultSelected);
     // Initialize states
     const [month, setMonth] = (0, react_1.useState)(defaultSelected ? defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.from : defaultMonth !== null && defaultMonth !== void 0 ? defaultMonth : today);
@@ -111,14 +106,6 @@ const useRangeDatepicker = (opt = {}) => {
         : "");
     const [validation, setValidation] = (0, react_1.useState)(initialValidation(selectedRange, opt));
     const [open, setOpen] = (0, react_1.useState)(false);
-    (0, useOutsideClickHandler_1.useOutsideClickHandler)(open, setOpen, [
-        daypickerRef,
-        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,
-    ]);
-    (0, useEscape_1.useEscape)(open, setOpen, (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) && !(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) ? inputRefTo : inputRefFrom);
     const updateRange = (range) => {
         onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange(range);
         setSelectedRange(range);
@@ -154,7 +141,6 @@ const useRangeDatepicker = (opt = {}) => {
         if (e.target.readOnly) {
             return;
         }
-        !open && openOnFocus && setOpen(true);
         const day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
         if ((0, utils_1.isValidDate)(day)) {
             src === RANGE.FROM
@@ -185,6 +171,7 @@ const useRangeDatepicker = (opt = {}) => {
     const handleSelect = (range) => {
         if ((range === null || range === void 0 ? void 0 : range.from) && (range === null || range === void 0 ? void 0 : range.to)) {
             setOpen(false);
+            anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.focus();
         }
         const prevToRange = !(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) ? selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to : range === null || range === void 0 ? void 0 : range.to;
         const resetTo = (0, isBefore_1.default)(prevToRange, range === null || range === void 0 ? void 0 : range.from);
@@ -301,24 +288,26 @@ const useRangeDatepicker = (opt = {}) => {
         mode: "range",
         open,
         onOpenToggle: () => setOpen((x) => !x),
+        onClose: () => {
+            setOpen(false);
+            anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.focus();
+        },
         disabled,
         disableWeekends,
-        bubbleEscape: true,
-        ref: setDaypickerRef,
     };
     const fromInputProps = {
         onChange: (e) => handleChange(e, RANGE.FROM),
         onFocus: (e) => handleFocus(e, RANGE.FROM),
         onBlur: (e) => handleBlur(e, RANGE.FROM),
         value: fromInputValue,
-        ref: inputRefFrom,
+        setAnchorRef,
     };
     const toInputProps = {
         onChange: (e) => handleChange(e, RANGE.TO),
         onFocus: (e) => handleFocus(e, RANGE.TO),
         onBlur: (e) => handleBlur(e, RANGE.TO),
         value: toInputValue,
-        ref: inputRefTo,
+        setAnchorRef,
     };
     return {
         datepickerProps,

package/cjs/date/monthpicker/MonthPicker.js

@@ -30,10 +30,10 @@ 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 popover_1 = require("../../popover");
 const util_1 = require("../../util");
-const DateInput_1 = require("../DateInput");
 const context_1 = require("../context");
+const DateInput_1 = require("../parts/DateInput");
+const DateWrapper_1 = require("../parts/DateWrapper");
 const utils_1 = require("../utils");
 const MonthCaption_1 = __importDefault(require("./MonthCaption"));
 const MonthPickerStandalone_1 = __importDefault(require("./MonthPickerStandalone"));
@@ -60,10 +60,11 @@ 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, strategy = "absolute", bubbleEscape = false, }, ref) => {
+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, strategy = "absolute", }, ref) => {
     const ariaId = (0, util_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 mergedRef = (0, react_1.useMemo)(() => (0, util_1.mergeRefs)([wrapperRef, ref]), [ref]);
     const [selectedMonth, setSelectedMonth] = (0, react_1.useState)(defaultSelected);
     const handleSelect = (month) => {
         var _a;
@@ -82,15 +83,19 @@ exports.MonthPicker = (0, react_1.forwardRef)(({ children, dropdownCaption = fal
                 onOpenToggle === null || onOpenToggle === void 0 ? void 0 : onOpenToggle();
             },
             ariaId,
+            defined: true,
         } },
-        react_1.default.createElement("div", { ref: wrapperRef, className: (0, clsx_1.default)("navds-date__wrapper", wrapperClassName) },
+        react_1.default.createElement("div", { ref: mergedRef, className: (0, clsx_1.default)("navds-date__wrapper", wrapperClassName) },
             children,
-            (_open !== null && _open !== void 0 ? _open : open) && (react_1.default.createElement(popover_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 navds-date__popover", strategy: strategy, bubbleEscape: bubbleEscape, flip: false },
+            react_1.default.createElement(DateWrapper_1.DateWrapper, { open: _open !== null && _open !== void 0 ? _open : open, anchor: wrapperRef.current, onClose: () => { var _a; return (_a = onClose === null || onClose === void 0 ? void 0 : onClose()) !== null && _a !== void 0 ? _a : setOpen(false); }, locale: locale, variant: "month", popoverProps: {
+                    id: ariaId,
+                    strategy,
+                } },
                 react_1.default.createElement(react_day_picker_1.RootProvider, { locale: (0, utils_1.getLocaleFromString)(locale), selected: selected !== null && selected !== void 0 ? selected : selectedMonth, 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(context_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)))))))));
+                            react_1.default.createElement(MonthSelector_1.default, null))))))));
 });
 exports.MonthPicker.Standalone = MonthPickerStandalone_1.default;
 exports.MonthPicker.Input = DateInput_1.MonthPickerInput;

package/cjs/date/{DateInput.js → parts/DateInput.js}

@@ -41,13 +41,14 @@ exports.MonthPickerInput = exports.DatePickerInput = void 0;
 const aksel_icons_1 = require("@navikt/aksel-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const useFormField_1 = require("../form/useFormField");
-const context_1 = require("./context");
-const ReadOnlyIcon_1 = require("../form/ReadOnlyIcon");
-const typography_1 = require("../typography");
-const util_1 = require("../util");
+const ReadOnlyIcon_1 = require("../../form/ReadOnlyIcon");
+const useFormField_1 = require("../../form/useFormField");
+const typography_1 = require("../../typography");
+const util_1 = require("../../util");
+const context_1 = require("../context");
 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 { className, hideLabel = false, label, description, variant = "datepicker", setAnchorRef } = props, rest = __rest(props, ["className", "hideLabel", "label", "description", "variant", "setAnchorRef"]);
+    const buttonRef = (0, react_1.useRef)(null);
     const isDatepickerVariant = variant === "datepicker";
     const conditionalVariables = {
         prefix: isDatepickerVariant ? "datepicker-input" : "monthpicker-input",
@@ -56,7 +57,7 @@ const DateInput = (0, react_1.forwardRef)((props, ref) => {
             close: isDatepickerVariant ? "Lukk datovelger" : "Lukk månedsvelger",
         },
     };
-    const { onOpen, ariaId, open } = (0, context_1.useDateInputContext)();
+    const context = (0, context_1.useDateInputContext)();
     const { inputProps, size = "medium", inputDescriptionId, errorId, showErrorMsg, hasError, readOnly, } = (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,
@@ -76,9 +77,12 @@ const DateInput = (0, react_1.forwardRef)((props, ref) => {
                 "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, util_1.omit)(rest, ["error", "errorId", "size"]), inputProps, { autoComplete: "off", "aria-controls": open ? ariaId : undefined, readOnly: readOnly, className: (0, clsx_1.default)("navds-date__field-input", "navds-text-field__input", "navds-body-short", `navds-body-short--${size}`), size: isDatepickerVariant ? 10 : 14 })),
-            react_1.default.createElement("button", { disabled: inputProps.disabled || readOnly, tabIndex: readOnly ? -1 : open ? -1 : 0, onClick: () => onOpen(), type: "button", className: "navds-date__field-button" },
-                react_1.default.createElement(aksel_icons_1.CalendarIcon, { pointerEvents: "none", title: open
+            react_1.default.createElement("input", Object.assign({ ref: ref }, (0, util_1.omit)(rest, ["error", "errorId", "size"]), inputProps, { autoComplete: "off", "aria-controls": (context === null || context === void 0 ? void 0 : context.open) ? context.ariaId : undefined, readOnly: readOnly, className: (0, clsx_1.default)("navds-date__field-input", "navds-text-field__input", "navds-body-short", `navds-body-short--${size}`), size: isDatepickerVariant ? 11 : 14 })),
+            react_1.default.createElement("button", { disabled: inputProps.disabled || readOnly, tabIndex: readOnly ? -1 : (context === null || context === void 0 ? void 0 : context.open) ? -1 : 0, onClick: () => {
+                    context === null || context === void 0 ? void 0 : context.onOpen();
+                    setAnchorRef === null || setAnchorRef === void 0 ? void 0 : setAnchorRef(buttonRef.current);
+                }, type: "button", className: "navds-date__field-button", ref: buttonRef },
+                react_1.default.createElement(aksel_icons_1.CalendarIcon, { pointerEvents: "none", title: (context === null || context === void 0 ? void 0 : context.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(typography_1.ErrorMessage, { size: size }, props.error))));

package/cjs/date/parts/DateWrapper.js

@@ -0,0 +1,55 @@
+"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.DateWrapper = void 0;
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+const button_1 = require("../../button");
+const modal_1 = require("../../modal");
+const ModalContext_1 = require("../../modal/ModalContext");
+const popover_1 = require("../../popover");
+const useMedia_1 = require("../../util/useMedia");
+const labels_1 = require("../utils/labels");
+const DateWrapper = ({ open, children, onClose, anchor, locale, variant, popoverProps, }) => {
+    const modalRef = (0, react_1.useRef)(null);
+    const isInModal = (0, react_1.useContext)(ModalContext_1.ModalContext) !== null;
+    const hideModal = (0, useMedia_1.useMedia)("screen and (min-width: 768px)", true) && !isInModal;
+    if (hideModal) {
+        return (react_1.default.createElement(popover_1.Popover, Object.assign({ arrow: false, anchorEl: anchor, open: open, onClose: onClose, placement: "bottom-start", role: "dialog", className: (0, clsx_1.default)("navds-date__popover", {
+                "navds-date": variant === "month",
+            }), flip: false }, popoverProps), children));
+    }
+    return (react_1.default.createElement(modal_1.Modal, { ref: modalRef, open: open, onClose: onClose, "aria-label": (0, labels_1.modalLabel)(locale, variant), className: (0, clsx_1.default)("navds-date__modal", {
+            "navds-date__nested-modal": isInModal,
+            "navds-date": variant === "month",
+        }), closeOnBackdropClick: true },
+        react_1.default.createElement("div", { className: "navds-date__modal-body" },
+            children,
+            react_1.default.createElement(button_1.Button, { variant: "tertiary", onClick: () => { var _a; return (_a = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current) === null || _a === void 0 ? void 0 : _a.close(); }, size: "small" }, (0, labels_1.modalCloseButtonLabel)(locale)))));
+};
+exports.DateWrapper = DateWrapper;

package/cjs/date/utils/labels.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.labelWeek = exports.labelWeekNumberButton = exports.labelWeekNumber = exports.labels = exports.labelPrevYear = exports.labelNextYear = exports.labelMonthDropdown = exports.labelYearDropdown = void 0;
+exports.modalCloseButtonLabel = exports.modalLabel = exports.labelWeek = exports.labelWeekNumberButton = exports.labelWeekNumber = exports.labels = exports.labelPrevYear = exports.labelNextYear = exports.labelMonthDropdown = exports.labelYearDropdown = void 0;
 const labelNext = (date, options) => {
     var _a;
     switch ((_a = options === null || options === void 0 ? void 0 : options.locale) === null || _a === void 0 ? void 0 : _a.code) {
@@ -122,3 +122,79 @@ const labelWeek = (localeCode) => {
     }
 };
 exports.labelWeek = labelWeek;
+const modalLabelSingle = (localeCode) => {
+    switch (localeCode) {
+        case "nb":
+            return `Velg dato`;
+        case "nn":
+            return `Vel dato`;
+        case "en-GB":
+            return `Pick a date`;
+        default:
+            return `Velg dato`;
+    }
+};
+const modalLabelMultiple = (localeCode) => {
+    switch (localeCode) {
+        case "nb":
+            return `Velg datoer`;
+        case "nn":
+            return `Vel datoar`;
+        case "en-GB":
+            return `Pick dates`;
+        default:
+            return `Velg datoer`;
+    }
+};
+const modalLabelRanged = (localeCode) => {
+    switch (localeCode) {
+        case "nb":
+            return `Velg start- og sluttdato`;
+        case "nn":
+            return `Vel start- og sluttdato`;
+        case "en-GB":
+            return `Pick a start and end date`;
+        default:
+            return `Velg start- og sluttdato`;
+    }
+};
+const modalLabelMonth = (localeCode) => {
+    switch (localeCode) {
+        case "nb":
+            return `Velg måned`;
+        case "nn":
+            return `Vel månad`;
+        case "en-GB":
+            return `Pick a month`;
+        default:
+            return `Velg måned`;
+    }
+};
+const modalLabel = (localeCode, variant) => {
+    switch (variant) {
+        case "single":
+            return modalLabelSingle(localeCode);
+        case "multiple":
+            return modalLabelMultiple(localeCode);
+        case "range":
+            return modalLabelRanged(localeCode);
+        case "month":
+            return modalLabelMonth(localeCode);
+        default:
+            return modalLabelSingle(localeCode);
+    }
+};
+exports.modalLabel = modalLabel;
+const modalCloseButtonLabel = (localeCode) => {
+    switch (localeCode) {
+        case "nb":
+            return `Lukk`;
+        case "nn":
+            return `Lukk`;
+        case "en-GB":
+            return `Close`;
+        default:
+            return `Lukk`;
+    }
+};
+exports.modalCloseButtonLabel = modalCloseButtonLabel;

package/cjs/form/combobox/Combobox.js

@@ -54,7 +54,7 @@ const typography_1 = require("../../typography");
 exports.Combobox = (0, react_1.forwardRef)((props, ref) => {
     const { className, hideLabel = false, description, label, clearButton = true, clearButtonLabel, toggleListButton = true, toggleListButtonLabel, inputClassName, shouldShowSelectedOptions = true } = props, rest = __rest(props, ["className", "hideLabel", "description", "label", "clearButton", "clearButtonLabel", "toggleListButton", "toggleListButtonLabel", "inputClassName", "shouldShowSelectedOptions"]);
     const toggleListButtonRef = (0, react_1.useRef)(null);
-    const { currentOption, toggleIsListOpen } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
+    const { activeDecendantId, toggleIsListOpen } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
     const { selectedOptions } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
     const { clearInput, error, errorId, focusInput, hasError, inputDescriptionId, inputProps, inputRef, value, showErrorMsg, size = "medium", } = (0, inputContext_1.useInputContext)();
     const mergedInputRef = (0, react_1.useMemo)(() => (0, util_1.mergeRefs)([inputRef, ref]), [inputRef, ref]);
@@ -67,7 +67,7 @@ exports.Combobox = (0, react_1.forwardRef)((props, ref) => {
             }), id: inputDescriptionId, size: size }, description)),
         react_1.default.createElement("div", { className: "navds-combobox__wrapper" },
             react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-combobox__wrapper-inner navds-text-field__input", {
-                    "navds-combobox__wrapper-inner--virtually-unfocused": currentOption !== null,
+                    "navds-combobox__wrapper-inner--virtually-unfocused": activeDecendantId !== null,
                 }), onClick: focusInput },
                 !shouldShowSelectedOptions ? (react_1.default.createElement(Input_1.default, Object.assign({ id: inputProps.id, ref: mergedInputRef, inputClassName: inputClassName }, rest))) : (react_1.default.createElement(SelectedOptions_1.default, { selectedOptions: selectedOptions, size: size },
                     react_1.default.createElement(Input_1.default, Object.assign({ id: inputProps.id, ref: mergedInputRef, inputClassName: inputClassName }, rest)))),

package/cjs/form/combobox/ComboboxProvider.js

@@ -78,7 +78,7 @@ const ComboboxProvider = (0, react_1.forwardRef)((props, ref) => {
             shouldAutocomplete,
             size,
         } },
-        react_1.default.createElement(customOptionsContext_1.CustomOptionsProvider, null,
+        react_1.default.createElement(customOptionsContext_1.CustomOptionsProvider, { value: { isMultiSelect } },
             react_1.default.createElement(selectedOptionsContext_1.SelectedOptionsProvider, { value: {
                     allowNewValues,
                     isMultiSelect,
@@ -91,7 +91,6 @@ const ComboboxProvider = (0, react_1.forwardRef)((props, ref) => {
                         filteredOptions,
                         isListOpen,
                         isLoading,
-                        isMultiSelect,
                         options,
                     } },
                     react_1.default.createElement(Combobox_1.default, Object.assign({ ref: ref }, rest), children))))));