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

An interface library for Playbooks.

import { jsx } from "react/jsx-runtime";
import { useState, useRef, useEffect } from "react";
import { c as computePosition, f as flip, s as shift, l as limitShift } from "./floating-ui.dom-CdHlWYu6.js";
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 { Btn, 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 Drop = ({
  ref,
  name = "Drop",
  open,
  onClose,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.drop();
  const computed = { ...base, ...props, tailwind, className, name };
  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;
    onClose();
  }
  return /* @__PURE__ */ jsx(Div, { ref, ...computed, children });
};
const DropToggle = ({
  name = "DropToggle",
  alt,
  variant = "accent",
  nextIcon = "chevron-down",
  onClick,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.dropToggle();
  const computed = { ...base, ...props, tailwind, className, children, name };
  return /* @__PURE__ */ jsx(Btn, { alt, variant, nextIcon, onClick, ...computed });
};
const DropMenu = ({
  ref,
  name = "DropMenu",
  open,
  placement = "bottom-start",
  tailwind,
  className,
  children,
  ...props
}) => {
  const [show, setShow] = useState(false);
  const context = useUI();
  const base = context?.theme?.dropMenu({ open: show });
  const computed = { ...base, ...props, tailwind, className, name };
  const dropRef = useRef(null);
  useEffect(() => {
    if (ref?.current && dropRef?.current) {
      const middleware = [flip(), shift({ limiter: limitShift() })];
      const formattedOptions = { placement, middleware, strategy: "fixed" };
      computePosition(ref?.current, dropRef?.current, formattedOptions).then(({ x, y }) => {
        Object.assign(dropRef?.current.style, { left: `${x}px`, top: `${y}px` });
      });
    }
  }, [ref?.current, dropRef?.current, open]);
  const onEnter = () => setShow(true);
  const onExit = () => setShow(false);
  return /* @__PURE__ */ jsx(Fade, { ref: dropRef, show: open, timeout: 200, onEnter, onExit, children: /* @__PURE__ */ jsx(
    "div",
    {
      ref: dropRef,
      role: "menu",
      "aria-orientation": "vertical",
      "aria-labelledby": "menu-button",
      tabIndex: -1,
      className: "absolute w-auto z-20",
      children: /* @__PURE__ */ jsx(Div, { ref: dropRef, ...computed, children })
    }
  ) });
};
const DropHeader = ({ name = "DropHeader", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.dropHeader();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
const DropTitle = ({ name = "DropTitle", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.dropTitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(H6, { ...computed, children });
};
const DropSubtitle = ({
  name = "DropSubtitle",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.dropSubtitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(P, { ...computed, children });
};
const DropList = ({ name = "DropList", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.dropList();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Ul, { ...computed, children });
};
const DropItem = ({ name = "DropItem", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.dropItem();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Li, { ...computed, children });
};
const DropBtn = ({ name = "DropBtn", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.dropBtn();
  const computed = { ...base, ...props, tailwind, className, children, name };
  return /* @__PURE__ */ jsx(AccentBtn, { ...computed });
};
const DropLink = ({ name = "DropLink", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.dropLink();
  const computed = { ...base, ...props, tailwind, className, children, name };
  return /* @__PURE__ */ jsx(AccentLink, { ...computed });
};
export {
  Drop,
  DropBtn,
  DropHeader,
  DropItem,
  DropLink,
  DropList,
  DropMenu,
  DropSubtitle,
  DropTitle,
  DropToggle
};