pixel-react-excel-sheet 1.0.33 → 1.0.34

package/lib/components/Excel/ExcelContextMenu/ExcelContextMenu.d.ts

@@ -2,6 +2,10 @@ import './ExcelContextMenu.scss';
 import { ContextMenuState } from '../ExcelFile/ExcelFileComponents/types';
 type ExcelContextMenuProps = {
     contextMenu: ContextMenuState;
+    position: {
+        x: number;
+        y: number;
+    };
 };
 declare const ExcelContextMenu: React.FC<ExcelContextMenuProps>;
 export default ExcelContextMenu;

package/lib/index.esm.js

@@ -33121,17 +33121,18 @@ const Spreadsheet = props => {
 var css_248z$l = ".ff-excel-sheet {\n  position: relative;\n  top: 0;\n}\n\n.ff-excel-sheet-bar {\n  position: static;\n  max-width: 100%;\n  margin-left: 60px;\n  display: flex;\n  height: 36px;\n  align-items: center;\n  color: var(--brand2-color);\n  box-shadow: 0px 0px 4px -1px var(--toggle-strip-shadow);\n}\n.ff-excel-sheet-bar .ff-excel-add-sheet-set {\n  position: relative;\n  background-color: var(--tab-bg-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  top: 0;\n  left: 0px;\n  height: 100%;\n}\n.ff-excel-sheet-bar .ff-excel-add-sheet-set .ff-excel-add-sheet-icon {\n  padding: 8px 10px;\n}\n.ff-excel-sheet-bar .ff-excel-tab-container {\n  height: 36px;\n  display: flex;\n  overflow-x: auto;\n  align-items: center;\n  scrollbar-width: none;\n}\n.ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list {\n  margin-top: 2px;\n  padding: 10px 9px;\n  min-width: max-content;\n  cursor: pointer;\n  display: flex;\n  background-color: var(--hover-color);\n}\n.ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list.active {\n  background-color: var(--excel-sheet-button-color);\n}\n.ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list:focus {\n  outline: none;\n  text-decoration: none;\n}";
 styleInject(css_248z$l);
 
-var css_248z$k = ".ff-excel-menu {\n  position: absolute;\n  border: 1px solid var(--option-card-border-color);\n  background: var(--option-card-bg-color);\n  border-radius: 4px;\n  margin: 2px;\n  min-height: 32px;\n  min-width: 111px;\n  white-space: nowrap;\n  z-index: 2000;\n}\n.ff-excel-menu .ff-excel-menu-options {\n  color: var(--text-color);\n  cursor: pointer;\n  border-radius: 3px;\n  display: flex;\n  align-items: center;\n  padding: 4px;\n  gap: 8px;\n}\n.ff-excel-menu .ff-excel-menu-options:hover {\n  background-color: var(--hover-color);\n}\n.ff-excel-menu .ff-excel-menu-options label {\n  cursor: pointer;\n}";
+var css_248z$k = ".ff-excel-menu {\n  position: fixed;\n  border: 1px solid var(--option-card-border-color);\n  background: var(--option-card-bg-color);\n  border-radius: 4px;\n  margin: 2px;\n  min-height: 32px;\n  min-width: 111px;\n  white-space: nowrap;\n  z-index: 2000;\n}\n.ff-excel-menu .ff-excel-menu-options {\n  color: var(--text-color);\n  cursor: pointer;\n  border-radius: 3px;\n  display: flex;\n  align-items: center;\n  padding: 4px;\n  gap: 8px;\n}\n.ff-excel-menu .ff-excel-menu-options:hover {\n  background-color: var(--hover-color);\n}\n.ff-excel-menu .ff-excel-menu-options label {\n  cursor: pointer;\n}";
 styleInject(css_248z$k);
 
 const ExcelContextMenu = ({
-  contextMenu
+  contextMenu,
+  position
 }) => {
   return jsx("div", {
     className: "ff-excel-menu",
     style: {
-      left: contextMenu.position.x,
-      top: contextMenu.position.y
+      left: position.x,
+      top: position.y
     },
     children: contextMenu.options.map(option => jsxs("div", {
       className: 'ff-excel-menu-options',
@@ -33198,6 +33199,10 @@ const ExcelFile = ({
     defaultSheet: [[EmptyRow]]
   });
   const [selectedSheetData, setSelectedSheetData] = useState([[EmptyRow]]);
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0
+  });
   const pageRef = useRef('');
   const sheetRef = useRef(null);
   const checkVal = val => {
@@ -33494,22 +33499,32 @@ const ExcelFile = ({
         handleSheetChange(name, index);
       }
     });
+    setPosition({
+      x: event.clientX - 350,
+      y: event.clientY
+    });
     setContextMenu({
       open: true,
       position: {
-        x: event.pageX,
-        y: event.pageY
+        x: event.clientX - 350,
+        y: event.clientY - 500
       },
       options: options
     });
   };
   return jsx(Fragment, {
     children: sheetNames.length > 0 && jsxs("div", {
+      ref: sheetRef,
+      onContextMenu: event => {
+        setPosition({
+          x: event.clientX - 350,
+          y: event.clientY
+        });
+      },
       style: {
-        position: "relative"
+        position: 'relative'
       },
       children: [jsx("div", {
-        ref: sheetRef,
         className: "ff-excel-sheet",
         children: jsx(Spreadsheet, {
           sheetHeight: sheetHeight,
@@ -33566,7 +33581,8 @@ const ExcelFile = ({
           }, name))
         })]
       }), contextMenu.open && jsx(ExcelContextMenu, {
-        contextMenu: contextMenu
+        contextMenu: contextMenu,
+        position: position
       }), jsx(Toastify, {})]
     })
   });