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

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

@@ -70,7 +70,7 @@ test('popover can close from content (uncontrolled)', () => {
       aria-label="Popover with button in the body that can close it"
       isVisible
       headerContent={<div>Popover header</div>}
-      bodyContent={hide => (
+      bodyContent={(hide) => (
         <div>
           <div>
             All the content props (headerContent, bodyContent, footerContent) can take a function which the Popover

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

@@ -49,7 +49,7 @@ test('value scaled between minValue and maxValue', () => {
 });
 
 describe('Progress size', () => {
-  Object.keys(ProgressSize).forEach(oneSize => {
+  Object.keys(ProgressSize).forEach((oneSize) => {
     test(oneSize, () => {
       const { asFragment } = render(<Progress id={`${oneSize}-progress`} value={33} size={oneSize as ProgressSize} />);
       expect(asFragment()).toMatchSnapshot();
@@ -58,7 +58,7 @@ describe('Progress size', () => {
 });
 
 describe('Progress variant', () => {
-  Object.keys(ProgressVariant).forEach(oneVariant => {
+  Object.keys(ProgressVariant).forEach((oneVariant) => {
     test(oneVariant, () => {
       const { asFragment } = render(
         <Progress id={`${oneVariant}-progress`} value={33} variant={oneVariant as ProgressVariant} />
@@ -69,7 +69,7 @@ describe('Progress variant', () => {
 });
 
 describe('Progress measure location', () => {
-  Object.keys(ProgressMeasureLocation).forEach(oneLocation => {
+  Object.keys(ProgressMeasureLocation).forEach((oneLocation) => {
     test(oneLocation, () => {
       const { asFragment } = render(
         <Progress id={`${oneLocation}-progress`} value={33} measureLocation={oneLocation as ProgressMeasureLocation} />
@@ -99,10 +99,10 @@ test('progress component generates console warning when no accessible name is pr
 });
 
 test('Does not render helper text by default', () => {
-  render(<Progress/>);
+  render(<Progress />);
 
   expect(screen.queryByText('Test helper text')).not.toBeInTheDocument();
-})
+});
 
 test('Renders passed helper text', () => {
   render(<Progress helperText="Test helper text" />);

package/src/components/ProgressStepper/__tests__/ProgressStep.test.tsx

@@ -150,7 +150,7 @@ test('Does not renders with aria-labelledBy by default on Component element', ()
 
 test('Renders with an accessible name that matches children', () => {
   render(
-    <ProgressStep popoverRender={(stepRef) => <div>Popover content</div>} id="test-id" titleId="title-id">
+    <ProgressStep popoverRender={(_stepRef) => <div>Popover content</div>} id="test-id" titleId="title-id">
       Test
     </ProgressStep>
   );

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

@@ -6,10 +6,12 @@ import userEvent from '@testing-library/user-event';
 import { SearchInput } from '../SearchInput';
 import { FormGroup } from '../../Form';
 import { Button } from '../../Button';
-import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
+import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
 import badgeStyles from '@patternfly/react-styles/css/components/Badge/badge';
 import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 
+jest.mock('../../../helpers/OUIA/ouia');
+
 const props = {
   onChange: jest.fn(),
   value: 'test input',
@@ -80,9 +82,9 @@ describe('SearchInput', () => {
   });
 
   test('hide clear button', () => {
-    const { onClear, ...testProps } = props;
-
-    render(<SearchInput {...testProps} resultsCount="3" aria-label="simple text input without on clear" />);
+    render(
+      <SearchInput {...props} onClear={undefined} resultsCount="3" aria-label="simple text input without on clear" />
+    );
     expect(screen.queryByRole('button', { name: 'Reset' })).not.toBeInTheDocument();
   });
 
@@ -146,9 +148,7 @@ describe('SearchInput', () => {
   test('advanced search with custom attributes and appendTo="inline', async () => {
     const user = userEvent.setup();
 
-    const { container } = render(
-      <SearchInput data-testid="test-id" attributes={[{ attr: 'test', display: 'test' }]} appendTo="inline" />
-    );
+    render(<SearchInput data-testid="test-id" attributes={[{ attr: 'test', display: 'test' }]} appendTo="inline" />);
 
     await user.click(screen.getByRole('button', { name: 'Open advanced search' }));
 
@@ -158,7 +158,7 @@ describe('SearchInput', () => {
   test('advanced search with custom attributes and appendTo external DOM element', async () => {
     const user = userEvent.setup();
 
-    const { container } = render(
+    render(
       <SearchInput data-testid="test-id" attributes={[{ attr: 'test', display: 'test' }]} appendTo={document.body} />
     );
 
@@ -252,9 +252,6 @@ test('toggleAriaLabel is applied to the expandable toggle', () => {
 });
 
 test('Utilities are rendered when areUtilitiesDisplayed is set', () => {
-  render(
-    <SearchInput {...props} areUtilitiesDisplayed resetButtonLabel='test-util-display'/>
-  );
+  render(<SearchInput {...props} areUtilitiesDisplayed resetButtonLabel="test-util-display" />);
   expect(screen.getByLabelText('test-util-display')).toBeVisible();
 });
-

package/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap

@@ -52,9 +52,6 @@ exports[`SearchInput advanced search 1`] = `
               aria-disabled="false"
               aria-label="Reset"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-17"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -82,9 +79,6 @@ exports[`SearchInput advanced search 1`] = `
           aria-expanded="false"
           aria-label="Open advanced search"
           class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-10"
-          data-ouia-component-type="PF5/Button"
-          data-ouia-safe="true"
           type="button"
         >
           <svg
@@ -109,9 +103,6 @@ exports[`SearchInput advanced search 1`] = `
           aria-disabled="false"
           aria-label="Search"
           class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-11"
-          data-ouia-component-type="PF5/Button"
-          data-ouia-safe="true"
           type="submit"
         >
           <span
@@ -202,9 +193,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
               aria-disabled="false"
               aria-label="Reset"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-18"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -232,9 +220,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
           aria-expanded="true"
           aria-label="Open advanced search"
           class="pf-v5-c-button pf-m-control pf-m-expanded"
-          data-ouia-component-id="OUIA-Generated-Button-control-12"
-          data-ouia-component-type="PF5/Button"
-          data-ouia-safe="true"
           type="button"
         >
           <svg
@@ -259,9 +244,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
           aria-disabled="false"
           aria-label="Search"
           class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-13"
-          data-ouia-component-type="PF5/Button"
-          data-ouia-safe="true"
           type="submit"
         >
           <span
@@ -334,9 +316,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   >
                     <input
                       aria-invalid="false"
-                      data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-                      data-ouia-component-type="PF5/TextInput"
-                      data-ouia-safe="true"
                       id="username_0"
                       type="text"
                       value="player"
@@ -370,9 +349,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   >
                     <input
                       aria-invalid="false"
-                      data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-                      data-ouia-component-type="PF5/TextInput"
-                      data-ouia-safe="true"
                       id="firstname_1"
                       type="text"
                       value="john"
@@ -406,9 +382,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   >
                     <input
                       aria-invalid="false"
-                      data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-                      data-ouia-component-type="PF5/TextInput"
-                      data-ouia-safe="true"
                       id="pf-random-id-2"
                       type="text"
                       value=""
@@ -425,9 +398,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   <button
                     aria-disabled="false"
                     class="pf-v5-c-button pf-m-link pf-m-inline"
-                    data-ouia-component-id="OUIA-Generated-Button-link-1"
-                    data-ouia-component-type="PF5/Button"
-                    data-ouia-safe="true"
                     type="button"
                   >
                     Link
@@ -463,9 +433,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                     <button
                       aria-disabled="false"
                       class="pf-v5-c-button pf-m-primary"
-                      data-ouia-component-id="OUIA-Generated-Button-primary-1"
-                      data-ouia-component-type="PF5/Button"
-                      data-ouia-safe="true"
                       type="submit"
                     >
                       Search
@@ -473,9 +440,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                     <button
                       aria-disabled="false"
                       class="pf-v5-c-button pf-m-link"
-                      data-ouia-component-id="OUIA-Generated-Button-link-2"
-                      data-ouia-component-type="PF5/Button"
-                      data-ouia-safe="true"
                       type="reset"
                     >
                       Reset
@@ -544,9 +508,6 @@ exports[`SearchInput renders search input in strict mode 1`] = `
               aria-disabled="false"
               aria-label="Reset"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-11"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -574,9 +535,6 @@ exports[`SearchInput renders search input in strict mode 1`] = `
           aria-expanded="false"
           aria-label="Open advanced search"
           class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-5"
-          data-ouia-component-type="PF5/Button"
-          data-ouia-safe="true"
           type="button"
         >
           <svg
@@ -601,9 +559,6 @@ exports[`SearchInput renders search input in strict mode 1`] = `
           aria-disabled="false"
           aria-label="Search"
           class="pf-v5-c-button pf-m-control"
-          data-ouia-component-id="OUIA-Generated-Button-control-7"
-          data-ouia-component-type="PF5/Button"
-          data-ouia-safe="true"
           type="submit"
         >
           <span
@@ -700,9 +655,6 @@ exports[`SearchInput search input with hint 1`] = `
               aria-disabled="false"
               aria-label="Previous"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-4"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -723,9 +675,6 @@ exports[`SearchInput search input with hint 1`] = `
               aria-disabled="false"
               aria-label="Next"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-5"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -747,9 +696,6 @@ exports[`SearchInput search input with hint 1`] = `
             aria-disabled="false"
             aria-label="Reset"
             class="pf-v5-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-6"
-            data-ouia-component-type="PF5/Button"
-            data-ouia-safe="true"
             type="button"
           >
             <svg
@@ -776,9 +722,6 @@ exports[`SearchInput search input with hint 1`] = `
         aria-disabled="false"
         aria-label="Search"
         class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-2"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
         type="submit"
       >
         <span
@@ -860,9 +803,6 @@ exports[`SearchInput simple search input 1`] = `
               aria-disabled="false"
               aria-label="Previous"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-1"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -883,9 +823,6 @@ exports[`SearchInput simple search input 1`] = `
               aria-disabled="false"
               aria-label="Next"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-2"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
               type="button"
             >
               <svg
@@ -907,9 +844,6 @@ exports[`SearchInput simple search input 1`] = `
             aria-disabled="false"
             aria-label="Reset"
             class="pf-v5-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-3"
-            data-ouia-component-type="PF5/Button"
-            data-ouia-safe="true"
             type="button"
           >
             <svg
@@ -936,9 +870,6 @@ exports[`SearchInput simple search input 1`] = `
         aria-disabled="false"
         aria-label="Search"
         class="pf-v5-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-1"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
         type="submit"
       >
         <span

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

@@ -9,4 +9,3 @@ test('Verify Skip To Content', () => {
   // Add a useful assertion here.
   expect(asFragment()).toMatchSnapshot();
 });
-

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

@@ -25,4 +25,4 @@ test('large spinner', () => {
 test('extra large spinner', () => {
   const { asFragment } = render(<Spinner size="xl" />);
   expect(asFragment()).toMatchSnapshot();
-});
+});

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

@@ -77,7 +77,7 @@ describe('Switch', () => {
 
   test('switch passes value and event to onChange handler', async () => {
     const user = userEvent.setup();
-    
+
     render(<Switch id="onChange-switch" {...props} aria-label="Switch label" />);
 
     await user.click(screen.getByLabelText('Switch label'));

package/src/components/Tabs/__tests__/OverflowTab.test.tsx

@@ -39,7 +39,7 @@ jest.mock('../../Menu', () => {
 });
 
 const tabsContextDefaultProps = {
-  variant: 'default' as 'default',
+  variant: 'default' as const,
   mountOnEnter: false,
   unmountOnExit: false,
   localActiveKey: '',

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

@@ -39,7 +39,7 @@ test('should render simple tabs', () => {
 });
 
 test('should render closeable tabs', () => {
-  const view = render(
+  render(
     <Tabs onClose={jest.fn()}>
       <Tab eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>} closeButtonAriaLabel="close-label">
         Tab 1 section
@@ -50,7 +50,7 @@ test('should render closeable tabs', () => {
 });
 
 test('should render add button', () => {
-  const view = render(
+  render(
     <Tabs onAdd={jest.fn()} addButtonAriaLabel="add-label">
       <Tab eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>} closeButtonAriaLabel="close-label">
         Tab 1 section
@@ -156,7 +156,7 @@ test('should render expandable vertical tabs', () => {
 test('should log error when there is no aria-label or toggleText for expandable vertical tabs', () => {
   const consoleErrorMock = jest.fn();
   global.console = { error: consoleErrorMock } as any;
-  const { asFragment } = render(
+  render(
     <Tabs id="verticalTabs" isVertical expandable={{ default: 'expandable' }}>
       <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
         Tab 1 section
@@ -429,7 +429,7 @@ test('should not render scroll buttons by default', () => {
 
   expect(screen.queryByLabelText('Scroll left')).not.toBeInTheDocument();
   expect(screen.queryByLabelText('Scroll right')).not.toBeInTheDocument();
-})
+});
 
 test('should not render scroll buttons when isVertical is true', () => {
   render(
@@ -448,4 +448,4 @@ test('should not render scroll buttons when isVertical is true', () => {
 
   expect(screen.queryByLabelText('Scroll left')).not.toBeInTheDocument();
   expect(screen.queryByLabelText('Scroll right')).not.toBeInTheDocument();
-})
+});

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

@@ -33,7 +33,9 @@ describe('TextInput', () => {
   });
 
   test('read only text input using isReadOnly', () => {
-    const { asFragment } = render(<TextInput readOnlyVariant="default" value="read only" aria-label="read only text input" />);
+    const { asFragment } = render(
+      <TextInput readOnlyVariant="default" value="read only" aria-label="read only text input" />
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 
@@ -113,20 +115,20 @@ describe('TextInput', () => {
 
   test('trimLeft is called when isStartTruncated is true', async () => {
     const trimLeftFn = jest.spyOn(ReactCoreUtils, 'trimLeft').mockImplementation();
-  
+
     render(<TextInput isStartTruncated aria-label="start truncated text input" />);
     expect(trimLeftFn).toHaveBeenCalled();
   });
 
   test('trimLeft is called when isLeftTruncated is true', async () => {
     const trimLeftFn = jest.spyOn(ReactCoreUtils, 'trimLeft').mockImplementation();
-  
+
     render(<TextInput isLeftTruncated aria-label="start truncated text input" />);
     expect(trimLeftFn).toHaveBeenCalled();
   });
 
   test('has aria-expanded set to true when ariaProps.isExpanded is true', () => {
-    render(<TextInput expandedProps={{isExpanded: true, ariaControls: 'test'}}  aria-label="isExpanded"/>);
+    render(<TextInput expandedProps={{ isExpanded: true, ariaControls: 'test' }} aria-label="isExpanded" />);
 
     const input = screen.getByLabelText('isExpanded');
     expect(input).toHaveAttribute('aria-expanded', 'true');

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

@@ -7,12 +7,10 @@ import { TimePicker, TimePickerProps } from '../TimePicker';
 
 describe('TimePicker', () => {
   test('Renders in strict mode', () => {
-    const validateTime = (_time: string) => {
-      return true;
-    };
+    const validateTime = (_time: string) => true;
 
     const consoleError = jest.spyOn(console, 'error');
-    const { asFragment } = render(
+    render(
       <React.StrictMode>
         <TimePicker value={'00:00'} validateTime={validateTime} aria-label="time picker" />
       </React.StrictMode>
@@ -112,9 +110,7 @@ describe('TimePicker', () => {
 
   describe('test isInvalid', () => {
     test('should be valid by default', () => {
-      const validateTime = (_time: string) => {
-        return true;
-      };
+      const validateTime = (_time: string) => true;
 
       render(<TimePicker value={'00:00'} validateTime={validateTime} aria-label="time picker" />);
 
@@ -122,9 +118,7 @@ describe('TimePicker', () => {
     });
 
     test('should stay valid after onChange', async () => {
-      const validateTime = (_time: string) => {
-        return true;
-      };
+      const validateTime = (_time: string) => true;
       const user = userEvent.setup();
 
       render(<TimePicker value="00:00" validateTime={validateTime} aria-label="time picker" />);

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

@@ -64,8 +64,8 @@ describe('Toolbar', () => {
           <ToolbarGroup variant="filter-group">
             <ToolbarFilter
               chips={['New', 'Pending']}
-              deleteChip={(category, chip) => {}}
-              deleteChipGroup={(category) => {}}
+              deleteChip={(_category, _chip) => {}}
+              deleteChipGroup={(_category) => {}}
               categoryName="Status"
             >
               test content

package/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx

@@ -4,7 +4,11 @@ import { ToolbarGroup } from '../ToolbarGroup';
 
 describe('ToolbarItem', () => {
   it('should render with pf-m-overflow-container when isOverflowContainer is set', () => {
-    render(<ToolbarGroup data-testid="toolbargroup" isOverflowContainer>Test</ToolbarGroup>);
+    render(
+      <ToolbarGroup data-testid="toolbargroup" isOverflowContainer>
+        Test
+      </ToolbarGroup>
+    );
     expect(screen.getByTestId('toolbargroup')).toHaveClass('pf-m-overflow-container');
   });
 });

package/src/components/Toolbar/__tests__/ToolbarItem.test.tsx

@@ -18,7 +18,11 @@ describe('ToolbarItem', () => {
   });
 
   it('should render with pf-m-overflow-container when isOverflowContainer is set', () => {
-    render(<ToolbarItem data-testid="toolbaritem" isOverflowContainer>Test</ToolbarItem>);
+    render(
+      <ToolbarItem data-testid="toolbaritem" isOverflowContainer>
+        Test
+      </ToolbarItem>
+    );
     expect(screen.getByTestId('toolbaritem')).toHaveClass('pf-m-overflow-container');
   });
 });

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

@@ -2,7 +2,8 @@ import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { TreeView } from '../TreeView';
 import { Button } from '@patternfly/react-core';
-import { FolderIcon, FolderOpenIcon } from '@patternfly/react-icons';
+import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
+import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
 import { TreeViewSearch } from '../TreeViewSearch';
 
 const options = [
@@ -151,9 +152,7 @@ describe('tree view', () => {
   test('calls onExpand and onCollapse appropriately', () => {
     const onExpand = jest.fn();
     const onCollapse = jest.fn();
-    const { asFragment } = render(
-      <TreeView data={options} onSelect={jest.fn()} onExpand={onExpand} onCollapse={onCollapse} />
-    );
+    render(<TreeView data={options} onSelect={jest.fn()} onExpand={onExpand} onCollapse={onCollapse} />);
     expect(onExpand).not.toHaveBeenCalled();
     expect(onCollapse).not.toHaveBeenCalled();
     expect(screen.queryByText('Application 3')).toBeNull();

package/src/components/Wizard/__tests__/WizardToggle.test.tsx

@@ -58,7 +58,7 @@ test('renders only the active step content by default', async () => {
   render(<WizardToggle {...defaultProps} />);
 
   expect(screen.getByText('First step content')).toBeInTheDocument();
-  expect(screen.queryByText('Second step content')).toBeNull;
+  expect(screen.queryByText('Second step content')).toBeNull();
 });
 
 test('has expanded properties when the toggle dropdown button is clicked', async () => {
@@ -95,7 +95,7 @@ test('unsets expanded properties when using the Escape key', async () => {
   expect(toggleButton).not.toHaveClass('pf-m-expanded');
 });
 
-const WizardToggleExpand = props => {
+const WizardToggleExpand = (props) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
 
   return (

package/src/components/Wizard/__tests__/utils.test.tsx

@@ -31,7 +31,7 @@ describe('buildSteps', () => {
   });
 
   test('returns flattened array of steps and sub-steps when sub-steps exist', () => {
-    const CustomSubStep = props => <div {...props} />;
+    const CustomSubStep = (props) => <div {...props} />;
 
     const component = (
       <WizardStep

package/src/demos/Banner.md

@@ -58,9 +58,9 @@ class BannerDemo extends React.Component {
           </PageSection>
           <PageSection>
             <Gallery hasGutter>
-              {Array.apply(0, Array(30)).map((x, i) => (
-                <GalleryItem key={i}>
-                  <Card key={i}>
+              {Array.from({ length: 30 }).map((_value, index) => (
+                <GalleryItem key={index}>
+                  <Card key={index}>
                     <CardBody>This is a card</CardBody>
                   </Card>
                 </GalleryItem>
@@ -133,7 +133,7 @@ class BannerDemo extends React.Component {
               </PageSection>
               <PageSection>
                 <Gallery hasGutter>
-                  {Array.apply(0, Array(30)).map((x, i) => (
+                  {Array.from({ length: 30 }).map((_value, index) => (
                     <GalleryItem key={i}>
                       <Card key={i}>
                         <CardBody>This is a card</CardBody>

package/src/demos/examples/BackToTop/BackToTopNameDemo.tsx

@@ -41,9 +41,9 @@ export const Name = () => {
           aria-label="Scrollable container of demonstration cards with a back to top element"
         >
           <Gallery hasGutter>
-            {Array.apply(0, Array(60)).map((_x: any, i: number) => (
-              <GalleryItem key={i}>
-                <Card key={i}>
+            {Array.from({ length: 60 }).map((_value, index) => (
+              <GalleryItem key={index}>
+                <Card key={index}>
                   <CardBody>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum et urna eget semper. Sed
                     tincidunt purus diam, id sollicitudin est pellentesque eget. Ut eget massa dignissim dolor pretium

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -543,8 +543,8 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     >
       <PageSection>
         <Gallery hasGutter>
-          {Array.apply(0, Array(10)).map((x, i) => (
-            <GalleryItem key={i}>
+          {Array.from({ length: 10 }).map((_value, index) => (
+            <GalleryItem key={index}>
               <Card>
                 <CardBody>This is a card</CardBody>
               </Card>

package/src/demos/examples/Nav/NavDefault.tsx

@@ -83,7 +83,7 @@ export const NavDefault: React.FunctionComponent = () => {
         </PageSection>
         <PageSection>
           <Gallery hasGutter>
-            {Array.from({ length: 10 }, (_value: any, index: React.Key) => (
+            {Array.from({ length: 10 }).map((_value, index) => (
               <GalleryItem key={index}>
                 <Card>
                   <CardBody>This is a card</CardBody>

package/src/demos/examples/Nav/NavExpandable.tsx

@@ -109,7 +109,7 @@ export const NavExpandableDemo: React.FunctionComponent = () => {
         </PageSection>
         <PageSection>
           <Gallery hasGutter>
-            {Array.from({ length: 10 }, (_value: any, index: React.Key) => (
+            {Array.from({ length: 10 }).map((_value, index) => (
               <GalleryItem key={index}>
                 <Card>
                   <CardBody>This is a card</CardBody>