@sanity/ui 0.37.13 → 0.37.14-next.5

package/src/primitives/popover/popoverCard.tsx

@@ -0,0 +1,160 @@
+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'

package/src/primitives/tooltip/__workshop__/props.tsx

@@ -1,10 +1,11 @@
 import {Box, Button, Card, Flex, Text, Tooltip} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 import React from 'react'
-import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
+import {WORKSHOP_PLACEMENT_OPTIONS, WORKSHOP_SHADOW_OPTIONS} from '../../../__workshop__/constants'
 
 export default function PropsStory() {
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
+  const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 2)
 
   return (
     <Card height="fill">
@@ -17,6 +18,7 @@ export default function PropsStory() {
           }
           placement={placement}
           portal
+          shadow={shadow}
         >
           <Button mode="bleed" text="Hover me" />
         </Tooltip>

package/src/primitives/tooltip/tooltip.tsx

@@ -1,6 +1,26 @@
-import React, {cloneElement, forwardRef, useCallback, useEffect, useState} from 'react'
-import {usePopper} from 'react-popper'
+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 styled from 'styled-components'
+import {FLOATING_STATIC_SIDES} from '../../constants'
 import {useArrayProp, useForwardedRef} from '../../hooks'
 import {ThemeColorSchemeKey, useTheme} from '../../theme'
 import {Placement} from '../../types'
@@ -12,6 +32,7 @@ import {TooltipArrow} from './tooltipArrow'
  * @public
  */
 export interface TooltipProps extends Omit<LayerProps, 'as'> {
+  /** @deprecated Use `fallbackPlacements` instead. */
   allowedAutoPlacements?: Placement[]
   boundaryElement?: HTMLElement | null
   children?: React.ReactElement
@@ -21,6 +42,7 @@ export interface TooltipProps extends Omit<LayerProps, 'as'> {
   placement?: Placement
   portal?: boolean | string
   scheme?: ThemeColorSchemeKey
+  shadow?: number | number[]
 }
 
 const Root = styled(Layer)`
@@ -37,55 +59,88 @@ export const Tooltip = forwardRef(function Tooltip(
   const boundaryElementContext = useBoundaryElement()
   const theme = useTheme()
   const {
-    allowedAutoPlacements,
     boundaryElement = boundaryElementContext?.element,
-    children,
+    children: childProp,
     content,
     disabled,
     fallbackPlacements: fallbackPlacementsProp,
-    placement = 'bottom',
+    placement: placementProp = '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 [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 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 {forceUpdate} = popper
+
+  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 [isOpen, setIsOpen] = useState(false)
   const handleBlur = useCallback(() => setIsOpen(false), [])
   const handleFocus = useCallback(() => setIsOpen(true), [])
@@ -118,16 +173,6 @@ 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)
@@ -138,54 +183,85 @@ export const Tooltip = forwardRef(function Tooltip(
     if (!content) setIsOpen(false)
   }, [content])
 
-  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}>
+  // 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}
+      >
         {content}
-        <TooltipArrow ref={setArrowElement} style={popper.styles.arrow} />
+        <TooltipArrow ref={setArrow} style={arrowStyle} />
       </Card>
     </Root>
   )
 
   return (
     <>
-      {referenceNode}
+      {child}
 
       {isOpen && (
         <>
-          {portal && (
+          {portal ? (
             <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>
-              {popperNode}
+              {root}
             </Portal>
+          ) : (
+            root
           )}
-
-          {!portal && popperNode}
         </>
       )}
     </>

package/src/primitives/tooltip/tooltipArrow.tsx

@@ -3,6 +3,21 @@ 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;
@@ -16,30 +31,30 @@ const Root = styled.div`
       display: block;
     }
     transform-origin: 7.5px 7.5px;
-  }
+  } */
 
-  [data-popper-placement^='top'] > div > & {
-    bottom: -15px;
+  [data-placement^='top'] > & {
+    bottom: -27px;
   }
 
-  [data-popper-placement^='right'] > div > & {
-    left: -15px;
+  [data-placement^='right'] > & {
+    left: -27px;
 
     & > svg {
       transform: rotate(90deg);
     }
   }
 
-  [data-popper-placement^='left'] > div > & {
-    right: -15px;
+  [data-placement^='left'] > & {
+    right: -27px;
 
     & > svg {
       transform: rotate(-90deg);
     }
   }
 
-  [data-popper-placement^='bottom'] > div > & {
-    top: -15px;
+  [data-placement^='bottom'] > & {
+    top: -27px;
 
     & > svg {
       transform: rotate(180deg);
@@ -64,7 +79,7 @@ export const TooltipArrow = forwardRef(function TooltipArrow(
   const {...restProps} = props
 
   return (
-    <Root {...restProps} ref={ref}>
+    <Root data-ui="Tooltip__arrow" {...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/arrow.d.ts.map

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

package/lib/dts/src/primitives/popover/modifiers/getPopoverModifiers.d.ts

@@ -1,4 +0,0 @@
-import { Modifier } from 'react-popper';
-import { PopoverModifiersProps } from './types';
-export declare function getPopoverModifiers(props: PopoverModifiersProps): Modifier<any, any>[];
-//# sourceMappingURL=getPopoverModifiers.d.ts.map

package/lib/dts/src/primitives/popover/modifiers/getPopoverModifiers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"getPopoverModifiers.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/popover/modifiers/getPopoverModifiers.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,cAAc,CAAA;AACrC,OAAO,EAAC,qBAAqB,EAAC,MAAM,SAAS,CAAA;AAkB7C,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,qBAAqB,GAAG,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAoHtF"}

package/lib/dts/src/primitives/popover/modifiers/index.d.ts

@@ -1,2 +0,0 @@
-export * from './usePopoverModifiers';
-//# sourceMappingURL=index.d.ts.map

package/lib/dts/src/primitives/popover/modifiers/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/popover/modifiers/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}

package/lib/dts/src/primitives/popover/modifiers/types.d.ts

@@ -1,18 +0,0 @@
-import { Placement } from '../../../types';
-export interface PopoverModifiersProps {
-    allowedAutoPlacements?: Placement[];
-    arrow?: boolean;
-    arrowElement?: HTMLElement | null;
-    boundaryElement?: HTMLElement | null;
-    constrainSize?: boolean;
-    distance: number;
-    fallbackPlacements?: Placement[];
-    margins?: [number, number, number, number];
-    matchReferenceWidth?: boolean;
-    open: boolean;
-    preventOverflow?: boolean;
-    skidding: number;
-    tether?: boolean;
-    tetherOffset?: number | ((...args: any[]) => number);
-}
-//# sourceMappingURL=types.d.ts.map

package/lib/dts/src/primitives/popover/modifiers/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/popover/modifiers/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAA;AAExC,MAAM,WAAW,qBAAqB;IACpC,qBAAqB,CAAC,EAAE,SAAS,EAAE,CAAA;IACnC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IACjC,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IACpC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAA;IAChC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IAC1C,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,IAAI,EAAE,OAAO,CAAA;IACb,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,MAAM,CAAC,CAAA;CACrD"}

package/lib/dts/src/primitives/popover/modifiers/usePopoverModifiers.d.ts

@@ -1,4 +0,0 @@
-import { Modifier } from 'react-popper';
-import { PopoverModifiersProps } from './types';
-export declare function usePopoverModifiers(props: PopoverModifiersProps): Modifier<any, any>[];
-//# sourceMappingURL=usePopoverModifiers.d.ts.map

package/lib/dts/src/primitives/popover/modifiers/usePopoverModifiers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"usePopoverModifiers.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/popover/modifiers/usePopoverModifiers.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,cAAc,CAAA;AAGrC,OAAO,EAAC,qBAAqB,EAAC,MAAM,SAAS,CAAA;AAE7C,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,qBAAqB,GAAG,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAmDtF"}