Merge branch 'master' into shave-color-fix

package.json

@@ -75,7 +75,6 @@
     "zustand": "^4.5.2"
   },
   "dependencies": {
-    "react-intersection-observer": "^9.8.2",
     "svg-path-bbox": "1.2.5"
   },
   "peerDependencies": {

src/Face.tsx

@@ -1,9 +1,38 @@
-import { forwardRef, useLayoutEffect, useRef, type CSSProperties } from "react";
+import {
+  forwardRef,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+} from "react";
 import { FaceConfig, Overrides } from "./types";
-import { useInView } from "react-intersection-observer";
 import { display } from "./display";
 import { deepCopy } from "./utils";
 
+const useIntersectionObserver = () => {
+  const [ref, setRef] = useState<HTMLElement | undefined>();
+  const [entry, setEntry] = useState<IntersectionObserverEntry | undefined>();
+
+  useEffect(() => {
+    if (!ref) {
+      return;
+    }
+
+    const observer = new IntersectionObserver(([entry]) => {
+      setEntry(entry);
+    });
+
+    observer.observe(ref);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref]);
+
+  return [setRef, entry] as const;
+};
+
 export const Face = forwardRef<
   HTMLDivElement,
   {
@@ -15,12 +44,16 @@ export const Face = forwardRef<
     style?: CSSProperties;
   }
 >(({ className, face, ignoreDisplayErrors, lazy, overrides, style }, ref) => {
-  const [inViewRef, inView] = useInView();
+  const [intersectionObserverRef, intersectionObserverEntry] =
+    useIntersectionObserver();
 
   const faceRef = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {
-    if ((inView || !lazy) && faceRef.current) {
+    if (
+      (intersectionObserverEntry?.isIntersecting || !lazy) &&
+      faceRef.current
+    ) {
       try {
         if (overrides) {
           // Only apply overrides if face is in viewport
@@ -34,7 +67,7 @@ export const Face = forwardRef<
         }
       }
     }
-  }, [inView, face, overrides]);
+  }, [intersectionObserverEntry, face, overrides]);
 
   return (
     <div
@@ -46,7 +79,7 @@ export const Face = forwardRef<
         }
         // @ts-expect-error
         faceRef.current = node;
-        inViewRef(node);
+        intersectionObserverRef(node);
       }}
       style={style}
     />

yarn.lock

@@ -5429,16 +5429,6 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-intersection-observer@^9.8.2:
-  version "9.8.2"
-  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.8.2.tgz#a45db2441909a4d2f310de381686e151f016691d"
-  integrity sha512-901naEiiZmse3p+AmtbQ3NL9xx+gQ8TXLiGDc+8GiE3JKJkNV3vP737aGuWTAXBA+1QqxPrDDE+fIEgYpGDlrQ==
-
-react-is@^16.13.1, react-is@^16.3.2:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
-  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
-
 react-is@^18.0.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"