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

package/cjs/index.js

@@ -344,7 +344,6 @@ 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 };
@@ -1623,34 +1622,29 @@ var showContextMenu = (e, menuDescriptors, handleContextMenuAction, {
 };
 
 // src/popup-menu/PopupMenu.tsx
+var import_vuu_ui_controls = require("@vuu-ui/vuu-ui-controls");
 var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
 var import_core2 = require("@salt-ds/core");
 var import_clsx7 = __toESM(require("clsx"));
+
+// src/popup-menu/usePopupMenu.ts
 var import_react14 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var classBase4 = "vuuPopupMenu";
-var PopupMenu = ({
+var usePopupMenu = ({
   anchorElement,
-  className,
-  label,
-  icon = label ? "chevron-down" : "more-vert",
-  id: idProp,
+  id,
   menuActionHandler,
   menuBuilder,
   menuClassName,
-  menuLocation = "header",
+  menuLocation,
   menuOptions,
   onMenuClose,
   onMenuOpen,
-  popupPlacement = "below-right",
-  tabIndex = 0,
-  ...htmlAttributes
+  popupPlacement,
+  tabIndex
 }) => {
-  const rootRef = (0, import_react14.useRef)(null);
-  const suppressShowMenuRef = (0, import_react14.useRef)(false);
   const [menuOpen, _setMenuOpen] = (0, import_react14.useState)(false);
-  const id = (0, import_vuu_utils7.useId)(idProp);
-  const [showContextMenu2] = useContextMenu(menuBuilder, menuActionHandler);
+  const suppressShowMenuRef = (0, import_react14.useRef)(false);
+  const rootRef = (0, import_react14.useRef)(null);
   const setMenuOpen = (0, import_react14.useCallback)(
     (isOpen) => {
       _setMenuOpen(isOpen);
@@ -1660,6 +1654,7 @@ var PopupMenu = ({
     },
     [onMenuOpen]
   );
+  const [showContextMenu2] = useContextMenu(menuBuilder, menuActionHandler);
   const handleOpenMenu = (0, import_react14.useCallback)((el) => {
     console.log(`menu Open `, {
       el
@@ -1731,26 +1726,94 @@ var PopupMenu = ({
       showContextMenu2
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    import_core2.Button,
-    {
-      ...htmlAttributes,
-      "aria-controls": menuOpen ? `${id}-menu` : void 0,
-      "aria-expanded": menuOpen,
-      "aria-haspopup": "menu",
-      className: (0, import_clsx7.default)(classBase4, className, {
-        [`${classBase4}-withCaption`]: label !== void 0,
-        [`${classBase4}-open`]: menuOpen
-      }),
-      "data-icon": icon,
-      id,
-      onClick: showMenu,
-      ref: rootRef,
-      tabIndex,
-      variant: "secondary",
-      children: label
-    }
-  );
+  const ariaAttributes = {
+    "aria-controls": menuOpen ? `${id}-menu` : void 0,
+    "aria-expanded": menuOpen,
+    "aria-haspopup": "menu"
+  };
+  const buttonProps = {
+    id,
+    onClick: showMenu,
+    tabIndex
+  };
+  return { ariaAttributes, buttonProps, menuOpen, rootRef };
+};
+
+// src/popup-menu/PopupMenu.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var classBase4 = "vuuPopupMenu";
+var PopupMenu = ({
+  anchorElement,
+  className,
+  disabled = false,
+  label,
+  icon = label ? "chevron-down" : "more-vert",
+  id: idProp,
+  menuActionHandler,
+  menuBuilder,
+  menuClassName,
+  menuLocation = "header",
+  menuOptions,
+  onMenuClose,
+  onMenuOpen,
+  popupPlacement = "below-right",
+  tabIndex = 0,
+  variant = "secondary",
+  ...htmlAttributes
+}) => {
+  const id = (0, import_vuu_utils7.useId)(idProp);
+  const { ariaAttributes, buttonProps, menuOpen, rootRef } = usePopupMenu({
+    anchorElement,
+    id,
+    menuActionHandler,
+    menuBuilder,
+    menuClassName,
+    menuLocation,
+    onMenuClose,
+    onMenuOpen,
+    menuOptions,
+    popupPlacement,
+    tabIndex
+  });
+  if (label) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      import_core2.Button,
+      {
+        ...htmlAttributes,
+        ...ariaAttributes,
+        ...buttonProps,
+        className: (0, import_clsx7.default)(classBase4, className, `${classBase4}-withCaption`, {
+          "saltButton-active": menuOpen
+        }),
+        disabled,
+        ref: rootRef,
+        variant: "secondary",
+        children: [
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_vuu_ui_controls.Icon, { name: icon }) : null,
+          label
+        ]
+      }
+    );
+  } else if (icon) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_vuu_ui_controls.IconButton,
+      {
+        ...htmlAttributes,
+        ...ariaAttributes,
+        ...buttonProps,
+        className: (0, import_clsx7.default)(classBase4, className, {
+          "saltButton-active": menuOpen
+        }),
+        disabled,
+        icon,
+        ref: rootRef,
+        variant
+      }
+    );
+  } else {
+    console.error("PopupMenu must have a label or an icon (or both)");
+    return null;
+  }
 };
 
 // src/prompt/Prompt.tsx