abdul-react 0.0.43 → 0.0.48

package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.js

@@ -1,438 +1,568 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import classNames from 'classnames';
-import * as Actions from './actions';
-import * as Matrix from './matrix';
-import reducer, { INITIAL_STATE } from './reducer';
-import context from './context';
-import { Model, createFormulaParser } from './engine';
-import { range, readTextFromClipboard, writeTextToClipboard, calculateSpreadsheetSize, getCSV, shouldHandleClipboardEvent, isFocusedWithin, } from './util';
-import DefaultTable from './Table';
-import DefaultRow from './Row';
-import DefaultHeaderRow from './HeaderRow';
-import DefaultCornerIndicator, { enhance as enhanceCornerIndicator, } from './CornerIndicator';
-import DefaultColumnIndicator, { enhance as enhanceColumnIndicator, } from './ColumnIndicator';
-import DefaultRowIndicator, { enhance as enhanceRowIndicator, } from './RowIndicator';
-import { Cell as DefaultCell, enhance as enhanceCell } from './Cell';
-import DefaultDataViewer from './DataViewer';
-import DefaultDataEditor from './DataEditor';
-import ActiveCell from './ActiveCell';
-import Selected from './Selected';
-import Copied from './Copied';
-import './Spreadsheet.scss';
-import ExcelToolBar from '../../ExcelToolBar/ExcelToolBar';
-import { hasKeyDownHandler } from './reducerFunctions';
-import { throttle } from '../../../../utils/throttle/throttle';
+import classNames from '../../../../_virtual/index.js';
+import { blur, setSelection, editable, setData, setCreateFormulaParser, cut, copy, paste, keyDown, onMouseUp, dragEnd, dragStart, addColumnRight, addColumnLeft, deleteColumn, deleteRow, addRowBottom, addRowTop, formatePainter, backgroundStyle, textAlign, fontFamily, fontSize, borderType, color, underlineType, italic, bold, keyPress } from './actions.js';
+import { slice } from './matrix.js';
+import reducer, { INITIAL_STATE } from './reducer.js';
+import context from './context.js';
+import { Model } from './engine/engine.js';
+import { createFormulaParser } from './engine/formula.js';
+import { calculateSpreadsheetSize, isFocusedWithin, getCSV, writeTextToClipboard, shouldHandleClipboardEvent, readTextFromClipboard, range } from './util.js';
+import Table from './Table.js';
+import Row from './Row.js';
+import HeaderRow from './HeaderRow.js';
+import CornerIndicator, { enhance as enhance$1 } from './CornerIndicator.js';
+import EnhancedColumnIndicator, { enhance as enhance$3 } from './ColumnIndicator.js';
+import RowIndicator, { enhance as enhance$2 } from './RowIndicator.js';
+import { enhance, Cell } from './Cell.js';
+import DataViewer from './DataViewer.js';
+import DataEditor from './DataEditor.js';
+import ActiveCell from './ActiveCell.js';
+import Selected from './Selected.js';
+import Copied from './Copied.js';
+import ExcelToolBar from '../../ExcelToolBar/ExcelToolBar.js';
+import { hasKeyDownHandler } from './reducerFunctions.js';
+import { throttle } from '../../../../utils/throttle/throttle.js';
+
 /**
  * The Spreadsheet component
  */
-const Spreadsheet = React.forwardRef(function Spreadsheet(props, ref) {
-    const { className, columnLabels, rowLabels, toolbar, editable, onKeyDown, Table = DefaultTable, Row = DefaultRow, sheetHeight, HeaderRow = DefaultHeaderRow, DataEditor = DefaultDataEditor, DataViewer = DefaultDataViewer, onSelect = () => { }, onActivate = () => { }, onEvaluatedDataChange = () => { }, contextOption, attachmentAction, workRef, minimumColumnWidth, setContextMenu, showHider, maxRowLimit, maxColLimit, disableDeleteOption, contextMenu, getActiveCell, onAddColumn, onDeleteColumn, } = props;
-    const [sheetChange, setSheetChange] = React.useState(false);
-    const [maxWidth, setMaxWidth] = React.useState(0);
-    const [maxHeight, setMaxHeight] = React.useState(0);
-    const [scrollPos, setScrollPos] = React.useState({ top: 0, left: 0 });
-    const scrollOption = props.scroller;
-    const initialState = React.useMemo(() => {
-        const createParser = (props.createFormulaParser ||
-            createFormulaParser);
-        const model = new Model(createParser, props.data);
-        setSheetChange((prev) => !prev);
-        return {
-            ...INITIAL_STATE,
-            model,
-            selected: props.selected || INITIAL_STATE.selected,
-        };
-    }, [props.createFormulaParser, props.data, props.selected]);
-    const reducerElements = React.useReducer(reducer, initialState);
-    const [state, dispatch] = reducerElements;
-    const [visibleRange, setVisibleRange] = React.useState({
-        start: 0,
-        end: 100,
-    });
-    const [scrollCount, setScrollCount] = React.useState(0);
-    const size = React.useMemo(() => {
-        return calculateSpreadsheetSize(state.model.data, rowLabels, columnLabels);
-    }, [state.model.data, rowLabels, columnLabels]);
-    const mode = state.mode;
-    const rootRef = React.useRef(null);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const useAction = (action) => {
-        return React.useCallback((...args) => dispatch(action(...args)), [action]);
+const Spreadsheet = /*#__PURE__*/React.forwardRef(function Spreadsheet(props, ref) {
+  const {
+    className,
+    columnLabels,
+    rowLabels,
+    toolbar,
+    editable: editable$1,
+    onKeyDown,
+    Table: Table$1 = Table,
+    Row: Row$1 = Row,
+    sheetHeight,
+    HeaderRow: HeaderRow$1 = HeaderRow,
+    DataEditor: DataEditor$1 = DataEditor,
+    DataViewer: DataViewer$1 = DataViewer,
+    onSelect = () => {},
+    onActivate = () => {},
+    onEvaluatedDataChange = () => {},
+    contextOption,
+    attachmentAction,
+    workRef,
+    minimumColumnWidth,
+    setContextMenu,
+    showHider,
+    maxRowLimit,
+    maxColLimit,
+    disableDeleteOption,
+    contextMenu,
+    getActiveCell,
+    onAddColumn,
+    onDeleteColumn
+  } = props;
+  const [sheetChange, setSheetChange] = React.useState(false);
+  const [maxWidth, setMaxWidth] = React.useState(0);
+  const [maxHeight, setMaxHeight] = React.useState(0);
+  const [scrollPos, setScrollPos] = React.useState({
+    top: 0,
+    left: 0
+  });
+  const scrollOption = props.scroller;
+  const initialState = React.useMemo(() => {
+    const createParser = props.createFormulaParser || createFormulaParser;
+    const model = new Model(createParser, props.data);
+    setSheetChange(prev => !prev);
+    return {
+      ...INITIAL_STATE,
+      model,
+      selected: props.selected || INITIAL_STATE.selected
     };
-    const setEditable = useAction(Actions.editable);
-    const cut = useAction(Actions.cut);
-    const copy = useAction(Actions.copy);
-    const removeSelect = useAction(Actions.blur);
-    const paste = useAction(Actions.paste);
-    const onKeyDownAction = useAction(Actions.keyDown);
-    const onKeyPress = useAction(Actions.keyPress);
-    const onDragStart = useAction(Actions.dragStart);
-    const onDragEnd = useAction(Actions.dragEnd);
-    const setData = useAction(Actions.setData);
-    const setCreateFormulaParser = useAction(Actions.setCreateFormulaParser);
-    const setSelection = useAction(Actions.setSelection);
-    const onBold = useAction(Actions.bold);
-    const onItalic = useAction(Actions.italic);
-    const setUnderlineType = useAction(Actions.underlineType);
-    const setTextAlign = useAction(Actions.textAlign);
-    const setFontSize = useAction(Actions.fontSize);
-    const setFontFamily = useAction(Actions.fontFamily);
-    const setBorderType = useAction(Actions.borderType);
-    const setColor = useAction(Actions.color);
-    const setBackgroundColor = useAction(Actions.backgroundStyle);
-    const setFormatePainter = useAction(Actions.formatePainter);
-    const formateClick = useAction(Actions.onMouseUp);
-    const addRowTop = useAction(Actions.addRowTop);
-    const addRowBottom = useAction(Actions.addRowBottom);
-    const addColumnLeft = useAction(Actions.addColumnLeft);
-    const addColumnRight = useAction(Actions.addColumnRight);
-    const deleteRow = useAction(Actions.deleteRow);
-    const deleteColumn = useAction(Actions.deleteColumn);
-    // Expose removeSelect
-    React.useImperativeHandle(ref, () => ({
-        removeSelect,
-    }));
-    // Track active
-    const prevActiveRef = React.useRef(state.active);
-    React.useEffect(() => {
-        if (state.active !== prevActiveRef.current) {
-            if (state.active) {
-                onActivate(state.active);
-            }
-            else {
-                const root = workRef.current;
-                if (root && isFocusedWithin(root) && document.activeElement) {
-                    document.activeElement.blur();
-                }
-            }
-        }
-        prevActiveRef.current = state.active;
-    }, [onActivate, state.active]);
-    const prevEvaluatedDataRef = React.useRef(state.model.evaluatedData);
-    React.useEffect(() => {
-        if (state?.model?.evaluatedData !== prevEvaluatedDataRef?.current) {
-            onEvaluatedDataChange(state?.model?.evaluatedData);
-        }
-        prevEvaluatedDataRef.current = state.model.evaluatedData;
-    }, [state?.model?.evaluatedData, onEvaluatedDataChange]);
-    const prevSelectedRef = React.useRef(state.selected);
-    React.useEffect(() => {
-        if (!state.selected.equals(prevSelectedRef.current)) {
-            if (!props.selected || !state.selected.equals(props.selected)) {
-                onSelect(state.selected);
-            }
-        }
-        prevSelectedRef.current = state.selected;
-    }, [state.selected, onSelect, props.selected]);
-    // Update selection when props.selected changes
-    const prevSelectedPropRef = React.useRef(props.selected);
-    React.useEffect(() => {
-        if (props.selected &&
-            prevSelectedPropRef.current &&
-            !props.selected.equals(prevSelectedPropRef.current)) {
-            setSelection(props.selected);
-        }
-        prevSelectedPropRef.current = props.selected;
-    }, [props.selected, setSelection]);
-    // Update data when props.data changes
-    let prevDataPropRef = React.useRef(props.data);
-    React.useEffect(() => {
-        setEditable(editable);
-        if (props.data !== prevDataPropRef.current) {
-            setData(props.data);
-        }
-        prevDataPropRef.current = props.data;
-    }, [props.data, setData, editable]);
-    const prevCreateFormulaParserPropRef = React.useRef(props.createFormulaParser);
-    React.useEffect(() => {
-        if (props.createFormulaParser !== prevCreateFormulaParserPropRef.current &&
-            props.createFormulaParser)
-            setCreateFormulaParser(props.createFormulaParser);
-        prevCreateFormulaParserPropRef.current = props.createFormulaParser;
-    }, [props.createFormulaParser, setCreateFormulaParser]);
-    const writeDataToClipboard = React.useCallback((event) => {
-        const { model, selected } = state;
-        const { data } = model;
-        const range = selected.toRange(data);
-        if (range) {
-            const selectedData = Matrix.slice(range.start, range.end, data);
-            const csv = getCSV(selectedData);
-            writeTextToClipboard(event, csv);
-        }
-    }, [state]);
-    const handleCut = React.useCallback((event) => {
-        if (shouldHandleClipboardEvent(rootRef.current, mode)) {
-            event.preventDefault();
-            event.stopPropagation();
-            writeDataToClipboard(event);
-            cut();
-        }
-    }, [mode, writeDataToClipboard, cut]);
-    const handleCopy = React.useCallback((event) => {
-        if (shouldHandleClipboardEvent(rootRef.current, mode)) {
-            event.preventDefault();
-            event.stopPropagation();
-            writeDataToClipboard(event);
-            copy();
-        }
-    }, [mode, writeDataToClipboard, copy]);
-    const handlePaste = React.useCallback((event) => {
-        if (shouldHandleClipboardEvent(rootRef.current, mode)) {
-            event.preventDefault();
-            event.stopPropagation();
-            if (event.clipboardData) {
-                const text = readTextFromClipboard(event);
-                paste(text);
-            }
+  }, [props.createFormulaParser, props.data, props.selected]);
+  const reducerElements = React.useReducer(reducer, initialState);
+  const [state, dispatch] = reducerElements;
+  const [visibleRange, setVisibleRange] = React.useState({
+    start: 0,
+    end: 100
+  });
+  const [scrollCount, setScrollCount] = React.useState(0);
+  const size = React.useMemo(() => {
+    return calculateSpreadsheetSize(state.model.data, rowLabels, columnLabels);
+  }, [state.model.data, rowLabels, columnLabels]);
+  const mode = state.mode;
+  const rootRef = React.useRef(null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const useAction = action => {
+    return React.useCallback((...args) => dispatch(action(...args)), [action]);
+  };
+  const setEditable = useAction(editable);
+  const cut$1 = useAction(cut);
+  const copy$1 = useAction(copy);
+  const removeSelect = useAction(blur);
+  const paste$1 = useAction(paste);
+  const onKeyDownAction = useAction(keyDown);
+  const onKeyPress = useAction(keyPress);
+  const onDragStart = useAction(dragStart);
+  const onDragEnd = useAction(dragEnd);
+  const setData$1 = useAction(setData);
+  const setCreateFormulaParser$1 = useAction(setCreateFormulaParser);
+  const setSelection$1 = useAction(setSelection);
+  const onBold = useAction(bold);
+  const onItalic = useAction(italic);
+  const setUnderlineType = useAction(underlineType);
+  const setTextAlign = useAction(textAlign);
+  const setFontSize = useAction(fontSize);
+  const setFontFamily = useAction(fontFamily);
+  const setBorderType = useAction(borderType);
+  const setColor = useAction(color);
+  const setBackgroundColor = useAction(backgroundStyle);
+  const setFormatePainter = useAction(formatePainter);
+  const formateClick = useAction(onMouseUp);
+  const addRowTop$1 = useAction(addRowTop);
+  const addRowBottom$1 = useAction(addRowBottom);
+  const addColumnLeft$1 = useAction(addColumnLeft);
+  const addColumnRight$1 = useAction(addColumnRight);
+  const deleteRow$1 = useAction(deleteRow);
+  const deleteColumn$1 = useAction(deleteColumn);
+  // Expose removeSelect
+  React.useImperativeHandle(ref, () => ({
+    removeSelect
+  }));
+  // Track active
+  const prevActiveRef = React.useRef(state.active);
+  React.useEffect(() => {
+    if (state.active !== prevActiveRef.current) {
+      if (state.active) {
+        onActivate(state.active);
+      } else {
+        const root = workRef.current;
+        if (root && isFocusedWithin(root) && document.activeElement) {
+          document.activeElement.blur();
         }
-    }, [mode, paste]);
-    const handleKeyDown = React.useCallback((event) => {
-        event.persist();
-        if (onKeyDown) {
-            onKeyDown(event);
-        }
-        if (!event.defaultPrevented) {
-            if (hasKeyDownHandler(state, event)) {
-                event.nativeEvent.preventDefault();
-            }
-            onKeyDownAction(event);
-        }
-    }, [state, onKeyDown, onKeyDownAction]);
-    const handleClick = React.useCallback(() => {
-        if (state.formattedStyle.open && state.active) {
-            formateClick(state.active);
-        }
-    }, [state]);
-    const handleMouseUp = React.useCallback(() => {
-        onDragEnd();
-        document.removeEventListener('mouseup', handleMouseUp);
-    }, [onDragEnd]);
-    const handleMouseMove = React.useCallback((event) => {
-        if (!state.dragging && event.buttons === 1) {
-            onDragStart();
-            document.addEventListener('mouseup', handleMouseUp);
-        }
-    }, [state, onDragStart, handleMouseUp]);
-    const Cell = React.useMemo(() => {
-        // @ts-ignore
-        return enhanceCell(props.Cell || DefaultCell);
-    }, [props.Cell, sheetChange, editable]);
-    const CornerIndicator = React.useMemo(() => enhanceCornerIndicator(props.CornerIndicator || DefaultCornerIndicator), [props.CornerIndicator, sheetChange]);
-    const RowIndicator = React.useMemo(() => enhanceRowIndicator(props.RowIndicator || DefaultRowIndicator), [props.RowIndicator, sheetChange]);
-    const ColumnIndicator = React.useMemo(() => enhanceColumnIndicator(props.ColumnIndicator || DefaultColumnIndicator), [props.ColumnIndicator, sheetChange]);
-    React.useEffect(() => {
-        document.addEventListener('cut', handleCut);
-        document.addEventListener('copy', handleCopy);
-        document.addEventListener('paste', handlePaste);
-        return () => {
-            document.removeEventListener('cut', handleCut);
-            document.removeEventListener('copy', handleCopy);
-            document.removeEventListener('paste', handlePaste);
-        };
-    }, [handleCut, handleCopy, handlePaste]);
-    const useTableRef = (ref) => {
-        const resizeObserver = new ResizeObserver((entries) => {
-            const entry = entries[0];
-            if (entry && rootRef.current) {
-                const target = entry.target;
-                if (target) {
-                    const { clientWidth, clientHeight } = target;
-                    setMaxHeight(Math.min(rootRef.current.clientHeight, clientHeight));
-                    if (showHider) {
-                        setMaxWidth(Math.min(rootRef.current.clientWidth, clientWidth));
-                    }
-                }
-            }
-        });
-        const table = ref.current;
-        if (!table)
-            return;
-        resizeObserver.observe(table);
+      }
+    }
+    prevActiveRef.current = state.active;
+  }, [onActivate, state.active]);
+  const prevEvaluatedDataRef = React.useRef(state.model.evaluatedData);
+  React.useEffect(() => {
+    if (state?.model?.evaluatedData !== prevEvaluatedDataRef?.current) {
+      onEvaluatedDataChange(state?.model?.evaluatedData);
+    }
+    prevEvaluatedDataRef.current = state.model.evaluatedData;
+  }, [state?.model?.evaluatedData, onEvaluatedDataChange]);
+  const prevSelectedRef = React.useRef(state.selected);
+  React.useEffect(() => {
+    if (!state.selected.equals(prevSelectedRef.current)) {
+      if (!props.selected || !state.selected.equals(props.selected)) {
+        onSelect(state.selected);
+      }
+    }
+    prevSelectedRef.current = state.selected;
+  }, [state.selected, onSelect, props.selected]);
+  // Update selection when props.selected changes
+  const prevSelectedPropRef = React.useRef(props.selected);
+  React.useEffect(() => {
+    if (props.selected && prevSelectedPropRef.current && !props.selected.equals(prevSelectedPropRef.current)) {
+      setSelection$1(props.selected);
+    }
+    prevSelectedPropRef.current = props.selected;
+  }, [props.selected, setSelection$1]);
+  // Update data when props.data changes
+  let prevDataPropRef = React.useRef(props.data);
+  React.useEffect(() => {
+    setEditable(editable$1);
+    if (props.data !== prevDataPropRef.current) {
+      setData$1(props.data);
+    }
+    prevDataPropRef.current = props.data;
+  }, [props.data, setData$1, editable$1]);
+  const prevCreateFormulaParserPropRef = React.useRef(props.createFormulaParser);
+  React.useEffect(() => {
+    if (props.createFormulaParser !== prevCreateFormulaParserPropRef.current && props.createFormulaParser) setCreateFormulaParser$1(props.createFormulaParser);
+    prevCreateFormulaParserPropRef.current = props.createFormulaParser;
+  }, [props.createFormulaParser, setCreateFormulaParser$1]);
+  const writeDataToClipboard = React.useCallback(event => {
+    const {
+      model,
+      selected
+    } = state;
+    const {
+      data
+    } = model;
+    const range = selected.toRange(data);
+    if (range) {
+      const selectedData = slice(range.start, range.end, data);
+      const csv = getCSV(selectedData);
+      writeTextToClipboard(event, csv);
+    }
+  }, [state]);
+  const handleCut = React.useCallback(event => {
+    if (shouldHandleClipboardEvent(rootRef.current, mode)) {
+      event.preventDefault();
+      event.stopPropagation();
+      writeDataToClipboard(event);
+      cut$1();
+    }
+  }, [mode, writeDataToClipboard, cut$1]);
+  const handleCopy = React.useCallback(event => {
+    if (shouldHandleClipboardEvent(rootRef.current, mode)) {
+      event.preventDefault();
+      event.stopPropagation();
+      writeDataToClipboard(event);
+      copy$1();
+    }
+  }, [mode, writeDataToClipboard, copy$1]);
+  const handlePaste = React.useCallback(event => {
+    if (shouldHandleClipboardEvent(rootRef.current, mode)) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (event.clipboardData) {
+        const text = readTextFromClipboard(event);
+        paste$1(text);
+      }
+    }
+  }, [mode, paste$1]);
+  const handleKeyDown = React.useCallback(event => {
+    event.persist();
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+    if (!event.defaultPrevented) {
+      if (hasKeyDownHandler(state, event)) {
+        event.nativeEvent.preventDefault();
+      }
+      onKeyDownAction(event);
+    }
+  }, [state, onKeyDown, onKeyDownAction]);
+  const handleClick = React.useCallback(() => {
+    if (state.formattedStyle.open && state.active) {
+      formateClick(state.active);
+    }
+  }, [state]);
+  const handleMouseUp = React.useCallback(() => {
+    onDragEnd();
+    document.removeEventListener('mouseup', handleMouseUp);
+  }, [onDragEnd]);
+  const handleMouseMove = React.useCallback(event => {
+    if (!state.dragging && event.buttons === 1) {
+      onDragStart();
+      document.addEventListener('mouseup', handleMouseUp);
+    }
+  }, [state, onDragStart, handleMouseUp]);
+  const Cell$1 = React.useMemo(() => {
+    // @ts-ignore
+    return enhance(props.Cell || Cell);
+  }, [props.Cell, sheetChange, editable$1]);
+  const CornerIndicator$1 = React.useMemo(() => enhance$1(props.CornerIndicator || CornerIndicator), [props.CornerIndicator, sheetChange]);
+  const RowIndicator$1 = React.useMemo(() => enhance$2(props.RowIndicator || RowIndicator), [props.RowIndicator, sheetChange]);
+  const ColumnIndicator = React.useMemo(() => enhance$3(props.ColumnIndicator || EnhancedColumnIndicator), [props.ColumnIndicator, sheetChange]);
+  React.useEffect(() => {
+    document.addEventListener('cut', handleCut);
+    document.addEventListener('copy', handleCopy);
+    document.addEventListener('paste', handlePaste);
+    return () => {
+      document.removeEventListener('cut', handleCut);
+      document.removeEventListener('copy', handleCopy);
+      document.removeEventListener('paste', handlePaste);
     };
-    const updateVisibleRange = (newStart, newEnd, newScrollCount) => {
-        setScrollCount(newScrollCount);
-        setVisibleRange({ start: newStart, end: newEnd });
-        // Wait until next frame to scroll
-        if (size.rows > 100) {
-            requestAnimationFrame(() => {
-                rootRef.current?.scrollTo({
-                    top: 1300,
-                    behavior: 'instant',
-                });
-            });
+  }, [handleCut, handleCopy, handlePaste]);
+  const useTableRef = ref => {
+    const resizeObserver = new ResizeObserver(entries => {
+      const entry = entries[0];
+      if (entry && rootRef.current) {
+        const target = entry.target;
+        if (target) {
+          const {
+            clientWidth,
+            clientHeight
+          } = target;
+          setMaxHeight(Math.min(rootRef.current.clientHeight, clientHeight));
+          if (showHider) {
+            setMaxWidth(Math.min(rootRef.current.clientWidth, clientWidth));
+          }
         }
-    };
-    const throttledHandleScroll = React.useMemo(() => throttle((e) => {
-        requestAnimationFrame(() => {
-            const { scrollTop, scrollHeight, offsetHeight } = e.target;
-            const visibleRows = 100;
-            const rowHeight = 50;
-            const totalScroll = Math.ceil((size.rows - visibleRows) / rowHeight);
-            const dynamicScroll = scrollHeight - offsetHeight;
-            if (size.rows < visibleRows) {
-                updateVisibleRange(0, size.rows, 0);
-                setScrollCount(0);
-            }
-            else if (scrollTop === 0 && scrollCount !== 0) {
-                const newScroll = scrollCount - 1;
-                updateVisibleRange(newScroll * rowHeight, newScroll * rowHeight + visibleRows, newScroll);
-                setScrollCount(newScroll);
-            }
-            else if (scrollTop > dynamicScroll - 30 &&
-                scrollCount < totalScroll - 1) {
-                const newScroll = scrollCount + 1;
-                updateVisibleRange(newScroll * rowHeight, newScroll * rowHeight + visibleRows, newScroll);
-                setScrollCount(newScroll);
-            }
-            else if (scrollTop > dynamicScroll - 30 &&
-                scrollCount < totalScroll) {
-                updateVisibleRange((scrollCount + 1) * rowHeight, size.rows, scrollCount + 1);
-                setScrollCount(scrollCount + 1);
-            }
-        });
-        setContextMenu({
-            open: false,
-            contextType: null,
-            options: [
-                {
-                    label: '',
-                    value: '',
-                    iconName: '',
-                    action: () => { },
-                    disableTooltip: '',
-                    visible: false,
-                    disable: false,
-                },
-            ],
+      }
+    });
+    const table = ref.current;
+    if (!table) return;
+    resizeObserver.observe(table);
+  };
+  const updateVisibleRange = (newStart, newEnd, newScrollCount) => {
+    setScrollCount(newScrollCount);
+    setVisibleRange({
+      start: newStart,
+      end: newEnd
+    });
+    // Wait until next frame to scroll
+    if (size.rows > 100) {
+      requestAnimationFrame(() => {
+        rootRef.current?.scrollTo({
+          top: 1300,
+          behavior: 'instant'
         });
-    }, 100), [size.rows, scrollCount]);
-    const scrollerFunction = () => {
-        if (scrollOption) {
-            return range(visibleRange.end, visibleRange.start);
+      });
+    }
+  };
+  const throttledHandleScroll = React.useMemo(() => throttle(e => {
+    requestAnimationFrame(() => {
+      const {
+        scrollTop,
+        scrollHeight,
+        offsetHeight
+      } = e.target;
+      const visibleRows = 100;
+      const rowHeight = 50;
+      const totalScroll = Math.ceil((size.rows - visibleRows) / rowHeight);
+      const dynamicScroll = scrollHeight - offsetHeight;
+      if (size.rows < visibleRows) {
+        updateVisibleRange(0, size.rows, 0);
+        setScrollCount(0);
+      } else if (scrollTop === 0 && scrollCount !== 0) {
+        const newScroll = scrollCount - 1;
+        updateVisibleRange(newScroll * rowHeight, newScroll * rowHeight + visibleRows, newScroll);
+        setScrollCount(newScroll);
+      } else if (scrollTop > dynamicScroll - 30 && scrollCount < totalScroll - 1) {
+        const newScroll = scrollCount + 1;
+        updateVisibleRange(newScroll * rowHeight, newScroll * rowHeight + visibleRows, newScroll);
+        setScrollCount(newScroll);
+      } else if (scrollTop > dynamicScroll - 30 && scrollCount < totalScroll) {
+        updateVisibleRange((scrollCount + 1) * rowHeight, size.rows, scrollCount + 1);
+        setScrollCount(scrollCount + 1);
+      }
+    });
+    setContextMenu({
+      open: false,
+      contextType: null,
+      options: [{
+        label: '',
+        value: '',
+        iconName: '',
+        action: () => {},
+        disableTooltip: '',
+        visible: false,
+        disable: false
+      }]
+    });
+  }, 100), [size.rows, scrollCount]);
+  const scrollerFunction = () => {
+    if (scrollOption) {
+      return range(visibleRange.end, visibleRange.start);
+    } else {
+      return range(size.rows);
+    }
+  };
+  const scrollToRow = (row, visibleRangeValue) => {
+    const DEFAULT_ROW_HEIGHT = 32;
+    if (scrollOption) {
+      if (!rootRef?.current) return;
+      requestAnimationFrame(() => {
+        let scrollTop = 0;
+        for (let r = 0; r <= row; r++) {
+          scrollTop += state.rowDimensions?.[r]?.height || DEFAULT_ROW_HEIGHT;
         }
-        else {
-            return range(size.rows);
+        if (row >= visibleRange.end - 1) {
+          setVisibleRange(prev => ({
+            ...prev,
+            start: visibleRangeValue?.start,
+            end: visibleRangeValue?.end
+          }));
+          rootRef?.current?.scrollTo({
+            top: scrollTop + DEFAULT_ROW_HEIGHT,
+            behavior: 'smooth'
+          });
         }
-    };
-    const scrollToRow = (row, visibleRangeValue) => {
-        const DEFAULT_ROW_HEIGHT = 32;
-        if (scrollOption) {
-            if (!rootRef?.current)
-                return;
-            requestAnimationFrame(() => {
-                let scrollTop = 0;
-                for (let r = 0; r <= row; r++) {
-                    scrollTop += state.rowDimensions?.[r]?.height || DEFAULT_ROW_HEIGHT;
-                }
-                if (row >= visibleRange.end - 1) {
-                    setVisibleRange((prev) => ({
-                        ...prev,
-                        start: visibleRangeValue?.start,
-                        end: visibleRangeValue?.end,
-                    }));
-                    rootRef?.current?.scrollTo({
-                        top: scrollTop + DEFAULT_ROW_HEIGHT,
-                        behavior: 'smooth',
-                    });
-                }
-            });
+      });
+    } else {
+      requestAnimationFrame(() => {
+        let scrollTop = 0;
+        for (let r = 0; r <= row; r++) {
+          scrollTop += state.rowDimensions?.[r]?.height || DEFAULT_ROW_HEIGHT;
         }
-        else {
-            requestAnimationFrame(() => {
-                let scrollTop = 0;
-                for (let r = 0; r <= row; r++) {
-                    scrollTop += state.rowDimensions?.[r]?.height || DEFAULT_ROW_HEIGHT;
-                }
-                requestAnimationFrame(() => {
-                    if (!rootRef.current)
-                        return;
-                    if (row >= size.rows - 1) {
-                        rootRef?.current?.scrollTo({
-                            top: scrollTop + DEFAULT_ROW_HEIGHT,
-                            behavior: 'smooth',
-                        });
-                    }
-                });
-            });
-        }
-    };
-    const scrollToColumn = (column) => {
         requestAnimationFrame(() => {
-            let scrollLeft = 0;
-            for (let c = 0; c <= column; c++) {
-                scrollLeft += state.columnDimensions?.[c]?.left || minimumColumnWidth;
-            }
-            requestAnimationFrame(() => {
-                if (!rootRef.current)
-                    return;
-                if (column >= size.columns - 1) {
-                    rootRef.current.scrollTo({
-                        left: scrollLeft + 60,
-                        behavior: 'smooth',
-                    });
-                }
+          if (!rootRef.current) return;
+          if (row >= size.rows - 1) {
+            rootRef?.current?.scrollTo({
+              top: scrollTop + DEFAULT_ROW_HEIGHT,
+              behavior: 'smooth'
             });
+          }
         });
-    };
-    const tableNode = React.useMemo(() => (_jsxs(Table, { columns: size.columns, hideColumnIndicators: false, useTableRef: useTableRef, children: [_jsxs(HeaderRow, { children: [_jsx(CornerIndicator, {}), range(size.columns).map((columnNumber) => columnLabels ? (_jsx(ColumnIndicator, { column: columnNumber, minimumColumnWidth: minimumColumnWidth, setContextMenu: props.setContextMenu, label: columnNumber in columnLabels
-                            ? columnLabels[columnNumber]
-                            : null, deleteColumn: deleteColumn, addColumnLeft: addColumnLeft, addColumnRight: addColumnRight, columnContextEnable: props.columnContextEnable, maxColLimit: maxColLimit, disableDeleteOption: disableDeleteOption, contextMenu: contextMenu, onAddColumn: onAddColumn, onDeleteColumn: onDeleteColumn, scrollToColumn: scrollToColumn }, columnNumber)) : (_jsx(ColumnIndicator, { column: columnNumber, minimumColumnWidth: minimumColumnWidth, setContextMenu: props.setContextMenu, deleteColumn: deleteColumn, addColumnLeft: addColumnLeft, addColumnRight: addColumnRight, columnContextEnable: props.columnContextEnable, maxColLimit: maxColLimit, disableDeleteOption: disableDeleteOption, contextMenu: contextMenu, onAddColumn: onAddColumn, onDeleteColumn: onDeleteColumn, scrollToColumn: scrollToColumn }, columnNumber)))] }), scrollerFunction().map((rowNumber) => (_jsxs(Row, { row: rowNumber, children: [rowLabels ? (_jsx(RowIndicator, { label: rowNumber in rowLabels ? rowLabels[rowNumber] : null, row: rowNumber, addRowTop: addRowTop, addRowBottom: addRowBottom, deleteRow: deleteRow, setContextMenu: props.setContextMenu, rowContextEnable: props.rowContextEnable, maxRowLimit: maxRowLimit, disableDeleteOption: disableDeleteOption, contextMenu: contextMenu, setVisibleRange: setVisibleRange, scrollToRow: scrollToRow }, rowNumber)) : (_jsx(RowIndicator, { row: rowNumber, addRowTop: addRowTop, addRowBottom: addRowBottom, deleteRow: deleteRow, setContextMenu: props.setContextMenu, rowContextEnable: props.rowContextEnable, maxRowLimit: maxRowLimit, disableDeleteOption: disableDeleteOption, contextMenu: contextMenu, setVisibleRange: setVisibleRange, scrollToRow: scrollToRow }, rowNumber)), range(size.columns).map((columnNumber) => (_jsx(Cell, { row: rowNumber, column: columnNumber, 
-                        // @ts-ignore
-                        DataViewer: DataViewer, editable: editable }, columnNumber)))] }, rowNumber)))] })), [
-        Table,
-        size.rows,
-        size.columns,
-        Row,
-        HeaderRow,
-        CornerIndicator,
-        columnLabels,
-        ColumnIndicator,
-        rowLabels,
-        RowIndicator,
-        Cell,
-        DataViewer,
-        visibleRange.end,
-        visibleRange.start,
-    ]);
-    const activeCellNode = React.useMemo(() => (_jsx(ActiveCell, { attachmentAction: attachmentAction, contextOption: contextOption, getActiveCell: getActiveCell, setContextMenu: props.setContextMenu, 
+      });
+    }
+  };
+  const scrollToColumn = column => {
+    requestAnimationFrame(() => {
+      let scrollLeft = 0;
+      for (let c = 0; c <= column; c++) {
+        scrollLeft += state.columnDimensions?.[c]?.left || minimumColumnWidth;
+      }
+      requestAnimationFrame(() => {
+        if (!rootRef.current) return;
+        if (column >= size.columns - 1) {
+          rootRef.current.scrollTo({
+            left: scrollLeft + 60,
+            behavior: 'smooth'
+          });
+        }
+      });
+    });
+  };
+  const tableNode = React.useMemo(() => jsxs(Table$1, {
+    columns: size.columns,
+    hideColumnIndicators: false,
+    useTableRef: useTableRef,
+    children: [jsxs(HeaderRow$1, {
+      children: [jsx(CornerIndicator$1, {}), range(size.columns).map(columnNumber => columnLabels ? jsx(ColumnIndicator, {
+        column: columnNumber,
+        minimumColumnWidth: minimumColumnWidth,
+        setContextMenu: props.setContextMenu,
+        label: columnNumber in columnLabels ? columnLabels[columnNumber] : null,
+        deleteColumn: deleteColumn$1,
+        addColumnLeft: addColumnLeft$1,
+        addColumnRight: addColumnRight$1,
+        columnContextEnable: props.columnContextEnable,
+        maxColLimit: maxColLimit,
+        disableDeleteOption: disableDeleteOption,
+        contextMenu: contextMenu,
+        onAddColumn: onAddColumn,
+        onDeleteColumn: onDeleteColumn,
+        scrollToColumn: scrollToColumn
+      }, columnNumber) : jsx(ColumnIndicator, {
+        column: columnNumber,
+        minimumColumnWidth: minimumColumnWidth,
+        setContextMenu: props.setContextMenu,
+        deleteColumn: deleteColumn$1,
+        addColumnLeft: addColumnLeft$1,
+        addColumnRight: addColumnRight$1,
+        columnContextEnable: props.columnContextEnable,
+        maxColLimit: maxColLimit,
+        disableDeleteOption: disableDeleteOption,
+        contextMenu: contextMenu,
+        onAddColumn: onAddColumn,
+        onDeleteColumn: onDeleteColumn,
+        scrollToColumn: scrollToColumn
+      }, columnNumber))]
+    }), scrollerFunction().map(rowNumber => jsxs(Row$1, {
+      row: rowNumber,
+      children: [rowLabels ? jsx(RowIndicator$1, {
+        label: rowNumber in rowLabels ? rowLabels[rowNumber] : null,
+        row: rowNumber,
+        addRowTop: addRowTop$1,
+        addRowBottom: addRowBottom$1,
+        deleteRow: deleteRow$1,
+        setContextMenu: props.setContextMenu,
+        rowContextEnable: props.rowContextEnable,
+        maxRowLimit: maxRowLimit,
+        disableDeleteOption: disableDeleteOption,
+        contextMenu: contextMenu,
+        setVisibleRange: setVisibleRange,
+        scrollToRow: scrollToRow
+      }, rowNumber) : jsx(RowIndicator$1, {
+        row: rowNumber,
+        addRowTop: addRowTop$1,
+        addRowBottom: addRowBottom$1,
+        deleteRow: deleteRow$1,
+        setContextMenu: props.setContextMenu,
+        rowContextEnable: props.rowContextEnable,
+        maxRowLimit: maxRowLimit,
+        disableDeleteOption: disableDeleteOption,
+        contextMenu: contextMenu,
+        setVisibleRange: setVisibleRange,
+        scrollToRow: scrollToRow
+      }, rowNumber), range(size.columns).map(columnNumber => jsx(Cell$1, {
+        row: rowNumber,
+        column: columnNumber,
         // @ts-ignore
-        DataEditor: DataEditor, visibleRange: visibleRange })), [DataEditor, visibleRange]);
-    const rootNode = React.useMemo(() => (_jsxs("div", { className: "ff-excel-spreadsheet-container", children: [_jsx("div", { style: { width: `${maxWidth}px` }, className: classNames('ff-excel-header-column-hider', {
-                    'ff-excel-header-extend': ['show', 'disable'].includes(toolbar || ''),
-                    'ff-excel-header-hider': toolbar === 'hide',
-                }) }), _jsx("div", { style: { height: `${maxHeight}px` }, className: classNames('ff-excel-header-column-hider', {
-                    'ff-excel-header-extend': ['show', 'disable'].includes(toolbar || ''),
-                    'ff-excel-header-hider': toolbar === 'hide',
-                }) }), toolbar !== 'hide' && (_jsx("div", { className: "ff-excel-toolbar-container", children: _jsx(ExcelToolBar, { editable: editable, toolbar: toolbar, onBold: onBold, onItalic: onItalic, setUnderlineType: setUnderlineType, setColor: setColor, setBorderType: setBorderType, setFontSize: setFontSize, setFontFamily: setFontFamily, setTextAlign: setTextAlign, setBackgroundColor: setBackgroundColor, setFormatePainter: setFormatePainter }) })), _jsxs("div", { ref: rootRef, style: { height: sheetHeight }, className: classNames('ff-excel-spreadsheet', className), onKeyPress: onKeyPress, onKeyDown: handleKeyDown, onClick: handleClick, onMouseMove: handleMouseMove, onScroll: (e) => {
-                    const target = e.target;
-                    setScrollPos({ top: target.scrollTop, left: target.scrollLeft });
-                    scrollOption && throttledHandleScroll(e);
-                    setContextMenu({
-                        open: false,
-                        contextType: null,
-                        options: [
-                            {
-                                label: '',
-                                value: '',
-                                iconName: '',
-                                action: () => { },
-                                disableTooltip: '',
-                                visible: false,
-                                disable: false,
-                            },
-                        ],
-                    });
-                }, children: [tableNode, activeCellNode, _jsx(Selected, { visibleRange: visibleRange, scrollPos: scrollPos }), _jsx(Copied, { visibleRange: visibleRange, scrollPos: scrollPos })] })] })), [
-        className,
-        onKeyPress,
-        handleKeyDown,
-        handleMouseMove,
-        tableNode,
-        activeCellNode,
-        maxWidth,
-    ]);
-    return (_jsx(context.Provider, { value: reducerElements, children: rootNode }));
+        DataViewer: DataViewer$1,
+        editable: editable$1
+      }, columnNumber))]
+    }, rowNumber))]
+  }), [Table$1, size.rows, size.columns, Row$1, HeaderRow$1, CornerIndicator$1, columnLabels, ColumnIndicator, rowLabels, RowIndicator$1, Cell$1, DataViewer$1, visibleRange.end, visibleRange.start]);
+  const activeCellNode = React.useMemo(() => jsx(ActiveCell, {
+    attachmentAction: attachmentAction,
+    contextOption: contextOption,
+    getActiveCell: getActiveCell,
+    setContextMenu: props.setContextMenu,
+    // @ts-ignore
+    DataEditor: DataEditor$1,
+    visibleRange: visibleRange
+  }), [DataEditor$1, visibleRange]);
+  const rootNode = React.useMemo(() => jsxs("div", {
+    className: "ff-excel-spreadsheet-container",
+    children: [jsx("div", {
+      style: {
+        width: `${maxWidth}px`
+      },
+      className: classNames('ff-excel-header-column-hider', {
+        'ff-excel-header-extend': ['show', 'disable'].includes(toolbar || ''),
+        'ff-excel-header-hider': toolbar === 'hide'
+      })
+    }), jsx("div", {
+      style: {
+        height: `${maxHeight}px`
+      },
+      className: classNames('ff-excel-header-column-hider', {
+        'ff-excel-header-extend': ['show', 'disable'].includes(toolbar || ''),
+        'ff-excel-header-hider': toolbar === 'hide'
+      })
+    }), toolbar !== 'hide' && jsx("div", {
+      className: "ff-excel-toolbar-container",
+      children: jsx(ExcelToolBar, {
+        editable: editable$1,
+        toolbar: toolbar,
+        onBold: onBold,
+        onItalic: onItalic,
+        setUnderlineType: setUnderlineType,
+        setColor: setColor,
+        setBorderType: setBorderType,
+        setFontSize: setFontSize,
+        setFontFamily: setFontFamily,
+        setTextAlign: setTextAlign,
+        setBackgroundColor: setBackgroundColor,
+        setFormatePainter: setFormatePainter
+      })
+    }), jsxs("div", {
+      ref: rootRef,
+      style: {
+        height: sheetHeight
+      },
+      className: classNames('ff-excel-spreadsheet', className),
+      onKeyPress: onKeyPress,
+      onKeyDown: handleKeyDown,
+      onClick: handleClick,
+      onMouseMove: handleMouseMove,
+      onScroll: e => {
+        const target = e.target;
+        setScrollPos({
+          top: target.scrollTop,
+          left: target.scrollLeft
+        });
+        scrollOption && throttledHandleScroll(e);
+        setContextMenu({
+          open: false,
+          contextType: null,
+          options: [{
+            label: '',
+            value: '',
+            iconName: '',
+            action: () => {},
+            disableTooltip: '',
+            visible: false,
+            disable: false
+          }]
+        });
+      },
+      children: [tableNode, activeCellNode, jsx(Selected, {
+        visibleRange: visibleRange,
+        scrollPos: scrollPos
+      }), jsx(Copied, {
+        visibleRange: visibleRange,
+        scrollPos: scrollPos
+      })]
+    })]
+  }), [className, onKeyPress, handleKeyDown, handleMouseMove, tableNode, activeCellNode, maxWidth]);
+  return jsx(context.Provider, {
+    value: reducerElements,
+    children: rootNode
+  });
 });
-export default Spreadsheet;
-//# sourceMappingURL=Spreadsheet.js.map
+
+export { Spreadsheet as default };
+//# sourceMappingURL=Spreadsheet.js.map