@navikt/ds-react 8.10.2 → 8.10.4

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

@@ -3,55 +3,51 @@ import { createStrictContext } from "../../../utils/helpers";
 import { useControllableState } from "../../../utils/hooks";
 import {
   type ItemDetail,
+  type TableRowEntryId,
   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> = {
   items: T[];
   itemDetails: Map<T, ItemDetail<T>>;
-  onExpandedSubRowIdsChange: (id: string | number) => void;
+  /** Row ids for the rows currently rendered in the table body. */
+  visibleRowIds: TableRowEntryId[];
+  /** Direct child ids for each row, used to traverse selection groups lazily. */
+  childRowIdsById: Map<TableRowEntryId, TableRowEntryId[]>;
+  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(
@@ -59,38 +55,52 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
     [nestedSubRowsExpandedIds],
   );
 
-  const { itemDetails, visibleItems } = useMemo(() => {
-    const rowEntriesMap = collectTableRowEntries({
-      items,
-      getRowId,
-      getSubRows,
-      isSubRowExpandable,
-    });
+  const { itemDetails, visibleItems, visibleRowIds, childRowIdsById } =
+    useMemo(() => {
+      const { itemDetails: rowEntriesMap, childRowIdsById: _childRowIdsById } =
+        collectTableRowEntries({
+          items,
+          getRowId,
+          getRows,
+          isRowExpandable,
+        });
 
-    const localVisibleItems: T[] = [];
-    const addVisibleRows = (rowData: T) => {
-      localVisibleItems.push(rowData);
+      const localVisibleItems: T[] = [];
+      const localVisibleRowIds: TableRowEntryId[] = [];
 
-      const details = rowEntriesMap.get(rowData);
+      const addVisibleRows = (rowData: T): TableRowEntryId[] => {
+        const details = rowEntriesMap.get(rowData);
 
-      if (!details || !expandedIdsSet.has(details.id)) {
-        return;
-      }
+        if (!details) {
+          return [];
+        }
 
-      for (const childRow of details.children) {
-        addVisibleRows(childRow);
-      }
-    };
+        localVisibleItems.push(rowData);
+        localVisibleRowIds.push(details.id);
+
+        const visibleDescendantRowIds: TableRowEntryId[] = [];
+
+        if (expandedIdsSet.has(details.id)) {
+          for (const childRow of details.children) {
+            const childVisibleRowIds = addVisibleRows(childRow);
+            visibleDescendantRowIds.push(...childVisibleRowIds);
+          }
+        }
 
-    for (const rowData of items) {
-      addVisibleRows(rowData);
-    }
+        return [details.id, ...visibleDescendantRowIds];
+      };
+
+      for (const rowData of items) {
+        addVisibleRows(rowData);
+      }
 
-    return {
-      visibleItems: localVisibleItems,
-      itemDetails: rowEntriesMap,
-    };
-  }, [getSubRows, items, getRowId, isSubRowExpandable, expandedIdsSet]);
+      return {
+        visibleItems: localVisibleItems,
+        visibleRowIds: localVisibleRowIds,
+        childRowIdsById: _childRowIdsById,
+        itemDetails: rowEntriesMap,
+      };
+    }, [getRows, items, getRowId, isRowExpandable, expandedIdsSet]);
 
   const handleExpandedSubRowIdChange = useCallback(
     (id: string | number) => {
@@ -106,18 +116,22 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
   return {
     items: visibleItems,
     itemDetails,
-    onExpandedSubRowIdsChange: handleExpandedSubRowIdChange,
+    visibleRowIds,
+    childRowIdsById,
+    onExpandedRowIdsChange: handleExpandedSubRowIdChange,
     isSubRowExpanded: (id: string | number) => expandedIdsSet.has(id),
   };
 }
 
 const { Provider: TableItemsProvider, useContext: useTableItemsContext } =
   /* TODO: Can we type this better? */
-  createStrictContext<useTableItemsReturn<any>>({
+  createStrictContext<
+    Omit<useTableItemsReturn<any>, "visibleRowIds" | "childRowIdsById">
+  >({
     name: "TableItemsContext",
     errorMessage:
       "useTableItemsContext must be used within a TableItemsProvider",
   });
 
 export { useTableItems, TableItemsProvider, useTableItemsContext };
-export type { ItemDetail };
+export type { ItemDetail, SubRowsProps };

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

@@ -9,24 +9,34 @@ import type {
   TableSelection,
 } from "../helpers/selection/selection.types";
 
-type UseTableSelectionArgs = SelectionProps & {
-  /* This is needed for multiple selection to know which keys to select when "select all" is used */
-  allRowKeys: (string | number)[];
+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. */
+  childRowIdsById?: Map<string | number, (string | number)[]>;
 };
 
 type UseTableSelectionReturn = {
   selection: TableSelection;
   renderSelection: boolean;
+  disableRowSelectionOnClick: boolean;
 };
 
 function useTableSelection({
-  selectionMode = "none",
-  defaultSelectedKeys,
-  selectedKeys: selectedKeysProp,
-  onSelectionChange,
-  disabledSelectionKeys = [],
-  allRowKeys,
+  selection = {},
+  visibleRowIds = [],
+  childRowIdsById,
 }: UseTableSelectionArgs): UseTableSelectionReturn {
+  const {
+    selectionMode = "none",
+    defaultSelectedKeys,
+    selectedKeys: selectedKeysProp,
+    onSelectionChange,
+    disabledSelectionKeys = [],
+    disableRowSelectionOnClick = false,
+  } = selection;
+
   const radioGroupName = useId();
 
   const [selectedKeys, setSelectedKeys] = useControllableState<SelectedKeysT>({
@@ -56,6 +66,7 @@ function useTableSelection({
         ...baseSelection,
         selectedKeys: [],
       },
+      disableRowSelectionOnClick,
       renderSelection: false,
     };
   }
@@ -72,7 +83,8 @@ function useTableSelection({
           name: radioGroupName,
         }),
       },
-      renderSelection: allRowKeys.length !== 0,
+      disableRowSelectionOnClick,
+      renderSelection: visibleRowIds.length !== 0,
     };
   }
 
@@ -85,10 +97,12 @@ function useTableSelection({
         selectedKeys,
         setSelectedKeys,
         disabledKeysSet,
-        allRowKeys,
+        visibleRowIds,
+        childRowIdsById,
       }),
     },
-    renderSelection: allRowKeys.length !== 0,
+    disableRowSelectionOnClick,
+    renderSelection: visibleRowIds.length !== 0,
   };
 }
 
@@ -102,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,18 +7,24 @@ 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;
   /**
-   * Currently only handles cell alignment.
-   * TODO: Should this include centering?
-   * type "icon" or something to avoid ellipsis on actions, tags etc
+   * Text alignment for cells in this column.
+   *
+   *
+   * @default "left"
    */
-  type?: "string" | "number";
+  align?: "left" | "right" | "center";
   /**
    * Assigned to the cell's `th` element instead of `td` if true.
    *
@@ -43,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 } =

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

@@ -0,0 +1,297 @@
+import React, { forwardRef } from "react";
+import { useId } from "../../../utils-external";
+import { cl } from "../../../utils/helpers";
+import { useMergeRefs } from "../../../utils/hooks";
+import {
+  DataTableCaption,
+  type DataTableCaptionProps,
+} from "../caption/DataTableCaption";
+import {
+  DataTableEmptyState,
+  type DataTableEmptyStateProps,
+} from "../empty-state/DataTableEmptyState";
+import { DataTableDetailsPanelProvider } from "../hooks/useTableDetailsPanel";
+import { useTableKeyboardNav } from "../hooks/useTableKeyboardNav";
+import {
+  type SelectionProps,
+  noSelectionState,
+} from "../hooks/useTableSelection";
+import {
+  DataTableLoadingState,
+  type DataTableLoadingStateProps,
+} from "../loading-state/DataTableLoadingState";
+import {
+  DataTableTbody,
+  type DataTableTbodyProps,
+} from "../tbody/DataTableTbody";
+import { DataTableTd, type DataTableTdProps } from "../td/DataTableTd";
+import {
+  DataTableTfoot,
+  type DataTableTfootProps,
+} from "../tfoot/DataTableTfoot";
+import { DataTableTh, type DataTableThProps } from "../th/DataTableTh";
+import {
+  DataTableThead,
+  type DataTableTheadProps,
+} from "../thead/DataTableThead";
+import { DataTableTr, type DataTableTrProps } from "../tr/DataTableTr";
+import { DataTableContextProvider } from "./DataTableRoot.context";
+
+interface DataTableProps
+  extends React.HTMLAttributes<HTMLTableElement>, SelectionProps {
+  children: React.ReactNode;
+  /**
+   * Controls vertical cell padding.
+   * @default "normal"
+   */
+  rowDensity?: "condensed" | "normal" | "spacious";
+  /**
+   * Zebra striped table
+   * @default false
+   */
+  zebraStripes?: boolean;
+  /**
+   * Truncate content in cells and show ellipsis for overflowed text.
+   *
+   * **NB:** When using `layout="auto"`, you have to manually set a `maxWidth` on columns that should be truncated.
+   * @default true
+   */
+  truncateContent?: boolean; // TODO: Consider making this default false when layout=auto, and maybe disallow it but add a wrap prop on the td-comp.
+  /**
+   * Enables keyboard navigation for table rows and cells.
+   * @default false
+   */
+  withKeyboardNav?: boolean;
+  /**
+   * Custom callback to determine if navigation should be blocked.
+   * Called before default blocking logic.
+   * Requires `withKeyboardNav` to be `true`.
+   */
+  shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
+  /**
+   * Controls table layout.
+   *
+   * ### fixed
+   * Gives you full control of column widths. This is required for resizable columns.
+   *
+   * ### auto
+   * Makes the columns resize automatically based on the content.
+   * The table will take up at least 100% of available width.
+   *
+   * **NB:** When using this with `truncateContent`, you have to manually
+   * set a `contentMaxWidth` on cells that should be truncated.
+   * @default "fixed"
+   */
+  layout?: "fixed" | "auto";
+}
+
+interface DataTableRootComponent extends React.ForwardRefExoticComponent<
+  DataTableProps & React.RefAttributes<HTMLTableElement>
+> {
+  /**
+   * @see 🏷️ {@link DataTableCaptionProps}
+   * @example
+   * ```jsx
+   * <DataTable>
+   *   <DataTable.Caption>
+   *     Lorem ipsum
+   *   </DataTable.Caption
+   * </DataTable>
+   * ```
+   */
+  Caption: typeof DataTableCaption;
+  /**
+   * @see 🏷️ {@link DataTableTheadProps}
+   * @example
+   * ```jsx
+   * <DataTable>
+   *   <DataTable.Thead>
+   *     ... TODO
+   *   </DataTable.Thead>
+   * </DataTable>
+   * ```
+   */
+  Thead: typeof DataTableThead;
+  /**
+   * @see 🏷️ {@link DataTableTbodyProps}
+   * @example
+   * ```jsx
+   * <DataTable>
+   *   <DataTable.Tbody>
+   *     ... TODO
+   *   </DataTable.Tbody>
+   * </DataTable>
+   * ```
+   */
+  Tbody: typeof DataTableTbody;
+  /**
+   * @see 🏷️ {@link DataTableTrProps}
+   * @example
+   * ```jsx
+   * <DataTable>
+   *   <DataTable.Tr>
+   *     ... TODO
+   *   </DataTable.Tr
+   * </DataTable>
+   * ```
+   */
+  Tr: typeof DataTableTr;
+  /**
+   * @see 🏷️ {@link DataTableThProps}
+   * @example
+   * ```jsx
+   * ```
+   */
+  Th: typeof DataTableTh;
+  /**
+   * @see 🏷️ {@link DataTableTdProps}
+   * @example
+   * ```jsx
+   * <DataTable>
+   *   <DataTable.Tbody>
+   *     <DataTable.Td>
+   *       Lorem ipsum
+   *     </DataTable.Td>
+   *     <DataTable.Td>
+   *       Dolor sit amet
+   *     </DataTable.Td>
+   *   </DataTable.Tbody>
+   * </DataTable>
+   * ```
+   */
+  Td: typeof DataTableTd;
+  /**
+   * @see 🏷️ {@link DataTableTfootProps}
+   * @example
+   * ```jsx
+   * <DataTable>
+   *   <DataTable.Tfoot>
+   *     ...
+   *   </DataTable.Tfoot>
+   * </DataTable>
+   * ```
+   */
+  Tfoot: typeof DataTableTfoot;
+  /**
+   * @see 🏷️ {@link DataTableEmptyStateProps}
+   * @example
+   * ```jsx
+   * <DataTable>
+   *   <DataTable.TBody>
+   *     <DataTable.EmptyState />
+   *   </DataTable.TBody>
+   * </DataTable>
+   * ```
+   */
+  EmptyState: typeof DataTableEmptyState;
+  /**
+   * @see 🏷️ {@link DataTableEmptyStateProps}
+   * @example
+   * ```jsx
+   * <DataTable>
+   *   <DataTable.TBody>
+   *     <DataTable.LoadingState />
+   *   </DataTable.TBody>
+   * </DataTable>
+   * ```
+   */
+  LoadingState: typeof DataTableLoadingState;
+}
+
+/**
+ * TODO Component description etc.
+ *
+ * **NB:** To get sticky headers, you have to set a height restriction on the table container. You can use VStack for this:
+ * TODO example
+ */
+const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
+  (
+    {
+      className,
+      rowDensity = "normal",
+      withKeyboardNav = false,
+      zebraStripes = false,
+      truncateContent = true,
+      shouldBlockNavigation,
+      layout = "fixed",
+      ...rest
+    },
+    forwardedRef,
+  ) => {
+    const { tabIndex, setTableRef } = useTableKeyboardNav({
+      enabled: withKeyboardNav,
+      shouldBlockNavigation,
+    });
+
+    const mergedRef = useMergeRefs(forwardedRef, setTableRef);
+
+    return (
+      <DataTableContextProvider
+        layout={layout}
+        withKeyboardNav={withKeyboardNav}
+        selectionState={noSelectionState}
+        stickySelection={false}
+        stickyHeader={true}
+        tableId={useId()}
+        showLoadingSkeletons={false}
+        onRowClick={undefined}
+        showLoadingOverlay={false}
+        columns={[]}
+        fullWidthColSpan={9999}
+      >
+        <DataTableDetailsPanelProvider>
+          <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>
+        </DataTableDetailsPanelProvider>
+      </DataTableContextProvider>
+    );
+  },
+) as DataTableRootComponent;
+
+DataTable.Caption = DataTableCaption;
+DataTable.Thead = DataTableThead;
+DataTable.Tbody = DataTableTbody;
+DataTable.Th = DataTableTh;
+DataTable.Tr = DataTableTr;
+DataTable.Td = DataTableTd;
+DataTable.Tfoot = DataTableTfoot;
+DataTable.EmptyState = DataTableEmptyState;
+DataTable.LoadingState = DataTableLoadingState;
+
+export {
+  DataTable,
+  DataTableCaption,
+  DataTableEmptyState,
+  DataTableLoadingState,
+  DataTableTbody,
+  DataTableTd,
+  DataTableTfoot,
+  DataTableTh,
+  DataTableThead,
+  DataTableTr,
+};
+export default DataTable;
+export type {
+  DataTableCaptionProps,
+  DataTableEmptyStateProps,
+  DataTableLoadingStateProps,
+  DataTableProps,
+  DataTableTbodyProps,
+  DataTableTdProps,
+  DataTableTfootProps,
+  DataTableTheadProps,
+  DataTableThProps,
+  DataTableTrProps,
+};