@patternfly/react-core 6.0.0-alpha.82 → 6.0.0-alpha.84

package/src/components/Page/__tests__/__snapshots__/PageBody.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-page__main-body"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;

package/src/components/Page/__tests__/__snapshots__/PageBreadcrumb.test.tsx.snap

@@ -5,7 +5,11 @@ exports[`page breadcrumb Verify basic render 1`] = `
   <section
     class="pf-v6-c-page__main-breadcrumb"
   >
-    test
+    <div
+      class="pf-v6-c-page__main-body"
+    >
+      test
+    </div>
   </section>
 </DocumentFragment>
 `;
@@ -15,7 +19,11 @@ exports[`page breadcrumb Verify bottom shadow 1`] = `
   <section
     class="pf-v6-c-page__main-breadcrumb pf-m-shadow-bottom"
   >
-    test
+    <div
+      class="pf-v6-c-page__main-body"
+    >
+      test
+    </div>
   </section>
 </DocumentFragment>
 `;
@@ -25,7 +33,11 @@ exports[`page breadcrumb Verify bottom sticky 1`] = `
   <section
     class="pf-v6-c-page__main-breadcrumb pf-m-sticky-bottom"
   >
-    test
+    <div
+      class="pf-v6-c-page__main-body"
+    >
+      test
+    </div>
   </section>
 </DocumentFragment>
 `;
@@ -50,7 +62,11 @@ exports[`page breadcrumb Verify overflow scroll 1`] = `
     class="pf-v6-c-page__main-breadcrumb pf-m-overflow-scroll"
     tabindex="0"
   >
-    test
+    <div
+      class="pf-v6-c-page__main-body"
+    >
+      test
+    </div>
   </section>
 </DocumentFragment>
 `;
@@ -60,7 +76,11 @@ exports[`page breadcrumb Verify top shadow 1`] = `
   <section
     class="pf-v6-c-page__main-breadcrumb pf-m-shadow-top"
   >
-    test
+    <div
+      class="pf-v6-c-page__main-body"
+    >
+      test
+    </div>
   </section>
 </DocumentFragment>
 `;
@@ -70,7 +90,11 @@ exports[`page breadcrumb Verify top sticky 1`] = `
   <section
     class="pf-v6-c-page__main-breadcrumb pf-m-sticky-top"
   >
-    test
+    <div
+      class="pf-v6-c-page__main-body"
+    >
+      test
+    </div>
   </section>
 </DocumentFragment>
 `;

package/src/components/Page/__tests__/__snapshots__/PageSection.test.tsx.snap

@@ -4,15 +4,23 @@ exports[`Check page main breadcrumb section against snapshot 1`] = `
 <DocumentFragment>
   <section
     class="pf-v6-c-page__main-breadcrumb"
-  />
+  >
+    <div
+      class="pf-v6-c-page__main-body"
+    />
+  </section>
 </DocumentFragment>
 `;
 
 exports[`Check page main nav section against snapshot 1`] = `
 <DocumentFragment>
   <section
-    class="pf-v6-c-page__main-nav"
-  />
+    class="pf-v6-c-page__main-section"
+  >
+    <div
+      class="pf-v6-c-page__main-body"
+    />
+  </section>
 </DocumentFragment>
 `;
 
@@ -20,7 +28,11 @@ exports[`Check page main subnav section against snapshot 1`] = `
 <DocumentFragment>
   <section
     class="pf-v6-c-page__main-subnav"
-  />
+  >
+    <div
+      class="pf-v6-c-page__main-body"
+    />
+  </section>
 </DocumentFragment>
 `;
 
@@ -28,7 +40,11 @@ exports[`Check page main tabs section against snapshot 1`] = `
 <DocumentFragment>
   <section
     class="pf-v6-c-page__main-tabs"
-  />
+  >
+    <div
+      class="pf-v6-c-page__main-body"
+    />
+  </section>
 </DocumentFragment>
 `;
 
@@ -48,7 +64,11 @@ exports[`Check page section with fill and no padding example against snapshot 1`
 <DocumentFragment>
   <section
     class="pf-v6-c-page__main-section pf-m-no-padding pf-m-fill"
-  />
+  >
+    <div
+      class="pf-v6-c-page__main-body"
+    />
+  </section>
 </DocumentFragment>
 `;
 
@@ -56,7 +76,11 @@ exports[`Check page section with fill example against snapshot 1`] = `
 <DocumentFragment>
   <section
     class="pf-v6-c-page__main-section pf-m-fill"
-  />
+  >
+    <div
+      class="pf-v6-c-page__main-body"
+    />
+  </section>
 </DocumentFragment>
 `;
 
@@ -76,7 +100,11 @@ exports[`Check page section with no fill example against snapshot 1`] = `
 <DocumentFragment>
   <section
     class="pf-v6-c-page__main-section pf-m-no-fill"
-  />
+  >
+    <div
+      class="pf-v6-c-page__main-body"
+    />
+  </section>
 </DocumentFragment>
 `;
 
@@ -84,7 +112,11 @@ exports[`Check page section with no padding example against snapshot 1`] = `
 <DocumentFragment>
   <section
     class="pf-v6-c-page__main-section pf-m-no-padding"
-  />
+  >
+    <div
+      class="pf-v6-c-page__main-body"
+    />
+  </section>
 </DocumentFragment>
 `;
 
@@ -93,7 +125,11 @@ exports[`Verify page section bottom shadow 1`] = `
   <section
     class="pf-v6-c-page__main-section pf-m-shadow-bottom"
   >
-    test
+    <div
+      class="pf-v6-c-page__main-body"
+    >
+      test
+    </div>
   </section>
 </DocumentFragment>
 `;
@@ -103,7 +139,11 @@ exports[`Verify page section bottom sticky 1`] = `
   <section
     class="pf-v6-c-page__main-section pf-m-sticky-bottom"
   >
-    test
+    <div
+      class="pf-v6-c-page__main-body"
+    >
+      test
+    </div>
   </section>
 </DocumentFragment>
 `;
@@ -114,7 +154,11 @@ exports[`Verify page section overflow scroll 1`] = `
     class="pf-v6-c-page__main-section pf-m-overflow-scroll"
     tabindex="0"
   >
-    test
+    <div
+      class="pf-v6-c-page__main-body"
+    >
+      test
+    </div>
   </section>
 </DocumentFragment>
 `;
@@ -124,7 +168,11 @@ exports[`Verify page section top shadow 1`] = `
   <section
     class="pf-v6-c-page__main-section pf-m-shadow-top"
   >
-    test
+    <div
+      class="pf-v6-c-page__main-body"
+    >
+      test
+    </div>
   </section>
 </DocumentFragment>
 `;
@@ -134,7 +182,11 @@ exports[`Verify page section top sticky 1`] = `
   <section
     class="pf-v6-c-page__main-section pf-m-sticky-top"
   >
-    test
+    <div
+      class="pf-v6-c-page__main-body"
+    >
+      test
+    </div>
   </section>
 </DocumentFragment>
 `;

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

@@ -3,16 +3,7 @@ id: Page
 section: components
 cssPrefix: pf-v5-c-page
 propComponents:
-  [
-    'Page',
-    'PageSidebar',
-    'PageSidebarBody',
-    'PageSection',
-    'PageGroup',
-    'PageBreadcrumb',
-    'PageNavigation',
-    'PageToggleButton'
-  ]
+  ['Page', 'PageSidebar', 'PageSidebarBody', 'PageSection', 'PageGroup', 'PageBreadcrumb', 'PageToggleButton']
 ---
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
@@ -107,7 +98,7 @@ This example shows all types of page sections.
 
 To group page content sections, add 1 or more `<PageGroup>` components to a `<Page>`.
 
-The following example adds a group containing `<PageNavigation>`, `<PageBreadcrumb>`, and `<PageSection>` components.
+The following example adds a group containing `<PageBreadcrumb>` and `<PageSection>` components.
 
 To add additional components and information to a group, you may use the following properties:
 

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

@@ -11,7 +11,6 @@ import {
   PageSection,
   PageGroup,
   PageBreadcrumb,
-  PageNavigation,
   PageToggleButton,
   Breadcrumb,
   BreadcrumbItem,
@@ -70,27 +69,25 @@ export const PageGroupSection: React.FunctionComponent = () => {
   return (
     <Page masthead={masthead} sidebar={sidebar}>
       <PageGroup>
-        <PageNavigation>
-          <Nav aria-label="Group section navigation" variant="horizontal-subnav">
-            <NavList>
-              <NavItem href="#" itemId={0} isActive>
-                System panel
-              </NavItem>
-              <NavItem href="#" itemId={1}>
-                Policy
-              </NavItem>
-              <NavItem href="#" itemId={2}>
-                Authentication
-              </NavItem>
-              <NavItem href="#" itemId={3}>
-                Network services
-              </NavItem>
-              <NavItem href="#" itemId={4}>
-                Server
-              </NavItem>
-            </NavList>
-          </Nav>
-        </PageNavigation>
+        <Nav aria-label="Group section navigation" variant="horizontal-subnav">
+          <NavList>
+            <NavItem href="#" itemId={0} isActive>
+              System panel
+            </NavItem>
+            <NavItem href="#" itemId={1}>
+              Policy
+            </NavItem>
+            <NavItem href="#" itemId={2}>
+              Authentication
+            </NavItem>
+            <NavItem href="#" itemId={3}>
+              Network services
+            </NavItem>
+            <NavItem href="#" itemId={4}>
+              Server
+            </NavItem>
+          </NavList>
+        </Nav>
         <PageBreadcrumb>
           <Breadcrumb>
             <BreadcrumbItem>Section home</BreadcrumbItem>

package/src/components/Page/index.ts

@@ -1,9 +1,9 @@
 export * from './Page';
+export * from './PageBody';
 export * from './PageBreadcrumb';
 export * from './PageGroup';
 export * from './PageSidebar';
 export * from './PageSidebarBody';
 export * from './PageSection';
-export * from './PageNavigation';
 export * from './PageToggleButton';
 export * from './PageContext';

package/src/components/Pagination/Pagination.tsx

@@ -169,6 +169,8 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAPr
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
   ouiaSafe?: boolean;
+  /** @beta The container to append the pagination options menu to. */
+  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline';
 }
 
 const handleInputWidth = (lastPage: number, node: HTMLDivElement) => {
@@ -229,6 +231,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
   ouiaSafe = true,
   usePageInsets,
   inset,
+  menuAppendTo,
   ...props
 }: PaginationProps) => {
   const paginationRef = React.useRef<HTMLDivElement>(null);
@@ -336,6 +339,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
           toggleTemplate={toggleTemplate}
           isDisabled={isDisabled}
           containerRef={containerRef}
+          appendTo={menuAppendTo}
         />
       )}
       <Navigation

package/src/components/Pagination/PaginationOptionsMenu.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Pagination/pagination';
 import { Menu, MenuContent, MenuList, MenuItem } from '../Menu';
 import { MenuToggle } from '../MenuToggle';
 import { Popper } from '../../helpers/Popper/Popper';
@@ -52,7 +53,10 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivEleme
   onPerPageSelect?: OnPerPageSelect;
   /** Label for the English word "of". */
   ofWord?: string;
+  /** React ref for the container to append the options menu to. This is a static ref provided by the main pagination component. */
   containerRef?: React.RefObject<HTMLDivElement>;
+  /** @beta The container to append the pagination options menu to. Overrides the containerRef prop. */
+  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
 }
 
 export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMenuProps> = ({
@@ -76,7 +80,8 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   itemsTitle = '',
   toggleTemplate,
   onPerPageSelect = () => null as any,
-  containerRef
+  containerRef,
+  appendTo
 }: PaginationOptionsMenuProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
@@ -166,38 +171,40 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
     ));
 
   const toggle = (
-    <MenuToggle
-      ref={toggleRef}
-      onClick={onToggle}
-      {...(optionsToggleAriaLabel && { 'aria-label': optionsToggleAriaLabel })}
-      isDisabled={isDisabled || (itemCount && itemCount <= 0)}
-      isExpanded={isOpen}
-      {...(widgetId && { id: `${widgetId}-toggle` })}
-      variant="plainText"
-      aria-haspopup="listbox"
-    >
-      {toggleTemplate &&
-        typeof toggleTemplate === 'string' &&
-        fillTemplate(toggleTemplate, { firstIndex, lastIndex, ofWord, itemCount, itemsTitle })}
-      {toggleTemplate &&
-        typeof toggleTemplate !== 'string' &&
-        (toggleTemplate as (props: PaginationToggleTemplateProps) => React.ReactElement)({
-          firstIndex,
-          lastIndex,
-          ofWord,
-          itemCount,
-          itemsTitle
-        })}
-      {!toggleTemplate && (
-        <ToggleTemplate
-          firstIndex={firstIndex}
-          lastIndex={lastIndex}
-          ofWord={ofWord}
-          itemCount={itemCount}
-          itemsTitle={itemsTitle}
-        />
-      )}
-    </MenuToggle>
+    <div className={css(styles.paginationPageMenu)}>
+      <MenuToggle
+        ref={toggleRef}
+        onClick={onToggle}
+        {...(optionsToggleAriaLabel && { 'aria-label': optionsToggleAriaLabel })}
+        isDisabled={isDisabled || (itemCount && itemCount <= 0)}
+        isExpanded={isOpen}
+        {...(widgetId && { id: `${widgetId}-toggle` })}
+        variant="plainText"
+        aria-haspopup="listbox"
+      >
+        {toggleTemplate &&
+          typeof toggleTemplate === 'string' &&
+          fillTemplate(toggleTemplate, { firstIndex, lastIndex, ofWord, itemCount, itemsTitle })}
+        {toggleTemplate &&
+          typeof toggleTemplate !== 'string' &&
+          (toggleTemplate as (props: PaginationToggleTemplateProps) => React.ReactElement)({
+            firstIndex,
+            lastIndex,
+            ofWord,
+            itemCount,
+            itemsTitle
+          })}
+        {!toggleTemplate && (
+          <ToggleTemplate
+            firstIndex={firstIndex}
+            lastIndex={lastIndex}
+            ofWord={ofWord}
+            itemCount={itemCount}
+            itemsTitle={itemsTitle}
+          />
+        )}
+      </MenuToggle>
+    </div>
   );
 
   const menu = (
@@ -208,6 +215,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
     </Menu>
   );
 
+  const containerToAppendTo = appendTo ?? (containerRef?.current || undefined);
   return (
     <Popper
       trigger={toggle}
@@ -216,7 +224,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
       popperRef={menuRef}
       isVisible={isOpen}
       direction={dropDirection}
-      appendTo={containerRef?.current || undefined}
+      appendTo={containerToAppendTo}
       minWidth={minWidth !== undefined ? minWidth : 'revert'}
     />
   );

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

@@ -2,49 +2,53 @@
 
 exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
-  <button
-    aria-expanded="false"
-    aria-haspopup="listbox"
-    class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-    data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-1"
-    data-ouia-component-type="PF6/MenuToggle"
-    data-ouia-safe="true"
-    id="''-toggle"
-    type="button"
+  <div
+    class="pf-v6-c-pagination__page-menu"
   >
-    <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"
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-1"
+      data-ouia-component-type="PF6/MenuToggle"
+      data-ouia-safe="true"
+      id="''-toggle"
+      type="button"
     >
       <span
-        class="pf-v6-c-menu-toggle__toggle-icon"
+        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"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 320 512"
-          width="1em"
+        <span
+          class="pf-v6-c-menu-toggle__toggle-icon"
         >
-          <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>
+          <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>
       </span>
-    </span>
-  </button>
+    </button>
+  </div>
 </DocumentFragment>
 `;