@navikt/ds-react 8.10.5 → 8.10.6

package/src/data/table/column-header/useTableColumnResize.ts

@@ -26,61 +26,51 @@ type ResizeProps = {
    * consider using `layout="auto"` on the root instead for better performance.
    *
    * **NB:** This can cause a layout shift. Set a good initial width with `width` or `defaultWidth` to mitigate this.
+   *
+   * **NB:** Does not work with block content.
    */
-  autoWidth?: boolean;
+  autoResizeOnce?: boolean;
   /**
-   * Minimum width of the column when resizing. Only used when `resizable` or `autoWidth` is enabled.
+   * Minimum width of the column when resizing. Only used when `resizable` or `autoResizeOnce` is enabled.
    * @default 40
    */
-  minWidth?: number;
+  resizeMin?: number;
   /**
-   * Maximum width of the column when resizing. Only used when `resizable` or `autoWidth` is enabled.
+   * Maximum width of the column when resizing. Only used when `resizable` or `autoResizeOnce` is enabled.
    */
-  maxWidth?: number;
+  resizeMax?: number;
   // TODO: Consider "allowing" %-width on last column, if we find a solution to the overflow issue (width becomes 0px).
   /**
-   * Controlled width of the column. Does not respect `minWidth` and `maxWidth`.
+   * Controlled width of the column. (Does not respect `resizeMin` and `resizeMax`.)
    *
-   * Should only be used to fully control column width state. Otherwise, use `defaultWidth` and let the component handle resizing.
+   * Should only be used to fully control column width state. Otherwise, use `default` and let the component handle resizing.
    *
    * **NB:** Percentage as initial width does not work well with resizing.
    */
-  width?: number | string;
+  value?: number | string;
   /**
-   * Initial width of the column. Only used when `width` is not set and `resizable` is true.
-   * Does not respect `minWidth` and `maxWidth`.
+   * Initial width of the column. Only used when `value` is not set.
+   * (Does not respect `resizeMin` and `resizeMax`.)
    *
    * **NB:** Percentage as initial width does not work well with resizing.
    * @default 140px
    */
-  defaultWidth?: number | string;
+  default?: number | string;
   /**
    * Called when the column width changes.
    * @param width New width in pixels.
    */
-  onWidthChange?: (width: number) => void;
-  /**
-   * Forwarded styles
-   */
-  style?: React.CSSProperties;
-  /**
-   * Forwarded colSpan
-   */
-  colSpan?: number;
-};
-
-type WithUndefined<T> = {
-  [K in keyof T]: T[K] | undefined;
+  onChange?: (width: number) => void;
 };
-type Unomittable<T> = WithUndefined<Required<T>>;
 
-type TableColumnResizeArgs = Unomittable<ResizeProps> & {
+type TableColumnResizeArgs = ResizeProps & {
   thRef: React.RefObject<HTMLTableCellElement | null>;
+  colSpan: number | undefined;
 };
 
 type TableColumnResizeResult =
   | {
-      style: React.CSSProperties;
+      width: number | string;
       resizeHandlerProps: {
         onMouseDown: DOMAttributes<HTMLButtonElement>["onMouseDown"];
         onTouchStart: DOMAttributes<HTMLButtonElement>["onTouchStart"];
@@ -93,59 +83,53 @@ type TableColumnResizeResult =
       enabled: true;
     }
   | {
-      style?: React.CSSProperties;
+      width?: number | string;
       enabled: false;
     };
 
 /**
  * TODO:
- * - Do we allow % widths?
  * - Auto-width mode is hard now since that might cause layout-shifts on mount. But would be preferable to
  * be able to set "1fr" or similar and have it fill remaining space.
  */
-function useTableColumnResize(
-  args: TableColumnResizeArgs,
-): TableColumnResizeResult {
-  const {
-    resizable,
-    thRef,
-    width: userWidth,
-    defaultWidth,
-    autoWidth,
-    onWidthChange,
-    maxWidth = Infinity,
-    minWidth = 40,
-    style,
-    colSpan,
-  } = args;
-
+function useTableColumnResize({
+  resizable = true,
+  autoResizeOnce,
+  resizeMin = 40,
+  resizeMax = Infinity,
+  value,
+  default: defaultProp,
+  onChange,
+  thRef,
+  colSpan,
+}: TableColumnResizeArgs): TableColumnResizeResult {
   const tableContext = useDataTableContext();
 
   const [isResizingWithKeyboard, setIsResizingWithKeyboard] = useState(false);
   const ignoreNextOnClick = useRef(false);
 
   const [width, setWidth] = useControllableState({
-    value: userWidth,
-    defaultValue: defaultWidth ?? (colSpan ?? 1) * 140,
+    value,
+    defaultValue: defaultProp ?? (colSpan ?? 1) * 140,
     /**
      * TODO:
      * - Potential optimization: Only call when width as "stopped" changing, e.g. on mouse up or after a debounce when resizing with keyboard.
      * Otherwise, this could cause excessive calls when resizing quickly.
      */
-    onChange: onWidthChange,
+    onChange,
   });
 
   const setClampedWidth = useCallback(
     (newWidth: number) => {
-      setWidth(Math.min(Math.max(newWidth, minWidth), maxWidth));
+      setWidth(Math.min(Math.max(newWidth, resizeMin), resizeMax));
     },
-    [minWidth, maxWidth, setWidth],
+    [resizeMin, resizeMax, setWidth],
   );
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: We only want to run this on mount and when autoWidth changes
+  // biome-ignore lint/correctness/useExhaustiveDependencies: We only want to run this on mount and when autoResizeOnce changes
   useEffect(
     function autoResizeColumn() {
-      if (!autoWidth) {
+      if (!autoResizeOnce) {
         return;
       }
 
@@ -154,20 +138,19 @@ function useTableColumnResize(
         setClampedWidth(newColumnWidth);
       }
     },
-    [autoWidth], // eslint-disable-line react-hooks/exhaustive-deps
+    [autoResizeOnce], // eslint-disable-line react-hooks/exhaustive-deps
   );
 
   const handleOnClick: DOMAttributes<HTMLButtonElement>["onClick"] =
     useCallback(() => {
       // We need to use the onClick event in order to support screen readers properly,
-      // since some of them only send a mouse click when pressing enter/space.
+      // since some of them only send a mouse click (no kbd events) when pressing enter/space.
       // We detect a "screen reader click" by checking if we had a mouseUp event right before.
 
       if (ignoreNextOnClick.current) {
         ignoreNextOnClick.current = false;
         return;
       }
-
       setIsResizingWithKeyboard((prev) => !prev);
     }, []);
 
@@ -213,11 +196,11 @@ function useTableColumnResize(
         const currentWidth = thRef.current?.offsetWidth ?? 0;
         const newWidth = startWidth + (clientX - startX);
 
-        if (newWidth > maxWidth) {
+        if (newWidth > resizeMax) {
           setWidth(newWidth < currentWidth ? newWidth : currentWidth);
           return;
         }
-        if (newWidth < minWidth) {
+        if (newWidth < resizeMin) {
           setWidth(newWidth > currentWidth ? newWidth : currentWidth);
           return;
         }
@@ -250,7 +233,7 @@ function useTableColumnResize(
       document.addEventListener("touchend", cleanup, { once: true });
       document.addEventListener("touchcancel", cleanup, { once: true });
     },
-    [maxWidth, minWidth, setWidth, setClampedWidth, thRef],
+    [resizeMax, resizeMin, setWidth, setClampedWidth, thRef],
   );
 
   const handleMouseDown: DOMAttributes<HTMLButtonElement>["onMouseDown"] =
@@ -269,7 +252,7 @@ function useTableColumnResize(
       [startResize],
     );
 
-  // Auto-size column to fit content on double click. NB: Doesn't work with block content!
+  // Auto-size column to fit content on double click
   const handleDoubleClick: DOMAttributes<HTMLButtonElement>["onDoubleClick"] =
     useCallback(() => {
       const newColumnWidth = getAutoColumnWidth(thRef);
@@ -280,26 +263,20 @@ function useTableColumnResize(
 
   if (tableContext.layout !== "fixed") {
     return {
-      style,
       enabled: false,
     };
   }
 
   if (!resizable) {
     return {
-      style: {
-        ...style,
-        width,
-      },
+      width,
+
       enabled: false,
     };
   }
 
   return {
-    style: {
-      ...style,
-      width,
-    },
+    width,
     resizeHandlerProps: {
       onMouseDown: handleMouseDown,
       onTouchStart: handleTouchStart,
@@ -313,12 +290,16 @@ function useTableColumnResize(
   };
 }
 
+/**
+ * Figures out how wide the column needs to be to fit all the content without truncation.
+ * NB: Does not work with block content!
+ */
 function getAutoColumnWidth(
   thRef: React.RefObject<HTMLTableCellElement | null>,
 ) {
   const th = thRef.current!;
   const thContent = th.querySelector(".aksel-data-table__th-content");
-  const thPaddingEl = th.querySelector("div");
+  const thPaddingEl = th.querySelector(".aksel-data-table__cell-content");
   const rows = th.closest("table")?.querySelectorAll("tbody tr, tfoot tr");
   if (!thContent || !thPaddingEl || !rows) {
     return;
@@ -361,15 +342,18 @@ function getAutoColumnWidth(
     skipRows = cell.rowSpan - 1;
 
     // Find needed width
-    const cellContent = cell.firstChild as HTMLElement;
+    const cellContent = cell.querySelector(
+      ".aksel-data-table__cell-content",
+    ) as HTMLElement;
     range.selectNodeContents(cellContent);
     const cellContentWidth = range.getBoundingClientRect().width;
     const contentElStyle = window.getComputedStyle(cellContent);
     const inlinePadding =
       parseInt(contentElStyle.paddingLeft, 10) +
       parseInt(contentElStyle.paddingRight, 10);
+    const marginLeft = parseInt(contentElStyle.marginLeft, 10); // We don't have right margin for now
     const widthNeededForThisCell =
-      (cellContentWidth + inlinePadding) / cell.colSpan;
+      (cellContentWidth + inlinePadding + marginLeft) / cell.colSpan;
     if (widthNeededForThisCell > newColumnWidth) {
       newColumnWidth = widthNeededForThisCell;
     }

package/src/data/table/details-panel-row/DataTableDetailsPanelRow.tsx

@@ -9,10 +9,10 @@ function DataTableDetailsPanelRow<T>({
   rowId,
   rowData,
 }: {
-  rowId: string | number;
+  rowId: string;
   rowData: T;
 }) {
-  const { tableId, fullWidthColSpan } = useDataTableContext();
+  const { tableId, totalColSpan } = useDataTableContext();
   const {
     enableDetailsPanel,
     isExpanded,
@@ -45,7 +45,7 @@ function DataTableDetailsPanelRow<T>({
     <tr className="aksel-data-table__details-panel-row">
       <td
         id={expansionId}
-        colSpan={fullWidthColSpan}
+        colSpan={totalColSpan}
         className="aksel-data-table__details-panel-row-cell"
       >
         <div style={style}>{content}</div>

package/src/data/table/helpers/collectTableRowEntries.ts

@@ -1,4 +1,4 @@
-type TableRowEntryId = string | number;
+import type { TableRowEntryId } from "../root/DataTable.types";
 
 type CollectTableRowEntriesArgs<T> = {
   items: T[];
@@ -91,6 +91,5 @@ export { collectTableRowEntries };
 export type {
   CollectTableRowEntriesArgs,
   CollectTableRowEntriesReturn,
-  TableRowEntryId,
   ItemDetail,
 };

package/src/data/table/helpers/selection/getMultipleSelectProps.ts

@@ -1,107 +1,87 @@
+import type { ChangeEventHandler, SetStateAction } from "react";
 import type { CheckboxInputProps } from "../../../../form/checkbox/checkbox-input/CheckboxInput";
-import { SelectionSubtreeHelper } from "./SelectionSubtreeHelper";
-
-type GetMultipleSelectPropsArgs = {
-  selectedKeysSet: Set<string | number>;
-  selectedKeys: (string | number)[];
-  setSelectedKeys: (keys: (string | number)[]) => void;
-  disabledKeysSet: Set<string | number>;
-  visibleRowIds: (string | number)[];
-  childRowIdsById?: Map<string | number, (string | number)[]>;
-};
-
-function getMultipleSelectProps({
+import { consoleWarning } from "../../../../utils/helpers/consoleWarning";
+import type { UseTableItemsReturn } from "../../hooks/useTableItems";
+import type { TableRowEntryId } from "../../root/DataTable.types";
+import type { SelectedKeysT, SelectionProps } from "./selection.types";
+import { canSelectTableRow, mutateRowSelection } from "./selection.utils";
+
+type GetMultipleSelectPropsArgs<T> = {
+  selectedKeysSet: Set<TableRowEntryId>;
+  selectedKeys: SelectedKeysT;
+  setSelectedKeys: (next: SetStateAction<SelectedKeysT>) => void;
+  tableItems: UseTableItemsReturn<T>;
+} & Pick<SelectionProps<T>, "enableRowSelection">;
+
+function getMultipleSelectProps<T>({
   selectedKeysSet,
   selectedKeys,
   setSelectedKeys,
-  disabledKeysSet,
-  visibleRowIds,
-  childRowIdsById,
-}: GetMultipleSelectPropsArgs) {
-  const subtreeHelper = new SelectionSubtreeHelper({
-    childRowIdsById,
-    disabledKeysSet,
-    selectedKeysSet,
-  });
-
-  // Header selection traverses the visible roots and skips already visited
-  // descendants, so expanded trees stay linear in the number of rows.
-  const headerSelectableKeys = subtreeHelper.getSelectableKeys(visibleRowIds);
-  const headerSelectableKeysSet = new Set(headerSelectableKeys);
-
-  const selectedSelectableCount = headerSelectableKeys.filter((k) =>
-    selectedKeysSet.has(k),
-  ).length;
-
-  const allSelectableSelected =
-    headerSelectableKeys.length > 0 &&
-    selectedSelectableCount === headerSelectableKeys.length;
-
-  const indeterminate =
-    selectedSelectableCount > 0 &&
-    selectedSelectableCount < headerSelectableKeys.length;
-
-  const selectedKeysNotInView = selectedKeys.filter(
-    (k) => !headerSelectableKeysSet.has(k),
-  );
-  const disabledSelected = selectedKeys.filter((k) => disabledKeysSet.has(k));
-  const preservedKeys = [
-    ...new Set([...selectedKeysNotInView, ...disabledSelected]),
-  ];
+  enableRowSelection,
+  tableItems,
+}: GetMultipleSelectPropsArgs<T>) {
+  const selectableIdsSet: Set<TableRowEntryId> = new Set();
+
+  for (const [id, { rowData }] of tableItems.itemDetails) {
+    if (canSelectTableRow(enableRowSelection, { row: rowData, id })) {
+      selectableIdsSet.add(id);
+    }
+  }
 
-  const isGroupFullySelected = (key: string | number) => {
-    const groupStats = subtreeHelper.getSelectionStats(key);
+  let selectedOnPageCount = 0;
+  for (const id of selectableIdsSet) {
+    selectedKeysSet.has(id) && selectedOnPageCount++;
+  }
 
-    return (
-      groupStats.selectableCount > 0 &&
-      groupStats.selectedCount === groupStats.selectableCount
-    );
-  };
+  const isAllSelected =
+    selectableIdsSet.size > 0 && selectedOnPageCount === selectableIdsSet.size;
+  const someSelected = selectedOnPageCount > 0;
 
-  const handleToggleAll = () => {
-    if (allSelectableSelected) {
-      setSelectedKeys(preservedKeys);
-    } else {
-      setSelectedKeys([
-        ...new Set([...preservedKeys, ...headerSelectableKeys]),
-      ]);
+  const handleToggleRow = (key: TableRowEntryId, row: T) => {
+    if (!row) {
+      consoleWarning(
+        `Row data is undefined for key ${key}. This may cause issues with selection if enableRowSelection is used.`,
+      );
     }
-  };
 
-  const handleToggleRow = (key: string | number) => {
-    if (disabledKeysSet.has(key)) {
-      return;
+    const checked = !selectedKeysSet.has(key);
+    const nextSet = new Set(selectedKeysSet);
+    const changed = mutateRowSelection({
+      selectedRowIds: nextSet,
+      rowId: key,
+      checked,
+      childRowIdsById: tableItems.childRowIdsById,
+      itemDetails: tableItems.itemDetails,
+      enableRowSelection,
+    });
+    if (changed) {
+      setSelectedKeys([...nextSet]);
     }
+  };
 
-    const groupKeys = subtreeHelper.getSelectableKeys([key]);
-
-    if (isGroupFullySelected(key)) {
-      const groupKeysSet = new Set(groupKeys);
-      setSelectedKeys(
-        selectedKeys.filter((selectedKey) => !groupKeysSet.has(selectedKey)),
-      );
+  const toggleAllRowSelected: ChangeEventHandler<HTMLInputElement> = (
+    event,
+  ) => {
+    if (event.target.checked) {
+      const preserved = selectedKeys.filter((k) => !selectableIdsSet.has(k));
+      setSelectedKeys([...preserved, ...selectableIdsSet]);
     } else {
-      setSelectedKeys([...new Set([...selectedKeys, ...groupKeys])]);
+      setSelectedKeys(selectedKeys.filter((k) => !selectableIdsSet.has(k)));
     }
   };
 
   return {
     getTheadCheckboxProps: (): CheckboxInputProps => ({
-      onChange: handleToggleAll,
-      checked: allSelectableSelected,
-      indeterminate,
-      disabled: headerSelectableKeys.length === 0,
+      checked: isAllSelected,
+      indeterminate: !isAllSelected && someSelected,
+      onChange: toggleAllRowSelected,
     }),
-    getRowCheckboxProps: (key: string | number): CheckboxInputProps => {
-      const groupStats = subtreeHelper.getSelectionStats(key);
-
+    getRowCheckboxProps: (key: TableRowEntryId, row: T): CheckboxInputProps => {
       return {
-        onChange: () => handleToggleRow(key),
-        checked: isGroupFullySelected(key),
-        indeterminate:
-          groupStats.selectedCount > 0 &&
-          groupStats.selectedCount < groupStats.selectableCount,
-        disabled: disabledKeysSet.has(key),
+        onChange: () => handleToggleRow(key, row),
+        checked: selectedKeysSet.has(key),
+        indeterminate: false,
+        disabled: !canSelectTableRow(enableRowSelection, { row, id: key }),
       };
     },
     toggleSelection: handleToggleRow,

package/src/data/table/helpers/selection/getSingleSelectProps.ts

@@ -1,33 +1,51 @@
 import type { RadioInputProps } from "../../../../form/radio/radio-input/RadioInput";
+import { consoleWarning } from "../../../../utils/helpers/consoleWarning";
+import type { TableRowEntryId } from "../../root/DataTable.types";
+import type { SelectedKeysT, SelectionProps } from "./selection.types";
+import { canSelectTableRow } from "./selection.utils";
 
-type GetSingleSelectPropsArgs = {
-  selectedKeysSet: Set<string | number>;
-  setSelectedKeys: (keys: (string | number)[]) => void;
-  disabledKeysSet: Set<string | number>;
+type GetSingleSelectPropsArgs<T> = {
+  selectedKeysSet: Set<TableRowEntryId>;
+  setSelectedKeys: (keys: SelectedKeysT) => void;
   name: string;
-};
+} & Pick<SelectionProps<T>, "enableRowSelection">;
 
-function getSingleSelectProps({
+function getSingleSelectProps<T>({
   selectedKeysSet,
   setSelectedKeys,
-  disabledKeysSet,
   name,
-}: GetSingleSelectPropsArgs) {
-  const handleSelectionChange = (key: string | number) => {
-    if (disabledKeysSet.has(key)) {
+  enableRowSelection,
+}: GetSingleSelectPropsArgs<T>) {
+  const handleSelectionChange = (key: TableRowEntryId, row: T) => {
+    if (!row) {
+      consoleWarning(
+        `Row data is undefined for key ${key}. This may cause issues with selection if enableRowSelection is used.`,
+      );
+    }
+    if (!canSelectTableRow(enableRowSelection, { row, id: key })) {
       return;
     }
+
     setSelectedKeys([key]);
   };
 
   return {
-    getRowRadioProps: (key: string | number): RadioInputProps => ({
-      checked: selectedKeysSet.has(key),
-      onChange: () => handleSelectionChange(key),
-      disabled: disabledKeysSet.has(key),
-      value: key,
-      name,
-    }),
+    getRowRadioProps: (key: TableRowEntryId, row: T): RadioInputProps => {
+      const isSelectionDisabled = !canSelectTableRow(enableRowSelection, {
+        row,
+        id: key,
+      });
+
+      return {
+        checked: selectedKeysSet.has(key),
+        onChange: isSelectionDisabled
+          ? () => null
+          : () => handleSelectionChange(key, row),
+        disabled: isSelectionDisabled,
+        value: key,
+        name,
+      };
+    },
     toggleSelection: handleSelectionChange,
   };
 }

package/src/data/table/helpers/selection/selection.types.ts

@@ -1,9 +1,11 @@
 import type { CheckboxInputProps } from "../../../../form/checkbox/checkbox-input/CheckboxInput";
 import type { RadioInputProps } from "../../../../form/radio/radio-input/RadioInput";
+import type { TableRowEntryId } from "../../root/DataTable.types";
 
-type SelectedKeysT = (string | number)[];
+type SelectedKeysT = TableRowEntryId[];
 
-type SelectionProps = {
+// TODO: Remove `any` if possible
+type SelectionProps<T = any> = {
   /**
    * Enables selection of rows.
    *
@@ -14,7 +16,7 @@ type SelectionProps = {
    *
    * @default "none"
    */
-  selectionMode?: "none" | "single" | "multiple";
+  selectionMode: "none" | "single" | "multiple";
   /**
    * Controlled selected keys. Should be used in conjunction with `onSelectionChange`.
    */
@@ -28,45 +30,43 @@ type SelectionProps = {
    */
   onSelectionChange?: (keys: SelectedKeysT) => void;
   /**
-   * Keys that should be disabled for selection. These keys will not be selectable and will be styled as disabled.
+   * Callback to determine if a row should be enabled for selection.
    *
    *
-   * TODO: Consider making this optionally a callback with (rowData:T) => boolean, to allow for more dynamic disabling of selection based on row data.
+   * If set to a boolean, it will enable selection for all rows when true, and disable selection for all rows when false.
    */
-  disabledSelectionKeys?: SelectedKeysT;
+  enableRowSelection?:
+    | (({ row, id }: { row: T; id: TableRowEntryId }) => boolean)
+    | boolean;
   /**
-   * If true, stops clicking a row from toggling its selection state. This can be used if you want to only allow selection through the checkboxes/radios, and not have the entire row be clickable for selection.
-   *
-   * @default false
+   * Determines if selection is triggered by clicking the row or the selection control (checkbox/radio).
+   * @default "row"
    */
-  disableRowSelectionOnClick?: boolean;
+  selectionTrigger?: "row" | "control";
 };
 
 type NoneSelection = {
   selectionMode: "none";
   selectedKeys: SelectedKeysT;
-  disabledSelectionKeys: SelectedKeysT;
 };
 
 type SingleSelection = {
   selectionMode: "single";
   selectedKeys: SelectedKeysT;
-  disabledSelectionKeys: SelectedKeysT;
-  getRowRadioProps: (key: string | number) => RadioInputProps;
-  toggleSelection: (key: string | number) => void;
+  getRowRadioProps: (key: TableRowEntryId, row: any) => RadioInputProps;
+  toggleSelection: (key: TableRowEntryId, row: any) => void;
 };
 
 type MultipleSelection = {
   selectionMode: "multiple";
   selectedKeys: SelectedKeysT;
-  disabledSelectionKeys: SelectedKeysT;
   getTheadCheckboxProps: () => CheckboxInputProps;
-  getRowCheckboxProps: (key: string | number) => CheckboxInputProps;
-  toggleSelection: (key: string | number) => void;
+  getRowCheckboxProps: (key: TableRowEntryId, row: any) => CheckboxInputProps;
+  toggleSelection: (key: TableRowEntryId, row: any) => void;
 };
 
 type TableSelectionBase = {
-  isRowSelected: (rowId: string | number) => boolean;
+  isRowSelected: (rowId: TableRowEntryId) => boolean;
 };
 
 type TableSelection = TableSelectionBase &
@@ -75,8 +75,8 @@ type TableSelection = TableSelectionBase &
 export type {
   MultipleSelection,
   NoneSelection,
+  SelectedKeysT,
   SelectionProps,
   SingleSelection,
   TableSelection,
-  SelectedKeysT,
 };