@sanity/ui 0.36.17 → 0.37.0

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,38 @@ 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 {
     activeElement,
     mount,
     onClickOutside,
     onEscape,
     onItemClick,
-    onMouseEnter,
-    onMouseLeave,
+    onItemMouseEnter,
     registerElement,
   } = useMenu()
   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 +82,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 +97,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 +142,7 @@ export function MenuGroup(
       shouldFocusRef.current = 'first'
 
       setOpen(true)
+      setWithinMenu(true)
 
       requestAnimationFrame(() => {
         shouldFocusRef.current = null
@@ -189,32 +153,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,9 @@ export const MenuItem = forwardRef(function MenuItem(
     tone = 'default',
     ...restProps
   } = props
-  const {activeElement, mount, onItemClick, onMouseEnter, onMouseLeave} = useMenu()
+  const {activeElement, mount, onItemClick, onItemMouseEnter, onItemMouseLeave} = useMenu()
   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 +110,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"

package/src/components/menu/useMenuController.ts

@@ -0,0 +1,239 @@
+import {useCallback, useEffect, useRef, useState} from 'react'
+import {_getFocusableElements, _sortElements} from './helpers'
+
+/**
+ * @internal
+ */
+export interface MenuController {
+  activeElement: HTMLElement | null
+  activeIndex: number
+  handleItemMouseEnter: (event: React.MouseEvent<HTMLElement>) => void
+  handleItemMouseLeave: () => void
+  handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void
+  mount: (element: HTMLElement | null, selected?: boolean) => () => void
+  rootElement: HTMLDivElement | null
+  setRootElement: (el: HTMLDivElement | null) => void
+}
+
+/**
+ * This controller is responsible for controlling UI menu state.
+ *
+ * @internal
+ */
+export function useMenuController(props: {
+  onKeyDown?: React.KeyboardEventHandler
+  originElement?: HTMLElement | null
+  shouldFocus: 'first' | 'last' | null
+}): MenuController {
+  const {onKeyDown, originElement, shouldFocus} = props
+
+  const elementsRef = useRef<HTMLElement[]>([])
+
+  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
+  const [activeIndex, _setActiveIndex] = useState(-1)
+
+  const activeElement = elementsRef.current[activeIndex] || null
+  const activeIndexRef = useRef(activeIndex)
+
+  const mounted = Boolean(rootElement)
+
+  const setActiveIndex = useCallback((nextActiveIndex) => {
+    _setActiveIndex(nextActiveIndex)
+    activeIndexRef.current = nextActiveIndex
+  }, [])
+
+  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)
+      }
+
+      return () => {
+        const idx = elementsRef.current.indexOf(element)
+
+        if (idx > -1) {
+          elementsRef.current.splice(idx, 1)
+        }
+      }
+    },
+    [rootElement, setActiveIndex]
+  )
+
+  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)
+
+        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)
+
+        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)
+
+        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)
+
+        return
+      }
+
+      if (onKeyDown) {
+        onKeyDown(event)
+      }
+    },
+    [activeIndex, onKeyDown, originElement, setActiveIndex]
+  )
+
+  const handleItemMouseEnter = useCallback(
+    (event: React.MouseEvent<HTMLElement>) => {
+      const element = event.currentTarget
+      const currentIndex = elementsRef.current.indexOf(element)
+
+      setActiveIndex(currentIndex)
+    },
+    [setActiveIndex]
+  )
+
+  const handleItemMouseLeave = useCallback(() => {
+    rootElement?.focus()
+    setActiveIndex(-1)
+  }, [rootElement, setActiveIndex])
+
+  // 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, setActiveIndex, shouldFocus])
+
+  return {
+    activeElement,
+    activeIndex,
+    handleItemMouseEnter,
+    handleItemMouseLeave,
+    handleKeyDown,
+    mount,
+    rootElement,
+    setRootElement,
+  }
+}