chore: fix linter warnings and deprecations

Author: stipsan

package-lock.json

@@ -62,7 +62,7 @@
     "iso-639-1": "^3.1.2",
     "jsonwebtoken-esm": "^1.0.5",
     "lodash": "^4.17.21",
-    "react-rx": "^4.0.0",
+    "react-rx": "^4.1.5",
     "rxjs": "^7.8.1",
     "scroll-into-view-if-needed": "^3.1.0",
     "suspend-react": "^0.1.3",
@@ -88,7 +88,7 @@
     "eslint-config-sanity": "^7.1.3",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",

package.json

@@ -1,5 +1,5 @@
 import {Box, Dialog, Text} from '@sanity/ui'
-import React, {useId} from 'react'
+import {useId} from 'react'
 
 interface Props {
   error: Error

src/components/InputError.tsx

@@ -1,4 +1,4 @@
-import React, {useId, useMemo} from 'react'
+import {useId, useMemo} from 'react'
 
 // Mapping ids to ensure filter refs are unique, otherwise all Logo instances are hidden if the first SVG is hidden, due to how SVGs deal with relative links and ids
 const ids = [

src/components/MuxLogo.tsx

@@ -1,6 +1,6 @@
 import {PlugIcon} from '@sanity/icons'
 import {Button, Card, Flex, Grid, Heading, Inline} from '@sanity/ui'
-import React, {useCallback} from 'react'
+import {useCallback} from 'react'
 
 import type {SetDialogState} from '../hooks/useDialogState'
 import MuxLogo from './MuxLogo'

src/components/Onboard.tsx

@@ -1,6 +1,5 @@
 import {
   EllipsisHorizontalIcon,
-  EllipsisVerticalIcon,
   LockIcon,
   PlugIcon,
   ResetIcon,
@@ -19,9 +18,9 @@ import {
   Popover,
   Text,
   Tooltip,
-  useClickOutside,
+  useClickOutsideEvent,
 } from '@sanity/ui'
-import React, {memo, useCallback, useEffect, useMemo, useState} from 'react'
+import {memo, useCallback, useEffect, useMemo, useState} from 'react'
 import {PatchEvent, unset} from 'sanity'
 import {styled} from 'styled-components'
 
@@ -65,9 +64,9 @@ function PlayerActionsMenu(
     }
   }, [dialogState, open])
 
-  useClickOutside(
-    useCallback(() => setOpen(false), []),
-    [menuElement]
+  useClickOutsideEvent(
+    () => setOpen(false),
+    () => [menuElement]
   )
 
   return (

src/components/PlayerActionsMenu.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import {useCallback} from 'react'
 import {PatchEvent, set, setIfMissing, unset} from 'sanity'
 
 import type {SetDialogState} from '../hooks/useDialogState'

src/components/SelectAsset.tsx

@@ -1,6 +1,6 @@
 import {SortIcon} from '@sanity/icons'
 import {Button, Menu, MenuButton, MenuItem, PopoverProps} from '@sanity/ui'
-import React, {useId} from 'react'
+import {useId} from 'react'
 
 import {ASSET_SORT_OPTIONS, SortOption} from '../hooks/useAssets'
 

src/components/SelectSortOptions.tsx

@@ -1,8 +1,7 @@
 import {PlugIcon, SearchIcon, UploadIcon} from '@sanity/icons'
 import {DocumentVideoIcon} from '@sanity/icons'
-import {Box, Button, Card, Flex, Inline, Text} from '@sanity/ui'
-import React, {useCallback} from 'react'
-import {styled} from 'styled-components'
+import {Button, Card, Flex, Inline, Text} from '@sanity/ui'
+import {useCallback} from 'react'
 
 import type {SetDialogState} from '../hooks/useDialogState'
 import {FileInputButton, type FileInputButtonProps} from './FileInputButton'

src/components/UploadPlaceholder.tsx

@@ -1,6 +1,6 @@
 import {ErrorOutlineIcon} from '@sanity/icons'
 import {Box, Card, CardTone, Spinner, Stack, Text} from '@sanity/ui'
-import React, {useMemo, useState} from 'react'
+import {useMemo, useState} from 'react'
 import {styled} from 'styled-components'
 
 import {useClient} from '../hooks/useClient'
@@ -46,7 +46,7 @@ export default function VideoThumbnail({
       if (status !== 'error') setStatus('error')
       return undefined
     }
-  }, [asset, client, width, status, setStatus])
+  }, [asset, client, posterWidth, status])
 
   function handleLoad() {
     setStatus('loaded')