@sanity/ui 2.0.0-alpha.20 → 2.0.0-alpha.21

package/package.json

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

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

@@ -0,0 +1,99 @@
+import {
+  BoundaryElementProvider,
+  Button,
+  Card,
+  Flex,
+  Portal,
+  PortalProvider,
+  Stack,
+  Text,
+  Tooltip,
+} from '@sanity/ui'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {useState} from 'react'
+import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
+
+const PORTAL_OPTIONS = {
+  '(true)': true,
+  '(false)': false,
+  portal1: 'portal1',
+}
+
+export default function CustomPortalStory() {
+  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 = useSelect('Portal', PORTAL_OPTIONS, undefined, 'Props')
+  const useBoundaryElement = useBoolean('Use boundary element', true)
+
+  const [portal1Element, setPortal1Element] = useState<HTMLDivElement | null>(null)
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+
+  return (
+    <PortalProvider
+      __unstable_elements={{
+        portal1: portal1Element,
+      }}
+    >
+      <Flex align="center" height="fill" justify="center">
+        <BoundaryElementProvider element={useBoundaryElement ? boundaryElement : null}>
+          <Card
+            border
+            padding={4}
+            ref={setBoundaryElement}
+            style={{
+              height: 'calc(100vh - 100px)',
+              position: 'relative',
+              width: '500px',
+            }}
+          >
+            <Text>Boundary element</Text>
+            <Flex align="center" height="fill" justify="center">
+              <Flex justify="center">
+                <Stack space={2}>
+                  <Tooltip
+                    boundaryElement={useBoundaryElement ? boundaryElement : null}
+                    content={<Text size={1}>{content}</Text>}
+                    padding={2}
+                    placement={placement}
+                    portal={portal}
+                  >
+                    <Button mode="bleed" text="Tooltip" />
+                  </Tooltip>
+                </Stack>
+              </Flex>
+            </Flex>
+          </Card>
+        </BoundaryElementProvider>
+      </Flex>
+
+      <Card
+        border
+        margin={4}
+        padding={4}
+        ref={setPortal1Element}
+        style={{
+          left: 0,
+          position: 'absolute',
+          top: 0,
+          width: '175px',
+        }}
+        tone="critical"
+      />
+
+      <Portal __unstable_name="portal1">
+        <Stack space={4}>
+          <Text size={1} weight="medium">
+            Portal 1 content
+          </Text>
+          <Text size={1}>
+            The tooltip's max-width should not exceed this container's width (minus padding) if it's
+            set to use this portal
+          </Text>
+        </Stack>
+      </Portal>
+    </PortalProvider>
+  )
+}

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

@@ -10,5 +10,20 @@ 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')),
+    },
+    {
+      name: 'customPortalStory',
+      title: 'Custom Portal',
+      component: lazy(() => import('./customPortal')),
+    },
   ],
 })

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

@@ -0,0 +1,73 @@
+import {BoundaryElementProvider, Button, Card, Code, Flex, Stack, Text, Tooltip} from '@sanity/ui'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {useCallback, 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)
+  const [buttonsVisible, setButtonsVisible] = useState(true)
+
+  const handleHideButtons = useCallback(() => {
+    setButtonsVisible(false)
+  }, [])
+
+  const handleShowButtons = useCallback(() => {
+    setButtonsVisible(true)
+  }, [])
+
+  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">
+              <Stack space={2}>
+                <Code size={1}>Placement: {placement}</Code>
+                <Button
+                  disabled={buttonsVisible}
+                  fontSize={1}
+                  onClick={handleShowButtons}
+                  text="Show buttons"
+                />
+              </Stack>
+            </Flex>
+          </Flex>
+
+          {buttonsVisible && (
+            <Tooltip
+              content={<Text size={1}>{content}</Text>}
+              padding={2}
+              placement={placement}
+              portal={portal}
+            >
+              <Button
+                mode="bleed"
+                onClick={handleHideButtons}
+                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

@@ -6,6 +6,17 @@ 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', () => {
@@ -275,6 +286,7 @@ describe('Tooltip', () => {
       jest.clearAllMocks()
     })
   })
+
   describe('Closing the <Tooltip /> with the Escape key', () => {
     it('Standalone tooltip closes immediately with Escape key', () => {
       const delay = 150
@@ -342,4 +354,117 @@ describe('Tooltip', () => {
       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)
+    })
+  })
 })

package/src/primitives/tooltip/tooltip.tsx

@@ -8,7 +8,6 @@ import {
   useFloating,
   Middleware,
   RootBoundary,
-  size,
 } from '@floating-ui/react-dom'
 import {
   cloneElement,
@@ -28,10 +27,10 @@ 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 {Layer, LayerProps, Portal, useBoundaryElement, usePortal} 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'
 
@@ -62,8 +61,9 @@ export interface TooltipProps extends Omit<LayerProps, 'as'> {
   delay?: Delay
 }
 
-const Root = styled(Layer)`
+const Root = styled(Layer)<{$maxWidth: number}>`
   pointer-events: none;
+  max-width: ${({$maxWidth}) => $maxWidth}px;
 `
 
 /**
@@ -86,7 +86,7 @@ export const Tooltip = forwardRef(function Tooltip(
       DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
     padding = 3,
     placement: placementProp = 'bottom',
-    portal,
+    portal: portalProp,
     scheme,
     shadow = 2,
     zOffset = theme.sanity.layer?.tooltip.zOffset,
@@ -99,6 +99,22 @@ export const Tooltip = forwardRef(function Tooltip(
   const arrowRef = useRef<HTMLDivElement | null>(null)
   const rootBoundary: RootBoundary = 'viewport'
 
+  const portal = usePortal()
+  const portalElement =
+    typeof portalProp === 'string' ? portal.elements?.[portalProp] || null : portal.element
+
+  // Get the maximum tooltip width (sans tooltip padding)
+  // Tooltip width should never exceed the width of either any supplied boundary or portal element.
+  // If both portal and boundary elements are provided, use the smaller width of the two.
+  const tooltipWidth = useMemo(() => {
+    const availableWidths = [
+      ...(boundaryElement ? [boundaryElement.offsetWidth] : []),
+      portalElement?.offsetWidth || document.body.offsetWidth,
+    ]
+
+    return Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2
+  }, [boundaryElement, portalElement?.offsetWidth])
+
   const middleware = useMemo(() => {
     const ret: Middleware[] = []
 
@@ -107,33 +123,20 @@ export const Tooltip = forwardRef(function Tooltip(
       flip({
         boundary: 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,
         rootBoundary,
-        padding: 4,
+        padding: DEFAULT_TOOLTIP_PADDING,
       }),
     )
 
@@ -206,10 +209,48 @@ export const Tooltip = forwardRef(function Tooltip(
     [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])
+  const handleBlur = useCallback(
+    (e: FocusEvent) => {
+      handleIsOpenChange(false)
+      childProp?.props?.onBlur?.(e)
+    },
+    [childProp?.props, handleIsOpenChange],
+  )
+  const handleClick = useCallback(
+    (e: MouseEvent) => {
+      handleIsOpenChange(false, true), [handleIsOpenChange]
+      childProp?.props.onClick?.(e)
+    },
+    [childProp?.props, handleIsOpenChange],
+  )
+  const handleContextMenu = useCallback(
+    (e: MouseEvent) => {
+      handleIsOpenChange(false, true), [handleIsOpenChange]
+      childProp?.props.onContextMenu?.(e)
+    },
+    [childProp?.props, handleIsOpenChange],
+  )
+  const handleFocus = useCallback(
+    (e: FocusEvent) => {
+      handleIsOpenChange(true)
+      childProp?.props?.onFocus?.(e)
+    },
+    [childProp?.props, handleIsOpenChange],
+  )
+  const handleMouseEnter = useCallback(
+    (e: MouseEvent) => {
+      handleIsOpenChange(true)
+      childProp?.props?.onMouseEnter?.(e)
+    },
+    [childProp?.props, handleIsOpenChange],
+  )
+  const handleMouseLeave = useCallback(
+    (e: MouseEvent) => {
+      handleIsOpenChange(false)
+      childProp?.props?.onMouseLeave?.(e)
+    },
+    [childProp?.props, 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
@@ -306,9 +347,20 @@ export const Tooltip = forwardRef(function Tooltip(
       onFocus: handleFocus,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      onContextMenu: handleContextMenu,
       ref: setReference,
     })
-  }, [childProp, handleBlur, handleFocus, handleMouseEnter, handleMouseLeave, setReference])
+  }, [
+    childProp,
+    handleBlur,
+    handleClick,
+    handleContextMenu,
+    handleFocus,
+    handleMouseEnter,
+    handleMouseLeave,
+    setReference,
+  ])
 
   if (!child) return <></>
 
@@ -321,6 +373,7 @@ export const Tooltip = forwardRef(function Tooltip(
       ref={setFloating}
       style={floatingStyles}
       zOffset={zOffset}
+      $maxWidth={tooltipWidth}
     >
       <Card
         data-ui="Tooltip__card"
@@ -342,8 +395,8 @@ export const Tooltip = forwardRef(function Tooltip(
 
       {showTooltip && (
         <>
-          {portal ? (
-            <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>
+          {portalProp ? (
+            <Portal __unstable_name={typeof portalProp === 'string' ? portalProp : undefined}>
               {root}
             </Portal>
           ) : (