@ultraviolet/ui 2.0.0 → 2.0.2

package/dist/components/Popup/helpers.cjs

@@ -8,9 +8,9 @@ const DEFAULT_POSITIONS = {
   arrowTop: 0,
   arrowTransform: "translate(-50%, -50)",
   placement: "top",
-  rotate: 135,
   popupInitialPosition: "translate3d(0px, 0px, 0)",
-  popupPosition: "translate3d(0px, 0px, 0)"
+  popupPosition: "translate3d(0px, 0px, 0)",
+  rotate: 135
 };
 const computePlacement = ({
   childrenStructuredRef,
@@ -133,17 +133,17 @@ const computePositions = ({
   const childrenRect = childrenRef.current.getBoundingClientRect();
   const offsetParent = findOffsetParent(childrenRef);
   const offsetParentRect = offsetParent?.getBoundingClientRect() ?? {
-    top: 0,
     left: 0,
-    right: window?.innerWidth ?? 0
+    right: window?.innerWidth ?? 0,
+    top: 0
   };
   const popupStructuredRef = popupRef.current.getBoundingClientRect();
   const placementBasedOnWindowSize = placement === "auto" ? computePlacement({
     childrenStructuredRef: childrenRect,
-    popupStructuredRef,
+    offsetParent,
     offsetParentRect,
     popupPortalTarget,
-    offsetParent
+    popupStructuredRef
   }) : placement;
   const {
     top: childrenTop,
@@ -176,9 +176,9 @@ const computePositions = ({
         arrowTop: -arrowWidth - 5,
         arrowTransform: "",
         placement: "bottom",
-        rotate: 180,
         popupInitialPosition: `translate3d(${!isAligned ? positionX + popupOverflow : positionX}px, ${positionY - TOTAL_USED_SPACE}px, 0)`,
-        popupPosition: `translate3d(${!isAligned ? positionX + popupOverflow : positionX}px, ${positionY}px, 0)`
+        popupPosition: `translate3d(${!isAligned ? positionX + popupOverflow : positionX}px, ${positionY}px, 0)`,
+        rotate: 180
       };
     }
     case "left": {
@@ -189,9 +189,9 @@ const computePositions = ({
         arrowTop: isAligned ? childrenHeight / 2 - arrowWidth : popupHeight / 2 + popupOverflow * -1,
         arrowTransform: "translate(-50%, -50%)",
         placement: "left",
-        rotate: -90,
         popupInitialPosition: `translate3d(${positionX + TOTAL_USED_SPACE}px, ${positionY + popupOverflow}px, 0)`,
-        popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`
+        popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`,
+        rotate: -90
       };
     }
     case "right": {
@@ -202,19 +202,19 @@ const computePositions = ({
         arrowTop: isAligned ? childrenHeight / 2 - arrowWidth : popupHeight / 2 + popupOverflow * -1,
         arrowTransform: "translate(50%, -50%)",
         placement: "right",
-        rotate: 90,
         popupInitialPosition: `translate3d(${positionX - TOTAL_USED_SPACE}px, ${positionY + popupOverflow}px, 0)`,
-        popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`
+        popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`,
+        rotate: 90
       };
     }
     case "nested-menu": {
       if (computePlacement({
         childrenStructuredRef: childrenRect,
-        popupStructuredRef,
+        isNestedMenu: true,
+        offsetParent,
         offsetParentRect,
         popupPortalTarget,
-        offsetParent,
-        isNestedMenu: true
+        popupStructuredRef
       }) === "right") {
         const positionX2 = overloadedChildrenRight + arrowWidth + SPACE * 2;
         const positionY2 = isAligned ? overloadedChildrenTop + scrollTopValue : overloadedChildrenTop + scrollTopValue - popupHeight / 8;
@@ -223,9 +223,9 @@ const computePositions = ({
           arrowTop: isAligned ? childrenHeight / 2 - arrowWidth : popupHeight / 2 + popupOverflow * -1,
           arrowTransform: "translate(50%, -50%)",
           placement: "right",
-          rotate: 90,
           popupInitialPosition: `translate3d(${positionX2 - TOTAL_USED_SPACE}px, ${positionY2 + popupOverflow}px, 0)`,
-          popupPosition: `translate3d(${positionX2}px, ${positionY2 + popupOverflow}px, 0)`
+          popupPosition: `translate3d(${positionX2}px, ${positionY2 + popupOverflow}px, 0)`,
+          rotate: 90
         };
       }
       const positionX = overloadedChildrenLeft - popupWidth - arrowWidth - SPACE * 2;
@@ -235,9 +235,9 @@ const computePositions = ({
         arrowTop: isAligned ? childrenHeight / 2 - arrowWidth : popupHeight / 2 + popupOverflow * -1,
         arrowTransform: "translate(-50%, -50%)",
         placement: "left",
-        rotate: -90,
         popupInitialPosition: `translate3d(${positionX + TOTAL_USED_SPACE}px, ${positionY + popupOverflow}px, 0)`,
-        popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`
+        popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`,
+        rotate: -90
       };
     }
     default: {
@@ -248,9 +248,9 @@ const computePositions = ({
         arrowTop: popupHeight - 1,
         arrowTransform: "",
         placement: "top",
-        rotate: 0,
         popupInitialPosition: `translate3d(${!isAligned ? positionX + popupOverflow : positionX}px, ${positionY + TOTAL_USED_SPACE}px, 0)`,
-        popupPosition: `translate3d(${!isAligned ? positionX + popupOverflow : positionX}px, ${positionY}px, 0)`
+        popupPosition: `translate3d(${!isAligned ? positionX + popupOverflow : positionX}px, ${positionY}px, 0)`,
+        rotate: 0
       };
     }
   }

package/dist/components/Popup/helpers.d.ts

@@ -7,9 +7,9 @@ export declare const DEFAULT_POSITIONS: {
     arrowTop: number;
     arrowTransform: string;
     placement: string;
-    rotate: number;
     popupInitialPosition: string;
     popupPosition: string;
+    rotate: number;
 };
 type ComputePositionsTypes = {
     placement: PopupPlacement;
@@ -27,8 +27,8 @@ export declare const computePositions: ({ placement, childrenRef, popupRef, popu
     arrowTop: number;
     arrowTransform: string;
     placement: string;
-    rotate: number;
     popupInitialPosition: string;
     popupPosition: string;
+    rotate: number;
 };
 export {};

package/dist/components/Popup/helpers.js

@@ -6,9 +6,9 @@ const DEFAULT_POSITIONS = {
   arrowTop: 0,
   arrowTransform: "translate(-50%, -50)",
   placement: "top",
-  rotate: 135,
   popupInitialPosition: "translate3d(0px, 0px, 0)",
-  popupPosition: "translate3d(0px, 0px, 0)"
+  popupPosition: "translate3d(0px, 0px, 0)",
+  rotate: 135
 };
 const computePlacement = ({
   childrenStructuredRef,
@@ -131,17 +131,17 @@ const computePositions = ({
   const childrenRect = childrenRef.current.getBoundingClientRect();
   const offsetParent = findOffsetParent(childrenRef);
   const offsetParentRect = offsetParent?.getBoundingClientRect() ?? {
-    top: 0,
     left: 0,
-    right: window?.innerWidth ?? 0
+    right: window?.innerWidth ?? 0,
+    top: 0
   };
   const popupStructuredRef = popupRef.current.getBoundingClientRect();
   const placementBasedOnWindowSize = placement === "auto" ? computePlacement({
     childrenStructuredRef: childrenRect,
-    popupStructuredRef,
+    offsetParent,
     offsetParentRect,
     popupPortalTarget,
-    offsetParent
+    popupStructuredRef
   }) : placement;
   const {
     top: childrenTop,
@@ -174,9 +174,9 @@ const computePositions = ({
         arrowTop: -arrowWidth - 5,
         arrowTransform: "",
         placement: "bottom",
-        rotate: 180,
         popupInitialPosition: `translate3d(${!isAligned ? positionX + popupOverflow : positionX}px, ${positionY - TOTAL_USED_SPACE}px, 0)`,
-        popupPosition: `translate3d(${!isAligned ? positionX + popupOverflow : positionX}px, ${positionY}px, 0)`
+        popupPosition: `translate3d(${!isAligned ? positionX + popupOverflow : positionX}px, ${positionY}px, 0)`,
+        rotate: 180
       };
     }
     case "left": {
@@ -187,9 +187,9 @@ const computePositions = ({
         arrowTop: isAligned ? childrenHeight / 2 - arrowWidth : popupHeight / 2 + popupOverflow * -1,
         arrowTransform: "translate(-50%, -50%)",
         placement: "left",
-        rotate: -90,
         popupInitialPosition: `translate3d(${positionX + TOTAL_USED_SPACE}px, ${positionY + popupOverflow}px, 0)`,
-        popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`
+        popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`,
+        rotate: -90
       };
     }
     case "right": {
@@ -200,19 +200,19 @@ const computePositions = ({
         arrowTop: isAligned ? childrenHeight / 2 - arrowWidth : popupHeight / 2 + popupOverflow * -1,
         arrowTransform: "translate(50%, -50%)",
         placement: "right",
-        rotate: 90,
         popupInitialPosition: `translate3d(${positionX - TOTAL_USED_SPACE}px, ${positionY + popupOverflow}px, 0)`,
-        popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`
+        popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`,
+        rotate: 90
       };
     }
     case "nested-menu": {
       if (computePlacement({
         childrenStructuredRef: childrenRect,
-        popupStructuredRef,
+        isNestedMenu: true,
+        offsetParent,
         offsetParentRect,
         popupPortalTarget,
-        offsetParent,
-        isNestedMenu: true
+        popupStructuredRef
       }) === "right") {
         const positionX2 = overloadedChildrenRight + arrowWidth + SPACE * 2;
         const positionY2 = isAligned ? overloadedChildrenTop + scrollTopValue : overloadedChildrenTop + scrollTopValue - popupHeight / 8;
@@ -221,9 +221,9 @@ const computePositions = ({
           arrowTop: isAligned ? childrenHeight / 2 - arrowWidth : popupHeight / 2 + popupOverflow * -1,
           arrowTransform: "translate(50%, -50%)",
           placement: "right",
-          rotate: 90,
           popupInitialPosition: `translate3d(${positionX2 - TOTAL_USED_SPACE}px, ${positionY2 + popupOverflow}px, 0)`,
-          popupPosition: `translate3d(${positionX2}px, ${positionY2 + popupOverflow}px, 0)`
+          popupPosition: `translate3d(${positionX2}px, ${positionY2 + popupOverflow}px, 0)`,
+          rotate: 90
         };
       }
       const positionX = overloadedChildrenLeft - popupWidth - arrowWidth - SPACE * 2;
@@ -233,9 +233,9 @@ const computePositions = ({
         arrowTop: isAligned ? childrenHeight / 2 - arrowWidth : popupHeight / 2 + popupOverflow * -1,
         arrowTransform: "translate(-50%, -50%)",
         placement: "left",
-        rotate: -90,
         popupInitialPosition: `translate3d(${positionX + TOTAL_USED_SPACE}px, ${positionY + popupOverflow}px, 0)`,
-        popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`
+        popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`,
+        rotate: -90
       };
     }
     default: {
@@ -246,9 +246,9 @@ const computePositions = ({
         arrowTop: popupHeight - 1,
         arrowTransform: "",
         placement: "top",
-        rotate: 0,
         popupInitialPosition: `translate3d(${!isAligned ? positionX + popupOverflow : positionX}px, ${positionY + TOTAL_USED_SPACE}px, 0)`,
-        popupPosition: `translate3d(${!isAligned ? positionX + popupOverflow : positionX}px, ${positionY}px, 0)`
+        popupPosition: `translate3d(${!isAligned ? positionX + popupOverflow : positionX}px, ${positionY}px, 0)`,
+        rotate: 0
       };
     }
   }