@sanity/ui 0.37.14-next.6 → 0.37.14

package/src/primitives/tooltip/tooltip.tsx

@@ -1,26 +1,6 @@
-import {
-  arrow,
-  autoUpdate,
-  flip,
-  offset,
-  shift,
-  useFloating,
-  Middleware,
-  RootBoundary,
-} from '@floating-ui/react-dom'
-import React, {
-  cloneElement,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  CSSProperties,
-  ForwardedRef,
-} from 'react'
+import React, {cloneElement, forwardRef, useCallback, useEffect, useState} from 'react'
+import {usePopper} from 'react-popper'
 import styled from 'styled-components'
-import {FLOATING_STATIC_SIDES} from '../../constants'
 import {useArrayProp, useForwardedRef} from '../../hooks'
 import {ThemeColorSchemeKey, useTheme} from '../../theme'
 import {Placement} from '../../types'
@@ -32,7 +12,6 @@ import {TooltipArrow} from './tooltipArrow'
  * @public
  */
 export interface TooltipProps extends Omit<LayerProps, 'as'> {
-  /** @deprecated Use `fallbackPlacements` instead. */
   allowedAutoPlacements?: Placement[]
   boundaryElement?: HTMLElement | null
   children?: React.ReactElement
@@ -42,7 +21,6 @@ export interface TooltipProps extends Omit<LayerProps, 'as'> {
   placement?: Placement
   portal?: boolean | string
   scheme?: ThemeColorSchemeKey
-  shadow?: number | number[]
 }
 
 const Root = styled(Layer)`
@@ -59,88 +37,55 @@ export const Tooltip = forwardRef(function Tooltip(
   const boundaryElementContext = useBoundaryElement()
   const theme = useTheme()
   const {
+    allowedAutoPlacements,
     boundaryElement = boundaryElementContext?.element,
-    children: childProp,
+    children,
     content,
     disabled,
     fallbackPlacements: fallbackPlacementsProp,
-    placement: placementProp = 'bottom',
+    placement = 'bottom',
     portal,
     scheme,
-    shadow = 2,
     zOffset = theme.sanity.layer?.tooltip.zOffset,
     ...restProps
   } = props
   const fallbackPlacements = useArrayProp(fallbackPlacementsProp)
   const forwardedRef = useForwardedRef(ref)
   const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null)
-  const arrowRef = useRef<HTMLDivElement | null>(null)
-  const rootBoundary: RootBoundary = 'viewport'
-
-  const middleware = useMemo(() => {
-    const ret: Middleware[] = []
-
-    // Flip the floating element when leaving the boundary box
-    ret.push(
-      flip({
-        boundary: boundaryElement || undefined,
-        fallbackPlacements,
-        padding: 4,
-        rootBoundary,
-      })
-    )
-
-    // Define distance between reference and floating element
-    ret.push(offset({mainAxis: 3}))
-
-    // Shift the tooltip so its sits with the boundary eleement
-    ret.push(
-      shift({
-        boundary: boundaryElement || undefined,
-        rootBoundary,
-        padding: 4,
-      })
-    )
-
-    // Place arrow
-    ret.push(arrow({element: arrowRef, padding: 2}))
-
-    return ret
-  }, [boundaryElement, fallbackPlacements])
-
-  const {x, y, placement, reference, floating, middlewareData, update, strategy} = useFloating({
-    middleware,
-    placement: placementProp,
-    whileElementsMounted: autoUpdate,
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null)
+  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null)
+  const popper = usePopper(referenceElement, popperElement, {
+    placement,
+    modifiers: [
+      {
+        name: 'arrow',
+        options: {
+          element: arrowElement,
+          padding: 4,
+        },
+      },
+      {
+        name: 'preventOverflow',
+        options: {
+          altAxis: true,
+          boundary: boundaryElement || undefined,
+          padding: 4,
+        },
+      },
+      {
+        name: 'offset',
+        options: {offset: [0, 3]},
+      },
+      {
+        name: 'flip',
+        options: {
+          allowedAutoPlacements,
+          fallbackPlacements,
+        },
+      },
+    ],
   })
-
-  const rootStyle: CSSProperties = useMemo(
-    () => ({
-      position: strategy,
-      top: y ?? 0,
-      left: x ?? 0,
-    }),
-    [strategy, x, y]
-  )
-
-  const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]]
-
-  const arrowX = middlewareData.arrow?.x
-  const arrowY = middlewareData.arrow?.y
-
-  const arrowStyle: CSSProperties = useMemo(() => {
-    const style: CSSProperties = {
-      left: arrowX !== null ? arrowX : undefined,
-      top: arrowY !== null ? arrowY : undefined,
-      right: undefined,
-      bottom: undefined,
-    }
-
-    if (staticSide) style[staticSide] = -15
-
-    return style
-  }, [arrowX, arrowY, staticSide])
-
+  const {forceUpdate} = popper
   const [isOpen, setIsOpen] = useState(false)
   const handleBlur = useCallback(() => setIsOpen(false), [])
   const handleFocus = useCallback(() => setIsOpen(true), [])
@@ -173,6 +118,16 @@ export const Tooltip = forwardRef(function Tooltip(
     }
   }, [isOpen, referenceElement])
 
+  useEffect(() => {
+    if (forceUpdate) {
+      try {
+        forceUpdate()
+      } catch (_) {
+        // ignore caught error
+      }
+    }
+  }, [forceUpdate, content])
+
   // Close when `disabled` changes to `true`
   useEffect(() => {
     if (disabled) setIsOpen(false)
@@ -183,85 +138,54 @@ export const Tooltip = forwardRef(function Tooltip(
     if (!content) setIsOpen(false)
   }, [content])
 
-  // Update reference
-  useEffect(() => reference(referenceElement), [reference, referenceElement])
-
-  const setArrow = useCallback(
-    (arrowEl: HTMLDivElement | null) => {
-      arrowRef.current = arrowEl
-      update()
-    },
-    [update]
-  )
-
-  const setFloating = useCallback(
-    (node: HTMLDivElement | null) => {
-      forwardedRef.current = node
-      floating(node)
-    },
-    [floating, forwardedRef]
-  )
-
-  const childRef: ForwardedRef<HTMLElement | null> = (childProp as any)?.ref
-
-  const setReference = useCallback(
-    (node: HTMLElement | null) => {
-      if (typeof childRef === 'function') {
-        childRef(node)
-      } else if (childRef) {
-        childRef.current = node
-      }
-
-      // childRef.current = node
-      setReferenceElement(node)
-    },
-    [childRef]
-  )
-
-  const child = useMemo(() => {
-    if (!childProp) return null
-
-    return cloneElement(childProp, {
-      onBlur: handleBlur,
-      onFocus: handleFocus,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      ref: setReference,
-    })
-  }, [childProp, handleBlur, handleFocus, handleMouseEnter, handleMouseLeave, setReference])
-
-  if (!child) return <></>
-
-  if (disabled) return child
-
-  const root = (
-    <Root data-ui="Tooltip" {...restProps} ref={setFloating} style={rootStyle} zOffset={zOffset}>
-      <Card
-        data-ui="Tooltip__card"
-        data-placement={placement}
-        radius={2}
-        scheme={scheme}
-        shadow={shadow}
-      >
+  const setRef = (el: HTMLDivElement | null) => {
+    setPopperElement(el)
+    forwardedRef.current = el
+  }
+
+  if (!children) return <></>
+
+  if (disabled) return children
+
+  const referenceProps = {
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    ref: setReferenceElement,
+  }
+
+  const referenceNode = cloneElement(children, referenceProps)
+
+  const popperNode = (
+    <Root
+      data-ui="Tooltip"
+      {...restProps}
+      {...popper.attributes.popper}
+      ref={setRef}
+      style={popper.styles.popper}
+      zOffset={zOffset}
+    >
+      <Card radius={2} scheme={scheme} shadow={3}>
         {content}
-        <TooltipArrow ref={setArrow} style={arrowStyle} />
+        <TooltipArrow ref={setArrowElement} style={popper.styles.arrow} />
       </Card>
     </Root>
   )
 
   return (
     <>
-      {child}
+      {referenceNode}
 
       {isOpen && (
         <>
-          {portal ? (
+          {portal && (
             <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>
-              {root}
+              {popperNode}
             </Portal>
-          ) : (
-            root
           )}
+
+          {!portal && popperNode}
         </>
       )}
     </>

package/src/primitives/tooltip/tooltipArrow.tsx

@@ -3,21 +3,6 @@ import styled from 'styled-components'
 
 const Root = styled.div`
   position: absolute;
-  pointer-events: none;
-  width: 15px;
-  height: 15px;
-  fill: none;
-
-  :empty + & {
-    display: none;
-  }
-
-  & > svg {
-    display: block;
-    transform-origin: 7.5px 7.5px;
-  }
-
-  /* position: absolute;
   width: 15px;
   height: 15px;
   fill: none;
@@ -31,30 +16,30 @@ const Root = styled.div`
       display: block;
     }
     transform-origin: 7.5px 7.5px;
-  } */
+  }
 
-  [data-placement^='top'] > & {
-    bottom: -27px;
+  [data-popper-placement^='top'] > div > & {
+    bottom: -15px;
   }
 
-  [data-placement^='right'] > & {
-    left: -27px;
+  [data-popper-placement^='right'] > div > & {
+    left: -15px;
 
     & > svg {
       transform: rotate(90deg);
     }
   }
 
-  [data-placement^='left'] > & {
-    right: -27px;
+  [data-popper-placement^='left'] > div > & {
+    right: -15px;
 
     & > svg {
       transform: rotate(-90deg);
     }
   }
 
-  [data-placement^='bottom'] > & {
-    top: -27px;
+  [data-popper-placement^='bottom'] > div > & {
+    top: -15px;
 
     & > svg {
       transform: rotate(180deg);
@@ -79,7 +64,7 @@ export const TooltipArrow = forwardRef(function TooltipArrow(
   const {...restProps} = props
 
   return (
-    <Root data-ui="Tooltip__arrow" {...restProps} ref={ref}>
+    <Root {...restProps} ref={ref}>
       <svg width="15" height="15" viewBox="0 0 15 15">
         <Border d="M11.5266 1C11.032 1.32802 10.5837 1.73105 10.1995 2.20057L9.04792 3.6081C8.24771 4.58614 6.7523 4.58614 5.95209 3.6081L4.80047 2.20057C4.41632 1.73105 3.96796 1.32802 3.47341 1H0.156727C1.65639 1 3.07687 1.67313 4.02651 2.83381L5.17813 4.24134C6.37844 5.70839 8.62156 5.70839 9.82187 4.24134L10.9735 2.83381C11.9231 1.67313 13.3436 1 14.8433 1H11.5266Z" />
         <Shape d="M0.156725 0C1.95632 0 3.66089 0.80776 4.80047 2.20057L5.95209 3.6081C6.75229 4.58614 8.24771 4.58614 9.04791 3.6081L10.1995 2.20057C11.3391 0.80776 13.0437 0 14.8433 0H15H0H0.156725Z" />

package/lib/dts/src/primitives/popover/popoverArrow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"popoverArrow.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/popover/popoverArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAwDvC,eAAO,MAAM,YAAY,i1LAkBvB,CAAA"}

package/lib/dts/src/primitives/popover/popoverCard.d.ts

@@ -1,33 +0,0 @@
-import { Strategy } from '@floating-ui/react-dom';
-import React from 'react';
-import { ThemeColorSchemeKey } from '../../theme';
-import { BoxOverflow, CardTone, Placement, PopoverMargins } from '../../types';
-/**
- * @internal
- */
-export declare const PopoverCard: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<{
-    /**
-     * @beta
-     */
-    __unstable_margins?: PopoverMargins | undefined;
-    arrow: boolean;
-    arrowRef: React.Ref<HTMLDivElement>;
-    arrowX?: number | undefined;
-    arrowY?: number | undefined;
-    availableHeight?: number | undefined;
-    availableWidth?: number | undefined;
-    boundaryWidth?: number | undefined;
-    overflow?: BoxOverflow | undefined;
-    padding?: number | number[] | undefined;
-    placement?: Placement | undefined;
-    radius?: number | number[] | undefined;
-    referenceWidth?: number | undefined;
-    scheme?: ThemeColorSchemeKey | undefined;
-    shadow?: number | number[] | undefined;
-    strategy: Strategy;
-    tone: CardTone;
-    width?: number | "auto" | (number | "auto")[] | undefined;
-    x: number | null;
-    y: number | null;
-} & Omit<React.HTMLProps<HTMLDivElement>, "as" | "height" | "width">, "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "scheme" | "tone" | "overflow" | "padding" | "radius" | "shadow" | "__unstable_margins" | "arrow" | "arrowRef" | "arrowX" | "arrowY" | "availableHeight" | "availableWidth" | "boundaryWidth" | "placement" | "referenceWidth" | "strategy" | "x" | "y"> & React.RefAttributes<HTMLDivElement>>>;
-//# sourceMappingURL=popoverCard.d.ts.map

package/lib/dts/src/primitives/popover/popoverCard.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"popoverCard.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/popover/popoverCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,wBAAwB,CAAA;AAC/C,OAAO,KAAiD,MAAM,OAAO,CAAA;AAGrE,OAAO,EAAC,mBAAmB,EAAC,MAAM,aAAa,CAAA;AAC/C,OAAO,EAAC,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAC,MAAM,aAAa,CAAA;AAgB5E;;GAEG;AACH,eAAO,MAAM,WAAW;IAGlB;;OAEG;;WAEI,OAAO;cACJ,MAAM,GAAG,CAAC,cAAc,CAAC;;;;;;;;;;;;;cAazB,QAAQ;UACZ,QAAQ;;OAEX,MAAM,GAAG,IAAI;OACb,MAAM,GAAG,IAAI;mjMA4GrB,CAAA"}

package/src/primitives/popover/popoverCard.tsx

@@ -1,160 +0,0 @@
-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 {ThemeColorSchemeKey} from '../../theme'
-import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
-import {useLayer} from '../../utils'
-import {Box} from '../box'
-import {Card} from '../card'
-import {PopoverArrow} from './popoverArrow'
-
-function popoverCardStyle(props: {$boundaryWidth?: number}): CSSObject {
-  const {$boundaryWidth} = props
-
-  return {
-    maxWidth: $boundaryWidth ? `${$boundaryWidth - 16}px` : 'calc(100% - 16px)',
-  }
-}
-
-const Root = memo(styled(Card)(popoverCardStyle))
-
-/**
- * @internal
- */
-export const PopoverCard = memo(
-  forwardRef(function PopoverCard(
-    props: {
-      /**
-       * @beta
-       */
-      __unstable_margins?: PopoverMargins
-      arrow: boolean
-      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
-      tone: CardTone
-      width?: number | 'auto' | (number | 'auto')[]
-      x: number | null
-      y: number | null
-    } & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
-    ref: React.ForwardedRef<HTMLDivElement>
-  ) {
-    const {
-      __unstable_margins: marginsProp,
-      arrow,
-      arrowRef,
-      arrowX,
-      arrowY,
-      availableHeight,
-      availableWidth,
-      boundaryWidth,
-      children,
-      padding,
-      placement,
-      overflow,
-      radius,
-      referenceWidth: referenceWidthProp,
-      scheme,
-      shadow,
-      strategy,
-      tone,
-      width,
-      x: xProp,
-      y: yProp,
-      ...restProps
-    } = props
-
-    const {zIndex} = useLayer()
-
-    // top right bottom left
-    const margins: PopoverMargins = useMemo(() => marginsProp || [0, 0, 0, 0], [marginsProp])
-
-    // 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,
-        top: y,
-        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,
-      }),
-      [availableHeight]
-    )
-
-    const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]]
-
-    const arrowStyle: CSSProperties = useMemo(() => {
-      const style: CSSProperties = {
-        left: arrowX !== null ? arrowX : undefined,
-        top: arrowY !== null ? arrowY : undefined,
-        right: undefined,
-        bottom: undefined,
-      }
-
-      if (staticSide) style[staticSide] = -27
-
-      return style
-    }, [arrowX, arrowY, staticSide])
-
-    return (
-      <Root
-        {...restProps}
-        $boundaryWidth={boundaryWidth}
-        data-placement={placement}
-        data-ui="Popover"
-        radius={radius}
-        ref={ref}
-        scheme={scheme}
-        shadow={shadow}
-        style={rootStyle}
-        tone={tone}
-        $width={width}
-      >
-        <Box
-          data-ui="Popover__wrapper"
-          overflow={overflow}
-          padding={padding}
-          sizing="border"
-          style={wrapperStyle}
-        >
-          {children}
-        </Box>
-
-        {arrow && <PopoverArrow ref={arrowRef} style={arrowStyle} />}
-      </Root>
-    )
-  })
-)
-
-PopoverCard.displayName = 'PopoverCard'