@navikt/ds-react 6.13.0 → 6.15.0

package/esm/util/virtualfocus/VirtualFocus.js

@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import { useId } from "../../util/hooks/index.js";
+import { VirtualFocusDescendantsProvider, VirtualFocusInternalContextProvider, useVirtualFocusDescendantInitializer, } from "./Context.js";
+import { VirtualFocusAnchor } from "./parts/VirtualFocusAnchor.js";
+import { VirtualFocusContent } from "./parts/VirtualFocusContent.js";
+import { VirtualFocusItem } from "./parts/VirtualFocusItem.js";
+/**
+ * A component that manages a virtual focus using the 'up' and 'down'
+ * arrow keys as well as selection with 'Return'.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/virtualfocus)
+ * @see 🏷️ {@link AccordionProps}
+ *
+ * @example
+ * ```jsx
+ * <VirtualFocus>
+ *   <VirtualFocus.Anchor
+ *     role="combobox"
+ *     onSelect={() => {
+ *       console.log("you selected the anchor");
+ *     }}
+ *     onActive={() => {
+ *       console.log("the anchor is now virtually focused");
+ *     }}
+ *   >
+ *     <input type="text" />
+ *   </VirtualFocus.Anchor>
+ *   <VirtualFocus.Content>
+ *     <VirtualFocus.Item
+ *       onSelect={() => {
+ *         console.log("you selected the item");
+ *       }}
+ *       onActive={() => {
+ *         console.log("the item is now virtually focused");
+ *       }}
+ *     >
+ *       <p>item 1</p>
+ *     </VirtualFocus.Item>
+ *     <VirtualFocus.Item
+ *       onSelect={() => {
+ *         console.log("you selected the item");
+ *       }}
+ *       onActive={() => {
+ *         console.log("the item is now virtually focused");
+ *       }}
+ *     >
+ *       <p>item 2</p>
+ *     </VirtualFocus.Item>
+ *   </VirtualFocus.Content>
+ * </VirtualFocus>
+ * ```
+ */
+export const VirtualFocus = ({ children, loop = false }) => {
+    const descendants = useVirtualFocusDescendantInitializer();
+    const [virtualFocusIdx, setVirtualFocusIdx] = useState(0);
+    return (React.createElement(VirtualFocusInternalContextProvider, { virtualFocusIdx: virtualFocusIdx, setVirtualFocusIdx: setVirtualFocusIdx, loop: loop, uniqueId: useId() },
+        React.createElement(VirtualFocusDescendantsProvider, { value: descendants }, children)));
+};
+VirtualFocus.Anchor = VirtualFocusAnchor;
+VirtualFocus.Item = VirtualFocusItem;
+VirtualFocus.Content = VirtualFocusContent;
+export default VirtualFocus;
+//# sourceMappingURL=VirtualFocus.js.map

package/esm/util/virtualfocus/VirtualFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualFocus.js","sourceRoot":"","sources":["../../../src/util/virtualfocus/VirtualFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EACL,+BAA+B,EAC/B,mCAAmC,EACnC,oCAAoC,GACrC,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAW5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAG,KAAK,EAAqB,EAAE,EAAE;IAC5E,MAAM,WAAW,GAAG,oCAAoC,EAAE,CAAC;IAC3D,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE1D,OAAO,CACL,oBAAC,mCAAmC,IAClC,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,kBAAkB,EACtC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,KAAK,EAAE;QAEjB,oBAAC,+BAA+B,IAAC,KAAK,EAAE,WAAW,IAChD,QAAQ,CACuB,CACE,CACvC,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,MAAM,GAAG,kBAAkB,CAAC;AACzC,YAAY,CAAC,IAAI,GAAG,gBAAgB,CAAC;AACrC,YAAY,CAAC,OAAO,GAAG,mBAAmB,CAAC;AAE3C,eAAe,YAAY,CAAC"}

package/esm/util/virtualfocus/parts/VirtualFocusAnchor.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+export interface VirtualFocusAnchorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "id"> {
+    /**
+     * The role of the container. This is a limited subset of roles that
+     * require manual focus management.
+     *
+     * Children that are to get focus inside this container element shall be
+     * pointed to by `aria-activedescendant`.
+     **/
+    role: "combobox" | "grid" | "listbox" | "menu" | "menubar" | "radiogroup" | "tree" | "treegrid" | "tablist";
+    /**
+     * The function that is run when the focused element
+     * is to be selected (eg. do an actual search, change route... etc)
+     */
+    onSelect: () => void;
+    /**
+     * The function that is run when the element gets
+     * virtual focus set to it.
+     */
+    onActive: () => void;
+    children: React.ReactElement;
+    /**
+     * Set this to `0` if you want the Anchor itself
+     * to be focusable. Since this Anchor is hoisted & merged with
+     * its first child, you most likely want to keep this as `0`.
+     * @default 0
+     */
+    tabIndex?: number;
+}
+/**
+ * Must have a single child that is an input element.
+ */
+export declare const VirtualFocusAnchor: React.ForwardRefExoticComponent<VirtualFocusAnchorProps & React.RefAttributes<HTMLInputElement>>;

package/esm/util/virtualfocus/parts/VirtualFocusAnchor.js

@@ -0,0 +1,54 @@
+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";
+import { composeEventHandlers } from "../../composeEventHandlers.js";
+import { useMergeRefs } from "../../hooks/index.js";
+import { useVirtualFocusDescendant, useVirtualFocusInternalContext, } from "../Context.js";
+/**
+ * Must have a single child that is an input element.
+ */
+export const VirtualFocusAnchor = forwardRef((_a, ref) => {
+    var { onSelect, onActive, children } = _a, rest = __rest(_a, ["onSelect", "onActive", "children"]);
+    const { virtualFocusIdx, setVirtualFocusIdx, loop, uniqueId } = useVirtualFocusInternalContext();
+    const { register, descendants, index } = useVirtualFocusDescendant({
+        handleOnActive: () => {
+            setVirtualFocusIdx(0);
+            onActive();
+        },
+        handleOnSelect: onSelect,
+    });
+    const mergedRefs = useMergeRefs(ref, register);
+    return (React.createElement(Slot, Object.assign({ ref: mergedRefs, tabIndex: 0 }, rest, { id: `virtualfocus-${uniqueId}-${index}`, "aria-owns": `virtualfocus-${uniqueId}-content`, "aria-controls": `virtualfocus-${uniqueId}-content`, "aria-activedescendant": `virtualfocus-${uniqueId}-${virtualFocusIdx}`, onKeyDown: composeEventHandlers(rest.onKeyDown, (event) => {
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                const to_focus_descendant = descendants.next(virtualFocusIdx, loop);
+                if (to_focus_descendant) {
+                    to_focus_descendant.handleOnActive();
+                }
+            }
+            else if (event.key === "ArrowUp") {
+                event.preventDefault();
+                const to_focus_descendant = descendants.prev(virtualFocusIdx, loop);
+                if (to_focus_descendant) {
+                    to_focus_descendant.handleOnActive();
+                }
+            }
+            else if (event.key === "Enter") {
+                const curr = descendants.item(virtualFocusIdx);
+                if (curr === null || curr === void 0 ? void 0 : curr.handleOnSelect) {
+                    curr.handleOnSelect();
+                }
+            }
+        }) }), children));
+});
+//# sourceMappingURL=VirtualFocusAnchor.js.map

package/esm/util/virtualfocus/parts/VirtualFocusAnchor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualFocusAnchor.js","sourceRoot":"","sources":["../../../../src/util/virtualfocus/parts/VirtualFocusAnchor.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EACL,yBAAyB,EACzB,8BAA8B,GAC/B,MAAM,YAAY,CAAC;AAyCpB;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,UAAU,CAG1C,CAAC,EAAyC,EAAE,GAAG,EAAE,EAAE;QAAlD,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,OAAW,EAAN,IAAI,cAAvC,oCAAyC,CAAF;IACxC,MAAM,EAAE,eAAe,EAAE,kBAAkB,EAAE,IAAI,EAAE,QAAQ,EAAE,GAC3D,8BAA8B,EAAE,CAAC;IAEnC,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,yBAAyB,CAAC;QACjE,cAAc,EAAE,GAAG,EAAE;YACnB,kBAAkB,CAAC,CAAC,CAAC,CAAC;YACtB,QAAQ,EAAE,CAAC;QACb,CAAC;QACD,cAAc,EAAE,QAAQ;KACzB,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,YAAY,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IAE/C,OAAO,CACL,oBAAC,IAAI,kBACH,GAAG,EAAE,UAAU,EACf,QAAQ,EAAE,CAAC,IACP,IAAI,IACR,EAAE,EAAE,gBAAgB,QAAQ,IAAI,KAAK,EAAE,eAC5B,gBAAgB,QAAQ,UAAU,mBAC9B,gBAAgB,QAAQ,UAAU,2BAC1B,gBAAgB,QAAQ,IAAI,eAAe,EAAE,EACpE,SAAS,EAAE,oBAAoB,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;YACxD,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;gBAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,MAAM,mBAAmB,GAAG,WAAW,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;gBACpE,IAAI,mBAAmB,EAAE,CAAC;oBACxB,mBAAmB,CAAC,cAAc,EAAE,CAAC;gBACvC,CAAC;YACH,CAAC;iBAAM,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;gBACnC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,MAAM,mBAAmB,GAAG,WAAW,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;gBACpE,IAAI,mBAAmB,EAAE,CAAC;oBACxB,mBAAmB,CAAC,cAAc,EAAE,CAAC;gBACvC,CAAC;YACH,CAAC;iBAAM,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBACjC,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;gBAC/C,IAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,cAAc,EAAE,CAAC;oBACzB,IAAI,CAAC,cAAc,EAAE,CAAC;gBACxB,CAAC;YACH,CAAC;QACH,CAAC,CAAC,KAED,QAAQ,CACJ,CACR,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/esm/util/virtualfocus/parts/VirtualFocusContent.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export interface VirtualFocusContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "id"> {
+}
+export declare const VirtualFocusContent: React.ForwardRefExoticComponent<VirtualFocusContentProps & React.RefAttributes<HTMLDivElement>>;

package/esm/util/virtualfocus/parts/VirtualFocusContent.js

@@ -0,0 +1,19 @@
+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 { useVirtualFocusInternalContext } from "../Context.js";
+export const VirtualFocusContent = forwardRef((_a, ref) => {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    const { uniqueId } = useVirtualFocusInternalContext();
+    return (React.createElement("div", Object.assign({ ref: ref }, rest, { id: `virtualfocus-${uniqueId}-content` }), children));
+});
+//# sourceMappingURL=VirtualFocusContent.js.map

package/esm/util/virtualfocus/parts/VirtualFocusContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualFocusContent.js","sourceRoot":"","sources":["../../../../src/util/virtualfocus/parts/VirtualFocusContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,8BAA8B,EAAE,MAAM,YAAY,CAAC;AAK5D,MAAM,CAAC,MAAM,mBAAmB,GAAG,UAAU,CAG3C,CAAC,EAAqB,EAAE,GAAG,EAAE,EAAE;QAA9B,EAAE,QAAQ,OAAW,EAAN,IAAI,cAAnB,YAAqB,CAAF;IACpB,MAAM,EAAE,QAAQ,EAAE,GAAG,8BAA8B,EAAE,CAAC;IACtD,OAAO,CACL,2CAAK,GAAG,EAAE,GAAG,IAAM,IAAI,IAAE,EAAE,EAAE,gBAAgB,QAAQ,UAAU,KAC5D,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/esm/util/virtualfocus/parts/VirtualFocusItem.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+export interface VirtualFocusItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "tabIndex"> {
+    /**
+     * The function that is run when the element is focused
+     * (virtually, not actual focus, eg. set a border around an item)
+     */
+    onActive: () => void;
+    /**
+     * The function that is run when the focused element
+     * is to be selected (eg. do an actual search, change route... etc)
+     */
+    onSelect: () => void;
+    children: React.ReactNode;
+}
+/**
+ * Contains an item you want to be iterable via virtual focus.
+ */
+export declare const VirtualFocusItem: React.ForwardRefExoticComponent<VirtualFocusItemProps & React.RefAttributes<HTMLElement>>;

package/esm/util/virtualfocus/parts/VirtualFocusItem.js

@@ -0,0 +1,38 @@
+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";
+import { composeEventHandlers } from "../../composeEventHandlers.js";
+import { useMergeRefs } from "../../hooks/index.js";
+import { useVirtualFocusDescendant, useVirtualFocusInternalContext, } from "../Context.js";
+/**
+ * Contains an item you want to be iterable via virtual focus.
+ */
+export const VirtualFocusItem = forwardRef((_a, ref) => {
+    var { children, onActive, onSelect } = _a, rest = __rest(_a, ["children", "onActive", "onSelect"]);
+    const { virtualFocusIdx, setVirtualFocusIdx, uniqueId } = useVirtualFocusInternalContext();
+    const { register, index } = useVirtualFocusDescendant({
+        handleOnActive: () => {
+            setVirtualFocusIdx(index);
+            onActive();
+        },
+        handleOnSelect: onSelect,
+    });
+    const mergedRefs = useMergeRefs(ref, register);
+    return (React.createElement(Slot, Object.assign({ ref: mergedRefs }, rest, { id: `virtualfocus-${uniqueId}-${index}`, "data-aksel-virtualfocus": virtualFocusIdx === index, tabIndex: -1, onClick: composeEventHandlers(rest.onClick, () => {
+            onSelect();
+        }), onMouseMove: composeEventHandlers(rest.onMouseMove, () => {
+            setVirtualFocusIdx(index);
+            onActive();
+        }) }), children));
+});
+//# sourceMappingURL=VirtualFocusItem.js.map

package/esm/util/virtualfocus/parts/VirtualFocusItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualFocusItem.js","sourceRoot":"","sources":["../../../../src/util/virtualfocus/parts/VirtualFocusItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EACL,yBAAyB,EACzB,8BAA8B,GAC/B,MAAM,YAAY,CAAC;AAiBpB;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,UAAU,CACxC,CAAC,EAAyC,EAAE,GAAG,EAAE,EAAE;QAAlD,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,OAAW,EAAN,IAAI,cAAvC,oCAAyC,CAAF;IACtC,MAAM,EAAE,eAAe,EAAE,kBAAkB,EAAE,QAAQ,EAAE,GACrD,8BAA8B,EAAE,CAAC;IACnC,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,yBAAyB,CAAC;QACpD,cAAc,EAAE,GAAG,EAAE;YACnB,kBAAkB,CAAC,KAAK,CAAC,CAAC;YAC1B,QAAQ,EAAE,CAAC;QACb,CAAC;QACD,cAAc,EAAE,QAAQ;KACzB,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,YAAY,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IAC/C,OAAO,CACL,oBAAC,IAAI,kBACH,GAAG,EAAE,UAAU,IACX,IAAI,IACR,EAAE,EAAE,gBAAgB,QAAQ,IAAI,KAAK,EAAE,6BACd,eAAe,KAAK,KAAK,EAClD,QAAQ,EAAE,CAAC,CAAC,EACZ,OAAO,EAAE,oBAAoB,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE;YAC/C,QAAQ,EAAE,CAAC;QACb,CAAC,CAAC,EACF,WAAW,EAAE,oBAAoB,CAAC,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE;YACvD,kBAAkB,CAAC,KAAK,CAAC,CAAC;YAC1B,QAAQ,EAAE,CAAC;QACb,CAAC,CAAC,KAED,QAAQ,CACJ,CACR,CAAC;AACJ,CAAC,CACF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "6.13.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.13.0",
-    "@navikt/ds-tokens": "^6.13.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/Combobox.tsx

@@ -10,7 +10,10 @@ import { ComboboxProps } from "./types";
 
 export const Combobox = forwardRef<
   HTMLInputElement,
-  Omit<ComboboxProps, "onChange" | "options" | "size" | "onClear" | "value">
+  Omit<
+    ComboboxProps,
+    "onChange" | "options" | "size" | "onClear" | "value" | "disabled"
+  >
 >((props, ref) => {
   const { className, hideLabel = false, description, label, ...rest } = props;
 

package/src/form/combobox/ComboboxProvider.tsx

@@ -35,6 +35,7 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
       allowNewValues = false,
       children,
       defaultValue,
+      disabled,
       error,
       errorId,
       filteredOptions: externalFilteredOptions,
@@ -60,6 +61,8 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
       <InputContextProvider
         value={{
           defaultValue,
+          description: rest.description,
+          disabled,
           error,
           errorId,
           id,

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;