@sanity/ui 0.38.3-next.30 → 0.38.3-next.36

package/src/primitives/popover/popover.tsx

@@ -1,17 +1,30 @@
-import {cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'
-import {usePopper} from 'react-popper'
-import styled, {css} from 'styled-components'
-import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp, useForwardedRef} from '../../hooks'
+import {
+  Middleware,
+  arrow,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useFloating,
+  size as sizeMiddleware,
+  RootBoundary,
+} from '@floating-ui/react-dom'
+import {
+  cloneElement,
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import {useForwardedRef, useArrayProp, useElementSize} from '../../hooks'
 import {ThemeColorSchemeKey, useTheme} from '../../theme'
-import {CardTone, Placement, PopoverMargins} from '../../types'
-import {Layer, LayerProps, Portal, useBoundaryElement, usePortal} from '../../utils'
-import {Card} from '../card'
-import {ResponsiveWidthStyleProps} from '../container'
-import {responsiveContainerWidthStyle} from '../container/styles'
+import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
+import {LayerProps, LayerProvider, Portal, useBoundaryElement} from '../../utils'
 import {ResponsiveRadiusProps, ResponsiveShadowProps, ResponsiveWidthProps} from '../types'
-import {PopoverArrow} from './arrow'
-import {usePopoverModifiers} from './modifiers'
+import {PopoverCard} from './popoverCard'
 
 /**
  * @public
@@ -25,6 +38,7 @@ export interface PopoverProps
    * @beta
    */
   __unstable_margins?: PopoverMargins
+  /** @deprecated Use `fallbackPlacements` instead. */
   allowedAutoPlacements?: Placement[]
   arrow?: boolean
   boundaryElement?: HTMLElement | null
@@ -34,6 +48,7 @@ export interface PopoverProps
   disabled?: boolean
   fallbackPlacements?: Placement[]
   open?: boolean
+  overflow?: BoxOverflow
   padding?: number | number[]
   placement?: Placement
   portal?: boolean | string
@@ -41,217 +56,244 @@ export interface PopoverProps
   referenceElement?: HTMLElement | null
   matchReferenceWidth?: boolean
   scheme?: ThemeColorSchemeKey
+  /** @deprecated No longer supported. */
   tether?: boolean
+  /** @deprecated No longer supported. */
   tetherOffset?: number | ((...args: any[]) => number)
   tone?: CardTone
 }
 
-const Root = styled(Layer)<{$preventOverflow?: boolean}>(
-  ({$preventOverflow}) => css`
-    pointer-events: none;
-    display: flex;
-    flex-direction: column;
-    max-width: calc(100% - 16px);
-
-    & > * {
-      min-height: 0;
-    }
+function size(scope: {
+  boundaryElement: HTMLElement | null
+  constrainSize: boolean
+  matchReferenceWidth: boolean | undefined
+  setAvailableWidth: (v: number) => void
+  setAvailableHeight: (v: number) => void
+  setReferenceWidth: (v: number) => void
+}) {
+  return sizeMiddleware({
+    apply(args) {
+      if (scope.constrainSize) {
+        scope.setAvailableWidth(args.availableWidth)
+        scope.setAvailableHeight(args.availableHeight)
+      }
 
-    /* Hide the popover when the reference element is out of bounds */
-    ${$preventOverflow &&
-    css`
-      &[data-popper-reference-hidden='true'] {
-        display: none;
+      if (scope.matchReferenceWidth) {
+        scope.setReferenceWidth(args.rects.reference.width)
       }
-    `}
-  `
-)
+    },
+    boundary: scope.boundaryElement || undefined,
+  })
+}
 
-const PopoverCard = styled(Card)<
-  ResponsiveWidthStyleProps & {
-    $constrainSize?: boolean
-    $preventOverflow?: boolean
-    $width: (number | 'auto')[]
-  }
->(
-  ({$constrainSize}) => css`
-    flex: 1;
-    max-height: ${$constrainSize && '100%'};
-    pointer-events: all;
+/** @public */
+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()
 
-    && {
-      display: flex;
-    }
+    const {
+      __unstable_margins: margins,
+      allowedAutoPlacements,
+      arrow: arrowProp = true,
+      boundaryElement = boundaryElementContext.element,
+      children: childProp,
+      constrainSize = false,
+      content,
+      disabled,
+      fallbackPlacements,
+      matchReferenceWidth: matchReferenceWidthProp,
+      open,
+      overflow = props.constrainSize ? 'auto' : undefined,
+      padding: paddingProp,
+      placement: placementProp = 'bottom',
+      portal,
+      preventOverflow = true,
+      radius: radiusProp = 3,
+      referenceElement,
+      scheme,
+      shadow: shadowProp = 3,
+      tether,
+      tetherOffset,
+      tone = 'inherit',
+      width: widthProp = undefined,
+      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'
 
-    flex-direction: column;
+    const middleware = useMemo(() => {
+      const ret: Middleware[] = []
 
-    & > * {
-      min-height: 0;
-    }
-
-    ${responsiveContainerWidthStyle}
-  `
-)
+      // Flip the floating element when leaving the boundary box
+      if (constrainSize || preventOverflow) {
+        ret.push(
+          flip({
+            boundary: boundaryElement || undefined,
+            fallbackPlacements,
+            padding: 8,
+            rootBoundary,
+          })
+        )
+      }
 
-/**
- * @public
- */
-export const Popover = forwardRef(function Popover(
-  props: PopoverProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'width'>,
-  ref: React.ForwardedRef<HTMLDivElement>
-) {
-  const boundaryElementContext = useBoundaryElement()
-  const theme = useTheme()
-  const {
-    __unstable_margins: margins,
-    allowedAutoPlacements,
-    arrow = true,
-    boundaryElement: boundaryElementProp = boundaryElementContext.element,
-    children: child,
-    content,
-    constrainSize,
-    disabled,
-    fallbackPlacements,
-    open = false,
-    padding,
-    placement = 'bottom',
-    portal: portalProp = false,
-    preventOverflow,
-    radius = 3,
-    referenceElement: referenceElementProp,
-    matchReferenceWidth,
-    shadow = 3,
-    scheme,
-    style = EMPTY_RECORD,
-    tether,
-    tetherOffset,
-    tone = 'inherit',
-    width: widthProp = 0,
-    zOffset = theme.sanity.layer?.popover.zOffset,
-    ...restProps
-  } = props
-  const forwardedRef = useForwardedRef(ref)
-  const portal = usePortal()
-  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null)
-  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null)
-  const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null)
-  const popperReferenceElement = referenceElementProp || referenceElement
-  const width = useArrayProp(matchReferenceWidth ? 'auto' : widthProp)
+      // Track sizes
+      ret.push(
+        size({
+          boundaryElement,
+          constrainSize,
+          matchReferenceWidth: matchReferenceWidthProp,
+          setAvailableHeight,
+          setAvailableWidth,
+          setReferenceWidth,
+        })
+      )
 
-  const modifiers = usePopoverModifiers({
-    allowedAutoPlacements,
-    arrow,
-    arrowElement,
-    boundaryElement: boundaryElementProp || portal.boundaryElement,
-    constrainSize,
-    distance: arrow ? 4 : 0,
-    fallbackPlacements,
-    margins,
-    matchReferenceWidth,
-    open,
-    preventOverflow,
-    skidding: 0,
-    tether,
-    tetherOffset,
-  })
+      // Define distance between reference and floating element
+      ret.push(offset({mainAxis: arrowProp ? 4 : 0}))
 
-  const popper = usePopper(popperReferenceElement, popperElement, {
-    placement,
-    modifiers,
-  })
+      // Shift the popover so its sits with the boundary eleement
+      if (preventOverflow) {
+        ret.push(
+          shift({
+            boundary: boundaryElement || undefined,
+            rootBoundary,
+            padding: 8,
+          })
+        )
+      }
 
-  const {attributes, forceUpdate, styles} = popper
+      // Place arrow
+      if (arrowProp) {
+        ret.push(arrow({element: arrowRef, padding: 4}))
+      }
 
-  const setRef = useCallback(
-    (el: HTMLElement | null) => {
-      const childRef = (child as any).ref
+      return ret
+    }, [
+      arrowProp,
+      boundaryElement,
+      constrainSize,
+      fallbackPlacements,
+      matchReferenceWidthProp,
+      preventOverflow,
+    ])
 
-      setReferenceElement(el)
+    const {x, y, placement, reference, floating, middlewareData, strategy} = useFloating({
+      middleware,
+      placement: placementProp,
+      whileElementsMounted: autoUpdate,
+    })
 
-      if (typeof childRef === 'function') {
-        childRef(el)
-      } else if (childRef) {
-        childRef.current = el
-      }
-    },
-    [child]
-  )
+    const arrowX = middlewareData.arrow?.x
+    const arrowY = middlewareData.arrow?.y
 
-  const setRootRef = useCallback(
-    (el: HTMLDivElement | null) => {
-      setPopperElement(el)
-      forwardedRef.current = el
-    },
-    [forwardedRef]
-  )
+    const setArrow = useCallback((arrowEl: HTMLDivElement | null) => {
+      arrowRef.current = arrowEl
+    }, [])
 
-  const popoverStyle = useMemo(() => ({...style, ...styles.popper}), [style, styles])
+    const setFloating = useCallback(
+      (node: HTMLDivElement | null) => {
+        forwardedRef.current = node
+        floating(node)
+      },
+      [floating, forwardedRef]
+    )
 
-  const updateTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+    const setReference = useCallback(
+      (node: HTMLElement | null) => {
+        reference(node)
 
-  useEffect(() => {
-    if (updateTimeoutRef.current) {
-      clearTimeout(updateTimeoutRef.current)
-      updateTimeoutRef.current = null
-    }
+        const childRef = (childProp as any)?.ref
 
-    updateTimeoutRef.current = setTimeout(() => {
-      if (forceUpdate) {
-        try {
-          forceUpdate()
-        } catch (_) {
-          // ignore caught error
+        if (typeof childRef === 'function') {
+          childRef(node)
+        } else if (childRef) {
+          childRef.current = node
         }
-      }
-    }, 0)
-  }, [content, forceUpdate, open, popperReferenceElement])
+      },
+      [childProp, reference]
+    )
+
+    const child = useMemo(() => {
+      if (!childProp || referenceElement) return null
 
-  if (disabled) {
-    return child || <></>
-  }
+      return cloneElement(childProp, {ref: setReference})
+    }, [childProp, referenceElement, setReference])
 
-  const node = (
-    <Root
-      data-ui="Popover"
-      {...restProps}
-      $preventOverflow={preventOverflow}
-      ref={setRootRef}
-      style={popoverStyle}
-      zOffset={zOffset}
-      {...attributes.popper}
-    >
-      <PopoverCard
-        $constrainSize={constrainSize}
-        $width={width}
-        data-ui="PopoverCard"
-        padding={padding}
-        radius={radius}
-        scheme={scheme}
-        shadow={shadow}
-        tone={tone}
-      >
-        {arrow && <PopoverArrow ref={setArrowElement} style={styles.arrow} />}
-        {content}
-      </PopoverCard>
-    </Root>
-  )
+    useEffect(() => {
+      if (referenceElement) reference(referenceElement)
+    }, [reference, referenceElement])
+
+    if (disabled) {
+      return childProp || <></>
+    }
 
-  return (
-    <>
-      {child && !referenceElementProp ? cloneElement(child, {ref: setRef}) : child || <></>}
+    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={boundarySize?.width}
+          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>
+    )
 
-      {open && (
-        <>
-          {portalProp && (
-            <Portal __unstable_name={typeof portalProp === 'string' ? portalProp : undefined}>
-              {node}
-            </Portal>
-          )}
+    return (
+      <>
+        {/* the popover */}
+        {open && (
+          <>
+            {portal ? (
+              <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>
+                {popover}
+              </Portal>
+            ) : (
+              popover
+            )}
+          </>
+        )}
+
+        {/* the referred element */}
+        {child}
+      </>
+    )
+  })
+)
 
-          {!portalProp && node}
-        </>
-      )}
-    </>
-  )
-})
+Popover.displayName = 'Popover'

package/src/primitives/popover/{arrow.tsx → popoverArrow.tsx}

@@ -17,11 +17,11 @@ const Root = styled.div`
     transform-origin: 13.5px 13.5px;
   }
 
-  [data-popper-placement^='top'] > div > & {
+  [data-placement^='top'] > & {
     bottom: -27px;
   }
 
-  [data-popper-placement^='right'] > div > & {
+  [data-placement^='right'] > & {
     left: -27px;
 
     & > svg {
@@ -29,7 +29,7 @@ const Root = styled.div`
     }
   }
 
-  [data-popper-placement^='left'] > div > & {
+  [data-placement^='left'] > & {
     right: -27px;
 
     & > svg {
@@ -37,7 +37,7 @@ const Root = styled.div`
     }
   }
 
-  [data-popper-placement^='bottom'] > div > & {
+  [data-placement^='bottom'] > & {
     top: -27px;
 
     & > svg {
@@ -59,7 +59,7 @@ export const PopoverArrow = forwardRef(function PopoverArrow(
   ref: React.ForwardedRef<HTMLDivElement>
 ) {
   return (
-    <Root data-ui="PopoverArrow" {...props} ref={ref}>
+    <Root data-ui="Popover__arrow" {...props} ref={ref}>
       <svg
         width="27"
         height="11"

package/src/primitives/popover/popoverCard.tsx

@@ -0,0 +1,160 @@
+import {Strategy} from '@floating-ui/react-dom'
+import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
+import styled, {CSSObject} from 'styled-components'
+import {FLOATING_STATIC_SIDES} from '../../constants'
+import {ThemeColorSchemeKey} from '../../theme'
+import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
+import {useLayer} from '../../utils'
+import {Box} from '../box'
+import {Card} from '../card'
+import {PopoverArrow} from './popoverArrow'
+
+function popoverCardStyle(props: {$boundaryWidth?: number}): CSSObject {
+  const {$boundaryWidth} = props
+
+  return {
+    maxWidth: $boundaryWidth ? `${$boundaryWidth - 16}px` : 'calc(100% - 16px)',
+  }
+}
+
+const Root = memo(styled(Card)(popoverCardStyle))
+
+/**
+ * @internal
+ */
+export const PopoverCard = memo(
+  forwardRef(function PopoverCard(
+    props: {
+      /**
+       * @beta
+       */
+      __unstable_margins?: PopoverMargins
+      arrow: boolean
+      arrowRef: React.Ref<HTMLDivElement>
+      arrowX?: number
+      arrowY?: number
+      availableHeight?: number
+      availableWidth?: number
+      boundaryWidth?: number
+      overflow?: BoxOverflow
+      padding?: number | number[]
+      placement?: Placement
+      radius?: number | number[]
+      referenceWidth?: number
+      scheme?: ThemeColorSchemeKey
+      shadow?: number | number[]
+      strategy: Strategy
+      tone: CardTone
+      width?: number | 'auto' | (number | 'auto')[]
+      x: number | null
+      y: number | null
+    } & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
+    ref: React.ForwardedRef<HTMLDivElement>
+  ) {
+    const {
+      __unstable_margins: marginsProp,
+      arrow,
+      arrowRef,
+      arrowX,
+      arrowY,
+      availableHeight,
+      availableWidth,
+      boundaryWidth,
+      children,
+      padding,
+      placement,
+      overflow,
+      radius,
+      referenceWidth: referenceWidthProp,
+      scheme,
+      shadow,
+      strategy,
+      tone,
+      width,
+      x: xProp,
+      y: yProp,
+      ...restProps
+    } = props
+
+    const {zIndex} = useLayer()
+
+    // top right bottom left
+    const margins: PopoverMargins = useMemo(() => marginsProp || [0, 0, 0, 0], [marginsProp])
+
+    // translate according to margins
+    const referenceWidth = referenceWidthProp
+      ? referenceWidthProp - margins[1] - margins[3]
+      : undefined
+    const x = (xProp ?? 0) + margins[3]
+    const y = (yProp ?? 0) + margins[0]
+
+    const maxWidth = availableWidth
+      ? Math.min(availableWidth - 8, referenceWidth || Infinity)
+      : undefined
+
+    const rootStyle: CSSProperties = useMemo(
+      () => ({
+        position: strategy,
+        top: y,
+        left: x,
+        zIndex,
+        width: referenceWidth,
+        maxWidth: referenceWidth ? undefined : maxWidth,
+      }),
+      [referenceWidth, maxWidth, strategy, x, y, zIndex]
+    )
+
+    const wrapperStyle: CSSProperties = useMemo(
+      () => ({
+        minHeight: 25,
+        maxHeight: availableHeight ? availableHeight - 8 : undefined,
+      }),
+      [availableHeight]
+    )
+
+    const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]]
+
+    const arrowStyle: CSSProperties = useMemo(() => {
+      const style: CSSProperties = {
+        left: arrowX !== null ? arrowX : undefined,
+        top: arrowY !== null ? arrowY : undefined,
+        right: undefined,
+        bottom: undefined,
+      }
+
+      if (staticSide) style[staticSide] = -27
+
+      return style
+    }, [arrowX, arrowY, staticSide])
+
+    return (
+      <Root
+        {...restProps}
+        $boundaryWidth={boundaryWidth}
+        data-placement={placement}
+        data-ui="Popover"
+        radius={radius}
+        ref={ref}
+        scheme={scheme}
+        shadow={shadow}
+        style={rootStyle}
+        tone={tone}
+        $width={width}
+      >
+        <Box
+          data-ui="Popover__wrapper"
+          overflow={overflow}
+          padding={padding}
+          sizing="border"
+          style={wrapperStyle}
+        >
+          {children}
+        </Box>
+
+        {arrow && <PopoverArrow ref={arrowRef} style={arrowStyle} />}
+      </Root>
+    )
+  })
+)
+
+PopoverCard.displayName = 'PopoverCard'