@sanity/ui 1.7.12 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "1.7.12",
+  "version": "1.8.0",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",

package/src/hooks/useDelayed.test.ts

@@ -0,0 +1,66 @@
+/** @jest-environment jsdom */
+
+import {renderHook, act} from '@testing-library/react'
+import {useDelayedState} from './useDelayedState'
+
+describe('useDelayedState', () => {
+  it('should update state immediately if delay is not provided', () => {
+    const {result} = renderHook(() => useDelayedState(false))
+    const [, setState] = result.current
+    act(() => {
+      setState(true)
+    })
+    expect(result.current[0]).toBe(true)
+  })
+
+  it('should update state after delay if delay is provided', async () => {
+    jest.useFakeTimers()
+    const {result} = renderHook(() => useDelayedState(false))
+    const [, setState] = result.current
+
+    act(() => {
+      setState(true, 1000)
+    })
+    expect(result.current[0]).toBe(false)
+    act(() => {
+      jest.advanceTimersByTime(500)
+    })
+    expect(result.current[0]).toBe(false)
+
+    act(() => {
+      jest.advanceTimersByTime(500)
+    })
+
+    expect(result.current[0]).toBe(true)
+  })
+
+  it('should update state with callback function', () => {
+    const {result} = renderHook(() => useDelayedState(false))
+    const [, setState] = result.current
+
+    act(() => {
+      setState((prev: boolean) => !prev)
+    })
+
+    expect(result.current[0]).toBe(true)
+  })
+
+  it('should cancel update if the set state was called with a new state', () => {
+    const {result} = renderHook(() => useDelayedState(false))
+    const [, setState] = result.current
+
+    act(() => {
+      setState(true, 1000)
+    })
+    expect(result.current[0]).toBe(false)
+
+    jest.advanceTimersByTime(500)
+
+    act(() => {
+      setState(false)
+    })
+    jest.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/hooks/useDelayedState.ts

@@ -0,0 +1,29 @@
+import {useRef} from 'react'
+import {useState, useCallback, SetStateAction} from 'react'
+
+/**
+ * @beta
+ */
+export function useDelayedState<S>(
+  initialState: S | (() => S),
+): [S, (nextState: SetStateAction<S>, delay?: number) => void] {
+  const [state, setState] = useState(initialState)
+  const delayedAction = useRef<NodeJS.Timeout | undefined>()
+
+  const onStateChange = useCallback((nextState: SetStateAction<S>, delay?: number) => {
+    const action = () => {
+      setState(nextState)
+    }
+
+    // A new state change has been initiated, cancel the previous one.
+    if (delayedAction.current) {
+      clearTimeout(delayedAction.current)
+      delayedAction.current = undefined
+    }
+
+    if (!delay) return action()
+    delayedAction.current = setTimeout(action, delay)
+  }, [])
+
+  return [state, onStateChange]
+}

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

@@ -1,5 +1,5 @@
-import {Button, Card, Flex, Text, Tooltip} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {Button, Card, Flex, Text, Tooltip, TooltipDelayGroupProvider, Stack} from '@sanity/ui'
+import {useBoolean, useSelect, useText, useNumber} from '@sanity/ui-workshop'
 import {
   WORKSHOP_PLACEMENT_OPTIONS,
   WORKSHOP_SHADOW_OPTIONS,
@@ -11,20 +11,95 @@ export default function PropsStory() {
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 2, 'Props')
   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 shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 2)
 
   return (
     <Card height="fill">
-      <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-        <Tooltip
-          content={<Text size={1}>{content}</Text>}
-          padding={padding}
-          placement={placement}
-          portal={portal}
-          shadow={shadow}
+      <Flex
+        height="fill"
+        align="center"
+        justify="center"
+        padding={8}
+        sizing="border"
+        direction="column"
+        gap={4}
+      >
+        <Stack
+          padding={4}
+          style={{outline: '1px solid var(--card-border-color)', width: '100%', maxWidth: '640px'}}
+          space={4}
         >
-          <Button mode="bleed" text="Hover me" />
-        </Tooltip>
+          <Text align="center" size={3}>
+            Standalone tooltip
+          </Text>
+          <Flex align="center" justify="center" padding={4} sizing="border">
+            <Tooltip
+              content={<Text size={1}>{content}</Text>}
+              padding={padding}
+              placement={placement}
+              portal={portal}
+              shadow={shadow}
+              delay={{
+                open: openDelay,
+                close: closeDelay,
+              }}
+            >
+              <Button mode="bleed" text="Hover me" />
+            </Tooltip>
+          </Flex>
+        </Stack>
+        <Stack
+          padding={4}
+          style={{outline: '1px solid var(--card-border-color)', width: '100%', maxWidth: '640px'}}
+          space={4}
+        >
+          <Text align="center" size={3}>
+            Grouped tooltips
+          </Text>
+          <Text align="center" size={1}>
+            All tooltip delays are set to 1ms after the first tooltip within a DelayGroupProvider
+            opens.
+          </Text>
+          <Flex align="center" justify="center" padding={4} sizing="border" gap={4}>
+            <TooltipDelayGroupProvider
+              delay={{
+                open: openDelay,
+                close: closeDelay,
+              }}
+            >
+              <Tooltip
+                // This is overridden by the group delay, kept here intentionally for testing purposes.
+                delay={{
+                  open: 100,
+                  close: 100,
+                }}
+                content={<Text size={1}>{content}</Text>}
+                padding={padding}
+                placement={placement}
+                portal={portal}
+                shadow={shadow}
+              >
+                <Button mode="bleed" text="Hover me" />
+              </Tooltip>
+              <Tooltip
+                // This is overridden by the group delay, kept here intentionally for testing purposes.
+                delay={{
+                  open: 100,
+                  close: 100,
+                }}
+                content={<Text size={1}>{content}</Text>}
+                padding={padding}
+                placement={placement}
+                portal={portal}
+                shadow={shadow}
+              >
+                <Button mode="bleed" text="Or me" />
+              </Tooltip>
+            </TooltipDelayGroupProvider>
+          </Flex>
+        </Stack>
       </Flex>
     </Card>
   )

package/src/primitives/tooltip/index.ts

@@ -1 +1,2 @@
 export * from './tooltip'
+export * from './tooltipDelayGroup'

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

@@ -0,0 +1,278 @@
+/** @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 {Text, Button} from '../../primitives'
+import {Tooltip, TooltipDelayGroupProvider} from '../tooltip'
+
+describe('Tooltip', () => {
+  describe('Using same delay for open and close', () => {
+    it('should hide and show the tooltip content when hovered, with no delay', () => {
+      render(
+        <Tooltip content={<Text size={1}>{'Tooltip content'}</Text>} placement={'top'}>
+          <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.mouseEnter(button)
+
+      // Validate tooltip content is rendered
+      screen.getByText('Tooltip content')
+
+      fireEvent.mouseOut(button)
+      // Validate tooltip content is not rendered anymore
+      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+    })
+    it('should support delays to show and hide the tooltip.', () => {
+      jest.useFakeTimers()
+      const delay = 200
+
+      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.mouseEnter(button)
+
+      act(() => jest.advanceTimersByTime(delay / 2))
+      // Content should not be rendered yet
+      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      act(() => jest.advanceTimersByTime(delay / 2))
+
+      // Validate tooltip content is rendered
+      screen.getByText('Tooltip content')
+
+      fireEvent.mouseOut(button)
+      // Validate tooltip content is still showing.
+      screen.getByText('Tooltip content')
+      act(() => jest.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()
+      const openDelay = 200
+      const closeDelay = 150
+
+      render(
+        <Tooltip
+          content={<Text size={1}>{'Tooltip content'}</Text>}
+          placement={'top'}
+          delay={{
+            open: openDelay,
+            close: closeDelay,
+          }}
+        >
+          <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.mouseEnter(button)
+
+      act(() => jest.advanceTimersByTime(openDelay / 2))
+      // Content should not be rendered yet
+      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      act(() => jest.advanceTimersByTime(openDelay / 2))
+
+      // Validate tooltip content is rendered
+      screen.getByText('Tooltip content')
+
+      fireEvent.mouseOut(button)
+      // Validate tooltip content is still showing.
+      screen.getByText('Tooltip content')
+      act(() => jest.advanceTimersByTime(closeDelay))
+      // Validate tooltip content is not rendered anymore
+      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Using the <TooltipDelayGroupProvider />', () => {
+    it('should support groups with the same delay to open and close.', () => {
+      const delay = 150
+
+      jest.useFakeTimers()
+      render(
+        <TooltipDelayGroupProvider delay={delay}>
+          <Tooltip content={<Text size={1}>{'Tooltip 1'}</Text>} placement={'top'} delay={400}>
+            <Button mode="bleed" text="Button 1" />
+          </Tooltip>
+          <Tooltip
+            content={<Text size={1}>{'Tooltip 2'}</Text>}
+            placement={'top'}
+            delay={400} // This should be overridden by the group delay
+          >
+            <Button mode="bleed" text="Button 2" />
+          </Tooltip>
+        </TooltipDelayGroupProvider>,
+      )
+
+      const button1 = screen.getByText('Button 1')
+      const button2 = screen.getByText('Button 2')
+
+      // Validate tooltip content is not rendered
+      expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
+
+      // Hovers on first button, it should show first tooltip only
+      fireEvent.mouseEnter(button1)
+      act(() => jest.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))
+
+      // Validate Tooltip 1 is rendered
+      screen.getByText('Tooltip 1')
+      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
+
+      // Hovers on second button.
+      fireEvent.mouseOut(button1)
+      fireEvent.mouseEnter(button2)
+
+      // Validate Tooltip 1 is not rendered, now tooltip 2 is open.
+      act(() => jest.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))
+      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))
+      screen.getByText('Tooltip 2')
+
+      // Validate tooltip content is not rendered anymore
+      fireEvent.mouseOut(button2)
+      act(() => jest.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))
+      fireEvent.mouseEnter(button2)
+      act(() => jest.advanceTimersByTime(delay / 2))
+      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
+      act(() => jest.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()
+      render(
+        <TooltipDelayGroupProvider
+          delay={{
+            open: openDelay,
+            close: closeDelay,
+          }}
+        >
+          <Tooltip content={<Text size={1}>{'Tooltip 1'}</Text>} placement={'top'} delay={400}>
+            <Button mode="bleed" text="Button 1" />
+          </Tooltip>
+          <Tooltip
+            content={<Text size={1}>{'Tooltip 2'}</Text>}
+            placement={'top'}
+            delay={400} // This should be overridden by the group delay
+          >
+            <Button mode="bleed" text="Button 2" />
+          </Tooltip>
+        </TooltipDelayGroupProvider>,
+      )
+
+      const button1 = screen.getByText('Button 1')
+      const button2 = screen.getByText('Button 2')
+
+      // Validate tooltip content is not rendered
+      expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
+
+      // Hovers on first button, it should show first tooltip only
+      fireEvent.mouseEnter(button1)
+      act(() => jest.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))
+
+      // Validate Tooltip 1 is rendered
+      screen.getByText('Tooltip 1')
+      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
+
+      // Hovers on second button.
+      fireEvent.mouseOut(button1)
+      fireEvent.mouseEnter(button2)
+
+      // Validate Tooltip 1 is not rendered, now tooltip 2 is open.
+      act(() => jest.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))
+      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))
+      screen.getByText('Tooltip 2')
+
+      // Validate tooltip content is not rendered anymore
+      fireEvent.mouseOut(button2)
+      act(() => jest.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))
+      fireEvent.mouseEnter(button2)
+      act(() => jest.advanceTimersByTime(openDelay / 2))
+      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
+      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',
+      )
+
+      // Clean up the console.error mock
+      jest.clearAllMocks()
+    })
+  })
+})

package/src/primitives/tooltip/tooltip.tsx

@@ -20,15 +20,19 @@ import {
   useState,
   CSSProperties,
   ForwardedRef,
+  useId,
 } from 'react'
 import styled from 'styled-components'
 import {FLOATING_STATIC_SIDES} from '../../constants'
 import {useArrayProp, useForwardedRef} from '../../hooks'
+import {useDelayedState} from '../../hooks/useDelayedState'
 import {ThemeColorSchemeKey, useTheme} from '../../theme'
 import {Placement} from '../../types'
 import {Layer, LayerProps, Portal, useBoundaryElement} from '../../utils'
 import {Card} from '../card'
+import {Delay} from '../types'
 import {TooltipArrow} from './tooltipArrow'
+import {useTooltipDelayGroup} from './tooltipDelayGroup'
 
 /**
  * @public
@@ -46,6 +50,14 @@ export interface TooltipProps extends Omit<LayerProps, 'as'> {
   portal?: boolean | string
   scheme?: ThemeColorSchemeKey
   shadow?: number | number[]
+  /**
+   * @public Adds a delay to open or close the tooltip.  Defaults to 0.
+   *
+   * If only a `number` is passed, it will be used for both opening and closing.
+   *
+   * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
+   */
+  delay?: Delay
 }
 
 const Root = styled(Layer)`
@@ -73,6 +85,7 @@ export const Tooltip = forwardRef(function Tooltip(
     scheme,
     shadow = 2,
     zOffset = theme.sanity.layer?.tooltip.zOffset,
+    delay,
     ...restProps
   } = props
   const fallbackPlacements = useArrayProp(fallbackPlacementsProp)
@@ -149,11 +162,45 @@ export const Tooltip = forwardRef(function Tooltip(
     return style
   }, [arrowX, arrowY, staticSide])
 
-  const [isOpen, setIsOpen] = useState(false)
-  const handleBlur = useCallback(() => setIsOpen(false), [])
-  const handleFocus = useCallback(() => setIsOpen(true), [])
-  const handleMouseEnter = useCallback(() => setIsOpen(true), [])
-  const handleMouseLeave = useCallback(() => setIsOpen(false), [])
+  const tooltipId = useId()
+  const [isOpen, setIsOpen] = useDelayedState(false)
+  const delayGroupContext = useTooltipDelayGroup()
+  const showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId
+
+  const isInsideGroup = delayGroupContext !== null
+  const openDelayProp = typeof delay === 'number' ? delay : delay?.open || 0
+  const closeDelayProp = typeof delay === 'number' ? delay : delay?.close || 0
+
+  const openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp
+  const closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp
+
+  const handleIsOpenChange = useCallback(
+    (open: boolean) => {
+      if (isInsideGroup) {
+        //  When it's inside a group, the open or close status will be handled by the group.
+        if (open) {
+          delayGroupContext.setIsGroupActive(open, openDelay)
+          delayGroupContext.setOpenTooltipId(tooltipId, openDelay)
+        } else {
+          const minimumGroupDeactivateDelay = 200 // We should provide some delay to allow the user to reach the next tooltip.
+          const groupDeactivateDelay =
+            closeDelay > minimumGroupDeactivateDelay ? closeDelay : minimumGroupDeactivateDelay
+
+          delayGroupContext.setIsGroupActive(open, groupDeactivateDelay)
+          delayGroupContext.setOpenTooltipId(null, closeDelay)
+        }
+      } else {
+        // When it's not inside a group, the open or close status will be handled by the tooltip itself.
+        setIsOpen(open, open ? openDelay : closeDelay)
+      }
+    },
+    [isInsideGroup, delayGroupContext, openDelay, tooltipId, closeDelay, setIsOpen],
+  )
+
+  const handleBlur = useCallback(() => handleIsOpenChange(false), [handleIsOpenChange])
+  const handleFocus = useCallback(() => handleIsOpenChange(true), [handleIsOpenChange])
+  const handleMouseEnter = useCallback(() => handleIsOpenChange(true), [handleIsOpenChange])
+  const handleMouseLeave = useCallback(() => handleIsOpenChange(false), [handleIsOpenChange])
 
   // Detect whether the mouse is moving outside of the reference element. This is sometimes
   // necessary, because the tooltip might not always close as it should (e.g. when clicking
@@ -169,7 +216,7 @@ export const Tooltip = forwardRef(function Tooltip(
         (event.target instanceof Node && referenceElement.contains(event.target))
 
       if (!isHoveringReference) {
-        setIsOpen(false)
+        handleIsOpenChange(false)
         window.removeEventListener('mousemove', handleWindowMouseMove)
       }
     }
@@ -179,17 +226,17 @@ export const Tooltip = forwardRef(function Tooltip(
     return () => {
       window.removeEventListener('mousemove', handleWindowMouseMove)
     }
-  }, [isOpen, referenceElement])
+  }, [isOpen, referenceElement, handleIsOpenChange])
 
   // Close when `disabled` changes to `true`
   useEffect(() => {
-    if (disabled) setIsOpen(false)
-  }, [disabled])
+    if (disabled) handleIsOpenChange(false)
+  }, [disabled, handleIsOpenChange])
 
   // Close when `content` changes to falsy
   useEffect(() => {
-    if (!content) setIsOpen(false)
-  }, [content])
+    if (!content) handleIsOpenChange(false)
+  }, [content, handleIsOpenChange])
 
   // Update reference
   useEffect(() => refs.setReference(referenceElement), [referenceElement, refs])
@@ -268,7 +315,7 @@ export const Tooltip = forwardRef(function Tooltip(
     <>
       {child}
 
-      {isOpen && (
+      {showTooltip && (
         <>
           {portal ? (
             <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>

package/src/primitives/tooltip/tooltipDelayGroup/index.ts

@@ -0,0 +1,4 @@
+export * from './useTooltipDelayGroup'
+export * from './tooltipDelayGroupContext'
+export * from './tooltipDelayGroupProvider'
+export * from './types'

package/src/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupContext.tsx

@@ -0,0 +1,13 @@
+import {createContext} from 'react'
+import {globalScope} from '../../../lib/globalScope'
+import {TooltipDelayGroupContextValue} from './types'
+
+const key = Symbol.for('@sanity/ui/context/tooltipDelayGroup')
+
+globalScope[key] = globalScope[key] || createContext<TooltipDelayGroupContextValue | null>(null)
+
+/**
+ * @beta
+ */
+export const TooltipDelayGroupContext: React.Context<TooltipDelayGroupContextValue | null> =
+  globalScope[key]