@carbon/react 1.83.0-rc.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__default 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,129 +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__default.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__default.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,
-      // 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__default.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
-    });
-    return /*#__PURE__*/React__default.createElement(LayoutConstraint, _extends({
-      size: {
-        default: 'md',
-        min: 'sm',
-        max: 'lg'
       }
-    }, other, {
-      className: classes,
-      role: "tablist",
-      onChange: undefined
-    }), children && React__default.Children.toArray(children).map((child, index) => /*#__PURE__*/React__default.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
    */
@@ -153,6 +124,10 @@ _defineProperty(ContentSwitcher, "propTypes", {
    * `true` to use the light variant.
    */
   light: deprecate(PropTypes.bool, 'The `light` prop for `ContentSwitcher` is no longer needed and has ' + 'been deprecated. It will be removed in the next major release.'),
+  /**
+   * `true` to use the low contrast version.
+   */
+  lowContrast: PropTypes.bool,
   /**
    * Specify an `onChange` handler that is called whenever the ContentSwitcher
    * changes which item is selected
@@ -167,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

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import cx from 'classnames';
 import { composeEventHandlers } from '../../tools/events.js';
 import { usePrefix } from '../../internal/usePrefix.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`, {
@@ -52,7 +51,7 @@ function Copy(_ref) {
     handleFadeOut.cancel();
   }, [handleFadeOut]);
   const initialLabel = other['aria-label'] ?? '';
-  return /*#__PURE__*/React__default.createElement(IconButton, _extends({
+  return /*#__PURE__*/React.createElement(IconButton, _extends({
     closeOnActivation: false,
     align: align,
     autoAlign: autoAlign,

package/es/components/CopyButton/CopyButton.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 { Copy as Copy$1 } from '@carbon/icons-react';
 import Copy from '../Copy/Copy.js';
@@ -17,24 +17,23 @@ 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__default.createElement(LayoutConstraint, {
+  return /*#__PURE__*/React.createElement(LayoutConstraint, {
     size: {
       default: 'md',
       max: 'lg'
     }
-  }, /*#__PURE__*/React__default.createElement(Copy, _extends({
+  }, /*#__PURE__*/React.createElement(Copy, _extends({
     feedback: feedback,
     feedbackTimeout: feedbackTimeout,
     onClick: onClick,
@@ -42,7 +41,7 @@ function CopyButton(_ref) {
     autoAlign: autoAlign,
     className: cx(className, `${prefix}--copy-btn`),
     "aria-label": iconDescription
-  }, other), /*#__PURE__*/React__default.createElement(Copy$1, {
+  }, other), /*#__PURE__*/React.createElement(Copy$1, {
     className: `${prefix}--snippet__icon`
   })));
 }

package/es/components/DangerButton/DangerButton.js

@@ -6,11 +6,11 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React from 'react';
 import Button from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
 
-const DangerButton = props => /*#__PURE__*/React__default.createElement(Button, _extends({}, props, {
+const DangerButton = props => /*#__PURE__*/React.createElement(Button, _extends({}, props, {
   kind: "danger"
 }));