@sanity/ui 3.0.0-static.11 → 3.0.0-static.13

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

@@ -1,12 +1,11 @@
 import {ChevronRightIcon} from '@sanity/icons'
-import {GapStyleProps, ResponsiveProp} from '@sanity/ui/css'
-import {FontTextSize, Space} from '@sanity/ui/theme'
+import {RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
+import {FontTextSize, Space, ThemeColorStateToneKey} from '@sanity/ui/theme'
 import {
   ElementType,
   isValidElement,
   KeyboardEvent,
   MouseEvent,
-  ReactElement,
   ReactNode,
   useCallback,
   useEffect,
@@ -16,19 +15,21 @@ import {isValidElementType} from 'react-is'
 
 import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
-import {Props, Radius, SelectableTone} from '../../types'
-import {Menu, MenuProps} from './menu'
+import {ComponentType, Props} from '../../types'
+import {DEFAULT_MENU_ELEMENT, Menu, 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/ui/components/menu/menuItem.tsx

@@ -1,12 +1,10 @@
 import {GapStyleProps, PaddingStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
+import {Space, ThemeColorStateToneKey} from '@sanity/ui/theme'
 import {
   ElementType,
-  ForwardedRef,
-  forwardRef,
   isValidElement,
-  MouseEvent,
-  ReactNode,
+  type MouseEvent,
+  type ReactNode,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -18,36 +16,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 type MenuItemProps<E extends MenuItemElementType = MenuItemElementType> = Omit<
+  Props<MenuItemOwnProps, E>,
+  'role'
+>
 
-/**
- * @public
- */
-export const MenuItem = forwardRef(function MenuItem(
-  props: Props<MenuItemProps, 'div'>,
-  forwardedRef: ForwardedRef<HTMLDivElement>,
+/** @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 +74,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 +92,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 +125,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 +133,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 +144,7 @@ export const MenuItem = forwardRef(function MenuItem(
       onMouseEnter={onItemMouseEnter}
       onMouseLeave={onItemMouseLeave}
       ref={setRef}
+      role="menuitem"
       tabIndex={-1}
       tone={tone}
       type={as === 'button' ? 'button' : undefined}
@@ -175,6 +186,6 @@ export const MenuItem = forwardRef(function MenuItem(
       )}
     </Selectable>
   )
-})
+}
 
-MenuItem.displayName = 'ForwardRef(MenuItem)'
+MenuItem.displayName = 'MenuItem'

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

@@ -0,0 +1,53 @@
+import {codeSkeleton, composeClassNames, ResponsiveProp} from '@sanity/ui/css'
+import {FontCodeSize} from '@sanity/ui/theme'
+
+import {Props} from '../../types'
+import {Skeleton, SkeletonElementType, 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/ui/components/skeleton/headingSkeleton.tsx

@@ -0,0 +1,52 @@
+import {composeClassNames, headingSkeleton, ResponsiveProp} from '@sanity/ui/css'
+import {FontHeadingSize} from '@sanity/ui/theme'
+
+import {Props} from '../../types'
+import {Skeleton, SkeletonElementType, 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/ui/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/ui/components/skeleton/labelSkeleton.tsx

@@ -0,0 +1,51 @@
+import {composeClassNames, labelSkeleton, ResponsiveProp} from '@sanity/ui/css'
+import {FontLabelSize} from '@sanity/ui/theme'
+
+import {Props} from '../../types'
+import {Skeleton, SkeletonElementType, 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'

package/src/ui/components/skeleton/skeleton.tsx

@@ -1,27 +1,46 @@
 import {composeClassNames, skeleton, SkeletonStyleProps} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef, useEffect, useState} from 'react'
+import {useEffect, useState} from 'react'
 
-import {Box, BoxProps} from '../../primitives'
-import {Props} from '../../types'
+import {Box, BoxOwnProps} from '../../primitives'
+import {ComponentType, Props} from '../../types'
+
+/** @beta */
+export const DEFAULT_SKELETON_ELEMENT = 'div'
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export interface SkeletonProps extends SkeletonStyleProps, Omit<BoxProps, 'children'> {
-  animated?: boolean
-  delay?: number
-}
+export type SkeletonOwnProps = BoxOwnProps &
+  SkeletonStyleProps & {
+    animated?: boolean
+    delay?: number
+  }
+
+/** @beta */
+export type SkeletonElementType = 'div' | 'span' | ComponentType
+
+/** @beta */
+export type SkeletonProps<E extends SkeletonElementType = SkeletonElementType> = Props<
+  SkeletonOwnProps,
+  E
+>
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export const Skeleton = forwardRef(function Skeleton(
-  props: Props<SkeletonProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
+export function Skeleton<E extends SkeletonElementType = typeof DEFAULT_SKELETON_ELEMENT>(
+  props: SkeletonProps<E>,
 ) {
-  const {animated = false, className, delay, radius, ...restProps} = props
+  const {
+    animated = false,
+    className,
+    delay,
+    radius,
+    ...rest
+  } = props as SkeletonProps<typeof DEFAULT_SKELETON_ELEMENT>
+
   const [visible, setVisible] = useState<boolean>(delay ? false : true)
 
   useEffect(() => {
@@ -41,13 +60,17 @@ export const Skeleton = forwardRef(function Skeleton(
   return (
     <Box
       data-ui="Skeleton"
-      {...restProps}
-      className={composeClassNames(className, skeleton({radius}))}
+      {...rest}
+      className={composeClassNames(
+        className,
+        skeleton({
+          radius,
+        }),
+      )}
       data-animated={animated ? '' : undefined}
       data-visible={visible ? '' : undefined}
-      ref={ref}
     />
   )
-})
+}
 
-Skeleton.displayName = 'ForwardRef(Skeleton)'
+Skeleton.displayName = 'Skeleton'