@sanity/ui 3.3.1 → 3.3.2

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

@@ -1,8 +1,7 @@
-/** @jest-environment jsdom */
-
-/* eslint-disable no-console */
+/** @vitest-environment jsdom */
 
 import React, {useCallback, useMemo} from 'react'
+import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '../../../../test'
 import {MenuContext, MenuContextValue} from './menuContext'
@@ -11,7 +10,7 @@ import {useMenu} from './useMenu'
 describe('components/menu', () => {
   describe('useMenu', () => {
     it('should get context value', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootMenu = useMenu()
@@ -23,11 +22,13 @@ describe('components/menu', () => {
 
       function Root() {
         const handleItemMouseEnter = useCallback(
+          // oxlint-disable-next-line no-console
           (event: React.MouseEvent<HTMLElement>) => console.log(event),
           [],
         )
 
         const handleItemMouseLeave = useCallback(
+          // oxlint-disable-next-line no-console
           (event: React.MouseEvent<HTMLElement>) => console.log(event),
           [],
         )
@@ -37,6 +38,7 @@ describe('components/menu', () => {
             ({
               version: 2,
               activeElement: null,
+              // oxlint-disable-next-line no-console
               mount: (element: HTMLElement | null) => () => console.log(element),
               onItemClick: () => undefined,
               onItemMouseEnter: handleItemMouseEnter,
@@ -64,7 +66,7 @@ describe('components/menu', () => {
     })
 
     it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {
@@ -92,7 +94,7 @@ describe('components/menu', () => {
     })
 
     it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {
@@ -111,6 +113,7 @@ describe('components/menu', () => {
         }
 
         return (
+          // oxlint-disable-next-line jsx-no-constructed-context-values
           <MenuContext.Provider value={value}>
             <Debug />
           </MenuContext.Provider>

package/src/core/components/menu/menu.tsx

@@ -52,9 +52,9 @@ export const Menu = forwardRef(function Menu(
 ) {
   const {
     children,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    // oxlint-disable-next-line no-deprecated, no-unused-vars
     focusFirst,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    // oxlint-disable-next-line no-deprecated, no-unused-vars
     focusLast,
     onClickOutside,
     onEscape,
@@ -66,11 +66,13 @@ export const Menu = forwardRef(function Menu(
     registerElement,
     shouldFocus: _shouldFocus,
     gap,
+    // oxlint-disable-next-line no-deprecated
     space: deprecated_space = 1,
     ...restProps
   } = props
   const spacing = gap === undefined ? deprecated_space : gap
   const shouldFocus =
+    // oxlint-disable-next-line no-deprecated
     _shouldFocus ?? ((props.focusFirst && 'first') || (props.focusLast && 'last') || null)
 
   const ref = useRef<HTMLDivElement | null>(null)

package/src/core/components/menu/menuButton.tsx

@@ -66,17 +66,23 @@ export const MenuButton = forwardRef(function MenuButton(
 ) {
   const {
     __unstable_disableRestoreFocusOnClose: disableRestoreFocusOnClose = false,
+    // oxlint-disable-next-line no-deprecated
     boundaryElement: deprecated_boundaryElement,
     button: buttonProp,
     id,
     menu: menuProp,
     onClose,
     onOpen,
+    // oxlint-disable-next-line no-deprecated
     placement: deprecated_placement,
+    // oxlint-disable-next-line no-deprecated
     popoverScheme: deprecated_popoverScheme,
+    // oxlint-disable-next-line no-deprecated
     portal: deprecated_portal = true,
     popover,
+    // oxlint-disable-next-line no-deprecated
     popoverRadius: deprecated_popoverRadius,
+    // oxlint-disable-next-line no-deprecated
     preventOverflow: deprecated_preventOverflow,
   } = props
   const [open, setOpen] = useState(false)
@@ -239,6 +245,7 @@ export const MenuButton = forwardRef(function MenuButton(
 
   const popoverProps: MenuButtonProps['popover'] = useMemo(
     () => ({
+      // oxlint-disable-next-line no-deprecated
       boundaryElement: deprecated_boundaryElement,
       overflow: 'auto',
       placement: deprecated_placement,
@@ -246,6 +253,7 @@ export const MenuButton = forwardRef(function MenuButton(
       preventOverflow: deprecated_preventOverflow,
       radius: deprecated_popoverRadius,
       scheme: deprecated_popoverScheme,
+      // oxlint-disable-next-line no-useless-fallback-in-spread
       ...(popover || {}),
     }),
     [

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

@@ -18,6 +18,7 @@ export type MenuDividerProps<E extends ElementType = 'hr'> = Props<EmptyProps, E
 /**
  * @public
  */
+// oxlint-disable-next-line no-unsafe-type-assertion
 export const MenuDivider = StyledMenuDivider as unknown as <E extends ElementType = 'hr'>(
   props: MenuDividerProps<E>,
 ) => React.JSX.Element

package/src/core/components/menu/menuGroup.spacing.test.tsx

@@ -1,4 +1,6 @@
-/** @jest-environment jsdom */
+/** @vitest-environment jsdom */
+
+import {beforeEach, describe, expect, it, vi} from 'vitest'
 
 import {render} from '../../../../test'
 import {Flex} from '../../primitives'
@@ -6,13 +8,14 @@ import {MenuContext, MenuContextValue} from './menuContext'
 import {MenuGroup} from './menuGroup'
 import {MenuItem} from './menuItem'
 
-jest.mock('../../primitives', () => {
-  const actual = jest.requireActual('../../primitives')
+vi.mock('../../primitives', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../primitives')>()
 
   return {
     ...actual,
-    Flex: jest.fn((props: Record<string, unknown>) => (actual.Flex as any).render(props, null)),
-    Popover: jest.fn(({children}: {children?: React.ReactNode}) => children),
+    // oxlint-disable-next-line no-unsafe-type-assertion
+    Flex: vi.fn((props: Record<string, unknown>) => (actual.Flex as any).render(props, null)),
+    Popover: vi.fn(({children}: {children?: React.ReactNode}) => children),
   }
 })
 
@@ -35,7 +38,7 @@ function renderMenuGroup(props: Partial<React.ComponentProps<typeof MenuGroup>>
 }
 
 describe('components/menuGroup spacing', () => {
-  const mockedFlex = jest.mocked(Flex)
+  const mockedFlex = vi.mocked(Flex)
 
   beforeEach(() => {
     mockedFlex.mockClear()

package/src/core/components/menu/menuGroup.tsx

@@ -15,6 +15,7 @@ import {useMenu} from './useMenu'
  */
 export interface MenuGroupOwnProps {
   fontSize?: number | number[]
+  // oxlint-disable-next-line no-redundant-type-constituents
   icon?: React.ElementType | React.ReactNode
   menu?: Omit<
     MenuProps,
@@ -59,6 +60,7 @@ function MenuGroupComponent(
     popover,
     radius = 2,
     gap,
+    // oxlint-disable-next-line no-deprecated
     space: deprecated_space = 3,
     text,
     tone = 'default',
@@ -129,13 +131,13 @@ function MenuGroupComponent(
 
   // Close child menu when a sibling item becomes active
   useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
+    // oxlint-disable-next-line react-compiler
     if (!active) setOpen(false)
   }, [active])
 
   // Update state when child menu is no longer open
   useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
+    // oxlint-disable-next-line react-compiler
     if (!open) setWithinMenu(false)
   }, [open])
 
@@ -146,6 +148,7 @@ function MenuGroupComponent(
     // By doing the same here, we ensure that the reset is processed after the focus change.
     const rafId = requestAnimationFrame(() => setShouldFocus(null))
 
+    // oxlint-disable-next-line consistent-return
     return () => cancelAnimationFrame(rafId)
   }, [shouldFocus])
 
@@ -228,6 +231,7 @@ MenuGroupComponent.displayName = 'MenuGroup'
 /**
  * @public
  */
+// oxlint-disable-next-line no-unsafe-type-assertion
 export const MenuGroup = MenuGroupComponent as unknown as <E extends ElementType = 'button'>(
   props: MenuGroupProps<E>,
 ) => React.JSX.Element

package/src/core/components/menu/menuItem.spacing.test.tsx

@@ -1,16 +1,19 @@
-/** @jest-environment jsdom */
+/** @vitest-environment jsdom */
+
+import {beforeEach, describe, expect, it, vi} from 'vitest'
 
 import {render} from '../../../../test'
 import {Flex} from '../../primitives'
 import {MenuContext, MenuContextValue} from './menuContext'
 import {MenuItem} from './menuItem'
 
-jest.mock('../../primitives', () => {
-  const actual = jest.requireActual('../../primitives')
+vi.mock('../../primitives', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../primitives')>()
 
   return {
     ...actual,
-    Flex: jest.fn((props: Record<string, unknown>) => (actual.Flex as any).render(props, null)),
+    // oxlint-disable-next-line no-unsafe-type-assertion
+    Flex: vi.fn((props: Record<string, unknown>) => (actual.Flex as any).render(props, null)),
   }
 })
 
@@ -31,7 +34,7 @@ function renderMenuItem(props: Partial<React.ComponentProps<typeof MenuItem>> =
 }
 
 describe('components/menuItem spacing', () => {
-  const mockedFlex = jest.mocked(Flex)
+  const mockedFlex = vi.mocked(Flex)
 
   beforeEach(() => {
     mockedFlex.mockClear()

package/src/core/components/menu/menuItem.tsx

@@ -26,7 +26,9 @@ import {useMenu} from './useMenu'
 export interface MenuItemOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
   fontSize?: number | number[]
   hotkeys?: string[]
+  // 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
   pressed?: boolean
   selected?: boolean
@@ -71,6 +73,7 @@ const MenuItemComponent = forwardRef(function MenuItem(
     radius = 2,
     selected: selectedProp,
     gap,
+    // oxlint-disable-next-line no-deprecated
     space: deprecated_space = 3,
     text,
     tone = 'default',
@@ -192,6 +195,7 @@ MenuItemComponent.displayName = 'ForwardRef(MenuItem)'
 /**
  * @public
  */
+// oxlint-disable-next-line no-unsafe-type-assertion
 export const MenuItem = MenuItemComponent as unknown as <E extends ElementType = 'button'>(
   props: MenuItemProps<E>,
 ) => React.JSX.Element

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

@@ -23,6 +23,7 @@ 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
@@ -217,6 +218,7 @@ export function useMenuController(props: {
       element?.focus()
     })
 
+    // oxlint-disable-next-line consistent-return
     return () => cancelAnimationFrame(rafId)
   }, [activeIndex, rootElementRef, setActiveIndex, shouldFocus])
 

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

@@ -28,6 +28,7 @@ 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(() => {

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.test.tsx

@@ -1,21 +1,23 @@
-/** @jest-environment jsdom */
+/** @vitest-environment jsdom */
+
+import {beforeEach, describe, expect, it, vi} from 'vitest'
 
 import {render} from '../../../../test'
 import {inlineSpaceStyle} from '../../primitives/inline/styles'
 import {Tab} from './tab'
 import {TabList} from './tabList'
 
-jest.mock('../../primitives/inline/styles', () => {
-  const actual = jest.requireActual('../../primitives/inline/styles')
+vi.mock('../../primitives/inline/styles', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../primitives/inline/styles')>()
 
   return {
     ...actual,
-    inlineSpaceStyle: jest.fn(actual.inlineSpaceStyle),
+    inlineSpaceStyle: vi.fn(actual.inlineSpaceStyle),
   }
 })
 
 describe('components/tabList', () => {
-  const mockedInlineSpaceStyle = jest.mocked(inlineSpaceStyle)
+  const mockedInlineSpaceStyle = vi.mocked(inlineSpaceStyle)
 
   beforeEach(() => {
     mockedInlineSpaceStyle.mockClear()

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

@@ -106,6 +106,7 @@ export function Toast(
     >
       <MotionFlex align="flex-start" variants={content} transition={transition}>
         <TextBox flex={1} padding={3}>
+          {/* oxlint-disable-next-line no-deprecated */}
           <Stack space={3}>
             {title && (
               <Text size={1} weight="medium">

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

@@ -29,6 +29,7 @@ export function ToastLayer(props: ToastLayerProps): React.JSX.Element {
       paddingX={paddingX}
       paddingY={paddingY}
       gap={gap}
+      // oxlint-disable-next-line no-deprecated
       columns={1}
       style={{zIndex}}
     >

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

@@ -1,21 +1,24 @@
-/** @jest-environment jsdom */
+/** @vitest-environment jsdom */
+
+import {beforeEach, describe, expect, it, vi} from 'vitest'
 
 import {render} from '../../../../test'
 import {Stack} from '../../primitives'
 import {Tree} from './tree'
 import {TreeItem} from './treeItem'
 
-jest.mock('../../primitives', () => {
-  const actual = jest.requireActual('../../primitives')
+vi.mock('../../primitives', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../primitives')>()
 
   return {
     ...actual,
-    Stack: jest.fn((props: Record<string, unknown>) => (actual.Stack as any).render(props, null)),
+    // oxlint-disable-next-line no-unsafe-type-assertion
+    Stack: vi.fn((props: Record<string, unknown>) => (actual.Stack as any).render(props, null)),
   }
 })
 
 describe('components/tree spacing', () => {
-  const mockedStack = jest.mocked(Stack)
+  const mockedStack = vi.mocked(Stack)
 
   beforeEach(() => {
     mockedStack.mockClear()
@@ -23,6 +26,7 @@ describe('components/tree spacing', () => {
 
   it('should support `space` and `gap` with the same behavior', () => {
     render(
+      // oxlint-disable-next-line no-deprecated
       <Tree space={2}>
         <TreeItem text="Item 1" />
       </Tree>,
@@ -44,6 +48,7 @@ describe('components/tree spacing', () => {
 
   it('should prefer `gap` over `space` when both are provided', () => {
     render(
+      // oxlint-disable-next-line no-deprecated
       <Tree gap={3} space={1}>
         <TreeItem text="Item 1" />
       </Tree>,

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

@@ -34,6 +34,7 @@ export const Tree = forwardRef(function Tree(
     Omit<React.HTMLProps<HTMLUListElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
   forwardedRef: React.ForwardedRef<HTMLUListElement>,
 ): React.JSX.Element {
+  // oxlint-disable-next-line no-deprecated
   const {children, gap, space: deprecated_space = 1, onFocus, ...restProps} = props
   const spacing = gap === undefined ? deprecated_space : gap
   const ref = useRef<HTMLUListElement | null>(null)
@@ -222,6 +223,7 @@ export const Tree = forwardRef(function Tree(
 
   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

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

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

@@ -1,4 +1,6 @@
-/** @jest-environment jsdom */
+/** @vitest-environment jsdom */
+
+import {beforeEach, describe, expect, it, vi} from 'vitest'
 
 import {render} from '../../../../test'
 import {Box} from '../../primitives'
@@ -6,12 +8,13 @@ import {TreeContext} from './treeContext'
 import {TreeItem} from './treeItem'
 import {TreeContextValue, TreeState} from './types'
 
-jest.mock('../../primitives', () => {
-  const actual = jest.requireActual('../../primitives')
+vi.mock('../../primitives', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../primitives')>()
 
   return {
     ...actual,
-    Box: jest.fn((props: Record<string, unknown>) => (actual.Box as any).render(props, null)),
+    // oxlint-disable-next-line no-unsafe-type-assertion
+    Box: vi.fn((props: Record<string, unknown>) => (actual.Box as any).render(props, null)),
   }
 })
 
@@ -24,7 +27,9 @@ const treeContextValue: TreeContextValue = {
   registerItem: () => () => undefined,
   setExpanded: () => undefined,
   setFocusedElement: () => undefined,
+  // oxlint-disable-next-line no-deprecated
   space: 1,
+  // oxlint-disable-next-line no-unnecessary-type-assertion
   state: {} as TreeState,
 }
 
@@ -37,7 +42,7 @@ function renderTreeItem(props: Partial<React.ComponentProps<typeof TreeItem>> =
 }
 
 describe('components/treeItem spacing', () => {
-  const mockedBox = jest.mocked(Box)
+  const mockedBox = vi.mocked(Box)
 
   beforeEach(() => {
     mockedBox.mockClear()

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

@@ -66,6 +66,7 @@ export function TreeItem(
     padding = 2,
     selected = false,
     gap,
+    // oxlint-disable-next-line no-deprecated
     space: deprecated_space = 2,
     text,
     weight,

package/src/core/hooks/index.ts

@@ -1,3 +1,4 @@
+// oxlint-disable-next-line no-deprecated
 export {type ArrayPropPrimitive, useArrayProp} from './useArrayProp'
 export * from './useClickOutside'
 export * from './useClickOutsideEvent'