import {
  Button
} from "./chunk-FD3JTY5L.js";

// src/components/DropdownMenu/DropdownMenu.tsx
import { Children, isValidElement, cloneElement, useState } from "react";
import useDropdownMenu from "react-accessible-dropdown-menu-hook";
import classNames from "classnames/dedupe";
import "@simplybusiness/mobius/src/components/DropdownMenu/DropdownMenu.css";
import { jsx, jsxs } from "react/jsx-runtime";
var DropdownMenu = ({ ref, ...props }) => {
  const {
    elementType: Element = "nav",
    trigger,
    label = "Menu",
    children,
    ...otherProps
  } = props;
  const [activeId, setActiveId] = useState(null);
  const numberOfItems = Children.count(children);
  const {
    buttonProps,
    itemProps,
    isOpen: open,
    setIsOpen
  } = useDropdownMenu(numberOfItems);
  const classes = classNames(
    "mobius",
    "mobius-dropdown-menu",
    otherProps.className
  );
  const triggerClasses = classNames("mobius", "mobius-dropdown-menu__trigger");
  const listClasses = classNames("mobius", "mobius-dropdown-menu__list", {
    "--is-open": open
  });
  const handleChildClick = ({ onClick }, index) => {
    setActiveId(index);
    setIsOpen(false);
    if (onClick) {
      onClick();
    }
  };
  return /* @__PURE__ */ jsxs(Element, { ref, ...otherProps, className: classes, children: [
    trigger ? cloneElement(trigger, {
      className: triggerClasses,
      open,
      label,
      ...buttonProps
    }) : /* @__PURE__ */ jsx(Button, { className: triggerClasses, ...buttonProps, children: label }),
    /* @__PURE__ */ jsx("ul", { className: listClasses, role: "menu", children: Children.map(children, (child, index) => {
      if (isValidElement(child)) {
        return cloneElement(child, {
          onClick: () => handleChildClick(child.props, index),
          active: index === activeId,
          ...itemProps[index]
        });
      }
      return child;
    }) })
  ] });
};
DropdownMenu.displayName = "DropdownMenu";

export {
  DropdownMenu
};
//# sourceMappingURL=chunk-YGME6T3L.js.map
