@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.2

package/src/{primitives → core/primitives}/tooltip/tooltip.tsx

@@ -8,8 +8,9 @@ import {
   useFloating,
   Middleware,
   RootBoundary,
-  size,
 } from '@floating-ui/react-dom'
+import {ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {AnimatePresence, motion} from 'framer-motion'
 import {
   cloneElement,
   forwardRef,
@@ -23,16 +24,22 @@ import {
   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 {useTheme_v2} from '../../theme'
 import {Placement} from '../../types'
-import {Layer, LayerProps, Portal, useBoundaryElement} from '../../utils'
+import {Arrow, Layer, LayerProps, Portal, useBoundaryElement, usePortal} from '../../utils'
 import {Card} from '../card'
 import {Delay} from '../types'
-import {DEFAULT_FALLBACK_PLACEMENTS} from './constants'
-import {TooltipArrow} from './tooltipArrow'
+import {ConditionalWrapper} from './conditionalWrapper'
+import {
+  DEFAULT_FALLBACK_PLACEMENTS,
+  DEFAULT_TOOLTIP_ARROW_HEIGHT,
+  DEFAULT_TOOLTIP_ARROW_RADIUS,
+  DEFAULT_TOOLTIP_ARROW_WIDTH,
+  DEFAULT_TOOLTIP_DISTANCE,
+  DEFAULT_TOOLTIP_PADDING,
+} from './constants'
 import {useTooltipDelayGroup} from './tooltipDelayGroup'
 
 /**
@@ -41,6 +48,7 @@ import {useTooltipDelayGroup} from './tooltipDelayGroup'
 export interface TooltipProps extends Omit<LayerProps, 'as'> {
   /** @deprecated Use `fallbackPlacements` instead. */
   allowedAutoPlacements?: Placement[]
+  arrow?: boolean
   boundaryElement?: HTMLElement | null
   children?: React.ReactElement
   content?: React.ReactNode
@@ -48,24 +56,39 @@ export interface TooltipProps extends Omit<LayerProps, 'as'> {
   fallbackPlacements?: Placement[]
   padding?: number | number[]
   placement?: Placement
+  /** Whether or not to render the tooltip in a portal element. */
   portal?: boolean | string
+  radius?: number | number[]
   scheme?: ThemeColorSchemeKey
   shadow?: number | number[]
   /**
-   * @public Adds a delay to open or close the tooltip.  Defaults to 0.
+   * Adds a delay to open or close the tooltip.
    *
    * 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.
+   *
+   * @public
+   * @defaultValue 0
    */
   delay?: Delay
+  /**
+   * Whether the tooltip should animate in and out.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  animate?: boolean
 }
 
-const Root = styled(Layer)`
+const Root = styled(Layer)<{$maxWidth: number}>`
   pointer-events: none;
+  max-width: ${({$maxWidth}) => $maxWidth}px;
 `
 
 /**
+ * Tooltips display information when hovering, focusing or tapping.
+ *
  * @public
  */
 export const Tooltip = forwardRef(function Tooltip(
@@ -73,21 +96,24 @@ export const Tooltip = forwardRef(function Tooltip(
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const boundaryElementContext = useBoundaryElement()
-  const theme = useTheme()
+  const {layer} = useTheme_v2()
   const {
+    arrow: arrowProp = false,
     boundaryElement = boundaryElementContext?.element,
     children: childProp,
     content,
     disabled,
     fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ??
       DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
-    padding = 3,
+    padding = 2,
     placement: placementProp = 'bottom',
-    portal,
+    portal: portalProp,
+    radius = 2,
     scheme,
     shadow = 2,
-    zOffset = theme.sanity.layer?.tooltip.zOffset,
+    zOffset = layer.tooltip.zOffset,
     delay,
+    animate = false,
     ...restProps
   } = props
   const fallbackPlacements = useArrayProp(fallbackPlacementsProp)
@@ -96,6 +122,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[] = []
 
@@ -104,41 +146,30 @@ 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`
-          })
-        },
-      }),
-    )
+    ret.push(offset({mainAxis: DEFAULT_TOOLTIP_DISTANCE}))
 
-    // 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,
       }),
     )
 
     // Place arrow
-    ret.push(arrow({element: arrowRef, padding: 2}))
+    if (arrowProp) {
+      ret.push(arrow({element: arrowRef, padding: DEFAULT_TOOLTIP_PADDING}))
+    }
 
     return ret
-  }, [boundaryElement, fallbackPlacements])
+  }, [arrowProp, boundaryElement, fallbackPlacements])
 
   const {floatingStyles, placement, middlewareData, refs, update} = useFloating({
     middleware,
@@ -146,23 +177,18 @@ export const Tooltip = forwardRef(function Tooltip(
     whileElementsMounted: autoUpdate,
   })
 
-  const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]]
-
   const arrowX = middlewareData.arrow?.x
   const arrowY = middlewareData.arrow?.y
 
-  const arrowStyle: CSSProperties = useMemo(() => {
-    const style: CSSProperties = {
+  const arrowStyle: CSSProperties = useMemo(
+    () => ({
       left: arrowX !== null ? arrowX : undefined,
       top: arrowY !== null ? arrowY : undefined,
       right: undefined,
       bottom: undefined,
-    }
-
-    if (staticSide) style[staticSide] = -15
-
-    return style
-  }, [arrowX, arrowY, staticSide])
+    }),
+    [arrowX, arrowY],
+  )
 
   const tooltipId = useId()
   const [isOpen, setIsOpen] = useDelayedState(false)
@@ -177,38 +203,80 @@ 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],
   )
 
-  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
   // the reference element triggers a CPU-heavy operation.)
   useEffect(() => {
-    if (!isOpen) return
+    if (!showTooltip) return
 
     function handleWindowMouseMove(event: MouseEvent) {
       if (!referenceElement) return
@@ -228,21 +296,37 @@ export const Tooltip = forwardRef(function Tooltip(
     return () => {
       window.removeEventListener('mousemove', handleWindowMouseMove)
     }
-  }, [isOpen, referenceElement, handleIsOpenChange])
+  }, [showTooltip, referenceElement, handleIsOpenChange])
 
   // Close when `disabled` changes to `true`
   useEffect(() => {
-    if (disabled) handleIsOpenChange(false)
-  }, [disabled, handleIsOpenChange])
+    if (disabled && showTooltip) handleIsOpenChange(false)
+  }, [disabled, handleIsOpenChange, showTooltip])
 
   // Close when `content` changes to falsy
   useEffect(() => {
-    if (!content) handleIsOpenChange(false)
-  }, [content, handleIsOpenChange])
+    if (!content && showTooltip) handleIsOpenChange(false)
+  }, [content, handleIsOpenChange, showTooltip])
 
   // 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
@@ -283,9 +367,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 <></>
 
@@ -298,36 +393,64 @@ export const Tooltip = forwardRef(function Tooltip(
       ref={setFloating}
       style={floatingStyles}
       zOffset={zOffset}
+      $maxWidth={tooltipWidth}
     >
-      <Card
-        data-ui="Tooltip__card"
-        data-placement={placement}
-        padding={padding}
-        radius={3}
-        scheme={scheme}
-        shadow={shadow}
+      <ConditionalWrapper
+        condition={animate} // Add animation wrapper if it should animate
+        wrapper={(children) => (
+          <motion.div
+            initial={{opacity: 0.5, scale: 0.95}}
+            animate={{opacity: 1, scale: 1}}
+            exit={{opacity: 0, scale: 0.95}}
+            transition={{duration: 0.3, type: 'spring'}}
+          >
+            {children}
+          </motion.div>
+        )}
       >
-        {content}
-        <TooltipArrow ref={setArrow} style={arrowStyle} />
-      </Card>
+        <Card
+          data-ui="Tooltip__card"
+          data-placement={placement}
+          padding={padding}
+          radius={radius}
+          scheme={scheme}
+          shadow={shadow}
+        >
+          {content}
+          {arrowProp && (
+            <Arrow
+              ref={setArrow}
+              style={arrowStyle}
+              width={DEFAULT_TOOLTIP_ARROW_WIDTH}
+              height={DEFAULT_TOOLTIP_ARROW_HEIGHT}
+              radius={DEFAULT_TOOLTIP_ARROW_RADIUS}
+            />
+          )}
+        </Card>
+      </ConditionalWrapper>
     </Root>
   )
 
   return (
     <>
       {child}
-
-      {showTooltip && (
-        <>
-          {portal ? (
-            <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>
-              {root}
-            </Portal>
-          ) : (
-            root
-          )}
-        </>
-      )}
+      <ConditionalWrapper
+        condition={animate}
+        wrapper={(children) => <AnimatePresence>{children}</AnimatePresence>} // Add AnimatePresence if it should animate
+      >
+        {showTooltip && (
+          <ConditionalWrapper
+            condition={!!portalProp} // Add portal if portalProp is set
+            wrapper={(children) => (
+              <Portal __unstable_name={typeof portalProp === 'string' ? portalProp : undefined}>
+                {children}
+              </Portal>
+            )}
+          >
+            {root}
+          </ConditionalWrapper>
+        )}
+      </ConditionalWrapper>
     </>
   )
 })

package/src/{primitives → core/primitives}/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx

@@ -3,18 +3,20 @@ 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
+   * 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.
+   *
+   * @public
    */
   delay: Delay
 }
@@ -31,14 +33,6 @@ export function TooltipDelayGroupProvider(
   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
 

package/src/{primitives → core/primitives}/types.ts

@@ -55,6 +55,7 @@ export interface ResponsiveFlexProps {
  * @public
  */
 export interface ResponsiveFlexItemProps {
+  /** Sets the flex CSS attribute. The property is responsive. */
   flex?: FlexValue | FlexValue[]
 }
 
@@ -88,8 +89,11 @@ export interface ResponsiveGridItemProps {
  * @public
  */
 export interface ResponsiveMarginProps {
+  /** Applies margins to all sides. The property is responsive. */
   margin?: number | number[]
+  /** Applies margins to the left and right sides. The property is responsive. */
   marginX?: number | number[]
+  /** Applies margins to the top and bottom sides. The property is responsive. */
   marginY?: number | number[]
   marginTop?: number | number[]
   marginRight?: number | number[]

package/src/core/styles/border/borderStyle.ts

@@ -0,0 +1,55 @@
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+import {_responsive} from '../helpers'
+import {ThemeProps} from '../types'
+import {ResponsiveBorderStyleProps} from './types'
+
+export function responsiveBorderStyle(): Array<
+  (props: ResponsiveBorderStyleProps & ThemeProps) => CSSObject[]
+> {
+  return [border, borderTop, borderRight, borderBottom, borderLeft]
+}
+
+function border(props: ResponsiveBorderStyleProps & ThemeProps) {
+  const {card, media} = getTheme_v2(props.theme)
+  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
+
+  return _responsive(media, props.$border, (value) =>
+    value ? {'&&': {border: borderStyle}} : {'&&': {border: 0}},
+  )
+}
+
+function borderTop(props: ResponsiveBorderStyleProps & ThemeProps) {
+  const {card, media} = getTheme_v2(props.theme)
+  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
+
+  return _responsive(media, props.$borderTop, (value) =>
+    value ? {'&&': {borderTop: borderStyle}} : {'&&': {borderTop: 0}},
+  )
+}
+
+function borderRight(props: ResponsiveBorderStyleProps & ThemeProps) {
+  const {card, media} = getTheme_v2(props.theme)
+  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
+
+  return _responsive(media, props.$borderRight, (value) =>
+    value ? {'&&': {borderRight: borderStyle}} : {'&&': {borderRight: 0}},
+  )
+}
+
+function borderBottom(props: ResponsiveBorderStyleProps & ThemeProps) {
+  const {card, media} = getTheme_v2(props.theme)
+  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
+
+  return _responsive(media, props.$borderBottom, (value) =>
+    value ? {'&&': {borderBottom: borderStyle}} : {'&&': {borderBottom: 0}},
+  )
+}
+
+function borderLeft(props: ResponsiveBorderStyleProps & ThemeProps) {
+  const {card, media} = getTheme_v2(props.theme)
+  const borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`
+
+  return _responsive(media, props.$borderLeft, (value) =>
+    value ? {'&&': {borderLeft: borderStyle}} : {'&&': {borderLeft: 0}},
+  )
+}

package/src/{styles → core/styles}/box/boxStyle.ts

@@ -1,5 +1,5 @@
+import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
 import {Property} from 'csstype'
-import {CSSObject} from '../../types/styled'
 import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveBoxStyleProps} from './types'
@@ -36,8 +36,7 @@ export function responsiveBoxStyle(): Array<
 }
 
 function responsiveBoxDisplayStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$display, (display) => ({
     '&:not([hidden])': {display},
@@ -45,8 +44,7 @@ function responsiveBoxDisplayStyle(props: ResponsiveBoxStyleProps & ThemeProps)
 }
 
 function responsiveBoxSizingStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$sizing, (sizing) => ({
     boxSizing: BOX_SIZING[sizing],
@@ -54,8 +52,7 @@ function responsiveBoxSizingStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
 }
 
 function responsiveBoxHeightStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$height, (height) => ({
     height: BOX_HEIGHT[height],
@@ -63,8 +60,7 @@ function responsiveBoxHeightStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
 }
 
 function responsiveBoxOverflowStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
+  const {media} = getTheme_v2(props.theme)
 
   return _responsive(media, props.$overflow, (overflow) => ({
     overflow,