fix: handle React Compiler errors (#6750)

sanity-io · May 23, 2024 · 403f485 · 403f485
1 parent 79a79a3
commit 403f485
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
     "check:format": "prettier . --check",
     "check:lint": "turbo run lint --continue -- --quiet",
     "check:react-exhaustive-deps": "turbo run lint --continue -- --quiet --rule 'react-hooks/exhaustive-deps: [error, {additionalHooks: \"(useAsync|useMemoObservable|useObservableCallback)\"}]'",
-    "check:react-compiler": "eslint --no-inline-config --no-eslintrc --ext .cjs,.mjs,.js,.jsx,.ts,.tsx --parser @typescript-eslint/parser --plugin react-compiler --rule 'react-compiler/react-compiler: [warn]' --ignore-path .eslintignore.react-compiler --max-warnings 46 .",
+    "check:react-compiler": "eslint --no-inline-config --no-eslintrc --ext .cjs,.mjs,.js,.jsx,.ts,.tsx --parser @typescript-eslint/parser --plugin react-compiler --rule 'react-compiler/react-compiler: [warn]' --ignore-path .eslintignore.react-compiler --max-warnings 42 .",
     "check:test": "run-s test -- --silent",
     "check:types": "tsc && turbo run check:types --filter='./packages/*' --filter='./packages/@sanity/*'",
     "chore:format:fix": "prettier --cache --write .",

diff --git a/packages/sanity/src/core/comments/components/reactions/CommentReactionsMenuButton.tsx b/packages/sanity/src/core/comments/components/reactions/CommentReactionsMenuButton.tsx
@@ -50,8 +50,6 @@ export function CommentReactionsMenuButton(props: CommentReactionsMenuButtonProp
     buttonElement?.focus()
   }, [buttonElement, onMenuClose, open])
 
-  const handleClickOutside = useCallback(handleClose, [handleClose])
-
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
       const {key, shiftKey} = event
@@ -63,7 +61,7 @@ export function CommentReactionsMenuButton(props: CommentReactionsMenuButtonProp
     [handleClose],
   )
 
-  useClickOutside(handleClickOutside, [popoverElement, buttonElement])
+  useClickOutside(handleClick, [popoverElement, buttonElement])
 
   const handleSelect = useCallback(
     (option: CommentReactionOption) => {

diff --git a/packages/sanity/src/core/comments/plugin/inspector/CommentsInspector.tsx b/packages/sanity/src/core/comments/plugin/inspector/CommentsInspector.tsx
@@ -327,24 +327,21 @@ function CommentsInspectorInner(
 
   useClickOutside(handleClickOutside, [rootRef.current])
 
+  const [loggedTelemetry, setLoggedTelemetry] = useState(false)
   useEffect(() => {
-    if (mode === 'upsell') {
-      if (selectedPath?.origin === 'form') {
-        upsellTelemetryLogs.panelViewed('field_action')
-      } else if (commentIdParamRef.current) {
-        upsellTelemetryLogs.panelViewed('link')
-      } else {
-        upsellTelemetryLogs.panelViewed('document_action')
-      }
+    if (loggedTelemetry || mode !== 'upsell') return undefined
+    setLoggedTelemetry(true)
+    if (selectedPath?.origin === 'form') {
+      upsellTelemetryLogs.panelViewed('field_action')
+    } else if (commentIdParamRef.current) {
+      upsellTelemetryLogs.panelViewed('link')
+    } else {
+      upsellTelemetryLogs.panelViewed('document_action')
     }
     return () => {
-      if (mode === 'upsell') {
-        upsellTelemetryLogs.panelDismissed()
-      }
+      upsellTelemetryLogs.panelDismissed()
     }
-    // We want to run this effect only on mount and unmount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [loggedTelemetry, mode, selectedPath?.origin, upsellTelemetryLogs])
 
   // Handle scroll to comment from URL param
   useEffect(() => {

diff --git a/packages/sanity/src/core/form/inputs/PortableText/Compositor.tsx b/packages/sanity/src/core/form/inputs/PortableText/Compositor.tsx
@@ -375,7 +375,7 @@ export function Compositor(props: Omit<InputProps, 'schemaType' | 'arrayFunction
   // prop to the Editable PTE component (initialSelection) so that
   // selections can be set initially even though the editor value
   // might not be fully propagated or rendered yet.
-  const initialSelection: EditorSelection | undefined = useMemo(() => {
+  const [initialSelection] = useState<EditorSelection | undefined>(() => {
     // We can be sure that the focusPath is pointing directly to
     // editor content when hasFocusWithin is true.
     if (hasFocusWithin) {
@@ -391,8 +391,7 @@ export function Compositor(props: Omit<InputProps, 'schemaType' | 'arrayFunction
       }
     }
     return undefined
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []) // Only at mount time!
+  })
 
   const editorNode = useMemo(
     () => (

diff --git a/packages/sanity/src/structure/panes/document/documentPanel/documentViews/FormView.tsx b/packages/sanity/src/structure/panes/document/documentPanel/documentViews/FormView.tsx
@@ -114,15 +114,16 @@ export const FormView = forwardRef<HTMLDivElement, FormViewProps>(function FormV
 
   const [formRef, setFormRef] = useState<null | HTMLDivElement>(null)
 
+  // We only want to run it on first mount
+  const [focusedFirstDescendant, setFocusedFirstDescendant] = useState(false)
   useEffect(() => {
     // Only focus on the first descendant if there is not already a focus path
     // This is to avoid stealing focus from intent links
-    if (ready && !formState?.focusPath.length && formRef) {
+    if (!focusedFirstDescendant && ready && !formState?.focusPath.length && formRef) {
+      setFocusedFirstDescendant(true)
       focusFirstDescendant(formRef)
     }
-    // We only want to run it on first mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ready])
+  }, [focusedFirstDescendant, formRef, formState?.focusPath.length, ready])
 
   const setRef = useCallback(
     (node: HTMLDivElement | null) => {