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

package/es/components/DataTable/TableHeader.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, { useRef } from 'react';
+import React, { useRef } from 'react';
 import { ArrowUp, ArrowsVertical } from '@carbon/icons-react';
 import './state/sorting.js';
 import { useId } from '../../internal/useId.js';
@@ -41,32 +41,31 @@ const sortDirections = {
   [sortStates.ASC]: 'ascending',
   [sortStates.DESC]: 'descending'
 };
-const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(_ref, ref) {
-  let {
-    className: headerClassName,
-    children,
-    colSpan,
-    decorator,
-    isSortable = false,
-    isSortHeader,
-    onClick,
-    scope = defaultScope,
-    sortDirection,
-    translateWithId: t = translateWithId,
-    slug,
-    id,
-    ...rest
-  } = _ref;
+const TableHeader = /*#__PURE__*/React.forwardRef(function TableHeader({
+  className: headerClassName,
+  children,
+  colSpan,
+  decorator,
+  isSortable = false,
+  isSortHeader,
+  onClick,
+  scope = defaultScope,
+  sortDirection,
+  translateWithId: t = translateWithId,
+  slug,
+  id,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const uniqueId = useId('table-sort');
 
   // AILabel is always size `mini`
   const AILableRef = useRef(null);
   let colHasAILabel;
-  let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
+  let normalizedDecorator = /*#__PURE__*/React.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
   if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
     colHasAILabel = true;
-    normalizedDecorator = /*#__PURE__*/React__default.cloneElement(normalizedDecorator, {
+    normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
       size: 'mini',
       ref: AILableRef
     });
@@ -77,15 +76,15 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
     [`${prefix}--table-header-label--decorator`]: decorator
   });
   if (!isSortable) {
-    return /*#__PURE__*/React__default.createElement("th", _extends({}, rest, {
+    return /*#__PURE__*/React.createElement("th", _extends({}, rest, {
       id: id,
       className: headerClassName,
       scope: scope,
       colSpan: colSpan,
       ref: ref
-    }), children ? /*#__PURE__*/React__default.createElement("div", {
+    }), children ? /*#__PURE__*/React.createElement("div", {
       className: headerLabelClassNames
-    }, children, /*#__PURE__*/React__default.createElement("div", {
+    }, children, /*#__PURE__*/React.createElement("div", {
       className: `${prefix}--table-header-label--decorator-inner`
     }, normalizedDecorator)) : null);
   }
@@ -112,32 +111,32 @@ const TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(
       return onClick(evt);
     }
   };
-  return /*#__PURE__*/React__default.createElement("th", {
+  return /*#__PURE__*/React.createElement("th", {
     id: id,
     "aria-sort": ariaSort,
     className: headerClasses,
     colSpan: colSpan,
     ref: ref,
     scope: scope
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--table-sort__description`,
     id: uniqueId
-  }, sortDescription), /*#__PURE__*/React__default.createElement("button", _extends({
+  }, sortDescription), /*#__PURE__*/React.createElement("button", _extends({
     type: "button",
     "aria-describedby": uniqueId,
     className: className,
     onClick: handleClick
-  }, rest), /*#__PURE__*/React__default.createElement("span", {
+  }, rest), /*#__PURE__*/React.createElement("span", {
     className: `${prefix}--table-sort__flex`
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--table-header-label`
-  }, children), /*#__PURE__*/React__default.createElement(ArrowUp, {
+  }, children), /*#__PURE__*/React.createElement(ArrowUp, {
     size: 20,
     className: `${prefix}--table-sort__icon`
-  }), /*#__PURE__*/React__default.createElement(ArrowsVertical, {
+  }), /*#__PURE__*/React.createElement(ArrowsVertical, {
     size: 20,
     className: `${prefix}--table-sort__icon-unsorted`
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--table-header-label--decorator-inner`
   }, normalizedDecorator))));
 });

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

@@ -6,16 +6,16 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const TableRow = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+const TableRow = /*#__PURE__*/React.forwardRef((props, ref) => {
   const prefix = usePrefix();
   let rowHasAILabel;
   if (props?.children) {
-    React__default.Children.toArray(props.children).map(child => {
+    React.Children.toArray(props.children).map(child => {
       if (child.type?.displayName === 'TableSlugRow' || child.type?.displayName === 'TableDecoratorRow') {
         if (child.props.slug || child.props.decorator?.type.displayName === 'AILabel') {
           rowHasAILabel = true;
@@ -41,7 +41,7 @@ const TableRow = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   if (className) {
     cleanProps.className = className;
   }
-  return /*#__PURE__*/React__default.createElement("tr", _extends({
+  return /*#__PURE__*/React.createElement("tr", _extends({
     ref: ref
   }, cleanProps));
 });

package/es/components/DataTable/TableSelectAll.js

@@ -6,30 +6,29 @@
  */
 
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import InlineCheckbox from '../InlineCheckbox/InlineCheckbox.js';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 
-const TableSelectAll = _ref => {
-  let {
-    ariaLabel: deprecatedAriaLabel = 'Select all rows in the table',
-    ['aria-label']: ariaLabel,
-    checked,
-    id,
-    indeterminate,
-    name,
-    onSelect,
-    disabled,
-    className
-  } = _ref;
+const TableSelectAll = ({
+  ariaLabel: deprecatedAriaLabel = 'Select all rows in the table',
+  ['aria-label']: ariaLabel,
+  checked,
+  id,
+  indeterminate,
+  name,
+  onSelect,
+  disabled,
+  className
+}) => {
   const prefix = usePrefix();
-  return /*#__PURE__*/React__default.createElement("th", {
+  return /*#__PURE__*/React.createElement("th", {
     "aria-live": "off",
     scope: "col",
     className: cx(`${prefix}--table-column-checkbox`, className)
-  }, /*#__PURE__*/React__default.createElement(InlineCheckbox, {
+  }, /*#__PURE__*/React.createElement(InlineCheckbox, {
     "aria-label": ariaLabel || deprecatedAriaLabel,
     checked: checked,
     id: id,

package/es/components/DataTable/TableSelectRow.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React from 'react';
 import cx from 'classnames';
 import InlineCheckbox from '../InlineCheckbox/InlineCheckbox.js';
 import RadioButton from '../RadioButton/RadioButton.js';
@@ -15,19 +15,18 @@ import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 
-const TableSelectRow = _ref => {
-  let {
-    ariaLabel: deprecatedAriaLabel,
-    ['aria-label']: ariaLabel,
-    checked,
-    id,
-    name,
-    onSelect,
-    onChange,
-    disabled,
-    radio,
-    className
-  } = _ref;
+const TableSelectRow = ({
+  ariaLabel: deprecatedAriaLabel,
+  ['aria-label']: ariaLabel,
+  checked,
+  id,
+  name,
+  onSelect,
+  onChange,
+  disabled,
+  radio,
+  className
+}) => {
   const prefix = usePrefix();
   const uniqueNameId = useId();
   const handleRadioChange = onChange ? (value, name, event) => {
@@ -51,14 +50,14 @@ const TableSelectRow = _ref => {
     }),
     [`${prefix}--table-column-radio`]: radio
   });
-  return /*#__PURE__*/React__default.createElement("td", {
+  return /*#__PURE__*/React.createElement("td", {
     className: tableSelectRowClasses,
     "aria-live": "off"
-  }, radio ? /*#__PURE__*/React__default.createElement(RadioButton, _extends({}, selectionInputProps, {
+  }, radio ? /*#__PURE__*/React.createElement(RadioButton, _extends({}, selectionInputProps, {
     labelText: labelValue,
     onChange: handleRadioChange,
     hideLabel: true
-  })) : /*#__PURE__*/React__default.createElement(InlineCheckbox, _extends({}, selectionInputProps, {
+  })) : /*#__PURE__*/React.createElement(InlineCheckbox, _extends({}, selectionInputProps, {
     "aria-label": labelValue,
     onChange: handleCheckboxChange
   })));

package/es/components/DataTable/TableSlugRow.js

@@ -6,16 +6,15 @@
  */
 
 import PropTypes from 'prop-types';
-import React__default, { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecateComponent from '../../prop-types/deprecateComponent.js';
 
-const TableSlugRow = _ref => {
-  let {
-    className,
-    slug
-  } = _ref;
+const TableSlugRow = ({
+  className,
+  slug
+}) => {
   useEffect(() => {
     deprecateComponent('TableSlugRow', 'The `TableSlugRow` component has been deprecated and will be removed in the next major version. Use the TableDecoratorRow component instead.');
   }, []);
@@ -31,11 +30,11 @@ const TableSlugRow = _ref => {
   // Slug is always size `mini`
   let normalizedSlug;
   if (slug) {
-    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+    normalizedSlug = /*#__PURE__*/React.cloneElement(slug, {
       size: 'mini'
     });
   }
-  return /*#__PURE__*/React__default.createElement("td", {
+  return /*#__PURE__*/React.createElement("td", {
     className: TableSlugRowClasses
   }, normalizedSlug);
 };

package/es/components/DataTable/TableToolbar.js

@@ -8,24 +8,23 @@
 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 { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 
-const TableToolbar = _ref => {
-  let {
-    ['aria-label']: ariaLabel = 'data table toolbar',
-    ariaLabel: deprecatedAriaLabel,
-    children,
-    size,
-    ...rest
-  } = _ref;
+const TableToolbar = ({
+  ['aria-label']: ariaLabel = 'data table toolbar',
+  ariaLabel: deprecatedAriaLabel,
+  children,
+  size,
+  ...rest
+}) => {
   const prefix = usePrefix();
   const className = cx({
     [`${prefix}--table-toolbar`]: true,
     [`${prefix}--table-toolbar--${size}`]: size
   });
-  return /*#__PURE__*/React__default.createElement("section", _extends({
+  return /*#__PURE__*/React.createElement("section", _extends({
     "aria-label": deprecatedAriaLabel || ariaLabel
   }, rest, {
     className: className

package/es/components/DataTable/TableToolbarAction.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import OverflowMenuItem from '../OverflowMenuItem/OverflowMenuItem.js';
 
 const frFn = forwardRef;
@@ -16,7 +16,7 @@ const TableToolbarAction = frFn((props, ref) => {
     children,
     ...rest
   } = props;
-  return /*#__PURE__*/React__default.createElement(OverflowMenuItem, _extends({
+  return /*#__PURE__*/React.createElement(OverflowMenuItem, _extends({
     ref: ref,
     itemText: children
   }, rest));

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

@@ -9,24 +9,23 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { Settings } 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 OverflowMenu from '../OverflowMenu/index.js';
 
 const defaultIconDescription = 'Settings';
-const TableToolbarMenu = _ref => {
-  let {
-    className,
-    renderIcon = Settings,
-    iconDescription = defaultIconDescription,
-    children,
-    menuOptionsClass,
-    ...rest
-  } = _ref;
+const TableToolbarMenu = ({
+  className,
+  renderIcon = Settings,
+  iconDescription = defaultIconDescription,
+  children,
+  menuOptionsClass,
+  ...rest
+}) => {
   const prefix = usePrefix();
   const toolbarActionClasses = cx(className, `${prefix}--toolbar-action ${prefix}--overflow-menu`);
   const menuOptionsClasses = cx(menuOptionsClass, `${prefix}--toolbar-action__menu`);
-  return /*#__PURE__*/React__default.createElement(OverflowMenu, _extends({
+  return /*#__PURE__*/React.createElement(OverflowMenu, _extends({
     "aria-label": iconDescription,
     renderIcon: renderIcon,
     className: toolbarActionClasses,

package/es/components/DataTable/TableToolbarSearch.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, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import Search from '../Search/Search.js';
 import '../Search/Search.Skeleton.js';
 import { useId } from '../../internal/useId.js';
@@ -26,28 +26,27 @@ const translationKeys = {
 const translateWithId = id => {
   return translationKeys[id];
 };
-const TableToolbarSearch = _ref => {
-  let {
-    className,
-    searchContainerClass,
-    onChange: onChangeProp,
-    onClear = noopFn,
-    translateWithId: t = translateWithId,
-    placeholder,
-    labelText,
-    expanded: expandedProp,
-    defaultExpanded,
-    defaultValue,
-    disabled,
-    onExpand,
-    persistent = false,
-    id,
-    onBlur,
-    onFocus,
-    size = 'lg',
-    tabIndex = '0',
-    ...rest
-  } = _ref;
+const TableToolbarSearch = ({
+  className,
+  searchContainerClass,
+  onChange: onChangeProp,
+  onClear = noopFn,
+  translateWithId: t = translateWithId,
+  placeholder,
+  labelText,
+  expanded: expandedProp,
+  defaultExpanded,
+  defaultValue,
+  disabled,
+  onExpand,
+  persistent = false,
+  id,
+  onBlur,
+  onFocus,
+  size = 'lg',
+  tabIndex = '0',
+  ...rest
+}) => {
   const {
     current: controlled
   } = useRef(expandedProp !== undefined);
@@ -78,8 +77,7 @@ const TableToolbarSearch = _ref => {
     [`${prefix}--toolbar-search-container-expandable`]: !persistent,
     [`${prefix}--toolbar-search-container-persistent`]: persistent
   });
-  const handleExpand = function (event) {
-    let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !expanded;
+  const handleExpand = (event, value = !expanded) => {
     if (!disabled) {
       if (!controlled && !persistent) {
         setExpandedState(value);
@@ -97,7 +95,7 @@ const TableToolbarSearch = _ref => {
   };
   const handleOnFocus = event => handleExpand(event, true);
   const handleOnBlur = event => !value && handleExpand(event, false);
-  return /*#__PURE__*/React__default.createElement(Search, _extends({
+  return /*#__PURE__*/React.createElement(Search, _extends({
     disabled: disabled,
     className: searchClasses,
     value: value,

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

@@ -40,10 +40,9 @@ const getNextSortDirection = (prevHeader, header, prevState) => {
   // in descending order by default
   return sortStates.ASC;
 };
-const getNextSortState = (props, state, _ref) => {
-  let {
-    key
-  } = _ref;
+const getNextSortState = (props, state, {
+  key
+}) => {
   const {
     sortDirection,
     sortHeaderKey

package/es/components/DataTable/tools/filter.js

@@ -9,20 +9,18 @@
  * Filters row IDs based on whether any of the cell values in the row include
  * the input value as a substring. Boolean cell values are ignored.
  */
-const defaultFilterRows = _ref => {
-  let {
-    rowIds,
-    headers,
-    cellsById,
-    inputValue,
-    getCellId
-  } = _ref;
+const defaultFilterRows = ({
+  rowIds,
+  headers,
+  cellsById,
+  inputValue,
+  getCellId
+}) => {
   const normalizedInput = inputValue.trim().toLowerCase();
   if (!normalizedInput) return rowIds;
-  return rowIds.filter(rowId => headers.some(_ref2 => {
-    let {
-      key
-    } = _ref2;
+  return rowIds.filter(rowId => headers.some(({
+    key
+  }) => {
     const cellId = getCellId(rowId, key);
     const cell = cellsById[cellId];
     if (typeof cell.value === 'boolean') return false;

package/es/components/DataTable/tools/normalize.js

@@ -14,8 +14,7 @@ import { getCellId } from './cells.js';
  * @param {Array<object>} headers
  * @returns {object}
  */
-const normalize = function (rows, headers) {
-  let prevState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+const normalize = (rows, headers, prevState = {}) => {
   const {
     rowsById: prevRowsByIds
   } = prevState;
@@ -46,12 +45,11 @@ const normalize = function (rows, headers) {
       rowsById[row.id].isSelected = prevRowsByIds[row.id].isSelected;
       rowsById[row.id].isExpanded = prevRowsByIds[row.id].isExpanded;
     }
-    headers.forEach((_ref, i) => {
-      let {
-        key,
-        slug,
-        decorator
-      } = _ref;
+    headers.forEach(({
+      key,
+      slug,
+      decorator
+    }, i) => {
       const id = getCellId(row.id, key);
       // Initialize the cell info and state values, namely for editing
       cellsById[id] = {

package/es/components/DataTable/tools/sorting.js

@@ -13,8 +13,7 @@ import { sortStates } from '../state/sortStates.js';
  * type, the default sort algorithm will be used for those types. Otherwise, the
  * values will be converted to strings for comparison.
  */
-const compare = function (a, b) {
-  let locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'en';
+const compare = (a, b, locale = 'en') => {
   // prevent multiple null values in one column (sorting breaks)
   if (a === null) a = '';
   if (b === null) b = '';
@@ -37,8 +36,7 @@ const compare = function (a, b) {
  *
  * Note: Uses numeric comparison if strings are numeric.
  */
-const compareStrings = function (a, b) {
-  let locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'en';
+const compareStrings = (a, b, locale = 'en') => {
   const isNumeric = !isNaN(parseFloat(a)) && !isNaN(parseFloat(b));
   return a.localeCompare(b, locale, {
     numeric: isNumeric
@@ -47,38 +45,34 @@ const compareStrings = function (a, b) {
 /**
  * Sorts table rows based on the provided column key and direction.
  */
-const sortRows = _ref => {
-  let {
-    rowIds,
-    cellsById,
-    sortDirection,
+const sortRows = ({
+  rowIds,
+  cellsById,
+  sortDirection,
+  key,
+  locale = 'en',
+  sortRow = defaultSortRow
+}) => rowIds.slice().sort((a, b) => {
+  const cellA = cellsById[getCellId(a, key)];
+  const cellB = cellsById[getCellId(b, key)];
+  return sortRow(cellA?.value, cellB?.value, {
     key,
-    locale = 'en',
-    sortRow = defaultSortRow
-  } = _ref;
-  return rowIds.slice().sort((a, b) => {
-    const cellA = cellsById[getCellId(a, key)];
-    const cellB = cellsById[getCellId(b, key)];
-    return sortRow(cellA?.value, cellB?.value, {
-      key,
-      sortDirection,
-      sortStates,
-      locale,
-      compare,
-      rowIds: [a, b]
-    });
+    sortDirection,
+    sortStates,
+    locale,
+    compare,
+    rowIds: [a, b]
   });
-};
+});
 
 /**
  * Sorts table rows based on the sort direction.
  */
-const defaultSortRow = (cellA, cellB, _ref2) => {
-  let {
-    sortDirection,
-    sortStates,
-    locale
-  } = _ref2;
+const defaultSortRow = (cellA, cellB, {
+  sortDirection,
+  sortStates,
+  locale
+}) => {
   if (sortDirection === sortStates.ASC) {
     return compare(cellA, cellB, locale);
   }