@hitachivantara/uikit-react-core/dist/MultiButton/MultiButton.js

UI Kit Core React components.

import { useClasses } from "./MultiButton.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { Children, cloneElement, isValidElement, useMemo } from "react";
import { jsx } from "react/jsx-runtime";
//#region src/MultiButton/MultiButton.tsx
/**
* Multi-buttons are grouped sets of buttons displayed horizontally or vertically in the same container.
*/
var HvMultiButton = (props) => {
	const { className, children, classes: classesProp, disabled = false, vertical = false, variant = "secondarySubtle", size, split, ...others } = useDefaultProps("HvMultiButton", props);
	const { classes, cx } = useClasses(classesProp);
	const buttons = useMemo(() => {
		const btns = [];
		Children.forEach(children, (child) => {
			if (child && isValidElement(child)) btns.push(child);
		});
		return btns;
	}, [children]);
	return /* @__PURE__ */ jsx("div", {
		className: cx(classes.root, {
			[classes.multiple]: !split,
			[classes.vertical]: !split && vertical,
			[classes.splitGroup]: split,
			[classes.splitGroupDisabled]: split && disabled
		}, className),
		...others,
		children: buttons.map((child, index) => {
			return cloneElement(child, {
				key: index,
				variant,
				disabled: disabled || child.props.disabled,
				size,
				className: cx(classes.button, child.props.className, {
					[classes.firstButton]: index === 0,
					[classes.lastButton]: index === buttons.length - 1,
					[classes.selected]: child.props.selected
				})
			});
		})
	});
};
//#endregion
export { HvMultiButton };