@patternfly/react-core 6.5.0-prerelease.39 → 6.5.0-prerelease.40

package/src/deprecated/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap

@@ -14,7 +14,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
         <button
           aria-label="Close"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-2"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rc:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -125,7 +125,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
         <nav
           aria-labelledby="pf-wizard-title-1"
           class="pf-v6-c-wizard__nav"
-          data-ouia-component-id="OUIA-Generated-WizardNav-3"
+          data-ouia-component-id="OUIA-Generated-WizardNav-:rd:"
           data-ouia-component-type="PF6/WizardNav"
           data-ouia-safe="true"
         >
@@ -139,7 +139,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
               <button
                 aria-current="step"
                 class="pf-v6-c-wizard__nav-link pf-m-current"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-7"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-:re:"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 type="button"
@@ -158,7 +158,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                 aria-current="false"
                 aria-expanded="false"
                 class="pf-v6-c-wizard__nav-link"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-8"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-:rf:"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 type="button"
@@ -216,7 +216,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                   <button
                     aria-current="false"
                     class="pf-v6-c-wizard__nav-link"
-                    data-ouia-component-id="OUIA-Generated-WizardNavItem-9"
+                    data-ouia-component-id="OUIA-Generated-WizardNavItem-:rh:"
                     data-ouia-component-type="PF6/WizardNavItem"
                     data-ouia-safe="true"
                     type="button"
@@ -234,7 +234,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                   <button
                     aria-current="false"
                     class="pf-v6-c-wizard__nav-link"
-                    data-ouia-component-id="OUIA-Generated-WizardNavItem-10"
+                    data-ouia-component-id="OUIA-Generated-WizardNavItem-:ri:"
                     data-ouia-component-type="PF6/WizardNavItem"
                     data-ouia-safe="true"
                     type="button"
@@ -254,7 +254,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-v6-c-wizard__nav-link"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-11"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-:rj:"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 type="button"
@@ -272,7 +272,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-v6-c-wizard__nav-link"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-12"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-:rk:"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 type="button"
@@ -312,7 +312,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
             >
               <button
                 class="pf-v6-c-button pf-m-secondary"
-                data-ouia-component-id="OUIA-Generated-Button-secondary-2"
+                data-ouia-component-id="OUIA-Generated-Button-secondary-:rl:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 disabled=""
@@ -330,7 +330,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
             >
               <button
                 class="pf-v6-c-button pf-m-primary"
-                data-ouia-component-id="OUIA-Generated-Button-primary-2"
+                data-ouia-component-id="OUIA-Generated-Button-primary-:rm:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="submit"
@@ -351,7 +351,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
             >
               <button
                 class="pf-v6-c-button pf-m-link"
-                data-ouia-component-id="OUIA-Generated-Button-link-2"
+                data-ouia-component-id="OUIA-Generated-Button-link-:rn:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -385,7 +385,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
         <button
           aria-label="Close"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-1"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -496,7 +496,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
         <nav
           aria-labelledby="pf-wizard-title-0"
           class="pf-v6-c-wizard__nav"
-          data-ouia-component-id="OUIA-Generated-WizardNav-1"
+          data-ouia-component-id="OUIA-Generated-WizardNav-:r1:"
           data-ouia-component-type="PF6/WizardNav"
           data-ouia-safe="true"
         >
@@ -510,7 +510,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               <button
                 aria-current="step"
                 class="pf-v6-c-wizard__nav-link pf-m-current"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-1"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-:r2:"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 id="step-A"
@@ -529,7 +529,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-v6-c-wizard__nav-link"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-2"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-:r3:"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 id="step-B"
@@ -551,7 +551,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                   <button
                     aria-current="false"
                     class="pf-v6-c-wizard__nav-link"
-                    data-ouia-component-id="OUIA-Generated-WizardNavItem-3"
+                    data-ouia-component-id="OUIA-Generated-WizardNavItem-:r5:"
                     data-ouia-component-type="PF6/WizardNavItem"
                     data-ouia-safe="true"
                     id="step-B-1"
@@ -570,7 +570,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                   <button
                     aria-current="false"
                     class="pf-v6-c-wizard__nav-link"
-                    data-ouia-component-id="OUIA-Generated-WizardNavItem-4"
+                    data-ouia-component-id="OUIA-Generated-WizardNavItem-:r6:"
                     data-ouia-component-type="PF6/WizardNavItem"
                     data-ouia-safe="true"
                     id="step-B-2"
@@ -591,7 +591,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-v6-c-wizard__nav-link"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-5"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-:r7:"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 id="step-C"
@@ -610,7 +610,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-v6-c-wizard__nav-link"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-6"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-:r8:"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 id="step-D"
@@ -651,7 +651,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
             >
               <button
                 class="pf-v6-c-button pf-m-secondary"
-                data-ouia-component-id="OUIA-Generated-Button-secondary-1"
+                data-ouia-component-id="OUIA-Generated-Button-secondary-:r9:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 disabled=""
@@ -669,7 +669,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
             >
               <button
                 class="pf-v6-c-button pf-m-primary"
-                data-ouia-component-id="OUIA-Generated-Button-primary-1"
+                data-ouia-component-id="OUIA-Generated-Button-primary-:ra:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="submit"
@@ -690,7 +690,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
             >
               <button
                 class="pf-v6-c-button pf-m-link"
-                data-ouia-component-id="OUIA-Generated-Button-link-1"
+                data-ouia-component-id="OUIA-Generated-Button-link-:rb:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -773,7 +773,7 @@ exports[`Wizard bare wiz 1`] = `
       >
         <nav
           class="pf-v6-c-wizard__nav"
-          data-ouia-component-id="OUIA-Generated-WizardNav-5"
+          data-ouia-component-id="OUIA-Generated-WizardNav-:ro:"
           data-ouia-component-type="PF6/WizardNav"
           data-ouia-safe="true"
         >
@@ -787,7 +787,7 @@ exports[`Wizard bare wiz 1`] = `
               <button
                 aria-current="step"
                 class="pf-v6-c-wizard__nav-link pf-m-current"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-13"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-:rp:"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 type="button"
@@ -827,7 +827,7 @@ exports[`Wizard bare wiz 1`] = `
             >
               <button
                 class="pf-v6-c-button pf-m-secondary"
-                data-ouia-component-id="OUIA-Generated-Button-secondary-3"
+                data-ouia-component-id="OUIA-Generated-Button-secondary-:rq:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 disabled=""
@@ -845,7 +845,7 @@ exports[`Wizard bare wiz 1`] = `
             >
               <button
                 class="pf-v6-c-button pf-m-primary"
-                data-ouia-component-id="OUIA-Generated-Button-primary-3"
+                data-ouia-component-id="OUIA-Generated-Button-primary-:rr:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="submit"
@@ -866,7 +866,7 @@ exports[`Wizard bare wiz 1`] = `
             >
               <button
                 class="pf-v6-c-button pf-m-link"
-                data-ouia-component-id="OUIA-Generated-Button-link-3"
+                data-ouia-component-id="OUIA-Generated-Button-link-:rs:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"

package/src/helpers/GenerateId/GenerateId.ts

@@ -1,4 +1,6 @@
-/** This Component can be used to wrap a functional component in order to generate a random ID
+/** SSR-safe ID generation component using render props.
+ * For function components, prefer the useSSRSafeId hook instead.
+ *
  * Example of how to use this component
  *
  * const Component = ({id}: {id: string}) => (
@@ -10,41 +12,21 @@
  *  </GenerateId>
  *  );
  */
-import { Component } from 'react';
-import { getUniqueId } from '../util';
-
-let currentId = 0;
-
-// gives us a unique (enough) id to add to the generated id that it should prevent issues with duplicate ids
-function getRandomId() {
-  if (typeof crypto !== 'undefined' && crypto.randomUUID) {
-    return crypto.randomUUID();
-  } else {
-    return getUniqueId();
-  }
-}
+import { useSSRSafeId } from '../useSSRSafeId';
 
 export interface GenerateIdProps {
-  /** String to prefix the random id with */
+  /** String to prefix the id with */
   prefix?: string;
   /** Component to be rendered with the generated id */
   children(id: string): React.ReactNode;
-  /** Flag to add randomness to the generated id, should be used whenever possible */
+  /** @deprecated Has no effect. Kept for backward compatibility. */
   isRandom?: boolean;
 }
 
-class GenerateId extends Component<GenerateIdProps, {}> {
-  static displayName = 'GenerateId';
-  static defaultProps = {
-    prefix: 'pf-random-id-',
-    isRandom: false
-  };
-  uniqueElement = this.props.isRandom ? getRandomId() : currentId++;
-  id = `${this.props.prefix}${this.uniqueElement}`;
-
-  render() {
-    return this.props.children(this.id);
-  }
-}
+const GenerateId = ({ prefix = 'pf-random-id-', children }: GenerateIdProps) => {
+  const id = useSSRSafeId(prefix);
+  return children(id) as React.ReactElement;
+};
+GenerateId.displayName = 'GenerateId';
 
 export { GenerateId };

package/src/helpers/GenerateId/__tests__/__snapshots__/GenerateId.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`generates id 1`] = `
 <DocumentFragment>
   <div
-    id="pf-random-id-0"
+    id="pf-random-id-:r0:"
   >
     div with random ID
   </div>

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/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/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;
+    };