@sanity/ui 1.0.0-next.3 → 1.0.0

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

@@ -1,25 +1,32 @@
-import {Middleware, detectOverflow} from '@floating-ui/react-dom'
+import {Elements, Middleware, detectOverflow} from '@floating-ui/react-dom'
+import {PopoverMargins} from '../../../types'
 
-export function size(scope: {
-  boundaryElement: HTMLElement | null
+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
-  setAvailableWidth: (v: number) => void
-  setAvailableHeight: (v: number) => void
-  setReferenceWidth: (v: number) => void
 }): Middleware {
-  const {padding = 0} = scope
+  const {apply, margins, padding = 0} = options
 
   return {
     name: '@sanity/ui/size',
     async fn(args) {
-      const {placement, rects} = args
+      const {elements, placement, platform, rects} = args
       const {floating, reference} = rects
 
       const overflow = await detectOverflow(args, {
         altBoundary: true,
-        boundary: scope.boundaryElement || undefined,
+        boundary: options.boundaryElement || undefined,
         elementContext: 'floating',
         padding,
         rootBoundary: 'viewport',
@@ -28,36 +35,44 @@ export function size(scope: {
       let maxWidth = Infinity
       let maxHeight = Infinity
 
+      const floatingW = floating.width
+      const floatingH = floating.height
+
       if (placement.includes('top')) {
-        maxWidth = floating.width - (overflow.left + overflow.right)
-        maxHeight = floating.height - overflow.top - padding
+        maxWidth = floatingW - (overflow.left + overflow.right)
+        maxHeight = floatingH - overflow.top
       }
 
       if (placement.includes('right')) {
-        maxWidth = floating.width - overflow.right - padding
-        maxHeight = floating.height - (overflow.top + overflow.bottom)
+        maxWidth = floatingW - overflow.right
+        maxHeight = floatingH - (overflow.top + overflow.bottom)
       }
 
       if (placement.includes('bottom')) {
-        maxWidth = floating.width - (overflow.left + overflow.right)
-        maxHeight = floating.height - overflow.bottom - padding
+        maxWidth = floatingW - (overflow.left + overflow.right)
+        maxHeight = floatingH - overflow.bottom
       }
 
       if (placement.includes('left')) {
-        maxWidth = floating.width - overflow.left - padding
-        maxHeight = floating.height - (overflow.top + overflow.bottom)
+        maxWidth = floatingW - overflow.left
+        maxHeight = floatingH - (overflow.top + overflow.bottom)
       }
 
-      if (scope.constrainSize) {
-        scope.setAvailableWidth(maxWidth)
-        scope.setAvailableHeight(maxHeight)
-      }
+      // 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],
+      })
 
-      if (scope.matchReferenceWidth) {
-        scope.setReferenceWidth(reference.width)
-      }
+      const nextDimensions = await platform.getDimensions(elements.floating)
+
+      const targetH = nextDimensions.height
+      const targetW = nextDimensions.width
 
-      if (!floating.width || !floating.height) {
+      if (floatingW !== targetW || floatingH !== targetH) {
         return {reset: {rects: true}}
       }
 

package/src/primitives/popover/popover.tsx

@@ -8,14 +8,19 @@ import {
   offset,
   shift,
   useFloating,
+  UseFloatingProps,
 } from '@floating-ui/react-dom'
-import {cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {cloneElement, forwardRef, memo, useCallback, useEffect, useMemo, useRef} from 'react'
 import {useForwardedRef, useArrayProp, useElementSize} from '../../hooks'
 import {ThemeColorSchemeKey, useTheme} from '../../theme'
 import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
 import {LayerProps, LayerProvider, Portal, useBoundaryElement} from '../../utils'
 import {ResponsiveRadiusProps, ResponsiveShadowProps, ResponsiveWidthProps} from '../types'
-import {DEFAULT_POPOVER_DISTANCE, DEFAULT_POPOVER_PADDING} from './constants'
+import {
+  DEFAULT_POPOVER_DISTANCE,
+  DEFAULT_POPOVER_MARGINS,
+  DEFAULT_POPOVER_PADDING,
+} from './constants'
 import {size} from './floating-ui/size'
 import {PopoverCard} from './popoverCard'
 
@@ -51,231 +56,250 @@ export interface PopoverProps
 }
 
 /** @public */
-export const Popover = forwardRef(function Popover(
-  props: PopoverProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'width'>,
-  ref: React.ForwardedRef<HTMLDivElement>
-): React.ReactElement {
-  const theme = useTheme()
-  const boundaryElementContext = useBoundaryElement()
+export const Popover = memo(
+  forwardRef(function Popover(
+    props: PopoverProps &
+      Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'width'>,
+    ref: React.ForwardedRef<HTMLDivElement>
+  ): React.ReactElement {
+    const theme = useTheme()
+    const boundaryElementContext = useBoundaryElement()
 
-  const {
-    __unstable_margins: margins,
-    arrow: arrowProp = true,
-    boundaryElement = boundaryElementContext.element,
-    children: childProp,
-    constrainSize = false,
-    content,
-    disabled,
-    fallbackPlacements,
-    matchReferenceWidth: matchReferenceWidthProp,
-    open,
-    overflow = props.constrainSize ? 'auto' : 'hidden',
-    padding: paddingProp,
-    placement: placementProp = 'bottom',
-    portal,
-    preventOverflow = true,
-    radius: radiusProp = 3,
-    referenceElement,
-    scheme,
-    shadow: shadowProp = 3,
-    tone = 'inherit',
-    width: widthProp = 'auto',
-    zOffset: zOffsetProp = theme.sanity.layer?.popover.zOffset,
-    ...restProps
-  } = props
-  const boundarySize = useElementSize(boundaryElement)?.border
-  const padding = useArrayProp(paddingProp)
-  const radius = useArrayProp(radiusProp)
-  const shadow = useArrayProp(shadowProp)
-  const width = useArrayProp(widthProp)
-  const zOffset = useArrayProp(zOffsetProp)
-  const [availableWidth, setAvailableWidth] = useState<number | undefined>(undefined)
-  const [availableHeight, setAvailableHeight] = useState<number | undefined>(undefined)
-  const [referenceWidth, setReferenceWidth] = useState<number | undefined>(undefined)
-  const forwardedRef = useForwardedRef(ref)
-  const arrowRef = useRef<HTMLDivElement | null>(null)
-  const rootBoundary: RootBoundary = 'viewport'
+    const {
+      __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
+      arrow: arrowProp = true,
+      boundaryElement = boundaryElementContext.element,
+      children: childProp,
+      constrainSize = false,
+      content,
+      disabled,
+      fallbackPlacements,
+      matchReferenceWidth: matchReferenceWidthProp,
+      open,
+      overflow = 'hidden',
+      padding: paddingProp,
+      placement: placementProp = 'bottom',
+      portal,
+      preventOverflow = true,
+      radius: radiusProp = 3,
+      referenceElement,
+      scheme,
+      shadow: shadowProp = 3,
+      tone = 'inherit',
+      width: widthProp = 'auto',
+      zOffset: zOffsetProp = theme.sanity.layer?.popover.zOffset,
+      ...restProps
+    } = props
+    const boundarySize = useElementSize(boundaryElement)?.border
+    const padding = useArrayProp(paddingProp)
+    const radius = useArrayProp(radiusProp)
+    const shadow = useArrayProp(shadowProp)
+    const width = useArrayProp(widthProp)
+    const zOffset = useArrayProp(zOffsetProp)
+    const forwardedRef = useForwardedRef(ref)
+    const arrowRef = useRef<HTMLDivElement | null>(null)
+    const rootBoundary: RootBoundary = 'viewport'
 
-  const middleware = useMemo(() => {
-    const ret: Middleware[] = []
+    const middleware = useMemo(() => {
+      const ret: Middleware[] = []
 
-    // Flip the floating element when leaving the boundary box
-    if (constrainSize || preventOverflow) {
-      ret.push(
-        flip({
-          boundary: boundaryElement || undefined,
-          fallbackPlacements,
-          padding: DEFAULT_POPOVER_PADDING,
-          rootBoundary,
-        })
-      )
-    }
+      // Flip the floating element when leaving the boundary box
+      if (constrainSize || preventOverflow) {
+        ret.push(
+          flip({
+            boundary: boundaryElement || undefined,
+            fallbackPlacements,
+            padding: DEFAULT_POPOVER_PADDING,
+            rootBoundary,
+          })
+        )
+      }
 
-    // Track sizes
-    if (constrainSize || matchReferenceWidthProp) {
+      // Define distance between reference and floating element
       ret.push(
-        size({
-          boundaryElement,
-          constrainSize,
-          matchReferenceWidth: matchReferenceWidthProp,
-          padding: DEFAULT_POPOVER_PADDING,
-          setAvailableHeight,
-          setAvailableWidth,
-          setReferenceWidth,
+        offset({
+          mainAxis: arrowProp ? DEFAULT_POPOVER_DISTANCE : 0,
         })
       )
-    }
 
-    // Define distance between reference and floating element
-    ret.push(
-      offset({
-        mainAxis: arrowProp ? DEFAULT_POPOVER_DISTANCE : 0,
-      })
-    )
+      // Track sizes
+      if (constrainSize || matchReferenceWidthProp) {
+        ret.push(
+          size({
+            apply({availableWidth, availableHeight, elements, referenceWidth}) {
+              if (matchReferenceWidthProp) {
+                elements.floating.style.width = `${referenceWidth}px`
+              }
+
+              if (constrainSize) {
+                elements.floating.style.maxWidth = `${availableWidth}px`
+                elements.floating.style.maxHeight = `${availableHeight}px`
+              }
+            },
+            boundaryElement,
+            constrainSize,
+            margins,
+            matchReferenceWidth: matchReferenceWidthProp,
+            padding: DEFAULT_POPOVER_PADDING,
+          })
+        )
+      }
+
+      // Shift the popover so its sits within the boundary eleement
+      if (preventOverflow) {
+        ret.push(
+          shift({
+            boundary: boundaryElement || undefined,
+            rootBoundary,
+            padding: DEFAULT_POPOVER_PADDING,
+          })
+        )
+      }
+
+      // Place arrow
+      if (arrowProp) {
+        ret.push(
+          arrow({
+            element: arrowRef,
+            padding: DEFAULT_POPOVER_PADDING,
+          })
+        )
+      }
 
-    // Shift the popover so its sits with the boundary eleement
-    if (preventOverflow) {
       ret.push(
-        shift({
+        hide({
           boundary: boundaryElement || undefined,
-          rootBoundary,
           padding: DEFAULT_POPOVER_PADDING,
+          strategy: 'referenceHidden',
         })
       )
-    }
 
-    // Place arrow
-    if (arrowProp) {
-      ret.push(
-        arrow({
-          element: arrowRef,
-          padding: DEFAULT_POPOVER_PADDING,
-        })
-      )
-    }
+      return ret
+    }, [
+      arrowProp,
+      boundaryElement,
+      constrainSize,
+      fallbackPlacements,
+      margins,
+      matchReferenceWidthProp,
+      preventOverflow,
+    ])
 
-    ret.push(
-      hide({
-        boundary: boundaryElement || undefined,
-        padding: DEFAULT_POPOVER_PADDING,
-        strategy: 'referenceHidden',
-      })
+    const floatingProps: UseFloatingProps = useMemo(
+      () => ({
+        middleware,
+        placement: placementProp,
+        whileElementsMounted: autoUpdate,
+      }),
+      [middleware, placementProp]
     )
 
-    return ret
-  }, [
-    arrowProp,
-    boundaryElement,
-    constrainSize,
-    fallbackPlacements,
-    matchReferenceWidthProp,
-    preventOverflow,
-  ])
-
-  const {x, y, placement, reference, floating, middlewareData, strategy} = useFloating({
-    middleware,
-    placement: placementProp,
-    whileElementsMounted: autoUpdate,
-  })
+    const {
+      x,
+      y,
+      placement,
+      reference: referenceRef,
+      floating: floatingRef,
+      middlewareData,
+      strategy,
+    } = useFloating(floatingProps)
 
-  const referenceHidden = middlewareData.hide?.referenceHidden
+    const referenceHidden = middlewareData.hide?.referenceHidden
 
-  const arrowX = middlewareData.arrow?.x
-  const arrowY = middlewareData.arrow?.y
+    const arrowX = middlewareData.arrow?.x
+    const arrowY = middlewareData.arrow?.y
 
-  const setArrow = useCallback((arrowEl: HTMLDivElement | null) => {
-    arrowRef.current = arrowEl
-  }, [])
+    const setArrow = useCallback((arrowEl: HTMLDivElement | null) => {
+      arrowRef.current = arrowEl
+    }, [])
 
-  const setFloating = useCallback(
-    (node: HTMLDivElement | null) => {
-      forwardedRef.current = node
-      floating(node)
-    },
-    [floating, forwardedRef]
-  )
+    const setFloating = useCallback(
+      (node: HTMLDivElement | null) => {
+        forwardedRef.current = node
+        floatingRef(node)
+      },
+      [floatingRef, forwardedRef]
+    )
 
-  const setReference = useCallback(
-    (node: HTMLElement | null) => {
-      reference(node)
+    const setReference = useCallback(
+      (node: HTMLElement | null) => {
+        referenceRef(node)
 
-      const childRef = (childProp as any)?.ref
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const childRef = (childProp as any)?.ref
 
-      if (typeof childRef === 'function') {
-        childRef(node)
-      } else if (childRef) {
-        childRef.current = node
-      }
-    },
-    [childProp, reference]
-  )
+        if (typeof childRef === 'function') {
+          childRef(node)
+        } else if (childRef) {
+          childRef.current = node
+        }
+      },
+      [childProp, referenceRef]
+    )
 
-  const child = useMemo(() => {
-    if (!childProp || referenceElement) return null
+    const child = useMemo(() => {
+      if (!childProp || referenceElement) return null
 
-    return cloneElement(childProp, {ref: setReference})
-  }, [childProp, referenceElement, setReference])
+      return cloneElement(childProp, {ref: setReference})
+    }, [childProp, referenceElement, setReference])
 
-  useEffect(() => {
-    if (referenceElement) reference(referenceElement)
-  }, [reference, referenceElement])
+    useEffect(() => {
+      referenceRef(referenceElement || null)
+    }, [referenceRef, referenceElement])
 
-  if (disabled) {
-    return childProp || <></>
-  }
+    if (disabled) {
+      return childProp || <></>
+    }
 
-  const popover = (
-    <LayerProvider zOffset={zOffset}>
-      <PopoverCard
-        {...restProps}
-        __unstable_margins={margins}
-        arrow={arrowProp}
-        arrowRef={setArrow}
-        arrowX={arrowX}
-        arrowY={arrowY}
-        availableWidth={constrainSize ? availableWidth : undefined}
-        availableHeight={constrainSize ? availableHeight : undefined}
-        boundaryWidth={preventOverflow ? boundarySize?.width : undefined}
-        hidden={referenceHidden}
-        overflow={overflow}
-        padding={padding}
-        placement={placement}
-        radius={radius}
-        ref={setFloating}
-        referenceWidth={matchReferenceWidthProp ? referenceWidth : undefined}
-        scheme={scheme}
-        shadow={shadow}
-        strategy={strategy}
-        tone={tone}
-        x={x}
-        y={y}
-        width={width}
-      >
-        {content}
-      </PopoverCard>
-    </LayerProvider>
-  )
+    const popover = (
+      <LayerProvider zOffset={zOffset}>
+        <PopoverCard
+          {...restProps}
+          __unstable_margins={margins}
+          arrow={arrowProp}
+          arrowRef={setArrow}
+          arrowX={arrowX}
+          arrowY={arrowY}
+          boundaryWidth={preventOverflow ? boundarySize?.width : undefined}
+          hidden={referenceHidden}
+          overflow={overflow}
+          padding={padding}
+          placement={placement}
+          radius={radius}
+          ref={setFloating}
+          scheme={scheme}
+          shadow={shadow}
+          strategy={strategy}
+          tone={tone}
+          x={x}
+          y={y}
+          width={width}
+        >
+          {content}
+        </PopoverCard>
+      </LayerProvider>
+    )
 
-  return (
-    <>
-      {/* the popover */}
-      {open && (
-        <>
-          {portal ? (
-            <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>
-              {popover}
-            </Portal>
-          ) : (
-            popover
-          )}
-        </>
-      )}
+    return (
+      <>
+        {/* the popover */}
+        {open && (
+          <>
+            {portal ? (
+              <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>
+                {popover}
+              </Portal>
+            ) : (
+              popover
+            )}
+          </>
+        )}
 
-      {/* the referred element */}
-      {child}
-    </>
-  )
-})
+        {/* the referred element */}
+        {child}
+      </>
+    )
+  })
+)
 
 Popover.displayName = 'Popover'