chore: resolve react-hooks/exhaustive-deps warnings (#1991)

cypress/component/Autocomplete.spec.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react'
+import React, { useCallback, useState } from 'react'
 import { mount } from '@cypress/react'
 import debounce from 'debounce'
 import {
@@ -67,9 +67,10 @@ export const DynamicOptionsAutocompleteExample = () => {
   const [options, setOptions] = useState<typeof OPTIONS>([])
   const [loading, setLoading] = useState(false)
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const handleChangeDebounced = useCallback(
-    debounce(async (inputValue: string) => {
-      const newOptions = await loadOptions(inputValue.trim().toLowerCase())
+    debounce(async (newValue: string) => {
+      const newOptions = await loadOptions(newValue.trim().toLowerCase())
 
       setLoading(false)
       setOptions(newOptions)

package.json

@@ -57,7 +57,7 @@
     "@svgr/cli": "^5.5.0",
     "@testing-library/react": "^11.2.5",
     "@testing-library/react-hooks": "^5.0.3",
-    "@toptal/browserslist-config": "^0.1.0-alpha.2",
+    "@toptal/browserslist-config": "^1.1.0",
     "@toptal/davinci": "^1.0.63",
     "@types/debounce": "^1.2.0",
     "@types/esprima": "^4.0.2",

packages/picasso-forms/src/FieldWrapper/FieldWrapper.tsx

@@ -184,7 +184,7 @@ const FieldWrapper = <
         clearValidators(name)
       }
     }
-  }, [])
+  }, [clearValidators, formConfig.validateOnSubmit, name])
 
   const { meta, input } = useField<TInputValue>(name, {
     validate: formConfig.validateOnSubmit ? undefined : validators,

packages/picasso-forms/src/Form/Form.tsx

@@ -1,9 +1,9 @@
-import React, { useCallback, useMemo, ReactNode, useRef } from 'react'
+import React, { useMemo, ReactNode, useRef } from 'react'
 import {
   Form as FinalForm,
   FormProps as FinalFormProps
 } from 'react-final-form'
-import { FormApi, SubmissionErrors, getIn, setIn } from 'final-form'
+import { FormApi, SubmissionErrors, getIn, setIn, AnyObject } from 'final-form'
 import { Form as PicassoForm, Container } from '@toptal/picasso'
 import { useNotifications } from '@toptal/picasso/utils'
 
@@ -31,8 +31,6 @@ import {
   createFormContext
 } from './FormContext'
 
-type AnyObject = Record<string, any>
-
 export type Props<T = AnyObject> = FinalFormProps<T> & {
   autoComplete?: HTMLFormElement['autocomplete']
   successSubmitMessage?: ReactNode
@@ -42,10 +40,10 @@ export type Props<T = AnyObject> = FinalFormProps<T> & {
 
 const getValidationErrors = (
   validators: Validators,
-  formValues: Record<string, any>,
-  form: FormApi<Record<string, any>>
-) => {
-  let errors: Record<string, any> | undefined
+  formValues: any,
+  form: FormApi<any>
+): SubmissionErrors | void => {
+  let errors: SubmissionErrors
 
   Object.entries(validators).forEach(([key, validator]) => {
     const fieldValue = getIn(formValues, key)
@@ -57,15 +55,15 @@ const getValidationErrors = (
 
     const error = validator(fieldValue, formValues, fieldMetaState)
 
-    if (error) {
-      errors = setIn(errors || {}, key, error)
+    if (errors && error) {
+      errors = setIn(errors, key, error)
     }
   })
 
   return errors
 }
 
-export const Form = <T extends any = Record<string, any>>(props: Props<T>) => {
+export const Form = <T extends any = AnyObject>(props: Props<T>) => {
   const {
     children,
     autoComplete,
@@ -105,36 +103,31 @@ export const Form = <T extends any = Record<string, any>>(props: Props<T>) => {
     showError(failedSubmitMessage, undefined, { persist: true })
   }
 
-  const handleSubmit = useCallback(
-    async (values, form, callback) => {
-      const validationErrors = getValidationErrors(
-        validationObject.current.getValidators(),
-        values,
-        form
-      )
-
-      if (validationErrors) {
-        return validationErrors
-      }
-
-      const submissionErrors = await onSubmit(values, form, callback)
-
-      if (!submissionErrors) {
-        showSuccessNotification()
-      } else {
-        showErrorNotification(submissionErrors)
-      }
-
-      return submissionErrors
-    },
-    [
-      failedSubmitMessage,
-      onSubmit,
-      showError,
-      showSuccess,
-      successSubmitMessage
-    ]
-  )
+  const handleSubmit = async (
+    values: T,
+    form: FormApi<T>,
+    callback?: (errors?: SubmissionErrors) => void
+  ) => {
+    const validationErrors = getValidationErrors(
+      validationObject.current.getValidators(),
+      values,
+      form
+    )
+
+    if (validationErrors) {
+      return validationErrors
+    }
+
+    const submissionErrors = await onSubmit(values, form, callback)
+
+    if (!submissionErrors) {
+      showSuccessNotification()
+    } else {
+      showErrorNotification(submissionErrors)
+    }
+
+    return submissionErrors
+  }
 
   return (
     <FormContext.Provider value={validationObject}>

packages/picasso-lab/src/TreeView/PointNode/PointNode.tsx

@@ -27,7 +27,7 @@ export const PointNode = forwardRef<any, Props>(
       const xPosition = node.x - nodeWidth / 2
 
       return `translate(${xPosition},${node.y})`
-    }, [node.x, node.y])
+    }, [node.x, node.y, nodeWidth])
 
     useLayoutEffect(() => {
       if (nodeRef.current) {
@@ -41,7 +41,7 @@ export const PointNode = forwardRef<any, Props>(
           })
         }
       }
-    }, [nodeRef.current, dimensions])
+    }, [dimensions, node.ref])
 
     return (
       <g id={node.id} transform={transform} ref={ref}>

packages/picasso-lab/src/TreeView/TreeView.tsx

@@ -51,17 +51,20 @@ export const TreeView = (props: Props) => {
   const classes = useStyles()
   const rootRef = createRef<SVGSVGElement>()
   const { nodes, links, selectedNode } = useTree({ data })
+
   const center = useMemo<{ x: number; y: number } | undefined>(() => {
     if (!selectedNode) {
       return undefined
     }
-    const { x: xPosition, y: yPosition, data } = selectedNode
+
+    const { x: xPosition, y: yPosition, data: nodeData } = selectedNode
 
     return {
-      x: xPosition + (data.selectedOffset?.x || 0),
-      y: yPosition + (data.selectedOffset?.y || 0)
+      x: xPosition + (nodeData.selectedOffset?.x || 0),
+      y: yPosition + (nodeData.selectedOffset?.y || 0)
     }
-  }, [selectedNode, selectedNode?.data])
+  }, [selectedNode])
+
   const { handleZoom, zoom } = useZoom<SVGSVGElement>({
     rootRef,
     scaleExtent,
@@ -81,7 +84,7 @@ export const TreeView = (props: Props) => {
       zoom
     })
     setInitialized(true)
-  }, [rootRef, initialized, zoom])
+  }, [rootRef, initialized, zoom, updateState])
 
   return (
     <div className={classes.root}>

packages/picasso-lab/src/TreeView/useNodes.ts

@@ -65,7 +65,7 @@ export const useNodes = (
   const [initialized, setInitializedState] = useState<boolean>(false)
   const initialNodes = useMemo(() => {
     return getDynamicNodes(rootNode.descendants())
-  }, [])
+  }, [rootNode])
   const dynamicNodes = useMemo(() => {
     const latestNodes = rootNode.descendants()
 
@@ -85,9 +85,10 @@ export const useNodes = (
     })
   }, [rootNode, initialNodes])
 
-  // we have to render nodes twice: first for the initial showing data, and the second one — with the correct positions.
   const nodes = useMemo<DynamicPointNode[]>(() => {
     return updateNodesYPosition(dynamicNodes)
+    // we have to render nodes twice: first for the initial showing data, and the second one — with the correct positions.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dynamicNodes, initialized])
 
   useLayoutEffect(() => {

packages/picasso-lab/src/TreeView/useTree.ts

@@ -60,7 +60,7 @@ export const useTree = ({
       leaves,
       nodeWidth: fullNodeWidth
     })
-  }, [data])
+  }, [data, fullNodeWidth])
 
   const nodes = useNodes(rootNode)
 

packages/picasso-lab/src/TreeView/useZoom.ts

@@ -63,7 +63,7 @@ export const useZoom = <ZoomRefElement extends ZoomedElementBaseType>({
         .duration(750)
         .call(zoom.translateTo, center.x, center.y)
     }
-  }, [rootRef.current, zoom, initialized, center])
+  }, [zoom, initialized, center, rootRef, initialScale])
 
   return {
     zoom,

packages/picasso/src/Autocomplete/story/DynamicOptions.example.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react'
+import React, { useCallback, useState } from 'react'
 import debounce from 'debounce'
 import { Autocomplete, AutocompleteItem } from '@toptal/picasso'
 import { isSubstring } from '@toptal/picasso/utils'
@@ -38,6 +38,7 @@ const Example = () => {
   const [options, setOptions] = useState<AutocompleteItem[] | null>()
   const [loading, setLoading] = useState(false)
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const handleChangeDebounced = useCallback(
     debounce(async (inputValue: string) => {
       const newOptions = await loadOptions(inputValue.trim().toLowerCase())

packages/picasso/src/Modal/Modal.tsx

@@ -112,10 +112,7 @@ const generateKey = (() => {
 })()
 
 // eslint-disable-next-line react/display-name
-export const Modal = forwardRef<HTMLElement, Props>(function Modal(
-  props,
-  ref
-) {
+export const Modal = forwardRef<HTMLElement, Props>(function Modal(props, ref) {
   const {
     children,
     open,
@@ -175,23 +172,24 @@ export const Modal = forwardRef<HTMLElement, Props>(function Modal(
     const resetBodyOverflow = () => {
       document.body.style.overflow = bodyOverflow.current
     }
+    const currentModal = modalId.current
 
     if (open) {
       // TODO: to be improved as part of https://toptal-core.atlassian.net/browse/FX-1069
       bodyOverflow.current = document.body.style.overflow
       document.body.style.overflow = 'hidden'
 
-      defaultManager.add(modalId.current)
+      defaultManager.add(currentModal)
     } else {
       resetBodyOverflow()
 
-      defaultManager.remove(modalId.current)
+      defaultManager.remove(currentModal)
     }
 
     return () => {
       resetBodyOverflow()
 
-      defaultManager.remove(modalId.current)
+      defaultManager.remove(currentModal)
     }
   }, [open])
 

packages/picasso/src/Select/hooks/use-select-props/use-enter-or-space-keydown-handler/use-enter-or-space-keydown-handler.ts

@@ -43,11 +43,12 @@ const useEnterOrSpaceKeyDownHandler = <
     },
     [
       canOpen,
-      open,
       filteredOptions,
       highlightedIndex,
       closeOnEnter,
-      handleSelect
+      handleSelect,
+      open,
+      close
     ]
   )
 

packages/picasso/src/SidebarItem/SidebarItem.tsx

@@ -57,7 +57,7 @@ const useStyles = makeStyles<Theme>(styles, {
 })
 
 export const SidebarItem: OverridableComponent<Props> = memo(
-  forwardRef<HTMLElement, Props>(function SidebarItem(props, ref) {
+  forwardRef<HTMLElement, Props>(function SidebarItem (props, ref) {
     const {
       as,
       children,
@@ -91,7 +91,7 @@ export const SidebarItem: OverridableComponent<Props> = memo(
           {menu}
         </SubMenuContext.Provider>
       ),
-      [menu]
+      [index, menu]
     )
 
     const titleCase = useTitleCase(propsTitleCase)

packages/picasso/src/utils/use-width-of.ts

@@ -8,14 +8,16 @@ export interface ReferenceObject {
 const useWidthOf = <T extends ReferenceObject>(element: T | null) => {
   const [menuWidth, setMenuWidth] = useState<string | undefined>()
 
+  const offsetParent = element?.offsetParent
+
   useLayoutEffect(() => {
     if (!element) {
       return
     }
     const { width } = element.getBoundingClientRect()
 
     setMenuWidth(`${width}px`)
-  }, [element, element?.offsetParent])
+  }, [element, offsetParent])
 
   return menuWidth
 }

packages/shared/src/Favicon/Favicon.tsx

@@ -45,7 +45,7 @@ export const Favicon = ({ environment }: Props) => {
     }
 
     loadIcons()
-  }, [resolvedEnvironment])
+  }, [resolvedEnvironment, setIcons])
 
   if (resolvedEnvironment === 'test') {
     // do not load favicons in tests (e.g. in e2e)

packages/shared/src/Picasso/config/breakpoints.ts

@@ -184,6 +184,7 @@ export const useScreens = <T = unknown>() => {
 
       return defaultValue
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [screenKey]
   )
 }