@patternfly/react-core 6.0.0-alpha.103 → 6.0.0-alpha.105

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.102","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.104","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.102","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.104","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.102","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.104","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.103",
+  "version": "6.0.0-alpha.105",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "c51081df254133ab9d594a2d3fe7ce5397cbd182"
+  "gitHead": "e25ce9fbd906f201e7c4ef70b28bc6862a5d0766"
 }

package/src/components/DualListSelector/examples/DualListSelector.md

@@ -13,7 +13,6 @@ propComponents:
     'DualListSelectorTree',
     'DualListSelectorTreeItemData'
   ]
-beta: true
 ---
 
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';

package/src/components/LoginPage/LoginMainHeader.tsx

@@ -24,7 +24,7 @@ export const LoginMainHeader: React.FunctionComponent<LoginMainHeaderProps> = ({
   headerUtilities = null,
   ...props
 }: LoginMainHeaderProps) => (
-  <header className={css(styles.loginMainHeader, className)} {...props}>
+  <div className={css(styles.loginMainHeader, className)} {...props}>
     {title && (
       <Title headingLevel="h2" size={TitleSizes['3xl']}>
         {title}
@@ -33,6 +33,6 @@ export const LoginMainHeader: React.FunctionComponent<LoginMainHeaderProps> = ({
     {subtitle && <p className={css(styles.loginMainHeaderDesc)}>{subtitle}</p>}
     {headerUtilities && <div className={css(styles.loginMainHeaderUtilities)}>{headerUtilities}</div>}
     {children}
-  </header>
+  </div>
 );
 LoginMainHeader.displayName = 'LoginMainHeader';

package/src/components/LoginPage/__tests__/__snapshots__/LoginMainHeader.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`LoginMainHeader className is added to the root element 1`] = `
 <DocumentFragment>
-  <header
+  <div
     class="pf-v6-c-login__main-header extra-class"
   />
 </DocumentFragment>
@@ -10,7 +10,7 @@ exports[`LoginMainHeader className is added to the root element 1`] = `
 
 exports[`LoginMainHeader renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
-  <header
+  <div
     class="pf-v6-c-login__main-header"
   />
 </DocumentFragment>
@@ -18,7 +18,7 @@ exports[`LoginMainHeader renders with PatternFly Core styles 1`] = `
 
 exports[`LoginMainHeader title and subtitle are rendered correctly 1`] = `
 <DocumentFragment>
-  <header
+  <div
     class="pf-v6-c-login__main-header"
   >
     <h2
@@ -34,6 +34,6 @@ exports[`LoginMainHeader title and subtitle are rendered correctly 1`] = `
     >
       Use LDAP credentials
     </p>
-  </header>
+  </div>
 </DocumentFragment>
 `;

package/src/components/LoginPage/__tests__/__snapshots__/LoginPage.test.tsx.snap

@@ -24,7 +24,7 @@ exports[`check loginpage example against snapshot 1`] = `
       <main
         class="pf-v6-c-login__main"
       >
-        <header
+        <div
           class="pf-v6-c-login__main-header"
         >
           <h2
@@ -35,7 +35,7 @@ exports[`check loginpage example against snapshot 1`] = `
           >
             Log into your account
           </h2>
-        </header>
+        </div>
         <div
           class="pf-v6-c-login__main-body"
         />

package/src/components/Modal/examples/Modal.md

@@ -4,7 +4,6 @@ section: components
 cssPrefix: pf-v5-c-modal-box
 propComponents: ['Modal', 'ModalBody', 'ModalHeader', 'ModalFooter']
 ouia: true
-beta: true
 ---
 
 import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';

package/src/components/Page/Page.tsx

@@ -76,6 +76,9 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
    * https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/helpers/util.ts
    */
   getVerticalBreakpoint?: (height: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /** Banner component for the page. This will be rendered above a breadcrumb if one is also passed.
+   */
+  banner?: React.ReactNode;
   /** Breadcrumb component for the page */
   breadcrumb?: React.ReactNode;
   /** Horizontal sub navigation component for the page */
@@ -219,6 +222,7 @@ class Page extends React.Component<PageProps, PageState> {
 
   render() {
     const {
+      banner,
       breadcrumb,
       isBreadcrumbWidthLimited,
       className,
@@ -289,6 +293,7 @@ class Page extends React.Component<PageProps, PageState> {
     const group = isGrouped ? (
       <PageGroup {...groupProps}>
         {isHorizontalSubnavGrouped && nav}
+        {banner}
         {isBreadcrumbGrouped && crumb}
         {additionalGroupedContent}
       </PageGroup>
@@ -308,6 +313,7 @@ class Page extends React.Component<PageProps, PageState> {
         >
           {group}
           {!isHorizontalSubnavGrouped && nav}
+          {banner}
           {!isBreadcrumbGrouped && crumb}
           {children}
         </Component>

package/src/demos/Banner.md

@@ -21,22 +21,24 @@ import display from '@patternfly/react-styles/css/utilities/Display/display';
 
 class BannerDemo extends React.Component {
   render() {
+    const banner = (
+      <Banner isSticky>
+        <Flex
+          justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
+          flexWrap={{ default: 'nowrap' }}
+        >
+          <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
+          <div className={css(display.displayNone, display.displayBlockOnLg)}>
+            This message is sticky to the top of the page.
+          </div>
+          <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
+          <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
+        </Flex>
+      </Banner>
+    );
     return (
       <React.Fragment>
-        <DashboardWrapper breadcrumb={null}>
-          <Banner isSticky>
-            <Flex
-              justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
-              flexWrap={{ default: 'nowrap' }}
-            >
-              <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
-              <div className={css(display.displayNone, display.displayBlockOnLg)}>
-                This message is sticky to the top of the page.
-              </div>
-              <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
-              <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
-            </Flex>
-          </Banner>
+        <DashboardWrapper banner={banner} breadcrumb={null}>
           <PageSection>
             <Content>
               <h1>Main title</h1>
@@ -114,7 +116,8 @@ class BannerDemo extends React.Component {
                 <Content>
                   <h1>Main title</h1>
                   <p>
-                    Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
+                    Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because{' '}
+                    <br />
                     of it’s relative line height of 1.5.
                   </p>
                 </Content>

package/src/demos/DashboardWrapper.tsx

@@ -47,6 +47,7 @@ const PageTemplateTitle = (
 export const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
   children,
   mainContainerId,
+  banner,
   breadcrumb,
   masthead,
   sidebar,
@@ -109,6 +110,7 @@ export const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
       sidebar={sidebar ?? _sidebar}
       isManagedSidebar
       skipToContent={PageSkipToContent}
+      banner={banner}
       breadcrumb={renderedBreadcrumb}
       mainContainerId={mainContainerId ?? 'main-content-page-layout-default-nav'}
       notificationDrawer={notificationDrawer}

package/src/demos/JumpLinks.md

@@ -43,27 +43,38 @@ ScrollspyH2 = () => {
 
   const [isVertical, setIsVertical] = React.useState(true);
   const [offsetHeight, setOffsetHeight] = React.useState(10);
+  const offsetForPadding = 10;
+  let masthead;
 
   // Update offset based on the masthead and jump links nav heights.
   React.useEffect(() => {
-    const masthead = document.getElementsByClassName(mastheadStyles.masthead)[0];
-    const offsetForPadding = 10;
-
-    getResizeObserver(
-      masthead,
-      () => {
-        if (isVertical) {
-          setOffsetHeight(masthead.offsetHeight + offsetForPadding);
-        } else {
-          // Append jump links nav height to the masthead height when value exists.
-          const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight;
-          jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding);
-        }
-      },
-      true
-    );
+    masthead = document.getElementsByClassName(mastheadStyles.masthead)[0];
+
+    if (isVertical) {
+      setOffsetHeight(masthead.offsetHeight + offsetForPadding);
+    } else {
+      // Append jump links nav height to the masthead height when value exists.
+      const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight;
+      jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding);
+    }
+
+    
   }, [isVertical]);
 
+  getResizeObserver(
+    document.getElementsByClassName(mastheadStyles.masthead)[0],
+    () => {
+      if (isVertical) {
+        setOffsetHeight(masthead.offsetHeight + offsetForPadding);
+      } else {
+        // Append jump links nav height to the masthead height when value exists.
+        const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight;
+        jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding);
+      }
+    },
+    true
+  );
+
   return (
     <DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
       <PageSection>
@@ -85,7 +96,7 @@ ScrollspyH2 = () => {
                 isVertical={isVertical}
                 isCentered={!isVertical}
                 label="Jump to section"
-                scrollableSelector="#scrollable-element"
+                scrollableSelector=".pf-v6-c-page__main-container"
                 offset={offsetHeight}
                 expandable={{ default: isVertical ? 'expandable' : 'nonExpandable', md: 'nonExpandable' }}
                 isExpanded