@playbooks/ui/dist/drops.cjs

An interface library for Playbooks.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require$$0 = require("react/jsx-runtime");
const React = require("react");
const usePopper = require("./usePopper-C8J9okfs.cjs");
const html = require("./toast-context-kVz4KXNu.cjs");
const index = require("./index-2i4wB-Hv.cjs");
const links = require("./links.cjs");
const Drop = ({
  ref,
  name = "Drop",
  open,
  onClose,
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.drop();
  const computed = { ...base, ...props, tailwind, className, name };
  index.useKeyPress(onKeyDown, [open]);
  index.useMouseUp(onMouseUp, [open]);
  function onKeyDown(e) {
    if (!open) return;
    if (e.target.dataset.name === "FormInput") return;
    if (e.keyCode === 27) onClose();
  }
  function onMouseUp(e) {
    var _a;
    if (!open) return;
    if ((_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.contains(e.target)) return;
    onClose();
  }
  return /* @__PURE__ */ require$$0.jsx(html.Div, { ref, ...computed, children });
};
const DropToggle = ({
  name = "DropToggle",
  alt,
  variant = "accent",
  nextIcon = "chevron-down",
  onClick,
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.dropToggle();
  const computed = { ...base, ...props, tailwind, className, children, name };
  return /* @__PURE__ */ require$$0.jsx(html.Btn, { alt, variant, nextIcon, onClick, ...computed });
};
const DropMenu = ({
  ref,
  name = "DropMenu",
  open,
  placement = "bottom-start",
  options,
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const [show, setShow] = React.useState(false);
  const [dropRef, setDropRef] = React.useState(null);
  const base = theme.dropMenu({ open: show });
  const computed = { ...base, ...props, tailwind, className, name };
  const nodeRef = React.useRef(null);
  const { styles: popperStyles, attributes } = usePopper.usePopper(ref == null ? void 0 : ref.current, dropRef, {
    placement,
    strategy: "fixed",
    ...options
  });
  const onEnter = () => setShow(true);
  const onExit = () => setShow(false);
  return /* @__PURE__ */ require$$0.jsx(html.fadeExports.Fade, { ref: nodeRef, show: open, timeout: 200, onEnter, onExit, children: /* @__PURE__ */ require$$0.jsx(
    "div",
    {
      ref: setDropRef,
      role: "menu",
      "aria-orientation": "vertical",
      "aria-labelledby": "menu-button",
      tabIndex: -1,
      className: "w-auto z-10",
      style: popperStyles.popper,
      ...attributes.popper,
      children: /* @__PURE__ */ require$$0.jsx(html.Div, { ref: nodeRef, ...computed, children })
    }
  ) });
};
const DropHeader = ({ name = "DropHeader", tailwind, className, children, ...props }) => {
  const { theme } = html.useInterface();
  const base = theme.dropHeader();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.Div, { ...computed, children });
};
const DropTitle = ({ name = "DropTitle", tailwind, className, children, ...props }) => {
  const { theme } = html.useInterface();
  const base = theme.dropTitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.H6, { ...computed, children });
};
const DropSubtitle = ({
  name = "DropSubtitle",
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.dropSubtitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.P, { ...computed, children });
};
const DropList = ({ name = "DropList", tailwind, className, children, ...props }) => {
  const { theme } = html.useInterface();
  const base = theme.dropList();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.Ul, { ...computed, children });
};
const DropItem = ({ name = "DropItem", tailwind, className, children, ...props }) => {
  const { theme } = html.useInterface();
  const base = theme.dropItem();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ require$$0.jsx(html.Li, { ...computed, children });
};
const DropBtn = ({ name = "DropBtn", tailwind, className, children, ...props }) => {
  const { theme } = html.useInterface();
  const base = theme.dropBtn();
  const computed = { ...base, ...props, tailwind, className, children, name };
  return /* @__PURE__ */ require$$0.jsx(html.AccentBtn, { ...computed });
};
const DropLink = ({ name = "DropLink", tailwind, className, children, ...props }) => {
  const { theme } = html.useInterface();
  const base = theme.dropLink();
  const computed = { ...base, ...props, tailwind, className, children, name };
  return /* @__PURE__ */ require$$0.jsx(links.AccentLink, { ...computed });
};
exports.Drop = Drop;
exports.DropBtn = DropBtn;
exports.DropHeader = DropHeader;
exports.DropItem = DropItem;
exports.DropLink = DropLink;
exports.DropList = DropList;
exports.DropMenu = DropMenu;
exports.DropSubtitle = DropSubtitle;
exports.DropTitle = DropTitle;
exports.DropToggle = DropToggle;