@carbon/react 1.64.1 → 1.65.0

package/es/components/DataTable/DataTable.d.ts

@@ -77,7 +77,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     getHeaderProps: (getHeaderPropsArgs: {
         header: DataTableHeader;
         isSortable?: boolean;
-        onClick?: (e: React.MouseEvent, sortState: {
+        onClick?: (e: React.MouseEvent<HTMLButtonElement>, sortState: {
             sortHeaderKey: string;
             sortDirection: DataTableSortState;
         }) => void;
@@ -86,25 +86,25 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         isSortable: boolean | undefined;
         isSortHeader: boolean;
         key: string;
-        onClick: (e: MouseEvent) => void;
+        onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
         sortDirection: DataTableSortState;
         [key: string]: unknown;
     };
     getExpandHeaderProps: (getExpandHeaderPropsArgs?: {
-        onClick?: (e: MouseEvent, expandState: {
+        onClick?: (e: React.MouseEvent<HTMLButtonElement>, expandState: {
             isExpanded?: boolean;
         }) => void;
-        onExpand?: (e: MouseEvent) => void;
+        onExpand?: (e: React.MouseEvent<HTMLButtonElement>) => void;
         [key: string]: unknown;
     }) => {
         ariaLabel: string;
         ['aria-label']: string;
         isExpanded: boolean;
-        onExpand: (e: MouseEvent) => void;
+        onExpand: (e: React.MouseEvent<HTMLButtonElement>) => void;
         [key: string]: unknown;
     };
     getRowProps: (getRowPropsArgs: {
-        onClick?: (e: MouseEvent) => void;
+        onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
         row: DataTableRow<ColTypes>;
         [key: string]: unknown;
     }) => {
@@ -114,7 +114,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         isExpanded?: boolean;
         isSelected?: boolean;
         key: string;
-        onExpand: (e: MouseEvent) => void;
+        onExpand: (e: React.MouseEvent<HTMLButtonElement>) => void;
         [key: string]: unknown;
     };
     getExpandedRowProps: (getExpandedRowPropsArgs: {
@@ -124,20 +124,20 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         ['id']: string;
         [key: string]: unknown;
     };
-    getSelectionProps: (getSelectionPropsArgs: {
-        onClick?: (e: MouseEvent) => void;
+    getSelectionProps: (getSelectionPropsArgs?: {
+        onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
         row: DataTableRow<ColTypes>;
         [key: string]: unknown;
     }) => {
         ariaLabel: string;
         'aria-label': string;
-        checked: boolean | undefined;
+        checked?: boolean;
         disabled?: boolean | undefined;
         id: string;
         indeterminate?: boolean;
         name: string;
-        onSelect: (e: MouseEvent) => void;
-        radio?: boolean | null;
+        onSelect: (e: React.MouseEvent<HTMLInputElement>) => void;
+        radio?: boolean;
         [key: string]: unknown;
     };
     getToolbarProps: (getToolbarPropsArgs?: {
@@ -346,7 +346,7 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
     getHeaderProps: ({ header, onClick, isSortable, ...rest }: {
         [key: string]: unknown;
         header: DataTableHeader;
-        onClick?: ((e: React.MouseEvent, sortState: {
+        onClick?: ((e: React.MouseEvent<HTMLButtonElement>, sortState: {
             sortHeaderKey: string;
             sortDirection: DataTableSortState;
         }) => void) | undefined;
@@ -369,10 +369,10 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
      */
     getExpandHeaderProps: ({ onClick, onExpand, ...rest }?: {
         [key: string]: unknown;
-        onClick?: ((e: MouseEvent, expandState: {
+        onClick?: ((e: React.MouseEvent<HTMLButtonElement>, expandState: {
             isExpanded: boolean;
         }) => void) | undefined;
-        onExpand?: ((e: MouseEvent) => void) | undefined;
+        onExpand?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
     }) => {
         ariaLabel: any;
         'aria-label': any;
@@ -406,7 +406,7 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
      */
     getRowProps: ({ row, onClick, ...rest }: {
         [key: string]: unknown;
-        onClick?: ((e: MouseEvent) => void) | undefined;
+        onClick?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
         row: DataTableRow<ColTypes>;
     }) => {
         key: string;
@@ -443,7 +443,7 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
      */
     getSelectionProps: ({ onClick, row, ...rest }?: {
         [key: string]: unknown;
-        onClick?: ((e: MouseEvent) => void) | undefined;
+        onClick?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
         row: DataTableRow<ColTypes>;
     }) => {
         checked: boolean | undefined;
@@ -453,7 +453,7 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         ariaLabel: any;
         'aria-label': any;
         disabled: boolean | undefined;
-        radio: true | null;
+        radio: boolean | undefined;
     } | {
         ariaLabel: any;
         'aria-label': any;

package/es/components/DataTable/DataTable.js

@@ -259,12 +259,12 @@ class DataTable extends React__default.Component {
           checked: row.isSelected,
           onSelect: composeEventHandlers([_this.handleOnSelectRow(row.id), onClick]),
           id: `${_this.getTablePrefix()}__select-row-${row.id}`,
-          name: `select-row`,
+          name: `select-row-${_this.instanceId}`,
           ariaLabel: t(translationKey),
           // TODO remove in v12
           'aria-label': t(translationKey),
           disabled: row.disabled,
-          radio: _this.props.radio || null
+          radio: _this.props.radio
         };
       }
 

package/es/components/DataTable/TableExpandRow.d.ts

@@ -34,7 +34,7 @@ interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
      * Specify whether this row is expanded or not. This helps coordinate data
      * attributes so that `TableExpandRow` and `TableExpandedRow` work together
      */
-    isExpanded: boolean;
+    isExpanded?: boolean;
     /**
      * Hook for when a listener initiates a request to expand the given row
      */

package/es/components/DataTable/TableExpandRow.js

@@ -104,7 +104,7 @@ TableExpandRow.propTypes = {
    * Specify whether this row is expanded or not. This helps coordinate data
    * attributes so that `TableExpandRow` and `TableExpandedRow` work together
    */
-  isExpanded: PropTypes.bool.isRequired,
+  isExpanded: PropTypes.bool,
   /**
    * Specify if the row is selected
    */

package/es/components/DataTable/TableSelectAll.d.ts

@@ -20,7 +20,7 @@ interface TableSelectAllProps {
     /**
      * Specify whether all items are selected, or not
      */
-    checked: boolean;
+    checked?: boolean;
     /**
      * The CSS class names of the cell that wraps the underlying input control
      */
@@ -61,7 +61,7 @@ declare const TableSelectAll: {
         /**
          * Specify whether all items are selected, or not
          */
-        checked: PropTypes.Validator<boolean>;
+        checked: PropTypes.Requireable<boolean>;
         /**
          * The CSS class names of the cell that wraps the underlying input control
          */

package/es/components/DataTable/TableSelectAll.js

@@ -52,7 +52,7 @@ TableSelectAll.propTypes = {
   /**
    * Specify whether all items are selected, or not
    */
-  checked: PropTypes.bool.isRequired,
+  checked: PropTypes.bool,
   /**
    * The CSS class names of the cell that wraps the underlying input control
    */

package/es/components/DataTable/TableSelectRow.d.ts

@@ -21,7 +21,7 @@ export interface TableSelectRowProps {
     /**
      * Specify whether this row is selected, or not
      */
-    checked: boolean;
+    checked?: boolean;
     /**
      * The CSS class names of the cell that wraps the underlying input control
      */
@@ -66,7 +66,7 @@ declare const TableSelectRow: {
         /**
          * Specify whether this row is selected, or not
          */
-        checked: PropTypes.Validator<boolean>;
+        checked: PropTypes.Requireable<boolean>;
         /**
          * The CSS class names of the cell that wraps the underlying input control
          */

package/es/components/DataTable/TableSelectRow.js

@@ -68,7 +68,7 @@ TableSelectRow.propTypes = {
   /**
    * Specify whether this row is selected, or not
    */
-  checked: PropTypes.bool.isRequired,
+  checked: PropTypes.bool,
   /**
    * The CSS class names of the cell that wraps the underlying input control
    */

package/es/components/FileUploader/FileUploaderItem.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useState, useRef, useLayoutEffect } from 'react';
+import React__default, { useRef, useState, useLayoutEffect } from 'react';
 import Filename from './Filename.js';
 import uniqueId from '../../tools/uniqueId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -34,6 +34,7 @@ function FileUploaderItem(_ref) {
     className,
     ...other
   } = _ref;
+  const textRef = useRef(null);
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
   const prefix = usePrefix();
   const {
@@ -53,8 +54,7 @@ function FileUploaderItem(_ref) {
     return element.offsetWidth < element.scrollWidth;
   };
   useLayoutEffect(() => {
-    const element = document.querySelector(`[title="${name}"]`);
-    isEllipsisActive(element);
+    isEllipsisActive(textRef.current);
   }, [prefix, name]);
   return /*#__PURE__*/React__default.createElement("span", _extends({
     className: classes
@@ -68,11 +68,13 @@ function FileUploaderItem(_ref) {
     className: `${prefix}--file-filename-button`,
     type: "button"
   }, /*#__PURE__*/React__default.createElement(Text, {
+    ref: textRef,
     as: "p",
     title: name,
     className: `${prefix}--file-filename-button`,
     id: filterSpaceName(name)
   }, name)))) : /*#__PURE__*/React__default.createElement(Text, {
+    ref: textRef,
     as: "p",
     title: name,
     className: `${prefix}--file-filename`,

package/es/components/Menu/Menu.js

@@ -157,7 +157,7 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, forwardRef) {
     }
     if (indexToFocus !== currentItem) {
       const nodeToFocus = focusableItems[indexToFocus];
-      nodeToFocus.ref.current.focus();
+      nodeToFocus.ref?.current?.focus();
     }
   }
   function handleBlur(e) {

package/es/components/OverflowMenu/next/index.js

@@ -38,16 +38,22 @@ const OverflowMenu = /*#__PURE__*/React__default.forwardRef(function OverflowMen
     placement,
     middlewareData
   } = useFloating(autoAlign ? {
+    // Computing the position starts with initial positioning
+    // via `placement`.
     placement: menuAlignment,
     // The floating element is positioned relative to its nearest
-    // containing block (usually the viewport). It will in many cases also
-    // “break” the floating element out of a clipping ancestor.
+    // containing block (usually the viewport). It will in many cases
+    // also “break” the floating element out of a clipping ancestor.
     // https://floating-ui.com/docs/misc#clipping
     strategy: 'fixed',
-    // Middleware order matters, arrow should be last
+    // Middleware are executed as an in-between “middle” step of the
+    // initial `placement` computation and eventual return of data for
+    // rendering. Each middleware is executed in order.
     middleware: [flip({
-      fallbackAxisSideDirection: 'start',
-      fallbackPlacements: ['top-start', 'top-end', 'bottom-start', 'bottom-end']
+      // An explicit array of placements to try if the initial
+      // `placement` doesn’t fit on the axes in which overflow
+      // is checked.
+      fallbackPlacements: menuAlignment.includes('bottom') ? ['bottom-start', 'bottom-end', 'top-start', 'top-end'] : ['top-start', 'top-end', 'bottom-start', 'bottom-end']
     })],
     whileElementsMounted: autoUpdate
   } : {} // When autoAlign is turned off, floating-ui will not be used

package/es/components/PaginationNav/PaginationNav.d.ts

@@ -43,6 +43,10 @@ interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'on
      * The index of current page.
      */
     page?: number;
+    /**
+     * Specify the size of the PaginationNav.
+     */
+    size?: 'sm' | 'md' | 'lg';
     /**
      * The total number of items.
      */

package/es/components/PaginationNav/PaginationNav.js

@@ -175,6 +175,7 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
     itemsShown = 10,
     page = 0,
     loop = false,
+    size = 'lg',
     translateWithId: t = translateWithId,
     ...rest
   } = _ref4;
@@ -245,7 +246,9 @@ const PaginationNav = /*#__PURE__*/React__default.forwardRef(function Pagination
   useEffect(() => {
     setIsOverFlowDisabled(disableOverflow);
   }, [disableOverflow]);
-  const classNames = cx(`${prefix}--pagination-nav`, className);
+  const classNames = cx(`${prefix}--pagination-nav`, className, {
+    [`${prefix}--layout--size-${size}`]: size
+  });
   const backwardButtonDisabled = !loop && currentPage === 0;
   const forwardButtonDisabled = !loop && currentPage === totalItems - 1;
   const startOffset = itemsDisplayedOnPage <= 4 && currentPage > 1 ? 0 : 1;
@@ -398,6 +401,10 @@ PaginationNav.propTypes = {
    * The index of current page.
    */
   page: PropTypes.number,
+  /**
+   * Specify the size of the PaginationNav.
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
   /**
    * The total number of items.
    */

package/es/components/Tag/Tag.js

@@ -122,7 +122,8 @@ const Tag = /*#__PURE__*/React__default.forwardRef(function Tag(_ref, forwardRef
     ref: ref,
     disabled: disabled,
     className: tagClasses,
-    id: tagId
+    id: tagId,
+    type: ComponentTag === 'button' ? 'button' : undefined
   }, other), CustomIconElement && size !== 'sm' ? /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--tag__custom-icon`
   }, /*#__PURE__*/React__default.createElement(CustomIconElement, null)) : '', isEllipsisApplied && !isInteractiveTag ? /*#__PURE__*/React__default.createElement(DefinitionTooltip, {

package/es/components/Text/Text.d.ts

@@ -4,7 +4,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import PropTypes from 'prop-types';
 import React from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { TextDir } from './TextDirection';
@@ -12,22 +11,5 @@ export interface TextBaseProps {
     dir?: TextDir | undefined;
 }
 export type TextProps<T extends React.ElementType> = PolymorphicProps<T, TextBaseProps>;
-declare function Text<T extends React.ElementType>({ as, children, dir, ...rest }: TextProps<T>): import("react/jsx-runtime").JSX.Element;
-declare namespace Text {
-    var propTypes: {
-        /**
-         * Provide a custom element type used to render the outermost node
-         */
-        as: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.ReactComponentLike | null | undefined>>;
-        /**
-         * Provide child elements or text to be rendered inside of this component
-         */
-        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        /**
-         * Specify the text direction to be used for this component and any of its
-         * children
-         */
-        dir: PropTypes.Requireable<string>;
-    };
-}
+declare const Text: React.ForwardRefExoticComponent<Omit<TextProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLElement>>;
 export { Text };

package/es/components/Text/Text.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import React__default, { useContext } from 'react';
 import { TextDirectionContext } from './TextDirectionContext.js';
 
-function Text(_ref) {
+const Text = /*#__PURE__*/React__default.forwardRef(function Text(_ref, ref) {
   let {
     as,
     children,
@@ -50,8 +50,10 @@ function Text(_ref) {
   }
   return /*#__PURE__*/React__default.createElement(TextDirectionContext.Provider, {
     value: value
-  }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, textProps), children));
-}
+  }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+    ref: ref
+  }, rest, textProps), children));
+});
 Text.propTypes = {
   /**
    * Provide a custom element type used to render the outermost node

package/es/components/TextInput/PasswordInput.js

@@ -87,10 +87,12 @@ const PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordIn
     placeholder,
     type: inputType,
     className: textInputClasses,
+    readOnly,
     ref,
     ...rest
   };
   const inputWrapperClasses = cx(`${prefix}--form-item`, `${prefix}--text-input-wrapper`, `${prefix}--password-input-wrapper`, {
+    [`${prefix}--text-input-wrapper--readonly`]: readOnly,
     [`${prefix}--text-input-wrapper--light`]: light,
     [`${prefix}--text-input-wrapper--inline`]: inline,
     [`${prefix}--text-input--fluid`]: isFluid
@@ -173,7 +175,7 @@ const PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordIn
   }, /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     className: passwordVisibilityToggleClasses,
-    disabled: disabled,
+    disabled: disabled || readOnly,
     onClick: handleTogglePasswordVisibility
   }, passwordVisibilityIcon)));
   useEffect(() => {
@@ -232,6 +234,10 @@ PasswordInput.propTypes = {
    * Specify whether the control is currently invalid
    */
   invalid: PropTypes.bool,
+  /**
+   * Whether the PasswordInput should be read-only
+   */
+  readOnly: PropTypes.bool,
   /**
    * Provide the text that is displayed when the control is in an invalid state
    */

package/es/components/TileGroup/TileGroup.js

@@ -40,7 +40,7 @@ const TileGroup = props => {
     const traverseAndModifyChildren = children => {
       return React__default.Children.map(children, child => {
         // If RadioTile found, return it with necessary props
-        if (child.type === RadioTile) {
+        if (child?.type === RadioTile) {
           const {
             value,
             ...otherProps
@@ -53,7 +53,7 @@ const TileGroup = props => {
             onChange: handleChange,
             checked: value === selected
           }));
-        } else if (child.props && child.props.children) {
+        } else if (child?.props?.children) {
           // If the child is not RadioTile and has children, recheck the children
           return /*#__PURE__*/React__default.cloneElement(child, {
             ...child.props,

package/es/components/UIShell/Content.d.ts

@@ -82,12 +82,12 @@ declare const Content: {
         "aria-colindextext"?: string | undefined;
         "aria-colspan"?: number | undefined;
         "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "true" | "false" | "time" | "page" | "step" | "location" | "date" | undefined;
+        "aria-current"?: boolean | "true" | "false" | "time" | "date" | "step" | "page" | "location" | undefined;
         "aria-describedby"?: string | undefined;
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
         "aria-disabled"?: (boolean | "true" | "false") | undefined;
-        "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+        "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
         "aria-errormessage"?: string | undefined;
         "aria-expanded"?: (boolean | "true" | "false") | undefined;
         "aria-flowto"?: string | undefined;
@@ -109,7 +109,7 @@ declare const Content: {
         "aria-posinset"?: number | undefined;
         "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
         "aria-readonly"?: (boolean | "true" | "false") | undefined;
-        "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+        "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
         "aria-required"?: (boolean | "true" | "false") | undefined;
         "aria-roledescription"?: string | undefined;
         "aria-rowcount"?: number | undefined;

package/lib/components/DataTable/DataTable.d.ts

@@ -77,7 +77,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     getHeaderProps: (getHeaderPropsArgs: {
         header: DataTableHeader;
         isSortable?: boolean;
-        onClick?: (e: React.MouseEvent, sortState: {
+        onClick?: (e: React.MouseEvent<HTMLButtonElement>, sortState: {
             sortHeaderKey: string;
             sortDirection: DataTableSortState;
         }) => void;
@@ -86,25 +86,25 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         isSortable: boolean | undefined;
         isSortHeader: boolean;
         key: string;
-        onClick: (e: MouseEvent) => void;
+        onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
         sortDirection: DataTableSortState;
         [key: string]: unknown;
     };
     getExpandHeaderProps: (getExpandHeaderPropsArgs?: {
-        onClick?: (e: MouseEvent, expandState: {
+        onClick?: (e: React.MouseEvent<HTMLButtonElement>, expandState: {
             isExpanded?: boolean;
         }) => void;
-        onExpand?: (e: MouseEvent) => void;
+        onExpand?: (e: React.MouseEvent<HTMLButtonElement>) => void;
         [key: string]: unknown;
     }) => {
         ariaLabel: string;
         ['aria-label']: string;
         isExpanded: boolean;
-        onExpand: (e: MouseEvent) => void;
+        onExpand: (e: React.MouseEvent<HTMLButtonElement>) => void;
         [key: string]: unknown;
     };
     getRowProps: (getRowPropsArgs: {
-        onClick?: (e: MouseEvent) => void;
+        onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
         row: DataTableRow<ColTypes>;
         [key: string]: unknown;
     }) => {
@@ -114,7 +114,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         isExpanded?: boolean;
         isSelected?: boolean;
         key: string;
-        onExpand: (e: MouseEvent) => void;
+        onExpand: (e: React.MouseEvent<HTMLButtonElement>) => void;
         [key: string]: unknown;
     };
     getExpandedRowProps: (getExpandedRowPropsArgs: {
@@ -124,20 +124,20 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         ['id']: string;
         [key: string]: unknown;
     };
-    getSelectionProps: (getSelectionPropsArgs: {
-        onClick?: (e: MouseEvent) => void;
+    getSelectionProps: (getSelectionPropsArgs?: {
+        onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
         row: DataTableRow<ColTypes>;
         [key: string]: unknown;
     }) => {
         ariaLabel: string;
         'aria-label': string;
-        checked: boolean | undefined;
+        checked?: boolean;
         disabled?: boolean | undefined;
         id: string;
         indeterminate?: boolean;
         name: string;
-        onSelect: (e: MouseEvent) => void;
-        radio?: boolean | null;
+        onSelect: (e: React.MouseEvent<HTMLInputElement>) => void;
+        radio?: boolean;
         [key: string]: unknown;
     };
     getToolbarProps: (getToolbarPropsArgs?: {
@@ -346,7 +346,7 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
     getHeaderProps: ({ header, onClick, isSortable, ...rest }: {
         [key: string]: unknown;
         header: DataTableHeader;
-        onClick?: ((e: React.MouseEvent, sortState: {
+        onClick?: ((e: React.MouseEvent<HTMLButtonElement>, sortState: {
             sortHeaderKey: string;
             sortDirection: DataTableSortState;
         }) => void) | undefined;
@@ -369,10 +369,10 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
      */
     getExpandHeaderProps: ({ onClick, onExpand, ...rest }?: {
         [key: string]: unknown;
-        onClick?: ((e: MouseEvent, expandState: {
+        onClick?: ((e: React.MouseEvent<HTMLButtonElement>, expandState: {
             isExpanded: boolean;
         }) => void) | undefined;
-        onExpand?: ((e: MouseEvent) => void) | undefined;
+        onExpand?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
     }) => {
         ariaLabel: any;
         'aria-label': any;
@@ -406,7 +406,7 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
      */
     getRowProps: ({ row, onClick, ...rest }: {
         [key: string]: unknown;
-        onClick?: ((e: MouseEvent) => void) | undefined;
+        onClick?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
         row: DataTableRow<ColTypes>;
     }) => {
         key: string;
@@ -443,7 +443,7 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
      */
     getSelectionProps: ({ onClick, row, ...rest }?: {
         [key: string]: unknown;
-        onClick?: ((e: MouseEvent) => void) | undefined;
+        onClick?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
         row: DataTableRow<ColTypes>;
     }) => {
         checked: boolean | undefined;
@@ -453,7 +453,7 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         ariaLabel: any;
         'aria-label': any;
         disabled: boolean | undefined;
-        radio: true | null;
+        radio: boolean | undefined;
     } | {
         ariaLabel: any;
         'aria-label': any;

package/lib/components/DataTable/DataTable.js

@@ -269,12 +269,12 @@ class DataTable extends React__default["default"].Component {
           checked: row.isSelected,
           onSelect: events.composeEventHandlers([_this.handleOnSelectRow(row.id), onClick]),
           id: `${_this.getTablePrefix()}__select-row-${row.id}`,
-          name: `select-row`,
+          name: `select-row-${_this.instanceId}`,
           ariaLabel: t(translationKey),
           // TODO remove in v12
           'aria-label': t(translationKey),
           disabled: row.disabled,
-          radio: _this.props.radio || null
+          radio: _this.props.radio
         };
       }
 

package/lib/components/DataTable/TableExpandRow.d.ts

@@ -34,7 +34,7 @@ interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
      * Specify whether this row is expanded or not. This helps coordinate data
      * attributes so that `TableExpandRow` and `TableExpandedRow` work together
      */
-    isExpanded: boolean;
+    isExpanded?: boolean;
     /**
      * Hook for when a listener initiates a request to expand the given row
      */

package/lib/components/DataTable/TableExpandRow.js

@@ -114,7 +114,7 @@ TableExpandRow.propTypes = {
    * Specify whether this row is expanded or not. This helps coordinate data
    * attributes so that `TableExpandRow` and `TableExpandedRow` work together
    */
-  isExpanded: PropTypes__default["default"].bool.isRequired,
+  isExpanded: PropTypes__default["default"].bool,
   /**
    * Specify if the row is selected
    */