@patternfly/react-core 4.235.3 → 4.235.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.235.3",
+  "version": "4.235.6",
   "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.3",
-    "@patternfly/react-styles": "^4.85.3",
-    "@patternfly/react-tokens": "^4.87.3",
+    "@patternfly/react-icons": "^4.86.6",
+    "@patternfly/react-styles": "^4.85.6",
+    "@patternfly/react-tokens": "^4.87.6",
     "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": "cbdc5af739f7e9d074dc0012497e85b1efa25180"
+  "gitHead": "e688e3b26385dc09280dca250d72a733ce18b52a"
 }

package/src/components/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx

@@ -81,7 +81,7 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
     }
   };
 
-  const onDrop = (source: DraggableItemPosition, dest?: DraggableItemPosition) => {
+  const onDrop = (source: DraggableItemPosition, dest: DraggableItemPosition | undefined) => {
     if (dest) {
       const newList = [...chosenOptions];
       const [removed] = newList.splice(source.index, 1);

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/demos/ComposableMenu/examples/ComposableActionsMenu.tsx

@@ -36,7 +36,7 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
     };
   }, [isOpen, menuRef]);
 
-  const onSelect = (event?: React.MouseEvent, itemId?: string | number) => {
+  const onSelect = (event: React.MouseEvent | undefined, itemId: string | number | undefined) => {
     if (typeof itemId === 'string' || typeof itemId === 'undefined') {
       return;
     }

package/src/demos/ComposableMenu/examples/ComposableFlyout.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';
 
-// eslint-disable-next-line no-console
-const onSelect = (event?: React.MouseEvent, itemId?: string | number) => console.log('selected', itemId);
-
+/* eslint-disable no-console */
+const onSelect = (event: React.MouseEvent | undefined, itemId: string | number | undefined) =>
+  console.log('selected', itemId);
+/* eslint-enable no-console */
 interface FlyoutMenuProps {
   children?: React.ReactElement;
   depth: number;

package/src/demos/ComposableMenu/examples/ComposableSimpleCheckboxSelect.tsx

@@ -50,7 +50,7 @@ export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (event?: React.MouseEvent, itemId?: string | number) => {
+  const onSelect = (event: React.MouseEvent | undefined, itemId: string | number | undefined) => {
     if (typeof itemId === 'string' || typeof itemId === 'undefined') {
       return;
     }

package/src/demos/ComposableMenu/examples/ComposableSimpleSelect.tsx

@@ -59,7 +59,7 @@ export const ComposableSimpleSelect: React.FunctionComponent = () => {
     </MenuToggle>
   );
 
-  function onSelect(event?: React.MouseEvent, itemId?: string | number) {
+  function onSelect(event: React.MouseEvent | undefined, itemId: string | number | undefined) {
     if (typeof itemId === 'undefined') {
       return;
     }

package/src/demos/ComposableMenu/examples/ComposableTypeaheadSelect.tsx

@@ -55,7 +55,7 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
 
   const focusOnInput = () => menuToggleRef.current?.querySelector('input')?.focus();
 
-  const onMenuSelect = (event?: React.MouseEvent, itemId?: string | number) => {
+  const onMenuSelect = (event: React.MouseEvent | undefined, itemId: string | number | undefined) => {
     if (itemId) {
       setInputValue(itemId.toString());
       setIsSelected(true);
@@ -124,7 +124,7 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
   };
 
   // Close the menu when a click occurs outside of the menu toggle content
-  const onDocumentClick = (event?: MouseEvent) => {
+  const onDocumentClick = (event: MouseEvent | undefined) => {
     if (!menuToggleRef.current?.contains(event?.target as HTMLElement)) {
       setIsMenuOpen(false);
     }