@patternfly/react-core 5.4.0-prerelease.27 → 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.26","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.26","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.26","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.27",
+  "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": "0781d69df6e3426e8973572c587e1f51b5ce693e"
+  "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/components/Wizard/Wizard.tsx

@@ -91,10 +91,12 @@ export const Wizard = ({
     }
   }, [startIndex]);
 
-  // When children change, active step index should reset
+  // When the number of steps changes and pushes activeStepIndex out of bounds, reset back to startIndex
   React.useEffect(() => {
-    setActiveStepIndex(startIndex);
-  }, [children, startIndex]);
+    if (activeStepIndex > initialSteps.length) {
+      setActiveStepIndex(startIndex);
+    }
+  }, [initialSteps, activeStepIndex, startIndex]);
 
   const focusMainContentElement = () =>
     setTimeout(() => {

package/src/components/Wizard/WizardContext.tsx

@@ -74,10 +74,20 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
   const [currentSteps, setCurrentSteps] = React.useState<WizardStepType[]>(initialSteps);
   const [currentFooter, setCurrentFooter] = React.useState<WizardFooterType>();
 
-  // Callback to update steps if they change after initial render
+  // Callback to update steps if the overall step number changes
   React.useEffect(() => {
-    setCurrentSteps(initialSteps);
-  }, [initialSteps]);
+    if (currentSteps.length !== initialSteps.length) {
+      const newSteps = initialSteps.map((newStep) => {
+        const currentStepMatch = currentSteps.find((step) => step.id === newStep.id);
+        // If an existing step has the same id as a new step, carry over props
+        if (currentStepMatch) {
+          return { ...currentStepMatch, ...newStep };
+        }
+        return newStep;
+      });
+      setCurrentSteps(newSteps);
+    }
+  }, [currentSteps, initialSteps]);
 
   // Combined initial and current state steps
   const steps = React.useMemo(
@@ -130,7 +140,6 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
           if (prevStep.id === step.id) {
             return { ...prevStep, ...step };
           }
-
           return prevStep;
         })
       ),

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