@navikt/ds-react 8.10.2 → 8.10.4

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

@@ -1,46 +1,52 @@
-import React, { forwardRef } from "react";
+/** biome-ignore-all lint/correctness/useHookAtTopLevel: False positive because of the way forwardRef() is added */
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Skeleton } from "../../../skeleton";
 import { useId } from "../../../utils-external";
+import { Slot } from "../../../utils/components/slot/Slot";
 import { cl } from "../../../utils/helpers";
 import { useMergeRefs } from "../../../utils/hooks";
+import { DataTableBaseCell } from "../base-cell/DataTableBaseCell";
+import { DataTableColumnHeader } from "../column-header/DataTableColumnHeader";
+import { DataTableDetailsPanelRow } from "../details-panel-row/DataTableDetailsPanelRow";
+import { DataTableEmptyState } from "../empty-state/DataTableEmptyState";
+import { useColumnOptions } from "../hooks/useColumnOptions";
 import {
-  DataTableCaption,
-  type DataTableCaptionProps,
-} from "../caption/DataTableCaption";
+  DataTableDetailsPanelProvider,
+  type DetailsPanelProps,
+} from "../hooks/useTableDetailsPanel";
 import {
-  DataTableEmptyState,
-  type DataTableEmptyStateProps,
-} from "../empty-state/DataTableEmptyState";
-import { DataTableExpansionProvider } from "../hooks/useTableExpansion";
-import type { ItemDetail } from "../hooks/useTableItems";
+  type SubRowsProps,
+  TableItemsProvider,
+  useTableItems,
+  useTableItemsContext,
+} from "../hooks/useTableItems";
 import { useTableKeyboardNav } from "../hooks/useTableKeyboardNav";
-import { type SelectionProps } from "../hooks/useTableSelection";
-import { noSelectionState } from "../hooks/useTableSelection";
 import {
-  DataTableLoadingState,
-  type DataTableLoadingStateProps,
-} from "../loading-state/DataTableLoadingState";
+  type SelectionProps,
+  useTableSelection,
+} from "../hooks/useTableSelection";
+import { type TableSortOptions, useTableSort } from "../hooks/useTableSort";
+import { DataTableLoadingState } from "../loading-state/DataTableLoadingState";
+import { DataTableSubRowToggle } from "../sub-row-toggle/DataTableSubRowToggle";
+import { DataTableTbody } from "../tbody/DataTableTbody";
+import { DataTableThead } from "../thead/DataTableThead";
+import { DataTableTr } from "../tr/DataTableTr";
+import type { ColumnDefinitions } from "./DataTable.types";
 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";
-
-const EMPTY_ITEM_DETAILS = new Map<never, ItemDetail<never>>();
+  DataTableContextProvider,
+  useDataTableContext,
+} from "./DataTableRoot.context";
 
-interface DataTableProps
-  extends React.HTMLAttributes<HTMLTableElement>, SelectionProps {
-  children: React.ReactNode;
+interface DataTableProps<T>
+  extends React.HTMLAttributes<HTMLTableElement>, TableSortOptions {
+  children?: never;
   /**
    * Controls vertical cell padding.
    * @default "normal"
@@ -60,7 +66,7 @@ interface DataTableProps
   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
+   * @default true
    */
   withKeyboardNav?: boolean;
   /**
@@ -84,215 +90,473 @@ interface DataTableProps
    * @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>
-   * ```
+   * Defines the columns of the table and how to render them.
+   *
+   *
+   * Each column definition should have a unique `id` (or use the column index as fallback) and a `cell`-renderer function that takes the row data as argument and returns a React node.
    */
-  Caption: typeof DataTableCaption;
+  columnDefinitions: ColumnDefinitions<T>;
   /**
-   * @see 🏷️ {@link DataTableTheadProps}
-   * @example
-   * ```jsx
-   * <DataTable>
-   *   <DataTable.Thead>
-   *     ... TODO
-   *   </DataTable.Thead>
-   * </DataTable>
-   * ```
+   * The data to display in the table.
+   *
+   *
+   * Each object in the array represents a row, and the properties of the object are used to render the cells based on the `columnDefinitions`.
    */
-  Thead: typeof DataTableThead;
+  data: T[];
   /**
-   * @see 🏷️ {@link DataTableTbodyProps}
-   * @example
-   * ```jsx
-   * <DataTable>
-   *   <DataTable.Tbody>
-   *     ... TODO
-   *   </DataTable.Tbody>
-   * </DataTable>
-   * ```
+   * Function to get unique row id from row data.
+   *
+   *
+   * If not provided, the row index will be used as id. This can cause issues if your data changes dynamically, so it's recommended to provide a stable id if possible.
    */
-  Tbody: typeof DataTableTbody;
+  getRowId?: (rowData: T, index: number) => string | number;
   /**
-   * @see 🏷️ {@link DataTableTrProps}
-   * @example
-   * ```jsx
-   * <DataTable>
-   *   <DataTable.Tr>
-   *     ... TODO
-   *   </DataTable.Tr
-   * </DataTable>
-   * ```
+   * Sticky columns that remain visible when horizontally scrolling the table.
+   *
+   * You can specify 1 sticky column on the left and 1 on the right.
    */
-  Tr: typeof DataTableTr;
+  stickyColumns?: {
+    first?: "1";
+    last?: "1";
+  };
   /**
-   * @see 🏷️ {@link DataTableThProps}
-   * @example
-   * ```jsx
-   * ```
+   * @default true
    */
-  Th: typeof DataTableTh;
+  stickyHeader?: boolean;
   /**
-   * @see 🏷️ {@link DataTableTdProps}
-   * @example
-   * ```jsx
-   * <DataTable>
-   *   <DataTable.Tbody>
-   *     <DataTable.Td>
-   *       Lorem ipsum
-   *     </DataTable.Td>
-   *     <DataTable.Td>
-   *       Dolor sit amet
-   *     </DataTable.Td>
-   *   </DataTable.Tbody>
-   * </DataTable>
-   * ```
+   * Callback invoked when a data row is clicked.
+   * Not called when clicking header, loading, or empty-state rows.
    */
-  Td: typeof DataTableTd;
+  onRowClick?: (
+    rowId: string | number,
+    event: React.MouseEvent<HTMLTableRowElement>,
+  ) => void;
   /**
-   * @see 🏷️ {@link DataTableTfootProps}
-   * @example
-   * ```jsx
-   * <DataTable>
-   *   <DataTable.Tfoot>
-   *     ...
-   *   </DataTable.Tfoot>
-   * </DataTable>
-   * ```
+   * Content to render when `data` is empty.
+   * Rendered inside a `DataTable.EmptyState` row spanning all columns.
    */
-  Tfoot: typeof DataTableTfoot;
+  emptyState?: React.ReactNode;
+  loading?: {
+    /**
+     * Shows the table in a loading state.
+     *
+     * - When `loadingState` is provided, it is rendered inside a `DataTable.LoadingState` row.
+     * - When `loadingState` is **not** provided, skeleton placeholder rows are rendered instead.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Custom content to render when `isLoading` is `true`.
+     * Rendered inside a `DataTable.LoadingState` row spanning all columns.
+     * When omitted, skeleton rows are rendered based on `loadingRows`.
+     */
+    loadingState?: React.ReactNode;
+    /**
+     * Number of skeleton rows to render when `isLoading` is `true` and no `loadingState` is provided.
+     *
+     *
+     * If not provided, the rendered content will get a temporarily overlay while loading
+     */
+    loadingRows?: number;
+    /**
+     * Visually hidden label announced to screen readers when skeleton rows are shown.
+     * Only used when `isLoading` is `true` and no `loadingState` is provided.
+     * @default "Laster innhold"
+     */
+    loadingLabel?: string;
+  };
+
   /**
-   * @see 🏷️ {@link DataTableEmptyStateProps}
-   * @example
-   * ```jsx
-   * <DataTable>
-   *   <DataTable.TBody>
-   *     <DataTable.EmptyState />
-   *   </DataTable.TBody>
-   * </DataTable>
-   * ```
+   * Function to get sub-rows for a given row, used for nested rows.
+   * When provided, an expand toggle column is added automatically.
+   *
+   *
+   * TODO:
+   * - Table might need to be implemented with role="treegrid" for a11y when having nested rows.
    */
-  EmptyState: typeof DataTableEmptyState;
+  selection?: SelectionProps;
+  subRows?: SubRowsProps<T>;
+  detailsPanel?: DetailsPanelProps<T>;
+}
+
+function DataTableInner<T>(
+  {
+    className,
+    id,
+    rowDensity = "normal",
+    withKeyboardNav = true,
+    zebraStripes = false,
+    truncateContent = true,
+    shouldBlockNavigation,
+    layout = "fixed",
+    selection,
+    data,
+    columnDefinitions,
+    getRowId,
+    stickyColumns,
+    stickyHeader = true,
+    sort: sortProp,
+    defaultSort = [],
+    onSortChange,
+    onRowClick,
+    emptyState,
+    loading,
+    detailsPanel,
+    subRows,
+    ...rest
+  }: DataTableProps<T>,
+  forwardedRef: React.ForwardedRef<HTMLTableElement>,
+) {
+  const { sortState, onSortClick } = useTableSort({
+    defaultSort,
+    onSortChange,
+    sort: sortProp,
+  });
+
   /**
-   * @see 🏷️ {@link DataTableEmptyStateProps}
-   * @example
-   * ```jsx
-   * <DataTable>
-   *   <DataTable.TBody>
-   *     <DataTable.LoadingState />
-   *   </DataTable.TBody>
-   * </DataTable>
-   * ```
+   * TODO:
+   * - If user currently does not give a getRowsId function, and data is nested (getSubRows)
+   *   we end up in an infinite loop since the index based ids repeat for children and causes chaos.
    */
-  LoadingState: typeof DataTableLoadingState;
+  const tableItems = useTableItems({
+    items: data,
+    getRowId: getRowId ?? ((_, index) => index),
+    subRows,
+  });
+
+  const tableSelectionState = useTableSelection({
+    selection,
+    visibleRowIds: tableItems.visibleRowIds,
+    childRowIdsById: tableItems.childRowIdsById,
+  });
+
+  const { columns, stickySelection } = useColumnOptions<T>(columnDefinitions, {
+    stickyColumns,
+    selectionMode: tableSelectionState.selection.selectionMode,
+  });
+
+  const {
+    isLoading = false,
+    loadingState,
+    loadingRows,
+    loadingLabel = "Laster innhold",
+  } = loading || {};
+
+  const fullWidthColSpan = useMemo(() => {
+    return (
+      columns.length +
+      (layout === "fixed" ? 1 : 0) +
+      (tableSelectionState.selection.selectionMode !== "none" ? 1 : 0) +
+      (detailsPanel?.getContent ? 1 : 0)
+    );
+  }, [
+    columns,
+    layout,
+    tableSelectionState.selection.selectionMode,
+    detailsPanel,
+  ]);
+
+  const tableId = useId(id);
+
+  return (
+    <DataTableContextProvider
+      layout={layout}
+      withKeyboardNav={withKeyboardNav}
+      selectionState={tableSelectionState}
+      stickySelection={stickySelection}
+      stickyHeader={stickyHeader}
+      tableId={tableId}
+      showLoadingSkeletons={isLoading && loadingState == null}
+      onRowClick={onRowClick}
+      isLoading={isLoading}
+      showLoadingOverlay={isLoading && !loadingState && !loadingRows}
+      columns={columns}
+      fullWidthColSpan={fullWidthColSpan}
+    >
+      <TableItemsProvider
+        itemDetails={tableItems.itemDetails}
+        items={tableItems.items}
+        onExpandedRowIdsChange={tableItems.onExpandedRowIdsChange}
+        isSubRowExpanded={tableItems.isSubRowExpanded}
+      >
+        <DataTableDetailsPanelProvider detailsPanel={detailsPanel}>
+          <TableElementWrapper
+            shouldBlockNavigation={shouldBlockNavigation}
+            enabled={withKeyboardNav}
+          >
+            <table
+              {...rest}
+              ref={forwardedRef}
+              className={cl("aksel-data-table", className)}
+              data-zebra-stripes={zebraStripes}
+              data-truncate-content={truncateContent}
+              data-density={rowDensity}
+              data-layout={layout}
+              data-loading={isLoading || undefined}
+              aria-busy={isLoading || undefined}
+            >
+              <DataTableThead>
+                <DataTableTr>
+                  {columns.map(({ isSticky, colDef }) => {
+                    const sortEntry = sortState.find(
+                      (s) => s.columnId === colDef.id,
+                    );
+                    const sortDirection = sortEntry?.direction ?? "none";
+                    return (
+                      <DataTableColumnHeader
+                        resizable={colDef.resizable}
+                        width={colDef.width}
+                        defaultWidth={colDef.defaultWidth}
+                        autoWidth={colDef.autoWidth}
+                        minWidth={colDef.minWidth}
+                        maxWidth={colDef.maxWidth}
+                        onWidthChange={colDef.onWidthChange}
+                        textAlign={colDef.align ?? "left"}
+                        key={colDef.id}
+                        isSticky={isSticky}
+                        sortable={colDef.sortable}
+                        sortDirection={sortDirection}
+                        onSortClick={(event) => onSortClick(colDef.id, event)}
+                        label={colDef.label}
+                      >
+                        {colDef.header ?? colDef.label}
+                      </DataTableColumnHeader>
+                    );
+                  })}
+                </DataTableTr>
+              </DataTableThead>
+
+              <DataTableTbody>
+                <DataTableTBodyContent
+                  loadingState={loadingState}
+                  loadingRows={loadingRows}
+                  loadingLabel={loadingLabel}
+                  emptyState={emptyState}
+                />
+              </DataTableTbody>
+            </table>
+          </TableElementWrapper>
+        </DataTableDetailsPanelProvider>
+      </TableItemsProvider>
+    </DataTableContextProvider>
+  );
 }
 
 /**
- * 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
+ * Temp optimization to avoid re-renders on every keyboard-move, selection change etc
  */
-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,
+function TableElementWrapper({
+  children,
+  enabled,
+  shouldBlockNavigation,
+}: {
+  children: React.ReactNode;
+  shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
+  enabled: boolean;
+}) {
+  const [applyStickyStyles, setApplyStickyStyles] = useState<boolean>(false);
+
+  const tableWrapperRef = useRef<HTMLDivElement>(null);
+  const tableRef = useRef<HTMLTableElement>(null);
+  const rafRef = useRef<number | null>(null);
+  const { tabIndex, setTableRef } = useTableKeyboardNav({
+    enabled,
+    shouldBlockNavigation,
+  });
+
+  const mergedTableRefs = useMergeRefs(tableRef, setTableRef);
+
+  const updateStickyStyles = useCallback(() => {
+    if (!tableWrapperRef.current) {
+      return;
+    }
+
+    const doesWrapperHasScroll =
+      tableWrapperRef.current.scrollWidth > tableWrapperRef.current.clientWidth;
+
+    setApplyStickyStyles(doesWrapperHasScroll);
+  }, []);
+
+  const scheduleStickyStylesUpdate = useCallback(() => {
+    if (rafRef.current !== null) {
+      return;
+    }
+
+    rafRef.current = requestAnimationFrame(() => {
+      rafRef.current = null;
+      updateStickyStyles();
     });
+  }, [updateStickyStyles]);
+
+  useEffect(() => {
+    const tableWrapperElement = tableWrapperRef.current;
+
+    if (!tableWrapperElement) {
+      return;
+    }
+
+    const handleResize = () => scheduleStickyStylesUpdate();
+
+    window.addEventListener("resize", handleResize);
+
+    let resizeObserver: ResizeObserver | undefined;
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(handleResize);
+      resizeObserver.observe(tableWrapperElement);
+      if (tableRef.current) {
+        resizeObserver.observe(tableRef.current);
+      }
+    }
+
+    scheduleStickyStylesUpdate();
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      resizeObserver?.disconnect();
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, [scheduleStickyStylesUpdate]);
+
+  return (
+    <div className="aksel-data-table__border-wrapper">
+      <div ref={tableWrapperRef} className="aksel-data-table__scroll-wrapper">
+        <Slot
+          tabIndex={tabIndex}
+          /* @ts-expect-error Ref is not typed correctly to handle this case */
+          ref={mergedTableRefs}
+          data-scroll={applyStickyStyles ? "true" : undefined}
+        >
+          {children}
+        </Slot>
+      </div>
+    </div>
+  );
+}
+
+interface DataTableTBodyContentProps {
+  loadingState: React.ReactNode;
+  loadingLabel: string;
+  loadingRows?: number;
+  emptyState: React.ReactNode;
+}
 
-    const mergedRef = useMergeRefs(forwardedRef, setTableRef);
+function DataTableTBodyContent({
+  loadingState,
+  loadingRows,
+  loadingLabel,
+  emptyState,
+}: DataTableTBodyContentProps) {
+  const { items, itemDetails } = useTableItemsContext();
+  const { columns, isLoading, fullWidthColSpan } = useDataTableContext();
 
+  if (isLoading && loadingState != null) {
     return (
-      <DataTableContextProvider
-        layout={layout}
-        withKeyboardNav={withKeyboardNav}
-        selectionState={noSelectionState}
-        stickySelection={false}
-        stickyHeader={false}
-        tableId={useId()}
-        showLoadingSkeletons={false}
-        onRowClick={undefined}
-        disableRowSelectionOnClick={false}
-        showLoadingOverlay={false}
-        columns={[]}
-      >
-        <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>
-        </DataTableExpansionProvider>
-      </DataTableContextProvider>
+      <DataTableLoadingState colSpan={fullWidthColSpan}>
+        {loadingState}
+      </DataTableLoadingState>
     );
-  },
-) 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,
-};
+  }
+
+  if (isLoading && loadingRows) {
+    return (
+      <>
+        <tr>
+          <td colSpan={fullWidthColSpan} className="aksel-sr-only">
+            {loadingLabel}
+          </td>
+        </tr>
+        {Array.from({ length: loadingRows }, (_, rowIndex) => (
+          <DataTableTr key={`skeleton-row-${rowIndex}`} aria-hidden>
+            {columns.map(({ isSticky, colDef }, colDefIndex) => (
+              <DataTableBaseCell
+                textAlign={colDef.align ?? "left"}
+                key={colDef.id || colDefIndex}
+                as={colDef.isRowHeader ? "th" : "td"}
+                isSticky={isSticky}
+              >
+                <Skeleton variant="text" />
+              </DataTableBaseCell>
+            ))}
+          </DataTableTr>
+        ))}
+      </>
+    );
+  }
+
+  if (items.length === 0 && emptyState !== undefined) {
+    return (
+      <DataTableEmptyState colSpan={fullWidthColSpan}>
+        {emptyState}
+      </DataTableEmptyState>
+    );
+  }
+
+  const renderLoadingAnnouncement = isLoading && !loadingState && !loadingRows;
+
+  return (
+    <>
+      {renderLoadingAnnouncement && (
+        <tr>
+          <td colSpan={fullWidthColSpan} className="aksel-sr-only">
+            {loadingLabel}
+          </td>
+        </tr>
+      )}
+      {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 (
+          <React.Fragment key={details.id}>
+            <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
+                    textAlign={colDef.align ?? "left"}
+                    key={colDef.id || colDefIndex}
+                    as={colDef.isRowHeader ? "th" : "td"}
+                    isSticky={isSticky}
+                    data-nested={renderNestedIndent || undefined}
+                    style={style}
+                  >
+                    {renderNestedToggle && (
+                      <DataTableSubRowToggle details={details} />
+                    )}
+                    {colDef.cell(rowData)}
+                  </DataTableBaseCell>
+                );
+              })}
+            </DataTableTr>
+            <DataTableDetailsPanelRow rowId={details.id} rowData={rowData} />
+          </React.Fragment>
+        );
+      })}
+    </>
+  );
+}
+
+const DataTable = forwardRef(DataTableInner) as <T>(
+  props: DataTableProps<T> & React.RefAttributes<HTMLTableElement>,
+) => React.ReactElement | null;
+
+export { DataTable };
+export type { DataTableProps };
 export default DataTable;
-export type {
-  DataTableCaptionProps,
-  DataTableEmptyStateProps,
-  DataTableLoadingStateProps,
-  DataTableProps,
-  DataTableTbodyProps,
-  DataTableTdProps,
-  DataTableTfootProps,
-  DataTableTheadProps,
-  DataTableThProps,
-  DataTableTrProps,
-};