@sanity/ui 1.0.0-beta.32 → 1.0.0-beta.33

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

@@ -1,25 +1,32 @@
-import {Middleware, detectOverflow} from '@floating-ui/react-dom'
+import {Elements, Middleware, detectOverflow} from '@floating-ui/react-dom'
+import {PopoverMargins} from '../../../types'
 
-export function size(scope: {
-  boundaryElement: HTMLElement | null
+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
   padding?: number
-  setAvailableWidth: (v: number) => void
-  setAvailableHeight: (v: number) => void
-  setReferenceWidth: (v: number) => void
 }): Middleware {
-  const {padding = 0} = scope
+  const {apply, margins, padding = 0} = options
 
   return {
     name: '@sanity/ui/size',
     async fn(args) {
-      const {placement, rects} = args
+      const {elements, placement, platform, rects} = args
       const {floating, reference} = rects
 
       const overflow = await detectOverflow(args, {
         altBoundary: true,
-        boundary: scope.boundaryElement || undefined,
+        boundary: options.boundaryElement || undefined,
         elementContext: 'floating',
         padding,
         rootBoundary: 'viewport',
@@ -28,36 +35,44 @@ export function size(scope: {
       let maxWidth = Infinity
       let maxHeight = Infinity
 
+      const floatingW = floating.width
+      const floatingH = floating.height
+
       if (placement.includes('top')) {
-        maxWidth = floating.width - (overflow.left + overflow.right)
-        maxHeight = floating.height - overflow.top - padding
+        maxWidth = floatingW - (overflow.left + overflow.right)
+        maxHeight = floatingH - overflow.top
       }
 
       if (placement.includes('right')) {
-        maxWidth = floating.width - overflow.right - padding
-        maxHeight = floating.height - (overflow.top + overflow.bottom)
+        maxWidth = floatingW - overflow.right
+        maxHeight = floatingH - (overflow.top + overflow.bottom)
       }
 
       if (placement.includes('bottom')) {
-        maxWidth = floating.width - (overflow.left + overflow.right)
-        maxHeight = floating.height - overflow.bottom - padding
+        maxWidth = floatingW - (overflow.left + overflow.right)
+        maxHeight = floatingH - overflow.bottom
       }
 
       if (placement.includes('left')) {
-        maxWidth = floating.width - overflow.left - padding
-        maxHeight = floating.height - (overflow.top + overflow.bottom)
+        maxWidth = floatingW - overflow.left
+        maxHeight = floatingH - (overflow.top + overflow.bottom)
       }
 
-      if (scope.constrainSize) {
-        scope.setAvailableWidth(maxWidth)
-        scope.setAvailableHeight(maxHeight)
-      }
+      // 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],
+      })
 
-      if (scope.matchReferenceWidth) {
-        scope.setReferenceWidth(reference.width)
-      }
+      const nextDimensions = await platform.getDimensions(elements.floating)
+
+      const targetH = nextDimensions.height
+      const targetW = nextDimensions.width
 
-      if (!floating.width || !floating.height) {
+      if (floatingW !== targetW || floatingH !== targetH) {
         return {reset: {rects: true}}
       }
 

package/src/primitives/popover/popover.tsx

@@ -8,23 +8,19 @@ import {
   offset,
   shift,
   useFloating,
+  UseFloatingProps,
 } from '@floating-ui/react-dom'
-import {
-  cloneElement,
-  forwardRef,
-  memo,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import {cloneElement, forwardRef, memo, useCallback, useEffect, useMemo, useRef} from 'react'
 import {useForwardedRef, useArrayProp, useElementSize} 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 {DEFAULT_POPOVER_DISTANCE, DEFAULT_POPOVER_PADDING} from './constants'
+import {
+  DEFAULT_POPOVER_DISTANCE,
+  DEFAULT_POPOVER_MARGINS,
+  DEFAULT_POPOVER_PADDING,
+} from './constants'
 import {size} from './floating-ui/size'
 import {PopoverCard} from './popoverCard'
 
@@ -70,7 +66,7 @@ export const Popover = memo(
     const boundaryElementContext = useBoundaryElement()
 
     const {
-      __unstable_margins: margins,
+      __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
       arrow: arrowProp = true,
       boundaryElement = boundaryElementContext.element,
       children: childProp,
@@ -80,7 +76,7 @@ export const Popover = memo(
       fallbackPlacements,
       matchReferenceWidth: matchReferenceWidthProp,
       open,
-      overflow = props.constrainSize ? 'auto' : 'hidden',
+      overflow = 'hidden',
       padding: paddingProp,
       placement: placementProp = 'bottom',
       portal,
@@ -100,9 +96,6 @@ export const Popover = memo(
     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'
@@ -122,29 +115,37 @@ export const Popover = memo(
         )
       }
 
+      // Define distance between reference and floating element
+      ret.push(
+        offset({
+          mainAxis: arrowProp ? DEFAULT_POPOVER_DISTANCE : 0,
+        })
+      )
+
       // Track sizes
       if (constrainSize || matchReferenceWidthProp) {
         ret.push(
           size({
+            apply({availableWidth, availableHeight, elements, referenceWidth}) {
+              if (matchReferenceWidthProp) {
+                elements.floating.style.width = `${referenceWidth}px`
+              }
+
+              if (constrainSize) {
+                elements.floating.style.maxWidth = `${availableWidth}px`
+                elements.floating.style.maxHeight = `${availableHeight}px`
+              }
+            },
             boundaryElement,
             constrainSize,
+            margins,
             matchReferenceWidth: matchReferenceWidthProp,
             padding: DEFAULT_POPOVER_PADDING,
-            setAvailableHeight,
-            setAvailableWidth,
-            setReferenceWidth,
           })
         )
       }
 
-      // Define distance between reference and floating element
-      ret.push(
-        offset({
-          mainAxis: arrowProp ? DEFAULT_POPOVER_DISTANCE : 0,
-        })
-      )
-
-      // Shift the popover so its sits with the boundary eleement
+      // Shift the popover so its sits within the boundary eleement
       if (preventOverflow) {
         ret.push(
           shift({
@@ -179,15 +180,29 @@ export const Popover = memo(
       boundaryElement,
       constrainSize,
       fallbackPlacements,
+      margins,
       matchReferenceWidthProp,
       preventOverflow,
     ])
 
-    const {x, y, placement, reference, floating, middlewareData, strategy} = useFloating({
-      middleware,
-      placement: placementProp,
-      whileElementsMounted: autoUpdate,
-    })
+    const floatingProps: UseFloatingProps = useMemo(
+      () => ({
+        middleware,
+        placement: placementProp,
+        whileElementsMounted: autoUpdate,
+      }),
+      [middleware, placementProp]
+    )
+
+    const {
+      x,
+      y,
+      placement,
+      reference: referenceRef,
+      floating: floatingRef,
+      middlewareData,
+      strategy,
+    } = useFloating(floatingProps)
 
     const referenceHidden = middlewareData.hide?.referenceHidden
 
@@ -201,15 +216,16 @@ export const Popover = memo(
     const setFloating = useCallback(
       (node: HTMLDivElement | null) => {
         forwardedRef.current = node
-        floating(node)
+        floatingRef(node)
       },
-      [floating, forwardedRef]
+      [floatingRef, forwardedRef]
     )
 
     const setReference = useCallback(
       (node: HTMLElement | null) => {
-        reference(node)
+        referenceRef(node)
 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const childRef = (childProp as any)?.ref
 
         if (typeof childRef === 'function') {
@@ -218,7 +234,7 @@ export const Popover = memo(
           childRef.current = node
         }
       },
-      [childProp, reference]
+      [childProp, referenceRef]
     )
 
     const child = useMemo(() => {
@@ -228,8 +244,8 @@ export const Popover = memo(
     }, [childProp, referenceElement, setReference])
 
     useEffect(() => {
-      if (referenceElement) reference(referenceElement)
-    }, [reference, referenceElement])
+      referenceRef(referenceElement || null)
+    }, [referenceRef, referenceElement])
 
     if (disabled) {
       return childProp || <></>
@@ -244,8 +260,6 @@ export const Popover = memo(
           arrowRef={setArrow}
           arrowX={arrowX}
           arrowY={arrowY}
-          availableWidth={constrainSize ? availableWidth : undefined}
-          availableHeight={constrainSize ? availableHeight : undefined}
           boundaryWidth={preventOverflow ? boundarySize?.width : undefined}
           hidden={referenceHidden}
           overflow={overflow}
@@ -253,7 +267,6 @@ export const Popover = memo(
           placement={placement}
           radius={radius}
           ref={setFloating}
-          referenceWidth={matchReferenceWidthProp ? referenceWidth : undefined}
           scheme={scheme}
           shadow={shadow}
           strategy={strategy}

package/src/primitives/popover/popoverCard.tsx

@@ -36,6 +36,11 @@ function popoverCardStyle(props: {$boundaryWidth?: number} & ThemeProps): CSSObj
 
 const Root = memo(styled(Card)(popoverCardStyle))
 
+const PopoverContainer = memo(styled(Container)`
+  max-height: inherit;
+  max-width: inherit;
+`)
+
 /**
  * @internal
  */
@@ -48,14 +53,11 @@ export const PopoverCard = memo(
       arrowRef: React.Ref<HTMLDivElement>
       arrowX?: number
       arrowY?: number
-      availableHeight?: number
-      availableWidth?: number
       boundaryWidth?: number
       overflow?: BoxOverflow
       padding?: number | number[]
       placement?: Placement
       radius?: number | number[]
-      referenceWidth?: number
       scheme?: ThemeColorSchemeKey
       shadow?: number | number[]
       strategy: Strategy
@@ -72,15 +74,12 @@ export const PopoverCard = memo(
       arrowRef,
       arrowX,
       arrowY,
-      availableHeight,
-      availableWidth,
       boundaryWidth,
       children,
       padding,
       placement,
       overflow,
       radius,
-      referenceWidth: referenceWidthProp,
       scheme,
       shadow,
       strategy,
@@ -101,10 +100,6 @@ export const PopoverCard = memo(
     )
 
     // Translate according to margins
-    const referenceWidth = referenceWidthProp
-      ? referenceWidthProp - margins[1] - margins[3]
-      : undefined
-
     const x = (xProp ?? 0) + margins[3]
     const y = (yProp ?? 0) + margins[0]
 
@@ -114,12 +109,9 @@ export const PopoverCard = memo(
         top: y,
         left: x,
         zIndex,
-        width: referenceWidth,
-        maxWidth: availableWidth,
-        maxHeight: availableHeight,
         ...style,
       }),
-      [availableHeight, availableWidth, referenceWidth, strategy, style, x, y, zIndex]
+      [strategy, style, x, y, zIndex]
     )
 
     const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]]
@@ -147,10 +139,11 @@ export const PopoverCard = memo(
         ref={ref}
         scheme={scheme}
         shadow={shadow}
+        sizing="border"
         style={rootStyle}
         tone={tone}
       >
-        <Container
+        <PopoverContainer
           data-ui="Popover__wrapper"
           flex={1}
           overflow={overflow}
@@ -159,7 +152,7 @@ export const PopoverCard = memo(
           width={width}
         >
           {children}
-        </Container>
+        </PopoverContainer>
 
         {arrow && <PopoverArrow ref={arrowRef} style={arrowStyle} />}
       </Root>

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

@@ -1,7 +1,11 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/radio', 'Radio', [
-  {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
-  {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
-])
+export default defineScope({
+  name: 'primitives/radio',
+  title: 'Radio',
+  stories: [
+    {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
+    {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
+  ],
+})

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

@@ -1,7 +1,11 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/select', 'Select', [
-  {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
-  {name: 'read-only', title: 'Read-only', component: lazy(() => import('./readOnly'))},
-])
+export default defineScope({
+  name: 'primitives/select',
+  title: 'Select',
+  stories: [
+    {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
+    {name: 'read-only', title: 'Read-only', component: lazy(() => import('./readOnly'))},
+  ],
+})

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

@@ -1,10 +1,14 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/spinner', 'Spinner', [
-  {
-    name: 'props',
-    title: 'Props',
-    component: lazy(() => import('./Props')),
-  },
-])
+export default defineScope({
+  name: 'primitives/spinner',
+  title: 'Spinner',
+  stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./Props')),
+    },
+  ],
+})

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

@@ -1,10 +1,14 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/stack', 'Stack', [
-  {
-    name: 'plain',
-    title: 'Plain',
-    component: lazy(() => import('./plain')),
-  },
-])
+export default defineScope({
+  name: 'primitives/stack',
+  title: 'Stack',
+  stories: [
+    {
+      name: 'plain',
+      title: 'Plain',
+      component: lazy(() => import('./plain')),
+    },
+  ],
+})

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

@@ -1,7 +1,11 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/switch', 'Switch', [
-  {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-  {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
-])
+export default defineScope({
+  name: 'primitives/switch',
+  title: 'Switch',
+  stories: [
+    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
+    {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
+  ],
+})

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

@@ -1,20 +1,24 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/text', 'Text', [
-  {
-    name: 'default',
-    title: 'Text',
-    component: lazy(() => import('./example')),
-  },
-  {
-    name: 'colored',
-    title: 'Colored text',
-    component: lazy(() => import('./colored')),
-  },
-  {
-    name: 'optical-alignment',
-    title: 'Optical alignment',
-    component: lazy(() => import('./opticalAlignment')),
-  },
-])
+export default defineScope({
+  name: 'primitives/text',
+  title: 'Text',
+  stories: [
+    {
+      name: 'default',
+      title: 'Text',
+      component: lazy(() => import('./example')),
+    },
+    {
+      name: 'colored',
+      title: 'Colored text',
+      component: lazy(() => import('./colored')),
+    },
+    {
+      name: 'optical-alignment',
+      title: 'Optical alignment',
+      component: lazy(() => import('./opticalAlignment')),
+    },
+  ],
+})

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

@@ -1,10 +1,14 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/text-area', 'TextArea', [
-  {
-    name: 'plain',
-    title: 'Plain',
-    component: lazy(() => import('./plain')),
-  },
-])
+export default defineScope({
+  name: 'primitives/text-area',
+  title: 'TextArea',
+  stories: [
+    {
+      name: 'plain',
+      title: 'Plain',
+      component: lazy(() => import('./plain')),
+    },
+  ],
+})

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

@@ -1,45 +1,49 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/text-input', 'TextInput', [
-  {
-    name: 'plain',
-    title: 'Plain',
-    component: lazy(() => import('./plain')),
-  },
-  {
-    name: 'custom-validity',
-    title: 'Custom validity',
-    component: lazy(() => import('./customValidity')),
-  },
-  {
-    name: 'typed',
-    title: 'Typed',
-    component: lazy(() => import('./typed')),
-  },
-  {
-    name: 'tones',
-    title: 'Tones',
-    component: lazy(() => import('./tones')),
-  },
-  {
-    name: 'clear-button',
-    title: 'Clear button',
-    component: lazy(() => import('./clearButton')),
-  },
-  {
-    name: 'read-only',
-    title: 'Read only',
-    component: lazy(() => import('./readOnly')),
-  },
-  {
-    name: 'multiple-tones',
-    title: 'Multiple tones',
-    component: lazy(() => import('./multipleTones')),
-  },
-  {
-    name: 'states',
-    title: 'States',
-    component: lazy(() => import('./states')),
-  },
-])
+export default defineScope({
+  name: 'primitives/text-input',
+  title: 'TextInput',
+  stories: [
+    {
+      name: 'plain',
+      title: 'Plain',
+      component: lazy(() => import('./plain')),
+    },
+    {
+      name: 'custom-validity',
+      title: 'Custom validity',
+      component: lazy(() => import('./customValidity')),
+    },
+    {
+      name: 'typed',
+      title: 'Typed',
+      component: lazy(() => import('./typed')),
+    },
+    {
+      name: 'tones',
+      title: 'Tones',
+      component: lazy(() => import('./tones')),
+    },
+    {
+      name: 'clear-button',
+      title: 'Clear button',
+      component: lazy(() => import('./clearButton')),
+    },
+    {
+      name: 'read-only',
+      title: 'Read only',
+      component: lazy(() => import('./readOnly')),
+    },
+    {
+      name: 'multiple-tones',
+      title: 'Multiple tones',
+      component: lazy(() => import('./multipleTones')),
+    },
+    {
+      name: 'states',
+      title: 'States',
+      component: lazy(() => import('./states')),
+    },
+  ],
+})

package/src/primitives/textInput/__workshop__/plain.tsx

@@ -1,6 +1,7 @@
 import {icons, IconSymbol} from '@sanity/icons'
 import {Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
-import {PerfTestProps, useBoolean, usePerfTest, useSelect, useText} from '@sanity/ui-workshop'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {PerfTestProps, usePerfTest} from '@sanity/ui-workshop/plugin-perf'
 import {fireEvent} from '@testing-library/dom'
 import {useCallback, useState} from 'react'
 import {

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

@@ -1,10 +1,14 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/tooltip', 'Tooltip', [
-  {
-    name: 'props',
-    title: 'Props',
-    component: lazy(() => import('./props')),
-  },
-])
+export default defineScope({
+  name: 'primitives/tooltip',
+  title: 'Tooltip',
+  stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./props')),
+    },
+  ],
+})