@sanity/ui 2.9.0-canary.6 → 2.9.0

package/src/core/primitives/grid/__workshop__/responsive.tsx

@@ -11,40 +11,40 @@ export default function ResponsiveStory() {
           rows={[1, 2, 3, 4, 5, 6, 7]}
           style={{textAlign: 'center'}}
         >
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>1</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>2</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>3</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>4</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>5</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>6</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>7</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>8</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>9</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>10</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>11</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card padding={[1, 2, 3]} tone="neutral">
             <Code>12</Code>
           </Card>
         </Grid>

package/src/core/primitives/heading/__workshop__/opticalAlignment.tsx

@@ -6,55 +6,43 @@ export default function OpticalAlignment() {
     <Box padding={[4, 5, 6]}>
       <Stack space={1}>
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Heading accent size={5}>
-              Hamburgefonstiv M
-            </Heading>
+          <Card padding={0} tone="neutral">
+            <Heading size={5}>Hamburgefonstiv M</Heading>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Heading accent size={4}>
-              Hamburgefonstiv M
-            </Heading>
+          <Card padding={0} tone="neutral">
+            <Heading size={4}>Hamburgefonstiv M</Heading>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Heading accent size={3}>
-              Hamburgefonstiv M
-            </Heading>
+          <Card padding={0} tone="neutral">
+            <Heading size={3}>Hamburgefonstiv M</Heading>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Heading accent size={2}>
-              Hamburgefonstiv M
-            </Heading>
+          <Card padding={0} tone="neutral">
+            <Heading size={2}>Hamburgefonstiv M</Heading>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Heading accent size={1}>
-              Hamburgefonstiv M
-            </Heading>
+          <Card padding={0} tone="neutral">
+            <Heading size={1}>Hamburgefonstiv M</Heading>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
-            <Heading accent size={0}>
-              Hamburgefonstiv M
-            </Heading>
+          <Card padding={0} tone="neutral">
+            <Heading size={0}>Hamburgefonstiv M</Heading>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={2} scheme="dark">
+          <Card padding={2} tone="neutral">
             <Heading accent>
               <AddCircleIcon />
             </Heading>

package/src/core/primitives/inline/__workshop__/plain.tsx

@@ -10,15 +10,15 @@ export default function PlainStory() {
         space={useSelect('Space', WORKSHOP_SPACE_OPTIONS, 0, 'Props')}
       >
         <Card padding={1} shadow={1}>
-          <Text>Inline item</Text>
+          <Text size={1}>Inline item</Text>
         </Card>
 
         <Card padding={2} shadow={1}>
-          <Text>Inline item</Text>
+          <Text size={1}>Inline item</Text>
         </Card>
 
         <Card padding={3} shadow={1}>
-          <Text>Inline item</Text>
+          <Text size={1}>Inline item</Text>
         </Card>
       </Inline>
     </Flex>

package/src/core/primitives/label/__workshop__/opticalAlignment.tsx

@@ -6,37 +6,37 @@ export default function OpticalAlignment() {
     <Box padding={[4, 5, 6]}>
       <Stack space={1}>
         <Flex>
-          <Card padding={0} scheme="dark">
+          <Card padding={0} tone="suggest">
             <Label size={4}>Hamburgefonstiv M</Label>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
+          <Card padding={0} tone="suggest">
             <Label size={3}>Hamburgefonstiv M</Label>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
+          <Card padding={0} tone="suggest">
             <Label size={2}>Hamburgefonstiv M</Label>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
+          <Card padding={0} tone="suggest">
             <Label size={1}>Hamburgefonstiv M</Label>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={0} scheme="dark">
+          <Card padding={0} tone="suggest">
             <Label size={0}>Hamburgefonstiv M</Label>
           </Card>
         </Flex>
 
         <Flex>
-          <Card padding={2} scheme="dark">
+          <Card padding={2} tone="suggest">
             <Label>
               <AddCircleIcon />
             </Label>

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

@@ -24,7 +24,7 @@ export default function AlignedStory() {
   const popoverElementRef = useRef<HTMLDivElement | null>(null)
 
   const content = (
-    <Text>
+    <Text size={1}>
       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

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

@@ -11,8 +11,8 @@ export default function MatchReferenceWidthStory() {
       <Popover
         arrow={arrow}
         content={
-          <Box padding={2}>
-            <Text>Content</Text>
+          <Box padding={3}>
+            <Text size={1}>Content</Text>
           </Box>
         }
         matchReferenceWidth
@@ -22,7 +22,7 @@ export default function MatchReferenceWidthStory() {
       >
         <Container width={0}>
           <Stack>
-            <Button fontSize={3} text="Button" />
+            <Button fontSize={1} mode="ghost" selected text="Button" />
           </Stack>
         </Container>
       </Popover>

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

@@ -3,7 +3,7 @@ import {Button, Card, Popover, Text} from '@sanity/ui'
 export default function OpenOnMountStory() {
   return (
     <Card height="fill" padding={3} sizing="border">
-      <Popover content={<Text>popover content</Text>} open padding={3}>
+      <Popover content={<Text size={1}>popover content</Text>} open padding={3}>
         <Button text="This button is the popover reference" />
       </Popover>
     </Card>

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

@@ -48,7 +48,7 @@ export default function PlainStory() {
               arrow={arrow}
               boundaryElement={boundaryElementFlag ? boundaryElement : undefined}
               constrainSize={constrainSize}
-              content={<Text>popover content</Text>}
+              content={<Text size={1}>popover content</Text>}
               fallbackPlacements={['top', 'bottom']}
               matchReferenceWidth={matchReferenceWidth}
               open={open}

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

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {
+  Middleware,
   RootBoundary,
   arrow,
   autoUpdate,
@@ -20,10 +21,8 @@ import {
   useCallback,
   useEffect,
   useImperativeHandle,
-  useLayoutEffect,
   useMemo,
   useRef,
-  useState,
 } from 'react'
 import {useArrayProp, useElementSize, useMediaIndex, usePrefersReducedMotion} from '../../hooks'
 import {origin} from '../../middleware/origin'
@@ -127,14 +126,15 @@ export const Popover = memo(
       __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
       animate: _animate = false,
       arrow: arrowProp = false,
-      boundaryElement: _boundaryElement,
+      boundaryElement = boundaryElementContext.element,
       children: childProp,
       constrainSize = false,
       content,
       disabled,
-      fallbackPlacements: _fallbackPlacements,
+      fallbackPlacements = props.fallbackPlacements ??
+        DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
       matchReferenceWidth,
-      floatingBoundary: _floatingBoundary,
+      floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onActivate,
       open,
@@ -144,23 +144,16 @@ export const Popover = memo(
       portal,
       preventOverflow = true,
       radius: radiusProp = 3,
-      referenceBoundary: _referenceBoundary,
+      referenceBoundary = props.boundaryElement ?? boundaryElementContext.element,
       referenceElement,
       scheme,
       shadow: shadowProp = 3,
       tone = 'inherit',
       width: widthProp = 'auto',
-      zOffset: _zOffsetProp,
+      zOffset: zOffsetProp = layer.popover.zOffset,
       updateRef,
       ...restProps
     } = props
-    const boundaryElement = _boundaryElement ?? boundaryElementContext.element
-    const fallbackPlacements =
-      _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom']
-    const floatingBoundary = _floatingBoundary ?? boundaryElement ?? boundaryElementContext.element
-    const referenceBoundary =
-      _referenceBoundary ?? boundaryElement ?? boundaryElementContext.element
-    const zOffsetProp = _zOffsetProp ?? layer.popover.zOffset
     const prefersReducedMotion = usePrefersReducedMotion()
     const animate = prefersReducedMotion ? false : _animate
     const boundarySize = useElementSize(boundaryElement)?.border
@@ -170,7 +163,7 @@ export const Popover = memo(
     const widthArrayProp = useArrayProp(widthProp)
     const zOffset = useArrayProp(zOffsetProp)
     const ref = useRef<HTMLDivElement | null>(null)
-    const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null)
+    const arrowRef = useRef<HTMLDivElement | null>(null)
     const rootBoundary: RootBoundary = 'viewport'
 
     useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(
@@ -181,70 +174,94 @@ export const Popover = memo(
     const mediaIndex = useMediaIndex()
     const boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : undefined
 
+    // Update width when
+    // - media index changes
+    // - `width` property changes
+    const width = calcCurrentWidth({
+      container,
+      mediaIndex,
+      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
-    useLayoutEffect(() => {
+    useEffect(() => {
       const floatingElement = ref.current
 
-      // If constrainSize or matchReferenceWidth is true, then the styles are set by the `size` middleware
-      if (!open || !floatingElement || constrainSize || matchReferenceWidth) return
+      if (!open || !floatingElement) return
 
-      const currentWidth = calcCurrentWidth({
-        container,
-        mediaIndex,
-        width: widthArrayProp,
-      })
-      const maxWidth = calcMaxWidth({boundaryWidth, currentWidth})
+      const referenceWidth = referenceWidthRef.current
 
-      if (currentWidth !== undefined) {
-        floatingElement.style.width = `${currentWidth}px`
+      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`
       }
-    }, [
-      boundaryWidth,
-      constrainSize,
-      container,
-      matchReferenceWidth,
-      mediaIndex,
-      open,
-      widthArrayProp,
-    ])
+    }, [width, matchReferenceWidth, maxWidth, open])
 
-    const {x, y, middlewareData, placement, refs, strategy, update} = useFloating({
-      middleware: [
-        // Flip the floating element when leaving the boundary box
-        (constrainSize || preventOverflow) &&
+    const middleware = useMemo(() => {
+      const ret: Middleware[] = []
+
+      // Flip the floating element when leaving the boundary box
+      if (constrainSize || preventOverflow) {
+        ret.push(
           flip({
             boundary: floatingBoundary || undefined,
             fallbackPlacements,
             padding: DEFAULT_POPOVER_PADDING,
             rootBoundary,
           }),
-        // Define distance between reference and floating element
-        offset({mainAxis: DEFAULT_POPOVER_DISTANCE}),
-        // Track sizes
-        (constrainSize || matchReferenceWidth) &&
+        )
+      }
+
+      // 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}) {
-              const currentWidth = calcCurrentWidth({
-                container,
-                mediaIndex,
-                width: widthArrayProp,
-              })
-              const maxWidth = calcMaxWidth({boundaryWidth, currentWidth})
+              // 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`
+              } else if (_currentWidth !== undefined) {
+                elements.floating.style.width = `${_currentWidth}px`
               }
 
               if (constrainSize) {
                 elements.floating.style.maxWidth = `${Math.min(
                   availableWidth,
-                  maxWidth ?? Infinity,
+                  _maxWidth ?? Infinity,
                 )}px`
 
                 elements.floating.style.maxHeight = `${availableHeight}px`
@@ -256,28 +273,59 @@ export const Popover = memo(
             matchReferenceWidth,
             padding: DEFAULT_POPOVER_PADDING,
           }),
-        // Shift the popover so its sits within the boundary element
-        preventOverflow &&
+        )
+      }
+
+      // 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
-        arrowProp &&
+        )
+      }
+
+      // Place arrow
+      if (arrowProp) {
+        ret.push(
           arrow({
-            element: arrowElement,
+            element: arrowRef,
             padding: DEFAULT_POPOVER_PADDING,
           }),
-        // Determine the origin to scale from.
-        // Must be placed after `@sanity/ui/size` and `shift` middleware.
-        animate && origin,
+        )
+      }
+
+      // 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,
+      constrainSize,
+      fallbackPlacements,
+      floatingBoundary,
+      margins,
+      matchReferenceWidth,
+      preventOverflow,
+      referenceBoundary,
+    ])
+
+    const {x, y, middlewareData, placement, refs, strategy, update} = useFloating({
+      middleware,
       placement: placementProp,
       whileElementsMounted: autoUpdate,
     })
@@ -290,6 +338,10 @@ export const Popover = memo(
     const originX = middlewareData['@sanity/ui/origin']?.originX
     const originY = middlewareData['@sanity/ui/origin']?.originY
 
+    const setArrow = useCallback((arrowEl: HTMLDivElement | null) => {
+      arrowRef.current = arrowEl
+    }, [])
+
     const setFloating = useCallback(
       (node: HTMLDivElement | null) => {
         ref.current = node
@@ -298,29 +350,43 @@ export const Popover = memo(
       [refs],
     )
 
-    const [childElement, setChildElement] = useState<HTMLElement | null>(null)
     const setReference = useCallback(
       (node: HTMLElement | null) => {
         refs.setReference(node)
-        setChildElement(node)
+
+        const childRef = getElementRef(childProp as any)
+
+        if (typeof childRef === 'function') {
+          childRef(node)
+        } else if (childRef) {
+          childRef.current = node
+        }
       },
-      [refs],
+      [childProp, refs],
     )
 
-    useImperativeHandle(getElementRef(childProp as any), () => childElement, [childElement])
-
     const child = useMemo(() => {
-      if (!childProp || referenceElement) return null
+      // If a reference element is defined, we don't need to clone the child
+      if (referenceElement) return childProp
+
+      if (!childProp) return null
 
       return cloneElement(childProp, {ref: setReference})
     }, [childProp, referenceElement, setReference])
 
-    useImperativeHandle(updateRef, () => update, [update])
+    useEffect(() => {
+      if (updateRef) {
+        if (typeof updateRef === 'function') {
+          updateRef(update)
+        } else if (updateRef) {
+          updateRef.current = update
+        }
+      }
+    }, [update, updateRef])
 
     useEffect(() => {
-      if (child) return
-      refs.setReference(referenceElement || null)
-    }, [referenceElement, refs, child])
+      if (referenceElement) refs.setReference(referenceElement)
+    }, [referenceElement, refs])
 
     if (disabled) {
       return childProp || <></>
@@ -333,7 +399,7 @@ export const Popover = memo(
           __unstable_margins={margins}
           animate={animate}
           arrow={arrowProp}
-          arrowRef={setArrowElement}
+          arrowRef={setArrow}
           arrowX={arrowX}
           arrowY={arrowY}
           hidden={referenceHidden}
@@ -348,6 +414,7 @@ export const Popover = memo(
           originY={originY}
           strategy={strategy}
           tone={tone}
+          width={matchReferenceWidth ? referenceWidthRef.current : width}
           x={x}
           y={y}
         >
@@ -382,8 +449,7 @@ Popover.displayName = 'Memo(ForwardRef(Popover))'
 // https://github.com/facebook/react/pull/28348
 //
 // Access the ref using the method that doesn't yield a warning.
-function getElementRef(element?: React.ReactElement) {
-  if (!element) return null
+function getElementRef(element: React.ReactElement) {
   // React <=18 in DEV
   let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get
   let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning

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

@@ -51,6 +51,7 @@ export const PopoverCard = memo(
       shadow?: number | number[]
       strategy: Strategy
       tone: CardTone
+      width: number | undefined
       x: number | null
       y: number | null
     } & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
@@ -75,6 +76,7 @@ export const PopoverCard = memo(
       strategy,
       style,
       tone,
+      width,
       x: xProp,
       y: yProp,
       ...restProps
@@ -99,11 +101,12 @@ export const PopoverCard = memo(
         originY,
         position: strategy,
         top: y,
+        width,
         zIndex,
         willChange: animate ? 'transform' : undefined,
         ...style,
       }),
-      [animate, originX, originY, strategy, style, x, y, zIndex],
+      [animate, originX, originY, strategy, style, width, x, y, zIndex],
     )
 
     const arrowStyle: CSSProperties = useMemo(

package/src/core/primitives/radio/__workshop__/plain.tsx

@@ -2,8 +2,8 @@ import {Flex, Radio} from '@sanity/ui'
 import {useAction, useBoolean} from '@sanity/ui-workshop'
 
 export default function PlainStory() {
-  const checked = useBoolean('Checked?', false, 'Props')
-  const disabled = useBoolean('Disabled?', false, 'Props')
+  const checked = useBoolean('Checked', false, 'Props')
+  const disabled = useBoolean('Disabled', false, 'Props')
   const id = 'radioStory'
   const name = 'radioStory'
   const onBlur = useAction('onBlur')

package/src/core/primitives/select/__workshop__/readOnly.tsx

@@ -9,7 +9,7 @@ export default function ReadOnlyStory() {
             Select
           </Label>
 
-          <Select id="select-example" radius={3} readOnly>
+          <Select id="select-example" readOnly>
             <option value="a">Option A</option>
             <option value="b">Option B</option>
             <option value="c">Option C</option>