pixel-react-excel-sheet 1.0.33 → 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.33",
+  "version": "1.0.35",
   "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

@@ -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();
   },
@@ -84,6 +90,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);
 
@@ -440,7 +451,14 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
   return (
     <>
       {sheetNames.length > 0 && (
-        <div style={{position:"relative"}}>
+        <div
+          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 ref={sheetRef} className="ff-excel-sheet">
             <Spreadsheet
               sheetHeight={sheetHeight}
@@ -501,7 +519,9 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
               ))}
             </div>
           </div>
-          {contextMenu.open && <ExcelContextMenu contextMenu={contextMenu} />}
+          {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: () => {},
   },