@carbon/react 1.83.0 → 1.84.0-rc.0

package/es/components/ContentSwitcher/ContentSwitcher.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useContext, useState, useRef, Children, useEffect, cloneElement, isValidElement } from 'react';
 import cx from 'classnames';
 import deprecate from '../../prop-types/deprecate.js';
 import { LayoutConstraint } from '../Layout/index.js';
@@ -18,131 +18,100 @@ import { getNextIndex } from '../../internal/keyboard/navigation.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
 import { noopFn } from '../../internal/noopFn.js';
 
-class ContentSwitcher extends React.Component {
-  constructor() {
-    super(...arguments);
-    /**
-     * The DOM references of child `<Switch>`.
-     * @type {Array<Element>}
-     * @private
-     */
-    _defineProperty(this, "_switchRefs", []);
-    _defineProperty(this, "state", {
-      selectedIndex: undefined
-    });
-    _defineProperty(this, "handleItemRef", index => ref => {
-      this._switchRefs[index] = ref;
-    });
-    _defineProperty(this, "handleChildChange", data => {
-      const {
-        selectionMode = 'automatic'
-      } = this.props;
-      // the currently selected child index
-      const {
-        selectedIndex
-      } = this.state;
-      // the newly selected child index
-      const {
-        index
-      } = data;
-      const {
-        key
-      } = data;
-      if (matches(data, [ArrowRight, ArrowLeft])) {
-        const nextIndex = getNextIndex(key, index, this.props.children?.length);
-        const children = React.Children.toArray(this.props.children);
-        if (selectionMode === 'manual') {
-          const switchRef = this._switchRefs[nextIndex];
-          switchRef && switchRef.focus();
-        } else {
-          this.setState({
-            selectedIndex: nextIndex
-          }, () => {
-            if (typeof this.state.selectedIndex !== 'number') {
-              return;
-            }
-            const child = children[this.state.selectedIndex];
-            const switchRef = this._switchRefs[this.state.selectedIndex];
-            switchRef && switchRef.focus();
-            this.props.onChange({
-              ...data,
-              index: this.state.selectedIndex,
-              name: child.props.name,
-              text: child.props.text
-            });
+const ContentSwitcher = ({
+  children,
+  className,
+  light,
+  lowContrast,
+  selectedIndex: selectedIndexProp = 0,
+  selectionMode = 'automatic',
+  size,
+  onChange = noopFn,
+  ...other
+}) => {
+  const prefix = useContext(PrefixContext);
+  const [selectedIndex, setSelectedIndex] = useState(selectedIndexProp);
+  const prevSelectedIndexRef = useRef(selectedIndexProp);
+  const switchRefs = useRef([]);
+  const childrenArray = Children.toArray(children);
+  useEffect(() => {
+    if (prevSelectedIndexRef.current !== selectedIndexProp) {
+      setSelectedIndex(selectedIndexProp);
+      prevSelectedIndexRef.current = selectedIndexProp;
+    }
+  }, [selectedIndexProp]);
+  const handleItemRef = index => ref => {
+    if (ref) {
+      switchRefs.current[index] = ref;
+    }
+  };
+  const focusSwitch = index => {
+    const ref = switchRefs.current[index];
+    if (ref) {
+      ref.focus();
+    }
+  };
+  const isKeyboardEvent = event => event && typeof event === 'object' && 'key' in event;
+  const handleChildChange = event => {
+    if (typeof event.index === 'undefined') return;
+    const {
+      index
+    } = event;
+    if (isKeyboardEvent(event) && matches(event, [ArrowRight, ArrowLeft])) {
+      const nextIndex = getNextIndex(event.key, index, childrenArray.length);
+      if (typeof nextIndex !== 'number') return;
+      focusSwitch(nextIndex);
+      if (selectionMode !== 'manual') {
+        const child = childrenArray[nextIndex];
+        setSelectedIndex(nextIndex);
+        if (/*#__PURE__*/isValidElement(child)) {
+          onChange({
+            ...event,
+            index: nextIndex,
+            name: child.props.name,
+            text: child.props.text
           });
         }
-      } else if (selectedIndex !== index) {
-        this.setState({
-          selectedIndex: index
-        }, () => {
-          const switchRef = this._switchRefs[index];
-          switchRef && switchRef.focus();
-          this.props.onChange(data);
-        });
-      }
-    });
-  }
-  static getDerivedStateFromProps(_ref, state) {
-    let {
-      selectedIndex = 0
-    } = _ref;
-    const {
-      prevSelectedIndex
-    } = state;
-    return prevSelectedIndex === selectedIndex ? null : {
-      selectedIndex,
-      prevSelectedIndex: selectedIndex
-    };
-  }
-  render() {
-    const prefix = this.context;
-    const {
-      children,
-      className,
-      light,
-      lowContrast,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      selectedIndex = 0,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      selectionMode = 'automatic',
-      size,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      onChange = noopFn,
-      ...other
-    } = this.props;
-    const isIconOnly = React.Children?.map(children, child => {
-      return child.type.displayName === 'IconSwitch';
-    })?.every(val => val === true);
-    const classes = cx(`${prefix}--content-switcher`, className, {
-      [`${prefix}--content-switcher--light`]: light,
-      [`${prefix}--content-switcher--${size}`]: size,
-      // TODO: V12 - Remove this class
-      [`${prefix}--layout--size-${size}`]: size,
-      [`${prefix}--content-switcher--icon-only`]: isIconOnly,
-      [`${prefix}--content-switcher--low-contrast`]: lowContrast
-    });
-    return /*#__PURE__*/React.createElement(LayoutConstraint, _extends({
-      size: {
-        default: 'md',
-        min: 'sm',
-        max: 'lg'
       }
-    }, other, {
-      className: classes,
-      role: "tablist",
-      onChange: undefined
-    }), children && React.Children.toArray(children).map((child, index) => /*#__PURE__*/React.cloneElement(child, {
-      index,
-      onClick: composeEventHandlers([this.handleChildChange, child.props.onClick]),
-      onKeyDown: this.handleChildChange,
-      selected: index === this.state.selectedIndex,
-      ref: this.handleItemRef(index),
-      size
-    })));
-  }
-}
-_defineProperty(ContentSwitcher, "propTypes", {
+    } else if (selectedIndex !== index) {
+      setSelectedIndex(index);
+      focusSwitch(index);
+      onChange(event);
+    }
+  };
+  const isIconOnly = childrenArray.every(
+  // TODO: Update this code when
+  // https://github.com/carbon-design-system/carbon/pull/18971 is merged.
+  child => child.type.displayName === 'IconSwitch');
+  const classes = cx(`${prefix}--content-switcher`, className, {
+    [`${prefix}--content-switcher--light`]: light,
+    [`${prefix}--content-switcher--${size}`]: size,
+    // TODO: V12 - Remove this class
+    [`${prefix}--layout--size-${size}`]: size,
+    [`${prefix}--content-switcher--icon-only`]: isIconOnly,
+    [`${prefix}--content-switcher--low-contrast`]: lowContrast
+  });
+  return /*#__PURE__*/React.createElement(LayoutConstraint, _extends({
+    size: {
+      default: 'md',
+      min: 'sm',
+      max: 'lg'
+    }
+  }, other, {
+    className: classes,
+    role: "tablist",
+    onChange: undefined
+  }), children && Children.map(children, (child, index) => /*#__PURE__*/cloneElement(child, {
+    index,
+    onClick: composeEventHandlers([handleChildChange, child.props.onClick]),
+    onKeyDown: composeEventHandlers([handleChildChange, child.props.onKeyDown]),
+    selected: index === selectedIndex,
+    ref: handleItemRef(index),
+    size
+  })));
+};
+ContentSwitcher.displayName = 'ContentSwitcher';
+ContentSwitcher.propTypes = {
   /**
    * Pass in Switch components to be rendered in the ContentSwitcher
    */
@@ -173,10 +142,9 @@ _defineProperty(ContentSwitcher, "propTypes", {
    */
   selectionMode: PropTypes.oneOf(['automatic', 'manual']),
   /**
-   * Specify the size of the Content Switcher. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+   * Specify the size of the Content Switcher. Currently supports either `sm`, `md` (default) or `lg` as an option.
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg'])
-});
-_defineProperty(ContentSwitcher, "contextType", PrefixContext);
+};
 
-export { ContentSwitcher as default };
+export { ContentSwitcher };

package/es/components/ContentSwitcher/index.d.ts

@@ -1,10 +1,9 @@
 /**
- * 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 { ContentSwitcherProps } from './ContentSwitcher';
-declare const ContentSwitcher: import("react").FunctionComponent<ContentSwitcherProps>;
+import { ContentSwitcher } from './ContentSwitcher';
 export default ContentSwitcher;
-export { ContentSwitcher };
+export * from './ContentSwitcher';

package/es/components/ContextMenu/useContextMenu.js

@@ -11,8 +11,7 @@ import { useState, useEffect } from 'react';
  * @param {TriggerType} [trigger=document] The element or ref which should trigger the Menu on right-click
  * @returns {ContextMenuProps} Props object to pass onto Menu component
  */
-function useContextMenu() {
-  let trigger = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
+function useContextMenu(trigger = document) {
   const [open, setOpen] = useState(false);
   const [position, setPosition] = useState([0, 0]);
   function openContextMenu(e) {

package/es/components/Copy/Copy.js

@@ -17,18 +17,17 @@ import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
 import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
 import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js';
 
-function Copy(_ref) {
-  let {
-    align = 'bottom',
-    autoAlign = false,
-    children,
-    className,
-    feedback = 'Copied!',
-    feedbackTimeout = 2000,
-    onAnimationEnd,
-    onClick = noopFn,
-    ...other
-  } = _ref;
+function Copy({
+  align = 'bottom',
+  autoAlign = false,
+  children,
+  className,
+  feedback = 'Copied!',
+  feedbackTimeout = 2000,
+  onAnimationEnd,
+  onClick = noopFn,
+  ...other
+}) {
   const [animation, setAnimation] = useState('');
   const prefix = usePrefix();
   const classNames = cx(className, `${prefix}--copy`, {

package/es/components/CopyButton/CopyButton.js

@@ -17,17 +17,16 @@ import { noopFn } from '../../internal/noopFn.js';
 import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
 import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
 
-function CopyButton(_ref) {
-  let {
-    align = 'bottom',
-    autoAlign = false,
-    feedback = 'Copied!',
-    feedbackTimeout = 2000,
-    iconDescription = 'Copy to clipboard',
-    className,
-    onClick = noopFn,
-    ...other
-  } = _ref;
+function CopyButton({
+  align = 'bottom',
+  autoAlign = false,
+  feedback = 'Copied!',
+  feedbackTimeout = 2000,
+  iconDescription = 'Copy to clipboard',
+  className,
+  onClick = noopFn,
+  ...other
+}) {
   const prefix = usePrefix();
   return /*#__PURE__*/React.createElement(LayoutConstraint, {
     size: {

package/es/components/DataTable/DataTable.js

@@ -78,9 +78,7 @@ const translateWithId = id => defaultTranslations[id];
  */
 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.
@@ -89,13 +87,12 @@ class DataTable extends Component {
      * Get the props associated with the given header. Mostly used for adding in
      * sorting behavior.
      */
-    _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
@@ -124,20 +121,19 @@ class DataTable extends Component {
     /**
      * Get the props associated with the given expand header.
      */
-    _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 {
@@ -148,7 +144,7 @@ class DataTable extends 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
         })])
       };
@@ -168,12 +164,11 @@ class DataTable extends Component {
     /**
      * Get the props associated with the given row. Mostly used for expansion.
      */
-    _defineProperty(this, "getRowProps", _ref2 => {
-      let {
-        row,
-        onClick,
-        ...rest
-      } = _ref2;
+    _defineProperty(this, "getRowProps", ({
+      row,
+      onClick,
+      ...rest
+    }) => {
       const {
         translateWithId: t = translateWithId
       } = this.props;
@@ -194,11 +189,10 @@ class DataTable extends Component {
     /**
      * Get the props associated with an expanded row
      */
-    _defineProperty(this, "getExpandedRowProps", _ref3 => {
-      let {
-        row,
-        ...rest
-      } = _ref3;
+    _defineProperty(this, "getExpandedRowProps", ({
+      row,
+      ...rest
+    }) => {
       return {
         ...rest,
         id: `expanded-row-${row.id}`
@@ -209,15 +203,14 @@ class DataTable extends 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) {
@@ -225,19 +218,19 @@ class DataTable extends 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;
@@ -245,10 +238,10 @@ class DataTable extends 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", props => {
@@ -308,14 +301,13 @@ class DataTable extends Component {
     /**
      * Get the props associated with the given table cell.
      */
-    _defineProperty(this, "getCellProps", _ref4 => {
-      let {
-        cell: {
-          hasAILabelHeader,
-          hasDecoratorHeader
-        },
-        ...rest
-      } = _ref4;
+    _defineProperty(this, "getCellProps", ({
+      cell: {
+        hasAILabelHeader,
+        hasDecoratorHeader
+      },
+      ...rest
+    }) => {
       return {
         ...rest,
         hasAILabelHeader,

package/es/components/DataTable/Table.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(() => {

package/es/components/DataTable/TableBatchAction.js

@@ -12,17 +12,14 @@ 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.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

package/es/components/DataTable/TableBatchActions.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,18 +38,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.useState(false);
   const prefix = usePrefix();
   const batchActionsClasses = cx({