@patternfly/react-core 5.0.0-alpha.6 → 5.0.0-alpha.8

package/next/components/Wizard/index.js

@@ -0,0 +1,12 @@
+export * from './Wizard';
+export * from './WizardBody';
+export * from './WizardFooter';
+export * from './WizardToggle';
+export * from './WizardStep';
+export * from './WizardNav';
+export * from './WizardNavItem';
+export * from './WizardHeader';
+export * from './types';
+export { useWizardFooter } from './hooks';
+export { useWizardContext, WizardContext } from './WizardContext';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/next/components/Wizard/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { WizardNavProps, WizardNavItemProps, WizardFooterProps } from '../Wizard';
+/** Type used to define 'basic' steps, or in other words, steps that are neither parents or children of parents. */
+export interface WizardBasicStep {
+    /** Name of the step's navigation item */
+    name: React.ReactNode;
+    /** Unique identifier */
+    id: string | number;
+    /** Order index of step (starts at 1) */
+    index: number;
+    /** Flag to disable the step's navigation item */
+    isDisabled?: boolean;
+    /** Flag to represent whether the step has been visited (navigated to) */
+    isVisited?: boolean;
+    /** Flag to determine whether the step is hidden */
+    isHidden?: boolean;
+    /** Content shown when the step's navigation item is selected. When treated as a parent step, only sub-step content will be shown. */
+    component?: React.ReactElement;
+    /** Replaces the step's navigation item or its properties. */
+    navItem?: WizardNavItemType;
+    /** Replaces the step's footer. The step's footer takes precedance over the wizard's footer. */
+    footer?: React.ReactElement | Partial<WizardFooterProps>;
+    /** Used to determine icon next to the step's navItem */
+    status?: 'default' | 'error';
+}
+export declare enum WizardNavItemStatus {
+    Default = "default",
+    Error = "error"
+}
+/** Type used to define parent steps. */
+export interface WizardParentStep extends WizardBasicStep {
+    /** Nested step IDs */
+    subStepIds: (string | number)[];
+    /** Flag to determine whether the step can expand or not. */
+    isExpandable?: boolean;
+}
+/** Type used to define sub-steps. */
+export interface WizardSubStep extends WizardBasicStep {
+    /** Unique identifier of the parent step */
+    parentId: string | number;
+}
+/** Encompasses all step type variants that are internally controlled by the Wizard. */
+export declare type WizardStepType = WizardBasicStep | WizardParentStep | WizardSubStep;
+export declare enum WizardStepChangeScope {
+    Next = "next",
+    Back = "back",
+    Nav = "nav"
+}
+export declare type WizardFooterType = Partial<WizardFooterProps> | CustomWizardFooterFunction | React.ReactElement;
+export declare type WizardNavType = Partial<WizardNavProps> | CustomWizardNavFunction | React.ReactElement;
+export declare type WizardNavItemType = Partial<WizardNavItemProps> | CustomWizardNavItemFunction | React.ReactElement;
+/** Callback for the Wizard's 'nav' property. Returns element which replaces the Wizard's default navigation. */
+export declare type CustomWizardNavFunction = (isExpanded: boolean, steps: WizardStepType[], activeStep: WizardStepType, goToStepByIndex: (index: number) => void) => React.ReactElement<WizardNavProps>;
+/** Callback for the Wizard's 'navItem' property. Returns element which replaces the WizardStep's default navigation item. */
+export declare type CustomWizardNavItemFunction = (step: WizardStepType, activeStep: WizardStepType, steps: WizardStepType[], goToStepByIndex: (index: number) => void) => React.ReactElement<WizardNavItemProps>;
+/** Callback for the Wizard's 'footer' property. Returns element which replaces the Wizard's default footer. */
+export declare type CustomWizardFooterFunction = (activeStep: WizardStepType, onNext: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>, onBack: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>, onClose: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>) => React.ReactElement<WizardFooterProps>;
+export declare function isCustomWizardNav(nav: WizardNavType): nav is CustomWizardNavFunction | React.ReactElement;
+export declare function isCustomWizardNavItem(navItem: WizardNavItemType): navItem is CustomWizardNavItemFunction | React.ReactElement;
+export declare function isCustomWizardFooter(footer: WizardFooterType): footer is CustomWizardFooterFunction | React.ReactElement;
+export declare function isWizardBasicStep(step: WizardStepType): step is WizardBasicStep;
+export declare function isWizardSubStep(step: WizardStepType): step is WizardSubStep;
+export declare function isWizardParentStep(step: WizardStepType): step is WizardParentStep;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/next/components/Wizard/types.tsx"],"names":[],"mappings":"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"}

package/next/components/Wizard/types.js

@@ -0,0 +1,31 @@
+import React from 'react';
+export var WizardNavItemStatus;
+(function (WizardNavItemStatus) {
+    WizardNavItemStatus["Default"] = "default";
+    WizardNavItemStatus["Error"] = "error";
+})(WizardNavItemStatus || (WizardNavItemStatus = {}));
+export var WizardStepChangeScope;
+(function (WizardStepChangeScope) {
+    WizardStepChangeScope["Next"] = "next";
+    WizardStepChangeScope["Back"] = "back";
+    WizardStepChangeScope["Nav"] = "nav";
+})(WizardStepChangeScope || (WizardStepChangeScope = {}));
+export function isCustomWizardNav(nav) {
+    return typeof nav === 'function' || React.isValidElement(nav);
+}
+export function isCustomWizardNavItem(navItem) {
+    return typeof navItem === 'function' || React.isValidElement(navItem);
+}
+export function isCustomWizardFooter(footer) {
+    return typeof footer === 'function' || React.isValidElement(footer);
+}
+export function isWizardBasicStep(step) {
+    return (step === null || step === void 0 ? void 0 : step.subStepIds) === undefined && !isWizardSubStep(step);
+}
+export function isWizardSubStep(step) {
+    return (step === null || step === void 0 ? void 0 : step.parentId) !== undefined;
+}
+export function isWizardParentStep(step) {
+    return (step === null || step === void 0 ? void 0 : step.subStepIds) !== undefined;
+}
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/next/components/Wizard/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA2B1B,MAAM,CAAN,IAAY,mBAGX;AAHD,WAAY,mBAAmB;IAC7B,0CAAmB,CAAA;IACnB,sCAAe,CAAA;AACjB,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,QAG9B;AAmBD,MAAM,CAAN,IAAY,qBAIX;AAJD,WAAY,qBAAqB;IAC/B,sCAAa,CAAA;IACb,sCAAa,CAAA;IACb,oCAAW,CAAA;AACb,CAAC,EAJW,qBAAqB,KAArB,qBAAqB,QAIhC;AA8BD,MAAM,UAAU,iBAAiB,CAAC,GAAkB;IAClD,OAAO,OAAO,GAAG,KAAK,UAAU,IAAI,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AAChE,CAAC;AAED,MAAM,UAAU,qBAAqB,CACnC,OAA0B;IAE1B,OAAO,OAAO,OAAO,KAAK,UAAU,IAAI,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AACxE,CAAC;AAED,MAAM,UAAU,oBAAoB,CAClC,MAAwB;IAExB,OAAO,OAAO,MAAM,KAAK,UAAU,IAAI,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AACtE,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,IAAoB;IACpD,OAAO,CAAC,IAAyB,aAAzB,IAAI,uBAAJ,IAAI,CAAuB,UAAU,MAAK,SAAS,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;AACxF,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,IAAoB;IAClD,OAAO,CAAC,IAAsB,aAAtB,IAAI,uBAAJ,IAAI,CAAoB,QAAQ,MAAK,SAAS,CAAC;AACzD,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,IAAoB;IACrD,OAAO,CAAC,IAAyB,aAAzB,IAAI,uBAAJ,IAAI,CAAuB,UAAU,MAAK,SAAS,CAAC;AAC9D,CAAC"}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { WizardStepType } from './types';
+import { WizardStepProps } from './WizardStep';
+/**
+ * Accumulate list of step & sub-step props pulled from child components
+ * @param children
+ * @returns WizardStepType[]
+ */
+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

@@ -0,0 +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"}

package/next/components/Wizard/utils.js

@@ -0,0 +1,36 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { WizardStep } from './WizardStep';
+/**
+ * Accumulate list of step & sub-step props pulled from child components
+ * @param children
+ * @returns WizardStepType[]
+ */
+export const buildSteps = (children) => React.Children.toArray(children).reduce((acc, child, index) => {
+    if (isWizardStep(child)) {
+        const { props: childProps } = child;
+        const { steps: childStepComponents, id } = childProps;
+        const stepIndex = acc.length + 1;
+        const subSteps = [];
+        acc.push(Object.assign(Object.assign(Object.assign({ index: stepIndex, component: child }, (index === 0 && !(childStepComponents === null || childStepComponents === void 0 ? void 0 : childStepComponents.length) && { isVisited: true })), (childStepComponents && {
+            subStepIds: childStepComponents === null || childStepComponents === void 0 ? void 0 : childStepComponents.map((childStepComponent, subStepIndex) => {
+                subSteps.push(Object.assign(Object.assign({ index: stepIndex + subStepIndex + 1, component: childStepComponent, parentId: id }, (index === 0 && subStepIndex === 0 && { isVisited: true })), normalizeStepProps(childStepComponent.props)));
+                return childStepComponent.props.id;
+            })
+        })), normalizeStepProps(childProps)), ...subSteps);
+    }
+    else {
+        throw new Error('Wizard only accepts children of type WizardStep.');
+    }
+    return acc;
+}, []);
+export function isWizardStep(child) {
+    return React.isValidElement(child) && child.type === WizardStep;
+}
+// Omit "children" and "steps" when building steps for the Wizard's context
+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

@@ -0,0 +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"}

package/next/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Dropdown';
+export * from './Select';
+export * from './Wizard';
+//# sourceMappingURL=index.d.ts.map

package/next/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/next/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC"}

package/next/components/index.js

@@ -0,0 +1,4 @@
+export * from './Dropdown';
+export * from './Select';
+export * from './Wizard';
+//# sourceMappingURL=index.js.map

package/next/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/next/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC"}

package/next/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/next/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/next/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/next/index.js

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.js.map

package/next/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/next/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.6",
+  "version": "5.0.0-alpha.8",
   "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",
@@ -45,15 +45,15 @@
     "subpaths": "node scripts/copySubpaths.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.0.0-alpha.1",
-    "@patternfly/react-styles": "^5.0.0-alpha.1",
-    "@patternfly/react-tokens": "^5.0.0-alpha.1",
+    "@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": "^14.2.3",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.0.0-alpha.3",
+    "@patternfly/patternfly": "5.0.0-alpha.12",
     "@rollup/plugin-commonjs": "^24.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.2",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "7597ae3651b5d51db280629c663950dd7fa40feb"
+  "gitHead": "1c5b0a362bcd0d6cf448b11f4af9ca641ca398d6"
 }

package/src/components/Accordion/AccordionContent.tsx

@@ -17,6 +17,8 @@ export interface AccordionContentProps extends React.HTMLProps<HTMLDivElement> {
   isFixed?: boolean;
   /** Adds accessible text to the Accordion content */
   'aria-label'?: string;
+  /** Id of the controlling accordion toggle to label the content. */
+  'aria-labelledby'?: string;
   /** Component to use as content container */
   component?: React.ElementType;
   /** Flag indicating content is custom. Expanded content Body wrapper will be removed from children.  This allows multiple bodies to be rendered as content. */
@@ -31,29 +33,49 @@ export const AccordionContent: React.FunctionComponent<AccordionContentProps> =
   isFixed = false,
   isCustomContent = false,
   'aria-label': ariaLabel = '',
+  'aria-labelledby': ariaLabelledby,
   component,
   ...props
-}: AccordionContentProps) => (
-  <AccordionContext.Consumer>
-    {({ ContentContainer }) => {
-      const Container = component || ContentContainer;
-      return (
-        <Container
-          id={id}
-          className={css(
-            styles.accordionExpandableContent,
-            isFixed && styles.modifiers.fixed,
-            !isHidden && styles.modifiers.expanded,
-            className
-          )}
-          hidden={isHidden}
-          aria-label={ariaLabel}
-          {...props}
-        >
-          {isCustomContent ? children : <AccordionExpandableContentBody>{children}</AccordionExpandableContentBody>}
-        </Container>
-      );
-    }}
-  </AccordionContext.Consumer>
-);
+}: AccordionContentProps) => {
+  const [hasScrollbar, setHasScrollbar] = React.useState(false);
+  const containerRef = React.useRef(null);
+
+  React.useEffect(() => {
+    if (containerRef?.current && isFixed && !isHidden) {
+      const { offsetHeight, scrollHeight } = containerRef.current;
+
+      setHasScrollbar(offsetHeight < scrollHeight);
+    } else if (!isFixed) {
+      setHasScrollbar(false);
+    }
+  }, [containerRef, isFixed, isHidden]);
+
+  return (
+    <AccordionContext.Consumer>
+      {({ ContentContainer }) => {
+        const Container = component || ContentContainer;
+        return (
+          <Container
+            ref={containerRef}
+            id={id}
+            className={css(
+              styles.accordionExpandableContent,
+              isFixed && styles.modifiers.fixed,
+              !isHidden && styles.modifiers.expanded,
+              className
+            )}
+            hidden={isHidden}
+            {...(ariaLabel && { 'aria-label': ariaLabel })}
+            {...(ariaLabelledby && { 'aria-labelledby': ariaLabelledby })}
+            {...(hasScrollbar && { tabIndex: 0 })}
+            {...(hasScrollbar && Container === 'div' && { role: 'region' })}
+            {...props}
+          >
+            {isCustomContent ? children : <AccordionExpandableContentBody>{children}</AccordionExpandableContentBody>}
+          </Container>
+        );
+      }}
+    </AccordionContext.Consumer>
+  );
+};
 AccordionContent.displayName = 'AccordionContent';

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

@@ -59,6 +59,19 @@ test('Renders with the passed aria label', () => {
   expect(screen.getByRole('heading')).toHaveAccessibleName('Accordion content');
 });
 
+test('Renders with the passed aria-labelledby', () => {
+  render(
+    <>
+      <div id="accordion-label1">Accordion content</div>
+      <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
+        <AccordionContent aria-labelledby="accordion-label1">Test</AccordionContent>
+      </AccordionContext.Provider>
+    </>
+  );
+
+  expect(screen.getByRole('heading')).toHaveAccessibleName('Accordion content');
+});
+
 test('Renders with inherited element props spread to the component', () => {
   render(
     <>
@@ -151,7 +164,7 @@ test('Renders unhidden and with pf-m-expanded by default', () => {
     </AccordionContext.Provider>
   );
 
-  const contentContainer = screen.getByRole('heading')
+  const contentContainer = screen.getByRole('heading');
 
   expect(contentContainer).not.toHaveAttribute('hidden');
   expect(contentContainer).toHaveClass('pf-m-expanded');
@@ -164,7 +177,7 @@ test('Renders aria-hidden and without pf-m-expanded when isHidden is true', () =
     </AccordionContext.Provider>
   );
 
-  const contentContainer = screen.getByRole('heading', { hidden: true })
+  const contentContainer = screen.getByRole('heading', { hidden: true });
 
   expect(contentContainer).toHaveAttribute('hidden');
   expect(contentContainer).not.toHaveClass('pf-m-expanded');

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

@@ -63,7 +63,21 @@ export const AccordionFixedWithMultipleExpandBehavior: React.FunctionComponent =
         >
           Item four
         </AccordionToggle>
-        <AccordionContent id="ex2-expand4" isHidden={!expanded.includes('ex2-toggle4')} isFixed>
+        <AccordionContent
+          aria-labelledby="ex2-toggle4"
+          id="ex2-expand4"
+          isHidden={!expanded.includes('ex2-toggle4')}
+          isFixed
+        >
+          <p>
+            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 eleifend non quis
+            tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis 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.
+          </p>
           <p>
             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

package/src/components/Alert/Alert.tsx

@@ -57,8 +57,10 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
   timeoutAnimation?: number;
   /** Title of the alert.  */
   title: React.ReactNode;
-  /** Sets the heading level to use for the alert title. Default is h4. */
+  /** @deprecated Sets the heading level to use for the alert title. Default is h4. */
   titleHeadingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /** Sets the element to use as the alert title. Default is h4. */
+  component?: keyof JSX.IntrinsicElements;
   /** Adds accessible text to the alert toggle. */
   toggleAriaLabel?: string;
   /** Position of the tooltip which is displayed if text is truncated. */
@@ -99,7 +101,8 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   actionClose,
   actionLinks,
   title,
-  titleHeadingLevel: TitleHeadingLevel = 'h4',
+  titleHeadingLevel,
+  component = 'h4',
   children = '',
   className = '',
   ouiaId,
@@ -126,6 +129,14 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   );
 
   const titleRef = React.useRef(null);
+  const TitleComponent = (titleHeadingLevel || component) as any;
+  if (titleHeadingLevel !== undefined) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'Alert: titleHeadingLevel is deprecated, please use the newer component prop instead to set the alert title element.'
+    );
+  }
+
   const divRef = React.useRef<HTMLDivElement>();
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
   React.useEffect(() => {
@@ -145,12 +156,12 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   const [containsFocus, setContainsFocus] = useState<boolean | undefined>();
   const dismissed = timedOut && timedOutAnimation && !isMouseOver && !containsFocus;
   React.useEffect(() => {
-    timeout = timeout === true ? 8000 : Number(timeout);
-    if (timeout > 0) {
-      const timer = setTimeout(() => setTimedOut(true), timeout);
+    const calculatedTimeout = timeout === true ? 8000 : Number(timeout);
+    if (calculatedTimeout > 0) {
+      const timer = setTimeout(() => setTimedOut(true), calculatedTimeout);
       return () => clearTimeout(timer);
     }
-  }, []);
+  }, [timeout]);
   React.useEffect(() => {
     const onDocumentFocus = () => {
       if (divRef.current) {
@@ -172,10 +183,10 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
       const timer = setTimeout(() => setTimedOutAnimation(true), timeoutAnimation);
       return () => clearTimeout(timer);
     }
-  }, [containsFocus, isMouseOver]);
+  }, [containsFocus, isMouseOver, timeoutAnimation]);
   React.useEffect(() => {
     dismissed && onTimeout();
-  }, [dismissed]);
+  }, [dismissed, onTimeout]);
 
   const [isExpanded, setIsExpanded] = useState(false);
   const onToggleExpand = () => {
@@ -197,13 +208,13 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
     return null;
   }
   const Title = (
-    <TitleHeadingLevel
+    <TitleComponent
       {...(isTooltipVisible && { tabIndex: 0 })}
       ref={titleRef}
       className={css(styles.alertTitle, truncateTitle && styles.modifiers.truncate)}
     >
       {getHeadingContent}
-    </TitleHeadingLevel>
+    </TitleComponent>
   );
 
   return (

package/src/components/Alert/examples/Alert.md

@@ -50,8 +50,9 @@ PatternFly supports several properties and variations that can be used to add ex
 
 * As demonstrated in the 3rd and 4th variations below, use the `actionClose` property to add an `<AlertActionCloseButton>` component, which can be used to manage and customize alert dismissals. `actionClose` can be used with or without the presence of `actionLinks`.
 
-* As demonstrated in the 5th and 6th variations below, use the `titleHeadingLevel` property to set the heading level of an alert title. Headings should be ordered by their level and heading levels should not be skipped. For example, a heading of an `h2` level should not be followed directly by an `h4`.
-
+* As demonstrated in the 5th and 6th variations below, use the `component` property to set the element for an alert title.  
+  * If the `description` prop is not passed in, then the `component` prop should be set to a non-heading element such as a `span` or `div`.
+  * If the `description` prop is passed in, then the `component` prop should be a heading element. Headings should be ordered by their level and heading levels should not be skipped. For example, a heading of an `h2` level should not be followed directly by an `h4`.
 ```ts
 import React from 'react';
 import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core';
@@ -88,8 +89,10 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
     }
   />
   <Alert variant="success" title="Success alert title" actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />} />
-  <Alert variant="success" title="h1 Success alert title" titleHeadingLevel="h1" />
-  <Alert variant="success" title="h6 Success alert title" titleHeadingLevel="h6" />
+  <Alert variant="success" title="div success alert title" component="div" />
+  <Alert variant="success" title="h6 Success alert title" component="h6" >
+    <p>Short alert description</p>
+  </Alert>
   </React.Fragment>
 ```
 ### Alert timeout
@@ -360,4 +363,4 @@ Alerts that are asynchronously appended into dynamic [alert groups](/components/
 
 This example shows how an alert could be triggered by an asynchronous event in the application. Note that you can customize how the alert will be announced to assistive technology. See the [https://www.patternfly.org/v4/components/alert/accessibility](alert accessibility) for more information.
 ```ts file="AlertAsyncLiveRegion.tsx"
-```
+```

package/src/components/ApplicationLauncher/ApplicationLauncher.tsx

@@ -94,7 +94,11 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
       <div key="search" className={css(styles.appLauncherMenuSearch)}>
         <ApplicationLauncherItem
           customChild={
-            <SearchInput placeholder={searchPlaceholderText} onChange={value => onSearch(value)} {...searchProps} />
+            <SearchInput
+              placeholder={searchPlaceholderText}
+              onChange={(_event, value) => onSearch(value)}
+              {...searchProps}
+            />
           }
         ></ApplicationLauncherItem>
       </div>

package/src/components/Card/Card.tsx

@@ -10,7 +10,7 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   id?: string;
   /** Additional classes added to the Card */
   className?: string;
-  /** Sets the base component to render. defaults to article */
+  /** Sets the base component to render. defaults to div */
   component?: keyof JSX.IntrinsicElements;
   /** Modifies the card to include compact styling. Should not be used with isLarge. */
   isCompact?: boolean;
@@ -67,7 +67,7 @@ export const Card: React.FunctionComponent<CardProps> = ({
   children = null,
   id = '',
   className = '',
-  component = 'article',
+  component = 'div',
   isCompact = false,
   isSelectable = false,
   isSelectableRaised = false,