refactor: delete ReactAttr (#19113)

Author: adamalston

packages/react/src/components/DataTable/TableBody.tsx

@@ -1,15 +1,15 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * 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 { ReactAttr } from '../../types/common';
+import React, { type HTMLAttributes } from 'react';
 
-export interface TableBodyProps extends ReactAttr<HTMLTableSectionElement> {
+export interface TableBodyProps
+  extends HTMLAttributes<HTMLTableSectionElement> {
   /**
    * `polite` Adjust the notification behavior of screen readers
    */

packages/react/src/components/DataTable/TableCell.tsx

@@ -1,17 +1,16 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * 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 React, { forwardRef } from 'react';
+import React, { forwardRef, type HTMLAttributes } from 'react';
 import classNames from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
-import { ReactAttr } from '../../types/common';
 import PropTypes from 'prop-types';
 
-export interface TableCellProps extends ReactAttr<HTMLTableCellElement> {
+export interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
   /**
    * Pass in children that will be embedded in the table header label
    */

packages/react/src/components/DataTable/TableContainer.tsx

@@ -7,15 +7,14 @@
 
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
-import { ReactAttr } from '../../types/common';
+import React, { useMemo, type HTMLAttributes } from 'react';
 import { usePrefix } from '../../internal/usePrefix';
 import { useId } from '../../internal/useId';
 import { TableContext } from './TableContext';
 import { Heading, Section } from '../Heading';
 
 export interface TableContainerProps
-  extends Omit<ReactAttr<HTMLDivElement>, 'title'> {
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**
    * Optional description text for the Table
    */

packages/react/src/components/DataTable/TableExpandHeader.tsx

@@ -8,11 +8,10 @@
 import { ChevronRight } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes, { Validator } from 'prop-types';
-import React from 'react';
+import React, { type HTMLAttributes } from 'react';
 import { usePrefix } from '../../internal/usePrefix';
 import deprecate from '../../prop-types/deprecate';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy';
-import { ReactAttr } from '../../types/common';
 
 export type TableExpandHeaderPropsBase = {
   /**
@@ -54,7 +53,7 @@ export type TableExpandHeaderPropsBase = {
    * Hook for when a listener initiates a request to expand the given row
    */
   onExpand?(event: React.MouseEvent<HTMLButtonElement>): void;
-} & ReactAttr<HTMLTableCellElement>;
+} & HTMLAttributes<HTMLTableCellElement>;
 
 export type TableExpandHeaderPropsWithToggle = Omit<
   TableExpandHeaderPropsBase,

packages/react/src/components/DataTable/TableExpandedRow.tsx

@@ -1,18 +1,18 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * 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 cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useRef } from 'react';
+import React, { useRef, type HTMLAttributes } from 'react';
 import TableCell from './TableCell';
 import { usePrefix } from '../../internal/usePrefix';
-import { ReactAttr } from '../../types/common';
 
-export interface TableExpandedRowProps extends ReactAttr<HTMLTableRowElement> {
+export interface TableExpandedRowProps
+  extends HTMLAttributes<HTMLTableRowElement> {
   /**
    * The width of the expanded row's internal cell
    */

packages/react/src/components/DataTable/TableHeader.tsx

@@ -1,13 +1,18 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * 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 cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { type MouseEventHandler, useRef, ReactNode } from 'react';
+import React, {
+  useRef,
+  type HTMLAttributes,
+  type MouseEventHandler,
+  type ReactNode,
+} from 'react';
 import {
   ArrowUp as Arrow,
   ArrowsVertical as Arrows,
@@ -16,7 +21,7 @@ import classNames from 'classnames';
 import { sortStates } from './state/sorting';
 import { useId } from '../../internal/useId';
 import { usePrefix } from '../../internal/usePrefix';
-import { TranslateWithId, ReactAttr } from '../../types/common';
+import { TranslateWithId } from '../../types/common';
 import { DataTableSortState } from './state/sortStates';
 
 const defaultScope = 'col';
@@ -64,7 +69,7 @@ const sortDirections: { [key: string]: 'none' | 'ascending' | 'descending' } = {
 };
 
 export interface TableHeaderProps
-  extends ReactAttr<HTMLTableCellElement & HTMLButtonElement>,
+  extends HTMLAttributes<HTMLTableCellElement & HTMLButtonElement>,
     TranslateWithId<
       TableHeaderTranslationKey,
       { header; sortDirection; isSortHeader; sortStates }

packages/react/src/components/DataTable/TableRow.tsx

@@ -1,17 +1,16 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * 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 React from 'react';
+import React, { type HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
-import { ReactAttr } from '../../types/common';
 
-export interface TableRowProps extends ReactAttr<HTMLTableRowElement> {
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
   /**
    * Specify an optional className to be applied to the container node
    */

packages/react/src/components/DatePickerInput/DatePickerInput.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -8,11 +8,15 @@
 import { Calendar, WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes, { ReactElementLike, ReactNodeArray } from 'prop-types';
-import React, { ForwardedRef, ReactNode, useContext } from 'react';
+import React, {
+  useContext,
+  type ForwardedRef,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm';
 import { useId } from '../../internal/useId';
-import { ReactAttr } from '../../types/common';
 import { Text } from '../Text';
 import deprecate from '../../prop-types/deprecate';
 
@@ -29,7 +33,7 @@ export type ReactNodeLike =
 export type func = (...args: any[]) => any;
 
 export interface DatePickerInputProps
-  extends Omit<ReactAttr<HTMLInputElement>, ExcludedAttributes> {
+  extends Omit<HTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
   /**
    * The type of the date picker:
    *

packages/react/src/components/Dialog/index.tsx

@@ -6,15 +6,19 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { MutableRefObject, useEffect, useRef } from 'react';
+import React, {
+  useEffect,
+  useRef,
+  type HTMLAttributes,
+  type MutableRefObject,
+} from 'react';
 import { usePrefix } from '../../internal/usePrefix';
 import cx from 'classnames';
 import { Close } from '@carbon/icons-react';
 import { IconButton } from '../IconButton';
 import { noopFn } from '../../internal/noopFn';
-import { ReactAttr } from '../../types/common';
 
-export interface DialogProps extends ReactAttr<HTMLDialogElement> {
+export interface DialogProps extends HTMLAttributes<HTMLDialogElement> {
   /**
    * Provide the contents of the Dialog
    */
@@ -173,7 +177,7 @@ unstable__Dialog.propTypes = {
   open: PropTypes.bool,
 };
 
-export interface DialogHeaderProps extends ReactAttr<HTMLDivElement> {
+export interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Provide the contents to be rendered inside of this component
    */
@@ -196,7 +200,7 @@ DialogHeader.propTypes = {
   children: PropTypes.node,
 };
 
-export interface DialogControlsProps extends ReactAttr<HTMLDivElement> {
+export interface DialogControlsProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Provide the contents to be rendered inside of this component
    */
@@ -221,7 +225,7 @@ DialogControls.propTypes = {
   children: PropTypes.node,
 };
 
-export interface DialogCloseButtonProps extends ReactAttr<HTMLDivElement> {
+export interface DialogCloseButtonProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Specify a click handler applied to the IconButton
    */

packages/react/src/components/Dropdown/Dropdown.Skeleton.tsx

@@ -6,13 +6,12 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { type HTMLAttributes } from 'react';
 import cx from 'classnames';
 import { ListBoxSizePropType, type ListBoxSize } from '../ListBox';
 import { usePrefix } from '../../internal/usePrefix';
-import { ReactAttr } from '../../types/common';
 
-export interface DropdownSkeletonProps extends ReactAttr<HTMLDivElement> {
+export interface DropdownSkeletonProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Specify an optional className to add.
    */

packages/react/src/components/Dropdown/Dropdown.tsx

@@ -6,17 +6,18 @@
  */
 
 import React, {
-  FocusEvent,
-  ForwardedRef,
   isValidElement,
-  MouseEvent,
-  ReactNode,
   Ref,
   useCallback,
   useContext,
   useEffect,
   useMemo,
   useState,
+  type FocusEvent,
+  type ForwardedRef,
+  type HTMLAttributes,
+  type MouseEvent,
+  type ReactNode,
 } from 'react';
 import {
   useSelect,
@@ -44,7 +45,7 @@ import mergeRefs from '../../tools/mergeRefs';
 import deprecate from '../../prop-types/deprecate';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm';
-import { TranslateWithId, ReactAttr } from '../../types/common';
+import { TranslateWithId } from '../../types/common';
 import { useId } from '../../internal/useId';
 import {
   useFloating,
@@ -85,7 +86,7 @@ export interface OnChangeData<ItemType> {
 }
 
 export interface DropdownProps<ItemType>
-  extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes>,
+  extends Omit<HTMLAttributes<HTMLDivElement>, ExcludedAttributes>,
     TranslateWithId<ListBoxMenuIconTranslationKey> {
   /**
    * Specify a label to be read by screen readers on the container node

packages/react/src/components/FileUploader/FileUploader.Skeleton.tsx

@@ -1,19 +1,19 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * 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 React, { type HTMLAttributes } from 'react';
 import cx from 'classnames';
 import SkeletonText from '../SkeletonText';
 import ButtonSkeleton from '../Button/Button.Skeleton';
 import { usePrefix } from '../../internal/usePrefix';
-import { ReactAttr } from '../../types/common';
 
-export interface FileUploaderSkeletonProps extends ReactAttr<HTMLDivElement> {
+export interface FileUploaderSkeletonProps
+  extends HTMLAttributes<HTMLDivElement> {
   /**
    * Specify an optional className to add.
    */

packages/react/src/components/FileUploader/FileUploader.tsx

@@ -7,17 +7,21 @@
 
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useState, ForwardedRef, useImperativeHandle } from 'react';
+import React, {
+  useImperativeHandle,
+  useState,
+  type ForwardedRef,
+  type HTMLAttributes,
+} from 'react';
 import Filename from './Filename';
 import FileUploaderButton from './FileUploaderButton';
 import { ButtonKinds } from '../Button/Button';
 import { keys, matches } from '../../internal/keyboard';
 import { usePrefix } from '../../internal/usePrefix';
-import { ReactAttr } from '../../types/common';
 import { Text } from '../Text';
 import { useId } from '../../internal/useId';
 
-export interface FileUploaderProps extends ReactAttr<HTMLSpanElement> {
+export interface FileUploaderProps extends HTMLAttributes<HTMLSpanElement> {
   /**
    * Specify the types of files that this input should be able to receive
    */

packages/react/src/components/FileUploader/FileUploaderButton.tsx

@@ -7,17 +7,16 @@
 
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, type HTMLAttributes } from 'react';
 import { matches, keys } from '../../internal/keyboard';
 import { uniqueId } from '../../tools/uniqueId';
 import { usePrefix } from '../../internal/usePrefix';
 import deprecate from '../../prop-types/deprecate';
-import { ReactAttr } from '../../types/common';
 import { noopFn } from '../../internal/noopFn';
 import { ButtonKinds } from '../Button';
 
 export interface FileUploaderButtonProps
-  extends Omit<ReactAttr<HTMLButtonElement>, 'onChange' | 'tabIndex'> {
+  extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange' | 'tabIndex'> {
   /**
    * Specify the types of files that this input should be able to receive
    */

packages/react/src/components/FileUploader/FileUploaderDropContainer.tsx

@@ -5,19 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, type HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { keys, matches } from '../../internal/keyboard';
 import { uniqueId } from '../../tools/uniqueId';
 import { usePrefix } from '../../internal/usePrefix';
 import { composeEventHandlers } from '../../tools/events';
 import deprecate from '../../prop-types/deprecate';
-import { ReactAttr } from '../../types/common';
 import { noopFn } from '../../internal/noopFn';
 
 export interface FileUploaderDropContainerProps
-  extends Omit<ReactAttr<HTMLButtonElement>, 'tabIndex'> {
+  extends Omit<HTMLAttributes<HTMLButtonElement>, 'tabIndex'> {
   /**
    * Specify the types of files that this input should be able to receive
    */