pixel-react-excel-sheet 1.0.33 → 1.0.34

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react-excel-sheet",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.0.33",
+  "version": "1.0.34",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.scss

@@ -1,5 +1,5 @@
 .ff-excel-menu {
-  position: absolute;
+  position: fixed;
   border: 1px solid var(--option-card-border-color);
   background: var(--option-card-bg-color);
   border-radius: 4px;

package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.tsx

@@ -5,13 +5,14 @@ import { ContextMenuState } from '../ExcelFile/ExcelFileComponents/types';
 
 type ExcelContextMenuProps = {
   contextMenu: ContextMenuState;
+  position:{ x: number; y: number }
 };
 
-const ExcelContextMenu: React.FC<ExcelContextMenuProps> = ({ contextMenu }) => {
+const ExcelContextMenu: React.FC<ExcelContextMenuProps> = ({ contextMenu,position}) => {
   return (
     <div
       className="ff-excel-menu"
-      style={{ left: contextMenu.position.x, top: contextMenu.position.y }}
+      style={{ left:position.x, top:position.y }}
     >
       {contextMenu.options.map((option) => (
         <div

package/src/components/Excel/ExcelFile/ExcelFile.tsx

@@ -84,6 +84,11 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     Matrix.Matrix<CellBase>
   >([[EmptyRow]]);
 
+  const [position, setPosition] = useState<{ x: number; y: number }>({
+    x: 0,
+    y: 0,
+  });
+
   const pageRef = useRef<string>('');
   const sheetRef = useRef<HTMLDivElement | null>(null);
 
@@ -427,11 +432,13 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
       }
     });
 
+    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,
     });
@@ -440,8 +447,13 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
   return (
     <>
       {sheetNames.length > 0 && (
-        <div style={{position:"relative"}}>
-          <div ref={sheetRef} className="ff-excel-sheet">
+        <div
+          ref={sheetRef}
+          onContextMenu={(event)=>{    setPosition({ x: event.clientX - 350, y: event.clientY });
+        }}
+          style={{ position: 'relative' }}
+        >
+          <div className="ff-excel-sheet">
             <Spreadsheet
               sheetHeight={sheetHeight}
               setContextMenu={setContextMenu}
@@ -501,7 +513,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
               ))}
             </div>
           </div>
-          {contextMenu.open && <ExcelContextMenu contextMenu={contextMenu} />}
+          {contextMenu.open && <ExcelContextMenu contextMenu={contextMenu} position={position}/>}
           <Toastify />
         </div>
       )}