@itwin/itwinui-react 3.0.0-dev.8 → 3.0.0

package/cjs/{core/Badge/index.js → react-table/react-table.js}

@@ -1,15 +1,10 @@
 'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-exports.Badge = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var Badge_js_1 = require('./Badge.js');
-Object.defineProperty(exports, 'Badge', {
-  enumerable: true,
-  get: function () {
-    return Badge_js_1.Badge;
-  },
-});
-exports.default = './Badge';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-empty-interface */
+/* eslint-disable @typescript-eslint/ban-types */
+Object.defineProperty(exports, '__esModule', { value: true });

package/cjs/styles.js

@@ -23,8 +23,6 @@ const styles = {
   'iui-backdrop-fixed': '_iui3-backdrop-fixed',
   'iui-badge': '_iui3-badge',
   'iui-blockquote': '_iui3-blockquote',
-  'iui-surface-body': '_iui3-surface-body',
-  'iui-surface-header': '_iui3-surface-header',
   'iui-breadcrumbs': '_iui3-breadcrumbs',
   'iui-breadcrumbs-list': '_iui3-breadcrumbs-list',
   'iui-breadcrumbs-item': '_iui3-breadcrumbs-item',
@@ -36,9 +34,7 @@ const styles = {
   'iui-button-group': '_iui3-button-group',
   'iui-input-flex-container': '_iui3-input-flex-container',
   'iui-input': '_iui3-input',
-  'iui-input-grid': '_iui3-input-grid',
   'iui-disabled': '_iui3-disabled',
-  'iui-button-group-vertical': '_iui3-button-group-vertical',
   'iui-button-group-overflow-x': '_iui3-button-group-overflow-x',
   'iui-carousel': '_iui3-carousel',
   'iui-carousel-slider': '_iui3-carousel-slider',
@@ -76,9 +72,7 @@ const styles = {
   'iui-color-selection-wrapper': '_iui3-color-selection-wrapper',
   'iui-color-field': '_iui3-color-field',
   'iui-hue-slider': '_iui3-hue-slider',
-  'iui-slider-container': '_iui3-slider-container',
-  'iui-slider-rail': '_iui3-slider-rail',
-  'iui-slider-thumb': '_iui3-slider-thumb',
+  'iui-slider': '_iui3-slider',
   'iui-opacity-slider': '_iui3-opacity-slider',
   'iui-color-dot': '_iui3-color-dot',
   'iui-date-picker': '_iui3-date-picker',
@@ -183,6 +177,7 @@ const styles = {
   'iui-select-tag-container': '_iui3-select-tag-container',
   'iui-end-icon': '_iui3-end-icon',
   'iui-open': '_iui3-open',
+  'iui-input-grid': '_iui3-input-grid',
   'iui-required': '_iui3-required',
   'iui-input-group': '_iui3-input-group',
   'iui-status-message': '_iui3-status-message',
@@ -194,7 +189,6 @@ const styles = {
   'iui-list': '_iui3-list',
   'iui-menu': '_iui3-menu',
   'iui-header-menu-icon': '_iui3-header-menu-icon',
-  'iui-scroll': '_iui3-scroll',
   'iui-list-item': '_iui3-list-item',
   'iui-menu-item-skeleton': '_iui3-menu-item-skeleton',
   'iui-menu-item': '_iui3-menu-item',
@@ -219,10 +213,10 @@ const styles = {
   'iui-overlay-exiting': '_iui3-overlay-exiting',
   closeAnimation,
   'iui-progress-indicator-radial': '_iui3-progress-indicator-radial',
-  'iui-ubn95wp': '_iui3-ubn95wp',
+  'iui-ufaqdr0': '_iui3-ufaqdr0',
   'iui-progress-indicator-linear-label':
     '_iui3-progress-indicator-linear-label',
-  'iui-ubn95xj': '_iui3-ubn95xj',
+  'iui-ufaqdry': '_iui3-ufaqdry',
   'iui-radio': '_iui3-radio',
   'iui-radio-tile': '_iui3-radio-tile',
   'iui-radio-tile-icon': '_iui3-radio-tile-icon',
@@ -234,6 +228,7 @@ const styles = {
   'iui-expandable-searchbox': '_iui3-expandable-searchbox',
   'iui-searchbox-open-button': '_iui3-searchbox-open-button',
   'iui-search-icon': '_iui3-search-icon',
+  'iui-search-input': '_iui3-search-input',
   'iui-placeholder': '_iui3-placeholder',
   'iui-select-tag': '_iui3-select-tag',
   'iui-select-tag-label': '_iui3-select-tag-label',
@@ -261,15 +256,14 @@ const styles = {
     '_iui3-side-navigation-submenu-header-actions',
   'iui-side-navigation-wrapper': '_iui3-side-navigation-wrapper',
   'iui-skip-to-content-link': '_iui3-skip-to-content-link',
-  'iui-slider-component-container': '_iui3-slider-component-container',
-  'iui-slider-track': '_iui3-slider-track',
+  'iui-slider-container': '_iui3-slider-container',
   'iui-slider-min': '_iui3-slider-min',
   'iui-slider-max': '_iui3-slider-max',
+  'iui-slider-ticks': '_iui3-slider-ticks',
   'iui-slider-tick': '_iui3-slider-tick',
+  'iui-slider-track': '_iui3-slider-track',
+  'iui-slider-thumb': '_iui3-slider-thumb',
   'iui-grabbing': '_iui3-grabbing',
-  'iui-slider-ticks': '_iui3-slider-ticks',
-  'iui-slider-horizontal': '_iui3-slider-horizontal',
-  'iui-slider-vertical': '_iui3-slider-vertical',
   'iui-stepper': '_iui3-stepper',
   'iui-stepper-step': '_iui3-stepper-step',
   'iui-current': '_iui3-current',
@@ -280,6 +274,9 @@ const styles = {
   'iui-stepper-steps-label': '_iui3-stepper-steps-label',
   'iui-stepper-steps-label-count': '_iui3-stepper-steps-label-count',
   'iui-surface': '_iui3-surface',
+  'iui-surface-body': '_iui3-surface-body',
+  'iui-surface-header': '_iui3-surface-header',
+  'iui-popover-surface': '_iui3-popover-surface',
   'iui-table': '_iui3-table',
   'iui-table-cell-end-icon': '_iui3-table-cell-end-icon',
   'iui-table-cell-start-icon': '_iui3-table-cell-start-icon',
@@ -327,9 +324,11 @@ const styles = {
   'iui-tabs-wrapper': '_iui3-tabs-wrapper',
   'iui-horizontal': '_iui3-horizontal',
   'iui-tabs': '_iui3-tabs',
+  'scroll-shadow-inset-horizontal': '_iui3-scroll-shadow-inset-horizontal',
   'iui-borderless': '_iui3-borderless',
   'iui-tab': '_iui3-tab',
   'iui-vertical': '_iui3-vertical',
+  'scroll-shadow-inset-vertical': '_iui3-scroll-shadow-inset-vertical',
   'iui-tabs-content': '_iui3-tabs-content',
   'iui-tabs-actions-wrapper': '_iui3-tabs-actions-wrapper',
   'iui-default': '_iui3-default',
@@ -346,6 +345,7 @@ const styles = {
   'iui-tag-button': '_iui3-tag-button',
   'iui-tag-container': '_iui3-tag-container',
   'iui-truncate': '_iui3-truncate',
+  'iui-scroll': '_iui3-scroll',
   'iui-text-headline': '_iui3-text-headline',
   'iui-text-title': '_iui3-text-title',
   'iui-text-subheading': '_iui3-text-subheading',
@@ -417,9 +417,6 @@ const styles = {
   'iui-svg-icon': '_iui3-svg-icon',
   'iui-notification-marker': '_iui3-notification-marker',
   pulse,
-  'iui-popover': '_iui3-popover',
-  'tippy-box': '_iui3-tippy-box',
-  'tippy-content': '_iui3-tippy-content',
   'iui-divider': '_iui3-divider',
   'iui-flex': '_iui3-flex',
   'iui-flex-spacer': '_iui3-flex-spacer',

package/esm/core/Alert/Alert.d.ts

@@ -55,7 +55,7 @@ export declare const Alert: PolymorphicForwardRefComponent<"div", AlertOwnProps
     Icon: PolymorphicForwardRefComponent<"span", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
-        size?: "small" | "large" | "auto" | "medium" | import("../utils/types.js").AnyString | undefined;
+        size?: "small" | "auto" | "medium" | "large" | import("../utils/types.js").AnyString | undefined;
         fill?: "default" | "informational" | "negative" | "positive" | "warning" | import("../utils/types.js").AnyString | undefined;
         padded?: boolean | undefined;
     } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {

package/esm/core/Alert/Alert.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import {
-  Icon,
   useSafeContext,
   polymorphic,
   StatusIconMap,
@@ -13,7 +12,8 @@ import {
   Box,
   ButtonBase,
 } from '../utils/index.js';
-import { IconButton } from '../Buttons/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
+import { Icon } from '../Icon/Icon.js';
 const AlertContext = React.createContext(undefined);
 // ----------------------------------------------------------------------------
 // Alert component

package/esm/core/Avatar/Avatar.js

@@ -4,12 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import {
-  Box,
-  VisuallyHidden,
-  SoftBackgrounds,
-  isSoftBackground,
-} from '../utils/index.js';
+import { Box, SoftBackgrounds, isSoftBackground } from '../utils/index.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 /**
  * Helper function that returns one of the preset badge color values.
  */

package/esm/core/Breadcrumbs/Breadcrumbs.js

@@ -9,7 +9,10 @@ import {
   useOverflow,
   SvgChevronRight,
   Box,
+  createWarningLogger,
 } from '../utils/index.js';
+import { Button } from '../Buttons/Button.js';
+const logWarningInDev = createWarningLogger();
 /**
  * A breadcrumb trail is used as a navigational aid to help users keep track
  * of their place in the application. It is often placed before a page's main content.
@@ -105,24 +108,38 @@ const BreadcrumbsComponent = React.forwardRef((props, ref) => {
     ),
   );
 });
+// ----------------------------------------------------------------------------
 const ListItem = ({ item, isActive }) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let children = item;
+  if (
+    children?.type === 'span' ||
+    children?.type === 'a' ||
+    children?.type === Button
+  ) {
+    logWarningInDev(
+      'Directly using Button/a/span as Breadcrumbs children is deprecated, please use `Breadcrumbs.Item` instead.',
+    );
+    children = React.createElement(BreadcrumbsItem, { ...children.props });
+  }
   return React.createElement(
     Box,
     { as: 'li', className: 'iui-breadcrumbs-item' },
-    React.isValidElement(item)
-      ? React.cloneElement(item, {
-          'aria-current':
-            item.props['aria-current'] ?? isActive ? 'location' : undefined,
-        })
-      : item,
+    children &&
+      React.cloneElement(children, {
+        'aria-current':
+          children.props['aria-current'] ?? isActive ? 'location' : undefined,
+      }),
   );
 };
+// ----------------------------------------------------------------------------
 const Separator = ({ separator }) =>
   React.createElement(
     Box,
     { as: 'li', className: 'iui-breadcrumbs-separator', 'aria-hidden': true },
     separator ?? React.createElement(SvgChevronRight, null),
   );
+// ----------------------------------------------------------------------------
 const BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
   const { children: childrenProp, className, ...rest } = props;
   const defaultAs = !!props.href ? 'a' : !!props.onClick ? 'button' : 'span';
@@ -142,6 +159,7 @@ const BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
   );
 });
 BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
+// ----------------------------------------------------------------------------
 export const Breadcrumbs = Object.assign(BreadcrumbsComponent, {
   /**
    * Breadcrumbs item subcomponent

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -44,10 +44,7 @@ export const ButtonGroup = React.forwardRef((props, ref) => {
     ...rest
   } = props;
   const items = React.useMemo(
-    () =>
-      React.Children.map(children, (child) =>
-        !!child ? React.createElement('div', null, child) : undefined,
-      )?.filter(Boolean) ?? [],
+    () => React.Children.toArray(children).filter(Boolean),
     [children],
   );
   const [overflowRef, visibleCount] = useOverflow(
@@ -63,14 +60,15 @@ export const ButtonGroup = React.forwardRef((props, ref) => {
       Box,
       {
         className: cx(
+          'iui-button-group',
           {
-            'iui-button-group': orientation === 'horizontal',
-            'iui-button-group-vertical': orientation === 'vertical',
             'iui-button-group-overflow-x':
               !!overflowButton && orientation === 'horizontal',
           },
           className,
         ),
+        'data-iui-orientation':
+          orientation === 'vertical' ? orientation : undefined,
         ref: refs,
         ...rest,
       },
@@ -87,13 +85,13 @@ export const ButtonGroup = React.forwardRef((props, ref) => {
           null,
           overflowButton &&
             overflowPlacement === 'start' &&
-            React.createElement('div', null, overflowButton(overflowStart)),
+            overflowButton(overflowStart),
           overflowPlacement === 'start'
             ? items.slice(overflowStart + 1)
             : items.slice(0, Math.max(0, overflowStart)),
           overflowButton &&
             overflowPlacement === 'end' &&
-            React.createElement('div', null, overflowButton(overflowStart)),
+            overflowButton(overflowStart),
         );
       })(),
     ),

package/esm/core/Buttons/{Button/Button.d.ts → Button.d.ts}

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ButtonBase } from '../../utils/index.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import { ButtonBase } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export type ButtonProps = {
     /**
      * Modify size of the button.

package/esm/core/Buttons/{Button/Button.js → Button.js}

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Box, ButtonBase } from '../../utils/index.js';
+import { Box, ButtonBase } from '../utils/index.js';
 /**
  * Generic button component
  * @example

package/{cjs/core/Buttons/DropdownButton → esm/core/Buttons}/DropdownButton.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { ButtonProps } from '../Button/Button.js';
-import type { DropdownMenuProps } from '../../DropdownMenu/index.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import type { ButtonProps } from './Button.js';
+import type { DropdownMenuProps } from '../DropdownMenu/DropdownMenu.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export type DropdownButtonProps = {
     /**
      * Items in the dropdown menu.

package/esm/core/Buttons/{DropdownButton/DropdownButton.js → DropdownButton.js}

@@ -4,13 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Button } from '../Button/index.js';
-import { DropdownMenu } from '../../DropdownMenu/index.js';
-import {
-  SvgCaretDownSmall,
-  SvgCaretUpSmall,
-  useMergedRefs,
-} from '../../utils/index.js';
+import { Button } from './Button.js';
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
+import { SvgCaretDownSmall, SvgCaretUpSmall } from '../utils/index.js';
 /**
  * Button that opens a DropdownMenu.
  * @example
@@ -20,7 +16,7 @@ import {
  * ];
  * <DropdownButton menuItems={menuItems}>Default</DropdownButton>
  */
-export const DropdownButton = React.forwardRef((props, ref) => {
+export const DropdownButton = React.forwardRef((props, forwardedRef) => {
   const {
     menuItems,
     className,
@@ -31,28 +27,17 @@ export const DropdownButton = React.forwardRef((props, ref) => {
     ...rest
   } = props;
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-  const [menuWidth, setMenuWidth] = React.useState(0);
-  const buttonRef = React.useRef(null);
-  const refs = useMergedRefs(ref, buttonRef);
-  React.useEffect(() => {
-    if (buttonRef.current) {
-      setMenuWidth(buttonRef.current.offsetWidth);
-    }
-  }, [children, size, styleType]);
   return React.createElement(
     DropdownMenu,
     {
       menuItems: menuItems,
+      matchWidth: true,
+      visible: isMenuOpen,
       ...dropdownMenuProps,
-      onShow: (i) => {
-        setIsMenuOpen(true);
-        dropdownMenuProps?.onShow?.(i);
+      onVisibleChange: (open) => {
+        setIsMenuOpen(open);
+        dropdownMenuProps?.onVisibleChange?.(open);
       },
-      onHide: (i) => {
-        setIsMenuOpen(false);
-        dropdownMenuProps?.onHide?.(i);
-      },
-      style: { minInlineSize: menuWidth, ...dropdownMenuProps?.style },
     },
     React.createElement(
       Button,
@@ -63,8 +48,7 @@ export const DropdownButton = React.forwardRef((props, ref) => {
         endIcon: isMenuOpen
           ? React.createElement(SvgCaretUpSmall, { 'aria-hidden': true })
           : React.createElement(SvgCaretDownSmall, { 'aria-hidden': true }),
-        ref: refs,
-        'aria-label': 'Dropdown',
+        ref: forwardedRef,
         ...rest,
       },
       children,

package/{cjs/core/Buttons/IconButton → esm/core/Buttons}/IconButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { ButtonProps } from '../Button/Button.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import type { ButtonProps } from './Button.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export type IconButtonProps = {
     /**
      * Button gets active style.

package/esm/core/Buttons/{IconButton/IconButton.js → IconButton.js}

@@ -4,8 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { VisuallyHidden, Box, ButtonBase } from '../../utils/index.js';
-import { Tooltip } from '../../Tooltip/Tooltip.js';
+import { Box, ButtonBase } from '../utils/index.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 /**
  * Icon button
  * @example

package/{cjs/core/Buttons/IdeasButton → esm/core/Buttons}/IdeasButton.d.ts

@@ -1,4 +1,4 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 type IdeasButtonProps = {
     /**
      * On click handler.

package/esm/core/Buttons/{IdeasButton/IdeasButton.js → IdeasButton.js}

@@ -3,8 +3,8 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { SvgSmileyHappy } from '../../utils/index.js';
-import { Button } from '../Button/index.js';
+import { SvgSmileyHappy } from '../utils/index.js';
+import { Button } from './Button.js';
 /**
  * Ideas button
  * @example

package/{cjs/core/Buttons/SplitButton → esm/core/Buttons}/SplitButton.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import type { ButtonProps } from '../Button/Button.js';
-import { IconButton } from '../IconButton/index.js';
-import type { Placement } from 'tippy.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import type { ButtonProps } from './Button.js';
+import { IconButton } from './IconButton.js';
+import type { PolymorphicForwardRefComponent, PortalProps } from '../utils/index.js';
+import type { Placement } from '@floating-ui/react';
 export type SplitButtonProps = ButtonProps & {
     /**
      * Items in the dropdown menu.
@@ -26,8 +26,8 @@ export type SplitButtonProps = ButtonProps & {
     /**
      * Passes props to SplitButton menu button.
      */
-    menuButtonProps?: React.ComponentProps<typeof IconButton>;
-};
+    menuButtonProps?: Omit<React.ComponentProps<typeof IconButton>, 'label' | 'size'>;
+} & Pick<PortalProps, 'portal'>;
 /**
  * Split button component with a DropdownMenu.
  *

package/esm/core/Buttons/{SplitButton/SplitButton.js → SplitButton.js}

@@ -4,15 +4,18 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Button } from '../Button/index.js';
-import { IconButton } from '../IconButton/index.js';
-import { DropdownMenu } from '../../DropdownMenu/index.js';
+import { Button } from './Button.js';
+import { IconButton } from './IconButton.js';
 import {
   Box,
+  Portal,
   SvgCaretDownSmall,
   SvgCaretUpSmall,
   useId,
-} from '../../utils/index.js';
+  useMergedRefs,
+} from '../utils/index.js';
+import { Menu } from '../Menu/Menu.js';
+import { usePopover } from '../Popover/Popover.js';
 /**
  * Split button component with a DropdownMenu.
  *
@@ -38,21 +41,33 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
     children,
     wrapperProps,
     menuButtonProps,
+    portal = true,
     ...rest
   } = props;
-  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-  const [menuWidth, setMenuWidth] = React.useState(0);
-  const wrapperRef = React.useRef(null);
-  React.useEffect(() => {
-    if (wrapperRef.current) {
-      setMenuWidth(wrapperRef.current.offsetWidth);
+  const buttonRef = React.useRef(null);
+  const [visible, setVisible] = React.useState(false);
+  const close = React.useCallback(() => {
+    setVisible(false);
+    buttonRef.current?.focus({ preventScroll: true });
+  }, []);
+  const menuContent = React.useMemo(() => {
+    if (typeof menuItems === 'function') {
+      return menuItems(close);
     }
-  }, [children, size]);
+    return menuItems;
+  }, [menuItems, close]);
+  const popover = usePopover({
+    visible,
+    onVisibleChange: (open) => (open ? setVisible(true) : close()),
+    placement: menuPlacement,
+    matchWidth: true,
+  });
   const labelId = useId();
   return React.createElement(
     Box,
     {
       ...wrapperProps,
+      ref: popover.refs.setPositionReference,
       className: cx(
         'iui-button-split',
         {
@@ -60,7 +75,6 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
         },
         wrapperProps?.className,
       ),
-      ref: wrapperRef,
     },
     React.createElement(
       Button,
@@ -69,35 +83,46 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
         styleType: styleType,
         size: size,
         onClick: onClick,
-        ref: forwardedRef,
+        ref: useMergedRefs(buttonRef, forwardedRef),
         ...rest,
         labelProps: { id: labelId, ...props.labelProps },
       },
       children,
     ),
     React.createElement(
-      DropdownMenu,
+      IconButton,
       {
-        placement: menuPlacement,
-        menuItems: menuItems,
-        style: { minInlineSize: menuWidth },
-        onShow: React.useCallback(() => setIsMenuOpen(true), []),
-        onHide: React.useCallback(() => setIsMenuOpen(false), []),
+        styleType: styleType,
+        size: size,
+        disabled: props.disabled,
+        'aria-labelledby': props.labelProps?.id || labelId,
+        'aria-expanded': popover.open,
+        ref: popover.refs.setReference,
+        ...popover.getReferenceProps(menuButtonProps),
       },
+      visible
+        ? React.createElement(SvgCaretUpSmall, null)
+        : React.createElement(SvgCaretDownSmall, null),
+    ),
+    popover.open &&
       React.createElement(
-        IconButton,
-        {
-          styleType: styleType,
-          size: size,
-          disabled: props.disabled,
-          'aria-labelledby': props.labelProps?.id || labelId,
-          ...menuButtonProps,
-        },
-        isMenuOpen
-          ? React.createElement(SvgCaretUpSmall, null)
-          : React.createElement(SvgCaretDownSmall, null),
+        Portal,
+        { portal: portal },
+        React.createElement(
+          Menu,
+          {
+            ...popover.getFloatingProps({
+              onKeyDown: ({ key }) => {
+                if (key === 'Tab') {
+                  close();
+                }
+              },
+            }),
+            ref: popover.refs.setFloating,
+          },
+          menuContent,
+        ),
       ),
-    ),
   );
 });
 export default SplitButton;