@sanity/ui 2.16.21 → 2.16.23

package/src/core/components/menu/useMenuController.ts

@@ -23,15 +23,16 @@ export function useMenuController(props: {
   onKeyDown?: React.KeyboardEventHandler
   originElement?: HTMLElement | null
   shouldFocus: 'first' | 'last' | null
+  // oxlint-disable-next-line no-deprecated
   rootElementRef: React.MutableRefObject<HTMLDivElement | null>
 }): MenuController {
   const {onKeyDown, originElement, shouldFocus, rootElementRef} = props
   const elementsRef = useRef<HTMLElement[]>([])
   const [activeIndex, _setActiveIndex] = useState(-1)
   const activeIndexRef = useRef(activeIndex)
-  // eslint-disable-next-line react-hooks/refs
+  // oxlint-disable-next-line react-compiler
   const activeElement = useMemo(() => elementsRef.current[activeIndex] || null, [activeIndex])
-  // eslint-disable-next-line react-hooks/refs
+  // oxlint-disable-next-line react-compiler
   const mounted = Boolean(rootElementRef.current)
 
   const setActiveIndex = useCallback((nextActiveIndex: number) => {
@@ -219,12 +220,13 @@ export function useMenuController(props: {
       element?.focus()
     })
 
+    // oxlint-disable-next-line consistent-return
     return () => cancelAnimationFrame(rafId)
   }, [activeIndex, mounted, setActiveIndex, shouldFocus])
 
-  // eslint-disable-next-line react-hooks/refs
+  // oxlint-disable-next-line react-compiler
   return {
-    // eslint-disable-next-line react-hooks/refs
+    // oxlint-disable-next-line react-compiler
     activeElement,
     activeIndex,
     handleItemMouseEnter,

package/src/core/components/skeleton/skeleton.tsx

@@ -28,11 +28,12 @@ export const Skeleton = forwardRef(function Skeleton(
   ref: React.Ref<HTMLDivElement>,
 ) {
   const {animated = false, delay, radius, ...restProps} = props
+  // oxlint-disable-next-line no-unneeded-ternary
   const [visible, setVisible] = useState<boolean>(delay ? false : true)
 
   useEffect(() => {
     if (!delay) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
+      // oxlint-disable-next-line react-compiler
       return setVisible(true)
     }
 

package/src/core/components/tab/tab.tsx

@@ -13,6 +13,7 @@ export interface TabProps {
    */
   'aria-controls': string
   'id': string
+  // oxlint-disable-next-line no-redundant-type-constituents
   'icon'?: React.ElementType | React.ReactNode
   'focused'?: boolean
   'fontSize'?: number | number[]

package/src/core/components/tab/tabList.tsx

@@ -56,6 +56,7 @@ export const TabList = forwardRef(function TabList(
   )
 
   return (
+    // oxlint-disable-next-line interactive-supports-focus
     <CustomInline
       data-ui="TabList"
       {...restProps}

package/src/core/components/toast/toast.test.tsx

@@ -1,4 +1,6 @@
-/** @jest-environment jsdom */
+/** @vitest-environment jsdom */
+
+import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '../../../../test'
 import {ToastContext} from './toastContext'
@@ -8,7 +10,7 @@ import {useToast} from './useToast'
 describe('components/toast', () => {
   describe('useToast', () => {
     it('should get context value', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootToast = useToast()
@@ -25,6 +27,7 @@ describe('components/toast', () => {
         }
 
         return (
+          // oxlint-disable-next-line jsx-no-constructed-context-values
           <ToastContext.Provider value={value}>
             <Debug />
           </ToastContext.Provider>
@@ -38,7 +41,7 @@ describe('components/toast', () => {
     })
 
     it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {
@@ -54,6 +57,7 @@ describe('components/toast', () => {
         const value = undefined
 
         return (
+          // oxlint-disable-next-line no-unsafe-type-assertion
           <ToastContext.Provider value={value as any}>
             <Debug />
           </ToastContext.Provider>
@@ -66,7 +70,7 @@ describe('components/toast', () => {
     })
 
     it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {
@@ -85,6 +89,7 @@ describe('components/toast', () => {
         }
 
         return (
+          // oxlint-disable-next-line jsx-no-constructed-context-values, no-unsafe-type-assertion
           <ToastContext.Provider value={value as any}>
             <Debug />
           </ToastContext.Provider>

package/src/core/components/toast/toast.tsx

@@ -1,5 +1,5 @@
 import {CloseIcon} from '@sanity/icons'
-import {motion, type Variant, type Variants} from 'framer-motion'
+import {motion, type Variant, type Variants} from 'motion/react'
 
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
 import {Box, Button, Flex, Stack, Text} from '../../primitives'

package/src/core/components/toast/toastProvider.tsx

@@ -1,4 +1,4 @@
-import {AnimatePresence} from 'framer-motion'
+import {AnimatePresence} from 'motion/react'
 import {startTransition, useMemo, useState} from 'react'
 
 import {useMounted} from '../../hooks/useMounted'

package/src/core/components/tree/tree.tsx

@@ -218,6 +218,7 @@ export const Tree = memo(
 
     return (
       <TreeContext.Provider value={contextValue}>
+        {/* oxlint-disable-next-line interactive-supports-focus */}
         <Stack
           as="ul"
           data-ui="Tree"

package/src/core/components/tree/treeGroup.tsx

@@ -21,6 +21,7 @@ export const TreeGroup = memo(function TreeGroup(
       {...restProps}
       hidden={!expanded}
       marginTop={tree.space}
+      // oxlint-disable-next-line prefer-tag-over-role
       role="group"
       space={tree.space}
     >

package/src/core/components/tree/treeItem.tsx

@@ -74,10 +74,10 @@ export const TreeItem = memo(function TreeItem(
   const itemPath = useMemo(() => path.concat([id || '']), [id, path])
   const itemKey = itemPath.join('/')
   const itemState = tree.state[itemKey]
-  // eslint-disable-next-line react-hooks/refs
+  // oxlint-disable-next-line react-compiler
   const focused = tree.focusedElement === rootRef.current
   const expanded = itemState?.expanded === undefined ? expandedProp : itemState?.expanded || false
-  // eslint-disable-next-line react-hooks/refs
+  // oxlint-disable-next-line react-compiler
   const tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1
   const contextValue = useMemo(
     () => ({...tree, level: tree.level + 1, path: itemPath}),

package/src/core/constants.ts

@@ -1,4 +1,4 @@
-import type {Transition, Variant} from 'framer-motion'
+import type {Transition, Variant} from 'motion/react'
 
 /**
  * @internal
@@ -13,7 +13,7 @@ export const EMPTY_RECORD: Record<string, never> = {}
 const POPOVER_MOTION_DURATION = 0.2
 
 /**
- * Shared `framer-motion` variants used by `Popover` and `Tooltip` components.
+ * Shared `motion` variants used by `Popover` and `Tooltip` components.
  * @internal
  */
 export const POPOVER_MOTION_PROPS: {

package/src/core/hooks/useClickOutside.test.tsx

@@ -1,8 +1,9 @@
-/** @jest-environment jsdom */
+/** @vitest-environment jsdom */
 
 import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {useEffect, useRef, useState} from 'react'
+import {describe, expect, it, vi} from 'vitest'
 
 import {useClickOutside} from './useClickOutside'
 
@@ -16,16 +17,18 @@ describe('useClickOutside', () => {
    */
   it('calls the handler when clicking outside of the array of elements', async () => {
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = () => {
       const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
       const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
 
+      // oxlint-disable-next-line no-deprecated
       useClickOutside(handler, [buttonElement, popoverElement])
 
       return (
         <>
+          {/* oxlint-disable-next-line control-has-associated-label */}
           <button data-testid="button" ref={setButtonElement} />
           <div data-testid="popover" ref={setPopoverElement} />
           <div data-testid="outside" />
@@ -45,16 +48,18 @@ describe('useClickOutside', () => {
 
   it('the elements array flattens nested arrays one level deep', async () => {
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = () => {
       const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
       const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
 
+      // oxlint-disable-next-line no-deprecated
       useClickOutside(handler, [null, [null, buttonElement], [popoverElement, null], null])
 
       return (
         <>
+          {/* oxlint-disable-next-line control-has-associated-label */}
           <button data-testid="button" ref={setButtonElement} />
           <div data-testid="popover" ref={setPopoverElement} />
           <div data-testid="outside" />
@@ -74,18 +79,20 @@ describe('useClickOutside', () => {
 
   it('it can set a boundary to scope outside click events', async () => {
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = () => {
       const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
       const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
       const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
 
+      // oxlint-disable-next-line no-deprecated
       useClickOutside(handler, [buttonElement, popoverElement], boundaryElement)
 
       return (
         <>
           <div ref={setBoundaryElement}>
+            {/* oxlint-disable-next-line control-has-associated-label */}
             <button data-testid="button" ref={setButtonElement} />
             <div data-testid="popover" ref={setPopoverElement} />
             <div data-testid="inside" />
@@ -114,16 +121,18 @@ describe('useClickOutside', () => {
      * Thus it makes sense to unit test it to ensure it works as expected and we don't accidentally break backwards compatibility.
      */
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = (props: {open?: true}) => {
       const {open = false} = props
       const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
 
+      // oxlint-disable-next-line no-deprecated
       const setElement = useClickOutside(handler, [buttonElement])
 
       return (
         <>
+          {/* oxlint-disable-next-line control-has-associated-label */}
           <button data-testid="button" ref={setButtonElement} />
           {open && <div data-testid="popover" ref={setElement} />}
           <div data-testid="outside" />
@@ -155,17 +164,19 @@ describe('useClickOutside', () => {
      * Since we don't want people to use the `setElement` pattern, test that userland can handle dynamically changing elements arrays
      */
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = (props: {open?: true}) => {
       const {open = false} = props
       const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
       const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
 
+      // oxlint-disable-next-line no-deprecated
       useClickOutside(handler, [buttonElement, popoverElement])
 
       return (
         <>
+          {/* oxlint-disable-next-line control-has-associated-label */}
           <button data-testid="button" ref={setButtonElement} />
           {open && <div data-testid="popover" ref={setPopoverElement} />}
           <div data-testid="outside" />
@@ -199,7 +210,7 @@ describe('useClickOutside', () => {
      */
 
     const user = userEvent.setup()
-    let handler = jest.fn()
+    let handler = vi.fn()
 
     /**
      * Using refs in the `useClickOutside` elements array is dangerous,
@@ -210,10 +221,12 @@ describe('useClickOutside', () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
       const popoverRef = useRef<HTMLDivElement | null>(null)
 
+      // oxlint-disable-next-line no-deprecated
       useClickOutside(handler, [buttonRef.current, popoverRef.current])
 
       return (
         <>
+          {/* oxlint-disable-next-line control-has-associated-label */}
           <button data-testid="button" ref={buttonRef} />
           <div data-testid="popover" ref={popoverRef} />
         </>
@@ -229,15 +242,17 @@ describe('useClickOutside', () => {
      * If a mixture of refs and state is used it can appear like it's working correctly,
      * but this is a side-effect, not an indication it's safe.
      */
-    handler = jest.fn()
+    handler = vi.fn()
     TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
       const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
 
+      // oxlint-disable-next-line no-deprecated
       useClickOutside(handler, [buttonRef.current, popoverElement])
 
       return (
         <>
+          {/* oxlint-disable-next-line control-has-associated-label */}
           <button data-testid="button" ref={buttonRef} />
           <div data-testid="popover" ref={setPopoverElement} />
           <div data-testid="outside" />
@@ -254,11 +269,12 @@ describe('useClickOutside', () => {
     /**
      * Unrelated state updates can create the same false impression of safety.
      */
-    handler = jest.fn()
+    handler = vi.fn()
     TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
       const popoverRef = useRef<HTMLDivElement | null>(null)
 
+      // oxlint-disable-next-line no-deprecated
       useClickOutside(handler, [buttonRef.current, popoverRef.current])
 
       const [, tick] = useState(0)
@@ -272,6 +288,7 @@ describe('useClickOutside', () => {
 
       return (
         <>
+          {/* oxlint-disable-next-line control-has-associated-label */}
           <button data-testid="button" ref={buttonRef} />
           <div data-testid="popover" ref={popoverRef} />
           <div data-testid="outside" />
@@ -289,6 +306,7 @@ describe('useClickOutside', () => {
      * When using the legacy version of the `useClickOutside` API it's necessary to synchronize mutable ref values
      * with a effect and state loop to ensure they're not stale
      */
+    // oxlint-disable-next-line no-deprecated
     const useElementsFromRefs = (refs: React.MutableRefObject<HTMLElement | null>[]) => {
       const [elements, setElements] = useState(() => refs.map((ref) => ref.current))
 
@@ -306,16 +324,18 @@ describe('useClickOutside', () => {
 
       return elements
     }
-    handler = jest.fn()
+    handler = vi.fn()
     TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
       const popoverRef = useRef<HTMLDivElement | null>(null)
 
       const elements = useElementsFromRefs([buttonRef, popoverRef])
+      // oxlint-disable-next-line no-deprecated
       useClickOutside(handler, elements)
 
       return (
         <>
+          {/* oxlint-disable-next-line control-has-associated-label */}
           <button data-testid="button" ref={buttonRef} />
           <div data-testid="popover" ref={popoverRef} />
           <div data-testid="outside" />
@@ -337,7 +357,7 @@ describe('useClickOutside', () => {
      */
 
     const user = userEvent.setup()
-    let handler = jest.fn()
+    let handler = vi.fn()
 
     /**
      * Using refs in the `useClickOutside` elements array is dangerous,
@@ -347,6 +367,7 @@ describe('useClickOutside', () => {
     let TestComponent = () => {
       const boundaryRef = useRef<HTMLDivElement | null>(null)
 
+      // oxlint-disable-next-line no-deprecated
       useClickOutside(handler, [], boundaryRef.current)
 
       return (
@@ -368,17 +389,19 @@ describe('useClickOutside', () => {
      * If a mixture of refs and state is used it can appear like it's working correctly,
      * but this is a side-effect, not an indication it's safe.
      */
-    handler = jest.fn()
+    handler = vi.fn()
     TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
       const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
       const boundaryRef = useRef<HTMLDivElement | null>(null)
 
+      // oxlint-disable-next-line no-deprecated
       useClickOutside(handler, [buttonRef.current, popoverElement], boundaryRef.current)
 
       return (
         <>
           <div ref={boundaryRef}>
+            {/* oxlint-disable-next-line control-has-associated-label */}
             <button data-testid="button" ref={buttonRef} />
             <div data-testid="popover" ref={setPopoverElement} />
             <div data-testid="inside" />
@@ -398,12 +421,13 @@ describe('useClickOutside', () => {
     /**
      * Unrelated state updates can create the same false impression of safety.
      */
-    handler = jest.fn()
+    handler = vi.fn()
     TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
       const popoverRef = useRef<HTMLDivElement | null>(null)
       const boundaryRef = useRef<HTMLDivElement | null>(null)
 
+      // oxlint-disable-next-line no-deprecated
       useClickOutside(handler, [buttonRef.current, popoverRef.current], boundaryRef.current)
 
       const [, tick] = useState(0)
@@ -418,6 +442,7 @@ describe('useClickOutside', () => {
       return (
         <>
           <div ref={boundaryRef}>
+            {/* oxlint-disable-next-line control-has-associated-label */}
             <button data-testid="button" ref={buttonRef} />
             <div data-testid="popover" ref={popoverRef} />
             <div data-testid="inside" />
@@ -438,10 +463,11 @@ describe('useClickOutside', () => {
      * When using the legacy version of the `useClickOutside` API it's necessary to synchronize mutable ref values
      * with a effect and state loop to ensure they're not stale
      */
+    // oxlint-disable-next-line no-deprecated
     const useBoundaryElementFromRef = (ref: React.MutableRefObject<HTMLElement | null>) => {
       const [element, setElement] = useState(() => ref.current)
 
-      // eslint-disable-next-line react-hooks/exhaustive-deps
+      // oxlint-disable-next-line exhaustive-deps
       useEffect(() => {
         // If the ref has mutated since the last render, update the state and schedule a re-render
         if (ref.current !== element) {
@@ -451,18 +477,20 @@ describe('useClickOutside', () => {
 
       return element
     }
-    handler = jest.fn()
+    handler = vi.fn()
     TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
       const popoverRef = useRef<HTMLDivElement | null>(null)
       const boundaryRef = useRef<HTMLDivElement | null>(null)
 
       const boundaryElement = useBoundaryElementFromRef(boundaryRef)
+      // oxlint-disable-next-line no-deprecated
       useClickOutside(handler, [buttonRef.current, popoverRef.current], boundaryElement)
 
       return (
         <>
           <div ref={boundaryRef}>
+            {/* oxlint-disable-next-line control-has-associated-label */}
             <button data-testid="button" ref={buttonRef} />
             <div data-testid="popover" ref={popoverRef} />
             <div data-testid="inside" />

package/src/core/hooks/useClickOutside.ts

@@ -26,6 +26,7 @@ function _getElements(
     }
   }
 
+  // oxlint-disable-next-line no-unsafe-type-assertion
   return ret.filter(Boolean) as HTMLElement[]
 }
 
@@ -58,7 +59,6 @@ export function useClickOutside(
     const nextElements = _getElements(element, elementsArg)
 
     if (prevElements.length !== nextElements.length) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
       setElements(nextElements)
       elementsRef.current = nextElements
 

package/src/core/hooks/useClickOutsideEvent.test.tsx

@@ -1,8 +1,9 @@
-/** @jest-environment jsdom */
+/** @vitest-environment jsdom */
 
 import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {useRef} from 'react'
+import {describe, expect, it, vi} from 'vitest'
 
 import {useClickOutsideEvent} from './useClickOutsideEvent'
 
@@ -13,7 +14,7 @@ describe('useClickOutsideEvent', () => {
 
   it('calls the handler when clicking outside of the array of elements', async () => {
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
@@ -23,6 +24,7 @@ describe('useClickOutsideEvent', () => {
 
       return (
         <>
+          {/* oxlint-disable-next-line control-has-associated-label */}
           <button data-testid="button" ref={buttonRef} />
           <div data-testid="popover" ref={popoverRef} />
           <div data-testid="outside" />
@@ -42,7 +44,7 @@ describe('useClickOutsideEvent', () => {
 
   it('the elements array flattens nested arrays one level deep', async () => {
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
@@ -57,6 +59,7 @@ describe('useClickOutsideEvent', () => {
 
       return (
         <>
+          {/* oxlint-disable-next-line control-has-associated-label */}
           <button data-testid="button" ref={buttonRef} />
           <div data-testid="popover" ref={popoverRef} />
           <div data-testid="outside" />
@@ -76,7 +79,7 @@ describe('useClickOutsideEvent', () => {
 
   it('it can set a boundary to scope outside click events', async () => {
     const user = userEvent.setup()
-    const handler = jest.fn()
+    const handler = vi.fn()
 
     const TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
@@ -92,6 +95,7 @@ describe('useClickOutsideEvent', () => {
       return (
         <>
           <div ref={boundaryRef}>
+            {/* oxlint-disable-next-line control-has-associated-label */}
             <button data-testid="button" ref={buttonRef} />
             <div data-testid="popover" ref={popoverRef} />
             <div data-testid="inside" />

package/src/core/hooks/useDelayed.test.ts

@@ -1,6 +1,7 @@
-/** @jest-environment jsdom */
+/** @vitest-environment jsdom */
 
 import {act, renderHook} from '@testing-library/react'
+import {describe, expect, it, vi} from 'vitest'
 
 import {useDelayedState} from './useDelayedState'
 
@@ -16,7 +17,7 @@ describe('useDelayedState', () => {
   })
 
   it('should update state after delay if delay is provided', async () => {
-    jest.useFakeTimers()
+    vi.useFakeTimers()
     const {result} = renderHook(() => useDelayedState(false))
     const [, setState] = result.current
 
@@ -25,12 +26,12 @@ describe('useDelayedState', () => {
     })
     expect(result.current[0]).toBe(false)
     act(() => {
-      jest.advanceTimersByTime(500)
+      vi.advanceTimersByTime(500)
     })
     expect(result.current[0]).toBe(false)
 
     act(() => {
-      jest.advanceTimersByTime(500)
+      vi.advanceTimersByTime(500)
     })
 
     expect(result.current[0]).toBe(true)
@@ -56,12 +57,12 @@ describe('useDelayedState', () => {
     })
     expect(result.current[0]).toBe(false)
 
-    jest.advanceTimersByTime(500)
+    vi.advanceTimersByTime(500)
 
     act(() => {
       setState(false)
     })
-    jest.advanceTimersByTime(600)
+    vi.advanceTimersByTime(600)
     // Even after 1.1 seconds, the state should continue being false, because it was cancelled by a next setState call
     expect(result.current[0]).toBe(false)
   })

package/src/core/hooks/useElementRect/useElementRect.ts

@@ -9,5 +9,6 @@ import {useElementSize} from '../useElementSize'
 export function useElementRect(element: HTMLElement | null): DOMRectReadOnly | null {
   const elementSize = useElementSize(element)
 
+  // oxlint-disable-next-line no-deprecated
   return elementSize?._contentRect || null
 }

package/src/core/hooks/useForwardedRef.ts

@@ -10,6 +10,7 @@ import {useImperativeHandle, useRef} from 'react'
  * +useImperativeHandle(forwardedRef, () => ref.current)
  * ```
  */
+// oxlint-disable-next-line no-deprecated
 export function useForwardedRef<T>(ref: React.ForwardedRef<T>): React.MutableRefObject<T | null> {
   const innerRef = useRef<T | null>(null)
 

package/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx

@@ -1,7 +1,8 @@
-/** @jest-environment node */
+/** @vitest-environment node */
 
 import {buildTheme} from '@sanity/ui/theme'
 import {renderToStaticMarkup, renderToString} from 'react-dom/server'
+import {describe, expect, it} from 'vitest'
 
 import {ThemeProvider} from '../../theme'
 import {useMediaIndex} from './useMediaIndex'