@patternfly/react-core 5.4.0-prerelease.28 → 5.4.0-prerelease.29

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":"5.4.0-prerelease.27","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":"5.4.0-prerelease.28","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":"5.4.0-prerelease.27","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":"5.4.0-prerelease.28","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":"5.4.0-prerelease.27","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":"5.4.0-prerelease.28","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.4.0-prerelease.28",
+  "version": "5.4.0-prerelease.29",
   "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",
@@ -62,5 +62,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "7836b87eb0dc557ad6bff78d6053f5b49128b730"
+  "gitHead": "bdc5c7c6b3711122ffe697bad7b05728b5643f3b"
 }

package/src/components/Dropdown/Dropdown.tsx

@@ -127,7 +127,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
             'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
           );
           firstElement && (firstElement as HTMLElement).focus();
-        }, 0);
+        }, 5);
       }
 
       // If the event is not on the toggle and onOpenChange callback is provided, close the menu

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

@@ -134,7 +134,7 @@ exports[`SearchInput advanced search 1`] = `
       data-popper-escaped="true"
       data-popper-placement="bottom-start"
       data-popper-reference-hidden="true"
-      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
+      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px); display: none;"
     />
   </div>
 </DocumentFragment>
@@ -590,7 +590,7 @@ exports[`SearchInput renders search input in strict mode 1`] = `
       data-popper-escaped="true"
       data-popper-placement="bottom-start"
       data-popper-reference-hidden="true"
-      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
+      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px); display: none;"
     />
   </div>
 </DocumentFragment>

package/src/components/Select/Select.tsx

@@ -132,7 +132,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
         setTimeout(() => {
           const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)');
           firstElement && (firstElement as HTMLElement).focus();
-        }, 0);
+        }, 5);
       }
 
       // If the event is not on the toggle and onOpenChange callback is provided, close the menu

package/src/deprecated/components/Dropdown/DropdownMenu.tsx

@@ -67,7 +67,7 @@ class DropdownMenu extends React.Component<DropdownMenuProps> {
       );
       const focusTarget = focusTargetCollection && focusTargetCollection[0];
       if (focusTarget && focusTarget.focus) {
-        setTimeout(() => focusTarget.focus());
+        setTimeout(() => focusTarget.focus(), 5);
       }
     }
   }
@@ -79,7 +79,7 @@ class DropdownMenu extends React.Component<DropdownMenuProps> {
   static validToggleClasses = [styles.dropdownToggle, styles.dropdownToggleButton] as string[];
   static focusFirstRef = (refCollection: HTMLElement[]) => {
     if (refCollection && refCollection[0] && refCollection[0].focus) {
-      setTimeout(() => refCollection[0].focus());
+      setTimeout(() => refCollection[0].focus(), 5);
     }
   };
 

package/src/deprecated/components/Dropdown/InternalDropdownItem.tsx

@@ -93,7 +93,7 @@ class InternalDropdownItem extends React.Component<InternalDropdownItemProps> {
       isDisabled,
       role === 'separator'
     );
-    autoFocus && setTimeout(() => customRef.focus());
+    autoFocus && setTimeout(() => customRef.focus(), 5);
   }
 
   componentDidUpdate() {

package/src/helpers/Popper/Popper.tsx

@@ -221,6 +221,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   const [popperContent, setPopperContent] = React.useState(null);
   const [ready, setReady] = React.useState(false);
   const [opacity, setOpacity] = React.useState(0);
+  const [display, setDisplay] = React.useState('none');
   const [internalIsVisible, setInternalIsVisible] = React.useState(isVisible);
   const transitionTimerRef = React.useRef(null);
   const showTimerRef = React.useRef(null);
@@ -469,11 +470,18 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     prevExitDelayRef.current = exitDelay;
   }, [exitDelay]);
 
+  React.useEffect(() => {
+    if (display !== 'none') {
+      forceUpdate && forceUpdate();
+    }
+  }, [display]);
+
   const show = () => {
     onShow();
     clearTimeouts([transitionTimerRef, hideTimerRef]);
     showTimerRef.current = setTimeout(() => {
       setInternalIsVisible(true);
+      setDisplay('');
       setOpacity(1);
       onShown();
     }, entryDelay);
@@ -488,6 +496,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
         setInternalIsVisible(false);
         onHidden();
       }, animationDuration);
+      setDisplay('none');
     }, exitDelay);
   };
 
@@ -516,6 +525,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
       ...popperStyles.popper,
       zIndex,
       opacity,
+      display,
       transition: getOpacityTransition(animationDuration)
     },
     ...attributes.popper