@navikt/ds-react 7.30.1 → 7.31.0

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

@@ -0,0 +1,117 @@
+"use client";
+
+import React, { useCallback, useEffect } from "react";
+import ReactDOM from "react-dom";
+import { useEventCallback } from "./useEventCallback";
+
+/**
+ * Returns a stable function that, when invoked, waits for all current CSS/Web Animations
+ * on a target element (and its subtree) to finish before executing a callback.
+ *
+ * Why:
+ *  - Coordinate logic (unmount, focus restore, measuring) after exit / enter animations.
+ *  - Avoid `animationend` event bookkeeping across multiple animations / nested elements.
+ *  - Batch detection using `requestAnimationFrame` so freshly-applied animations are discoverable.
+ *
+ * Mechanics:
+ *  1. Resolves the concrete `HTMLElement` (direct element or from ref) – early no-op if missing.
+ *  2. If `getAnimations` is unsupported or animations are globally disabled (`AKSEL_ANIMATIONS_DISABLED`),
+ *     runs the callback immediately.
+ *  3. Schedules a frame so style/animation changes applied this render are committed.
+ *  4. Optionally schedules an additional frame (`waitForNextTick=true`) to catch animations that
+ *     start only after layout (e.g. when an `open` class triggers the animation).
+ *  5. Captures all current animations, waits on their `.finished` promises (using `Promise.allSettled`
+ *     so rejections don't block), then `flushSync` executes the callback (ensures React state updates
+ *     inside run before the browser paints the next frame).
+ *  6. If an `AbortSignal` aborts while waiting, it silently cancels execution.
+ *
+ * @param elementOrRef HTMLElement or ref to observe.
+ * @param waitForNextTick If true, waits an extra frame to ensure enter animations are detectable.
+ * @returns Stable function (identity preserved) accepting (fn, abortSignal?).
+ */
+export function useAnimationsFinished(
+  elementOrRef: React.RefObject<HTMLElement | null> | HTMLElement | null,
+  waitForNextTick = false,
+) {
+  const rootFrameRef = React.useRef<number | null>(null);
+  const nestedFrameRef = React.useRef<number | null>(null);
+
+  const cancelScheduled = useCallback(() => {
+    for (const ref of [rootFrameRef, nestedFrameRef]) {
+      if (ref.current !== null) {
+        cancelAnimationFrame(ref.current);
+        ref.current = null;
+      }
+    }
+  }, []);
+
+  /* Unmount cleanup */
+  useEffect(() => {
+    return () => cancelScheduled();
+  }, [cancelScheduled]);
+
+  return useEventCallback(
+    (
+      /**
+       * A function to execute once all animations have finished.
+       */
+      fnToExecute: () => void,
+      /**
+       * An optional [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that
+       * can be used to abort `fnToExecute` before all the animations have finished.
+       * @default null
+       */
+      signal: AbortSignal | null = null,
+    ) => {
+      // Cancel any in-flight scheduling from a previous invocation (next-frame debounce semantics)
+      cancelScheduled();
+
+      if (elementOrRef == null) {
+        return;
+      }
+
+      const element =
+        "current" in elementOrRef ? elementOrRef.current : elementOrRef;
+      if (element == null) {
+        return;
+      }
+
+      // Fast path: no Web Animations API support OR animations globally disabled.
+      if (
+        typeof element.getAnimations !== "function" ||
+        // Flag hook for test envs.
+        (globalThis as any).AKSEL_ANIMATIONS_DISABLED
+      ) {
+        fnToExecute();
+        return;
+      }
+
+      rootFrameRef.current = requestAnimationFrame(() => {
+        function exec() {
+          if (!element) {
+            return;
+          }
+          // Collect animations present at this moment; we don't continuously observe
+          // if new animations start after these settle, caller should invoke again.
+          Promise.allSettled(
+            element.getAnimations().map((anim) => anim.finished),
+          ).then(() => {
+            if (signal?.aborted) return;
+            // Ensure any state updates inside the callback are flushed synchronously,
+            // guaranteeing that dependent logic observes the current
+            // tree rather than a stale in-progress update.
+            ReactDOM.flushSync(fnToExecute);
+          });
+        }
+
+        // Some animations (e.g. triggered by a class applied this same frame) only
+        // become observable after an extra frame; opt-in via flag.
+        if (waitForNextTick) {
+          nestedFrameRef.current = requestAnimationFrame(exec);
+        } else {
+          exec();
+        }
+      });
+    },
+  );
+}

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

@@ -0,0 +1,73 @@
+"use client";
+
+/**
+ * Stable event callback: returns a function whose identity never changes but always
+ * invokes the latest `callback`. Avoids stale closures without re‑creating handlers.
+ *
+ * Why not `useCallback`? Its identity depends on a deps array:
+ * - omit deps -> stale; include deps -> new function each render.
+ * - This hook decouples identity from freshness.
+ *
+ * How it works: a single stable "trampoline" function delegates to a mutable ref. The current
+ * `callback` is promoted from `next` in an insertion/layout phase effect so abandoned concurrent
+ * renders cannot leak outdated handlers.
+ *
+ * Guarantees: stable identity; latest logic executed; no calls from uncommitted renders; dev
+ * error if invoked during render; safe when `callback` is undefined (no-op).
+ */
+import React, { useLayoutEffect } from "react";
+import { useRefWithInit } from "./useRefWithInit";
+
+/* https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379 */
+const useInsertionEffect = (React as any)[
+  `useInsertionEffect${Math.random().toFixed(1)}`.slice(0, -3)
+];
+
+const useSafeInsertionEffect =
+  // React 17 doesn't have useInsertionEffect.
+  useInsertionEffect &&
+  // Preact replaces useInsertionEffect with useLayoutEffect and fires too late.
+  useInsertionEffect !== useLayoutEffect
+    ? useInsertionEffect
+    : (fn: any) => fn();
+
+type Callback = (...args: any[]) => any;
+
+type Stable<T extends Callback> = {
+  /** The next value for callback */
+  next: T | undefined;
+  /** The function to be called by trampoline. This must fail during the initial render phase. */
+  callback: T | undefined;
+  trampoline: T;
+  effect: () => void;
+};
+
+/**
+ * TODO: Long term, replace `useCallbackRef` with this hook.
+ */
+export function useEventCallback<T extends Callback>(
+  callback: T | undefined,
+): T {
+  const stable = useRefWithInit(createStableCallback).current as Stable<T>;
+  stable.next = callback;
+  useSafeInsertionEffect(stable.effect);
+  return stable.trampoline;
+}
+
+function createStableCallback() {
+  const stable: Stable<Callback> = {
+    next: undefined,
+    callback: assertNotCalled,
+    trampoline: (...args: any[]) => stable.callback?.(...args),
+    effect: () => {
+      stable.callback = stable.next;
+    },
+  };
+  return stable;
+}
+
+function assertNotCalled() {
+  if (process.env.NODE_ENV !== "production") {
+    throw new Error("Aksel: Cannot call an event handler while rendering.");
+  }
+}

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

@@ -0,0 +1,25 @@
+"use client";
+
+import { useClientLayoutEffect } from "../../../util";
+import { useRefWithInit } from "./useRefWithInit";
+
+export function useLatestRef<T>(value: T) {
+  const latest = useRefWithInit(createLatestRef, value).current!;
+
+  latest.next = value;
+
+  useClientLayoutEffect(latest.effect);
+
+  return latest;
+}
+
+function createLatestRef<T>(value: T) {
+  const latest = {
+    current: value,
+    next: value,
+    effect: () => {
+      latest.current = latest.next;
+    },
+  };
+  return latest;
+}

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

@@ -0,0 +1,66 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { useAnimationsFinished } from "./useAnimationsFinished";
+import { useEventCallback } from "./useEventCallback";
+import { useLatestRef } from "./useLatestRef";
+
+interface useOpenChangeCompleteParameters {
+  /**
+   * Enable / disable the effect. Disabled => no animation tracking / callback.
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * Current open state (e.g. popover open). When this flips we wait for any
+   * associated CSS/Web animations on `ref` to finish before firing `onComplete`.
+   */
+  open?: boolean;
+  /**
+   * Element whose animations/transition we observe. Should be stable while the
+   * open/close animation runs (typically the root animated node).
+   */
+  ref?: React.RefObject<HTMLElement | null>;
+  /**
+   * Called exactly once per open-change cycle after animations finish OR
+   * immediately if animations are disabled / unsupported.
+   */
+  onComplete: () => void;
+}
+
+/**
+ * Waits for the element's current Web Animations / CSS transitions to finish after an
+ * `open` state change, then invokes `onComplete`. Guards against race conditions by
+ * 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,
+) {
+  const {
+    enabled = true,
+    open,
+    ref = null,
+    onComplete: onCompleteParam,
+  } = parameters;
+
+  const openRef = useLatestRef(open);
+  const onComplete = useEventCallback(onCompleteParam);
+  const runOnceAnimationsFinish = useAnimationsFinished(ref, open);
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    /*
+     * Schedule completion once the *current* set of animations settle. If during
+     * that wait `open` toggles again, skip to avoid firing for an outdated cycle.
+     */
+    runOnceAnimationsFinish(() => {
+      if (open === openRef.current) {
+        onComplete();
+      }
+    });
+  }, [enabled, open, onComplete, runOnceAnimationsFinish, openRef]);
+}

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

@@ -0,0 +1,25 @@
+"use client";
+
+import React, { useRef } from "react";
+
+const UNINITIALIZED = {};
+
+/**
+ * useRef initialized with a function on mount.
+ */
+function useRefWithInit<T>(init: () => T): React.RefObject<T>;
+function useRefWithInit<T, U>(
+  init: (arg: U) => T,
+  initArg: U,
+): React.RefObject<T>;
+function useRefWithInit(init: (arg?: unknown) => unknown, initArg?: unknown) {
+  const ref = useRef(UNINITIALIZED as any);
+
+  if (ref.current === UNINITIALIZED) {
+    ref.current = init(initArg);
+  }
+
+  return ref;
+}
+
+export { useRefWithInit };

package/src/table/ExpandableRow.tsx

@@ -8,8 +8,10 @@ import { useI18n } from "../util/i18n/i18n.hooks";
 import AnimateHeight from "./AnimateHeight";
 import DataCell from "./DataCell";
 import Row, { RowProps } from "./Row";
+import { isElementInteractiveTarget } from "./Table.utils";
 
-export interface ExpandableRowProps extends Omit<RowProps, "content"> {
+export interface ExpandableRowProps
+  extends Omit<RowProps, "content" | "onRowClick"> {
   /**
    * Content of the expanded row
    */
@@ -96,7 +98,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
     const handleRowClick = (event: React.MouseEvent<HTMLTableRowElement>) => {
       expandOnRowClick &&
         !expansionDisabled &&
-        !isInteractiveTarget(event.target as HTMLElement) &&
+        !isElementInteractiveTarget(event.target as HTMLElement) &&
         expansionHandler(event);
     };
 
@@ -167,19 +169,4 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
   },
 );
 
-function isInteractiveTarget(elm: HTMLElement) {
-  if (elm.nodeName === "TD" || elm.nodeName === "TH" || !elm.parentElement) {
-    return false;
-  }
-  if (
-    ["BUTTON", "DETAILS", "LABEL", "SELECT", "TEXTAREA", "INPUT", "A"].includes(
-      elm.nodeName,
-    )
-  ) {
-    return true;
-  }
-
-  return isInteractiveTarget(elm.parentElement);
-}
-
 export default ExpandableRow;

package/src/table/Row.tsx

@@ -1,5 +1,7 @@
 import React, { forwardRef } from "react";
 import { useRenameCSS } from "../theme/Theme";
+import { composeEventHandlers } from "../util/composeEventHandlers";
+import { isElementInteractiveTarget } from "./Table.utils";
 
 export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
   /**
@@ -12,6 +14,13 @@ export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
    * @default true
    */
   shadeOnHover?: boolean;
+  /**
+   * Click handler for row. This differs from onClick by not being called
+   * when clicking on interactive elements within the row (buttons, links, inputs etc).
+   *
+   * **Warning:** This will not be accessible by keyboard! Provide an alternative way to select the row, e.g. a checkbox or a button.
+   */
+  onRowClick?: (event: React.MouseEvent<HTMLTableRowElement>) => void;
 }
 
 export type RowType = React.ForwardRefExoticComponent<
@@ -19,8 +28,29 @@ export type RowType = React.ForwardRefExoticComponent<
 >;
 
 export const Row: RowType = forwardRef(
-  ({ className, selected = false, shadeOnHover = true, ...rest }, ref) => {
+  (
+    {
+      className,
+      selected = false,
+      shadeOnHover = true,
+      onClick,
+      onRowClick,
+      ...rest
+    },
+    ref,
+  ) => {
     const { cn } = useRenameCSS();
+
+    const handleRowClick = (event: React.MouseEvent<HTMLTableRowElement>) => {
+      if (!onRowClick) {
+        return;
+      }
+      if (isElementInteractiveTarget(event.target as HTMLElement)) {
+        return;
+      }
+      onRowClick(event);
+    };
+
     return (
       <tr
         {...rest}
@@ -29,6 +59,8 @@ export const Row: RowType = forwardRef(
           "navds-table__row--selected": selected,
           "navds-table__row--shade-on-hover": shadeOnHover,
         })}
+        onClick={composeEventHandlers(onClick, handleRowClick)}
+        data-interactive={!!onRowClick}
       />
     );
   },

package/src/table/Table.utils.ts

@@ -0,0 +1,65 @@
+const INTERACTIVE_TAGS = new Set([
+  "BUTTON",
+  "A",
+  "INPUT",
+  "SELECT",
+  "TEXTAREA",
+  "DETAILS",
+  "SUMMARY",
+  "LABEL",
+]);
+
+const INTERACTIVE_ROLES = new Set([
+  "button",
+  "link",
+  "checkbox",
+  "radio",
+  "switch",
+  "menuitem",
+  "option",
+  "tab",
+  "textbox",
+  "combobox",
+  "spinbutton",
+  "slider",
+]);
+
+/**
+ * Walks up from the event target until TR/TH (row / header) or root.
+ * Returns true if any ancestor is inherently interactive, explicitly focusable,
+ * or has an interactive ARIA role.
+ * Used to decide whether a row click should be treated as a row selection
+ * or ignored because the user interacted with an embedded control.
+ */
+function isElementInteractiveTarget(element: HTMLElement | null) {
+  for (
+    let node: HTMLElement | null = element;
+    node && node.nodeName !== "TR" && node.nodeName !== "TH";
+    node = node.parentElement
+  ) {
+    const tag = node.nodeName;
+
+    /* Native interactive tag */
+    if (INTERACTIVE_TAGS.has(tag)) {
+      return true;
+    }
+
+    /* Explicit interactive role */
+    const role = node.getAttribute("role");
+    if (role && INTERACTIVE_ROLES.has(role)) {
+      return true;
+    }
+
+    /* Focusable via tabindex (exclude -1) */
+    if (node.hasAttribute("tabindex")) {
+      const ti = node.getAttribute("tabindex");
+      if (ti !== "-1") {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
+
+export { isElementInteractiveTarget };