pixel-react 1.10.6 → 1.10.8

package/lib/components/MenuOption/types.d.ts

@@ -173,7 +173,7 @@ interface MenuOptionProps {
      * @optional
      */
     optionCardVariant?: 'primary';
-    targetRef?: string | React.RefObject<HTMLElement>;
+    targetRef?: string | React.RefObject<HTMLElement> | null;
     treeRowRef?: React.RefObject<any | null>;
 }
 interface OptionProps {

package/lib/index.d.ts

@@ -1072,7 +1072,7 @@ interface MenuOptionProps {
      * @optional
      */
     optionCardVariant?: 'primary';
-    targetRef?: string | React.RefObject<HTMLElement>;
+    targetRef?: string | React.RefObject<HTMLElement> | null;
     treeRowRef?: React.RefObject<any | null>;
 }
 
@@ -3484,7 +3484,7 @@ interface TreeDetailsResult {
     endId: string;
     root?: TreeNodeProps;
 }
-declare const getTreeDetails: (action: "above" | "below" | "expand" | "collapse" | "start", oldData: TreeNodeProps[], newData: TreeNodeProps[], index?: number) => TreeDetailsResult;
+declare const getTreeDetails: (action: "above" | "below" | "expand" | "collapse" | "start" | "addAbove" | "addBelow", oldData: TreeNodeProps[], newData: TreeNodeProps[], index?: number, sourceId?: string) => TreeDetailsResult;
 
 declare const handleTreeNodeSect: (data: TreeNodeProps[], key: string | undefined, isChecked: boolean | "partial") => TreeNodeProps[];
 

package/lib/index.esm.js

@@ -2979,7 +2979,7 @@ const portalPosition = {
   width: 0,
   fromBottom: 0
 };
-const calculatePosition = portalRef => {
+const calculatePosition$1 = portalRef => {
   if (!portalRef?.current) {
     return portalPosition;
   }
@@ -2995,7 +2995,7 @@ const calculatePosition = portalRef => {
 const usePortalPosition = (portalRef, isPortalOpen) => {
   useEffect(() => {
     const handleUpdate = () => {
-      calculatePosition(portalRef);
+      calculatePosition$1(portalRef);
     };
     if (isPortalOpen) {
       window.addEventListener('resize', handleUpdate);
@@ -3006,7 +3006,7 @@ const usePortalPosition = (portalRef, isPortalOpen) => {
       window.removeEventListener('scroll', handleUpdate);
     };
   }, [isPortalOpen]);
-  return calculatePosition;
+  return calculatePosition$1;
 };
 
 const Select$1 = ({
@@ -3375,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
@@ -3398,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,
@@ -3410,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
@@ -3480,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('hover', isClicked);
+    }
+    return () => {
+      if (targetRef) {
+        const parentDom = getAnchorElement(targetRef);
+        parentDom?.classList.remove('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
       });
     }
   };
@@ -3533,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,
@@ -3565,7 +3598,7 @@ const MenuOption = ({
   });
 };
 
-var css_248z$_ = ".ff-fixed-header-table {\n  overflow-y: auto;\n}\n\n.ff-table-icon {\n  position: absolute;\n  top: 10px;\n  right: 0;\n  margin-right: 10px;\n  z-index: 100;\n  cursor: pointer;\n}\n\n.ff-table {\n  width: 100%;\n}\n.ff-table th,\n.ff-table td {\n  text-align: left;\n  font-size: 12px;\n  padding: 9px 8px;\n}\n.ff-table thead tr th {\n  border-bottom: 1px solid var(--slider-table-color);\n}\n.ff-table thead tr th .ff-label-checkbox-container {\n  display: flex;\n  align-items: center;\n}\n.ff-table thead tr th .ff-label-checkbox-container .ff-table-checkbox {\n  padding-right: 8px;\n}\n.ff-table tbody tr .action-column {\n  opacity: 0;\n}\n.ff-table tbody tr .icon-container {\n  padding-left: 8px;\n  opacity: 0;\n  display: flex;\n  justify-content: flex-end;\n  transition: opacity 0.3s ease, transform 0.3s ease;\n  transform: translateX(20px);\n}\n.ff-table tbody tr .ff-data-checkbox-container {\n  display: flex;\n  align-items: center;\n}\n.ff-table tbody tr .ff-data-checkbox-container .ff-table-checkbox {\n  padding-right: 8px;\n}\n.ff-table tbody tr .ff-data-checkbox-container .ff-table-drag {\n  opacity: 0;\n  transition: opacity 0.3s ease, transform 0.3s ease;\n}\n.ff-table tbody tr .ff-data-checkbox-container .ff-table-drag-icon {\n  opacity: 0;\n  transition: opacity 0.3s ease, transform 0.3s ease;\n  cursor: grab;\n}\n.ff-table tbody tr:hover {\n  background-color: var(--hover-color);\n}\n.ff-table tbody tr:hover .icon-container {\n  opacity: 1;\n  transform: translateX(0);\n}\n.ff-table tbody tr:hover .ff-table-drag,\n.ff-table tbody tr:hover .ff-table-drag-icon {\n  opacity: 1;\n}\n.ff-table tbody tr td {\n  position: relative;\n  color: var(--table-column-text-color);\n}\n.ff-table tbody tr td.clickable-cell {\n  cursor: pointer;\n}\n.ff-table .primary-bg {\n  background-color: var(--brand-color);\n}\n.ff-table .secondary-bg {\n  background-color: var(--slider-table-color);\n}\n.ff-table .tertiary-bg {\n  background-color: var(--custom-table-header-bg-color);\n}\n.ff-table .default-bg {\n  background-color: transparent;\n}\n.ff-table .default-color {\n  color: var(--table-header-text-color);\n}\n.ff-table .primary-color {\n  color: var(--brand-color);\n}\n\n.border-borderRadius {\n  border: 1px solid var(--slider-table-color);\n  border-radius: 5px;\n  border-collapse: none !important;\n}\n\n.ff-fixed-header {\n  position: sticky !important;\n  top: 0;\n  z-index: 99;\n  background-color: Var(--file-details-bg);\n}\n\n.no-data-content {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\ntbody tr.disabled-row {\n  opacity: 0.5;\n  cursor: not-allowed;\n}";
+var css_248z$_ = ".ff-fixed-header-table {\n  overflow-y: auto;\n}\n\n.ff-table-icon {\n  position: absolute;\n  top: 10px;\n  right: 0;\n  margin-right: 10px;\n  z-index: 100;\n  cursor: pointer;\n}\n\n.ff-table {\n  width: 100%;\n}\n.ff-table th,\n.ff-table td {\n  text-align: left;\n  font-size: 12px;\n  padding: 9px 8px;\n}\n.ff-table thead tr th {\n  border-bottom: 1px solid var(--slider-table-color);\n}\n.ff-table thead tr th .ff-label-checkbox-container {\n  display: flex;\n  align-items: center;\n}\n.ff-table thead tr th .ff-label-checkbox-container .ff-table-checkbox {\n  padding-right: 8px;\n}\n.ff-table tbody tr:hover,\n.ff-table tbody tr.hover {\n  background-color: var(--hover-color);\n}\n.ff-table tbody tr:hover .icon-container,\n.ff-table tbody tr.hover .icon-container {\n  opacity: 1;\n  transform: translateX(0);\n}\n.ff-table tbody tr:hover .ff-table-drag,\n.ff-table tbody tr:hover .ff-table-drag-icon,\n.ff-table tbody tr.hover .ff-table-drag,\n.ff-table tbody tr.hover .ff-table-drag-icon {\n  opacity: 1;\n}\n.ff-table tbody tr .action-column {\n  opacity: 0;\n}\n.ff-table tbody tr .icon-container {\n  padding-left: 8px;\n  opacity: 0;\n  display: flex;\n  justify-content: flex-end;\n  transition: opacity 0.3s ease, transform 0.3s ease;\n  transform: translateX(20px);\n}\n.ff-table tbody tr .ff-data-checkbox-container {\n  display: flex;\n  align-items: center;\n}\n.ff-table tbody tr .ff-data-checkbox-container .ff-table-checkbox {\n  padding-right: 8px;\n}\n.ff-table tbody tr .ff-data-checkbox-container .ff-table-drag {\n  opacity: 0;\n  transition: opacity 0.3s ease, transform 0.3s ease;\n}\n.ff-table tbody tr .ff-data-checkbox-container .ff-table-drag-icon {\n  opacity: 0;\n  transition: opacity 0.3s ease, transform 0.3s ease;\n  cursor: grab;\n}\n.ff-table tbody tr td {\n  position: relative;\n  color: var(--table-column-text-color);\n}\n.ff-table tbody tr td.clickable-cell {\n  cursor: pointer;\n}\n.ff-table .primary-bg {\n  background-color: var(--brand-color);\n}\n.ff-table .secondary-bg {\n  background-color: var(--slider-table-color);\n}\n.ff-table .tertiary-bg {\n  background-color: var(--custom-table-header-bg-color);\n}\n.ff-table .default-bg {\n  background-color: transparent;\n}\n.ff-table .default-color {\n  color: var(--table-header-text-color);\n}\n.ff-table .primary-color {\n  color: var(--brand-color);\n}\n\n.border-borderRadius {\n  border: 1px solid var(--slider-table-color);\n  border-radius: 5px;\n  border-collapse: none !important;\n}\n\n.ff-fixed-header {\n  position: sticky !important;\n  top: 0;\n  z-index: 99;\n  background-color: Var(--file-details-bg);\n}\n\n.no-data-content {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\ntbody tr.disabled-row {\n  opacity: 0.5;\n  cursor: not-allowed;\n}";
 styleInject(css_248z$_);
 
 const isFunction$2 = functionToCheck => {
@@ -14520,7 +14553,7 @@ const MiniModal = /*#__PURE__*/forwardRef(({
   }), document.body);
 });
 
-var css_248z$R = ":root {\n  --table-height: auto;\n}\n\n.tree-table-space-block {\n  display: inline-block;\n  width: 20px;\n  height: 16px;\n  text-align: center;\n  line-height: 16px;\n  vertical-align: top;\n  font-size: 19px;\n  position: relative;\n  box-sizing: border-box;\n  border-radius: 50%;\n}\n.tree-table-space-block.btn-toggle {\n  position: relative;\n  cursor: pointer;\n  width: 22px;\n  height: 18px;\n  z-index: 12;\n}\n.tree-table-space-block.btn-toggle::before {\n  display: none;\n}\n.tree-table-space-block.last-block::after, .tree-table-space-block.no-folder::after {\n  position: absolute;\n  content: \"\";\n  height: 1px;\n  background: var(--tree-connecting-lines-color);\n  top: 50%;\n  margin-top: -1px;\n}\n.tree-table-space-block.last-block::after {\n  width: 12px;\n  left: -10px;\n}\n.tree-table-space-block.no-folder {\n  width: 8px;\n}\n.tree-table-space-block.no-folder::after {\n  width: 22px;\n  left: -10px;\n}\n.tree-table-space-block:not(.last-block, .no-lines, .last-node)::before {\n  position: absolute;\n  content: \"\";\n  width: 1px;\n  height: 40px;\n  background: var(--tree-connecting-lines-color);\n  left: 50%;\n  top: -4px;\n  z-index: 99;\n}\n.tree-table-space-block.last-node::before {\n  position: absolute;\n  content: \"\";\n  width: 1px;\n  height: 12px;\n  background: var(--tree-connecting-lines-color);\n  left: 50%;\n  top: -4px;\n  z-index: -1;\n}\n.tree-table-space-block.folder.last-node::before {\n  height: 13px;\n}\n\n.tree-title-container .tree-table-space-block {\n  width: 16px;\n}\n\n.hidden {\n  display: none;\n}\n\n.show {\n  display: table-row;\n  visibility: visible;\n}\n\n.btn-toggle {\n  cursor: pointer;\n}\n.btn-toggle.is-close {\n  background: #f1f1f1;\n  border: 1px solid transparent;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.btn-toggle::before, .btn-toggle::after {\n  display: none;\n}\n\n.tree-table-wrap {\n  width: 100%;\n  padding-left: 4px;\n  overflow: hidden;\n  overflow-x: auto;\n}\n\n.table-scrollable {\n  height: var(--table-height);\n  /* Adjust height as needed */\n  overflow-y: auto;\n  position: relative;\n}\n\n.ff-table-tree-body {\n  overflow: scroll;\n}\n\n.tree-table {\n  table-layout: fixed;\n  width: 100%;\n  border-collapse: collapse;\n  overflow: scroll;\n}\n.tree-table .ff-table-tree-head {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n}\n.tree-table .ff-table-tree-row {\n  background-color: var(--base-bg-color);\n}\n.tree-table .ff-table-tree-row .table-tree-row-action {\n  display: none;\n}\n.tree-table .ff-table-tree-row .table-row-add-button {\n  display: inline-flex;\n  z-index: 9999;\n}\n.tree-table .ff-table-tree-row:hover {\n  background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .ff-table-tree-td:first-child {\n  background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action {\n  display: inline-flex;\n  align-items: center;\n}\n.tree-table .ff-table-tree-row::after {\n  content: \"\";\n  display: block;\n  visibility: hidden;\n  clear: both;\n}\n.tree-table .ff-table-tree-th,\n.tree-table .ff-table-tree-td {\n  text-align: left;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.tree-table .ff-table-tree-th {\n  color: var(--table-header-text-color);\n  background: var(--border-color);\n  font-size: 12px;\n  font-weight: 600;\n  width: 400px;\n  height: 32px;\n  box-sizing: border-box;\n}\n.tree-table .ff-table-tree-th:first-child {\n  width: 400px !important;\n  position: sticky;\n  left: 0;\n  padding-left: 8px;\n}\n.tree-table .ff-table-tree-td {\n  font-size: 12px;\n  color: var(--nlp-color);\n  height: 18px;\n}\n.tree-table .ff-table-tree-td:first-child {\n  overflow: initial;\n  position: sticky;\n  left: 0;\n  background-color: white;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n  margin-left: 8px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content {\n  padding-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content .tree-table-td-content-text {\n  margin-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n  font-weight: 700;\n}\n.tree-table .ff-table-tree-td.folder {\n  height: 28px;\n}\n\n.tree-table-td-content {\n  display: inline-flex;\n  align-items: center;\n  font-size: 12px;\n  font-family: \"Poppins\", sans-serif;\n}\n.tree-table-td-content.folder {\n  font-weight: 600;\n}\n\n.tree-row-expanded span svg,\n.tree-row-collapsed span svg {\n  height: 12px;\n  width: 12px;\n}\n.tree-row-expanded span svg path,\n.tree-row-collapsed span svg path {\n  fill: var(--brand-color);\n}\n\n.tree-row-collapsed svg {\n  transform: rotate(-90deg);\n  transition: transform 0.3s ease;\n}\n\n.tree-table-space-container {\n  display: inline-flex;\n}\n\n.tree-title-container {\n  display: inline-flex;\n  align-items: center;\n}";
+var css_248z$R = ":root {\n  --table-height: auto;\n}\n\n.tree-table-space-block {\n  display: inline-block;\n  width: 20px;\n  height: 16px;\n  text-align: center;\n  line-height: 16px;\n  vertical-align: top;\n  font-size: 19px;\n  position: relative;\n  box-sizing: border-box;\n  border-radius: 50%;\n}\n.tree-table-space-block.btn-toggle {\n  position: relative;\n  cursor: pointer;\n  width: 22px;\n  height: 18px;\n  z-index: 12;\n}\n.tree-table-space-block.btn-toggle::before {\n  display: none;\n}\n.tree-table-space-block.last-block::after, .tree-table-space-block.no-folder::after {\n  position: absolute;\n  content: \"\";\n  height: 1px;\n  background: var(--tree-connecting-lines-color);\n  top: 50%;\n  margin-top: -1px;\n}\n.tree-table-space-block.last-block::after {\n  width: 12px;\n  left: -10px;\n}\n.tree-table-space-block.no-folder {\n  width: 8px;\n}\n.tree-table-space-block.no-folder::after {\n  width: 22px;\n  left: -10px;\n}\n.tree-table-space-block:not(.last-block, .no-lines, .last-node)::before {\n  position: absolute;\n  content: \"\";\n  width: 1px;\n  height: 40px;\n  background: var(--tree-connecting-lines-color);\n  left: 50%;\n  top: -4px;\n  z-index: 99;\n}\n.tree-table-space-block.last-node::before {\n  position: absolute;\n  content: \"\";\n  width: 1px;\n  height: 12px;\n  background: var(--tree-connecting-lines-color);\n  left: 50%;\n  top: -4px;\n  z-index: -1;\n}\n.tree-table-space-block.folder.last-node::before {\n  height: 13px;\n}\n\n.tree-title-container .tree-table-space-block {\n  width: 16px;\n}\n\n.hidden {\n  display: none;\n}\n\n.show {\n  display: table-row;\n  visibility: visible;\n}\n\n.btn-toggle {\n  cursor: pointer;\n}\n.btn-toggle.is-close {\n  background: #f1f1f1;\n  border: 1px solid transparent;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.btn-toggle::before, .btn-toggle::after {\n  display: none;\n}\n\n.tree-table-wrap {\n  width: 100%;\n  padding-left: 4px;\n  overflow: hidden;\n  overflow-x: auto;\n}\n\n.table-scrollable {\n  height: var(--table-height);\n  /* Adjust height as needed */\n  overflow-y: auto;\n  position: relative;\n}\n\n.ff-table-tree-body {\n  overflow: scroll;\n}\n\n.tree-table {\n  table-layout: fixed;\n  width: 100%;\n  border-collapse: collapse;\n  overflow: scroll;\n}\n.tree-table .ff-table-tree-head {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n}\n.tree-table .ff-table-tree-row {\n  background-color: var(--base-bg-color);\n}\n.tree-table .ff-table-tree-row .table-tree-row-action {\n  display: none;\n}\n.tree-table .ff-table-tree-row .table-row-add-button {\n  display: inline-flex;\n  z-index: 9999;\n  align-items: center;\n}\n.tree-table .ff-table-tree-row:hover {\n  background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .ff-table-tree-td:first-child {\n  background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action {\n  display: inline-flex;\n  align-items: center;\n}\n.tree-table .ff-table-tree-row::after {\n  content: \"\";\n  display: block;\n  visibility: hidden;\n  clear: both;\n}\n.tree-table .ff-table-tree-th,\n.tree-table .ff-table-tree-td {\n  text-align: left;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.tree-table .ff-table-tree-th {\n  color: var(--table-header-text-color);\n  background: var(--border-color);\n  font-size: 12px;\n  font-weight: 600;\n  width: 400px;\n  height: 32px;\n  box-sizing: border-box;\n}\n.tree-table .ff-table-tree-th:first-child {\n  width: 400px !important;\n  position: sticky;\n  left: 0;\n  padding-left: 8px;\n}\n.tree-table .ff-table-tree-td {\n  font-size: 12px;\n  color: var(--nlp-color);\n  height: 18px;\n}\n.tree-table .ff-table-tree-td:first-child {\n  overflow: initial;\n  position: sticky;\n  left: 0;\n  background-color: white;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n  margin-left: 8px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content {\n  padding-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content .tree-table-td-content-text {\n  margin-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n  font-weight: 700;\n}\n.tree-table .ff-table-tree-td.folder {\n  height: 28px;\n}\n\n.tree-table-td-content {\n  display: inline-flex;\n  align-items: center;\n  font-size: 12px;\n  font-family: \"Poppins\", sans-serif;\n}\n.tree-table-td-content.folder {\n  font-weight: 600;\n}\n\n.tree-row-expanded span svg,\n.tree-row-collapsed span svg {\n  height: 12px;\n  width: 12px;\n}\n.tree-row-expanded span svg path,\n.tree-row-collapsed span svg path {\n  fill: var(--brand-color);\n}\n\n.tree-row-collapsed svg {\n  transform: rotate(-90deg);\n  transition: transform 0.3s ease;\n}\n\n.tree-table-space-container {\n  display: inline-flex;\n}\n\n.tree-title-container {\n  display: inline-flex;\n  align-items: center;\n}";
 styleInject(css_248z$R);
 
 const TableHead = /*#__PURE__*/React__default.memo(({
@@ -14760,7 +14793,6 @@ const TableBody = ({
       onRowClick: onRowClick,
       onToggleExpand: node => onToggleExpand(node, index),
       onCheckBoxChange: onCheckBoxChange,
-      index: index,
       onAddConfirm: onAddConfirm,
       onAddCancel: onAddCancel
     }, node.key)), jsx("tr", {
@@ -54412,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);
@@ -54424,11 +54469,25 @@ 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 (!checkEmpty(newData)) {
@@ -54445,7 +54504,10 @@ const getTreeDetails = (action, oldData, newData, index) => {
     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,