pixel-react-excel-sheet 1.0.34 → 1.0.35

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.34",
+  "version": "1.0.35",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

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

@@ -21,6 +21,8 @@ interface ExcelFileProps {
     sheets: WorkSheet[];
   };
 
+  heightType?: string;
+
   /** Optional: Provide context menu options for actions like right-click */
   contextOption?: {
     name: string;
@@ -33,7 +35,8 @@ interface ExcelFileProps {
 
   /** Callback function to save the Excel data */
   onSave?: (saveData: any) => void;
-
+  contextHeight?: number;
+  contextWidth?: number;
   /** Set your dynamic sheet Height*/
   sheetHeight?: string;
 }
@@ -41,6 +44,9 @@ interface ExcelFileProps {
 const ExcelFile: React.FC<ExcelFileProps> = ({
   excelData,
   sheetHeight = '100%',
+  heightType = 'page',
+  contextHeight = 0,
+  contextWidth = 0,
   onSave = (saveData) => {
     saveData();
   },
@@ -432,13 +438,11 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
       }
     });
 
-    setPosition({ x: event.clientX - 350, y: event.clientY });
-
     setContextMenu({
       open: true,
       position: {
-        x: event.clientX - 350,
-        y: event.clientY-500,
+        x: event.pageX,
+        y: event.pageY,
       },
       options: options,
     });
@@ -448,12 +452,14 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
     <>
       {sheetNames.length > 0 && (
         <div
-          ref={sheetRef}
-          onContextMenu={(event)=>{    setPosition({ x: event.clientX - 350, y: event.clientY });
-        }}
           style={{ position: 'relative' }}
+          onContextMenu={(event) => {
+            const xPosition = heightType === 'page' ? event.pageX : event.clientX;
+            const yPosition = heightType === 'page' ? event.pageY : event.clientY;
+            setPosition({ x: xPosition+contextWidth, y:yPosition+contextHeight});
+          }}
         >
-          <div className="ff-excel-sheet">
+          <div ref={sheetRef} className="ff-excel-sheet">
             <Spreadsheet
               sheetHeight={sheetHeight}
               setContextMenu={setContextMenu}
@@ -513,7 +519,9 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
               ))}
             </div>
           </div>
-          {contextMenu.open && <ExcelContextMenu contextMenu={contextMenu} position={position}/>}
+          {contextMenu.open && (
+            <ExcelContextMenu contextMenu={contextMenu} position={position} />
+          )}
           <Toastify />
         </div>
       )}

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

@@ -160,6 +160,9 @@ export const Default: Story = {
         action: () => {},
       },
     ],
+    heightType:"page",
+    contextHeight:0,
+    contextWidth:0,
     sheetHeight:"300px",
     onSave: () => {},
   },