@sanity/ui 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",
@@ -49,7 +49,7 @@
     "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "1.1.1",
+    "@floating-ui/react-dom": "2.0.0",
     "@sanity/color": "^2.2.5",
     "@sanity/icons": "^2.3.1",
     "csstype": "^3.1.2",
@@ -57,10 +57,10 @@
     "react-refractor": "^2.1.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.1",
-    "@babel/preset-env": "^7.22.4",
-    "@babel/preset-react": "^7.22.3",
-    "@babel/preset-typescript": "^7.21.5",
+    "@babel/core": "^7.22.5",
+    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
     "@commitlint/cli": "^17.6.5",
     "@commitlint/config-conventional": "^17.6.5",
     "@juggle/resize-observer": "^3.4.0",
@@ -72,7 +72,7 @@
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.2",
     "@types/jest-axe": "^3.5.5",
-    "@types/node": "^18.16.16",
+    "@types/node": "^20.2.5",
     "@types/react": "^18.2.9",
     "@types/react-dom": "^18.2.4",
     "@types/react-is": "^18.2.0",

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

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

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

@@ -0,0 +1,86 @@
+import {useSelect} from '@sanity/ui-workshop'
+import {useCallback, useEffect, useRef, useState} from 'react'
+import {BoundaryElementProvider} from '../../../utils'
+import {Box} from '../../box'
+import {Card} from '../../card'
+import {Flex} from '../../flex'
+import {Stack} from '../../stack'
+import {Text} from '../../text'
+import {Popover, PopoverProps, PopoverUpdateCallback} from '../popover'
+
+const SIDE_PANEL_WIDTH = {
+  sm: 300,
+  md: 400,
+  lg: 500,
+  xl: 600,
+}
+
+export default function SidePanelStory() {
+  const sidePanelWidth = useSelect('Side panel width', SIDE_PANEL_WIDTH, SIDE_PANEL_WIDTH.md)
+  const [sidePanel, setSidePanel] = useState<HTMLDivElement | null>(null)
+  const updateRef = useRef<PopoverUpdateCallback>()
+
+  useEffect(() => updateRef.current?.(), [sidePanelWidth])
+
+  return (
+    <Flex height="fill">
+      <Card flex={1}>
+        <Box padding={4}>
+          <Text>
+            This story shows that popovers respect their boundary when used in a side panel.
+          </Text>
+        </Box>
+      </Card>
+      <BoundaryElementProvider element={sidePanel}>
+        <Card borderLeft flex="none" ref={setSidePanel} style={{width: sidePanelWidth}} width={0}>
+          <Stack padding={4} space={5}>
+            <Text muted size={1}>
+              Click the <code>reference</code> text below to toggle the popover.
+            </Text>
+
+            <Card border padding={3}>
+              <Text size={1}>
+                Some editor <InlineObject updateRef={updateRef} />
+              </Text>
+            </Card>
+          </Stack>
+        </Card>
+      </BoundaryElementProvider>
+    </Flex>
+  )
+}
+
+function InlineObject(props: {updateRef?: PopoverProps['updateRef']}) {
+  const {updateRef} = props
+  const [open, setOpen] = useState(false)
+
+  const handleClick = useCallback(() => {
+    setOpen((prev) => !prev)
+  }, [])
+
+  return (
+    <Popover
+      content={
+        <Box padding={3}>
+          <Text size={1}>
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+            has been the industry's standard dummy text ever since the 1500s, when an unknown
+            printer took a galley of type and scrambled it to make a type specimen book. It has
+            survived not only five centuries, but also the leap into electronic typesetting,
+            remaining essentially unchanged. It was popularised in the 1960s with the release of
+            Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
+            publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+          </Text>
+        </Box>
+      }
+      constrainSize
+      open={open}
+      overflow="auto"
+      portal
+      width={0}
+      updateRef={updateRef}
+    >
+      <code onClick={handleClick}>reference</code>
+    </Popover>
+  )
+}

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

@@ -1,5 +1,5 @@
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {ReactElement, useState} from 'react'
+import {useAction, useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {ReactElement, useRef, useState} from 'react'
 import {
   WORKSHOP_CONTAINER_WIDTH_OPTIONS,
   WORKSHOP_PLACEMENT_OPTIONS,
@@ -10,10 +10,13 @@ import {Button} from '../../button'
 import {Card} from '../../card'
 import {Text} from '../../text'
 import {Popover} from '../popover'
+import {PopoverUpdateCallback} from '../types'
 
 export default function TestStory(): ReactElement {
   const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+
+  const mount = useBoolean('Mount', true)
   const arrow = useBoolean('Arrow', true)
   const constrainSize = useBoolean('Constrain size', true)
   const matchReferenceWidth = useBoolean('Match reference width', false)
@@ -26,6 +29,10 @@ export default function TestStory(): ReactElement {
 
   const text = useText('Text', 'Test')
 
+  const updateRef = useRef<PopoverUpdateCallback>()
+
+  const button = <Button text="reference" style={{width: referenceWide ? 300 : undefined}} />
+
   return (
     <Card
       ref={setBoundaryElement}
@@ -56,22 +63,27 @@ export default function TestStory(): ReactElement {
         <div style={{padding: '150vh'}}>
           <PortalProvider element={portalElement}>
             <BoundaryElementProvider element={boundaryElement}>
-              <Popover
-                arrow={arrow}
-                content={<Text size={1}>{text}</Text>}
-                constrainSize={constrainSize}
-                fallbackPlacements={['left', 'bottom', 'right', 'top']}
-                matchReferenceWidth={matchReferenceWidth}
-                open={open}
-                padding={3}
-                placement={placement}
-                portal
-                preventOverflow={preventOverflow}
-                radius={radius}
-                width={width}
-              >
-                <Button text="reference" style={{width: referenceWide ? 300 : undefined}} />
-              </Popover>
+              {!mount && button}
+              {mount && (
+                <Popover
+                  arrow={arrow}
+                  content={<Text>{text}</Text>}
+                  constrainSize={constrainSize}
+                  fallbackPlacements={['left', 'bottom', 'right', 'top']}
+                  matchReferenceWidth={matchReferenceWidth}
+                  open={open}
+                  overflow="hidden"
+                  padding={3}
+                  placement={placement}
+                  portal
+                  preventOverflow={preventOverflow}
+                  radius={radius}
+                  updateRef={updateRef}
+                  width={width}
+                >
+                  {button}
+                </Popover>
+              )}
             </BoundaryElementProvider>
           </PortalProvider>
         </div>

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

@@ -40,5 +40,10 @@ export default defineScope({
       title: 'Open on mount',
       component: lazy(() => import('./OpenOnMountStory')),
     },
+    {
+      name: 'side-panel',
+      title: 'Side panel',
+      component: lazy(() => import('./SidePanelStory')),
+    },
   ],
 })

package/src/primitives/popover/helpers.ts

@@ -0,0 +1,32 @@
+import {Theme} from '../../theme'
+import {DEFAULT_POPOVER_PADDING} from './constants'
+import {PopoverWidth} from './types'
+
+export function calcCurrentWidth(params: {
+  mediaIndex: number
+  theme: Theme
+  width: PopoverWidth[]
+}): number | undefined {
+  const {mediaIndex, theme, width} = params
+
+  const w = width[mediaIndex]
+  const currentWidth: PopoverWidth | undefined = w === undefined ? width[width.length - 1] : w
+
+  return typeof currentWidth === 'number' ? theme.sanity.container[currentWidth] : undefined
+}
+
+export function calcMaxWidth(params: {
+  boundaryWidth: number | undefined
+  currentWidth: number | undefined
+}): number | undefined {
+  const {boundaryWidth, currentWidth} = params
+
+  if (currentWidth === undefined && boundaryWidth === undefined) {
+    return undefined
+  }
+
+  return Math.min(
+    currentWidth ?? Infinity,
+    (boundaryWidth || Infinity) - DEFAULT_POPOVER_PADDING * 2
+  )
+}

package/src/primitives/popover/index.ts

@@ -1 +1,2 @@
 export * from './popover'
+export * from './types'

package/src/primitives/popover/popover.tsx

@@ -8,51 +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 {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 */
@@ -74,7 +88,8 @@ export const Popover = memo(
       content,
       disabled,
       fallbackPlacements,
-      matchReferenceWidth: matchReferenceWidthProp,
+      matchReferenceWidth,
+      floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
       open,
       overflow = 'hidden',
       padding: paddingProp,
@@ -82,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[] = []
 
@@ -107,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,
@@ -123,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,
           })
         )
@@ -149,7 +226,7 @@ export const Popover = memo(
       if (preventOverflow) {
         ret.push(
           shift({
-            boundary: boundaryElement || undefined,
+            boundary: floatingBoundary || undefined,
             rootBoundary,
             padding: DEFAULT_POPOVER_PADDING,
           })
@@ -168,7 +245,7 @@ export const Popover = memo(
 
       ret.push(
         hide({
-          boundary: boundaryElement || undefined,
+          boundary: referenceBoundary || undefined,
           padding: DEFAULT_POPOVER_PADDING,
           strategy: 'referenceHidden',
         })
@@ -177,32 +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,
-      middlewareData,
-      strategy,
-    } = useFloating(floatingProps)
+    const {x, y, middlewareData, placement, refs, strategy, update} = useFloating({
+      middleware,
+      placement: placementProp,
+      whileElementsMounted: autoUpdate,
+    })
 
     const referenceHidden = middlewareData.hide?.referenceHidden
 
@@ -216,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
@@ -234,7 +299,7 @@ export const Popover = memo(
           childRef.current = node
         }
       },
-      [childProp, referenceRef]
+      [childProp, refs]
     )
 
     const child = useMemo(() => {
@@ -244,8 +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])
+
+    useEffect(() => {
+      refs.setReference(referenceElement || null)
+    }, [referenceElement, refs])
 
     if (disabled) {
       return childProp || <></>
@@ -260,7 +335,6 @@ export const Popover = memo(
           arrowRef={setArrow}
           arrowX={arrowX}
           arrowY={arrowY}
-          boundaryWidth={preventOverflow ? boundarySize?.width : undefined}
           hidden={referenceHidden}
           overflow={overflow}
           padding={padding}
@@ -271,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>