@sanity/ui 0.37.3 → 0.37.4

package/src/components/menu/menuContext.ts

@@ -0,0 +1,31 @@
+import {createContext} from 'react'
+import {globalScope} from '../../lib/globalScope'
+
+export interface MenuContextValue {
+  version: 0.0
+  activeElement: HTMLElement | null
+  activeIndex: number
+  mount: (element: HTMLElement | null, selected?: boolean) => () => void
+  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
+}
+
+const key = Symbol.for('@sanity/ui/context/menu')
+
+globalScope[key] = globalScope[key] || createContext<MenuContextValue | null>(null)
+
+export const MenuContext: React.Context<MenuContextValue | null> = globalScope[key]

package/src/components/menu/menuDivider.ts

@@ -0,0 +1,12 @@
+import styled, {StyledComponent} from 'styled-components'
+import {Theme} from '../../theme'
+
+/**
+ * @public
+ */
+export const MenuDivider: StyledComponent<'hr', Theme> = styled.hr`
+  height: 1px;
+  border: 0;
+  background: var(--card-hairline-soft-color);
+  margin: 0;
+`

package/src/components/menu/menuGroup.tsx

@@ -0,0 +1,200 @@
+import {ChevronRightIcon} from '@sanity/icons'
+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'
+import {useMenu} from './useMenu'
+
+/**
+ * @public
+ */
+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
+}
+
+/**
+ * @public
+ */
+export function MenuGroup(
+  props: MenuGroupProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'tabIndex'>
+): React.ReactElement {
+  const {
+    as = 'button',
+    children,
+    fontSize,
+    icon,
+    onClick,
+    padding = 3,
+    popover = {},
+    radius = 2,
+    space = 3,
+    text,
+    tone = 'default',
+    ...restProps
+  } = props
+  const menu = useMenu()
+  const {
+    activeElement,
+    mount,
+    onClickOutside,
+    onEscape,
+    onItemClick,
+    onItemMouseEnter = menu.onMouseEnter,
+    registerElement,
+  } = menu
+  const [rootElement, setRootElement] = useState<HTMLButtonElement | null>(null)
+  const [open, setOpen] = useState(false)
+  const shouldFocusRef = useRef<'first' | 'last' | null>(null)
+  const active = Boolean(activeElement) && activeElement === rootElement
+  const [withinMenu, setWithinMenu] = useState(false)
+
+  const handleMouseEnter = useCallback(
+    (event: React.MouseEvent<HTMLElement>) => {
+      setWithinMenu(false)
+      onItemMouseEnter(event)
+      setOpen(true)
+    },
+    [onItemMouseEnter]
+  )
+
+  const handleMenuKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'ArrowLeft') {
+        event.stopPropagation()
+
+        setOpen(false)
+
+        requestAnimationFrame(() => {
+          rootElement?.focus()
+        })
+      }
+    },
+    [rootElement]
+  )
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      if (onClick) onClick(event)
+
+      shouldFocusRef.current = 'first'
+
+      setOpen(true)
+
+      requestAnimationFrame(() => {
+        shouldFocusRef.current = null
+      })
+    },
+    [onClick]
+  )
+
+  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(() => {
+    if (!active) setOpen(false)
+  }, [active])
+
+  // Update state when child menu is no longer open
+  useEffect(() => {
+    if (!open) setWithinMenu(false)
+  }, [open])
+
+  const childMenu = (
+    <Menu
+      onClickOutside={onClickOutside}
+      onEscape={onEscape}
+      onItemClick={handleChildItemClick}
+      onKeyDown={handleMenuKeyDown}
+      onMouseEnter={handleMenuMouseEnter}
+      registerElement={registerElement}
+      shouldFocus={shouldFocusRef.current}
+    >
+      {children}
+    </Menu>
+  )
+
+  const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+    const target = event.currentTarget
+
+    if (document.activeElement !== target) {
+      return
+    }
+
+    if (event.key === 'ArrowRight') {
+      shouldFocusRef.current = 'first'
+
+      setOpen(true)
+      setWithinMenu(true)
+
+      requestAnimationFrame(() => {
+        shouldFocusRef.current = null
+      })
+
+      return
+    }
+  }, [])
+
+  return (
+    <Popover {...popover} content={childMenu} data-ui="MenuGroup__popover" open={open}>
+      <Selectable
+        data-as={as}
+        data-ui="MenuGroup"
+        forwardedAs={as}
+        {...restProps}
+        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}
+        ref={setRootElement}
+        tabIndex={-1}
+        type={as === 'button' ? 'button' : undefined}
+      >
+        <Box padding={padding}>
+          <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

@@ -0,0 +1,179 @@
+import React, {
+  createElement,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import {isValidElementType} from 'react-is'
+import {useForwardedRef} from '../../hooks'
+import {Box, Flex, Text} from '../../primitives'
+import {Selectable} from '../../primitives/_selectable'
+import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../../primitives/types'
+import {SelectableTone} from '../../types/selectable'
+import {Hotkeys} from '../hotkeys'
+import {useMenu} from './useMenu'
+
+/**
+ * @public
+ */
+export interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
+  as?: React.ElementType | keyof JSX.IntrinsicElements
+  fontSize?: number | number[]
+  hotkeys?: string[]
+  icon?: React.ComponentType | React.ReactNode
+  iconRight?: React.ComponentType | React.ReactNode
+  pressed?: boolean
+  selected?: boolean
+  space?: number | number[]
+  text?: React.ReactNode
+  tone?: SelectableTone
+}
+
+/**
+ * @public
+ */
+export const MenuItem = forwardRef(function MenuItem(
+  props: MenuItemProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'selected' | 'tabIndex'>,
+  forwardedRef: React.ForwardedRef<HTMLDivElement>
+) {
+  const {
+    as = 'button',
+    children,
+    disabled,
+    fontSize = 2,
+    hotkeys,
+    icon,
+    iconRight,
+    onClick,
+    padding = 3,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    pressed,
+    radius = 2,
+    selected: selectedProp,
+    space = 3,
+    text,
+    tone = 'default',
+    ...restProps
+  } = props
+  const menu = useMenu()
+  const {
+    activeElement,
+    mount,
+    onItemClick,
+    onItemMouseEnter = menu.onMouseEnter,
+    onItemMouseLeave = menu.onMouseLeave,
+  } = menu
+  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
+  const active = Boolean(activeElement) && activeElement === rootElement
+
+  useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp])
+
+  const ref = useForwardedRef(forwardedRef)
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      if (disabled) return
+      if (onClick) onClick(event)
+      if (onItemClick) onItemClick()
+    },
+    [disabled, onClick, onItemClick]
+  )
+
+  const paddingProps = useMemo(
+    () => ({
+      padding,
+      paddingX,
+      paddingY,
+      paddingTop,
+      paddingRight,
+      paddingBottom,
+      paddingLeft,
+    }),
+    [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft]
+  )
+
+  const setRef = useCallback(
+    (el: HTMLDivElement | null) => {
+      ref.current = el
+      setRootElement(el)
+    },
+    [ref]
+  )
+
+  return (
+    <Selectable
+      data-as={as}
+      data-ui="MenuItem"
+      forwardedAs={as}
+      {...restProps}
+      aria-pressed={as === 'button' && pressed}
+      data-pressed={as !== 'button' && pressed ? '' : undefined}
+      data-selected={active ? '' : undefined}
+      data-disabled={disabled ? '' : undefined}
+      $radius={radius}
+      $tone={tone}
+      disabled={disabled}
+      onClick={handleClick}
+      onMouseEnter={onItemMouseEnter}
+      onMouseLeave={onItemMouseLeave}
+      padding={0}
+      ref={setRef}
+      role="menuitem"
+      tabIndex={-1}
+      type={as === 'button' ? 'button' : undefined}
+    >
+      {(icon || text || iconRight) && (
+        <Box as="span" {...paddingProps}>
+          <Flex as="span">
+            {icon && (
+              <Text size={fontSize}>
+                {isValidElement(icon) && icon}
+                {isValidElementType(icon) && createElement(icon)}
+              </Text>
+            )}
+
+            {text && (
+              <Box
+                flex={1}
+                marginLeft={icon ? space : undefined}
+                marginRight={iconRight ? space : undefined}
+              >
+                <Text size={fontSize} textOverflow="ellipsis">
+                  {text}
+                </Text>
+              </Box>
+            )}
+
+            {hotkeys && (
+              <Box marginLeft={space} style={{marginTop: -4, marginBottom: -4}}>
+                <Hotkeys fontSize={fontSize} keys={hotkeys} />
+              </Box>
+            )}
+
+            {iconRight && (
+              <Text size={fontSize}>
+                {isValidElement(iconRight) && iconRight}
+                {isValidElementType(iconRight) && createElement(iconRight)}
+              </Text>
+            )}
+          </Flex>
+        </Box>
+      )}
+
+      {children && (
+        <Box as="span" {...paddingProps}>
+          {children}
+        </Box>
+      )}
+    </Selectable>
+  )
+})

package/src/components/menu/useMenu.ts

@@ -0,0 +1,20 @@
+import {useContext} from 'react'
+import {isRecord} from '../../lib/isRecord'
+import {MenuContext, MenuContextValue} from './menuContext'
+
+export function useMenu(): MenuContextValue {
+  const value = useContext(MenuContext)
+
+  if (!value) {
+    throw new Error('useMenu(): missing context value')
+  }
+
+  // NOTE: This check is for future-compatiblity
+  // - If the value is not an object, it’s not compatible with the current version
+  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
+  if (!isRecord(value) || value.version !== 0.0) {
+    throw new Error('useMenu(): the context value is not compatible')
+  }
+
+  return value
+}

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,
+  }
+}

package/src/components/skeleton/__workshop__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  }
+}