@vuu-ui/vuu-popups 0.8.22-debug → 0.8.23-debug

package/esm/index.js

@@ -210,7 +210,13 @@ var PopupService = class _PopupService {
       _PopupService.escapeKeyListener,
       true
     );
-    (_a = _PopupService == null ? void 0 : _PopupService.onClose) == null ? void 0 : _a.call(_PopupService, reason);
+    (_a = _PopupService == null ? void 0 : _PopupService.onClose) == null ? void 0 : _a.call(
+      _PopupService,
+      reason ? {
+        ...reason,
+        closedBy: "popup-service"
+      } : void 0
+    );
   }
   static keepWithinThePage(el, right = "auto") {
     const target = el.querySelector(".vuuPopupContainer > *");
@@ -271,8 +277,11 @@ import cx4 from "clsx";
 
 // src/popup/useAnchoredPosition.ts
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
+
+// src/popup/getPositionRelativeToAnchor.ts
 var getPositionRelativeToAnchor = (anchorElement, placement, offsetLeft, offsetTop, minWidth, dimensions) => {
   const { bottom, height, left, right, top, width } = anchorElement.getBoundingClientRect();
+  console.log({ top });
   switch (placement) {
     case "below":
       return { left: left + offsetLeft, top: bottom + offsetTop };
@@ -305,10 +314,12 @@ var getPositionRelativeToAnchor = (anchorElement, placement, offsetLeft, offsetT
       }
     default:
       throw Error(
-        "Popup getPositionRelativeToAnchor only supported placement values are below and right"
+        `Popup getPositionRelativeToAnchor non-supported placement value ${placement}`
       );
   }
 };
+
+// src/popup/useAnchoredPosition.ts
 var useAnchoredPosition = ({
   anchorElement,
   minWidth,
@@ -403,7 +414,7 @@ var Dialog = ({
   } = PopupProps;
   const rootRef = useRef2(null);
   const portalRef = useRef2(null);
-  const [themeClass, densityClass, dataMode] = useThemeAttributes();
+  const [themeClass, _, dataMode] = useThemeAttributes();
   const { position } = useAnchoredPosition({
     anchorElement,
     offsetLeft,
@@ -756,13 +767,13 @@ var useKeyboardNavigation = ({
           onOpenMenu == null ? void 0 : onOpenMenu(menuItemEl, true);
         }
       } else if (e.key === "ArrowLeft" && !isRoot(e.target)) {
-        onCloseMenu(highlightedIndex);
+        onCloseMenu(e, "close-child-menu");
       } else if (e.key === "Enter") {
         e.preventDefault();
         e.stopPropagation();
         onActivate && onActivate(highlightedIndex);
       } else if (e.key === "Tab") {
-        onCloseMenu(-1);
+        onCloseMenu(e, "tab-away");
       }
     },
     [
@@ -1274,8 +1285,6 @@ var ContextMenu = ({
   style,
   ...menuListProps
 }) => {
-  const closeHandlerRef = useRef7(onClose);
-  closeHandlerRef.current = onClose;
   const id = useId2(idProp);
   const closeMenuRef = useRef7(noop);
   const [menus, actions] = useItemsWithIdsNext(childrenProp, id);
@@ -1310,10 +1319,19 @@ var ContextMenu = ({
     position
   });
   closeMenuRef.current = closeMenu;
-  const handleCloseMenu = () => {
-    navigatingWithKeyboard.current = true;
-    closeMenu();
-  };
+  const handleCloseMenu = useCallback7(
+    (evt, reason) => {
+      navigatingWithKeyboard.current = true;
+      closeMenu();
+      if (reason === "tab-away") {
+        onClose({
+          event: evt,
+          type: "tab-away"
+        });
+      }
+    },
+    [closeMenu, onClose]
+  );
   const handleHighlightMenuItem = () => {
   };
   const lastMenu = openMenus.length - 1;
@@ -1534,8 +1552,11 @@ var showContextMenu = (e, menuDescriptors, handleContextMenuAction, {
   const handleClose = (reason) => {
     var _a;
     if (reasonIsMenuAction(reason)) {
+      if ((reason == null ? void 0 : reason.closedBy) === "popup-service") {
+        return;
+      }
       handleContextMenuAction(reason);
-      PopupService.hidePopup();
+      PopupService.hidePopup(reason);
     }
     (_a = contextMenuProps == null ? void 0 : contextMenuProps.onClose) == null ? void 0 : _a.call(contextMenuProps, reason);
   };
@@ -1566,30 +1587,37 @@ import {
 } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var classBase4 = "vuuPopupMenu";
-var getPosition2 = (element) => {
-  if (element) {
-    const { bottom, left } = element.getBoundingClientRect();
-    return { x: left, y: bottom + 6 };
-  }
-};
 var PopupMenu = ({
+  anchorElement,
   className,
   label,
   icon = label ? "chevron-down" : "more-vert",
   id: idProp,
   menuActionHandler,
   menuBuilder,
+  menuClassName,
   menuLocation = "header",
   menuOptions,
   onMenuClose,
+  onMenuOpen,
+  popupPlacement = "below-right",
   tabIndex = 0,
   ...htmlAttributes
 }) => {
   const rootRef = useRef8(null);
   const suppressShowMenuRef = useRef8(false);
-  const [menuOpen, setMenuOpen] = useState6(false);
+  const [menuOpen, _setMenuOpen] = useState6(false);
   const id = useId3(idProp);
   const [showContextMenu2] = useContextMenu(menuBuilder, menuActionHandler);
+  const setMenuOpen = useCallback10(
+    (isOpen) => {
+      _setMenuOpen(isOpen);
+      if (isOpen) {
+        onMenuOpen == null ? void 0 : onMenuOpen();
+      }
+    },
+    [onMenuOpen]
+  );
   const handleOpenMenu = useCallback10((el) => {
     console.log(`menu Open `, {
       el
@@ -1597,47 +1625,67 @@ var PopupMenu = ({
   }, []);
   const handleMenuClose = useCallback10(
     (reason) => {
+      console.log("onClose");
       setMenuOpen(false);
       if (reasonIsClickAway(reason)) {
         const target = reason.mouseEvt.target;
         if (target === rootRef.current) {
           suppressShowMenuRef.current = true;
         }
+        onMenuClose == null ? void 0 : onMenuClose(reason);
       } else {
         requestAnimationFrame(() => {
           var _a;
           onMenuClose == null ? void 0 : onMenuClose(reason);
-          if (tabIndex !== -1) {
+          if (tabIndex !== -1 && (reason == null ? void 0 : reason.type) !== "tab-away") {
             (_a = rootRef.current) == null ? void 0 : _a.focus();
           }
         });
       }
     },
-    [onMenuClose, tabIndex]
+    [onMenuClose, setMenuOpen, tabIndex]
   );
   const showMenu = useCallback10(
     (e) => {
+      var _a;
       if (suppressShowMenuRef.current) {
         suppressShowMenuRef.current = false;
       } else {
-        setMenuOpen(true);
-        showContextMenu2(e, menuLocation, {
-          ContextMenuProps: {
-            id: `${id}-menu`,
-            onClose: handleMenuClose,
-            openMenu: handleOpenMenu,
-            position: getPosition2(rootRef.current)
-          },
-          ...menuOptions
-        });
+        const anchorEl = (_a = anchorElement == null ? void 0 : anchorElement.current) != null ? _a : rootRef.current;
+        if (anchorEl) {
+          const {
+            left: x,
+            top: y,
+            width
+          } = getPositionRelativeToAnchor(anchorEl, popupPlacement, 0, 0);
+          setMenuOpen(true);
+          showContextMenu2(e, menuLocation, {
+            ContextMenuProps: {
+              className: menuClassName,
+              id: `${id}-menu`,
+              onClose: handleMenuClose,
+              openMenu: handleOpenMenu,
+              position: {
+                x,
+                y
+              },
+              style: { width: width ? width - 2 : void 0 }
+            },
+            ...menuOptions
+          });
+        }
       }
     },
     [
+      anchorElement,
       handleMenuClose,
       handleOpenMenu,
       id,
+      menuClassName,
       menuLocation,
       menuOptions,
+      popupPlacement,
+      setMenuOpen,
       showContextMenu2
     ]
   );
@@ -1645,7 +1693,7 @@ var PopupMenu = ({
     Button2,
     {
       ...htmlAttributes,
-      "aria-controls": `${id}-menu-root`,
+      "aria-controls": menuOpen ? `${id}-menu` : void 0,
       "aria-expanded": menuOpen,
       "aria-haspopup": "menu",
       className: cx7(classBase4, className, {
@@ -1691,7 +1739,7 @@ var Prompt = ({
     offsetTop = 0,
     placement = "below"
   } = PopupProps;
-  const [themeClass, densityClass, dataMode] = useThemeAttributes4();
+  const [themeClass, _, dataMode] = useThemeAttributes4();
   const { position } = useAnchoredPosition({
     anchorElement,
     offsetLeft,