@underverse-ui/underverse 1.0.160 → 1.0.161

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.160",
+  "version": "1.0.161",
   "sourceEntry": "src/index.ts",
   "totalExports": 232,
   "exports": [

package/dist/index.cjs

@@ -7779,6 +7779,23 @@ var DropdownMenu = ({
   const itemsRef = import_react14.default.useRef([]);
   const [activeIndex, setActiveIndex] = useResettingIndex(open);
   const parentMenu = import_react14.default.useContext(DropdownMenuContext);
+  const closeMenu = import_react14.default.useCallback(() => {
+    setOpen(false);
+    parentMenu?.closeMenu();
+  }, [parentMenu, setOpen]);
+  const getEnabledMenuItems = import_react14.default.useCallback(() => {
+    const menuEl = menuRef.current;
+    if (!menuEl) return [];
+    return Array.from(menuEl.querySelectorAll("[data-dropdown-menu-item]")).filter((el) => !el.disabled);
+  }, []);
+  const focusMenuItem = import_react14.default.useCallback((index) => {
+    const enabled = getEnabledMenuItems();
+    const item = enabled[index];
+    if (!item) return;
+    setActiveIndex(index);
+    item.focus();
+    item.scrollIntoView({ block: "nearest" });
+  }, [getEnabledMenuItems, setActiveIndex]);
   useShadCNAnimations();
   import_react14.default.useEffect(() => {
     if (!open) return;
@@ -7789,38 +7806,34 @@ var DropdownMenu = ({
       if (!active || !triggerEl || !menuEl) return;
       const isInMenu = menuEl.contains(active);
       const isOnTrigger = triggerEl.contains(active);
-      if (!isInMenu && !isOnTrigger) return;
-      const enabled = itemsRef.current.filter((el) => el && !el.disabled);
+      const enabled = getEnabledMenuItems();
       if (enabled.length === 0) return;
+      const currentIndex = enabled.findIndex((el) => el === active);
+      const baseIndex = currentIndex >= 0 ? currentIndex : activeIndex;
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        const next = (activeIndex + 1 + enabled.length) % enabled.length;
-        setActiveIndex(next);
-        enabled[next]?.focus();
+        const next = (baseIndex + 1 + enabled.length) % enabled.length;
+        focusMenuItem(next);
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
-        const prev = (activeIndex - 1 + enabled.length) % enabled.length;
-        setActiveIndex(prev);
-        enabled[prev]?.focus();
+        const prev = (baseIndex - 1 + enabled.length) % enabled.length;
+        focusMenuItem(prev);
       } else if (e.key === "Home") {
         e.preventDefault();
-        setActiveIndex(0);
-        enabled[0]?.focus();
+        focusMenuItem(0);
       } else if (e.key === "End") {
         e.preventDefault();
-        setActiveIndex(enabled.length - 1);
-        enabled[enabled.length - 1]?.focus();
+        focusMenuItem(enabled.length - 1);
+      } else if (e.key === "Escape" && (isInMenu || isOnTrigger)) {
+        e.preventDefault();
+        closeMenu();
       }
     };
-    document.addEventListener("keydown", handleKeyNav);
+    document.addEventListener("keydown", handleKeyNav, true);
     return () => {
-      document.removeEventListener("keydown", handleKeyNav);
+      document.removeEventListener("keydown", handleKeyNav, true);
     };
-  }, [open, activeIndex, setActiveIndex]);
-  const closeMenu = import_react14.default.useCallback(() => {
-    setOpen(false);
-    parentMenu?.closeMenu();
-  }, [parentMenu, setOpen]);
+  }, [open, activeIndex, closeMenu, focusMenuItem, getEnabledMenuItems]);
   const menuContext = import_react14.default.useMemo(
     () => ({
       closeMenu,
@@ -7845,6 +7858,7 @@ var DropdownMenu = ({
         onClick: () => handleItemClick(item.onClick),
         disabled: item.disabled,
         role: "menuitem",
+        "data-dropdown-menu-item": "",
         tabIndex: -1,
         style: {
           animationDelay: open ? `${Math.min(index * 20, 200)}ms` : "0ms"
@@ -7880,13 +7894,13 @@ var DropdownMenu = ({
         if (e.key === "ArrowDown") {
           e.preventDefault();
           setOpen(true);
-          requestAnimationFrame(() => itemsRef.current.find((el) => el && !el.disabled)?.focus());
+          requestAnimationFrame(() => focusMenuItem(0));
         } else if (e.key === "ArrowUp") {
           e.preventDefault();
           setOpen(true);
           requestAnimationFrame(() => {
-            const enabled = itemsRef.current.filter((el) => el && !el.disabled);
-            enabled[enabled.length - 1]?.focus();
+            const enabled = getEnabledMenuItems();
+            focusMenuItem(enabled.length - 1);
           });
         } else if (e.key === "Escape") {
           e.preventDefault();
@@ -7937,6 +7951,8 @@ var DropdownMenuItem = ({
       },
       disabled,
       onMouseDown: (e) => e.preventDefault(),
+      "data-dropdown-menu-item": "",
+      tabIndex: -1,
       className: cn(
         "flex w-full items-center gap-2 px-3 py-2 text-sm rounded-lg transition-colors group cursor-pointer",
         "hover:bg-accent hover:text-accent-foreground",
@@ -32210,9 +32226,14 @@ var CustomBubbleMenu = ({
 }) => {
   const SHOW_DELAY_MS = 180;
   const BUBBLE_MENU_OFFSET = 16;
+  const BUBBLE_MENU_ESTIMATED_HEIGHT = 44;
   const [isVisible, setIsVisible] = (0, import_react64.useState)(false);
   const [linkInputOpen, setLinkInputOpen] = (0, import_react64.useState)(false);
-  const [position, setPosition] = (0, import_react64.useState)({ top: 0, left: 0 });
+  const [position, setPosition] = (0, import_react64.useState)({
+    top: 0,
+    left: 0,
+    placement: "top"
+  });
   const menuRef = (0, import_react64.useRef)(null);
   const keepOpenRef = (0, import_react64.useRef)(false);
   const showTimeoutRef = (0, import_react64.useRef)(null);
@@ -32269,12 +32290,18 @@ var CustomBubbleMenu = ({
         return;
       }
       const viewportPadding = 8;
+      const menuHeight = menuRef.current?.getBoundingClientRect().height || BUBBLE_MENU_ESTIMATED_HEIGHT;
+      const editorTop = view.dom.getBoundingClientRect().top;
+      const selectionTop = Math.min(start.top, end.top);
+      const selectionBottom = Math.max(start.bottom, end.bottom);
+      const hasRoomAboveEditor = selectionTop - BUBBLE_MENU_OFFSET - menuHeight >= editorTop + viewportPadding;
+      const placement = hasRoomAboveEditor ? "top" : "bottom";
       const left = Math.min(
         window.innerWidth - viewportPadding,
         Math.max(viewportPadding, (start.left + end.left) / 2)
       );
-      const top = Math.max(viewportPadding, start.top - BUBBLE_MENU_OFFSET);
-      setPosition({ top, left });
+      const top = placement === "top" ? Math.max(viewportPadding, selectionTop - BUBBLE_MENU_OFFSET) : Math.min(window.innerHeight - viewportPadding, selectionBottom + BUBBLE_MENU_OFFSET);
+      setPosition({ top, left, placement });
       if (keepOpenRef.current) {
         clearShowTimeout();
         setIsVisible(true);
@@ -32319,7 +32346,7 @@ var CustomBubbleMenu = ({
         style: {
           top: `${position.top}px`,
           left: `${position.left}px`,
-          transform: "translate(-50%, -100%)"
+          transform: position.placement === "top" ? "translate(-50%, -100%)" : "translate(-50%, 0)"
         },
         onMouseDown: (e) => {
           const target = e.target;