@navikt/ds-react 8.10.3 → 8.10.4

package/src/data/table/hooks/{useTableExpansion.tsx → useTableDetailsPanel.tsx}

@@ -3,7 +3,49 @@ import { createStrictContext } from "../../../utils/helpers";
 import { useControllableState } from "../../../utils/hooks";
 import { useTableItemsContext } from "./useTableItems";
 
-type DataTableExpansionContextT = {
+type DetailsPanelProps<T> = {
+  /**
+   * Renders a details panel below the row when expanded.
+   * When provided, an expand toggle column is added automatically.
+   */
+  getContent?: (rowData: T) => React.ReactNode;
+  /**
+   * Determines whether a row can be expanded to show details panel content.
+   * @default () => true
+   */
+  isRowExpandable?: (rowData: T) => boolean;
+  /**
+   * Controlled list of expanded row IDs.
+   * Use with `onDetailsPanelChange` for controlled usage, or `defaultDetailsPanelRowIds` for uncontrolled.
+   */
+  expandedRowIds?: (string | number)[];
+  /**
+   * Initial list of expanded row IDs for uncontrolled usage.
+   * @default []
+   */
+  defaultExpandedRowIds?: (string | number)[];
+  /**
+   * Called when the list of expanded row IDs changes.
+   *
+   *
+   * TODO:
+   * - Docs: This pattern is called "Master / Detail" in general terms
+   */
+  onExpandedRowIdsChange?: (ids: (string | number)[]) => void;
+  /**
+   * Returns the height (in px) or `"auto"` for a row's details panel.
+   * When a number is returned, the panel scrolls within that fixed height.
+   * @default "auto"
+   */
+  getHeight?: (rowData: T) => number | "auto";
+  /**
+   * Shows an expand-all toggle button in the expand column header.
+   * @default false
+   */
+  showExpandAll?: boolean;
+};
+
+type DataTableDetailsPanelContextT = {
   isExpanded: (id: string | number) => boolean;
   isDetailsPanelExpandable: (id: string | number) => boolean;
   toggleExpansion: (id: string | number) => void;
@@ -16,42 +58,32 @@ type DataTableExpansionContextT = {
 };
 
 const {
-  Provider: DataTableExpansionContextProvider,
-  useContext: useDataTableExpansion,
-} = createStrictContext<DataTableExpansionContextT>({
-  name: "DataTableExpansionContext",
+  Provider: DataTableDetailsPanelContextProvider,
+  useContext: useDataTableDetailsPanel,
+} = createStrictContext<DataTableDetailsPanelContextT>({
+  name: "DataTableDetailsPanelContext",
   errorMessage:
-    "useDataTableExpansion must be used within a DataTableExpansionProvider.",
+    "useDataTableDetailsPanel must be used within a DataTableDetailsPanelProvider.",
 });
 
-type TableExpansionOptions<T> = {
-  detailsPanelRowIds?: (string | number)[];
-  defaultDetailsPanelRowIds?: (string | number)[];
-  onDetailsPanelChange?: (ids: (string | number)[]) => void;
-  getDetailsPanelContent?: (row: T) => React.ReactNode;
-  isDetailsPanelExpandable?: (rowData: T) => boolean;
-  getDetailsPanelHeight?: (row: T) => number | "auto";
-  showExpandAll?: boolean;
-};
-
-function getDataTableExpansionId(tableId: string, rowId: string | number) {
-  return `${tableId}-expansion-${rowId}`;
-}
-
-function DataTableExpansionProvider<T>({
+function DataTableDetailsPanelProvider<T>({
   children,
-  detailsPanelRowIds,
-  defaultDetailsPanelRowIds = [],
-  onDetailsPanelChange,
-  getDetailsPanelContent,
-  isDetailsPanelExpandable,
-  getDetailsPanelHeight,
-  showExpandAll = false,
-}: TableExpansionOptions<T> & { children: React.ReactNode }) {
+  detailsPanel = {},
+}: { detailsPanel?: DetailsPanelProps<T> } & { children: React.ReactNode }) {
+  const {
+    expandedRowIds,
+    defaultExpandedRowIds = [],
+    onExpandedRowIdsChange,
+    getContent,
+    isRowExpandable,
+    getHeight,
+    showExpandAll = false,
+  } = detailsPanel;
+
   const [expandedIds, setExpandedIds] = useControllableState({
-    value: detailsPanelRowIds,
-    defaultValue: defaultDetailsPanelRowIds,
-    onChange: onDetailsPanelChange,
+    value: expandedRowIds,
+    defaultValue: defaultExpandedRowIds,
+    onChange: onExpandedRowIdsChange,
   });
 
   /* TODO: False is just fallback until auto and root is merged */
@@ -62,7 +94,7 @@ function DataTableExpansionProvider<T>({
   };
 
   const expandableIds = React.useMemo(() => {
-    if (!getDetailsPanelContent) {
+    if (!getContent) {
       return new Set<string | number>();
     }
 
@@ -74,13 +106,13 @@ function DataTableExpansionProvider<T>({
         continue;
       }
 
-      if (!isDetailsPanelExpandable || isDetailsPanelExpandable(rowData)) {
+      if (!isRowExpandable || isRowExpandable(rowData)) {
         ids.add(id);
       }
     }
 
     return ids;
-  }, [getDetailsPanelContent, isDetailsPanelExpandable, itemDetails]);
+  }, [getContent, isRowExpandable, itemDetails]);
 
   const isDetailsPanelExpandableById = useCallback(
     (id: string | number) => expandableIds.has(id),
@@ -117,30 +149,34 @@ function DataTableExpansionProvider<T>({
   }, [expandableIds, isAllExpanded, setExpandedIds]);
 
   return (
-    <DataTableExpansionContextProvider
+    <DataTableDetailsPanelContextProvider
       isExpanded={isExpanded}
       isDetailsPanelExpandable={isDetailsPanelExpandableById}
       toggleExpansion={toggleExpansion}
       toggleAll={toggleAll}
       isAllExpanded={isAllExpanded}
       getDetailsPanelContent={
-        getDetailsPanelContent as
-          | ((row: unknown) => React.ReactNode)
-          | undefined
+        getContent as ((row: unknown) => React.ReactNode) | undefined
       }
       getDetailsPanelHeight={
-        getDetailsPanelHeight as ((row: unknown) => number | "auto") | undefined
+        getHeight as ((row: unknown) => number | "auto") | undefined
       }
       showExpandAll={showExpandAll}
-      enableDetailsPanel={!!getDetailsPanelContent}
+      enableDetailsPanel={!!getContent}
     >
       {children}
-    </DataTableExpansionContextProvider>
+    </DataTableDetailsPanelContextProvider>
   );
 }
 
+function getDataTableDetailsPanelId(tableId: string, rowId: string | number) {
+  return `${tableId}-expansion-${rowId}`;
+}
+
 export {
-  DataTableExpansionProvider,
-  getDataTableExpansionId,
-  useDataTableExpansion,
+  DataTableDetailsPanelProvider,
+  getDataTableDetailsPanelId,
+  useDataTableDetailsPanel,
 };
+
+export type { DetailsPanelProps };

package/src/data/table/hooks/useTableItems.ts

@@ -7,27 +7,18 @@ import {
   collectTableRowEntries,
 } from "../helpers/collectTableRowEntries";
 
+type SubRowsProps<T> = {
+  getRows?: (rowData: T) => T[];
+  expandedRowIds?: (string | number)[];
+  defaultExpandedRowIds?: (string | number)[];
+  isRowExpandable?: (rowData: T) => boolean;
+  onExpandedRowIdsChange?: (ids: (string | number)[]) => void;
+};
+
 type UseTableItemsArgs<T> = {
   items: T[];
-  getRowId?: (rowData: T, index: number) => string | number;
-  /**
-   * Master - Detail pattern props
-   */
-  /* expandedDetailsPanelIds?: (string | number)[];
-  defaultExpandedDetailsPanelIds?: (string | number)[];
-  isDetailsPanelExpandable?: (rowData: T) => boolean;
-  onDetailsPanelChange?: (ids: (string | number)[]) => void;
-
-  getDetailsPanelHeight?: (row: T) => number | "auto";
-  getDetailsPanelContent?: (row: T) => React.ReactNode; */
-  /**
-   * Expanded/Nested rows pattern props
-   */
-  getSubRows?: (rowData: T) => T[];
-  expandedSubRowIds?: (string | number)[];
-  defaultExpandedSubRowIds?: (string | number)[];
-  isSubRowExpandable?: (rowData: T) => boolean;
-  onExpandedSubRowIdsChange?: (ids: (string | number)[]) => void;
+  getRowId: (rowData: T, index: number) => TableRowEntryId;
+  subRows?: SubRowsProps<T>;
 };
 
 type useTableItemsReturn<T> = {
@@ -37,26 +28,26 @@ type useTableItemsReturn<T> = {
   visibleRowIds: TableRowEntryId[];
   /** Direct child ids for each row, used to traverse selection groups lazily. */
   childRowIdsById: Map<TableRowEntryId, TableRowEntryId[]>;
-  onExpandedSubRowIdsChange: (id: string | number) => void;
+  onExpandedRowIdsChange: (id: string | number) => void;
   isSubRowExpanded: (id: string | number) => boolean;
 };
 
 function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
+  const { items, subRows = {}, getRowId } = args;
+
   const {
-    items,
-    expandedSubRowIds,
-    defaultExpandedSubRowIds,
-    getSubRows,
-    getRowId,
-    onExpandedSubRowIdsChange,
-    isSubRowExpandable,
-  } = args;
+    expandedRowIds,
+    defaultExpandedRowIds,
+    getRows,
+    onExpandedRowIdsChange,
+    isRowExpandable,
+  } = subRows;
 
   const [nestedSubRowsExpandedIds, setNestedSubRowsExpandedIds] =
     useControllableState({
-      value: expandedSubRowIds,
-      defaultValue: defaultExpandedSubRowIds ?? [],
-      onChange: onExpandedSubRowIdsChange,
+      value: expandedRowIds,
+      defaultValue: defaultExpandedRowIds ?? [],
+      onChange: onExpandedRowIdsChange,
     });
 
   const expandedIdsSet = useMemo(
@@ -70,8 +61,8 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
         collectTableRowEntries({
           items,
           getRowId,
-          getSubRows,
-          isSubRowExpandable,
+          getRows,
+          isRowExpandable,
         });
 
       const localVisibleItems: T[] = [];
@@ -109,7 +100,7 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
         childRowIdsById: _childRowIdsById,
         itemDetails: rowEntriesMap,
       };
-    }, [getSubRows, items, getRowId, isSubRowExpandable, expandedIdsSet]);
+    }, [getRows, items, getRowId, isRowExpandable, expandedIdsSet]);
 
   const handleExpandedSubRowIdChange = useCallback(
     (id: string | number) => {
@@ -127,7 +118,7 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
     itemDetails,
     visibleRowIds,
     childRowIdsById,
-    onExpandedSubRowIdsChange: handleExpandedSubRowIdChange,
+    onExpandedRowIdsChange: handleExpandedSubRowIdChange,
     isSubRowExpanded: (id: string | number) => expandedIdsSet.has(id),
   };
 }
@@ -143,4 +134,4 @@ const { Provider: TableItemsProvider, useContext: useTableItemsContext } =
   });
 
 export { useTableItems, TableItemsProvider, useTableItemsContext };
-export type { ItemDetail };
+export type { ItemDetail, SubRowsProps };

package/src/data/table/hooks/useTableSelection.ts

@@ -9,7 +9,8 @@ import type {
   TableSelection,
 } from "../helpers/selection/selection.types";
 
-type UseTableSelectionArgs = SelectionProps & {
+type UseTableSelectionArgs = {
+  selection?: SelectionProps;
   /* Visible rows manage the header checkbox state and render selection cells. */
   visibleRowIds: (string | number)[];
   /* Direct child ids let selection walk nested rows lazily. */
@@ -19,17 +20,23 @@ type UseTableSelectionArgs = SelectionProps & {
 type UseTableSelectionReturn = {
   selection: TableSelection;
   renderSelection: boolean;
+  disableRowSelectionOnClick: boolean;
 };
 
 function useTableSelection({
-  selectionMode = "none",
-  defaultSelectedKeys,
-  selectedKeys: selectedKeysProp,
-  onSelectionChange,
-  disabledSelectionKeys = [],
+  selection = {},
   visibleRowIds = [],
   childRowIdsById,
 }: UseTableSelectionArgs): UseTableSelectionReturn {
+  const {
+    selectionMode = "none",
+    defaultSelectedKeys,
+    selectedKeys: selectedKeysProp,
+    onSelectionChange,
+    disabledSelectionKeys = [],
+    disableRowSelectionOnClick = false,
+  } = selection;
+
   const radioGroupName = useId();
 
   const [selectedKeys, setSelectedKeys] = useControllableState<SelectedKeysT>({
@@ -59,6 +66,7 @@ function useTableSelection({
         ...baseSelection,
         selectedKeys: [],
       },
+      disableRowSelectionOnClick,
       renderSelection: false,
     };
   }
@@ -75,6 +83,7 @@ function useTableSelection({
           name: radioGroupName,
         }),
       },
+      disableRowSelectionOnClick,
       renderSelection: visibleRowIds.length !== 0,
     };
   }
@@ -92,6 +101,7 @@ function useTableSelection({
         childRowIdsById,
       }),
     },
+    disableRowSelectionOnClick,
     renderSelection: visibleRowIds.length !== 0,
   };
 }
@@ -106,6 +116,7 @@ const noSelectionState: UseTableSelectionReturn = {
     disabledSelectionKeys: [],
     isRowSelected: () => false,
   },
+  disableRowSelectionOnClick: false,
   renderSelection: false,
 };
 

package/src/data/table/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-export {
+/* export {
   default as DataTable,
   DataTableCaption,
   DataTableThead,
@@ -8,7 +8,7 @@ export {
   DataTableTh,
   DataTableTd,
   DataTableTfoot,
-} from "./root/DataTableRoot";
+} from "./root/DataTableRoot.legacy";
 export type {
   DataTableProps,
   DataTableCaptionProps,
@@ -18,4 +18,6 @@ export type {
   DataTableThProps,
   DataTableTdProps,
   DataTableTfootProps,
-} from "./root/DataTableRoot";
+} from "./root/DataTableRoot.legacy"; */
+
+export { DataTable, type DataTableProps } from "./root/DataTableRoot";

package/src/data/table/root/DataTable.types.ts

@@ -1,3 +1,5 @@
+import type { ResizeProps } from "../column-header/useTableColumnResize";
+
 type SortDirection = "asc" | "desc" | "none";
 
 /**
@@ -5,12 +7,17 @@ type SortDirection = "asc" | "desc" | "none";
  * - Consider "accessorKey" or similar to allow simple column definitions without a cell function.
  * - Add "align" property for better control over text alignment in cells.
  */
-type ColumnDefinition<T> = {
+type ColumnDefinition<T, DetailsT = Record<string, any>> = Pick<
+  ResizeProps,
+  | "resizable"
+  | "width"
+  | "defaultWidth"
+  | "autoWidth"
+  | "minWidth"
+  | "maxWidth"
+  | "onWidthChange"
+> & {
   id: string;
-  width?: number | string;
-  defaultWidth?: number | string;
-  minWidth?: number | string;
-  maxWidth?: number | string;
   /**
    * Text alignment for cells in this column.
    *
@@ -44,9 +51,16 @@ type ColumnDefinition<T> = {
    * Use `sort` and `onSortChange` on the root component to control sort state.
    */
   sortable?: boolean;
+  /**
+   * Additional metadata that can be used for filtering or other purposes. Not used by the table itself.
+   */
+  details?: DetailsT;
 };
 
-type ColumnDefinitions<T> = ColumnDefinition<T>[];
+type ColumnDefinitions<T, DetailsT = Record<string, any>> = ColumnDefinition<
+  T,
+  DetailsT
+>[];
 
 /**
  * A single sort entry representing a column's current sort state.

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

@@ -14,10 +14,14 @@ type DataTableContextProps<T> = {
     rowId: string | number,
     event: React.MouseEvent<HTMLTableRowElement>,
   ) => void;
-  disableRowSelectionOnClick: boolean;
   isLoading?: boolean;
   showLoadingOverlay: boolean;
   columns: UseColumnOptionsResult<T>["columns"];
+  /**
+   * Used to set exact colspan for detailsPanel, loadingState and emptyState.
+   * This is necessary to ensure that these components span the entire width of the table.
+   */
+  fullWidthColSpan: number;
 };
 
 const { Provider: DataTableContextProvider, useContext: useDataTableContext } =