@sanity/ui 3.0.11 → 3.0.12-canary.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.11",
+  "version": "3.0.12-canary.0",
   "keywords": [
     "sanity",
     "ui",
@@ -60,32 +60,6 @@
     "exports",
     "src"
   ],
-  "scripts": {
-    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
-    "clean": "rimraf .workshop dist",
-    "commit": "cz",
-    "cypress:dev": "run-p dev cypress:open",
-    "cypress:open": "cypress open",
-    "cypress:run": "cypress run",
-    "dev": "run-p storybook:dev workshop:dev",
-    "figma:pkg:build": "cd figma && pnpm build",
-    "format": "prettier --write --cache --ignore-unknown .",
-    "lint": "eslint --cache .",
-    "prepack": "pnpm build",
-    "pkg:build": "pkg build --strict",
-    "pkg:check": "pkg --strict",
-    "prepare": "husky install",
-    "release": "semantic-release",
-    "storybook:build": "storybook build",
-    "storybook:dev": "storybook dev -p 6006",
-    "test": "jest",
-    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
-    "ts:check": "tsc",
-    "watch": "pkg watch --strict",
-    "workshop:build": "workshop build",
-    "workshop:dev": "workshop dev",
-    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
-  },
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
@@ -210,25 +184,37 @@
     "react-is": "^18 || >=19.0.0-0",
     "styled-components": "^5.2 || ^6"
   },
-  "packageManager": "pnpm@9.15.9",
   "engines": {
     "node": ">=20.19 <22 || >=22.12"
   },
   "publishConfig": {
     "access": "public"
   },
-  "pnpm": {
-    "overrides": {
-      "@types/react": "$@types/react",
-      "@types/react-dom": "$@types/react-dom",
-      "@types/react-is": "$@types/react-is",
-      "conventional-changelog-conventionalcommits": ">= 8.0.0",
-      "react": "$react",
-      "react-dom": "$react-dom",
-      "react-is": "$react-is"
-    }
-  },
   "esm.sh": {
     "bundle": false
+  },
+  "scripts": {
+    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
+    "clean": "rimraf .workshop dist",
+    "commit": "cz",
+    "cypress:dev": "run-p dev cypress:open",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
+    "dev": "run-p storybook:dev workshop:dev",
+    "figma:pkg:build": "cd figma && pnpm build",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "lint": "eslint .",
+    "pkg:build": "pkg build --strict",
+    "pkg:check": "pkg --strict",
+    "release": "semantic-release",
+    "storybook:build": "storybook build",
+    "storybook:dev": "storybook dev -p 6006",
+    "test": "jest",
+    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
+    "ts:check": "tsc",
+    "watch": "pkg watch --strict",
+    "workshop:build": "workshop build",
+    "workshop:dev": "workshop dev",
+    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
   }
-}
+}

package/src/core/components/breadcrumbs/breadcrumbs.tsx

@@ -42,44 +42,16 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
 
   const rawItems = useMemo(() => Children.toArray(children).filter(isValidElement), [children])
 
-  const items = useMemo(() => {
-    const len = rawItems.length
-
-    if (maxLength && len > maxLength) {
-      const beforeLength = Math.ceil(maxLength / 2)
-      const afterLength = Math.floor(maxLength / 2)
-
-      return [
-        ...rawItems.slice(0, beforeLength - 1),
-        <Popover
-          constrainSize
-          content={
-            <Stack as="ol" overflow="auto" padding={space} space={space}>
-              {rawItems.slice(beforeLength - 1, len - afterLength)}
-            </Stack>
-          }
-          key="button"
-          open={open}
-          placement="top"
-          portal
-          ref={popoverElementRef}
-        >
-          <ExpandButton
-            fontSize={1}
-            mode="bleed"
-            onClick={open ? collapse : expand}
-            padding={1}
-            ref={expandElementRef}
-            selected={open}
-            text="…"
-          />
-        </Popover>,
-        ...rawItems.slice(len - afterLength),
-      ]
-    }
-
-    return rawItems
-  }, [collapse, expand, maxLength, open, rawItems, space])
+  const items = useItems({
+    collapse,
+    expand,
+    expandElementRef,
+    maxLength,
+    open,
+    popoverElementRef,
+    rawItems,
+    space,
+  })
 
   return (
     <StyledBreadcrumbs data-ui="Breadcrumbs" {...restProps} ref={ref}>
@@ -97,3 +69,60 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
   )
 })
 Breadcrumbs.displayName = 'ForwardRef(Breadcrumbs)'
+
+function useItems({
+  collapse,
+  expand,
+  expandElementRef,
+  maxLength,
+  open,
+  popoverElementRef,
+  rawItems,
+  space,
+}: {
+  collapse: () => void
+  expand: () => void
+  expandElementRef: React.RefObject<HTMLButtonElement | null>
+  maxLength: number | undefined
+  open: boolean
+  popoverElementRef: React.RefObject<HTMLDivElement | null>
+  rawItems: React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[]
+  space: number[]
+}) {
+  const len = rawItems.length
+
+  if (maxLength && len > maxLength) {
+    const beforeLength = Math.ceil(maxLength / 2)
+    const afterLength = Math.floor(maxLength / 2)
+
+    return [
+      ...rawItems.slice(0, beforeLength - 1),
+      <Popover
+        constrainSize
+        content={
+          <Stack as="ol" overflow="auto" padding={space} space={space}>
+            {rawItems.slice(beforeLength - 1, len - afterLength)}
+          </Stack>
+        }
+        key="button"
+        open={open}
+        placement="top"
+        portal
+        ref={popoverElementRef}
+      >
+        <ExpandButton
+          fontSize={1}
+          mode="bleed"
+          onClick={open ? collapse : expand}
+          padding={1}
+          ref={expandElementRef}
+          selected={open}
+          text="…"
+        />
+      </Popover>,
+      ...rawItems.slice(len - afterLength),
+    ]
+  }
+
+  return rawItems
+}

package/src/core/primitives/popover/floating-ui/size.ts

@@ -1,23 +1,28 @@
-import {detectOverflow, Elements, Middleware} from '@floating-ui/react-dom'
+import {detectOverflow, Middleware} from '@floating-ui/react-dom'
 
 import {PopoverMargins} from '../../../types'
 
-export interface SizeMiddlewareApplyOptions {
-  availableWidth: number
-  availableHeight: number
-  elements: Elements
-  referenceWidth: number
-}
-
 export function size(options: {
-  apply: (args: SizeMiddlewareApplyOptions) => void
   boundaryElement?: HTMLElement | null
   constrainSize: boolean
   margins: PopoverMargins
   matchReferenceWidth?: boolean
+  maxWidthRef: React.RefObject<number | undefined>
   padding?: number
+  referenceWidthRef: React.RefObject<number | undefined>
+  setReferenceWidth: (referenceWidth: number) => void
+  widthRef: React.RefObject<number | undefined>
 }): Middleware {
-  const {apply, margins, padding = 0} = options
+  const {
+    constrainSize,
+    margins,
+    matchReferenceWidth,
+    maxWidthRef,
+    padding = 0,
+    referenceWidthRef,
+    setReferenceWidth,
+    widthRef,
+  } = options
 
   return {
     name: '@sanity/ui/size',
@@ -61,12 +66,23 @@ export function size(options: {
 
       // IMPORTANT – APPLY ELEMENT STYLES HERE
       // Elements need to be resized BEFORE the `platform.getDimensions` call below
-      apply({
-        availableWidth: maxWidth - margins[1] - margins[3],
-        availableHeight: maxHeight - margins[0] - margins[2],
-        elements,
-        referenceWidth: reference.width - margins[1] - margins[3],
-      })
+      const availableWidth = maxWidth - margins[1] - margins[3]
+      const availableHeight = maxHeight - margins[0] - margins[2]
+      const referenceWidth = reference.width - margins[1] - margins[3]
+      referenceWidthRef.current = referenceWidth
+      setReferenceWidth(referenceWidth)
+
+      if (matchReferenceWidth) {
+        elements.floating.style.width = `${referenceWidth}px`
+      } else if (widthRef.current !== undefined) {
+        elements.floating.style.width = `${widthRef.current}px`
+      }
+
+      if (constrainSize) {
+        elements.floating.style.maxWidth = `${Math.min(availableWidth, maxWidthRef.current ?? Infinity)}px`
+
+        elements.floating.style.maxHeight = `${availableHeight}px`
+      }
 
       const nextDimensions = await platform.getDimensions(elements.floating)
 

package/src/core/primitives/popover/popover.tsx

@@ -16,13 +16,13 @@ import {
   cloneElement,
   forwardRef,
   memo,
-  MutableRefObject,
-  RefCallback,
+  type Ref,
   useCallback,
   useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
+  useState,
 } from 'react'
 
 import {useArrayProp, useElementSize, useMediaIndex, usePrefersReducedMotion} from '../../hooks'
@@ -119,9 +119,7 @@ export interface PopoverProps
   scheme?: ThemeColorSchemeKey
   tone?: CardTone
   /** @beta */
-  updateRef?:
-    | MutableRefObject<PopoverUpdateCallback | undefined>
-    | RefCallback<PopoverUpdateCallback | undefined>
+  updateRef?: Ref<PopoverUpdateCallback | undefined>
   width?: PopoverWidth | PopoverWidth[]
 }
 
@@ -149,15 +147,14 @@ export const Popover = memo(
       __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
       animate: _animate = false,
       arrow: arrowProp = false,
-      boundaryElement = boundaryElementContext.element,
+      boundaryElement: _boundaryElement,
       children: childProp,
       constrainSize = false,
       content,
       disabled,
-      fallbackPlacements = props.fallbackPlacements ??
-        DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
+      fallbackPlacements: _fallbackPlacements,
       matchReferenceWidth,
-      floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
+      floatingBoundary: _floatingBoundary,
       modal,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onActivate,
@@ -169,16 +166,24 @@ export const Popover = memo(
       portal,
       preventOverflow = true,
       radius: radiusProp = 3,
-      referenceBoundary = props.boundaryElement ?? boundaryElementContext.element,
+      referenceBoundary: _referenceBoundary,
       referenceElement,
       scheme,
       shadow: shadowProp = 3,
       tone = 'inherit',
       width: widthProp = 'auto',
-      zOffset: zOffsetProp = layer.popover.zOffset,
+      zOffset: _zOffsetProp,
       updateRef,
       ...restProps
     } = props
+    const boundaryElement = _boundaryElement ?? boundaryElementContext?.element
+    const fallbackPlacements =
+      _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom']
+    const floatingBoundary =
+      _floatingBoundary ?? props.boundaryElement ?? boundaryElementContext.element
+    const referenceBoundary =
+      _referenceBoundary ?? props.boundaryElement ?? boundaryElementContext.element
+    const zOffsetProp = _zOffsetProp ?? layer.popover.zOffset
     const prefersReducedMotion = usePrefersReducedMotion()
     const animate = prefersReducedMotion ? false : _animate
     const boundarySize = useElementSize(boundaryElement)?.border
@@ -247,117 +252,26 @@ export const Popover = memo(
       }
     }, [width, matchReferenceWidth, maxWidth, open])
 
-    const middleware = useMemo(() => {
-      const ret: Middleware[] = []
-
-      // Flip the floating element when leaving the boundary box
-      if (constrainSize || preventOverflow) {
-        if (placementStrategy === 'autoPlacement') {
-          ret.push(
-            autoPlacement({
-              allowedPlacements: [placementProp].concat(fallbackPlacements),
-            }),
-          )
-        } else {
-          ret.push(
-            flip({
-              boundary: floatingBoundary || undefined,
-              fallbackPlacements,
-              padding: DEFAULT_POPOVER_PADDING,
-              rootBoundary,
-            }),
-          )
-        }
-      }
-
-      // Define distance between reference and floating element
-      ret.push(offset({mainAxis: DEFAULT_POPOVER_DISTANCE}))
-
-      // Track sizes
-      if (constrainSize || matchReferenceWidth) {
-        ret.push(
-          size({
-            apply({availableWidth, availableHeight, elements, referenceWidth}) {
-              // 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 = `${Math.min(
-                  availableWidth,
-                  _maxWidth ?? Infinity,
-                )}px`
-
-                elements.floating.style.maxHeight = `${availableHeight}px`
-              }
-            },
-            boundaryElement: floatingBoundary || undefined,
-            constrainSize,
-            margins,
-            matchReferenceWidth,
-            padding: DEFAULT_POPOVER_PADDING,
-          }),
-        )
-      }
-
-      // Shift the popover so its sits within the boundary element
-      if (preventOverflow) {
-        ret.push(
-          shift({
-            boundary: floatingBoundary || undefined,
-            rootBoundary,
-            padding: DEFAULT_POPOVER_PADDING,
-          }),
-        )
-      }
-
-      // Place arrow
-      if (arrowProp) {
-        ret.push(
-          arrow({
-            element: arrowRef,
-            padding: DEFAULT_POPOVER_PADDING,
-          }),
-        )
-      }
-
-      // Determine the origin to scale from.
-      // Must be placed after `@sanity/ui/size` and `shift` middleware.
-      if (animate) {
-        ret.push(origin)
-      }
-
-      ret.push(
-        hide({
-          boundary: referenceBoundary || undefined,
-          padding: DEFAULT_POPOVER_PADDING,
-          strategy: 'referenceHidden',
-        }),
-      )
-
-      return ret
-    }, [
+    const [referenceWidth, setReferenceWidth] = useState<number | undefined>(undefined)
+    const middleware = useMiddleware({
       animate,
       arrowProp,
+      arrowRef,
       constrainSize,
       fallbackPlacements,
-      placementProp,
-      placementStrategy,
       floatingBoundary,
       margins,
       matchReferenceWidth,
+      maxWidthRef,
+      placementProp,
+      placementStrategy,
       preventOverflow,
       referenceBoundary,
-    ])
+      referenceWidthRef,
+      rootBoundary,
+      setReferenceWidth,
+      widthRef,
+    })
 
     const {x, y, middlewareData, placement, refs, strategy, update} = useFloating({
       middleware,
@@ -390,20 +304,9 @@ export const Popover = memo(
       [refs],
     )
 
-    const setReference = useCallback(
-      (node: HTMLElement | null) => {
-        refs.setReference(node)
-
-        const childRef = getElementRef(childProp as any)
-
-        if (typeof childRef === 'function') {
-          childRef(node)
-        } else if (childRef) {
-          childRef.current = node
-        }
-      },
-      [childProp, refs],
-    )
+    // If there's a child then we need to set the reference element to the cloned child ref
+    // and if child changes we make sure to update or remove the reference element.
+    useImperativeHandle(childProp ? getElementRef(childProp) : null, () => refs.reference.current)
 
     const child = useMemo(() => {
       // If a reference element is defined, we don't need to clone the child
@@ -411,18 +314,10 @@ export const Popover = memo(
 
       if (!childProp) return null
 
-      return cloneElement(childProp, {ref: setReference})
-    }, [childProp, referenceElement, setReference])
+      return cloneElement(childProp, {ref: refs.setReference})
+    }, [childProp, referenceElement, refs.setReference])
 
-    useEffect(() => {
-      if (updateRef) {
-        if (typeof updateRef === 'function') {
-          updateRef(update)
-        } else if (updateRef) {
-          updateRef.current = update
-        }
-      }
-    }, [update, updateRef])
+    useImperativeHandle(updateRef, () => update, [update])
 
     if (disabled) {
       return childProp || <></>
@@ -453,7 +348,7 @@ export const Popover = memo(
           originY={originY}
           strategy={strategy}
           tone={tone}
-          width={matchReferenceWidth ? referenceWidthRef.current : width}
+          width={matchReferenceWidth ? referenceWidth : width}
           x={x}
           y={y}
         >
@@ -482,3 +377,140 @@ export const Popover = memo(
   }),
 )
 Popover.displayName = 'Memo(ForwardRef(Popover))'
+
+function useMiddleware({
+  animate,
+  arrowProp,
+  arrowRef,
+  constrainSize,
+  fallbackPlacements,
+  floatingBoundary,
+  margins,
+  matchReferenceWidth,
+  maxWidthRef,
+  placementProp,
+  placementStrategy,
+  preventOverflow,
+  referenceBoundary,
+  referenceWidthRef,
+  rootBoundary,
+  setReferenceWidth,
+  widthRef,
+}: {
+  animate: boolean
+  arrowProp: boolean
+  arrowRef: React.RefObject<HTMLDivElement | null>
+  constrainSize: boolean
+  fallbackPlacements: Placement[]
+  floatingBoundary: HTMLElement | null
+  margins: PopoverMargins
+  matchReferenceWidth: boolean | undefined
+  maxWidthRef: React.RefObject<number | undefined>
+  placementProp: Placement
+  placementStrategy: 'flip' | 'autoPlacement'
+  preventOverflow: boolean
+  referenceBoundary: HTMLElement | null
+  referenceWidthRef: React.RefObject<number | undefined>
+  rootBoundary: RootBoundary
+  setReferenceWidth: (referenceWidth: number) => void
+  widthRef: React.RefObject<number | undefined>
+}) {
+  return useMemo(() => {
+    const ret: Middleware[] = []
+
+    // Flip the floating element when leaving the boundary box
+    if (constrainSize || preventOverflow) {
+      if (placementStrategy === 'autoPlacement') {
+        ret.push(
+          autoPlacement({
+            allowedPlacements: [placementProp].concat(fallbackPlacements),
+          }),
+        )
+      } else {
+        ret.push(
+          flip({
+            boundary: floatingBoundary || undefined,
+            fallbackPlacements,
+            padding: DEFAULT_POPOVER_PADDING,
+            rootBoundary,
+          }),
+        )
+      }
+    }
+
+    // Define distance between reference and floating element
+    ret.push(offset({mainAxis: DEFAULT_POPOVER_DISTANCE}))
+
+    // Track sizes
+    if (constrainSize || matchReferenceWidth) {
+      ret.push(
+        size({
+          boundaryElement: floatingBoundary || undefined,
+          constrainSize,
+          margins,
+          matchReferenceWidth,
+          maxWidthRef,
+          padding: DEFAULT_POPOVER_PADDING,
+          referenceWidthRef,
+          setReferenceWidth,
+          widthRef,
+        }),
+      )
+    }
+
+    // Shift the popover so its sits within the boundary element
+    if (preventOverflow) {
+      ret.push(
+        shift({
+          boundary: floatingBoundary || undefined,
+          rootBoundary,
+          padding: DEFAULT_POPOVER_PADDING,
+        }),
+      )
+    }
+
+    // Place arrow
+    if (arrowProp) {
+      ret.push(
+        arrow({
+          element: arrowRef,
+          padding: DEFAULT_POPOVER_PADDING,
+        }),
+      )
+    }
+
+    // Determine the origin to scale from.
+    // Must be placed after `@sanity/ui/size` and `shift` middleware.
+    if (animate) {
+      ret.push(origin)
+    }
+
+    ret.push(
+      hide({
+        boundary: referenceBoundary || undefined,
+        padding: DEFAULT_POPOVER_PADDING,
+        strategy: 'referenceHidden',
+      }),
+    )
+
+    return ret
+  }, [
+    animate,
+    arrowProp,
+    arrowRef,
+    constrainSize,
+    fallbackPlacements,
+    floatingBoundary,
+    margins,
+    matchReferenceWidth,
+    maxWidthRef,
+    placementProp,
+    placementStrategy,
+    preventOverflow,
+    referenceBoundary,
+    referenceWidthRef,
+    rootBoundary,
+    setReferenceWidth,
+    widthRef,
+  ])
+}