@folklore/hooks 0.0.59 → 0.0.61

package/dist/cjs.js

@@ -1766,44 +1766,46 @@ function useWindowSize() {
   return size;
 }
 
-const useVisualViewportSize = () => {
+function useVisualViewport() {
   const {
     width: windowWidth,
     height: windowHeight
   } = useWindowSize();
   const [{
     width: viewportWidth,
-    height: viewportHeight
-  }, setViewportSize] = react.useState({
+    height: viewportHeight,
+    offsetTop = 0,
+    offsetLeft = 0,
+    pageLeft = 0,
+    pageTop = 0
+  }, setViewport] = react.useState({
     width: windowWidth,
     height: windowHeight
   });
   react.useEffect(() => {
-    if (!typeof window !== 'undefined' && (window.visualViewport || null) !== null) {
+    if (typeof window === 'undefined' || (window.visualViewport || null) === null) {
       return () => {};
     }
-    function onResize(e) {
-      const viewport = e.target;
-      setViewportSize({
-        width: viewport.width,
-        height: viewport.height
-      });
+    function updateViewport(e) {
+      setViewport(e.target);
     }
-    setViewportSize({
-      width: window.visualViewport.width,
-      height: window.visualViewport.height
-    });
-    window.visualViewport.addEventListener('resize', onResize);
+    setViewport(window.visualViewport);
+    window.visualViewport.addEventListener('resize', updateViewport);
+    window.visualViewport.addEventListener('scroll', updateViewport);
     return () => {
-      window.visualViewport.removeEventListener('resize', onResize);
+      window.visualViewport.removeEventListener('resize', updateViewport);
+      window.visualViewport.addEventListener('scroll', updateViewport);
     };
-  }, [setViewportSize]);
+  }, [setViewport]);
   return {
     width: viewportWidth || windowWidth,
-    height: viewportHeight || windowHeight
+    height: viewportHeight || windowHeight,
+    offsetTop,
+    offsetLeft,
+    pageLeft,
+    pageTop
   };
-};
-var useVisualViewportSize$1 = useVisualViewportSize;
+}
 
 const getWindowScroll = () => ({
   x: typeof window !== 'undefined' ? window.scrollX || 0 : 0,
@@ -1854,7 +1856,8 @@ exports.usePlayerCurrentTime = usePlayerCurrentTime;
 exports.useResizeObserver = useResizeObserver;
 exports.useVideoPlayer = useVideoPlayer;
 exports.useVimeoPlayer = useVimeoPlayer;
-exports.useVisualViewportSize = useVisualViewportSize$1;
+exports.useVisualViewport = useVisualViewport;
+exports.useVisualViewportSize = useVisualViewport;
 exports.useWindowEvent = useWindowEvent;
 exports.useWindowScroll = useWindowScroll;
 exports.useWindowSize = useWindowSize;

package/dist/es.js

@@ -1755,44 +1755,46 @@ function useWindowSize() {
   return size;
 }
 
-const useVisualViewportSize = () => {
+function useVisualViewport() {
   const {
     width: windowWidth,
     height: windowHeight
   } = useWindowSize();
   const [{
     width: viewportWidth,
-    height: viewportHeight
-  }, setViewportSize] = useState({
+    height: viewportHeight,
+    offsetTop = 0,
+    offsetLeft = 0,
+    pageLeft = 0,
+    pageTop = 0
+  }, setViewport] = useState({
     width: windowWidth,
     height: windowHeight
   });
   useEffect(() => {
-    if (!typeof window !== 'undefined' && (window.visualViewport || null) !== null) {
+    if (typeof window === 'undefined' || (window.visualViewport || null) === null) {
       return () => {};
     }
-    function onResize(e) {
-      const viewport = e.target;
-      setViewportSize({
-        width: viewport.width,
-        height: viewport.height
-      });
+    function updateViewport(e) {
+      setViewport(e.target);
     }
-    setViewportSize({
-      width: window.visualViewport.width,
-      height: window.visualViewport.height
-    });
-    window.visualViewport.addEventListener('resize', onResize);
+    setViewport(window.visualViewport);
+    window.visualViewport.addEventListener('resize', updateViewport);
+    window.visualViewport.addEventListener('scroll', updateViewport);
     return () => {
-      window.visualViewport.removeEventListener('resize', onResize);
+      window.visualViewport.removeEventListener('resize', updateViewport);
+      window.visualViewport.addEventListener('scroll', updateViewport);
     };
-  }, [setViewportSize]);
+  }, [setViewport]);
   return {
     width: viewportWidth || windowWidth,
-    height: viewportHeight || windowHeight
+    height: viewportHeight || windowHeight,
+    offsetTop,
+    offsetLeft,
+    pageLeft,
+    pageTop
   };
-};
-var useVisualViewportSize$1 = useVisualViewportSize;
+}
 
 const getWindowScroll = () => ({
   x: typeof window !== 'undefined' ? window.scrollX || 0 : 0,
@@ -1828,4 +1830,4 @@ function useWindowScroll() {
   return scroll;
 }
 
-export { eventsManager$1 as documentEventsManager, getObserver, useCounter, useDailymotionPlayer, useDocumentEvent, useIntersectionObserver, useIsVisible, useItemsPaginated, useKeyboard, useNativeVideoPlayer, useObserver, usePlayerCurrentTime, useResizeObserver, useVideoPlayer, useVimeoPlayer, useVisualViewportSize$1 as useVisualViewportSize, useWindowEvent, useWindowScroll, useWindowSize, useYouTubePlayer, eventsManager as windowEventsManager };
+export { eventsManager$1 as documentEventsManager, getObserver, useCounter, useDailymotionPlayer, useDocumentEvent, useIntersectionObserver, useIsVisible, useItemsPaginated, useKeyboard, useNativeVideoPlayer, useObserver, usePlayerCurrentTime, useResizeObserver, useVideoPlayer, useVimeoPlayer, useVisualViewport, useVisualViewport as useVisualViewportSize, useWindowEvent, useWindowScroll, useWindowSize, useYouTubePlayer, eventsManager as windowEventsManager };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@folklore/hooks",
-    "version": "0.0.59",
+    "version": "0.0.61",
     "description": "React hooks",
     "keywords": [
         "javascript",
@@ -49,7 +49,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "c054f8aebebb312df15dbd87158516bbc750855f",
+    "gitHead": "0a8b9c477678635f7c9c774eac2fea657e723425",
     "dependencies": {
         "@folklore/events": "^0.0.5",
         "@folklore/services": "^0.1.40",