[field] Fix nesting of fields in change list

packages/@sanity/field/src/utils/useHover.ts

@@ -0,0 +1,27 @@
+import {useState, useRef, useEffect} from 'react'
+
+export function useHover<T extends HTMLElement>(): [React.MutableRefObject<T | null>, boolean] {
+  const [value, setValue] = useState(false)
+
+  const ref = useRef<T | null>(null)
+
+  const handleMouseOver = () => setValue(true)
+  const handleMouseOut = () => setValue(false)
+
+  useEffect(() => {
+    const node = ref.current
+    if (!node) {
+      return () => undefined
+    }
+
+    node.addEventListener('mouseover', handleMouseOver)
+    node.addEventListener('mouseout', handleMouseOut)
+
+    return () => {
+      node.removeEventListener('mouseover', handleMouseOver)
+      node.removeEventListener('mouseout', handleMouseOut)
+    }
+  }, [ref.current])
+
+  return [ref, value]
+}