@sanity/ui 2.9.0-canary.6 → 2.10.0-corel.0

package/src/core/primitives/popover/popover.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {
+  Middleware,
   RootBoundary,
   arrow,
   autoUpdate,
@@ -20,10 +21,8 @@ import {
   useCallback,
   useEffect,
   useImperativeHandle,
-  useLayoutEffect,
   useMemo,
   useRef,
-  useState,
 } from 'react'
 import {useArrayProp, useElementSize, useMediaIndex, usePrefersReducedMotion} from '../../hooks'
 import {origin} from '../../middleware/origin'
@@ -127,14 +126,15 @@ export const Popover = memo(
       __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
       animate: _animate = false,
       arrow: arrowProp = false,
-      boundaryElement: _boundaryElement,
+      boundaryElement = boundaryElementContext.element,
       children: childProp,
       constrainSize = false,
       content,
       disabled,
-      fallbackPlacements: _fallbackPlacements,
+      fallbackPlacements = props.fallbackPlacements ??
+        DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
       matchReferenceWidth,
-      floatingBoundary: _floatingBoundary,
+      floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onActivate,
       open,
@@ -144,23 +144,16 @@ export const Popover = memo(
       portal,
       preventOverflow = true,
       radius: radiusProp = 3,
-      referenceBoundary: _referenceBoundary,
+      referenceBoundary = props.boundaryElement ?? boundaryElementContext.element,
       referenceElement,
       scheme,
       shadow: shadowProp = 3,
       tone = 'inherit',
       width: widthProp = 'auto',
-      zOffset: _zOffsetProp,
+      zOffset: zOffsetProp = layer.popover.zOffset,
       updateRef,
       ...restProps
     } = props
-    const boundaryElement = _boundaryElement ?? boundaryElementContext.element
-    const fallbackPlacements =
-      _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom']
-    const floatingBoundary = _floatingBoundary ?? boundaryElement ?? boundaryElementContext.element
-    const referenceBoundary =
-      _referenceBoundary ?? boundaryElement ?? boundaryElementContext.element
-    const zOffsetProp = _zOffsetProp ?? layer.popover.zOffset
     const prefersReducedMotion = usePrefersReducedMotion()
     const animate = prefersReducedMotion ? false : _animate
     const boundarySize = useElementSize(boundaryElement)?.border
@@ -170,7 +163,7 @@ export const Popover = memo(
     const widthArrayProp = useArrayProp(widthProp)
     const zOffset = useArrayProp(zOffsetProp)
     const ref = useRef<HTMLDivElement | null>(null)
-    const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null)
+    const arrowRef = useRef<HTMLDivElement | null>(null)
     const rootBoundary: RootBoundary = 'viewport'
 
     useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(
@@ -181,70 +174,94 @@ export const Popover = memo(
     const mediaIndex = useMediaIndex()
     const boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : undefined
 
+    // Update width when
+    // - media index changes
+    // - `width` property changes
+    const width = calcCurrentWidth({
+      container,
+      mediaIndex,
+      width: widthArrayProp,
+    })
+    const widthRef = useRef(width)
+
+    useEffect(() => {
+      widthRef.current = width
+    }, [width])
+
+    // Update max width when
+    // - boundary width changes
+    // - `width` property changes
+    const maxWidth = calcMaxWidth({boundaryWidth, currentWidth: width})
+    const maxWidthRef = useRef(maxWidth)
+
+    useEffect(() => {
+      maxWidthRef.current = maxWidth
+    }, [maxWidth])
+
+    // Keep track of reference element width (see `size` middleware below)
+    const referenceWidthRef = useRef<number>()
+
     // Force apply width & max width to floating element
-    useLayoutEffect(() => {
+    useEffect(() => {
       const floatingElement = ref.current
 
-      // If constrainSize or matchReferenceWidth is true, then the styles are set by the `size` middleware
-      if (!open || !floatingElement || constrainSize || matchReferenceWidth) return
+      if (!open || !floatingElement) return
 
-      const currentWidth = calcCurrentWidth({
-        container,
-        mediaIndex,
-        width: widthArrayProp,
-      })
-      const maxWidth = calcMaxWidth({boundaryWidth, currentWidth})
+      const referenceWidth = referenceWidthRef.current
 
-      if (currentWidth !== undefined) {
-        floatingElement.style.width = `${currentWidth}px`
+      if (matchReferenceWidth) {
+        if (referenceWidth !== undefined) {
+          floatingElement.style.width = `${referenceWidth}px`
+        }
+      } else if (width !== undefined) {
+        floatingElement.style.width = `${width}px`
       }
 
       if (typeof maxWidth === 'number') {
         floatingElement.style.maxWidth = `${maxWidth}px`
       }
-    }, [
-      boundaryWidth,
-      constrainSize,
-      container,
-      matchReferenceWidth,
-      mediaIndex,
-      open,
-      widthArrayProp,
-    ])
+    }, [width, matchReferenceWidth, maxWidth, open])
 
-    const {x, y, middlewareData, placement, refs, strategy, update} = useFloating({
-      middleware: [
-        // Flip the floating element when leaving the boundary box
-        (constrainSize || preventOverflow) &&
+    const middleware = useMemo(() => {
+      const ret: Middleware[] = []
+
+      // Flip the floating element when leaving the boundary box
+      if (constrainSize || preventOverflow) {
+        ret.push(
           flip({
             boundary: floatingBoundary || undefined,
             fallbackPlacements,
             padding: DEFAULT_POPOVER_PADDING,
             rootBoundary,
           }),
-        // Define distance between reference and floating element
-        offset({mainAxis: DEFAULT_POPOVER_DISTANCE}),
-        // Track sizes
-        (constrainSize || matchReferenceWidth) &&
+        )
+      }
+
+      // Define distance between reference and floating element
+      ret.push(offset({mainAxis: DEFAULT_POPOVER_DISTANCE}))
+
+      // Track sizes
+      if (constrainSize || matchReferenceWidth) {
+        ret.push(
           size({
             apply({availableWidth, availableHeight, elements, referenceWidth}) {
-              const currentWidth = calcCurrentWidth({
-                container,
-                mediaIndex,
-                width: widthArrayProp,
-              })
-              const maxWidth = calcMaxWidth({boundaryWidth, currentWidth})
+              // not fresh, so use refs
+
+              referenceWidthRef.current = referenceWidth
+
+              const _currentWidth = widthRef.current
+              const _maxWidth = maxWidthRef.current
 
               if (matchReferenceWidth) {
                 elements.floating.style.width = `${referenceWidth}px`
-              } else if (currentWidth !== undefined) {
-                elements.floating.style.width = `${currentWidth}px`
+              } else if (_currentWidth !== undefined) {
+                elements.floating.style.width = `${_currentWidth}px`
               }
 
               if (constrainSize) {
                 elements.floating.style.maxWidth = `${Math.min(
                   availableWidth,
-                  maxWidth ?? Infinity,
+                  _maxWidth ?? Infinity,
                 )}px`
 
                 elements.floating.style.maxHeight = `${availableHeight}px`
@@ -256,28 +273,59 @@ export const Popover = memo(
             matchReferenceWidth,
             padding: DEFAULT_POPOVER_PADDING,
           }),
-        // Shift the popover so its sits within the boundary element
-        preventOverflow &&
+        )
+      }
+
+      // Shift the popover so its sits within the boundary element
+      if (preventOverflow) {
+        ret.push(
           shift({
             boundary: floatingBoundary || undefined,
             rootBoundary,
             padding: DEFAULT_POPOVER_PADDING,
           }),
-        // Place arrow
-        arrowProp &&
+        )
+      }
+
+      // Place arrow
+      if (arrowProp) {
+        ret.push(
           arrow({
-            element: arrowElement,
+            element: arrowRef,
             padding: DEFAULT_POPOVER_PADDING,
           }),
-        // Determine the origin to scale from.
-        // Must be placed after `@sanity/ui/size` and `shift` middleware.
-        animate && origin,
+        )
+      }
+
+      // Determine the origin to scale from.
+      // Must be placed after `@sanity/ui/size` and `shift` middleware.
+      if (animate) {
+        ret.push(origin)
+      }
+
+      ret.push(
         hide({
           boundary: referenceBoundary || undefined,
           padding: DEFAULT_POPOVER_PADDING,
           strategy: 'referenceHidden',
         }),
-      ],
+      )
+
+      return ret
+    }, [
+      animate,
+      arrowProp,
+      constrainSize,
+      fallbackPlacements,
+      floatingBoundary,
+      margins,
+      matchReferenceWidth,
+      preventOverflow,
+      referenceBoundary,
+    ])
+
+    const {x, y, middlewareData, placement, refs, strategy, update} = useFloating({
+      middleware,
       placement: placementProp,
       whileElementsMounted: autoUpdate,
     })
@@ -290,6 +338,10 @@ export const Popover = memo(
     const originX = middlewareData['@sanity/ui/origin']?.originX
     const originY = middlewareData['@sanity/ui/origin']?.originY
 
+    const setArrow = useCallback((arrowEl: HTMLDivElement | null) => {
+      arrowRef.current = arrowEl
+    }, [])
+
     const setFloating = useCallback(
       (node: HTMLDivElement | null) => {
         ref.current = node
@@ -298,28 +350,41 @@ export const Popover = memo(
       [refs],
     )
 
-    const [childElement, setChildElement] = useState<HTMLElement | null>(null)
     const setReference = useCallback(
       (node: HTMLElement | null) => {
         refs.setReference(node)
-        setChildElement(node)
+
+        const childRef = getElementRef(childProp as any)
+
+        if (typeof childRef === 'function') {
+          childRef(node)
+        } else if (childRef) {
+          childRef.current = node
+        }
       },
-      [refs],
+      [childProp, refs],
     )
 
-    useImperativeHandle(getElementRef(childProp as any), () => childElement, [childElement])
-
     const child = useMemo(() => {
-      if (!childProp || referenceElement) return null
+      if (!childProp) return null
 
-      return cloneElement(childProp, {ref: setReference})
+      return cloneElement(childProp, {ref: referenceElement ? undefined : setReference})
     }, [childProp, referenceElement, setReference])
 
-    useImperativeHandle(updateRef, () => update, [update])
+    useEffect(() => {
+      if (updateRef) {
+        if (typeof updateRef === 'function') {
+          updateRef(update)
+        } else if (updateRef) {
+          updateRef.current = update
+        }
+      }
+    }, [update, updateRef])
 
     useEffect(() => {
-      if (child) return
-      refs.setReference(referenceElement || null)
+      if (referenceElement) {
+        refs.setReference(referenceElement)
+      }
     }, [referenceElement, refs, child])
 
     if (disabled) {
@@ -333,7 +398,7 @@ export const Popover = memo(
           __unstable_margins={margins}
           animate={animate}
           arrow={arrowProp}
-          arrowRef={setArrowElement}
+          arrowRef={setArrow}
           arrowX={arrowX}
           arrowY={arrowY}
           hidden={referenceHidden}
@@ -348,6 +413,7 @@ export const Popover = memo(
           originY={originY}
           strategy={strategy}
           tone={tone}
+          width={matchReferenceWidth ? referenceWidthRef.current : width}
           x={x}
           y={y}
         >
@@ -382,8 +448,7 @@ Popover.displayName = 'Memo(ForwardRef(Popover))'
 // https://github.com/facebook/react/pull/28348
 //
 // Access the ref using the method that doesn't yield a warning.
-function getElementRef(element?: React.ReactElement) {
-  if (!element) return null
+function getElementRef(element: React.ReactElement) {
   // React <=18 in DEV
   let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get
   let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning

package/src/core/primitives/popover/popoverCard.tsx

@@ -51,6 +51,7 @@ export const PopoverCard = memo(
       shadow?: number | number[]
       strategy: Strategy
       tone: CardTone
+      width: number | undefined
       x: number | null
       y: number | null
     } & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
@@ -75,6 +76,7 @@ export const PopoverCard = memo(
       strategy,
       style,
       tone,
+      width,
       x: xProp,
       y: yProp,
       ...restProps
@@ -99,11 +101,12 @@ export const PopoverCard = memo(
         originY,
         position: strategy,
         top: y,
+        width,
         zIndex,
         willChange: animate ? 'transform' : undefined,
         ...style,
       }),
-      [animate, originX, originY, strategy, style, x, y, zIndex],
+      [animate, originX, originY, strategy, style, width, x, y, zIndex],
     )
 
     const arrowStyle: CSSProperties = useMemo(

package/src/core/primitives/text/styles.ts

@@ -9,6 +9,7 @@ export function textBaseStyle(
   const {font} = getTheme_v2(props.theme)
 
   return css`
+    min-width: 0;
     color: var(--card-fg-color);
 
     ${$accent &&

package/src/core/primitives/text/text.tsx

@@ -25,7 +25,7 @@ export interface TextProps {
    * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
    * @beta
    */
-  textOverflow?: 'ellipsis'
+  textOverflow?: 'ellipsis' | 'none'
   weight?: ThemeFontWeightKey
 }
 
@@ -67,6 +67,8 @@ export const Text = forwardRef(function Text(
 
   if (textOverflow === 'ellipsis') {
     children = <SpanWithTextOverflow>{children}</SpanWithTextOverflow>
+  } else {
+    children = <span>{children}</span>
   }
 
   return (
@@ -80,7 +82,7 @@ export const Text = forwardRef(function Text(
       $size={useArrayProp(size)}
       $weight={weight}
     >
-      <span>{children}</span>
+      {children}
     </Root>
   )
 })

package/src/core/primitives/tooltip/tooltip.tsx

@@ -97,31 +97,28 @@ export const Tooltip = forwardRef(function Tooltip(
   const {
     animate: _animate = false,
     arrow: arrowProp = false,
-    boundaryElement: _boundaryElement,
+    boundaryElement = boundaryElementContext?.element,
     children: childProp,
     content,
     disabled,
-    fallbackPlacements: _fallbackPlacementsProp,
+    fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ??
+      DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
     padding = 2,
     placement: placementProp = 'bottom',
     portal: portalProp,
     radius = 2,
     scheme,
     shadow = 2,
-    zOffset: _zOffset,
+    zOffset = layer.tooltip.zOffset,
     delay,
     ...restProps
   } = props
-  const boundaryElement = _boundaryElement ?? boundaryElementContext?.element
-  const fallbackPlacementsProp =
-    _fallbackPlacementsProp ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom']
-  const zOffset = _zOffset ?? layer.tooltip.zOffset
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
   const fallbackPlacements = useArrayProp(fallbackPlacementsProp)
   const ref = useRef<HTMLDivElement | null>(null)
   const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null)
-  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null)
+  const arrowRef = useRef<HTMLDivElement | null>(null)
   const rootBoundary: RootBoundary = 'viewport'
   const [tooltipMaxWidth, setTooltipMaxWidth] = useState(0)
 
@@ -158,7 +155,7 @@ export const Tooltip = forwardRef(function Tooltip(
 
     // Place arrow
     if (arrowProp) {
-      ret.push(arrow({element: arrowElement, padding: DEFAULT_TOOLTIP_PADDING}))
+      ret.push(arrow({element: arrowRef, padding: DEFAULT_TOOLTIP_PADDING}))
     }
 
     // Determine the origin to scale from.
@@ -168,7 +165,7 @@ export const Tooltip = forwardRef(function Tooltip(
     }
 
     return ret
-  }, [animate, arrowElement, arrowProp, boundaryElement, fallbackPlacements])
+  }, [animate, arrowProp, boundaryElement, fallbackPlacements])
 
   const {floatingStyles, placement, middlewareData, refs, update} = useFloating({
     middleware,
@@ -226,42 +223,42 @@ export const Tooltip = forwardRef(function Tooltip(
       handleIsOpenChange(false)
       childProp?.props?.onBlur?.(e)
     },
-    [childProp, handleIsOpenChange],
+    [childProp?.props, handleIsOpenChange],
   )
   const handleClick = useCallback(
     (e: MouseEvent) => {
       handleIsOpenChange(false, true)
       childProp?.props.onClick?.(e)
     },
-    [childProp, handleIsOpenChange],
+    [childProp?.props, handleIsOpenChange],
   )
   const handleContextMenu = useCallback(
     (e: MouseEvent) => {
       handleIsOpenChange(false, true)
       childProp?.props.onContextMenu?.(e)
     },
-    [childProp, handleIsOpenChange],
+    [childProp?.props, handleIsOpenChange],
   )
   const handleFocus = useCallback(
     (e: FocusEvent) => {
       handleIsOpenChange(true)
       childProp?.props?.onFocus?.(e)
     },
-    [childProp, handleIsOpenChange],
+    [childProp?.props, handleIsOpenChange],
   )
   const handleMouseEnter = useCallback(
     (e: MouseEvent) => {
       handleIsOpenChange(true)
       childProp?.props?.onMouseEnter?.(e)
     },
-    [childProp, handleIsOpenChange],
+    [childProp?.props, handleIsOpenChange],
   )
   const handleMouseLeave = useCallback(
     (e: MouseEvent) => {
       handleIsOpenChange(false)
       childProp?.props?.onMouseLeave?.(e)
     },
-    [childProp, handleIsOpenChange],
+    [childProp?.props, handleIsOpenChange],
   )
 
   // Handle closing the tooltip when the mouse leaves the referenceElement
@@ -312,7 +309,7 @@ export const Tooltip = forwardRef(function Tooltip(
 
   const setArrow = useCallback(
     (arrowEl: HTMLDivElement | null) => {
-      setArrowElement(arrowEl)
+      arrowRef.current = arrowEl
       update()
     },
     [update],
@@ -327,9 +324,9 @@ export const Tooltip = forwardRef(function Tooltip(
   )
 
   const childRef = useRef<HTMLElement | null>(null)
-  const [childElement, setChildElement] = useState<HTMLElement | null>(null)
 
-  useImperativeHandle(getElementRef(childProp as any), () => childElement, [childElement])
+  // Merge refs so that any ref we are overriding is called as well
+  useImperativeHandle((childProp as any)?.ref, () => childRef.current)
 
   const child = useMemo(() => {
     if (!childProp) return null
@@ -341,7 +338,7 @@ export const Tooltip = forwardRef(function Tooltip(
       onMouseLeave: handleMouseLeave,
       onClick: handleClick,
       onContextMenu: handleContextMenu,
-      ref: setChildElement,
+      ref: childRef,
     })
   }, [
     childProp,
@@ -465,30 +462,3 @@ function useCloseOnMouseLeave({
     return () => window.removeEventListener('mousemove', handleMouseMove)
   }, [onMouseMove, showTooltip])
 }
-
-// Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`
-// After React 19 accessing `element.ref` does the opposite.
-// https://github.com/facebook/react/pull/28348
-//
-// Access the ref using the method that doesn't yield a warning.
-function getElementRef(element?: React.ReactElement) {
-  if (!element) return null
-  // React <=18 in DEV
-  let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get
-  let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning
-
-  if (mayWarn) {
-    return (element as any).ref
-  }
-
-  // React 19 in DEV
-  getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get
-  mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning
-
-  if (mayWarn) {
-    return element.props.ref
-  }
-
-  // Not DEV
-  return element.props.ref || (element as any).ref
-}

package/src/core/styles/card/_cardColorStyle.ts

@@ -71,6 +71,14 @@ export function _cardColorStyle(
     '--card-badge-critical-dot-color': color.badge.critical.dot,
     '--card-badge-critical-fg-color': color.badge.critical.fg,
     '--card-badge-critical-icon-color': color.badge.critical.icon,
+    '--card-badge-prospect-bg-color': color.badge.prospect.bg,
+    '--card-badge-prospect-dot-color': color.badge.prospect.dot,
+    '--card-badge-prospect-fg-color': color.badge.prospect.fg,
+    '--card-badge-prospect-icon-color': color.badge.prospect.icon,
+    '--card-badge-explore-bg-color': color.badge.explore.bg,
+    '--card-badge-explore-dot-color': color.badge.explore.dot,
+    '--card-badge-explore-fg-color': color.badge.explore.fg,
+    '--card-badge-explore-icon-color': color.badge.explore.icon,
 
     '--card-code-bg-color': color.code.bg,
     '--card-code-fg-color': color.code.fg,

package/src/core/styles/flex/flexStyle.ts

@@ -16,6 +16,8 @@ export function responsiveFlexStyle(): Array<
     BASE_STYLE,
     responsiveFlexAlignStyle,
     responsiveFlexGapStyle,
+    responsiveFlexGapXStyle,
+    responsiveFlexGapYStyle,
     responsiveFlexWrapStyle,
     responsiveFlexJustifyStyle,
     responsiveFlexDirectionStyle,
@@ -40,6 +42,22 @@ function responsiveFlexGapStyle(props: ResponsiveFlexStyleProps & ThemeProps) {
   }))
 }
 
+function responsiveFlexGapXStyle(props: ResponsiveFlexStyleProps & ThemeProps) {
+  const {media, space} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$gapX, (gapX) => ({
+    columnGap: gapX ? rem(space[gapX]) : undefined,
+  }))
+}
+
+function responsiveFlexGapYStyle(props: ResponsiveFlexStyleProps & ThemeProps) {
+  const {media, space} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$gapY, (gapY) => ({
+    rowGap: gapY ? rem(space[gapY]) : undefined,
+  }))
+}
+
 export function responsiveFlexWrapStyle(props: ResponsiveFlexStyleProps & ThemeProps): CSSObject[] {
   const {media} = getTheme_v2(props.theme)
 

package/src/core/styles/flex/types.ts

@@ -7,6 +7,8 @@ export interface ResponsiveFlexStyleProps {
   $align: FlexAlign[]
   $direction: FlexDirection[]
   $gap: number[]
+  $gapX: number[]
+  $gapY: number[]
   $justify: FlexJustify[]
   $wrap: FlexWrap[]
 }

package/src/core/theme/themeProvider.tsx

@@ -25,10 +25,12 @@ export interface ThemeProviderProps {
  */
 export function ThemeProvider(props: ThemeProviderProps): React.ReactElement {
   const parentTheme = useContext(ThemeContext)
-  const {children} = props
-  const scheme = props.scheme ?? (parentTheme?.scheme || 'light')
-  const rootTheme = props.theme ?? (parentTheme?.theme || null)
-  const tone = props.tone ?? (parentTheme?.tone || 'default')
+  const {
+    children,
+    scheme = parentTheme?.scheme || 'light',
+    theme: rootTheme = parentTheme?.theme || null,
+    tone = parentTheme?.tone || 'default',
+  } = props
 
   const themeContext: ThemeContextValue | null = useMemo(() => {
     if (!rootTheme) return null