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

package/src/components/Wizard/Wizard.tsx

@@ -77,7 +77,7 @@ export const Wizard = ({
   onStepChange,
   onSave,
   onClose,
-  shouldFocusContent = false,
+  shouldFocusContent = true,
   ...wrapperProps
 }: WizardProps) => {
   const [activeStepIndex, setActiveStepIndex] = React.useState(startIndex);
@@ -92,6 +92,11 @@ export const Wizard = ({
     }
   }, [startIndex]);
 
+  // When children change, active step index should reset
+  React.useEffect(() => {
+    setActiveStepIndex(startIndex);
+  }, [children, startIndex]);
+
   const focusMainContentElement = () =>
     setTimeout(() => {
       wrapperRef?.current?.focus && wrapperRef.current.focus();

package/src/components/Wizard/WizardContext.tsx

@@ -74,6 +74,11 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
   const [currentSteps, setCurrentSteps] = React.useState<WizardStepType[]>(initialSteps);
   const [currentFooter, setCurrentFooter] = React.useState<WizardFooterType>();
 
+  // Callback to update steps if they change after initial render
+  React.useEffect(() => {
+    setCurrentSteps(initialSteps);
+  }, [initialSteps]);
+
   // Combined initial and current state steps
   const steps = React.useMemo(
     () =>

package/src/components/Wizard/WizardStep.tsx

@@ -16,8 +16,8 @@ export interface WizardStepProps {
   id: string | number;
   /** Optional for when the step is used as a parent to sub-steps */
   children?: React.ReactNode | undefined;
-  /** Props for WizardBody that wraps content by default. Can be set to null for exclusion of WizardBody. */
-  body?: Omit<Omit<WizardBodyProps, 'children'>, 'children'> | null;
+  /** Props for WizardBody that wraps content by default. */
+  body?: Omit<Omit<WizardBodyProps, 'children'>, 'children'>;
   /** Optional list of sub-steps */
   steps?: React.ReactElement<WizardStepProps>[];
   /** Flag to disable the step's navigation item */

package/src/components/Wizard/WizardToggle.tsx

@@ -73,8 +73,7 @@ export const WizardToggle = ({
 
     return (
       <React.Fragment key={step.id}>
-        {activeStep?.id === step.id &&
-          (body || body === undefined ? <WizardBody {...body}>{children}</WizardBody> : children)}
+        {activeStep?.id === step.id && <WizardBody {...body}>{children}</WizardBody>}
 
         <div key={step.id} style={{ display: 'none' }}>
           <WizardStep {...propsWithoutChildren} />

package/src/components/Wizard/__tests__/WizardStep.test.tsx

@@ -55,11 +55,6 @@ test('renders with children', () => {
   expect(screen.getByText('content')).toBeVisible();
 });
 
-test('excludes WizardBody when body is set to null', () => {
-  render(<WizardStep id="test-step" name="Test step" body={null} />);
-  expect(screen.queryByRole('main')).toBeNull();
-});
-
 test('updates "isDisabled" in context when the value changes', () => {
   render(<WizardStep {...testStep} isDisabled />);
   expect(setStep).toHaveBeenCalledWith({ ...testStepProps, isDisabled: true, isVisited: true });

package/src/components/Wizard/examples/Wizard.md

@@ -65,8 +65,6 @@ import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 To focus the main content element of the `Wizard`, pass in the `shouldFocusContent` property. It is recommended that this is passed in so that users can navigate through a `WizardStep` content in order.
 
-If a `WizardStep` is passed a `body={null}` property, you must manually handle focus.
-
 ```ts file="./WizardFocusOnNextBack.tsx"
 
 ```

package/src/components/Wizard/examples/WizardStepDrawerContent.tsx

@@ -59,17 +59,27 @@ const StepContentWithDrawer: React.FunctionComponent = () => {
 
 export const WizardStepDrawerContent: React.FunctionComponent = () => (
   <Wizard height={400} title="With drawer wizard">
-    <WizardStep body={null} name="Step 1" id="with-drawer-step-1">
+    <WizardStep body={{ hasNoPadding: true }} name="Step 1" id="with-drawer-step-1">
       <StepContentWithDrawer />
     </WizardStep>
     <WizardStep
       name="Step 2"
       id="with-drawer-step-2"
       steps={[
-        <WizardStep body={null} key="with-drawer-substep-1" name="Substep 1" id="with-drawer-substep-1">
+        <WizardStep
+          body={{ hasNoPadding: true }}
+          key="with-drawer-substep-1"
+          name="Substep 1"
+          id="with-drawer-substep-1"
+        >
           <StepContentWithDrawer />
         </WizardStep>,
-        <WizardStep body={null} key="with-drawer-substep-2" name="Substep 2" id="with-drawer-substep-2">
+        <WizardStep
+          body={{ hasNoPadding: true }}
+          key="with-drawer-substep-2"
+          name="Substep 2"
+          id="with-drawer-substep-2"
+        >
           <StepContentWithDrawer />
         </WizardStep>
       ]}

package/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx

@@ -2,6 +2,9 @@ import React from 'react';
 
 import {
   Button,
+  ActionList,
+  ActionListGroup,
+  ActionListItem,
   Alert,
   EmptyState,
   EmptyStateFooter,
@@ -96,10 +99,18 @@ const LastStepFooter: React.FunctionComponent<LastStepFooterProps> = ({
 
   return (
     <WizardFooterWrapper>
-      <Button onClick={onValidate}>Validate</Button>
-      <Button variant="secondary" onClick={goToPrevStep}>
-        Back
-      </Button>
+      <ActionList>
+        <ActionListGroup>
+          <ActionListItem>
+            <Button variant="secondary" onClick={goToPrevStep}>
+              Back
+            </Button>
+          </ActionListItem>
+          <ActionListItem>
+            <Button onClick={onValidate}>Validate</Button>
+          </ActionListItem>
+        </ActionListGroup>
+      </ActionList>
     </WizardFooterWrapper>
   );
 };

package/src/components/Wizard/examples/WizardWithCustomFooter.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 
 import {
+  ActionList,
+  ActionListGroup,
+  ActionListItem,
   Button,
   Flex,
   FlexItem,
@@ -40,15 +43,27 @@ const CustomStepTwoFooter = () => {
 
   return (
     <WizardFooterWrapper>
-      <Button variant="secondary" onClick={goToPrevStep} isDisabled={isLoading}>
-        Back
-      </Button>
-      <Button variant="primary" onClick={onNext} isLoading={isLoading} isDisabled={isLoading}>
-        Async Next
-      </Button>
-      <Button variant="link" onClick={close} isDisabled={isLoading}>
-        Cancel
-      </Button>
+      <ActionList>
+        <ActionListGroup>
+          <ActionListItem>
+            <Button variant="secondary" onClick={goToPrevStep} isDisabled={isLoading}>
+              Back
+            </Button>
+          </ActionListItem>
+          <ActionListItem>
+            <Button variant="primary" onClick={onNext} isLoading={isLoading} isDisabled={isLoading}>
+              Async Next
+            </Button>
+          </ActionListItem>
+        </ActionListGroup>
+        <ActionListGroup>
+          <ActionListItem>
+            <Button variant="link" onClick={close} isDisabled={isLoading}>
+              Cancel
+            </Button>
+          </ActionListItem>
+        </ActionListGroup>
+      </ActionList>
     </WizardFooterWrapper>
   );
 };

package/src/demos/examples/Wizard/InModalWithDrawer.tsx

@@ -88,25 +88,30 @@ export const WizardModalWithDrawerDemo: React.FunctionComponent = () => {
         }
         height={400}
       >
-        <WizardStep body={null} name="Information" id="wizard-step-1">
+        <WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
           {createStepContentWithDrawer('Information step')}
         </WizardStep>
         <WizardStep
           name="Configuration"
           id="wizard-step-2"
           steps={[
-            <WizardStep body={null} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
+            <WizardStep body={{ hasNoPadding: true }} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
               {createStepContentWithDrawer('Configuration substep A')}
             </WizardStep>,
-            <WizardStep body={null} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
+            <WizardStep body={{ hasNoPadding: true }} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
               {createStepContentWithDrawer('Configuration substep B')}
             </WizardStep>
           ]}
         />
-        <WizardStep body={null} name="Additional" id="wizard-step-3">
+        <WizardStep body={{ hasNoPadding: true }} name="Additional" id="wizard-step-3">
           {createStepContentWithDrawer('Additional step')}
         </WizardStep>
-        <WizardStep body={null} name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+        <WizardStep
+          body={{ hasNoPadding: true }}
+          name="Review"
+          id="wizard-step-4"
+          footer={{ nextButtonText: 'Finish' }}
+        >
           {createStepContentWithDrawer('Review step')}
         </WizardStep>
       </Wizard>

package/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx

@@ -95,25 +95,30 @@ export const WizardModalWithDrawerInfoStepDemo: React.FunctionComponent = () =>
         }
         height={400}
       >
-        <WizardStep body={null} name="Information" id="wizard-step-1">
+        <WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
           {createStepContentWithDrawer('Information step')}
         </WizardStep>
         <WizardStep
           name="Configuration"
           id="wizard-step-2"
           steps={[
-            <WizardStep body={null} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
+            <WizardStep body={{ hasNoPadding: true }} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
               {createStepContentWithDrawer('Configuration substep A')}
             </WizardStep>,
-            <WizardStep body={null} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
+            <WizardStep body={{ hasNoPadding: true }} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
               {createStepContentWithDrawer('Configuration substep B')}
             </WizardStep>
           ]}
         />
-        <WizardStep body={null} name="Additional" id="wizard-step-3">
+        <WizardStep body={{ hasNoPadding: true }} name="Additional" id="wizard-step-3">
           {createStepContentWithDrawer('Additional step')}
         </WizardStep>
-        <WizardStep body={null} name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+        <WizardStep
+          body={{ hasNoPadding: true }}
+          name="Review"
+          id="wizard-step-4"
+          footer={{ nextButtonText: 'Finish' }}
+        >
           {createStepContentWithDrawer('Review step')}
         </WizardStep>
       </Wizard>

package/src/demos/examples/Wizard/InPageWithDrawer.tsx

@@ -166,25 +166,30 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
         </PageSection>
         <PageSection type={PageSectionTypes.wizard}>
           <Wizard>
-            <WizardStep body={null} name="Information" id="wizard-step-1">
+            <WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
               {createStepContentWithDrawer('Information step')}
             </WizardStep>
             <WizardStep
               name="Configuration"
               id="wizard-step-2"
               steps={[
-                <WizardStep body={null} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
+                <WizardStep body={{ hasNoPadding: true }} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
                   {createStepContentWithDrawer('Configuration substep A')}
                 </WizardStep>,
-                <WizardStep body={null} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
+                <WizardStep body={{ hasNoPadding: true }} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
                   {createStepContentWithDrawer('Configuration substep B')}
                 </WizardStep>
               ]}
             />
-            <WizardStep body={null} name="Additional" id="wizard-step-3">
+            <WizardStep body={{ hasNoPadding: true }} name="Additional" id="wizard-step-3">
               {createStepContentWithDrawer('Additional step')}
             </WizardStep>
-            <WizardStep body={null} name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+            <WizardStep
+              body={{ hasNoPadding: true }}
+              name="Review"
+              id="wizard-step-4"
+              footer={{ nextButtonText: 'Finish' }}
+            >
               {createStepContentWithDrawer('Review step')}
             </WizardStep>
           </Wizard>

package/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx

@@ -171,25 +171,30 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
         </PageSection>
         <PageSection type={PageSectionTypes.wizard} ß>
           <Wizard>
-            <WizardStep body={null} name="Information" id="wizard-step-1">
+            <WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
               {createStepContentWithDrawer('Information step')}
             </WizardStep>
             <WizardStep
               name="Configuration"
               id="wizard-step-2"
               steps={[
-                <WizardStep body={null} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
+                <WizardStep body={{ hasNoPadding: true }} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
                   {createStepContentWithDrawer('Configuration substep A')}
                 </WizardStep>,
-                <WizardStep body={null} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
+                <WizardStep body={{ hasNoPadding: true }} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
                   {createStepContentWithDrawer('Configuration substep B')}
                 </WizardStep>
               ]}
             />
-            <WizardStep body={null} name="Additional" id="wizard-step-3">
+            <WizardStep body={{ hasNoPadding: true }} name="Additional" id="wizard-step-3">
               {createStepContentWithDrawer('Additional step')}
             </WizardStep>
-            <WizardStep body={null} name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+            <WizardStep
+              body={{ hasNoPadding: true }}
+              name="Review"
+              id="wizard-step-4"
+              footer={{ nextButtonText: 'Finish' }}
+            >
               {createStepContentWithDrawer('Review step')}
             </WizardStep>
           </Wizard>

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();
-  });
-});