pixel-react-excel-sheet 1.0.33 → 1.0.35

package/lib/index.js

@@ -33141,17 +33141,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 jsxRuntime.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 => jsxRuntime.jsxs("div", {
       className: 'ff-excel-menu-options',
@@ -33174,6 +33175,9 @@ const ExcelContextMenu = ({
 const ExcelFile = ({
   excelData,
   sheetHeight = '100%',
+  heightType = 'page',
+  contextHeight = 0,
+  contextWidth = 0,
   onSave = saveData => {
     saveData();
   }
@@ -33218,6 +33222,10 @@ const ExcelFile = ({
     defaultSheet: [[EmptyRow]]
   });
   const [selectedSheetData, setSelectedSheetData] = React.useState([[EmptyRow]]);
+  const [position, setPosition] = React.useState({
+    x: 0,
+    y: 0
+  });
   const pageRef = React.useRef('');
   const sheetRef = React.useRef(null);
   const checkVal = val => {
@@ -33526,7 +33534,15 @@ const ExcelFile = ({
   return jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: sheetNames.length > 0 && jsxRuntime.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: [jsxRuntime.jsx("div", {
         ref: sheetRef,
@@ -33586,7 +33602,8 @@ const ExcelFile = ({
           }, name))
         })]
       }), contextMenu.open && jsxRuntime.jsx(ExcelContextMenu, {
-        contextMenu: contextMenu
+        contextMenu: contextMenu,
+        position: position
       }), jsxRuntime.jsx(Toastify, {})]
     })
   });