@patternfly/react-core 6.5.0-prerelease.5 → 6.5.0-prerelease.51

package/src/helpers/OUIA/ouia.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useSSRSafeId } from '../useSSRSafeId';
 
 type OuiaId = number | string;
 
@@ -10,22 +10,11 @@ export interface OUIAProps {
   ouiaSafe?: boolean;
 }
 
-let uid = 0;
 const ouiaPrefix = 'OUIA-Generated-';
-const ouiaIdByRoute: any = {};
 
-/** Get props to conform to OUIA spec
- *
- * For functional components, use the useOUIAProps function instead
- *
- * In class based components, create a state variable ouiaStateId to create a static generated ID:
- * state = {
- *  ouiaStateId: getDefaultOUIAId(Chip.displayName)
- * }
- * This generated ID should remain alive as long as the component is not unmounted.
- *
- * Then add the attributes to the component
- * {...getOUIAProps('OverflowChip', this.props.ouiaId !== undefined ? this.props.ouiaId : this.state.ouiaStateId)}
+/**
+ * Get props to conform to OUIA spec.
+ * For functional components, use the useOUIAProps hook instead.
  *
  * @param {string} componentType OUIA component type
  * @param {number|string} id OUIA component id
@@ -40,8 +29,8 @@ export function getOUIAProps(componentType: string, id: OuiaId, ouiaSafe: boolea
 }
 
 /**
- * Hooks version of the getOUIAProps function that also memoizes the generated ID
- * Can only be used in functional components
+ * Hooks version of the getOUIAProps function with SSR-safe ID generation.
+ * Can only be used in functional components.
  *
  * @param {string} componentType OUIA component type
  * @param {number|string} id OUIA component id
@@ -55,43 +44,26 @@ export const useOUIAProps = (componentType: string, id?: OuiaId, ouiaSafe: boole
 });
 
 /**
- * Returns the ID or the memoized generated ID
+ * Returns the provided ID or a deterministic SSR-safe generated OUIA ID.
+ * Uses React.useId() under the hood for consistent server/client rendering.
  *
  * @param {string} componentType OUIA component type
  * @param {number|string} id OUIA component id
  * @param {string} variant Optional variant to add to the generated ID
  */
 export const useOUIAId = (componentType: string, id?: OuiaId, variant?: string) => {
-  const defaultOUIAId = useMemo(() => getDefaultOUIAId(componentType, variant), [componentType, variant]);
-  return id ?? defaultOUIAId;
+  const generatedId = useSSRSafeId(`${ouiaPrefix}${componentType}-${variant ? `${variant}-` : ''}`);
+  return id ?? generatedId;
 };
 
+let uid = 0;
+
 /**
- * Returns a generated id based on the URL location
+ * Legacy counter-based OUIA ID generator for class components that cannot use hooks.
+ * Prefer useOUIAId or useOUIAProps for functional components.
  *
- * @param {string} componentType OUIA component type
- * @param {string} variant Optional variant to add to the generated ID
+ * @deprecated Use useOUIAId in functional components instead.
  */
 export function getDefaultOUIAId(componentType: string, variant?: string) {
-  /*
-  ouiaIdByRoute = {
-    [route+componentType]: [number]
-  }
-  */
-  try {
-    let key;
-    if (typeof window !== 'undefined') {
-      // browser environments
-      key = `${window.location.href}-${componentType}-${variant || ''}`;
-    } else {
-      // node/SSR environments
-      key = `${componentType}-${variant || ''}`;
-    }
-    if (!ouiaIdByRoute[key]) {
-      ouiaIdByRoute[key] = 0;
-    }
-    return `${ouiaPrefix}${componentType}-${variant ? `${variant}-` : ''}${++ouiaIdByRoute[key]}`;
-  } catch (exception) {
-    return `${ouiaPrefix}${componentType}-${variant ? `${variant}-` : ''}${++uid}`;
-  }
+  return `${ouiaPrefix}${componentType}-${variant ? `${variant}-` : ''}${++uid}`;
 }

package/src/helpers/Popper/thirdparty/popper-core/dom-utils/getDocumentElement.ts

@@ -7,5 +7,5 @@ import { Window } from '../types';
  */
 export default function getDocumentElement(element: Element | Window): HTMLElement {
   // $FlowFixMe: assume body is always available
-  return (isElement(element) ? element.ownerDocument : element.document).documentElement;
+  return ((isElement(element) ? element.ownerDocument : element.document) || window.document).documentElement;
 }

package/src/helpers/Popper/thirdparty/react-popper/usePopper.ts

@@ -35,6 +35,17 @@ type State = {
 
 const EMPTY_MODIFIERS: any = [];
 
+function isReferenceConnected(reference: Element | VirtualElement): boolean {
+  if (reference instanceof Element) {
+    return reference.isConnected;
+  }
+  const { contextElement } = reference;
+  if (contextElement instanceof Element) {
+    return contextElement.isConnected;
+  }
+  return true;
+}
+
 export const usePopper = (
   referenceElement: (Element | VirtualElement) | null | undefined,
   popperElement: HTMLElement | null | undefined,
@@ -114,6 +125,10 @@ export const usePopper = (
       return;
     }
 
+    if (!isReferenceConnected(referenceElement) || !popperElement.isConnected) {
+      return;
+    }
+
     const createPopper = options.createPopper || defaultCreatePopper;
     const popperInstance = createPopper(referenceElement, popperElement, popperOptions);
 

package/src/helpers/SSRSafeIds/SSRSafeIds.tsx

@@ -0,0 +1,24 @@
+import { useSSRSafeId } from '../useSSRSafeId';
+
+const ouiaPrefix = 'OUIA-Generated-';
+
+export interface SSRSafeIdsProps {
+  /** Prefix for the generated component ID */
+  prefix: string;
+  /** OUIA component type. If provided, a stable OUIA ID will be generated. */
+  ouiaComponentType?: string;
+  /** Children render function receiving (generatedId, generatedOuiaId?) */
+  children: (id: string, ouiaId?: string) => React.ReactNode;
+}
+
+/**
+ * Provides SSR/Strict-Mode-safe IDs for class components via render props.
+ * Uses useSSRSafeId() (React.useId) for both component ID and OUIA ID,
+ * ensuring consistent values between server and client rendering.
+ */
+export const SSRSafeIds = ({ prefix, ouiaComponentType, children }: SSRSafeIdsProps) => {
+  const id = useSSRSafeId(prefix);
+  const ouiaId = useSSRSafeId(ouiaComponentType ? `${ouiaPrefix}${ouiaComponentType}-` : 'pf-unused-');
+  return (children(id, ouiaComponentType ? ouiaId : undefined) as React.ReactElement) ?? null;
+};
+SSRSafeIds.displayName = 'SSRSafeIds';

package/src/helpers/constants.ts

@@ -10,11 +10,11 @@ import globalHeightBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global
 import globalHeightBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_height_xl';
 import globalHeightBreakpoint2xl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_height_2xl';
 
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
 export const SIDE = { RIGHT: 'right', LEFT: 'left', BOTH: 'both', NONE: 'none' };
 
@@ -55,9 +55,9 @@ export const globalHeightBreakpoints = {
 };
 
 export const statusIcons = {
-  success: CheckCircleIcon,
-  danger: ExclamationCircleIcon,
-  warning: ExclamationTriangleIcon,
-  info: InfoCircleIcon,
-  custom: BellIcon
+  success: RhUiCheckCircleFillIcon,
+  danger: RhUiErrorFillIcon,
+  warning: RhUiWarningFillIcon,
+  info: RhUiInformationFillIcon,
+  custom: RhUiNotificationFillIcon
 };

package/src/helpers/index.ts

@@ -8,6 +8,8 @@ export * from './OUIA/ouia';
 export * from './util';
 export * from './Popper/Popper';
 export * from './useIsomorphicLayout';
+export * from './useSSRSafeId';
+export * from './SSRSafeIds/SSRSafeIds';
 export * from './KeyboardHandler';
 export * from './resizeObserver';
 export * from './useInterval';

package/src/helpers/useSSRSafeId.ts

@@ -0,0 +1,18 @@
+import { useId, useState } from 'react';
+
+const reactUseId: (() => string) | undefined = typeof useId === 'function' ? useId : undefined;
+
+let counter = 0;
+
+/**
+ * SSR-safe ID generation hook. Uses React.useId() when available (React 18+)
+ * for guaranteed SSR/CSR match. Falls back to a counter-based approach for React 17.
+ */
+export const useSSRSafeId: (prefix?: string) => string = reactUseId
+  ? function useSSRSafeId(prefix = 'pf-'): string {
+      return `${prefix}${reactUseId!()}`;
+    }
+  : function useSSRSafeId(prefix = 'pf-'): string {
+      const [id] = useState(() => `${prefix}${++counter}`);
+      return id;
+    };

package/src/layouts/Bullseye/examples/Bullseye.md

@@ -1,7 +1,8 @@
 ---
 id: Bullseye
 cssPrefix: pf-v6-l-bullseye
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 propComponents: ['Bullseye']
 ---
 

package/src/layouts/Bullseye/examples/bullseye.css

@@ -1,5 +1,5 @@
-.ws-react-l-bullseye .pf-v6-l-bullseye,
-.ws-react-l-bullseye .pf-v6-l-bullseye > div {
+.ws-react-f-bullseye .pf-v6-l-bullseye,
+.ws-react-f-bullseye .pf-v6-l-bullseye > div {
   padding: var(--pf-t--global--spacer--md);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/src/layouts/Flex/examples/Flex.md

@@ -1,7 +1,8 @@
 ---
 id: Flex
 cssPrefix: pf-v6-l-flex
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 propComponents: ['Flex', 'FlexItem']
 ---
 

package/src/layouts/Flex/examples/flex.css

@@ -1,9 +1,9 @@
-.ws-react-l-flex .pf-v6-l-flex {
+.ws-react-f-flex .pf-v6-l-flex {
   padding: var(--pf-t--global--spacer--md);
 }
 
-.ws-react-l-flex .pf-v6-l-flex > div,
-.ws-react-l-flex .example-border {
+.ws-react-f-flex .pf-v6-l-flex > div,
+.ws-react-f-flex .example-border {
   padding: var(--pf-t--global--spacer--md);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/src/layouts/Gallery/examples/Gallery.md

@@ -1,7 +1,8 @@
 ---
 id: Gallery
 cssPrefix: pf-v6-l-gallery
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 propComponents: ['Gallery', 'GalleryItem']
 ---
 
@@ -11,123 +12,32 @@ import './gallery.css';
 
 ### Basic
 
-```js
-import { Gallery, GalleryItem } from '@patternfly/react-core';
-
-<Gallery>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-</Gallery>;
+```ts file="GalleryBasic.tsx"
+
 ```
 
 ### With gutters
 
-```js
-import { Gallery, GalleryItem } from '@patternfly/react-core';
-
-<Gallery hasGutter>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-</Gallery>;
+```ts file="GalleryWithGutters.tsx"
 ```
 
 ### Adjusting min widths
 
-```js
-import { Gallery, GalleryItem } from '@patternfly/react-core';
-
-<Gallery
-  hasGutter
-  minWidths={{
-    md: '100px',
-    lg: '150px',
-    xl: '200px',
-    '2xl': '300px'
-  }}
->
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-</Gallery>;
+```ts file="GalleryAdjustingMinWidths.tsx"
+
 ```
 
 ### Adjusting max widths
 
-```js
-import { Gallery, GalleryItem } from '@patternfly/react-core';
-
-<Gallery
-  hasGutter
-  maxWidths={{
-    md: '280px',
-    lg: '320px',
-    '2xl': '400px'
-  }}
->
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-</Gallery>;
+```ts file="GalleryAdjustingMaxWidths.tsx"
 ```
 
 ### Adjusting min and max widths
 
-```js
-import { Gallery, GalleryItem } from '@patternfly/react-core';
-
-<Gallery
-  hasGutter
-  minWidths={{
-    default: '100%',
-    md: '100px',
-    xl: '300px'
-  }}
-  maxWidths={{
-    md: '200px',
-    xl: '1fr'
-  }}
->
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-  <GalleryItem>Gallery Item</GalleryItem>
-</Gallery>;
+```ts file="GalleryAdjustingMinMaxWidths.tsx"
 ```
 
 ### Alternative components
 
-```js
-import { Gallery, GalleryItem } from '@patternfly/react-core';
-
-<Gallery component="ul">
-  <GalleryItem component="li">Gallery item</GalleryItem>
-  <GalleryItem component="li">Gallery item</GalleryItem>
-  <GalleryItem component="li">Gallery item</GalleryItem>
-  <GalleryItem component="li">Gallery item</GalleryItem>
-  <GalleryItem component="li">Gallery item</GalleryItem>
-</Gallery>;
+```ts file="GalleryAlternativeComponents.tsx"
 ```

package/src/layouts/Gallery/examples/GalleryAdjustingMaxWidths.tsx

@@ -0,0 +1,21 @@
+import { Gallery, GalleryItem } from '@patternfly/react-core';
+
+export const GalleryAdjustingMaxWidths: React.FunctionComponent = () => (
+  <Gallery
+    hasGutter
+    maxWidths={{
+      md: '280px',
+      lg: '320px',
+      '2xl': '400px'
+    }}
+  >
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+  </Gallery>
+);

package/src/layouts/Gallery/examples/GalleryAdjustingMinMaxWidths.tsx

@@ -0,0 +1,25 @@
+import { Gallery, GalleryItem } from '@patternfly/react-core';
+
+export const GalleryAdjustingMinMaxWidths: React.FunctionComponent = () => (
+  <Gallery
+    hasGutter
+    minWidths={{
+      default: '100%',
+      md: '100px',
+      xl: '300px'
+    }}
+    maxWidths={{
+      md: '200px',
+      xl: '1fr'
+    }}
+  >
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+  </Gallery>
+);

package/src/layouts/Gallery/examples/GalleryAdjustingMinWidths.tsx

@@ -0,0 +1,22 @@
+import { Gallery, GalleryItem } from '@patternfly/react-core';
+
+export const GalleryAdjustingMinWidths: React.FunctionComponent = () => (
+  <Gallery
+    hasGutter
+    minWidths={{
+      md: '100px',
+      lg: '150px',
+      xl: '200px',
+      '2xl': '300px'
+    }}
+  >
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+  </Gallery>
+);

package/src/layouts/Gallery/examples/GalleryAlternativeComponents.tsx

@@ -0,0 +1,11 @@
+import { Gallery, GalleryItem } from '@patternfly/react-core';
+
+export const GalleryAlternativeComponents: React.FunctionComponent = () => (
+  <Gallery component="ul">
+    <GalleryItem component="li">Gallery Item</GalleryItem>
+    <GalleryItem component="li">Gallery Item</GalleryItem>
+    <GalleryItem component="li">Gallery Item</GalleryItem>
+    <GalleryItem component="li">Gallery Item</GalleryItem>
+    <GalleryItem component="li">Gallery Item</GalleryItem>
+  </Gallery>
+);

package/src/layouts/Gallery/examples/GalleryBasic.tsx

@@ -0,0 +1,14 @@
+import { Gallery, GalleryItem } from '@patternfly/react-core';
+
+export const GalleryBasic: React.FunctionComponent = () => (
+  <Gallery>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+  </Gallery>
+);

package/src/layouts/Gallery/examples/GalleryWithGutters.tsx

@@ -0,0 +1,12 @@
+import { Gallery, GalleryItem } from '@patternfly/react-core';
+
+export const GalleryWithGutters: React.FunctionComponent = () => (
+  <Gallery hasGutter>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+    <GalleryItem>Gallery Item</GalleryItem>
+  </Gallery>
+);

package/src/layouts/Gallery/examples/gallery.css

@@ -1,8 +1,8 @@
-.ws-react-l-gallery .pf-v6-l-gallery {
+.ws-react-f-gallery .pf-v6-l-gallery {
   padding: var(--pf-t--global--spacer--md);
 }
 
-.ws-react-l-gallery .pf-v6-l-gallery > div {
+.ws-react-f-gallery .pf-v6-l-gallery > div {
   padding: var(--pf-t--global--spacer--md);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }