@vitus-labs/elements 0.41.0 → 0.44.0

package/lib/vitus-labs-elements.umd.js

@@ -155,7 +155,7 @@
     ${({ $contentType }) => calculateGap({
         direction: t.parentDirection,
         type: $contentType,
-        value: unistyle.value([t.gap], rootSize),
+        value: unistyle.value(t.gap, rootSize),
         css,
     })}
   `};
@@ -713,8 +713,8 @@
   var useOverlay = ({ isOpen = false, openOn = 'click', // click | hover
   closeOn = 'click', // click | 'clickOnTrigger' | 'clickOutsideContent' | hover | manual
   type = 'dropdown', // dropdown | tooltip | popover | modal
-  align = 'bottom', // * main align prop * top | left | bottom | right
   position = 'fixed', // absolute | fixed | relative | static
+  align = 'bottom', // * main align prop * top | left | bottom | right
   alignX = 'left', // left | center | right
   alignY = 'bottom', // top | center | bottom
   offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc = true, disabled, onOpen, onClose, }) => {
@@ -722,9 +722,6 @@
       const ctx = useOverlayContext();
       const [blocked, handleBlocked] = React.useState(false);
       const [active, handleActive] = React.useState(isOpen);
-      const [innerAlign, setInnerAlign] = React.useState(align);
-      const [innerAlignX, setInnerAlignX] = React.useState(alignX);
-      const [innerAlignY, setInnerAlignY] = React.useState(alignY);
       const triggerRef = React.useRef();
       const contentRef = React.useRef();
       const setBlocked = React.useCallback(() => handleBlocked(true), []);
@@ -735,39 +732,36 @@
       const hideContent = React.useCallback(() => {
           handleActive(false);
       }, []);
-      React.useEffect(() => {
-          if (active) {
-              if (onOpen)
-                  onOpen();
-          }
-          else {
-              if (onClose)
-                  onClose();
-          }
-      }, [active, onOpen, onClose]);
       React.useEffect(() => {
           if (disabled) {
               hideContent();
           }
       }, [disabled]);
+      // calculate position on every position change state
+      React.useEffect(() => {
+          if (active) {
+              // hack-ish way to correctly calculate position for the first time
+              // without calling it twice the posittion is somehow wrong
+              calculateContentPosition();
+              calculateContentPosition();
+          }
+      }, [active, align, alignX, alignX]);
       // if an Overlay has an Overlay child, this will prevent closing parent child
       // + calculate correct position when an Overlay is opened
       React.useEffect(() => {
           if (active) {
+              if (onOpen)
+                  onOpen();
               if (ctx?.setBlocked)
                   ctx.setBlocked();
           }
           else {
+              if (onClose)
+                  onClose();
               if (ctx?.setUnblocked)
                   ctx.setUnblocked();
           }
-      }, [active, ctx]);
-      // calculate position on every position change state
-      React.useEffect(() => {
-          if (active) {
-              calculateContentPosition();
-          }
-      }, [active, innerAlign, innerAlignX, innerAlignY]);
+      }, [active, onOpen, onClose]);
       // handles calculating correct position of content
       // on document events (or custom scroll if set)
       React.useEffect(() => {
@@ -865,88 +859,105 @@
               }
               return;
           }
-          const triggerDimensions = triggerRef.current.getBoundingClientRect();
-          const contentDimensions = contentRef.current.getBoundingClientRect();
           const overlayPosition = {
               position,
           };
+          const t = triggerRef.current.getBoundingClientRect();
+          const c = contentRef.current.getBoundingClientRect();
           if (['dropdown', 'tooltip', 'popover'].includes(type)) {
+              // align is top or bottom
               if (['top', 'bottom'].includes(align)) {
-                  const positionTop = triggerDimensions.top - offsetY - contentDimensions.height;
-                  const positionBottom = triggerDimensions.bottom + offsetY;
-                  const positionLeft = triggerDimensions.left - offsetX;
-                  const positionRight = triggerDimensions.right + offsetX - contentDimensions.width;
+                  // axe Y position
+                  // (assigned as top position)
+                  const top = t.top - offsetY - c.height;
+                  const bottom = t.bottom + offsetY;
+                  // axe X position
+                  // content position to trigger position
+                  // (assigned as left position)
+                  const left = t.left + offsetX;
+                  const right = t.right - offsetX - c.width;
+                  // calculate possible position
+                  const isTop = top >= 0; // represents window.height = 0
+                  const isBottom = bottom + c.height <= window.innerHeight;
+                  const isLeft = left + c.width <= window.innerWidth;
+                  const isRight = right >= 0; // represents window.width = 0
                   if (align === 'top') {
-                      const isTop = positionTop >= 0;
-                      setInnerAlign(isTop ? 'top' : 'bottom');
-                      overlayPosition.top = isTop ? positionTop : positionBottom;
+                      overlayPosition.top = isTop ? top : bottom;
                   }
-                  else {
-                      const isBottom = positionBottom + contentDimensions.height <= window.innerHeight;
-                      setInnerAlign(isBottom ? 'bottom' : 'top');
-                      overlayPosition.top = isBottom ? positionBottom : positionTop;
+                  else if (align === 'bottom') {
+                      overlayPosition.top = isBottom ? bottom : top;
+                  }
+                  // left
+                  if (alignX === 'left') {
+                      overlayPosition.left = isLeft ? left : right;
                   }
-                  switch (alignX) {
-                      case 'right': {
-                          const isRight = positionRight >= 0;
-                          setInnerAlignX(isRight ? 'right' : 'left');
-                          overlayPosition.left = isRight ? positionRight : positionLeft;
-                          break;
+                  // center
+                  else if (alignX === 'center') {
+                      const center = t.left + (t.right - t.left) / 2 - c.width / 2;
+                      const isCenteredLeft = center >= 0;
+                      const isCenteredRight = center + c.width <= window.innerWidth;
+                      if (isCenteredLeft && isCenteredRight) {
+                          overlayPosition.left = center;
                       }
-                      case 'center': {
-                          overlayPosition.left =
-                              triggerDimensions.left +
-                                  (triggerDimensions.right - triggerDimensions.left) / 2 -
-                                  contentDimensions.width / 2;
-                          break;
+                      else if (isCenteredLeft) {
+                          overlayPosition.left = left;
                       }
-                      case 'left':
-                      default: {
-                          const isLeft = positionLeft + contentDimensions.width <= window.innerWidth;
-                          setInnerAlignX(isLeft ? 'left' : 'right');
-                          overlayPosition.left = isLeft ? positionLeft : positionRight;
-                          break;
+                      else if (isCenteredRight) {
+                          overlayPosition.left = right;
                       }
                   }
+                  // right
+                  else if (alignX === 'right') {
+                      overlayPosition.left = isRight ? right : left;
+                  }
               }
+              // align is left or right
               else if (['left', 'right'].includes(align)) {
-                  const positionLeft = triggerDimensions.left - offsetX - contentDimensions.width;
-                  const positionRight = triggerDimensions.right + offsetX;
-                  const positionTop = triggerDimensions.top + offsetY;
-                  const positionBottom = triggerDimensions.bottom - offsetY - contentDimensions.height;
+                  // axe X position
+                  // (assigned as left position)
+                  const left = t.left - offsetX - c.width;
+                  const right = t.right + offsetX;
+                  // axe Y position
+                  // content position to trigger position
+                  // (assigned as top position)
+                  const top = t.top + offsetY;
+                  const bottom = t.bottom - offsetY - c.height;
+                  const isLeft = left >= 0;
+                  const isRight = right + c.width <= window.innerWidth;
+                  const isTop = top + c.height <= window.innerHeight;
+                  const isBottom = bottom >= 0;
                   if (align === 'left') {
-                      const isLeft = positionLeft >= 0;
-                      setInnerAlign(isLeft ? 'left' : 'right');
-                      overlayPosition.left = isLeft ? positionLeft : positionRight;
+                      overlayPosition.left = isLeft ? left : right;
                   }
-                  else {
-                      const isRight = positionRight + contentDimensions.width <= window.innerWidth;
-                      setInnerAlign(isRight ? 'right' : 'left');
-                      overlayPosition.left = isRight ? positionRight : positionLeft;
+                  else if (align === 'right') {
+                      overlayPosition.left = isRight ? right : left;
+                  }
+                  // top
+                  if (alignY === 'top') {
+                      overlayPosition.top = isTop ? top : bottom;
                   }
-                  switch (alignY) {
-                      case 'top': {
-                          const isTop = positionTop + contentDimensions.height <= window.innerHeight;
-                          setInnerAlignY(isTop ? 'top' : 'bottom');
-                          overlayPosition.top = isTop ? positionTop : positionBottom;
-                          break;
+                  // center
+                  else if (alignY === 'center') {
+                      const center = t.top + (t.bottom - t.top) / 2 - c.height / 2;
+                      const isCenteredTop = center >= 0;
+                      const isCenteredBottom = center + c.height <= window.innerHeight;
+                      if (isCenteredTop && isCenteredBottom) {
+                          overlayPosition.top = center;
                       }
-                      case 'center':
-                          overlayPosition.top =
-                              triggerDimensions.top -
-                                  offsetY +
-                                  (triggerDimensions.bottom - triggerDimensions.top) / 2 -
-                                  contentDimensions.height / 2;
-                          break;
-                      case 'bottom':
-                      default: {
-                          const isBottom = positionBottom >= 0;
-                          setInnerAlignY(isBottom ? 'bottom' : 'top');
-                          overlayPosition.top = isBottom ? positionBottom : positionTop;
+                      else if (isCenteredTop) {
+                          overlayPosition.top = top;
                       }
+                      else if (isCenteredBottom) {
+                          overlayPosition.top = bottom;
+                      }
+                  }
+                  // bottom
+                  else if (alignY === 'bottom') {
+                      overlayPosition.top = isBottom ? bottom : top;
                   }
               }
           }
+          // modal type
           else if (type === 'modal') {
               switch (alignX) {
                   case 'right':
@@ -957,8 +968,7 @@
                       break;
                   case 'center':
                   default:
-                      overlayPosition.left =
-                          window.innerWidth / 2 - contentDimensions.width / 2;
+                      overlayPosition.left = window.innerWidth / 2 - c.width / 2;
                       break;
               }
               switch (alignY) {
@@ -966,8 +976,7 @@
                       overlayPosition.top = offsetY;
                       break;
                   case 'center':
-                      overlayPosition.top =
-                          window.innerHeight / 2 - contentDimensions.height / 2;
+                      overlayPosition.top = window.innerHeight / 2 - c.height / 2;
                       break;
                   case 'bottom':
                   default:
@@ -975,12 +984,13 @@
                       break;
               }
           }
+          const calc = (param) => unistyle.value(param, rootSize);
           // ADD POSITION STYLES TO CONTENT
-          contentRef.current.style.position = overlayPosition.position;
-          contentRef.current.style.top = unistyle.value([overlayPosition.top], rootSize);
-          contentRef.current.style.bottom = unistyle.value([overlayPosition.bottom], rootSize);
-          contentRef.current.style.left = unistyle.value([overlayPosition.left], rootSize);
-          contentRef.current.style.right = unistyle.value([overlayPosition.right], rootSize);
+          contentRef.current.style.position = position;
+          contentRef.current.style.top = calc(overlayPosition.top);
+          contentRef.current.style.bottom = calc(overlayPosition.bottom);
+          contentRef.current.style.left = calc(overlayPosition.left);
+          contentRef.current.style.right = calc(overlayPosition.right);
       };
       const handleVisibilityByEventType = (e) => {
           if (!active) {
@@ -1027,9 +1037,9 @@
           triggerRef,
           contentRef,
           active,
-          align: innerAlign,
-          alignX: innerAlignX,
-          alignY: innerAlignY,
+          align,
+          alignX,
+          alignY,
           showContent,
           hideContent,
           blocked,