pixel-react-excel-sheet 1.0.33 → 1.0.35

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/components/Excel/ExcelFile/ExcelFile.d.ts

@@ -5,6 +5,7 @@ interface ExcelFileProps {
     excelData: {
         sheets: WorkSheet[];
     };
+    heightType?: string;
     /** Optional: Provide context menu options for actions like right-click */
     contextOption?: {
         name: string;
@@ -15,6 +16,8 @@ interface ExcelFileProps {
     toolbar?: 'show' | 'disable' | 'hide';
     /** Callback function to save the Excel data */
     onSave?: (saveData: any) => void;
+    contextHeight?: number;
+    contextWidth?: number;
     /** Set your dynamic sheet Height*/
     sheetHeight?: string;
 }

package/lib/index.d.ts

@@ -2484,6 +2484,7 @@ interface ExcelFileProps {
     excelData: {
         sheets: WorkSheet[];
     };
+    heightType?: string;
     /** Optional: Provide context menu options for actions like right-click */
     contextOption?: {
         name: string;
@@ -2494,6 +2495,8 @@ interface ExcelFileProps {
     toolbar?: 'show' | 'disable' | 'hide';
     /** Callback function to save the Excel data */
     onSave?: (saveData: any) => void;
+    contextHeight?: number;
+    contextWidth?: number;
     /** Set your dynamic sheet Height*/
     sheetHeight?: string;
 }

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',
@@ -33154,6 +33155,9 @@ const ExcelContextMenu = ({
 const ExcelFile = ({
   excelData,
   sheetHeight = '100%',
+  heightType = 'page',
+  contextHeight = 0,
+  contextWidth = 0,
   onSave = saveData => {
     saveData();
   }
@@ -33198,6 +33202,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 => {
@@ -33506,7 +33514,15 @@ const ExcelFile = ({
   return jsx(Fragment, {
     children: sheetNames.length > 0 && jsxs("div", {
       style: {
-        position: "relative"
+        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
+        });
       },
       children: [jsx("div", {
         ref: sheetRef,
@@ -33566,7 +33582,8 @@ const ExcelFile = ({
           }, name))
         })]
       }), contextMenu.open && jsx(ExcelContextMenu, {
-        contextMenu: contextMenu
+        contextMenu: contextMenu,
+        position: position
       }), jsx(Toastify, {})]
     })
   });