@navikt/ds-react 8.9.0 → 8.10.0

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
+ * - Keyboard-nav breaks in headers now because of the resize-handles.
+ * 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-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 { CheckboxProps } from "../../../../form/checkbox/types";
-import type { SelectionT } from "./selection.types";
+import type { CheckboxInputProps } from "../../../../form/checkbox/checkbox-input/CheckboxInput";
 
 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: (): CheckboxProps => {
-      const indeterminate =
-        Array.isArray(selectedKeys) &&
-        selectedKeys.length > 0 &&
-        selectedKeys.length < totalCount;
-
-      return {
-        children: "Select all rows",
-        onChange: handleToggleAll,
-        checked:
-          (selectedKeys === "all" ||
-            (Array.isArray(selectedKeys) && selectedKeys.length > 0)) &&
-          !indeterminate,
-        indeterminate,
-        disabled: disabledKeys.length === totalCount,
-        hideLabel: true,
-      };
-    },
-    getRowCheckboxProps: (key: string | number): CheckboxProps => ({
-      children: `Select row with id ${key}`,
+    getTheadCheckboxProps: (): CheckboxInputProps => ({
+      onChange: handleToggleAll,
+      checked: allSelectableSelected,
+      indeterminate,
+      disabled: selectableKeys.length === 0,
+    }),
+    getRowCheckboxProps: (key: string | number): CheckboxInputProps => ({
       onChange: () => handleToggleRow(key),
-      checked: isChecked(key),
-      disabled: disabledKeys.includes(key),
-      hideLabel: true,
+      checked: selectedKeysSet.has(key),
+      disabled: disabledKeysSet.has(key),
     }),
+    toggleSelection: handleToggleRow,
   };
 }
 

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

@@ -1,32 +1,34 @@
-import type { RadioProps } from "../../../../form/radio/types";
+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): RadioProps => ({
-      children: `Select row with id ${key}`,
-      checked: selectedKeys.includes(key),
+    getRowRadioProps: (key: string | number): RadioInputProps => ({
+      checked: selectedKeysSet.has(key),
       onChange: () => handleSelectionChange(key),
-      disabled: disabledKeys.includes(key),
+      disabled: disabledKeysSet.has(key),
       value: key,
+      name,
     }),
+    toggleSelection: handleSelectionChange,
   };
 }
 

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

@@ -1,7 +1,7 @@
-import type { CheckboxProps } from "../../../../form/checkbox/types";
-import type { RadioProps } from "../../../../form/radio/types";
+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)[];
-  getRowRadioProps: (key: string | number) => RadioProps;
+  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)[];
-  getTheadCheckboxProps: () => CheckboxProps;
-  getRowCheckboxProps: (key: string | number) => CheckboxProps;
+  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,
 };