twilio-labs · PixeledCode · Mar 6, 2025 · Mar 5, 2025 · Mar 5, 2025 · Mar 5, 2025
diff --git a/packages/paste-core/components/combobox/__tests__/combobox-customization.spec.tsx b/packages/paste-core/components/combobox/__tests__/combobox-customization.spec.tsx
@@ -24,13 +24,13 @@ const getStyles = (element = "COMBOBOX"): { [key: string]: PasteCustomCSS } => (
 });
 
 const initCustomizationWrapper = (elementName?: string | undefined): RenderOptions["wrapper"] =>
-  (function Wrapper({ children }) {
+  function Wrapper({ children }) {
     return (
       <CustomizationProvider theme={TestTheme} elements={getStyles(elementName)}>
         {children}
       </CustomizationProvider>
     );
-  });
+  };
 
 const ComboboxToTest = ({ element = "COMBOBOX" }): React.ReactElement<any> => (
   <Combobox

diff --git a/packages/paste-libraries/styling/package.json b/packages/paste-libraries/styling/package.json
@@ -24,9 +24,9 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@emotion/cache": "11.11.0",
-    "@emotion/react": "11.11.0",
-    "@emotion/styled": "11.11.0",
+    "@emotion/cache": "11.10.5",
+    "@emotion/react": "11.10.5",
+    "@emotion/styled": "11.10.5",
     "@styled-system/css": "5.1.5",
     "@styled-system/should-forward-prop": "5.1.5",
     "@styled-system/theme-get": "5.1.2",

diff --git a/packages/paste-theme-designer/next-env.d.ts b/packages/paste-theme-designer/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/packages/paste-theme/__tests__/withTheme.spec.tsx b/packages/paste-theme/__tests__/withTheme.spec.tsx
@@ -6,7 +6,9 @@ import { createRoot } from "testing-tools/react-dom-create-root";
 import type { ThemeShape } from "../src";
 import { Theme, withTheme } from "../src";
 
-const MockComponent = ({ theme }: { theme: ThemeShape }): React.ReactElement<any> => <p>{theme.textColors.colorText}</p>;
+const MockComponent = ({ theme }: { theme: ThemeShape }): React.ReactElement<any> => (
+  <p>{theme.textColors.colorText}</p>
+);
 const MockComponentWithTheme = withTheme(MockComponent);
 
 describe("withTheme", () => {

diff --git a/packages/paste-website/package.json b/packages/paste-website/package.json
@@ -184,9 +184,9 @@
     "react-github-button": "^0.1.11",
     "react-hook-form": "^7.30.0",
     "react-hotkeys-hook": "^4.4.1",
+    "react-intersection-observer": "^9.15.1",
     "react-live": "^3.1.1",
     "react-scrollspy": "^3.4.0",
-    "react-visibility-sensor": "5.1.1",
     "remark-gfm": "^3.0.1",
     "rollbar": "^2.26.2",
     "sharp": "^0.32.5",
@@ -201,7 +201,7 @@
     "zustand": "^4.4.7"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "15.2.0",
+    "@next/eslint-plugin-next": "14.2.24",
     "@storybook/react": "7.6.4",
     "@tanstack/eslint-plugin-query": "^5.17.7",
     "@testing-library/react": "^16.2.0",

diff --git a/packages/paste-website/src/assets/illustrations/DoodleArrow.tsx b/packages/paste-website/src/assets/illustrations/DoodleArrow.tsx
@@ -1,29 +1,37 @@
 import { animated, useSpring } from "@twilio-paste/animation-library";
+import { Box } from "@twilio-paste/box";
 import { useTheme } from "@twilio-paste/theme";
-import * as React from "react";
 import type { JSX } from "react";
-import VisibilitySensor from "react-visibility-sensor";
+import * as React from "react";
+import { useInView } from "react-intersection-observer";
 
 const dashArray = 250;
 
 export const DoodleArrow = (): JSX.Element => {
   const [show, setShow] = React.useState(false);
   const theme = useTheme();
 
-  function handleVisibilityChange(isVisible: boolean): void {
-    if (!show) {
-      setShow(isVisible);
+  const { ref, inView } = useInView({
+    triggerOnce: true,
+    threshold: 0.1,
+  });
+
+  React.useEffect(() => {
+    if (inView && !show) {
+      setShow(true);
     }
-  }
+  }, [inView, show]);
 
   const styles = useSpring({
     x: show ? 0 : -1 * dashArray,
     config: { mass: 1, tension: 280, friction: 40 },
   });
 
+  const AnimatedSVG = animated("svg");
+
   return (
-    <VisibilitySensor onChange={handleVisibilityChange} partialVisibility minTopValue={60}>
-      <animated.svg
+    <Box ref={ref}>
+      <AnimatedSVG
         stroke={theme.backgroundColors.colorBackgroundPrimaryStronger}
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -40,7 +48,7 @@ export const DoodleArrow = (): JSX.Element => {
           d="m344.148655 2159.0516-19.1052-24.0516 29.0358 1.512m-12.636 190.8252c69.120001-25.92 101.520001-132.3 0-184.14"
           transform="matrix(-1 0 0 1 408.043 -2133)"
         />
-      </animated.svg>
-    </VisibilitySensor>
+      </AnimatedSVG>
+    </Box>
   );
 };
diff --git a/packages/paste-website/src/assets/illustrations/DoodleBurst.tsx b/packages/paste-website/src/assets/illustrations/DoodleBurst.tsx
@@ -1,29 +1,37 @@
 import { animated, useSpring } from "@twilio-paste/animation-library";
+import { Box } from "@twilio-paste/box";
 import { useTheme } from "@twilio-paste/theme";
-import * as React from "react";
 import type { JSX } from "react";
-import VisibilitySensor from "react-visibility-sensor";
+import * as React from "react";
+import { useInView } from "react-intersection-observer";
 
 const dashArray = 260;
 
 export const DoodleBurst = (): JSX.Element => {
   const [show, setShow] = React.useState(false);
   const theme = useTheme();
 
-  function handleVisibilityChange(isVisible: boolean): void {
-    if (!show) {
-      setShow(isVisible);
+  const { ref, inView } = useInView({
+    triggerOnce: true,
+    threshold: 0.1,
+  });
+
+  React.useEffect(() => {
+    if (inView && !show) {
+      setShow(true);
     }
-  }
+  }, [inView, show]);
 
   const styles = useSpring({
     x: show ? 0 : -1 * dashArray,
     config: { mass: 1, tension: 280, friction: 40 },
   });
 
+  const AnimatedSVG = animated("svg");
+
   return (
-    <VisibilitySensor onChange={handleVisibilityChange}>
-      <animated.svg
+    <Box ref={ref}>
+      <AnimatedSVG
         stroke={theme.borderColors.colorBorderPrimaryStrong}
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -34,7 +42,7 @@ export const DoodleBurst = (): JSX.Element => {
         height="57"
         fill="none"
         viewBox="0 0 62 57"
-        xmlns="http://www.w3.org/2000/svg"
+        xmlns="http:www.w3.org/2000/svg"
       >
         <path
           stroke={theme.borderColors.colorBorderPrimaryStrong}
@@ -43,7 +51,8 @@ export const DoodleBurst = (): JSX.Element => {
           strokeWidth="2"
           d="M41.9 1.811L49.76 31.14M19.856 16.52l19.743 23.629M1.366 38.239L32.938 52.83"
         />
-      </animated.svg>
-    </VisibilitySensor>
+      </AnimatedSVG>
+      //{" "}
+    </Box>
   );
 };
diff --git a/packages/paste-website/src/assets/illustrations/DoodleCloud.tsx b/packages/paste-website/src/assets/illustrations/DoodleCloud.tsx
@@ -1,20 +1,26 @@
 import { animated, useSpring } from "@twilio-paste/animation-library";
+import { Box } from "@twilio-paste/box";
 import { useTheme } from "@twilio-paste/theme";
-import * as React from "react";
 import type { JSX } from "react";
-import VisibilitySensor from "react-visibility-sensor";
+import * as React from "react";
+import { useInView } from "react-intersection-observer";
 
 const dashArray = 160;
 
 export const DoodleCloud = (): JSX.Element => {
   const [show, setShow] = React.useState(false);
   const theme = useTheme();
 
-  function handleVisibilityChange(isVisible: boolean): void {
-    if (!show) {
-      setShow(isVisible);
+  const { ref, inView } = useInView({
+    triggerOnce: true,
+    threshold: 0.1,
+  });
+
+  React.useEffect(() => {
+    if (inView && !show) {
+      setShow(true);
     }
-  }
+  }, [inView, show]);
 
   const styles = useSpring({
     x: show ? 0 : -1 * dashArray,
@@ -24,15 +30,17 @@ export const DoodleCloud = (): JSX.Element => {
     },
   });
 
+  const AnimatedPath = animated("path");
+
   return (
-    <VisibilitySensor onChange={handleVisibilityChange}>
+    <Box ref={ref}>
       <svg fill="none" height="59" width="134" viewBox="0 0 134 59" xmlns="http://www.w3.org/2000/svg">
         <g fill="none" fillRule="evenodd" transform="translate(1 1)">
-          <animated.path
+          <AnimatedPath
             d="m133 58c-.391737-4.2175596-2.177033-7.7268268-5.310932-9.516875-4.495348-2.5756089-10.57049-1.0946338-15.765828 3.2967794 8.431989-19.9609692 5.709092-40.359792-7.346683-47.89988712-14.7254749-8.52526557-36.9967127 2.51765773-49.7506569 24.66145552-1.9281459 3.3507245-3.573605 6.8571723-4.919195 10.4827284-1.1803602-3.3615966-3.4950595-6.2040256-6.5439422-8.0358999-9.742061-5.6405836-24.4803802 1.6612678-32.9187904 16.3164826-1.94330804 3.3539367-3.43748646 6.9499448-4.4439725 10.6952161"
             fill={styles.fill}
           />
-          <animated.path
+          <AnimatedPath
             d="m93 35c-.0360077-3.7872138-1.3322865-6.8784867-3.868832-8.3593844-4.0008604-2.3305931-9.8501183.024277-14.5151215 5.3328503 4.5289739-13.2107406 2.83661-25.68507844-4.9730695-30.24511047-9.6660787-5.64440523-25.049387 2.99011861-34.3553883 19.28808577-.9747677 1.7064203-1.8627802 3.4620438-2.6605721 5.2600193-.1840396-4.9241873-1.9604216-8.9218019-5.3091418-10.8801475-6.9254893-4.0461686-17.93585716 2.1404232-24.59728973 13.8095735-1.05857132 1.8490942-1.96836643 3.7813004-2.72058507 5.7779288"
             stroke={theme.backgroundColors.colorBackgroundPrimaryStrongest}
             strokeLinecap="round"
@@ -43,6 +51,6 @@ export const DoodleCloud = (): JSX.Element => {
           />
         </g>
       </svg>
-    </VisibilitySensor>
+    </Box>
   );
 };
diff --git a/packages/paste-website/src/assets/illustrations/DoodleCurve.tsx b/packages/paste-website/src/assets/illustrations/DoodleCurve.tsx
@@ -1,29 +1,37 @@
 import { animated, useSpring } from "@twilio-paste/animation-library";
+import { Box } from "@twilio-paste/box";
 import { useTheme } from "@twilio-paste/theme";
-import * as React from "react";
 import type { JSX } from "react";
-import VisibilitySensor from "react-visibility-sensor";
+import * as React from "react";
+import { useInView } from "react-intersection-observer";
 
 const dashArray = 50;
 
 export const DoodleCurve = (): JSX.Element => {
   const [show, setShow] = React.useState(false);
   const theme = useTheme();
 
-  function handleVisibilityChange(isVisible: boolean): void {
-    if (!show) {
-      setShow(isVisible);
+  const { ref, inView } = useInView({
+    triggerOnce: true,
+    threshold: 0.1,
+  });
+
+  React.useEffect(() => {
+    if (inView && !show) {
+      setShow(true);
     }
-  }
+  }, [inView, show]);
 
   const styles = useSpring({
     x: show ? 0 : -1 * dashArray,
     config: { mass: 1, tension: 280, friction: 40 },
   });
 
+  const AnimatedSVG = animated("svg");
+
   return (
-    <VisibilitySensor onChange={handleVisibilityChange}>
-      <animated.svg
+    <Box ref={ref}>
+      <AnimatedSVG
         stroke={theme.backgroundColors.colorBackgroundPrimaryStronger}
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -40,7 +48,7 @@ export const DoodleCurve = (): JSX.Element => {
           d="m1335 1226c-.25169 1.35808-1.83458 9.29809-8.94915 13.52449-7.11458 4.22641-16.96983 3.00357-24.05085-3.38112"
           transform="matrix(-.5 -.8660254 .8660254 -.5 -392.924817 1771.854751)"
         />
-      </animated.svg>
-    </VisibilitySensor>
+      </AnimatedSVG>
+    </Box>
   );
 };
diff --git a/packages/paste-website/src/assets/illustrations/DoodleLoopArrow.tsx b/packages/paste-website/src/assets/illustrations/DoodleLoopArrow.tsx
@@ -1,29 +1,37 @@
 import { animated, useSpring } from "@twilio-paste/animation-library";
+import { Box } from "@twilio-paste/box";
 import { useTheme } from "@twilio-paste/theme";
 import * as React from "react";
 import type { JSX } from "react";
-import VisibilitySensor from "react-visibility-sensor";
+import { useInView } from "react-intersection-observer";
 
 const dashArray = 250;
 
 export const DoodleLoopArrow = (): JSX.Element => {
   const [show, setShow] = React.useState(false);
   const theme = useTheme();
 
-  function handleVisibilityChange(isVisible: boolean): void {
-    if (!show) {
-      setShow(isVisible);
+  const { ref, inView } = useInView({
+    triggerOnce: true,
+    threshold: 0.1,
+  });
+
+  React.useEffect(() => {
+    if (inView && !show) {
+      setShow(true);
     }
-  }
+  }, [inView, show]);
 
   const styles = useSpring({
     x: show ? 0 : -1 * dashArray,
     config: { mass: 1, tension: 280, friction: 40 },
   });
 
+  const AnimatedSVG = animated("svg");
+
   return (
-    <VisibilitySensor onChange={handleVisibilityChange} partialVisibility minTopValue={60}>
-      <animated.svg
+    <Box ref={ref}>
+      <AnimatedSVG
         stroke={theme.borderColors.colorBorderInverseStrongest}
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -50,7 +58,7 @@ export const DoodleLoopArrow = (): JSX.Element => {
           strokeWidth="2"
           d="M67.65 30.703l24.992 13.844L81.73 9.203"
         />
-      </animated.svg>
-    </VisibilitySensor>
+      </AnimatedSVG>
+    </Box>
   );
 };