@navikt/ds-react 8.7.0 → 8.9.0

package/src/data/table/root/DataTableRoot.context.ts

@@ -1,8 +1,9 @@
 import { createStrictContext } from "../../../utils/helpers";
 
-interface DataTableContextProps {
+type DataTableContextProps = {
   layout: "fixed" | "auto";
-}
+  withKeyboardNav: boolean;
+};
 
 const { Provider: DataTableContextProvider, useContext: useDataTableContext } =
   createStrictContext<DataTableContextProps>({

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

@@ -5,6 +5,16 @@ import {
   DataTableCaption,
   type DataTableCaptionProps,
 } from "../caption/DataTableCaption";
+import {
+  DataTableEmptyState,
+  type DataTableEmptyStateProps,
+} from "../empty-state/DataTableEmptyState";
+import { useTableKeyboardNav } from "../hooks/useTableKeyboardNav";
+import { type SelectionProps } from "../hooks/useTableSelection";
+import {
+  DataTableLoadingState,
+  type DataTableLoadingStateProps,
+} from "../loading-state/DataTableLoadingState";
 import {
   DataTableTbody,
   type DataTableTbodyProps,
@@ -21,9 +31,9 @@ import {
 } from "../thead/DataTableThead";
 import { DataTableTr, type DataTableTrProps } from "../tr/DataTableTr";
 import { DataTableContextProvider } from "./DataTableRoot.context";
-import { useTableKeyboardNav } from "./useTableKeyboardNav";
 
-interface DataTableProps extends React.HTMLAttributes<HTMLTableElement> {
+interface DataTableProps
+  extends React.HTMLAttributes<HTMLTableElement>, SelectionProps {
   children: React.ReactNode;
   /**
    * Controls vertical cell padding.
@@ -163,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;
 }
 
 /**
@@ -194,7 +228,10 @@ const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
     });
 
     return (
-      <DataTableContextProvider layout={layout}>
+      <DataTableContextProvider
+        layout={layout}
+        withKeyboardNav={withKeyboardNav}
+      >
         <div className="aksel-data-table__border-wrapper">
           <div className="aksel-data-table__scroll-wrapper">
             <table
@@ -221,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,
@@ -235,6 +276,8 @@ export {
 export default DataTable;
 export type {
   DataTableCaptionProps,
+  DataTableEmptyStateProps,
+  DataTableLoadingStateProps,
   DataTableProps,
   DataTableTbodyProps,
   DataTableTdProps,

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,4 +1,4 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useState } from "react";
 import {
   ArrowsUpDownIcon,
   CaretLeftCircleFillIcon,
@@ -7,16 +7,24 @@ import {
   SortUpIcon,
 } from "@navikt/aksel-icons";
 import { cl } from "../../../utils/helpers";
+import { useMergeRefs } from "../../../utils/hooks";
+import { useDataTableContext } from "../root/DataTableRoot.context";
+import { type ResizeProps, useTableColumnResize } from "./useTableColumnResize";
 
 type SortDirection = "asc" | "desc" | "none";
 
-interface DataTableThProps extends React.HTMLAttributes<HTMLTableCellElement> {
+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
+  /**
+   * 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.
@@ -44,7 +52,6 @@ interface DataTableThProps extends React.HTMLAttributes<HTMLTableCellElement> {
    */
   colSpan?: number;
   rowSpan?: number;
-  keyboardResizingHandler?: (size: number) => void;
 }
 
 const SORT_ICON: Record<SortDirection, React.ElementType | null> = {
@@ -56,51 +63,57 @@ const SORT_ICON: Record<SortDirection, React.ElementType | null> = {
 /**
  * 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,
       sortable = false,
       sortDirection = "none",
       onSortClick,
       style,
-      keyboardResizingHandler,
+      textAlign = "left",
+      width,
+      minWidth,
+      maxWidth,
+      onWidthChange,
+      defaultWidth,
+      colSpan,
       ...rest
     },
     forwardedRef,
   ) => {
-    const [resizeHandlerActive, setResizeHandlerActive] = React.useState(false);
+    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 keyDownHandler = (event: React.KeyboardEvent<HTMLButtonElement>) => {
-      if (keyboardResizingHandler) {
-        if (event.key === "Enter" || event.key === " ") {
-          event.preventDefault();
-          setResizeHandlerActive((active) => !active);
-        } else if (
-          resizeHandlerActive &&
-          (event.key === "ArrowLeft" || event.key === "ArrowRight")
-        ) {
-          event.preventDefault();
-          keyboardResizingHandler(event.key === "ArrowRight" ? 10 : -10);
-        }
-      }
-    };
+    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)}
         data-sortable={sortable}
-        style={{ width: size, ...style }}
+        style={resizeResult.style}
         aria-sort={sortable ? getAriaSort(sortDirection) : undefined}
         onPointerEnter={() => {
           const el = contentRef.current;
@@ -108,22 +121,26 @@ const DataTableTh = forwardRef<HTMLTableCellElement, DataTableThProps>(
           console.info("is overflowing", isOverflowing);
         }}
         onPointerLeave={() => setIsOverflowing(false)}
+        tabIndex={withKeyboardNav ? -1 : undefined}
+        data-align={textAlign}
+        colSpan={colSpan}
       >
         {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"
               />
             )}
-            <div ref={contentRef} className="aksel-data-table__th-content">
-              {children}
-            </div>
           </button>
         ) : (
           <div ref={contentRef} className="aksel-data-table__th-content">
@@ -131,19 +148,14 @@ const DataTableTh = forwardRef<HTMLTableCellElement, DataTableThProps>(
           </div>
         )}
 
-        {resizeHandler && (
+        {resizeResult.enabled && (
           <button
-            // TODO: Should probably not be a button since it doesn't have onClick
-            onMouseDown={resizeHandler}
-            onTouchStart={resizeHandler}
-            onBlur={() => setResizeHandlerActive(false)}
+            {...resizeResult.resizeHandlerProps}
             className="aksel-data-table__th-resize-handle"
-            data-active={resizeHandlerActive}
-            // TODO Very open to a better name for this
+            data-active={resizeResult.isResizingWithKeyboard}
             data-block-keyboard-nav
-            onKeyDown={keyDownHandler}
           >
-            {resizeHandlerActive && (
+            {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" />

package/src/data/table/th/useTableColumnResize.ts

@@ -0,0 +1,276 @@
+import { type DOMAttributes, useCallback, useState } from "react";
+import { useControllableState } from "../../../utils/hooks";
+import { useDataTableContext } from "../root/DataTableRoot.context";
+
+type ColumnWidth = number | string;
+
+type ResizeProps = {
+  ref: HTMLTableCellElement | null;
+  /**
+   * Controlled width of the column.
+   *
+   * Should only be used to fully control column width state. Otherwise, use `defaultWidth` and let the component handle resizing.
+   */
+  width?: ColumnWidth;
+  /**
+   * Initial width of the column. Only used when `width` is not set.
+   */
+  defaultWidth?: ColumnWidth;
+  /**
+   * Minimum width of the column.
+   *
+   * Should be used in conjunction with `width` or `defaultWidth` to set limits when resizing.
+   */
+  minWidth?: ColumnWidth;
+  /**
+   * Maximum width of the column.
+   *
+   * Should be used in conjunction with `width` or `defaultWidth` to set limits when resizing.
+   */
+  maxWidth?: ColumnWidth;
+  /**
+   * Called when the column width changes.
+   */
+  onWidthChange?: (width: ColumnWidth) => void;
+  /**
+   * Forwarded styles
+   */
+  style?: React.CSSProperties;
+  /**
+   * Forwarded colSpan
+   */
+  colSpan?: number;
+};
+
+type TableColumnResizeArgs = ResizeProps & {};
+
+type TableColumnResizeResult =
+  | {
+      style?: React.CSSProperties;
+      resizeHandlerProps: {
+        onMouseDown: DOMAttributes<HTMLButtonElement>["onMouseDown"];
+        onTouchStart: DOMAttributes<HTMLButtonElement>["onTouchStart"];
+        onKeyDown: DOMAttributes<HTMLButtonElement>["onKeyDown"];
+        onBlur: DOMAttributes<HTMLButtonElement>["onBlur"];
+        onDoubleClick: DOMAttributes<HTMLButtonElement>["onDoubleClick"];
+      };
+      isResizingWithKeyboard: boolean;
+      enabled: true;
+    }
+  | {
+      style?: React.CSSProperties;
+      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 {
+    ref,
+    width: userWidth,
+    defaultWidth,
+    onWidthChange,
+    maxWidth = Infinity,
+    minWidth = 40,
+    style,
+    colSpan,
+  } = args;
+
+  const tableContext = useDataTableContext();
+
+  const [width, _setWidth] = useControllableState({
+    value: userWidth,
+    defaultValue: defaultWidth ?? (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,
+  });
+
+  const [isResizingWithKeyboard, setIsResizingWithKeyboard] = useState(false);
+  const [, setIsResizingWithMouse] = useState(false);
+
+  const setWidth = useCallback(
+    (newWidth: number) => {
+      const currentWidth = ref?.offsetWidth;
+      if (!currentWidth) {
+        return;
+      }
+
+      const min = parseWidth(minWidth) ?? 0;
+      const max = parseWidth(maxWidth) ?? Infinity;
+      const clamped = Math.min(Math.max(newWidth, min), max);
+
+      if (newWidth <= currentWidth && newWidth > max) {
+        _setWidth(newWidth);
+        return;
+      }
+
+      if (newWidth >= currentWidth && newWidth > max) {
+        _setWidth(currentWidth);
+        return;
+      }
+
+      _setWidth(clamped);
+    },
+    [minWidth, maxWidth, _setWidth, ref],
+  );
+
+  const handleKeyDown: DOMAttributes<HTMLButtonElement>["onKeyDown"] =
+    useCallback(
+      (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          setIsResizingWithKeyboard((prev) => !prev);
+          return;
+        }
+
+        if (!isResizingWithKeyboard) {
+          return;
+        }
+
+        if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+          event.preventDefault();
+
+          const th = (event.target as HTMLElement).closest(
+            "th",
+          ) as HTMLTableCellElement;
+          const startWidth = th.offsetWidth;
+
+          const delta = event.key === "ArrowRight" ? 20 : -20;
+          setWidth(startWidth + delta);
+        }
+      },
+      [isResizingWithKeyboard, setWidth],
+    );
+
+  const startResize = useCallback(
+    (th: HTMLTableCellElement, startX: number) => {
+      setIsResizingWithMouse(true);
+      const startWidth = th.offsetWidth;
+
+      function onPointerMove(clientX: number) {
+        setWidth(startWidth + (clientX - startX));
+      }
+
+      function onMouseMove(e: MouseEvent) {
+        onPointerMove(e.clientX);
+      }
+
+      function onTouchMove(e: TouchEvent) {
+        e.preventDefault();
+        onPointerMove(e.touches[0].clientX);
+      }
+
+      function cleanup() {
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("touchmove", onTouchMove);
+        document.removeEventListener("mouseup", cleanup);
+        document.removeEventListener("touchend", cleanup);
+        document.removeEventListener("touchcancel", cleanup);
+        setIsResizingWithMouse(false);
+      }
+
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("touchmove", onTouchMove, { passive: false });
+      document.addEventListener("mouseup", cleanup);
+      document.addEventListener("touchend", cleanup);
+      document.addEventListener("touchcancel", cleanup);
+    },
+    [setWidth],
+  );
+
+  const handleMouseDown: DOMAttributes<HTMLButtonElement>["onMouseDown"] =
+    useCallback(
+      (event) => {
+        const th = (event.target as HTMLElement).closest(
+          "th",
+        ) as HTMLTableCellElement;
+        startResize(th, event.clientX);
+      },
+      [startResize],
+    );
+
+  const handleTouchStart: DOMAttributes<HTMLButtonElement>["onTouchStart"] =
+    useCallback(
+      (event) => {
+        const th = (event.target as HTMLElement).closest(
+          "th",
+        ) as HTMLTableCellElement;
+        startResize(th, event.touches[0].clientX);
+      },
+      [startResize],
+    );
+
+  /**
+   * TODO: Do we even want this?
+   * - + 32px padding is hardcoded now, fix this
+   * - Need to find widest element in column, not the header itself.
+   * - Should doubleclick just reset to defaultWidth? Or add a autoWidth prop.
+   */
+  const handleDoubleClick: DOMAttributes<HTMLButtonElement>["onDoubleClick"] =
+    useCallback(
+      (event) => {
+        const th = (event.target as HTMLElement).closest(
+          "th",
+        ) as HTMLTableCellElement;
+
+        const contentEl = th.getElementsByClassName(
+          "aksel-data-table__th-content",
+        )[0];
+        const range = document.createRange();
+        range.selectNodeContents(contentEl);
+        const contentWidth = range.getBoundingClientRect().width;
+
+        setWidth(contentWidth + 32);
+      },
+      [setWidth],
+    );
+
+  if (tableContext.layout !== "fixed") {
+    return {
+      style,
+      enabled: false,
+    };
+  }
+
+  return {
+    style: {
+      ...style,
+      width,
+    },
+    resizeHandlerProps: {
+      onMouseDown: handleMouseDown,
+      onTouchStart: handleTouchStart,
+      onKeyDown: handleKeyDown,
+      onBlur: () => setIsResizingWithKeyboard(false),
+      onDoubleClick: handleDoubleClick,
+    },
+    isResizingWithKeyboard,
+    enabled: true,
+  };
+}
+
+function parseWidth(width: ColumnWidth | undefined): number | undefined {
+  if (width == null) {
+    return undefined;
+  }
+  if (typeof width === "number") {
+    return width;
+  }
+  if (typeof width === "string") {
+    const parsed = parseInt(width, 10);
+    return Number.isNaN(parsed) ? undefined : parsed;
+  }
+  return undefined;
+}
+
+export { useTableColumnResize };
+export type { ResizeProps };

package/src/data/table/thead/DataTableThead.context.ts

@@ -0,0 +1,10 @@
+import React, { createContext } from "react";
+
+const DataTableTheadContext = createContext<boolean>(false);
+
+function useDataTableThead(): boolean {
+  const context = React.useContext(DataTableTheadContext);
+  return context;
+}
+
+export { DataTableTheadContext, useDataTableThead };

package/src/data/table/thead/DataTableThead.tsx

@@ -1,16 +1,19 @@
 import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers";
+import { DataTableTheadContext } from "./DataTableThead.context";
 
 type DataTableTheadProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
 const DataTableThead = forwardRef<HTMLTableSectionElement, DataTableTheadProps>(
   ({ className, ...rest }, forwardedRef) => {
     return (
-      <thead
-        {...rest}
-        ref={forwardedRef}
-        className={cl("aksel-data-table__thead", className)}
-      />
+      <DataTableTheadContext.Provider value={true}>
+        <thead
+          {...rest}
+          ref={forwardedRef}
+          className={cl("aksel-data-table__thead", className)}
+        />
+      </DataTableTheadContext.Provider>
     );
   },
 );

package/src/data/table/tr/DataTableTr.tsx

@@ -8,9 +8,9 @@ type DataTableTrProps = React.HTMLAttributes<HTMLTableRowElement> & {
 
 const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
   ({ className, children, selected = false, ...rest }, forwardedRef) => {
-    const rootContext = useDataTableContext();
+    const { layout } = useDataTableContext();
 
-    const renderFillerCell = rootContext.layout === "fixed" && children;
+    const renderFillerCell = layout === "fixed" && children;
 
     return (
       <tr
@@ -23,7 +23,12 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
         {children}
         {renderFillerCell && (
           /* TODO: Consider chaning between th and td based on context */
-          <div className="aksel-data-table__th aksel-data-table__filler-cell" />
+          /* using div causes illegal dom structure */
+          <td
+            aria-hidden
+            className="aksel-data-table__th aksel-data-table__filler-cell"
+            data-block-keyboard-nav
+          />
         )}
       </tr>
     );