@ultraviolet/ui 1.26.0 → 1.26.1

package/dist/src/components/Popup/helpers.js

@@ -48,6 +48,35 @@ const computePlacement = _ref => {
   }
   return 'top';
 };
+
+/**
+ * This function will check if the offset parent is usable for popup positioning
+ * If not it will loop and search for a compatible parent until document.body is reached
+ */
+const findOffsetParent = element => {
+  const offsetParent = element?.current?.offsetParent;
+
+  // We need to check if offsetParent is a table cell or a table because they are not suitable for positioning
+  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
+  if (offsetParent && !['TH', 'TD', 'TABLE'].includes(offsetParent.tagName)) {
+    return offsetParent;
+  }
+  let currentElement = element?.current;
+  while (currentElement && currentElement.tagName !== 'BODY') {
+    const {
+      position
+    } = window.getComputedStyle(currentElement);
+
+    // Check if the current element is a potential offset parent
+    if (position !== 'static') {
+      return currentElement;
+    }
+    currentElement = currentElement.parentElement;
+  }
+
+  // If no suitable offset parent is found, return the body element
+  return document.body;
+};
 /**
  * This function will compute the positions of popup and arrow based on children position and popup size
  */
@@ -58,17 +87,18 @@ const computePositions = _ref2 => {
     popupRef,
     popupPortalTarget
   } = _ref2;
-  const childrenStructuredRef = childrenRef.current.getBoundingClientRect();
-  const offsetParentRect = childrenRef?.current?.offsetParent?.getBoundingClientRect() ?? {
+  const childrenRect = childrenRef.current.getBoundingClientRect();
+  const offsetParent = findOffsetParent(childrenRef);
+  const offsetParentRect = offsetParent?.getBoundingClientRect() ?? {
     top: 0,
     left: 0,
     right: 0
   };
   const popupStructuredRef = popupRef.current.getBoundingClientRect();
   const placementBasedOnWindowSize = placement === 'auto' ? computePlacement({
-    childrenStructuredRef,
+    childrenStructuredRef: childrenRect,
     popupStructuredRef,
-    offsetParentRect: offsetParentRect,
+    offsetParentRect,
     popupPortalTarget
   }) : placement;
   const {
@@ -77,7 +107,7 @@ const computePositions = _ref2 => {
     right: childrenRight,
     width: childrenWidth,
     height: childrenHeight
-  } = childrenStructuredRef;
+  } = childrenRect;
   const {
     top: parentTop,
     left: parentLeft,
@@ -88,13 +118,16 @@ const computePositions = _ref2 => {
     height: popupHeight
   } = popupStructuredRef;
 
+  // offSetParent is the closest positioned ancestor. If the element is not positioned, the nearest table cell or root element is used.
+  const isPopupPortalTargetBody = popupPortalTarget === document.body || offsetParent === document.body;
+
   // It will get how much scroll is done on the page to compute the position of the popup
-  const scrollTopValue = popupPortalTarget === document.body ? document.documentElement.scrollTop : 0;
+  const scrollTopValue = isPopupPortalTargetBody ? document.documentElement.scrollTop : 0;
 
   // We need to compute the position of the popup based on the parent element in the case the popup is not in the body
-  const overloadedChildrenLeft = popupPortalTarget === document.body ? childrenLeft : childrenLeft - parentLeft;
-  const overloadedChildrenTop = popupPortalTarget === document.body ? childrenTop : childrenTop - parentTop;
-  const overloadedChildrenRight = popupPortalTarget === document.body ? childrenRight : childrenRight + childrenWidth + ARROW_WIDTH + SPACE - parentRight / 2;
+  const overloadedChildrenLeft = isPopupPortalTargetBody ? childrenLeft : childrenLeft - parentLeft;
+  const overloadedChildrenTop = isPopupPortalTargetBody ? childrenTop : childrenTop - parentTop;
+  const overloadedChildrenRight = isPopupPortalTargetBody ? childrenRight : childrenRight + childrenWidth + ARROW_WIDTH + SPACE - parentRight / 2;
   switch (placementBasedOnWindowSize) {
     case 'bottom':
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.26.0",
+  "version": "1.26.1",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -62,7 +62,7 @@
     "deepmerge": "4.3.1",
     "react-datepicker": "4.21.0",
     "react-flatten-children": "1.1.2",
-    "react-select": "5.7.7",
+    "react-select": "5.8.0",
     "react-toastify": "9.1.3",
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",