@vuu-ui/vuu-context-menu 2.1.19-beta.1 → 2.1.19-beta.2

package/package.json

@@ -1,15 +1,15 @@
 {
-  "version": "2.1.19-beta.1",
+  "version": "2.1.19-beta.2",
   "author": "heswell",
   "type": "module",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "2.1.19-beta.1",
-    "@vuu-ui/vuu-protocol-types": "2.1.19-beta.1",
-    "@vuu-ui/vuu-table-types": "2.1.19-beta.1"
+    "@vuu-ui/vuu-data-types": "2.1.19-beta.2",
+    "@vuu-ui/vuu-protocol-types": "2.1.19-beta.2",
+    "@vuu-ui/vuu-table-types": "2.1.19-beta.2"
   },
   "dependencies": {
-    "@vuu-ui/vuu-utils": "2.1.19-beta.1",
+    "@vuu-ui/vuu-utils": "2.1.19-beta.2",
     "@salt-ds/core": "1.54.1",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1"
@@ -21,13 +21,12 @@
   },
   "files": [
     "README.md",
-    "esm",
-    "cjs",
+    "src",
     "/types"
   ],
   "exports": {
     ".": {
-      "import": "./index.js",
+      "import": "./src/index.js",
       "types": "./types/index.d.ts"
     }
   },

package/src/ContextMenu.css.js

@@ -0,0 +1,30 @@
+const css = `
+.vuuContextMenuPanel {
+  &:has([data-icon]) {
+    & .saltMenuItem {
+      padding-left: calc(var(--salt-spacing-400) + var(--salt-spacing-200));
+    }
+
+    & .saltMenuItem[data-icon]:after {
+      --vuu-icon-left: var(--salt-spacing-150);
+      --vuu-icon-top: var(--salt-spacing-150);
+    }
+
+    & .saltMenuItem[aria-haspopup="menu"]:after {
+      content: "";
+      background-color: var(--vuu-icon-color, var(--saltIcon-color, var(--salt-content-secondary-foreground)));
+      right: var(--salt-spacing-100);
+      height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
+      mask: var(--vuu-svg-triangle-right) center center / 8px 8px;
+      top: var(--salt-spacing-200);
+      width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));
+      position: absolute;
+      transform: rotate(315deg);
+      mask-repeat: no-repeat;
+    }
+  }
+}
+
+
+`;
+export default css;

package/src/ContextMenu.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { Menu, MenuPanel } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { menuItemsFromMenuDescriptors } from "./menu-utils.js";
+import ContextMenu from "./ContextMenu.css";
+const ContextMenu_ContextMenu = ({ menuHandler, menuItemDescriptors, onOpenChange, open, x, y })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-context-menu",
+        css: ContextMenu,
+        window: targetWindow
+    });
+    const virtualElement = {
+        getBoundingClientRect: ()=>({
+                width: 0,
+                height: 0,
+                x,
+                y,
+                top: y,
+                right: x,
+                bottom: y,
+                left: x
+            })
+    };
+    return /*#__PURE__*/ jsx(Menu, {
+        getVirtualElement: ()=>virtualElement,
+        onOpenChange: onOpenChange,
+        open: open,
+        children: /*#__PURE__*/ jsx(MenuPanel, {
+            className: "vuuContextMenuPanel",
+            children: menuItemsFromMenuDescriptors(menuItemDescriptors, menuHandler)
+        })
+    });
+};
+export { ContextMenu_ContextMenu as ContextMenu };

package/src/ContextMenuProvider.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useMemo, useState } from "react";
+const ContextMenuContext = /*#__PURE__*/ createContext(null);
+const Provider = ({ children, context, menuActionHandler, menuBuilder })=>{
+    const [contextMenu, setContextMenu] = useState(null);
+    const showContextMenu = useMemo(()=>{
+        if (context?.showContextMenu) return context.showContextMenu;
+        return (contextMenu)=>{
+            setContextMenu(contextMenu);
+        };
+    }, [
+        context
+    ]);
+    const menuBuilders = useMemo(()=>{
+        if (context?.menuBuilders && menuBuilder) return context.menuBuilders.concat(menuBuilder);
+        if (menuBuilder) return [
+            menuBuilder
+        ];
+        return context?.menuBuilders || [];
+    }, [
+        context,
+        menuBuilder
+    ]);
+    const handleMenuAction = useCallback((menuItemId, options)=>{
+        if (menuActionHandler?.(menuItemId, options)) return true;
+        if (context?.menuActionHandler?.(menuItemId, options)) return true;
+    }, [
+        context,
+        menuActionHandler
+    ]);
+    return /*#__PURE__*/ jsxs(ContextMenuContext.Provider, {
+        value: {
+            menuActionHandler: handleMenuAction,
+            menuBuilders,
+            showContextMenu
+        },
+        children: [
+            children,
+            contextMenu
+        ]
+    });
+};
+const ContextMenuProvider = ({ children, menuActionHandler, menuBuilder })=>/*#__PURE__*/ jsx(ContextMenuContext.Consumer, {
+        children: (parentContext)=>/*#__PURE__*/ jsx(Provider, {
+                context: parentContext,
+                menuActionHandler: menuActionHandler,
+                menuBuilder: menuBuilder,
+                children: children
+            })
+    });
+export { ContextMenuContext, ContextMenuProvider };

package/src/index.js

@@ -0,0 +1,3 @@
+export { ContextMenuProvider } from "./ContextMenuProvider.js";
+export { hasShowNotificationAction, isGroupMenuItemDescriptor, isOpenBulkEditResponse } from "./menu-utils.js";
+export { useContextMenu } from "./useContextMenu.js";

package/src/menu-utils.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu, MenuItem, MenuPanel, MenuTrigger } from "@salt-ds/core";
+const isGroupMenuItemDescriptor = (menuItem)=>void 0 !== menuItem && "children" in menuItem;
+const isOpenBulkEditResponse = (rpcResponse)=>"beginEditSession" === rpcResponse.rpcName;
+const hasShowNotificationAction = (res)=>res.action?.type === "SHOW_NOTIFICATION_ACTION";
+const menuItemsFromMenuDescriptors = (menuDescriptors, menuActionHandler)=>{
+    const fromDescriptor = (menuItem, index)=>isGroupMenuItemDescriptor(menuItem) ? /*#__PURE__*/ jsxs(Menu, {
+            children: [
+                /*#__PURE__*/ jsx(MenuTrigger, {
+                    children: /*#__PURE__*/ jsx(MenuItem, {
+                        children: menuItem.label
+                    })
+                }),
+                /*#__PURE__*/ jsx(MenuPanel, {
+                    className: "vuuContextMenuPanel",
+                    children: menuItem.children.map(fromDescriptor)
+                })
+            ]
+        }, index) : /*#__PURE__*/ jsx(MenuItem, {
+            className: menuItem.className,
+            "data-icon": menuItem.icon,
+            onClick: ()=>menuActionHandler(menuItem.id, menuItem.options),
+            children: menuItem.label
+        }, index);
+    return menuDescriptors.map(fromDescriptor);
+};
+export { hasShowNotificationAction, isGroupMenuItemDescriptor, isOpenBulkEditResponse, menuItemsFromMenuDescriptors };

package/src/useContextMenu.js

@@ -0,0 +1,58 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useContext } from "react";
+import { ContextMenu } from "./ContextMenu.js";
+import { ContextMenuContext } from "./ContextMenuProvider.js";
+const useContextMenu = (menuBuilder, menuActionHandler)=>{
+    const ctx = useContext(ContextMenuContext);
+    const buildMenuOptions = useCallback((menuBuilders, location, options)=>{
+        let results = [];
+        for (const menuBuilder of menuBuilders)results = results.concat(menuBuilder(location, options));
+        return results;
+    }, []);
+    const handleOpenChange = useCallback((open)=>{
+        if (!open) ctx?.showContextMenu(null);
+    }, [
+        ctx
+    ]);
+    const showContextMenu = useCallback((evt, location, options, { onOpenChange, x = evt.clientX, y = evt.clientY } = {
+        x: evt.clientX,
+        y: evt.clientY
+    })=>{
+        evt.stopPropagation?.();
+        evt.preventDefault?.();
+        const menuBuilders = [];
+        if (menuBuilder) menuBuilders.push(menuBuilder);
+        if (ctx && Array.isArray(ctx?.menuBuilders) && ctx.menuBuilders.length > 0) menuBuilders.push(...ctx.menuBuilders);
+        if (menuBuilders.length > 0) {
+            const menuItemDescriptors = buildMenuOptions(menuBuilders, location, options);
+            const menuHandler = (menuItemId, options)=>{
+                if (menuActionHandler?.(menuItemId, options) === true) return true;
+                return ctx?.menuActionHandler(menuItemId, options);
+            };
+            const localOpenChange = (isOpen)=>{
+                onOpenChange?.(isOpen);
+                handleOpenChange(isOpen);
+            };
+            if (menuItemDescriptors.length) {
+                ctx?.showContextMenu(/*#__PURE__*/ jsx(ContextMenu, {
+                    menuHandler: menuHandler,
+                    menuItemDescriptors: menuItemDescriptors,
+                    onOpenChange: localOpenChange,
+                    open: true,
+                    x: x,
+                    y: y
+                }));
+                return true;
+            }
+        } else console.warn("useContextMenu, no menuBuilders configured. These should be supplied via the ContextMenuProvider(s)");
+        return false;
+    }, [
+        buildMenuOptions,
+        ctx,
+        handleOpenChange,
+        menuActionHandler,
+        menuBuilder
+    ]);
+    return showContextMenu;
+};
+export { useContextMenu };