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

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

@@ -1,190 +1,110 @@
-import {AnimatePresence, motion, type Variants} from 'framer-motion'
-import {useMemo, useRef, useState, startTransition, useEffect} from 'react'
-import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
+import {AnimatePresence} from 'framer-motion'
+import {startTransition, useMemo, useState} from 'react'
+
 import {useMounted} from '../../hooks/useMounted'
-import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
-import {Box} from '../../primitives'
-import {Layer} from '../../utils'
+import {LayerProvider} from '../../utils'
 import {Toast} from './toast'
 import {ToastContext} from './toastContext'
+import {ToastLayer, type ToastLayerProps} from './toastLayer'
+import {generateToastId} from './toastState'
 import {ToastContextValue, ToastParams} from './types'
 
 type ToastState = {
   dismiss: () => void
   id: string
+  updatedAt: number
   params: ToastParams
 }[]
 
 /**
  * @public
  */
-export interface ToastProviderProps {
+export interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
   children?: React.ReactNode
-  padding?: number | number[]
-  paddingX?: number | number[]
-  paddingY?: number | number[]
   zOffset?: number | number[]
 }
 
-let toastId = 0
-
 /**
  * @public
  */
-export function ToastProvider(props: ToastProviderProps): React.ReactElement {
-  const {children, padding = 4, paddingX, paddingY, zOffset} = props
-  const [state, _setState] = useState<ToastState>([])
-  const toastsRef = useRef<{[key: string]: {timeoutId: NodeJS.Timeout}}>({})
+export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
+  const {children, padding, paddingX, paddingY, gap, zOffset = 1} = props
+  const [state, setState] = useState<ToastState>([])
   const mounted = useMounted()
-  const prefersReducedMotion = usePrefersReducedMotion()
-  const variants = useMemo<Variants>(
-    () => ({
-      initial: {
-        opacity: 0,
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: 0,
-        y: 32,
-        scale: 0.25,
-        willChange: 'transform',
-      },
-      animate: {
-        opacity: [0, 1, 1],
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [0, 0, 1],
-        y: 0,
-        scale: 1,
-      },
-      exit: {
-        opacity: [1, 1, 0],
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [1, 0, 0],
-        scale: 0.5,
-        transition: prefersReducedMotion ? {duration: 0} : {duration: 0.2},
-      },
-    }),
-    [prefersReducedMotion],
-  )
 
   const value: ToastContextValue = useMemo(() => {
     const push = (params: ToastParams) => {
-      // Wrap setState in startTransition to allow React to give input state updates higher priority
-      const setState: typeof _setState = (state) => startTransition(() => _setState(state))
-
-      const id = params.id || String(toastId++)
+      const id = params.id || generateToastId()
       const duration = params.duration || 5000
 
-      const dismiss = () => {
-        const timeoutId = toastsRef.current[id]?.timeoutId
-
+      startTransition(() => {
         setState((prevState): ToastState => {
-          const idx = prevState.findIndex((t) => t.id === id)
-
-          if (idx > -1) {
-            const toasts = prevState.slice(0)
-
-            toasts.splice(idx, 1)
-
-            return toasts
+          /**
+           * Backwards compatibility for `sanity` patterns workaround a lack of programatically dismissible toasts.
+           * It uses a super short duration that closes the toast immediately in previous versions of `@sanity/ui`.
+           * We interpret this as a request to dismiss the toast immediately, and remove it from the state right away.
+           * Even once we support programatic dismissal we'll need to keep this for backwards compatibility with v2 and v1.
+           */
+          if (duration === 0.01) {
+            return prevState.filter((toast) => toast.id !== id)
           }
 
-          return prevState
-        })
-
-        if (timeoutId !== undefined) {
-          clearTimeout(timeoutId)
-          delete toastsRef.current[id]
-        }
-      }
-
-      setState((prevState): ToastState => {
-        return prevState
-          .filter((t) => t.id !== id)
-          .concat([
+          /**
+           * Creates a function to dismiss this specific toast.
+           * This function will be passed to the Toast component
+           * and called either on close button click or after duration.
+           */
+          const dismiss = () =>
+            startTransition(() =>
+              setState((currentState) => currentState.filter((toast) => toast.id !== id)),
+            )
+
+          /**
+           * Create updated state by:
+           * 1. Removing any existing toast with the same ID (prevents duplicates)
+           * 2. Adding the new toast with its dismiss handler
+           * 3. Updates the `updatedAt` timestamp, which resets progress bar count downs.
+           */
+          return [
+            ...prevState.filter((toast) => toast.id !== id),
             {
               dismiss,
               id,
+              updatedAt: Date.now(),
               params: {...params, duration},
             },
-          ])
+          ]
+        })
       })
 
-      if (toastsRef.current[id]) {
-        clearTimeout(toastsRef.current[id].timeoutId)
-        delete toastsRef.current[id]
-      }
-
-      toastsRef.current[id] = {timeoutId: setTimeout(dismiss, duration)}
-
       return id
     }
 
     return {version: 0.0, push}
   }, [])
 
-  // clear timeouts on unmount
-  useEffect(
-    () => () => {
-      for (const {timeoutId} of Object.values(toastsRef.current)) {
-        clearTimeout(timeoutId)
-      }
-
-      toastsRef.current = {}
-    },
-    [],
-  )
-
   return (
     <ToastContext.Provider value={value}>
       {children}
       {mounted && (
-        <Layer
-          // root
-          data-ui="ToastProvider"
-          inset={0}
-          pointerEvents="none"
-          position="fixed"
-          zOffset={zOffset}
-          width="fill"
-        >
-          <Box
-            // container
-            position="absolute"
-            sizing="border"
-            style={{
-              // todo: move to css?
-              right: 0,
-              bottom: 0,
-              maxWidth: 420,
-            }}
-            width="fill"
-          >
-            <Box padding={padding} paddingX={paddingX} paddingY={paddingY}>
-              <AnimatePresence initial={false}>
-                {state.map(({dismiss, id, params}) => (
-                  <motion.div
-                    key={id}
-                    layout="position"
-                    initial="initial"
-                    animate="animate"
-                    exit="exit"
-                    variants={variants}
-                    transition={
-                      prefersReducedMotion
-                        ? {duration: 0}
-                        : {type: 'spring', damping: 30, stiffness: 400}
-                    }
-                  >
-                    <Toast
-                      closable={params.closable}
-                      description={params.description}
-                      onClose={dismiss}
-                      status={params.status}
-                      title={params.title}
-                      duration={params.duration}
-                    />
-                  </motion.div>
-                ))}
-              </AnimatePresence>
-            </Box>
-          </Box>
-        </Layer>
+        <LayerProvider zOffset={zOffset}>
+          <ToastLayer padding={padding} paddingX={paddingX} paddingY={paddingY} gap={gap}>
+            <AnimatePresence initial={false} mode="popLayout">
+              {state.map(({dismiss, id, params, updatedAt}) => (
+                <Toast
+                  key={id}
+                  closable={params.closable}
+                  description={params.description}
+                  onClose={dismiss}
+                  status={params.status}
+                  title={params.title}
+                  duration={params.duration}
+                  updatedAt={updatedAt}
+                />
+              ))}
+            </AnimatePresence>
+          </ToastLayer>
+        </LayerProvider>
       )}
     </ToastContext.Provider>
   )

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

@@ -0,0 +1,6 @@
+let toastId = 0
+
+/** @internal */
+export function generateToastId(): string {
+  return String(toastId++)
+}

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

@@ -1,13 +1,15 @@
+import {ReactNode} from 'react'
+
 /**
  * @public
  */
 export interface ToastParams {
   closable?: boolean
-  description?: React.ReactNode
+  description?: ReactNode
   duration?: number
   id?: string
   onClose?: () => void
-  title?: React.ReactNode
+  title?: ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
 }
 
@@ -16,5 +18,11 @@ export interface ToastParams {
  */
 export interface ToastContextValue {
   version: 0.0
+  /**
+   * Creates or updates a toast notification.
+   * If a toast with the same ID already exists, it will be updated.
+   * If an ID is not provided, a random one will be generated.
+   * The returned ID can be used to programatically update a toast.
+   */
   push: (params: ToastParams) => string
 }

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

@@ -1,4 +1,5 @@
 import {useContext} from 'react'
+
 import {isRecord} from '../../lib/isRecord'
 import {ToastContext} from './toastContext'
 import {ToastContextValue} from './types'

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

@@ -2,6 +2,7 @@ import {LinkIcon} from '@sanity/icons'
 import {Box, Tree, TreeItem} from '@sanity/ui'
 import {usePerfTest} from '@sanity/ui-workshop/plugin-perf'
 import {useCallback, useState} from 'react'
+
 import {perfTests} from './basic.perf'
 
 export default function BasicStory() {

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

@@ -1,7 +1,8 @@
 import {LinkIcon} from '@sanity/icons'
-import {Box, TextInput, Tree, TreeItem, Text} from '@sanity/ui'
+import {Box, Text, TextInput, Tree, TreeItem} from '@sanity/ui'
 import {usePerfTest} from '@sanity/ui-workshop/plugin-perf'
 import {useCallback, useState} from 'react'
+
 import {perfTests} from './basic.perf'
 
 export default function BasicStory() {

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

@@ -1,8 +1,12 @@
-import {ResponsiveProp} from '@sanity/ui/css'
+import {GapStyleProps, ResponsiveProp} from '@sanity/ui/css'
 import {Space} from '@sanity/ui/theme'
 import {
+  FocusEvent,
+  ForwardedRef,
   forwardRef,
+  KeyboardEvent,
   memo,
+  ReactElement,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -10,7 +14,9 @@ import {
   useRef,
   useState,
 } from 'react'
+
 import {Stack} from '../../primitives'
+import {Props} from '../../types'
 import {_findNextItemElement, _findPrevItemElement, _focusItemElement} from './helpers'
 import {TreeContext} from './treeContext'
 import {TreeContextValue, TreeState} from './types'
@@ -19,7 +25,8 @@ import {TreeContextValue, TreeState} from './types'
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export interface TreeProps {
+export interface TreeProps extends Pick<GapStyleProps, 'gap'> {
+  /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
 }
 
@@ -29,14 +36,10 @@ export interface TreeProps {
  */
 export const Tree = memo(
   forwardRef(function Tree(
-    props: TreeProps &
-      Omit<
-        React.HTMLProps<HTMLDivElement>,
-        'align' | 'as' | 'height' | 'ref' | 'rows' | 'role' | 'width' | 'wrap'
-      >,
-    forwardedRef: React.ForwardedRef<HTMLDivElement>,
-  ): React.ReactElement {
-    const {children, space = 1, onFocus, ...restProps} = props
+    props: Props<TreeProps, 'div'>,
+    forwardedRef: ForwardedRef<HTMLDivElement>,
+  ): ReactElement {
+    const {children, gap, space = 1, onFocus, ...restProps} = props
     const ref = useRef<HTMLDivElement | null>(null)
     const [focusedElement, setFocusedElement] = useState<HTMLElement | null>(null)
     const focusedElementRef = useRef(focusedElement)
@@ -105,7 +108,7 @@ export const Tree = memo(
     )
 
     const handleKeyDown = useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
+      (event: KeyboardEvent<HTMLDivElement>) => {
         if (!focusedElementRef.current) return
 
         if (event.key === 'ArrowDown') {
@@ -202,7 +205,7 @@ export const Tree = memo(
     )
 
     const handleFocus = useCallback(
-      (event: React.FocusEvent<HTMLDivElement>) => {
+      (event: FocusEvent<HTMLDivElement>) => {
         setFocusedElement(event.target)
 
         // Call the element's `focus` handler
@@ -226,11 +229,11 @@ export const Tree = memo(
           as="ul"
           data-ui="Tree"
           {...restProps}
+          gap={gap ?? space}
           onFocus={handleFocus}
           onKeyDown={handleKeyDown}
           ref={ref}
           role="tree"
-          space={space}
         >
           {children}
         </Stack>

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

@@ -1,5 +1,7 @@
-import {memo} from 'react'
+import {memo, ReactElement} from 'react'
+
 import {Stack} from '../../primitives'
+import {Props} from '../../types'
 import {useTree} from './useTree'
 
 export interface TreeGroupProps {
@@ -7,12 +9,8 @@ export interface TreeGroupProps {
 }
 
 export const TreeGroup = memo(function TreeGroup(
-  props: TreeGroupProps &
-    Omit<
-      React.HTMLProps<HTMLDivElement>,
-      'as' | 'height' | 'ref' | 'role' | 'rows' | 'width' | 'wrap'
-    >,
-): React.ReactElement {
+  props: Props<TreeGroupProps, 'div'>,
+): ReactElement {
   const {children, expanded = false, ...restProps} = props
   const tree = useTree()
 

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

@@ -1,8 +1,23 @@
 import {ToggleArrowRightIcon} from '@sanity/icons'
 import {composeClassNames, ResponsiveProp, treeItem} from '@sanity/ui/css'
-import {Space, ThemeFontWeightKey} from '@sanity/ui/theme'
-import {memo, useCallback, useEffect, useId, useMemo, useRef} from 'react'
-import {Box, BoxProps, Flex, Text} from '../../primitives'
+import {FontTextSize, Space, ThemeFontWeightKey} from '@sanity/ui/theme'
+import {
+  ElementType,
+  KeyboardEvent,
+  memo,
+  MouseEvent,
+  ReactElement,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+} from 'react'
+
+import {Box, CardProps, Flex, Text} from '../../primitives'
+import {Selectable} from '../../primitives/_selectable'
+import {Props} from '../../types'
 import {TreeContext} from './treeContext'
 import {TreeGroup} from './treeGroup'
 import {useTree} from './useTree'
@@ -10,17 +25,17 @@ import {useTree} from './useTree'
 /**
  * @beta
  */
-export interface TreeItemProps {
+export interface TreeItemProps extends CardProps {
   expanded?: boolean
-  fontSize?: number | number[]
-  icon?: React.ElementType
+  fontSize?: ResponsiveProp<FontTextSize>
+  icon?: ElementType
   /**
    * Allows passing a custom element type to the link component
    */
-  linkAs?: BoxProps['as']
-  padding?: number | number[]
+  linkAs?: ElementType
+  padding?: ResponsiveProp<Space>
   space?: ResponsiveProp<Space>
-  text?: React.ReactNode
+  text?: ReactNode
   weight?: ThemeFontWeightKey
 }
 
@@ -29,12 +44,8 @@ export interface TreeItemProps {
  * @beta
  */
 export const TreeItem = memo(function TreeItem(
-  props: TreeItemProps &
-    Omit<
-      React.HTMLProps<HTMLDivElement>,
-      'as' | 'height' | 'ref' | 'role' | 'rows' | 'width' | 'wrap'
-    >,
-): React.ReactElement {
+  props: Omit<Props<TreeItemProps, 'div'>, 'as'>,
+): ReactElement {
   const {
     children,
     className,
@@ -43,10 +54,11 @@ export const TreeItem = memo(function TreeItem(
     href,
     icon: IconComponent,
     id: idProp,
-    linkAs,
+    linkAs = 'a',
     muted,
     onClick,
     padding = 2,
+    radius = 2,
     selected = false,
     space = 2,
     text,
@@ -71,7 +83,7 @@ export const TreeItem = memo(function TreeItem(
   )
 
   const handleClick = useCallback(
-    (event: React.MouseEvent<HTMLDivElement>) => {
+    (event: MouseEvent<HTMLDivElement>) => {
       if (onClick) onClick(event)
 
       const target = event.target
@@ -90,7 +102,7 @@ export const TreeItem = memo(function TreeItem(
   )
 
   const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLElement>) => {
+    (event: KeyboardEvent<HTMLElement>) => {
       if (focused && event.key === 'Enter') {
         const el = treeitemRef.current || rootRef.current
 
@@ -109,7 +121,6 @@ export const TreeItem = memo(function TreeItem(
   const content = (
     <Flex gap={space} padding={padding}>
       <Box
-        // marginRight={space}
         style={{
           visibility: IconComponent || children ? 'visible' : 'hidden',
           pointerEvents: 'none',
@@ -121,12 +132,7 @@ export const TreeItem = memo(function TreeItem(
           </Text>
         )}
         {!IconComponent && (
-          <Text
-            // ToggleArrowText
-            muted={muted}
-            size={fontSize}
-            weight={weight}
-          >
+          <Text muted={muted} size={fontSize} weight={weight}>
             <ToggleArrowRightIcon style={{transform: expanded ? 'rotate(90deg)' : undefined}} />
           </Text>
         )}
@@ -153,22 +159,22 @@ export const TreeItem = memo(function TreeItem(
         ref={rootRef}
         role="none"
       >
-        <Box
-          // $level={tree.level}
+        <Selectable
           aria-expanded={expanded}
           as={linkAs}
+          data-pressed={selected ? '' : undefined}
           data-ui="TreeItem__box"
           href={href}
+          radius={radius}
           ref={treeitemRef}
           role="treeitem"
           tabIndex={tabIndex}
-          // todo
           style={{
             paddingLeft: `calc(var(--space-2) * ${tree.level})`,
           }}
         >
           {content}
-        </Box>
+        </Selectable>
 
         <TreeContext.Provider value={contextValue}>
           {children && <TreeGroup hidden={!expanded}>{children}</TreeGroup>}
@@ -185,23 +191,24 @@ export const TreeItem = memo(function TreeItem(
       data-tree-key={itemKey}
       {...restProps}
       aria-expanded={expanded}
+      className={composeClassNames(className, treeItem())}
       onClick={handleClick}
       onKeyDown={handleKeyDown}
       ref={rootRef}
       role="treeitem"
       tabIndex={tabIndex}
     >
-      <Box
-        // $level={tree.level}
-        as="div"
+      <Selectable
+        as="button"
+        data-pressed={selected ? '' : undefined}
         data-ui="TreeItem__box"
-        // todo
+        radius={radius}
         style={{
           paddingLeft: `calc(var(--space-2) * ${tree.level})`,
         }}
       >
         {content}
-      </Box>
+      </Selectable>
 
       <TreeContext.Provider value={contextValue}>
         {children && <TreeGroup expanded={expanded}>{children}</TreeGroup>}

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

@@ -1,4 +1,5 @@
 import {useContext} from 'react'
+
 import {TreeContext} from './treeContext'
 import {TreeContextValue} from './types'