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

package/src/core/primitives/_selectable/selectable.tsx

@@ -1,31 +1,40 @@
-import {_selectable, composeClassNames, SelectableStyleProps} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
+import {_selectable, type SelectableStyleProps} from '@sanity/ui/css'
 
-import {Props, SelectableTone} from '../../types'
-import {Box, BoxProps} from '../box'
+import type {ComponentType, Props, SelectableTone} from '../../types'
+import {Box, type BoxOwnProps} from '../box'
 
 /** @internal */
-export interface SelectableProps extends BoxProps, SelectableStyleProps {
-  disabled?: boolean
-  href?: string
-  tone?: SelectableTone
-  type?: 'button'
-}
+export const DEFAULT_SELECTABLE_ELEMENT = 'button'
 
 /** @internal */
-export const Selectable = forwardRef(function Selectable(
-  props: Props<SelectableProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {className, radius, tone, ...restProps} = props
+export type SelectableOwnProps = BoxOwnProps &
+  SelectableStyleProps & {
+    disabled?: boolean
+    href?: string
+    tone?: SelectableTone
+    type?: 'button'
+  }
 
-  return (
-    <Box
-      {...restProps}
-      className={composeClassNames(className, _selectable({radius, tone}))}
-      ref={ref}
-    />
-  )
-})
+/** @internal */
+export type SelectableElementType = 'button' | 'a' | ComponentType
+
+/** @internal */
+export type SelectableProps<E extends SelectableElementType = SelectableElementType> = Props<
+  SelectableOwnProps,
+  E
+>
 
-Selectable.displayName = 'ForwardRef(Selectable)'
+/** @internal */
+export function Selectable<E extends SelectableElementType = typeof DEFAULT_SELECTABLE_ELEMENT>(
+  props: SelectableProps<E>,
+) {
+  const {
+    as = DEFAULT_SELECTABLE_ELEMENT,
+    className,
+    radius,
+    tone,
+    ...rest
+  } = props as SelectableProps<typeof DEFAULT_SELECTABLE_ELEMENT>
+
+  return <Box {...rest} as={as} className={_selectable({className, radius, tone})} />
+}

package/src/core/primitives/avatar/__workshop__/asButton.tsx

@@ -1,10 +1,10 @@
 import {Avatar, Flex} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '$workshop'
 
 export default function AsButtonStory() {
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')
+  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1)
 
   return (
     <Flex align="center" height="fill" justify="center">

package/src/core/primitives/avatar/__workshop__/stack.tsx

@@ -1,10 +1,10 @@
 import {Avatar, AvatarCounter, AvatarStack, Flex} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '$workshop'
 
 export default function StackStory() {
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')
+  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1)
 
   return (
     <Flex align="center" height="fill" justify="center">

package/src/core/primitives/avatar/__workshop__/withinButton.tsx

@@ -10,11 +10,11 @@ import {Avatar} from '../avatar'
 import {AvatarStack} from '../avatarStack'
 
 export default function WithinButtonStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
+  const disabled = useBoolean('Disabled', false)
 
   return (
     <Container width={1}>
-      <Stack paddingX={4} paddingY={[5, 6, 7]} space={1}>
+      <Stack gap={1} paddingX={4} paddingY={[5, 6, 7]}>
         <Button disabled={disabled} padding={1}>
           <Flex align="center" flex={1} gap={3} padding={2}>
             <Box flex={1}>

package/src/core/primitives/avatar/__workshop__/withinMenuItem.tsx

@@ -13,7 +13,7 @@ import {
 import {useBoolean} from '@sanity/ui-workshop'
 
 export default function WithinMenuItemStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
+  const disabled = useBoolean('Disabled', false)
 
   return (
     <Container width={1}>

package/src/core/primitives/avatar/avatar.tsx

@@ -2,66 +2,72 @@ import {
   avatar,
   avatarArrow,
   avatarImage,
+  avatarImageOutline,
   avatarInitials,
-  composeClassNames,
-  ResponsiveProp,
+  type ResponsiveProp,
 } from '@sanity/ui/css'
-import {AvatarSize, ThemeColorAvatarColorKey} from '@sanity/ui/theme'
-import {ForwardedRef, forwardRef, useCallback, useEffect, useMemo, useState} from 'react'
-import ReactIs from 'react-is'
+import type {AvatarColor, FontLabelSize} from '@sanity/ui/theme'
+import {useCallback, useEffect, useMemo, useState} from 'react'
 
-import {useArrayProp} from '../../hooks'
-import {AvatarPosition, AvatarStatus, Props} from '../../types'
+import {useResponsiveProp} from '../../hooks'
+import type {AvatarPosition, AvatarSize, AvatarStatus, ComponentType, Props} from '../../types'
 import {Box} from '../box'
 import {Label} from '../label'
 
-/**
- * @public
- */
-export interface AvatarProps {
+/** @public */
+export const DEFAULT_AVATAR_ELEMENT = 'span'
+
+/** @public */
+export interface AvatarOwnProps {
   /** @beta */
   __unstable_hideInnerStroke?: boolean
   animateArrowFrom?: AvatarPosition
   arrowPosition?: AvatarPosition
-  color?: ThemeColorAvatarColorKey
+  color?: AvatarColor
   initials?: string
   onImageLoadError?: (event: Error) => void
   size?: ResponsiveProp<AvatarSize>
   src?: string
   /**
    * The status of the entity this Avatar represents.
-   * @alpha
+   * @deprecated Will be removed in next major version.
    */
   status?: AvatarStatus
   title?: string
 }
 
+/** @public */
+export type AvatarElementType = 'a' | 'button' | 'div' | 'span' | ComponentType
+
+/** @public */
+export type AvatarProps<E extends AvatarElementType = AvatarElementType> = Props<AvatarOwnProps, E>
+
 /**
  * Avatars are used to represent people and other agents (e.g. bots).
  *
  * @public
  */
-export const Avatar = forwardRef(function Avatar(
-  props: Props<AvatarProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
+export function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEMENT>(
+  props: AvatarProps<E>,
 ) {
   const {
     __unstable_hideInnerStroke,
-    as: asProp,
+    as: Element = DEFAULT_AVATAR_ELEMENT,
     className,
-    color = 'gray',
+    color = 'magenta',
     src,
     title,
     initials,
     onImageLoadError,
     arrowPosition: arrowPositionProp,
     animateArrowFrom,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     status = 'online',
     size: sizeProp = 1,
-    ...restProps
-  } = props
-  const As = ReactIs.isValidElementType(asProp) ? asProp : 'div'
-  const size = useArrayProp(sizeProp)
+    ...rest
+  } = props as AvatarProps<typeof DEFAULT_AVATAR_ELEMENT>
+
+  const size = useResponsiveProp(sizeProp)
 
   const [arrowPosition, setArrowPosition] = useState<AvatarPosition | undefined>(
     animateArrowFrom || arrowPositionProp || 'inside',
@@ -92,28 +98,25 @@ export const Avatar = forwardRef(function Avatar(
 
   const initialsSize = useMemo(
     () =>
-      size.map((s) => {
-        if (s === 1) return 1
-        if (s === 2) return 3
-        if (s === 3) return 5
+      Object.values(size).map((s) => {
+        if (s === 1) return 1 satisfies FontLabelSize
+        if (s === 2) return 3 satisfies FontLabelSize
+        if (s === 3) return 5 satisfies FontLabelSize
 
-        return 0
-      }),
+        return 0 satisfies FontLabelSize
+      }) as ResponsiveProp<FontLabelSize>,
     [size],
   )
 
   return (
-    <As
-      // data-as={typeof As === 'string' ? As : undefined}
+    <Element
       data-hide-inner-stroke={__unstable_hideInnerStroke ? '' : undefined}
       data-ui="Avatar"
-      {...restProps}
+      {...rest}
       aria-label={title}
-      className={composeClassNames(className, avatar({color, size: sizeProp}))}
+      className={avatar({className, color, size: sizeProp})}
       data-arrow-position={arrowPosition}
       data-image-error={imageError ? '' : undefined}
-      data-status={status}
-      ref={ref}
       title={title}
     >
       <span className={avatarArrow()}>
@@ -126,21 +129,15 @@ export const Avatar = forwardRef(function Avatar(
       </span>
 
       <Box
-        align="center"
+        alignItems="center"
         as="span"
         className={avatarInitials()}
         display="flex"
-        justify="center"
+        justifyContent="center"
         position="absolute"
         inset={0}
       >
-        <Label
-          align="center"
-          as="span"
-          size={initialsSize}
-          style={{color: 'inherit'}}
-          weight="medium"
-        >
+        <Label align="center" as="span" size={initialsSize} weight="medium">
           {initials}
         </Label>
       </Box>
@@ -148,11 +145,9 @@ export const Avatar = forwardRef(function Avatar(
       {src && (
         <Box className={avatarImage()} inset={0} position="absolute">
           <img alt={initials} onError={handleImageError} src={src} />
-          <span />
+          <span className={avatarImageOutline()} />
         </Box>
       )}
-    </As>
+    </Element>
   )
-})
-
-Avatar.displayName = 'ForwardRef(Avatar)'
+}

package/src/core/primitives/avatar/avatarCounter.tsx

@@ -1,62 +1,69 @@
-import {avatarCounter, composeClassNames, ResponsiveProp} from '@sanity/ui/css'
-import {AvatarSize} from '@sanity/ui/theme'
-import {ForwardedRef, forwardRef, useMemo} from 'react'
+import {avatarCounter, type ResponsiveProp} from '@sanity/ui/css'
+import type {AvatarSize, FontLabelSize} from '@sanity/ui/theme'
+import {useMemo} from 'react'
 
-import {useArrayProp} from '../../hooks'
-import {Props} from '../../types'
-import {Box, BoxProps} from '../box'
+import {useResponsiveProp} from '../../hooks'
+import type {ComponentType, Props} from '../../types'
+import {Box} from '../box'
 import {Label} from '../label'
 
-/**
- * @public
- */
-export interface AvatarCounterProps
-  extends Omit<BoxProps, 'align' | 'className' | 'display' | 'justify' | 'paddingX' | 'sizing'> {
+/** @public */
+export const DEFAULT_AVATAR_COUNTER_ELEMENT = 'div'
+
+/** @public */
+export interface AvatarCounterOwnProps {
   count: number
   size?: ResponsiveProp<AvatarSize>
-  /** @deprecated No longer supported. */
-  tone?: 'navbar'
 }
 
-/**
- * @public
- */
-export const AvatarCounter = forwardRef(function AvatarCounter(
-  props: Props<AvatarCounterProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {className, count, size: sizeProp = 1, ...restProps} = props
-  const size = useArrayProp(sizeProp)
-
-  const fontSize = useMemo(
+/** @public */
+export type AvatarCounterElementType = 'button' | 'div' | 'span' | ComponentType
+
+/** @public */
+export type AvatarCounterProps<E extends AvatarCounterElementType = AvatarCounterElementType> =
+  Props<AvatarCounterOwnProps, E>
+
+/** @public */
+export function AvatarCounter<
+  E extends AvatarCounterElementType = typeof DEFAULT_AVATAR_COUNTER_ELEMENT,
+>(props: AvatarCounterProps<E>) {
+  const {
+    as = DEFAULT_AVATAR_COUNTER_ELEMENT,
+    className,
+    count,
+    size: sizeProp = 1,
+    ...rest
+  } = props as AvatarCounterProps<typeof DEFAULT_AVATAR_COUNTER_ELEMENT>
+  const size = useResponsiveProp(sizeProp)
+
+  const labelSize = useMemo(
     () =>
-      size.map((s) => {
-        if (s === 1) return 1
-        if (s === 2) return 3
-        if (s === 3) return 5
+      Object.values(size).map((s) => {
+        if (s === 1) return 1 satisfies FontLabelSize
+        if (s === 2) return 3 satisfies FontLabelSize
+        if (s === 3) return 5 satisfies FontLabelSize
 
-        return 0
-      }),
+        return 0 satisfies FontLabelSize
+      }) as ResponsiveProp<FontLabelSize>,
     [size],
   )
 
   return (
     <Box
       data-ui="AvatarCounter"
-      {...restProps}
-      align="center"
-      className={composeClassNames(className, avatarCounter({size}))}
+      {...rest}
+      alignItems="center"
+      as={as}
+      className={avatarCounter({className, size})}
       display="flex"
-      justify="center"
+      flex="none"
+      justifyContent="center"
       paddingX={2}
-      ref={ref}
       sizing="border"
     >
-      <Label align="center" as="span" size={fontSize} weight="medium">
+      <Label align="center" as="span" size={labelSize} weight="medium">
         {count}
       </Label>
     </Box>
   )
-})
-
-AvatarCounter.displayName = 'ForwardRef(AvatarCounter)'
+}

package/src/core/primitives/avatar/avatarStack.tsx

@@ -1,22 +1,24 @@
-import {avatarStack, composeClassNames, ResponsiveProp} from '@sanity/ui/css'
-import {AvatarSize} from '@sanity/ui/theme'
-import {Children, cloneElement, ForwardedRef, forwardRef, isValidElement, ReactElement} from 'react'
+import {avatarStack, type ResponsiveProp} from '@sanity/ui/css'
+import type {AvatarSize} from '@sanity/ui/theme'
+import {Children, cloneElement, Fragment, isValidElement, type ReactElement} from 'react'
 
-import {useArrayProp} from '../../hooks'
-import {Props} from '../../types'
-import {Box, BoxProps} from '../box'
-import {AvatarProps} from './avatar'
+import {useResponsiveProp} from '../../hooks'
+import type {ComponentType, Props} from '../../types'
+import {Box, type BoxOwnProps} from '../box'
+import type {AvatarProps} from './avatar'
 import {AvatarCounter} from './avatarCounter'
 
-/**
- * @public
- */
-export type AvatarStackChild = ReactElement<Props<AvatarProps, 'div'>> | null | undefined | false
+/** @public */
+export const DEFAULT_AVATAR_STACK_ELEMENT = 'div'
 
-/**
- * @public
- */
-export interface AvatarStackProps extends Omit<BoxProps, 'align' | 'className' | 'display'> {
+/** @public */
+export type AvatarStackChild = ReactElement<AvatarProps<'div'>> | null | undefined | false
+
+/** @public */
+export type AvatarStackOwnProps = Omit<
+  BoxOwnProps,
+  'align' | 'alignItems' | 'display' | 'justify' | 'justifyContent'
+> & {
   children: AvatarStackChild | AvatarStackChild[]
   maxLength?: number
   size?: ResponsiveProp<AvatarSize>
@@ -24,25 +26,33 @@ export interface AvatarStackProps extends Omit<BoxProps, 'align' | 'className' |
   tone?: 'navbar'
 }
 
-/**
- * @public
- */
-export const AvatarStack = forwardRef(function AvatarStack(
-  props: Props<AvatarStackProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
+/** @public */
+export type AvatarStackElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export type AvatarStackProps<E extends AvatarStackElementType = AvatarStackElementType> = Props<
+  AvatarStackOwnProps,
+  E
+>
+
+/** @public */
+export function AvatarStack<E extends AvatarStackElementType = typeof DEFAULT_AVATAR_STACK_ELEMENT>(
+  props: AvatarStackProps<E>,
 ) {
   const {
+    as = DEFAULT_AVATAR_STACK_ELEMENT,
     children: childrenProp,
     className,
     maxLength: maxLengthProp = 4,
     size: sizeProp = 1,
-    ...restProps
-  } = props
+    ...rest
+  } = props as AvatarStackProps<typeof DEFAULT_AVATAR_STACK_ELEMENT>
+
   const children = Children.toArray(childrenProp).filter(isValidElement) as ReactElement<
-    Props<AvatarProps, 'div'>
+    AvatarProps<'div'>
   >[]
   const maxLength = Math.max(maxLengthProp, 0)
-  const size = useArrayProp(sizeProp)
+  const size = useResponsiveProp(sizeProp)
 
   const len = children.length
   const visibleCount = maxLength - 1
@@ -52,31 +62,20 @@ export const AvatarStack = forwardRef(function AvatarStack(
   return (
     <Box
       data-ui="AvatarStack"
-      {...restProps}
-      align="center"
-      className={composeClassNames(className, avatarStack({size}))}
+      {...rest}
+      alignItems="center"
+      as={as}
+      className={avatarStack({className, size})}
       display="flex"
-      ref={ref}
+      justifyContent="flex-start"
     >
-      {len === 0 && (
-        <Box flex="none">
-          <AvatarCounter count={len} size={size} />
-        </Box>
-      )}
+      {len === 0 && <AvatarCounter count={len} size={size} />}
 
-      {len !== 0 && extraCount > 1 && (
-        <Box flex="none">
-          <AvatarCounter count={extraCount} size={size} />
-        </Box>
-      )}
+      {len !== 0 && extraCount > 1 && <AvatarCounter count={extraCount} size={size} />}
 
       {visibleChildren.map((child, childIndex) => (
-        <Box flex="none" key={String(childIndex)}>
-          {cloneElement(child, {size})}
-        </Box>
+        <Fragment key={String(childIndex)}>{cloneElement(child, {size})}</Fragment>
       ))}
     </Box>
   )
-})
-
-AvatarStack.displayName = 'ForwardRef(AvatarStack)'
+}

package/src/core/primitives/avatar/types.ts

@@ -1,9 +1,8 @@
-import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
-
-import {AvatarSize} from '../../types'
+import type {AvatarSize, ThemeColorAvatarColorKey} from '@sanity/ui/theme'
 
 /**
  * @internal
+ * @deprecated This will be removed in next major version.
  */
 export interface AvatarRootStyleProps {
   $color: ThemeColorAvatarColorKey
@@ -11,6 +10,7 @@ export interface AvatarRootStyleProps {
 
 /**
  * @internal
+ * @deprecated This will be removed in next major version.
  */
 export interface ResponsiveAvatarSizeStyleProps {
   $size: AvatarSize[]

package/src/core/primitives/badge/__workshop__/props.tsx

@@ -1,28 +1,17 @@
 import {Badge, Flex} from '@sanity/ui'
 import {useAction, useSelect, useText} from '@sanity/ui-workshop'
 
-import {
-  WORKSHOP_BADGE_MODE_OPTIONS,
-  WORKSHOP_BADGE_TONE_OPTIONS,
-  WORKSHOP_SPACE_OPTIONS,
-} from '../../../../../workshop/constants'
+import {WORKSHOP_BADGE_TONE_OPTIONS, WORKSHOP_SPACE_OPTIONS} from '$workshop'
 
 export default function PropsStory() {
-  const mode = useSelect('Mode (deprecated)', WORKSHOP_BADGE_MODE_OPTIONS, 'default', 'Props')
-  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 1, 'Props')
-  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 1, 'Props')
-  const tone = useSelect('Tone', WORKSHOP_BADGE_TONE_OPTIONS, 'default', 'Props')
-  const textProp = useText('Text', 'Label', 'Props')
+  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 1)
+  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 1)
+  const tone = useSelect('Tone', WORKSHOP_BADGE_TONE_OPTIONS, 'default')
+  const textProp = useText('Text', 'Label')
 
   return (
     <Flex align="center" height="fill" justify="center">
-      <Badge
-        mode={mode}
-        onClick={useAction('onClick')}
-        paddingX={paddingX}
-        paddingY={paddingY}
-        tone={tone}
-      >
+      <Badge onClick={useAction('onClick')} paddingX={paddingX} paddingY={paddingY} tone={tone}>
         {textProp}
       </Badge>
     </Flex>

package/src/core/primitives/badge/__workshop__/tones.tsx

@@ -1,17 +1,12 @@
 import {Badge, Flex} from '@sanity/ui'
 import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
-import {useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_BADGE_MODE_OPTIONS} from '../../../../../workshop/constants'
 
 export default function Tones() {
-  const mode = useSelect('Mode (deprecated)', WORKSHOP_BADGE_MODE_OPTIONS, 'default', 'Props')
-
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Flex align="center" direction="column" gap={2}>
         {THEME_COLOR_STATE_TONES.map((tone) => (
-          <Badge key={tone} mode={mode} tone={tone}>
+          <Badge key={tone} tone={tone}>
             {tone}
           </Badge>
         ))}

package/src/core/primitives/badge/badge.test.tsx

@@ -1,6 +1,5 @@
-/** @jest-environment jsdom */
-
-import {axe} from 'jest-axe'
+import {describe, expect, it} from 'vitest'
+import {axe} from 'vitest-axe'
 
 import {render} from '../../../../test'
 import {Badge} from './badge'