TreeView: add trailing actions [WIP]

packages/react/src/TreeView/TreeView.examples.stories.tsx

@@ -1,9 +1,10 @@
-import {GrabberIcon} from '@primer/octicons-react'
+import {GearIcon, GrabberIcon} from '@primer/octicons-react'
 import type {Meta, StoryFn} from '@storybook/react'
 import React from 'react'
 import Box from '../Box'
 import {TreeView} from './TreeView'
 import {IconButton} from '../Button'
+import {Dialog} from '../Dialog/Dialog'
 
 const meta: Meta = {
   title: 'Components/TreeView/Examples',
@@ -73,4 +74,91 @@
   )
 }
 
+export const TrailingActions: StoryFn = () => {
+  return (
+    <Box>
+      <h2>Trailing Actions: Example with direct focus</h2>
+      <p>Press (Command + Shift + U) to focus the trailing action button</p>
+      <TreeView aria-label="Issues">
+        <TreeView.Item id="item-1">Item 1</TreeView.Item>
+        <TrailingAction id="item-2">
+          Item 2
+          <TreeView.SubTree>
+            <TreeView.Item id="item-2-sub-task-1">sub task 1</TreeView.Item>
+            <TreeView.Item id="item-2-sub-task-2">sub task 2</TreeView.Item>
+          </TreeView.SubTree>
+        </TrailingAction>
+        <TreeView.Item id="item-3">Item 3</TreeView.Item>
+      </TreeView>
+
+      <h2>Trailing Actions: Example with dialog</h2>
+      <p> Press (Command + Shift + U) to interact with the trailing action</p>
+      <TreeView aria-label="Issues">
+        <TreeView.Item id="item-1">Item 1</TreeView.Item>
+        <TrailingAction id="item-2" dialogOnOpen={true}>
+          Item 2
+          <TreeView.SubTree>
+            <TreeView.Item id="item-2-sub-task-1">sub task 1</TreeView.Item>
+            <TreeView.Item id="item-2-sub-task-2">sub task 2</TreeView.Item>
+          </TreeView.SubTree>
+        </TrailingAction>
+        <TreeView.Item id="item-3">Item 3</TreeView.Item>
+      </TreeView>
+    </Box>
+  )
+}
+
+const TrailingAction: React.FC<{id: string; children: React.ReactNode; dialogOnOpen?: boolean}> = ({
+  id,
+  dialogOnOpen,
+  children,
+}) => {
+  const [expanded, setExpanded] = React.useState(false)
+  const [dialogOpen, setDialogOpen] = React.useState(false)
+
+  const btnRef = React.useRef<HTMLButtonElement>(null)
+
+  const mockKeyboardShortcut = (event: React.KeyboardEvent) => {
+    if (!dialogOnOpen) btnRef.current?.focus()
+    if (dialogOnOpen) setDialogOpen(true)
+  }
+
+  return (
+    <>
+      <TreeView.Item
+        id={id}
+        className="treeview-item"
+        expanded={expanded}
+        onExpandedChange={setExpanded}
+        onKeyDown={mockKeyboardShortcut}
+      >
+        {children}
+        <TreeView.TrailingAction visible>
+          <IconButton
+            icon={GearIcon}
+            variant="invisible"
+            aria-label="Item settings"
+            className="treeview-leading-action"
+            draggable="true"
+            onDragStart={() => {
+              setExpanded(false)
+              // other drag logic to follow
+            }}
+            onClick={() => {
+              setDialogOpen(true)
+            }}
+            ref={btnRef}
+          />
+        </TreeView.TrailingAction>
+      </TreeView.Item>
+
+      {dialogOpen ? (
+        <Dialog title="My Dialog" onClose={() => setDialogOpen(false)}>
+          Dialog that opens when the trailing action is clicked.
+        </Dialog>
+      ) : null}
+    </>
+  )
+}
+
 export default meta

packages/react/src/TreeView/TreeView.module.css

@@ -47,7 +47,7 @@
     cursor: pointer;
     border-radius: var(--borderRadius-medium);
     grid-template-columns: var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr;
-    grid-template-areas: 'spacer leadingAction toggle content';
+    grid-template-areas: 'spacer leadingAction toggle content trailingAction';
 
     --leading-action-width: calc(var(--has-leading-action, 0) * 1.5rem);
     --spacer-width: calc(calc(var(--level) - 1) * (var(--toggle-width) / 2));
@@ -180,6 +180,16 @@
     }
   }
 
+  .TreeViewItemTrailingAction {
+    display: flex;
+    color: var(--fgColor-muted);
+    grid-area: trailingAction;
+
+    &>button {
+      flex-shrink: 1;
+    }
+  }
+
   .TreeViewItemLevelLine {
     width: 100%;
     height: 100%;

packages/react/src/TreeView/TreeView.tsx

@@ -162,6 +162,7 @@
   expanded?: boolean | null
   onExpandedChange?: (expanded: boolean) => void
   onSelect?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void
+  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void
   className?: string
 }
 
@@ -179,13 +180,15 @@
       className,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledby,
+      onKeyDown,
     },
     ref,
   ) => {
     const [slots, rest] = useSlots(children, {
       leadingAction: LeadingAction,
       leadingVisual: LeadingVisual,
       trailingVisual: TrailingVisual,
+      trailingAction: TrailingAction,
     })
     const {expandedStateCache} = React.useContext(RootContext)
     const labelId = useId()
@@ -251,9 +254,14 @@
             event.stopPropagation()
             setIsExpandedWithCache(false)
             break
+          case 'u':
+            if (!event.metaKey || !event.shiftKey || !onKeyDown) return
+            // If the user presses `Shift + Meta + U`
+            onKeyDown(event)
+            break
         }
       },
       [onSelect, setIsExpandedWithCache, toggle],
     )
 
     const ariaDescribedByIds = [
@@ -364,6 +372,7 @@
               </span>
               {slots.trailingVisual}
             </div>
+            {slots.trailingAction}
           </div>
           {subTree}
         </li>
@@ -671,6 +680,42 @@
 
 LeadingAction.displayName = 'TreeView.LeadingAction'
 // ----------------------------------------------------------------------------
+// TreeView.TrailingAction
+
+export type TreeViewTrailingAction = {
+  children: React.ReactNode | ((props: {isExpanded: boolean}) => React.ReactNode)
+  // Provide an accessible name for the visual. This should provide information
+  // about what the visual indicates or represents
+  label?: string
+  visible?: boolean
+}
+
+const TrailingAction: React.FC<TreeViewTrailingAction> = props => {
+  const {isExpanded} = React.useContext(ItemContext)
+  const children = typeof props.children === 'function' ? props.children({isExpanded}) : props.children
+  return (
+    <>
+      <div className={clsx('PRIVATE_VisuallyHidden', classes.TreeViewVisuallyHidden)} aria-hidden={true}>
+        {props.label}
+      </div>
+      <div
+        className={clsx('PRIVATE_TreeView-item-trailing-action', classes.TreeViewItemTrailingAction)}
+        aria-hidden={true}
+        onClick={event =>
+          // Prevent focus event from bubbling up to parent items
+          // This is needed to prevent the TreeView from interfering with trailing actions
+          event.stopPropagation()
+        }
+        onKeyDown={event => event.stopPropagation()}
+      >
+        {children}
+      </div>
+    </>
+  )
+}
+
+TrailingAction.displayName = 'TreeView.TrailingAction'
+// ----------------------------------------------------------------------------
 // TreeView.DirectoryIcon
 
 const DirectoryIcon = () => {
@@ -740,6 +785,7 @@
   Item,
   SubTree,
   LeadingAction,
+  TrailingAction,
   LeadingVisual,
   TrailingVisual,
   DirectoryIcon,