@sanity/ui 1.8.3 → 1.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "1.8.3",
+  "version": "1.9.1",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",
@@ -44,8 +44,8 @@
     "test": "jest",
     "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
     "watch": "pkg watch --strict",
-    "workshop:build": "node -r esbuild-register -r tsconfig-paths/register scripts/build",
-    "workshop:dev": "node -r esbuild-register -r tsconfig-paths/register scripts/dev",
+    "workshop:build": "workshop build",
+    "workshop:dev": "workshop dev",
     "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
   },
   "dependencies": {
@@ -66,7 +66,7 @@
     "@juggle/resize-observer": "^3.4.0",
     "@sanity/pkg-utils": "^2.4.8",
     "@sanity/semantic-release-preset": "^4.1.4",
-    "@sanity/ui-workshop": "^1.2.11",
+    "@sanity/ui-workshop": "^2.0.0",
     "@testing-library/dom": "^9.3.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
@@ -84,8 +84,6 @@
     "cypress": "^13.1.0",
     "cypress-real-events": "^1.10.1",
     "cz-conventional-changelog": "^3.3.0",
-    "esbuild": "^0.19.2",
-    "esbuild-register": "^3.4.2",
     "eslint": "^8.48.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.28.1",

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

@@ -10,5 +10,15 @@ export default defineScope({
       title: 'Props',
       component: lazy(() => import('./props')),
     },
+    {
+      name: 'resizableBoundary',
+      title: 'Resizable Boundary',
+      component: lazy(() => import('./resizableBoundary')),
+    },
+    {
+      name: 'overflowBoundary',
+      title: 'Overflowing Boundary',
+      component: lazy(() => import('./overflowingBoundary')),
+    },
   ],
 })

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

@@ -0,0 +1,53 @@
+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 OverflowingBoundaryStory() {
+  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, 'top')
+  const portal = useBoolean('Portal', false)
+  const useBoundaryElement = useBoolean('Use boundary element', true)
+
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+
+  return (
+    <Flex align="center" height="fill" justify="center" style={{height: '200vh'}}>
+      <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, right: 10}}
+              text="Tooltip"
+            />
+          </Tooltip>
+        </Card>
+      </BoundaryElementProvider>
+    </Flex>
+  )
+}

package/src/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/primitives/tooltip/constants.ts

@@ -1,5 +1,6 @@
 import {Placement} from '@floating-ui/react-dom'
 
+export const DEFAULT_TOOLTIP_PADDING = 4
 export const DEFAULT_FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {
   top: ['bottom', 'left', 'right'],
   'top-start': ['bottom-start', 'left-start', 'right-start'],

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

@@ -8,7 +8,6 @@ import {
   useFloating,
   Middleware,
   RootBoundary,
-  size,
 } from '@floating-ui/react-dom'
 import {
   cloneElement,
@@ -31,7 +30,7 @@ import {Placement} from '../../types'
 import {Layer, LayerProps, Portal, useBoundaryElement} from '../../utils'
 import {Card} from '../card'
 import {Delay} from '../types'
-import {DEFAULT_FALLBACK_PLACEMENTS} from './constants'
+import {DEFAULT_FALLBACK_PLACEMENTS, DEFAULT_TOOLTIP_PADDING} from './constants'
 import {TooltipArrow} from './tooltipArrow'
 import {useTooltipDelayGroup} from './tooltipDelayGroup'
 
@@ -63,6 +62,9 @@ export interface TooltipProps extends Omit<LayerProps, 'as'> {
 
 const Root = styled(Layer)`
   pointer-events: none;
+  // Note that 100vw doesn't exclude system scrollbars.
+  // This should be sufficiently small enough to not trigger overflow-x scrollbars when portalled.
+  max-width: calc(100vw - ${DEFAULT_TOOLTIP_PADDING * 10}px);
 `
 
 /**
@@ -102,35 +104,22 @@ export const Tooltip = forwardRef(function Tooltip(
     // Flip the floating element when leaving the boundary box
     ret.push(
       flip({
-        boundary: boundaryElement || undefined,
+        boundary: portal ? undefined : boundaryElement || undefined,
         fallbackPlacements,
-        padding: 4,
+        padding: DEFAULT_TOOLTIP_PADDING,
         rootBoundary,
-        mainAxis: false,
       }),
     )
 
     // Define distance between reference and floating element
     ret.push(offset({mainAxis: 3}))
 
-    // Set width and height on the floating element
-    ret.push(
-      size({
-        apply({availableWidth, availableHeight, elements}) {
-          Object.assign(elements.floating.style, {
-            maxWidth: `${availableWidth - 4 * 2}px`, // the padding is `4px`
-            maxHeight: `${availableHeight - 4 * 2}px`, // the padding is `4px`
-          })
-        },
-      }),
-    )
-
-    // Shift the tooltip so its sits with the boundary eleement
+    // Shift the tooltip so its sits with the boundary element
     ret.push(
       shift({
-        boundary: boundaryElement || undefined,
+        boundary: portal ? undefined : boundaryElement || undefined,
         rootBoundary,
-        padding: 4,
+        padding: DEFAULT_TOOLTIP_PADDING,
       }),
     )
 
@@ -138,7 +127,7 @@ export const Tooltip = forwardRef(function Tooltip(
     ret.push(arrow({element: arrowRef, padding: 2}))
 
     return ret
-  }, [boundaryElement, fallbackPlacements])
+  }, [boundaryElement, fallbackPlacements, portal])
 
   const {floatingStyles, placement, middlewareData, refs, update} = useFloating({
     middleware,
@@ -177,23 +166,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 +236,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