fix: TextFitter visibility when using display: none

package.json

@@ -29,7 +29,7 @@
     "@types/big.js": "^6.1.6",
     "@types/eslint": "^8.21.1",
     "@types/events": "^3.0.0",
-    "@types/node": "^18.14.5",
+    "@types/node": "^18.14.6",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@types/uuid": "^9.0.1",
@@ -46,7 +46,7 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "lerna": "^6.5.1",
-    "nx": "^15.8.3",
+    "nx": "^15.8.5",
     "prettier": "^2.8.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

packages/widget-embedded/package.json

@@ -32,7 +32,7 @@
     "@mui/lab": "^5.0.0-alpha.121",
     "@mui/material": "^5.11.11",
     "@opensea/seaport-js": "^1.0.10",
-    "@tanstack/react-query": "^4.24.10",
+    "@tanstack/react-query": "^4.26.0",
     "bignumber.js": "^9.1.1",
     "ethers": "^5.7.2",
     "events": "^3.3.0",
@@ -45,7 +45,7 @@
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@vitejs/plugin-react": "^3.1.0",
     "buffer": "^6.0.3",
-    "esbuild": "^0.17.10",
+    "esbuild": "^0.17.11",
     "rollup": "^3.18.0",
     "rollup-plugin-polyfill-node": "^0.12.0",
     "typescript": "^4.9.5",

packages/widget/package.json

@@ -58,21 +58,22 @@
     "@mui/icons-material": "^5.11.11",
     "@mui/lab": "^5.0.0-alpha.121",
     "@mui/material": "^5.11.11",
-    "@tanstack/react-query": "^4.24.10",
-    "@tanstack/react-virtual": "^3.0.0-beta.52",
+    "@tanstack/react-query": "^4.26.0",
+    "@tanstack/react-virtual": "^3.0.0-beta.53",
     "big.js": "^6.2.1",
     "i18next": "^22.4.10",
     "i18next-browser-languagedetector": "^7.0.1",
     "microdiff": "^1.3.1",
     "mitt": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.43.3",
+    "react-hook-form": "^7.43.4",
     "react-i18next": "^12.2.0",
+    "react-intersection-observer": "^9.4.3",
     "react-router-dom": "^6.8.2",
     "react-timer-hook": "^3.0.5",
     "uuid": "^9.0.0",
-    "zustand": "^4.3.5"
+    "zustand": "^4.3.6"
   },
   "devDependencies": {
     "cpy-cli": "^4.2.0",

packages/widget/src/components/TextFitter/TextFitter.tsx

@@ -1,6 +1,7 @@
 import { useTheme } from '@mui/material/styles';
 import type { PropsWithChildren } from 'react';
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { useInView } from 'react-intersection-observer';
 import type { TextFitterProps } from './types';
 
 const initialState = {
@@ -25,7 +26,14 @@ export const TextFitter: React.FC<PropsWithChildren<TextFitterProps>> = ({
   const theme = useTheme();
   const textRef = useRef<SVGTextElement>(null);
   const [viewBox, setViewBox] = useState<Partial<DOMRect>>(initialState);
-  // const [textRect, setTextRect] = useState<Partial<DOMRect>>(initialState);
+
+  const [ref] = useInView({
+    onChange(inView) {
+      if (inView) {
+        calculateBox();
+      }
+    },
+  });
 
   const calculateBox = useCallback(() => {
     if (!textRef.current) {
@@ -40,7 +48,6 @@ export const TextFitter: React.FC<PropsWithChildren<TextFitterProps>> = ({
       box.height -= box.height * cropBottom;
     }
     setViewBox(box);
-    // setTextRect(textRef.current.getBoundingClientRect());
     onFit?.();
   }, [cropBottom, cropTop, onFit]);
 
@@ -69,6 +76,7 @@ export const TextFitter: React.FC<PropsWithChildren<TextFitterProps>> = ({
       // }
       preserveAspectRatio={preserveAspectRatio}
       fill={theme.palette.text.primary}
+      ref={ref}
     >
       <text x={0} y={0} style={textStyle} ref={textRef}>
         {children}