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
+ }
  }
  }}
  >