@patternfly/react-core 4.227.8 → 4.228.1

package/dist/umd/react-core.js

@@ -15677,7 +15677,7 @@
         direction: 'right'
     });
     const MenuItemBase = (_a) => {
-        var { children, className, itemId = null, to, hasCheck = false, isActive = null, isFavorited = null, isLoadButton = false, isLoading = false, flyoutMenu, direction, description = null, onClick = () => { }, component = 'button', isDisabled = false, isExternalLink = false, isSelected = null, icon, actions, onShowFlyout, drilldownMenu, isOnPath, innerRef } = _a, props = __rest$1(_a, ["children", "className", "itemId", "to", "hasCheck", "isActive", "isFavorited", "isLoadButton", "isLoading", "flyoutMenu", "direction", "description", "onClick", "component", "isDisabled", "isExternalLink", "isSelected", "icon", "actions", "onShowFlyout", "drilldownMenu", "isOnPath", "innerRef"]);
+        var { children, className, itemId = null, to, hasCheck = false, isActive = null, isFavorited = null, isLoadButton = false, isLoading = false, flyoutMenu, direction, description = null, onClick = () => { }, component = 'button', isDisabled = false, isExternalLink = false, isSelected = null, isFocused, icon, actions, onShowFlyout, drilldownMenu, isOnPath, innerRef } = _a, props = __rest$1(_a, ["children", "className", "itemId", "to", "hasCheck", "isActive", "isFavorited", "isLoadButton", "isLoading", "flyoutMenu", "direction", "description", "onClick", "component", "isDisabled", "isExternalLink", "isSelected", "isFocused", "icon", "actions", "onShowFlyout", "drilldownMenu", "isOnPath", "innerRef"]);
         const { menuId, parentMenu, onSelect, onActionClick, activeItemId, selected, drilldownItemPath, onDrillIn, onDrillOut, flyoutRef, setFlyoutRef, disableHover } = React__namespace.useContext(MenuContext);
         let Component = (to ? 'a' : component);
         if (hasCheck && !to) {
@@ -15755,7 +15755,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 +15807,7 @@
             additionalProps['aria-expanded'] = true;
         }
         else if (hasFlyout) {
-            additionalProps['aria-haspopup'] = true;
+            additionalProps['aria-haspopup'] = 'menu';
             additionalProps['aria-expanded'] = flyoutVisible;
         }
         const getAriaCurrent = () => {
@@ -15843,11 +15844,12 @@
                 setFlyoutRef(null);
             }
         };
-        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, 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 && {
+        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 && !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) },
@@ -15936,19 +15938,23 @@
             this.displayName = 'MenuToggleBase';
         }
         render() {
-            const _a = this.props, { children, className, icon, badge, isExpanded, isDisabled, isFullHeight, isFullWidth, variant, innerRef } = _a, props = __rest$1(_a, ["children", "className", "icon", "badge", "isExpanded", "isDisabled", "isFullHeight", "isFullWidth", "variant", "innerRef"]);
+            const _a = this.props, { children, className, icon, badge, isExpanded, isDisabled, isFullHeight, isFullWidth, variant, innerRef, onClick, 'aria-label': ariaLabel } = _a, otherProps = __rest$1(_a, ["children", "className", "icon", "badge", "isExpanded", "isDisabled", "isFullHeight", "isFullWidth", "variant", "innerRef", "onClick", 'aria-label']);
             const isPlain = variant === 'plain';
             const isPlainText = variant === 'plainText';
+            const isTypeahead = variant === 'typeahead';
+            const toggleControls = (React__namespace.createElement("span", { className: css(styles$x.menuToggleControls) },
+                React__namespace.createElement("span", { className: css(styles$x.menuToggleToggleIcon) },
+                    React__namespace.createElement(CaretDownIcon$1, { "aria-hidden": true }))));
             const content = (React__namespace.createElement(React__namespace.Fragment, null,
                 icon && React__namespace.createElement("span", { className: css(styles$x.menuToggleIcon) }, icon),
-                React__namespace.createElement("span", { className: "pf-c-menu-toggle__text" }, children),
+                isTypeahead ? children : React__namespace.createElement("span", { className: "pf-c-menu-toggle__text" }, children),
                 badge && React__namespace.createElement("span", { className: css(styles$x.menuToggleCount) }, badge),
-                React__namespace.createElement("span", { className: css(styles$x.menuToggleControls) },
-                    React__namespace.createElement("span", { className: css(styles$x.menuToggleToggleIcon) },
-                        React__namespace.createElement(CaretDownIcon$1, { "aria-hidden": true })))));
-            return (React__namespace.createElement("button", Object.assign({ className: css(styles$x.menuToggle, isExpanded && styles$x.modifiers.expanded, variant === 'primary' && styles$x.modifiers.primary, variant === 'secondary' && styles$x.modifiers.secondary, (isPlain || isPlainText) && styles$x.modifiers.plain, isPlainText && styles$x.modifiers.text, isFullHeight && styles$x.modifiers.fullHeight, isFullWidth && styles$x.modifiers.fullWidth, className), type: "button", "aria-expanded": false, ref: innerRef }, (isExpanded && { 'aria-expanded': true }), (isDisabled && { disabled: true }), props),
-                isPlain && children,
-                !isPlain && content));
+                isTypeahead ? (React__namespace.createElement("button", { type: "button", className: css(styles$x.menuToggleButton), "aria-expanded": isExpanded, onClick: onClick, "aria-label": "Menu toggle" }, toggleControls)) : (toggleControls)));
+            const componentProps = Object.assign(Object.assign({ className: css(styles$x.menuToggle, isExpanded && styles$x.modifiers.expanded, variant === 'primary' && styles$x.modifiers.primary, (isPlain || isPlainText) && styles$x.modifiers.plain, isPlainText && styles$x.modifiers.text, isFullHeight && styles$x.modifiers.fullHeight, isTypeahead && styles$x.modifiers.typeahead, isFullWidth && styles$x.modifiers.fullWidth, className), children: isPlain ? children : content }, (isDisabled && { disabled: true })), otherProps);
+            if (isTypeahead) {
+                return React__namespace.createElement("div", Object.assign({ ref: innerRef }, componentProps));
+            }
+            return (React__namespace.createElement("button", Object.assign({ className: css(styles$x.menuToggle, isExpanded && styles$x.modifiers.expanded, variant === 'primary' && styles$x.modifiers.primary, variant === 'secondary' && styles$x.modifiers.secondary, (isPlain || isPlainText) && styles$x.modifiers.plain, isPlainText && styles$x.modifiers.text, isFullHeight && styles$x.modifiers.fullHeight, isFullWidth && styles$x.modifiers.fullWidth, className), ref: innerRef, type: "button", "aria-label": ariaLabel, "aria-expanded": isExpanded, onClick: onClick }, componentProps)));
         }
     }
     MenuToggleBase.defaultProps = {
@@ -16880,9 +16886,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));
         };
@@ -18387,10 +18397,10 @@
         isDisabled: false
     });
     const TextInputGroup = (_a) => {
-        var { children, className, isDisabled, innerRef } = _a, props = __rest$1(_a, ["children", "className", "isDisabled", "innerRef"]);
+        var { children, className, isDisabled, isPlain, innerRef } = _a, props = __rest$1(_a, ["children", "className", "isDisabled", "isPlain", "innerRef"]);
         const textInputGroupRef = innerRef || React__namespace.useRef(null);
         return (React__namespace.createElement(TextInputGroupContext.Provider, { value: { isDisabled } },
-            React__namespace.createElement("div", Object.assign({ ref: textInputGroupRef, className: css(styles$l.textInputGroup, isDisabled && styles$l.modifiers.disabled, className) }, props), children)));
+            React__namespace.createElement("div", Object.assign({ ref: textInputGroupRef, className: css(styles$l.textInputGroup, isDisabled && styles$l.modifiers.disabled, isPlain && styles$l.modifiers.plain, className) }, props), children)));
     };
     TextInputGroup.displayName = 'TextInputGroup';
 
@@ -19054,6 +19064,7 @@
         "nonExpandableOn_2xl": "pf-m-non-expandable-on-2xl",
         "expanded": "pf-m-expanded",
         "pageInsets": "pf-m-page-insets",
+        "overflow": "pf-m-overflow",
         "action": "pf-m-action",
         "active": "pf-m-active",
         "disabled": "pf-m-disabled",
@@ -19211,6 +19222,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";
@@ -19225,7 +19307,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(() => {
@@ -19233,7 +19320,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
@@ -19242,10 +19330,14 @@
                         disableLeftScrollButton = !overflowOnLeft;
                         disableRightScrollButton = !overflowOnRight;
                     }
+                    if (isOverflowHorizontal) {
+                        overflowingTabCount = this.countOverflowingElements(container);
+                    }
                     this.setState({
                         showScrollButtons,
                         disableLeftScrollButton,
-                        disableRightScrollButton
+                        disableRightScrollButton,
+                        overflowingTabCount
                     });
                 }, 100);
             };
@@ -19293,7 +19385,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) {
@@ -19349,8 +19442,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)
@@ -19361,13 +19454,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;
@@ -19381,6 +19481,8 @@
                     onToggle(newValue);
                 }
             };
+            const hasOverflowTab = isOverflowHorizontal && overflowingTabCount > 0;
+            const overflowObjectProps = typeof isOverflowHorizontal === 'object' ? Object.assign({}, isOverflowHorizontal) : {};
             return (React__namespace.createElement(TabsContextProvider, { value: {
                     variant,
                     mountOnEnter,
@@ -19390,18 +19492,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))))),
@@ -19438,12 +19542,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));
@@ -20594,7 +20692,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);
@@ -20606,13 +20704,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) },
@@ -20620,11 +20727,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) },
@@ -20633,7 +20740,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))
@@ -20641,16 +20748,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));
@@ -20821,11 +20928,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))));