@patternfly/react-core 4.235.4 → 4.235.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.235.4",
+  "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.4",
-    "@patternfly/react-styles": "^4.85.4",
-    "@patternfly/react-tokens": "^4.87.4",
+    "@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": "35bd0846f74042fe9a5cb755ac8bf89ae4716bce"
+  "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/NumberInput/NumberInput.tsx

@@ -10,7 +10,7 @@ import { TextInput } from '../TextInput';
 
 export interface NumberInputProps extends React.HTMLProps<HTMLDivElement> {
   /** Value of the number input */
-  value?: number;
+  value?: number | null;
   /** Additional classes added to the number input */
   className?: string;
   /** Sets the width of the number input to a number of characters */
@@ -89,6 +89,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
   plusBtnProps,
   ...props
 }: NumberInputProps) => {
+  value = value || 0;
   const numberInputUnit = <div className={css(styles.numberInputUnit)}>{unit}</div>;
   const keyDownHandler =
     inputProps && inputProps.onKeyDown ? inputProps.onKeyDown : defaultKeyDownHandler({ inputName, onMinus, onPlus });
@@ -128,6 +129,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
           </span>
         </Button>
         <TextInput
+          {...inputProps}
           type="number"
           value={value}
           name={inputName}
@@ -138,7 +140,6 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
           {...(!onChange && { isReadOnly: true })}
           onKeyDown={keyDownHandler}
           validated={validated}
-          {...inputProps}
         />
         <Button
           variant="control"

package/src/components/NumberInput/__tests__/NumberInput.test.tsx

@@ -10,19 +10,19 @@ describe('numberInput', () => {
   });
 
   test('renders success validated', () => {
-    const { asFragment } = render(<NumberInput validated='success' />);
+    const { asFragment } = render(<NumberInput validated="success" />);
     expect(asFragment()).toMatchSnapshot();
-  })
+  });
 
   test('renders error validated', () => {
-    const { asFragment } = render(<NumberInput validated='error' />);
+    const { asFragment } = render(<NumberInput validated="error" />);
     expect(asFragment()).toMatchSnapshot();
-  })
+  });
 
   test('renders warning validated', () => {
-    const { asFragment } = render(<NumberInput validated='warning' />);
+    const { asFragment } = render(<NumberInput validated="warning" />);
     expect(asFragment()).toMatchSnapshot();
-  })
+  });
 
   test('renders value', () => {
     const { asFragment } = render(<NumberInput value={90} />);
@@ -136,37 +136,74 @@ describe('numberInput', () => {
 
   test('removes leading zeros from a positive whole number', () => {
     render(<NumberInput value={10} onChange={() => {}} />);
-  
+
     const input = screen.getByRole('spinbutton');
     userEvent.type(input, '{arrowleft}{arrowleft}0');
     expect(input).toHaveDisplayValue('010');
-  
+
     userEvent.click(document.body);
-  
+
     expect(input).toHaveDisplayValue('10');
   });
 
   test('removes leading zeros from a negative whole number', () => {
     render(<NumberInput value={-18} onChange={() => {}} />);
-  
+
     const input = screen.getByRole('spinbutton');
     userEvent.type(input, '{arrowleft}{arrowleft}0');
     expect(input).toHaveDisplayValue('-018');
-  
+
     userEvent.click(document.body);
-  
+
     expect(input).toHaveDisplayValue('-18');
   });
 
   test('removes leading zeros from a decimal number', () => {
     render(<NumberInput value={47.01} onChange={() => {}} />);
-  
+
     const input = screen.getByRole('spinbutton');
     userEvent.type(input, '{arrowleft}{arrowleft}{arrowleft}{arrowleft}{arrowleft}0');
     expect(input).toHaveDisplayValue('047.01');
-  
+
     userEvent.click(document.body);
-  
+
     expect(input).toHaveDisplayValue('47.01');
   });
+
+  test('renders 0 if no value passed', () => {
+    render(<NumberInput />);
+    const input = screen.getByRole('spinbutton');
+    expect(input).toHaveDisplayValue('0');
+  });
+
+  test('renders 0 if undefined value passed', () => {
+    render(<NumberInput value={undefined} />);
+    const input = screen.getByRole('spinbutton');
+    expect(input).toHaveDisplayValue('0');
+  });
+
+  test('renders 0 if null value passed', () => {
+    render(<NumberInput value={null} />);
+    const input = screen.getByRole('spinbutton');
+    expect(input).toHaveDisplayValue('0');
+  });
+
+  test('does not throw an error if onChange is passed via inputProps as well as the onChange prop', () => {
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const NumberInputWrapper = () => {
+      const [value, setValue] = React.useState(0);
+      const onChange = event => setValue(event.currentTarget.value);
+      const inputProps = { onChange: onChange };
+
+      return <NumberInput value={value} onChange={onChange} inputProps={{ ...inputProps }} />;
+    };
+
+    render(<NumberInputWrapper />);
+
+    const input = screen.getByRole('spinbutton');
+    userEvent.type(input, '0');
+
+    expect(consoleSpy).not.toHaveBeenCalled();
+  });
 });

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 (
     <>