pixel-react 1.15.34 → 1.15.36

package/lib/index.cjs

@@ -4329,6 +4329,7 @@ const MultiSelect = ({
     };
   }, []);
   const hideSearchField = displayAllSelectedAsText && selectedOptions?.length === allOptions?.length;
+  const isAllSelectedData = selectedOptions?.length === allOptions?.length;
   return jsxRuntime.jsxs("div", {
     className: `ff-multiselect-container-with-icon ${className}`,
     children: [jsxRuntime.jsxs("div", {
@@ -4355,7 +4356,9 @@ const MultiSelect = ({
             required: required,
             children: label
           }), jsxRuntime.jsxs("div", {
-            className: "ff-multiselect-chip-container",
+            className: classNames('ff-multiselect-chip-container', {
+              ['ff-multiselect-chip-container__all_label']: isAllSelectedData
+            }),
             children: [!withSelectButton && (displayAllSelectedAsText && selectedOptions?.length === allOptions?.length && !checkEmpty(allOptions) && labelAccessor !== 'name' ? jsxRuntime.jsx(ChipElement, {
               zIndex: zIndex,
               label: "All",
@@ -13929,7 +13932,8 @@ const useFileDropzone = options => {
     selectedFile,
     setSelectedFile,
     handleReplaceFile = () => {},
-    showRejectedFileDetails
+    showRejectedFileDetails,
+    disabledDragAndDrop
   } = options;
   const file = !selectedFile ? [] : [selectedFile];
   const [files, setFiles] = React.useState({
@@ -14054,6 +14058,11 @@ const useFileDropzone = options => {
     removeFile(file);
   }, [removeFile]);
   const handleDrop = React.useCallback(event => {
+    if (disabledDragAndDrop && 'dataTransfer' in event) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
     event.preventDefault();
     event.stopPropagation();
     setIsDragActive(false);
@@ -14093,10 +14102,18 @@ const useFileDropzone = options => {
     if (onDrop) onDrop(accepted, rejected, event);
   }, [maxFiles, validateFile, onMaxFilesError, onDrop, files.accepted]);
   const handleDragOver = React.useCallback(event => {
+    if (disabledDragAndDrop) {
+      event.preventDefault();
+      return;
+    }
     event.preventDefault();
     setIsDragActive(true);
   }, []);
-  const handleDragLeave = React.useCallback(() => {
+  const handleDragLeave = React.useCallback(event => {
+    if (disabledDragAndDrop) {
+      event.preventDefault();
+      return;
+    }
     setIsDragActive(false);
   }, []);
   const getRootProps = React.useCallback(() => ({
@@ -14564,7 +14581,8 @@ const FileDropzone = ({
   handleReplaceFile,
   isRemoveDisabled,
   isReplaceDisabled,
-  showRejectedFileDetails = true
+  showRejectedFileDetails = true,
+  disabledDragAndDrop = false
 }) => {
   const {
     getRootProps,
@@ -14587,7 +14605,8 @@ const FileDropzone = ({
     selectedFile,
     setSelectedFile,
     handleReplaceFile,
-    showRejectedFileDetails
+    showRejectedFileDetails,
+    disabledDragAndDrop
     // onDrop: (accepted, rejected, event) => {}, //onDrop function to handle dropped or selected files explicitly.
   });
   React.useEffect(() => {
@@ -43738,7 +43757,18 @@ const EditableCell = /*#__PURE__*/React.forwardRef(({
     outline: 'none',
     transition: 'border 0.2s',
     whiteSpace: 'pre-wrap',
-    wordBreak: 'break-word'
+    wordBreak: 'break-word',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    lineHeight: 'normal',
+    minHeight: '32px',
+    verticalAlign: 'middle',
+    caretColor: 'black',
+    height: 'inherit',
+    maxHeight: 'inherit',
+    display: 'block',
+    position: 'relative',
+    paddingBottom: '2px'
   };
   const handleKeyDown = e => {
     if (e.key === 'Enter') {
@@ -43777,17 +43807,20 @@ const EditableCell = /*#__PURE__*/React.forwardRef(({
     handleInput();
   };
   return jsxRuntime.jsx("div", {
-    ref: cellRef,
-    className: `editable-cell ${className}`,
-    contentEditable: true,
-    suppressContentEditableWarning: true,
-    onKeyDown: handleKeyDown,
-    onInput: handleInput,
-    onPaste: handlePaste,
-    style: {
-      ...defaultStyle,
-      ...style
-    }
+    style: style,
+    children: jsxRuntime.jsx("div", {
+      ref: cellRef,
+      className: `editable-cell ${className}`,
+      contentEditable: true,
+      suppressContentEditableWarning: true,
+      onKeyDown: handleKeyDown,
+      onInput: handleInput,
+      onPaste: handlePaste,
+      spellCheck: false,
+      autoCorrect: "off",
+      autoCapitalize: "off",
+      style: defaultStyle
+    })
   });
 });
 
@@ -44251,6 +44284,7 @@ const ActiveCell = props => {
         justifyContent: cell?.style?.textAlign
       } : {}),
       ...(mode === 'edit' && active ? {
+        padding: '2px 4px 0px 4px',
         minWidth: Math.min(dimensions?.width, props.maxWidth),
         minHeight: Math.min(dimensions?.height, props.maxHeight),
         height: 'auto',
@@ -44263,66 +44297,69 @@ const ActiveCell = props => {
     onContextMenu: contextClick,
     onClick: mode === 'view' && !readOnly ? edit : undefined,
     tabIndex: 0,
-    children: [cell?.inputType?.type === 'dropDown' ? jsxRuntime.jsx(Select$1, {
-      ...cell?.inputType?.inputProps,
-      dropDownRef: selectRef,
-      showOptions: {
-        open: mode === 'edit' && active ? true : false,
-        toggle: selectOption
-      },
-      selectedOption: dropDownValue,
-      optionsList: allOption || [],
-      height: 26,
-      showLabel: false,
-      showBorder: false,
-      optionZIndex: 5000,
-      onChange: value => {
-        setDropDownValue({
-          value: value.value,
-          name: value.label
-        });
-        handleChange({
-          ...cell,
-          value: value.value,
-          style: cell?.style,
-          inputType: cell?.inputType
-        });
-      }
-    }) : cell?.inputType?.type === 'file' ? jsxRuntime.jsx(AttachmentButton, {
-      ...cell?.inputType?.inputProps,
-      label: "",
-      onFileListClick: handleClick,
-      selectedFiles: selectedFiles,
-      onFilesChange: handleFilesChange,
-      disabled: false,
-      maxFiles: 5,
-      buttonLabel: "+ Attachments",
-      buttonVariant: "tertiary",
-      deleteButton: true,
-      selectedFileMessage: "Duplicate attachments not allowed within the same row",
-      addAttachmentButton: true,
-      isInfoIconRequired: false,
-      truncateMaxLimit: dimensions?.width ?? 0 - 60
-    }) : mode === 'edit' && active ? jsxRuntime.jsx(DataEditor, {
-      row: active.row,
-      column: active.column,
-      cell: cell,
-      onChange: handleChange,
-      exitEditMode: view
-    }) : jsxRuntime.jsx(EditableCell, {
-      initialValue: cell?.value,
-      onChange: () => {},
-      className: "ff-spreadsheet-cell-textarea",
-      style: {
-        ...cell?.style,
-        textDecoration: cell?.style?.textDecoration === 'underline' ? 'underline' : 'none',
-        backgroundColor: isDragged ? '#1e161f00' : cell?.style?.backgroundColor,
-        pointerEvents: 'none',
-        borderTop: '',
-        borderBottom: '',
-        borderLeft: '',
-        borderRight: ''
-      }
+    children: [jsxRuntime.jsx("div", {
+      className: "active-cell-main",
+      children: cell?.inputType?.type === 'dropDown' ? jsxRuntime.jsx(Select$1, {
+        ...cell?.inputType?.inputProps,
+        dropDownRef: selectRef,
+        showOptions: {
+          open: mode === 'edit' && active ? true : false,
+          toggle: selectOption
+        },
+        selectedOption: dropDownValue,
+        optionsList: allOption || [],
+        height: 26,
+        showLabel: false,
+        showBorder: false,
+        optionZIndex: 5000,
+        onChange: value => {
+          setDropDownValue({
+            value: value.value,
+            name: value.label
+          });
+          handleChange({
+            ...cell,
+            value: value.value,
+            style: cell?.style,
+            inputType: cell?.inputType
+          });
+        }
+      }) : cell?.inputType?.type === 'file' ? jsxRuntime.jsx(AttachmentButton, {
+        ...cell?.inputType?.inputProps,
+        label: "",
+        onFileListClick: handleClick,
+        selectedFiles: selectedFiles,
+        onFilesChange: handleFilesChange,
+        disabled: false,
+        maxFiles: 5,
+        buttonLabel: "+ Attachments",
+        buttonVariant: "tertiary",
+        deleteButton: true,
+        selectedFileMessage: "Duplicate attachments not allowed within the same row",
+        addAttachmentButton: true,
+        isInfoIconRequired: false,
+        truncateMaxLimit: (dimensions?.width ?? 0) - 60
+      }) : mode === 'edit' && active ? jsxRuntime.jsx(DataEditor, {
+        row: active.row,
+        column: active.column,
+        cell: cell,
+        onChange: handleChange,
+        exitEditMode: view
+      }) : jsxRuntime.jsx(EditableCell, {
+        initialValue: cell?.value,
+        onChange: () => {},
+        className: "ff-spreadsheet-cell-textarea",
+        style: {
+          ...cell?.style,
+          textDecoration: cell?.style?.textDecoration === 'underline' ? 'underline' : 'none',
+          backgroundColor: isDragged ? '#1e161f00' : cell?.style?.backgroundColor,
+          pointerEvents: 'none',
+          borderTop: '',
+          borderBottom: '',
+          borderLeft: '',
+          borderRight: ''
+        }
+      })
     }), !['file'].includes(cell?.inputType?.type ?? '') && (mode === 'edit' || active && jsxRuntime.jsx("div", {
       onMouseDown: handleMouseDown,
       className: "select_dot"
@@ -50187,7 +50224,7 @@ const LineChart = ({
         children: point[xKey] != null ? String(point[xKey]) : ''
       }, String(point[xKey])));
     } else {
-      const tickSpacing = xMax / (numberOfXTicks - 1);
+      const tickSpacing = (width - margin * 2 - numberOfXTicks * 9.2) / (numberOfXTicks - 1);
       return Array.from({
         length: numberOfXTicks
       }).map((_, i) => {
@@ -50196,7 +50233,6 @@ const LineChart = ({
         return jsxRuntime.jsx("text", {
           x: i * tickSpacing,
           y: yMax + 15,
-          textAnchor: i === 0 ? 'start' : i === numberOfXTicks - 1 ? 'end' : 'middle',
           fill: yAxisColor,
           className: "ff--line-chart-x-line-data",
           style: {
@@ -52989,7 +53025,7 @@ const MediaViewerModal = ({
       })]
     }),
     icons: jsxRuntime.jsx(Tooltip, {
-      title: "close",
+      title: "Close",
       children: jsxRuntime.jsx(Icon, {
         name: "close",
         onClick: onClose
@@ -77974,18 +78010,46 @@ const StepGroupAccordions = /*#__PURE__*/React.memo(({
   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
+  const prepareData = (dataObj, columnObj, index, tableType) => {
+    const cellData = dataObj[columnObj.accessor];
+    if (columnObj.cell) {
+      const refId = dataObj._id || dataObj.id;
+      return columnObj.cell({
+        value: cellData,
+        row: dataObj,
+        column: columnObj.accessor,
+        index: index,
+        tableType: tableType,
+        ...(refId && {
+          refId
+        })
+      });
+    } else if (columnObj.accessor) {
+      return cellData;
+    } else if (cellData && typeof cellData !== 'object') {
+      return cellData;
+    } else {
+      return '--';
+    }
+  };
+  // Measure and report height with ResizeObserver
   React.useEffect(() => {
     if (!updateRowHeight) return;
-    let totalHeight = 0;
-    rowRefs.current.forEach(ref => {
-      if (ref) {
-        totalHeight += ref.getBoundingClientRect().height;
+    const resizeObserver = new ResizeObserver(() => {
+      let totalHeight = 0;
+      rowRefs.current.forEach(ref => {
+        if (ref) {
+          totalHeight += ref.getBoundingClientRect().height;
+        }
+      });
+      if (totalHeight > 0) {
+        updateRowHeight(parentIndex ?? 0, totalHeight);
       }
     });
-    if (totalHeight > 0) {
-      updateRowHeight(parentIndex ?? 0, totalHeight);
-    }
+    rowRefs.current.forEach(ref => {
+      if (ref) resizeObserver.observe(ref);
+    });
+    return () => resizeObserver.disconnect();
   }, [data, updateRowHeight, parentIndex, isStepGroupExpanded]);
   return jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: data?.map((item, itemIndex) => {
@@ -78071,7 +78135,7 @@ const StepGroupAccordions = /*#__PURE__*/React.memo(({
 });
 StepGroupAccordions.displayName = 'StepGroupAccordions';
 
-const StepTableMainRow = ({
+const StepTableMainRow = /*#__PURE__*/React.memo(({
   row,
   columns,
   tableBodyRowClass,
@@ -78097,7 +78161,7 @@ const StepTableMainRow = ({
 }) => {
   const rowRef = React.useRef(null);
   const isDisabled = React.useMemo(() => row?.isDisabled || (dataLength ?? 0) <= 1 || row.isSpecialNlp, [row, dataLength]);
-  let serialNumber = (indexNumber + 1).toString();
+  const serialNumber = (indexNumber + 1).toString();
   const {
     attributes,
     listeners,
@@ -78223,8 +78287,8 @@ const StepTableMainRow = ({
       updateRowHeight: updateRowHeight
     })]
   });
-};
-var StepTableMainRow$1 = /*#__PURE__*/React.memo(StepTableMainRow);
+});
+StepTableMainRow.displayName = 'StepTableMainRow';
 
 const StepInnerTable = ({
   data = [],
@@ -78326,11 +78390,13 @@ const StepInnerTable = ({
     }
     return undefined;
   }, [focusRowId, rowHeights, highlightKey, onHighlightComplete]);
-  // Handle scroll
-  const handleScroll = e => {
-    setScrollTop(e.currentTarget.scrollTop);
-  };
-  // Update row height callback
+  // Handle scroll with debouncing to reduce frequent updates
+  const handleScroll = React.useCallback(e => {
+    const scrollTopValue = e.currentTarget.scrollTop;
+    // Simple debounce: update only if scrollTop changes significantly or use a timer
+    setScrollTop(scrollTopValue);
+  }, []);
+  // Update row height callback with batching to reduce re-renders
   const updateRowHeight = React.useCallback((index, height) => {
     setRowHeights(prev => {
       const newHeights = [...prev];
@@ -78340,69 +78406,84 @@ const StepInnerTable = ({
       }
       return prev;
     });
-  }, []);
-  // Calculate visible rows
-  const fullData = appendNewRow(data, AddNlp ?? {});
+  }, []); // Note: Could be optimized further with useReducer for batching multiple updates
+  // Memoize fullData to avoid recalculating
+  const fullData = React.useMemo(() => appendNewRow(data, AddNlp ?? {}), [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;
+  // Memoize virtualization calculations to avoid expensive loops on every render
+  const {
+    startIndex,
+    paddingTop,
+    paddingBottom,
+    visibleRows
+  } = React.useMemo(() => {
+    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;
       }
-    }
-    // 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;
+      // 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;
         }
       }
-    }
-    // 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;
+      // 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;
     }
-    paddingTop = startIndex * estimatedRowHeight;
-    paddingBottom = (totalRows - endIndex - 1) * estimatedRowHeight;
-  }
-  const visibleRows = fullData.slice(startIndex, endIndex + 1);
-  // Infinite scroll observer
+    const visibleRows = fullData.slice(startIndex, endIndex + 1);
+    return {
+      startIndex,
+      endIndex,
+      paddingTop,
+      paddingBottom,
+      visibleRows
+    };
+  }, [fullData, totalRows, rowHeights, containerHeight, scrollTop, buffer, focusRowId, estimatedRowHeight]);
+  // Infinite scroll observer - optimized dependencies
   React.useEffect(() => {
     const scrollContainer = containerRef.current;
     const firstNode = document.getElementById('ff-table-first-node');
@@ -78427,9 +78508,9 @@ const StepInnerTable = ({
     return () => {
       observerRef.current?.disconnect();
     };
-  }, [data, loadMore]);
+  }, [data?.length, loadMore]); // Optimized: use data.length instead of data to avoid unnecessary re-runs
   const handleOnclick = (column, row, index) => {
-    let {
+    const {
       onClick,
       accessor
     } = column;
@@ -78526,7 +78607,7 @@ const StepInnerTable = ({
                   })
                 })]
               }, row.stepId || absoluteIndex);
-              const renderSortableRow = () => jsxRuntime.jsx(StepTableMainRow$1, {
+              const renderSortableRow = () => jsxRuntime.jsx(StepTableMainRow, {
                 rowId: row.stepId,
                 row: row,
                 indexNumber: absoluteIndex,
@@ -78572,7 +78653,7 @@ const StepInnerTable = ({
             height: `calc(${height} - 50px)`
           },
           children: noDataContent
-        }, height)]
+        })]
       })
     })
   });
@@ -78595,8 +78676,15 @@ const getStepsTableData = (tableData, sectionTitle = 'Steps') => {
   const section = tableData.find(item => item?.title === sectionTitle);
   return section?.data ?? [];
 };
+// Memoized block map to avoid recomputation
+let cachedBlockMap = null;
+let cachedTableData = null;
 const getBlockMap = tableData => {
-  let getStepData = getStepsTableData(tableData);
+  // Check if tableData has changed
+  if (cachedTableData === tableData && cachedBlockMap) {
+    return cachedBlockMap;
+  }
+  const getStepData = getStepsTableData(tableData);
   const blockMap = new Map();
   // Returns a key for grouping steps.
   const getBlockKey = step => step.specialNlpId ?? step.conditionSearchKey ?? null;
@@ -78642,6 +78730,9 @@ const getBlockMap = tableData => {
     }
     blockMap.set(key, blockEntry);
   });
+  // Cache the result
+  cachedBlockMap = blockMap;
+  cachedTableData = tableData;
   return blockMap;
 };
 const getParentConditionKey = key => key.includes('/') ? key.split('/').slice(0, -1).join('/') : key;
@@ -78733,8 +78824,8 @@ const updateCheckboxStatus = (tableData, row, isChecked, selectedRows, stepParti
         }
         if (parentData?.start?.conditionSearchKey) {
           const parentKey = getParentConditionKey(parentData?.start?.conditionSearchKey);
-          let conditionSearchKey = parentData?.start?.conditionSearchKey;
-          let conditionId = parentData?.start?.conditionId;
+          const conditionSearchKey = parentData?.start?.conditionSearchKey;
+          const conditionId = parentData?.start?.conditionId;
           if (conditionSearchKey === conditionId && visited) {
             visited = false;
             const grandParent = blockMap.get(parentKey);
@@ -78829,7 +78920,7 @@ const hasSelectedIds = rows => {
   return false;
 };
 const gettingBlockMap = (tableData, selectedRows, stepPartialSelect) => {
-  let dynamicUpdate = getBlockMap(tableData);
+  const dynamicUpdate = getBlockMap(tableData);
   const updatedSelectedRows = new Set(selectedRows.Steps);
   const updateStepPartialSelect = new Set(stepPartialSelect);
   dynamicUpdate?.forEach(blockEntry => {
@@ -79130,7 +79221,7 @@ const StepsTitle = ({
   });
 };
 
-const StepLandingTable = /*#__PURE__*/React.forwardRef(({
+const StepLandingTable = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(({
   tableMeta = [],
   tableData = [],
   noDataContent,
@@ -79160,7 +79251,7 @@ const StepLandingTable = /*#__PURE__*/React.forwardRef(({
   const [expandedRows, setExpandedRows] = React.useState({});
   const [expandStepGroup, setExpandStepGroup] = React.useState(new Map());
   const [isBulkEnable, setBulkEnable] = React.useState(false);
-  const onAccordionClick = (title, action) => {
+  const onAccordionClick = React.useCallback((title, action) => {
     const row = tableData.find(row => row.title === title);
     if (!row || !row.data || row.data.length === 0) {
       return;
@@ -79169,12 +79260,12 @@ const StepLandingTable = /*#__PURE__*/React.forwardRef(({
       ...prev,
       [title]: action === 'open' ? true : !prev[title]
     }));
-  };
+  }, [tableData]);
   const isExpanded = React.useMemo(() => title => expandedRows[title] ?? false, [expandedRows]);
-  const toggleViewRow = row => {
+  const toggleViewRow = React.useCallback(row => {
     setViewModeId(prev => prev === row?.stepId ? null : row?.stepId);
-  };
-  const handleClick = item => {
+  }, []);
+  const handleClick = React.useCallback(item => {
     toggleViewRow(item);
     const Component = handleViewComponent?.(item, toggleViewRow);
     if (Component) {
@@ -79182,7 +79273,7 @@ const StepLandingTable = /*#__PURE__*/React.forwardRef(({
     } else {
       toggleViewRow(null);
     }
-  };
+  }, [handleViewComponent, toggleViewRow]);
   const [selectedRows, setSelectedRows] = React.useState(Object.fromEntries(tableData.map(section => [section.title, new Set()])));
   const [stepPartialSelect, setStepPartialSelect] = React.useState(new Set());
   React.useEffect(() => {
@@ -79190,7 +79281,7 @@ const StepLandingTable = /*#__PURE__*/React.forwardRef(({
     setStepPartialSelect(prevPartialSelect => getUpdatedPartialSelect(tableData, prevPartialSelect));
     setExpandedRows(prev => getUpdatedExpandedRows(tableData, prev, defaultExpanded));
     if (selectedRows && !hasSelectedIds(selectedRows)) return;
-    let {
+    const {
       updateSelectRow,
       updateStepPartialSelect
     } = gettingBlockMap(tableData, selectedRows, stepPartialSelect);
@@ -79208,7 +79299,7 @@ const StepLandingTable = /*#__PURE__*/React.forwardRef(({
       onSelectClick?.(selectedRows);
     }
   }, [selectedRows]);
-  const handleMainCheckbox = (sectionTitle, checked) => {
+  const handleMainCheckbox = React.useCallback((sectionTitle, checked) => {
     const allRowIds = tableData.find(section => section.title === sectionTitle)?.data.map(row => row.stepId);
     if (allRowIds) {
       setSelectedRows(prev => ({
@@ -79217,31 +79308,31 @@ const StepLandingTable = /*#__PURE__*/React.forwardRef(({
       }));
       if (!checked) setStepPartialSelect(new Set());
     }
-  };
-  const handleUpdateCheckboxState = (tableData, rowData, isChecked, sectionTitle) => {
+  }, [tableData]);
+  const handleUpdateCheckboxState = React.useCallback((tableData, rowData, isChecked, sectionTitle) => {
     const {
       updateSelectRow,
       updateStepPartialSelect
     } = updateCheckboxStatus(tableData, rowData, isChecked, selectedRows, stepPartialSelect, sectionTitle);
     if (updateStepPartialSelect) setStepPartialSelect(updateStepPartialSelect);
     if (updateSelectRow) setSelectedRows(updateSelectRow);
-  };
-  const handleRowCheckbox = (sectionTitle, row, isChecked) => {
+  }, [selectedRows, stepPartialSelect]);
+  const handleRowCheckbox = React.useCallback((sectionTitle, row, isChecked) => {
     handleUpdateCheckboxState(tableData, row, isChecked, sectionTitle);
-  };
-  const isAllSelected = (sectionTitle, totalRows) => {
+  }, [tableData, handleUpdateCheckboxState]);
+  const isAllSelected = React.useCallback((sectionTitle, totalRows) => {
     const isSelected = totalRows > 0 && selectedRows[sectionTitle]?.size === totalRows;
     if (sectionTitle.includes('Script')) {
       setBulkEnable(isSelected);
     }
     return isSelected;
-  };
-  const isPartialSelected = (sectionTitle, totalRows) => {
+  }, [selectedRows]);
+  const isPartialSelected = React.useCallback((sectionTitle, totalRows) => {
     const selectedCount = selectedRows[sectionTitle]?.size || 0;
     return selectedCount > 0 && selectedCount < totalRows;
-  };
-  const isStepGroupExpanded = stepId => expandStepGroup.has(stepId);
-  const handleStepGroupExpand = rowData => {
+  }, [selectedRows]);
+  const isStepGroupExpanded = React.useCallback(stepId => expandStepGroup.has(stepId), [expandStepGroup]);
+  const handleStepGroupExpand = React.useCallback(rowData => {
     if (!isStepGroupExpanded(rowData?.stepId)) {
       if (viewModeId) toggleViewRow(null);
       handleAccordion?.(rowData);
@@ -79257,8 +79348,8 @@ const StepLandingTable = /*#__PURE__*/React.forwardRef(({
         return newMap;
       });
     }
-  };
-  const getAccordionTableContent = rows => {
+  }, [isStepGroupExpanded, viewModeId, toggleViewRow, handleAccordion, loading]);
+  const getAccordionTableContent = React.useCallback(rows => {
     if (rows.title === 'Steps' && !isViewPrivilegeMode) {
       return jsxRuntime.jsx(StepInnerTable, {
         onHighlightComplete: onHighlightComplete,
@@ -79311,11 +79402,11 @@ const StepLandingTable = /*#__PURE__*/React.forwardRef(({
         handleStepGroupExpand: handleStepGroupExpand,
         isStepGroupExpanded: isStepGroupExpanded,
         isViewPrivilegeMode: isViewPrivilegeMode,
-        height: height,
+        height: tableData.length === 1 ? height : '',
         isClientSide: isClientSide
       });
     }
-  };
+  }, [isViewPrivilegeMode, onHighlightComplete, highlightKey, isDraggable, tableMeta, onDragEnd, headerType, editMode, editComponent, noDataContent, NlpComponent, AddNlp, expandStepGroup, handleDragStart, handleRowCheckbox, selectedRows, viewModeId, ViewComponent, handleClick, handleStepGroupExpand, isStepGroupExpanded, stepPartialSelect, tableData.length, height, isClientSide]);
   React.useImperativeHandle(ref, () => ({
     resetSelection: () => {
       setSelectedRows(Object.fromEntries(tableData.map(section => [section.title, new Set()])));
@@ -79336,7 +79427,7 @@ const StepLandingTable = /*#__PURE__*/React.forwardRef(({
     resetStepGroupAccordion: () => {
       setExpandStepGroup(new Map());
     }
-  }));
+  }), [tableData, handleUpdateCheckboxState]);
   React.useEffect(() => {
     if (!checkEmpty(AddNlp)) {
       setViewComponent(() => null);
@@ -79347,6 +79438,7 @@ const StepLandingTable = /*#__PURE__*/React.forwardRef(({
     }
   }, [AddNlp]);
   return jsxRuntime.jsxs("div", {
+    // style={{ height, overflowY: 'auto' }}
     className: classNames('ff-accordion-table-container-steps', {
       'ff-accordion-fixed-header-table': withFixedHeader
     }),
@@ -79411,7 +79503,8 @@ const StepLandingTable = /*#__PURE__*/React.forwardRef(({
       })
     })]
   });
-});
+}));
+StepLandingTable.displayName = 'StepLandingTable';
 
 var immutable$1 = {exports: {}};