@patternfly/react-core 6.3.0-prerelease.30 → 6.3.0-prerelease.32

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.29","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.31","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.29","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.31","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.29","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.31","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.3.0-prerelease.30",
+  "version": "6.3.0-prerelease.32",
   "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.12",
-    "@patternfly/react-styles": "^6.3.0-prerelease.11",
-    "@patternfly/react-tokens": "^6.3.0-prerelease.11",
+    "@patternfly/react-icons": "^6.3.0-prerelease.13",
+    "@patternfly/react-styles": "^6.3.0-prerelease.12",
+    "@patternfly/react-tokens": "^6.3.0-prerelease.12",
     "focus-trap": "7.6.4",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.3.0-prerelease.38",
+    "@patternfly/patternfly": "6.3.0-prerelease.40",
     "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": "031fba5b63c67c6cb8ca4ead17830ddd1dafec8e"
+  "gitHead": "e08195c635540c7f3cef9707f26407062e295b85"
 }

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/Label/Label.tsx

@@ -145,13 +145,75 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   }
 
   useEffect(() => {
+    const onDocMouseDown = (event: MouseEvent) => {
+      if (
+        isEditableActive &&
+        editableInputRef &&
+        editableInputRef.current &&
+        !editableInputRef.current.contains(event.target as Node)
+      ) {
+        if (editableInputRef.current.value) {
+          onEditComplete && onEditComplete(event, editableInputRef.current.value);
+        }
+        setIsEditableActive(false);
+      }
+    };
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      const key = event.key;
+      if (
+        (!isEditableActive &&
+          (!editableButtonRef ||
+            !editableButtonRef.current ||
+            !editableButtonRef.current.contains(event.target as Node))) ||
+        (isEditableActive &&
+          (!editableInputRef || !editableInputRef.current || !editableInputRef.current.contains(event.target as Node)))
+      ) {
+        return;
+      }
+      if (isEditableActive && (key === 'Enter' || key === 'Tab')) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        if (editableInputRef.current.value) {
+          onEditComplete && onEditComplete(event, editableInputRef.current.value);
+        }
+        setIsEditableActive(false);
+        editableButtonRef?.current?.focus();
+      }
+      if (isEditableActive && key === 'Escape') {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        // Reset div text to initial children prop - pre-edit
+        if (editableInputRef.current.value) {
+          editableInputRef.current.value = children as string;
+          onEditCancel && onEditCancel(event, children as string);
+        }
+        setIsEditableActive(false);
+        editableButtonRef?.current?.focus();
+      }
+      if (!isEditableActive && key === 'Enter') {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        setIsEditableActive(true);
+
+        // Set cursor position to end of text
+        const el = event.target as HTMLElement;
+        const range = document.createRange();
+        const sel = window.getSelection();
+        range.selectNodeContents(el);
+        range.collapse(false);
+        sel.removeAllRanges();
+        sel.addRange(range);
+      }
+    };
+
     document.addEventListener('mousedown', onDocMouseDown);
     document.addEventListener('keydown', onKeyDown);
     return () => {
       document.removeEventListener('mousedown', onDocMouseDown);
       document.removeEventListener('keydown', onKeyDown);
     };
-  });
+  }, [isEditableActive, editableInputRef, editableButtonRef, onEditComplete, onEditCancel, children]);
 
   useEffect(() => {
     if (onLabelClick && href) {
@@ -167,68 +229,6 @@ export const Label: React.FunctionComponent<LabelProps> = ({
     }
   }, [onLabelClick, href, isEditable]);
 
-  const onDocMouseDown = (event: MouseEvent) => {
-    if (
-      isEditableActive &&
-      editableInputRef &&
-      editableInputRef.current &&
-      !editableInputRef.current.contains(event.target as Node)
-    ) {
-      if (editableInputRef.current.value) {
-        onEditComplete && onEditComplete(event, editableInputRef.current.value);
-      }
-      setIsEditableActive(false);
-    }
-  };
-
-  const onKeyDown = (event: KeyboardEvent) => {
-    const key = event.key;
-    if (
-      (!isEditableActive &&
-        (!editableButtonRef ||
-          !editableButtonRef.current ||
-          !editableButtonRef.current.contains(event.target as Node))) ||
-      (isEditableActive &&
-        (!editableInputRef || !editableInputRef.current || !editableInputRef.current.contains(event.target as Node)))
-    ) {
-      return;
-    }
-    if (isEditableActive && (key === 'Enter' || key === 'Tab')) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-      if (editableInputRef.current.value) {
-        onEditComplete && onEditComplete(event, editableInputRef.current.value);
-      }
-      setIsEditableActive(false);
-      editableButtonRef?.current?.focus();
-    }
-    if (isEditableActive && key === 'Escape') {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-      // Reset div text to initial children prop - pre-edit
-      if (editableInputRef.current.value) {
-        editableInputRef.current.value = children as string;
-        onEditCancel && onEditCancel(event, children as string);
-      }
-      setIsEditableActive(false);
-      editableButtonRef?.current?.focus();
-    }
-    if (!isEditableActive && key === 'Enter') {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-      setIsEditableActive(true);
-
-      // Set cursor position to end of text
-      const el = event.target as HTMLElement;
-      const range = document.createRange();
-      const sel = window.getSelection();
-      range.selectNodeContents(el);
-      range.collapse(false);
-      sel.removeAllRanges();
-      sel.addRange(range);
-    }
-  };
-
   const isClickableDisabled = (href || onLabelClick) && isDisabled;
 
   const defaultCloseButton = (

package/src/components/Menu/Menu.tsx

@@ -119,15 +119,15 @@ class MenuBase extends Component<MenuProps, MenuState> {
     if (this.context) {
       this.setState({ disableHover: this.context.disableHover });
     }
-    if (canUseDOM && this.props.containsDrilldown) {
-      window.addEventListener('transitionend', this.props.isRootMenu ? this.handleDrilldownTransition : null);
+    if (canUseDOM && this.props.containsDrilldown && this.props.isRootMenu) {
+      window.addEventListener('transitionend', this.handleDrilldownTransition);
     }
 
     this.allowTabFirstItem();
   }
 
   componentWillUnmount() {
-    if (canUseDOM && this.props.containsDrilldown) {
+    if (canUseDOM && this.props.containsDrilldown && this.props.isRootMenu) {
       window.removeEventListener('transitionend', this.handleDrilldownTransition);
     }
   }

package/src/components/Popover/Popover.tsx

@@ -422,10 +422,22 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
           new Promise((resolve) => {
             const interval = setInterval(() => {
               if (containers.every((container) => getComputedStyle(container).visibility !== 'hidden')) {
-                resolve();
                 clearInterval(interval);
+                resolve();
               }
             }, 10);
+
+            // Clear interval if promise is never resolved (component unmount)
+            const timeout = setTimeout(() => {
+              clearInterval(interval);
+              resolve(); // Resolve to prevent hanging promise
+            }, 5000); // 5 second timeout as safety net
+
+            // Store cleanup function for potential external cleanup
+            (resolve as any)._cleanup = () => {
+              clearInterval(interval);
+              clearTimeout(timeout);
+            };
           }),
         tabbableOptions: { displayCheck: 'none' },
 

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, KeyTypes } from '../../helpers';
+import { GenerateId } from '../../helpers';
 import { SearchInputSearchAttribute } from './SearchInput';
 import { Panel, PanelMain, PanelMainBody } from '../Panel';
 import { css } from '@patternfly/react-styles';
@@ -89,6 +89,19 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
   }, [isSearchMenuOpen]);
 
   useEffect(() => {
+    const onDocClick = (event: Event) => {
+      const clickedWithinSearchInput = parentRef && parentRef.current.contains(event.target as Node);
+      if (isSearchMenuOpen && !clickedWithinSearchInput) {
+        onToggleAdvancedMenu(event as any);
+      }
+    };
+
+    const onEscPress = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && isSearchMenuOpen) {
+        onToggleAdvancedMenu(event as any);
+      }
+    };
+
     document.addEventListener('mousedown', onDocClick);
     document.addEventListener('touchstart', onDocClick);
     document.addEventListener('keydown', onEscPress);
@@ -98,28 +111,7 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
       document.removeEventListener('touchstart', onDocClick);
       document.removeEventListener('keydown', onEscPress);
     };
-  });
-
-  const onDocClick = (event: Event) => {
-    const clickedWithinSearchInput = parentRef && parentRef.current.contains(event.target as Node);
-    if (isSearchMenuOpen && !clickedWithinSearchInput) {
-      onToggleAdvancedMenu(event as any);
-    }
-  };
-
-  const onEscPress = (event: KeyboardEvent) => {
-    if (
-      isSearchMenuOpen &&
-      event.key === KeyTypes.Escape &&
-      parentRef &&
-      parentRef.current.contains(event.target as Node)
-    ) {
-      onToggleAdvancedMenu(event as any);
-      if (parentInputRef) {
-        parentInputRef.current.focus();
-      }
-    }
-  };
+  }, [isSearchMenuOpen, parentRef, onToggleAdvancedMenu]);
 
   const onSearchHandler = (event: React.SyntheticEvent<HTMLButtonElement>) => {
     event.preventDefault();

package/src/components/Tabs/Tabs.tsx

@@ -430,6 +430,8 @@ class Tabs extends Component<TabsProps, TabsState> {
     if (!prevState.enableScrollButtons && enableScrollButtons) {
       this.setState({ renderScrollButtons: true });
       setTimeout(() => {
+        // Remove any existing listener before adding a new one to prevent accumulation
+        this.leftScrollButtonRef.current?.removeEventListener('transitionend', this.hideScrollButtons);
         this.leftScrollButtonRef.current?.addEventListener('transitionend', this.hideScrollButtons);
         this.setState({ showScrollButtons: true });
       }, 100);