@patternfly/react-core 4.244.2 → 4.246.0

package/src/components/OverflowMenu/examples/OverflowMenu.md

@@ -2,7 +2,15 @@
 id: Overflow menu
 section: components
 cssPrefix: pf-c-overflow-menu
-propComponents: ['OverflowMenu', 'OverflowMenuContent', 'OverflowMenuControl', 'OverflowMenuDropdownItem', 'OverflowMenuGroup', 'OverflowMenuItem']
+propComponents:
+  [
+    'OverflowMenu',
+    'OverflowMenuContent',
+    'OverflowMenuControl',
+    'OverflowMenuDropdownItem',
+    'OverflowMenuGroup',
+    'OverflowMenuItem',
+  ]
 ---
 
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
@@ -10,10 +18,19 @@ import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
 
 ## Examples
+
 ### Simple (responsive)
+
 ```js
 import React from 'react';
-import { OverflowMenu, OverflowMenuControl, OverflowMenuContent, OverflowMenuGroup, OverflowMenuItem, OverflowMenuDropdownItem } from '@patternfly/react-core';
+import {
+  OverflowMenu,
+  OverflowMenuControl,
+  OverflowMenuContent,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  OverflowMenuDropdownItem
+} from '@patternfly/react-core';
 import { Dropdown, KebabToggle } from '@patternfly/react-core';
 
 class SimpleOverflowMenu extends React.Component {
@@ -37,12 +54,22 @@ class SimpleOverflowMenu extends React.Component {
   render() {
     const { isOpen } = this.state;
     const dropdownItems = [
-      <OverflowMenuDropdownItem key="item1" isShared>Item 1</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item2" isShared>Item 2</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item3" isShared>Item 3</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item4" isShared>Item 4</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item5" isShared>Item 5</OverflowMenuDropdownItem>
-    ]
+      <OverflowMenuDropdownItem key="item1" isShared>
+        Item 1
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="item2" isShared>
+        Item 2
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="item3" isShared>
+        Item 3
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="item4" isShared>
+        Item 4
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="item5" isShared>
+        Item 5
+      </OverflowMenuDropdownItem>
+    ];
     return (
       <OverflowMenu breakpoint="lg">
         <OverflowMenuContent>
@@ -66,15 +93,23 @@ class SimpleOverflowMenu extends React.Component {
           />
         </OverflowMenuControl>
       </OverflowMenu>
-    )
+    );
   }
 }
 ```
 
 ### Group types
+
 ```js
 import React from 'react';
-import { OverflowMenu, OverflowMenuControl, OverflowMenuContent, OverflowMenuGroup, OverflowMenuItem, OverflowMenuDropdownItem } from '@patternfly/react-core';
+import {
+  OverflowMenu,
+  OverflowMenuControl,
+  OverflowMenuContent,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  OverflowMenuDropdownItem
+} from '@patternfly/react-core';
 import { Dropdown, KebabToggle, Button, ButtonVariant } from '@patternfly/react-core';
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
@@ -101,15 +136,33 @@ class OverflowMenuGroupTypes extends React.Component {
   render() {
     const { isOpen } = this.state;
     const dropdownItems = [
-      <OverflowMenuDropdownItem key="item1" isShared>Item 1</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item2" isShared>Item 2</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="item3" isShared>Item 3</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="primary" isShared>Primary</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="secondary" isShared>Secondary</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="tertiary" isShared>Tertiary</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="action1" isShared>Action 1</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="action2" isShared>Action 2</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="action3" isShared>Action 3</OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="item1" isShared>
+        Item 1
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="item2" isShared>
+        Item 2
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="item3" isShared>
+        Item 3
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="primary" isShared>
+        Primary
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="secondary" isShared>
+        Secondary
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="tertiary" isShared>
+        Tertiary
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="action1" isShared>
+        Action 1
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="action2" isShared>
+        Action 2
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="action3" isShared>
+        Action 3
+      </OverflowMenuDropdownItem>
     ];
     return (
       <OverflowMenu breakpoint="lg">
@@ -160,16 +213,23 @@ class OverflowMenuGroupTypes extends React.Component {
           />
         </OverflowMenuControl>
       </OverflowMenu>
-    )
+    );
   }
 }
 ```
 
-
 ### Multiple groups
+
 ```js
 import React from 'react';
-import { OverflowMenu, OverflowMenuControl, OverflowMenuContent, OverflowMenuGroup, OverflowMenuItem, OverflowMenuDropdownItem } from '@patternfly/react-core';
+import {
+  OverflowMenu,
+  OverflowMenuControl,
+  OverflowMenuContent,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  OverflowMenuDropdownItem
+} from '@patternfly/react-core';
 import { Dropdown, KebabToggle, Button, ButtonVariant } from '@patternfly/react-core';
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
@@ -196,13 +256,25 @@ class OverflowMenuAdditionalOptions extends React.Component {
   render() {
     const { isOpen } = this.state;
     const dropdownItems = [
-      <OverflowMenuDropdownItem key="1" isShared>Primary</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="2" isShared>Secondary</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="3" isShared>Tertiary</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="4" isShared>Action 4</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="5" isShared>Action 5</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="6" isShared>Action 6</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="7">Action 7</OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="1" isShared>
+        Primary
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="2" isShared>
+        Secondary
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="3" isShared>
+        Tertiary
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="4" isShared>
+        Action 4
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="5" isShared>
+        Action 5
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="6" isShared>
+        Action 6
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="7">Action 7</OverflowMenuDropdownItem>
     ];
     return (
       <OverflowMenu breakpoint="lg">
@@ -248,16 +320,23 @@ class OverflowMenuAdditionalOptions extends React.Component {
           />
         </OverflowMenuControl>
       </OverflowMenu>
-    )
+    );
   }
 }
 ```
 
-
 ### Persistent
+
 ```js
 import React from 'react';
-import { OverflowMenu, OverflowMenuControl, OverflowMenuContent, OverflowMenuGroup, OverflowMenuItem, OverflowMenuDropdownItem } from '@patternfly/react-core';
+import {
+  OverflowMenu,
+  OverflowMenuControl,
+  OverflowMenuContent,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  OverflowMenuDropdownItem
+} from '@patternfly/react-core';
 import { Dropdown, KebabToggle, Button, ButtonVariant } from '@patternfly/react-core';
 
 class OverflowMenuPersist extends React.Component {
@@ -281,8 +360,12 @@ class OverflowMenuPersist extends React.Component {
   render() {
     const { isOpen } = this.state;
     const dropdownItems = [
-      <OverflowMenuDropdownItem key="secondary" isShared>Secondary</OverflowMenuDropdownItem>,
-      <OverflowMenuDropdownItem key="tertiary" isShared>Tertiary</OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="secondary" isShared>
+        Secondary
+      </OverflowMenuDropdownItem>,
+      <OverflowMenuDropdownItem key="tertiary" isShared>
+        Tertiary
+      </OverflowMenuDropdownItem>,
       <OverflowMenuDropdownItem key="action">Action 4</OverflowMenuDropdownItem>
     ];
     return (
@@ -312,7 +395,16 @@ class OverflowMenuPersist extends React.Component {
           />
         </OverflowMenuControl>
       </OverflowMenu>
-    )
+    );
   }
 }
 ```
+
+### Breakpoint on container
+
+By passing in the `breakpointReference` property, the overflow menu's breakpoint will be relative to the width of the reference container rather than the viewport width.
+
+You can change the container width in this example by adjusting the slider. As the container width changes, the overflow menu will change between a horizontal menu and a vertical dropdown despite the viewport width not changing.
+
+```ts file="./OverflowMenuBreakpointOnContainer.tsx"
+```

package/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import {
+  OverflowMenu,
+  OverflowMenuControl,
+  OverflowMenuContent,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  OverflowMenuDropdownItem,
+  Dropdown,
+  KebabToggle,
+  Slider
+} from '@patternfly/react-core';
+
+export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [containerWidth, setContainerWidth] = React.useState(100);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  const onSelect = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onChange = (value: number) => {
+    setContainerWidth(value);
+  };
+
+  const containerStyles = {
+    width: `${containerWidth}%`,
+    padding: '1rem',
+    borderWidth: '2px',
+    borderStyle: 'dashed'
+  };
+
+  const dropdownItems = [
+    <OverflowMenuDropdownItem key="item1" isShared>
+      Item 1
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem key="item2" isShared>
+      Item 2
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem key="item3" isShared>
+      Item 3
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem key="item4" isShared>
+      Item 4
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem key="item5" isShared>
+      Item 5
+    </OverflowMenuDropdownItem>
+  ];
+
+  return (
+    <>
+      <div style={{ width: '100%', maxWidth: '400px' }}>
+        <div>
+          <span id="overflowMenu-hasBreakpointOnContainer-slider-label">Current container width</span>: {containerWidth}
+          %
+        </div>
+        <Slider
+          value={containerWidth}
+          onChange={onChange}
+          max={100}
+          min={20}
+          step={20}
+          showTicks
+          showBoundaries={false}
+          aria-labelledby="overflowMenu-hasBreakpointOnContainer-slider-label"
+        />
+      </div>
+      <div ref={containerRef} id="breakpoint-reference-container" style={containerStyles}>
+        <OverflowMenu breakpointReference={containerRef} breakpoint="sm">
+          <OverflowMenuContent>
+            <OverflowMenuItem>Item 1</OverflowMenuItem>
+            <OverflowMenuItem>Item 2</OverflowMenuItem>
+            <OverflowMenuGroup>
+              <OverflowMenuItem>Item 3</OverflowMenuItem>
+              <OverflowMenuItem>Item 4</OverflowMenuItem>
+              <OverflowMenuItem>Item 5</OverflowMenuItem>
+            </OverflowMenuGroup>
+          </OverflowMenuContent>
+          <OverflowMenuControl>
+            <Dropdown
+              onSelect={onSelect}
+              toggle={<KebabToggle onToggle={onToggle} />}
+              isOpen={isOpen}
+              isPlain
+              dropdownItems={dropdownItems}
+              isFlipEnabled
+              menuAppendTo="parent"
+            />
+          </OverflowMenuControl>
+        </OverflowMenu>
+      </div>
+    </>
+  );
+};

package/src/components/Pagination/Pagination.tsx

@@ -159,6 +159,10 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAPr
   variant?: 'top' | 'bottom' | PaginationVariant;
   /** Id to ideintify widget on page. */
   widgetId?: string;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 const handleInputWidth = (lastPage: number, node: HTMLDivElement) => {

package/src/components/Radio/Radio.tsx

@@ -35,6 +35,10 @@ export interface RadioProps
   description?: React.ReactNode;
   /** Body of the radio. */
   body?: React.ReactNode;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export class Radio extends React.Component<RadioProps, { ouiaStateId: string }> {

package/src/components/Select/Select.tsx

@@ -184,6 +184,10 @@ export interface SelectProps
   isFlipEnabled?: boolean;
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
   removeFindDomNode?: boolean;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export interface SelectState {

package/src/components/Switch/Switch.tsx

@@ -34,6 +34,10 @@ export interface SwitchProps
   'aria-label'?: string;
   /** Flag to reverse the layout of toggle and label (toggle on right). */
   isReversed?: boolean;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaStateId: string }> {

package/src/components/Tabs/Tab.tsx

@@ -39,6 +39,8 @@ export interface TabProps extends Omit<React.HTMLProps<HTMLAnchorElement | HTMLB
   closeButtonAriaLabel?: string;
   /** @beta Flag indicating the close button should be disabled */
   isCloseDisabled?: boolean;
+  /** Value to set the data-ouia-component-id for the tab button.*/
+  ouiaId?: number | string;
 }
 
 const TabBase: React.FunctionComponent<TabProps> = ({

package/src/components/Tabs/TabContent.tsx

@@ -21,6 +21,10 @@ export interface TabContentProps extends Omit<React.HTMLProps<HTMLElement>, 'ref
   id: string;
   /** title of controlling Tab if used outside Tabs component */
   'aria-label'?: string;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 const variantStyle = {

package/src/components/Tabs/Tabs.tsx

@@ -106,6 +106,10 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   onToggle?: (isExpanded: boolean) => void;
   /** @beta Flag which places overflowing tabs into a menu triggered by the last tab. Additionally an object can be passed with custom settings for the overflow tab. */
   isOverflowHorizontal?: boolean | HorizontalOverflowObject;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 const variantStyle = {

package/src/components/Text/Text.tsx

@@ -26,6 +26,10 @@ export interface TextProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   className?: string;
   /** Flag to indicate the link has visited styles applied if the browser determines the link has been visited */
   isVisitedLink?: boolean;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export const Text: React.FunctionComponent<TextProps> = ({

package/src/components/TextInput/TextInput.tsx

@@ -77,6 +77,10 @@ export interface TextInputProps
   customIconUrl?: string;
   /** Dimensions for the custom icon set as the text input's background-size */
   customIconDimensions?: string;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 interface TextInputState {

package/src/components/Title/Title.tsx

@@ -32,6 +32,10 @@ export interface TitleProps extends Omit<React.HTMLProps<HTMLHeadingElement>, 's
   className?: string;
   /** The heading level to use */
   headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export const Title: React.FunctionComponent<TitleProps> = ({

package/src/components/Toolbar/Toolbar.tsx

@@ -46,6 +46,10 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   };
   /** Text to display in the total number of applied filters ToolbarFilter */
   numberOfFiltersText?: (numberOfFilters: number) => string;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export interface ToolbarState {

package/src/components/TreeView/TreeView.tsx

@@ -168,7 +168,14 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
       {parentItem ? (
         treeViewList
       ) : (
-        <TreeViewRoot hasChecks={hasChecks} hasGuides={hasGuides} variant={variant} className={className} {...props}>
+        <TreeViewRoot
+          hasSelectableNodes={hasSelectableNodes}
+          hasChecks={hasChecks}
+          hasGuides={hasGuides}
+          variant={variant}
+          className={className}
+          {...props}
+        >
           {treeViewList}
         </TreeViewRoot>
       )}

package/src/components/TreeView/TreeViewListItem.tsx

@@ -155,8 +155,10 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
     const content = (
       <>
         {isCompact && title && <span className={css(styles.treeViewNodeTitle)}>{title}</span>}
-        {hasCheck ? (
-          <span className={css(styles.treeViewNodeText)}>{name}</span>
+        {isSelectable ? (
+          <button tabIndex={-1} className={css(styles.treeViewNodeText)}>
+            {name}
+          </button>
         ) : (
           <span className={css(styles.treeViewNodeText)}>{name}</span>
         )}
@@ -210,7 +212,6 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
                   }
                 }
               }}
-              tabIndex={isSelectable ? 0 : -1}
               {...(hasCheck && { htmlFor: randomId })}
               {...((hasCheck || (isSelectable && children)) && { id: `label-${randomId}` })}
             >

package/src/components/TreeView/TreeViewRoot.tsx

@@ -3,18 +3,21 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/TreeView/tree-view';
 import { canUseDOM } from '../../helpers/util';
 import { handleArrows } from '../../helpers';
+import { KeyTypes } from '../../helpers/constants';
 
 export interface TreeViewRootProps {
-  /** Child nodes of the tree view. */
+  /** Child nodes of the tree view */
   children: React.ReactNode;
-  /** Class to add to add if not passed a parentItem property. */
-  className?: string;
   /** Flag indicating if the tree view has checkboxes. */
   hasChecks?: boolean;
   /** Flag indicating if tree view has guide lines. */
   hasGuides?: boolean;
   /** Variant presentation styles for the tree view. */
   variant?: 'default' | 'compact' | 'compactNoBackground';
+  /** Class to add to add if not passed a parentItem */
+  className?: string;
+  /** Flag indicating that tree nodes should be independently selectable, even when having children */
+  hasSelectableNodes?: boolean;
 }
 
 export class TreeViewRoot extends React.Component<TreeViewRootProps> {
@@ -23,16 +26,29 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
 
   componentDidMount() {
     if (canUseDOM) {
-      window.addEventListener('keydown', this.props.hasChecks ? this.handleKeysCheckbox : this.handleKeys);
+      window.addEventListener(
+        'keydown',
+        this.props.hasChecks || this.props.hasSelectableNodes ? this.handleKeysCheckbox : this.handleKeys
+      );
     }
-    if (this.props.hasChecks) {
-      const firstToggle = this.treeRef.current?.getElementsByClassName('pf-c-tree-view__node-toggle')[0] as HTMLElement;
+    if (this.props.hasChecks || this.props.hasSelectableNodes) {
+      const firstToggle = this.treeRef.current.getElementsByClassName('pf-c-tree-view__node-toggle')[0] as HTMLElement;
       if (firstToggle) {
         firstToggle.tabIndex = 0;
       }
-      const firstInput = this.treeRef.current?.getElementsByTagName('INPUT')[0] as HTMLElement;
-      if (firstInput) {
-        firstInput.tabIndex = 0;
+      if (this.props.hasChecks) {
+        const firstInput = this.treeRef.current.getElementsByTagName('INPUT')[0] as HTMLElement;
+        if (firstInput) {
+          firstInput.tabIndex = 0;
+        }
+      }
+      if (this.props.hasSelectableNodes) {
+        const firstTextButton = this.treeRef.current.getElementsByClassName(
+          'pf-c-tree-view__node-text'
+        )[0] as HTMLElement;
+        if (firstTextButton) {
+          firstTextButton.tabIndex = 0;
+        }
       }
     } else {
       (this.treeRef.current?.getElementsByClassName('pf-c-tree-view__node')[0] as HTMLElement).tabIndex = 0;
@@ -41,12 +57,15 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
 
   componentWillUnmount() {
     if (canUseDOM) {
-      window.removeEventListener('keydown', this.props.hasChecks ? this.handleKeysCheckbox : this.handleKeys);
+      window.removeEventListener(
+        'keydown',
+        this.props.hasChecks || this.props.hasSelectableNodes ? this.handleKeysCheckbox : this.handleKeys
+      );
     }
   }
 
   handleKeys = (event: KeyboardEvent) => {
-    if (this.treeRef.current !== (event.target as HTMLElement).closest('.pf-c-tree-view')) {
+    if (!this.treeRef.current.contains(event.target as HTMLElement)) {
       return;
     }
     const activeElement = document.activeElement;
@@ -55,8 +74,8 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
       el => !el.classList.contains('pf-m-disabled')
     );
 
-    if (key === 'Space') {
-      (document.activeElement as HTMLElement).click();
+    if (key === KeyTypes.Space) {
+      (activeElement as HTMLElement).click();
       event.preventDefault();
     }
 
@@ -109,14 +128,15 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
   };
 
   handleKeysCheckbox = (event: KeyboardEvent) => {
-    if (this.treeRef.current !== (event.target as HTMLElement).closest('.pf-c-tree-view')) {
+    if (!this.treeRef.current.contains(event.target as HTMLElement)) {
       return;
     }
+
     const activeElement = document.activeElement;
     const key = event.key;
 
-    if (key === 'Space') {
-      (document.activeElement as HTMLElement).click();
+    if (key === KeyTypes.Space) {
+      (activeElement as HTMLElement).click();
       event.preventDefault();
     }
 
@@ -126,7 +146,7 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
       event,
       treeNodes as HTMLElement[],
       (element: Element) => element.contains(activeElement),
-      (element: Element) => element.querySelector('BUTTON,INPUT'),
+      (element: Element) => element.querySelector('button,input'),
       [],
       undefined,
       true,
@@ -168,7 +188,7 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
 
   render() {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { children, hasChecks, hasGuides, variant, className, ...props } = this.props;
+    const { children, hasChecks, hasGuides, variant, className, hasSelectableNodes, ...props } = this.props;
     return (
       <div
         className={css(