@patternfly/react-core 4.212.0 → 4.213.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.212.0",
+  "version": "4.213.2",
   "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.63.0",
-    "@patternfly/react-styles": "^4.62.0",
-    "@patternfly/react-tokens": "^4.64.0",
+    "@patternfly/react-icons": "^4.64.2",
+    "@patternfly/react-styles": "^4.63.2",
+    "@patternfly/react-tokens": "^4.65.2",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.194.1",
+    "@patternfly/patternfly": "4.194.2",
     "@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": "5c55ff97106790c5511f3b6177e0952bce0ba4c3"
+  "gitHead": "42579815df2b03fd9efa0082f41dd349fa04bfe4"
 }

package/src/components/ApplicationLauncher/ApplicationLauncher.tsx

@@ -9,9 +9,10 @@ import { ApplicationLauncherGroup } from './ApplicationLauncherGroup';
 import { ApplicationLauncherSeparator } from './ApplicationLauncherSeparator';
 import { ApplicationLauncherItem } from './ApplicationLauncherItem';
 import { ApplicationLauncherContext } from './ApplicationLauncherContext';
+import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper';
 import { createRenderableFavorites, extendItemsWithFavorite } from '../../helpers/favorites';
 
-export interface ApplicationLauncherProps extends React.HTMLProps<HTMLDivElement> {
+export interface ApplicationLauncherProps extends ToggleMenuBaseProps, React.HTMLProps<HTMLDivElement> {
   /** Additional element css classes */
   className?: string;
   /** Display menu above or below dropdown toggle */
@@ -34,14 +35,6 @@ export interface ApplicationLauncherProps extends React.HTMLProps<HTMLDivElement
   isGrouped?: boolean;
   /** Toggle Icon, optional to override the icon used for the toggle */
   toggleIcon?: React.ReactNode;
-  /** The container to append the menu to. Defaults to 'inline'.
-   * If your menu is being cut off you can append it to an element higher up the DOM tree.
-   * Some examples:
-   * menuAppendTo="parent"
-   * menuAppendTo={() => document.body}
-   * menuAppendTo={document.getElementById('target')}
-   */
-  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
   /** ID list of favorited ApplicationLauncherItems */
   favorites?: string[];
   /** Enables favorites. Callback called when an ApplicationLauncherItem's favorite button is clicked */

package/src/components/ContextSelector/ContextSelector.tsx

@@ -10,6 +10,7 @@ import { TextInput } from '../TextInput';
 import { InputGroup } from '../InputGroup';
 import { KEY_CODES } from '../../helpers/constants';
 import { FocusTrap } from '../../helpers';
+import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper';
 import { Popper } from '../../helpers/Popper/Popper';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 
@@ -17,7 +18,7 @@ import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 let currentId = 0;
 const newId = currentId++;
 
-export interface ContextSelectorProps extends OUIAProps {
+export interface ContextSelectorProps extends ToggleMenuBaseProps, OUIAProps {
   /** content rendered inside the Context Selector */
   children?: React.ReactNode;
   /** Classes applied to root element of Context Selector */
@@ -28,14 +29,6 @@ export interface ContextSelectorProps extends OUIAProps {
   onToggle?: (event: any, value: boolean) => void;
   /** Function callback called when user selects item */
   onSelect?: (event: any, value: React.ReactNode) => void;
-  /** The container to append the menu to. Defaults to 'inline'.
-   * If your menu is being cut off you can append it to an element higher up the DOM tree.
-   * Some examples:
-   * menuAppendTo="parent"
-   * menuAppendTo={() => document.body}
-   * menuAppendTo={document.getElementById('target')}
-   */
-  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
   /** Flag indicating that the context selector should expand to full height */
   isFullHeight?: boolean;
   /** Labels the Context Selector for Screen Readers */

package/src/components/Dropdown/Dropdown.tsx

@@ -2,9 +2,10 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
 import { DropdownPosition, DropdownDirection, DropdownContext } from './dropdownConstants';
 import { DropdownWithContext } from './DropdownWithContext';
+import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper';
 import { OUIAProps, useOUIAId } from '../../helpers';
 
-export interface DropdownProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
+export interface DropdownProps extends ToggleMenuBaseProps, React.HTMLProps<HTMLDivElement>, OUIAProps {
   /** Anything which can be rendered in a dropdown */
   children?: React.ReactNode;
   /** Classes applied to root element of dropdown */
@@ -31,14 +32,6 @@ export interface DropdownProps extends React.HTMLProps<HTMLDivElement>, OUIAProp
   };
   /** Display menu above or below dropdown toggle */
   direction?: DropdownDirection | 'up' | 'down';
-  /** The container to append the menu to. Defaults to 'inline'.
-   * If your menu is being cut off you can append it to an element higher up the DOM tree.
-   * Some examples:
-   * menuAppendTo="parent"
-   * menuAppendTo={() => document.body}
-   * menuAppendTo={document.getElementById('target')}
-   */
-  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
   /** Flag to indicate if dropdown has groups */
   isGrouped?: boolean;
   /** Toggle for the dropdown, examples: <DropdownToggle> or <DropdownToggleCheckbox> */
@@ -61,7 +54,6 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
   ouiaSafe,
   alignments,
   contextProps,
-  menuAppendTo = 'inline',
   ...props
 }: DropdownProps) => (
   <DropdownContext.Provider
@@ -87,7 +79,7 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
       ...contextProps
     }}
   >
-    <DropdownWithContext menuAppendTo={menuAppendTo} {...props} />
+    <DropdownWithContext {...props} />
   </DropdownContext.Provider>
 );
 Dropdown.displayName = 'Dropdown';

package/src/components/OptionsMenu/OptionsMenu.tsx

@@ -3,6 +3,7 @@ import styles from '@patternfly/react-styles/css/components/OptionsMenu/options-
 import { DropdownContext } from '../Dropdown';
 import { DropdownWithContext } from '../Dropdown/DropdownWithContext';
 import { OUIAProps, useOUIAId } from '../../helpers';
+import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper';
 
 export enum OptionsMenuPosition {
   right = 'right',
@@ -14,7 +15,7 @@ export enum OptionsMenuDirection {
   down = 'down'
 }
 
-export interface OptionsMenuProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
+export interface OptionsMenuProps extends ToggleMenuBaseProps, React.HTMLProps<HTMLDivElement>, OUIAProps {
   /** Classes applied to root element of the options menu */
   className?: string;
   /** Id of the root element of the options menu */
@@ -35,14 +36,6 @@ export interface OptionsMenuProps extends React.HTMLProps<HTMLDivElement>, OUIAP
   position?: 'right' | 'left';
   /** Menu will open up or open down from the options menu toggle */
   direction?: 'up' | 'down';
-  /** The container to append the menu to. Defaults to 'inline'.
-   * If your menu is being cut off you can append it to an element higher up the DOM tree.
-   * Some examples:
-   * menuAppendTo="parent"
-   * menuAppendTo={() => document.body}
-   * menuAppendTo={document.getElementById('target')}
-   */
-  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
 }
 
 export const OptionsMenu: React.FunctionComponent<OptionsMenuProps> = ({

package/src/components/Select/Select.tsx

@@ -33,7 +33,7 @@ import {
 } from '../../helpers';
 import { KeyTypes } from '../../helpers/constants';
 import { Divider } from '../Divider';
-import { Popper } from '../../helpers/Popper/Popper';
+import { ToggleMenuBaseProps, Popper } from '../../helpers/Popper/Popper';
 import { createRenderableFavorites, extendItemsWithFavorite } from '../../helpers/favorites';
 import { ValidatedOptions } from '../../helpers/constants';
 import { findTabbableElements } from '../../helpers/util';
@@ -48,7 +48,8 @@ export interface SelectViewMoreObject {
   onClick: (event: React.MouseEvent | React.ChangeEvent) => void;
 }
 export interface SelectProps
-  extends Omit<React.HTMLProps<HTMLDivElement>, 'onSelect' | 'ref' | 'checked' | 'selected'>,
+  extends ToggleMenuBaseProps,
+    Omit<React.HTMLProps<HTMLDivElement>, 'onSelect' | 'ref' | 'checked' | 'selected'>,
     OUIAProps {
   /** Content rendered inside the Select. Must be React.ReactElement<SelectGroupProps>[] */
   children?: React.ReactElement[];
@@ -164,14 +165,6 @@ export interface SelectProps
   shouldResetOnSelect?: boolean;
   /** Content rendered in the footer of the select menu */
   footer?: React.ReactNode;
-  /** The container to append the menu to. Defaults to 'inline'.
-   * If your menu is being cut off you can append it to an element higher up the DOM tree.
-   * Some examples:
-   * menuAppendTo="parent"
-   * menuAppendTo={() => document.body}
-   * menuAppendTo={document.getElementById('target')}
-   */
-  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
 }
 
 export interface SelectState {

package/src/components/Tabs/Tab.tsx

@@ -5,6 +5,8 @@ import { TabButton } from './TabButton';
 import { TabsContext } from './TabsContext';
 import { css } from '@patternfly/react-styles';
 import { Tooltip } from '../Tooltip';
+import { Button } from '../Button';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export interface TabProps extends Omit<React.HTMLProps<HTMLAnchorElement | HTMLButtonElement>, 'title'>, OUIAProps {
   /** content rendered inside the Tab content area. */
@@ -33,6 +35,10 @@ export interface TabProps extends Omit<React.HTMLProps<HTMLAnchorElement | HTMLB
   innerRef?: React.Ref<any>;
   /** Optional Tooltip rendered to a Tab. Should be <Tooltip> with appropriate props for proper rendering. */
   tooltip?: React.ReactElement<any>;
+  /** @beta Aria-label for the close button added by passing the onClose property to Tabs. */
+  closeButtonAriaLabel?: string;
+  /** @beta Flag indicating the close button should be disabled */
+  isCloseDisabled?: boolean;
 }
 
 const TabBase: React.FunctionComponent<TabProps> = ({
@@ -49,6 +55,8 @@ const TabBase: React.FunctionComponent<TabProps> = ({
   href,
   innerRef,
   tooltip,
+  closeButtonAriaLabel,
+  isCloseDisabled = false,
   ...props
 }: TabProps) => {
   const preventedEvents = inoperableEvents.reduce(
@@ -60,7 +68,9 @@ const TabBase: React.FunctionComponent<TabProps> = ({
     }),
     {}
   );
-  const { mountOnEnter, localActiveKey, unmountOnExit, uniqueId, handleTabClick } = React.useContext(TabsContext);
+  const { mountOnEnter, localActiveKey, unmountOnExit, uniqueId, handleTabClick, handleTabClose } = React.useContext(
+    TabsContext
+  );
   let ariaControls = tabContentId ? `${tabContentId}` : `pf-tab-section-${eventKey}-${childId || uniqueId}`;
   if ((mountOnEnter || unmountOnExit) && eventKey !== localActiveKey) {
     ariaControls = undefined;
@@ -102,10 +112,30 @@ const TabBase: React.FunctionComponent<TabProps> = ({
 
   return (
     <li
-      className={css(styles.tabsItem, eventKey === localActiveKey && styles.modifiers.current, childClassName)}
+      className={css(
+        styles.tabsItem,
+        eventKey === localActiveKey && styles.modifiers.current,
+        handleTabClose && styles.modifiers.action,
+        handleTabClose && (isDisabled || isAriaDisabled) && styles.modifiers.disabled,
+        childClassName
+      )}
       role="presentation"
     >
       {tooltip ? <Tooltip {...tooltip.props}>{tabButton}</Tooltip> : tabButton}
+      {handleTabClose !== undefined && (
+        <span className={css(styles.tabsItemClose)}>
+          <Button
+            variant="plain"
+            aria-label={closeButtonAriaLabel || 'Close tab'}
+            onClick={(event: any) => handleTabClose(event, eventKey, tabContentRef)}
+            isDisabled={isCloseDisabled}
+          >
+            <span className={css(styles.tabsItemCloseIcon)}>
+              <TimesIcon />
+            </span>
+          </Button>
+        </span>
+      )}
     </li>
   );
 };

package/src/components/Tabs/Tabs.tsx

@@ -5,6 +5,7 @@ import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import { getUniqueId, isElementInView, formatBreakpointMods } from '../../helpers/util';
 import { TabContent } from './TabContent';
 import { TabProps } from './Tab';
@@ -31,6 +32,12 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   defaultActiveKey?: number | string;
   /** Callback to handle tab selection */
   onSelect?: (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => void;
+  /** @beta Callback to handle tab closing */
+  onClose?: (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => void;
+  /** @beta Callback for the add button. Passing this property inserts the add button */
+  onAdd?: () => void;
+  /** @beta Aria-label for the add button */
+  addButtonAriaLabel?: string;
   /** Uniquely identifies the tabs */
   id?: string;
   /** Enables the filled tab list layout */
@@ -273,13 +280,21 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
   }
 
   componentDidUpdate(prevProps: TabsProps) {
-    const { activeKey, mountOnEnter } = this.props;
+    const { activeKey, mountOnEnter, children } = this.props;
     const { shownKeys } = this.state;
     if (prevProps.activeKey !== activeKey && mountOnEnter && shownKeys.indexOf(activeKey) < 0) {
       this.setState({
         shownKeys: shownKeys.concat(activeKey)
       });
     }
+
+    if (
+      prevProps.children &&
+      children &&
+      React.Children.toArray(prevProps.children).length !== React.Children.toArray(children).length
+    ) {
+      this.handleScrollButtons();
+    }
   }
 
   render() {
@@ -311,7 +326,10 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
       defaultIsExpanded,
       toggleText,
       toggleAriaLabel,
+      addButtonAriaLabel,
       onToggle,
+      onClose,
+      onAdd,
       ...props
     } = this.props;
     const {
@@ -348,7 +366,8 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
           unmountOnExit,
           localActiveKey,
           uniqueId,
-          handleTabClick: (...args) => this.handleTabClick(...args)
+          handleTabClick: (...args) => this.handleTabClick(...args),
+          handleTabClose: onClose
         }}
       >
         <Component
@@ -421,6 +440,13 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
           >
             <AngleRightIcon />
           </button>
+          {onAdd !== undefined && (
+            <span className={css(styles.tabsAdd)}>
+              <Button variant="plain" aria-label={addButtonAriaLabel || 'Add tab'} onClick={onAdd}>
+                <PlusIcon />
+              </Button>
+            </span>
+          )}
         </Component>
         {filteredChildren
           .filter(

package/src/components/Tabs/TabsContext.ts

@@ -11,6 +11,11 @@ export interface TabsContextProps {
     eventKey: number | string,
     tabContentRef: React.RefObject<any>
   ) => void;
+  handleTabClose: (
+    event: React.MouseEvent<HTMLElement, MouseEvent>,
+    eventKey: number | string,
+    tabContentRef?: React.RefObject<any>
+  ) => void;
 }
 
 export const TabsContext = React.createContext<TabsContextProps>({
@@ -19,7 +24,8 @@ export const TabsContext = React.createContext<TabsContextProps>({
   unmountOnExit: false,
   localActiveKey: '',
   uniqueId: '',
-  handleTabClick: () => null
+  handleTabClick: () => null,
+  handleTabClose: undefined
 });
 
 export const TabsContextProvider = TabsContext.Provider;

package/src/components/Tabs/__tests__/Tabs.test.tsx

@@ -38,6 +38,28 @@ test('should render simple tabs', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
+test('should render closeable tabs', () => {
+  const view = render(
+    <Tabs onClose={jest.fn()}>
+      <Tab eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>} closeButtonAriaLabel="close-label">
+        Tab 1 section
+      </Tab>
+    </Tabs>
+  );
+  expect(screen.getByLabelText('close-label')).toBeTruthy();
+});
+
+test('should render add button', () => {
+  const view = render(
+    <Tabs onAdd={jest.fn()} addButtonAriaLabel="add-label">
+      <Tab eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>} closeButtonAriaLabel="close-label">
+        Tab 1 section
+      </Tab>
+    </Tabs>
+  );
+  expect(screen.getByLabelText('add-label')).toBeTruthy();
+});
+
 test('should render uncontrolled tabs', () => {
   const { asFragment } = render(
     <Tabs defaultActiveKey={0}>

package/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`should render accessible tabs 1`] = `
   <nav
     aria-label="accessible Tabs example"
     class="pf-c-tabs"
-    data-ouia-component-id="OUIA-Generated-Tabs-7"
+    data-ouia-component-id="OUIA-Generated-Tabs-9"
     data-ouia-component-type="PF4/Tabs"
     data-ouia-safe="true"
     id="accessibleTabs"
@@ -161,7 +161,7 @@ exports[`should render box tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-tabs pf-m-box"
-    data-ouia-component-id="OUIA-Generated-Tabs-6"
+    data-ouia-component-id="OUIA-Generated-Tabs-8"
     data-ouia-component-type="PF4/Tabs"
     data-ouia-safe="true"
     id="boxTabs"
@@ -355,7 +355,7 @@ exports[`should render box tabs of light variant 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-tabs pf-m-box pf-m-color-scheme--light-300"
-    data-ouia-component-id="OUIA-Generated-Tabs-13"
+    data-ouia-component-id="OUIA-Generated-Tabs-15"
     data-ouia-component-type="PF4/Tabs"
     data-ouia-safe="true"
     id="boxLightVariantTabs"
@@ -508,7 +508,7 @@ exports[`should render expandable vertical tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-tabs pf-m-vertical pf-m-expandable"
-    data-ouia-component-id="OUIA-Generated-Tabs-4"
+    data-ouia-component-id="OUIA-Generated-Tabs-6"
     data-ouia-component-type="PF4/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"
@@ -523,7 +523,7 @@ exports[`should render expandable vertical tabs 1`] = `
           aria-disabled="false"
           aria-labelledby="pf-random-id-0-text pf-random-id-0-button"
           class="pf-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-1"
+          data-ouia-component-id="OUIA-Generated-Button-plain-3"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
           id="pf-random-id-0-button"
@@ -745,7 +745,7 @@ exports[`should render filled tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-tabs pf-m-fill"
-    data-ouia-component-id="OUIA-Generated-Tabs-8"
+    data-ouia-component-id="OUIA-Generated-Tabs-10"
     data-ouia-component-type="PF4/Tabs"
     data-ouia-safe="true"
     id="filledTabs"
@@ -898,7 +898,7 @@ exports[`should render secondary tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-tabs"
-    data-ouia-component-id="OUIA-Generated-Tabs-9"
+    data-ouia-component-id="OUIA-Generated-Tabs-11"
     data-ouia-component-type="PF4/Tabs"
     data-ouia-safe="true"
     id="primarieTabs"
@@ -1020,7 +1020,7 @@ exports[`should render secondary tabs 1`] = `
   >
     <div
       class="pf-c-tabs pf-m-secondary"
-      data-ouia-component-id="OUIA-Generated-Tabs-10"
+      data-ouia-component-id="OUIA-Generated-Tabs-12"
       data-ouia-component-type="PF4/Tabs"
       data-ouia-safe="true"
       id="secondaryTabs"
@@ -1393,7 +1393,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-tabs"
-    data-ouia-component-id="OUIA-Generated-Tabs-11"
+    data-ouia-component-id="OUIA-Generated-Tabs-13"
     data-ouia-component-type="PF4/Tabs"
     data-ouia-safe="true"
     id="eventKeyTabs"
@@ -1547,7 +1547,7 @@ exports[`should render tabs with no bottom border 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-tabs pf-m-no-border-bottom"
-    data-ouia-component-id="OUIA-Generated-Tabs-14"
+    data-ouia-component-id="OUIA-Generated-Tabs-16"
     data-ouia-component-type="PF4/Tabs"
     data-ouia-safe="true"
     id="noBottomBorderTabs"
@@ -1700,7 +1700,7 @@ exports[`should render tabs with separate content 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-tabs"
-    data-ouia-component-id="OUIA-Generated-Tabs-12"
+    data-ouia-component-id="OUIA-Generated-Tabs-14"
     data-ouia-component-type="PF4/Tabs"
     data-ouia-safe="true"
     id="separateTabs"
@@ -1863,7 +1863,7 @@ exports[`should render uncontrolled tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-tabs"
-    data-ouia-component-id="OUIA-Generated-Tabs-2"
+    data-ouia-component-id="OUIA-Generated-Tabs-4"
     data-ouia-component-type="PF4/Tabs"
     data-ouia-safe="true"
   >
@@ -2056,7 +2056,7 @@ exports[`should render vertical tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-tabs pf-m-vertical"
-    data-ouia-component-id="OUIA-Generated-Tabs-3"
+    data-ouia-component-id="OUIA-Generated-Tabs-5"
     data-ouia-component-type="PF4/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"

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

@@ -1617,3 +1617,10 @@ class ToggledSeparateContent extends React.Component {
   }
 }
 ```
+
+### Dynamic
+
+To enable closeable tabs, pass the `onClose` property to `Tabs`, and to enable the add button, pass the `onAdd` property to `Tabs`. Aria labels may be controlled manually by passing `closeButtonAriaLabel` to `Tab` and `addButtonAriaLabel` to `Tabs`.
+
+```ts file="./TabsDynamic.tsx" isBeta
+```

package/src/components/Tabs/examples/TabsDynamic.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
+
+export const TabsDynamic: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState<number>(0);
+  const [tabs, setTabs] = React.useState<string[]>(['Terminal 1', 'Terminal 2', 'Terminal 3']);
+  const [newTabNumber, setNewTabNumber] = React.useState<number>(4);
+  const tabComponentRef = React.useRef<any>();
+  const firstMount = React.useRef(true);
+
+  const onClose = (event: any, tabIndex: string | number) => {
+    const tabIndexNum = tabIndex as number;
+    let nextTabIndex = activeTabKey;
+    if (tabIndexNum < activeTabKey) {
+      // if a preceding tab is closing, keep focus on the new index of the current tab
+      nextTabIndex = activeTabKey - 1 > 0 ? activeTabKey - 1 : 0;
+    } else if (activeTabKey === tabs.length - 1) {
+      // if the closing tab is the last tab, focus the preceding tab
+      nextTabIndex = tabs.length - 2 > 0 ? tabs.length - 2 : 0;
+    }
+    setActiveTabKey(nextTabIndex);
+    setTabs(tabs.filter((tab, index) => index !== tabIndex));
+  };
+
+  const onAdd = () => {
+    setTabs([...tabs, `Terminal ${newTabNumber}`]);
+    setActiveTabKey(tabs.length);
+    setNewTabNumber(newTabNumber + 1);
+  };
+
+  React.useEffect(() => {
+    if (firstMount.current) {
+      firstMount.current = false;
+      return;
+    } else {
+      const first = tabComponentRef.current.tabList.current.childNodes[activeTabKey];
+      first && first.firstChild.focus();
+    }
+  }, [tabs]);
+
+  return (
+    <Tabs
+      activeKey={activeTabKey}
+      onSelect={(event: any, tabIndex: string | number) => setActiveTabKey(tabIndex as number)}
+      onClose={onClose}
+      onAdd={onAdd}
+      aria-label="Tabs in the addable/closeable example"
+      addButtonAriaLabel="Add new tab"
+      ref={tabComponentRef}
+    >
+      {tabs.map((tab, index) => (
+        <Tab
+          key={index}
+          eventKey={index}
+          title={<TabTitleText>{tab}</TabTitleText>}
+          closeButtonAriaLabel={`Close ${tab}`}
+          isCloseDisabled={tabs.length === 1}
+        >
+          {tab}
+        </Tab>
+      ))}
+    </Tabs>
+  );
+};

package/src/helpers/Popper/Popper.tsx

@@ -14,6 +14,17 @@ const getOppositePlacement = (placement: Placement): any =>
     (matched: string) => hash[matched as 'left' | 'right' | 'bottom' | 'top'] as BasePlacement
   );
 
+export interface ToggleMenuBaseProps {
+  /** The container to append the menu to. Defaults to 'inline'
+   * If your menu is being cut off you can append it to an element higher up the DOM tree.
+   * Some examples:
+   * menuAppendTo="parent"
+   * menuAppendTo={() => document.body}
+   * menuAppendTo={document.getElementById('target')}
+   */
+  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'parent' | 'inline';
+}
+
 export const getOpacityTransition = (animationDuration: number) =>
   `opacity ${animationDuration}ms cubic-bezier(.54, 1.5, .38, 1.11)`;