@navikt/ds-react 8.7.0 → 8.8.0

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

@@ -0,0 +1,182 @@
+import React, { forwardRef, useState } from "react";
+import { Checkbox } from "../../../form/checkbox";
+import { cl } from "../../../utils/helpers";
+import { useMergeRefs } from "../../../utils/hooks";
+import { DataTableTbody } from "../tbody/DataTableTbody";
+import { DataTableTd } from "../td/DataTableTd";
+import { DataTableTh } from "../th/DataTableTh";
+import { DataTableThead } from "../thead/DataTableThead";
+import { DataTableTr } from "../tr/DataTableTr";
+import type { ColumnDefinitions } from "./DataTable.types";
+import { DataTableContextProvider } from "./DataTableRoot.context";
+import { useTableKeyboardNav } from "./useTableKeyboardNav";
+import { type SelectionProps, useTableSelection } from "./useTableSelection";
+
+interface DataTableProps<T>
+  extends React.HTMLAttributes<HTMLTableElement>, SelectionProps {
+  children?: never;
+  /**
+   * Controls vertical cell padding.
+   * @default "normal"
+   */
+  rowDensity?: "condensed" | "normal" | "spacious";
+  /**
+   * Zebra striped table
+   * @default false
+   */
+  zebraStripes?: boolean;
+  /**
+   * Truncate content in cells and show ellipsis for overflowed text.
+   *
+   * **NB:** When using `layout="auto"`, you have to manually set a `maxWidth` on columns that should be truncated.
+   * @default true
+   */
+  truncateContent?: boolean; // TODO: Consider making this default false when layout=auto, and maybe disallow it but add a wrap prop on the td-comp.
+  /**
+   * Enables keyboard navigation for table rows and cells.
+   * @default false
+   */
+  withKeyboardNav?: boolean;
+  /**
+   * Custom callback to determine if navigation should be blocked.
+   * Called before default blocking logic.
+   * Requires `withKeyboardNav` to be `true`.
+   */
+  shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
+  /**
+   * Controls table layout.
+   *
+   * ### fixed
+   * Gives you full control of column widths. This is required for resizable columns.
+   *
+   * ### auto
+   * Makes the columns resize automatically based on the content.
+   * The table will take up at least 100% of available width.
+   *
+   * **NB:** When using this with `truncateContent`, you have to manually
+   * set a `contentMaxWidth` on cells that should be truncated.
+   * @default "fixed"
+   */
+  layout?: "fixed" | "auto";
+  /**
+   *
+   */
+  columnDefinitions: ColumnDefinitions<T>;
+  data: (T & { id: string | number })[];
+}
+
+function DataTableAutoInner<T>(
+  {
+    className,
+    rowDensity = "normal",
+    withKeyboardNav = false,
+    zebraStripes = false,
+    truncateContent = true,
+    shouldBlockNavigation,
+    layout = "fixed",
+    selectionMode: selectionModeProp = "none",
+    selectedKeys,
+    defaultSelectedKeys,
+    onSelectionChange,
+    disabledKeys = [],
+    data,
+    columnDefinitions,
+    ...rest
+  }: DataTableProps<T>,
+  forwardedRef: React.ForwardedRef<HTMLTableElement>,
+) {
+  const [tableRef, setTableRef] = useState<HTMLTableElement | null>(null);
+  const mergedRef = useMergeRefs(forwardedRef, setTableRef);
+
+  const { tabIndex } = useTableKeyboardNav(tableRef, {
+    enabled: withKeyboardNav,
+    shouldBlockNavigation,
+  });
+
+  const { getTheadCheckboxProps, selectionMode, getRowCheckboxProps } =
+    useTableSelection({
+      selectionMode: selectionModeProp,
+      selectedKeys,
+      defaultSelectedKeys,
+      onSelectionChange,
+      disabledKeys,
+      data,
+    });
+
+  return (
+    <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}
+          >
+            <DataTableThead>
+              <DataTableTr>
+                {getTheadCheckboxProps && (
+                  <DataTableTd align="center" width="60px">
+                    <Checkbox {...getTheadCheckboxProps()} />
+                  </DataTableTd>
+                )}
+                {columnDefinitions.map((colDef, colDefIndex) => {
+                  return (
+                    <DataTableTh
+                      maxWidth="400px"
+                      minWidth="100px"
+                      defaultWidth="100%"
+                      textAlign="left"
+                      key={colDef.id || colDefIndex}
+                    >
+                      {colDef.header}
+                    </DataTableTh>
+                  );
+                })}
+              </DataTableTr>
+            </DataTableThead>
+            <DataTableTbody>
+              {data.map((rowData, rowIndex) => {
+                return (
+                  <DataTableTr
+                    key={
+                      rowIndex /* TODO: Should be more flexible to allow user to define the key? */
+                    }
+                  >
+                    {selectionMode !== "none" && getRowCheckboxProps && (
+                      <DataTableTd align="center" width="60px">
+                        <Checkbox {...getRowCheckboxProps(rowData.id)} />
+                      </DataTableTd>
+                    )}
+                    {columnDefinitions.map((colDef, colDefIndex) => {
+                      return (
+                        <DataTableTd
+                          textAlign="left"
+                          key={colDef.id || colDefIndex}
+                        >
+                          {colDef.cell(rowData)}
+                        </DataTableTd>
+                      );
+                    })}
+                  </DataTableTr>
+                );
+              })}
+            </DataTableTbody>
+          </table>
+        </div>
+      </div>
+    </DataTableContextProvider>
+  );
+}
+
+const DataTableAuto = forwardRef(DataTableAutoInner) as <T>(
+  props: DataTableProps<T> & React.RefAttributes<HTMLTableElement>,
+) => React.ReactElement | null;
+
+export { DataTableAuto };
+export type { DataTableProps };
+export default DataTableAuto;

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,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,
@@ -22,8 +30,10 @@ import {
 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.
@@ -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/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,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" />