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

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap

@@ -12,13 +12,13 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
         class="pf-v6-c-expandable-section__toggle"
       >
         <button
-          aria-controls="generated-id-content"
+          aria-controls="pf-expandable-section-:r2:-content"
           aria-expanded="true"
           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-:r3:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
-          id="generated-id-toggle"
+          id="pf-expandable-section-:r2:-toggle"
           type="button"
         >
           <span
@@ -71,9 +71,9 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
         </button>
       </div>
       <div
-        aria-labelledby="generated-id-toggle"
+        aria-labelledby="pf-expandable-section-:r2:-toggle"
         class="pf-v6-c-expandable-section__content"
-        id="generated-id-content"
+        id="pf-expandable-section-:r2:-content"
         role="region"
       >
         <ul
@@ -100,13 +100,13 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
         class="pf-v6-c-expandable-section__toggle"
       >
         <button
-          aria-controls="generated-id-content"
+          aria-controls="pf-expandable-section-:r6:-content"
           aria-expanded="true"
           class="pf-v6-c-button pf-m-link"
-          data-ouia-component-id="OUIA-Generated-Button-link-4"
+          data-ouia-component-id="OUIA-Generated-Button-link-:r7:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
-          id="generated-id-toggle"
+          id="pf-expandable-section-:r6:-toggle"
           type="button"
         >
           <span
@@ -185,9 +185,9 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
         </button>
       </div>
       <div
-        aria-labelledby="generated-id-toggle"
+        aria-labelledby="pf-expandable-section-:r6:-toggle"
         class="pf-v6-c-expandable-section__content"
-        id="generated-id-content"
+        id="pf-expandable-section-:r6:-content"
         role="region"
       >
         <ul
@@ -214,13 +214,13 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
         class="pf-v6-c-expandable-section__toggle"
       >
         <button
-          aria-controls="generated-id-content"
+          aria-controls="pf-expandable-section-:r4:-content"
           aria-expanded="true"
           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-:r5:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
-          id="generated-id-toggle"
+          id="pf-expandable-section-:r4:-toggle"
           type="button"
         >
           <span
@@ -275,9 +275,9 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
         </button>
       </div>
       <div
-        aria-labelledby="generated-id-toggle"
+        aria-labelledby="pf-expandable-section-:r4:-toggle"
         class="pf-v6-c-expandable-section__content"
-        id="generated-id-content"
+        id="pf-expandable-section-:r4:-content"
         role="region"
       >
         <ul
@@ -304,13 +304,13 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
         class="pf-v6-c-expandable-section__toggle"
       >
         <button
-          aria-controls="generated-id-content"
+          aria-controls="pf-expandable-section-:r0:-content"
           aria-expanded="true"
           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-:r1:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
-          id="generated-id-toggle"
+          id="pf-expandable-section-:r0:-toggle"
           type="button"
         >
           <span
@@ -363,9 +363,9 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
         </button>
       </div>
       <div
-        aria-labelledby="generated-id-toggle"
+        aria-labelledby="pf-expandable-section-:r0:-toggle"
         class="pf-v6-c-expandable-section__content"
-        id="generated-id-content"
+        id="pf-expandable-section-:r0:-content"
         role="region"
       >
         <ul

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap

@@ -103,7 +103,7 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
       <button
         aria-label="buttonAriaLabel"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-8"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:rf:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -243,7 +243,7 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
       <button
         aria-label="Remove from list"
         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-:r3:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -373,7 +373,7 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres
       <button
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-4"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:r7:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -503,7 +503,7 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe
       <button
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-5"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:r9:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -674,7 +674,7 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
       <button
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-7"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:rd:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -816,7 +816,7 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
       <button
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-3"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:r5:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -956,7 +956,7 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
       <button
         aria-label="Remove from list"
         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-:r1:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -1086,7 +1086,7 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe
       <button
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-6"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:rb:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"

package/src/components/Nav/Nav.tsx

@@ -1,7 +1,8 @@
 import { Component, createContext, createRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Nav/nav';
 import { css } from '@patternfly/react-styles';
-import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
+import { getOUIAProps, OUIAProps } from '../../helpers';
+import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 
 export type NavSelectClickHandler = (
   event: React.FormEvent<HTMLInputElement>,
@@ -63,10 +64,7 @@ export interface NavContextProps {
 export const navContextDefaults = {};
 export const NavContext = createContext<NavContextProps>(navContextDefaults);
 
-class Nav extends Component<
-  NavProps,
-  { isScrollable: boolean; ouiaStateId: string; flyoutRef: React.Ref<HTMLLIElement> | null }
-> {
+class Nav extends Component<NavProps, { isScrollable: boolean; flyoutRef: React.Ref<HTMLLIElement> | null }> {
   static displayName = 'Nav';
   static defaultProps: NavProps = {
     onSelect: () => undefined,
@@ -76,7 +74,6 @@ class Nav extends Component<
 
   state = {
     isScrollable: false,
-    ouiaStateId: getDefaultOUIAId(Nav.displayName, this.props.variant),
     flyoutRef: null as React.Ref<HTMLLIElement>
   };
 
@@ -127,47 +124,51 @@ class Nav extends Component<
     const isHorizontal = ['horizontal', 'horizontal-subnav'].includes(variant);
 
     return (
-      <NavContext.Provider
-        value={{
-          onSelect: (
-            event: React.FormEvent<HTMLInputElement>,
-            groupId: number | string,
-            itemId: number | string,
-            to: string,
-            preventDefault: boolean,
-            onClick: (
-              e: React.FormEvent<HTMLInputElement>,
-              itemId: number | string,
-              groupId: number | string,
-              to: string
-            ) => void
-          ) => this.onSelect(event, groupId, itemId, to, preventDefault, onClick),
-          onToggle: (event: React.MouseEvent<HTMLButtonElement>, groupId: number | string, expanded: boolean) =>
-            this.onToggle(event, groupId, expanded),
-          updateIsScrollable: (isScrollable: boolean) => this.setState({ isScrollable }),
-          isHorizontal: ['horizontal', 'horizontal-subnav'].includes(variant),
-          flyoutRef: this.state.flyoutRef,
-          setFlyoutRef: (flyoutRef) => this.setState({ flyoutRef }),
-          navRef: this.navRef
-        }}
-      >
-        <nav
-          className={css(
-            styles.nav,
-            isHorizontal && styles.modifiers.horizontal,
-            variant === 'docked' && styles.modifiers.docked,
-            variant === 'horizontal-subnav' && styles.modifiers.subnav,
-            this.state.isScrollable && styles.modifiers.scrollable,
-            className
-          )}
-          aria-label={ariaLabel || (variant === 'horizontal-subnav' ? 'Local' : 'Global')}
-          ref={this.navRef}
-          {...getOUIAProps(Nav.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
-          {...props}
-        >
-          {children}
-        </nav>
-      </NavContext.Provider>
+      <SSRSafeIds prefix="pf-" ouiaComponentType={`Nav${variant ? `-${variant}` : ''}`}>
+        {(_, generatedOuiaId) => (
+          <NavContext.Provider
+            value={{
+              onSelect: (
+                event: React.FormEvent<HTMLInputElement>,
+                groupId: number | string,
+                itemId: number | string,
+                to: string,
+                preventDefault: boolean,
+                onClick: (
+                  e: React.FormEvent<HTMLInputElement>,
+                  itemId: number | string,
+                  groupId: number | string,
+                  to: string
+                ) => void
+              ) => this.onSelect(event, groupId, itemId, to, preventDefault, onClick),
+              onToggle: (event: React.MouseEvent<HTMLButtonElement>, groupId: number | string, expanded: boolean) =>
+                this.onToggle(event, groupId, expanded),
+              updateIsScrollable: (isScrollable: boolean) => this.setState({ isScrollable }),
+              isHorizontal: ['horizontal', 'horizontal-subnav'].includes(variant),
+              flyoutRef: this.state.flyoutRef,
+              setFlyoutRef: (flyoutRef) => this.setState({ flyoutRef }),
+              navRef: this.navRef
+            }}
+          >
+            <nav
+              className={css(
+                styles.nav,
+                isHorizontal && styles.modifiers.horizontal,
+                variant === 'docked' && styles.modifiers.docked,
+                variant === 'horizontal-subnav' && styles.modifiers.subnav,
+                this.state.isScrollable && styles.modifiers.scrollable,
+                className
+              )}
+              aria-label={ariaLabel || (variant === 'horizontal-subnav' ? 'Local' : 'Global')}
+              ref={this.navRef}
+              {...getOUIAProps(Nav.displayName, ouiaId !== undefined ? ouiaId : generatedOuiaId, ouiaSafe)}
+              {...props}
+            >
+              {children}
+            </nav>
+          </NavContext.Provider>
+        )}
+      </SSRSafeIds>
     );
   }
 }

package/src/components/Nav/NavExpandable.tsx

@@ -2,11 +2,11 @@ import { Component } from 'react';
 import styles from '@patternfly/react-styles/css/components/Nav/nav';
 import { css } from '@patternfly/react-styles';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import { getUniqueId } from '../../helpers/util';
 import { NavContext } from './Nav';
 import { PageSidebarContext } from '../Page/PageSidebar';
 import { PickOptional } from '../../helpers/typeUtils';
-import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
+import { getOUIAProps, OUIAProps } from '../../helpers';
+import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 
 export interface NavExpandableProps
   extends Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, 'title'>, OUIAProps {
@@ -36,7 +36,6 @@ export interface NavExpandableProps
 
 interface NavExpandableState {
   expandedState: boolean;
-  ouiaStateId: string;
 }
 
 class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
@@ -51,11 +50,8 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
     id: ''
   };
 
-  id = this.props.id || getUniqueId();
-
   state = {
-    expandedState: this.props.isExpanded,
-    ouiaStateId: getDefaultOUIAId(NavExpandable.displayName)
+    expandedState: this.props.isExpanded
   };
 
   componentDidMount() {
@@ -96,7 +92,7 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
       ouiaId,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       groupId,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
       id,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       isExpanded,
@@ -106,58 +102,70 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
       ...props
     } = this.props;
 
-    const { expandedState, ouiaStateId } = this.state;
+    const { expandedState } = this.state;
 
     return (
-      <NavContext.Consumer>
-        {(context) => (
-          <li
-            className={css(
-              styles.navItem,
-              expandedState && styles.modifiers.expanded,
-              isActive && styles.modifiers.current,
-              className
-            )}
-            {...getOUIAProps(NavExpandable.displayName, ouiaId !== undefined ? ouiaId : ouiaStateId)}
-            {...props}
-          >
-            <PageSidebarContext.Consumer>
-              {({ isSidebarOpen }) => (
-                <button
-                  className={css(styles.navLink)}
-                  id={srText ? null : this.id}
-                  onClick={(event) => this.onExpand(event, context.onToggle)}
-                  aria-expanded={expandedState}
-                  tabIndex={isSidebarOpen ? null : -1}
-                  {...buttonProps}
+      <SSRSafeIds prefix="pf-nav-expandable-" ouiaComponentType="NavExpandable">
+        {(generatedId, generatedOuiaId) => {
+          const navId = id || generatedId;
+
+          return (
+            <NavContext.Consumer>
+              {(context) => (
+                <li
+                  className={css(
+                    styles.navItem,
+                    expandedState && styles.modifiers.expanded,
+                    isActive && styles.modifiers.current,
+                    className
+                  )}
+                  {...getOUIAProps(NavExpandable.displayName, ouiaId !== undefined ? ouiaId : generatedOuiaId)}
+                  {...props}
                 >
-                  {typeof title !== 'string' ? <span className={css(`${styles.nav}__link-text`)}>{title}</span> : title}
-                  <span className={css(styles.navToggle)}>
-                    <span className={css(styles.navToggleIcon)}>
-                      <AngleRightIcon />
-                    </span>
-                  </span>
-                </button>
-              )}
-            </PageSidebarContext.Consumer>
-            <section
-              className={css(styles.navSubnav)}
-              aria-labelledby={this.id}
-              hidden={expandedState ? null : true}
-              {...(!expandedState && { inert: '' })}
-            >
-              {srText && (
-                <h2 className="pf-v6-screen-reader" id={this.id}>
-                  {srText}
-                </h2>
+                  <PageSidebarContext.Consumer>
+                    {({ isSidebarOpen }) => (
+                      <button
+                        className={css(styles.navLink)}
+                        id={srText ? null : navId}
+                        onClick={(event) => this.onExpand(event, context.onToggle)}
+                        aria-expanded={expandedState}
+                        tabIndex={isSidebarOpen ? null : -1}
+                        {...buttonProps}
+                      >
+                        {typeof title !== 'string' ? (
+                          <span className={css(`${styles.nav}__link-text`)}>{title}</span>
+                        ) : (
+                          title
+                        )}
+                        <span className={css(styles.navToggle)}>
+                          <span className={css(styles.navToggleIcon)}>
+                            <AngleRightIcon />
+                          </span>
+                        </span>
+                      </button>
+                    )}
+                  </PageSidebarContext.Consumer>
+                  <section
+                    className={css(styles.navSubnav)}
+                    aria-labelledby={navId}
+                    hidden={expandedState ? null : true}
+                    {...(!expandedState && { inert: '' })}
+                  >
+                    {srText && (
+                      <h2 className="pf-v6-screen-reader" id={navId}>
+                        {srText}
+                      </h2>
+                    )}
+                    <ul className={css(styles.navList)} role="list">
+                      {children}
+                    </ul>
+                  </section>
+                </li>
               )}
-              <ul className={css(styles.navList)} role="list">
-                {children}
-              </ul>
-            </section>
-          </li>
-        )}
-      </NavContext.Consumer>
+            </NavContext.Consumer>
+          );
+        }}
+      </SSRSafeIds>
     );
   }
 }

package/src/components/Nav/NavGroup.tsx

@@ -1,6 +1,6 @@
 import styles from '@patternfly/react-styles/css/components/Nav/nav';
 import { css } from '@patternfly/react-styles';
-import { getUniqueId } from '../../helpers/util';
+import { useSSRSafeId } from '../../helpers';
 
 export interface NavGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Title shown for the group */
@@ -17,9 +17,11 @@ export const NavGroup: React.FunctionComponent<NavGroupProps> = ({
   title,
   children = null,
   className = '',
-  id = getUniqueId(),
+  id: idProp,
   ...props
 }: NavGroupProps) => {
+  const generatedId = useSSRSafeId();
+  const id = idProp ?? generatedId;
   if (!title && !props['aria-label']) {
     // eslint-disable-next-line no-console
     console.warn("For accessibility reasons an aria-label should be specified on nav groups if a title isn't");

package/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`NavExpandable should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <li
     class="pf-v6-c-nav__item ''"
-    data-ouia-component-id="OUIA-Generated-NavExpandable-1"
+    data-ouia-component-id="OUIA-Generated-NavExpandable-:r1:"
     data-ouia-component-type="PF6/NavExpandable"
     data-ouia-safe="true"
   >

package/src/components/Nav/__tests__/Generated/__snapshots__/NavItem.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`NavItem should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <li
     class="pf-v6-c-nav__item ''"
-    data-ouia-component-id="OUIA-Generated-NavItem-1"
+    data-ouia-component-id="OUIA-Generated-NavItem-:r0:"
     data-ouia-component-type="PF6/NavItem"
     data-ouia-safe="true"
   >