@mediamonks/react-kit 1.0.1 → 1.0.3

package/dist/gsap/hooks/useFlip/useFlip.js

@@ -2,7 +2,9 @@ import gsap from 'gsap';
 import Flip from 'gsap/Flip';
 import { useEffect, useRef } from 'react';
 import { unref } from '../../../utils/unref/unref.js';
-gsap.registerPlugin(Flip);
+if (typeof window !== 'undefined') {
+    gsap.registerPlugin(Flip);
+}
 export function useFlip(ref, flipStateVariables = {}) {
     const flipStateRef = useRef();
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition

package/dist/hooks/useContentRect/useContentRect.js

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useRef, useCallback } from 'react';
 import { useMount } from '../../lifecycle/hooks/useMount/useMount.js';
 import { unref } from '../../utils/unref/unref.js';
 import { useResizeObserver } from '../useResizeObserver/useResizeObserver.js';
@@ -8,9 +8,10 @@ import { useResizeObserver } from '../useResizeObserver/useResizeObserver.js';
  */
 export function useContentRect(target) {
     const contentRectRef = useRef(null);
-    useResizeObserver(target, (entries) => {
+    const onResize = useCallback((entries) => {
         contentRectRef.current = entries.at(0)?.contentRect ?? null;
-    });
+    }, []);
+    useResizeObserver(target, onResize);
     useMount(() => {
         contentRectRef.current = unref(target)?.getBoundingClientRect() ?? null;
     });

package/dist/hooks/useContentRectState/useContentRectState.js

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { useMount } from '../../index.js';
 import { unref } from '../../utils/unref/unref.js';
 import { useResizeObserver } from '../useResizeObserver/useResizeObserver.js';
@@ -9,12 +9,13 @@ import { useResizeObserver } from '../useResizeObserver/useResizeObserver.js';
 export function useContentRectState(target) {
     const [contentRect, setContentRect] = useState(null);
     const rafRef = useRef(0);
-    useResizeObserver(target, (entries) => {
+    const onResize = useCallback((entries) => {
         cancelAnimationFrame(rafRef.current);
         rafRef.current = requestAnimationFrame(() => {
             setContentRect(entries.at(0)?.contentRect ?? null);
         });
-    });
+    }, []);
+    useResizeObserver(target, onResize);
     useMount(() => {
         setContentRect(unref(target)?.getBoundingClientRect() ?? null);
     });

package/dist/hooks/useResizeObserver/useResizeObserver.js

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { unref } from '../../utils/unref/unref.js';
+import { useRefValue } from '../useRefValue/useRefValue.js';
 /**
  * This hook allows you to add a ResizeObserver for an element and remove it
  * when the component unmounts.
@@ -9,16 +10,19 @@ import { unref } from '../../utils/unref/unref.js';
  * @param options - The ResizeObserverOptions for the observed element
  */
 export function useResizeObserver(target, callback, options) {
+    const callbackRef = useRefValue(callback);
     useEffect(() => {
         const element = unref(target);
         if (element === null || callback === undefined) {
             return;
         }
-        const resizeObserver = new ResizeObserver(callback);
+        const resizeObserver = new ResizeObserver((..._arguments) => {
+            callbackRef.current?.(..._arguments);
+        });
         resizeObserver.observe(element, options);
         return () => {
             resizeObserver.disconnect();
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [target, callback, ...Object.values(options ?? {})]);
+    }, [target, ...Object.values(options ?? {})]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mediamonks/react-kit",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "A collection of React hooks, components, utilities that we use at Media.Monks",
   "keywords": [
     "react",