@sanity/ui 3.0.0-static.8 → 3.0.0

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

@@ -0,0 +1,198 @@
+import {CloseIcon} from '@sanity/icons'
+import {motion, type Variant, type Variants} from 'framer-motion'
+
+import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
+import {Box, Button, Flex, Stack, Text} from '../../primitives'
+import {
+  BUTTON_TONE,
+  LoadingBar,
+  LoadingBarMask,
+  LoadingBarProgress,
+  STATUS_CARD_TONE,
+  StyledToast,
+  TextBox,
+} from './styles'
+
+/**
+ * @public
+ */
+export interface ToastProps {
+  closable?: boolean
+  description?: React.ReactNode
+  onClose: () => void
+  radius?: number | number[]
+  title?: React.ReactNode
+  status?: 'error' | 'warning' | 'success' | 'info'
+  duration?: number
+  updatedAt?: number
+}
+
+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.
+ *
+ * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.
+ *
+ * @public
+ */
+export function Toast(
+  props: ToastProps &
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      | 'as'
+      | 'height'
+      | 'ref'
+      | 'title'
+      | 'onAnimationStart'
+      | 'onDragStart'
+      | 'onDragEnd'
+      | 'onDrag'
+    >,
+): React.JSX.Element {
+  const {
+    closable,
+    description,
+    duration,
+    onClose,
+    radius = 3,
+    title,
+    status,
+    updatedAt,
+    ...restProps
+  } = props
+  const cardTone = status ? STATUS_CARD_TONE[status] : 'default'
+  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' as const, 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 (
+    <MotionToast
+      data-ui="Toast"
+      role={role}
+      {...restProps}
+      data-has-duration={hasDuration ? '' : undefined}
+      custom={visualDuration}
+      radius={radius}
+      shadow={2}
+      tone={cardTone}
+      forwardedAs="li"
+      layout="position"
+      variants={container}
+      initial={initial}
+      animate={animate}
+      exit={exit}
+      transition={transition}
+    >
+      <MotionFlex align="flex-start" variants={content} transition={transition}>
+        <TextBox flex={1} padding={3}>
+          <Stack space={3}>
+            {title && (
+              <Text size={1} weight="medium">
+                {title}
+              </Text>
+            )}
+            {description && (
+              <MotionText muted size={1} variants={content} transition={transition}>
+                {description}
+              </MotionText>
+            )}
+          </Stack>
+        </TextBox>
+
+        {closable && (
+          <Box padding={1}>
+            <Button
+              as="button"
+              icon={CloseIcon}
+              mode="bleed"
+              padding={2}
+              tone={buttonTone}
+              onClick={onClose}
+              style={{verticalAlign: 'top'}}
+            />
+          </Box>
+        )}
+      </MotionFlex>
+      {hasDuration && (
+        <MotionLoadingBar variants={content} transition={transition}>
+          <LoadingBarMask tone={cardTone} radius={radius} />
+          <MotionLoadingBarProgress
+            key={`progress-${updatedAt}`}
+            tone={cardTone}
+            initial={{scaleX: 0}}
+            animate={{scaleX: 1}}
+            transition={{delay: visualDuration, duration: duration / 1_000, ease: 'linear'}}
+            onAnimationComplete={onClose}
+          />
+        </MotionLoadingBar>
+      )}
+    </MotionToast>
+  )
+}
+
+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 MotionToast = motion.create(StyledToast)
+const MotionFlex = motion.create(Flex)
+const MotionText = motion.create(Text)
+const MotionLoadingBar = motion.create(LoadingBar)
+const MotionLoadingBarProgress = motion.create(LoadingBarProgress)

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

@@ -0,0 +1,51 @@
+import {styled} from 'styled-components'
+
+import {Grid} from '../../primitives/grid'
+import {useLayer} from '../../utils'
+
+/**
+ * @public
+ */
+export interface ToastLayerProps {
+  children: React.ReactNode
+  padding?: number | number[]
+  paddingX?: number | number[]
+  paddingY?: number | number[]
+  gap?: number | number[]
+}
+
+/**
+ * @internal
+ */
+export function ToastLayer(props: ToastLayerProps): React.JSX.Element {
+  const {children, padding = 4, paddingX, paddingY, gap = 3} = props
+  const {zIndex} = useLayer()
+
+  return (
+    <StyledLayer
+      forwardedAs="ul"
+      data-ui="ToastProvider"
+      padding={padding}
+      paddingX={paddingX}
+      paddingY={paddingY}
+      gap={gap}
+      columns={1}
+      style={{zIndex}}
+    >
+      {children}
+    </StyledLayer>
+  )
+}
+
+ToastLayer.displayName = 'ToastLayer'
+
+const StyledLayer = styled(Grid)`
+  box-sizing: border-box;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  list-style: none;
+  pointer-events: none;
+  max-width: 420px;
+  width: 100%;
+`

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

@@ -0,0 +1,26 @@
+/**
+ * @public
+ */
+export interface ToastParams {
+  closable?: boolean
+  description?: React.ReactNode
+  duration?: number
+  id?: string
+  onClose?: () => void
+  title?: React.ReactNode
+  status?: 'error' | 'warning' | 'success' | 'info'
+}
+
+/**
+ * @public
+ */
+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/tree/style.ts

@@ -0,0 +1,105 @@
+import {getTheme_v2} from '@sanity/ui/theme'
+import {css} from 'styled-components'
+
+import {rem, ThemeProps} from '../../styles'
+import {_cardColorStyle} from '../../styles/card'
+
+export function treeItemRootStyle(): ReturnType<typeof css> {
+  return css`
+    &[role='none'] > [role='treeitem'] {
+      outline: none;
+      cursor: default;
+      border-radius: 3px;
+
+      background-color: var(--card-bg-color);
+      color: var(--treeitem-fg-color);
+
+      &:focus {
+        position: relative;
+      }
+    }
+
+    &[role='treeitem'] {
+      outline: none;
+
+      & > div {
+        cursor: default;
+        border-radius: 3px;
+
+        background-color: var(--card-bg-color);
+        color: var(--treeitem-fg-color);
+      }
+
+      &:focus > div {
+        position: relative;
+      }
+    }
+  `
+}
+
+export function treeItemRootColorStyle(props: ThemeProps): ReturnType<typeof css> {
+  const $tone = 'default'
+  const {color} = getTheme_v2(props.theme)
+  const tone = color.selectable[$tone]
+
+  return css`
+    &[role='none'] {
+      & > [role='treeitem'] {
+        ${_cardColorStyle(color, tone.enabled)}
+      }
+
+      &[data-selected] > [role='treeitem'] {
+        ${_cardColorStyle(color, tone.pressed)}
+      }
+
+      @media (hover: hover) {
+        &:not([data-selected]) > [role='treeitem']:not(:focus):hover {
+          ${_cardColorStyle(color, tone.hovered)}
+        }
+
+        & > [role='treeitem']:focus {
+          ${_cardColorStyle(color, tone.selected)}
+        }
+      }
+    }
+
+    &[role='treeitem'] {
+      & > [data-ui='TreeItem__box'] {
+        ${_cardColorStyle(color, tone.enabled)}
+      }
+
+      &[data-selected] > [data-ui='TreeItem__box'] {
+        ${_cardColorStyle(color, tone.pressed)}
+      }
+
+      @media (hover: hover) {
+        &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {
+          ${_cardColorStyle(color, tone.hovered)}
+        }
+
+        &:focus > [data-ui='TreeItem__box'] {
+          ${_cardColorStyle(color, tone.selected)}
+        }
+      }
+    }
+  `
+}
+
+export interface TreeItemBoxStyleProps {
+  $level: number
+}
+
+export function treeItemBoxStyle(
+  props: TreeItemBoxStyleProps & ThemeProps,
+): ReturnType<typeof css> {
+  const {$level} = props
+  const {space} = getTheme_v2(props.theme)
+
+  return css`
+    padding-left: ${rem(space[2] * $level)};
+
+    &[data-as='a'] {
+      text-decoration: none;
+    }
+  `
+}

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

@@ -0,0 +1,237 @@
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import {Stack} from '../../primitives'
+import {_findNextItemElement, _findPrevItemElement, _focusItemElement} from './helpers'
+import {TreeContext} from './treeContext'
+import {TreeContextValue, TreeState} from './types'
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export interface TreeProps {
+  space?: number | number[]
+}
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export const Tree = memo(
+  forwardRef(function Tree(
+    props: TreeProps &
+      Omit<React.HTMLProps<HTMLDivElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
+    forwardedRef: React.ForwardedRef<HTMLDivElement>,
+  ): React.JSX.Element {
+    const {children, space = 1, onFocus, ...restProps} = props
+    const ref = useRef<HTMLDivElement | null>(null)
+    const [focusedElement, setFocusedElement] = useState<HTMLElement | null>(null)
+    const focusedElementRef = useRef(focusedElement)
+    const path: string[] = useMemo(() => [], [])
+    const [itemElements, setItemElements] = useState<HTMLElement[]>([])
+    const [state, setState] = useState<TreeState>({})
+    const stateRef = useRef(state)
+
+    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(
+      forwardedRef,
+      () => ref.current,
+    )
+
+    useEffect(() => {
+      focusedElementRef.current = focusedElement
+    }, [focusedElement])
+
+    useEffect(() => {
+      stateRef.current = state
+    }, [state])
+
+    const registerItem = useCallback(
+      (element: HTMLElement, path: string, expanded: boolean, selected: boolean) => {
+        setState((s) => ({...s, [path]: {element, expanded}}))
+
+        if (selected) {
+          setFocusedElement(element)
+        }
+
+        return () => {
+          setState((s) => {
+            const newState = {...s}
+
+            delete newState[path]
+
+            return newState
+          })
+        }
+      },
+      [],
+    )
+
+    const setExpanded = useCallback((path: string, expanded: boolean) => {
+      setState((s) => {
+        const itemState = s[path]
+
+        if (!itemState) return s
+
+        return {...s, [path]: {...itemState, expanded}}
+      })
+    }, [])
+
+    const contextValue: TreeContextValue = useMemo(
+      () => ({
+        version: 0.0,
+        focusedElement: focusedElement || itemElements[0] || null,
+        level: 0,
+        path,
+        registerItem,
+        setExpanded,
+        setFocusedElement,
+        space,
+        state,
+      }),
+      [focusedElement, itemElements, path, registerItem, setExpanded, space, state],
+    )
+
+    const handleKeyDown = useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (!focusedElementRef.current) return
+
+        if (event.key === 'ArrowDown') {
+          event.preventDefault()
+
+          const nextEl = _findNextItemElement(
+            stateRef.current,
+            itemElements,
+            focusedElementRef.current,
+          )
+
+          if (nextEl) {
+            _focusItemElement(nextEl)
+            setFocusedElement(nextEl)
+          }
+
+          return
+        }
+
+        if (event.key === 'ArrowUp') {
+          event.preventDefault()
+
+          const prevEl = _findPrevItemElement(
+            stateRef.current,
+            itemElements,
+            focusedElementRef.current,
+          )
+
+          if (prevEl) {
+            _focusItemElement(prevEl)
+            setFocusedElement(prevEl)
+          }
+
+          return
+        }
+
+        if (event.key === 'ArrowLeft') {
+          event.preventDefault()
+
+          const itemKey = focusedElementRef.current.getAttribute('data-tree-key')
+
+          if (!itemKey) return
+
+          const itemState = stateRef.current[itemKey]
+
+          if (!itemState) return
+
+          if (itemState.expanded) {
+            setState((s) => {
+              const itemState = s[itemKey]
+
+              if (!itemState) return s
+
+              return {...s, [itemKey]: {...itemState, expanded: false}}
+            })
+          } else {
+            const itemPath = itemKey.split('/')
+
+            itemPath.pop()
+
+            const parentKey = itemPath.join('/')
+            const parentState = parentKey && stateRef.current[parentKey]
+
+            if (parentState) {
+              parentState.element.focus()
+              setFocusedElement(parentState.element)
+            }
+          }
+
+          return
+        }
+
+        if (event.key === 'ArrowRight') {
+          event.preventDefault()
+
+          const focusedKey = focusedElementRef.current.getAttribute('data-tree-key')
+
+          if (!focusedKey) return
+
+          if (!stateRef.current[focusedKey]?.expanded) {
+            setState((s) => {
+              const itemState = s[focusedKey]
+
+              if (!itemState) return s
+
+              return {...s, [focusedKey]: {...itemState, expanded: true}}
+            })
+          }
+
+          return
+        }
+      },
+      [itemElements],
+    )
+
+    const handleFocus = useCallback(
+      (event: React.FocusEvent<HTMLDivElement>) => {
+        setFocusedElement(event.target)
+
+        // Call the element's `focus` handler
+        onFocus?.(event)
+      },
+      [onFocus],
+    )
+
+    useEffect(() => {
+      if (!ref.current) return
+      const _itemElements = Array.from(
+        ref.current.querySelectorAll('[data-ui="TreeItem"]'),
+      ) as HTMLElement[]
+
+      setItemElements(_itemElements)
+    }, [children])
+
+    return (
+      <TreeContext.Provider value={contextValue}>
+        <Stack
+          as="ul"
+          data-ui="Tree"
+          {...restProps}
+          onFocus={handleFocus}
+          onKeyDown={handleKeyDown}
+          ref={ref}
+          role="tree"
+          space={space}
+        >
+          {children}
+        </Stack>
+      </TreeContext.Provider>
+    )
+  }),
+)
+Tree.displayName = 'Memo(ForwardRef(Tree))'

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

@@ -0,0 +1,30 @@
+import {memo} from 'react'
+
+import {Stack} from '../../primitives'
+import {useTree} from './useTree'
+
+export interface TreeGroupProps {
+  expanded?: boolean
+}
+
+export const TreeGroup = memo(function TreeGroup(
+  props: TreeGroupProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
+): React.JSX.Element {
+  const {children, expanded = false, ...restProps} = props
+  const tree = useTree()
+
+  return (
+    <Stack
+      as="ul"
+      data-ui="TreeGroup"
+      {...restProps}
+      hidden={!expanded}
+      marginTop={tree.space}
+      role="group"
+      space={tree.space}
+    >
+      {children}
+    </Stack>
+  )
+})