@patternfly/react-core 6.3.0-prerelease.9 → 6.3.0

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.3.0-prerelease.8","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.3.0-prerelease.34","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.3.0-prerelease.8","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.3.0-prerelease.34","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.3.0-prerelease.8","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.3.0-prerelease.34","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.3.0-prerelease.9",
+  "version": "6.3.0",
   "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",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.3.0-prerelease.1",
-    "@patternfly/react-styles": "^6.3.0-prerelease.1",
-    "@patternfly/react-tokens": "^6.3.0-prerelease.1",
+    "@patternfly/react-icons": "^6.3.0",
+    "@patternfly/react-styles": "^6.3.0",
+    "@patternfly/react-tokens": "^6.3.0",
     "focus-trap": "7.6.4",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.3.0-prerelease.6",
+    "@patternfly/patternfly": "6.3.0-prerelease.41",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "6e99233806b7116f6f785411ba92f8ce28411a58"
+  "gitHead": "0652301cae338bfef026f04bada414d0a5c2ee79"
 }

package/src/components/Alert/AlertGroupInline.tsx

@@ -1,4 +1,4 @@
-import { Children, useState } from 'react';
+import { Children, useState, useEffect } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Alert/alert-group';
 import { AlertGroupProps } from './AlertGroup';
@@ -15,11 +15,20 @@ export const AlertGroupInline: React.FunctionComponent<AlertGroupProps> = ({
   overflowMessage,
   ...props
 }: AlertGroupProps) => {
-  const [handleTransitionEnd, setHandleTransitionEnd] = useState(() => () => {});
+  const [handleTransitionEnd, setHandleTransitionEnd] = useState<() => void>(() => () => {});
+
   const updateTransitionEnd = (onTransitionEnd: () => void) => {
     setHandleTransitionEnd(() => onTransitionEnd);
   };
 
+  // Clear transition callback on unmount to prevent memory leaks
+  useEffect(
+    () => () => {
+      setHandleTransitionEnd(() => () => {});
+    },
+    []
+  );
+
   const onTransitionEnd = (event: React.TransitionEvent<HTMLLIElement>) => {
     if (!hasAnimations) {
       return;
@@ -34,6 +43,8 @@ export const AlertGroupInline: React.FunctionComponent<AlertGroupProps> = ({
       (event.target as HTMLElement).className.includes(styles.modifiers.offstageRight)
     ) {
       handleTransitionEnd();
+      // Clear the callback after execution to prevent memory retention
+      setHandleTransitionEnd(() => () => {});
     }
   };
 

package/src/components/Button/Button.tsx

@@ -4,6 +4,10 @@ import { css } from '@patternfly/react-styles';
 import { Spinner, spinnerSize } from '../Spinner';
 import { useOUIAProps, OUIAProps } from '../../helpers/OUIA/ouia';
 import { Badge } from '../Badge';
+import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';
+import OutlinedStarIcon from '@patternfly/react-icons/dist/esm/icons/outlined-star-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import { hamburgerIcon } from './hamburgerIcon';
 
 export enum ButtonVariant {
   primary = 'primary',
@@ -71,6 +75,10 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   inoperableEvents?: string[];
   /** Adds inline styling to a link button */
   isInline?: boolean;
+  /** Adds favorite styling to a button */
+  isFavorite?: boolean;
+  /** Flag indicating whether the button is favorited or not, only when isFavorite is true. */
+  isFavorited?: boolean;
   /** Adds styling which affects the size of the button */
   size?: 'default' | 'sm' | 'lg';
   /** Sets button type */
@@ -91,6 +99,14 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   tabIndex?: number;
   /** Adds danger styling to secondary or link button variants */
   isDanger?: boolean;
+  /** Flag indicating whether content the button controls is expanded or not. Required when isHamburger is true. */
+  isExpanded?: boolean;
+  /** Flag indicating the button is a settings button. This will override the icon property. */
+  isSettings?: boolean;
+  /** Flag indicating the button is a hamburger button. This will override the icon property. */
+  isHamburger?: boolean;
+  /** Adjusts and animates the hamburger icon to indicate what will happen upon clicking the button. */
+  hamburgerVariant?: 'expand' | 'collapse';
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Adds count number to button */
@@ -111,12 +127,18 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   isAriaDisabled = false,
   isLoading = null,
   isDanger = false,
+  isExpanded,
+  isSettings,
+  isHamburger,
+  hamburgerVariant,
   spinnerAriaValueText,
   spinnerAriaLabelledBy,
   spinnerAriaLabel,
   size = ButtonSize.default,
   inoperableEvents = ['onClick', 'onKeyPress'],
   isInline = false,
+  isFavorite = false,
+  isFavorited = false,
   type = ButtonType.button,
   variant = ButtonVariant.primary,
   state = ButtonState.unread,
@@ -132,11 +154,26 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   countOptions,
   ...props
 }: ButtonProps) => {
+  if (isHamburger && ![true, false].includes(isExpanded)) {
+    // eslint-disable-next-line no-console
+    console.error(
+      'Button: when the isHamburger property is passed in, you must also pass in a boolean value to the isExpanded property. It is expected that a hamburger button controls the expansion of other content.'
+    );
+  }
+  // TODO: Remove isSettings || isHamburger || isFavorite conditional in breaking change to throw this warning for any button that does not have children or aria name
+  if ((isSettings || isHamburger || isFavorite) && !ariaLabel && !children && !props['aria-labelledby']) {
+    // eslint-disable-next-line no-console
+    console.error(
+      'Button: you must provide either visible text content or an accessible name via the aria-label or aria-labelledby properties.'
+    );
+  }
+
   const ouiaProps = useOUIAProps(Button.displayName, ouiaId, ouiaSafe, variant);
   const Component = component as any;
   const isButtonElement = Component === 'button';
   const isInlineSpan = isInline && Component === 'span';
   const isIconAlignedAtEnd = iconPosition === 'end' || iconPosition === 'right';
+  const shouldOverrideIcon = isSettings || isHamburger || isFavorite;
 
   const preventedEvents = inoperableEvents.reduce(
     (handlers, eventToPrevent) => ({
@@ -158,17 +195,48 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
     }
   };
 
-  const _icon = icon && (
-    <span className={css(styles.buttonIcon, children && styles.modifiers[isIconAlignedAtEnd ? 'end' : 'start'])}>
-      {icon}
-    </span>
-  );
+  const renderIcon = () => {
+    let iconContent;
+
+    if (isFavorite) {
+      iconContent = (
+        <>
+          <span className={css('pf-v6-c-button__icon-favorite')}>
+            <OutlinedStarIcon />
+          </span>
+          <span className={css('pf-v6-c-button__icon-favorited')}>
+            <StarIcon />
+          </span>
+        </>
+      );
+    }
+
+    if (isSettings) {
+      iconContent = <CogIcon />;
+    }
+    if (isHamburger) {
+      iconContent = hamburgerIcon;
+    }
+    if (icon && !shouldOverrideIcon) {
+      iconContent = icon;
+    }
+
+    return (
+      iconContent && (
+        <span className={css(styles.buttonIcon, children && styles.modifiers[isIconAlignedAtEnd ? 'end' : 'start'])}>
+          {iconContent}
+        </span>
+      )
+    );
+  };
+  const _icon = renderIcon();
   const _children = children && <span className={css('pf-v6-c-button__text')}>{children}</span>;
   // We only want to render the aria-disabled attribute when true, similar to the disabled attribute natively.
   const shouldRenderAriaDisabled = isAriaDisabled || (!isButtonElement && isDisabled);
 
   return (
     <Component
+      aria-expanded={isExpanded} // Move this after the spread props in next breaking change
       {...props}
       {...(isAriaDisabled ? preventedEvents : null)}
       {...(shouldRenderAriaDisabled && { 'aria-disabled': true })}
@@ -176,11 +244,16 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
       className={css(
         styles.button,
         styles.modifiers[variant],
+        isSettings && styles.modifiers.settings,
+        isHamburger && styles.modifiers.hamburger,
+        isHamburger && hamburgerVariant && styles.modifiers[hamburgerVariant],
         isBlock && styles.modifiers.block,
         isDisabled && !isButtonElement && styles.modifiers.disabled,
         isAriaDisabled && styles.modifiers.ariaDisabled,
         isClicked && styles.modifiers.clicked,
         isInline && variant === ButtonVariant.link && styles.modifiers.inline,
+        isFavorite && styles.modifiers.favorite,
+        isFavorite && isFavorited && styles.modifiers.favorited,
         isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && styles.modifiers.danger,
         isLoading !== null && variant !== ButtonVariant.plain && styles.modifiers.progress,
         isLoading && styles.modifiers.inProgress,