@navikt/ds-react 7.30.1 → 7.32.0

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/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 };

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>
         ))}
       </>