@playbooks/ui/dist/menus.es.js

An interface library for Playbooks.

import { jsx, jsxs } from "react/jsx-runtime";
import { useRef, useState } from "react";
import { createPortal } from "react-dom";
import { F as Fade } from "./fade.es-DSuuKNg3.js";
import "./wrappers.es-CZI3goQs.js";
import { u as useKeyDown } from "./keyboard.es-jSLAvGP_.js";
import { u as useMouseDown } from "./mouse.es-BEa5xpF1.js";
import { AccentBtn } from "./buttons.es.js";
import { useUI } from "./context.es.js";
import { H6, P } from "./fonts.es.js";
import { Div, Ul, Li } from "./html.es.js";
import { AccentLink } from "./links.es.js";
const Menu = ({
  ref,
  name = "Menu",
  open,
  onClose,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.menu();
  const computed = { ...base, ...props, tailwind, className, name };
  const menuRef = useRef(null);
  useKeyDown(onKeyDown, [open]);
  useMouseDown(onMouseDown, [open]);
  function onKeyDown(e) {
    if (!open) return;
    if (e.target.dataset.name === "FormInput") return;
    if (e.keyCode === 27) onClose();
  }
  function onMouseDown(e) {
    if (!open) return;
    if (ref?.current?.contains(e.target)) return;
    if (menuRef?.current?.contains(e.target)) return;
    onClose();
  }
  return /* @__PURE__ */ jsx(Div, { ref: menuRef, ...computed, children });
};
const MenuWrapper = ({
  name = "MenuWrapper",
  open,
  onClose,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.menuWrapper();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsxs(Div, { ...computed, children: [
    children,
    /* @__PURE__ */ jsx(MenuBackdrop, { open, onClose, tailwind: tailwind?.backdrop })
  ] });
};
const MenuBackdrop = ({
  name = "MenuBackdrop",
  open,
  onClose,
  tailwind,
  className,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.menuBackdrop({ open });
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { onClick: onClose, ...computed });
};
const MenuMenu = ({
  ref,
  name = "MenuMenu",
  open,
  onClose,
  tailwind,
  className,
  children,
  ...props
}) => {
  const [show, setShow] = useState(false);
  const context = useUI();
  const base = context?.theme?.menuMenu({ open: show });
  const computed = { ...base, ...props, tailwind, className, name };
  const onEnter = () => setShow(true);
  const onExit = () => setShow(false);
  if (typeof window === "undefined") return null;
  return createPortal(
    /* @__PURE__ */ jsx(Fade, { ref, show: open, timeout: 200, onEnter, onExit, children: /* @__PURE__ */ jsx(MenuWrapper, { open: show, onClose, tailwind: tailwind?.wrapper, children: /* @__PURE__ */ jsx(Div, { ref, "aria-orientation": "vertical", "aria-labelledby": "menu-button", tabIndex: -1, ...computed, children }) }) }),
    document.body
  );
};
const MenuBlock = ({ name = "MenuBlock", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.menuBlock();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
const MenuTitle = ({ name = "MenuTitle", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.menuTitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(H6, { ...computed, children });
};
const MenuSubtitle = ({
  name = "MenuSubtitle",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.menuSubtitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(P, { ...computed, children });
};
const MenuList = ({ name = "MenuList", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.menuList();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Ul, { ...computed, children });
};
const MenuItem = ({ name = "MenuItem", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.menuItem();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Li, { ...computed, children });
};
const MenuBtn = ({
  name = "MenuBtn",
  active,
  onClick,
  taskRunning,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.menuBtn();
  const computed = { ...base, ...props, tailwind, className, children, name };
  return /* @__PURE__ */ jsx(AccentBtn, { active, taskRunning, onClick, ...computed });
};
const MenuLink = ({
  name = "MenuLink",
  href = "",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.menuLink();
  const computed = { ...base, ...props, tailwind, className, children, name };
  return /* @__PURE__ */ jsx(AccentLink, { href, ...computed });
};
export {
  Menu,
  MenuBackdrop,
  MenuBlock,
  MenuBtn,
  MenuItem,
  MenuLink,
  MenuList,
  MenuMenu,
  MenuSubtitle,
  MenuTitle,
  MenuWrapper
};