ff-step-table 1.0.1 → 1.0.3

package/lib/components/StepsLandingTableV2/StepLandingTable.js

@@ -0,0 +1,637 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { cloneElement, isValidElement, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useSyncExternalStore, } from 'react';
+import { closestCorners, DndContext } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import classNames from 'classnames';
+import Checkbox from '../Checkbox';
+import Icon from '../Icon';
+import Typography from '../Typography';
+import StepsTitle from '../StepsLandingTable/Components/StepsTitle';
+import { fromLegacyProps, toLegacySelectionPayload } from './compat/legacyAdapter';
+import { isRowPartial, isRowSelected } from './selection/selectionEngine';
+import { createTableStore } from './store/store';
+import '../StepsLandingTable/StepLandingTable.scss';
+import '../StepsLandingTable/Components/StepInnerTable.scss';
+const StepLandingTableV2 = React.memo(React.forwardRef((props, ref) => {
+    const initialAdapterInput = useMemo(() => fromLegacyProps(props), []);
+    const storeRef = useRef(createTableStore(initialAdapterInput.snapshot));
+    const previousSnapshotRef = useRef(initialAdapterInput.snapshot);
+    const onSelectClickRef = useRef(props.onSelectClick);
+    const viewportRef = useRef(null);
+    const scrollRafRef = useRef(null);
+    const scrollIdleRef = useRef(null);
+    const latestScrollTopRef = useRef(0);
+    const adapterInput = useMemo(() => fromLegacyProps(props, previousSnapshotRef.current), [
+        props.defaultExpanded,
+        props.isDraggable,
+        props.isViewPrivilegeMode,
+        props.tableData,
+        props.tableMeta,
+    ]);
+    useEffect(() => {
+        const currentSnapshot = previousSnapshotRef.current;
+        if (areSnapshotsEquivalent(currentSnapshot, adapterInput.snapshot)) {
+            return;
+        }
+        previousSnapshotRef.current = adapterInput.snapshot;
+        storeRef.current.actions.setSnapshot(adapterInput.snapshot);
+    }, [adapterInput.snapshot]);
+    const state = useSyncExternalStore(storeRef.current.subscribe, storeRef.current.getState, storeRef.current.getState);
+    const selectionPayload = useMemo(() => toLegacySelectionPayload(state), [state.selection.version, state.snapshot.version]);
+    useEffect(() => {
+        onSelectClickRef.current = props.onSelectClick;
+    }, [props.onSelectClick]);
+    useEffect(() => {
+        onSelectClickRef.current?.(selectionPayload);
+    }, [selectionPayload]);
+    useEffect(() => {
+        const nextEditorState = deriveEditorState(props, storeRef.current.getState().snapshot);
+        storeRef.current.actions.setEditorState(nextEditorState);
+        if (nextEditorState.active) {
+            storeRef.current.actions.setDetailRow(null);
+        }
+        if (nextEditorState.active && nextEditorState.mode === 'add-last' && nextEditorState.sectionId) {
+            storeRef.current.actions.toggleSectionExpansion(nextEditorState.sectionId, 'open');
+        }
+    }, [props.AddNlp, props.editMode, state.snapshot.version]);
+    useLayoutEffect(() => {
+        const viewport = viewportRef.current;
+        if (!viewport) {
+            return undefined;
+        }
+        const updateSize = () => {
+            storeRef.current.actions.setViewportSize(viewport.clientWidth, viewport.clientHeight);
+        };
+        updateSize();
+        const resizeObserver = new ResizeObserver(updateSize);
+        resizeObserver.observe(viewport);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    useEffect(() => {
+        const viewport = viewportRef.current;
+        if (!viewport) {
+            return undefined;
+        }
+        const flushScroll = (timestamp) => {
+            scrollRafRef.current = null;
+            storeRef.current.actions.flushScrollFrame(latestScrollTopRef.current, timestamp);
+        };
+        const handleScroll = () => {
+            latestScrollTopRef.current = viewport.scrollTop;
+            if (scrollRafRef.current == null) {
+                scrollRafRef.current = requestAnimationFrame(flushScroll);
+            }
+            if (scrollIdleRef.current != null) {
+                window.clearTimeout(scrollIdleRef.current);
+            }
+            scrollIdleRef.current = window.setTimeout(() => {
+                storeRef.current.actions.settleScroll();
+            }, 120);
+        };
+        viewport.addEventListener('scroll', handleScroll, { passive: true });
+        handleScroll();
+        return () => {
+            viewport.removeEventListener('scroll', handleScroll);
+            if (scrollRafRef.current != null) {
+                cancelAnimationFrame(scrollRafRef.current);
+            }
+            if (scrollIdleRef.current != null) {
+                window.clearTimeout(scrollIdleRef.current);
+            }
+        };
+    }, []);
+    useImperativeHandle(ref, () => ({
+        resetSelection: () => {
+            storeRef.current.actions.resetSelection();
+        },
+        handleUpdateCheckbox: (rowData) => {
+            const rowId = rowData?.stepId;
+            if (rowId) {
+                storeRef.current.actions.removeRowSelection(rowId);
+            }
+        },
+        deleteRow: (rowData) => {
+            const rowId = rowData?.stepId;
+            if (rowId) {
+                storeRef.current.actions.removeRowSelection(rowId);
+            }
+        },
+        resetStepGroupAccordion: () => {
+            storeRef.current.actions.resetStepGroupAccordion();
+        },
+    }), []);
+    const gridTemplateColumns = useMemo(() => state.snapshot.columns.map((column) => `${column.width}px`).join(' '), [state.snapshot.columns]);
+    const sectionSourceById = useMemo(() => {
+        const map = new Map();
+        props.tableData.forEach((section) => {
+            const snapshotSection = state.snapshot.sectionIds.find((sectionId) => {
+                const entity = state.snapshot.sectionsById.get(sectionId);
+                return entity?.title === section?.title;
+            });
+            if (snapshotSection) {
+                map.set(snapshotSection, section);
+            }
+        });
+        return map;
+    }, [props.tableData, state.snapshot.sectionIds, state.snapshot.version]);
+    const topLevelIndexByRowId = useMemo(() => {
+        const map = new Map();
+        state.snapshot.sectionIds.forEach((sectionId) => {
+            const section = state.snapshot.sectionsById.get(sectionId);
+            section?.rowIds.forEach((rowId, index) => {
+                map.set(rowId, index);
+            });
+        });
+        return map;
+    }, [state.snapshot.version]);
+    const sortableRowIds = useMemo(() => {
+        const stepsSectionId = getStepsSectionId(state.snapshot);
+        if (!stepsSectionId) {
+            return [];
+        }
+        const stepsSection = state.snapshot.sectionsById.get(stepsSectionId);
+        return (stepsSection?.rowIds.filter((rowId) => {
+            const row = state.snapshot.rowsById.get(rowId);
+            return Boolean(row?.isDraggable);
+        }) ?? []);
+    }, [state.snapshot.version, props.isDraggable]);
+    const renderedNodes = useMemo(() => {
+        const { overscanStartIndex, overscanEndIndex } = state.viewport.range;
+        if (overscanEndIndex < overscanStartIndex) {
+            return [];
+        }
+        const nodes = state.visible.seq.range(overscanStartIndex, overscanEndIndex + 1);
+        return nodes.map((node, offset) => {
+            const index = overscanStartIndex + offset;
+            return {
+                node,
+                index,
+                top: state.heights.index.prefixSum(index),
+            };
+        });
+    }, [
+        state.visible.version,
+        state.viewport.range.overscanStartIndex,
+        state.viewport.range.overscanEndIndex,
+        state.heights.version,
+    ]);
+    const handleMeasuredHeight = useCallback((patch) => {
+        storeRef.current.actions.setMeasuredHeights([
+            {
+                index: 0,
+                nodeId: patch.node.id,
+                nextHeight: patch.height,
+                contentVersion: patch.node.contentVersion,
+            },
+        ]);
+    }, []);
+    const toggleSectionExpansion = useCallback((sectionId) => {
+        storeRef.current.actions.toggleSectionExpansion(sectionId);
+    }, []);
+    const toggleSectionSelection = useCallback((sectionId, checked) => {
+        storeRef.current.actions.toggleSectionSelection(sectionId, checked);
+    }, []);
+    const toggleDetailRow = useCallback((rowId) => {
+        const current = storeRef.current.getState().detail.activeRowId;
+        storeRef.current.actions.setDetailRow(current === rowId ? null : rowId);
+    }, []);
+    const handleGroupToggle = useCallback((rowId) => {
+        const current = storeRef.current.getState();
+        const row = current.snapshot.rowsById.get(rowId);
+        if (!row) {
+            return;
+        }
+        const isExpanded = current.expansion.expandedGroupIds.has(rowId);
+        if (!isExpanded && row.hasAsyncChildren && !row.childrenLoaded) {
+            const section = current.snapshot.sectionsById.get(row.sectionId);
+            const serialIndex = topLevelIndexByRowId.get(rowId);
+            storeRef.current.actions.setLoadingRow(rowId, true);
+            props.handleAccordion?.({
+                ...row.raw,
+                tableType: section?.title,
+                serialNumber: serialIndex != null ? String(serialIndex + 1) : undefined,
+            });
+        }
+        storeRef.current.actions.toggleGroupExpansion(rowId);
+    }, [props.handleAccordion, topLevelIndexByRowId]);
+    const handleDragStart = useCallback((event) => {
+        const rowId = event.active.id;
+        storeRef.current.actions.setDragState(rowId);
+        props.handleDragStart?.();
+    }, [props.handleDragStart]);
+    const handleDragEnd = useCallback((event) => {
+        const activeId = event.active.id;
+        const overId = event.over?.id;
+        storeRef.current.actions.clearDrag();
+        if (!overId || activeId === overId) {
+            return;
+        }
+        const stepsSectionId = getStepsSectionId(storeRef.current.getState().snapshot);
+        if (!stepsSectionId) {
+            return;
+        }
+        const stepsSection = storeRef.current.getState().snapshot.sectionsById.get(stepsSectionId);
+        if (!stepsSection) {
+            return;
+        }
+        const oldIndex = stepsSection.rowIds.indexOf(activeId);
+        const newIndex = stepsSection.rowIds.indexOf(overId);
+        if (oldIndex === -1 || newIndex === -1) {
+            return;
+        }
+        props.onDragEnd?.(oldIndex, newIndex);
+    }, [props.onDragEnd]);
+    const totalHeight = state.heights.index.totalHeight();
+    const hasSections = state.snapshot.sectionIds.length > 0;
+    return (_jsxs("div", { className: classNames('ff-accordion-table-container-steps', {
+            'ff-accordion-fixed-header-table': props.withFixedHeader,
+        }), children: [props.isHeaderRequired !== false && !props.isClientSide && (_jsx("table", { cellSpacing: 0, className: classNames('ff-accordion-table', {
+                    'ff-accordion-fixed-header': props.withFixedHeader,
+                }), children: _jsx("thead", { className: "table-thead", children: _jsx("tr", { className: "ff-table-row", children: state.snapshot.columns.map((column, index) => (_jsx("th", { style: { width: column.width }, className: classNames('ff-table-header', props.headerType && `ff-accordion-table--${props.headerType}-bg`), children: _jsx(Typography, { as: "div", fontWeight: "semi-bold", lineHeight: "18px", color: "var(--drawer-title-color)", children: column.header }) }, `${column.id}:${index}`))) }) }) })), _jsx(DndContext, { collisionDetection: closestCorners, modifiers: [restrictToVerticalAxis], onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: sortableRowIds, strategy: verticalListSortingStrategy, children: _jsx("div", { ref: viewportRef, className: "ff-accordion-table-body", style: {
+                            height: props.height ?? '100%',
+                            overflowY: 'auto',
+                            position: 'relative',
+                        }, children: !hasSections ? (props.noDataContent ?? null) : (_jsx("div", { style: {
+                                height: `${Math.max(totalHeight, 1)}px`,
+                                position: 'relative',
+                            }, children: renderedNodes.map(({ node, index, top }) => (_jsx(MeasuredNode, { node: node, top: top, onMeasure: handleMeasuredHeight, children: renderNode({
+                                    node,
+                                    index,
+                                    props,
+                                    state,
+                                    store: storeRef.current,
+                                    gridTemplateColumns,
+                                    selectionPayload,
+                                    sectionSourceById,
+                                    topLevelIndexByRowId,
+                                    onToggleSectionExpansion: toggleSectionExpansion,
+                                    onToggleSectionSelection: toggleSectionSelection,
+                                    onToggleDetailRow: toggleDetailRow,
+                                    onToggleGroup: handleGroupToggle,
+                                }) }, node.id))) })) }) }) })] }));
+}));
+StepLandingTableV2.displayName = 'StepLandingTableV2';
+export default StepLandingTableV2;
+function renderNode({ node, index, props, state, store, gridTemplateColumns, selectionPayload, sectionSourceById, topLevelIndexByRowId, onToggleSectionExpansion, onToggleSectionSelection, onToggleDetailRow, onToggleGroup, }) {
+    switch (node.kind) {
+        case 'section': {
+            const section = state.snapshot.sectionsById.get(node.sectionId);
+            if (!section) {
+                return _jsx(React.Fragment, {});
+            }
+            const rawSection = sectionSourceById.get(node.sectionId);
+            const selectedSet = selectionPayload[section.title] ?? new Set();
+            const totalRows = section.rowIds.length;
+            const isAllSelected = totalRows > 0 && selectedSet.size === totalRows;
+            const isPartialSelected = selectedSet.size > 0 && selectedSet.size < totalRows;
+            const showActionCell = selectedSet.size > 0 && totalRows > 0 && Boolean(section.actionCell);
+            const isBulkEnable = section.title.includes('Script') && isAllSelected;
+            return (_jsx("div", { className: "column-table-accordion", children: _jsx(StepsTitle, { isViewPrivilegeMode: props.isViewPrivilegeMode, onAccordionClick: () => onToggleSectionExpansion(node.sectionId), showActionCell: showActionCell, handleMainCheckbox: (title, checked) => {
+                        if (title === section.title) {
+                            onToggleSectionSelection(node.sectionId, checked);
+                        }
+                    }, isAllSelected: () => isAllSelected, isPartialSelected: () => isPartialSelected, title: section.title, totalRows: totalRows, expanded: state.expansion.expandedSectionIds.has(node.sectionId), metaData: section.metaData, actionCell: section.actionCell, row: rawSection ?? {
+                        title: section.title,
+                        data: section.rowIds.map((rowId) => state.snapshot.rowsById.get(rowId)?.raw),
+                    }, tableMeta: props.tableMeta, isHeaderRequired: props.isHeaderRequired, isBulkEnable: isBulkEnable, isClientSide: props.isClientSide, isMaximize: props.isMaximize }) }));
+        }
+        case 'row': {
+            const row = state.snapshot.rowsById.get(node.rowId);
+            if (!row) {
+                return _jsx(React.Fragment, {});
+            }
+            return (_jsx(VirtualDataRow, { row: row, node: node, props: props, state: state, store: store, gridTemplateColumns: gridTemplateColumns, rowIndex: topLevelIndexByRowId.get(row.id) ?? index, onToggleDetailRow: onToggleDetailRow, onToggleGroup: onToggleGroup }));
+        }
+        case 'detail': {
+            const row = state.snapshot.rowsById.get(node.rowId);
+            const DetailComponent = row
+                ? props.handleViewComponent?.(row.raw, () => store.actions.setDetailRow(null))
+                : null;
+            return (_jsx("div", { className: "steps-edit-row", style: { padding: '8px 16px' }, children: DetailComponent ? (_jsx(DetailComponent, {})) : (_jsx(Typography, { as: "div", lineHeight: "18px", children: "Detail unavailable" })) }));
+        }
+        case 'editor': {
+            const anchorRow = node.anchorRowId
+                ? state.snapshot.rowsById.get(node.anchorRowId)
+                : null;
+            const editorRowData = buildEditorRowData(state, node, anchorRow ?? null);
+            const rowIndex = state.editor.sourceIndex ??
+                (node.anchorRowId ? topLevelIndexByRowId.get(node.anchorRowId) ?? index : index);
+            return (_jsx("div", { className: "steps-edit-row", children: node.mode === 'edit' && isValidElement(props.editComponent) ? (cloneElement(props.editComponent, {
+                    rowData: anchorRow?.raw ?? editorRowData,
+                    rowIndex: rowIndex + 1,
+                })) : isValidElement(props.NlpComponent) ? (cloneElement(props.NlpComponent, {
+                    rowData: editorRowData,
+                    rowIndex,
+                })) : (_jsx(Typography, { as: "div", lineHeight: "18px", children: "Editor unavailable" })) }));
+        }
+        case 'loading':
+            return (_jsx("div", { className: "steps-edit-row", style: { padding: '8px 16px' }, children: _jsx(Typography, { as: "div", lineHeight: "18px", children: "Loading..." }) }));
+        case 'empty':
+            return (_jsx("div", { className: "steps-no-data-content", children: props.noDataContent ?? (_jsx(Typography, { as: "div", lineHeight: "18px", children: "No data available" })) }));
+    }
+}
+function MeasuredNode({ node, top, onMeasure, children }) {
+    const ref = useRef(null);
+    useLayoutEffect(() => {
+        const element = ref.current;
+        if (!element) {
+            return undefined;
+        }
+        const measure = () => {
+            onMeasure({
+                node,
+                height: element.getBoundingClientRect().height,
+            });
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => {
+            observer.disconnect();
+        };
+    }, [node, onMeasure]);
+    return (_jsx("div", { ref: ref, "data-nodeid": node.id, style: {
+            position: 'absolute',
+            top,
+            left: 0,
+            right: 0,
+        }, children: children }));
+}
+function VirtualDataRow({ row, props, state, store, gridTemplateColumns, rowIndex, onToggleDetailRow, onToggleGroup, }) {
+    const section = state.snapshot.sectionsById.get(row.sectionId);
+    const isSelected = isRowSelected(state.snapshot, state.selection.bySectionId, row.id);
+    const isPartial = isRowPartial(state.snapshot, state.selection.bySectionId, row.id);
+    const showCheckbox = row.parentId == null && !props.isViewPrivilegeMode && !props.isClientSide;
+    const canDrag = Boolean(props.isDraggable !== false &&
+        !props.isClientSide &&
+        row.parentId == null &&
+        row.isDraggable);
+    const canToggleDetail = row.parentId != null &&
+        !row.isDisabled &&
+        !String(row.displayName ?? row.name ?? '').includes('End') &&
+        Boolean(props.handleViewComponent);
+    const isGroupExpanded = state.expansion.expandedGroupIds.has(row.id);
+    const isDragDisabled = !canDrag;
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+        id: row.id,
+        disabled: isDragDisabled,
+    });
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+    return (_jsx("div", { ref: setNodeRef, "data-rowid": row.id, className: classNames('sortable-item', {
+            'disabled-inner-row': row.isDisabled || isDragDisabled,
+        }), onMouseEnter: () => {
+            store.actions.setHoveredRow(row.id);
+            if (row.parentId == null) {
+                props.handleParentRowHover?.(row.id);
+            }
+        }, onMouseLeave: () => {
+            store.actions.setHoveredRow(null);
+            if (row.parentId == null) {
+                props.handleParentRowHoverOut?.(row.id);
+            }
+        }, style: {
+            ...style,
+            display: 'grid',
+            gridTemplateColumns,
+            alignItems: 'center',
+        }, children: state.snapshot.columns.map((column, columnIndex) => {
+            const value = row.raw?.[column.accessor];
+            const tableType = section?.title;
+            const refId = row.raw?._id || row.raw?.id;
+            const cellContent = column.renderCell
+                ? column.renderCell({
+                    value,
+                    row: row.raw,
+                    column: column.accessor,
+                    index: rowIndex,
+                    tableType,
+                    refId,
+                })
+                : value ?? '--';
+            return (_jsx("div", { className: column.className, style: {
+                    padding: columnIndex === 0
+                        ? row.parentId == null
+                            ? canDrag
+                                ? '4px 8px 4px 0'
+                                : '4px 8px 4px 24px'
+                            : '7px 8px'
+                        : row.parentId == null && tableType === 'Steps'
+                            ? '4px 8px'
+                            : '7px 8px',
+                    maxWidth: column.width,
+                }, children: _jsxs(Typography, { as: "div", lineHeight: "18px", className: "ff-data-checkbox-container", children: [columnIndex === 0 && canDrag && (_jsx("div", { className: isDragDisabled ? 'ff-table-drag' : 'ff-table-drag-icon', ...listeners, ...attributes, children: _jsx(Icon, { name: "drag", className: isDragDisabled ? 'drag-icon-disabled' : 'drag-icon' }) })), columnIndex === 0 && showCheckbox && (_jsx("span", { className: isSelected || isPartial
+                                ? 'ff-step-table-select-checkbox'
+                                : 'ff-table-checkbox-step', children: _jsx(Checkbox, { onChange: (event) => store.actions.toggleRowSelection(row.id, event.target.checked), checked: isSelected, partial: isPartial, disabled: row.kind === 'special-end' }) })), _jsxs("div", { className: "ff-margin-container", style: {
+                                marginLeft: columnIndex === 0 ? row.marginLeft : 0,
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '8px',
+                            }, onDoubleClick: () => {
+                                if (columnIndex === 0 && canToggleDetail) {
+                                    onToggleDetailRow(row.id);
+                                }
+                            }, children: [_jsx("div", { style: { minWidth: 0, flex: 1 }, children: cellContent }), columnIndex === 0 && row.isExpandable && !props.isClientSide && (_jsx("button", { type: "button", className: `ff-accordion-arrow ${isGroupExpanded ? 'expanded' : ''}`, style: {
+                                        border: 0,
+                                        background: 'transparent',
+                                        padding: 0,
+                                    }, onClick: () => onToggleGroup(row.id), children: _jsx(Icon, { name: "arrow_right", color: isGroupExpanded
+                                            ? 'var(--brand-color)'
+                                            : 'var(--default-color)', className: "steps-arrow-svg", width: 12, height: 12 }) })), column.renderExtraInfo?.({
+                                    value,
+                                    row: row.raw,
+                                    column: column.accessor,
+                                    index: rowIndex,
+                                    tableType,
+                                    refId,
+                                })] })] }) }, `${row.id}:${column.id}`));
+        }) }));
+}
+function deriveEditorState(props, snapshot) {
+    const stepsSectionId = getStepsSectionId(snapshot);
+    const stepsSection = stepsSectionId
+        ? snapshot.sectionsById.get(stepsSectionId)
+        : null;
+    if (props.editMode) {
+        const rowId = String(props.editMode);
+        const row = snapshot.rowsById.get(rowId);
+        return {
+            active: Boolean(row),
+            mode: row ? 'edit' : 'none',
+            anchorRowId: row?.id ?? null,
+            sectionId: row?.sectionId ?? null,
+            sourceIndex: row && stepsSection ? stepsSection.rowIds.indexOf(row.id) : null,
+        };
+    }
+    if (!props.AddNlp?.action || !stepsSectionId || !stepsSection) {
+        return {
+            active: false,
+            mode: 'none',
+        };
+    }
+    const sourceIndex = props.AddNlp.sourceIndex != null ? props.AddNlp.sourceIndex : null;
+    const anchorRowId = sourceIndex != null ? stepsSection.rowIds[sourceIndex] ?? null : null;
+    const modeMap = {
+        addBelow: 'add-below',
+        addLast: 'add-last',
+        replaceNlp: 'replace',
+        EditNlp: 'replace',
+    };
+    return {
+        active: true,
+        mode: modeMap[props.AddNlp.action] ?? 'none',
+        anchorRowId,
+        sectionId: stepsSectionId,
+        sourceIndex,
+        nlpName: props.AddNlp.nlpName,
+    };
+}
+function getStepsSectionId(snapshot) {
+    return (snapshot.sectionIds.find((sectionId) => {
+        const section = snapshot.sectionsById.get(sectionId);
+        return section?.kind === 'steps' || section?.title === 'Steps';
+    }) ?? null);
+}
+function buildEditorRowData(state, _node, anchorRow) {
+    return {
+        ...(anchorRow?.raw ?? {}),
+        stepId: anchorRow?.id ?? 'new-row',
+        isNew: true,
+        name: state.editor.nlpName ?? anchorRow?.name ?? '',
+    };
+}
+function areSnapshotsEquivalent(previous, next) {
+    if (previous === next) {
+        return true;
+    }
+    if (previous.columns.length !== next.columns.length) {
+        return false;
+    }
+    for (let index = 0; index < previous.columns.length; index += 1) {
+        const prevColumn = previous.columns[index];
+        const nextColumn = next.columns[index];
+        if (!prevColumn || !nextColumn) {
+            return false;
+        }
+        if (prevColumn.id !== nextColumn.id ||
+            prevColumn.header !== nextColumn.header ||
+            prevColumn.accessor !== nextColumn.accessor ||
+            prevColumn.width !== nextColumn.width ||
+            prevColumn.className !== nextColumn.className ||
+            Boolean(prevColumn.renderCell) !== Boolean(nextColumn.renderCell) ||
+            Boolean(prevColumn.renderExtraInfo) !== Boolean(nextColumn.renderExtraInfo)) {
+            return false;
+        }
+    }
+    if (!isSameArray(previous.sectionIds, next.sectionIds)) {
+        return false;
+    }
+    if (previous.sectionsById.size !== next.sectionsById.size) {
+        return false;
+    }
+    for (let index = 0; index < previous.sectionIds.length; index += 1) {
+        const sectionId = previous.sectionIds[index];
+        if (!sectionId) {
+            return false;
+        }
+        const previousSection = previous.sectionsById.get(sectionId);
+        const nextSection = next.sectionsById.get(sectionId);
+        if (!previousSection || !nextSection) {
+            return false;
+        }
+        if (previousSection.title !== nextSection.title ||
+            previousSection.kind !== nextSection.kind ||
+            previousSection.selectableOrdinalStart !== nextSection.selectableOrdinalStart ||
+            previousSection.selectableOrdinalEnd !== nextSection.selectableOrdinalEnd ||
+            previousSection.selectableCount !== nextSection.selectableCount ||
+            previousSection.metaData !== nextSection.metaData ||
+            previousSection.actionCell !== nextSection.actionCell ||
+            previousSection.isDefaultExpanded !== nextSection.isDefaultExpanded ||
+            !isSameArray(previousSection.rowIds, nextSection.rowIds)) {
+            return false;
+        }
+    }
+    if (!isSameArray(previous.rowIds, next.rowIds)) {
+        return false;
+    }
+    if (previous.rowsById.size !== next.rowsById.size ||
+        previous.blocksById.size !== next.blocksById.size) {
+        return false;
+    }
+    for (let index = 0; index < previous.rowIds.length; index += 1) {
+        const rowId = previous.rowIds[index];
+        if (!rowId) {
+            return false;
+        }
+        const previousRow = previous.rowsById.get(rowId);
+        const nextRow = next.rowsById.get(rowId);
+        if (!previousRow || !nextRow) {
+            return false;
+        }
+        if (previousRow.sectionId !== nextRow.sectionId ||
+            previousRow.parentId !== nextRow.parentId ||
+            previousRow.depth !== nextRow.depth ||
+            previousRow.kind !== nextRow.kind ||
+            previousRow.name !== nextRow.name ||
+            previousRow.displayName !== nextRow.displayName ||
+            previousRow.message !== nextRow.message ||
+            previousRow.status !== nextRow.status ||
+            previousRow.marginLeft !== nextRow.marginLeft ||
+            previousRow.raw !== nextRow.raw ||
+            previousRow.isDisabled !== nextRow.isDisabled ||
+            previousRow.isDraggable !== nextRow.isDraggable ||
+            previousRow.isSelectable !== nextRow.isSelectable ||
+            previousRow.isExpandable !== nextRow.isExpandable ||
+            previousRow.hasAsyncChildren !== nextRow.hasAsyncChildren ||
+            previousRow.childrenLoaded !== nextRow.childrenLoaded ||
+            previousRow.detailCapable !== nextRow.detailCapable ||
+            previousRow.selectableOrdinal !== nextRow.selectableOrdinal ||
+            previousRow.subtreeSelectableStart !== nextRow.subtreeSelectableStart ||
+            previousRow.subtreeSelectableEnd !== nextRow.subtreeSelectableEnd ||
+            previousRow.blockId !== nextRow.blockId ||
+            previousRow.contentVersion !== nextRow.contentVersion ||
+            !isSameArray(previousRow.childIds, nextRow.childIds) ||
+            !isSameArray(previousRow.ancestorBlockIds, nextRow.ancestorBlockIds)) {
+            return false;
+        }
+    }
+    for (const [blockId, previousBlock] of previous.blocksById.entries()) {
+        const nextBlock = next.blocksById.get(blockId);
+        if (!nextBlock) {
+            return false;
+        }
+        if (previousBlock.kind !== nextBlock.kind ||
+            previousBlock.startRowId !== nextBlock.startRowId ||
+            previousBlock.endRowId !== nextBlock.endRowId ||
+            previousBlock.sectionId !== nextBlock.sectionId ||
+            previousBlock.parentBlockId !== nextBlock.parentBlockId ||
+            previousBlock.familyId !== nextBlock.familyId ||
+            previousBlock.selectableStartOrdinal !== nextBlock.selectableStartOrdinal ||
+            previousBlock.selectableEndOrdinal !== nextBlock.selectableEndOrdinal ||
+            previousBlock.selectableLeafCount !== nextBlock.selectableLeafCount ||
+            previousBlock.startDepth !== nextBlock.startDepth ||
+            !isSameArray(previousBlock.childRowIds, nextBlock.childRowIds) ||
+            !isSameArray(previousBlock.allRowIds, nextBlock.allRowIds)) {
+            return false;
+        }
+    }
+    return true;
+}
+function isSameArray(previous, next) {
+    if (previous.length !== next.length) {
+        return false;
+    }
+    for (let index = 0; index < previous.length; index += 1) {
+        if (previous[index] !== next[index]) {
+            return false;
+        }
+    }
+    return true;
+}
+//# sourceMappingURL=StepLandingTable.js.map