@navikt/ds-react 5.8.0 → 5.9.0

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,14 +48,18 @@ 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) {
             setValue(`${searchTerm}${filteredOptions[0].substring(searchTerm.length)}`);
@@ -75,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;
@@ -105,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,
@@ -199,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,11 +43,12 @@ 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, isValueNew, 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());
@@ -56,8 +57,9 @@ const Input = (0, react_1.forwardRef)((_a, ref) => {
             event.preventDefault();
             // Selecting a value from the dropdown / FilteredOptions
             toggleOption(currentOption, event);
-            if (!isMultiSelect && !isTextInSelectedOptions(currentOption))
+            if (!isMultiSelect && !isTextInSelectedOptions(currentOption)) {
                 toggleIsListOpen(false);
+            }
         }
         else if (shouldAutocomplete && isTextInSelectedOptions(value)) {
             event.preventDefault();
@@ -99,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;
@@ -121,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;
@@ -150,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/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");
@@ -105,7 +106,9 @@ exports.Modal = (0, react_2.forwardRef)((_a, 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)(() => {

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

package/cjs/util/useMedia.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMedia = exports.noMatchMedia = void 0;
+const react_1 = require("react");
+exports.noMatchMedia = typeof window !== "undefined" && window.matchMedia === undefined;
+/**
+ * @example useMedia("screen and (min-width: 1024px)")
+ * @param media string
+ * @param fallback boolean
+ * @returns boolean | undefined
+ */
+const useMedia = (media, fallback) => {
+    const [matches, setMatches] = (0, react_1.useState)(fallback);
+    (0, react_1.useEffect)(() => {
+        if (exports.noMatchMedia) {
+            return;
+        }
+        const mediaQueryList = window.matchMedia(media);
+        setMatches(mediaQueryList.matches);
+        const listener = (evt) => {
+            setMatches(evt.matches);
+        };
+        mediaQueryList.addEventListener("change", listener);
+        return () => {
+            mediaQueryList.removeEventListener("change", listener);
+        };
+    }, [media]);
+    return matches;
+};
+exports.useMedia = useMedia;

package/esm/date/context/useDateInputContext.d.ts

@@ -12,7 +12,11 @@ interface DateContextContextProps {
      * Aria-connected ID
      */
     ariaId?: string;
+    /**
+     * Flag for enabled-check
+     */
+    defined: boolean;
 }
-export declare const DateContext: import("react").Context<DateContextContextProps>;
-export declare const useDateInputContext: () => DateContextContextProps;
+export declare const DateContext: import("react").Context<DateContextContextProps | null>;
+export declare const useDateInputContext: () => DateContextContextProps | null;
 export {};

package/esm/date/context/useDateInputContext.js

@@ -1,9 +1,5 @@
 import { createContext, useContext } from "react";
-export const DateContext = createContext({
-    open: false,
-    onOpen: () => null,
-    ariaId: undefined,
-});
+export const DateContext = createContext(null);
 export const useDateInputContext = () => {
     const context = useContext(DateContext);
     if (!context) {

package/esm/date/context/useDateInputContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDateInputContext.js","sourceRoot":"","sources":["../../../src/date/context/useDateInputContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAiBlD,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAA0B;IAChE,IAAI,EAAE,KAAK;IACX,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI;IAClB,MAAM,EAAE,SAAS;CAClB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAExC,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,CAAC,IAAI,CAAC,mDAAmD,CAAC,CAAC;KACnE;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}
+{"version":3,"file":"useDateInputContext.js","sourceRoot":"","sources":["../../../src/date/context/useDateInputContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAqBlD,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAiC,IAAI,CAAC,CAAC;AAE/E,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAExC,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,CAAC,IAAI,CAAC,mDAAmD,CAAC,CAAC;KACnE;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}

package/esm/date/datepicker/DatePicker.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { DatePickerInput } from "../DateInput";
+import { DatePickerInput } from "../parts/DateInput";
 import DatePickerStandalone from "./DatePickerStandalone";
 import { ConditionalModeProps, DatePickerDefaultProps } from "./types";
 export type DatePickerProps = DatePickerDefaultProps & ConditionalModeProps;