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

package/es/components/DataTable/TableBatchActions.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 from 'react';
+import React from 'react';
 import Button from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
 import TableActionList from './TableActionList.js';
@@ -23,14 +23,13 @@ const translationKeys = {
   'carbon.table.batch.item.selected': 'item selected',
   'carbon.table.batch.selectAll': 'Select all'
 };
-const translateWithId = function (id) {
-  let {
-    totalSelected,
-    totalCount
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-    totalSelected: 0,
-    totalCount: 0
-  };
+const translateWithId = (id, {
+  totalSelected,
+  totalCount
+} = {
+  totalSelected: 0,
+  totalCount: 0
+}) => {
   if (id === 'carbon.table.batch.cancel') {
     return translationKeys[id];
   }
@@ -39,19 +38,18 @@ const translateWithId = function (id) {
   }
   return `${totalSelected} ${translationKeys[id]}`;
 };
-const TableBatchActions = _ref => {
-  let {
-    className,
-    children,
-    shouldShowBatchActions,
-    totalSelected,
-    totalCount,
-    onCancel,
-    onSelectAll,
-    translateWithId: t = translateWithId,
-    ...rest
-  } = _ref;
-  const [isScrolling, setIsScrolling] = React__default.useState(false);
+const TableBatchActions = ({
+  className,
+  children,
+  shouldShowBatchActions,
+  totalSelected,
+  totalCount,
+  onCancel,
+  onSelectAll,
+  translateWithId: t = translateWithId,
+  ...rest
+}) => {
+  const [isScrolling, setIsScrolling] = React.useState(false);
   const prefix = usePrefix();
   const batchActionsClasses = cx({
     [`${prefix}--batch-actions`]: true,
@@ -60,28 +58,28 @@ const TableBatchActions = _ref => {
   const batchSummaryClasses = cx(`${prefix}--batch-summary`, {
     [`${prefix}--batch-summary__scroll`]: isScrolling
   });
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     onScroll: () => {
       setIsScrolling(!isScrolling);
     },
     "aria-hidden": !shouldShowBatchActions,
     className: batchActionsClasses
-  }, rest), /*#__PURE__*/React__default.createElement("div", {
+  }, rest), /*#__PURE__*/React.createElement("div", {
     className: batchSummaryClasses
-  }, /*#__PURE__*/React__default.createElement("p", {
+  }, /*#__PURE__*/React.createElement("p", {
     className: `${prefix}--batch-summary__para`
-  }, /*#__PURE__*/React__default.createElement(Text, null, totalSelected > 1 || totalSelected === 0 ? t('carbon.table.batch.items.selected', {
+  }, /*#__PURE__*/React.createElement(Text, null, totalSelected > 1 || totalSelected === 0 ? t('carbon.table.batch.items.selected', {
     totalSelected
   }) : t('carbon.table.batch.item.selected', {
     totalSelected
-  }))), onSelectAll && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
+  }))), onSelectAll && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--batch-summary__divider`
-  }, "|"), /*#__PURE__*/React__default.createElement(Button, {
+  }, "|"), /*#__PURE__*/React.createElement(Button, {
     onClick: onSelectAll,
     tabIndex: shouldShowBatchActions ? 0 : -1
   }, t('carbon.table.batch.selectAll', {
     totalCount
-  })))), /*#__PURE__*/React__default.createElement(TableActionList, null, children, /*#__PURE__*/React__default.createElement(Button, {
+  })))), /*#__PURE__*/React.createElement(TableActionList, null, children, /*#__PURE__*/React.createElement(Button, {
     className: `${prefix}--batch-summary__cancel`,
     tabIndex: shouldShowBatchActions ? 0 : -1,
     onClick: onCancel

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

@@ -7,19 +7,16 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 
-const TableBody = _ref => {
-  let {
-    children,
-    className,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/React__default.createElement("tbody", _extends({
-    "aria-live": rest['aria-live'] ?? 'polite',
-    className: className
-  }, rest), children);
-};
+const TableBody = ({
+  children,
+  className,
+  ...rest
+}) => /*#__PURE__*/React.createElement("tbody", _extends({
+  "aria-live": rest['aria-live'] ?? 'polite',
+  className: className
+}, rest), children);
 TableBody.propTypes = {
   /**
    * `polite` Adjust the notification behavior of screen readers

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

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import PropTypes from 'prop-types';
@@ -24,7 +24,7 @@ const TableCell = frFn((props, ref) => {
   const tableCellClassNames = cx(className, {
     [`${prefix}--table-cell--column-slug`]: hasAILabelHeader
   });
-  return /*#__PURE__*/React__default.createElement("td", _extends({
+  return /*#__PURE__*/React.createElement("td", _extends({
     className: tableCellClassNames ? tableCellClassNames : undefined,
     ref: ref,
     colSpan: colSpan

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

@@ -8,22 +8,21 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
 import { TableContext } from './TableContext.js';
 import { Section, Heading } from '../Heading/index.js';
 
-const TableContainer = _ref => {
-  let {
-    className,
-    children,
-    title,
-    description,
-    stickyHeader,
-    useStaticWidth,
-    ...rest
-  } = _ref;
+const TableContainer = ({
+  className,
+  children,
+  title,
+  description,
+  stickyHeader,
+  useStaticWidth,
+  ...rest
+}) => {
   const baseId = useId('tc');
   const titleId = `${baseId}-title`;
   const descriptionId = `${baseId}-description`;
@@ -38,16 +37,16 @@ const TableContainer = _ref => {
       descriptionId: description ? descriptionId : undefined
     };
   }, [title, description, titleId, descriptionId]);
-  return /*#__PURE__*/React__default.createElement(TableContext.Provider, {
+  return /*#__PURE__*/React.createElement(TableContext.Provider, {
     value: value
-  }, /*#__PURE__*/React__default.createElement(Section, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(Section, _extends({}, rest, {
     className: tableContainerClasses
-  }), (title || description) && /*#__PURE__*/React__default.createElement("div", {
+  }), (title || description) && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--data-table-header`
-  }, title && /*#__PURE__*/React__default.createElement(Heading, {
+  }, title && /*#__PURE__*/React.createElement(Heading, {
     className: `${prefix}--data-table-header__title`,
     id: titleId
-  }, title), description && /*#__PURE__*/React__default.createElement("p", {
+  }, title), description && /*#__PURE__*/React.createElement("p", {
     className: `${prefix}--data-table-header__description`,
     id: descriptionId
   }, description)), children));

package/es/components/DataTable/TableDecoratorRow.js

@@ -6,15 +6,14 @@
  */
 
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const TableDecoratorRow = _ref => {
-  let {
-    className,
-    decorator
-  } = _ref;
+const TableDecoratorRow = ({
+  className,
+  decorator
+}) => {
   const prefix = usePrefix();
   const TableDecoratorRowClasses = cx({
     ...(className && {
@@ -23,13 +22,13 @@ const TableDecoratorRow = _ref => {
     [`${prefix}--table-column-decorator`]: true,
     [`${prefix}--table-column-decorator--active`]: decorator
   });
-  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(decorator) ? decorator : null;
+  let normalizedDecorator = /*#__PURE__*/React.isValidElement(decorator) ? decorator : null;
   if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
-    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
+    normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
       size: 'mini'
     });
   }
-  return /*#__PURE__*/React__default.createElement("td", {
+  return /*#__PURE__*/React.createElement("td", {
     className: TableDecoratorRowClasses
   }, normalizedDecorator);
 };

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

@@ -9,35 +9,34 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { ChevronRight } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
 
-const TableExpandHeader = _ref => {
-  let {
-    ['aria-controls']: ariaControls,
-    ['aria-label']: ariaLabel,
-    ariaLabel: deprecatedAriaLabel,
-    className: headerClassName,
-    enableExpando,
-    enableToggle,
-    id = 'expand',
-    isExpanded,
-    onExpand,
-    expandIconDescription,
-    children,
-    ...rest
-  } = _ref;
+const TableExpandHeader = ({
+  ['aria-controls']: ariaControls,
+  ['aria-label']: ariaLabel,
+  ariaLabel: deprecatedAriaLabel,
+  className: headerClassName,
+  enableExpando,
+  enableToggle,
+  id = 'expand',
+  isExpanded,
+  onExpand,
+  expandIconDescription,
+  children,
+  ...rest
+}) => {
   const prefix = usePrefix();
   const className = cx(`${prefix}--table-expand`, headerClassName);
   const previousValue = isExpanded ? 'collapsed' : undefined;
-  return /*#__PURE__*/React__default.createElement("th", _extends({
+  return /*#__PURE__*/React.createElement("th", _extends({
     scope: "col",
     className: className,
     "data-previous-value": previousValue,
     id: id
-  }, rest), enableExpando || enableToggle ? /*#__PURE__*/React__default.createElement("button", {
+  }, rest), enableExpando || enableToggle ? /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: `${prefix}--table-expand__button`,
     onClick: onExpand,
@@ -45,7 +44,7 @@ const TableExpandHeader = _ref => {
     "aria-label": deprecatedAriaLabel || ariaLabel,
     "aria-expanded": isExpanded,
     "aria-controls": ariaControls
-  }, /*#__PURE__*/React__default.createElement(ChevronRight, {
+  }, /*#__PURE__*/React.createElement(ChevronRight, {
     className: `${prefix}--table-expand__svg`,
     "aria-label": expandIconDescription
   })) : null, children);

package/es/components/DataTable/TableExpandRow.js

@@ -8,30 +8,29 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import { ChevronRight } from '@carbon/icons-react';
 import TableCell from './TableCell.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const TableExpandRow = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
-  let {
-    ['aria-controls']: ariaControls,
-    ['aria-label']: ariaLabel,
-    ariaLabel: deprecatedAriaLabel,
-    className: rowClassName,
-    children,
-    isExpanded,
-    onExpand,
-    expandIconDescription,
-    isSelected,
-    expandHeader = 'expand',
-    ...rest
-  } = _ref;
+const TableExpandRow = /*#__PURE__*/React.forwardRef(({
+  ['aria-controls']: ariaControls,
+  ['aria-label']: ariaLabel,
+  ariaLabel: deprecatedAriaLabel,
+  className: rowClassName,
+  children,
+  isExpanded,
+  onExpand,
+  expandIconDescription,
+  isSelected,
+  expandHeader = 'expand',
+  ...rest
+}, ref) => {
   const prefix = usePrefix();
 
   // We need to put the AILabel and Decorator before the expansion arrow and all other table cells after the arrow.
   let rowHasAILabel;
-  const decorator = React__default.Children.toArray(children).map(child => {
+  const decorator = React.Children.toArray(children).map(child => {
     if (child.type?.displayName === 'TableSlugRow' || child.type?.displayName === 'TableDecoratorRow') {
       if (child.props.slug || child.props.decorator?.type.displayName === 'AILabel') {
         rowHasAILabel = true;
@@ -39,7 +38,7 @@ const TableExpandRow = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       return child;
     }
   });
-  const normalizedChildren = React__default.Children.toArray(children).map(child => {
+  const normalizedChildren = React.Children.toArray(children).map(child => {
     if (child.type?.displayName !== 'TableSlugRow' && child.type?.displayName !== 'TableDecoratorRow') {
       return child;
     }
@@ -51,15 +50,15 @@ const TableExpandRow = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     [`${prefix}--data-table--slug-row ${prefix}--data-table--ai-label-row`]: rowHasAILabel
   }, rowClassName);
   const previousValue = isExpanded ? 'collapsed' : undefined;
-  return /*#__PURE__*/React__default.createElement("tr", _extends({}, rest, {
+  return /*#__PURE__*/React.createElement("tr", _extends({}, rest, {
     ref: ref,
     className: className,
     "data-parent-row": true
-  }), decorator, /*#__PURE__*/React__default.createElement(TableCell, {
+  }), decorator, /*#__PURE__*/React.createElement(TableCell, {
     className: `${prefix}--table-expand`,
     "data-previous-value": previousValue,
     headers: expandHeader
-  }, /*#__PURE__*/React__default.createElement("button", {
+  }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: `${prefix}--table-expand__button`,
     onClick: onExpand,
@@ -67,7 +66,7 @@ const TableExpandRow = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     "aria-label": deprecatedAriaLabel || ariaLabel,
     "aria-expanded": isExpanded,
     "aria-controls": ariaControls
-  }, /*#__PURE__*/React__default.createElement(ChevronRight, {
+  }, /*#__PURE__*/React.createElement(ChevronRight, {
     className: `${prefix}--table-expand__svg`,
     "aria-label": expandIconDescription
   }))), normalizedChildren);

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

@@ -8,17 +8,16 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useRef } from 'react';
+import React, { useRef } from 'react';
 import TableCell from './TableCell.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const TableExpandedRow = _ref => {
-  let {
-    className: customClassName,
-    children,
-    colSpan,
-    ...rest
-  } = _ref;
+const TableExpandedRow = ({
+  className: customClassName,
+  children,
+  colSpan,
+  ...rest
+}) => {
   const rowRef = useRef(null);
   const prefix = usePrefix();
   const className = cx(`${prefix}--expandable-row`, customClassName);
@@ -32,16 +31,16 @@ const TableExpandedRow = _ref => {
       }
     }
   };
-  return /*#__PURE__*/React__default.createElement("tr", _extends({
+  return /*#__PURE__*/React.createElement("tr", _extends({
     ref: rowRef,
     onMouseEnter: () => toggleParentHoverClass('enter'),
     onMouseLeave: () => toggleParentHoverClass('leave')
   }, rest, {
     className: className,
     "data-child-row": true
-  }), /*#__PURE__*/React__default.createElement(TableCell, {
+  }), /*#__PURE__*/React.createElement(TableCell, {
     colSpan: colSpan
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--child-row-inner-container`
   }, children)));
 };

package/es/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/es/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;