@patternfly/documentation-framework 6.36.8 → 6.38.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 6.38.0 (2026-04-14)
+
+
+### Features
+
+* **site:** update doc-core to 1.22.0 ([#4946](https://github.com/patternfly/patternfly-org/issues/4946)) ([fc290d0](https://github.com/patternfly/patternfly-org/commit/fc290d030bc34d1728fc9a3948fed4e5b4be5df3))
+
+
+
+
+
+# 6.37.0 (2026-04-06)
+
+
+### Features
+
+* bump preleases and update screenshots ([#4986](https://github.com/patternfly/patternfly-org/issues/4986)) ([96b5a86](https://github.com/patternfly/patternfly-org/commit/96b5a86cf62be502b202e5c736a161439d2c5710))
+
+
+
+
+
 ## 6.36.8 (2026-03-25)
 
 **Note:** Version bump only for package @patternfly/documentation-framework

package/components/index.js

@@ -8,7 +8,7 @@ export * from './propsTable/propsTable';
 export * from './navAnnouncementBanner/navAnnouncementBanner';
 export * from './sideNav/sideNav';
 export * from './topNav/topNav';
-export * from './link/link';
+export * from './link/link.jsx';
 export * from './tableOfContents/tableOfContents';
 export * from './inlineAlert/inlineAlert';
 export * from './themeSelector/themeSelector';

package/components/link/{link.js → link.jsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link as ReachLink, navigate } from '@reach/router';
-import { getAsyncComponent } from '../../routes';
+const { getAsyncComponent } = require('../../routes');
 
 const Promiseany = (
   Promise.any ||

package/components/sectionGallery/{sectionDataListLayout.js → sectionDataListLayout.jsx}

@@ -11,8 +11,8 @@ import {
   ContentVariants,
   Label,
 } from "@patternfly/react-core";
-import { Link } from "../link/link";
-import { TextSummary } from "./TextSummary";
+import { Link } from "../link/link.jsx";
+import { TextSummary } from "./TextSummary.jsx";
 
 export const SectionDataListLayout = ({
   galleryItems,

package/components/sectionGallery/sectionGallery.js

@@ -1,78 +1 @@
-import React from "react";
-
-import './sectionGallery.css';
-import { SectionGalleryToolbar } from "./sectionGalleryToolbar";
-import { SectionGalleryLayout } from "./sectionGalleryLayout";
-import { SectionDataListLayout } from "./sectionDataListLayout";
-import { SectionGalleryWrapper } from "./sectionGalleryWrapper";
-
-/** 
- * Helper component returns gallery of items with search toolbar and switchable gallery/data list views.
- * @param {Object} illustrations - Object of preview images mapped to their snake_case item display name
- * @param {string} section - Name of the navigation section to create the gallery within
- * @param {Object} galleryItemsData - Object containing the image location & summary text mapped to the gallery item's hyphenated-name
- * @param {string} [placeholderText=Search by name] - Optional text to be displayed as placeholder for SearchInput
- * @param {string} [countText= items] - Optional text to be displayed after the number of search results
- * @param {string} [initialLayout=grid] - Optional text to indicate whether to default to grid or list layout
- * @param {Boolean} [hasGridText=false] - Optional boolean to toggle text on grid layout cards
- * @param {Boolean} [hasGridImages=false] - Optional boolean to toggle images on grid layout cards
- * @param {Boolean} [hasListText=false] - Optional boolean to toggle text on list layout rows
- * @param {Boolean} [hasListImages=false] - Optional boolean to toggle images on list layout rows
- * @param {Boolean} [isFullWidth=true] - Optional boolean to disable component from exceeding default max-width for page
-*/
-
-export const SectionGallery = ({
-  illustrations,
-  section,
-  subsection = null,
-  includeSubsections = false,
-  parseSubsections = false,
-  galleryItemsData,
-  placeholderText,
-  countText,
-  initialLayout = "grid",
-  hasGridText = false,
-  hasGridImages = true,
-  hasListText = true,
-  hasListImages = true,
-  isFullWidth = true,
-  onlyShowInGalleryData = false
-}) => (
-  <SectionGalleryWrapper
-    illustrations={illustrations}
-    section={section}
-    subsection={subsection}
-    includeSubsections={includeSubsections}
-    parseSubsections={parseSubsections}
-    galleryItemsData={galleryItemsData}
-    initialLayout={initialLayout}
-    isFullWidth={isFullWidth}
-    onlyShowInGalleryData={onlyShowInGalleryData}
-  >
-    {(sectionGalleryItems, searchTerm, setSearchTerm, layoutView, setLayoutView) => (
-      <>
-        <SectionGalleryToolbar
-          galleryItems={sectionGalleryItems}
-          searchTerm={searchTerm}
-          setSearchTerm={setSearchTerm}
-          layoutView={layoutView}
-          setLayoutView={setLayoutView}
-          placeholderText={placeholderText}
-          countText={countText}
-        />
-        <SectionGalleryLayout
-          galleryItems={sectionGalleryItems}
-          layoutView={layoutView}
-          hasGridText={hasGridText}
-          hasGridImages={hasGridImages}
-        />
-        <SectionDataListLayout
-          galleryItems={sectionGalleryItems}
-          layoutView={layoutView}
-          hasListText={hasListText}
-          hasListImages={hasListImages}
-        />
-      </>
-    )}
-  </SectionGalleryWrapper>
-);
+export * from './sectionGallery.jsx';

package/components/sectionGallery/sectionGallery.jsx

@@ -0,0 +1,78 @@
+import React from "react";
+
+import './sectionGallery.css';
+import { SectionGalleryToolbar } from "./sectionGalleryToolbar.jsx";
+import { SectionGalleryLayout } from "./sectionGalleryLayout.jsx";
+import { SectionDataListLayout } from "./sectionDataListLayout.jsx";
+import { SectionGalleryWrapper } from "./sectionGalleryWrapper.jsx";
+
+/** 
+ * Helper component returns gallery of items with search toolbar and switchable gallery/data list views.
+ * @param {Object} illustrations - Object of preview images mapped to their snake_case item display name
+ * @param {string} section - Name of the navigation section to create the gallery within
+ * @param {Object} galleryItemsData - Object containing the image location & summary text mapped to the gallery item's hyphenated-name
+ * @param {string} [placeholderText=Search by name] - Optional text to be displayed as placeholder for SearchInput
+ * @param {string} [countText= items] - Optional text to be displayed after the number of search results
+ * @param {string} [initialLayout=grid] - Optional text to indicate whether to default to grid or list layout
+ * @param {Boolean} [hasGridText=false] - Optional boolean to toggle text on grid layout cards
+ * @param {Boolean} [hasGridImages=false] - Optional boolean to toggle images on grid layout cards
+ * @param {Boolean} [hasListText=false] - Optional boolean to toggle text on list layout rows
+ * @param {Boolean} [hasListImages=false] - Optional boolean to toggle images on list layout rows
+ * @param {Boolean} [isFullWidth=true] - Optional boolean to disable component from exceeding default max-width for page
+*/
+
+export const SectionGallery = ({
+  illustrations,
+  section,
+  subsection = null,
+  includeSubsections = false,
+  parseSubsections = false,
+  galleryItemsData,
+  placeholderText,
+  countText,
+  initialLayout = "grid",
+  hasGridText = false,
+  hasGridImages = true,
+  hasListText = true,
+  hasListImages = true,
+  isFullWidth = true,
+  onlyShowInGalleryData = false
+}) => (
+  <SectionGalleryWrapper
+    illustrations={illustrations}
+    section={section}
+    subsection={subsection}
+    includeSubsections={includeSubsections}
+    parseSubsections={parseSubsections}
+    galleryItemsData={galleryItemsData}
+    initialLayout={initialLayout}
+    isFullWidth={isFullWidth}
+    onlyShowInGalleryData={onlyShowInGalleryData}
+  >
+    {(sectionGalleryItems, searchTerm, setSearchTerm, layoutView, setLayoutView) => (
+      <>
+        <SectionGalleryToolbar
+          galleryItems={sectionGalleryItems}
+          searchTerm={searchTerm}
+          setSearchTerm={setSearchTerm}
+          layoutView={layoutView}
+          setLayoutView={setLayoutView}
+          placeholderText={placeholderText}
+          countText={countText}
+        />
+        <SectionGalleryLayout
+          galleryItems={sectionGalleryItems}
+          layoutView={layoutView}
+          hasGridText={hasGridText}
+          hasGridImages={hasGridImages}
+        />
+        <SectionDataListLayout
+          galleryItems={sectionGalleryItems}
+          layoutView={layoutView}
+          hasListText={hasListText}
+          hasListImages={hasListImages}
+        />
+      </>
+    )}
+  </SectionGalleryWrapper>
+);

package/components/sectionGallery/{sectionGalleryLayout.js → sectionGalleryLayout.jsx}

@@ -10,7 +10,7 @@ import {
   Label,
 } from '@patternfly/react-core';
 import { navigate } from '@reach/router';
-import { TextSummary } from './TextSummary';
+import { TextSummary } from './TextSummary.jsx';
 
 export const SectionGalleryLayout = ({
   galleryItems,

package/components/sideNav/sideNav.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from '../link/link';
+import { Link } from '../link/link.jsx';
 import {
   Label,
   Nav,

package/layouts/sideNavLayout/sideNavLayout.js

@@ -265,9 +265,11 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
 
   const SideBar = (
     <PageSidebar>
-      <PageSidebarBody>
-        <SideNav navItems={sideNavItems} groupedRoutes={groupedRoutes} />
-      </PageSidebarBody>
+      <div className="pf-v6-c-page__sidebar-main">  {/** TODO: fix with updated React components after https://redhat.atlassian.net/browse/PF-3728 merges */}
+        <PageSidebarBody>
+          <SideNav navItems={sideNavItems} groupedRoutes={groupedRoutes} />
+        </PageSidebarBody>
+      </div>
     </PageSidebar>
   );
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "6.36.8",
+  "version": "6.38.0",
   "author": "Red Hat",
   "license": "MIT",
   "bin": {
@@ -68,11 +68,11 @@
     "webpack-merge": "5.10.0"
   },
   "peerDependencies": {
-    "@patternfly/patternfly": "^6.5.0-prerelease.46",
-    "@patternfly/react-code-editor": "^6.5.0-prerelease.39",
-    "@patternfly/react-core": "^6.5.0-prerelease.36",
-    "@patternfly/react-icons": "^6.5.0-prerelease.15",
-    "@patternfly/react-table": "^6.5.0-prerelease.37",
+    "@patternfly/patternfly": "^6.5.0-prerelease.64",
+    "@patternfly/react-code-editor": "^6.5.0-prerelease.52",
+    "@patternfly/react-core": "^6.5.0-prerelease.49",
+    "@patternfly/react-icons": "^6.5.0-prerelease.20",
+    "@patternfly/react-table": "^6.5.0-prerelease.50",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
@@ -92,5 +92,5 @@
     "http-cache-semantics": ">=4.1.1",
     "nanoid": "3.3.8"
   },
-  "gitHead": "5ac239a8ee3460420c61070be7cdd167bb79896c"
+  "gitHead": "b5d16750cf82ed9a231862c9262eb67eb205cc01"
 }

package/scripts/md/mdx-hast-to-jsx.js

@@ -8,6 +8,7 @@ const { parse } = require('@patternfly/ast-helpers');
 const { capitalize } = require('../../helpers/capitalize');
 const { slugger } = require('../../helpers/slugger');
 const { liveCodeTypes } = require('../../helpers/liveCodeTypes');
+const { stripReactTypeOnlyImports } = require('./stripReactTypeOnlyImports');
 
 // Adapted from https://github.com/mdx-js/mdx/blob/next/packages/mdx/mdx-hast-to-jsx.js
 function toJSX(node, parentNode = {}, options = {}) {
@@ -69,7 +70,9 @@ function serializeRoot(node, options) {
 
   const importStatements = groups.import
     .map(node => node.value)
-    .map(imp => imp.replace(/(['"])\./g, (_, match) => `${match}${getRelPath()}${path.posix.sep}\.`));
+    .map(imp => imp.replace(/(['"])\./g, (_, match) => `${match}${getRelPath()}${path.posix.sep}\.`))
+    .map(imp => stripReactTypeOnlyImports(imp))
+    .filter(Boolean);
 
   // Build array of absolute import paths for relative imports
   const relativeImportsRegex = /(import [^'"]*)['"](?:[\.\/]+(?:node_modules\/)?)(@?(?:(?!\.svg|\.jpe?g|\.png).)+)['"][;?]/gm;

package/scripts/md/stripReactTypeOnlyImports.js

@@ -0,0 +1,227 @@
+const { parse } = require('@patternfly/ast-helpers');
+
+/**
+ * TypeScript-only names that @types/react declares but the `react` package does not
+ * export at runtime. Value-importing them breaks strict ESM linking (e.g. Rspack).
+ * @see https://github.com/facebook/react/issues/11503
+ */
+const REACT_TYPE_ONLY_EXPORTS = new Set([
+  'AnimationEvent',
+  'AriaAttributes',
+  'BaseSyntheticEvent',
+  'ChangeEvent',
+  'ClipboardEvent',
+  'ComponentClass',
+  'ComponentProps',
+  'ComponentPropsWithRef',
+  'ComponentPropsWithoutRef',
+  'ComponentType',
+  'CompositionEvent',
+  'CSSProperties',
+  'DetailedHTMLProps',
+  'Dispatch',
+  'DOMAttributes',
+  'DragEvent',
+  'ElementType',
+  'ExoticComponent',
+  'FC',
+  'FocusEvent',
+  'FormEvent',
+  'ForwardRefExoticComponent',
+  'FunctionComponent',
+  'HTMLAttributes',
+  'InvalidEvent',
+  'JSXElementConstructor',
+  'KeyboardEvent',
+  'Key',
+  'LazyExoticComponent',
+  'LegacyRef',
+  'MemoExoticComponent',
+  'MouseEvent',
+  'MutableRefObject',
+  'PointerEvent',
+  'PropsWithChildren',
+  'PropsWithoutRef',
+  'PropsWithRef',
+  'ReactChangeEvent',
+  'ReactChild',
+  'ReactElement',
+  'ReactFragment',
+  'ReactFormEvent',
+  'ReactKeyboardEvent',
+  'ReactMouseEvent',
+  'ReactNode',
+  'ReactPointerEvent',
+  'ReactPortal',
+  'ReactText',
+  'Ref',
+  'RefAttributes',
+  'RefCallback',
+  'RefObject',
+  'SetStateAction',
+  'StyleHTMLAttributes',
+  'SVGAttributes',
+  'SVGProps',
+  'SyntheticEvent',
+  'TouchEvent',
+  'TransitionEvent',
+  'UIEvent',
+  'VoidFunctionComponent',
+  'VFC',
+  'WheelEvent',
+]);
+
+function specifierImportedName(spec) {
+  if (spec.type !== 'ImportSpecifier') {
+    return null;
+  }
+  const id = spec.imported;
+  return id.type === 'Identifier' ? id.name : null;
+}
+
+function importDeclarationToSource(decl, specifiers) {
+  const srcLiteral = decl.source.raw || JSON.stringify(decl.source.value);
+  if (specifiers.length === 0) {
+    return '';
+  }
+
+  const def = specifiers.find((s) => s.type === 'ImportDefaultSpecifier');
+  const ns = specifiers.find((s) => s.type === 'ImportNamespaceSpecifier');
+  const named = specifiers.filter((s) => s.type === 'ImportSpecifier');
+
+  if (ns) {
+    return `import * as ${ns.local.name} from ${srcLiteral}`;
+  }
+
+  const formatNamed = () =>
+    named
+      .map((sp) => {
+        const imp = sp.imported.name;
+        const loc = sp.local.name;
+        return imp === loc ? loc : `${imp} as ${loc}`;
+      })
+      .join(', ');
+
+  if (def && named.length) {
+    return `import ${def.local.name}, { ${formatNamed()} } from ${srcLiteral}`;
+  }
+  if (def) {
+    return `import ${def.local.name} from ${srcLiteral}`;
+  }
+  return `import { ${formatNamed()} } from ${srcLiteral}`;
+}
+
+function filterReactSpecifiers(decl) {
+  if (decl.importKind === 'type') {
+    return [];
+  }
+  return decl.specifiers.filter((spec) => {
+    if (spec.type === 'ImportDefaultSpecifier' || spec.type === 'ImportNamespaceSpecifier') {
+      return true;
+    }
+    if (spec.type === 'ImportSpecifier' && spec.importKind === 'type') {
+      return false;
+    }
+    const name = specifierImportedName(spec);
+    if (!name) {
+      return true;
+    }
+    return !REACT_TYPE_ONLY_EXPORTS.has(name);
+  });
+}
+
+/**
+ * Removes TypeScript-only specifiers from `import … from 'react'` in MDX import blocks.
+ * MDX often provides many import lines in a single node; this handles multi-statement programs.
+ */
+function stripReactTypeOnlyImports(importSource) {
+  const trimmed = importSource.trim();
+  if (!trimmed || !trimmed.includes('react')) {
+    return importSource;
+  }
+
+  const toParse = trimmed.endsWith(';') ? trimmed : `${trimmed};`;
+  let ast;
+  try {
+    ast = parse(toParse);
+  } catch {
+    return importSource;
+  }
+
+  if (!ast.body.length) {
+    return importSource;
+  }
+
+  const pureImports = ast.body.every((stmt) => stmt.type === 'ImportDeclaration');
+  if (!pureImports) {
+    return stripSingleImportDeclaration(toParse, trimmed, importSource);
+  }
+
+  const parts = [];
+  for (const stmt of ast.body) {
+    if (stmt.type !== 'ImportDeclaration') {
+      continue;
+    }
+    const mod = stmt.source && stmt.source.value;
+    if (mod !== 'react') {
+      parts.push(toParse.slice(stmt.start, stmt.end));
+      continue;
+    }
+    const filtered = filterReactSpecifiers(stmt);
+    if (filtered.length === 0) {
+      continue;
+    }
+    if (filtered.length === stmt.specifiers.length) {
+      parts.push(toParse.slice(stmt.start, stmt.end));
+      continue;
+    }
+    const out = importDeclarationToSource(stmt, filtered);
+    if (out) {
+      parts.push(out.endsWith(';') ? out : `${out};`);
+    }
+  }
+
+  if (parts.length === 0) {
+    return '';
+  }
+
+  return parts.join('\n');
+}
+
+/** Previous behavior: one import statement per node. */
+function stripSingleImportDeclaration(toParse, trimmed, importSource) {
+  if (toParse.length === 0) {
+    return importSource;
+  }
+  let ast;
+  try {
+    ast = parse(toParse);
+  } catch {
+    return importSource;
+  }
+  if (ast.body.length !== 1 || ast.body[0].type !== 'ImportDeclaration') {
+    return importSource;
+  }
+  const decl = ast.body[0];
+  if (decl.source.value !== 'react') {
+    return importSource;
+  }
+  if (decl.importKind === 'type') {
+    return '';
+  }
+  const filtered = filterReactSpecifiers(decl);
+  if (filtered.length === decl.specifiers.length) {
+    return importSource;
+  }
+  const out = importDeclarationToSource(decl, filtered);
+  if (!out) {
+    return '';
+  }
+  const hadSemicolon = /;\s*$/.test(trimmed);
+  return hadSemicolon ? `${out};` : out;
+}
+
+module.exports = {
+  stripReactTypeOnlyImports,
+  REACT_TYPE_ONLY_EXPORTS,
+};

package/templates/design-guidelines.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from '@patternfly/documentation-framework/components/link/link';
+import { Link } from '@patternfly/documentation-framework/components/link/link.jsx';
 
 export const DesignGuidelineTemplate = (
   <React.Fragment>

package/versions.json

@@ -1,9 +1,36 @@
 {
   "Releases": [
+    {
+      "name": "6.5.0-prerelease.49",
+      "date": "2026-04-06",
+      "latest": true,
+      "versions": {
+        "@patternfly/chatbot": "6.6.0-prerelease.6",
+        "@patternfly/patternfly": "6.5.0-prerelease.64",
+        "@patternfly/quickstarts": "6.5.0-prerelease.4",
+        "@patternfly/react-catalog-view-extension": "6.3.0-prerelease.3",
+        "@patternfly/react-charts": "8.5.0-prerelease.18",
+        "@patternfly/react-code-editor": "6.5.0-prerelease.52",
+        "@patternfly/react-component-groups": "6.4.0-prerelease.17",
+        "@patternfly/react-console": "6.1.0-prerelease.3",
+        "@patternfly/react-core": "6.5.0-prerelease.49",
+        "@patternfly/react-data-view": "6.5.0-prerelease.1",
+        "@patternfly/react-drag-drop": "6.5.0-prerelease.50",
+        "@patternfly/react-icons": "6.5.0-prerelease.20",
+        "@patternfly/react-log-viewer": "6.4.0-prerelease.2",
+        "@patternfly/react-styles": "6.5.0-prerelease.15",
+        "@patternfly/react-table": "6.5.0-prerelease.50",
+        "@patternfly/react-templates": "6.5.0-prerelease.49",
+        "@patternfly/react-tokens": "6.5.0-prerelease.14",
+        "@patternfly/react-topology": "6.5.0-prerelease.4",
+        "@patternfly/react-user-feedback": "6.2.0-prerelease.3",
+        "@patternfly/react-virtualized-extension": "6.2.0"
+      }
+    },
     {
       "name": "6.5.0-prerelease.33",
       "date": "2025-12-10",
-      "latest": true,
+      "hidden": true,
       "versions": {
         "@patternfly/patternfly": "6.5.0-prerelease.33",
         "@patternfly/react-catalog-view-extension": "6.3.0",