@patternfly/react-core 6.7.0-prerelease.1 → 6.7.0-prerelease.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/components/package.json +1 -1
- package/deprecated/package.json +1 -1
- package/dist/dynamic/components/AboutModal/package.json +1 -1
- package/dist/dynamic/components/Accordion/package.json +1 -1
- package/dist/dynamic/components/ActionList/package.json +1 -1
- package/dist/dynamic/components/Alert/package.json +1 -1
- package/dist/dynamic/components/Avatar/package.json +1 -1
- package/dist/dynamic/components/BackToTop/package.json +1 -1
- package/dist/dynamic/components/Backdrop/package.json +1 -1
- package/dist/dynamic/components/BackgroundImage/package.json +1 -1
- package/dist/dynamic/components/Badge/package.json +1 -1
- package/dist/dynamic/components/Banner/package.json +1 -1
- package/dist/dynamic/components/Brand/package.json +1 -1
- package/dist/dynamic/components/Breadcrumb/package.json +1 -1
- package/dist/dynamic/components/Button/package.json +1 -1
- package/dist/dynamic/components/CalendarMonth/package.json +1 -1
- package/dist/dynamic/components/Card/package.json +1 -1
- package/dist/dynamic/components/Checkbox/package.json +1 -1
- package/dist/dynamic/components/ClipboardCopy/package.json +1 -1
- package/dist/dynamic/components/CodeBlock/package.json +1 -1
- package/dist/dynamic/components/Compass/package.json +1 -1
- package/dist/dynamic/components/Content/package.json +1 -1
- package/dist/dynamic/components/DataList/package.json +1 -1
- package/dist/dynamic/components/DatePicker/package.json +1 -1
- package/dist/dynamic/components/DescriptionList/package.json +1 -1
- package/dist/dynamic/components/Divider/package.json +1 -1
- package/dist/dynamic/components/Drawer/package.json +1 -1
- package/dist/dynamic/components/Dropdown/package.json +1 -1
- package/dist/dynamic/components/DualListSelector/package.json +1 -1
- package/dist/dynamic/components/EmptyState/package.json +1 -1
- package/dist/dynamic/components/ExpandableSection/package.json +1 -1
- package/dist/dynamic/components/FileUpload/package.json +1 -1
- package/dist/dynamic/components/Form/package.json +1 -1
- package/dist/dynamic/components/FormSelect/package.json +1 -1
- package/dist/dynamic/components/HelperText/package.json +1 -1
- package/dist/dynamic/components/Hero/package.json +1 -1
- package/dist/dynamic/components/Hint/package.json +1 -1
- package/dist/dynamic/components/Icon/package.json +1 -1
- package/dist/dynamic/components/InputGroup/package.json +1 -1
- package/dist/dynamic/components/JumpLinks/package.json +1 -1
- package/dist/dynamic/components/Label/package.json +1 -1
- package/dist/dynamic/components/List/package.json +1 -1
- package/dist/dynamic/components/LoginPage/package.json +1 -1
- package/dist/dynamic/components/Masthead/package.json +1 -1
- package/dist/dynamic/components/Menu/package.json +1 -1
- package/dist/dynamic/components/MenuToggle/package.json +1 -1
- package/dist/dynamic/components/Modal/package.json +1 -1
- package/dist/dynamic/components/MultipleFileUpload/package.json +1 -1
- package/dist/dynamic/components/Nav/package.json +1 -1
- package/dist/dynamic/components/NotificationBadge/package.json +1 -1
- package/dist/dynamic/components/NotificationDrawer/package.json +1 -1
- package/dist/dynamic/components/NumberInput/package.json +1 -1
- package/dist/dynamic/components/OverflowMenu/package.json +1 -1
- package/dist/dynamic/components/Page/package.json +1 -1
- package/dist/dynamic/components/Pagination/package.json +1 -1
- package/dist/dynamic/components/Panel/package.json +1 -1
- package/dist/dynamic/components/Popover/package.json +1 -1
- package/dist/dynamic/components/Progress/package.json +1 -1
- package/dist/dynamic/components/ProgressStepper/package.json +1 -1
- package/dist/dynamic/components/Radio/package.json +1 -1
- package/dist/dynamic/components/SearchInput/package.json +1 -1
- package/dist/dynamic/components/Select/package.json +1 -1
- package/dist/dynamic/components/Sidebar/package.json +1 -1
- package/dist/dynamic/components/SimpleList/package.json +1 -1
- package/dist/dynamic/components/Skeleton/package.json +1 -1
- package/dist/dynamic/components/SkipToContent/package.json +1 -1
- package/dist/dynamic/components/Slider/package.json +1 -1
- package/dist/dynamic/components/Spinner/package.json +1 -1
- package/dist/dynamic/components/Switch/package.json +1 -1
- package/dist/dynamic/components/Tabs/package.json +1 -1
- package/dist/dynamic/components/TextArea/package.json +1 -1
- package/dist/dynamic/components/TextInput/package.json +1 -1
- package/dist/dynamic/components/TextInputGroup/package.json +1 -1
- package/dist/dynamic/components/TimePicker/package.json +1 -1
- package/dist/dynamic/components/Timestamp/package.json +1 -1
- package/dist/dynamic/components/Title/package.json +1 -1
- package/dist/dynamic/components/ToggleGroup/package.json +1 -1
- package/dist/dynamic/components/Toolbar/package.json +1 -1
- package/dist/dynamic/components/Tooltip/package.json +1 -1
- package/dist/dynamic/components/TreeView/package.json +1 -1
- package/dist/dynamic/components/Truncate/package.json +1 -1
- package/dist/dynamic/components/Wizard/hooks/package.json +1 -1
- package/dist/dynamic/components/Wizard/package.json +1 -1
- package/dist/dynamic/deprecated/components/Chip/package.json +1 -1
- package/dist/dynamic/deprecated/components/DragDrop/package.json +1 -1
- package/dist/dynamic/deprecated/components/DualListSelector/package.json +1 -1
- package/dist/dynamic/deprecated/components/Modal/package.json +1 -1
- package/dist/dynamic/deprecated/components/Tile/package.json +1 -1
- package/dist/dynamic/deprecated/components/Wizard/package.json +1 -1
- package/dist/dynamic/deprecated/components/package.json +1 -1
- package/dist/dynamic/helpers/AnimationsProvider/AnimationsProvider/package.json +1 -1
- package/dist/dynamic/helpers/AnimationsProvider/package.json +1 -1
- package/dist/dynamic/helpers/FocusTrap/FocusTrap/package.json +1 -1
- package/dist/dynamic/helpers/GenerateId/GenerateId/package.json +1 -1
- package/dist/dynamic/helpers/KeyboardHandler/package.json +1 -1
- package/dist/dynamic/helpers/OUIA/ouia/package.json +1 -1
- package/dist/dynamic/helpers/Popper/Popper/package.json +1 -1
- package/dist/dynamic/helpers/SSRSafeIds/SSRSafeIds/package.json +1 -1
- package/dist/dynamic/helpers/constants/package.json +1 -1
- package/dist/dynamic/helpers/datetimeUtils/package.json +1 -1
- package/dist/dynamic/helpers/fileUtils/package.json +1 -1
- package/dist/dynamic/helpers/htmlConstants/package.json +1 -1
- package/dist/dynamic/helpers/inert/package.json +1 -1
- package/dist/dynamic/helpers/package.json +1 -1
- package/dist/dynamic/helpers/resizeObserver/package.json +1 -1
- package/dist/dynamic/helpers/typeUtils/package.json +1 -1
- package/dist/dynamic/helpers/useInterval/package.json +1 -1
- package/dist/dynamic/helpers/useIsomorphicLayout/package.json +1 -1
- package/dist/dynamic/helpers/useSSRSafeId/package.json +1 -1
- package/dist/dynamic/helpers/useUnmountEffect/package.json +1 -1
- package/dist/dynamic/helpers/util/package.json +1 -1
- package/dist/dynamic/layouts/Bullseye/package.json +1 -1
- package/dist/dynamic/layouts/Flex/package.json +1 -1
- package/dist/dynamic/layouts/Gallery/package.json +1 -1
- package/dist/dynamic/layouts/Grid/package.json +1 -1
- package/dist/dynamic/layouts/Level/package.json +1 -1
- package/dist/dynamic/layouts/Split/package.json +1 -1
- package/dist/dynamic/layouts/Stack/package.json +1 -1
- package/dist/dynamic/styles/package.json +1 -1
- package/dist/esm/components/Backdrop/Backdrop.d.ts +4 -0
- package/dist/esm/components/Backdrop/Backdrop.d.ts.map +1 -1
- package/dist/esm/components/Backdrop/Backdrop.js +4 -2
- package/dist/esm/components/Backdrop/Backdrop.js.map +1 -1
- package/dist/esm/components/Modal/Modal.d.ts +2 -0
- package/dist/esm/components/Modal/Modal.d.ts.map +1 -1
- package/dist/esm/components/Modal/Modal.js +2 -1
- package/dist/esm/components/Modal/Modal.js.map +1 -1
- package/dist/esm/components/Modal/ModalBox.d.ts +4 -0
- package/dist/esm/components/Modal/ModalBox.d.ts.map +1 -1
- package/dist/esm/components/Modal/ModalBox.js +2 -2
- package/dist/esm/components/Modal/ModalBox.js.map +1 -1
- package/dist/esm/components/Modal/ModalContent.d.ts +2 -0
- package/dist/esm/components/Modal/ModalContent.d.ts.map +1 -1
- package/dist/esm/components/Modal/ModalContent.js +40 -5
- package/dist/esm/components/Modal/ModalContent.js.map +1 -1
- package/dist/js/components/Backdrop/Backdrop.d.ts +4 -0
- package/dist/js/components/Backdrop/Backdrop.d.ts.map +1 -1
- package/dist/js/components/Backdrop/Backdrop.js +4 -2
- package/dist/js/components/Backdrop/Backdrop.js.map +1 -1
- package/dist/js/components/Modal/Modal.d.ts +2 -0
- package/dist/js/components/Modal/Modal.d.ts.map +1 -1
- package/dist/js/components/Modal/Modal.js +2 -1
- package/dist/js/components/Modal/Modal.js.map +1 -1
- package/dist/js/components/Modal/ModalBox.d.ts +4 -0
- package/dist/js/components/Modal/ModalBox.d.ts.map +1 -1
- package/dist/js/components/Modal/ModalBox.js +2 -2
- package/dist/js/components/Modal/ModalBox.js.map +1 -1
- package/dist/js/components/Modal/ModalContent.d.ts +2 -0
- package/dist/js/components/Modal/ModalContent.d.ts.map +1 -1
- package/dist/js/components/Modal/ModalContent.js +39 -4
- package/dist/js/components/Modal/ModalContent.js.map +1 -1
- package/dist/umd/assets/{output-Doo5KfbL.css → output-BPcxNyfB.css} +15654 -15654
- package/dist/umd/react-core.min.js +1 -1
- package/helpers/package.json +1 -1
- package/layouts/package.json +1 -1
- package/next/package.json +1 -1
- package/package.json +3 -3
- package/src/components/Backdrop/Backdrop.tsx +24 -5
- package/src/components/Backdrop/__tests__/Backdrop.test.tsx +35 -1
- package/src/components/Backdrop/__tests__/__snapshots__/Backdrop.test.tsx.snap +1 -1
- package/src/components/Modal/Modal.tsx +4 -1
- package/src/components/Modal/ModalBox.tsx +8 -0
- package/src/components/Modal/ModalContent.tsx +54 -4
- package/src/components/Modal/__tests__/Modal.test.tsx +14 -0
- package/src/components/Modal/__tests__/ModalContent.test.tsx +75 -1
- package/src/components/Modal/examples/Modal.md +12 -0
- package/src/components/Modal/examples/ModalNotAnimated.tsx +44 -0
- package/src/deprecated/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap +8 -8
|
@@ -7,12 +7,12 @@ const react_styles_1 = require("@patternfly/react-styles");
|
|
|
7
7
|
const modal_box_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/components/ModalBox/modal-box"));
|
|
8
8
|
const c_modal_box_m_align_top_spacer_1 = tslib_1.__importDefault(require('@patternfly/react-tokens/dist/js/c_modal_box_m_align_top_spacer'));
|
|
9
9
|
const ModalBox = (_a) => {
|
|
10
|
-
var { children, className, variant = 'default', position, positionOffset, 'aria-labelledby': ariaLabelledby, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, style } = _a, props = tslib_1.__rest(_a, ["children", "className", "variant", "position", "positionOffset", 'aria-labelledby', 'aria-label', 'aria-describedby', "style"]);
|
|
10
|
+
var { children, className, variant = 'default', position, positionOffset, 'aria-labelledby': ariaLabelledby, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, style, isOpen, hasAnimations } = _a, props = tslib_1.__rest(_a, ["children", "className", "variant", "position", "positionOffset", 'aria-labelledby', 'aria-label', 'aria-describedby', "style", "isOpen", "hasAnimations"]);
|
|
11
11
|
if (positionOffset) {
|
|
12
12
|
style = style || {};
|
|
13
13
|
style[c_modal_box_m_align_top_spacer_1.default.name] = positionOffset;
|
|
14
14
|
}
|
|
15
|
-
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ role: "dialog", "aria-label": ariaLabel || null, "aria-labelledby": ariaLabelledby || null, "aria-describedby": ariaDescribedby, "aria-modal": "true", className: (0, react_styles_1.css)(modal_box_1.default.modalBox, className, position === 'top' && modal_box_1.default.modifiers.alignTop, variant === 'large' && modal_box_1.default.modifiers.lg, variant === 'small' && modal_box_1.default.modifiers.sm, variant === 'medium' && modal_box_1.default.modifiers.md), style: style }, props, { children: children })));
|
|
15
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ role: "dialog", "aria-label": ariaLabel || null, "aria-labelledby": ariaLabelledby || null, "aria-describedby": ariaDescribedby, "aria-modal": "true", className: (0, react_styles_1.css)(modal_box_1.default.modalBox, hasAnimations && modal_box_1.default.modifiers.animate, hasAnimations && isOpen === true && modal_box_1.default.modifiers.open, className, position === 'top' && modal_box_1.default.modifiers.alignTop, variant === 'large' && modal_box_1.default.modifiers.lg, variant === 'small' && modal_box_1.default.modifiers.sm, variant === 'medium' && modal_box_1.default.modifiers.md), style: style }, props, { children: children })));
|
|
16
16
|
};
|
|
17
17
|
exports.ModalBox = ModalBox;
|
|
18
18
|
exports.ModalBox.displayName = 'ModalBox';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalBox.js","sourceRoot":"","sources":["../../../../src/components/Modal/ModalBox.tsx"],"names":[],"mappings":";;;;;AAAA,2DAA+C;AAC/C,mHAAgF;;
|
|
1
|
+
{"version":3,"file":"ModalBox.js","sourceRoot":"","sources":["../../../../src/components/Modal/ModalBox.tsx"],"names":[],"mappings":";;;;;AAAA,2DAA+C;AAC/C,mHAAgF;;AA0BzE,MAAM,QAAQ,GAA2C,CAAC,EAajD,EAAE,EAAE;QAb6C,EAC/D,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,cAAc,EACd,iBAAiB,EAAE,cAAc,EACjC,YAAY,EAAE,SAAS,EACvB,kBAAkB,EAAE,eAAe,EACnC,KAAK,EACL,MAAM,EACN,aAAa,OAEC,EADX,KAAK,sBAZuD,2JAahE,CADS;IAER,IAAI,cAAc,EAAE,CAAC;QACnB,KAAK,GAAG,KAAK,IAAI,EAAE,CAAC;QACnB,KAAa,CAAC,wCAAS,CAAC,IAAI,CAAC,GAAG,cAAc,CAAC;IAClD,CAAC;IACD,OAAO,CACL,8CACE,IAAI,EAAC,QAAQ,gBACD,SAAS,IAAI,IAAI,qBACZ,cAAc,IAAI,IAAI,sBACrB,eAAe,gBACtB,MAAM,EACjB,SAAS,EAAE,IAAA,kBAAG,EACZ,mBAAM,CAAC,QAAQ,EACf,aAAa,IAAI,mBAAM,CAAC,SAAS,CAAC,OAAO,EACzC,aAAa,IAAI,MAAM,KAAK,IAAI,IAAI,mBAAM,CAAC,SAAS,CAAC,IAAI,EACzD,SAAS,EACT,QAAQ,KAAK,KAAK,IAAI,mBAAM,CAAC,SAAS,CAAC,QAAQ,EAC/C,OAAO,KAAK,OAAO,IAAI,mBAAM,CAAC,SAAS,CAAC,EAAE,EAC1C,OAAO,KAAK,OAAO,IAAI,mBAAM,CAAC,SAAS,CAAC,EAAE,EAC1C,OAAO,KAAK,QAAQ,IAAI,mBAAM,CAAC,SAAS,CAAC,EAAE,CAC5C,EACD,KAAK,EAAE,KAAK,IACR,KAAK,cAER,QAAQ,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAzCW,QAAA,QAAQ,YAyCnB;AACF,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}
|
|
@@ -43,6 +43,8 @@ export interface ModalContentProps extends OUIAProps {
|
|
|
43
43
|
ouiaId?: number | string;
|
|
44
44
|
/** 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. */
|
|
45
45
|
ouiaSafe?: boolean;
|
|
46
|
+
/** Flag indicating whether animations are enabled. */
|
|
47
|
+
hasAnimations?: boolean;
|
|
46
48
|
}
|
|
47
49
|
export declare const ModalContent: React.FunctionComponent<ModalContentProps>;
|
|
48
50
|
//# sourceMappingURL=ModalContent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/ModalContent.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"ModalContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/ModalContent.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAgB,SAAS,EAAoB,MAAM,eAAe,CAAC;AAO1E,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,0BAA0B;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;IACnD,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,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;IACnB,sDAAsD;IACtD,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CA6HnE,CAAC"}
|
|
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.ModalContent = void 0;
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
const react_1 = require("react");
|
|
6
7
|
const helpers_1 = require("../../helpers");
|
|
7
8
|
const bullseye_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/layouts/Bullseye/bullseye"));
|
|
8
9
|
const react_styles_1 = require("@patternfly/react-styles");
|
|
@@ -10,9 +11,31 @@ const helpers_2 = require("../../helpers");
|
|
|
10
11
|
const Backdrop_1 = require("../Backdrop");
|
|
11
12
|
const ModalBoxCloseButton_1 = require("./ModalBoxCloseButton");
|
|
12
13
|
const ModalBox_1 = require("./ModalBox");
|
|
14
|
+
const transitionEndFallbackDelay = 300;
|
|
13
15
|
const ModalContent = (_a) => {
|
|
14
|
-
var { backdropClassName, children, className, isOpen = false, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-labelledby': ariaLabelledby, onClose, variant = 'default', position, positionOffset, width, maxWidth, boxId, backdropId, disableFocusTrap = false, ouiaId, ouiaSafe = true, elementToFocus, focusTrapId } = _a, props = tslib_1.__rest(_a, ["backdropClassName", "children", "className", "isOpen", 'aria-label', 'aria-describedby', 'aria-labelledby', "onClose", "variant", "position", "positionOffset", "width", "maxWidth", "boxId", "backdropId", "disableFocusTrap", "ouiaId", "ouiaSafe", "elementToFocus", "focusTrapId"]);
|
|
15
|
-
|
|
16
|
+
var { backdropClassName, children, className, isOpen = false, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-labelledby': ariaLabelledby, onClose, variant = 'default', position, positionOffset, width, maxWidth, boxId, backdropId, disableFocusTrap = false, ouiaId, ouiaSafe = true, elementToFocus, focusTrapId, hasAnimations: hasAnimationsProp } = _a, props = tslib_1.__rest(_a, ["backdropClassName", "children", "className", "isOpen", 'aria-label', 'aria-describedby', 'aria-labelledby', "onClose", "variant", "position", "positionOffset", "width", "maxWidth", "boxId", "backdropId", "disableFocusTrap", "ouiaId", "ouiaSafe", "elementToFocus", "focusTrapId", "hasAnimations"]);
|
|
17
|
+
const hasAnimations = (0, helpers_2.useHasAnimations)(hasAnimationsProp);
|
|
18
|
+
// Keeps the modal in the DOM while the close animation runs. When animations are enabled we defer
|
|
19
|
+
// unmounting until the backdrop's transition ends (see onTransitionEnd below) instead of removing
|
|
20
|
+
// it immediately when isOpen becomes false.
|
|
21
|
+
const [isRendered, setIsRendered] = (0, react_1.useState)(isOpen);
|
|
22
|
+
(0, react_1.useEffect)(() => {
|
|
23
|
+
if (isOpen) {
|
|
24
|
+
setIsRendered(true);
|
|
25
|
+
}
|
|
26
|
+
else if (!isRendered) {
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
else if (!hasAnimations) {
|
|
30
|
+
setIsRendered(false);
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
// Ensure the modal is removed if CSS transitions are disabled or transitionend does not fire.
|
|
34
|
+
const transitionEndFallback = window.setTimeout(() => setIsRendered(false), transitionEndFallbackDelay);
|
|
35
|
+
return () => window.clearTimeout(transitionEndFallback);
|
|
36
|
+
}
|
|
37
|
+
}, [isOpen, hasAnimations, isRendered]);
|
|
38
|
+
if (!isRendered) {
|
|
16
39
|
return null;
|
|
17
40
|
}
|
|
18
41
|
const getAriaLabelledBy = () => {
|
|
@@ -24,10 +47,22 @@ const ModalContent = (_a) => {
|
|
|
24
47
|
}
|
|
25
48
|
return boxId;
|
|
26
49
|
};
|
|
27
|
-
const modalBox = ((0, jsx_runtime_1.jsxs)(ModalBox_1.ModalBox, Object.assign({ className: (0, react_styles_1.css)(className), variant: variant, position: position, positionOffset: positionOffset, "aria-label": ariaLabel, "aria-labelledby": getAriaLabelledBy(), "aria-describedby": ariaDescribedby }, (0, helpers_2.getOUIAProps)(exports.ModalContent.displayName, ouiaId, ouiaSafe), { style: Object.assign(Object.assign({}, (width && { '--pf-v6-c-modal-box--Width': typeof width !== 'number' ? width : `${width}px` })), (maxWidth && {
|
|
50
|
+
const modalBox = ((0, jsx_runtime_1.jsxs)(ModalBox_1.ModalBox, Object.assign({ className: (0, react_styles_1.css)(className), isOpen: isOpen, hasAnimations: hasAnimations, variant: variant, position: position, positionOffset: positionOffset, "aria-label": ariaLabel, "aria-labelledby": getAriaLabelledBy(), "aria-describedby": ariaDescribedby }, (0, helpers_2.getOUIAProps)(exports.ModalContent.displayName, ouiaId, ouiaSafe), { style: Object.assign(Object.assign({}, (width && { '--pf-v6-c-modal-box--Width': typeof width !== 'number' ? width : `${width}px` })), (maxWidth && {
|
|
28
51
|
'--pf-v6-c-modal-box--MaxWidth': typeof maxWidth !== 'number' ? maxWidth : `${maxWidth}px`
|
|
29
52
|
})) }, props, { id: boxId, children: [onClose && (0, jsx_runtime_1.jsx)(ModalBoxCloseButton_1.ModalBoxCloseButton, { onClose: (event) => onClose(event), ouiaId: ouiaId }), children] })));
|
|
30
|
-
|
|
53
|
+
let focusTrapActive = !disableFocusTrap;
|
|
54
|
+
if (hasAnimations) {
|
|
55
|
+
focusTrapActive = !disableFocusTrap && isOpen;
|
|
56
|
+
}
|
|
57
|
+
return ((0, jsx_runtime_1.jsx)(Backdrop_1.Backdrop, { className: (0, react_styles_1.css)(backdropClassName), id: backdropId, hasAnimations: hasAnimations, isVisible: isOpen, "aria-hidden": hasAnimations && !isOpen ? true : undefined, onTransitionEnd: hasAnimations
|
|
58
|
+
? (event) => {
|
|
59
|
+
// Only unmount once the backdrop's own closing transition finishes. Guarding on the
|
|
60
|
+
// target prevents bubbled transitions from child elements from triggering this early.
|
|
61
|
+
if (!isOpen && event.target === event.currentTarget) {
|
|
62
|
+
setIsRendered(false);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
: undefined, children: (0, jsx_runtime_1.jsx)(helpers_1.FocusTrap, { active: focusTrapActive, focusTrapOptions: {
|
|
31
66
|
clickOutsideDeactivates: true,
|
|
32
67
|
tabbableOptions: { displayCheck: 'none' },
|
|
33
68
|
// FocusTrap's initialFocus can accept false as a value to prevent initial focus.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalContent.js","sourceRoot":"","sources":["../../../../src/components/Modal/ModalContent.tsx"],"names":[],"mappings":";;;;;AAAA,2CAA0C;AAC1C,8GAAoF;AACpF,2DAA+C;AAC/C,
|
|
1
|
+
{"version":3,"file":"ModalContent.js","sourceRoot":"","sources":["../../../../src/components/Modal/ModalContent.tsx"],"names":[],"mappings":"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"}
|