TreeView: Allow expanded state to be controlled

.changeset/serious-adults-protect.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+TreeView: Allow expanded state to be controlled

.eslintrc.json

@@ -45,6 +45,7 @@
   },
   // rules which apply to JS, TS, etc.
   "rules": {
+    "no-shadow": 0,
     "react/prop-types": 0,
     "react/display-name": 0,
     "react-hooks/exhaustive-deps": "error",
@@ -69,7 +70,6 @@
       "rules": {
         "eslint-comments/no-use": 0,
         "import/no-namespace": 0,
-        "no-shadow": 0,
         "no-unused-vars": [
           "error",
           {
@@ -94,6 +94,14 @@
           {
             "argsIgnorePattern": "^_"
           }
+        ],
+        "@typscript-eslint/no-shadow": 0,
+        "@typescript-eslint/no-empty-function": 0,
+        "@typescript-eslint/ban-ts-comment": [
+          "error",
+          {
+            "ts-ignore": "allow-with-description"
+          }
         ]
       }
     },

docs/content/TreeView.mdx

@@ -69,6 +69,35 @@ description: A hierarchical list of items where nested items can be expanded and
 </nav>
 ```
 
+### With controlled expanded state
+
+```javascript live noinline drafts
+function ControlledTreeView() {
+  const [expanded, setExpanded] = React.useState(false)
+
+  return (
+    <Box sx={{display: 'grid', gap: 2}}>
+      <Button onClick={() => setExpanded(!expanded)}>{expanded ? 'Collapse' : 'Expand'}</Button>
+      <nav aria-label="File navigation">
+        <TreeView aria-label="File navigation">
+          <TreeView.Item expanded={expanded} onExpandedChange={setExpanded}>
+            src
+            <TreeView.SubTree>
+              <TreeView.LinkItem href="#">Avatar.tsx</TreeView.LinkItem>
+              <TreeView.LinkItem href="#" current>
+                Button.tsx
+              </TreeView.LinkItem>
+            </TreeView.SubTree>
+          </TreeView.Item>
+        </TreeView>
+      </nav>
+    </Box>
+  )
+}
+
+render(<ControlledTreeView />)
+```
+
 ## Props
 
 ### TreeView
@@ -82,18 +111,31 @@ description: A hierarchical list of items where nested items can be expanded and
 
 <PropsTable>
   <PropsTableRow name="children" type="React.ReactNode" required />
-  <PropsTable
+  <PropsTableRow
     name="current"
     type="boolean"
     defaultValue="false"
-    description="Whether the item is the current item. No more than one item should be current at once."
+    description="Whether the item is the current item. No more than one item should be current at once. The path to the current item will be expanded by default."
+  />
+  <PropsTableRow
+    name="defaultExpanded"
+    type="boolean"
+    description="The expanded state of the item when it is initially rendered. Use when you do not need to control the state."
+  />
+  <PropsTableRow
+    name="expanded"
+    type="boolean"
+    description="The controlled expanded state of item. Must be used in conjunction with onExpandedChange."
+  />
+  <PropsTableRow
+    name="onExpandedChange"
+    type="(expanded: boolean) => void"
+    description="Event handler called when the expanded state of the item changes."
   />
-  <PropsTableRow name="defaultExpanded" type="boolean" description="Whether the item is expanded by default." />
   <PropsTableRow
     name="onSelect"
     type="(event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void"
   />
-  <PropsTableRow name="onToggle" type="(isExpanded: boolean) => void" />
   {/* <PropsTableSxRow /> */}
 </PropsTable>
 
@@ -113,11 +155,31 @@ description: A hierarchical list of items where nested items can be expanded and
       </>
     }
   />
+  <PropsTableRow
+    name="current"
+    type="boolean"
+    defaultValue="false"
+    description="Whether the item is the current item. No more than one item should be current at once. The path to the current item will be expanded by default."
+  />
+  <PropsTableRow
+    name="defaultExpanded"
+    type="boolean"
+    description="The expanded state of the item when it is initially rendered. Use when you do not need to control its state."
+  />
+  <PropsTableRow
+    name="expanded"
+    type="boolean"
+    description="The controlled expanded state of item. Must be used in conjunction with onExpandedChange."
+  />
+  <PropsTableRow
+    name="onExpandedChange"
+    type="(expanded: boolean) => void"
+    description="Event handler called when the expanded state of the item changes."
+  />
   <PropsTableRow
     name="onSelect"
     type="(event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void"
   />
-  <PropsTableRow name="onToggle" type="(isExpanded: boolean) => void" />
   {/* <PropsTableSxRow /> */}
 </PropsTable>
 

src/PageLayout/PageLayout.tsx

@@ -77,7 +77,6 @@ const Root: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({
       <Box
         ref={rootRef}
         style={{
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore TypeScript doesn't know about CSS custom properties
           '--sticky-pane-height': stickyPaneHeight
         }}

src/Pagination/Pagination.tsx

@@ -201,7 +201,6 @@ function defaultHrefBuilder(pageNum: number) {
   return `#${pageNum}`
 }
 
-// eslint-disable-next-line @typescript-eslint/no-empty-function
 function noop() {}
 
 Pagination.defaultProps = {