@sanity/ui 1.4.0 → 1.6.0

package/src/primitives/popover/popover.tsx

@@ -8,52 +8,65 @@ import {
   offset,
   shift,
   useFloating,
-  UseFloatingProps,
 } from '@floating-ui/react-dom'
-import {cloneElement, forwardRef, memo, useCallback, useEffect, useMemo, useRef} from 'react'
-import {useForwardedRef, useArrayProp, useElementSize} from '../../hooks'
+import {
+  MutableRefObject,
+  RefCallback,
+  cloneElement,
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react'
+import {useForwardedRef, useArrayProp, useElementSize, useMediaIndex} 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 {ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
 import {
   DEFAULT_POPOVER_DISTANCE,
   DEFAULT_POPOVER_MARGINS,
   DEFAULT_POPOVER_PADDING,
 } from './constants'
 import {size} from './floating-ui/size'
+import {calcCurrentWidth, calcMaxWidth} from './helpers'
 import {PopoverCard} from './popoverCard'
-import {useOnForcedUpdate} from './useOnForcedUpdate'
+import {PopoverUpdateCallback, PopoverWidth} from './types'
 
-/**
- * @public
- */
+/** @public */
 export interface PopoverProps
   extends Omit<LayerProps, 'as'>,
     ResponsiveRadiusProps,
-    ResponsiveShadowProps,
-    ResponsiveWidthProps {
-  /**
-   * @beta
-   */
+    ResponsiveShadowProps {
+  /** @beta */
   __unstable_margins?: PopoverMargins
   arrow?: boolean
+  /** @deprecated Use `floatingBoundary` and/or `referenceBoundary` instead */
   boundaryElement?: HTMLElement | null
   children?: React.ReactElement
   constrainSize?: boolean
   content?: React.ReactNode
   disabled?: boolean
   fallbackPlacements?: Placement[]
+  floatingBoundary?: HTMLElement | null
+  matchReferenceWidth?: boolean
   open?: boolean
   overflow?: BoxOverflow
   padding?: number | number[]
   placement?: Placement
   portal?: boolean | string
   preventOverflow?: boolean
+  referenceBoundary?: HTMLElement | null
   referenceElement?: HTMLElement | null
-  matchReferenceWidth?: boolean
   scheme?: ThemeColorSchemeKey
   tone?: CardTone
+  /** @beta */
+  updateRef?:
+    | MutableRefObject<PopoverUpdateCallback | undefined>
+    | RefCallback<PopoverUpdateCallback | undefined>
+  width?: PopoverWidth | PopoverWidth[]
 }
 
 /** @public */
@@ -75,7 +88,8 @@ export const Popover = memo(
       content,
       disabled,
       fallbackPlacements,
-      matchReferenceWidth: matchReferenceWidthProp,
+      matchReferenceWidth,
+      floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
       open,
       overflow = 'hidden',
       padding: paddingProp,
@@ -83,24 +97,73 @@ export const Popover = memo(
       portal,
       preventOverflow = true,
       radius: radiusProp = 3,
+      referenceBoundary = props.boundaryElement ?? boundaryElementContext.element,
       referenceElement,
       scheme,
       shadow: shadowProp = 3,
       tone = 'inherit',
       width: widthProp = 'auto',
       zOffset: zOffsetProp = theme.sanity.layer?.popover.zOffset,
+      updateRef,
       ...restProps
     } = props
     const boundarySize = useElementSize(boundaryElement)?.border
     const padding = useArrayProp(paddingProp)
     const radius = useArrayProp(radiusProp)
     const shadow = useArrayProp(shadowProp)
-    const width = useArrayProp(widthProp)
+    const widthArrayProp = useArrayProp(widthProp)
     const zOffset = useArrayProp(zOffsetProp)
     const forwardedRef = useForwardedRef(ref)
     const arrowRef = useRef<HTMLDivElement | null>(null)
     const rootBoundary: RootBoundary = 'viewport'
 
+    const mediaIndex = useMediaIndex()
+    const boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : undefined
+
+    // Update width when
+    // - media index changes
+    // - `width` property changes
+    const width = calcCurrentWidth({mediaIndex, theme, 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
+    useEffect(() => {
+      const floatingElement = forwardedRef.current
+
+      if (!open || !floatingElement) return
+
+      const referenceWidth = referenceWidthRef.current
+
+      if (matchReferenceWidth) {
+        if (referenceWidth !== undefined) {
+          floatingElement.style.width = `${referenceWidth}px`
+        }
+      } else if (width !== undefined) {
+        floatingElement.style.width = `${width}px`
+      }
+
+      if (typeof maxWidth === 'number') {
+        floatingElement.style.maxWidth = `${maxWidth}px`
+      }
+    }, [width, forwardedRef, matchReferenceWidth, maxWidth, open])
+
     const middleware = useMemo(() => {
       const ret: Middleware[] = []
 
@@ -108,7 +171,7 @@ export const Popover = memo(
       if (constrainSize || preventOverflow) {
         ret.push(
           flip({
-            boundary: boundaryElement || undefined,
+            boundary: floatingBoundary || undefined,
             fallbackPlacements,
             padding: DEFAULT_POPOVER_PADDING,
             rootBoundary,
@@ -124,23 +187,36 @@ export const Popover = memo(
       )
 
       // Track sizes
-      if (constrainSize || matchReferenceWidthProp) {
+      if (constrainSize || matchReferenceWidth) {
         ret.push(
           size({
             apply({availableWidth, availableHeight, elements, referenceWidth}) {
-              if (matchReferenceWidthProp) {
+              // not fresh, so use refs
+
+              referenceWidthRef.current = referenceWidth
+
+              const _currentWidth = widthRef.current
+              const _maxWidth = maxWidthRef.current
+
+              if (matchReferenceWidth) {
                 elements.floating.style.width = `${referenceWidth}px`
+              } else if (_currentWidth !== undefined) {
+                elements.floating.style.width = `${_currentWidth}px`
               }
 
               if (constrainSize) {
-                elements.floating.style.maxWidth = `${availableWidth}px`
+                elements.floating.style.maxWidth = `${Math.min(
+                  availableWidth,
+                  _maxWidth ?? Infinity
+                )}px`
+
                 elements.floating.style.maxHeight = `${availableHeight}px`
               }
             },
-            boundaryElement,
+            boundaryElement: floatingBoundary || undefined,
             constrainSize,
             margins,
-            matchReferenceWidth: matchReferenceWidthProp,
+            matchReferenceWidth,
             padding: DEFAULT_POPOVER_PADDING,
           })
         )
@@ -150,7 +226,7 @@ export const Popover = memo(
       if (preventOverflow) {
         ret.push(
           shift({
-            boundary: boundaryElement || undefined,
+            boundary: floatingBoundary || undefined,
             rootBoundary,
             padding: DEFAULT_POPOVER_PADDING,
           })
@@ -169,7 +245,7 @@ export const Popover = memo(
 
       ret.push(
         hide({
-          boundary: boundaryElement || undefined,
+          boundary: referenceBoundary || undefined,
           padding: DEFAULT_POPOVER_PADDING,
           strategy: 'referenceHidden',
         })
@@ -178,37 +254,20 @@ export const Popover = memo(
       return ret
     }, [
       arrowProp,
-      boundaryElement,
       constrainSize,
       fallbackPlacements,
+      floatingBoundary,
       margins,
-      matchReferenceWidthProp,
+      matchReferenceWidth,
       preventOverflow,
+      referenceBoundary,
     ])
 
-    const floatingProps: UseFloatingProps = useMemo(
-      () => ({
-        middleware,
-        placement: placementProp,
-        whileElementsMounted: autoUpdate,
-      }),
-      [middleware, placementProp]
-    )
-
-    const {
-      x,
-      y,
-      placement,
-      reference: referenceRef,
-      floating: floatingRef,
-      update: floatingUpdate,
-      middlewareData,
-      strategy,
-    } = useFloating(floatingProps)
-
-    const handleForcedUpdate = useCallback(() => {
-      floatingUpdate()
-    }, [floatingUpdate])
+    const {x, y, middlewareData, placement, refs, strategy, update} = useFloating({
+      middleware,
+      placement: placementProp,
+      whileElementsMounted: autoUpdate,
+    })
 
     const referenceHidden = middlewareData.hide?.referenceHidden
 
@@ -222,14 +281,14 @@ export const Popover = memo(
     const setFloating = useCallback(
       (node: HTMLDivElement | null) => {
         forwardedRef.current = node
-        floatingRef(node)
+        refs.setFloating(node)
       },
-      [floatingRef, forwardedRef]
+      [forwardedRef, refs]
     )
 
     const setReference = useCallback(
       (node: HTMLElement | null) => {
-        referenceRef(node)
+        refs.setReference(node)
 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const childRef = (childProp as any)?.ref
@@ -240,7 +299,7 @@ export const Popover = memo(
           childRef.current = node
         }
       },
-      [childProp, referenceRef]
+      [childProp, refs]
     )
 
     const child = useMemo(() => {
@@ -250,10 +309,18 @@ export const Popover = memo(
     }, [childProp, referenceElement, setReference])
 
     useEffect(() => {
-      referenceRef(referenceElement || null)
-    }, [referenceRef, referenceElement])
+      if (updateRef) {
+        if (typeof updateRef === 'function') {
+          updateRef(update)
+        } else if (updateRef) {
+          updateRef.current = update
+        }
+      }
+    }, [update, updateRef])
 
-    useOnForcedUpdate(handleForcedUpdate)
+    useEffect(() => {
+      refs.setReference(referenceElement || null)
+    }, [referenceElement, refs])
 
     if (disabled) {
       return childProp || <></>
@@ -268,7 +335,6 @@ export const Popover = memo(
           arrowRef={setArrow}
           arrowX={arrowX}
           arrowY={arrowY}
-          boundaryWidth={preventOverflow ? boundarySize?.width : undefined}
           hidden={referenceHidden}
           overflow={overflow}
           padding={padding}
@@ -279,9 +345,9 @@ export const Popover = memo(
           shadow={shadow}
           strategy={strategy}
           tone={tone}
+          width={matchReferenceWidth ? referenceWidthRef.current : width}
           x={x}
           y={y}
-          width={width}
         >
           {content}
         </PopoverCard>

package/src/primitives/popover/popoverCard.tsx

@@ -1,45 +1,23 @@
 import {Strategy} from '@floating-ui/react-dom'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
-import styled, {CSSObject} from 'styled-components'
+import styled from 'styled-components'
 import {FLOATING_STATIC_SIDES} from '../../constants'
-import {ThemeProps} from '../../styles'
 import {ThemeColorSchemeKey} from '../../theme'
 import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
 import {useLayer} from '../../utils'
 import {Card} from '../card'
-import {Container} from '../container'
-import {
-  DEFAULT_POPOVER_ARROW_WIDTH,
-  DEFAULT_POPOVER_MARGINS,
-  DEFAULT_POPOVER_PADDING,
-} from './constants'
+import {Flex} from '../flex'
+import {DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_MARGINS} from './constants'
 import {PopoverArrow} from './popoverArrow'
 
-function popoverCardStyle(props: {$boundaryWidth?: number} & ThemeProps): CSSObject {
-  const {$boundaryWidth} = props
-
-  return {
-    '&:not([hidden])': {
-      display: 'flex',
-    },
-
-    flexDirection: 'column',
-
-    width: 'max-content',
-    minWidth: 'min-content',
-    maxWidth:
-      typeof $boundaryWidth === 'number'
-        ? `${$boundaryWidth - DEFAULT_POPOVER_PADDING * 2}px`
-        : undefined,
-  }
-}
-
-const Root = memo(styled(Card)(popoverCardStyle))
-
-const PopoverContainer = memo(styled(Container)`
-  max-height: inherit;
-  max-width: inherit;
-`)
+const Root = styled(Card)({
+  '&:not([hidden])': {
+    display: 'flex',
+  },
+  flexDirection: 'column',
+  width: 'max-content',
+  minWidth: 'min-content',
+})
 
 /**
  * @internal
@@ -53,7 +31,6 @@ export const PopoverCard = memo(
       arrowRef: React.Ref<HTMLDivElement>
       arrowX?: number
       arrowY?: number
-      boundaryWidth?: number
       overflow?: BoxOverflow
       padding?: number | number[]
       placement?: Placement
@@ -62,7 +39,7 @@ export const PopoverCard = memo(
       shadow?: number | number[]
       strategy: Strategy
       tone: CardTone
-      width?: number | 'auto' | (number | 'auto')[]
+      width: number | undefined
       x: number | null
       y: number | null
     } & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
@@ -74,7 +51,6 @@ export const PopoverCard = memo(
       arrowRef,
       arrowX,
       arrowY,
-      boundaryWidth,
       children,
       padding,
       placement,
@@ -85,7 +61,7 @@ export const PopoverCard = memo(
       strategy,
       style,
       tone,
-      width = 'auto',
+      width,
       x: xProp,
       y: yProp,
       ...restProps
@@ -108,10 +84,11 @@ export const PopoverCard = memo(
         position: strategy,
         top: y,
         left: x,
+        width,
         zIndex,
         ...style,
       }),
-      [strategy, style, x, y, zIndex]
+      [strategy, style, width, x, y, zIndex]
     )
 
     const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]]
@@ -131,10 +108,9 @@ export const PopoverCard = memo(
 
     return (
       <Root
+        data-ui="Popover"
         {...restProps}
-        $boundaryWidth={boundaryWidth}
         data-placement={placement}
-        data-ui="Popover"
         radius={radius}
         ref={ref}
         scheme={scheme}
@@ -143,16 +119,11 @@ export const PopoverCard = memo(
         style={rootStyle}
         tone={tone}
       >
-        <PopoverContainer
-          data-ui="Popover__wrapper"
-          flex={1}
-          overflow={overflow}
-          padding={padding}
-          sizing="border"
-          width={width}
-        >
-          {children}
-        </PopoverContainer>
+        <Flex data-ui="Popover__wrapper" direction="column" flex={1} overflow={overflow}>
+          <Flex direction="column" flex={1} padding={padding}>
+            {children}
+          </Flex>
+        </Flex>
 
         {arrow && <PopoverArrow ref={arrowRef} style={arrowStyle} />}
       </Root>

package/src/primitives/popover/types.ts

@@ -1,8 +1,6 @@
-/**
- * @public
- */
-export interface PopoverContextValue {
-  version: number
-  forceUpdate: () => void
-  lastUpdateId: string | null
-}
+/** @beta */
+export type PopoverUpdateCallback = () => void
+
+/** @public */
+// TODO: remove `auto` from PopoverWidth
+export type PopoverWidth = number | 'auto'

package/src/primitives/tooltip/tooltip.tsx

@@ -110,7 +110,7 @@ export const Tooltip = forwardRef(function Tooltip(
     return ret
   }, [boundaryElement, fallbackPlacements])
 
-  const {x, y, placement, reference, floating, middlewareData, update, strategy} = useFloating({
+  const {x, y, placement, middlewareData, refs, update, strategy} = useFloating({
     middleware,
     placement: placementProp,
     whileElementsMounted: autoUpdate,
@@ -186,7 +186,7 @@ export const Tooltip = forwardRef(function Tooltip(
   }, [content])
 
   // Update reference
-  useEffect(() => reference(referenceElement), [reference, referenceElement])
+  useEffect(() => refs.setReference(referenceElement), [referenceElement, refs])
 
   const setArrow = useCallback(
     (arrowEl: HTMLDivElement | null) => {
@@ -199,9 +199,9 @@ export const Tooltip = forwardRef(function Tooltip(
   const setFloating = useCallback(
     (node: HTMLDivElement | null) => {
       forwardedRef.current = node
-      floating(node)
+      refs.setFloating(node)
     },
-    [floating, forwardedRef]
+    [forwardedRef, refs]
   )
 
   const childRef: ForwardedRef<HTMLElement | null> = (childProp as any)?.ref

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

@@ -1,103 +0,0 @@
-import {useBoolean} from '@sanity/ui-workshop'
-import {useCallback, useMemo, useState} from 'react'
-import {BoundaryElementProvider} from '../../../utils'
-import {Button} from '../../button'
-import {Card} from '../../card'
-import {Flex} from '../../flex'
-import {Text} from '../../text'
-import {Popover, PopoverProps} from '../popover'
-import {PopoverProvider} from '../popoverProvider'
-import {usePopover} from '../usePopover'
-
-function PopoverComponent({
-  referenceElement,
-  boundaryElement,
-}: {
-  referenceElement: PopoverProps['referenceElement']
-  boundaryElement: PopoverProps['boundaryElement']
-}) {
-  return (
-    <Popover
-      open
-      content={
-        <Card padding={5} radius={3}>
-          <Text weight="semibold" muted>
-            I should follow my reference element <br />
-            when the parent container is resized.
-          </Text>
-        </Card>
-      }
-      referenceElement={referenceElement}
-      boundaryElement={boundaryElement}
-    />
-  )
-}
-
-export default function PositionStory() {
-  return (
-    <PopoverProvider>
-      <InnerStory />
-    </PopoverProvider>
-  )
-}
-
-function InnerStory() {
-  const [size, setSize] = useState(0.5)
-  const [referenceElement, setReferenceElement] = useState<PopoverProps['referenceElement']>(null)
-  const [boundaryElement, setBoundaryElement] = useState<PopoverProps['boundaryElement']>(null)
-  const updatePositionOnClick = useBoolean('Force popover update on size change', false, 'Props')
-  const {forceUpdate} = usePopover()
-
-  // Random number between 0.2 and 5
-  const handleSetSize = useCallback(() => {
-    const s = Math.random() * (0.5 - 0.2) + 0.2
-
-    setSize(s)
-
-    if (updatePositionOnClick) {
-      forceUpdate()
-    }
-  }, [updatePositionOnClick])
-
-  const element = useMemo(() => {
-    return (
-      <Card
-        as="span"
-        border
-        radius={2}
-        style={{display: 'inline', padding: '0.4, 1'}}
-        ref={setReferenceElement}
-        tone="primary"
-      >
-        nunc
-      </Card>
-    )
-  }, [])
-
-  return (
-    <>
-      <PopoverComponent referenceElement={referenceElement} boundaryElement={boundaryElement} />
-
-      <BoundaryElementProvider element={boundaryElement as HTMLDivElement}>
-        <Flex height="fill">
-          <Card borderRight flex={size} tone="transparent">
-            <Flex align="center" justify="center" height="fill">
-              <Button text="Change size" onClick={handleSetSize} />
-            </Flex>
-          </Card>
-
-          <Card flex={1} ref={setBoundaryElement}>
-            <Flex height="fill" padding={5}>
-              <Text>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies, nisl ut
-                aliquet ultricies, nunc sapien ultricies tortor, nec tincidunt elit risus ac nunc.
-                Nulla facilisi. Sed aliquam, {element} eget aliquam ultricies, diam diam aliquam
-                augue, eget ultricies nisl nunc eget nunc. Nulla facilisi. Sed aliquam,
-              </Text>
-            </Flex>
-          </Card>
-        </Flex>
-      </BoundaryElementProvider>
-    </>
-  )
-}