@patternfly/react-core 4.276.6 → 5.0.0-alpha.10

package/next/components/Wizard/utils.d.ts

@@ -9,5 +9,4 @@ import { WizardStepProps } from './WizardStep';
 export declare const buildSteps: (children: React.ReactNode | React.ReactNode[]) => WizardStepType[];
 export declare function isWizardStep(child: any | React.ReactElement<WizardStepProps>): child is React.ReactElement<WizardStepProps>;
 export declare const normalizeStepProps: ({ children: _children, steps: _steps, ...controlStep }: WizardStepProps) => Omit<WizardStepType, 'index'>;
-export declare const getActiveStep: (steps: WizardStepType[], activeStepIndex: number) => WizardStepType;
 //# sourceMappingURL=utils.d.ts.map

package/next/components/Wizard/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/next/components/Wizard/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAc,eAAe,EAAE,MAAM,cAAc,CAAC;AAE3D;;;;GAIG;AACH,eAAO,MAAM,UAAU,aAAc,MAAM,SAAS,GAAG,MAAM,SAAS,EAAE,qBAmChE,CAAC;AAET,wBAAgB,YAAY,CAC1B,KAAK,EAAE,GAAG,GAAG,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,GAC/C,KAAK,IAAI,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,CAE9C;AAGD,eAAO,MAAM,kBAAkB,2DAI5B,eAAe,KAAG,KAAK,cAAc,EAAE,OAAO,CAAgB,CAAC;AAElE,eAAO,MAAM,aAAa,UAAW,cAAc,EAAE,mBAAmB,MAAM,mBAC1B,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/next/components/Wizard/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAc,eAAe,EAAE,MAAM,cAAc,CAAC;AAE3D;;;;GAIG;AACH,eAAO,MAAM,UAAU,aAAc,MAAM,SAAS,GAAG,MAAM,SAAS,EAAE,qBAmChE,CAAC;AAET,wBAAgB,YAAY,CAC1B,KAAK,EAAE,GAAG,GAAG,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,GAC/C,KAAK,IAAI,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,CAE9C;AAGD,eAAO,MAAM,kBAAkB,2DAI5B,eAAe,KAAG,KAAK,cAAc,EAAE,OAAO,CAAgB,CAAC"}

package/next/components/Wizard/utils.js

@@ -32,5 +32,4 @@ export const normalizeStepProps = (_a) => {
     var { children: _children, steps: _steps } = _a, controlStep = __rest(_a, ["children", "steps"]);
     return controlStep;
 };
-export const getActiveStep = (steps, activeStepIndex) => steps.find(step => step.index === activeStepIndex);
 //# sourceMappingURL=utils.js.map

package/next/components/Wizard/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../src/next/components/Wizard/utils.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAC;AAE3D;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,QAA6C,EAAE,EAAE,CAC1E,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,GAAqB,EAAE,KAAsB,EAAE,KAAa,EAAE,EAAE;IACvG,IAAI,YAAY,CAAC,KAAK,CAAC,EAAE;QACvB,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;QACpC,MAAM,EAAE,KAAK,EAAE,mBAAmB,EAAE,EAAE,EAAE,GAAG,UAAU,CAAC;QACtD,MAAM,SAAS,GAAG,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC;QACjC,MAAM,QAAQ,GAAqB,EAAE,CAAC;QAEtC,GAAG,CAAC,IAAI,6CAEJ,KAAK,EAAE,SAAS,EAChB,SAAS,EAAE,KAAK,IACb,CAAC,KAAK,KAAK,CAAC,IAAI,CAAC,CAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,MAAM,CAAA,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,GACpE,CAAC,mBAAmB,IAAI;YACzB,UAAU,EAAE,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,GAAG,CAAC,CAAC,kBAAkB,EAAE,YAAY,EAAE,EAAE;gBACxE,QAAQ,CAAC,IAAI,+BACX,KAAK,EAAE,SAAS,GAAG,YAAY,GAAG,CAAC,EACnC,SAAS,EAAE,kBAAkB,EAC7B,QAAQ,EAAE,EAAE,IACT,CAAC,KAAK,KAAK,CAAC,IAAI,YAAY,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,GAC1D,kBAAkB,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAC/C,CAAC;gBAEH,OAAO,kBAAkB,CAAC,KAAK,CAAC,EAAE,CAAC;YACrC,CAAC,CAAC;SACH,CAAC,GACC,kBAAkB,CAAC,UAAU,CAAC,GAEnC,GAAG,QAAQ,CACZ,CAAC;KACH;SAAM;QACL,MAAM,IAAI,KAAK,CAAC,kDAAkD,CAAC,CAAC;KACrE;IAED,OAAO,GAAG,CAAC;AACb,CAAC,EAAE,EAAE,CAAC,CAAC;AAET,MAAM,UAAU,YAAY,CAC1B,KAAgD;IAEhD,OAAO,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAK,KAA6C,CAAC,IAAI,KAAK,UAAU,CAAC;AAC3G,CAAC;AAED,2EAA2E;AAC3E,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAIjB,EAAiC,EAAE;QAJlB,EACjC,QAAQ,EAAE,SAAS,EACnB,KAAK,EAAE,MAAM,OAEG,EADb,WAAW,cAHmB,qBAIlC,CADe;IACsC,OAAA,WAAW,CAAA;CAAA,CAAC;AAElE,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAuB,EAAE,eAAuB,EAAE,EAAE,CAChF,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,eAAe,CAAC,CAAC"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../src/next/components/Wizard/utils.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAC;AAE3D;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,QAA6C,EAAE,EAAE,CAC1E,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,GAAqB,EAAE,KAAsB,EAAE,KAAa,EAAE,EAAE;IACvG,IAAI,YAAY,CAAC,KAAK,CAAC,EAAE;QACvB,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;QACpC,MAAM,EAAE,KAAK,EAAE,mBAAmB,EAAE,EAAE,EAAE,GAAG,UAAU,CAAC;QACtD,MAAM,SAAS,GAAG,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC;QACjC,MAAM,QAAQ,GAAqB,EAAE,CAAC;QAEtC,GAAG,CAAC,IAAI,6CAEJ,KAAK,EAAE,SAAS,EAChB,SAAS,EAAE,KAAK,IACb,CAAC,KAAK,KAAK,CAAC,IAAI,CAAC,CAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,MAAM,CAAA,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,GACpE,CAAC,mBAAmB,IAAI;YACzB,UAAU,EAAE,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,GAAG,CAAC,CAAC,kBAAkB,EAAE,YAAY,EAAE,EAAE;gBACxE,QAAQ,CAAC,IAAI,+BACX,KAAK,EAAE,SAAS,GAAG,YAAY,GAAG,CAAC,EACnC,SAAS,EAAE,kBAAkB,EAC7B,QAAQ,EAAE,EAAE,IACT,CAAC,KAAK,KAAK,CAAC,IAAI,YAAY,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,GAC1D,kBAAkB,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAC/C,CAAC;gBAEH,OAAO,kBAAkB,CAAC,KAAK,CAAC,EAAE,CAAC;YACrC,CAAC,CAAC;SACH,CAAC,GACC,kBAAkB,CAAC,UAAU,CAAC,GAEnC,GAAG,QAAQ,CACZ,CAAC;KACH;SAAM;QACL,MAAM,IAAI,KAAK,CAAC,kDAAkD,CAAC,CAAC;KACrE;IAED,OAAO,GAAG,CAAC;AACb,CAAC,EAAE,EAAE,CAAC,CAAC;AAET,MAAM,UAAU,YAAY,CAC1B,KAAgD;IAEhD,OAAO,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAK,KAA6C,CAAC,IAAI,KAAK,UAAU,CAAC;AAC3G,CAAC;AAED,2EAA2E;AAC3E,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAIjB,EAAiC,EAAE;QAJlB,EACjC,QAAQ,EAAE,SAAS,EACnB,KAAK,EAAE,MAAM,OAEG,EADb,WAAW,cAHmB,qBAIlC,CADe;IACsC,OAAA,WAAW,CAAA;CAAA,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.276.6",
+  "version": "5.0.0-alpha.10",
   "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",
@@ -22,7 +22,7 @@
   ],
   "publishConfig": {
     "access": "public",
-    "tag": "prerelease"
+    "tag": "alpha"
   },
   "repository": {
     "type": "git",
@@ -45,31 +45,30 @@
     "subpaths": "node scripts/copySubpaths.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.93.6",
-    "@patternfly/react-styles": "^4.92.6",
-    "@patternfly/react-tokens": "^4.94.6",
+    "@patternfly/react-icons": "^5.0.0-alpha.2",
+    "@patternfly/react-styles": "^5.0.0-alpha.2",
+    "@patternfly/react-tokens": "^5.0.0-alpha.2",
     "focus-trap": "6.9.2",
-    "react-dropzone": "9.0.0",
-    "tippy.js": "5.1.2",
+    "react-dropzone": "^14.2.3",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.224.2",
-    "@rollup/plugin-commonjs": "^21.0.0",
+    "@patternfly/patternfly": "5.0.0-alpha.12",
+    "@rollup/plugin-commonjs": "^24.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-replace": "^3.0.0",
+    "@rollup/plugin-replace": "^5.0.2",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
     "glob": "^7.1.2",
     "rimraf": "^3.0.2",
-    "rollup": "^2.58.0",
-    "rollup-plugin-scss": "^3.0.0",
-    "rollup-plugin-terser": "^7.0.0",
+    "rollup": "^3.10.0",
+    "rollup-plugin-scss": "^4.0.0",
+    "rollup-plugin-terser": "^7.0.2",
     "typescript": "^4.7.4"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "e2d787cd453afc07405d7f5f10eb6b64a215b064"
+  "gitHead": "839ed5ddbf8283a88ab30a88724a1b3e35b0d637"
 }

package/src/components/Accordion/Accordion.tsx

@@ -17,7 +17,7 @@ export interface AccordionProps extends React.HTMLProps<HTMLDListElement> {
   /** Flag to indicate the accordion had a border */
   isBordered?: boolean;
   /** Display size variant. */
-  displaySize?: 'default' | 'large';
+  displaySize?: 'default' | 'lg';
 }
 
 export const Accordion: React.FunctionComponent<AccordionProps> = ({
@@ -36,7 +36,7 @@ export const Accordion: React.FunctionComponent<AccordionProps> = ({
       className={css(
         styles.accordion,
         isBordered && styles.modifiers.bordered,
-        displaySize === 'large' && styles.modifiers.displayLg,
+        displaySize === 'lg' && styles.modifiers.displayLg,
         className
       )}
       aria-label={ariaLabel}

package/src/components/Accordion/AccordionContent.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 import { AccordionContext } from './AccordionContext';
-import { AccordionExpandedContentBody } from './AccordionExpandedContentBody';
+import { AccordionExpandableContentBody } from './AccordionExpandableContentBody';
 
 export interface AccordionContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the Accordion  */
@@ -59,7 +59,7 @@ export const AccordionContent: React.FunctionComponent<AccordionContentProps> =
             ref={containerRef}
             id={id}
             className={css(
-              styles.accordionExpandedContent,
+              styles.accordionExpandableContent,
               isFixed && styles.modifiers.fixed,
               !isHidden && styles.modifiers.expanded,
               className
@@ -71,7 +71,7 @@ export const AccordionContent: React.FunctionComponent<AccordionContentProps> =
             {...(hasScrollbar && Container === 'div' && { role: 'region' })}
             {...props}
           >
-            {isCustomContent ? children : <AccordionExpandedContentBody>{children}</AccordionExpandedContentBody>}
+            {isCustomContent ? children : <AccordionExpandableContentBody>{children}</AccordionExpandableContentBody>}
           </Container>
         );
       }}

package/src/components/Accordion/AccordionExpandableContentBody.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
+
+export interface AccordionExpandableContentBodyProps {
+  /** Content rendered inside the accordion content body  */
+  children?: React.ReactNode;
+}
+
+export const AccordionExpandableContentBody: React.FunctionComponent<AccordionExpandableContentBodyProps> = ({
+  children = null
+}: AccordionExpandableContentBodyProps) => <div className={css(styles.accordionExpandableContentBody)}>{children}</div>;
+AccordionExpandableContentBody.displayName = 'AccordionExpandableContentBody';

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

@@ -128,8 +128,8 @@ test('Renders without pf-m-display-lg by default', () => {
   expect(screen.getByText('Test')).not.toHaveClass('pf-m-display-lg');
 });
 
-test('Renders with pf-m-display-lg when displaySize=large', () => {
-  render(<Accordion displaySize="large">Test</Accordion>);
+test('Renders with pf-m-display-lg when displaySize="lg"', () => {
+  render(<Accordion displaySize="lg">Test</Accordion>);
 
   expect(screen.getByText('Test')).toHaveClass('pf-m-display-lg');
 });

package/src/components/Accordion/__tests__/AccordionContent.test.tsx

@@ -5,8 +5,8 @@ import { render, screen } from '@testing-library/react';
 import { AccordionContent } from '../AccordionContent';
 import { AccordionContext } from '../AccordionContext';
 
-jest.mock('../AccordionExpandedContentBody', () => ({
-  AccordionExpandedContentBody: ({ children }) => <div aria-label="Expanded content body mock">{children}</div>
+jest.mock('../AccordionExpandableContentBody', () => ({
+  AccordionExpandableContentBody: ({ children }) => <div aria-label="Expanded content body mock">{children}</div>
 }));
 
 test('Renders without children', () => {
@@ -29,7 +29,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with children wrapped in AccordionExpandedContentBody by default', () => {
+test('Renders with children wrapped in AccordionExpandableContentBody by default', () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
       <AccordionContent>Test</AccordionContent>
@@ -39,7 +39,7 @@ test('Renders with children wrapped in AccordionExpandedContentBody by default',
   expect(screen.getByText('Test')).toHaveAccessibleName('Expanded content body mock');
 });
 
-test('Does not render children wrapped in AccordionExpandedContentBody when isCustomContent=true', () => {
+test('Does not render children wrapped in AccordionExpandableContentBody when isCustomContent=true', () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
       <AccordionContent isCustomContent>Test</AccordionContent>
@@ -85,14 +85,14 @@ test('Renders with inherited element props spread to the component', () => {
   expect(screen.getByRole('heading')).toHaveAccessibleName('Label');
 });
 
-test('Renders with class name pf-c-accordion__expanded-content', () => {
+test('Renders with class name pf-c-accordion__expandable-content', () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
       <AccordionContent>Test</AccordionContent>
     </AccordionContext.Provider>
   );
 
-  expect(screen.getByRole('heading')).toHaveClass('pf-c-accordion__expanded-content');
+  expect(screen.getByRole('heading')).toHaveClass('pf-c-accordion__expandable-content');
 });
 
 test('Renders with custom class names provided via prop', () => {

package/src/components/Accordion/__tests__/AccordionExpandedContentBody.test.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 
-import { AccordionExpandedContentBody } from '../AccordionExpandedContentBody';
+import { AccordionExpandableContentBody } from '../AccordionExpandableContentBody';
 
 test('Renders without children', () => {
-    const { asFragment } = render(<AccordionExpandedContentBody />);
+    const { asFragment } = render(<AccordionExpandableContentBody />);
 
     /* a snapshot test is used here because this component isn't selectable via better screen queries without children 
     as it doesn't spread other props to its container
@@ -14,20 +14,20 @@ test('Renders without children', () => {
 });
 
 test('Renders children', () => {
-  render(<AccordionExpandedContentBody>Test</AccordionExpandedContentBody>);
+  render(<AccordionExpandableContentBody>Test</AccordionExpandableContentBody>);
 
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class name pf-c-accordion__expanded-content-body', () => {
-  render(<AccordionExpandedContentBody>Test</AccordionExpandedContentBody>);
+test('Renders with class name pf-c-accordion__expandable-content-body', () => {
+  render(<AccordionExpandableContentBody>Test</AccordionExpandableContentBody>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-c-accordion__expanded-content-body');
+  expect(screen.getByText('Test')).toHaveClass('pf-c-accordion__expandable-content-body');
 });
 
 test('Matches the snapshot', () => {
   const { asFragment } = render(
-    <AccordionExpandedContentBody>Test</AccordionExpandedContentBody>
+    <AccordionExpandableContentBody>Test</AccordionExpandableContentBody>
   );
   expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Accordion/__tests__/__snapshots__/AccordionContent.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <h3
     aria-label="this is a simple accordion"
-    class="pf-c-accordion__expanded-content pf-m-expanded"
+    class="pf-c-accordion__expandable-content pf-m-expanded"
     id=""
   >
     <div

package/src/components/Accordion/__tests__/__snapshots__/AccordionExpandedContentBody.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-accordion__expanded-content-body"
+    class="pf-c-accordion__expandable-content-body"
   >
     Test
   </div>
@@ -13,7 +13,7 @@ exports[`Matches the snapshot 1`] = `
 exports[`Renders without children 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-accordion__expanded-content-body"
+    class="pf-c-accordion__expandable-content-body"
   />
 </DocumentFragment>
 `;

package/src/components/Accordion/examples/Accordion.md

@@ -2,7 +2,7 @@
 id: Accordion
 section: components
 cssPrefix: pf-c-accordion
-propComponents: ['Accordion', 'AccordionItem', 'AccordionContent', 'AccordionToggle', AccordionExpandedContentBody]
+propComponents: ['Accordion', 'AccordionItem', 'AccordionContent', 'AccordionToggle', AccordionExpandableContentBody]
 ---
 
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';

package/src/components/Accordion/examples/AccordionBordered.tsx

@@ -4,7 +4,7 @@ import {
   AccordionItem,
   AccordionContent,
   AccordionToggle,
-  AccordionExpandedContentBody,
+  AccordionExpandableContentBody,
   Button,
   Checkbox
 } from '@patternfly/react-core';
@@ -14,7 +14,7 @@ export const AccordionBordered: React.FunctionComponent = () => {
   const [expanded, setExpanded] = React.useState('bordered-toggle4');
   const [isDisplayLarge, setIsDisplayLarge] = React.useState(false);
 
-  const displaySize = isDisplayLarge ? 'large' : 'default';
+  const displaySize = isDisplayLarge ? 'lg' : 'default';
   const onToggle = (id: string) => {
     if (id === expanded) {
       setExpanded('');
@@ -88,7 +88,7 @@ export const AccordionBordered: React.FunctionComponent = () => {
             Item four
           </AccordionToggle>
           <AccordionContent id="bordered-expand4" isHidden={expanded !== 'bordered-toggle4'} isCustomContent>
-            <AccordionExpandedContentBody>
+            <AccordionExpandableContentBody>
               Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
               sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
               posuere cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper
@@ -96,12 +96,12 @@ export const AccordionBordered: React.FunctionComponent = () => {
               parturient montes, nascetur ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris,
               pellentesque imperdiet libero convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus.
               Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.
-            </AccordionExpandedContentBody>
-            <AccordionExpandedContentBody>
-              <Button variant="link" isLarge isInline>
+            </AccordionExpandableContentBody>
+            <AccordionExpandableContentBody>
+              <Button variant="link" size="lg" isInline>
                 Call to action <ArrowRightIcon />
               </Button>
-            </AccordionExpandedContentBody>
+            </AccordionExpandableContentBody>
           </AccordionContent>
         </AccordionItem>
         <AccordionItem>
@@ -124,7 +124,7 @@ export const AccordionBordered: React.FunctionComponent = () => {
           label="Display size large"
           isChecked={isDisplayLarge}
           onChange={setIsDisplayLarge}
-          aria-label="show displlay large variation checkbox"
+          aria-label="show display large variation checkbox"
           id="toggle-display-lg"
           name="toggle-display-lg"
         />

package/src/components/Accordion/index.ts

@@ -1,5 +1,5 @@
 export * from './Accordion';
 export * from './AccordionContent';
-export * from './AccordionExpandedContentBody';
+export * from './AccordionExpandableContentBody';
 export * from './AccordionItem';
 export * from './AccordionToggle';

package/src/components/ApplicationLauncher/ApplicationLauncher.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher';
-import formStyles from '@patternfly/react-styles/css/components/FormControl/form-control';
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import { DropdownDirection, DropdownPosition, DropdownToggle, DropdownContext } from '../Dropdown';
 import { DropdownWithContext } from '../Dropdown/DropdownWithContext';
@@ -9,12 +8,10 @@ import { ApplicationLauncherGroup } from './ApplicationLauncherGroup';
 import { ApplicationLauncherSeparator } from './ApplicationLauncherSeparator';
 import { ApplicationLauncherItem } from './ApplicationLauncherItem';
 import { ApplicationLauncherContext } from './ApplicationLauncherContext';
-import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper';
 import { createRenderableFavorites, extendItemsWithFavorite } from '../../helpers/favorites';
+import { SearchInput } from '../SearchInput';
 
-export interface ApplicationLauncherProps
-  extends Omit<ToggleMenuBaseProps, 'menuAppendTo'>,
-    React.HTMLProps<HTMLDivElement> {
+export interface ApplicationLauncherProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional element css classes */
   className?: string;
   /** Display menu above or below dropdown toggle */
@@ -87,8 +84,7 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
     searchPlaceholderText: 'Filter by name...',
     searchNoResultsText: 'No results found',
     favoritesLabel: 'Favorites',
-    menuAppendTo: 'inline',
-    removeFindDomNode: false
+    menuAppendTo: 'inline'
   };
 
   createSearchBox = () => {
@@ -98,13 +94,11 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
       <div key="search" className={css(styles.appLauncherMenuSearch)}>
         <ApplicationLauncherItem
           customChild={
-            <input
-              type="search"
-              className={css(formStyles.formControl)}
+            <SearchInput
               placeholder={searchPlaceholderText}
-              onChange={e => onSearch(e.target.value)}
+              onChange={(_event, value) => onSearch(value)}
               {...searchProps}
-            ></input>
+            />
           }
         ></ApplicationLauncherItem>
       </div>

package/src/components/ApplicationLauncher/ApplicationLauncherItem.tsx

@@ -30,6 +30,7 @@ export interface ApplicationLauncherItemProps {
   ariaIsNotFavoriteLabel?: string;
   /** ID of the item. Required for tracking favorites. */
   id?: string;
+  /** Custom item rendering that receives the ApplicationLauncherContext */
   customChild?: React.ReactNode;
   /** Flag indicating if hitting enter triggers an arrow down key press. Automatically passed to favorites list items. */
   enterTriggersArrowDown?: boolean;

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

@@ -55,16 +55,18 @@ describe('ApplicationLauncher', () => {
 
   test('custom icon', () => {
     const { asFragment } = render(
-      <React.StrictMode>
-        <ApplicationLauncher items={dropdownItems} isOpen toggleIcon={<HelpIcon id="test-icon" />} />
-      </React.StrictMode>
+      <ApplicationLauncher items={dropdownItems} isOpen toggleIcon={<HelpIcon id="test-icon" />} />
     );
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('Renders in strict mode', () => {
     const consoleError = jest.spyOn(console, 'error');
-    const { asFragment } = render(<ApplicationLauncher removeFindDomNode isOpen items={dropdownItems} />);
+    const { asFragment } = render(
+      <React.StrictMode>
+        <ApplicationLauncher isOpen items={dropdownItems} />{' '}
+      </React.StrictMode>
+    );
     expect(consoleError).not.toHaveBeenCalled();
     expect(asFragment()).toMatchSnapshot();
   });

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

@@ -16,7 +16,7 @@ exports[`ApplicationLauncher Renders in strict mode 1`] = `
       data-ouia-component-id="OUIA-Generated-DropdownToggle-8"
       data-ouia-component-type="PF4/DropdownToggle"
       data-ouia-safe="true"
-      id="pf-dropdown-toggle-id-7"
+      id="pf-dropdown-toggle-id-6"
       type="button"
     >
       <span>
@@ -36,7 +36,7 @@ exports[`ApplicationLauncher Renders in strict mode 1`] = `
       </span>
     </button>
     <ul
-      aria-labelledby="pf-dropdown-toggle-id-7"
+      aria-labelledby="pf-dropdown-toggle-id-6"
       class="pf-c-app-launcher__menu"
       role="menu"
     >
@@ -46,7 +46,7 @@ exports[`ApplicationLauncher Renders in strict mode 1`] = `
         <a
           aria-disabled="false"
           class="pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-19"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-14"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"
@@ -61,7 +61,7 @@ exports[`ApplicationLauncher Renders in strict mode 1`] = `
         <button
           aria-disabled="false"
           class="pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-20"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-16"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"
@@ -77,7 +77,7 @@ exports[`ApplicationLauncher Renders in strict mode 1`] = `
         <a
           aria-disabled="true"
           class="pf-m-disabled pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-21"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-18"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"
@@ -92,7 +92,7 @@ exports[`ApplicationLauncher Renders in strict mode 1`] = `
         <button
           aria-disabled="true"
           class="pf-m-disabled pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-22"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-20"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"
@@ -116,7 +116,7 @@ exports[`ApplicationLauncher Renders in strict mode 1`] = `
         <a
           aria-disabled="false"
           class="pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-23"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-22"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"
@@ -143,6 +143,7 @@ exports[`ApplicationLauncher Renders in strict mode 1`] = `
       </li>
     </ul>
   </nav>
+   
 </DocumentFragment>
 `;
 
@@ -159,7 +160,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
       aria-haspopup="true"
       aria-label="Application launcher"
       class="pf-c-app-launcher__toggle"
-      data-ouia-component-id="OUIA-Generated-DropdownToggle-7"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-6"
       data-ouia-component-type="PF4/DropdownToggle"
       data-ouia-safe="true"
       id="pf-dropdown-toggle-id-5"
@@ -193,7 +194,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
         <a
           aria-disabled="false"
           class="pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-8"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-7"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"
@@ -208,7 +209,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
         <button
           aria-disabled="false"
           class="pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-10"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-8"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"
@@ -224,7 +225,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
         <a
           aria-disabled="true"
           class="pf-m-disabled pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-12"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-9"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"
@@ -239,7 +240,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
         <button
           aria-disabled="true"
           class="pf-m-disabled pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-14"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-10"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"
@@ -263,7 +264,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
         <a
           aria-disabled="false"
           class="pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-16"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-11"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"
@@ -278,7 +279,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
         <button
           aria-disabled="false"
           class="pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-18"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-12"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"

package/src/components/ApplicationLauncher/examples/ApplicationLauncherFavoritesAndSearch.tsx

@@ -40,7 +40,10 @@ export const ApplicationLauncherFavoritesAndSearch: React.FunctionComponent = ()
   const [favorites, setFavorites] = React.useState<string[]>([]);
   const [filteredItems, setFilteredItems] = React.useState<React.ReactNode[]>(null);
 
-  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+    setFilteredItems(null);
+  };
 
   const onFavorite = (itemId: string, isFavorite: boolean) => {
     let updatedFavorites: string[] = [...favorites, itemId];

package/src/components/BackToTop/BackToTop.tsx

@@ -10,7 +10,7 @@ interface BackToTopProps extends React.DetailedHTMLProps<React.HTMLProps<HTMLDiv
   className?: string;
   /** Title to appear in back to top button. */
   title?: string;
-  /** Forwarded ref */
+  /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Selector for the scrollable element to spy on. Not passing a selector defaults to spying on window scroll events. */
   scrollableSelector?: string;

package/src/components/Backdrop/examples/BackdropSpinner.tsx

@@ -4,7 +4,7 @@ import { Backdrop, Spinner, Bullseye } from '@patternfly/react-core';
 export const BackdropSpinner: React.FunctionComponent = () => (
   <Backdrop>
     <Bullseye>
-      <Spinner aria-label="Backdrop content" aria-valueText="Loading..." />
+      <Spinner aria-label="Backdrop content" aria-valuetext="Loading..." />
     </Bullseye>
   </Backdrop>
 );