@sanity/ui 0.38.3-next.18 → 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/styles/margin/marginsStyle.test.ts

@@ -1,3 +1,5 @@
+/** @jest-environment jsdom */
+
 import {studioTheme, Theme} from '../../theme'
 import {responsiveMarginStyle} from './marginStyle'
 

package/src/styles/padding/paddingStyle.test.ts

@@ -1,3 +1,5 @@
+/** @jest-environment jsdom */
+
 import {studioTheme, Theme} from '../../theme'
 import {responsivePaddingStyle} from './paddingStyle'
 

package/src/theme/lib/color-fns/color-fns.test.ts

@@ -1,3 +1,5 @@
+/** @jest-environment jsdom */
+
 import {hexToRgb, multiply, parseColor, rgba, screen} from '.'
 
 const hues = {

package/src/theme/lib/theme/color/color.test.ts

@@ -1,4 +1,6 @@
-import {createColorTheme} from '.'
+/** @jest-environment jsdom */
+
+import {createColorTheme} from './factory'
 
 describe('color', () => {
   describe('createColorTheme', () => {

package/src/theme/theme.test.tsx

@@ -1,3 +1,5 @@
+/** @jest-environment jsdom */
+
 import {render} from '../../test'
 import {studioTheme} from './studioTheme'
 import {ThemeContext} from './themeContext'

package/src/utils/boundaryElement/boundaryElement.test.tsx

@@ -1,3 +1,5 @@
+/** @jest-environment jsdom */
+
 import {render} from '../../../test'
 import {BoundaryElementContext} from './boundaryElementContext'
 import {BoundaryElementContextValue} from './types'

package/src/utils/layer/layer.test.tsx

@@ -1,3 +1,5 @@
+/** @jest-environment jsdom */
+
 import {render} from '../../../test'
 import {LayerContext} from './layerContext'
 import {LayerContextValue} from './types'

package/src/utils/portal/portal.test.tsx

@@ -1,3 +1,5 @@
+/** @jest-environment jsdom */
+
 import {render} from '../../../test'
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'