@sanity/ui 0.37.13 → 0.37.14-next.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "0.37.13",
+  "version": "0.37.14-next.5+9c21947f",
   "sideEffects": false,
   "source": "./src/index.ts",
   "exports": {
@@ -30,15 +30,14 @@
     "watch:es": "tsc --preserveWatchOutput -w --module ES6 --outDir lib/esm --project tsconfig.lib.json --rootDir src --target ES6"
   },
   "dependencies": {
+    "@floating-ui/react-dom": "^1.0.0",
     "@juggle/resize-observer": "^3.4.0",
-    "@popperjs/core": "^2.11.6",
     "@reach/auto-id": "^0.17.0",
-    "@sanity/color": "^2.1.12",
-    "@sanity/icons": "^1.3.2",
+    "@sanity/color": "2.1.13-next.5+9c21947f",
+    "@sanity/icons": "1.3.3-next.5+9c21947f",
     "framer-motion": "6.3.0",
     "popper-max-size-modifier": "^0.2.0",
     "react-is": "^17.0.2",
-    "react-popper": "^2.3.0",
     "react-refractor": "^2.1.7"
   },
   "devDependencies": {
@@ -72,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "de7619d53b2635f9bb667564cafb7110945c1ed2"
+  "gitHead": "9c21947f552622d210cce5225718985570fcdb25"
 }

package/src/components/autocomplete/autocomplete.styles.tsx

@@ -24,11 +24,6 @@ export const ListBox = styled(Box)`
  * @internal
  */
 export const ResultsPopover = styled(Popover)`
-  & > div {
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-
   &[data-popper-reference-hidden='true'] {
     display: none;
   }

package/src/components/autocomplete/constants.ts

@@ -20,14 +20,14 @@ export const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
 /**
  * @internal
  */
-export const AUTOCOMPLETE_POPOVER_MARGINS: PopoverMargins = [0, 1, 1, 1]
+export const AUTOCOMPLETE_POPOVER_MARGINS: PopoverMargins = [0, 1, 0, 0]
 
 /**
  * @internal
  */
-export const AUTOCOMPLETE_POPOVER_PLACEMENT: Placement = 'bottom-start'
+export const AUTOCOMPLETE_POPOVER_PLACEMENT: Placement = 'bottom'
 
 /**
  * @internal
  */
-export const AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS: Placement[] = ['top-start']
+export const AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS: Placement[] = ['bottom', 'top']

package/src/constants.ts

@@ -1,2 +1,19 @@
+/**
+ * @internal
+ */
 export const EMPTY_ARRAY: any[] = []
+
+/**
+ * @internal
+ */
 export const EMPTY_RECORD: Record<string, any> = {}
+
+/**
+ * @internal
+ */
+export const FLOATING_STATIC_SIDES: Record<string, 'bottom' | 'left' | 'top' | 'right'> = {
+  top: 'bottom',
+  right: 'left',
+  bottom: 'top',
+  left: 'right',
+}

package/src/primitives/popover/__workshop__/PlainStory.tsx

@@ -49,6 +49,7 @@ export default function PlainStory() {
               fallbackPlacements={['top', 'bottom']}
               matchReferenceWidth={matchReferenceWidth}
               open={open}
+              overflow="auto"
               padding={padding}
               placement={placement}
               portal={portal}

package/src/primitives/popover/__workshop__/RightAlignedStory.tsx

@@ -40,6 +40,7 @@ export default function RightAlignedStory() {
             constrainSize={constrainSize}
             content={content}
             open={open}
+            overflow="auto"
             padding={3}
             portal
             placement="bottom"

package/src/primitives/popover/__workshop__/TestStory.tsx

@@ -61,6 +61,7 @@ export default function TestStory(): ReactElement {
                 fallbackPlacements={['left', 'bottom', 'right', 'top']}
                 matchReferenceWidth={matchReferenceWidth}
                 open={open}
+                overflow="auto"
                 padding={3}
                 placement={placement}
                 portal

package/src/primitives/popover/popover.tsx

@@ -1,17 +1,30 @@
-import React, {cloneElement, forwardRef, useCallback, useEffect, useMemo, 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 React, {
+  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,208 +56,243 @@ 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);
+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)
+      }
 
-    & > * {
-      min-height: 0;
-    }
+      if (scope.matchReferenceWidth) {
+        scope.setReferenceWidth(args.rects.reference.width)
+      }
+    },
+    boundary: scope.boundaryElement || undefined,
+  })
+}
+
+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,
+      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'
+
+    const middleware = useMemo(() => {
+      const ret: Middleware[] = []
 
-    /* Hide the popover when the reference element is out of bounds */
-    ${$preventOverflow &&
-    css`
-      &[data-popper-reference-hidden='true'] {
-        display: none;
+      // Flip the floating element when leaving the boundary box
+      if (constrainSize || preventOverflow) {
+        ret.push(
+          flip({
+            boundary: boundaryElement || undefined,
+            fallbackPlacements,
+            padding: 8,
+            rootBoundary,
+          })
+        )
       }
-    `}
-  `
-)
 
-const PopoverCard = styled(Card)<
-  ResponsiveWidthStyleProps & {
-    $constrainSize?: boolean
-    $preventOverflow?: boolean
-    $width: (number | 'auto')[]
-  }
->(
-  ({$constrainSize}) => css`
-    flex: 1;
-    max-height: ${$constrainSize && '100%'};
-    pointer-events: all;
-
-    && {
-      display: flex;
-    }
+      // Track sizes
+      ret.push(
+        size({
+          boundaryElement,
+          constrainSize,
+          matchReferenceWidth: matchReferenceWidthProp,
+          setAvailableHeight,
+          setAvailableWidth,
+          setReferenceWidth,
+        })
+      )
 
-    flex-direction: column;
+      // Define distance between reference and floating element
+      ret.push(offset({mainAxis: arrowProp ? 4 : 0}))
 
-    & > * {
-      min-height: 0;
-    }
+      // Shift the popover so its sits with the boundary eleement
+      if (preventOverflow) {
+        ret.push(
+          shift({
+            boundary: boundaryElement || undefined,
+            rootBoundary,
+            padding: 8,
+          })
+        )
+      }
 
-    ${responsiveContainerWidthStyle}
-  `
-)
+      // Place arrow
+      if (arrowProp) {
+        ret.push(arrow({element: arrowRef, padding: 4}))
+      }
 
-/**
- * @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(widthProp)
-
-  const modifiers = usePopoverModifiers({
-    allowedAutoPlacements,
-    arrow,
-    arrowElement,
-    boundaryElement: boundaryElementProp || portal.boundaryElement,
-    constrainSize,
-    distance: arrow ? 4 : 0,
-    fallbackPlacements,
-    margins,
-    matchReferenceWidth,
-    open,
-    preventOverflow,
-    skidding: 0,
-    tether,
-    tetherOffset,
-  })
+      return ret
+    }, [
+      arrowProp,
+      boundaryElement,
+      constrainSize,
+      fallbackPlacements,
+      matchReferenceWidthProp,
+      preventOverflow,
+    ])
 
-  const popper = usePopper(popperReferenceElement, popperElement, {
-    placement,
-    modifiers,
-  })
+    const {x, y, placement, reference, floating, middlewareData, strategy} = useFloating({
+      middleware,
+      placement: placementProp,
+      whileElementsMounted: autoUpdate,
+    })
 
-  const {attributes, forceUpdate, styles} = popper
+    const arrowX = middlewareData.arrow?.x
+    const arrowY = middlewareData.arrow?.y
 
-  const setRef = useCallback(
-    (el: HTMLElement | null) => {
-      const childRef = (child as any).ref
+    const setArrow = useCallback((arrowEl: HTMLDivElement | null) => {
+      arrowRef.current = arrowEl
+    }, [])
 
-      setReferenceElement(el)
+    const setFloating = useCallback(
+      (node: HTMLDivElement | null) => {
+        forwardedRef.current = node
+        floating(node)
+      },
+      [floating, forwardedRef]
+    )
 
-      if (typeof childRef === 'function') {
-        childRef(el)
-      } else if (childRef) {
-        childRef.current = el
-      }
-    },
-    [child]
-  )
+    const setReference = useCallback(
+      (node: HTMLElement | null) => {
+        reference(node)
 
-  const setRootRef = useCallback(
-    (el: HTMLDivElement | null) => {
-      setPopperElement(el)
-      forwardedRef.current = el
-    },
-    [forwardedRef]
-  )
+        const childRef = (childProp as any)?.ref
 
-  const popoverStyle = useMemo(() => ({...style, ...styles.popper}), [style, styles])
+        if (typeof childRef === 'function') {
+          childRef(node)
+        } else if (childRef) {
+          childRef.current = node
+        }
+      },
+      [childProp, reference]
+    )
 
-  useEffect(() => {
-    if (forceUpdate) {
-      try {
-        forceUpdate()
-      } catch (_) {
-        // ignore caught error
-      }
+    const child = useMemo(() => {
+      if (!childProp || referenceElement) return null
+
+      return cloneElement(childProp, {ref: setReference})
+    }, [childProp, referenceElement, setReference])
+
+    useEffect(() => {
+      if (referenceElement) reference(referenceElement)
+    }, [reference, referenceElement])
+
+    if (disabled) {
+      return childProp || <></>
     }
-  }, [content, forceUpdate, open, popperReferenceElement])
-
-  if (disabled) {
-    return child || <></>
-  }
-
-  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>
-  )
-
-  return (
-    <>
-      {child && !referenceElementProp ? cloneElement(child, {ref: setRef}) : child || <></>}
-
-      {open && (
-        <>
-          {portalProp && (
-            <Portal __unstable_name={typeof portalProp === 'string' ? portalProp : undefined}>
-              {node}
-            </Portal>
-          )}
-
-          {!portalProp && node}
-        </>
-      )}
-    </>
-  )
-})
+
+    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>
+    )
+
+    return (
+      <>
+        {/* the popover */}
+        {open && (
+          <>
+            {portal ? (
+              <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>
+                {popover}
+              </Portal>
+            ) : (
+              popover
+            )}
+          </>
+        )}
+
+        {/* the referred element */}
+        {child}
+      </>
+    )
+  })
+)
+
+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"