@patternfly/react-core 5.2.0-prerelease.40 → 5.2.0-prerelease.41

package/dist/js/next/components/Modal/ModalBoxDescription.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalBoxDescription = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_styles_1 = require("@patternfly/react-styles");
+const modal_box_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/components/ModalBox/modal-box"));
+const ModalBoxDescription = (_a) => {
+    var { children = null, className = '', id = '' } = _a, props = tslib_1.__rest(_a, ["children", "className", "id"]);
+    return (React.createElement("div", Object.assign({}, props, { id: id, className: (0, react_styles_1.css)(modal_box_1.default.modalBoxDescription, className) }), children));
+};
+exports.ModalBoxDescription = ModalBoxDescription;
+exports.ModalBoxDescription.displayName = 'ModalBoxDescription';
+//# sourceMappingURL=ModalBoxDescription.js.map

package/dist/js/next/components/Modal/ModalBoxDescription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBoxDescription.js","sourceRoot":"","sources":["../../../../../src/next/components/Modal/ModalBoxDescription.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,2DAA+C;AAC/C,mHAAgF;AAWzE,MAAM,mBAAmB,GAAsD,CAAC,EAK5D,EAAE,EAAE;QALwD,EACrF,QAAQ,GAAG,IAAI,EACf,SAAS,GAAG,EAAE,EACd,EAAE,GAAG,EAAE,OAEkB,EADtB,KAAK,sBAJ6E,+BAKtF,CADS;IACsB,OAAA,CAC9B,6CAAS,KAAK,IAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,IAAA,kBAAG,EAAC,mBAAM,CAAC,mBAAmB,EAAE,SAAS,CAAC,KAC1E,QAAQ,CACL,CACP,CAAA;CAAA,CAAC;AATW,QAAA,mBAAmB,uBAS9B;AACF,2BAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAC"}

package/dist/js/next/components/Modal/ModalBoxTitle.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export declare const isVariantIcon: (icon: any) => icon is string;
+export interface ModalBoxTitleProps {
+    /** Additional classes added to the modal box title. */
+    className?: string;
+    /** Id of the modal box title. */
+    id?: string;
+    /** Content rendered inside the modal box title. */
+    title: React.ReactNode;
+    /** Optional alert icon (or other) to show before the title. When the predefined alert types
+     * are used the default styling will be automatically applied. */
+    titleIconVariant?: 'success' | 'danger' | 'warning' | 'info' | 'custom' | React.ComponentType<any>;
+    /** Optional title label text for screen readers. */
+    titleScreenReaderText?: string;
+}
+export declare const ModalBoxTitle: React.FunctionComponent<ModalBoxTitleProps>;
+//# sourceMappingURL=ModalBoxTitle.d.ts.map

package/dist/js/next/components/Modal/ModalBoxTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBoxTitle.d.ts","sourceRoot":"","sources":["../../../../../src/next/components/Modal/ModalBoxTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,eAAO,MAAM,aAAa,SAAU,GAAG,mBACsC,CAAC;AAE9E,MAAM,WAAW,kBAAkB;IACjC,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,mDAAmD;IACnD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;qEACiE;IACjE,gBAAgB,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACnG,oDAAoD;IACpD,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CA4CrE,CAAC"}

package/dist/js/next/components/Modal/ModalBoxTitle.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalBoxTitle = exports.isVariantIcon = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const modal_box_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/components/ModalBox/modal-box"));
+const react_styles_1 = require("@patternfly/react-styles");
+const helpers_1 = require("../../../helpers");
+const Tooltip_1 = require("../../../components/Tooltip");
+const check_circle_icon_1 = tslib_1.__importDefault(require('@patternfly/react-icons/dist/js/icons/check-circle-icon'));
+const exclamation_circle_icon_1 = tslib_1.__importDefault(require('@patternfly/react-icons/dist/js/icons/exclamation-circle-icon'));
+const exclamation_triangle_icon_1 = tslib_1.__importDefault(require('@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon'));
+const info_circle_icon_1 = tslib_1.__importDefault(require('@patternfly/react-icons/dist/js/icons/info-circle-icon'));
+const bell_icon_1 = tslib_1.__importDefault(require('@patternfly/react-icons/dist/js/icons/bell-icon'));
+const helpers_2 = require("../../../helpers");
+const isVariantIcon = (icon) => ['success', 'danger', 'warning', 'info', 'custom'].includes(icon);
+exports.isVariantIcon = isVariantIcon;
+const ModalBoxTitle = (_a) => {
+    var { className, id, title, titleIconVariant, titleScreenReaderText } = _a, props = tslib_1.__rest(_a, ["className", "id", "title", "titleIconVariant", "titleScreenReaderText"]);
+    const [hasTooltip, setHasTooltip] = React.useState(false);
+    const h1 = React.useRef(null);
+    const label = titleScreenReaderText ||
+        ((0, exports.isVariantIcon)(titleIconVariant) ? `${(0, helpers_1.capitalize)(titleIconVariant)} alert:` : titleScreenReaderText);
+    const variantIcons = {
+        success: React.createElement(check_circle_icon_1.default, null),
+        danger: React.createElement(exclamation_circle_icon_1.default, null),
+        warning: React.createElement(exclamation_triangle_icon_1.default, null),
+        info: React.createElement(info_circle_icon_1.default, null),
+        custom: React.createElement(bell_icon_1.default, null)
+    };
+    const CustomIcon = !(0, exports.isVariantIcon)(titleIconVariant) && titleIconVariant;
+    (0, helpers_2.useIsomorphicLayoutEffect)(() => {
+        setHasTooltip(h1.current && h1.current.offsetWidth < h1.current.scrollWidth);
+    }, []);
+    const content = (React.createElement("h1", Object.assign({ id: id, ref: h1, className: (0, react_styles_1.css)(modal_box_1.default.modalBoxTitle, titleIconVariant && modal_box_1.default.modifiers.icon, className) }, props),
+        titleIconVariant && (React.createElement("span", { className: (0, react_styles_1.css)(modal_box_1.default.modalBoxTitleIcon) }, (0, exports.isVariantIcon)(titleIconVariant) ? variantIcons[titleIconVariant] : React.createElement(CustomIcon, null))),
+        label && React.createElement("span", { className: "pf-v5-screen-reader" }, label),
+        React.createElement("span", { className: (0, react_styles_1.css)(modal_box_1.default.modalBoxTitleText) }, title)));
+    return hasTooltip ? React.createElement(Tooltip_1.Tooltip, { content: title }, content) : content;
+};
+exports.ModalBoxTitle = ModalBoxTitle;
+exports.ModalBoxTitle.displayName = 'ModalBoxTitle';
+//# sourceMappingURL=ModalBoxTitle.js.map

package/dist/js/next/components/Modal/ModalBoxTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBoxTitle.js","sourceRoot":"","sources":["../../../../../src/next/components/Modal/ModalBoxTitle.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,mHAAqF;AACrF,2DAA+C;AAC/C,8CAA8C;AAC9C,yDAAsD;AACtD,wHAAuF;AACvF,oIAAmG;AACnG,wIAAuG;AACvG,sHAAqF;AACrF,wGAAwE;AACxE,8CAA6D;AAEtD,MAAM,aAAa,GAAG,CAAC,IAAS,EAAkB,EAAE,CACzD,CAAC,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,IAAc,CAAC,CAAC;AADjE,QAAA,aAAa,iBACoD;AAgBvE,MAAM,aAAa,GAAgD,CAAC,EAOtD,EAAE,EAAE;QAPkD,EACzE,SAAS,EACT,EAAE,EACF,KAAK,EACL,gBAAgB,EAChB,qBAAqB,OAEF,EADhB,KAAK,sBANiE,yEAO1E,CADS;IAER,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAqB,IAAI,CAAC,CAAC;IAClD,MAAM,KAAK,GACT,qBAAqB;QACrB,CAAC,IAAA,qBAAa,EAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,GAAG,IAAA,oBAAU,EAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC;IACvG,MAAM,YAAY,GAAG;QACnB,OAAO,EAAE,oBAAC,2BAAe,OAAG;QAC5B,MAAM,EAAE,oBAAC,iCAAqB,OAAG;QACjC,OAAO,EAAE,oBAAC,mCAAuB,OAAG;QACpC,IAAI,EAAE,oBAAC,0BAAc,OAAG;QACxB,MAAM,EAAE,oBAAC,mBAAQ,OAAG;KACrB,CAAC;IACF,MAAM,UAAU,GAAG,CAAC,IAAA,qBAAa,EAAC,gBAAgB,CAAC,IAAI,gBAAgB,CAAC;IAExE,IAAA,mCAAyB,EAAC,GAAG,EAAE;QAC7B,aAAa,CAAC,EAAE,CAAC,OAAO,IAAI,EAAE,CAAC,OAAO,CAAC,WAAW,GAAG,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IAC/E,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,CACd,0CACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,EAAE,EACP,SAAS,EAAE,IAAA,kBAAG,EAAC,mBAAW,CAAC,aAAa,EAAE,gBAAgB,IAAI,mBAAW,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,IAChG,KAAK;QAER,gBAAgB,IAAI,CACnB,8BAAM,SAAS,EAAE,IAAA,kBAAG,EAAC,mBAAW,CAAC,iBAAiB,CAAC,IAChD,IAAA,qBAAa,EAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,oBAAC,UAAU,OAAG,CAC7E,CACR;QACA,KAAK,IAAI,8BAAM,SAAS,EAAC,qBAAqB,IAAE,KAAK,CAAQ;QAC9D,8BAAM,SAAS,EAAE,IAAA,kBAAG,EAAC,mBAAW,CAAC,iBAAiB,CAAC,IAAG,KAAK,CAAQ,CAChE,CACN,CAAC;IAEF,OAAO,UAAU,CAAC,CAAC,CAAC,oBAAC,iBAAO,IAAC,OAAO,EAAE,KAAK,IAAG,OAAO,CAAW,CAAC,CAAC,CAAC,OAAO,CAAC;AAC7E,CAAC,CAAC;AA5CW,QAAA,aAAa,iBA4CxB;AACF,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC"}

package/dist/js/next/components/Modal/ModalContent.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { OUIAProps } from '../../../helpers';
+export interface ModalContentProps extends OUIAProps {
+    /** Id to use for the modal box description. This should match the ModalHeader labelId or descriptorId. */
+    'aria-describedby'?: string;
+    /** Accessible descriptor of the modal. */
+    'aria-label'?: string;
+    /** Id to use for the modal box label. This should include the ModalHeader labelId. */
+    'aria-labelledby'?: string;
+    /** Id of the modal box container. */
+    boxId: string;
+    /** Content rendered inside the modal. */
+    children: React.ReactNode;
+    /** Additional classes added to the modal box. */
+    className?: string;
+    /** Flag to disable focus trap. */
+    disableFocusTrap?: boolean;
+    /** The element to focus when the modal opens. By default the first
+     * focusable element will receive focus.
+     */
+    elementToFocus?: HTMLElement | SVGElement | string;
+    /** Flag to show the modal. */
+    isOpen?: boolean;
+    /** A callback for when the close button is clicked. */
+    onClose?: (event: KeyboardEvent | React.MouseEvent) => void;
+    /** Position of the modal. By default a modal will be positioned vertically and horizontally centered. */
+    position?: 'default' | 'top';
+    /** Offset from alternate position. Can be any valid CSS length/percentage. */
+    positionOffset?: string;
+    /** Variant of the modal. */
+    variant?: 'small' | 'medium' | 'large' | 'default';
+    /** Default width of the modal. */
+    width?: number | string;
+    /** Maximum width of the modal. */
+    maxWidth?: number | string;
+    /** Value to overwrite the randomly generated data-ouia-component-id.*/
+    ouiaId?: number | string;
+    /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+    ouiaSafe?: boolean;
+}
+export declare const ModalContent: React.FunctionComponent<ModalContentProps>;
+//# sourceMappingURL=ModalContent.d.ts.map

package/dist/js/next/components/Modal/ModalContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContent.d.ts","sourceRoot":"","sources":["../../../../../src/next/components/Modal/ModalContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAgB,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAK3D,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,0GAA0G;IAC1G,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sFAAsF;IACtF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;IACnD,8BAA8B;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uDAAuD;IACvD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5D,yGAAyG;IACzG,QAAQ,CAAC,EAAE,SAAS,GAAG,KAAK,CAAC;IAC7B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IACnD,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,iLAAiL;IACjL,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAiFnE,CAAC"}

package/dist/js/next/components/Modal/ModalContent.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalContent = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const helpers_1 = require("../../../helpers");
+const bullseye_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/layouts/Bullseye/bullseye"));
+const react_styles_1 = require("@patternfly/react-styles");
+const helpers_2 = require("../../../helpers");
+const Backdrop_1 = require("../../../components/Backdrop");
+const ModalBoxCloseButton_1 = require("./ModalBoxCloseButton");
+const ModalBox_1 = require("./ModalBox");
+const ModalContent = (_a) => {
+    var { children, className, isOpen = false, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-labelledby': ariaLabelledby, onClose, variant = 'default', position, positionOffset, width, maxWidth, boxId, disableFocusTrap = false, ouiaId, ouiaSafe = true, elementToFocus } = _a, props = tslib_1.__rest(_a, ["children", "className", "isOpen", 'aria-label', 'aria-describedby', 'aria-labelledby', "onClose", "variant", "position", "positionOffset", "width", "maxWidth", "boxId", "disableFocusTrap", "ouiaId", "ouiaSafe", "elementToFocus"]);
+    if (!isOpen) {
+        return null;
+    }
+    const ariaLabelledbyFormatted = () => {
+        const idRefList = [];
+        if (ariaLabel && boxId) {
+            idRefList.push(ariaLabel && boxId);
+        }
+        if (ariaLabelledby) {
+            idRefList.push(ariaLabelledby);
+        }
+        if (idRefList.length === 0) {
+            return undefined;
+        }
+        else {
+            return idRefList.join(' ');
+        }
+    };
+    const modalBox = (React.createElement(ModalBox_1.ModalBox, Object.assign({ className: (0, react_styles_1.css)(className), variant: variant, position: position, positionOffset: positionOffset, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledbyFormatted(), "aria-describedby": ariaDescribedby }, (0, helpers_2.getOUIAProps)(exports.ModalContent.displayName, ouiaId, ouiaSafe), { style: Object.assign(Object.assign({}, (width && { '--pf-v5-c-modal-box--Width': typeof width !== 'number' ? width : `${width}px` })), (maxWidth && {
+            '--pf-v5-c-modal-box--MaxWidth': typeof maxWidth !== 'number' ? maxWidth : `${maxWidth}px`
+        })) }, props, { id: boxId }),
+        onClose && React.createElement(ModalBoxCloseButton_1.ModalBoxCloseButton, { onClose: (event) => onClose(event), ouiaId: ouiaId }),
+        children));
+    return (React.createElement(Backdrop_1.Backdrop, null,
+        React.createElement(helpers_1.FocusTrap, { active: !disableFocusTrap, focusTrapOptions: {
+                clickOutsideDeactivates: true,
+                tabbableOptions: { displayCheck: 'none' },
+                // FocusTrap's initialFocus can accept false as a value to prevent initial focus.
+                // We want to prevent this in case false is ever passed in.
+                initialFocus: elementToFocus || undefined
+            }, className: (0, react_styles_1.css)(bullseye_1.default.bullseye) }, modalBox)));
+};
+exports.ModalContent = ModalContent;
+exports.ModalContent.displayName = 'ModalContent';
+//# sourceMappingURL=ModalContent.js.map

package/dist/js/next/components/Modal/ModalContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContent.js","sourceRoot":"","sources":["../../../../../src/next/components/Modal/ModalContent.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,8CAA6C;AAC7C,8GAAoF;AACpF,2DAA+C;AAC/C,8CAA2D;AAC3D,2DAAwD;AACxD,+DAA4D;AAC5D,yCAAsC;AAyC/B,MAAM,YAAY,GAA+C,CAAC,EAmBrD,EAAE,EAAE;QAnBiD,EACvE,QAAQ,EACR,SAAS,EACT,MAAM,GAAG,KAAK,EACd,YAAY,EAAE,SAAS,EACvB,kBAAkB,EAAE,eAAe,EACnC,iBAAiB,EAAE,cAAc,EACjC,OAAO,EACP,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,cAAc,EACd,KAAK,EACL,QAAQ,EACR,KAAK,EACL,gBAAgB,GAAG,KAAK,EACxB,MAAM,EACN,QAAQ,GAAG,IAAI,EACf,cAAc,OAEI,EADf,KAAK,sBAlB+D,sOAmBxE,CADS;IAER,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,MAAM,uBAAuB,GAAG,GAAW,EAAE;QAC3C,MAAM,SAAS,GAAa,EAAE,CAAC;QAC/B,IAAI,SAAS,IAAI,KAAK,EAAE;YACtB,SAAS,CAAC,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,CAAC;SACpC;QACD,IAAI,cAAc,EAAE;YAClB,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SAChC;QACD,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;YAC1B,OAAO,SAAS,CAAC;SAClB;aAAM;YACL,OAAO,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SAC5B;IACH,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CACf,oBAAC,mBAAQ,kBACP,SAAS,EAAE,IAAA,kBAAG,EAAC,SAAS,CAAC,EACzB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,gBAClB,SAAS,qBACJ,uBAAuB,EAAE,sBACxB,eAAe,IAC7B,IAAA,sBAAY,EAAC,oBAAY,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,CAAC,IAC5D,KAAK,EACH,gCACK,CAAC,KAAK,IAAI,EAAE,4BAA4B,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,EAAE,CAAC,GAC7F,CAAC,QAAQ,IAAI;YACd,+BAA+B,EAAE,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,IAAI;SAC3F,CAAC,CACoB,IAEtB,KAAK,IACT,EAAE,EAAE,KAAK;QAER,OAAO,IAAI,oBAAC,yCAAmB,IAAC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,GAAI;QACtF,QAAQ,CACA,CACZ,CAAC;IACF,OAAO,CACL,oBAAC,mBAAQ;QACP,oBAAC,mBAAS,IACR,MAAM,EAAE,CAAC,gBAAgB,EACzB,gBAAgB,EAAE;gBAChB,uBAAuB,EAAE,IAAI;gBAC7B,eAAe,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE;gBACzC,iFAAiF;gBACjF,2DAA2D;gBAC3D,YAAY,EAAE,cAAc,IAAI,SAAS;aAC1C,EACD,SAAS,EAAE,IAAA,kBAAG,EAAC,kBAAc,CAAC,QAAQ,CAAC,IAEtC,QAAQ,CACC,CACH,CACZ,CAAC;AACJ,CAAC,CAAC;AAjFW,QAAA,YAAY,gBAiFvB;AACF,oBAAY,CAAC,WAAW,GAAG,cAAc,CAAC"}

package/dist/js/next/components/Modal/ModalFooter.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+/** Renders content in the footer of the modal */
+export interface ModalFooterProps {
+    /** Content rendered inside the modal footer. */
+    children?: React.ReactNode;
+    /** Additional classes added to the modal footer. */
+    className?: string;
+}
+export declare const ModalFooter: React.FunctionComponent<ModalFooterProps>;
+//# sourceMappingURL=ModalFooter.d.ts.map

package/dist/js/next/components/Modal/ModalFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalFooter.d.ts","sourceRoot":"","sources":["../../../../../src/next/components/Modal/ModalFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,iDAAiD;AAEjD,MAAM,WAAW,gBAAgB;IAC/B,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAQjE,CAAC"}

package/dist/js/next/components/Modal/ModalFooter.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalFooter = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_styles_1 = require("@patternfly/react-styles");
+const modal_box_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/components/ModalBox/modal-box"));
+const ModalFooter = (_a) => {
+    var { children, className } = _a, props = tslib_1.__rest(_a, ["children", "className"]);
+    return (React.createElement("footer", Object.assign({}, props, { className: (0, react_styles_1.css)(modal_box_1.default.modalBoxFooter, className) }), children));
+};
+exports.ModalFooter = ModalFooter;
+exports.ModalFooter.displayName = 'ModalFooter';
+//# sourceMappingURL=ModalFooter.js.map

package/dist/js/next/components/Modal/ModalFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalFooter.js","sourceRoot":"","sources":["../../../../../src/next/components/Modal/ModalFooter.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,2DAA+C;AAC/C,mHAAgF;AAWzE,MAAM,WAAW,GAA8C,CAAC,EAIpD,EAAE,EAAE;QAJgD,EACrE,QAAQ,EACR,SAAS,OAEQ,EADd,KAAK,sBAH6D,yBAItE,CADS;IACc,OAAA,CACtB,gDAAY,KAAK,IAAE,SAAS,EAAE,IAAA,kBAAG,EAAC,mBAAM,CAAC,cAAc,EAAE,SAAS,CAAC,KAChE,QAAQ,CACF,CACV,CAAA;CAAA,CAAC;AARW,QAAA,WAAW,eAQtB;AACF,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/js/next/components/Modal/ModalHeader.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+/** Renders content in the header of the modal */
+export interface ModalHeaderProps {
+    /** Custom content rendered inside the modal header. If children are supplied then the tile, tileIconVariant and titleScreenReaderText props are ignored. */
+    children?: React.ReactNode;
+    /** Additional classes added to the modal header. */
+    className?: string;
+    /** Description of the modal. */
+    description?: React.ReactNode;
+    /** Id of the modal description. */
+    descriptorId?: string;
+    /** Optional help section for the modal header. */
+    help?: React.ReactNode;
+    /** Id of the modal title. */
+    labelId?: string;
+    /** Content rendered inside the modal title. */
+    title?: React.ReactNode;
+    /** Optional alert icon (or other) to show before the title. When the predefined alert types
+     * are used the default styling will be automatically applied. */
+    titleIconVariant?: 'success' | 'danger' | 'warning' | 'info' | 'custom' | React.ComponentType<any>;
+    /** Optional title label text for screen readers. */
+    titleScreenReaderText?: string;
+}
+export declare const ModalHeader: React.FunctionComponent<ModalHeaderProps>;
+//# sourceMappingURL=ModalHeader.d.ts.map

package/dist/js/next/components/Modal/ModalHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../../../../src/next/components/Modal/ModalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,iDAAiD;AAEjD,MAAM,WAAW,gBAAgB;IAC/B,4JAA4J;IAC5J,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;qEACiE;IACjE,gBAAgB,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACnG,oDAAoD;IACpD,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAuCjE,CAAC"}

package/dist/js/next/components/Modal/ModalHeader.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalHeader = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_styles_1 = require("@patternfly/react-styles");
+const modal_box_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/components/ModalBox/modal-box"));
+const ModalBoxDescription_1 = require("./ModalBoxDescription");
+const ModalBoxTitle_1 = require("./ModalBoxTitle");
+const ModalHeader = (_a) => {
+    var { children, className, descriptorId, description, labelId, title, titleIconVariant, titleScreenReaderText, help } = _a, props = tslib_1.__rest(_a, ["children", "className", "descriptorId", "description", "labelId", "title", "titleIconVariant", "titleScreenReaderText", "help"]);
+    const headerContent = children ? (children) : (React.createElement(React.Fragment, null,
+        React.createElement(ModalBoxTitle_1.ModalBoxTitle, { title: title, titleIconVariant: titleIconVariant, titleScreenReaderText: titleScreenReaderText, id: labelId }),
+        description && React.createElement(ModalBoxDescription_1.ModalBoxDescription, { id: descriptorId }, description)));
+    // TODO: apply variant modifier for icon styling.  Core fix needed first.  similar to this:
+    // className={css(className, isVariantIcon(titleIconVariant) && modalStyles.modifiers[titleIconVariant])}
+    return (React.createElement("header", Object.assign({ className: (0, react_styles_1.css)(modal_box_1.default.modalBoxHeader, help && modal_box_1.default.modifiers.help, className) }, props),
+        help && (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: (0, react_styles_1.css)(modal_box_1.default.modalBoxHeaderMain) }, headerContent),
+            React.createElement("div", { className: `${modal_box_1.default.modalBoxHeader}-help` }, help))),
+        !help && headerContent));
+};
+exports.ModalHeader = ModalHeader;
+exports.ModalHeader.displayName = 'ModalHeader';
+//# sourceMappingURL=ModalHeader.js.map

package/dist/js/next/components/Modal/ModalHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.js","sourceRoot":"","sources":["../../../../../src/next/components/Modal/ModalHeader.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,2DAA+C;AAC/C,mHAAgF;AAChF,+DAA4D;AAC5D,mDAAgD;AA0BzC,MAAM,WAAW,GAA8C,CAAC,EAWpD,EAAE,EAAE;QAXgD,EACrE,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,WAAW,EACX,OAAO,EACP,KAAK,EACL,gBAAgB,EAChB,qBAAqB,EACrB,IAAI,OAEa,EADd,KAAK,sBAV6D,iIAWtE,CADS;IAER,MAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,CAC/B,QAAQ,CACT,CAAC,CAAC,CAAC,CACF;QACE,oBAAC,6BAAa,IACZ,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,gBAAgB,EAClC,qBAAqB,EAAE,qBAAqB,EAC5C,EAAE,EAAE,OAAO,GACX;QACD,WAAW,IAAI,oBAAC,yCAAmB,IAAC,EAAE,EAAE,YAAY,IAAG,WAAW,CAAuB,CACzF,CACJ,CAAC;IAEF,2FAA2F;IAC3F,yGAAyG;IACzG,OAAO,CACL,8CAAQ,SAAS,EAAE,IAAA,kBAAG,EAAC,mBAAM,CAAC,cAAc,EAAE,IAAI,IAAI,mBAAM,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,IAAM,KAAK;QAC/F,IAAI,IAAI,CACP;YACE,6BAAK,SAAS,EAAE,IAAA,kBAAG,EAAC,mBAAM,CAAC,kBAAkB,CAAC,IAAG,aAAa,CAAO;YACrE,6BAAK,SAAS,EAAE,GAAG,mBAAM,CAAC,cAAc,OAAO,IAAG,IAAI,CAAO,CAC5D,CACJ;QACA,CAAC,IAAI,IAAI,aAAa,CAChB,CACV,CAAC;AACJ,CAAC,CAAC;AAvCW,QAAA,WAAW,eAuCtB;AACF,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/js/next/components/Modal/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Modal';
+export * from './ModalBody';
+export * from './ModalHeader';
+export * from './ModalFooter';
+//# sourceMappingURL=index.d.ts.map

package/dist/js/next/components/Modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/next/components/Modal/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}

package/dist/js/next/components/Modal/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Modal"), exports);
+tslib_1.__exportStar(require("./ModalBody"), exports);
+tslib_1.__exportStar(require("./ModalHeader"), exports);
+tslib_1.__exportStar(require("./ModalFooter"), exports);
+//# sourceMappingURL=index.js.map

package/dist/js/next/components/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/next/components/Modal/index.ts"],"names":[],"mappings":";;;AAAA,kDAAwB;AACxB,sDAA4B;AAC5B,wDAA8B;AAC9B,wDAA8B"}

package/dist/js/next/components/index.d.ts

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

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

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

package/dist/js/next/components/index.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./"), exports);
+tslib_1.__exportStar(require("./Modal"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/next/components/index.ts"],"names":[],"mappings":";;;AAAA,6CAAmB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/next/components/index.ts"],"names":[],"mappings":";;;AAAA,kDAAwB"}

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.2.0-prerelease.39","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.2.0-prerelease.40","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.2.0-prerelease.39","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.2.0-prerelease.40","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.2.0-prerelease.39","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.2.0-prerelease.40","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.2.0-prerelease.40",
+  "version": "5.2.0-prerelease.41",
   "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",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "01b0155542e7cfeed4f5197f3cb9ecc0d6f98d56"
+  "gitHead": "c90c7f26330e3d94ae5927318060b6d2a7faeef6"
 }

package/src/next/components/Modal/Modal.tsx

@@ -0,0 +1,202 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { canUseDOM, KeyTypes, PickOptional } from '../../../helpers';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
+import { ModalContent } from './ModalContent';
+import { OUIAProps, getDefaultOUIAId } from '../../../helpers';
+
+export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
+  /** The parent container to append the modal to. Defaults to "document.body". */
+  appendTo?: HTMLElement | (() => HTMLElement);
+  /** Id to use for the modal box description. This should match the ModalHeader labelId or descriptorId. */
+  'aria-describedby'?: string;
+  /**   Adds an accessible name to the modal when there is no title in the ModalHeader. */
+  'aria-label'?: string;
+  /** Id to use for the modal box label. This should include the ModalHeader labelId. */
+  'aria-labelledby'?: string;
+  /** Content rendered inside the modal. */
+  children: React.ReactNode;
+  /** Additional classes added to the modal. */
+  className?: string;
+  /** Flag to disable focus trap. */
+  disableFocusTrap?: boolean;
+  /** The element to focus when the modal opens. By default the first
+   * focusable element will receive focus.
+   */
+  elementToFocus?: HTMLElement | SVGElement | string;
+  /** An id to use for the modal box container. */
+  id?: string;
+  /** Flag to show the modal. */
+  isOpen?: boolean;
+  /** Add callback for when the close button is clicked. This prop needs to be passed to render the close button */
+  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;
+  /** Modal handles pressing of the escape key and closes the modal. If you want to handle
+   * this yourself you can use this callback function. */
+  onEscapePress?: (event: KeyboardEvent) => void;
+  /** Position of the modal. By default a modal will be positioned vertically and horizontally centered. */
+  position?: 'default' | 'top';
+  /** Offset from alternate position. Can be any valid CSS length/percentage. */
+  positionOffset?: string;
+  /** Variant of the modal. */
+  variant?: 'small' | 'medium' | 'large' | 'default';
+  /** Default width of the modal. */
+  width?: number | string;
+  /** Maximum width of the modal. */
+  maxWidth?: number | string;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
+}
+
+export enum ModalVariant {
+  small = 'small',
+  medium = 'medium',
+  large = 'large',
+  default = 'default'
+}
+
+interface ModalState {
+  container: HTMLElement;
+  ouiaStateId: string;
+}
+
+class Modal extends React.Component<ModalProps, ModalState> {
+  static displayName = 'Modal';
+  static currentId = 0;
+  boxId = '';
+
+  static defaultProps: PickOptional<ModalProps> = {
+    isOpen: false,
+    variant: 'default',
+    appendTo: () => document.body,
+    ouiaSafe: true,
+    position: 'default'
+  };
+
+  constructor(props: ModalProps) {
+    super(props);
+    const boxIdNum = Modal.currentId++;
+    this.boxId = props.id || `pf-modal-part-${boxIdNum}`;
+
+    this.state = {
+      container: undefined,
+      ouiaStateId: getDefaultOUIAId(Modal.displayName, props.variant)
+    };
+  }
+
+  handleEscKeyClick = (event: KeyboardEvent): void => {
+    const { onEscapePress } = this.props;
+    if (event.key === KeyTypes.Escape && this.props.isOpen) {
+      onEscapePress ? onEscapePress(event) : this.props.onClose?.(event);
+    }
+  };
+
+  getElement = (appendTo: HTMLElement | (() => HTMLElement)) => {
+    if (typeof appendTo === 'function') {
+      return appendTo();
+    }
+    return appendTo || document.body;
+  };
+
+  toggleSiblingsFromScreenReaders = (hide: boolean) => {
+    const { appendTo } = this.props;
+    const target: HTMLElement = this.getElement(appendTo);
+    const bodyChildren = target.children;
+    for (const child of Array.from(bodyChildren)) {
+      if (child !== this.state.container) {
+        hide ? child.setAttribute('aria-hidden', '' + hide) : child.removeAttribute('aria-hidden');
+      }
+    }
+  };
+
+  isEmpty = (value: string | null | undefined) => value === null || value === undefined || value === '';
+
+  componentDidMount() {
+    const {
+      appendTo,
+      'aria-describedby': ariaDescribedby,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby
+    } = this.props;
+    const target: HTMLElement = this.getElement(appendTo);
+    const container = document.createElement('div');
+    this.setState({ container });
+    target.appendChild(container);
+    target.addEventListener('keydown', this.handleEscKeyClick, false);
+
+    if (this.props.isOpen) {
+      target.classList.add(css(styles.backdropOpen));
+    } else {
+      target.classList.remove(css(styles.backdropOpen));
+    }
+
+    if (!ariaDescribedby && !ariaLabel && !ariaLabelledby) {
+      // eslint-disable-next-line no-console
+      console.error('Modal: Specify at least one of: aria-describedby, aria-label, aria-labelledby.');
+    }
+  }
+
+  componentDidUpdate() {
+    const { appendTo } = this.props;
+    const target: HTMLElement = this.getElement(appendTo);
+    if (this.props.isOpen) {
+      target.classList.add(css(styles.backdropOpen));
+      this.toggleSiblingsFromScreenReaders(true);
+    } else {
+      target.classList.remove(css(styles.backdropOpen));
+      this.toggleSiblingsFromScreenReaders(false);
+    }
+  }
+
+  componentWillUnmount() {
+    const { appendTo } = this.props;
+    const target: HTMLElement = this.getElement(appendTo);
+    if (this.state.container) {
+      target.removeChild(this.state.container);
+    }
+    target.removeEventListener('keydown', this.handleEscKeyClick, false);
+    target.classList.remove(css(styles.backdropOpen));
+    this.toggleSiblingsFromScreenReaders(false);
+  }
+
+  render() {
+    const {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      appendTo,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onEscapePress,
+      'aria-labelledby': ariaLabelledby,
+      'aria-label': ariaLabel,
+      'aria-describedby': ariaDescribedby,
+      ouiaId,
+      ouiaSafe,
+      position,
+      elementToFocus,
+      ...props
+    } = this.props;
+    const { container } = this.state;
+
+    if (!canUseDOM || !container) {
+      return null;
+    }
+
+    return ReactDOM.createPortal(
+      <ModalContent
+        boxId={this.boxId}
+        aria-label={ariaLabel}
+        aria-describedby={ariaDescribedby}
+        aria-labelledby={ariaLabelledby}
+        ouiaId={ouiaId !== undefined ? ouiaId : this.state.ouiaStateId}
+        ouiaSafe={ouiaSafe}
+        position={position}
+        elementToFocus={elementToFocus}
+        {...props}
+      />,
+      container
+    ) as React.ReactElement;
+  }
+}
+
+export { Modal };

package/src/next/components/Modal/ModalBody.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
+
+/** Renders content in the body of the modal */
+
+export interface ModalBodyProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content rendered inside the modal body. */
+  children?: React.ReactNode;
+  /** Additional classes added to the modal body. */
+  className?: string;
+  /** Accessible label applied to the modal body. This should be used to communicate
+   * important information about the modal body div element if needed, such as when it is scrollable.
+   */
+  'aria-label'?: string;
+  /** Accessible role applied to the modal body. This will default to "region" if the
+   * aria-label property is passed in. Set to a more appropriate role as applicable
+   * based on the modal content and context.
+   */
+  role?: string;
+}
+
+export const ModalBody: React.FunctionComponent<ModalBodyProps> = ({
+  children,
+  className,
+  'aria-label': ariaLabel,
+  role,
+  ...props
+}: ModalBodyProps) => {
+  const defaultModalBodyRole = ariaLabel ? 'region' : undefined;
+  return (
+    <div
+      aria-label={ariaLabel}
+      role={role || defaultModalBodyRole}
+      className={css(styles.modalBoxBody, className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+ModalBody.displayName = 'ModalBody';