@navikt/ds-react 5.7.6 → 5.9.0

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))))));

package/cjs/form/combobox/FilteredOptions/FilteredOptions.js

@@ -11,27 +11,28 @@ const selectedOptionsContext_1 = require("../SelectedOptions/selectedOptionsCont
 const inputContext_1 = require("../Input/inputContext");
 const loader_1 = require("../../../loader");
 const typography_1 = require("../../../typography");
+const filtered_options_util_1 = __importDefault(require("./filtered-options-util"));
 const FilteredOptions = () => {
     const { inputProps: { id }, size, value, } = (0, inputContext_1.useInputContext)();
-    const { allowNewValues, isLoading, isListOpen, filteredOptions, filteredOptionsIndex, filteredOptionsRef, isMouseLastUsedInputDevice, setIsMouseLastUsedInputDevice, isValueNew, setFilteredOptionsIndex, toggleIsListOpen, } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
+    const { allowNewValues, isLoading, isListOpen, filteredOptions, setFilteredOptionsRef, isMouseLastUsedInputDevice, setIsMouseLastUsedInputDevice, isValueNew, toggleIsListOpen, activeDecendantId, virtualFocus, } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
     const { isMultiSelect, selectedOptions, toggleOption } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
-    return (react_1.default.createElement("ul", { ref: filteredOptionsRef, className: (0, clsx_1.default)("navds-combobox__list", {
+    return (react_1.default.createElement("ul", { ref: setFilteredOptionsRef, className: (0, clsx_1.default)("navds-combobox__list", {
             "navds-combobox__list--closed": !isListOpen,
             "navds-combobox__list--with-hover": isMouseLastUsedInputDevice,
-        }), id: `${id}-filtered-options`, role: "listbox", tabIndex: -1 },
-        isLoading && (react_1.default.createElement("li", { className: "navds-combobox__list-item--loading", role: "option", "aria-selected": false, id: `${id}-is-loading` },
+        }), id: filtered_options_util_1.default.getFilteredOptionsId(id), role: "listbox", tabIndex: -1 },
+        isLoading && (react_1.default.createElement("li", { className: "navds-combobox__list-item--loading", role: "option", "aria-selected": false, id: filtered_options_util_1.default.getIsLoadingId(id), "data-no-focus": "true" },
             react_1.default.createElement(loader_1.Loader, { "aria-label": "S\u00F8ker..." }))),
         isValueNew && allowNewValues && (react_1.default.createElement("li", { tabIndex: -1, onMouseMove: () => {
-                if (filteredOptionsIndex !== -1) {
-                    setFilteredOptionsIndex(-1);
+                if (activeDecendantId !== filtered_options_util_1.default.getAddNewOptionId(id)) {
+                    virtualFocus.moveFocusToElement(filtered_options_util_1.default.getAddNewOptionId(id));
                     setIsMouseLastUsedInputDevice(true);
                 }
             }, onPointerUp: (event) => {
                 toggleOption(value, event);
                 if (!isMultiSelect && !selectedOptions.includes(value))
                     toggleIsListOpen(false);
-            }, id: `${id}-combobox-new-option`, className: (0, clsx_1.default)("navds-combobox__list-item__new-option", {
-                "navds-combobox__list-item__new-option--focus": filteredOptionsIndex === -1,
+            }, id: filtered_options_util_1.default.getAddNewOptionId(id), className: (0, clsx_1.default)("navds-combobox__list-item__new-option", {
+                "navds-combobox__list-item__new-option--focus": activeDecendantId === filtered_options_util_1.default.getAddNewOptionId(id),
             }), role: "option", "aria-selected": false },
             react_1.default.createElement(aksel_icons_1.PlusIcon, { "aria-hidden": true }),
             react_1.default.createElement(typography_1.BodyShort, { size: size },
@@ -41,13 +42,13 @@ const FilteredOptions = () => {
                     "\u201C",
                     value,
                     "\u201D")))),
-        !isLoading && filteredOptions.length === 0 && (react_1.default.createElement("li", { className: "navds-combobox__list-item__no-options", role: "option", "aria-selected": false, id: `${id}-no-hits` }, "Ingen s\u00F8ketreff")),
-        filteredOptions.map((option, index) => (react_1.default.createElement("li", { className: (0, clsx_1.default)("navds-combobox__list-item", {
-                "navds-combobox__list-item--focus": index === filteredOptionsIndex,
+        !isLoading && filteredOptions.length === 0 && (react_1.default.createElement("li", { className: "navds-combobox__list-item__no-options", role: "option", "aria-selected": false, id: filtered_options_util_1.default.getNoHitsId(id), "data-no-focus": "true" }, "Ingen s\u00F8ketreff")),
+        filteredOptions.map((option) => (react_1.default.createElement("li", { className: (0, clsx_1.default)("navds-combobox__list-item", {
+                "navds-combobox__list-item--focus": activeDecendantId === filtered_options_util_1.default.getOptionId(id, option),
                 "navds-combobox__list-item--selected": selectedOptions.includes(option),
-            }), id: `${id}-option-${option.replace(" ", "-")}`, key: option, tabIndex: -1, onMouseMove: () => {
-                if (filteredOptionsIndex !== index) {
-                    setFilteredOptionsIndex(index);
+            }), id: filtered_options_util_1.default.getOptionId(id, option), key: option, tabIndex: -1, onMouseMove: () => {
+                if (activeDecendantId !== filtered_options_util_1.default.getOptionId(id, option)) {
+                    virtualFocus.moveFocusToElement(filtered_options_util_1.default.getOptionId(id, option));
                     setIsMouseLastUsedInputDevice(true);
                 }
             }, onPointerUp: (event) => {

package/cjs/form/combobox/FilteredOptions/filtered-options-util.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const normalizeText = (text) => typeof text === "string" ? text.toLocaleLowerCase().trim() : "";
+const isPartOfText = (value, text) => normalizeText(text).startsWith(normalizeText(value !== null && value !== void 0 ? value : ""));
+const isValueInList = (value, list) => list === null || list === void 0 ? void 0 : list.find((listItem) => normalizeText(value) === normalizeText(listItem));
+const getMatchingValuesFromList = (value, list) => list === null || list === void 0 ? void 0 : list.filter((listItem) => isPartOfText(value, listItem));
+const getFilteredOptionsId = (comboboxId) => `${comboboxId}-filtered-options`;
+const getOptionId = (comboboxId, option) => `${comboboxId.toLocaleLowerCase()}-option-${option
+    .replace(" ", "-")
+    .toLocaleLowerCase()}`;
+const getAddNewOptionId = (comboboxId) => `${comboboxId}-combobox-new-option`;
+const getIsLoadingId = (comboboxId) => `${comboboxId}-is-loading`;
+const getNoHitsId = (comboboxId) => `${comboboxId}-no-hits`;
+exports.default = {
+    normalizeText,
+    isPartOfText,
+    isValueInList,
+    getMatchingValuesFromList,
+    getFilteredOptionsId,
+    getAddNewOptionId,
+    getOptionId,
+    getIsLoadingId,
+    getNoHitsId,
+};

package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.js

@@ -33,16 +33,14 @@ const customOptionsContext_1 = require("../customOptionsContext");
 const inputContext_1 = require("../Input/inputContext");
 const usePrevious_1 = __importDefault(require("../../../util/usePrevious"));
 const util_1 = require("../../../util");
-const normalizeText = (text) => typeof text === "string" ? `${text}`.toLowerCase().trim() : "";
-const isPartOfText = (value, text) => normalizeText(text).startsWith(normalizeText(value !== null && value !== void 0 ? value : ""));
-const isValueInList = (value, list) => list === null || list === void 0 ? void 0 : list.find((listItem) => normalizeText(value) === normalizeText(listItem));
-const getMatchingValuesFromList = (value, list) => list === null || list === void 0 ? void 0 : list.filter((listItem) => isPartOfText(value, listItem));
+const filtered_options_util_1 = __importDefault(require("./filtered-options-util"));
+const useVirtualFocus_1 = __importDefault(require("./useVirtualFocus"));
 const FilteredOptionsContext = (0, react_1.createContext)({});
-const FilteredOptionsProvider = ({ children, value: props }) => {
+const FilteredOptionsProvider = ({ children, value: props, }) => {
     const { allowNewValues, filteredOptions: externalFilteredOptions, isListOpen: isExternalListOpen, isLoading, options, } = props;
-    const filteredOptionsRef = (0, react_1.useRef)(null);
+    const [filteredOptionsRef, setFilteredOptionsRef] = (0, react_1.useState)(null);
+    const virtualFocus = (0, useVirtualFocus_1.default)(filteredOptionsRef);
     const { inputProps: { "aria-describedby": partialAriaDescribedBy, id }, value, searchTerm, setValue, setSearchTerm, shouldAutocomplete, } = (0, inputContext_1.useInputContext)();
-    const [filteredOptionsIndex, setFilteredOptionsIndex] = (0, react_1.useState)(null);
     const [isInternalListOpen, setInternalListOpen] = (0, react_1.useState)(false);
     const { customOptions } = (0, customOptionsContext_1.useCustomOptionsContext)();
     const filteredOptions = (0, react_1.useMemo)(() => {
@@ -50,17 +48,20 @@ const FilteredOptionsProvider = ({ children, value: props }) => {
             return externalFilteredOptions;
         }
         const opts = [...customOptions, ...options];
-        setFilteredOptionsIndex(null);
-        return getMatchingValuesFromList(searchTerm, opts);
+        return filtered_options_util_1.default.getMatchingValuesFromList(searchTerm, opts);
     }, [customOptions, externalFilteredOptions, options, searchTerm]);
     const previousSearchTerm = (0, usePrevious_1.default)(searchTerm);
     const [isMouseLastUsedInputDevice, setIsMouseLastUsedInputDevice] = (0, react_1.useState)(false);
+    const filteredOptionsMap = (0, react_1.useMemo)(() => options.reduce((map, _option) => (Object.assign(Object.assign({}, map), { [filtered_options_util_1.default.getOptionId(id, _option)]: _option })), {
+        [filtered_options_util_1.default.getAddNewOptionId(id)]: allowNewValues
+            ? value
+            : undefined,
+    }), [allowNewValues, id, options, value]);
     (0, util_1.useClientLayoutEffect)(() => {
         if (shouldAutocomplete &&
-            normalizeText(searchTerm) !== "" &&
+            filtered_options_util_1.default.normalizeText(searchTerm) !== "" &&
             ((previousSearchTerm === null || previousSearchTerm === void 0 ? void 0 : previousSearchTerm.length) || 0) < searchTerm.length &&
-            filteredOptions.length > 0 &&
-            !isValueInList(searchTerm, filteredOptions)) {
+            filteredOptions.length > 0) {
             setValue(`${searchTerm}${filteredOptions[0].substring(searchTerm.length)}`);
             setSearchTerm(searchTerm);
         }
@@ -76,24 +77,22 @@ const FilteredOptionsProvider = ({ children, value: props }) => {
         return isExternalListOpen !== null && isExternalListOpen !== void 0 ? isExternalListOpen : isInternalListOpen;
     }, [isExternalListOpen, isInternalListOpen]);
     const toggleIsListOpen = (0, react_1.useCallback)((newState) => {
-        setFilteredOptionsIndex(null);
+        virtualFocus.moveFocusToTop();
         setInternalListOpen((oldState) => newState !== null && newState !== void 0 ? newState : !oldState);
-    }, []);
-    const isValueNew = (0, react_1.useMemo)(() => Boolean(value) && !isValueInList(value, filteredOptions), [value, filteredOptions]);
-    const getMinimumIndex = (0, react_1.useCallback)(() => {
-        return isValueNew && allowNewValues ? -1 : 0;
-    }, [allowNewValues, isValueNew]);
+    }, [virtualFocus]);
+    const isValueNew = (0, react_1.useMemo)(() => Boolean(value) &&
+        !filteredOptionsMap[filtered_options_util_1.default.getOptionId(id, value)], [filteredOptionsMap, id, value]);
     const ariaDescribedBy = (0, react_1.useMemo)(() => {
         let activeOption;
         if (!isLoading && filteredOptions.length === 0) {
-            activeOption = `${id}-no-hits`;
+            activeOption = filtered_options_util_1.default.getNoHitsId(id);
         }
         else if ((value && value !== "") || isLoading) {
             if (shouldAutocomplete && filteredOptions[0]) {
-                activeOption = `${id}-option-${filteredOptions[0].replace(" ", "-")}`;
+                activeOption = filtered_options_util_1.default.getOptionId(id, filteredOptions[0]);
             }
             else if (isListOpen && isLoading) {
-                activeOption = `${id}-is-loading`;
+                activeOption = filtered_options_util_1.default.getIsLoadingId(id);
             }
         }
         return (0, clsx_1.default)(activeOption, partialAriaDescribedBy) || undefined;
@@ -106,91 +105,12 @@ const FilteredOptionsProvider = ({ children, value: props }) => {
         filteredOptions,
         id,
     ]);
-    const currentOption = (0, react_1.useMemo)(() => {
-        if (filteredOptionsIndex == null) {
-            return null;
-        }
-        if (filteredOptionsIndex === -1) {
-            return value;
-        }
-        return filteredOptions[filteredOptionsIndex];
-    }, [filteredOptionsIndex, filteredOptions, value]);
-    const resetFilteredOptionsIndex = () => {
-        setFilteredOptionsIndex(getMinimumIndex());
-    };
-    const scrollToOption = (0, react_1.useCallback)((newIndex) => {
-        if (filteredOptionsRef.current &&
-            filteredOptionsRef.current.children[newIndex]) {
-            const child = filteredOptionsRef.current.children[newIndex];
-            const { top, bottom } = child.getBoundingClientRect();
-            const parentRect = filteredOptionsRef.current.getBoundingClientRect();
-            if (top < parentRect.top || bottom > parentRect.bottom) {
-                child.scrollIntoView({ block: "nearest" });
-            }
-        }
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (filteredOptionsIndex !== null && isListOpen) {
-            scrollToOption(filteredOptionsIndex);
-        }
-    }, [filteredOptionsIndex, isListOpen, scrollToOption]);
-    const moveFocusToInput = (0, react_1.useCallback)(() => {
-        setFilteredOptionsIndex(null);
-        toggleIsListOpen(false);
-    }, [toggleIsListOpen]);
-    const moveFocusToEnd = (0, react_1.useCallback)(() => {
-        const lastIndex = filteredOptions.length - 1;
-        toggleIsListOpen(true);
-        setFilteredOptionsIndex(lastIndex);
-    }, [filteredOptions.length, toggleIsListOpen]);
-    const moveFocusUp = (0, react_1.useCallback)(() => {
-        if (filteredOptionsIndex === null) {
-            return;
-        }
-        if (filteredOptionsIndex === getMinimumIndex()) {
-            toggleIsListOpen(false);
-            setFilteredOptionsIndex(null);
-        }
-        else {
-            const newIndex = Math.max(getMinimumIndex(), filteredOptionsIndex - 1);
-            setFilteredOptionsIndex(newIndex);
-        }
-    }, [filteredOptionsIndex, getMinimumIndex, toggleIsListOpen]);
-    const moveFocusDown = (0, react_1.useCallback)(() => {
-        if (filteredOptionsIndex === null || !isListOpen) {
-            toggleIsListOpen(true);
-            if (allowNewValues || filteredOptions.length >= 1) {
-                setFilteredOptionsIndex(getMinimumIndex());
-            }
-            return;
-        }
-        const newIndex = Math.min(filteredOptionsIndex + 1, Math.max(getMinimumIndex(), filteredOptions.length - 1));
-        setFilteredOptionsIndex(newIndex);
-    }, [
-        allowNewValues,
-        filteredOptions.length,
-        filteredOptionsIndex,
-        getMinimumIndex,
-        isListOpen,
-        toggleIsListOpen,
-    ]);
-    const activeDecendantId = (0, react_1.useMemo)(() => {
-        if (filteredOptionsIndex === null) {
-            return undefined;
-        }
-        else if (filteredOptionsIndex === -1) {
-            return `${id}-combobox-new-option`;
-        }
-        else {
-            return `${id}-option-${currentOption === null || currentOption === void 0 ? void 0 : currentOption.replace(" ", "-")}`;
-        }
-    }, [filteredOptionsIndex, currentOption, id]);
+    const currentOption = (0, react_1.useMemo)(() => { var _a; return filteredOptionsMap[((_a = virtualFocus.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute("id")) || -1]; }, [filteredOptionsMap, virtualFocus]);
+    const activeDecendantId = (0, react_1.useMemo)(() => { var _a; return ((_a = virtualFocus.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute("id")) || undefined; }, [virtualFocus.activeElement]);
     const filteredOptionsState = {
         activeDecendantId,
         allowNewValues,
-        filteredOptionsRef,
-        filteredOptionsIndex,
-        setFilteredOptionsIndex,
+        setFilteredOptionsRef,
         shouldAutocomplete,
         isListOpen,
         isLoading,
@@ -200,11 +120,7 @@ const FilteredOptionsProvider = ({ children, value: props }) => {
         isValueNew,
         toggleIsListOpen,
         currentOption,
-        resetFilteredOptionsIndex,
-        moveFocusUp,
-        moveFocusDown,
-        moveFocusToInput,
-        moveFocusToEnd,
+        virtualFocus,
         ariaDescribedBy,
     };
     return (react_1.default.createElement(FilteredOptionsContext.Provider, { value: filteredOptionsState }, children));

package/cjs/form/combobox/FilteredOptions/useVirtualFocus.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const useVirtualFocus = (containerRef) => {
+    const [index, setIndex] = (0, react_1.useState)(-1);
+    const listOfAllChildren = (containerRef === null || containerRef === void 0 ? void 0 : containerRef.children)
+        ? Array.prototype.slice.call(containerRef === null || containerRef === void 0 ? void 0 : containerRef.children)
+        : [];
+    const elementsAbleToReceiveFocus = listOfAllChildren.filter((child) => child.getAttribute("data-no-focus") !== "true");
+    const activeElement = elementsAbleToReceiveFocus[index];
+    const getElementById = (id) => listOfAllChildren.find((element) => element.id === id);
+    const isFocusOnTheTop = index === 0;
+    const isFocusOnTheBottom = index === elementsAbleToReceiveFocus.length - 1;
+    const scrollToOption = (newIndex) => {
+        const indexOfElementToScrollTo = Math.min(Math.max(newIndex, 0), (containerRef === null || containerRef === void 0 ? void 0 : containerRef.children.length) || 0);
+        if (containerRef === null || containerRef === void 0 ? void 0 : containerRef.children[indexOfElementToScrollTo]) {
+            const child = containerRef.children[indexOfElementToScrollTo];
+            const { top, bottom } = child.getBoundingClientRect();
+            const parentRect = containerRef.getBoundingClientRect();
+            if (top < parentRect.top || bottom > parentRect.bottom) {
+                child.scrollIntoView({ block: "nearest" });
+            }
+        }
+    };
+    const _moveFocusAndScrollTo = (_index) => {
+        setIndex(_index);
+        scrollToOption(_index);
+    };
+    const moveFocusUp = () => _moveFocusAndScrollTo(Math.max(index - 1, -1));
+    const moveFocusDown = () => _moveFocusAndScrollTo(Math.min(index + 1, elementsAbleToReceiveFocus.length - 1));
+    const moveFocusToTop = () => _moveFocusAndScrollTo(-1);
+    const moveFocusToBottom = () => _moveFocusAndScrollTo(elementsAbleToReceiveFocus.length - 1);
+    const moveFocusToElement = (id) => {
+        const thisElement = elementsAbleToReceiveFocus.find((_element) => _element.getAttribute("id") === id);
+        const indexOfElement = thisElement
+            ? elementsAbleToReceiveFocus.indexOf(thisElement)
+            : -1;
+        if (indexOfElement >= 0) {
+            setIndex(indexOfElement);
+        }
+    };
+    return {
+        activeElement,
+        getElementById,
+        isFocusOnTheTop,
+        isFocusOnTheBottom,
+        setIndex,
+        moveFocusUp,
+        moveFocusDown,
+        moveFocusToElement,
+        moveFocusToTop,
+        moveFocusToBottom,
+    };
+};
+exports.default = useVirtualFocus;

package/cjs/form/combobox/Input/Input.js

@@ -43,20 +43,25 @@ const clsx_1 = __importDefault(require("clsx"));
 const selectedOptionsContext_1 = require("../SelectedOptions/selectedOptionsContext");
 const filteredOptionsContext_1 = require("../FilteredOptions/filteredOptionsContext");
 const inputContext_1 = require("./inputContext");
+const filtered_options_util_1 = __importDefault(require("../FilteredOptions/filtered-options-util"));
 const Input = (0, react_1.forwardRef)((_a, ref) => {
     var { inputClassName } = _a, rest = __rest(_a, ["inputClassName"]);
     const { clearInput, inputProps, onChange, size, value } = (0, inputContext_1.useInputContext)();
     const { selectedOptions, removeSelectedOption, toggleOption, isMultiSelect, } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
-    const { activeDecendantId, allowNewValues, currentOption, filteredOptions, toggleIsListOpen, isListOpen, filteredOptionsIndex, moveFocusUp, moveFocusDown, ariaDescribedBy, moveFocusToInput, moveFocusToEnd, setFilteredOptionsIndex, setIsMouseLastUsedInputDevice, shouldAutocomplete, } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
+    const { activeDecendantId, allowNewValues, currentOption, filteredOptions, isValueNew, toggleIsListOpen, isListOpen, ariaDescribedBy, setIsMouseLastUsedInputDevice, shouldAutocomplete, virtualFocus, } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
     const onEnter = (0, react_1.useCallback)((event) => {
+        const isTextInSelectedOptions = (text) => {
+            return selectedOptions.find((item) => item.toLocaleLowerCase() === text.toLocaleLowerCase());
+        };
         if (currentOption) {
             event.preventDefault();
             // Selecting a value from the dropdown / FilteredOptions
             toggleOption(currentOption, event);
-            if (!isMultiSelect && !selectedOptions.includes(currentOption))
+            if (!isMultiSelect && !isTextInSelectedOptions(currentOption)) {
                 toggleIsListOpen(false);
+            }
         }
-        else if (shouldAutocomplete && selectedOptions.includes(value)) {
+        else if (shouldAutocomplete && isTextInSelectedOptions(value)) {
             event.preventDefault();
             // Trying to set the same value that is already set, so just clearing the input
             clearInput(event);
@@ -64,15 +69,20 @@ const Input = (0, react_1.forwardRef)((_a, ref) => {
         else if ((allowNewValues || shouldAutocomplete) && value !== "") {
             event.preventDefault();
             // Autocompleting or adding a new value
-            toggleOption(value, event);
-            if (!isMultiSelect && !selectedOptions.includes(value))
+            const selectedValue = allowNewValues && isValueNew ? value : filteredOptions[0];
+            toggleOption(selectedValue, event);
+            if (!isMultiSelect &&
+                !isTextInSelectedOptions(filteredOptions[0] || selectedValue)) {
                 toggleIsListOpen(false);
+            }
         }
     }, [
         allowNewValues,
         clearInput,
         currentOption,
+        filteredOptions,
         isMultiSelect,
+        isValueNew,
         selectedOptions,
         shouldAutocomplete,
         toggleIsListOpen,
@@ -91,10 +101,10 @@ const Input = (0, react_1.forwardRef)((_a, ref) => {
                 onEnter(e);
                 break;
             case "Home":
-                moveFocusToInput();
+                virtualFocus.moveFocusToTop();
                 break;
             case "End":
-                moveFocusToEnd();
+                virtualFocus.moveFocusToBottom();
                 break;
             default:
                 break;
@@ -113,26 +123,32 @@ const Input = (0, react_1.forwardRef)((_a, ref) => {
             // so we don't interfere with text editing
             if (e.target.selectionStart === (value === null || value === void 0 ? void 0 : value.length)) {
                 e.preventDefault();
-                moveFocusDown();
+                if (virtualFocus.activeElement === null || !isListOpen) {
+                    toggleIsListOpen(true);
+                }
+                virtualFocus.moveFocusDown();
             }
         }
         else if (e.key === "ArrowUp") {
             // Check that the FilteredOptions list is open and has virtual focus.
             // Otherwise ignore keystrokes, so it doesn't interfere with text editing
-            if (isListOpen && filteredOptionsIndex !== null) {
+            if (isListOpen && activeDecendantId) {
                 e.preventDefault();
-                moveFocusUp();
+                if (virtualFocus.isFocusOnTheTop) {
+                    toggleIsListOpen(false);
+                }
+                virtualFocus.moveFocusUp();
             }
         }
     }, [
         value,
         selectedOptions,
         removeSelectedOption,
-        moveFocusDown,
         isListOpen,
-        filteredOptionsIndex,
-        moveFocusUp,
+        activeDecendantId,
         setIsMouseLastUsedInputDevice,
+        toggleIsListOpen,
+        virtualFocus,
     ]);
     const onChangeHandler = (0, react_1.useCallback)((event) => {
         const newValue = event.target.value;
@@ -142,11 +158,12 @@ const Input = (0, react_1.forwardRef)((_a, ref) => {
         else if (filteredOptions.length === 0) {
             toggleIsListOpen(false);
         }
+        virtualFocus.moveFocusToTop();
         onChange(event);
-    }, [filteredOptions.length, onChange, toggleIsListOpen]);
+    }, [filteredOptions.length, virtualFocus, onChange, toggleIsListOpen]);
     const onBlur = () => {
-        setFilteredOptionsIndex(-1);
+        virtualFocus.moveFocusToTop();
     };
-    return (react_1.default.createElement("input", Object.assign({}, rest, (0, util_1.omit)(inputProps, ["aria-invalid"]), { ref: ref, value: value, onChange: onChangeHandler, type: "text", role: "combobox", onBlur: onBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, "aria-controls": `${inputProps.id}-filtered-options`, "aria-expanded": !!isListOpen, autoComplete: "off", "aria-autocomplete": shouldAutocomplete ? "both" : "list", "aria-activedescendant": activeDecendantId, "aria-describedby": ariaDescribedBy, "aria-invalid": inputProps["aria-invalid"], className: (0, clsx_1.default)(inputClassName, "navds-combobox__input", "navds-body-short", `navds-body-short--${size}`) })));
+    return (react_1.default.createElement("input", Object.assign({}, rest, (0, util_1.omit)(inputProps, ["aria-invalid"]), { ref: ref, value: value, onChange: onChangeHandler, type: "text", role: "combobox", onBlur: onBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, "aria-controls": filtered_options_util_1.default.getFilteredOptionsId(inputProps.id), "aria-expanded": !!isListOpen, autoComplete: "off", "aria-autocomplete": shouldAutocomplete ? "both" : "list", "aria-activedescendant": activeDecendantId, "aria-describedby": ariaDescribedBy, "aria-invalid": inputProps["aria-invalid"], className: (0, clsx_1.default)(inputClassName, "navds-combobox__input", "navds-body-short", `navds-body-short--${size}`) })));
 });
 exports.default = Input;

package/cjs/form/combobox/customOptionsContext.js

@@ -26,12 +26,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCustomOptionsContext = exports.CustomOptionsProvider = void 0;
 const react_1 = __importStar(require("react"));
 const inputContext_1 = require("./Input/inputContext");
-const selectedOptionsContext_1 = require("./SelectedOptions/selectedOptionsContext");
 const CustomOptionsContext = (0, react_1.createContext)({});
-const CustomOptionsProvider = ({ children }) => {
+const CustomOptionsProvider = ({ children, value, }) => {
     const [customOptions, setCustomOptions] = (0, react_1.useState)([]);
     const { focusInput } = (0, inputContext_1.useInputContext)();
-    const { isMultiSelect } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
+    const { isMultiSelect } = value;
     const removeCustomOption = (0, react_1.useCallback)((option) => {
         setCustomOptions((prevCustomOptions) => prevCustomOptions.filter((o) => o !== option));
         focusInput();

package/cjs/layout/sidemal-test/Sidebar.js

@@ -5,10 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NewsPanel = exports.ContentPanel = exports.Sidebar = void 0;
 const react_1 = __importDefault(require("react"));
+const link_1 = require("../../link");
 const typography_1 = require("../../typography");
 const box_1 = require("../box");
 const stack_1 = require("../stack");
-const link_1 = require("../../link");
 const LinkElement = ({ children }) => {
     return (react_1.default.createElement(typography_1.Label, { as: "li", className: "sidebarlink" }, children));
 };

package/cjs/loader/Loader.js

@@ -49,7 +49,7 @@ const util_1 = require("../util");
  *
  * @example
  * ```jsx
- * <Loader size="3xlarge" title="venter..." />
+ * <Loader size="3xlarge" title="Venter..." />
  * ```
  */
 exports.Loader = (0, react_1.forwardRef)((_a, ref) => {

package/cjs/modal/Modal.js

@@ -42,6 +42,7 @@ const react_1 = require("@floating-ui/react");
 const clsx_1 = __importDefault(require("clsx"));
 const react_2 = __importStar(require("react"));
 const react_dom_1 = require("react-dom");
+const context_1 = require("../date/context");
 const provider_1 = require("../provider");
 const typography_1 = require("../typography");
 const util_1 = require("../util");
@@ -99,13 +100,15 @@ const dialog_polyfill_1 = __importStar(require("./dialog-polyfill"));
  */
 exports.Modal = (0, react_2.forwardRef)((_a, ref) => {
     var _b, _c;
-    var { header, children, open, onBeforeClose, onCancel, width, portal, className, "aria-labelledby": ariaLabelledby, style } = _a, rest = __rest(_a, ["header", "children", "open", "onBeforeClose", "onCancel", "width", "portal", "className", "aria-labelledby", "style"]);
+    var { header, children, open, onBeforeClose, onCancel, closeOnBackdropClick, width, portal, className, "aria-labelledby": ariaLabelledby, style, onClick } = _a, rest = __rest(_a, ["header", "children", "open", "onBeforeClose", "onCancel", "closeOnBackdropClick", "width", "portal", "className", "aria-labelledby", "style", "onClick"]);
     const modalRef = (0, react_2.useRef)(null);
     const mergedRef = (0, react_2.useMemo)(() => (0, util_1.mergeRefs)([modalRef, ref]), [ref]);
     const ariaLabelId = (0, util_1.useId)();
     const rootElement = (_b = (0, provider_1.useProvider)()) === null || _b === void 0 ? void 0 : _b.rootElement;
     const portalNode = (0, react_1.useFloatingPortalNode)({ root: rootElement });
-    if ((0, react_2.useContext)(ModalContext_1.ModalContext)) {
+    const dateContext = (0, react_2.useContext)(context_1.DateContext);
+    const modalContext = (0, react_2.useContext)(ModalContext_1.ModalContext);
+    if (modalContext && !dateContext) {
         console.error("Modals should not be nested");
     }
     (0, react_2.useEffect)(() => {
@@ -115,6 +118,12 @@ exports.Modal = (0, react_2.forwardRef)((_a, ref) => {
         if (dialog_polyfill_1.needPolyfill && modalRef.current && portalNode) {
             dialog_polyfill_1.default.registerDialog(modalRef.current);
         }
+        // We set autofocus on the dialog element to prevent the default behavior where first focusable element gets focus when modal is opened.
+        // This is mainly to fix an edge case where having a Tooltip as the first focusable element would make it activate when you open the modal.
+        // We have to use JS because it doesn't work to set it with a prop (React bug?)
+        // Currently doesn't seem to work in Chrome. See also Tooltip.tsx
+        if (modalRef.current && portalNode)
+            modalRef.current.autofocus = true;
     }, [modalRef, portalNode]);
     (0, react_2.useEffect)(() => {
         // We need to have this in a useEffect so that the content renders before the modal is displayed,
@@ -131,22 +140,37 @@ exports.Modal = (0, react_2.forwardRef)((_a, ref) => {
     }, [modalRef, portalNode, open]);
     (0, ModalUtils_1.useBodyScrollLock)(modalRef, portalNode);
     const isWidthPreset = typeof width === "string" && ["small", "medium"].includes(width);
-    const component = (react_2.default.createElement("dialog", Object.assign({}, rest, { ref: mergedRef, className: (0, clsx_1.default)("navds-modal", className, {
-            "navds-modal--polyfilled": dialog_polyfill_1.needPolyfill,
-            "navds-modal--autowidth": !width,
-            [`navds-modal--${width}`]: isWidthPreset,
-        }), style: Object.assign(Object.assign({}, style), (!isWidthPreset ? { width } : {})), onCancel: (event) => {
-            // FYI: onCancel fires when you press Esc
-            if (onBeforeClose && onBeforeClose() === false) {
-                event.preventDefault();
+    const mergedClassName = (0, clsx_1.default)("navds-modal", className, {
+        "navds-modal--polyfilled": dialog_polyfill_1.needPolyfill,
+        "navds-modal--autowidth": !width,
+        [`navds-modal--${width}`]: isWidthPreset,
+    });
+    const mergedStyle = Object.assign(Object.assign({}, style), (!isWidthPreset ? { width } : {}));
+    const mergedOnCancel = (event) => {
+        if (onBeforeClose && onBeforeClose() === false) {
+            event.preventDefault();
+        }
+        else if (onCancel)
+            onCancel(event);
+    };
+    const mergedOnClick = closeOnBackdropClick && !dialog_polyfill_1.needPolyfill // closeOnBackdropClick has issues on polyfill when nesting modals (DatePicker)
+        ? (event) => {
+            onClick && onClick(event);
+            if (event.target === modalRef.current &&
+                (!onBeforeClose || onBeforeClose() !== false)) {
+                modalRef.current.close();
             }
-            else if (onCancel)
-                onCancel(event);
-        }, "aria-labelledby": !ariaLabelledby && !rest["aria-label"] && header
-            ? ariaLabelId
-            : ariaLabelledby }),
+        }
+        : onClick;
+    const mergedAriaLabelledBy = !ariaLabelledby && !rest["aria-label"] && header
+        ? ariaLabelId
+        : ariaLabelledby;
+    const component = (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+    react_2.default.createElement("dialog", Object.assign({}, rest, { ref: mergedRef, className: mergedClassName, style: mergedStyle, onCancel: mergedOnCancel, onClick: mergedOnClick, "aria-labelledby": mergedAriaLabelledBy }),
         react_2.default.createElement(ModalContext_1.ModalContext.Provider, { value: {
                 closeHandler: (0, ModalUtils_1.getCloseHandler)(modalRef, header, onBeforeClose),
+                ref: modalRef,
             } },
             header && (react_2.default.createElement(ModalHeader_1.default, null,
                 header.label && (react_2.default.createElement(typography_1.Detail, { className: "navds-modal__label" }, header.label)),

package/cjs/popover/Popover.js

@@ -41,6 +41,7 @@ exports.Popover = void 0;
 const react_1 = require("@floating-ui/react");
 const clsx_1 = __importDefault(require("clsx"));
 const react_2 = __importStar(require("react"));
+const context_1 = require("../date/context");
 const ModalContext_1 = require("../modal/ModalContext");
 const util_1 = require("../util");
 const PopoverContent_1 = __importDefault(require("./PopoverContent"));
@@ -65,11 +66,12 @@ const PopoverContent_1 = __importDefault(require("./PopoverContent"));
  * ```
  */
 exports.Popover = (0, react_2.forwardRef)((_a, ref) => {
-    var { className, children, anchorEl, arrow = true, open, onClose, placement = "top", offset, strategy: userStrategy, bubbleEscape = false, flip: _flip = true } = _a, rest = __rest(_a, ["className", "children", "anchorEl", "arrow", "open", "onClose", "placement", "offset", "strategy", "bubbleEscape", "flip"]);
+    var { className, children, anchorEl, arrow = true, open, onClose, placement = "top", offset, strategy: userStrategy, flip: _flip = true } = _a, rest = __rest(_a, ["className", "children", "anchorEl", "arrow", "open", "onClose", "placement", "offset", "strategy", "flip"]);
     const arrowRef = (0, react_2.useRef)(null);
     const isInModal = (0, react_2.useContext)(ModalContext_1.ModalContext) !== null;
+    const isInDatepicker = (0, react_2.useContext)(context_1.DateContext) !== null;
     const chosenStrategy = userStrategy !== null && userStrategy !== void 0 ? userStrategy : (isInModal ? "fixed" : "absolute");
-    const chosenFlip = isInModal ? true : _flip;
+    const chosenFlip = isInDatepicker ? false : _flip;
     const { x, y, strategy, context, update, refs, placement: flPlacement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }, } = (0, react_1.useFloating)({
         strategy: chosenStrategy,
         placement,
@@ -85,11 +87,7 @@ exports.Popover = (0, react_2.forwardRef)((_a, ref) => {
     });
     const { getFloatingProps } = (0, react_1.useInteractions)([
         (0, react_1.useClick)(context),
-        (0, react_1.useDismiss)(context, {
-            bubbles: {
-                escapeKey: bubbleEscape,
-            },
-        }),
+        (0, react_1.useDismiss)(context),
     ]);
     (0, util_1.useClientLayoutEffect)(() => {
         refs.setReference(anchorEl);