@sanity/ui 2.9.0-canary.4 → 2.9.0-canary.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.9.0-canary.4",
+  "version": "2.9.0-canary.5",
   "keywords": [
     "sanity",
     "ui",

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

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {
-  Middleware,
   RootBoundary,
   arrow,
   autoUpdate,
@@ -182,94 +181,70 @@ 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(() => {
       const floatingElement = ref.current
 
-      if (!open || !floatingElement) return
+      // If constrainSize or matchReferenceWidth is true, then the styles are set by the `size` middleware
+      if (!open || !floatingElement || constrainSize || matchReferenceWidth) return
 
-      const referenceWidth = referenceWidthRef.current
+      const currentWidth = calcCurrentWidth({
+        container,
+        mediaIndex,
+        width: widthArrayProp,
+      })
+      const maxWidth = calcMaxWidth({boundaryWidth, currentWidth})
 
-      if (matchReferenceWidth) {
-        if (referenceWidthRef.current !== undefined) {
-          floatingElement.style.width = `${referenceWidth}px`
-        }
-      } else if (width !== undefined) {
-        floatingElement.style.width = `${width}px`
+      if (currentWidth !== undefined) {
+        floatingElement.style.width = `${currentWidth}px`
       }
 
       if (typeof maxWidth === 'number') {
         floatingElement.style.maxWidth = `${maxWidth}px`
       }
-    }, [width, matchReferenceWidth, maxWidth, open])
-
-    const middleware = useMemo(() => {
-      const ret: Middleware[] = []
+    }, [
+      boundaryWidth,
+      constrainSize,
+      container,
+      matchReferenceWidth,
+      mediaIndex,
+      open,
+      widthArrayProp,
+    ])
 
-      // Flip the floating element when leaving the boundary box
-      if (constrainSize || preventOverflow) {
-        ret.push(
+    const {x, y, middlewareData, placement, refs, strategy, update} = useFloating({
+      middleware: [
+        // Flip the floating element when leaving the boundary box
+        (constrainSize || preventOverflow) &&
           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(
+        // Define distance between reference and floating element
+        offset({mainAxis: DEFAULT_POPOVER_DISTANCE}),
+        // Track sizes
+        (constrainSize || matchReferenceWidth) &&
           size({
             apply({availableWidth, availableHeight, elements, referenceWidth}) {
-              // not fresh, so use refs
-
-              referenceWidthRef.current = referenceWidth
-
-              const _currentWidth = widthRef.current
-              const _maxWidth = maxWidthRef.current
+              const currentWidth = calcCurrentWidth({
+                container,
+                mediaIndex,
+                width: widthArrayProp,
+              })
+              const maxWidth = calcMaxWidth({boundaryWidth, currentWidth})
 
               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`
@@ -281,60 +256,28 @@ export const Popover = memo(
             matchReferenceWidth,
             padding: DEFAULT_POPOVER_PADDING,
           }),
-        )
-      }
-
-      // Shift the popover so its sits within the boundary element
-      if (preventOverflow) {
-        ret.push(
+        // Shift the popover so its sits within the boundary element
+        preventOverflow &&
           shift({
             boundary: floatingBoundary || undefined,
             rootBoundary,
             padding: DEFAULT_POPOVER_PADDING,
           }),
-        )
-      }
-
-      // Place arrow
-      if (arrowProp) {
-        ret.push(
+        // Place arrow
+        arrowProp &&
           arrow({
             element: arrowElement,
             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(
+        // Determine the origin to scale from.
+        // Must be placed after `@sanity/ui/size` and `shift` middleware.
+        animate && origin,
         hide({
           boundary: referenceBoundary || undefined,
           padding: DEFAULT_POPOVER_PADDING,
           strategy: 'referenceHidden',
         }),
-      )
-
-      return ret
-    }, [
-      animate,
-      arrowElement,
-      arrowProp,
-      constrainSize,
-      fallbackPlacements,
-      floatingBoundary,
-      margins,
-      matchReferenceWidth,
-      preventOverflow,
-      referenceBoundary,
-    ])
-
-    const {x, y, middlewareData, placement, refs, strategy, update} = useFloating({
-      middleware,
+      ],
       placement: placementProp,
       whileElementsMounted: autoUpdate,
     })
@@ -405,7 +348,6 @@ export const Popover = memo(
           originY={originY}
           strategy={strategy}
           tone={tone}
-          width={matchReferenceWidth ? referenceWidthRef.current : width}
           x={x}
           y={y}
         >

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

@@ -51,7 +51,6 @@ 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'>,
@@ -76,7 +75,6 @@ export const PopoverCard = memo(
       strategy,
       style,
       tone,
-      width,
       x: xProp,
       y: yProp,
       ...restProps
@@ -101,12 +99,11 @@ export const PopoverCard = memo(
         originY,
         position: strategy,
         top: y,
-        width,
         zIndex,
         willChange: animate ? 'transform' : undefined,
         ...style,
       }),
-      [animate, originX, originY, strategy, style, width, x, y, zIndex],
+      [animate, originX, originY, strategy, style, x, y, zIndex],
     )
 
     const arrowStyle: CSSProperties = useMemo(