@patternfly/react-core 4.236.3 → 4.236.6

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

@@ -91,7 +91,9 @@ describe('Label', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('editable label', () => {
+  test('editable label', async () => {
+    const user = userEvent.setup();
+
     const { asFragment } = render(
       <Label onClose={jest.fn()} onEditCancel={jest.fn()} onEditComplete={jest.fn()} isEditable>
         Something
@@ -103,7 +105,7 @@ describe('Label', () => {
     expect(button).toBeInTheDocument();
     expect(asFragment()).toMatchSnapshot();
 
-    userEvent.click(button);
+    await user.click(button);
     expect(screen.queryByRole('button', { name: 'Something' })).toBeNull();
     expect(asFragment()).toMatchSnapshot();
   });

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

@@ -34,7 +34,9 @@ describe('LabelGroup', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('label group expanded', () => {
+  test('label group expanded', async () => {
+    const user = userEvent.setup();
+
     render(
       <LabelGroup>
         <Label>1</Label>
@@ -47,7 +49,7 @@ describe('LabelGroup', () => {
 
     expect(showMoreButton.textContent).toBe('1 more');
 
-    userEvent.click(showMoreButton);
+    await user.click(showMoreButton);
     expect(showMoreButton.textContent).toBe('Show Less');
   });
 

package/src/components/LoginPage/__tests__/LoginForm.test.tsx

@@ -11,30 +11,33 @@ describe('LoginForm', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('should call onChangeUsername callback', () => {
+  test('should call onChangeUsername callback', async () => {
     const mockFn = jest.fn();
+    const user = userEvent.setup();
 
     render(<LoginForm onChangeUsername={mockFn} rememberMeLabel="Remember me" />);
 
-    userEvent.type(screen.getByText('Username'), 'updatedUserName');
+    await user.type(screen.getByText('Username'), 'updatedUserName');
     expect(mockFn).toHaveBeenCalled();
   });
 
-  test('should call onChangePassword callback', () => {
+  test('should call onChangePassword callback', async () => {
     const mockFn = jest.fn();
+    const user = userEvent.setup();
 
     render(<LoginForm onChangePassword={mockFn} rememberMeLabel="Remember me" />);
 
-    userEvent.type(screen.getByText('Password'), 'updatedPassword');
+    await user.type(screen.getByText('Password'), 'updatedPassword');
     expect(mockFn).toHaveBeenCalled();
   });
 
-  test('should call onChangeRememberMe callback', () => {
+  test('should call onChangeRememberMe callback', async () => {
     const mockFn = jest.fn();
+    const user = userEvent.setup();
 
     render(<LoginForm onChangeRememberMe={mockFn} rememberMeLabel="Remember me" />);
 
-    userEvent.click(screen.getByLabelText('Remember me'));
+    await user.click(screen.getByLabelText('Remember me'));
     expect(mockFn).toHaveBeenCalled();
   });
 

package/src/components/MenuToggle/MenuToggle.tsx

@@ -172,7 +172,7 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
   }
 }
 
-export const MenuToggle = React.forwardRef<MenuToggleElement, MenuToggleProps>((props, ref) => (
+export const MenuToggle = React.forwardRef((props: MenuToggleProps, ref: React.Ref<MenuToggleElement>) => (
   <MenuToggleBase innerRef={ref} {...props} />
 ));
 

package/src/components/Modal/Modal.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { canUseDOM, KEY_CODES, PickOptional } from '../../helpers';
+import { canUseDOM, KeyTypes, PickOptional } from '../../helpers';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
 import { ModalContent } from './ModalContent';
@@ -120,7 +120,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
 
   handleEscKeyClick = (event: KeyboardEvent): void => {
     const { onEscapePress } = this.props;
-    if (event.keyCode === KEY_CODES.ESCAPE_KEY && this.props.isOpen) {
+    if (event.key === KeyTypes.Escape && this.props.isOpen) {
       onEscapePress ? onEscapePress(event) : this.props.onClose();
     }
   };

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

@@ -7,6 +7,7 @@ import { css } from '../../../../../react-styles/dist/js';
 import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
 
 import { Modal } from '../Modal';
+import { KeyTypes } from '../../../helpers';
 
 jest.spyOn(document, 'createElement');
 jest.spyOn(document.body, 'addEventListener');
@@ -24,10 +25,12 @@ describe('Modal', () => {
     expect(document.createElement).toHaveBeenCalledWith('div');
   });
 
-  test('modal closes with escape', () => {
+  test('modal closes with escape', async () => {
+    const user = userEvent.setup();
+    
     render(<Modal {...props} isOpen appendTo={document.body} />);
 
-    userEvent.type(screen.getByText(props.title), '{esc}');
+    await user.type(screen.getByText(props.title), `{${KeyTypes.Escape}}`);
     expect(props.onClose).toHaveBeenCalled();
   });
 

package/src/components/Modal/__tests__/ModalBoxCloseButton.test.tsx

@@ -6,12 +6,13 @@ import userEvent from '@testing-library/user-event';
 import { ModalBoxCloseButton } from '../ModalBoxCloseButton';
 
 describe('ModalBoxCloseButton', () => {
-  test('onClose called when clicked', () => {
+  test('onClose called when clicked', async () => {
     const onClose = jest.fn();
+    const user = userEvent.setup();
 
     render(<ModalBoxCloseButton className="test-box-close-button-class" onClose={onClose} />);
 
-    userEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('button'));
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 });

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

@@ -56,7 +56,9 @@ describe('Nav', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Default Nav List - Trigger item active update', () => {
+  test('Default Nav List - Trigger item active update', async () => {
+    const user = userEvent.setup();
+
     const { asFragment } = renderNav(
       <Nav>
         <NavList>
@@ -69,7 +71,7 @@ describe('Nav', () => {
       </Nav>
     );
 
-    userEvent.click(screen.getByText('Link 2'));
+    await user.click(screen.getByText('Link 2'));
     expect(asFragment()).toMatchSnapshot();
   });
 
@@ -90,8 +92,9 @@ describe('Nav', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('Expandable Nav verify onExpand', () => {
+  test('Expandable Nav verify onExpand', async () => {
     const onExpand = jest.fn();
+    const user = userEvent.setup();
 
     renderNav(
       <Nav>
@@ -107,12 +110,13 @@ describe('Nav', () => {
       </Nav>
     );
 
-    userEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('button'));
     expect(onExpand).toHaveBeenCalled();
   });
 
-  test('Expandable Nav List - Trigger toggle', () => {
+  test('Expandable Nav List - Trigger toggle', async () => {
     window.location.hash = '#link2';
+    const user = userEvent.setup();
 
     const { asFragment } = renderNav(
       <Nav>
@@ -128,7 +132,7 @@ describe('Nav', () => {
       </Nav>
     );
 
-    userEvent.click(screen.getByText('Section 1'));
+    await user.click(screen.getByText('Section 1'));
     expect(asFragment()).toMatchSnapshot();
   });
 

package/src/components/NumberInput/NumberInput.tsx

@@ -5,7 +5,7 @@ import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import { InputGroup } from '../InputGroup';
 import { Button, ButtonProps } from '../Button';
-import { KEY_CODES, ValidatedOptions } from '../../helpers';
+import { KeyTypes, ValidatedOptions } from '../../helpers';
 import { TextInput } from '../TextInput';
 
 export interface NumberInputProps extends React.HTMLProps<HTMLDivElement> {
@@ -56,11 +56,11 @@ export interface NumberInputProps extends React.HTMLProps<HTMLDivElement> {
 type DefaultKeyDownHandlerArgs = Pick<NumberInputProps, 'inputName' | 'onMinus' | 'onPlus'>;
 
 const defaultKeyDownHandler = (args: DefaultKeyDownHandlerArgs) => (event: React.KeyboardEvent<HTMLInputElement>) => {
-  if (KEY_CODES.ARROW_UP === event.keyCode && args.onPlus) {
+  if (KeyTypes.ArrowUp === event.key && args.onPlus) {
     event.preventDefault();
     args.onPlus(null, args.inputName);
   }
-  if (KEY_CODES.ARROW_DOWN === event.keyCode && args.onMinus) {
+  if (KeyTypes.ArrowDown === event.key && args.onMinus) {
     event.preventDefault();
     args.onMinus(null, args.inputName);
   }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { NumberInput } from '../NumberInput';
 import userEvent from '@testing-library/user-event';
 
@@ -101,71 +101,96 @@ describe('numberInput', () => {
     expect(onChangeMock).not.toHaveBeenCalled();
   });
 
-  test('calls onChange callback when input changes', () => {
+  test('calls onChange callback when input changes', async () => {
     const onChangeMock = jest.fn();
+    const user = userEvent.setup();
+
     render(<NumberInput onChange={onChangeMock}>55</NumberInput>);
 
     const input = screen.getByRole('spinbutton');
-    userEvent.type(input, '55');
+    await user.type(input, '55');
 
     expect(onChangeMock).toHaveBeenCalledTimes(2);
   });
 
-  test('does not call onBlur callback when input does not lose focus', () => {
+  test('does not call onBlur callback when input does not lose focus', async () => {
     const onBlurMock = jest.fn();
+    const user = userEvent.setup();
 
     render(<NumberInput onBlur={onBlurMock}>5</NumberInput>);
 
     const input = screen.getByRole('spinbutton');
-    userEvent.click(input);
+    await user.click(input);
 
     expect(onBlurMock).not.toHaveBeenCalled();
   });
 
-  test('calls onBlur callback when input loses focus', () => {
+  test('calls onBlur callback when input loses focus', async () => {
     const onBlurMock = jest.fn();
+    const user = userEvent.setup();
 
     render(<NumberInput onBlur={onBlurMock}>5</NumberInput>);
 
     const input = screen.getByRole('spinbutton');
-    userEvent.click(input);
-    userEvent.click(document.body);
+    await user.click(input);
+    await user.click(document.body);
 
     expect(onBlurMock).toHaveBeenCalledTimes(1);
   });
 
-  test('removes leading zeros from a positive whole number', () => {
+  test('removes leading zeros from a positive whole number', async () => {
+    const user = userEvent.setup();
+
     render(<NumberInput value={10} onChange={() => {}} />);
 
     const input = screen.getByRole('spinbutton');
-    userEvent.type(input, '{arrowleft}{arrowleft}0');
+
+    await user.click(input);
+
+    // fireEvent is used here due to an issue with the current version of userEvent where userEvent.type/.keyboard does
+    // not appear to cause the '0' to be properly added to the input's display value
+    fireEvent.change(input, { target: { value: '010' } });
     expect(input).toHaveDisplayValue('010');
 
-    userEvent.click(document.body);
+    await user.click(document.body);
 
     expect(input).toHaveDisplayValue('10');
   });
 
-  test('removes leading zeros from a negative whole number', () => {
+  test('removes leading zeros from a negative whole number', async () => {
+    const user = userEvent.setup();
+
     render(<NumberInput value={-18} onChange={() => {}} />);
 
     const input = screen.getByRole('spinbutton');
-    userEvent.type(input, '{arrowleft}{arrowleft}0');
+
+    await user.click(input);
+
+    // fireEvent is used here due to an issue with the current version of userEvent where userEvent.type/.keyboard does
+    // not appear to cause the '0' to be properly added to the input's display value
+    fireEvent.change(input, { target: { value: '-018' } });
     expect(input).toHaveDisplayValue('-018');
 
-    userEvent.click(document.body);
+    await user.click(document.body);
 
     expect(input).toHaveDisplayValue('-18');
   });
 
-  test('removes leading zeros from a decimal number', () => {
+  test('removes leading zeros from a decimal number', async () => {
+    const user = userEvent.setup();
+
     render(<NumberInput value={47.01} onChange={() => {}} />);
 
     const input = screen.getByRole('spinbutton');
-    userEvent.type(input, '{arrowleft}{arrowleft}{arrowleft}{arrowleft}{arrowleft}0');
+
+    await user.click(input);
+
+    // fireEvent is used here due to an issue with the current version of userEvent where userEvent.type/.keyboard does
+    // not appear to cause the '0' to be properly added to the input's display value
+    fireEvent.change(input, { target: { value: '047.01' } });
     expect(input).toHaveDisplayValue('047.01');
 
-    userEvent.click(document.body);
+    await user.click(document.body);
 
     expect(input).toHaveDisplayValue('47.01');
   });

package/src/components/OptionsMenu/OptionsMenuToggleWithText.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import { KEY_CODES } from '../../helpers/constants';
+import { KeyTypes } from '../../helpers/constants';
 import styles from '@patternfly/react-styles/css/components/OptionsMenu/options-menu';
 import { DropdownContext } from '../Dropdown';
 
@@ -96,10 +96,9 @@ export const OptionsMenuToggleWithText: React.FunctionComponent<OptionsMenuToggl
   };
 
   const onEscPress = (event: KeyboardEvent) => {
-    const keyCode = event.keyCode || event.which;
     if (
       isOpen &&
-      (keyCode === KEY_CODES.ESCAPE_KEY || event.key === 'Tab') &&
+      (event.key === KeyTypes.Escape || event.key === 'Tab') &&
       parentRef &&
       parentRef.current &&
       parentRef.current.contains(event.target as Node)

package/src/components/Page/Page.tsx

@@ -197,8 +197,17 @@ export class Page extends React.Component<PageProps, PageState> {
     if (mobileView !== this.state.mobileView) {
       this.setState({ mobileView });
     }
-    this.pageRef.current &&
-      this.setState({ width: this.pageRef.current.clientWidth, height: this.pageRef.current.clientHeight });
+    if (this.pageRef?.current) {
+      const currentWidth = this.pageRef.current.clientWidth;
+      const currentHeight = this.pageRef.current.clientHeight;
+
+      if (this.state.width !== currentWidth) {
+        this.setState({ width: currentWidth });
+      }
+      if (this.state.height !== currentHeight) {
+        this.setState({ height: currentHeight });
+      }
+    }
   };
 
   handleResize = debounce(this.resize, 250);

package/src/components/Pagination/Navigation.tsx

@@ -8,7 +8,7 @@ import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-d
 import { Button, ButtonVariant } from '../Button';
 import { OnSetPage } from './Pagination';
 import { pluralize, PickOptional } from '../../helpers';
-import { KEY_CODES } from '../../helpers/constants';
+import { KeyTypes } from '../../helpers/constants';
 
 export interface NavigationProps extends React.HTMLProps<HTMLElement> {
   /** Additional classes for the container */
@@ -113,7 +113,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
     lastPage: number,
     onPageInput: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void
   ): void {
-    if (event.keyCode === KEY_CODES.ENTER) {
+    if (event.key === KeyTypes.Enter) {
       const inputPage = Navigation.parseInteger(this.state.userInputPage, lastPage) as number;
       onPageInput(event, Number.isNaN(inputPage) ? (page as number) : inputPage);
       this.handleNewPage(event, Number.isNaN(inputPage) ? (page as number) : inputPage);