pixel-react 1.10.6 → 1.10.7

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('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
       });
     }
   };
@@ -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,
@@ -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,