abdul-react 0.0.9 → 0.0.11

package/lib/index.cjs

@@ -36109,34 +36109,40 @@ function formatePainter(data) {
     }
   };
 }
-function addRowTop() {
+function addRowTop(row) {
   return {
-    type: ADD_ROW_TOP
+    type: ADD_ROW_TOP,
+    row
   };
 }
-function addRowBottom() {
+function addRowBottom(row) {
   return {
-    type: ADD_ROW_BOTTOM
+    type: ADD_ROW_BOTTOM,
+    row
   };
 }
-function addColumnLeft() {
+function addColumnLeft(column) {
   return {
-    type: ADD_COLUMN_LEFT
+    type: ADD_COLUMN_LEFT,
+    column
   };
 }
-function addColumnRight() {
+function addColumnRight(column) {
   return {
-    type: ADD_COLUMN_RIGHT
+    type: ADD_COLUMN_RIGHT,
+    column
   };
 }
-function deleteRow() {
+function deleteRow(row) {
   return {
-    type: DELETE_ROW
+    type: DELETE_ROW,
+    row
   };
 }
-function deleteColumn() {
+function deleteColumn(column) {
   return {
-    type: DELETE_COLUMN
+    type: DELETE_COLUMN,
+    column
   };
 }
 function keyPress(event) {
@@ -38226,18 +38232,21 @@ function reducer(state, action) {
           selectedColumn,
           model
         } = state;
-        if (checkEmpty(selectedRow)) {
+        const {
+          row
+        } = action;
+        if (checkEmpty(row ?? selectedRow)) {
           return state;
         }
-        selectedRow = selectedRow;
+        selectedRow = row ?? selectedRow;
         let updatedData = [...model.data];
         const newRow = Array(updatedData[0]?.length || 0).fill(EmptyCell);
-        updatedData.splice(selectedRow, 0, newRow);
+        updatedData.splice(row ?? selectedRow, 0, newRow);
         const updatedModel = new Model(model.createFormulaParser, updatedData);
         return {
           ...state,
           model: updatedModel,
-          selectedRow: selectedRow,
+          selectedRow: row ?? selectedRow,
           selectedColumn: selectedColumn
         };
       }
@@ -38248,18 +38257,21 @@ function reducer(state, action) {
           selectedColumn,
           model
         } = state;
+        const {
+          row
+        } = action;
         if (checkEmpty(selectedRow)) {
           return state;
         }
-        selectedRow = selectedRow;
+        selectedRow = row ?? selectedRow;
         let updatedData = [...model.data];
         const newRow = Array(updatedData[0]?.length || 0).fill(EmptyCell);
-        updatedData.splice(selectedRow + 1, 0, newRow);
+        updatedData.splice((row ?? selectedRow) + 1, 0, newRow);
         const updatedModel = new Model(model.createFormulaParser, updatedData);
         return {
           ...state,
           model: updatedModel,
-          selectedRow: selectedRow + 1,
+          selectedRow: (row ?? selectedRow) + 1,
           selectedColumn: selectedColumn
         };
       }
@@ -38270,20 +38282,23 @@ function reducer(state, action) {
           selectedColumn,
           model
         } = state;
-        if (checkEmpty(selectedColumn)) {
+        const {
+          column
+        } = action;
+        if (checkEmpty(column ?? selectedColumn)) {
           return state;
         }
-        selectedColumn = selectedColumn;
+        selectedColumn = column ?? selectedColumn;
         let updatedData = [...model.data];
         updatedData = updatedData.map(row => {
-          return [...row.slice(0, selectedColumn), EmptyCell, ...row.slice(selectedColumn)];
+          return [...row.slice(0, column ?? selectedColumn), EmptyCell, ...row.slice(column ?? selectedColumn)];
         });
         const updatedModel = new Model(model.createFormulaParser, updatedData);
         return {
           ...state,
           model: updatedModel,
           selectedRow: selectedRow,
-          selectedColumn: selectedColumn - 1
+          selectedColumn: (column ?? selectedColumn) - 1
         };
       }
     case ADD_COLUMN_RIGHT:
@@ -38293,20 +38308,23 @@ function reducer(state, action) {
           selectedColumn,
           model
         } = state;
-        if (checkEmpty(selectedColumn)) {
+        const {
+          column
+        } = action;
+        if (checkEmpty(column ?? selectedColumn)) {
           return state;
         }
-        selectedColumn = selectedColumn;
+        selectedColumn = column ?? selectedColumn;
         let updatedData = [...model.data];
         updatedData = updatedData.map(row => {
-          return [...row.slice(0, selectedColumn + 1), EmptyCell, ...row.slice(selectedColumn + 1)];
+          return [...row.slice(0, (column ?? selectedColumn) + 1), EmptyCell, ...row.slice((column ?? selectedColumn) + 1)];
         });
         const updatedModel = new Model(model.createFormulaParser, updatedData);
         return {
           ...state,
           model: updatedModel,
           selectedRow: selectedRow,
-          selectedColumn: selectedColumn + 1
+          selectedColumn: (column ?? selectedColumn) + 1
         };
       }
     case DELETE_ROW:
@@ -38316,14 +38334,17 @@ function reducer(state, action) {
           selectedColumn,
           model
         } = state;
+        const {
+          row
+        } = action;
         if (checkEmpty(selectedRow)) {
           return state;
         }
-        selectedRow = selectedRow;
+        selectedRow = row ?? selectedRow;
         let updatedData = [...model.data];
-        updatedData.splice(selectedRow, 1);
+        updatedData.splice(row ?? selectedRow, 1);
         const updatedModel = new Model(model.createFormulaParser, updatedData);
-        let newSelectedRow = selectedRow > 0 ? selectedRow - 1 : 0;
+        let newSelectedRow = row ?? selectedRow > 0 ? row ?? selectedRow - 1 : 0;
         const newSelectedColumn = selectedColumn !== null ? selectedColumn : 0;
         const newActive = updatedData.length > 0 ? {
           row: newSelectedRow,
@@ -38331,7 +38352,7 @@ function reducer(state, action) {
         } : null;
         const newSelected = updatedData.length > 0 ? new EntireRowsSelection(newSelectedRow, newSelectedRow) : new EmptySelection();
         const {
-          [selectedRow]: _,
+          [row ?? selectedRow]: _,
           ...cleanedRowDimensions
         } = state.rowDimensions;
         return {
@@ -38351,8 +38372,11 @@ function reducer(state, action) {
           selectedColumn,
           model
         } = state;
-        if (checkEmpty(selectedColumn)) return state;
-        const colIndex = selectedColumn;
+        const {
+          column
+        } = action;
+        if (checkEmpty(column ?? selectedColumn)) return state;
+        const colIndex = column ?? selectedColumn;
         const updatedData = model.data.map(row => row.filter((_, cellIndex) => cellIndex !== colIndex));
         const updatedModel = new Model(model.createFormulaParser, updatedData);
         const newSelectedRow = selectedRow || 0;
@@ -40322,7 +40346,8 @@ const ColumnIndicator = ({
   cell,
   selectedColumn,
   minimumColumnWidth,
-  maxColLimit
+  maxColLimit,
+  disableDeleteOption
 }) => {
   const dispatch = useDispatch();
   const minColumnWidth = minimumColumnWidth;
@@ -40336,7 +40361,7 @@ const ColumnIndicator = ({
       label: 'Add Column Left',
       value: 'Add Column Left',
       iconName: 'plus_icon',
-      action: addColumnLeft,
+      action: () => addColumnLeft(column),
       disableTooltip: 'Column limit reached',
       visible: cell?.contextDisable?.['Add Column Left'] ?? false,
       disable: columnCount >= maxColLimit
@@ -40344,19 +40369,19 @@ const ColumnIndicator = ({
       label: 'Add Column Right',
       value: 'Add Column Right',
       iconName: 'plus_icon',
-      action: addColumnRight,
+      action: () => addColumnRight(column),
       disableTooltip: 'Column limit reached',
       visible: cell?.contextDisable?.['Add Column Right'] ?? false,
       disable: columnCount >= maxColLimit
-    }, {
+    }, ...(!disableDeleteOption ? [{
       label: 'Delete Column',
       value: 'Delete Column',
       iconName: 'delete',
-      action: deleteColumn,
-      disableTooltip: 'Column limit reached',
+      action: () => deleteColumn(column),
+      disableTooltip: '',
       visible: cell?.contextDisable?.['Delete Column'] ?? false,
       disable: false
-    }];
+    }] : [])];
   }, [selectedColumn, cell, addColumnLeft, addColumnRight, deleteColumn]);
   const onMouseDrag = React__namespace.useCallback((event, isRight) => {
     const getTargetColumn = isRight ? column - 1 : column;
@@ -40386,17 +40411,10 @@ const ColumnIndicator = ({
     onSelect(column, event.shiftKey);
     setContextMenu({
       open: columnContextEnable,
+      contextType: 'column',
       options
     });
   }, [column, selectedColumn, columnContextEnable, options]);
-  React__namespace.useEffect(() => {
-    if (selectedColumn !== undefined) {
-      setContextMenu(prev => ({
-        open: prev.open,
-        options
-      }));
-    }
-  }, [column, selectedColumn, columnContextEnable, options]);
   return jsxRuntime.jsxs("th", {
     className: classNames('ff-spreadsheet-header', {
       'ff-spreadsheet-header--selected': selected
@@ -40468,7 +40486,8 @@ const RowIndicator = ({
   rowContextEnable,
   selectedRow,
   cell,
-  maxRowLimit
+  maxRowLimit,
+  disableDeleteOption
 }) => {
   const dispatch = useDispatch();
   const rowHeight = useSelector(state => state.rowDimensions[row]?.height || 32);
@@ -40481,7 +40500,7 @@ const RowIndicator = ({
       label: 'Add Row Top',
       value: 'Add Row Top',
       iconName: 'plus_icon',
-      action: addRowTop,
+      action: () => addRowTop(row),
       disableTooltip: 'Row limit reached',
       visible: cell?.contextDisable?.['Add Row Top'] ?? false,
       disable: rowCount >= maxRowLimit
@@ -40489,20 +40508,20 @@ const RowIndicator = ({
       label: 'Add Row Bottom',
       value: 'Add Row Bottom',
       iconName: 'plus_icon',
-      action: addRowBottom,
+      action: () => addRowBottom(row),
       disableTooltip: 'Row limit reached',
       visible: cell?.contextDisable?.['Add Row Bottom'] ?? false,
       disable: rowCount >= maxRowLimit
-    }, {
+    }, ...(!disableDeleteOption ? [{
       label: 'Delete Row',
       value: 'Delete Row',
       iconName: 'delete',
-      action: deleteRow,
-      disableTooltip: 'Row limit reached',
+      action: () => deleteRow(row),
+      disableTooltip: '',
       visible: cell?.contextDisable?.['Delete Row'] ?? false,
       disable: false
-    }];
-  }, [selectedRow]);
+    }] : [])];
+  }, [selectedRow, row]);
   const handleMouseDrag = React__namespace.useCallback((event, isUp) => {
     const getTargetRow = isUp ? row : row - 1;
     const targetRow = Math.max(getTargetRow, 0);
@@ -40531,17 +40550,10 @@ const RowIndicator = ({
     onSelect(row, event.shiftKey);
     setContextMenu({
       open: rowContextEnable,
+      contextType: 'row',
       options
     });
   }, [row, rowContextEnable, options, selectedRow]);
-  React__namespace.useEffect(() => {
-    if (selectedRow !== undefined) {
-      setContextMenu(prev => ({
-        open: prev.open,
-        options
-      }));
-    }
-  }, [row, rowContextEnable, options, selectedRow]);
   return jsxRuntime.jsxs("th", {
     className: classNames('ff-spreadsheet-header', {
       'ff-spreadsheet-header--selected': selected
@@ -41172,6 +41184,7 @@ const ActiveCell = props => {
     event.preventDefault();
     props.setContextMenu({
       open: props.contextOption?.open ?? false,
+      contextType: props.contextOption?.contextType ?? null,
       options: props.contextOption?.options || []
     });
   }, [props]);
@@ -41842,7 +41855,8 @@ const Spreadsheet = props => {
     setContextMenu,
     showHider,
     maxRowLimit,
-    maxColLimit
+    maxColLimit,
+    disableDeleteOption
   } = props;
   const [sheetChange, setSheetChange] = React__namespace.useState(false);
   const [maxWidth, setMaxWidth] = React__namespace.useState(0);
@@ -41936,18 +41950,6 @@ const Spreadsheet = props => {
     }
     prevActiveRef.current = state.active;
   }, [onActivate, state.active]);
-  React__namespace.useEffect(() => {
-    // When rows are added/removed, reset visible range if needed
-    if (prevDataPropRef.current && props.data.length !== prevDataPropRef.current.length) {
-      if (visibleRange.end >= props.data.length) {
-        setVisibleRange({
-          start: Math.max(0, props.data.length - 100),
-          end: props.data.length
-        });
-      }
-    }
-    prevDataPropRef.current = props.data;
-  }, [props.data, visibleRange]);
   const prevEvaluatedDataRef = React__namespace.useRef(state.model.evaluatedData);
   React__namespace.useEffect(() => {
     if (state?.model?.evaluatedData !== prevEvaluatedDataRef?.current) {
@@ -42134,6 +42136,7 @@ const Spreadsheet = props => {
       const dynamicScroll = scrollHeight - offsetHeight;
       if (size.rows < 100) {
         updateVisibleRange(0, size.rows, 0);
+        setScrollCount(0);
       } else if (scrollTop === 0 && scrollCount !== 0) {
         const newScroll = scrollCount - 1;
         updateVisibleRange(newScroll * rowHeight, newScroll * rowHeight + visibleRows, newScroll);
@@ -42150,6 +42153,7 @@ const Spreadsheet = props => {
     });
     setContextMenu({
       open: false,
+      contextType: null,
       options: [{
         label: '',
         value: '',
@@ -42182,7 +42186,8 @@ const Spreadsheet = props => {
         addColumnLeft: addColumnLeft$1,
         addColumnRight: addColumnRight$1,
         columnContextEnable: props.columnContextEnable,
-        maxColLimit: maxColLimit
+        maxColLimit: maxColLimit,
+        disableDeleteOption: disableDeleteOption
       }, columnNumber) : jsxRuntime.jsx(ColumnIndicator, {
         column: columnNumber,
         minimumColumnWidth: minimumColumnWidth,
@@ -42191,7 +42196,8 @@ const Spreadsheet = props => {
         addColumnLeft: addColumnLeft$1,
         addColumnRight: addColumnRight$1,
         columnContextEnable: props.columnContextEnable,
-        maxColLimit: maxColLimit
+        maxColLimit: maxColLimit,
+        disableDeleteOption: disableDeleteOption
       }, columnNumber))]
     }), renderReady && scrollerFunction().map(rowNumber => jsxRuntime.jsxs(Row$1, {
       row: rowNumber,
@@ -42203,7 +42209,8 @@ const Spreadsheet = props => {
         deleteRow: deleteRow$1,
         setContextMenu: props.setContextMenu,
         rowContextEnable: props.rowContextEnable,
-        maxRowLimit: maxRowLimit
+        maxRowLimit: maxRowLimit,
+        disableDeleteOption: disableDeleteOption
       }, rowNumber) : jsxRuntime.jsx(RowIndicator$1, {
         row: rowNumber,
         addRowTop: addRowTop$1,
@@ -42211,7 +42218,8 @@ const Spreadsheet = props => {
         deleteRow: deleteRow$1,
         setContextMenu: props.setContextMenu,
         rowContextEnable: props.rowContextEnable,
-        maxRowLimit: maxRowLimit
+        maxRowLimit: maxRowLimit,
+        disableDeleteOption: disableDeleteOption
       }, rowNumber), range(size.columns).map(columnNumber => jsxRuntime.jsx(Cell$1, {
         row: rowNumber,
         column: columnNumber,
@@ -42275,6 +42283,7 @@ const Spreadsheet = props => {
         scrollOption && throttledHandleScroll(e);
         setContextMenu({
           open: false,
+          contextType: null,
           options: [{
             label: '',
             value: '',
@@ -42298,15 +42307,12 @@ const Spreadsheet = props => {
 const ExcelContextMenu = ({
   contextMenu,
   position,
-  editable,
-  disableDeleteOption
+  editable
 }) => {
+  if (!contextMenu.open) return null;
   const checkDelete = label => {
     return label.includes('Delete');
   };
-  const isOptionDisabled = option => {
-    return option.disable || checkDelete(option.label) && disableDeleteOption;
-  };
   return editable && jsxRuntime.jsx("div", {
     onContextMenu: event => {
       event.preventDefault();
@@ -42321,7 +42327,7 @@ const ExcelContextMenu = ({
     },
     children: contextMenu.options.map(option => {
       if (!option.visible) {
-        const disabled = isOptionDisabled(option);
+        const disabled = option.disable;
         return jsxRuntime.jsx(Tooltip, {
           title: disabled ? option.disableTooltip : '',
           children: jsxRuntime.jsxs("div", {
@@ -42401,6 +42407,7 @@ const ExcelFile = ({
   const [saveInfo, setSaveInfo] = React.useState('');
   const [contextMenu, setContextMenu] = React.useState({
     open: false,
+    contextType: null,
     options: [{
       label: '',
       value: '',
@@ -42713,28 +42720,34 @@ const ExcelFile = ({
     selection?.removeAllRanges();
     selection?.addRange(range);
   };
-  const handleClickOutside = React.useCallback(event => {
-    if (contextMenu.open) {
-      event.preventDefault();
-      event.stopPropagation();
-      setContextMenu({
-        open: false,
-        options: [{
-          label: '',
-          value: '',
-          iconName: '',
-          action: () => {},
-          disableTooltip: '',
-          visible: false,
-          disable: false
-        }]
-      });
+  const handleClickOutside = React.useCallback((event, isLeftClick = false) => {
+    const target = event.target;
+    if (!(target.closest('.ff-excel-tab-list') || target.closest('.ff-excel-sheet')) || isLeftClick) {
+      if (contextMenu.open) {
+        event.preventDefault();
+        event.stopPropagation();
+        setContextMenu({
+          open: false,
+          contextType: null,
+          options: [{
+            label: '',
+            value: '',
+            iconName: '',
+            action: () => {},
+            disableTooltip: '',
+            visible: false,
+            disable: false
+          }]
+        });
+      }
     }
   }, [contextMenu.open]);
   React.useEffect(() => {
-    document.addEventListener('click', handleClickOutside);
+    document.addEventListener('contextmenu', handleClickOutside);
+    document.addEventListener('click', e => handleClickOutside(e, true));
     return () => {
-      document.removeEventListener('click', handleClickOutside);
+      document.removeEventListener('contextmenu', handleClickOutside);
+      document.addEventListener('click', e => handleClickOutside(e, true));
     };
   }, [handleClickOutside]);
   const contextClick = (event, name, index) => {
@@ -42743,27 +42756,24 @@ const ExcelFile = ({
       label: 'Add Sheet',
       value: 'Add Sheet',
       iconName: 'plus_icon',
-      action: () => {
-        handleAddSheet();
-      },
+      action: () => handleAddSheet(),
       disableTooltip: 'Sheet limit reached',
       visible: false,
       disable: addSheetIconDisable()
-    }, {
+    }, ...(!disableDeleteOption ? [{
       label: 'Delete Sheet',
       value: 'Delete Sheet',
       iconName: 'delete',
-      action: () => {
-        handleDeleteSheet(name, index);
-      },
+      action: () => handleDeleteSheet(name, index),
       disableTooltip: '',
       visible: false,
       disable: false
-    }];
+    }] : [])];
     setContextMenu(prev => ({
       ...prev,
       open: true,
-      options: options
+      contextType: 'sheet',
+      options
     }));
   };
   const setContextPosition = event => {
@@ -42796,7 +42806,7 @@ const ExcelFile = ({
     if (event.target.classList.contains('ff-excel-tab-list')) {
       setPosition({
         x: sheetRefX,
-        y: sheetRefY - 65
+        y: sheetRefY - (disableDeleteOption ? 32 : 65)
       });
       return;
     }
@@ -42817,6 +42827,7 @@ const ExcelFile = ({
     if (contextMenu.open) {
       setContextMenu({
         open: false,
+        contextType: null,
         options: [{
           label: '',
           value: '',
@@ -42854,7 +42865,8 @@ const ExcelFile = ({
           scroller: scroller,
           showHider: showHider,
           maxRowLimit: maxRowLimit,
-          maxColLimit: maxColLimit
+          maxColLimit: maxColLimit,
+          disableDeleteOption: disableDeleteOption
         })
       }), sheetBar !== 'hide' && jsxRuntime.jsxs("div", {
         className: "ff-excel-sheet-bar",
@@ -42916,8 +42928,7 @@ const ExcelFile = ({
       }), contextMenu.open && jsxRuntime.jsx(ExcelContextMenu, {
         contextMenu: contextMenu,
         position: position,
-        editable: editable,
-        disableDeleteOption: disableDeleteOption
+        editable: editable
       }), jsxRuntime.jsx(Toastify, {})]
     })
   });
@@ -46458,7 +46469,7 @@ const VariableDropdown = ({
     if (!option) return '';
     const variableId = option._id || option.id;
     if (variableId?.startsWith('PARAMETER')) return 'step_group_parameter';
-    if (option.type === 'LOCAL' && option?.parentVariableType === 'STEPGROUP') return 'step_group_variable';
+    if (option?.parentVariableType === 'STEPGROUP' && (option.type === 'LOCAL' || option?.type === 'STEPGROUP')) return 'step_group_variable';
     if (option.type === '_startforloop') return 'for_loop_variable';
     if (option.type === 'DATAPROVIDER') return 'data_provider_variable';
     return VARIABLE_ICON_MAP[option.type || ''] || '';
@@ -46561,6 +46572,31 @@ const LineChart = ({
   const xMax = width - margin * 2;
   const yMax = height - margin * 2;
   const [tooltipVisible, setTooltipVisible] = React.useState(false);
+  const [hoverState, setHoverState] = React.useState({
+    cursorX: null,
+    hoverValues: {},
+    dotPositions: {},
+    tooltip: {
+      visible: false,
+      left: 0,
+      top: 0
+    },
+    currentXValue: null
+  });
+  React.useEffect(() => {
+    const handleScroll = () => {
+      setTooltipVisible(false);
+      setHoverState(prev => ({
+        ...prev,
+        tooltip: {
+          ...prev.tooltip,
+          visible: false
+        }
+      }));
+    };
+    window.addEventListener('scroll', handleScroll, true);
+    return () => window.removeEventListener('scroll', handleScroll, true);
+  }, []);
   const hasData = data && data.length > 0 && data?.some(line => Array.isArray(line?.data) && line?.data?.length > 0);
   if (!hasData) {
     const defaultDates = [];
@@ -46826,31 +46862,6 @@ const LineChart = ({
       });
     }
   };
-  const [hoverState, setHoverState] = React.useState({
-    cursorX: null,
-    hoverValues: {},
-    dotPositions: {},
-    tooltip: {
-      visible: false,
-      left: 0,
-      top: 0
-    },
-    currentXValue: null
-  });
-  React.useEffect(() => {
-    const handleScroll = () => {
-      setTooltipVisible(false);
-      setHoverState(prev => ({
-        ...prev,
-        tooltip: {
-          ...prev.tooltip,
-          visible: false
-        }
-      }));
-    };
-    window.addEventListener('scroll', handleScroll, true);
-    return () => window.removeEventListener('scroll', handleScroll, true);
-  }, []);
   const handleMouseMove = e => {
     const svgRect = e.currentTarget.getBoundingClientRect();
     const mouseX = e.clientX - svgRect.left - margin;
@@ -78436,15 +78447,20 @@ const appendNewRow = (tableData, AddNlp) => {
   return updatedTreeData;
 };
 
-const scrollToView = id => {
-  if (id) {
-    const element = document.getElementById(id);
-    if (element) {
-      element.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest'
-      });
-    }
+const scrollToView = (id, block = 'nearest', retries = 5) => {
+  if (!id) return;
+  const element = document.getElementById(id);
+  if (element) {
+    element.scrollIntoView({
+      behavior: 'smooth',
+      block
+    });
+  } else if (retries > 0) {
+    setTimeout(() => {
+      scrollToView(id, block, retries - 1);
+    }, 300);
+  } else {
+    console.warn(`Element with id - "${id}" not found after multiple retries.`);
   }
 };
 
@@ -78702,84 +78718,107 @@ const StepGroupAccordions = /*#__PURE__*/React.memo(({
   handleStepGroupExpand,
   isStepGroupExpanded,
   isViewPrivilegeMode,
-  columns = []
+  columns = [],
+  parentIndex,
+  updateRowHeight
 }) => {
+  const rowRefs = React.useRef([]);
   const typeSet = new Set(['Group', 'PRE', 'POST', 'Script']);
   const getPadding = type => typeSet.has(type) ? '6px 8px' : '7px 8px';
   const indent = level + 8;
+  // Measure and report height when expanded
+  React.useEffect(() => {
+    if (!updateRowHeight) return;
+    let totalHeight = 0;
+    rowRefs.current.forEach(ref => {
+      if (ref) {
+        totalHeight += ref.getBoundingClientRect().height;
+      }
+    });
+    if (totalHeight > 0) {
+      updateRowHeight(parentIndex ?? 0, totalHeight);
+    }
+  }, [data, updateRowHeight, parentIndex, isStepGroupExpanded]);
   return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: data?.map(item => jsxRuntime.jsxs(React.Fragment, {
-      children: [viewModeId === item?.stepId ? jsxRuntime.jsx("tr", {
-        className: "steps-edit-row",
-        id: "getInFocus",
-        children: jsxRuntime.jsx("td", {
-          colSpan: columnCount,
-          children: jsxRuntime.jsx("div", {
-            style: {
-              marginLeft: `${indent}px`
-            },
-            children: ViewComponent && jsxRuntime.jsx(ViewComponent, {})
-          })
-        })
-      }) : jsxRuntime.jsx("tr", {
-        children: columns.map((col, idx) => jsxRuntime.jsx("td", {
-          style: {
-            maxWidth: col.width,
-            padding: getPadding(item.type)
-          },
-          children: jsxRuntime.jsxs(Typography, {
-            as: "div",
-            className: "ff-data-checkbox-container",
-            children: [jsxRuntime.jsxs("div", {
-              className: "ff-data-checkbox-container-content",
+    children: data?.map((item, itemIndex) => {
+      const absoluteIndex = parentIndex ?? 0 + itemIndex + 1;
+      return jsxRuntime.jsxs(React.Fragment, {
+        children: [viewModeId === item?.stepId ? jsxRuntime.jsx("tr", {
+          ref: el => rowRefs.current[itemIndex] = el,
+          className: "steps-edit-row",
+          id: "getInFocus",
+          children: jsxRuntime.jsx("td", {
+            colSpan: columnCount,
+            children: jsxRuntime.jsx("div", {
               style: {
-                marginLeft: idx === 0 ? `${indent}px` : 0
-              },
-              onClick: () => {
-                const isClickable = idx === 0 && !item?.displayName?.includes('End') && !item?.isDisabled;
-                if (isClickable) handleClick?.({
-                  ...item,
-                  tableType
-                });
+                marginLeft: `${indent}px`
               },
-              children: [!isViewPrivilegeMode && idx === 0 && jsxRuntime.jsx("div", {
+              children: ViewComponent && jsxRuntime.jsx(ViewComponent, {})
+            })
+          })
+        }) : jsxRuntime.jsx("tr", {
+          ref: el => rowRefs.current[itemIndex] = el,
+          children: columns.map((col, idx) => jsxRuntime.jsx("td", {
+            style: {
+              maxWidth: col.width,
+              padding: getPadding(item.type)
+            },
+            children: jsxRuntime.jsxs(Typography, {
+              as: "div",
+              className: "ff-data-checkbox-container",
+              children: [jsxRuntime.jsxs("div", {
+                className: "ff-data-checkbox-container-content",
                 style: {
-                  padding: '4px 18px'
-                }
-              }), prepareData({
-                ...item,
-                marginLeft: indent
-              }, col)]
-            }), idx === 0 && ['Group', 'PRE', 'POST', 'Script'].includes(item.type) && jsxRuntime.jsx("div", {
-              className: `ff-accordion-arrow ${isStepGroupExpanded?.(item.stepId) ? 'expanded' : ''}`,
-              children: jsxRuntime.jsx(Icon, {
-                name: "arrow_right",
-                color: isStepGroupExpanded?.(item.stepId) ? 'var(--brand-color)' : 'var(--default-color)',
-                className: "steps-arrow-svg",
-                width: 12,
-                height: 12,
-                onClick: () => handleStepGroupExpand?.({
+                  marginLeft: idx === 0 ? `${indent}px` : 0
+                },
+                onClick: () => {
+                  const isClickable = idx === 0 && !item?.displayName?.includes('End') && !item?.isDisabled;
+                  if (isClickable) handleClick?.({
+                    ...item,
+                    tableType
+                  });
+                },
+                children: [!isViewPrivilegeMode && idx === 0 && jsxRuntime.jsx("div", {
+                  style: {
+                    padding: '4px 18px'
+                  }
+                }), prepareData({
                   ...item,
-                  tableType
+                  marginLeft: indent
+                }, col)]
+              }), idx === 0 && ['Group', 'PRE', 'POST', 'Script'].includes(item.type) && jsxRuntime.jsx("div", {
+                className: `ff-accordion-arrow ${isStepGroupExpanded?.(item.stepId) ? 'expanded' : ''}`,
+                children: jsxRuntime.jsx(Icon, {
+                  name: "arrow_right",
+                  color: isStepGroupExpanded?.(item.stepId) ? 'var(--brand-color)' : 'var(--default-color)',
+                  className: "steps-arrow-svg",
+                  width: 12,
+                  height: 12,
+                  onClick: () => handleStepGroupExpand?.({
+                    ...item,
+                    tableType
+                  })
                 })
-              })
-            })]
-          })
-        }, `${item.stepId}-${idx}`))
-      }), isStepGroupExpanded?.(item.stepId) && jsxRuntime.jsx(StepGroupAccordions, {
-        data: item.data,
-        level: indent,
-        columnCount: columnCount,
-        viewModeId: viewModeId,
-        ViewComponent: ViewComponent,
-        handleClick: handleClick,
-        tableType: tableType,
-        handleStepGroupExpand: handleStepGroupExpand,
-        isStepGroupExpanded: isStepGroupExpanded,
-        isViewPrivilegeMode: isViewPrivilegeMode,
-        columns: columns
-      })]
-    }, item.stepId))
+              })]
+            })
+          }, `${item.stepId}-${idx}`))
+        }), isStepGroupExpanded?.(item.stepId) && jsxRuntime.jsx(StepGroupAccordions, {
+          data: item.data,
+          level: indent,
+          columnCount: columnCount,
+          viewModeId: viewModeId,
+          ViewComponent: ViewComponent,
+          handleClick: handleClick,
+          tableType: tableType,
+          handleStepGroupExpand: handleStepGroupExpand,
+          isStepGroupExpanded: isStepGroupExpanded,
+          isViewPrivilegeMode: isViewPrivilegeMode,
+          columns: columns,
+          parentIndex: absoluteIndex,
+          updateRowHeight: updateRowHeight
+        })]
+      }, item.stepId);
+    })
   });
 });
 StepGroupAccordions.displayName = 'StepGroupAccordions';
@@ -78804,8 +78843,10 @@ const StepTableMainRow = ({
   dataLength,
   stepPartialSelect,
   isViewPrivilegeMode,
-  isClientSide
+  isClientSide,
+  updateRowHeight
 }) => {
+  const rowRef = React.useRef(null);
   const isDisabled = React.useMemo(() => row?.isDisabled || (dataLength ?? 0) <= 1 || row.isSpecialNlp, [row, dataLength]);
   let serialNumber = (indexNumber + 1).toString();
   const {
@@ -78823,6 +78864,13 @@ const StepTableMainRow = ({
     transition
   }), [transform, transition]);
   const key = row?._id || row?.stepId;
+  // Measure row height and report to parent
+  React.useEffect(() => {
+    if (rowRef.current && updateRowHeight) {
+      const height = rowRef.current.getBoundingClientRect().height;
+      updateRowHeight(indexNumber, height);
+    }
+  }, [row, updateRowHeight, indexNumber, isStepGroupExpanded?.(row?.stepId)]);
   const getPadding = index => {
     if (isViewPrivilegeMode || isClientSide) {
       if (['Group', 'PRE', 'POST', 'Script'].includes(row.type) && index === 0) {
@@ -78873,7 +78921,10 @@ const StepTableMainRow = ({
   });
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx("tr", {
-      ref: setNodeRef,
+      ref: el => {
+        rowRef.current = el;
+        setNodeRef(el);
+      },
       style: style,
       className: classNames(tableBodyRowClass, {
         'disabled-inner-row': isDisabled
@@ -78917,7 +78968,9 @@ const StepTableMainRow = ({
       isStepGroupExpanded: isStepGroupExpanded,
       level: row?.marginLeft,
       isViewPrivilegeMode: isViewPrivilegeMode,
-      columns: columns
+      columns: columns,
+      parentIndex: indexNumber,
+      updateRowHeight: updateRowHeight
     })]
   });
 };
@@ -78957,11 +79010,132 @@ const StepInnerTable = ({
   isClientSide
 }) => {
   const observerRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const [scrollTop, setScrollTop] = React.useState(0);
+  const [containerHeight, setContainerHeight] = React.useState(0);
+  const [rowHeights, setRowHeights] = React.useState([]);
+  const [focusRowId, setFocusRowId] = React.useState(null);
+  const buffer = 5;
+  const estimatedRowHeight = 50;
+  // Reset row heights when data changes
   React.useEffect(() => {
-    const scrollContainer = document.getElementById('ff-table-scroll-container');
+    if (containerRef.current) {
+      setContainerHeight(containerRef.current.clientHeight);
+    }
+    const fullData = appendNewRow(data, AddNlp ?? {});
+    setRowHeights(new Array(fullData.length).fill(estimatedRowHeight));
+  }, [data, AddNlp]);
+  // Track focus row for edit/new rows
+  React.useEffect(() => {
+    if (editMode) {
+      setFocusRowId(editMode);
+    } else if (AddNlp && Object.keys(AddNlp).length > 0) {
+      const newRow = appendNewRow(data, AddNlp).find(row => row.isNew);
+      if (newRow) {
+        setFocusRowId(newRow.stepId || 'new-row');
+      }
+    } else {
+      setFocusRowId(null);
+    }
+  }, [editMode, AddNlp, data]);
+  // Improved scroll-to-focus with rendering delay
+  React.useEffect(() => {
+    if (focusRowId && containerRef.current) {
+      const timer = setTimeout(() => {
+        const focusElement = containerRef.current?.querySelector('#getInFocus');
+        if (focusElement) {
+          focusElement.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest'
+          });
+        }
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+    // Explicitly return undefined when condition isn't met
+    return () => {};
+  }, [focusRowId, rowHeights]);
+  // Handle scroll
+  const handleScroll = e => {
+    setScrollTop(e.currentTarget.scrollTop);
+  };
+  // Update row height callback
+  const updateRowHeight = React.useCallback((index, height) => {
+    setRowHeights(prev => {
+      const newHeights = [...prev];
+      if (index < newHeights.length && newHeights[index] !== height) {
+        newHeights[index] = height;
+        return newHeights;
+      }
+      return prev;
+    });
+  }, []);
+  // Calculate visible rows
+  const fullData = appendNewRow(data, AddNlp ?? {});
+  const totalRows = fullData.length;
+  let startIndex = 0;
+  let endIndex = totalRows - 1;
+  let paddingTop = 0;
+  let paddingBottom = 0;
+  if (rowHeights.length === totalRows && containerHeight > 0) {
+    let cumulativeHeight = 0;
+    // Find start index
+    for (let i = 0; i < totalRows; i++) {
+      if (cumulativeHeight <= scrollTop) {
+        startIndex = i;
+      }
+      cumulativeHeight += rowHeights[i] ?? 0;
+    }
+    // Find end index
+    cumulativeHeight = 0;
+    for (let i = 0; i < totalRows; i++) {
+      cumulativeHeight += rowHeights[i] ?? 0;
+      if (cumulativeHeight >= scrollTop + containerHeight && endIndex === totalRows - 1) {
+        endIndex = i;
+        break;
+      }
+    }
+    // Apply buffer
+    startIndex = Math.max(0, startIndex - buffer);
+    endIndex = Math.min(totalRows - 1, endIndex + buffer);
+    // Expand range to include focus row if needed
+    if (focusRowId) {
+      const focusIndex = fullData.findIndex(row => row.stepId === focusRowId || row.isNew && focusRowId === 'new-row');
+      if (focusIndex >= 0) {
+        if (focusIndex < startIndex) {
+          startIndex = focusIndex;
+        } else if (focusIndex > endIndex) {
+          endIndex = focusIndex;
+        }
+      }
+    }
+    // Calculate padding
+    paddingTop = rowHeights.slice(0, startIndex).reduce((sum, height) => sum + height, 0);
+    paddingBottom = rowHeights.slice(endIndex + 1).reduce((sum, height) => sum + height, 0);
+  } else {
+    // Fallback to estimated virtualization
+    startIndex = Math.max(0, Math.floor(scrollTop / estimatedRowHeight) - buffer);
+    endIndex = Math.min(totalRows - 1, startIndex + Math.ceil(containerHeight / estimatedRowHeight) + buffer);
+    // Expand range to include focus row if needed
+    if (focusRowId) {
+      const focusIndex = fullData.findIndex(row => row.stepId === focusRowId || row.isNew && focusRowId === 'new-row');
+      if (focusIndex >= 0) {
+        if (focusIndex < startIndex) {
+          startIndex = focusIndex;
+        } else if (focusIndex > endIndex) {
+          endIndex = focusIndex;
+        }
+      }
+    }
+    paddingTop = startIndex * estimatedRowHeight;
+    paddingBottom = (totalRows - endIndex - 1) * estimatedRowHeight;
+  }
+  const visibleRows = fullData.slice(startIndex, endIndex + 1);
+  // Infinite scroll observer
+  React.useEffect(() => {
+    const scrollContainer = containerRef.current;
     const firstNode = document.getElementById('ff-table-first-node');
     const lastNode = document.getElementById('ff-table-last-node');
-    // Exit early if data is empty or elements are missing
     if (!scrollContainer || !firstNode || !lastNode || !data?.length) {
       return;
     }
@@ -78980,7 +79154,6 @@ const StepInnerTable = ({
     observerRef.current.observe(firstNode);
     observerRef.current.observe(lastNode);
     return () => {
-      // Cleanup observer
       observerRef.current?.disconnect();
     };
   }, [data, loadMore]);
@@ -79018,15 +79191,18 @@ const StepInnerTable = ({
       items: data?.map(row => row._id || row.stepId),
       strategy: verticalListSortingStrategy,
       children: jsxRuntime.jsxs("div", {
+        ref: containerRef,
         style: {
           height: height,
-          position: 'relative'
+          position: 'relative',
+          overflow: 'auto'
         },
         id: "ff-table-scroll-container",
         className: classNames(className, {
           'ff-fixed-header-steps-table': withFixedHeader,
           'steps-border-borderRadius': borderWithRadius
         }),
+        onScroll: handleScroll,
         children: [jsxRuntime.jsxs("table", {
           className: classNames(`ff-table-steps`),
           cellSpacing: 0,
@@ -79043,30 +79219,43 @@ const StepInnerTable = ({
           }), jsxRuntime.jsxs("tbody", {
             className: "ff-steps-tbody",
             children: [jsxRuntime.jsx("tr", {
-              id: "ff-table-first-node"
-            }), appendNewRow(data, AddNlp ?? {})?.map((row, index) => {
+              id: "ff-table-first-node",
+              style: {
+                display: 'none'
+              }
+            }), paddingTop > 0 && jsxRuntime.jsx("tr", {
+              children: jsxRuntime.jsx("td", {
+                style: {
+                  height: paddingTop,
+                  padding: 0
+                },
+                colSpan: columns.length
+              })
+            }), visibleRows.map((row, index) => {
+              const absoluteIndex = startIndex + index;
               const isEdit = editMode === row.stepId;
               const isEditOrNew = isEdit || row.isNew;
+              const isFocusRow = isEdit && row.stepId === focusRowId || row.isNew && focusRowId === 'new-row';
               const renderEditableRow = () => jsxRuntime.jsxs("tr", {
                 className: "steps-edit-row",
-                id: "getInFocus",
+                id: isFocusRow ? 'getInFocus' : undefined,
                 children: [isEdit && /*#__PURE__*/React.isValidElement(editComponent) && jsxRuntime.jsx("td", {
                   colSpan: columns.length,
                   children: /*#__PURE__*/React.cloneElement(editComponent, {
                     rowData: row,
-                    rowIndex: index + 1
+                    rowIndex: absoluteIndex + 1
                   })
                 }), row.isNew && !isEdit && /*#__PURE__*/React.isValidElement(NlpComponent) && jsxRuntime.jsx("td", {
                   colSpan: columns.length,
                   children: /*#__PURE__*/React.cloneElement(NlpComponent, {
-                    rowIndex: index,
+                    rowIndex: absoluteIndex,
                     rowData: row
                   })
                 })]
-              }, row.stepId || index);
+              }, row.stepId || absoluteIndex);
               const renderSortableRow = () => jsxRuntime.jsx(StepTableMainRow$1, {
                 row: row,
-                indexNumber: index,
+                indexNumber: absoluteIndex,
                 columns: columns,
                 tableBodyRowClass: tableBodyRowClass,
                 handleOnclick: handleOnclick,
@@ -79084,11 +79273,23 @@ const StepInnerTable = ({
                 dataLength: data?.length,
                 stepPartialSelect: stepPartialSelect,
                 isViewPrivilegeMode: isViewPrivilegeMode,
-                isClientSide: isClientSide
+                isClientSide: isClientSide,
+                updateRowHeight: updateRowHeight
               });
               return isEditOrNew ? renderEditableRow() : renderSortableRow();
+            }), paddingBottom > 0 && jsxRuntime.jsx("tr", {
+              children: jsxRuntime.jsx("td", {
+                style: {
+                  height: paddingBottom,
+                  padding: 0
+                },
+                colSpan: columns.length
+              })
             }), jsxRuntime.jsx("tr", {
-              id: "ff-table-last-node"
+              id: "ff-table-last-node",
+              style: {
+                display: 'none'
+              }
             })]
           })]
         }), data?.length <= 0 && jsxRuntime.jsx("div", {
@@ -79814,7 +80015,6 @@ const StepLandingTable = /*#__PURE__*/React.forwardRef(({
     }
   }));
   React.useEffect(() => {
-    scrollToView('getInFocus');
     if (!checkEmpty(AddNlp)) {
       setViewComponent(() => null);
       setViewModeId(null);