@navikt/ds-react 8.10.5 → 8.11.0

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

@@ -2,39 +2,58 @@ import { useMemo } from "react";
 import type {
   ColumnDefinition,
   ColumnDefinitions,
-} from "../root/DataTable.types";
-import type { SelectionProps } from "./useTableSelection";
+} from "../root/DataGridTable.types";
+import { ACTION_CELL_WIDTH } from "../tr/DataTableTr";
 
 type UseColumnOptions = {
   stickyColumns?: {
-    first?: "1";
-    last?: "1";
+    start?: 1;
+    end?: 1;
   };
-  selectionMode: SelectionProps["selectionMode"];
+  hasSelection: boolean;
+  hasDetailsPanel: boolean;
+  layout: "fixed" | "auto";
+};
+
+type StickyStartState = {
+  selection: boolean;
+  expansion: boolean;
+  selectionOffset: number;
+  firstColumnOffset: number;
 };
 
 type UseColumnOptionsResult<T> = {
   columns: {
     isSticky: "start" | "end" | false;
+    isStickyLast?: boolean;
+    stickyLeftOffset?: number;
     colDef: ColumnDefinition<T>;
   }[];
-  stickySelection: boolean;
+  stickyStart: StickyStartState;
+  totalColSpan: number;
 };
 
 function useColumnOptions<T>(
   columnDefinitions: ColumnDefinitions<T>,
   options: UseColumnOptions,
 ): UseColumnOptionsResult<T> {
-  const { stickyColumns, selectionMode } = options;
+  const { stickyColumns, hasSelection, hasDetailsPanel, layout } = options;
+
+  const hasStickyStart = stickyColumns?.start === 1;
 
-  const hasSelection = selectionMode !== "none";
+  const stickyExpansion = hasStickyStart && hasDetailsPanel;
+  const stickySelection = hasStickyStart && hasSelection;
+
+  const stickySelectionOffset = stickyExpansion ? ACTION_CELL_WIDTH : 0;
+  const stickyFirstColumnOffset =
+    (stickyExpansion ? ACTION_CELL_WIDTH : 0) +
+    (stickySelection ? ACTION_CELL_WIDTH : 0);
 
   const columns = useMemo(() => {
     return columnDefinitions.map((colDef, index) => {
-      const isFirstSticky =
-        stickyColumns?.first === "1" && index === 0 && !hasSelection;
+      const isFirstSticky = hasStickyStart && index === 0;
       const isLastSticky =
-        stickyColumns?.last === "1" && index === columnDefinitions.length - 1;
+        stickyColumns?.end === 1 && index === columnDefinitions.length - 1;
 
       return {
         isSticky: isFirstSticky
@@ -42,21 +61,36 @@ function useColumnOptions<T>(
           : isLastSticky
             ? ("end" as const)
             : (false as const),
+        isStickyLast: isFirstSticky && !isLastSticky,
+        stickyLeftOffset: isFirstSticky ? stickyFirstColumnOffset : undefined,
         colDef,
       };
     });
   }, [
     columnDefinitions,
-    hasSelection,
-    stickyColumns?.first,
-    stickyColumns?.last,
+    hasStickyStart,
+    stickyColumns,
+    stickyFirstColumnOffset,
   ]);
 
+  const totalColSpan =
+    columns.length +
+    (layout === "fixed" ? 1 : 0) +
+    (hasSelection ? 1 : 0) +
+    (hasDetailsPanel ? 1 : 0);
+
   return {
-    stickySelection: selectionMode !== "none" && stickyColumns?.first === "1",
+    stickyStart: {
+      selection: stickySelection,
+      expansion: stickyExpansion,
+      selectionOffset: stickySelectionOffset,
+      firstColumnOffset: stickyFirstColumnOffset,
+    },
     columns,
+    totalColSpan,
   };
 }
 
 export { useColumnOptions };
+export type { StickyStartState };
 export type { UseColumnOptionsResult };

package/src/data/table/hooks/useTableDetailsPanel.tsx

@@ -1,14 +1,14 @@
 import React, { useCallback } from "react";
 import { createStrictContext } from "../../../utils/helpers";
 import { useControllableState } from "../../../utils/hooks";
-import { useTableItemsContext } from "./useTableItems";
+import { useDataTableContext } from "../root/DataTableRoot.context";
 
 type DetailsPanelProps<T> = {
   /**
-   * Renders a details panel below the row when expanded.
+   * Function to get the content to show in the details panel for a given row.
    * When provided, an expand toggle column is added automatically.
    */
-  getContent?: (rowData: T) => React.ReactNode;
+  getContent: (rowData: T) => React.ReactNode;
   /**
    * Determines whether a row can be expanded to show details panel content.
    * @default () => true
@@ -16,22 +16,18 @@ type DetailsPanelProps<T> = {
   isRowExpandable?: (rowData: T) => boolean;
   /**
    * Controlled list of expanded row IDs.
-   * Use with `onDetailsPanelChange` for controlled usage, or `defaultDetailsPanelRowIds` for uncontrolled.
+   * Use with `onExpandedRowIdsChange` for controlled usage, or `defaultExpandedRowIds` for uncontrolled.
    */
-  expandedRowIds?: (string | number)[];
+  expandedRowIds?: string[];
   /**
    * Initial list of expanded row IDs for uncontrolled usage.
    * @default []
    */
-  defaultExpandedRowIds?: (string | number)[];
+  defaultExpandedRowIds?: string[];
   /**
    * 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;
+  onExpandedRowIdsChange?: (ids: string[]) => void; // TODO: Docs: This pattern is called "Master / Detail" in general terms
   /**
    * 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.
@@ -46,9 +42,9 @@ type DetailsPanelProps<T> = {
 };
 
 type DataTableDetailsPanelContextT = {
-  isExpanded: (id: string | number) => boolean;
-  isDetailsPanelExpandable: (id: string | number) => boolean;
-  toggleExpansion: (id: string | number) => void;
+  isExpanded: (id: string) => boolean;
+  isDetailsPanelExpandable: (id: string) => boolean;
+  toggleExpansion: (id: string) => void;
   toggleAll: () => void;
   isAllExpanded: boolean;
   getDetailsPanelContent?: (row: unknown) => React.ReactNode;
@@ -68,7 +64,7 @@ const {
 
 function DataTableDetailsPanelProvider<T>({
   children,
-  detailsPanel = {},
+  detailsPanel,
 }: { detailsPanel?: DetailsPanelProps<T> } & { children: React.ReactNode }) {
   const {
     expandedRowIds,
@@ -78,7 +74,7 @@ function DataTableDetailsPanelProvider<T>({
     isRowExpandable,
     getHeight,
     showExpandAll = false,
-  } = detailsPanel;
+  } = detailsPanel || {};
 
   const [expandedIds, setExpandedIds] = useControllableState({
     value: expandedRowIds,
@@ -87,21 +83,18 @@ function DataTableDetailsPanelProvider<T>({
   });
 
   /* TODO: False is just fallback until auto and root is merged */
-  const tableItemsContext = useTableItemsContext(false);
+  const tableContext = useDataTableContext(false);
 
-  const { itemDetails } = tableItemsContext ?? {
-    itemDetails: new Map<
-      string | number,
-      { rowData: T; id: string | number; level: number }
-    >(),
+  const { itemDetails } = tableContext?.tableItems ?? {
+    itemDetails: new Map<string, { rowData: T; id: string; level: number }>(),
   };
 
   const expandableIds = React.useMemo(() => {
     if (!getContent) {
-      return new Set<string | number>();
+      return new Set<string>();
     }
 
-    const ids = new Set<string | number>();
+    const ids = new Set<string>();
 
     for (const { rowData, id, level } of itemDetails.values()) {
       /* We only allow Master - Details pattern on top level rows */
@@ -118,18 +111,18 @@ function DataTableDetailsPanelProvider<T>({
   }, [getContent, isRowExpandable, itemDetails]);
 
   const isDetailsPanelExpandableById = useCallback(
-    (id: string | number) => expandableIds.has(id),
+    (id: string) => expandableIds.has(id),
     [expandableIds],
   );
 
   const isExpanded = useCallback(
-    (id: string | number) =>
+    (id: string) =>
       isDetailsPanelExpandableById(id) && expandedIds.includes(id),
     [expandedIds, isDetailsPanelExpandableById],
   );
 
   const toggleExpansion = useCallback(
-    (id: string | number) => {
+    (id: string) => {
       if (!isDetailsPanelExpandableById(id)) {
         return;
       }
@@ -172,7 +165,7 @@ function DataTableDetailsPanelProvider<T>({
   );
 }
 
-function getDataTableDetailsPanelId(tableId: string, rowId: string | number) {
+function getDataTableDetailsPanelId(tableId: string, rowId: string) {
   return `${tableId}-expansion-${rowId}`;
 }
 

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

@@ -1,39 +1,54 @@
 import { useCallback, useMemo } from "react";
-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)[];
+  /**
+   * Function to get sub-rows for a given row.
+   */
+  getRows: (rowData: T) => T[];
+  /**
+   * Controlled list of IDs of rows that should be expanded.
+   */
+  expandedRowIds?: string[];
+  /**
+   * IDs of rows that should be initially expanded.
+   * Only used when `expandedRowIds` is not provided, i.e. when the expanded state is uncontrolled.
+   */
+  defaultExpandedRowIds?: string[];
+  /**
+   * Called when the list of expanded row IDs changes.
+   */
+  onExpandedRowIdsChange?: (ids: string[]) => void;
+  /**
+   * Determines whether a row should be expandable.
+   * By default, all rows are expandable when `getRows` is provided.
+   */
   isRowExpandable?: (rowData: T) => boolean;
-  onExpandedRowIdsChange?: (ids: (string | number)[]) => void;
 };
 
 type UseTableItemsArgs<T> = {
   items: T[];
-  getRowId?: (rowData: T) => TableRowEntryId;
+  getRowId?: (rowData: T) => string;
   subRows?: SubRowsProps<T>;
 };
 
-type useTableItemsReturn<T> = {
+type UseTableItemsReturn<T> = {
   items: T[];
-  itemDetails: Map<TableRowEntryId, ItemDetail<T>>;
+  itemDetails: Map<string, ItemDetail<T>>;
   /** Row ids for the rows currently rendered in the table body. */
-  visibleRowIds: TableRowEntryId[];
+  visibleRowIds: string[];
   /** 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;
+  childRowIdsById: Map<string, string[]>;
+  onExpandedRowIdsChange: (id: string) => void;
+  isSubRowExpanded: (id: string) => boolean;
 };
 
-function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
-  const { items, subRows = {}, getRowId } = args;
+function useTableItems<T>(args: UseTableItemsArgs<T>): UseTableItemsReturn<T> {
+  const { items, subRows, getRowId } = args;
 
   const {
     expandedRowIds,
@@ -41,7 +56,7 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
     getRows,
     onExpandedRowIdsChange,
     isRowExpandable,
-  } = subRows;
+  } = subRows || {};
 
   const [nestedSubRowsExpandedIds, setNestedSubRowsExpandedIds] =
     useControllableState({
@@ -69,9 +84,9 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
       });
 
       const localVisibleItems: T[] = [];
-      const localVisibleRowIds: TableRowEntryId[] = [];
+      const localVisibleRowIds: string[] = [];
 
-      const addVisibleRows = (rowId: TableRowEntryId): TableRowEntryId[] => {
+      const addVisibleRows = (rowId: string): string[] => {
         const details = rowEntriesMap.get(rowId);
 
         if (!details) {
@@ -81,7 +96,7 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
         localVisibleItems.push(details.rowData);
         localVisibleRowIds.push(details.id);
 
-        const visibleDescendantRowIds: TableRowEntryId[] = [];
+        const visibleDescendantRowIds: string[] = [];
 
         if (expandedIdsSet.has(details.id)) {
           for (const childRowId of details.children) {
@@ -106,7 +121,7 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
     }, [getRows, items, getRowId, isRowExpandable, expandedIdsSet]);
 
   const handleExpandedSubRowIdChange = useCallback(
-    (id: string | number) => {
+    (id: string) => {
       setNestedSubRowsExpandedIds((prev) =>
         prev.includes(id)
           ? prev.filter((expandedId) => expandedId !== id)
@@ -116,23 +131,30 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
     [setNestedSubRowsExpandedIds],
   );
 
-  return {
-    items: visibleItems,
-    itemDetails,
-    visibleRowIds,
-    childRowIdsById,
-    onExpandedRowIdsChange: handleExpandedSubRowIdChange,
-    isSubRowExpanded: (id: string | number) => expandedIdsSet.has(id),
-  };
-}
+  const isSubRowExpanded = useCallback(
+    (id: string) => expandedIdsSet.has(id),
+    [expandedIdsSet],
+  );
 
-const { Provider: TableItemsProvider, useContext: useTableItemsContext } =
-  /* TODO: Can we type this better? */
-  createStrictContext<Omit<useTableItemsReturn<any>, "childRowIdsById">>({
-    name: "TableItemsContext",
-    errorMessage:
-      "useTableItemsContext must be used within a TableItemsProvider",
-  });
+  return useMemo(
+    () => ({
+      items: visibleItems,
+      itemDetails,
+      visibleRowIds,
+      childRowIdsById,
+      onExpandedRowIdsChange: handleExpandedSubRowIdChange,
+      isSubRowExpanded,
+    }),
+    [
+      visibleItems,
+      itemDetails,
+      visibleRowIds,
+      childRowIdsById,
+      handleExpandedSubRowIdChange,
+      isSubRowExpanded,
+    ],
+  );
+}
 
-export { useTableItems, TableItemsProvider, useTableItemsContext };
-export type { ItemDetail, SubRowsProps };
+export { useTableItems };
+export type { ItemDetail, SubRowsProps, UseTableItemsReturn };

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

@@ -18,17 +18,9 @@ import { useGridCache } from "./useGridCache";
 
 type UseTableKeyboardNavOptions = {
   enabled: boolean;
-  /**
-   * Custom callback to determine if navigation should be blocked.
-   * Called before default blocking logic.
-   */
-  shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
 };
 
-function useTableKeyboardNav({
-  enabled,
-  shouldBlockNavigation: customBlockFn,
-}: UseTableKeyboardNavOptions) {
+function useTableKeyboardNav({ enabled }: UseTableKeyboardNavOptions) {
   const [tableRef, setTableRef] = useState<HTMLTableElement | null>(null);
   const { getTableGrid, activeCell, setActiveCell } = useGridCache(
     tableRef,
@@ -110,10 +102,6 @@ function useTableKeyboardNav({
    * Checks if navigation should be blocked based on current focus context.
    */
   const handleTableKeyDown = useEventCallback((event: KeyboardEvent): void => {
-    if (customBlockFn?.(event)) {
-      return;
-    }
-
     const action = getNavigationAction(event);
     if (!action) {
       return;

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

@@ -1,109 +1,122 @@
 import { useCallback, useMemo } from "react";
+import { useDataGridContext } from "../../../data-grid/root/DataGridRoot.context";
 import { useId } from "../../../utils-external";
 import { useControllableState } from "../../../utils/hooks";
 import { getMultipleSelectProps } from "../helpers/selection/getMultipleSelectProps";
 import { getSingleSelectProps } from "../helpers/selection/getSingleSelectProps";
 import type {
-  SelectedKeysT,
   SelectionProps,
   TableSelection,
 } from "../helpers/selection/selection.types";
+import type { TableRowEntryId } from "../root/DataGridTable.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>;
+  selectionTrigger: "row" | "control";
+  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 = {
+    mode: "none",
+  },
+  selectionTrigger = "row",
+  tableItems,
+}: UseTableSelectionArgs<T>): UseTableSelectionReturn {
+  const { isLoading } = useDataGridContext();
   const {
-    selectionMode = "none",
-    defaultSelectedKeys,
-    selectedKeys: selectedKeysProp,
-    onSelectionChange,
-    disabledSelectionKeys = [],
-    disableRowSelectionOnClick = false,
+    mode,
+    defaultSelectedRowIds,
+    selectedRowIds: selectedRowIdsProp,
+    onSelectedRowIdsChange,
+    enableRowSelection,
   } = selection;
 
+  const { visibleRowIds = [] } = tableItems;
+
   const radioGroupName = useId();
 
-  const [selectedKeys, setSelectedKeys] = useControllableState<SelectedKeysT>({
-    value: selectionMode !== "none" ? selectedKeysProp : undefined,
-    defaultValue: defaultSelectedKeys ?? [],
-    onChange: onSelectionChange,
+  const [selectedKeys, setSelectedKeys] = useControllableState<string[]>({
+    value: mode !== "none" ? selectedRowIdsProp : undefined,
+    defaultValue: defaultSelectedRowIds ?? [],
+    onChange: onSelectedRowIdsChange,
   });
 
   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 };
+  return useMemo(() => {
+    const baseSelection = { selectedKeys, isRowSelected };
 
-  if (selectionMode === "none") {
-    return {
-      selection: {
-        selectionMode,
-        ...baseSelection,
-        selectedKeys: [],
-      },
-      disableRowSelectionOnClick,
-      renderSelection: false,
-    };
-  }
+    if (mode === "none") {
+      return {
+        selection: {
+          mode,
+          ...baseSelection,
+          selectedKeys: [],
+        },
+        selectionTrigger,
+        renderSelection: false,
+      };
+    }
+
+    if (mode === "single") {
+      return {
+        selection: {
+          mode,
+          ...baseSelection,
+          ...getSingleSelectProps({
+            selectedKeysSet,
+            setSelectedKeys,
+            name: radioGroupName,
+            enableRowSelection,
+          }),
+        },
+        selectionTrigger,
+        renderSelection: visibleRowIds.length !== 0,
+      };
+    }
 
-  if (selectionMode === "single") {
     return {
       selection: {
-        selectionMode,
+        mode,
         ...baseSelection,
-        ...getSingleSelectProps({
+        ...getMultipleSelectProps({
           selectedKeysSet,
+          selectedKeys,
           setSelectedKeys,
-          disabledKeysSet,
-          name: radioGroupName,
+          enableRowSelection,
+          tableItems,
+          isLoading,
         }),
       },
-      disableRowSelectionOnClick,
+      selectionTrigger,
       renderSelection: visibleRowIds.length !== 0,
     };
-  }
-
-  return {
-    selection: {
-      selectionMode,
-      ...baseSelection,
-      ...getMultipleSelectProps({
-        selectedKeysSet,
-        selectedKeys,
-        setSelectedKeys,
-        disabledKeysSet,
-        visibleRowIds,
-        childRowIdsById,
-      }),
-    },
-    disableRowSelectionOnClick,
-    renderSelection: visibleRowIds.length !== 0,
-  };
+  }, [
+    mode,
+    selectedKeys,
+    selectedKeysSet,
+    isRowSelected,
+    selectionTrigger,
+    visibleRowIds,
+    setSelectedKeys,
+    radioGroupName,
+    enableRowSelection,
+    tableItems,
+    isLoading,
+  ]);
 }
 
 /**
@@ -111,12 +124,11 @@ function useTableSelection({
  */
 const noSelectionState: UseTableSelectionReturn = {
   selection: {
-    selectionMode: "none",
+    mode: "none",
     selectedKeys: [],
-    disabledSelectionKeys: [],
     isRowSelected: () => false,
   },
-  disableRowSelectionOnClick: false,
+  selectionTrigger: "row",
   renderSelection: false,
 };