DropMenu = ({
  children,
  action_style,
  action_size,
  action_icon,
  action_bgcol,
  action_bordercol,
  action_textcol,
  block,
  label,
  menu_direction,
}) => {
  const {
    selected,
    connectors: { connect, drag },
  } = useNode((node) => ({ selected: node.events.selected }));
  const [showDropdown, setDropdown] = useState(false);
  //const [dropWidth, setDropWidth] = useState(200);
  return (
    <div
      className={`${selected ? "selected-node" : ""} ${block ? "d-block" : ""}`}
      ref={(dom) => connect(drag(dom))}
    >
      <button
        className={`btn ${action_style || "btn-primary"} ${action_size || ""} `}
        style={
          action_style === "btn-custom-color"
            ? {
                backgroundColor: action_bgcol || "#000000",
                borderColor: action_bordercol || "#000000",
                color: action_textcol || "#000000",
              }
            : {}
        }
      >
        <DynamicFontAwesomeIcon icon={action_icon} className="me-1" />

        {label}
        <FontAwesomeIcon
          icon={faCaretDown}
          className="ms-1"
          onClick={() => setDropdown(!showDropdown)}
        />
      </button>
      <div
        className={`dropdown-menu dropmenu-dropdown ${
          showDropdown ? "show" : ""
        } ${menu_direction === "end" ? "dropdown-menu-end" : ""}`}
      >
        <div className="canvas d-flex flex-column">{children}</div>
      </div>
    </div>
  );
}
@param {object} props
@param {boolean} props.has_dropdown
@param {string} props.children
@param {boolean} props.show_badges
@returns {div}
@namespace
@category saltcorn-builder
@subcategory components