@carbon/react 1.60.3 → 1.61.0-rc.1

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -28,6 +28,7 @@ var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var Selection = require('../../internal/Selection.js');
+var react = require('@floating-ui/react');
 var match = require('../../internal/keyboard/match.js');
 var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
 var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
@@ -65,6 +66,7 @@ const {
 } = Downshift.useMultipleSelection.stateChangeTypes;
 const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function FilterableMultiSelect(_ref, ref) {
   let {
+    autoAlign = false,
     className: containerClassName,
     clearSelectionDescription = 'Total items selected: ',
     clearSelectionText = 'To clear selection, press Delete or Backspace',
@@ -121,6 +123,42 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     onChange,
     selectedItems: selected
   });
+  const {
+    refs,
+    floatingStyles,
+    middlewareData
+  } = react.useFloating(autoAlign ? {
+    placement: direction,
+    // The floating element is positioned relative to its nearest
+    // containing block (usually the viewport). It will in many cases also
+    // “break” the floating element out of a clipping ancestor.
+    // https://floating-ui.com/docs/misc#clipping
+    strategy: 'fixed',
+    // Middleware order matters, arrow should be last
+    middleware: [react.flip({
+      crossAxis: false
+    }), react.size({
+      apply(_ref2) {
+        let {
+          rects,
+          elements
+        } = _ref2;
+        Object.assign(elements.floating.style, {
+          width: `${rects.reference.width}px`
+        });
+      }
+    })],
+    whileElementsMounted: react.autoUpdate
+  } : {});
+  React.useLayoutEffect(() => {
+    if (autoAlign) {
+      Object.keys(floatingStyles).forEach(style => {
+        if (refs.floating.current) {
+          refs.floating.current.style[style] = floatingStyles[style];
+        }
+      });
+    }
+  }, [autoAlign, floatingStyles, refs.floating, middlewareData, open]);
   const textInput = React.useRef(null);
   const filterableMultiSelectInstanceId = useId.useId();
   const prefix = usePrefix.usePrefix();
@@ -128,6 +166,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     setIsOpen(open);
     setPrevOpen(open);
   }
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const sortedItems = sortItems(filterItems(items, {
     itemToString: itemToString$1,
     inputValue
@@ -467,7 +507,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     isOpen: isOpen,
     size: size
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--list-box__field`
+    className: `${prefix}--list-box__field`,
+    ref: refs.setReference
   }, controlledSelectedItems.length > 0 &&
   /*#__PURE__*/
   // @ts-expect-error: It is expecting a non-required prop called: "onClearSelection"
@@ -508,7 +549,9 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     // @ts-expect-error
     isOpen: isOpen,
     translateWithId: translateWithId
-  }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen ? sortedItems.map((item, index$1) => {
+  }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, _rollupPluginBabelHelpers["extends"]({}, menuProps, {
+    ref: refs.setFloating
+  }), isOpen ? sortedItems.map((item, index$1) => {
     const isChecked = controlledSelectedItems.filter(selected => isEqual__default["default"](selected, item)).length > 0;
     const itemProps = getItemProps({
       item,
@@ -556,6 +599,12 @@ FilterableMultiSelect.propTypes = {
    * Specify a label to be read by screen readers on the container note.
    */
   ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'ariaLabel / aria-label props are no longer required for FilterableMultiSelect'),
+  /**
+   * **Experimental**: Will attempt to automatically align the floating
+   * element to avoid collisions with the viewport and being clipped by
+   * ancestor elements.
+   */
+  autoAlign: PropTypes__default["default"].bool,
   /**
    * Specify the text that should be read for screen readers that describes total items selected
    */

package/lib/components/MultiSelect/MultiSelect.d.ts

@@ -7,50 +7,19 @@
 import { UseSelectProps } from 'downshift';
 import React, { ReactNode } from 'react';
 import { ListBoxSize, ListBoxType } from '../ListBox';
+import { MultiSelectSortingProps } from './MultiSelectPropTypes';
 import { ListBoxProps } from '../ListBox/ListBox';
 import type { InternationalProps } from '../../types/common';
-interface SharedOptions {
-    locale: string;
-}
-interface DownshiftTypedProps<ItemType> {
-    itemToString?(item: ItemType): string;
-}
-interface SortItemsOptions<ItemType> extends SharedOptions, DownshiftTypedProps<ItemType> {
-    compareItems(item1: ItemType, item2: ItemType, options: SharedOptions): number;
-    selectedItems: ItemType[];
-}
-interface MultiSelectSortingProps<ItemType> {
-    /**
-     * Provide a compare function that is used to determine the ordering of
-     * options. See 'sortItems' for more control.
-     */
-    compareItems?(item1: ItemType, item2: ItemType, options: SharedOptions): number;
-    /**
-     * Provide a method that sorts all options in the control. Overriding this
-     * prop means that you also have to handle the sort logic for selected versus
-     * un-selected items. If you just want to control ordering, consider the
-     * `compareItems` prop instead.
-     *
-     * The return value should be a number whose sign indicates the relative order
-     * of the two elements: negative if a is less than b, positive if a is greater
-     * than b, and zero if they are equal.
-     *
-     * sortItems :
-     *   (items: Array<Item>, {
-     *     selectedItems: Array<Item>,
-     *     itemToString: Item => string,
-     *     compareItems: (itemA: string, itemB: string, {
-     *       locale: string
-     *     }) => number,
-     *     locale: string,
-     *   }) => Array<Item>
-     */
-    sortItems?(items: ReadonlyArray<ItemType>, options: SortItemsOptions<ItemType>): ItemType[];
-}
 interface OnChangeData<ItemType> {
     selectedItems: ItemType[] | null;
 }
 export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, InternationalProps<'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection'> {
+    /**
+     * **Experimental**: Will attempt to automatically align the floating
+     * element to avoid collisions with the viewport and being clipped by
+     * ancestor elements.
+     */
+    autoAlign?: boolean;
     className?: string;
     /**
      * Specify the text that should be read for screen readers that describes that all items are deleted

package/lib/components/MultiSelect/MultiSelect.js

@@ -27,6 +27,7 @@ var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var noopFn = require('../../internal/noopFn.js');
+var react = require('@floating-ui/react');
 var match = require('../../internal/keyboard/match.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 var keys = require('../../internal/keyboard/keys.js');
@@ -68,6 +69,7 @@ const defaultItemToString = item => {
 };
 const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
   let {
+    autoAlign = false,
     className: containerClassName,
     id,
     items,
@@ -127,6 +129,42 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     onChange,
     selectedItems: selected
   });
+  const {
+    refs,
+    floatingStyles,
+    middlewareData
+  } = react.useFloating(autoAlign ? {
+    placement: direction,
+    // The floating element is positioned relative to its nearest
+    // containing block (usually the viewport). It will in many cases also
+    // “break” the floating element out of a clipping ancestor.
+    // https://floating-ui.com/docs/misc#clipping
+    strategy: 'fixed',
+    // Middleware order matters, arrow should be last
+    middleware: [react.flip({
+      crossAxis: false
+    }), react.size({
+      apply(_ref2) {
+        let {
+          rects,
+          elements
+        } = _ref2;
+        Object.assign(elements.floating.style, {
+          width: `${rects.reference.width}px`
+        });
+      }
+    })],
+    whileElementsMounted: react.autoUpdate
+  } : {});
+  React.useLayoutEffect(() => {
+    if (autoAlign) {
+      Object.keys(floatingStyles).forEach(style => {
+        if (refs.floating.current) {
+          refs.floating.current.style[style] = floatingStyles[style];
+        }
+      });
+    }
+  }, [autoAlign, floatingStyles, refs.floating, middlewareData, open]);
 
   // Filter out items with an object having undefined values
   const filteredItems = React.useMemo(() => {
@@ -393,7 +431,8 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
   }), showWarning && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
     className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: multiSelectFieldWrapperClasses
+    className: multiSelectFieldWrapperClasses,
+    ref: refs.setReference
   }, selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(index["default"].Selection, {
     readOnly: readOnly,
     clearSelection: !disabled && !readOnly ? clearSelection : noopFn.noopFn,
@@ -416,7 +455,9 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
   }, label), /*#__PURE__*/React__default["default"].createElement(index["default"].MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  })), normalizedSlug), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, getMenuProps(), isOpen &&
+  })), normalizedSlug), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, getMenuProps({
+    ref: refs.setFloating
+  }), isOpen &&
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   sortItems(filteredItems, sortOptions).map((item, index$1) => {
     const isChecked = selectedItems.filter(selected => isEqual__default["default"](selected, item)).length > 0;
@@ -455,6 +496,12 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
 MultiSelect.displayName = 'MultiSelect';
 MultiSelect.propTypes = {
   ...MultiSelectPropTypes.sortingPropTypes,
+  /**
+   * **Experimental**: Will attempt to automatically align the floating
+   * element to avoid collisions with the viewport and being clipped by
+   * ancestor elements.
+   */
+  autoAlign: PropTypes__default["default"].bool,
   /**
    * Provide a custom class name to be added to the outermost node in the
    * component

package/lib/components/MultiSelect/MultiSelectPropTypes.d.ts

@@ -34,29 +34,32 @@ export declare const sortingPropTypes: {
      */
     sortItems: PropTypes.Requireable<(...args: any[]) => any>;
 };
-export interface ItemBase {
-    disabled?: boolean;
+interface DownshiftTypedProps<ItemType> {
+    itemToString?(item: ItemType): string;
 }
-export interface SortingPropTypes<Item extends ItemBase> {
+interface SharedOptions {
+    locale: string;
+}
+export interface SortItemsOptions<ItemType> extends SharedOptions, DownshiftTypedProps<ItemType> {
+    compareItems(item1: ItemType, item2: ItemType, options: SharedOptions): number;
+    selectedItems: ItemType[];
+}
+export interface MultiSelectSortingProps<ItemType> {
     /**
-     * Provide a compare function that is used
-     * to determine the ordering of options.
+     * Provide a compare function that is used to determine the ordering of
+     * options. See 'sortItems' for more control.
      */
-    compareItems(itemA: string, itemB: string, ctx: {
-        locale: string;
-    }): number;
+    compareItems?(item1: ItemType, item2: ItemType, options: SharedOptions): number;
     /**
      * Provide a method that sorts all options in the control. Overriding this
      * prop means that you also have to handle the sort logic for selected versus
      * un-selected items. If you just want to control ordering, consider the
      * `compareItems` prop instead.
+     *
+     * The return value should be a number whose sign indicates the relative order
+     * of the two elements: negative if a is less than b, positive if a is greater
+     * than b, and zero if they are equal.
      */
-    sortItems(items: Item[], state: {
-        selectedItems: Item[];
-        itemToString(item: Item): string;
-        compareItems(itemA: string, itemB: string, ctx: {
-            locale: string;
-        }): number;
-        locale: string;
-    }): Item[];
+    sortItems?(items: ReadonlyArray<ItemType>, options: SortItemsOptions<ItemType>): ItemType[];
 }
+export {};

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -138,7 +138,6 @@ class OverflowMenu extends React__default["default"].Component {
       this.setState({
         click: true
       });
-      evt.stopPropagation();
       if (!this._menuBody || !this._menuBody.contains(evt.target)) {
         this.setState({
           open: !this.state.open

package/lib/components/OverflowMenu/next/index.d.ts

@@ -6,6 +6,10 @@
  */
 import React, { type ComponentType, type FunctionComponent } from 'react';
 interface OverflowMenuProps {
+    /**
+     * **Experimental**: Will attempt to automatically align the floating element to avoid collisions with the viewport and being clipped by ancestor elements.
+     */
+    autoAlign?: boolean;
     /**
      * A collection of MenuItems to be rendered within this OverflowMenu.
      */

package/lib/components/OverflowMenu/next/index.js

@@ -14,9 +14,11 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
+var react = require('@floating-ui/react');
 var index = require('../../IconButton/index.js');
 var Menu = require('../../Menu/Menu.js');
 require('../../Menu/MenuItem.js');
+var mergeRefs = require('../../../tools/mergeRefs.js');
 var useId = require('../../../internal/useId.js');
 var usePrefix = require('../../../internal/usePrefix.js');
 var useAttachedMenu = require('../../../internal/useAttachedMenu.js');
@@ -30,6 +32,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 const defaultSize = 'md';
 const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function OverflowMenu(_ref, forwardRef) {
   let {
+    autoAlign = false,
     children,
     className,
     label = 'Options',
@@ -39,6 +42,26 @@ const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function
     tooltipAlignment,
     ...rest
   } = _ref;
+  const {
+    refs,
+    floatingStyles,
+    placement,
+    middlewareData
+  } = react.useFloating(autoAlign ? {
+    placement: menuAlignment,
+    // The floating element is positioned relative to its nearest
+    // containing block (usually the viewport). It will in many cases also
+    // “break” the floating element out of a clipping ancestor.
+    // https://floating-ui.com/docs/misc#clipping
+    strategy: 'fixed',
+    // Middleware order matters, arrow should be last
+    middleware: [react.flip({
+      fallbackAxisSideDirection: 'start',
+      fallbackPlacements: ['top-start', 'top-end', 'bottom-start', 'bottom-end']
+    })],
+    whileElementsMounted: react.autoUpdate
+  } : {} // When autoAlign is turned off, floating-ui will not be used
+  );
   const id = useId.useId('overflowmenu');
   const prefix = usePrefix.usePrefix();
   const triggerRef = React.useRef(null);
@@ -50,6 +73,15 @@ const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function
     handleMousedown,
     handleClose
   } = useAttachedMenu.useAttachedMenu(triggerRef);
+  React.useEffect(() => {
+    if (autoAlign) {
+      Object.keys(floatingStyles).forEach(style => {
+        if (refs.floating.current) {
+          refs.floating.current.style[style] = floatingStyles[style];
+        }
+      });
+    }
+  }, [floatingStyles, autoAlign, refs.floating, open, placement, middlewareData]);
   function handleTriggerClick() {
     if (triggerRef.current) {
       hookOnClick();
@@ -60,6 +92,7 @@ const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function
   const triggerClasses = cx__default["default"](`${prefix}--overflow-menu`, {
     [`${prefix}--overflow-menu--open`]: open
   }, size !== defaultSize && `${prefix}--overflow-menu--${size}`);
+  const floatingRef = mergeRefs["default"](triggerRef, refs.setReference);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: containerClasses,
     "aria-owns": open ? id : undefined,
@@ -71,17 +104,19 @@ const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function
     className: triggerClasses,
     onClick: handleTriggerClick,
     onMouseDown: handleMousedown,
-    ref: triggerRef,
+    ref: floatingRef,
     label: label,
     align: tooltipAlignment
   }, /*#__PURE__*/React__default["default"].createElement(IconElement, {
     className: `${prefix}--overflow-menu__icon`
   })), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
     containerRef: triggerRef,
+    ref: refs.setFloating,
     menuAlignment: menuAlignment,
     className: menuClasses,
     id: id,
     size: size,
+    legacyAutoalign: !autoAlign,
     open: open,
     onClose: handleClose,
     x: x,
@@ -90,6 +125,10 @@ const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function
   }, children));
 });
 OverflowMenu.propTypes = {
+  /**
+   * **Experimental**: Will attempt to automatically align the floating element to avoid collisions with the viewport and being clipped by ancestor elements.
+   */
+  autoAlign: PropTypes__default["default"].bool,
   /**
    * A collection of MenuItems to be rendered within this OverflowMenu.
    */

package/lib/components/Pagination/Pagination.js

@@ -103,7 +103,7 @@ const Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pa
     [`${prefix}--pagination--${size}`]: size,
     [customClassName]: !!customClassName
   });
-  const totalPages = totalItems ? Math.max(Math.ceil(totalItems / pageSize), 1) : NaN;
+  const totalPages = totalItems ? Math.max(Math.ceil(totalItems / pageSize), 1) : 1;
   const backButtonDisabled = disabled || page === 1;
   const backButtonClasses = cx__default["default"]({
     [`${prefix}--pagination__button`]: true,
@@ -228,7 +228,7 @@ const Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pa
     text: String(sizeObj.text)
   }))), /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--pagination__text ${prefix}--pagination__items-count`
-  }, pagesUnknown || !totalItems ? itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, pagesUnknown || !totalItems ? totalItems === 0 ? itemRangeText(0, 0, 0) : itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--pagination__right`
   }, pagesUnknown ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--pagination__text ${prefix}--pagination__page-text ${prefix}--pagination__unknown-pages-text`

package/lib/components/UIShell/HeaderContainer.d.ts

@@ -6,15 +6,17 @@
  */
 import PropTypes from 'prop-types';
 import React from 'react';
-interface HeaderContainerRenderProps {
+export interface HeaderContainerRenderProps {
     isSideNavExpanded: boolean;
     onClickSideNavExpand: () => void;
 }
-export interface HeaderContainerProps {
+export type HeaderContainerProps<P extends HeaderContainerRenderProps> = {
     isSideNavExpanded?: boolean;
-    render: React.ComponentType<HeaderContainerRenderProps>;
-}
-declare function HeaderContainer({ render: Children, isSideNavExpanded, }: HeaderContainerProps): import("react/jsx-runtime").JSX.Element;
+    render: React.ComponentType<P>;
+} & {
+    [K in keyof Omit<P, keyof HeaderContainerRenderProps>]: P[K];
+};
+declare function HeaderContainer<P extends HeaderContainerRenderProps>({ render: Children, isSideNavExpanded, ...rest }: HeaderContainerProps<P>): import("react/jsx-runtime").JSX.Element;
 declare namespace HeaderContainer {
     var propTypes: {
         /**
@@ -22,10 +24,10 @@ declare namespace HeaderContainer {
          */
         isSideNavExpanded: PropTypes.Requireable<boolean>;
         /**
-         * A function or component that is passed an object parameter with two
-         * properties: `isSideNavExpanded` and `onClickSideNavExpand`. The function or
-         * component can then use those properties to within the components it
-         * returns, such as with the HeaderMenuButton and SideNav components.
+         * A function or a component that is invoked with `isSideNavExpanded` and `onClickSideNavExpand`.
+         * The function or component can then use those properties to within the components it
+         * returns, such as with the HeaderMenuButton and SideNav components. Additional props will also be passed
+         * into this component for convenience.
          */
         render: PropTypes.Validator<NonNullable<PropTypes.ReactComponentLike>>;
     };

package/lib/components/UIShell/HeaderContainer.js

@@ -9,6 +9,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
 var useEvent = require('../../internal/useEvent.js');
@@ -23,7 +24,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 function HeaderContainer(_ref) {
   let {
     render: Children,
-    isSideNavExpanded = false
+    isSideNavExpanded = false,
+    ...rest
   } = _ref;
   //state for expandable sidenav
   const [isSideNavExpandedState, setIsSideNavExpandedState] = React.useState(isSideNavExpanded);
@@ -35,10 +37,10 @@ function HeaderContainer(_ref) {
   const handleHeaderMenuButtonClick = React.useCallback(() => {
     setIsSideNavExpandedState(prevIsSideNavExpanded => !prevIsSideNavExpanded);
   }, [setIsSideNavExpandedState]);
-  return /*#__PURE__*/React__default["default"].createElement(Children, {
+  return /*#__PURE__*/React__default["default"].createElement(Children, _rollupPluginBabelHelpers["extends"]({}, rest, {
     isSideNavExpanded: isSideNavExpandedState,
     onClickSideNavExpand: handleHeaderMenuButtonClick
-  });
+  }));
 }
 HeaderContainer.propTypes = {
   /**
@@ -46,10 +48,10 @@ HeaderContainer.propTypes = {
    */
   isSideNavExpanded: PropTypes__default["default"].bool,
   /**
-   * A function or component that is passed an object parameter with two
-   * properties: `isSideNavExpanded` and `onClickSideNavExpand`. The function or
-   * component can then use those properties to within the components it
-   * returns, such as with the HeaderMenuButton and SideNav components.
+   * A function or a component that is invoked with `isSideNavExpanded` and `onClickSideNavExpand`.
+   * The function or component can then use those properties to within the components it
+   * returns, such as with the HeaderMenuButton and SideNav components. Additional props will also be passed
+   * into this component for convenience.
    */
   render: PropTypes__default["default"].elementType.isRequired
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.60.3",
+  "version": "1.61.0-rc.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -49,10 +49,9 @@
   "dependencies": {
     "@babel/runtime": "^7.18.3",
     "@carbon/feature-flags": "^0.20.0",
-    "@carbon/icons-react": "^11.44.1",
-    "@carbon/layout": "^11.23.1",
-    "@carbon/styles": "^1.60.1",
-    "@figma/code-connect": "^0.1.2",
+    "@carbon/icons-react": "^11.45.0-rc.0",
+    "@carbon/layout": "^11.23.0",
+    "@carbon/styles": "^1.61.0-rc.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -82,7 +81,8 @@
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
     "@carbon/test-utils": "^10.30.0",
-    "@carbon/themes": "^11.37.1",
+    "@carbon/themes": "^11.37.0",
+    "@figma/code-connect": "^1.0.1",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^26.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -142,5 +142,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "7e7aa249813b0a3376f13f403702d8c3e2551952"
+  "gitHead": "216186e1af8595d8d1ec185b97dbdb664eff7e4d"
 }