@patternfly/react-core 6.0.0-alpha.60 → 6.0.0-alpha.62

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

@@ -22,7 +22,7 @@ const props = {
 
 describe('Page', () => {
   test('Check page vertical layout example against snapshot', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = (
       <PageSidebar isSidebarOpen>
         <PageSidebarBody>Navigation</PageSidebarBody>
@@ -30,7 +30,7 @@ describe('Page', () => {
     );
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar}>
         <PageSection variant="default">Section with default background</PageSection>
       </Page>
     );
@@ -39,7 +39,7 @@ describe('Page', () => {
   });
 
   test('Check dark page against snapshot', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = (
       <PageSidebar isSidebarOpen>
         <PageSidebarBody>Navigation</PageSidebarBody>
@@ -47,7 +47,7 @@ describe('Page', () => {
     );
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar}>
         <PageSection variant="default">Section with default background</PageSection>
       </Page>
     );
@@ -56,11 +56,11 @@ describe('Page', () => {
   });
 
   test('Check page horizontal layout example against snapshot', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar}>
         <PageSection variant="default">Section with default background</PageSection>
       </Page>
     );
@@ -69,7 +69,7 @@ describe('Page', () => {
   });
 
   test('Check page to verify breadcrumb is created', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = () => (
       <Breadcrumb>
@@ -83,7 +83,7 @@ describe('Page', () => {
     );
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar} breadcrumb={<PageBreadcrumb />}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar} breadcrumb={<PageBreadcrumb />}>
         <PageSection variant="default">Section with default background</PageSection>
       </Page>
     );
@@ -93,7 +93,7 @@ describe('Page', () => {
   });
 
   test('Verify sticky top breadcrumb on all height breakpoints', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = () => (
       <Breadcrumb>
@@ -109,7 +109,7 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page
         {...props}
-        header={Header}
+        masthead={masthead}
         sidebar={Sidebar}
         breadcrumb={<PageBreadcrumb />}
         breadcrumbProps={{ stickyOnBreakpoint: { sm: 'top', md: 'top', lg: 'top', xl: 'top', '2xl': 'top' } }}
@@ -123,7 +123,7 @@ describe('Page', () => {
   });
 
   test('Verify sticky bottom breadcrumb on all height breakpoints', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = () => (
       <Breadcrumb>
@@ -139,7 +139,7 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page
         {...props}
-        header={Header}
+        masthead={masthead}
         sidebar={Sidebar}
         breadcrumb={<PageBreadcrumb />}
         breadcrumbProps={{
@@ -155,11 +155,11 @@ describe('Page', () => {
   });
 
   test('Check page to verify breadcrumb is created - PageBreadcrumb syntax', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar}>
         <PageBreadcrumb>
           <Breadcrumb>
             <BreadcrumbItem>Section Home</BreadcrumbItem>
@@ -179,11 +179,11 @@ describe('Page', () => {
   });
 
   test('Verify sticky top breadcrumb on all height breakpoints - PageBreadcrumb syntax', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar}>
         <PageBreadcrumb stickyOnBreakpoint={{ sm: 'top', md: 'top', lg: 'top', xl: 'top', '2xl': 'top' }}>
           <Breadcrumb>
             <BreadcrumbItem>Section Home</BreadcrumbItem>
@@ -203,11 +203,11 @@ describe('Page', () => {
   });
 
   test('Sticky bottom breadcrumb on all height breakpoints - PageBreadcrumb syntax', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar}>
         <PageBreadcrumb
           stickyOnBreakpoint={{ sm: 'bottom', md: 'bottom', lg: 'bottom', xl: 'bottom', '2xl': 'bottom' }}
         >
@@ -229,11 +229,11 @@ describe('Page', () => {
   });
 
   test('Check page to verify nav is created - PageNavigation syntax', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar}>
         <PageNavigation>
           <Nav aria-label="Nav" variant="horizontal-subnav">
             <NavList>
@@ -256,11 +256,11 @@ describe('Page', () => {
   });
 
   test('Check page to verify grouped nav and breadcrumb - new components syntax', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar}>
         <PageGroup stickyOnBreakpoint={{ default: 'bottom' }}>
           <PageBreadcrumb>
             <Breadcrumb>
@@ -295,7 +295,7 @@ describe('Page', () => {
   });
 
   test('Check page to verify grouped nav and breadcrumb - old / props syntax', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
     const crumb = (
       <PageBreadcrumb>
@@ -326,7 +326,7 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page
         {...props}
-        header={Header}
+        masthead={masthead}
         sidebar={Sidebar}
         breadcrumb={crumb}
         horizontalSubnav={nav}
@@ -349,7 +349,7 @@ describe('Page', () => {
   });
 
   test('Check page to verify skip to content points to main content region', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = (
       <Breadcrumb>
@@ -367,7 +367,7 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page
         {...props}
-        header={Header}
+        masthead={masthead}
         sidebar={Sidebar}
         breadcrumb={PageBreadcrumb}
         skipToContent={PageSkipToContent}

package/src/components/Page/examples/Page.md

@@ -24,7 +24,7 @@ import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist
 
 A page will typically contain the following components:
 
-- A `<Page>` with a `header` that often contains a [masthead](/components/masthead)
+- A `<Page>` with a `masthead` prop that often contains a [masthead](/components/masthead) component
   - Mastheads contain the `<PageToggleButton>`, a `<MastheadMain>` that contains a `<MastheadBrand>`, and the page's header toolbar within `<MastheadContent>`.
 - 1 or more `<PageSidebarBody>` components inside `<PageSidebar>` for vertical navigation or other sidebar content
 - 1 or more `<PageSection>` components

package/src/components/Page/examples/PageCenteredSection.tsx

@@ -35,7 +35,7 @@ export const PageCenteredSection: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton
@@ -64,7 +64,7 @@ export const PageCenteredSection: React.FunctionComponent = () => {
   );
 
   return (
-    <Page header={header} sidebar={sidebar}>
+    <Page masthead={masthead} sidebar={sidebar}>
       <PageSection isWidthLimited isCenterAligned>
         <Card>
           <CardBody>

package/src/components/Page/examples/PageGroupSection.tsx

@@ -39,7 +39,7 @@ export const PageGroupSection: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton
@@ -68,7 +68,7 @@ export const PageGroupSection: React.FunctionComponent = () => {
   );
 
   return (
-    <Page header={header} sidebar={sidebar}>
+    <Page masthead={masthead} sidebar={sidebar}>
       <PageGroup>
         <PageNavigation>
           <Nav aria-label="Group section navigation" variant="horizontal-subnav">

package/src/components/Page/examples/PageHorizontalNav.tsx

@@ -21,7 +21,7 @@ export const PageHorizontalNav: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const header = (
+  const masthead = (
     <Masthead inset={{ default: 'insetXs' }}>
       <MastheadMain>
         <MastheadBrand href="https://patternfly.org" target="_blank">
@@ -33,7 +33,7 @@ export const PageHorizontalNav: React.FunctionComponent = () => {
   );
 
   return (
-    <Page header={header}>
+    <Page masthead={masthead}>
       <PageSection>Section 1</PageSection>
       <PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
       <PageSection>Section 3</PageSection>

package/src/components/Page/examples/PageMainSectionPadding.tsx

@@ -31,7 +31,7 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton
@@ -60,7 +60,7 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
   );
 
   return (
-    <Page header={header} sidebar={sidebar}>
+    <Page masthead={masthead} sidebar={sidebar}>
       <PageSection>Section with default padding</PageSection>
       <PageSection padding={{ default: 'noPadding' }}>Section with no padding</PageSection>
       <PageSection padding={{ default: 'noPadding', md: 'padding' }}>Section with padding on medium</PageSection>

package/src/components/Page/examples/PageMultipleSidebarBody.tsx

@@ -31,7 +31,7 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton
@@ -64,7 +64,7 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
   );
 
   return (
-    <Page header={header} sidebar={sidebar}>
+    <Page masthead={masthead} sidebar={sidebar}>
       <PageSection>Section 1</PageSection>
       <PageSection>Section 2</PageSection>
       <PageSection>Section 3</PageSection>

package/src/components/Page/examples/PageUncontrolledNav.tsx

@@ -25,7 +25,7 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton variant="plain" aria-label="Global navigation" id="uncontrolled-nav-toggle">
@@ -48,7 +48,7 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
   );
 
   return (
-    <Page isManagedSidebar header={header} sidebar={sidebar}>
+    <Page isManagedSidebar masthead={masthead} sidebar={sidebar}>
       <PageSection>Section 1</PageSection>
       <PageSection>Section 2</PageSection>
       <PageSection>Section 3</PageSection>

package/src/components/Page/examples/PageVerticalNav.tsx

@@ -31,7 +31,7 @@ export const PageVerticalNav: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton
@@ -60,7 +60,7 @@ export const PageVerticalNav: React.FunctionComponent = () => {
   );
 
   return (
-    <Page header={header} sidebar={sidebar}>
+    <Page masthead={masthead} sidebar={sidebar}>
       <PageSection>Section 1</PageSection>
       <PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
       <PageSection>Section 3</PageSection>

package/src/components/Page/examples/PageWithOrWithoutFill.tsx

@@ -31,7 +31,7 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton
@@ -60,7 +60,7 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
   );
 
   return (
-    <Page header={header} sidebar={sidebar}>
+    <Page masthead={masthead} sidebar={sidebar}>
       <PageSection>A default page section</PageSection>
       <PageSection isFilled={true}>This section fills the available space.</PageSection>
       <PageSection isFilled={false}>

package/src/components/Pagination/Navigation.tsx

@@ -29,7 +29,7 @@ export interface NavigationProps extends React.HTMLProps<HTMLElement> {
   /** Label for the English word "of". */
   ofWord?: string;
   /** The number of the current page. */
-  page: string | number;
+  page: number;
   /** The title of a page displayed beside the page number. */
   pagesTitle?: string;
   /** The title of a page displayed beside the page number (the plural form). */
@@ -55,13 +55,13 @@ export interface NavigationProps extends React.HTMLProps<HTMLElement> {
   /** Function called when user clicks to navigate to previous page. */
   onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
   /** Function called when user inputs page number. */
-  onPageInput?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+  onPageInput?: (event: React.KeyboardEvent<HTMLInputElement>, page: number) => void;
   /** Function called when page is changed. */
   onSetPage: OnSetPage;
 }
 
 export interface NavigationState {
-  userInputPage?: React.ReactText;
+  userInputPage?: number | string;
 }
 
 class Navigation extends React.Component<NavigationProps, NavigationState> {
@@ -93,7 +93,7 @@ class Navigation extends React.Component<NavigationProps, NavigationState> {
     onPageInput: () => undefined as any
   };
 
-  private static parseInteger(input: React.ReactText, lastPage: number): number {
+  private static parseInteger(input: number | string, lastPage: number): number {
     // eslint-disable-next-line radix
     let inputPage = Number.parseInt(input as string, 10);
     if (!Number.isNaN(inputPage)) {
@@ -105,14 +105,14 @@ class Navigation extends React.Component<NavigationProps, NavigationState> {
 
   private onChange(event: React.FormEvent<HTMLInputElement>, lastPage: number): void {
     const inputPage = Navigation.parseInteger(event.currentTarget.value, lastPage);
-    this.setState({ userInputPage: Number.isNaN(inputPage as number) ? event.currentTarget.value : inputPage });
+    this.setState({ userInputPage: Number.isNaN(inputPage) ? event.currentTarget.value : inputPage });
   }
 
   private onKeyDown(
     event: React.KeyboardEvent<HTMLInputElement>,
-    page: number | string,
+    page: number,
     lastPage: number,
-    onPageInput: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void
+    onPageInput: (event: React.KeyboardEvent<HTMLInputElement>, page: number) => void
   ): void {
     const allowedKeys = [
       'Tab',
@@ -126,9 +126,9 @@ class Navigation extends React.Component<NavigationProps, NavigationState> {
       'ArrowDown'
     ];
     if (event.key === KeyTypes.Enter) {
-      const inputPage = Navigation.parseInteger(this.state.userInputPage, lastPage) as number;
-      onPageInput(event, Number.isNaN(inputPage) ? (page as number) : inputPage);
-      this.handleNewPage(event, Number.isNaN(inputPage) ? (page as number) : inputPage);
+      const inputPage = Navigation.parseInteger(this.state.userInputPage, lastPage);
+      onPageInput(event, Number.isNaN(inputPage) ? page : inputPage);
+      this.handleNewPage(event, Number.isNaN(inputPage) ? page : inputPage);
     } else if (!/^\d*$/.test(event.key) && !allowedKeys.includes(event.key)) {
       event.preventDefault();
     }
@@ -206,7 +206,7 @@ class Navigation extends React.Component<NavigationProps, NavigationState> {
             isDisabled={isDisabled || page === firstPage || page === 0}
             data-action="previous"
             onClick={(event) => {
-              const newPage = (page as number) - 1 >= 1 ? (page as number) - 1 : 1;
+              const newPage = page - 1 >= 1 ? page - 1 : 1;
               onPreviousClick(event, newPage);
               this.handleNewPage(event, newPage);
               this.setState({ userInputPage: newPage });
@@ -244,7 +244,7 @@ class Navigation extends React.Component<NavigationProps, NavigationState> {
             aria-label={toNextPageAriaLabel}
             data-action="next"
             onClick={(event) => {
-              const newPage = (page as number) + 1 <= lastPage ? (page as number) + 1 : lastPage;
+              const newPage = page + 1 <= lastPage ? page + 1 : lastPage;
               onNextClick(event, newPage);
               this.handleNewPage(event, newPage);
               this.setState({ userInputPage: newPage });

package/src/components/Pagination/Pagination.tsx

@@ -148,7 +148,7 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAPr
   /** Function called when user clicks on navigate to next page. */
   onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
   /** Function called when user inputs page number. */
-  onPageInput?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+  onPageInput?: (event: React.KeyboardEvent<HTMLInputElement>, page: number) => void;
   /** Function called when user selects number of items per page. */
   onPerPageSelect?: OnPerPageSelect;
   /** Function called when user clicks on navigate to previous page. */
@@ -232,6 +232,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
   ...props
 }: PaginationProps) => {
   const paginationRef = React.useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const getLastPage = () =>
     // when itemCount is not known let's set lastPage as page+1 as we don't know the total count
@@ -334,6 +335,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
           widgetId={`${widgetId}-${variant}`}
           toggleTemplate={toggleTemplate}
           isDisabled={isDisabled}
+          containerRef={containerRef}
         />
       )}
       <Navigation

package/src/components/Pagination/PaginationOptionsMenu.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import styles from '@patternfly/react-styles/css/components/Pagination/pagination';
 import { css } from '@patternfly/react-styles';
 import { Menu, MenuContent, MenuList, MenuItem } from '../Menu';
 import { MenuToggle } from '../MenuToggle';
@@ -53,6 +52,7 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivEleme
   onPerPageSelect?: OnPerPageSelect;
   /** Label for the English word "of". */
   ofWord?: string;
+  containerRef?: React.RefObject<HTMLDivElement>;
 }
 
 export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMenuProps> = ({
@@ -75,12 +75,12 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   isLastFullPageShown = false,
   itemsTitle = 'items',
   toggleTemplate,
-  onPerPageSelect = () => null as any
+  onPerPageSelect = () => null as any,
+  containerRef
 }: PaginationOptionsMenuProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
   const menuRef = React.useRef<HTMLDivElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const onToggle = () => {
     setIsOpen((prevState) => !prevState);
@@ -209,18 +209,16 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   );
 
   return (
-    <div className={css(styles.paginationPageMenu)} ref={containerRef}>
-      <Popper
-        trigger={toggle}
-        triggerRef={toggleRef}
-        popper={menu}
-        popperRef={menuRef}
-        isVisible={isOpen}
-        direction={dropDirection}
-        appendTo={containerRef.current || undefined}
-        minWidth={minWidth !== undefined ? minWidth : 'revert'}
-      />
-    </div>
+    <Popper
+      trigger={toggle}
+      triggerRef={toggleRef}
+      popper={menu}
+      popperRef={menuRef}
+      isVisible={isOpen}
+      direction={dropDirection}
+      appendTo={containerRef?.current || undefined}
+      minWidth={minWidth !== undefined ? minWidth : 'revert'}
+    />
   );
 };
 

package/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap

@@ -2,50 +2,46 @@
 
 exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
-  <div
-    class="pf-v6-c-pagination__page-menu"
+  <button
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
+    id="''-toggle"
+    type="button"
   >
-    <button
-      aria-expanded="false"
-      aria-haspopup="listbox"
-      class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-      id="''-toggle"
-      type="button"
+    <span
+      class="pf-v6-c-menu-toggle__text"
+    >
+      <b>
+        0 - 0
+      </b>
+      Custom toggle template of
+      <b>
+        0
+      </b>
+       'items'
+    </span>
+    <span
+      class="pf-v6-c-menu-toggle__controls"
     >
       <span
-        class="pf-v6-c-menu-toggle__text"
-      >
-        <b>
-          0 - 0
-        </b>
-        Custom toggle template of
-        <b>
-          0
-        </b>
-         'items'
-      </span>
-      <span
-        class="pf-v6-c-menu-toggle__controls"
+        class="pf-v6-c-menu-toggle__toggle-icon"
       >
-        <span
-          class="pf-v6-c-menu-toggle__toggle-icon"
+        <svg
+          aria-hidden="true"
+          class="pf-v6-svg"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          viewBox="0 0 320 512"
+          width="1em"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 320 512"
-            width="1em"
-          >
-            <path
-              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
       </span>
-    </button>
-  </div>
+    </span>
+  </button>
 </DocumentFragment>
 `;

package/src/components/Pagination/__tests__/PaginationOptionsMenu.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { PaginationOptionsMenu } from '../PaginationOptionsMenu';
 import { render, screen } from '@testing-library/react';
-import styles from '@patternfly/react-styles/css/components/Pagination/pagination';
 
 jest.mock('../../../helpers/Popper/Popper');
 
@@ -14,10 +13,3 @@ test('renders pagination options menu', () => {
 
   expect(screen.getByTestId('options-menu').children[0]).toBeVisible();
 });
-
-test(`renders with class ${styles.paginationPageMenu} by default`, () => {
-  render(<PaginationOptionsMenu toggleTemplate="Test" />);
-
-  // Mocked Popper is rendered with data-testid="mock-wrapper"
-  expect(screen.getByTestId('mock-wrapper').parentElement).toHaveClass(styles.paginationPageMenu);
-});