@instructure/ui-modal 10.16.1-snapshot-0 → 10.16.1

package/es/Modal/__new-tests__/Modal.test.js

@@ -25,13 +25,14 @@ var _Modal, _Modal2, _Modal$Body, _Modal3, _Modal4, _View, _Modal5, _Modal$Body2
  * SOFTWARE.
  */
 
-import React from 'react';
+import { Component } from 'react';
 import { render, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { Modal } from '../index';
 import { View } from '@instructure/ui-view';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 describe('<Modal />', () => {
   let consoleWarningMock;
   let consoleErrorMock;
@@ -56,25 +57,31 @@ describe('<Modal />', () => {
     window.scroll = originalScroll;
   });
   it('should render nothing and have a node with no parent when closed', () => {
-    const _render = render(_Modal || (_Modal = /*#__PURE__*/React.createElement(Modal, {
+    const _render = render(_Modal || (_Modal = _jsx(Modal, {
         label: "Modal Dialog",
-        shouldReturnFocus: false
-      }, /*#__PURE__*/React.createElement(Modal.Body, null, "Foo Bar Baz")))),
+        shouldReturnFocus: false,
+        children: _jsx(Modal.Body, {
+          children: "Foo Bar Baz"
+        })
+      }))),
       container = _render.container;
     expect(container.firstChild).not.toBeInTheDocument();
   });
   it('should apply theme overrides when open', async () => {
     const testFont = 'test-font';
     const bodyText = 'Modal-body-text';
-    const _render2 = render(/*#__PURE__*/React.createElement(Modal, {
+    const _render2 = render(_jsx(Modal, {
         open: true,
         size: "small",
         label: "Modal Dialog",
         shouldReturnFocus: false,
         themeOverride: {
           fontFamily: testFont
-        }
-      }, /*#__PURE__*/React.createElement(Modal.Body, null, bodyText))),
+        },
+        children: _jsx(Modal.Body, {
+          children: bodyText
+        })
+      })),
       findByText = _render2.findByText,
       findByRole = _render2.findByRole;
     const modalBody = await findByText(bodyText);
@@ -84,12 +91,15 @@ describe('<Modal />', () => {
     expect(dialogStyle.fontFamily).toBe(testFont);
   });
   it('should render its own positioning context if constrained to parent', async () => {
-    const _render3 = render(_Modal2 || (_Modal2 = /*#__PURE__*/React.createElement(Modal, {
+    const _render3 = render(_Modal2 || (_Modal2 = _jsx(Modal, {
         open: true,
         label: "Modal Dialog",
         shouldReturnFocus: false,
-        constrain: "parent"
-      }, /*#__PURE__*/React.createElement(Modal.Body, null, "Foo Bar Baz")))),
+        constrain: "parent",
+        children: _jsx(Modal.Body, {
+          children: "Foo Bar Baz"
+        })
+      }))),
       findByRole = _render3.findByRole;
     const dialog = await findByRole('dialog');
     const constrain = document.querySelector("[class*='constrainContext']");
@@ -97,19 +107,23 @@ describe('<Modal />', () => {
     expect(constrain).toBeInTheDocument();
   });
   it("should not inherit its parent's font color", async () => {
-    const _render4 = render(/*#__PURE__*/React.createElement("div", {
+    const _render4 = render(_jsx("div", {
         style: {
           color: 'rgb(255, 255, 255)'
-        }
-      }, /*#__PURE__*/React.createElement(Modal, {
-        open: true,
-        label: "Modal Dialog",
-        shouldReturnFocus: false,
-        constrain: "parent",
-        themeOverride: {
-          textColor: 'rgb(0, 0, 0)'
-        }
-      }, _Modal$Body || (_Modal$Body = /*#__PURE__*/React.createElement(Modal.Body, null, "Foo Bar Baz"))))),
+        },
+        children: _jsx(Modal, {
+          open: true,
+          label: "Modal Dialog",
+          shouldReturnFocus: false,
+          constrain: "parent",
+          themeOverride: {
+            textColor: 'rgb(0, 0, 0)'
+          },
+          children: _Modal$Body || (_Modal$Body = _jsx(Modal.Body, {
+            children: "Foo Bar Baz"
+          }))
+        })
+      })),
       findByRole = _render4.findByRole;
     const dialog = await findByRole('dialog');
     const dialogStyle = window.getComputedStyle(dialog);
@@ -117,43 +131,57 @@ describe('<Modal />', () => {
     expect(dialogStyle.color).toBe('rgb(0, 0, 0)');
   });
   it('should pass `as` prop to the dialog', async () => {
-    const _render5 = render(_Modal3 || (_Modal3 = /*#__PURE__*/React.createElement(Modal, {
+    const _render5 = render(_Modal3 || (_Modal3 = _jsx(Modal, {
         open: true,
         label: "Modal Dialog",
-        shouldReturnFocus: false
-      }, /*#__PURE__*/React.createElement(Modal.Body, null, "Foo Bar Baz")))),
+        shouldReturnFocus: false,
+        children: _jsx(Modal.Body, {
+          children: "Foo Bar Baz"
+        })
+      }))),
       findByRole = _render5.findByRole,
       rerender = _render5.rerender;
     const dialog = await findByRole('dialog');
     expect(dialog).toBeInTheDocument();
     expect(dialog.tagName).toBe('SPAN');
-    rerender(_Modal4 || (_Modal4 = /*#__PURE__*/React.createElement(Modal, {
+    rerender(_Modal4 || (_Modal4 = _jsx(Modal, {
       as: "form",
       open: true,
       label: "Modal Dialog",
-      shouldReturnFocus: false
-    }, /*#__PURE__*/React.createElement(Modal.Body, null, "Foo Bar Baz"))));
+      shouldReturnFocus: false,
+      children: _jsx(Modal.Body, {
+        children: "Foo Bar Baz"
+      })
+    })));
     const dialogForm = await findByRole('dialog');
     expect(dialogForm.tagName).toBe('FORM');
   });
   it('should handle null children', async () => {
     const bodyText = 'Modal-body-text';
-    const _render6 = render(/*#__PURE__*/React.createElement(Modal, {
+    const _render6 = render(_jsxs(Modal, {
         open: true,
         label: "Modal Dialog",
-        shouldReturnFocus: false
-      }, null, /*#__PURE__*/React.createElement(Modal.Body, null, bodyText), null)),
+        shouldReturnFocus: false,
+        children: [null, _jsx(Modal.Body, {
+          children: bodyText
+        }), null]
+      })),
       findByText = _render6.findByText;
     const modalBody = await findByText(bodyText);
     expect(modalBody).toBeInTheDocument();
   });
   it('should handle custom children', async () => {
     const bodyText = 'Modal-body-text';
-    const _render7 = render(/*#__PURE__*/React.createElement(Modal, {
+    const _render7 = render(_jsxs(Modal, {
         open: true,
         label: "Modal Dialog",
-        shouldReturnFocus: false
-      }, _View || (_View = /*#__PURE__*/React.createElement(View, null, "This is a custom child")), /*#__PURE__*/React.createElement(Modal.Body, null, bodyText))),
+        shouldReturnFocus: false,
+        children: [_View || (_View = _jsx(View, {
+          children: "This is a custom child"
+        })), _jsx(Modal.Body, {
+          children: bodyText
+        })]
+      })),
       findByText = _render7.findByText;
     const modalBody = await findByText(bodyText);
     const customChild = await findByText('This is a custom child');
@@ -161,11 +189,14 @@ describe('<Modal />', () => {
     expect(customChild).toBeInTheDocument();
   });
   it('should apply the aria attributes', async () => {
-    const _render8 = render(_Modal5 || (_Modal5 = /*#__PURE__*/React.createElement(Modal, {
+    const _render8 = render(_Modal5 || (_Modal5 = _jsx(Modal, {
         open: true,
         label: "Modal Dialog",
-        shouldReturnFocus: false
-      }, /*#__PURE__*/React.createElement(Modal.Body, null, "Foo Bar Baz")))),
+        shouldReturnFocus: false,
+        children: _jsx(Modal.Body, {
+          children: "Foo Bar Baz"
+        })
+      }))),
       findByRole = _render8.findByRole;
     const dialog = await findByRole('dialog');
     expect(dialog).toBeInTheDocument();
@@ -175,15 +206,18 @@ describe('<Modal />', () => {
     const onEnter = vi.fn();
     const onEntering = vi.fn();
     const onEntered = vi.fn();
-    const _render9 = render(/*#__PURE__*/React.createElement(Modal, {
+    const _render9 = render(_jsx(Modal, {
         open: true,
         onEnter: onEnter,
         onEntering: onEntering,
         onEntered: onEntered,
         transition: "fade",
         label: "Modal Dialog",
-        shouldReturnFocus: false
-      }, _Modal$Body2 || (_Modal$Body2 = /*#__PURE__*/React.createElement(Modal.Body, null, "Foo Bar Baz")))),
+        shouldReturnFocus: false,
+        children: _Modal$Body2 || (_Modal$Body2 = _jsx(Modal.Body, {
+          children: "Foo Bar Baz"
+        }))
+      })),
       findByRole = _render9.findByRole;
     const dialog = await findByRole('dialog');
     expect(dialog).toBeInTheDocument();
@@ -195,12 +229,15 @@ describe('<Modal />', () => {
   });
   it('should support onOpen prop', async () => {
     const onOpen = vi.fn();
-    const _render10 = render(/*#__PURE__*/React.createElement(Modal, {
+    const _render10 = render(_jsx(Modal, {
         open: true,
         onOpen: onOpen,
         label: "Modal Dialog",
-        shouldReturnFocus: false
-      }, _Modal$Body3 || (_Modal$Body3 = /*#__PURE__*/React.createElement(Modal.Body, null, "Foo Bar Baz")))),
+        shouldReturnFocus: false,
+        children: _Modal$Body3 || (_Modal$Body3 = _jsx(Modal.Body, {
+          children: "Foo Bar Baz"
+        }))
+      })),
       findByRole = _render10.findByRole;
     const dialog = await findByRole('dialog');
     expect(dialog).toBeInTheDocument();
@@ -210,34 +247,43 @@ describe('<Modal />', () => {
   });
   it('should support onClose prop', async () => {
     const onClose = vi.fn();
-    const _render11 = render(/*#__PURE__*/React.createElement(Modal, {
+    const _render11 = render(_jsx(Modal, {
         open: true,
         onClose: onClose,
         label: "Modal Dialog",
-        shouldReturnFocus: false
-      }, _Modal$Body4 || (_Modal$Body4 = /*#__PURE__*/React.createElement(Modal.Body, null, "Foo Bar Baz")))),
+        shouldReturnFocus: false,
+        children: _Modal$Body4 || (_Modal$Body4 = _jsx(Modal.Body, {
+          children: "Foo Bar Baz"
+        }))
+      })),
       findByRole = _render11.findByRole,
       rerender = _render11.rerender;
     const dialog = await findByRole('dialog');
     expect(dialog).toBeInTheDocument();
-    rerender(/*#__PURE__*/React.createElement(Modal, {
+    rerender(_jsx(Modal, {
       open: false,
       onClose: onClose,
       label: "Modal Dialog",
-      shouldReturnFocus: false
-    }, _Modal$Body5 || (_Modal$Body5 = /*#__PURE__*/React.createElement(Modal.Body, null, "Foo Bar Baz"))));
+      shouldReturnFocus: false,
+      children: _Modal$Body5 || (_Modal$Body5 = _jsx(Modal.Body, {
+        children: "Foo Bar Baz"
+      }))
+    }));
     await waitFor(() => {
       expect(onClose).toHaveBeenCalled();
     });
   });
   it('should dismiss when overlay clicked by default', async () => {
     const onDismiss = vi.fn();
-    const _render12 = render(/*#__PURE__*/React.createElement(Modal, {
+    const _render12 = render(_jsx(Modal, {
         open: true,
         onDismiss: onDismiss,
         label: "Modal Dialog",
-        shouldReturnFocus: false
-      }, _Modal$Body6 || (_Modal$Body6 = /*#__PURE__*/React.createElement(Modal.Body, null, "Modal Text")))),
+        shouldReturnFocus: false,
+        children: _Modal$Body6 || (_Modal$Body6 = _jsx(Modal.Body, {
+          children: "Modal Text"
+        }))
+      })),
       findByText = _render12.findByText;
     const modalBody = await findByText('Modal Text');
     expect(modalBody).toBeInTheDocument();
@@ -249,16 +295,24 @@ describe('<Modal />', () => {
   it('should NOT dismiss when overlay clicked with shouldCloseOnDocumentClick=false', async () => {
     const onDismiss = vi.fn();
     const onClickOuter = vi.fn();
-    const _render13 = render(/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
-        "data-testid": "outer-element",
-        onClick: onClickOuter
-      }, "for dismiss"), /*#__PURE__*/React.createElement(Modal, {
-        open: true,
-        onDismiss: onDismiss,
-        label: "Modal Dialog",
-        shouldReturnFocus: false,
-        shouldCloseOnDocumentClick: false
-      }, _Modal$Body7 || (_Modal$Body7 = /*#__PURE__*/React.createElement(Modal.Body, null, "Foo Bar Baz ", /*#__PURE__*/React.createElement("button", null, "click me")))))),
+    const _render13 = render(_jsxs("div", {
+        children: [_jsx("button", {
+          "data-testid": "outer-element",
+          onClick: onClickOuter,
+          children: "for dismiss"
+        }), _jsx(Modal, {
+          open: true,
+          onDismiss: onDismiss,
+          label: "Modal Dialog",
+          shouldReturnFocus: false,
+          shouldCloseOnDocumentClick: false,
+          children: _Modal$Body7 || (_Modal$Body7 = _jsxs(Modal.Body, {
+            children: ["Foo Bar Baz ", _jsx("button", {
+              children: "click me"
+            })]
+          }))
+        })]
+      })),
       findByRole = _render13.findByRole,
       getByTestId = _render13.getByTestId;
     const dialog = await findByRole('dialog');
@@ -271,22 +325,36 @@ describe('<Modal />', () => {
     });
   });
   it('should render children', async () => {
-    const _render14 = render(_Modal6 || (_Modal6 = /*#__PURE__*/React.createElement(Modal, {
+    const _render14 = render(_Modal6 || (_Modal6 = _jsx(Modal, {
         open: true,
         label: "Modal Dialog",
-        shouldReturnFocus: false
-      }, /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement("button", null, "Cancel"))))),
+        shouldReturnFocus: false,
+        children: _jsx(Modal.Body, {
+          children: _jsx("button", {
+            children: "Cancel"
+          })
+        })
+      }))),
       findByText = _render14.findByText;
     const cancelButton = await findByText('Cancel');
     expect(cancelButton).toBeInTheDocument();
   });
   describe('children validation', () => {
     it('should pass validation when children are valid', async () => {
-      const _render15 = render(_Modal7 || (_Modal7 = /*#__PURE__*/React.createElement(Modal, {
+      const _render15 = render(_Modal7 || (_Modal7 = _jsxs(Modal, {
           open: true,
           label: "Modal Dialog",
-          shouldReturnFocus: false
-        }, /*#__PURE__*/React.createElement(Modal.Header, null, "Hello World"), /*#__PURE__*/React.createElement(Modal.Body, null, "Foo Bar Baz"), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement("button", null, "Cancel"))))),
+          shouldReturnFocus: false,
+          children: [_jsx(Modal.Header, {
+            children: "Hello World"
+          }), _jsx(Modal.Body, {
+            children: "Foo Bar Baz"
+          }), _jsx(Modal.Footer, {
+            children: _jsx("button", {
+              children: "Cancel"
+            })
+          })]
+        }))),
         findByRole = _render15.findByRole;
       const dialog = await findByRole('dialog');
       expect(dialog).toBeInTheDocument();
@@ -296,18 +364,22 @@ describe('<Modal />', () => {
       let headerRef = null;
       let bodyRef = null;
       let footerRef = null;
-      const _render16 = render(/*#__PURE__*/React.createElement(Modal, {
+      const _render16 = render(_jsxs(Modal, {
           open: true,
           label: "Dark Modal",
           shouldReturnFocus: false,
-          variant: "inverse"
-        }, /*#__PURE__*/React.createElement(Modal.Header, {
-          ref: el => headerRef = el
-        }, "header"), /*#__PURE__*/React.createElement(Modal.Body, {
-          ref: el => bodyRef = el
-        }, "body"), /*#__PURE__*/React.createElement(Modal.Footer, {
-          ref: el => footerRef = el
-        }, "footer"))),
+          variant: "inverse",
+          children: [_jsx(Modal.Header, {
+            ref: el => headerRef = el,
+            children: "header"
+          }), _jsx(Modal.Body, {
+            ref: el => bodyRef = el,
+            children: "body"
+          }), _jsx(Modal.Footer, {
+            ref: el => footerRef = el,
+            children: "footer"
+          })]
+        })),
         findByRole = _render16.findByRole;
       const dialog = await findByRole('dialog');
       expect(dialog).toBeInTheDocument();
@@ -317,14 +389,16 @@ describe('<Modal />', () => {
     });
     it('should pass overflow to Modal.Body', async () => {
       let bodyRef = null;
-      const _render17 = render(/*#__PURE__*/React.createElement(Modal, {
+      const _render17 = render(_jsx(Modal, {
           open: true,
           label: "Modal",
           shouldReturnFocus: false,
-          overflow: "fit"
-        }, /*#__PURE__*/React.createElement(Modal.Body, {
-          ref: el => bodyRef = el
-        }, "body"))),
+          overflow: "fit",
+          children: _jsx(Modal.Body, {
+            ref: el => bodyRef = el,
+            children: "body"
+          })
+        })),
         findByRole = _render17.findByRole;
       const dialog = await findByRole('dialog');
       expect(dialog).toBeInTheDocument();
@@ -333,24 +407,38 @@ describe('<Modal />', () => {
   });
   describe('managed focus', () => {
     var _ModalExample2;
-    class ModalExample extends React.Component {
+    class ModalExample extends Component {
       render() {
         const _this$props = this.props,
           label = _this$props.label,
           props = _objectWithoutProperties(_this$props, _excluded);
-        return /*#__PURE__*/React.createElement("div", null, _input || (_input = /*#__PURE__*/React.createElement("input", {
-          type: "text"
-        })), /*#__PURE__*/React.createElement(Modal, Object.assign({
-          label: label
-        }, props), _Modal$Header || (_Modal$Header = /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement("button", null, "Close"))), _Modal$Body8 || (_Modal$Body8 = /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement("input", {
-          type: "text",
-          id: "input-one",
-          "data-testid": "input-first"
-        }), /*#__PURE__*/React.createElement("input", {
-          type: "text",
-          id: "input-two",
-          "data-testid": "input-second"
-        }))), _Modal$Footer || (_Modal$Footer = /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement("button", null, "Cancel")))));
+        return _jsxs("div", {
+          children: [_input || (_input = _jsx("input", {
+            type: "text"
+          })), _jsxs(Modal, {
+            label: label,
+            ...props,
+            children: [_Modal$Header || (_Modal$Header = _jsx(Modal.Header, {
+              children: _jsx("button", {
+                children: "Close"
+              })
+            })), _Modal$Body8 || (_Modal$Body8 = _jsxs(Modal.Body, {
+              children: [_jsx("input", {
+                type: "text",
+                id: "input-one",
+                "data-testid": "input-first"
+              }), _jsx("input", {
+                type: "text",
+                id: "input-two",
+                "data-testid": "input-second"
+              })]
+            })), _Modal$Footer || (_Modal$Footer = _jsx(Modal.Footer, {
+              children: _jsx("button", {
+                children: "Cancel"
+              })
+            }))]
+          })]
+        });
       }
     }
     ModalExample.displayName = "ModalExample";
@@ -359,7 +447,7 @@ describe('<Modal />', () => {
       ...Modal.propTypes
     };
     it('should focus closeButton by default', async () => {
-      const _render18 = render(_ModalExample2 || (_ModalExample2 = /*#__PURE__*/React.createElement(ModalExample, {
+      const _render18 = render(_ModalExample2 || (_ModalExample2 = _jsx(ModalExample, {
           open: true,
           label: "A Modal"
         }))),
@@ -371,7 +459,7 @@ describe('<Modal />', () => {
       });
     });
     it('should take a prop for finding default focus', async () => {
-      const _render19 = render(/*#__PURE__*/React.createElement(ModalExample, {
+      const _render19 = render(_jsx(ModalExample, {
           open: true,
           label: "A Modal",
           defaultFocusElement: () => document.getElementById('input-one')

package/es/Modal/index.js

@@ -25,7 +25,6 @@ var _dec, _dec2, _class, _Modal;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Children, Component, isValidElement } from 'react';
 import { passthroughProps, safeCloneElement } from '@instructure/ui-react-utils';
 import { createChainedFunction } from '@instructure/ui-utils';
@@ -38,10 +37,11 @@ import { Mask } from '@instructure/ui-overlays';
 import { ModalHeader } from './ModalHeader';
 import { ModalBody } from './ModalBody';
 import { ModalFooter } from './ModalFooter';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
 category: components
@@ -172,9 +172,10 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
 
     // Adds the <div> to the beginning of the filteredChildren array
     if (headerAndBody.length > 0) {
-      filteredChildren.unshift(jsx("div", {
-        css: styles === null || styles === void 0 ? void 0 : styles.joinedHeaderAndBody
-      }, headerAndBody));
+      filteredChildren.unshift(_jsx("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.joinedHeaderAndBody,
+        children: headerAndBody
+      }));
     }
     return Children.map(filteredChildren, child => {
       if (!child) return; // ignore null, falsy children
@@ -204,7 +205,8 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
       as = _this$props5.as,
       styles = _this$props5.styles;
     const isFullScreen = size === 'fullscreen';
-    const dialog = jsx(Dialog, Object.assign({}, passthroughProps(props), {
+    const dialog = _jsx(Dialog, {
+      ...passthroughProps(props),
       as: as,
       open: true,
       label: label,
@@ -218,15 +220,18 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
       css: styles === null || styles === void 0 ? void 0 : styles.modal,
       ref: this.contentRef
       // aria-modal="true" see VO bug https://bugs.webkit.org/show_bug.cgi?id=174667
-    }), this.renderChildren());
-    return jsx(Mask, {
+      ,
+      children: this.renderChildren()
+    });
+    return _jsx(Mask, {
       placement: this.maskPlacement,
       fullscreen: constrain === 'window',
       themeOverride: isFullScreen ? {
         borderRadius: '0em',
         borderWidth: '0em'
-      } : {}
-    }, dialog);
+      } : {},
+      children: dialog
+    });
   }
   render() {
     var _this$props$styles;
@@ -247,24 +252,27 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
       overflow = _this$props6.overflow,
       passthroughProps = _objectWithoutProperties(_this$props6, _excluded);
     const portalIsOpen = this.state.open || this.state.transitioning;
-    return jsx(Portal, {
+    return _jsx(Portal, {
       mountNode: mountNode,
       insertAt: insertAt,
       open: portalIsOpen,
-      onOpen: this.handlePortalOpen
-    }, jsx(Transition, {
-      in: open,
-      transitionOnMount: true,
-      type: transition,
-      onEnter: onEnter,
-      onEntering: onEntering,
-      onEntered: createChainedFunction(this.handleTransitionComplete, onEntered, onOpen),
-      onExit: onExit,
-      onExiting: onExiting,
-      onExited: createChainedFunction(this.handleTransitionComplete, onExited, onClose)
-    }, constrain === 'parent' ? jsx("span", {
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.constrainContext
-    }, this.renderDialog(passthroughProps)) : this.renderDialog(passthroughProps)));
+      onOpen: this.handlePortalOpen,
+      children: _jsx(Transition, {
+        in: open,
+        transitionOnMount: true,
+        type: transition,
+        onEnter: onEnter,
+        onEntering: onEntering,
+        onEntered: createChainedFunction(this.handleTransitionComplete, onEntered, onOpen),
+        onExit: onExit,
+        onExiting: onExiting,
+        onExited: createChainedFunction(this.handleTransitionComplete, onExited, onClose),
+        children: constrain === 'parent' ? _jsx("span", {
+          css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.constrainContext,
+          children: this.renderDialog(passthroughProps)
+        }) : this.renderDialog(passthroughProps)
+      })
+    });
   }
 }, _Modal.displayName = "Modal", _Modal.componentId = 'Modal', _Modal.propTypes = propTypes, _Modal.allowedProps = allowedProps, _Modal.defaultProps = {
   open: false,