/* @oracle/oraclejet-preact: undefined */
import { jsx, jsxs } from 'preact/jsx-runtime';
import { B as ButtonLabelLayout } from './ButtonLabelLayout-e9f8cbc0.js';
import { S as SvgChevronDown } from './ChevronDown-1b2ca616.js';
import { M as Menu } from './Menu-a5bf756f.js';
import './MenuItem-54015ca3.js';
import { useRef, useImperativeHandle } from 'preact/hooks';
import { Fragment } from 'preact';
import { u as useTooltip } from './useTooltip-89ca3f3e.js';
import { m as mergeProps } from './mergeProps-88ea8306.js';
import './logger-c92f309c.js';
import './LayerHost-e6402730.js';
import { forwardRef } from 'preact/compat';
import './TooltipContentStyles.styles.css';
import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css';
import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js';
import './tooltipUtils-768450a7.js';
import './IconStyle.styles.css';
import './SelectMenuGroupContext-b56cf5d4.js';
import './UNSAFE_Separator/themes/SeparatorStyles.css.js';
import './MenuSeparatorStyles.styles.css';
import './UNSAFE_Menu/themes/redwood/MenuSeparatorBaseTheme.styles.css';
import './UNSAFE_Menu/themes/redwood/MenuSeparatorVariants.css.js';
import { u as useMenuAction } from './useMenuAction-1179e27b.js';
import { B as BaseButton } from './BaseButton-61f6baa8.js';

/**
 * A IconMenuButton is a combined action and menu button.
 */
const IconMenuButton = forwardRef(({ children, tooltip, accessibleLabel, variant = 'outlined', isDisabled = false, isMenuOpen = false, isIconOnly = false, onToggleMenu, size = 'md', type: buttonType = 'button', testId, width, icon, 'aria-describedby': ariaDescribedBy }, ref) => {
    const buttonRef = useRef(null);
    useImperativeHandle(ref, () => buttonRef.current, [buttonRef]);
    const { triggerProps, menuProps } = useMenuAction({
        isDisabled: isDisabled,
        onToggleMenu: onToggleMenu,
        isMenuOpen: isMenuOpen,
        anchorRef: buttonRef
    });
    const { tooltipContent, tooltipProps } = useTooltip({
        text: tooltip ? tooltip : accessibleLabel,
        isDisabled: isMenuOpen || isDisabled
    });
    const elementDetails = {
        type: 'button',
        buttonType: buttonType
    };
    const ariaProps = { 'aria-describedby': ariaDescribedBy };
    const rootButton = (jsx(Fragment, { children: jsxs(BaseButton, { ...mergeProps(tooltipProps, triggerProps, ariaProps), styling: isMenuOpen ? ['min', 'active'] : ['min'], elementDetails: elementDetails, isDisabled: isDisabled, variant: variant, width: width, size: size, ref: buttonRef, "aria-label": accessibleLabel ?? tooltip, testId: testId, children: [jsx(ButtonLabelLayout, { display: 'icons', startIcon: icon, endIcon: isIconOnly ? null : jsx(SvgChevronDown, {}), size: size }), tooltipContent] }) }));
    /*TODO: Remove this hardcoded offsetValue so we have dropdown offset only set on one single place.
     Could be done via menu props or having a dropdownMenu component. JET-60595*/
    return isDisabled ? (rootButton) : (jsxs(Fragment, { children: [rootButton, jsx(Menu, { ...menuProps, offsetValue: 4, "aria-label": accessibleLabel ?? tooltip, children: children })] }));
});
IconMenuButton.displayName = 'IconMenuButton';

export { IconMenuButton as I };
//# sourceMappingURL=IconMenuButton-4118bde6.js.map
