@navikt/ds-react 8.10.4 → 8.10.6

package/src/data/table/column-header/DataTableColumnHeader.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef } from "react";
+import React, { forwardRef, useMemo, useRef } from "react";
 import {
   ArrowsUpDownIcon,
   CaretLeftCircleFillIcon,
@@ -13,33 +13,51 @@ import {
   type DataTableBaseCellProps,
 } from "../base-cell/DataTableBaseCell";
 import type { SortDirection } from "../root/DataTable.types";
+import { useDataTableContext } from "../root/DataTableRoot.context";
 import { type ResizeProps, useTableColumnResize } from "./useTableColumnResize";
 
-interface DataTableColumnHeaderProps
-  extends ResizeProps, DataTableBaseCellProps {
+interface DataTableColumnHeaderProps extends DataTableBaseCellProps {
+  /**
+   * Unique identifier for the column. Required for sortable columns to identify which column is being sorted.
+   */
+  id?: string;
   /**
    * Accessible name of the column.
    */
   label: string;
   /**
-   * Makes the column header sortable. The entire header cell content becomes
-   * a clickable button when true.
+   * Makes the column sortable by clicking on the header.
+   * The entire header cell content becomes a clickable button when true.
    */
-  sortable?: boolean;
+  sortable?: boolean; // TODO: Consider merging sortable, sortDirection and onSortClick into a single "sort" object prop
   /**
    * Current sort direction. Only relevant when `sortable` is true.
-   * Uses values matching the `aria-sort` attribute directly.
+   * Uses values matching the `aria-sort` attribute directly. // TODO: What does this mean? (Can we just remove it?)
    * @default "none"
    */
-  sortDirection?: SortDirection;
+  sortDirection?: SortDirection; // TODO Not in use???
+  /**
+   * Called when the user clicks the header. Only relevant when `sortable` is true.
+   * The consumer is responsible for determining and setting the next sort state. // TODO: We don't use the term "consumer" in JSDoc anywhere else
+   */
+  onSortClick?: (event: React.MouseEvent<HTMLElement>) => void; // TODO Not in use???
   /**
-   * Called when the user clicks the sortable header.
-   * The consumer is responsible for determining and setting the next sort state.
+   * Object with props related to column width and resizing. Summary:
+   *
+   * - `resizable?: boolean` - Whether the column should be resizable by the user.
+   * - `autoResizeOnce?: boolean` - Whether the column should automatically resize to fit its content.
+   * - `resizeMin?: number` - Minimum width of the column when resizing.
+   * - `resizeMax?: number` - Maximum width of the column when resizing.
+   * - `value?: number | string` - Controlled width of the column.
+   * - `default?: number | string` - Initial width of the column.
+   * - `onChange?: (width: number) => void` - Called when the column width changes.
+   *
+   * See individual props for details and defaults.
    */
-  onSortClick?: (event: React.MouseEvent<HTMLElement>) => void;
+  width?: ResizeProps;
 }
 
-const SORT_ICON: Record<SortDirection, React.ElementType | null> = {
+const SORT_ICON: Record<SortDirection, React.ElementType> = {
   asc: SortUpIcon,
   desc: SortDownIcon,
   none: ArrowsUpDownIcon,
@@ -56,45 +74,37 @@ const DataTableColumnHeader = forwardRef<
 >(
   (
     {
-      className,
-      children,
+      id,
       label,
       sortable = false,
-      sortDirection = "none",
-      onSortClick,
-      resizable = true,
-      style,
       width,
-      defaultWidth,
-      autoWidth,
-      minWidth,
-      maxWidth,
-      onWidthChange,
-      colSpan,
-      rowSpan,
-      UNSAFE_isSelection,
+      cellType,
+      className,
+      children,
+      style,
       ...rest
     },
     forwardedRef,
   ) => {
-    const contentRef = React.useRef<HTMLDivElement>(null);
     const thRef = useRef<HTMLTableCellElement>(null);
     const mergedRef = useMergeRefs(forwardedRef, thRef);
+    const { sortingState } = useDataTableContext();
+    const { onSortClick, sortState } = sortingState;
 
     const resizeResult = useTableColumnResize({
-      resizable,
+      ...width,
       thRef,
-      width,
-      defaultWidth,
-      autoWidth,
-      minWidth,
-      maxWidth,
-      onWidthChange,
-      style,
-      colSpan,
+      colSpan: rest.colSpan,
     });
 
-    const SortIcon = sortable ? SORT_ICON[sortDirection] : null;
+    const sortDirection = useMemo(() => {
+      const sortEntry = sortState.find((s) => s.columnId === id);
+      return sortEntry?.direction ?? "none";
+    }, [id, sortState]);
+
+    const canSort = sortable && id !== undefined;
+
+    const SortIcon = canSort ? SORT_ICON[sortDirection] : null;
 
     return (
       <DataTableBaseCell
@@ -102,21 +112,18 @@ const DataTableColumnHeader = forwardRef<
         {...rest}
         ref={mergedRef}
         className={cl("aksel-data-table__column-header", className)}
-        data-sortable={sortable}
-        style={resizeResult.style}
-        aria-sort={sortable ? getAriaSort(sortDirection) : undefined}
-        UNSAFE_isSelection={UNSAFE_isSelection}
-        colSpan={colSpan}
-        rowSpan={rowSpan}
+        data-sortable={canSort}
+        style={{ ...style, width: resizeResult.width }}
+        aria-sort={canSort ? getAriaSort(sortDirection) : undefined}
+        cellType={cellType}
       >
-        {sortable ? (
+        {canSort ? (
           <button
+            type="button"
             className="aksel-data-table__th-sort-button"
-            onClick={onSortClick}
+            onClick={(event) => onSortClick(id, event)}
           >
-            <div ref={contentRef} className="aksel-data-table__th-content">
-              {children}
-            </div>
+            <div className="aksel-data-table__th-content">{children}</div>
             {SortIcon && (
               <SortIcon
                 aria-hidden
@@ -128,18 +135,18 @@ const DataTableColumnHeader = forwardRef<
           </button>
         ) : (
           <div
-            ref={contentRef}
             className={cl({
-              "aksel-data-table__th-content": !UNSAFE_isSelection,
+              "aksel-data-table__th-content": cellType !== "action",
             })}
           >
             {children}
           </div>
         )}
 
-        {resizeResult.enabled && !UNSAFE_isSelection && (
+        {resizeResult.enabled && cellType !== "action" && (
           <button
             {...resizeResult.resizeHandlerProps}
+            type="button"
             className="aksel-data-table__th-resize-handle"
             aria-label={
               resizeResult.isResizingWithKeyboard
@@ -151,23 +158,21 @@ const DataTableColumnHeader = forwardRef<
             data-block-keyboard-nav
             role="slider"
             aria-valuenow={
-              typeof resizeResult.style.width === "number"
-                ? resizeResult.style.width
-                : 0
+              typeof resizeResult.width === "number" ? resizeResult.width : 0
             }
             aria-valuetext={
-              typeof resizeResult.style.width === "number" &&
+              typeof resizeResult.width === "number" &&
               resizeResult.isResizingWithKeyboard
-                ? resizeResult.style.width.toString()
+                ? resizeResult.width.toString()
                 : "" // Needs to be blank when not in keyboard resizing mode to avoid NVDA announcing the value as part of the column heading
             } // Need either this or aria-valuemax to get SR (at least NVDA) to announce the value
           >
             {resizeResult.isResizingWithKeyboard && (
               <>
-                <span className="aksel-data-table__th-resize-handle-indicator aksel-data-table__th-resize-handle-indicator--start">
+                <span className="aksel-data-table__th-resize-handle-indicator">
                   <CaretLeftCircleFillIcon aria-hidden fontSize="1.5rem" />
                 </span>
-                <span className="aksel-data-table__th-resize-handle-indicator aksel-data-table__th-resize-handle-indicator--end">
+                <span className="aksel-data-table__th-resize-handle-indicator">
                   <CaretRightCircleFillIcon aria-hidden fontSize="1.5rem" />
                 </span>
               </>

package/src/data/table/column-header/useTableColumnResize.ts

@@ -26,61 +26,51 @@ type ResizeProps = {
    * consider using `layout="auto"` on the root instead for better performance.
    *
    * **NB:** This can cause a layout shift. Set a good initial width with `width` or `defaultWidth` to mitigate this.
+   *
+   * **NB:** Does not work with block content.
    */
-  autoWidth?: boolean;
+  autoResizeOnce?: boolean;
   /**
-   * Minimum width of the column when resizing. Only used when `resizable` or `autoWidth` is enabled.
+   * Minimum width of the column when resizing. Only used when `resizable` or `autoResizeOnce` is enabled.
    * @default 40
    */
-  minWidth?: number;
+  resizeMin?: number;
   /**
-   * Maximum width of the column when resizing. Only used when `resizable` or `autoWidth` is enabled.
+   * Maximum width of the column when resizing. Only used when `resizable` or `autoResizeOnce` is enabled.
    */
-  maxWidth?: number;
+  resizeMax?: number;
   // TODO: Consider "allowing" %-width on last column, if we find a solution to the overflow issue (width becomes 0px).
   /**
-   * Controlled width of the column. Does not respect `minWidth` and `maxWidth`.
+   * Controlled width of the column. (Does not respect `resizeMin` and `resizeMax`.)
    *
-   * Should only be used to fully control column width state. Otherwise, use `defaultWidth` and let the component handle resizing.
+   * Should only be used to fully control column width state. Otherwise, use `default` and let the component handle resizing.
    *
    * **NB:** Percentage as initial width does not work well with resizing.
    */
-  width?: number | string;
+  value?: number | string;
   /**
-   * Initial width of the column. Only used when `width` is not set and `resizable` is true.
-   * Does not respect `minWidth` and `maxWidth`.
+   * Initial width of the column. Only used when `value` is not set.
+   * (Does not respect `resizeMin` and `resizeMax`.)
    *
    * **NB:** Percentage as initial width does not work well with resizing.
    * @default 140px
    */
-  defaultWidth?: number | string;
+  default?: number | string;
   /**
    * Called when the column width changes.
    * @param width New width in pixels.
    */
-  onWidthChange?: (width: number) => void;
-  /**
-   * Forwarded styles
-   */
-  style?: React.CSSProperties;
-  /**
-   * Forwarded colSpan
-   */
-  colSpan?: number;
-};
-
-type WithUndefined<T> = {
-  [K in keyof T]: T[K] | undefined;
+  onChange?: (width: number) => void;
 };
-type Unomittable<T> = WithUndefined<Required<T>>;
 
-type TableColumnResizeArgs = Unomittable<ResizeProps> & {
+type TableColumnResizeArgs = ResizeProps & {
   thRef: React.RefObject<HTMLTableCellElement | null>;
+  colSpan: number | undefined;
 };
 
 type TableColumnResizeResult =
   | {
-      style: React.CSSProperties;
+      width: number | string;
       resizeHandlerProps: {
         onMouseDown: DOMAttributes<HTMLButtonElement>["onMouseDown"];
         onTouchStart: DOMAttributes<HTMLButtonElement>["onTouchStart"];
@@ -93,59 +83,53 @@ type TableColumnResizeResult =
       enabled: true;
     }
   | {
-      style?: React.CSSProperties;
+      width?: number | string;
       enabled: false;
     };
 
 /**
  * TODO:
- * - Do we allow % widths?
  * - Auto-width mode is hard now since that might cause layout-shifts on mount. But would be preferable to
  * be able to set "1fr" or similar and have it fill remaining space.
  */
-function useTableColumnResize(
-  args: TableColumnResizeArgs,
-): TableColumnResizeResult {
-  const {
-    resizable,
-    thRef,
-    width: userWidth,
-    defaultWidth,
-    autoWidth,
-    onWidthChange,
-    maxWidth = Infinity,
-    minWidth = 40,
-    style,
-    colSpan,
-  } = args;
-
+function useTableColumnResize({
+  resizable = true,
+  autoResizeOnce,
+  resizeMin = 40,
+  resizeMax = Infinity,
+  value,
+  default: defaultProp,
+  onChange,
+  thRef,
+  colSpan,
+}: TableColumnResizeArgs): TableColumnResizeResult {
   const tableContext = useDataTableContext();
 
   const [isResizingWithKeyboard, setIsResizingWithKeyboard] = useState(false);
   const ignoreNextOnClick = useRef(false);
 
   const [width, setWidth] = useControllableState({
-    value: userWidth,
-    defaultValue: defaultWidth ?? (colSpan ?? 1) * 140,
+    value,
+    defaultValue: defaultProp ?? (colSpan ?? 1) * 140,
     /**
      * TODO:
      * - Potential optimization: Only call when width as "stopped" changing, e.g. on mouse up or after a debounce when resizing with keyboard.
      * Otherwise, this could cause excessive calls when resizing quickly.
      */
-    onChange: onWidthChange,
+    onChange,
   });
 
   const setClampedWidth = useCallback(
     (newWidth: number) => {
-      setWidth(Math.min(Math.max(newWidth, minWidth), maxWidth));
+      setWidth(Math.min(Math.max(newWidth, resizeMin), resizeMax));
     },
-    [minWidth, maxWidth, setWidth],
+    [resizeMin, resizeMax, setWidth],
   );
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: We only want to run this on mount and when autoWidth changes
+  // biome-ignore lint/correctness/useExhaustiveDependencies: We only want to run this on mount and when autoResizeOnce changes
   useEffect(
     function autoResizeColumn() {
-      if (!autoWidth) {
+      if (!autoResizeOnce) {
         return;
       }
 
@@ -154,20 +138,19 @@ function useTableColumnResize(
         setClampedWidth(newColumnWidth);
       }
     },
-    [autoWidth], // eslint-disable-line react-hooks/exhaustive-deps
+    [autoResizeOnce], // eslint-disable-line react-hooks/exhaustive-deps
   );
 
   const handleOnClick: DOMAttributes<HTMLButtonElement>["onClick"] =
     useCallback(() => {
       // We need to use the onClick event in order to support screen readers properly,
-      // since some of them only send a mouse click when pressing enter/space.
+      // since some of them only send a mouse click (no kbd events) when pressing enter/space.
       // We detect a "screen reader click" by checking if we had a mouseUp event right before.
 
       if (ignoreNextOnClick.current) {
         ignoreNextOnClick.current = false;
         return;
       }
-
       setIsResizingWithKeyboard((prev) => !prev);
     }, []);
 
@@ -213,11 +196,11 @@ function useTableColumnResize(
         const currentWidth = thRef.current?.offsetWidth ?? 0;
         const newWidth = startWidth + (clientX - startX);
 
-        if (newWidth > maxWidth) {
+        if (newWidth > resizeMax) {
           setWidth(newWidth < currentWidth ? newWidth : currentWidth);
           return;
         }
-        if (newWidth < minWidth) {
+        if (newWidth < resizeMin) {
           setWidth(newWidth > currentWidth ? newWidth : currentWidth);
           return;
         }
@@ -250,7 +233,7 @@ function useTableColumnResize(
       document.addEventListener("touchend", cleanup, { once: true });
       document.addEventListener("touchcancel", cleanup, { once: true });
     },
-    [maxWidth, minWidth, setWidth, setClampedWidth, thRef],
+    [resizeMax, resizeMin, setWidth, setClampedWidth, thRef],
   );
 
   const handleMouseDown: DOMAttributes<HTMLButtonElement>["onMouseDown"] =
@@ -269,7 +252,7 @@ function useTableColumnResize(
       [startResize],
     );
 
-  // Auto-size column to fit content on double click. NB: Doesn't work with block content!
+  // Auto-size column to fit content on double click
   const handleDoubleClick: DOMAttributes<HTMLButtonElement>["onDoubleClick"] =
     useCallback(() => {
       const newColumnWidth = getAutoColumnWidth(thRef);
@@ -280,26 +263,20 @@ function useTableColumnResize(
 
   if (tableContext.layout !== "fixed") {
     return {
-      style,
       enabled: false,
     };
   }
 
   if (!resizable) {
     return {
-      style: {
-        ...style,
-        width,
-      },
+      width,
+
       enabled: false,
     };
   }
 
   return {
-    style: {
-      ...style,
-      width,
-    },
+    width,
     resizeHandlerProps: {
       onMouseDown: handleMouseDown,
       onTouchStart: handleTouchStart,
@@ -313,12 +290,16 @@ function useTableColumnResize(
   };
 }
 
+/**
+ * Figures out how wide the column needs to be to fit all the content without truncation.
+ * NB: Does not work with block content!
+ */
 function getAutoColumnWidth(
   thRef: React.RefObject<HTMLTableCellElement | null>,
 ) {
   const th = thRef.current!;
   const thContent = th.querySelector(".aksel-data-table__th-content");
-  const thPaddingEl = th.querySelector("div");
+  const thPaddingEl = th.querySelector(".aksel-data-table__cell-content");
   const rows = th.closest("table")?.querySelectorAll("tbody tr, tfoot tr");
   if (!thContent || !thPaddingEl || !rows) {
     return;
@@ -361,15 +342,18 @@ function getAutoColumnWidth(
     skipRows = cell.rowSpan - 1;
 
     // Find needed width
-    const cellContent = cell.firstChild as HTMLElement;
+    const cellContent = cell.querySelector(
+      ".aksel-data-table__cell-content",
+    ) as HTMLElement;
     range.selectNodeContents(cellContent);
     const cellContentWidth = range.getBoundingClientRect().width;
     const contentElStyle = window.getComputedStyle(cellContent);
     const inlinePadding =
       parseInt(contentElStyle.paddingLeft, 10) +
       parseInt(contentElStyle.paddingRight, 10);
+    const marginLeft = parseInt(contentElStyle.marginLeft, 10); // We don't have right margin for now
     const widthNeededForThisCell =
-      (cellContentWidth + inlinePadding) / cell.colSpan;
+      (cellContentWidth + inlinePadding + marginLeft) / cell.colSpan;
     if (widthNeededForThisCell > newColumnWidth) {
       newColumnWidth = widthNeededForThisCell;
     }

package/src/data/table/details-panel-row/DataTableDetailsPanelRow.tsx

@@ -9,10 +9,10 @@ function DataTableDetailsPanelRow<T>({
   rowId,
   rowData,
 }: {
-  rowId: string | number;
+  rowId: string;
   rowData: T;
 }) {
-  const { tableId, fullWidthColSpan } = useDataTableContext();
+  const { tableId, totalColSpan } = useDataTableContext();
   const {
     enableDetailsPanel,
     isExpanded,
@@ -43,7 +43,11 @@ function DataTableDetailsPanelRow<T>({
 
   return (
     <tr className="aksel-data-table__details-panel-row">
-      <td id={expansionId} colSpan={fullWidthColSpan}>
+      <td
+        id={expansionId}
+        colSpan={totalColSpan}
+        className="aksel-data-table__details-panel-row-cell"
+      >
         <div style={style}>{content}</div>
       </td>
     </tr>

package/src/data/table/helpers/collectTableRowEntries.ts

@@ -1,21 +1,23 @@
-type TableRowEntryId = string | number;
+import type { TableRowEntryId } from "../root/DataTable.types";
 
 type CollectTableRowEntriesArgs<T> = {
   items: T[];
-  getRowId: (rowData: T, index: number) => TableRowEntryId;
+  getRowId?: (rowData: T, index: number) => TableRowEntryId;
   getRows?: (rowData: T) => T[];
   isRowExpandable?: (rowData: T) => boolean;
 };
 
 interface ItemDetail<T> {
-  id: string | number;
+  id: TableRowEntryId;
+  rowData: T;
   level: number;
-  parent: null | T;
-  children: readonly T[];
+  parentId: TableRowEntryId | null;
+  children: readonly TableRowEntryId[];
 }
 
 type CollectTableRowEntriesReturn<T> = {
-  itemDetails: Map<T, ItemDetail<T>>;
+  itemDetails: Map<TableRowEntryId, ItemDetail<T>>;
+  rootRowIds: TableRowEntryId[];
   /**
    * Direct child ids for each row, used to traverse nested selection groups
    * without storing every descendant list on each ancestor.
@@ -29,54 +31,65 @@ function collectTableRowEntries<T>({
   getRows,
   isRowExpandable,
 }: CollectTableRowEntriesArgs<T>): CollectTableRowEntriesReturn<T> {
-  const itemDetailsMap = new Map<T, ItemDetail<T>>();
+  const itemDetailsMap = new Map<TableRowEntryId, ItemDetail<T>>();
   const childRowIdsById = new Map<TableRowEntryId, TableRowEntryId[]>();
+  const rootRowIds: TableRowEntryId[] = [];
 
   const traverseRow = (
     rowData: T,
     rowIndex: number,
     level: number,
-    parent: T | null,
+    parentRowId: TableRowEntryId | null,
   ): TableRowEntryId => {
-    const rowId = getRowId(rowData, rowIndex);
+    const rowId = getRowId
+      ? getRowId(rowData, rowIndex)
+      : getFallbackTableRowId(rowIndex, parentRowId);
 
     const children =
       ((isRowExpandable?.(rowData) ?? true) ? getRows?.(rowData) : []) ?? [];
 
-    itemDetailsMap.set(rowData, {
-      id: rowId,
-      level,
-      parent,
-      children,
-    });
-
     const childRowIds: TableRowEntryId[] = [];
 
     for (let childIndex = 0; childIndex < children.length; childIndex++) {
       const childRow = children[childIndex];
-      const childRowId = traverseRow(childRow, childIndex, level + 1, rowData);
+      const childRowId = traverseRow(childRow, childIndex, level + 1, rowId);
       childRowIds.push(childRowId);
     }
 
+    itemDetailsMap.set(rowId, {
+      id: rowId,
+      rowData,
+      level,
+      parentId: parentRowId,
+      children: childRowIds,
+    });
+
     childRowIdsById.set(rowId, childRowIds);
 
     return rowId;
   };
 
   for (let rowIndex = 0; rowIndex < items.length; rowIndex++) {
-    traverseRow(items[rowIndex], rowIndex, 0, null);
+    rootRowIds.push(traverseRow(items[rowIndex], rowIndex, 0, null));
   }
 
   return {
     itemDetails: itemDetailsMap,
+    rootRowIds,
     childRowIdsById,
   };
 }
 
+function getFallbackTableRowId(
+  rowIndex: number,
+  parentRowId: TableRowEntryId | null,
+): string {
+  return parentRowId == null ? String(rowIndex) : `${parentRowId}.${rowIndex}`;
+}
+
 export { collectTableRowEntries };
 export type {
   CollectTableRowEntriesArgs,
   CollectTableRowEntriesReturn,
-  TableRowEntryId,
   ItemDetail,
 };