@navikt/ds-react 8.10.1 → 8.10.2

package/src/data/table/root/DataTableAuto.tsx

@@ -1,5 +1,7 @@
 /** biome-ignore-all lint/correctness/useHookAtTopLevel: False positive because of the way forwardRef() is added */
 import React, { forwardRef, useMemo } from "react";
+import { ChevronDownIcon, ChevronRightIcon } from "@navikt/aksel-icons";
+import { Button } from "../../../button";
 import { Skeleton } from "../../../skeleton";
 import { useId } from "../../../utils-external";
 import { cl } from "../../../utils/helpers";
@@ -7,12 +9,18 @@ import { useMergeRefs } from "../../../utils/hooks";
 import { DataTableBaseCell } from "../base-cell/DataTableBaseCell";
 import { DataTableColumnHeader } from "../column-header/DataTableColumnHeader";
 import { DataTableEmptyState } from "../empty-state/DataTableEmptyState";
-import type { UseColumnOptionsResult } from "../hooks/useColumnOptions";
 import { useColumnOptions } from "../hooks/useColumnOptions";
 import {
   DataTableExpansionProvider,
+  getDataTableExpansionId,
   useDataTableExpansion,
 } from "../hooks/useTableExpansion";
+import {
+  type ItemDetail,
+  TableItemsProvider,
+  useTableItems,
+  useTableItemsContext,
+} from "../hooks/useTableItems";
 import { useTableKeyboardNav } from "../hooks/useTableKeyboardNav";
 import {
   type SelectionProps,
@@ -157,6 +165,11 @@ interface DataTableProps<T>
    * When provided, an expand toggle column is added automatically.
    */
   getDetailsPanelContent?: (rowData: T) => React.ReactNode;
+  /**
+   * Determines whether a row can be expanded to show details panel content.
+   * @default () => true
+   */
+  isDetailsPanelExpandable?: (rowData: T) => boolean;
   /**
    * Controlled list of expanded row IDs.
    * Use with `onDetailsPanelChange` for controlled usage, or `defaultDetailsPanelRowIds` for uncontrolled.
@@ -169,6 +182,10 @@ interface DataTableProps<T>
   defaultDetailsPanelRowIds?: (string | number)[];
   /**
    * Called when the list of expanded row IDs changes.
+   *
+   *
+   * TODO:
+   * - Docs: This pattern is called "Master / Detail" in general terms
    */
   onDetailsPanelChange?: (ids: (string | number)[]) => void;
   /**
@@ -182,6 +199,15 @@ interface DataTableProps<T>
    * @default false
    */
   showExpandAll?: boolean;
+  /**
+   * Function to get sub-rows for a given row, used for nested rows.
+   * When provided, an expand toggle column is added automatically.
+   */
+  getSubRows?: (rowData: T) => T[];
+  expandedSubRowIds?: (string | number)[];
+  defaultExpandedSubRowIds?: (string | number)[];
+  isSubRowExpandable?: (rowData: T) => boolean;
+  onExpandedSubRowIdsChange?: (ids: (string | number)[]) => void;
 }
 
 function DataTableAutoInner<T>(
@@ -215,11 +241,17 @@ function DataTableAutoInner<T>(
     loadingLabel = "Laster innhold",
     disableRowSelectionOnClick = false,
     getDetailsPanelContent,
+    isDetailsPanelExpandable,
     getDetailsPanelHeight,
     showExpandAll = false,
     detailsPanelRowIds,
     defaultDetailsPanelRowIds,
     onDetailsPanelChange,
+    getSubRows,
+    expandedSubRowIds,
+    defaultExpandedSubRowIds,
+    isSubRowExpandable,
+    onExpandedSubRowIdsChange,
     ...rest
   }: DataTableProps<T>,
   forwardedRef: React.ForwardedRef<HTMLTableElement>,
@@ -237,12 +269,25 @@ function DataTableAutoInner<T>(
 
   const mergedRef = useMergeRefs(forwardedRef, setTableRef);
 
+  const tableItems = useTableItems({
+    items: data,
+    getRowId,
+    getSubRows,
+    expandedSubRowIds,
+    defaultExpandedSubRowIds,
+    isSubRowExpandable,
+    onExpandedSubRowIdsChange,
+  });
+
   const allRowKeys = useMemo(() => {
-    const resolvedGetRowId = (item: T, index: number): string | number =>
-      getRowId?.(item, index) ?? index;
+    const rowKeys: (string | number)[] = [];
+
+    for (const details of tableItems.itemDetails.values()) {
+      rowKeys.push(details.id);
+    }
 
-    return data.map((item, index) => resolvedGetRowId(item, index));
-  }, [data, getRowId]);
+    return rowKeys;
+  }, [tableItems.itemDetails]);
 
   const tableSelectionState = useTableSelection({
     selectionMode: selectionModeProp,
@@ -258,6 +303,12 @@ function DataTableAutoInner<T>(
     selectionMode: tableSelectionState.selection.selectionMode,
   });
 
+  const fullWidthColSpan =
+    columns.length +
+    (layout === "fixed" ? 1 : 0) +
+    (tableSelectionState.selection.selectionMode !== "none" ? 1 : 0) +
+    (getDetailsPanelContent ? 1 : 0);
+
   const tableId = useId(id);
 
   return (
@@ -273,13 +324,15 @@ function DataTableAutoInner<T>(
       disableRowSelectionOnClick={disableRowSelectionOnClick}
       isLoading={isLoading}
       showLoadingOverlay={isLoading && !loadingState && !loadingRows}
+      columns={columns}
     >
       <DataTableExpansionProvider
         detailsPanelRowIds={detailsPanelRowIds}
         defaultDetailsPanelRowIds={defaultDetailsPanelRowIds}
         onDetailsPanelChange={onDetailsPanelChange}
-        allRowKeys={allRowKeys}
+        itemDetails={tableItems.itemDetails}
         getDetailsPanelContent={getDetailsPanelContent}
+        isDetailsPanelExpandable={isDetailsPanelExpandable}
         getDetailsPanelHeight={getDetailsPanelHeight}
         showExpandAll={showExpandAll}
       >
@@ -323,17 +376,22 @@ function DataTableAutoInner<T>(
                   })}
                 </DataTableTr>
               </DataTableThead>
-              <DataTableTbody>
-                <DataTableAutoTBodyContent
-                  columns={columns}
-                  data={data}
-                  allRowKeys={allRowKeys}
-                  loadingState={loadingState}
-                  loadingRows={loadingRows}
-                  loadingLabel={loadingLabel}
-                  emptyState={emptyState}
-                />
-              </DataTableTbody>
+              <TableItemsProvider
+                itemDetails={tableItems.itemDetails}
+                items={tableItems.items}
+                onExpandedSubRowIdsChange={tableItems.onExpandedSubRowIdsChange}
+                isSubRowExpanded={tableItems.isSubRowExpanded}
+              >
+                <DataTableTbody>
+                  <DataTableAutoTBodyContent
+                    loadingState={loadingState}
+                    loadingRows={loadingRows}
+                    loadingLabel={loadingLabel}
+                    emptyState={emptyState}
+                    fullWidthColSpan={fullWidthColSpan}
+                  />
+                </DataTableTbody>
+              </TableItemsProvider>
             </table>
           </div>
         </div>
@@ -342,30 +400,27 @@ function DataTableAutoInner<T>(
   );
 }
 
-interface DataTableAutoTBodyContentProps<T> {
-  columns: UseColumnOptionsResult<T>["columns"];
-  data: T[];
-  allRowKeys: (string | number)[];
+interface DataTableAutoTBodyContentProps {
   loadingState: React.ReactNode;
   loadingLabel: string;
   loadingRows?: number;
   emptyState: React.ReactNode;
+  fullWidthColSpan: number;
 }
 
-function DataTableAutoTBodyContent<T>({
-  columns,
-  data,
-  allRowKeys,
+function DataTableAutoTBodyContent({
   loadingState,
   loadingRows,
   loadingLabel,
   emptyState,
-}: DataTableAutoTBodyContentProps<T>) {
-  const { isLoading } = useDataTableContext();
+  fullWidthColSpan,
+}: DataTableAutoTBodyContentProps) {
+  const { items, itemDetails } = useTableItemsContext();
+  const { columns, isLoading } = useDataTableContext();
 
   if (isLoading && loadingState != null) {
     return (
-      <DataTableLoadingState colSpan={columns.length}>
+      <DataTableLoadingState colSpan={fullWidthColSpan}>
         {loadingState}
       </DataTableLoadingState>
     );
@@ -375,7 +430,7 @@ function DataTableAutoTBodyContent<T>({
     return (
       <>
         <tr>
-          <td colSpan={columns.length} className="aksel-sr-only">
+          <td colSpan={fullWidthColSpan} className="aksel-sr-only">
             {loadingLabel}
           </td>
         </tr>
@@ -397,29 +452,45 @@ function DataTableAutoTBodyContent<T>({
     );
   }
 
-  if (data.length === 0 && emptyState !== undefined) {
+  if (items.length === 0 && emptyState !== undefined) {
     return (
-      <DataTableEmptyState colSpan={columns.length}>
+      <DataTableEmptyState colSpan={fullWidthColSpan}>
         {emptyState}
       </DataTableEmptyState>
     );
   }
 
-  const renderLoadingAnnoucement = isLoading && !loadingState && !loadingRows;
+  const renderLoadingAnnouncement = isLoading && !loadingState && !loadingRows;
+
+  return items.map((rowData) => {
+    const details = itemDetails.get(rowData);
+
+    /* Should in theory be impossible. Look about typing this? */
+    if (!details) {
+      return null;
+    }
+
+    const hasSubRows = details.children.length > 0;
 
-  return data.map((rowData, rowIndex) => {
-    const rowId = allRowKeys[rowIndex];
     return (
-      <React.Fragment key={rowId}>
-        {renderLoadingAnnoucement && (
+      <React.Fragment key={details.id}>
+        {renderLoadingAnnouncement && (
           <tr>
-            <td colSpan={columns.length} className="aksel-sr-only">
+            <td colSpan={fullWidthColSpan} className="aksel-sr-only">
               {loadingLabel}
             </td>
           </tr>
         )}
-        <DataTableTr rowId={rowId}>
+        <DataTableTr rowId={details.id}>
           {columns.map(({ isSticky, colDef }, colDefIndex) => {
+            const renderNestedToggle = colDefIndex === 0 && hasSubRows;
+            const renderNestedIndent =
+              colDefIndex === 0 && (details.level > 0 || hasSubRows);
+
+            const style: React.CSSProperties = {
+              "--__axc-data-table-nested-depth": details.level,
+            };
+
             return (
               <DataTableBaseCell
                 /* TODO: Make this configurable */
@@ -427,47 +498,86 @@ function DataTableAutoTBodyContent<T>({
                 key={colDef.id || colDefIndex}
                 as={colDef.isRowHeader ? "th" : "td"}
                 isSticky={isSticky}
+                data-nested={renderNestedIndent || undefined}
+                style={style}
               >
+                {renderNestedToggle && <NestedRowToggle details={details} />}
                 {colDef.cell(rowData)}
               </DataTableBaseCell>
             );
           })}
         </DataTableTr>
         <DataTableExpandedRow
-          rowId={rowId}
+          rowId={details.id}
           rowData={rowData}
-          columnCount={columns.length}
+          fullWidthColSpan={fullWidthColSpan}
         />
       </React.Fragment>
     );
   });
 }
 
+function NestedRowToggle({ details }: { details: ItemDetail<any> }) {
+  const { isSubRowExpanded, onExpandedSubRowIdsChange } =
+    useTableItemsContext();
+
+  const subRows = details.children;
+  const hasSubRows = subRows && subRows.length > 0;
+  const isRowExpanded = isSubRowExpanded(details.id);
+
+  return (
+    <div className="aksel-data-table__nested-toggle">
+      {hasSubRows && (
+        <Button
+          variant="tertiary"
+          data-color="neutral"
+          size="small"
+          onClick={(e) => {
+            e.stopPropagation();
+            onExpandedSubRowIdsChange(details.id);
+          }}
+          aria-expanded={isRowExpanded}
+          aria-label={isRowExpanded ? "Skjul under-rader" : "Vis under-rader"}
+          icon={
+            isRowExpanded ? (
+              <ChevronDownIcon aria-hidden />
+            ) : (
+              <ChevronRightIcon aria-hidden />
+            )
+          }
+        />
+      )}
+    </div>
+  );
+}
+
 function DataTableExpandedRow<T>({
   rowId,
   rowData,
-  columnCount,
+  fullWidthColSpan,
 }: {
   rowId: string | number;
   rowData: T;
-  columnCount: number;
+  fullWidthColSpan: number;
 }) {
   const { tableId } = useDataTableContext();
-  const expansionContext = useDataTableExpansion(false);
+  const {
+    enableDetailsPanel,
+    isExpanded,
+    getDetailsPanelContent,
+    getDetailsPanelHeight,
+  } = useDataTableExpansion();
 
-  /* TODO: Is this the way we want to opt out? Might just be temp until auto and root is merged so they use same context */
-  if (!expansionContext) {
+  if (!enableDetailsPanel) {
     return null;
   }
 
-  const { isExpanded, getDetailsPanelContent, getDetailsPanelHeight } =
-    expansionContext;
-
   if (!isExpanded(rowId)) {
     return null;
   }
 
   const content = getDetailsPanelContent?.(rowData);
+  const expansionId = getDataTableExpansionId(tableId, rowId);
 
   if (!content) {
     return null;
@@ -475,7 +585,7 @@ function DataTableExpandedRow<T>({
 
   return (
     <tr>
-      <td id={`${tableId}-expansion-${rowId}`} colSpan={columnCount}>
+      <td id={expansionId} colSpan={fullWidthColSpan}>
         <div style={{ height: getDetailsPanelHeight?.(rowData) }}>
           {content}
         </div>

package/src/data/table/root/DataTableRoot.context.ts

@@ -1,7 +1,8 @@
 import { createStrictContext } from "../../../utils/helpers";
+import type { UseColumnOptionsResult } from "../hooks/useColumnOptions";
 import type { UseTableSelectionReturn } from "../hooks/useTableSelection";
 
-type DataTableContextProps = {
+type DataTableContextProps<T> = {
   layout: "fixed" | "auto";
   withKeyboardNav: boolean;
   selectionState: UseTableSelectionReturn;
@@ -16,10 +17,11 @@ type DataTableContextProps = {
   disableRowSelectionOnClick: boolean;
   isLoading?: boolean;
   showLoadingOverlay: boolean;
+  columns: UseColumnOptionsResult<T>["columns"];
 };
 
 const { Provider: DataTableContextProvider, useContext: useDataTableContext } =
-  createStrictContext<DataTableContextProps>({
+  createStrictContext<DataTableContextProps<any>>({
     name: "DataTableContext",
     errorMessage: "useDataTableContext must be used within DataTable",
   });

package/src/data/table/root/DataTableRoot.tsx

@@ -10,6 +10,8 @@ import {
   DataTableEmptyState,
   type DataTableEmptyStateProps,
 } from "../empty-state/DataTableEmptyState";
+import { DataTableExpansionProvider } from "../hooks/useTableExpansion";
+import type { ItemDetail } from "../hooks/useTableItems";
 import { useTableKeyboardNav } from "../hooks/useTableKeyboardNav";
 import { type SelectionProps } from "../hooks/useTableSelection";
 import { noSelectionState } from "../hooks/useTableSelection";
@@ -34,6 +36,8 @@ import {
 import { DataTableTr, type DataTableTrProps } from "../tr/DataTableTr";
 import { DataTableContextProvider } from "./DataTableRoot.context";
 
+const EMPTY_ITEM_DETAILS = new Map<never, ItemDetail<never>>();
+
 interface DataTableProps
   extends React.HTMLAttributes<HTMLTableElement>, SelectionProps {
   children: React.ReactNode;
@@ -234,21 +238,24 @@ const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
         onRowClick={undefined}
         disableRowSelectionOnClick={false}
         showLoadingOverlay={false}
+        columns={[]}
       >
-        <div className="aksel-data-table__border-wrapper">
-          <div className="aksel-data-table__scroll-wrapper">
-            <table
-              {...rest}
-              ref={mergedRef}
-              className={cl("aksel-data-table", className)}
-              data-zebra-stripes={zebraStripes}
-              data-truncate-content={truncateContent}
-              data-density={rowDensity}
-              data-layout={layout}
-              tabIndex={tabIndex}
-            />
+        <DataTableExpansionProvider itemDetails={EMPTY_ITEM_DETAILS}>
+          <div className="aksel-data-table__border-wrapper">
+            <div className="aksel-data-table__scroll-wrapper">
+              <table
+                {...rest}
+                ref={mergedRef}
+                className={cl("aksel-data-table", className)}
+                data-zebra-stripes={zebraStripes}
+                data-truncate-content={truncateContent}
+                data-density={rowDensity}
+                data-layout={layout}
+                tabIndex={tabIndex}
+              />
+            </div>
           </div>
-        </div>
+        </DataTableExpansionProvider>
       </DataTableContextProvider>
     );
   },

package/src/data/table/tr/DataTableTr.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback } from "react";
+import React, { forwardRef } from "react";
 import {
   ChevronDownUpIcon,
   ChevronUpDownIcon,
@@ -14,7 +14,10 @@ import { useId } from "../../../utils-external";
 import { cl, composeEventHandlers } from "../../../utils/helpers";
 import { DataTableBaseCell } from "../base-cell/DataTableBaseCell";
 import { DataTableColumnHeader } from "../column-header/DataTableColumnHeader";
-import { useDataTableExpansion } from "../hooks/useTableExpansion";
+import {
+  getDataTableExpansionId,
+  useDataTableExpansion,
+} from "../hooks/useTableExpansion";
 import {
   useDataTableContext,
   useDataTableLocation,
@@ -59,45 +62,41 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
 
     const isSticky = location === "thead" && stickyHeader;
 
-    const handleClick = useCallback(
-      (event: React.MouseEvent<HTMLTableRowElement>) => {
-        if (
-          location !== "tbody" ||
-          rowId === undefined ||
-          isInteractiveTarget(event.target) ||
-          (event.target as HTMLElement | null)?.closest(
-            "[data-prevent-row-click]",
-          )
-        ) {
-          return;
-        }
-
-        const selection = window.getSelection();
-        if (selection && selection.toString().length > 0) {
-          return;
-        }
-
-        if (
-          !disableRowSelectionOnClick &&
-          selectionState.selection.selectionMode !== "none"
-        ) {
-          selectionState.selection.toggleSelection(rowId);
-        }
-        onRowClick?.(rowId, event);
-      },
-      [
-        disableRowSelectionOnClick,
-        location,
-        onRowClick,
-        rowId,
-        selectionState.selection,
-      ],
-    );
+    const handleClick =
+      location === "tbody" && rowId !== undefined
+        ? (event: React.MouseEvent<HTMLTableRowElement>) => {
+            if (
+              rowId === undefined ||
+              isInteractiveTarget(event.target) ||
+              (event.target as HTMLElement | null)?.closest(
+                "[data-prevent-row-click]",
+              )
+            ) {
+              return;
+            }
+
+            const selection = window.getSelection();
+            if (selection && selection.toString().length > 0) {
+              return;
+            }
+
+            if (
+              !disableRowSelectionOnClick &&
+              selectionState.selection.selectionMode !== "none"
+            ) {
+              selectionState.selection.toggleSelection(rowId);
+            }
+            onRowClick?.(rowId, event);
+          }
+        : undefined;
 
     return (
       <tr
         {...rest}
-        onClick={composeEventHandlers(onClick, handleClick)}
+        // Avoid setting onClick if not needed, since this causes NVDA to announce the row as clickable.
+        onClick={
+          (onClick || handleClick) && composeEventHandlers(onClick, handleClick)
+        }
         ref={forwardedRef}
         className={cl("aksel-data-table__tr", className)}
         data-selected={selected}
@@ -122,22 +121,18 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
 function RowExpansionCell({ rowId }: { rowId?: string | number }) {
   const { tableId, showLoadingSkeletons } = useDataTableContext();
   const { location } = useDataTableLocation();
-  const expansionContext = useDataTableExpansion(false);
-
-  if (!expansionContext) {
-    return null;
-  }
 
   const {
     isExpanded,
+    isDetailsPanelExpandable,
     toggleExpansion,
-    enableExpansion,
+    enableDetailsPanel,
     isAllExpanded,
     toggleAll,
     showExpandAll,
-  } = expansionContext;
+  } = useDataTableExpansion();
 
-  if (!enableExpansion) {
+  if (!enableDetailsPanel) {
     return null;
   }
 
@@ -202,6 +197,12 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
   }
 
   const isRowExpanded = isExpanded(rowId);
+  const canExpandRow = isDetailsPanelExpandable(rowId);
+  const expansionId = getDataTableExpansionId(tableId, rowId);
+
+  if (!canExpandRow) {
+    return <DataTableTd UNSAFE_isSelection preventRowClick />;
+  }
 
   return (
     <DataTableTd UNSAFE_isSelection preventRowClick>
@@ -214,7 +215,7 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
           toggleExpansion(rowId);
         }}
         aria-expanded={isRowExpanded}
-        aria-controls={`${tableId}-expansion-${rowId}`}
+        aria-controls={expansionId}
         aria-label={isRowExpanded ? "Skjul detaljer" : "Vis detaljer"}
         icon={
           isRowExpanded ? <MinusIcon aria-hidden /> : <PlusIcon aria-hidden />
@@ -225,7 +226,7 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
 }
 
 /**
- * TODO: How do these cells handle multiple thead rows, or col/rowspans?
+ * TODO: How do these cells handle multiple thead rows, or col/row-spans?
  * TODO: a11y for labels
  */
 function RowSelectionCell({ rowId }: { rowId?: string | number }) {