@navikt/ds-react 5.0.3 → 5.2.0

package/README.md

@@ -33,4 +33,4 @@ function App() {
 
 ## License
 
-[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)
+[MIT](https://github.com/navikt/aksel/blob/main/LICENSE)

package/_docs.json

@@ -5904,6 +5904,25 @@
           "name": "number | \"medium\" | \"small\" | `${number}${string}`"
         }
       },
+      "portal": {
+        "defaultValue": null,
+        "description": "Lets you render the modal into a different part of the DOM.\nWill use `rootElement` from `Provider` if defined, otherwise `document.body`.",
+        "name": "portal",
+        "parent": {
+          "fileName": "src/modal/Modal.tsx",
+          "name": "ModalProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/modal/Modal.tsx",
+            "name": "ModalProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "User defined classname for modal",

package/cjs/button/Button.js

@@ -70,7 +70,16 @@ exports.Button = (0, react_1.forwardRef)((_a, ref) => {
         }
     }, [loading, children]);
     const filterProps = (disabled !== null && disabled !== void 0 ? disabled : widthOverride) ? (0, util_1.omit)(rest, ["href"]) : rest;
-    return (react_1.default.createElement(Component, Object.assign({}, filterProps, { ref: mergedRef, className: (0, clsx_1.default)(className, "navds-button", `navds-button--${variant}`, `navds-button--${size}`, {
+    return (react_1.default.createElement(Component, Object.assign({}, (Component !== "button" ? { role: "button" } : {}), filterProps, { ref: mergedRef, onKeyUp: (e) => {
+            var _a;
+            (_a = filterProps.onKeyUp) === null || _a === void 0 ? void 0 : _a.call(filterProps, e);
+            if (e.key === " " &&
+                !disabled &&
+                !widthOverride &&
+                !e.isDefaultPrevented()) {
+                e.currentTarget.click();
+            }
+        }, className: (0, clsx_1.default)(className, "navds-button", `navds-button--${variant}`, `navds-button--${size}`, {
             "navds-button--loading": widthOverride,
             "navds-button--icon-only": !!icon && !children,
             "navds-button--disabled": disabled !== null && disabled !== void 0 ? disabled : widthOverride,

package/cjs/date/DateInput.js

@@ -75,7 +75,7 @@ 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, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { autoComplete: "off", "aria-controls": ariaId, readOnly: readOnly, className: (0, clsx_1.default)("navds-date__field-input", "navds-text-field__input", "navds-body-short", `navds-body-${size}`), size: 14 })),
+            react_1.default.createElement("input", Object.assign({ ref: ref }, (0, __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-${size}`), size: 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
                         ? conditionalVariables.iconTitle.close

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

@@ -12,14 +12,20 @@ const selectedOptionsContext_1 = require("../SelectedOptions/selectedOptionsCont
 const inputContext_1 = require("../Input/inputContext");
 const FilteredOptions = () => {
     const { inputProps: { id }, size, value, } = (0, inputContext_1.useInputContext)();
-    const { allowNewValues, isLoading, isListOpen, filteredOptions, filteredOptionsIndex, filteredOptionsRef, isValueNew, toggleIsListOpen, } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
+    const { allowNewValues, isLoading, isListOpen, filteredOptions, filteredOptionsIndex, filteredOptionsRef, isMouseLastUsedInputDevice, setIsMouseLastUsedInputDevice, isValueNew, setFilteredOptionsIndex, toggleIsListOpen, } = (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", {
             "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` },
             react_1.default.createElement(__1.Loader, { "aria-label": "S\u00F8ker..." }))),
-        isValueNew && allowNewValues && (react_1.default.createElement("li", { tabIndex: -1, onPointerUp: (event) => {
+        isValueNew && allowNewValues && (react_1.default.createElement("li", { tabIndex: -1, onMouseMove: () => {
+                if (filteredOptionsIndex !== -1) {
+                    setFilteredOptionsIndex(-1);
+                    setIsMouseLastUsedInputDevice(true);
+                }
+            }, onPointerUp: (event) => {
                 toggleOption(value, event);
                 if (!isMultiSelect && !selectedOptions.includes(value))
                     toggleIsListOpen(false);
@@ -38,7 +44,12 @@ const FilteredOptions = () => {
         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,
                 "navds-combobox__list-item--selected": selectedOptions.includes(option),
-            }), id: `${id}-option-${option.replace(" ", "-")}`, key: option, tabIndex: -1, onPointerUp: (event) => {
+            }), id: `${id}-option-${option.replace(" ", "-")}`, key: option, tabIndex: -1, onMouseMove: () => {
+                if (filteredOptionsIndex !== index) {
+                    setFilteredOptionsIndex(index);
+                    setIsMouseLastUsedInputDevice(true);
+                }
+            }, onPointerUp: (event) => {
                 toggleOption(option, event);
                 if (!isMultiSelect && !selectedOptions.includes(option))
                     toggleIsListOpen(false);

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

@@ -32,6 +32,7 @@ const clsx_1 = __importDefault(require("clsx"));
 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));
@@ -53,7 +54,8 @@ const FilteredOptionsProvider = ({ children, value: props }) => {
         return getMatchingValuesFromList(searchTerm, opts);
     }, [customOptions, externalFilteredOptions, options, searchTerm]);
     const previousSearchTerm = (0, usePrevious_1.default)(searchTerm);
-    (0, react_1.useLayoutEffect)(() => {
+    const [isMouseLastUsedInputDevice, setIsMouseLastUsedInputDevice] = (0, react_1.useState)(false);
+    (0, util_1.useClientLayoutEffect)(() => {
         if (shouldAutocomplete &&
             normalizeText(searchTerm) !== "" &&
             ((previousSearchTerm === null || previousSearchTerm === void 0 ? void 0 : previousSearchTerm.length) || 0) < searchTerm.length &&
@@ -193,6 +195,8 @@ const FilteredOptionsProvider = ({ children, value: props }) => {
         isListOpen,
         isLoading,
         filteredOptions,
+        isMouseLastUsedInputDevice,
+        setIsMouseLastUsedInputDevice,
         isValueNew,
         toggleIsListOpen,
         currentOption,

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

@@ -47,7 +47,7 @@ const Input = (0, react_1.forwardRef)((_a, ref) => {
     var { inputClassName, error, errorId } = _a, rest = __rest(_a, ["inputClassName", "error", "errorId"]);
     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, shouldAutocomplete, } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
+    const { activeDecendantId, allowNewValues, currentOption, filteredOptions, toggleIsListOpen, isListOpen, filteredOptionsIndex, moveFocusUp, moveFocusDown, ariaDescribedBy, moveFocusToInput, moveFocusToEnd, setFilteredOptionsIndex, setIsMouseLastUsedInputDevice, shouldAutocomplete, } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
     const onEnter = (0, react_1.useCallback)((event) => {
         if (currentOption) {
             event.preventDefault();
@@ -101,6 +101,7 @@ const Input = (0, react_1.forwardRef)((_a, ref) => {
         }
     };
     const handleKeyDown = (0, react_1.useCallback)((e) => {
+        setIsMouseLastUsedInputDevice(false);
         if (e.key === "Backspace") {
             if (value === "") {
                 const lastSelectedOption = selectedOptions[selectedOptions.length - 1];
@@ -131,6 +132,7 @@ const Input = (0, react_1.forwardRef)((_a, ref) => {
         isListOpen,
         filteredOptionsIndex,
         moveFocusUp,
+        setIsMouseLastUsedInputDevice,
     ]);
     const onChangeHandler = (0, react_1.useCallback)((event) => {
         const newValue = event.target.value;

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

@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInputContext = exports.InputContextProvider = void 0;
 const react_1 = __importStar(require("react"));
 const useFormField_1 = require("../../useFormField");
+const util_1 = require("../../../util");
 const InputContext = (0, react_1.createContext)({});
 const InputContextProvider = ({ children, value: props }) => {
     const { defaultValue = "", description, disabled, error, errorId, id: externalId, value: externalValue, onChange: externalOnChange, onClear, shouldAutocomplete, size, } = props;
@@ -60,7 +61,7 @@ const InputContextProvider = ({ children, value: props }) => {
         var _a, _b;
         (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
     }, []);
-    (0, react_1.useLayoutEffect)(() => {
+    (0, util_1.useClientLayoutEffect)(() => {
         var _a, _b;
         if (shouldAutocomplete && inputRef && value !== searchTerm) {
             (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange) === null || _b === void 0 ? void 0 : _b.call(_a, searchTerm.length, value.length);

package/cjs/guide-panel/Illustration.js

@@ -26,12 +26,12 @@ const DefaultIllustration = (_a) => {
         react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M32.8313 30.4421C31.7718 33.868 29.6975 36.7117 27.0391 38.452L27.1752 39.9777L27.1745 40.0397L25.7375 52.6154H16.6236L16.5857 52.3512L14.8238 40.0181L14.8891 38.4756C12.2173 36.7398 10.1312 33.8914 9.06565 30.4564C9.02952 30.4598 8.99291 30.4616 8.95588 30.4616C8.26662 30.4616 7.72058 29.8614 7.72058 29.1343V25.0202C7.72058 24.5328 7.96592 24.1022 8.33526 23.8712C8.9115 16.1905 14.3251 10.1539 20.946 10.1539C27.5491 10.1539 32.9517 16.1579 33.5525 23.8089C33.9838 24.0179 34.2794 24.4845 34.2794 25.0202V29.1343C34.2794 29.8618 33.7341 30.4616 33.0441 30.4616C32.9714 30.4616 32.9003 30.4549 32.8313 30.4421Z", fill: "#F1F1F1" }),
         react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M26.7182 38.8777C26.6663 41.624 24.1261 44.4415 21 44.4415C17.8604 44.4415 15.3116 41.5994 15.2813 38.8419C13.6546 39.2527 11.1714 40.4917 9.12177 42.5623C7.13699 44.5674 5.55884 47.5814 5.55884 49.9194V64H36.4412V49.9194C36.4412 47.5766 34.829 44.5575 32.8075 42.5501C30.7861 40.5427 28.3553 39.3204 26.7182 38.8777Z", fill: "#0056B4" }),
         react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.1786 38.9372C13.6802 39.4793 11.1664 40.6641 9.2647 42.4632C3.70588 41.2308 1.23529 38.3022 1.23529 38.3022C1.23529 38.3022 6.35673 33.325 6.35982 24.6197V24.6105C6.35982 14.4173 11.8831 7.38464 20.9827 7.38464C30.0836 7.38464 35.6068 14.4173 35.6068 24.6105H35.6396C35.6396 33.3219 40.7647 38.3022 40.7647 38.3022C40.7647 38.3022 38.2941 41.2308 32.7353 42.4616L32.7269 42.4632C30.8901 40.7984 28.2262 39.5144 26.7769 38.9715L26.7785 38.971L26.7209 38.3257L26.7521 38.2722C29.4867 36.5294 31.6086 33.5933 32.6316 30.0454C32.7569 30.1148 32.8983 30.1539 33.048 30.1539C33.5601 30.1539 33.9746 29.6984 33.9746 29.1343V25.0202C33.9746 24.5375 33.6712 24.134 33.2628 24.0275C33.2624 24.0219 33.262 24.0164 33.2616 24.0108C20.3323 25.4483 15.6749 16.616 15.2926 16.6154C15.2926 16.6154 10.9987 19.6923 8.94657 23.3506C8.94657 23.3506 8.6338 24.0412 8.63228 24.0644C8.28095 24.2092 8.03035 24.5821 8.03035 25.0202V29.1343C8.03035 29.6984 8.44586 30.1539 8.95693 30.1539C9.07019 30.1539 9.17868 30.1316 9.27895 30.0908C10.3132 33.6404 12.4486 36.5733 15.1961 38.3046L15.2063 38.3257L15.1804 38.9372H15.1786Z", fill: "#D05C4A" }),
-        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.584 26.9976C15.7859 27.062 15.5625 25.8029 15.803 24.9807C15.8482 24.8249 16.1124 24.1154 16.5802 24.1154C17.0473 24.1154 17.2536 24.5032 17.2823 24.5699C17.6259 25.3715 17.4571 26.9268 16.584 26.9976", fill: "#262626" }),
-        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M25.8405 26.9976C26.6386 27.062 26.862 25.8029 26.6215 24.9807C26.5763 24.8249 26.3121 24.1154 25.8444 24.1154C25.3772 24.1154 25.171 24.5032 25.1423 24.5699C24.7987 25.3715 24.9674 26.9268 25.8405 26.9976", fill: "#262626" }),
-        react_1.default.createElement("path", { d: "M21.5081 28.2384C21.9854 28.157 22.3113 28.2081 22.428 28.3669C22.8687 28.9672 22.7277 29.6023 21.9718 30.1237C21.5744 30.3977 21.0273 30.4942 20.7377 30.3521C20.596 30.2826 20.4304 30.3536 20.3677 30.5106C20.3051 30.6676 20.3691 30.8512 20.5107 30.9207C20.9894 31.1555 21.7255 31.0257 22.268 30.6517C23.2953 29.9431 23.5304 28.8837 22.863 27.9743C22.5805 27.59 22.0806 27.5116 21.4228 27.6239C21.2697 27.65 21.1647 27.8088 21.1883 27.9784C21.2118 28.1481 21.355 28.2645 21.5081 28.2384Z", fill: "#262626" }),
-        react_1.default.createElement("path", { d: "M24.9595 32.3642C24.9315 32.4234 24.8672 32.5367 24.7639 32.686C24.589 32.9386 24.3694 33.1919 24.1027 33.4281C23.3079 34.1319 22.2735 34.5389 20.9568 34.5017C19.673 34.4654 18.6432 34.0647 17.8358 33.4185C17.5393 33.1813 17.2946 32.9272 17.0989 32.6739C16.9836 32.5246 16.9115 32.4114 16.88 32.3523C16.8043 32.2104 16.618 32.152 16.464 32.2218C16.31 32.2917 16.2466 32.4634 16.3224 32.6053C16.3681 32.6908 16.4569 32.8304 16.5927 33.0062C16.8156 33.2948 17.0928 33.5826 17.4283 33.8511C18.3398 34.5805 19.5046 35.0338 20.9378 35.0743C22.4302 35.1165 23.6233 34.6471 24.5333 33.8412C24.8376 33.5717 25.0877 33.2832 25.2878 32.9941C25.4095 32.8183 25.4887 32.6787 25.5291 32.5934C25.5977 32.4485 25.5259 32.2796 25.3686 32.2163C25.2113 32.153 25.0282 32.2192 24.9595 32.3642Z", fill: "#262626" }),
+        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.584 26.9976C15.7859 27.062 15.5625 25.8029 15.803 24.9807C15.8482 24.8249 16.1124 24.1154 16.5802 24.1154C17.0473 24.1154 17.2536 24.5032 17.2823 24.5699C17.6259 25.3715 17.4571 26.9268 16.584 26.9976", fill: "#23262a" }),
+        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M25.8405 26.9976C26.6386 27.062 26.862 25.8029 26.6215 24.9807C26.5763 24.8249 26.3121 24.1154 25.8444 24.1154C25.3772 24.1154 25.171 24.5032 25.1423 24.5699C24.7987 25.3715 24.9674 26.9268 25.8405 26.9976", fill: "#23262a" }),
+        react_1.default.createElement("path", { d: "M21.5081 28.2384C21.9854 28.157 22.3113 28.2081 22.428 28.3669C22.8687 28.9672 22.7277 29.6023 21.9718 30.1237C21.5744 30.3977 21.0273 30.4942 20.7377 30.3521C20.596 30.2826 20.4304 30.3536 20.3677 30.5106C20.3051 30.6676 20.3691 30.8512 20.5107 30.9207C20.9894 31.1555 21.7255 31.0257 22.268 30.6517C23.2953 29.9431 23.5304 28.8837 22.863 27.9743C22.5805 27.59 22.0806 27.5116 21.4228 27.6239C21.2697 27.65 21.1647 27.8088 21.1883 27.9784C21.2118 28.1481 21.355 28.2645 21.5081 28.2384Z", fill: "#23262a" }),
+        react_1.default.createElement("path", { d: "M24.9595 32.3642C24.9315 32.4234 24.8672 32.5367 24.7639 32.686C24.589 32.9386 24.3694 33.1919 24.1027 33.4281C23.3079 34.1319 22.2735 34.5389 20.9568 34.5017C19.673 34.4654 18.6432 34.0647 17.8358 33.4185C17.5393 33.1813 17.2946 32.9272 17.0989 32.6739C16.9836 32.5246 16.9115 32.4114 16.88 32.3523C16.8043 32.2104 16.618 32.152 16.464 32.2218C16.31 32.2917 16.2466 32.4634 16.3224 32.6053C16.3681 32.6908 16.4569 32.8304 16.5927 33.0062C16.8156 33.2948 17.0928 33.5826 17.4283 33.8511C18.3398 34.5805 19.5046 35.0338 20.9378 35.0743C22.4302 35.1165 23.6233 34.6471 24.5333 33.8412C24.8376 33.5717 25.0877 33.2832 25.2878 32.9941C25.4095 32.8183 25.4887 32.6787 25.5291 32.5934C25.5977 32.4485 25.5259 32.2796 25.3686 32.2163C25.2113 32.153 25.0282 32.2192 24.9595 32.3642Z", fill: "#23262a" }),
         react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M32.1651 58H21.8343C21.3733 58 21 57.621 21 57.153V51.5143C21 51.0462 21.3733 50.6667 21.8343 50.6667H32.1651C32.6261 50.6667 33 51.0462 33 51.5143V57.153C33 57.621 32.6261 58 32.1651 58", fill: "white" }),
-        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M27.6207 51.8307H26.5502C26.4709 51.8307 26.407 51.7671 26.407 51.6882V51.5086C26.407 51.4303 26.4709 51.3661 26.5502 51.3661H27.6207C27.7 51.3661 27.764 51.4303 27.764 51.5086V51.6882C27.764 51.7671 27.7 51.8307 27.6207 51.8307", fill: "#262626" }),
+        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M27.6207 51.8307H26.5502C26.4709 51.8307 26.407 51.7671 26.407 51.6882V51.5086C26.407 51.4303 26.4709 51.3661 26.5502 51.3661H27.6207C27.7 51.3661 27.764 51.4303 27.764 51.5086V51.6882C27.764 51.7671 27.7 51.8307 27.6207 51.8307", fill: "#23262a" }),
         react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M26.7756 51.6667H27.3958V50H26.7756V51.6667Z", fill: "#6A6A6A" }),
         react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M27.1269 56.6651C25.839 56.6651 24.7947 55.6208 24.7947 54.3327C24.7947 53.0444 25.839 52 27.1269 52C28.4153 52 29.4597 53.0444 29.4597 54.3327C29.4597 55.6208 28.4153 56.6651 27.1269 56.6651Z", fill: "#C30000" }),
         react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M23.6667 55.3511L24.1434 54.1712H24.6015L24.1254 55.3511H23.6667Z", fill: "#C30000" }),

package/cjs/modal/Modal.js

@@ -39,15 +39,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
 const react_1 = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
+const react_2 = require("@floating-ui/react");
 const clsx_1 = __importDefault(require("clsx"));
-const dialog_polyfill_1 = __importDefault(require("./dialog-polyfill"));
+const dialog_polyfill_1 = __importStar(require("./dialog-polyfill"));
 const __1 = require("..");
 const ModalBody_1 = __importDefault(require("./ModalBody"));
 const ModalHeader_1 = __importDefault(require("./ModalHeader"));
 const ModalFooter_1 = __importDefault(require("./ModalFooter"));
 const ModalUtils_1 = require("./ModalUtils");
 const ModalContext_1 = require("./ModalContext");
-const needPolyfill = typeof window !== "undefined" && window.HTMLDialogElement === undefined;
 /**
  * A component that displays a modal dialog.
  *
@@ -95,23 +96,29 @@ const needPolyfill = typeof window !== "undefined" && window.HTMLDialogElement =
  * ```
  */
 exports.Modal = (0, react_1.forwardRef)((_a, ref) => {
-    var _b;
-    var { header, children, open, onBeforeClose, onCancel, width, className, "aria-labelledby": ariaLabelledby, style } = _a, rest = __rest(_a, ["header", "children", "open", "onBeforeClose", "onCancel", "width", "className", "aria-labelledby", "style"]);
+    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"]);
     const modalRef = (0, react_1.useRef)(null);
     const mergedRef = (0, react_1.useMemo)(() => (0, __1.mergeRefs)([modalRef, ref]), [ref]);
     const ariaLabelId = (0, __1.useId)();
+    const rootElement = (_b = (0, __1.useProvider)()) === null || _b === void 0 ? void 0 : _b.rootElement;
+    const portalNode = (0, react_2.useFloatingPortalNode)({ root: rootElement });
     if ((0, react_1.useContext)(ModalContext_1.ModalContext)) {
         console.error("Modals should not be nested");
     }
     (0, react_1.useEffect)(() => {
-        if (needPolyfill && modalRef.current) {
+        // If using portal, modalRef.current will not be set before portalNode is set.
+        // If not using portal, modalRef.current is available first.
+        // We check both to avoid activating polyfill twice when not using portal.
+        if (dialog_polyfill_1.needPolyfill && modalRef.current && portalNode) {
             dialog_polyfill_1.default.registerDialog(modalRef.current);
         }
-    }, [modalRef]);
+    }, [modalRef, portalNode]);
     (0, react_1.useEffect)(() => {
         // We need to have this in a useEffect so that the content renders before the modal is displayed,
         // and in case `open` is true initially.
-        if (modalRef.current && open !== undefined) {
+        // We need to check both modalRef.current and portalNode to make sure the polyfill has been activated.
+        if (modalRef.current && portalNode && open !== undefined) {
             if (open && !modalRef.current.open) {
                 modalRef.current.showModal();
             }
@@ -119,11 +126,11 @@ exports.Modal = (0, react_1.forwardRef)((_a, ref) => {
                 modalRef.current.close();
             }
         }
-    }, [modalRef, open]);
-    (0, ModalUtils_1.useBodyScrollLock)(modalRef, "navds-modal__document-body");
+    }, [modalRef, portalNode, open]);
+    (0, ModalUtils_1.useBodyScrollLock)(modalRef, portalNode);
     const isWidthPreset = typeof width === "string" && ["small", "medium"].includes(width);
-    return (react_1.default.createElement("dialog", Object.assign({ ref: mergedRef, className: (0, clsx_1.default)("navds-modal", className, {
-            "navds-modal--polyfilled": needPolyfill,
+    const component = (react_1.default.createElement("dialog", Object.assign({ 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) => {
@@ -141,10 +148,16 @@ exports.Modal = (0, react_1.forwardRef)((_a, ref) => {
             } },
             header && (react_1.default.createElement(ModalHeader_1.default, null,
                 header.label && (react_1.default.createElement(__1.Detail, { className: "navds-modal__label" }, header.label)),
-                react_1.default.createElement(__1.Heading, { size: (_b = header.size) !== null && _b !== void 0 ? _b : "medium", level: "1", id: ariaLabelId },
+                react_1.default.createElement(__1.Heading, { size: (_c = header.size) !== null && _c !== void 0 ? _c : "medium", level: "1", id: ariaLabelId },
                     react_1.default.createElement("span", { className: "navds-modal__header-icon" }, header.icon),
                     header.heading))),
             children)));
+    if (portal) {
+        if (portalNode)
+            return (0, react_dom_1.createPortal)(component, portalNode);
+        return null;
+    }
+    return component;
 });
 exports.Modal.Header = ModalHeader_1.default;
 exports.Modal.Body = ModalBody_1.default;

package/cjs/modal/ModalUtils.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBodyScrollLock = exports.getCloseHandler = void 0;
+exports.useBodyScrollLock = exports.BODY_CLASS = exports.getCloseHandler = void 0;
 const react_1 = __importDefault(require("react"));
 function getCloseHandler(modalRef, header, onBeforeClose) {
     if (header && header.closeButton === false)
@@ -14,18 +14,19 @@ function getCloseHandler(modalRef, header, onBeforeClose) {
     return () => { var _a; return (_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.close(); };
 }
 exports.getCloseHandler = getCloseHandler;
-function useBodyScrollLock(modalRef, bodyClass) {
+exports.BODY_CLASS = "navds-modal__document-body";
+function useBodyScrollLock(modalRef, portalNode) {
     react_1.default.useEffect(() => {
-        if (!modalRef.current)
-            return;
+        if (!modalRef.current || !portalNode)
+            return; // We check both to avoid running this twice when not using portal
         if (modalRef.current.open)
-            document.body.classList.add(bodyClass); // In case `open` is true initially
+            document.body.classList.add(exports.BODY_CLASS); // In case `open` is true initially
         const observer = new MutationObserver(() => {
             var _a;
             if ((_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.open)
-                document.body.classList.add(bodyClass);
+                document.body.classList.add(exports.BODY_CLASS);
             else
-                document.body.classList.remove(bodyClass);
+                document.body.classList.remove(exports.BODY_CLASS);
         });
         observer.observe(modalRef.current, {
             attributes: true,
@@ -33,8 +34,8 @@ function useBodyScrollLock(modalRef, bodyClass) {
         });
         return () => {
             observer.disconnect();
-            document.body.classList.remove(bodyClass); // In case modal is unmounted before it's closed
+            document.body.classList.remove(exports.BODY_CLASS); // In case modal is unmounted before it's closed
         };
-    }, [modalRef, bodyClass]);
+    }, [modalRef, portalNode]);
 }
 exports.useBodyScrollLock = useBodyScrollLock;

package/cjs/modal/dialog-polyfill.js

@@ -1,6 +1,10 @@
 "use strict";
 // @ts-nocheck
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.needPolyfill = void 0;
+exports.needPolyfill = typeof window !== "undefined" &&
+    (window.HTMLDialogElement === undefined ||
+        navigator.userAgent.includes("jsdom"));
 // Copyright (c) 2013 The Chromium Authors. All rights reserved.
 //
 // Redistribution and use in source and binary forms, with or without
@@ -43,31 +47,6 @@ function safeDispatchEvent(target, event) {
     }
     return target.dispatchEvent(event);
 }
-/**
- * @param {Element} el to check for stacking context
- * @return {boolean} whether this el or its parents creates a stacking context
- */
-function createsStackingContext(el) {
-    while (el && el !== document.body) {
-        var s = window.getComputedStyle(el);
-        var invalid = function (k, ok) {
-            return !(s[k] === undefined || s[k] === ok);
-        };
-        if (s.opacity < 1 ||
-            invalid("zIndex", "auto") ||
-            invalid("transform", "none") ||
-            invalid("mixBlendMode", "normal") ||
-            invalid("filter", "none") ||
-            invalid("perspective", "none") ||
-            s["isolation"] === "isolate" ||
-            s.position === "fixed" ||
-            s.webkitOverflowScrolling === "touch") {
-            return true;
-        }
-        el = el.parentElement;
-    }
-    return false;
-}
 /**
  * Finds the nearest <dialog> from the passed element.
  *
@@ -409,11 +388,6 @@ dialogPolyfillInfo.prototype = /** @type {HTMLDialogElement.prototype} */ {
         if (!dialogPolyfill.dm.pushDialog(this)) {
             throw new Error("Failed to execute 'showModal' on dialog: There are too many open modal dialogs.");
         }
-        if (createsStackingContext(this.dialog_.parentElement)) {
-            console.warn("A dialog is being shown inside a stacking context. " +
-                "This may cause it to be unusable. For more information, see this link: " +
-                "https://github.com/GoogleChrome/dialog-polyfill/#stacking-context");
-        }
         this.setOpen(true);
         this.openAsModal_ = true;
         // Optionally center vertically, relative to the current viewport.
@@ -514,7 +488,7 @@ dialogPolyfill.needsCentering = function (dialog) {
  * @param {!Element} element to force upgrade
  */
 dialogPolyfill.forceRegisterDialog = function (element) {
-    if (window.HTMLDialogElement || element.showModal) {
+    if (element.showModal) {
         console.warn("This browser already supports <dialog>, the polyfill " +
             "may not work correctly", element);
     }
@@ -726,7 +700,7 @@ dialogPolyfill.DialogManager.prototype.removeDialog = function (dpi) {
     }
     this.updateStacking();
 };
-if (typeof window !== "undefined" && window.HTMLDialogElement === undefined) {
+if (exports.needPolyfill) {
     dialogPolyfill.dm = new dialogPolyfill.DialogManager();
     dialogPolyfill.formSubmitter = null;
     dialogPolyfill.imagemapUseValue = null;
@@ -735,7 +709,7 @@ if (typeof window !== "undefined" && window.HTMLDialogElement === undefined) {
  * Installs global handlers, such as click listers and native method overrides. These are needed
  * even if a no dialog is registered, as they deal with <form method="dialog">.
  */
-if (typeof window !== "undefined" && window.HTMLDialogElement === undefined) {
+if (exports.needPolyfill) {
     /**
      * If HTMLFormElement translates method="DIALOG" into 'get', then replace the descriptor with
      * one that returns the correct value.

package/esm/button/Button.js

@@ -41,7 +41,16 @@ export const Button = forwardRef((_a, ref) => {
         }
     }, [loading, children]);
     const filterProps = (disabled !== null && disabled !== void 0 ? disabled : widthOverride) ? omit(rest, ["href"]) : rest;
-    return (React.createElement(Component, Object.assign({}, filterProps, { ref: mergedRef, className: cl(className, "navds-button", `navds-button--${variant}`, `navds-button--${size}`, {
+    return (React.createElement(Component, Object.assign({}, (Component !== "button" ? { role: "button" } : {}), filterProps, { ref: mergedRef, onKeyUp: (e) => {
+            var _a;
+            (_a = filterProps.onKeyUp) === null || _a === void 0 ? void 0 : _a.call(filterProps, e);
+            if (e.key === " " &&
+                !disabled &&
+                !widthOverride &&
+                !e.isDefaultPrevented()) {
+                e.currentTarget.click();
+            }
+        }, className: cl(className, "navds-button", `navds-button--${variant}`, `navds-button--${size}`, {
             "navds-button--loading": widthOverride,
             "navds-button--icon-only": !!icon && !children,
             "navds-button--disabled": disabled !== null && disabled !== void 0 ? disabled : widthOverride,

package/esm/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/button/Button.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAwB,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA8CtD;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,MAAM,GACjB,UAAU,CACR,CACE,EAYC,EACD,GAAG,EACH,EAAE;QAdF,EACE,EAAE,EAAE,SAAS,GAAG,QAAQ,EACxB,OAAO,GAAG,SAAS,EACnB,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,YAAY,GAAG,MAAM,OAEtB,EADI,IAAI,cAXT,0GAYC,CADQ;IAIT,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAU,CAAC;IAE7D,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEpE,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,OAAO,EAAE;YACX,MAAM,SAAS,GAAG,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;;gBAClD,gBAAgB,CACd,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,0CAAE,qBAAqB,EAAE,0CAAE,KAAK,CACnD,CAAC;YACJ,CAAC,CAAC,CAAC;YACH,OAAO,GAAG,EAAE;gBACV,gBAAgB,CAAC,SAAS,CAAC,CAAC;gBAC5B,oBAAoB,CAAC,SAAS,CAAC,CAAC;YAClC,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExB,MAAM,WAAW,GACf,CAAA,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,aAAa,EAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAE1D,OAAO,CACL,oBAAC,SAAS,oBACJ,CAAC,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAClD,WAAW,IACf,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAyC,EAAE,EAAE;;YACrD,MAAA,WAAW,CAAC,OAAO,4DAAG,CAAC,CAAC,CAAC;YACzB,IACE,CAAC,CAAC,GAAG,KAAK,GAAG;gBACb,CAAC,QAAQ;gBACT,CAAC,aAAa;gBACd,CAAC,CAAC,CAAC,kBAAkB,EAAE,EACvB;gBACA,CAAC,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;aACzB;QACH,CAAC,EACD,SAAS,EAAE,EAAE,CACX,SAAS,EACT,cAAc,EACd,iBAAiB,OAAO,EAAE,EAC1B,iBAAiB,IAAI,EAAE,EACvB;YACE,uBAAuB,EAAE,aAAa;YACtC,yBAAyB,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,QAAQ;YAC9C,wBAAwB,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,aAAa;SACpD,CACF,EACD,KAAK,kCACA,KAAK,KACR,KAAK,EAAE,aAAa,KAEtB,QAAQ,EAAE,CAAA,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,aAAa,EAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,KAErD,aAAa,CAAC,CAAC,CAAC,CACf,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,GAAI,CACvB,CAAC,CAAC,CAAC,CACF;QACG,IAAI,IAAI,YAAY,KAAK,MAAM,IAAI,CAClC,8BAAM,SAAS,EAAC,oBAAoB,IAAE,IAAI,CAAQ,CACnD;QACA,QAAQ,IAAI,CACX,oBAAC,KAAK,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,IAC1D,QAAQ,CACH,CACT;QACA,IAAI,IAAI,YAAY,KAAK,OAAO,IAAI,CACnC,8BAAM,SAAS,EAAC,oBAAoB,IAAE,IAAI,CAAQ,CACnD,CACA,CACJ,CACS,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,eAAe,MAAM,CAAC"}

package/esm/date/DateInput.js

@@ -46,7 +46,7 @@ const DateInput = forwardRef((props, ref) => {
                 "navds-sr-only": hideLabel,
             }), id: inputDescriptionId, size: size }, description)),
         React.createElement("div", { className: "navds-date__field-wrapper" },
-            React.createElement("input", Object.assign({ ref: ref }, omit(rest, ["error", "errorId", "size"]), inputProps, { autoComplete: "off", "aria-controls": ariaId, readOnly: readOnly, className: cl("navds-date__field-input", "navds-text-field__input", "navds-body-short", `navds-body-${size}`), size: 14 })),
+            React.createElement("input", Object.assign({ ref: ref }, omit(rest, ["error", "errorId", "size"]), inputProps, { autoComplete: "off", "aria-controls": open ? ariaId : undefined, readOnly: readOnly, className: cl("navds-date__field-input", "navds-text-field__input", "navds-body-short", `navds-body-${size}`), size: 14 })),
             React.createElement("button", { disabled: inputProps.disabled || readOnly, tabIndex: readOnly ? -1 : open ? -1 : 0, onClick: () => onOpen(), type: "button", className: "navds-date__field-button" },
                 React.createElement(CalendarIcon, { pointerEvents: "none", title: open
                         ? conditionalVariables.iconTitle.close

package/esm/date/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","sourceRoot":"","sources":["../../src/date/DateInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DateInput.js","sourceRoot":"","sources":["../../src/date/DateInput.tsx"],"names":[],"mappings":"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"}

package/esm/form/combobox/FilteredOptions/FilteredOptions.js

@@ -7,14 +7,20 @@ import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsCon
 import { useInputContext } from "../Input/inputContext";
 const FilteredOptions = () => {
     const { inputProps: { id }, size, value, } = useInputContext();
-    const { allowNewValues, isLoading, isListOpen, filteredOptions, filteredOptionsIndex, filteredOptionsRef, isValueNew, toggleIsListOpen, } = useFilteredOptionsContext();
+    const { allowNewValues, isLoading, isListOpen, filteredOptions, filteredOptionsIndex, filteredOptionsRef, isMouseLastUsedInputDevice, setIsMouseLastUsedInputDevice, isValueNew, setFilteredOptionsIndex, toggleIsListOpen, } = useFilteredOptionsContext();
     const { isMultiSelect, selectedOptions, toggleOption } = useSelectedOptionsContext();
     return (React.createElement("ul", { ref: filteredOptionsRef, className: cl("navds-combobox__list", {
             "navds-combobox__list--closed": !isListOpen,
+            "navds-combobox__list--with-hover": isMouseLastUsedInputDevice,
         }), id: `${id}-filtered-options`, role: "listbox", tabIndex: -1 },
         isLoading && (React.createElement("li", { className: "navds-combobox__list-item--loading", role: "option", "aria-selected": false, id: `${id}-is-loading` },
             React.createElement(Loader, { "aria-label": "S\u00F8ker..." }))),
-        isValueNew && allowNewValues && (React.createElement("li", { tabIndex: -1, onPointerUp: (event) => {
+        isValueNew && allowNewValues && (React.createElement("li", { tabIndex: -1, onMouseMove: () => {
+                if (filteredOptionsIndex !== -1) {
+                    setFilteredOptionsIndex(-1);
+                    setIsMouseLastUsedInputDevice(true);
+                }
+            }, onPointerUp: (event) => {
                 toggleOption(value, event);
                 if (!isMultiSelect && !selectedOptions.includes(value))
                     toggleIsListOpen(false);
@@ -33,7 +39,12 @@ const FilteredOptions = () => {
         filteredOptions.map((option, index) => (React.createElement("li", { className: cl("navds-combobox__list-item", {
                 "navds-combobox__list-item--focus": index === filteredOptionsIndex,
                 "navds-combobox__list-item--selected": selectedOptions.includes(option),
-            }), id: `${id}-option-${option.replace(" ", "-")}`, key: option, tabIndex: -1, onPointerUp: (event) => {
+            }), id: `${id}-option-${option.replace(" ", "-")}`, key: option, tabIndex: -1, onMouseMove: () => {
+                if (filteredOptionsIndex !== index) {
+                    setFilteredOptionsIndex(index);
+                    setIsMouseLastUsedInputDevice(true);
+                }
+            }, onPointerUp: (event) => {
                 toggleOption(option, event);
                 if (!isMultiSelect && !selectedOptions.includes(option))
                     toggleIsListOpen(false);

package/esm/form/combobox/FilteredOptions/FilteredOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilteredOptions.js","sourceRoot":"","sources":["../../../../src/form/combobox/FilteredOptions/FilteredOptions.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"FilteredOptions.js","sourceRoot":"","sources":["../../../../src/form/combobox/FilteredOptions/FilteredOptions.tsx"],"names":[],"mappings":"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"}

package/esm/form/combobox/FilteredOptions/filteredOptionsContext.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { SetStateAction } from "react";
 type FilteredOptionsContextType = {
     activeDecendantId?: string;
     allowNewValues?: boolean;
@@ -9,6 +9,8 @@ type FilteredOptionsContextType = {
     isListOpen: boolean;
     isLoading?: boolean;
     filteredOptions: string[];
+    isMouseLastUsedInputDevice: boolean;
+    setIsMouseLastUsedInputDevice: React.Dispatch<SetStateAction<boolean>>;
     isValueNew: boolean;
     toggleIsListOpen: (newState?: boolean) => void;
     currentOption: string | null;

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

@@ -1,8 +1,9 @@
-import React, { useState, useEffect, useMemo, createContext, useContext, useCallback, useRef, useLayoutEffect, } from "react";
+import React, { useState, useEffect, useMemo, createContext, useContext, useCallback, useRef, } from "react";
 import cl from "clsx";
 import { useCustomOptionsContext } from "../customOptionsContext";
 import { useInputContext } from "../Input/inputContext";
 import usePrevious from "../../../util/usePrevious";
+import { useClientLayoutEffect } from "../../../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));
@@ -24,7 +25,8 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
         return getMatchingValuesFromList(searchTerm, opts);
     }, [customOptions, externalFilteredOptions, options, searchTerm]);
     const previousSearchTerm = usePrevious(searchTerm);
-    useLayoutEffect(() => {
+    const [isMouseLastUsedInputDevice, setIsMouseLastUsedInputDevice] = useState(false);
+    useClientLayoutEffect(() => {
         if (shouldAutocomplete &&
             normalizeText(searchTerm) !== "" &&
             ((previousSearchTerm === null || previousSearchTerm === void 0 ? void 0 : previousSearchTerm.length) || 0) < searchTerm.length &&
@@ -164,6 +166,8 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
         isListOpen,
         isLoading,
         filteredOptions,
+        isMouseLastUsedInputDevice,
+        setIsMouseLastUsedInputDevice,
         isValueNew,
         toggleIsListOpen,
         currentOption,