diff --git a/packages/react-core/src/components/TreeView/TreeView.tsx b/packages/react-core/src/components/TreeView/TreeView.tsx index 3eb2b8d02f9..4106791e807 100644 --- a/packages/react-core/src/components/TreeView/TreeView.tsx +++ b/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 = ({ @@ -141,6 +145,8 @@ export const TreeView: React.FunctionComponent = ({ '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 = ({ isMultiSelectable={isMultiSelectable} aria-label={ariaLabel} aria-labelledby={ariaLabelledby} - {...props} + id={rootListId} + inert={inert} > {data.map((item) => ( { * 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 = ({ diff --git a/packages/react-core/src/components/TreeView/__tests__/TreeView.test.tsx b/packages/react-core/src/components/TreeView/__tests__/TreeView.test.tsx index 766ba8b3d94..ccd4303fac0 100644 --- a/packages/react-core/src/components/TreeView/__tests__/TreeView.test.tsx +++ b/packages/react-core/src/components/TreeView/__tests__/TreeView.test.tsx @@ -10,7 +10,8 @@ jest.mock('../TreeViewList', () => ({ toolbar, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, - isMultiSelectable + isMultiSelectable, + id }) => (

{`TreeViewList isNested: ${isNested}`}

@@ -18,6 +19,7 @@ jest.mock('../TreeViewList', () => ({

{`TreeViewList aria-label: ${ariaLabel}`}

{`TreeViewList aria-labelledBy: ${ariaLabelledBy}`}

{`TreeViewList isMultiSelectable: ${isMultiSelectable}`}

+

{`TreeViewList id: ${id}`}

{children}
) @@ -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(); + + expect(screen.getByText('TreeViewList id: test-root-list-id')).toBeVisible(); +}); test('Passes data action to TreeViewListItem', () => { render(); diff --git a/packages/react-core/src/components/TreeView/__tests__/TreeViewList.test.tsx b/packages/react-core/src/components/TreeView/__tests__/TreeViewList.test.tsx index 60cfd640a42..a510cbfd5df 100644 --- a/packages/react-core/src/components/TreeView/__tests__/TreeViewList.test.tsx +++ b/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(Content); expect(screen.getByRole('tree')).toHaveAttribute('id', 'test-id'); diff --git a/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap b/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap index 6f0bf3de7c5..8761fe6d782 100644 --- a/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap +++ b/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap @@ -41,6 +41,9 @@ exports[`Matches snapshot 1`] = `

TreeViewList isMultiSelectable: false

+

+ TreeViewList id: undefined +