@snack-uikit/popover-private - npm Package Compare versions

Comparing version 0.13.3 to 0.13.4-preview-d4831186.0

dist/components/PopoverPrivate/hooks.js

@@ -1,9 +0,12 @@
-import { useMemo } from 'react';
+import { useEffect, useState } from 'react';
 export function useOffset({ triggerClassName, offsetProp }) {
-    const elem = document.querySelector('.' + String(triggerClassName).split(/\s+/g).map(CSS.escape).join('.'));
-    const styles = elem ? getComputedStyle(elem) : null;
-    const rawOffset = styles ? styles.getPropertyValue('--offset') : null;
-    return useMemo(() => {
+    const [offset, setOffset] = useState(0);
+    // TODO: change to useLayoutEffect when wrapper for browser/server check will be ready
+    useEffect(() => {
+        const elem = document.querySelector('.' + String(triggerClassName).split(/\s+/g).map(CSS.escape).join('.'));
+        const styles = elem ? getComputedStyle(elem) : null;
+        const rawOffset = styles ? styles.getPropertyValue('--offset') : null;
         if (offsetProp !== undefined) {
-            return offsetProp;
+            setOffset(offsetProp);
+            return;
         }
@@ -17,6 +20,8 @@ const tempSpan = document.createElement('span');
         if (Number.isNaN(num) || num < 1) {
-            return 0;
+            setOffset(0);
+            return;
         }
-        return num;
-    }, [offsetProp, rawOffset]);
+        setOffset(num);
+    }, [offsetProp, triggerClassName]);
+    return offset;
 }

package.json

@@ -7,3 +7,3 @@ {
   "title": "Popover Private",
-  "version": "0.13.3",
+  "version": "0.13.4-preview-d4831186.0",
   "sideEffects": [
@@ -45,3 +45,3 @@ "*.css",
   },
-  "gitHead": "7d61ee30138ad0ca92e405de9ae586c396591fdd"
+  "gitHead": "43c4fc378d1797b581eae0b928ea73b00e5fc5ce"
 }

src/components/PopoverPrivate/hooks.ts

@@ -1,2 +0,2 @@
-import { useMemo } from 'react';
+import { useEffect, useState } from 'react';
 
@@ -9,11 +9,13 @@ type UseOffsetProps = {
 export function useOffset({ triggerClassName, offsetProp }: UseOffsetProps) {
-  const elem = document.querySelector('.' + String(triggerClassName).split(/\s+/g).map(CSS.escape).join('.'));
+  const [offset, setOffset] = useState(0);
 
-  const styles = elem ? getComputedStyle(elem) : null;
+  // TODO: change to useLayoutEffect when wrapper for browser/server check will be ready
+  useEffect(() => {
+    const elem = document.querySelector('.' + String(triggerClassName).split(/\s+/g).map(CSS.escape).join('.'));
+    const styles = elem ? getComputedStyle(elem) : null;
+    const rawOffset = styles ? styles.getPropertyValue('--offset') : null;
 
-  const rawOffset = styles ? styles.getPropertyValue('--offset') : null;
-
-  return useMemo(() => {
     if (offsetProp !== undefined) {
-      return offsetProp;
+      setOffset(offsetProp);
+      return;
     }
@@ -30,7 +32,10 @@
     if (Number.isNaN(num) || num < 1) {
-      return 0;
+      setOffset(0);
+      return;
     }
 
-    return num;
-  }, [offsetProp, rawOffset]);
+    setOffset(num);
+  }, [offsetProp, triggerClassName]);
+
+  return offset;
 }

No alert changes

Improved metrics

Total package byte prevSize

71508

increased by0.65%

Lines of code

993

increased by1.02%

No dependency changes