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

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

@@ -1,32 +1,34 @@
 import {CloseIcon} from '@sanity/icons'
-import {
-  RadiusStyleProps,
-  toast,
-  toastLoadingBar,
-  toastLoadingBarMask,
-  toastLoadingBarProgress,
-} from '@sanity/ui/css'
-import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+import {type RadiusStyleProps, toast} from '@sanity/ui/css'
 import {motion, type Variant, type Variants} from 'framer-motion'
-import {ReactElement, ReactNode} from 'react'
+import type {ReactNode} from 'react'
 
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
 import {Box, Button, Card, Flex, Stack, Text} from '../../primitives'
-import {ButtonTone, Props} from '../../types'
+import type {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
   title?: ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
+  /** @deprecated */
   duration?: number
+  /** @deprecated */
   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',
@@ -39,18 +41,14 @@ const STATUS_CARD_TONE = {
   warning: 'caution',
   success: 'positive',
   info: 'neutral',
-} satisfies {[key: string]: ThemeColorStateToneKey}
+} as const
 
 const BUTTON_TONE = {
   error: 'critical',
   warning: 'caution',
   success: 'positive',
   info: 'neutral',
-} satisfies {[key: string]: ButtonTone}
-
-// 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
+} as const
 
 /**
  * The `Toast` component gives feedback to users when an action has taken place.
@@ -59,23 +57,23 @@ 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,
+    // 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,
-    ...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'
@@ -86,19 +84,18 @@ export function Toast(
   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']
 
   return (
     <MotionCard
-      as="li"
+      as={as}
       className={toast()}
       data-ui="Toast"
       role={role}
-      {...restProps}
-      data-has-duration={hasDuration ? '' : undefined}
+      {...rest}
       custom={visualDuration}
       radius={radius}
       shadow={2}
@@ -109,12 +106,11 @@ export function Toast(
       animate={animate}
       exit={exit}
       transition={transition}
-      width="fill"
       position="relative"
     >
       <MotionFlex align="flex-start" variants={content} transition={transition}>
         <Flex flex={1} overflowX="auto" padding={3}>
-          <Stack space={3}>
+          <Stack gap={3}>
             {title && (
               <Text size={1} weight="medium">
                 {title}
@@ -142,32 +138,10 @@ export function Toast(
           </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},
@@ -209,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/toastContext.ts

@@ -1,5 +1,5 @@
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {ToastContextValue} from './types'
+import type {ToastContextValue} from './types'
 
 export const ToastContext = createGlobalScopedContext<ToastContextValue | null>(
   '@sanity/ui/context/toast',

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

@@ -1,26 +1,44 @@
-import {GapStyleProps, PaddingStyleProps, toastLayer} from '@sanity/ui/css'
-import {ReactNode} from 'react'
+import {type GapStyleProps, type PaddingStyleProps, toastLayer} from '@sanity/ui/css'
 
 import {Grid} from '../../primitives/grid'
+import type {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}
@@ -34,5 +52,3 @@ export function ToastLayer(props: ToastLayerProps): React.JSX.Element {
     </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'
 
@@ -7,7 +8,7 @@ import {Toast} from './toast'
 import {ToastContext} from './toastContext'
 import {ToastLayer, type ToastLayerProps} from './toastLayer'
 import {generateToastId} from './toastState'
-import {ToastContextValue, ToastParams} from './types'
+import type {ToastContextValue, ToastParams} from './types'
 
 type ToastState = {
   dismiss: () => void
@@ -16,17 +17,13 @@ type ToastState = {
   params: ToastParams
 }[]
 
-/**
- * @public
- */
+/** @public */
 export interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
   children?: React.ReactNode
-  zOffset?: number | number[]
+  zOffset?: ResponsiveProp<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>([])
@@ -109,5 +106,3 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
     </ToastContext.Provider>
   )
 }
-
-ToastProvider.displayName = 'ToastProvider'

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

@@ -1,8 +1,6 @@
-import {ReactNode} from 'react'
+import type {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/core/components/toast/useToast.ts

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

package/src/core/components/tree/__workshop__/basic.perf.ts

@@ -1,4 +1,4 @@
-import {PerfTestProps, PerfTestRunFn} from '@sanity/ui-workshop/plugin-perf'
+import type {PerfTestProps, PerfTestRunFn} from '@sanity/ui-workshop/plugin-perf'
 import {findByTestId, fireEvent} from '@testing-library/dom'
 
 function test<ElementType = unknown>(

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

@@ -21,7 +21,7 @@ export default function BasicStory() {
   return (
     <Box padding={[4, 5, 6]}>
       <Wrapper>
-        <Tree ref={ref} space={1}>
+        <Tree gap={1} ref={ref}>
           <TreeItem onClick={handleClick} expanded text="Fruit">
             <TreeItem
               data-testid="oranges"

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

@@ -38,7 +38,7 @@ export default function BasicStory() {
       </Box>
       <Wrapper>
         <TextInput />
-        <Tree ref={ref} space={1} onFocus={handleFocus}>
+        <Tree gap={1} onFocus={handleFocus} ref={ref}>
           <TreeItem data-testid="fruit" onClick={handleClick} expanded text="Fruit">
             <TreeItem
               data-testid="oranges"

package/src/core/components/tree/helpers.ts

@@ -1,4 +1,4 @@
-import {TreeState} from './types'
+import type {TreeState} from './types'
 
 export function _findPrevItemElement(
   state: TreeState,