@navikt/ds-react 8.10.2 → 8.10.3

package/src/data/table/root/DataTable.types.ts

@@ -12,11 +12,12 @@ type ColumnDefinition<T> = {
   minWidth?: number | string;
   maxWidth?: number | string;
   /**
-   * Currently only handles cell alignment.
-   * TODO: Should this include centering?
-   * type "icon" or something to avoid ellipsis on actions, tags etc
+   * Text alignment for cells in this column.
+   *
+   *
+   * @default "left"
    */
-  type?: "string" | "number";
+  align?: "left" | "right" | "center";
   /**
    * Assigned to the cell's `th` element instead of `td` if true.
    *

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

@@ -20,6 +20,20 @@ const data: TestRow[] = [
   },
 ];
 
+const deepNestedData: TestRow[] = [
+  {
+    id: "root",
+    name: "Root",
+    subRows: [
+      {
+        id: "child",
+        name: "Child",
+        subRows: [{ id: "grandchild", name: "Grandchild" }],
+      },
+    ],
+  },
+];
+
 const fallbackIdData: TestRow[] = [
   {
     id: "unused-root-1",
@@ -49,7 +63,7 @@ describe("DataTableAuto", () => {
         data={data}
         getRowId={(row) => row.id}
         getSubRows={(row) => row.subRows ?? []}
-        selectionMode="multiple"
+        selection={{ selectionMode: "multiple" }}
       />,
     );
 
@@ -78,7 +92,7 @@ describe("DataTableAuto", () => {
         data={fallbackIdData}
         getSubRows={(row) => row.subRows ?? []}
         defaultExpandedSubRowIds={[0]}
-        selectionMode="multiple"
+        selection={{ selectionMode: "multiple" }}
       />,
     );
 
@@ -94,6 +108,118 @@ describe("DataTableAuto", () => {
     expect(rowCheckboxes.every((checkbox) => checkbox.checked)).toBe(true);
   });
 
+  test("parent row selection follows visible nested rows", () => {
+    render(
+      <DataTableAuto
+        columnDefinitions={columns}
+        data={data}
+        getRowId={(row) => row.id}
+        getSubRows={(row) => row.subRows ?? []}
+        selection={{ selectionMode: "multiple" }}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Vis under-rader" }));
+
+    const getCheckboxes = () =>
+      screen.getAllByRole("checkbox") as HTMLInputElement[];
+
+    fireEvent.click(getCheckboxes()[2]);
+
+    expect(getCheckboxes()[1].checked).toBe(false);
+    expect(getCheckboxes()[1].indeterminate).toBe(true);
+
+    fireEvent.click(getCheckboxes()[1]);
+
+    expect(getCheckboxes()[1].checked).toBe(true);
+    expect(getCheckboxes()[2].checked).toBe(true);
+
+    fireEvent.click(getCheckboxes()[1]);
+
+    expect(getCheckboxes()[1].checked).toBe(false);
+    expect(getCheckboxes()[2].checked).toBe(false);
+  });
+
+  test("collapsed parent selection includes hidden descendants and can clear them again", () => {
+    render(
+      <DataTableAuto
+        columnDefinitions={columns}
+        data={deepNestedData}
+        getRowId={(row) => row.id}
+        getSubRows={(row) => row.subRows ?? []}
+        selection={{ selectionMode: "multiple" }}
+      />,
+    );
+
+    const getCheckboxes = () =>
+      screen.getAllByRole("checkbox") as HTMLInputElement[];
+
+    fireEvent.click(getCheckboxes()[1]);
+
+    fireEvent.click(screen.getByRole("button", { name: "Vis under-rader" }));
+
+    expect(getCheckboxes()[1].checked).toBe(true);
+    expect(getCheckboxes()[2].checked).toBe(true);
+
+    fireEvent.click(screen.getByRole("button", { name: "Vis under-rader" }));
+
+    expect(getCheckboxes()[3].checked).toBe(true);
+
+    fireEvent.click(
+      screen.getAllByRole("button", { name: "Skjul under-rader" })[0],
+    );
+    fireEvent.click(getCheckboxes()[1]);
+
+    fireEvent.click(screen.getByRole("button", { name: "Vis under-rader" }));
+
+    expect(getCheckboxes()[1].checked).toBe(false);
+    expect(getCheckboxes()[2].checked).toBe(false);
+    expect(getCheckboxes()[3].checked).toBe(false);
+  });
+
+  test("select-all includes hidden descendants for collapsed parents and clears them again", () => {
+    render(
+      <DataTableAuto
+        columnDefinitions={columns}
+        data={deepNestedData}
+        getRowId={(row) => row.id}
+        getSubRows={(row) => row.subRows ?? []}
+        selection={{ selectionMode: "multiple" }}
+      />,
+    );
+
+    const getCheckboxes = () =>
+      screen.getAllByRole("checkbox") as HTMLInputElement[];
+
+    fireEvent.click(
+      screen.getByRole("checkbox", { name: "Velg alle synlige rader" }),
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Vis under-rader" }));
+
+    expect(getCheckboxes()[1].checked).toBe(true);
+    expect(getCheckboxes()[2].checked).toBe(true);
+
+    fireEvent.click(screen.getByRole("button", { name: "Vis under-rader" }));
+
+    expect(getCheckboxes()[3].checked).toBe(true);
+
+    fireEvent.click(
+      screen.getByRole("checkbox", { name: "Fjern alle synlige valgte rader" }),
+    );
+
+    expect(getCheckboxes()[0].checked).toBe(false);
+
+    fireEvent.click(
+      screen.getAllByRole("button", { name: "Skjul under-rader" })[0],
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Vis under-rader" }));
+
+    expect(getCheckboxes()[1].checked).toBe(false);
+    expect(getCheckboxes()[2].checked).toBe(false);
+    expect(getCheckboxes()[3].checked).toBe(false);
+  });
+
   test("does not render expansion controls in the manual table variant", () => {
     render(
       <DataTable>

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

@@ -1,5 +1,5 @@
 /** biome-ignore-all lint/correctness/useHookAtTopLevel: False positive because of the way forwardRef() is added */
-import React, { forwardRef, useMemo } from "react";
+import React, { forwardRef } from "react";
 import { ChevronDownIcon, ChevronRightIcon } from "@navikt/aksel-icons";
 import { Button } from "../../../button";
 import { Skeleton } from "../../../skeleton";
@@ -38,10 +38,7 @@ import {
 } from "./DataTableRoot.context";
 
 interface DataTableProps<T>
-  extends
-    React.HTMLAttributes<HTMLTableElement>,
-    SelectionProps,
-    TableSortOptions {
+  extends React.HTMLAttributes<HTMLTableElement>, TableSortOptions {
   children?: never;
   /**
    * Controls vertical cell padding.
@@ -202,12 +199,20 @@ interface DataTableProps<T>
   /**
    * Function to get sub-rows for a given row, used for nested rows.
    * When provided, an expand toggle column is added automatically.
+   *
+   *
+   * TODO:
+   * - Table might need to be implemented with role="treegrid" for a11y when having nested rows.
    */
   getSubRows?: (rowData: T) => T[];
   expandedSubRowIds?: (string | number)[];
   defaultExpandedSubRowIds?: (string | number)[];
   isSubRowExpandable?: (rowData: T) => boolean;
   onExpandedSubRowIdsChange?: (ids: (string | number)[]) => void;
+  /**
+   * Props for row selection functionality.
+   */
+  selection?: SelectionProps;
 }
 
 function DataTableAutoInner<T>(
@@ -220,11 +225,7 @@ function DataTableAutoInner<T>(
     truncateContent = true,
     shouldBlockNavigation,
     layout = "fixed",
-    selectionMode: selectionModeProp = "none",
-    selectedKeys,
-    defaultSelectedKeys,
-    onSelectionChange,
-    disabledSelectionKeys = [],
+    selection,
     data,
     columnDefinitions,
     getRowId,
@@ -239,7 +240,6 @@ function DataTableAutoInner<T>(
     loadingState,
     loadingRows,
     loadingLabel = "Laster innhold",
-    disableRowSelectionOnClick = false,
     getDetailsPanelContent,
     isDetailsPanelExpandable,
     getDetailsPanelHeight,
@@ -279,15 +279,14 @@ function DataTableAutoInner<T>(
     onExpandedSubRowIdsChange,
   });
 
-  const allRowKeys = useMemo(() => {
-    const rowKeys: (string | number)[] = [];
-
-    for (const details of tableItems.itemDetails.values()) {
-      rowKeys.push(details.id);
-    }
-
-    return rowKeys;
-  }, [tableItems.itemDetails]);
+  const {
+    selectionMode: selectionModeProp = "none",
+    selectedKeys,
+    defaultSelectedKeys,
+    onSelectionChange,
+    disabledSelectionKeys = [],
+    disableRowSelectionOnClick = false,
+  } = selection || {};
 
   const tableSelectionState = useTableSelection({
     selectionMode: selectionModeProp,
@@ -295,7 +294,8 @@ function DataTableAutoInner<T>(
     defaultSelectedKeys,
     onSelectionChange,
     disabledSelectionKeys,
-    allRowKeys,
+    visibleRowIds: tableItems.visibleRowIds,
+    childRowIdsById: tableItems.childRowIdsById,
   });
 
   const { columns, stickySelection } = useColumnOptions<T>(columnDefinitions, {
@@ -326,62 +326,62 @@ function DataTableAutoInner<T>(
       showLoadingOverlay={isLoading && !loadingState && !loadingRows}
       columns={columns}
     >
-      <DataTableExpansionProvider
-        detailsPanelRowIds={detailsPanelRowIds}
-        defaultDetailsPanelRowIds={defaultDetailsPanelRowIds}
-        onDetailsPanelChange={onDetailsPanelChange}
+      <TableItemsProvider
         itemDetails={tableItems.itemDetails}
-        getDetailsPanelContent={getDetailsPanelContent}
-        isDetailsPanelExpandable={isDetailsPanelExpandable}
-        getDetailsPanelHeight={getDetailsPanelHeight}
-        showExpandAll={showExpandAll}
+        items={tableItems.items}
+        onExpandedSubRowIdsChange={tableItems.onExpandedSubRowIdsChange}
+        isSubRowExpanded={tableItems.isSubRowExpanded}
       >
-        <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}
-              data-loading={isLoading || undefined}
-              tabIndex={tabIndex}
-              aria-busy={isLoading || undefined}
-            >
-              <DataTableThead>
-                <DataTableTr>
-                  {columns.map(({ isSticky, colDef }) => {
-                    const sortEntry = sortState.find(
-                      (s) => s.columnId === colDef.id,
-                    );
-                    const sortDirection = sortEntry?.direction ?? "none";
-                    return (
-                      <DataTableColumnHeader
-                        maxWidth={colDef.maxWidth}
-                        minWidth={colDef.minWidth}
-                        width={colDef.width}
-                        defaultWidth={colDef.defaultWidth ?? "100%"}
-                        textAlign={colDef.type === "number" ? "right" : "left"}
-                        key={colDef.id}
-                        isSticky={isSticky}
-                        sortable={colDef.sortable}
-                        sortDirection={sortDirection}
-                        onSortClick={(event) => onSortClick(colDef.id, event)}
-                      >
-                        {colDef.header}
-                      </DataTableColumnHeader>
-                    );
-                  })}
-                </DataTableTr>
-              </DataTableThead>
-              <TableItemsProvider
-                itemDetails={tableItems.itemDetails}
-                items={tableItems.items}
-                onExpandedSubRowIdsChange={tableItems.onExpandedSubRowIdsChange}
-                isSubRowExpanded={tableItems.isSubRowExpanded}
+        <DataTableExpansionProvider
+          detailsPanelRowIds={detailsPanelRowIds}
+          defaultDetailsPanelRowIds={defaultDetailsPanelRowIds}
+          onDetailsPanelChange={onDetailsPanelChange}
+          getDetailsPanelContent={getDetailsPanelContent}
+          isDetailsPanelExpandable={isDetailsPanelExpandable}
+          getDetailsPanelHeight={getDetailsPanelHeight}
+          showExpandAll={showExpandAll}
+        >
+          <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}
+                data-loading={isLoading || undefined}
+                tabIndex={tabIndex}
+                aria-busy={isLoading || undefined}
               >
+                <DataTableThead>
+                  <DataTableTr>
+                    {columns.map(({ isSticky, colDef }) => {
+                      const sortEntry = sortState.find(
+                        (s) => s.columnId === colDef.id,
+                      );
+                      const sortDirection = sortEntry?.direction ?? "none";
+                      return (
+                        <DataTableColumnHeader
+                          maxWidth={colDef.maxWidth}
+                          minWidth={colDef.minWidth}
+                          width={colDef.width}
+                          defaultWidth={colDef.defaultWidth ?? "100%"}
+                          textAlign={colDef.align ?? "left"}
+                          key={colDef.id}
+                          isSticky={isSticky}
+                          sortable={colDef.sortable}
+                          sortDirection={sortDirection}
+                          onSortClick={(event) => onSortClick(colDef.id, event)}
+                        >
+                          {colDef.header}
+                        </DataTableColumnHeader>
+                      );
+                    })}
+                  </DataTableTr>
+                </DataTableThead>
+
                 <DataTableTbody>
                   <DataTableAutoTBodyContent
                     loadingState={loadingState}
@@ -391,11 +391,11 @@ function DataTableAutoInner<T>(
                     fullWidthColSpan={fullWidthColSpan}
                   />
                 </DataTableTbody>
-              </TableItemsProvider>
-            </table>
+              </table>
+            </div>
           </div>
-        </div>
-      </DataTableExpansionProvider>
+        </DataTableExpansionProvider>
+      </TableItemsProvider>
     </DataTableContextProvider>
   );
 }
@@ -438,7 +438,7 @@ function DataTableAutoTBodyContent({
           <DataTableTr key={`skeleton-row-${rowIndex}`} aria-hidden>
             {columns.map(({ isSticky, colDef }, colDefIndex) => (
               <DataTableBaseCell
-                textAlign={colDef.type === "number" ? "right" : "left"}
+                textAlign={colDef.align ?? "left"}
                 key={colDef.id || colDefIndex}
                 as={colDef.isRowHeader ? "th" : "td"}
                 isSticky={isSticky}
@@ -462,59 +462,64 @@ function DataTableAutoTBodyContent({
 
   const renderLoadingAnnouncement = isLoading && !loadingState && !loadingRows;
 
-  return items.map((rowData) => {
-    const details = itemDetails.get(rowData);
-
-    /* Should in theory be impossible. Look about typing this? */
-    if (!details) {
-      return null;
-    }
-
-    const hasSubRows = details.children.length > 0;
-
-    return (
-      <React.Fragment key={details.id}>
-        {renderLoadingAnnouncement && (
-          <tr>
-            <td colSpan={fullWidthColSpan} className="aksel-sr-only">
-              {loadingLabel}
-            </td>
-          </tr>
-        )}
-        <DataTableTr rowId={details.id}>
-          {columns.map(({ isSticky, colDef }, colDefIndex) => {
-            const renderNestedToggle = colDefIndex === 0 && hasSubRows;
-            const renderNestedIndent =
-              colDefIndex === 0 && (details.level > 0 || hasSubRows);
-
-            const style: React.CSSProperties = {
-              "--__axc-data-table-nested-depth": details.level,
-            };
-
-            return (
-              <DataTableBaseCell
-                /* TODO: Make this configurable */
-                textAlign={colDef.type === "number" ? "right" : "left"}
-                key={colDef.id || colDefIndex}
-                as={colDef.isRowHeader ? "th" : "td"}
-                isSticky={isSticky}
-                data-nested={renderNestedIndent || undefined}
-                style={style}
-              >
-                {renderNestedToggle && <NestedRowToggle details={details} />}
-                {colDef.cell(rowData)}
-              </DataTableBaseCell>
-            );
-          })}
-        </DataTableTr>
-        <DataTableExpandedRow
-          rowId={details.id}
-          rowData={rowData}
-          fullWidthColSpan={fullWidthColSpan}
-        />
-      </React.Fragment>
-    );
-  });
+  return (
+    <>
+      {renderLoadingAnnouncement && (
+        <tr>
+          <td colSpan={fullWidthColSpan} className="aksel-sr-only">
+            {loadingLabel}
+          </td>
+        </tr>
+      )}
+      {items.map((rowData) => {
+        const details = itemDetails.get(rowData);
+
+        /* Should in theory be impossible. Look about typing this? */
+        if (!details) {
+          return null;
+        }
+
+        const hasSubRows = details.children.length > 0;
+
+        return (
+          <React.Fragment key={details.id}>
+            <DataTableTr rowId={details.id}>
+              {columns.map(({ isSticky, colDef }, colDefIndex) => {
+                const renderNestedToggle = colDefIndex === 0 && hasSubRows;
+                const renderNestedIndent =
+                  colDefIndex === 0 && (details.level > 0 || hasSubRows);
+
+                const style: React.CSSProperties = {
+                  "--__axc-data-table-nested-depth": details.level,
+                };
+
+                return (
+                  <DataTableBaseCell
+                    textAlign={colDef.align ?? "left"}
+                    key={colDef.id || colDefIndex}
+                    as={colDef.isRowHeader ? "th" : "td"}
+                    isSticky={isSticky}
+                    data-nested={renderNestedIndent || undefined}
+                    style={style}
+                  >
+                    {renderNestedToggle && (
+                      <NestedRowToggle details={details} />
+                    )}
+                    {colDef.cell(rowData)}
+                  </DataTableBaseCell>
+                );
+              })}
+            </DataTableTr>
+            <DataTableExpandedRow
+              rowId={details.id}
+              rowData={rowData}
+              fullWidthColSpan={fullWidthColSpan}
+            />
+          </React.Fragment>
+        );
+      })}
+    </>
+  );
 }
 
 function NestedRowToggle({ details }: { details: ItemDetail<any> }) {
@@ -583,12 +588,16 @@ function DataTableExpandedRow<T>({
     return null;
   }
 
+  const panelHeight = getDetailsPanelHeight?.(rowData);
+
+  const style: React.CSSProperties = panelHeight
+    ? { height: panelHeight, overflow: "auto" }
+    : { height: "auto" };
+
   return (
     <tr>
       <td id={expansionId} colSpan={fullWidthColSpan}>
-        <div style={{ height: getDetailsPanelHeight?.(rowData) }}>
-          {content}
-        </div>
+        <div style={style}>{content}</div>
       </td>
     </tr>
   );

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

@@ -11,10 +11,11 @@ import {
   type DataTableEmptyStateProps,
 } from "../empty-state/DataTableEmptyState";
 import { DataTableExpansionProvider } from "../hooks/useTableExpansion";
-import type { ItemDetail } from "../hooks/useTableItems";
 import { useTableKeyboardNav } from "../hooks/useTableKeyboardNav";
-import { type SelectionProps } from "../hooks/useTableSelection";
-import { noSelectionState } from "../hooks/useTableSelection";
+import {
+  type SelectionProps,
+  noSelectionState,
+} from "../hooks/useTableSelection";
 import {
   DataTableLoadingState,
   type DataTableLoadingStateProps,
@@ -36,8 +37,6 @@ import {
 import { DataTableTr, type DataTableTrProps } from "../tr/DataTableTr";
 import { DataTableContextProvider } from "./DataTableRoot.context";
 
-const EMPTY_ITEM_DETAILS = new Map<never, ItemDetail<never>>();
-
 interface DataTableProps
   extends React.HTMLAttributes<HTMLTableElement>, SelectionProps {
   children: React.ReactNode;
@@ -232,7 +231,7 @@ const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
         withKeyboardNav={withKeyboardNav}
         selectionState={noSelectionState}
         stickySelection={false}
-        stickyHeader={false}
+        stickyHeader={true}
         tableId={useId()}
         showLoadingSkeletons={false}
         onRowClick={undefined}
@@ -240,7 +239,7 @@ const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
         showLoadingOverlay={false}
         columns={[]}
       >
-        <DataTableExpansionProvider itemDetails={EMPTY_ITEM_DETAILS}>
+        <DataTableExpansionProvider>
           <div className="aksel-data-table__border-wrapper">
             <div className="aksel-data-table__scroll-wrapper">
               <table

package/src/form/checkbox/Checkbox.tsx

@@ -35,6 +35,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             "indeterminate",
             "errorId",
             "readOnly",
+            "className",
           ])}
           {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
           aria-describedby={

package/src/form/radio/Radio.tsx

@@ -24,7 +24,13 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
       >
         <RadioInput
           ref={forwardedRef}
-          {...omit(props, ["children", "size", "description", "readOnly"])}
+          {...omit(props, [
+            "children",
+            "size",
+            "description",
+            "readOnly",
+            "className",
+          ])}
           {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
           aria-describedby={
             cl(inputProps["aria-describedby"], {

package/src/modal/types.ts

@@ -39,7 +39,8 @@ interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
   /**
    * Called when the user tries to close the modal by one of the built-in methods.
    * Used if you want to ask the user for confirmation before closing.
-   * @warning Will not always be called when pressing Esc. See `onCancel` for more info.
+   *
+   * **NB:** Will not always be called when pressing Esc. See `onCancel` for more info.
    * @returns Whether to close the modal or not
    */
   onBeforeClose?: () => boolean;
@@ -52,7 +53,8 @@ interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
   onCancel?: React.ReactEventHandler<HTMLDialogElement>;
   /**
    * Whether to close when clicking on the backdrop.
-   * @warning Users may click outside by accident. Don't use if closing can cause data loss, or the modal contains important info.
+   *
+   * **NB:** Users may click outside by accident. Don't use if closing can cause data loss, or the modal contains important info.
    * @default false
    */
   closeOnBackdropClick?: boolean;
@@ -77,13 +79,15 @@ interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
   /**
    * ID of the element that labels the modal.
    * No need to set this manually if the `header` prop is used. A reference to `header.heading` will be created automatically.
-   * @warning If not using `header`, you should set either `aria-labelledby` or `aria-label`.
+   *
+   * **NB:** If not using `header`, you should set either `aria-labelledby` or `aria-label`.
    */
   "aria-labelledby"?: string;
   /**
    * String value that labels the modal.
    * No need to set this if the `header` prop is used.
-   * @warning If not using `header`, you should set either `aria-labelledby` or `aria-label`.
+   *
+   * **NB:** If not using `header`, you should set either `aria-labelledby` or `aria-label`.
    */
   "aria-label"?: string;
 }