@sanity/ui 2.14.4-canary.3 → 2.14.5

package/src/core/components/toast/toastProvider.tsx

@@ -1,107 +1,195 @@
-import {AnimatePresence} from 'framer-motion'
-import {startTransition, useMemo, useState} from 'react'
+import {AnimatePresence, motion, type Variants} from 'framer-motion'
+import {useMemo, useRef, useState, startTransition, useEffect} from 'react'
+import {styled} from 'styled-components'
+import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
 import {useMounted} from '../../hooks/useMounted'
-import {LayerProvider} from '../../utils'
+import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
+import {Box} from '../../primitives'
+import {Layer} from '../../utils'
 import {Toast} from './toast'
 import {ToastContext} from './toastContext'
-import {ToastLayer, type ToastLayerProps} from './toastLayer'
 import {generateToastId} from './toastState'
 import {ToastContextValue, ToastParams} from './types'
 
 type ToastState = {
   dismiss: () => void
   id: string
-  updatedAt: number
   params: ToastParams
 }[]
 
 /**
  * @public
  */
-export interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
+export interface ToastProviderProps {
   children?: React.ReactNode
+  padding?: number | number[]
+  paddingX?: number | number[]
+  paddingY?: number | number[]
   zOffset?: number | number[]
 }
 
+const StyledToastProvider = styled(Layer)`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+`
+
+const ToastContainer = styled.div`
+  box-sizing: border-box;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  max-width: 420px;
+  width: 100%;
+`
+
 /**
  * @public
  */
 export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
-  const {children, padding, paddingX, paddingY, gap, zOffset = 1} = props
-  const [state, setState] = useState<ToastState>([])
+  const {children, padding = 4, paddingX, paddingY, zOffset} = props
+  const [state, _setState] = useState<ToastState>([])
+  const toastsRef = useRef<{[key: string]: {timeoutId: NodeJS.Timeout}}>({})
   const mounted = useMounted()
+  const prefersReducedMotion = usePrefersReducedMotion()
+  const variants = useMemo<Variants>(
+    () => ({
+      /**
+       * These variants makes use of special timing, by using a negative opacity as a starting position,
+       * as well as double opacity as the end position.
+       * The purpose of this is to make the tooltip/popover container appear before the content, and when exiting
+       * we want the content to disappear faster than the container.
+       */
+      initial: {
+        opacity: 0,
+        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: -1,
+        y: 32,
+        scale: 0.25,
+        willChange: 'transform',
+      },
+      animate: {
+        opacity: 2,
+        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 1,
+        y: 0,
+        scale: 1,
+      },
+      exit: {
+        opacity: 0,
+        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: -1,
+        scale: 0.5,
+      },
+      transition: {duration: prefersReducedMotion ? 0 : 0.2},
+    }),
+    [prefersReducedMotion],
+  )
 
   const value: ToastContextValue = useMemo(() => {
     const push = (params: ToastParams) => {
+      // Wrap setState in startTransition to allow React to give input state updates higher priority
+      const setState: typeof _setState = (state) => startTransition(() => _setState(state))
+
       const id = params.id || generateToastId()
       const duration = params.duration || 5000
 
-      startTransition(() => {
-        setState((prevState): ToastState => {
-          const dismiss = () => {
-            startTransition(() => {
-              setState((prevState): ToastState => {
-                const idx = prevState.findIndex((t) => t.id === id)
-
-                if (idx > -1) {
-                  const toasts = prevState.slice(0)
+      const dismiss = () => {
+        const timeoutId = toastsRef.current[id]?.timeoutId
 
-                  toasts.splice(idx, 1)
+        setState((prevState): ToastState => {
+          const idx = prevState.findIndex((t) => t.id === id)
 
-                  return toasts
-                }
+          if (idx > -1) {
+            const toasts = prevState.slice(0)
 
-                return prevState
-              })
-            })
-          }
+            toasts.splice(idx, 1)
 
-          // BC legacy support
-          if (duration === 0.01) {
-            return prevState.filter((t) => t.id !== id)
+            return toasts
           }
 
           return prevState
-            .filter((t) => t.id !== id)
-            .concat([
-              {
-                dismiss,
-                id,
-                updatedAt: Date.now(),
-                params: {...params, duration},
-              },
-            ])
         })
+
+        if (timeoutId !== undefined) {
+          clearTimeout(timeoutId)
+          delete toastsRef.current[id]
+        }
+      }
+
+      setState((prevState): ToastState => {
+        return prevState
+          .filter((t) => t.id !== id)
+          .concat([
+            {
+              dismiss,
+              id,
+              params: {...params, duration},
+            },
+          ])
       })
 
+      if (toastsRef.current[id]) {
+        clearTimeout(toastsRef.current[id].timeoutId)
+        delete toastsRef.current[id]
+      }
+
+      toastsRef.current[id] = {timeoutId: setTimeout(dismiss, duration)}
+
       return id
     }
 
     return {version: 0.0, push}
   }, [])
 
+  // clear timeouts on unmount
+  useEffect(
+    () => () => {
+      for (const {timeoutId} of Object.values(toastsRef.current)) {
+        clearTimeout(timeoutId)
+      }
+
+      toastsRef.current = {}
+    },
+    [],
+  )
+
   return (
     <ToastContext.Provider value={value}>
       {children}
       {mounted && (
-        <LayerProvider zOffset={zOffset}>
-          <ToastLayer padding={padding} paddingX={paddingX} paddingY={paddingY} gap={gap}>
-            <AnimatePresence initial={false} mode="popLayout">
-              {state.map(({dismiss, id, params, updatedAt}) => (
-                <Toast
-                  key={id}
-                  closable={params.closable}
-                  description={params.description}
-                  onClose={dismiss}
-                  status={params.status}
-                  title={params.title}
-                  duration={params.duration}
-                  updatedAt={updatedAt}
-                />
-              ))}
-            </AnimatePresence>
-          </ToastLayer>
-        </LayerProvider>
+        <StyledToastProvider data-ui="ToastProvider" zOffset={zOffset}>
+          <ToastContainer>
+            <Box padding={padding} paddingX={paddingX} paddingY={paddingY}>
+              <AnimatePresence initial={false}>
+                {state.map(({dismiss, id, params}) => (
+                  <motion.div
+                    key={id}
+                    layout="position"
+                    initial="initial"
+                    animate="animate"
+                    exit="exit"
+                    variants={variants}
+                    transition={
+                      prefersReducedMotion
+                        ? {duration: 0}
+                        : {type: 'spring', damping: 30, stiffness: 400}
+                    }
+                  >
+                    <Toast
+                      closable={params.closable}
+                      description={params.description}
+                      onClose={dismiss}
+                      status={params.status}
+                      title={params.title}
+                      duration={params.duration}
+                    />
+                  </motion.div>
+                ))}
+              </AnimatePresence>
+            </Box>
+          </ToastContainer>
+        </StyledToastProvider>
       )}
     </ToastContext.Provider>
   )

package/src/core/constants.ts

@@ -10,60 +10,47 @@ export const EMPTY_ARRAY: never[] = []
  */
 export const EMPTY_RECORD: Record<string, never> = {}
 
-const POPOVER_MOTION_DURATION = 0.2
+/**
+ * @internal
+ */
+export const POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = '--motion-content-opacity' as string
 
 /**
  * Shared `framer-motion` variants used by `Popover` and `Tooltip` components.
  * @internal
  */
 export const POPOVER_MOTION_PROPS: {
-  outerVariants: {
-    initial: Variant
-    hidden: Variant
-    visible: Variant
-    scaleIn: Variant
-    scaleOut: Variant
-  }
-  innerVariants: {
-    hidden: Variant
-    visible: Variant
-  }
+  animate: Variant
+  initial: Variant
+  exit: Variant
   transition: Transition
 } = {
-  outerVariants: {
-    initial: {
-      scale: 0.97,
-      willChange: 'transform',
-    },
-    hidden: {
-      opacity: 0,
-    },
-    visible: {
-      opacity: 1,
-      transition: {
-        when: 'beforeChildren',
-        duration: POPOVER_MOTION_DURATION / 2,
-      },
-    },
-    scaleIn: {
-      scale: 1,
-    },
-    scaleOut: {
-      scale: 0.97,
-    },
+  /**
+   * These variants makes use of special timing, by using a negative opacity as a starting position,
+   * as well as double opacity as the end position.
+   * The purpose of this is to make the tooltip/popover container appear before the content, and when exiting
+   * we want the content to disappear faster than the container.
+   */
+  initial: {
+    opacity: 0.5,
+    // the nagative opacity here, as well as the double opacity further down, are to make the content appear after the backgdrop, and when exiting the content should disappear first.
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: -1,
+    scale: 0.97,
+    willChange: 'transform',
+  },
+  animate: {
+    opacity: 2,
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: 1,
+    scale: 1,
   },
-  innerVariants: {
-    hidden: {
-      opacity: 0,
-    },
-    visible: {
-      opacity: 1,
-    },
+  exit: {
+    opacity: 0,
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: -1,
+    scale: 0.97,
   },
   transition: {
+    duration: 0.4,
     type: 'spring',
-    visualDuration: POPOVER_MOTION_DURATION,
-    bounce: 0.25,
   },
 }
 

package/src/core/primitives/grid/grid.tsx

@@ -10,7 +10,6 @@ import {ResponsiveGridProps} from '../types'
  */
 export interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridProps {}
 
-// @TODO this might be how ToastLayer has to be setup
 const StyledGrid = styled(Box)<ResponsiveGridStyleProps>(responsiveGridStyle)
 
 /**

package/src/core/primitives/popover/popoverCard.tsx

@@ -3,7 +3,7 @@ import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {type MotionProps, motion} from 'framer-motion'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
 import {styled} from 'styled-components'
-import {POPOVER_MOTION_PROPS} from '../../constants'
+import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY, POPOVER_MOTION_PROPS} from '../../constants'
 import {BoxOverflow, CardTone, Placement, PopoverMargins, Radius} from '../../types'
 import {Arrow, useLayer} from '../../utils'
 import {Card, CardProps} from '../card'
@@ -22,11 +22,10 @@ const MotionCard = styled(motion.create(Card))`
   flex-direction: column;
   width: max-content;
   min-width: min-content;
-  will-change: transform;
-`
-
-const MotionFlex = styled(motion.create(Flex))`
-  will-change: opacity;
+  & > * {
+    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+    will-change: opacity;
+  }
 `
 
 /**
@@ -132,24 +131,13 @@ export const PopoverCard = memo(
         sizing="border"
         style={rootStyle}
         tone={tone}
-        variants={POPOVER_MOTION_PROPS.outerVariants}
-        transition={POPOVER_MOTION_PROPS.transition}
-        initial={animate ? ['hidden', 'initial'] : undefined}
-        animate={animate ? ['visible', 'scaleIn'] : undefined}
-        exit={animate ? ['hidden', 'scaleOut'] : undefined}
+        {...(animate ? POPOVER_MOTION_PROPS : {})}
       >
-        <MotionFlex
-          data-ui="Popover__wrapper"
-          direction="column"
-          flex={1}
-          overflow={overflow}
-          variants={POPOVER_MOTION_PROPS.innerVariants}
-          transition={POPOVER_MOTION_PROPS.transition}
-        >
+        <Flex data-ui="Popover__wrapper" direction="column" flex={1} overflow={overflow}>
           <Flex direction="column" flex={1} padding={padding}>
             {children}
           </Flex>
-        </MotionFlex>
+        </Flex>
 
         {arrow && (
           <Arrow

package/src/core/primitives/tooltip/tooltip.tsx

@@ -219,6 +219,49 @@ export const Tooltip = forwardRef(function Tooltip(
     [isInsideGroup, delayGroupContext, openDelay, tooltipId, closeDelay, setIsOpen],
   )
 
+  const handleBlur = useCallback(
+    (e: FocusEvent) => {
+      handleIsOpenChange(false)
+      childProp?.props?.onBlur?.(e)
+    },
+    [childProp?.props, handleIsOpenChange],
+  )
+  const handleClick = useCallback(
+    (e: MouseEvent) => {
+      handleIsOpenChange(false, true)
+      childProp?.props.onClick?.(e)
+    },
+    [childProp?.props, handleIsOpenChange],
+  )
+  const handleContextMenu = useCallback(
+    (e: MouseEvent) => {
+      handleIsOpenChange(false, true)
+      childProp?.props.onContextMenu?.(e)
+    },
+    [childProp?.props, handleIsOpenChange],
+  )
+  const handleFocus = useCallback(
+    (e: FocusEvent) => {
+      handleIsOpenChange(true)
+      childProp?.props?.onFocus?.(e)
+    },
+    [childProp?.props, handleIsOpenChange],
+  )
+  const handleMouseEnter = useCallback(
+    (e: MouseEvent) => {
+      handleIsOpenChange(true)
+      childProp?.props?.onMouseEnter?.(e)
+    },
+    [childProp?.props, handleIsOpenChange],
+  )
+  const handleMouseLeave = useCallback(
+    (e: MouseEvent) => {
+      handleIsOpenChange(false)
+      childProp?.props?.onMouseLeave?.(e)
+    },
+    [childProp?.props, handleIsOpenChange],
+  )
+
   // Handle closing the tooltip when the mouse leaves the referenceElement
   useCloseOnMouseLeave({handleIsOpenChange, referenceElement, showTooltip})
 
@@ -249,28 +292,6 @@ export const Tooltip = forwardRef(function Tooltip(
     }
   }, [handleIsOpenChange, showTooltip])
 
-  /* eslint-disable padding-line-between-statements */
-  // Handle delays and grouping
-  const handleChildEvent = useEffectEvent((open: boolean, immediate?: boolean) =>
-    handleIsOpenChange(open, immediate),
-  )
-  useEffect(() => {
-    if (!referenceElement) return
-
-    const controller = new AbortController()
-    const {signal} = controller
-
-    referenceElement.addEventListener('blur', () => handleChildEvent(false), {signal})
-    referenceElement.addEventListener('focus', () => handleChildEvent(true), {signal})
-    referenceElement.addEventListener('mouseenter', () => handleChildEvent(true), {signal})
-    referenceElement.addEventListener('mouseleave', () => handleChildEvent(false), {signal})
-    referenceElement.addEventListener('click', () => handleChildEvent(false, true), {signal})
-    referenceElement.addEventListener('contextmenu', () => handleChildEvent(false, true), {signal})
-
-    return () => controller.abort()
-  }, [referenceElement])
-  /* eslint-enable padding-line-between-statements */
-
   // // Set the max width of the tooltip based on boundaries and portals
   useLayoutEffect(() => {
     // Get the maximum tooltip width (sans tooltip padding)
@@ -303,8 +324,24 @@ export const Tooltip = forwardRef(function Tooltip(
   const child = useMemo(() => {
     if (!childProp) return null
 
-    return cloneElement(childProp, {ref: setReferenceElement})
-  }, [childProp])
+    return cloneElement(childProp, {
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      onContextMenu: handleContextMenu,
+      ref: setReferenceElement,
+    })
+  }, [
+    childProp,
+    handleBlur,
+    handleClick,
+    handleContextMenu,
+    handleFocus,
+    handleMouseEnter,
+    handleMouseLeave,
+  ])
 
   // If there's a child then we need to set the reference element to the cloned child ref
   // and if child changes we make sure to update or remove the reference element.

package/src/core/primitives/tooltip/tooltipCard.tsx

@@ -2,7 +2,7 @@ import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {type MotionProps, motion} from 'framer-motion'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
 import {styled} from 'styled-components'
-import {POPOVER_MOTION_PROPS} from '../../constants'
+import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY, POPOVER_MOTION_PROPS} from '../../constants'
 import {Placement, Radius} from '../../types'
 import {Arrow} from '../../utils'
 import {Card, CardProps} from '../card'
@@ -13,7 +13,10 @@ import {
 } from './constants'
 
 const MotionCard = styled(motion.create(Card))`
-  will-change: transform;
+  & > * {
+    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+    will-change: opacity;
+  }
 `
 
 /**
@@ -86,11 +89,7 @@ export const TooltipCard = memo(
         scheme={scheme}
         shadow={shadow}
         style={rootStyle}
-        variants={POPOVER_MOTION_PROPS.outerVariants}
-        transition={POPOVER_MOTION_PROPS.transition}
-        initial={animate ? ['hidden', 'initial'] : undefined}
-        animate={animate ? ['visible', 'scaleIn'] : undefined}
-        exit={animate ? ['hidden', 'scaleOut'] : undefined}
+        {...(animate ? POPOVER_MOTION_PROPS : {})}
       >
         {children}
 

package/src/core/utils/layer/layer.tsx

@@ -66,8 +66,8 @@ const LayerChildren = forwardRef(function LayerChildren(
 
   return (
     <StyledLayer
-      data-ui="Layer"
       {...restProps}
+      data-ui="Layer"
       onFocus={handleFocus}
       ref={ref}
       style={{...style, zIndex}}

package/src/core/components/toast/toastLayer.tsx

@@ -1,50 +0,0 @@
-import {styled} from 'styled-components'
-import {Grid} from '../../primitives/grid'
-import {useLayer} from '../../utils'
-
-/**
- * @public
- */
-export interface ToastLayerProps {
-  children: React.ReactNode
-  padding?: number | number[]
-  paddingX?: number | number[]
-  paddingY?: number | number[]
-  gap?: number | number[]
-}
-
-/**
- * @internal
- */
-export function ToastLayer(props: ToastLayerProps): React.JSX.Element {
-  const {children, padding = 4, paddingX, paddingY, gap = 3} = props
-  const {zIndex} = useLayer()
-
-  return (
-    <StyledLayer
-      forwardedAs="ul"
-      data-ui="ToastProvider"
-      padding={padding}
-      paddingX={paddingX}
-      paddingY={paddingY}
-      gap={gap}
-      columns={1}
-      style={{zIndex}}
-    >
-      {children}
-    </StyledLayer>
-  )
-}
-
-ToastLayer.displayName = 'ToastLayer'
-
-const StyledLayer = styled(Grid)`
-  box-sizing: border-box;
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  list-style: none;
-  pointer-events: none;
-  max-width: 420px;
-  width: 100%;
-`