abdul-react 0.0.31 → 0.0.33

package/lib/index.cjs

@@ -11932,7 +11932,7 @@ const getColumnLeftPosition = (index, columns, freezeColumns) => {
   for (let i = 0; i < index; i++) {
     const width = columns[i]?.width;
     // Add column width plus left padding only
-    leftPosition += width ? parseInt(width.toString(), 10) : DEFAULT_COLUMN_WIDTH;
+    leftPosition += width ? parseInt(width.toString(), 10) : DEFAULT_COLUMN_WIDTH$1;
     // Add padding between frozen columns
     if (freezeColumns && i < freezeColumns - 1) {
       leftPosition += CELL_PADDING;
@@ -11940,9 +11940,9 @@ const getColumnLeftPosition = (index, columns, freezeColumns) => {
   }
   return `${leftPosition}px`;
 };
-const DEFAULT_COLUMN_WIDTH = 400;
+const DEFAULT_COLUMN_WIDTH$1 = 400;
 const calculateFrozenWidth = (columnData, freezeColumns) => {
-  return columnData.slice(0, freezeColumns).reduce((acc, col) => acc + parseInt(col.width?.toString() || `${DEFAULT_COLUMN_WIDTH}`, 10), 1) + 8 * (freezeColumns - 0.17);
+  return columnData.slice(0, freezeColumns).reduce((acc, col) => acc + parseInt(col.width?.toString() || `${DEFAULT_COLUMN_WIDTH$1}`, 10), 1) + 8 * (freezeColumns - 0.17);
 };
 const SortableRow = ({
   row,
@@ -36952,6 +36952,11 @@ class InvalidIndexError extends Error {
 
 const PLAIN_TEXT_MIME = 'text/plain';
 const FOCUS_WITHIN_SELECTOR = ':focus-within';
+/** Constants for defaults */
+const DEFAULT_ROW_HEIGHT = 32;
+const DEFAULT_COLUMN_WIDTH = 100;
+const HEADER_HEIGHT = 32;
+const ROW_INDICATOR_WIDTH = 60;
 /** Move the cursor of given input element to the input's end */
 function moveCursorToEnd(el) {
   el.selectionStart = el.selectionEnd = el.value.length;
@@ -37132,22 +37137,38 @@ function deleteColumnDimension(columns, deleteIndex) {
   }
   return updated;
 }
+/** Get the row top position (cumulative) */
+function getRowTop(row, rowDimensions) {
+  const rowDim = rowDimensions[row];
+  if (rowDim) {
+    return rowDim.top || row * DEFAULT_ROW_HEIGHT;
+  }
+  return row * DEFAULT_ROW_HEIGHT;
+}
+/** Get the row height */
+function getRowHeight(row, rowDimensions) {
+  const rowDim = rowDimensions[row];
+  return rowDim ? rowDim.height || DEFAULT_ROW_HEIGHT : DEFAULT_ROW_HEIGHT;
+}
+/** Get the column left position (cumulative) */
+function getColumnLeft(column, columnDimensions) {
+  const colDim = columnDimensions[column];
+  if (colDim) {
+    return colDim.left || column * DEFAULT_COLUMN_WIDTH;
+  }
+  return column * DEFAULT_COLUMN_WIDTH;
+}
+/** Get the column width */
+function getColumnWidth(column, columnDimensions) {
+  const colDim = columnDimensions[column];
+  return colDim ? colDim.width || DEFAULT_COLUMN_WIDTH : DEFAULT_COLUMN_WIDTH;
+}
 /** Get the dimensions of cell at point from state */
 function getCellDimensions(point, rowDimensions, columnDimensions) {
-  const DEFAULT_ROW_HEIGHT = 32;
-  const DEFAULT_COLUMN_WIDTH = 100; // Use your minimumColumnWidth or a default value; adjust based on props if needed
-  const HEADER_HEIGHT = 32; // Adjust based on your header row height (e.g., from CSS or measured)
-  const ROW_INDICATOR_WIDTH = 60; // From your RowIndicator minWidth style
-  let top = HEADER_HEIGHT;
-  for (let r = 0; r < point.row; r++) {
-    top += (rowDimensions?.[r] ? rowDimensions?.[r]?.height : DEFAULT_ROW_HEIGHT) || DEFAULT_ROW_HEIGHT;
-  }
-  const height = (rowDimensions?.[point.row] ? rowDimensions?.[point.row]?.height : DEFAULT_ROW_HEIGHT) || DEFAULT_ROW_HEIGHT;
-  let left = ROW_INDICATOR_WIDTH;
-  for (let c = 0; c < point.column; c++) {
-    left += (columnDimensions?.[c] ? columnDimensions?.[c]?.width : DEFAULT_COLUMN_WIDTH) || DEFAULT_COLUMN_WIDTH;
-  }
-  const width = (columnDimensions?.[point.column] ? columnDimensions?.[point.column]?.width : DEFAULT_COLUMN_WIDTH) || DEFAULT_COLUMN_WIDTH;
+  const top = HEADER_HEIGHT + getRowTop(point.row, rowDimensions);
+  const height = getRowHeight(point.row, rowDimensions);
+  const left = ROW_INDICATOR_WIDTH + getColumnLeft(point.column, columnDimensions);
+  const width = getColumnWidth(point.column, columnDimensions);
   return {
     top,
     height,
@@ -37229,63 +37250,6 @@ const EmptyCell = {
 const fontFamilyList = [{
   label: 'Times New Roman',
   value: 'Times New Roman'
-}, {
-  label: 'Arial',
-  value: 'Arial'
-}, {
-  label: 'fantasy',
-  value: 'fantasy'
-}, {
-  label: 'cursive',
-  value: 'cursive'
-}, {
-  label: 'Poppins',
-  value: 'Poppins'
-}, {
-  label: 'Courier New',
-  value: '"Courier New"'
-}, {
-  label: 'Verdana',
-  value: 'Verdana'
-}, {
-  label: 'Tahoma',
-  value: 'Tahoma'
-}, {
-  label: 'Trebuchet MS',
-  value: 'Trebuchet MS'
-}, {
-  label: 'Comic Sans MS',
-  value: 'Comic Sans MS'
-}, {
-  label: 'Impact',
-  value: 'Impact'
-}, {
-  label: 'Arial Black',
-  value: 'Arial Black'
-}, {
-  label: 'Lucida Console',
-  value: 'Lucida Console'
-}, {
-  label: 'Lucida Sans Unicode',
-  value: 'Lucida Sans Unicode'
-}, {
-  label: 'Courier',
-  value: 'Courier'
-}, {
-  label: 'Arial Rounded MT Bold',
-  value: 'Arial Rounded MT Bold'
-}, {
-  label: 'Georgia',
-  value: 'Georgia'
-}, {
-  label: 'sans-serif',
-  value: 'sans-serif'
-}, {
-  label: 'serif',
-  value: 'serif'
-}, {
-  label: 'monospace',
-  value: 'monospace'
 }];
 const fontSizeList = [5, 6, 8, 9, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 32, 36, 40, 48, 56, 72];
 const isPasteAllowed = currentCell => {
@@ -37300,30 +37264,30 @@ function getMatrixDimensions(matrixData) {
     columnCount
   };
 }
-function getVisibleRangeDimensions(fullRange, visibleRange, rowDimensions, columnDimensions) {
-  const DEFAULT_ROW_HEIGHT = 32;
-  const DEFAULT_COLUMN_WIDTH = 100;
+function getVisibleRangeDimensions(fullRange, visibleRange, rowDimensions, columnDimensions, visibleColRange) {
   if (!fullRange) return undefined;
   const clippedStartRow = Math.max(fullRange?.start?.row, visibleRange?.start);
   const clippedEndRow = Math.min(fullRange?.end?.row, visibleRange?.end - 1);
-  if (clippedStartRow > clippedEndRow) {
+  const clippedStartCol = Math.max(fullRange?.start?.column, visibleColRange.start);
+  const clippedEndCol = Math.min(fullRange?.end?.column, visibleColRange.end - 1);
+  if (clippedStartRow > clippedEndRow || clippedStartCol > clippedEndCol) {
     return undefined;
   }
   let top = 0;
   for (let row = visibleRange?.start; row < clippedStartRow; row++) {
-    top += rowDimensions?.[row]?.height || DEFAULT_ROW_HEIGHT;
+    top += getRowHeight(row, rowDimensions);
   }
   let height = 0;
   for (let row = clippedStartRow; row <= clippedEndRow; row++) {
-    height += rowDimensions?.[row]?.height || DEFAULT_ROW_HEIGHT;
+    height += getRowHeight(row, rowDimensions);
   }
   let left = 0;
-  for (let col = 0; col < fullRange?.start?.column; col++) {
-    left += columnDimensions?.[col]?.width || DEFAULT_COLUMN_WIDTH;
+  for (let col = visibleColRange.start; col < clippedStartCol; col++) {
+    left += getColumnWidth(col, columnDimensions);
   }
   let width = 0;
-  for (let col = fullRange?.start?.column; col <= fullRange?.end?.column; col++) {
-    width += columnDimensions?.[col]?.width || DEFAULT_COLUMN_WIDTH;
+  for (let col = clippedStartCol; col <= clippedEndCol; col++) {
+    width += getColumnWidth(col, columnDimensions);
   }
   return {
     top,
@@ -40876,7 +40840,7 @@ const ColumnIndicator = ({
     tabIndex: 0,
     children: [jsxRuntime.jsx(Typography, {
       fontWeight: "medium",
-      children: label !== undefined ? label : columnIndexToLabel(column)
+      children: label ?? columnIndexToLabel(column)
     }), jsxRuntime.jsx("div", {
       className: "drag-column-selector drag-column-left",
       onMouseDown: e => onMouseDrag(e, false),
@@ -40894,7 +40858,7 @@ const ColumnIndicator = ({
         column
       })
     })]
-  });
+  }, column);
 };
 const enhance$2 = ColumnIndicatorComponent => {
   return function ColumnIndicatorWrapper(props) {
@@ -41301,37 +41265,23 @@ const ActiveCell = props => {
   const view = React__namespace.useCallback(() => {
     dispatch(view$1());
   }, [dispatch]);
-  const rowDimensions = useSelector(state => state.rowDimensions);
   const active = useSelector(state => state.active);
   const mode = useSelector(state => state.mode);
   const cell = useSelector(state => state.active ? get$1(state.active, state.model.data) : undefined);
   const dimensions = useSelector(state => {
     let dimensionValue = active ? getCellDimensions(active, state.rowDimensions, state.columnDimensions) : undefined;
-    dimensionValue = {
-      top: dimensionValue?.top ? dimensionValue?.top : 0,
-      height: dimensionValue?.height ? dimensionValue?.height : 0,
-      left: dimensionValue?.left ? dimensionValue?.left : 0,
-      // Note: +1 Because of Active cell width is 2px
-      width: dimensionValue?.width ? dimensionValue?.width : 0
-    };
     return dimensionValue;
   });
-  const offset = React__namespace.useMemo(() => {
-    let sum = 0;
-    const DEFAULT_ROW_HEIGHT = 32;
-    for (let r = 0; r < props.visibleRange.start; r++) {
-      sum += rowDimensions[r]?.height || DEFAULT_ROW_HEIGHT;
-    }
-    return sum;
-  }, [rowDimensions, props.visibleRange.start]);
   const adjustedDimensions = React__namespace.useMemo(() => {
     if (!dimensions) return undefined;
     return {
-      ...dimensions,
-      top: dimensions.top - offset
+      top: dimensions.top - 32,
+      height: dimensions.height,
+      left: dimensions.left - 60,
+      width: dimensions.width
     };
-  }, [dimensions, offset]);
-  const hidden = React__namespace.useMemo(() => !active || !dimensions || active.row < props.visibleRange.start || active.row >= props.visibleRange.end, [active, dimensions, props.visibleRange]);
+  }, [dimensions, props.scrollPos]);
+  const hidden = React__namespace.useMemo(() => !active || !dimensions || active.row < props.visibleRowRange.start || active.row >= props.visibleRowRange.end || active.column < props.visibleColRange.start || active.column >= props.visibleColRange.end, [active, dimensions, props.visibleRowRange, props.visibleColRange]);
   const initialCellRef = React__namespace.useRef(undefined);
   const prevActiveRef = React__namespace.useRef(null);
   const prevCellRef = React__namespace.useRef(undefined);
@@ -41743,7 +41693,7 @@ const ActiveCell = props => {
       selectedFileMessage: "Duplicate attachments not allowed within the same row",
       addAttachmentButton: true,
       isInfoIconRequired: false,
-      truncateMaxLimit: dimensions.width - 60
+      truncateMaxLimit: adjustedDimensions?.width ?? 0 - 60
     }) : mode === 'edit' && active ? jsxRuntime.jsx(DataEditor, {
       row: active.row,
       column: active.column,
@@ -41814,7 +41764,8 @@ const FloatingRect = ({
 };
 
 const Selected = ({
-  visibleRange,
+  visibleRowRange,
+  visibleColRange,
   scrollPos = {
     top: 0,
     left: 0
@@ -41825,13 +41776,13 @@ const Selected = ({
   const dragging = useSelector(state => state.dragging);
   const hidden = useSelector(state => state.selected.size(state.model.data) < 2);
   const fullRange = useSelector(state => state.selected.toRange(state.model.data));
-  const dimensions = React__namespace.useMemo(() => getVisibleRangeDimensions(fullRange, visibleRange, rowDimensions, columnDimensions), [fullRange, rowDimensions, columnDimensions, visibleRange]);
+  const dimensions = React__namespace.useMemo(() => getVisibleRangeDimensions(fullRange, visibleRowRange, rowDimensions, columnDimensions, visibleColRange), [fullRange, visibleRowRange, rowDimensions, columnDimensions, visibleColRange]);
   const adjustedDimensions = React__namespace.useMemo(() => {
     if (!dimensions) return undefined;
     return {
       ...dimensions,
-      top: dimensions.top + 32,
-      left: dimensions.left + 60,
+      top: dimensions.top + 34,
+      left: dimensions.left + 62,
       height: dimensions.height - 1,
       width: dimensions.width - 1
     };
@@ -41845,7 +41796,8 @@ const Selected = ({
 };
 
 const Copied = ({
-  visibleRange,
+  visibleRowRange,
+  visibleColRange,
   scrollPos = {
     top: 0,
     left: 0
@@ -41855,13 +41807,13 @@ const Copied = ({
   const columnDimensions = useSelector(state => state.columnDimensions);
   const fullRange = useSelector(state => state.copied);
   const hidden = fullRange === null;
-  const dimensions = React__namespace.useMemo(() => getVisibleRangeDimensions(fullRange, visibleRange, rowDimensions, columnDimensions), [fullRange, rowDimensions, columnDimensions, visibleRange]);
+  const dimensions = React__namespace.useMemo(() => getVisibleRangeDimensions(fullRange, visibleRowRange, rowDimensions, columnDimensions, visibleColRange), [fullRange, visibleRowRange, rowDimensions, columnDimensions, visibleColRange]);
   const adjustedDimensions = React__namespace.useMemo(() => {
     if (!dimensions) return undefined;
     return {
       ...dimensions,
-      top: dimensions.top + 32,
-      left: dimensions.left + 60,
+      top: dimensions.top - scrollPos.top,
+      left: dimensions.left - scrollPos.left,
       height: dimensions.height - 1,
       width: dimensions.width - 1
     };
@@ -42388,8 +42340,8 @@ const throttle = (func, limit) => {
 const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadsheet(props, ref) {
   const {
     className,
-    columnLabels,
-    rowLabels,
+    columnLabels = [],
+    rowLabels = [],
     toolbar,
     editable: editable$1,
     onKeyDown,
@@ -42416,6 +42368,10 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
     onAddColumn,
     onDeleteColumn
   } = props;
+  const DEFAULT_ROW_HEIGHT = 32;
+  const DEFAULT_COLUMN_WIDTH = props.minimumColumnWidth || 100;
+  const ROW_BUFFER = 20;
+  const COL_BUFFER = 30;
   const [sheetChange, setSheetChange] = React__namespace.useState(false);
   const [maxWidth, setMaxWidth] = React__namespace.useState(0);
   const [maxHeight, setMaxHeight] = React__namespace.useState(0);
@@ -42426,20 +42382,23 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
   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 {
+        clientWidth,
+        clientHeight
+      } = rootRef.current;
+      setMaxHeight(clientHeight);
+      setMaxWidth(showHider ? clientWidth : entry.contentRect.width);
     }
   });
-  const scrollOption = props.scroller;
+  React__namespace.useEffect(() => {
+    if (rootRef.current) {
+      resizeObserver.observe(rootRef.current);
+    }
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+  // const scrollOption = props.scroller;
   const initialState = React__namespace.useMemo(() => {
     const createParser = props.createFormulaParser || createFormulaParser;
     const model = new Model(createParser, props.data);
@@ -42452,13 +42411,17 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
   }, [props.createFormulaParser, props.data, props.selected]);
   const reducerElements = React__namespace.useReducer(reducer, initialState);
   const [state, dispatch] = reducerElements;
-  const [visibleRange, setVisibleRange] = React__namespace.useState({
-    start: 0,
-    end: 100
-  });
   const size = React__namespace.useMemo(() => {
     return calculateSpreadsheetSize(state.model.data, rowLabels, columnLabels);
   }, [state.model.data, rowLabels, columnLabels]);
+  const [visibleRowRange, setVisibleRowRange] = React__namespace.useState({
+    start: 0,
+    end: Math.min(50, size.rows)
+  });
+  const [visibleColRange, setVisibleColRange] = React__namespace.useState({
+    start: 0,
+    end: Math.min(30, size.columns) // Initial visible columns
+  });
   const mode = state.mode;
   const rootRef = React__namespace.useRef(null);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -42494,18 +42457,6 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
   const addColumnRight$1 = useAction(addColumnRight);
   const deleteRow$1 = useAction(deleteRow);
   const deleteColumn$1 = useAction(deleteColumn);
-  const DEFAULT_ROW_HEIGHT = 32;
-  const DEFAULT_COLUMN_WIDTH = props.minimumColumnWidth || 100;
-  const ROW_BUFFER = 20;
-  const COL_BUFFER = 10;
-  const [visibleRowRange, setVisibleRowRange] = React__namespace.useState({
-    start: 0,
-    end: Math.min(50, size.rows)
-  });
-  const [visibleColRange, setVisibleColRange] = React__namespace.useState({
-    start: 0,
-    end: Math.min(30, size.columns) // Initial visible columns
-  });
   // Expose removeSelect
   React__namespace.useImperativeHandle(ref, () => ({
     removeSelect
@@ -42653,22 +42604,20 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
     if (!table) return;
     resizeObserver.observe(table);
   };
-  // Function to calculate cumulative height up to a row
   const getCumulativeHeight = React__namespace.useCallback(row => {
     let height = 0;
     for (let r = 0; r < row; r++) {
       height += state.rowDimensions[r]?.height || DEFAULT_ROW_HEIGHT;
     }
     return height;
-  }, [state.rowDimensions]);
-  // Function to calculate cumulative width up to a column
+  }, [state.rowDimensions, DEFAULT_ROW_HEIGHT]);
   const getCumulativeWidth = React__namespace.useCallback(col => {
     let width = 0;
     for (let c = 0; c < col; c++) {
       width += state.columnDimensions[c]?.width || DEFAULT_COLUMN_WIDTH;
     }
     return width;
-  }, [state.columnDimensions]);
+  }, [state.columnDimensions, DEFAULT_COLUMN_WIDTH]);
   // Total height and width for spacers
   const totalHeight = getCumulativeHeight(size.rows);
   const totalWidth = getCumulativeWidth(size.columns);
@@ -42676,7 +42625,6 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
   const afterRowHeight = totalHeight - getCumulativeHeight(visibleRowRange.end);
   const beforeColWidth = getCumulativeWidth(visibleColRange.start);
   const afterColWidth = totalWidth - getCumulativeWidth(visibleColRange.end);
-  // Throttled scroll handler for both vertical and horizontal virtualization
   const throttledHandleScroll = React__namespace.useMemo(() => throttle(e => {
     const target = e.target;
     const {
@@ -42685,6 +42633,10 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
       scrollLeft,
       clientWidth
     } = target;
+    setScrollPos({
+      top: scrollTop,
+      left: scrollLeft
+    });
     // For rows
     let newRowStart = 0;
     while (newRowStart < size.rows && getCumulativeHeight(newRowStart) < scrollTop) {
@@ -42702,7 +42654,7 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
     });
     // For columns
     let newColStart = 0;
-    while (newColStart < size.columns && getCumulativeWidth(newColStart) < scrollLeft) {
+    while (newColStart < size.columns && getCumulativeWidth(newColStart) < scrollLeft + 100) {
       newColStart++;
     }
     let newColEnd = newColStart;
@@ -42729,8 +42681,7 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
         disable: false
       }]
     });
-  }, 100), [size.rows, size.columns, getCumulativeHeight, getCumulativeWidth]);
-  // Update visible ranges when size changes (e.g., data update)
+  }, 0), [size.rows, size.columns, getCumulativeHeight, getCumulativeWidth]);
   React__namespace.useEffect(() => {
     setVisibleRowRange({
       start: 0,
@@ -42741,42 +42692,65 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
       end: Math.min(30, size.columns)
     });
   }, [size.rows, size.columns]);
-  const scrollToRow = (row, visibleRangeValue) => {
-    if (!scrollOption || !rootRef.current) return;
-    requestAnimationFrame(() => {
-      const DEFAULT_ROW_HEIGHT = 32;
-      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'
-        });
-      }
+  console.log(visibleColRange, 'col range');
+  console.log(visibleRowRange, 'row range');
+  const visibleRows = range(visibleRowRange.end, visibleRowRange.start);
+  const visibleCols = range(visibleColRange.end, visibleColRange.start);
+  const scrollToRow = React__namespace.useCallback(row => {
+    const root = rootRef.current;
+    if (!root) return;
+    const rowStart = getCumulativeHeight(row);
+    const rowHeight = state.rowDimensions[row]?.height || DEFAULT_ROW_HEIGHT;
+    const viewportTop = root.scrollTop;
+    const viewportBottom = viewportTop + root.clientHeight;
+    const rowEnd = rowStart + rowHeight;
+    let targetTop = viewportTop;
+    const fullyVisible = rowStart >= viewportTop && rowEnd <= viewportBottom;
+    if (!fullyVisible) {
+      if (rowStart < viewportTop) {
+        targetTop = rowStart;
+      } else if (rowEnd > viewportBottom) {
+        targetTop = rowEnd - root.clientHeight;
+      }
+    }
+    targetTop = Math.max(0, targetTop);
+    root.scrollTo({
+      top: targetTop,
+      behavior: 'smooth'
     });
-  };
-  const scrollToColumn = column => {
-    requestAnimationFrame(() => {
-      const columnWidth = minimumColumnWidth;
-      const scrollLeft = column * columnWidth;
-      requestAnimationFrame(() => {
-        if (!rootRef.current) return;
-        if (column >= size.columns - 1) {
-          rootRef.current.scrollTo({
-            left: scrollLeft,
-            behavior: 'smooth'
-          });
-        }
-      });
+  }, [getCumulativeHeight, state.rowDimensions, DEFAULT_ROW_HEIGHT]);
+  const scrollToColumn = React__namespace.useCallback((column, align = 'start') => {
+    const root = rootRef.current;
+    if (!root) return;
+    const colStart = getCumulativeWidth(column);
+    const colWidth = state.columnDimensions[column]?.width || DEFAULT_COLUMN_WIDTH;
+    const viewportLeft = root.scrollLeft;
+    const viewportRight = viewportLeft + root.clientWidth;
+    const colEnd = colStart + colWidth;
+    let targetLeft = viewportLeft;
+    // If it's already fully visible, do nothing unless an explicit align was passed
+    const fullyVisible = colStart >= viewportLeft && colEnd <= viewportRight;
+    if (!fullyVisible) {
+      if (colStart < viewportLeft) {
+        targetLeft = colStart; // reveal from the left
+      } else if (colEnd > viewportRight) {
+        targetLeft = colEnd - root.clientWidth; // reveal from the right
+      }
+    }
+    // Optional alignment overrides
+    if (align === 'center') {
+      targetLeft = colStart - (root.clientWidth - colWidth) / 2;
+    } else if (align === 'end') {
+      targetLeft = colEnd - root.clientWidth;
+    }
+    // Clamp and scroll
+    targetLeft = Math.max(0, targetLeft);
+    root.scrollTo({
+      left: targetLeft,
+      behavior: 'smooth'
     });
-  };
+  }, [getCumulativeWidth, state.columnDimensions, DEFAULT_COLUMN_WIDTH]);
+  const spacerColSpan = 1 + 1 + visibleCols.length + 1;
   const colgroup = jsxRuntime.jsxs("colgroup", {
     children: [jsxRuntime.jsx("col", {
       style: {
@@ -42786,7 +42760,7 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
       style: {
         width: `${beforeColWidth}px`
       }
-    }, "left-spacer"), ' ', range(visibleColRange.start, visibleColRange.end).map(colNumber => jsxRuntime.jsx("col", {
+    }, "left-spacer"), ' ', visibleCols.map(colNumber => jsxRuntime.jsx("col", {
       style: {
         width: `${state.columnDimensions[colNumber]?.width || DEFAULT_COLUMN_WIDTH}px`
       }
@@ -42796,10 +42770,6 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
       }
     }, "right-spacer"), ' ']
   });
-  // Visible columns array
-  const visibleCols = range(visibleColRange.end, visibleColRange.start);
-  // Total colspan for spacer rows (row indicator + left spacer + visible cols + right spacer)
-  const spacerColSpan = 1 + 1 + visibleCols.length + 1;
   const tableNode = React__namespace.useMemo(() => jsxRuntime.jsxs(Table$1, {
     columns: size.columns,
     hideColumnIndicators: false,
@@ -42807,25 +42777,11 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
     children: [colgroup, jsxRuntime.jsxs(HeaderRow$1, {
       children: [jsxRuntime.jsx(CornerIndicator$1, {}), jsxRuntime.jsx("th", {
         className: "spacer left"
-      }), " ", visibleCols.map(columnNumber => columnLabels ? jsxRuntime.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) : jsxRuntime.jsx(ColumnIndicator, {
-        column: columnNumber,
+      }), visibleCols.map(colNumber => jsxRuntime.jsx(ColumnIndicator, {
+        column: colNumber,
         minimumColumnWidth: minimumColumnWidth,
         setContextMenu: props.setContextMenu,
+        label: colNumber in columnLabels ? columnLabels[colNumber] : undefined,
         deleteColumn: deleteColumn$1,
         addColumnLeft: addColumnLeft$1,
         addColumnRight: addColumnRight$1,
@@ -42836,9 +42792,9 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
         onAddColumn: onAddColumn,
         onDeleteColumn: onDeleteColumn,
         scrollToColumn: scrollToColumn
-      }, columnNumber)), jsxRuntime.jsx("th", {
+      }, colNumber)), jsxRuntime.jsx("th", {
         className: "spacer right"
-      }), " "]
+      })]
     }), jsxRuntime.jsxs("tr", {
       style: {
         height: `${beforeRowHeight}px`
@@ -42846,10 +42802,10 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
       children: [jsxRuntime.jsx("td", {
         colSpan: spacerColSpan
       }), " "]
-    }), range(visibleRowRange.end, visibleRowRange.start).map(rowNumber => jsxRuntime.jsxs(Row$1, {
+    }), visibleRows.map(rowNumber => jsxRuntime.jsxs(Row$1, {
       row: rowNumber,
-      children: [rowLabels ? jsxRuntime.jsx(RowIndicator$1, {
-        label: rowNumber in rowLabels ? rowLabels[rowNumber] : null,
+      children: [jsxRuntime.jsx(RowIndicator$1, {
+        label: rowNumber in rowLabels ? rowLabels?.[rowNumber] : undefined,
         row: rowNumber,
         addRowTop: addRowTop$1,
         addRowBottom: addRowBottom$1,
@@ -42859,23 +42815,11 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
         maxRowLimit: maxRowLimit,
         disableDeleteOption: disableDeleteOption,
         contextMenu: contextMenu,
-        setVisibleRange: setVisibleRange,
-        scrollToRow: scrollToRow
-      }, rowNumber) : jsxRuntime.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,
+        setVisibleRange: setVisibleRowRange,
         scrollToRow: scrollToRow
       }, rowNumber), jsxRuntime.jsx("td", {
         className: "spacer left"
-      }), " ", visibleCols.map(columnNumber => jsxRuntime.jsx(Cell$1, {
+      }), visibleCols.map(columnNumber => jsxRuntime.jsx(Cell$1, {
         row: rowNumber,
         column: columnNumber,
         // @ts-ignore
@@ -42883,16 +42827,16 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
         editable: editable$1
       }, columnNumber)), jsxRuntime.jsx("td", {
         className: "spacer right"
-      }), " "]
-    }, rowNumber)), jsxRuntime.jsxs("tr", {
+      })]
+    }, rowNumber)), jsxRuntime.jsx("tr", {
       style: {
         height: `${afterRowHeight}px`
       },
-      children: [jsxRuntime.jsx("td", {
+      children: jsxRuntime.jsx("td", {
         colSpan: spacerColSpan
-      }), " "]
+      })
     })]
-  }), [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, visibleRowRange, visibleColRange, beforeRowHeight, afterRowHeight, beforeColWidth, afterColWidth, state.rowDimensions, state.columnDimensions, size.columns, columnLabels, rowLabels]);
+  }), [Table$1, size.rows, size.columns, Row$1, HeaderRow$1, CornerIndicator$1, columnLabels, ColumnIndicator, rowLabels, RowIndicator$1, Cell$1, DataViewer$1, visibleRowRange, visibleColRange, beforeRowHeight, afterRowHeight, beforeColWidth, afterColWidth, state.rowDimensions, state.columnDimensions]);
   const activeCellNode = React__namespace.useMemo(() => jsxRuntime.jsx(ActiveCell, {
     attachmentAction: attachmentAction,
     contextOption: contextOption,
@@ -42900,8 +42844,10 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
     setContextMenu: props.setContextMenu,
     // @ts-ignore
     DataEditor: DataEditor$1,
-    visibleRange: visibleRange
-  }), [DataEditor$1, visibleRange]);
+    visibleRowRange: visibleRowRange,
+    visibleColRange: visibleColRange,
+    scrollPos: scrollPos
+  }), [DataEditor$1, visibleRowRange, visibleColRange, scrollPos]);
   const rootNode = React__namespace.useMemo(() => jsxRuntime.jsxs("div", {
     className: "ff-excel-spreadsheet-container",
     children: [jsxRuntime.jsx("div", {
@@ -42946,32 +42892,14 @@ const Spreadsheet = /*#__PURE__*/React__namespace.forwardRef(function Spreadshee
       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
-          }]
-        });
-      },
+      onScroll: e => throttledHandleScroll(e),
       children: [tableNode, activeCellNode, jsxRuntime.jsx(Selected, {
-        visibleRange: visibleRange,
+        visibleRowRange: visibleRowRange,
+        visibleColRange: visibleColRange,
         scrollPos: scrollPos
       }), jsxRuntime.jsx(Copied, {
-        visibleRange: visibleRange,
+        visibleRowRange: visibleRowRange,
+        visibleColRange: visibleColRange,
         scrollPos: scrollPos
       })]
     })]