@navikt/ds-react 8.10.1 → 8.10.3

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/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;
 }