@carbon/react 1.83.0 → 1.84.0

package/lib/components/DataTable/DataTable.js

@@ -87,9 +87,7 @@ const translateWithId = id => defaultTranslations[id];
  */
 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.
@@ -98,13 +96,12 @@ class DataTable extends React.Component {
      * Get the props associated with the given header. Mostly used for adding in
      * sorting behavior.
      */
-    _rollupPluginBabelHelpers.defineProperty(this, "getHeaderProps", _ref => {
-      let {
-        header,
-        onClick,
-        isSortable = this.props.isSortable,
-        ...rest
-      } = _ref;
+    _rollupPluginBabelHelpers.defineProperty(this, "getHeaderProps", ({
+      header,
+      onClick,
+      isSortable = this.props.isSortable,
+      ...rest
+    }) => {
       const {
         sortDirection,
         sortHeaderKey
@@ -133,20 +130,19 @@ class DataTable extends React.Component {
     /**
      * Get the props associated with the given expand header.
      */
-    _rollupPluginBabelHelpers.defineProperty(this, "getExpandHeaderProps", function () {
-      let {
-        onClick,
-        onExpand,
-        ...rest
-      } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    _rollupPluginBabelHelpers.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 {
@@ -157,7 +153,7 @@ class DataTable extends React.Component {
         isExpanded,
         // Compose the event handlers so we don't overwrite a consumer's `onClick`
         // handler
-        onExpand: events.composeEventHandlers([_this.handleOnExpandAll, onExpand, onClick && _this.handleOnExpandHeaderClick(onClick, {
+        onExpand: events.composeEventHandlers([this.handleOnExpandAll, onExpand, onClick && this.handleOnExpandHeaderClick(onClick, {
           isExpanded
         })])
       };
@@ -177,12 +173,11 @@ class DataTable extends React.Component {
     /**
      * Get the props associated with the given row. Mostly used for expansion.
      */
-    _rollupPluginBabelHelpers.defineProperty(this, "getRowProps", _ref2 => {
-      let {
-        row,
-        onClick,
-        ...rest
-      } = _ref2;
+    _rollupPluginBabelHelpers.defineProperty(this, "getRowProps", ({
+      row,
+      onClick,
+      ...rest
+    }) => {
       const {
         translateWithId: t = translateWithId
       } = this.props;
@@ -203,11 +198,10 @@ class DataTable extends React.Component {
     /**
      * Get the props associated with an expanded row
      */
-    _rollupPluginBabelHelpers.defineProperty(this, "getExpandedRowProps", _ref3 => {
-      let {
-        row,
-        ...rest
-      } = _ref3;
+    _rollupPluginBabelHelpers.defineProperty(this, "getExpandedRowProps", ({
+      row,
+      ...rest
+    }) => {
       return {
         ...rest,
         id: `expanded-row-${row.id}`
@@ -218,15 +212,14 @@ class DataTable extends React.Component {
      * applicable. Most often used to indicate selection status of the table or
      * for a specific row.
      */
-    _rollupPluginBabelHelpers.defineProperty(this, "getSelectionProps", function () {
-      let {
-        onClick,
-        row,
-        ...rest
-      } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    _rollupPluginBabelHelpers.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) {
@@ -234,19 +227,19 @@ class DataTable extends React.Component {
         return {
           ...rest,
           checked: row.isSelected,
-          onSelect: events.composeEventHandlers([_this.handleOnSelectRow(row.id), onClick]),
-          id: `${_this.getTablePrefix()}__select-row-${row.id}`,
-          name: `select-row-${_this.instanceId}`,
+          onSelect: events.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;
@@ -254,10 +247,10 @@ class DataTable extends React.Component {
         ...rest,
         'aria-label': t(translationKey),
         checked,
-        id: `${_this.getTablePrefix()}__select-all`,
+        id: `${this.getTablePrefix()}__select-all`,
         indeterminate,
-        name: `select-all-${_this.instanceId}`,
-        onSelect: events.composeEventHandlers([_this.handleSelectAll, onClick])
+        name: `select-all-${this.instanceId}`,
+        onSelect: events.composeEventHandlers([this.handleSelectAll, onClick])
       };
     });
     _rollupPluginBabelHelpers.defineProperty(this, "getToolbarProps", props => {
@@ -317,14 +310,13 @@ class DataTable extends React.Component {
     /**
      * Get the props associated with the given table cell.
      */
-    _rollupPluginBabelHelpers.defineProperty(this, "getCellProps", _ref4 => {
-      let {
-        cell: {
-          hasAILabelHeader,
-          hasDecoratorHeader
-        },
-        ...rest
-      } = _ref4;
+    _rollupPluginBabelHelpers.defineProperty(this, "getCellProps", ({
+      cell: {
+        hasAILabelHeader,
+        hasDecoratorHeader
+      },
+      ...rest
+    }) => {
       return {
         ...rest,
         hasAILabelHeader,

package/lib/components/DataTable/Table.js

@@ -53,20 +53,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
@@ -82,12 +81,10 @@ const Table = _ref => {
     [`${prefix}--data-table--sticky-header`]: stickyHeader,
     [`${prefix}--data-table--visible-overflow-menu`]: !overflowMenuOnHover
   });
-  const toggleTableBodyAlignmentClass = React.useCallback(function () {
-    let alignTop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  const toggleTableBodyAlignmentClass = React.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 = React.useCallback(function () {
-    let alignTop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  const toggleTableHeaderAlignmentClass = React.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 = React.useCallback(() => {

package/lib/components/DataTable/TableBatchAction.js

@@ -21,17 +21,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TableBatchAction = _ref => {
-  let {
-    renderIcon = iconsReact.AddFilled,
-    iconDescription = 'Add',
-    ...props
-  } = _ref;
-  return /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({
-    renderIcon: renderIcon,
-    iconDescription: iconDescription
-  }, props));
-};
+const TableBatchAction = ({
+  renderIcon = iconsReact.AddFilled,
+  iconDescription = 'Add',
+  ...props
+}) => /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({
+  renderIcon: renderIcon,
+  iconDescription: iconDescription
+}, props));
 TableBatchAction.propTypes = {
   /**
    * Specify if the button is an icon-only button

package/lib/components/DataTable/TableBatchActions.js

@@ -33,14 +33,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];
   }
@@ -49,18 +48,17 @@ 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 TableBatchActions = ({
+  className,
+  children,
+  shouldShowBatchActions,
+  totalSelected,
+  totalCount,
+  onCancel,
+  onSelectAll,
+  translateWithId: t = translateWithId,
+  ...rest
+}) => {
   const [isScrolling, setIsScrolling] = React__default["default"].useState(false);
   const prefix = usePrefix.usePrefix();
   const batchActionsClasses = cx__default["default"]({

package/lib/components/DataTable/TableBody.js

@@ -18,17 +18,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TableBody = _ref => {
-  let {
-    children,
-    className,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/React__default["default"].createElement("tbody", _rollupPluginBabelHelpers["extends"]({
-    "aria-live": rest['aria-live'] ?? 'polite',
-    className: className
-  }, rest), children);
-};
+const TableBody = ({
+  children,
+  className,
+  ...rest
+}) => /*#__PURE__*/React__default["default"].createElement("tbody", _rollupPluginBabelHelpers["extends"]({
+  "aria-live": rest['aria-live'] ?? 'polite',
+  className: className
+}, rest), children);
 TableBody.propTypes = {
   /**
    * `polite` Adjust the notification behavior of screen readers

package/lib/components/DataTable/TableContainer.js

@@ -24,16 +24,15 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TableContainer = _ref => {
-  let {
-    className,
-    children,
-    title,
-    description,
-    stickyHeader,
-    useStaticWidth,
-    ...rest
-  } = _ref;
+const TableContainer = ({
+  className,
+  children,
+  title,
+  description,
+  stickyHeader,
+  useStaticWidth,
+  ...rest
+}) => {
   const baseId = useId.useId('tc');
   const titleId = `${baseId}-title`;
   const descriptionId = `${baseId}-description`;

package/lib/components/DataTable/TableDecoratorRow.js

@@ -20,11 +20,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const TableDecoratorRow = _ref => {
-  let {
-    className,
-    decorator
-  } = _ref;
+const TableDecoratorRow = ({
+  className,
+  decorator
+}) => {
   const prefix = usePrefix.usePrefix();
   const TableDecoratorRowClasses = cx__default["default"]({
     ...(className && {

package/lib/components/DataTable/TableExpandHeader.js

@@ -24,21 +24,20 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-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.usePrefix();
   const className = cx__default["default"](`${prefix}--table-expand`, headerClassName);
   const previousValue = isExpanded ? 'collapsed' : undefined;

package/lib/components/DataTable/TableExpandRow.js

@@ -23,20 +23,19 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TableExpandRow = /*#__PURE__*/React__default["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__default["default"].forwardRef(({
+  ['aria-controls']: ariaControls,
+  ['aria-label']: ariaLabel,
+  ariaLabel: deprecatedAriaLabel,
+  className: rowClassName,
+  children,
+  isExpanded,
+  onExpand,
+  expandIconDescription,
+  isSelected,
+  expandHeader = 'expand',
+  ...rest
+}, ref) => {
   const prefix = usePrefix.usePrefix();
 
   // We need to put the AILabel and Decorator before the expansion arrow and all other table cells after the arrow.

package/lib/components/DataTable/TableExpandedRow.js

@@ -22,13 +22,12 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TableExpandedRow = _ref => {
-  let {
-    className: customClassName,
-    children,
-    colSpan,
-    ...rest
-  } = _ref;
+const TableExpandedRow = ({
+  className: customClassName,
+  children,
+  colSpan,
+  ...rest
+}) => {
   const rowRef = React.useRef(null);
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"](`${prefix}--expandable-row`, customClassName);

package/lib/components/DataTable/TableHeader.js

@@ -51,22 +51,21 @@ const sortDirections = {
   [sortStates.sortStates.ASC]: 'ascending',
   [sortStates.sortStates.DESC]: 'descending'
 };
-const TableHeader = /*#__PURE__*/React__default["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__default["default"].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.usePrefix();
   const uniqueId = useId.useId('table-sort');
 

package/lib/components/DataTable/TableSelectAll.js

@@ -22,18 +22,17 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-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.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("th", {
     "aria-live": "off",

package/lib/components/DataTable/TableSelectRow.js

@@ -25,19 +25,18 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-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.usePrefix();
   const uniqueNameId = useId.useId();
   const handleRadioChange = onChange ? (value, name, event) => {

package/lib/components/DataTable/TableSlugRow.js

@@ -21,11 +21,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const TableSlugRow = _ref => {
-  let {
-    className,
-    slug
-  } = _ref;
+const TableSlugRow = ({
+  className,
+  slug
+}) => {
   React.useEffect(() => {
     deprecateComponent["default"]('TableSlugRow', 'The `TableSlugRow` component has been deprecated and will be removed in the next major version. Use the TableDecoratorRow component instead.');
   }, []);

package/lib/components/DataTable/TableToolbar.js

@@ -22,14 +22,13 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-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.usePrefix();
   const className = cx__default["default"]({
     [`${prefix}--table-toolbar`]: true,

package/lib/components/DataTable/TableToolbarMenu.js

@@ -24,15 +24,14 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const defaultIconDescription = 'Settings';
-const TableToolbarMenu = _ref => {
-  let {
-    className,
-    renderIcon = iconsReact.Settings,
-    iconDescription = defaultIconDescription,
-    children,
-    menuOptionsClass,
-    ...rest
-  } = _ref;
+const TableToolbarMenu = ({
+  className,
+  renderIcon = iconsReact.Settings,
+  iconDescription = defaultIconDescription,
+  children,
+  menuOptionsClass,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const toolbarActionClasses = cx__default["default"](className, `${prefix}--toolbar-action ${prefix}--overflow-menu`);
   const menuOptionsClasses = cx__default["default"](menuOptionsClass, `${prefix}--toolbar-action__menu`);