@sanity/ui 3.0.0-static.2 → 3.0.0-static.20

package/src/core/components/dialog/useDialog.ts

@@ -1,6 +1,6 @@
 import {useContext} from 'react'
 
-import {DialogContext, DialogContextValue} from './dialogContext'
+import {DialogContext, type DialogContextValue} from './dialogContext'
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.

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

@@ -1,14 +1,14 @@
-import {GapStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
-import {FontTextSize, Space} from '@sanity/ui/theme'
-import {ForwardedRef, forwardRef} from 'react'
+import type {GapStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
+import type {FontTextSize, Space} from '@sanity/ui/theme'
 
-import {Box, Inline, KBD} from '../../primitives'
-import {Props} from '../../types'
+import {Box, KBD} from '../../primitives'
+import type {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface HotkeysProps extends GapStyleProps, RadiusStyleProps {
+/** @public */
+export const DEFAULT_HOTKEYS_ELEMENT = 'kbd'
+
+/** @public */
+export interface HotkeysOwnProps extends GapStyleProps, RadiusStyleProps {
   fontSize?: ResponsiveProp<FontTextSize>
   padding?: ResponsiveProp<Space>
   /** @deprecated Use `gap` instead. */
@@ -16,41 +16,57 @@ export interface HotkeysProps extends GapStyleProps, RadiusStyleProps {
   keys?: string[]
 }
 
+/** @public */
+export type HotkeysElementType = 'kbd' | ComponentType
+
+/** @public */
+export type HotkeysProps<E extends HotkeysElementType = HotkeysElementType> = Props<
+  HotkeysOwnProps,
+  E
+>
+
 /**
  * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
  *
  * @public
  */
-export const Hotkeys = forwardRef(function Hotkeys(
-  props: Props<HotkeysProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
+export function Hotkeys<E extends HotkeysElementType = typeof DEFAULT_HOTKEYS_ELEMENT>(
+  props: HotkeysProps<E>,
 ) {
-  const {fontSize, gap, gapX, gapY, keys, padding, radius, space = 1, ...restProps} = props
+  const {
+    as = DEFAULT_HOTKEYS_ELEMENT,
+    fontSize,
+    gap,
+    gapX,
+    gapY,
+    keys,
+    padding,
+    radius,
+    space = 1,
+    ...rest
+  } = props as HotkeysProps<typeof DEFAULT_HOTKEYS_ELEMENT>
 
   if (!keys || keys.length === 0) {
-    return <></>
+    return undefined
   }
 
   return (
     <Box
-      as="kbd"
+      as={as}
       data-ui="Hotkeys"
-      {...restProps}
+      {...rest}
       display="flex"
       gap={gap ?? space}
       gapX={gapX}
       gapY={gapY}
-      ref={ref}
     >
-      <Inline as="span" gap={gap}>
-        {keys.map((key, i) => (
-          <KBD display="block" fontSize={fontSize} key={i} padding={padding} radius={radius}>
-            {key}
-          </KBD>
-        ))}
-      </Inline>
+      {keys.map((key, i) => (
+        <KBD fontSize={fontSize} key={i} padding={padding} radius={radius}>
+          {key}
+        </KBD>
+      ))}
     </Box>
   )
-})
+}
 
-Hotkeys.displayName = 'ForwardRef(Hotkeys)'
+Hotkeys.displayName = 'Hotkeys'

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

@@ -5,11 +5,11 @@ const CustomLink = forwardRef(function CustomLink(
   props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
   ref: React.ForwardedRef<HTMLAnchorElement>,
 ): React.JSX.Element {
-  const {children, req, ...restProps} = props
+  const {children, req, ...rest} = props
 
   return (
     // eslint-disable-next-line jsx-a11y/anchor-is-valid
-    <a data-required={req} {...restProps} href="#" ref={ref}>
+    <a data-required={req} {...rest} href="#" ref={ref}>
       {children}
     </a>
   )
@@ -25,16 +25,16 @@ export default function AsComponentStory() {
         id="test"
         menu={
           <Menu>
-            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} req="1">
               <Text>Component 1</Text>
             </MenuItem>
-            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} req="2">
               <Text>Component 2</Text>
             </MenuItem>
-            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} req="3">
               <Text>Component 3</Text>
             </MenuItem>
-            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} req="4">
               <Text>Component 3</Text>
             </MenuItem>
           </Menu>

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

@@ -1,5 +1,6 @@
 import {AddIcon} from '@sanity/icons'
-import {Box, Button, Menu, MenuButton, MenuButtonProps, MenuItem, Stack} from '@sanity/ui'
+import {Box, Button, Menu, MenuButton, type MenuButtonProps, MenuItem, Stack} from '@sanity/ui'
+import {vars} from '@sanity/ui/css'
 import {useRef} from 'react'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {
@@ -16,14 +17,14 @@ export default function ClosableMenuButtonStory() {
           button={<Button text="Open" />}
           id="closable-example"
           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" />
                 <MenuItem text="Item 4" />
               </Stack>
-              <Stack padding={1} style={{borderTop: '1px solid var(--card-border-color)'}}>
+              <Stack padding={1} style={{borderTop: `1px solid ${vars.color.border}`}}>
                 <Button
                   icon={AddIcon}
                   onClick={() => {

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

@@ -8,12 +8,12 @@ import {
   Menu,
   MenuButton,
   MenuItem,
-  SelectableTone,
+  type SelectableTone,
   Text,
 } from '@sanity/ui'
 import {useState} from 'react'
 
-import {MenuButtonProps} from '../menuButton'
+import type {MenuButtonProps} from '../menuButton'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {
   constrainSize: true,

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

@@ -7,7 +7,7 @@ export default function CustomMenuItemStory() {
         <LayerProvider>
           <Menu>
             <MenuItem padding={3}>
-              <Stack space={3}>
+              <Stack gap={3}>
                 <Text weight="medium" size={1}>
                   First option
                 </Text>
@@ -17,7 +17,7 @@ export default function CustomMenuItemStory() {
               </Stack>
             </MenuItem>
             <MenuItem padding={3}>
-              <Stack space={3}>
+              <Stack gap={3}>
                 <Text weight="medium" size={1}>
                   Second option
                 </Text>
@@ -28,7 +28,7 @@ export default function CustomMenuItemStory() {
             </MenuItem>
             <MenuDivider />
             <MenuItem padding={3} tone="critical">
-              <Stack space={3}>
+              <Stack gap={3}>
                 <Text weight="medium" size={1}>
                   Dangerous option
                 </Text>

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

@@ -1,5 +1,5 @@
 import {ChevronDownIcon} from '@sanity/icons'
-import {Button, Flex, Menu, MenuButton, MenuButtonProps, MenuItem} from '@sanity/ui'
+import {Button, Flex, Menu, MenuButton, type MenuButtonProps, MenuItem} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {

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

@@ -6,7 +6,7 @@ import {
   LayerProvider,
   Menu,
   MenuButton,
-  MenuButtonProps,
+  type MenuButtonProps,
   MenuDivider,
   MenuGroup,
   MenuItem,
@@ -29,7 +29,7 @@ export default function GroupsStory() {
   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__/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')
+  const layoutTone = useSelect('Layout tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
+  const portal = useBoolean('Portal', false)
 
   const popover: MenuButtonProps['popover'] = useMemo(
     () => ({

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

@@ -14,7 +14,7 @@ import {
   Flex,
   Menu,
   MenuButton,
-  MenuButtonProps,
+  type MenuButtonProps,
   MenuDivider,
   MenuGroup,
   MenuItem,

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

@@ -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,4 +1,13 @@
-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'] = {
@@ -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,
@@ -23,7 +23,7 @@ export default function SelectedItemStory() {
 
   return (
     <Box padding={[4, 5, 6]}>
-      <Stack space={4}>
+      <Stack gap={4}>
         <Code>selectedIndex={selectedIndex}</Code>
 
         <MenuButton

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

@@ -3,11 +3,11 @@ import {Box, Card, LayerProvider, Menu, MenuItem} from '@sanity/ui'
 import {THEME_COLOR_STATE_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')
+  const disabled = useBoolean('Disabled', false)
+  const parentTone = useSelect('Parent tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
 
   return (
     <LayerProvider>

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],

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

@@ -1,17 +1,16 @@
-/** @jest-environment jsdom */
-
 /* eslint-disable no-console */
 
-import {MouseEvent, useCallback, useMemo} from 'react'
+import {type MouseEvent, useCallback, useMemo} from 'react'
+import {describe, expect, it, vi} from 'vitest'
 
 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()
@@ -67,7 +66,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 {
@@ -95,7 +94,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 {

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

@@ -1,32 +1,19 @@
-import {
-  composeClassNames,
-  GapStyleProps,
-  menu,
-  PaddingStyleProps,
-  ResponsiveProp,
-} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
-import {
-  ForwardedRef,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from 'react'
+import {_composeClassNames, 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, useGlobalKeyDown} from '../../hooks'
 import {Box, Stack} from '../../primitives'
-import {Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 import {useLayer} from '../../utils'
-import {MenuContext, MenuContextValue} from './menuContext'
+import {MenuContext, type MenuContextValue} from './menuContext'
 import {useMenuController} from './useMenuController'
 
-/**
- * @public
- */
-export interface MenuProps extends PaddingStyleProps, Pick<GapStyleProps, 'gap'> {
+/** @public */
+export const DEFAULT_MENU_ELEMENT = 'div'
+
+/** @public */
+export type MenuOwnProps = PaddingStyleProps & {
   /**
    * @deprecated Use `shouldFocus="first"` instead.
    */
@@ -35,6 +22,7 @@ export interface MenuProps extends PaddingStyleProps, Pick<GapStyleProps, 'gap'>
    * @deprecated Use `shouldFocus="last"` instead.
    */
   'focusLast'?: boolean
+  'gap'?: ResponsiveProp<Space>
   'onClickOutside'?: (event: MouseEvent) => void
   'onEscape'?: () => void
   'onItemClick'?: () => void
@@ -48,16 +36,20 @@ export interface MenuProps extends PaddingStyleProps, Pick<GapStyleProps, 'gap'>
   // 'onBlurCapture'?: (event: FocusEvent) => void
 }
 
+/** @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: Props<MenuProps, 'div'>,
-  forwardedRef: ForwardedRef<HTMLDivElement>,
-) {
+export function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(props: MenuProps<E>) {
   const {
+    as = DEFAULT_MENU_ELEMENT,
     children,
     className,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -65,7 +57,6 @@ export const Menu = forwardRef(function Menu(
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     focusLast,
     gap,
-    // onBlurCapture,
     onClickOutside,
     onEscape,
     onItemClick,
@@ -73,11 +64,13 @@ export const Menu = forwardRef(function Menu(
     onKeyDown,
     originElement,
     padding = 1,
+    ref: forwardedRef,
     registerElement,
     shouldFocus: _shouldFocus,
     space = 1,
-    ...restProps
-  } = props
+    ...rest
+  } = props as MenuProps<typeof DEFAULT_MENU_ELEMENT>
+
   const shouldFocus =
     _shouldFocus ?? ((props.focusFirst && 'first') || (props.focusLast && 'last') || null)
 
@@ -181,8 +174,9 @@ export const Menu = forwardRef(function Menu(
     <MenuContext.Provider value={value}>
       <Box
         data-ui="Menu"
-        {...restProps}
-        className={composeClassNames(className, menu())}
+        {...rest}
+        as={as}
+        className={_composeClassNames(className, menu())}
         onKeyDown={handleKeyDown}
         overflow="auto"
         outline="none"
@@ -195,6 +189,6 @@ export const Menu = forwardRef(function Menu(
       </Box>
     </MenuContext.Provider>
   )
-})
+}
 
-Menu.displayName = 'ForwardRef(Menu)'
+Menu.displayName = 'Menu'

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

@@ -1,12 +1,11 @@
-import {ThemeColorSchemeKey} from '@sanity/ui/theme'
+import type {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {
   cloneElement,
-  FocusEvent,
-  ForwardedRef,
-  forwardRef,
-  KeyboardEvent,
-  MouseEvent as ReactMouseEvent,
-  ReactElement,
+  type FocusEvent,
+  type ForwardedRef,
+  type KeyboardEvent,
+  type MouseEvent as ReactMouseEvent,
+  type ReactElement,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -15,14 +14,12 @@ import {
   useState,
 } from 'react'
 
-import {ButtonProps, Popover, PopoverProps} from '../../primitives'
-import {Placement, Props, Radius} from '../../types'
-import {MenuProps} from './menu'
+import {type ButtonProps, Popover, type PopoverProps} from '../../primitives'
+import type {Placement, Props, Radius} from '../../types'
+import type {MenuProps} from './menu'
 
-/**
- * @public
- */
-export interface MenuButtonProps {
+/** @public */
+export type MenuButtonProps = {
   /**
    * @beta Do not use in production.
    */
@@ -31,7 +28,7 @@ export interface MenuButtonProps {
    * @deprecated Use `popover={{boundaryElement: element}}` instead.
    */
   boundaryElement?: HTMLElement
-  button: ReactElement<Props<ButtonProps, 'button'>>
+  button: ReactElement<ButtonProps>
   id: string
   menu?: ReactElement
   onClose?: () => void
@@ -58,6 +55,7 @@ export interface MenuButtonProps {
    * @deprecated Use `popover={{preventOverflow: true}}` instead.
    */
   preventOverflow?: boolean
+  ref?: ForwardedRef<HTMLButtonElement | null>
 }
 
 /**
@@ -65,10 +63,7 @@ export interface MenuButtonProps {
  *
  * @public
  */
-export const MenuButton = forwardRef(function MenuButton(
-  props: MenuButtonProps,
-  forwardedRef: ForwardedRef<HTMLButtonElement | null>,
-) {
+export function MenuButton(props: MenuButtonProps) {
   const {
     __unstable_disableRestoreFocusOnClose: disableRestoreFocusOnClose = false,
     boundaryElement: deprecated_boundaryElement,
@@ -83,6 +78,7 @@ export const MenuButton = forwardRef(function MenuButton(
     popover,
     popoverRadius: deprecated_popoverRadius,
     preventOverflow: deprecated_preventOverflow,
+    ref: forwardedRef,
   } = props
   const [open, setOpen] = useState(false)
   const [shouldFocus, setShouldFocus] = useState<'first' | 'last' | null>(null)
@@ -221,7 +217,7 @@ export const MenuButton = forwardRef(function MenuButton(
   const button = useMemo(() => {
     if (!buttonProp) return null
 
-    const buttonProps = {
+    const buttonProps: ButtonProps<'button'> = {
       'data-ui': 'MenuButton',
       id,
       'onClick': handleButtonClick,
@@ -231,7 +227,7 @@ export const MenuButton = forwardRef(function MenuButton(
       'aria-expanded': open,
       'ref': setButtonElement,
       'selected': buttonProp.props.selected ?? open,
-    } satisfies Props<ButtonProps, 'button'> & {ref: ForwardedRef<HTMLButtonElement>}
+    }
 
     return cloneElement(buttonProp, buttonProps)
   }, [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open])
@@ -270,6 +266,6 @@ export const MenuButton = forwardRef(function MenuButton(
       {button || <></>}
     </Popover>
   )
-})
+}
 
-MenuButton.displayName = 'ForwardRef(MenuButton)'
+MenuButton.displayName = 'MenuButton'

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

@@ -1,4 +1,4 @@
-import {MouseEvent as ReactMouseEvent} from 'react'
+import {type MouseEvent as ReactMouseEvent} from 'react'
 
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'