TreeView: Add current prop

.changeset/tidy-beans-punch.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add a `current` prop to `TreeView.Item` and `TreeView.LinkItem`

docs/content/TreeView.mdx

@@ -19,7 +19,9 @@ description: A hierarchical list of items where nested items can be expanded and
         <TreeView.Item>
           Button
           <TreeView.SubTree>
-            <TreeView.LinkItem href="#">Button.tsx</TreeView.LinkItem>
+            <TreeView.LinkItem href="#" current>
+              Button.tsx
+            </TreeView.LinkItem>
             <TreeView.LinkItem href="#">Button.test.tsx</TreeView.LinkItem>
           </TreeView.SubTree>
         </TreeView.Item>
@@ -46,7 +48,7 @@ description: A hierarchical list of items where nested items can be expanded and
       src
       <TreeView.SubTree>
         <TreeView.LinkItem href="#">Avatar.tsx</TreeView.LinkItem>
-        <TreeView.LinkItem href="#">
+        <TreeView.LinkItem href="#" current>
           Button
           <TreeView.SubTree>
             <TreeView.LinkItem href="#">Button.tsx</TreeView.LinkItem>
@@ -80,6 +82,12 @@ description: A hierarchical list of items where nested items can be expanded and
 
 <PropsTable>
   <PropsTableRow name="children" type="React.ReactNode" required />
+  <PropsTable
+    name="current"
+    type="boolean"
+    defaultValue="false"
+    description="Whether the item is the current item. No more than one item should be current at once."
+  />
   <PropsTableRow name="defaultExpanded" type="boolean" description="Whether the item is expanded by default." />
   <PropsTableRow
     name="onSelect"

src/TreeView/TreeView.stories.tsx

@@ -19,7 +19,7 @@ export const FileTreeWithDirectoryLinks: Story = () => (
           src
           <TreeView.SubTree>
             <TreeView.LinkItem href="#avatar-tsx">Avatar.tsx</TreeView.LinkItem>
-            <TreeView.LinkItem href="#button">
+            <TreeView.LinkItem href="#button" current>
               Button
               <TreeView.SubTree>
                 <TreeView.LinkItem href="#button-tsx">Button.tsx</TreeView.LinkItem>
@@ -45,37 +45,41 @@ export const FileTreeWithDirectoryLinks: Story = () => (
   </Box>
 )
 
-export const FileTreeWithoutDirectoryLinks: Story = () => (
-  <Box p={3}>
-    <nav aria-label="File navigation">
-      <TreeView aria-label="File navigation">
-        <TreeView.Item>
-          src
-          <TreeView.SubTree>
-            <TreeView.LinkItem href="#avatar-tsx">Avatar.tsx</TreeView.LinkItem>
-            <TreeView.Item>
-              Button
-              <TreeView.SubTree>
-                <TreeView.LinkItem href="#button-tsx">Button.tsx</TreeView.LinkItem>
-                <TreeView.LinkItem href="#button-test-tsx">Button.test.tsx</TreeView.LinkItem>
-              </TreeView.SubTree>
-            </TreeView.Item>
-          </TreeView.SubTree>
-        </TreeView.Item>
-        <TreeView.Item
-          // eslint-disable-next-line no-console
-          onToggle={isExpanded => console.log(`${isExpanded ? 'Expanded' : 'Collapsed'} "public" folder `)}
-        >
-          public
-          <TreeView.SubTree>
-            <TreeView.LinkItem href="#index-html">index.html</TreeView.LinkItem>
-            <TreeView.LinkItem href="#favicon-ico">favicon.ico</TreeView.LinkItem>
-          </TreeView.SubTree>
-        </TreeView.Item>
-        <TreeView.LinkItem href="#package-json">package.json</TreeView.LinkItem>
-      </TreeView>
-    </nav>
-  </Box>
-)
+export const FileTreeWithoutDirectoryLinks: Story = () => {
+  return (
+    <Box p={3}>
+      <nav aria-label="File navigation">
+        <TreeView aria-label="File navigation">
+          <TreeView.Item>
+            src
+            <TreeView.SubTree>
+              <TreeView.LinkItem href="#avatar-tsx">Avatar.tsx</TreeView.LinkItem>
+              <TreeView.Item>
+                Button
+                <TreeView.SubTree>
+                  <TreeView.LinkItem href="#button-tsx" current>
+                    Button.tsx
+                  </TreeView.LinkItem>
+                  <TreeView.LinkItem href="#button-test-tsx">Button.test.tsx</TreeView.LinkItem>
+                </TreeView.SubTree>
+              </TreeView.Item>
+            </TreeView.SubTree>
+          </TreeView.Item>
+          <TreeView.Item
+            // eslint-disable-next-line no-console
+            onToggle={isExpanded => console.log(`${isExpanded ? 'Expanded' : 'Collapsed'} "public" folder `)}
+          >
+            public
+            <TreeView.SubTree>
+              <TreeView.LinkItem href="#index-html">index.html</TreeView.LinkItem>
+              <TreeView.LinkItem href="#favicon-ico">favicon.ico</TreeView.LinkItem>
+            </TreeView.SubTree>
+          </TreeView.Item>
+          <TreeView.LinkItem href="#package-json">package.json</TreeView.LinkItem>
+        </TreeView>
+      </nav>
+    </Box>
+  )
+}
 
 export default meta

src/TreeView/TreeView.test.tsx

@@ -59,7 +59,22 @@ describe('Markup', () => {
     expect(subtree).toBeNull()
   })
 
-  it('initializes aria-activedescendant to the first item by default', () => {
+  it('initializes aria-activedescendant to the current item by default', () => {
+    const {queryByRole} = renderWithTheme(
+      <TreeView aria-label="Test tree">
+        <TreeView.Item>Item 1</TreeView.Item>
+        <TreeView.Item current>Item 2</TreeView.Item>
+        <TreeView.Item>Item 3</TreeView.Item>
+      </TreeView>
+    )
+
+    const root = queryByRole('tree')
+    const currentItem = queryByRole('treeitem', {name: 'Item 2'})
+
+    expect(root).toHaveAttribute('aria-activedescendant', currentItem?.id)
+  })
+
+  it('initializes aria-activedescendant to the first item if there is no current item', () => {
     const {queryByRole} = renderWithTheme(
       <TreeView aria-label="Test tree">
         <TreeView.Item>Item 1</TreeView.Item>
@@ -73,6 +88,110 @@ describe('Markup', () => {
 
     expect(root).toHaveAttribute('aria-activedescendant', firstItem?.id)
   })
+
+  it('uses aria-current', () => {
+    const {getByRole} = renderWithTheme(
+      <TreeView aria-label="Test tree">
+        <TreeView.Item>Item 1</TreeView.Item>
+        <TreeView.Item current>Item 2</TreeView.Item>
+        <TreeView.Item>Item 3</TreeView.Item>
+      </TreeView>
+    )
+
+    const currentItem = getByRole('treeitem', {name: 'Item 2'})
+
+    expect(currentItem).toHaveAttribute('aria-current', 'true')
+  })
+
+  it('expands the path to the current item by default', () => {
+    const {getByRole} = renderWithTheme(
+      <TreeView aria-label="Test tree">
+        <TreeView.Item>
+          Item 1
+          <TreeView.SubTree>
+            <TreeView.Item>Item 1.1</TreeView.Item>
+          </TreeView.SubTree>
+        </TreeView.Item>
+        <TreeView.Item>
+          Item 2
+          <TreeView.SubTree>
+            <TreeView.Item>Item 2.1</TreeView.Item>
+            <TreeView.Item current>
+              Item 2.2
+              <TreeView.SubTree>
+                <TreeView.Item>Item 2.2.1</TreeView.Item>
+              </TreeView.SubTree>
+            </TreeView.Item>
+          </TreeView.SubTree>
+        </TreeView.Item>
+        <TreeView.Item>Item 3</TreeView.Item>
+      </TreeView>
+    )
+
+    const item1 = getByRole('treeitem', {name: 'Item 1'})
+    const item2 = getByRole('treeitem', {name: 'Item 2'})
+    const item22 = getByRole('treeitem', {name: 'Item 2.2'})
+    const item221 = getByRole('treeitem', {name: 'Item 2.2.1'})
+
+    // Item 1 should not be expanded because it is not the parent of the current item
+    expect(item1).toHaveAttribute('aria-expanded', 'false')
+
+    // Item 2 should be expanded because it is the parent of the current item
+    expect(item2).toHaveAttribute('aria-expanded', 'true')
+
+    // Item 2.2 should be expanded because it is the current item
+    expect(item22).toHaveAttribute('aria-expanded', 'true')
+
+    // Item 2.2 should have an aria-current value of true
+    expect(item22).toHaveAttribute('aria-current', 'true')
+
+    // Item 2.2.1 should be visible because it is a child of the current item
+    expect(item221).toBeVisible()
+  })
+
+  it('expands the path to the current item when the current item is changed', () => {
+    function TestTree() {
+      const [current, setCurrent] = React.useState('item1')
+      return (
+        <div>
+          <button onClick={() => setCurrent('item2')}>Jump to Item 2</button>
+          <TreeView aria-label="Test tree">
+            <TreeView.Item current={current === 'item1'}>Item 1</TreeView.Item>
+            <TreeView.Item current={current === 'item2'}>
+              Item 2
+              <TreeView.SubTree>
+                <TreeView.Item current={current === 'item2.1'}>Item 2.1</TreeView.Item>
+              </TreeView.SubTree>
+            </TreeView.Item>
+            <TreeView.Item current={current === 'item3'}>Item 3</TreeView.Item>
+          </TreeView>
+        </div>
+      )
+    }
+
+    const {getByRole, getByText} = renderWithTheme(<TestTree />)
+
+    const item1 = getByRole('treeitem', {name: 'Item 1'})
+    const item2 = getByRole('treeitem', {name: 'Item 2'})
+
+    // Item 1 should have an aria-current value of true
+    expect(item1).toHaveAttribute('aria-current', 'true')
+
+    // Item 2 should not be expanded because it is not the current item or the parent of the current item
+    expect(item2).toHaveAttribute('aria-expanded', 'false')
+
+    // Click the button to change the current item to Item 2
+    fireEvent.click(getByText('Jump to Item 2'))
+
+    // Item 1 should not have an aria-current value
+    expect(item1).not.toHaveAttribute('aria-current')
+
+    // Item 2 should be expanded because it is the current item
+    expect(item2).toHaveAttribute('aria-expanded', 'true')
+
+    // Item 2.1 should be visible because it is a child of the current item
+    expect(getByRole('treeitem', {name: 'Item 2.1'})).toBeVisible()
+  })
 })
 
 describe('Keyboard interactions', () => {

src/TreeView/TreeView.tsx

@@ -36,19 +36,29 @@ export type TreeViewProps = {
 const UlBox = styled.ul<SxProp>(sx)
 
 const Root: React.FC<TreeViewProps> = ({'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, children}) => {
+  const rootRef = React.useRef<HTMLUListElement>(null)
   const [activeDescendant, setActiveDescendant] = React.useState('')
 
   React.useEffect(() => {
-    // Initialize the active descendant to the first item in the tree
-    if (!activeDescendant) {
-      const firstItem = document.querySelector('[role="treeitem"]')
-      if (firstItem) setActiveDescendant(firstItem.id)
+    if (rootRef.current && !activeDescendant) {
+      const currentItem = rootRef.current.querySelector('[role="treeitem"][aria-current="true"]')
+      const firstItem = rootRef.current.querySelector('[role="treeitem"]')
+
+      // If current item exists, use it as the initial value for active descendant
+      if (currentItem) {
+        setActiveDescendant(currentItem.id)
+      }
+      // Otherwise, initialize the active descendant to the first item in the tree
+      else if (firstItem) {
+        setActiveDescendant(firstItem.id)
+      }
     }
-  }, [activeDescendant])
+  }, [rootRef, activeDescendant])
 
   return (
     <RootContext.Provider value={{activeDescendant, setActiveDescendant}}>
       <UlBox
+        ref={rootRef}
         tabIndex={0}
         role="tree"
         aria-label={ariaLabel}
@@ -226,12 +236,19 @@ function getLastElement(element: HTMLElement): HTMLElement | undefined {
 
 export type TreeViewItemProps = {
   children: React.ReactNode
+  current?: boolean
   defaultExpanded?: boolean
   onSelect?: (event: React.MouseEvent<HTMLElement> | KeyboardEvent) => void
   onToggle?: (isExpanded: boolean) => void
 }
 
-const Item: React.FC<TreeViewItemProps> = ({defaultExpanded = false, onSelect, onToggle, children}) => {
+const Item: React.FC<TreeViewItemProps> = ({
+  current: isCurrent = false,
+  defaultExpanded = false,
+  onSelect,
+  onToggle,
+  children
+}) => {
   const {setActiveDescendant} = React.useContext(RootContext)
   const itemId = useSSRSafeId()
   const labelId = useSSRSafeId()
@@ -250,6 +267,13 @@ const Item: React.FC<TreeViewItemProps> = ({defaultExpanded = false, onSelect, o
     [isExpanded, onToggle]
   )
 
+  // Expand item if it is the current item or contains the current item
+  React.useLayoutEffect(() => {
+    if (isCurrent || itemRef.current?.querySelector('[aria-current=true]')) {
+      setIsExpanded(true)
+    }
+  }, [itemRef, isCurrent, subTree])
+
   React.useEffect(() => {
     const element = itemRef.current
 
@@ -271,11 +295,11 @@ const Item: React.FC<TreeViewItemProps> = ({defaultExpanded = false, onSelect, o
           break
 
         case 'ArrowRight':
-          if (!isExpanded) setIsExpanded(true)
+          if (!isExpanded) toggle()
           break
 
         case 'ArrowLeft':
-          if (isExpanded) setIsExpanded(false)
+          if (isExpanded) toggle()
           break
       }
     }
@@ -293,6 +317,7 @@ const Item: React.FC<TreeViewItemProps> = ({defaultExpanded = false, onSelect, o
         aria-labelledby={labelId}
         aria-level={level}
         aria-expanded={hasSubTree ? isExpanded : undefined}
+        aria-current={isCurrent ? 'true' : undefined}
       >
         <Box
           onClick={event => {
@@ -304,6 +329,7 @@ const Item: React.FC<TreeViewItemProps> = ({defaultExpanded = false, onSelect, o
             }
           }}
           sx={{
+            position: 'relative',
             display: 'grid',
             gridTemplateColumns: `calc(${level - 1} * 8px) 16px 1fr`,
             gridTemplateAreas: `"spacer toggle content"`,
@@ -319,6 +345,19 @@ const Item: React.FC<TreeViewItemProps> = ({defaultExpanded = false, onSelect, o
             },
             [`[role=tree][aria-activedescendant="${itemId}"]:focus-visible &`]: {
               boxShadow: (theme: Theme) => `0 0 0 2px ${theme.colors.accent.emphasis}`
+            },
+            '[role=treeitem][aria-current=true] > &': {
+              bg: 'actionListItem.default.selectedBg',
+              '&::after': {
+                position: 'absolute',
+                top: 'calc(50% - 12px)',
+                left: -2,
+                width: '4px',
+                height: '24px',
+                content: '""',
+                bg: 'accent.fg',
+                borderRadius: 2
+              }
             }
           }}
         >