@sanity/ui 4.0.0-beta.8 → 4.0.0-next.2

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

@@ -1,71 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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/toastState.ts

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

package/src/components/toast/types.ts

@@ -1,24 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,248 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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>
-  )
-}