@sanity/ui 3.0.0-static.33 → 3.0.0-static.35

package/src/core/components/hotkeys/hotkeys.tsx

@@ -3,7 +3,7 @@ import type {FontTextSize, Space} from '@sanity/ui/theme'
 
 import {Box} from '../../primitives/box/box'
 import {KBD} from '../../primitives/kbd/kbd'
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 
 /** @public */
 export const DEFAULT_HOTKEYS_ELEMENT = 'kbd'
@@ -12,8 +12,6 @@ export const DEFAULT_HOTKEYS_ELEMENT = 'kbd'
 export interface HotkeysOwnProps extends GapStyleProps, RadiusStyleProps {
   fontSize?: ResponsiveProp<FontTextSize>
   padding?: ResponsiveProp<Space>
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
   keys?: string[]
 }
 
@@ -33,17 +31,16 @@ export type HotkeysProps<E extends HotkeysElementType = HotkeysElementType> = Pr
  */
 export function Hotkeys<E extends HotkeysElementType = typeof DEFAULT_HOTKEYS_ELEMENT>(
   props: HotkeysProps<E>,
-) {
+): React.JSX.Element | undefined {
   const {
     as = DEFAULT_HOTKEYS_ELEMENT,
     fontSize,
-    gap,
+    gap = 1,
     gapX,
     gapY,
     keys,
     padding,
     radius,
-    space = 1,
     ...rest
   } = props as HotkeysProps<typeof DEFAULT_HOTKEYS_ELEMENT>
 
@@ -52,15 +49,7 @@ export function Hotkeys<E extends HotkeysElementType = typeof DEFAULT_HOTKEYS_EL
   }
 
   return (
-    <Box
-      as={as}
-      data-ui="Hotkeys"
-      {...rest}
-      display="flex"
-      gap={gap ?? space}
-      gapX={gapX}
-      gapY={gapY}
-    >
+    <Box as={as} data-ui="Hotkeys" {...rest} display="flex" gap={gap} gapX={gapX} gapY={gapY}>
       {keys.map((key, i) => (
         <KBD fontSize={fontSize} key={i} padding={padding} radius={radius}>
           {key}

package/src/core/components/menu/__workshop__/asComponent.tsx

@@ -15,7 +15,7 @@ const CustomLink = forwardRef(function CustomLink(
   )
 })
 
-export default function AsComponentStory() {
+export default function AsComponentStory(): React.JSX.Element {
   const props = {href: '#'}
 
   return (

package/src/core/components/menu/__workshop__/avatarMenu.tsx

@@ -12,7 +12,7 @@ import {
   Text,
 } from '@sanity/ui'
 
-export default function AvatarMenuStory() {
+export default function AvatarMenuStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center">
       <MenuButton

package/src/core/components/menu/__workshop__/closableMenuButton.tsx

@@ -7,7 +7,7 @@ const POPOVER_PROPS: MenuButtonProps['popover'] = {
   constrainSize: true,
 }
 
-export default function ClosableMenuButtonStory() {
+export default function ClosableMenuButtonStory(): React.JSX.Element {
   const ref = useRef<HTMLButtonElement | null>(null)
 
   return (

package/src/core/components/menu/__workshop__/constrainedInBoundary.tsx

@@ -9,9 +9,9 @@ import {
   MenuButton,
   type MenuButtonProps,
   MenuItem,
-  type SelectableTone,
   Text,
 } from '@sanity/ui'
+import type {ElementTone} from '@sanity/ui/theme'
 import {useState} from 'react'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {
@@ -20,7 +20,7 @@ const POPOVER_PROPS: MenuButtonProps['popover'] = {
   portal: true,
 }
 
-const items: {tone: SelectableTone; message: string}[] = [
+const items: {tone: ElementTone; message: string}[] = [
   {
     tone: 'critical',
     message: 'Critical message',
@@ -91,7 +91,7 @@ const items: {tone: SelectableTone; message: string}[] = [
   },
 ]
 
-export default function ConstrainedInBoundaryStory() {
+export default function ConstrainedInBoundaryStory(): React.JSX.Element {
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
 
   return (

package/src/core/components/menu/__workshop__/customMenuItem.tsx

@@ -1,6 +1,6 @@
 import {Box, Card, LayerProvider, Menu, MenuDivider, MenuItem, Stack, Text} from '@sanity/ui'
 
-export default function CustomMenuItemStory() {
+export default function CustomMenuItemStory(): React.JSX.Element {
   return (
     <Box padding={[4, 5, 6]}>
       <Card radius={3} shadow={2}>

package/src/core/components/menu/__workshop__/customSelectedState.tsx

@@ -8,7 +8,7 @@ const selectedOptions = {
   false: false,
 } as const
 
-export default function CustomSelectedStateStory() {
+export default function CustomSelectedStateStory(): React.JSX.Element {
   const selected = useSelect('Selected', selectedOptions, false)
 
   return (

package/src/core/components/menu/__workshop__/disableFocusOnClose.tsx

@@ -7,7 +7,7 @@ const POPOVER_PROPS: MenuButtonProps['popover'] = {
   matchReferenceWidth: true,
 }
 
-export default function DisableFocusOnCloseStory() {
+export default function DisableFocusOnCloseStory(): React.JSX.Element {
   const disableRestoreFocusOnClose = useBoolean('Disable restore focus on close', false)
 
   return (

package/src/core/components/menu/__workshop__/groups.tsx

@@ -25,7 +25,7 @@ const NESTED_POPOVER_PROPS: MenuButtonProps['popover'] = {
   preventOverflow: true,
 }
 
-export default function GroupsStory() {
+export default function GroupsStory(): React.JSX.Element {
   return (
     <Box padding={[4, 5, 6]}>
       <Card padding={1} radius={3} shadow={1}>

package/src/core/components/menu/__workshop__/index.ts

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'components/menu',
   title: 'Menu',
   stories: [
@@ -86,4 +86,6 @@ export default defineScope({
       component: lazy(() => import('./customSelectedState')),
     },
   ],
-})
+}
+
+export default scope

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

@@ -16,7 +16,7 @@ import {useMemo} from 'react'
 
 import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 
-export default function MenuButtonStory() {
+export default function MenuButtonStory(): React.JSX.Element {
   const layoutTone = useSelect('Layout tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
   const portal = useBoolean('Portal', false)
 
@@ -31,7 +31,7 @@ export default function MenuButtonStory() {
   return (
     <Card height="fill" tone={layoutTone}>
       <Box padding={[4, 5, 6]}>
-        <Grid columns={3} gap={2}>
+        <Grid gridTemplateColumns={3} gap={2}>
           <Button id="prev-button" mode="ghost" text="Prev" />
           <LayerProvider>
             <MenuButton

package/src/core/components/menu/__workshop__/menuGroupRight.tsx

@@ -26,7 +26,7 @@ const POPOVER_PROPS: MenuButtonProps['popover'] = {
   preventOverflow: true,
 }
 
-export default function MenuGroupRightStory() {
+export default function MenuGroupRightStory(): React.JSX.Element {
   return (
     <Card height="fill" tone="transparent">
       <Flex align="center" height="fill" padding={4} sizing="border">

package/src/core/components/menu/__workshop__/nestedMenu.tsx

@@ -1,6 +1,6 @@
 import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem, Stack} from '@sanity/ui'
 
-export default function NestedMenuItems() {
+export default function NestedMenuItems(): React.JSX.Element {
   return (
     <Box padding={[4, 5, 6]}>
       <MenuButton

package/src/core/components/menu/__workshop__/onCloseMenuButton.tsx

@@ -14,7 +14,7 @@ const POPOVER_PROPS: MenuButtonProps['popover'] = {
   constrainSize: true,
 }
 
-export default function OnCloseMenuButton() {
+export default function OnCloseMenuButton(): React.JSX.Element {
   const {push} = useToast()
 
   const handleClose = useCallback(() => {

package/src/core/components/menu/__workshop__/selectedItem.tsx

@@ -18,7 +18,7 @@ const POPOVER_PROPS: MenuButtonProps['popover'] = {
 
 const INITIAL_INDEX = 1
 
-export default function SelectedItemStory() {
+export default function SelectedItemStory(): React.JSX.Element {
   const [selectedIndex, setSelectedIndex] = useState(INITIAL_INDEX)
 
   return (

package/src/core/components/menu/__workshop__/shouldFocus.tsx

@@ -9,7 +9,7 @@ const ITEMS = [...Array(8).keys()].map((num) => ({
 
 const OPTIONS = {first: 'first', last: 'last'}
 
-export default function ShouldFocusStory() {
+export default function ShouldFocusStory(): React.JSX.Element {
   const shouldFocus = useSelect<keyof typeof OPTIONS>('Should focus', OPTIONS, 'first')
 
   const [popoverOpen, setPopoverOpen] = useState<boolean>(false)

package/src/core/components/menu/__workshop__/tones.tsx

@@ -1,11 +1,11 @@
 import {CubeIcon} from '@sanity/icons'
 import {Box, Card, LayerProvider, Menu, MenuItem} from '@sanity/ui'
-import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
+import {ELEMENT_TONES} from '@sanity/ui/theme'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
 import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 
-export default function TonesStory() {
+export default function TonesStory(): React.JSX.Element {
   const disabled = useBoolean('Disabled', false)
   const parentTone = useSelect('Parent tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
 
@@ -14,7 +14,7 @@ export default function TonesStory() {
       <Box padding={[4, 5, 6]}>
         <Card radius={3} shadow={3} tone={parentTone}>
           <Menu>
-            {THEME_COLOR_STATE_TONES.map((tone) => (
+            {ELEMENT_TONES.map((tone) => (
               <MenuItem disabled={disabled} icon={CubeIcon} key={tone} text={tone} tone={tone} />
             ))}
           </Menu>

package/src/core/components/menu/__workshop__/withoutArrow.tsx

@@ -10,7 +10,7 @@ const POPOVER_PROPS: MenuButtonProps['popover'] = {
   placement: 'bottom-start',
 }
 
-export default function WithoutArrowStory() {
+export default function WithoutArrowStory(): React.JSX.Element {
   return (
     <Box padding={[4, 5, 6]}>
       <Stack>

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

@@ -3,7 +3,8 @@
 import {type MouseEvent, useCallback, useMemo} from 'react'
 import {describe, expect, it, vi} from 'vitest'
 
-import {render} from '../../../../test'
+import {render} from '$test/utils'
+
 import {MenuContext, type MenuContextValue} from './menuContext'
 import {useMenu} from './useMenu'
 

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

@@ -7,7 +7,7 @@ import {useGlobalKeyDown} from '../../hooks/useGlobalKeyDown'
 import {Box} from '../../primitives/box/box'
 import {useLayer} from '../../primitives/layer/useLayer'
 import {Stack} from '../../primitives/stack/stack'
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 import {MenuContext, type MenuContextValue} from './menuContext'
 import {useMenuController} from './useMenuController'
 
@@ -16,14 +16,6 @@ export const DEFAULT_MENU_ELEMENT = 'div'
 
 /** @public */
 export type MenuOwnProps = PaddingStyleProps & {
-  /**
-   * @deprecated Use `shouldFocus="first"` instead.
-   */
-  'focusFirst'?: boolean
-  /**
-   * @deprecated Use `shouldFocus="last"` instead.
-   */
-  'focusLast'?: boolean
   'gap'?: ResponsiveProp<Space>
   'onClickOutside'?: (event: MouseEvent) => void
   'onEscape'?: () => void
@@ -32,10 +24,7 @@ export type MenuOwnProps = PaddingStyleProps & {
   'originElement'?: HTMLElement | null
   'registerElement'?: (el: HTMLElement) => () => void
   'shouldFocus'?: 'first' | 'last' | null
-  /** @deprecated Use `gap` property instead. */
-  'space'?: ResponsiveProp<Space>
   'aria-labelledby'?: string
-  // 'onBlurCapture'?: (event: FocusEvent) => void
 }
 
 /** @public */
@@ -49,16 +38,14 @@ export type MenuProps<E extends MenuElementType = MenuElementType> = Props<MenuO
  *
  * @public
  */
-export function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(props: MenuProps<E>) {
+export function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(
+  props: MenuProps<E>,
+): React.JSX.Element {
   const {
     as = DEFAULT_MENU_ELEMENT,
     children,
     className,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    focusFirst,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    focusLast,
-    gap,
+    gap = 1,
     onClickOutside,
     onEscape,
     onItemClick,
@@ -69,12 +56,10 @@ export function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(pr
     ref: forwardedRef,
     registerElement,
     shouldFocus: _shouldFocus,
-    space = 1,
     ...rest
   } = props as MenuProps<typeof DEFAULT_MENU_ELEMENT>
 
-  const shouldFocus =
-    _shouldFocus ?? ((props.focusFirst && 'first') || (props.focusLast && 'last') || null)
+  const shouldFocus = _shouldFocus ?? null
 
   const ref = useRef<HTMLDivElement | null>(null)
 
@@ -187,7 +172,7 @@ export function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(pr
         role="menu"
         tabIndex={-1}
       >
-        <Stack gap={gap ?? space}>{children}</Stack>
+        <Stack gap={gap}>{children}</Stack>
       </Box>
     </MenuContext.Provider>
   )

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

@@ -1,4 +1,3 @@
-import type {Radius, ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {
   cloneElement,
   type FocusEvent,
@@ -16,8 +15,7 @@ import {
 
 import type {ButtonProps} from '../../primitives/button/button'
 import {Popover, type PopoverProps} from '../../primitives/popover/popover'
-import type {Placement} from '../../types/placement'
-import type {Props} from '../../types/props'
+import type {Props} from '../../types'
 import type {MenuProps} from './menu'
 
 /** @public */
@@ -26,37 +24,13 @@ export type MenuButtonProps = {
    * @beta Do not use in production.
    */
   __unstable_disableRestoreFocusOnClose?: boolean
-  /**
-   * @deprecated Use `popover={{boundaryElement: element}}` instead.
-   */
-  boundaryElement?: HTMLElement
   button: ReactElement<ButtonProps>
   id: string
   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>
 }
 
@@ -65,21 +39,15 @@ export type MenuButtonProps = {
  *
  * @public
  */
-export function MenuButton(props: MenuButtonProps) {
+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)
@@ -243,24 +211,10 @@ export function MenuButton(props: MenuButtonProps) {
 
   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 (

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

@@ -1,4 +1,4 @@
-import {type MouseEvent as ReactMouseEvent} from 'react'
+import {type Context, type MouseEvent as ReactMouseEvent} from 'react'
 
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 
@@ -13,19 +13,7 @@ export interface MenuContextValue {
   onItemMouseEnter?: (event: ReactMouseEvent<HTMLElement>) => void
   onItemMouseLeave?: (event: ReactMouseEvent<HTMLElement>) => void
   registerElement?: (el: HTMLElement) => () => void
-
-  /**
-   * @deprecated Use `onItemMouseEnter` instead
-   */
-  onMouseEnter: (event: ReactMouseEvent<HTMLElement>) => void
-
-  /**
-   * @deprecated Use `onItemMouseLeave` instead
-   */
-  onMouseLeave: (event: ReactMouseEvent<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

@@ -1,6 +1,6 @@
 import {menuDivider} from '@sanity/ui/css'
 
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 
 /** @public */
 export const DEFAULT_MENU_DIVIDER_ELEMENT = 'hr'
@@ -21,7 +21,7 @@ export type MenuDividerProps<E extends MenuDividerElementType = MenuDividerEleme
 /** @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,

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

@@ -1,6 +1,6 @@
 import {ChevronRightIcon} from '@sanity/icons'
 import type {RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
-import type {FontTextSize, Space, ThemeColorStateToneKey} from '@sanity/ui/theme'
+import type {ElementTone, FontTextSize, Space} from '@sanity/ui/theme'
 import {
   type ElementType,
   isValidElement,
@@ -18,7 +18,7 @@ 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 type {ComponentType, Props} from '../../types'
 import {DEFAULT_MENU_ELEMENT, Menu, type MenuProps} from './menu'
 import {useMenu} from './useMenu'
 
@@ -44,10 +44,8 @@ export type MenuGroupOwnProps = RadiusStyleProps & {
   >
   padding?: ResponsiveProp<Space>
   popover?: Omit<PopoverProps, 'content' | 'open'>
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
   text?: ReactNode
-  tone?: ThemeColorStateToneKey
+  tone?: ElementTone
 }
 
 /** @public */
@@ -62,36 +60,33 @@ export type MenuGroupProps<E extends MenuGroupElementType = MenuGroupElementType
 /** @public */
 export function MenuGroup<E extends MenuGroupElementType = typeof DEFAULT_MENU_GROUP_ELEMENT>(
   props: MenuGroupProps<E>,
-) {
+): React.JSX.Element {
   const {
     as = DEFAULT_MENU_GROUP_ELEMENT,
     children,
     fontSize = 1,
-    gap,
+    gap = 3,
     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,
+    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)
@@ -101,7 +96,7 @@ export function MenuGroup<E extends MenuGroupElementType = typeof DEFAULT_MENU_G
   const handleMouseEnter = useCallback(
     (event: MouseEvent<HTMLElement>) => {
       setWithinMenu(false)
-      onItemMouseEnter(event)
+      onItemMouseEnter?.(event)
       setOpen(true)
     },
     [onItemMouseEnter],
@@ -214,7 +209,7 @@ export function MenuGroup<E extends MenuGroupElementType = typeof DEFAULT_MENU_G
         tone={tone}
         type={as === 'button' ? 'button' : undefined}
       >
-        <Flex gap={gap ?? space} padding={padding}>
+        <Flex gap={gap} padding={padding}>
           {IconComponent && (
             <Text size={fontSize}>
               {isValidElement(IconComponent) && IconComponent}