@navikt/ds-react 8.9.0 → 8.10.0

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

@@ -4,7 +4,10 @@ import type {
   MultipleSelection,
   SingleSelection,
 } from "../../helpers/selection/selection.types";
-import { useTableSelection } from "../useTableSelection";
+import {
+  type UseTableSelectionReturn,
+  useTableSelection,
+} from "../useTableSelection";
 
 type Item = { id: string; name: string };
 
@@ -14,18 +17,18 @@ const items: Item[] = [
   { id: "c", name: "Charlie" },
 ];
 
-const getRowId = (item: Item) => item.id;
+const allRowKeys = items.map((item) => item.id);
 
-function asSingle(
-  result: ReturnType<typeof renderHook>["result"],
-): SingleSelection {
-  return result.current as SingleSelection;
+function asSingle(result: {
+  current: UseTableSelectionReturn;
+}): SingleSelection {
+  return result.current.selection as SingleSelection;
 }
 
-function asMultiple(
-  result: ReturnType<typeof renderHook>["result"],
-): MultipleSelection {
-  return result.current as MultipleSelection;
+function asMultiple(result: {
+  current: UseTableSelectionReturn;
+}): MultipleSelection {
+  return result.current.selection as MultipleSelection;
 }
 
 describe("useTableSelection", () => {
@@ -34,14 +37,12 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "none",
-          data: items,
-          getRowId,
+          allRowKeys,
         }),
       );
 
-      expect(result.current.selectionMode).toBe("none");
-      expect(result.current.selectedKeys).toEqual([]);
-      expect(result.current.allKeys).toEqual(["a", "b", "c"]);
+      expect(result.current.selection.selectionMode).toBe("none");
+      expect(result.current.selection.selectedKeys).toEqual([]);
     });
   });
 
@@ -50,12 +51,11 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "single",
-          data: items,
-          getRowId,
+          allRowKeys,
         }),
       );
 
-      expect(result.current.selectionMode).toBe("single");
+      expect(result.current.selection.selectionMode).toBe("single");
       expect(asSingle(result).getRowRadioProps).toBeDefined();
     });
 
@@ -64,8 +64,7 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "single",
-          data: items,
-          getRowId,
+          allRowKeys,
           onSelectionChange: onChange,
         }),
       );
@@ -80,12 +79,11 @@ describe("useTableSelection", () => {
       expect(asSingle(result).selectedKeys).toEqual(["a"]);
     });
 
-    test("toggling the same row deselects it", () => {
+    test("toggling the same row keeps it selected", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "single",
-          data: items,
-          getRowId,
+          allRowKeys,
           defaultSelectedKeys: ["a"],
         }),
       );
@@ -96,15 +94,14 @@ describe("useTableSelection", () => {
           .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
       });
 
-      expect(asSingle(result).selectedKeys).toEqual([]);
+      expect(asSingle(result).selectedKeys).toEqual(["a"]);
     });
 
     test("selecting a new row replaces the previous", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "single",
-          data: items,
-          getRowId,
+          allRowKeys,
           defaultSelectedKeys: ["a"],
         }),
       );
@@ -122,9 +119,8 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "single",
-          data: items,
-          getRowId,
-          disabledKeys: ["b"],
+          allRowKeys,
+          disabledSelectionKeys: ["b"],
         }),
       );
 
@@ -137,8 +133,7 @@ describe("useTableSelection", () => {
         ({ selectedKeys }) =>
           useTableSelection({
             selectionMode: "single",
-            data: items,
-            getRowId,
+            allRowKeys,
             selectedKeys,
           }),
         { initialProps: { selectedKeys: ["a"] as (string | number)[] } },
@@ -156,12 +151,11 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "multiple",
-          data: items,
-          getRowId,
+          allRowKeys,
         }),
       );
 
-      expect(result.current.selectionMode).toBe("multiple");
+      expect(result.current.selection.selectionMode).toBe("multiple");
       expect(asMultiple(result).getTheadCheckboxProps).toBeDefined();
       expect(asMultiple(result).getRowCheckboxProps).toBeDefined();
     });
@@ -170,8 +164,7 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "multiple",
-          data: items,
-          getRowId,
+          allRowKeys,
         }),
       );
 
@@ -196,8 +189,7 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "multiple",
-          data: items,
-          getRowId,
+          allRowKeys,
           defaultSelectedKeys: ["a", "b"],
         }),
       );
@@ -215,8 +207,7 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "multiple",
-          data: items,
-          getRowId,
+          allRowKeys,
         }),
       );
 
@@ -233,8 +224,7 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "multiple",
-          data: items,
-          getRowId,
+          allRowKeys,
           defaultSelectedKeys: ["a", "b", "c"],
         }),
       );
@@ -248,12 +238,48 @@ describe("useTableSelection", () => {
       expect(asMultiple(result).selectedKeys).toEqual([]);
     });
 
+    test("select all skips disabled keys", () => {
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selectionMode: "multiple",
+          allRowKeys,
+          disabledSelectionKeys: ["b"],
+        }),
+      );
+
+      act(() => {
+        asMultiple(result)
+          .getTheadCheckboxProps()
+          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
+      });
+
+      expect(asMultiple(result).selectedKeys).toEqual(["a", "c"]);
+    });
+
+    test("deselect all preserves disabled-but-selected rows", () => {
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selectionMode: "multiple",
+          allRowKeys,
+          defaultSelectedKeys: ["a", "b", "c"],
+          disabledSelectionKeys: ["b"],
+        }),
+      );
+
+      act(() => {
+        asMultiple(result)
+          .getTheadCheckboxProps()
+          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
+      });
+
+      expect(asMultiple(result).selectedKeys).toEqual(["b"]);
+    });
+
     test("thead checkbox shows indeterminate when partially selected", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "multiple",
-          data: items,
-          getRowId,
+          allRowKeys,
           defaultSelectedKeys: ["a"],
         }),
       );
@@ -267,8 +293,7 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "multiple",
-          data: items,
-          getRowId,
+          allRowKeys,
           defaultSelectedKeys: ["a", "b", "c"],
         }),
       );
@@ -278,13 +303,27 @@ describe("useTableSelection", () => {
       expect(theadProps.checked).toBe(true);
     });
 
-    test("deselecting one row when selectedKeys is 'all'", () => {
+    test("thead checkbox shows checked when all selectable rows are selected", () => {
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selectionMode: "multiple",
+          allRowKeys,
+          defaultSelectedKeys: ["a", "c"],
+          disabledSelectionKeys: ["b"],
+        }),
+      );
+
+      const theadProps = asMultiple(result).getTheadCheckboxProps();
+      expect(theadProps.indeterminate).toBe(false);
+      expect(theadProps.checked).toBe(true);
+    });
+
+    test("deselecting one row when all rows are selected", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "multiple",
-          data: items,
-          getRowId,
-          defaultSelectedKeys: "all",
+          allRowKeys,
+          defaultSelectedKeys: ["a", "b", "c"],
         }),
       );
 
@@ -301,9 +340,8 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "multiple",
-          data: items,
-          getRowId,
-          disabledKeys: ["b"],
+          allRowKeys,
+          disabledSelectionKeys: ["b"],
         }),
       );
 
@@ -315,9 +353,8 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "multiple",
-          data: items,
-          getRowId,
-          disabledKeys: ["a", "b", "c"],
+          allRowKeys,
+          disabledSelectionKeys: ["a", "b", "c"],
         }),
       );
 

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

@@ -0,0 +1,48 @@
+import type {
+  ColumnDefinition,
+  ColumnDefinitions,
+} from "../root/DataTable.types";
+import type { SelectionProps } from "./useTableSelection";
+
+type UseColumnOptions = {
+  stickyColumns?: {
+    first?: "1";
+    last?: "1";
+  };
+  selectionMode: SelectionProps["selectionMode"];
+};
+
+type UseColumnOptionsResult<T> = {
+  columns: {
+    isSticky: "start" | "end" | false;
+    colDef: ColumnDefinition<T>;
+  }[];
+  stickySelection: boolean;
+};
+
+function useColumnOptions<T>(
+  columnDefinitions: ColumnDefinitions<T>,
+  options: UseColumnOptions,
+): UseColumnOptionsResult<T> {
+  const { stickyColumns, selectionMode } = options;
+
+  const hasSelection = selectionMode !== "none";
+
+  return {
+    stickySelection: selectionMode !== "none" && stickyColumns?.first === "1",
+    columns: columnDefinitions.map((colDef, index) => {
+      const isFirstSticky =
+        stickyColumns?.first === "1" && index === 0 && !hasSelection;
+      const isLastSticky =
+        stickyColumns?.last === "1" && index === columnDefinitions.length - 1;
+
+      return {
+        isSticky: isFirstSticky ? "start" : isLastSticky ? "end" : false,
+        colDef,
+      };
+    }),
+  };
+}
+
+export { useColumnOptions };
+export type { UseColumnOptionsResult };

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

@@ -0,0 +1,100 @@
+import React, { useCallback } from "react";
+import { createStrictContext } from "../../../utils/helpers";
+import { useControllableState } from "../../../utils/hooks";
+
+type DataTableExpansionContextT = {
+  expandedIds: (string | number)[];
+  isExpanded: (id: string | number) => boolean;
+  toggleExpansion: (id: string | number) => void;
+  toggleAll: () => void;
+  isAllExpanded: boolean;
+  getDetailsPanelContent?: (row: unknown) => React.ReactNode;
+  getDetailsPanelHeight?: (row: unknown) => number | "auto";
+  showExpandAll?: boolean;
+  enableExpansion: boolean;
+};
+
+const {
+  Provider: DataTableExpansionContextProvider,
+  useContext: useDataTableExpansion,
+} = createStrictContext<DataTableExpansionContextT>({
+  name: "DataTableExpansionContext",
+  errorMessage:
+    "useDataTableExpansion must be used within a DataTableExpansionProvider.",
+});
+
+type TableExpansionOptions<T> = {
+  detailsPanelRowIds?: (string | number)[];
+  defaultDetailsPanelRowIds?: (string | number)[];
+  onDetailsPanelChange?: (ids: (string | number)[]) => void;
+  allRowKeys: (string | number)[];
+  getDetailsPanelContent?: (row: T) => React.ReactNode;
+  getDetailsPanelHeight?: (row: T) => number | "auto";
+  showExpandAll?: boolean;
+};
+
+function DataTableExpansionProvider<T>({
+  children,
+  detailsPanelRowIds,
+  defaultDetailsPanelRowIds = [],
+  onDetailsPanelChange,
+  allRowKeys,
+  getDetailsPanelContent,
+  getDetailsPanelHeight,
+  showExpandAll = false,
+}: TableExpansionOptions<T> & { children: React.ReactNode }) {
+  const [expandedIds, setExpandedIds] = useControllableState({
+    value: detailsPanelRowIds,
+    defaultValue: defaultDetailsPanelRowIds,
+  });
+
+  const isExpanded = useCallback(
+    (id: string | number) => expandedIds.includes(id),
+    [expandedIds],
+  );
+
+  const toggleExpansion = useCallback(
+    (id: string | number) => {
+      const next = expandedIds.includes(id)
+        ? expandedIds.filter((eid) => eid !== id)
+        : [...expandedIds, id];
+      setExpandedIds(next);
+      onDetailsPanelChange?.(next);
+    },
+    [expandedIds, setExpandedIds, onDetailsPanelChange],
+  );
+
+  const isAllExpanded =
+    allRowKeys.length > 0 &&
+    allRowKeys.every((key) => expandedIds.includes(key));
+
+  const toggleAll = useCallback(() => {
+    const next = isAllExpanded ? [] : [...allRowKeys];
+    setExpandedIds(next);
+    onDetailsPanelChange?.(next);
+  }, [isAllExpanded, allRowKeys, setExpandedIds, onDetailsPanelChange]);
+
+  return (
+    <DataTableExpansionContextProvider
+      expandedIds={expandedIds}
+      isExpanded={isExpanded}
+      toggleExpansion={toggleExpansion}
+      toggleAll={toggleAll}
+      isAllExpanded={isAllExpanded}
+      getDetailsPanelContent={
+        getDetailsPanelContent as
+          | ((row: unknown) => React.ReactNode)
+          | undefined
+      }
+      getDetailsPanelHeight={
+        getDetailsPanelHeight as ((row: unknown) => number | "auto") | undefined
+      }
+      showExpandAll={showExpandAll}
+      enableExpansion={!!getDetailsPanelContent}
+    >
+      {children}
+    </DataTableExpansionContextProvider>
+  );
+}
+
+export { DataTableExpansionProvider, useDataTableExpansion };

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

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useEventCallback } from "../../../utils/hooks";
 import { focusInitialTableTarget } from "../helpers/table-cell";
 import { focusCellAndUpdateTabIndex } from "../helpers/table-focus";
@@ -25,10 +25,11 @@ type UseTableKeyboardNavOptions = {
   shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
 };
 
-function useTableKeyboardNav(
-  tableRef: HTMLTableElement | null,
-  { enabled, shouldBlockNavigation: customBlockFn }: UseTableKeyboardNavOptions,
-) {
+function useTableKeyboardNav({
+  enabled,
+  shouldBlockNavigation: customBlockFn,
+}: UseTableKeyboardNavOptions) {
+  const [tableRef, setTableRef] = useState<HTMLTableElement | null>(null);
   const { getTableGrid, activeCell, setActiveCell } = useGridCache(
     tableRef,
     enabled,
@@ -173,6 +174,7 @@ function useTableKeyboardNav(
   return {
     /* Table should only have tabIndex until the focus is moved inside and is enabled */
     tabIndex: enabled ? (activeCell ? undefined : 0) : undefined,
+    setTableRef,
   };
 }
 

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

@@ -1,78 +1,109 @@
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
+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,
-  SelectionT,
   TableSelection,
 } from "../helpers/selection/selection.types";
 
-type UseTableSelectionArgs<T> = SelectionProps & {
-  data: T[];
-  getRowId: (rowData: T, index: number) => string | number;
+type UseTableSelectionArgs = SelectionProps & {
+  /* This is needed for multiple selection to know which keys to select when "select all" is used */
+  allRowKeys: (string | number)[];
 };
 
-function useTableSelection<T>({
+type UseTableSelectionReturn = {
+  selection: TableSelection;
+  renderSelection: boolean;
+};
+
+function useTableSelection({
   selectionMode = "none",
   defaultSelectedKeys,
   selectedKeys: selectedKeysProp,
   onSelectionChange,
-  disabledKeys = [],
-  data,
-  getRowId,
-}: UseTableSelectionArgs<T>): TableSelection {
-  const allKeys = useMemo(
-    () => data.map((item, index) => getRowId(item, index)),
-    [data, getRowId],
-  );
+  disabledSelectionKeys = [],
+  allRowKeys,
+}: UseTableSelectionArgs): UseTableSelectionReturn {
+  const radioGroupName = useId();
 
-  const [selectedKeys, setSelectedKeys] = useControllableState<SelectionT>({
+  const [selectedKeys, setSelectedKeys] = useControllableState<SelectedKeysT>({
     value: selectionMode !== "none" ? selectedKeysProp : undefined,
     defaultValue: defaultSelectedKeys ?? [],
     onChange: onSelectionChange,
   });
 
+  const selectedKeysSet = useMemo(() => new Set(selectedKeys), [selectedKeys]);
+
+  const disabledKeysSet = useMemo(
+    () => new Set(disabledSelectionKeys),
+    [disabledSelectionKeys],
+  );
+
+  const isRowSelected = useCallback(
+    (rowId: string | number) => selectedKeysSet.has(rowId),
+    [selectedKeysSet],
+  );
+
+  const baseSelection = { selectedKeys, disabledSelectionKeys, isRowSelected };
+
   if (selectionMode === "none") {
-    return { selectionMode, allKeys, selectedKeys: [], disabledKeys };
+    return {
+      selection: {
+        selectionMode,
+        ...baseSelection,
+        selectedKeys: [],
+      },
+      renderSelection: false,
+    };
   }
 
   if (selectionMode === "single") {
-    const arrayKeys = Array.isArray(selectedKeys) ? selectedKeys : [];
-    const { getRowRadioProps } = getSingleSelectProps({
-      selectedKeys: arrayKeys,
-      setSelectedKeys,
-      disabledKeys,
-    });
-
     return {
-      selectionMode,
-      allKeys,
-      selectedKeys: arrayKeys,
-      disabledKeys,
-      getRowRadioProps,
+      selection: {
+        selectionMode,
+        ...baseSelection,
+        ...getSingleSelectProps({
+          selectedKeysSet,
+          setSelectedKeys,
+          disabledKeysSet,
+          name: radioGroupName,
+        }),
+      },
+      renderSelection: allRowKeys.length !== 0,
     };
   }
 
-  const { getTheadCheckboxProps, getRowCheckboxProps } = getMultipleSelectProps(
-    {
-      selectedKeys,
-      setSelectedKeys,
-      disabledKeys,
-      allKeys,
-      totalCount: data.length,
-    },
-  );
-
   return {
-    selectionMode,
-    allKeys,
-    selectedKeys,
-    disabledKeys,
-    getTheadCheckboxProps,
-    getRowCheckboxProps,
+    selection: {
+      selectionMode,
+      ...baseSelection,
+      ...getMultipleSelectProps({
+        selectedKeysSet,
+        selectedKeys,
+        setSelectedKeys,
+        disabledKeysSet,
+        allRowKeys,
+      }),
+    },
+    renderSelection: allRowKeys.length !== 0,
   };
 }
 
-export { useTableSelection };
-export type { SelectionProps, SelectionT };
+/**
+ * TODO: Only temp needed to keep Root happy
+ */
+const noSelectionState: UseTableSelectionReturn = {
+  selection: {
+    selectionMode: "none",
+    selectedKeys: [],
+    disabledSelectionKeys: [],
+    isRowSelected: () => false,
+  },
+  renderSelection: false,
+};
+
+export { useTableSelection, noSelectionState };
+export type { SelectionProps, UseTableSelectionReturn };