@navikt/ds-react 8.6.0 → 8.8.0

package/src/data/table/root/DataTableRoot.tsx

@@ -5,6 +5,14 @@ import {
   DataTableCaption,
   type DataTableCaptionProps,
 } from "../caption/DataTableCaption";
+import {
+  DataTableEmptyState,
+  type DataTableEmptyStateProps,
+} from "../empty-state/DataTableEmptyState";
+import {
+  DataTableLoadingState,
+  type DataTableLoadingStateProps,
+} from "../loading-state/DataTableLoadingState";
 import {
   DataTableTbody,
   type DataTableTbodyProps,
@@ -20,9 +28,12 @@ import {
   type DataTableTheadProps,
 } from "../thead/DataTableThead";
 import { DataTableTr, type DataTableTrProps } from "../tr/DataTableTr";
+import { DataTableContextProvider } from "./DataTableRoot.context";
 import { useTableKeyboardNav } from "./useTableKeyboardNav";
+import { type SelectionProps } from "./useTableSelection";
 
-interface DataTableProps extends React.HTMLAttributes<HTMLTableElement> {
+interface DataTableProps
+  extends React.HTMLAttributes<HTMLTableElement>, SelectionProps {
   children: React.ReactNode;
   /**
    * Controls vertical cell padding.
@@ -162,6 +173,30 @@ interface DataTableRootComponent extends React.ForwardRefExoticComponent<
    * ```
    */
   Tfoot: typeof DataTableTfoot;
+  /**
+   * @see 🏷️ {@link DataTableEmptyStateProps}
+   * @example
+   * ```jsx
+   * <DataTable>
+   *   <DataTable.TBody>
+   *     <DataTable.EmptyState />
+   *   </DataTable.TBody>
+   * </DataTable>
+   * ```
+   */
+  EmptyState: typeof DataTableEmptyState;
+  /**
+   * @see 🏷️ {@link DataTableEmptyStateProps}
+   * @example
+   * ```jsx
+   * <DataTable>
+   *   <DataTable.TBody>
+   *     <DataTable.LoadingState />
+   *   </DataTable.TBody>
+   * </DataTable>
+   * ```
+   */
+  LoadingState: typeof DataTableLoadingState;
 }
 
 /**
@@ -193,20 +228,25 @@ const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
     });
 
     return (
-      <div className="aksel-data-table__border-wrapper">
-        <div className="aksel-data-table__scroll-wrapper">
-          <table
-            {...rest}
-            ref={mergedRef}
-            className={cl("aksel-data-table", className)}
-            data-zebra-stripes={zebraStripes}
-            data-truncate-content={truncateContent}
-            data-density={rowDensity}
-            data-layout={layout}
-            tabIndex={tabIndex}
-          />
+      <DataTableContextProvider
+        layout={layout}
+        withKeyboardNav={withKeyboardNav}
+      >
+        <div className="aksel-data-table__border-wrapper">
+          <div className="aksel-data-table__scroll-wrapper">
+            <table
+              {...rest}
+              ref={mergedRef}
+              className={cl("aksel-data-table", className)}
+              data-zebra-stripes={zebraStripes}
+              data-truncate-content={truncateContent}
+              data-density={rowDensity}
+              data-layout={layout}
+              tabIndex={tabIndex}
+            />
+          </div>
         </div>
-      </div>
+      </DataTableContextProvider>
     );
   },
 ) as DataTableRootComponent;
@@ -218,10 +258,14 @@ DataTable.Th = DataTableTh;
 DataTable.Tr = DataTableTr;
 DataTable.Td = DataTableTd;
 DataTable.Tfoot = DataTableTfoot;
+DataTable.EmptyState = DataTableEmptyState;
+DataTable.LoadingState = DataTableLoadingState;
 
 export {
   DataTable,
   DataTableCaption,
+  DataTableEmptyState,
+  DataTableLoadingState,
   DataTableTbody,
   DataTableTd,
   DataTableTfoot,
@@ -232,6 +276,8 @@ export {
 export default DataTable;
 export type {
   DataTableCaptionProps,
+  DataTableEmptyStateProps,
+  DataTableLoadingStateProps,
   DataTableProps,
   DataTableTbodyProps,
   DataTableTdProps,

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

@@ -130,6 +130,7 @@ function useTableKeyboardNav(
   /**
    * When focus is moved to elements inside a cell like inputs, checkbox etc
    * we want to update the active cell to the parent td/th, so that keyboard navigation continues to work as expected from there.
+   * Make sure td/th elements have tabIndex={-1} so they can receive focus on click
    */
   const handleTableFocusIn = useEventCallback((event: FocusEvent): void => {
     const target = event.target as Element | null;

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

@@ -0,0 +1,126 @@
+import type { CheckboxProps } from "../../../form/checkbox/types";
+import { useControllableState } from "../../../utils/hooks";
+
+type SelectionT = (string | number)[] | "all";
+
+type SelectionProps = {
+  /**
+   * Enables selection of rows.
+   *
+   *
+   * When set to "single", only one row can be selected at a time.
+   *
+   * When set to "multiple", multiple rows can be selected.
+   *
+   * TODO:
+   * - Implement callbacks for selection changes (e.g. onRowSelect, onSelectAll)
+   * - Implement controlled state
+   * - Implement auto-add checkbox to rows and header when selection is enabled
+   *
+   * @default "none"
+   */
+  selectionMode?: "none" | "single" | "multiple";
+  selectedKeys?: SelectionT;
+  defaultSelectedKeys?: SelectionT;
+  onSelectionChange?: (keys: SelectionT) => void;
+  disabledKeys?: (string | number)[];
+};
+
+type UseTableSelectionArgs = SelectionProps & {
+  /* disallowEmptySelection?: boolean; */
+  /* TODO: Support generics */
+  data: (any & { id: string | number })[];
+};
+
+function useTableSelection({
+  selectionMode,
+  defaultSelectedKeys,
+  selectedKeys: selectedKeysProp,
+  onSelectionChange,
+  disabledKeys = [],
+  data,
+}: UseTableSelectionArgs) {
+  const [selectedKeys, setSelectedKeys] = useControllableState({
+    value: selectedKeysProp,
+    defaultValue: defaultSelectedKeys ?? [],
+    onChange: onSelectionChange,
+  });
+
+  const handleSelectionChange = (key: { value: string | number } | "all") => {
+    if (selectionMode === "none") {
+      return;
+    }
+
+    if (key === "all") {
+      if (
+        selectedKeys === "all" ||
+        (Array.isArray(selectedKeys) && selectedKeys.length === data.length)
+      ) {
+        setSelectedKeys([]);
+      } else {
+        const allKeys = data.map((item) => item.id);
+        setSelectedKeys(allKeys);
+      }
+    } else {
+      const value = key.value;
+      if (selectedKeys === "all") {
+        setSelectedKeys(
+          data.map((item) => item.id).filter((id) => id !== value),
+        );
+      } else if (Array.isArray(selectedKeys)) {
+        if (selectedKeys.includes(value)) {
+          setSelectedKeys(selectedKeys.filter((k) => k !== value));
+        } else {
+          setSelectedKeys([...selectedKeys, value]);
+        }
+      }
+    }
+  };
+
+  if (selectionMode === "none") {
+    return {
+      selectedKeys: [],
+      handleSelectionChange: () => {},
+      selectionMode,
+      disabledKeys,
+    };
+  }
+
+  return {
+    selectedKeys,
+    handleSelectionChange,
+    selectionMode,
+    disabledKeys,
+    getTheadCheckboxProps: () => {
+      const indeterminate =
+        Array.isArray(selectedKeys) &&
+        selectedKeys.length > 0 &&
+        selectedKeys.length < data.length;
+
+      return {
+        /* TODO: i18n */
+        children: selectionMode === "single" ? "Select row" : "Select all rows",
+        onChange: () => handleSelectionChange("all"),
+        checked:
+          (selectedKeys === "all" ||
+            (Array.isArray(selectedKeys) && selectedKeys.length > 0)) &&
+          !indeterminate,
+        indeterminate,
+        disabled: disabledKeys.length === data.length,
+        hideLabel: true,
+      };
+    },
+    getRowCheckboxProps: (key: string | number): CheckboxProps => ({
+      children: `Select row with id ${key}`,
+      onChange: () => handleSelectionChange({ value: key }),
+      checked:
+        selectedKeys === "all" ||
+        (Array.isArray(selectedKeys) && selectedKeys.includes(key)),
+      disabled: disabledKeys.includes(key),
+      hideLabel: true,
+    }),
+  };
+}
+
+export { useTableSelection };
+export type { SelectionProps };

package/src/data/table/td/DataTableTd.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers";
+import { useDataTableContext } from "../root/DataTableRoot.context";
 
 interface DataTableTdProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
   /**
@@ -14,15 +15,27 @@ interface DataTableTdProps extends React.TdHTMLAttributes<HTMLTableCellElement>
    * Need to work on the name though. Or maybe have two separate props?
    */
   //textWrap?: boolean | number | `${number}${string}`;
+  /**
+   * Content alignment inside cell
+   * @default "left"
+   */
+  textAlign?: "left" | "center" | "right";
 }
 
 const DataTableTd = forwardRef<HTMLTableCellElement, DataTableTdProps>(
-  ({ className, children, contentMaxWidth, ...rest }, forwardedRef) => {
+  (
+    { className, children, contentMaxWidth, textAlign = "left", ...rest },
+    forwardedRef,
+  ) => {
+    const { withKeyboardNav } = useDataTableContext();
+
     return (
       <td
         {...rest}
         ref={forwardedRef}
         className={cl("aksel-data-table__td", className)}
+        tabIndex={withKeyboardNav ? -1 : undefined}
+        data-align={textAlign}
       >
         <div style={{ maxWidth: contentMaxWidth }}>{children}</div>
       </td>

package/src/data/table/th/DataTableTh.tsx

@@ -1,20 +1,46 @@
-import React, { forwardRef } from "react";
-import { FunnelIcon, SortDownIcon, SortUpIcon } from "@navikt/aksel-icons";
-import { ActionMenu } from "../../../action-menu";
-import { HStack, Spacer } from "../../../primitives/stack";
+import React, { forwardRef, useState } from "react";
+import {
+  ArrowsUpDownIcon,
+  CaretLeftCircleFillIcon,
+  CaretRightCircleFillIcon,
+  SortDownIcon,
+  SortUpIcon,
+} from "@navikt/aksel-icons";
 import { cl } from "../../../utils/helpers";
-import { DataTableThActions } from "./DataTableThActions";
-import { DataTableThSortHandle } from "./DataTableThSortHandle";
+import { useMergeRefs } from "../../../utils/hooks";
+import { useDataTableContext } from "../root/DataTableRoot.context";
+import { type ResizeProps, useTableColumnResize } from "./useTableColumnResize";
 
-interface DataTableThProps extends React.HTMLAttributes<HTMLTableCellElement> {
+type SortDirection = "asc" | "desc" | "none";
+
+interface DataTableThProps
+  extends React.HTMLAttributes<HTMLTableCellElement>, ResizeProps {
   resizeHandler?: (
     event:
       | React.MouseEvent<HTMLButtonElement>
       | React.TouchEvent<HTMLButtonElement>,
   ) => void;
-  size?: number; // TODO: size should be required when resizeHandler is set
-  sortDirection?: "asc" | "desc" | "none" | false;
-  onSortChange?: (direction: "asc" | "desc" | "none", event: Event) => void;
+  /**
+   * Content alignment inside cell
+   * @default "left"
+   */
+  textAlign?: "left" | "center" | "right";
+  /**
+   * 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;
   render?: {
     filterMenu?: {
       title: string;
@@ -28,90 +54,132 @@ interface DataTableThProps extends React.HTMLAttributes<HTMLTableCellElement> {
   rowSpan?: number;
 }
 
+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 DataTableTh = forwardRef<HTMLTableCellElement, DataTableThProps>(
   (
     {
       className,
       children,
-      resizeHandler,
-      size,
-      sortDirection,
-      onSortChange,
+      sortable = false,
+      sortDirection = "none",
+      onSortClick,
       style,
-      render,
+      textAlign = "left",
+      width,
+      minWidth,
+      maxWidth,
+      onWidthChange,
+      defaultWidth,
+      colSpan,
       ...rest
     },
     forwardedRef,
   ) => {
-    const { filterMenu } = render || {};
+    const { withKeyboardNav } = useDataTableContext();
+    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 (
       <th
         {...rest}
-        ref={forwardedRef}
+        ref={mergedRef}
         className={cl("aksel-data-table__th", className)}
-        style={{ width: size, ...style }}
+        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)}
+        tabIndex={withKeyboardNav ? -1 : undefined}
+        data-align={textAlign}
+        colSpan={colSpan}
       >
-        <HStack align="center" gap="space-8" wrap={false}>
-          <div className="aksel-data-table__th-content">{children}</div>
-          {/* TODO: If the column is too narrow, the sort button will move when hovering b.c. the actions menu button slides in */}
-          <DataTableThSortHandle
-            sortDirection={sortDirection}
-            onSortChange={onSortChange}
-          />
-          <Spacer />
-
-          <DataTableThActions>
-            {/* TODO: onSortChange just rotates between the three states now */}
-            {/* TODO: Sorting texts do not handle different data-types now */}
-            {sortDirection && (
-              <ActionMenu.Group label="Sortering">
-                <ActionMenu.Item
-                  onSelect={(event) => onSortChange?.("desc", event)}
-                  icon={<SortUpIcon aria-hidden />}
-                >
-                  {sortDirection === "desc" ? "Fjern sortering" : "A-Z"}
-                </ActionMenu.Item>
-                <ActionMenu.Item
-                  onSelect={(event) => onSortChange?.("asc", event)}
-                  icon={<SortDownIcon aria-hidden />}
-                >
-                  {sortDirection === "asc" ? "Fjern sortering" : "Z-A"}
-                </ActionMenu.Item>
-              </ActionMenu.Group>
-            )}
-            {filterMenu && (
-              <ActionMenu.Group label="Filter">
-                <ActionMenu.Sub>
-                  <ActionMenu.SubTrigger icon={<FunnelIcon aria-hidden />}>
-                    {filterMenu.title}
-                  </ActionMenu.SubTrigger>
-                  <ActionMenu.SubContent>
-                    {/* TODO: ActionMenu stops tab from working, so user cant tab "into" filter now even when wrapper has focus */}
-                    {filterMenu.content}
-                  </ActionMenu.SubContent>
-                </ActionMenu.Sub>
-              </ActionMenu.Group>
+        {sortable ? (
+          <button
+            className="aksel-data-table__th-sort-button"
+            onClick={sortable ? onSortClick : undefined}
+          >
+            <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"
+              />
             )}
-          </DataTableThActions>
-        </HStack>
+          </button>
+        ) : (
+          <div ref={contentRef} className="aksel-data-table__th-content">
+            {children}
+          </div>
+        )}
 
-        {resizeHandler && (
+        {resizeResult.enabled && (
           <button
-            // TODO: Should probably not be a button since it doesn't have onClick
-            onMouseDown={resizeHandler}
-            onTouchStart={resizeHandler}
+            {...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>
         )}
       </th>
     );
   },
 );
 
+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 { DataTableTh };
 export type { DataTableThProps };