@sanity/ui 3.0.2 → 4.0.0-static.2

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

@@ -1,71 +1,87 @@
 import {ToggleArrowRightIcon} from '@sanity/icons'
-import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {memo, useCallback, useEffect, useId, useMemo, useRef} from 'react'
-import {styled} from 'styled-components'
-
-import {Box, BoxProps, Flex, Text} from '../../primitives'
+import {type ResponsiveProp, treeItem, vars} from '@sanity/ui/css'
+import type {FontTextSize, FontWeight, Space} from '@sanity/ui/theme'
 import {
-  treeItemBoxStyle,
-  TreeItemBoxStyleProps,
-  treeItemRootColorStyle,
-  treeItemRootStyle,
-} from './style'
+  type ElementType,
+  type KeyboardEvent,
+  type MouseEvent,
+  type MouseEventHandler,
+  type ReactNode,
+  type Ref,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+} from 'react'
+
+import {Box, type BoxProps} from '../../primitives/box/box'
+import type {CardOwnProps} from '../../primitives/card/card'
+import {Flex} from '../../primitives/flex/flex'
+import {Selectable, type SelectableElementType} from '../../primitives/selectable/selectable'
+import {Text} from '../../primitives/text/text'
+import type {ComponentType, Props} from '../../types'
 import {TreeContext} from './treeContext'
 import {TreeGroup} from './treeGroup'
 import {useTree} from './useTree'
 
-/**
- * @beta
- */
-export interface TreeItemProps {
+/** @beta */
+export const DEFAULT_TREE_ITEM_ELEMENT = 'a'
+
+/** @beta */
+export type TreeItemOwnProps = CardOwnProps & {
   expanded?: boolean
-  fontSize?: number | number[]
-  icon?: React.ElementType
+  fontSize?: ResponsiveProp<FontTextSize>
+  icon?: ElementType
   /**
    * Allows passing a custom element type to the link component
+   * @internal
    */
-  linkAs?: BoxProps['as']
-  padding?: number | number[]
-  space?: number | number[]
-  text?: React.ReactNode
-  weight?: ThemeFontWeightKey
+  linkAs?: SelectableElementType
+  onClick?: MouseEventHandler<HTMLAnchorElement | HTMLLIElement>
+  padding?: ResponsiveProp<Space>
+  space?: ResponsiveProp<Space>
+  text?: ReactNode
+  weight?: FontWeight
 }
 
-const StyledTreeItem = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle))
-
-const TreeItemBox = styled(Box).attrs({forwardedAs: 'a'})<TreeItemBoxStyleProps>(treeItemBoxStyle)
+/** @beta */
+export type TreeItemElementType = 'a' | 'li' | ComponentType
 
-const ToggleArrowText = styled(Text)`
-  & > svg {
-    transition: transform 100ms;
-  }
-`
+/** @beta */
+export type TreeItemProps<E extends TreeItemElementType = TreeItemElementType> = Props<
+  TreeItemOwnProps,
+  E
+>
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export const TreeItem = memo(function TreeItem(
-  props: TreeItemProps & Omit<React.HTMLProps<HTMLLIElement>, 'as' | 'ref' | 'role'>,
+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,
     href,
     icon: IconComponent,
     id: idProp,
-    linkAs,
+    linkAs = 'a',
     muted,
     onClick,
     padding = 2,
+    radius = 2,
     selected = false,
     space = 2,
     text,
     weight,
-    ...restProps
-  } = props
-  const rootRef = useRef<HTMLLIElement | null>(null)
+    ...rest
+  } = props as TreeItemProps<typeof DEFAULT_TREE_ITEM_ELEMENT>
+
+  const rootRef = useRef<HTMLElement | null>(null)
   const treeitemRef = useRef<HTMLDivElement | null>(null)
   const tree = useTree()
   const {path, registerItem, setExpanded, setFocusedElement} = tree
@@ -74,16 +90,16 @@ export const TreeItem = memo(function TreeItem(
   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 focused = tree.focusedElement && tree.focusedElement === rootRef.current
+  const tabIndex = focused ? 0 : -1
   const contextValue = useMemo(
     () => ({...tree, level: tree.level + 1, path: itemPath}),
     [itemPath, tree],
   )
 
   const handleClick = useCallback(
-    (event: React.MouseEvent<HTMLLIElement>) => {
+    (event: MouseEvent<HTMLAnchorElement> | MouseEvent<HTMLLIElement>) => {
       if (onClick) onClick(event)
 
       const target = event.target
@@ -102,7 +118,7 @@ export const TreeItem = memo(function TreeItem(
   )
 
   const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLElement>) => {
+    (event: KeyboardEvent<HTMLElement>) => {
       if (focused && event.key === 'Enter') {
         const el = treeitemRef.current || rootRef.current
 
@@ -119,9 +135,8 @@ export const TreeItem = memo(function TreeItem(
   }, [expanded, itemPath, registerItem, selected])
 
   const content = (
-    <Flex padding={padding}>
+    <Flex gap={space} padding={padding}>
       <Box
-        marginRight={space}
         style={{
           visibility: IconComponent || children ? 'visible' : 'hidden',
           pointerEvents: 'none',
@@ -133,9 +148,9 @@ export const TreeItem = memo(function TreeItem(
           </Text>
         )}
         {!IconComponent && (
-          <ToggleArrowText muted={muted} size={fontSize} weight={weight}>
+          <Text muted={muted} size={fontSize} weight={weight}>
             <ToggleArrowRightIcon style={{transform: expanded ? 'rotate(90deg)' : undefined}} />
-          </ToggleArrowText>
+          </Text>
         )}
       </Box>
       <Box flex={1}>
@@ -148,58 +163,75 @@ export const TreeItem = memo(function TreeItem(
 
   if (href) {
     return (
-      <StyledTreeItem
+      <Box
         data-selected={selected ? '' : undefined}
         data-tree-id={id}
         data-tree-key={itemKey}
         data-ui="TreeItem"
-        {...restProps}
+        {...(rest as BoxProps<'li'>)}
+        as="li"
+        className={treeItem({className})}
         onClick={handleClick}
-        ref={rootRef}
+        ref={rootRef as Ref<HTMLLIElement>}
         role="none"
       >
-        <TreeItemBox
-          $level={tree.level}
+        <Selectable
           aria-expanded={expanded}
           as={linkAs}
+          // data-pressed={selected ? '' : undefined}
           data-ui="TreeItem__box"
           href={href}
+          radius={radius}
           ref={treeitemRef}
           role="treeitem"
+          selected={selected}
           tabIndex={tabIndex}
+          style={{
+            paddingLeft: `calc(${vars.space[2]} * ${tree.level})`,
+          }}
         >
           {content}
-        </TreeItemBox>
+        </Selectable>
 
         <TreeContext.Provider value={contextValue}>
           {children && <TreeGroup hidden={!expanded}>{children}</TreeGroup>}
         </TreeContext.Provider>
-      </StyledTreeItem>
+      </Box>
     )
   }
 
   return (
-    <StyledTreeItem
+    <Box
       data-selected={selected ? '' : undefined}
       data-ui="TreeItem"
       data-tree-id={id}
       data-tree-key={itemKey}
-      {...restProps}
+      {...(rest as BoxProps<'a'>)}
       aria-expanded={expanded}
+      className={treeItem({className})}
       onClick={handleClick}
       onKeyDown={handleKeyDown}
-      ref={rootRef}
+      ref={rootRef as Ref<HTMLAnchorElement>}
       role="treeitem"
       tabIndex={tabIndex}
     >
-      <TreeItemBox $level={tree.level} as="div" data-ui="TreeItem__box">
+      <Selectable
+        as="button"
+        // data-pressed={selected ? '' : undefined}
+        data-focused={focused ? '' : undefined}
+        data-ui="TreeItem__box"
+        radius={radius}
+        selected={selected}
+        style={{
+          paddingLeft: `calc(${vars.space[2]} * ${tree.level})`,
+        }}
+      >
         {content}
-      </TreeItemBox>
+      </Selectable>
 
       <TreeContext.Provider value={contextValue}>
         {children && <TreeGroup expanded={expanded}>{children}</TreeGroup>}
       </TreeContext.Provider>
-    </StyledTreeItem>
+    </Box>
   )
-})
-TreeItem.displayName = 'Memo(TreeItem)'
+}

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

@@ -1,3 +1,6 @@
+import type {ResponsiveProp} from '@sanity/ui/css'
+import type {Space} from '@sanity/ui/theme'
+
 /**
  * @beta
  */
@@ -11,11 +14,11 @@ export interface TreeState {
 export interface TreeContextValue {
   version: 0.0
   focusedElement: HTMLElement | null
+  gap: ResponsiveProp<Space>
   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/core/components/tree/useTree.ts

@@ -1,7 +1,7 @@
 import {useContext} from 'react'
 
 import {TreeContext} from './treeContext'
-import {TreeContextValue} from './types'
+import type {TreeContextValue} from './types'
 
 /**
  * @beta

package/src/core/{utils → components}/virtualList/__workshop__/changingProps.tsx

@@ -3,7 +3,7 @@ import {useCallback, useState} from 'react'
 
 const data = Array.from(new Array(1000)).map((_, key) => ({key}))
 
-export default function ChangingProps() {
+export default function ChangingPropsStory(): React.JSX.Element {
   const [expanded, setExpanded] = useState(false)
 
   const toggleExpand = useCallback(() => setExpanded((v) => !v), [])

package/src/core/{utils → components}/virtualList/__workshop__/elementScroll.tsx

@@ -3,7 +3,7 @@ import {useCallback} from 'react'
 
 const data = Array.from(new Array(1000)).map((_, key) => ({key}))
 
-export default function ElementScroll() {
+export default function ElementScrollStory(): React.JSX.Element {
   const renderItem = useCallback((item: {key: number}) => {
     return (
       <Card padding={3} radius={2} shadow={1}>

package/src/core/{utils → components}/virtualList/__workshop__/index.ts

@@ -1,8 +1,8 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
-  name: 'utils/virtual-list',
+const scope: WorkshopScope = {
+  name: 'components/virtual-list',
   title: 'VirtualList',
   stories: [
     {
@@ -26,4 +26,6 @@ export default defineScope({
       component: lazy(() => import('./changingProps')),
     },
   ],
-})
+}
+
+export default scope

package/src/core/{utils → components}/virtualList/__workshop__/infiniteList.tsx

@@ -1,4 +1,4 @@
-import {Box, Card, Text, VirtualList, VirtualListChangeOpts} from '@sanity/ui'
+import {Box, Card, Text, VirtualList, type VirtualListChangeOpts} from '@sanity/ui'
 import {useCallback, useRef, useState} from 'react'
 
 interface Item {
@@ -11,7 +11,7 @@ function getData(len: number, offsetIndex = 0): Item[] {
 
 const ITEMS_PER_PAGE = 1000
 
-export default function InfiniteList() {
+export default function InfiniteListStory(): React.JSX.Element {
   const [data, setData] = useState<Item[]>(() => getData(ITEMS_PER_PAGE))
   const offsetRef = useRef(0)
 

package/src/core/{utils → components}/virtualList/__workshop__/windowScrolll.tsx

@@ -3,7 +3,7 @@ import {useCallback} from 'react'
 
 const data = Array.from(new Array(1000)).map((_, key) => ({key}))
 
-export default function Example() {
+export default function WindowScrollStory(): React.JSX.Element {
   const renderItem = useCallback((item: {key: number}) => {
     return (
       <Card padding={3} radius={2} shadow={1}>

package/src/core/{utils → components}/virtualList/virtualList.tsx

@@ -1,14 +1,24 @@
-import {forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'
-import {styled} from 'styled-components'
-
-import {_isScrollable} from '../../helpers'
-import {_ResizeObserver} from '../../observers'
-import {StackProps} from '../../primitives'
-import {useTheme_v2} from '../../theme'
-
-/**
- * @beta
- */
+import {vars} from '@sanity/ui/css'
+import type {Space} from '@sanity/ui/theme'
+import {
+  type CSSProperties,
+  type ReactNode,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import {_isScrollable} from '../../helpers/scroll'
+import {_ResizeObserver} from '../../observers/resize'
+import {Box} from '../../primitives/box/box'
+import type {ComponentType, Props} from '../../types'
+
+/** @beta */
+export const DEFAULT_VIRTUAL_LIST_ELEMENT = 'div'
+
+/** @beta */
 export interface VirtualListChangeOpts {
   fromIndex: number
   gap: number
@@ -18,58 +28,50 @@ export interface VirtualListChangeOpts {
   toIndex: number
 }
 
-/**
- * @beta
- */
-export interface VirtualListProps<Item = any> {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  gap?: number
+/** @beta */
+export type VirtualListOwnProps<Item = any> = {
+  gap?: Space
   getItemKey?: (item: Item, itemIndex: number) => string
   items?: Item[]
   onChange?: (opts: VirtualListChangeOpts) => void
-  renderItem?: (item: Item) => React.ReactNode
+  renderItem?: (item: Item) => ReactNode
 }
 
-const StyledVirtualList = styled.div`
-  position: relative;
-`
-
-const ItemWrapper = styled.div`
-  position: absolute;
-  left: 0;
-  right: 0;
-`
-
-/**
- * @beta
- */
-export const VirtualList = forwardRef(function VirtualList(
-  props: VirtualListProps &
-    StackProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'onChange' | 'ref'>,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+/** @beta */
+export type VirtualListElementType = 'div' | ComponentType
+
+/** @beta */
+export type VirtualListProps<E extends VirtualListElementType = VirtualListElementType> = Props<
+  VirtualListOwnProps,
+  E
+>
+
+/** @beta */
+export function VirtualList<E extends VirtualListElementType = typeof DEFAULT_VIRTUAL_LIST_ELEMENT>(
+  props: VirtualListProps<E>,
 ): React.JSX.Element {
-  const {as = 'div', gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps} = props
-  const {space} = useTheme_v2()
+  const {
+    as = DEFAULT_VIRTUAL_LIST_ELEMENT,
+    gap = 0,
+    getItemKey,
+    items = [],
+    onChange,
+    renderItem,
+    ref: forwardedRef,
+    ...rest
+  } = props as VirtualListProps<typeof DEFAULT_VIRTUAL_LIST_ELEMENT>
+
   const ref = useRef<HTMLDivElement | null>(null)
   const wrapperRef = useRef<HTMLDivElement | null>(null)
   const [scrollTop, setScrollTop] = useState(0)
   const [scrollHeight, setScrollHeight] = useState(0)
   const [itemHeight, setItemHeight] = useState(-1)
 
+  const [gapValue, setGapValue] = useState(0)
+
   // Sync ref to parent
   useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
 
-  useEffect(() => {
-    if (!wrapperRef.current) return
-
-    const firstElement = wrapperRef.current.firstChild
-
-    if (firstElement instanceof HTMLElement) {
-      setItemHeight(firstElement.offsetHeight)
-    }
-  }, [renderItem])
-
   useEffect((): (() => void) | undefined => {
     if (!ref.current) return
 
@@ -122,20 +124,48 @@ export const VirtualList = forwardRef(function VirtualList(
   }, [])
 
   const len = items.length
-  const height = itemHeight ? len * (itemHeight + space[gap]) - space[gap] : 0
+  const height = itemHeight ? len * (itemHeight + gapValue) - gapValue : 0
   const fromIndex = height ? Math.max(Math.floor((scrollTop / height) * len) - 2, 0) : 0
   const toIndex = height ? Math.ceil(((scrollTop + scrollHeight) / height) * len) + 1 : 0
 
   useEffect(() => {
-    if (!onChange) return
-    onChange({fromIndex, gap: space[gap], itemHeight, scrollHeight, scrollTop, toIndex})
-  }, [fromIndex, gap, itemHeight, onChange, scrollHeight, scrollTop, space, toIndex])
+    onChange?.({
+      fromIndex,
+      gap: gapValue,
+      itemHeight,
+      scrollHeight,
+      scrollTop,
+      toIndex,
+    })
+  }, [fromIndex, gapValue, itemHeight, onChange, scrollHeight, scrollTop, toIndex])
+
+  useEffect(() => {
+    // console.log('renderItem', renderItem)
+    setItemHeight(-1)
+  }, [renderItem])
 
   const children = useMemo(() => {
     if (!renderItem || items.length === 0) return null
 
     if (itemHeight === -1) {
-      return [<ItemWrapper key={0}>{renderItem(items[0])}</ItemWrapper>]
+      return [
+        <>
+          <Box
+            ref={(el) => (el ? setItemHeight(el.offsetHeight) : undefined)}
+            insetTop={0}
+            insetLeft={0}
+            insetRight={0}
+            key={0}
+            position="absolute"
+          >
+            {renderItem(items[0])}
+          </Box>
+          <div
+            ref={(el) => (el ? setGapValue(el.offsetHeight) : undefined)}
+            style={{height: vars.space[gap]}}
+          />
+        </>,
+      ]
     }
 
     return items.slice(fromIndex, toIndex).map((item, _itemIndex) => {
@@ -144,24 +174,29 @@ export const VirtualList = forwardRef(function VirtualList(
       const key = getItemKey ? getItemKey(item, itemIndex) : itemIndex
 
       return (
-        <ItemWrapper key={key} style={{top: itemIndex * (itemHeight + space[gap])}}>
+        <Box
+          insetLeft={0}
+          insetRight={0}
+          key={key}
+          position="absolute"
+          style={{top: itemIndex * (itemHeight + gapValue)}}
+        >
           {node}
-        </ItemWrapper>
+        </Box>
       )
     })
-  }, [fromIndex, gap, getItemKey, itemHeight, items, renderItem, space, toIndex])
+  }, [fromIndex, gap, gapValue, getItemKey, itemHeight, items, renderItem, toIndex])
 
-  const wrapperStyle = useMemo(() => ({height}), [height])
+  const wrapperStyle: CSSProperties = useMemo(() => ({height}), [height])
 
   return (
-    <StyledVirtualList as={as} data-ui="VirtualList" {...restProps} ref={ref}>
+    <Box data-ui="VirtualList" {...rest} as={as} position="relative" ref={ref}>
       <div ref={wrapperRef} style={wrapperStyle}>
         {children}
       </div>
-    </StyledVirtualList>
+    </Box>
   )
-})
-VirtualList.displayName = 'ForwardRef(VirtualList)'
+}
 
 function findScrollable(parentNode: ParentNode | null) {
   let _scrollEl = parentNode

package/src/core/constants.ts

@@ -1,20 +1,13 @@
 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: {
@@ -67,13 +60,8 @@ export const POPOVER_MOTION_PROPS: {
   },
 }
 
-/**
- * @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/core/helpers/focus.ts

@@ -7,10 +7,6 @@ import {
   isHTMLTextAreaElement,
 } from './element'
 
-// export const globalFocusState = {
-//   IgnoreUtilFocusChanges: false,
-// }
-
 /**
  * @internal
  */
@@ -56,16 +52,12 @@ export function attemptFocus(element: HTMLElement): boolean {
     return false
   }
 
-  // globalFocusState.IgnoreUtilFocusChanges = true
-
   try {
     element.focus()
   } catch {
     // ignore
   }
 
-  // globalFocusState.IgnoreUtilFocusChanges = false
-
   return document.activeElement === element
 }
 

package/src/core/helpers/props.ts

@@ -0,0 +1,28 @@
+import type {Breakpoint, ResponsiveProp} from '@sanity/ui/css'
+
+import {EMPTY_ARRAY} from '../constants'
+import {isArray} from '../lib/isArray'
+import {isRecord} from '../lib/isRecord'
+
+/**
+ * @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]
+}
+
+/**
+ * @internal
+ */
+export function _getResponsiveProp<T>(
+  val: ResponsiveProp<T> | undefined,
+  defaultVal?: Partial<Record<Breakpoint, T>>,
+): Partial<Record<Breakpoint, T>> {
+  if (val === undefined) {
+    return (defaultVal || EMPTY_ARRAY) as Partial<Record<Breakpoint, T>>
+  }
+
+  return (isArray(val) || isRecord(val) ? val : [val]) as Partial<Record<Breakpoint, T>>
+}