@navikt/ds-react 5.15.1 → 6.0.0-alpha.0

package/cjs/util/index.js

@@ -27,3 +27,4 @@ var useEventListener_1 = require("./hooks/useEventListener");
 Object.defineProperty(exports, "useEventListener", { enumerable: true, get: function () { return useEventListener_1.useEventListener; } });
 var useId_1 = require("./hooks/useId");
 Object.defineProperty(exports, "useId", { enumerable: true, get: function () { return useId_1.useId; } });
+//# sourceMappingURL=index.js.map

package/cjs/util/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/util/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AACA,uCAAiD;AAAxC,qHAAA,OAAO,OAAY;AAC5B,yCAAuB;AACvB,uEAAsE;AAA7D,8HAAA,qBAAqB,OAAA;AAC9B,6DAA4D;AAAnD,oHAAA,gBAAgB,OAAA;AACzB,uCAAsC;AAA7B,8FAAA,KAAK,OAAA"}

package/cjs/util/omit.d.ts

@@ -0,0 +1 @@
+export declare const omit: (obj: object, props: string[]) => {};

package/cjs/util/omit.js

@@ -5,3 +5,4 @@ const omit = (obj, props) => Object.entries(obj)
     .filter(([key]) => !props.includes(key))
     .reduce((prevObj, [key, value]) => (Object.assign(Object.assign({}, prevObj), { [key]: value })), {});
 exports.omit = omit;
+//# sourceMappingURL=omit.js.map

package/cjs/util/omit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"omit.js","sourceRoot":"","sources":["../../src/util/omit.ts"],"names":[],"mappings":";;;AAAO,MAAM,IAAI,GAAG,CAAC,GAAW,EAAE,KAAe,EAAE,EAAE,CACnD,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;KAChB,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;KACvC,MAAM,CACL,CAAC,OAAO,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,iCACtB,OAAO,KACV,CAAC,GAAG,CAAC,EAAE,KAAK,IACZ,EACF,EAAE,CACH,CAAC;AATO,QAAA,IAAI,QASX"}

package/cjs/util/types/OverridableComponent.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+/**
+ * This interface represents a component that can be overridden with different props and elements.
+ * @template Component The type of the props for the component.
+ * @template Element The type of the HTML element that the component renders.
+ */
+export interface OverridableComponent<Component, Element extends HTMLElement> {
+    /**
+     * This is a function type that takes props and returns a React functional component.
+     * @param props The props for the component, which are a combination of the Component type and React.RefAttributes for the Element type.
+     * @returns A React functional component.
+     */
+    (props: Component & React.RefAttributes<Element>): ReturnType<React.FC>;
+    /**
+     * This is a function type that takes props and returns a React functional component.
+     * It allows for the 'as' prop to override the type of element that the component renders.
+     * @template As The type of the element that the component should render as.
+     * @param props The props for the component, which are a combination of the Component type, the 'as' prop, and any other props that are not part of the Component type or the 'as' prop.
+     * @returns A React functional component.
+     */
+    <As extends React.ElementType>(props: {
+        as?: As;
+    } & Component & Omit<React.ComponentPropsWithRef<As>, keyof Component | "as">): ReturnType<React.FC>;
+}

package/cjs/util/types/OverridableComponent.js

@@ -1,2 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=OverridableComponent.js.map

package/cjs/util/types/OverridableComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverridableComponent.js","sourceRoot":"","sources":["../../../src/util/types/OverridableComponent.ts"],"names":[],"mappings":""}

package/cjs/util/types/index.d.ts

@@ -0,0 +1 @@
+export type { OverridableComponent } from "./OverridableComponent";

package/cjs/util/types/index.js

@@ -1,2 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=index.js.map

package/cjs/util/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/util/types/index.ts"],"names":[],"mappings":""}

package/esm/index.js

@@ -1,3 +1,4 @@
+"use client";
 export * from "./accordion";
 export * from "./alert";
 export * from "./button";

package/esm/package.json

@@ -0,0 +1 @@
+{"type": "module"}

package/esm/util/hooks/descendants/descendant.d.ts

@@ -0,0 +1,47 @@
+export type DescendantOptions<T = object> = T & {
+    /**
+     * If `true`, the item will be registered in all nodes map
+     * but omitted from enabled nodes map
+     */
+    disabled?: boolean;
+};
+export type Descendant<T, K> = DescendantOptions<K> & {
+    /**
+     * DOM element of the item
+     */
+    node: T;
+    /**
+     * index of item in all nodes map and enabled nodes map
+     */
+    index: number;
+};
+/**
+ * @internal
+ *
+ * Class to manage descendants and their relative indices in the DOM.
+ * It uses `node.compareDocumentPosition(...)` under the hood
+ */
+export declare class DescendantsManager<T extends HTMLElement, K extends Record<string, any> = object> {
+    private descendants;
+    register: (nodeOrOptions: T | null | DescendantOptions<K>) => void | ((node: T | null) => void);
+    unregister: (node: T) => void;
+    destroy: () => void;
+    private assignIndex;
+    count: () => number;
+    enabledCount: () => number;
+    values: () => Descendant<T, K>[];
+    enabledValues: () => Descendant<T, K>[];
+    item: (index: number) => Descendant<T, K> | undefined;
+    enabledItem: (index: number) => Descendant<T, K> | undefined;
+    first: () => Descendant<T, K> | undefined;
+    firstEnabled: () => Descendant<T, K> | undefined;
+    last: () => Descendant<T, K> | undefined;
+    lastEnabled: () => Descendant<T, K> | undefined;
+    indexOf: (node: T | null) => number;
+    enabledIndexOf: (node: T | null) => number;
+    next: (index: number, loop?: boolean) => Descendant<T, K> | undefined;
+    nextEnabled: (index: number, loop?: boolean) => Descendant<T, K> | undefined;
+    prev: (index: number, loop?: boolean) => Descendant<T, K> | undefined;
+    prevEnabled: (index: number, loop?: boolean) => Descendant<T, K> | undefined;
+    private registerNode;
+}

package/esm/util/hooks/descendants/descendant.js

@@ -0,0 +1,114 @@
+/**
+ * https://github.com/chakra-ui/chakra-ui/tree/5ec0be610b5a69afba01a9c22365155c1b519136/packages/components/descendant
+ */
+import { getNextIndex, getPrevIndex, isElement, sortNodes } from "./utils";
+/**
+ * @internal
+ *
+ * Class to manage descendants and their relative indices in the DOM.
+ * It uses `node.compareDocumentPosition(...)` under the hood
+ */
+export class DescendantsManager {
+    constructor() {
+        this.descendants = new Map();
+        this.register = (nodeOrOptions) => {
+            if (nodeOrOptions == null)
+                return;
+            if (isElement(nodeOrOptions)) {
+                return this.registerNode(nodeOrOptions);
+            }
+            return (node) => {
+                this.registerNode(node, nodeOrOptions);
+            };
+        };
+        this.unregister = (node) => {
+            this.descendants.delete(node);
+            const sorted = sortNodes(Array.from(this.descendants.keys()));
+            this.assignIndex(sorted);
+        };
+        this.destroy = () => {
+            this.descendants.clear();
+        };
+        this.assignIndex = (descendants) => {
+            this.descendants.forEach((descendant) => {
+                const index = descendants.indexOf(descendant.node);
+                descendant.index = index;
+                descendant.node.dataset["index"] = descendant.index.toString();
+            });
+        };
+        this.count = () => this.descendants.size;
+        this.enabledCount = () => this.enabledValues().length;
+        this.values = () => {
+            const values = Array.from(this.descendants.values());
+            return values.sort((a, b) => a.index - b.index);
+        };
+        this.enabledValues = () => {
+            return this.values().filter((descendant) => !descendant.disabled);
+        };
+        this.item = (index) => {
+            if (this.count() === 0)
+                return undefined;
+            return this.values()[index];
+        };
+        this.enabledItem = (index) => {
+            if (this.enabledCount() === 0)
+                return undefined;
+            return this.enabledValues()[index];
+        };
+        this.first = () => this.item(0);
+        this.firstEnabled = () => this.enabledItem(0);
+        this.last = () => this.item(this.descendants.size - 1);
+        this.lastEnabled = () => {
+            const lastIndex = this.enabledValues().length - 1;
+            return this.enabledItem(lastIndex);
+        };
+        this.indexOf = (node) => {
+            var _a, _b;
+            if (!node)
+                return -1;
+            return (_b = (_a = this.descendants.get(node)) === null || _a === void 0 ? void 0 : _a.index) !== null && _b !== void 0 ? _b : -1;
+        };
+        this.enabledIndexOf = (node) => {
+            if (node == null)
+                return -1;
+            return this.enabledValues().findIndex((i) => i.node.isSameNode(node));
+        };
+        this.next = (index, loop = true) => {
+            const next = getNextIndex(index, this.count(), loop);
+            return this.item(next);
+        };
+        this.nextEnabled = (index, loop = true) => {
+            const item = this.item(index);
+            if (!item)
+                return;
+            const enabledIndex = this.enabledIndexOf(item.node);
+            const nextEnabledIndex = getNextIndex(enabledIndex, this.enabledCount(), loop);
+            return this.enabledItem(nextEnabledIndex);
+        };
+        this.prev = (index, loop = true) => {
+            const prev = getPrevIndex(index, this.count() - 1, loop);
+            return this.item(prev);
+        };
+        this.prevEnabled = (index, loop = true) => {
+            const item = this.item(index);
+            if (!item)
+                return;
+            const enabledIndex = this.enabledIndexOf(item.node);
+            const prevEnabledIndex = getPrevIndex(enabledIndex, this.enabledCount() - 1, loop);
+            return this.enabledItem(prevEnabledIndex);
+        };
+        this.registerNode = (node, options) => {
+            if (!node || this.descendants.has(node))
+                return;
+            const keys = Array.from(this.descendants.keys()).concat(node);
+            const sorted = sortNodes(keys);
+            if (options === null || options === void 0 ? void 0 : options.disabled) {
+                options.disabled = !!options.disabled;
+            }
+            const descendant = Object.assign({ node, index: -1 }, options);
+            this.descendants.set(node, descendant);
+            this.assignIndex(sorted);
+        };
+    }
+}
+//# sourceMappingURL=descendant.js.map

package/esm/util/hooks/descendants/descendant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"descendant.js","sourceRoot":"","sources":["../../../../src/util/hooks/descendants/descendant.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAqB3E;;;;;GAKG;AACH,MAAM,OAAO,kBAAkB;IAA/B;QAIU,gBAAW,GAAG,IAAI,GAAG,EAAuB,CAAC;QAErD,aAAQ,GAAG,CAAC,aAA8C,EAAE,EAAE;YAC5D,IAAI,aAAa,IAAI,IAAI;gBAAE,OAAO;YAElC,IAAI,SAAS,CAAC,aAAa,CAAC,EAAE,CAAC;gBAC7B,OAAO,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;YAC1C,CAAC;YAED,OAAO,CAAC,IAAc,EAAE,EAAE;gBACxB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC;YACzC,CAAC,CAAC;QACJ,CAAC,CAAC;QAEF,eAAU,GAAG,CAAC,IAAO,EAAE,EAAE;YACvB,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YAC9B,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;YAC9D,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAC3B,CAAC,CAAC;QAEF,YAAO,GAAG,GAAG,EAAE;YACb,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;QAC3B,CAAC,CAAC;QAEM,gBAAW,GAAG,CAAC,WAAmB,EAAE,EAAE;YAC5C,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,EAAE;gBACtC,MAAM,KAAK,GAAG,WAAW,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;gBACnD,UAAU,CAAC,KAAK,GAAG,KAAK,CAAC;gBACzB,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACjE,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,UAAK,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QAEpC,iBAAY,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,CAAC;QAEjD,WAAM,GAAG,GAAG,EAAE;YACZ,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC;YACrD,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;QAClD,CAAC,CAAC;QAEF,kBAAa,GAAG,GAAG,EAAE;YACnB,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACpE,CAAC,CAAC;QAEF,SAAI,GAAG,CAAC,KAAa,EAAE,EAAE;YACvB,IAAI,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC;gBAAE,OAAO,SAAS,CAAC;YACzC,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC,CAAC;QAEF,gBAAW,GAAG,CAAC,KAAa,EAAE,EAAE;YAC9B,IAAI,IAAI,CAAC,YAAY,EAAE,KAAK,CAAC;gBAAE,OAAO,SAAS,CAAC;YAChD,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC,CAAC;QACrC,CAAC,CAAC;QAEF,UAAK,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAE3B,iBAAY,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QAEzC,SAAI,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;QAElD,gBAAW,GAAG,GAAG,EAAE;YACjB,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;YAClD,OAAO,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QACrC,CAAC,CAAC;QAEF,YAAO,GAAG,CAAC,IAAc,EAAE,EAAE;;YAC3B,IAAI,CAAC,IAAI;gBAAE,OAAO,CAAC,CAAC,CAAC;YACrB,OAAO,MAAA,MAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,0CAAE,KAAK,mCAAI,CAAC,CAAC,CAAC;QACjD,CAAC,CAAC;QAEF,mBAAc,GAAG,CAAC,IAAc,EAAE,EAAE;YAClC,IAAI,IAAI,IAAI,IAAI;gBAAE,OAAO,CAAC,CAAC,CAAC;YAC5B,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;QACxE,CAAC,CAAC;QAEF,SAAI,GAAG,CAAC,KAAa,EAAE,IAAI,GAAG,IAAI,EAAE,EAAE;YACpC,MAAM,IAAI,GAAG,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,CAAC;YACrD,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC,CAAC;QAEF,gBAAW,GAAG,CAAC,KAAa,EAAE,IAAI,GAAG,IAAI,EAAE,EAAE;YAC3C,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC9B,IAAI,CAAC,IAAI;gBAAE,OAAO;YAClB,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACpD,MAAM,gBAAgB,GAAG,YAAY,CACnC,YAAY,EACZ,IAAI,CAAC,YAAY,EAAE,EACnB,IAAI,CACL,CAAC;YACF,OAAO,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC;QAC5C,CAAC,CAAC;QAEF,SAAI,GAAG,CAAC,KAAa,EAAE,IAAI,GAAG,IAAI,EAAE,EAAE;YACpC,MAAM,IAAI,GAAG,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC;YACzD,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC,CAAC;QAEF,gBAAW,GAAG,CAAC,KAAa,EAAE,IAAI,GAAG,IAAI,EAAE,EAAE;YAC3C,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC9B,IAAI,CAAC,IAAI;gBAAE,OAAO;YAClB,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACpD,MAAM,gBAAgB,GAAG,YAAY,CACnC,YAAY,EACZ,IAAI,CAAC,YAAY,EAAE,GAAG,CAAC,EACvB,IAAI,CACL,CAAC;YACF,OAAO,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC;QAC5C,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,IAAc,EAAE,OAA8B,EAAE,EAAE;YACxE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC;gBAAE,OAAO;YAEhD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YAC9D,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;YAE/B,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,EAAE,CAAC;gBACtB,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC;YACxC,CAAC;YAED,MAAM,UAAU,mBAAK,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,IAAK,OAAO,CAAE,CAAC;YAEnD,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,EAAE,UAA8B,CAAC,CAAC;YAE3D,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAC3B,CAAC,CAAC;IACJ,CAAC;CAAA"}

package/esm/util/hooks/descendants/useDescendant.d.ts

@@ -0,0 +1,14 @@
+/**
+ * https://github.com/chakra-ui/chakra-ui/tree/5ec0be610b5a69afba01a9c22365155c1b519136/packages/components/descendant
+ */
+import React from "react";
+import { DescendantOptions, DescendantsManager } from "./descendant";
+/**
+ * Provides strongly typed versions of the context provider and hooks above.
+ */
+export declare function createDescendantContext<T extends HTMLElement = HTMLElement, K extends Record<string, any> = object>(): readonly [React.Provider<DescendantsManager<T, K>>, () => DescendantsManager<T, K>, () => DescendantsManager<T, K>, (options?: DescendantOptions<K>) => {
+    descendants: DescendantsManager<HTMLElement, Record<string, any>>;
+    index: number;
+    enabledIndex: number;
+    register: (instance: T | null) => void;
+}];

package/esm/util/hooks/descendants/useDescendant.js

@@ -0,0 +1,82 @@
+/**
+ * https://github.com/chakra-ui/chakra-ui/tree/5ec0be610b5a69afba01a9c22365155c1b519136/packages/components/descendant
+ */
+import React, { useRef, useState } from "react";
+import { createContext } from "../../create-context";
+import { useClientLayoutEffect } from "../useClientLayoutEffect";
+import { mergeRefs } from "../useMergeRefs";
+import { DescendantsManager } from "./descendant";
+import { cast } from "./utils";
+/**
+ * @internal
+ * Initializing DescendantsManager
+ */
+function useDescendants() {
+    const descendants = useRef(new DescendantsManager()).current;
+    useClientLayoutEffect(() => {
+        return () => {
+            descendants.destroy();
+        };
+    });
+    return descendants;
+}
+const [DescendantsContextProvider, useDescendantsContext] = createContext({
+    name: "DescendantsProvider",
+    errorMessage: "useDescendantsContext must be used within DescendantsProvider",
+});
+/**
+ * @internal
+ * This hook provides information to descendant component:
+ * - Index compared to other descendants
+ * - ref callback to register the descendant
+ * - Its enabled index compared to other enabled descendants
+ */
+function useDescendant(options) {
+    const descendants = useDescendantsContext();
+    const [index, setIndex] = useState(-1);
+    const ref = useRef(null);
+    useClientLayoutEffect(() => {
+        return () => {
+            if (!ref.current)
+                return;
+            descendants.unregister(ref.current);
+        };
+    }, []);
+    useClientLayoutEffect(() => {
+        if (!ref.current)
+            return;
+        const dataIndex = Number(ref.current.dataset["index"]);
+        if (index != dataIndex && !Number.isNaN(dataIndex)) {
+            setIndex(dataIndex);
+        }
+    });
+    const refCallback = options
+        ? cast(descendants.register(options))
+        : cast(descendants.register);
+    return {
+        descendants,
+        index,
+        enabledIndex: descendants.enabledIndexOf(ref.current),
+        register: mergeRefs([refCallback, ref]),
+    };
+}
+/**
+ * Provides strongly typed versions of the context provider and hooks above.
+ */
+export function createDescendantContext() {
+    const ContextProvider = cast((props) => (React.createElement(DescendantsContextProvider, Object.assign({}, props.value), props.children)));
+    const _useDescendantsContext = () => cast(useDescendantsContext());
+    const _useDescendant = (options) => useDescendant(options);
+    const _useDescendants = () => useDescendants();
+    return [
+        // context provider
+        ContextProvider,
+        // call this when you need to read from context
+        _useDescendantsContext,
+        // descendants state information, to be called and passed to `ContextProvider`
+        _useDescendants,
+        // descendant index information
+        _useDescendant,
+    ];
+}
+//# sourceMappingURL=useDescendant.js.map

package/esm/util/hooks/descendants/useDescendant.js.map

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

package/esm/util/hooks/descendants/utils.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Sort an array of DOM nodes according to the HTML tree order
+ * @see http://www.w3.org/TR/html5/infrastructure.html#tree-order
+ * Inspired by
+ * - https://github.com/floating-ui/floating-ui/blob/8e449abb0bfda143c6a6eb01d3e6943c095b744f/packages/react/src/components/FloatingList.tsx#L8
+ * - https://github.com/chakra-ui/chakra-ui/tree/5ec0be610b5a69afba01a9c22365155c1b519136/packages/components/descendant
+ */
+export declare function sortNodes(nodes: Node[]): Node[];
+export declare const isElement: (el: any) => el is HTMLElement;
+export declare function getNextIndex(current: number, max: number, loop: boolean): number;
+export declare function getPrevIndex(current: number, max: number, loop: boolean): number;
+export declare const cast: <T>(value: any) => T;

package/esm/util/hooks/descendants/utils.js

@@ -0,0 +1,46 @@
+/**
+ * Sort an array of DOM nodes according to the HTML tree order
+ * @see http://www.w3.org/TR/html5/infrastructure.html#tree-order
+ * Inspired by
+ * - https://github.com/floating-ui/floating-ui/blob/8e449abb0bfda143c6a6eb01d3e6943c095b744f/packages/react/src/components/FloatingList.tsx#L8
+ * - https://github.com/chakra-ui/chakra-ui/tree/5ec0be610b5a69afba01a9c22365155c1b519136/packages/components/descendant
+ */
+export function sortNodes(nodes) {
+    return nodes.sort((a, b) => {
+        const compare = a.compareDocumentPosition(b);
+        if (compare & Node.DOCUMENT_POSITION_FOLLOWING ||
+            compare & Node.DOCUMENT_POSITION_CONTAINED_BY) {
+            // a < b
+            return -1;
+        }
+        if (compare & Node.DOCUMENT_POSITION_PRECEDING ||
+            compare & Node.DOCUMENT_POSITION_CONTAINS) {
+            // a > b
+            return 1;
+        }
+        if (compare & Node.DOCUMENT_POSITION_DISCONNECTED ||
+            compare & Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC) {
+            throw Error("Cannot sort the given nodes.");
+        }
+        else {
+            return 0;
+        }
+    });
+}
+export const isElement = (el) => typeof el == "object" &&
+    "nodeType" in el &&
+    el.nodeType === Node.ELEMENT_NODE;
+export function getNextIndex(current, max, loop) {
+    let next = current + 1;
+    if (loop && next >= max)
+        next = 0;
+    return next;
+}
+export function getPrevIndex(current, max, loop) {
+    let next = current - 1;
+    if (loop && next < 0)
+        next = max;
+    return next;
+}
+export const cast = (value) => value;
+//# sourceMappingURL=utils.js.map

package/esm/util/hooks/descendants/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/util/hooks/descendants/utils.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,UAAU,SAAS,CAAC,KAAa;IACrC,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACzB,MAAM,OAAO,GAAG,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;QAE7C,IACE,OAAO,GAAG,IAAI,CAAC,2BAA2B;YAC1C,OAAO,GAAG,IAAI,CAAC,8BAA8B,EAC7C,CAAC;YACD,QAAQ;YACR,OAAO,CAAC,CAAC,CAAC;QACZ,CAAC;QAED,IACE,OAAO,GAAG,IAAI,CAAC,2BAA2B;YAC1C,OAAO,GAAG,IAAI,CAAC,0BAA0B,EACzC,CAAC;YACD,QAAQ;YACR,OAAO,CAAC,CAAC;QACX,CAAC;QAED,IACE,OAAO,GAAG,IAAI,CAAC,8BAA8B;YAC7C,OAAO,GAAG,IAAI,CAAC,yCAAyC,EACxD,CAAC;YACD,MAAM,KAAK,CAAC,8BAA8B,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,CAAC;QACX,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAO,EAAqB,EAAE,CACtD,OAAO,EAAE,IAAI,QAAQ;IACrB,UAAU,IAAI,EAAE;IAChB,EAAE,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC;AAEpC,MAAM,UAAU,YAAY,CAAC,OAAe,EAAE,GAAW,EAAE,IAAa;IACtE,IAAI,IAAI,GAAG,OAAO,GAAG,CAAC,CAAC;IACvB,IAAI,IAAI,IAAI,IAAI,IAAI,GAAG;QAAE,IAAI,GAAG,CAAC,CAAC;IAClC,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,OAAe,EAAE,GAAW,EAAE,IAAa;IACtE,IAAI,IAAI,GAAG,OAAO,GAAG,CAAC,CAAC;IACvB,IAAI,IAAI,IAAI,IAAI,GAAG,CAAC;QAAE,IAAI,GAAG,GAAG,CAAC;IACjC,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,CAAI,KAAU,EAAE,EAAE,CAAC,KAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "5.15.1",
+  "version": "6.0.0-alpha.0",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -14,12 +14,9 @@
     "url": "git+https://github.com/navikt/aksel.git"
   },
   "sideEffects": false,
-  "main": "./cjs/index.js",
-  "module": "./esm/index.js",
   "typings": "./esm/index.d.ts",
   "publishConfig": {
-    "access": "public",
-    "provenance": true
+    "access": "public"
   },
   "files": [
     "/cjs",
@@ -28,11 +25,22 @@
     "_docs.json",
     "!**/*.tsbuildinfo"
   ],
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "types": "./esm/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./esm/index.d.ts",
+      "import": "./esm/index.mjs",
+      "require": "./cjs/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "scripts": {
     "docgen": "yarn ts-node ../../../scripts/docgen.ts",
     "create-package-json-pointers-to-esm": "node ../../../scripts/createPackageJsonsWithESMPointers.js",
     "clean": "rimraf cjs esm",
-    "build": "concurrently \"tsc -p tsconfig.build.json\" \"tsc -p tsconfig.esm.json\" && yarn create-package-json-pointers-to-esm",
+    "build": "concurrently \"tsc -p tsconfig.build.json\" \"tsc -p tsconfig.esm.json\"",
     "watch": "tsc --watch -p tsconfig.esm.json",
     "test": "TZ=UTC jest"
   },

package/src/util/hooks/descendants/descendant.stories.tsx

@@ -0,0 +1,147 @@
+import * as React from "react";
+import { Box } from "../../../layout/box";
+import { HStack } from "../../../layout/stack";
+import { createDescendantContext } from "./useDescendant";
+
+export default {
+  title: "Utilities/Descendants",
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+const [
+  DescendantsProvider,
+  /* eslint-disable @typescript-eslint/no-unused-vars */
+  _useDescendantsContext,
+  useDescendants,
+  useDescendant,
+] = createDescendantContext<HTMLDivElement, { value?: string }>();
+
+function Select({ children }: { children?: React.ReactNode }) {
+  const descendants = useDescendants();
+  const count = descendants.count();
+
+  React.useEffect(() => {
+    descendants.last()?.node.focus();
+  }, [descendants, count]);
+
+  return (
+    <DescendantsProvider value={descendants}>{children}</DescendantsProvider>
+  );
+}
+
+function Option({ value, disabled }: { value?: string; disabled?: boolean }) {
+  const { register, index, descendants } = useDescendant({
+    disabled,
+  });
+
+  return (
+    <Box
+      ref={register}
+      role="button"
+      tabIndex={0}
+      data-value={value}
+      onKeyDown={(event) => {
+        if (event.key === "ArrowDown") {
+          descendants.next(index)?.node.focus();
+        } else if (event.key === "ArrowUp") {
+          descendants.prev(index)?.node.focus();
+        }
+      }}
+    >
+      Option {index + 1}
+    </Box>
+  );
+}
+
+export const DynamicUpdates = () => {
+  const [done, setDone] = React.useState(false);
+
+  React.useEffect(() => {
+    const interval = setInterval(() => setDone((x) => !x), 3000);
+
+    return () => window.clearInterval(interval);
+  }, []);
+
+  return (
+    <Select>
+      <Option value="option 1" />
+      <div>
+        <div>
+          <Option value="option 2" />
+          {done && (
+            <div>
+              <Option value="option 3" />
+              <Option value="option 4" />
+            </div>
+          )}
+        </div>
+        <Option value="option 5" disabled />
+      </div>
+      {done && (
+        <div>
+          <Option value="option 6" />
+          <Option value="option 7" />
+        </div>
+      )}
+    </Select>
+  );
+};
+
+function NumberInputWrapper({ children }: { children?: React.ReactNode }) {
+  const descendants = useDescendants();
+
+  React.useEffect(() => {
+    descendants.first()?.node.focus();
+  }, [descendants]);
+
+  return (
+    <DescendantsProvider value={descendants}>
+      <HStack gap="1">{children}</HStack>
+    </DescendantsProvider>
+  );
+}
+
+function Input() {
+  const [focused, setFocused] = React.useState(false);
+  const { register, index, descendants } = useDescendant();
+
+  return (
+    <input
+      style={{
+        width: "3rem",
+        height: "3rem",
+        borderRadius: "4px",
+        textAlign: "center",
+        border: "1px solid var(--a-border-default)",
+      }}
+      placeholder={focused ? "" : "0"}
+      onFocus={() => setFocused(true)}
+      onBlur={() => setFocused(false)}
+      ref={register}
+      type="tel"
+      autoCapitalize="none"
+      autoComplete="false"
+      inputMode="numeric"
+      onKeyDown={(event) => {
+        if (event.key === "ArrowRight") {
+          descendants.next(index, false)?.node.focus();
+        }
+        if (event.key === "ArrowLeft") {
+          descendants.prev(index, false)?.node.focus();
+        }
+      }}
+    />
+  );
+}
+
+export const NumberInput = () => {
+  return (
+    <NumberInputWrapper>
+      <Input />
+      <Input />
+      <Input />
+    </NumberInputWrapper>
+  );
+};