pixel-react-excel-sheet 1.0.13 → 1.0.15

package/lib/components/Excel/ExcelFile/ExcelFile.d.ts

@@ -15,6 +15,8 @@ interface ExcelFileProps {
     toolbar?: 'show' | 'disable' | 'hide';
     /** Callback function to save the Excel data */
     onSave?: (saveData: any) => void;
+    /** Set your dynamic sheet Height*/
+    sheetHeight?: string;
 }
 declare const ExcelFile: React.FC<ExcelFileProps>;
 export default ExcelFile;

package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts

@@ -60,6 +60,8 @@ export type Props<CellType extends Types.CellBase> = {
     /** Callback called when the Spreadsheet's evaluated data changes. */
     onEvaluatedDataChange?: (data: Matrix.Matrix<CellType>) => void;
     setContextMenu: React.Dispatch<React.SetStateAction<Types.ContextMenuState>>;
+    /** Set your dynamic sheet Height*/
+    sheetHeight: string;
 };
 /**
  * The Spreadsheet component

package/lib/index.d.ts

@@ -2378,6 +2378,8 @@ interface ExcelFileProps {
     toolbar?: 'show' | 'disable' | 'hide';
     /** Callback function to save the Excel data */
     onSave?: (saveData: any) => void;
+    /** Set your dynamic sheet Height*/
+    sheetHeight?: string;
 }
 declare const ExcelFile: React__default.FC<ExcelFileProps>;
 

package/lib/index.esm.js

@@ -31796,7 +31796,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}\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  height: 465px;\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  margin-top: 20px;\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: 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}";
 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}";
@@ -32134,6 +32134,7 @@ const ExcelToolBar = ({
           className: "ff-excel-toolbar-font-family",
           children: jsx(Select$1, {
             showLabel: false,
+            optionZIndex: 10000,
             onChange: e => {
               setSelectedFontFamily({
                 label: e.label,
@@ -32153,6 +32154,7 @@ const ExcelToolBar = ({
           className: "ff-excel-toolbar-font-size",
           children: jsx(Select$1, {
             showLabel: false,
+            optionZIndex: 5000,
             required: false,
             onChange: e => setFontSize(data, e.value),
             optionsList: fontSize,
@@ -32235,6 +32237,7 @@ const ExcelToolBar = ({
             name: getUnderlineIcon()
           }), jsx(MenuOption, {
             iconName: "arrow_down",
+            zIndex: 2000,
             iconSize: 12,
             options: underlineTypeIcon,
             tooltipPlacement: "top",
@@ -32317,6 +32320,7 @@ const ExcelToolBar = ({
           }), jsx(MenuOption, {
             iconName: "arrow_down",
             iconSize: 12,
+            zIndex: 5000,
             options: borderTypeIcon,
             tooltipPlacement: "top",
             variant: "light",
@@ -32357,6 +32361,7 @@ const Spreadsheet = props => {
     onKeyDown,
     Table: Table$1 = Table,
     Row: Row$1 = Row,
+    sheetHeight,
     HeaderRow: HeaderRow$1 = HeaderRow,
     DataEditor: DataEditor$1 = DataEditor,
     DataViewer: DataViewer$1 = DataViewer,
@@ -32578,6 +32583,9 @@ const Spreadsheet = props => {
       })
     }), jsxs("div", {
       ref: rootRef,
+      style: {
+        height: sheetHeight
+      },
       className: classNames('ff-spreadsheet', className),
       onKeyDown: handleKeyDown,
       onMouseMove: handleMouseMove,
@@ -32625,6 +32633,7 @@ const ExcelContextMenu = ({
 
 const ExcelFile = ({
   excelData,
+  sheetHeight = '100%',
   onSave = saveData => {
     saveData();
   }
@@ -32983,6 +32992,7 @@ const ExcelFile = ({
         ref: sheetRef,
         className: "ff-excel-sheet",
         children: jsx(Spreadsheet, {
+          sheetHeight: sheetHeight,
           setContextMenu: setContextMenu,
           data: selectedSheetData,
           onEvaluatedDataChange: onEvaluateChange