@navikt/ds-react 8.9.1 → 8.10.1

package/src/data/table/base-cell/DataTableBaseCell.tsx

@@ -0,0 +1,92 @@
+import React, { forwardRef } from "react";
+import { cl } from "../../../utils/helpers";
+import { useDataTableContext } from "../root/DataTableRoot.context";
+
+interface DataTableBaseCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+  /**
+   * Content alignment inside cell
+   * @default "left"
+   */
+  textAlign?: "left" | "center" | "right";
+  /**
+   * TODO: Shouldnt be needed to declare these here... But getting type-errors if not
+   */
+  colSpan?: number;
+  rowSpan?: number;
+  /**
+   * Temp hack to solve overflow and alignment
+   */
+  UNSAFE_isSelection?: boolean;
+  /**
+   * When true, clicking this cell will not trigger `onRowClick` on the row.
+   * Useful for cells that contain their own interactive content or actions
+   * that should be independent of row-level click handling.
+   */
+  preventRowClick?: boolean;
+  /**
+   * Sets a max-width on the content wrapper div inside the cell.
+   * This is only needed when using `layout="auto"` together with
+   * `truncateContent` on `<DataTable>` and you want the cell to be truncated.
+   */
+  contentMaxWidth?: number | `${number}${string}`;
+  /**
+   * Makes the cell sticky.
+   */
+  isSticky?: "start" | "end" | false;
+}
+
+/**
+ * TODO:
+ * - Need a "type" or something that centers content instead of relying on isSelection prop.
+ * - Need a separate prop do disabled resizing instead of relying on isSelection prop.
+ */
+const DataTableBaseCell = forwardRef<
+  HTMLTableCellElement,
+  DataTableBaseCellProps & {
+    /**
+     * Cell type
+     */
+    as: "th" | "td";
+  }
+>(
+  (
+    {
+      className,
+      children,
+      as: Component,
+      textAlign = "left",
+      colSpan,
+      UNSAFE_isSelection,
+      preventRowClick,
+      contentMaxWidth,
+      rowSpan,
+      isSticky,
+      ...rest
+    },
+    forwardedRef,
+  ) => {
+    const { withKeyboardNav } = useDataTableContext();
+
+    return (
+      <Component
+        {...rest}
+        ref={forwardedRef}
+        className={cl("aksel-data-table__cell", className)}
+        tabIndex={withKeyboardNav ? -1 : undefined}
+        data-align={textAlign}
+        data-selectable={UNSAFE_isSelection}
+        data-prevent-row-click={
+          preventRowClick || UNSAFE_isSelection || undefined
+        }
+        data-sticky={isSticky || undefined}
+        colSpan={colSpan}
+        rowSpan={rowSpan}
+      >
+        <div style={{ maxWidth: contentMaxWidth }}>{children}</div>
+      </Component>
+    );
+  },
+);
+
+export { DataTableBaseCell };
+export type { DataTableBaseCellProps };

package/src/data/table/column-header/DataTableColumnHeader.tsx

@@ -0,0 +1,180 @@
+import React, { forwardRef, useState } from "react";
+import {
+  ArrowsUpDownIcon,
+  CaretLeftCircleFillIcon,
+  CaretRightCircleFillIcon,
+  SortDownIcon,
+  SortUpIcon,
+} from "@navikt/aksel-icons";
+import { cl } from "../../../utils/helpers";
+import { useMergeRefs } from "../../../utils/hooks";
+import {
+  DataTableBaseCell,
+  type DataTableBaseCellProps,
+} from "../base-cell/DataTableBaseCell";
+import type { SortDirection } from "../root/DataTable.types";
+import { type ResizeProps, useTableColumnResize } from "./useTableColumnResize";
+
+interface DataTableColumnHeaderProps
+  extends ResizeProps, DataTableBaseCellProps {
+  resizeHandler?: (
+    event:
+      | React.MouseEvent<HTMLButtonElement>
+      | React.TouchEvent<HTMLButtonElement>,
+  ) => void;
+  /**
+   * Makes the column header sortable. The entire header cell content becomes
+   * a clickable button when true.
+   */
+  sortable?: boolean;
+  /**
+   * Current sort direction. Only relevant when `sortable` is true.
+   * Uses values matching the `aria-sort` attribute directly.
+   * @default "none"
+   */
+  sortDirection?: SortDirection;
+  /**
+   * Called when the user clicks the sortable header.
+   * The consumer is responsible for determining and setting the next sort state.
+   */
+  onSortClick?: (event: React.MouseEvent<HTMLElement>) => void;
+}
+
+const SORT_ICON: Record<SortDirection, React.ElementType | null> = {
+  asc: SortUpIcon,
+  desc: SortDownIcon,
+  none: ArrowsUpDownIcon,
+};
+
+/**
+ * TODO:
+ * - Plan for pinning: Move it into "settings" dialog like here: https://cloudscape.design/examples/react/table.html
+ * Toggling `data-block-keyboard-nav` does not work since the created "grid" does not update when toggling this attribute.
+ */
+const DataTableColumnHeader = forwardRef<
+  HTMLTableCellElement,
+  DataTableColumnHeaderProps
+>(
+  (
+    {
+      className,
+      children,
+      sortable = false,
+      sortDirection = "none",
+      onSortClick,
+      style,
+      width,
+      minWidth,
+      maxWidth,
+      onWidthChange,
+      defaultWidth,
+      colSpan,
+      rowSpan,
+      UNSAFE_isSelection,
+      ...rest
+    },
+    forwardedRef,
+  ) => {
+    const [isOverflowing, setIsOverflowing] = React.useState(false);
+    const contentRef = React.useRef<HTMLDivElement>(null);
+    const [thRefState, setThRefState] = useState<HTMLTableCellElement | null>(
+      null,
+    );
+    const mergedRef = useMergeRefs(forwardedRef, setThRefState);
+
+    const resizeResult = useTableColumnResize({
+      ref: thRefState,
+      width,
+      defaultWidth,
+      minWidth,
+      maxWidth,
+      onWidthChange,
+      style,
+      colSpan,
+    });
+
+    const SortIcon = sortable ? SORT_ICON[sortDirection] : null;
+
+    return (
+      <DataTableBaseCell
+        as="th"
+        {...rest}
+        ref={mergedRef}
+        className={cl("aksel-data-table__column-header", className)}
+        data-sortable={sortable}
+        style={resizeResult.style}
+        aria-sort={sortable ? getAriaSort(sortDirection) : undefined}
+        onPointerEnter={() => {
+          const el = contentRef.current;
+          setIsOverflowing(el ? el.scrollWidth > el.offsetWidth : false);
+          console.info("is overflowing", isOverflowing);
+        }}
+        onPointerLeave={() => setIsOverflowing(false)}
+        UNSAFE_isSelection={UNSAFE_isSelection}
+        colSpan={colSpan}
+        rowSpan={rowSpan}
+      >
+        {sortable ? (
+          <button
+            className="aksel-data-table__th-sort-button"
+            onClick={onSortClick}
+          >
+            <div ref={contentRef} className="aksel-data-table__th-content">
+              {children}
+            </div>
+            {SortIcon && (
+              <SortIcon
+                aria-hidden
+                data-sort-direction={sortDirection}
+                className="aksel-data-table__th-sort-icon"
+                fontSize="1.25rem"
+              />
+            )}
+          </button>
+        ) : (
+          <div
+            ref={contentRef}
+            className={cl({
+              "aksel-data-table__th-content": !UNSAFE_isSelection,
+            })}
+          >
+            {children}
+          </div>
+        )}
+
+        {resizeResult.enabled && !UNSAFE_isSelection && (
+          <button
+            {...resizeResult.resizeHandlerProps}
+            className="aksel-data-table__th-resize-handle"
+            data-active={resizeResult.isResizingWithKeyboard}
+            data-disable-keyboard-nav={resizeResult.isResizingWithKeyboard}
+            data-block-keyboard-nav
+          >
+            {resizeResult.isResizingWithKeyboard && (
+              <>
+                <span className="aksel-data-table__th-resize-handle-indicator aksel-data-table__th-resize-handle-indicator--start">
+                  <CaretLeftCircleFillIcon aria-hidden fontSize="1.5rem" />
+                </span>
+                <span className="aksel-data-table__th-resize-handle-indicator aksel-data-table__th-resize-handle-indicator--end">
+                  <CaretRightCircleFillIcon aria-hidden fontSize="1.5rem" />
+                </span>
+              </>
+            )}
+          </button>
+        )}
+      </DataTableBaseCell>
+    );
+  },
+);
+
+function getAriaSort(
+  sortDirection: SortDirection | undefined,
+): "ascending" | "descending" | "none" | undefined {
+  if (sortDirection === "asc") return "ascending";
+  if (sortDirection === "desc") return "descending";
+  if (sortDirection === "none") return "none";
+  return undefined;
+}
+
+export { DataTableColumnHeader };
+export type { DataTableColumnHeaderProps };

package/src/data/table/empty-state/DataTableEmptyState.tsx

@@ -1,15 +1,17 @@
 import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers";
 
-type DataTableEmptyStateProps = React.HTMLAttributes<HTMLDivElement>;
+type DataTableEmptyStateProps = React.HTMLAttributes<HTMLDivElement> & {
+  colSpan?: number;
+};
 
 const DataTableEmptyState = forwardRef<
   HTMLDivElement,
   DataTableEmptyStateProps
->(({ className, children, ...rest }, forwardedRef) => {
+>(({ className, children, colSpan = 999, ...rest }, forwardedRef) => {
   return (
     <tr>
-      <td colSpan={999}>
+      <td colSpan={colSpan}>
         <div
           {...rest}
           ref={forwardedRef}

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

@@ -1,69 +1,73 @@
 import type { CheckboxInputProps } from "../../../../form/checkbox/checkbox-input/CheckboxInput";
-import type { SelectionT } from "./selection.types";
 
 type GetMultipleSelectPropsArgs = {
-  selectedKeys: SelectionT;
-  setSelectedKeys: (keys: SelectionT) => void;
-  disabledKeys: (string | number)[];
-  allKeys: (string | number)[];
-  totalCount: number;
+  selectedKeysSet: Set<string | number>;
+  selectedKeys: (string | number)[];
+  setSelectedKeys: (keys: (string | number)[]) => void;
+  disabledKeysSet: Set<string | number>;
+  allRowKeys: (string | number)[];
 };
 
 function getMultipleSelectProps({
+  selectedKeysSet,
   selectedKeys,
   setSelectedKeys,
-  disabledKeys,
-  allKeys,
-  totalCount,
+  disabledKeysSet,
+  allRowKeys,
 }: GetMultipleSelectPropsArgs) {
-  const handleToggleAll = () => {
-    const allSelected =
-      selectedKeys === "all" ||
-      (Array.isArray(selectedKeys) && selectedKeys.length === totalCount);
+  const allRowKeysSet = new Set(allRowKeys);
+  const selectableKeys = allRowKeys.filter((k) => !disabledKeysSet.has(k));
+
+  const selectedSelectableCount = selectableKeys.filter((k) =>
+    selectedKeysSet.has(k),
+  ).length;
+
+  const allSelectableSelected =
+    selectableKeys.length > 0 &&
+    selectedSelectableCount === selectableKeys.length;
 
-    setSelectedKeys(allSelected ? [] : allKeys);
+  const indeterminate =
+    selectedSelectableCount > 0 &&
+    selectedSelectableCount < selectableKeys.length;
+
+  const selectedKeysNotInView = selectedKeys.filter(
+    (k) => !allRowKeysSet.has(k),
+  );
+  const disabledSelected = selectedKeys.filter((k) => disabledKeysSet.has(k));
+  const preservedKeys = [...selectedKeysNotInView, ...disabledSelected];
+
+  const handleToggleAll = () => {
+    if (allSelectableSelected) {
+      setSelectedKeys(preservedKeys);
+    } else {
+      setSelectedKeys([...new Set([...preservedKeys, ...selectableKeys])]);
+    }
   };
 
   const handleToggleRow = (key: string | number) => {
-    if (selectedKeys === "all") {
-      setSelectedKeys(allKeys.filter((id) => id !== key));
-    } else if (selectedKeys.includes(key)) {
+    if (disabledKeysSet.has(key)) {
+      return;
+    }
+    if (selectedKeysSet.has(key)) {
       setSelectedKeys(selectedKeys.filter((k) => k !== key));
     } else {
       setSelectedKeys([...selectedKeys, key]);
     }
   };
 
-  const isChecked = (key: string | number) =>
-    selectedKeys === "all" ||
-    (Array.isArray(selectedKeys) && selectedKeys.includes(key));
-
   return {
-    getTheadCheckboxProps: (): CheckboxInputProps => {
-      const indeterminate =
-        Array.isArray(selectedKeys) &&
-        selectedKeys.length > 0 &&
-        selectedKeys.length < totalCount;
-
-      return {
-        /* TODO: Add support for label visuallyhidden */
-        /* children: "Select all rows", */
-        onChange: handleToggleAll,
-        checked:
-          (selectedKeys === "all" ||
-            (Array.isArray(selectedKeys) && selectedKeys.length > 0)) &&
-          !indeterminate,
-        indeterminate,
-        disabled: disabledKeys.length === totalCount,
-      };
-    },
+    getTheadCheckboxProps: (): CheckboxInputProps => ({
+      onChange: handleToggleAll,
+      checked: allSelectableSelected,
+      indeterminate,
+      disabled: selectableKeys.length === 0,
+    }),
     getRowCheckboxProps: (key: string | number): CheckboxInputProps => ({
-      /* TODO: Add support for label visuallyhidden */
-      /* children: `Select row with id ${key}`, */
       onChange: () => handleToggleRow(key),
-      checked: isChecked(key),
-      disabled: disabledKeys.includes(key),
+      checked: selectedKeysSet.has(key),
+      disabled: disabledKeysSet.has(key),
     }),
+    toggleSelection: handleToggleRow,
   };
 }
 

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

@@ -1,35 +1,34 @@
 import type { RadioInputProps } from "../../../../form/radio/radio-input/RadioInput";
 
 type GetSingleSelectPropsArgs = {
-  selectedKeys: (string | number)[];
+  selectedKeysSet: Set<string | number>;
   setSelectedKeys: (keys: (string | number)[]) => void;
-  disabledKeys: (string | number)[];
+  disabledKeysSet: Set<string | number>;
+  name: string;
 };
 
 function getSingleSelectProps({
-  selectedKeys,
+  selectedKeysSet,
   setSelectedKeys,
-  disabledKeys,
+  disabledKeysSet,
+  name,
 }: GetSingleSelectPropsArgs) {
   const handleSelectionChange = (key: string | number) => {
-    if (selectedKeys.includes(key)) {
-      setSelectedKeys([]);
-    } else {
-      setSelectedKeys([key]);
+    if (disabledKeysSet.has(key)) {
+      return;
     }
+    setSelectedKeys([key]);
   };
 
   return {
     getRowRadioProps: (key: string | number): RadioInputProps => ({
-      /* TODO: Add support for label visuallyhidden */
-      /* children: `Select row with id ${key}`, */
-      checked: selectedKeys.includes(key),
+      checked: selectedKeysSet.has(key),
       onChange: () => handleSelectionChange(key),
-      disabled: disabledKeys.includes(key),
+      disabled: disabledKeysSet.has(key),
       value: key,
-      /* TODO: Make this unique to avoid issue with multipe tables */
-      name: "data-table-single-select",
+      name,
     }),
+    toggleSelection: handleSelectionChange,
   };
 }
 

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

@@ -1,7 +1,7 @@
 import type { CheckboxInputProps } from "../../../../form/checkbox/checkbox-input/CheckboxInput";
 import type { RadioInputProps } from "../../../../form/radio/radio-input/RadioInput";
 
-type SelectionT = (string | number)[] | "all";
+type SelectedKeysT = (string | number)[];
 
 type SelectionProps = {
   /**
@@ -14,43 +14,68 @@ type SelectionProps = {
    * @default "none"
    */
   selectionMode?: "none" | "single" | "multiple";
-  selectedKeys?: SelectionT;
-  defaultSelectedKeys?: SelectionT;
-  onSelectionChange?: (keys: SelectionT) => void;
-  disabledKeys?: (string | number)[];
+  /**
+   * Controlled selected keys. Should be used in conjunction with `onSelectionChange`.
+   */
+  selectedKeys?: SelectedKeysT;
+  /**
+   * Default selected keys when using uncontrolled selection. Should not be used together with `selectedKeys`.
+   */
+  defaultSelectedKeys?: SelectedKeysT;
+  /**
+   * Callback with array of selected keys.
+   */
+  onSelectionChange?: (keys: SelectedKeysT) => void;
+  /**
+   * Keys that should be disabled for selection. These keys will not be selectable and will be styled as disabled.
+   *
+   *
+   * TODO: Consider making this optionally a callback with (rowData:T) => boolean, to allow for more dynamic disabling of selection based on row data.
+   */
+  disabledSelectionKeys?: SelectedKeysT;
+  /**
+   * 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
+   */
+  disableRowSelectionOnClick?: boolean;
 };
 
 type NoneSelection = {
   selectionMode: "none";
-  allKeys: (string | number)[];
-  selectedKeys: (string | number)[];
-  disabledKeys: (string | number)[];
+  selectedKeys: SelectedKeysT;
+  disabledSelectionKeys: SelectedKeysT;
 };
 
 type SingleSelection = {
   selectionMode: "single";
-  allKeys: (string | number)[];
-  selectedKeys: (string | number)[];
-  disabledKeys: (string | number)[];
+  selectedKeys: SelectedKeysT;
+  disabledSelectionKeys: SelectedKeysT;
   getRowRadioProps: (key: string | number) => RadioInputProps;
+  toggleSelection: (key: string | number) => void;
 };
 
 type MultipleSelection = {
   selectionMode: "multiple";
-  allKeys: (string | number)[];
-  selectedKeys: SelectionT;
-  disabledKeys: (string | number)[];
+  selectedKeys: SelectedKeysT;
+  disabledSelectionKeys: SelectedKeysT;
   getTheadCheckboxProps: () => CheckboxInputProps;
   getRowCheckboxProps: (key: string | number) => CheckboxInputProps;
+  toggleSelection: (key: string | number) => void;
+};
+
+type TableSelectionBase = {
+  isRowSelected: (rowId: string | number) => boolean;
 };
 
-type TableSelection = NoneSelection | SingleSelection | MultipleSelection;
+type TableSelection = TableSelectionBase &
+  (NoneSelection | SingleSelection | MultipleSelection);
 
 export type {
   MultipleSelection,
   NoneSelection,
   SelectionProps,
-  SelectionT,
   SingleSelection,
   TableSelection,
+  SelectedKeysT,
 };

package/src/data/table/helpers/table-keyboard.ts

@@ -64,6 +64,10 @@ function shouldBlockNavigation(event: KeyboardEvent): boolean {
     return false;
   }
 
+  if (el.dataset.disableKeyboardNav === "true") {
+    return true;
+  }
+
   if (el.isContentEditable) {
     return true;
   }