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

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.38","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.39","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.38","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.39","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.38","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.39","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.39",
+  "version": "6.5.0-prerelease.40",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "641c8881bef123e9801f7c04972469fbe3bee607"
+  "gitHead": "550ad935f3c0bb7a084922fd276e21e06b60d043"
 }

package/src/components/AboutModal/AboutModal.tsx

@@ -6,7 +6,7 @@ import { AboutModalBoxBrand } from './AboutModalBoxBrand';
 import { AboutModalBoxCloseButton } from './AboutModalBoxCloseButton';
 import { AboutModalBox } from './AboutModalBox';
 import { Modal, ModalVariant } from '../Modal';
-import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+import { useSSRSafeId } from '../../helpers';
 
 export interface AboutModalProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the about modal */
@@ -56,6 +56,8 @@ export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
   disableFocusTrap,
   ...props
 }: AboutModalProps) => {
+  const ariaLabelledBy = useSSRSafeId('pf-about-modal-title-');
+
   if (brandImageSrc && !brandImageAlt) {
     // eslint-disable-next-line no-console
     console.error(
@@ -73,35 +75,29 @@ export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
     return null;
   }
   return (
-    <GenerateId prefix="pf-about-modal-title-">
-      {(ariaLabelledBy) => (
-        <Modal
-          isOpen={isOpen}
-          variant={ModalVariant.large}
-          {...(productName && { 'aria-labelledby': ariaLabelledBy })}
-          aria-label={ariaLabel}
-          onEscapePress={onClose}
-          appendTo={appendTo}
-          disableFocusTrap={disableFocusTrap}
-        >
-          <AboutModalBox
-            style={
-              backgroundImageSrc
-                ? ({ [backgroundImage.name]: `url(${backgroundImageSrc})` } as React.CSSProperties)
-                : {}
-            }
-            className={css(className)}
-          >
-            <AboutModalBoxBrand src={brandImageSrc} alt={brandImageAlt} />
-            <AboutModalBoxCloseButton aria-label={closeButtonAriaLabel} onClose={onClose} />
-            {productName && <AboutModalBoxHeader id={ariaLabelledBy} productName={productName} />}
-            <AboutModalBoxContent trademark={trademark} hasNoContentContainer={hasNoContentContainer} {...props}>
-              {children}
-            </AboutModalBoxContent>
-          </AboutModalBox>
-        </Modal>
-      )}
-    </GenerateId>
+    <Modal
+      isOpen={isOpen}
+      variant={ModalVariant.large}
+      {...(productName && { 'aria-labelledby': ariaLabelledBy })}
+      aria-label={ariaLabel}
+      onEscapePress={onClose}
+      appendTo={appendTo}
+      disableFocusTrap={disableFocusTrap}
+    >
+      <AboutModalBox
+        style={
+          backgroundImageSrc ? ({ [backgroundImage.name]: `url(${backgroundImageSrc})` } as React.CSSProperties) : {}
+        }
+        className={css(className)}
+      >
+        <AboutModalBoxBrand src={brandImageSrc} alt={brandImageAlt} />
+        <AboutModalBoxCloseButton aria-label={closeButtonAriaLabel} onClose={onClose} />
+        {productName && <AboutModalBoxHeader id={ariaLabelledBy} productName={productName} />}
+        <AboutModalBoxContent trademark={trademark} hasNoContentContainer={hasNoContentContainer} {...props}>
+          {children}
+        </AboutModalBoxContent>
+      </AboutModalBox>
+    </Modal>
   );
 };
 AboutModal.displayName = 'AboutModal';

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
     <button
       aria-label="Close Dialog"
       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"
@@ -55,7 +55,7 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
     <button
       aria-label="Klose Daylok"
       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-:r2:"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
@@ -102,7 +102,7 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
     <button
       aria-label="Close Dialog"
       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-:r1:"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxHeader.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`AboutModalBoxHeader Test 1`] = `
   >
     <h1
       class="pf-v6-c-title pf-m-4xl"
-      data-ouia-component-id="OUIA-Generated-Title-1"
+      data-ouia-component-id="OUIA-Generated-Title-:r0:"
       data-ouia-component-type="PF6/Title"
       data-ouia-safe="true"
       id="id"

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`AlertActionCloseButton should match snapshot 1`] = `
   <button
     aria-label="Close some label alert: test title"
     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"

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`AlertActionLink should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <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-:r0:"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"

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

@@ -5,7 +5,7 @@ exports[`Breadcrumb component should render breadcrumb with aria-label 1`] = `
   <nav
     aria-label="custom label"
     class="pf-v6-c-breadcrumb"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-3"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r2:"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >
@@ -22,7 +22,7 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = `
   <nav
     aria-label="Breadcrumb"
     class="pf-v6-c-breadcrumb"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-4"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r3:"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >
@@ -90,7 +90,7 @@ exports[`Breadcrumb component should render breadcrumb with className 1`] = `
   <nav
     aria-label="Breadcrumb"
     class="pf-v6-c-breadcrumb className"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-2"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r1:"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >
@@ -107,7 +107,7 @@ exports[`Breadcrumb component should render default breadcrumb 1`] = `
   <nav
     aria-label="Breadcrumb"
     class="pf-v6-c-breadcrumb"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r0:"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >

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

@@ -5,7 +5,7 @@ exports[`Renders basic button 1`] = `
   <button
     aria-label="basic button"
     class="pf-v6-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-67"
+    data-ouia-component-id="OUIA-Generated-Button-primary-:r30:"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -8,7 +8,7 @@ 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 { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/CalendarMonth/calendar-month';
-import { getUniqueId } from '../../helpers/util';
+import { useSSRSafeId } from '../../helpers';
 import { isValidDate } from '../../helpers/datetimeUtils';
 
 export enum Weekday {
@@ -170,7 +170,7 @@ export const CalendarMonth = ({
 
   const [hoveredDate, setHoveredDate] = useState<Date>(undefined);
   const focusRef = useRef<HTMLButtonElement>(undefined);
-  const [hiddenMonthId] = useState(getUniqueId('hidden-month-span'));
+  const hiddenMonthId = useSSRSafeId('hidden-month-span');
   const [shouldFocus, setShouldFocus] = useState(false);
 
   const isValidated = (date: Date) => validators.every((validator) => validator(date));

package/src/components/Card/CardHeader.tsx

@@ -8,7 +8,7 @@ import { Button } from '../Button';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { Radio } from '../Radio';
 import { Checkbox } from '../Checkbox';
-import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+import { useSSRSafeId } from '../../helpers';
 
 export interface CardHeaderActionsObject {
   /** Actions of the card header */
@@ -90,127 +90,127 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
   isToggleRightAligned,
   hasWrap,
   ...props
-}: CardHeaderProps) => (
-  <GenerateId>
-    {(randomId) => (
-      <CardContext.Consumer>
-        {({ cardId, isClickable, isSelectable, isSelected, isDisabled: isCardDisabled }) => {
-          const cardHeaderToggle = (
-            <div className={css(styles.cardHeaderToggle)}>
-              <Button
-                variant="plain"
-                type="button"
-                onClick={(evt) => {
-                  onExpand(evt, cardId);
-                }}
-                {...toggleButtonProps}
-                icon={
-                  <span className={css(styles.cardHeaderToggleIcon)}>
-                    <AngleRightIcon />
-                  </span>
-                }
-              />
-            </div>
+}: CardHeaderProps) => {
+  const randomId = useSSRSafeId();
+
+  return (
+    <CardContext.Consumer>
+      {({ cardId, isClickable, isSelectable, isSelected, isDisabled: isCardDisabled }) => {
+        const cardHeaderToggle = (
+          <div className={css(styles.cardHeaderToggle)}>
+            <Button
+              variant="plain"
+              type="button"
+              onClick={(evt) => {
+                onExpand(evt, cardId);
+              }}
+              {...toggleButtonProps}
+              icon={
+                <span className={css(styles.cardHeaderToggleIcon)}>
+                  <AngleRightIcon />
+                </span>
+              }
+            />
+          </div>
+        );
+
+        const isClickableOrSelectableOnly = (isClickable && !isSelectable) || (isSelectable && !isClickable);
+        if (actions?.actions && isClickableOrSelectableOnly) {
+          // eslint-disable-next-line no-console
+          console.error(
+            `Card: ${
+              isClickable ? 'Clickable' : 'Selectable'
+            } only cards should not contain any other actions. If you wish to include additional actions, use a clickable and selectable card.`
           );
+        }
 
-          const isClickableOrSelectableOnly = (isClickable && !isSelectable) || (isSelectable && !isClickable);
-          if (actions?.actions && isClickableOrSelectableOnly) {
-            // eslint-disable-next-line no-console
-            console.error(
-              `Card: ${
-                isClickable ? 'Clickable' : 'Selectable'
-              } only cards should not contain any other actions. If you wish to include additional actions, use a clickable and selectable card.`
-            );
-          }
+        const isClickableOnlyCard = isClickable && !isSelectable;
+        if (
+          (isClickableOnlyCard || isSelectable) &&
+          !selectableActions?.selectableActionAriaLabel &&
+          !selectableActions?.selectableActionAriaLabelledby
+        ) {
+          // eslint-disable-next-line no-console
+          console.error(
+            `Card: ${isClickableOnlyCard ? 'Clickable-only cards' : 'Cards with a selectable input'} must have either the selectableActions.selectableActionAriaLabel or selectableActions.selectableActionAriaLabelledby prop passed in order to provide an accessible name to the clickable element.`
+          );
+        }
 
-          const isClickableOnlyCard = isClickable && !isSelectable;
-          if (
-            (isClickableOnlyCard || isSelectable) &&
-            !selectableActions?.selectableActionAriaLabel &&
-            !selectableActions?.selectableActionAriaLabelledby
-          ) {
-            // eslint-disable-next-line no-console
-            console.error(
-              `Card: ${isClickableOnlyCard ? 'Clickable-only cards' : 'Cards with a selectable input'} must have either the selectableActions.selectableActionAriaLabel or selectableActions.selectableActionAriaLabelledby prop passed in order to provide an accessible name to the clickable element.`
-            );
-          }
+        const SelectableCardInput = selectableActions?.variant === 'single' ? Radio : Checkbox;
+        const getSelectableProps = () => ({
+          className: css('pf-m-standalone'),
+          inputClassName: css(selectableActions?.isHidden && 'pf-v6-screen-reader'),
+          label: <></>,
+          'aria-label': selectableActions.selectableActionAriaLabel,
+          'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
+          id: selectableActions.selectableActionId ?? `card-selectable-${randomId}`,
+          name: selectableActions.name,
+          isDisabled: isCardDisabled,
+          onChange: selectableActions.onChange,
+          isChecked: selectableActions.isChecked ?? isSelected,
+          ...selectableActions.selectableActionProps
+        });
 
-          const SelectableCardInput = selectableActions?.variant === 'single' ? Radio : Checkbox;
-          const getSelectableProps = () => ({
-            className: css('pf-m-standalone'),
-            inputClassName: css(selectableActions?.isHidden && 'pf-v6-screen-reader'),
-            label: <></>,
+        const isClickableLinkCard = selectableActions?.to !== undefined;
+        const ClickableCardComponent = isClickableLinkCard ? 'a' : 'button';
+        const getClickableProps = () => {
+          const isDisabledLinkCard = isCardDisabled && isClickableLinkCard;
+          const baseProps = {
+            className: css(
+              'pf-v6-c-card__clickable-action',
+              isDisabledLinkCard && styles.modifiers.disabled,
+              selectableActions?.isHidden && 'pf-v6-screen-reader'
+            ),
+            id: selectableActions.selectableActionId,
             'aria-label': selectableActions.selectableActionAriaLabel,
             'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
-            id: selectableActions.selectableActionId ?? `card-selectable-${randomId}`,
-            name: selectableActions.name,
-            isDisabled: isCardDisabled,
-            onChange: selectableActions.onChange,
-            isChecked: selectableActions.isChecked ?? isSelected,
             ...selectableActions.selectableActionProps
-          });
+          };
 
-          const isClickableLinkCard = selectableActions?.to !== undefined;
-          const ClickableCardComponent = isClickableLinkCard ? 'a' : 'button';
-          const getClickableProps = () => {
-            const isDisabledLinkCard = isCardDisabled && isClickableLinkCard;
-            const baseProps = {
-              className: css(
-                'pf-v6-c-card__clickable-action',
-                isDisabledLinkCard && styles.modifiers.disabled,
-                selectableActions?.isHidden && 'pf-v6-screen-reader'
-              ),
-              id: selectableActions.selectableActionId,
-              'aria-label': selectableActions.selectableActionAriaLabel,
-              'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
-              ...selectableActions.selectableActionProps
+          if (isClickableLinkCard) {
+            return {
+              ...baseProps,
+              href: selectableActions.to,
+              ...(isCardDisabled && { tabIndex: -1, 'aria-disabled': true }),
+              ...(selectableActions.isExternalLink && { target: '_blank' })
             };
+          }
 
-            if (isClickableLinkCard) {
-              return {
-                ...baseProps,
-                href: selectableActions.to,
-                ...(isCardDisabled && { tabIndex: -1, 'aria-disabled': true }),
-                ...(selectableActions.isExternalLink && { target: '_blank' })
-              };
-            }
+          return { ...baseProps, type: 'button', disabled: isCardDisabled, onClick: selectableActions.onClickAction };
+        };
 
-            return { ...baseProps, type: 'button', disabled: isCardDisabled, onClick: selectableActions.onClickAction };
-          };
-
-          return (
-            <div
-              className={css(
-                styles.cardHeader,
-                isToggleRightAligned && styles.modifiers.toggleRight,
-                hasWrap && styles.modifiers.wrap,
-                className
-              )}
-              id={id}
-              {...props}
-            >
-              {onExpand && !isToggleRightAligned && cardHeaderToggle}
-              {(actions || (selectableActions && (isClickable || isSelectable))) && (
-                <CardActions
-                  className={actions?.className}
-                  hasNoOffset={actions?.hasNoOffset || selectableActions?.hasNoOffset}
-                >
-                  {actions?.actions}
-                  {selectableActions && (isClickable || isSelectable) && (
-                    <CardSelectableActions className={selectableActions?.className}>
-                      {isSelectable && <SelectableCardInput {...getSelectableProps()} />}
-                      {isClickableOnlyCard && <ClickableCardComponent {...getClickableProps()} />}
-                    </CardSelectableActions>
-                  )}
-                </CardActions>
-              )}
-              {children && <CardHeaderMain>{children}</CardHeaderMain>}
-              {onExpand && isToggleRightAligned && cardHeaderToggle}
-            </div>
-          );
-        }}
-      </CardContext.Consumer>
-    )}
-  </GenerateId>
-);
+        return (
+          <div
+            className={css(
+              styles.cardHeader,
+              isToggleRightAligned && styles.modifiers.toggleRight,
+              hasWrap && styles.modifiers.wrap,
+              className
+            )}
+            id={id}
+            {...props}
+          >
+            {onExpand && !isToggleRightAligned && cardHeaderToggle}
+            {(actions || (selectableActions && (isClickable || isSelectable))) && (
+              <CardActions
+                className={actions?.className}
+                hasNoOffset={actions?.hasNoOffset || selectableActions?.hasNoOffset}
+              >
+                {actions?.actions}
+                {selectableActions && (isClickable || isSelectable) && (
+                  <CardSelectableActions className={selectableActions?.className}>
+                    {isSelectable && <SelectableCardInput {...getSelectableProps()} />}
+                    {isClickableOnlyCard && <ClickableCardComponent {...getClickableProps()} />}
+                  </CardSelectableActions>
+                )}
+              </CardActions>
+            )}
+            {children && <CardHeaderMain>{children}</CardHeaderMain>}
+            {onExpand && isToggleRightAligned && cardHeaderToggle}
+          </div>
+        );
+      }}
+    </CardContext.Consumer>
+  );
+};
 CardHeader.displayName = 'CardHeader';

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

@@ -4,7 +4,7 @@ exports[`Card card with isCompact applied  1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-card pf-m-compact"
-    data-ouia-component-id="OUIA-Generated-Card-6"
+    data-ouia-component-id="OUIA-Generated-Card-:r5:"
     data-ouia-component-type="PF6/Card"
     data-ouia-safe="true"
     id=""
@@ -16,7 +16,7 @@ exports[`Card renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-card"
-    data-ouia-component-id="OUIA-Generated-Card-1"
+    data-ouia-component-id="OUIA-Generated-Card-:r0:"
     data-ouia-component-type="PF6/Card"
     data-ouia-safe="true"
     id=""

package/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap

@@ -22,7 +22,7 @@ exports[`CardHeader onExpand adds the toggle button 1`] = `
     >
       <button
         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"