@carbon/react 1.83.0-rc.0 → 1.83.0

package/lib/components/DataTable/DataTable.js

@@ -46,7 +46,6 @@ var TableToolbarMenu = require('./TableToolbarMenu.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
 
 const getInstanceId = setupGetInstanceId.setupGetInstanceId();
@@ -86,21 +85,18 @@ const translateWithId = id => defaultTranslations[id];
  * and updating the state of the single entity will cascade updates to the
  * consumer.
  */
-class DataTable extends React__default["default"].Component {
+class DataTable extends React.Component {
   constructor(_props) {
     var _this;
     super(_props);
     _this = this;
     _rollupPluginBabelHelpers.defineProperty(this, "instanceId", void 0);
+    // TODO: Replace with a `type` when this component is converted to a
+    // functional component.
+    _rollupPluginBabelHelpers.defineProperty(this, "rp", void 0);
     /**
      * Get the props associated with the given header. Mostly used for adding in
      * sorting behavior.
-     *
-     * @param {object} config
-     * @param {string} config.header the header we want the props for
-     * @param {Function} config.onClick a custom click handler for the header
-     * @param {boolean} config.isSortable
-     * @returns {object}
      */
     _rollupPluginBabelHelpers.defineProperty(this, "getHeaderProps", _ref => {
       let {
@@ -136,11 +132,6 @@ class DataTable extends React__default["default"].Component {
     });
     /**
      * Get the props associated with the given expand header.
-     *
-     * @param {object} config
-     * @param {Function} config.onClick a custom click handler for the expand header
-     * @param {Function} config.onExpand a custom click handler called when header is expanded
-     * @returns {object}
      */
     _rollupPluginBabelHelpers.defineProperty(this, "getExpandHeaderProps", function () {
       let {
@@ -173,31 +164,18 @@ class DataTable extends React__default["default"].Component {
     });
     /**
      * Decorate consumer's `onClick` event handler with sort parameters
-     *
-     * @param {Function} onClick
-     * @param {object} sortParams
-     * @returns {Function}
      */
     _rollupPluginBabelHelpers.defineProperty(this, "handleOnHeaderClick", (onClick, sortParams) => {
-      return e => onClick(e, sortParams);
+      return event => onClick(event, sortParams);
     });
     /**
-     * Decorate consumer's `onClick` event handler with sort parameters
-     *
-     * @param {Function} onClick
-     * @param {object} expandParams
-     * @returns {Function}
+     * Decorate consumer's `onClick` event handler with expand parameters
      */
     _rollupPluginBabelHelpers.defineProperty(this, "handleOnExpandHeaderClick", (onClick, expandParams) => {
-      return e => onClick(e, expandParams);
+      return event => onClick(event, expandParams);
     });
     /**
      * Get the props associated with the given row. Mostly used for expansion.
-     *
-     * @param {object} config
-     * @param {object} config.row the row we want the props for
-     * @param {Function} config.onClick a custom click handler for the header
-     * @returns {object}
      */
     _rollupPluginBabelHelpers.defineProperty(this, "getRowProps", _ref2 => {
       let {
@@ -224,10 +202,6 @@ class DataTable extends React__default["default"].Component {
     });
     /**
      * Get the props associated with an expanded row
-     *
-     * @param {object} config
-     * @param {object} config.row the parent row we want the props for
-     * @returns {object}
      */
     _rollupPluginBabelHelpers.defineProperty(this, "getExpandedRowProps", _ref3 => {
       let {
@@ -286,35 +260,30 @@ class DataTable extends React__default["default"].Component {
         onSelect: events.composeEventHandlers([_this.handleSelectAll, onClick])
       };
     });
-    _rollupPluginBabelHelpers.defineProperty(this, "getToolbarProps", function () {
-      let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    _rollupPluginBabelHelpers.defineProperty(this, "getToolbarProps", props => {
       const {
         size
-      } = _this.props;
+      } = this.props;
       const isSmall = size === 'xs' || size === 'sm';
       return {
         ...props,
         size: isSmall ? 'sm' : undefined
       };
     });
-    _rollupPluginBabelHelpers.defineProperty(this, "getBatchActionProps", function () {
-      let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    _rollupPluginBabelHelpers.defineProperty(this, "getBatchActionProps", props => {
       const {
         shouldShowBatchActions
-      } = _this.state;
-      const totalSelected = _this.getSelectedRows().length;
+      } = this.state;
+      const totalSelected = this.getSelectedRows().length;
       return {
         onSelectAll: undefined,
-        totalCount: _this.state.rowIds.length || 0,
+        totalCount: this.state.rowIds.length || 0,
         ...props,
         shouldShowBatchActions: shouldShowBatchActions && totalSelected > 0,
         totalSelected,
-        onCancel: _this.handleOnCancel
+        onCancel: this.handleOnCancel
       };
     });
-    /**
-     * Helper utility to get the Table Props.
-     */
     _rollupPluginBabelHelpers.defineProperty(this, "getTableProps", () => {
       const {
         useZebraStyles,
@@ -335,9 +304,6 @@ class DataTable extends React__default["default"].Component {
         experimentalAutoAlign
       };
     });
-    /**
-     * Helper utility to get the TableContainer Props.
-     */
     _rollupPluginBabelHelpers.defineProperty(this, "getTableContainerProps", () => {
       const {
         stickyHeader,
@@ -350,25 +316,25 @@ class DataTable extends React__default["default"].Component {
     });
     /**
      * Get the props associated with the given table cell.
-     *
-     * @param {object} config
-     * @param {object} config.cell the cell we want the props for
-     * @returns {object}
      */
     _rollupPluginBabelHelpers.defineProperty(this, "getCellProps", _ref4 => {
       let {
-        cell,
+        cell: {
+          hasAILabelHeader,
+          hasDecoratorHeader
+        },
         ...rest
       } = _ref4;
       return {
         ...rest,
-        hasAILabelHeader: cell.hasAILabelHeader,
-        hasDecoratorHeader: cell.hasDecoratorHeader
+        hasAILabelHeader,
+        hasDecoratorHeader
       };
     });
     /**
      * Helper utility to get all the currently selected rows
-     * @returns {Array<string>} the array of rowIds that are currently selected
+     *
+     * @returns the array of rowIds that are currently selected
      */
     _rollupPluginBabelHelpers.defineProperty(this, "getSelectedRows", () => this.state.rowIds.filter(id => {
       const row = this.state.rowsById[id];
@@ -376,8 +342,9 @@ class DataTable extends React__default["default"].Component {
     }));
     /**
      * Helper utility to get all of the available rows after applying the filter
-     * @returns {Array<string>} the array of rowIds that are currently included through the filter
-     *  */
+     *
+     * @returns the array of rowIds that are currently included through the filter
+     */
     _rollupPluginBabelHelpers.defineProperty(this, "getFilteredRowIds", () => {
       const {
         filterRows = filter.defaultFilterRows
@@ -397,15 +364,13 @@ class DataTable extends React__default["default"].Component {
     /**
      * Helper for getting the table prefix for elements that require an
      * `id` attribute that is unique.
-     *
-     * @returns {string}
      */
     _rollupPluginBabelHelpers.defineProperty(this, "getTablePrefix", () => `data-table-${this.instanceId}`);
     /**
      * Helper for toggling all selected items in a state. Does not call
      * setState, so use it when setting state.
-     * @param {object} initialState
-     * @returns {object} object to put into this.setState (use spread operator)
+     *
+     * @returns object to put into this.setState (use spread operator)
      */
     _rollupPluginBabelHelpers.defineProperty(this, "setAllSelectedState", (initialState, isSelected, filteredRowIds) => {
       const {
@@ -455,9 +420,6 @@ class DataTable extends React__default["default"].Component {
     });
     /**
      * Handler for toggling the selection state of a given row.
-     *
-     * @param {string} rowId
-     * @returns {Function}
      */
     _rollupPluginBabelHelpers.defineProperty(this, "handleOnSelectRow", rowId => () => {
       this.setState(state => {
@@ -502,9 +464,6 @@ class DataTable extends React__default["default"].Component {
     });
     /**
      * Handler for toggling the expansion state of a given row.
-     *
-     * @param {string} rowId
-     * @returns {Function}
      */
     _rollupPluginBabelHelpers.defineProperty(this, "handleOnExpandRow", rowId => () => {
       this.setState(state => {
@@ -548,8 +507,7 @@ class DataTable extends React__default["default"].Component {
     /**
      * Handler for transitioning to the next sort state of the table
      *
-     * @param {string} headerKey the field for the header that we are sorting by
-     * @returns {Function}
+     * @param headerKey - The field for the header that we are sorting by.
      */
     _rollupPluginBabelHelpers.defineProperty(this, "handleSortBy", headerKey => () => {
       this.setState(state => sorting.getNextSortState(this.props, state, {
@@ -559,8 +517,6 @@ class DataTable extends React__default["default"].Component {
     /**
      * Event handler for transitioning input value state changes for the table
      * filter component.
-     *
-     * @param {Event} event
      */
     _rollupPluginBabelHelpers.defineProperty(this, "handleOnInputValueChange", (event, defaultValue) => {
       if (event.target) {
@@ -581,7 +537,7 @@ class DataTable extends React__default["default"].Component {
     this.instanceId = getInstanceId();
   }
 
-  // if state needs to be updated then wait for only update after state is finished
+  // If state needs to be updated, defer render until after the update completes.
   shouldComponentUpdate(nextProps) {
     if (this.props !== nextProps) {
       const nextRowIds = nextProps.rows.map(row => row.id);
@@ -649,16 +605,65 @@ class DataTable extends React__default["default"].Component {
       expandAll: this.handleOnExpandAll,
       radio: this.props.radio
     };
-    if (render !== undefined) {
+    if (typeof render !== 'undefined') {
       return render(renderProps);
     }
-    if (children !== undefined) {
+    if (typeof children !== 'undefined') {
       return children(renderProps);
     }
     return null;
   }
 }
-_rollupPluginBabelHelpers.defineProperty(DataTable, "propTypes", {
+_rollupPluginBabelHelpers.defineProperty(DataTable, "translationKeys", Object.values(translationKeys));
+// TODO: Delete these static properties when the components are converted to a
+// functional component.
+//
+// Static properties for sub-components
+_rollupPluginBabelHelpers.defineProperty(DataTable, "Table", void 0);
+_rollupPluginBabelHelpers.defineProperty(DataTable, "TableActionList", void 0);
+_rollupPluginBabelHelpers.defineProperty(DataTable, "TableBatchAction", void 0);
+_rollupPluginBabelHelpers.defineProperty(DataTable, "TableBatchActions", void 0);
+_rollupPluginBabelHelpers.defineProperty(DataTable, "TableBody", void 0);
+_rollupPluginBabelHelpers.defineProperty(DataTable, "TableCell", void 0);
+_rollupPluginBabelHelpers.defineProperty(DataTable, "TableContainer", void 0);
+_rollupPluginBabelHelpers.defineProperty(DataTable, "TableDecoratorRow", void 0);
+_rollupPluginBabelHelpers.defineProperty(DataTable, "TableExpandHeader", void 0);
+_rollupPluginBabelHelpers.defineProperty(DataTable, "TableExpandRow", void 0);
+_rollupPluginBabelHelpers.defineProperty(DataTable, "TableExpandedRow", void 0);
+_rollupPluginBabelHelpers.defineProperty(DataTable, "TableHead", void 0);
+_rollupPluginBabelHelpers.defineProperty(DataTable, "TableHeader", void 0);
+_rollupPluginBabelHelpers.defineProperty(DataTable, "TableRow", void 0);
+_rollupPluginBabelHelpers.defineProperty(DataTable, "TableSelectAll", void 0);
+_rollupPluginBabelHelpers.defineProperty(DataTable, "TableSelectRow", void 0);
+_rollupPluginBabelHelpers.defineProperty(DataTable, "TableSlugRow", void 0);
+_rollupPluginBabelHelpers.defineProperty(DataTable, "TableToolbar", void 0);
+_rollupPluginBabelHelpers.defineProperty(DataTable, "TableToolbarAction", void 0);
+_rollupPluginBabelHelpers.defineProperty(DataTable, "TableToolbarContent", void 0);
+_rollupPluginBabelHelpers.defineProperty(DataTable, "TableToolbarSearch", void 0);
+_rollupPluginBabelHelpers.defineProperty(DataTable, "TableToolbarMenu", void 0);
+DataTable.Table = Table.Table;
+DataTable.TableActionList = TableActionList["default"];
+DataTable.TableBatchAction = TableBatchAction["default"];
+DataTable.TableBatchActions = TableBatchActions["default"];
+DataTable.TableBody = TableBody["default"];
+DataTable.TableCell = TableCell["default"];
+DataTable.TableContainer = TableContainer["default"];
+DataTable.TableDecoratorRow = TableDecoratorRow["default"];
+DataTable.TableExpandHeader = TableExpandHeader["default"];
+DataTable.TableExpandRow = TableExpandRow["default"];
+DataTable.TableExpandedRow = TableExpandedRow["default"];
+DataTable.TableHead = TableHead["default"];
+DataTable.TableHeader = TableHeader["default"];
+DataTable.TableRow = TableRow["default"];
+DataTable.TableSelectAll = TableSelectAll["default"];
+DataTable.TableSelectRow = TableSelectRow["default"];
+DataTable.TableSlugRow = TableSlugRow["default"];
+DataTable.TableToolbar = TableToolbar["default"];
+DataTable.TableToolbarAction = TableToolbarAction["default"];
+DataTable.TableToolbarContent = TableToolbarContent["default"];
+DataTable.TableToolbarSearch = TableToolbarSearch["default"];
+DataTable.TableToolbarMenu = TableToolbarMenu["default"];
+DataTable.propTypes = {
   /**
    * Experimental property. Allows table to align cell contents to the top if there is text wrapping in the content. Might have performance issues, intended for smaller tables
    */
@@ -733,52 +738,6 @@ _rollupPluginBabelHelpers.defineProperty(DataTable, "propTypes", {
    * `true` to add useZebraStyles striping.
    */
   useZebraStyles: PropTypes__default["default"].bool
-});
-_rollupPluginBabelHelpers.defineProperty(DataTable, "translationKeys", Object.values(translationKeys));
-// Static properties for sub-components
-_rollupPluginBabelHelpers.defineProperty(DataTable, "Table", void 0);
-_rollupPluginBabelHelpers.defineProperty(DataTable, "TableActionList", void 0);
-_rollupPluginBabelHelpers.defineProperty(DataTable, "TableBatchAction", void 0);
-_rollupPluginBabelHelpers.defineProperty(DataTable, "TableBatchActions", void 0);
-_rollupPluginBabelHelpers.defineProperty(DataTable, "TableBody", void 0);
-_rollupPluginBabelHelpers.defineProperty(DataTable, "TableCell", void 0);
-_rollupPluginBabelHelpers.defineProperty(DataTable, "TableContainer", void 0);
-_rollupPluginBabelHelpers.defineProperty(DataTable, "TableDecoratorRow", void 0);
-_rollupPluginBabelHelpers.defineProperty(DataTable, "TableExpandHeader", void 0);
-_rollupPluginBabelHelpers.defineProperty(DataTable, "TableExpandRow", void 0);
-_rollupPluginBabelHelpers.defineProperty(DataTable, "TableExpandedRow", void 0);
-_rollupPluginBabelHelpers.defineProperty(DataTable, "TableHead", void 0);
-_rollupPluginBabelHelpers.defineProperty(DataTable, "TableHeader", void 0);
-_rollupPluginBabelHelpers.defineProperty(DataTable, "TableRow", void 0);
-_rollupPluginBabelHelpers.defineProperty(DataTable, "TableSelectAll", void 0);
-_rollupPluginBabelHelpers.defineProperty(DataTable, "TableSelectRow", void 0);
-_rollupPluginBabelHelpers.defineProperty(DataTable, "TableSlugRow", void 0);
-_rollupPluginBabelHelpers.defineProperty(DataTable, "TableToolbar", void 0);
-_rollupPluginBabelHelpers.defineProperty(DataTable, "TableToolbarAction", void 0);
-_rollupPluginBabelHelpers.defineProperty(DataTable, "TableToolbarContent", void 0);
-_rollupPluginBabelHelpers.defineProperty(DataTable, "TableToolbarSearch", void 0);
-_rollupPluginBabelHelpers.defineProperty(DataTable, "TableToolbarMenu", void 0);
-DataTable.Table = Table.Table;
-DataTable.TableActionList = TableActionList["default"];
-DataTable.TableBatchAction = TableBatchAction["default"];
-DataTable.TableBatchActions = TableBatchActions["default"];
-DataTable.TableBody = TableBody["default"];
-DataTable.TableCell = TableCell["default"];
-DataTable.TableContainer = TableContainer["default"];
-DataTable.TableDecoratorRow = TableDecoratorRow["default"];
-DataTable.TableExpandHeader = TableExpandHeader["default"];
-DataTable.TableExpandRow = TableExpandRow["default"];
-DataTable.TableExpandedRow = TableExpandedRow["default"];
-DataTable.TableHead = TableHead["default"];
-DataTable.TableHeader = TableHeader["default"];
-DataTable.TableRow = TableRow["default"];
-DataTable.TableSelectAll = TableSelectAll["default"];
-DataTable.TableSelectRow = TableSelectRow["default"];
-DataTable.TableSlugRow = TableSlugRow["default"];
-DataTable.TableToolbar = TableToolbar["default"];
-DataTable.TableToolbarAction = TableToolbarAction["default"];
-DataTable.TableToolbarContent = TableToolbarContent["default"];
-DataTable.TableToolbarSearch = TableToolbarSearch["default"];
-DataTable.TableToolbarMenu = TableToolbarMenu["default"];
+};
 
 exports["default"] = DataTable;

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

@@ -1,12 +1,12 @@
 /**
- * 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 { PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';
-interface TableProps {
+export interface TableProps {
     experimentalAutoAlign?: boolean;
     className?: string;
     /**

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

@@ -4,5 +4,5 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-declare const TableActionList: (props: import("../../types/common").ReactAttr<"div">) => React.ReactElement<any>;
+declare const TableActionList: (props: import("react").HTMLAttributes<"div">) => React.ReactElement<any>;
 export default TableActionList;

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

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

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

@@ -1,12 +1,11 @@
 /**
- * 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 { ReactAttr } from '../../types/common';
-export interface TableCellProps extends ReactAttr<HTMLTableCellElement> {
+import React, { type HTMLAttributes } from 'react';
+export interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
     /**
      * Pass in children that will be embedded in the table header label
      */

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

@@ -5,9 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React from 'react';
-import { ReactAttr } from '../../types/common';
-export interface TableContainerProps extends Omit<ReactAttr<HTMLDivElement>, 'title'> {
+import React, { type HTMLAttributes } from 'react';
+export interface TableContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     /**
      * Optional description text for the Table
      */

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

@@ -5,8 +5,7 @@
  * 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 type TableExpandHeaderPropsBase = {
     /**
      * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandHeader
@@ -44,7 +43,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, 'aria-label' | 'enableToggle' | 'onExpand'> & {
     enableToggle: true;
     ['aria-label']: string;

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

@@ -1,12 +1,12 @@
 /**
- * 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 { ReactAttr } from '../../types/common';
-export interface TableExpandedRowProps extends ReactAttr<HTMLTableRowElement> {
+import { type HTMLAttributes } from 'react';
+export interface TableExpandedRowProps extends HTMLAttributes<HTMLTableRowElement> {
     /**
      * The width of the expanded row's internal cell
      */

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

@@ -6,5 +6,5 @@
  */
 import { ThHTMLAttributes } from 'react';
 export type TableHeadProps = ThHTMLAttributes<HTMLTableSectionElement>;
-declare const TableHead: (props: import("../../types/common").ReactAttr<"thead">) => React.ReactElement<any>;
+declare const TableHead: (props: import("react").HTMLAttributes<"thead">) => React.ReactElement<any>;
 export default TableHead;

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

@@ -1,12 +1,12 @@
 /**
- * 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, { type MouseEventHandler, ReactNode } from 'react';
+import React, { type HTMLAttributes, type MouseEventHandler, type ReactNode } from 'react';
 import { sortStates } from './state/sorting';
-import { TranslateWithId, ReactAttr } from '../../types/common';
+import { TranslateWithId } from '../../types/common';
 import { DataTableSortState } from './state/sortStates';
 export type TableHeaderTranslationKey = 'carbon.table.header.icon.description';
 export interface TableHeaderTranslationArgs {
@@ -15,7 +15,7 @@ export interface TableHeaderTranslationArgs {
     sortDirection?: DataTableSortState;
     sortStates: typeof sortStates;
 }
-export interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonElement>, TranslateWithId<TableHeaderTranslationKey, {
+export interface TableHeaderProps extends HTMLAttributes<HTMLTableCellElement & HTMLButtonElement>, TranslateWithId<TableHeaderTranslationKey, {
     header: any;
     sortDirection: any;
     isSortHeader: any;

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

@@ -1,12 +1,11 @@
 /**
- * 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 { ReactAttr } from '../../types/common';
-export interface TableRowProps extends ReactAttr<HTMLTableRowElement> {
+import React, { type HTMLAttributes } from 'react';
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
     /**
      * Specify an optional className to be applied to the container node
      */

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

@@ -4,5 +4,5 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-declare const TableToolbarContent: (props: import("../../types/common").ReactAttr<"div">) => React.ReactElement<any>;
+declare const TableToolbarContent: (props: import("react").HTMLAttributes<"div">) => React.ReactElement<any>;
 export default TableToolbarContent;

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

@@ -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.

package/lib/components/DatePickerInput/DatePickerInput.d.ts

@@ -1,16 +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 { ReactElementLike } from 'prop-types';
-import React, { ReactNode } from 'react';
-import { ReactAttr } from '../../types/common';
+import React, { type HTMLAttributes, type ReactNode } from 'react';
 type ExcludedAttributes = 'value' | 'onChange' | 'locale' | 'children';
 export type ReactNodeLike = ReactElementLike | ReadonlyArray<ReactNode> | string | number | boolean | null | undefined;
 export type func = (...args: any[]) => any;
-export interface DatePickerInputProps extends Omit<ReactAttr<HTMLInputElement>, ExcludedAttributes> {
+export interface DatePickerInputProps extends Omit<HTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
     /**
      * The type of the date picker:
      *

package/lib/components/Dialog/index.d.ts

@@ -4,9 +4,8 @@
  * 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 { ReactAttr } from '../../types/common';
-export interface DialogProps extends ReactAttr<HTMLDialogElement> {
+import React, { type HTMLAttributes } from 'react';
+export interface DialogProps extends HTMLAttributes<HTMLDialogElement> {
     /**
      * Provide the contents of the Dialog
      */
@@ -45,21 +44,21 @@ export interface DialogProps extends ReactAttr<HTMLDialogElement> {
     open?: boolean;
 }
 export declare const unstable__Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<unknown>>;
-export interface DialogHeaderProps extends ReactAttr<HTMLDivElement> {
+export interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Provide the contents to be rendered inside of this component
      */
     children?: React.ReactNode;
 }
 export declare const DialogHeader: React.ForwardRefExoticComponent<DialogHeaderProps & React.RefAttributes<HTMLDivElement>>;
-export interface DialogControlsProps extends ReactAttr<HTMLDivElement> {
+export interface DialogControlsProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Provide the contents to be rendered inside of this component
      */
     children?: React.ReactNode;
 }
 export declare const DialogControls: React.ForwardRefExoticComponent<DialogControlsProps & React.RefAttributes<HTMLDivElement>>;
-export interface DialogCloseButtonProps extends ReactAttr<HTMLDivElement> {
+export interface DialogCloseButtonProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Specify a click handler applied to the IconButton
      */

package/lib/components/Dropdown/Dropdown.Skeleton.d.ts

@@ -4,10 +4,9 @@
  * 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 { type ListBoxSize } from '../ListBox';
-import { ReactAttr } from '../../types/common';
-export interface DropdownSkeletonProps extends ReactAttr<HTMLDivElement> {
+export interface DropdownSkeletonProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Specify an optional className to add.
      */

package/lib/components/Dropdown/Dropdown.d.ts

@@ -4,15 +4,15 @@
  * 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, { ReactNode, Ref } from 'react';
+import React, { Ref, type HTMLAttributes, type ReactNode } from 'react';
 import { UseSelectProps } from 'downshift';
 import { type ListBoxMenuIconTranslationKey, type ListBoxSize, type ListBoxType } from '../ListBox';
-import { TranslateWithId, ReactAttr } from '../../types/common';
+import { TranslateWithId } from '../../types/common';
 type ExcludedAttributes = 'id' | 'onChange';
 export interface OnChangeData<ItemType> {
     selectedItem: ItemType | null;
 }
-export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes>, TranslateWithId<ListBoxMenuIconTranslationKey> {
+export interface DropdownProps<ItemType> extends Omit<HTMLAttributes<HTMLDivElement>, ExcludedAttributes>, TranslateWithId<ListBoxMenuIconTranslationKey> {
     /**
      * Specify a label to be read by screen readers on the container node
      * 'aria-label' of the ListBox component.