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

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

@@ -1,22 +1,34 @@
-import {composeClassNames, menuDivider} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
+import {_composeClassNames, menuDivider} from '@sanity/ui/css'
 
-import {Props} from '../../types'
+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 interface MenuDividerProps {}
-
-/**
- * @public
- */
-export const MenuDivider = forwardRef(function MenuDivider(
-  props: Props<MenuDividerProps, 'div'>,
-  ref: ForwardedRef<HTMLHRElement>,
+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>,
 ) {
-  const {className, ...restProps} = props
+  const {
+    as: Element = DEFAULT_MENU_DIVIDER_ELEMENT,
+    className,
+    ...rest
+  } = props as MenuDividerProps<typeof DEFAULT_MENU_DIVIDER_ELEMENT>
 
-  return <hr {...restProps} className={composeClassNames(className, menuDivider())} ref={ref} />
-})
+  return <Element {...rest} className={_composeClassNames(className, menuDivider())} />
+}
 
 MenuDivider.displayName = 'MenuDivider'

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

@@ -1,34 +1,35 @@
 import {ChevronRightIcon} from '@sanity/icons'
-import {GapStyleProps, ResponsiveProp} from '@sanity/ui/css'
-import {FontTextSize, Space} from '@sanity/ui/theme'
+import type {RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
+import type {FontTextSize, Space, ThemeColorStateToneKey} from '@sanity/ui/theme'
 import {
-  ElementType,
+  type ElementType,
   isValidElement,
-  KeyboardEvent,
-  MouseEvent,
-  ReactElement,
-  ReactNode,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
   useCallback,
   useEffect,
   useState,
 } from 'react'
 import {isValidElementType} from 'react-is'
 
-import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
+import {Box, Flex, Popover, type PopoverProps, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
-import {Props, Radius, SelectableTone} from '../../types'
-import {Menu, MenuProps} from './menu'
+import type {ComponentType, Props} from '../../types'
+import {DEFAULT_MENU_ELEMENT, Menu, type MenuProps} from './menu'
 import {useMenu} from './useMenu'
 
-/**
- * @public
- */
-export interface MenuGroupProps extends GapStyleProps {
+/** @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'
@@ -40,24 +41,30 @@ export interface MenuGroupProps extends GapStyleProps {
   >
   padding?: ResponsiveProp<Space>
   popover?: Omit<PopoverProps, 'content' | 'open'>
-  radius?: Radius | Radius[]
   /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
-  text: ReactNode
-  tone?: SelectableTone
+  text?: ReactNode
+  tone?: ThemeColorStateToneKey
 }
 
-/**
- * @public
- */
-export function MenuGroup(props: Props<MenuGroupProps, 'div'>): ReactElement {
+/** @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>,
+) {
   const {
-    as = 'button',
+    as = DEFAULT_MENU_GROUP_ELEMENT,
     children,
     fontSize = 1,
     gap,
-    gapX,
-    gapY,
     icon: IconComponent,
     menu: menuProps,
     onClick,
@@ -67,8 +74,9 @@ export function MenuGroup(props: Props<MenuGroupProps, 'div'>): ReactElement {
     space = 3,
     text,
     tone = 'default',
-    ...restProps
-  } = props
+    ...rest
+  } = props as MenuGroupProps<typeof DEFAULT_MENU_GROUP_ELEMENT>
+
   const menu = useMenu()
 
   const {
@@ -112,7 +120,7 @@ export function MenuGroup(props: Props<MenuGroupProps, 'div'>): ReactElement {
   )
 
   const handleClick = useCallback(
-    (event: MouseEvent<HTMLDivElement>) => {
+    (event: MouseEvent<HTMLButtonElement>) => {
       onClick?.(event)
 
       setShouldFocus('first')
@@ -166,7 +174,7 @@ export function MenuGroup(props: Props<MenuGroupProps, 'div'>): ReactElement {
     </Menu>
   )
 
-  const handleKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
+  const handleKeyDown = useCallback((event: KeyboardEvent<HTMLButtonElement>) => {
     const target = event.currentTarget
 
     if (document.activeElement !== target) {
@@ -188,7 +196,7 @@ export function MenuGroup(props: Props<MenuGroupProps, 'div'>): ReactElement {
         // data-as={as}
         data-ui="MenuGroup"
         // forwardedAs={as}
-        {...restProps}
+        {...rest}
         aria-pressed={as === 'button' ? withinMenu : undefined}
         as={as}
         data-pressed={as !== 'button' ? withinMenu : undefined}
@@ -202,7 +210,7 @@ export function MenuGroup(props: Props<MenuGroupProps, 'div'>): ReactElement {
         tone={tone}
         type={as === 'button' ? 'button' : undefined}
       >
-        <Flex gap={gap ?? space} gapX={gapX} gapY={gapY} padding={padding}>
+        <Flex gap={gap ?? space} padding={padding}>
           {IconComponent && (
             <Text size={fontSize}>
               {isValidElement(IconComponent) && IconComponent}

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

@@ -1,12 +1,15 @@
-import {GapStyleProps, PaddingStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
+import type {
+  GapStyleProps,
+  PaddingStyleProps,
+  RadiusStyleProps,
+  ResponsiveProp,
+} from '@sanity/ui/css'
+import type {Space, ThemeColorStateToneKey} from '@sanity/ui/theme'
 import {
-  ElementType,
-  ForwardedRef,
-  forwardRef,
+  type ElementType,
   isValidElement,
-  MouseEvent,
-  ReactNode,
+  type MouseEvent,
+  type ReactNode,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -18,36 +21,45 @@ import {isValidElementType} from 'react-is'
 
 import {Box, Flex, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
-import {Props, SelectableTone} from '../../types'
+import type {ComponentType, Props} from '../../types'
 import {Hotkeys} from '../hotkeys'
 import {useMenu} from './useMenu'
 
-/**
- * @public
- */
-export interface MenuItemProps extends GapStyleProps, PaddingStyleProps, RadiusStyleProps {
-  disabled?: boolean
-  fontSize?: number | number[]
-  hotkeys?: string[]
-  icon?: ElementType | ReactNode
-  iconRight?: ElementType | ReactNode
-  pressed?: boolean
-  selected?: boolean
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
-  text?: ReactNode
-  tone?: SelectableTone
-}
+/** @public */
+export const DEFAULT_MENU_ITEM_ELEMENT = 'button'
+
+/** @public */
+export type MenuItemOwnProps = GapStyleProps &
+  PaddingStyleProps &
+  RadiusStyleProps & {
+    disabled?: boolean
+    fontSize?: number | number[]
+    hotkeys?: string[]
+    icon?: ElementType | ReactNode
+    iconRight?: ElementType | ReactNode
+    pressed?: boolean
+    selected?: boolean
+    /** @deprecated Use `gap` instead. */
+    space?: ResponsiveProp<Space>
+    text?: ReactNode
+    tone?: ThemeColorStateToneKey
+  }
+
+/** @public */
+export type MenuItemElementType = 'button' | 'a' | ComponentType
 
-/**
- * @public
- */
-export const MenuItem = forwardRef(function MenuItem(
-  props: Props<MenuItemProps, 'div'>,
-  forwardedRef: ForwardedRef<HTMLDivElement>,
+/** @public */
+export type MenuItemProps<E extends MenuItemElementType = MenuItemElementType> = Omit<
+  Props<MenuItemOwnProps, E>,
+  'role'
+>
+
+/** @public */
+export function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITEM_ELEMENT>(
+  props: MenuItemProps<E>,
 ) {
   const {
-    as = 'button',
+    as = DEFAULT_MENU_ITEM_ELEMENT,
     children,
     disabled,
     fontSize = 1,
@@ -67,12 +79,13 @@ export const MenuItem = forwardRef(function MenuItem(
     paddingLeft,
     pressed,
     radius = 2,
+    ref: forwardedRef,
     selected: selectedProp,
     space = 3,
     text,
     tone = 'default',
-    ...restProps
-  } = props
+    ...rest
+  } = props as MenuItemProps<typeof DEFAULT_MENU_ITEM_ELEMENT>
 
   const menu = useMenu()
   const {
@@ -84,16 +97,19 @@ export const MenuItem = forwardRef(function MenuItem(
   } = menu
   const onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter
   const onItemMouseLeave = _onItemMouseLeave ?? menu.onMouseLeave
-  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
+  const [rootElement, setRootElement] = useState<HTMLButtonElement | null>(null)
   const active = Boolean(activeElement) && activeElement === rootElement
-  const ref = useRef<HTMLDivElement | null>(null)
+  const ref = useRef<HTMLButtonElement | null>(null)
 
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
+  useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
+    forwardedRef,
+    () => ref.current,
+  )
 
   useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp])
 
   const handleClick = useCallback(
-    (event: MouseEvent<HTMLDivElement>) => {
+    (event: MouseEvent<HTMLButtonElement>) => {
       if (disabled) return
       if (onClick) onClick(event)
       if (onItemClick) onItemClick()
@@ -114,7 +130,7 @@ export const MenuItem = forwardRef(function MenuItem(
     [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft],
   )
 
-  const setRef = useCallback((el: HTMLDivElement | null) => {
+  const setRef = useCallback((el: HTMLButtonElement | null) => {
     ref.current = el
     setRootElement(el)
   }, [])
@@ -122,8 +138,7 @@ export const MenuItem = forwardRef(function MenuItem(
   return (
     <Selectable
       data-ui="MenuItem"
-      role="menuitem"
-      {...restProps}
+      {...rest}
       as={as}
       data-pressed={pressed ? '' : undefined}
       data-selected={active ? '' : undefined}
@@ -134,6 +149,7 @@ export const MenuItem = forwardRef(function MenuItem(
       onMouseEnter={onItemMouseEnter}
       onMouseLeave={onItemMouseLeave}
       ref={setRef}
+      role="menuitem"
       tabIndex={-1}
       tone={tone}
       type={as === 'button' ? 'button' : undefined}
@@ -155,9 +171,7 @@ export const MenuItem = forwardRef(function MenuItem(
             </Box>
           )}
 
-          {hotkeys && (
-            <Hotkeys gap={0.5} keys={hotkeys} style={{marginTop: -4, marginBottom: -4}} />
-          )}
+          {hotkeys && <Hotkeys keys={hotkeys} style={{marginTop: -4, marginBottom: -4}} />}
 
           {IconRightComponent && (
             <Text muted size={fontSize}>
@@ -175,6 +189,6 @@ export const MenuItem = forwardRef(function MenuItem(
       )}
     </Selectable>
   )
-})
+}
 
-MenuItem.displayName = 'ForwardRef(MenuItem)'
+MenuItem.displayName = 'MenuItem'

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

@@ -1,7 +1,7 @@
 import {useContext} from 'react'
 
 import {isRecord} from '../../lib/isRecord'
-import {MenuContext, MenuContextValue} from './menuContext'
+import {MenuContext, type MenuContextValue} from './menuContext'
 
 export function useMenu(): MenuContextValue {
   const value = useContext(MenuContext)

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

@@ -1,8 +1,8 @@
 import {
-  KeyboardEvent,
-  KeyboardEventHandler,
-  MouseEvent,
-  MutableRefObject,
+  type KeyboardEvent,
+  type KeyboardEventHandler,
+  type MouseEvent,
+  type MutableRefObject,
   useCallback,
   useEffect,
   useMemo,

package/src/core/components/skeleton/__workshop__/delay.tsx

@@ -13,10 +13,10 @@ import {
 } from '@sanity/ui'
 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 SkeletonDelayStory() {
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, '', 'Props') || 'default'
+  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
   const animated = useBoolean('Animated', true)
 
   return (
@@ -32,7 +32,7 @@ export default function SkeletonDelayStory() {
               marginRight={3}
               delay={1000}
             />
-            <Stack space={2} flex={1}>
+            <Stack flex={1} gap={2}>
               <HeadingSkeleton
                 size={4}
                 style={{width: '100%'}}

package/src/core/components/skeleton/__workshop__/skeleton.tsx

@@ -13,16 +13,16 @@ import {
 } from '@sanity/ui'
 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 SkeletonStory() {
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, '', 'Props') || 'default'
+  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
   const animated = useBoolean('Animated', true)
 
   return (
     <Box padding={[4, 5, 6]}>
       <Container width={1}>
-        <Stack space={4}>
+        <Stack gap={4}>
           {[1, 2, 3].map((item) => (
             <Card key={item} tone={tone} padding={2} radius={2} border>
               <Flex align="center">
@@ -32,7 +32,7 @@ export default function SkeletonStory() {
                   <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
                   <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
                 </Grid>
-                <Stack space={2} flex={1}>
+                <Stack gap={2} flex={1}>
                   <HeadingSkeleton style={{width: '100%'}} radius={1} animated={animated} />
                   <TextSkeleton style={{width: '100%'}} radius={1} animated={animated} />
                   <LabelSkeleton style={{width: '100%'}} radius={1} animated={animated} />

package/src/core/components/skeleton/codeSkeleton.tsx

@@ -0,0 +1,53 @@
+import {_composeClassNames, codeSkeleton, type ResponsiveProp} from '@sanity/ui/css'
+import type {FontCodeSize} from '@sanity/ui/theme'
+
+import type {Props} from '../../types'
+import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
+
+/** @public */
+export const DEFAULT_CODE_SKELETON_ELEMENT = 'div'
+
+/** @beta */
+export type CodeSkeletonOwnProps = SkeletonOwnProps & {
+  size?: ResponsiveProp<FontCodeSize>
+}
+
+/** @public */
+export type CodeSkeletonElementType = SkeletonElementType
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export type CodeSkeletonProps<E extends CodeSkeletonElementType = CodeSkeletonElementType> = Props<
+  CodeSkeletonOwnProps,
+  E
+>
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function CodeSkeleton<
+  E extends CodeSkeletonElementType = typeof DEFAULT_CODE_SKELETON_ELEMENT,
+>(props: CodeSkeletonProps<E>) {
+  const {
+    className,
+    size = 2,
+    ...rest
+  } = props as CodeSkeletonProps<typeof DEFAULT_CODE_SKELETON_ELEMENT>
+
+  return (
+    <Skeleton
+      {...rest}
+      className={_composeClassNames(
+        className,
+        codeSkeleton({
+          size,
+        }),
+      )}
+    />
+  )
+}
+
+CodeSkeleton.displayName = 'CodeSkeleton'

package/src/core/components/skeleton/headingSkeleton.tsx

@@ -0,0 +1,52 @@
+import {_composeClassNames, headingSkeleton, type ResponsiveProp} from '@sanity/ui/css'
+import type {FontHeadingSize} from '@sanity/ui/theme'
+
+import type {Props} from '../../types'
+import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
+
+/** @public */
+export const DEFAULT_HEADING_SKELETON_ELEMENT = 'div'
+
+/** @beta */
+export type HeadingSkeletonOwnProps = SkeletonOwnProps & {
+  size?: ResponsiveProp<FontHeadingSize>
+}
+
+/** @public */
+export type HeadingSkeletonElementType = SkeletonElementType
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export type HeadingSkeletonProps<
+  E extends HeadingSkeletonElementType = HeadingSkeletonElementType,
+> = Props<HeadingSkeletonOwnProps, E>
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function HeadingSkeleton<
+  E extends HeadingSkeletonElementType = typeof DEFAULT_HEADING_SKELETON_ELEMENT,
+>(props: HeadingSkeletonProps<E>) {
+  const {
+    className,
+    size = 2,
+    ...rest
+  } = props as HeadingSkeletonProps<typeof DEFAULT_HEADING_SKELETON_ELEMENT>
+
+  return (
+    <Skeleton
+      {...rest}
+      className={_composeClassNames(
+        className,
+        headingSkeleton({
+          size,
+        }),
+      )}
+    />
+  )
+}
+
+HeadingSkeleton.displayName = 'HeadingSkeleton'

package/src/core/components/skeleton/index.ts

@@ -1,2 +1,5 @@
+export * from './codeSkeleton'
+export * from './headingSkeleton'
+export * from './labelSkeleton'
 export * from './skeleton'
 export * from './textSkeleton'

package/src/core/components/skeleton/labelSkeleton.tsx

@@ -0,0 +1,51 @@
+import {_composeClassNames, labelSkeleton, type ResponsiveProp} from '@sanity/ui/css'
+import type {FontLabelSize} from '@sanity/ui/theme'
+
+import type {Props} from '../../types'
+import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
+
+/** @public */
+export const DEFAULT_LABEL_SKELETON_ELEMENT = 'div'
+
+/** @beta */
+export type LabelSkeletonOwnProps = SkeletonOwnProps & {
+  size?: ResponsiveProp<FontLabelSize>
+}
+
+/** @public */
+export type LabelSkeletonElementType = SkeletonElementType
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export type LabelSkeletonProps<E extends LabelSkeletonElementType = LabelSkeletonElementType> =
+  Props<LabelSkeletonOwnProps, E>
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function LabelSkeleton<
+  E extends LabelSkeletonElementType = typeof DEFAULT_LABEL_SKELETON_ELEMENT,
+>(props: LabelSkeletonProps<E>) {
+  const {
+    className,
+    size = 2,
+    ...rest
+  } = props as LabelSkeletonProps<typeof DEFAULT_LABEL_SKELETON_ELEMENT>
+
+  return (
+    <Skeleton
+      {...rest}
+      className={_composeClassNames(
+        className,
+        labelSkeleton({
+          size,
+        }),
+      )}
+    />
+  )
+}
+
+LabelSkeleton.displayName = 'LabelSkeleton'