@sanity/ui 3.0.2 → 4.0.0-static.2

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

@@ -6,7 +6,7 @@ import {
   LayerProvider,
   Menu,
   MenuButton,
-  MenuButtonProps,
+  type MenuButtonProps,
   MenuDivider,
   MenuGroup,
   MenuItem,
@@ -25,11 +25,11 @@ 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}>
-        <Inline space={1}>
+        <Inline gap={1}>
           <LayerProvider>
             <MenuButton
               button={<Button fontSize={1} mode="bleed" padding={2} text="File" />}

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

@@ -7,18 +7,18 @@ import {
   LayerProvider,
   Menu,
   MenuButton,
-  MenuButtonProps,
+  type MenuButtonProps,
   MenuDivider,
   MenuItem,
 } from '@sanity/ui'
 import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useMemo} from 'react'
 
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
+import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 
-export default function MenuButtonStory() {
-  const layoutTone = useSelect('Layout tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Props')
-  const portal = useBoolean('Portal', false, 'Props')
+export default function MenuButtonStory(): React.JSX.Element {
+  const layoutTone = useSelect('Layout tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
+  const portal = useBoolean('Portal', false)
 
   const popover: MenuButtonProps['popover'] = useMemo(
     () => ({
@@ -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

@@ -14,7 +14,7 @@ import {
   Flex,
   Menu,
   MenuButton,
-  MenuButtonProps,
+  type MenuButtonProps,
   MenuDivider,
   MenuGroup,
   MenuItem,
@@ -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
@@ -8,7 +8,7 @@ export default function NestedMenuItems() {
         id="nested-example"
         menu={
           <Menu>
-            <Stack space={1}>
+            <Stack gap={1}>
               <MenuItem text="Item 1" />
               <MenuItem text="Item 2" />
             </Stack>

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

@@ -1,11 +1,20 @@
-import {Box, Button, Menu, MenuButton, MenuButtonProps, MenuItem, Stack, useToast} from '@sanity/ui'
+import {
+  Box,
+  Button,
+  Menu,
+  MenuButton,
+  type MenuButtonProps,
+  MenuItem,
+  Stack,
+  useToast,
+} from '@sanity/ui'
 import {useCallback} from 'react'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {
   constrainSize: true,
 }
 
-export default function OnCloseMenuButton() {
+export default function OnCloseMenuButton(): React.JSX.Element {
   const {push} = useToast()
 
   const handleClose = useCallback(() => {
@@ -17,14 +26,14 @@ export default function OnCloseMenuButton() {
 
   return (
     <Box padding={[4, 5, 6]}>
-      <Stack space={2}>
+      <Stack gap={2}>
         <MenuButton
           button={<Button text="With onClose callback" />}
           id="closable-example"
           onClose={handleClose}
           menu={
-            <Menu padding={0} space={0}>
-              <Stack padding={1} space={1}>
+            <Menu gap={0} padding={0}>
+              <Stack gap={1} padding={1}>
                 <MenuItem text="Item 1" />
                 <MenuItem text="Item 2" />
                 <MenuItem text="Item 3" />

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

@@ -5,7 +5,7 @@ import {
   Code,
   Menu,
   MenuButton,
-  MenuButtonProps,
+  type MenuButtonProps,
   MenuDivider,
   MenuItem,
   Stack,
@@ -18,12 +18,12 @@ 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 (
     <Box padding={[4, 5, 6]}>
-      <Stack space={4}>
+      <Stack gap={4}>
         <Code>selectedIndex={selectedIndex}</Code>
 
         <MenuButton

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

@@ -1,12 +1,7 @@
+import {Button, Flex, LayerProvider, Menu, MenuDivider, MenuItem, Popover} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 import {Fragment, useCallback, useState} from 'react'
 
-import {Button, Flex, Popover} from '../../../primitives'
-import {LayerProvider} from '../../../utils'
-import {Menu} from '../menu'
-import {MenuDivider} from '../menuDivider'
-import {MenuItem} from '../menuItem'
-
 const ITEMS = [...Array(8).keys()].map((num) => ({
   title: `Item ${num + 1}`,
   divider: num === 3,
@@ -14,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,20 +1,20 @@
 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__/constants'
+import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 
-export default function TonesStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const parentTone = useSelect('Parent tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Props')
+export default function TonesStory(): React.JSX.Element {
+  const disabled = useBoolean('Disabled', false)
+  const parentTone = useSelect('Parent tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
 
   return (
     <LayerProvider>
       <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

@@ -1,4 +1,4 @@
-import {Box, Button, Menu, MenuButton, MenuButtonProps, MenuItem, Stack} from '@sanity/ui'
+import {Box, Button, Menu, MenuButton, type MenuButtonProps, MenuItem, Stack} from '@sanity/ui'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {
   __unstable_margins: [1, 1, 1, 1],
@@ -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/helpers.ts

@@ -1,4 +1,4 @@
-import {isHTMLAnchorElement, isHTMLButtonElement} from '../../helpers'
+import {isHTMLAnchorElement, isHTMLButtonElement} from '../../helpers/element'
 
 /**
  * @internal

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

@@ -1,17 +1,17 @@
-/** @jest-environment jsdom */
-
 /* eslint-disable no-console */
 
-import React, {useCallback, useMemo} from 'react'
+import {type MouseEvent, useCallback, useMemo} from 'react'
+import {describe, expect, it, vi} from 'vitest'
+
+import {render} from '$test/utils'
 
-import {render} from '../../../../test'
-import {MenuContext, MenuContextValue} from './menuContext'
+import {MenuContext, type MenuContextValue} from './menuContext'
 import {useMenu} from './useMenu'
 
 describe('components/menu', () => {
   describe('useMenu', () => {
     it('should get context value', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootMenu = useMenu()
@@ -23,12 +23,12 @@ describe('components/menu', () => {
 
       function Root() {
         const handleItemMouseEnter = useCallback(
-          (event: React.MouseEvent<HTMLElement>) => console.log(event),
+          (event: MouseEvent<HTMLElement>) => console.log(event),
           [],
         )
 
         const handleItemMouseLeave = useCallback(
-          (event: React.MouseEvent<HTMLElement>) => console.log(event),
+          (event: MouseEvent<HTMLElement>) => console.log(event),
           [],
         )
 
@@ -67,7 +67,7 @@ describe('components/menu', () => {
     })
 
     it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {
@@ -80,10 +80,11 @@ describe('components/menu', () => {
       }
 
       function Root() {
-        const value: any = undefined
-
         return (
-          <MenuContext.Provider value={value}>
+          <MenuContext.Provider
+            // @ts-expect-error - we want to test the error case
+            value={undefined}
+          >
             <Debug />
           </MenuContext.Provider>
         )
@@ -95,7 +96,7 @@ describe('components/menu', () => {
     })
 
     it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {
@@ -109,12 +110,12 @@ describe('components/menu', () => {
 
       function Root() {
         // NOTE: we’re testing this because the context value may be a function in the future
-        const value: any = () => {
-          return {version: 1}
-        }
 
         return (
-          <MenuContext.Provider value={value}>
+          <MenuContext.Provider
+            // @ts-expect-error - we want to test the error case
+            value={() => ({version: 1})}
+          >
             <Debug />
           </MenuContext.Provider>
         )

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

@@ -1,25 +1,22 @@
-import {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'react'
-import {styled} from 'styled-components'
-
-import {useClickOutsideEvent, useGlobalKeyDown} from '../../hooks'
-import {Box, Stack} from '../../primitives'
-import {ResponsivePaddingProps} from '../../primitives/types'
-import {useLayer} from '../../utils'
-import {MenuContext, MenuContextValue} from './menuContext'
+import {menu, type PaddingStyleProps, type ResponsiveProp} from '@sanity/ui/css'
+import type {Space} from '@sanity/ui/theme'
+import {useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'react'
+
+import {useClickOutsideEvent} from '../../hooks/useClickOutsideEvent'
+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'
+import {MenuContext, type MenuContextValue} from './menuContext'
 import {useMenuController} from './useMenuController'
 
-/**
- * @public
- */
-export interface MenuProps extends ResponsivePaddingProps {
-  /**
-   * @deprecated Use `shouldFocus="first"` instead.
-   */
-  'focusFirst'?: boolean
-  /**
-   * @deprecated Use `shouldFocus="last"` instead.
-   */
-  'focusLast'?: boolean
+/** @public */
+export const DEFAULT_MENU_ELEMENT = 'div'
+
+/** @public */
+export type MenuOwnProps = PaddingStyleProps & {
+  'gap'?: ResponsiveProp<Space>
   'onClickOutside'?: (event: MouseEvent) => void
   'onEscape'?: () => void
   'onItemClick'?: () => void
@@ -27,31 +24,28 @@ export interface MenuProps extends ResponsivePaddingProps {
   'originElement'?: HTMLElement | null
   'registerElement'?: (el: HTMLElement) => () => void
   'shouldFocus'?: 'first' | 'last' | null
-  'space'?: number | number[]
   'aria-labelledby'?: string
-  'onBlurCapture'?: (event: FocusEvent) => void
 }
 
-const StyledMenu = styled(Box)`
-  outline: none;
-  overflow: auto;
-`
+/** @public */
+export type MenuElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export type MenuProps<E extends MenuElementType = MenuElementType> = Props<MenuOwnProps, E>
 
 /**
  * The `Menu` component is a building block for application menus.
  *
  * @public
  */
-export const Menu = forwardRef(function Menu(
-  props: MenuProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'role' | 'tabIndex'>,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
-) {
+export function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(
+  props: MenuProps<E>,
+): React.JSX.Element {
   const {
+    as = DEFAULT_MENU_ELEMENT,
     children,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    focusFirst,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    focusLast,
+    className,
+    gap = 1,
     onClickOutside,
     onEscape,
     onItemClick,
@@ -59,13 +53,13 @@ export const Menu = forwardRef(function Menu(
     onKeyDown,
     originElement,
     padding = 1,
+    ref: forwardedRef,
     registerElement,
     shouldFocus: _shouldFocus,
-    space = 1,
-    ...restProps
-  } = props
-  const shouldFocus =
-    _shouldFocus ?? ((props.focusFirst && 'first') || (props.focusLast && 'last') || null)
+    ...rest
+  } = props as MenuProps<typeof DEFAULT_MENU_ELEMENT>
+
+  const shouldFocus = _shouldFocus ?? null
 
   const ref = useRef<HTMLDivElement | null>(null)
 
@@ -80,7 +74,12 @@ export const Menu = forwardRef(function Menu(
     handleItemMouseLeave,
     handleKeyDown,
     mount,
-  } = useMenuController({onKeyDown, originElement, shouldFocus, rootElementRef: ref})
+  } = useMenuController({
+    onKeyDown,
+    originElement,
+    shouldFocus,
+    rootElementRef: ref,
+  })
 
   const unregisterElementRef = useRef<(() => void) | null>(null)
   const handleRefChange = useCallback(
@@ -160,18 +159,21 @@ export const Menu = forwardRef(function Menu(
 
   return (
     <MenuContext.Provider value={value}>
-      <StyledMenu
+      <Box
         data-ui="Menu"
-        {...restProps}
+        {...rest}
+        as={as}
+        className={menu({className})}
         onKeyDown={handleKeyDown}
+        overflow="auto"
+        outline="none"
         padding={padding}
         ref={handleRefChange}
         role="menu"
         tabIndex={-1}
       >
-        <Stack space={space}>{children}</Stack>
-      </StyledMenu>
+        <Stack gap={gap}>{children}</Stack>
+      </Box>
     </MenuContext.Provider>
   )
-})
-Menu.displayName = 'ForwardRef(Menu)'
+}