@navikt/ds-react 7.31.0 → 7.32.0

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

@@ -16,7 +16,7 @@ export declare const TabsDescendantsProvider: import("react").Provider<import(".
     }>;
     index: number;
     enabledIndex: number;
-    register: (instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES];
+    register: (instance: HTMLButtonElement | null) => void;
 };
 type TabsProviderProps = ReturnType<typeof useTabs> & Pick<TabsProps, "selectionFollowsFocus" | "loop" | "size" | "iconPosition" | "fill">;
 export declare const TabsProvider: import("react").ForwardRefExoticComponent<{

package/esm/tabs/parts/tab/useTab.d.ts

@@ -9,7 +9,7 @@ export interface UseTabProps {
     value: string;
 }
 export declare function useTab<P extends UseTabProps>({ value, disabled, onFocus: _onFocus, onClick }: P, ref: React.ForwardedRef<HTMLButtonElement>): {
-    ref: (instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES];
+    ref: (instance: HTMLButtonElement | null) => void;
     isSelected: boolean;
     isFocused: boolean;
     id: string;

package/esm/tabs/parts/tablist/useScrollButtons.d.ts

@@ -1,4 +1,4 @@
-export declare function useScrollButtons(listRef: React.RefObject<HTMLDivElement>): {
+export declare function useScrollButtons(listRef: React.RefObject<HTMLDivElement | null>): {
     update: {
         (this: any): void;
         clear(): void;

package/esm/tabs/parts/tablist/useScrollButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollButtons.js","sourceRoot":"","sources":["../../../../src/tabs/parts/tablist/useScrollButtons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,UAAU,gBAAgB,CAAC,OAAwC;IACvE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC;QACjD,KAAK,EAAE,KAAK;QACZ,GAAG,EAAE,KAAK;KACX,CAAC,CAAC;IAEH,MAAM,uBAAuB,GAAG,OAAO,CACrC,GAAG,EAAE,CACH,QAAQ,CAAC,GAAG,EAAE;QACZ,IAAI,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAA;YAAE,OAAO;QAC9B,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC;QACrD,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC;QAC9C,6DAA6D;QAC7D,MAAM,eAAe,GAAG,UAAU,GAAG,CAAC,CAAC;QACvC,MAAM,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,CAAC,CAAC;QAEjE,gBAAgB,CAAC,CAAC,gBAAgB,EAAE,EAAE,CACpC,eAAe,KAAK,gBAAgB,CAAC,KAAK;YAC1C,aAAa,KAAK,gBAAgB,CAAC,GAAG;YACpC,CAAC,CAAC,gBAAgB;YAClB,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,aAAa,EAAE,CACnD,CAAC;IACJ,CAAC,CAAC,EACJ,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;;QACb,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,uBAAuB,EAAE,CAAC;QACrD,MAAM,GAAG,GAAG,MAAA,MAAA,MAAA,OAAO,CAAC,OAAO,0CAAE,aAAa,mCAAI,QAAQ,mCAAI,MAAM,CAAC;QACjE,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAE7C,IAAI,cAA8B,CAAC;QAEnC,IAAI,OAAO,cAAc,KAAK,WAAW,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;YAC7D,cAAc,GAAG,IAAI,cAAc,CAAC,YAAY,CAAC,CAAC;YAClD,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAC1C,CAAC;QAED,OAAO,GAAG,EAAE;YACV,GAAG,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YAChD,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,UAAU,EAAE,CAAC;YAC7B,uBAAuB,CAAC,KAAK,EAAE,CAAC;QAClC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,uBAAuB,CAAC,CAAC,CAAC;IAEvC,SAAS,CAAC,GAAG,EAAE;QACb,uBAAuB,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,OAAO;QACL,MAAM,EAAE,uBAAuB;QAC/B,KAAK,EAAE,aAAa,CAAC,KAAK;QAC1B,GAAG,EAAE,aAAa,CAAC,GAAG;QACtB,IAAI,EAAE,aAAa,CAAC,GAAG,IAAI,aAAa,CAAC,KAAK;QAC9C,UAAU,EAAE,GAAG,EAAE;YACf,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;gBACpB,OAAO,CAAC,OAAO,CAAC,UAAU,IAAI,GAAG,CAAC;YACpC,CAAC;QACH,CAAC;QACD,WAAW,EAAE,GAAG,EAAE;YAChB,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;gBACpB,OAAO,CAAC,OAAO,CAAC,UAAU,IAAI,GAAG,CAAC;YACpC,CAAC;QACH,CAAC;KACF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"useScrollButtons.js","sourceRoot":"","sources":["../../../../src/tabs/parts/tablist/useScrollButtons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,UAAU,gBAAgB,CAC9B,OAA+C;IAE/C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC;QACjD,KAAK,EAAE,KAAK;QACZ,GAAG,EAAE,KAAK;KACX,CAAC,CAAC;IAEH,MAAM,uBAAuB,GAAG,OAAO,CACrC,GAAG,EAAE,CACH,QAAQ,CAAC,GAAG,EAAE;QACZ,IAAI,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAA;YAAE,OAAO;QAC9B,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC;QACrD,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC;QAC9C,6DAA6D;QAC7D,MAAM,eAAe,GAAG,UAAU,GAAG,CAAC,CAAC;QACvC,MAAM,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,CAAC,CAAC;QAEjE,gBAAgB,CAAC,CAAC,gBAAgB,EAAE,EAAE,CACpC,eAAe,KAAK,gBAAgB,CAAC,KAAK;YAC1C,aAAa,KAAK,gBAAgB,CAAC,GAAG;YACpC,CAAC,CAAC,gBAAgB;YAClB,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,aAAa,EAAE,CACnD,CAAC;IACJ,CAAC,CAAC,EACJ,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;;QACb,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,uBAAuB,EAAE,CAAC;QACrD,MAAM,GAAG,GAAG,MAAA,MAAA,MAAA,OAAO,CAAC,OAAO,0CAAE,aAAa,mCAAI,QAAQ,mCAAI,MAAM,CAAC;QACjE,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAE7C,IAAI,cAA8B,CAAC;QAEnC,IAAI,OAAO,cAAc,KAAK,WAAW,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;YAC7D,cAAc,GAAG,IAAI,cAAc,CAAC,YAAY,CAAC,CAAC;YAClD,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAC1C,CAAC;QAED,OAAO,GAAG,EAAE;YACV,GAAG,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YAChD,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,UAAU,EAAE,CAAC;YAC7B,uBAAuB,CAAC,KAAK,EAAE,CAAC;QAClC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,uBAAuB,CAAC,CAAC,CAAC;IAEvC,SAAS,CAAC,GAAG,EAAE;QACb,uBAAuB,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,OAAO;QACL,MAAM,EAAE,uBAAuB;QAC/B,KAAK,EAAE,aAAa,CAAC,KAAK;QAC1B,GAAG,EAAE,aAAa,CAAC,GAAG;QACtB,IAAI,EAAE,aAAa,CAAC,GAAG,IAAI,aAAa,CAAC,KAAK;QAC9C,UAAU,EAAE,GAAG,EAAE;YACf,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;gBACpB,OAAO,CAAC,OAAO,CAAC,UAAU,IAAI,GAAG,CAAC;YACpC,CAAC;QACH,CAAC;QACD,WAAW,EAAE,GAAG,EAAE;YAChB,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;gBACpB,OAAO,CAAC,OAAO,CAAC,UAAU,IAAI,GAAG,CAAC;YACpC,CAAC;QACH,CAAC;KACF,CAAC;AACJ,CAAC"}

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

@@ -20,7 +20,7 @@ export declare const ToggleGroupDescendantsProvider: import("react").Provider<im
     }>;
     index: number;
     enabledIndex: number;
-    register: (instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES];
+    register: (instance: HTMLButtonElement | null) => void;
 };
 type ToggleGroupProviderProps = ReturnType<typeof useToggleGroup> & Pick<ToggleGroupProps, "size">;
 export declare const ToggleGroupProvider: import("react").ForwardRefExoticComponent<{

package/esm/toggle-group/parts/useToggleItem.d.ts

@@ -10,7 +10,7 @@ export interface UseToggleItemProps {
     value: string;
 }
 export declare function useToggleItem<P extends UseToggleItemProps>({ value, disabled, onFocus: _onFocus, onClick, onKeyDown: _onKeyDown, }: P, ref: React.ForwardedRef<HTMLButtonElement>): {
-    ref: (instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES];
+    ref: (instance: HTMLButtonElement | null) => void;
     isSelected: boolean;
     isFocused: boolean;
     onClick: (event: import("react").MouseEvent<Element, MouseEvent>) => void;

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

@@ -10,5 +10,5 @@ export declare function createDescendantContext<T extends HTMLElement = HTMLElem
     descendants: DescendantsManager<T, K>;
     index: number;
     enabledIndex: number;
-    register: (instance: T | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES];
+    register: (instance: T | null) => void;
 }];

package/esm/util/hooks/useMergeRefs.d.ts

@@ -1,15 +1,15 @@
 import React from "react";
-type PossibleRef<T> = React.LegacyRef<T> | undefined;
+type PossibleRef<T> = React.Ref<T> | undefined;
 /**
  * Use `useMergeRefs`
  * @internal
  */
-export declare function mergeRefs<T>(refs: PossibleRef<T>[]): React.RefCallback<T>;
+export declare function mergeRefs<T>(refs: PossibleRef<T>[]): (instance: T | null) => void;
 /**
  * Merges refs within useCallback
  * @internal
  * @param ...refs: React.Ref<T> | undefined
  * @returns React.useCallback(mergeRefs(refs), refs)
  */
-export declare function useMergeRefs<T>(...refs: PossibleRef<T>[]): (instance: T | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES];
+export declare function useMergeRefs<T>(...refs: PossibleRef<T>[]): (instance: T | null) => void;
 export {};

package/esm/util/hooks/useMergeRefs.js

@@ -6,13 +6,13 @@ import React from "react";
  * @internal
  */
 export function mergeRefs(refs) {
-    return (value) => {
+    return (instance) => {
         refs.forEach((ref) => {
             if (typeof ref === "function") {
-                ref(value);
+                ref(instance);
             }
             else if (ref !== null && ref !== undefined) {
-                ref.current = value;
+                ref.current = instance;
             }
         });
     };

package/esm/util/hooks/useMergeRefs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMergeRefs.js","sourceRoot":"","sources":["../../../src/util/hooks/useMergeRefs.ts"],"names":[],"mappings":"AAAA,sGAAsG;AACtG,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,gDAAgD;AAChD;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAI,IAAsB;IACjD,OAAO,CAAC,KAAK,EAAE,EAAE;QACf,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YACnB,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;gBAC9B,GAAG,CAAC,KAAK,CAAC,CAAC;YACb,CAAC;iBAAM,IAAI,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;gBAC5C,GAAwC,CAAC,OAAO,GAAG,KAAK,CAAC;YAC5D,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,YAAY,CAAI,GAAG,IAAsB;IACvD,uDAAuD;IACvD,OAAO,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;AAClD,CAAC"}
+{"version":3,"file":"useMergeRefs.js","sourceRoot":"","sources":["../../../src/util/hooks/useMergeRefs.ts"],"names":[],"mappings":"AAAA,sGAAsG;AACtG,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,gDAAgD;AAChD;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAI,IAAsB;IACjD,OAAO,CAAC,QAAkB,EAAE,EAAE;QAC5B,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YACnB,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;gBAC9B,GAAG,CAAC,QAAQ,CAAC,CAAC;YAChB,CAAC;iBAAM,IAAI,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;gBAC5C,GAAwC,CAAC,OAAO,GAAG,QAAQ,CAAC;YAC/D,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,YAAY,CAAI,GAAG,IAAsB;IACvD,uDAAuD;IACvD,OAAO,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;AAClD,CAAC"}

package/esm/util/renderStoriesForChromatic.d.ts

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 export declare function renderStoriesForChromatic(stories: Record<string, {
     render?: (...args: any[]) => React.ReactNode;
-} | React.FunctionComponent<void>>): StoryObj;
+} | React.FunctionComponent>): StoryObj;

package/esm/util/renderStoriesForChromatic.js

@@ -1,11 +1,11 @@
 import React from "react";
 export function renderStoriesForChromatic(stories) {
     return {
-        render: (...args) => (React.createElement(React.Fragment, null, Object.entries(stories).map(([storyName, story]) => {
+        render: (...args) => (React.createElement(React.Fragment, null, Object.entries(stories).map(([storyName, Story]) => {
             var _a;
             return (React.createElement("div", { key: storyName },
                 React.createElement("h2", { className: "storyheading" }, storyName),
-                typeof story === "function" ? story() : (_a = story.render) === null || _a === void 0 ? void 0 : _a.call(story, ...args)));
+                typeof Story === "function" ? React.createElement(Story, null) : (_a = Story.render) === null || _a === void 0 ? void 0 : _a.call(Story, ...args)));
         }))),
         parameters: {
             chromatic: { disable: false },

package/esm/util/renderStoriesForChromatic.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderStoriesForChromatic.js","sourceRoot":"","sources":["../../src/util/renderStoriesForChromatic.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,UAAU,yBAAyB,CACvC,OAIC;IAED,OAAO;QACL,MAAM,EAAE,CAAC,GAAG,IAA0C,EAAE,EAAE,CAAC,CACzD,0CACG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,EAAE;;YAAC,OAAA,CACnD,6BAAK,GAAG,EAAE,SAAS;gBACjB,4BAAI,SAAS,EAAC,cAAc,IAAE,SAAS,CAAM;gBAC5C,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,MAAM,sDAAG,GAAG,IAAI,CAAC,CAC5D,CACP,CAAA;SAAA,CAAC,CACD,CACJ;QACD,UAAU,EAAE;YACV,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;SAC9B;KACF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"renderStoriesForChromatic.js","sourceRoot":"","sources":["../../src/util/renderStoriesForChromatic.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,UAAU,yBAAyB,CACvC,OAGC;IAED,OAAO;QACL,MAAM,EAAE,CAAC,GAAG,IAA0C,EAAE,EAAE,CAAC,CACzD,0CACG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,EAAE;;YAAC,OAAA,CACnD,6BAAK,GAAG,EAAE,SAAS;gBACjB,4BAAI,SAAS,EAAC,cAAc,IAAE,SAAS,CAAM;gBAC5C,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,oBAAC,KAAK,OAAG,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,MAAM,sDAAG,GAAG,IAAI,CAAC,CAC9D,CACP,CAAA;SAAA,CAAC,CACD,CACJ;QACD,UAAU,EAAE;YACV,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;SAC9B;KACF,CAAC;AACJ,CAAC"}

package/esm/util/virtualfocus/Context.d.ts

@@ -21,7 +21,7 @@ export declare const VirtualFocusDescendantsProvider: import("react").Provider<i
     }>;
     index: number;
     enabledIndex: number;
-    register: (instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES];
+    register: (instance: HTMLDivElement | null) => void;
 };
 export declare const VirtualFocusInternalContextProvider: import("react").ForwardRefExoticComponent<{
     virtualFocusIdx: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "7.31.0",
+  "version": "7.32.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",
@@ -650,8 +650,8 @@
   "dependencies": {
     "@floating-ui/react": "0.27.8",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^7.31.0",
-    "@navikt/ds-tokens": "^7.31.0",
+    "@navikt/aksel-icons": "^7.32.0",
+    "@navikt/ds-tokens": "^7.32.0",
     "clsx": "^2.1.0",
     "date-fns": "^4.0.0",
     "react-day-picker": "9.7.0"
@@ -673,7 +673,7 @@
     "rimraf": "6.0.1",
     "swr": "^2.3.6",
     "tsc-alias": "1.8.16",
-    "tsx": "^4.19.1",
+    "tsx": "^4.20.6",
     "typescript": "5.8.3",
     "vitest": "^2.1.9"
   },

package/src/chat/Chat.tsx

@@ -2,7 +2,7 @@ import React, { HTMLAttributes, forwardRef } from "react";
 import { useRenameCSS } from "../theme/Theme";
 import { AkselColor } from "../types";
 import { BodyLong, HeadingProps } from "../typography";
-import Bubble from "./Bubble";
+import Bubble, { type ChatBubbleProps } from "./Bubble";
 
 export const VARIANTS = ["subtle", "info", "neutral"] as const;
 export const POSITIONS = ["left", "right"] as const;
@@ -60,7 +60,7 @@ interface ChatComponent
     ChatProps & React.RefAttributes<HTMLDivElement>
   > {
   /**
-   * @see 🏷️ {@link BubbleProps}
+   * @see 🏷️ {@link ChatBubbleProps}
    */
   Bubble: typeof Bubble;
 }
@@ -128,7 +128,7 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
           className={cn("navds-chat__bubble-wrapper")}
         >
           {React.Children.map(children, (child, i) => {
-            if (!React.isValidElement(child)) {
+            if (!React.isValidElement<ChatBubbleProps>(child)) {
               return null;
             }
 

package/src/copybutton/CopyButton.tsx

@@ -94,7 +94,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
     ref,
   ) => {
     const [active, setActive] = useState(false);
-    const timeoutRef = useRef<number>();
+    const timeoutRef = useRef<number>(undefined);
     const translate = useI18n("CopyButton");
 
     const { cn } = useRenameCSS();

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

@@ -8,14 +8,14 @@ interface InputContextValue extends FormFieldType {
   clearInput: NonNullable<ComboboxProps["onClear"]>;
   error?: ComboboxProps["error"];
   focusInput: () => void;
-  inputRef: React.RefObject<HTMLInputElement>;
+  inputRef: React.RefObject<HTMLInputElement | null>;
   value: string;
   setValue: (text: string) => void;
   onChange: (newValue: string) => void;
   searchTerm: string;
   setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
   shouldAutocomplete?: boolean;
-  toggleOpenButtonRef: React.RefObject<HTMLDivElement>;
+  toggleOpenButtonRef: React.MutableRefObject<HTMLDivElement | null>;
   hideCaret: boolean;
   setHideCaret: React.Dispatch<React.SetStateAction<boolean>>;
 }

package/src/form/useFormField.ts

@@ -116,7 +116,7 @@ export function containsReadMore(
   children: React.ReactNode,
   checkNested = true,
 ): boolean {
-  if (React.isValidElement(children)) {
+  if (React.isValidElement<{ children?: any }>(children)) {
     if (children.type === ReadMore) {
       return true;
     }

package/src/modal/ModalUtils.ts

@@ -16,7 +16,7 @@ export const coordsAreInside = (
 };
 
 export function getCloseHandler(
-  modalRef: React.RefObject<HTMLDialogElement>,
+  modalRef: React.RefObject<HTMLDialogElement | null>,
   header: ModalProps["header"],
   onBeforeClose: ModalProps["onBeforeClose"],
 ) {
@@ -31,7 +31,7 @@ export const BODY_CLASS_LEGACY = "navds-modal__document-body";
 export const BODY_CLASS = "aksel-modal__document-body";
 
 export function useBodyScrollLock(
-  modalRef: React.RefObject<HTMLDialogElement>,
+  modalRef: React.RefObject<HTMLDialogElement | null>,
   portalNode: HTMLElement | null,
   isNested: boolean,
 ) {

package/src/overlays/action-menu/ActionMenu.tsx

@@ -16,7 +16,7 @@ import { Menu, MenuPortalProps } from "../floating-menu/Menu";
 /* -------------------------------------------------------------------------- */
 type ActionMenuContextValue = {
   triggerId: string;
-  triggerRef: React.RefObject<HTMLButtonElement>;
+  triggerRef: React.RefObject<HTMLButtonElement | null>;
   contentId: string;
   open: boolean;
   onOpenChange: (open: boolean) => void;

package/src/overlays/floating/Floating.tsx

@@ -27,7 +27,7 @@ import {
   useMergeRefs,
 } from "../../util/hooks";
 import { AsChildProps } from "../../util/types";
-import { useOpenChangeComplete } from "../overlay/hooks/useOpenChangeComplete";
+import { useOpenChangeAnimationComplete } from "../overlay/hooks/useOpenChangeAnimationComplete";
 import {
   type Align,
   type Measurable,
@@ -363,7 +363,7 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
       }
     }, [autoUpdateWhileMounted, enabled, floatingElements, update]);
 
-    useOpenChangeComplete({
+    useOpenChangeAnimationComplete({
       enabled: !!modalContext?.ref,
       open: enabled,
       ref: modalContext?.ref,

package/src/overlays/overlay/hooks/{useOpenChangeComplete.ts → useOpenChangeAnimationComplete.ts}

@@ -5,7 +5,7 @@ import { useAnimationsFinished } from "./useAnimationsFinished";
 import { useEventCallback } from "./useEventCallback";
 import { useLatestRef } from "./useLatestRef";
 
-interface useOpenChangeCompleteParameters {
+interface useOpenChangeAnimationCompleteParameters {
   /**
    * Enable / disable the effect. Disabled => no animation tracking / callback.
    * @default true
@@ -34,8 +34,8 @@ interface useOpenChangeCompleteParameters {
  * comparing the `open` value captured at scheduling time with the latest `open` via ref;
  * if they differ (state flipped again mid‑animation) the callback is skipped.
  */
-export function useOpenChangeComplete(
-  parameters: useOpenChangeCompleteParameters,
+export function useOpenChangeAnimationComplete(
+  parameters: useOpenChangeAnimationCompleteParameters,
 ) {
   const {
     enabled = true,

package/src/overlays/overlay/hooks/useTransitionStatus.ts

@@ -0,0 +1,145 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import ReactDOM from "react-dom";
+import { useClientLayoutEffect } from "../../../util";
+
+type TransitionStatus = "entering" | "exiting" | "idle" | undefined;
+
+/**
+ * Transition status state machine for components that animate between an
+ * `open` boolean and actual mount/unmount. Keeps the element mounted while
+ * exit animations run and introduces an optional stable `idle` phase.
+ *
+ * Adapted from MUI Base + Floating UI examples:
+ *  - Source: https://github.com/mui/base-ui/blob/6fd69008d83561dbe75ff89acf270f0fac3e0049/packages/react/src/utils/useTransitionStatus.ts
+ *  - Originally based on https://github.com/floating-ui/floating-ui/blob/7c33a3d0198a9b523d54ae2c37cedb315a309452/packages/react/src/hooks/useTransition.ts
+ *
+ * States (transitionStatus):
+ *  - "entering"  : just entered (initial frame of enter) OR re-entering to reach "idle".
+ *  - "idle"      : stable open (only when `enableIdleState === true`).
+ *  - "exiting"   : exit animation is running; element still mounted.
+ *  - undefined   : closed (unmounted) OR stable open when idle state is disabled.
+ *                   When `enableIdleState` is false we clear the label after
+ *                   the first frame so styling can rely purely on `mounted`.
+ *
+ * Distinction:
+ *  - `mounted` tells you whether to render DOM.
+ *  - `transitionStatus` tells you which phase-specific classes to apply.
+ *
+ * Frame separation: state changes that must trigger CSS transitions are
+ * scheduled with `requestAnimationFrame` so the browser sees distinct style
+ * mutations across frames (avoids missed transitions due to batching).
+ *
+ * @param open              Controls visibility lifecycle.
+ * @param enableIdleState   Insert a persistent "idle" phase after entering.
+ * @param deferExitingState  Delay entering the exit phase by one frame to allow
+ *                          measurement / layout work before applying exit styles.
+ */
+function useTransitionStatus(
+  open: boolean,
+  enableIdleState: boolean = false,
+  deferExitingState: boolean = false,
+) {
+  const [mounted, setMounted] = useState(open);
+  const [transitionStatus, setTransitionStatus] = useState<TransitionStatus>(
+    open && enableIdleState ? "idle" : undefined,
+  );
+
+  /* Opening: mount immediately and label as "entering" for the first frame. */
+  if (open && !mounted) {
+    setMounted(true);
+    setTransitionStatus("entering");
+  }
+
+  /* Closing (no defer): begin exit animation right away. */
+  if (
+    !open &&
+    mounted &&
+    transitionStatus !== "exiting" &&
+    !deferExitingState
+  ) {
+    setTransitionStatus("exiting");
+  }
+
+  /* Cleanup: after unmount post-exit ensure status returns to undefined. */
+  if (!open && !mounted && transitionStatus === "exiting") {
+    setTransitionStatus(undefined);
+  }
+
+  /* Deferred closing: provide one frame to measure / flush layout before exit styles. */
+  useClientLayoutEffect(() => {
+    if (
+      !open &&
+      mounted &&
+      transitionStatus !== "exiting" &&
+      deferExitingState
+    ) {
+      const frame = requestAnimationFrame(() => {
+        setTransitionStatus("exiting");
+      });
+
+      return () => {
+        cancelAnimationFrame(frame);
+      };
+    }
+
+    return undefined;
+  }, [open, mounted, transitionStatus, deferExitingState]);
+
+  /* Enter (no idle): hold "entering" for one frame, then clear label (stable open). */
+  useClientLayoutEffect(() => {
+    if (!open || enableIdleState) {
+      return undefined;
+    }
+
+    const frame = requestAnimationFrame(() => {
+      ReactDOM.flushSync(() => {
+        setTransitionStatus(undefined);
+      });
+    });
+
+    return () => {
+      cancelAnimationFrame(frame);
+    };
+  }, [enableIdleState, open]);
+
+  useClientLayoutEffect(() => {
+    if (!open || !enableIdleState) {
+      return undefined;
+    }
+
+    /*
+     * We can enter this state by re-opening before exiting-state was finished
+     * (open → close → open in quick succession).
+     */
+    if (open && mounted && transitionStatus !== "idle") {
+      setTransitionStatus("entering");
+    }
+
+    /**
+     * Next frame, after "entering", switch to persistent "idle" state.
+     * By delaying to the next frame we ensure any "entering" styles are
+     * applied and the transition can run.
+     */
+    const frame = requestAnimationFrame(() => {
+      setTransitionStatus("idle");
+    });
+
+    return () => {
+      cancelAnimationFrame(frame);
+    };
+  }, [enableIdleState, open, mounted, setTransitionStatus, transitionStatus]);
+
+  return useMemo(
+    () => ({
+      mounted,
+      setMounted,
+      transitionStatus,
+    }),
+    [mounted, transitionStatus],
+  );
+}
+
+export { useTransitionStatus };
+export type { TransitionStatus };

package/src/progress-bar/ProgressBar.tsx

@@ -95,7 +95,7 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
   ) => {
     const { cn } = useRenameCSS();
     const translateX = 100 - (Math.round(value) / valueMax) * 100;
-    const onTimeoutRef = useRef<() => void>();
+    const onTimeoutRef = useRef<() => void>(undefined);
     onTimeoutRef.current = simulated?.onTimeout;
     const translate = useI18n("ProgressBar");
 

package/src/read-more/ReadMore.tsx

@@ -26,11 +26,11 @@ export interface ReadMoreProps
    */
   defaultOpen?: boolean;
   /**
-   * Callback for current open-state
+   * Callback for current open-state.
    */
   onOpenChange?: (open: boolean) => void;
   /**
-   * Changes fontsize for content.
+   * Changes font size for content.
    * @default "medium"
    */
   size?: "large" | "medium" | "small";
@@ -42,14 +42,7 @@ export interface ReadMoreProps
  * @see 🏷️ {@link ReadMoreProps}
  *
  * @example
- * // Default
  * <ReadMore header="Dette regnes som helsemessige begrensninger">
- *  Med helsemessige begrensninger mener vi funksjonshemming, sykdom...
- * </ReadMore>
- *
- * @example
- * // Litt mindre versjon
- * <ReadMore size="small" header="Dette regnes som helsemessige begrensninger">
  *   Med helsemessige begrensninger mener vi funksjonshemming, sykdom...
  * </ReadMore>
  */
@@ -65,7 +58,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
       size = "medium",
       onOpenChange,
       ...rest
-    },
+    }: ReadMoreProps,
     ref,
   ) => {
     const { cn } = useRenameCSS();
@@ -107,7 +100,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
 
         <BodyLong
           as="div"
-          aria-hidden={!_open}
+          tabIndex={0}
           className={cn("navds-read-more__content", {
             "navds-read-more__content--closed": !_open,
           })}

package/src/table/AnimateHeight.tsx

@@ -73,8 +73,8 @@ const AnimateHeight: React.FC<AnimateHeightProps> = ({
   const prevHeight = useRef<Height>(height);
   const contentElement = useRef<HTMLDivElement>(null);
 
-  const animationClassesTimeoutID = useRef<Timeout>();
-  const timeoutID = useRef<Timeout>();
+  const animationClassesTimeoutID = useRef<Timeout>(undefined);
+  const timeoutID = useRef<Timeout>(undefined);
 
   const initialHeight = useRef<Height>(height);
   const initialOverflow = useRef<Overflow>("visible");

package/src/tabs/parts/tablist/useScrollButtons.ts

@@ -1,7 +1,9 @@
 import { useEffect, useMemo, useState } from "react";
 import { debounce } from "../../../util";
 
-export function useScrollButtons(listRef: React.RefObject<HTMLDivElement>) {
+export function useScrollButtons(
+  listRef: React.RefObject<HTMLDivElement | null>,
+) {
   const [displayScroll, setDisplayScroll] = useState({
     start: false,
     end: false,

package/src/util/hooks/useMergeRefs.ts

@@ -1,20 +1,20 @@
 /* https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/composeRefs.tsx */
 import React from "react";
 
-type PossibleRef<T> = React.LegacyRef<T> | undefined;
+type PossibleRef<T> = React.Ref<T> | undefined;
 
 // https://github.com/gregberge/react-merge-refs
 /**
  * Use `useMergeRefs`
  * @internal
  */
-export function mergeRefs<T>(refs: PossibleRef<T>[]): React.RefCallback<T> {
-  return (value) => {
+export function mergeRefs<T>(refs: PossibleRef<T>[]) {
+  return (instance: T | null) => {
     refs.forEach((ref) => {
       if (typeof ref === "function") {
-        ref(value);
+        ref(instance);
       } else if (ref !== null && ref !== undefined) {
-        (ref as React.MutableRefObject<T | null>).current = value;
+        (ref as React.MutableRefObject<T | null>).current = instance;
       }
     });
   };

package/src/util/link-anchor/LinkAnchor.tsx

@@ -14,7 +14,7 @@ import { useMergeRefs } from "../hooks/useMergeRefs";
 import { AsChildProps } from "../types";
 
 type LinkAnchorOverlayContextProps = {
-  anchorRef: React.RefObject<HTMLAnchorElement>;
+  anchorRef: React.RefObject<HTMLAnchorElement | null>;
 };
 
 const [LinkAnchorContextProvider, useLinkAnchorContext] =

package/src/util/renderStoriesForChromatic.tsx

@@ -1,21 +1,20 @@
-import { Args, StoryObj } from "@storybook/react";
+import { Args, StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { Renderer, StoryContext } from "storybook/internal/types";
 
 export function renderStoriesForChromatic(
   stories: Record<
     string,
-    | { render?: (...args: any[]) => React.ReactNode }
-    | React.FunctionComponent<void>
+    { render?: (...args: any[]) => React.ReactNode } | React.FunctionComponent
   >,
 ): StoryObj {
   return {
     render: (...args: [Args, StoryContext<Renderer, Args>]) => (
       <>
-        {Object.entries(stories).map(([storyName, story]) => (
+        {Object.entries(stories).map(([storyName, Story]) => (
           <div key={storyName}>
             <h2 className="storyheading">{storyName}</h2>
-            {typeof story === "function" ? story() : story.render?.(...args)}
+            {typeof Story === "function" ? <Story /> : Story.render?.(...args)}
           </div>
         ))}
       </>

package/cjs/overlays/overlay/hooks/useOpenChangeComplete.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useOpenChangeComplete.js","sourceRoot":"","sources":["../../../../src/overlays/overlay/hooks/useOpenChangeComplete.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;AAoCb,sDA6BC;AA/DD,iCAAyC;AACzC,mEAAgE;AAChE,yDAAsD;AACtD,iDAA8C;AAyB9C;;;;;GAKG;AACH,SAAgB,qBAAqB,CACnC,UAA2C;IAE3C,MAAM,EACJ,OAAO,GAAG,IAAI,EACd,IAAI,EACJ,GAAG,GAAG,IAAI,EACV,UAAU,EAAE,eAAe,GAC5B,GAAG,UAAU,CAAC;IAEf,MAAM,OAAO,GAAG,IAAA,2BAAY,EAAC,IAAI,CAAC,CAAC;IACnC,MAAM,UAAU,GAAG,IAAA,mCAAgB,EAAC,eAAe,CAAC,CAAC;IACrD,MAAM,uBAAuB,GAAG,IAAA,6CAAqB,EAAC,GAAG,EAAE,IAAI,CAAC,CAAC;IAEjE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO;QACT,CAAC;QAED;;;WAGG;QACH,uBAAuB,CAAC,GAAG,EAAE;YAC3B,IAAI,IAAI,KAAK,OAAO,CAAC,OAAO,EAAE,CAAC;gBAC7B,UAAU,EAAE,CAAC;YACf,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,uBAAuB,EAAE,OAAO,CAAC,CAAC,CAAC;AACpE,CAAC"}

package/esm/overlays/overlay/hooks/useOpenChangeComplete.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useOpenChangeComplete.js","sourceRoot":"","sources":["../../../../src/overlays/overlay/hooks/useOpenChangeComplete.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAyB9C;;;;;GAKG;AACH,MAAM,UAAU,qBAAqB,CACnC,UAA2C;IAE3C,MAAM,EACJ,OAAO,GAAG,IAAI,EACd,IAAI,EACJ,GAAG,GAAG,IAAI,EACV,UAAU,EAAE,eAAe,GAC5B,GAAG,UAAU,CAAC;IAEf,MAAM,OAAO,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACnC,MAAM,UAAU,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;IACrD,MAAM,uBAAuB,GAAG,qBAAqB,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;IAEjE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO;QACT,CAAC;QAED;;;WAGG;QACH,uBAAuB,CAAC,GAAG,EAAE;YAC3B,IAAI,IAAI,KAAK,OAAO,CAAC,OAAO,EAAE,CAAC;gBAC7B,UAAU,EAAE,CAAC;YACf,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,uBAAuB,EAAE,OAAO,CAAC,CAAC,CAAC;AACpE,CAAC"}