@navikt/ds-react 8.10.4 → 8.10.6

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

@@ -8,35 +8,37 @@ import type {
   SelectionProps,
   TableSelection,
 } from "../helpers/selection/selection.types";
+import type { TableRowEntryId } from "../root/DataTable.types";
+import type { UseTableItemsReturn } from "./useTableItems";
 
-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 UseTableSelectionArgs<T> = {
+  selection?: SelectionProps<T>;
+  tableItems: UseTableItemsReturn<T>;
 };
 
 type UseTableSelectionReturn = {
   selection: TableSelection;
   renderSelection: boolean;
-  disableRowSelectionOnClick: boolean;
+  selectionTrigger: "row" | "control";
 };
 
-function useTableSelection({
-  selection = {},
-  visibleRowIds = [],
-  childRowIdsById,
-}: UseTableSelectionArgs): UseTableSelectionReturn {
+function useTableSelection<T>({
+  selection = {
+    selectionMode: "none",
+  },
+  tableItems,
+}: UseTableSelectionArgs<T>): UseTableSelectionReturn {
   const {
-    selectionMode = "none",
+    selectionMode,
     defaultSelectedKeys,
     selectedKeys: selectedKeysProp,
     onSelectionChange,
-    disabledSelectionKeys = [],
-    disableRowSelectionOnClick = false,
+    enableRowSelection,
+    selectionTrigger = "row",
   } = selection;
 
+  const { visibleRowIds = [] } = tableItems;
+
   const radioGroupName = useId();
 
   const [selectedKeys, setSelectedKeys] = useControllableState<SelectedKeysT>({
@@ -47,17 +49,12 @@ function useTableSelection({
 
   const selectedKeysSet = useMemo(() => new Set(selectedKeys), [selectedKeys]);
 
-  const disabledKeysSet = useMemo(
-    () => new Set(disabledSelectionKeys),
-    [disabledSelectionKeys],
-  );
-
   const isRowSelected = useCallback(
-    (rowId: string | number) => selectedKeysSet.has(rowId),
+    (rowId: TableRowEntryId) => selectedKeysSet.has(rowId),
     [selectedKeysSet],
   );
 
-  const baseSelection = { selectedKeys, disabledSelectionKeys, isRowSelected };
+  const baseSelection = { selectedKeys, isRowSelected };
 
   if (selectionMode === "none") {
     return {
@@ -66,7 +63,7 @@ function useTableSelection({
         ...baseSelection,
         selectedKeys: [],
       },
-      disableRowSelectionOnClick,
+      selectionTrigger,
       renderSelection: false,
     };
   }
@@ -79,11 +76,11 @@ function useTableSelection({
         ...getSingleSelectProps({
           selectedKeysSet,
           setSelectedKeys,
-          disabledKeysSet,
           name: radioGroupName,
+          enableRowSelection,
         }),
       },
-      disableRowSelectionOnClick,
+      selectionTrigger,
       renderSelection: visibleRowIds.length !== 0,
     };
   }
@@ -96,12 +93,11 @@ function useTableSelection({
         selectedKeysSet,
         selectedKeys,
         setSelectedKeys,
-        disabledKeysSet,
-        visibleRowIds,
-        childRowIdsById,
+        enableRowSelection,
+        tableItems,
       }),
     },
-    disableRowSelectionOnClick,
+    selectionTrigger,
     renderSelection: visibleRowIds.length !== 0,
   };
 }
@@ -113,10 +109,9 @@ const noSelectionState: UseTableSelectionReturn = {
   selection: {
     selectionMode: "none",
     selectedKeys: [],
-    disabledSelectionKeys: [],
     isRowSelected: () => false,
   },
-  disableRowSelectionOnClick: false,
+  selectionTrigger: "row",
   renderSelection: false,
 };
 

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

@@ -1,4 +1,5 @@
 import { useCallback } from "react";
+import { consoleWarning } from "../../../utils/helpers/consoleWarning";
 import { useControllableState } from "../../../utils/hooks";
 import type { SortChangeDetail, SortEntry } from "../root/DataTable.types";
 
@@ -40,22 +41,22 @@ type UseTableSortResults = {
   sortState: SortEntry[];
 };
 
-function useTableSort(options: TableSortOptions): UseTableSortResults {
-  const { defaultSort = [], onSortChange, sort: sortOption } = options;
+function useTableSort(options?: TableSortOptions): UseTableSortResults {
+  const { defaultSort, onSortChange, sort: sortOption } = options || {};
 
   const [sort, setSort] = useControllableState({
     value: sortOption,
-    defaultValue: defaultSort,
+    defaultValue: defaultSort || [],
   });
 
   const handleSortClick = useCallback(
     (id: string, event: React.MouseEvent<HTMLElement, MouseEvent>) => {
       if (id === undefined) {
-        if (process.env.NODE_ENV === "development") {
-          console.warn(
-            `Aksel: Column id is undefined for sort event on target ${event.target}. Make sure your column definitions include an 'id' property.`,
-          );
-        }
+        consoleWarning(
+          "DataTable: Column id is undefined for sort event on target",
+          event.target,
+          "Make sure your column definitions include an 'id' property.",
+        );
         return;
       }
 
@@ -100,4 +101,4 @@ function nextSortEntries(
 }
 
 export { useTableSort };
-export type { TableSortOptions };
+export type { TableSortOptions, UseTableSortResults };

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

@@ -1,4 +1,4 @@
-import type { ResizeProps } from "../column-header/useTableColumnResize";
+import type { DataTableColumnHeaderProps } from "../column-header/DataTableColumnHeader";
 
 type SortDirection = "asc" | "desc" | "none";
 
@@ -7,35 +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, DetailsT = Record<string, any>> = Pick<
-  ResizeProps,
-  | "resizable"
-  | "width"
-  | "defaultWidth"
-  | "autoWidth"
-  | "minWidth"
-  | "maxWidth"
-  | "onWidthChange"
-> & {
+type ColumnDefinition<T> = {
   id: string;
   /**
    * Text alignment for cells in this column.
    *
-   *
    * @default "left"
    */
-  align?: "left" | "right" | "center";
+  align?: "left" | "right" | "center"; // TODO: Pri zero: Use same name as in DataTableColumnHeaderProps (DataTableBaseCellProps) so that we can just Pick<DataTableColumnHeaderProps, "textAlign">
   /**
    * 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.
+   * TODO: Better documentation, consider warning if not one column has this set to true.
    */
   isRowHeader?: boolean;
   /**
    * Renders table header-cell
+   * TODO: Pri zero rename to headerCell
    */
   header?: React.ReactNode;
   /**
@@ -44,6 +33,7 @@ type ColumnDefinition<T, DetailsT = Record<string, any>> = Pick<
   cell: (item: T) => React.ReactNode;
   /**
    * Label of header. Renders if header is not provided.
+   * TODO: Pri zero consider renaming to header
    */
   label: string;
   /**
@@ -51,16 +41,9 @@ type ColumnDefinition<T, DetailsT = Record<string, any>> = Pick<
    * 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;
-};
+} & Pick<DataTableColumnHeaderProps, "width">;
 
-type ColumnDefinitions<T, DetailsT = Record<string, any>> = ColumnDefinition<
-  T,
-  DetailsT
->[];
+type ColumnDefinitions<T> = ColumnDefinition<T>[];
 
 /**
  * A single sort entry representing a column's current sort state.
@@ -81,10 +64,32 @@ type SortChangeDetail = {
   direction: "asc" | "desc" | "none";
 };
 
+type DataTableLoadingConfig = {
+  isLoading?: boolean;
+} & (
+  | {
+      variant: "content";
+      content: React.ReactNode;
+    }
+  | {
+      variant: "skeleton";
+      rows?: number;
+      label?: string;
+    }
+  | {
+      variant: "overlay";
+      label?: string;
+    }
+);
+
+type TableRowEntryId = string;
+
 export type {
   ColumnDefinition,
   ColumnDefinitions,
+  DataTableLoadingConfig,
   SortDirection,
   SortEntry,
   SortChangeDetail,
+  TableRowEntryId,
 };

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

@@ -1,27 +1,39 @@
 import { createStrictContext } from "../../../utils/helpers";
-import type { UseColumnOptionsResult } from "../hooks/useColumnOptions";
+import type {
+  StickyStartState,
+  UseColumnOptionsResult,
+} from "../hooks/useColumnOptions";
+import type { UseTableItemsReturn } from "../hooks/useTableItems";
 import type { UseTableSelectionReturn } from "../hooks/useTableSelection";
+import type { UseTableSortResults } from "../hooks/useTableSort";
+import type {
+  DataTableLoadingConfig,
+  TableRowEntryId,
+} from "./DataTable.types";
 
 type DataTableContextProps<T> = {
   layout: "fixed" | "auto";
   withKeyboardNav: boolean;
   selectionState: UseTableSelectionReturn;
-  stickySelection: boolean;
+  stickyStart: StickyStartState;
   stickyHeader: boolean;
   tableId: string;
-  showLoadingSkeletons: boolean;
+  loading: DataTableLoadingConfig | undefined;
   onRowClick?: (
-    rowId: string | number,
+    rowId: TableRowEntryId,
     event: React.MouseEvent<HTMLTableRowElement>,
   ) => void;
-  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;
+  totalColSpan: number;
+  /**
+   * The current items and related metadata.
+   */
+  tableItems: UseTableItemsReturn<T>;
+  sortingState: UseTableSortResults;
 };
 
 const { Provider: DataTableContextProvider, useContext: useDataTableContext } =

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

@@ -37,8 +37,7 @@ import {
 import { DataTableTr, type DataTableTrProps } from "../tr/DataTableTr";
 import { DataTableContextProvider } from "./DataTableRoot.context";
 
-interface DataTableProps
-  extends React.HTMLAttributes<HTMLTableElement>, SelectionProps {
+interface DataTableProps extends React.HTMLAttributes<HTMLTableElement> {
   children: React.ReactNode;
   /**
    * Controls vertical cell padding.
@@ -62,12 +61,6 @@ interface DataTableProps
    * @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.
    *
@@ -83,6 +76,7 @@ interface DataTableProps
    * @default "fixed"
    */
   layout?: "fixed" | "auto";
+  selection?: SelectionProps;
 }
 
 interface DataTableRootComponent extends React.ForwardRefExoticComponent<
@@ -212,7 +206,6 @@ const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
       withKeyboardNav = false,
       zebraStripes = false,
       truncateContent = true,
-      shouldBlockNavigation,
       layout = "fixed",
       ...rest
     },
@@ -220,7 +213,6 @@ const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
   ) => {
     const { tabIndex, setTableRef } = useTableKeyboardNav({
       enabled: withKeyboardNav,
-      shouldBlockNavigation,
     });
 
     const mergedRef = useMergeRefs(forwardedRef, setTableRef);
@@ -230,14 +222,30 @@ const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
         layout={layout}
         withKeyboardNav={withKeyboardNav}
         selectionState={noSelectionState}
-        stickySelection={false}
+        stickyStart={{
+          expansion: false,
+          selection: false,
+          selectionOffset: 0,
+          firstColumnOffset: 0,
+        }}
         stickyHeader={true}
         tableId={useId()}
-        showLoadingSkeletons={false}
+        loading={undefined}
         onRowClick={undefined}
-        showLoadingOverlay={false}
         columns={[]}
-        fullWidthColSpan={9999}
+        totalColSpan={9999}
+        tableItems={{
+          childRowIdsById: new Map(),
+          visibleRowIds: [],
+          itemDetails: new Map(),
+          items: [],
+          isSubRowExpanded: () => false,
+          onExpandedRowIdsChange: () => null,
+        }}
+        sortingState={{
+          onSortClick: () => null,
+          sortState: [],
+        }}
       >
         <DataTableDetailsPanelProvider>
           <div className="aksel-data-table__border-wrapper">