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

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

@@ -1,10 +1,10 @@
-import {_composeClassNames, type ResponsiveProp, textSkeleton} from '@sanity/ui/css'
+import {type ResponsiveProp, textSkeleton} from '@sanity/ui/css'
 import type {FontTextSize} from '@sanity/ui/theme'
 
 import type {Props} from '../../types'
 import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
 
-/** @public */
+/** @beta */
 export const DEFAULT_TEXT_SKELETON_ELEMENT = 'div'
 
 /** @beta */
@@ -12,7 +12,7 @@ export type TextSkeletonOwnProps = SkeletonOwnProps & {
   size?: ResponsiveProp<FontTextSize>
 }
 
-/** @public */
+/** @beta */
 export type TextSkeletonElementType = SkeletonElementType
 
 /**
@@ -40,14 +40,10 @@ export function TextSkeleton<
   return (
     <Skeleton
       {...rest}
-      className={_composeClassNames(
+      className={textSkeleton({
         className,
-        textSkeleton({
-          size,
-        }),
-      )}
+        size,
+      })}
     />
   )
 }
-
-TextSkeleton.displayName = 'TextSkeleton'

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

@@ -105,5 +105,3 @@ export function Tab<E extends TabElementType = typeof DEFAULT_TAB_ELEMENT>(props
     />
   )
 }
-
-Tab.displayName = 'Tab'

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

@@ -90,8 +90,6 @@ export function TabList<E extends TabListElementType = typeof DEFAULT_TAB_LIST_E
   )
 }
 
-TabList.displayName = 'TabList'
-
 function _isReactElement(node: unknown): node is ReactElement<Props<TabProps, 'button'>> {
   return Boolean(node)
 }

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

@@ -45,5 +45,3 @@ export function TabPanel<E extends TabPanelElementType = typeof DEFAULT_TAB_PANE
     </Box>
   )
 }
-
-TabPanel.displayName = 'TabPanel'

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

@@ -1,11 +1,5 @@
 import {CloseIcon} from '@sanity/icons'
-import {
-  type RadiusStyleProps,
-  toast,
-  toastLoadingBar,
-  toastLoadingBarMask,
-  toastLoadingBarProgress,
-} from '@sanity/ui/css'
+import {type RadiusStyleProps, toast} from '@sanity/ui/css'
 import {motion, type Variant, type Variants} from 'framer-motion'
 import type {ReactNode} from 'react'
 
@@ -23,7 +17,9 @@ export type ToastOwnProps = RadiusStyleProps & {
   onClose?: () => void
   title?: ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
+  /** @deprecated */
   duration?: number
+  /** @deprecated */
   updatedAt?: number
 }
 
@@ -54,10 +50,6 @@ const BUTTON_TONE = {
   info: 'neutral',
 } as const
 
-// Support pattern used by Sanity Studio, that works around the lack of `duration: Infinity` support in older @sanity/ui versions
-// https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value
-const LONG_ENOUGH_BUT_NOT_TOO_LONG = 1000 * 60 * 60 * 24 * 24
-
 /**
  * The `Toast` component gives feedback to users when an action has taken place.
  *
@@ -72,11 +64,13 @@ export function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>
     as = DEFAULT_TOAST_ELEMENT,
     closable,
     description,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     duration,
     onClose,
     radius = 3,
     title,
     status,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     updatedAt,
     ...rest
   } = props as ToastProps<typeof DEFAULT_TOAST_ELEMENT>
@@ -90,7 +84,7 @@ export function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>
   const visualDuration: number = prefersReducedMotion ? 0 : 0.26
   const transition = visualDuration ? {type: 'spring', visualDuration, bounce: 0.25} : {duration: 0}
 
-  const hasDuration = duration && isFinite(duration) && duration < LONG_ENOUGH_BUT_NOT_TOO_LONG
+  // const hasDuration = duration && isFinite(duration) && duration < LONG_ENOUGH_BUT_NOT_TOO_LONG
   const initial: ContainerVariants[] = ['hidden', 'initial']
   const animate: ContainerVariants[] = ['visible', 'slideIn']
   const exit: ContainerVariants[] = ['hidden', 'slideOut']
@@ -102,7 +96,6 @@ export function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>
       data-ui="Toast"
       role={role}
       {...rest}
-      data-has-duration={hasDuration ? '' : undefined}
       custom={visualDuration}
       radius={radius}
       shadow={2}
@@ -145,32 +138,10 @@ export function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>
           </Box>
         )}
       </MotionFlex>
-      {hasDuration && (
-        <MotionBox className={toastLoadingBar()} variants={content} transition={transition}>
-          <Card className={toastLoadingBarMask()} tone={cardTone} radius={radius} />
-          <MotionCard
-            // const MotionToast = motion.create(Card) // StyledToast
-            // const MotionFlex = motion.create(Flex)
-            // const MotionText = motion.create(Text)
-            // const MotionLoadingBar = motion.create(Box) // LoadingBar
-            // const MotionLoadingBarProgress = motion.create(Card)
-
-            className={toastLoadingBarProgress()}
-            key={`progress-${updatedAt}`}
-            tone={cardTone}
-            initial={{scaleX: 0}}
-            animate={{scaleX: 1}}
-            transition={{delay: visualDuration, duration: duration / 1_000, ease: 'linear'}}
-            onAnimationComplete={onClose}
-          />
-        </MotionBox>
-      )}
     </MotionCard>
   )
 }
 
-Toast.displayName = 'Toast'
-
 const container = {
   initial: {y: 32, scale: 0.5, zIndex: 1},
   hidden: {opacity: 0},
@@ -212,4 +183,3 @@ const content = {
 const MotionCard = motion.create(Card)
 const MotionFlex = motion.create(Flex)
 const MotionText = motion.create(Text)
-const MotionBox = motion.create(Box)

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

@@ -52,5 +52,3 @@ export function ToastLayer<E extends ToastLayerElementType = typeof DEFAULT_TOAS
     </Grid>
   )
 }
-
-ToastLayer.displayName = 'ToastLayer'

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

@@ -1,3 +1,4 @@
+import type {ResponsiveProp} from '@sanity/ui/css'
 import {AnimatePresence} from 'framer-motion'
 import {startTransition, useMemo, useState} from 'react'
 
@@ -19,7 +20,7 @@ type ToastState = {
 /** @public */
 export interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
   children?: React.ReactNode
-  zOffset?: number | number[]
+  zOffset?: ResponsiveProp<number>
 }
 
 /** @public */
@@ -105,5 +106,3 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
     </ToastContext.Provider>
   )
 }
-
-ToastProvider.displayName = 'ToastProvider'

package/src/core/components/tree/tree.tsx

@@ -247,5 +247,3 @@ export function Tree<E extends TreeElementType = typeof DEFAULT_TREE_ELEMENT>(pr
     </TreeContext.Provider>
   )
 }
-
-Tree.displayName = 'Tree'

package/src/core/components/tree/treeGroup.tsx

@@ -46,5 +46,3 @@ export const TreeGroup = memo(function TreeGroup(
     </Stack>
   )
 })
-
-TreeGroup.displayName = 'TreeGroup'

package/src/core/components/tree/treeItem.tsx

@@ -1,5 +1,5 @@
 import {ToggleArrowRightIcon} from '@sanity/icons'
-import {_composeClassNames, type ResponsiveProp, treeItem, vars} from '@sanity/ui/css'
+import {type ResponsiveProp, treeItem, vars} from '@sanity/ui/css'
 import type {FontTextSize, Space, ThemeFontWeightKey} from '@sanity/ui/theme'
 import {
   type ElementType,
@@ -166,7 +166,7 @@ export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITE
         data-ui="TreeItem"
         {...(rest as BoxProps<'li'>)}
         as="li"
-        className={_composeClassNames(className, treeItem())}
+        className={treeItem({className})}
         onClick={handleClick}
         ref={rootRef as Ref<HTMLLIElement>}
         role="none"
@@ -203,7 +203,7 @@ export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITE
       data-tree-key={itemKey}
       {...(rest as BoxProps<'a'>)}
       aria-expanded={expanded}
-      className={_composeClassNames(className, treeItem())}
+      className={treeItem({className})}
       onClick={handleClick}
       onKeyDown={handleKeyDown}
       ref={rootRef as Ref<HTMLAnchorElement>}
@@ -228,5 +228,3 @@ export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITE
     </Box>
   )
 }
-
-TreeItem.displayName = 'TreeItem'

package/src/core/helpers/props.ts

@@ -1,4 +1,8 @@
+import type {Breakpoint, ResponsiveProp} from '@sanity/ui/css'
+
 import {EMPTY_ARRAY} from '../constants'
+import {isArray} from '../lib/isArray'
+import {isRecord} from '../lib/isRecord'
 
 /**
  * @internal
@@ -8,3 +12,17 @@ export function _getArrayProp<T>(val: T | T[] | undefined, defaultVal?: T[]): T[
 
   return Array.isArray(val) ? val : [val]
 }
+
+/**
+ * @internal
+ */
+export function _getResponsiveProp<T>(
+  val: ResponsiveProp<T> | undefined,
+  defaultVal?: Partial<Record<Breakpoint, T>>,
+): Partial<Record<Breakpoint, T>> {
+  if (val === undefined) {
+    return (defaultVal || EMPTY_ARRAY) as Partial<Record<Breakpoint, T>>
+  }
+
+  return (isArray(val) || isRecord(val) ? val : [val]) as Partial<Record<Breakpoint, T>>
+}

package/src/core/hooks/index.ts

@@ -10,3 +10,4 @@ export * from './useMatchMedia'
 export * from './useMediaIndex'
 export * from './usePrefersDark'
 export * from './usePrefersReducedMotion'
+export * from './useResponsiveProp'

package/src/core/hooks/useArrayProp.ts

@@ -2,14 +2,11 @@ import {useState} from 'react'
 
 import {_getArrayProp} from '../helpers'
 
-/** @beta */
-// export type ArrayPropPrimitive = string | number | boolean | undefined | null
-
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
+ * @deprecated Use `useResponsiveProp` instead.
  */
-// export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
 export function useArrayProp<T>(val: T | T[] | undefined, defaultVal?: T[]): T[] {
   const [[cachedVal, cachedHash], setCache] = useState<[T[], string]>(() => [
     _getArrayProp(val, defaultVal),

package/src/core/hooks/useResponsiveProp.ts

@@ -0,0 +1,28 @@
+import type {Breakpoint, ResponsiveProp} from '@sanity/ui/css'
+import {useState} from 'react'
+
+import {_getResponsiveProp} from '../helpers'
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function useResponsiveProp<T>(
+  val: ResponsiveProp<T> | undefined,
+  defaultVal?: Partial<Record<Breakpoint, T>>,
+): Partial<Record<Breakpoint, T>> {
+  const [[cachedVal, cachedHash], setCache] = useState<[Partial<Record<Breakpoint, T>>, string]>(
+    () => [_getResponsiveProp(val, defaultVal), JSON.stringify(val ?? defaultVal)],
+  )
+
+  const hash = JSON.stringify(val ?? defaultVal)
+
+  if (hash !== cachedHash) {
+    // If the cached hash has changed, update the cache right away.
+    // Calling setState during render is fine in this case, and preferred over a useEffect loop
+    // https://19.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
+    setCache([_getResponsiveProp(val, defaultVal), hash])
+  }
+
+  return cachedVal
+}

package/src/core/index.ts

@@ -4,6 +4,5 @@ export * from './helpers'
 export * from './hooks'
 export * from './observers'
 export * from './primitives'
-export * from './StyleTags'
 export * from './types'
 export * from './utils'

package/src/core/lib/isArray.ts

@@ -0,0 +1,3 @@
+export function isArray(val: unknown): val is unknown[] {
+  return Array.isArray(val)
+}

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

@@ -1,4 +1,4 @@
-import {_composeClassNames, _selectable, type SelectableStyleProps} from '@sanity/ui/css'
+import {_selectable, type SelectableStyleProps} from '@sanity/ui/css'
 
 import type {ComponentType, Props, SelectableTone} from '../../types'
 import {Box, type BoxOwnProps} from '../box'
@@ -36,9 +36,5 @@ export function Selectable<E extends SelectableElementType = typeof DEFAULT_SELE
     ...rest
   } = props as SelectableProps<typeof DEFAULT_SELECTABLE_ELEMENT>
 
-  return (
-    <Box {...rest} as={as} className={_composeClassNames(className, _selectable({radius, tone}))} />
-  )
+  return <Box {...rest} as={as} className={_selectable({className, radius, tone})} />
 }
-
-Selectable.displayName = 'Selectable'

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

@@ -1,21 +1,21 @@
 import {
-  _composeClassNames,
   avatar,
   avatarArrow,
   avatarImage,
+  avatarImageOutline,
   avatarInitials,
   type ResponsiveProp,
 } from '@sanity/ui/css'
-import type {AvatarColor} from '@sanity/ui/theme'
+import type {AvatarColor, FontLabelSize} from '@sanity/ui/theme'
 import {useCallback, useEffect, useMemo, useState} from 'react'
 
-import {useArrayProp} from '../../hooks'
+import {useResponsiveProp} from '../../hooks'
 import type {AvatarPosition, AvatarSize, AvatarStatus, ComponentType, Props} from '../../types'
 import {Box} from '../box'
 import {Label} from '../label'
 
 /** @public */
-export const DEFAULT_AVATAR_ELEMENT = 'div'
+export const DEFAULT_AVATAR_ELEMENT = 'span'
 
 /** @public */
 export interface AvatarOwnProps {
@@ -67,7 +67,7 @@ export function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEME
     ...rest
   } = props as AvatarProps<typeof DEFAULT_AVATAR_ELEMENT>
 
-  const size = useArrayProp(sizeProp)
+  const size = useResponsiveProp(sizeProp)
 
   const [arrowPosition, setArrowPosition] = useState<AvatarPosition | undefined>(
     animateArrowFrom || arrowPositionProp || 'inside',
@@ -98,13 +98,13 @@ export function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEME
 
   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],
   )
 
@@ -114,7 +114,7 @@ export function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEME
       data-ui="Avatar"
       {...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}
       title={title}
@@ -129,11 +129,11 @@ export function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEME
       </span>
 
       <Box
-        align="center"
+        alignItems="center"
         as="span"
         className={avatarInitials()}
         display="flex"
-        justify="center"
+        justifyContent="center"
         position="absolute"
         inset={0}
       >
@@ -145,11 +145,9 @@ export function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEME
       {src && (
         <Box className={avatarImage()} inset={0} position="absolute">
           <img alt={initials} onError={handleImageError} src={src} />
-          <span />
+          <span className={avatarImageOutline()} />
         </Box>
       )}
     </Element>
   )
 }
-
-Avatar.displayName = 'Avatar'

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

@@ -1,8 +1,8 @@
-import {_composeClassNames, avatarCounter, type ResponsiveProp} from '@sanity/ui/css'
+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 {useResponsiveProp} from '../../hooks'
 import type {ComponentType, Props} from '../../types'
 import {Box} from '../box'
 import {Label} from '../label'
@@ -34,17 +34,17 @@ export function AvatarCounter<
     size: sizeProp = 1,
     ...rest
   } = props as AvatarCounterProps<typeof DEFAULT_AVATAR_COUNTER_ELEMENT>
-  const size = useArrayProp(sizeProp)
+  const size = useResponsiveProp(sizeProp)
 
-  const labelSize: FontLabelSize[] = useMemo(
+  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],
   )
 
@@ -52,11 +52,12 @@ export function AvatarCounter<
     <Box
       data-ui="AvatarCounter"
       {...rest}
-      align="center"
+      alignItems="center"
       as={as}
-      className={_composeClassNames(className, avatarCounter({size}))}
+      className={avatarCounter({className, size})}
       display="flex"
-      justify="center"
+      flex="none"
+      justifyContent="center"
       paddingX={2}
       sizing="border"
     >
@@ -66,5 +67,3 @@ export function AvatarCounter<
     </Box>
   )
 }
-
-AvatarCounter.displayName = 'AvatarCounter'

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

@@ -1,8 +1,8 @@
-import {_composeClassNames, avatarStack, type ResponsiveProp} from '@sanity/ui/css'
+import {avatarStack, type ResponsiveProp} from '@sanity/ui/css'
 import type {AvatarSize} from '@sanity/ui/theme'
-import {Children, cloneElement, isValidElement, type ReactElement} from 'react'
+import {Children, cloneElement, Fragment, isValidElement, type ReactElement} from 'react'
 
-import {useArrayProp} from '../../hooks'
+import {useResponsiveProp} from '../../hooks'
 import type {ComponentType, Props} from '../../types'
 import {Box, type BoxOwnProps} from '../box'
 import type {AvatarProps} from './avatar'
@@ -15,7 +15,10 @@ export const DEFAULT_AVATAR_STACK_ELEMENT = 'div'
 export type AvatarStackChild = ReactElement<AvatarProps<'div'>> | null | undefined | false
 
 /** @public */
-export type AvatarStackOwnProps = Omit<BoxOwnProps, 'align' | 'display'> & {
+export type AvatarStackOwnProps = Omit<
+  BoxOwnProps,
+  'align' | 'alignItems' | 'display' | 'justify' | 'justifyContent'
+> & {
   children: AvatarStackChild | AvatarStackChild[]
   maxLength?: number
   size?: ResponsiveProp<AvatarSize>
@@ -49,7 +52,7 @@ export function AvatarStack<E extends AvatarStackElementType = typeof DEFAULT_AV
     AvatarProps<'div'>
   >[]
   const maxLength = Math.max(maxLengthProp, 0)
-  const size = useArrayProp(sizeProp)
+  const size = useResponsiveProp(sizeProp)
 
   const len = children.length
   const visibleCount = maxLength - 1
@@ -60,30 +63,19 @@ export function AvatarStack<E extends AvatarStackElementType = typeof DEFAULT_AV
     <Box
       data-ui="AvatarStack"
       {...rest}
-      align="center"
+      alignItems="center"
       as={as}
-      className={_composeClassNames(className, avatarStack({size}))}
+      className={avatarStack({className, size})}
       display="flex"
+      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 = 'AvatarStack'

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

@@ -1,5 +1,5 @@
 import type {PaddingStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
-import {_composeClassNames, badge} from '@sanity/ui/css'
+import {badge} from '@sanity/ui/css'
 import type {FontTextSize} from '@sanity/ui/theme'
 
 import type {BadgeTone, ComponentType, Props} from '../../types'
@@ -46,20 +46,13 @@ export function Badge<E extends BadgeElementType = typeof DEFAULT_BADGE_ELEMENT>
       data-ui="Badge"
       {...rest}
       as={as}
-      className={_composeClassNames(
-        className,
-        badge({
-          radius,
-          tone,
-        }),
-      )}
+      className={badge({className, tone})}
       display="inline-flex"
       maxWidth="fill"
       padding={padding}
+      radius={radius}
     >
       <Text size={fontSize}>{children}</Text>
     </Box>
   )
 }
-
-Badge.displayName = 'Badge'