@sanity/ui 0.36.16 → 0.37.2

package/src/components/menu/menu.tsx

@@ -1,11 +1,11 @@
-import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import React, {forwardRef, useCallback, useEffect, useMemo} from 'react'
 import styled from 'styled-components'
-import {useClickOutside, useGlobalKeyDown} from '../../hooks'
+import {useClickOutside, useForwardedRef, useGlobalKeyDown} from '../../hooks'
 import {Box, Stack} from '../../primitives'
 import {ResponsivePaddingProps} from '../../primitives/types'
 import {useLayer} from '../../utils'
-import {_getFocusableElements, _sortElements} from './helpers'
 import {MenuContext, MenuContextValue} from './menuContext'
+import {useMenuController} from './useMenuController'
 
 /**
  * @public
@@ -39,7 +39,7 @@ const Root = styled(Box)`
  */
 export const Menu = forwardRef(function Menu(
   props: MenuProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'role' | 'tabIndex'>,
-  ref
+  ref: React.ForwardedRef<HTMLDivElement>
 ) {
   const {
     children,
@@ -60,221 +60,35 @@ export const Menu = forwardRef(function Menu(
     ...restProps
   } = props
 
+  const forwardedRef = useForwardedRef(ref)
+
   const {isTopLayer} = useLayer()
-  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
-  const elementsRef = useRef<HTMLElement[]>([])
-  const [activeIndex, setActiveIndex] = useState(-1)
-  const activeIndexRef = useRef(activeIndex)
-  const activeElement = elementsRef.current[activeIndex] || null
-  const activeElementRef = useRef<HTMLElement | null>(activeElement)
-  const mounted = Boolean(rootElement)
 
-  const setRef = useCallback(
+  const {
+    activeElement,
+    activeIndex,
+    handleItemMouseEnter,
+    handleItemMouseLeave,
+    handleKeyDown,
+    mount,
+    rootElement,
+    setRootElement,
+  } = useMenuController({onKeyDown, originElement, shouldFocus})
+
+  const handleRefChange = useCallback(
     (el: HTMLDivElement | null) => {
       setRootElement(el)
-      if (typeof ref === 'function') ref(el)
-      else if (ref) ref.current = el
+      forwardedRef.current = el
     },
-    [ref]
+    [forwardedRef, setRootElement]
   )
 
-  const mount = useCallback(
-    (element: HTMLElement | null, selected?: boolean): (() => void) => {
-      if (!element) return () => undefined
-
-      if (elementsRef.current.indexOf(element) === -1) {
-        elementsRef.current.push(element)
-        _sortElements(rootElement, elementsRef.current)
-      }
-
-      if (selected) {
-        const selectedIndex = elementsRef.current.indexOf(element)
-
-        setActiveIndex(selectedIndex)
-        activeIndexRef.current = selectedIndex
-      }
-
-      return () => {
-        const idx = elementsRef.current.indexOf(element)
-
-        if (idx > -1) {
-          elementsRef.current.splice(idx, 1)
-        }
-      }
-    },
-    [rootElement]
-  )
-
-  const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      // Move focus to the element that opened the menu before handling the `Tab` press
-      if (event.key === 'Tab') {
-        if (originElement) {
-          originElement.focus()
-        }
-
-        return
-      }
-
-      // Move focus to the first focusable menuitem
-      if (event.key === 'Home') {
-        event.preventDefault()
-        event.stopPropagation()
-
-        const focusableElements = _getFocusableElements(elementsRef.current)
-        const el = focusableElements[0]
-
-        if (!el) return
-
-        const currentIndex = elementsRef.current.indexOf(el)
-
-        setActiveIndex(currentIndex)
-        activeIndexRef.current = currentIndex
-
-        return
-      }
-
-      // Move focus to the last focusable menuitem
-      if (event.key === 'End') {
-        event.preventDefault()
-        event.stopPropagation()
-
-        const focusableElements = _getFocusableElements(elementsRef.current)
-        const el = focusableElements[focusableElements.length - 1]
-
-        if (!el) return
-
-        const currentIndex = elementsRef.current.indexOf(el)
-
-        setActiveIndex(currentIndex)
-        activeIndexRef.current = currentIndex
-
-        return
-      }
-
-      if (event.key === 'ArrowUp') {
-        event.preventDefault()
-        event.stopPropagation()
-
-        const focusableElements = _getFocusableElements(elementsRef.current)
-        const focusableLen = focusableElements.length
-
-        if (focusableLen === 0) return
-
-        const focusedElement = elementsRef.current[activeIndex]
-
-        let focusedIndex = focusableElements.indexOf(focusedElement)
-
-        focusedIndex = (focusedIndex - 1 + focusableLen) % focusableLen
-
-        const el = focusableElements[focusedIndex]
-        const currentIndex = elementsRef.current.indexOf(el)
-
-        setActiveIndex(currentIndex)
-        activeIndexRef.current = currentIndex
-
-        return
-      }
-
-      if (event.key === 'ArrowDown') {
-        event.preventDefault()
-        event.stopPropagation()
-
-        const focusableElements = _getFocusableElements(elementsRef.current)
-        const focusableLen = focusableElements.length
-
-        if (focusableLen === 0) return
-
-        const focusedElement = elementsRef.current[activeIndex]
-
-        let focusedIndex = focusableElements.indexOf(focusedElement)
-
-        focusedIndex = (focusedIndex + 1) % focusableLen
-
-        const el = focusableElements[focusedIndex]
-        const currentIndex = elementsRef.current.indexOf(el)
-
-        setActiveIndex(currentIndex)
-        activeIndexRef.current = currentIndex
-
-        return
-      }
-
-      if (onKeyDown) {
-        onKeyDown(event)
-      }
-    },
-    [activeIndex, onKeyDown, originElement]
-  )
-
-  const handleItemMouseEnter = useCallback((event: React.MouseEvent<HTMLElement>) => {
-    const element = event.currentTarget
-    const currentIndex = elementsRef.current.indexOf(element)
-
-    setActiveIndex(currentIndex)
-    activeIndexRef.current = currentIndex
-  }, [])
-
-  const handleItemMouseLeave = useCallback(() => {
-    rootElement?.focus()
-    setActiveIndex(-1)
-    activeIndexRef.current = -1
-  }, [rootElement])
-
   // Trigger `onItemSelect` when active index changes
   useEffect(() => {
     if (onItemSelect) onItemSelect(activeIndex)
   }, [activeIndex, onItemSelect])
 
-  useEffect(() => {
-    activeElementRef.current = activeElement
-  }, [activeElement])
-
-  // Set focus on the currently active element
-  useEffect(() => {
-    if (!mounted) return
-
-    const rafId = window.requestAnimationFrame(() => {
-      const _activeIndex = activeIndexRef.current
-
-      if (_activeIndex === -1) {
-        if (shouldFocus === 'first') {
-          const focusableElements = _getFocusableElements(elementsRef.current)
-          const el = focusableElements[0]
-
-          if (el) {
-            const currentIndex = elementsRef.current.indexOf(el)
-
-            setActiveIndex(currentIndex)
-            activeIndexRef.current = currentIndex
-          }
-        }
-
-        if (shouldFocus === 'last') {
-          const focusableElements = _getFocusableElements(elementsRef.current)
-          const el = focusableElements[focusableElements.length - 1]
-
-          if (el) {
-            const currentIndex = elementsRef.current.indexOf(el)
-
-            setActiveIndex(currentIndex)
-            activeIndexRef.current = currentIndex
-          }
-        }
-
-        return
-      }
-
-      const element = elementsRef.current[_activeIndex] || null
-
-      element?.focus()
-    })
-
-    return () => {
-      window.cancelAnimationFrame(rafId)
-    }
-  }, [activeIndex, mounted, shouldFocus])
-
+  // Close menu when clicking outside
   useClickOutside(
     useCallback(
       (event) => isTopLayer && onClickOutside && onClickOutside(event),
@@ -283,6 +97,7 @@ export const Menu = forwardRef(function Menu(
     [rootElement]
   )
 
+  // Close menu when pressing Escape
   useGlobalKeyDown(
     useCallback(
       (event) => {
@@ -297,6 +112,7 @@ export const Menu = forwardRef(function Menu(
     )
   )
 
+  // Register root element (for nested menus)
   useEffect(() => {
     if (!rootElement || !registerElement) return
 
@@ -311,10 +127,14 @@ export const Menu = forwardRef(function Menu(
       mount,
       onClickOutside,
       onEscape,
-      onMouseEnter: handleItemMouseEnter,
-      onMouseLeave: handleItemMouseLeave,
       onItemClick,
+      onItemMouseEnter: handleItemMouseEnter,
+      onItemMouseLeave: handleItemMouseLeave,
       registerElement,
+
+      // deprecated
+      onMouseEnter: handleItemMouseEnter,
+      onMouseLeave: handleItemMouseLeave,
     }),
     [
       activeElement,
@@ -336,7 +156,7 @@ export const Menu = forwardRef(function Menu(
         {...restProps}
         onKeyDown={handleKeyDown}
         padding={padding}
-        ref={setRef}
+        ref={handleRefChange}
         role="menu"
         tabIndex={-1}
       >

package/src/components/menu/menuContext.ts

@@ -9,9 +9,19 @@ export interface MenuContextValue {
   onClickOutside?: (event: MouseEvent) => void
   onEscape?: () => void
   onItemClick?: () => void
+  onItemMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void
+  onItemMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void
+  registerElement?: (el: HTMLElement) => () => void
+
+  /**
+   * @deprecated Use `onItemMouseEnter` instead
+   */
   onMouseEnter: (event: React.MouseEvent<HTMLElement>) => void
+
+  /**
+   * @deprecated Use `onItemMouseLeave` instead
+   */
   onMouseLeave: (event: React.MouseEvent<HTMLElement>) => void
-  registerElement?: (el: HTMLElement) => () => void
 }
 
 const key = Symbol.for('@sanity/ui/context/menu')

package/src/components/menu/menuGroup.tsx

@@ -1,7 +1,7 @@
 import {ChevronRightIcon} from '@sanity/icons'
-import React, {useCallback, useEffect, useRef, useState} from 'react'
-import styled from 'styled-components'
-import {Box, Popover, PopoverProps, Text} from '../../primitives'
+import React, {createElement, isValidElement, useCallback, useEffect, useRef, useState} from 'react'
+import {isValidElementType} from 'react-is'
+import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
 import {SelectableTone} from '../../types/selectable'
 import {Menu} from './menu'
@@ -13,26 +13,15 @@ import {useMenu} from './useMenu'
 export interface MenuGroupProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
   fontSize?: number | number[]
+  icon?: React.ComponentType | React.ReactNode
   padding?: number | number[]
   popover?: Omit<PopoverProps, 'content' | 'open'>
   radius?: number | number[]
+  space?: number | number[]
   text: React.ReactNode
   tone?: SelectableTone
 }
 
-const MOUSE_LEAVE_TIMEOUT = 1000
-
-const TextContainer = styled.span`
-  &:not([hidden]) {
-    display: flex;
-  }
-
-  & > div:first-child {
-    flex: 1;
-    min-width: 0;
-  }
-`
-
 /**
  * @public
  */
@@ -44,56 +33,39 @@ export function MenuGroup(
     as = 'button',
     children,
     fontSize,
+    icon,
     onClick,
     padding = 3,
     popover = {},
     radius = 2,
+    space = 3,
     text,
     tone = 'default',
     ...restProps
   } = props
-  const [open, setOpen] = useState(false)
+  const menu = useMenu()
   const {
     activeElement,
     mount,
     onClickOutside,
     onEscape,
     onItemClick,
-    onMouseEnter,
-    onMouseLeave,
+    onItemMouseEnter = menu.onMouseEnter,
     registerElement,
-  } = useMenu()
+  } = menu
   const [rootElement, setRootElement] = useState<HTMLButtonElement | null>(null)
-  const mouseLeaveTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const [open, setOpen] = useState(false)
   const shouldFocusRef = useRef<'first' | 'last' | null>(null)
   const active = Boolean(activeElement) && activeElement === rootElement
-  // const selected = active || open
-
-  // Register the element
-  useEffect(() => mount(rootElement), [mount, rootElement])
+  const [withinMenu, setWithinMenu] = useState(false)
 
   const handleMouseEnter = useCallback(
     (event: React.MouseEvent<HTMLElement>) => {
-      if (mouseLeaveTimeoutRef.current) {
-        clearTimeout(mouseLeaveTimeoutRef.current)
-        mouseLeaveTimeoutRef.current = null
-      }
-
-      onMouseEnter(event)
+      setWithinMenu(false)
+      onItemMouseEnter(event)
       setOpen(true)
     },
-    [onMouseEnter]
-  )
-
-  const handleMouseLeave = useCallback(
-    (event: React.MouseEvent<HTMLElement>) => {
-      onMouseLeave(event)
-
-      mouseLeaveTimeoutRef.current = setTimeout(() => {
-        setOpen(false)
-      }, MOUSE_LEAVE_TIMEOUT)
-    },
-    [onMouseLeave]
+    [onItemMouseEnter]
   )
 
   const handleMenuKeyDown = useCallback(
@@ -111,19 +83,6 @@ export function MenuGroup(
     [rootElement]
   )
 
-  const handleMenuMouseEnter = useCallback(() => {
-    if (mouseLeaveTimeoutRef.current) {
-      clearTimeout(mouseLeaveTimeoutRef.current)
-      mouseLeaveTimeoutRef.current = null
-    }
-  }, [])
-
-  const handleMenuMouseLeave = useCallback(() => {
-    mouseLeaveTimeoutRef.current = setTimeout(() => {
-      setOpen(false)
-    }, MOUSE_LEAVE_TIMEOUT)
-  }, [])
-
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLDivElement>) => {
       if (onClick) onClick(event)
@@ -139,28 +98,33 @@ export function MenuGroup(
     [onClick]
   )
 
-  const handleItemClick = useCallback(() => {
+  const handleChildItemClick = useCallback(() => {
     setOpen(false)
     if (onItemClick) onItemClick()
   }, [onItemClick])
 
+  const handleMenuMouseEnter = useCallback(() => setWithinMenu(true), [])
+
+  // Register the menu item element
+  useEffect(() => mount(rootElement), [mount, rootElement])
+
+  // Close child menu when a sibling item becomes active
   useEffect(() => {
-    return () => {
-      if (mouseLeaveTimeoutRef.current !== null) {
-        clearTimeout(mouseLeaveTimeoutRef.current)
-        mouseLeaveTimeoutRef.current = null
-      }
-    }
-  }, [])
+    if (!active) setOpen(false)
+  }, [active])
+
+  // Update state when child menu is no longer open
+  useEffect(() => {
+    if (!open) setWithinMenu(false)
+  }, [open])
 
-  const content = (
+  const childMenu = (
     <Menu
       onClickOutside={onClickOutside}
       onEscape={onEscape}
-      onItemClick={handleItemClick}
+      onItemClick={handleChildItemClick}
       onKeyDown={handleMenuKeyDown}
       onMouseEnter={handleMenuMouseEnter}
-      onMouseLeave={handleMenuMouseLeave}
       registerElement={registerElement}
       shouldFocus={shouldFocusRef.current}
     >
@@ -179,6 +143,7 @@ export function MenuGroup(
       shouldFocusRef.current = 'first'
 
       setOpen(true)
+      setWithinMenu(true)
 
       requestAnimationFrame(() => {
         shouldFocusRef.current = null
@@ -189,32 +154,45 @@ export function MenuGroup(
   }, [])
 
   return (
-    <Popover {...popover} content={content} data-ui="MenuGroup__popover" open={open}>
+    <Popover {...popover} content={childMenu} data-ui="MenuGroup__popover" open={open}>
       <Selectable
         data-as={as}
         data-ui="MenuGroup"
         forwardedAs={as}
         {...restProps}
-        aria-pressed={as === 'button' ? !active && open : undefined}
-        data-pressed={as !== 'button' ? !active && open : undefined}
-        data-selected={active ? '' : undefined}
+        aria-pressed={as === 'button' ? withinMenu : undefined}
+        data-pressed={as !== 'button' ? withinMenu : undefined}
+        data-selected={!withinMenu && active ? '' : undefined}
         $radius={radius}
         $tone={tone}
         onClick={handleClick}
         onKeyDown={handleKeyDown}
         onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
         ref={setRootElement}
         tabIndex={-1}
         type={as === 'button' ? 'button' : undefined}
       >
         <Box padding={padding}>
-          <TextContainer>
-            <Text size={fontSize}>{text}</Text>
-            <Text size={fontSize}>
-              <ChevronRightIcon />
-            </Text>
-          </TextContainer>
+          <Flex>
+            {icon && (
+              <Text size={fontSize}>
+                {isValidElement(icon) && icon}
+                {isValidElementType(icon) && createElement(icon)}
+              </Text>
+            )}
+
+            <Box flex={1} marginLeft={icon ? space : undefined}>
+              <Text size={fontSize} textOverflow="ellipsis">
+                {text}
+              </Text>
+            </Box>
+
+            <Box marginLeft={space}>
+              <Text size={fontSize}>
+                <ChevronRightIcon />
+              </Text>
+            </Box>
+          </Flex>
         </Box>
       </Selectable>
     </Popover>

package/src/components/menu/menuItem.tsx

@@ -64,9 +64,16 @@ export const MenuItem = forwardRef(function MenuItem(
     tone = 'default',
     ...restProps
   } = props
-  const {activeElement, mount, onItemClick, onMouseEnter, onMouseLeave} = useMenu()
+  const menu = useMenu()
+  const {
+    activeElement,
+    mount,
+    onItemClick,
+    onItemMouseEnter = menu.onMouseEnter,
+    onItemMouseLeave = menu.onMouseLeave,
+  } = menu
   const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
-  const selected = Boolean(activeElement) && rootElement === activeElement
+  const active = Boolean(activeElement) && activeElement === rootElement
 
   useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp])
 
@@ -110,14 +117,14 @@ export const MenuItem = forwardRef(function MenuItem(
       {...restProps}
       aria-pressed={as === 'button' && pressed}
       data-pressed={as !== 'button' && pressed ? '' : undefined}
-      data-selected={selected ? '' : undefined}
+      data-selected={active ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
       $radius={radius}
       $tone={tone}
       disabled={disabled}
       onClick={handleClick}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
+      onMouseEnter={onItemMouseEnter}
+      onMouseLeave={onItemMouseLeave}
       padding={0}
       ref={setRef}
       role="menuitem"