pixel-react 1.10.5 → 1.10.7

package/lib/index.esm.js

@@ -2809,7 +2809,7 @@ const dropdownDefaultCSSData = {
   dropDownWrapperPadding: 0
 };
 
-var css_248z$12 = ".ff-select-dropdown-wrapper {\n  max-height: 160px;\n  z-index: 999999;\n  position: absolute;\n  min-width: 50px;\n  border-radius: 4px;\n  border: 1px solid var(--ff-select-option-border-color);\n  margin-top: 4px;\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  background-color: var(--ff-select-background-color);\n  overflow: hidden auto;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar {\n  width: 4px;\n  height: 12px;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar-thumb {\n  background-color: var(--ff-select-scroll-thumb-color);\n  border-radius: 4px;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar-track {\n  background: var(--ff-select-scroll-track-bg);\n  border-radius: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option {\n  box-sizing: border-box;\n  cursor: pointer;\n  padding: 0px 8px;\n  border-radius: 4px;\n  min-height: 32px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option .ff-select-dropdown-icon-container {\n  display: flex;\n  align-items: center;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option .ff-select-dropdown-icon-container__icon {\n  margin-right: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option__selected, .ff-select-dropdown-wrapper .ff-select-dropdown-option:hover {\n  background-color: var(--ff-select-option-hover-color);\n}\n.ff-select-dropdown-wrapper .ff-select-no-option {\n  box-sizing: border-box;\n  padding: 0px 8px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: not-allowed;\n}";
+var css_248z$12 = ".ff-select-dropdown-wrapper,\n.ff-select-dropdown-mini-modal-wrapper {\n  max-height: 160px;\n  z-index: 999999;\n  position: absolute;\n  min-width: 50px;\n  border-radius: 4px;\n  border: 1px solid var(--ff-select-option-border-color);\n  margin-top: 4px;\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  background-color: var(--ff-select-background-color);\n  overflow: hidden auto;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar,\n.ff-select-dropdown-mini-modal-wrapper::-webkit-scrollbar {\n  width: 4px;\n  height: 12px;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar-thumb,\n.ff-select-dropdown-mini-modal-wrapper::-webkit-scrollbar-thumb {\n  background-color: var(--ff-select-scroll-thumb-color);\n  border-radius: 4px;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar-track,\n.ff-select-dropdown-mini-modal-wrapper::-webkit-scrollbar-track {\n  background: var(--ff-select-scroll-track-bg);\n  border-radius: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option,\n.ff-select-dropdown-mini-modal-wrapper .ff-select-dropdown-option {\n  box-sizing: border-box;\n  cursor: pointer;\n  padding: 0px 8px;\n  border-radius: 4px;\n  min-height: 32px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option .ff-select-dropdown-icon-container,\n.ff-select-dropdown-mini-modal-wrapper .ff-select-dropdown-option .ff-select-dropdown-icon-container {\n  display: flex;\n  align-items: center;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option .ff-select-dropdown-icon-container__icon,\n.ff-select-dropdown-mini-modal-wrapper .ff-select-dropdown-option .ff-select-dropdown-icon-container__icon {\n  margin-right: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option__selected, .ff-select-dropdown-wrapper .ff-select-dropdown-option:hover,\n.ff-select-dropdown-mini-modal-wrapper .ff-select-dropdown-option__selected,\n.ff-select-dropdown-mini-modal-wrapper .ff-select-dropdown-option:hover {\n  background-color: var(--ff-select-option-hover-color);\n}\n.ff-select-dropdown-wrapper .ff-select-no-option,\n.ff-select-dropdown-mini-modal-wrapper .ff-select-no-option {\n  box-sizing: border-box;\n  padding: 0px 8px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: not-allowed;\n}\n\n.ff-select-dropdown-modal-wrapper {\n  max-height: 256px;\n}\n\n.ff-select-dropdown-mini-modal-wrapper {\n  display: flex;\n  justify-content: space-between;\n}\n.ff-select-dropdown-mini-modal-wrapper .ff-select-label-minimodal-wrapper {\n  width: calc(50% - 4px);\n}\n.ff-select-dropdown-mini-modal-wrapper .ff-select-mini-modal-wrapper {\n  width: 50%;\n  padding: 8px 2px 0px 4px;\n  display: flex;\n  align-items: flex-end;\n  margin-left: 4px;\n  border-left: 1px dashed var(--border-color);\n}\n.ff-select-dropdown-mini-modal-wrapper .ff-select-mini-modal-wrapper .ff-select-modal-wrapper {\n  height: fit-content;\n  width: calc(100% - 4px);\n  border-radius: 8px;\n  border: 1px solid var(--ff-select-background-color);\n  box-shadow: 0px 1px 8px 0px var(--ff-select-option-wrapper-box-shadow);\n  border: 1px solid var(--border-color);\n}\n.ff-select-dropdown-mini-modal-wrapper .ff-select-mini-modal-wrapper .ff-select-modal-wrapper .ff-select-mini-modal-footer {\n  min-height: 32px;\n  border-top: 1px solid var(--border-color);\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n}";
 styleInject(css_248z$12);
 
 const ffid = () => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, char => ((char === 'x' ? Math.random() * 16 : Math.random() * 16 & 0x3 | 0x8) | 0).toString(16));
@@ -2841,12 +2841,18 @@ const Dropdown$1 = ({
   selectedOption,
   valueAccessor,
   showIcon = false,
-  showToolTip = false
+  showToolTip = false,
+  customReccurenece = true,
+  onCancelModal = () => {},
+  onSaveModal = () => {},
+  recurrence = false,
+  modalJSXProps = jsx(Fragment, {})
 }) => {
   const themeContext = useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
+  const customRecurrenceOnBlur = customReccurenece ? () => {} : onSelectBlur;
   const optionsWrapperRef = useRef(null);
-  useClickOutside(optionsWrapperRef, onSelectBlur, [inputRef, selectArrowRef]);
+  useClickOutside(optionsWrapperRef, customRecurrenceOnBlur, [inputRef, selectArrowRef]);
   const {
     positionX,
     positionY,
@@ -2907,11 +2913,25 @@ const Dropdown$1 = ({
       })
     });
   };
-  return jsx("div", {
-    className: classNames('ff-select-dropdown-wrapper', currentTheme),
+  const onHandleCancelModal = () => {
+    onSelectBlur();
+    onCancelModal();
+  };
+  const onHandleSaveModal = () => {
+    onSelectBlur();
+    onSaveModal();
+  };
+  return jsxs("div", {
+    className: classNames('ff-select-dropdown-wrapper', currentTheme, {
+      'ff-select-dropdown-modal-wrapper': recurrence,
+      'ff-select-dropdown-mini-modal-wrapper': customReccurenece
+    }),
     ref: optionsWrapperRef,
     style: updateDropdownPosition(),
-    children: jsx("div", {
+    children: [jsx("div", {
+      className: classNames({
+        'ff-select-label-minimodal-wrapper': customReccurenece
+      }),
       children: !checkEmpty(options) ? options.map(option => jsx("div", {
         className: classNames('ff-select-dropdown-option', {
           'ff-select-dropdown-option__selected': getLabel(option, valueAccessor) === selectedOption
@@ -2929,7 +2949,27 @@ const Dropdown$1 = ({
         className: classNames('ff-select-no-option', currentTheme),
         children: "No Results found"
       })
-    })
+    }), customReccurenece && jsx("div", {
+      className: "ff-select-mini-modal-wrapper",
+      id: "ff-select-mini-id",
+      children: jsxs("div", {
+        className: "ff-select-modal-wrapper",
+        children: [jsx(Fragment, {
+          children: modalJSXProps
+        }), jsxs("div", {
+          className: "ff-select-mini-modal-footer",
+          children: [jsx(Button$1, {
+            label: "Cancel",
+            variant: "tertiary",
+            onClick: onHandleCancelModal
+          }), jsx(Button$1, {
+            label: "Save",
+            variant: "secondary",
+            onClick: onHandleSaveModal
+          })]
+        })]
+      })
+    })]
   });
 };
 
@@ -2939,7 +2979,7 @@ const portalPosition = {
   width: 0,
   fromBottom: 0
 };
-const calculatePosition = portalRef => {
+const calculatePosition$1 = portalRef => {
   if (!portalRef?.current) {
     return portalPosition;
   }
@@ -2955,7 +2995,7 @@ const calculatePosition = portalRef => {
 const usePortalPosition = (portalRef, isPortalOpen) => {
   useEffect(() => {
     const handleUpdate = () => {
-      calculatePosition(portalRef);
+      calculatePosition$1(portalRef);
     };
     if (isPortalOpen) {
       window.addEventListener('resize', handleUpdate);
@@ -2966,7 +3006,7 @@ const usePortalPosition = (portalRef, isPortalOpen) => {
       window.removeEventListener('scroll', handleUpdate);
     };
   }, [isPortalOpen]);
-  return calculatePosition;
+  return calculatePosition$1;
 };
 
 const Select$1 = ({
@@ -2994,10 +3034,15 @@ const Select$1 = ({
   disableInput = false,
   showIcon = false,
   placeHolder = '',
-  showToolTip = false
+  showToolTip = false,
+  onCancelModal = () => {},
+  onSaveModal = () => {},
+  modalJSXProps = jsx(Fragment, {}),
+  recurrence = false
 }) => {
   const selectWidth = typeof width === 'number' ? `${width}px` : width;
   const [showDropdownOptions, setShowDropdownOptions] = useState(false);
+  const [customRecurrence, setCustomRecurrence] = useState(false);
   const [searchedOption, setSearchedOption] = useState({
     searchedText: '',
     searchedIcon: ''
@@ -3075,11 +3120,13 @@ const Select$1 = ({
       searchedIcon: selectedOption.iconName
     });
     setSelectOptionList(optionsList);
+    setCustomRecurrence(false);
     onBlur();
   };
   const onSelectOptionSelector = option => {
     if (disabled) return;
-    onSelectBlur();
+    const isCustomRecurrence = option?.recurrence || false;
+    setCustomRecurrence(isCustomRecurrence);
     setSearchedOption({
       searchedText: getValue$1(selectedOption, valueAccessor),
       searchedIcon: selectedOption.iconName
@@ -3087,6 +3134,9 @@ const Select$1 = ({
     if (onChange) {
       onChange(option);
     }
+    if (!isCustomRecurrence) {
+      onSelectBlur();
+    }
   };
   const handleResizeOrScroll = () => onSelectUpdatePosition();
   const hideShowScrollbar = () => {
@@ -3207,7 +3257,12 @@ const Select$1 = ({
         heightFromTop: height,
         selectedOption: searchedText,
         showIcon: showIcon,
-        showToolTip: showToolTip
+        showToolTip: showToolTip,
+        customReccurenece: customRecurrence,
+        onSaveModal: onSaveModal,
+        onCancelModal: onCancelModal,
+        modalJSXProps: modalJSXProps,
+        recurrence: recurrence
       }), document.body)
     })]
   });
@@ -3320,9 +3375,17 @@ const StatusButton = ({
   });
 };
 
-var css_248z$$ = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-option-card .ff-options {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-menu-option-container {\n  cursor: pointer;\n  position: relative;\n}\n.ff-menu-option-container .ff-icon-label {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container:hover {\n  background-color: var(--hover-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark {\n  background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover {\n  background-color: var(--menu-variant-dark-icon-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--brand-color);\n  cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked:hover {\n  background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked.dark {\n  background-color: var(--menu-variant-dark-icon-color);\n}\n\n.ff-option-card {\n  position: absolute;\n  margin: 4px;\n  border: 1px solid var(--option-card-border-color);\n  background: var(--option-card-bg-color);\n  overflow: hidden;\n  min-height: 32px;\n  min-width: 110px;\n  width: max-content;\n  border-radius: 4px;\n}\n.ff-option-card--primary {\n  background: var(--brand-color);\n  color: var(--primary-button-text-color);\n}\n.ff-option-card--primary svg path {\n  fill: var(--primary-icon-color);\n}\n.ff-option-card--primary :hover {\n  color: var(--brand-color);\n}\n.ff-option-card--primary :hover svg path {\n  fill: var(--brand-color);\n}\n.ff-option-card .ff-options {\n  cursor: pointer;\n  border-radius: 3px;\n  display: flex;\n  align-items: center;\n  padding: 4px;\n  gap: 8px;\n}\n.ff-option-card .ff-options:hover {\n  background-color: var(--hover-color);\n}\n.ff-option-card .ff-options label {\n  cursor: pointer;\n}\n.ff-option-card .ff-disable-option {\n  opacity: 0.5;\n  cursor: no-drop;\n}\n.ff-option-card .ff-disable-option label {\n  cursor: no-drop;\n}";
+var css_248z$$ = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-option-card .ff-options {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-menu-option-container {\n  cursor: pointer;\n  position: relative;\n}\n.ff-menu-option-container .ff-icon-label {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container:hover {\n  background-color: var(--hover-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark {\n  background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover {\n  background-color: var(--menu-variant-dark-icon-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--brand-color);\n  cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked:hover {\n  background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked.dark {\n  background-color: var(--menu-variant-dark-icon-color);\n}\n\n.ff-option-card {\n  position: absolute;\n  margin: 4px;\n  border: 1px solid var(--option-card-border-color);\n  background: var(--option-card-bg-color);\n  overflow: hidden;\n  min-height: 32px;\n  min-width: 110px;\n  width: max-content;\n  border-radius: 4px;\n}\n.ff-option-card--primary {\n  background: var(--brand-color);\n  color: var(--primary-button-text-color);\n}\n.ff-option-card--primary svg path {\n  fill: var(--primary-icon-color);\n}\n.ff-option-card--primary :hover {\n  color: var(--brand-color);\n}\n.ff-option-card--primary :hover svg path {\n  fill: var(--brand-color);\n}\n.ff-option-card .ff-options {\n  cursor: pointer;\n  border-radius: 3px;\n  display: flex;\n  align-items: center;\n  padding: 4px;\n  gap: 8px;\n}\n.ff-option-card .ff-options:hover {\n  background-color: var(--hover-color);\n}\n.ff-option-card .ff-options label {\n  cursor: pointer;\n}\n.ff-option-card .ff-disable-option {\n  opacity: 0.5;\n  cursor: no-drop;\n}\n.ff-option-card .ff-disable-option label {\n  cursor: no-drop;\n}\n\n.ff-menu-parent-hover {\n  background-color: var(--hover-color) !important;\n}";
 styleInject(css_248z$$);
 
+// Helper function to get the anchor element
+const getAnchorElement = anchorRef => {
+  if (typeof anchorRef === 'string') {
+    return document.getElementById(anchorRef);
+  }
+  return anchorRef?.current || null;
+};
+
 const Option$1 = ({
   option,
   onClick
@@ -3343,6 +3406,60 @@ const Option$1 = ({
     children: option.label
   })]
 });
+const calculatePosition = (menuPosition, dropdownPlacement, optionCardHeight) => {
+  const {
+    top,
+    left,
+    height,
+    width
+  } = menuPosition;
+  const availableSpace = {
+    top,
+    bottom: window.innerHeight - (top + height),
+    left,
+    right: window.innerWidth - (left + width)
+  };
+  const gap = 8; // Required gap
+  switch (dropdownPlacement) {
+    case 'top':
+      return availableSpace.top > optionCardHeight + gap ? {
+        top: top - optionCardHeight - gap,
+        left
+      } : {
+        top: top + height + gap,
+        left
+      };
+    case 'down':
+      return availableSpace.bottom > optionCardHeight + gap ? {
+        top: top + height + gap,
+        left
+      } : {
+        top: top - optionCardHeight - gap,
+        left
+      };
+    case 'left':
+      return availableSpace.left > width + gap ? {
+        top,
+        left: left - width - gap
+      } : {
+        top,
+        left: left + width + gap
+      };
+    case 'right':
+      return availableSpace.right > width + gap ? {
+        top,
+        left: left + width + gap
+      } : {
+        top,
+        left: left - width - gap
+      };
+    default:
+      return {
+        top,
+        left
+      };
+  }
+};
 const OptionCard = ({
   options,
   onClick,
@@ -3355,50 +3472,14 @@ const OptionCard = ({
 }) => {
   const themeContext = useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
-  const [optionsHeight, setOptionsHeight] = useState(0);
-  const [optionsWidth, setOptionsWidth] = useState(0);
   const optionCardRef = useRef(null);
-  useEffect(() => {
-    if (optionCardRef?.current) {
-      const rect = optionCardRef?.current?.getBoundingClientRect();
-      setOptionsHeight(rect?.height);
-      setOptionsWidth(rect?.width);
-    }
-  }, []);
   useClickOutside(menuRef, closeDropdown, [optionCardRef]);
-  const style = (() => {
-    switch (dropdownPlacement) {
-      case 'top':
-        return {
-          top: menuPosition.top - optionsHeight - 7,
-          left: menuPosition.left - 4
-        };
-      case 'down':
-        return {
-          top: menuPosition.top + 20,
-          left: menuPosition.left - 4
-        };
-      case 'left':
-        return {
-          top: menuPosition.top - 4,
-          left: menuPosition.left - optionsWidth - 8
-        };
-      case 'right':
-        return {
-          top: menuPosition.top - 4,
-          left: menuPosition.left + 20
-        };
-      default:
-        return {
-          top: menuPosition.bottom,
-          left: menuPosition.rightSpaceAvailable + 12
-        };
-    }
-  })();
+  const optionCardHeight = optionCardRef.current?.offsetHeight || 0;
+  const style = calculatePosition(menuPosition, dropdownPlacement, optionCardHeight);
   return /*#__PURE__*/createPortal(jsx("div", {
-    className: classNames('ff-option-card', [{
+    className: classNames('ff-option-card', {
       'ff-option-card--primary': variant === 'primary'
-    }], currentTheme),
+    }, currentTheme),
     style: {
       ...style,
       zIndex
@@ -3425,43 +3506,51 @@ const MenuOption = ({
   zIndex = 99,
   dropdownPlacement = 'down',
   optionCardVariant,
-  targetRef,
+  targetRef = null,
   treeRowRef
 }) => {
   const [isClicked, setIsClicked] = useState(false);
   const menuRef = useRef(null);
+  const menuIconRef = useRef(null);
   const [menuPosition, setMenuPosition] = useState({
     top: 0,
     left: 0,
     height: 0,
-    right: 0
+    right: 0,
+    width: 0
   });
   const closeDropDown = () => setIsClicked(false);
+  useEffect(() => {
+    if (targetRef) {
+      const parentDom = getAnchorElement(targetRef);
+      parentDom?.classList.toggle('ff-menu-parent-hover', isClicked);
+    }
+    return () => {
+      if (targetRef) {
+        const parentDom = getAnchorElement(targetRef);
+        parentDom?.classList.remove('ff-menu-parent-hover');
+      }
+    };
+  }, [isClicked, targetRef]);
   const onIconClickHandler = () => {
     onClick();
     calculateDims();
     setIsClicked(prev => !prev);
   };
   const handleOptionClick = option => {
-    const actionContainer = treeRowRef?.current?.children[0]?.children[2];
-    actionContainer.classList.remove('table-row-add-button');
+    treeRowRef?.current?.children[0]?.children[2]?.classList.remove('table-row-add-button');
     onOptionClick(option);
     closeDropDown();
   };
   const calculateDims = () => {
-    let targetElement = null;
-    if (typeof targetRef === 'string') {
-      targetElement = document.getElementById(targetRef);
-    } else if (targetRef && targetRef.current) {
-      targetElement = targetRef.current;
-    }
-    if (targetElement) {
-      const rect = targetElement.getBoundingClientRect();
+    if (menuIconRef.current) {
+      const rect = menuIconRef.current.getBoundingClientRect();
       setMenuPosition({
         top: rect.top + window.scrollY,
         left: rect.left + window.scrollX,
         height: rect.height,
-        right: rect.right
+        right: rect.right,
+        width: rect.width
       });
     }
   };
@@ -3478,13 +3567,12 @@ const MenuOption = ({
             'ff-menuicon-container-clicked': isClicked,
             dark: variant === 'dark'
           }),
+          ref: menuIconRef,
           onClick: onIconClickHandler,
           style: {
             width: `${iconButtonSize}px`,
             height: `${iconButtonSize}px`,
-            borderRadius: `${iconButtonBorderRadius}px`,
-            display: 'flex',
-            flexDirection: 'column'
+            borderRadius: `${iconButtonBorderRadius}px`
           },
           children: jsx(Icon, {
             height: iconSize,
@@ -8356,8 +8444,37 @@ const Table$1 = ({
   headerIconName = '',
   headerIconOnClick = () => {},
   draggable = false,
-  onDragEnd
+  onDragEnd,
+  loadMore = () => {}
 }) => {
+  const observerRef = useRef(null);
+  useEffect(() => {
+    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;
+    }
+    observerRef.current = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          const direction = entry.target.id === 'ff-table-last-node' ? 'below' : 'above';
+          loadMore(direction);
+        }
+      });
+    }, {
+      root: scrollContainer,
+      rootMargin: '8px',
+      threshold: 0.1
+    });
+    observerRef.current.observe(firstNode);
+    observerRef.current.observe(lastNode);
+    return () => {
+      // Cleanup observer
+      observerRef.current?.disconnect();
+    };
+  }, [data, loadMore]);
   const handleOnclick = (column, row) => {
     let {
       onClick,
@@ -8395,6 +8512,7 @@ const Table$1 = ({
           height: height,
           position: 'relative'
         },
+        id: "ff-table-scroll-container",
         className: classNames(className, {
           'ff-fixed-header-table': withFixedHeader,
           'border-borderRadius': borderWithRadius
@@ -8440,9 +8558,11 @@ const Table$1 = ({
                 })
               }, column.header))
             })
-          }), jsx("tbody", {
+          }), jsxs("tbody", {
             className: "ff-fixed-header-table",
-            children: data?.length > 0 && data?.map(row => jsx(SortableRow, {
+            children: [jsx("tr", {
+              id: "ff-table-first-node"
+            }), data?.length > 0 && data?.map(row => jsx(SortableRow, {
               row: row,
               columns: columns,
               tableBodyRowClass: tableBodyRowClass,
@@ -8451,7 +8571,9 @@ const Table$1 = ({
               withCheckbox: withCheckbox,
               onSelectClick: onSelectClick,
               draggable: draggable
-            }, row?.id))
+            }, row?.id)), jsx("tr", {
+              id: "ff-table-last-node"
+            })]
           })]
         }), data?.length <= 0 && jsx("div", {
           className: "no-data-content",
@@ -14671,7 +14793,6 @@ const TableBody = ({
       onRowClick: onRowClick,
       onToggleExpand: node => onToggleExpand(node, index),
       onCheckBoxChange: onCheckBoxChange,
-      index: index,
       onAddConfirm: onAddConfirm,
       onAddCancel: onAddCancel
     }, node.key)), jsx("tr", {
@@ -30152,9 +30273,10 @@ const DataSetTooltip = ({
     'Project Environment Set': peVariableSetName
   };
   return jsx(Fragment, {
-    children: jsx(Tooltip, {
-      placement: "bottom",
-      children: Object.entries(toolTipTitleValue).map(([key, value], index) => jsxs("div", {
+    children: Object.entries(toolTipTitleValue).map(([key, value], index) => jsx("div", {
+      className: '',
+      children: jsxs("div", {
+        className: '',
         children: [jsx(Typography, {
           as: "div",
           fontSize: 10,
@@ -30165,8 +30287,8 @@ const DataSetTooltip = ({
           lineHeight: "18px",
           children: value
         })]
-      }, index))
-    })
+      })
+    }, index))
   });
 };
 
@@ -30309,7 +30431,7 @@ const Branches = ({
               modalId: `${machineInstanceId}-runCount-${runCount - 1}`,
               onClick: () => onUpdateAddBrowserInstance(`${machineInstanceId}-runCount-0`, machineInstance)
             }, ffid())]
-          }), !readOnly && jsxs("div", {
+          }), readOnly && jsxs("div", {
             className: classNames({
               'ff-connecting-branch-datalist': evenRow,
               'ff-connecting-branch-datalist-reverse': !evenRow
@@ -54322,9 +54444,22 @@ const rearrangeDragItem = (initialArray, oldIndex, newIndex) => {
   return updatedData;
 };
 
-const getTreeDetails = (action, oldData, newData, index) => {
+const getTreeDetails = (action, oldData, newData, index, sourceId) => {
   let treeDataList;
   let root = undefined;
+  const findIndexByKey = (data, key) => {
+    return data.findIndex(node => node.key === key);
+  };
+  const getIndex = () => {
+    if (sourceId) {
+      const indexByKey = findIndexByKey(oldData, sourceId);
+      if (indexByKey === -1) {
+        throw new Error(`Key "${sourceId}" not found in oldData.`);
+      }
+      return indexByKey;
+    }
+    return index; // Use index if sourceId is not provided
+  };
   switch (action) {
     case 'above':
       treeDataList = [...newData, ...oldData].slice(0, 40);
@@ -54334,14 +54469,28 @@ const getTreeDetails = (action, oldData, newData, index) => {
       break;
     case 'expand':
     case 'collapse':
-      if (typeof index === 'number') {
-        treeDataList = [...oldData.slice(0, index), ...newData];
-      } else {
-        throw new Error("Index is required for 'expand' or 'collapse' actions.");
+      const actionIndex = getIndex();
+      if (actionIndex === undefined) {
+        throw new Error("Both sourceId and index are required for 'expand' or 'collapse' actions.");
       }
+      treeDataList = [...oldData.slice(0, actionIndex), ...newData];
+      break;
+    case 'addAbove':
+      const addAboveIndex = getIndex();
+      if (addAboveIndex === undefined) {
+        throw new Error("Both sourceId and index are required for 'addAbove' action.");
+      }
+      treeDataList = [...oldData.slice(0, addAboveIndex), ...newData, ...oldData.slice(addAboveIndex)];
+      break;
+    case 'addBelow':
+      const addBelowIndex = getIndex();
+      if (addBelowIndex === undefined) {
+        throw new Error("Both sourceId and index are required for 'addBelow' action.");
+      }
+      treeDataList = [...oldData.slice(0, addBelowIndex + 1), ...newData, ...oldData.slice(addBelowIndex + 1)];
       break;
     case 'start':
-      if (newData.length > 0) {
+      if (!checkEmpty(newData)) {
         root = newData[0];
         treeDataList = newData.slice(1);
       } else {
@@ -54351,17 +54500,20 @@ const getTreeDetails = (action, oldData, newData, index) => {
     default:
       throw new Error(`Invalid action: ${action}`);
   }
-  if (treeDataList.length === 0 && action !== 'start') {
+  if (checkEmpty(treeDataList) && action !== 'start') {
     throw new Error('Tree data list is empty.');
   }
   const firstNode = treeDataList[0] || root;
-  const lastNode = treeDataList[treeDataList.length - 1];
+  const lastNode = treeDataList[treeDataList.length - 1] || {
+    lastResource: true,
+    key: ''
+  };
   return {
     treeDataList,
-    next: !lastNode.lastResource,
-    previous: !firstNode.lastResource,
-    startId: firstNode.key,
-    endId: lastNode.key,
+    next: !lastNode?.lastResource,
+    previous: !firstNode?.lastResource,
+    startId: firstNode?.key,
+    endId: lastNode?.key,
     root
   };
 };