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

package/src/components/TimePicker/TimePicker.tsx

@@ -2,7 +2,6 @@ import { Component, createRef } from 'react';
 import { css } from '@patternfly/react-styles';
 import datePickerStyles from '@patternfly/react-styles/css/components/DatePicker/date-picker';
 import menuStyles from '@patternfly/react-styles/css/components/Menu/menu';
-import { getUniqueId } from '../../helpers';
 import { Popper } from '../../helpers/Popper/Popper';
 import { Menu, MenuContent, MenuList, MenuItem } from '../Menu';
 import { InputGroup, InputGroupItem } from '../InputGroup';
@@ -22,6 +21,7 @@ import {
 import { HelperText, HelperTextItem } from '../HelperText';
 import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
 import cssDatePickerFormControlWidth from '@patternfly/react-tokens/dist/esm/c_date_picker__input_c_form_control_Width';
+import { GenerateId } from '../../helpers';
 
 export interface TimePickerProps extends Omit<
   React.HTMLProps<HTMLDivElement>,
@@ -479,92 +479,99 @@ class TimePicker extends Component<TimePickerProps, TimePickerState> {
     const style = { [cssDatePickerFormControlWidth.name]: width } as React.CSSProperties;
     const options = makeTimeOptions(stepMinutes, !is24Hour, delimiter, minTimeState, maxTimeState, includeSeconds);
     const isValidFormat = this.isValidFormat(timeState);
-    const randomId = id || getUniqueId('time-picker');
-
-    const getParentElement = () => {
-      if (this.baseComponentRef && this.baseComponentRef.current) {
-        return this.baseComponentRef.current.parentElement;
-      }
-      return null;
-    };
-
-    const menuContainer = (
-      <Menu ref={this.menuRef} isScrollable>
-        <MenuContent maxMenuHeight="200px">
-          <MenuList aria-label={ariaLabel}>
-            {options.map((option, index) => (
-              <MenuItem onClick={this.onSelect} key={option} id={`${randomId}-option-${index}`}>
-                {option}
-              </MenuItem>
-            ))}
-          </MenuList>
-        </MenuContent>
-      </Menu>
-    );
-
-    const textInput = (
-      <TextInput
-        aria-haspopup="menu"
-        id={`${randomId}-input`}
-        aria-label={ariaLabel}
-        validated={isInvalid ? 'error' : 'default'}
-        placeholder={placeholder}
-        value={timeState || ''}
-        type="text"
-        customIcon={<OutlinedClockIcon />}
-        onClick={this.onInputClick}
-        onChange={this.onInputChange}
-        autoComplete="off"
-        isDisabled={isDisabled}
-        isExpanded={isTimeOptionsOpen}
-        ref={this.inputRef}
-        {...inputProps}
-      />
-    );
-
-    let calculatedAppendTo;
-    switch (menuAppendTo) {
-      case 'inline':
-        calculatedAppendTo = () => this.toggleRef.current;
-        break;
-      case 'parent':
-        calculatedAppendTo = getParentElement;
-        break;
-      default:
-        calculatedAppendTo = menuAppendTo as HTMLElement;
-    }
 
     return (
-      <div ref={this.baseComponentRef} className={css(datePickerStyles.datePicker, className)}>
-        <div className={css(datePickerStyles.datePickerInput)} style={style} {...props}>
-          <InputGroup>
-            <InputGroupItem>
-              <div id={randomId}>
-                <div ref={this.toggleRef} style={{ paddingLeft: '0' }}>
-                  <Popper
-                    appendTo={calculatedAppendTo}
-                    trigger={textInput}
-                    triggerRef={this.toggleRef}
-                    popper={menuContainer}
-                    popperRef={this.menuRef}
-                    isVisible={isTimeOptionsOpen}
-                    zIndex={zIndex}
-                  />
-                </div>
+      <GenerateId prefix="time-picker-">
+        {(generatedId) => {
+          const randomId = id || generatedId;
+
+          const getParentElement = () => {
+            if (this.baseComponentRef && this.baseComponentRef.current) {
+              return this.baseComponentRef.current.parentElement;
+            }
+            return null;
+          };
+
+          const menuContainer = (
+            <Menu ref={this.menuRef} isScrollable>
+              <MenuContent maxMenuHeight="200px">
+                <MenuList aria-label={ariaLabel}>
+                  {options.map((option, index) => (
+                    <MenuItem onClick={this.onSelect} key={option} id={`${randomId}-option-${index}`}>
+                      {option}
+                    </MenuItem>
+                  ))}
+                </MenuList>
+              </MenuContent>
+            </Menu>
+          );
+
+          const textInput = (
+            <TextInput
+              aria-haspopup="menu"
+              id={`${randomId}-input`}
+              aria-label={ariaLabel}
+              validated={isInvalid ? 'error' : 'default'}
+              placeholder={placeholder}
+              value={timeState || ''}
+              type="text"
+              customIcon={<OutlinedClockIcon />}
+              onClick={this.onInputClick}
+              onChange={this.onInputChange}
+              autoComplete="off"
+              isDisabled={isDisabled}
+              isExpanded={isTimeOptionsOpen}
+              ref={this.inputRef}
+              {...inputProps}
+            />
+          );
+
+          let calculatedAppendTo;
+          switch (menuAppendTo) {
+            case 'inline':
+              calculatedAppendTo = () => this.toggleRef.current;
+              break;
+            case 'parent':
+              calculatedAppendTo = getParentElement;
+              break;
+            default:
+              calculatedAppendTo = menuAppendTo as HTMLElement;
+          }
+
+          return (
+            <div ref={this.baseComponentRef} className={css(datePickerStyles.datePicker, className)}>
+              <div className={css(datePickerStyles.datePickerInput)} style={style} {...props}>
+                <InputGroup>
+                  <InputGroupItem>
+                    <div id={randomId}>
+                      <div ref={this.toggleRef} style={{ paddingLeft: '0' }}>
+                        <Popper
+                          appendTo={calculatedAppendTo}
+                          trigger={textInput}
+                          triggerRef={this.toggleRef}
+                          popper={menuContainer}
+                          popperRef={this.menuRef}
+                          isVisible={isTimeOptionsOpen}
+                          zIndex={zIndex}
+                        />
+                      </div>
+                    </div>
+                  </InputGroupItem>
+                </InputGroup>
+                {isInvalid && (
+                  <div className={css(datePickerStyles.datePickerHelperText)}>
+                    <HelperText>
+                      <HelperTextItem variant="error">
+                        {!isValidFormat ? invalidFormatErrorMessage : invalidMinMaxErrorMessage}
+                      </HelperTextItem>
+                    </HelperText>
+                  </div>
+                )}
               </div>
-            </InputGroupItem>
-          </InputGroup>
-          {isInvalid && (
-            <div className={css(datePickerStyles.datePickerHelperText)}>
-              <HelperText>
-                <HelperTextItem variant="error">
-                  {!isValidFormat ? invalidFormatErrorMessage : invalidMinMaxErrorMessage}
-                </HelperTextItem>
-              </HelperText>
             </div>
-          )}
-        </div>
-      </div>
+          );
+        }}
+      </GenerateId>
     );
   }
 }

package/src/components/Toolbar/Toolbar.tsx

@@ -1,11 +1,11 @@
 import { Component, createRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
-import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import { css } from '@patternfly/react-styles';
 import { ToolbarContext } from './ToolbarUtils';
 import { ToolbarLabelGroupContent } from './ToolbarLabelGroupContent';
 import { formatBreakpointMods, canUseDOM } from '../../helpers/util';
-import { getDefaultOUIAId, getOUIAProps, OUIAProps } from '../../helpers';
+import { getOUIAProps, OUIAProps } from '../../helpers';
+import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 import { PageContext } from '../Page/PageContext';
 
 export enum ToolbarColorVariant {
@@ -71,7 +71,6 @@ export interface ToolbarState {
   filterInfo: FilterInfo;
   /** Used to keep track of window width so we can collapse expanded content when window is resizing */
   windowWidth: number;
-  ouiaStateId: string;
 }
 
 interface FilterInfo {
@@ -86,8 +85,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
   state = {
     isManagedToggleExpanded: false,
     filterInfo: {},
-    windowWidth: canUseDOM ? window.innerWidth : 1200,
-    ouiaStateId: getDefaultOUIAId(Toolbar.displayName)
+    windowWidth: 1200
   };
 
   isToggleManaged = () => !(this.props.isExpanded || !!this.props.toggleIsExpanded);
@@ -108,6 +106,9 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
   };
 
   componentDidMount() {
+    if (canUseDOM) {
+      this.setState({ windowWidth: window.innerWidth });
+    }
     if (this.isToggleManaged() && canUseDOM) {
       window.addEventListener('resize', this.closeExpandableContent);
     }
@@ -131,7 +132,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
   getNumberOfFilters = () =>
     Object.values(this.state.filterInfo).reduce((acc: any, cur: any) => acc + cur, 0) as number;
 
-  renderToolbar = (randomId: string) => {
+  renderToolbar = (randomId: string, generatedOuiaId?: string) => {
     const {
       hasNoPadding,
       clearAllFilters,
@@ -178,7 +179,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
               className
             )}
             id={randomId}
-            {...getOUIAProps(Toolbar.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
+            {...getOUIAProps(Toolbar.displayName, ouiaId !== undefined ? ouiaId : generatedOuiaId)}
             {...props}
           >
             <ToolbarContext.Provider
@@ -215,10 +216,10 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
   };
 
   render() {
-    return this.props.id ? (
-      this.renderToolbar(this.props.id)
-    ) : (
-      <GenerateId>{(randomId) => this.renderToolbar(randomId)}</GenerateId>
+    return (
+      <SSRSafeIds prefix="pf-random-id-" ouiaComponentType="Toolbar">
+        {(generatedId, generatedOuiaId) => this.renderToolbar(this.props.id || generatedId, generatedOuiaId)}
+      </SSRSafeIds>
     );
   }
 }

package/src/components/Toolbar/ToolbarLabelGroupContent.tsx

@@ -1,7 +1,6 @@
 import { Component, RefObject } from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
-import { canUseDOM } from '../../helpers/util';
 
 import { ToolbarItem } from './ToolbarItem';
 import { Button } from '../Button';
@@ -32,7 +31,7 @@ export interface ToolbarLabelGroupContentProps extends React.HTMLProps<HTMLDivEl
   customLabelGroupContent?: React.ReactNode;
 }
 
-class ToolbarLabelGroupContent extends Component<ToolbarLabelGroupContentProps> {
+class ToolbarLabelGroupContent extends Component<ToolbarLabelGroupContentProps, { viewportWidth: number }> {
   static displayName = 'ToolbarLabelGroupContent';
   static defaultProps: PickOptional<ToolbarLabelGroupContentProps> = {
     clearFiltersButtonText: 'Clear all filters',
@@ -40,6 +39,23 @@ class ToolbarLabelGroupContent extends Component<ToolbarLabelGroupContentProps>
     numberOfFiltersText: (numberOfFilters: number) => `${numberOfFilters} filters applied`
   };
 
+  state = {
+    viewportWidth: 1200
+  };
+
+  handleResize = () => {
+    this.setState({ viewportWidth: window.innerWidth });
+  };
+
+  componentDidMount() {
+    this.handleResize();
+    window.addEventListener('resize', this.handleResize);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+  }
+
   render() {
     const {
       className,
@@ -62,9 +78,8 @@ class ToolbarLabelGroupContent extends Component<ToolbarLabelGroupContentProps>
     let collapseListedFilters = false;
     if (collapseListedFiltersBreakpoint === 'all') {
       collapseListedFilters = true;
-    } else if (canUseDOM) {
-      collapseListedFilters =
-        (canUseDOM ? window.innerWidth : 1200) < globalBreakpoints[collapseListedFiltersBreakpoint];
+    } else if (collapseListedFiltersBreakpoint) {
+      collapseListedFilters = this.state.viewportWidth < globalBreakpoints[collapseListedFiltersBreakpoint];
     }
 
     const isHidden = numberOfFilters === 0 || isExpanded;

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -6,7 +6,7 @@ import { ToolbarGroupProps } from './ToolbarGroup';
 import { ToolbarContext, ToolbarContentContext } from './ToolbarUtils';
 import { Button } from '../Button';
 import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg';
-import { formatBreakpointMods, toCamel, canUseDOM } from '../../helpers/util';
+import { formatBreakpointMods, toCamel } from '../../helpers/util';
 import { PageContext } from '../Page/PageContext';
 import { ToolbarExpandableContent } from './ToolbarExpandableContent';
 
@@ -157,7 +157,7 @@ class ToolbarToggleGroup extends Component<ToolbarToggleGroupProps> {
   expandableContentRef = createRef<HTMLDivElement>();
 
   isContentPopup = () => {
-    const viewportSize = canUseDOM ? window.innerWidth : 1200;
+    const viewportSize = typeof window !== 'undefined' ? window.innerWidth : 1200;
     const lgBreakpointValue = parseInt(globalBreakpointLg.value);
     return viewportSize < lgBreakpointValue;
   };

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

@@ -4,7 +4,7 @@ exports[`Toolbar should render inset 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-toolbar pf-m-inset-none pf-m-inset-sm-on-md pf-m-inset-2xl-on-xl pf-m-inset-lg-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Toolbar-1"
+    data-ouia-component-id="OUIA-Generated-Toolbar-:r1:"
     data-ouia-component-type="PF6/Toolbar"
     data-ouia-safe="true"
     id="toolbar"
@@ -51,7 +51,7 @@ exports[`Toolbar should render with custom label content 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-toolbar pf-m-toggle-group-container"
-    data-ouia-component-id="OUIA-Generated-Toolbar-4"
+    data-ouia-component-id="OUIA-Generated-Toolbar-:r7:"
     data-ouia-component-type="PF6/Toolbar"
     data-ouia-safe="true"
     id="toolbar-with-filter"
@@ -72,7 +72,7 @@ exports[`Toolbar should render with custom label content 1`] = `
               aria-haspopup="false"
               aria-label="Show Filters"
               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"
@@ -144,7 +144,7 @@ exports[`Toolbar should render with custom label content 1`] = `
                       <button
                         aria-label="Close New"
                         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
-                        data-ouia-component-id="OUIA-Generated-Button-plain-2"
+                        data-ouia-component-id="OUIA-Generated-Button-plain-:rb:"
                         data-ouia-component-type="PF6/Button"
                         data-ouia-safe="true"
                         type="button"
@@ -203,7 +203,7 @@ exports[`Toolbar should render with custom label content 1`] = `
                       <button
                         aria-label="Close Pending"
                         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
-                        data-ouia-component-id="OUIA-Generated-Button-plain-3"
+                        data-ouia-component-id="OUIA-Generated-Button-plain-:rc:"
                         data-ouia-component-type="PF6/Button"
                         data-ouia-safe="true"
                         type="button"
@@ -250,7 +250,7 @@ exports[`Toolbar should render with custom label content 1`] = `
                 aria-label="Close label group"
                 aria-labelledby="remove_group_generated-id generated-id"
                 class="pf-v6-c-button pf-m-plain pf-m-small"
-                data-ouia-component-id="OUIA-Generated-Button-plain-4"
+                data-ouia-component-id="OUIA-Generated-Button-plain-:rd:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 id="remove_group_generated-id"
@@ -303,7 +303,7 @@ exports[`Toolbar should render with custom label content 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-link pf-m-inline"
-            data-ouia-component-id="OUIA-Generated-Button-link-1"
+            data-ouia-component-id="OUIA-Generated-Button-link-:r9:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -320,7 +320,7 @@ exports[`Toolbar should render with custom label content 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-link pf-m-inline"
-            data-ouia-component-id="OUIA-Generated-Button-link-2"
+            data-ouia-component-id="OUIA-Generated-Button-link-:ra:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"

package/src/components/Tooltip/Tooltip.tsx

@@ -4,6 +4,7 @@ import { css } from '@patternfly/react-styles';
 import { TooltipContent } from './TooltipContent';
 import { TooltipArrow } from './TooltipArrow';
 import { KeyTypes } from '../../helpers/constants';
+import { useSSRSafeId } from '../../helpers';
 import tooltipMaxWidth from '@patternfly/react-tokens/dist/esm/c_tooltip_MaxWidth';
 import { Popper } from '../../helpers/Popper/Popper';
 
@@ -136,9 +137,6 @@ export interface TooltipProps extends Omit<React.HTMLProps<HTMLDivElement>, 'con
   animationDuration?: number;
 }
 
-// id for associating trigger with the content aria-describedby or aria-labelledby
-let pfTooltipIdCounter = 1;
-
 export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   content: bodyContent,
   position = 'top',
@@ -157,7 +155,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   aria = 'describedby',
   // For every initial starting position, there are 3 escape positions
   flipBehavior = ['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom'],
-  id = `pf-tooltip-${pfTooltipIdCounter++}`,
+  id: idProp,
   children,
   animationDuration = 300,
   triggerRef,
@@ -165,6 +163,8 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   onTooltipHidden = () => {},
   ...rest
 }: TooltipProps) => {
+  const generatedId = useSSRSafeId('pf-tooltip-');
+  const id = idProp ?? generatedId;
   // could make this a prop in the future (true | false | 'toggle')
   const hideOnClick = true;
   const triggerOnMouseenter = trigger.includes('mouseenter');
@@ -210,7 +210,10 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
     if (!existingAria) {
       return;
     }
-    const newAria = existingAria.replace(new RegExp(`\\b${id}\\b`, 'g'), '').trim();
+    const newAria = existingAria
+      .split(/\s+/)
+      .filter((token) => token !== id)
+      .join(' ');
     if (newAria) {
       element.setAttribute(attributeName, newAria);
     } else {

package/src/components/TreeView/TreeViewListItem.tsx

@@ -4,7 +4,7 @@ import styles from '@patternfly/react-styles/css/components/TreeView/tree-view';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { TreeViewDataItem } from './TreeView';
 import { Badge } from '../Badge';
-import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+import { useSSRSafeId } from '../../helpers';
 import { useHasAnimations } from '../../helpers';
 
 export interface TreeViewCheckProps extends Omit<Partial<React.InputHTMLAttributes<HTMLInputElement>>, 'checked'> {
@@ -113,6 +113,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   useMemo
 }: TreeViewListItemProps) => {
+  const randomId = useSSRSafeId(isSelectable ? 'selectable-id' : 'checkbox-id');
   const hasAnimations = useHasAnimations(hasAnimationsProp);
   const [internalIsExpanded, setIsExpanded] = useState(defaultExpanded);
   useEffect(() => {
@@ -243,41 +244,37 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       {...(isFullyDisabled && { 'aria-disabled': true })}
     >
       <div className={css(styles.treeViewContent)}>
-        <GenerateId prefix={isSelectable ? 'selectable-id' : 'checkbox-id'}>
-          {(randomId) => (
-            <Component
-              className={css(
-                styles.treeViewNode,
-                isSelected && styles.modifiers.current,
-                isDisabled && styles.modifiers.disabled
-              )}
-              onClick={(evt: React.MouseEvent) => {
-                if (!hasCheckbox) {
-                  !isDisabled && onSelect && onSelect(evt, itemData, parentItem);
-                  if (!isDisabled && !isSelectable && children && evt.isDefaultPrevented() !== true) {
-                    if (internalIsExpanded) {
-                      onCollapse && onCollapse(evt, itemData, parentItem);
-                    } else {
-                      onExpand && onExpand(evt, itemData, parentItem);
-                    }
-                    setIsExpanded(!internalIsExpanded);
-                  }
-                }
-              }}
-              {...(hasCheckbox && { htmlFor: randomId })}
-              {...((hasCheckbox || (isSelectable && children)) && { id: `label-${randomId}` })}
-              {...(Component === 'button' && { type: 'button', disabled: isDisabled })}
-            >
-              <span className={css(styles.treeViewNodeContainer)}>
-                {children && renderToggle(randomId)}
-                {hasCheckbox && renderCheck(randomId)}
-                {icon && iconRendered}
-                {renderNodeContent()}
-                {badgeRendered}
-              </span>
-            </Component>
+        <Component
+          className={css(
+            styles.treeViewNode,
+            isSelected && styles.modifiers.current,
+            isDisabled && styles.modifiers.disabled
           )}
-        </GenerateId>
+          onClick={(evt: React.MouseEvent) => {
+            if (!hasCheckbox) {
+              !isDisabled && onSelect && onSelect(evt, itemData, parentItem);
+              if (!isDisabled && !isSelectable && children && evt.isDefaultPrevented() !== true) {
+                if (internalIsExpanded) {
+                  onCollapse && onCollapse(evt, itemData, parentItem);
+                } else {
+                  onExpand && onExpand(evt, itemData, parentItem);
+                }
+                setIsExpanded(!internalIsExpanded);
+              }
+            }
+          }}
+          {...(hasCheckbox && { htmlFor: randomId })}
+          {...((hasCheckbox || (isSelectable && children)) && { id: `label-${randomId}` })}
+          {...(Component === 'button' && { type: 'button', disabled: isDisabled })}
+        >
+          <span className={css(styles.treeViewNodeContainer)}>
+            {children && renderToggle(randomId)}
+            {hasCheckbox && renderCheck(randomId)}
+            {icon && iconRendered}
+            {renderNodeContent()}
+            {badgeRendered}
+          </span>
+        </Component>
         {action && <div className={css(styles.treeViewAction)}>{action}</div>}
       </div>
       {(internalIsExpanded || hasAnimations) && clonedChildren}

package/src/components/TreeView/__tests__/TreeViewListItem.test.tsx

@@ -359,8 +359,8 @@ test(`Renders ${styles.treeViewNode} element with for and id attributes when has
 
   const treeViewNode = screen.getByRole('treeitem').querySelector(`.${styles.treeViewNode}`);
 
-  expect(treeViewNode).toHaveAttribute('for', expect.stringMatching(/checkbox-id\d+/));
-  expect(treeViewNode).toHaveAttribute('id', expect.stringMatching(/label-checkbox-id\d+/));
+  expect(treeViewNode).toHaveAttribute('for', expect.stringMatching(/checkbox-id/));
+  expect(treeViewNode).toHaveAttribute('id', expect.stringMatching(/label-checkbox-id/));
 });
 
 test(`Renders ${styles.treeViewNode} element with id attribute when isSelectable and children are passed`, () => {
@@ -372,7 +372,7 @@ test(`Renders ${styles.treeViewNode} element with id attribute when isSelectable
 
   const treeViewNode = screen.getByRole('treeitem').querySelector(`.${styles.treeViewNode}`);
 
-  expect(treeViewNode).toHaveAttribute('id', expect.stringMatching(/selectable-id\d+/));
+  expect(treeViewNode).toHaveAttribute('id', expect.stringMatching(/selectable-id/));
 });
 
 test(`Does not render ${styles.treeViewNode} element with additional classes by default`, () => {

package/src/deprecated/components/Chip/Chip.tsx

@@ -1,7 +1,8 @@
 import { Component, Fragment } from 'react';
 import { TooltipPosition } from '../../../components/Tooltip';
 import { Label, LabelProps } from '../../../components/Label';
-import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../../helpers';
+import { getOUIAProps, OUIAProps } from '../../../helpers';
+import { SSRSafeIds } from '../../../helpers/SSRSafeIds/SSRSafeIds';
 
 export interface ChipProps extends LabelProps, OUIAProps {
   /** Badge to add to the chip. The badge will be rendered after the chip text. */
@@ -77,26 +78,30 @@ class Chip extends Component<ChipProps> {
     } = this.props;
 
     return (
-      <Label
-        variant="outline"
-        className={className}
-        textMaxWidth={textMaxWidth}
-        tooltipPosition={tooltipPosition}
-        {...(!isReadOnly &&
-          !isOverflowChip && {
-            onClose: onClick,
-            closeBtnAriaLabel: closeBtnAriaLabel ? closeBtnAriaLabel : `Close ${children}`
-          })}
-        {...(isOverflowChip && { onClick, variant: 'overflow' })}
-        {...getOUIAProps(
-          isOverflowChip ? 'OverflowChip' : Chip.displayName,
-          ouiaId !== undefined ? ouiaId : getDefaultOUIAId(Chip.displayName)
+      <SSRSafeIds prefix="pf-" ouiaComponentType={Chip.displayName}>
+        {(_, generatedOuiaId) => (
+          <Label
+            variant="outline"
+            className={className}
+            textMaxWidth={textMaxWidth}
+            tooltipPosition={tooltipPosition}
+            {...(!isReadOnly &&
+              !isOverflowChip && {
+                onClose: onClick,
+                closeBtnAriaLabel: closeBtnAriaLabel ? closeBtnAriaLabel : `Close ${children}`
+              })}
+            {...(isOverflowChip && { onClick, variant: 'overflow' })}
+            {...getOUIAProps(
+              isOverflowChip ? 'OverflowChip' : Chip.displayName,
+              ouiaId !== undefined ? ouiaId : generatedOuiaId
+            )}
+            {...props}
+          >
+            {children}
+            {badge && <Fragment> {badge}</Fragment>}
+          </Label>
         )}
-        {...props}
-      >
-        {children}
-        {badge && <Fragment> {badge}</Fragment>}
-      </Label>
+      </SSRSafeIds>
     );
   }
 }

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

@@ -25,7 +25,7 @@ exports[`Matches snapshot 1`] = `
       <button
         aria-label="Close Chip text"
         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
-        data-ouia-component-id="OUIA-Generated-Button-plain-17"
+        data-ouia-component-id="OUIA-Generated-Button-plain-:r2e:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         type="button"