@sanity/ui 3.0.2 → 4.0.0-static.2

package/src/core/primitives/tooltip/__workshop__/props.tsx

@@ -1,19 +1,21 @@
 import {Button, Card, Flex, Stack, Text, Tooltip, TooltipDelayGroupProvider} from '@sanity/ui'
+import {vars} from '@sanity/ui/css'
 import {useBoolean, useNumber, useSelect, useText} from '@sanity/ui-workshop'
 
 import {
   WORKSHOP_PLACEMENT_OPTIONS,
   WORKSHOP_SHADOW_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
-} from '../../../__workshop__/constants'
+} from '$workshop'
 
-export default function PropsStory() {
+export default function PropsStory(): React.JSX.Element {
+  const arrow = useBoolean('Arrow', false)
   const content = useText('Content', 'Tooltip content')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 2, 'Props')
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 2)
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
   const portal = useBoolean('Portal', true)
-  const openDelay = useNumber('Open Delay', 200) || 0
-  const closeDelay = useNumber('Close Delay', 200) || 0
+  const openDelay = useNumber('Open Delay', 200)
+  const closeDelay = useNumber('Close Delay', 200)
   const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 2)
 
   return (
@@ -28,15 +30,16 @@ export default function PropsStory() {
         gap={4}
       >
         <Stack
+          gap={4}
           padding={4}
-          style={{outline: '1px solid var(--card-border-color)', width: '100%', maxWidth: '640px'}}
-          space={4}
+          style={{outline: `1px solid ${vars.color.border}`, width: '100%', maxWidth: '640px'}}
         >
           <Text align="center" size={3}>
             Standalone tooltip
           </Text>
           <Flex align="center" justify="center" padding={4} sizing="border">
             <Tooltip
+              arrow={arrow}
               content={<Text size={1}>{content}</Text>}
               padding={padding}
               placement={placement}
@@ -52,9 +55,9 @@ export default function PropsStory() {
           </Flex>
         </Stack>
         <Stack
+          gap={4}
           padding={4}
-          style={{outline: '1px solid var(--card-border-color)', width: '100%', maxWidth: '640px'}}
-          space={4}
+          style={{outline: `1px solid ${vars.color.border}`, width: '100%', maxWidth: '640px'}}
         >
           <Text align="center" size={3}>
             Grouped tooltips
@@ -71,6 +74,7 @@ export default function PropsStory() {
               }}
             >
               <Tooltip
+                arrow={arrow}
                 // This is overridden by the group delay, kept here intentionally for testing purposes.
                 delay={{
                   open: 100,
@@ -85,6 +89,7 @@ export default function PropsStory() {
                 <Button mode="bleed" text="Hover me" />
               </Tooltip>
               <Tooltip
+                arrow={arrow}
                 // This is overridden by the group delay, kept here intentionally for testing purposes.
                 delay={{
                   open: 100,

package/src/core/primitives/tooltip/__workshop__/resizableBoundary.tsx

@@ -2,9 +2,9 @@ import {BoundaryElementProvider, Button, Card, Code, Flex, Text, Tooltip} from '
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {useState} from 'react'
 
-import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
+import {WORKSHOP_PLACEMENT_OPTIONS} from '$workshop'
 
-export default function ResizableBoundaryStory() {
+export default function ResizableBoundaryStory(): React.JSX.Element {
   const content = useText(
     'Content',
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',

package/src/core/primitives/tooltip/constants.ts

@@ -1,4 +1,4 @@
-import {Placement} from '@floating-ui/react-dom'
+import type {Placement} from '../../types'
 
 export const DEFAULT_TOOLTIP_ARROW_WIDTH = 15
 export const DEFAULT_TOOLTIP_ARROW_HEIGHT = 6

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

@@ -1,22 +1,22 @@
-/** @jest-environment jsdom */
-import '../../../../test/mocks/resizeObserver.mock'
-import '../../../../test/mocks/matchMedia.mock'
-
 import {act, fireEvent, screen} from '@testing-library/react'
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
+
+import {render} from '$test/utils'
 
-import {render} from '../../../../test'
-import {Button, Text} from '../../primitives'
-import {Tooltip, TooltipDelayGroupProvider} from '../tooltip'
+import {Button} from '../button/button'
+import {Text} from '../text/text'
+import {Tooltip} from './tooltip'
+import {TooltipDelayGroupProvider} from './tooltipDelayGroup'
 
-// Fake timers using Jest
+// Fake timers
 beforeEach(() => {
-  jest.useFakeTimers()
+  vi.useFakeTimers()
 })
 
-// Running all pending timers and switching to real timers using Jest
+// Running all pending timers and switching to real timers
 afterEach(() => {
-  jest.runOnlyPendingTimers()
-  jest.useRealTimers()
+  vi.runOnlyPendingTimers()
+  vi.useRealTimers()
 })
 
 describe('Tooltip', () => {
@@ -43,7 +43,7 @@ describe('Tooltip', () => {
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
     })
     it('should support delays to show and hide the tooltip.', () => {
-      jest.useFakeTimers()
+      vi.useFakeTimers()
       const delay = 200
 
       render(
@@ -63,10 +63,10 @@ describe('Tooltip', () => {
 
       fireEvent.mouseEnter(button)
 
-      act(() => jest.advanceTimersByTime(delay / 2))
+      act(() => vi.advanceTimersByTime(delay / 2))
       // Content should not be rendered yet
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-      act(() => jest.advanceTimersByTime(delay / 2))
+      act(() => vi.advanceTimersByTime(delay / 2))
 
       // Validate tooltip content is rendered
       screen.getByText('Tooltip content')
@@ -74,12 +74,12 @@ describe('Tooltip', () => {
       fireEvent.mouseOut(button)
       // Validate tooltip content is still showing.
       screen.getByText('Tooltip content')
-      act(() => jest.advanceTimersByTime(delay))
+      act(() => vi.advanceTimersByTime(delay))
       // Validate tooltip content is not rendered anymore
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
     })
     it('should support different open and close delays to show and hide the tooltip.', () => {
-      jest.useFakeTimers()
+      vi.useFakeTimers()
       const openDelay = 200
       const closeDelay = 150
 
@@ -103,10 +103,10 @@ describe('Tooltip', () => {
 
       fireEvent.mouseEnter(button)
 
-      act(() => jest.advanceTimersByTime(openDelay / 2))
+      act(() => vi.advanceTimersByTime(openDelay / 2))
       // Content should not be rendered yet
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-      act(() => jest.advanceTimersByTime(openDelay / 2))
+      act(() => vi.advanceTimersByTime(openDelay / 2))
 
       // Validate tooltip content is rendered
       screen.getByText('Tooltip content')
@@ -114,7 +114,7 @@ describe('Tooltip', () => {
       fireEvent.mouseOut(button)
       // Validate tooltip content is still showing.
       screen.getByText('Tooltip content')
-      act(() => jest.advanceTimersByTime(closeDelay))
+      act(() => vi.advanceTimersByTime(closeDelay))
       // Validate tooltip content is not rendered anymore
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
     })
@@ -124,7 +124,7 @@ describe('Tooltip', () => {
     it('should support groups with the same delay to open and close.', () => {
       const delay = 150
 
-      jest.useFakeTimers()
+      vi.useFakeTimers()
       render(
         <TooltipDelayGroupProvider delay={delay}>
           <Tooltip content={<Text size={1}>{'Tooltip 1'}</Text>} placement={'top'} delay={400}>
@@ -149,11 +149,11 @@ describe('Tooltip', () => {
 
       // Hovers on first button, it should show first tooltip only
       fireEvent.mouseEnter(button1)
-      act(() => jest.advanceTimersByTime(delay / 2))
+      act(() => vi.advanceTimersByTime(delay / 2))
       // Content should not be rendered yet, we have a delay of 150ms
       expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
       expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
-      act(() => jest.advanceTimersByTime(delay / 2))
+      act(() => vi.advanceTimersByTime(delay / 2))
 
       // Validate Tooltip 1 is rendered
       screen.getByText('Tooltip 1')
@@ -164,38 +164,38 @@ describe('Tooltip', () => {
       fireEvent.mouseEnter(button2)
 
       // Validate Tooltip 1 is not rendered, now tooltip 2 is open.
-      act(() => jest.advanceTimersByTime(1))
+      act(() => vi.advanceTimersByTime(1))
       expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
       screen.getByText('Tooltip 2')
 
       // Validate tooltip content is not rendered anymore
       fireEvent.mouseOut(button2)
-      act(() => jest.advanceTimersByTime(delay + 1))
+      act(() => vi.advanceTimersByTime(delay + 1))
       expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
 
       // Hovering again, should trigger the tooltip to show immediately, as the group is not deactivated yet
       fireEvent.mouseEnter(button2)
-      act(() => jest.advanceTimersByTime(1))
+      act(() => vi.advanceTimersByTime(1))
       screen.getByText('Tooltip 2')
 
       // Validate tooltip content is not rendered anymore
       fireEvent.mouseOut(button2)
-      act(() => jest.advanceTimersByTime(delay + 1))
+      act(() => vi.advanceTimersByTime(delay + 1))
       expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
 
       // Wait 200ms, the group is deactivated, hovering again should trigger the delay
-      act(() => jest.advanceTimersByTime(200))
+      act(() => vi.advanceTimersByTime(200))
       fireEvent.mouseEnter(button2)
-      act(() => jest.advanceTimersByTime(delay / 2))
+      act(() => vi.advanceTimersByTime(delay / 2))
       expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
-      act(() => jest.advanceTimersByTime(delay / 2))
+      act(() => vi.advanceTimersByTime(delay / 2))
       screen.getByText('Tooltip 2')
     })
     it('should support groups with different open and close delay.', () => {
       const openDelay = 250
       const closeDelay = 150
 
-      jest.useFakeTimers()
+      vi.useFakeTimers()
       render(
         <TooltipDelayGroupProvider
           delay={{
@@ -225,11 +225,11 @@ describe('Tooltip', () => {
 
       // Hovers on first button, it should show first tooltip only
       fireEvent.mouseEnter(button1)
-      act(() => jest.advanceTimersByTime(openDelay / 2))
+      act(() => vi.advanceTimersByTime(openDelay / 2))
       // Content should not be rendered yet, we have a delay of2150ms
       expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
       expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
-      act(() => jest.advanceTimersByTime(openDelay / 2))
+      act(() => vi.advanceTimersByTime(openDelay / 2))
 
       // Validate Tooltip 1 is rendered
       screen.getByText('Tooltip 1')
@@ -240,31 +240,31 @@ describe('Tooltip', () => {
       fireEvent.mouseEnter(button2)
 
       // Validate Tooltip 1 is not rendered, now tooltip 2 is open.
-      act(() => jest.advanceTimersByTime(1))
+      act(() => vi.advanceTimersByTime(1))
       expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
       screen.getByText('Tooltip 2')
 
       // Validate tooltip content is not rendered anymore
       fireEvent.mouseOut(button2)
-      act(() => jest.advanceTimersByTime(closeDelay + 1))
+      act(() => vi.advanceTimersByTime(closeDelay + 1))
       expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
 
       // Hovering again, should trigger the tooltip to show immediately, as the group is not deactivated yet
       fireEvent.mouseEnter(button2)
-      act(() => jest.advanceTimersByTime(1))
+      act(() => vi.advanceTimersByTime(1))
       screen.getByText('Tooltip 2')
 
       // Validate tooltip content is not rendered anymore
       fireEvent.mouseOut(button2)
-      act(() => jest.advanceTimersByTime(closeDelay + 1))
+      act(() => vi.advanceTimersByTime(closeDelay + 1))
       expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
 
       // Wait 200ms, the group is deactivated, hovering again should trigger the delay
-      act(() => jest.advanceTimersByTime(200))
+      act(() => vi.advanceTimersByTime(200))
       fireEvent.mouseEnter(button2)
-      act(() => jest.advanceTimersByTime(openDelay / 2))
+      act(() => vi.advanceTimersByTime(openDelay / 2))
       expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
-      act(() => jest.advanceTimersByTime(openDelay / 2))
+      act(() => vi.advanceTimersByTime(openDelay / 2))
       screen.getByText('Tooltip 2')
     })
   })
@@ -273,7 +273,7 @@ describe('Tooltip', () => {
     it('Standalone tooltip closes immediately with Escape key', () => {
       const delay = 150
 
-      jest.useFakeTimers()
+      vi.useFakeTimers()
 
       render(
         <Tooltip
@@ -289,8 +289,8 @@ describe('Tooltip', () => {
 
       // Validate tooltip content is not rendered
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-      fireEvent.focus(button)
-      act(() => jest.advanceTimersByTime(delay))
+      act(() => fireEvent.focus(button))
+      act(() => vi.advanceTimersByTime(delay))
 
       // Validate tooltip content is rendered
       screen.getByText('Tooltip content')
@@ -304,7 +304,7 @@ describe('Tooltip', () => {
     it('With <TooltipDelayGroupProvider />  closes immediately with Escape key', () => {
       const delay = 150
 
-      jest.useFakeTimers()
+      vi.useFakeTimers()
 
       render(
         <TooltipDelayGroupProvider delay={{close: delay}}>
@@ -322,9 +322,9 @@ describe('Tooltip', () => {
 
       // Validate tooltip content is not rendered
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-      fireEvent.focus(button)
+      act(() => fireEvent.focus(button))
 
-      act(() => jest.advanceTimersByTime(delay))
+      act(() => vi.advanceTimersByTime(delay))
 
       // Validate tooltip content is rendered
       screen.getByText('Tooltip content')
@@ -351,9 +351,9 @@ describe('Tooltip', () => {
 
       // Assertion: tooltip does not exist in the document
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-      fireEvent.focus(button)
+      act(() => fireEvent.focus(button))
 
-      act(() => jest.advanceTimersByTime(delay))
+      act(() => vi.advanceTimersByTime(delay))
 
       // Assertion: the tooltip is not visible
       expect(screen.queryByText('Tooltip content')).toBeVisible()
@@ -377,9 +377,9 @@ describe('Tooltip', () => {
 
       // Assertion: tooltip does not exist in the document
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-      fireEvent.focus(button)
+      act(() => fireEvent.focus(button))
 
-      act(() => jest.advanceTimersByTime(delay))
+      act(() => vi.advanceTimersByTime(delay))
 
       // Assertion: the tooltip is not visible
       expect(screen.queryByText('Tooltip content')).toBeVisible()
@@ -392,12 +392,12 @@ describe('Tooltip', () => {
   })
 
   describe('Used defined events on <Tooltip /> child should fire correctly', () => {
-    const handleBlur = jest.fn()
-    const handleClick = jest.fn()
-    const handleContextMenu = jest.fn()
-    const handleFocus = jest.fn()
-    const handleMouseEnter = jest.fn()
-    const handleMouseLeave = jest.fn()
+    const handleBlur = vi.fn()
+    const handleClick = vi.fn()
+    const handleContextMenu = vi.fn()
+    const handleFocus = vi.fn()
+    const handleMouseEnter = vi.fn()
+    const handleMouseLeave = vi.fn()
 
     beforeEach(() => {
       render(
@@ -417,35 +417,35 @@ describe('Tooltip', () => {
       )
     })
 
-    afterEach(() => jest.clearAllMocks())
+    afterEach(() => vi.clearAllMocks())
 
     it('should fire the onBlur event', () => {
-      fireEvent.blur(screen.getByTestId('btn'))
+      act(() => fireEvent.blur(screen.getByTestId('btn')))
       expect(handleBlur).toHaveBeenCalledTimes(1)
     })
 
     it('should fire the onClick event', () => {
-      fireEvent.click(screen.getByTestId('btn'))
+      act(() => fireEvent.click(screen.getByTestId('btn')))
       expect(handleClick).toHaveBeenCalledTimes(1)
     })
 
     it('should fire the onContextMenu event', () => {
-      fireEvent.contextMenu(screen.getByTestId('btn'))
+      act(() => fireEvent.contextMenu(screen.getByTestId('btn')))
       expect(handleContextMenu).toHaveBeenCalledTimes(1)
     })
 
     it('should fire the onFocus event', () => {
-      fireEvent.focus(screen.getByTestId('btn'))
+      act(() => fireEvent.focus(screen.getByTestId('btn')))
       expect(handleFocus).toHaveBeenCalledTimes(1)
     })
 
     it('should fire the onMouseEnter event', () => {
-      fireEvent.mouseEnter(screen.getByTestId('btn'))
+      act(() => fireEvent.mouseEnter(screen.getByTestId('btn')))
       expect(handleMouseEnter).toHaveBeenCalledTimes(1)
     })
 
     it('should fire the onMouseLeave event', () => {
-      fireEvent.mouseLeave(screen.getByTestId('btn'))
+      act(() => fireEvent.mouseLeave(screen.getByTestId('btn')))
       expect(handleMouseLeave).toHaveBeenCalledTimes(1)
     })
   })