@navikt/ds-react 8.10.0 → 8.10.2

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback } from "react";
+import React, { forwardRef } from "react";
 import {
   ChevronDownUpIcon,
   ChevronUpDownIcon,
@@ -14,7 +14,10 @@ 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 {
+  getDataTableExpansionId,
+  useDataTableExpansion,
+} from "../hooks/useTableExpansion";
 import {
   useDataTableContext,
   useDataTableLocation,
@@ -59,45 +62,41 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
 
     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,
-      ],
-    );
+    const handleClick =
+      location === "tbody" && rowId !== undefined
+        ? (event: React.MouseEvent<HTMLTableRowElement>) => {
+            if (
+              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);
+          }
+        : undefined;
 
     return (
       <tr
         {...rest}
-        onClick={composeEventHandlers(onClick, handleClick)}
+        // Avoid setting onClick if not needed, since this causes NVDA to announce the row as clickable.
+        onClick={
+          (onClick || handleClick) && composeEventHandlers(onClick, handleClick)
+        }
         ref={forwardedRef}
         className={cl("aksel-data-table__tr", className)}
         data-selected={selected}
@@ -122,22 +121,18 @@ 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,
+    isDetailsPanelExpandable,
     toggleExpansion,
-    enableExpansion,
+    enableDetailsPanel,
     isAllExpanded,
     toggleAll,
     showExpandAll,
-  } = expansionContext;
+  } = useDataTableExpansion();
 
-  if (!enableExpansion) {
+  if (!enableDetailsPanel) {
     return null;
   }
 
@@ -202,6 +197,12 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
   }
 
   const isRowExpanded = isExpanded(rowId);
+  const canExpandRow = isDetailsPanelExpandable(rowId);
+  const expansionId = getDataTableExpansionId(tableId, rowId);
+
+  if (!canExpandRow) {
+    return <DataTableTd UNSAFE_isSelection preventRowClick />;
+  }
 
   return (
     <DataTableTd UNSAFE_isSelection preventRowClick>
@@ -214,7 +215,7 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
           toggleExpansion(rowId);
         }}
         aria-expanded={isRowExpanded}
-        aria-controls={`${tableId}-expansion-${rowId}`}
+        aria-controls={expansionId}
         aria-label={isRowExpanded ? "Skjul detaljer" : "Vis detaljer"}
         icon={
           isRowExpanded ? <MinusIcon aria-hidden /> : <PlusIcon aria-hidden />
@@ -225,7 +226,7 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
 }
 
 /**
- * TODO: How do these cells handle multiple thead rows, or col/rowspans?
+ * TODO: How do these cells handle multiple thead rows, or col/row-spans?
  * TODO: a11y for labels
  */
 function RowSelectionCell({ rowId }: { rowId?: string | number }) {

package/src/modal/Modal.tsx

@@ -93,6 +93,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       style,
       onClick,
       onMouseDown,
+      size = "medium",
       ...rest
     }: ModalProps,
     ref,
@@ -153,12 +154,17 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
     const isWidthPreset =
       typeof width === "string" && ["small", "medium"].includes(width);
 
-    const mergedClassName = cl("aksel-modal", className, {
-      [polyfillClassName]: needPolyfill,
-      "aksel-modal--autowidth": !width,
-      [`aksel-modal--${width}`]: isWidthPreset,
-      "aksel-modal--top": placement === "top" && !needPolyfill,
-    });
+    const mergedClassName = cl(
+      "aksel-modal",
+      className,
+      `aksel-modal--${size}`,
+      {
+        [polyfillClassName]: needPolyfill,
+        "aksel-modal--autowidth": !width,
+        [`aksel-modal--width-${width}`]: isWidthPreset,
+        "aksel-modal--top": placement === "top" && !needPolyfill,
+      },
+    );
 
     const mergedStyle = {
       ...style,

package/src/modal/types.ts

@@ -1,6 +1,7 @@
 interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
   /**
    * Affects internal padding
+   * @default "medium"
    */
   size?: "small" | "medium";
   /**