@sanity/ui 4.0.0-static.4 → 4.0.0-static.40

package/src/core/components/menu/{menuButton.tsx → MenuButton.tsx}

@@ -13,10 +13,10 @@ import {
   useState,
 } from 'react'
 
-import type {ButtonProps} from '../../primitives/button/button'
-import {Popover, type PopoverProps} from '../../primitives/popover/popover'
+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'
+import type {MenuProps} from './Menu'
 
 /** @public */
 export type MenuButtonProps = {
@@ -29,7 +29,7 @@ export type MenuButtonProps = {
   menu?: ReactElement
   onClose?: () => void
   onOpen?: () => void
-  popover?: Omit<PopoverProps, 'content' | 'open'>
+  popover?: Omit<PopoverProps<'div'>, 'content' | 'open'>
 
   ref?: ForwardedRef<HTMLButtonElement | null>
 }
@@ -159,11 +159,16 @@ export function MenuButton(props: MenuButtonProps): React.JSX.Element {
     [menuElements],
   )
 
-  const handleItemClick = useCallback(() => {
-    setOpen(false)
-    if (disableRestoreFocusOnClose) return
-    if (buttonElement) buttonElement.focus()
-  }, [buttonElement, disableRestoreFocusOnClose])
+  const handleItemClick = useCallback(
+    (e: ReactMouseEvent<HTMLButtonElement>) => {
+      if (e.defaultPrevented) return
+
+      setOpen(false)
+      if (disableRestoreFocusOnClose) return
+      if (buttonElement) buttonElement.focus()
+    },
+    [buttonElement, disableRestoreFocusOnClose],
+  )
 
   const registerElement = useCallback((el: HTMLElement) => {
     setChildMenuElements((els) => els.concat([el]))

package/src/core/components/menu/{menuContext.ts → MenuContext.ts}

@@ -3,17 +3,16 @@ import {type Context, type MouseEvent as ReactMouseEvent} from 'react'
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 
 export interface MenuContextValue {
-  version: 0.0
+  version: 2
   activeElement: HTMLElement | null
-  activeIndex: number
   mount: (element: HTMLElement | null, selected?: boolean) => () => void
   onClickOutside?: (event: MouseEvent) => void
   onEscape?: () => void
-  onItemClick?: () => void
+  onItemClick?: (event: ReactMouseEvent<HTMLButtonElement>) => void
   onItemMouseEnter?: (event: ReactMouseEvent<HTMLElement>) => void
   onItemMouseLeave?: (event: ReactMouseEvent<HTMLElement>) => void
   registerElement?: (el: HTMLElement) => () => void
 }
 
 export const MenuContext: Context<MenuContextValue | null> =
-  createGlobalScopedContext<MenuContextValue | null>('@sanity/ui/v3/menu', null)
+  createGlobalScopedContext<MenuContextValue | null>('@sanity/ui/v4/menu', null)

package/src/core/components/menu/{menuGroup.tsx → MenuGroup.tsx}

@@ -13,13 +13,13 @@ import {
 } from 'react'
 import {isValidElementType} from 'react-is'
 
-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 {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 {DEFAULT_MENU_ELEMENT, Menu, type MenuProps} from './Menu'
 import {useMenu} from './useMenu'
 
 /** @public */
@@ -43,7 +43,7 @@ export type MenuGroupOwnProps = RadiusStyleProps & {
     | 'onBlurCapture'
   >
   padding?: ResponsiveProp<Space>
-  popover?: Omit<PopoverProps, 'content' | 'open'>
+  popover?: Omit<PopoverProps<'div'>, 'content' | 'open'>
   text?: ReactNode
   tone?: ElementTone
 }
@@ -127,10 +127,13 @@ export function MenuGroup<E extends MenuGroupElementType = typeof DEFAULT_MENU_G
     [onClick],
   )
 
-  const handleChildItemClick = useCallback(() => {
-    setOpen(false)
-    onItemClick?.()
-  }, [onItemClick])
+  const handleChildItemClick = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      setOpen(false)
+      onItemClick?.(e)
+    },
+    [onItemClick],
+  )
 
   const handleMenuMouseEnter = useCallback(() => setWithinMenu(true), [])
 
@@ -139,11 +142,13 @@ export function MenuGroup<E extends MenuGroupElementType = typeof DEFAULT_MENU_G
 
   // 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])
 

package/src/core/components/menu/{menuItem.tsx → MenuItem.tsx}

@@ -19,12 +19,12 @@ import {
 } from 'react'
 import {isValidElementType} from 'react-is'
 
-import {Box} from '../../primitives/box/box'
-import {Flex} from '../../primitives/flex/flex'
-import {Selectable} from '../../primitives/selectable/selectable'
-import {Text} from '../../primitives/text/text'
+import {Box} from '../../primitives/box/Box'
+import {Flex} from '../../primitives/flex/Flex'
+import {Selectable} from '../../primitives/selectable/Selectable'
+import {Text} from '../../primitives/text/Text'
 import type {ComponentType, Props} from '../../types'
-import {Hotkeys} from '../hotkeys/hotkeys'
+import {Hotkeys} from '../hotkeys/Hotkeys'
 import {useMenu} from './useMenu'
 
 /** @public */
@@ -104,7 +104,7 @@ export function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITE
     (event: MouseEvent<HTMLButtonElement>) => {
       if (disabled) return
       if (onClick) onClick(event)
-      if (onItemClick) onItemClick()
+      if (onItemClick) onItemClick(event)
     },
     [disabled, onClick, onItemClick],
   )
@@ -132,9 +132,6 @@ export function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITE
       data-ui="MenuItem"
       {...rest}
       as={as}
-      data-pressed={pressed ? '' : undefined}
-      data-selected={active ? '' : undefined}
-      data-disabled={disabled ? '' : undefined}
       radius={radius}
       disabled={disabled}
       onClick={handleClick}
@@ -142,6 +139,7 @@ export function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITE
       onMouseLeave={onItemMouseLeave}
       ref={setRef}
       role={role}
+      selected={active}
       tabIndex={-1}
       tone={tone}
       type={as === 'button' ? 'button' : undefined}

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

@@ -0,0 +1,27 @@
+import {Menu, MenuItem, Text} from '@sanity/ui'
+import type {ElementTone} from '@sanity/ui/theme'
+import {useSelect} from '@sanity/ui-workshop'
+
+import {WORKSHOP_BUTTON_TONE_OPTIONS} from '$workshop'
+
+export default function DataPropsStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
+  const tone = useSelect('Tone', WORKSHOP_BUTTON_TONE_OPTIONS, 'default') as ElementTone | undefined
+
+  return (
+    <Menu gap={4} padding={4}>
+      <MenuItem data-enabled="" padding={3} tone={tone}>
+        <Text>MenuItem</Text>
+      </MenuItem>
+      <MenuItem data-hovered="" padding={3} tone={tone}>
+        <Text>MenuItem</Text>
+      </MenuItem>
+      <MenuItem data-pressed="" padding={3} tone={tone}>
+        <Text>MenuItem</Text>
+      </MenuItem>
+      <MenuItem data-selected="" padding={3} tone={tone}>
+        <Text>MenuItem</Text>
+      </MenuItem>
+    </Menu>
+  )
+}

package/src/core/components/menu/__workshop__/{menuButton.tsx → MenuButton.tsx}

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

package/src/core/components/menu/__workshop__/{tones.tsx → Tones.tsx}

@@ -7,12 +7,18 @@ import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 
 export default function TonesStory(): React.JSX.Element {
   const disabled = useBoolean('Disabled', false)
+  // @ts-expect-error - TODO: fix this
   const parentTone = useSelect('Parent tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
 
   return (
     <LayerProvider>
       <Box padding={[4, 5, 6]}>
-        <Card radius={3} shadow={3} tone={parentTone}>
+        <Card
+          radius={3}
+          shadow={3}
+          // @ts-expect-error - TODO: fix this
+          tone={parentTone}
+        >
           <Menu>
             {ELEMENT_TONES.map((tone) => (
               <MenuItem disabled={disabled} icon={CubeIcon} key={tone} text={tone} tone={tone} />

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

@@ -8,82 +8,87 @@ const scope: WorkshopScope = {
     {
       name: 'menu-button',
       title: 'MenuButton',
-      component: lazy(() => import('./menuButton')),
+      component: lazy(() => import('./MenuButton')),
     },
     {
       name: 'nested-menu-items',
       title: 'Nested MenuItems',
-      component: lazy(() => import('./nestedMenu')),
+      component: lazy(() => import('./NestedMenu')),
     },
     {
       name: 'custom-menu-item',
       title: 'Custom MenuItem',
-      component: lazy(() => import('./customMenuItem')),
+      component: lazy(() => import('./CustomMenuItem')),
     },
     {
       name: 'groups',
       title: 'Groups',
-      component: lazy(() => import('./groups')),
+      component: lazy(() => import('./Groups')),
     },
     {
       name: 'menu-group-right',
       title: 'Menu group (right)',
-      component: lazy(() => import('./menuGroupRight')),
+      component: lazy(() => import('./MenuGroupRight')),
     },
     {
       name: 'tones',
       title: 'Tones',
-      component: lazy(() => import('./tones')),
+      component: lazy(() => import('./Tones')),
     },
     {
       name: 'selected-item',
       title: 'Selected item',
-      component: lazy(() => import('./selectedItem')),
+      component: lazy(() => import('./SelectedItem')),
     },
     {
       name: 'closable',
       title: 'Closeable',
-      component: lazy(() => import('./closableMenuButton')),
+      component: lazy(() => import('./ClosableMenuButton')),
     },
     {
       name: 'without-arrow',
       title: 'Without arrow',
-      component: lazy(() => import('./withoutArrow')),
+      component: lazy(() => import('./WithoutArrow')),
     },
     {
       name: 'constrained-in-boundary',
       title: 'Constrained in boundary',
-      component: lazy(() => import('./constrainedInBoundary')),
+      component: lazy(() => import('./ConstrainedInBoundary')),
     },
     {
       name: 'as-component',
       title: 'As component',
-      component: lazy(() => import('./asComponent')),
+      component: lazy(() => import('./AsComponent')),
     },
     {
       name: 'disable-focus-on-close',
       title: 'Disable focus on close',
-      component: lazy(() => import('./disableFocusOnClose')),
+      component: lazy(() => import('./DisableFocusOnClose')),
     },
     {
       name: 'menu-button-with-on-close',
       title: 'MenuButton with on close',
-      component: lazy(() => import('./onCloseMenuButton')),
+      component: lazy(() => import('./OnCloseMenuButton')),
     },
     {
-      name: 'shouldFocus',
+      name: 'should-focus',
       title: 'Menu with shouldFocus',
-      component: lazy(() => import('./shouldFocus')),
+      component: lazy(() => import('./ShouldFocus')),
     },
     {
       name: 'avatar',
       title: 'Avatar menu',
-      component: lazy(() => import('./avatarMenu')),
+      component: lazy(() => import('./AvatarMenu')),
     },
     {
       name: 'custom-selected-state',
       title: 'Custom selected state',
-      component: lazy(() => import('./customSelectedState')),
+      component: lazy(() => import('./CustomSelectedState')),
+    },
+    {
+      name: 'data-props',
+      title: 'Data props',
+      component: lazy(() => import('./DataProps')),
     },
   ],
 }

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

@@ -1,10 +1,10 @@
-import {useContext} from 'react'
+import {use} from 'react'
 
 import {isRecord} from '../../lib/isRecord'
-import {MenuContext, type MenuContextValue} from './menuContext'
+import {MenuContext, type MenuContextValue} from './MenuContext'
 
 export function useMenu(): MenuContextValue {
-  const value = useContext(MenuContext)
+  const value = use(MenuContext)
 
   if (!value) {
     throw new Error('useMenu(): missing context value')
@@ -12,8 +12,8 @@ export function useMenu(): MenuContextValue {
 
   // 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: 0.0`, it’s not compatible with the current version
-  if (!isRecord(value) || value.version !== 0.0) {
+  // - 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')
   }
 

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

@@ -5,7 +5,6 @@ import {
   type MutableRefObject,
   useCallback,
   useEffect,
-  useMemo,
   useRef,
   useState,
 } from 'react'
@@ -39,12 +38,13 @@ export function useMenuController(props: {
   const elementsRef = useRef<HTMLElement[]>([])
   const [activeIndex, _setActiveIndex] = useState(-1)
   const activeIndexRef = useRef(activeIndex)
-  const activeElement = useMemo(() => elementsRef.current[activeIndex] || null, [activeIndex])
-  const mounted = Boolean(rootElementRef.current)
+  const [activeElement, setActiveElement] = useState<HTMLElement | null>(null)
 
   const setActiveIndex = useCallback((nextActiveIndex: number) => {
     _setActiveIndex(nextActiveIndex)
     activeIndexRef.current = nextActiveIndex
+
+    setActiveElement(elementsRef.current[nextActiveIndex] || null)
   }, [])
 
   const mount = useCallback(
@@ -193,7 +193,7 @@ export function useMenuController(props: {
 
   // Set focus on the currently active element
   useEffect(() => {
-    if (!mounted) return
+    if (!rootElementRef.current) return
 
     const rafId = requestAnimationFrame(() => {
       if (activeIndex === -1) {
@@ -228,7 +228,7 @@ export function useMenuController(props: {
     })
 
     return () => cancelAnimationFrame(rafId)
-  }, [activeIndex, mounted, setActiveIndex, shouldFocus])
+  }, [activeIndex, rootElementRef, setActiveIndex, shouldFocus])
 
   return {
     activeElement,

package/src/core/components/tab/{tab.tsx → Tab.tsx}

@@ -10,7 +10,7 @@ import {
   useRef,
 } from 'react'
 
-import {Button} from '../../primitives/button/button'
+import {Button} from '../../primitives/button/Button'
 import type {ComponentType, Props} from '../../types'
 
 /** @public */

package/src/core/components/tab/{tabList.tsx → TabList.tsx}

@@ -7,9 +7,9 @@ import {
   useState,
 } from 'react'
 
-import {Flex, type FlexOwnProps} from '../../primitives/flex/flex'
+import {Flex, type FlexOwnProps} from '../../primitives/flex/Flex'
 import type {ComponentType, Props} from '../../types'
-import type {TabProps} from './tab'
+import type {TabProps} from './Tab'
 
 /** @public */
 export const DEFAULT_TAB_LIST_ELEMENT = 'div'

package/src/core/components/tab/{tabPanel.tsx → TabPanel.tsx}

@@ -1,4 +1,4 @@
-import {Box, type BoxOwnProps} from '../../primitives/box/box'
+import {Box, type BoxOwnProps} from '../../primitives/box/Box'
 import type {ComponentType, Props} from '../../types'
 
 /** @public */

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

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'example',
       title: 'Example',
-      component: lazy(() => import('./example')),
+      component: lazy(() => import('./Example')),
     },
   ],
 }

package/src/core/components/toast/{toast.test.tsx → Toast.test.tsx}

@@ -2,7 +2,7 @@ import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '$test/utils'
 
-import {ToastContext} from './toastContext'
+import {ToastContext} from './ToastContext'
 import type {ToastContextValue} from './types'
 import {useToast} from './useToast'
 
@@ -26,9 +26,9 @@ describe('components/toast', () => {
         }
 
         return (
-          <ToastContext.Provider value={value}>
+          <ToastContext value={value}>
             <Debug />
-          </ToastContext.Provider>
+          </ToastContext>
         )
       }
 
@@ -53,12 +53,12 @@ describe('components/toast', () => {
 
       function Root() {
         return (
-          <ToastContext.Provider
+          <ToastContext
             // @ts-expect-error - we want to test the error case
             value={undefined}
           >
             <Debug />
-          </ToastContext.Provider>
+          </ToastContext>
         )
       }
 
@@ -84,12 +84,12 @@ describe('components/toast', () => {
         // NOTE: we’re testing this because the context value may be a function in the future
 
         return (
-          <ToastContext.Provider
+          <ToastContext
             // @ts-expect-error - we want to test the error case
             value={() => ({version: 1})}
           >
             <Debug />
-          </ToastContext.Provider>
+          </ToastContext>
         )
       }
 

package/src/core/components/toast/{toast.tsx → Toast.tsx}

@@ -4,12 +4,12 @@ import {motion, type Variant, type Variants} from 'framer-motion'
 import {type ReactNode} from 'react'
 
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
-import {Box} from '../../primitives/box/box'
-import {Button} from '../../primitives/button/button'
-import {Card} from '../../primitives/card/card'
-import {Flex} from '../../primitives/flex/flex'
-import {Stack} from '../../primitives/stack/stack'
-import {Text} from '../../primitives/text/text'
+import {Box} from '../../primitives/box/Box'
+import {Button} from '../../primitives/button/Button'
+import {Card} from '../../primitives/card/Card'
+import {Flex} from '../../primitives/flex/Flex'
+import {Stack} from '../../primitives/stack/Stack'
+import {Text} from '../../primitives/text/Text'
 import type {ComponentType, Props} from '../../types'
 
 /** @internal */

package/src/core/components/toast/{toastContext.ts → ToastContext.ts}

@@ -4,4 +4,4 @@ import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 import type {ToastContextValue} from './types'
 
 export const ToastContext: Context<ToastContextValue | null> =
-  createGlobalScopedContext<ToastContextValue | null>('@sanity/ui/v3/toast', null)
+  createGlobalScopedContext<ToastContextValue | null>('@sanity/ui/v4/toast', null)

package/src/core/components/toast/{toastLayer.tsx → ToastLayer.tsx}

@@ -1,6 +1,6 @@
 import {type GapStyleProps, type PaddingStyleProps, toastLayer} from '@sanity/ui/css'
 
-import {Grid} from '../../primitives/grid/grid'
+import {Grid} from '../../primitives/grid/Grid'
 import {useLayer} from '../../primitives/layer/useLayer'
 import type {ComponentType, Props} from '../../types'
 

package/src/core/components/toast/{toastProvider.tsx → ToastProvider.tsx}

@@ -3,10 +3,10 @@ import {AnimatePresence} from 'framer-motion'
 import {startTransition, useMemo, useState} from 'react'
 
 import {useMounted} from '../../hooks/useMounted'
-import {LayerProvider} from '../../primitives/layer/layerProvider'
-import {Toast} from './toast'
-import {ToastContext} from './toastContext'
-import {ToastLayer, type ToastLayerProps} from './toastLayer'
+import {LayerProvider} from '../../primitives/layer/LayerProvider'
+import {Toast} from './Toast'
+import {ToastContext} from './ToastContext'
+import {ToastLayer, type ToastLayerProps} from './ToastLayer'
 import {generateToastId} from './toastState'
 import type {ToastContextValue, ToastParams} from './types'
 
@@ -60,7 +60,7 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
             })
           }
 
-          const timeoutId = setTimeout(dismiss, duration)
+          const timeoutId = duration === Infinity ? undefined : setTimeout(dismiss, duration)
 
           /**
            * Create updated state by:
@@ -86,7 +86,7 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
   }, [])
 
   return (
-    <ToastContext.Provider value={value}>
+    <ToastContext value={value}>
       {children}
       {mounted && (
         <LayerProvider zOffset={zOffset}>
@@ -107,6 +107,6 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
           </ToastLayer>
         </LayerProvider>
       )}
-    </ToastContext.Provider>
+    </ToastContext>
   )
 }

package/src/core/components/toast/__workshop__/{toast.tsx → Toast.tsx}

@@ -6,6 +6,7 @@ import {WORKSHOP_TOAST_STATUS_OPTIONS} from '$workshop'
 export default function ToastStory(): React.JSX.Element {
   const closable = useBoolean('Closable', false)
   const title = useString('Title', 'Toast title')
+  // @ts-expect-error - TODO: fix this
   const status = useSelect('Status', WORKSHOP_TOAST_STATUS_OPTIONS)
   const description = useText('Description')
   const handleClose = useAction('onClose')
@@ -17,6 +18,7 @@ export default function ToastStory(): React.JSX.Element {
           closable={closable}
           description={description}
           onClose={handleClose}
+          // @ts-expect-error - TODO: fix this
           status={status}
           title={title}
         />

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

@@ -8,12 +8,12 @@ const scope: WorkshopScope = {
     {
       name: 'toast',
       title: 'Toast',
-      component: lazy(() => import('./toast')),
+      component: lazy(() => import('./Toast')),
     },
     {
       name: 'hook',
       title: 'Hook',
-      component: lazy(() => import('./hook')),
+      component: lazy(() => import('./Hook')),
     },
   ],
 }

package/src/core/components/toast/useToast.ts

@@ -1,12 +1,12 @@
-import {useContext} from 'react'
+import {use} from 'react'
 
 import {isRecord} from '../../lib/isRecord'
-import {ToastContext} from './toastContext'
+import {ToastContext} from './ToastContext'
 import type {ToastContextValue} from './types'
 
 /** @public */
 export function useToast(): ToastContextValue {
-  const value = useContext(ToastContext)
+  const value = use(ToastContext)
 
   if (!value) {
     throw new Error('useToast(): missing context value')