@sanity/ui 1.8.3 → 1.9.0

package/package.json

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

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

@@ -275,4 +275,71 @@ describe('Tooltip', () => {
       jest.clearAllMocks()
     })
   })
+  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>,
+      )
+
+      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()
+    })
+  })
 })

package/src/primitives/tooltip/tooltip.tsx

@@ -177,23 +177,27 @@ export const Tooltip = forwardRef(function Tooltip(
   const closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp
 
   const handleIsOpenChange = useCallback(
-    (open: boolean) => {
+    (open: boolean, immediate?: 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)
+          const groupedOpenDelay = immediate ? 0 : openDelay
+
+          delayGroupContext.setIsGroupActive(open, groupedOpenDelay)
+          delayGroupContext.setOpenTooltipId(tooltipId, groupedOpenDelay)
         } 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)
+          delayGroupContext.setOpenTooltipId(null, immediate ? 0 : closeDelay)
         }
       } else {
+        const standaloneDelay = immediate ? 0 : open ? openDelay : closeDelay
+
         // When it's not inside a group, the open or close status will be handled by the tooltip itself.
-        setIsOpen(open, open ? openDelay : closeDelay)
+        setIsOpen(open, standaloneDelay)
       }
     },
     [isInsideGroup, delayGroupContext, openDelay, tooltipId, closeDelay, setIsOpen],
@@ -243,6 +247,22 @@ export const Tooltip = forwardRef(function Tooltip(
   // Update reference
   useEffect(() => refs.setReference(referenceElement), [referenceElement, refs])
 
+  useEffect(() => {
+    // If the user clicks on escape key, close the tooltip.
+    if (!showTooltip) return
+
+    function handleWindowKeyDown(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        handleIsOpenChange(false, true)
+      }
+    }
+
+    window.addEventListener('keydown', handleWindowKeyDown)
+
+    return () => {
+      window.removeEventListener('keydown', handleWindowKeyDown)
+    }
+  }, [handleIsOpenChange, showTooltip])
   const setArrow = useCallback(
     (arrowEl: HTMLDivElement | null) => {
       arrowRef.current = arrowEl