@sanity/ui 2.3.6-canary.2 → 2.3.6-canary.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.3.6-canary.2",
+  "version": "2.3.6-canary.4",
   "keywords": [
     "sanity",
     "ui",
@@ -84,7 +84,7 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.0",
     "@sanity/color": "^3.0.6",
-    "@sanity/icons": "^3.2.0",
+    "@sanity/icons": "3.2.1-canary.0",
     "csstype": "^3.1.3",
     "framer-motion": "11.0.8",
     "react-refractor": "^2.2.0"

package/src/core/components/autocomplete/autocomplete.tsx

@@ -200,7 +200,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
   const listBoxId = `${id}-listbox`
   const options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY
-  const padding = useMemo(() => _getArrayProp(paddingProp), [paddingProp])
+  const padding = _getArrayProp(paddingProp)
   const currentOption = useMemo(
     () => (value !== null ? options.find((o) => o.value === value) : undefined),
     [options, value],
@@ -213,44 +213,41 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   const activeItemId = activeValue ? `${id}-option-${activeValue}` : undefined
   const expanded = (query !== null && loading) || (focused && query !== null)
 
-  const handleRootBlur = useCallback(
-    (event: FocusEvent<HTMLInputElement>) => {
-      setTimeout(() => {
-        // NOTE: This is a workaround for a bug that may happen in Chrome (clicking the scrollbar
-        // closes the results in certain situations):
-        // - Do not handle blur if the mouse is within the popover
-        if (popoverMouseWithinRef.current) {
-          return
-        }
+  const handleRootBlur = (event: FocusEvent<HTMLInputElement>) => {
+    setTimeout(() => {
+      // NOTE: This is a workaround for a bug that may happen in Chrome (clicking the scrollbar
+      // closes the results in certain situations):
+      // - Do not handle blur if the mouse is within the popover
+      if (popoverMouseWithinRef.current) {
+        return
+      }
 
-        const elements: HTMLElement[] = (relatedElements || []).concat(
-          rootElementRef.current ? [rootElementRef.current] : [],
-          resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : [],
-        )
+      const elements: HTMLElement[] = (relatedElements || []).concat(
+        rootElementRef.current ? [rootElementRef.current] : [],
+        resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : [],
+      )
 
-        let focusInside = false
+      let focusInside = false
 
-        if (document.activeElement) {
-          for (const e of elements) {
-            if (e === document.activeElement || e.contains(document.activeElement)) {
-              focusInside = true
-              break
-            }
+      if (document.activeElement) {
+        for (const e of elements) {
+          if (e === document.activeElement || e.contains(document.activeElement)) {
+            focusInside = true
+            break
           }
         }
+      }
 
-        if (focusInside === false) {
-          dispatch({type: 'root/blur'})
-          popoverMouseWithinRef.current = false
-          if (onQueryChange) onQueryChange(null)
-          if (onBlur) onBlur(event)
-        }
-      }, 0)
-    },
-    [onBlur, onQueryChange, relatedElements],
-  )
+      if (focusInside === false) {
+        dispatch({type: 'root/blur'})
+        popoverMouseWithinRef.current = false
+        if (onQueryChange) onQueryChange(null)
+        if (onBlur) onBlur(event)
+      }
+    }, 0)
+  }
 
-  const handleRootFocus = useCallback((event: FocusEvent<HTMLDivElement>) => {
+  const handleRootFocus = (event: FocusEvent<HTMLDivElement>) => {
     const listBoxElement = listBoxElementRef.current
     const focusedElement = event.target instanceof HTMLElement ? event.target : null
     const listFocused = listBoxElement?.contains(focusedElement) || false
@@ -260,7 +257,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
       dispatch({type: 'root/setListFocused', listFocused})
     }
-  }, [])
+  }
 
   const handleOptionSelect = useCallback(
     (v: string) => {

package/src/core/components/dialog/dialog.tsx

@@ -316,13 +316,15 @@ export const Dialog = forwardRef(function Dialog(
     onFocus,
     padding: paddingProp = 3,
     portal: portalProp,
-    position: positionProp = dialog.position || 'fixed',
+    position: _position,
     scheme,
     width: widthProp = 0,
-    zOffset: zOffsetProp = dialog.zOffset || layer.dialog.zOffset,
+    zOffset: _zOffset,
     animate: _animate = false,
     ...restProps
   } = props
+  const positionProp = _position ?? (dialog.position || 'fixed')
+  const zOffsetProp = _zOffset ?? (dialog.zOffset || layer.dialog.zOffset)
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
   const portal = usePortal()

package/src/core/components/menu/menu.tsx

@@ -57,10 +57,12 @@ export const Menu = forwardRef(function Menu(
     originElement,
     padding = 1,
     registerElement,
-    shouldFocus = (props.focusFirst && 'first') || (props.focusLast && 'last') || null,
+    shouldFocus: _shouldFocus,
     space = 1,
     ...restProps
   } = props
+  const shouldFocus =
+    _shouldFocus ?? ((props.focusFirst && 'first') || (props.focusLast && 'last') || null)
 
   const ref = useRef<HTMLDivElement | null>(null)
 

package/src/core/components/menu/menuGroup.tsx

@@ -53,9 +53,10 @@ export function MenuGroup(
     onClickOutside,
     onEscape,
     onItemClick,
-    onItemMouseEnter = menu.onMouseEnter,
+    onItemMouseEnter: _onItemMouseEnter,
     registerElement,
   } = menu
+  const onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter
   const [rootElement, setRootElement] = useState<HTMLButtonElement | HTMLDivElement | null>(null)
   const [open, setOpen] = useState(false)
   const shouldFocusRef = useRef<'first' | 'last' | null>(null)

package/src/core/components/menu/menuItem.tsx

@@ -72,9 +72,11 @@ export const MenuItem = forwardRef(function MenuItem(
     activeElement,
     mount,
     onItemClick,
-    onItemMouseEnter = menu.onMouseEnter,
-    onItemMouseLeave = menu.onMouseLeave,
+    onItemMouseEnter: _onItemMouseEnter,
+    onItemMouseLeave: _onItemMouseLeave,
   } = menu
+  const onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter
+  const onItemMouseLeave = _onItemMouseLeave ?? menu.onMouseLeave
   const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
   const active = Boolean(activeElement) && activeElement === rootElement
   const ref = useRef<HTMLDivElement | null>(null)

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

@@ -45,8 +45,6 @@ const ToastContainer = styled.div`
   width: 100%;
 `
 
-let toastId = 0
-
 /**
  * @public
  */
@@ -57,27 +55,7 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
   const mounted = useMounted()
   const prefersReducedMotion = usePrefersReducedMotion()
   const variants = useMemo<Variants>(
-    () => ({
-      initial: {
-        opacity: 0,
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: 0,
-        y: 32,
-        scale: 0.25,
-        willChange: 'transform',
-      },
-      animate: {
-        opacity: [0, 1, 1],
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [0, 0, 1],
-        y: 0,
-        scale: 1,
-      },
-      exit: {
-        opacity: [1, 1, 0],
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [1, 0, 0],
-        scale: 0.5,
-        transition: prefersReducedMotion ? {duration: 0} : {duration: 0.2},
-      },
-    }),
+    () => getVariants(prefersReducedMotion),
     [prefersReducedMotion],
   )
 
@@ -86,7 +64,7 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
       // 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 || String(toastId++)
+      const id = params.id || crypto.randomUUID()
       const duration = params.duration || 5000
 
       const dismiss = () => {
@@ -188,3 +166,27 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
     </ToastContext.Provider>
   )
 }
+
+function getVariants(prefersReducedMotion: boolean) {
+  return {
+    initial: {
+      opacity: 0,
+      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: 0,
+      y: 32,
+      scale: 0.25,
+      willChange: 'transform',
+    },
+    animate: {
+      opacity: [0, 1, 1],
+      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [0, 0, 1],
+      y: 0,
+      scale: 1,
+    },
+    exit: {
+      opacity: [1, 1, 0],
+      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [1, 0, 0],
+      scale: 0.5,
+      transition: {duration: prefersReducedMotion ? 0 : 0.2},
+    },
+  }
+}

package/src/core/components/tree/treeItem.styles.ts

@@ -0,0 +1,21 @@
+import {memo} from 'react'
+import {styled} from 'styled-components'
+import {Box, Text} from '../../primitives'
+import {
+  treeItemRootStyle,
+  treeItemRootColorStyle,
+  treeItemBoxStyle,
+  TreeItemBoxStyleProps,
+} from './style'
+
+export const Root = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle))
+
+export const TreeItemBox = styled(Box).attrs({forwardedAs: 'a'})<TreeItemBoxStyleProps>(
+  treeItemBoxStyle,
+)
+
+export const ToggleArrowText = styled(Text)`
+  & > svg {
+    transition: transform 100ms;
+  }
+`

package/src/core/components/tree/treeItem.tsx

@@ -1,16 +1,10 @@
 import {ToggleArrowRightIcon} from '@sanity/icons'
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {memo, useCallback, useEffect, useId, useMemo, useRef} from 'react'
-import {styled} from 'styled-components'
 import {Box, BoxProps, Flex, Text} from '../../primitives'
-import {
-  treeItemRootStyle,
-  treeItemRootColorStyle,
-  treeItemBoxStyle,
-  TreeItemBoxStyleProps,
-} from './style'
 import {TreeContext} from './treeContext'
 import {TreeGroup} from './treeGroup'
+import {Root, ToggleArrowText, TreeItemBox} from './treeItem.styles'
 import {useTree} from './useTree'
 
 /**
@@ -30,16 +24,6 @@ export interface TreeItemProps {
   weight?: ThemeFontWeightKey
 }
 
-const Root = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle))
-
-const TreeItemBox = styled(Box).attrs({forwardedAs: 'a'})<TreeItemBoxStyleProps>(treeItemBoxStyle)
-
-const ToggleArrowText = styled(Text)`
-  & > svg {
-    transition: transform 100ms;
-  }
-`
-
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
@@ -70,7 +54,7 @@ export const TreeItem = memo(function TreeItem(
   const {path, registerItem, setExpanded, setFocusedElement} = tree
   const _id = useId()
   const id = idProp || _id
-  const itemPath = useMemo(() => path.concat([id || '']), [id, path])
+  const itemPath = useMemo(() => [...path, id || ''], [id, path])
   const itemKey = itemPath.join('/')
   const itemState = tree.state[itemKey]
   const focused = tree.focusedElement === rootRef.current
@@ -83,7 +67,7 @@ export const TreeItem = memo(function TreeItem(
 
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLLIElement>) => {
-      if (onClick) onClick(event)
+      onClick?.(event)
 
       const target = event.target
 
@@ -117,32 +101,35 @@ export const TreeItem = memo(function TreeItem(
     return registerItem(rootRef.current, itemPath.join('/'), expanded, selected)
   }, [expanded, itemPath, registerItem, selected])
 
-  const content = (
-    <Flex padding={padding}>
-      <Box
-        marginRight={space}
-        style={{
-          visibility: IconComponent || children ? 'visible' : 'hidden',
-          pointerEvents: 'none',
-        }}
-      >
-        {IconComponent && (
-          <Text muted={muted} size={fontSize} weight={weight}>
-            <IconComponent />
+  const content = useMemo(
+    () => (
+      <Flex padding={padding}>
+        <Box
+          marginRight={space}
+          style={{
+            visibility: IconComponent || children ? 'visible' : 'hidden',
+            pointerEvents: 'none',
+          }}
+        >
+          {IconComponent && (
+            <Text muted={muted} size={fontSize} weight={weight}>
+              <IconComponent />
+            </Text>
+          )}
+          {!IconComponent && (
+            <ToggleArrowText muted={muted} size={fontSize} weight={weight}>
+              <ToggleArrowRightIcon style={{transform: expanded ? 'rotate(90deg)' : undefined}} />
+            </ToggleArrowText>
+          )}
+        </Box>
+        <Box flex={1}>
+          <Text muted={muted} size={fontSize} textOverflow="ellipsis" weight={weight}>
+            {text}
           </Text>
-        )}
-        {!IconComponent && (
-          <ToggleArrowText muted={muted} size={fontSize} weight={weight}>
-            <ToggleArrowRightIcon style={{transform: expanded ? 'rotate(90deg)' : undefined}} />
-          </ToggleArrowText>
-        )}
-      </Box>
-      <Box flex={1}>
-        <Text muted={muted} size={fontSize} textOverflow="ellipsis" weight={weight}>
-          {text}
-        </Text>
-      </Box>
-    </Flex>
+        </Box>
+      </Flex>
+    ),
+    [IconComponent, children, expanded, fontSize, muted, padding, space, text, weight],
   )
 
   if (href) {

package/src/core/primitives/avatar/avatar.tsx

@@ -1,5 +1,5 @@
 import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
-import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react'
+import {forwardRef, useCallback, useEffect, useId, useState} from 'react'
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
 import {_getArrayProp} from '../../styles'
@@ -74,7 +74,7 @@ export const Avatar = forwardRef(function Avatar(
   } = props
   const {avatar} = useTheme_v2()
   const as = isValidElementType(asProp) ? asProp : 'div'
-  const size = useMemo(() => _getArrayProp(sizeProp), [sizeProp])
+  const size = _getArrayProp(sizeProp)
 
   // @todo: remove this
   const avatarSize = avatar.sizes[size[0]] || avatar.sizes[0]
@@ -111,17 +111,13 @@ export const Avatar = forwardRef(function Avatar(
     }
   }, [onImageLoadError])
 
-  const initialsSize = useMemo(
-    () =>
-      size.map((s) => {
-        if (s === 1) return 1
-        if (s === 2) return 3
-        if (s === 3) return 5
+  const initialsSize = size.map((s) => {
+    if (s === 1) return 1
+    if (s === 2) return 3
+    if (s === 3) return 5
 
-        return 0
-      }),
-    [size],
-  )
+    return 0
+  })
 
   return (
     <Root

package/src/core/primitives/avatar/avatarCounter.tsx

@@ -1,5 +1,5 @@
 import {getTheme_v2} from '@sanity/ui/theme'
-import {forwardRef, useMemo} from 'react'
+import {forwardRef} from 'react'
 import {styled, css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {rem, _responsive, ThemeProps, _getArrayProp} from '../../styles'
@@ -66,23 +66,18 @@ export const AvatarCounter = forwardRef(function AvatarCounter(
   props: AvatarCounterProps,
   ref: React.Ref<HTMLDivElement>,
 ) {
-  const {count, size: sizeProp = 1} = props
-  const size = useMemo(() => _getArrayProp(sizeProp), [sizeProp])
+  const {count, size} = props
+  const $size = _getArrayProp(size ?? 1)
+  const fontSize = $size.map((s) => {
+    if (s === 1) return 1
+    if (s === 2) return 3
+    if (s === 3) return 5
 
-  const fontSize = useMemo(
-    () =>
-      size.map((s) => {
-        if (s === 1) return 1
-        if (s === 2) return 3
-        if (s === 3) return 5
-
-        return 0
-      }),
-    [size],
-  )
+    return 0
+  })
 
   return (
-    <Root $size={size} data-ui="AvatarCounter" ref={ref}>
+    <Root $size={$size} data-ui="AvatarCounter" ref={ref}>
       <Label as="span" size={fontSize} weight="medium">
         {count}
       </Label>

package/src/core/primitives/avatar/avatarStack.tsx

@@ -64,10 +64,7 @@ export const AvatarStack = forwardRef(function AvatarStack(
     size: sizeProp = 1,
     ...restProps
   } = props
-  const children = useMemo<React.ReactElement[]>(
-    () => Children.toArray(childrenProp).filter(isValidElement),
-    [childrenProp],
-  )
+  const children: React.ReactElement[] = Children.toArray(childrenProp).filter(isValidElement)
   const maxLength = Math.max(maxLengthProp, 0)
   const size = useMemo(() => _getArrayProp(sizeProp), [sizeProp])
 

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

@@ -14,7 +14,6 @@ import {AnimatePresence} from 'framer-motion'
 import {
   MutableRefObject,
   RefCallback,
-  cloneElement,
   forwardRef,
   memo,
   useCallback,
@@ -66,6 +65,7 @@ export interface PopoverProps
   arrow?: boolean
   /** @deprecated Use `floatingBoundary` and/or `referenceBoundary` instead */
   boundaryElement?: HTMLElement | null
+  /** @deprecated Use `referenceElement` instead */
   children?: React.ReactElement
   /**
    * When `true`, prevent overflow within the current boundary:
@@ -132,15 +132,14 @@ export const Popover = memo(
       __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
       animate: _animate = false,
       arrow: arrowProp = false,
-      boundaryElement = boundaryElementContext.element,
-      children: childProp,
+      boundaryElement: _boundaryElement,
+      children,
       constrainSize = false,
       content,
       disabled,
-      fallbackPlacements = props.fallbackPlacements ??
-        DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
+      fallbackPlacements: _fallbackPlacements,
       matchReferenceWidth,
-      floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
+      floatingBoundary: _floatingBoundary,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onActivate,
       open,
@@ -150,23 +149,31 @@ export const Popover = memo(
       portal,
       preventOverflow = true,
       radius: radiusProp = 3,
-      referenceBoundary = props.boundaryElement ?? boundaryElementContext.element,
+      referenceBoundary: _referenceBoundary,
       referenceElement,
       scheme,
       shadow: shadowProp = 3,
       tone = 'inherit',
       width: widthProp = 'auto',
-      zOffset: zOffsetProp = layer.popover.zOffset,
+      zOffset: _zOffset,
       updateRef,
       ...restProps
     } = props
+    const boundaryElement = _boundaryElement ?? boundaryElementContext.element
+    const referenceBoundary =
+      _referenceBoundary ?? props.boundaryElement ?? boundaryElementContext.element
+    const floatingBoundary =
+      _floatingBoundary ?? props.boundaryElement ?? boundaryElementContext.element
+    const fallbackPlacements =
+      _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom']
+    const zOffsetProp = _zOffset ?? layer.popover.zOffset
     const prefersReducedMotion = usePrefersReducedMotion()
     const animate = prefersReducedMotion ? false : _animate
     const boundarySize = useElementSize(boundaryElement)?.border
     const padding = useMemo(() => _getArrayProp(paddingProp), [paddingProp])
     const radius = useMemo(() => _getArrayProp(radiusProp), [radiusProp])
     const shadow = useMemo(() => _getArrayProp(shadowProp), [shadowProp])
-    const widthArrayProp = useMemo(() => _getArrayProp(widthProp), [widthProp])
+    const widthArrayProp = _getArrayProp(widthProp)
     const zOffset = useMemo(() => _getArrayProp(zOffsetProp), [zOffsetProp])
     const ref = useRef<HTMLDivElement | null>(null)
     const arrowRef = useRef<HTMLDivElement | null>(null)
@@ -356,45 +363,15 @@ export const Popover = memo(
       [refs],
     )
 
-    const setReference = useCallback(
-      (node: HTMLElement | null) => {
-        refs.setReference(node)
-
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const childRef = (childProp as any)?.ref
-
-        if (typeof childRef === 'function') {
-          childRef(node)
-        } else if (childRef) {
-          childRef.current = node
-        }
-      },
-      [childProp, refs],
-    )
-
-    const child = useMemo(() => {
-      if (!childProp || referenceElement) return null
-
-      return cloneElement(childProp, {ref: setReference})
-    }, [childProp, referenceElement, setReference])
+    useImperativeHandle(updateRef, () => update, [update])
 
     useEffect(() => {
-      if (updateRef) {
-        if (typeof updateRef === 'function') {
-          updateRef(update)
-        } else if (updateRef) {
-          updateRef.current = update
-        }
-      }
-    }, [update, updateRef])
-
-    useEffect(() => {
-      if (child) return
+      if (children) return
       refs.setReference(referenceElement || null)
-    }, [referenceElement, refs, child])
+    }, [children, referenceElement, refs])
 
     if (disabled) {
-      return childProp || <></>
+      return children || <></>
     }
 
     const popover = (
@@ -450,10 +427,30 @@ export const Popover = memo(
         </ConditionalWrapper>
 
         {/* the referred element */}
-        {child}
+        {children && !referenceElement && (
+          <div
+            ref={(node) => {
+              logDeprecatedWarning()
+              refs.setReference(node)
+            }}
+            style={{display: 'contents'}}
+          >
+            {children}
+          </div>
+        )}
       </>
     )
   }),
 )
 
 Popover.displayName = 'Popover'
+
+let didWarn = false
+
+function logDeprecatedWarning() {
+  if (!didWarn) {
+    // eslint-disable-next-line no-console
+    console.warn('Popover: Please use the `referenceElement` prop instead of passing a children.')
+    didWarn = true
+  }
+}

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

@@ -105,22 +105,25 @@ export const Tooltip = forwardRef(function Tooltip(
   const {
     animate: _animate = false,
     arrow: arrowProp = false,
-    boundaryElement = boundaryElementContext?.element,
+    boundaryElement: _boundaryElement,
     children: childProp,
     content,
     disabled,
-    fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ??
-      DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
+    fallbackPlacements: _fallbackPlacements,
     padding = 2,
     placement: placementProp = 'bottom',
     portal: portalProp,
     radius = 2,
     scheme,
     shadow = 2,
-    zOffset = layer.tooltip.zOffset,
+    zOffset: _zOffset,
     delay,
     ...restProps
   } = props
+  const zOffset = _zOffset ?? layer.tooltip.zOffset
+  const fallbackPlacementsProp =
+    _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom']
+  const boundaryElement = _boundaryElement ?? boundaryElementContext?.element
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
   const fallbackPlacements = useMemo(
@@ -295,7 +298,7 @@ export const Tooltip = forwardRef(function Tooltip(
   useEffect(() => {
     if (!showTooltip) return
 
-    function handleWindowMouseMove(event: MouseEvent) {
+    const handleWindowMouseMove = (event: MouseEvent) => {
       if (!referenceElement) return
 
       const isHoveringReference =