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

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

@@ -1,132 +1,53 @@
-import {
-  codeSkeleton,
-  composeClassNames,
-  headingSkeleton,
-  labelSkeleton,
-  ResponsiveProp,
-  textSkeleton,
-} from '@sanity/ui/css'
-import {FontCodeSize, FontHeadingSize, FontLabelSize, FontTextSize} from '@sanity/ui/theme'
-import {ForwardedRef, forwardRef} from 'react'
+import {composeClassNames, ResponsiveProp, textSkeleton} from '@sanity/ui/css'
+import {FontTextSize} from '@sanity/ui/theme'
 
 import {Props} from '../../types'
-import {Skeleton, SkeletonProps} from './skeleton'
+import {Skeleton, SkeletonElementType, SkeletonOwnProps} from './skeleton'
 
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface TextSkeletonProps extends SkeletonProps {
-  size?: ResponsiveProp<FontTextSize>
-}
+/** @public */
+export const DEFAULT_TEXT_SKELETON_ELEMENT = 'div'
 
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface LabelSkeletonProps extends SkeletonProps {
-  size?: ResponsiveProp<FontLabelSize>
+/** @beta */
+export type TextSkeletonOwnProps = SkeletonOwnProps & {
+  size?: ResponsiveProp<FontTextSize>
 }
 
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface HeadingSkeletonProps extends SkeletonProps {
-  size?: ResponsiveProp<FontHeadingSize>
-}
+/** @public */
+export type TextSkeletonElementType = SkeletonElementType
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export interface CodeSkeletonProps extends SkeletonProps {
-  size?: ResponsiveProp<FontCodeSize>
-}
+export type TextSkeletonProps<E extends TextSkeletonElementType = TextSkeletonElementType> = Props<
+  TextSkeletonOwnProps,
+  E
+>
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export const TextSkeleton = forwardRef(function TextSkeleton(
-  props: Props<TextSkeletonProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {className, size = 2, ...restProps} = props
+export function TextSkeleton<
+  E extends TextSkeletonElementType = typeof DEFAULT_TEXT_SKELETON_ELEMENT,
+>(props: TextSkeletonProps<E>) {
+  const {
+    className,
+    size = 2,
+    ...rest
+  } = props as TextSkeletonProps<typeof DEFAULT_TEXT_SKELETON_ELEMENT>
 
   return (
     <Skeleton
-      data-ui="TextSkeleton"
-      {...restProps}
-      className={composeClassNames(className, textSkeleton({size}))}
-      ref={ref}
+      {...rest}
+      className={composeClassNames(
+        className,
+        textSkeleton({
+          size,
+        }),
+      )}
     />
   )
-})
-
-TextSkeleton.displayName = 'ForwardRef(TextSkeleton)'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const LabelSkeleton = forwardRef(function TextSkeleton(
-  props: Props<LabelSkeletonProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {className, size = 2, ...restProps} = props
-
-  return (
-    <Skeleton
-      data-ui="LabelSkeleton"
-      {...restProps}
-      className={composeClassNames(className, labelSkeleton({size}))}
-      ref={ref}
-    />
-  )
-})
-
-LabelSkeleton.displayName = 'ForwardRef(LabelSkeleton)'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const HeadingSkeleton = forwardRef(function TextSkeleton(
-  props: Props<HeadingSkeletonProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {className, size = 2, ...restProps} = props
-
-  return (
-    <Skeleton
-      {...restProps}
-      className={composeClassNames(className, headingSkeleton({size}))}
-      ref={ref}
-    />
-  )
-})
-
-HeadingSkeleton.displayName = 'ForwardRef(HeadingSkeleton)'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const CodeSkeleton = forwardRef(function TextSkeleton(
-  props: Props<CodeSkeletonProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {className, size = 2, ...restProps} = props
-
-  return (
-    <Skeleton
-      // root
-      {...restProps}
-      className={composeClassNames(className, codeSkeleton({size}))}
-      ref={ref}
-    />
-  )
-})
+}
 
-CodeSkeleton.displayName = 'ForwardRef(CodeSkeleton)'
+TextSkeleton.displayName = 'TextSkeleton'

package/src/ui/components/tab/tab.tsx

@@ -3,8 +3,6 @@ import {FontTextSize, Space} from '@sanity/ui/theme'
 import {
   ElementType,
   FocusEvent,
-  ForwardedRef,
-  forwardRef,
   ReactNode,
   useCallback,
   useEffect,
@@ -13,12 +11,13 @@ import {
 } from 'react'
 
 import {Button} from '../../primitives'
-import {ButtonTone, Props} from '../../types'
+import {ButtonTone, ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface TabProps {
+/** @public */
+export const DEFAULT_TAB_ELEMENT = 'button'
+
+/** @public */
+export type TabOwnProps = {
   /**
    * The `id` of the corresponding `TabPanel` component.
    */
@@ -33,14 +32,16 @@ export interface TabProps {
   'tone'?: ButtonTone
 }
 
-/**
- * @public
- */
-export const Tab = forwardRef(function Tab(
-  props: Props<TabProps, 'button'>,
-  forwardedRef: ForwardedRef<HTMLButtonElement>,
-) {
+/** @public */
+export type TabElementType = 'button' | ComponentType
+
+/** @public */
+export type TabProps<E extends TabElementType = TabElementType> = Props<TabOwnProps, E>
+
+/** @public */
+export function Tab<E extends TabElementType = typeof DEFAULT_TAB_ELEMENT>(props: TabProps<E>) {
   const {
+    as = DEFAULT_TAB_ELEMENT,
     icon,
     id,
     focused,
@@ -49,9 +50,11 @@ export const Tab = forwardRef(function Tab(
     onClick,
     onFocus,
     padding = 2,
+    ref: forwardedRef,
     selected,
-    ...restProps
-  } = props
+    ...rest
+  } = props as TabProps<typeof DEFAULT_TAB_ELEMENT>
+
   const ref = useRef<HTMLButtonElement | null>(null)
   const focusedRef = useRef(false)
 
@@ -82,8 +85,9 @@ export const Tab = forwardRef(function Tab(
   return (
     <Button
       data-ui="Tab"
-      {...restProps}
+      {...rest}
       aria-selected={selected ? 'true' : 'false'}
+      as={as}
       fontSize={fontSize}
       icon={icon}
       id={id}
@@ -100,6 +104,6 @@ export const Tab = forwardRef(function Tab(
       type="button"
     />
   )
-})
+}
 
-Tab.displayName = 'ForwardRef(Tab)'
+Tab.displayName = 'Tab'

package/src/ui/components/tab/tabList.tsx

@@ -1,42 +1,39 @@
-import {
-  Children,
-  cloneElement,
-  ForwardedRef,
-  forwardRef,
-  KeyboardEvent,
-  ReactElement,
-  useCallback,
-  useState,
-} from 'react'
-
-import {Inline, InlineProps} from '../../primitives'
-import {Props} from '../../types'
+import {Children, cloneElement, KeyboardEvent, ReactElement, useCallback, useState} from 'react'
+
+import {Inline, InlineOwnProps} from '../../primitives'
+import {ComponentType, Props} from '../../types'
 import {TabProps} from './tab'
 
-/**
- * @public
- */
+/** @public */
+export const DEFAULT_TAB_LIST_ELEMENT = 'div'
+
+/** @public */
 export type TabListChild = ReactElement<Props<TabProps, 'button'>> | null | undefined | false
 
-/**
- * @public
- */
-export interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
+/** @public */
+export type TabListOwnProps = Omit<InlineOwnProps, 'as' | 'height'> & {
   children: TabListChild[]
 }
 
-function _isReactElement(node: unknown): node is ReactElement<Props<TabProps, 'button'>> {
-  return Boolean(node)
-}
+/** @public */
+export type TabListElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export type TabListProps<E extends TabListElementType = TabListElementType> = Props<
+  TabListOwnProps,
+  E
+>
 
-/**
- * @public
- */
-export const TabList = forwardRef(function TabList(
-  props: Props<TabListProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
+/** @public */
+export function TabList<E extends TabListElementType = typeof DEFAULT_TAB_LIST_ELEMENT>(
+  props: TabListProps<E>,
 ) {
-  const {children: childrenProp, ...restProps} = props
+  const {
+    as = DEFAULT_TAB_LIST_ELEMENT,
+    children: childrenProp,
+    ...rest
+  } = props as TabListProps<typeof DEFAULT_TAB_LIST_ELEMENT>
+
   const [focusedIndex, setFocusedIndex] = useState(-1)
 
   const children = Children.toArray(childrenProp).filter(_isReactElement)
@@ -65,10 +62,14 @@ export const TabList = forwardRef(function TabList(
   )
 
   return (
-    <Inline data-ui="TabList" {...restProps} onKeyDown={handleKeyDown} ref={ref} role="tablist">
+    <Inline data-ui="TabList" {...rest} as={as} onKeyDown={handleKeyDown} role="tablist">
       {tabs}
     </Inline>
   )
-})
+}
+
+TabList.displayName = 'TabList'
 
-TabList.displayName = 'ForwardRef(TabList)'
+function _isReactElement(node: unknown): node is ReactElement<Props<TabProps, 'button'>> {
+  return Boolean(node)
+}

package/src/ui/components/tab/tabPanel.tsx

@@ -1,12 +1,11 @@
-import {ForwardedRef, forwardRef} from 'react'
+import {Box, BoxOwnProps} from '../../primitives'
+import {ComponentType, Props} from '../../types'
 
-import {Box, BoxProps} from '../../primitives'
-import {Props} from '../../types'
+/** @public */
+export const DEFAULT_TAB_PANEL_ELEMENT = 'div'
 
-/**
- * @public
- */
-export interface TabPanelProps extends BoxProps {
+/** @public */
+export type TabPanelOwnProps = BoxOwnProps & {
   /**
    * The `id` of the correlating `Tab` component.
    */
@@ -14,27 +13,34 @@ export interface TabPanelProps extends BoxProps {
   'id': string
 }
 
-/**
- * @public
- */
-export const TabPanel = forwardRef(function TabPanel(
-  props: Props<TabPanelProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
+/** @public */
+export type TabPanelElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export type TabPanelProps<E extends TabPanelElementType = TabPanelElementType> = Props<
+  TabPanelOwnProps,
+  E
+>
+
+/** @public */
+export function TabPanel<E extends TabPanelElementType = typeof DEFAULT_TAB_PANEL_ELEMENT>(
+  props: TabPanelProps<E>,
 ) {
-  const {flex, ...restProps} = props
+  const {as = DEFAULT_TAB_PANEL_ELEMENT, ...rest} = props as TabPanelProps<
+    typeof DEFAULT_TAB_PANEL_ELEMENT
+  >
 
   return (
     <Box
       data-ui="TabPanel"
-      {...restProps}
-      flex={flex}
-      ref={ref}
+      {...rest}
+      as={as}
       role="tabpanel"
       tabIndex={props.tabIndex === undefined ? 0 : props.tabIndex}
     >
       {props.children}
     </Box>
   )
-})
+}
 
-TabPanel.displayName = 'ForwardRef(TabPanel)'
+TabPanel.displayName = 'TabPanel'

package/src/ui/components/toast/toast.tsx

@@ -8,16 +8,17 @@ import {
 } from '@sanity/ui/css'
 import {ThemeColorStateToneKey} from '@sanity/ui/theme'
 import {motion, type Variant, type Variants} from 'framer-motion'
-import {ReactElement, ReactNode} from 'react'
+import {ReactNode} from 'react'
 
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
 import {Box, Button, Card, Flex, Stack, Text} from '../../primitives'
-import {ButtonTone, Props} from '../../types'
+import {ButtonTone, ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface ToastProps extends RadiusStyleProps {
+/** @public */
+export const DEFAULT_TOAST_ELEMENT = 'li'
+
+/** @public */
+export type ToastOwnProps = RadiusStyleProps & {
   closable?: boolean
   description?: ReactNode
   onClose?: () => void
@@ -27,6 +28,12 @@ export interface ToastProps extends RadiusStyleProps {
   updatedAt?: number
 }
 
+/** @public */
+export type ToastElementType = 'li' | ComponentType
+
+/** @public */
+export type ToastProps<E extends ToastElementType = ToastElementType> = Props<ToastOwnProps, E>
+
 const ROLES = {
   error: 'alert',
   warning: 'alert',
@@ -59,13 +66,11 @@ const LONG_ENOUGH_BUT_NOT_TOO_LONG = 1000 * 60 * 60 * 24 * 24
  *
  * @public
  */
-export function Toast(
-  props: Omit<
-    Props<ToastProps, 'div'>,
-    'onDrag' | 'onDragEnd' | 'onDragStart' | 'onAnimationStart'
-  >,
-): ReactElement {
+export function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>(
+  props: ToastProps<E>,
+) {
   const {
+    as = DEFAULT_TOAST_ELEMENT,
     closable,
     description,
     duration,
@@ -74,8 +79,8 @@ export function Toast(
     title,
     status,
     updatedAt,
-    ...restProps
-  } = props
+    ...rest
+  } = props as ToastProps<typeof DEFAULT_TOAST_ELEMENT>
 
   const cardTone = status ? STATUS_CARD_TONE[status] : 'default'
   const buttonTone = status ? BUTTON_TONE[status] : 'default'
@@ -93,11 +98,11 @@ export function Toast(
 
   return (
     <MotionCard
-      as="li"
+      as={as}
       className={toast()}
       data-ui="Toast"
       role={role}
-      {...restProps}
+      {...rest}
       data-has-duration={hasDuration ? '' : undefined}
       custom={visualDuration}
       radius={radius}

package/src/ui/components/toast/toastLayer.tsx

@@ -1,26 +1,44 @@
 import {GapStyleProps, PaddingStyleProps, toastLayer} from '@sanity/ui/css'
-import {ReactNode} from 'react'
 
 import {Grid} from '../../primitives/grid'
+import {ComponentType, Props} from '../../types'
 import {useLayer} from '../../utils'
 
-/**
- * @public
- */
-export interface ToastLayerProps extends GapStyleProps, PaddingStyleProps {
-  children: ReactNode
-}
+/** @internal */
+export const DEFAULT_TOAST_LAYER_ELEMENT = 'ul'
+
+/** @internal */
+export type ToastLayerOwnProps = GapStyleProps & PaddingStyleProps
+
+/** @internal */
+export type ToastLayerElementType = 'ul' | ComponentType
+
+/** @internal */
+export type ToastLayerProps<E extends ToastLayerElementType = ToastLayerElementType> = Props<
+  ToastLayerOwnProps,
+  E
+>
 
 /**
  * @internal
  */
-export function ToastLayer(props: ToastLayerProps): React.JSX.Element {
-  const {children, padding = 4, paddingX, paddingY, gap = 3} = props
+export function ToastLayer<E extends ToastLayerElementType = typeof DEFAULT_TOAST_LAYER_ELEMENT>(
+  props: ToastLayerProps<E>,
+) {
+  const {
+    as = DEFAULT_TOAST_LAYER_ELEMENT,
+    children,
+    padding = 4,
+    paddingX,
+    paddingY,
+    gap = 3,
+  } = props as ToastLayerProps<typeof DEFAULT_TOAST_LAYER_ELEMENT>
+
   const {zIndex} = useLayer()
 
   return (
     <Grid
-      as="ul"
+      as={as}
       className={toastLayer()}
       data-ui="ToastProvider"
       padding={padding}

package/src/ui/components/toast/toastProvider.tsx

@@ -16,17 +16,13 @@ type ToastState = {
   params: ToastParams
 }[]
 
-/**
- * @public
- */
+/** @public */
 export interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
   children?: React.ReactNode
   zOffset?: number | number[]
 }
 
-/**
- * @public
- */
+/** @public */
 export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
   const {children, padding, paddingX, paddingY, gap, zOffset = 1} = props
   const [state, setState] = useState<ToastState>([])

package/src/ui/components/toast/types.ts

@@ -1,8 +1,6 @@
 import {ReactNode} from 'react'
 
-/**
- * @public
- */
+/** @public */
 export interface ToastParams {
   closable?: boolean
   description?: ReactNode
@@ -13,9 +11,7 @@ export interface ToastParams {
   status?: 'error' | 'warning' | 'success' | 'info'
 }
 
-/**
- * @public
- */
+/** @public */
 export interface ToastContextValue {
   version: 0.0
   /**

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

@@ -4,9 +4,7 @@ import {isRecord} from '../../lib/isRecord'
 import {ToastContext} from './toastContext'
 import {ToastContextValue} from './types'
 
-/**
- * @public
- */
+/** @public */
 export function useToast(): ToastContextValue {
   const value = useContext(ToastContext)