ff-step-table 1.0.2 → 1.0.4

package/lib/components/StepsLandingTable/StepLandingTable.js

@@ -1,513 +1,226 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useImperativeHandle, useMemo, useState, } from 'react';
 import classNames from 'classnames';
 import './StepLandingTable.scss';
-import '../Checkbox/Checkbox.scss';
+import StepInnerTable from './Components';
 import { gettingBlockMap, getUpdatedExpandedRows, getUpdatedPartialSelect, getUpdatedSelectedRows, hasSelectedIds, updateCheckboxStatus, } from './Components/handleStepCheckBox';
-import VirtualSurface from './internal/VirtualSurface';
-import { buildGridTemplates, flattenVisibleNodes, } from './internal/flattenVisibleNodes';
-import { DataRow, InlineDetailRow, InlineEditRow, InlineNlpRow, NoDataRow, SectionHeaderRow, } from './internal/renderers';
+import StepsTitle from './Components/StepsTitle';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 import Typography from '../Typography';
-const createEmptySelection = (tableData) => Object.fromEntries(tableData.map((section) => [section.title, new Set()]));
-const getChildRows = (row) => Array.isArray(row?.data)
-    ? row.data
-    : Array.isArray(row?.stepResults)
-        ? row.stepResults
-        : [];
-const collectStepIds = (rows, target = new Set()) => {
-    rows.forEach((row) => {
-        if (row?.stepId) {
-            target.add(row.stepId);
-        }
-        const children = getChildRows(row);
-        if (children.length > 0) {
-            collectStepIds(children, target);
-        }
-    });
-    return target;
-};
-const StepLandingTable = React.memo(React.forwardRef(({ tableMeta = [], tableData = [], noDataContent, height = '100%', withFixedHeader = false, headerType, handleDragStart, onDragEnd, editMode, editComponent, NlpComponent, AddNlp, handleAccordion, handleViewComponent, onSelectClick, loading = false, isViewPrivilegeMode = false, defaultExpanded = 'Steps', isHeaderRequired = true, isClientSide = false, highlightKey, onHighlightComplete, isDraggable = true, isMaximize = false, handleParentRowHover, handleParentRowHoverOut, }, ref) => {
-    const surfaceRef = useRef(null);
-    const selectedRowsRef = useRef(createEmptySelection(tableData));
-    const partialSelectionRef = useRef(new Set());
-    const hoveredRootRowRef = useRef(null);
-    const dragSessionRef = useRef(null);
-    const [viewModeId, setViewModeId] = useState(null);
+import StepLandingTableV2 from '../StepsLandingTableV2';
+const LegacyStepLandingTable = React.memo(React.forwardRef(({ tableMeta = [], tableData = [], noDataContent, height = '100%', withFixedHeader = false, headerType, handleDragStart, onDragEnd, editMode, editComponent, NlpComponent, AddNlp, handleAccordion, handleViewComponent, onSelectClick, loading = false, isViewPrivilegeMode = false, defaultExpanded = 'Steps', isHeaderRequired = true, isClientSide = false, highlightKey, onHighlightComplete, isDraggable = true, isMaximize = false, handleParentRowHover, handleParentRowHoverOut, }, ref) => {
     const [ViewComponent, setViewComponent] = useState(null);
+    const [viewModeId, setViewModeId] = useState(null);
     const [expandedRows, setExpandedRows] = useState({});
-    const [expandedGroups, setExpandedGroups] = useState(new Set());
-    const [selectedRows, setSelectedRows] = useState(() => createEmptySelection(tableData));
-    const [stepPartialSelect, setStepPartialSelect] = useState(() => new Set());
-    const [dragState, setDragState] = useState(null);
-    useEffect(() => {
-        selectedRowsRef.current = selectedRows;
-    }, [selectedRows]);
-    useEffect(() => {
-        partialSelectionRef.current = stepPartialSelect;
-    }, [stepPartialSelect]);
-    const gridTemplates = useMemo(() => buildGridTemplates(tableMeta), [tableMeta]);
-    const onAccordionClick = useCallback((title, action = 'toggle') => {
-        const section = tableData.find((row) => row.title === title);
-        if (!section || !Array.isArray(section.data) || section.data.length === 0) {
+    const [expandStepGroup, setExpandStepGroup] = useState(new Map());
+    const [isBulkEnable, setBulkEnable] = useState(false);
+    const onAccordionClick = useCallback((title, action) => {
+        const row = tableData.find((row) => row.title === title);
+        if (!row || !row.data || row.data.length === 0) {
             return;
         }
-        setExpandedRows((previous) => ({
-            ...previous,
-            [title]: action === 'open' ? true : !previous[title],
+        setExpandedRows((prev) => ({
+            ...prev,
+            [title]: action === 'open' ? true : !prev[title],
         }));
     }, [tableData]);
+    const isExpanded = useMemo(() => (title) => expandedRows[title] ?? false, [expandedRows]);
     const toggleViewRow = useCallback((row) => {
-        setViewModeId((previous) => (previous === row?.stepId ? null : row?.stepId ?? null));
+        setViewModeId((prev) => (prev === row?.stepId ? null : row?.stepId));
     }, []);
     const handleClick = useCallback((item) => {
         toggleViewRow(item);
-        const component = handleViewComponent?.(item, toggleViewRow);
-        if (component) {
-            setViewComponent(() => component);
-            return;
-        }
-        toggleViewRow(null);
-        setViewComponent(null);
-    }, [handleViewComponent, toggleViewRow]);
-    const handleUpdateCheckboxState = useCallback((updatedTableData, rowData, isChecked, sectionTitle = 'Steps') => {
-        const { updateSelectRow, updateStepPartialSelect } = updateCheckboxStatus(updatedTableData, rowData, isChecked, selectedRowsRef.current, partialSelectionRef.current, sectionTitle);
-        if (updateSelectRow) {
-            setSelectedRows(updateSelectRow);
-        }
-        if (updateStepPartialSelect) {
-            setStepPartialSelect(updateStepPartialSelect);
-        }
-    }, []);
-    useEffect(() => {
-        const nextSelected = getUpdatedSelectedRows(tableData, selectedRowsRef.current);
-        let nextPartial = getUpdatedPartialSelect(tableData, partialSelectionRef.current);
-        if (hasSelectedIds(nextSelected)) {
-            const { updateSelectRow, updateStepPartialSelect } = gettingBlockMap(tableData, nextSelected, nextPartial);
-            if (updateSelectRow) {
-                setSelectedRows(updateSelectRow);
-            }
-            else {
-                setSelectedRows(nextSelected);
-            }
-            if (updateStepPartialSelect) {
-                nextPartial = updateStepPartialSelect;
-            }
+        const Component = handleViewComponent?.(item, toggleViewRow);
+        if (Component) {
+            setViewComponent(() => Component);
         }
         else {
-            setSelectedRows(nextSelected);
+            toggleViewRow(null);
         }
-        setStepPartialSelect(nextPartial);
-        setExpandedRows((previous) => getUpdatedExpandedRows(tableData, previous, defaultExpanded));
-        setExpandedGroups((previous) => {
-            const validIds = collectStepIds(tableData.flatMap((section) => section.data ?? []));
-            return new Set([...previous].filter((rowId) => validIds.has(rowId)));
-        });
-    }, [defaultExpanded, tableData]);
+    }, [handleViewComponent, toggleViewRow]);
+    const [selectedRows, setSelectedRows] = useState(Object.fromEntries(tableData.map((section) => [section.title, new Set()])));
+    const [stepPartialSelect, setStepPartialSelect] = useState(new Set());
+    useEffect(() => {
+        setSelectedRows((pre) => getUpdatedSelectedRows(tableData, pre));
+        setStepPartialSelect((prevPartialSelect) => getUpdatedPartialSelect(tableData, prevPartialSelect));
+        setExpandedRows((prev) => getUpdatedExpandedRows(tableData, prev, defaultExpanded));
+        if (selectedRows && !hasSelectedIds(selectedRows))
+            return;
+        const { updateSelectRow, updateStepPartialSelect } = gettingBlockMap(tableData, selectedRows, stepPartialSelect);
+        if (updateStepPartialSelect)
+            setStepPartialSelect(updateStepPartialSelect);
+        if (updateSelectRow)
+            setSelectedRows(updateSelectRow);
+    }, [tableData]);
     useEffect(() => {
         if (hasSelectedIds(selectedRows)) {
-            onSelectClick?.({
+            const updatedSelection = {
                 ...selectedRows,
                 partialSelected: stepPartialSelect,
-            });
-            return;
+            };
+            onSelectClick?.(updatedSelection);
         }
-        onSelectClick?.(selectedRows);
-    }, [onSelectClick, selectedRows, stepPartialSelect]);
+        else {
+            onSelectClick?.(selectedRows);
+        }
+    }, [selectedRows]);
     const handleMainCheckbox = useCallback((sectionTitle, checked) => {
-        const section = tableData.find((item) => item.title === sectionTitle);
-        const allRowIds = section?.data?.map((row) => row.stepId) ?? [];
-        setSelectedRows((previous) => ({
-            ...previous,
-            [sectionTitle]: checked ? new Set(allRowIds) : new Set(),
-        }));
-        if (!checked) {
-            setStepPartialSelect(new Set());
+        const allRowIds = tableData
+            .find((section) => section.title === sectionTitle)
+            ?.data.map((row) => row.stepId);
+        if (allRowIds) {
+            setSelectedRows((prev) => ({
+                ...prev,
+                [sectionTitle]: checked ? new Set(allRowIds) : new Set(),
+            }));
+            if (!checked)
+                setStepPartialSelect(new Set());
         }
     }, [tableData]);
-    const handleRowCheckbox = useCallback((sectionTitle, rowData, isChecked) => {
-        handleUpdateCheckboxState(tableData, rowData, isChecked, sectionTitle);
-    }, [handleUpdateCheckboxState, tableData]);
+    const handleUpdateCheckboxState = useCallback((tableData, rowData, isChecked, sectionTitle) => {
+        const { updateSelectRow, updateStepPartialSelect } = updateCheckboxStatus(tableData, rowData, isChecked, selectedRows, stepPartialSelect, sectionTitle);
+        if (updateStepPartialSelect)
+            setStepPartialSelect(updateStepPartialSelect);
+        if (updateSelectRow)
+            setSelectedRows(updateSelectRow);
+    }, [selectedRows, stepPartialSelect]);
+    const handleRowCheckbox = useCallback((sectionTitle, row, isChecked) => {
+        handleUpdateCheckboxState(tableData, row, isChecked, sectionTitle);
+    }, [tableData, handleUpdateCheckboxState]);
+    const isAllSelected = useCallback((sectionTitle, totalRows) => {
+        const isSelected = totalRows > 0 && selectedRows[sectionTitle]?.size === totalRows;
+        if (sectionTitle.includes('Script')) {
+            setBulkEnable(isSelected);
+        }
+        return isSelected;
+    }, [selectedRows]);
+    const isPartialSelected = useCallback((sectionTitle, totalRows) => {
+        const selectedCount = selectedRows[sectionTitle]?.size || 0;
+        return selectedCount > 0 && selectedCount < totalRows;
+    }, [selectedRows]);
+    const isStepGroupExpanded = useCallback((stepId) => expandStepGroup.has(stepId), [expandStepGroup]);
     const handleStepGroupExpand = useCallback((rowData) => {
-        const rowId = rowData?.stepId;
-        if (!rowId) {
-            return;
-        }
-        const isExpanded = expandedGroups.has(rowId);
-        if (!isExpanded) {
-            if (viewModeId) {
+        if (!isStepGroupExpanded(rowData?.stepId)) {
+            if (viewModeId)
                 toggleViewRow(null);
-                setViewComponent(null);
-            }
             handleAccordion?.(rowData);
         }
         if (!loading) {
-            setExpandedGroups((previous) => {
-                const next = new Set(previous);
-                if (next.has(rowId)) {
-                    next.delete(rowId);
+            setExpandStepGroup((prev) => {
+                const newMap = new Map(prev);
+                if (newMap.has(rowData?.stepId)) {
+                    newMap.delete(rowData?.stepId);
                 }
                 else {
-                    next.add(rowId);
+                    newMap.set(rowData?.stepId, true);
                 }
-                return next;
+                return newMap;
             });
         }
-    }, [expandedGroups, handleAccordion, loading, toggleViewRow, viewModeId]);
-    const visibleNodes = useMemo(() => flattenVisibleNodes({
-        tableData,
-        addNlp: AddNlp,
-        editMode,
+    }, [
+        isStepGroupExpanded,
         viewModeId,
-        expandedGroups,
-        expandedSections: expandedRows,
+        toggleViewRow,
+        handleAccordion,
+        loading,
+    ]);
+    const getAccordionTableContent = useCallback((rows) => {
+        if (rows.title === 'Steps' && !isViewPrivilegeMode) {
+            return (_jsx(StepInnerTable, { onHighlightComplete: onHighlightComplete, highlightKey: highlightKey, draggable: isDraggable, columns: tableMeta, onDragEnd: onDragEnd, data: rows.data, headerType: headerType, withCheckbox: true, editMode: editMode, editComponent: editComponent, noDataContent: noDataContent, NlpComponent: NlpComponent, AddNlp: AddNlp, tableType: rows.title, handleDragStart: () => {
+                    expandStepGroup.clear();
+                    handleDragStart?.();
+                }, onSelect: handleRowCheckbox, selectedRows: selectedRows, viewModeId: viewModeId, ViewComponent: ViewComponent, handleClick: handleClick, handleStepGroupExpand: handleStepGroupExpand, isStepGroupExpanded: isStepGroupExpanded, stepPartialSelect: stepPartialSelect, height: rows?.data?.length === 0
+                    ? '300px'
+                    : rows?.data?.length <= 12
+                        ? 'auto'
+                        : height, isClientSide: isClientSide, handleRowHover: handleParentRowHover, handleRowHoverOut: handleParentRowHoverOut }));
+        }
+        else {
+            return (_jsx(StepInnerTable, { onHighlightComplete: onHighlightComplete, highlightKey: highlightKey, draggable: false, editMode: editMode, withCheckbox: !isViewPrivilegeMode, editComponent: editComponent, columns: tableMeta, data: rows.data, headerType: headerType, noDataContent: noDataContent, tableType: rows.title, onSelect: handleRowCheckbox, selectedRows: selectedRows, viewModeId: viewModeId, ViewComponent: ViewComponent, handleClick: handleClick, handleStepGroupExpand: handleStepGroupExpand, isStepGroupExpanded: isStepGroupExpanded, isViewPrivilegeMode: isViewPrivilegeMode, height: rows?.data?.length <= 15 ? 'auto' : height, isClientSide: isClientSide }));
+        }
+    }, [
         isViewPrivilegeMode,
+        onHighlightComplete,
+        highlightKey,
         isDraggable,
-        noDataContent,
-    }), [
-        AddNlp,
+        tableMeta,
+        onDragEnd,
+        headerType,
         editMode,
-        expandedGroups,
-        expandedRows,
-        isDraggable,
-        isViewPrivilegeMode,
+        editComponent,
         noDataContent,
-        tableData,
+        NlpComponent,
+        AddNlp,
+        expandStepGroup,
+        handleDragStart,
+        handleRowCheckbox,
+        selectedRows,
         viewModeId,
-    ]);
-    const nodeByRowId = useMemo(() => {
-        const lookup = new Map();
-        visibleNodes.forEach((node) => {
-            if (node.rowId && !lookup.has(node.rowId)) {
-                lookup.set(node.rowId, node);
-            }
-        });
-        return lookup;
-    }, [visibleNodes]);
-    const scrollTargetKey = useMemo(() => {
-        if (!checkEmpty(highlightKey)) {
-            return visibleNodes.find((node) => node.rowId === highlightKey)?.key ?? null;
-        }
-        if (editMode) {
-            return (visibleNodes.find((node) => node.kind === 'edit-row' && node.row?.stepId === editMode)?.key ?? null);
-        }
-        if (AddNlp && !checkEmpty(AddNlp)) {
-            return visibleNodes.find((node) => node.kind === 'nlp-row')?.key ?? null;
-        }
-        if (viewModeId) {
-            return (visibleNodes.find((node) => node.kind === 'detail-row' && node.row?.stepId === viewModeId)?.key ?? null);
-        }
-        return null;
-    }, [AddNlp, editMode, highlightKey, viewModeId, visibleNodes]);
-    const stepsRootNodeLookup = useMemo(() => {
-        const lookup = new Map();
-        visibleNodes.forEach((node) => {
-            if (node.kind === 'data-row' &&
-                node.depth === 0 &&
-                node.sectionTitle === 'Steps' &&
-                node.rowId) {
-                lookup.set(node.rowId, node);
-            }
-        });
-        return lookup;
-    }, [visibleNodes]);
-    const handleSurfaceClick = useCallback((event) => {
-        const actionTarget = event.target.closest('[data-step-action]');
-        if (!actionTarget) {
-            return;
-        }
-        const action = actionTarget.dataset.stepAction;
-        const rowId = actionTarget.dataset.stepRowId;
-        const sectionTitle = actionTarget.dataset.stepSectionTitle;
-        switch (action) {
-            case 'toggle-section': {
-                if (sectionTitle) {
-                    onAccordionClick(sectionTitle, 'toggle');
-                }
-                break;
-            }
-            case 'toggle-section-checkbox': {
-                if (!sectionTitle) {
-                    break;
-                }
-                const totalRows = tableData.find((section) => section.title === sectionTitle)?.data?.length ?? 0;
-                const selectedCount = selectedRows[sectionTitle]?.size ?? 0;
-                const nextChecked = (selectedCount > 0 && selectedCount < totalRows) ||
-                    selectedCount !== totalRows;
-                handleMainCheckbox(sectionTitle, nextChecked);
-                break;
-            }
-            case 'toggle-row-checkbox': {
-                if (!rowId || !sectionTitle) {
-                    break;
-                }
-                const rowNode = nodeByRowId.get(rowId);
-                if (!rowNode?.row) {
-                    break;
-                }
-                const isChecked = selectedRows[sectionTitle]?.has(rowId) ?? false;
-                const nextChecked = stepPartialSelect.has(rowId) || !isChecked;
-                handleRowCheckbox(sectionTitle, rowNode.row, nextChecked);
-                break;
-            }
-            case 'toggle-group': {
-                if (!rowId) {
-                    break;
-                }
-                const rowNode = nodeByRowId.get(rowId);
-                if (!rowNode?.row) {
-                    break;
-                }
-                handleStepGroupExpand({
-                    ...rowNode.row,
-                    tableType: rowNode.tableType,
-                    serialNumber: rowNode.serialNumber,
-                });
-                break;
-            }
-            case 'toggle-view': {
-                if (!rowId) {
-                    break;
-                }
-                const rowNode = nodeByRowId.get(rowId);
-                if (rowNode?.row) {
-                    handleClick({ ...rowNode.row, tableType: rowNode.tableType });
-                }
-                break;
-            }
-            default:
-                break;
-        }
-    }, [
+        ViewComponent,
         handleClick,
-        handleMainCheckbox,
-        handleRowCheckbox,
         handleStepGroupExpand,
-        nodeByRowId,
-        onAccordionClick,
-        selectedRows,
+        isStepGroupExpanded,
         stepPartialSelect,
-        tableData,
-    ]);
-    const stopDragging = useCallback((commit) => {
-        const session = dragSessionRef.current;
-        window.removeEventListener('pointermove', handlePointerMove);
-        window.removeEventListener('pointerup', handlePointerUp);
-        document.body.style.userSelect = '';
-        dragSessionRef.current = null;
-        setDragState(null);
-        if (!commit || !session || session.sourceIndex === session.targetIndex) {
-            return;
-        }
-        onDragEnd?.(session.sourceIndex, session.targetIndex);
-    }, [onDragEnd]);
-    const handlePointerMove = useCallback((event) => {
-        const session = dragSessionRef.current;
-        const surface = surfaceRef.current;
-        if (!session || !surface) {
-            return;
-        }
-        const surfaceRect = surface.getBoundingClientRect();
-        const nextOverlayTop = event.clientY - session.pointerOffsetY;
-        const autoScrollEdge = 56;
-        if (event.clientY < surfaceRect.top + autoScrollEdge) {
-            surface.scrollTop -= 18;
-        }
-        else if (event.clientY > surfaceRect.bottom - autoScrollEdge) {
-            surface.scrollTop += 18;
-        }
-        const rootRows = Array.from(surface.querySelectorAll('.ff-step-row--data[data-step-root-row="true"][data-step-section-title="Steps"]'));
-        let nextTargetIndex = session.targetIndex;
-        let nextMarkerTop = session.markerTop;
-        if (rootRows.length > 0) {
-            const firstRootRow = rootRows[0];
-            if (!firstRootRow) {
-                return;
-            }
-            let closestElement = firstRootRow;
-            let smallestDistance = Number.POSITIVE_INFINITY;
-            rootRows.forEach((element) => {
-                const bounds = element.getBoundingClientRect();
-                const center = bounds.top + bounds.height / 2;
-                const distance = Math.abs(center - event.clientY);
-                if (distance < smallestDistance) {
-                    smallestDistance = distance;
-                    closestElement = element;
-                }
-            });
-            const nextRowId = closestElement.dataset.stepRowId;
-            const targetNode = nextRowId ? stepsRootNodeLookup.get(nextRowId) : undefined;
-            if (targetNode) {
-                nextTargetIndex = targetNode.rootIndex;
-                nextMarkerTop = closestElement.getBoundingClientRect().top;
-            }
-        }
-        const nextSession = {
-            ...session,
-            targetIndex: nextTargetIndex,
-            overlayTop: nextOverlayTop,
-            overlayLeft: surfaceRect.left,
-            overlayWidth: surfaceRect.width,
-            markerTop: nextMarkerTop,
-        };
-        dragSessionRef.current = nextSession;
-        setDragState(nextSession);
-    }, [stepsRootNodeLookup]);
-    const handlePointerUp = useCallback(() => {
-        stopDragging(true);
-    }, [stopDragging]);
-    const handleSurfacePointerDown = useCallback((event) => {
-        const dragHandle = event.target.closest('[data-step-action="start-drag"]');
-        if (!dragHandle || !surfaceRef.current || !onDragEnd) {
-            return;
-        }
-        const rowId = dragHandle.dataset.stepRowId;
-        if (!rowId) {
-            return;
-        }
-        const node = stepsRootNodeLookup.get(rowId);
-        const rowElement = dragHandle.closest('.ff-step-row--data[data-step-row-id]');
-        if (!node || !node.row || !rowElement) {
-            return;
-        }
-        event.preventDefault();
-        setExpandedGroups(new Set());
-        handleDragStart?.();
-        const rowRect = rowElement.getBoundingClientRect();
-        const session = {
-            rowId,
-            sourceIndex: node.rootIndex,
-            targetIndex: node.rootIndex,
-            pointerOffsetY: event.clientY - rowRect.top,
-            overlayTop: rowRect.top,
-            overlayLeft: rowRect.left,
-            overlayWidth: rowRect.width,
-            markerTop: rowRect.top,
-            node,
-        };
-        dragSessionRef.current = session;
-        setDragState(session);
-        document.body.style.userSelect = 'none';
-        window.addEventListener('pointermove', handlePointerMove);
-        window.addEventListener('pointerup', handlePointerUp, { once: true });
-    }, [
-        handleDragStart,
-        handlePointerMove,
-        handlePointerUp,
-        onDragEnd,
-        stepsRootNodeLookup,
+        tableData.length,
+        height,
+        isClientSide,
     ]);
-    const handleSurfaceMouseOver = useCallback((event) => {
-        if (!handleParentRowHover && !handleParentRowHoverOut) {
-            return;
-        }
-        const rootRow = event.target.closest('.ff-step-row--data[data-step-root-row="true"][data-step-row-id]');
-        const rowId = rootRow?.dataset.stepRowId ?? null;
-        if (rowId === hoveredRootRowRef.current) {
-            return;
-        }
-        if (hoveredRootRowRef.current) {
-            handleParentRowHoverOut?.(hoveredRootRowRef.current);
-        }
-        hoveredRootRowRef.current = rowId;
-        if (rowId) {
-            handleParentRowHover?.(rowId);
-        }
-    }, [handleParentRowHover, handleParentRowHoverOut]);
-    const handleSurfaceMouseLeave = useCallback(() => {
-        if (hoveredRootRowRef.current) {
-            handleParentRowHoverOut?.(hoveredRootRowRef.current);
-            hoveredRootRowRef.current = null;
-        }
-    }, [handleParentRowHoverOut]);
-    useEffect(() => {
-        if (!checkEmpty(AddNlp)) {
-            setViewComponent(null);
-            setViewModeId(null);
-            if (AddNlp?.action === 'addLast') {
-                onAccordionClick('Steps', 'open');
-            }
-        }
-    }, [AddNlp, onAccordionClick]);
     useImperativeHandle(ref, () => ({
         resetSelection: () => {
-            setSelectedRows(createEmptySelection(tableData));
+            setSelectedRows(Object.fromEntries(tableData.map((section) => [section.title, new Set()])));
             setStepPartialSelect(new Set());
         },
         handleUpdateCheckbox: (rowData, updatedTableData) => {
-            if (rowData?.parentSpecialNlpId || rowData?.conditionSearchKey) {
-                handleUpdateCheckboxState(updatedTableData ?? tableData, rowData, false);
-            }
+            const parentSpecialNlpId = rowData?.parentSpecialNlpId;
+            const conditionSearchKey = rowData?.conditionSearchKey;
+            if (parentSpecialNlpId || conditionSearchKey)
+                if (updatedTableData) {
+                    handleUpdateCheckboxState(updatedTableData, rowData, false);
+                }
+                else {
+                    handleUpdateCheckboxState(tableData, rowData, false);
+                }
         },
         deleteRow: (rowData) => {
-            setSelectedRows((previous) => Object.fromEntries(Object.entries(previous).map(([key, ids]) => [
+            setSelectedRows((prev) => Object.fromEntries(Object.entries(prev)?.map(([key, ids]) => [
                 key,
                 new Set([...ids].filter((id) => id !== rowData?.stepId)),
             ])));
-            setStepPartialSelect((previous) => {
-                const next = new Set(previous);
-                next.delete(rowData?.stepId);
-                return next;
-            });
         },
         resetStepGroupAccordion: () => {
-            setExpandedGroups(new Set());
+            setExpandStepGroup(new Map());
         },
-    }), [handleUpdateCheckboxState, tableData]);
-    useEffect(() => () => {
-        stopDragging(false);
-    }, [stopDragging]);
-    const renderNode = useCallback((node) => {
-        switch (node.kind) {
-            case 'section-header': {
-                const totalRows = node.section?.data?.length ?? 0;
-                const selectedCount = selectedRows[node.sectionTitle]?.size ?? 0;
-                return (_jsx(SectionHeaderRow, { section: node.section, columns: tableMeta, grid: gridTemplates, expanded: expandedRows[node.sectionTitle] ?? false, totalRows: totalRows, selectedCount: selectedCount, isAllSelected: totalRows > 0 && selectedCount === totalRows, isPartialSelected: selectedCount > 0 && selectedCount < totalRows, showActionCell: selectedCount > 0 &&
-                        totalRows > 0 &&
-                        Boolean(node.section?.actionCell), isViewPrivilegeMode: isViewPrivilegeMode, isClientSide: isClientSide, isHeaderRequired: isHeaderRequired, isMaximize: isMaximize }));
-            }
-            case 'data-row': {
-                const rowId = node.rowId ?? '';
-                return (_jsx(DataRow, { node: node, columns: tableMeta, grid: gridTemplates, row: node.row, isSelected: selectedRows[node.sectionTitle]?.has(rowId) ?? false, isPartial: stepPartialSelect.has(rowId), isViewPrivilegeMode: isViewPrivilegeMode, isClientSide: isClientSide, showDragHandle: isDraggable && node.sectionTitle === 'Steps' }));
+    }), [tableData, handleUpdateCheckboxState]);
+    useEffect(() => {
+        if (!checkEmpty(AddNlp)) {
+            setViewComponent(() => null);
+            setViewModeId(null);
+            if (AddNlp?.action === 'addLast') {
+                onAccordionClick('Steps', 'open');
             }
-            case 'edit-row':
-                return (_jsx(InlineEditRow, { columns: tableMeta, grid: gridTemplates, editComponent: editComponent, node: node }));
-            case 'nlp-row':
-                return (_jsx(InlineNlpRow, { columns: tableMeta, grid: gridTemplates, nlpComponent: NlpComponent, node: node }));
-            case 'detail-row':
-                return (_jsx(InlineDetailRow, { columns: tableMeta, grid: gridTemplates, viewComponent: ViewComponent, node: node }));
-            case 'no-data-row':
-            default:
-                return (_jsx(NoDataRow, { columns: tableMeta, grid: gridTemplates, content: noDataContent, sectionTitle: node.sectionTitle }));
         }
-    }, [
-        NlpComponent,
-        ViewComponent,
-        editComponent,
-        expandedRows,
-        gridTemplates,
-        isClientSide,
-        isHeaderRequired,
-        isMaximize,
-        isViewPrivilegeMode,
-        noDataContent,
-        selectedRows,
-        stepPartialSelect,
-        tableMeta,
-    ]);
-    return (_jsxs("div", { className: classNames('ff-accordion-table-container-steps', {
+    }, [AddNlp]);
+    return (_jsxs("div", { 
+        // style={{ height, overflowY: 'auto' }}
+        className: classNames('ff-accordion-table-container-steps', {
             'ff-accordion-fixed-header-table': withFixedHeader,
-        }), children: [isHeaderRequired && !isClientSide && (_jsx("div", { className: classNames('ff-step-grid-header', {
+        }), children: [isHeaderRequired && !isClientSide && (_jsx("table", { cellSpacing: 0, className: classNames('ff-accordion-table', {
                     'ff-accordion-fixed-header': withFixedHeader,
-                }), style: { gridTemplateColumns: gridTemplates.bodyTemplate }, role: "row", children: tableMeta.map((column, index) => (_jsx("div", { style: { width: column?.width }, className: classNames('ff-table-header', headerType && `ff-accordion-table--${headerType}-bg`), role: "columnheader", children: _jsx(Typography, { as: "div", fontWeight: "semi-bold", lineHeight: "18px", color: "var(--drawer-title-color)", children: column.header }) }, `${column.header}-${index}`))) })), _jsx(VirtualSurface, { surfaceRef: surfaceRef, className: "ff-accordion-table-body", nodes: visibleNodes, height: height, renderNode: renderNode, scrollTargetKey: scrollTargetKey, onScrollTargetSettled: () => {
-                    if (!checkEmpty(highlightKey)) {
-                        onHighlightComplete?.();
-                    }
-                }, onClick: handleSurfaceClick, onPointerDown: handleSurfacePointerDown, onMouseOver: handleSurfaceMouseOver, onMouseLeave: handleSurfaceMouseLeave }), dragState && (_jsxs(_Fragment, { children: [_jsx("div", { className: "ff-step-drag-overlay", style: {
-                            top: dragState.overlayTop,
-                            left: dragState.overlayLeft,
-                            width: dragState.overlayWidth,
-                        }, children: _jsx(DataRow, { node: dragState.node, columns: tableMeta, grid: gridTemplates, row: dragState.node.row, isSelected: selectedRows[dragState.node.sectionTitle]?.has(dragState.rowId) ?? false, isPartial: stepPartialSelect.has(dragState.rowId), isViewPrivilegeMode: isViewPrivilegeMode, isClientSide: isClientSide, showDragHandle: isDraggable && dragState.node.sectionTitle === 'Steps' }) }), _jsx("div", { className: "ff-step-drag-marker", style: { top: dragState.markerTop, left: dragState.overlayLeft, width: dragState.overlayWidth } })] }))] }));
+                }), children: _jsx("thead", { className: "table-thead", children: _jsx("tr", { className: "ff-table-row", children: tableMeta.map((column, index) => (_jsx("th", { style: { width: column?.width }, className: classNames('ff-table-header', headerType && `ff-accordion-table--${headerType}-bg`), children: _jsx(Typography, { as: "div", fontWeight: "semi-bold", lineHeight: "18px", color: "var(--drawer-title-color)", children: column.header }) }, `${column.header}-${index}`))) }) }) })), _jsx("div", { className: "ff-accordion-table-body", style: { height: height, overflowY: 'auto' }, children: tableData?.map((row) => {
+                    const { title, data, actionCell, metaData } = row;
+                    const totalRows = data.length;
+                    const expanded = isExpanded(title);
+                    const selectedCount = selectedRows[title]?.size ?? 0;
+                    const showActionCell = selectedCount > 0 && totalRows > 0 && actionCell;
+                    return (_jsxs("div", { className: "column-table-accordion", children: [_jsx(StepsTitle, { isViewPrivilegeMode: isViewPrivilegeMode, onAccordionClick: onAccordionClick, showActionCell: showActionCell, handleMainCheckbox: handleMainCheckbox, isAllSelected: isAllSelected, isPartialSelected: isPartialSelected, title: title, totalRows: totalRows, expanded: expanded, metaData: metaData, actionCell: actionCell, row: row, tableMeta: tableMeta, isHeaderRequired: isHeaderRequired, isBulkEnable: isBulkEnable, isClientSide: isClientSide, isMaximize: isMaximize }), expanded && getAccordionTableContent(row)] }, title));
+                }) })] }));
+}));
+LegacyStepLandingTable.displayName = 'LegacyStepLandingTable';
+const StepLandingTable = React.memo(React.forwardRef((props, ref) => {
+    if (props.useV2Engine) {
+        return _jsx(StepLandingTableV2, { ...props, ref: ref });
+    }
+    return _jsx(LegacyStepLandingTable, { ...props, ref: ref });
 }));
 StepLandingTable.displayName = 'StepLandingTable';
 export default StepLandingTable;