pixel-react-excel-sheet 1.0.15 → 1.0.17

package/lib/index.esm.js

@@ -31180,10 +31180,7 @@ const CornerIndicator = ({
     onSelect();
   }, [onSelect]);
   return jsx("th", {
-    style: {
-      zIndex: '200'
-    },
-    className: classNames('ff-spreadsheet-header', {
+    className: classNames('ff-spreadsheet-header ff-spreadsheet-corner-header', {
       'ff-spreadsheet-header--selected': selected
     }),
     onClick: handleClick,
@@ -31270,34 +31267,60 @@ const ColumnIndicator = ({
       options: options
     });
   }, [onSelect, column, setContextMenu]);
-  return jsxs("th", {
-    style: {
-      minWidth: `${columnWidth}px`,
-      position: 'relative'
-    },
-    className: classNames('ff-spreadsheet-header', {
-      'ff-spreadsheet-header--selected': selected
-    }),
-    onClick: handleClick,
-    onContextMenu: contextClick,
-    tabIndex: 0,
-    children: [label !== undefined ? label : columnIndexToLabel(column), jsx("div", {
-      onMouseDown: onMouseDown,
-      onClick: () => activate$1({
-        row: -1,
-        column
-      }),
+  return (
+    // <th
+    //   style={{ minWidth: `${columnWidth}px`, position: 'relative' }} //Dynamic value, Inline Styling required
+    //   className={classNames('ff-spreadsheet-header', {
+    //     'ff-spreadsheet-header--selected': selected,
+    //   })}
+    //   onClick={handleClick}
+    //   onContextMenu={contextClick}
+    //   tabIndex={0}
+    // >
+    //   {label !== undefined ? label : columnIndexToLabel(column)}
+    //   <div
+    //     onMouseDown={onMouseDown}
+    //     onClick={() => activate({ row: -1, column })}
+    //     style={{
+    //       zIndex: 'inherit',
+    //       width: '2px',
+    //       position: 'absolute',
+    //       right: 0,
+    //       top: 0,
+    //       height: '100%',
+    //       cursor: 'ew-resize',
+    //     }}
+    //   />
+    // </th>
+    jsxs("th", {
       style: {
-        zIndex: 'inherit',
-        width: '2px',
-        position: 'absolute',
-        right: 0,
-        top: 0,
-        height: '100%',
-        cursor: 'ew-resize'
-      }
-    })]
-  });
+        minWidth: `${columnWidth}px`,
+        position: 'relative'
+      },
+      className: classNames('ff-spreadsheet-header', {
+        'ff-spreadsheet-header--selected': selected
+      }),
+      onClick: handleClick,
+      onContextMenu: contextClick,
+      tabIndex: 0,
+      children: [label !== undefined ? label : columnIndexToLabel(column), jsx("div", {
+        onMouseDown: onMouseDown,
+        onClick: () => activate$1({
+          row: -1,
+          column
+        }),
+        style: {
+          zIndex: 'inherit',
+          width: '2px',
+          position: 'absolute',
+          right: 0,
+          top: 0,
+          height: '100%',
+          cursor: 'ew-resize'
+        }
+      })]
+    })
+  );
 };
 const enhance$2 = ColumnIndicatorComponent => {
   return function ColumnIndicatorWrapper(props) {
@@ -31387,8 +31410,8 @@ const RowIndicator = ({
   return jsxs("th", {
     style: {
       height: `${rowHeight}px`,
-      minWidth: '60px',
-      position: 'relative'
+      minWidth: '60px'
+      // position: 'relative',
     },
     className: classNames('ff-spreadsheet-header', {
       'ff-spreadsheet-header--selected': selected
@@ -31796,7 +31819,7 @@ const Copied = () => {
   });
 };
 
-var css_248z$m = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-excel {\n  display: flex;\n  flex-direction: column;\n}\n.ff-excel .ff-excel-toolbar-container {\n  position: static;\n  top: 0;\n  background-color: var(--excel-toolbar-bg);\n  padding: 4px 8px;\n  margin-bottom: 20px;\n}\n.ff-excel .ff-spreadsheet {\n  --background-color: var(--drawer-footer-bg);\n  --text-color: var(--text-color);\n  --readonly-text-color: var(--toggle-strip-active);\n  --outline-color: var(--toggle-strip-active);\n  --outline-background-color: var(--overlay-bg);\n  --border-color: var(--excel-sheet-border);\n  --header-background-color: var(--pop-up-background-blur);\n  --elevation: var(--brand-color);\n  position: relative;\n  overflow: scroll;\n  background: var(--background-color);\n  color: var(--text-color);\n  scrollbar-width: none;\n  display: inline-block;\n}\n.ff-excel .ff-spreadsheet::-webkit-scrollbar {\n  height: 0px;\n}\n.ff-excel .ff-spreadsheet-active-cell {\n  position: absolute;\n  border: 2px solid var(--outline-color);\n  box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-active-cell--edit {\n  background: var(--background-color);\n  box-shadow: var(--elevation);\n}\n.ff-excel .ff-spreadsheet-table {\n  overflow: scroll;\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n.ff-excel .ff-spreadsheet-table::-webkit-scrollbar {\n  height: 0px;\n}\n.ff-excel .ff-spreadsheet-cell {\n  outline: none;\n  position: relative;\n  z-index: 0;\n}\n.ff-excel .ff-spreadsheet-active-cell .select_dot {\n  background-color: var(--elevation);\n  height: 10px;\n  width: 10px;\n  border-radius: 50%;\n  position: absolute;\n  bottom: -5px;\n  right: -5px;\n  cursor: crosshair;\n  z-index: 1000;\n}\n.ff-excel .ff-spreadsheet-cell--readonly {\n  color: var(--readonly-text-color);\n}\n.ff-excel .ff-spreadsheet-cell,\n.ff-excel .ff-spreadsheet-header {\n  border: 0.1px solid var(--border-color);\n  overflow: hidden;\n  word-break: keep-all;\n  white-space: nowrap;\n  text-align: left;\n  box-sizing: border-box;\n  user-select: none;\n}\n.ff-excel .ff-spreadsheet-header {\n  border: 0.1px solid var(--border-color);\n  background-color: var(--header-background-color);\n  color: var(--readonly-text-color);\n  text-align: center;\n  z-index: 100;\n  font-weight: 500;\n  font-size: 12px;\n}\n.ff-excel .corner_indicator {\n  padding-left: 20px;\n}\n.ff-excel .ff-spreadsheet-header--selected {\n  background: var(--brand-color);\n  color: var(--tooltip-text-color);\n}\n.ff-excel .ff-spreadsheet-header,\n.ff-excel .ff-spreadsheet-data-viewer,\n.ff-excel .ff-spreadsheet-data-editor input {\n  padding: 4px;\n  box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-data-viewer--preserve-breaks {\n  white-space: pre-wrap;\n}\n.ff-excel .ff-spreadsheet-data-editor,\n.ff-excel .ff-spreadsheet-data-editor input {\n  width: 100%;\n  height: 100%;\n}\n.ff-excel .ff-spreadsheet-data-editor input {\n  font: inherit;\n  color: inherit;\n  background: none;\n  border: none;\n  outline: none;\n  margin: 0;\n}\n.ff-excel .ff-spreadsheet-data-viewer--boolean {\n  text-align: center;\n}\n.ff-excel .ff-spreadsheet-floating-rect {\n  position: absolute;\n  pointer-events: none;\n  box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-floating-rect--hidden {\n  display: none;\n}\n.ff-excel .ff-spreadsheet-floating-rect--selected {\n  background: var(--outline-background-color);\n  border: 2px var(--outline-color) solid;\n}\n.ff-excel .ff-spreadsheet-floating-rect--dragging {\n  border: none;\n}\n.ff-excel .ff-spreadsheet-floating-rect--copied {\n  border: 2px var(--outline-color) dashed;\n}";
+var css_248z$m = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-excel {\n  display: flex;\n  flex-direction: column;\n}\n.ff-excel .ff-excel-toolbar-container {\n  position: static;\n  top: 0;\n  background-color: var(--excel-toolbar-bg);\n  padding: 4px 8px;\n  margin-bottom: 20px;\n}\n.ff-excel .ff-spreadsheet {\n  --background-color: var(--drawer-footer-bg);\n  --text-color: var(--text-color);\n  --readonly-text-color: var(--toggle-strip-active);\n  --outline-color: var(--toggle-strip-active);\n  --outline-background-color: var(--overlay-bg);\n  --border-color: var(--excel-sheet-border);\n  --header-background-color: var(--pop-up-background-blur);\n  --elevation: var(--brand-color);\n  position: relative;\n  overflow: scroll;\n  background: var(--background-color);\n  color: var(--text-color);\n  scrollbar-width: none;\n  display: inline-block;\n}\n.ff-excel .ff-spreadsheet::-webkit-scrollbar {\n  height: 0px;\n}\n.ff-excel .ff-spreadsheet-active-cell {\n  position: absolute;\n  border: 2px solid var(--outline-color);\n  box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-active-cell--edit {\n  background: var(--background-color);\n  box-shadow: var(--elevation);\n}\n.ff-excel .ff-spreadsheet-table {\n  overflow: scroll;\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n.ff-excel .ff-spreadsheet-table::-webkit-scrollbar {\n  height: 0px;\n}\n.ff-excel .ff-spreadsheet-cell {\n  outline: none;\n  position: relative;\n  z-index: 0;\n}\n.ff-excel .ff-spreadsheet-active-cell .select_dot {\n  background-color: var(--elevation);\n  height: 10px;\n  width: 10px;\n  border-radius: 50%;\n  position: absolute;\n  bottom: -5px;\n  right: -5px;\n  cursor: crosshair;\n  z-index: 1000;\n}\n.ff-excel .ff-spreadsheet-cell--readonly {\n  color: var(--readonly-text-color);\n}\n.ff-excel .ff-spreadsheet-cell,\n.ff-excel .ff-spreadsheet-header {\n  border: 0.1px solid var(--border-color);\n  overflow: hidden;\n  word-break: keep-all;\n  white-space: nowrap;\n  text-align: left;\n  box-sizing: border-box;\n  user-select: none;\n}\n.ff-excel .ff-spreadsheet-header {\n  border: 0.1px solid var(--border-color);\n  background-color: var(--header-background-color);\n  color: var(--readonly-text-color);\n  text-align: center;\n  z-index: 1000;\n  font-weight: 500;\n  font-size: 12px;\n}\n.ff-excel .ff-spreadsheet-corner-header {\n  z-index: 1100;\n}\n.ff-excel .corner_indicator {\n  padding-left: 20px;\n}\n.ff-excel .ff-spreadsheet-header--selected {\n  background: var(--brand-color);\n  color: var(--tooltip-text-color);\n}\n.ff-excel .ff-spreadsheet-header,\n.ff-excel .ff-spreadsheet-data-viewer,\n.ff-excel .ff-spreadsheet-data-editor input {\n  padding: 4px;\n  box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-data-viewer--preserve-breaks {\n  white-space: pre-wrap;\n}\n.ff-excel .ff-spreadsheet-data-editor,\n.ff-excel .ff-spreadsheet-data-editor input {\n  width: 100%;\n  height: 100%;\n}\n.ff-excel .ff-spreadsheet-data-editor input {\n  font: inherit;\n  color: inherit;\n  background: none;\n  border: none;\n  outline: none;\n  margin: 0;\n}\n.ff-excel .ff-spreadsheet-data-viewer--boolean {\n  text-align: center;\n}\n.ff-excel .ff-spreadsheet-floating-rect {\n  position: absolute;\n  pointer-events: none;\n  box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-floating-rect--hidden {\n  display: none;\n}\n.ff-excel .ff-spreadsheet-floating-rect--selected {\n  background: var(--outline-background-color);\n  border: 2px var(--outline-color) solid;\n}\n.ff-excel .ff-spreadsheet-floating-rect--dragging {\n  border: none;\n}\n.ff-excel .ff-spreadsheet-floating-rect--copied {\n  border: 2px var(--outline-color) dashed;\n}";
 styleInject(css_248z$m);
 
 var css_248z$l = ".ff-excel-toolbar {\n  display: flex;\n  height: 32px;\n  align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-divider {\n  width: 1px;\n  height: 24px;\n  background-color: var(--excel-toolbar-divider);\n  margin: 0 24px;\n  border-radius: 1px;\n  z-index: 1000;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font {\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-family {\n  width: 120px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-size {\n  width: 56px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text {\n  width: 100px;\n  height: 24px;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text .ff-excel-toolbar-icon-underline {\n  display: flex;\n  align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon {\n  width: 88px;\n  height: 24px;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n  border-radius: 4px;\n  background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n  background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n  background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n  border-radius: 4px;\n  background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n  background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n  background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu {\n  display: flex;\n  align-items: center;\n  width: 36px;\n  height: 24px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu .ff-excel-toolbar-menu-option {\n  display: flex;\n  align-items: center;\n}";
@@ -32001,7 +32024,11 @@ const ExcelToolBar = ({
   const [underLine, setUnderLine] = useState('underline');
   const [selectedFontFamily, setSelectedFontFamily] = useState({
     label: 'Times New Roman',
-    value: '"Times New Roman"'
+    value: 'Times New Roman'
+  });
+  const [selectedFontSize, setSelectedFontSize] = useState({
+    label: '11',
+    value: '11'
   });
   const [colorContainer, setColorPicker] = useState({
     color: 'var(--error-light)',
@@ -32134,11 +32161,12 @@ const ExcelToolBar = ({
           className: "ff-excel-toolbar-font-family",
           children: jsx(Select$1, {
             showLabel: false,
-            optionZIndex: 10000,
+            optionZIndex: 1000,
             onChange: e => {
+              console.log(e);
               setSelectedFontFamily({
                 label: e.label,
-                value: e.value
+                value: e.label
               });
               setFontFamily(data, e.label);
             },
@@ -32154,14 +32182,17 @@ const ExcelToolBar = ({
           className: "ff-excel-toolbar-font-size",
           children: jsx(Select$1, {
             showLabel: false,
-            optionZIndex: 5000,
+            optionZIndex: 1000,
             required: false,
-            onChange: e => setFontSize(data, e.value),
+            onChange: e => {
+              setSelectedFontSize({
+                label: e.label,
+                value: e.value
+              });
+              setFontSize(data, e.value);
+            },
             optionsList: fontSize,
-            selectedOption: {
-              label: '11',
-              value: '11'
-            }
+            selectedOption: selectedFontSize
           })
         })
       })]
@@ -32237,7 +32268,7 @@ const ExcelToolBar = ({
             name: getUnderlineIcon()
           }), jsx(MenuOption, {
             iconName: "arrow_down",
-            zIndex: 2000,
+            zIndex: 1000,
             iconSize: 12,
             options: underlineTypeIcon,
             tooltipPlacement: "top",
@@ -32320,7 +32351,7 @@ const ExcelToolBar = ({
           }), jsx(MenuOption, {
             iconName: "arrow_down",
             iconSize: 12,
-            zIndex: 5000,
+            zIndex: 1000,
             options: borderTypeIcon,
             tooltipPlacement: "top",
             variant: "light",
@@ -32601,7 +32632,7 @@ const Spreadsheet = props => {
 var css_248z$j = ".ff-excel-book {\n  z-index: 1000;\n}\n.ff-excel-book .ff-excel-sheet {\n  position: static;\n  top: 0;\n}\n.ff-excel-book .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-book .ff-excel-sheet-bar .ff-excel-add-sheet-icon {\n  position: fixed;\n  margin-top: 4px;\n  padding: 0px 6px;\n}\n.ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container {\n  padding-left: 40px;\n  height: 36px;\n  display: flex;\n  overflow-x: auto;\n  align-items: center;\n  scrollbar-width: none;\n  scrollbar-color: var(--hover-color) transparent;\n}\n.ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n.ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container::-webkit-scrollbar-thumb {\n  border-radius: 5px;\n}\n.ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container::-webkit-scrollbar {\n  height: 0px;\n}\n.ff-excel-book .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-book .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-book .ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list:focus {\n  outline: none;\n  text-decoration: none;\n}";
 styleInject(css_248z$j);
 
-var css_248z$i = ".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: 200;\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$i = ".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}";
 styleInject(css_248z$i);
 
 const ExcelContextMenu = ({
@@ -32977,8 +33008,8 @@ const ExcelFile = ({
     setContextMenu({
       open: true,
       position: {
-        x: event.pageX - 50,
-        y: event.pageY - 350
+        x: event.pageX - 0,
+        y: event.pageY - 50
       },
       options: options
     });