@sanity/ui 1.7.11 → 1.8.0

package/src/primitives/tooltip/tooltip.tsx

@@ -8,6 +8,7 @@ import {
   useFloating,
   Middleware,
   RootBoundary,
+  size,
 } from '@floating-ui/react-dom'
 import {
   cloneElement,
@@ -19,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
@@ -45,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)`
@@ -72,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)
@@ -90,12 +104,25 @@ export const Tooltip = forwardRef(function Tooltip(
         fallbackPlacements,
         padding: 4,
         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
     ret.push(
       shift({
@@ -111,21 +138,12 @@ export const Tooltip = forwardRef(function Tooltip(
     return ret
   }, [boundaryElement, fallbackPlacements])
 
-  const {x, y, placement, middlewareData, refs, update, strategy} = useFloating({
+  const {floatingStyles, placement, middlewareData, refs, update} = useFloating({
     middleware,
     placement: placementProp,
     whileElementsMounted: autoUpdate,
   })
 
-  const rootStyle: CSSProperties = useMemo(
-    () => ({
-      position: strategy,
-      top: y ?? 0,
-      left: x ?? 0,
-    }),
-    [strategy, x, y],
-  )
-
   const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]]
 
   const arrowX = middlewareData.arrow?.x
@@ -144,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
@@ -164,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)
       }
     }
@@ -174,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])
@@ -238,7 +290,13 @@ export const Tooltip = forwardRef(function Tooltip(
   if (disabled) return child
 
   const root = (
-    <Root data-ui="Tooltip" {...restProps} ref={setFloating} style={rootStyle} zOffset={zOffset}>
+    <Root
+      data-ui="Tooltip"
+      {...restProps}
+      ref={setFloating}
+      style={floatingStyles}
+      zOffset={zOffset}
+    >
       <Card
         data-ui="Tooltip__card"
         data-placement={placement}
@@ -257,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]

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

@@ -0,0 +1,61 @@
+import {useMemo} from 'react'
+import {useDelayedState} from '../../../hooks/useDelayedState'
+import {Delay} from '../../types'
+import {TooltipDelayGroupContext} from './tooltipDelayGroupContext'
+import {TooltipDelayGroupContextValue} from './types'
+import {useTooltipDelayGroup} from './useTooltipDelayGroup'
+/**
+ * @public
+ * */
+export interface TooltipDelayGroupProviderProps {
+  children?: React.ReactNode
+  /**
+   * @public Handles the delays to open or close a tooltip inside a group
+   *
+   * 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
+}
+
+/**
+ * @public
+ * Provides context for a group of tooltip elements that should share a delay
+ * which temporarily becomes 1 ms after the first floating element of the group opens.
+ */
+export function TooltipDelayGroupProvider(
+  props: TooltipDelayGroupProviderProps,
+): React.ReactElement {
+  const {children, delay} = props
+  const [isGroupActive, setIsGroupActive] = useDelayedState(false)
+  const [openTooltipId, setOpenTooltipId] = useDelayedState<string | null>(null)
+
+  const isInsideContext = useTooltipDelayGroup()
+
+  if (isInsideContext) {
+    throw new Error(
+      'TooltipDelayGroupProvider cannot be nested inside another TooltipDelayGroupProvider',
+    )
+  }
+
+  const openDelay = typeof delay === 'number' ? delay : delay?.open || 0
+  const closeDelay = typeof delay === 'number' ? delay : delay?.close || 0
+
+  const value: TooltipDelayGroupContextValue = useMemo(
+    () => ({
+      isGroupActive: isGroupActive,
+      setIsGroupActive: setIsGroupActive,
+      openTooltipId: openTooltipId,
+      setOpenTooltipId: setOpenTooltipId,
+      // When the group is active, we want the next tooltip to open immediately.
+      openDelay: isGroupActive ? 1 : openDelay,
+      closeDelay: closeDelay,
+    }),
+    [closeDelay, isGroupActive, openDelay, openTooltipId, setIsGroupActive, setOpenTooltipId],
+  )
+
+  return (
+    <TooltipDelayGroupContext.Provider value={value}>{children}</TooltipDelayGroupContext.Provider>
+  )
+}

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

@@ -0,0 +1,11 @@
+/**
+ * @beta
+ */
+export interface TooltipDelayGroupContextValue {
+  isGroupActive: boolean
+  setIsGroupActive: (nextState: React.SetStateAction<boolean>, delay?: number | undefined) => void
+  setOpenTooltipId: (nextId: string | null, delay?: number | undefined) => void
+  openDelay: number
+  closeDelay: number
+  openTooltipId: string | null
+}

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

@@ -0,0 +1,12 @@
+import {useContext} from 'react'
+import {TooltipDelayGroupContext} from './tooltipDelayGroupContext'
+import {TooltipDelayGroupContextValue} from './types'
+
+/**
+ * @beta
+ */
+export function useTooltipDelayGroup(): TooltipDelayGroupContextValue | null {
+  const value = useContext(TooltipDelayGroupContext)
+
+  return value
+}

package/src/primitives/types.ts

@@ -129,3 +129,13 @@ export interface ResponsiveShadowProps {
 export interface ResponsiveWidthProps {
   width?: number | 'auto' | (number | 'auto')[]
 }
+
+/**
+ * @beta
+ */
+export type Delay =
+  | number
+  | Partial<{
+      open: number
+      close: number
+    }>