@sanity/ui 3.0.0-static.8 → 3.0.0

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

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

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

@@ -1,28 +0,0 @@
-import {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/ui/components/tree/tree.tsx

@@ -1,244 +0,0 @@
-import {GapStyleProps, ResponsiveProp} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
-import {
-  FocusEvent,
-  ForwardedRef,
-  forwardRef,
-  KeyboardEvent,
-  memo,
-  ReactElement,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  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'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface TreeProps extends Pick<GapStyleProps, 'gap'> {
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const Tree = memo(
-  forwardRef(function Tree(
-    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)
-    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: 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.Provider value={contextValue}>
-        <Stack
-          as="ul"
-          data-ui="Tree"
-          {...restProps}
-          gap={gap ?? space}
-          onFocus={handleFocus}
-          onKeyDown={handleKeyDown}
-          ref={ref}
-          role="tree"
-        >
-          {children}
-        </Stack>
-      </TreeContext.Provider>
-    )
-  }),
-)
-Tree.displayName = 'Memo(ForwardRef(Tree))'

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

@@ -1,30 +0,0 @@
-import {memo, ReactElement} from 'react'
-
-import {Stack} from '../../primitives'
-import {Props} from '../../types'
-import {useTree} from './useTree'
-
-export interface TreeGroupProps {
-  expanded?: boolean
-}
-
-export const TreeGroup = memo(function TreeGroup(
-  props: Props<TreeGroupProps, 'div'>,
-): ReactElement {
-  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>
-  )
-})

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

@@ -1,220 +0,0 @@
-import {ToggleArrowRightIcon} from '@sanity/icons'
-import {composeClassNames, ResponsiveProp, treeItem} from '@sanity/ui/css'
-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'
-
-/**
- * @beta
- */
-export interface TreeItemProps extends CardProps {
-  expanded?: boolean
-  fontSize?: ResponsiveProp<FontTextSize>
-  icon?: ElementType
-  /**
-   * Allows passing a custom element type to the link component
-   */
-  linkAs?: ElementType
-  padding?: ResponsiveProp<Space>
-  space?: ResponsiveProp<Space>
-  text?: ReactNode
-  weight?: ThemeFontWeightKey
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const TreeItem = memo(function TreeItem(
-  props: Omit<Props<TreeItemProps, 'div'>, 'as'>,
-): ReactElement {
-  const {
-    children,
-    className,
-    expanded: expandedProp = false,
-    fontSize = 1,
-    href,
-    icon: IconComponent,
-    id: idProp,
-    linkAs = 'a',
-    muted,
-    onClick,
-    padding = 2,
-    radius = 2,
-    selected = false,
-    space = 2,
-    text,
-    weight,
-    ...restProps
-  } = props
-  const rootRef = useRef<HTMLDivElement | 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 = useMemo(() => path.concat([id || '']), [id, path])
-  const itemKey = itemPath.join('/')
-  const itemState = tree.state[itemKey]
-  const focused = tree.focusedElement === rootRef.current
-  const expanded = itemState?.expanded === undefined ? expandedProp : itemState?.expanded || false
-  const tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1
-  const contextValue = useMemo(
-    () => ({...tree, level: tree.level + 1, path: itemPath}),
-    [itemPath, tree],
-  )
-
-  const handleClick = useCallback(
-    (event: MouseEvent<HTMLDivElement>) => {
-      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(rootRef.current)
-      }
-    },
-    [expanded, itemKey, onClick, setExpanded, setFocusedElement],
-  )
-
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLElement>) => {
-      if (focused && event.key === 'Enter') {
-        const el = treeitemRef.current || rootRef.current
-
-        el?.click()
-      }
-    },
-    [focused],
-  )
-
-  useEffect(() => {
-    if (!rootRef.current) return
-
-    return registerItem(rootRef.current, itemPath.join('/'), expanded, selected)
-  }, [expanded, itemPath, registerItem, selected])
-
-  const content = (
-    <Flex gap={space} padding={padding}>
-      <Box
-        style={{
-          visibility: IconComponent || children ? 'visible' : 'hidden',
-          pointerEvents: 'none',
-        }}
-      >
-        {IconComponent && (
-          <Text muted={muted} size={fontSize} weight={weight}>
-            <IconComponent />
-          </Text>
-        )}
-        {!IconComponent && (
-          <Text muted={muted} size={fontSize} weight={weight}>
-            <ToggleArrowRightIcon style={{transform: expanded ? 'rotate(90deg)' : undefined}} />
-          </Text>
-        )}
-      </Box>
-      <Box flex={1}>
-        <Text muted={muted} size={fontSize} textOverflow="ellipsis" weight={weight}>
-          {text}
-        </Text>
-      </Box>
-    </Flex>
-  )
-
-  if (href) {
-    return (
-      <Box
-        data-selected={selected ? '' : undefined}
-        data-tree-id={id}
-        data-tree-key={itemKey}
-        data-ui="TreeItem"
-        {...restProps}
-        as="li"
-        className={composeClassNames(className, treeItem())}
-        onClick={handleClick}
-        ref={rootRef}
-        role="none"
-      >
-        <Selectable
-          aria-expanded={expanded}
-          as={linkAs}
-          data-pressed={selected ? '' : undefined}
-          data-ui="TreeItem__box"
-          href={href}
-          radius={radius}
-          ref={treeitemRef}
-          role="treeitem"
-          tabIndex={tabIndex}
-          style={{
-            paddingLeft: `calc(var(--space-2) * ${tree.level})`,
-          }}
-        >
-          {content}
-        </Selectable>
-
-        <TreeContext.Provider value={contextValue}>
-          {children && <TreeGroup hidden={!expanded}>{children}</TreeGroup>}
-        </TreeContext.Provider>
-      </Box>
-    )
-  }
-
-  return (
-    <Box
-      data-selected={selected ? '' : undefined}
-      data-ui="TreeItem"
-      data-tree-id={id}
-      data-tree-key={itemKey}
-      {...restProps}
-      aria-expanded={expanded}
-      className={composeClassNames(className, treeItem())}
-      onClick={handleClick}
-      onKeyDown={handleKeyDown}
-      ref={rootRef}
-      role="treeitem"
-      tabIndex={tabIndex}
-    >
-      <Selectable
-        as="button"
-        data-pressed={selected ? '' : undefined}
-        data-ui="TreeItem__box"
-        radius={radius}
-        style={{
-          paddingLeft: `calc(var(--space-2) * ${tree.level})`,
-        }}
-      >
-        {content}
-      </Selectable>
-
-      <TreeContext.Provider value={contextValue}>
-        {children && <TreeGroup expanded={expanded}>{children}</TreeGroup>}
-      </TreeContext.Provider>
-    </Box>
-  )
-})
-
-TreeItem.displayName = 'Memo(TreeItem)'

package/src/ui/components/tree/types.ts

@@ -1,25 +0,0 @@
-import {ResponsiveProp} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
-
-/**
- * @beta
- */
-export interface TreeState {
-  [key: string]: {element: HTMLElement; expanded: boolean} | undefined
-}
-
-/**
- * @beta
- */
-export interface TreeContextValue {
-  version: 0.0
-  focusedElement: HTMLElement | null
-  level: number
-  path: string[]
-  registerItem: (element: HTMLElement, path: string, expanded: boolean, selected: boolean) => void
-  setExpanded: (path: string, expanded: boolean) => void
-  setFocusedElement: (focusedElement: HTMLElement | null) => void
-  // space: number | number[]
-  space: ResponsiveProp<Space>
-  state: TreeState
-}

package/src/ui/constants.ts

@@ -1,85 +0,0 @@
-import type {Transition, Variant} from 'framer-motion'
-
-/**
- * @internal
- */
-export const EMPTY_ARRAY: never[] = []
-
-/**
- * @internal
- */
-export const EMPTY_RECORD: Record<string, never> = {}
-
-const POPOVER_MOTION_DURATION = 0.2
-
-/**
- * Shared `framer-motion` variants used by `Popover` and `Tooltip` components.
- * @internal
- */
-export const POPOVER_MOTION_PROPS: {
-  card: {
-    initial: Variant
-    hidden: Variant
-    visible: Variant
-    scaleIn: Variant
-    scaleOut: Variant
-  }
-  children: {
-    hidden: Variant
-    visible: Variant
-  }
-  transition: Transition
-} = {
-  card: {
-    initial: {
-      scale: 0.97,
-      willChange: 'transform',
-    },
-    hidden: {
-      opacity: 0,
-    },
-    visible: {
-      opacity: 1,
-      transition: {
-        when: 'beforeChildren',
-        duration: POPOVER_MOTION_DURATION / 2,
-      },
-    },
-    scaleIn: {
-      scale: 1,
-    },
-    scaleOut: {
-      scale: 0.97,
-    },
-  },
-  children: {
-    hidden: {
-      opacity: 0,
-    },
-    visible: {
-      opacity: 1,
-    },
-  },
-  transition: {
-    type: 'spring',
-    visualDuration: POPOVER_MOTION_DURATION,
-    bounce: 0.25,
-  },
-}
-
-/**
- * @internal
- * @deprecated No longer used.
- */
-export const FLOATING_STATIC_SIDES: Record<string, 'bottom' | 'left' | 'top' | 'right'> = {
-  top: 'bottom',
-  right: 'left',
-  bottom: 'top',
-  left: 'right',
-}
-
-export const Z_OFFSETS = {
-  dialog: 600,
-  popover: 400,
-  tooltip: 200,
-}

package/src/ui/helpers/index.ts

@@ -1,5 +0,0 @@
-export * from './animation'
-export * from './element'
-export * from './focus'
-export * from './props'
-export * from './scroll'

package/src/ui/helpers/props.ts

@@ -1,10 +0,0 @@
-import {EMPTY_ARRAY} from '../constants'
-
-/**
- * @internal
- */
-export function _getArrayProp<T>(val: T | T[] | undefined, defaultVal?: T[]): T[] {
-  if (val === undefined) return defaultVal || EMPTY_ARRAY
-
-  return Array.isArray(val) ? val : [val]
-}