@patternfly/react-core 4.227.9 → 4.229.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.227.9",
+  "version": "4.229.0",
   "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.9",
-    "@patternfly/react-styles": "^4.77.9",
-    "@patternfly/react-tokens": "^4.79.9",
+    "@patternfly/react-icons": "^4.80.0",
+    "@patternfly/react-styles": "^4.79.0",
+    "@patternfly/react-tokens": "^4.81.0",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.205.1",
+    "@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": "997f82511b3461fe6b960fc9412b17ee94864352"
+  "gitHead": "6f68aa3d05370ed0e088e00b2a780f2babe64dd6"
 }

package/src/components/DescriptionList/DescriptionList.tsx

@@ -30,6 +30,8 @@ export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElem
   isFluid?: boolean;
   /** Sets the the default placement of description list groups to fill from top to bottom. */
   isFillColumns?: boolean;
+  /** Sets the display size of the descriptions in the description list.*/
+  displaySize?: 'lg' | '2xl';
   /** Sets the number of columns on the description list at various breakpoints */
   columnModifier?: {
     default?: '1Col' | '2Col' | '3Col';
@@ -56,6 +58,8 @@ export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElem
     xl?: string;
     '2xl'?: string;
   };
+  /** Sets the description list's term column width.*/
+  termWidth?: string;
   /** Sets the horizontal description list's term column width at various breakpoints. */
   horizontalTermWidthModifier?: {
     default?: string;
@@ -86,8 +90,10 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
   isCompact,
   isFluid,
   isFillColumns,
+  displaySize,
   columnModifier,
   autoFitMinModifier,
+  termWidth,
   horizontalTermWidthModifier,
   orientation,
   style,
@@ -99,6 +105,12 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
       ...setBreakpointModifiers('--pf-c-description-list--GridTemplateColumns--min', autoFitMinModifier)
     };
   }
+  if (termWidth) {
+    style = {
+      ...style,
+      ...{ '--pf-c-description-list__term--width': termWidth }
+    };
+  }
   if (isHorizontal && horizontalTermWidthModifier) {
     style = {
       ...style,
@@ -119,6 +131,8 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
         isCompact && styles.modifiers.compact,
         isFluid && styles.modifiers.fluid,
         isFillColumns && styles.modifiers.fillColumns,
+        displaySize === 'lg' && styles.modifiers.displayLg,
+        displaySize === '2xl' && styles.modifiers.display_2xl,
         className
       )}
       style={style}

package/src/components/DescriptionList/DescriptionListGroup.tsx

@@ -18,4 +18,5 @@ export const DescriptionListGroup: React.FunctionComponent<DescriptionListGroupP
     {children}
   </div>
 );
+
 DescriptionListGroup.displayName = 'DescriptionListGroup';

package/src/components/DescriptionList/examples/DescriptionList.md

@@ -11,10 +11,11 @@ propComponents:
     'DescriptionListTermHelpText',
     'DescriptionListTermHelpTextButton',
     'Popover',
+    'Card'
   ]
 ---
 
-import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescription, DescriptionListGroup, DescriptionListTermHelpText, DescriptionListTermHelpTextButton, Popover } from '@patternfly/react-core';
+import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescription, DescriptionListGroup, DescriptionListTermHelpText, DescriptionListTermHelpTextButton, Popover, Checkbox, Card } from '@patternfly/react-core';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import BookIcon from '@patternfly/react-icons/dist/esm/icons/book-icon';
@@ -84,6 +85,11 @@ import FlagIcon from '@patternfly/react-icons/dist/esm/icons/flag-icon';
 ```ts file='./DescriptionListColumnFill.tsx'
 ```
 
+### Display size
+
+```ts file='./DescriptionListWithDisplaySize.tsx'
+```
+
 ## Responsive column definitions
 
 ### Default responsive columns
@@ -120,6 +126,30 @@ import FlagIcon from '@patternfly/react-icons/dist/esm/icons/flag-icon';
 ```ts file='./DescriptionListDefaultInlineGrid.tsx'
 ```
 
+## Card variants
+
+A [card component](/components/card) can be used in place of a description list group.
+
+### Description list with card
+
+```ts file='./DescriptionListWithCard.tsx'
+```
+
+### Description list with display size and card
+
+```ts file='./DescriptionListDisplaySizeAndCard.tsx'
+```
+
+### Display size with card, three column on large breakpoint
+
+```ts file='./DescriptionListDisplaySizeAndCardThreeColumn.tsx'
+```
+
+### Display size with card, horizontal, modified term width
+
+```ts file='./DescriptionListDisplaySizeAndCardHorizontalTermWidth.tsx'
+```
+
 ## Auto fit
 
 ### Auto-fit basic

package/src/components/DescriptionList/examples/DescriptionListDisplaySizeAndCard.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+  Button,
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  Card,
+  Checkbox
+} from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const DescriptionListDisplaySizeAndCard: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(false);
+  const [displaySize, setDisplaySize] = React.useState<'lg' | '2xl'>('lg');
+
+  const toggleDisplaySize = (checked: boolean) => {
+    setDisplaySize(checked ? '2xl' : 'lg');
+    setIsChecked(checked);
+  };
+
+  return (
+    <>
+      <div style={{ marginBottom: '12px' }}>
+        <Checkbox
+          label="displaySize 2xl"
+          isChecked={isChecked}
+          onChange={toggleDisplaySize}
+          aria-label="set display size 2xl"
+          id="toggle-display-size-with-card"
+          name="toggle-display-size-with-card"
+        />
+      </div>
+      <DescriptionList displaySize={displaySize} columnModifier={{ lg: '2Col' }}>
+        <Card component="div">
+          <DescriptionListTerm>Name</DescriptionListTerm>
+          <DescriptionListDescription>Example</DescriptionListDescription>
+        </Card>
+        <Card component="div">
+          <DescriptionListTerm>Namespace</DescriptionListTerm>
+          <DescriptionListDescription>
+            <a href="#">mary-test</a>
+          </DescriptionListDescription>
+        </Card>
+        <Card component="div">
+          <DescriptionListTerm>Labels</DescriptionListTerm>
+          <DescriptionListDescription>example</DescriptionListDescription>
+        </Card>
+        <Card component="div">
+          <DescriptionListTerm>Pod selector</DescriptionListTerm>
+          <DescriptionListDescription>
+            <Button variant="link" isInline icon={<PlusCircleIcon />}>
+              app=MyApp
+            </Button>
+          </DescriptionListDescription>
+        </Card>
+        <Card component="div">
+          <DescriptionListTerm>Annotation</DescriptionListTerm>
+          <DescriptionListDescription>2 Annotations</DescriptionListDescription>
+        </Card>
+      </DescriptionList>
+    </>
+  );
+};

package/src/components/DescriptionList/examples/DescriptionListDisplaySizeAndCardHorizontalTermWidth.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescription, Card } from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const DescriptionListDisplaySizeAndCardHorizontalTermWidth: React.FunctionComponent = () => (
+  <DescriptionList displaySize="lg" isHorizontal columnModifier={{ lg: '2Col' }} termWidth="10ch">
+    <Card component="div">
+      <DescriptionListTerm>Name</DescriptionListTerm>
+      <DescriptionListDescription>Example</DescriptionListDescription>
+    </Card>
+    <Card component="div">
+      <DescriptionListTerm>Namespace</DescriptionListTerm>
+      <DescriptionListDescription>
+        <a href="#">mary-test</a>
+      </DescriptionListDescription>
+    </Card>
+    <Card component="div">
+      <DescriptionListTerm>Labels</DescriptionListTerm>
+      <DescriptionListDescription>example</DescriptionListDescription>
+    </Card>
+    <Card component="div">
+      <DescriptionListTerm>Pod selector</DescriptionListTerm>
+      <DescriptionListDescription>
+        <Button variant="link" isInline icon={<PlusCircleIcon />}>
+          app=MyApp
+        </Button>
+      </DescriptionListDescription>
+    </Card>
+    <Card component="div">
+      <DescriptionListTerm>Annotation</DescriptionListTerm>
+      <DescriptionListDescription>2 Annotations</DescriptionListDescription>
+    </Card>
+  </DescriptionList>
+);

package/src/components/DescriptionList/examples/DescriptionListDisplaySizeAndCardThreeColumn.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescription, Card } from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const DescriptionListDisplayLgAndCardThreeColumn: React.FunctionComponent = () => (
+  <DescriptionList displaySize="lg" columnModifier={{ lg: '3Col' }}>
+    <Card component="div">
+      <DescriptionListTerm>Name</DescriptionListTerm>
+      <DescriptionListDescription>Example</DescriptionListDescription>
+    </Card>
+    <Card component="div">
+      <DescriptionListTerm>Namespace</DescriptionListTerm>
+      <DescriptionListDescription>
+        <a href="#">mary-test</a>
+      </DescriptionListDescription>
+    </Card>
+    <Card component="div">
+      <DescriptionListTerm>Labels</DescriptionListTerm>
+      <DescriptionListDescription>example</DescriptionListDescription>
+    </Card>
+    <Card component="div">
+      <DescriptionListTerm>Pod selector</DescriptionListTerm>
+      <DescriptionListDescription>
+        <Button variant="link" isInline icon={<PlusCircleIcon />}>
+          app=MyApp
+        </Button>
+      </DescriptionListDescription>
+    </Card>
+    <Card component="div">
+      <DescriptionListTerm>Annotation</DescriptionListTerm>
+      <DescriptionListDescription>2 Annotations</DescriptionListDescription>
+    </Card>
+  </DescriptionList>
+);

package/src/components/DescriptionList/examples/DescriptionListWithCard.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import {
+  Button,
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  Card,
+  Checkbox
+} from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const DescriptionListWithCard: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(false);
+  const [isSelectable, setSelectable] = React.useState<boolean>(false);
+
+  const toggleSelectable = (checked: boolean) => {
+    setSelectable(checked ? true : false);
+    setIsChecked(checked);
+  };
+  return (
+    <>
+      <div style={{ marginBottom: '12px' }}>
+        <Checkbox
+          label="isSelectable"
+          isChecked={isChecked}
+          onChange={toggleSelectable}
+          aria-label="set isSelectable"
+          id="toggle-isSelectable"
+          name="toggle-isSelectable"
+        />
+      </div>
+      <DescriptionList columnModifier={{ lg: '2Col' }}>
+        <Card component="div" isSelectable={isSelectable}>
+          <DescriptionListTerm>Name</DescriptionListTerm>
+          <DescriptionListDescription>Example</DescriptionListDescription>
+        </Card>
+        <Card component="div" isSelectable={isSelectable}>
+          <DescriptionListTerm>Namespace</DescriptionListTerm>
+          <DescriptionListDescription>
+            <a href="#">mary-test</a>
+          </DescriptionListDescription>
+        </Card>
+        <Card component="div" isSelectable={isSelectable}>
+          <DescriptionListTerm>Labels</DescriptionListTerm>
+          <DescriptionListDescription>example</DescriptionListDescription>
+        </Card>
+        <Card component="div" isSelectable={isSelectable}>
+          <DescriptionListTerm>Pod selector</DescriptionListTerm>
+          <DescriptionListDescription>
+            <Button variant="link" isInline icon={<PlusCircleIcon />}>
+              app=MyApp
+            </Button>
+          </DescriptionListDescription>
+        </Card>
+        <Card component="div" isSelectable={isSelectable}>
+          <DescriptionListTerm>Annotation</DescriptionListTerm>
+          <DescriptionListDescription>2 Annotations</DescriptionListDescription>
+        </Card>
+      </DescriptionList>
+    </>
+  );
+};

package/src/components/DescriptionList/examples/DescriptionListWithDisplaySize.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+  Button,
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListGroup,
+  DescriptionListDescription,
+  Checkbox
+} from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const DescriptionListWithDisplaySize: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(false);
+  const [displaySize, setDisplaySize] = React.useState<'lg' | '2xl'>('lg');
+
+  const toggleDisplaySize = (checked: boolean) => {
+    setDisplaySize(checked ? '2xl' : 'lg');
+    setIsChecked(checked);
+  };
+
+  return (
+    <>
+      <div style={{ marginBottom: '12px' }}>
+        <Checkbox
+          label="displaySize 2xl"
+          isChecked={isChecked}
+          onChange={toggleDisplaySize}
+          aria-label="set display size 2xl"
+          id="toggle-display-size"
+          name="toggle-display-size"
+        />
+      </div>
+      <DescriptionList displaySize={displaySize} columnModifier={{ lg: '2Col' }}>
+        <DescriptionListGroup>
+          <DescriptionListTerm>Name</DescriptionListTerm>
+          <DescriptionListDescription>Example</DescriptionListDescription>
+        </DescriptionListGroup>
+        <DescriptionListGroup>
+          <DescriptionListTerm>Namespace</DescriptionListTerm>
+          <DescriptionListDescription>
+            <a href="#">mary-test</a>
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+        <DescriptionListGroup>
+          <DescriptionListTerm>Labels</DescriptionListTerm>
+          <DescriptionListDescription>example</DescriptionListDescription>
+        </DescriptionListGroup>
+        <DescriptionListGroup>
+          <DescriptionListTerm>Pod selector</DescriptionListTerm>
+          <DescriptionListDescription>
+            <Button variant="link" isInline icon={<PlusCircleIcon />}>
+              app=MyApp
+            </Button>
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+        <DescriptionListGroup>
+          <DescriptionListTerm>Annotation</DescriptionListTerm>
+          <DescriptionListDescription>2 Annotations</DescriptionListDescription>
+        </DescriptionListGroup>
+      </DescriptionList>
+    </>
+  );
+};

package/src/components/Menu/MenuItem.tsx

@@ -192,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);
@@ -251,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 = () => {
@@ -309,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/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';