@navikt/ds-react 6.7.0 → 6.7.1

package/esm/progress-bar/ProgressBar.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import cl from "clsx";
-import React, { forwardRef } from "react";
+import React, { forwardRef, useRef } from "react";
 /**
  * ProgressBar
  * A component for visualizing progression in a process.
@@ -20,26 +20,36 @@ import React, { forwardRef } from "react";
  *
  * @example
  * // For loading content with an approximate duration in sec.
- * <ProgressBar duration={30} />
+ * <ProgressBar simulated={{
+ *     seconds: 30,
+ *     onTimeout: () => console.log("Oops, this is taking more time than expected!")
+ *   }}
+ * />
  *
  * @example
  * // As a step indicator for forms, questionnaires, etc.
  * <ProgressBar value={2} valueMax={7} />
  */
 export const ProgressBar = forwardRef((_a, ref) => {
-    var { size = "medium", value = 0, valueMax = 100, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, className } = _a, rest = __rest(_a, ["size", "value", "valueMax", "aria-labelledby", "aria-label", "className"]);
+    var { size = "medium", value = 0, valueMax = 100, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, className, simulated } = _a, rest = __rest(_a, ["size", "value", "valueMax", "aria-labelledby", "aria-label", "className", "simulated"]);
     const translate = 100 - (Math.round(value) / valueMax) * 100;
-    const duration = undefined;
-    return (React.createElement("div", Object.assign({ ref: ref, className: cl("navds-progress-bar", `navds-progress-bar--${size}`, className), "aria-valuemax": duration ? 0 : Math.round(valueMax), "aria-valuenow": duration ? 0 : Math.round(value), "aria-valuetext": duration
-            ? "Fremdrift kan ikke beregnes"
+    const onTimeoutRef = useRef();
+    onTimeoutRef.current = simulated === null || simulated === void 0 ? void 0 : simulated.onTimeout;
+    React.useEffect(() => {
+        if ((simulated === null || simulated === void 0 ? void 0 : simulated.seconds) && onTimeoutRef.current) {
+            const timeout = setTimeout(onTimeoutRef.current, simulated.seconds * 1000);
+            return () => clearTimeout(timeout);
+        }
+    }, [simulated === null || simulated === void 0 ? void 0 : simulated.seconds]);
+    return (React.createElement("div", Object.assign({ ref: ref, className: cl("navds-progress-bar", `navds-progress-bar--${size}`, className), "aria-valuemax": (simulated === null || simulated === void 0 ? void 0 : simulated.seconds) ? 0 : Math.round(valueMax), "aria-valuenow": (simulated === null || simulated === void 0 ? void 0 : simulated.seconds) ? 0 : Math.round(value), "aria-valuetext": (simulated === null || simulated === void 0 ? void 0 : simulated.seconds)
+            ? `Fremdrift kan ikke beregnes, antatt tid er: ${simulated === null || simulated === void 0 ? void 0 : simulated.seconds} sekunder`
             : `${Math.round(value)} av ${Math.round(valueMax)}`, role: "progressbar", "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel }, rest),
         React.createElement("div", { className: cl("navds-progress-bar__foreground", {
-                "navds-progress-bar__foreground--indeterminate": Number.isInteger(duration),
+                "navds-progress-bar__foreground--indeterminate": Number.isInteger(simulated === null || simulated === void 0 ? void 0 : simulated.seconds),
             }), style: {
-                "--__ac-progress-bar-duration": Number.isInteger(duration)
-                    ? `${duration}s`
+                "--__ac-progress-bar-simulated": Number.isInteger(simulated === null || simulated === void 0 ? void 0 : simulated.seconds)
+                    ? `${simulated === null || simulated === void 0 ? void 0 : simulated.seconds}s`
                     : undefined,
-                "--__ac-progress-bar-delay": `${duration === 0 ? 0 : 4}s`,
                 "--__ac-progress-bar-translate": `-${translate}%`,
             } })));
 });

package/esm/progress-bar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../src/progress-bar/ProgressBar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAkB,UAAU,EAAE,MAAM,OAAO,CAAC;AAqD1D;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,CAAC,EACT,QAAQ,GAAG,GAAG,EACd,iBAAiB,EAAE,cAAc,EACjC,YAAY,EAAE,SAAS,EACvB,SAAS,OAEV,EADI,IAAI,cAPT,2EAQC,CADQ;IAIT,MAAM,SAAS,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,GAAG,GAAG,CAAC;IAC7D,MAAM,QAAQ,GAAG,SAAS,CAAC;IAE3B,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oBAAoB,EACpB,uBAAuB,IAAI,EAAE,EAC7B,SAAS,CACV,mBACc,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,mBACnC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,oBAE7C,QAAQ;YACN,CAAC,CAAC,6BAA6B;YAC/B,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,EAEvD,IAAI,EAAC,aAAa,qBACD,cAAc,gBACnB,SAAS,IACjB,IAAI;QAER,6BACE,SAAS,EAAE,EAAE,CAAC,gCAAgC,EAAE;gBAC9C,+CAA+C,EAC7C,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC;aAC7B,CAAC,EACF,KAAK,EAAE;gBACL,8BAA8B,EAAE,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC;oBACxD,CAAC,CAAC,GAAG,QAAQ,GAAG;oBAChB,CAAC,CAAC,SAAS;gBACb,2BAA2B,EAAE,GAAG,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;gBACzD,+BAA+B,EAAE,IAAI,SAAS,GAAG;aAClD,GACD,CACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../src/progress-bar/ProgressBar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAkB,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AA4DlE;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,CAAC,EACT,QAAQ,GAAG,GAAG,EACd,iBAAiB,EAAE,cAAc,EACjC,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,SAAS,OAEV,EADI,IAAI,cART,wFASC,CADQ;IAIT,MAAM,SAAS,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,GAAG,GAAG,CAAC;IAC7D,MAAM,YAAY,GAAG,MAAM,EAAc,CAAC;IAC1C,YAAY,CAAC,OAAO,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,CAAC;IAE5C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,KAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YAC/C,MAAM,OAAO,GAAG,UAAU,CACxB,YAAY,CAAC,OAAO,EACpB,SAAS,CAAC,OAAO,GAAG,IAAI,CACzB,CAAC;YACF,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oBAAoB,EACpB,uBAAuB,IAAI,EAAE,EAC7B,SAAS,CACV,mBACc,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,EAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,mBAC7C,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,EAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,oBAEvD,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO;YAChB,CAAC,CAAC,+CAA+C,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,WAAW;YAC9E,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,EAEvD,IAAI,EAAC,aAAa,qBACD,cAAc,gBACnB,SAAS,IACjB,IAAI;QAER,6BACE,SAAS,EAAE,EAAE,CAAC,gCAAgC,EAAE;gBAC9C,+CAA+C,EAAE,MAAM,CAAC,SAAS,CAC/D,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,CACnB;aACF,CAAC,EACF,KAAK,EAAE;gBACL,+BAA+B,EAAE,MAAM,CAAC,SAAS,CAC/C,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,CACnB;oBACC,CAAC,CAAC,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,GAAG;oBAC1B,CAAC,CAAC,SAAS;gBACb,+BAA+B,EAAE,IAAI,SAAS,GAAG;aAClD,GACD,CACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/esm/tabs/Tabs.context.d.ts

@@ -3,14 +3,18 @@ import { TabsProps } from "./Tabs.types.js";
 import { useTabs } from "./useTabs.js";
 export declare const TabsDescendantsProvider: import("react").Provider<import("../util/hooks/descendants/descendant.js").DescendantsManager<HTMLButtonElement, {
     value: string;
-}>>, useTabsDescendantsContext: () => import("../util/hooks/descendants/descendant.js").DescendantsManager<HTMLButtonElement, {
+}>>, useTabsDescendantsContext: <S extends boolean = true>(strict?: S) => S extends true ? import("../util/hooks/descendants/descendant.js").DescendantsManager<HTMLButtonElement, {
     value: string;
-}>, useTabsDescendants: () => import("../util/hooks/descendants/descendant.js").DescendantsManager<HTMLButtonElement, {
+}> : import("../util/hooks/descendants/descendant.js").DescendantsManager<HTMLButtonElement, {
+    value: string;
+}> | undefined, useTabsDescendants: () => import("../util/hooks/descendants/descendant.js").DescendantsManager<HTMLButtonElement, {
     value: string;
 }>, useTabsDescendant: (options?: import("../util/hooks/descendants/descendant.js").DescendantOptions<{
     value: string;
 }> | undefined) => {
-    descendants: import("../util/hooks/descendants/descendant.js").DescendantsManager<HTMLElement, Record<string, any>>;
+    descendants: import("../util/hooks/descendants/descendant.js").DescendantsManager<HTMLButtonElement, {
+        value: string;
+    }>;
     index: number;
     enabledIndex: number;
     register: (instance: HTMLButtonElement | null) => void;

package/esm/tabs/Tabs.context.js

@@ -6,5 +6,6 @@ export const [TabsProvider, useTabsContext] = createContext({
     name: "TabsContext",
     hookName: "useTabsContext",
     providerName: "TabsProvider",
+    errorMessage: "Tabs.List, Tabs.Tag and Tabs.Panel needs to be wrapped within <Tabs>",
 });
 //# sourceMappingURL=Tabs.context.js.map

package/esm/tabs/Tabs.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.context.js","sourceRoot":"","sources":["../../src/tabs/Tabs.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAIlF,MAAM,CAAC,MAAM,CACX,uBAAuB,EACvB,yBAAyB,EACzB,kBAAkB,EAClB,iBAAiB,EAClB,GAAG,uBAAuB,EAAwC,CAAC;AAQpE,mBAAmB;AACnB,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,GAAG,aAAa,CAAoB;IAC7E,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE,gBAAgB;IAC1B,YAAY,EAAE,cAAc;CAC7B,CAAC,CAAC"}
+{"version":3,"file":"Tabs.context.js","sourceRoot":"","sources":["../../src/tabs/Tabs.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAIlF,MAAM,CAAC,MAAM,CACX,uBAAuB,EACvB,yBAAyB,EACzB,kBAAkB,EAClB,iBAAiB,EAClB,GAAG,uBAAuB,EAAwC,CAAC;AAQpE,mBAAmB;AACnB,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,GAAG,aAAa,CAAoB;IAC7E,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE,gBAAgB;IAC1B,YAAY,EAAE,cAAc;IAC5B,YAAY,EACV,sEAAsE;CACzE,CAAC,CAAC"}

package/esm/timeline/AxisLabels.d.ts

@@ -4,5 +4,5 @@ export declare const dayLabels: (start: Date, end: Date, totalDays: number, dire
 export declare const monthLabels: (start: Date, end: Date, direction: "left" | "right", template?: string) => AxisLabel[];
 export declare const yearLabels: (start: Date, end: Date, direction: "left" | "right", template?: string) => AxisLabel[];
 export declare const AxisLabels: ({ templates, }: {
-    templates?: AxisLabelTemplates | undefined;
+    templates?: AxisLabelTemplates;
 }) => React.JSX.Element;

package/esm/toggle-group/ToggleGroup.context.d.ts

@@ -7,14 +7,18 @@ interface ToggleContextProps {
 export declare const ToggleGroupContext: import("react").Context<ToggleContextProps | null>;
 export declare const ToggleGroupDescendantsProvider: import("react").Provider<import("../util/hooks/descendants/descendant.js").DescendantsManager<HTMLButtonElement, {
     value: string;
-}>>, useToggleGroupDescendantsContext: () => import("../util/hooks/descendants/descendant.js").DescendantsManager<HTMLButtonElement, {
+}>>, useToggleGroupDescendantsContext: <S extends boolean = true>(strict?: S) => S extends true ? import("../util/hooks/descendants/descendant.js").DescendantsManager<HTMLButtonElement, {
     value: string;
-}>, useToggleGroupDescendants: () => import("../util/hooks/descendants/descendant.js").DescendantsManager<HTMLButtonElement, {
+}> : import("../util/hooks/descendants/descendant.js").DescendantsManager<HTMLButtonElement, {
+    value: string;
+}> | undefined, useToggleGroupDescendants: () => import("../util/hooks/descendants/descendant.js").DescendantsManager<HTMLButtonElement, {
     value: string;
 }>, useToggleGroupDescendant: (options?: import("../util/hooks/descendants/descendant.js").DescendantOptions<{
     value: string;
 }> | undefined) => {
-    descendants: import("../util/hooks/descendants/descendant.js").DescendantsManager<HTMLElement, Record<string, any>>;
+    descendants: import("../util/hooks/descendants/descendant.js").DescendantsManager<HTMLButtonElement, {
+        value: string;
+    }>;
     index: number;
     enabledIndex: number;
     register: (instance: HTMLButtonElement | null) => void;

package/esm/toggle-group/ToggleGroup.context.js

@@ -8,5 +8,6 @@ export const [ToggleGroupProvider, useToggleGroupContext] = createContext({
     name: "ToggleGroupContext",
     hookName: "useToggleGroupContext",
     providerName: "ToggleGroupProvider",
+    errorMessage: "<ToggleGroup.Item> needs to be wrapped within <ToggleGroup>",
 });
 //# sourceMappingURL=ToggleGroup.context.js.map

package/esm/toggle-group/ToggleGroup.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.context.js","sourceRoot":"","sources":["../../src/toggle-group/ToggleGroup.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAQlF,MAAM,CAAC,MAAM,kBAAkB,GAAG,kBAAkB,CAClD,IAAI,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,CACX,8BAA8B,EAC9B,gCAAgC,EAChC,yBAAyB,EACzB,wBAAwB,EACzB,GAAG,uBAAuB,EAAwC,CAAC;AAKpE,mBAAmB;AACnB,MAAM,CAAC,MAAM,CAAC,mBAAmB,EAAE,qBAAqB,CAAC,GACvD,aAAa,CAA2B;IACtC,IAAI,EAAE,oBAAoB;IAC1B,QAAQ,EAAE,uBAAuB;IACjC,YAAY,EAAE,qBAAqB;CACpC,CAAC,CAAC"}
+{"version":3,"file":"ToggleGroup.context.js","sourceRoot":"","sources":["../../src/toggle-group/ToggleGroup.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAQlF,MAAM,CAAC,MAAM,kBAAkB,GAAG,kBAAkB,CAClD,IAAI,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,CACX,8BAA8B,EAC9B,gCAAgC,EAChC,yBAAyB,EACzB,wBAAwB,EACzB,GAAG,uBAAuB,EAAwC,CAAC;AAKpE,mBAAmB;AACnB,MAAM,CAAC,MAAM,CAAC,mBAAmB,EAAE,qBAAqB,CAAC,GACvD,aAAa,CAA2B;IACtC,IAAI,EAAE,oBAAoB;IAC1B,QAAQ,EAAE,uBAAuB;IACjC,YAAY,EAAE,qBAAqB;IACnC,YAAY,EAAE,6DAA6D;CAC5E,CAAC,CAAC"}

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

@@ -6,8 +6,8 @@ import { DescendantOptions, DescendantsManager } from "./descendant.js";
 /**
  * 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>>;
+export declare function createDescendantContext<T extends HTMLElement = HTMLElement, K extends Record<string, any> = object>(): readonly [React.Provider<DescendantsManager<T, K>>, <S extends boolean = true>(strict?: S) => S extends true ? DescendantsManager<T, K> : DescendantsManager<T, K> | undefined, () => DescendantsManager<T, K>, (options?: DescendantOptions<K>) => {
+    descendants: DescendantsManager<T, K>;
     index: number;
     enabledIndex: number;
     register: (instance: T | null) => void;

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

@@ -7,67 +7,64 @@ import { useClientLayoutEffect } from "../useClientLayoutEffect.js";
 import { mergeRefs } from "../useMergeRefs.js";
 import { DescendantsManager } from "./descendant.js";
 import { cast } from "./utils.js";
-/**
- * @internal
- * Initializing DescendantsManager
- */
-function useDescendants() {
-    const descendants = useRef(new DescendantsManager()).current;
-    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 [DescendantsContextProvider, useDescendantsContext] = createContext({
+        name: "DescendantsProvider",
+        errorMessage: "useDescendantsContext must be used within DescendantsProvider",
+    });
     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();
+    /**
+     * @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]),
+        };
+    }
+    /**
+     * @internal
+     * Initializing DescendantsManager
+     */
+    function _useDescendants() {
+        const descendants = useRef(new DescendantsManager()).current;
+        return descendants;
+    }
     return [
         // context provider
         ContextProvider,
         // call this when you need to read from context
-        _useDescendantsContext,
+        useDescendantsContext,
         // descendants state information, to be called and passed to `ContextProvider`
         _useDescendants,
         // descendant index information

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

@@ -1 +1 @@
-{"version":3,"file":"useDescendant.js","sourceRoot":"","sources":["../../../../src/util/hooks/descendants/useDescendant.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAqB,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B;;;GAGG;AACH,SAAS,cAAc;IAIrB,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,kBAAkB,EAAQ,CAAC,CAAC,OAAO,CAAC;IAEnE,OAAO,WAAW,CAAC;AACrB,CAAC;AAED,MAAM,CAAC,0BAA0B,EAAE,qBAAqB,CAAC,GAAG,aAAa,CAEvE;IACA,IAAI,EAAE,qBAAqB;IAC3B,YAAY,EAAE,+DAA+D;CAC9E,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,SAAS,aAAa,CAGpB,OAA8B;IAC9B,MAAM,WAAW,GAAG,qBAAqB,EAAE,CAAC;IAC5C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IACvC,MAAM,GAAG,GAAG,MAAM,CAAI,IAAI,CAAC,CAAC;IAE5B,qBAAqB,CAAC,GAAG,EAAE;QACzB,OAAO,GAAG,EAAE;YACV,IAAI,CAAC,GAAG,CAAC,OAAO;gBAAE,OAAO;YACzB,WAAW,CAAC,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACtC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,GAAG,CAAC,OAAO;YAAE,OAAO;QACzB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;QACvD,IAAI,KAAK,IAAI,SAAS,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC;YACnD,QAAQ,CAAC,SAAS,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,OAAO;QACzB,CAAC,CAAC,IAAI,CAAuB,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QAC3D,CAAC,CAAC,IAAI,CAAuB,WAAW,CAAC,QAAQ,CAAC,CAAC;IAErD,OAAO;QACL,WAAW;QACX,KAAK;QACL,YAAY,EAAE,WAAW,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC;QACrD,QAAQ,EAAE,SAAS,CAAC,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;KACxC,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,uBAAuB;IAIrC,MAAM,eAAe,GAAG,IAAI,CAC1B,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,oBAAC,0BAA0B,oBAAK,KAAK,CAAC,KAAK,GACxC,KAAK,CAAC,QAAQ,CACY,CAC9B,CACF,CAAC;IAEF,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAClC,IAAI,CAA2B,qBAAqB,EAAE,CAAC,CAAC;IAE1D,MAAM,cAAc,GAAG,CAAC,OAA8B,EAAE,EAAE,CACxD,aAAa,CAAO,OAAO,CAAC,CAAC;IAE/B,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,cAAc,EAAQ,CAAC;IAErD,OAAO;QACL,mBAAmB;QACnB,eAAe;QACf,+CAA+C;QAC/C,sBAAsB;QACtB,8EAA8E;QAC9E,eAAe;QACf,+BAA+B;QAC/B,cAAc;KACN,CAAC;AACb,CAAC"}
+{"version":3,"file":"useDescendant.js","sourceRoot":"","sources":["../../../../src/util/hooks/descendants/useDescendant.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAqB,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B;;GAEG;AACH,MAAM,UAAU,uBAAuB;IAIrC,MAAM,CAAC,0BAA0B,EAAE,qBAAqB,CAAC,GAAG,aAAa,CAEvE;QACA,IAAI,EAAE,qBAAqB;QAC3B,YAAY,EACV,+DAA+D;KAClE,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,IAAI,CAC1B,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,oBAAC,0BAA0B,oBAAK,KAAK,CAAC,KAAK,GACxC,KAAK,CAAC,QAAQ,CACY,CAC9B,CACF,CAAC;IAEF;;;;;;OAMG;IACH,SAAS,cAAc,CAAC,OAA8B;QACpD,MAAM,WAAW,GAAG,qBAAqB,EAAE,CAAC;QAC5C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,MAAM,CAAI,IAAI,CAAC,CAAC;QAE5B,qBAAqB,CAAC,GAAG,EAAE;YACzB,OAAO,GAAG,EAAE;gBACV,IAAI,CAAC,GAAG,CAAC,OAAO;oBAAE,OAAO;gBACzB,WAAW,CAAC,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YACtC,CAAC,CAAC;QACJ,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,GAAG,CAAC,OAAO;gBAAE,OAAO;YACzB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;YACvD,IAAI,KAAK,IAAI,SAAS,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC;gBACnD,QAAQ,CAAC,SAAS,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,MAAM,WAAW,GAAG,OAAO;YACzB,CAAC,CAAC,IAAI,CAAuB,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YAC3D,CAAC,CAAC,IAAI,CAAuB,WAAW,CAAC,QAAQ,CAAC,CAAC;QAErD,OAAO;YACL,WAAW;YACX,KAAK;YACL,YAAY,EAAE,WAAW,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC;YACrD,QAAQ,EAAE,SAAS,CAAC,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;SACxC,CAAC;IACJ,CAAC;IAED;;;OAGG;IACH,SAAS,eAAe;QACtB,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,kBAAkB,EAAQ,CAAC,CAAC,OAAO,CAAC;QAEnE,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,OAAO;QACL,mBAAmB;QACnB,eAAe;QACf,+CAA+C;QAC/C,qBAAqB;QACrB,8EAA8E;QAC9E,eAAe;QACf,+BAA+B;QAC/B,cAAc;KACN,CAAC;AACb,CAAC"}

package/esm/util/types/AsChild.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export type AsChild = {
+    children: React.ReactElement;
+    /**
+     * Renders the children as a child of the component. Merges the props of the component with the props of the child.
+     */
+    asChild: true;
+} | {
+    children: React.ReactNode;
+    /**
+     * Renders the children as a child of the component. Merges the props of the component with the props of the child.
+     */
+    asChild?: false;
+};

package/esm/util/types/AsChild.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AsChild.js.map

package/esm/util/types/AsChild.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "6.7.0",
+  "version": "6.7.1",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -583,16 +583,17 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^6.7.0",
-    "@navikt/ds-tokens": "^6.7.0",
+    "@floating-ui/react-dom": "^2.0.9",
+    "@navikt/aksel-icons": "^6.7.1",
+    "@navikt/ds-tokens": "^6.7.1",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "8.13.0",
+    "@testing-library/dom": "9.3.4",
     "@testing-library/jest-dom": "^5.16.0",
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.2.0",
     "@types/faker": "5.5.8",
     "concurrently": "7.2.1",

package/src/chat/Chat.tsx

@@ -3,6 +3,7 @@ import React, { HTMLAttributes, forwardRef } from "react";
 import { BodyLong } from "../typography";
 import Bubble from "./Bubble";
 
+export const VARIANTS = ["subtle", "info", "neutral"] as const;
 export const POSITIONS = ["left", "right"] as const;
 export const SIZES = ["medium", "small"] as const;
 
@@ -28,7 +29,7 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
    * Avoid using the same background as the surface behind Chat.
    * @default "neutral"
    */
-  variant?: "subtle" | "info" | "neutral";
+  variant?: (typeof VARIANTS)[number];
   /**
    * Positions avatar and bubbles.
    * @default "left"

package/src/date/datepicker/parts/DropdownCaption.tsx

@@ -37,7 +37,11 @@ export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
   const handleMonthChange: React.ChangeEventHandler<HTMLSelectElement> = (e) =>
     goToMonth(setMonth(startOfMonth(displayMonth), Number(e.target.value)));
 
-  const years = getYears(fromDate, toDate, displayMonth.getFullYear());
+  const years = getYears(
+    fromDate,
+    toDate,
+    displayMonth.getFullYear(),
+  ).reverse();
   const months = getMonths(fromDate, toDate, displayMonth);
 
   const previousLabel = labelPrevious(previousMonth, { locale });

package/src/date/monthpicker/MonthCaption.tsx

@@ -35,7 +35,7 @@ export const MonthCaption = () => {
     if (!years.map((x) => x.getFullYear()).includes(year.getFullYear())) {
       years.push(setYear(startOfYear(new Date()), year.getFullYear()));
     }
-    years.sort((a, b) => a.getFullYear() - b.getFullYear());
+    years.sort((a, b) => b.getFullYear() - a.getFullYear());
   }
 
   const handleYearChange = (e) =>

package/src/form/combobox/Combobox.tsx

@@ -1,57 +1,31 @@
 import cl from "clsx";
-import React, { forwardRef, useRef } from "react";
+import React, { forwardRef } from "react";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
-import { useMergeRefs } from "../../util/hooks/useMergeRefs";
-import ClearButton from "./ClearButton";
 import ComboboxWrapper from "./ComboboxWrapper";
 import FilteredOptions from "./FilteredOptions/FilteredOptions";
 import { useFilteredOptionsContext } from "./FilteredOptions/filteredOptionsContext";
-import Input from "./Input/Input";
-import { useInputContext } from "./Input/inputContext";
-import SelectedOptions from "./SelectedOptions/SelectedOptions";
-import { useSelectedOptionsContext } from "./SelectedOptions/selectedOptionsContext";
-import ToggleListButton from "./ToggleListButton";
+import { useInputContext } from "./Input/Input.context";
+import { InputController } from "./Input/InputController";
 import { ComboboxProps } from "./types";
 
 export const Combobox = forwardRef<
   HTMLInputElement,
   Omit<ComboboxProps, "onChange" | "options" | "size" | "onClear" | "value">
 >((props, ref) => {
-  const {
-    className,
-    hideLabel = false,
-    description,
-    label,
-    clearButton = true,
-    clearButtonLabel,
-    toggleListButton = true,
-    toggleListButtonLabel,
-    inputClassName,
-    shouldShowSelectedOptions = true,
-    ...rest
-  } = props;
-
-  const toggleListButtonRef = useRef<HTMLButtonElement>(null);
+  const { className, hideLabel = false, description, label, ...rest } = props;
 
-  const { activeDecendantId, toggleIsListOpen } = useFilteredOptionsContext();
-  const { selectedOptions } = useSelectedOptionsContext();
+  const { toggleIsListOpen } = useFilteredOptionsContext();
 
   const {
-    clearInput,
     error,
     errorId,
-    focusInput,
     hasError,
     inputDescriptionId,
     inputProps,
-    inputRef,
-    value,
     showErrorMsg,
     size = "medium",
   } = useInputContext();
 
-  const mergedInputRef = useMergeRefs(inputRef, ref);
-
   return (
     <ComboboxWrapper
       className={className}
@@ -59,7 +33,6 @@ export const Combobox = forwardRef<
       inputProps={inputProps}
       inputSize={size}
       toggleIsListOpen={toggleIsListOpen}
-      toggleListButtonRef={toggleListButtonRef}
     >
       <Label
         htmlFor={inputProps.id}
@@ -83,50 +56,7 @@ export const Combobox = forwardRef<
         </BodyShort>
       )}
       <div className="navds-combobox__wrapper">
-        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-        <div
-          className={cl(
-            "navds-combobox__wrapper-inner navds-text-field__input",
-            {
-              "navds-combobox__wrapper-inner--virtually-unfocused":
-                activeDecendantId !== undefined,
-            },
-          )}
-          onClick={focusInput}
-        >
-          {!shouldShowSelectedOptions ? (
-            <Input
-              id={inputProps.id}
-              ref={mergedInputRef}
-              inputClassName={inputClassName}
-              {...rest}
-            />
-          ) : (
-            <SelectedOptions selectedOptions={selectedOptions} size={size}>
-              <Input
-                id={inputProps.id}
-                ref={mergedInputRef}
-                inputClassName={inputClassName}
-                {...rest}
-              />
-            </SelectedOptions>
-          )}
-          <div>
-            {value && clearButton && (
-              <ClearButton
-                handleClear={clearInput}
-                clearButtonLabel={clearButtonLabel}
-                tabIndex={-1}
-              />
-            )}
-            {toggleListButton && (
-              <ToggleListButton
-                toggleListButtonLabel={toggleListButtonLabel}
-                ref={toggleListButtonRef}
-              />
-            )}
-          </div>
-        </div>
+        <InputController ref={ref} {...rest} />
         <FilteredOptions />
       </div>
       <div

package/src/form/combobox/ComboboxProvider.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import Combobox from "./Combobox";
 import { FilteredOptionsProvider } from "./FilteredOptions/filteredOptionsContext";
-import { InputContextProvider } from "./Input/inputContext";
+import { InputContextProvider } from "./Input/Input.context";
 import { SelectedOptionsProvider } from "./SelectedOptions/selectedOptionsContext";
 import { mapToComboboxOptionArray } from "./combobox-utils";
 import { CustomOptionsProvider } from "./customOptionsContext";

package/src/form/combobox/ComboboxWrapper.tsx

@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { useRef, useState } from "react";
+import { useInputContext } from "./Input/Input.context";
 
 type ComboboxWrapperProps = {
   children: any;
@@ -10,7 +11,6 @@ type ComboboxWrapperProps = {
   };
   inputSize: string;
   toggleIsListOpen: (isListOpen: boolean) => void;
-  toggleListButtonRef: React.RefObject<HTMLButtonElement>;
 };
 
 const ComboboxWrapper = ({
@@ -20,15 +20,16 @@ const ComboboxWrapper = ({
   inputProps,
   inputSize,
   toggleIsListOpen,
-  toggleListButtonRef,
 }: ComboboxWrapperProps) => {
+  const { toggleOpenButtonRef } = useInputContext();
+
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const [hasFocusWithin, setHasFocusWithin] = useState(false);
 
   function onFocusInsideWrapper(e) {
     if (
       !wrapperRef.current?.contains(e.relatedTarget) &&
-      toggleListButtonRef?.current !== e.target
+      toggleOpenButtonRef?.current !== e.target
     ) {
       toggleIsListOpen(true);
       setHasFocusWithin(true);

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

@@ -3,7 +3,7 @@ import React from "react";
 import { CheckmarkIcon, PlusIcon } from "@navikt/aksel-icons";
 import { Loader } from "../../../loader";
 import { BodyShort, Label } from "../../../typography";
-import { useInputContext } from "../Input/inputContext";
+import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { isInList, toComboboxOption } from "../combobox-utils";
 import { ComboboxOption } from "../types";
@@ -38,7 +38,7 @@ const FilteredOptions = () => {
   const shouldRenderNonSelectables =
     maxSelected?.isLimitReached || // Render maxSelected message
     isLoading || // Render loading message
-    (!isLoading && filteredOptions.length === 0); // Render no hits message
+    (!isLoading && filteredOptions.length === 0 && !allowNewValues); // Render no hits message
 
   const shouldRenderFilteredOptionsList =
     (allowNewValues && isValueNew && !maxSelected?.isLimitReached) || // Render add new option
@@ -72,7 +72,7 @@ const FilteredOptions = () => {
               <Loader title="Søker..." />
             </div>
           )}
-          {!isLoading && filteredOptions.length === 0 && (
+          {!isLoading && filteredOptions.length === 0 && !allowNewValues && (
             <div
               className="navds-combobox__list-item--no-options"
               id={filteredOptionsUtil.getNoHitsId(id)}