@sanity/ui 1.7.0 → 1.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",

package/src/components/tree/__workshop__/index.ts

@@ -11,5 +11,11 @@ export default defineScope({
       component: lazy(() => import('./basic')),
       // options: {perfTests: () => import('./basic.perf')},
     },
+    {
+      name: 'tab',
+      title: 'Tab',
+      component: lazy(() => import('./tabFromElement')),
+      // options: {perfTests: () => import('./basic.perf')},
+    },
   ],
 })

package/src/components/tree/__workshop__/tabFromElement.tsx

@@ -0,0 +1,83 @@
+import {LinkIcon} from '@sanity/icons'
+import {Box, TextInput, Tree, TreeItem, Text} from '@sanity/ui'
+import {usePerfTest} from '@sanity/ui-workshop/plugin-perf'
+import {useCallback, useState} from 'react'
+import {perfTests} from './basic.perf'
+
+export default function BasicStory() {
+  const {ref, Wrapper} = usePerfTest(perfTests[0])
+
+  const [id, setId] = useState('')
+  const [focus, setFocus] = useState('')
+
+  const handleClick = useCallback((event: React.MouseEvent) => {
+    event.preventDefault()
+
+    const testid = event.currentTarget.getAttribute('data-testid')
+
+    if (testid) setId(testid)
+  }, [])
+
+  const handleFocus = useCallback((event: React.FocusEvent<HTMLDivElement>) => {
+    const elementFocus = event.target.getAttribute('data-testid')
+    if (elementFocus) setFocus(elementFocus)
+  }, [])
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Box paddingY={3}>
+        <Text>
+          This example is to demonstrate that when you tab from an outside element (using the
+          keyboard to navigate), you can still access the tree and tree item. Press the input
+          beneath and start tabbing / using the arrow.
+        </Text>
+      </Box>
+      <Box paddingY={3}>
+        <Text>Focus: {focus}</Text>
+      </Box>
+      <Wrapper>
+        <TextInput />
+        <Tree ref={ref} space={1} onFocus={handleFocus}>
+          <TreeItem data-testid="fruit" onClick={handleClick} expanded text="Fruit">
+            <TreeItem
+              data-testid="oranges"
+              onClick={handleClick}
+              selected={id === 'oranges'}
+              text="Oranges"
+            />
+            <TreeItem
+              data-testid="pineapples"
+              onClick={handleClick}
+              text="Pineapples"
+              selected={id === 'pineapples'}
+            />
+            <TreeItem data-testid="apples" onClick={handleClick} text="Apples">
+              <TreeItem
+                data-testid="apples/macintosh"
+                onClick={handleClick}
+                href="/apples/macintosh"
+                icon={LinkIcon}
+                text="Macintosh"
+              />
+              <TreeItem
+                data-testid="apples/granny-smith"
+                onClick={handleClick}
+                text="Granny Smith"
+              />
+              <TreeItem data-testid="apples/fuji" onClick={handleClick} text="Fuji" />
+            </TreeItem>
+            <TreeItem data-testid="bananas" onClick={handleClick} text="Bananas" />
+            <TreeItem data-testid="pears" onClick={handleClick} text="Pears">
+              <TreeItem data-testid="pears/anjou" onClick={handleClick} text="Anjou" />
+              <TreeItem data-testid="pears/bartlett" onClick={handleClick} text="Bartlett" />
+              <TreeItem data-testid="pears/bosc" onClick={handleClick} text="Bosc" />
+              <TreeItem data-testid="pears/concorde" onClick={handleClick} text="Concorde" />
+              <TreeItem data-testid="pears/seckel" onClick={handleClick} text="Seckel" />
+              <TreeItem data-testid="pears/starkrimson" onClick={handleClick} text="Starkrimson" />
+            </TreeItem>
+          </TreeItem>
+        </Tree>
+      </Wrapper>
+    </Box>
+  )
+}

package/src/components/tree/tree.tsx

@@ -23,7 +23,7 @@ export const Tree = memo(
       Omit<React.HTMLProps<HTMLDivElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
     ref: React.ForwardedRef<HTMLDivElement>
   ): React.ReactElement {
-    const {children, space = 1, ...restProps} = props
+    const {children, space = 1, onFocus, ...restProps} = props
     const forwardedRef = useForwardedRef(ref)
     const [focusedElement, setFocusedElement] = useState<HTMLElement | null>(null)
     const focusedElementRef = useRef(focusedElement)
@@ -183,6 +183,16 @@ export const Tree = memo(
       [itemElements]
     )
 
+    const handleFocus = useCallback(
+      (event: React.FocusEvent<HTMLDivElement>) => {
+        setFocusedElement(event.target)
+
+        // Call the element's `focus` handler
+        onFocus?.(event)
+      },
+      [onFocus]
+    )
+
     useEffect(() => {
       if (!forwardedRef.current) return
       const _itemElements = Array.from(
@@ -198,6 +208,7 @@ export const Tree = memo(
           as="ul"
           data-ui="Tree"
           {...restProps}
+          onFocus={handleFocus}
           onKeyDown={handleKeyDown}
           ref={forwardedRef}
           role="tree"

package/src/components/tree/treeItem.tsx

@@ -89,7 +89,7 @@ export const TreeItem = memo(function TreeItem(
 
       if (
         target instanceof HTMLElement &&
-        (target.getAttribute('data-ui') === 'TreeItem__box' ||
+        (target.getAttribute('data-ui') === 'TreeItem' ||
           target.closest('[data-ui="TreeItem__box"]'))
       ) {
         event.stopPropagation()