@sanity/ui 3.0.11 → 3.0.12-canary.0

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

@@ -98,22 +98,25 @@ export const Tooltip = forwardRef(function Tooltip(
   const {
     animate: _animate = false,
     arrow: arrowProp = false,
-    boundaryElement = boundaryElementContext?.element,
+    boundaryElement: _boundaryElement,
     children: childProp,
     content,
     disabled,
-    fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ??
-      DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
+    fallbackPlacements: _fallbackPlacementsProp,
     padding = 2,
     placement: placementProp = 'bottom',
     portal: portalProp,
     radius = 2,
     scheme,
     shadow = 2,
-    zOffset = layer.tooltip.zOffset,
+    zOffset: _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)
@@ -129,44 +132,14 @@ export const Tooltip = forwardRef(function Tooltip(
   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,
@@ -417,6 +390,61 @@ export const Tooltip = forwardRef(function Tooltip(
 })
 Tooltip.displayName = 'ForwardRef(Tooltip)'
 
+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.react.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/utils/virtualList/virtualList.tsx

@@ -1,4 +1,4 @@
-import {forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'
+import {forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react'
 import {styled} from 'styled-components'
 
 import {_isScrollable} from '../../helpers'
@@ -131,31 +131,20 @@ export const VirtualList = forwardRef(function VirtualList(
     onChange({fromIndex, gap: space[gap], itemHeight, scrollHeight, scrollTop, toIndex})
   }, [fromIndex, gap, itemHeight, onChange, scrollHeight, scrollTop, space, toIndex])
 
-  const children = useMemo(() => {
-    if (!renderItem || items.length === 0) return null
-
-    if (itemHeight === -1) {
-      return [<ItemWrapper key={0}>{renderItem(items[0])}</ItemWrapper>]
-    }
-
-    return items.slice(fromIndex, toIndex).map((item, _itemIndex) => {
-      const itemIndex = fromIndex + _itemIndex
-      const node = renderItem(item)
-      const key = getItemKey ? getItemKey(item, itemIndex) : itemIndex
-
-      return (
-        <ItemWrapper key={key} style={{top: itemIndex * (itemHeight + space[gap])}}>
-          {node}
-        </ItemWrapper>
-      )
-    })
-  }, [fromIndex, gap, getItemKey, itemHeight, items, renderItem, space, toIndex])
-
-  const wrapperStyle = useMemo(() => ({height}), [height])
+  const children = useChildren({
+    fromIndex,
+    gap,
+    itemHeight,
+    space,
+    toIndex,
+    getItemKey,
+    items,
+    renderItem,
+  })
 
   return (
     <StyledVirtualList as={as} data-ui="VirtualList" {...restProps} ref={ref}>
-      <div ref={wrapperRef} style={wrapperStyle}>
+      <div ref={wrapperRef} style={{height}}>
         {children}
       </div>
     </StyledVirtualList>
@@ -163,6 +152,42 @@ export const VirtualList = forwardRef(function VirtualList(
 })
 VirtualList.displayName = 'ForwardRef(VirtualList)'
 
+function useChildren({
+  fromIndex,
+  gap,
+  getItemKey,
+  itemHeight,
+  items,
+  renderItem,
+  space,
+  toIndex,
+}: Pick<VirtualListProps, 'getItemKey' | 'renderItem'> &
+  Required<Pick<VirtualListProps, 'items'>> & {
+    fromIndex: number
+    gap: number
+    itemHeight: number
+    space: number[]
+    toIndex: number
+  }) {
+  if (!renderItem || items.length === 0) return null
+
+  if (itemHeight === -1) {
+    return [<ItemWrapper key={0}>{renderItem(items[0])}</ItemWrapper>]
+  }
+
+  return items.slice(fromIndex, toIndex).map((item, _itemIndex) => {
+    const itemIndex = fromIndex + _itemIndex
+    const node = renderItem(item)
+    const key = getItemKey ? getItemKey(item, itemIndex) : itemIndex
+
+    return (
+      <ItemWrapper key={key} style={{top: itemIndex * (itemHeight + space[gap])}}>
+        {node}
+      </ItemWrapper>
+    )
+  })
+}
+
 function findScrollable(parentNode: ParentNode | null) {
   let _scrollEl = parentNode