@sanity/ui 3.0.0-static.3 → 3.0.0-static.30

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

@@ -0,0 +1,32 @@
+import {menuDivider} from '@sanity/ui/css'
+
+import type {ComponentType, Props} from '../../types/props'
+
+/** @public */
+export const DEFAULT_MENU_DIVIDER_ELEMENT = 'hr'
+
+/** @public */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export type MenuDividerOwnProps = {}
+
+/** @public */
+export type MenuDividerElementType = 'div' | 'hr' | 'span' | ComponentType
+
+/** @public */
+export type MenuDividerProps<E extends MenuDividerElementType = MenuDividerElementType> = Props<
+  MenuDividerOwnProps,
+  E
+>
+
+/** @public */
+export function MenuDivider<E extends MenuDividerElementType = typeof DEFAULT_MENU_DIVIDER_ELEMENT>(
+  props: MenuDividerProps<E>,
+) {
+  const {
+    as: Element = DEFAULT_MENU_DIVIDER_ELEMENT,
+    className,
+    ...rest
+  } = props as MenuDividerProps<typeof DEFAULT_MENU_DIVIDER_ELEMENT>
+
+  return <Element {...rest} className={menuDivider({className})} />
+}

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

@@ -0,0 +1,238 @@
+import {ChevronRightIcon} from '@sanity/icons'
+import type {RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
+import type {FontTextSize, Space, ThemeColorStateToneKey} from '@sanity/ui/theme'
+import {
+  type ElementType,
+  isValidElement,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react'
+import {isValidElementType} from 'react-is'
+
+import {Box} from '../../primitives/box/box'
+import {Flex} from '../../primitives/flex/flex'
+import {Popover, type PopoverProps} from '../../primitives/popover/popover'
+import {Selectable} from '../../primitives/selectable/selectable'
+import {Text} from '../../primitives/text/text'
+import type {ComponentType, Props} from '../../types/props'
+import {DEFAULT_MENU_ELEMENT, Menu, type MenuProps} from './menu'
+import {useMenu} from './useMenu'
+
+/** @public */
+export const DEFAULT_MENU_GROUP_ELEMENT = 'button'
+
+/** @public */
+export type MenuGroupOwnProps = RadiusStyleProps & {
+  disabled?: boolean
+  fontSize?: ResponsiveProp<FontTextSize>
+  gap?: ResponsiveProp<Space>
+  icon?: ElementType | ReactNode
+  menu?: Omit<
+    MenuProps<typeof DEFAULT_MENU_ELEMENT>,
+    | 'onClickOutside'
+    | 'onEscape'
+    | 'onItemClick'
+    | 'onKeyDown'
+    | 'onMouseEnter'
+    | 'registerElement'
+    | 'shouldFocus'
+    | 'onBlurCapture'
+  >
+  padding?: ResponsiveProp<Space>
+  popover?: Omit<PopoverProps, 'content' | 'open'>
+  /** @deprecated Use `gap` instead. */
+  space?: ResponsiveProp<Space>
+  text?: ReactNode
+  tone?: ThemeColorStateToneKey
+}
+
+/** @public */
+export type MenuGroupElementType = 'button' | ComponentType
+
+/** @public */
+export type MenuGroupProps<E extends MenuGroupElementType = MenuGroupElementType> = Props<
+  MenuGroupOwnProps,
+  E
+>
+
+/** @public */
+export function MenuGroup<E extends MenuGroupElementType = typeof DEFAULT_MENU_GROUP_ELEMENT>(
+  props: MenuGroupProps<E>,
+) {
+  const {
+    as = DEFAULT_MENU_GROUP_ELEMENT,
+    children,
+    fontSize = 1,
+    gap,
+    icon: IconComponent,
+    menu: menuProps,
+    onClick,
+    padding = 3,
+    popover,
+    radius = 2,
+    space = 3,
+    text,
+    tone = 'default',
+    ...rest
+  } = props as MenuGroupProps<typeof DEFAULT_MENU_GROUP_ELEMENT>
+
+  const menu = useMenu()
+
+  const {
+    activeElement,
+    mount,
+    onClickOutside,
+    onEscape,
+    onItemClick,
+    onItemMouseEnter: _onItemMouseEnter,
+    registerElement,
+  } = menu
+  const onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter
+  const [rootElement, setRootElement] = useState<HTMLButtonElement | HTMLDivElement | null>(null)
+  const [open, setOpen] = useState(false)
+  const [shouldFocus, setShouldFocus] = useState<'first' | 'last' | null>(null)
+  const active = Boolean(activeElement) && activeElement === rootElement
+  const [withinMenu, setWithinMenu] = useState(false)
+
+  const handleMouseEnter = useCallback(
+    (event: MouseEvent<HTMLElement>) => {
+      setWithinMenu(false)
+      onItemMouseEnter(event)
+      setOpen(true)
+    },
+    [onItemMouseEnter],
+  )
+
+  const handleMenuKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'ArrowLeft') {
+        event.stopPropagation()
+
+        setOpen(false)
+
+        requestAnimationFrame(() => {
+          rootElement?.focus()
+        })
+      }
+    },
+    [rootElement],
+  )
+
+  const handleClick = useCallback(
+    (event: MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event)
+
+      setShouldFocus('first')
+      setOpen(true)
+    },
+    [onClick],
+  )
+
+  const handleChildItemClick = useCallback(() => {
+    setOpen(false)
+    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])
+
+  // 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
+      {...menuProps}
+      onClickOutside={onClickOutside}
+      onEscape={onEscape}
+      onItemClick={handleChildItemClick}
+      onKeyDown={handleMenuKeyDown}
+      onMouseEnter={handleMenuMouseEnter}
+      registerElement={registerElement}
+      shouldFocus={shouldFocus}
+    >
+      {children}
+    </Menu>
+  )
+
+  const handleKeyDown = useCallback((event: KeyboardEvent<HTMLButtonElement>) => {
+    const target = event.currentTarget
+
+    if (document.activeElement !== target) {
+      return
+    }
+
+    if (event.key === 'ArrowRight') {
+      setShouldFocus('first')
+      setOpen(true)
+      setWithinMenu(true)
+
+      return
+    }
+  }, [])
+
+  return (
+    <Popover {...popover} content={childMenu} data-ui="MenuGroup__popover" open={open}>
+      <Selectable
+        // data-as={as}
+        data-ui="MenuGroup"
+        // forwardedAs={as}
+        {...rest}
+        aria-pressed={as === 'button' ? withinMenu : undefined}
+        as={as}
+        // data-pressed={as !== 'button' ? withinMenu : undefined}
+        // data-selected={!withinMenu && active ? '' : undefined}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        onMouseEnter={handleMouseEnter}
+        radius={radius}
+        ref={setRootElement}
+        selected={withinMenu}
+        tabIndex={-1}
+        tone={tone}
+        type={as === 'button' ? 'button' : undefined}
+      >
+        <Flex gap={gap ?? space} padding={padding}>
+          {IconComponent && (
+            <Text size={fontSize}>
+              {isValidElement(IconComponent) && IconComponent}
+              {isValidElementType(IconComponent) && <IconComponent />}
+            </Text>
+          )}
+
+          <Box flex={1}>
+            <Text size={fontSize} textOverflow="ellipsis" weight="medium">
+              {text}
+            </Text>
+          </Box>
+
+          <Text size={fontSize}>
+            <ChevronRightIcon />
+          </Text>
+        </Flex>
+      </Selectable>
+    </Popover>
+  )
+}

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

@@ -0,0 +1,194 @@
+import type {
+  GapStyleProps,
+  PaddingStyleProps,
+  RadiusStyleProps,
+  ResponsiveProp,
+} from '@sanity/ui/css'
+import type {FontTextSize, Space, ThemeColorStateToneKey} from '@sanity/ui/theme'
+import {
+  type ElementType,
+  isValidElement,
+  type MouseEvent,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import {isValidElementType} from 'react-is'
+
+import {Box} from '../../primitives/box/box'
+import {Flex} from '../../primitives/flex/flex'
+import {Selectable} from '../../primitives/selectable/selectable'
+import {Text} from '../../primitives/text/text'
+import type {ComponentType, Props} from '../../types/props'
+import {Hotkeys} from '../hotkeys/hotkeys'
+import {useMenu} from './useMenu'
+
+/** @public */
+export const DEFAULT_MENU_ITEM_ELEMENT = 'button'
+
+/** @public */
+export type MenuItemOwnProps = GapStyleProps &
+  PaddingStyleProps &
+  RadiusStyleProps & {
+    disabled?: boolean
+    fontSize?: ResponsiveProp<FontTextSize>
+    hotkeys?: string[]
+    icon?: ElementType | ReactNode
+    iconRight?: ElementType | ReactNode
+    pressed?: boolean
+    selected?: boolean
+    /** @deprecated Use `gap` instead. */
+    space?: ResponsiveProp<Space>
+    text?: ReactNode
+    tone?: ThemeColorStateToneKey
+  }
+
+/** @public */
+export type MenuItemElementType = 'button' | 'a' | ComponentType
+
+/** @public */
+export type MenuItemProps<E extends MenuItemElementType = MenuItemElementType> = Omit<
+  Props<MenuItemOwnProps, E>,
+  'role'
+>
+
+/** @public */
+export function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITEM_ELEMENT>(
+  props: MenuItemProps<E>,
+) {
+  const {
+    as = DEFAULT_MENU_ITEM_ELEMENT,
+    children,
+    disabled,
+    fontSize = 1,
+    gap,
+    gapX,
+    gapY,
+    hotkeys,
+    icon: IconComponent,
+    iconRight: IconRightComponent,
+    onClick,
+    padding = 3,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    pressed,
+    radius = 2,
+    ref: forwardedRef,
+    selected: selectedProp,
+    space = 3,
+    text,
+    tone = 'default',
+    ...rest
+  } = props as MenuItemProps<typeof DEFAULT_MENU_ITEM_ELEMENT>
+
+  const menu = useMenu()
+  const {
+    activeElement,
+    mount,
+    onItemClick,
+    onItemMouseEnter: _onItemMouseEnter,
+    onItemMouseLeave: _onItemMouseLeave,
+  } = menu
+  const onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter
+  const onItemMouseLeave = _onItemMouseLeave ?? menu.onMouseLeave
+  const [rootElement, setRootElement] = useState<HTMLButtonElement | null>(null)
+  const active = Boolean(activeElement) && activeElement === rootElement
+  const ref = useRef<HTMLButtonElement | null>(null)
+
+  useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
+    forwardedRef,
+    () => ref.current,
+  )
+
+  useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp])
+
+  const handleClick = useCallback(
+    (event: MouseEvent<HTMLButtonElement>) => {
+      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: HTMLButtonElement | null) => {
+    ref.current = el
+    setRootElement(el)
+  }, [])
+
+  return (
+    <Selectable
+      data-ui="MenuItem"
+      {...rest}
+      as={as}
+      data-pressed={pressed ? '' : undefined}
+      data-selected={active ? '' : undefined}
+      data-disabled={disabled ? '' : undefined}
+      radius={radius}
+      disabled={disabled}
+      onClick={handleClick}
+      onMouseEnter={onItemMouseEnter}
+      onMouseLeave={onItemMouseLeave}
+      ref={setRef}
+      role="menuitem"
+      tabIndex={-1}
+      tone={tone}
+      type={as === 'button' ? 'button' : undefined}
+    >
+      {(IconComponent || text || IconRightComponent) && (
+        <Flex as="span" gap={gap ?? space} gapX={gapX} gapY={gapY} align="center" {...paddingProps}>
+          {IconComponent && (
+            <Text muted size={fontSize}>
+              {isValidElement(IconComponent) && IconComponent}
+              {isValidElementType(IconComponent) && <IconComponent />}
+            </Text>
+          )}
+
+          {text && (
+            <Box flex={1}>
+              <Text size={fontSize} textOverflow="ellipsis" weight="medium">
+                {text}
+              </Text>
+            </Box>
+          )}
+
+          {hotkeys && <Hotkeys keys={hotkeys} style={{marginTop: -4, marginBottom: -4}} />}
+
+          {IconRightComponent && (
+            <Text muted size={fontSize}>
+              {isValidElement(IconRightComponent) && IconRightComponent}
+              {isValidElementType(IconRightComponent) && <IconRightComponent />}
+            </Text>
+          )}
+        </Flex>
+      )}
+
+      {children && (
+        <Box as="span" {...paddingProps}>
+          {children}
+        </Box>
+      )}
+    </Selectable>
+  )
+}

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

@@ -0,0 +1,21 @@
+import {useContext} from 'react'
+
+import {isRecord} from '../../lib/isRecord'
+import {MenuContext, type 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
+}