@patternfly/react-core 5.2.0-prerelease.27 → 5.2.0-prerelease.29

package/src/components/Form/__tests__/FormContext.test.tsx

@@ -3,9 +3,8 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { FormContextConsumer, FormContextProvider } from '../FormContext';
 
-const customRender = (ui, initialValues?: Record<string, any>) => {
-  return render(<FormContextProvider initialValues={initialValues}>{ui}</FormContextProvider>);
-};
+const customRender = (ui, initialValues?: Record<string, any>) =>
+  render(<FormContextProvider initialValues={initialValues}>{ui}</FormContextProvider>);
 
 test('consumers can show all values from "values" provided by "initialValues"', () => {
   const initialValues = { fieldOneId: 'some value', fieldTwoId: 'some other value' };
@@ -63,9 +62,9 @@ test('sets a new value for a single field using setValue', async () => {
 
   customRender(
     <FormContextConsumer>
-      {({ getValue, setValue }) => {
-        return <input onChange={(event) => setValue('someId', event.target.value)} value={getValue('someId')} />;
-      }}
+      {({ getValue, setValue }) => (
+        <input onChange={(event) => setValue('someId', event.target.value)} value={getValue('someId')} />
+      )}
     </FormContextConsumer>,
     {
       someId: 'some value'
@@ -86,16 +85,14 @@ test('using setValues, consumers can set multiple values at once', async () => {
 
   customRender(
     <FormContextConsumer>
-      {({ values, setValues }) => {
-        return (
-          <>
-            <input type="checkbox" onClick={() => setValues(newValues)} />
-            {Object.entries(values).map(([fieldId, value]) => (
-              <span key={fieldId}>{`${fieldId}: ${value}`}</span>
-            ))}
-          </>
-        );
-      }}
+      {({ values, setValues }) => (
+        <>
+          <input type="checkbox" onClick={() => setValues(newValues)} />
+          {Object.entries(values).map(([fieldId, value]) => (
+            <span key={fieldId}>{`${fieldId}: ${value}`}</span>
+          ))}
+        </>
+      )}
     </FormContextConsumer>,
     {
       someId: 'some value'
@@ -129,14 +126,12 @@ test('sets a new error for a single field using setError', async () => {
 
   customRender(
     <FormContextConsumer>
-      {({ errors, setError }) => {
-        return (
-          <>
-            <input type="checkbox" onClick={() => setError('someId', 'some error!')} />
-            {`Error: ${errors.someId}`}
-          </>
-        );
-      }}
+      {({ errors, setError }) => (
+        <>
+          <input type="checkbox" onClick={() => setError('someId', 'some error!')} />
+          {`Error: ${errors.someId}`}
+        </>
+      )}
     </FormContextConsumer>
   );
 
@@ -150,16 +145,14 @@ test('using setErrors, consumers can set multiple errors at once', async () => {
 
   customRender(
     <FormContextConsumer>
-      {({ errors, setErrors }) => {
-        return (
-          <>
-            <input type="checkbox" onClick={() => setErrors(newErrors)} />
-            {Object.entries(errors).map(([fieldId, error]) => (
-              <span key={fieldId}>{`${fieldId}: ${error}`}</span>
-            ))}
-          </>
-        );
-      }}
+      {({ errors, setErrors }) => (
+        <>
+          <input type="checkbox" onClick={() => setErrors(newErrors)} />
+          {Object.entries(errors).map(([fieldId, error]) => (
+            <span key={fieldId}>{`${fieldId}: ${error}`}</span>
+          ))}
+        </>
+      )}
     </FormContextConsumer>,
     {
       someId: 'some value'
@@ -175,14 +168,12 @@ test('sets a new touched state for a single field using setTouched', async () =>
 
   customRender(
     <FormContextConsumer>
-      {({ touched, setTouched }) => {
-        return (
-          <>
-            <input type="checkbox" onClick={() => setTouched('someId', true)} />
-            {`isTouched: ${touched.someId}`}
-          </>
-        );
-      }}
+      {({ touched, setTouched }) => (
+        <>
+          <input type="checkbox" onClick={() => setTouched('someId', true)} />
+          {`isTouched: ${touched.someId}`}
+        </>
+      )}
     </FormContextConsumer>
   );
 
@@ -195,14 +186,12 @@ test("can get a single field's touched state by using isTouched", async () => {
 
   customRender(
     <FormContextConsumer>
-      {({ touched, setTouched, isTouched }) => {
-        return (
-          <>
-            <input type="checkbox" onClick={() => setTouched('someId', !touched.someId)} />
-            {`isTouched: ${isTouched('someId')}`}
-          </>
-        );
-      }}
+      {({ touched, setTouched, isTouched }) => (
+        <>
+          <input type="checkbox" onClick={() => setTouched('someId', !touched.someId)} />
+          {`isTouched: ${isTouched('someId')}`}
+        </>
+      )}
     </FormContextConsumer>
   );
 

package/src/components/Form/__tests__/FormFieldGroup.test.tsx

@@ -50,7 +50,7 @@ test('Verify console error logged when there is no aria-label or title', () => {
       header={<FormFieldGroupHeader titleDescription="Field group 4 description text." actions={<Button />} />}
     />
   );
-  const { asFragment } = render(FieldGroup);
+  render(FieldGroup);
   expect(consoleErrorMock).toHaveBeenCalled();
 });
 

package/src/components/Form/__tests__/FormGroup.test.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { ValidatedOptions } from '../../../helpers/constants';
 import { FormGroup } from '../FormGroup';
 import { Form } from '../Form';
 

package/src/components/Form/__tests__/FormHelperText.test.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 
-import { ExclamationCircleIcon } from '@patternfly/react-icons';
 import { FormHelperText } from '../FormHelperText';
 
 describe('FormHelperText', () => {

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { render } from '@testing-library/react';
 import { HelperText } from '../HelperText';
 import { HelperTextItem } from '../HelperTextItem';
-import { CheckIcon } from '@patternfly/react-icons';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 
 describe('HelperText', () => {
   test('simple helper text renders successfully', () => {
@@ -14,7 +14,7 @@ describe('HelperText', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  Object.values(['default', 'indeterminate', 'warning', 'success', 'invalid']).forEach(variant => {
+  Object.values(['default', 'indeterminate', 'warning', 'success', 'invalid']).forEach((variant) => {
     test(`${variant} helper text variant applies successfully`, () => {
       const { asFragment } = render(
         <HelperTextItem variant={variant as 'default' | 'indeterminate' | 'warning' | 'success' | 'error'}>

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Icon } from '../Icon';
-import { CheckIcon } from '@patternfly/react-icons';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import styles from '@patternfly/react-styles/css/components/Icon/icon';
 
 test('renders basic icon successfully', () => {
@@ -14,7 +14,7 @@ test('renders basic icon successfully', () => {
 });
 
 test('checks basic icon structure', () => {
-  const { asFragment } = render(
+  render(
     <Icon title="icon">
       <CheckIcon />
     </Icon>

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

@@ -23,7 +23,7 @@ describe('InputGroup', () => {
       </InputGroup>
     );
 
-    const formControl = screen.getByLabelText("User password");
-    expect(formControl).not.toHaveAttribute("aria-describedby");
+    const formControl = screen.getByLabelText('User password');
+    expect(formControl).not.toHaveAttribute('aria-describedby');
   });
 });

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

@@ -62,7 +62,7 @@ describe('Masthead', () => {
     'insetXl',
     'inset2xl',
     'inset3xl'
-  ]).forEach(inset => {
+  ]).forEach((inset) => {
     test(`verify ${inset} inset breakpoints`, () => {
       const { asFragment } = render(
         <Masthead inset={{ default: inset, sm: inset, md: inset, lg: inset, xl: inset, '2xl': inset }}>test</Masthead>

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

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import userEvent from '@testing-library/user-event';
 
 import { Menu } from '../Menu';
 import { MenuItem } from '../MenuItem';
@@ -54,7 +53,7 @@ describe('Menu', () => {
 
   describe('with hasCheckbox', () => {
     test('should render Menu with checkbox items', () => {
-      const { asFragment } = render(
+      render(
         <Menu>
           <MenuContent>
             <MenuList>
@@ -67,7 +66,7 @@ describe('Menu', () => {
       );
       const checkbox1 = screen.getAllByRole('checkbox')[0];
       expect(checkbox1).not.toBeChecked();
-      expect(screen.getByText("Checkbox 1")).toBeInTheDocument();
+      expect(screen.getByText('Checkbox 1')).toBeInTheDocument();
     });
   });
 });

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

@@ -5,7 +5,7 @@ import { Badge } from '../../Badge';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import userEvent from '@testing-library/user-event';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 describe('menu toggle', () => {
   test('renders successfully', () => {
@@ -61,21 +61,23 @@ describe('menu toggle', () => {
     const mockClick = jest.fn();
     const user = userEvent.setup();
 
-    render(<MenuToggle
-      onClick={mockClick}
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="split-button-checkbox-with-text-disabled-example"
-            key="split-checkbox-with-text-disabled"
-            aria-label="Select all"
-          >
-            10 selected
-          </MenuToggleCheckbox>
-        ]
-      }}
-      aria-label="Menu toggle with checkbox split button and text"
-    />);
+    render(
+      <MenuToggle
+        onClick={mockClick}
+        splitButtonOptions={{
+          items: [
+            <MenuToggleCheckbox
+              id="split-button-checkbox-with-text-disabled-example"
+              key="split-checkbox-with-text-disabled"
+              aria-label="Select all"
+            >
+              10 selected
+            </MenuToggleCheckbox>
+          ]
+        }}
+        aria-label="Menu toggle with checkbox split button and text"
+      />
+    );
 
     await user.click(screen.getByRole(`button`) as Element);
     expect(mockClick).toHaveBeenCalled();

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatus.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { MultipleFileUploadStatus } from '../MultipleFileUploadStatus';
 import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
 

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx

@@ -48,7 +48,7 @@ describe('MultipleFileUploadStatusItem', () => {
         fileName="testCustomFileName.txt"
         fileSize={42}
         progressId="test-progress-id"
-        progressAriaLiveMessage={loadPercentage => `test message ${loadPercentage}`}
+        progressAriaLiveMessage={(loadPercentage) => `test message ${loadPercentage}`}
       />
     );
 

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadTitle.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { MultipleFileUploadTitle } from '../MultipleFileUploadTitle';
 
 describe('MultipleFileUploadTitle', () => {

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadTitleIcon.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { MultipleFileUploadTitleIcon } from '../MultipleFileUploadTitleIcon';
 
 describe('MultipleFileUploadTitleIcon', () => {

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadTitleText.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { MultipleFileUploadTitleText } from '../MultipleFileUploadTitleText';
 
 describe('MultipleFileUploadTitleText', () => {

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadTitleTextSeparator.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { MultipleFileUploadTitleTextSeparator } from '../MultipleFileUploadTitleTextSeparator';
 
 describe('MultipleFileUploadTitleTextSeparator', () => {

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

@@ -30,7 +30,7 @@ describe('Nav', () => {
     const { asFragment } = renderNav(
       <Nav className="test-nav-class">
         <NavList className="test-nav-list-class">
-          {props.items.map(item => (
+          {props.items.map((item) => (
             <NavItem to={item.to} key={item.to} className="test-nav-item-class">
               {item.label}
             </NavItem>
@@ -47,7 +47,7 @@ describe('Nav', () => {
       <React.StrictMode>
         <Nav className="test-nav-class">
           <NavList className="test-nav-list-class">
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={item.to} className="test-nav-item-class">
                 {item.label}
               </NavItem>
@@ -64,7 +64,7 @@ describe('Nav', () => {
     const { asFragment } = renderNav(
       <Nav className="test=nav-class" theme="dark">
         <NavList className="test-nav-list-class">
-          {props.items.map(item => (
+          {props.items.map((item) => (
             <NavItem to={item.to} key={item.to} className="test-nav-item-class">
               {item.label}
             </NavItem>
@@ -81,7 +81,7 @@ describe('Nav', () => {
     const { asFragment } = renderNav(
       <Nav>
         <NavList>
-          {props.items.map(item => (
+          {props.items.map((item) => (
             <NavItem to={item.to} key={item.to}>
               {item.label}
             </NavItem>
@@ -99,7 +99,7 @@ describe('Nav', () => {
       <Nav>
         <NavList>
           <NavExpandable id="grp-1" title="Section 1">
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={item.to}>
                 {item.label}
               </NavItem>
@@ -119,7 +119,7 @@ describe('Nav', () => {
       <Nav>
         <NavList>
           <NavExpandable id="grp-1" title="Section 1" onExpand={onExpand}>
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={item.to}>
                 {item.label}
               </NavItem>
@@ -141,7 +141,7 @@ describe('Nav', () => {
       <Nav>
         <NavList>
           <NavExpandable id="grp-1" title="Section 1" className="expandable-group" isExpanded>
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={item.to}>
                 {item.label}
               </NavItem>
@@ -160,7 +160,7 @@ describe('Nav', () => {
       <Nav aria-label="Test">
         <NavList>
           <NavExpandable id="grp-1" title="Section 1" srText="Section 1 - Example sub-navigation">
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={item.to}>
                 {item.label}
               </NavItem>
@@ -177,7 +177,7 @@ describe('Nav', () => {
       <Nav>
         <NavGroup id="grp-1" title="Section 1">
           <NavList>
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={`section1_${item.to}`}>
                 {item.label}
               </NavItem>
@@ -186,7 +186,7 @@ describe('Nav', () => {
         </NavGroup>
         <NavGroup id="grp-2" title="Section 2">
           <NavList>
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={`section2_${item.to}`}>
                 {item.label}
               </NavItem>
@@ -202,7 +202,7 @@ describe('Nav', () => {
     const { asFragment } = renderNav(
       <Nav variant="horizontal">
         <NavList>
-          {props.items.map(item => (
+          {props.items.map((item) => (
             <NavItem to={item.to} key={item.to}>
               {item.label}
             </NavItem>
@@ -217,7 +217,7 @@ describe('Nav', () => {
     const { asFragment } = renderNav(
       <Nav variant="horizontal-subnav">
         <NavList>
-          {props.items.map(item => (
+          {props.items.map((item) => (
             <NavItem to={item.to} key={item.to}>
               {item.label}
             </NavItem>
@@ -232,7 +232,7 @@ describe('Nav', () => {
     const { asFragment } = renderNav(
       <Nav variant="tertiary">
         <NavList>
-          {props.items.map(item => (
+          {props.items.map((item) => (
             <NavItem to={item.to} key={item.to}>
               {item.label}
             </NavItem>
@@ -269,7 +269,7 @@ describe('Nav', () => {
       </Nav>
     );
 
-    await user.hover(screen.getByText('My custom node'))
+    await user.hover(screen.getByText('My custom node'));
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/Nav/examples/NavFlyout.tsx

@@ -22,7 +22,7 @@ export const NavFlyout: React.FunctionComponent = () => {
           <MenuItem onClick={onMenuItemClick} flyoutMenu={children} itemId={`nav-flyout-next-menu-${depth}`}>
             Next menu
           </MenuItem>
-          {Array.apply(0, Array(numFlyouts - depth)).map((_item, index: number) => (
+          {Array.from({ length: numFlyouts - depth }).map((_value, index) => (
             <MenuItem
               onClick={onMenuItemClick}
               key={`${depth}-${index}`}

package/src/components/Nav/examples/NavHorizontalSubNav.tsx

@@ -11,7 +11,7 @@ export const NavHorizontalSubNav: React.FunctionComponent = () => {
   return (
     <Nav onSelect={onSelect} variant="horizontal-subnav" aria-label="Horizontal subnav local">
       <NavList>
-        {Array.apply(0, Array(10)).map(function (_item, index: number) {
+        {Array.from({ length: 10 }).map((_value, index) => {
           const num = index + 1;
           return (
             <NavItem

package/src/components/Nav/examples/NavLegacyTertiary.tsx

@@ -11,7 +11,7 @@ export const NavLegacyTertiary: React.FunctionComponent = () => {
   return (
     <Nav onSelect={onSelect} variant="tertiary" aria-label="Tertiary local">
       <NavList>
-        {Array.apply(0, Array(10)).map(function (_item, index: number) {
+        {Array.from({ length: 10 }).map(function (_value, index) {
           const num = index + 1;
           return (
             <NavItem

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

@@ -2,7 +2,7 @@ import { NotificationBadge } from '../NotificationBadge';
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 
-Object.values([true, false]).forEach(attentionVariant => {
+Object.values([true, false]).forEach((attentionVariant) => {
   test(`${attentionVariant} NotificationBadge needs attention`, () => {
     const { asFragment } = render(
       <NotificationBadge variant="attention">

package/src/components/NotificationDrawer/__tests__/NotificationDrawerGroup.test.tsx

@@ -12,7 +12,9 @@ describe('NotificationDrawerGroup', () => {
   });
 
   test('renders correct heading level', () => {
-    const { asFragment } = render(<NotificationDrawerGroup count={2} isExpanded={false} title="Critical Alerts" headingLevel="h2" />);
+    const { asFragment } = render(
+      <NotificationDrawerGroup count={2} isExpanded={false} title="Critical Alerts" headingLevel="h2" />
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 

package/src/components/NotificationDrawer/__tests__/NotificationDrawerListItem.test.tsx

@@ -25,7 +25,6 @@ describe('NotificationDrawerListItem', () => {
     render(<NotificationDrawerListItem isRead />);
     expect(screen.getByRole('listitem')).toHaveClass('pf-m-read');
     expect(screen.getByRole('listitem')).toContainHTML('<span class="pf-v5-screen-reader">read</span>');
-
   });
 
   test('drawer list item has screen reader text set to unread by default', () => {
@@ -34,8 +33,7 @@ describe('NotificationDrawerListItem', () => {
   });
 
   test('drawer list item screen reader textcan be customized', () => {
-    render(<NotificationDrawerListItem readStateScreenReaderText="was read"/>);
+    render(<NotificationDrawerListItem readStateScreenReaderText="was read" />);
     expect(screen.getByRole('listitem')).toContainHTML('<span class="pf-v5-screen-reader">was read</span>');
   });
 });
- 

package/src/components/NotificationDrawer/__tests__/NotificationDrawerListItemHeader.test.tsx

@@ -13,7 +13,7 @@ describe('NotificationDrawerListItemHeader', () => {
   });
 
   test('renders with correct heading level', () => {
-    const { asFragment } = render(<NotificationDrawerListItemHeader title="Pod quit unexpectedly" headingLevel="h3"/>);
+    const { asFragment } = render(<NotificationDrawerListItemHeader title="Pod quit unexpectedly" headingLevel="h3" />);
     expect(asFragment()).toMatchSnapshot();
   });
 

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

@@ -212,13 +212,13 @@ describe('numberInput', () => {
     expect(input).toHaveDisplayValue('');
   });
 
-  test('does not throw an error if onChange is passed via inputProps as well as the onChange prop', () => {
+  test('does not throw an error if onChange is passed via inputProps as well as the onChange prop', async () => {
     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 };
+      const onChange = (event) => setValue(event.currentTarget.value);
+      const inputProps = { onChange };
 
       return <NumberInput value={value} onChange={onChange} inputProps={{ ...inputProps }} />;
     };
@@ -226,20 +226,20 @@ describe('numberInput', () => {
     render(<NumberInputWrapper />);
 
     const input = screen.getByRole('spinbutton');
-    userEvent.type(input, '0');
+    await userEvent.type(input, '0');
 
     expect(consoleSpy).not.toHaveBeenCalled();
   });
 
   test('input is read only if onChange not passed ', () => {
-    render(<NumberInput inputAriaLabel="readonly input" value={5}/>);
+    render(<NumberInput inputAriaLabel="readonly input" value={5} />);
     const input = screen.getByLabelText('readonly input');
     expect(input).toHaveAttribute('readOnly');
   });
 
   test('input is not read only if onChange passed ', () => {
     const onChangeMock = jest.fn();
-    render(<NumberInput inputAriaLabel="not readonly input" value={5} onChange={onChangeMock}/>);
+    render(<NumberInput inputAriaLabel="not readonly input" value={5} onChange={onChangeMock} />);
     const input = screen.getByLabelText('not readonly input');
     expect(input).not.toHaveAttribute('readOnly');
   });

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

@@ -340,10 +340,12 @@ describe('Pagination', () => {
       'insetLg',
       'insetXl',
       'inset2xl'
-    ]).forEach(inset => {
+    ]).forEach((inset) => {
       test(`verify ${inset} inset breakpoints`, () => {
         const { asFragment } = render(
-          <Pagination inset={{ default: inset, sm: inset, md: inset, lg: inset, xl: inset, '2xl': inset }}>test</Pagination>
+          <Pagination inset={{ default: inset, sm: inset, md: inset, lg: inset, xl: inset, '2xl': inset }}>
+            test
+          </Pagination>
         );
         expect(asFragment()).toMatchSnapshot();
       });

package/src/components/Pagination/examples/PaginationSticky.tsx

@@ -27,8 +27,8 @@ export const PaginationSticky: React.FunctionComponent = () => {
   const buildCards = () => {
     const numberOfCards = (page - 1) * perPage + perPage - 1 >= itemCount ? itemCount - (page - 1) * perPage : perPage;
 
-    return Array.apply(0, Array(numberOfCards)).map((x, i) => (
-      <GalleryItem key={i}>
+    return Array.from({ length: numberOfCards }).map((_value, index) => (
+      <GalleryItem key={index}>
         <Card>
           <CardBody>This is a card</CardBody>
         </Card>

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

@@ -85,9 +85,9 @@ test('Renders with ref', async () => {
   render(<BasicPanel />);
 
   await user.click(document.body);
-  expect(screen.getByText('Last click was in panel: false')).toBeVisible;
+  expect(screen.getByText('Last click was in panel: false')).toBeVisible();
   await user.click(screen.getByText('Main content'));
-  expect(screen.getByText('Last click was in panel: true')).toBeVisible;
+  expect(screen.getByText('Last click was in panel: true')).toBeVisible();
 });
 
 test('Renders with the inherited element props spread to the component', () => {