@patternfly/react-core 4.235.6 → 4.235.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.235.6",
+  "version": "4.235.7",
   "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",
@@ -44,9 +44,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.86.6",
-    "@patternfly/react-styles": "^4.85.6",
-    "@patternfly/react-tokens": "^4.87.6",
+    "@patternfly/react-icons": "^4.86.7",
+    "@patternfly/react-styles": "^4.85.7",
+    "@patternfly/react-tokens": "^4.87.7",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -70,5 +70,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "e688e3b26385dc09280dca250d72a733ce18b52a"
+  "gitHead": "87397c498b2fb5bf5425336fd14da3864dd9334d"
 }

package/src/components/DualListSelector/DualListSelectorControl.tsx

@@ -37,7 +37,8 @@ export const DualListSelectorControlBase: React.FunctionComponent<DualListSelect
   tooltipProps = {} as any,
   ...props
 }: DualListSelectorControlProps) => {
-  const ref = innerRef || React.useRef(null);
+  const privateRef = React.useRef(null);
+  const ref = innerRef || privateRef;
   return (
     <div className={css('pf-c-dual-list-selector__controls-item', className)} {...props}>
       <Button

package/src/components/DualListSelector/DualListSelectorControlsWrapper.tsx

@@ -23,7 +23,8 @@ export const DualListSelectorControlsWrapperBase: React.FunctionComponent<DualLi
   'aria-label': ariaLabel = 'Controls for moving options between lists',
   ...props
 }: DualListSelectorControlsWrapperProps) => {
-  const wrapperRef = innerRef || React.useRef(null);
+  const ref = React.useRef(null);
+  const wrapperRef = innerRef || ref;
   // Adds keyboard navigation to the dynamically built dual list selector controls. Works when controls are dynamically built
   // as well as when they are passed in via children.
   const handleKeys = (event: KeyboardEvent) => {

package/src/components/DualListSelector/DualListSelectorListItem.tsx

@@ -47,7 +47,8 @@ export const DualListSelectorListItemBase: React.FunctionComponent<DualListSelec
   draggableButtonAriaLabel = 'Reorder option',
   ...props
 }: DualListSelectorListItemProps) => {
-  const ref = innerRef || React.useRef<HTMLLIElement>(null);
+  const privateRef = React.useRef<HTMLLIElement>(null);
+  const ref = innerRef || privateRef;
   const { setFocusedOption } = React.useContext(DualListSelectorListContext);
 
   return (

package/src/components/DualListSelector/DualListSelectorListWrapper.tsx

@@ -42,7 +42,8 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
   ...props
 }: DualListSelectorListWrapperProps) => {
   const [focusedOption, setFocusedOption] = React.useState('');
-  const menuRef = innerRef || React.useRef(null);
+  const ref = React.useRef(null);
+  const menuRef = innerRef || ref;
   const { isTree } = React.useContext(DualListSelectorContext);
 
   // sets up keyboard focus handling for the dual list selector menu child of the pane. This keyboard

package/src/components/InputGroup/InputGroup.tsx

@@ -25,7 +25,8 @@ export const InputGroup: React.FunctionComponent<InputGroupProps> = ({
     (child: any) => !formCtrls.includes(child.type.displayName) && child.props.id
   ) as React.ReactElement<{ id: string }>;
 
-  const inputGroupRef = innerRef || React.useRef(null);
+  const ref = React.useRef(null);
+  const inputGroupRef = innerRef || ref;
 
   return (
     <div ref={inputGroupRef} className={css(styles.inputGroup, className)} {...props}>

package/src/components/SearchInput/SearchInput.tsx

@@ -125,7 +125,8 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   const [isSearchMenuOpen, setIsSearchMenuOpen] = React.useState(false);
   const [searchValue, setSearchValue] = React.useState(value);
   const searchInputRef = React.useRef(null);
-  const searchInputInputRef = innerRef || React.useRef(null);
+  const ref = React.useRef(null);
+  const searchInputInputRef = innerRef || ref;
 
   React.useEffect(() => {
     setSearchValue(value);

package/src/components/TextInputGroup/TextInputGroup.tsx

@@ -27,7 +27,8 @@ export const TextInputGroup: React.FunctionComponent<TextInputGroupProps> = ({
   innerRef,
   ...props
 }: TextInputGroupProps) => {
-  const textInputGroupRef = innerRef || React.useRef(null);
+  const ref = React.useRef(null);
+  const textInputGroupRef = innerRef || ref;
 
   return (
     <TextInputGroupContext.Provider value={{ isDisabled }}>

package/src/components/TextInputGroup/TextInputGroupMain.tsx

@@ -57,7 +57,8 @@ export const TextInputGroupMain: React.FunctionComponent<TextInputGroupMainProps
   ...props
 }: TextInputGroupMainProps) => {
   const { isDisabled } = React.useContext(TextInputGroupContext);
-  const textInputGroupInputInputRef = innerRef || React.useRef(null);
+  const ref = React.useRef(null);
+  const textInputGroupInputInputRef = innerRef || ref;
 
   const handleChange = (event: React.FormEvent<HTMLInputElement>) => {
     onChange(event.currentTarget.value, event);

package/src/next/components/Wizard/WizardToggle.tsx

@@ -84,95 +84,97 @@ export const WizardToggle = ({
         );
       });
 
-  const wizardNav = isCustomWizardNav(nav)
-    ? nav(isNavOpen, steps, activeStep, goToStepByIndex)
-    : React.useMemo(() => {
-        const props = {
-          isOpen: isNavOpen,
-          'aria-label': nav?.ariaLabel || 'Wizard nav',
-          ...(nav?.ariaLabelledBy && { 'aria-labelledby': nav?.ariaLabelledBy })
-        };
+  const wizardNav = React.useMemo(() => {
+    if (isCustomWizardNav(nav)) {
+      return nav(isNavOpen, steps, activeStep, goToStepByIndex);
+    }
+
+    const props = {
+      isOpen: isNavOpen,
+      'aria-label': nav?.ariaLabel || 'Wizard nav',
+      ...(nav?.ariaLabelledBy && { 'aria-labelledby': nav?.ariaLabelledBy })
+    };
 
-        return (
-          <WizardNav {...props}>
-            {steps.map((step, index) => {
-              const stepIndex = index + 1;
-              const stepNavItem = step.navItem && <React.Fragment key={step.id}>{step.navItem}</React.Fragment>;
-
-              if (isWizardParentStep(step)) {
-                let firstSubStepIndex;
-                let hasActiveChild = false;
-
-                const subNavItems = step.subStepIds?.map((subStepId, index) => {
-                  const subStep = steps.find(step => step.id === subStepId);
-                  const subStepIndex = steps.indexOf(subStep) + 1;
-
-                  if (index === 0) {
-                    firstSubStepIndex = subStepIndex;
-                  }
-
-                  if (activeStep?.id === subStep.id) {
-                    hasActiveChild = true;
-                  }
-
-                  return subStep.navItem ? (
-                    <React.Fragment key={subStep.id}>{subStep.navItem}</React.Fragment>
-                  ) : (
-                    <WizardNavItem
-                      key={subStep.id}
-                      id={subStep.id}
-                      content={subStep.name}
-                      isCurrent={activeStep?.id === subStep.id}
-                      isDisabled={subStep.isDisabled || (nav?.forceStepVisit && !subStep.visited)}
-                      step={subStepIndex}
-                      onNavItemClick={goToStepByIndex}
-                    />
-                  );
-                });
-
-                const hasEnabledChildren = React.Children.toArray(subNavItems).some(
-                  child => React.isValidElement(child) && !child.props.isDisabled
-                );
-
-                return (
-                  stepNavItem || (
-                    <WizardNavItem
-                      key={step.id}
-                      id={step.id}
-                      content={step.name}
-                      isExpandable={nav?.isExpandable}
-                      isCurrent={hasActiveChild}
-                      isDisabled={!hasEnabledChildren}
-                      step={firstSubStepIndex}
-                      onNavItemClick={goToStepByIndex}
-                    >
-                      <WizardNav {...props} returnList>
-                        {subNavItems}
-                      </WizardNav>
-                    </WizardNavItem>
-                  )
-                );
+    return (
+      <WizardNav {...props}>
+        {steps.map((step, index) => {
+          const stepIndex = index + 1;
+          const stepNavItem = step.navItem && <React.Fragment key={step.id}>{step.navItem}</React.Fragment>;
+
+          if (isWizardParentStep(step)) {
+            let firstSubStepIndex;
+            let hasActiveChild = false;
+
+            const subNavItems = step.subStepIds?.map((subStepId, index) => {
+              const subStep = steps.find(step => step.id === subStepId);
+              const subStepIndex = steps.indexOf(subStep) + 1;
+
+              if (index === 0) {
+                firstSubStepIndex = subStepIndex;
               }
 
-              if (isWizardBasicStep(step)) {
-                return (
-                  stepNavItem || (
-                    <WizardNavItem
-                      key={step.id}
-                      id={step.id}
-                      content={step.name}
-                      isCurrent={activeStep?.id === step.id}
-                      isDisabled={step.isDisabled || (nav?.forceStepVisit && !step.visited)}
-                      step={stepIndex}
-                      onNavItemClick={goToStepByIndex}
-                    />
-                  )
-                );
+              if (activeStep?.id === subStep.id) {
+                hasActiveChild = true;
               }
-            })}
-          </WizardNav>
-        );
-      }, [activeStep?.id, goToStepByIndex, isNavOpen, nav, steps]);
+
+              return subStep.navItem ? (
+                <React.Fragment key={subStep.id}>{subStep.navItem}</React.Fragment>
+              ) : (
+                <WizardNavItem
+                  key={subStep.id}
+                  id={subStep.id}
+                  content={subStep.name}
+                  isCurrent={activeStep?.id === subStep.id}
+                  isDisabled={subStep.isDisabled || (nav?.forceStepVisit && !subStep.visited)}
+                  step={subStepIndex}
+                  onNavItemClick={goToStepByIndex}
+                />
+              );
+            });
+
+            const hasEnabledChildren = React.Children.toArray(subNavItems).some(
+              child => React.isValidElement(child) && !child.props.isDisabled
+            );
+
+            return (
+              stepNavItem || (
+                <WizardNavItem
+                  key={step.id}
+                  id={step.id}
+                  content={step.name}
+                  isExpandable={nav?.isExpandable}
+                  isCurrent={hasActiveChild}
+                  isDisabled={!hasEnabledChildren}
+                  step={firstSubStepIndex}
+                  onNavItemClick={goToStepByIndex}
+                >
+                  <WizardNav {...props} returnList>
+                    {subNavItems}
+                  </WizardNav>
+                </WizardNavItem>
+              )
+            );
+          }
+
+          if (isWizardBasicStep(step)) {
+            return (
+              stepNavItem || (
+                <WizardNavItem
+                  key={step.id}
+                  id={step.id}
+                  content={step.name}
+                  isCurrent={activeStep?.id === step.id}
+                  isDisabled={step.isDisabled || (nav?.forceStepVisit && !step.visited)}
+                  step={stepIndex}
+                  onNavItemClick={goToStepByIndex}
+                />
+              )
+            );
+          }
+        })}
+      </WizardNav>
+    );
+  }, [activeStep?.id, goToStepByIndex, isNavOpen, nav, steps]);
 
   return (
     <>