@sanity/ui 3.3.1 → 3.3.3

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

@@ -1,233 +0,0 @@
-import {ChevronRightIcon} from '@sanity/icons'
-import {isValidElement, useCallback, useEffect, useState} from 'react'
-import {isValidElementType} from 'react-is'
-
-import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
-import {Selectable} from '../../primitives/_selectable'
-import {_getArrayProp} from '../../styles'
-import {useRootTheme} from '../../theme'
-import {ElementType, Props, Radius, SelectableTone} from '../../types'
-import {Menu, MenuProps} from './menu'
-import {useMenu} from './useMenu'
-
-/**
- * @public
- */
-export interface MenuGroupOwnProps {
-  fontSize?: number | number[]
-  icon?: React.ElementType | React.ReactNode
-  menu?: Omit<
-    MenuProps,
-    | 'onClickOutside'
-    | 'onEscape'
-    | 'onItemClick'
-    | 'onKeyDown'
-    | 'onMouseEnter'
-    | 'registerElement'
-    | 'shouldFocus'
-    | 'onBlurCapture'
-  >
-  padding?: number | number[]
-  popover?: Omit<PopoverProps, 'content' | 'open'>
-  radius?: Radius | Radius[]
-  gap?: number | number[]
-  /**
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
-   */
-  space?: number | number[]
-  text: React.ReactNode
-  tone?: SelectableTone
-}
-
-/**
- * @public
- */
-export type MenuGroupProps<E extends ElementType = 'button'> = Props<MenuGroupOwnProps, E>
-
-function MenuGroupComponent(
-  props: Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'popover' | 'ref' | 'tabIndex'> &
-    MenuGroupOwnProps & {as?: ElementType},
-): React.JSX.Element {
-  const {
-    as = 'button',
-    children,
-    fontSize = 1,
-    icon: IconComponent,
-    menu: menuProps,
-    onClick,
-    padding = 3,
-    popover,
-    radius = 2,
-    gap,
-    space: deprecated_space = 3,
-    text,
-    tone = 'default',
-    ...restProps
-  } = props
-  const spacing = gap === undefined ? deprecated_space : gap
-  const menu = useMenu()
-  const {scheme} = useRootTheme()
-  const {
-    activeElement,
-    mount,
-    onClickOutside,
-    onEscape,
-    onItemClick,
-    onItemMouseEnter: _onItemMouseEnter,
-    registerElement,
-  } = menu
-  const onItemMouseEnter = _onItemMouseEnter ?? menu.onItemMouseEnter
-  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: 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>) => {
-      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(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    if (!active) setOpen(false)
-  }, [active])
-
-  // Update state when child menu is no longer open
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    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: React.KeyboardEvent<HTMLDivElement>) => {
-    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}
-        {...restProps}
-        aria-pressed={as === 'button' ? withinMenu : undefined}
-        data-pressed={as !== 'button' ? withinMenu : undefined}
-        data-selected={!withinMenu && active ? '' : undefined}
-        $radius={_getArrayProp(radius)}
-        $tone={tone}
-        $scheme={scheme}
-        onClick={handleClick}
-        onKeyDown={handleKeyDown}
-        onMouseEnter={handleMouseEnter}
-        ref={setRootElement}
-        tabIndex={-1}
-        type={as === 'button' ? 'button' : undefined}
-      >
-        <Flex gap={spacing} 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>
-  )
-}
-
-MenuGroupComponent.displayName = 'MenuGroup'
-
-/**
- * @public
- */
-export const MenuGroup = MenuGroupComponent as unknown as <E extends ElementType = 'button'>(
-  props: MenuGroupProps<E>,
-) => React.JSX.Element

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

@@ -1,59 +0,0 @@
-/** @jest-environment jsdom */
-
-import {render} from '../../../../test'
-import {Flex} from '../../primitives'
-import {MenuContext, MenuContextValue} from './menuContext'
-import {MenuItem} from './menuItem'
-
-jest.mock('../../primitives', () => {
-  const actual = jest.requireActual('../../primitives')
-
-  return {
-    ...actual,
-    Flex: jest.fn((props: Record<string, unknown>) => (actual.Flex as any).render(props, null)),
-  }
-})
-
-const menuContextValue: MenuContextValue = {
-  version: 2,
-  activeElement: null,
-  mount: () => () => undefined,
-  onItemMouseEnter: () => undefined,
-  onItemMouseLeave: () => undefined,
-}
-
-function renderMenuItem(props: Partial<React.ComponentProps<typeof MenuItem>> = {}) {
-  return render(
-    <MenuContext.Provider value={menuContextValue}>
-      <MenuItem id="menu-item" text="Menu item" {...props} />
-    </MenuContext.Provider>,
-  )
-}
-
-describe('components/menuItem spacing', () => {
-  const mockedFlex = jest.mocked(Flex)
-
-  beforeEach(() => {
-    mockedFlex.mockClear()
-  })
-
-  it('should support `space` and `gap` with the same behavior', () => {
-    renderMenuItem({space: 2})
-    expect(mockedFlex.mock.calls.map(([props]) => props)).toContainEqual(
-      expect.objectContaining({gap: 2}),
-    )
-
-    mockedFlex.mockClear()
-    renderMenuItem({gap: 2})
-    expect(mockedFlex.mock.calls.map(([props]) => props)).toContainEqual(
-      expect.objectContaining({gap: 2}),
-    )
-  })
-
-  it('should prefer `gap` over `space` when both are provided', () => {
-    renderMenuItem({gap: 3, space: 1})
-    const propsList = mockedFlex.mock.calls.map(([props]) => props)
-    expect(propsList).toContainEqual(expect.objectContaining({gap: 3}))
-    expect(propsList).not.toContainEqual(expect.objectContaining({gap: 1}))
-  })
-})

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

@@ -1,197 +0,0 @@
-import {
-  forwardRef,
-  isValidElement,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import {isValidElementType} from 'react-is'
-
-import {Box, Flex, Text} from '../../primitives'
-import {Selectable} from '../../primitives/_selectable'
-import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../../primitives/types'
-import {_getArrayProp} from '../../styles'
-import {useRootTheme} from '../../theme'
-import {ElementType, Props} from '../../types'
-import {SelectableTone} from '../../types/selectable'
-import {Hotkeys} from '../hotkeys'
-import {useMenu} from './useMenu'
-
-/**
- * @public
- */
-export interface MenuItemOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
-  fontSize?: number | number[]
-  hotkeys?: string[]
-  icon?: React.ElementType | React.ReactNode
-  iconRight?: React.ElementType | React.ReactNode
-  pressed?: boolean
-  selected?: boolean
-  gap?: number | number[]
-  /**
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
-   */
-  space?: number | number[]
-  text?: React.ReactNode
-  tone?: SelectableTone
-}
-
-/**
- * @public
- */
-export type MenuItemProps<E extends ElementType = 'button'> = Props<MenuItemOwnProps, E>
-
-const MenuItemComponent = forwardRef(function MenuItem(
-  props: MenuItemOwnProps & {as?: ElementType} & Omit<
-      React.HTMLProps<HTMLDivElement>,
-      'as' | 'height' | 'ref' | 'selected' | 'tabIndex'
-    >,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    as = 'button',
-    children,
-    disabled,
-    fontSize = 1,
-    hotkeys,
-    icon: IconComponent,
-    iconRight: IconRightComponent,
-    onClick,
-    padding = 3,
-    paddingX,
-    paddingY,
-    paddingTop,
-    paddingRight,
-    paddingBottom,
-    paddingLeft,
-    pressed,
-    radius = 2,
-    selected: selectedProp,
-    gap,
-    space: deprecated_space = 3,
-    text,
-    tone = 'default',
-    ...restProps
-  } = props
-  const spacing = gap === undefined ? deprecated_space : gap
-  const {scheme} = useRootTheme()
-  const menu = useMenu()
-  const {
-    activeElement,
-    mount,
-    onItemClick,
-    onItemMouseEnter: _onItemMouseEnter,
-    onItemMouseLeave: _onItemMouseLeave,
-  } = menu
-  const onItemMouseEnter = _onItemMouseEnter ?? menu.onItemMouseEnter
-  const onItemMouseLeave = _onItemMouseLeave ?? menu.onItemMouseLeave
-  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
-  const active = Boolean(activeElement) && activeElement === rootElement
-  const ref = useRef<HTMLDivElement | null>(null)
-
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
-
-  useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp])
-
-  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 hotkeysFontSize = _getArrayProp(fontSize).map((s) => s - 1)
-
-  const setRef = useCallback((el: HTMLDivElement | null) => {
-    ref.current = el
-    setRootElement(el)
-  }, [])
-
-  return (
-    <Selectable
-      data-ui="MenuItem"
-      role="menuitem"
-      {...restProps}
-      data-pressed={as !== 'button' && pressed ? '' : undefined}
-      data-selected={active ? '' : undefined}
-      data-disabled={disabled ? '' : undefined}
-      forwardedAs={as}
-      $radius={_getArrayProp(radius)}
-      $padding={_getArrayProp(0)}
-      $tone={disabled ? 'default' : tone}
-      $scheme={scheme}
-      disabled={disabled}
-      onClick={handleClick}
-      onMouseEnter={onItemMouseEnter}
-      onMouseLeave={onItemMouseLeave}
-      ref={setRef}
-      tabIndex={-1}
-      type={as === 'button' ? 'button' : undefined}
-    >
-      {(IconComponent || text || IconRightComponent) && (
-        <Flex as="span" gap={spacing} align="center" {...paddingProps}>
-          {IconComponent && (
-            <Text 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
-              fontSize={hotkeysFontSize}
-              keys={hotkeys}
-              style={{marginTop: -4, marginBottom: -4}}
-            />
-          )}
-
-          {IconRightComponent && (
-            <Text size={fontSize}>
-              {isValidElement(IconRightComponent) && IconRightComponent}
-              {isValidElementType(IconRightComponent) && <IconRightComponent />}
-            </Text>
-          )}
-        </Flex>
-      )}
-      {children && (
-        <Box as="span" {...paddingProps}>
-          {children}
-        </Box>
-      )}
-    </Selectable>
-  )
-})
-MenuItemComponent.displayName = 'ForwardRef(MenuItem)'
-
-/**
- * @public
- */
-export const MenuItem = MenuItemComponent as unknown as <E extends ElementType = 'button'>(
-  props: MenuItemProps<E>,
-) => React.JSX.Element

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

@@ -1,21 +0,0 @@
-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: 2`, it’s not compatible with the current version
-  if (!isRecord(value) || value.version !== 2) {
-    throw new Error('useMenu(): the context value is not compatible')
-  }
-
-  return value
-}