@sanity/ui 2.8.5 → 2.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.8.5",
+  "version": "2.8.6",
   "keywords": [
     "sanity",
     "ui",
@@ -121,7 +121,7 @@
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^6.10.4",
+    "@sanity/pkg-utils": "^6.10.6",
     "@sanity/prettier-config": "^1.0.2",
     "@sanity/semantic-release-preset": "^5.0.0",
     "@sanity/ui-workshop": "^2.0.15",

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

@@ -1,6 +1,6 @@
 import {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'react'
 import {styled} from 'styled-components'
-import {useClickOutside, useGlobalKeyDown} from '../../hooks'
+import {useClickOutsideEvent, useGlobalKeyDown} from '../../hooks'
 import {Box, Stack} from '../../primitives'
 import {ResponsivePaddingProps} from '../../primitives/types'
 import {useLayer} from '../../utils'
@@ -75,16 +75,29 @@ export const Menu = forwardRef(function Menu(
     handleItemMouseLeave,
     handleKeyDown,
     mount,
-    rootElement,
-    setRootElement,
-  } = useMenuController({onKeyDown, originElement, shouldFocus})
+  } = useMenuController({onKeyDown, originElement, shouldFocus, rootElementRef: ref})
 
+  const unregisterElementRef = useRef<(() => void) | null>(null)
   const handleRefChange = useCallback(
     (el: HTMLDivElement | null) => {
-      setRootElement(el)
+      // Run cleanup of previously registered elements
+      if (unregisterElementRef.current) {
+        // The `registerElement` callback were originally used in a `useEffect`, so it returns a cleanup function that is a bit gnarly to handle in a ref callback.
+        // Since we can't change the `registerElement` implementation itself without making breaking change,
+        // that is explained in the code comments for createGlobalScopedContext.tsx,
+        // we need to handle with a ref that holds on to the cleanup function last returned when the ref callback is called.
+        unregisterElementRef.current()
+        unregisterElementRef.current = null
+      }
+
       ref.current = el
+
+      // Register root element (for nested menus)
+      if (ref.current && registerElement) {
+        unregisterElementRef.current = registerElement(ref.current)
+      }
     },
-    [setRootElement],
+    [registerElement],
   )
 
   // Trigger `onItemSelect` when active index changes
@@ -93,13 +106,7 @@ export const Menu = forwardRef(function Menu(
   }, [activeIndex, onItemSelect])
 
   // Close menu when clicking outside
-  useClickOutside(
-    useCallback(
-      (event) => isTopLayer && onClickOutside && onClickOutside(event),
-      [isTopLayer, onClickOutside],
-    ),
-    [rootElement],
-  )
+  useClickOutsideEvent(isTopLayer && onClickOutside, () => [ref.current])
 
   // Close menu when pressing Escape
   useGlobalKeyDown(
@@ -116,13 +123,6 @@ export const Menu = forwardRef(function Menu(
     ),
   )
 
-  // Register root element (for nested menus)
-  useEffect(() => {
-    if (!rootElement || !registerElement) return
-
-    return registerElement(rootElement)
-  }, [registerElement, rootElement])
-
   const value: MenuContextValue = useMemo(
     () => ({
       version: 0.0,

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

@@ -196,11 +196,7 @@ export const MenuButton = forwardRef(function MenuButton(
   const registerElement = useCallback((el: HTMLElement) => {
     setChildMenuElements((els) => els.concat([el]))
 
-    return () => {
-      setChildMenuElements((els) => {
-        return els.filter((_el) => _el !== el)
-      })
-    }
+    return () => setChildMenuElements((els) => els.filter((_el) => _el !== el))
   }, [])
 
   const menuProps: MenuProps = useMemo(

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

@@ -1,5 +1,5 @@
 import {ChevronRightIcon} from '@sanity/icons'
-import {isValidElement, useCallback, useEffect, useRef, useState} from 'react'
+import {isValidElement, useCallback, useEffect, useState} from 'react'
 import {isValidElementType} from 'react-is'
 import {useArrayProp} from '../../hooks'
 import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
@@ -58,7 +58,7 @@ export function MenuGroup(
   } = menu
   const [rootElement, setRootElement] = useState<HTMLButtonElement | HTMLDivElement | null>(null)
   const [open, setOpen] = useState(false)
-  const shouldFocusRef = useRef<'first' | 'last' | null>(null)
+  const [shouldFocus, setShouldFocus] = useState<'first' | 'last' | null>(null)
   const active = Boolean(activeElement) && activeElement === rootElement
   const [withinMenu, setWithinMenu] = useState(false)
 
@@ -88,22 +88,17 @@ export function MenuGroup(
 
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLDivElement>) => {
-      if (onClick) onClick(event)
-
-      shouldFocusRef.current = 'first'
+      onClick?.(event)
 
+      setShouldFocus('first')
       setOpen(true)
-
-      requestAnimationFrame(() => {
-        shouldFocusRef.current = null
-      })
     },
     [onClick],
   )
 
   const handleChildItemClick = useCallback(() => {
     setOpen(false)
-    if (onItemClick) onItemClick()
+    onItemClick?.()
   }, [onItemClick])
 
   const handleMenuMouseEnter = useCallback(() => setWithinMenu(true), [])
@@ -121,6 +116,16 @@ export function MenuGroup(
     if (!open) setWithinMenu(false)
   }, [open])
 
+  // Reset the shouldFocus state after it has been used
+  useEffect(() => {
+    if (!shouldFocus) return
+    // The useMenuController effect that handles `shouldFocus` schedules a request animation frame where it's processed.
+    // By doing the same here, we ensure that the reset is processed after the focus change.
+    const rafId = requestAnimationFrame(() => setShouldFocus(null))
+
+    return () => cancelAnimationFrame(rafId)
+  }, [shouldFocus])
+
   const childMenu = (
     <Menu
       onClickOutside={onClickOutside}
@@ -129,7 +134,7 @@ export function MenuGroup(
       onKeyDown={handleMenuKeyDown}
       onMouseEnter={handleMenuMouseEnter}
       registerElement={registerElement}
-      shouldFocus={shouldFocusRef.current}
+      shouldFocus={shouldFocus}
     >
       {children}
     </Menu>
@@ -143,15 +148,10 @@ export function MenuGroup(
     }
 
     if (event.key === 'ArrowRight') {
-      shouldFocusRef.current = 'first'
-
+      setShouldFocus('first')
       setOpen(true)
       setWithinMenu(true)
 
-      requestAnimationFrame(() => {
-        shouldFocusRef.current = null
-      })
-
       return
     }
   }, [])

package/src/core/components/menu/useMenuController.ts

@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useRef, useState} from 'react'
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {_getFocusableElements, _sortElements} from './helpers'
 
 /**
@@ -11,8 +11,6 @@ export interface MenuController {
   handleItemMouseLeave: () => void
   handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void
   mount: (element: HTMLElement | null, selected?: boolean) => () => void
-  rootElement: HTMLDivElement | null
-  setRootElement: (el: HTMLDivElement | null) => void
 }
 
 /**
@@ -24,14 +22,14 @@ export function useMenuController(props: {
   onKeyDown?: React.KeyboardEventHandler
   originElement?: HTMLElement | null
   shouldFocus: 'first' | 'last' | null
+  rootElementRef: React.MutableRefObject<HTMLDivElement | null>
 }): MenuController {
-  const {onKeyDown, originElement, shouldFocus} = props
+  const {onKeyDown, originElement, shouldFocus, rootElementRef} = props
   const elementsRef = useRef<HTMLElement[]>([])
-  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
   const [activeIndex, _setActiveIndex] = useState(-1)
   const activeIndexRef = useRef(activeIndex)
-  const activeElement = elementsRef.current[activeIndex] || null
-  const mounted = Boolean(rootElement)
+  const activeElement = useMemo(() => elementsRef.current[activeIndex] || null, [activeIndex])
+  const mounted = Boolean(rootElementRef.current)
 
   const setActiveIndex = useCallback((nextActiveIndex: number) => {
     _setActiveIndex(nextActiveIndex)
@@ -44,7 +42,7 @@ export function useMenuController(props: {
 
       if (elementsRef.current.indexOf(element) === -1) {
         elementsRef.current.push(element)
-        _sortElements(rootElement, elementsRef.current)
+        _sortElements(rootElementRef.current, elementsRef.current)
       }
 
       if (selected) {
@@ -61,7 +59,7 @@ export function useMenuController(props: {
         }
       }
     },
-    [rootElement, setActiveIndex],
+    [rootElementRef, setActiveIndex],
   )
 
   const handleKeyDown = useCallback(
@@ -179,17 +177,15 @@ export function useMenuController(props: {
     // which would be incorrect when the user hovers over a gap
     // between two menu items or a menu divider.
     setActiveIndex(-2)
-    rootElement?.focus()
-  }, [setActiveIndex, rootElement])
+    rootElementRef.current?.focus()
+  }, [rootElementRef, setActiveIndex])
 
   // Set focus on the currently active element
   useEffect(() => {
     if (!mounted) return
 
-    const rafId = window.requestAnimationFrame(() => {
-      const _activeIndex = activeIndexRef.current
-
-      if (_activeIndex === -1) {
+    const rafId = requestAnimationFrame(() => {
+      if (activeIndex === -1) {
         if (shouldFocus === 'first') {
           const focusableElements = _getFocusableElements(elementsRef.current)
           const el = focusableElements[0]
@@ -198,7 +194,6 @@ export function useMenuController(props: {
             const currentIndex = elementsRef.current.indexOf(el)
 
             setActiveIndex(currentIndex)
-            activeIndexRef.current = currentIndex
           }
         }
 
@@ -210,21 +205,18 @@ export function useMenuController(props: {
             const currentIndex = elementsRef.current.indexOf(el)
 
             setActiveIndex(currentIndex)
-            activeIndexRef.current = currentIndex
           }
         }
 
         return
       }
 
-      const element = elementsRef.current[_activeIndex] || null
+      const element = elementsRef.current[activeIndex] || null
 
       element?.focus()
     })
 
-    return () => {
-      window.cancelAnimationFrame(rafId)
-    }
+    return () => cancelAnimationFrame(rafId)
   }, [activeIndex, mounted, setActiveIndex, shouldFocus])
 
   return {
@@ -234,7 +226,5 @@ export function useMenuController(props: {
     handleItemMouseLeave,
     handleKeyDown,
     mount,
-    rootElement,
-    setRootElement,
   }
 }

package/src/core/components/toast/styles.ts

@@ -14,7 +14,7 @@ const loadingAnimation = keyframes`
   }
   100% {
     width: 100%;
-  } 
+  }
 `
 
 const LOADING_BAR_HEIGHT = 2

package/src/core/hooks/useClickOutsideEvent.ts

@@ -35,15 +35,13 @@ export function useClickOutsideEvent(
       return
     }
 
-    const resolvedBoundaryElement =
-      typeof boundaryElement === 'function' ? boundaryElement() : boundaryElement
+    const resolvedBoundaryElement = boundaryElement?.()
 
     if (resolvedBoundaryElement && !resolvedBoundaryElement.contains(target)) {
       return
     }
 
-    const resolvedElements = Array.isArray(elementsArg) ? elementsArg : elementsArg()
-    const elements = resolvedElements.flat()
+    const elements = elementsArg().flat()
 
     for (const el of elements) {
       if (!el) continue