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

Core React components for the NEXT Design System.

import { jsx } from "react/jsx-runtime";
import { useMemo, Children, isValidElement, cloneElement } from "react";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useClasses } from "./MultiButton.styles.js";
import { staticClasses } from "./MultiButton.styles.js";
const 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[variant]]: variant,
          // TODO - remove in v6
          [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
          })
        });
      })
    }
  );
};
export {
  HvMultiButton,
  staticClasses as multiButtonClasses
};