pixel-react-excel-sheet 1.0.34 → 1.0.36

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

package/src/components/Drawer/Drawer.stories.tsx

@@ -143,6 +143,7 @@ export const Controlled: Story = {
         <Drawer
           {...defaultArgs}
           isOpen={showModal}
+          onCollapes={(expand)=>{}}
           onClose={() => setShowModal(false)}
           isFooterRequired={true}
           _isExpanded={false}

package/src/components/Drawer/Drawer.tsx

@@ -19,6 +19,7 @@ const Drawer: FC<DrawerProps> = ({
   leftSecondaryButtonProps = {},
   showEditButton = false,
   onEdit = () => {},
+  onCollapes = () => {},
   overlay = false,
   isFooterRequired = true,
   footerContent = null,
@@ -48,6 +49,8 @@ const Drawer: FC<DrawerProps> = ({
   handleEsc(onClose);
 
   const toggleExpand = () => {
+    onCollapes(isExpanded)
+
     setIsExpanded((prev) => !prev);
   };
 

package/src/components/Drawer/Types.ts

@@ -158,4 +158,6 @@ export interface DrawerProps {
    * Custom overflow for the drawer
    */
   overflow?: string;
+  
+  onCollapes?:(value:boolean)=>void
 }

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();
   },
@@ -416,8 +422,10 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
 
   React.useEffect(() => {
     document.addEventListener('click', handleClickOutside);
+    document.addEventListener('contextmenu', handleClickOutside);
     return () => {
       document.removeEventListener('click', handleClickOutside);
+      document.removeEventListener('contextmenu', handleClickOutside);
     };
   }, [handleClickOutside]);
 
@@ -432,13 +440,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 +454,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 +521,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:-220,
+    contextWidth:-180,
     sheetHeight:"300px",
     onSave: () => {},
   },