@patternfly/react-core 4.227.9 → 4.229.0

package/dist/umd/react-core.js

@@ -10472,14 +10472,17 @@
         return Object.keys(mods || {}).reduce((acc, curr) => curr === 'default' ? Object.assign(Object.assign({}, acc), { [prefix]: mods[curr] }) : Object.assign(Object.assign({}, acc), { [`${prefix}-on-${curr}`]: mods[curr] }), {});
     };
     const DescriptionList = (_a) => {
-        var { className = '', children = null, isHorizontal = false, isAutoColumnWidths, isAutoFit, isInlineGrid, isCompact, isFluid, isFillColumns, columnModifier, autoFitMinModifier, horizontalTermWidthModifier, orientation, style } = _a, props = __rest$1(_a, ["className", "children", "isHorizontal", "isAutoColumnWidths", "isAutoFit", "isInlineGrid", "isCompact", "isFluid", "isFillColumns", "columnModifier", "autoFitMinModifier", "horizontalTermWidthModifier", "orientation", "style"]);
+        var { className = '', children = null, isHorizontal = false, isAutoColumnWidths, isAutoFit, isInlineGrid, isCompact, isFluid, isFillColumns, displaySize, columnModifier, autoFitMinModifier, termWidth, horizontalTermWidthModifier, orientation, style } = _a, props = __rest$1(_a, ["className", "children", "isHorizontal", "isAutoColumnWidths", "isAutoFit", "isInlineGrid", "isCompact", "isFluid", "isFillColumns", "displaySize", "columnModifier", "autoFitMinModifier", "termWidth", "horizontalTermWidthModifier", "orientation", "style"]);
         if (isAutoFit && autoFitMinModifier) {
             style = Object.assign(Object.assign({}, style), setBreakpointModifiers('--pf-c-description-list--GridTemplateColumns--min', autoFitMinModifier));
         }
+        if (termWidth) {
+            style = Object.assign(Object.assign({}, style), { '--pf-c-description-list__term--width': termWidth });
+        }
         if (isHorizontal && horizontalTermWidthModifier) {
             style = Object.assign(Object.assign({}, style), setBreakpointModifiers('--pf-c-description-list--m-horizontal__term--width', horizontalTermWidthModifier));
         }
-        return (React__namespace.createElement("dl", Object.assign({ className: css(styles$M.descriptionList, (isHorizontal || isFluid) && styles$M.modifiers.horizontal, isAutoColumnWidths && styles$M.modifiers.autoColumnWidths, isAutoFit && styles$M.modifiers.autoFit, formatBreakpointMods(columnModifier, styles$M), formatBreakpointMods(orientation, styles$M), isInlineGrid && styles$M.modifiers.inlineGrid, isCompact && styles$M.modifiers.compact, isFluid && styles$M.modifiers.fluid, isFillColumns && styles$M.modifiers.fillColumns, className), style: style }, props), children));
+        return (React__namespace.createElement("dl", Object.assign({ className: css(styles$M.descriptionList, (isHorizontal || isFluid) && styles$M.modifiers.horizontal, isAutoColumnWidths && styles$M.modifiers.autoColumnWidths, isAutoFit && styles$M.modifiers.autoFit, formatBreakpointMods(columnModifier, styles$M), formatBreakpointMods(orientation, styles$M), isInlineGrid && styles$M.modifiers.inlineGrid, isCompact && styles$M.modifiers.compact, isFluid && styles$M.modifiers.fluid, isFillColumns && styles$M.modifiers.fillColumns, displaySize === 'lg' && styles$M.modifiers.displayLg, displaySize === '2xl' && styles$M.modifiers.display_2xl, className), style: style }, props), children));
     };
     DescriptionList.displayName = 'DescriptionList';
 
@@ -15755,7 +15758,8 @@
         const handleFlyout = (event) => {
             const key = event.key;
             const target = event.target;
-            if (key === ' ' || key === 'Enter' || key === 'ArrowRight') {
+            const type = event.type;
+            if (key === ' ' || key === 'Enter' || key === 'ArrowRight' || type === 'click') {
                 event.stopPropagation();
                 if (!flyoutVisible) {
                     showFlyout(true);
@@ -15806,7 +15810,7 @@
             additionalProps['aria-expanded'] = true;
         }
         else if (hasFlyout) {
-            additionalProps['aria-haspopup'] = true;
+            additionalProps['aria-haspopup'] = 'menu';
             additionalProps['aria-expanded'] = flyoutVisible;
         }
         const getAriaCurrent = () => {
@@ -15844,10 +15848,11 @@
             }
         };
         return (React__namespace.createElement("li", Object.assign({ className: css(menuStyles.menuListItem, isDisabled && menuStyles.modifiers.disabled, _isOnPath && menuStyles.modifiers.currentPath, isLoadButton && menuStyles.modifiers.load, isLoading && menuStyles.modifiers.loading, isFocused && menuStyles.modifiers.focus, className), onMouseOver: onMouseOver }, (flyoutMenu && { onKeyDown: handleFlyout }), { ref: ref, role: !hasCheck ? 'none' : 'menuitem' }, props),
-            React__namespace.createElement(GenerateId, null, randomId => (React__namespace.createElement(Component, Object.assign({ tabIndex: -1, className: css(menuStyles.menuItem, getIsSelected() && !hasCheck && menuStyles.modifiers.selected, className), "aria-current": getAriaCurrent() }, (!hasCheck && { disabled: isDisabled }), (!hasCheck && { role: 'menuitem' }), { ref: innerRef }, (!hasCheck && {
+            React__namespace.createElement(GenerateId, null, randomId => (React__namespace.createElement(Component, Object.assign({ tabIndex: -1, className: css(menuStyles.menuItem, getIsSelected() && !hasCheck && menuStyles.modifiers.selected, className), "aria-current": getAriaCurrent() }, (!hasCheck && { disabled: isDisabled }), (!hasCheck && !flyoutMenu && { role: 'menuitem' }), { ref: innerRef }, (!hasCheck && {
                 onClick: (event) => {
                     onItemSelect(event, onSelect);
                     _drill && _drill();
+                    flyoutMenu && handleFlyout(event);
                 }
             }), (hasCheck && { htmlFor: randomId }), additionalProps),
                 React__namespace.createElement("span", { className: css(menuStyles.menuItemMain) },
@@ -16884,9 +16889,13 @@
         const flyoutButton = (React__namespace.createElement("span", { className: css(styles$u.navToggle) },
             React__namespace.createElement("span", { className: css(styles$u.navToggleIcon) },
                 React__namespace.createElement(AngleRightIcon$1, { "aria-hidden": true }))));
+        const ariaFlyoutProps = {
+            'aria-haspopup': 'menu',
+            'aria-expanded': flyoutVisible
+        };
         const renderDefaultLink = (context) => {
             const preventLinkDefault = preventDefault || !to;
-            return (React__namespace.createElement(Component, Object.assign({ href: to, onClick: (e) => context.onSelect(e, groupId, itemId, to, preventLinkDefault, onClick), className: css(styles$u.navLink, isActive && styles$u.modifiers.current, isHovered && styles$u.modifiers.hover, className), "aria-current": isActive ? 'page' : null, tabIndex: isNavOpen ? null : '-1' }, props),
+            return (React__namespace.createElement(Component, Object.assign({ href: to, onClick: (e) => context.onSelect(e, groupId, itemId, to, preventLinkDefault, onClick), className: css(styles$u.navLink, isActive && styles$u.modifiers.current, isHovered && styles$u.modifiers.hover, className), "aria-current": isActive ? 'page' : null, tabIndex: isNavOpen ? null : '-1' }, (hasFlyout && Object.assign({}, ariaFlyoutProps)), props),
                 children,
                 flyout && flyoutButton));
         };
@@ -19216,6 +19225,77 @@
     };
     const TabContent = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(TabContentBase, Object.assign({}, props, { innerRef: ref }))));
 
+    const TabTitleText = (_a) => {
+        var { children, className = '' } = _a, props = __rest$1(_a, ["children", "className"]);
+        return (React__namespace.createElement("span", Object.assign({ className: css(styles$f.tabsItemText, className) }, props), children));
+    };
+    TabTitleText.displayName = 'TabTitleText';
+
+    const OverflowTab = (_a) => {
+        var { className, overflowingTabs = [], showTabCount, defaultTitleText = 'More', toggleAriaLabel } = _a, props = __rest$1(_a, ["className", "overflowingTabs", "showTabCount", "defaultTitleText", "toggleAriaLabel"]);
+        const menuRef = React__default["default"].useRef();
+        const overflowTabRef = React__default["default"].useRef();
+        const overflowLIRef = React__default["default"].useRef();
+        const [isExpanded, setIsExpanded] = React__default["default"].useState(false);
+        const { localActiveKey, handleTabClick } = React__default["default"].useContext(TabsContext);
+        const closeMenu = () => {
+            setIsExpanded(false);
+            overflowTabRef.current.focus();
+        };
+        const handleMenuKeys = (ev) => {
+            var _a;
+            const menuContainsEventTarget = (_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) === null || _a === void 0 ? void 0 : _a.contains(ev.target);
+            if (isExpanded && menuContainsEventTarget && ev.key === 'Escape') {
+                closeMenu();
+            }
+        };
+        const handleClick = (ev) => {
+            var _a, _b;
+            const clickIsOutsideMenu = !((_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) === null || _a === void 0 ? void 0 : _a.contains(ev.target));
+            const clickIsOutsideOverflowTab = !((_b = overflowTabRef === null || overflowTabRef === void 0 ? void 0 : overflowTabRef.current) === null || _b === void 0 ? void 0 : _b.contains(ev.target));
+            if (isExpanded && clickIsOutsideMenu && clickIsOutsideOverflowTab) {
+                closeMenu();
+            }
+        };
+        React__default["default"].useEffect(() => {
+            window.addEventListener('click', handleClick);
+            window.addEventListener('keydown', handleMenuKeys);
+            return () => {
+                window.removeEventListener('click', handleClick);
+                window.removeEventListener('keydown', handleMenuKeys);
+            };
+        }, [isExpanded, menuRef, overflowTabRef]);
+        const selectedTab = overflowingTabs.find(tab => tab.eventKey === localActiveKey);
+        const tabTitle = (selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.title) ? selectedTab.title : defaultTitleText;
+        const toggleMenu = () => {
+            setIsExpanded(prevIsExpanded => !prevIsExpanded);
+            setTimeout(() => {
+                if (menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) {
+                    const firstElement = menuRef.current.querySelector('li > button,input:not(:disabled)');
+                    firstElement && firstElement.focus();
+                }
+            }, 0);
+        };
+        const overflowTab = (React__default["default"].createElement("li", Object.assign({ className: css(styles$f.tabsItem, 'pf-m-overflow', selectedTab && styles$f.modifiers.current, className), role: "presentation", ref: overflowLIRef }, props),
+            React__default["default"].createElement("button", { className: css(styles$f.tabsLink, isExpanded && styles$f.modifiers.expanded), onClick: () => toggleMenu(), "aria-label": toggleAriaLabel, "aria-haspopup": "menu", "aria-expanded": isExpanded, role: "tab", ref: overflowTabRef },
+                React__default["default"].createElement(TabTitleText, null,
+                    tabTitle,
+                    showTabCount && tabTitle === defaultTitleText && ` (${overflowingTabs.length})`),
+                React__default["default"].createElement("span", { className: styles$f.tabsLinkToggleIcon },
+                    React__default["default"].createElement(AngleRightIcon$1, null)))));
+        const tabs = overflowingTabs.map(tab => (React__default["default"].createElement(MenuItem, { key: tab.eventKey, itemId: tab.eventKey, isSelected: localActiveKey === tab.eventKey }, tab.title)));
+        const onTabSelect = (event, key) => {
+            closeMenu();
+            const selectedTabRef = overflowingTabs.find(tab => tab.eventKey === key).tabContentRef;
+            handleTabClick(event, key, selectedTabRef);
+        };
+        const overflowMenu = (React__default["default"].createElement(Menu, { ref: menuRef, onSelect: (ev, itemId) => onTabSelect(ev, itemId) },
+            React__default["default"].createElement(MenuContent, null,
+                React__default["default"].createElement(MenuList, null, tabs))));
+        return (React__default["default"].createElement(Popper, { trigger: overflowTab, popper: overflowMenu, isVisible: isExpanded, popperMatchesTriggerWidth: false, appendTo: overflowLIRef.current }));
+    };
+    OverflowTab.displayName = 'OverflowTab';
+
     exports.TabsComponent = void 0;
     (function (TabsComponent) {
         TabsComponent["div"] = "div";
@@ -19230,7 +19310,12 @@
             super(props);
             this.tabList = React__namespace.createRef();
             this.scrollTimeout = null;
+            this.countOverflowingElements = (container) => {
+                const elements = Array.from(container.children);
+                return elements.filter(element => !isElementInView(container, element, false)).length;
+            };
             this.handleScrollButtons = () => {
+                const { isOverflowHorizontal: isOverflowHorizontal } = this.props;
                 // add debounce to the scroll event
                 clearTimeout(this.scrollTimeout);
                 this.scrollTimeout = setTimeout(() => {
@@ -19238,7 +19323,8 @@
                     let disableLeftScrollButton = true;
                     let disableRightScrollButton = true;
                     let showScrollButtons = false;
-                    if (container && !this.props.isVertical) {
+                    let overflowingTabCount = 0;
+                    if (container && !this.props.isVertical && !isOverflowHorizontal) {
                         // get first element and check if it is in view
                         const overflowOnLeft = !isElementInView(container, container.firstChild, false);
                         // get last element and check if it is in view
@@ -19247,10 +19333,14 @@
                         disableLeftScrollButton = !overflowOnLeft;
                         disableRightScrollButton = !overflowOnRight;
                     }
+                    if (isOverflowHorizontal) {
+                        overflowingTabCount = this.countOverflowingElements(container);
+                    }
                     this.setState({
                         showScrollButtons,
                         disableLeftScrollButton,
-                        disableRightScrollButton
+                        disableRightScrollButton,
+                        overflowingTabCount
                     });
                 }, 100);
             };
@@ -19298,7 +19388,8 @@
                 shownKeys: this.props.defaultActiveKey !== undefined ? [this.props.defaultActiveKey] : [this.props.activeKey],
                 uncontrolledActiveKey: this.props.defaultActiveKey,
                 uncontrolledIsExpandedLocal: this.props.defaultIsExpanded,
-                ouiaStateId: getDefaultOUIAId(Tabs.displayName)
+                ouiaStateId: getDefaultOUIAId(Tabs.displayName),
+                overflowingTabCount: 0
             };
             if (this.props.isVertical && this.props.expandable !== undefined) {
                 if (!this.props.toggleAriaLabel && !this.props.toggleText) {
@@ -19354,8 +19445,8 @@
             clearTimeout(this.scrollTimeout);
         }
         componentDidUpdate(prevProps) {
-            const { activeKey, mountOnEnter, children } = this.props;
-            const { shownKeys } = this.state;
+            const { activeKey, mountOnEnter, isOverflowHorizontal, children } = this.props;
+            const { shownKeys, overflowingTabCount } = this.state;
             if (prevProps.activeKey !== activeKey && mountOnEnter && shownKeys.indexOf(activeKey) < 0) {
                 this.setState({
                     shownKeys: shownKeys.concat(activeKey)
@@ -19366,13 +19457,20 @@
                 React__namespace.Children.toArray(prevProps.children).length !== React__namespace.Children.toArray(children).length) {
                 this.handleScrollButtons();
             }
+            const currentOverflowingTabCount = this.countOverflowingElements(this.tabList.current);
+            if (isOverflowHorizontal && currentOverflowingTabCount) {
+                this.setState({ overflowingTabCount: currentOverflowingTabCount + overflowingTabCount });
+            }
         }
         render() {
-            const _a = this.props, { className, children, activeKey, defaultActiveKey, id, isFilled, isSecondary, isVertical, isBox, hasBorderBottom, hasSecondaryBorderBottom, leftScrollAriaLabel, rightScrollAriaLabel, 'aria-label': ariaLabel, component, ouiaId, ouiaSafe, mountOnEnter, unmountOnExit, usePageInsets, inset, variant, expandable, isExpanded, defaultIsExpanded, toggleText, toggleAriaLabel, addButtonAriaLabel, onToggle, onClose, onAdd } = _a, props = __rest$1(_a, ["className", "children", "activeKey", "defaultActiveKey", "id", "isFilled", "isSecondary", "isVertical", "isBox", "hasBorderBottom", "hasSecondaryBorderBottom", "leftScrollAriaLabel", "rightScrollAriaLabel", 'aria-label', "component", "ouiaId", "ouiaSafe", "mountOnEnter", "unmountOnExit", "usePageInsets", "inset", "variant", "expandable", "isExpanded", "defaultIsExpanded", "toggleText", "toggleAriaLabel", "addButtonAriaLabel", "onToggle", "onClose", "onAdd"]);
-            const { showScrollButtons, disableLeftScrollButton, disableRightScrollButton, shownKeys, uncontrolledActiveKey, uncontrolledIsExpandedLocal } = this.state;
+            const _a = this.props, { className, children, activeKey, defaultActiveKey, id, isFilled, isSecondary, isVertical, isBox, hasBorderBottom, hasSecondaryBorderBottom, leftScrollAriaLabel, rightScrollAriaLabel, 'aria-label': ariaLabel, component, ouiaId, ouiaSafe, mountOnEnter, unmountOnExit, usePageInsets, inset, variant, expandable, isExpanded, defaultIsExpanded, toggleText, toggleAriaLabel, addButtonAriaLabel, onToggle, onClose, onAdd, isOverflowHorizontal: isOverflowHorizontal } = _a, props = __rest$1(_a, ["className", "children", "activeKey", "defaultActiveKey", "id", "isFilled", "isSecondary", "isVertical", "isBox", "hasBorderBottom", "hasSecondaryBorderBottom", "leftScrollAriaLabel", "rightScrollAriaLabel", 'aria-label', "component", "ouiaId", "ouiaSafe", "mountOnEnter", "unmountOnExit", "usePageInsets", "inset", "variant", "expandable", "isExpanded", "defaultIsExpanded", "toggleText", "toggleAriaLabel", "addButtonAriaLabel", "onToggle", "onClose", "onAdd", "isOverflowHorizontal"]);
+            const { showScrollButtons, disableLeftScrollButton, disableRightScrollButton, shownKeys, uncontrolledActiveKey, uncontrolledIsExpandedLocal, overflowingTabCount } = this.state;
             const filteredChildren = React__namespace.Children.toArray(children)
                 .filter(Boolean)
                 .filter(child => !child.props.isHidden);
+            const filteredChildrenWithoutOverflow = filteredChildren.slice(0, filteredChildren.length - overflowingTabCount);
+            const filteredChildrenOverflowing = filteredChildren.slice(filteredChildren.length - overflowingTabCount);
+            const overflowingTabProps = filteredChildrenOverflowing.map((child) => child.props);
             const uniqueId = id || getUniqueId();
             const Component = component === exports.TabsComponent.nav ? 'nav' : 'div';
             const localActiveKey = defaultActiveKey !== undefined ? uncontrolledActiveKey : activeKey;
@@ -19386,6 +19484,8 @@
                     onToggle(newValue);
                 }
             };
+            const hasOverflowTab = isOverflowHorizontal && overflowingTabCount > 0;
+            const overflowObjectProps = typeof isOverflowHorizontal === 'object' ? Object.assign({}, isOverflowHorizontal) : {};
             return (React__namespace.createElement(TabsContextProvider, { value: {
                     variant,
                     mountOnEnter,
@@ -19395,18 +19495,20 @@
                     handleTabClick: (...args) => this.handleTabClick(...args),
                     handleTabClose: onClose
                 } },
-                React__namespace.createElement(Component, Object.assign({ "aria-label": ariaLabel, className: css(styles$f.tabs, isFilled && styles$f.modifiers.fill, isSecondary && styles$f.modifiers.secondary, isVertical && styles$f.modifiers.vertical, isVertical && expandable && formatBreakpointMods(expandable, styles$f), isVertical && expandable && isExpandedLocal && styles$f.modifiers.expanded, isBox && styles$f.modifiers.box, showScrollButtons && !isVertical && styles$f.modifiers.scrollable, usePageInsets && styles$f.modifiers.pageInsets, !hasBorderBottom && styles$f.modifiers.noBorderBottom, hasSecondaryBorderBottom && styles$f.modifiers.borderBottom, formatBreakpointMods(inset, styles$f), variantStyle[variant], className) }, getOUIAProps(Tabs.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), { id: id && id }, props),
+                React__namespace.createElement(Component, Object.assign({ "aria-label": ariaLabel, className: css(styles$f.tabs, isFilled && styles$f.modifiers.fill, isSecondary && styles$f.modifiers.secondary, isVertical && styles$f.modifiers.vertical, isVertical && expandable && formatBreakpointMods(expandable, styles$f), isVertical && expandable && isExpandedLocal && styles$f.modifiers.expanded, isBox && styles$f.modifiers.box, showScrollButtons && !isVertical && styles$f.modifiers.scrollable, usePageInsets && styles$f.modifiers.pageInsets, !hasBorderBottom && styles$f.modifiers.noBorderBottom, hasSecondaryBorderBottom && styles$f.modifiers.borderBottom, formatBreakpointMods(inset, styles$f), variantStyle[variant], hasOverflowTab && styles$f.modifiers.overflow, className) }, getOUIAProps(Tabs.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), { id: id && id }, props),
                     expandable && isVertical && (React__namespace.createElement(GenerateId, null, randomId => (React__namespace.createElement("div", { className: css(styles$f.tabsToggle) },
                         React__namespace.createElement("div", { className: css(styles$f.tabsToggleButton) },
                             React__namespace.createElement(Button, { onClick: () => toggleTabs(!isExpandedLocal), variant: "plain", "aria-label": toggleAriaLabel, "aria-expanded": isExpandedLocal, id: `${randomId}-button`, "aria-labelledby": `${randomId}-text ${randomId}-button` },
                                 React__namespace.createElement("span", { className: css(styles$f.tabsToggleIcon) },
                                     React__namespace.createElement(AngleRightIcon$1, { "arian-hidden": "true" })),
                                 toggleText && (React__namespace.createElement("span", { className: css('pf-c-tabs__toggle-text'), id: `${randomId}-text` }, toggleText)))))))),
-                    React__namespace.createElement("button", { className: css(styles$f.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary), "aria-label": leftScrollAriaLabel, onClick: this.scrollLeft, disabled: disableLeftScrollButton, "aria-hidden": disableLeftScrollButton },
-                        React__namespace.createElement(AngleLeftIcon$1, null)),
-                    React__namespace.createElement("ul", { className: css(styles$f.tabsList), ref: this.tabList, onScroll: this.handleScrollButtons, role: "tablist" }, filteredChildren),
-                    React__namespace.createElement("button", { className: css(styles$f.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary), "aria-label": rightScrollAriaLabel, onClick: this.scrollRight, disabled: disableRightScrollButton, "aria-hidden": disableRightScrollButton },
-                        React__namespace.createElement(AngleRightIcon$1, null)),
+                    !isOverflowHorizontal && (React__namespace.createElement("button", { className: css(styles$f.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary), "aria-label": leftScrollAriaLabel, onClick: this.scrollLeft, disabled: disableLeftScrollButton, "aria-hidden": disableLeftScrollButton },
+                        React__namespace.createElement(AngleLeftIcon$1, null))),
+                    React__namespace.createElement("ul", { className: css(styles$f.tabsList), ref: this.tabList, onScroll: this.handleScrollButtons, role: "tablist" },
+                        isOverflowHorizontal ? filteredChildrenWithoutOverflow : filteredChildren,
+                        hasOverflowTab && React__namespace.createElement(OverflowTab, Object.assign({ overflowingTabs: overflowingTabProps }, overflowObjectProps))),
+                    !isOverflowHorizontal && (React__namespace.createElement("button", { className: css(styles$f.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary), "aria-label": rightScrollAriaLabel, onClick: this.scrollRight, disabled: disableRightScrollButton, "aria-hidden": disableRightScrollButton },
+                        React__namespace.createElement(AngleRightIcon$1, null))),
                     onAdd !== undefined && (React__namespace.createElement("span", { className: css(styles$f.tabsAdd) },
                         React__namespace.createElement(Button, { variant: "plain", "aria-label": addButtonAriaLabel || 'Add tab', onClick: onAdd },
                             React__namespace.createElement(PlusIcon$1, null))))),
@@ -19443,12 +19545,6 @@
     };
     TabContentBody.displayName = 'TabContentBody';
 
-    const TabTitleText = (_a) => {
-        var { children, className = '' } = _a, props = __rest$1(_a, ["children", "className"]);
-        return (React__namespace.createElement("span", Object.assign({ className: css(styles$f.tabsItemText, className) }, props), children));
-    };
-    TabTitleText.displayName = 'TabTitleText';
-
     const TabTitleIcon = (_a) => {
         var { children, className = '' } = _a, props = __rest$1(_a, ["children", "className"]);
         return (React__namespace.createElement("span", Object.assign({ className: css(styles$f.tabsItemIcon, className) }, props), children));
@@ -20599,7 +20695,7 @@
 
     const TreeViewListItemBase = ({ name, title, id, isExpanded, defaultExpanded = false, children = null, onSelect, onCheck, hasCheck = false, checkProps = {
         checked: false
-    }, hasBadge = false, customBadgeContent, badgeProps = { isRead: true }, isCompact, activeItems = [], itemData, parentItem, icon, expandedIcon, action, compareItems, 
+    }, hasBadge = false, customBadgeContent, badgeProps = { isRead: true }, isSelectable = false, isCompact, activeItems = [], itemData, parentItem, icon, expandedIcon, action, compareItems, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     useMemo }) => {
         const [internalIsExpanded, setIsExpanded] = React.useState(defaultExpanded);
@@ -20611,13 +20707,22 @@
                 setIsExpanded(internalIsExpanded || defaultExpanded);
             }
         }, [isExpanded, defaultExpanded]);
-        const Component = hasCheck ? 'div' : 'button';
-        const ToggleComponent = hasCheck ? 'button' : 'div';
-        const renderToggle = (randomId) => (React__default["default"].createElement(ToggleComponent, Object.assign({ className: css(styles$9.treeViewNodeToggle), onClick: () => {
-                if (hasCheck) {
+        let Component = 'button';
+        if (hasCheck) {
+            Component = 'label';
+        }
+        else if (isSelectable) {
+            Component = 'div';
+        }
+        const ToggleComponent = hasCheck || isSelectable ? 'button' : 'span';
+        const renderToggle = (randomId) => (React__default["default"].createElement(ToggleComponent, Object.assign({ className: css(styles$9.treeViewNodeToggle), onClick: (evt) => {
+                if (isSelectable || hasCheck) {
                     setIsExpanded(!internalIsExpanded);
                 }
-            } }, (hasCheck && { 'aria-labelledby': `label-${randomId}` }), { tabIndex: -1 }),
+                if (isSelectable) {
+                    evt.stopPropagation();
+                }
+            } }, ((hasCheck || isSelectable) && { 'aria-labelledby': `label-${randomId}` }), { tabIndex: -1 }),
             React__default["default"].createElement("span", { className: css(styles$9.treeViewNodeToggleIcon) },
                 React__default["default"].createElement(AngleRightIcon$1, { "aria-hidden": "true" }))));
         const renderCheck = (randomId) => (React__default["default"].createElement("span", { className: css(styles$9.treeViewNodeCheck) },
@@ -20625,11 +20730,11 @@
         const iconRendered = (React__default["default"].createElement("span", { className: css(styles$9.treeViewNodeIcon) },
             !internalIsExpanded && icon,
             internalIsExpanded && (expandedIcon || icon)));
-        const renderNodeContent = (randomId) => {
+        const renderNodeContent = () => {
             const content = (React__default["default"].createElement(React__default["default"].Fragment, null,
                 isCompact && title && React__default["default"].createElement("span", { className: css(styles$9.treeViewNodeTitle) }, title),
-                hasCheck ? (React__default["default"].createElement("label", { className: css(styles$9.treeViewNodeText), htmlFor: randomId, id: `label-${randomId}` }, name)) : (React__default["default"].createElement("span", { className: css(styles$9.treeViewNodeText) }, name))));
-            return isCompact ? React__default["default"].createElement("div", { className: css(styles$9.treeViewNodeContent) }, content) : content;
+                hasCheck ? (React__default["default"].createElement("span", { className: css(styles$9.treeViewNodeText) }, name)) : (React__default["default"].createElement("span", { className: css(styles$9.treeViewNodeText) }, name))));
+            return isCompact ? React__default["default"].createElement("span", { className: css(styles$9.treeViewNodeContent) }, content) : content;
         };
         const badgeRendered = (React__default["default"].createElement(React__default["default"].Fragment, null,
             hasBadge && children && (React__default["default"].createElement("span", { className: css(styles$9.treeViewNodeCount) },
@@ -20638,7 +20743,7 @@
                 React__default["default"].createElement(Badge, Object.assign({}, badgeProps), customBadgeContent)))));
         return (React__default["default"].createElement("li", Object.assign({ id: id, className: css(styles$9.treeViewListItem, internalIsExpanded && styles$9.modifiers.expanded) }, (internalIsExpanded && { 'aria-expanded': 'true' }), { role: "treeitem", tabIndex: -1 }),
             React__default["default"].createElement("div", { className: css(styles$9.treeViewContent) },
-                React__default["default"].createElement(GenerateId, { prefix: "checkbox-id" }, randomId => (React__default["default"].createElement(Component, { className: css(styles$9.treeViewNode, !children &&
+                React__default["default"].createElement(GenerateId, { prefix: isSelectable ? 'selectable-id' : 'checkbox-id' }, randomId => (React__default["default"].createElement(Component, Object.assign({ className: css(styles$9.treeViewNode, children && (isSelectable || hasCheck) && styles$9.modifiers.selectable, (!children || isSelectable) &&
                         activeItems &&
                         activeItems.length > 0 &&
                         activeItems.some(item => compareItems && item && compareItems(item, itemData))
@@ -20646,16 +20751,16 @@
                         : ''), onClick: (evt) => {
                         if (!hasCheck) {
                             onSelect && onSelect(evt, itemData, parentItem);
-                            if (children && evt.isDefaultPrevented() !== true) {
+                            if (!isSelectable && children && evt.isDefaultPrevented() !== true) {
                                 setIsExpanded(!internalIsExpanded);
                             }
                         }
-                    }, tabIndex: -1 },
-                    React__default["default"].createElement("div", { className: css(styles$9.treeViewNodeContainer) },
+                    }, tabIndex: isSelectable ? 0 : -1 }, (hasCheck && { htmlFor: randomId }), ((hasCheck || (isSelectable && children)) && { id: `label-${randomId}` })),
+                    React__default["default"].createElement("span", { className: css(styles$9.treeViewNodeContainer) },
                         children && renderToggle(randomId),
                         hasCheck && renderCheck(randomId),
                         icon && iconRendered,
-                        renderNodeContent(randomId),
+                        renderNodeContent(),
                         badgeRendered)))),
                 action && React__default["default"].createElement("div", { className: css(styles$9.treeViewAction) }, action)),
             internalIsExpanded && children));
@@ -20826,11 +20931,11 @@
     }
 
     const TreeView = (_a) => {
-        var { data, isNested = false, hasChecks = false, hasBadges = false, hasGuides = false, variant = 'default', defaultAllExpanded = false, allExpanded, icon, expandedIcon, parentItem, onSelect, onCheck, toolbar, activeItems, compareItems = (item, itemToCheck) => item.id === itemToCheck.id, className, useMemo } = _a, props = __rest$1(_a, ["data", "isNested", "hasChecks", "hasBadges", "hasGuides", "variant", "defaultAllExpanded", "allExpanded", "icon", "expandedIcon", "parentItem", "onSelect", "onCheck", "toolbar", "activeItems", "compareItems", "className", "useMemo"]);
+        var { data, isNested = false, hasChecks = false, hasBadges = false, hasGuides = false, hasSelectableNodes = false, variant = 'default', defaultAllExpanded = false, allExpanded, icon, expandedIcon, parentItem, onSelect, onCheck, toolbar, activeItems, compareItems = (item, itemToCheck) => item.id === itemToCheck.id, className, useMemo } = _a, props = __rest$1(_a, ["data", "isNested", "hasChecks", "hasBadges", "hasGuides", "hasSelectableNodes", "variant", "defaultAllExpanded", "allExpanded", "icon", "expandedIcon", "parentItem", "onSelect", "onCheck", "toolbar", "activeItems", "compareItems", "className", "useMemo"]);
         const treeViewList = (React__namespace.createElement(TreeViewList, { isNested: isNested, toolbar: toolbar }, data.map(item => {
             var _a;
-            return (React__namespace.createElement(TreeViewListItem, Object.assign({ key: ((_a = item.id) === null || _a === void 0 ? void 0 : _a.toString()) || item.name.toString(), name: item.name, title: item.title, id: item.id, isExpanded: allExpanded, defaultExpanded: item.defaultExpanded !== undefined ? item.defaultExpanded : defaultAllExpanded, onSelect: onSelect, onCheck: onCheck, hasCheck: item.hasCheck !== undefined ? item.hasCheck : hasChecks, checkProps: item.checkProps, hasBadge: item.hasBadge !== undefined ? item.hasBadge : hasBadges, customBadgeContent: item.customBadgeContent, badgeProps: item.badgeProps, activeItems: activeItems, parentItem: parentItem, itemData: item, icon: item.icon !== undefined ? item.icon : icon, expandedIcon: item.expandedIcon !== undefined ? item.expandedIcon : expandedIcon, action: item.action, compareItems: compareItems, isCompact: variant === 'compact' || variant === 'compactNoBackground', useMemo: useMemo }, (item.children && {
-                children: (React__namespace.createElement(TreeView, { data: item.children, isNested: true, parentItem: item, hasChecks: hasChecks, hasBadges: hasBadges, hasGuides: hasGuides, variant: variant, allExpanded: allExpanded, defaultAllExpanded: defaultAllExpanded, onSelect: onSelect, onCheck: onCheck, activeItems: activeItems, icon: icon, expandedIcon: expandedIcon }))
+            return (React__namespace.createElement(TreeViewListItem, Object.assign({ key: ((_a = item.id) === null || _a === void 0 ? void 0 : _a.toString()) || item.name.toString(), name: item.name, title: item.title, id: item.id, isExpanded: allExpanded, isSelectable: hasSelectableNodes, defaultExpanded: item.defaultExpanded !== undefined ? item.defaultExpanded : defaultAllExpanded, onSelect: onSelect, onCheck: onCheck, hasCheck: item.hasCheck !== undefined ? item.hasCheck : hasChecks, checkProps: item.checkProps, hasBadge: item.hasBadge !== undefined ? item.hasBadge : hasBadges, customBadgeContent: item.customBadgeContent, badgeProps: item.badgeProps, activeItems: activeItems, parentItem: parentItem, itemData: item, icon: item.icon !== undefined ? item.icon : icon, expandedIcon: item.expandedIcon !== undefined ? item.expandedIcon : expandedIcon, action: item.action, compareItems: compareItems, isCompact: variant === 'compact' || variant === 'compactNoBackground', useMemo: useMemo }, (item.children && {
+                children: (React__namespace.createElement(TreeView, { data: item.children, isNested: true, parentItem: item, hasChecks: hasChecks, hasBadges: hasBadges, hasGuides: hasGuides, hasSelectableNodes: hasSelectableNodes, variant: variant, allExpanded: allExpanded, defaultAllExpanded: defaultAllExpanded, onSelect: onSelect, onCheck: onCheck, activeItems: activeItems, icon: icon, expandedIcon: expandedIcon }))
             }))));
         })));
         return (React__namespace.createElement(React__namespace.Fragment, null, parentItem ? (treeViewList) : (React__namespace.createElement(TreeViewRoot, Object.assign({ hasChecks: hasChecks, hasGuides: hasGuides, variant: variant, className: className }, props), treeViewList))));

package/dist/umd/react-core.min.css

@@ -22772,23 +22772,16 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-badge--m-read--BackgroundColor: var(--pf-c-tree-view__node-count--c-badge--m-read--BackgroundColor);
 }
 
-.pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle {
-  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--Color--base);
-}
-
-.pf-c-tree-view__node:hover,
-.pf-c-tree-view__node .pf-c-tree-view__node-toggle:hover {
-  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--hover__icon--Color);
+.pf-c-tree-view__node:not(.pf-m-selectable):hover, .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle:hover {
+  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--hover--Color);
 }
 
-.pf-c-tree-view__node:focus,
-.pf-c-tree-view__node .pf-c-tree-view__node-toggle:focus {
-  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--focus__icon--Color);
+.pf-c-tree-view__node:not(.pf-m-selectable):focus, .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle:focus {
+  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--focus--Color);
 }
 
-.pf-c-tree-view__node:active,
-.pf-c-tree-view__node .pf-c-tree-view__node-toggle:active {
-  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--active__icon--Color);
+.pf-c-tree-view__node:not(.pf-m-selectable):active, .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle:active {
+  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--active--Color);
 }
 
 .pf-c-tree-view__node-container {