import useId from "../../UI/widgets/utils/useId.mjs";
import React, { Children, useCallback } from "react";
import { Button, ButtonGroup, ClickAwayListener, Grow, MenuList, Paper, Popper, makeStyles } from "@material-ui/core";
import { bindPopper, bindTrigger, usePopupState } from "material-ui-popup-state/hooks";
import { ArrowDropDown } from "@material-ui/icons";
//#region src/utilities/aggrid/SplitButton.jsx
const useStyles = makeStyles((theme) => ({
	arrowButtonRoot: { padding: 0 },
	menu: { zIndex: theme.zIndex.tooltip },
	paper: {}
}), { name: "SplitButton" });
/**
* https://material-ui.com/components/button-group/#split-button
*/
const SplitButton = (props) => {
	const classes = useStyles(props);
	const { popupName, color, size, variant, label, "aria-label": ariaLabel, children } = props;
	const popupState = usePopupState({
		variant: "popper",
		popupId: useId(popupName)
	});
	const firstItem = Children.toArray(children)[0];
	const setAnchorEl = useCallback((ref) => {
		if (ref) popupState.setAnchorEl(ref);
	}, []);
	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ButtonGroup, {
		variant,
		color,
		size,
		ref: setAnchorEl,
		"aria-label": ariaLabel
	}, /* @__PURE__ */ React.createElement(Button, { onClick: firstItem?.props?.onClick }, label || firstItem?.props?.children), /* @__PURE__ */ React.createElement(Button, {
		...bindTrigger(popupState),
		className: classes.arrowButtonRoot,
		color,
		size: "small",
		"aria-expanded": popupState.isOpen ? true : void 0
	}, /* @__PURE__ */ React.createElement(ArrowDropDown, null))), /* @__PURE__ */ React.createElement(Popper, {
		...bindPopper(popupState),
		role: void 0,
		transition: true,
		disablePortal: true,
		className: classes.menu
	}, ({ TransitionProps, placement }) => /* @__PURE__ */ React.createElement(Grow, {
		...TransitionProps,
		style: { transformOrigin: placement === "bottom" ? "center top" : "center bottom" }
	}, /* @__PURE__ */ React.createElement(Paper, { className: classes.paper }, /* @__PURE__ */ React.createElement(ClickAwayListener, { onClickAway: popupState.close }, /* @__PURE__ */ React.createElement(MenuList, null, children))))));
};
//#endregion
export { SplitButton };

//# sourceMappingURL=SplitButton.mjs.map