@sanity/ui 2.16.21 → 2.16.23

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

@@ -77,7 +77,6 @@ export const Avatar = forwardRef(function Avatar(
   const as = ReactIs.isValidElementType(asProp) ? asProp : 'div'
   const size = useArrayProp(sizeProp)
 
-  // eslint-disable-next-line no-warning-comments
   // @todo: remove this
   const avatarSize = avatar.sizes[size[0]] || avatar.sizes[0]
   const _sizeRem = avatarSize.size
@@ -102,7 +101,7 @@ export const Avatar = 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])
 

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

@@ -93,6 +93,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

@@ -17,6 +17,7 @@ export interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
   as?: React.ElementType | keyof React.JSX.IntrinsicElements
   fontSize?: number | number[]
   /** @deprecated No longer used. */
+  // oxlint-disable-next-line no-deprecated
   mode?: BadgeMode
   tone?: BadgeTone
 }
@@ -38,7 +39,7 @@ export const Badge = 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',

package/src/core/primitives/box/box.tsx

@@ -27,7 +27,8 @@ import {
  * @public
  */
 export interface BoxProps
-  extends ResponsiveFlexItemProps,
+  extends
+    ResponsiveFlexItemProps,
     ResponsiveBoxProps,
     ResponsiveGridItemProps,
     ResponsiveMarginProps,

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

@@ -1,8 +1,9 @@
-/** @jest-environment jsdom */
+/** @vitest-environment jsdom */
 
 import {AddIcon} from '@sanity/icons'
 import {screen} from '@testing-library/react'
-import {axe} from 'jest-axe'
+import {describe, expect, it} from 'vitest'
+import {axe} from 'vitest-axe'
 
 import {render} from '../../../../test'
 import {Button, ButtonProps} from './button'

package/src/core/primitives/button/button.tsx

@@ -22,7 +22,9 @@ export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusPro
   as?: React.ElementType | keyof React.JSX.IntrinsicElements
   fontSize?: number | number[]
   mode?: ButtonMode
+  // oxlint-disable-next-line no-redundant-type-constituents
   icon?: React.ElementType | React.ReactNode
+  // oxlint-disable-next-line no-redundant-type-constituents
   iconRight?: React.ElementType | React.ReactNode
   justify?: FlexJustify | FlexJustify[]
   /**

package/src/core/primitives/button/styles.ts

@@ -79,6 +79,7 @@ export function buttonColorStyles(
   // const defaultBoxShadow = `inset 0px -1.5px 0px ${buttonTheme.border.width}px color-mix(in srgb, var(--card-border-color) 25%, var(--card-bg-color))`
   const defaultBoxShadow = undefined
 
+  // oxlint-disable-next-line no-unsafe-type-assertion
   return [
     _cardColorStyle(baseColor, color.enabled),
     {

package/src/core/primitives/card/card.tsx

@@ -23,10 +23,7 @@ import {CardStyleProps} from './types'
  * @public
  */
 export interface CardProps
-  extends BoxProps,
-    ResponsiveBorderProps,
-    ResponsiveRadiusProps,
-    ResponsiveShadowProps {
+  extends BoxProps, ResponsiveBorderProps, ResponsiveRadiusProps, ResponsiveShadowProps {
   /**
    * Do not use in production.
    * @beta
@@ -83,7 +80,6 @@ export const Card = forwardRef(function Card(
   const rootTheme = useRootTheme()
   const tone = toneProp === 'inherit' ? rootTheme.tone : toneProp
 
-  // eslint-disable-next-line no-warning-comments
   // todo: Consider adding the wrapper approach for nested cards in which the tones are not changing, avoid unnecessary ThemeColorProvider
   return (
     <ThemeColorProvider scheme={scheme} tone={tone}>

package/src/core/primitives/card/types.ts

@@ -7,5 +7,6 @@ export interface CardStyleProps {
   $checkered: boolean
   $focusRing: boolean
   $muted: boolean
+  // oxlint-disable-next-line no-deprecated
   $tone: ThemeColorToneKey
 }

package/src/core/primitives/code/refractor.tsx

@@ -7,11 +7,13 @@ export default function LazyRefractor(
 ) {
   const {language: languageProp, value} = props
   const language = typeof languageProp === 'string' ? languageProp : undefined
+  // oxlint-disable-next-line no-unsafe-type-assertion
   const registered = language ? Refractor.hasLanguage(language as any) : false
 
   return (
     <>
       {!(language && registered) && <code>{value}</code>}
+      {/* oxlint-disable-next-line no-base-to-string */}
       {language && registered && <Refractor inline language={language} value={String(value)} />}
     </>
   )

package/src/core/primitives/flex/flex.tsx

@@ -15,9 +15,7 @@ import {ResponsiveFlexItemProps, ResponsiveFlexProps} from '../types'
  * @public
  */
 export interface FlexProps
-  extends Omit<BoxProps, 'display'>,
-    ResponsiveFlexProps,
-    ResponsiveFlexItemProps {
+  extends Omit<BoxProps, 'display'>, ResponsiveFlexProps, ResponsiveFlexItemProps {
   gap?: number | number[]
 }
 

package/src/core/primitives/inline/inline.tsx

@@ -38,6 +38,7 @@ export const Inline = forwardRef(function Inline(
       {...restProps}
       $space={useArrayProp(space)}
       forwardedAs={as}
+      // oxlint-disable-next-line no-unnecessary-type-assertion, no-unsafe-type-assertion
       ref={ref as any}
     >
       {children}

package/src/core/primitives/popover/popover.tsx

@@ -11,7 +11,7 @@ import {
   useFloating,
 } from '@floating-ui/react-dom'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {AnimatePresence} from 'framer-motion'
+import {AnimatePresence} from 'motion/react'
 import {
   cloneElement,
   forwardRef,
@@ -45,9 +45,7 @@ import {PopoverUpdateCallback, PopoverWidth} from './types'
 
 /** @public */
 export interface PopoverProps
-  extends Omit<LayerProps, 'as'>,
-    ResponsiveRadiusProps,
-    ResponsiveShadowProps {
+  extends Omit<LayerProps, 'as'>, ResponsiveRadiusProps, ResponsiveShadowProps {
   /** @beta */
   __unstable_margins?: PopoverMargins
   /**
@@ -120,6 +118,7 @@ export interface PopoverProps
   tone?: CardTone
   /** @beta */
   updateRef?:
+    // oxlint-disable-next-line no-deprecated
     | MutableRefObject<PopoverUpdateCallback | undefined>
     | RefCallback<PopoverUpdateCallback | undefined>
   width?: PopoverWidth | PopoverWidth[]
@@ -149,6 +148,7 @@ export const Popover = memo(
       __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
       animate: _animate = false,
       arrow: arrowProp = false,
+      // oxlint-disable-next-line no-deprecated
       boundaryElement = boundaryElementContext.element,
       children: childProp,
       constrainSize = false,
@@ -157,6 +157,7 @@ export const Popover = memo(
       fallbackPlacements = props.fallbackPlacements ??
         DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
       matchReferenceWidth,
+      // oxlint-disable-next-line no-deprecated
       floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
       modal,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -169,6 +170,7 @@ export const Popover = memo(
       portal,
       preventOverflow = true,
       radius: radiusProp = 3,
+      // oxlint-disable-next-line no-deprecated
       referenceBoundary = props.boundaryElement ?? boundaryElementContext.element,
       referenceElement,
       scheme,
@@ -276,6 +278,7 @@ export const Popover = memo(
       // Track sizes
       if (constrainSize || matchReferenceWidth) {
         ret.push(
+          // oxlint-disable-next-line react-compiler
           size({
             apply({availableWidth, availableHeight, elements, referenceWidth}) {
               // not fresh, so use refs
@@ -323,7 +326,9 @@ export const Popover = memo(
       // Place arrow
       if (arrowProp) {
         ret.push(
+          // oxlint-disable-next-line react-compiler
           arrow({
+            // oxlint-disable-next-line react-compiler
             element: arrowRef,
             padding: DEFAULT_POPOVER_PADDING,
           }),
@@ -379,6 +384,7 @@ export const Popover = memo(
     const originY = middlewareData['@sanity/ui/origin']?.originY
 
     const setArrow = useCallback((arrowEl: HTMLDivElement | null) => {
+      // oxlint-disable-next-line react-compiler
       arrowRef.current = arrowEl
     }, [])
 
@@ -394,6 +400,7 @@ export const Popover = memo(
       (node: HTMLElement | null) => {
         refs.setReference(node)
 
+        // oxlint-disable-next-line no-unsafe-type-assertion
         const childRef = getElementRef(childProp as any)
 
         if (typeof childRef === 'function') {
@@ -419,6 +426,7 @@ export const Popover = memo(
         if (typeof updateRef === 'function') {
           updateRef(update)
         } else if (updateRef) {
+          // oxlint-disable-next-line react-compiler
           updateRef.current = update
         }
       }
@@ -453,6 +461,7 @@ export const Popover = memo(
           originY={originY}
           strategy={strategy}
           tone={tone}
+          // oxlint-disable-next-line react-compiler
           width={matchReferenceWidth ? referenceWidthRef.current : width}
           x={x}
           y={y}

package/src/core/primitives/popover/popoverCard.tsx

@@ -1,6 +1,6 @@
 import {Strategy} from '@floating-ui/react-dom'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {motion, type MotionProps} from 'framer-motion'
+import {motion, type MotionProps} from 'motion/react'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
 import {styled} from 'styled-components'
 
@@ -124,6 +124,7 @@ export const PopoverCard = memo(
     return (
       <MotionCard
         data-ui="Popover"
+        // oxlint-disable-next-line no-unsafe-type-assertion
         {...(restProps as CardProps & MotionProps)}
         data-placement={placement}
         radius={radius}

package/src/core/primitives/popover/types.ts

@@ -1,7 +1,6 @@
 /** @beta */
 export type PopoverUpdateCallback = () => void
 
-// eslint-disable-next-line no-warning-comments
 // todo: remove `auto` from PopoverWidth
 /** @public */
 export type PopoverWidth = number | 'auto'

package/src/core/primitives/stack/styles.ts

@@ -27,6 +27,7 @@ export function responsiveStackSpaceStyle(
   const {media, space} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$space, (spaceIndex) => ({
+    // oxlint-disable-next-line no-deprecated
     gridGap: rem(space[spaceIndex]),
   }))
 }

package/src/core/primitives/textInput/textInput.tsx

@@ -64,7 +64,9 @@ export interface TextInputProps {
   clearButton?: boolean | TextInputClearButtonProps
   customValidity?: string
   fontSize?: number | number[]
+  // oxlint-disable-next-line no-redundant-type-constituents
   icon?: React.ElementType | React.ReactNode
+  // oxlint-disable-next-line no-redundant-type-constituents
   iconRight?: React.ElementType | React.ReactNode
   /**
    * @beta