/* @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 { 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 MenuButton is a combined action and menu button.
 */
const MenuButton = forwardRef(({ children, label, suffix, variant = 'outlined', isDisabled = false, isMenuOpen = false, onToggleMenu, size = 'md', type: buttonType = 'button', width, icon, testId, 'aria-describedby': ariaDescribedBy, onBlur, onFocus, onMouseEnter, onMouseLeave, onTouchEnd, onTouchStart }, ref) => {
    const buttonRef = useRef(null);
    useImperativeHandle(ref, () => buttonRef.current, [buttonRef]);
    const { triggerProps, menuProps } = useMenuAction({
        isDisabled: isDisabled,
        onToggleMenu: onToggleMenu,
        isMenuOpen: isMenuOpen,
        anchorRef: buttonRef
    });
    const elementDetails = {
        type: 'button',
        buttonType: buttonType
    };
    const globalEventProps = {
        onBlur,
        onFocus,
        onMouseEnter,
        onMouseLeave,
        onTouchEnd,
        onTouchStart
    };
    const rootButton = (jsx(BaseButton, { ...mergeProps(triggerProps, globalEventProps), styling: isMenuOpen ? ['min', 'active'] : ['min'], elementDetails: elementDetails, isDisabled: isDisabled, variant: variant, width: width, size: size, ref: buttonRef, testId: testId, "aria-label": suffix ? `${label} ${suffix}` : label, "aria-describedby": ariaDescribedBy, children: jsx(ButtonLabelLayout, { display: 'all', suffix: suffix, startIcon: icon, endIcon: jsx(SvgChevronDown, {}), size: size, children: label }) }));
    /*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*/
    /*TODO: Once menu expose a prop to set min width we would need to calculate offset width of button
      so we set the correct min width since dropdown menus are 200px but if triggered element width is
      bigger should be that size. JET-60745 */
    return isDisabled ? (rootButton) : (jsxs(Fragment, { children: [rootButton, jsx(Menu, { ...menuProps, "aria-label": label, offsetValue: 4, children: children })] }));
});
MenuButton.displayName = 'MenuButton';

export { MenuButton as M };
//# sourceMappingURL=MenuButton-e012a909.js.map
