@helpwave/hightide 0.1.46 → 0.1.48

package/dist/components/user-action/Menu.cjs

@@ -1,282 +0,0 @@
-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-action/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"), 1);
-
-// src/utils/bagFunctions.ts
-var resolve = (children, bag) => {
-  if (typeof children === "function") {
-    return children(bag);
-  }
-  return children ?? void 0;
-};
-var BagFunctionUtil = {
-  resolve
-};
-
-// src/components/user-action/Menu.tsx
-var import_react_dom = require("react-dom");
-
-// src/hooks/usePopoverPosition.ts
-var defaultPopoverPositionOptions = {
-  edgePadding: 16,
-  outerGap: 4,
-  horizontalAlignment: "leftInside",
-  verticalAlignment: "bottomOutside",
-  disabled: false
-};
-var usePopoverPosition = (trigger, options) => {
-  const {
-    edgePadding,
-    outerGap,
-    verticalAlignment,
-    horizontalAlignment,
-    disabled
-  } = { ...defaultPopoverPositionOptions, ...options };
-  if (disabled || !trigger) {
-    return {};
-  }
-  const left = {
-    leftOutside: trigger.left - outerGap,
-    leftInside: trigger.left,
-    rightOutside: trigger.right + outerGap,
-    rightInside: trigger.right,
-    center: trigger.left + trigger.width / 2
-  }[horizontalAlignment];
-  const top = {
-    topOutside: trigger.top - outerGap,
-    topInside: trigger.top,
-    bottomOutside: trigger.bottom + outerGap,
-    bottomInside: trigger.bottom,
-    center: trigger.top + trigger.height / 2
-  }[verticalAlignment];
-  const translateX = {
-    leftOutside: "-100%",
-    leftInside: void 0,
-    rightOutside: void 0,
-    rightInside: "-100%",
-    center: "-50%"
-  }[horizontalAlignment];
-  const translateY = {
-    topOutside: "-100%",
-    topInside: void 0,
-    bottomOutside: void 0,
-    bottomInside: "-100%",
-    center: "-50%"
-  }[verticalAlignment];
-  return {
-    left: Math.max(left, edgePadding),
-    top: Math.max(top, edgePadding),
-    translate: [translateX ?? "0", translateY ?? "0"].join(" ")
-  };
-};
-
-// src/hooks/useHoverState.ts
-var import_react = require("react");
-var defaultUseHoverStateProps = {
-  closingDelay: 200,
-  isDisabled: false
-};
-var useHoverState = (props = void 0) => {
-  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
-  const [isHovered, setIsHovered] = (0, import_react.useState)(false);
-  const [timer, setTimer] = (0, import_react.useState)();
-  const onMouseEnter = () => {
-    if (isDisabled) {
-      return;
-    }
-    clearTimeout(timer);
-    setIsHovered(true);
-  };
-  const onMouseLeave = () => {
-    if (isDisabled) {
-      return;
-    }
-    setTimer(setTimeout(() => {
-      setIsHovered(false);
-    }, closingDelay));
-  };
-  (0, import_react.useEffect)(() => {
-    if (timer) {
-      return () => {
-        clearTimeout(timer);
-      };
-    }
-  });
-  (0, import_react.useEffect)(() => {
-    if (timer) {
-      clearTimeout(timer);
-    }
-  }, [isDisabled]);
-  return {
-    isHovered,
-    setIsHovered,
-    handlers: { onMouseEnter, onMouseLeave }
-  };
-};
-
-// src/hooks/useOutsideClick.ts
-var import_react2 = require("react");
-var useOutsideClick = (refs, handler) => {
-  (0, import_react2.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/components/user-action/Menu.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var MenuItem = ({
-  children,
-  onClick,
-  alignment = "left",
-  isDisabled = false,
-  className
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  "div",
-  {
-    className: (0, import_clsx.default)("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
-      "text-right": alignment === "right",
-      "text-left": alignment === "left",
-      "text-disabled cursor-not-allowed": isDisabled,
-      "text-menu-text hover:bg-primary/20": !isDisabled,
-      "cursor-pointer": !!onClick
-    }, className),
-    onClick,
-    children
-  }
-);
-function getScrollableParents(element) {
-  const scrollables = [];
-  let parent = element.parentElement;
-  while (parent) {
-    scrollables.push(parent);
-    parent = parent.parentElement;
-  }
-  return scrollables;
-}
-var Menu = ({
-  trigger,
-  children,
-  alignmentHorizontal = "leftInside",
-  alignmentVertical = "bottomOutside",
-  showOnHover = false,
-  disabled = false,
-  menuClassName = ""
-}) => {
-  const { isHovered: isOpen, setIsHovered: setIsOpen } = useHoverState({ isDisabled: !showOnHover || disabled });
-  const triggerRef = (0, import_react3.useRef)(null);
-  const menuRef = (0, import_react3.useRef)(null);
-  useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
-  const [isHidden, setIsHidden] = (0, import_react3.useState)(true);
-  const bag = {
-    isOpen,
-    close: () => setIsOpen(false),
-    toggleOpen: () => setIsOpen((prevState) => !prevState),
-    disabled
-  };
-  const menuPosition = usePopoverPosition(
-    triggerRef.current?.getBoundingClientRect(),
-    { verticalAlignment: alignmentVertical, horizontalAlignment: alignmentHorizontal, disabled }
-  );
-  (0, import_react3.useEffect)(() => {
-    if (!isOpen) return;
-    const triggerEl = triggerRef.current;
-    if (!triggerEl) return;
-    const scrollableParents = getScrollableParents(triggerEl);
-    const close = () => setIsOpen(false);
-    scrollableParents.forEach((parent) => {
-      parent.addEventListener("scroll", close);
-    });
-    window.addEventListener("resize", close);
-    return () => {
-      scrollableParents.forEach((parent) => {
-        parent.removeEventListener("scroll", close);
-      });
-      window.removeEventListener("resize", close);
-    };
-  }, [isOpen, setIsOpen]);
-  (0, import_react3.useEffect)(() => {
-    if (isOpen) {
-      setIsHidden(false);
-    }
-  }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    trigger(bag, triggerRef),
-    (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        ref: menuRef,
-        onClick: (e) => e.stopPropagation(),
-        className: (0, import_clsx.default)(
-          "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg shadow-strong z-[300]",
-          {
-            "animate-pop-in": isOpen,
-            "animate-pop-out": !isOpen,
-            "hidden": isHidden
-          },
-          menuClassName
-        ),
-        onAnimationEnd: () => {
-          if (!isOpen) {
-            setIsHidden(true);
-          }
-        },
-        style: {
-          ...menuPosition
-        },
-        children: BagFunctionUtil.resolve(children, bag)
-      }
-    ), document.body)
-  ] });
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Menu,
-  MenuItem
-});
-//# sourceMappingURL=Menu.cjs.map

package/dist/components/user-action/Menu.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/user-action/Menu.tsx","../../../src/utils/bagFunctions.ts","../../../src/hooks/usePopoverPosition.ts","../../../src/hooks/useHoverState.ts","../../../src/hooks/useOutsideClick.ts"],"sourcesContent":["import { type PropsWithChildren, type ReactNode, type RefObject, useEffect, useRef, useState } from 'react'\nimport clsx from 'clsx'\nimport type { PropsWithBagFunctionOrChildren } from '@/src/utils/bagFunctions'\nimport { BagFunctionUtil } from '@/src/utils/bagFunctions'\nimport { createPortal } from 'react-dom'\nimport type { PopoverHorizontalAlignment, PopoverVerticalAlignment } from '@/src/hooks/usePopoverPosition'\nimport { usePopoverPosition } from '@/src/hooks/usePopoverPosition'\nimport { useHoverState } from '@/src/hooks/useHoverState'\nimport { useOutsideClick } from '@/src/hooks/useOutsideClick'\n\nexport type MenuItemProps = {\n  onClick?: () => void,\n  alignment?: 'left' | 'right',\n  isDisabled?: boolean,\n  className?: string,\n}\n// TODO differentiate between buttons, links and toggleable items here\nexport const MenuItem = ({\n                           children,\n                           onClick,\n                           alignment = 'left',\n                           isDisabled = false,\n                           className\n                         }: PropsWithChildren<MenuItemProps>) => (\n  <div\n    className={clsx('block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap', {\n      'text-right': alignment === 'right',\n      'text-left': alignment === 'left',\n      'text-disabled cursor-not-allowed': isDisabled,\n      'text-menu-text hover:bg-primary/20': !isDisabled,\n      'cursor-pointer': !!onClick,\n    }, className)}\n    onClick={onClick}\n  >\n    {children}\n  </div>\n)\n\nfunction getScrollableParents(element) {\n  const scrollables = []\n  let parent = element.parentElement\n  while (parent) {\n    scrollables.push(parent)\n    parent = parent.parentElement\n  }\n  return scrollables\n}\n\nexport type MenuBag = {\n  isOpen: boolean,\n  disabled: boolean,\n  toggleOpen: () => void,\n  close: () => void,\n}\n\nexport type MenuProps<T> = PropsWithBagFunctionOrChildren<MenuBag> & {\n  trigger: (bag: MenuBag, ref: RefObject<T>) => ReactNode,\n  /**\n   * @default 'l'\n   */\n  alignmentHorizontal?: PopoverHorizontalAlignment,\n  alignmentVertical?: PopoverVerticalAlignment,\n  showOnHover?: boolean,\n  menuClassName?: string,\n  disabled?: boolean,\n}\n\n/**\n * A Menu Component to allow the user to see different functions\n */\nexport const Menu = <T extends HTMLElement>({\n                                              trigger,\n                                              children,\n                                              alignmentHorizontal = 'leftInside',\n                                              alignmentVertical = 'bottomOutside',\n                                              showOnHover = false,\n                                              disabled = false,\n                                              menuClassName = '',\n                                            }: MenuProps<T>) => {\n  const { isHovered: isOpen, setIsHovered: setIsOpen } = useHoverState({ isDisabled: !showOnHover || disabled })\n  const triggerRef = useRef<T>(null)\n  const menuRef = useRef<HTMLDivElement>(null)\n  useOutsideClick([triggerRef, menuRef], () => setIsOpen(false))\n\n  const [isHidden, setIsHidden] = useState<boolean>(true)\n  const bag: MenuBag = {\n    isOpen,\n    close: () => setIsOpen(false),\n    toggleOpen: () => setIsOpen(prevState => !prevState),\n    disabled,\n  }\n\n  const menuPosition = usePopoverPosition(\n    triggerRef.current?.getBoundingClientRect(),\n    { verticalAlignment: alignmentVertical, horizontalAlignment: alignmentHorizontal, disabled }\n  )\n\n  useEffect(() => {\n    if (!isOpen) return\n\n    const triggerEl = triggerRef.current\n    if (!triggerEl) return\n\n    const scrollableParents = getScrollableParents(triggerEl)\n\n    const close = () => setIsOpen(false)\n    scrollableParents.forEach((parent) => {\n      parent.addEventListener('scroll', close)\n    })\n    window.addEventListener('resize', close)\n\n    return () => {\n      scrollableParents.forEach((parent) => {\n        parent.removeEventListener('scroll', close)\n      })\n      window.removeEventListener('resize', close)\n    }\n  }, [isOpen, setIsOpen])\n\n  useEffect(() => {\n    if (isOpen) {\n      setIsHidden(false)\n    }\n  }, [isOpen])\n\n  return (\n    <>\n      {trigger(bag, triggerRef)}\n      {createPortal((\n        <div\n          ref={menuRef}\n          onClick={e => e.stopPropagation()}\n          className={clsx(\n            'absolute rounded-md bg-menu-background text-menu-text shadow-around-lg shadow-strong z-[300]',\n            {\n              'animate-pop-in': isOpen,\n              'animate-pop-out': !isOpen,\n              'hidden': isHidden,\n            },\n            menuClassName\n          )}\n          onAnimationEnd={() => {\n            if (!isOpen) {\n              setIsHidden(true)\n            }\n          }}\n          style={{\n            ...menuPosition\n          }}\n        >\n          {BagFunctionUtil.resolve<MenuBag>(children, bag)}\n        </div>\n      ), document.body)}\n    </>\n  )\n}\n\n","import type { ReactNode } from 'react'\n\nexport type BagFunction<T> = (bag: T) => ReactNode\n\nexport type BagFunctionOrNode<T> = BagFunction<T> | ReactNode\n\nexport type PropsWithBagFunction<T, P = unknown> =  P & { children?: BagFunction<T> }\n\nexport type PropsWithBagFunctionOrChildren<T, P = unknown> =  P & { children?:  BagFunctionOrNode<T> }\n\nconst resolve = <T>(children:  BagFunctionOrNode<T>, bag: T): ReactNode => {\n  if (typeof children === 'function') {\n    return (children as BagFunction<T>)(bag)\n  }\n\n  return children ?? undefined\n}\n\nexport const BagFunctionUtil = {\n  resolve\n}","import type { CSSProperties } from 'react'\n\nexport type PopoverHorizontalAlignment = 'leftOutside' | 'leftInside' | 'rightOutside' | 'rightInside' | 'center'\nexport type PopoverVerticalAlignment = 'topOutside' | 'topInside' | 'bottomOutside' | 'bottomInside' | 'center'\n\ntype PopoverPositionOptionsResolved = {\n  edgePadding: number,\n  outerGap: number,\n  verticalAlignment: PopoverVerticalAlignment,\n  horizontalAlignment: PopoverHorizontalAlignment,\n  disabled: boolean,\n}\n\ntype PopoverPositionOptions = Partial<PopoverPositionOptionsResolved>\n\nconst defaultPopoverPositionOptions: PopoverPositionOptionsResolved = {\n  edgePadding: 16,\n  outerGap: 4,\n  horizontalAlignment: 'leftInside',\n  verticalAlignment: 'bottomOutside',\n  disabled: false,\n}\n\nexport const usePopoverPosition = (trigger?: DOMRect, options?: PopoverPositionOptions): CSSProperties => {\n  const {\n    edgePadding,\n    outerGap,\n    verticalAlignment,\n    horizontalAlignment,\n    disabled\n  }: PopoverPositionOptionsResolved = { ...defaultPopoverPositionOptions, ...options }\n\n  if (disabled || !trigger) {\n    return {}\n  }\n\n  const left: number = {\n    leftOutside: trigger.left - outerGap,\n    leftInside: trigger.left,\n    rightOutside: trigger.right + outerGap,\n    rightInside: trigger.right,\n    center: trigger.left + trigger.width / 2,\n  }[horizontalAlignment]\n\n  const top: number = {\n    topOutside: trigger.top - outerGap,\n    topInside: trigger.top,\n    bottomOutside: trigger.bottom + outerGap,\n    bottomInside: trigger.bottom,\n    center: trigger.top + trigger.height / 2,\n  }[verticalAlignment]\n\n  const translateX: string | undefined = {\n    leftOutside: '-100%',\n    leftInside: undefined,\n    rightOutside: undefined,\n    rightInside: '-100%',\n    center: '-50%',\n  }[horizontalAlignment]\n\n  const translateY: string | undefined = {\n    topOutside: '-100%',\n    topInside: undefined,\n    bottomOutside: undefined,\n    bottomInside: '-100%',\n    center: '-50%',\n  }[verticalAlignment]\n\n  return {\n    left: Math.max(left, edgePadding),\n    top: Math.max(top, edgePadding),\n    translate: [translateX ?? '0', translateY ?? '0'].join(' ')\n  }\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useEffect, useState } from 'react'\n\ntype UseHoverStateProps = {\n  /**\n   * The delay after which the menu is closed in milliseconds\n   *\n   * default: 200ms\n   */\n  closingDelay: number,\n  /**\n   * Whether the hover state management should be disabled\n   *\n   * default: false\n   */\n  isDisabled: boolean,\n}\n\ntype UseHoverStateReturnType = {\n  /**\n   * Whether the element is hovered\n   */\n  isHovered: boolean,\n  /**\n   * Function to change the current hover status\n   */\n  setIsHovered: Dispatch<SetStateAction<boolean>>,\n  /**\n   * Handlers to pass on to the component that should be hovered\n   */\n  handlers: {\n    onMouseEnter: () => void,\n    onMouseLeave: () => void,\n  },\n}\n\nconst defaultUseHoverStateProps: UseHoverStateProps = {\n  closingDelay: 200,\n  isDisabled: false,\n}\n\n/**\n * @param props See UseHoverStateProps\n *\n * A react hook for managing the hover state of a component. The handlers provided should be\n * forwarded to the component which should be hovered over\n */\nexport const useHoverState = (props: Partial<UseHoverStateProps> | undefined = undefined): UseHoverStateReturnType => {\n  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props }\n\n  const [isHovered, setIsHovered] = useState(false)\n  const [timer, setTimer] = useState<NodeJS.Timeout>()\n\n  const onMouseEnter = () => {\n    if (isDisabled) {\n      return\n    }\n    clearTimeout(timer)\n    setIsHovered(true)\n  }\n\n  const onMouseLeave = () => {\n    if (isDisabled) {\n      return\n    }\n    setTimer(setTimeout(() => {\n      setIsHovered(false)\n    }, closingDelay))\n  }\n\n  useEffect(() => {\n    if (timer) {\n      return () => {\n        clearTimeout(timer)\n      }\n    }\n  })\n\n  useEffect(() => {\n    if (timer) {\n      clearTimeout(timer)\n    }\n  }, [isDisabled]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return {\n    isHovered, setIsHovered, handlers: { onMouseEnter, onMouseLeave }\n  }\n}\n","import type { RefObject } from 'react'\nimport { useEffect } from 'react'\n\nexport const useOutsideClick = <Ts extends RefObject<HTMLElement>[]>(refs: Ts, handler: () => void) => {\n  useEffect(() => {\n    const listener = (event: MouseEvent | TouchEvent) => {\n      // returning means not \"not clicking outside\"\n\n      // if no target exists, return\n      if (event.target === null) return\n      // if the target is a ref's element or descendent thereof, return\n      if (refs.some((ref) => !ref.current || ref.current.contains(event.target as Node))) {\n        return\n      }\n\n      handler()\n    }\n    document.addEventListener('mousedown', listener)\n    document.addEventListener('touchstart', listener)\n    return () => {\n      document.removeEventListener('mousedown', listener)\n      document.removeEventListener('touchstart', listener)\n    }\n  }, [refs, handler])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,gBAAoG;AACpG,kBAAiB;;;ACSjB,IAAM,UAAU,CAAI,UAAiC,QAAsB;AACzE,MAAI,OAAO,aAAa,YAAY;AAClC,WAAQ,SAA4B,GAAG;AAAA,EACzC;AAEA,SAAO,YAAY;AACrB;AAEO,IAAM,kBAAkB;AAAA,EAC7B;AACF;;;ADhBA,uBAA6B;;;AEW7B,IAAM,gCAAgE;AAAA,EACpE,aAAa;AAAA,EACb,UAAU;AAAA,EACV,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEO,IAAM,qBAAqB,CAAC,SAAmB,YAAoD;AACxG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAoC,EAAE,GAAG,+BAA+B,GAAG,QAAQ;AAEnF,MAAI,YAAY,CAAC,SAAS;AACxB,WAAO,CAAC;AAAA,EACV;AAEA,QAAM,OAAe;AAAA,IACnB,aAAa,QAAQ,OAAO;AAAA,IAC5B,YAAY,QAAQ;AAAA,IACpB,cAAc,QAAQ,QAAQ;AAAA,IAC9B,aAAa,QAAQ;AAAA,IACrB,QAAQ,QAAQ,OAAO,QAAQ,QAAQ;AAAA,EACzC,EAAE,mBAAmB;AAErB,QAAM,MAAc;AAAA,IAClB,YAAY,QAAQ,MAAM;AAAA,IAC1B,WAAW,QAAQ;AAAA,IACnB,eAAe,QAAQ,SAAS;AAAA,IAChC,cAAc,QAAQ;AAAA,IACtB,QAAQ,QAAQ,MAAM,QAAQ,SAAS;AAAA,EACzC,EAAE,iBAAiB;AAEnB,QAAM,aAAiC;AAAA,IACrC,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,aAAa;AAAA,IACb,QAAQ;AAAA,EACV,EAAE,mBAAmB;AAErB,QAAM,aAAiC;AAAA,IACrC,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,eAAe;AAAA,IACf,cAAc;AAAA,IACd,QAAQ;AAAA,EACV,EAAE,iBAAiB;AAEnB,SAAO;AAAA,IACL,MAAM,KAAK,IAAI,MAAM,WAAW;AAAA,IAChC,KAAK,KAAK,IAAI,KAAK,WAAW;AAAA,IAC9B,WAAW,CAAC,cAAc,KAAK,cAAc,GAAG,EAAE,KAAK,GAAG;AAAA,EAC5D;AACF;;;ACxEA,mBAAoC;AAmCpC,IAAM,4BAAgD;AAAA,EACpD,cAAc;AAAA,EACd,YAAY;AACd;AAQO,IAAM,gBAAgB,CAAC,QAAiD,WAAuC;AACpH,QAAM,EAAE,cAAc,WAAW,IAAI,EAAE,GAAG,2BAA2B,GAAG,MAAM;AAE9E,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAyB;AAEnD,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY;AACd;AAAA,IACF;AACA,iBAAa,KAAK;AAClB,iBAAa,IAAI;AAAA,EACnB;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY;AACd;AAAA,IACF;AACA,aAAS,WAAW,MAAM;AACxB,mBAAa,KAAK;AAAA,IACpB,GAAG,YAAY,CAAC;AAAA,EAClB;AAEA,8BAAU,MAAM;AACd,QAAI,OAAO;AACT,aAAO,MAAM;AACX,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,EACF,CAAC;AAED,8BAAU,MAAM;AACd,QAAI,OAAO;AACT,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO;AAAA,IACL;AAAA,IAAW;AAAA,IAAc,UAAU,EAAE,cAAc,aAAa;AAAA,EAClE;AACF;;;ACtFA,IAAAC,gBAA0B;AAEnB,IAAM,kBAAkB,CAAsC,MAAU,YAAwB;AACrG,+BAAU,MAAM;AACd,UAAM,WAAW,CAAC,UAAmC;AAInD,UAAI,MAAM,WAAW,KAAM;AAE3B,UAAI,KAAK,KAAK,CAAC,QAAQ,CAAC,IAAI,WAAW,IAAI,QAAQ,SAAS,MAAM,MAAc,CAAC,GAAG;AAClF;AAAA,MACF;AAEA,cAAQ;AAAA,IACV;AACA,aAAS,iBAAiB,aAAa,QAAQ;AAC/C,aAAS,iBAAiB,cAAc,QAAQ;AAChD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,QAAQ;AAClD,eAAS,oBAAoB,cAAc,QAAQ;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,CAAC;AACpB;;;AJAE;AAPK,IAAM,WAAW,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AACF,MACvB;AAAA,EAAC;AAAA;AAAA,IACC,eAAW,YAAAC,SAAK,4FAA4F;AAAA,MAC1G,cAAc,cAAc;AAAA,MAC5B,aAAa,cAAc;AAAA,MAC3B,oCAAoC;AAAA,MACpC,sCAAsC,CAAC;AAAA,MACvC,kBAAkB,CAAC,CAAC;AAAA,IACtB,GAAG,SAAS;AAAA,IACZ;AAAA,IAEC;AAAA;AACH;AAGF,SAAS,qBAAqB,SAAS;AACrC,QAAM,cAAc,CAAC;AACrB,MAAI,SAAS,QAAQ;AACrB,SAAO,QAAQ;AACb,gBAAY,KAAK,MAAM;AACvB,aAAS,OAAO;AAAA,EAClB;AACA,SAAO;AACT;AAwBO,IAAM,OAAO,CAAwB;AAAA,EACE;AAAA,EACA;AAAA,EACA,sBAAsB;AAAA,EACtB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,WAAW;AAAA,EACX,gBAAgB;AAClB,MAAoB;AAC9D,QAAM,EAAE,WAAW,QAAQ,cAAc,UAAU,IAAI,cAAc,EAAE,YAAY,CAAC,eAAe,SAAS,CAAC;AAC7G,QAAM,iBAAa,sBAAU,IAAI;AACjC,QAAM,cAAU,sBAAuB,IAAI;AAC3C,kBAAgB,CAAC,YAAY,OAAO,GAAG,MAAM,UAAU,KAAK,CAAC;AAE7D,QAAM,CAAC,UAAU,WAAW,QAAI,wBAAkB,IAAI;AACtD,QAAM,MAAe;AAAA,IACnB;AAAA,IACA,OAAO,MAAM,UAAU,KAAK;AAAA,IAC5B,YAAY,MAAM,UAAU,eAAa,CAAC,SAAS;AAAA,IACnD;AAAA,EACF;AAEA,QAAM,eAAe;AAAA,IACnB,WAAW,SAAS,sBAAsB;AAAA,IAC1C,EAAE,mBAAmB,mBAAmB,qBAAqB,qBAAqB,SAAS;AAAA,EAC7F;AAEA,+BAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AAEb,UAAM,YAAY,WAAW;AAC7B,QAAI,CAAC,UAAW;AAEhB,UAAM,oBAAoB,qBAAqB,SAAS;AAExD,UAAM,QAAQ,MAAM,UAAU,KAAK;AACnC,sBAAkB,QAAQ,CAAC,WAAW;AACpC,aAAO,iBAAiB,UAAU,KAAK;AAAA,IACzC,CAAC;AACD,WAAO,iBAAiB,UAAU,KAAK;AAEvC,WAAO,MAAM;AACX,wBAAkB,QAAQ,CAAC,WAAW;AACpC,eAAO,oBAAoB,UAAU,KAAK;AAAA,MAC5C,CAAC;AACD,aAAO,oBAAoB,UAAU,KAAK;AAAA,IAC5C;AAAA,EACF,GAAG,CAAC,QAAQ,SAAS,CAAC;AAEtB,+BAAU,MAAM;AACd,QAAI,QAAQ;AACV,kBAAY,KAAK;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,4EACG;AAAA,YAAQ,KAAK,UAAU;AAAA,QACvB,+BACC;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,SAAS,OAAK,EAAE,gBAAgB;AAAA,QAChC,eAAW,YAAAA;AAAA,UACT;AAAA,UACA;AAAA,YACE,kBAAkB;AAAA,YAClB,mBAAmB,CAAC;AAAA,YACpB,UAAU;AAAA,UACZ;AAAA,UACA;AAAA,QACF;AAAA,QACA,gBAAgB,MAAM;AACpB,cAAI,CAAC,QAAQ;AACX,wBAAY,IAAI;AAAA,UAClB;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL,GAAG;AAAA,QACL;AAAA,QAEC,0BAAgB,QAAiB,UAAU,GAAG;AAAA;AAAA,IACjD,GACC,SAAS,IAAI;AAAA,KAClB;AAEJ;","names":["import_react","import_react","clsx"]}

package/dist/components/user-action/Menu.d.cts

@@ -1,35 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { PropsWithChildren, RefObject, ReactNode } from 'react';
-import { PropsWithBagFunctionOrChildren } from '../../utils/bagFunctions.cjs';
-import { PopoverHorizontalAlignment, PopoverVerticalAlignment } from '../../hooks/usePopoverPosition.cjs';
-
-type MenuItemProps = {
-    onClick?: () => void;
-    alignment?: 'left' | 'right';
-    isDisabled?: boolean;
-    className?: string;
-};
-declare const MenuItem: ({ children, onClick, alignment, isDisabled, className }: PropsWithChildren<MenuItemProps>) => react_jsx_runtime.JSX.Element;
-type MenuBag = {
-    isOpen: boolean;
-    disabled: boolean;
-    toggleOpen: () => void;
-    close: () => void;
-};
-type MenuProps<T> = PropsWithBagFunctionOrChildren<MenuBag> & {
-    trigger: (bag: MenuBag, ref: RefObject<T>) => ReactNode;
-    /**
-     * @default 'l'
-     */
-    alignmentHorizontal?: PopoverHorizontalAlignment;
-    alignmentVertical?: PopoverVerticalAlignment;
-    showOnHover?: boolean;
-    menuClassName?: string;
-    disabled?: boolean;
-};
-/**
- * A Menu Component to allow the user to see different functions
- */
-declare const Menu: <T extends HTMLElement>({ trigger, children, alignmentHorizontal, alignmentVertical, showOnHover, disabled, menuClassName, }: MenuProps<T>) => react_jsx_runtime.JSX.Element;
-
-export { Menu, type MenuBag, MenuItem, type MenuItemProps, type MenuProps };

package/dist/components/user-action/Menu.d.ts

@@ -1,35 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { PropsWithChildren, RefObject, ReactNode } from 'react';
-import { PropsWithBagFunctionOrChildren } from '../../utils/bagFunctions.js';
-import { PopoverHorizontalAlignment, PopoverVerticalAlignment } from '../../hooks/usePopoverPosition.js';
-
-type MenuItemProps = {
-    onClick?: () => void;
-    alignment?: 'left' | 'right';
-    isDisabled?: boolean;
-    className?: string;
-};
-declare const MenuItem: ({ children, onClick, alignment, isDisabled, className }: PropsWithChildren<MenuItemProps>) => react_jsx_runtime.JSX.Element;
-type MenuBag = {
-    isOpen: boolean;
-    disabled: boolean;
-    toggleOpen: () => void;
-    close: () => void;
-};
-type MenuProps<T> = PropsWithBagFunctionOrChildren<MenuBag> & {
-    trigger: (bag: MenuBag, ref: RefObject<T>) => ReactNode;
-    /**
-     * @default 'l'
-     */
-    alignmentHorizontal?: PopoverHorizontalAlignment;
-    alignmentVertical?: PopoverVerticalAlignment;
-    showOnHover?: boolean;
-    menuClassName?: string;
-    disabled?: boolean;
-};
-/**
- * A Menu Component to allow the user to see different functions
- */
-declare const Menu: <T extends HTMLElement>({ trigger, children, alignmentHorizontal, alignmentVertical, showOnHover, disabled, menuClassName, }: MenuProps<T>) => react_jsx_runtime.JSX.Element;
-
-export { Menu, type MenuBag, MenuItem, type MenuItemProps, type MenuProps };

package/dist/components/user-action/Menu.js

@@ -1,247 +0,0 @@
-// src/components/user-action/Menu.tsx
-import { useEffect as useEffect3, useRef, useState as useState2 } from "react";
-import clsx from "clsx";
-
-// src/utils/bagFunctions.ts
-var resolve = (children, bag) => {
-  if (typeof children === "function") {
-    return children(bag);
-  }
-  return children ?? void 0;
-};
-var BagFunctionUtil = {
-  resolve
-};
-
-// src/components/user-action/Menu.tsx
-import { createPortal } from "react-dom";
-
-// src/hooks/usePopoverPosition.ts
-var defaultPopoverPositionOptions = {
-  edgePadding: 16,
-  outerGap: 4,
-  horizontalAlignment: "leftInside",
-  verticalAlignment: "bottomOutside",
-  disabled: false
-};
-var usePopoverPosition = (trigger, options) => {
-  const {
-    edgePadding,
-    outerGap,
-    verticalAlignment,
-    horizontalAlignment,
-    disabled
-  } = { ...defaultPopoverPositionOptions, ...options };
-  if (disabled || !trigger) {
-    return {};
-  }
-  const left = {
-    leftOutside: trigger.left - outerGap,
-    leftInside: trigger.left,
-    rightOutside: trigger.right + outerGap,
-    rightInside: trigger.right,
-    center: trigger.left + trigger.width / 2
-  }[horizontalAlignment];
-  const top = {
-    topOutside: trigger.top - outerGap,
-    topInside: trigger.top,
-    bottomOutside: trigger.bottom + outerGap,
-    bottomInside: trigger.bottom,
-    center: trigger.top + trigger.height / 2
-  }[verticalAlignment];
-  const translateX = {
-    leftOutside: "-100%",
-    leftInside: void 0,
-    rightOutside: void 0,
-    rightInside: "-100%",
-    center: "-50%"
-  }[horizontalAlignment];
-  const translateY = {
-    topOutside: "-100%",
-    topInside: void 0,
-    bottomOutside: void 0,
-    bottomInside: "-100%",
-    center: "-50%"
-  }[verticalAlignment];
-  return {
-    left: Math.max(left, edgePadding),
-    top: Math.max(top, edgePadding),
-    translate: [translateX ?? "0", translateY ?? "0"].join(" ")
-  };
-};
-
-// src/hooks/useHoverState.ts
-import { useEffect, useState } from "react";
-var defaultUseHoverStateProps = {
-  closingDelay: 200,
-  isDisabled: false
-};
-var useHoverState = (props = void 0) => {
-  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
-  const [isHovered, setIsHovered] = useState(false);
-  const [timer, setTimer] = useState();
-  const onMouseEnter = () => {
-    if (isDisabled) {
-      return;
-    }
-    clearTimeout(timer);
-    setIsHovered(true);
-  };
-  const onMouseLeave = () => {
-    if (isDisabled) {
-      return;
-    }
-    setTimer(setTimeout(() => {
-      setIsHovered(false);
-    }, closingDelay));
-  };
-  useEffect(() => {
-    if (timer) {
-      return () => {
-        clearTimeout(timer);
-      };
-    }
-  });
-  useEffect(() => {
-    if (timer) {
-      clearTimeout(timer);
-    }
-  }, [isDisabled]);
-  return {
-    isHovered,
-    setIsHovered,
-    handlers: { onMouseEnter, onMouseLeave }
-  };
-};
-
-// src/hooks/useOutsideClick.ts
-import { useEffect as useEffect2 } from "react";
-var useOutsideClick = (refs, handler) => {
-  useEffect2(() => {
-    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/components/user-action/Menu.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var MenuItem = ({
-  children,
-  onClick,
-  alignment = "left",
-  isDisabled = false,
-  className
-}) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: clsx("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap", {
-      "text-right": alignment === "right",
-      "text-left": alignment === "left",
-      "text-disabled cursor-not-allowed": isDisabled,
-      "text-menu-text hover:bg-primary/20": !isDisabled,
-      "cursor-pointer": !!onClick
-    }, className),
-    onClick,
-    children
-  }
-);
-function getScrollableParents(element) {
-  const scrollables = [];
-  let parent = element.parentElement;
-  while (parent) {
-    scrollables.push(parent);
-    parent = parent.parentElement;
-  }
-  return scrollables;
-}
-var Menu = ({
-  trigger,
-  children,
-  alignmentHorizontal = "leftInside",
-  alignmentVertical = "bottomOutside",
-  showOnHover = false,
-  disabled = false,
-  menuClassName = ""
-}) => {
-  const { isHovered: isOpen, setIsHovered: setIsOpen } = useHoverState({ isDisabled: !showOnHover || disabled });
-  const triggerRef = useRef(null);
-  const menuRef = useRef(null);
-  useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
-  const [isHidden, setIsHidden] = useState2(true);
-  const bag = {
-    isOpen,
-    close: () => setIsOpen(false),
-    toggleOpen: () => setIsOpen((prevState) => !prevState),
-    disabled
-  };
-  const menuPosition = usePopoverPosition(
-    triggerRef.current?.getBoundingClientRect(),
-    { verticalAlignment: alignmentVertical, horizontalAlignment: alignmentHorizontal, disabled }
-  );
-  useEffect3(() => {
-    if (!isOpen) return;
-    const triggerEl = triggerRef.current;
-    if (!triggerEl) return;
-    const scrollableParents = getScrollableParents(triggerEl);
-    const close = () => setIsOpen(false);
-    scrollableParents.forEach((parent) => {
-      parent.addEventListener("scroll", close);
-    });
-    window.addEventListener("resize", close);
-    return () => {
-      scrollableParents.forEach((parent) => {
-        parent.removeEventListener("scroll", close);
-      });
-      window.removeEventListener("resize", close);
-    };
-  }, [isOpen, setIsOpen]);
-  useEffect3(() => {
-    if (isOpen) {
-      setIsHidden(false);
-    }
-  }, [isOpen]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    trigger(bag, triggerRef),
-    createPortal(/* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: menuRef,
-        onClick: (e) => e.stopPropagation(),
-        className: clsx(
-          "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg shadow-strong z-[300]",
-          {
-            "animate-pop-in": isOpen,
-            "animate-pop-out": !isOpen,
-            "hidden": isHidden
-          },
-          menuClassName
-        ),
-        onAnimationEnd: () => {
-          if (!isOpen) {
-            setIsHidden(true);
-          }
-        },
-        style: {
-          ...menuPosition
-        },
-        children: BagFunctionUtil.resolve(children, bag)
-      }
-    ), document.body)
-  ] });
-};
-export {
-  Menu,
-  MenuItem
-};
-//# sourceMappingURL=Menu.js.map

package/dist/components/user-action/Menu.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/user-action/Menu.tsx","../../../src/utils/bagFunctions.ts","../../../src/hooks/usePopoverPosition.ts","../../../src/hooks/useHoverState.ts","../../../src/hooks/useOutsideClick.ts"],"sourcesContent":["import { type PropsWithChildren, type ReactNode, type RefObject, useEffect, useRef, useState } from 'react'\nimport clsx from 'clsx'\nimport type { PropsWithBagFunctionOrChildren } from '@/src/utils/bagFunctions'\nimport { BagFunctionUtil } from '@/src/utils/bagFunctions'\nimport { createPortal } from 'react-dom'\nimport type { PopoverHorizontalAlignment, PopoverVerticalAlignment } from '@/src/hooks/usePopoverPosition'\nimport { usePopoverPosition } from '@/src/hooks/usePopoverPosition'\nimport { useHoverState } from '@/src/hooks/useHoverState'\nimport { useOutsideClick } from '@/src/hooks/useOutsideClick'\n\nexport type MenuItemProps = {\n  onClick?: () => void,\n  alignment?: 'left' | 'right',\n  isDisabled?: boolean,\n  className?: string,\n}\n// TODO differentiate between buttons, links and toggleable items here\nexport const MenuItem = ({\n                           children,\n                           onClick,\n                           alignment = 'left',\n                           isDisabled = false,\n                           className\n                         }: PropsWithChildren<MenuItemProps>) => (\n  <div\n    className={clsx('block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold text-nowrap', {\n      'text-right': alignment === 'right',\n      'text-left': alignment === 'left',\n      'text-disabled cursor-not-allowed': isDisabled,\n      'text-menu-text hover:bg-primary/20': !isDisabled,\n      'cursor-pointer': !!onClick,\n    }, className)}\n    onClick={onClick}\n  >\n    {children}\n  </div>\n)\n\nfunction getScrollableParents(element) {\n  const scrollables = []\n  let parent = element.parentElement\n  while (parent) {\n    scrollables.push(parent)\n    parent = parent.parentElement\n  }\n  return scrollables\n}\n\nexport type MenuBag = {\n  isOpen: boolean,\n  disabled: boolean,\n  toggleOpen: () => void,\n  close: () => void,\n}\n\nexport type MenuProps<T> = PropsWithBagFunctionOrChildren<MenuBag> & {\n  trigger: (bag: MenuBag, ref: RefObject<T>) => ReactNode,\n  /**\n   * @default 'l'\n   */\n  alignmentHorizontal?: PopoverHorizontalAlignment,\n  alignmentVertical?: PopoverVerticalAlignment,\n  showOnHover?: boolean,\n  menuClassName?: string,\n  disabled?: boolean,\n}\n\n/**\n * A Menu Component to allow the user to see different functions\n */\nexport const Menu = <T extends HTMLElement>({\n                                              trigger,\n                                              children,\n                                              alignmentHorizontal = 'leftInside',\n                                              alignmentVertical = 'bottomOutside',\n                                              showOnHover = false,\n                                              disabled = false,\n                                              menuClassName = '',\n                                            }: MenuProps<T>) => {\n  const { isHovered: isOpen, setIsHovered: setIsOpen } = useHoverState({ isDisabled: !showOnHover || disabled })\n  const triggerRef = useRef<T>(null)\n  const menuRef = useRef<HTMLDivElement>(null)\n  useOutsideClick([triggerRef, menuRef], () => setIsOpen(false))\n\n  const [isHidden, setIsHidden] = useState<boolean>(true)\n  const bag: MenuBag = {\n    isOpen,\n    close: () => setIsOpen(false),\n    toggleOpen: () => setIsOpen(prevState => !prevState),\n    disabled,\n  }\n\n  const menuPosition = usePopoverPosition(\n    triggerRef.current?.getBoundingClientRect(),\n    { verticalAlignment: alignmentVertical, horizontalAlignment: alignmentHorizontal, disabled }\n  )\n\n  useEffect(() => {\n    if (!isOpen) return\n\n    const triggerEl = triggerRef.current\n    if (!triggerEl) return\n\n    const scrollableParents = getScrollableParents(triggerEl)\n\n    const close = () => setIsOpen(false)\n    scrollableParents.forEach((parent) => {\n      parent.addEventListener('scroll', close)\n    })\n    window.addEventListener('resize', close)\n\n    return () => {\n      scrollableParents.forEach((parent) => {\n        parent.removeEventListener('scroll', close)\n      })\n      window.removeEventListener('resize', close)\n    }\n  }, [isOpen, setIsOpen])\n\n  useEffect(() => {\n    if (isOpen) {\n      setIsHidden(false)\n    }\n  }, [isOpen])\n\n  return (\n    <>\n      {trigger(bag, triggerRef)}\n      {createPortal((\n        <div\n          ref={menuRef}\n          onClick={e => e.stopPropagation()}\n          className={clsx(\n            'absolute rounded-md bg-menu-background text-menu-text shadow-around-lg shadow-strong z-[300]',\n            {\n              'animate-pop-in': isOpen,\n              'animate-pop-out': !isOpen,\n              'hidden': isHidden,\n            },\n            menuClassName\n          )}\n          onAnimationEnd={() => {\n            if (!isOpen) {\n              setIsHidden(true)\n            }\n          }}\n          style={{\n            ...menuPosition\n          }}\n        >\n          {BagFunctionUtil.resolve<MenuBag>(children, bag)}\n        </div>\n      ), document.body)}\n    </>\n  )\n}\n\n","import type { ReactNode } from 'react'\n\nexport type BagFunction<T> = (bag: T) => ReactNode\n\nexport type BagFunctionOrNode<T> = BagFunction<T> | ReactNode\n\nexport type PropsWithBagFunction<T, P = unknown> =  P & { children?: BagFunction<T> }\n\nexport type PropsWithBagFunctionOrChildren<T, P = unknown> =  P & { children?:  BagFunctionOrNode<T> }\n\nconst resolve = <T>(children:  BagFunctionOrNode<T>, bag: T): ReactNode => {\n  if (typeof children === 'function') {\n    return (children as BagFunction<T>)(bag)\n  }\n\n  return children ?? undefined\n}\n\nexport const BagFunctionUtil = {\n  resolve\n}","import type { CSSProperties } from 'react'\n\nexport type PopoverHorizontalAlignment = 'leftOutside' | 'leftInside' | 'rightOutside' | 'rightInside' | 'center'\nexport type PopoverVerticalAlignment = 'topOutside' | 'topInside' | 'bottomOutside' | 'bottomInside' | 'center'\n\ntype PopoverPositionOptionsResolved = {\n  edgePadding: number,\n  outerGap: number,\n  verticalAlignment: PopoverVerticalAlignment,\n  horizontalAlignment: PopoverHorizontalAlignment,\n  disabled: boolean,\n}\n\ntype PopoverPositionOptions = Partial<PopoverPositionOptionsResolved>\n\nconst defaultPopoverPositionOptions: PopoverPositionOptionsResolved = {\n  edgePadding: 16,\n  outerGap: 4,\n  horizontalAlignment: 'leftInside',\n  verticalAlignment: 'bottomOutside',\n  disabled: false,\n}\n\nexport const usePopoverPosition = (trigger?: DOMRect, options?: PopoverPositionOptions): CSSProperties => {\n  const {\n    edgePadding,\n    outerGap,\n    verticalAlignment,\n    horizontalAlignment,\n    disabled\n  }: PopoverPositionOptionsResolved = { ...defaultPopoverPositionOptions, ...options }\n\n  if (disabled || !trigger) {\n    return {}\n  }\n\n  const left: number = {\n    leftOutside: trigger.left - outerGap,\n    leftInside: trigger.left,\n    rightOutside: trigger.right + outerGap,\n    rightInside: trigger.right,\n    center: trigger.left + trigger.width / 2,\n  }[horizontalAlignment]\n\n  const top: number = {\n    topOutside: trigger.top - outerGap,\n    topInside: trigger.top,\n    bottomOutside: trigger.bottom + outerGap,\n    bottomInside: trigger.bottom,\n    center: trigger.top + trigger.height / 2,\n  }[verticalAlignment]\n\n  const translateX: string | undefined = {\n    leftOutside: '-100%',\n    leftInside: undefined,\n    rightOutside: undefined,\n    rightInside: '-100%',\n    center: '-50%',\n  }[horizontalAlignment]\n\n  const translateY: string | undefined = {\n    topOutside: '-100%',\n    topInside: undefined,\n    bottomOutside: undefined,\n    bottomInside: '-100%',\n    center: '-50%',\n  }[verticalAlignment]\n\n  return {\n    left: Math.max(left, edgePadding),\n    top: Math.max(top, edgePadding),\n    translate: [translateX ?? '0', translateY ?? '0'].join(' ')\n  }\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useEffect, useState } from 'react'\n\ntype UseHoverStateProps = {\n  /**\n   * The delay after which the menu is closed in milliseconds\n   *\n   * default: 200ms\n   */\n  closingDelay: number,\n  /**\n   * Whether the hover state management should be disabled\n   *\n   * default: false\n   */\n  isDisabled: boolean,\n}\n\ntype UseHoverStateReturnType = {\n  /**\n   * Whether the element is hovered\n   */\n  isHovered: boolean,\n  /**\n   * Function to change the current hover status\n   */\n  setIsHovered: Dispatch<SetStateAction<boolean>>,\n  /**\n   * Handlers to pass on to the component that should be hovered\n   */\n  handlers: {\n    onMouseEnter: () => void,\n    onMouseLeave: () => void,\n  },\n}\n\nconst defaultUseHoverStateProps: UseHoverStateProps = {\n  closingDelay: 200,\n  isDisabled: false,\n}\n\n/**\n * @param props See UseHoverStateProps\n *\n * A react hook for managing the hover state of a component. The handlers provided should be\n * forwarded to the component which should be hovered over\n */\nexport const useHoverState = (props: Partial<UseHoverStateProps> | undefined = undefined): UseHoverStateReturnType => {\n  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props }\n\n  const [isHovered, setIsHovered] = useState(false)\n  const [timer, setTimer] = useState<NodeJS.Timeout>()\n\n  const onMouseEnter = () => {\n    if (isDisabled) {\n      return\n    }\n    clearTimeout(timer)\n    setIsHovered(true)\n  }\n\n  const onMouseLeave = () => {\n    if (isDisabled) {\n      return\n    }\n    setTimer(setTimeout(() => {\n      setIsHovered(false)\n    }, closingDelay))\n  }\n\n  useEffect(() => {\n    if (timer) {\n      return () => {\n        clearTimeout(timer)\n      }\n    }\n  })\n\n  useEffect(() => {\n    if (timer) {\n      clearTimeout(timer)\n    }\n  }, [isDisabled]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return {\n    isHovered, setIsHovered, handlers: { onMouseEnter, onMouseLeave }\n  }\n}\n","import type { RefObject } from 'react'\nimport { useEffect } from 'react'\n\nexport const useOutsideClick = <Ts extends RefObject<HTMLElement>[]>(refs: Ts, handler: () => void) => {\n  useEffect(() => {\n    const listener = (event: MouseEvent | TouchEvent) => {\n      // returning means not \"not clicking outside\"\n\n      // if no target exists, return\n      if (event.target === null) return\n      // if the target is a ref's element or descendent thereof, return\n      if (refs.some((ref) => !ref.current || ref.current.contains(event.target as Node))) {\n        return\n      }\n\n      handler()\n    }\n    document.addEventListener('mousedown', listener)\n    document.addEventListener('touchstart', listener)\n    return () => {\n      document.removeEventListener('mousedown', listener)\n      document.removeEventListener('touchstart', listener)\n    }\n  }, [refs, handler])\n}\n"],"mappings":"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","names":["useEffect","useState","useEffect","useState","useEffect"]}