@patternfly/react-core 6.0.0-alpha.97 → 6.0.0-alpha.98

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.0.0-alpha.96","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.0.0-alpha.97","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.0.0-alpha.96","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.0.0-alpha.97","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.0.0-alpha.96","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.0.0-alpha.97","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.97",
+  "version": "6.0.0-alpha.98",
   "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",
@@ -64,5 +64,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "5e19008b3872fc1fb2cdea963253d3d48e6cd329"
+  "gitHead": "e0e139240e357c96814d0cb6fda052a8fc7732ee"
 }

package/src/components/Dropdown/Dropdown.tsx

@@ -104,6 +104,22 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
       ? localToggleRef
       : (toggle?.toggleRef as React.RefObject<HTMLButtonElement>);
 
+  const prevIsOpen = React.useRef<boolean>(isOpen);
+  React.useEffect(() => {
+    // menu was opened, focus on first menu item
+    if (prevIsOpen.current === false && isOpen === true && shouldFocusFirstItemOnOpen) {
+      setTimeout(() => {
+        const firstElement = menuRef?.current?.querySelector(
+          'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
+        );
+        firstElement && (firstElement as HTMLElement).focus();
+      }, 0);
+    }
+
+    prevIsOpen.current = isOpen;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
   React.useEffect(() => {
     const handleMenuKeys = (event: KeyboardEvent) => {
       // Close the menu on tab or escape if onOpenChange is provided
@@ -120,16 +136,6 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
     };
 
     const handleClick = (event: MouseEvent) => {
-      // toggle was opened, focus on first menu item
-      if (isOpen && shouldFocusFirstItemOnOpen && toggleRef.current?.contains(event.target as Node)) {
-        setTimeout(() => {
-          const firstElement = menuRef?.current?.querySelector(
-            'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
-          );
-          firstElement && (firstElement as HTMLElement).focus();
-        }, 0);
-      }
-
       // If the event is not on the toggle and onOpenChange callback is provided, close the menu
       if (isOpen && onOpenChange && !toggleRef?.current?.contains(event.target as Node)) {
         if (isOpen && !menuRef.current?.contains(event.target as Node)) {

package/src/components/Menu/Menu.tsx

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

package/src/components/Menu/MenuContainer.tsx

@@ -37,6 +37,8 @@ export interface MenuContainerProps {
   zIndex?: number;
   /** Additional properties to pass to the Popper */
   popperProps?: MenuPopperProps;
+  /** @beta Flag indicating the first menu item should be focused after opening the dropdown. */
+  shouldFocusFirstItemOnOpen?: boolean;
 }
 
 /**
@@ -51,8 +53,25 @@ export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
   onOpenChange,
   zIndex = 9999,
   popperProps,
-  onOpenChangeKeys = ['Escape', 'Tab']
+  onOpenChangeKeys = ['Escape', 'Tab'],
+  shouldFocusFirstItemOnOpen = true
 }: MenuContainerProps) => {
+  const prevIsOpen = React.useRef<boolean>(isOpen);
+  React.useEffect(() => {
+    // menu was opened, focus on first menu item
+    if (prevIsOpen.current === false && isOpen === true && shouldFocusFirstItemOnOpen) {
+      setTimeout(() => {
+        const firstElement = menuRef?.current?.querySelector(
+          'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
+        );
+        firstElement && (firstElement as HTMLElement).focus();
+      }, 0);
+    }
+
+    prevIsOpen.current = isOpen;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
   React.useEffect(() => {
     const handleMenuKeys = (event: KeyboardEvent) => {
       // Close the menu on tab or escape if onOpenChange is provided
@@ -68,16 +87,6 @@ export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
     };
 
     const handleClick = (event: MouseEvent) => {
-      // toggle was opened, focus on first menu item
-      if (isOpen && toggleRef.current?.contains(event.target as Node)) {
-        setTimeout(() => {
-          const firstElement = menuRef?.current?.querySelector(
-            'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
-          );
-          firstElement && (firstElement as HTMLElement).focus();
-        }, 0);
-      }
-
       // If the event is not on the toggle and onOpenChange callback is provided, close the menu
       if (isOpen && onOpenChange && !toggleRef?.current?.contains(event.target as Node)) {
         if (isOpen && !menuRef.current?.contains(event.target as Node)) {

package/src/components/Select/Select.tsx

@@ -110,6 +110,20 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
       ? localToggleRef
       : (toggle?.toggleRef as React.RefObject<HTMLButtonElement>);
 
+  const prevIsOpen = React.useRef<boolean>(isOpen);
+  React.useEffect(() => {
+    // menu was opened, focus on first menu item
+    if (prevIsOpen.current === false && isOpen === true && shouldFocusFirstItemOnOpen) {
+      setTimeout(() => {
+        const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)');
+        firstElement && (firstElement as HTMLElement).focus();
+      }, 0);
+    }
+
+    prevIsOpen.current = isOpen;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
   React.useEffect(() => {
     const handleMenuKeys = (event: KeyboardEvent) => {
       // Close the menu on tab or escape if onOpenChange is provided
@@ -127,14 +141,6 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
     };
 
     const handleClick = (event: MouseEvent) => {
-      // toggle was opened, focus on first menu item
-      if (isOpen && shouldFocusFirstItemOnOpen && toggleRef.current?.contains(event.target as Node)) {
-        setTimeout(() => {
-          const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)');
-          firstElement && (firstElement as HTMLElement).focus();
-        }, 0);
-      }
-
       // If the event is not on the toggle and onOpenChange callback is provided, close the menu
       if (isOpen && onOpenChange && !toggleRef?.current?.contains(event.target as Node)) {
         if (isOpen && !menuRef.current?.contains(event.target as Node)) {