@sanity/ui 4.0.0-static.30 → 4.0.0-static.32

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

@@ -19,7 +19,6 @@ import {
   type ReactNode,
   type Ref,
   useCallback,
-  useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
@@ -166,10 +165,9 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     constrainSize = false,
     content,
     disabled,
-    fallbackPlacements = props.fallbackPlacements ??
-      DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
+    fallbackPlacements: _fallbackPlacements,
     matchReferenceWidth,
-    floatingBoundary = boundaryElementContext.element,
+    floatingBoundary: _floatingBoundary,
     modal,
     onActivate,
     open,
@@ -181,7 +179,7 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     preventOverflow = true,
     radius = 3,
     ref: forwardedRef,
-    referenceBoundary = boundaryElementContext.element,
+    referenceBoundary: _referenceBoundary,
     referenceElement,
     scheme,
     shadow = 3,
@@ -191,6 +189,10 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     updateRef,
     ...rest
   } = props as PopoverProps<typeof DEFAULT_POPOVER_ELEMENT>
+  const fallbackPlacements =
+    _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom']
+  const floatingBoundary = _floatingBoundary ?? boundaryElementContext.element
+  const referenceBoundary = _referenceBoundary ?? boundaryElementContext.element
 
   const card = useCard()
 
@@ -206,108 +208,22 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
   // Keep track of reference element width (see `size` middleware below)
   const referenceWidthRef = useRef<number>(undefined)
 
-  const middleware = useMemo(() => {
-    const ret: Middleware[] = []
-
-    // Flip the floating element when leaving the boundary box
-    if (constrainSize || preventOverflow) {
-      if (placementStrategy === 'autoPlacement') {
-        ret.push(
-          autoPlacement({
-            allowedPlacements: [placementProp].concat(fallbackPlacements),
-          }),
-        )
-      } else {
-        ret.push(
-          flip({
-            boundary: floatingBoundary || undefined,
-            fallbackPlacements,
-            padding: DEFAULT_POPOVER_PADDING,
-            rootBoundary,
-          }),
-        )
-      }
-    }
-
-    // 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}) {
-            // not fresh, so use refs
-
-            referenceWidthRef.current = referenceWidth
-
-            if (matchReferenceWidth) {
-              elements.floating.style.width = `${referenceWidth}px`
-            }
-
-            if (constrainSize) {
-              elements.floating.style.maxWidth = `${availableWidth}px`
-              elements.floating.style.maxHeight = `${availableHeight}px`
-            }
-          },
-          boundaryElement: floatingBoundary || undefined,
-          constrainSize,
-          margins,
-          matchReferenceWidth,
-          padding: DEFAULT_POPOVER_PADDING,
-        }),
-      )
-    }
-
-    // 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
-    if (arrowProp) {
-      ret.push(
-        arrow({
-          element: arrowRef,
-          padding: DEFAULT_POPOVER_PADDING,
-        }),
-      )
-    }
-
-    // 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
-  }, [
+  const middleware = useMiddleware({
     animate,
     arrowProp,
+    arrowRef,
     constrainSize,
     fallbackPlacements,
     floatingBoundary,
-    placementProp,
-    placementStrategy,
     margins,
     matchReferenceWidth,
+    placementProp,
+    placementStrategy,
     preventOverflow,
     referenceBoundary,
-  ])
+    referenceWidthRef,
+    rootBoundary,
+  })
 
   const {x, y, middlewareData, placement, refs, strategy, update} = useFloating({
     middleware,
@@ -328,10 +244,6 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
   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
@@ -340,22 +252,9 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     [refs],
   )
 
-  const setReference = useCallback(
-    (node: HTMLElement | null) => {
-      refs.setReference(node)
-
-      if (!childProp) return
-
-      const childRef = getElementRef(childProp)
-
-      if (typeof childRef === 'function') {
-        childRef(node)
-      } else if (childRef) {
-        childRef.current = node
-      }
-    },
-    [childProp, refs],
-  )
+  // If there's a child then we need to set the reference element to the cloned child ref
+  // and if child changes we make sure to update or remove the reference element.
+  useImperativeHandle(childProp ? getElementRef(childProp) : null, () => refs.reference.current)
 
   const child = useMemo(() => {
     // If a reference element is defined, we don't need to clone the child
@@ -363,18 +262,10 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
 
     if (!childProp) return null
 
-    return cloneElement(childProp, {ref: setReference})
-  }, [childProp, referenceElement, setReference])
+    return cloneElement(childProp, {ref: refs.setReference})
+  }, [childProp, referenceElement, refs.setReference])
 
-  useEffect(() => {
-    if (updateRef) {
-      if (typeof updateRef === 'function') {
-        updateRef(update)
-      } else if (updateRef) {
-        updateRef.current = update
-      }
-    }
-  }, [update, updateRef])
+  useImperativeHandle(updateRef, () => update, [update])
 
   if (disabled) {
     return childProp || <></>
@@ -391,7 +282,7 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
         __unstable_margins={margins}
         animate={animate}
         arrow={arrowProp}
-        arrowRef={setArrow}
+        arrowRef={arrowRef}
         arrowX={arrowX}
         arrowY={arrowY}
         as={as}
@@ -440,3 +331,128 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     </>
   )
 }
+
+function useMiddleware({
+  animate,
+  arrowProp,
+  arrowRef,
+  constrainSize,
+  fallbackPlacements,
+  floatingBoundary,
+  margins,
+  matchReferenceWidth,
+  placementProp,
+  placementStrategy,
+  preventOverflow,
+  referenceBoundary,
+  referenceWidthRef,
+  rootBoundary,
+}: {
+  animate: boolean
+  arrowProp: boolean
+  arrowRef: React.RefObject<HTMLDivElement | null>
+  constrainSize: boolean
+  fallbackPlacements: Placement[]
+  floatingBoundary: HTMLElement | null
+  margins: PopoverMargins
+  matchReferenceWidth: boolean | undefined
+  placementProp: Placement
+  placementStrategy: 'flip' | 'autoPlacement'
+  preventOverflow: boolean
+  referenceBoundary: HTMLElement | null
+  referenceWidthRef: React.RefObject<number | undefined>
+  rootBoundary: RootBoundary
+}) {
+  return useMemo(() => {
+    const ret: Middleware[] = []
+
+    // Flip the floating element when leaving the boundary box
+    if (constrainSize || preventOverflow) {
+      if (placementStrategy === 'autoPlacement') {
+        ret.push(
+          autoPlacement({
+            allowedPlacements: [placementProp].concat(fallbackPlacements),
+          }),
+        )
+      } else {
+        ret.push(
+          flip({
+            boundary: floatingBoundary || undefined,
+            fallbackPlacements,
+            padding: DEFAULT_POPOVER_PADDING,
+            rootBoundary,
+          }),
+        )
+      }
+    }
+
+    // Define distance between reference and floating element
+    ret.push(offset({mainAxis: DEFAULT_POPOVER_DISTANCE}))
+
+    // Track sizes
+    if (constrainSize || matchReferenceWidth) {
+      ret.push(
+        size({
+          boundaryElement: floatingBoundary || undefined,
+          constrainSize,
+          margins,
+          matchReferenceWidth,
+          padding: DEFAULT_POPOVER_PADDING,
+          referenceWidthRef,
+        }),
+      )
+    }
+
+    // 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
+    if (arrowProp) {
+      ret.push(
+        arrow({
+          element: arrowRef,
+          padding: DEFAULT_POPOVER_PADDING,
+        }),
+      )
+    }
+
+    // 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,
+    arrowRef,
+    constrainSize,
+    fallbackPlacements,
+    floatingBoundary,
+    margins,
+    matchReferenceWidth,
+    placementProp,
+    placementStrategy,
+    preventOverflow,
+    referenceBoundary,
+    referenceWidthRef,
+    rootBoundary,
+  ])
+}

package/src/core/primitives/popover/floating-ui/size.ts

@@ -1,23 +1,16 @@
-import {detectOverflow, type Elements, type Middleware} from '@floating-ui/react-dom'
+import {detectOverflow, type Middleware} from '@floating-ui/react-dom'
 
 import type {PopoverMargins} from '../types'
 
-export interface SizeMiddlewareApplyOptions {
-  availableWidth: number
-  availableHeight: number
-  elements: Elements
-  referenceWidth: number
-}
-
 export function size(options: {
-  apply: (args: SizeMiddlewareApplyOptions) => void
   boundaryElement?: HTMLElement | null
   constrainSize: boolean
   margins: PopoverMargins
   matchReferenceWidth?: boolean
   padding?: number
+  referenceWidthRef: React.RefObject<number | undefined>
 }): Middleware {
-  const {apply, margins, padding = 0} = options
+  const {margins, padding = 0, constrainSize, matchReferenceWidth, referenceWidthRef} = options
 
   return {
     name: '@sanity/ui/size',
@@ -61,12 +54,20 @@ export function size(options: {
 
       // IMPORTANT – APPLY ELEMENT STYLES HERE
       // Elements need to be resized BEFORE the `platform.getDimensions` call below
-      apply({
-        availableWidth: maxWidth - margins[1] - margins[3],
-        availableHeight: maxHeight - margins[0] - margins[2],
-        elements,
-        referenceWidth: reference.width - margins[1] - margins[3],
-      })
+      const availableWidth = maxWidth - margins[1] - margins[3]
+      const availableHeight = maxHeight - margins[0] - margins[2]
+      const referenceWidth = reference.width - margins[1] - margins[3]
+
+      referenceWidthRef.current = referenceWidth
+
+      if (matchReferenceWidth) {
+        elements.floating.style.width = `${referenceWidth}px`
+      }
+
+      if (constrainSize) {
+        elements.floating.style.maxWidth = `${availableWidth}px`
+        elements.floating.style.maxHeight = `${availableHeight}px`
+      }
 
       const nextDimensions = await platform.getDimensions(elements.floating)
 

package/src/core/primitives/skeleton/Skeleton.tsx

@@ -43,7 +43,7 @@ export function Skeleton<E extends SkeletonElementType = typeof DEFAULT_SKELETON
 
   useEffect(() => {
     if (!delay) {
-      return setVisible(true)
+      return undefined
     }
 
     const timeout = setTimeout(() => {
@@ -64,7 +64,7 @@ export function Skeleton<E extends SkeletonElementType = typeof DEFAULT_SKELETON
         ...rest,
       })}
       data-animated={animated ? '' : undefined}
-      data-visible={visible ? '' : undefined}
+      data-visible={(delay ? visible : true) ? '' : undefined}
     />
   )
 }

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

@@ -2,29 +2,24 @@ import {Flex, Text} from '@sanity/ui'
 import {vars} from '@sanity/ui/css'
 import type {AvatarColor} from '@sanity/ui/theme'
 import {useSelect} from '@sanity/ui-workshop'
-import {styled} from 'styled-components'
+import {assignInlineVars} from '@vanilla-extract/dynamic'
 
 import {WORKSHOP_AVATAR_COLOR_OPTIONS} from '$workshop'
 
-const ColoredText = styled(Text)<{$color: AvatarColor}>`
-  ${vars.color.fg.slice(4, -1)}: ${({$color}) => vars.color.avatar[$color].bg};
-`
-
 export default function ColoredTextStory(): React.JSX.Element {
   // @ts-expect-error - TODO: fix this
-  const color = useSelect('Color', WORKSHOP_AVATAR_COLOR_OPTIONS, 'gray') ?? 'gray'
+  const color: AvatarColor = useSelect('Color', WORKSHOP_AVATAR_COLOR_OPTIONS, 'gray') ?? 'gray'
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <ColoredText
+      <Text
         align="center"
-        // @ts-expect-error - TODO: fix this
-        $color={color}
         size={4}
         weight="bold"
+        style={assignInlineVars({[vars.color.fg]: vars.color.avatar[color].bg})}
       >
         {color}
-      </ColoredText>
+      </Text>
     </Flex>
   )
 }

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

@@ -112,14 +112,13 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
     animate: _animate = false,
     arrow: arrowProp = false,
     as = DEFAULT_TOOLTIP_ELEMENT,
-    boundaryElement = boundaryElementContext?.element,
+    boundaryElement: _boundaryElement,
     children: childProp,
     className,
     content,
     delay,
     disabled,
-    fallbackPlacements = props.fallbackPlacements ??
-      DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
+    fallbackPlacements: _fallbackPlacements,
     padding = 2,
     placement: placementProp = 'bottom',
     portal: portalProp,
@@ -131,6 +130,9 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
     tone = 'inherit',
     ...rest
   } = props as TooltipProps<typeof DEFAULT_TOOLTIP_ELEMENT>
+  const boundaryElement = _boundaryElement ?? boundaryElementContext?.element
+  const fallbackPlacements =
+    _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom']
 
   const card = useCard()
   const prefersReducedMotion = usePrefersReducedMotion()
@@ -147,44 +149,14 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
   const portalElement =
     typeof portalProp === 'string' ? portal.elements?.[portalProp] || null : portal.element
 
-  const middleware = useMemo(() => {
-    const ret: Middleware[] = []
-
-    // Flip the floating element when leaving the boundary box
-    ret.push(
-      flip({
-        boundary: boundaryElement || undefined,
-        fallbackPlacements,
-        padding: DEFAULT_TOOLTIP_PADDING,
-        rootBoundary,
-      }),
-    )
-
-    // Define distance between reference and floating element
-    ret.push(offset({mainAxis: DEFAULT_TOOLTIP_DISTANCE}))
-
-    // Shift the tooltip so its sits with the boundary element
-    ret.push(
-      shift({
-        boundary: boundaryElement || undefined,
-        rootBoundary,
-        padding: DEFAULT_TOOLTIP_PADDING,
-      }),
-    )
-
-    // Place arrow
-    if (arrowProp) {
-      ret.push(arrow({element: arrowRef, padding: DEFAULT_TOOLTIP_PADDING}))
-    }
-
-    // Determine the origin to scale from.
-    // Must be placed after `@sanity/ui/size` and `shift` middleware.
-    if (animate) {
-      ret.push(origin)
-    }
-
-    return ret
-  }, [animate, arrowProp, boundaryElement, fallbackPlacements])
+  const middleware = useMiddleware({
+    animate,
+    arrowProp,
+    arrowRef,
+    boundaryElement,
+    fallbackPlacements,
+    rootBoundary,
+  })
 
   const {floatingStyles, placement, middlewareData, refs, update} = useFloating({
     middleware,
@@ -331,6 +303,7 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
       portalElement?.offsetWidth || document.body.offsetWidth,
     ]
 
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setTooltipMaxWidth(Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2)
   }, [boundaryElement, portalElement])
 
@@ -435,6 +408,61 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
   )
 }
 
+function useMiddleware({
+  animate,
+  arrowProp,
+  arrowRef,
+  boundaryElement,
+  fallbackPlacements,
+  rootBoundary,
+}: {
+  animate: boolean
+  arrowProp: boolean
+  arrowRef: React.RefObject<HTMLDivElement | null>
+  boundaryElement: HTMLElement | null
+  fallbackPlacements: Placement[]
+  rootBoundary: RootBoundary
+}) {
+  return useMemo(() => {
+    const ret: Middleware[] = []
+
+    // Flip the floating element when leaving the boundary box
+    ret.push(
+      flip({
+        boundary: boundaryElement || undefined,
+        fallbackPlacements,
+        padding: DEFAULT_TOOLTIP_PADDING,
+        rootBoundary,
+      }),
+    )
+
+    // Define distance between reference and floating element
+    ret.push(offset({mainAxis: DEFAULT_TOOLTIP_DISTANCE}))
+
+    // Shift the tooltip so its sits with the boundary element
+    ret.push(
+      shift({
+        boundary: boundaryElement || undefined,
+        rootBoundary,
+        padding: DEFAULT_TOOLTIP_PADDING,
+      }),
+    )
+
+    // Place arrow
+    if (arrowProp) {
+      ret.push(arrow({element: arrowRef, padding: DEFAULT_TOOLTIP_PADDING}))
+    }
+
+    // Determine the origin to scale from.
+    // Must be placed after `@sanity/ui/size` and `shift` middleware.
+    if (animate) {
+      ret.push(origin)
+    }
+
+    return ret
+  }, [animate, arrowProp, arrowRef, boundaryElement, fallbackPlacements, rootBoundary])
+}
+
 /**
  * As `useEffectEvent` should never be passed to other components or hooks, this custom hook groups together the `useEffectEvent` and the `useEffect` hook using it.
  * @see https://19.dev/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events:~:text=Never%20pass%20them%20to%20other%20components%20or%20Hooks

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

@@ -8,6 +8,6 @@ import type {TooltipDelayGroupContextValue} from './types'
  */
 export const TooltipDelayGroupContext: Context<TooltipDelayGroupContextValue | null> =
   createGlobalScopedContext<TooltipDelayGroupContextValue | null>(
-    '@sanity/ui/v3/tooltipDelayGroup',
+    '@sanity/ui/v4/tooltipDelayGroup',
     null,
   )

package/src/core/utils/boundaryElement/BoundaryElementContext.ts

@@ -5,6 +5,6 @@ import type {BoundaryElementContextValue} from './types'
 
 export const BoundaryElementContext: Context<BoundaryElementContextValue | null> =
   createGlobalScopedContext<BoundaryElementContextValue | null>(
-    '@sanity/ui/v3/boundaryElement',
+    '@sanity/ui/v4/boundaryElement',
     null,
   )

package/src/core/utils/elementQuery/__workshop__/CustomMedia.tsx

@@ -1,28 +1,6 @@
 import {Box, Card, ElementQuery, Text} from '@sanity/ui'
-import {vars} from '@sanity/ui/css'
-import {styled} from 'styled-components'
 
-const TestCard = styled(Card)`
-  [data-eq-min~='0'] > & {
-    ${vars.color.fg.slice(4, -1)}: light-dark(${vars.color.palette.orange[600]}, ${vars.color
-      .palette.orange[400]});
-  }
-
-  [data-eq-min~='1'] > & {
-    ${vars.color.fg.slice(4, -1)}: light-dark(${vars.color.palette.red[600]}, ${vars.color.palette
-      .red[400]});
-  }
-
-  [data-eq-min~='2'] > & {
-    ${vars.color.fg.slice(4, -1)}: light-dark(${vars.color.palette.magenta[600]}, ${vars.color
-      .palette.magenta[400]});
-  }
-
-  [data-eq-min~='3'] > & {
-    ${vars.color.fg.slice(4, -1)}: light-dark(${vars.color.palette.purple[600]}, ${vars.color
-      .palette.purple[400]});
-  }
-`
+import {testCard} from './styles.css'
 
 export default function CustomMediaQuery(): React.JSX.Element {
   return (
@@ -32,9 +10,9 @@ export default function CustomMediaQuery(): React.JSX.Element {
       </Box>
 
       <ElementQuery media={[0, 100, 200, 300]}>
-        <TestCard padding={3} shadow={1}>
+        <Card className={testCard} padding={3} shadow={1}>
           <Text>This card sits inside an element query.</Text>
-        </TestCard>
+        </Card>
       </ElementQuery>
     </Box>
   )

package/src/core/utils/elementQuery/__workshop__/styles.css.ts

@@ -0,0 +1,31 @@
+import {vars} from '@sanity/ui/css'
+import {style} from '@vanilla-extract/css'
+
+export const testCard: string = style({
+  selectors: {
+    '[data-eq-min~="0"] > &': {
+      vars: {
+        [vars.color.fg]:
+          `light-dark(${vars.color.palette.orange[600]}, ${vars.color.palette.orange[400]})`,
+      },
+    },
+    '[data-eq-min~="1"] > &': {
+      vars: {
+        [vars.color.fg]:
+          `light-dark(${vars.color.palette.red[600]}, ${vars.color.palette.red[400]})`,
+      },
+    },
+    '[data-eq-min~="2"] > &': {
+      vars: {
+        [vars.color.fg]:
+          `light-dark(${vars.color.palette.magenta[600]}, ${vars.color.palette.magenta[400]})`,
+      },
+    },
+    '[data-eq-min~="3"] > &': {
+      vars: {
+        [vars.color.fg]:
+          `light-dark(${vars.color.palette.purple[600]}, ${vars.color.palette.purple[400]})`,
+      },
+    },
+  },
+})