@sanity/ui 3.0.0-static.17 → 3.0.0-static.19

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

@@ -1,8 +1,8 @@
-import {composeClassNames, ResponsiveProp, textSkeleton} from '@sanity/ui/css'
-import {FontTextSize} from '@sanity/ui/theme'
+import {_composeClassNames, type ResponsiveProp, textSkeleton} from '@sanity/ui/css'
+import type {FontTextSize} from '@sanity/ui/theme'
 
-import {Props} from '../../types'
-import {Skeleton, SkeletonElementType, SkeletonOwnProps} from './skeleton'
+import type {Props} from '../../types'
+import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
 
 /** @public */
 export const DEFAULT_TEXT_SKELETON_ELEMENT = 'div'
@@ -40,7 +40,7 @@ export function TextSkeleton<
   return (
     <Skeleton
       {...rest}
-      className={composeClassNames(
+      className={_composeClassNames(
         className,
         textSkeleton({
           size,

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

@@ -12,7 +12,7 @@ export default function ExampleStory() {
 
   return (
     <Box padding={[4, 5, 6]}>
-      <TabList space={[1, 2, 3]}>
+      <TabList gap={[1, 2, 3]}>
         <Tab
           aria-controls="example-panel-foo"
           icon={SunIcon}

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

@@ -1,9 +1,9 @@
-import {ResponsiveProp} from '@sanity/ui/css'
-import {FontTextSize, Space} from '@sanity/ui/theme'
+import type {ResponsiveProp} from '@sanity/ui/css'
+import type {FontTextSize, Space, ThemeColorStateToneKey} from '@sanity/ui/theme'
 import {
-  ElementType,
-  FocusEvent,
-  ReactNode,
+  type ElementType,
+  type FocusEvent,
+  type ReactNode,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -11,7 +11,7 @@ import {
 } from 'react'
 
 import {Button} from '../../primitives'
-import {ButtonTone, ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 
 /** @public */
 export const DEFAULT_TAB_ELEMENT = 'button'
@@ -29,7 +29,7 @@ export type TabOwnProps = {
   'label'?: ReactNode
   'padding'?: ResponsiveProp<Space>
   'selected'?: boolean
-  'tone'?: ButtonTone
+  'tone'?: ThemeColorStateToneKey
 }
 
 /** @public */

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

@@ -1,10 +1,17 @@
-import {ResponsiveProp} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
-import {Children, cloneElement, KeyboardEvent, ReactElement, useCallback, useState} from 'react'
-
-import {Flex, FlexOwnProps} from '../../primitives'
-import {ComponentType, Props} from '../../types'
-import {TabProps} from './tab'
+import {type ResponsiveProp} from '@sanity/ui/css'
+import type {Space} from '@sanity/ui/theme'
+import {
+  Children,
+  cloneElement,
+  type KeyboardEvent,
+  type ReactElement,
+  useCallback,
+  useState,
+} from 'react'
+
+import {Flex, type FlexOwnProps} from '../../primitives'
+import type {ComponentType, Props} from '../../types'
+import type {TabProps} from './tab'
 
 /** @public */
 export const DEFAULT_TAB_LIST_ELEMENT = 'div'

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

@@ -1,5 +1,5 @@
-import {Box, BoxOwnProps} from '../../primitives'
-import {ComponentType, Props} from '../../types'
+import {Box, type BoxOwnProps} from '../../primitives'
+import type {ComponentType, Props} from '../../types'
 
 /** @public */
 export const DEFAULT_TAB_PANEL_ELEMENT = 'div'
@@ -26,9 +26,12 @@ export type TabPanelProps<E extends TabPanelElementType = TabPanelElementType> =
 export function TabPanel<E extends TabPanelElementType = typeof DEFAULT_TAB_PANEL_ELEMENT>(
   props: TabPanelProps<E>,
 ) {
-  const {as = DEFAULT_TAB_PANEL_ELEMENT, ...rest} = props as TabPanelProps<
-    typeof DEFAULT_TAB_PANEL_ELEMENT
-  >
+  const {
+    as = DEFAULT_TAB_PANEL_ELEMENT,
+    children,
+    tabIndex,
+    ...rest
+  } = props as TabPanelProps<typeof DEFAULT_TAB_PANEL_ELEMENT>
 
   return (
     <Box
@@ -36,9 +39,9 @@ export function TabPanel<E extends TabPanelElementType = typeof DEFAULT_TAB_PANE
       {...rest}
       as={as}
       role="tabpanel"
-      tabIndex={props.tabIndex === undefined ? 0 : props.tabIndex}
+      tabIndex={tabIndex === undefined ? 0 : tabIndex}
     >
-      {props.children}
+      {children}
     </Box>
   )
 }

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

@@ -6,7 +6,7 @@ export default function HookStory() {
   return (
     <ToastProvider>
       <Box padding={[4, 5, 6]}>
-        <Inline space={2}>
+        <Inline gap={2}>
           <Button
             onClick={() =>
               toast.push({

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

@@ -1,14 +1,14 @@
-/** @jest-environment jsdom */
+import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '../../../../test'
 import {ToastContext} from './toastContext'
-import {ToastContextValue} from './types'
+import type {ToastContextValue} from './types'
 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()
@@ -38,7 +38,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 {
@@ -66,7 +66,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 {

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

@@ -1,18 +1,17 @@
 import {CloseIcon} from '@sanity/icons'
 import {
-  RadiusStyleProps,
+  type RadiusStyleProps,
   toast,
   toastLoadingBar,
   toastLoadingBarMask,
   toastLoadingBarProgress,
 } from '@sanity/ui/css'
-import {ThemeColorStateToneKey} from '@sanity/ui/theme'
 import {motion, type Variant, type Variants} from 'framer-motion'
-import {ReactNode} from 'react'
+import type {ReactNode} from 'react'
 
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
 import {Box, Button, Card, Flex, Stack, Text} from '../../primitives'
-import {ButtonTone, ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 
 /** @public */
 export const DEFAULT_TOAST_ELEMENT = 'li'
@@ -46,14 +45,14 @@ const STATUS_CARD_TONE = {
   warning: 'caution',
   success: 'positive',
   info: 'neutral',
-} satisfies {[key: string]: ThemeColorStateToneKey}
+} as const
 
 const BUTTON_TONE = {
   error: 'critical',
   warning: 'caution',
   success: 'positive',
   info: 'neutral',
-} satisfies {[key: string]: ButtonTone}
+} as const
 
 // Support pattern used by Sanity Studio, that works around the lack of `duration: Infinity` support in older @sanity/ui versions
 // https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value
@@ -118,7 +117,7 @@ export function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>
     >
       <MotionFlex align="flex-start" variants={content} transition={transition}>
         <Flex flex={1} overflowX="auto" padding={3}>
-          <Stack space={3}>
+          <Stack gap={3}>
             {title && (
               <Text size={1} weight="medium">
                 {title}

package/src/core/components/toast/toastContext.ts

@@ -1,5 +1,5 @@
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {ToastContextValue} from './types'
+import type {ToastContextValue} from './types'
 
 export const ToastContext = createGlobalScopedContext<ToastContextValue | null>(
   '@sanity/ui/context/toast',

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

@@ -1,7 +1,7 @@
-import {GapStyleProps, PaddingStyleProps, toastLayer} from '@sanity/ui/css'
+import {type GapStyleProps, type PaddingStyleProps, toastLayer} from '@sanity/ui/css'
 
 import {Grid} from '../../primitives/grid'
-import {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 import {useLayer} from '../../utils'
 
 /** @internal */

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

@@ -7,7 +7,7 @@ import {Toast} from './toast'
 import {ToastContext} from './toastContext'
 import {ToastLayer, type ToastLayerProps} from './toastLayer'
 import {generateToastId} from './toastState'
-import {ToastContextValue, ToastParams} from './types'
+import type {ToastContextValue, ToastParams} from './types'
 
 type ToastState = {
   dismiss: () => void

package/src/core/components/toast/types.ts

@@ -1,4 +1,4 @@
-import {ReactNode} from 'react'
+import type {ReactNode} from 'react'
 
 /** @public */
 export interface ToastParams {

package/src/core/components/toast/useToast.ts

@@ -2,7 +2,7 @@ import {useContext} from 'react'
 
 import {isRecord} from '../../lib/isRecord'
 import {ToastContext} from './toastContext'
-import {ToastContextValue} from './types'
+import type {ToastContextValue} from './types'
 
 /** @public */
 export function useToast(): ToastContextValue {

package/src/core/components/tree/__workshop__/basic.perf.ts

@@ -1,4 +1,4 @@
-import {PerfTestProps, PerfTestRunFn} from '@sanity/ui-workshop/plugin-perf'
+import type {PerfTestProps, PerfTestRunFn} from '@sanity/ui-workshop/plugin-perf'
 import {findByTestId, fireEvent} from '@testing-library/dom'
 
 function test<ElementType = unknown>(

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

@@ -21,7 +21,7 @@ export default function BasicStory() {
   return (
     <Box padding={[4, 5, 6]}>
       <Wrapper>
-        <Tree ref={ref} space={1}>
+        <Tree gap={1} ref={ref}>
           <TreeItem onClick={handleClick} expanded text="Fruit">
             <TreeItem
               data-testid="oranges"

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

@@ -38,7 +38,7 @@ export default function BasicStory() {
       </Box>
       <Wrapper>
         <TextInput />
-        <Tree ref={ref} space={1} onFocus={handleFocus}>
+        <Tree gap={1} onFocus={handleFocus} ref={ref}>
           <TreeItem data-testid="fruit" onClick={handleClick} expanded text="Fruit">
             <TreeItem
               data-testid="oranges"

package/src/core/components/tree/helpers.ts

@@ -1,4 +1,4 @@
-import {TreeState} from './types'
+import type {TreeState} from './types'
 
 export function _findPrevItemElement(
   state: TreeState,

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

@@ -1,8 +1,8 @@
-import {ResponsiveProp} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
+import type {ResponsiveProp} from '@sanity/ui/css'
+import type {Space} from '@sanity/ui/theme'
 import {
-  FocusEvent,
-  KeyboardEvent,
+  type FocusEvent,
+  type KeyboardEvent,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -12,10 +12,10 @@ import {
 } from 'react'
 
 import {Stack} from '../../primitives'
-import {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 import {_findNextItemElement, _findPrevItemElement, _focusItemElement} from './helpers'
 import {TreeContext} from './treeContext'
-import {TreeContextValue, TreeState} from './types'
+import type {TreeContextValue, TreeState} from './types'
 
 /** @beta */
 export const DEFAULT_TREE_ELEMENT = 'div'

package/src/core/components/tree/treeContext.ts

@@ -1,5 +1,5 @@
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {TreeContextValue} from './types'
+import type {TreeContextValue} from './types'
 
 /**
  * @internal

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

@@ -1,7 +1,7 @@
-import {memo, ReactElement} from 'react'
+import {memo, type ReactElement} from 'react'
 
 import {Stack} from '../../primitives'
-import {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 import {useTree} from './useTree'
 
 /** @public */

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

@@ -1,13 +1,13 @@
 import {ToggleArrowRightIcon} from '@sanity/icons'
-import {composeClassNames, ResponsiveProp, treeItem} from '@sanity/ui/css'
-import {FontTextSize, Space, ThemeFontWeightKey} from '@sanity/ui/theme'
+import {_composeClassNames, type ResponsiveProp, treeItem, vars} from '@sanity/ui/css'
+import type {FontTextSize, Space, ThemeFontWeightKey} from '@sanity/ui/theme'
 import {
-  ElementType,
-  KeyboardEvent,
-  MouseEvent,
-  MouseEventHandler,
-  ReactNode,
-  Ref,
+  type ElementType,
+  type KeyboardEvent,
+  type MouseEvent,
+  type MouseEventHandler,
+  type ReactNode,
+  type Ref,
   useCallback,
   useEffect,
   useId,
@@ -15,9 +15,9 @@ import {
   useRef,
 } from 'react'
 
-import {Box, BoxProps, CardOwnProps, Flex, Text} from '../../primitives'
-import {Selectable, SelectableElementType} from '../../primitives/_selectable'
-import {ComponentType, Props} from '../../types'
+import {Box, type BoxProps, type CardOwnProps, Flex, Text} from '../../primitives'
+import {Selectable, type SelectableElementType} from '../../primitives/_selectable'
+import type {ComponentType, Props} from '../../types'
 import {TreeContext} from './treeContext'
 import {TreeGroup} from './treeGroup'
 import {useTree} from './useTree'
@@ -166,7 +166,7 @@ export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITE
         data-ui="TreeItem"
         {...(rest as BoxProps<'li'>)}
         as="li"
-        className={composeClassNames(className, treeItem())}
+        className={_composeClassNames(className, treeItem())}
         onClick={handleClick}
         ref={rootRef as Ref<HTMLLIElement>}
         role="none"
@@ -182,7 +182,7 @@ export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITE
           role="treeitem"
           tabIndex={tabIndex}
           style={{
-            paddingLeft: `calc(var(--space-2) * ${tree.level})`,
+            paddingLeft: `calc(${vars.space[2]} * ${tree.level})`,
           }}
         >
           {content}
@@ -203,7 +203,7 @@ export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITE
       data-tree-key={itemKey}
       {...(rest as BoxProps<'a'>)}
       aria-expanded={expanded}
-      className={composeClassNames(className, treeItem())}
+      className={_composeClassNames(className, treeItem())}
       onClick={handleClick}
       onKeyDown={handleKeyDown}
       ref={rootRef as Ref<HTMLAnchorElement>}
@@ -216,7 +216,7 @@ export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITE
         data-ui="TreeItem__box"
         radius={radius}
         style={{
-          paddingLeft: `calc(var(--space-2) * ${tree.level})`,
+          paddingLeft: `calc(${vars.space[2]} * ${tree.level})`,
         }}
       >
         {content}

package/src/core/components/tree/types.ts

@@ -1,5 +1,5 @@
-import {ResponsiveProp} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
+import type {ResponsiveProp} from '@sanity/ui/css'
+import type {Space} from '@sanity/ui/theme'
 
 /**
  * @beta

package/src/core/components/tree/useTree.ts

@@ -1,7 +1,7 @@
 import {useContext} from 'react'
 
 import {TreeContext} from './treeContext'
-import {TreeContextValue} from './types'
+import type {TreeContextValue} from './types'
 
 /**
  * @beta

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

@@ -1,8 +1,7 @@
-/** @jest-environment jsdom */
-
 import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import {MutableRefObject, useEffect, useRef, useState} from 'react'
+import {type MutableRefObject, useEffect, useRef, useState} from 'react'
+import {describe, expect, it, vi} from 'vitest'
 
 import {useClickOutside} from './useClickOutside'
 
@@ -16,7 +15,7 @@ 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)
@@ -45,7 +44,7 @@ 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)
@@ -74,7 +73,7 @@ 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)
@@ -114,7 +113,7 @@ 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
@@ -155,7 +154,7 @@ 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
@@ -199,7 +198,7 @@ describe('useClickOutside', () => {
      */
 
     const user = userEvent.setup()
-    let handler = jest.fn()
+    let handler = vi.fn()
 
     /**
      * Using refs in the `useClickOutside` elements array is dangerous,
@@ -229,7 +228,7 @@ 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)
@@ -254,7 +253,7 @@ 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)
@@ -306,7 +305,7 @@ describe('useClickOutside', () => {
 
       return elements
     }
-    handler = jest.fn()
+    handler = vi.fn()
     TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
       const popoverRef = useRef<HTMLDivElement | null>(null)
@@ -337,7 +336,7 @@ describe('useClickOutside', () => {
      */
 
     const user = userEvent.setup()
-    let handler = jest.fn()
+    let handler = vi.fn()
 
     /**
      * Using refs in the `useClickOutside` elements array is dangerous,
@@ -368,7 +367,7 @@ 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)
@@ -398,7 +397,7 @@ 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)
@@ -451,7 +450,7 @@ describe('useClickOutside', () => {
 
       return element
     }
-    handler = jest.fn()
+    handler = vi.fn()
     TestComponent = () => {
       const buttonRef = useRef<HTMLButtonElement | null>(null)
       const popoverRef = useRef<HTMLDivElement | null>(null)

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

@@ -1,8 +1,7 @@
-/** @jest-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 +12,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)
@@ -42,7 +41,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)
@@ -76,7 +75,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)

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

@@ -1,6 +1,5 @@
-/** @jest-environment jsdom */
-
 import {act, renderHook} from '@testing-library/react'
+import {describe, expect, it, vi} from 'vitest'
 
 import {useDelayedState} from './useDelayedState'
 
@@ -16,7 +15,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 +24,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 +55,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/useDelayedState.ts

@@ -1,4 +1,4 @@
-import {SetStateAction, useCallback, useRef, useState} from 'react'
+import {type SetStateAction, useCallback, useRef, useState} from 'react'
 
 /**
  * @beta