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

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

@@ -0,0 +1,67 @@
+import {Middleware, detectOverflow} from '@floating-ui/react-dom'
+
+export function size(scope: {
+  boundaryElement: HTMLElement | null
+  constrainSize: boolean
+  matchReferenceWidth?: boolean
+  padding?: number
+  setAvailableWidth: (v: number) => void
+  setAvailableHeight: (v: number) => void
+  setReferenceWidth: (v: number) => void
+}): Middleware {
+  const {padding = 0} = scope
+
+  return {
+    name: '@sanity/ui/size',
+    async fn(args) {
+      const {placement, rects} = args
+      const {floating, reference} = rects
+
+      const overflow = await detectOverflow(args, {
+        altBoundary: true,
+        boundary: scope.boundaryElement || undefined,
+        elementContext: 'floating',
+        padding,
+        rootBoundary: 'viewport',
+      })
+
+      let maxWidth = Infinity
+      let maxHeight = Infinity
+
+      if (placement.includes('top')) {
+        maxWidth = floating.width - (overflow.left + overflow.right)
+        maxHeight = floating.height - overflow.top - padding
+      }
+
+      if (placement.includes('right')) {
+        maxWidth = floating.width - overflow.right - padding
+        maxHeight = floating.height - (overflow.top + overflow.bottom)
+      }
+
+      if (placement.includes('bottom')) {
+        maxWidth = floating.width - (overflow.left + overflow.right)
+        maxHeight = floating.height - overflow.bottom - padding
+      }
+
+      if (placement.includes('left')) {
+        maxWidth = floating.width - overflow.left - padding
+        maxHeight = floating.height - (overflow.top + overflow.bottom)
+      }
+
+      if (scope.constrainSize) {
+        scope.setAvailableWidth(maxWidth)
+        scope.setAvailableHeight(maxHeight)
+      }
+
+      if (scope.matchReferenceWidth) {
+        scope.setReferenceWidth(reference.width)
+      }
+
+      if (!floating.width || !floating.height) {
+        return {reset: {rects: true}}
+      }
+
+      return {}
+    },
+  }
+}

package/src/primitives/popover/popover.tsx

@@ -1,13 +1,13 @@
 import {
   Middleware,
+  RootBoundary,
   arrow,
   autoUpdate,
   flip,
+  hide,
   offset,
   shift,
   useFloating,
-  size as sizeMiddleware,
-  RootBoundary,
 } from '@floating-ui/react-dom'
 import {
   cloneElement,
@@ -24,6 +24,8 @@ 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 {size} from './floating-ui/size'
 import {PopoverCard} from './popoverCard'
 
 /**
@@ -38,8 +40,6 @@ export interface PopoverProps
    * @beta
    */
   __unstable_margins?: PopoverMargins
-  /** @deprecated Use `fallbackPlacements` instead. */
-  allowedAutoPlacements?: Placement[]
   arrow?: boolean
   boundaryElement?: HTMLElement | null
   children?: React.ReactElement
@@ -56,36 +56,9 @@ export interface PopoverProps
   referenceElement?: HTMLElement | null
   matchReferenceWidth?: boolean
   scheme?: ThemeColorSchemeKey
-  /** @deprecated No longer supported. */
-  tether?: boolean
-  /** @deprecated No longer supported. */
-  tetherOffset?: number | ((...args: any[]) => number)
   tone?: CardTone
 }
 
-function size(scope: {
-  boundaryElement: HTMLElement | null
-  constrainSize: boolean
-  matchReferenceWidth: boolean | undefined
-  setAvailableWidth: (v: number) => void
-  setAvailableHeight: (v: number) => void
-  setReferenceWidth: (v: number) => void
-}) {
-  return sizeMiddleware({
-    apply(args) {
-      if (scope.constrainSize) {
-        scope.setAvailableWidth(args.availableWidth)
-        scope.setAvailableHeight(args.availableHeight)
-      }
-
-      if (scope.matchReferenceWidth) {
-        scope.setReferenceWidth(args.rects.reference.width)
-      }
-    },
-    boundary: scope.boundaryElement || undefined,
-  })
-}
-
 /** @public */
 export const Popover = memo(
   forwardRef(function Popover(
@@ -98,7 +71,6 @@ export const Popover = memo(
 
     const {
       __unstable_margins: margins,
-      allowedAutoPlacements,
       arrow: arrowProp = true,
       boundaryElement = boundaryElementContext.element,
       children: childProp,
@@ -108,7 +80,7 @@ export const Popover = memo(
       fallbackPlacements,
       matchReferenceWidth: matchReferenceWidthProp,
       open,
-      overflow = props.constrainSize ? 'auto' : undefined,
+      overflow = props.constrainSize ? 'auto' : 'hidden',
       padding: paddingProp,
       placement: placementProp = 'bottom',
       portal,
@@ -117,10 +89,8 @@ export const Popover = memo(
       referenceElement,
       scheme,
       shadow: shadowProp = 3,
-      tether,
-      tetherOffset,
       tone = 'inherit',
-      width: widthProp = undefined,
+      width: widthProp = 'auto',
       zOffset: zOffsetProp = theme.sanity.layer?.popover.zOffset,
       ...restProps
     } = props
@@ -146,43 +116,63 @@ export const Popover = memo(
           flip({
             boundary: boundaryElement || undefined,
             fallbackPlacements,
-            padding: 8,
+            padding: DEFAULT_POPOVER_PADDING,
             rootBoundary,
           })
         )
       }
 
       // Track sizes
+      if (constrainSize || matchReferenceWidthProp) {
+        ret.push(
+          size({
+            boundaryElement,
+            constrainSize,
+            matchReferenceWidth: matchReferenceWidthProp,
+            padding: DEFAULT_POPOVER_PADDING,
+            setAvailableHeight,
+            setAvailableWidth,
+            setReferenceWidth,
+          })
+        )
+      }
+
+      // Define distance between reference and floating element
       ret.push(
-        size({
-          boundaryElement,
-          constrainSize,
-          matchReferenceWidth: matchReferenceWidthProp,
-          setAvailableHeight,
-          setAvailableWidth,
-          setReferenceWidth,
+        offset({
+          mainAxis: arrowProp ? DEFAULT_POPOVER_DISTANCE : 0,
         })
       )
 
-      // Define distance between reference and floating element
-      ret.push(offset({mainAxis: arrowProp ? 4 : 0}))
-
       // Shift the popover so its sits with the boundary eleement
       if (preventOverflow) {
         ret.push(
           shift({
             boundary: boundaryElement || undefined,
             rootBoundary,
-            padding: 8,
+            padding: DEFAULT_POPOVER_PADDING,
           })
         )
       }
 
       // Place arrow
       if (arrowProp) {
-        ret.push(arrow({element: arrowRef, padding: 4}))
+        ret.push(
+          arrow({
+            element: arrowRef,
+            padding: DEFAULT_POPOVER_PADDING,
+          })
+        )
       }
 
+      ret.push(
+        hide({
+          boundary: boundaryElement || undefined,
+          padding: DEFAULT_POPOVER_PADDING,
+          strategy: 'referenceHidden',
+        })
+      )
+
       return ret
     }, [
       arrowProp,
@@ -199,6 +189,8 @@ export const Popover = memo(
       whileElementsMounted: autoUpdate,
     })
 
+    const referenceHidden = middlewareData.hide?.referenceHidden
+
     const arrowX = middlewareData.arrow?.x
     const arrowY = middlewareData.arrow?.y
 
@@ -254,7 +246,8 @@ export const Popover = memo(
           arrowY={arrowY}
           availableWidth={constrainSize ? availableWidth : undefined}
           availableHeight={constrainSize ? availableHeight : undefined}
-          boundaryWidth={boundarySize?.width}
+          boundaryWidth={preventOverflow ? boundarySize?.width : undefined}
+          hidden={referenceHidden}
           overflow={overflow}
           padding={padding}
           placement={placement}

package/src/primitives/popover/popoverArrow.tsx

@@ -1,11 +1,12 @@
 import {forwardRef} from 'react'
 import styled from 'styled-components'
+import {DEFAULT_POPOVER_ARROW_HEIGHT, DEFAULT_POPOVER_ARROW_WIDTH} from './constants'
 
 const Root = styled.div`
   position: absolute;
   pointer-events: none;
-  width: 27px;
-  height: 27px;
+  width: ${DEFAULT_POPOVER_ARROW_WIDTH}px;
+  height: ${DEFAULT_POPOVER_ARROW_WIDTH}px;
   fill: none;
 
   :empty + & {
@@ -14,15 +15,15 @@ const Root = styled.div`
 
   & > svg {
     display: block;
-    transform-origin: 13.5px 13.5px;
+    transform-origin: ${DEFAULT_POPOVER_ARROW_WIDTH / 2}px ${DEFAULT_POPOVER_ARROW_WIDTH / 2}px;
   }
 
   [data-placement^='top'] > & {
-    bottom: -27px;
+    bottom: -${DEFAULT_POPOVER_ARROW_WIDTH}px;
   }
 
   [data-placement^='right'] > & {
-    left: -27px;
+    left: -${DEFAULT_POPOVER_ARROW_WIDTH}px;
 
     & > svg {
       transform: rotate(90deg);
@@ -30,7 +31,7 @@ const Root = styled.div`
   }
 
   [data-placement^='left'] > & {
-    right: -27px;
+    right: -${DEFAULT_POPOVER_ARROW_WIDTH}px;
 
     & > svg {
       transform: rotate(-90deg);
@@ -38,7 +39,7 @@ const Root = styled.div`
   }
 
   [data-placement^='bottom'] > & {
-    top: -27px;
+    top: -${DEFAULT_POPOVER_ARROW_WIDTH}px;
 
     & > svg {
       transform: rotate(180deg);
@@ -61,8 +62,8 @@ export const PopoverArrow = forwardRef(function PopoverArrow(
   return (
     <Root data-ui="Popover__arrow" {...props} ref={ref}>
       <svg
-        width="27"
-        height="11"
+        width={DEFAULT_POPOVER_ARROW_WIDTH}
+        height={DEFAULT_POPOVER_ARROW_HEIGHT}
         viewBox="0 0 27 11"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"

package/src/primitives/popover/popoverCard.tsx

@@ -2,18 +2,35 @@ import {Strategy} from '@floating-ui/react-dom'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
 import styled, {CSSObject} 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 {Box} from '../box'
 import {Card} from '../card'
+import {Container} from '../container'
+import {
+  DEFAULT_POPOVER_ARROW_WIDTH,
+  DEFAULT_POPOVER_MARGINS,
+  DEFAULT_POPOVER_PADDING,
+} from './constants'
 import {PopoverArrow} from './popoverArrow'
 
-function popoverCardStyle(props: {$boundaryWidth?: number}): CSSObject {
+function popoverCardStyle(props: {$boundaryWidth?: number} & ThemeProps): CSSObject {
   const {$boundaryWidth} = props
 
   return {
-    maxWidth: $boundaryWidth ? `${$boundaryWidth - 16}px` : 'calc(100% - 16px)',
+    '&:not([hidden])': {
+      display: 'flex',
+    },
+
+    flexDirection: 'column',
+
+    width: 'max-content',
+    minWidth: 'min-content',
+    maxWidth:
+      typeof $boundaryWidth === 'number'
+        ? `${$boundaryWidth - DEFAULT_POPOVER_PADDING * 2}px`
+        : undefined,
   }
 }
 
@@ -25,9 +42,7 @@ const Root = memo(styled(Card)(popoverCardStyle))
 export const PopoverCard = memo(
   forwardRef(function PopoverCard(
     props: {
-      /**
-       * @beta
-       */
+      /** @beta*/
       __unstable_margins?: PopoverMargins
       arrow: boolean
       arrowRef: React.Ref<HTMLDivElement>
@@ -69,8 +84,9 @@ export const PopoverCard = memo(
       scheme,
       shadow,
       strategy,
+      style,
       tone,
-      width,
+      width = 'auto',
       x: xProp,
       y: yProp,
       ...restProps
@@ -78,20 +94,20 @@ export const PopoverCard = memo(
 
     const {zIndex} = useLayer()
 
-    // top right bottom left
-    const margins: PopoverMargins = useMemo(() => marginsProp || [0, 0, 0, 0], [marginsProp])
+    // Get margins: [top, right, bottom, left]
+    const margins: PopoverMargins = useMemo(
+      () => marginsProp || DEFAULT_POPOVER_MARGINS,
+      [marginsProp]
+    )
 
-    // translate according to margins
+    // 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]
 
-    const maxWidth = availableWidth
-      ? Math.min(availableWidth - 8, referenceWidth || Infinity)
-      : undefined
-
     const rootStyle: CSSProperties = useMemo(
       () => ({
         position: strategy,
@@ -99,17 +115,11 @@ export const PopoverCard = memo(
         left: x,
         zIndex,
         width: referenceWidth,
-        maxWidth: referenceWidth ? undefined : maxWidth,
-      }),
-      [referenceWidth, maxWidth, strategy, x, y, zIndex]
-    )
-
-    const wrapperStyle: CSSProperties = useMemo(
-      () => ({
-        minHeight: 25,
-        maxHeight: availableHeight ? availableHeight - 8 : undefined,
+        maxWidth: availableWidth,
+        maxHeight: availableHeight,
+        ...style,
       }),
-      [availableHeight]
+      [availableHeight, availableWidth, referenceWidth, strategy, style, x, y, zIndex]
     )
 
     const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]]
@@ -122,7 +132,7 @@ export const PopoverCard = memo(
         bottom: undefined,
       }
 
-      if (staticSide) style[staticSide] = -27
+      if (staticSide) style[staticSide] = 0 - DEFAULT_POPOVER_ARROW_WIDTH
 
       return style
     }, [arrowX, arrowY, staticSide])
@@ -139,17 +149,17 @@ export const PopoverCard = memo(
         shadow={shadow}
         style={rootStyle}
         tone={tone}
-        $width={width}
       >
-        <Box
+        <Container
           data-ui="Popover__wrapper"
+          flex={1}
           overflow={overflow}
           padding={padding}
           sizing="border"
-          style={wrapperStyle}
+          width={width}
         >
           {children}
-        </Box>
+        </Container>
 
         {arrow && <PopoverArrow ref={arrowRef} style={arrowStyle} />}
       </Root>