pixel-react 1.14.32 → 1.14.34

package/lib/index.cjs

@@ -1071,6 +1071,10 @@ const SvgOktaIcon = (props) => /* @__PURE__ */ React__namespace.createElement("s
 
 const SvgGenerateCommand = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M11.9999 9.3335H10.6666V6.66683H11.9999C13.4726 6.66683 14.6666 5.47283 14.6666 4.00016C14.6666 2.5275 13.4726 1.3335 11.9999 1.3335C10.5271 1.3335 9.33325 2.5275 9.33325 4.00016V5.3335H6.66658V4.00016C6.66658 2.5275 5.47259 1.3335 3.99992 1.3335C2.52725 1.3335 1.33325 2.5275 1.33325 4.00016C1.33325 5.47283 2.52725 6.66683 3.99992 6.66683H5.33325V9.3335H3.99992C2.52725 9.3335 1.33325 10.5275 1.33325 12.0002C1.33325 13.4728 2.52725 14.6668 3.99992 14.6668C5.47275 14.6668 6.66658 13.4728 6.66658 12.0002V10.6668H9.33325V11.9968L9.33309 12.0002C9.33309 13.4728 10.5271 14.6668 11.9998 14.6668C13.4724 14.6668 14.6664 13.4728 14.6664 12.0002C14.6664 10.5275 13.4726 9.33383 11.9999 9.3335ZM11.9999 2.66683C12.3535 2.66683 12.6927 2.80731 12.9427 3.05735C13.1928 3.3074 13.3333 3.64654 13.3333 4.00016C13.3333 4.35378 13.1928 4.69292 12.9427 4.94297C12.6927 5.19302 12.3535 5.3335 11.9999 5.3335H10.6666V4.00016C10.6666 3.64654 10.8071 3.3074 11.0571 3.05735C11.3072 2.80731 11.6463 2.66683 11.9999 2.66683ZM2.66659 4.00016C2.66659 3.64654 2.80706 3.3074 3.05711 3.05735C3.30716 2.80731 3.6463 2.66683 3.99992 2.66683C4.35354 2.66683 4.69268 2.80731 4.94273 3.05735C5.19278 3.3074 5.33325 3.64654 5.33325 4.00016V5.3335H3.99992C3.26359 5.3335 2.66659 4.73633 2.66659 4.00016ZM3.99992 13.3335C3.6463 13.3335 3.30716 13.193 3.05711 12.943C2.80706 12.6929 2.66659 12.3538 2.66659 12.0002C2.66659 11.6465 2.80706 11.3074 3.05711 11.0574C3.30716 10.8073 3.6463 10.6668 3.99992 10.6668H5.33325V12.0002C5.33325 12.3538 5.19278 12.6929 4.94273 12.943C4.69268 13.193 4.35354 13.3335 3.99992 13.3335ZM6.66658 9.3335V6.66683H9.33325V9.3335H6.66658ZM11.9999 13.3335C11.6463 13.3335 11.3072 13.193 11.0571 12.943C10.8071 12.6929 10.6666 12.3538 10.6666 12.0002V10.6668H11.9998C12.3534 10.6668 12.6925 10.8073 12.9426 11.0573C13.1926 11.3073 13.3331 11.6465 13.3332 12.0001C13.3332 12.3537 13.1927 12.6928 12.9427 12.9429C12.6927 13.193 12.3535 13.3335 11.9999 13.3335Z", fill: "#301349" }));
 
+const SvgCopyIconFilled = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 25 23", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_2166_3137)" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M0.303711 4.54669C0.303711 2.33755 2.09457 0.546692 4.30371 0.546692H20.0762C22.2853 0.546692 24.0762 2.33755 24.0762 4.54669V18.3067C24.0762 20.5158 22.2853 22.3067 20.0762 22.3067H4.30371C2.09458 22.3067 0.303711 20.5158 0.303711 18.3067V4.54669Z", fill: "#F7ECF8" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.7828 5.69026C10.43 6.04306 10.1876 6.67337 10.1876 7.86153V7.88218H11.6534C12.9943 7.88218 14.1343 8.14561 14.9195 8.93087C15.7048 9.71613 15.9682 10.8561 15.9682 12.197V13.6628H15.9889C17.177 13.6628 17.8073 13.4204 18.1601 13.0676C18.5129 12.7148 18.7553 12.0845 18.7553 10.8964V7.86153C18.7553 6.67337 18.5129 6.04306 18.1601 5.69026C17.8073 5.33745 17.177 5.09508 15.9889 5.09508H12.954C11.7659 5.09508 11.1356 5.33745 10.7828 5.69026ZM15.9682 15.2112H15.9889C17.3297 15.2112 18.4698 14.9478 19.255 14.1625C20.0403 13.3773 20.3037 12.2372 20.3037 10.8964V7.86153C20.3037 6.52066 20.0403 5.38064 19.255 4.59538C18.4698 3.81013 17.3297 3.54669 15.9889 3.54669H12.954C11.6132 3.54669 10.4731 3.81013 9.68789 4.59538C8.90263 5.38064 8.63919 6.52066 8.63919 7.86153V7.88218H8.61855C7.27768 7.88218 6.13766 8.14561 5.3524 8.93087C4.56714 9.71613 4.30371 10.8561 4.30371 12.197V15.2319C4.30371 16.5727 4.56714 17.7127 5.3524 18.498C6.13766 19.2833 7.27768 19.5467 8.61855 19.5467H11.6534C12.9943 19.5467 14.1343 19.2833 14.9195 18.498C15.7048 17.7127 15.9682 16.5727 15.9682 15.2319V15.2112ZM14.4198 12.197C14.4198 11.0089 14.1775 10.3785 13.8247 10.0257C13.4719 9.67294 12.8415 9.43056 11.6534 9.43056H8.61855C7.43039 9.43056 6.80008 9.67294 6.44728 10.0257C6.09447 10.3785 5.8521 11.0089 5.8521 12.197V15.2319C5.8521 16.42 6.09447 17.0503 6.44728 17.4031C6.80008 17.7559 7.43039 17.9983 8.61855 17.9983H11.6534C12.8415 17.9983 13.4719 17.7559 13.8247 17.4031C14.1775 17.0503 14.4198 16.42 14.4198 15.2319V12.197Z", fill: "#71347B" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_2166_3137" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M0.303711 4.54669C0.303711 2.33755 2.09457 0.546692 4.30371 0.546692H20.0762C22.2853 0.546692 24.0762 2.33755 24.0762 4.54669V18.3067C24.0762 20.5158 22.2853 22.3067 20.0762 22.3067H4.30371C2.09458 22.3067 0.303711 20.5158 0.303711 18.3067V4.54669Z", fill: "white" }))));
+
+const SvgGenerateCommandLogo = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M0 7C0 3.13401 3.13401 0 7 0H17C20.866 0 24 3.13401 24 7V17C24 20.866 20.866 24 17 24H7C3.13401 24 0 20.866 0 17V7Z", fill: "#F7EBFF" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.78395 5.78395C6.71109 4.8568 8.10069 4.5 9.9 4.5H14.1C15.8993 4.5 17.2889 4.8568 18.2161 5.78395C19.1432 6.71109 19.5 8.10069 19.5 9.9V14.1C19.5 15.8993 19.1432 17.2889 18.2161 18.2161C17.2889 19.1432 15.8993 19.5 14.1 19.5H9.9C8.10069 19.5 6.71109 19.1432 5.78395 18.2161C4.8568 17.2889 4.5 15.8993 4.5 14.1V9.9C4.5 8.10069 4.8568 6.71109 5.78395 5.78395ZM6.49105 6.49105C5.8432 7.13891 5.5 8.19931 5.5 9.9V14.1C5.5 15.8007 5.8432 16.8611 6.49105 17.5089C7.13891 18.1568 8.19931 18.5 9.9 18.5H14.1C15.8007 18.5 16.8611 18.1568 17.5089 17.5089C18.1568 16.8611 18.5 15.8007 18.5 14.1V9.9C18.5 8.19931 18.1568 7.13891 17.5089 6.49105C16.8611 5.8432 15.8007 5.5 14.1 5.5H9.9C8.19931 5.5 7.13891 5.8432 6.49105 6.49105Z", fill: "#71347B" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M11.6367 12.0586V14.2734C11.5534 14.3802 11.4219 14.4961 11.2422 14.6211C11.0651 14.7461 10.8333 14.8542 10.5469 14.9453C10.2604 15.0339 9.90885 15.0781 9.49219 15.0781C9.13021 15.0781 8.79948 15.0182 8.5 14.8984C8.20052 14.776 7.94271 14.5977 7.72656 14.3633C7.51042 14.1289 7.34375 13.8424 7.22656 13.5039C7.10938 13.1654 7.05078 12.7786 7.05078 12.3438V11.9688C7.05078 11.5339 7.10547 11.1471 7.21484 10.8086C7.32682 10.4701 7.48568 10.1836 7.69141 9.94922C7.89974 9.71484 8.14844 9.53646 8.4375 9.41406C8.72917 9.29167 9.05469 9.23047 9.41406 9.23047C9.89583 9.23047 10.2917 9.3099 10.6016 9.46875C10.9141 9.6276 11.1536 9.84635 11.3203 10.125C11.487 10.401 11.5911 10.7188 11.6328 11.0781H10.5859C10.5573 10.8802 10.5 10.707 10.4141 10.5586C10.3281 10.4076 10.2057 10.2904 10.0469 10.207C9.89062 10.1211 9.6875 10.0781 9.4375 10.0781C9.22656 10.0781 9.04036 10.1198 8.87891 10.2031C8.71745 10.2865 8.58203 10.4076 8.47266 10.5664C8.36328 10.7253 8.27995 10.9219 8.22266 11.1562C8.16797 11.3906 8.14062 11.6589 8.14062 11.9609V12.3438C8.14062 12.6484 8.17188 12.9193 8.23438 13.1562C8.29688 13.3906 8.38672 13.5885 8.50391 13.75C8.6237 13.9089 8.77083 14.0299 8.94531 14.1133C9.1224 14.194 9.32292 14.2344 9.54688 14.2344C9.75 14.2344 9.91797 14.2174 10.0508 14.1836C10.1862 14.1471 10.2943 14.1042 10.375 14.0547C10.4557 14.0052 10.5182 13.957 10.5625 13.9102V12.8438H9.43359V12.0586H11.6367ZM15.9805 13.1289H17.0547C17.026 13.5091 16.9206 13.8464 16.7383 14.1406C16.556 14.4323 16.3021 14.6615 15.9766 14.8281C15.651 14.9948 15.2565 15.0781 14.793 15.0781C14.4362 15.0781 14.1146 15.0156 13.8281 14.8906C13.5443 14.763 13.3008 14.582 13.0977 14.3477C12.8971 14.1107 12.7435 13.8268 12.6367 13.4961C12.5299 13.1628 12.4766 12.7891 12.4766 12.375V11.9414C12.4766 11.5273 12.5312 11.1536 12.6406 10.8203C12.75 10.487 12.9062 10.2031 13.1094 9.96875C13.3151 9.73177 13.5612 9.54948 13.8477 9.42188C14.1367 9.29427 14.4596 9.23047 14.8164 9.23047C15.2799 9.23047 15.6719 9.31641 15.9922 9.48828C16.3125 9.65755 16.5612 9.89062 16.7383 10.1875C16.9154 10.4844 17.0221 10.8255 17.0586 11.2109H15.9844C15.9635 10.9714 15.9115 10.7682 15.8281 10.6016C15.7474 10.4349 15.625 10.3086 15.4609 10.2227C15.2995 10.1341 15.0846 10.0898 14.8164 10.0898C14.6081 10.0898 14.4245 10.1289 14.2656 10.207C14.1094 10.2852 13.9792 10.4023 13.875 10.5586C13.7708 10.7122 13.6927 10.9049 13.6406 11.1367C13.5885 11.3659 13.5625 11.6315 13.5625 11.9336V12.375C13.5625 12.6641 13.5859 12.9232 13.6328 13.1523C13.6797 13.3815 13.7526 13.5755 13.8516 13.7344C13.9505 13.8932 14.0781 14.0143 14.2344 14.0977C14.3906 14.181 14.5768 14.2227 14.793 14.2227C15.056 14.2227 15.2695 14.181 15.4336 14.0977C15.6003 14.0143 15.7266 13.8919 15.8125 13.7305C15.901 13.569 15.957 13.3685 15.9805 13.1289Z", fill: "#71347B" }));
+
 let Components = {};
 Components['success'] = SvgSuccess;
 Components['setting_icon'] = SvgSettingIcon;
@@ -1540,6 +1544,8 @@ Components['UI_Inspector'] = SvgUiInspector; // Newly Added icon
 Components['azure_icon'] = SvgAzureIcon; // Newly Added icon
 Components['okta_icon'] = SvgOktaIcon; // Newly Added icon
 Components['generate_command_icon'] = SvgGenerateCommand; // Newly Added icon
+Components['copy_icon_filled'] = SvgCopyIconFilled; // Newly Added icon
+Components['generate_command_logo'] = SvgGenerateCommandLogo; // Newly Added icon
 
 const Icon = /*#__PURE__*/React.forwardRef(({
   name,
@@ -79109,107 +79115,84 @@ const StepGroupAccordions = /*#__PURE__*/React.memo(({
   handleStepGroupExpand,
   isStepGroupExpanded,
   isViewPrivilegeMode,
-  columns = [],
-  parentIndex,
-  updateRowHeight
+  columns = []
 }) => {
-  const rowRefs = React.useRef([]);
   const typeSet = new Set(['Group', 'PRE', 'POST', 'Script']);
   const getPadding = type => typeSet.has(type) ? '6px 8px' : '7px 8px';
   const indent = level + 8;
-  // Measure and report height when expanded
-  React.useEffect(() => {
-    if (!updateRowHeight) return;
-    let totalHeight = 0;
-    rowRefs.current.forEach(ref => {
-      if (ref) {
-        totalHeight += ref.getBoundingClientRect().height;
-      }
-    });
-    if (totalHeight > 0) {
-      updateRowHeight(parentIndex ?? 0, totalHeight);
-    }
-  }, [data, updateRowHeight, parentIndex, isStepGroupExpanded]);
   return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: data?.map((item, itemIndex) => {
-      const absoluteIndex = parentIndex ?? 0 + itemIndex + 1;
-      return jsxRuntime.jsxs(React.Fragment, {
-        children: [viewModeId === item?.stepId ? jsxRuntime.jsx("tr", {
-          ref: el => rowRefs.current[itemIndex] = el,
-          className: "steps-edit-row",
-          id: "getInFocus",
-          children: jsxRuntime.jsx("td", {
-            colSpan: columnCount,
-            children: jsxRuntime.jsx("div", {
-              style: {
-                marginLeft: `${indent}px`
-              },
-              children: ViewComponent && jsxRuntime.jsx(ViewComponent, {})
-            })
-          })
-        }) : jsxRuntime.jsx("tr", {
-          ref: el => rowRefs.current[itemIndex] = el,
-          children: columns.map((col, idx) => jsxRuntime.jsx("td", {
+    children: data?.map(item => jsxRuntime.jsxs(React.Fragment, {
+      children: [viewModeId === item?.stepId ? jsxRuntime.jsx("tr", {
+        className: "steps-edit-row",
+        id: "getInFocus",
+        children: jsxRuntime.jsx("td", {
+          colSpan: columnCount,
+          children: jsxRuntime.jsx("div", {
             style: {
-              maxWidth: col.width,
-              padding: getPadding(item.type)
+              marginLeft: `${indent}px`
             },
-            children: jsxRuntime.jsxs(Typography, {
-              as: "div",
-              className: "ff-data-checkbox-container",
-              children: [jsxRuntime.jsxs("div", {
-                className: "ff-data-checkbox-container-content",
+            children: ViewComponent && jsxRuntime.jsx(ViewComponent, {})
+          })
+        })
+      }) : jsxRuntime.jsx("tr", {
+        children: columns.map((col, idx) => jsxRuntime.jsx("td", {
+          style: {
+            maxWidth: col.width,
+            padding: getPadding(item.type)
+          },
+          children: jsxRuntime.jsxs(Typography, {
+            as: "div",
+            className: "ff-data-checkbox-container",
+            children: [jsxRuntime.jsxs("div", {
+              className: "ff-data-checkbox-container-content",
+              style: {
+                marginLeft: idx === 0 ? `${indent}px` : 0
+              },
+              onClick: () => {
+                const isClickable = idx === 0 && !item?.displayName?.includes('End') && !item?.isDisabled;
+                if (isClickable) handleClick?.({
+                  ...item,
+                  tableType
+                });
+              },
+              children: [!isViewPrivilegeMode && idx === 0 && jsxRuntime.jsx("div", {
                 style: {
-                  marginLeft: idx === 0 ? `${indent}px` : 0
-                },
-                onClick: () => {
-                  const isClickable = idx === 0 && !item?.displayName?.includes('End') && !item?.isDisabled;
-                  if (isClickable) handleClick?.({
-                    ...item,
-                    tableType
-                  });
-                },
-                children: [!isViewPrivilegeMode && idx === 0 && jsxRuntime.jsx("div", {
-                  style: {
-                    padding: '4px 18px'
-                  }
-                }), prepareData({
+                  padding: '4px 18px'
+                }
+              }), prepareData({
+                ...item,
+                marginLeft: indent
+              }, col)]
+            }), idx === 0 && ['Group', 'PRE', 'POST', 'Script'].includes(item.type) && jsxRuntime.jsx("div", {
+              className: `ff-accordion-arrow ${isStepGroupExpanded?.(item.stepId) ? 'expanded' : ''}`,
+              children: jsxRuntime.jsx(Icon, {
+                name: "arrow_right",
+                color: isStepGroupExpanded?.(item.stepId) ? 'var(--brand-color)' : 'var(--default-color)',
+                className: "steps-arrow-svg",
+                width: 12,
+                height: 12,
+                onClick: () => handleStepGroupExpand?.({
                   ...item,
-                  marginLeft: indent
-                }, col)]
-              }), idx === 0 && ['Group', 'PRE', 'POST', 'Script'].includes(item.type) && jsxRuntime.jsx("div", {
-                className: `ff-accordion-arrow ${isStepGroupExpanded?.(item.stepId) ? 'expanded' : ''}`,
-                children: jsxRuntime.jsx(Icon, {
-                  name: "arrow_right",
-                  color: isStepGroupExpanded?.(item.stepId) ? 'var(--brand-color)' : 'var(--default-color)',
-                  className: "steps-arrow-svg",
-                  width: 12,
-                  height: 12,
-                  onClick: () => handleStepGroupExpand?.({
-                    ...item,
-                    tableType
-                  })
+                  tableType
                 })
-              })]
-            })
-          }, `${item.stepId}-${idx}`))
-        }), isStepGroupExpanded?.(item.stepId) && jsxRuntime.jsx(StepGroupAccordions, {
-          data: item.data,
-          level: indent,
-          columnCount: columnCount,
-          viewModeId: viewModeId,
-          ViewComponent: ViewComponent,
-          handleClick: handleClick,
-          tableType: tableType,
-          handleStepGroupExpand: handleStepGroupExpand,
-          isStepGroupExpanded: isStepGroupExpanded,
-          isViewPrivilegeMode: isViewPrivilegeMode,
-          columns: columns,
-          parentIndex: absoluteIndex,
-          updateRowHeight: updateRowHeight
-        })]
-      }, item.stepId);
-    })
+              })
+            })]
+          })
+        }, `${item.stepId}-${idx}`))
+      }), isStepGroupExpanded?.(item.stepId) && jsxRuntime.jsx(StepGroupAccordions, {
+        data: item.data,
+        level: indent,
+        columnCount: columnCount,
+        viewModeId: viewModeId,
+        ViewComponent: ViewComponent,
+        handleClick: handleClick,
+        tableType: tableType,
+        handleStepGroupExpand: handleStepGroupExpand,
+        isStepGroupExpanded: isStepGroupExpanded,
+        isViewPrivilegeMode: isViewPrivilegeMode,
+        columns: columns
+      })]
+    }, item.stepId))
   });
 });
 StepGroupAccordions.displayName = 'StepGroupAccordions';
@@ -79234,10 +79217,8 @@ const StepTableMainRow = ({
   dataLength,
   stepPartialSelect,
   isViewPrivilegeMode,
-  isClientSide,
-  updateRowHeight
+  isClientSide
 }) => {
-  const rowRef = React.useRef(null);
   const isDisabled = React.useMemo(() => row?.isDisabled || (dataLength ?? 0) <= 1 || row.isSpecialNlp, [row, dataLength]);
   let serialNumber = (indexNumber + 1).toString();
   const {
@@ -79255,13 +79236,6 @@ const StepTableMainRow = ({
     transition
   }), [transform, transition]);
   const key = row?._id || row?.stepId;
-  // Measure row height and report to parent
-  React.useEffect(() => {
-    if (rowRef.current && updateRowHeight) {
-      const height = rowRef.current.getBoundingClientRect().height;
-      updateRowHeight(indexNumber, height);
-    }
-  }, [row, updateRowHeight, indexNumber, isStepGroupExpanded?.(row?.stepId)]);
   const getPadding = index => {
     if (isViewPrivilegeMode || isClientSide) {
       if (['Group', 'PRE', 'POST', 'Script'].includes(row.type) && index === 0) {
@@ -79312,10 +79286,7 @@ const StepTableMainRow = ({
   });
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx("tr", {
-      ref: el => {
-        rowRef.current = el;
-        setNodeRef(el);
-      },
+      ref: setNodeRef,
       style: style,
       className: classNames(tableBodyRowClass, {
         'disabled-inner-row': isDisabled
@@ -79359,9 +79330,7 @@ const StepTableMainRow = ({
       isStepGroupExpanded: isStepGroupExpanded,
       level: row?.marginLeft,
       isViewPrivilegeMode: isViewPrivilegeMode,
-      columns: columns,
-      parentIndex: indexNumber,
-      updateRowHeight: updateRowHeight
+      columns: columns
     })]
   });
 };
@@ -79401,132 +79370,11 @@ const StepInnerTable = ({
   isClientSide
 }) => {
   const observerRef = React.useRef(null);
-  const containerRef = React.useRef(null);
-  const [scrollTop, setScrollTop] = React.useState(0);
-  const [containerHeight, setContainerHeight] = React.useState(0);
-  const [rowHeights, setRowHeights] = React.useState([]);
-  const [focusRowId, setFocusRowId] = React.useState(null);
-  const buffer = 5;
-  const estimatedRowHeight = 50;
-  // Reset row heights when data changes
-  React.useEffect(() => {
-    if (containerRef.current) {
-      setContainerHeight(containerRef.current.clientHeight);
-    }
-    const fullData = appendNewRow(data, AddNlp ?? {});
-    setRowHeights(new Array(fullData.length).fill(estimatedRowHeight));
-  }, [data, AddNlp]);
-  // Track focus row for edit/new rows
-  React.useEffect(() => {
-    if (editMode) {
-      setFocusRowId(editMode);
-    } else if (AddNlp && Object.keys(AddNlp).length > 0) {
-      const newRow = appendNewRow(data, AddNlp).find(row => row.isNew);
-      if (newRow) {
-        setFocusRowId(newRow.stepId || 'new-row');
-      }
-    } else {
-      setFocusRowId(null);
-    }
-  }, [editMode, AddNlp, data]);
-  // Improved scroll-to-focus with rendering delay
   React.useEffect(() => {
-    if (focusRowId && containerRef.current) {
-      const timer = setTimeout(() => {
-        const focusElement = containerRef.current?.querySelector('#getInFocus');
-        if (focusElement) {
-          focusElement.scrollIntoView({
-            behavior: 'smooth',
-            block: 'nearest'
-          });
-        }
-      }, 100);
-      return () => clearTimeout(timer);
-    }
-    // Explicitly return undefined when condition isn't met
-    return () => {};
-  }, [focusRowId, rowHeights]);
-  // Handle scroll
-  const handleScroll = e => {
-    setScrollTop(e.currentTarget.scrollTop);
-  };
-  // Update row height callback
-  const updateRowHeight = React.useCallback((index, height) => {
-    setRowHeights(prev => {
-      const newHeights = [...prev];
-      if (index < newHeights.length && newHeights[index] !== height) {
-        newHeights[index] = height;
-        return newHeights;
-      }
-      return prev;
-    });
-  }, []);
-  // Calculate visible rows
-  const fullData = appendNewRow(data, AddNlp ?? {});
-  const totalRows = fullData.length;
-  let startIndex = 0;
-  let endIndex = totalRows - 1;
-  let paddingTop = 0;
-  let paddingBottom = 0;
-  if (rowHeights.length === totalRows && containerHeight > 0) {
-    let cumulativeHeight = 0;
-    // Find start index
-    for (let i = 0; i < totalRows; i++) {
-      if (cumulativeHeight <= scrollTop) {
-        startIndex = i;
-      }
-      cumulativeHeight += rowHeights[i] ?? 0;
-    }
-    // Find end index
-    cumulativeHeight = 0;
-    for (let i = 0; i < totalRows; i++) {
-      cumulativeHeight += rowHeights[i] ?? 0;
-      if (cumulativeHeight >= scrollTop + containerHeight && endIndex === totalRows - 1) {
-        endIndex = i;
-        break;
-      }
-    }
-    // Apply buffer
-    startIndex = Math.max(0, startIndex - buffer);
-    endIndex = Math.min(totalRows - 1, endIndex + buffer);
-    // Expand range to include focus row if needed
-    if (focusRowId) {
-      const focusIndex = fullData.findIndex(row => row.stepId === focusRowId || row.isNew && focusRowId === 'new-row');
-      if (focusIndex >= 0) {
-        if (focusIndex < startIndex) {
-          startIndex = focusIndex;
-        } else if (focusIndex > endIndex) {
-          endIndex = focusIndex;
-        }
-      }
-    }
-    // Calculate padding
-    paddingTop = rowHeights.slice(0, startIndex).reduce((sum, height) => sum + height, 0);
-    paddingBottom = rowHeights.slice(endIndex + 1).reduce((sum, height) => sum + height, 0);
-  } else {
-    // Fallback to estimated virtualization
-    startIndex = Math.max(0, Math.floor(scrollTop / estimatedRowHeight) - buffer);
-    endIndex = Math.min(totalRows - 1, startIndex + Math.ceil(containerHeight / estimatedRowHeight) + buffer);
-    // Expand range to include focus row if needed
-    if (focusRowId) {
-      const focusIndex = fullData.findIndex(row => row.stepId === focusRowId || row.isNew && focusRowId === 'new-row');
-      if (focusIndex >= 0) {
-        if (focusIndex < startIndex) {
-          startIndex = focusIndex;
-        } else if (focusIndex > endIndex) {
-          endIndex = focusIndex;
-        }
-      }
-    }
-    paddingTop = startIndex * estimatedRowHeight;
-    paddingBottom = (totalRows - endIndex - 1) * estimatedRowHeight;
-  }
-  const visibleRows = fullData.slice(startIndex, endIndex + 1);
-  // Infinite scroll observer
-  React.useEffect(() => {
-    const scrollContainer = containerRef.current;
+    const scrollContainer = document.getElementById('ff-table-scroll-container');
     const firstNode = document.getElementById('ff-table-first-node');
     const lastNode = document.getElementById('ff-table-last-node');
+    // Exit early if data is empty or elements are missing
     if (!scrollContainer || !firstNode || !lastNode || !data?.length) {
       return;
     }
@@ -79545,6 +79393,7 @@ const StepInnerTable = ({
     observerRef.current.observe(firstNode);
     observerRef.current.observe(lastNode);
     return () => {
+      // Cleanup observer
       observerRef.current?.disconnect();
     };
   }, [data, loadMore]);
@@ -79582,18 +79431,15 @@ const StepInnerTable = ({
       items: data?.map(row => row._id || row.stepId),
       strategy: verticalListSortingStrategy,
       children: jsxRuntime.jsxs("div", {
-        ref: containerRef,
         style: {
           height: height,
-          position: 'relative',
-          overflow: 'auto'
+          position: 'relative'
         },
         id: "ff-table-scroll-container",
         className: classNames(className, {
           'ff-fixed-header-steps-table': withFixedHeader,
           'steps-border-borderRadius': borderWithRadius
         }),
-        onScroll: handleScroll,
         children: [jsxRuntime.jsxs("table", {
           className: classNames(`ff-table-steps`),
           cellSpacing: 0,
@@ -79610,43 +79456,30 @@ const StepInnerTable = ({
           }), jsxRuntime.jsxs("tbody", {
             className: "ff-steps-tbody",
             children: [jsxRuntime.jsx("tr", {
-              id: "ff-table-first-node",
-              style: {
-                display: 'none'
-              }
-            }), paddingTop > 0 && jsxRuntime.jsx("tr", {
-              children: jsxRuntime.jsx("td", {
-                style: {
-                  height: paddingTop,
-                  padding: 0
-                },
-                colSpan: columns.length
-              })
-            }), visibleRows.map((row, index) => {
-              const absoluteIndex = startIndex + index;
+              id: "ff-table-first-node"
+            }), appendNewRow(data, AddNlp ?? {})?.map((row, index) => {
               const isEdit = editMode === row.stepId;
               const isEditOrNew = isEdit || row.isNew;
-              const isFocusRow = isEdit && row.stepId === focusRowId || row.isNew && focusRowId === 'new-row';
               const renderEditableRow = () => jsxRuntime.jsxs("tr", {
                 className: "steps-edit-row",
-                id: isFocusRow ? 'getInFocus' : undefined,
+                id: "getInFocus",
                 children: [isEdit && /*#__PURE__*/React.isValidElement(editComponent) && jsxRuntime.jsx("td", {
                   colSpan: columns.length,
                   children: /*#__PURE__*/React.cloneElement(editComponent, {
                     rowData: row,
-                    rowIndex: absoluteIndex + 1
+                    rowIndex: index + 1
                   })
                 }), row.isNew && !isEdit && /*#__PURE__*/React.isValidElement(NlpComponent) && jsxRuntime.jsx("td", {
                   colSpan: columns.length,
                   children: /*#__PURE__*/React.cloneElement(NlpComponent, {
-                    rowIndex: absoluteIndex,
+                    rowIndex: index,
                     rowData: row
                   })
                 })]
-              }, row.stepId || absoluteIndex);
+              }, row.stepId || index);
               const renderSortableRow = () => jsxRuntime.jsx(StepTableMainRow$1, {
                 row: row,
-                indexNumber: absoluteIndex,
+                indexNumber: index,
                 columns: columns,
                 tableBodyRowClass: tableBodyRowClass,
                 handleOnclick: handleOnclick,
@@ -79664,23 +79497,11 @@ const StepInnerTable = ({
                 dataLength: data?.length,
                 stepPartialSelect: stepPartialSelect,
                 isViewPrivilegeMode: isViewPrivilegeMode,
-                isClientSide: isClientSide,
-                updateRowHeight: updateRowHeight
+                isClientSide: isClientSide
               });
               return isEditOrNew ? renderEditableRow() : renderSortableRow();
-            }), paddingBottom > 0 && jsxRuntime.jsx("tr", {
-              children: jsxRuntime.jsx("td", {
-                style: {
-                  height: paddingBottom,
-                  padding: 0
-                },
-                colSpan: columns.length
-              })
             }), jsxRuntime.jsx("tr", {
-              id: "ff-table-last-node",
-              style: {
-                display: 'none'
-              }
+              id: "ff-table-last-node"
             })]
           })]
         }), data?.length <= 0 && jsxRuntime.jsx("div", {
@@ -80040,51 +79861,92 @@ const getStatus = status => {
 };
 
 const StepResultStats = ({
-  metaData
+  metaData,
+  width = 0
 }) => {
-  const statusDetails = metaData;
-  const groupStatus = [{
+  const total = metaData?.total || 0;
+  const statusList = [{
     name: 'Passed',
-    count: statusDetails?.totalPassed,
+    count: metaData?.totalPassed,
     color: 'var(--status-approved-text-color)'
   }, {
     name: 'Failed',
-    count: statusDetails?.totalFailed,
+    count: metaData?.totalFailed,
     color: 'var(--status-rejected-text-color)'
   }, {
     name: 'Warning',
-    count: statusDetails?.totalWarning,
+    count: metaData?.totalWarning,
     color: 'var(--status-warning-text-color)'
   }, {
     name: 'Skipped',
-    count: statusDetails?.totalSkipped,
+    count: metaData?.totalSkipped,
     color: 'var(--status-skipped-text-color)'
   }, {
     name: 'Terminated',
-    count: statusDetails?.totalTerminated,
+    count: metaData?.totalTerminated,
     color: 'var(--status-skipped-text-color)'
   }, {
     name: 'Aborted',
-    count: statusDetails?.totalAborted,
+    count: metaData?.totalAborted,
     color: 'var(--status-skipped-text-color)'
   }];
-  const getLabel = (metaData, count) => {
-    if (['_startforloop', 'Iteration'].includes(metaData?.type)) {
-      return count > 1 ? 'Iterations' : 'Iteration';
-    }
-    if (metaData?.type === '_iteration') {
-      return count > 1 ? 'Steps' : 'Step';
+  // Filter only statuses with a count > 0
+  const visibleStatuses = statusList.filter(item => item.count > 0);
+  // Full raw text (used in tooltip)
+  const fullText = visibleStatuses.map(({
+    count,
+    name
+  }) => `${count}/${total} ${name}`).join(' ');
+  // Truncate entire line text based on provided width
+  const truncatedText = width ? truncateText(fullText, width, 'pixel') : fullText;
+  // Break truncated text into colored segments
+  const coloredSegments = [];
+  let cursor = 0;
+  for (const {
+    count,
+    name,
+    color
+  } of visibleStatuses) {
+    const segmentText = `${count}/${total} ${name}`;
+    if (cursor + segmentText.length <= truncatedText.length) {
+      coloredSegments.push({
+        text: segmentText,
+        color
+      });
+      cursor += segmentText.length + 1;
+    } else {
+      const remainingText = truncatedText.slice(cursor).trim();
+      if (remainingText) {
+        coloredSegments.push({
+          text: remainingText,
+          color
+        });
+      }
+      break;
     }
-    return '';
-  };
+  }
   return jsxRuntime.jsx("div", {
-    className: "step-result-stats",
-    children: groupStatus.map(obj => obj?.count && obj?.count > 0 ? jsxRuntime.jsx(Typography, {
-      color: obj?.color,
-      fontWeight: "semi-bold",
-      as: "div",
-      children: `${obj?.count}/${statusDetails?.total} ${getLabel(metaData, obj?.count)}  ${obj?.name}`
-    }, obj?.name) : jsxRuntime.jsx(jsxRuntime.Fragment, {}))
+    className: "ff-stepResultStats",
+    children: jsxRuntime.jsx(Tooltip, {
+      title: fullText,
+      children: jsxRuntime.jsx(Typography, {
+        as: "div",
+        className: "status-inline-text",
+        fontWeight: "semi-bold",
+        children: coloredSegments.map(({
+          text,
+          color
+        }, index) => jsxRuntime.jsx(Typography, {
+          as: "span",
+          fontWeight: "semi-bold",
+          style: {
+            color,
+            whiteSpace: 'nowrap'
+          },
+          children: text + ' '
+        }, index))
+      })
+    })
   });
 };
 
@@ -80406,6 +80268,7 @@ const StepLandingTable = /*#__PURE__*/React.forwardRef(({
     }
   }));
   React.useEffect(() => {
+    scrollToView('getInFocus');
     if (!checkEmpty(AddNlp)) {
       setViewComponent(() => null);
       setViewModeId(null);