@sanity/ui 0.37.12 → 0.37.14-next.6

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

@@ -0,0 +1,61 @@
+import {EllipsisVerticalIcon} from '@sanity/icons'
+import {Button, Card, Flex, Popover, Text, useClickOutside} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+import React, {useCallback, useState} from 'react'
+
+export default function RightAlignedStory() {
+  const constrainSize = useBoolean('Constrain size', false)
+
+  const [open, setOpen] = useState(false)
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+  const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
+  const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
+
+  const content = (
+    <Text>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at nisl at sem tempor
+      hendrerit scelerisque ut libero. Maecenas iaculis efficitur lorem, ac faucibus mi imperdiet
+      quis. Cras a consectetur erat. Fusce imperdiet, dolor et pellentesque iaculis, ex quam luctus
+      felis, non ultrices enim sem vitae quam. Duis lorem velit, lacinia at rhoncus a, tempus vel
+      neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
+      Sed id mauris quam. Nam finibus sapien non lacinia ultricies. Integer fermentum tortor at
+      pellentesque faucibus. In venenatis commodo placerat. Curabitur commodo tortor libero, vel
+      pellentesque elit luctus sodales. Donec mattis tristique nunc ac lacinia. Vestibulum non
+      pulvinar turpis, posuere consequat arcu. Fusce ut urna blandit, finibus nisi a, molestie elit.
+      Nulla sed eleifend mi.
+    </Text>
+  )
+
+  const handleToggleOpen = useCallback(() => setOpen((v) => !v), [])
+  const handleClose = useCallback(() => setOpen(false), [])
+
+  useClickOutside(handleClose, [buttonElement, popoverElement])
+
+  return (
+    <Card height="fill" padding={[4, 5, 6]} sizing="border" tone="transparent">
+      <Card height="fill" padding={2} ref={setBoundaryElement} shadow={1}>
+        <Flex justify="flex-end" padding={0}>
+          <Popover
+            boundaryElement={boundaryElement}
+            constrainSize={constrainSize}
+            content={content}
+            open={open}
+            overflow="auto"
+            padding={3}
+            portal
+            placement="bottom"
+            ref={setPopoverElement}
+          >
+            <Button
+              icon={EllipsisVerticalIcon}
+              mode="bleed"
+              onClick={handleToggleOpen}
+              ref={setButtonElement}
+              selected={open}
+            />
+          </Popover>
+        </Flex>
+      </Card>
+    </Card>
+  )
+}

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

@@ -0,0 +1,80 @@
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import React, {ReactElement, useState} from 'react'
+import {
+  WORKSHOP_CONTAINER_WIDTH_OPTIONS,
+  WORKSHOP_PLACEMENT_OPTIONS,
+  WORKSHOP_RADIUS_OPTIONS,
+} from '../../../__workshop__/constants'
+import {BoundaryElementProvider, PortalProvider} from '../../../utils'
+import {Button} from '../../button'
+import {Card} from '../../card'
+import {Text} from '../../text'
+import {Popover} from '../popover'
+
+export default function TestStory(): ReactElement {
+  const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+  const arrow = useBoolean('Arrow', true)
+  const matchReferenceWidth = useBoolean('Match reference width', false)
+  const open = useBoolean('Open', true)
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
+  const preventOverflow = useBoolean('Prevent overflow', true)
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
+  const referenceWide = useBoolean('Reference wide?', false)
+  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
+
+  const text = useText('Text', 'Test')
+
+  return (
+    <Card
+      ref={setBoundaryElement}
+      shadow={2}
+      style={{
+        position: 'absolute',
+        top: 50,
+        right: 50,
+        bottom: 50,
+        left: 50,
+      }}
+    >
+      <div
+        data-portal=""
+        ref={setPortalElement}
+        style={{
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          overflow: 'hidden',
+          pointerEvents: 'none',
+        }}
+      />
+
+      <div style={{width: '100%', height: '100%', overflow: 'auto'}}>
+        <div style={{padding: '150vh'}}>
+          <PortalProvider element={portalElement}>
+            <BoundaryElementProvider element={boundaryElement}>
+              <Popover
+                arrow={arrow}
+                content={<Text size={1}>{text}</Text>}
+                fallbackPlacements={['left', 'bottom', 'right', 'top']}
+                matchReferenceWidth={matchReferenceWidth}
+                open={open}
+                overflow="auto"
+                padding={3}
+                placement={placement}
+                portal
+                preventOverflow={preventOverflow}
+                radius={radius}
+                width={width}
+              >
+                <Button text="reference" style={{width: referenceWide ? 300 : undefined}} />
+              </Popover>
+            </BoundaryElementProvider>
+          </PortalProvider>
+        </div>
+      </div>
+    </Card>
+  )
+}

package/src/primitives/popover/__workshop__/index.ts

@@ -2,29 +2,34 @@ import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
 export default defineScope('primitives/popover', 'Popover', [
+  {
+    name: 'test',
+    title: 'Test',
+    component: lazy(() => import('./TestStory')),
+  },
   {
     name: 'plain',
     title: 'Plain',
-    component: lazy(() => import('./plain')),
+    component: lazy(() => import('./PlainStory')),
   },
   {
     name: 'recursive',
     title: 'Recursive',
-    component: lazy(() => import('./recursive')),
+    component: lazy(() => import('./RecursiveStory')),
   },
   {
     name: 'match-ref-width',
     title: 'Match reference width',
-    component: lazy(() => import('./matchReferenceWidth')),
+    component: lazy(() => import('./MatchReferenceWidthStory')),
   },
   {
     name: 'margins',
     title: 'Margins',
-    component: lazy(() => import('./margins')),
+    component: lazy(() => import('./MarginsStory')),
   },
   {
     name: 'right-aligned',
     title: 'Right-aligned',
-    component: lazy(() => import('./rightAligned')),
+    component: lazy(() => import('./RightAlignedStory')),
   },
 ])

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 {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,206 +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
-  }
->(
-  ({$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 = 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 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}
-        data-ui="PopoverCard"
-        padding={padding}
-        radius={radius}
-        scheme={scheme}
-        shadow={shadow}
-        tone={tone}
-        width={width as any}
-      >
-        {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'