@carbon/react 1.83.0-rc.0 → 1.84.0-rc.0

package/es/components/DataTable/DataTable.js

@@ -7,7 +7,7 @@
 
 import { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import { Component } from 'react';
 import isEqual from 'react-fast-compare';
 import getDerivedStateFromProps from './state/getDerivedStateFromProps.js';
 import { getNextSortState } from './state/sorting.js';
@@ -76,29 +76,23 @@ const translateWithId = id => defaultTranslations[id];
  * and updating the state of the single entity will cascade updates to the
  * consumer.
  */
-class DataTable extends React__default.Component {
+class DataTable extends Component {
   constructor(_props) {
-    var _this;
     super(_props);
-    _this = this;
     _defineProperty(this, "instanceId", void 0);
+    // TODO: Replace with a `type` when this component is converted to a
+    // functional component.
+    _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}
      */
-    _defineProperty(this, "getHeaderProps", _ref => {
-      let {
-        header,
-        onClick,
-        isSortable = this.props.isSortable,
-        ...rest
-      } = _ref;
+    _defineProperty(this, "getHeaderProps", ({
+      header,
+      onClick,
+      isSortable = this.props.isSortable,
+      ...rest
+    }) => {
       const {
         sortDirection,
         sortHeaderKey
@@ -126,26 +120,20 @@ class DataTable extends React__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}
      */
-    _defineProperty(this, "getExpandHeaderProps", function () {
-      let {
-        onClick,
-        onExpand,
-        ...rest
-      } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    _defineProperty(this, "getExpandHeaderProps", ({
+      onClick,
+      onExpand,
+      ...rest
+    } = {}) => {
       const {
         translateWithId: t = translateWithId
-      } = _this.props;
+      } = this.props;
       const {
         isExpandedAll,
         rowIds,
         rowsById
-      } = _this.state;
+      } = this.state;
       const isExpanded = isExpandedAll || rowIds.every(id => rowsById[id].isExpanded);
       const translationKey = isExpanded ? translationKeys.collapseAll : translationKeys.expandAll;
       return {
@@ -156,45 +144,31 @@ class DataTable extends React__default.Component {
         isExpanded,
         // Compose the event handlers so we don't overwrite a consumer's `onClick`
         // handler
-        onExpand: composeEventHandlers([_this.handleOnExpandAll, onExpand, onClick && _this.handleOnExpandHeaderClick(onClick, {
+        onExpand: composeEventHandlers([this.handleOnExpandAll, onExpand, onClick && this.handleOnExpandHeaderClick(onClick, {
           isExpanded
         })])
       };
     });
     /**
      * Decorate consumer's `onClick` event handler with sort parameters
-     *
-     * @param {Function} onClick
-     * @param {object} sortParams
-     * @returns {Function}
      */
     _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
      */
     _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}
      */
-    _defineProperty(this, "getRowProps", _ref2 => {
-      let {
-        row,
-        onClick,
-        ...rest
-      } = _ref2;
+    _defineProperty(this, "getRowProps", ({
+      row,
+      onClick,
+      ...rest
+    }) => {
       const {
         translateWithId: t = translateWithId
       } = this.props;
@@ -214,16 +188,11 @@ class DataTable extends React__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}
      */
-    _defineProperty(this, "getExpandedRowProps", _ref3 => {
-      let {
-        row,
-        ...rest
-      } = _ref3;
+    _defineProperty(this, "getExpandedRowProps", ({
+      row,
+      ...rest
+    }) => {
       return {
         ...rest,
         id: `expanded-row-${row.id}`
@@ -234,15 +203,14 @@ class DataTable extends React__default.Component {
      * applicable. Most often used to indicate selection status of the table or
      * for a specific row.
      */
-    _defineProperty(this, "getSelectionProps", function () {
-      let {
-        onClick,
-        row,
-        ...rest
-      } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    _defineProperty(this, "getSelectionProps", ({
+      onClick,
+      row,
+      ...rest
+    } = {}) => {
       const {
         translateWithId: t = translateWithId
-      } = _this.props;
+      } = this.props;
 
       // If we're given a row, return the selection state values for that row
       if (row) {
@@ -250,19 +218,19 @@ class DataTable extends React__default.Component {
         return {
           ...rest,
           checked: row.isSelected,
-          onSelect: composeEventHandlers([_this.handleOnSelectRow(row.id), onClick]),
-          id: `${_this.getTablePrefix()}__select-row-${row.id}`,
-          name: `select-row-${_this.instanceId}`,
+          onSelect: composeEventHandlers([this.handleOnSelectRow(row.id), onClick]),
+          id: `${this.getTablePrefix()}__select-row-${row.id}`,
+          name: `select-row-${this.instanceId}`,
           'aria-label': t(translationKey),
           disabled: row.disabled,
-          radio: _this.props.radio
+          radio: this.props.radio
         };
       }
 
       // Otherwise, we're working on `TableSelectAll` which handles toggling the
       // selection state of all rows.
-      const rowCount = _this.state.rowIds.length;
-      const selectedRowCount = _this.getSelectedRows().length;
+      const rowCount = this.state.rowIds.length;
+      const selectedRowCount = this.getSelectedRows().length;
       const checked = rowCount > 0 && selectedRowCount === rowCount;
       const indeterminate = rowCount > 0 && selectedRowCount > 0 && selectedRowCount !== rowCount;
       const translationKey = checked || indeterminate ? translationKeys.unselectAll : translationKeys.selectAll;
@@ -270,41 +238,36 @@ class DataTable extends React__default.Component {
         ...rest,
         'aria-label': t(translationKey),
         checked,
-        id: `${_this.getTablePrefix()}__select-all`,
+        id: `${this.getTablePrefix()}__select-all`,
         indeterminate,
-        name: `select-all-${_this.instanceId}`,
-        onSelect: composeEventHandlers([_this.handleSelectAll, onClick])
+        name: `select-all-${this.instanceId}`,
+        onSelect: composeEventHandlers([this.handleSelectAll, onClick])
       };
     });
-    _defineProperty(this, "getToolbarProps", function () {
-      let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    _defineProperty(this, "getToolbarProps", props => {
       const {
         size
-      } = _this.props;
+      } = this.props;
       const isSmall = size === 'xs' || size === 'sm';
       return {
         ...props,
         size: isSmall ? 'sm' : undefined
       };
     });
-    _defineProperty(this, "getBatchActionProps", function () {
-      let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    _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.
-     */
     _defineProperty(this, "getTableProps", () => {
       const {
         useZebraStyles,
@@ -325,9 +288,6 @@ class DataTable extends React__default.Component {
         experimentalAutoAlign
       };
     });
-    /**
-     * Helper utility to get the TableContainer Props.
-     */
     _defineProperty(this, "getTableContainerProps", () => {
       const {
         stickyHeader,
@@ -340,25 +300,24 @@ class DataTable extends React__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}
      */
-    _defineProperty(this, "getCellProps", _ref4 => {
-      let {
-        cell,
-        ...rest
-      } = _ref4;
+    _defineProperty(this, "getCellProps", ({
+      cell: {
+        hasAILabelHeader,
+        hasDecoratorHeader
+      },
+      ...rest
+    }) => {
       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
      */
     _defineProperty(this, "getSelectedRows", () => this.state.rowIds.filter(id => {
       const row = this.state.rowsById[id];
@@ -366,8 +325,9 @@ class DataTable extends React__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
+     */
     _defineProperty(this, "getFilteredRowIds", () => {
       const {
         filterRows = defaultFilterRows
@@ -387,15 +347,13 @@ class DataTable extends React__default.Component {
     /**
      * Helper for getting the table prefix for elements that require an
      * `id` attribute that is unique.
-     *
-     * @returns {string}
      */
     _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)
      */
     _defineProperty(this, "setAllSelectedState", (initialState, isSelected, filteredRowIds) => {
       const {
@@ -445,9 +403,6 @@ class DataTable extends React__default.Component {
     });
     /**
      * Handler for toggling the selection state of a given row.
-     *
-     * @param {string} rowId
-     * @returns {Function}
      */
     _defineProperty(this, "handleOnSelectRow", rowId => () => {
       this.setState(state => {
@@ -492,9 +447,6 @@ class DataTable extends React__default.Component {
     });
     /**
      * Handler for toggling the expansion state of a given row.
-     *
-     * @param {string} rowId
-     * @returns {Function}
      */
     _defineProperty(this, "handleOnExpandRow", rowId => () => {
       this.setState(state => {
@@ -538,8 +490,7 @@ class DataTable extends React__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.
      */
     _defineProperty(this, "handleSortBy", headerKey => () => {
       this.setState(state => getNextSortState(this.props, state, {
@@ -549,8 +500,6 @@ class DataTable extends React__default.Component {
     /**
      * Event handler for transitioning input value state changes for the table
      * filter component.
-     *
-     * @param {Event} event
      */
     _defineProperty(this, "handleOnInputValueChange", (event, defaultValue) => {
       if (event.target) {
@@ -571,7 +520,7 @@ class DataTable extends React__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);
@@ -639,16 +588,65 @@ class DataTable extends React__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;
   }
 }
-_defineProperty(DataTable, "propTypes", {
+_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
+_defineProperty(DataTable, "Table", void 0);
+_defineProperty(DataTable, "TableActionList", void 0);
+_defineProperty(DataTable, "TableBatchAction", void 0);
+_defineProperty(DataTable, "TableBatchActions", void 0);
+_defineProperty(DataTable, "TableBody", void 0);
+_defineProperty(DataTable, "TableCell", void 0);
+_defineProperty(DataTable, "TableContainer", void 0);
+_defineProperty(DataTable, "TableDecoratorRow", void 0);
+_defineProperty(DataTable, "TableExpandHeader", void 0);
+_defineProperty(DataTable, "TableExpandRow", void 0);
+_defineProperty(DataTable, "TableExpandedRow", void 0);
+_defineProperty(DataTable, "TableHead", void 0);
+_defineProperty(DataTable, "TableHeader", void 0);
+_defineProperty(DataTable, "TableRow", void 0);
+_defineProperty(DataTable, "TableSelectAll", void 0);
+_defineProperty(DataTable, "TableSelectRow", void 0);
+_defineProperty(DataTable, "TableSlugRow", void 0);
+_defineProperty(DataTable, "TableToolbar", void 0);
+_defineProperty(DataTable, "TableToolbarAction", void 0);
+_defineProperty(DataTable, "TableToolbarContent", void 0);
+_defineProperty(DataTable, "TableToolbarSearch", void 0);
+_defineProperty(DataTable, "TableToolbarMenu", void 0);
+DataTable.Table = Table;
+DataTable.TableActionList = TableActionList;
+DataTable.TableBatchAction = TableBatchAction;
+DataTable.TableBatchActions = TableBatchActions;
+DataTable.TableBody = TableBody;
+DataTable.TableCell = TableCell;
+DataTable.TableContainer = TableContainer;
+DataTable.TableDecoratorRow = TableDecoratorRow;
+DataTable.TableExpandHeader = TableExpandHeader;
+DataTable.TableExpandRow = TableExpandRow;
+DataTable.TableExpandedRow = TableExpandedRow;
+DataTable.TableHead = TableHead;
+DataTable.TableHeader = TableHeader;
+DataTable.TableRow = TableRow;
+DataTable.TableSelectAll = TableSelectAll;
+DataTable.TableSelectRow = TableSelectRow;
+DataTable.TableSlugRow = TableSlugRow;
+DataTable.TableToolbar = TableToolbar;
+DataTable.TableToolbarAction = TableToolbarAction;
+DataTable.TableToolbarContent = TableToolbarContent;
+DataTable.TableToolbarSearch = TableToolbarSearch;
+DataTable.TableToolbarMenu = TableToolbarMenu;
+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
    */
@@ -723,52 +721,6 @@ _defineProperty(DataTable, "propTypes", {
    * `true` to add useZebraStyles striping.
    */
   useZebraStyles: PropTypes.bool
-});
-_defineProperty(DataTable, "translationKeys", Object.values(translationKeys));
-// Static properties for sub-components
-_defineProperty(DataTable, "Table", void 0);
-_defineProperty(DataTable, "TableActionList", void 0);
-_defineProperty(DataTable, "TableBatchAction", void 0);
-_defineProperty(DataTable, "TableBatchActions", void 0);
-_defineProperty(DataTable, "TableBody", void 0);
-_defineProperty(DataTable, "TableCell", void 0);
-_defineProperty(DataTable, "TableContainer", void 0);
-_defineProperty(DataTable, "TableDecoratorRow", void 0);
-_defineProperty(DataTable, "TableExpandHeader", void 0);
-_defineProperty(DataTable, "TableExpandRow", void 0);
-_defineProperty(DataTable, "TableExpandedRow", void 0);
-_defineProperty(DataTable, "TableHead", void 0);
-_defineProperty(DataTable, "TableHeader", void 0);
-_defineProperty(DataTable, "TableRow", void 0);
-_defineProperty(DataTable, "TableSelectAll", void 0);
-_defineProperty(DataTable, "TableSelectRow", void 0);
-_defineProperty(DataTable, "TableSlugRow", void 0);
-_defineProperty(DataTable, "TableToolbar", void 0);
-_defineProperty(DataTable, "TableToolbarAction", void 0);
-_defineProperty(DataTable, "TableToolbarContent", void 0);
-_defineProperty(DataTable, "TableToolbarSearch", void 0);
-_defineProperty(DataTable, "TableToolbarMenu", void 0);
-DataTable.Table = Table;
-DataTable.TableActionList = TableActionList;
-DataTable.TableBatchAction = TableBatchAction;
-DataTable.TableBatchActions = TableBatchActions;
-DataTable.TableBody = TableBody;
-DataTable.TableCell = TableCell;
-DataTable.TableContainer = TableContainer;
-DataTable.TableDecoratorRow = TableDecoratorRow;
-DataTable.TableExpandHeader = TableExpandHeader;
-DataTable.TableExpandRow = TableExpandRow;
-DataTable.TableExpandedRow = TableExpandedRow;
-DataTable.TableHead = TableHead;
-DataTable.TableHeader = TableHeader;
-DataTable.TableRow = TableRow;
-DataTable.TableSelectAll = TableSelectAll;
-DataTable.TableSelectRow = TableSelectRow;
-DataTable.TableSlugRow = TableSlugRow;
-DataTable.TableToolbar = TableToolbar;
-DataTable.TableToolbarAction = TableToolbarAction;
-DataTable.TableToolbarContent = TableToolbarContent;
-DataTable.TableToolbarSearch = TableToolbarSearch;
-DataTable.TableToolbarMenu = TableToolbarMenu;
+};
 
 export { DataTable as default };

package/es/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/es/components/DataTable/Table.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useContext, useState, useRef, useCallback } from 'react';
+import React, { useContext, useState, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -43,20 +43,19 @@ const isElementWrappingContent = (element, context) => {
   }
   return false;
 };
-const Table = _ref => {
-  let {
-    className,
-    children,
-    useZebraStyles,
-    size = 'lg',
-    isSortable = false,
-    useStaticWidth,
-    stickyHeader,
-    overflowMenuOnHover = true,
-    experimentalAutoAlign = false,
-    tabIndex,
-    ...other
-  } = _ref;
+const Table = ({
+  className,
+  children,
+  useZebraStyles,
+  size = 'lg',
+  isSortable = false,
+  useStaticWidth,
+  stickyHeader,
+  overflowMenuOnHover = true,
+  experimentalAutoAlign = false,
+  tabIndex,
+  ...other
+}) => {
   const {
     titleId,
     descriptionId
@@ -72,12 +71,10 @@ const Table = _ref => {
     [`${prefix}--data-table--sticky-header`]: stickyHeader,
     [`${prefix}--data-table--visible-overflow-menu`]: !overflowMenuOnHover
   });
-  const toggleTableBodyAlignmentClass = useCallback(function () {
-    let alignTop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  const toggleTableBodyAlignmentClass = useCallback((alignTop = false) => {
     alignTop ? tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-body`) : tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-body`);
   }, [prefix]);
-  const toggleTableHeaderAlignmentClass = useCallback(function () {
-    let alignTop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  const toggleTableHeaderAlignmentClass = useCallback((alignTop = false) => {
     alignTop ? tableRef.current?.classList.add(`${prefix}--data-table--top-aligned-header`) : tableRef.current?.classList.remove(`${prefix}--data-table--top-aligned-header`);
   }, [prefix]);
   const setTableAlignment = useCallback(() => {
@@ -126,19 +123,19 @@ const Table = _ref => {
   useIsomorphicEffect(() => {
     setTableAlignment();
   }, [setTableAlignment, size]);
-  const table = /*#__PURE__*/React__default.createElement("div", {
+  const table = /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--data-table-content`
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     ,
     tabIndex: tabIndex ?? (isScrollable ? 0 : undefined)
-  }, /*#__PURE__*/React__default.createElement("table", _extends({
+  }, /*#__PURE__*/React.createElement("table", _extends({
     "aria-labelledby": titleId,
     "aria-describedby": descriptionId
   }, other, {
     className: componentClass,
     ref: tableRef
   }), children));
-  return stickyHeader ? /*#__PURE__*/React__default.createElement("section", {
+  return stickyHeader ? /*#__PURE__*/React.createElement("section", {
     className: `${prefix}--data-table_inner-container`
   }, table) : table;
 };

package/es/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/es/components/DataTable/TableBatchAction.js

@@ -7,22 +7,19 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import { AddFilled } from '@carbon/icons-react';
 import Button from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
 
-const TableBatchAction = _ref => {
-  let {
-    renderIcon = AddFilled,
-    iconDescription = 'Add',
-    ...props
-  } = _ref;
-  return /*#__PURE__*/React__default.createElement(Button, _extends({
-    renderIcon: renderIcon,
-    iconDescription: iconDescription
-  }, props));
-};
+const TableBatchAction = ({
+  renderIcon = AddFilled,
+  iconDescription = 'Add',
+  ...props
+}) => /*#__PURE__*/React.createElement(Button, _extends({
+  renderIcon: renderIcon,
+  iconDescription: iconDescription
+}, props));
 TableBatchAction.propTypes = {
   /**
    * Specify if the button is an icon-only button