@sanity/ui 3.1.13 → 4.0.0-beta.0

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

@@ -0,0 +1,71 @@
+import {Box, Button, Inline, ToastProvider, useToast} from '@sanity/ui'
+
+export default function HookStory(): React.JSX.Element {
+  const toast = useToast()
+
+  return (
+    <ToastProvider>
+      <Box padding={[4, 5, 6]}>
+        <Inline gap={2}>
+          <Button
+            text="Push info"
+            tone="neutral"
+            onClick={() =>
+              toast.push({
+                id: 'status',
+                closable: true,
+                title: 'Information',
+                status: 'info',
+                description: (
+                  <>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis faucibus
+                    pellentesque luctus. Curabitur sed tortor a elit tempus malesuada. Quisque sed
+                    dapibus ligula, id pulvinar nisl.
+                  </>
+                ),
+              })
+            }
+          />
+
+          <Button
+            text="Push warning"
+            tone="caution"
+            onClick={() =>
+              toast.push({
+                id: 'status',
+                closable: true,
+                title: 'Warning',
+                status: 'warning',
+              })
+            }
+          />
+
+          <Button
+            text="Push error"
+            tone="critical"
+            onClick={() =>
+              toast.push({
+                id: 'status',
+                closable: true,
+                title: 'Error',
+                status: 'error',
+              })
+            }
+          />
+
+          <Button
+            text="Push some message"
+            onClick={() =>
+              toast.push({
+                // id: 'status',
+                closable: true,
+                title: 'Some message',
+                // status: 'error',
+              })
+            }
+          />
+        </Inline>
+      </Box>
+    </ToastProvider>
+  )
+}

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

@@ -0,0 +1,26 @@
+import {Box, Container, Toast} from '@sanity/ui'
+import {useAction, useBoolean, useSelect, useString, useText} from '@sanity/ui-workshop'
+
+import {WORKSHOP_TOAST_STATUS_OPTIONS} from '$workshop'
+
+export default function ToastStory(): React.JSX.Element {
+  const closable = useBoolean('Closable', false)
+  const title = useString('Title', 'Toast title')
+  const status = useSelect('Status', WORKSHOP_TOAST_STATUS_OPTIONS)
+  const description = useText('Description')
+  const handleClose = useAction('onClose')
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Container width={0}>
+        <Toast
+          closable={closable}
+          description={description}
+          status={status}
+          title={title}
+          onClose={handleClose}
+        />
+      </Container>
+    </Box>
+  )
+}

package/src/components/toast/__workshop__/index.ts

@@ -0,0 +1,21 @@
+import type {WorkshopScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+const scope: WorkshopScope = {
+  name: 'components/toast',
+  title: 'Toast',
+  stories: [
+    {
+      name: 'toast',
+      title: 'Toast',
+      component: lazy(() => import('./Toast')),
+    },
+    {
+      name: 'hook',
+      title: 'Hook',
+      component: lazy(() => import('./Hook')),
+    },
+  ],
+}
+
+export default scope

package/src/components/toast/types.ts

@@ -0,0 +1,24 @@
+import type {ReactNode} from 'react'
+
+/** @public */
+export interface ToastParams {
+  closable?: boolean
+  description?: ReactNode
+  duration?: number
+  id?: string
+  onClose?: () => void
+  title?: 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/components/toast/useToast.ts

@@ -0,0 +1,23 @@
+import {use} from 'react'
+
+import {isRecord} from '../../core/lib/isRecord'
+import {ToastContext} from './ToastContext'
+import type {ToastContextValue} from './types'
+
+/** @public */
+export function useToast(): ToastContextValue {
+  const value = use(ToastContext)
+
+  if (!value) {
+    throw new Error('useToast(): missing context value')
+  }
+
+  // NOTE: This check is for future-compatiblity
+  // - If the value is not an object, it’s not compatible with the current version
+  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
+  if (!isRecord(value) || value.version !== 0.0) {
+    throw new Error('useToast(): the context value is not compatible')
+  }
+
+  return value
+}

package/src/components/tree/Tree.tsx

@@ -0,0 +1,248 @@
+import {tree} from '@sanity/ui-css'
+import {
+  type FocusEvent,
+  type KeyboardEvent,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import type {ComponentType, Props} from '../../core/types'
+import {Stack, type StackOwnProps} from '../../primitives/stack/Stack'
+import {_findNextItemElement, _findPrevItemElement, _focusItemElement} from './helpers'
+import {TreeContext} from './TreeContext'
+import type {TreeContextValue, TreeState} from './types'
+
+/** @beta */
+export const DEFAULT_TREE_ELEMENT = 'div'
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export type TreeOwnProps = Omit<StackOwnProps, 'position'>
+
+/** @beta */
+export type TreeElementType = 'div' | ComponentType
+
+/** @beta */
+export type TreeProps<E extends TreeElementType = TreeElementType> = Props<TreeOwnProps, E>
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function Tree<E extends TreeElementType = typeof DEFAULT_TREE_ELEMENT>(
+  props: TreeProps<E>,
+): React.JSX.Element {
+  const {
+    children,
+    className,
+    gap = 1,
+    onFocus,
+    ref: forwardedRef,
+    ...rest
+  } = props as TreeProps<typeof DEFAULT_TREE_ELEMENT>
+
+  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 context: TreeContextValue = useMemo(
+    () => ({
+      version: 0.0,
+      focusedElement: focusedElement || itemElements[0] || null,
+      gap,
+      level: 0,
+      path,
+      registerItem,
+      setExpanded,
+      setFocusedElement,
+      state,
+    }),
+    [focusedElement, gap, itemElements, path, registerItem, setExpanded, state],
+  )
+
+  const handleKeyDown = useCallback(
+    (event: 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: 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 value={context}>
+      <Stack
+        as="ul"
+        data-ui="Tree"
+        {...rest}
+        ref={ref}
+        className={tree({className})}
+        gap={gap}
+        position="relative"
+        role="tree"
+        onFocus={handleFocus}
+        onKeyDown={handleKeyDown}
+      >
+        {children}
+      </Stack>
+    </TreeContext>
+  )
+}

package/src/components/tree/TreeContext.ts

@@ -0,0 +1,10 @@
+import type {Context} from 'react'
+
+import {createGlobalScopedContext} from '../../core/lib/createGlobalScopedContext'
+import type {TreeContextValue} from './types'
+
+/**
+ * @internal
+ */
+export const TreeContext: Context<TreeContextValue | null> =
+  createGlobalScopedContext<TreeContextValue | null>('@sanity/ui/v4/tree', null)

package/src/components/tree/TreeGroup.tsx

@@ -0,0 +1,46 @@
+import type {ComponentType, Props} from '../../core/types'
+import {Stack} from '../../primitives/stack/Stack'
+import {useTree} from './useTree'
+
+/** @public */
+export const DEFAULT_TREE_GROUP_ELEMENT = 'div'
+
+/** @public */
+export type TreeGroupElementType = 'div' | ComponentType
+
+/** @public */
+export type TreeGroupOwnProps = {
+  expanded?: boolean
+}
+
+/** @public */
+export type TreeGroupProps<E extends TreeGroupElementType = TreeGroupElementType> = Props<
+  TreeGroupOwnProps,
+  E
+>
+
+export const TreeGroup = function TreeGroup(
+  props: Props<TreeGroupProps, 'div'>,
+): React.JSX.Element {
+  const {
+    children,
+    expanded = false,
+    ...rest
+  } = props as TreeGroupProps<typeof DEFAULT_TREE_GROUP_ELEMENT>
+
+  const tree = useTree()
+
+  return (
+    <Stack
+      as="ul"
+      data-ui="TreeGroup"
+      {...rest}
+      gap={tree.gap}
+      hidden={!expanded}
+      marginTop={tree.gap}
+      role="group"
+    >
+      {children}
+    </Stack>
+  )
+}

package/src/components/tree/TreeItem.tsx

@@ -0,0 +1,236 @@
+import {ToggleArrowRightIcon} from '@sanity/icons'
+import {type ResponsiveProp, tree_item, vars} from '@sanity/ui-css'
+import type {FontTextSize, FontWeight, Space} from '@sanity/ui-tokens'
+import {
+  type ElementType,
+  type KeyboardEvent,
+  type MouseEvent,
+  type MouseEventHandler,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import type {ComponentType, Props} from '../../core/types'
+import {Box, type BoxProps} from '../../primitives/box/Box'
+import {
+  Selectable,
+  type SelectableElementType,
+  type SelectableOwnProps,
+} from '../../primitives/selectable/Selectable'
+import {Text} from '../../primitives/text/Text'
+import {TreeContext} from './TreeContext'
+import {TreeGroup} from './TreeGroup'
+import {useTree} from './useTree'
+
+/** @beta */
+export const DEFAULT_TREE_ITEM_ELEMENT = 'a'
+
+/** @beta */
+export type TreeItemOwnProps = SelectableOwnProps & {
+  expanded?: boolean
+  fontSize?: ResponsiveProp<FontTextSize>
+  icon?: ElementType
+  /**
+   * Allows passing a custom element type to the link component
+   * @internal
+   */
+  linkAs?: SelectableElementType
+  onClick?: MouseEventHandler<HTMLAnchorElement | HTMLLIElement>
+  padding?: ResponsiveProp<Space>
+  gap?: ResponsiveProp<Space>
+  /** @deprecated Use `gap` instead */
+  space?: never
+  text?: ReactNode
+  weight?: FontWeight
+}
+
+/** @beta */
+export type TreeItemElementType = 'a' | 'li' | ComponentType
+
+/** @beta */
+export type TreeItemProps<E extends TreeItemElementType = TreeItemElementType> = Props<
+  TreeItemOwnProps,
+  E
+>
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITEM_ELEMENT>(
+  props: TreeItemProps<E>,
+): React.JSX.Element {
+  const {
+    children,
+    className,
+    expanded: expandedProp = false,
+    fontSize = 1,
+    gap: gapProp,
+    href,
+    icon: IconComponent,
+    id: idProp,
+    linkAs = 'a',
+    muted,
+    onClick,
+    padding = 2,
+    radius = 2,
+    selected = false,
+    text,
+    weight,
+    ...rest
+  } = props as TreeItemProps<typeof DEFAULT_TREE_ITEM_ELEMENT>
+  const gap = gapProp ?? padding
+
+  const [rootElement, setRootElement] = useState<HTMLElement | null>(null)
+  const treeitemRef = useRef<HTMLDivElement | null>(null)
+  const tree = useTree()
+  const {path, registerItem, setExpanded, setFocusedElement} = tree
+  const _id = useId()
+  const id = idProp || _id
+  const [itemPath, itemKey] = useMemo(() => {
+    const itemPath = path.concat([id || ''])
+    return [itemPath, itemPath.join('/')]
+  }, [id, path])
+  const itemState = tree.state[itemKey]
+  const expanded = itemState?.expanded === undefined ? expandedProp : itemState?.expanded || false
+  const focused = tree.focusedElement && tree.focusedElement === rootElement
+  const tabIndex = focused ? 0 : -1
+  const contextValue = useMemo(
+    () => ({...tree, level: tree.level + 1, path: itemPath}),
+    [itemPath, tree],
+  )
+
+  const handleClick = useCallback(
+    (event: MouseEvent<HTMLAnchorElement> | MouseEvent<HTMLLIElement>) => {
+      if (onClick) onClick(event)
+
+      const target = event.target
+
+      if (
+        target instanceof HTMLElement &&
+        (target.getAttribute('data-ui') === 'TreeItem' ||
+          target.closest('[data-ui="TreeItem__box"]'))
+      ) {
+        event.stopPropagation()
+        setExpanded(itemKey, !expanded)
+        setFocusedElement(rootElement)
+      }
+    },
+    [expanded, itemKey, onClick, rootElement, setExpanded, setFocusedElement],
+  )
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLElement>) => {
+      if (focused && event.key === 'Enter') {
+        const el = treeitemRef.current || rootElement
+
+        el?.click()
+      }
+    },
+    [focused, rootElement],
+  )
+
+  useEffect(() => {
+    if (!rootElement) return
+
+    return registerItem(rootElement, itemKey, expanded, selected)
+  }, [expanded, itemKey, registerItem, rootElement, selected])
+
+  const content = (
+    <Box display="flex" gap={gap} padding={padding}>
+      <Text
+        flex="none"
+        muted={muted}
+        size={fontSize}
+        style={{
+          visibility: IconComponent || children ? 'visible' : 'hidden',
+          pointerEvents: 'none',
+        }}
+        weight={weight}
+      >
+        {IconComponent ? (
+          <IconComponent />
+        ) : (
+          <ToggleArrowRightIcon style={{transform: expanded ? 'rotate(90deg)' : undefined}} />
+        )}
+      </Text>
+
+      <Text flex={1} muted={muted} size={fontSize} textOverflow="ellipsis" weight={weight}>
+        {text}
+      </Text>
+    </Box>
+  )
+
+  if (href) {
+    return (
+      <Box
+        data-selected={selected ? '' : undefined}
+        data-tree-id={id}
+        data-tree-key={itemKey}
+        data-ui="TreeItem"
+        {...(rest as BoxProps<'li'>)}
+        ref={setRootElement}
+        as="li"
+        className={tree_item({className})}
+        role="none"
+        onClick={handleClick}
+      >
+        <Selectable
+          ref={treeitemRef}
+          aria-expanded={expanded}
+          as={linkAs}
+          data-ui="TreeItem__box"
+          href={href}
+          radius={radius}
+          role="treeitem"
+          selected={selected}
+          style={{paddingLeft: `calc(${vars.space[2]} * ${tree.level})`}}
+          tabIndex={tabIndex}
+        >
+          {content}
+        </Selectable>
+
+        <TreeContext value={contextValue}>
+          {children && <TreeGroup hidden={!expanded}>{children}</TreeGroup>}
+        </TreeContext>
+      </Box>
+    )
+  }
+
+  return (
+    <Box
+      data-pressed={selected ? '' : undefined}
+      data-tree-id={id}
+      data-tree-key={itemKey}
+      data-ui="TreeItem"
+      {...rest}
+      ref={setRootElement}
+      aria-expanded={expanded}
+      className={tree_item({className})}
+      role="treeitem"
+      tabIndex={tabIndex}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+    >
+      <Selectable
+        data-focused={focused ? '' : undefined}
+        data-ui="TreeItem__box"
+        radius={radius}
+        selected={selected}
+        style={{paddingLeft: `calc(${vars.space[2]} * ${tree.level})`}}
+        tabIndex={tabIndex}
+      >
+        {content}
+      </Selectable>
+
+      <TreeContext value={contextValue}>
+        {children && <TreeGroup expanded={expanded}>{children}</TreeGroup>}
+      </TreeContext>
+    </Box>
+  )
+}