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

package/cjs/index.js

@@ -273,7 +273,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 > *");
@@ -334,8 +340,11 @@ var import_clsx4 = __toESM(require("clsx"));
 
 // src/popup/useAnchoredPosition.ts
 var import_react2 = require("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 };
@@ -368,10 +377,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,
@@ -466,7 +477,7 @@ var Dialog = ({
   } = PopupProps;
   const rootRef = (0, import_react3.useRef)(null);
   const portalRef = (0, import_react3.useRef)(null);
-  const [themeClass, densityClass, dataMode] = (0, import_vuu_utils.useThemeAttributes)();
+  const [themeClass, _, dataMode] = (0, import_vuu_utils.useThemeAttributes)();
   const { position } = useAnchoredPosition({
     anchorElement,
     offsetLeft,
@@ -810,13 +821,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");
       }
     },
     [
@@ -1323,8 +1334,6 @@ var ContextMenu = ({
   style,
   ...menuListProps
 }) => {
-  const closeHandlerRef = (0, import_react10.useRef)(onClose);
-  closeHandlerRef.current = onClose;
   const id = (0, import_vuu_utils5.useId)(idProp);
   const closeMenuRef = (0, import_react10.useRef)(noop);
   const [menus, actions] = useItemsWithIdsNext(childrenProp, id);
@@ -1359,10 +1368,19 @@ var ContextMenu = ({
     position
   });
   closeMenuRef.current = closeMenu;
-  const handleCloseMenu = () => {
-    navigatingWithKeyboard.current = true;
-    closeMenu();
-  };
+  const handleCloseMenu = (0, import_react10.useCallback)(
+    (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;
@@ -1580,8 +1598,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);
   };
@@ -1608,30 +1629,37 @@ var import_clsx7 = __toESM(require("clsx"));
 var import_react14 = require("react");
 var import_jsx_runtime9 = require("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 = (0, import_react14.useRef)(null);
   const suppressShowMenuRef = (0, import_react14.useRef)(false);
-  const [menuOpen, setMenuOpen] = (0, import_react14.useState)(false);
+  const [menuOpen, _setMenuOpen] = (0, import_react14.useState)(false);
   const id = (0, import_vuu_utils7.useId)(idProp);
   const [showContextMenu2] = useContextMenu(menuBuilder, menuActionHandler);
+  const setMenuOpen = (0, import_react14.useCallback)(
+    (isOpen) => {
+      _setMenuOpen(isOpen);
+      if (isOpen) {
+        onMenuOpen == null ? void 0 : onMenuOpen();
+      }
+    },
+    [onMenuOpen]
+  );
   const handleOpenMenu = (0, import_react14.useCallback)((el) => {
     console.log(`menu Open `, {
       el
@@ -1639,47 +1667,67 @@ var PopupMenu = ({
   }, []);
   const handleMenuClose = (0, import_react14.useCallback)(
     (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 = (0, import_react14.useCallback)(
     (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
     ]
   );
@@ -1687,7 +1735,7 @@ var PopupMenu = ({
     import_core2.Button,
     {
       ...htmlAttributes,
-      "aria-controls": `${id}-menu-root`,
+      "aria-controls": menuOpen ? `${id}-menu` : void 0,
       "aria-expanded": menuOpen,
       "aria-haspopup": "menu",
       className: (0, import_clsx7.default)(classBase4, className, {
@@ -1733,7 +1781,7 @@ var Prompt = ({
     offsetTop = 0,
     placement = "below"
   } = PopupProps;
-  const [themeClass, densityClass, dataMode] = (0, import_vuu_utils8.useThemeAttributes)();
+  const [themeClass, _, dataMode] = (0, import_vuu_utils8.useThemeAttributes)();
   const { position } = useAnchoredPosition({
     anchorElement,
     offsetLeft,