@vitus-labs/elements 0.61.0 → 0.62.0-alpha.2

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

@@ -896,15 +896,16 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc
                     break;
             }
         }
-        const calc = (param) => value(param, rootSize);
+        const setValue = (param) => value(param, rootSize);
         // ADD POSITION STYLES TO CONTENT
         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);
+        contentRef.current.style.top = setValue(overlayPosition.top);
+        contentRef.current.style.bottom = setValue(overlayPosition.bottom);
+        contentRef.current.style.left = setValue(overlayPosition.left);
+        contentRef.current.style.right = setValue(overlayPosition.right);
     }, [
         active,
+        type,
         align,
         alignX,
         alignY,
@@ -912,9 +913,13 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc
         offsetY,
         position,
         rootSize,
-        type,
     ]);
-    const handleVisibilityByEventType = (e) => {
+    const handleVisibilityByEventType = useCallback((e) => {
+        if (blocked)
+            return;
+        if (disabled) {
+            hideContent();
+        }
         if (!active) {
             if ((openOn === 'hover' && e.type === 'mousemove') ||
                 (openOn === 'click' && e.type === 'click')) {
@@ -946,10 +951,22 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc
                 }
             }
         }
-    };
-    const handleContentPosition = throttle(calculateContentPosition, throttleDelay);
-    const handleClick = handleVisibilityByEventType;
-    const handleVisibility = throttle(handleVisibilityByEventType, throttleDelay);
+    }, [
+        active,
+        blocked,
+        closeOn,
+        disabled,
+        hideContent,
+        isContent,
+        isTrigger,
+        openOn,
+        showContent,
+    ]);
+    const handleContentPosition = useMemo(() => throttle(calculateContentPosition, throttleDelay), [calculateContentPosition, throttleDelay]);
+    const observeClick = useCallback(handleVisibilityByEventType, [
+        handleVisibilityByEventType,
+    ]);
+    const observeVisibility = useMemo(() => throttle(handleVisibilityByEventType, throttleDelay), [handleVisibilityByEventType, throttleDelay]);
     const handleEscKey = useCallback((e) => {
         if (e.key === 'Escape') {
             hideContent();
@@ -958,17 +975,12 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc
     useEffect(() => {
         if (disabled) {
             hideContent();
+            return;
         }
-    }, [disabled, hideContent]);
-    // calculate position on every position change state
-    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, calculateContentPosition]);
+        handleActive(isOpen);
+        setInnerAlignX(alignX);
+        setInnerAlignY(alignY);
+    }, [disabled, isOpen, alignX, alignY, hideContent]);
     // if an Overlay has an Overlay child, this will prevent closing parent child
     // + calculate correct position when an Overlay is opened
     useEffect(() => {
@@ -977,6 +989,7 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc
                 onOpen();
             if (ctx && ctx.setBlocked)
                 ctx.setBlocked();
+            calculateContentPosition();
         }
         else {
             if (onClose)
@@ -984,7 +997,7 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc
             if (ctx && ctx.setUnblocked)
                 ctx.setUnblocked();
         }
-    }, [active, onOpen, onClose, ctx]);
+    }, [active, onOpen, onClose, ctx, calculateContentPosition]);
     // handles calculating correct position of content
     // on document events (or custom scroll if set)
     useEffect(() => {
@@ -1006,18 +1019,6 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc
     // make sure scrolling is blocked in case of modal windows or when
     // customScroll is set
     useEffect(() => {
-        if (active) {
-            if (customScrollListener && closeOn !== 'hover') {
-                // eslint-disable-next-line no-param-reassign
-                customScrollListener.style.overflow = 'hidden';
-            }
-        }
-        else {
-            if (customScrollListener) {
-                // eslint-disable-next-line no-param-reassign
-                customScrollListener.style.overflow = '';
-            }
-        }
         return () => {
             if (customScrollListener) {
                 // eslint-disable-next-line no-param-reassign
@@ -1027,42 +1028,49 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc
     }, [active, type, customScrollListener, closeOn]);
     // only when content is active handle closing
     useEffect(() => {
-        if (!active)
+        if (!active || blocked)
             return undefined;
-        document.addEventListener('scroll', handleVisibility, false);
+        document.addEventListener('scroll', observeVisibility, false);
         if (customScrollListener) {
-            customScrollListener.addEventListener('scroll', handleVisibility, false);
+            customScrollListener.addEventListener('scroll', observeVisibility, false);
         }
         if (closeOnEsc) {
             document.addEventListener('keydown', handleEscKey, false);
         }
         return () => {
-            document.removeEventListener('scroll', handleVisibility, false);
+            document.removeEventListener('scroll', observeVisibility, false);
             if (customScrollListener) {
-                customScrollListener.removeEventListener('scroll', handleVisibility, false);
+                customScrollListener.removeEventListener('scroll', observeVisibility, false);
             }
             if (closeOnEsc) {
                 document.removeEventListener('keydown', handleEscKey, false);
             }
         };
-    }, [active, customScrollListener, closeOnEsc, handleVisibility, handleEscKey]);
+    }, [
+        active,
+        blocked,
+        customScrollListener,
+        closeOnEsc,
+        observeVisibility,
+        handleEscKey,
+    ]);
     useEffect(() => {
         // enable overlay manipulation only when the state is NOT blocked=true
-        // nor in disabled state
+        // nor in disabled=true state
         if (blocked || disabled)
             return undefined;
         if (openOn === 'click' ||
             closeOn === 'click' ||
             closeOn === 'clickOnTrigger' ||
             closeOn === 'clickOutsideContent') {
-            document.addEventListener('click', handleClick, false);
+            document.addEventListener('click', observeClick, false);
         }
         if (openOn === 'hover' || closeOn === 'hover') {
-            document.addEventListener('mousemove', handleVisibility, false);
+            document.addEventListener('mousemove', observeVisibility, false);
         }
         return () => {
-            document.removeEventListener('click', handleClick, false);
-            document.removeEventListener('mousemove', handleVisibility, false);
+            document.removeEventListener('click', observeClick, false);
+            document.removeEventListener('mousemove', observeVisibility, false);
         };
     }, [
         openOn,
@@ -1070,8 +1078,8 @@ offsetX = 0, offsetY = 0, throttleDelay = 200, customScrollListener, closeOnEsc
         blocked,
         disabled,
         active,
-        handleClick,
-        handleVisibility,
+        observeClick,
+        observeVisibility,
     ]);
     return {
         triggerRef,