@navikt/ds-react 6.14.0 → 6.15.0

package/esm/overlays/floating-menu/parts/FocusScope.js

@@ -0,0 +1,63 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+import { forwardRef, useEffect, useState } from "react";
+import { Slot } from "../../../slot/Slot.js";
+import { useCallbackRef, useMergeRefs } from "../../../util/hooks/index.js";
+const AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
+const AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
+const EVENT_OPTIONS = { bubbles: false, cancelable: true };
+/**
+ * FocusScope manages focus on mount and unmount of container.
+ * This is used to better handle autofocus of elements when mounted and unmounted.
+ * Example usage:
+ * - Focus first item in a list when mounted
+ * - Focus a button when unmounted
+ */
+const FocusScope = forwardRef((_a, ref) => {
+    var { onMountHandler: onMountHandlerCallback, onUnmountHandler: onUnmountHandlerCallback } = _a, rest = __rest(_a, ["onMountHandler", "onUnmountHandler"]);
+    const [container, setContainer] = useState(null);
+    const onMountHandler = useCallbackRef(onMountHandlerCallback);
+    const onUnmountHandler = useCallbackRef(onUnmountHandlerCallback);
+    const composedRefs = useMergeRefs(ref, setContainer);
+    useEffect(() => {
+        var _a;
+        if (!container)
+            return;
+        const ownerDocument = (_a = container.ownerDocument) !== null && _a !== void 0 ? _a : globalThis === null || globalThis === void 0 ? void 0 : globalThis.document;
+        const hasFocus = container.contains(ownerDocument.activeElement);
+        if (!hasFocus) {
+            const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
+            container.addEventListener(AUTOFOCUS_ON_MOUNT, onMountHandler);
+            container.dispatchEvent(mountEvent);
+        }
+        return () => {
+            container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountHandler);
+            /**
+             * https://github.com/facebook/react/issues/17894
+             * As usual when dealing with focus and useEffect,
+             * we need to defer the focus to the next event-loop
+             * setTimeout makes sure the code is ran after the next render-cycle
+             */
+            setTimeout(() => {
+                const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);
+                container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountHandler);
+                container.dispatchEvent(unmountEvent);
+                // we need to remove the listener after we `dispatchEvent`
+                container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountHandler);
+            }, 0);
+        };
+    }, [container, onMountHandler, onUnmountHandler]);
+    return React.createElement(Slot, Object.assign({ tabIndex: -1 }, rest, { ref: composedRefs }));
+});
+export { FocusScope };
+//# sourceMappingURL=FocusScope.js.map

package/esm/overlays/floating-menu/parts/FocusScope.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusScope.js","sourceRoot":"","sources":["../../../../src/overlays/floating-menu/parts/FocusScope.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnE,MAAM,kBAAkB,GAAG,6BAA6B,CAAC;AACzD,MAAM,oBAAoB,GAAG,+BAA+B,CAAC;AAC7D,MAAM,aAAa,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;AAe3D;;;;;;GAMG;AACH,MAAM,UAAU,GAAG,UAAU,CAC3B,CACE,EAIC,EACD,GAAG,EACH,EAAE;QANF,EACE,cAAc,EAAE,sBAAsB,EACtC,gBAAgB,EAAE,wBAAwB,OAE3C,EADI,IAAI,cAHT,sCAIC,CADQ;IAIT,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IACrE,MAAM,cAAc,GAAG,cAAc,CAAC,sBAAsB,CAAC,CAAC;IAC9D,MAAM,gBAAgB,GAAG,cAAc,CAAC,wBAAwB,CAAC,CAAC;IAElE,MAAM,YAAY,GAAG,YAAY,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;IAErD,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,CAAC,SAAS;YAAE,OAAO;QAEvB,MAAM,aAAa,GAAG,MAAA,SAAS,CAAC,aAAa,mCAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,CAAC;QACtE,MAAM,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QAEjE,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,kBAAkB,EAAE,aAAa,CAAC,CAAC;YACtE,SAAS,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;YAC/D,SAAS,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACtC,CAAC;QAED,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;YAElE;;;;;eAKG;YACH,UAAU,CAAC,GAAG,EAAE;gBACd,MAAM,YAAY,GAAG,IAAI,WAAW,CAClC,oBAAoB,EACpB,aAAa,CACd,CAAC;gBACF,SAAS,CAAC,gBAAgB,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CAAC;gBACnE,SAAS,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;gBAEtC,0DAA0D;gBAC1D,SAAS,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CAAC;YACxE,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAElD,OAAO,oBAAC,IAAI,kBAAC,QAAQ,EAAE,CAAC,CAAC,IAAM,IAAI,IAAE,GAAG,EAAE,YAAY,IAAI,CAAC;AAC7D,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,UAAU,EAAwB,CAAC"}

package/esm/overlays/floating-menu/parts/RovingFocus.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { DescendantsManager } from "../../../util/hooks/descendants/descendant.js";
+interface RovingFocusProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "tabIndex"> {
+    asChild?: boolean;
+    descendants: DescendantsManager<HTMLDivElement, object>;
+    onEntryFocus?: (event: Event) => void;
+}
+declare const RovingFocus: React.ForwardRefExoticComponent<RovingFocusProps & React.RefAttributes<HTMLDivElement>>;
+export { RovingFocus, type RovingFocusProps };

package/esm/overlays/floating-menu/parts/RovingFocus.js

@@ -0,0 +1,86 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef, useCallback, useEffect, useRef } from "react";
+import { Slot } from "../../../slot/Slot.js";
+import { composeEventHandlers } from "../../../util/composeEventHandlers.js";
+import { useCallbackRef, useMergeRefs } from "../../../util/hooks/index.js";
+const ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
+const EVENT_OPTIONS = { bubbles: false, cancelable: true };
+const RovingFocus = forwardRef((_a, ref) => {
+    var { children, asChild, descendants, onKeyDown, onEntryFocus, onMouseDown, onFocus } = _a, rest = __rest(_a, ["children", "asChild", "descendants", "onKeyDown", "onEntryFocus", "onMouseDown", "onFocus"]);
+    const _ref = React.useRef(null);
+    const composedRefs = useMergeRefs(ref, _ref);
+    const handleEntryFocus = useCallbackRef(onEntryFocus);
+    const isMouseFocusRef = useRef(false);
+    useEffect(() => {
+        const node = _ref.current;
+        if (node) {
+            node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
+            return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
+        }
+    }, [handleEntryFocus]);
+    const handleKeyDown = useCallback((event) => {
+        var _a, _b;
+        const loop = false;
+        const ownerDocument = (_b = (_a = _ref === null || _ref === void 0 ? void 0 : _ref.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : globalThis === null || globalThis === void 0 ? void 0 : globalThis.document;
+        const idx = descendants
+            .values()
+            .findIndex((x) => x.node.isSameNode(ownerDocument.activeElement));
+        const nextItem = () => {
+            var _a;
+            const next = descendants.nextEnabled(idx, loop);
+            next && ((_a = next.node) === null || _a === void 0 ? void 0 : _a.focus());
+        };
+        const prevItem = () => {
+            var _a;
+            const prev = descendants.prevEnabled(idx, loop);
+            prev && ((_a = prev.node) === null || _a === void 0 ? void 0 : _a.focus());
+        };
+        const firstItem = () => {
+            var _a;
+            const first = descendants.firstEnabled();
+            first && ((_a = first.node) === null || _a === void 0 ? void 0 : _a.focus());
+        };
+        const lastItem = () => {
+            var _a;
+            const last = descendants.lastEnabled();
+            last && ((_a = last.node) === null || _a === void 0 ? void 0 : _a.focus());
+        };
+        const keyMap = {
+            ArrowUp: prevItem,
+            ArrowDown: nextItem,
+            Home: firstItem,
+            End: lastItem,
+        };
+        const action = keyMap[event.key];
+        if (action) {
+            event.preventDefault();
+            action(event);
+        }
+    }, [descendants]);
+    const Comp = asChild ? Slot : "div";
+    return (React.createElement(Comp, Object.assign({ ref: composedRefs }, rest, { tabIndex: descendants.enabledCount() === 0 ? -1 : 0, style: Object.assign({ outline: "none" }, rest.style), onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown), onMouseDown: composeEventHandlers(onMouseDown, () => {
+            isMouseFocusRef.current = true;
+        }), onFocus: composeEventHandlers(onFocus, (event) => {
+            var _a;
+            if (event.target === event.currentTarget) {
+                const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
+                event.currentTarget.dispatchEvent(entryFocusEvent);
+                if (!entryFocusEvent.defaultPrevented) {
+                    (_a = descendants.firstEnabled()) === null || _a === void 0 ? void 0 : _a.node.focus({ preventScroll: true });
+                }
+            }
+            isMouseFocusRef.current = false;
+        }) }), children));
+});
+export { RovingFocus };
+//# sourceMappingURL=RovingFocus.js.map

package/esm/overlays/floating-menu/parts/RovingFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RovingFocus.js","sourceRoot":"","sources":["../../../../src/overlays/floating-menu/parts/RovingFocus.tsx"],"names":[],"mappings":"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"}

package/esm/overlays/floating-menu/parts/SlottedDivElement.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface SlottedDivProps extends React.HTMLAttributes<HTMLDivElement> {
+    asChild?: boolean;
+}
+declare const SlottedDivElement: React.ForwardRefExoticComponent<SlottedDivProps & React.RefAttributes<HTMLDivElement>>;
+type SlottedDivElementRef = React.ElementRef<typeof SlottedDivElement>;
+export { SlottedDivElement, type SlottedDivElementRef, type SlottedDivProps };

package/esm/overlays/floating-menu/parts/SlottedDivElement.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef } from "react";
+import { Slot } from "../../../slot/Slot.js";
+const SlottedDivElement = forwardRef((_a, forwardedRef) => {
+    var { asChild } = _a, rest = __rest(_a, ["asChild"]);
+    const Comp = asChild ? Slot : "div";
+    return React.createElement(Comp, Object.assign({}, rest, { ref: forwardedRef }));
+});
+export { SlottedDivElement };
+//# sourceMappingURL=SlottedDivElement.js.map

package/esm/overlays/floating-menu/parts/SlottedDivElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlottedDivElement.js","sourceRoot":"","sources":["../../../../src/overlays/floating-menu/parts/SlottedDivElement.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAM1C,MAAM,iBAAiB,GAAG,UAAU,CAClC,CAAC,EAAoB,EAAE,YAAY,EAAE,EAAE;QAAtC,EAAE,OAAO,OAAW,EAAN,IAAI,cAAlB,WAAoB,CAAF;IACjB,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IACpC,OAAO,oBAAC,IAAI,oBAAK,IAAI,IAAE,GAAG,EAAE,YAAY,IAAI,CAAC;AAC/C,CAAC,CACF,CAAC;AAIF,OAAO,EAAE,iBAAiB,EAAmD,CAAC"}

package/esm/util/composeEventHandlers.d.ts

@@ -2,6 +2,6 @@
  * Utility to consistently call original eventhandler, often from props and internal eventhandler
  * @internal
  */
-export declare function composeEventHandlers<T extends React.SyntheticEvent>(originalEventHandler?: (event: T) => void, ourEventHandler?: (event: T) => void, { checkForDefaultPrevented }?: {
+export declare function composeEventHandlers<T extends React.SyntheticEvent | Event>(originalEventHandler?: (event: T) => void, ourEventHandler?: (event: T) => void, { checkForDefaultPrevented }?: {
     checkForDefaultPrevented?: boolean | undefined;
 }): (event: T) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "6.14.0",
+  "version": "6.15.0",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -594,8 +594,8 @@
   "dependencies": {
     "@floating-ui/react": "0.25.4",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^6.14.0",
-    "@navikt/ds-tokens": "^6.14.0",
+    "@navikt/aksel-icons": "^6.15.0",
+    "@navikt/ds-tokens": "^6.15.0",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.0"

package/src/form/combobox/FilteredOptions/AddNewOption.tsx

@@ -0,0 +1,63 @@
+import cl from "clsx";
+import React from "react";
+import { PlusIcon } from "@navikt/aksel-icons";
+import { BodyShort, Label } from "../../../typography";
+import { useInputContext } from "../Input/Input.context";
+import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
+import { isInList, toComboboxOption } from "../combobox-utils";
+import filteredOptionsUtil from "./filtered-options-util";
+import { useFilteredOptionsContext } from "./filteredOptionsContext";
+
+const AddNewOption = () => {
+  const {
+    inputProps: { id },
+    size,
+    value,
+  } = useInputContext();
+  const {
+    setIsMouseLastUsedInputDevice,
+    toggleIsListOpen,
+    activeDecendantId,
+    virtualFocus,
+  } = useFilteredOptionsContext();
+  const { isMultiSelect, selectedOptions, toggleOption } =
+    useSelectedOptionsContext();
+  return (
+    <li
+      tabIndex={-1}
+      onMouseMove={() => {
+        if (activeDecendantId !== filteredOptionsUtil.getAddNewOptionId(id)) {
+          virtualFocus.moveFocusToElement(
+            filteredOptionsUtil.getAddNewOptionId(id),
+          );
+          setIsMouseLastUsedInputDevice(true);
+        }
+      }}
+      onPointerUp={(event) => {
+        toggleOption(toComboboxOption(value), event);
+        if (!isMultiSelect && !isInList(value, selectedOptions))
+          toggleIsListOpen(false);
+      }}
+      id={filteredOptionsUtil.getAddNewOptionId(id)}
+      className={cl(
+        "navds-combobox__list-item navds-combobox__list-item--new-option",
+        {
+          "navds-combobox__list-item--new-option--focus":
+            activeDecendantId === filteredOptionsUtil.getAddNewOptionId(id),
+        },
+      )}
+      role="option"
+      aria-selected={false}
+    >
+      <PlusIcon aria-hidden />
+      <BodyShort size={size}>
+        Legg til{" "}
+        <Label as="span" size={size}>
+          &#8220;{value}&#8221;
+        </Label>
+      </BodyShort>
+    </li>
+  );
+};
+
+export default AddNewOption;

package/src/form/combobox/FilteredOptions/FilteredOptions.tsx

@@ -1,20 +1,18 @@
 import cl from "clsx";
 import React from "react";
-import { CheckmarkIcon, PlusIcon } from "@navikt/aksel-icons";
-import { Loader } from "../../../loader";
-import { BodyShort, Label } from "../../../typography";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
-import { isInList, toComboboxOption } from "../combobox-utils";
-import { ComboboxOption } from "../types";
+import AddNewOption from "./AddNewOption";
+import FilteredOptionsItem from "./FilteredOptionsItem";
+import LoadingMessage from "./LoadingMessage";
+import MaxSelectedMessage from "./MaxSelectedMessage";
+import NoSearchHitsMessage from "./NoSearchHitsMessage";
 import filteredOptionsUtil from "./filtered-options-util";
 import { useFilteredOptionsContext } from "./filteredOptionsContext";
 
 const FilteredOptions = () => {
   const {
     inputProps: { id },
-    size,
-    value,
   } = useInputContext();
   const {
     allowNewValues,
@@ -23,17 +21,9 @@ const FilteredOptions = () => {
     filteredOptions,
     setFilteredOptionsRef,
     isMouseLastUsedInputDevice,
-    setIsMouseLastUsedInputDevice,
     isValueNew,
-    toggleIsListOpen,
-    activeDecendantId,
-    virtualFocus,
   } = useFilteredOptionsContext();
-  const { isMultiSelect, selectedOptions, toggleOption, maxSelected } =
-    useSelectedOptionsContext();
-
-  const isDisabled = (option: ComboboxOption) =>
-    maxSelected?.isLimitReached && !isInList(option.value, selectedOptions);
+  const { maxSelected } = useSelectedOptionsContext();
 
   const shouldRenderNonSelectables =
     maxSelected?.isLimitReached || // Render maxSelected message
@@ -55,30 +45,10 @@ const FilteredOptions = () => {
     >
       {shouldRenderNonSelectables && (
         <div className="navds-combobox__list_non-selectables" role="status">
-          {maxSelected?.isLimitReached && (
-            <div
-              className="navds-combobox__list-item--max-selected"
-              id={filteredOptionsUtil.getMaxSelectedOptionsId(id)}
-            >
-              {maxSelected.message ??
-                `${selectedOptions.length} av ${maxSelected.limit} er valgt.`}
-            </div>
-          )}
-          {isLoading && (
-            <div
-              className="navds-combobox__list-item--loading"
-              id={filteredOptionsUtil.getIsLoadingId(id)}
-            >
-              <Loader title="Søker..." />
-            </div>
-          )}
+          {maxSelected?.isLimitReached && <MaxSelectedMessage />}
+          {isLoading && <LoadingMessage />}
           {!isLoading && filteredOptions.length === 0 && !allowNewValues && (
-            <div
-              className="navds-combobox__list-item--no-options"
-              id={filteredOptionsUtil.getNoHitsId(id)}
-            >
-              Ingen søketreff
-            </div>
+            <NoSearchHitsMessage />
           )}
         </div>
       )}
@@ -90,90 +60,10 @@ const FilteredOptions = () => {
           className="navds-combobox__list-options"
         >
           {isValueNew && !maxSelected?.isLimitReached && allowNewValues && (
-            <li
-              tabIndex={-1}
-              onMouseMove={() => {
-                if (
-                  activeDecendantId !==
-                  filteredOptionsUtil.getAddNewOptionId(id)
-                ) {
-                  virtualFocus.moveFocusToElement(
-                    filteredOptionsUtil.getAddNewOptionId(id),
-                  );
-                  setIsMouseLastUsedInputDevice(true);
-                }
-              }}
-              onPointerUp={(event) => {
-                toggleOption(toComboboxOption(value), event);
-                if (!isMultiSelect && !isInList(value, selectedOptions))
-                  toggleIsListOpen(false);
-              }}
-              id={filteredOptionsUtil.getAddNewOptionId(id)}
-              className={cl(
-                "navds-combobox__list-item navds-combobox__list-item--new-option",
-                {
-                  "navds-combobox__list-item--new-option--focus":
-                    activeDecendantId ===
-                    filteredOptionsUtil.getAddNewOptionId(id),
-                },
-              )}
-              role="option"
-              aria-selected={false}
-            >
-              <PlusIcon aria-hidden />
-              <BodyShort size={size}>
-                Legg til{" "}
-                <Label as="span" size={size}>
-                  &#8220;{value}&#8221;
-                </Label>
-              </BodyShort>
-            </li>
+            <AddNewOption />
           )}
           {filteredOptions.map((option) => (
-            <li
-              className={cl("navds-combobox__list-item", {
-                "navds-combobox__list-item--focus":
-                  activeDecendantId ===
-                  filteredOptionsUtil.getOptionId(id, option.label),
-                "navds-combobox__list-item--selected": isInList(
-                  option.value,
-                  selectedOptions,
-                ),
-              })}
-              data-no-focus={isDisabled(option) || undefined}
-              id={filteredOptionsUtil.getOptionId(id, option.label)}
-              key={option.label}
-              tabIndex={-1}
-              onMouseMove={() => {
-                if (
-                  activeDecendantId !==
-                  filteredOptionsUtil.getOptionId(id, option.label)
-                ) {
-                  virtualFocus.moveFocusToElement(
-                    filteredOptionsUtil.getOptionId(id, option.label),
-                  );
-                  setIsMouseLastUsedInputDevice(true);
-                }
-              }}
-              onPointerUp={(event) => {
-                if (isDisabled(option)) {
-                  return;
-                }
-                toggleOption(option, event);
-                if (
-                  !isMultiSelect &&
-                  !isInList(option.value, selectedOptions)
-                ) {
-                  toggleIsListOpen(false);
-                }
-              }}
-              role="option"
-              aria-selected={isInList(option.value, selectedOptions)}
-              aria-disabled={isDisabled(option) || undefined}
-            >
-              <BodyShort size={size}>{option.label}</BodyShort>
-              {isInList(option.value, selectedOptions) && <CheckmarkIcon />}
-            </li>
+            <FilteredOptionsItem key={option.value} option={option} />
           ))}
         </ul>
       )}

package/src/form/combobox/FilteredOptions/FilteredOptionsItem.tsx

@@ -0,0 +1,73 @@
+import cl from "clsx";
+import React from "react";
+import { CheckmarkIcon } from "@navikt/aksel-icons";
+import { BodyShort } from "../../../typography";
+import { useInputContext } from "../Input/Input.context";
+import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
+import { isInList } from "../combobox-utils";
+import { ComboboxOption } from "../types";
+import filteredOptionsUtil from "./filtered-options-util";
+import { useFilteredOptionsContext } from "./filteredOptionsContext";
+
+const FilteredOptionsItem = ({ option }: { option: ComboboxOption }) => {
+  const {
+    inputProps: { id },
+    size,
+  } = useInputContext();
+  const {
+    setIsMouseLastUsedInputDevice,
+    toggleIsListOpen,
+    activeDecendantId,
+    virtualFocus,
+  } = useFilteredOptionsContext();
+  const { isMultiSelect, maxSelected, selectedOptions, toggleOption } =
+    useSelectedOptionsContext();
+
+  const isDisabled = (_option: ComboboxOption) =>
+    maxSelected?.isLimitReached && !isInList(_option.value, selectedOptions);
+  return (
+    <li
+      className={cl("navds-combobox__list-item", {
+        "navds-combobox__list-item--focus":
+          activeDecendantId ===
+          filteredOptionsUtil.getOptionId(id, option.label),
+        "navds-combobox__list-item--selected": isInList(
+          option.value,
+          selectedOptions,
+        ),
+      })}
+      data-no-focus={isDisabled(option) || undefined}
+      id={filteredOptionsUtil.getOptionId(id, option.label)}
+      key={option.label}
+      tabIndex={-1}
+      onMouseMove={() => {
+        if (
+          activeDecendantId !==
+          filteredOptionsUtil.getOptionId(id, option.label)
+        ) {
+          virtualFocus.moveFocusToElement(
+            filteredOptionsUtil.getOptionId(id, option.label),
+          );
+          setIsMouseLastUsedInputDevice(true);
+        }
+      }}
+      onPointerUp={(event) => {
+        if (isDisabled(option)) {
+          return;
+        }
+        toggleOption(option, event);
+        if (!isMultiSelect && !isInList(option.value, selectedOptions)) {
+          toggleIsListOpen(false);
+        }
+      }}
+      role="option"
+      aria-selected={isInList(option.value, selectedOptions)}
+      aria-disabled={isDisabled(option) || undefined}
+    >
+      <BodyShort size={size}>{option.label}</BodyShort>
+      {isInList(option.value, selectedOptions) && <CheckmarkIcon />}
+    </li>
+  );
+};
+
+export default FilteredOptionsItem;

package/src/form/combobox/FilteredOptions/LoadingMessage.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Loader } from "../../../loader";
+import { useInputContext } from "../Input/Input.context";
+import filteredOptionsUtil from "./filtered-options-util";
+
+const LoadingMessage = () => {
+  const {
+    inputProps: { id },
+  } = useInputContext();
+  return (
+    <div
+      className="navds-combobox__list-item--loading"
+      id={filteredOptionsUtil.getIsLoadingId(id)}
+    >
+      <Loader title="Søker..." />
+    </div>
+  );
+};
+
+export default LoadingMessage;

package/src/form/combobox/FilteredOptions/MaxSelectedMessage.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { useInputContext } from "../Input/Input.context";
+import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
+import filteredOptionsUtil from "./filtered-options-util";
+
+const MaxSelectedMessage = () => {
+  const {
+    inputProps: { id },
+  } = useInputContext();
+  const { maxSelected, selectedOptions } = useSelectedOptionsContext();
+
+  if (!maxSelected) {
+    return null;
+  }
+
+  return (
+    <div
+      className="navds-combobox__list-item--max-selected"
+      id={filteredOptionsUtil.getMaxSelectedOptionsId(id)}
+    >
+      {maxSelected.message ??
+        `${selectedOptions.length} av ${maxSelected.limit} er valgt.`}
+    </div>
+  );
+};
+
+export default MaxSelectedMessage;

package/src/form/combobox/FilteredOptions/NoSearchHitsMessage.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { useInputContext } from "../Input/Input.context";
+import filteredOptionsUtil from "./filtered-options-util";
+
+const NoSearchHitsMessage = () => {
+  const {
+    inputProps: { id },
+  } = useInputContext();
+  return (
+    <div
+      className="navds-combobox__list-item--no-options"
+      id={filteredOptionsUtil.getNoHitsId(id)}
+    >
+      Ingen søketreff
+    </div>
+  );
+};
+
+export default NoSearchHitsMessage;

package/src/form/combobox/Input/Input.tsx

@@ -16,11 +16,12 @@ interface InputProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "disabled"> {
   ref: React.Ref<HTMLInputElement>;
   inputClassName?: string;
+  shouldShowSelectedOptions?: boolean;
   value?: string;
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ inputClassName, ...rest }, ref) => {
+  ({ inputClassName, shouldShowSelectedOptions, ...rest }, ref) => {
     const internalRef = useRef<HTMLInputElement>(null);
     const mergedRefs = useMergeRefs(ref, internalRef);
     const {
@@ -128,7 +129,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       (e: React.KeyboardEvent<HTMLInputElement>) => {
         setIsMouseLastUsedInputDevice(false);
         if (e.key === "Backspace") {
-          if (value === "") {
+          if (value === "" && shouldShowSelectedOptions) {
             const lastSelectedOption =
               selectedOptions[selectedOptions.length - 1];
             if (lastSelectedOption) {
@@ -191,6 +192,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         virtualFocus,
         setValue,
         searchTerm,
+        shouldShowSelectedOptions,
       ],
     );
 

package/src/form/combobox/Input/InputController.tsx

@@ -73,6 +73,7 @@ export const InputController = forwardRef<
             id={inputProps.id}
             ref={mergedInputRef}
             inputClassName={inputClassName}
+            shouldShowSelectedOptions={shouldShowSelectedOptions}
             {...rest}
           />
         </SelectedOptions>