@sanity/ui 0.37.2 → 0.37.3

package/src/components/tree/index.ts

@@ -1,4 +0,0 @@
-export * from './tree'
-export * from './treeItem'
-export * from './types'
-export * from './useTree'

package/src/components/tree/style.ts

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

package/src/components/tree/tree.tsx

@@ -1,189 +0,0 @@
-import React, {useCallback, useEffect, 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 function Tree(
-  props: TreeProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>
-): React.ReactElement {
-  const {children, space = 1, ...restProps} = props
-  const [focusedElement, setFocusedElement] = useState<HTMLElement | null>(null)
-  const path: string[] = useMemo(() => [], [])
-  const rootRef = useRef<HTMLDivElement | null>(null)
-  const [itemElements, setItemElements] = useState<HTMLElement[]>([])
-  const [state, setState] = useState<TreeState>({})
-
-  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 (!focusedElement) return
-
-      if (event.key === 'ArrowDown') {
-        event.preventDefault()
-
-        const nextEl = _findNextItemElement(state, itemElements, focusedElement)
-
-        if (nextEl) {
-          _focusItemElement(nextEl)
-          setFocusedElement(nextEl)
-        }
-
-        return
-      }
-
-      if (event.key === 'ArrowUp') {
-        event.preventDefault()
-
-        const prevEl = _findPrevItemElement(state, itemElements, focusedElement)
-
-        if (prevEl) {
-          _focusItemElement(prevEl)
-          setFocusedElement(prevEl)
-        }
-
-        return
-      }
-
-      if (event.key === 'ArrowLeft') {
-        event.preventDefault()
-
-        const itemKey = focusedElement.getAttribute('data-tree-key')
-
-        if (!itemKey) return
-
-        const itemState = state[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 && state[parentKey]
-
-          if (parentState) {
-            parentState.element.focus()
-            setFocusedElement(parentState.element)
-          }
-        }
-
-        return
-      }
-
-      if (event.key === 'ArrowRight') {
-        event.preventDefault()
-
-        const focusedKey = focusedElement.getAttribute('data-tree-key')
-
-        if (!focusedKey) return
-
-        if (!state[focusedKey]?.expanded) {
-          setState((s) => {
-            const itemState = s[focusedKey]
-
-            if (!itemState) return s
-
-            return {...s, [focusedKey]: {...itemState, expanded: true}}
-          })
-        }
-
-        return
-      }
-    },
-    [focusedElement, itemElements, state]
-  )
-
-  useEffect(() => {
-    if (!rootRef.current) return
-    const _itemElements = Array.from(
-      rootRef.current.querySelectorAll('[data-ui="TreeItem"]')
-    ) as HTMLElement[]
-
-    setItemElements(_itemElements)
-  }, [children])
-
-  return (
-    <TreeContext.Provider value={contextValue}>
-      <Stack
-        as="ul"
-        data-ui="Tree"
-        {...restProps}
-        onKeyDown={handleKeyDown}
-        ref={rootRef}
-        role="tree"
-        space={space}
-      >
-        {children}
-      </Stack>
-    </TreeContext.Provider>
-  )
-}

package/src/components/tree/treeContext.ts

@@ -1,12 +0,0 @@
-import {createContext} from 'react'
-import {globalScope} from '../../lib/globalScope'
-import {TreeContextValue} from './types'
-
-const key = Symbol.for('@sanity/ui/context/tree')
-
-globalScope[key] = globalScope[key] || createContext<TreeContextValue | null>(null)
-
-/**
- * @internal
- */
-export const TreeContext: React.Context<TreeContextValue | null> = globalScope[key]

package/src/components/tree/treeGroup.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import {Stack} from '../../primitives'
-import {useTree} from './useTree'
-
-export interface TreeGroupProps {
-  expanded?: boolean
-}
-
-export function TreeGroup(
-  props: TreeGroupProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'role' | 'wrap'>
-): React.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/components/tree/treeItem.tsx

@@ -1,194 +0,0 @@
-import {useId} from '@reach/auto-id'
-import {ToggleArrowRightIcon} from '@sanity/icons'
-import React, {createElement, useCallback, useEffect, useMemo, useRef} from 'react'
-import styled from 'styled-components'
-import {Box, Flex, Text} from '../../primitives'
-import {ThemeFontWeightKey} from '../../theme'
-import {
-  treeItemRootStyle,
-  treeItemRootColorStyle,
-  treeItemBoxStyle,
-  TreeItemBoxStyleProps,
-} from './style'
-import {TreeContext} from './treeContext'
-import {TreeGroup} from './treeGroup'
-import {useTree} from './useTree'
-
-/**
- * @beta
- */
-export interface TreeItemProps {
-  expanded?: boolean
-  fontSize?: number | number[]
-  icon?: React.ComponentType
-  padding?: number | number[]
-  space?: number | number[]
-  text?: React.ReactNode
-  weight?: ThemeFontWeightKey
-}
-
-const Root = styled.li(treeItemRootStyle, treeItemRootColorStyle)
-
-const TreeItemBox = styled(Box).attrs({forwardedAs: 'a'})<TreeItemBoxStyleProps>(treeItemBoxStyle)
-
-const ToggleArrowText = styled(Text)`
-  & > svg {
-    transition: transform 100ms;
-  }
-`
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export function TreeItem(
-  props: TreeItemProps & Omit<React.HTMLProps<HTMLLIElement>, 'as' | 'ref' | 'role'>
-): React.ReactElement {
-  const {
-    children,
-    expanded: expandedProp = false,
-    fontSize,
-    href,
-    icon,
-    id: idProp,
-    muted,
-    onClick,
-    padding = 3,
-    selected = false,
-    space = 2,
-    text,
-    weight,
-    ...restProps
-  } = props
-  const rootRef = useRef<HTMLLIElement | null>(null)
-  const treeitemRef = useRef<HTMLDivElement | null>(null)
-  const tree = useTree()
-  const {path, registerItem, setExpanded, setFocusedElement} = tree
-  const id = useId(idProp) || idProp
-  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: React.MouseEvent<HTMLLIElement>) => {
-      if (onClick) onClick(event)
-
-      const target = event.target
-
-      if (
-        target instanceof HTMLElement &&
-        (target.getAttribute('data-ui') === 'TreeItem__box' ||
-          target.closest('[data-ui="TreeItem__box"]'))
-      ) {
-        event.stopPropagation()
-        setExpanded(itemKey, !expanded)
-        setFocusedElement(rootRef.current)
-      }
-    },
-    [expanded, itemKey, onClick, setExpanded, setFocusedElement]
-  )
-
-  const handleKeyDown = useCallback(
-    (event: React.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 padding={padding}>
-      <Box
-        marginRight={space}
-        style={{visibility: icon || children ? 'visible' : 'hidden', pointerEvents: 'none'}}
-      >
-        {icon && (
-          <Text muted={muted} size={fontSize} weight={weight}>
-            {createElement(icon)}
-          </Text>
-        )}
-        {!icon && (
-          <ToggleArrowText muted={muted} size={fontSize} weight={weight}>
-            <ToggleArrowRightIcon style={{transform: expanded ? 'rotate(90deg)' : undefined}} />
-          </ToggleArrowText>
-        )}
-      </Box>
-      <Box flex={1}>
-        <Text muted={muted} size={fontSize} textOverflow="ellipsis" weight={weight}>
-          {text}
-        </Text>
-      </Box>
-    </Flex>
-  )
-
-  if (href) {
-    return (
-      <Root
-        data-selected={selected ? '' : undefined}
-        data-tree-id={id}
-        data-tree-key={itemKey}
-        data-ui="TreeItem"
-        {...restProps}
-        onClick={handleClick}
-        ref={rootRef}
-        role="none"
-      >
-        <TreeItemBox
-          $level={tree.level}
-          aria-expanded={expanded}
-          data-ui="TreeItem__box"
-          href={href}
-          ref={treeitemRef}
-          role="treeitem"
-          tabIndex={tabIndex}
-        >
-          {content}
-        </TreeItemBox>
-
-        <TreeContext.Provider value={contextValue}>
-          {children && <TreeGroup hidden={!expanded}>{children}</TreeGroup>}
-        </TreeContext.Provider>
-      </Root>
-    )
-  }
-
-  return (
-    <Root
-      data-selected={selected ? '' : undefined}
-      data-ui="TreeItem"
-      data-tree-id={id}
-      data-tree-key={itemKey}
-      {...restProps}
-      aria-expanded={expanded}
-      onClick={handleClick}
-      onKeyDown={handleKeyDown}
-      ref={rootRef}
-      role="treeitem"
-      tabIndex={tabIndex}
-    >
-      <TreeItemBox $level={tree.level} as="div" data-ui="TreeItem__box">
-        {content}
-      </TreeItemBox>
-
-      <TreeContext.Provider value={contextValue}>
-        {children && <TreeGroup expanded={expanded}>{children}</TreeGroup>}
-      </TreeContext.Provider>
-    </Root>
-  )
-}

package/src/components/tree/types.ts

@@ -1,21 +0,0 @@
-/**
- * @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[]
-  state: TreeState
-}

package/src/components/tree/useTree.ts

@@ -1,16 +0,0 @@
-import {useContext} from 'react'
-import {TreeContext} from './treeContext'
-import {TreeContextValue} from './types'
-
-/**
- * @beta
- */
-export function useTree(): TreeContextValue {
-  const tree = useContext(TreeContext)
-
-  if (!tree) {
-    throw new Error('Tree: missing context value')
-  }
-
-  return tree
-}

package/src/constants.ts

@@ -1,2 +0,0 @@
-export const EMPTY_ARRAY: any[] = []
-export const EMPTY_RECORD: Record<string, any> = {}

package/src/helpers/animation.ts

@@ -1,27 +0,0 @@
-/**
- * @internal
- */
-export function _raf(fn: () => void): () => void {
-  const frameId = requestAnimationFrame(fn)
-
-  return () => {
-    cancelAnimationFrame(frameId)
-  }
-}
-
-/**
- * @internal
- */
-export function _raf2(fn: () => void): () => void {
-  let innerDispose: (() => void) | null = null
-
-  const outerDispose = _raf(() => {
-    innerDispose = _raf(fn)
-  })
-
-  return () => {
-    if (innerDispose) innerDispose()
-
-    outerDispose()
-  }
-}

package/src/helpers/element.ts

@@ -1,48 +0,0 @@
-/**
- * @internal
- */
-export function _isEnterToClickElement(element: HTMLElement): boolean {
-  return isHTMLAnchorElement(element) || isHTMLButtonElement(element)
-}
-
-/**
- * @internal
- */
-export function isHTMLElement(node: unknown): node is HTMLElement {
-  return node instanceof Node && node.nodeType === Node.ELEMENT_NODE
-}
-
-/**
- * @internal
- */
-export function isHTMLAnchorElement(element: unknown): element is HTMLAnchorElement {
-  return isHTMLElement(element) && element.nodeName === 'A'
-}
-
-/**
- * @internal
- */
-export function isHTMLInputElement(element: unknown): element is HTMLInputElement {
-  return isHTMLElement(element) && element.nodeName === 'INPUT'
-}
-
-/**
- * @internal
- */
-export function isHTMLButtonElement(element: unknown): element is HTMLButtonElement {
-  return isHTMLElement(element) && element.nodeName === 'BUTTON'
-}
-
-/**
- * @internal
- */
-export function isHTMLSelectElement(element: unknown): element is HTMLSelectElement {
-  return isHTMLElement(element) && element.nodeName === 'SELECT'
-}
-
-/**
- * @internal
- */
-export function isHTMLTextAreaElement(element: unknown): element is HTMLTextAreaElement {
-  return isHTMLElement(element) && element.nodeName === 'TEXTAREA'
-}