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

package/esm/index.js

@@ -281,7 +281,6 @@ 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 };
@@ -1577,38 +1576,33 @@ var showContextMenu = (e, menuDescriptors, handleContextMenuAction, {
 };
 
 // src/popup-menu/PopupMenu.tsx
+import { Icon, IconButton } from "@vuu-ui/vuu-ui-controls";
 import { useId as useId3 } from "@vuu-ui/vuu-utils";
 import { Button as Button2 } from "@salt-ds/core";
 import cx7 from "clsx";
+
+// src/popup-menu/usePopupMenu.ts
 import {
   useCallback as useCallback10,
   useRef as useRef8,
   useState as useState6
 } from "react";
-import { jsx as jsx9 } from "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 = useRef8(null);
-  const suppressShowMenuRef = useRef8(false);
   const [menuOpen, _setMenuOpen] = useState6(false);
-  const id = useId3(idProp);
-  const [showContextMenu2] = useContextMenu(menuBuilder, menuActionHandler);
+  const suppressShowMenuRef = useRef8(false);
+  const rootRef = useRef8(null);
   const setMenuOpen = useCallback10(
     (isOpen) => {
       _setMenuOpen(isOpen);
@@ -1618,6 +1612,7 @@ var PopupMenu = ({
     },
     [onMenuOpen]
   );
+  const [showContextMenu2] = useContextMenu(menuBuilder, menuActionHandler);
   const handleOpenMenu = useCallback10((el) => {
     console.log(`menu Open `, {
       el
@@ -1689,26 +1684,94 @@ var PopupMenu = ({
       showContextMenu2
     ]
   );
-  return /* @__PURE__ */ jsx9(
-    Button2,
-    {
-      ...htmlAttributes,
-      "aria-controls": menuOpen ? `${id}-menu` : void 0,
-      "aria-expanded": menuOpen,
-      "aria-haspopup": "menu",
-      className: cx7(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
+import { jsx as jsx9, jsxs as jsxs3 } from "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 = useId3(idProp);
+  const { ariaAttributes, buttonProps, menuOpen, rootRef } = usePopupMenu({
+    anchorElement,
+    id,
+    menuActionHandler,
+    menuBuilder,
+    menuClassName,
+    menuLocation,
+    onMenuClose,
+    onMenuOpen,
+    menuOptions,
+    popupPlacement,
+    tabIndex
+  });
+  if (label) {
+    return /* @__PURE__ */ jsxs3(
+      Button2,
+      {
+        ...htmlAttributes,
+        ...ariaAttributes,
+        ...buttonProps,
+        className: cx7(classBase4, className, `${classBase4}-withCaption`, {
+          "saltButton-active": menuOpen
+        }),
+        disabled,
+        ref: rootRef,
+        variant: "secondary",
+        children: [
+          icon ? /* @__PURE__ */ jsx9(Icon, { name: icon }) : null,
+          label
+        ]
+      }
+    );
+  } else if (icon) {
+    return /* @__PURE__ */ jsx9(
+      IconButton,
+      {
+        ...htmlAttributes,
+        ...ariaAttributes,
+        ...buttonProps,
+        className: cx7(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
@@ -1716,7 +1779,7 @@ import { useThemeAttributes as useThemeAttributes4 } from "@vuu-ui/vuu-utils";
 import { Button as Button3 } from "@salt-ds/core";
 import cx8 from "clsx";
 import { useLayoutEffect as useLayoutEffect5, useRef as useRef9 } from "react";
-import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 var classBase5 = "vuuPrompt";
 var AnchorBody2 = { current: document.body };
 var EMPTY_PROPS2 = {};
@@ -1768,10 +1831,10 @@ var Prompt = ({
       "data-mode": dataMode,
       ref: rootRef,
       style: { ...style, ...position },
-      children: /* @__PURE__ */ jsxs3("form", { className: `${classBase5}-form`, children: [
+      children: /* @__PURE__ */ jsxs4("form", { className: `${classBase5}-form`, children: [
         /* @__PURE__ */ jsx10("div", { className: `${classBase5}-header`, "data-icon": icon, children: title }),
         /* @__PURE__ */ jsx10("div", { className: `${classBase5}-text`, children: text }),
-        /* @__PURE__ */ jsxs3("div", { className: `${classBase5}-buttonBar`, children: [
+        /* @__PURE__ */ jsxs4("div", { className: `${classBase5}-buttonBar`, children: [
           /* @__PURE__ */ jsx10(Button3, { onClick: onCancel, variant: "secondary", children: cancelButtonLabel }),
           /* @__PURE__ */ jsx10(Button3, { onClick: onConfirm, ref: confirmRef, value: "default", children: confirmButtonLabel })
         ] })
@@ -1954,7 +2017,7 @@ var useTooltip = ({
 import React4, { useState as useState9, useContext as useContext2, useCallback as useCallback12, useEffect } from "react";
 import classNames from "clsx";
 import { getUniqueId } from "@vuu-ui/vuu-utils";
-import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 var toastOffsetTop = 60;
 var toastDisplayDuration = 6e3;
 var horizontalTransitionDuration = 1e3;
@@ -1984,7 +2047,7 @@ var NotificationsProvider = (props) => {
       setNotifications((prev) => prev.filter((n) => n !== newNotification));
     }, toastDisplayDuration + horizontalTransitionDuration * 2);
   }, []);
-  return /* @__PURE__ */ jsxs4(NotificationsContext.Provider, { value: { notify }, children: [
+  return /* @__PURE__ */ jsxs5(NotificationsContext.Provider, { value: { notify }, children: [
     /* @__PURE__ */ jsx12(
       "div",
       {
@@ -2017,7 +2080,7 @@ var ToastNotification = (props) => {
       );
     }
   }, [animated]);
-  return /* @__PURE__ */ jsx12(Portal, { children: /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx12(Portal, { children: /* @__PURE__ */ jsxs5(
     "div",
     {
       className: classNames(`${classBase7}-toast`, notification.type),
@@ -2038,7 +2101,7 @@ var ToastNotification = (props) => {
             )
           }
         ),
-        /* @__PURE__ */ jsxs4("div", { className: `${classBase7}-toastContent`, children: [
+        /* @__PURE__ */ jsxs5("div", { className: `${classBase7}-toastContent`, children: [
           /* @__PURE__ */ jsx12("strong", { className: `${classBase7}-toastHeader`, children: notification.header }),
           /* @__PURE__ */ jsx12("div", { children: notification.body })
         ] })