@patternfly/react-core 4.231.8 → 4.232.1

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.232.1 (2022-08-16)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+# 4.232.0 (2022-08-16)
+
+
+### Features
+
+* Allow for 'next' and 'deprecated' react-core subpaths ([#7824](https://github.com/patternfly/patternfly-react/issues/7824)) ([0e68bd3](https://github.com/patternfly/patternfly-react/commit/0e68bd349e9a8b4b08bb8b777358dcde41d5462f))
+
+
+
+
+
+## 4.231.9 (2022-08-15)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 ## 4.231.8 (2022-08-11)
 
 **Note:** Version bump only for package @patternfly/react-core

package/dist/esm/deprecated/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/deprecated/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/deprecated/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,IAAI,CAAC"}

package/dist/esm/deprecated/components/index.js

@@ -0,0 +1,2 @@
+export * from './';
+//# sourceMappingURL=index.js.map

package/dist/esm/deprecated/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/deprecated/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,IAAI,CAAC"}

package/dist/esm/deprecated/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/deprecated/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/deprecated/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/esm/deprecated/index.js

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.js.map

package/dist/esm/deprecated/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/deprecated/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/esm/next/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/next/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/next/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,IAAI,CAAC"}

package/dist/esm/next/components/index.js

@@ -0,0 +1,2 @@
+export * from './';
+//# sourceMappingURL=index.js.map

package/dist/esm/next/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/next/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,IAAI,CAAC"}

package/dist/esm/next/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/next/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/next/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/esm/next/index.js

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.js.map

package/dist/esm/next/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/next/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/js/deprecated/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './';
+//# sourceMappingURL=index.d.ts.map

package/dist/js/deprecated/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/deprecated/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,IAAI,CAAC"}

package/dist/js/deprecated/components/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./"), exports);
+//# sourceMappingURL=index.js.map

package/dist/js/deprecated/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/deprecated/components/index.ts"],"names":[],"mappings":";;;AAAA,6CAAmB"}

package/dist/js/deprecated/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/js/deprecated/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/deprecated/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/js/deprecated/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./components"), exports);
+//# sourceMappingURL=index.js.map

package/dist/js/deprecated/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/deprecated/index.ts"],"names":[],"mappings":";;;AAAA,uDAA6B"}

package/dist/js/next/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './';
+//# sourceMappingURL=index.d.ts.map

package/dist/js/next/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/next/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,IAAI,CAAC"}

package/dist/js/next/components/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./"), exports);
+//# sourceMappingURL=index.js.map

package/dist/js/next/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/next/components/index.ts"],"names":[],"mappings":";;;AAAA,6CAAmB"}

package/dist/js/next/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/js/next/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/next/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/js/next/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./components"), exports);
+//# sourceMappingURL=index.js.map

package/dist/js/next/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/next/index.ts"],"names":[],"mappings":";;;AAAA,uDAA6B"}

package/package.json

@@ -1,10 +1,26 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.231.8",
+  "version": "4.232.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",
   "types": "dist/esm/index.d.ts",
+  "exports": {
+    ".": "./dist/esm/index.js",
+    "./next": "./dist/esm/next/index.js",
+    "./deprecated": "./dist/esm/deprecated/index.js",
+    "./package.json": "./package.json"
+  },
+  "typesVersions": {
+    "*": {
+      "next": [
+        "dist/esm/next/index.d.ts"
+      ],
+      "deprecated": [
+        "dist/esm/deprecated/index.d.ts"
+      ]
+    }
+  },
   "patternfly:src": "src/",
   "sideEffects": [
     "*.css",
@@ -34,9 +50,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.82.8",
-    "@patternfly/react-styles": "^4.81.8",
-    "@patternfly/react-tokens": "^4.83.8",
+    "@patternfly/react-icons": "^4.83.1",
+    "@patternfly/react-styles": "^4.82.1",
+    "@patternfly/react-tokens": "^4.84.1",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +76,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "a6d2902c4969c785a9efa88fb1898ccda7b2a5ec"
+  "gitHead": "6fb07165361827ac63abf470cc14dd1dfe379f91"
 }

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

@@ -0,0 +1,403 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { OverflowTab } from '../OverflowTab';
+import { TabsContext } from '../TabsContext';
+
+jest.mock('../../../helpers', () => ({
+  Popper: ({ trigger, popper, isVisible, popperMatchesTriggerWidth, appendTo }) => (
+    <div data-testid="popper-mock">
+      <div data-testid="trigger">{trigger}</div>
+      <div data-testid="popper">{isVisible && popper}</div>
+      <p>Popper matches trigger width: {`${popperMatchesTriggerWidth}`}</p>
+      <p>Append to class name: {appendTo && `${appendTo.className}`}</p>
+    </div>
+  )
+}));
+
+jest.mock('../../Menu', () => {
+  const { forwardRef } = jest.requireActual('react');
+  return {
+    Menu: forwardRef((props: { children; onSelect }, ref) => (
+      <div data-testid="menu-mock" ref={ref}>
+        {props.children}
+        <button onClick={() => props.onSelect('mouseEvent', 1, 'fakeRef')}>Select</button>
+      </div>
+    )),
+    MenuContent: ({ children }) => <div data-testid="menu-content-mock">{children}</div>,
+    MenuList: ({ children }) => <ul data-testid="menu-list-mock">{children}</ul>,
+    MenuItem: ({ children, itemId, isSelected }) => (
+      <>
+        <li id={`${itemId}-menu-item-mock`}>
+          {children}
+          <p>Selected: {`${isSelected}`}</p>
+        </li>
+      </>
+    )
+  };
+});
+
+const tabsContextDefaultProps = {
+  variant: 'default' as 'default',
+  mountOnEnter: false,
+  unmountOnExit: false,
+  localActiveKey: '',
+  uniqueId: '',
+  handleTabClick: () => null,
+  handleTabClose: undefined
+};
+
+test('Renders', () => {
+  render(
+    <div data-testid="overflow-tab-container">
+      <OverflowTab />
+    </div>
+  );
+
+  expect(screen.getByTestId('overflow-tab-container').firstChild).toBeVisible();
+});
+
+test('Renders with the passed aria label', () => {
+  render(<OverflowTab aria-label="Overflow tab label test" />);
+
+  expect(screen.getByRole('presentation')).toHaveAccessibleName('Overflow tab label test');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(
+    <>
+      <OverflowTab aria-labelledby="labelling-id" />
+      <p id="labelling-id">Label</p>
+    </>
+  );
+
+  expect(screen.getByRole('presentation')).toHaveAccessibleName('Label');
+});
+
+test('Renders with class names pf-m-overflow and pf-c-tabs__item on the presentation element', () => {
+  render(<OverflowTab />);
+
+  expect(screen.getByRole('presentation')).toHaveClass('pf-m-overflow');
+  expect(screen.getByRole('presentation')).toHaveClass('pf-c-tabs__item');
+});
+
+test('Renders with class pf-c-tabs__link on the tab element', () => {
+  render(<OverflowTab />);
+
+  expect(screen.getByRole('tab')).toHaveClass('pf-c-tabs__link');
+});
+
+test("Renders with class pf-c-tabs__link-toggle-icon on the img element's container", () => {
+  render(<OverflowTab />);
+
+  expect(screen.getByRole('img', { hidden: true }).parentElement).toHaveClass('pf-c-tabs__link-toggle-icon');
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<OverflowTab className="test-class" />);
+
+  expect(screen.getByRole('presentation')).toHaveClass('test-class');
+});
+
+test('Renders without pf-m-expanded on the tab element by default', () => {
+  render(<OverflowTab />);
+
+  expect(screen.getByRole('tab')).not.toHaveClass('pf-m-expanded');
+});
+
+test('Renders with pf-m-expanded on the tab element once clicked', () => {
+  render(<OverflowTab />);
+
+  const overflowTab = screen.getByRole('tab');
+
+  userEvent.click(overflowTab);
+
+  expect(overflowTab).toHaveClass('pf-m-expanded');
+});
+
+test('Renders without pf-m-current on the presentation element by default', () => {
+  render(<OverflowTab />);
+
+  expect(screen.getByRole('presentation')).not.toHaveClass('pf-m-current');
+});
+
+test('Renders without pf-m-current when the overflowingTabs does not include the tab indicated by localActiveKey via a context', () => {
+  render(
+    <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 0 }}>
+      <OverflowTab overflowingTabs={[{ title: 'tabTitle', eventKey: 1 }]} />
+    </TabsContext.Provider>
+  );
+
+  expect(screen.getByRole('presentation')).not.toHaveClass('pf-m-current');
+});
+
+test("Renders with pf-m-current when TabContext's localActiveKey matches an overflowingTabs' eventKey", () => {
+  render(
+    <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 1 }}>
+      <OverflowTab overflowingTabs={[{ title: 'Tab one', eventKey: 1 }]} />
+    </TabsContext.Provider>
+  );
+
+  expect(screen.getByRole('presentation')).toHaveClass('pf-m-current');
+});
+
+test('Does not render tabs passed via overflowingTabs when not expanded', () => {
+  render(
+    <OverflowTab
+      overflowingTabs={[
+        { title: 'Tab one', eventKey: 1 },
+        { title: 'Tab two', eventKey: 2 }
+      ]}
+    />
+  );
+
+  expect(screen.queryByText('Tab one')).not.toBeInTheDocument();
+  expect(screen.queryByText('Tab two')).not.toBeInTheDocument();
+});
+
+test('Renders tabs passed via overflowingTabs when expanded', () => {
+  render(
+    <OverflowTab
+      overflowingTabs={[
+        { title: 'Tab one', eventKey: 1 },
+        { title: 'Tab two', eventKey: 2 }
+      ]}
+    />
+  );
+
+  userEvent.click(screen.getByRole('tab', { name: 'More' }));
+
+  expect(screen.getByText('Tab one')).toBeVisible();
+  expect(screen.getByText('Tab two')).toBeVisible();
+});
+
+test('Closes the overflowing tabs menu when a tab is selected', () => {
+  render(
+    <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 0 }}>
+      <OverflowTab
+        overflowingTabs={[
+          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> },
+          { title: 'Tab two', eventKey: 2, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+        ]}
+      />
+    </TabsContext.Provider>
+  );
+
+  userEvent.click(screen.getByRole('tab', { name: 'More' }));
+
+  // rather than actually clicking a menu item here we click the Select button provided via our Menu mock to keep the mocks simpler
+  userEvent.click(screen.getByRole('button', { name: 'Select' }));
+
+  expect(screen.queryByText('Tab two')).not.toBeInTheDocument();
+});
+
+test('Closes the overflowing tabs menu when the user clicks outside of the menu', () => {
+  render(
+    <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 0 }}>
+      <OverflowTab
+        overflowingTabs={[
+          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> },
+          { title: 'Tab two', eventKey: 2, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+        ]}
+      />
+    </TabsContext.Provider>
+  );
+
+  userEvent.click(screen.getByRole('tab', { name: 'More' }));
+
+  userEvent.click(document.body);
+
+  expect(screen.queryByText('Tab two')).not.toBeInTheDocument();
+});
+
+test('Calls the onTabClick callback provided via context when a tab is clicked', () => {
+  const mockHandleTabClick = jest.fn();
+
+  render(
+    <TabsContext.Provider value={{ ...tabsContextDefaultProps, handleTabClick: mockHandleTabClick }}>
+      <OverflowTab
+        overflowingTabs={[
+          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+        ]}
+      />
+    </TabsContext.Provider>
+  );
+
+  userEvent.click(screen.getByRole('tab', { name: 'More' }));
+
+  // rather than actually clicking a menu item here we click the Select button provided via our Menu mock to keep the mocks simpler
+  userEvent.click(screen.getByRole('button', { name: 'Select' }));
+
+  expect(mockHandleTabClick).toHaveBeenCalledTimes(1);
+  expect(mockHandleTabClick).toHaveBeenCalledWith('mouseEvent', 1, 'fakeRef');
+});
+
+test('Does not show the overflowing tab count by default', () => {
+  render(
+    <OverflowTab
+      overflowingTabs={[
+        { title: 'Tab one', eventKey: 1 },
+        { title: 'Tab two', eventKey: 2 }
+      ]}
+    />
+  );
+
+  expect(screen.queryByRole('tab', { name: 'More (2)' })).not.toBeInTheDocument();
+});
+
+test('Shows the overflowing tab count when showTabCount is true', () => {
+  render(
+    <OverflowTab
+      overflowingTabs={[
+        { title: 'Tab one', eventKey: 1 },
+        { title: 'Tab two', eventKey: 2 }
+      ]}
+      showTabCount
+    />
+  );
+
+  expect(screen.getByRole('tab', { name: 'More (2)' })).toBeVisible();
+});
+
+test('Uses "More" as the default overflow tab title', () => {
+  render(<OverflowTab />);
+
+  expect(screen.getByRole('tab')).toHaveTextContent('More');
+});
+
+test('Uses the selected tab title as the overflow tab title rather than the default title when a tab is selected', () => {
+  render(
+    <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 1 }}>
+      <OverflowTab
+        overflowingTabs={[
+          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+        ]}
+      />
+    </TabsContext.Provider>
+  );
+
+  expect(screen.getByRole('tab')).toHaveTextContent('Tab one');
+});
+
+test('Uses custom overflow tab title text provided via defaultTitleText', () => {
+  render(<OverflowTab defaultTitleText="Test" />);
+
+  expect(screen.getByRole('tab')).toHaveTextContent('Test');
+});
+
+test('Uses the selected tab title as the overflow tab title rather than the defaultTitleText when a tab is selected', () => {
+  render(
+    <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 1 }}>
+      <OverflowTab
+        overflowingTabs={[
+          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+        ]}
+        defaultTitleText="Test"
+      />
+    </TabsContext.Provider>
+  );
+
+  expect(screen.getByRole('tab')).toHaveTextContent('Tab one');
+});
+
+test('Does not have an aria label on the tab by default', () => {
+  render(<OverflowTab />);
+
+  expect(screen.getByRole('tab')).not.toHaveAttribute('aria-label');
+});
+
+test('Renders with the toggleAriaLabel as an aria label on the tab', () => {
+  render(<OverflowTab toggleAriaLabel="Test aria label" />);
+
+  expect(screen.getByRole('tab')).toHaveAttribute('aria-label', 'Test aria label');
+});
+
+test('Renders the tab with aria-haspopup=menu', () => {
+  render(<OverflowTab />);
+
+  expect(screen.getByRole('tab')).toHaveAttribute('aria-haspopup', 'menu');
+});
+
+test('Renders the tab with aria-expanded set to false by default', () => {
+  render(<OverflowTab />);
+
+  expect(screen.getByRole('tab')).toHaveAttribute('aria-expanded', 'false');
+});
+
+test('Renders the tab with aria-expanded set to true when the menu is opened', () => {
+  render(<OverflowTab />);
+
+  const overflowTab = screen.getByRole('tab');
+
+  userEvent.click(overflowTab);
+
+  expect(overflowTab).toHaveAttribute('aria-expanded', 'true');
+});
+
+test('Passes Popper popperMatchesTriggerWidth set to false', () => {
+  render(<OverflowTab />);
+
+  // This assertion relies on the structure of the Popper mock to verify the correct props are being sent to Popper
+  expect(screen.getByText('Popper matches trigger width: false')).toBeVisible();
+});
+
+test('Passes Popper an appendTo value of the presentation element', () => {
+  render(<OverflowTab />);
+
+  userEvent.click(screen.getByRole('tab'));
+
+  // This assertion relies on the structure of the Popper mock to verify the correct props are being sent to Popper
+  expect(screen.getByText('Append to class name: pf-c-tabs__item pf-m-overflow')).toBeVisible();
+});
+
+test('Does not render an overflowing tab as a selected menu item by default', () => {
+  render(
+    <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 0 }}>
+      <OverflowTab
+        overflowingTabs={[
+          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+        ]}
+      />
+    </TabsContext.Provider>
+  );
+
+  userEvent.click(screen.getByRole('tab'));
+
+  // This assertion relies on the structure of the Popper mock to verify the correct props are being sent to Popper
+  expect(screen.queryByText('Selected: true')).not.toBeInTheDocument();
+});
+
+test('Renders an overflowing tab as a selected menu item when its key matches the localActiveKey provided via context', () => {
+  render(
+    <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 1 }}>
+      <OverflowTab
+        overflowingTabs={[
+          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+        ]}
+      />
+    </TabsContext.Provider>
+  );
+
+  userEvent.click(screen.getByRole('tab'));
+
+  // This assertion relies on the structure of the Popper mock to verify the correct props are being sent to Popper
+  expect(screen.getByText('Selected: true')).toBeVisible();
+});
+
+test('Matches snapshot when expanded', () => {
+  const { asFragment } = render(
+    <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 1 }}>
+      <OverflowTab
+        overflowingTabs={[
+          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> },
+          { title: 'Tab two', eventKey: 2, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+        ]}
+      />
+    </TabsContext.Provider>
+  );
+
+  userEvent.click(screen.getByRole('tab'));
+
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot when expanded 1`] = `
+<DocumentFragment>
+  <div
+    data-testid="popper-mock"
+  >
+    <div
+      data-testid="trigger"
+    >
+      <li
+        class="pf-c-tabs__item pf-m-overflow pf-m-current"
+        role="presentation"
+      >
+        <button
+          aria-expanded="true"
+          aria-haspopup="menu"
+          class="pf-c-tabs__link pf-m-expanded"
+          role="tab"
+        >
+          <span
+            class="pf-c-tabs__item-text"
+          >
+            Tab one
+          </span>
+          <span
+            class="pf-c-tabs__link-toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 256 512"
+              width="1em"
+            >
+              <path
+                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+              />
+            </svg>
+          </span>
+        </button>
+      </li>
+    </div>
+    <div
+      data-testid="popper"
+    >
+      <div
+        data-testid="menu-mock"
+      >
+        <div
+          data-testid="menu-content-mock"
+        >
+          <ul
+            data-testid="menu-list-mock"
+          >
+            <li
+              id="1-menu-item-mock"
+            >
+              Tab one
+              <p>
+                Selected: true
+              </p>
+            </li>
+            <li
+              id="2-menu-item-mock"
+            >
+              Tab two
+              <p>
+                Selected: false
+              </p>
+            </li>
+          </ul>
+        </div>
+        <button>
+          Select
+        </button>
+      </div>
+    </div>
+    <p>
+      Popper matches trigger width: false
+    </p>
+    <p>
+      Append to class name: pf-c-tabs__item pf-m-overflow pf-m-current
+    </p>
+  </div>
+</DocumentFragment>
+`;

package/src/deprecated/components/index.ts

@@ -0,0 +1 @@
+export * from './';

package/src/deprecated/index.ts

@@ -0,0 +1 @@
+export * from './components';

package/src/next/components/index.ts

@@ -0,0 +1 @@
+export * from './';

package/src/next/index.ts

@@ -0,0 +1 @@
+export * from './components';