@sanity/ui 3.0.11 → 3.0.12-canary.1

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

@@ -1,6 +1,6 @@
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {motion, type MotionProps} from 'framer-motion'
-import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
+import React, {CSSProperties, forwardRef, useMemo} from 'react'
 import {styled} from 'styled-components'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
@@ -20,92 +20,90 @@ const MotionCard = styled(motion.create(Card))`
 /**
  * @internal
  */
-export const TooltipCard = memo(
-  forwardRef(function TooltipCard(
-    props: {
-      animate?: boolean
-      arrow: boolean
-      arrowRef: React.Ref<HTMLDivElement>
-      arrowX?: number
-      arrowY?: number
-      originX?: number
-      originY?: number
-      padding?: number | number[]
-      placement?: Placement
-      radius?: Radius | Radius[]
-      scheme?: ThemeColorSchemeKey
-      shadow?: number | number[]
-    } & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
-    ref: React.ForwardedRef<HTMLDivElement>,
-  ) {
-    const {
-      animate,
-      arrow,
-      arrowRef,
-      arrowX,
-      arrowY,
-      children,
+export const TooltipCard = forwardRef(function TooltipCard(
+  props: {
+    animate?: boolean
+    arrow: boolean
+    arrowRef: React.Ref<HTMLDivElement>
+    arrowX?: number
+    arrowY?: number
+    originX?: number
+    originY?: number
+    padding?: number | number[]
+    placement?: Placement
+    radius?: Radius | Radius[]
+    scheme?: ThemeColorSchemeKey
+    shadow?: number | number[]
+  } & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    animate,
+    arrow,
+    arrowRef,
+    arrowX,
+    arrowY,
+    children,
+    originX,
+    originY,
+    padding,
+    placement,
+    radius,
+    scheme,
+    shadow,
+    style,
+    ...restProps
+  } = props
+
+  const rootStyle: CSSProperties = useMemo(
+    () => ({
       originX,
       originY,
-      padding,
-      placement,
-      radius,
-      scheme,
-      shadow,
-      style,
-      ...restProps
-    } = props
-
-    const rootStyle: CSSProperties = useMemo(
-      () => ({
-        originX,
-        originY,
-        willChange: animate ? 'transform' : undefined,
-        ...style,
-      }),
-      [animate, originX, originY, style],
-    )
+      willChange: animate ? 'transform' : undefined,
+      ...style,
+    }),
+    [animate, originX, originY, style],
+  )
 
-    const arrowStyle: CSSProperties = useMemo(
-      () => ({
-        left: arrowX !== null ? arrowX : undefined,
-        top: arrowY !== null ? arrowY : undefined,
-        right: undefined,
-        bottom: undefined,
-      }),
-      [arrowX, arrowY],
-    )
+  const arrowStyle: CSSProperties = useMemo(
+    () => ({
+      left: arrowX !== null ? arrowX : undefined,
+      top: arrowY !== null ? arrowY : undefined,
+      right: undefined,
+      bottom: undefined,
+    }),
+    [arrowX, arrowY],
+  )
 
-    return (
-      <MotionCard
-        data-ui="Tooltip__card"
-        {...(restProps as CardProps & MotionProps)}
-        data-placement={placement}
-        padding={padding}
-        radius={radius}
-        ref={ref}
-        scheme={scheme}
-        shadow={shadow}
-        style={rootStyle}
-        variants={POPOVER_MOTION_PROPS.card}
-        transition={POPOVER_MOTION_PROPS.transition}
-        initial={animate ? ['hidden', 'initial'] : undefined}
-        animate={animate ? ['visible', 'scaleIn'] : undefined}
-        exit={animate ? ['hidden', 'scaleOut'] : undefined}
-      >
-        {children}
+  return (
+    <MotionCard
+      data-ui="Tooltip__card"
+      {...(restProps as CardProps & MotionProps)}
+      data-placement={placement}
+      padding={padding}
+      radius={radius}
+      ref={ref}
+      scheme={scheme}
+      shadow={shadow}
+      style={rootStyle}
+      variants={POPOVER_MOTION_PROPS.card}
+      transition={POPOVER_MOTION_PROPS.transition}
+      initial={animate ? ['hidden', 'initial'] : undefined}
+      animate={animate ? ['visible', 'scaleIn'] : undefined}
+      exit={animate ? ['hidden', 'scaleOut'] : undefined}
+    >
+      {children}
 
-        {arrow && (
-          <Arrow
-            ref={arrowRef}
-            style={arrowStyle}
-            width={DEFAULT_TOOLTIP_ARROW_WIDTH}
-            height={DEFAULT_TOOLTIP_ARROW_HEIGHT}
-            radius={DEFAULT_TOOLTIP_ARROW_RADIUS}
-          />
-        )}
-      </MotionCard>
-    )
-  }),
-)
-TooltipCard.displayName = 'Memo(ForwardRef(TooltipCard))'
+      {arrow && (
+        <Arrow
+          ref={arrowRef}
+          style={arrowStyle}
+          width={DEFAULT_TOOLTIP_ARROW_WIDTH}
+          height={DEFAULT_TOOLTIP_ARROW_HEIGHT}
+          radius={DEFAULT_TOOLTIP_ARROW_RADIUS}
+        />
+      )}
+    </MotionCard>
+  )
+})
+TooltipCard.displayName = 'ForwardRef(TooltipCard)'

package/src/core/utils/layer/layerProvider.tsx

@@ -1,6 +1,7 @@
 import {useCallback, useContext, useEffect, useMemo, useState} from 'react'
 
-import {useArrayProp, useMediaIndex} from '../../hooks'
+import {useMediaIndex} from '../../hooks'
+import {getArrayProp} from '../../hooks/useArrayProp'
 import {getLayerContext} from './getLayerContext'
 import {LayerContext} from './layerContext'
 import {LayerContextValue} from './types'
@@ -29,7 +30,7 @@ export function LayerProvider(props: LayerProviderProps): React.JSX.Element {
   const level = parentLevel + 1
 
   // Get z-index offset
-  const zOffset = useArrayProp(zOffsetProp)
+  const zOffset = getArrayProp(zOffsetProp)
 
   // Get responsive z-index value
   const maxMediaIndex = zOffset.length - 1

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