fix(TreeView): pass id,inert to TreeViewList

Author: kmcfaul

packages/react-core/src/components/TreeView/TreeView.tsx

@@ -84,6 +84,8 @@ export interface TreeViewProps {
   icon?: React.ReactNode;
   /** ID of the tree view. */
   id?: string;
+  /** ID of the root tree view list. */
+  rootListId?: string;
   /** Flag indicating whether multiple nodes can be selected in the tree view. This will also set the
    * aria-multiselectable attribute on the tree view list which is required to be true when multiple selection is intended.
    * Can only be applied to the root tree view list.
@@ -113,6 +115,8 @@ export interface TreeViewProps {
    * the next breaking change release in favor of defaulting to always-rendered items.
    */
   hasAnimations?: boolean;
+  /** @hide Flag indicating whether the tree view list should be inert. */
+  inert?: boolean;
 }
 
 export const TreeView: React.FunctionComponent<TreeViewProps> = ({
@@ -141,6 +145,8 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledby,
   hasAnimations: hasAnimationsProp,
+  rootListId,
+  inert,
   ...props
 }: TreeViewProps) => {
   const hasAnimations = useHasAnimations(hasAnimationsProp);
@@ -151,7 +157,8 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
       isMultiSelectable={isMultiSelectable}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledby}
-      {...props}
+      id={rootListId}
+      inert={inert}
     >
       {data.map((item) => (
         <TreeViewListItem

packages/react-core/src/components/TreeView/TreeViewList.tsx

@@ -23,6 +23,8 @@ export interface TreeViewListProps extends React.HTMLProps<HTMLUListElement> {
    * this or the aria-label property must be passed in.
    */
   'aria-labelledby'?: string;
+  /** @hide Flag indicating whether the tree view list should be inert. */
+  inert?: boolean;
 }
 
 export const TreeViewList: React.FunctionComponent<TreeViewListProps> = ({

packages/react-core/src/components/TreeView/__tests__/TreeView.test.tsx

@@ -10,14 +10,16 @@ jest.mock('../TreeViewList', () => ({
     toolbar,
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
-    isMultiSelectable
+    isMultiSelectable,
+    id
   }) => (
     <div data-testid="TreeViewList-mock">
       <p>{`TreeViewList isNested: ${isNested}`}</p>
       <p>{`TreeViewList toolbar: ${toolbar}`}</p>
       <p>{`TreeViewList aria-label: ${ariaLabel}`}</p>
       <p>{`TreeViewList aria-labelledBy: ${ariaLabelledBy}`}</p>
       <p>{`TreeViewList isMultiSelectable: ${isMultiSelectable}`}</p>
+      <p>{`TreeViewList id: ${id}`}</p>
       <div data-testid="TreeViewList-children">{children}</div>
     </div>
   )
@@ -164,6 +166,11 @@ test('Passes data as children TreeViewList', () => {
 
   expect(screen.getByTestId('TreeViewList-children')).toContainHTML('TreeViewListItem name: Basic data name');
 });
+test('Passes rootListId to TreeViewList', () => {
+  render(<TreeView rootListId="test-root-list-id" data={[basicData]} />);
+
+  expect(screen.getByText('TreeViewList id: test-root-list-id')).toBeVisible();
+});
 
 test('Passes data action to TreeViewListItem', () => {
   render(<TreeView data={[{ ...basicData, action: 'Item action' }]} />);

packages/react-core/src/components/TreeView/__tests__/TreeViewList.test.tsx

@@ -22,7 +22,7 @@ test(`Renders with role="group" when isNested is true`, () => {
   expect(screen.getByRole('group')).toHaveTextContent('Content');
 });
 
-test(`Spreads additional props`, () => {
+test('Renders with id when id is passed', () => {
   render(<TreeViewList id="test-id">Content</TreeViewList>);
 
   expect(screen.getByRole('tree')).toHaveAttribute('id', 'test-id');

packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap

@@ -41,6 +41,9 @@ exports[`Matches snapshot 1`] = `
         <p>
           TreeViewList isMultiSelectable: false
         </p>
+        <p>
+          TreeViewList id: undefined
+        </p>
         <div
           data-testid="TreeViewList-children"
         >