@sanity/ui 3.0.2 → 4.0.0-static.2

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

@@ -1,7 +1,10 @@
-import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {
   cloneElement,
-  forwardRef,
+  type FocusEvent,
+  type ForwardedRef,
+  type KeyboardEvent,
+  type MouseEvent as ReactMouseEvent,
+  type ReactElement,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -10,49 +13,25 @@ import {
   useState,
 } from 'react'
 
-import {Popover, PopoverProps} from '../../primitives'
-import {Placement, Radius} from '../../types'
-import {MenuProps} from './menu'
+import type {ButtonProps} from '../../primitives/button/button'
+import {Popover, type PopoverProps} from '../../primitives/popover/popover'
+import type {Props} from '../../types'
+import type {MenuProps} from './menu'
 
-/**
- * @public
- */
-export interface MenuButtonProps {
+/** @public */
+export type MenuButtonProps = {
   /**
    * @beta Do not use in production.
    */
   __unstable_disableRestoreFocusOnClose?: boolean
-  /**
-   * @deprecated Use `popover={{boundaryElement: element}}` instead.
-   */
-  boundaryElement?: HTMLElement
-  button: React.JSX.Element
+  button: ReactElement<ButtonProps>
   id: string
-  menu?: React.JSX.Element
+  menu?: ReactElement
   onClose?: () => void
   onOpen?: () => void
-  /**
-   * @deprecated Use `popover={{placement: 'top'}}` instead.
-   */
-  placement?: Placement
   popover?: Omit<PopoverProps, 'content' | 'open'>
-  /**
-   * @deprecated Use `popover={{scheme: 'dark'}}` instead.
-   */
-  popoverScheme?: ThemeColorSchemeKey
-  /**
-   * @deprecated Use `popover={{radius: 2}}` instead.
-   */
-  popoverRadius?: Radius | Radius[]
-  /**
-   * @beta Do not use in production.
-   * @deprecated Use `popover={{portal: true}}` instead.
-   */
-  portal?: boolean
-  /**
-   * @deprecated Use `popover={{preventOverflow: true}}` instead.
-   */
-  preventOverflow?: boolean
+
+  ref?: ForwardedRef<HTMLButtonElement | null>
 }
 
 /**
@@ -60,24 +39,16 @@ export interface MenuButtonProps {
  *
  * @public
  */
-export const MenuButton = forwardRef(function MenuButton(
-  props: MenuButtonProps,
-  forwardedRef: React.ForwardedRef<HTMLButtonElement | null>,
-) {
+export function MenuButton(props: MenuButtonProps): React.JSX.Element {
   const {
     __unstable_disableRestoreFocusOnClose: disableRestoreFocusOnClose = false,
-    boundaryElement: deprecated_boundaryElement,
     button: buttonProp,
     id,
     menu: menuProp,
     onClose,
     onOpen,
-    placement: deprecated_placement,
-    popoverScheme: deprecated_popoverScheme,
-    portal: deprecated_portal = true,
     popover,
-    popoverRadius: deprecated_popoverRadius,
-    preventOverflow: deprecated_preventOverflow,
+    ref: forwardedRef,
   } = props
   const [open, setOpen] = useState(false)
   const [shouldFocus, setShouldFocus] = useState<'first' | 'last' | null>(null)
@@ -112,13 +83,13 @@ export const MenuButton = forwardRef(function MenuButton(
   // This is to ensure that `handleBlur` isn't triggered when clicking the menu button whilst open,
   // which can lead to `setOpen` being triggered multiple times (once by `handleBlur`, and again by `handleButtonClick`).
   const handleMouseDown = useCallback(
-    (event: PointerEvent) => {
+    (event: ReactMouseEvent<HTMLElement>) => {
       if (open) event.preventDefault()
     },
     [open],
   )
 
-  const handleButtonKeyDown = useCallback((event: React.KeyboardEvent<HTMLButtonElement>) => {
+  const handleButtonKeyDown = useCallback((event: KeyboardEvent<HTMLButtonElement>) => {
     // On `ArrowDown`, `Enter` and `Space`
     // - Opens menu and moves focus to first menuitem
     if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
@@ -170,7 +141,7 @@ export const MenuButton = forwardRef(function MenuButton(
   }, [buttonElement, disableRestoreFocusOnClose])
 
   const handleBlur = useCallback(
-    (event: FocusEvent) => {
+    (event: FocusEvent<HTMLDivElement>) => {
       const target = event.relatedTarget
 
       if (!(target instanceof Node)) {
@@ -200,7 +171,7 @@ export const MenuButton = forwardRef(function MenuButton(
     return () => setChildMenuElements((els) => els.filter((_el) => _el !== el))
   }, [])
 
-  const menuProps: MenuProps = {
+  const menuProps: Props<MenuProps, 'div'> = {
     'aria-labelledby': id,
     'onBlurCapture': handleBlur,
     'onClickOutside': handleMenuClickOutside,
@@ -213,22 +184,23 @@ export const MenuButton = forwardRef(function MenuButton(
 
   const menu = menuProp && cloneElement(menuProp, menuProps)
 
-  const button = useMemo(
-    () =>
-      buttonProp &&
-      cloneElement(buttonProp, {
-        'data-ui': 'MenuButton',
-        id,
-        'onClick': handleButtonClick,
-        'onKeyDown': handleButtonKeyDown,
-        'onMouseDown': handleMouseDown,
-        'aria-haspopup': true,
-        'aria-expanded': open,
-        'ref': setButtonElement,
-        'selected': buttonProp.props.selected ?? open,
-      }),
-    [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open],
-  )
+  const button = useMemo(() => {
+    if (!buttonProp) return null
+
+    const buttonProps: ButtonProps<'button'> = {
+      'data-ui': 'MenuButton',
+      id,
+      'onClick': handleButtonClick,
+      'onKeyDown': handleButtonKeyDown,
+      'onMouseDown': handleMouseDown,
+      'aria-haspopup': true,
+      'aria-expanded': open,
+      'ref': setButtonElement,
+      'selected': buttonProp.props.selected ?? open,
+    }
+
+    return cloneElement(buttonProp, buttonProps)
+  }, [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open])
 
   // Forward button ref to parent
   useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
@@ -239,24 +211,10 @@ export const MenuButton = forwardRef(function MenuButton(
 
   const popoverProps: MenuButtonProps['popover'] = useMemo(
     () => ({
-      boundaryElement: deprecated_boundaryElement,
       overflow: 'auto',
-      placement: deprecated_placement,
-      portal: deprecated_portal,
-      preventOverflow: deprecated_preventOverflow,
-      radius: deprecated_popoverRadius,
-      scheme: deprecated_popoverScheme,
       ...(popover || {}),
     }),
-    [
-      deprecated_boundaryElement,
-      deprecated_placement,
-      deprecated_popoverRadius,
-      deprecated_popoverScheme,
-      deprecated_portal,
-      deprecated_preventOverflow,
-      popover,
-    ],
+    [popover],
   )
 
   return (
@@ -264,5 +222,4 @@ export const MenuButton = forwardRef(function MenuButton(
       {button || <></>}
     </Popover>
   )
-})
-MenuButton.displayName = 'ForwardRef(MenuButton)'
+}

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

@@ -1,3 +1,5 @@
+import {type Context, type MouseEvent as ReactMouseEvent} from 'react'
+
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 
 export interface MenuContextValue {
@@ -8,22 +10,10 @@ export interface MenuContextValue {
   onClickOutside?: (event: MouseEvent) => void
   onEscape?: () => void
   onItemClick?: () => void
-  onItemMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void
-  onItemMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void
+  onItemMouseEnter?: (event: ReactMouseEvent<HTMLElement>) => void
+  onItemMouseLeave?: (event: ReactMouseEvent<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
 }
 
-export const MenuContext = createGlobalScopedContext<MenuContextValue | null>(
-  '@sanity/ui/context/menu',
-  null,
-)
+export const MenuContext: Context<MenuContextValue | null> =
+  createGlobalScopedContext<MenuContextValue | null>('@sanity/ui/v3/menu', null)

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

@@ -0,0 +1,32 @@
+import {menuDivider} from '@sanity/ui/css'
+
+import type {ComponentType, Props} from '../../types'
+
+/** @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>,
+): React.JSX.Element {
+  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

@@ -1,24 +1,38 @@
 import {ChevronRightIcon} from '@sanity/icons'
-import {isValidElement, useCallback, useEffect, useState} from 'react'
+import type {RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
+import type {ElementTone, FontTextSize, Space} 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 {useArrayProp} from '../../hooks'
-import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
-import {Selectable} from '../../primitives/_selectable'
-import {useRootTheme} from '../../theme'
-import {Radius, SelectableTone} from '../../types'
-import {Menu, MenuProps} from './menu'
+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'
+import {DEFAULT_MENU_ELEMENT, Menu, type MenuProps} from './menu'
 import {useMenu} from './useMenu'
 
-/**
- * @public
- */
-export interface MenuGroupProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  fontSize?: number | number[]
-  icon?: React.ElementType | React.ReactNode
+/** @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,
+    MenuProps<typeof DEFAULT_MENU_ELEMENT>,
     | 'onClickOutside'
     | 'onEscape'
     | 'onItemClick'
@@ -28,48 +42,51 @@ export interface MenuGroupProps {
     | 'shouldFocus'
     | 'onBlurCapture'
   >
-  padding?: number | number[]
+  padding?: ResponsiveProp<Space>
   popover?: Omit<PopoverProps, 'content' | 'open'>
-  radius?: Radius | Radius[]
-  space?: number | number[]
-  text: React.ReactNode
-  tone?: SelectableTone
+  text?: ReactNode
+  tone?: ElementTone
 }
 
-/**
- * @public
- */
-export function MenuGroup(
-  props: Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'popover' | 'ref' | 'tabIndex'> &
-    MenuGroupProps,
+/** @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>,
 ): React.JSX.Element {
   const {
-    as = 'button',
+    as = DEFAULT_MENU_GROUP_ELEMENT,
     children,
     fontSize = 1,
+    gap = 3,
     icon: IconComponent,
     menu: menuProps,
     onClick,
     padding = 3,
     popover,
     radius = 2,
-    space = 3,
     text,
     tone = 'default',
-    ...restProps
-  } = props
-  const menu = useMenu()
-  const {scheme} = useRootTheme()
+    ...rest
+  } = props as MenuGroupProps<typeof DEFAULT_MENU_GROUP_ELEMENT>
+
   const {
     activeElement,
     mount,
     onClickOutside,
     onEscape,
     onItemClick,
-    onItemMouseEnter: _onItemMouseEnter,
+    onItemMouseEnter,
     registerElement,
-  } = menu
-  const onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter
+  } = useMenu()
+
   const [rootElement, setRootElement] = useState<HTMLButtonElement | HTMLDivElement | null>(null)
   const [open, setOpen] = useState(false)
   const [shouldFocus, setShouldFocus] = useState<'first' | 'last' | null>(null)
@@ -77,16 +94,16 @@ export function MenuGroup(
   const [withinMenu, setWithinMenu] = useState(false)
 
   const handleMouseEnter = useCallback(
-    (event: React.MouseEvent<HTMLElement>) => {
+    (event: MouseEvent<HTMLElement>) => {
       setWithinMenu(false)
-      onItemMouseEnter(event)
+      onItemMouseEnter?.(event)
       setOpen(true)
     },
     [onItemMouseEnter],
   )
 
   const handleMenuKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
+    (event: KeyboardEvent<HTMLDivElement>) => {
       if (event.key === 'ArrowLeft') {
         event.stopPropagation()
 
@@ -101,7 +118,7 @@ export function MenuGroup(
   )
 
   const handleClick = useCallback(
-    (event: React.MouseEvent<HTMLDivElement>) => {
+    (event: MouseEvent<HTMLButtonElement>) => {
       onClick?.(event)
 
       setShouldFocus('first')
@@ -155,7 +172,7 @@ export function MenuGroup(
     </Menu>
   )
 
-  const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+  const handleKeyDown = useCallback((event: KeyboardEvent<HTMLButtonElement>) => {
     const target = event.currentTarget
 
     if (document.activeElement !== target) {
@@ -174,24 +191,25 @@ export function MenuGroup(
   return (
     <Popover {...popover} content={childMenu} data-ui="MenuGroup__popover" open={open}>
       <Selectable
-        data-as={as}
+        // data-as={as}
         data-ui="MenuGroup"
-        forwardedAs={as}
-        {...restProps}
+        // forwardedAs={as}
+        {...rest}
         aria-pressed={as === 'button' ? withinMenu : undefined}
-        data-pressed={as !== 'button' ? withinMenu : undefined}
-        data-selected={!withinMenu && active ? '' : undefined}
-        $radius={useArrayProp(radius)}
-        $tone={tone}
-        $scheme={scheme}
+        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={space} padding={padding}>
+        <Flex gap={gap} padding={padding}>
           {IconComponent && (
             <Text size={fontSize}>
               {isValidElement(IconComponent) && IconComponent}
@@ -213,5 +231,3 @@ export function MenuGroup(
     </Popover>
   )
 }
-
-MenuGroup.displayName = 'MenuGroup'