@gingkoo/pandora-metabase 1.0.150 → 1.0.151

package/lib/cjs/components/right-click-menu.d.ts

@@ -12,5 +12,5 @@ interface SqbRightClickMenuProps {
     state?: RightClickMenuState | null;
     setState?: (state: RightClickMenuState | null) => void;
 }
-declare const SqbRightClickMenu: ({ popupZIndex, state, setState }: SqbRightClickMenuProps) => React.JSX.Element | null;
+declare const SqbRightClickMenu: ({ popupZIndex, state, setState }: SqbRightClickMenuProps) => React.ReactPortal | null;
 export default SqbRightClickMenu;

package/lib/cjs/components/right-click-menu.js

@@ -7,12 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.openSqbRightClickMenu = exports["default"] = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
+var _reactDom = _interopRequireDefault(require("react-dom"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("../utils");
 var _useProvider = require("../hooks/use-provider");
+var MENU_VIEWPORT_GAP = 8;
 var findRightClickTarget = function findRightClickTarget(target) {
   var element = target instanceof HTMLElement ? target : null;
   while (element) {
@@ -89,6 +92,18 @@ var SqbRightClickMenu = function SqbRightClickMenu(_ref) {
     rightClickMenu = _store$rightClickMenu === void 0 ? [] : _store$rightClickMenu;
   var rightClickMenuState = state === undefined ? store.rightClickMenuState : state;
   var setRightClickMenuState = setState || store.setRightClickMenuState;
+  var menuRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    menuContainer = _useState2[0],
+    setMenuContainer = _useState2[1];
+  var _useState3 = (0, _react.useState)({
+      left: 0,
+      top: 0
+    }),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    menuPosition = _useState4[0],
+    setMenuPosition = _useState4[1];
   var handleRightClickMenuItem = function () {
     var _ref2 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee(menuItem) {
       var _store$getRightClickM2;
@@ -147,12 +162,40 @@ var SqbRightClickMenu = function SqbRightClickMenu(_ref) {
       window.removeEventListener('resize', closeRightClickMenu);
     };
   }, [rightClickMenuState]);
+  (0, _react.useEffect)(function () {
+    if (!rightClickMenuState || typeof document === 'undefined') {
+      setMenuContainer(null);
+      return;
+    }
+    var container = document.createElement('div');
+    container.setAttribute('data-sqb-right-click-menu-container', 'true');
+    document.body.appendChild(container);
+    setMenuContainer(container);
+    return function () {
+      if (document.body.contains(container)) {
+        document.body.removeChild(container);
+      }
+    };
+  }, [rightClickMenuState]);
+  (0, _react.useLayoutEffect)(function () {
+    if (!rightClickMenuState) return;
+    var menuElement = menuRef.current;
+    var menuWidth = (menuElement === null || menuElement === void 0 ? void 0 : menuElement.offsetWidth) || 0;
+    var menuHeight = (menuElement === null || menuElement === void 0 ? void 0 : menuElement.offsetHeight) || 0;
+    var maxLeft = Math.max(MENU_VIEWPORT_GAP, window.innerWidth - menuWidth - MENU_VIEWPORT_GAP);
+    var maxTop = Math.max(MENU_VIEWPORT_GAP, window.innerHeight - menuHeight - MENU_VIEWPORT_GAP);
+    setMenuPosition({
+      left: Math.min(Math.max(rightClickMenuState.x, MENU_VIEWPORT_GAP), maxLeft),
+      top: Math.min(Math.max(rightClickMenuState.y, MENU_VIEWPORT_GAP), maxTop)
+    });
+  }, [rightClickMenuState, rightClickMenu.length, menuContainer]);
   if (!rightClickMenuState) return null;
-  return (0, _jsxRuntime.jsx)("div", {
+  var menuNode = (0, _jsxRuntime.jsx)("div", {
+    ref: menuRef,
     className: 'Sqb-right-click-menu',
     style: {
-      left: rightClickMenuState.x,
-      top: rightClickMenuState.y,
+      left: menuPosition.left,
+      top: menuPosition.top,
       zIndex: popupZIndex ? popupZIndex + 10 : 9999
     },
     onClick: function onClick(event) {
@@ -175,5 +218,7 @@ var SqbRightClickMenu = function SqbRightClickMenu(_ref) {
       }, menuItem.value);
     })
   });
+  if (!menuContainer) return null;
+  return _reactDom["default"].createPortal(menuNode, menuContainer);
 };
 var _default = exports["default"] = SqbRightClickMenu;

package/lib/es/components/right-click-menu.d.ts

@@ -12,5 +12,5 @@ interface SqbRightClickMenuProps {
     state?: RightClickMenuState | null;
     setState?: (state: RightClickMenuState | null) => void;
 }
-declare const SqbRightClickMenu: ({ popupZIndex, state, setState }: SqbRightClickMenuProps) => React.JSX.Element | null;
+declare const SqbRightClickMenu: ({ popupZIndex, state, setState }: SqbRightClickMenuProps) => React.ReactPortal | null;
 export default SqbRightClickMenu;

package/lib/es/components/right-click-menu.js

@@ -1,11 +1,14 @@
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
 import cx from 'classnames';
 import { normalizeLegacySummarizeForSave, splitByUnion } from '../utils';
 import { useStore } from '../hooks/use-provider';
+var MENU_VIEWPORT_GAP = 8;
 var findRightClickTarget = function findRightClickTarget(target) {
   var element = target instanceof HTMLElement ? target : null;
   while (element) {
@@ -82,6 +85,18 @@ var SqbRightClickMenu = function SqbRightClickMenu(_ref) {
     rightClickMenu = _store$rightClickMenu === void 0 ? [] : _store$rightClickMenu;
   var rightClickMenuState = state === undefined ? store.rightClickMenuState : state;
   var setRightClickMenuState = setState || store.setRightClickMenuState;
+  var menuRef = useRef(null);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    menuContainer = _useState2[0],
+    setMenuContainer = _useState2[1];
+  var _useState3 = useState({
+      left: 0,
+      top: 0
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    menuPosition = _useState4[0],
+    setMenuPosition = _useState4[1];
   var handleRightClickMenuItem = function () {
     var _ref2 = _asyncToGenerator(_regeneratorRuntime.mark(function _callee(menuItem) {
       var _store$getRightClickM2;
@@ -140,12 +155,40 @@ var SqbRightClickMenu = function SqbRightClickMenu(_ref) {
       window.removeEventListener('resize', closeRightClickMenu);
     };
   }, [rightClickMenuState]);
+  useEffect(function () {
+    if (!rightClickMenuState || typeof document === 'undefined') {
+      setMenuContainer(null);
+      return;
+    }
+    var container = document.createElement('div');
+    container.setAttribute('data-sqb-right-click-menu-container', 'true');
+    document.body.appendChild(container);
+    setMenuContainer(container);
+    return function () {
+      if (document.body.contains(container)) {
+        document.body.removeChild(container);
+      }
+    };
+  }, [rightClickMenuState]);
+  useLayoutEffect(function () {
+    if (!rightClickMenuState) return;
+    var menuElement = menuRef.current;
+    var menuWidth = (menuElement === null || menuElement === void 0 ? void 0 : menuElement.offsetWidth) || 0;
+    var menuHeight = (menuElement === null || menuElement === void 0 ? void 0 : menuElement.offsetHeight) || 0;
+    var maxLeft = Math.max(MENU_VIEWPORT_GAP, window.innerWidth - menuWidth - MENU_VIEWPORT_GAP);
+    var maxTop = Math.max(MENU_VIEWPORT_GAP, window.innerHeight - menuHeight - MENU_VIEWPORT_GAP);
+    setMenuPosition({
+      left: Math.min(Math.max(rightClickMenuState.x, MENU_VIEWPORT_GAP), maxLeft),
+      top: Math.min(Math.max(rightClickMenuState.y, MENU_VIEWPORT_GAP), maxTop)
+    });
+  }, [rightClickMenuState, rightClickMenu.length, menuContainer]);
   if (!rightClickMenuState) return null;
-  return _jsx("div", {
+  var menuNode = _jsx("div", {
+    ref: menuRef,
     className: 'Sqb-right-click-menu',
     style: {
-      left: rightClickMenuState.x,
-      top: rightClickMenuState.y,
+      left: menuPosition.left,
+      top: menuPosition.top,
       zIndex: popupZIndex ? popupZIndex + 10 : 9999
     },
     onClick: function onClick(event) {
@@ -168,5 +211,7 @@ var SqbRightClickMenu = function SqbRightClickMenu(_ref) {
       }, menuItem.value);
     })
   });
+  if (!menuContainer) return null;
+  return ReactDOM.createPortal(menuNode, menuContainer);
 };
 export default SqbRightClickMenu;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gingkoo/pandora-metabase",
-  "version": "1.0.150",
+  "version": "1.0.151",
   "description": "",
   "main": "lib/es/index.js",
   "module": "lib/es/index.js",