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

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

@@ -7,7 +7,9 @@ import {
   textSkeleton,
 } from '@sanity/ui/css'
 import {FontCodeSize, FontHeadingSize, FontLabelSize, FontTextSize} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
+import {ForwardedRef, forwardRef} from 'react'
+
+import {Props} from '../../types'
 import {Skeleton, SkeletonProps} from './skeleton'
 
 /**
@@ -47,12 +49,8 @@ export interface CodeSkeletonProps extends SkeletonProps {
  * @beta
  */
 export const TextSkeleton = forwardRef(function TextSkeleton(
-  props: TextSkeletonProps &
-    Omit<
-      React.HTMLProps<HTMLDivElement>,
-      'as' | 'children' | 'height' | 'rows' | 'size' | 'width' | 'wrap'
-    >,
-  ref: React.Ref<HTMLDivElement>,
+  props: Props<TextSkeletonProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {className, size = 2, ...restProps} = props
 
@@ -73,12 +71,8 @@ TextSkeleton.displayName = 'ForwardRef(TextSkeleton)'
  * @beta
  */
 export const LabelSkeleton = forwardRef(function TextSkeleton(
-  props: LabelSkeletonProps &
-    Omit<
-      React.HTMLProps<HTMLDivElement>,
-      'as' | 'children' | 'height' | 'rows' | 'size' | 'width' | 'wrap'
-    >,
-  ref: React.Ref<HTMLDivElement>,
+  props: Props<LabelSkeletonProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {className, size = 2, ...restProps} = props
 
@@ -99,12 +93,8 @@ LabelSkeleton.displayName = 'ForwardRef(LabelSkeleton)'
  * @beta
  */
 export const HeadingSkeleton = forwardRef(function TextSkeleton(
-  props: HeadingSkeletonProps &
-    Omit<
-      React.HTMLProps<HTMLDivElement>,
-      'as' | 'children' | 'height' | 'rows' | 'size' | 'width' | 'wrap'
-    >,
-  ref: React.Ref<HTMLDivElement>,
+  props: Props<HeadingSkeletonProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {className, size = 2, ...restProps} = props
 
@@ -124,12 +114,8 @@ HeadingSkeleton.displayName = 'ForwardRef(HeadingSkeleton)'
  * @beta
  */
 export const CodeSkeleton = forwardRef(function TextSkeleton(
-  props: CodeSkeletonProps &
-    Omit<
-      React.HTMLProps<HTMLDivElement>,
-      'as' | 'children' | 'height' | 'rows' | 'size' | 'width' | 'wrap'
-    >,
-  ref: React.Ref<HTMLDivElement>,
+  props: Props<CodeSkeletonProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {className, size = 2, ...restProps} = props
 

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

@@ -1,23 +1,34 @@
 import {ResponsiveProp} from '@sanity/ui/css'
-import {FontTextSize} from '@sanity/ui/theme'
-import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
+import {FontTextSize, Space} from '@sanity/ui/theme'
+import {
+  ElementType,
+  FocusEvent,
+  ForwardedRef,
+  forwardRef,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react'
+
 import {Button} from '../../primitives'
-import {ButtonTone} from '../../types'
+import {ButtonTone, Props} from '../../types'
 
 /**
  * @public
  */
 export interface TabProps {
   /**
-   * The `id` of the correlating `TabPanel` component.
+   * The `id` of the corresponding `TabPanel` component.
    */
   'aria-controls': string
   'id': string
-  'icon'?: React.ElementType | React.ReactNode
+  'icon'?: ElementType | ReactNode
   'focused'?: boolean
   'fontSize'?: ResponsiveProp<FontTextSize>
-  'label'?: React.ReactNode
-  'padding'?: number | number[]
+  'label'?: ReactNode
+  'padding'?: ResponsiveProp<Space>
   'selected'?: boolean
   'tone'?: ButtonTone
 }
@@ -26,12 +37,8 @@ export interface TabProps {
  * @public
  */
 export const Tab = forwardRef(function Tab(
-  props: TabProps &
-    Omit<
-      React.HTMLProps<HTMLButtonElement>,
-      'aria-controls' | 'as' | 'id' | 'label' | 'type' | 'width'
-    >,
-  forwardedRef: React.ForwardedRef<HTMLButtonElement>,
+  props: Props<TabProps, 'button'>,
+  forwardedRef: ForwardedRef<HTMLButtonElement>,
 ) {
   const {
     icon,
@@ -58,7 +65,7 @@ export const Tab = forwardRef(function Tab(
   }, [])
 
   const handleFocus = useCallback(
-    (event: React.FocusEvent<HTMLButtonElement>) => {
+    (event: FocusEvent<HTMLButtonElement>) => {
       focusedRef.current = true
       if (onFocus) onFocus(event)
     },

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

@@ -1,14 +1,31 @@
-import {cloneElement, ForwardedRef, forwardRef, useCallback, useMemo, useState} from 'react'
+import {
+  Children,
+  cloneElement,
+  ForwardedRef,
+  forwardRef,
+  KeyboardEvent,
+  ReactElement,
+  useCallback,
+  useState,
+} from 'react'
+
 import {Inline, InlineProps} from '../../primitives'
+import {Props} from '../../types'
+import {TabProps} from './tab'
+
+/**
+ * @public
+ */
+export type TabListChild = ReactElement<Props<TabProps, 'button'>> | null | undefined | false
 
 /**
  * @public
  */
 export interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
-  children: Array<React.ReactElement | null | undefined | false>
+  children: TabListChild[]
 }
 
-function _isReactElement(node: unknown): node is React.ReactElement {
+function _isReactElement(node: unknown): node is ReactElement<Props<TabProps, 'button'>> {
   return Boolean(node)
 }
 
@@ -16,30 +33,26 @@ function _isReactElement(node: unknown): node is React.ReactElement {
  * @public
  */
 export const TabList = forwardRef(function TabList(
-  props: TabListProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
+  props: Props<TabListProps, 'div'>,
   ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {children: childrenProp, ...restProps} = props
   const [focusedIndex, setFocusedIndex] = useState(-1)
 
-  const children = useMemo(() => childrenProp.filter(_isReactElement), [childrenProp])
+  const children = Children.toArray(childrenProp).filter(_isReactElement)
 
   const tabs = children.map((child, childIndex) =>
     cloneElement(child, {
       focused: focusedIndex === childIndex,
       key: childIndex,
-      onFocus: () => handleTabFocus(childIndex),
+      onFocus: () => setFocusedIndex(childIndex),
     }),
   )
 
   const numTabs = tabs.length
 
-  const handleTabFocus = useCallback((tabIdx: number) => {
-    setFocusedIndex(tabIdx)
-  }, [])
-
   const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
+    (event: KeyboardEvent<HTMLDivElement>) => {
       if (event.key === 'ArrowLeft') {
         setFocusedIndex((prevIndex) => (prevIndex + numTabs - 1) % numTabs)
       }

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

@@ -1,5 +1,7 @@
-import {forwardRef} from 'react'
+import {ForwardedRef, forwardRef} from 'react'
+
 import {Box, BoxProps} from '../../primitives'
+import {Props} from '../../types'
 
 /**
  * @public
@@ -16,9 +18,8 @@ export interface TabPanelProps extends BoxProps {
  * @public
  */
 export const TabPanel = forwardRef(function TabPanel(
-  props: TabPanelProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'aria-labelledby' | 'id' | 'role'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
+  props: Props<TabPanelProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {flex, ...restProps} = props
 

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

@@ -24,7 +24,7 @@ export default function HookStory() {
               })
             }
             text="Push info"
-            tone="primary"
+            tone="neutral"
           />
 
           <Button

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

@@ -1,6 +1,7 @@
 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/constants'
 
 export default function ToastStory() {
   const closable = useBoolean('Closable', false, 'Props')

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

@@ -1,5 +1,4 @@
 /** @jest-environment jsdom */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 
 import {render} from '../../../../test'
 import {ToastContext} from './toastContext'

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

@@ -1,41 +1,56 @@
 import {CloseIcon} from '@sanity/icons'
-import {RadiusStyleProps} from '@sanity/ui/css'
+import {
+  RadiusStyleProps,
+  toast,
+  toastLoadingBar,
+  toastLoadingBarMask,
+  toastLoadingBarProgress,
+} from '@sanity/ui/css'
 import {ThemeColorStateToneKey} from '@sanity/ui/theme'
-import {Box, Button, Flex, Stack, Text, Card} from '../../primitives'
-import type {ButtonTone} from '../../types'
+import {motion, type Variant, type Variants} from 'framer-motion'
+import {ReactElement, ReactNode} from 'react'
+
+import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
+import {Box, Button, Card, Flex, Stack, Text} from '../../primitives'
+import {ButtonTone, Props} from '../../types'
 
 /**
  * @public
  */
 export interface ToastProps extends RadiusStyleProps {
   closable?: boolean
-  description?: React.ReactNode
+  description?: ReactNode
   onClose?: () => void
-  title?: React.ReactNode
+  title?: ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
   duration?: number
+  updatedAt?: number
 }
 
-const STATUS_CARD_TONE: {[key: string]: ThemeColorStateToneKey} = {
+const ROLES = {
+  error: 'alert',
+  warning: 'alert',
+  success: 'alert',
+  info: 'alert',
+} as const
+
+const STATUS_CARD_TONE = {
   error: 'critical',
   warning: 'caution',
   success: 'positive',
-  info: 'primary',
-} as const
+  info: 'neutral',
+} satisfies {[key: string]: ThemeColorStateToneKey}
 
 const BUTTON_TONE = {
   error: 'critical',
   warning: 'caution',
   success: 'positive',
-  info: 'primary',
+  info: 'neutral',
 } satisfies {[key: string]: ButtonTone}
 
-const ROLES = {
-  error: 'alert',
-  warning: 'alert',
-  success: 'alert',
-  info: 'alert',
-} 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.
@@ -45,20 +60,20 @@ const ROLES = {
  * @public
  */
 export function Toast(
-  props: ToastProps &
-    Omit<
-      React.HTMLProps<HTMLDivElement>,
-      'as' | 'height' | 'ref' | 'rows' | 'title' | 'width' | 'wrap'
-    >,
-): React.ReactElement {
+  props: Omit<
+    Props<ToastProps, 'div'>,
+    'onDrag' | 'onDragEnd' | 'onDragStart' | 'onAnimationStart'
+  >,
+): ReactElement {
   const {
     closable,
     description,
-    duration, // eslint-disable-line @typescript-eslint/no-unused-vars
+    duration,
     onClose,
     radius = 3,
     title,
     status,
+    updatedAt,
     ...restProps
   } = props
 
@@ -66,27 +81,39 @@ export function Toast(
   const buttonTone = status ? BUTTON_TONE[status] : 'default'
   const role = status ? ROLES[status] : 'status'
 
+  const prefersReducedMotion = usePrefersReducedMotion()
+
+  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 initial: ContainerVariants[] = ['hidden', 'initial']
+  const animate: ContainerVariants[] = ['visible', 'slideIn']
+  const exit: ContainerVariants[] = ['hidden', 'slideOut']
+
   return (
-    <Card
-      // root
+    <MotionCard
+      as="li"
+      className={toast()}
       data-ui="Toast"
       role={role}
       {...restProps}
-      marginTop={3}
-      pointerEvents="auto"
+      data-has-duration={hasDuration ? '' : undefined}
+      custom={visualDuration}
       radius={radius}
       shadow={2}
       tone={cardTone}
-      // todo
-      // $duration={duration}
+      layout="position"
+      variants={container}
+      initial={initial}
+      animate={animate}
+      exit={exit}
+      transition={transition}
+      width="fill"
+      position="relative"
     >
-      <Flex align="flex-start">
-        <Box
-          // text-box
-          flex={1}
-          overflowX="auto"
-          padding={3}
-        >
+      <MotionFlex align="flex-start" variants={content} transition={transition}>
+        <Flex flex={1} overflowX="auto" padding={3}>
           <Stack space={3}>
             {title && (
               <Text size={1} weight="medium">
@@ -94,12 +121,12 @@ export function Toast(
               </Text>
             )}
             {description && (
-              <Text muted size={1}>
+              <MotionText muted size={1} variants={content} transition={transition}>
                 {description}
-              </Text>
+              </MotionText>
             )}
           </Stack>
-        </Box>
+        </Flex>
 
         {closable && (
           <Box padding={1}>
@@ -114,9 +141,72 @@ export function Toast(
             />
           </Box>
         )}
-      </Flex>
-    </Card>
+      </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},
+  visible: (visualDuration: number) => {
+    if (!visualDuration) return {opacity: 1}
+
+    return {
+      opacity: 1,
+      transition: {
+        when: 'beforeChildren',
+        staggerChildren: visualDuration / 3,
+        duration: visualDuration / 3,
+      },
+    }
+  },
+  slideIn: {
+    y: 0,
+    scale: 1,
+  },
+  slideOut: {
+    zIndex: 0,
+    scale: 0.75,
+  },
+} satisfies Variants
+type ContainerVariants = keyof typeof container
+
+const content = {
+  initial: {
+    willChange: 'transform',
+  },
+  hidden: {
+    opacity: 0,
+  },
+  visible: {
+    opacity: 1,
+  },
+} satisfies Partial<Record<ContainerVariants, Variant>>
+
+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

@@ -0,0 +1,38 @@
+import {GapStyleProps, PaddingStyleProps, toastLayer} from '@sanity/ui/css'
+import {ReactNode} from 'react'
+
+import {Grid} from '../../primitives/grid'
+import {useLayer} from '../../utils'
+
+/**
+ * @public
+ */
+export interface ToastLayerProps extends GapStyleProps, PaddingStyleProps {
+  children: ReactNode
+}
+
+/**
+ * @internal
+ */
+export function ToastLayer(props: ToastLayerProps): React.JSX.Element {
+  const {children, padding = 4, paddingX, paddingY, gap = 3} = props
+  const {zIndex} = useLayer()
+
+  return (
+    <Grid
+      as="ul"
+      className={toastLayer()}
+      data-ui="ToastProvider"
+      padding={padding}
+      paddingX={paddingX}
+      paddingY={paddingY}
+      gap={gap}
+      columns={1}
+      style={{zIndex}}
+    >
+      {children}
+    </Grid>
+  )
+}
+
+ToastLayer.displayName = 'ToastLayer'