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

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/dist/esm/components/Page/PageNavigation.d.ts

@@ -1,31 +0,0 @@
-import * as React from 'react';
-export interface PageNavigationProps extends React.HTMLProps<HTMLDivElement> {
-    /** Additional classes to apply to the PageNavigation */
-    className?: string;
-    /** Content rendered inside of the PageNavigation */
-    children?: React.ReactNode;
-    /** Limits the width of the PageNavigation */
-    isWidthLimited?: boolean;
-    /** Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints */
-    stickyOnBreakpoint?: {
-        default?: 'top' | 'bottom';
-        sm?: 'top' | 'bottom';
-        md?: 'top' | 'bottom';
-        lg?: 'top' | 'bottom';
-        xl?: 'top' | 'bottom';
-        '2xl'?: 'top' | 'bottom';
-    };
-    /** Flag indicating if PageNavigation should have a shadow at the top */
-    hasShadowTop?: boolean;
-    /** Flag indicating if PageNavigation should have a shadow at the bottom */
-    hasShadowBottom?: boolean;
-    /** Flag indicating if the PageNavigation has a scrolling overflow */
-    hasOverflowScroll?: boolean;
-    /** Adds an accessible name to the page navigation when the hasOverflowScroll prop is set to true. */
-    'aria-label'?: string;
-}
-export declare const PageNavigation: {
-    ({ className, children, isWidthLimited, stickyOnBreakpoint, hasShadowTop, hasShadowBottom, hasOverflowScroll, "aria-label": ariaLabel, ...props }: PageNavigationProps): React.JSX.Element;
-    displayName: string;
-};
-//# sourceMappingURL=PageNavigation.d.ts.map

package/dist/esm/components/Page/PageNavigation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageNavigation.d.ts","sourceRoot":"","sources":["../../../../src/components/Page/PageNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAC1E,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,6CAA6C;IAC7C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sGAAsG;IACtG,kBAAkB,CAAC,EAAE;QACnB,OAAO,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;QAC3B,EAAE,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;QACtB,EAAE,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;QACtB,EAAE,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;QACtB,EAAE,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;QACtB,KAAK,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;KAC1B,CAAC;IACF,wEAAwE;IACxE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,2EAA2E;IAC3E,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,qGAAqG;IACrG,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,cAAc;uJAUxB,mBAAmB;;CA4BrB,CAAC"}

package/dist/esm/components/Page/PageNavigation.js

@@ -1,21 +0,0 @@
-import { __rest } from "tslib";
-import * as React from 'react';
-import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/Page/page.mjs';
-import { formatBreakpointMods } from '../../helpers/util';
-import { PageContext } from './PageContext';
-export const PageNavigation = (_a) => {
-    var { className = '', children, isWidthLimited, stickyOnBreakpoint, hasShadowTop = false, hasShadowBottom = false, hasOverflowScroll = false, 'aria-label': ariaLabel } = _a, props = __rest(_a, ["className", "children", "isWidthLimited", "stickyOnBreakpoint", "hasShadowTop", "hasShadowBottom", "hasOverflowScroll", 'aria-label']);
-    const { height, getVerticalBreakpoint } = React.useContext(PageContext);
-    React.useEffect(() => {
-        if (hasOverflowScroll && !ariaLabel) {
-            /* eslint-disable no-console */
-            console.warn('PageNavigation: An accessible aria-label is required when hasOverflowScroll is set to true.');
-        }
-    }, [hasOverflowScroll, ariaLabel]);
-    return (React.createElement("div", Object.assign({ className: css(styles.pageMainNav, formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true), isWidthLimited && styles.modifiers.limitWidth, hasShadowTop && styles.modifiers.shadowTop, hasShadowBottom && styles.modifiers.shadowBottom, hasOverflowScroll && styles.modifiers.overflowScroll, className) }, (hasOverflowScroll && { tabIndex: 0, role: 'region', 'aria-label': ariaLabel }), props),
-        isWidthLimited && React.createElement("div", { className: css(styles.pageMainBody) }, children),
-        !isWidthLimited && children));
-};
-PageNavigation.displayName = 'PageNavigation';
-//# sourceMappingURL=PageNavigation.js.map

package/dist/esm/components/Page/PageNavigation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageNavigation.js","sourceRoot":"","sources":["../../../../src/components/Page/PageNavigation.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,MAAM,8DAA0D;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AA4B5C,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAUT,EAAE,EAAE;QAVK,EAC7B,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,cAAc,EACd,kBAAkB,EAClB,YAAY,GAAG,KAAK,EACpB,eAAe,GAAG,KAAK,EACvB,iBAAiB,GAAG,KAAK,EACzB,YAAY,EAAE,SAAS,OAEH,EADjB,KAAK,cATqB,uIAU9B,CADS;IAER,MAAM,EAAE,MAAM,EAAE,qBAAqB,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;IAExE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,iBAAiB,IAAI,CAAC,SAAS,EAAE,CAAC;YACpC,+BAA+B;YAC/B,OAAO,CAAC,IAAI,CAAC,6FAA6F,CAAC,CAAC;QAC9G,CAAC;IACH,CAAC,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,CAAC;IAEnC,OAAO,CACL,2CACE,SAAS,EAAE,GAAG,CACZ,MAAM,CAAC,WAAW,EAClB,oBAAoB,CAAC,kBAAkB,EAAE,MAAM,EAAE,SAAS,EAAE,qBAAqB,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,EAChG,cAAc,IAAI,MAAM,CAAC,SAAS,CAAC,UAAU,EAC7C,YAAY,IAAI,MAAM,CAAC,SAAS,CAAC,SAAS,EAC1C,eAAe,IAAI,MAAM,CAAC,SAAS,CAAC,YAAY,EAChD,iBAAiB,IAAI,MAAM,CAAC,SAAS,CAAC,cAAc,EACpD,SAAS,CACV,IACG,CAAC,iBAAiB,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,EAC/E,KAAK;QAER,cAAc,IAAI,6BAAK,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,YAAY,CAAC,IAAG,QAAQ,CAAO;QAC5E,CAAC,cAAc,IAAI,QAAQ,CACxB,CACP,CAAC;AACJ,CAAC,CAAC;AACF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC"}

package/dist/js/components/Page/PageNavigation.d.ts

@@ -1,31 +0,0 @@
-import * as React from 'react';
-export interface PageNavigationProps extends React.HTMLProps<HTMLDivElement> {
-    /** Additional classes to apply to the PageNavigation */
-    className?: string;
-    /** Content rendered inside of the PageNavigation */
-    children?: React.ReactNode;
-    /** Limits the width of the PageNavigation */
-    isWidthLimited?: boolean;
-    /** Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints */
-    stickyOnBreakpoint?: {
-        default?: 'top' | 'bottom';
-        sm?: 'top' | 'bottom';
-        md?: 'top' | 'bottom';
-        lg?: 'top' | 'bottom';
-        xl?: 'top' | 'bottom';
-        '2xl'?: 'top' | 'bottom';
-    };
-    /** Flag indicating if PageNavigation should have a shadow at the top */
-    hasShadowTop?: boolean;
-    /** Flag indicating if PageNavigation should have a shadow at the bottom */
-    hasShadowBottom?: boolean;
-    /** Flag indicating if the PageNavigation has a scrolling overflow */
-    hasOverflowScroll?: boolean;
-    /** Adds an accessible name to the page navigation when the hasOverflowScroll prop is set to true. */
-    'aria-label'?: string;
-}
-export declare const PageNavigation: {
-    ({ className, children, isWidthLimited, stickyOnBreakpoint, hasShadowTop, hasShadowBottom, hasOverflowScroll, "aria-label": ariaLabel, ...props }: PageNavigationProps): React.JSX.Element;
-    displayName: string;
-};
-//# sourceMappingURL=PageNavigation.d.ts.map

package/dist/js/components/Page/PageNavigation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageNavigation.d.ts","sourceRoot":"","sources":["../../../../src/components/Page/PageNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAC1E,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,6CAA6C;IAC7C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sGAAsG;IACtG,kBAAkB,CAAC,EAAE;QACnB,OAAO,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;QAC3B,EAAE,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;QACtB,EAAE,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;QACtB,EAAE,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;QACtB,EAAE,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;QACtB,KAAK,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;KAC1B,CAAC;IACF,wEAAwE;IACxE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,2EAA2E;IAC3E,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,qGAAqG;IACrG,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,cAAc;uJAUxB,mBAAmB;;CA4BrB,CAAC"}

package/dist/js/components/Page/PageNavigation.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageNavigation = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_styles_1 = require("@patternfly/react-styles");
-const page_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/components/Page/page"));
-const util_1 = require("../../helpers/util");
-const PageContext_1 = require("./PageContext");
-const PageNavigation = (_a) => {
-    var { className = '', children, isWidthLimited, stickyOnBreakpoint, hasShadowTop = false, hasShadowBottom = false, hasOverflowScroll = false, 'aria-label': ariaLabel } = _a, props = tslib_1.__rest(_a, ["className", "children", "isWidthLimited", "stickyOnBreakpoint", "hasShadowTop", "hasShadowBottom", "hasOverflowScroll", 'aria-label']);
-    const { height, getVerticalBreakpoint } = React.useContext(PageContext_1.PageContext);
-    React.useEffect(() => {
-        if (hasOverflowScroll && !ariaLabel) {
-            /* eslint-disable no-console */
-            console.warn('PageNavigation: An accessible aria-label is required when hasOverflowScroll is set to true.');
-        }
-    }, [hasOverflowScroll, ariaLabel]);
-    return (React.createElement("div", Object.assign({ className: (0, react_styles_1.css)(page_1.default.pageMainNav, (0, util_1.formatBreakpointMods)(stickyOnBreakpoint, page_1.default, 'sticky-', getVerticalBreakpoint(height), true), isWidthLimited && page_1.default.modifiers.limitWidth, hasShadowTop && page_1.default.modifiers.shadowTop, hasShadowBottom && page_1.default.modifiers.shadowBottom, hasOverflowScroll && page_1.default.modifiers.overflowScroll, className) }, (hasOverflowScroll && { tabIndex: 0, role: 'region', 'aria-label': ariaLabel }), props),
-        isWidthLimited && React.createElement("div", { className: (0, react_styles_1.css)(page_1.default.pageMainBody) }, children),
-        !isWidthLimited && children));
-};
-exports.PageNavigation = PageNavigation;
-exports.PageNavigation.displayName = 'PageNavigation';
-//# sourceMappingURL=PageNavigation.js.map

package/dist/js/components/Page/PageNavigation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageNavigation.js","sourceRoot":"","sources":["../../../../src/components/Page/PageNavigation.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,2DAA+C;AAC/C,qGAAuE;AACvE,6CAA0D;AAC1D,+CAA4C;AA4BrC,MAAM,cAAc,GAAG,CAAC,EAUT,EAAE,EAAE;QAVK,EAC7B,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,cAAc,EACd,kBAAkB,EAClB,YAAY,GAAG,KAAK,EACpB,eAAe,GAAG,KAAK,EACvB,iBAAiB,GAAG,KAAK,EACzB,YAAY,EAAE,SAAS,OAEH,EADjB,KAAK,sBATqB,uIAU9B,CADS;IAER,MAAM,EAAE,MAAM,EAAE,qBAAqB,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAW,CAAC,CAAC;IAExE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,iBAAiB,IAAI,CAAC,SAAS,EAAE,CAAC;YACpC,+BAA+B;YAC/B,OAAO,CAAC,IAAI,CAAC,6FAA6F,CAAC,CAAC;QAC9G,CAAC;IACH,CAAC,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,CAAC;IAEnC,OAAO,CACL,2CACE,SAAS,EAAE,IAAA,kBAAG,EACZ,cAAM,CAAC,WAAW,EAClB,IAAA,2BAAoB,EAAC,kBAAkB,EAAE,cAAM,EAAE,SAAS,EAAE,qBAAqB,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,EAChG,cAAc,IAAI,cAAM,CAAC,SAAS,CAAC,UAAU,EAC7C,YAAY,IAAI,cAAM,CAAC,SAAS,CAAC,SAAS,EAC1C,eAAe,IAAI,cAAM,CAAC,SAAS,CAAC,YAAY,EAChD,iBAAiB,IAAI,cAAM,CAAC,SAAS,CAAC,cAAc,EACpD,SAAS,CACV,IACG,CAAC,iBAAiB,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,EAC/E,KAAK;QAER,cAAc,IAAI,6BAAK,SAAS,EAAE,IAAA,kBAAG,EAAC,cAAM,CAAC,YAAY,CAAC,IAAG,QAAQ,CAAO;QAC5E,CAAC,cAAc,IAAI,QAAQ,CACxB,CACP,CAAC;AACJ,CAAC,CAAC;AAtCW,QAAA,cAAc,kBAsCzB;AACF,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC"}

package/src/components/Page/PageNavigation.tsx

@@ -1,72 +0,0 @@
-import * as React from 'react';
-import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/Page/page';
-import { formatBreakpointMods } from '../../helpers/util';
-import { PageContext } from './PageContext';
-
-export interface PageNavigationProps extends React.HTMLProps<HTMLDivElement> {
-  /** Additional classes to apply to the PageNavigation */
-  className?: string;
-  /** Content rendered inside of the PageNavigation */
-  children?: React.ReactNode;
-  /** Limits the width of the PageNavigation */
-  isWidthLimited?: boolean;
-  /** Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints */
-  stickyOnBreakpoint?: {
-    default?: 'top' | 'bottom';
-    sm?: 'top' | 'bottom';
-    md?: 'top' | 'bottom';
-    lg?: 'top' | 'bottom';
-    xl?: 'top' | 'bottom';
-    '2xl'?: 'top' | 'bottom';
-  };
-  /** Flag indicating if PageNavigation should have a shadow at the top */
-  hasShadowTop?: boolean;
-  /** Flag indicating if PageNavigation should have a shadow at the bottom */
-  hasShadowBottom?: boolean;
-  /** Flag indicating if the PageNavigation has a scrolling overflow */
-  hasOverflowScroll?: boolean;
-  /** Adds an accessible name to the page navigation when the hasOverflowScroll prop is set to true. */
-  'aria-label'?: string;
-}
-
-export const PageNavigation = ({
-  className = '',
-  children,
-  isWidthLimited,
-  stickyOnBreakpoint,
-  hasShadowTop = false,
-  hasShadowBottom = false,
-  hasOverflowScroll = false,
-  'aria-label': ariaLabel,
-  ...props
-}: PageNavigationProps) => {
-  const { height, getVerticalBreakpoint } = React.useContext(PageContext);
-
-  React.useEffect(() => {
-    if (hasOverflowScroll && !ariaLabel) {
-      /* eslint-disable no-console */
-      console.warn('PageNavigation: An accessible aria-label is required when hasOverflowScroll is set to true.');
-    }
-  }, [hasOverflowScroll, ariaLabel]);
-
-  return (
-    <div
-      className={css(
-        styles.pageMainNav,
-        formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
-        isWidthLimited && styles.modifiers.limitWidth,
-        hasShadowTop && styles.modifiers.shadowTop,
-        hasShadowBottom && styles.modifiers.shadowBottom,
-        hasOverflowScroll && styles.modifiers.overflowScroll,
-        className
-      )}
-      {...(hasOverflowScroll && { tabIndex: 0, role: 'region', 'aria-label': ariaLabel })}
-      {...props}
-    >
-      {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}
-      {!isWidthLimited && children}
-    </div>
-  );
-};
-PageNavigation.displayName = 'PageNavigation';

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

@@ -1,78 +0,0 @@
-import * as React from 'react';
-import { render, screen } from '@testing-library/react';
-import { PageNavigation } from '../PageNavigation';
-
-describe('page navigation', () => {
-  test('Verify basic render', () => {
-    const { asFragment } = render(<PageNavigation>test</PageNavigation>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Verify limited width', () => {
-    const { asFragment } = render(<PageNavigation isWidthLimited>test</PageNavigation>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Verify top sticky', () => {
-    const { asFragment } = render(<PageNavigation stickyOnBreakpoint={{ default: 'top' }}>test</PageNavigation>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Verify bottom sticky', () => {
-    const { asFragment } = render(<PageNavigation stickyOnBreakpoint={{ default: 'bottom' }}>test</PageNavigation>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Verify top shadow', () => {
-    const { asFragment } = render(<PageNavigation hasShadowTop>test</PageNavigation>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Verify bottom shadow', () => {
-    const { asFragment } = render(<PageNavigation hasShadowBottom>test</PageNavigation>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Verify overflow scroll', () => {
-    const { asFragment } = render(<PageNavigation hasOverflowScroll>test</PageNavigation>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Renders without an aria-label by default', () => {
-    render(<PageNavigation>test</PageNavigation>);
-
-    expect(screen.getByText('test')).not.toHaveAccessibleName('Test label');
-  });
-
-  test('Renders with the passed aria-label applied', () => {
-    render(
-      <PageNavigation aria-label="Test label" hasOverflowScroll>
-        test
-      </PageNavigation>
-    );
-
-    expect(screen.getByText('test')).toHaveAccessibleName('Test label');
-  });
-
-  test('Does not log a warning in the console by default', () => {
-    const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
-
-    render(<PageNavigation>test</PageNavigation>);
-
-    expect(consoleWarning).not.toHaveBeenCalled();
-  });
-
-  test('Does not log a warning in the console when an aria-label is included with hasOverflowScroll', () => {
-    const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
-
-    render(
-      <PageNavigation hasOverflowScroll aria-label="Test label">
-        test
-      </PageNavigation>
-    );
-
-    expect(consoleWarning).not.toHaveBeenCalled();
-  });
-
-  test('Logs a warning in the console when an aria-label is not included with hasOverflowScroll', () => {
-    const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
-
-    render(<PageNavigation hasOverflowScroll>test</PageNavigation>);
-
-    expect(consoleWarning).toHaveBeenCalled();
-  });
-});