@patternfly/react-core 6.0.0-alpha.102 → 6.0.0-alpha.104

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.101","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.103","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.101","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.103","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.101","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.103","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.102",
+  "version": "6.0.0-alpha.104",
   "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",
@@ -40,16 +40,15 @@
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "scripts": {
     "build:umd": "rollup -c --environment IS_PRODUCTION",
-    "build:single:packages": "node ../../scripts/build-single-packages.js --config single-packages.config.json",
+    "build:single:packages": "node ../../scripts/build-single-packages.mjs --config single-packages.config.json",
     "clean": "rimraf dist components layouts helpers next deprecated",
-    "generate": "node scripts/copyStyles.js",
-    "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json",
-    "clean:exports": "node scripts/cleanDistExports.js"
+    "generate": "node scripts/copyStyles.mjs",
+    "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.36",
+    "@patternfly/react-icons": "^6.0.0-alpha.37",
     "@patternfly/react-styles": "^6.0.0-alpha.35",
-    "@patternfly/react-tokens": "^6.0.0-alpha.35",
+    "@patternfly/react-tokens": "^6.0.0-alpha.36",
     "focus-trap": "7.5.4",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.6.2"
@@ -64,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "065953356048e1ee3036f266aaf16e479e94bc5e"
+  "gitHead": "5ae7154791840e7ca907b851aa591e6838acefc2"
 }

package/scripts/{copyStyles.js → copyStyles.mjs}

@@ -1,8 +1,11 @@
-const { copySync, readFileSync, writeFileSync } = require('fs-extra');
-const { resolve, dirname, join } = require('path');
-const { parse: parseCSS, stringify: stringifyCSS } = require('css');
+import { copySync } from 'fs-extra/esm';
+import { readFileSync, writeFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import { resolve, dirname, join } from 'node:path';
+import { parse as parseCSS, stringify as stringifyCSS } from 'css';
 
-const stylesDir = resolve(__dirname, '../dist/styles');
+const require = createRequire(import.meta.url);
+const stylesDir = resolve(import.meta.dirname, '../dist/styles');
 const pfDir = dirname(require.resolve('@patternfly/patternfly/patternfly.css'));
 
 const unusedSelectorRegEx = /(\.fas?|\.sr-only)/;

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/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

package/scripts/cleanDistExports.js

@@ -1,14 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-const distIndexFiles = ['esm', 'js'].map((dir) => path.join(process.cwd(), 'dist', dir, 'index.js'));
-const distIndexDeclarationFiles = ['esm', 'js'].map((dir) => path.join(process.cwd(), 'dist', dir, 'index.d.ts'));
-
-[...distIndexFiles, ...distIndexDeclarationFiles].forEach((file) => {
-  const fileContents = fs.readFileSync(file, 'utf8');
-  const newFileContents = fileContents
-    .split('\n')
-    .filter((line) => !line.includes('demos'))
-    .join('\n');
-  fs.writeFileSync(file, newFileContents);
-});

package/src/helpers/safeHTMLElement.js

@@ -1,4 +0,0 @@
-// https://github.com/reactjs/react-modal/blob/master/src/helpers/safeHTMLElement.js
-import { canUseDOM } from './util';
-
-export default canUseDOM ? window.HTMLElement : {};