@itwin/itwinui-react 3.0.0-dev.7 → 3.0.0-dev.9

package/cjs/styles.js

@@ -34,8 +34,9 @@ const styles = {
   'iui-button-dropdown': '_iui3-button-dropdown',
   'iui-button-split': '_iui3-button-split',
   'iui-button-group': '_iui3-button-group',
-  'iui-input-container': '_iui3-input-container',
+  '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',
@@ -178,36 +179,18 @@ const styles = {
   'iui-information-body-content': '_iui3-information-body-content',
   'iui-input-label': '_iui3-input-label',
   'iui-inline': '_iui3-inline',
-  'iui-required': '_iui3-required',
   'iui-input-with-icon': '_iui3-input-with-icon',
   'iui-select-tag-container': '_iui3-select-tag-container',
   'iui-end-icon': '_iui3-end-icon',
-  'iui-actionable': '_iui3-actionable',
   'iui-open': '_iui3-open',
-  'iui-inline-icon': '_iui3-inline-icon',
-  'iui-with-message': '_iui3-with-message',
-  'iui-input-icon': '_iui3-input-icon',
+  'iui-required': '_iui3-required',
   'iui-input-group': '_iui3-input-group',
+  'iui-status-message': '_iui3-status-message',
+  'iui-select-button': '_iui3-select-button',
+  'iui-input-group-wrapper': '_iui3-input-group-wrapper',
   'iui-toggle-switch-wrapper': '_iui3-toggle-switch-wrapper',
   'iui-radio-wrapper': '_iui3-radio-wrapper',
-  'iui-inline-label': '_iui3-inline-label',
-  'iui-label': '_iui3-label',
-  'iui-message': '_iui3-message',
-  'iui-select-button': '_iui3-select-button',
-  'iui-input-flex-container': '_iui3-input-flex-container',
   'iui-keyboard': '_iui3-keyboard',
-  'iui-location-marker': '_iui3-location-marker',
-  'iui-location-marker-default': '_iui3-location-marker-default',
-  'iui-location-marker-default-pin': '_iui3-location-marker-default-pin',
-  'iui-location-marker-default-pin-dot':
-    '_iui3-location-marker-default-pin-dot',
-  'iui-location-marker-data-rich': '_iui3-location-marker-data-rich',
-  'iui-location-marker-data-rich-body': '_iui3-location-marker-data-rich-body',
-  'iui-location-marker-data-rich-icon': '_iui3-location-marker-data-rich-icon',
-  'iui-location-marker-data-rich-icon-monochrome':
-    '_iui3-location-marker-data-rich-icon-monochrome',
-  'iui-location-marker-me': '_iui3-location-marker-me',
-  'iui-location-marker-me-dot': '_iui3-location-marker-me-dot',
   'iui-list': '_iui3-list',
   'iui-menu': '_iui3-menu',
   'iui-header-menu-icon': '_iui3-header-menu-icon',
@@ -236,10 +219,10 @@ const styles = {
   'iui-overlay-exiting': '_iui3-overlay-exiting',
   closeAnimation,
   'iui-progress-indicator-radial': '_iui3-progress-indicator-radial',
-  'iui-u8bwhh6': '_iui3-u8bwhh6',
+  'iui-ugj3ux4': '_iui3-ugj3ux4',
   'iui-progress-indicator-linear-label':
     '_iui3-progress-indicator-linear-label',
-  'iui-u8bwhhv': '_iui3-u8bwhhv',
+  'iui-ugj3uxq': '_iui3-ugj3uxq',
   'iui-radio': '_iui3-radio',
   'iui-radio-tile': '_iui3-radio-tile',
   'iui-radio-tile-icon': '_iui3-radio-tile-icon',
@@ -306,6 +289,7 @@ const styles = {
   'iui-table-body': '_iui3-table-body',
   'iui-table-header-wrapper': '_iui3-table-header-wrapper',
   'iui-slot': '_iui3-slot',
+  'iui-actionable': '_iui3-actionable',
   'iui-table-filter-button': '_iui3-table-filter-button',
   'iui-table-resizer': '_iui3-table-resizer',
   'iui-table-resizer-bar': '_iui3-table-resizer-bar',
@@ -402,6 +386,7 @@ const styles = {
   'iui-placement-bottom-start': '_iui3-placement-bottom-start',
   'iui-placement-bottom-end': '_iui3-placement-bottom-end',
   'iui-status-area': '_iui3-status-area',
+  'iui-message': '_iui3-message',
   'iui-toast-anchor': '_iui3-toast-anchor',
   'iui-informational': '_iui3-informational',
   'iui-label-on-left': '_iui3-label-on-left',
@@ -409,11 +394,8 @@ const styles = {
   'iui-toggle-switch-icon': '_iui3-toggle-switch-icon',
   'iui-toggle-switch': '_iui3-toggle-switch',
   'iui-toggle-switch-label': '_iui3-toggle-switch-label',
-  'iui-tooltip-container': '_iui3-tooltip-container',
   'iui-tooltip': '_iui3-tooltip',
-  'iui-tooltip-visible': '_iui3-tooltip-visible',
   'iui-transfer-list-wrapper': '_iui3-transfer-list-wrapper',
-  'iui-transfer-list-listbox-label': '_iui3-transfer-list-listbox-label',
   'iui-transfer-list-listbox-wrapper': '_iui3-transfer-list-listbox-wrapper',
   'iui-transfer-list-listbox': '_iui3-transfer-list-listbox',
   'iui-transfer-list-toolbar': '_iui3-transfer-list-toolbar',
@@ -435,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

@@ -12,20 +12,26 @@ type AlertOwnProps = {
      */
     isSticky?: boolean;
 };
+type AlertLegacyProps = {
+    /** @deprecated Use `Alert.Action` subcomponent. */
+    clickableText?: React.ReactNode;
+    /** @deprecated Use `Alert.Action` subcomponent. */
+    clickableTextProps?: React.ComponentPropsWithoutRef<'a'>;
+    /** @deprecated Use `Alert.CloseButton` subcomponent. */
+    onClose?: () => void;
+};
 /**
  * A small box to quickly grab user attention and communicate a brief message
  * @example
- * <Alert>
- *  <Alert.Message>This is an alert.</Alert.Message>
- * </Alert>
+ * <Alert>This is an alert.</Alert>
  * @example
- * <Alert type='informational'>
+ * <Alert.Wrapper type='informational'>
  *  <Alert.Icon />
  *  <Alert.Message>This is an informational alert.</Alert.Message>
  *  <Alert.CloseButton onClick={() => {}} />
- * </Alert>
+ * </Alert.Wrapper>
  * @example
- * <Alert type='positive'>
+ * <Alert.Wrapper type='positive'>
  *  <Alert.Icon>
  *    <SvgSmileyHappy />
  *  </Alert.Icon>
@@ -36,17 +42,22 @@ type AlertOwnProps = {
  *  <Alert.CloseButton onClick={() => {}}>
  *    <SvgCollapse />
  *  </Alert.CloseButton>
- * </Alert>
+ * </Alert.Wrapper>
  */
-export declare const Alert: PolymorphicForwardRefComponent<"div", AlertOwnProps> & {
+export declare const Alert: PolymorphicForwardRefComponent<"div", AlertOwnProps & AlertLegacyProps> & {
+    /**
+     *  Alert wrapper subcomponent
+     */
+    Wrapper: PolymorphicForwardRefComponent<"div", AlertOwnProps>;
     /**
      * 	Alert icon subcomponent
      */
     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>> & {
+    }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
         size?: "small" | "large" | "auto" | "medium" | 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"> & {
         as?: "span" | undefined;
     }>;

package/esm/core/Alert/Alert.js

@@ -11,10 +11,47 @@ import {
   StatusIconMap,
   SvgCloseSmall,
   Box,
+  ButtonBase,
 } from '../utils/index.js';
 import { IconButton } from '../Buttons/index.js';
 const AlertContext = React.createContext(undefined);
-const AlertComponent = React.forwardRef((props, ref) => {
+// ----------------------------------------------------------------------------
+// Alert component
+const AlertComponent = React.forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    type = 'informational',
+    isSticky = false,
+    clickableText,
+    clickableTextProps,
+    onClose,
+    ...rest
+  } = props;
+  return React.createElement(
+    Alert.Wrapper,
+    { type: type, isSticky: isSticky, ref: forwardedRef, ...rest },
+    React.createElement(Alert.Icon, null),
+    React.createElement(
+      Alert.Message,
+      null,
+      children,
+      clickableText
+        ? React.createElement(
+            Alert.Action,
+            { ...clickableTextProps },
+            clickableText,
+          )
+        : null,
+    ),
+    onClose
+      ? React.createElement(Alert.CloseButton, { onClick: onClose })
+      : null,
+  );
+});
+AlertComponent.displayName = 'Alert';
+// ----------------------------------------------------------------------------
+// Alert.Wrapper component
+const AlertWrapper = React.forwardRef((props, ref) => {
   const {
     children,
     className,
@@ -34,7 +71,7 @@ const AlertComponent = React.forwardRef((props, ref) => {
     React.createElement(AlertContext.Provider, { value: { type } }, children),
   );
 });
-AlertComponent.displayName = 'Alert';
+AlertWrapper.displayName = 'Alert.Wrapper';
 // ----------------------------------------------------------------------------
 // Alert.Icon component
 const AlertIcon = React.forwardRef((props, ref) => {
@@ -57,7 +94,7 @@ AlertMessage.displayName = 'Alert.Message';
 const AlertAction = React.forwardRef((props, ref) => {
   const { children, className, ...rest } = props;
   return React.createElement(
-    Box,
+    ButtonBase,
     {
       as: !!props.href ? 'a' : 'button',
       className: cx('iui-alert-link', className),
@@ -88,17 +125,15 @@ AlertCloseButton.displayName = 'Alert.CloseButton';
 /**
  * A small box to quickly grab user attention and communicate a brief message
  * @example
- * <Alert>
- *  <Alert.Message>This is an alert.</Alert.Message>
- * </Alert>
+ * <Alert>This is an alert.</Alert>
  * @example
- * <Alert type='informational'>
+ * <Alert.Wrapper type='informational'>
  *  <Alert.Icon />
  *  <Alert.Message>This is an informational alert.</Alert.Message>
  *  <Alert.CloseButton onClick={() => {}} />
- * </Alert>
+ * </Alert.Wrapper>
  * @example
- * <Alert type='positive'>
+ * <Alert.Wrapper type='positive'>
  *  <Alert.Icon>
  *    <SvgSmileyHappy />
  *  </Alert.Icon>
@@ -109,9 +144,13 @@ AlertCloseButton.displayName = 'Alert.CloseButton';
  *  <Alert.CloseButton onClick={() => {}}>
  *    <SvgCollapse />
  *  </Alert.CloseButton>
- * </Alert>
+ * </Alert.Wrapper>
  */
 export const Alert = Object.assign(AlertComponent, {
+  /**
+   *  Alert wrapper subcomponent
+   */
+  Wrapper: AlertWrapper,
   /**
    * 	Alert icon subcomponent
    */

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -5,6 +5,7 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useOverflow, useMergedRefs, Box } from '../utils/index.js';
+import { FloatingDelayGroup } from '@floating-ui/react';
 /**
  * Group buttons together for common actions.
  * Handles responsive overflow when the `overflowButton` prop is specified.
@@ -56,42 +57,46 @@ export const ButtonGroup = React.forwardRef((props, ref) => {
   );
   const refs = useMergedRefs(overflowRef, ref);
   return React.createElement(
-    Box,
-    {
-      className: cx(
-        {
-          'iui-button-group': orientation === 'horizontal',
-          'iui-button-group-vertical': orientation === 'vertical',
-          'iui-button-group-overflow-x':
-            !!overflowButton && orientation === 'horizontal',
-        },
-        className,
-      ),
-      ref: refs,
-      ...rest,
-    },
-    (() => {
-      if (!(visibleCount < items.length)) {
-        return items;
-      }
-      const overflowStart =
-        overflowPlacement === 'start'
-          ? items.length - visibleCount
-          : visibleCount - 1;
-      return React.createElement(
-        React.Fragment,
-        null,
-        overflowButton &&
-          overflowPlacement === 'start' &&
-          React.createElement('div', null, overflowButton(overflowStart)),
-        overflowPlacement === 'start'
-          ? items.slice(overflowStart + 1)
-          : items.slice(0, Math.max(0, overflowStart)),
-        overflowButton &&
-          overflowPlacement === 'end' &&
-          React.createElement('div', null, overflowButton(overflowStart)),
-      );
-    })(),
+    FloatingDelayGroup,
+    { delay: { open: 50, close: 250 } },
+    React.createElement(
+      Box,
+      {
+        className: cx(
+          {
+            'iui-button-group': orientation === 'horizontal',
+            'iui-button-group-vertical': orientation === 'vertical',
+            'iui-button-group-overflow-x':
+              !!overflowButton && orientation === 'horizontal',
+          },
+          className,
+        ),
+        ref: refs,
+        ...rest,
+      },
+      (() => {
+        if (!(visibleCount < items.length)) {
+          return items;
+        }
+        const overflowStart =
+          overflowPlacement === 'start'
+            ? items.length - visibleCount
+            : visibleCount - 1;
+        return React.createElement(
+          React.Fragment,
+          null,
+          overflowButton &&
+            overflowPlacement === 'start' &&
+            React.createElement('div', null, overflowButton(overflowStart)),
+          overflowPlacement === 'start'
+            ? items.slice(overflowStart + 1)
+            : items.slice(0, Math.max(0, overflowStart)),
+          overflowButton &&
+            overflowPlacement === 'end' &&
+            React.createElement('div', null, overflowButton(overflowStart)),
+        );
+      })(),
+    ),
   );
 });
 export default ButtonGroup;

package/esm/core/Buttons/DropdownButton/DropdownButton.js

@@ -6,11 +6,7 @@ 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 { 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/esm/core/Buttons/IconButton/IconButton.js

@@ -4,7 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { VisuallyHidden, Popover, Box, ButtonBase } from '../../utils/index.js';
+import { VisuallyHidden, Box, ButtonBase } from '../../utils/index.js';
+import { Tooltip } from '../../Tooltip/Tooltip.js';
 /**
  * Icon button
  * @example
@@ -23,51 +24,35 @@ export const IconButton = React.forwardRef((props, ref) => {
     iconProps,
     ...rest
   } = props;
-  return React.createElement(
-    IconButtonTooltip,
-    { label: label },
+  const button = React.createElement(
+    ButtonBase,
+    {
+      ref: ref,
+      className: cx('iui-button', className),
+      'data-iui-variant': styleType !== 'default' ? styleType : undefined,
+      'data-iui-size': size,
+      'data-iui-active': isActive,
+      'aria-pressed': isActive,
+      ...rest,
+    },
     React.createElement(
-      ButtonBase,
+      Box,
       {
-        ref: ref,
-        className: cx('iui-button', className),
-        'data-iui-variant': styleType !== 'default' ? styleType : undefined,
-        'data-iui-size': size,
-        'data-iui-active': isActive,
-        'aria-pressed': isActive,
-        ...rest,
+        as: 'span',
+        'aria-hidden': true,
+        ...iconProps,
+        className: cx('iui-button-icon', iconProps?.className),
       },
-      React.createElement(
-        Box,
-        {
-          as: 'span',
-          'aria-hidden': true,
-          ...iconProps,
-          className: cx('iui-button-icon', iconProps?.className),
-        },
-        children,
-      ),
-      label ? React.createElement(VisuallyHidden, null, label) : null,
+      children,
     ),
+    label ? React.createElement(VisuallyHidden, null, label) : null,
   );
-});
-const IconButtonTooltip = (props) => {
-  const { label, children } = props;
   return label
     ? React.createElement(
-        Popover,
-        {
-          interactive: false,
-          offset: [0, 4],
-          aria: { content: null },
-          content: React.createElement(
-            Box,
-            { 'aria-hidden': 'true', className: 'iui-tooltip' },
-            label,
-          ),
-        },
-        children,
+        Tooltip,
+        { content: label, ariaStrategy: 'none' },
+        button,
       )
-    : children;
-};
+    : button;
+});
 export default IconButton;

package/esm/core/Buttons/SplitButton/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 { 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

@@ -6,8 +6,16 @@ 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 { Box, SvgCaretDownSmall, SvgCaretUpSmall } from '../../utils/index.js';
+import {
+  Box,
+  Portal,
+  SvgCaretDownSmall,
+  SvgCaretUpSmall,
+  useId,
+  useMergedRefs,
+  usePopover,
+} from '../../utils/index.js';
+import { Menu } from '../../Menu/Menu.js';
 /**
  * Split button component with a DropdownMenu.
  *
@@ -33,20 +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',
         {
@@ -54,7 +75,6 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
         },
         wrapperProps?.className,
       ),
-      ref: wrapperRef,
     },
     React.createElement(
       Button,
@@ -63,33 +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,
-          ...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;