@patternfly/react-core 4.227.8 → 4.228.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.227.8",
+  "version": "4.228.1",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.78.8",
-    "@patternfly/react-styles": "^4.77.8",
-    "@patternfly/react-tokens": "^4.79.8",
+    "@patternfly/react-icons": "^4.79.1",
+    "@patternfly/react-styles": "^4.78.1",
+    "@patternfly/react-tokens": "^4.80.1",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.204.3",
+    "@patternfly/patternfly": "4.206.1",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "09b80fb1de7a57f0917554a36d2e7422d70f551f"
+  "gitHead": "f6c791bad9fa1bc817102fea17d5ba7243cd6121"
 }

package/src/components/Menu/MenuItem.tsx

@@ -50,6 +50,8 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   isExternalLink?: boolean;
   /** Flag indicating if the option is selected */
   isSelected?: boolean;
+  /** Flag indicating the item is focused */
+  isFocused?: boolean;
   /** @beta Flyout menu */
   flyoutMenu?: React.ReactElement;
   /** @beta Callback function when mouse leaves trigger */
@@ -88,6 +90,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   isDisabled = false,
   isExternalLink = false,
   isSelected = null,
+  isFocused,
   icon,
   actions,
   onShowFlyout,
@@ -189,11 +192,12 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
     }
   }, [flyoutVisible, flyoutTarget]);
 
-  const handleFlyout = (event: React.KeyboardEvent) => {
-    const key = event.key;
+  const handleFlyout = (event: React.KeyboardEvent | React.MouseEvent) => {
+    const key = (event as React.KeyboardEvent).key;
     const target = event.target;
+    const type = event.type;
 
-    if (key === ' ' || key === 'Enter' || key === 'ArrowRight') {
+    if (key === ' ' || key === 'Enter' || key === 'ArrowRight' || type === 'click') {
       event.stopPropagation();
       if (!flyoutVisible) {
         showFlyout(true);
@@ -248,7 +252,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   if (isOnPath) {
     additionalProps['aria-expanded'] = true;
   } else if (hasFlyout) {
-    additionalProps['aria-haspopup'] = true;
+    additionalProps['aria-haspopup'] = 'menu';
     additionalProps['aria-expanded'] = flyoutVisible;
   }
   const getAriaCurrent = () => {
@@ -290,6 +294,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
         _isOnPath && styles.modifiers.currentPath,
         isLoadButton && styles.modifiers.load,
         isLoading && styles.modifiers.loading,
+        isFocused && styles.modifiers.focus,
         className
       )}
       onMouseOver={onMouseOver}
@@ -305,12 +310,13 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
             className={css(styles.menuItem, getIsSelected() && !hasCheck && styles.modifiers.selected, className)}
             aria-current={getAriaCurrent()}
             {...(!hasCheck && { disabled: isDisabled })}
-            {...(!hasCheck && { role: 'menuitem' })}
+            {...(!hasCheck && !flyoutMenu && { role: 'menuitem' })}
             ref={innerRef}
             {...(!hasCheck && {
               onClick: (event: any) => {
                 onItemSelect(event, onSelect);
                 _drill && _drill();
+                flyoutMenu && handleFlyout(event);
               }
             })}
             {...(hasCheck && { htmlFor: randomId })}

package/src/components/MenuToggle/MenuToggle.tsx

@@ -4,8 +4,10 @@ import { css } from '@patternfly/react-styles';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import { BadgeProps } from '../Badge';
 
+export type MenuToggleElement = HTMLDivElement | HTMLButtonElement;
+
 export interface MenuToggleProps
-  extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'ref'> {
+  extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<MenuToggleElement>, MenuToggleElement>, 'ref'> {
   /** Content rendered inside the toggle */
   children?: React.ReactNode;
   /** Additional classes added to the toggle */
@@ -19,18 +21,18 @@ export interface MenuToggleProps
   /** Flag indicating the toggle takes up the full width of its parent */
   isFullWidth?: boolean;
   /** Variant styles of the menu toggle */
-  variant?: 'default' | 'plain' | 'primary' | 'plainText' | 'secondary';
+  variant?: 'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead';
   /** Optional icon rendered inside the toggle, before the children content */
   icon?: React.ReactNode;
   /** Optional badge rendered inside the toggle, after the children content */
   badge?: BadgeProps | React.ReactNode;
   /** Forwarded ref */
-  innerRef?: React.Ref<HTMLButtonElement>;
+  innerRef?: React.Ref<MenuToggleElement>;
 }
 
 export class MenuToggleBase extends React.Component<MenuToggleProps> {
   displayName = 'MenuToggleBase';
-  static defaultProps = {
+  static defaultProps: MenuToggleProps = {
     className: '',
     isExpanded: false,
     isDisabled: false,
@@ -51,24 +53,63 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
       isFullWidth,
       variant,
       innerRef,
-      ...props
+      onClick,
+      'aria-label': ariaLabel,
+      ...otherProps
     } = this.props;
-
     const isPlain = variant === 'plain';
     const isPlainText = variant === 'plainText';
+    const isTypeahead = variant === 'typeahead';
+    const toggleControls = (
+      <span className={css(styles.menuToggleControls)}>
+        <span className={css(styles.menuToggleToggleIcon)}>
+          <CaretDownIcon aria-hidden />
+        </span>
+      </span>
+    );
 
     const content = (
-      <React.Fragment>
+      <>
         {icon && <span className={css(styles.menuToggleIcon)}>{icon}</span>}
-        <span className="pf-c-menu-toggle__text">{children}</span>
-        {badge && <span className={css(styles.menuToggleCount)}>{badge as React.ReactNode}</span>}
-        <span className={css(styles.menuToggleControls)}>
-          <span className={css(styles.menuToggleToggleIcon)}>
-            <CaretDownIcon aria-hidden />
-          </span>
-        </span>
-      </React.Fragment>
+        {isTypeahead ? children : <span className="pf-c-menu-toggle__text">{children}</span>}
+        {badge && <span className={css(styles.menuToggleCount)}>{badge}</span>}
+        {isTypeahead ? (
+          <button
+            type="button"
+            className={css(styles.menuToggleButton)}
+            aria-expanded={isExpanded}
+            onClick={onClick}
+            aria-label="Menu toggle"
+          >
+            {toggleControls}
+          </button>
+        ) : (
+          toggleControls
+        )}
+      </>
     );
+
+    const componentProps = {
+      className: css(
+        styles.menuToggle,
+        isExpanded && styles.modifiers.expanded,
+        variant === 'primary' && styles.modifiers.primary,
+        (isPlain || isPlainText) && styles.modifiers.plain,
+        isPlainText && styles.modifiers.text,
+        isFullHeight && styles.modifiers.fullHeight,
+        isTypeahead && styles.modifiers.typeahead,
+        isFullWidth && styles.modifiers.fullWidth,
+        className
+      ),
+      children: isPlain ? children : content,
+      ...(isDisabled && { disabled: true }),
+      ...otherProps
+    };
+
+    if (isTypeahead) {
+      return <div ref={innerRef as React.Ref<HTMLDivElement>} {...componentProps} />;
+    }
+
     return (
       <button
         className={css(
@@ -82,21 +123,18 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
           isFullWidth && styles.modifiers.fullWidth,
           className
         )}
+        ref={innerRef as React.Ref<HTMLButtonElement>}
         type="button"
-        aria-expanded={false}
-        ref={innerRef}
-        {...(isExpanded && { 'aria-expanded': true })}
-        {...(isDisabled && { disabled: true })}
-        {...props}
-      >
-        {isPlain && children}
-        {!isPlain && content}
-      </button>
+        aria-label={ariaLabel}
+        aria-expanded={isExpanded}
+        onClick={onClick}
+        {...componentProps}
+      />
     );
   }
 }
 
-export const MenuToggle = React.forwardRef((props: MenuToggleProps, ref: React.Ref<HTMLButtonElement>) => (
+export const MenuToggle = React.forwardRef((props: MenuToggleProps, ref: React.Ref<MenuToggleElement>) => (
   <MenuToggleBase innerRef={ref} {...props} />
 ));
 

package/src/components/Nav/NavItem.tsx

@@ -150,6 +150,11 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
     </span>
   );
 
+  const ariaFlyoutProps = {
+    'aria-haspopup': 'menu',
+    'aria-expanded': flyoutVisible
+  };
+
   const renderDefaultLink = (context: any): React.ReactNode => {
     const preventLinkDefault = preventDefault || !to;
     return (
@@ -164,6 +169,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
         )}
         aria-current={isActive ? 'page' : null}
         tabIndex={isNavOpen ? null : '-1'}
+        {...(hasFlyout && { ...ariaFlyoutProps })}
         {...props}
       >
         {children}

package/src/components/Tabs/OverflowTab.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
+import { css } from '@patternfly/react-styles';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import { Popper } from '../../helpers';
+import { Menu, MenuContent, MenuList, MenuItem } from '../Menu';
+import { TabsContext } from './TabsContext';
+import { TabProps } from './Tab';
+import { TabTitleText } from './TabTitleText';
+
+export interface OverflowTabProps extends React.HTMLProps<HTMLLIElement> {
+  /** Additional classes added to the overflow tab */
+  className?: string;
+  /** The tabs that should be displayed in the menu */
+  overflowingTabs?: TabProps[];
+  /** Flag which shows the count of overflowing tabs when enabled */
+  showTabCount?: boolean;
+  /** The text which displays when an overflowing tab isn't selected */
+  defaultTitleText?: string;
+  /** The aria label applied to the button which toggles the tab overflow menu */
+  toggleAriaLabel?: string;
+}
+
+export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
+  className,
+  overflowingTabs = [],
+  showTabCount,
+  defaultTitleText = 'More',
+  toggleAriaLabel,
+  ...props
+}: OverflowTabProps) => {
+  const menuRef = React.useRef<HTMLDivElement>();
+  const overflowTabRef = React.useRef<HTMLButtonElement>();
+  const overflowLIRef = React.useRef<HTMLLIElement>();
+
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const { localActiveKey, handleTabClick } = React.useContext(TabsContext);
+
+  const closeMenu = () => {
+    setIsExpanded(false);
+    overflowTabRef.current.focus();
+  };
+
+  const handleMenuKeys = (ev: KeyboardEvent) => {
+    const menuContainsEventTarget = menuRef?.current?.contains(ev.target as Node);
+    if (isExpanded && menuContainsEventTarget && ev.key === 'Escape') {
+      closeMenu();
+    }
+  };
+
+  const handleClick = (ev: MouseEvent) => {
+    const clickIsOutsideMenu = !menuRef?.current?.contains(ev.target as Node);
+    const clickIsOutsideOverflowTab = !overflowTabRef?.current?.contains(ev.target as Node);
+    if (isExpanded && clickIsOutsideMenu && clickIsOutsideOverflowTab) {
+      closeMenu();
+    }
+  };
+
+  React.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?.title ? selectedTab.title : defaultTitleText;
+
+  const toggleMenu = () => {
+    setIsExpanded(prevIsExpanded => !prevIsExpanded);
+    setTimeout(() => {
+      if (menuRef?.current) {
+        const firstElement = menuRef.current.querySelector('li > button,input:not(:disabled)');
+        firstElement && (firstElement as HTMLElement).focus();
+      }
+    }, 0);
+  };
+
+  const overflowTab = (
+    <li
+      className={css(styles.tabsItem, 'pf-m-overflow', selectedTab && styles.modifiers.current, className)}
+      role="presentation"
+      ref={overflowLIRef}
+      {...props}
+    >
+      <button
+        className={css(styles.tabsLink, isExpanded && styles.modifiers.expanded)}
+        onClick={() => toggleMenu()}
+        aria-label={toggleAriaLabel}
+        aria-haspopup="menu"
+        aria-expanded={isExpanded}
+        role="tab"
+        ref={overflowTabRef}
+      >
+        <TabTitleText>
+          {tabTitle}
+          {showTabCount && tabTitle === defaultTitleText && ` (${overflowingTabs.length})`}
+        </TabTitleText>
+        <span className={styles.tabsLinkToggleIcon}>
+          <AngleRightIcon />
+        </span>
+      </button>
+    </li>
+  );
+
+  const tabs = overflowingTabs.map(tab => (
+    <MenuItem key={tab.eventKey} itemId={tab.eventKey} isSelected={localActiveKey === tab.eventKey}>
+      {tab.title}
+    </MenuItem>
+  ));
+
+  const onTabSelect = (event: React.MouseEvent<HTMLElement, MouseEvent>, key: number | string) => {
+    closeMenu();
+    const selectedTabRef = overflowingTabs.find(tab => tab.eventKey === key).tabContentRef;
+    handleTabClick(event, key, selectedTabRef);
+  };
+
+  const overflowMenu = (
+    <Menu ref={menuRef} onSelect={(ev, itemId) => onTabSelect(ev as React.MouseEvent<HTMLElement, MouseEvent>, itemId)}>
+      <MenuContent>
+        <MenuList>{tabs}</MenuList>
+      </MenuContent>
+    </Menu>
+  );
+
+  return (
+    <Popper
+      trigger={overflowTab}
+      popper={overflowMenu}
+      isVisible={isExpanded}
+      popperMatchesTriggerWidth={false}
+      appendTo={overflowLIRef.current}
+    />
+  );
+};
+
+OverflowTab.displayName = 'OverflowTab';

package/src/components/Tabs/Tabs.tsx

@@ -10,6 +10,7 @@ import { getUniqueId, isElementInView, formatBreakpointMods } from '../../helper
 import { TabContent } from './TabContent';
 import { TabProps } from './Tab';
 import { TabsContextProvider } from './TabsContext';
+import { OverflowTab } from './OverflowTab';
 import { Button } from '../Button';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId, canUseDOM } from '../../helpers';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
@@ -19,6 +20,15 @@ export enum TabsComponent {
   nav = 'nav'
 }
 
+export interface HorizontalOverflowObject {
+  /** Flag which shows the count of overflowing tabs when enabled */
+  showTabCount?: boolean;
+  /** The text which displays when an overflowing tab isn't selected */
+  defaultTitleText?: string;
+  /** The aria label applied to the button which toggles the tab overflow menu */
+  toggleAriaLabel?: string;
+}
+
 export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect'>, OUIAProps {
   /** Content rendered inside the tabs component. Must be React.ReactElement<TabProps>[] */
   children: React.ReactNode;
@@ -94,6 +104,8 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   toggleAriaLabel?: string;
   /** Callback function to toggle the expandable tabs. */
   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;
 }
 
 const variantStyle = {
@@ -109,6 +121,7 @@ interface TabsState {
   uncontrolledActiveKey: number | string;
   uncontrolledIsExpandedLocal: boolean;
   ouiaStateId: string;
+  overflowingTabCount: number;
 }
 
 export class Tabs extends React.Component<TabsProps, TabsState> {
@@ -123,7 +136,8 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
       shownKeys: this.props.defaultActiveKey !== undefined ? [this.props.defaultActiveKey] : [this.props.activeKey], // only for mountOnEnter case
       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) {
@@ -192,7 +206,13 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
     }
   }
 
+  countOverflowingElements = (container: HTMLUListElement) => {
+    const elements = Array.from(container.children);
+    return elements.filter(element => !isElementInView(container, element as HTMLElement, false)).length;
+  };
+
   handleScrollButtons = () => {
+    const { isOverflowHorizontal: isOverflowHorizontal } = this.props;
     // add debounce to the scroll event
     clearTimeout(this.scrollTimeout);
     this.scrollTimeout = setTimeout(() => {
@@ -200,8 +220,9 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
       let disableLeftScrollButton = true;
       let disableRightScrollButton = true;
       let showScrollButtons = false;
+      let overflowingTabCount = 0;
 
-      if (container && !this.props.isVertical) {
+      if (container && !this.props.isVertical && !isOverflowHorizontal) {
         // get first element and check if it is in view
         const overflowOnLeft = !isElementInView(container, container.firstChild as HTMLElement, false);
 
@@ -213,10 +234,16 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
         disableLeftScrollButton = !overflowOnLeft;
         disableRightScrollButton = !overflowOnRight;
       }
+
+      if (isOverflowHorizontal) {
+        overflowingTabCount = this.countOverflowingElements(container);
+      }
+
       this.setState({
         showScrollButtons,
         disableLeftScrollButton,
-        disableRightScrollButton
+        disableRightScrollButton,
+        overflowingTabCount
       });
     }, 100);
   };
@@ -280,8 +307,8 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
   }
 
   componentDidUpdate(prevProps: TabsProps) {
-    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)
@@ -295,6 +322,11 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
     ) {
       this.handleScrollButtons();
     }
+
+    const currentOverflowingTabCount = this.countOverflowingElements(this.tabList.current);
+    if (isOverflowHorizontal && currentOverflowingTabCount) {
+      this.setState({ overflowingTabCount: currentOverflowingTabCount + overflowingTabCount });
+    }
   }
 
   render() {
@@ -330,6 +362,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
       onToggle,
       onClose,
       onAdd,
+      isOverflowHorizontal: isOverflowHorizontal,
       ...props
     } = this.props;
     const {
@@ -338,12 +371,17 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
       disableRightScrollButton,
       shownKeys,
       uncontrolledActiveKey,
-      uncontrolledIsExpandedLocal
+      uncontrolledIsExpandedLocal,
+      overflowingTabCount
     } = this.state;
     const filteredChildren = (React.Children.toArray(children) as React.ReactElement<TabProps>[])
       .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: React.ReactElement<TabProps>) => child.props);
+
     const uniqueId = id || getUniqueId();
     const Component: any = component === TabsComponent.nav ? 'nav' : 'div';
     const localActiveKey = defaultActiveKey !== undefined ? uncontrolledActiveKey : activeKey;
@@ -358,6 +396,9 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
       }
     };
 
+    const hasOverflowTab = isOverflowHorizontal && overflowingTabCount > 0;
+    const overflowObjectProps = typeof isOverflowHorizontal === 'object' ? { ...isOverflowHorizontal } : {};
+
     return (
       <TabsContextProvider
         value={{
@@ -386,6 +427,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
             hasSecondaryBorderBottom && styles.modifiers.borderBottom,
             formatBreakpointMods(inset, styles),
             variantStyle[variant],
+            hasOverflowTab && styles.modifiers.overflow,
             className
           )}
           {...getOUIAProps(Tabs.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
@@ -419,27 +461,32 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
               )}
             </GenerateId>
           )}
-          <button
-            className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
-            aria-label={leftScrollAriaLabel}
-            onClick={this.scrollLeft}
-            disabled={disableLeftScrollButton}
-            aria-hidden={disableLeftScrollButton}
-          >
-            <AngleLeftIcon />
-          </button>
+          {!isOverflowHorizontal && (
+            <button
+              className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
+              aria-label={leftScrollAriaLabel}
+              onClick={this.scrollLeft}
+              disabled={disableLeftScrollButton}
+              aria-hidden={disableLeftScrollButton}
+            >
+              <AngleLeftIcon />
+            </button>
+          )}
           <ul className={css(styles.tabsList)} ref={this.tabList} onScroll={this.handleScrollButtons} role="tablist">
-            {filteredChildren}
+            {isOverflowHorizontal ? filteredChildrenWithoutOverflow : filteredChildren}
+            {hasOverflowTab && <OverflowTab overflowingTabs={overflowingTabProps} {...overflowObjectProps} />}
           </ul>
-          <button
-            className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
-            aria-label={rightScrollAriaLabel}
-            onClick={this.scrollRight}
-            disabled={disableRightScrollButton}
-            aria-hidden={disableRightScrollButton}
-          >
-            <AngleRightIcon />
-          </button>
+          {!isOverflowHorizontal && (
+            <button
+              className={css(styles.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary)}
+              aria-label={rightScrollAriaLabel}
+              onClick={this.scrollRight}
+              disabled={disableRightScrollButton}
+              aria-hidden={disableRightScrollButton}
+            >
+              <AngleRightIcon />
+            </button>
+          )}
           {onAdd !== undefined && (
             <span className={css(styles.tabsAdd)}>
               <Button variant="plain" aria-label={addButtonAriaLabel || 'Add tab'} onClick={onAdd}>

package/src/components/Tabs/examples/Tabs.md

@@ -2,7 +2,7 @@
 id: Tabs
 section: components
 cssPrefix: pf-c-tabs
-propComponents: ['Tabs', 'Tab', 'TabContent', 'TabTitleText', 'TabTitleIcon']
+propComponents: ['Tabs', 'Tab', 'TabContent', 'TabTitleText', 'TabTitleIcon', 'horizontalOverflowObject']
 ouia: true
 ---
 
@@ -410,6 +410,11 @@ class ScrollButtonsPrimaryTabs extends React.Component {
 }
 ```
 
+### Horizontal overflow
+
+```ts file="./TabsHorizontalOverflow.tsx" isBeta
+```
+
 ### Vertical
 
 ```js