@navikt/ds-react 8.10.3 → 8.10.5

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

@@ -7,56 +7,47 @@ 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) => TableRowEntryId;
+  subRows?: SubRowsProps<T>;
 };
 
 type useTableItemsReturn<T> = {
   items: T[];
-  itemDetails: Map<T, ItemDetail<T>>;
+  itemDetails: Map<TableRowEntryId, ItemDetail<T>>;
   /** 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[]>;
-  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(
@@ -66,32 +57,35 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
 
   const { itemDetails, visibleItems, visibleRowIds, childRowIdsById } =
     useMemo(() => {
-      const { itemDetails: rowEntriesMap, childRowIdsById: _childRowIdsById } =
-        collectTableRowEntries({
-          items,
-          getRowId,
-          getSubRows,
-          isSubRowExpandable,
-        });
+      const {
+        itemDetails: rowEntriesMap,
+        rootRowIds,
+        childRowIdsById: _childRowIdsById,
+      } = collectTableRowEntries({
+        items,
+        getRowId,
+        getRows,
+        isRowExpandable,
+      });
 
       const localVisibleItems: T[] = [];
       const localVisibleRowIds: TableRowEntryId[] = [];
 
-      const addVisibleRows = (rowData: T): TableRowEntryId[] => {
-        const details = rowEntriesMap.get(rowData);
+      const addVisibleRows = (rowId: TableRowEntryId): TableRowEntryId[] => {
+        const details = rowEntriesMap.get(rowId);
 
         if (!details) {
           return [];
         }
 
-        localVisibleItems.push(rowData);
+        localVisibleItems.push(details.rowData);
         localVisibleRowIds.push(details.id);
 
         const visibleDescendantRowIds: TableRowEntryId[] = [];
 
         if (expandedIdsSet.has(details.id)) {
-          for (const childRow of details.children) {
-            const childVisibleRowIds = addVisibleRows(childRow);
+          for (const childRowId of details.children) {
+            const childVisibleRowIds = addVisibleRows(childRowId);
             visibleDescendantRowIds.push(...childVisibleRowIds);
           }
         }
@@ -99,8 +93,8 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
         return [details.id, ...visibleDescendantRowIds];
       };
 
-      for (const rowData of items) {
-        addVisibleRows(rowData);
+      for (const rowId of rootRowIds) {
+        addVisibleRows(rowId);
       }
 
       return {
@@ -109,7 +103,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,20 +121,18 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
     itemDetails,
     visibleRowIds,
     childRowIdsById,
-    onExpandedSubRowIdsChange: handleExpandedSubRowIdChange,
+    onExpandedRowIdsChange: handleExpandedSubRowIdChange,
     isSubRowExpanded: (id: string | number) => expandedIdsSet.has(id),
   };
 }
 
 const { Provider: TableItemsProvider, useContext: useTableItemsContext } =
   /* TODO: Can we type this better? */
-  createStrictContext<
-    Omit<useTableItemsReturn<any>, "visibleRowIds" | "childRowIdsById">
-  >({
+  createStrictContext<Omit<useTableItemsReturn<any>, "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/useTableKeyboardNav.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useEventCallback } from "../../../utils/hooks";
 import { focusInitialTableTarget } from "../helpers/table-cell";
-import { focusCellAndUpdateTabIndex } from "../helpers/table-focus";
+import { focusCell, focusCellAndUpdateTabIndex } from "../helpers/table-focus";
 import {
   findFirstCell,
   findFirstCellInRow,
@@ -137,6 +137,10 @@ function useTableKeyboardNav({
     const target = event.target as Element | null;
 
     if (tableRef && target === tableRef) {
+      if (activeCell) {
+        focusCell(activeCell);
+        return;
+      }
       focusInitialTableTarget(tableRef);
       return;
     }
@@ -173,7 +177,7 @@ function useTableKeyboardNav({
 
   return {
     /* Table should only have tabIndex until the focus is moved inside and is enabled */
-    tabIndex: enabled ? (activeCell ? undefined : 0) : undefined,
+    tabIndex: enabled ? 0 : undefined,
     setTableRef,
   };
 }

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.
    *
@@ -22,9 +29,6 @@ type ColumnDefinition<T> = {
    * Assigned to the cell's `th` element instead of `td` if true.
    *
    * Should be used for cells that act as row headers. Each row should have one rowheader, and only have one cell with `isRowHeader: true`,
-   *
-   * TODO: Not implemented
-   * - Add a generic tablecell component that can render either a td or th based on context or this prop.
    */
   isRowHeader?: boolean;
   /**
@@ -44,9 +48,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,
+};