import React from "react";
import { RicosContext } from "./../../ricos-context/index.js";
import { FocusManager } from "./../../_shared/focus-manager/focus-manager.js";
import styles from "../statics/styles/audio-scss.js";
const optionElement = (option) => {
  const selected = option?.selected;
  const content = option.icon ? /* @__PURE__ */ React.createElement("span", { className: styles.dropdownContentWithIcon }, option.icon(), option.text) : /* @__PURE__ */ React.createElement("span", { className: styles.dropdownContent }, option.text);
  const onKeyDown = (e) => {
    if (e.key === "Enter") {
      option.onClick();
    }
  };
  return /* @__PURE__ */ React.createElement(
    "button",
    {
      key: option.text,
      className: selected ? styles.dropdownSelectedButton : "",
      onKeyDown,
      onClick: option.onClick,
      "data-hook": option?.dataHook,
      type: "button"
    },
    content
  );
};
const DropdownMenu = ({ options, onClose, dataHook }) => {
  const { jsdomMode } = React.useContext(RicosContext);
  const onKeyDown = (e) => {
    if (e.key === "Escape") {
      onClose();
    }
  };
  return /* @__PURE__ */ React.createElement(FocusManager, { onKeyDown, jsdomMode }, /* @__PURE__ */ React.createElement("div", { className: styles.dropdownMenuWrapper, role: "menu", "data-hook": dataHook }, options.map((option) => optionElement(option))));
};
export {
  DropdownMenu
};
//# sourceMappingURL=dropdown-menu.js.map
