@helpwave/hightide 0.1.18 → 0.1.20

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

@@ -111,7 +111,62 @@ var BagFunctionUtil = {
   resolve
 };
 
+// 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/components/user-action/Menu.tsx
+var import_react_dom = require("react-dom");
 var import_jsx_runtime = require("react/jsx-runtime");
 var MenuItem = ({
   children,
@@ -122,7 +177,7 @@ var MenuItem = ({
 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   "div",
   {
-    className: (0, import_clsx.default)("block px-3 py-1.5 bg-menu-background first:rounded-t-lg last:rounded-b-lg text-sm font-semibold", {
+    className: (0, import_clsx.default)("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold", {
       "text-right": alignment === "right",
       "text-left": alignment === "left",
       "text-disabled-text cursor-not-allowed": isDisabled,
@@ -133,47 +188,89 @@ var MenuItem = ({
     children
   }
 );
+function getScrollableParents(element) {
+  const scrollables = [];
+  let parent = element.parentElement;
+  while (parent) {
+    scrollables.push(parent);
+    parent = parent.parentElement;
+  }
+  return scrollables;
+}
 var Menu = ({
   trigger,
   children,
-  alignment = "tl",
+  alignmentHorizontal = "leftInside",
+  alignmentVertical = "bottomOutside",
   showOnHover = false,
+  disabled = false,
   menuClassName = ""
 }) => {
-  const { isHovered: isOpen, setIsHovered: setIsOpen, handlers } = useHoverState({ isDisabled: !showOnHover });
+  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 bag = { isOpen, close: () => setIsOpen(false) };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
-    {
-      className: "relative",
-      ...handlers,
-      children: [
-        trigger(() => setIsOpen(!isOpen), triggerRef),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
+  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 z-10",
           {
-            ref: menuRef,
-            onClick: (e) => e.stopPropagation(),
-            className: (0, import_clsx.default)(
-              "absolute top-full mt-1 min-w-40 rounded-lg bg-menu-background text-menu-text shadow-around-lg z-10",
-              {
-                "top-0": alignment[0] === "t",
-                "bottom-0": alignment[0] === "b",
-                "left-0": alignment[1] === "l",
-                "right-0": alignment[1] === "r",
-                "hidden": !isOpen
-              },
-              menuClassName
-            ),
-            children: BagFunctionUtil.resolve(children, bag)
+            "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 = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/user-action/Menu.tsx","../../../src/hooks/useOutsideClick.ts","../../../src/hooks/useHoverState.ts","../../../src/util/PropsWithFunctionChildren.ts"],"sourcesContent":["import { type PropsWithChildren, type ReactNode, type RefObject, useRef } from 'react'\nimport clsx from 'clsx'\nimport { useOutsideClick } from '../../hooks/useOutsideClick'\nimport { useHoverState } from '../../hooks/useHoverState'\nimport type { PropsWithBagFunctionOrChildren } from '../../util/PropsWithFunctionChildren'\nimport { BagFunctionUtil } from '../../util/PropsWithFunctionChildren'\n\nexport type MenuItemProps = {\n  onClick?: () => void,\n  alignment?: 'left' | 'right',\n  isDisabled?: boolean,\n  className?: string,\n}\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 bg-menu-background first:rounded-t-lg last:rounded-b-lg text-sm font-semibold', {\n      'text-right': alignment === 'right',\n      'text-left': alignment === 'left',\n      'text-disabled-text 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\ntype MenuBag = {\n  isOpen: boolean,\n  close: () => void,\n}\n\nexport type MenuProps<T> = PropsWithBagFunctionOrChildren<MenuBag> & {\n  trigger: (onClick: () => void, ref: RefObject<T>) => ReactNode,\n  /**\n   * @default 'tl'\n   */\n  alignment?: 'tl' | 'tr' | 'bl' | 'br' | '_l' | '_r' | 't_' | 'b_',\n  showOnHover?: boolean,\n  menuClassName?: string,\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                                              alignment = 'tl',\n                                              showOnHover = false,\n                                              menuClassName = '',\n                                            }: MenuProps<T>) => {\n  const { isHovered: isOpen, setIsHovered: setIsOpen, handlers } = useHoverState({ isDisabled: !showOnHover })\n  const triggerRef = useRef<T>(null)\n  const menuRef = useRef<HTMLDivElement>(null)\n  useOutsideClick([triggerRef, menuRef], () => setIsOpen(false))\n\n  const bag: MenuBag = { isOpen, close: () => setIsOpen(false) }\n\n  return (\n    <div\n      className=\"relative\"\n      {...handlers}\n    >\n      {trigger(() => setIsOpen(!isOpen), triggerRef)}\n      <div\n        ref={menuRef}\n        onClick={e => e.stopPropagation()}\n        className={clsx(\n          'absolute top-full mt-1 min-w-40 rounded-lg bg-menu-background text-menu-text shadow-around-lg z-10',\n          {\n            'top-0': alignment[0] === 't',\n            'bottom-0': alignment[0] === 'b',\n            'left-0': alignment[1] === 'l',\n            'right-0': alignment[1] === 'r',\n            'hidden': !isOpen,\n          },\n          menuClassName\n        )}\n      >\n        {BagFunctionUtil.resolve<MenuBag>(children, bag)}\n      </div>\n    </div>\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","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 { ReactNode } from 'react'\n\nexport type BagFunction<T> = (bag: T) => ReactNode\n\nexport type PropsWithBagFunction<T, P = unknown> =  P & { children?: BagFunction<T> }\n\nexport type PropsWithBagFunctionOrChildren<T, P = unknown> =  P & { children?: BagFunction<T> | ReactNode }\n\nconst resolve = <T>(children: BagFunction<T> | ReactNode, 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}"],"mappings":"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","names":["import_react","import_react","clsx"]}
+{"version":3,"sources":["../../../src/components/user-action/Menu.tsx","../../../src/hooks/useOutsideClick.ts","../../../src/hooks/useHoverState.ts","../../../src/util/PropsWithFunctionChildren.ts","../../../src/hooks/usePopoverPosition.ts"],"sourcesContent":["import {\n  type PropsWithChildren,\n  type ReactNode,\n  type RefObject,\n  useEffect,\n  useRef, useState\n} from 'react'\nimport clsx from 'clsx'\nimport { useOutsideClick } from '../../hooks/useOutsideClick'\nimport { useHoverState } from '../../hooks/useHoverState'\nimport type { PropsWithBagFunctionOrChildren } from '../../util/PropsWithFunctionChildren'\nimport { BagFunctionUtil } from '../../util/PropsWithFunctionChildren'\nimport type { PopoverHorizontalAlignment, PopoverVerticalAlignment } from '../../hooks/usePopoverPosition'\nimport { usePopoverPosition } from '../../hooks/usePopoverPosition'\nimport { createPortal } from 'react-dom'\n\nexport type MenuItemProps = {\n  onClick?: () => void,\n  alignment?: 'left' | 'right',\n  isDisabled?: boolean,\n  className?: string,\n}\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', {\n      'text-right': alignment === 'right',\n      'text-left': alignment === 'left',\n      'text-disabled-text 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((<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 z-10',\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>), document.body)}\n    </>\n  )\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","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 { ReactNode } from 'react'\n\nexport type BagFunction<T> = (bag: T) => ReactNode\n\nexport type PropsWithBagFunction<T, P = unknown> =  P & { children?: BagFunction<T> }\n\nexport type PropsWithBagFunctionOrChildren<T, P = unknown> =  P & { children?: BagFunction<T> | ReactNode }\n\nconst resolve = <T>(children: BagFunction<T> | ReactNode, 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}"],"mappings":"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","names":["import_react","import_react","clsx"]}

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

@@ -1,5 +1,9 @@
 // src/components/user-action/Menu.tsx
-import { useRef } from "react";
+import {
+  useEffect as useEffect3,
+  useRef,
+  useState as useState2
+} from "react";
 import clsx from "clsx";
 
 // src/hooks/useOutsideClick.ts
@@ -77,8 +81,63 @@ var BagFunctionUtil = {
   resolve
 };
 
+// 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/components/user-action/Menu.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var MenuItem = ({
   children,
   onClick,
@@ -88,7 +147,7 @@ var MenuItem = ({
 }) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: clsx("block px-3 py-1.5 bg-menu-background first:rounded-t-lg last:rounded-b-lg text-sm font-semibold", {
+    className: clsx("block px-3 py-1.5 first:rounded-t-md last:rounded-b-md text-sm font-semibold", {
       "text-right": alignment === "right",
       "text-left": alignment === "left",
       "text-disabled-text cursor-not-allowed": isDisabled,
@@ -99,47 +158,89 @@ var MenuItem = ({
     children
   }
 );
+function getScrollableParents(element) {
+  const scrollables = [];
+  let parent = element.parentElement;
+  while (parent) {
+    scrollables.push(parent);
+    parent = parent.parentElement;
+  }
+  return scrollables;
+}
 var Menu = ({
   trigger,
   children,
-  alignment = "tl",
+  alignmentHorizontal = "leftInside",
+  alignmentVertical = "bottomOutside",
   showOnHover = false,
+  disabled = false,
   menuClassName = ""
 }) => {
-  const { isHovered: isOpen, setIsHovered: setIsOpen, handlers } = useHoverState({ isDisabled: !showOnHover });
+  const { isHovered: isOpen, setIsHovered: setIsOpen } = useHoverState({ isDisabled: !showOnHover || disabled });
   const triggerRef = useRef(null);
   const menuRef = useRef(null);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
-  const bag = { isOpen, close: () => setIsOpen(false) };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "relative",
-      ...handlers,
-      children: [
-        trigger(() => setIsOpen(!isOpen), triggerRef),
-        /* @__PURE__ */ jsx(
-          "div",
+  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 z-10",
           {
-            ref: menuRef,
-            onClick: (e) => e.stopPropagation(),
-            className: clsx(
-              "absolute top-full mt-1 min-w-40 rounded-lg bg-menu-background text-menu-text shadow-around-lg z-10",
-              {
-                "top-0": alignment[0] === "t",
-                "bottom-0": alignment[0] === "b",
-                "left-0": alignment[1] === "l",
-                "right-0": alignment[1] === "r",
-                "hidden": !isOpen
-              },
-              menuClassName
-            ),
-            children: BagFunctionUtil.resolve(children, bag)
+            "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,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/user-action/Menu.tsx","../../../src/hooks/useOutsideClick.ts","../../../src/hooks/useHoverState.ts","../../../src/util/PropsWithFunctionChildren.ts"],"sourcesContent":["import { type PropsWithChildren, type ReactNode, type RefObject, useRef } from 'react'\nimport clsx from 'clsx'\nimport { useOutsideClick } from '../../hooks/useOutsideClick'\nimport { useHoverState } from '../../hooks/useHoverState'\nimport type { PropsWithBagFunctionOrChildren } from '../../util/PropsWithFunctionChildren'\nimport { BagFunctionUtil } from '../../util/PropsWithFunctionChildren'\n\nexport type MenuItemProps = {\n  onClick?: () => void,\n  alignment?: 'left' | 'right',\n  isDisabled?: boolean,\n  className?: string,\n}\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 bg-menu-background first:rounded-t-lg last:rounded-b-lg text-sm font-semibold', {\n      'text-right': alignment === 'right',\n      'text-left': alignment === 'left',\n      'text-disabled-text 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\ntype MenuBag = {\n  isOpen: boolean,\n  close: () => void,\n}\n\nexport type MenuProps<T> = PropsWithBagFunctionOrChildren<MenuBag> & {\n  trigger: (onClick: () => void, ref: RefObject<T>) => ReactNode,\n  /**\n   * @default 'tl'\n   */\n  alignment?: 'tl' | 'tr' | 'bl' | 'br' | '_l' | '_r' | 't_' | 'b_',\n  showOnHover?: boolean,\n  menuClassName?: string,\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                                              alignment = 'tl',\n                                              showOnHover = false,\n                                              menuClassName = '',\n                                            }: MenuProps<T>) => {\n  const { isHovered: isOpen, setIsHovered: setIsOpen, handlers } = useHoverState({ isDisabled: !showOnHover })\n  const triggerRef = useRef<T>(null)\n  const menuRef = useRef<HTMLDivElement>(null)\n  useOutsideClick([triggerRef, menuRef], () => setIsOpen(false))\n\n  const bag: MenuBag = { isOpen, close: () => setIsOpen(false) }\n\n  return (\n    <div\n      className=\"relative\"\n      {...handlers}\n    >\n      {trigger(() => setIsOpen(!isOpen), triggerRef)}\n      <div\n        ref={menuRef}\n        onClick={e => e.stopPropagation()}\n        className={clsx(\n          'absolute top-full mt-1 min-w-40 rounded-lg bg-menu-background text-menu-text shadow-around-lg z-10',\n          {\n            'top-0': alignment[0] === 't',\n            'bottom-0': alignment[0] === 'b',\n            'left-0': alignment[1] === 'l',\n            'right-0': alignment[1] === 'r',\n            'hidden': !isOpen,\n          },\n          menuClassName\n        )}\n      >\n        {BagFunctionUtil.resolve<MenuBag>(children, bag)}\n      </div>\n    </div>\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","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 { ReactNode } from 'react'\n\nexport type BagFunction<T> = (bag: T) => ReactNode\n\nexport type PropsWithBagFunction<T, P = unknown> =  P & { children?: BagFunction<T> }\n\nexport type PropsWithBagFunctionOrChildren<T, P = unknown> =  P & { children?: BagFunction<T> | ReactNode }\n\nconst resolve = <T>(children: BagFunction<T> | ReactNode, 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}"],"mappings":"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","names":["useEffect"]}
+{"version":3,"sources":["../../../src/components/user-action/Menu.tsx","../../../src/hooks/useOutsideClick.ts","../../../src/hooks/useHoverState.ts","../../../src/util/PropsWithFunctionChildren.ts","../../../src/hooks/usePopoverPosition.ts"],"sourcesContent":["import {\n  type PropsWithChildren,\n  type ReactNode,\n  type RefObject,\n  useEffect,\n  useRef, useState\n} from 'react'\nimport clsx from 'clsx'\nimport { useOutsideClick } from '../../hooks/useOutsideClick'\nimport { useHoverState } from '../../hooks/useHoverState'\nimport type { PropsWithBagFunctionOrChildren } from '../../util/PropsWithFunctionChildren'\nimport { BagFunctionUtil } from '../../util/PropsWithFunctionChildren'\nimport type { PopoverHorizontalAlignment, PopoverVerticalAlignment } from '../../hooks/usePopoverPosition'\nimport { usePopoverPosition } from '../../hooks/usePopoverPosition'\nimport { createPortal } from 'react-dom'\n\nexport type MenuItemProps = {\n  onClick?: () => void,\n  alignment?: 'left' | 'right',\n  isDisabled?: boolean,\n  className?: string,\n}\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', {\n      'text-right': alignment === 'right',\n      'text-left': alignment === 'left',\n      'text-disabled-text 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((<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 z-10',\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>), document.body)}\n    </>\n  )\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","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 { ReactNode } from 'react'\n\nexport type BagFunction<T> = (bag: T) => ReactNode\n\nexport type PropsWithBagFunction<T, P = unknown> =  P & { children?: BagFunction<T> }\n\nexport type PropsWithBagFunctionOrChildren<T, P = unknown> =  P & { children?: BagFunction<T> | ReactNode }\n\nconst resolve = <T>(children: BagFunction<T> | ReactNode, 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}"],"mappings":"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","names":["useEffect","useState","useEffect","useState","useEffect"]}

package/dist/components/user-action/MultiSelect.d.mts

@@ -4,7 +4,12 @@ import { PropsForTranslation } from '../../localization/useTranslation.mjs';
 import { LabelProps } from './Label.mjs';
 import { SelectOption } from './Select.mjs';
 import { FormTranslationType } from '../../localization/defaults/form.mjs';
+import { MenuProps, MenuBag } from './Menu.mjs';
+import { UseSearchProps } from '../../hooks/useSearch.mjs';
 import '../../localization/util.mjs';
+import '../layout-and-navigation/Tile.mjs';
+import '../../util/PropsWithFunctionChildren.mjs';
+import '../../hooks/usePopoverPosition.mjs';
 
 type MultiSelectAddonTranslation = {
     selected: string;
@@ -13,21 +18,26 @@ type MultiSelectTranslation = MultiSelectAddonTranslation & FormTranslationType;
 type MultiSelectOption<T> = SelectOption<T> & {
     selected: boolean;
 };
-type MultiSelectProps<T> = {
+type MultiSelectBag = MenuBag & {
+    search: string;
+};
+type MultiSelectProps<T> = Omit<MenuProps<HTMLButtonElement>, 'trigger' | 'children'> & {
     options: MultiSelectOption<T>[];
     label?: LabelProps;
     onChange: (options: MultiSelectOption<T>[]) => void;
     hintText?: string;
-    isDisabled?: boolean;
-    isSearchEnabled?: boolean;
-    className?: string;
-    useChipDisplay?: boolean;
     selectedDisplayOverwrite?: ReactNode;
+    searchOptions?: Omit<UseSearchProps<SelectOption<T>>, 'list' | 'searchMapping'>;
+    additionalItems?: (bag: MultiSelectBag) => ReactNode;
+    useChipDisplay?: boolean;
+    className?: string;
+    triggerClassName?: string;
+    hintTextClassName?: string;
 };
 /**
  * A Component for multi selection
  */
-declare const MultiSelect: <T>({ overwriteTranslation, options, label, onChange, hintText, isDisabled, isSearchEnabled, selectedDisplayOverwrite, useChipDisplay, className, }: PropsForTranslation<MultiSelectTranslation, MultiSelectProps<T>>) => react_jsx_runtime.JSX.Element;
+declare const MultiSelect: <T>({ overwriteTranslation, label, options, onChange, hintText, selectedDisplayOverwrite, searchOptions, additionalItems, useChipDisplay, className, triggerClassName, hintTextClassName, ...menuProps }: PropsForTranslation<MultiSelectTranslation, MultiSelectProps<T>>) => react_jsx_runtime.JSX.Element;
 declare const MultiSelectUncontrolled: <T>({ options, onChange, ...props }: PropsForTranslation<MultiSelectTranslation, MultiSelectProps<T>>) => react_jsx_runtime.JSX.Element;
 
-export { MultiSelect, type MultiSelectOption, type MultiSelectProps, MultiSelectUncontrolled };
+export { MultiSelect, type MultiSelectBag, type MultiSelectOption, type MultiSelectProps, MultiSelectUncontrolled };

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

@@ -4,7 +4,12 @@ import { PropsForTranslation } from '../../localization/useTranslation.js';
 import { LabelProps } from './Label.js';
 import { SelectOption } from './Select.js';
 import { FormTranslationType } from '../../localization/defaults/form.js';
+import { MenuProps, MenuBag } from './Menu.js';
+import { UseSearchProps } from '../../hooks/useSearch.js';
 import '../../localization/util.js';
+import '../layout-and-navigation/Tile.js';
+import '../../util/PropsWithFunctionChildren.js';
+import '../../hooks/usePopoverPosition.js';
 
 type MultiSelectAddonTranslation = {
     selected: string;
@@ -13,21 +18,26 @@ type MultiSelectTranslation = MultiSelectAddonTranslation & FormTranslationType;
 type MultiSelectOption<T> = SelectOption<T> & {
     selected: boolean;
 };
-type MultiSelectProps<T> = {
+type MultiSelectBag = MenuBag & {
+    search: string;
+};
+type MultiSelectProps<T> = Omit<MenuProps<HTMLButtonElement>, 'trigger' | 'children'> & {
     options: MultiSelectOption<T>[];
     label?: LabelProps;
     onChange: (options: MultiSelectOption<T>[]) => void;
     hintText?: string;
-    isDisabled?: boolean;
-    isSearchEnabled?: boolean;
-    className?: string;
-    useChipDisplay?: boolean;
     selectedDisplayOverwrite?: ReactNode;
+    searchOptions?: Omit<UseSearchProps<SelectOption<T>>, 'list' | 'searchMapping'>;
+    additionalItems?: (bag: MultiSelectBag) => ReactNode;
+    useChipDisplay?: boolean;
+    className?: string;
+    triggerClassName?: string;
+    hintTextClassName?: string;
 };
 /**
  * A Component for multi selection
  */
-declare const MultiSelect: <T>({ overwriteTranslation, options, label, onChange, hintText, isDisabled, isSearchEnabled, selectedDisplayOverwrite, useChipDisplay, className, }: PropsForTranslation<MultiSelectTranslation, MultiSelectProps<T>>) => react_jsx_runtime.JSX.Element;
+declare const MultiSelect: <T>({ overwriteTranslation, label, options, onChange, hintText, selectedDisplayOverwrite, searchOptions, additionalItems, useChipDisplay, className, triggerClassName, hintTextClassName, ...menuProps }: PropsForTranslation<MultiSelectTranslation, MultiSelectProps<T>>) => react_jsx_runtime.JSX.Element;
 declare const MultiSelectUncontrolled: <T>({ options, onChange, ...props }: PropsForTranslation<MultiSelectTranslation, MultiSelectProps<T>>) => react_jsx_runtime.JSX.Element;
 
-export { MultiSelect, type MultiSelectOption, type MultiSelectProps, MultiSelectUncontrolled };
+export { MultiSelect, type MultiSelectBag, type MultiSelectOption, type MultiSelectProps, MultiSelectUncontrolled };