pixel-react 1.8.4 → 1.8.6

package/src/components/Excel/ExcelFile/ExcelFile.tsx

@@ -1,512 +1,534 @@
-import React, { useState, useRef, useEffect } from 'react';
-import Spreadsheet, { CellBase } from './ExcelFileComponents/index';
-import * as Matrix from './ExcelFileComponents/matrix';
-import './ExcelFile.scss';
-import Tooltip from '../../Tooltip';
-import Icon from '../../Icon';
-import Toastify from '../../Toastify';
-import { toast } from '../../Toastify/Toastify';
-import { ContextMenuState } from './ExcelFileComponents/types';
-import ExcelContextMenu from '../ExcelContextMenu/ExcelContextMenu';
-import Typography from '../../Typography';
-import {
-  convertStyleToBackend,
-  convertStyleToFrontend,
-} from '../dataConversion';
-import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
-
-interface ExcelFileProps {
-  /** The Excel data containing sheets and their content */
-  excelData: {
-    sheets: WorkSheet[];
-  };
-
-  /** Optional: Provide context menu options for actions like right-click */
-  contextOption?: {
-    name: string;
-    title: React.ReactNode;
-    action: () => void;
-  }[];
-
-  /** Controls whether the toolbar is shown, disabled, or hidden */
-  toolbar?: 'show' | 'disable' | 'hide';
-
-  /** Callback function to save the Excel data */
-  onSave?: (saveData: any) => void;
-
-  /** Set your dynamic sheet Height*/
-  sheetHeight?: string;
-}
-
-const ExcelFile: React.FC<ExcelFileProps> = ({
-  excelData,
-  sheetHeight = '100%',
-  onSave = (saveData) => {
-    saveData();
-  },
-}) => {
-  const [sheetNames, setSheetNames] = useState<string[]>([]);
-  const [contextMenu, setContextMenu] = React.useState<ContextMenuState>({
-    open: false,
-    position: { x: 0, y: 0 },
-    options: [{ label: '', value: '', iconName: '', action: () => {} }],
-  });
-
-  const EmptyRow: CellBase = {
-    value: '',
-    style: {
-      color: 'var(--input-hover-border-color)',
-      backgroundColor: 'var(--drawer-footer-bg)',
-      borderColor: 'var(--excel-sheet-border)',
-      textDecoration: 'none solid',
-      borderRight: `1px solid var(--excel-sheet-border)`,
-      borderLeft: `1px solid var(--excel-sheet-border)`,
-      borderTop: `1px solid var(--excel-sheet-border)`,
-      borderBottom: `1px solid var(--excel-sheet-border)`,
-      fontSize: '15px',
-      fontWeight: 'normal',
-      fontStyle: 'normal',
-      fontFamily: 'Times New Roman',
-      textAlign: 'center',
-    },
-  };
-
-  const [selectedSheet, setSelectedSheet] = useState<{
-    name: string;
-    index: number;
-  }>({ name: 'defaultSheet', index: 0 });
-
-  const [worksheetsData, setWorksheetsData] = useState<{
-    [key: string]: Matrix.Matrix<CellBase>;
-  }>({ defaultSheet: [[EmptyRow]] });
-
-  const [selectedSheetData, setSelectedSheetData] = useState<
-    Matrix.Matrix<CellBase>
-  >([[EmptyRow]]);
-
-  const pageRef = useRef<string>('');
-  const sheetRef = useRef<HTMLDivElement | null>(null);
-
-  const checkVal = (val: any) => {
-    if (val === undefined || val === null) {
-      return null;
-    }
-    return val;
-  };
-
-  const options = [
-    {
-      label: 'Add Sheet',
-      value: 'Add Sheet',
-      iconName: 'plus_icon',
-      action: () => {
-        handleAddSheet();
-      },
-      disable: false,
-    },
-    {
-      label: 'Delete Sheet',
-      value: 'Delete Sheet',
-      iconName: 'delete',
-      action: () => {
-        handleDeleteSheet();
-      },
-      disable: false,
-    },
-  ];
-
-  useEffect(() => {
-    const payload = excelData;
-    const sheetNames = payload.sheets.map((e) => e.sheetName);
-    setSheetNames(sheetNames);
-    if (sheetNames.length > 0) {
-      pageRef.current = sheetNames[0] ? sheetNames[0] : '';
-      setSelectedSheet({ name: sheetNames[0] ? sheetNames[0] : '', index: 0 });
-    }
-    const newWorksheetsData: { [key: string]: Matrix.Matrix<CellBase> } = {};
-    payload.sheets.forEach((sheet) => {
-      const sheetName = sheet.sheetName;
-      const json = sheet.data;
-      const maxRows = Math.max(26, json.length + 2);
-      const maxCols = Math.max(
-        26,
-        Math.max(...json.map((row) => row.length)) + 2
-      );
-
-      let spreadsheetData: Matrix.Matrix<CellBase> = Array.from(
-        { length: maxRows },
-        () => Array.from({ length: maxCols }, () => EmptyRow)
-      );
-      json.forEach((row, rowIndex) => {
-        row.forEach((cell, colIndex) => {
-          if (rowIndex < maxRows && colIndex < maxCols) {
-            if (!spreadsheetData[rowIndex]) {
-              spreadsheetData[rowIndex] = [];
-            }
-            spreadsheetData[rowIndex][colIndex] = {
-              value: checkVal(cell.value),
-              style: convertStyleToFrontend(cell?.style),
-              type: true,
-            };
-          }
-        });
-      });
-
-      newWorksheetsData[sheetName] = spreadsheetData;
-    });
-    setWorksheetsData(newWorksheetsData);
-    const firstSheetName = Object.keys(newWorksheetsData)[0];
-    if (firstSheetName && newWorksheetsData[firstSheetName] !== undefined) {
-      setSelectedSheetData(newWorksheetsData[firstSheetName]);
-    }
-  }, []);
-  const handleSave = React.useCallback(
-    (event: KeyboardEvent) => {
-      if (event.ctrlKey && event.key === 's') {
-        event.preventDefault();
-        event.stopPropagation();
-        onSaveWorksheetData();
-      }
-    },
-    [onSave]
-  );
-
-  React.useEffect(() => {
-    document.addEventListener('keydown', handleSave);
-    return () => {
-      document.removeEventListener('keydown', handleSave);
-    };
-  }, [handleSave]);
-
-  const onSaveWorksheetData = () => {
-    const savedData = {
-      sheets: sheetNames.map((sheetName) => {
-        const sheetData =
-          worksheetsData[sheetName]?.map((row) => {
-            const lastIndex = row.reduce((lastIdx, cell, i) => {
-              const hasValueOrTypeTrue =
-                (cell &&
-                  cell.value !== null &&
-                  !checkEmpty(cell && cell.value)) ||
-                (cell && cell.type === true);
-              return hasValueOrTypeTrue ? i : lastIdx;
-            }, -1);
-
-            const filteredRow = row
-              .map((cell, index) => {
-                if (cell && cell.value !== null) {
-                  return {
-                    value: cell.value,
-                    styles: convertStyleToBackend(cell.style ?? {}),
-                  };
-                } else if ((cell && cell.type) || index <= lastIndex) {
-                  return {
-                    value: '',
-                    styles: convertStyleToBackend(cell?.style ?? {}),
-                  };
-                }
-                return null;
-              })
-              .filter((cell) => cell !== null);
-
-            return filteredRow.length > 0 ? filteredRow : [];
-          }) || [];
-
-        const finalData = sheetData.filter((row, index) => {
-          const isNextRowNotEmpty = sheetData
-            .slice(index + 1)
-            .some((nextRow) => nextRow.length > 0);
-          return row.length > 0 || isNextRowNotEmpty;
-        });
-
-        return {
-          sheetName: sheetName,
-          data: checkEmpty(finalData.length) ? [[]] : finalData,
-        };
-      }),
-    };
-    onSave(savedData);
-    toast.success('File saved successfully!');
-  };
-
-  const onEvaluateChange = (data: Matrix.Matrix<CellBase>) => {
-    setWorksheetsData((prev) => ({ ...prev, [pageRef.current]: data }));
-    onSaveWorksheetData();
-  };
-
-  const [editingSheet, setEditingSheet] = useState<number | null>(null);
-
-  const handleAddSheet = () => {
-    const generateUniqueSheetName = (
-      baseName: string,
-      existingNames: string[]
-    ) => {
-      let newName = baseName;
-      let counter = 1;
-      while (existingNames.includes(newName)) {
-        newName = `${baseName}${counter}`;
-        counter++;
-      }
-      return newName;
-    };
-    const baseName = 'NewSheet';
-    const existingSheetNames = sheetNames;
-    const newSheetName = generateUniqueSheetName(baseName, existingSheetNames);
-    const newSheetData = Array.from({ length: 26 }, () =>
-      Array.from({ length: 26 }, () => EmptyRow)
-    );
-    setSheetNames((prev) => [...prev, newSheetName]);
-    setSelectedSheet({ index: sheetNames?.length, name: newSheetName });
-    setWorksheetsData({ ...worksheetsData, [newSheetName]: newSheetData });
-    setSelectedSheetData(newSheetData);
-    pageRef.current = newSheetName;
-  };
-
-  useEffect(() => {
-    const selectedData = worksheetsData[selectedSheet.name];
-    if (selectedData !== undefined) {
-      setSelectedSheetData(selectedData);
-    } else {
-      setSelectedSheetData([]);
-    }
-  }, [selectedSheet.name]);
-
-  const handleDeleteSheet = () => {
-    const { index, name } = selectedSheet;
-
-    if (sheetNames.length > 1) {
-      let updatedSheetNames = sheetNames.slice();
-      updatedSheetNames.splice(index, 1);
-
-      const updatedWorksheetsData = { ...worksheetsData };
-
-      delete updatedWorksheetsData[name];
-      const newIndex = Math.min(index, updatedSheetNames.length - 1);
-
-      setSheetNames(updatedSheetNames);
-      setWorksheetsData(updatedWorksheetsData);
-      setSelectedSheet({
-        index: newIndex,
-        name: updatedSheetNames[newIndex] ? updatedSheetNames[newIndex] : '',
-      });
-    } else {
-      toast.warning('Cannot delete the last sheet.');
-    }
-  };
-
-  const handleNameChange = (
-    event: React.SyntheticEvent<HTMLDivElement>,
-    index: number,
-    name: string
-  ): void => {
-    const target = event.target as HTMLDivElement;
-    if (!target) {
-      setEditingSheet(null);
-      return;
-    }
-
-    const updatedSheetValue = target.textContent?.trim();
-
-    if (!updatedSheetValue) {
-      toast.warning('Sheet name cannot be empty.');
-      target.textContent = selectedSheet.name;
-      setEditingSheet(null);
-      return;
-    }
-
-    if (updatedSheetValue.length > 30) {
-      toast.warning('The sheet name cannot be greater than 30 characters');
-      target.textContent = selectedSheet.name;
-      setEditingSheet(null);
-      return;
-    }
-
-    if (
-      sheetNames.includes(updatedSheetValue) &&
-      sheetNames[index] !== updatedSheetValue
-    ) {
-      toast.warning('Sheet name already exists');
-      target.textContent = selectedSheet.name;
-      setEditingSheet(null);
-      return;
-    }
-
-    let updatedSheetNames = sheetNames;
-
-    updatedSheetNames.splice(index, 1, updatedSheetValue);
-
-    let remainingSheets = worksheetsData;
-
-    let updatedData = replaceKeyValueByKeyName(
-      remainingSheets,
-      name,
-      updatedSheetValue,
-      selectedSheetData
-    );
-    pageRef.current = updatedSheetValue;
-    setSelectedSheet((prev) => ({ ...prev, name: updatedSheetValue }));
-    setWorksheetsData(updatedData);
-    setEditingSheet(null);
-  };
-
-  function replaceKeyValueByKeyName(
-    obj: {
-      [key: string]: Matrix.Matrix<CellBase>;
-    },
-    oldKey: string,
-    newKey: string,
-    newValue: Matrix.Matrix<CellBase>
-  ) {
-    if (!(oldKey in obj)) {
-      throw new Error(`Key "${oldKey}" not found in object`);
-    }
-    delete obj[oldKey];
-    obj[newKey] = newValue;
-    return obj;
-  }
-
-  const handleSheetChange = (name: string, index: number) => {
-    if (name === selectedSheet.name || index === selectedSheet.index) {
-      return;
-    }
-    setSelectedSheet({ index, name });
-    setSheetNames((prev: string[]) => {
-      const updatedSheetNames = [...prev];
-      updatedSheetNames[index] = name;
-      return updatedSheetNames;
-    });
-
-    const selectedSheetData = worksheetsData[name];
-    if (selectedSheetData) {
-      setSelectedSheetData(selectedSheetData);
-    } else {
-      setSelectedSheetData([[EmptyRow]]);
-    }
-    pageRef.current = name;
-  };
-
-  const setCursorToEnd = (element: HTMLDivElement): void => {
-    const range = document.createRange();
-    const selection = window.getSelection();
-    range.selectNodeContents(element);
-    range.collapse(false);
-    selection?.removeAllRanges();
-    selection?.addRange(range);
-  };
-
-  const handleClickOutside = React.useCallback(
-    (event: MouseEvent) => {
-      if (contextMenu.open) {
-        event.preventDefault();
-        event.stopPropagation();
-        setContextMenu({
-          open: false,
-          position: { x: 0, y: 0 },
-          options: [{ label: '', value: '', iconName: '', action: () => {} }],
-        });
-      }
-    },
-    [contextMenu.open]
-  );
-
-  React.useEffect(() => {
-    document.addEventListener('click', handleClickOutside);
-    return () => {
-      document.removeEventListener('click', handleClickOutside);
-    };
-  }, [handleClickOutside]);
-
-  const contextClick = (event: React.MouseEvent) => {
-    event.preventDefault();
-    const target = event.target as HTMLElement;
-    const selectedSheetName = target.innerText;
-
-    sheetNames.map((name, index) => {
-      if (selectedSheetName === name) {
-        handleSheetChange(name, index);
-      }
-    });
-
-    setContextMenu({
-      open: true,
-      position: {
-        x: event.pageX - 200,
-        y: event.pageY - 250,
-      },
-      options: options,
-    });
-  };
-
-  return (
-    <>
-      {sheetNames.length > 0 && (
-        <>
-          <div ref={sheetRef} className="ff-excel-sheet">
-            <Spreadsheet
-              sheetHeight={sheetHeight}
-              setContextMenu={setContextMenu}
-              data={selectedSheetData}
-              onEvaluatedDataChange={onEvaluateChange}
-            />
-          </div>
-          <div className="ff-excel-sheet-bar">
-            <div className="ff-excel-add-sheet-set">
-              <Tooltip title="Add Sheet" placement="top">
-                <Icon
-                  className="ff-excel-add-sheet-icon"
-                  hoverEffect={true}
-                  onClick={() => {
-                    handleAddSheet();
-                  }}
-                  name="plus_icon"
-                  height={20}
-                  width={20}
-                />
-              </Tooltip>
-            </div>
-            <div className="ff-excel-tab-container">
-              {sheetNames.map((name, index) => (
-                <div
-                  key={name}
-                  onContextMenu={contextClick}
-                  className={`ff-excel-tab-list ${
-                    name === selectedSheet.name ? 'active' : ''
-                  }`}
-                  onClick={() => {
-                    handleSheetChange(name, index);
-                  }}
-                  suppressContentEditableWarning={editingSheet === index}
-                  onDoubleClick={(e) => {
-                    setEditingSheet(index);
-                    if (editingSheet === null) {
-                      setTimeout(
-                        () => setCursorToEnd(e.target as HTMLDivElement),
-                        0
-                      );
-                    }
-                  }}
-                  contentEditable={editingSheet === index}
-                  onBlur={(e) => {
-                    handleNameChange(e, index, name);
-                  }}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') {
-                      e.preventDefault();
-                      handleNameChange(e, index, name);
-                    }
-                  }}
-                >
-                  <Typography>{name}</Typography>
-                </div>
-              ))}
-            </div>
-          </div>
-          {contextMenu.open && <ExcelContextMenu contextMenu={contextMenu} />}
-          <Toastify />
-        </>
-      )}
-    </>
-  );
-};
-
-export default ExcelFile;
+import React, { useState, useRef, useEffect } from 'react';
+import Spreadsheet, { CellBase } from './ExcelFileComponents/index';
+import * as Matrix from './ExcelFileComponents/matrix';
+import './ExcelFile.scss';
+import Tooltip from '../../Tooltip';
+import Icon from '../../Icon';
+import Toastify from '../../Toastify';
+import { toast } from '../../Toastify/Toastify';
+import { ContextMenuState } from './ExcelFileComponents/types';
+import ExcelContextMenu from '../ExcelContextMenu/ExcelContextMenu';
+import Typography from '../../Typography';
+import {
+  convertStyleToBackend,
+  convertStyleToFrontend,
+} from '../dataConversion';
+import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
+
+interface ExcelFileProps {
+  /** The Excel data containing sheets and their content */
+  excelData: {
+    sheets: WorkSheet[];
+  };
+
+  /** Optional: Provide context menu options for actions like right-click */
+  contextOption?: {
+    open: boolean;
+    options: {
+      label: string;
+      value: string;
+      iconName: string;
+      action: () => void;
+    }[];
+  };
+
+  /** Controls whether the toolbar is shown, disabled, or hidden */
+  toolbar?: 'show' | 'disable' | 'hide';
+
+  /** Callback function to save the Excel data */
+  onSave?: (saveData: any) => void;
+  contextHeightPositioning?: number;
+  contextWidthPositioning?: number;
+  /** Set your dynamic sheet Height*/
+  sheetHeight?: string;
+}
+
+const ExcelFile: React.FC<ExcelFileProps> = ({
+  excelData,
+  contextOption,
+  sheetHeight = '100%',
+  contextHeightPositioning = 0,
+  contextWidthPositioning = 0,
+  onSave = (saveData) => {
+    saveData();
+  },
+}) => {
+  const [sheetNames, setSheetNames] = useState<string[]>([]);
+  const [contextMenu, setContextMenu] = React.useState<ContextMenuState>({
+    open: false,
+    position: { x: 0, y: 0 },
+    options: [{ label: '', value: '', iconName: '', action: () => {} }],
+  });
+
+  const EmptyRow: CellBase = {
+    value: '',
+    style: {
+      color: 'var(--input-hover-border-color)',
+      backgroundColor: 'var(--drawer-footer-bg)',
+      borderColor: 'var(--excel-sheet-border)',
+      textDecoration: 'none solid',
+      borderRight: `1px solid var(--excel-sheet-border)`,
+      borderLeft: `1px solid var(--excel-sheet-border)`,
+      borderTop: `1px solid var(--excel-sheet-border)`,
+      borderBottom: `1px solid var(--excel-sheet-border)`,
+      fontSize: '15px',
+      fontWeight: 'normal',
+      fontStyle: 'normal',
+      fontFamily: 'Times New Roman',
+      textAlign: 'center',
+    },
+  };
+
+  const [selectedSheet, setSelectedSheet] = useState<{
+    name: string;
+    index: number;
+  }>({ name: 'defaultSheet', index: 0 });
+
+  const [worksheetsData, setWorksheetsData] = useState<{
+    [key: string]: Matrix.Matrix<CellBase>;
+  }>({ defaultSheet: [[EmptyRow]] });
+
+  const [selectedSheetData, setSelectedSheetData] = useState<
+    Matrix.Matrix<CellBase>
+  >([[EmptyRow]]);
+
+  const [position, setPosition] = useState<{ x: number; y: number }>({
+    x: 0,
+    y: 0,
+  });
+
+  const pageRef = useRef<string>('');
+  const sheetRef = useRef<HTMLDivElement | null>(null);
+
+  const checkVal = (val: any) => {
+    if (val === undefined || val === null) {
+      return null;
+    }
+    return val;
+  };
+
+  const options = [
+    {
+      label: 'Add Sheet',
+      value: 'Add Sheet',
+      iconName: 'plus_icon',
+      action: () => {
+        handleAddSheet();
+      },
+      disable: false,
+    },
+    {
+      label: 'Delete Sheet',
+      value: 'Delete Sheet',
+      iconName: 'delete',
+      action: () => {
+        handleDeleteSheet();
+      },
+      disable: false,
+    },
+  ];
+
+  useEffect(() => {
+    const payload = excelData;
+    const sheetNames = payload.sheets.map((e) => e.sheetName);
+    setSheetNames(sheetNames);
+    if (sheetNames.length > 0) {
+      pageRef.current = sheetNames[0] ? sheetNames[0] : '';
+      setSelectedSheet({ name: sheetNames[0] ? sheetNames[0] : '', index: 0 });
+    }
+    const newWorksheetsData: { [key: string]: Matrix.Matrix<CellBase> } = {};
+    payload.sheets.forEach((sheet) => {
+      const sheetName = sheet.sheetName;
+      const json = sheet.data;
+      const maxRows = Math.max(26, json.length + 2);
+      const maxCols = Math.max(
+        26,
+        Math.max(...json.map((row) => row.length)) + 2
+      );
+
+      let spreadsheetData: Matrix.Matrix<CellBase> = Array.from(
+        { length: maxRows },
+        () => Array.from({ length: maxCols }, () => EmptyRow)
+      );
+      json.forEach((row, rowIndex) => {
+        row.forEach((cell, colIndex) => {
+          if (rowIndex < maxRows && colIndex < maxCols) {
+            if (!spreadsheetData[rowIndex]) {
+              spreadsheetData[rowIndex] = [];
+            }
+            spreadsheetData[rowIndex][colIndex] = {
+              value: checkVal(cell.value),
+              style: convertStyleToFrontend(cell?.style),
+              type: true,
+            };
+          }
+        });
+      });
+
+      newWorksheetsData[sheetName] = spreadsheetData;
+    });
+    setWorksheetsData(newWorksheetsData);
+    const firstSheetName = Object.keys(newWorksheetsData)[0];
+    if (firstSheetName && newWorksheetsData[firstSheetName] !== undefined) {
+      setSelectedSheetData(newWorksheetsData[firstSheetName]);
+    }
+  }, []);
+  const handleSave = React.useCallback(
+    (event: KeyboardEvent) => {
+      if (event.ctrlKey && event.key === 's') {
+        event.preventDefault();
+        event.stopPropagation();
+        onSaveWorksheetData();
+      }
+    },
+    [onSave]
+  );
+
+  React.useEffect(() => {
+    document.addEventListener('keydown', handleSave);
+    return () => {
+      document.removeEventListener('keydown', handleSave);
+    };
+  }, [handleSave]);
+
+  const onSaveWorksheetData = () => {
+    const savedData = {
+      sheets: sheetNames.map((sheetName) => {
+        const sheetData =
+          worksheetsData[sheetName]?.map((row) => {
+            const lastIndex = row.reduce((lastIdx, cell, i) => {
+              const hasValueOrTypeTrue =
+                (cell &&
+                  cell.value !== null &&
+                  !checkEmpty(cell && cell.value)) ||
+                (cell && cell.type === true);
+              return hasValueOrTypeTrue ? i : lastIdx;
+            }, -1);
+
+            const filteredRow = row
+              .map((cell, index) => {
+                if (cell && cell.value !== null) {
+                  return {
+                    value: cell.value,
+                    styles: convertStyleToBackend(cell.style ?? {}),
+                  };
+                } else if ((cell && cell.type) || index <= lastIndex) {
+                  return {
+                    value: '',
+                    styles: convertStyleToBackend(cell?.style ?? {}),
+                  };
+                }
+                return null;
+              })
+              .filter((cell) => cell !== null);
+
+            return filteredRow.length > 0 ? filteredRow : [];
+          }) || [];
+
+        const finalData = sheetData.filter((row, index) => {
+          const isNextRowNotEmpty = sheetData
+            .slice(index + 1)
+            .some((nextRow) => nextRow.length > 0);
+          return row.length > 0 || isNextRowNotEmpty;
+        });
+
+        return {
+          sheetName: sheetName,
+          data: checkEmpty(finalData.length) ? [[]] : finalData,
+        };
+      }),
+    };
+    onSave(savedData);
+  };
+
+  const onEvaluateChange = (data: Matrix.Matrix<CellBase>) => {
+    setWorksheetsData((prev) => ({ ...prev, [pageRef.current]: data }));
+    onSaveWorksheetData();
+  };
+
+  const [editingSheet, setEditingSheet] = useState<number | null>(null);
+
+  const handleAddSheet = () => {
+    const generateUniqueSheetName = (
+      baseName: string,
+      existingNames: string[]
+    ) => {
+      let newName = baseName;
+      let counter = 1;
+      while (existingNames.includes(newName)) {
+        newName = `${baseName}${counter}`;
+        counter++;
+      }
+      return newName;
+    };
+    const baseName = 'NewSheet';
+    const existingSheetNames = sheetNames;
+    const newSheetName = generateUniqueSheetName(baseName, existingSheetNames);
+    const newSheetData = Array.from({ length: 26 }, () =>
+      Array.from({ length: 26 }, () => EmptyRow)
+    );
+    setSheetNames((prev) => [...prev, newSheetName]);
+    setSelectedSheet({ index: sheetNames?.length, name: newSheetName });
+    setWorksheetsData({ ...worksheetsData, [newSheetName]: newSheetData });
+    setSelectedSheetData(newSheetData);
+    pageRef.current = newSheetName;
+  };
+
+  useEffect(() => {
+    const selectedData = worksheetsData[selectedSheet.name];
+    if (selectedData !== undefined) {
+      setSelectedSheetData(selectedData);
+    } else {
+      setSelectedSheetData([]);
+    }
+  }, [selectedSheet.name]);
+
+  const handleDeleteSheet = () => {
+    const { index, name } = selectedSheet;
+
+    if (sheetNames.length > 1) {
+      let updatedSheetNames = sheetNames.slice();
+      updatedSheetNames.splice(index, 1);
+
+      const updatedWorksheetsData = { ...worksheetsData };
+
+      delete updatedWorksheetsData[name];
+      const newIndex = Math.min(index, updatedSheetNames.length - 1);
+
+      setSheetNames(updatedSheetNames);
+      setWorksheetsData(updatedWorksheetsData);
+      setSelectedSheet({
+        index: newIndex,
+        name: updatedSheetNames[newIndex] ? updatedSheetNames[newIndex] : '',
+      });
+    } else {
+      toast.warning('Cannot delete the last sheet.');
+    }
+  };
+
+  const handleNameChange = (
+    event: React.SyntheticEvent<HTMLDivElement>,
+    index: number,
+    name: string
+  ): void => {
+    const target = event.target as HTMLDivElement;
+    if (!target) {
+      setEditingSheet(null);
+      return;
+    }
+
+    const updatedSheetValue = target.textContent?.trim();
+
+    if (!updatedSheetValue) {
+      toast.warning('Sheet name cannot be empty.');
+      target.textContent = selectedSheet.name;
+      setEditingSheet(null);
+      return;
+    }
+
+    if (updatedSheetValue.length > 30) {
+      toast.warning('The sheet name cannot be greater than 30 characters');
+      target.textContent = selectedSheet.name;
+      setEditingSheet(null);
+      return;
+    }
+
+    if (
+      sheetNames.includes(updatedSheetValue) &&
+      sheetNames[index] !== updatedSheetValue
+    ) {
+      toast.warning('Sheet name already exists');
+      target.textContent = selectedSheet.name;
+      setEditingSheet(null);
+      return;
+    }
+
+    let updatedSheetNames = sheetNames;
+
+    updatedSheetNames.splice(index, 1, updatedSheetValue);
+
+    let remainingSheets = worksheetsData;
+
+    let updatedData = replaceKeyValueByKeyName(
+      remainingSheets,
+      name,
+      updatedSheetValue,
+      selectedSheetData
+    );
+    pageRef.current = updatedSheetValue;
+    setSelectedSheet((prev) => ({ ...prev, name: updatedSheetValue }));
+    setWorksheetsData(updatedData);
+    setEditingSheet(null);
+  };
+
+  function replaceKeyValueByKeyName(
+    obj: {
+      [key: string]: Matrix.Matrix<CellBase>;
+    },
+    oldKey: string,
+    newKey: string,
+    newValue: Matrix.Matrix<CellBase>
+  ) {
+    if (!(oldKey in obj)) {
+      throw new Error(`Key "${oldKey}" not found in object`);
+    }
+    delete obj[oldKey];
+    obj[newKey] = newValue;
+    return obj;
+  }
+
+  const handleSheetChange = (name: string, index: number) => {
+    if (name === selectedSheet.name || index === selectedSheet.index) {
+      return;
+    }
+    setSelectedSheet({ index, name });
+    setSheetNames((prev: string[]) => {
+      const updatedSheetNames = [...prev];
+      updatedSheetNames[index] = name;
+      return updatedSheetNames;
+    });
+
+    const selectedSheetData = worksheetsData[name];
+    if (selectedSheetData) {
+      setSelectedSheetData(selectedSheetData);
+    } else {
+      setSelectedSheetData([[EmptyRow]]);
+    }
+    pageRef.current = name;
+  };
+
+  const setCursorToEnd = (element: HTMLDivElement): void => {
+    const range = document.createRange();
+    const selection = window.getSelection();
+    range.selectNodeContents(element);
+    range.collapse(false);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+  };
+
+  const handleClickOutside = React.useCallback(
+    (event: MouseEvent) => {
+      if (contextMenu.open) {
+        event.preventDefault();
+        event.stopPropagation();
+        setContextMenu({
+          open: false,
+          position: { x: 0, y: 0 },
+          options: [{ label: '', value: '', iconName: '', action: () => {} }],
+        });
+      }
+    },
+    [contextMenu.open]
+  );
+
+  React.useEffect(() => {
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [handleClickOutside]);
+
+  const contextClick = (event: React.MouseEvent) => {
+    event.preventDefault();
+    const target = event.target as HTMLElement;
+    const selectedSheetName = target.innerText;
+
+    sheetNames.map((name, index) => {
+      if (selectedSheetName === name) {
+        handleSheetChange(name, index);
+      }
+    });
+
+    setContextMenu({
+      open: true,
+      position: {
+        x: event.pageX,
+        y: event.pageY,
+      },
+      options: options,
+    });
+  };
+  const setContextPosition = (event: React.MouseEvent) => {
+    event.preventDefault();
+    setPosition({
+      x: event.pageX + contextWidthPositioning,
+      y: event.pageY + contextHeightPositioning,
+    });
+  };
+
+  return (
+    <>
+      {sheetNames.length > 0 && (
+        <div className="ff-excel" onContextMenu={setContextPosition}>
+          <div ref={sheetRef} className="ff-excel-sheet">
+            <Spreadsheet
+              sheetHeight={sheetHeight}
+              setContextMenu={setContextMenu}
+              contextOption={contextOption}
+              data={selectedSheetData}
+              onEvaluatedDataChange={onEvaluateChange}
+            />
+          </div>
+          <div className="ff-excel-sheet-bar">
+            <div className="ff-excel-add-sheet-set">
+              <Tooltip title="Add Sheet" placement="top">
+                <Icon
+                  className="ff-excel-add-sheet-icon"
+                  hoverEffect={true}
+                  onClick={() => {
+                    handleAddSheet();
+                  }}
+                  name="plus_icon"
+                  height={20}
+                  width={20}
+                />
+              </Tooltip>
+            </div>
+            <div className="ff-excel-tab-container">
+              {sheetNames.map((name, index) => (
+                <div
+                  key={name}
+                  onContextMenu={contextClick}
+                  className={`ff-excel-tab-list ${
+                    name === selectedSheet.name ? 'active' : ''
+                  }`}
+                  onClick={() => {
+                    handleSheetChange(name, index);
+                  }}
+                  suppressContentEditableWarning={editingSheet === index}
+                  onDoubleClick={(e) => {
+                    setEditingSheet(index);
+                    if (editingSheet === null) {
+                      setTimeout(
+                        () => setCursorToEnd(e.target as HTMLDivElement),
+                        0
+                      );
+                    }
+                  }}
+                  contentEditable={editingSheet === index}
+                  onBlur={(e) => {
+                    handleNameChange(e, index, name);
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      e.preventDefault();
+                      handleNameChange(e, index, name);
+                    }
+                  }}
+                >
+                  <Typography>{name}</Typography>
+                </div>
+              ))}
+            </div>
+          </div>
+          {contextMenu.open && (
+            <ExcelContextMenu contextMenu={contextMenu} position={position} />
+          )}
+          <Toastify />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ExcelFile;