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

package/src/components/Popover/Popover.tsx

@@ -13,7 +13,7 @@ import popoverMaxWidth from '@patternfly/react-tokens/dist/esm/c_popover_MaxWidt
 import popoverMinWidth from '@patternfly/react-tokens/dist/esm/c_popover_MinWidth';
 import { FocusTrap } from '../../helpers';
 import { Popper } from '../../helpers/Popper/Popper';
-import { getUniqueId } from '../../helpers/util';
+import { useSSRSafeId } from '../../helpers';
 
 export enum PopoverPosition {
   auto = 'auto',
@@ -276,7 +276,8 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
 }: PopoverProps) => {
   // could make this a prop in the future (true | false | 'toggle')
   // const hideOnClick = true;
-  const uniqueId = id || getUniqueId();
+  const generatedId = useSSRSafeId();
+  const uniqueId = id || generatedId;
   const triggerManually = isVisible !== null;
   const [visible, setVisible] = useState(false);
   const [focusTrapActive, setFocusTrapActive] = useState(Boolean(propWithFocusTrap));

package/src/components/Popover/__tests__/Generated/__snapshots__/PopoverCloseButton.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`PopoverCloseButton should match snapshot (auto-generated) 1`] = `
     <button
       aria-label="string"
       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"
       style="pointer-events: auto;"

package/src/components/Progress/Progress.tsx

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Progress/progress';
 import { css } from '@patternfly/react-styles';
 import { ProgressContainer, ProgressMeasureLocation } from './ProgressContainer';
 import { AriaProps } from './ProgressBar';
-import { getUniqueId } from '../../helpers/util';
+import { GenerateId } from '../../helpers';
 
 export enum ProgressSize {
   sm = 'sm',
@@ -73,14 +73,11 @@ class Progress extends Component<ProgressProps> {
     'aria-describedby': null as string
   };
 
-  id = this.props.id || getUniqueId();
-
   render() {
     const {
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      id,
+      id: idProp,
       size,
-      /* eslint-enable @typescript-eslint/no-unused-vars */
+
       className,
       value,
       title,
@@ -100,28 +97,6 @@ class Progress extends Component<ProgressProps> {
       ...props
     } = this.props;
 
-    const progressBarAriaProps: AriaProps = {
-      'aria-valuemin': min,
-      'aria-valuenow': value,
-      'aria-valuemax': max
-    };
-
-    if (title || ariaLabelledBy) {
-      progressBarAriaProps['aria-labelledby'] = title ? `${this.id}-description` : ariaLabelledBy;
-    }
-
-    if (ariaLabel) {
-      progressBarAriaProps['aria-label'] = ariaLabel;
-    }
-
-    if (ariaDescribedBy) {
-      progressBarAriaProps['aria-describedby'] = ariaDescribedBy;
-    }
-
-    if (valueText) {
-      progressBarAriaProps['aria-valuetext'] = valueText;
-    }
-
     if (!title && !ariaLabelledBy && !ariaLabel) {
       /* eslint-disable no-console */
       console.warn(
@@ -129,34 +104,67 @@ class Progress extends Component<ProgressProps> {
       );
     }
 
-    const scaledValue = Math.min(100, Math.max(0, Math.floor(((value - min) / (max - min)) * 100))) || 0;
     return (
-      <div
-        {...props}
-        className={css(
-          styles.progress,
-          styles.modifiers[variant],
-          ['inside', 'outside'].includes(measureLocation) && styles.modifiers[measureLocation as 'inside' | 'outside'],
-          measureLocation === 'inside' ? styles.modifiers[ProgressSize.lg] : styles.modifiers[size as 'sm' | 'lg'],
-          !title && styles.modifiers.singleline,
-          className
-        )}
-        id={this.id}
-      >
-        <ProgressContainer
-          parentId={this.id}
-          value={scaledValue}
-          title={title}
-          label={label}
-          variant={variant}
-          measureLocation={measureLocation}
-          progressBarAriaProps={progressBarAriaProps}
-          isTitleTruncated={isTitleTruncated}
-          tooltipPosition={tooltipPosition}
-          helperText={helperText}
-          hideStatusIcon={hideStatusIcon}
-        />
-      </div>
+      <GenerateId prefix="pf-progress-">
+        {(generatedId) => {
+          const id = idProp || generatedId;
+
+          const progressBarAriaProps: AriaProps = {
+            'aria-valuemin': min,
+            'aria-valuenow': value,
+            'aria-valuemax': max
+          };
+
+          if (title || ariaLabelledBy) {
+            progressBarAriaProps['aria-labelledby'] = title ? `${id}-description` : ariaLabelledBy;
+          }
+
+          if (ariaLabel) {
+            progressBarAriaProps['aria-label'] = ariaLabel;
+          }
+
+          if (ariaDescribedBy) {
+            progressBarAriaProps['aria-describedby'] = ariaDescribedBy;
+          }
+
+          if (valueText) {
+            progressBarAriaProps['aria-valuetext'] = valueText;
+          }
+
+          const scaledValue = Math.min(100, Math.max(0, Math.floor(((value - min) / (max - min)) * 100))) || 0;
+          return (
+            <div
+              {...props}
+              className={css(
+                styles.progress,
+                styles.modifiers[variant],
+                ['inside', 'outside'].includes(measureLocation) &&
+                  styles.modifiers[measureLocation as 'inside' | 'outside'],
+                measureLocation === 'inside'
+                  ? styles.modifiers[ProgressSize.lg]
+                  : styles.modifiers[size as 'sm' | 'lg'],
+                !title && styles.modifiers.singleline,
+                className
+              )}
+              id={id}
+            >
+              <ProgressContainer
+                parentId={id}
+                value={scaledValue}
+                title={title}
+                label={label}
+                variant={variant}
+                measureLocation={measureLocation}
+                progressBarAriaProps={progressBarAriaProps}
+                isTitleTruncated={isTitleTruncated}
+                tooltipPosition={tooltipPosition}
+                helperText={helperText}
+                hideStatusIcon={hideStatusIcon}
+              />
+            </div>
+          );
+        }}
+      </GenerateId>
     );
   }
 }

package/src/components/Radio/Radio.tsx

@@ -2,8 +2,8 @@ import { Component } from 'react';
 import styles from '@patternfly/react-styles/css/components/Radio/radio';
 import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
-import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
-import { getUniqueId } from '../../helpers/util';
+import { getOUIAProps, OUIAProps } from '../../helpers';
+import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 
 export interface RadioProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'disabled' | 'label' | 'onChange' | 'type'>, OUIAProps {
@@ -49,7 +49,7 @@ export interface RadioProps
   ouiaSafe?: boolean;
 }
 
-class Radio extends Component<RadioProps, { ouiaStateId: string; descriptionId: string }> {
+class Radio extends Component<RadioProps> {
   static displayName = 'Radio';
   static defaultProps: PickOptional<RadioProps> = {
     className: '',
@@ -64,10 +64,6 @@ class Radio extends Component<RadioProps, { ouiaStateId: string; descriptionId:
       // eslint-disable-next-line no-console
       console.error('Radio:', 'Radio requires an aria-label to be specified');
     }
-    this.state = {
-      ouiaStateId: getDefaultOUIAId(Radio.displayName),
-      descriptionId: getUniqueId('pf-radio-description')
-    };
   }
 
   handleChange = (event: React.FormEvent<HTMLInputElement>) => {
@@ -102,67 +98,72 @@ class Radio extends Component<RadioProps, { ouiaStateId: string; descriptionId:
       console.error('Radio:', 'id is required to make input accessible');
     }
 
-    // Handle aria-describedby logic
-    let ariaDescribedByValue: string | undefined;
-    if (ariaDescribedBy !== undefined) {
-      ariaDescribedByValue = ariaDescribedBy === '' ? undefined : ariaDescribedBy;
-    } else if (description) {
-      ariaDescribedByValue = this.state.descriptionId;
-    }
+    return (
+      <SSRSafeIds prefix="pf-radio-description-" ouiaComponentType="Radio">
+        {(descriptionId, generatedOuiaId) => {
+          let ariaDescribedByValue: string | undefined;
+          if (ariaDescribedBy !== undefined) {
+            ariaDescribedByValue = ariaDescribedBy === '' ? undefined : ariaDescribedBy;
+          } else if (description) {
+            ariaDescribedByValue = descriptionId;
+          }
 
-    const inputRendered = (
-      <input
-        {...props}
-        className={css(styles.radioInput, inputClassName)}
-        type="radio"
-        onChange={this.handleChange}
-        aria-invalid={!isValid}
-        aria-describedby={ariaDescribedByValue}
-        disabled={isDisabled}
-        checked={checked || isChecked}
-        {...(checked === undefined && { defaultChecked })}
-        {...(!label && { 'aria-label': ariaLabel })}
-        {...getOUIAProps(Radio.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
-      />
-    );
+          const inputRendered = (
+            <input
+              {...props}
+              className={css(styles.radioInput, inputClassName)}
+              type="radio"
+              onChange={this.handleChange}
+              aria-invalid={!isValid}
+              aria-describedby={ariaDescribedByValue}
+              disabled={isDisabled}
+              checked={checked || isChecked}
+              {...(checked === undefined && { defaultChecked })}
+              {...(!label && { 'aria-label': ariaLabel })}
+              {...getOUIAProps(Radio.displayName, ouiaId !== undefined ? ouiaId : generatedOuiaId, ouiaSafe)}
+            />
+          );
 
-    const wrapWithLabel = (isLabelWrapped && !component) || component === 'label';
+          const wrapWithLabel = (isLabelWrapped && !component) || component === 'label';
 
-    const Label = wrapWithLabel ? 'span' : 'label';
-    const labelRendered = label ? (
-      <Label
-        className={css(styles.radioLabel, isDisabled && styles.modifiers.disabled)}
-        htmlFor={!wrapWithLabel ? props.id : undefined}
-      >
-        {label}
-      </Label>
-    ) : null;
+          const Label = wrapWithLabel ? 'span' : 'label';
+          const labelRendered = label ? (
+            <Label
+              className={css(styles.radioLabel, isDisabled && styles.modifiers.disabled)}
+              htmlFor={!wrapWithLabel ? props.id : undefined}
+            >
+              {label}
+            </Label>
+          ) : null;
 
-    const Component = component ?? (wrapWithLabel ? 'label' : 'div');
+          const WrapperComponent = component ?? (wrapWithLabel ? 'label' : 'div');
 
-    return (
-      <Component
-        className={css(styles.radio, !label && styles.modifiers.standalone, className)}
-        htmlFor={wrapWithLabel ? props.id : undefined}
-      >
-        {labelPosition === 'start' ? (
-          <>
-            {labelRendered}
-            {inputRendered}
-          </>
-        ) : (
-          <>
-            {inputRendered}
-            {labelRendered}
-          </>
-        )}
-        {description && (
-          <span id={this.state.descriptionId} className={css(styles.radioDescription)}>
-            {description}
-          </span>
-        )}
-        {body && <span className={css(styles.radioBody)}>{body}</span>}
-      </Component>
+          return (
+            <WrapperComponent
+              className={css(styles.radio, !label && styles.modifiers.standalone, className)}
+              htmlFor={wrapWithLabel ? props.id : undefined}
+            >
+              {labelPosition === 'start' ? (
+                <>
+                  {labelRendered}
+                  {inputRendered}
+                </>
+              ) : (
+                <>
+                  {inputRendered}
+                  {labelRendered}
+                </>
+              )}
+              {description && (
+                <span id={descriptionId} className={css(styles.radioDescription)}>
+                  {description}
+                </span>
+              )}
+              {body && <span className={css(styles.radioBody)}>{body}</span>}
+            </WrapperComponent>
+          );
+        }}
+      </SSRSafeIds>
     );
   }
 }

package/src/components/Radio/__tests__/__snapshots__/Radio.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`Radio controlled 1`] = `
       aria-label="check"
       checked=""
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-1"
+      data-ouia-component-id="OUIA-Generated-Radio-:r1:"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"
@@ -30,7 +30,7 @@ exports[`Radio isDisabled 1`] = `
       aria-invalid="false"
       aria-label="check"
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-3"
+      data-ouia-component-id="OUIA-Generated-Radio-:r5:"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       disabled=""
@@ -51,7 +51,7 @@ exports[`Radio isLabelWrapped 1`] = `
     <input
       aria-invalid="false"
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-5"
+      data-ouia-component-id="OUIA-Generated-Radio-:r9:"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"
@@ -76,7 +76,7 @@ exports[`Radio label is function 1`] = `
       aria-invalid="false"
       checked=""
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-7"
+      data-ouia-component-id="OUIA-Generated-Radio-:rd:"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"
@@ -104,7 +104,7 @@ exports[`Radio label is node 1`] = `
       aria-invalid="false"
       checked=""
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-8"
+      data-ouia-component-id="OUIA-Generated-Radio-:rf:"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"
@@ -132,7 +132,7 @@ exports[`Radio label is string 1`] = `
       aria-invalid="false"
       checked=""
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-6"
+      data-ouia-component-id="OUIA-Generated-Radio-:rb:"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"
@@ -163,7 +163,7 @@ exports[`Radio labelPosition is "start" 1`] = `
     <input
       aria-invalid="false"
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-4"
+      data-ouia-component-id="OUIA-Generated-Radio-:r7:"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"
@@ -184,7 +184,7 @@ exports[`Radio passing HTML attribute 1`] = `
       aria-labelledby="labelId"
       checked=""
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-10"
+      data-ouia-component-id="OUIA-Generated-Radio-:rj:"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"
@@ -210,7 +210,7 @@ exports[`Radio passing class 1`] = `
       aria-invalid="false"
       checked=""
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-9"
+      data-ouia-component-id="OUIA-Generated-Radio-:rh:"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"
@@ -236,7 +236,7 @@ exports[`Radio uncontrolled 1`] = `
       aria-invalid="false"
       aria-label="check"
       class="pf-v6-c-radio__input"
-      data-ouia-component-id="OUIA-Generated-Radio-2"
+      data-ouia-component-id="OUIA-Generated-Radio-:r3:"
       data-ouia-component-type="PF6/Radio"
       data-ouia-safe="true"
       id="check"

package/src/components/SearchInput/AdvancedSearchMenu.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import { Button } from '../Button';
 import { ActionGroup, Form, FormGroup } from '../Form';
 import { TextInput } from '../TextInput';
-import { GenerateId } from '../../helpers';
+import { useSSRSafeId } from '../../helpers';
 import { SearchInputSearchAttribute } from './SearchInput';
 import { Panel, PanelMain, PanelMainBody } from '../Panel';
 import { css } from '@patternfly/react-styles';
@@ -67,6 +67,7 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
   isSearchMenuOpen,
   onToggleAdvancedMenu
 }: AdvancedSearchMenuProps) => {
+  const hasWordsId = useSSRSafeId();
   const firstAttrRef = useRef(null);
   const [putFocusBackOnInput, setPutFocusBackOnInput] = useState(false);
 
@@ -182,18 +183,14 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
       }
     });
     formGroups.push(
-      <GenerateId key={'hasWords'}>
-        {(randomId) => (
-          <FormGroup label={hasWordsAttrLabel} fieldId={randomId}>
-            <TextInput
-              type="text"
-              id={randomId}
-              value={getValue('haswords')}
-              onChange={(evt, value) => handleValueChange('haswords', value, evt)}
-            />
-          </FormGroup>
-        )}
-      </GenerateId>
+      <FormGroup key="hasWords" label={hasWordsAttrLabel} fieldId={hasWordsId}>
+        <TextInput
+          type="text"
+          id={hasWordsId}
+          value={getValue('haswords')}
+          onChange={(evt, value) => handleValueChange('haswords', value, evt)}
+        />
+      </FormGroup>
     );
     return formGroups;
   };

package/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap

@@ -471,7 +471,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                 >
                   <label
                     class="pf-v6-c-form__label"
-                    for="generated-id"
+                    for="pf-:r0:"
                   >
                     <span
                       class="pf-v6-c-form__label-text"
@@ -489,7 +489,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   >
                     <input
                       aria-invalid="false"
-                      id="generated-id"
+                      id="pf-:r0:"
                       type="text"
                       value=""
                     />

package/src/components/Select/Select.tsx

@@ -2,7 +2,8 @@ import { forwardRef, useEffect, useRef } from 'react';
 import { css } from '@patternfly/react-styles';
 import { Menu, MenuContent, MenuProps } from '../Menu';
 import { Popper, PopperOptions } from '../../helpers/Popper/Popper';
-import { getOUIAProps, OUIAProps, getDefaultOUIAId, onToggleArrowKeydownDefault } from '../../helpers';
+import { getOUIAProps, OUIAProps, onToggleArrowKeydownDefault } from '../../helpers';
+import { useOUIAId } from '../../helpers/OUIA/ouia';
 import type { SelectOptionProps } from './SelectOption';
 
 /** @deprecated Use PopperOptions instead */
@@ -92,6 +93,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   focusTimeoutDelay = 0,
   ...props
 }: SelectProps & OUIAProps) => {
+  const generatedOuiaId = useOUIAId(Select.displayName, props.ouiaId);
   const localMenuRef = useRef<HTMLDivElement>(undefined);
   const localToggleRef = useRef<HTMLButtonElement>(undefined);
 
@@ -179,11 +181,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
       isPlain={isPlain}
       selected={selected}
       isScrollable={isScrollable ?? (menuHeight !== undefined || maxMenuHeight !== undefined)}
-      {...getOUIAProps(
-        Select.displayName,
-        props.ouiaId !== undefined ? props.ouiaId : getDefaultOUIAId(Select.displayName),
-        props.ouiaSafe !== undefined ? props.ouiaSafe : true
-      )}
+      {...getOUIAProps(Select.displayName, generatedOuiaId, props.ouiaSafe !== undefined ? props.ouiaSafe : true)}
       {...props}
     >
       <MenuContent menuHeight={menuHeight} maxMenuHeight={maxMenuHeight}>

package/src/components/SkipToContent/__tests__/__snapshots__/SkipToContent.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`Verify Skip To Content 1`] = `
   >
     <a
       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-:r0:"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       href="#main-content"

package/src/components/Slider/__tests__/__snapshots__/Slider.test.tsx.snap

@@ -62,7 +62,7 @@ exports[`slider renders continuous slider 1`] = `
         <input
           aria-invalid="false"
           aria-label="Slider value input"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-:r1:"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           type="number"
@@ -256,7 +256,7 @@ exports[`slider renders discrete slider 1`] = `
         <input
           aria-invalid="false"
           aria-label="Slider value input"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-:r3:"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           type="number"
@@ -428,7 +428,7 @@ exports[`slider renders slider with input 1`] = `
             <input
               aria-invalid="false"
               aria-label="Slider value input"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-:r5:"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               type="number"
@@ -518,7 +518,7 @@ exports[`slider renders slider with input above thumb 1`] = `
               <input
                 aria-invalid="false"
                 aria-label="Slider value input"
-                data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+                data-ouia-component-id="OUIA-Generated-TextInputBase-:r7:"
                 data-ouia-component-type="PF6/TextInput"
                 data-ouia-safe="true"
                 type="number"
@@ -554,7 +554,7 @@ exports[`slider renders slider with input actions 1`] = `
       <button
         aria-label="Minus"
         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-:r8:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"
@@ -613,7 +613,7 @@ exports[`slider renders slider with input actions 1`] = `
       <button
         aria-label="Plus"
         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-:r9:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"