@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.2

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

@@ -0,0 +1,85 @@
+import {BoundaryElementProvider, Button, Card, Code, Flex, Text, Tooltip} from '@sanity/ui'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {useState} from 'react'
+import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
+
+export default function ResizableBoundaryStory() {
+  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.',
+  )
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'right')
+  const portal = useBoolean('Portal', true)
+  const useBoundaryElement = useBoolean('Use boundary element', true)
+
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <BoundaryElementProvider element={useBoundaryElement ? boundaryElement : null}>
+        <Card
+          border
+          ref={setBoundaryElement}
+          style={{
+            height: 'calc(100vh - 100px)',
+            overflow: 'hidden',
+            position: 'relative',
+            resize: 'both',
+            width: '500px',
+          }}
+        >
+          <Flex align="center" height="fill" justify="center">
+            <Flex justify="center">
+              <Code size={1}>Placement: {placement}</Code>
+            </Flex>
+          </Flex>
+
+          <Tooltip
+            content={<Text size={1}>{content}</Text>}
+            padding={2}
+            placement={placement}
+            portal={portal}
+          >
+            <Button mode="bleed" style={{position: 'absolute', top: 10, left: 10}} text="Tooltip" />
+          </Tooltip>
+          <Tooltip
+            content={<Text size={1}>{content}</Text>}
+            padding={2}
+            placement={placement}
+            portal={portal}
+          >
+            <Button
+              mode="bleed"
+              style={{position: 'absolute', top: 10, right: 10}}
+              text="Tooltip"
+            />
+          </Tooltip>
+          <Tooltip
+            content={<Text size={1}>{content}</Text>}
+            padding={2}
+            placement={placement}
+            portal={portal}
+          >
+            <Button
+              mode="bleed"
+              style={{position: 'absolute', bottom: 10, left: 10}}
+              text="Tooltip"
+            />
+          </Tooltip>
+          <Tooltip
+            content={<Text size={1}>{content}</Text>}
+            padding={2}
+            placement={placement}
+            portal={portal}
+          >
+            <Button
+              mode="bleed"
+              style={{position: 'absolute', bottom: 10, right: 10}}
+              text="Tooltip"
+            />
+          </Tooltip>
+        </Card>
+      </BoundaryElementProvider>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,15 @@
+export function ConditionalWrapper({
+  children,
+  condition,
+  wrapper,
+}: {
+  children: React.ReactNode
+  condition: boolean
+  wrapper: (children: React.ReactNode) => React.ReactNode
+}): React.ReactNode {
+  if (!condition) {
+    return children
+  }
+
+  return wrapper(children)
+}

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

@@ -0,0 +1,23 @@
+import {Placement} from '@floating-ui/react-dom'
+
+export const DEFAULT_TOOLTIP_ARROW_WIDTH = 15
+export const DEFAULT_TOOLTIP_ARROW_HEIGHT = 6
+export const DEFAULT_TOOLTIP_ARROW_RADIUS = 2
+
+export const DEFAULT_TOOLTIP_DISTANCE = 4
+export const DEFAULT_TOOLTIP_PADDING = 4
+
+export const DEFAULT_FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {
+  top: ['top-end', 'top-start', 'bottom', 'left', 'right'],
+  'top-start': ['top', 'top-end', 'bottom-start', 'left-start', 'right-start'],
+  'top-end': ['top', 'top-start', 'bottom-end', 'left-end', 'right-end'],
+  bottom: ['bottom-end', 'bottom-start', 'top', 'left', 'right'],
+  'bottom-start': ['bottom', 'bottom-end', 'top-start', 'left-start', 'right-start'],
+  'bottom-end': ['bottom', 'bottom-start', 'top-end', 'left-end', 'right-end'],
+  left: ['left-end', 'left-start', 'right', 'top', 'bottom'],
+  'left-start': ['left', 'left-end', 'right-start', 'top-start', 'bottom-start'],
+  'left-end': ['left', 'left-start', 'right-end', 'top-end', 'bottom-end'],
+  right: ['right-end', 'right-start', 'left', 'top', 'bottom'],
+  'right-start': ['right', 'right-end', 'left-start', 'top-start', 'bottom-start'],
+  'right-end': ['right', 'right-start', 'left-end', 'top-end', 'bottom-end'],
+}

package/src/{primitives → core/primitives}/tooltip/tooltip.test.tsx

@@ -1,11 +1,22 @@
 /** @jest-environment jsdom */
 import {screen, act, fireEvent} from '@testing-library/react'
-import '../../../test/mocks/resizeObserver.mock'
-import '../../../test/mocks/matchMedia.mock'
-import {render} from '../../../test'
+import '../../../../test/mocks/resizeObserver.mock'
+import '../../../../test/mocks/matchMedia.mock'
+import {render} from '../../../../test'
 import {Text, Button} from '../../primitives'
 import {Tooltip, TooltipDelayGroupProvider} from '../tooltip'
 
+// Fake timers using Jest
+beforeEach(() => {
+  jest.useFakeTimers()
+})
+
+// Running all pending timers and switching to real timers using Jest
+afterEach(() => {
+  jest.runOnlyPendingTimers()
+  jest.useRealTimers()
+})
+
 describe('Tooltip', () => {
   describe('Using same delay for open and close', () => {
     it('should hide and show the tooltip content when hovered, with no delay', () => {
@@ -254,25 +265,186 @@ describe('Tooltip', () => {
       act(() => jest.advanceTimersByTime(openDelay / 2))
       screen.getByText('Tooltip 2')
     })
-    it("should throw an error if it's nested inside another <TooltipDelayGroupProvider />", () => {
-      // eslint-disable-next-line no-console
-      console.error = jest.fn() // Silence console.error as we are actually expecting an error in this test.
-      expect(() => {
-        render(
-          <TooltipDelayGroupProvider delay={100}>
-            <TooltipDelayGroupProvider delay={100}>
-              <Tooltip content={<Text size={1}>{'Tooltip 1'}</Text>} placement={'top'} delay={400}>
-                <Button mode="bleed" text="Button 1" />
-              </Tooltip>
-            </TooltipDelayGroupProvider>
-          </TooltipDelayGroupProvider>,
-        )
-      }).toThrow(
-        'TooltipDelayGroupProvider cannot be nested inside another TooltipDelayGroupProvider',
+  })
+
+  describe('Closing the <Tooltip /> with the Escape key', () => {
+    it('Standalone tooltip closes immediately with Escape key', () => {
+      const delay = 150
+
+      jest.useFakeTimers()
+
+      render(
+        <Tooltip
+          content={<Text size={1}>{'Tooltip content'}</Text>}
+          placement={'top'}
+          delay={delay}
+        >
+          <Button mode="bleed" text="Hover me" />
+        </Tooltip>,
+      )
+
+      const button = screen.getByText('Hover me')
+
+      // Validate tooltip content is not rendered
+      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      fireEvent.focus(button)
+      act(() => jest.advanceTimersByTime(delay))
+
+      // Validate tooltip content is rendered
+      screen.getByText('Tooltip content')
+
+      act(() => {
+        fireEvent.keyDown(button, {key: 'Escape', code: 'Escape'})
+      })
+      // Validate tooltip content is not rendered anymore
+      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+    })
+    it('With <TooltipDelayGroupProvider />  closes immediately with Escape key', () => {
+      const delay = 150
+
+      jest.useFakeTimers()
+
+      render(
+        <TooltipDelayGroupProvider delay={{close: delay}}>
+          <Tooltip
+            content={<Text size={1}>{'Tooltip content'}</Text>}
+            placement={'top'}
+            delay={{close: delay}}
+          >
+            <Button mode="bleed" text="Hover me" />
+          </Tooltip>
+        </TooltipDelayGroupProvider>,
       )
 
-      // Clean up the console.error mock
-      jest.clearAllMocks()
+      const button = screen.getByText('Hover me')
+
+      // Validate tooltip content is not rendered
+      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      fireEvent.focus(button)
+
+      act(() => jest.advanceTimersByTime(delay))
+
+      // Validate tooltip content is rendered
+      screen.getByText('Tooltip content')
+
+      act(() => {
+        fireEvent.keyDown(button, {key: 'Escape', code: 'Escape'})
+      })
+      // Validate tooltip content is not rendered anymore
+      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Clicking the <Tooltip /> child should close the tooltip', () => {
+    it('Should close the tooltip when clicked', () => {
+      const delay = 150
+
+      render(
+        <Tooltip content={<Text size={1}>{'Tooltip content'}</Text>} delay={delay}>
+          <Button mode="bleed" text="Hover me" />
+        </Tooltip>,
+      )
+
+      const button = screen.getByText('Hover me')
+
+      // Assertion: tooltip does not exist in the document
+      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      fireEvent.focus(button)
+
+      act(() => jest.advanceTimersByTime(delay))
+
+      // Assertion: the tooltip is not visible
+      expect(screen.queryByText('Tooltip content')).toBeVisible()
+
+      act(() => fireEvent.click(button))
+
+      // Assertion: tooltip does not exist in the document
+      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+    })
+
+    it('Should close the tooltip when the context menu is opened (right click)', () => {
+      const delay = 150
+
+      render(
+        <Tooltip content={<Text size={1}>{'Tooltip content'}</Text>} delay={delay}>
+          <Button mode="bleed" text="Hover me" />
+        </Tooltip>,
+      )
+
+      const button = screen.getByText('Hover me')
+
+      // Assertion: tooltip does not exist in the document
+      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      fireEvent.focus(button)
+
+      act(() => jest.advanceTimersByTime(delay))
+
+      // Assertion: the tooltip is not visible
+      expect(screen.queryByText('Tooltip content')).toBeVisible()
+
+      act(() => fireEvent.contextMenu(button))
+
+      // Assertion: tooltip does not exist in the document
+      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+    })
+  })
+
+  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()
+
+    beforeEach(() => {
+      render(
+        <Tooltip content={<Text size={1}>{'Tooltip content'}</Text>}>
+          <Button
+            data-testid="btn"
+            mode="bleed"
+            onBlur={handleBlur}
+            onClick={handleClick}
+            onContextMenu={handleContextMenu}
+            onFocus={handleFocus}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            text="Hover me"
+          />
+        </Tooltip>,
+      )
+    })
+
+    afterEach(() => jest.clearAllMocks())
+
+    it('should fire the onBlur event', () => {
+      fireEvent.blur(screen.getByTestId('btn'))
+      expect(handleBlur).toHaveBeenCalledTimes(1)
+    })
+
+    it('should fire the onClick event', () => {
+      fireEvent.click(screen.getByTestId('btn'))
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('should fire the onContextMenu event', () => {
+      fireEvent.contextMenu(screen.getByTestId('btn'))
+      expect(handleContextMenu).toHaveBeenCalledTimes(1)
+    })
+
+    it('should fire the onFocus event', () => {
+      fireEvent.focus(screen.getByTestId('btn'))
+      expect(handleFocus).toHaveBeenCalledTimes(1)
+    })
+
+    it('should fire the onMouseEnter event', () => {
+      fireEvent.mouseEnter(screen.getByTestId('btn'))
+      expect(handleMouseEnter).toHaveBeenCalledTimes(1)
+    })
+
+    it('should fire the onMouseLeave event', () => {
+      fireEvent.mouseLeave(screen.getByTestId('btn'))
+      expect(handleMouseLeave).toHaveBeenCalledTimes(1)
     })
   })
 })