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

package/lib/components/ComposedModal/ComposedModal.js

@@ -38,14 +38,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function ModalBody(_ref, ref) {
-  let {
-    className: customClassName,
-    children,
-    hasForm,
-    hasScrollingContent,
-    ...rest
-  } = _ref;
+const ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function ModalBody({
+  className: customClassName,
+  children,
+  hasForm,
+  hasScrollingContent,
+  ...rest
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const contentRef = React.useRef(null);
   const [isScrollable, setIsScrollable] = React.useState(false);
@@ -103,27 +102,26 @@ ModalBody.propTypes = {
    */
   hasScrollingContent: PropTypes__default["default"].bool
 };
-const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function ComposedModal(_ref2, ref) {
-  let {
-    ['aria-labelledby']: ariaLabelledBy,
-    ['aria-label']: ariaLabel,
-    children,
-    className: customClassName,
-    containerClassName,
-    danger,
-    decorator,
-    isFullWidth,
-    onClose,
-    onKeyDown,
-    open,
-    preventCloseOnClickOutside,
-    selectorPrimaryFocus = '[data-modal-primary-focus]',
-    selectorsFloatingMenus,
-    size,
-    launcherButtonRef,
-    slug,
-    ...rest
-  } = _ref2;
+const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function ComposedModal({
+  ['aria-labelledby']: ariaLabelledBy,
+  ['aria-label']: ariaLabel,
+  children,
+  className: customClassName,
+  containerClassName,
+  danger,
+  decorator,
+  isFullWidth,
+  onClose,
+  onKeyDown,
+  open,
+  preventCloseOnClickOutside,
+  selectorPrimaryFocus = '[data-modal-primary-focus]',
+  selectorsFloatingMenus,
+  size,
+  launcherButtonRef,
+  slug,
+  ...rest
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const [isOpen, setIsOpen] = React.useState(!!open);
   const [wasOpen, setWasOpen] = React.useState(!!open);
@@ -184,11 +182,10 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
       closeModal(evt);
     }
   }
-  function handleBlur(_ref3) {
-    let {
-      target: oldActiveNode,
-      relatedTarget: currentActiveNode
-    } = _ref3;
+  function handleBlur({
+    target: oldActiveNode,
+    relatedTarget: currentActiveNode
+  }) {
     if (open && currentActiveNode && oldActiveNode && innerModal.current) {
       const {
         current: bodyNode

package/lib/components/ComposedModal/ModalFooter.js

@@ -26,32 +26,28 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function SecondaryButtonSet(_ref) {
-  let {
-    secondaryButtons,
-    secondaryButtonText,
-    secondaryClassName,
-    closeModal,
-    onRequestClose,
-    disabled
-  } = _ref;
+function SecondaryButtonSet({
+  secondaryButtons,
+  secondaryButtonText,
+  secondaryClassName,
+  closeModal,
+  onRequestClose,
+  disabled
+}) {
   function handleRequestClose(evt) {
     closeModal(evt);
     onRequestClose(evt);
   }
   if (Array.isArray(secondaryButtons) && secondaryButtons.length <= 2) {
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, secondaryButtons.map((_ref2, i) => {
-      let {
-        buttonText,
-        onClick: onButtonClick
-      } = _ref2;
-      return /*#__PURE__*/React__default["default"].createElement(Button["default"], {
-        key: `${buttonText}-${i}`,
-        className: secondaryClassName,
-        kind: "secondary",
-        onClick: onButtonClick || handleRequestClose
-      }, buttonText);
-    }));
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, secondaryButtons.map(({
+      buttonText,
+      onClick: onButtonClick
+    }, i) => /*#__PURE__*/React__default["default"].createElement(Button["default"], {
+      key: `${buttonText}-${i}`,
+      className: secondaryClassName,
+      kind: "secondary",
+      onClick: onButtonClick || handleRequestClose
+    }, buttonText)));
   }
   if (secondaryButtonText) {
     return /*#__PURE__*/React__default["default"].createElement(Button["default"], {
@@ -85,27 +81,26 @@ SecondaryButtonSet.propTypes = {
   },
   secondaryClassName: PropTypes__default["default"].string
 };
-const ModalFooter = /*#__PURE__*/React__default["default"].forwardRef(function ModalFooter(_ref3, ref) {
-  let {
-    children,
-    className: customClassName,
-    closeModal = noopFn.noopFn,
-    danger,
-    inputref,
-    onRequestClose = noopFn.noopFn,
-    onRequestSubmit = noopFn.noopFn,
-    primaryButtonDisabled,
-    primaryButtonText,
-    primaryClassName,
-    secondaryButtonText,
-    secondaryButtons,
-    secondaryClassName,
-    loadingStatus = 'inactive',
-    loadingDescription,
-    loadingIconDescription,
-    onLoadingSuccess = noopFn.noopFn,
-    ...rest
-  } = _ref3;
+const ModalFooter = /*#__PURE__*/React__default["default"].forwardRef(function ModalFooter({
+  children,
+  className: customClassName,
+  closeModal = noopFn.noopFn,
+  danger,
+  inputref,
+  onRequestClose = noopFn.noopFn,
+  onRequestSubmit = noopFn.noopFn,
+  primaryButtonDisabled,
+  primaryButtonText,
+  primaryClassName,
+  secondaryButtonText,
+  secondaryButtons,
+  secondaryClassName,
+  loadingStatus = 'inactive',
+  loadingDescription,
+  loadingIconDescription,
+  onLoadingSuccess = noopFn.noopFn,
+  ...rest
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const footerClass = cx__default["default"](`${prefix}--modal-footer`, customClassName, Array.isArray(secondaryButtons) && secondaryButtons.length === 2 ? `${prefix}--modal-footer--three-button` : null);
   const primaryButtonClass = cx__default["default"](primaryClassName, loadingStatus !== 'inactive' ? `${prefix}--btn--loading` : null);

package/lib/components/ComposedModal/ModalHeader.js

@@ -23,21 +23,20 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const ModalHeader = /*#__PURE__*/React__default["default"].forwardRef(function ModalHeader(_ref, ref) {
-  let {
-    buttonOnClick,
-    children,
-    className: customClassName,
-    closeClassName,
-    closeIconClassName,
-    closeModal,
-    iconDescription = 'Close',
-    label,
-    labelClassName,
-    title,
-    titleClassName,
-    ...rest
-  } = _ref;
+const ModalHeader = /*#__PURE__*/React__default["default"].forwardRef(function ModalHeader({
+  buttonOnClick,
+  children,
+  className: customClassName,
+  closeClassName,
+  closeIconClassName,
+  closeModal,
+  iconDescription = 'Close',
+  label,
+  labelClassName,
+  title,
+  titleClassName,
+  ...rest
+}, ref) {
   const prefix = usePrefix.usePrefix();
   function handleCloseButtonClick(evt) {
     closeModal?.(evt);

package/lib/components/ContainedList/ContainedList.js

@@ -48,17 +48,16 @@ function renderChildren(children) {
   }
   return children;
 }
-const ContainedList = _ref => {
-  let {
-    action,
-    children,
-    className,
-    isInset,
-    kind = variants[0],
-    label,
-    size,
-    ...rest
-  } = _ref;
+const ContainedList = ({
+  action,
+  children,
+  className,
+  isInset,
+  kind = variants[0],
+  label,
+  size,
+  ...rest
+}) => {
   const labelId = `${useId.useId('contained-list')}-header`;
   const prefix = usePrefix.usePrefix();
   const classes = cx__default["default"](`${prefix}--contained-list`, {

package/lib/components/ContainedList/ContainedListItem/ContainedListItem.js

@@ -22,16 +22,15 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const ContainedListItem = _ref => {
-  let {
-    action,
-    children,
-    className,
-    disabled = false,
-    onClick,
-    renderIcon: IconElement,
-    ...rest
-  } = _ref;
+const ContainedListItem = ({
+  action,
+  children,
+  className,
+  disabled = false,
+  onClick,
+  renderIcon: IconElement,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const isClickable = onClick !== undefined;
   const classes = cx__default["default"](`${prefix}--contained-list-item`, className, {

package/lib/components/ContentSwitcher/ContentSwitcher.d.ts

@@ -1,11 +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 PropTypes from 'prop-types';
-import React, { HTMLAttributes, ReactElement } from 'react';
+import { type HTMLAttributes, type ReactElement } from 'react';
 export interface SwitchEventHandlersParams {
     index?: number;
     name?: string | number;
@@ -28,6 +28,10 @@ export interface ContentSwitcherProps extends Omit<HTMLAttributes<HTMLElement>,
      *     been deprecated in favor of the new `Layer` component. It will be removed in the next major release.
      */
     light?: boolean;
+    /**
+     * `true` to use the low contrast version.
+     */
+    lowContrast?: boolean;
     /**
      * Specify an `onChange` handler that is called whenever the ContentSwitcher
      * changes which item is selected
@@ -42,24 +46,14 @@ export interface ContentSwitcherProps extends Omit<HTMLAttributes<HTMLElement>,
      */
     selectionMode?: '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: 'sm' | 'md' | 'lg';
 }
-export interface ContentSwitcherState {
-    selectedIndex?: number;
-}
-export default class ContentSwitcher extends React.Component<ContentSwitcherProps, ContentSwitcherState> {
-    /**
-     * The DOM references of child `<Switch>`.
-     * @type {Array<Element>}
-     * @private
-     */
-    _switchRefs: HTMLButtonElement[];
-    state: {
-        selectedIndex: undefined;
-    };
-    static propTypes: {
+export declare const ContentSwitcher: {
+    ({ children, className, light, lowContrast, selectedIndex: selectedIndexProp, selectionMode, size, onChange, ...other }: ContentSwitcherProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
         /**
          * Pass in Switch components to be rendered in the ContentSwitcher
          */
@@ -72,6 +66,10 @@ export default class ContentSwitcher extends React.Component<ContentSwitcherProp
          * `true` to use the light variant.
          */
         light: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * `true` to use the low contrast version.
+         */
+        lowContrast: PropTypes.Requireable<boolean>;
         /**
          * Specify an `onChange` handler that is called whenever the ContentSwitcher
          * changes which item is selected
@@ -86,18 +84,8 @@ export default class ContentSwitcher extends React.Component<ContentSwitcherProp
          */
         selectionMode: PropTypes.Requireable<string>;
         /**
-         * 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.Requireable<string>;
     };
-    static contextType: React.Context<string>;
-    static getDerivedStateFromProps({ selectedIndex }: {
-        selectedIndex?: number | undefined;
-    }, state: any): {
-        selectedIndex: number;
-        prevSelectedIndex: number;
-    } | null;
-    handleItemRef: (index: any) => (ref: any) => void;
-    handleChildChange: (data: any) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+};

package/lib/components/ContentSwitcher/ContentSwitcher.js

@@ -28,129 +28,100 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-class ContentSwitcher extends React__default["default"].Component {
-  constructor() {
-    super(...arguments);
-    /**
-     * The DOM references of child `<Switch>`.
-     * @type {Array<Element>}
-     * @private
-     */
-    _rollupPluginBabelHelpers.defineProperty(this, "_switchRefs", []);
-    _rollupPluginBabelHelpers.defineProperty(this, "state", {
-      selectedIndex: undefined
-    });
-    _rollupPluginBabelHelpers.defineProperty(this, "handleItemRef", index => ref => {
-      this._switchRefs[index] = ref;
-    });
-    _rollupPluginBabelHelpers.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 (match.matches(data, [keys.ArrowRight, keys.ArrowLeft])) {
-        const nextIndex = navigation.getNextIndex(key, index, this.props.children?.length);
-        const children = React__default["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.noopFn,
+  ...other
+}) => {
+  const prefix = React.useContext(usePrefix.PrefixContext);
+  const [selectedIndex, setSelectedIndex] = React.useState(selectedIndexProp);
+  const prevSelectedIndexRef = React.useRef(selectedIndexProp);
+  const switchRefs = React.useRef([]);
+  const childrenArray = React.Children.toArray(children);
+  React.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) && match.matches(event, [keys.ArrowRight, keys.ArrowLeft])) {
+      const nextIndex = navigation.getNextIndex(event.key, index, childrenArray.length);
+      if (typeof nextIndex !== 'number') return;
+      focusSwitch(nextIndex);
+      if (selectionMode !== 'manual') {
+        const child = childrenArray[nextIndex];
+        setSelectedIndex(nextIndex);
+        if (/*#__PURE__*/React.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.noopFn,
-      ...other
-    } = this.props;
-    const isIconOnly = React__default["default"].Children?.map(children, child => {
-      return child.type.displayName === 'IconSwitch';
-    })?.every(val => val === true);
-    const classes = cx__default["default"](`${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["default"].createElement(index.LayoutConstraint, _rollupPluginBabelHelpers["extends"]({
-      size: {
-        default: 'md',
-        min: 'sm',
-        max: 'lg'
       }
-    }, other, {
-      className: classes,
-      role: "tablist",
-      onChange: undefined
-    }), children && React__default["default"].Children.toArray(children).map((child, index) => /*#__PURE__*/React__default["default"].cloneElement(child, {
-      index,
-      onClick: events.composeEventHandlers([this.handleChildChange, child.props.onClick]),
-      onKeyDown: this.handleChildChange,
-      selected: index === this.state.selectedIndex,
-      ref: this.handleItemRef(index),
-      size
-    })));
-  }
-}
-_rollupPluginBabelHelpers.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__default["default"](`${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__default["default"].createElement(index.LayoutConstraint, _rollupPluginBabelHelpers["extends"]({
+    size: {
+      default: 'md',
+      min: 'sm',
+      max: 'lg'
+    }
+  }, other, {
+    className: classes,
+    role: "tablist",
+    onChange: undefined
+  }), children && React.Children.map(children, (child, index) => /*#__PURE__*/React.cloneElement(child, {
+    index,
+    onClick: events.composeEventHandlers([handleChildChange, child.props.onClick]),
+    onKeyDown: events.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
    */
@@ -163,6 +134,10 @@ _rollupPluginBabelHelpers.defineProperty(ContentSwitcher, "propTypes", {
    * `true` to use the light variant.
    */
   light: deprecate["default"](PropTypes__default["default"].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__default["default"].bool,
   /**
    * Specify an `onChange` handler that is called whenever the ContentSwitcher
    * changes which item is selected
@@ -177,10 +152,9 @@ _rollupPluginBabelHelpers.defineProperty(ContentSwitcher, "propTypes", {
    */
   selectionMode: PropTypes__default["default"].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__default["default"].oneOf(['sm', 'md', 'lg'])
-});
-_rollupPluginBabelHelpers.defineProperty(ContentSwitcher, "contextType", usePrefix.PrefixContext);
+};
 
-exports["default"] = ContentSwitcher;
+exports.ContentSwitcher = ContentSwitcher;

package/lib/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/lib/components/ContextMenu/useContextMenu.js

@@ -15,8 +15,7 @@ var React = require('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] = React.useState(false);
   const [position, setPosition] = React.useState([0, 0]);
   function openContextMenu(e) {