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

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

@@ -1,27 +1,46 @@
-import {composeClassNames, skeleton, SkeletonStyleProps} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef, useEffect, useState} from 'react'
+import {_composeClassNames, skeleton, type SkeletonStyleProps} from '@sanity/ui/css'
+import {useEffect, useState} from 'react'
 
-import {Box, BoxProps} from '../../primitives'
-import {Props} from '../../types'
+import {Box, type BoxOwnProps} from '../../primitives'
+import type {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'

package/src/core/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, type ResponsiveProp, textSkeleton} from '@sanity/ui/css'
+import type {FontTextSize} from '@sanity/ui/theme'
 
-import {Props} from '../../types'
-import {Skeleton, SkeletonProps} from './skeleton'
+import type {Props} from '../../types'
+import {Skeleton, type SkeletonElementType, type 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/core/components/tab/__workshop__/example.tsx

@@ -5,14 +5,14 @@ import {useState} from 'react'
 
 export default function ExampleStory() {
   const [tab, setTab] = useState('foo')
-  const useLongTitle = useBoolean('Use long title', false, 'Props') || false
+  const useLongTitle = useBoolean('Use long title', false)
 
   const longTitle =
     "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
 
   return (
     <Box padding={[4, 5, 6]}>
-      <TabList space={[1, 2, 3]}>
+      <TabList gap={[1, 2, 3]}>
         <Tab
           aria-controls="example-panel-foo"
           icon={SunIcon}

package/src/core/components/tab/tab.tsx

@@ -1,11 +1,9 @@
-import {ResponsiveProp} from '@sanity/ui/css'
-import {FontTextSize, Space} from '@sanity/ui/theme'
+import type {ResponsiveProp} from '@sanity/ui/css'
+import type {FontTextSize, Space, ThemeColorStateToneKey} from '@sanity/ui/theme'
 import {
-  ElementType,
-  FocusEvent,
-  ForwardedRef,
-  forwardRef,
-  ReactNode,
+  type ElementType,
+  type FocusEvent,
+  type ReactNode,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -13,12 +11,13 @@ import {
 } from 'react'
 
 import {Button} from '../../primitives'
-import {ButtonTone, Props} from '../../types'
+import type {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.
    */
@@ -30,17 +29,19 @@ export interface TabProps {
   'label'?: ReactNode
   'padding'?: ResponsiveProp<Space>
   'selected'?: boolean
-  'tone'?: ButtonTone
+  'tone'?: ThemeColorStateToneKey
 }
 
-/**
- * @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/core/components/tab/tabList.tsx

@@ -1,42 +1,53 @@
+import {type ResponsiveProp} from '@sanity/ui/css'
+import type {Space} from '@sanity/ui/theme'
 import {
   Children,
   cloneElement,
-  ForwardedRef,
-  forwardRef,
-  KeyboardEvent,
-  ReactElement,
+  type KeyboardEvent,
+  type ReactElement,
   useCallback,
   useState,
 } from 'react'
 
-import {Inline, InlineProps} from '../../primitives'
-import {Props} from '../../types'
-import {TabProps} from './tab'
+import {Flex, type FlexOwnProps} from '../../primitives'
+import type {ComponentType, Props} from '../../types'
+import type {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<FlexOwnProps, 'as' | 'height'> & {
   children: TabListChild[]
+  /** @deprecated Use `gap` instead */
+  space?: ResponsiveProp<Space>
 }
 
-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,
+    gap = 1,
+    space = 1,
+    wrap = 'nowrap',
+    ...rest
+  } = props as TabListProps<typeof DEFAULT_TAB_LIST_ELEMENT>
+
   const [focusedIndex, setFocusedIndex] = useState(-1)
 
   const children = Children.toArray(childrenProp).filter(_isReactElement)
@@ -65,10 +76,22 @@ export const TabList = forwardRef(function TabList(
   )
 
   return (
-    <Inline data-ui="TabList" {...restProps} onKeyDown={handleKeyDown} ref={ref} role="tablist">
+    <Flex
+      data-ui="TabList"
+      {...rest}
+      as={as}
+      gap={gap ?? space}
+      onKeyDown={handleKeyDown}
+      role="tablist"
+      wrap={wrap}
+    >
       {tabs}
-    </Inline>
+    </Flex>
   )
-})
+}
+
+TabList.displayName = 'TabList'
 
-TabList.displayName = 'ForwardRef(TabList)'
+function _isReactElement(node: unknown): node is ReactElement<Props<TabProps, 'button'>> {
+  return Boolean(node)
+}

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

@@ -1,12 +1,11 @@
-import {ForwardedRef, forwardRef} from 'react'
+import {Box, type BoxOwnProps} from '../../primitives'
+import type {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,37 @@ 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,
+    children,
+    tabIndex,
+    ...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}
+      tabIndex={tabIndex === undefined ? 0 : tabIndex}
     >
-      {props.children}
+      {children}
     </Box>
   )
-})
+}
 
-TabPanel.displayName = 'ForwardRef(TabPanel)'
+TabPanel.displayName = 'TabPanel'

package/src/core/components/toast/__workshop__/hook.tsx

@@ -6,7 +6,7 @@ export default function HookStory() {
   return (
     <ToastProvider>
       <Box padding={[4, 5, 6]}>
-        <Inline space={2}>
+        <Inline gap={2}>
           <Button
             onClick={() =>
               toast.push({

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

@@ -1,13 +1,13 @@
 import {Box, Container, Toast} from '@sanity/ui'
 import {useAction, useBoolean, useSelect, useString, useText} from '@sanity/ui-workshop'
 
-import {WORKSHOP_TOAST_STATUS_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_TOAST_STATUS_OPTIONS} from '$workshop'
 
 export default function ToastStory() {
-  const closable = useBoolean('Closable', false, 'Props')
-  const title = useString('Title', 'Toast title', 'Props')
-  const status = useSelect('Status', WORKSHOP_TOAST_STATUS_OPTIONS, '', 'Props') || undefined
-  const description = useText('Description', '', 'Props')
+  const closable = useBoolean('Closable', false)
+  const title = useString('Title', 'Toast title')
+  const status = useSelect('Status', WORKSHOP_TOAST_STATUS_OPTIONS)
+  const description = useText('Description')
   const handleClose = useAction('onClose')
 
   return (

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

@@ -1,14 +1,14 @@
-/** @jest-environment jsdom */
+import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '../../../../test'
 import {ToastContext} from './toastContext'
-import {ToastContextValue} from './types'
+import type {ToastContextValue} from './types'
 import {useToast} from './useToast'
 
 describe('components/toast', () => {
   describe('useToast', () => {
     it('should get context value', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootToast = useToast()
@@ -38,7 +38,7 @@ describe('components/toast', () => {
     })
 
     it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {
@@ -66,7 +66,7 @@ describe('components/toast', () => {
     })
 
     it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {