@sanity/ui 3.3.0 → 3.3.2

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)
@@ -48,8 +49,8 @@ describe('useDelayedState', () => {
   })
 
   it('should clear pending timeout on unmount', () => {
-    jest.useFakeTimers()
-    const clearTimeoutSpy = jest.spyOn(global, 'clearTimeout')
+    vi.useFakeTimers()
+    const clearTimeoutSpy = vi.spyOn(global, 'clearTimeout')
     const {result, unmount} = renderHook(() => useDelayedState(false))
     const [, setState] = result.current
 
@@ -76,12 +77,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'

package/src/core/hooks/usePrefersDark.hydration.test.tsx

@@ -1,10 +1,12 @@
-/** @jest-environment jsdom */
+/** @vitest-environment jsdom */
+
 /**
  * As this hook is used for top-level theming it's likely to be called while server-rendering
  * and that's why it's worth it to have a testing suite for hydration
  */
 import {waitFor} from '@testing-library/dom'
 import {hydrateRoot} from 'react-dom/client'
+import {afterAll, beforeAll, describe, expect, it, vi} from 'vitest'
 
 import {usePrefersDark} from './usePrefersDark'
 
@@ -19,9 +21,10 @@ const originalMatchMedia = window.matchMedia
 describe('usePrefersDark SSR hydration', () => {
   beforeAll(() => {
     window.matchMedia = () =>
+      // oxlint-disable-next-line no-unsafe-type-assertion
       ({
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
         matches: true,
       }) as any
   })
@@ -31,7 +34,7 @@ describe('usePrefersDark SSR hydration', () => {
   })
 
   it(`hydrates without any warnings`, async () => {
-    const spy = jest.spyOn(console, 'error').mockImplementation()
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {})
 
     const node = document.createElement('div')
 
@@ -47,7 +50,6 @@ describe('usePrefersDark SSR hydration', () => {
     // After hydration it should switch to true
     await waitFor(() => expect(node.innerHTML).toBe('dark: <!-- -->true'))
 
-    // eslint-disable-next-line no-console
     expect(console.error).not.toHaveBeenCalled()
 
     spy.mockReset()

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

@@ -1,5 +1,7 @@
-/** @jest-environment node */
+/** @vitest-environment node */
+
 import {renderToStaticMarkup, renderToString} from 'react-dom/server'
+import {describe, expect, it} from 'vitest'
 
 import {usePrefersDark} from './usePrefersDark'
 

package/src/core/hooks/usePrefersReducedMotion.hydration.test.tsx

@@ -1,10 +1,12 @@
-/** @jest-environment jsdom */
+/** @vitest-environment jsdom */
+
 /**
  * As this hook is used for top-level theming it's likely to be called while server-rendering
  * and that's why it's worth it to have a testing suite for hydration
  */
 import {waitFor} from '@testing-library/dom'
 import {hydrateRoot} from 'react-dom/client'
+import {afterAll, beforeAll, describe, expect, it, vi} from 'vitest'
 
 import {usePrefersReducedMotion} from './usePrefersReducedMotion'
 
@@ -19,9 +21,10 @@ const originalMatchMedia = window.matchMedia
 describe('usePrefersReducedMotion SSR hydration', () => {
   beforeAll(() => {
     window.matchMedia = () =>
+      // oxlint-disable-next-line no-unsafe-type-assertion
       ({
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
         matches: true,
       }) as any
   })
@@ -31,7 +34,7 @@ describe('usePrefersReducedMotion SSR hydration', () => {
   })
 
   it(`hydrates without any warnings`, async () => {
-    const spy = jest.spyOn(console, 'error').mockImplementation()
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {})
 
     const node = document.createElement('div')
 
@@ -47,7 +50,6 @@ describe('usePrefersReducedMotion SSR hydration', () => {
     // After hydration it should switch to true
     await waitFor(() => expect(node.innerHTML).toBe('prefers-motion: <!-- -->true'))
 
-    // eslint-disable-next-line no-console
     expect(console.error).not.toHaveBeenCalled()
 
     spy.mockReset()

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

@@ -1,5 +1,7 @@
-/** @jest-environment node */
+/** @vitest-environment node */
+
 import {renderToStaticMarkup, renderToString} from 'react-dom/server'
+import {describe, expect, it} from 'vitest'
 
 import {usePrefersReducedMotion} from './usePrefersReducedMotion'
 

package/src/core/lib/createGlobalScopedContext.ts

@@ -12,6 +12,7 @@ import {type Context, createContext} from 'react'
 
 import {globalScope} from './globalScope'
 
+// oxlint-disable-next-line no-unnecessary-type-parameters
 export function createGlobalScopedContext<ContextType, const T extends ContextType = ContextType>(
   /**
    * Enforce that all Symbol.for keys used for globally scoped contexts have a predictable prefix

package/src/core/lib/globalScope.ts

@@ -16,4 +16,5 @@ function getGlobalScope() {
   throw new Error('@sanity/ui: could not locate global scope')
 }
 
+// oxlint-disable-next-line no-unsafe-type-assertion
 export const globalScope = getGlobalScope() as any

package/src/core/observers/elementSizeObserver.ts

@@ -50,6 +50,7 @@ function _createElementRectValueListener(): _ElementSizeListener {
     subscribe(element, subscriber) {
       const resizeObserver = new _ResizeObserver(([entry]) => {
         subscriber({
+          // oxlint-disable-next-line no-deprecated
           _contentRect: entry.contentRect,
           border: {
             width: entry.borderBoxSize[0].inlineSize,

package/src/core/primitives/avatar/avatar.tsx

@@ -76,7 +76,6 @@ const AvatarComponent = forwardRef(function Avatar(
   const as = ReactIs.isValidElementType(asProp) ? asProp : 'div'
   const size = _getArrayProp(sizeProp)
 
-  // eslint-disable-next-line no-warning-comments
   // @todo: remove this
   const avatarSize = avatar.sizes[size[0]] || avatar.sizes[0]
   const _sizeRem = avatarSize.size
@@ -101,7 +100,7 @@ const AvatarComponent = forwardRef(function Avatar(
   }, [arrowPosition, arrowPositionProp])
 
   useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
+    // oxlint-disable-next-line react-compiler
     if (src) setImageFailed(false)
   }, [src])
 
@@ -195,6 +194,7 @@ AvatarComponent.displayName = 'ForwardRef(Avatar)'
  *
  * @public
  */
+// oxlint-disable-next-line no-unsafe-type-assertion
 export const Avatar = AvatarComponent as unknown as <E extends ElementType = 'div'>(
   props: AvatarProps<E>,
 ) => React.JSX.Element

package/src/core/primitives/avatar/avatarStack.tsx

@@ -92,6 +92,7 @@ export const AvatarStack = forwardRef(function AvatarStack(
       )}
 
       {visibleChildren.map((child, childIndex) => (
+        // oxlint-disable-next-line no-array-index-key
         <div key={String(childIndex)}>{cloneElement(child, {size})}</div>
       ))}
     </StyledAvatarStack>

package/src/core/primitives/badge/badge.test.tsx

@@ -1,6 +1,7 @@
-/** @jest-environment jsdom */
+/** @vitest-environment jsdom */
 
-import {axe} from 'jest-axe'
+import {describe, expect, it} from 'vitest'
+import {axe} from 'vitest-axe'
 
 import {render} from '../../../../test'
 import {Badge} from './badge'

package/src/core/primitives/badge/badge.tsx

@@ -16,6 +16,7 @@ import {BadgeStyleProps} from './types'
 export interface BadgeOwnProps extends BoxOwnProps, ResponsiveRadiusProps {
   fontSize?: number | number[]
   /** @deprecated No longer used. */
+  // oxlint-disable-next-line no-deprecated
   mode?: BadgeMode
   tone?: BadgeTone
 }
@@ -37,7 +38,7 @@ const BadgeComponent = forwardRef(function Badge(
   const {
     children,
     fontSize = 1,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    // oxlint-disable-next-line no-deprecated
     mode: _deprecated_mode,
     padding = 1,
     radius = 'full',
@@ -65,6 +66,7 @@ BadgeComponent.displayName = 'ForwardRef(Badge)'
  *
  * @public
  */
+// oxlint-disable-next-line no-unsafe-type-assertion
 export const Badge = BadgeComponent as unknown as <E extends ElementType = 'div'>(
   props: BadgeProps<E>,
 ) => React.JSX.Element