@ultraviolet/ui 1.39.0 → 1.40.0

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

@@ -78,6 +78,65 @@ const findOffsetParent = element => {
   // If no suitable offset parent is found, return the body element
   return document.body;
 };
+
+/**
+ * This function will check if there is an overflow of the popup compared to the parent it is set in.
+ * Depending on the position, for top and bottom the overflow will be on X axis and for left and right
+ * the overflow will be Y axis. The function return the number of pixels the popup is overflowing.
+ * @param position the position of the popup
+ * @param offsetParentRect the rect of the parent element where the children is located in
+ * @param childrenRect the rect of the children element, the children element is the one that will trigger the popup
+ * @param popupStructuredRef the rect of the popup, the popup itself
+ */
+const getPopupOverflowFromParent = (position, offsetParentRect, childrenRect, popupStructuredRef) => {
+  const {
+    top: parentTop,
+    left: parentLeft,
+    right: parentRight
+  } = offsetParentRect;
+  const {
+    top: childrenTop,
+    bottom: childrenBottom,
+    left: childrenLeft,
+    right: childrenRight,
+    width: childrenWidth
+  } = childrenRect;
+  const {
+    width: popupWidth,
+    height: popupHeight
+  } = popupStructuredRef;
+  const popupHalfWidthWithArrow = popupWidth / 2 - ARROW_WIDTH;
+  const popupHalfHeightWithArrow = popupHeight / 2 - ARROW_WIDTH;
+  if (position === 'top' || position === 'bottom') {
+    const popupOverflowRight = childrenRight - childrenWidth / 2 + popupWidth / 2;
+    const popupOverflowLeft = childrenLeft + childrenWidth / 2 - parentLeft - popupWidth / 2;
+    if (popupOverflowRight > parentRight) {
+      if (Math.abs(popupOverflowRight - parentRight) > popupHalfWidthWithArrow) {
+        return -popupHalfWidthWithArrow;
+      }
+      return parentRight - popupOverflowRight;
+    }
+    if (popupOverflowLeft < 0) {
+      if (Math.abs(popupOverflowLeft) > popupHalfWidthWithArrow) {
+        return popupHalfWidthWithArrow;
+      }
+      return Math.abs(popupOverflowLeft);
+    }
+  }
+  if (position === 'left' || position === 'right') {
+    const popupOverflowTop = childrenTop - parentTop - popupHeight / 2;
+    if (popupOverflowTop < 0) {
+      if (Math.abs(childrenTop - parentTop - popupHalfHeightWithArrow) > popupHalfHeightWithArrow) {
+        return popupHalfHeightWithArrow;
+      }
+      return Math.abs(popupOverflowTop);
+    }
+    if (childrenBottom + popupHeight > window.innerHeight) {
+      return -popupHalfHeightWithArrow;
+    }
+  }
+  return 0;
+};
 /**
  * This function will compute the positions of popup and arrow based on children position and popup size
  */
@@ -128,19 +187,20 @@ const computePositions = ({
   const overloadedChildrenLeft = isPopupPortalTargetBody ? childrenLeft : childrenLeft - parentLeft;
   const overloadedChildrenTop = isPopupPortalTargetBody ? childrenTop : childrenTop - parentTop;
   const overloadedChildrenRight = isPopupPortalTargetBody ? childrenRight : childrenLeft - parentLeft + childrenWidth;
+  const popupOverflow = getPopupOverflowFromParent(placementBasedOnWindowSize, offsetParentRect, childrenRect, popupStructuredRef);
   switch (placementBasedOnWindowSize) {
     case 'bottom':
       {
         const positionX = overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
         const positionY = overloadedChildrenTop + scrollTopValue + childrenHeight + ARROW_WIDTH + SPACE;
         return {
-          arrowLeft: popupWidth / 2,
+          arrowLeft: popupWidth / 2 + popupOverflow * -1,
           arrowTop: -ARROW_WIDTH - 5,
           arrowTransform: '',
           placement: 'bottom',
           rotate: 180,
-          popupInitialPosition: `translate3d(${positionX}px, ${positionY - TOTAL_USED_SPACE}px, 0)`,
-          popupPosition: `translate3d(${positionX}px, ${positionY}px, 0)`
+          popupInitialPosition: `translate3d(${positionX + popupOverflow}px, ${positionY - TOTAL_USED_SPACE}px, 0)`,
+          popupPosition: `translate3d(${positionX + popupOverflow}px, ${positionY}px, 0)`
         };
       }
     case 'left':
@@ -149,12 +209,12 @@ const computePositions = ({
         const positionY = overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
         return {
           arrowLeft: popupWidth + ARROW_WIDTH + 5,
-          arrowTop: popupHeight / 2,
+          arrowTop: popupHeight / 2 + popupOverflow * -1,
           arrowTransform: 'translate(-50%, -50%)',
           placement: 'left',
           rotate: -90,
-          popupInitialPosition: `translate3d(${positionX + TOTAL_USED_SPACE}px, ${positionY}px, 0)`,
-          popupPosition: `translate3d(${positionX}px, ${positionY}px, 0)`
+          popupInitialPosition: `translate3d(${positionX + TOTAL_USED_SPACE}px, ${positionY + popupOverflow}px, 0)`,
+          popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`
         };
       }
     case 'right':
@@ -163,12 +223,12 @@ const computePositions = ({
         const positionY = overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
         return {
           arrowLeft: -ARROW_WIDTH - 5,
-          arrowTop: popupHeight / 2,
+          arrowTop: popupHeight / 2 + popupOverflow * -1,
           arrowTransform: 'translate(50%, -50%)',
           placement: 'right',
           rotate: 90,
-          popupInitialPosition: `translate3d(${positionX - TOTAL_USED_SPACE}px, ${positionY}px, 0)`,
-          popupPosition: `translate3d(${positionX}px, ${positionY}px, 0)`
+          popupInitialPosition: `translate3d(${positionX - TOTAL_USED_SPACE}px, ${positionY + popupOverflow}px, 0)`,
+          popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`
         };
       }
     default:
@@ -177,13 +237,13 @@ const computePositions = ({
         const positionX = overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
         const positionY = overloadedChildrenTop + scrollTopValue - popupHeight - ARROW_WIDTH - SPACE;
         return {
-          arrowLeft: popupWidth / 2,
+          arrowLeft: popupWidth / 2 + popupOverflow * -1,
           arrowTop: popupHeight - 1,
           arrowTransform: '',
           placement: 'top',
           rotate: 0,
-          popupInitialPosition: `translate3d(${positionX}px, ${positionY + TOTAL_USED_SPACE}px, 0)`,
-          popupPosition: `translate3d(${positionX}px, ${positionY}px, 0)`
+          popupInitialPosition: `translate3d(${positionX + popupOverflow}px, ${positionY + TOTAL_USED_SPACE}px, 0)`,
+          popupPosition: `translate3d(${positionX + popupOverflow}px, ${positionY}px, 0)`
         };
       }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.39.0",
+  "version": "1.40.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -33,7 +33,7 @@
     "default": "./dist/src/index.js"
   },
   "peerDependencies": {
-    "@emotion/react": "11.11.3",
+    "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
@@ -41,7 +41,7 @@
   "devDependencies": {
     "@babel/core": "7.23.9",
     "@emotion/babel-plugin": "11.11.0",
-    "@emotion/react": "11.11.3",
+    "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.0",
     "@types/react": "18.2.55",
     "@types/react-datepicker": "4.19.6",
@@ -67,7 +67,7 @@
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
     "@ultraviolet/themes": "1.9.0",
-    "@ultraviolet/icons": "2.9.1"
+    "@ultraviolet/icons": "2.9.2"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",