@carbon/react 1.58.0 → 1.59.0-rc.0

package/es/components/Tag/Tag.d.ts

@@ -4,7 +4,6 @@
  * 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, { ReactNode } from 'react';
 import { PolymorphicProps } from '../../types/common';
 export declare const TYPES: {
@@ -40,7 +39,7 @@ export interface TagBaseProps {
      */
     disabled?: boolean;
     /**
-     * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
+     * @deprecated The `filter` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.
      */
     filter?: boolean;
     /**
@@ -48,7 +47,7 @@ export interface TagBaseProps {
      */
     id?: string;
     /**
-     * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
+     * @deprecated The `onClose` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.
      */
     onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
@@ -66,7 +65,7 @@ export interface TagBaseProps {
      */
     slug?: ReactNode;
     /**
-     * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
+     * @deprecated The `title` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.
      */
     title?: string;
     /**
@@ -75,61 +74,6 @@ export interface TagBaseProps {
     type?: keyof typeof TYPES;
 }
 export type TagProps<T extends React.ElementType> = PolymorphicProps<T, TagBaseProps>;
-declare const Tag: {
-    <T extends React.ElementType<any>>({ children, className, id, type, filter, renderIcon: CustomIconElement, title, disabled, onClose, size, as: BaseComponent, slug, ...other }: TagProps<T>): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        /**
-         * Provide an alternative tag or component to use instead of the default
-         * wrapping element
-         */
-        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        /**
-         * Provide content to be rendered inside of a `Tag`
-         */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Provide a custom className that is applied to the containing <span>
-         */
-        className: PropTypes.Requireable<string>;
-        /**
-         * Specify if the `Tag` is disabled
-         */
-        disabled: PropTypes.Requireable<boolean>;
-        /**
-         * Determine if `Tag` is a filter/chip
-         */
-        filter: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
-        /**
-         * Specify the id for the tag.
-         */
-        id: PropTypes.Requireable<string>;
-        /**
-         * Click handler for filter tag close button.
-         */
-        onClose: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
-        /**
-         * Optional prop to render a custom icon.
-         * Can be a React component class
-         */
-        renderIcon: PropTypes.Requireable<object>;
-        /**
-         * Specify the size of the Tag. Currently supports either `sm`,
-         * `md` (default) or `lg` sizes.
-         */
-        size: PropTypes.Requireable<string>;
-        /**
-         * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
-         */
-        slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * Text to show on clear filters
-         */
-        title: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
-        /**
-         * Specify the type of the `Tag`
-         */
-        type: PropTypes.Requireable<string>;
-    };
-};
+declare const Tag: React.ForwardRefExoticComponent<Omit<TagProps<React.ElementType<any>>, "ref"> & React.RefAttributes<HTMLElement | undefined>>;
 export declare const types: string[];
 export default Tag;

package/es/components/Tag/Tag.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useState, useLayoutEffect } from 'react';
+import React__default, { useRef, useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
 import { Close } from '@carbon/icons-react';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
@@ -16,6 +16,8 @@ import '../Text/index.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { DefinitionTooltip } from '../Tooltip/DefinitionTooltip.js';
 import '../Tooltip/Tooltip.js';
+import { isEllipsisActive } from './isEllipsisActive.js';
+import { useMergeRefs } from '@floating-ui/react';
 import { Text } from '../Text/Text.js';
 
 var _Close;
@@ -39,7 +41,7 @@ const SIZES = {
   md: 'md',
   lg: 'lg'
 };
-const Tag = _ref => {
+const Tag = /*#__PURE__*/React__default.forwardRef(function Tag(_ref, forwardRef) {
   let {
     children,
     className,
@@ -59,17 +61,14 @@ const Tag = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix();
+  const tagRef = useRef();
+  const ref = useMergeRefs([forwardRef, tagRef]);
   const tagId = id || `tag-${getInstanceId()}`;
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
-  const isEllipsisActive = element => {
-    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
-    return element.offsetWidth < element.scrollWidth;
-  };
   useLayoutEffect(() => {
-    const elementTagId = document.querySelector(`#${tagId}`);
-    const newElement = elementTagId?.getElementsByClassName(`${prefix}--tag__label`)[0];
-    isEllipsisActive(newElement);
-  }, [prefix, tagId]);
+    const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
+    setIsEllipsisApplied(isEllipsisActive(newElement));
+  }, [prefix, tagRef]);
   const conditions = [`${prefix}--tag--selectable`, `${prefix}--tag--filter`, `${prefix}--tag--operational`];
   const isInteractiveTag = conditions.some(el => className?.includes(el));
   const tagClasses = cx(`${prefix}--tag`, className, {
@@ -122,6 +121,7 @@ const Tag = _ref => {
     [`${prefix}--tag--${type}`]: type && !isInteractiveTag
   });
   return /*#__PURE__*/React__default.createElement(ComponentTag, _extends({
+    ref: ref,
     disabled: disabled,
     className: tagClasses,
     id: tagId
@@ -138,7 +138,7 @@ const Tag = _ref => {
     title: children !== null && children !== undefined ? children : typeText,
     className: labelClasses
   }, children !== null && children !== undefined ? children : typeText), normalizedSlug);
-};
+});
 Tag.propTypes = {
   /**
    * Provide an alternative tag or component to use instead of the default
@@ -160,7 +160,7 @@ Tag.propTypes = {
   /**
    * Determine if `Tag` is a filter/chip
    */
-  filter: deprecate(PropTypes.bool, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
+  filter: deprecate(PropTypes.bool, 'The `filter` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
   /**
    * Specify the id for the tag.
    */
@@ -168,7 +168,7 @@ Tag.propTypes = {
   /**
    * Click handler for filter tag close button.
    */
-  onClose: deprecate(PropTypes.func, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
+  onClose: deprecate(PropTypes.func, 'The `onClose` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
   /**
    * Optional prop to render a custom icon.
    * Can be a React component class
@@ -186,7 +186,7 @@ Tag.propTypes = {
   /**
    * Text to show on clear filters
    */
-  title: deprecate(PropTypes.string, 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
+  title: deprecate(PropTypes.string, 'The `title` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.'),
   /**
    * Specify the type of the `Tag`
    */

package/es/components/Tag/isEllipsisActive.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare const isEllipsisActive: (element: any) => boolean;

package/es/components/Tag/isEllipsisActive.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const isEllipsisActive = element => {
+  if (element) {
+    return element?.offsetWidth < element?.scrollWidth;
+  }
+  return false;
+};
+
+export { isEllipsisActive };

package/es/components/Tooltip/Tooltip.js

@@ -14,6 +14,7 @@ import { useDelayedState } from '../../internal/useDelayedState.js';
 import { useId } from '../../internal/useId.js';
 import { useNoInteractiveChildren } from '../../internal/useNoInteractiveChildren.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape, Enter, Space } from '../../internal/keyboard/keys.js';
 
@@ -74,7 +75,7 @@ function Tooltip(_ref) {
   } else {
     triggerProps['aria-describedby'] = id;
   }
-  function onKeyDown(event) {
+  const onKeyDown = useCallback(event => {
     if (open && match(event, Escape)) {
       event.stopPropagation();
       setOpen(false);
@@ -82,10 +83,24 @@ function Tooltip(_ref) {
     if (open && closeOnActivation && (match(event, Enter) || match(event, Space))) {
       setOpen(false);
     }
-  }
+  }, [closeOnActivation, open, setOpen]);
+  useIsomorphicEffect(() => {
+    if (!open) {
+      return undefined;
+    }
+    function handleKeyDown(event) {
+      if (match(event, Escape)) {
+        onKeyDown(event);
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open, onKeyDown]);
   function onMouseEnter() {
     // Interactive Tags should not support onMouseEnter
-    if (!rest?.onMouseEnter?.()) {
+    if (!rest?.onMouseEnter) {
       setIsPointerIntersecting(true);
       setOpen(true, enterDelayMs);
     }
@@ -133,25 +148,30 @@ function Tooltip(_ref) {
       });
     };
   }, [isDragging, onDragStop]);
-  return /*#__PURE__*/React__default.createElement(Popover, _extends({}, rest, {
-    align: align,
-    className: cx(`${prefix}--tooltip`, customClassName),
-    dropShadow: false,
-    highContrast: true,
-    onKeyDown: onKeyDown,
-    onMouseLeave: onMouseLeave,
-    open: open
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--tooltip-trigger__wrapper`
-  }, child !== undefined ? /*#__PURE__*/React__default.cloneElement(child, {
-    ...triggerProps,
-    ...getChildEventHandlers(child.props)
-  }) : null), /*#__PURE__*/React__default.createElement(PopoverContent, {
-    "aria-hidden": open ? 'false' : 'true',
-    className: `${prefix}--tooltip-content`,
-    id: id,
-    role: "tooltip"
-  }, label || description));
+  return (
+    /*#__PURE__*/
+    // @ts-ignore-error Popover throws a TS error everytime is imported
+    React__default.createElement(Popover, _extends({}, rest, {
+      align: align,
+      className: cx(`${prefix}--tooltip`, customClassName),
+      dropShadow: false,
+      highContrast: true,
+      onKeyDown: onKeyDown,
+      onMouseLeave: onMouseLeave,
+      open: open
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: `${prefix}--tooltip-trigger__wrapper`
+    }, child !== undefined ? /*#__PURE__*/React__default.cloneElement(child, {
+      ...triggerProps,
+      ...getChildEventHandlers(child.props)
+    }) : null), /*#__PURE__*/React__default.createElement(PopoverContent, {
+      "aria-hidden": open ? 'false' : 'true',
+      className: `${prefix}--tooltip-content`,
+      id: id,
+      onMouseEnter: onMouseEnter,
+      role: "tooltip"
+    }, label || description))
+  );
 }
 Tooltip.propTypes = {
   /**

package/es/components/UIShell/Content.d.ts

@@ -29,7 +29,7 @@ declare const Content: {
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
         autoFocus?: boolean | undefined;
-        contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
@@ -43,7 +43,7 @@ declare const Content: {
         style?: React.CSSProperties | undefined;
         tabIndex?: number | undefined;
         title?: string | undefined;
-        translate?: "no" | "yes" | undefined;
+        translate?: "yes" | "no" | undefined;
         radioGroup?: string | undefined;
         role?: React.AriaRole | undefined;
         about?: string | undefined;
@@ -93,7 +93,7 @@ declare const Content: {
         "aria-expanded"?: (boolean | "true" | "false") | undefined;
         "aria-flowto"?: string | undefined;
         "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-        "aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+        "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
         "aria-hidden"?: (boolean | "true" | "false") | undefined;
         "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
         "aria-keyshortcuts"?: string | undefined;

package/es/components/UIShell/SwitcherItem.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { HTMLAttributeAnchorTarget } from 'react';
 interface BaseSwitcherItemProps {
     /**
      * Specify the text content for the link
@@ -43,6 +43,10 @@ interface BaseSwitcherItemProps {
      * Optionally provide an href for the underlying li`
      */
     href?: string;
+    /**
+     * Specify where to open the link.
+     */
+    target?: HTMLAttributeAnchorTarget;
 }
 interface SwitcherItemWithAriaLabel extends BaseSwitcherItemProps {
     'aria-label': string;

package/es/components/UIShell/SwitcherItem.js

@@ -28,6 +28,7 @@ const SwitcherItem = /*#__PURE__*/forwardRef(function SwitcherItem(props, forwar
     handleSwitcherItemFocus,
     onKeyDown = () => {},
     href,
+    target,
     ...rest
   } = props;
   const prefix = usePrefix();
@@ -65,6 +66,7 @@ const SwitcherItem = /*#__PURE__*/forwardRef(function SwitcherItem(props, forwar
       onKeyDown(evt);
     },
     href: href,
+    target: target,
     ref: forwardRef
   }, rest, {
     className: linkClassName,
@@ -105,7 +107,11 @@ SwitcherItem.propTypes = {
   /**
    * Specify the tab index of the Link
    */
-  tabIndex: PropTypes.number
+  tabIndex: PropTypes.number,
+  /**
+   * Specify where to open the link.
+   */
+  target: PropTypes.string
 };
 
 export { SwitcherItem as default };

package/lib/components/Accordion/Accordion.Skeleton.d.ts

@@ -28,8 +28,13 @@ interface AccordionSkeletonProps {
      * `false` to not display the first item opened.
      */
     open?: boolean;
+    /**
+     * Specify if the Accordion should be an ordered list,
+     * default is `false`
+     */
+    ordered?: boolean;
 }
-declare function AccordionSkeleton({ align, className, count, isFlush, open, ...rest }: AccordionSkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare function AccordionSkeleton({ align, className, count, isFlush, open, ordered, ...rest }: AccordionSkeletonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AccordionSkeleton {
     var propTypes: {
         /**

package/lib/components/Accordion/Accordion.Skeleton.js

@@ -31,6 +31,7 @@ function AccordionSkeleton(_ref) {
     count = 4,
     isFlush,
     open = true,
+    ordered = false,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -39,7 +40,8 @@ function AccordionSkeleton(_ref) {
     [`${prefix}--accordion--flush`]: isFlush && align !== 'start'
   });
   const numSkeletonItems = open ? count - 1 : count;
-  return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
+  const ListTag = ordered ? 'ol' : 'ul';
+  return /*#__PURE__*/React__default["default"].createElement(ListTag, _rollupPluginBabelHelpers["extends"]({
     className: classes
   }, rest), open && /*#__PURE__*/React__default["default"].createElement("li", {
     className: `${prefix}--accordion__item ${prefix}--accordion__item--active`

package/lib/components/Accordion/Accordion.d.ts

@@ -27,13 +27,18 @@ export interface AccordionProps {
      * default is `false`, does not work with `align="start"`.
      */
     isFlush?: boolean;
+    /**
+     * Specify if the Accordion should be an ordered list,
+     * default is `false`
+     */
+    ordered?: boolean;
     /**
      * Specify the size of the Accordion. Currently
      * supports the following: `sm`, `md`, `lg`
      */
     size?: 'sm' | 'md' | 'lg';
 }
-declare function Accordion({ align, children, className: customClassName, disabled, isFlush, size, ...rest }: PropsWithChildren<AccordionProps>): import("react/jsx-runtime").JSX.Element;
+declare function Accordion({ align, children, className: customClassName, disabled, isFlush, ordered, size, ...rest }: PropsWithChildren<AccordionProps>): import("react/jsx-runtime").JSX.Element;
 declare namespace Accordion {
     var propTypes: {
         /**
@@ -56,6 +61,11 @@ declare namespace Accordion {
          * Specify whether Accordion text should be flush, default is false, does not work with align="start"
          */
         isFlush: PropTypes.Requireable<boolean>;
+        /**
+         * Specify if the Accordion should be an ordered list,
+         * default is `false`
+         */
+        ordered: PropTypes.Requireable<boolean>;
         /**
          * Specify the size of the Accordion. Currently supports the following:
          */

package/lib/components/Accordion/Accordion.js

@@ -29,6 +29,7 @@ function Accordion(_ref) {
     className: customClassName,
     disabled = false,
     isFlush = false,
+    ordered = false,
     size,
     ...rest
   } = _ref;
@@ -40,9 +41,10 @@ function Accordion(_ref) {
     [`${prefix}--layout--size-${size}`]: size,
     [`${prefix}--accordion--flush`]: isFlush && align !== 'start'
   });
+  const ListTag = ordered ? 'ol' : 'ul';
   return /*#__PURE__*/React__default["default"].createElement(AccordionProvider.AccordionProvider, {
     disabled: disabled
-  }, /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
+  }, /*#__PURE__*/React__default["default"].createElement(ListTag, _rollupPluginBabelHelpers["extends"]({
     className: className
   }, rest), children));
 }
@@ -67,6 +69,11 @@ Accordion.propTypes = {
    * Specify whether Accordion text should be flush, default is false, does not work with align="start"
    */
   isFlush: PropTypes__default["default"].bool,
+  /**
+   * Specify if the Accordion should be an ordered list,
+   * default is `false`
+   */
+  ordered: PropTypes__default["default"].bool,
   /**
    * Specify the size of the Accordion. Currently supports the following:
    */

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -37,6 +37,7 @@ function CheckboxGroup(_ref) {
     warn,
     warnText,
     slug,
+    orientation = 'vertical',
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -49,6 +50,7 @@ function CheckboxGroup(_ref) {
     className: `${prefix}--form__helper-text`
   }, helperText) : null;
   const fieldsetClasses = cx__default["default"](`${prefix}--checkbox-group`, className, {
+    [`${prefix}--checkbox-group--${orientation}`]: orientation === 'horizontal',
     [`${prefix}--checkbox-group--readonly`]: readOnly,
     [`${prefix}--checkbox-group--invalid`]: !readOnly && invalid,
     [`${prefix}--checkbox-group--warning`]: showWarning,
@@ -68,6 +70,7 @@ function CheckboxGroup(_ref) {
     "data-invalid": invalid ? true : undefined,
     "aria-labelledby": rest['aria-labelledby'] || legendId,
     "aria-readonly": readOnly,
+    orientation: "vertical",
     "aria-describedby": !invalid && !warn && helper ? helperId : undefined
   }, rest), /*#__PURE__*/React__default["default"].createElement("legend", {
     className: `${prefix}--label`,
@@ -114,6 +117,10 @@ CheckboxGroup.propTypes = {
    * Provide the text to be rendered inside of the fieldset <legend>
    */
   legendText: PropTypes__default["default"].node.isRequired,
+  /**
+   * Provide the orientation for how the checkbox should be displayed
+   */
+  orientation: PropTypes__default["default"].oneOf(['horizontal', 'vertical']),
   /**
    * Whether the CheckboxGroup should be read-only
    */

package/lib/components/ComboButton/index.d.ts

@@ -8,6 +8,7 @@ import React from 'react';
 import { IconButton } from '../IconButton';
 import Button from '../Button';
 import { Menu } from '../Menu';
+export type MenuAlignment = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
 interface ComboButtonProps {
     /**
      * A collection of `MenuItems` to be rendered as additional actions for this `ComboButton`.
@@ -28,7 +29,7 @@ interface ComboButtonProps {
     /**
      * Experimental property. Specify how the menu should align with the button element
      */
-    menuAlignment?: React.ComponentProps<typeof Menu>['menuAlignment'];
+    menuAlignment?: MenuAlignment;
     /**
      * Provide an optional function to be called when the primary action element is clicked.
      */

package/lib/components/ComboButton/index.js

@@ -21,8 +21,9 @@ var Menu = require('../Menu/Menu.js');
 require('../Menu/MenuItem.js');
 var useAttachedMenu = require('../../internal/useAttachedMenu.js');
 var useId = require('../../internal/useId.js');
-var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var react = require('@floating-ui/react');
+var mergeRefs = require('../../tools/mergeRefs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,7 +32,6 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _ChevronDown;
-const spacing = 0; // top and bottom spacing between the button and the menu. in px
 const defaultTranslations = {
   'carbon.combo-button.additional-actions': 'Additional actions'
 };
@@ -54,23 +54,54 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
   const id = useId.useId('combobutton');
   const prefix = usePrefix.usePrefix();
   const containerRef = React.useRef(null);
-  const menuRef = React.useRef(null);
-  const ref = useMergedRefs.useMergedRefs([forwardRef, containerRef]);
-  const [width, setWidth] = React.useState(0);
+  const middlewares = [react.flip({
+    crossAxis: false
+  })];
+  if (menuAlignment === 'bottom' || menuAlignment === 'top') {
+    middlewares.push(react.size({
+      apply(_ref2) {
+        let {
+          rects,
+          elements
+        } = _ref2;
+        Object.assign(elements.floating.style, {
+          width: `${rects.reference.width}px`
+        });
+      }
+    }));
+  }
+  const {
+    refs,
+    floatingStyles,
+    placement,
+    middlewareData
+  } = react.useFloating({
+    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: middlewares,
+    whileElementsMounted: react.autoUpdate
+  });
+  const ref = mergeRefs["default"](forwardRef, containerRef, refs.setReference);
   const {
     open,
-    x,
-    y,
     handleClick: hookOnClick,
     handleMousedown: handleTriggerMousedown,
     handleClose
   } = useAttachedMenu.useAttachedMenu(containerRef);
+  React.useLayoutEffect(() => {
+    Object.keys(floatingStyles).forEach(style => {
+      if (refs.floating.current) {
+        refs.floating.current.style[style] = floatingStyles[style];
+      }
+    });
+  }, [floatingStyles, refs.floating, middlewareData, placement, open]);
   function handleTriggerClick() {
     if (containerRef.current) {
-      const {
-        width: w
-      } = containerRef.current.getBoundingClientRect();
-      setWidth(w);
       hookOnClick();
     }
   }
@@ -79,15 +110,6 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
       onClick(e);
     }
   }
-  function handleOpen() {
-    if (menuRef.current) {
-      menuRef.current.style.inlineSize = `${width}px`;
-      menuRef.current.style.minInlineSize = `${width}px`;
-      if (menuAlignment !== 'bottom' && menuAlignment !== 'top') {
-        menuRef.current.style.inlineSize = `fit-content`;
-      }
-    }
-  }
   const containerClasses = cx__default["default"](`${prefix}--combo-button__container`, `${prefix}--combo-button__container--${size}`, {
     [`${prefix}--combo-button__container--open`]: open
   }, className);
@@ -106,6 +128,7 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
     disabled: disabled,
     onClick: handlePrimaryActionClick
   }, label)), /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
+    ref: refs.setReference,
     className: triggerClasses,
     label: t('carbon.combo-button.additional-actions'),
     size: size,
@@ -120,16 +143,13 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
     containerRef: containerRef,
     menuAlignment: menuAlignment,
     className: menuClasses,
-    ref: menuRef,
+    ref: refs.setFloating,
     id: id,
     label: t('carbon.combo-button.additional-actions'),
     mode: "basic",
     size: size,
     open: open,
-    onClose: handleClose,
-    onOpen: handleOpen,
-    x: x,
-    y: [y[0] - spacing, y[1] + spacing]
+    onClose: handleClose
   }, children));
 });
 ComboButton.propTypes = {