@navikt/ds-react 8.9.1 → 8.10.0

package/src/data/table/tbody/DataTableTbody.tsx

@@ -1,16 +1,27 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, version } from "react";
 import { cl } from "../../../utils/helpers";
+import {
+  DataTableLocationProvider,
+  useDataTableContext,
+} from "../root/DataTableRoot.context";
 
 type DataTableTbodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
+const inertValue = parseInt(version.split(".")[0], 10) > 18 ? true : ""; // Support for inert was added in React 19
+
 const DataTableTbody = forwardRef<HTMLTableSectionElement, DataTableTbodyProps>(
   ({ className, ...rest }, forwardedRef) => {
+    const { showLoadingOverlay } = useDataTableContext();
     return (
-      <tbody
-        {...rest}
-        ref={forwardedRef}
-        className={cl("aksel-data-table__tbody", className)}
-      />
+      <DataTableLocationProvider location="tbody">
+        <tbody
+          {...rest}
+          ref={forwardedRef}
+          className={cl("aksel-data-table__tbody", className)}
+          // @ts-expect-error - inert is not yet recognized by React's type definitions, but we want to use it for better accessibility when showing the loading overlay.
+          inert={showLoadingOverlay ? inertValue : false}
+        />
+      </DataTableLocationProvider>
     );
   },
 );

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

@@ -1,57 +1,21 @@
 import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers";
-import { useDataTableContext } from "../root/DataTableRoot.context";
+import {
+  DataTableBaseCell,
+  type DataTableBaseCellProps,
+} from "../base-cell/DataTableBaseCell";
 
-interface DataTableTdProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
-  /**
-   * 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}`;
-  /**
-   * TODO: Consider a prop like this instead of contentMaxWidth to use together with layout=auto.
-   * Maybe even with layout=auto as a way to override truncateContent on single cells?
-   * 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";
-  /**
-   * Temp hack to solve overflow and alignment
-   */
-  UNSAFE_isSelection?: boolean;
-}
+type DataTableTdProps = DataTableBaseCellProps;
 
 const DataTableTd = forwardRef<HTMLTableCellElement, DataTableTdProps>(
-  (
-    {
-      className,
-      children,
-      contentMaxWidth,
-      textAlign = "left",
-      UNSAFE_isSelection,
-      ...rest
-    },
-    forwardedRef,
-  ) => {
-    const { withKeyboardNav } = useDataTableContext();
-
+  ({ className, ...rest }, forwardedRef) => {
     return (
-      <td
-        {...rest}
+      <DataTableBaseCell
         ref={forwardedRef}
-        className={cl("aksel-data-table__td", className, {
-          "aksel-data-table--UNSAFE_isSelection": UNSAFE_isSelection,
-        })}
-        tabIndex={withKeyboardNav ? -1 : undefined}
-        data-align={textAlign}
-      >
-        <div style={{ maxWidth: contentMaxWidth }}>{children}</div>
-      </td>
+        {...rest}
+        as="td"
+        className={cl("aksel-data-table__td", className)}
+      />
     );
   },
 );

package/src/data/table/tfoot/DataTableTfoot.tsx

@@ -1,18 +1,21 @@
 import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers";
+import { DataTableLocationProvider } from "../root/DataTableRoot.context";
 
 type DataTableTfootProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
 const DataTableTfoot = forwardRef<HTMLTableSectionElement, DataTableTfootProps>(
   ({ className, children, ...rest }, forwardedRef) => {
     return (
-      <tfoot
-        {...rest}
-        ref={forwardedRef}
-        className={cl("aksel-data-table__tfoot", className)}
-      >
-        {children}
-      </tfoot>
+      <DataTableLocationProvider location="tfoot">
+        <tfoot
+          {...rest}
+          ref={forwardedRef}
+          className={cl("aksel-data-table__tfoot", className)}
+        >
+          {children}
+        </tfoot>
+      </DataTableLocationProvider>
     );
   },
 );

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

@@ -1,196 +1,24 @@
-import React, { forwardRef, useState } from "react";
-import {
-  ArrowsUpDownIcon,
-  CaretLeftCircleFillIcon,
-  CaretRightCircleFillIcon,
-  SortDownIcon,
-  SortUpIcon,
-} from "@navikt/aksel-icons";
+import React, { forwardRef } from "react";
 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>, ResizeProps {
-  resizeHandler?: (
-    event:
-      | React.MouseEvent<HTMLButtonElement>
-      | React.TouchEvent<HTMLButtonElement>,
-  ) => 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;
-      content: React.ReactNode;
-    };
-  };
-  /**
-   * 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;
-}
+import {
+  DataTableBaseCell,
+  type DataTableBaseCellProps,
+} from "../base-cell/DataTableBaseCell";
 
-const SORT_ICON: Record<SortDirection, React.ElementType | null> = {
-  asc: SortUpIcon,
-  desc: SortDownIcon,
-  none: ArrowsUpDownIcon,
-};
+type DataTableThProps = DataTableBaseCellProps;
 
-/**
- * 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,
-      sortable = false,
-      sortDirection = "none",
-      onSortClick,
-      style,
-      textAlign = "left",
-      width,
-      minWidth,
-      maxWidth,
-      onWidthChange,
-      defaultWidth,
-      colSpan,
-      UNSAFE_isSelection,
-      ...rest
-    },
-    forwardedRef,
-  ) => {
-    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;
-
+  ({ className, ...rest }, forwardedRef) => {
     return (
-      <th
+      <DataTableBaseCell
+        ref={forwardedRef}
         {...rest}
-        ref={mergedRef}
+        as="th"
         className={cl("aksel-data-table__th", 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)}
-        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"
-              />
-            )}
-          </button>
-        ) : (
-          <div
-            ref={contentRef}
-            className={cl({
-              "aksel-data-table__th-content": !UNSAFE_isSelection,
-              "aksel-data-table--UNSAFE_isSelection": 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>
-        )}
-      </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 };

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

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

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

@@ -1,32 +1,116 @@
-import React, { forwardRef } from "react";
-import { cl } from "../../../utils/helpers";
-import { useDataTableContext } from "../root/DataTableRoot.context";
+import React, { forwardRef, useCallback } from "react";
+import {
+  ChevronDownUpIcon,
+  ChevronUpDownIcon,
+  MinusIcon,
+  PlusIcon,
+} from "@navikt/aksel-icons";
+import { Button } from "../../../button";
+import { CheckboxInput } from "../../../form/checkbox/checkbox-input/CheckboxInput";
+import { RadioInput } from "../../../form/radio/radio-input/RadioInput";
+import { Skeleton } from "../../../skeleton";
+import { Label } from "../../../typography";
+import { useId } from "../../../utils-external";
+import { cl, composeEventHandlers } from "../../../utils/helpers";
+import { DataTableBaseCell } from "../base-cell/DataTableBaseCell";
+import { DataTableColumnHeader } from "../column-header/DataTableColumnHeader";
+import { useDataTableExpansion } from "../hooks/useTableExpansion";
+import {
+  useDataTableContext,
+  useDataTableLocation,
+} from "../root/DataTableRoot.context";
+import { DataTableTd } from "../td/DataTableTd";
+
+const SELECTION_CELL_WIDTH = "50px";
 
 type DataTableTrProps = React.HTMLAttributes<HTMLTableRowElement> & {
   selected?: boolean;
+  /**
+   * Unique identifier for the row, used for selection..
+   */
+  rowId?: string | number;
 };
 
 const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
-  ({ className, children, selected = false, ...rest }, forwardedRef) => {
-    const { layout } = useDataTableContext();
+  (
+    {
+      className,
+      children,
+      selected: selectedProp = false,
+      rowId,
+      onClick,
+      ...rest
+    },
+    forwardedRef,
+  ) => {
+    const {
+      layout,
+      stickyHeader,
+      selectionState,
+      onRowClick,
+      disableRowSelectionOnClick,
+    } = useDataTableContext();
+    const { location } = useDataTableLocation();
 
     const renderFillerCell = layout === "fixed" && children;
 
+    const selected =
+      selectionState.selection.isRowSelected(rowId ?? "") ?? selectedProp;
+
+    const isSticky = location === "thead" && stickyHeader;
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLTableRowElement>) => {
+        if (
+          location !== "tbody" ||
+          rowId === undefined ||
+          isInteractiveTarget(event.target) ||
+          (event.target as HTMLElement | null)?.closest(
+            "[data-prevent-row-click]",
+          )
+        ) {
+          return;
+        }
+
+        const selection = window.getSelection();
+        if (selection && selection.toString().length > 0) {
+          return;
+        }
+
+        if (
+          !disableRowSelectionOnClick &&
+          selectionState.selection.selectionMode !== "none"
+        ) {
+          selectionState.selection.toggleSelection(rowId);
+        }
+        onRowClick?.(rowId, event);
+      },
+      [
+        disableRowSelectionOnClick,
+        location,
+        onRowClick,
+        rowId,
+        selectionState.selection,
+      ],
+    );
+
     return (
       <tr
         {...rest}
+        onClick={composeEventHandlers(onClick, handleClick)}
         ref={forwardedRef}
-        className={cl("aksel-data-table__tr", className, {
-          "aksel-data-table__tr--selected": selected,
-        })}
+        className={cl("aksel-data-table__tr", className)}
+        data-selected={selected}
+        data-sticky={isSticky || undefined}
       >
+        <RowExpansionCell rowId={rowId} />
+        <RowSelectionCell rowId={rowId} />
         {children}
         {renderFillerCell && (
-          /* TODO: Consider chaning between th and td based on context */
-          /* using div causes illegal dom structure */
+          /* Using div causes illegal dom structure */
           <td
             aria-hidden
-            className="aksel-data-table__th aksel-data-table__filler-cell"
+            className="aksel-data-table__cell aksel-data-table__filler-cell"
             data-block-keyboard-nav
           />
         )}
@@ -35,5 +119,210 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
   },
 );
 
+function RowExpansionCell({ rowId }: { rowId?: string | number }) {
+  const { tableId, showLoadingSkeletons } = useDataTableContext();
+  const { location } = useDataTableLocation();
+  const expansionContext = useDataTableExpansion(false);
+
+  if (!expansionContext) {
+    return null;
+  }
+
+  const {
+    isExpanded,
+    toggleExpansion,
+    enableExpansion,
+    isAllExpanded,
+    toggleAll,
+    showExpandAll,
+  } = expansionContext;
+
+  if (!enableExpansion) {
+    return null;
+  }
+
+  if (showLoadingSkeletons) {
+    if (location === "thead") {
+      return (
+        <DataTableColumnHeader
+          width={SELECTION_CELL_WIDTH}
+          UNSAFE_isSelection
+          data-block-keyboard-nav
+          /* isSticky={stickySelection && "start"} */
+        />
+      );
+    }
+    return (
+      <DataTableBaseCell as="td">
+        <Skeleton variant="text" />
+      </DataTableBaseCell>
+    );
+  }
+
+  if (location === "thead" && !showExpandAll) {
+    return (
+      <DataTableColumnHeader
+        width={SELECTION_CELL_WIDTH}
+        UNSAFE_isSelection
+        data-block-keyboard-nav
+        /* isSticky={stickySelection && "start"} */
+      />
+    );
+  }
+
+  if (location === "thead") {
+    return (
+      <DataTableColumnHeader
+        textAlign="center"
+        width={SELECTION_CELL_WIDTH}
+        UNSAFE_isSelection
+        /* isSticky={stickySelection && "start"} */
+      >
+        <Button
+          variant="tertiary"
+          data-color="neutral"
+          size="xsmall"
+          onClick={toggleAll}
+          aria-expanded={isAllExpanded}
+          aria-label={isAllExpanded ? "Skjul alle rader" : "Vis alle rader"}
+          icon={
+            isAllExpanded ? (
+              <ChevronDownUpIcon aria-hidden />
+            ) : (
+              <ChevronUpDownIcon aria-hidden />
+            )
+          }
+        />
+      </DataTableColumnHeader>
+    );
+  }
+
+  if (!rowId) {
+    return null;
+  }
+
+  const isRowExpanded = isExpanded(rowId);
+
+  return (
+    <DataTableTd UNSAFE_isSelection preventRowClick>
+      <Button
+        variant="tertiary"
+        data-color="neutral"
+        size="xsmall"
+        onClick={(e) => {
+          e.stopPropagation();
+          toggleExpansion(rowId);
+        }}
+        aria-expanded={isRowExpanded}
+        aria-controls={`${tableId}-expansion-${rowId}`}
+        aria-label={isRowExpanded ? "Skjul detaljer" : "Vis detaljer"}
+        icon={
+          isRowExpanded ? <MinusIcon aria-hidden /> : <PlusIcon aria-hidden />
+        }
+      />
+    </DataTableTd>
+  );
+}
+
+/**
+ * TODO: How do these cells handle multiple thead rows, or col/rowspans?
+ * TODO: a11y for labels
+ */
+function RowSelectionCell({ rowId }: { rowId?: string | number }) {
+  const { selectionState, stickySelection, showLoadingSkeletons } =
+    useDataTableContext();
+  const { location } = useDataTableLocation();
+  const inputId = useId();
+
+  const { selection, renderSelection } = selectionState;
+
+  if (selection.selectionMode === "none" || !renderSelection) {
+    return null;
+  }
+
+  if (showLoadingSkeletons) {
+    if (location === "thead") {
+      return (
+        <DataTableColumnHeader
+          width={SELECTION_CELL_WIDTH}
+          UNSAFE_isSelection
+          data-block-keyboard-nav
+          isSticky={stickySelection && "start"}
+        />
+      );
+    }
+
+    return (
+      <DataTableBaseCell as="td">
+        <Skeleton variant="text" />
+      </DataTableBaseCell>
+    );
+  }
+
+  /* TODO: A11y support */
+  if (selection.selectionMode === "multiple" && location === "thead") {
+    const theadCheckboxProps = selection.getTheadCheckboxProps();
+
+    let labelText = "Velg alle synlige rader";
+    if (theadCheckboxProps.checked) {
+      labelText = "Fjern alle synlige valgte rader";
+    }
+
+    return (
+      <DataTableColumnHeader
+        textAlign="center"
+        width={SELECTION_CELL_WIDTH}
+        UNSAFE_isSelection
+        isSticky={stickySelection && "start"}
+      >
+        <Label htmlFor={inputId} visuallyHidden>
+          {labelText}
+        </Label>
+        <CheckboxInput {...theadCheckboxProps} id={inputId} compact />
+      </DataTableColumnHeader>
+    );
+  }
+
+  if (selection.selectionMode === "single" && location === "thead") {
+    return (
+      <DataTableColumnHeader
+        width={SELECTION_CELL_WIDTH}
+        UNSAFE_isSelection
+        data-block-keyboard-nav
+        isSticky={stickySelection && "start"}
+      />
+    );
+  }
+
+  if (rowId == null) {
+    return null;
+  }
+
+  if (selection.selectionMode === "multiple" && location === "tbody") {
+    return (
+      <DataTableTd UNSAFE_isSelection isSticky={stickySelection && "start"}>
+        <CheckboxInput {...selection.getRowCheckboxProps(rowId)} compact />
+      </DataTableTd>
+    );
+  }
+
+  if (selection.selectionMode === "single" && location === "tbody") {
+    return (
+      <DataTableTd UNSAFE_isSelection isSticky={stickySelection && "start"}>
+        <RadioInput {...selection.getRowRadioProps(rowId)} />
+      </DataTableTd>
+    );
+  }
+
+  return null;
+}
+
+/* Utils */
+function isInteractiveTarget(target: EventTarget | null): boolean {
+  return !!(target as HTMLElement | null)?.closest(
+    "a, button, input, select, textarea",
+  );
+}
+
 export { DataTableTr };
 export type { DataTableTrProps };