pixel-react-excel-sheet 1.0.16 → 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}";