@sanity/ui 4.0.0-static.44 → 4.0.0-static.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "4.0.0-static.44",
+  "version": "4.0.0-static.45",
   "keywords": [
     "react",
     "ui",

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

@@ -11,8 +11,8 @@ import {
   useFloating,
 } from '@floating-ui/react-dom'
 import {type MaxWidth, popover as popoverCss, type ResponsiveProp} from '@sanity/ui/css'
-import {AnimatePresence} from 'motion/react'
 import {
+  Activity,
   cloneElement,
   type ForwardedRef,
   type ReactElement,
@@ -30,6 +30,7 @@ import {_getResponsiveProp} from '../../helpers/props'
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
 import {origin} from '../../middleware/origin'
 import type {ComponentType, Placement, Props} from '../../types'
+import {AnimateActivity} from '../../utils/AnimateActivity'
 import {BoundaryElementContext} from '../../utils/boundaryElement/BoundaryElementContext'
 import {getElementRef} from '../../utils/getElementRef'
 import {Portal} from '../../utils/portal/Portal'
@@ -307,7 +308,7 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     </>
   )
 
-  let children = open ? node : null
+  let children = node
 
   if (open && portal) {
     let resolvedTone = tone as Exclude<typeof tone, 'inherit'>
@@ -329,7 +330,13 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
   return (
     <>
       {/* the popover */}
-      {animate ? <AnimatePresence>{children}</AnimatePresence> : children}
+      {animate ? (
+        <AnimateActivity mode={open ? 'visible' : 'hidden'} layoutMode="default">
+          {children}
+        </AnimateActivity>
+      ) : (
+        <Activity mode={open ? 'visible' : 'hidden'}>{children}</Activity>
+      )}
 
       {/* the referred element */}
       {child}

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

@@ -31,7 +31,7 @@ describe('Tooltip', () => {
       const button = screen.getByText('Hover me')
 
       // Validate tooltip content is not rendered
-      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip content')).not.toBeVisible()
 
       fireEvent.mouseEnter(button)
 
@@ -40,7 +40,7 @@ describe('Tooltip', () => {
 
       fireEvent.mouseOut(button)
       // Validate tooltip content is not rendered anymore
-      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip content')).not.toBeVisible()
     })
     it('should support delays to show and hide the tooltip.', () => {
       vi.useFakeTimers()
@@ -59,13 +59,13 @@ describe('Tooltip', () => {
       const button = screen.getByText('Hover me')
 
       // Validate tooltip content is not rendered
-      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip content')).not.toBeVisible()
 
       fireEvent.mouseEnter(button)
 
       act(() => vi.advanceTimersByTime(delay / 2))
       // Content should not be rendered yet
-      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip content')).not.toBeVisible()
       act(() => vi.advanceTimersByTime(delay / 2))
 
       // Validate tooltip content is rendered
@@ -76,7 +76,7 @@ describe('Tooltip', () => {
       screen.getByText('Tooltip content')
       act(() => vi.advanceTimersByTime(delay))
       // Validate tooltip content is not rendered anymore
-      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip content')).not.toBeVisible()
     })
     it('should support different open and close delays to show and hide the tooltip.', () => {
       vi.useFakeTimers()
@@ -99,13 +99,13 @@ describe('Tooltip', () => {
       const button = screen.getByText('Hover me')
 
       // Validate tooltip content is not rendered
-      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip content')).not.toBeVisible()
 
       fireEvent.mouseEnter(button)
 
       act(() => vi.advanceTimersByTime(openDelay / 2))
       // Content should not be rendered yet
-      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip content')).not.toBeVisible()
       act(() => vi.advanceTimersByTime(openDelay / 2))
 
       // Validate tooltip content is rendered
@@ -116,7 +116,7 @@ describe('Tooltip', () => {
       screen.getByText('Tooltip content')
       act(() => vi.advanceTimersByTime(closeDelay))
       // Validate tooltip content is not rendered anymore
-      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip content')).not.toBeVisible()
     })
   })
 
@@ -144,20 +144,20 @@ describe('Tooltip', () => {
       const button2 = screen.getByText('Button 2')
 
       // Validate tooltip content is not rendered
-      expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
-      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip 1')).not.toBeVisible()
+      expect(screen.queryByText('Tooltip 2')).not.toBeVisible()
 
       // Hovers on first button, it should show first tooltip only
       fireEvent.mouseEnter(button1)
       act(() => vi.advanceTimersByTime(delay / 2))
       // Content should not be rendered yet, we have a delay of 150ms
-      expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
-      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip 1')).not.toBeVisible()
+      expect(screen.queryByText('Tooltip 2')).not.toBeVisible()
       act(() => vi.advanceTimersByTime(delay / 2))
 
       // Validate Tooltip 1 is rendered
       screen.getByText('Tooltip 1')
-      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip 2')).not.toBeVisible()
 
       // Hovers on second button.
       fireEvent.mouseOut(button1)
@@ -165,13 +165,13 @@ describe('Tooltip', () => {
 
       // Validate Tooltip 1 is not rendered, now tooltip 2 is open.
       act(() => vi.advanceTimersByTime(1))
-      expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip 1')).not.toBeVisible()
       screen.getByText('Tooltip 2')
 
       // Validate tooltip content is not rendered anymore
       fireEvent.mouseOut(button2)
       act(() => vi.advanceTimersByTime(delay + 1))
-      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip 2')).not.toBeVisible()
 
       // Hovering again, should trigger the tooltip to show immediately, as the group is not deactivated yet
       fireEvent.mouseEnter(button2)
@@ -181,13 +181,13 @@ describe('Tooltip', () => {
       // Validate tooltip content is not rendered anymore
       fireEvent.mouseOut(button2)
       act(() => vi.advanceTimersByTime(delay + 1))
-      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip 2')).not.toBeVisible()
 
       // Wait 200ms, the group is deactivated, hovering again should trigger the delay
       act(() => vi.advanceTimersByTime(200))
       fireEvent.mouseEnter(button2)
       act(() => vi.advanceTimersByTime(delay / 2))
-      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip 2')).not.toBeVisible()
       act(() => vi.advanceTimersByTime(delay / 2))
       screen.getByText('Tooltip 2')
     })
@@ -220,20 +220,20 @@ describe('Tooltip', () => {
       const button2 = screen.getByText('Button 2')
 
       // Validate tooltip content is not rendered
-      expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
-      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip 1')).not.toBeVisible()
+      expect(screen.queryByText('Tooltip 2')).not.toBeVisible()
 
       // Hovers on first button, it should show first tooltip only
       fireEvent.mouseEnter(button1)
       act(() => vi.advanceTimersByTime(openDelay / 2))
       // Content should not be rendered yet, we have a delay of2150ms
-      expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
-      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip 1')).not.toBeVisible()
+      expect(screen.queryByText('Tooltip 2')).not.toBeVisible()
       act(() => vi.advanceTimersByTime(openDelay / 2))
 
       // Validate Tooltip 1 is rendered
       screen.getByText('Tooltip 1')
-      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip 2')).not.toBeVisible()
 
       // Hovers on second button.
       fireEvent.mouseOut(button1)
@@ -241,13 +241,13 @@ describe('Tooltip', () => {
 
       // Validate Tooltip 1 is not rendered, now tooltip 2 is open.
       act(() => vi.advanceTimersByTime(1))
-      expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip 1')).not.toBeVisible()
       screen.getByText('Tooltip 2')
 
       // Validate tooltip content is not rendered anymore
       fireEvent.mouseOut(button2)
       act(() => vi.advanceTimersByTime(closeDelay + 1))
-      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip 2')).not.toBeVisible()
 
       // Hovering again, should trigger the tooltip to show immediately, as the group is not deactivated yet
       fireEvent.mouseEnter(button2)
@@ -257,13 +257,13 @@ describe('Tooltip', () => {
       // Validate tooltip content is not rendered anymore
       fireEvent.mouseOut(button2)
       act(() => vi.advanceTimersByTime(closeDelay + 1))
-      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip 2')).not.toBeVisible()
 
       // Wait 200ms, the group is deactivated, hovering again should trigger the delay
       act(() => vi.advanceTimersByTime(200))
       fireEvent.mouseEnter(button2)
       act(() => vi.advanceTimersByTime(openDelay / 2))
-      expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip 2')).not.toBeVisible()
       act(() => vi.advanceTimersByTime(openDelay / 2))
       screen.getByText('Tooltip 2')
     })
@@ -288,7 +288,7 @@ describe('Tooltip', () => {
       const button = screen.getByText('Hover me')
 
       // Validate tooltip content is not rendered
-      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip content')).not.toBeVisible()
       act(() => fireEvent.focus(button))
       act(() => vi.advanceTimersByTime(delay))
 
@@ -299,7 +299,7 @@ describe('Tooltip', () => {
         fireEvent.keyDown(button, {key: 'Escape', code: 'Escape'})
       })
       // Validate tooltip content is not rendered anymore
-      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      expect(screen.queryByText('Tooltip content')).not.toBeVisible()
     })
     it('With <TooltipDelayGroupProvider />  closes immediately with Escape key', () => {
       const delay = 150
@@ -320,8 +320,8 @@ describe('Tooltip', () => {
 
       const button = screen.getByText('Hover me')
 
-      // Validate tooltip content is not rendered
-      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      // Validate tooltip content is not visible
+      expect(screen.queryByText('Tooltip content')).not.toBeVisible()
       act(() => fireEvent.focus(button))
 
       act(() => vi.advanceTimersByTime(delay))
@@ -332,8 +332,8 @@ describe('Tooltip', () => {
       act(() => {
         fireEvent.keyDown(button, {key: 'Escape', code: 'Escape'})
       })
-      // Validate tooltip content is not rendered anymore
-      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      // Validate tooltip content is not visible anymore
+      expect(screen.queryByText('Tooltip content')).not.toBeVisible()
     })
   })
 
@@ -349,19 +349,19 @@ describe('Tooltip', () => {
 
       const button = screen.getByText('Hover me')
 
-      // Assertion: tooltip does not exist in the document
-      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      // Assertion: the tooltip is not visible
+      expect(screen.queryByText('Tooltip content')).not.toBeVisible()
       act(() => fireEvent.focus(button))
 
       act(() => vi.advanceTimersByTime(delay))
 
-      // Assertion: the tooltip is not visible
+      // Assertion: the tooltip is visible
       expect(screen.queryByText('Tooltip content')).toBeVisible()
 
       act(() => fireEvent.click(button))
 
-      // Assertion: tooltip does not exist in the document
-      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      // Assertion: the tooltip is not visible
+      expect(screen.queryByText('Tooltip content')).not.toBeVisible()
     })
 
     it('Should close the tooltip when the context menu is opened (right click)', () => {
@@ -375,19 +375,19 @@ describe('Tooltip', () => {
 
       const button = screen.getByText('Hover me')
 
-      // Assertion: tooltip does not exist in the document
-      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      // Assertion: the tooltip is not visible
+      expect(screen.queryByText('Tooltip content')).not.toBeVisible()
       act(() => fireEvent.focus(button))
 
       act(() => vi.advanceTimersByTime(delay))
 
-      // Assertion: the tooltip is not visible
+      // Assertion: the tooltip is visible
       expect(screen.queryByText('Tooltip content')).toBeVisible()
 
       act(() => fireEvent.contextMenu(button))
 
-      // Assertion: tooltip does not exist in the document
-      expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
+      // Assertion: the tooltip is not visible
+      expect(screen.queryByText('Tooltip content')).not.toBeVisible()
     })
   })
 

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

@@ -10,8 +10,8 @@ import {
 } from '@floating-ui/react-dom'
 import {type RadiusStyleProps, type ShadowStyleProps, tooltip} from '@sanity/ui/css'
 import type {CardTone, ColorScheme} from '@sanity/ui/theme'
-import {AnimatePresence} from 'motion/react'
 import {
+  Activity,
   cloneElement,
   type FocusEvent,
   type HTMLAttributes,
@@ -36,6 +36,7 @@ import {useDelayedState} from '../../hooks/useDelayedState'
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
 import {origin} from '../../middleware/origin'
 import type {ComponentType, Delay, Placement, Props} from '../../types'
+import {AnimateActivity} from '../../utils/AnimateActivity'
 import {BoundaryElementContext} from '../../utils/boundaryElement/BoundaryElementContext'
 import {getElementRef} from '../../utils/getElementRef'
 import {Portal} from '../../utils/portal/Portal'
@@ -388,7 +389,7 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
     </TooltipLayer>
   )
 
-  let children = showTooltip ? node : null
+  let children = node
 
   if (showTooltip && portalProp) {
     let resolvedTone = tone as Exclude<typeof tone, 'inherit'>
@@ -410,7 +411,13 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
   return (
     <>
       {/* the tooltip */}
-      {animate ? <AnimatePresence>{children}</AnimatePresence> : children}
+      {animate ? (
+        <AnimateActivity mode={showTooltip ? 'visible' : 'hidden'} layoutMode="default">
+          {children}
+        </AnimateActivity>
+      ) : (
+        <Activity mode={showTooltip ? 'visible' : 'hidden'}>{children}</Activity>
+      )}
 
       {/* the referred element */}
       {child}

package/src/core/utils/AnimateActivity.tsx

@@ -0,0 +1,78 @@
+/**
+ * MIT License
+ * Copyright (c) 2024 Motion One
+
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import {invariant, PresenceChild} from 'motion/react'
+import {Activity, useState} from 'react'
+
+export interface AnimateActivityProps {
+  mode: 'visible' | 'hidden'
+  layoutMode: 'default' | 'pop'
+  children: React.ReactNode
+}
+
+/**
+ * This component will become available on `motion/react` in the future, this "fork" is temporary
+ */
+export function AnimateActivity({mode: modeFromProps, layoutMode, children}: AnimateActivityProps) {
+  /**
+   * This is the mode that we'll render.
+   */
+  const [mode, setMode] = useState(modeFromProps)
+
+  /**
+   * This is the goal state as defined by props.
+   */
+  const isPresent = modeFromProps === 'visible'
+
+  /**
+   * Immediately switch to mode="visible" when the user
+   * changes the mode prop.
+   */
+  if (isPresent && mode !== 'visible') {
+    setMode('visible')
+    return null
+  }
+
+  /**
+   * Set mode to "hidden" only when the exit animation is complete.
+   */
+  const onExitComplete = () => setMode('hidden')
+
+  invariant(Boolean(Activity), 'Activity component not found - upgrade to React 19.2.0 or higher')
+
+  return (
+    <Activity mode={mode}>
+      <PresenceChild
+        isPresent={isPresent}
+        onExitComplete={!isPresent ? onExitComplete : undefined}
+        presenceAffectsLayout={false}
+        mode={layoutMode === 'pop' ? 'popLayout' : 'sync'}
+      >
+        {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          children as any
+        }
+      </PresenceChild>
+    </Activity>
+  )
+}