@sanity/ui 0.38.3-next.30 → 0.38.3-next.36

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

@@ -1,22 +1,27 @@
-import {Box, Button, Card, Flex, Text, Tooltip} from '@sanity/ui'
-import {useSelect, useText} from '@sanity/ui-workshop'
-import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
+import {Button, Card, Flex, Text, Tooltip} from '@sanity/ui'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {
+  WORKSHOP_PLACEMENT_OPTIONS,
+  WORKSHOP_SHADOW_OPTIONS,
+  WORKSHOP_SPACE_OPTIONS,
+} from '../../../__workshop__/constants'
 
 export default function PropsStory() {
   const content = useText('Content', 'Tooltip content')
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 2, 'Props')
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
+  const portal = useBoolean('Portal', true)
+  const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 2)
 
   return (
     <Card height="fill">
       <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
         <Tooltip
-          content={
-            <Box padding={2}>
-              <Text size={1}>{content}</Text>
-            </Box>
-          }
+          content={<Text size={1}>{content}</Text>}
+          padding={padding}
           placement={placement}
-          portal
+          portal={portal}
+          shadow={shadow}
         >
           <Button mode="bleed" text="Hover me" />
         </Tooltip>

package/src/primitives/tooltip/tooltip.tsx

@@ -1,6 +1,26 @@
-import {cloneElement, forwardRef, useCallback, useEffect, useRef, useState} from 'react'
-import {usePopper} from 'react-popper'
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useFloating,
+  Middleware,
+  RootBoundary,
+} from '@floating-ui/react-dom'
+import {
+  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,15 +32,18 @@ import {TooltipArrow} from './tooltipArrow'
  * @public
  */
 export interface TooltipProps extends Omit<LayerProps, 'as'> {
+  /** @deprecated Use `fallbackPlacements` instead. */
   allowedAutoPlacements?: Placement[]
   boundaryElement?: HTMLElement | null
   children?: React.ReactElement
   content?: React.ReactNode
   disabled?: boolean
   fallbackPlacements?: Placement[]
+  padding?: number | number[]
   placement?: Placement
   portal?: boolean | string
   scheme?: ThemeColorSchemeKey
+  shadow?: number | number[]
 }
 
 const Root = styled(Layer)`
@@ -37,55 +60,89 @@ 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',
+    padding,
+    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,25 +175,6 @@ export const Tooltip = forwardRef(function Tooltip(
     }
   }, [isOpen, referenceElement])
 
-  const updateTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-
-  useEffect(() => {
-    if (updateTimeoutRef.current) {
-      clearTimeout(updateTimeoutRef.current)
-      updateTimeoutRef.current = null
-    }
-
-    updateTimeoutRef.current = setTimeout(() => {
-      if (forceUpdate) {
-        try {
-          forceUpdate()
-        } catch (_) {
-          // ignore caught error
-        }
-      }
-    }, 0)
-  }, [forceUpdate, content])
-
   // Close when `disabled` changes to `true`
   useEffect(() => {
     if (disabled) setIsOpen(false)
@@ -147,54 +185,86 @@ 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}
+        padding={padding}
+        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/src/primitives/popover/modifiers/getPopoverModifiers.ts

@@ -1,137 +0,0 @@
-import maxSizeModifier from 'popper-max-size-modifier'
-import {Modifier} from 'react-popper'
-import {PopoverModifiersProps} from './types'
-
-/*
-
-The order of popper phases:
-
-- beforeRead
-- read
-- afterRead
-- beforeMain
-- main
-- afterMain
-- beforeWrite
-- write
-- afterWrite
-
-*/
-
-export function getPopoverModifiers(props: PopoverModifiersProps): Modifier<any, any>[] {
-  const {
-    allowedAutoPlacements,
-    arrow,
-    arrowElement,
-    boundaryElement,
-    constrainSize,
-    distance,
-    fallbackPlacements,
-    margins,
-    matchReferenceWidth,
-    open,
-    preventOverflow,
-    skidding,
-    tether,
-    tetherOffset,
-  } = props
-
-  // NOTE: For later viewers:
-  // Prior to adding this change, the popover would get `maxWidth: 0` the 2nd time it
-  // was opened, when used with `constrainSize`. I was looking for a way to "reset"
-  // the size of the popover as measured by Popper.js, and this seems to be a workaround.
-  if (!open) {
-    return []
-  }
-
-  const detectOverflowOptions = {
-    altAxis: !constrainSize,
-    boundary: boundaryElement || undefined,
-    padding: 8,
-    tether,
-    tetherOffset,
-  }
-
-  return [
-    constrainSize && {
-      ...maxSizeModifier,
-      options: detectOverflowOptions,
-    },
-    constrainSize && {
-      name: 'applyMaxSize',
-      enabled: true,
-      phase: 'beforeWrite',
-      requires: ['maxSize'],
-      fn({state}: any) {
-        const {width, height} = state.modifiersData.maxSize
-
-        state.styles.popper = {
-          ...state.styles.popper,
-          maxWidth: `${width}px`,
-          maxHeight: `${height}px`,
-        }
-      },
-    },
-    arrow && {
-      name: 'arrow',
-      options: {
-        element: arrowElement,
-        padding: 4,
-      },
-    },
-    (constrainSize || preventOverflow) && {
-      name: 'preventOverflow',
-      options: detectOverflowOptions,
-    },
-    {
-      name: 'offset',
-      options: {
-        offset: [skidding, distance],
-      },
-    },
-    margins && {
-      name: 'margins',
-      enabled: true,
-      phase: 'beforeRead',
-      fn: ({state}: any) => {
-        const {rects} = state
-
-        if (rects.reference) {
-          rects.reference.x += margins[3]
-          rects.reference.y += margins[1]
-          rects.reference.width -= margins[1] + margins[3]
-          rects.reference.height -= margins[0] + margins[2]
-        }
-      },
-    },
-    {
-      name: 'flip',
-      options: {
-        allowedAutoPlacements,
-        boundary: boundaryElement || undefined,
-        fallbackPlacements,
-        padding: 8,
-      },
-    },
-    matchReferenceWidth && {
-      name: 'matchWidth',
-      enabled: true,
-      phase: 'beforeWrite',
-      requires: ['computeStyles'],
-      fn({state}: any) {
-        const {width} = state.rects.reference
-
-        state.styles.popper.width = `${width}px`
-      },
-      effect: ({state}: any) => {
-        const refElement = state.elements.reference
-
-        if (refElement instanceof HTMLElement) {
-          state.elements.popper.style.width = `${
-            refElement.offsetWidth - (margins ? margins[1] + margins[3] : 0)
-          }px`
-        }
-      },
-    },
-  ].filter(Boolean) as Modifier<any, any>[]
-}

package/src/primitives/popover/modifiers/index.ts

@@ -1 +0,0 @@
-export * from './usePopoverModifiers'

package/src/primitives/popover/modifiers/types.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)
-}

package/src/primitives/popover/modifiers/usePopoverModifiers.ts

@@ -1,58 +0,0 @@
-import {useMemo} from 'react'
-import {Modifier} from 'react-popper'
-
-import {getPopoverModifiers} from './getPopoverModifiers'
-import {PopoverModifiersProps} from './types'
-
-export function usePopoverModifiers(props: PopoverModifiersProps): Modifier<any, any>[] {
-  const {
-    allowedAutoPlacements,
-    arrow,
-    arrowElement,
-    boundaryElement,
-    constrainSize,
-    distance,
-    fallbackPlacements,
-    margins,
-    matchReferenceWidth,
-    open,
-    preventOverflow,
-    skidding,
-    tether,
-    tetherOffset,
-  } = props
-
-  return useMemo(() => {
-    return getPopoverModifiers({
-      allowedAutoPlacements,
-      arrow,
-      arrowElement,
-      boundaryElement,
-      constrainSize,
-      distance,
-      fallbackPlacements,
-      margins,
-      matchReferenceWidth,
-      open,
-      preventOverflow,
-      skidding,
-      tether,
-      tetherOffset,
-    })
-  }, [
-    allowedAutoPlacements,
-    arrow,
-    arrowElement,
-    boundaryElement,
-    constrainSize,
-    distance,
-    fallbackPlacements,
-    margins,
-    matchReferenceWidth,
-    open,
-    preventOverflow,
-    skidding,
-    tether,
-    tetherOffset,
-  ])
-}