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

package/src/components/Switch/Switch.tsx

@@ -2,8 +2,8 @@ import { Component, Fragment } from 'react';
 import styles from '@patternfly/react-styles/css/components/Switch/switch';
 import { css } from '@patternfly/react-styles';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
-import { getUniqueId } from '../../helpers/util';
-import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
+import { getOUIAProps, OUIAProps } from '../../helpers';
+import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 
 export interface SwitchProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'label'>, OUIAProps {
@@ -39,9 +39,8 @@ export interface SwitchProps
   ouiaSafe?: boolean;
 }
 
-class Switch extends Component<SwitchProps & OUIAProps, { ouiaStateId: string }> {
+class Switch extends Component<SwitchProps & OUIAProps> {
   static displayName = 'Switch';
-  id: string;
 
   static defaultProps: SwitchProps = {
     isChecked: true,
@@ -60,17 +59,11 @@ class Switch extends Component<SwitchProps & OUIAProps, { ouiaStateId: string }>
         'Switch: Switch requires at least one of label, aria-labelledby, or aria-label props to be specified'
       );
     }
-
-    this.id = props.id || getUniqueId();
-    this.state = {
-      ouiaStateId: getDefaultOUIAId(Switch.displayName)
-    };
   }
 
   render() {
     const {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      id,
+      id: idProp,
       className,
       label,
       isChecked,
@@ -86,54 +79,61 @@ class Switch extends Component<SwitchProps & OUIAProps, { ouiaStateId: string }>
       ...props
     } = this.props;
 
-    const hasAccessibleName = label || ariaLabel || ariaLabelledBy;
-    const isAriaLabelledBy = hasAccessibleName && (!ariaLabel || ariaLabelledBy);
-    const useDefaultAriaLabelledBy = !ariaLabelledBy && !ariaLabel;
-    const ariaLabelledByIds = ariaLabelledBy ?? `${this.id}-label`;
-
     return (
-      <label
-        className={css(styles.switch, isReversed && styles.modifiers.reverse, className)}
-        htmlFor={this.id}
-        {...getOUIAProps(Switch.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
-      >
-        <input
-          id={this.id}
-          className={css(styles.switchInput)}
-          type="checkbox"
-          role="switch"
-          onChange={(event) => onChange(event, event.target.checked)}
-          {...(defaultChecked !== undefined ? { defaultChecked } : { checked: isChecked })}
-          disabled={isDisabled}
-          aria-labelledby={isAriaLabelledBy ? ariaLabelledByIds : null}
-          aria-label={ariaLabel}
-          {...props}
-        />
-        {label !== undefined ? (
-          <Fragment>
-            <span className={css(styles.switchToggle)}>
-              {hasCheckIcon && (
-                <span className={css(styles.switchToggleIcon)}>
-                  <CheckIcon />
+      <SSRSafeIds prefix="pf-switch-" ouiaComponentType="Switch">
+        {(generatedId, generatedOuiaId) => {
+          const id = idProp || generatedId;
+          const hasAccessibleName = label || ariaLabel || ariaLabelledBy;
+          const isAriaLabelledBy = hasAccessibleName && (!ariaLabel || ariaLabelledBy);
+          const useDefaultAriaLabelledBy = !ariaLabelledBy && !ariaLabel;
+          const ariaLabelledByIds = ariaLabelledBy ?? `${id}-label`;
+
+          return (
+            <label
+              className={css(styles.switch, isReversed && styles.modifiers.reverse, className)}
+              htmlFor={id}
+              {...getOUIAProps(Switch.displayName, ouiaId !== undefined ? ouiaId : generatedOuiaId, ouiaSafe)}
+            >
+              <input
+                id={id}
+                className={css(styles.switchInput)}
+                type="checkbox"
+                role="switch"
+                onChange={(event) => onChange(event, event.target.checked)}
+                {...(defaultChecked !== undefined ? { defaultChecked } : { checked: isChecked })}
+                disabled={isDisabled}
+                aria-labelledby={isAriaLabelledBy ? ariaLabelledByIds : null}
+                aria-label={ariaLabel}
+                {...props}
+              />
+              {label !== undefined ? (
+                <Fragment>
+                  <span className={css(styles.switchToggle)}>
+                    {hasCheckIcon && (
+                      <span className={css(styles.switchToggleIcon)}>
+                        <CheckIcon />
+                      </span>
+                    )}
+                  </span>
+                  <span
+                    className={css(styles.switchLabel)}
+                    id={isAriaLabelledBy && useDefaultAriaLabelledBy ? `${id}-label` : null}
+                    aria-hidden="true"
+                  >
+                    {label}
+                  </span>
+                </Fragment>
+              ) : (
+                <span className={css(styles.switchToggle)}>
+                  <div className={css(styles.switchToggleIcon)}>
+                    <CheckIcon />
+                  </div>
                 </span>
               )}
-            </span>
-            <span
-              className={css(styles.switchLabel)}
-              id={isAriaLabelledBy && useDefaultAriaLabelledBy ? `${this.id}-label` : null}
-              aria-hidden="true"
-            >
-              {label}
-            </span>
-          </Fragment>
-        ) : (
-          <span className={css(styles.switchToggle)}>
-            <div className={css(styles.switchToggleIcon)}>
-              <CheckIcon />
-            </div>
-          </span>
-        )}
-      </label>
+            </label>
+          );
+        }}
+      </SSRSafeIds>
     );
   }
 }

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

@@ -4,7 +4,7 @@ exports[`Switch no label switch is checked 1`] = `
 <DocumentFragment>
   <label
     class="pf-v6-c-switch"
-    data-ouia-component-id="OUIA-Generated-Switch-7"
+    data-ouia-component-id="OUIA-Generated-Switch-:rd:"
     data-ouia-component-type="PF6/Switch"
     data-ouia-safe="true"
     for="no-label-switch-is-checked"
@@ -58,7 +58,7 @@ exports[`Switch no label switch is not checked 1`] = `
 <DocumentFragment>
   <label
     class="pf-v6-c-switch"
-    data-ouia-component-id="OUIA-Generated-Switch-8"
+    data-ouia-component-id="OUIA-Generated-Switch-:rf:"
     data-ouia-component-type="PF6/Switch"
     data-ouia-safe="true"
     for="no-label-switch-is-not-checked"
@@ -111,7 +111,7 @@ exports[`Switch switch is checked 1`] = `
 <DocumentFragment>
   <label
     class="pf-v6-c-switch"
-    data-ouia-component-id="OUIA-Generated-Switch-3"
+    data-ouia-component-id="OUIA-Generated-Switch-:r5:"
     data-ouia-component-type="PF6/Switch"
     data-ouia-safe="true"
     for="switch-is-checked"
@@ -141,7 +141,7 @@ exports[`Switch switch is checked and disabled 1`] = `
 <DocumentFragment>
   <label
     class="pf-v6-c-switch"
-    data-ouia-component-id="OUIA-Generated-Switch-9"
+    data-ouia-component-id="OUIA-Generated-Switch-:rh:"
     data-ouia-component-type="PF6/Switch"
     data-ouia-safe="true"
     for="switch-is-checked-and-disabled"
@@ -196,7 +196,7 @@ exports[`Switch switch is not checked 1`] = `
 <DocumentFragment>
   <label
     class="pf-v6-c-switch"
-    data-ouia-component-id="OUIA-Generated-Switch-4"
+    data-ouia-component-id="OUIA-Generated-Switch-:r7:"
     data-ouia-component-type="PF6/Switch"
     data-ouia-safe="true"
     for="switch-is-not-checked"
@@ -225,7 +225,7 @@ exports[`Switch switch is not checked and disabled 1`] = `
 <DocumentFragment>
   <label
     class="pf-v6-c-switch"
-    data-ouia-component-id="OUIA-Generated-Switch-10"
+    data-ouia-component-id="OUIA-Generated-Switch-:rj:"
     data-ouia-component-type="PF6/Switch"
     data-ouia-safe="true"
     for="switch-is-not-checked-and-disabled"
@@ -279,7 +279,7 @@ exports[`Switch switch with only label is checked 1`] = `
 <DocumentFragment>
   <label
     class="pf-v6-c-switch"
-    data-ouia-component-id="OUIA-Generated-Switch-5"
+    data-ouia-component-id="OUIA-Generated-Switch-:r9:"
     data-ouia-component-type="PF6/Switch"
     data-ouia-safe="true"
     for="switch-is-checked"
@@ -310,7 +310,7 @@ exports[`Switch switch with only label is not checked 1`] = `
 <DocumentFragment>
   <label
     class="pf-v6-c-switch"
-    data-ouia-component-id="OUIA-Generated-Switch-6"
+    data-ouia-component-id="OUIA-Generated-Switch-:rb:"
     data-ouia-component-type="PF6/Switch"
     data-ouia-safe="true"
     for="switch-is-not-checked"

package/src/components/Tabs/Tabs.tsx

@@ -6,7 +6,6 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import {
-  getUniqueId,
   isElementInView,
   formatBreakpointMods,
   getLanguageDirection,
@@ -17,7 +16,8 @@ import { TabProps } from './Tab';
 import { TabsContextProvider } from './TabsContext';
 import { OverflowTab, HorizontalOverflowPopperProps } from './OverflowTab';
 import { Button } from '../Button';
-import { getOUIAProps, OUIAProps, getDefaultOUIAId, canUseDOM } from '../../helpers';
+import { getOUIAProps, OUIAProps, canUseDOM } from '../../helpers';
+import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import linkAccentLength from '@patternfly/react-tokens/dist/esm/c_tabs_link_accent_length';
 import linkAccentStart from '@patternfly/react-tokens/dist/esm/c_tabs_link_accent_start';
@@ -153,7 +153,6 @@ interface TabsState {
   shownKeys: (string | number)[];
   uncontrolledActiveKey: number | string;
   uncontrolledIsExpandedLocal: boolean;
-  ouiaStateId: string;
   overflowingTabCount: number;
   isInitializingAccent: boolean;
   currentLinkAccentLength: string;
@@ -176,7 +175,6 @@ class Tabs extends Component<TabsProps, TabsState> {
       shownKeys: this.props.defaultActiveKey !== undefined ? [this.props.defaultActiveKey] : [this.props.activeKey], // only for mountOnEnter case
       uncontrolledActiveKey: this.props.defaultActiveKey,
       uncontrolledIsExpandedLocal: this.props.defaultIsExpanded,
-      ouiaStateId: getDefaultOUIAId(Tabs.displayName),
       overflowingTabCount: 0,
       isInitializingAccent: true,
       currentLinkAccentLength: linkAccentLength.value,
@@ -532,7 +530,6 @@ class Tabs extends Component<TabsProps, TabsState> {
     const filteredChildrenOverflowing = filteredChildren.slice(filteredChildren.length - overflowingTabCount);
     const overflowingTabProps = filteredChildrenOverflowing.map((child: React.ReactElement<TabProps>) => child.props);
 
-    const uniqueId = id || getUniqueId();
     const defaultComponent = isNav && !component ? 'nav' : 'div';
     const Component: any = component !== undefined ? component : defaultComponent;
     const localActiveKey = defaultActiveKey !== undefined ? uncontrolledActiveKey : activeKey;
@@ -551,138 +548,145 @@ class Tabs extends Component<TabsProps, TabsState> {
     const overflowObjectProps = typeof isOverflowHorizontal === 'object' ? { ...isOverflowHorizontal } : {};
 
     return (
-      <TabsContextProvider
-        value={{
-          variant,
-          mountOnEnter,
-          unmountOnExit,
-          localActiveKey,
-          uniqueId,
-          setAccentStyles: this.setAccentStyles,
-          handleTabClick: (...args) => this.handleTabClick(...args),
-          handleTabClose: onClose
-        }}
-      >
-        <Component
-          aria-label={ariaLabel}
-          className={css(
-            styles.tabs,
-            styles.modifiers.animateCurrent,
-            isFilled && styles.modifiers.fill,
-            isSubtab && styles.modifiers.subtab,
-            isNav && styles.modifiers.nav,
-            isVertical && styles.modifiers.vertical,
-            isVertical && expandable && formatBreakpointMods(expandable, styles),
-            isVertical && expandable && isExpandedLocal && styles.modifiers.expanded,
-            isBox && styles.modifiers.box,
-            showScrollButtons && styles.modifiers.scrollable,
-            usePageInsets && styles.modifiers.pageInsets,
-            hasNoBorderBottom && styles.modifiers.noBorderBottom,
-            formatBreakpointMods(inset, styles),
-            variantStyle[variant],
-            hasOverflowTab && styles.modifiers.overflow,
-            isInitializingAccent && styles.modifiers.initializingAccent,
-            className
-          )}
-          {...getOUIAProps(Tabs.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
-          id={id && id}
-          {...props}
-          style={{
-            [linkAccentLength.name]: currentLinkAccentLength,
-            [linkAccentStart.name]: currentLinkAccentStart,
-            ...props.style
-          }}
-        >
-          {expandable && isVertical && (
-            <GenerateId>
-              {(randomId) => (
-                <div className={css(styles.tabsToggle)}>
-                  <div className={css(styles.tabsToggleButton)}>
+      <SSRSafeIds prefix="pf-random-id-" ouiaComponentType={Tabs.displayName}>
+        {(generatedId, generatedOuiaId) => {
+          const uniqueId = id || generatedId;
+          return (
+            <TabsContextProvider
+              value={{
+                variant,
+                mountOnEnter,
+                unmountOnExit,
+                localActiveKey,
+                uniqueId,
+                setAccentStyles: this.setAccentStyles,
+                handleTabClick: (...args) => this.handleTabClick(...args),
+                handleTabClose: onClose
+              }}
+            >
+              <Component
+                aria-label={ariaLabel}
+                className={css(
+                  styles.tabs,
+                  styles.modifiers.animateCurrent,
+                  isFilled && styles.modifiers.fill,
+                  isSubtab && styles.modifiers.subtab,
+                  isNav && styles.modifiers.nav,
+                  isVertical && styles.modifiers.vertical,
+                  isVertical && expandable && formatBreakpointMods(expandable, styles),
+                  isVertical && expandable && isExpandedLocal && styles.modifiers.expanded,
+                  isBox && styles.modifiers.box,
+                  showScrollButtons && styles.modifiers.scrollable,
+                  usePageInsets && styles.modifiers.pageInsets,
+                  hasNoBorderBottom && styles.modifiers.noBorderBottom,
+                  formatBreakpointMods(inset, styles),
+                  variantStyle[variant],
+                  hasOverflowTab && styles.modifiers.overflow,
+                  isInitializingAccent && styles.modifiers.initializingAccent,
+                  className
+                )}
+                {...getOUIAProps(Tabs.displayName, ouiaId !== undefined ? ouiaId : generatedOuiaId, ouiaSafe)}
+                id={id && id}
+                {...props}
+                style={{
+                  [linkAccentLength.name]: currentLinkAccentLength,
+                  [linkAccentStart.name]: currentLinkAccentStart,
+                  ...props.style
+                }}
+              >
+                {expandable && isVertical && (
+                  <GenerateId>
+                    {(randomId) => (
+                      <div className={css(styles.tabsToggle)}>
+                        <div className={css(styles.tabsToggleButton)}>
+                          <Button
+                            onClick={(event) => toggleTabs(event, !isExpandedLocal)}
+                            variant="plain"
+                            aria-label={toggleAriaLabel}
+                            aria-expanded={isExpandedLocal}
+                            id={`${randomId}-button`}
+                            aria-labelledby={`${randomId}-text ${randomId}-button`}
+                            icon={
+                              <span className={css(styles.tabsToggleIcon)}>
+                                <AngleRightIcon />
+                              </span>
+                            }
+                          >
+                            {toggleText && <span id={`${randomId}-text`}>{toggleText}</span>}
+                          </Button>
+                        </div>
+                      </div>
+                    )}
+                  </GenerateId>
+                )}
+                {renderScrollButtons && (
+                  <div className={css(styles.tabsScrollButton)}>
+                    <Button
+                      aria-label={backScrollAriaLabel || leftScrollAriaLabel}
+                      onClick={this.scrollBack}
+                      isDisabled={disableBackScrollButton}
+                      aria-hidden={disableBackScrollButton}
+                      ref={this.leftScrollButtonRef}
+                      variant="plain"
+                      icon={<AngleLeftIcon />}
+                    />
+                  </div>
+                )}
+                <ul
+                  aria-label={tabListAriaLabel}
+                  aria-labelledby={tabListAriaLabelledBy}
+                  className={css(styles.tabsList)}
+                  ref={this.tabList}
+                  onScroll={this.handleScrollButtons}
+                  role="tablist"
+                >
+                  {isOverflowHorizontal ? filteredChildrenWithoutOverflow : filteredChildren}
+                  {hasOverflowTab && <OverflowTab overflowingTabs={overflowingTabProps} {...overflowObjectProps} />}
+                </ul>
+                {renderScrollButtons && (
+                  <div className={css(styles.tabsScrollButton)}>
                     <Button
-                      onClick={(event) => toggleTabs(event, !isExpandedLocal)}
+                      aria-label={forwardScrollAriaLabel || rightScrollAriaLabel}
+                      onClick={this.scrollForward}
+                      isDisabled={disableForwardScrollButton}
+                      aria-hidden={disableForwardScrollButton}
                       variant="plain"
-                      aria-label={toggleAriaLabel}
-                      aria-expanded={isExpandedLocal}
-                      id={`${randomId}-button`}
-                      aria-labelledby={`${randomId}-text ${randomId}-button`}
-                      icon={
-                        <span className={css(styles.tabsToggleIcon)}>
-                          <AngleRightIcon />
-                        </span>
-                      }
-                    >
-                      {toggleText && <span id={`${randomId}-text`}>{toggleText}</span>}
-                    </Button>
+                      icon={<AngleRightIcon />}
+                    />
                   </div>
-                </div>
-              )}
-            </GenerateId>
-          )}
-          {renderScrollButtons && (
-            <div className={css(styles.tabsScrollButton)}>
-              <Button
-                aria-label={backScrollAriaLabel || leftScrollAriaLabel}
-                onClick={this.scrollBack}
-                isDisabled={disableBackScrollButton}
-                aria-hidden={disableBackScrollButton}
-                ref={this.leftScrollButtonRef}
-                variant="plain"
-                icon={<AngleLeftIcon />}
-              />
-            </div>
-          )}
-          <ul
-            aria-label={tabListAriaLabel}
-            aria-labelledby={tabListAriaLabelledBy}
-            className={css(styles.tabsList)}
-            ref={this.tabList}
-            onScroll={this.handleScrollButtons}
-            role="tablist"
-          >
-            {isOverflowHorizontal ? filteredChildrenWithoutOverflow : filteredChildren}
-            {hasOverflowTab && <OverflowTab overflowingTabs={overflowingTabProps} {...overflowObjectProps} />}
-          </ul>
-          {renderScrollButtons && (
-            <div className={css(styles.tabsScrollButton)}>
-              <Button
-                aria-label={forwardScrollAriaLabel || rightScrollAriaLabel}
-                onClick={this.scrollForward}
-                isDisabled={disableForwardScrollButton}
-                aria-hidden={disableForwardScrollButton}
-                variant="plain"
-                icon={<AngleRightIcon />}
-              />
-            </div>
-          )}
-          {onAdd !== undefined && (
-            <span className={css(styles.tabsAdd)}>
-              <Button
-                variant="plain"
-                aria-label={addButtonAriaLabel || 'Add tab'}
-                onClick={onAdd}
-                icon={<PlusIcon />}
-                isDisabled={isAddButtonDisabled}
-              />
-            </span>
-          )}
-        </Component>
-        {filteredChildren
-          .filter(
-            (child) =>
-              child.props.children &&
-              !(unmountOnExit && child.props.eventKey !== localActiveKey) &&
-              !(mountOnEnter && shownKeys.indexOf(child.props.eventKey) === -1)
-          )
-          .map((child) => (
-            <TabContent
-              key={child.props.eventKey}
-              activeKey={localActiveKey}
-              child={child}
-              id={child.props.id || uniqueId}
-              ouiaId={child.props.ouiaId}
-            />
-          ))}
-      </TabsContextProvider>
+                )}
+                {onAdd !== undefined && (
+                  <span className={css(styles.tabsAdd)}>
+                    <Button
+                      variant="plain"
+                      aria-label={addButtonAriaLabel || 'Add tab'}
+                      onClick={onAdd}
+                      icon={<PlusIcon />}
+                      isDisabled={isAddButtonDisabled}
+                    />
+                  </span>
+                )}
+              </Component>
+              {filteredChildren
+                .filter(
+                  (child) =>
+                    child.props.children &&
+                    !(unmountOnExit && child.props.eventKey !== localActiveKey) &&
+                    !(mountOnEnter && shownKeys.indexOf(child.props.eventKey) === -1)
+                )
+                .map((child) => (
+                  <TabContent
+                    key={child.props.eventKey}
+                    activeKey={localActiveKey}
+                    child={child}
+                    id={child.props.id || uniqueId}
+                    ouiaId={child.props.ouiaId}
+                  />
+                ))}
+            </TabsContextProvider>
+          );
+        }}
+      </SSRSafeIds>
     );
   }
 }

package/src/components/Tabs/__tests__/__snapshots__/Tab.test.tsx.snap

@@ -28,7 +28,7 @@ exports[`renders tab action 1`] = `
       <button
         aria-label="Tab action"
         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"