@sanity/ui 0.37.5 → 0.37.6

package/src/components/tree/tree.tsx

@@ -1,4 +1,5 @@
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import React, {forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {useForwardedRef} from '../../hooks'
 import {Stack} from '../../primitives'
 import {_findNextItemElement, _findPrevItemElement, _focusItemElement} from './helpers'
 import {TreeContext} from './treeContext'
@@ -16,174 +17,197 @@ export interface TreeProps {
  * 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)
+export const Tree = memo(
+  forwardRef(function Tree(
+    props: TreeProps &
+      Omit<React.HTMLProps<HTMLDivElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
+    ref: React.ForwardedRef<HTMLDivElement>
+  ): React.ReactElement {
+    const {children, space = 1, ...restProps} = props
+    const forwardedRef = useForwardedRef(ref)
+    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)
+
+    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
-      }
+        return () => {
+          setState((s) => {
+            const newState = {...s}
 
-      if (event.key === 'ArrowUp') {
-        event.preventDefault()
+            delete newState[path]
 
-        const prevEl = _findPrevItemElement(state, itemElements, focusedElement)
+            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 (!focusedElementRef.current) return
+
+        if (event.key === 'ArrowDown') {
+          event.preventDefault()
+
+          const nextEl = _findNextItemElement(
+            stateRef.current,
+            itemElements,
+            focusedElementRef.current
+          )
+
+          if (nextEl) {
+            _focusItemElement(nextEl)
+            setFocusedElement(nextEl)
+          }
 
-        if (prevEl) {
-          _focusItemElement(prevEl)
-          setFocusedElement(prevEl)
+          return
         }
 
-        return
-      }
+        if (event.key === 'ArrowUp') {
+          event.preventDefault()
 
-      if (event.key === 'ArrowLeft') {
-        event.preventDefault()
+          const prevEl = _findPrevItemElement(
+            stateRef.current,
+            itemElements,
+            focusedElementRef.current
+          )
 
-        const itemKey = focusedElement.getAttribute('data-tree-key')
+          if (prevEl) {
+            _focusItemElement(prevEl)
+            setFocusedElement(prevEl)
+          }
 
-        if (!itemKey) return
+          return
+        }
 
-        const itemState = state[itemKey]
+        if (event.key === 'ArrowLeft') {
+          event.preventDefault()
 
-        if (!itemState) return
+          const itemKey = focusedElementRef.current.getAttribute('data-tree-key')
 
-        if (itemState.expanded) {
-          setState((s) => {
-            const itemState = s[itemKey]
+          if (!itemKey) return
 
-            if (!itemState) return s
+          const itemState = stateRef.current[itemKey]
 
-            return {...s, [itemKey]: {...itemState, expanded: false}}
-          })
-        } else {
-          const itemPath = itemKey.split('/')
+          if (!itemState) return
+
+          if (itemState.expanded) {
+            setState((s) => {
+              const itemState = s[itemKey]
 
-          itemPath.pop()
+              if (!itemState) return s
 
-          const parentKey = itemPath.join('/')
-          const parentState = parentKey && state[parentKey]
+              return {...s, [itemKey]: {...itemState, expanded: false}}
+            })
+          } else {
+            const itemPath = itemKey.split('/')
 
-          if (parentState) {
-            parentState.element.focus()
-            setFocusedElement(parentState.element)
+            itemPath.pop()
+
+            const parentKey = itemPath.join('/')
+            const parentState = parentKey && stateRef.current[parentKey]
+
+            if (parentState) {
+              parentState.element.focus()
+              setFocusedElement(parentState.element)
+            }
           }
+
+          return
         }
 
-        return
-      }
+        if (event.key === 'ArrowRight') {
+          event.preventDefault()
 
-      if (event.key === 'ArrowRight') {
-        event.preventDefault()
+          const focusedKey = focusedElementRef.current.getAttribute('data-tree-key')
 
-        const focusedKey = focusedElement.getAttribute('data-tree-key')
+          if (!focusedKey) return
 
-        if (!focusedKey) return
+          if (!stateRef.current[focusedKey]?.expanded) {
+            setState((s) => {
+              const itemState = s[focusedKey]
 
-        if (!state[focusedKey]?.expanded) {
-          setState((s) => {
-            const itemState = s[focusedKey]
+              if (!itemState) return s
 
-            if (!itemState) return s
+              return {...s, [focusedKey]: {...itemState, expanded: true}}
+            })
+          }
 
-            return {...s, [focusedKey]: {...itemState, expanded: true}}
-          })
+          return
         }
-
-        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>
-  )
-}
+      },
+      [itemElements]
+    )
+
+    useEffect(() => {
+      if (!forwardedRef.current) return
+      const _itemElements = Array.from(
+        forwardedRef.current.querySelectorAll('[data-ui="TreeItem"]')
+      ) as HTMLElement[]
+
+      setItemElements(_itemElements)
+    }, [children, forwardedRef])
+
+    return (
+      <TreeContext.Provider value={contextValue}>
+        <Stack
+          as="ul"
+          data-ui="Tree"
+          {...restProps}
+          onKeyDown={handleKeyDown}
+          ref={forwardedRef}
+          role="tree"
+          space={space}
+        >
+          {children}
+        </Stack>
+      </TreeContext.Provider>
+    )
+  })
+)
+
+Tree.displayName = 'Tree'

package/src/components/tree/treeGroup.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {memo} from 'react'
 import {Stack} from '../../primitives'
 import {useTree} from './useTree'
 
@@ -6,7 +6,7 @@ export interface TreeGroupProps {
   expanded?: boolean
 }
 
-export function TreeGroup(
+export const TreeGroup = memo(function TreeGroup(
   props: TreeGroupProps &
     Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'role' | 'wrap'>
 ): React.ReactElement {
@@ -26,4 +26,4 @@ export function TreeGroup(
       {children}
     </Stack>
   )
-}
+})

package/src/components/tree/treeItem.tsx

@@ -1,6 +1,6 @@
 import {useId} from '@reach/auto-id'
 import {ToggleArrowRightIcon} from '@sanity/icons'
-import React, {createElement, useCallback, useEffect, useMemo, useRef} from 'react'
+import React, {createElement, memo, useCallback, useEffect, useMemo, useRef} from 'react'
 import styled from 'styled-components'
 import {Box, Flex, Text} from '../../primitives'
 import {ThemeFontWeightKey} from '../../theme'
@@ -27,7 +27,7 @@ export interface TreeItemProps {
   weight?: ThemeFontWeightKey
 }
 
-const Root = styled.li(treeItemRootStyle, treeItemRootColorStyle)
+const Root = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle))
 
 const TreeItemBox = styled(Box).attrs({forwardedAs: 'a'})<TreeItemBoxStyleProps>(treeItemBoxStyle)
 
@@ -41,7 +41,7 @@ const ToggleArrowText = styled(Text)`
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export function TreeItem(
+export const TreeItem = memo(function TreeItem(
   props: TreeItemProps & Omit<React.HTMLProps<HTMLLIElement>, 'as' | 'ref' | 'role'>
 ): React.ReactElement {
   const {
@@ -191,4 +191,4 @@ export function TreeItem(
       </TreeContext.Provider>
     </Root>
   )
-}
+})

package/src/hooks/usePrefersDark.ts

@@ -1,13 +1,19 @@
-import {useEffect, useState} from 'react'
+import {useEffect, useMemo, useState} from 'react'
 
 /**
  * @public
  */
 export function usePrefersDark(): boolean {
-  const [dark, setDark] = useState(false)
+  const mq = useMemo(() => {
+    if (typeof window === 'undefined') return undefined
+
+    return window.matchMedia('(prefers-color-scheme: dark)')
+  }, [])
+
+  const [dark, setDark] = useState(mq?.matches || false)
 
   useEffect(() => {
-    const mq = window.matchMedia('(prefers-color-scheme: dark)')
+    if (!mq) return undefined
 
     setDark(mq.matches)
 
@@ -16,7 +22,7 @@ export function usePrefersDark(): boolean {
     mq.addEventListener('change', handleChange)
 
     return () => mq.removeEventListener('change', handleChange)
-  }, [])
+  }, [mq])
 
   return dark
 }

package/src/primitives/textInput/__workshop__/plain.tsx

@@ -1,7 +1,8 @@
 import {icons, IconSymbol} from '@sanity/icons'
 import {Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import React from 'react'
+import {PerfTestProps, useBoolean, usePerfTest, useSelect, useText} from '@sanity/ui-workshop'
+import {fireEvent} from '@testing-library/dom'
+import React, {useCallback, useState} from 'react'
 import {
   WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
   WORKSHOP_FONT_WEIGHT_OPTIONS,
@@ -10,7 +11,25 @@ import {
   WORKSHOP_SPACE_OPTIONS,
 } from '../../../__workshop__/constants'
 
+const typingPerfTest: PerfTestProps<HTMLInputElement> = {
+  name: 'typing',
+  title: 'Typing',
+  description: 'This test types one character at a time',
+  run({target}) {
+    const text = 'Hello, world & Hello, world & Hello, world'
+    const len = text.length
+
+    for (let i = 0; i < len; i += 1) {
+      const value = text.slice(0, i + 1)
+
+      fireEvent.change(target, {target: {value}})
+    }
+  },
+}
+
 export default function PlainStory() {
+  const {ref, Wrapper} = usePerfTest(typingPerfTest)
+
   const border = useBoolean('Border', true, 'Props')
   const customValidity = useText('Custom validity', '', 'Props') || undefined
   const disabled = useBoolean('Disabled', false, 'Props')
@@ -29,6 +48,13 @@ export default function PlainStory() {
   const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
   const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, '', 'Props') || undefined
 
+  const [value, setValue] = useState('')
+
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => setValue(event.currentTarget.value),
+    []
+  )
+
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container width={0}>
@@ -36,22 +62,27 @@ export default function PlainStory() {
           <Text as="label" htmlFor="text-input-example" size={1} weight="semibold">
             TextInput
           </Text>
-          <TextInput
-            border={border}
-            customValidity={customValidity}
-            disabled={disabled}
-            fontSize={fontSize}
-            icon={icon && icons[icon]}
-            iconRight={iconRight && icons[iconRight]}
-            id="text-input-example"
-            name="email"
-            padding={padding}
-            placeholder={placeholder}
-            radius={radius}
-            readOnly={readOnly}
-            space={space}
-            weight={weight}
-          />
+          <Wrapper>
+            <TextInput
+              border={border}
+              customValidity={customValidity}
+              disabled={disabled}
+              fontSize={fontSize}
+              icon={icon && icons[icon]}
+              iconRight={iconRight && icons[iconRight]}
+              id="text-input-example"
+              name="email"
+              onChange={handleChange}
+              padding={padding}
+              placeholder={placeholder}
+              radius={radius}
+              readOnly={readOnly}
+              ref={ref}
+              space={space}
+              value={value}
+              weight={weight}
+            />
+          </Wrapper>
         </Stack>
       </Container>
     </Flex>

package/src/primitives/textInput/textInput.tsx

@@ -226,8 +226,28 @@ export const TextInput = forwardRef(function TextInput(
   )
 
   // Render clear button (memoized)
-  const clearButtonBoxPadding = useMemo(() => padding.map((v) => v - 2), [padding])
-  const clearButtonPadding = useMemo(() => padding.map((v) => v - 1), [padding])
+  const clearButtonBoxPadding = useMemo(
+    () =>
+      padding.map((v) => {
+        if (v === 0) return 0
+        if (v === 1) return 1
+        if (v === 2) return 1
+
+        return v - 2
+      }),
+    [padding]
+  )
+  const clearButtonPadding = useMemo(
+    () =>
+      padding.map((v) => {
+        if (v === 0) return 0
+        if (v === 1) return 0
+        if (v === 2) return 1
+
+        return v - 1
+      }),
+    [padding]
+  )
   const clearButtonProps: TextInputClearButtonProps = useMemo(
     () => (typeof clearButton === 'object' ? clearButton : EMPTY_RECORD),
     [clearButton]
@@ -249,7 +269,7 @@ export const TextInput = forwardRef(function TextInput(
             icon={CloseIcon}
             mode="bleed"
             padding={clearButtonPadding}
-            radius={radius.map((r) => r - 1)}
+            radius={radius}
             {...clearButtonProps}
             onClick={handleClearClick}
             onMouseDown={handleClearMouseDown}

package/src/styles/input/textInputStyle.ts

@@ -25,6 +25,8 @@ const ROOT_STYLE = css`
   &:not([hidden]) {
     display: flex;
   }
+
+  align-items: center;
 `
 
 export function textInputRootStyle(): FlattenSimpleInterpolation {

package/src/utils/errorBoundary.tsx

@@ -37,7 +37,9 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoun
     const {error} = this.state
 
     if (error) {
-      return <Code>{error.message}</Code>
+      const message = typeof error?.message === 'string' ? error.message : 'Error'
+
+      return <Code>{message}</Code>
     }
 
     return this.props.children