abdul-react 0.0.20 → 0.0.22

package/lib/index.cjs

@@ -37019,16 +37019,20 @@ function deleteColumnDimension(columns, deleteIndex) {
   return updated;
 }
 /** Get the dimensions of cell at point from state */
-function getCellDimensions(point, rowDimensions, columnDimensions) {
+function getCellDimensions(point, rowDimensions, columnDimensions, visibleRange) {
   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
+  const DEFAULT_COLUMN_WIDTH = 100;
+  const HEADER_HEIGHT = 32;
+  const ROW_INDICATOR_WIDTH = 60;
   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;
+  if (visibleRange && rowDimensions && rowDimensions[visibleRange.start]) {
+    const visibleTop = rowDimensions[visibleRange.start]?.top || HEADER_HEIGHT;
+    top = top - visibleTop + HEADER_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;
@@ -37042,16 +37046,20 @@ function getCellDimensions(point, rowDimensions, columnDimensions) {
   };
 }
 /** Get the dimensions of customized cell at point from state */
-function getScrollCellDimensions(point, rowDimensions, columnDimensions) {
+function getScrollCellDimensions(point, rowDimensions, columnDimensions, visibleRange) {
   const DEFAULT_ROW_HEIGHT = 32;
-  const DEFAULT_COLUMN_WIDTH = 100; // Use your minimumColumnWidth or a default value
-  const HEADER_HEIGHT = 32; // Adjust as needed
+  const DEFAULT_COLUMN_WIDTH = 100;
+  const HEADER_HEIGHT = 32;
   const ROW_INDICATOR_WIDTH = 60;
-  let top = HEADER_HEIGHT + 4000; // Preserve your fixed top for scrolling, but add header offset
+  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;
+  if (visibleRange && rowDimensions && rowDimensions[visibleRange.start]) {
+    const visibleTop = rowDimensions[visibleRange.start]?.top || HEADER_HEIGHT;
+    top = top - visibleTop + HEADER_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;
@@ -37075,14 +37083,24 @@ function getRangeDimensions(rowDimensions, columnDimensions, range) {
     width: endDimensions.left + endDimensions.width - startDimensions.left,
     height: endDimensions.top + endDimensions.height - startDimensions.top,
     top: startDimensions.top + 1,
-    // Note: +1 Because of Active cell width is 2px
-    left: startDimensions.left + 1 // Note: +1 Because of Active cell width is 2px
+    left: startDimensions.left + 1
   };
 }
 /** Get the dimensions of selected */
-function getSelectedDimensions(rowDimensions, columnDimensions, data, selected) {
+function getSelectedDimensions(rowDimensions, columnDimensions, data, selected, visibleRange) {
   const range = selected.toRange(data);
-  return range ? getRangeDimensions(rowDimensions, columnDimensions, range) : undefined;
+  if (!range) return undefined;
+  let startDimensions = getCellDimensions(range.start, rowDimensions, columnDimensions, visibleRange);
+  let endDimensions = getCellDimensions(range.end, rowDimensions, columnDimensions, visibleRange);
+  if (endDimensions === undefined) {
+    endDimensions = getScrollCellDimensions(range.end, rowDimensions, columnDimensions, visibleRange);
+  }
+  return startDimensions && endDimensions && {
+    width: endDimensions.left + endDimensions.width - startDimensions.left,
+    height: endDimensions.top + endDimensions.height - startDimensions.top,
+    top: startDimensions.top + 1,
+    left: startDimensions.left + 1
+  };
 }
 /** Get given data as CSV */
 function getCSV(data) {
@@ -41070,7 +41088,7 @@ const ActiveCell = props => {
   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;
+    let dimensionValue = active ? getCellDimensions(active, state.rowDimensions, state.columnDimensions, props.visibleRange) : undefined;
     dimensionValue = {
       top: (dimensionValue?.top ?? 0) + 1,
       // Note: +1 Because of Active cell width is 2px
@@ -41549,9 +41567,13 @@ const FloatingRect = ({
   });
 };
 
-const Selected = () => {
+const Selected = ({
+  visibleRange
+}) => {
   const selected = useSelector(state => state.selected);
-  const dimensions = useSelector(state => selected && getSelectedDimensions(state.rowDimensions, state.columnDimensions, state.model.data, state.selected));
+  const dimensions = useSelector(state => {
+    return selected && getSelectedDimensions(state.rowDimensions, state.columnDimensions, state.model.data, state.selected, visibleRange);
+  });
   const dragging = useSelector(state => state.dragging);
   const hidden = useSelector(state => state.selected.size(state.model.data) < 2);
   return jsxRuntime.jsx(FloatingRect, {
@@ -42490,8 +42512,9 @@ const Spreadsheet = props => {
     contextOption: contextOption,
     setContextMenu: props.setContextMenu,
     // @ts-ignore
-    DataEditor: DataEditor$1
-  }), [DataEditor$1]);
+    DataEditor: DataEditor$1,
+    visibleRange: visibleRange
+  }), [DataEditor$1, visibleRange]);
   const rootNode = React__namespace.useMemo(() => jsxRuntime.jsxs("div", {
     className: "ff-excel-spreadsheet-container",
     children: [jsxRuntime.jsx("div", {
@@ -42552,7 +42575,9 @@ const Spreadsheet = props => {
           }]
         });
       },
-      children: [tableNode, activeCellNode, jsxRuntime.jsx(Selected, {}), jsxRuntime.jsx(Copied, {})]
+      children: [tableNode, activeCellNode, jsxRuntime.jsx(Selected, {
+        visibleRange: visibleRange
+      }), jsxRuntime.jsx(Copied, {})]
     })]
   }), [className, onKeyPress, handleKeyDown, handleMouseMove, tableNode, activeCellNode, maxWidth]);
   return jsxRuntime.jsx(context.Provider, {