@helpwave/hightide/dist/components/user-input/Menu.js

helpwave's component and theming library

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/user-input/Menu.tsx
var Menu_exports = {};
__export(Menu_exports, {
  Menu: () => Menu,
  MenuItem: () => MenuItem
});
module.exports = __toCommonJS(Menu_exports);
var import_react3 = require("react");
var import_clsx = __toESM(require("clsx"));

// src/hooks/useOutsideClick.ts
var import_react = require("react");
var useOutsideClick = (refs, handler) => {
  (0, import_react.useEffect)(() => {
    const listener = (event) => {
      if (event.target === null) return;
      if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
        return;
      }
      handler();
    };
    document.addEventListener("mousedown", listener);
    document.addEventListener("touchstart", listener);
    return () => {
      document.removeEventListener("mousedown", listener);
      document.removeEventListener("touchstart", listener);
    };
  }, [refs, handler]);
};

// src/hooks/useHoverState.ts
var import_react2 = require("react");
var defaultUseHoverStateProps = {
  closingDelay: 200,
  isDisabled: false
};
var useHoverState = (props = void 0) => {
  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
  const [isHovered, setIsHovered] = (0, import_react2.useState)(false);
  const [timer, setTimer] = (0, import_react2.useState)();
  const onMouseEnter = () => {
    if (isDisabled) {
      return;
    }
    clearTimeout(timer);
    setIsHovered(true);
  };
  const onMouseLeave = () => {
    if (isDisabled) {
      return;
    }
    setTimer(setTimeout(() => {
      setIsHovered(false);
    }, closingDelay));
  };
  (0, import_react2.useEffect)(() => {
    if (timer) {
      return () => {
        clearTimeout(timer);
      };
    }
  });
  (0, import_react2.useEffect)(() => {
    if (timer) {
      clearTimeout(timer);
    }
  }, [isDisabled]);
  return {
    isHovered,
    setIsHovered,
    handlers: { onMouseEnter, onMouseLeave }
  };
};

// src/components/user-input/Menu.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var MenuItem = ({
  children,
  onClick,
  alignment = "left",
  className
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
  "div",
  {
    className: (0, import_clsx.default)("block px-3 py-1 bg-menu-background text-menu-text hover:brightness-90", {
      "text-right": alignment === "right",
      "text-left": alignment === "left"
    }, className),
    onClick,
    children
  }
);
var Menu = ({
  trigger,
  children,
  alignment = "tl",
  showOnHover = false,
  menuClassName = ""
}) => {
  const { isHovered: isOpen, setIsHovered: setIsOpen, handlers } = useHoverState({ isDisabled: !showOnHover });
  const triggerRef = (0, import_react3.useRef)(null);
  const menuRef = (0, import_react3.useRef)(null);
  useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    "div",
    {
      className: "relative",
      ...handlers,
      children: [
        trigger(() => setIsOpen(!isOpen), triggerRef),
        isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          "div",
          {
            ref: menuRef,
            onClick: (e) => e.stopPropagation(),
            className: (0, import_clsx.default)("absolute top-full mt-1 py-2 w-60 rounded-lg bg-menu-background text-menu-text ring-1 ring-slate-900/5 text-sm leading-6 font-semibold shadow-md z-[1]", {
              "    top-[8px]": alignment[0] === "t",
              " bottom-[8px]": alignment[0] === "b",
              "  left-[-8px]": alignment[1] === "l",
              " right-[-8px]": alignment[1] === "r"
            }, menuClassName),
            children
          }
        ) : null
      ]
    }
  );
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Menu,
  MenuItem
});
//# sourceMappingURL=Menu.js.map