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

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

@@ -2,13 +2,14 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = require("react");
 var _react2 = require("@testing-library/react");
 var _vitest = require("vitest");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
 var _index = require("../index");
 var _View2 = require("@instructure/ui-view/lib/View");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["label"];
 var _Modal, _Modal2, _Modal$Body, _Modal3, _Modal4, _View, _Modal5, _Modal$Body2, _Modal$Body3, _Modal$Body4, _Modal$Body5, _Modal$Body6, _Modal$Body7, _Modal6, _Modal7, _input, _Modal$Header, _Modal$Body8, _Modal$Footer;
 /*
@@ -58,25 +59,31 @@ describe('<Modal />', () => {
     window.scroll = originalScroll;
   });
   it('should render nothing and have a node with no parent when closed', () => {
-    const _render = (0, _react2.render)(_Modal || (_Modal = /*#__PURE__*/_react.default.createElement(_index.Modal, {
+    const _render = (0, _react2.render)(_Modal || (_Modal = (0, _jsxRuntime.jsx)(_index.Modal, {
         label: "Modal Dialog",
-        shouldReturnFocus: false
-      }, /*#__PURE__*/_react.default.createElement(_index.Modal.Body, null, "Foo Bar Baz")))),
+        shouldReturnFocus: false,
+        children: (0, _jsxRuntime.jsx)(_index.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 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Modal, {
+    const _render2 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Modal, {
         open: true,
         size: "small",
         label: "Modal Dialog",
         shouldReturnFocus: false,
         themeOverride: {
           fontFamily: testFont
-        }
-      }, /*#__PURE__*/_react.default.createElement(_index.Modal.Body, null, bodyText))),
+        },
+        children: (0, _jsxRuntime.jsx)(_index.Modal.Body, {
+          children: bodyText
+        })
+      })),
       findByText = _render2.findByText,
       findByRole = _render2.findByRole;
     const modalBody = await findByText(bodyText);
@@ -86,12 +93,15 @@ describe('<Modal />', () => {
     expect(dialogStyle.fontFamily).toBe(testFont);
   });
   it('should render its own positioning context if constrained to parent', async () => {
-    const _render3 = (0, _react2.render)(_Modal2 || (_Modal2 = /*#__PURE__*/_react.default.createElement(_index.Modal, {
+    const _render3 = (0, _react2.render)(_Modal2 || (_Modal2 = (0, _jsxRuntime.jsx)(_index.Modal, {
         open: true,
         label: "Modal Dialog",
         shouldReturnFocus: false,
-        constrain: "parent"
-      }, /*#__PURE__*/_react.default.createElement(_index.Modal.Body, null, "Foo Bar Baz")))),
+        constrain: "parent",
+        children: (0, _jsxRuntime.jsx)(_index.Modal.Body, {
+          children: "Foo Bar Baz"
+        })
+      }))),
       findByRole = _render3.findByRole;
     const dialog = await findByRole('dialog');
     const constrain = document.querySelector("[class*='constrainContext']");
@@ -99,19 +109,23 @@ describe('<Modal />', () => {
     expect(constrain).toBeInTheDocument();
   });
   it("should not inherit its parent's font color", async () => {
-    const _render4 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement("div", {
+    const _render4 = (0, _react2.render)((0, _jsxRuntime.jsx)("div", {
         style: {
           color: 'rgb(255, 255, 255)'
-        }
-      }, /*#__PURE__*/_react.default.createElement(_index.Modal, {
-        open: true,
-        label: "Modal Dialog",
-        shouldReturnFocus: false,
-        constrain: "parent",
-        themeOverride: {
-          textColor: 'rgb(0, 0, 0)'
-        }
-      }, _Modal$Body || (_Modal$Body = /*#__PURE__*/_react.default.createElement(_index.Modal.Body, null, "Foo Bar Baz"))))),
+        },
+        children: (0, _jsxRuntime.jsx)(_index.Modal, {
+          open: true,
+          label: "Modal Dialog",
+          shouldReturnFocus: false,
+          constrain: "parent",
+          themeOverride: {
+            textColor: 'rgb(0, 0, 0)'
+          },
+          children: _Modal$Body || (_Modal$Body = (0, _jsxRuntime.jsx)(_index.Modal.Body, {
+            children: "Foo Bar Baz"
+          }))
+        })
+      })),
       findByRole = _render4.findByRole;
     const dialog = await findByRole('dialog');
     const dialogStyle = window.getComputedStyle(dialog);
@@ -119,43 +133,57 @@ describe('<Modal />', () => {
     expect(dialogStyle.color).toBe('rgb(0, 0, 0)');
   });
   it('should pass `as` prop to the dialog', async () => {
-    const _render5 = (0, _react2.render)(_Modal3 || (_Modal3 = /*#__PURE__*/_react.default.createElement(_index.Modal, {
+    const _render5 = (0, _react2.render)(_Modal3 || (_Modal3 = (0, _jsxRuntime.jsx)(_index.Modal, {
         open: true,
         label: "Modal Dialog",
-        shouldReturnFocus: false
-      }, /*#__PURE__*/_react.default.createElement(_index.Modal.Body, null, "Foo Bar Baz")))),
+        shouldReturnFocus: false,
+        children: (0, _jsxRuntime.jsx)(_index.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.default.createElement(_index.Modal, {
+    rerender(_Modal4 || (_Modal4 = (0, _jsxRuntime.jsx)(_index.Modal, {
       as: "form",
       open: true,
       label: "Modal Dialog",
-      shouldReturnFocus: false
-    }, /*#__PURE__*/_react.default.createElement(_index.Modal.Body, null, "Foo Bar Baz"))));
+      shouldReturnFocus: false,
+      children: (0, _jsxRuntime.jsx)(_index.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 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Modal, {
+    const _render6 = (0, _react2.render)((0, _jsxRuntime.jsxs)(_index.Modal, {
         open: true,
         label: "Modal Dialog",
-        shouldReturnFocus: false
-      }, null, /*#__PURE__*/_react.default.createElement(_index.Modal.Body, null, bodyText), null)),
+        shouldReturnFocus: false,
+        children: [null, (0, _jsxRuntime.jsx)(_index.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 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Modal, {
+    const _render7 = (0, _react2.render)((0, _jsxRuntime.jsxs)(_index.Modal, {
         open: true,
         label: "Modal Dialog",
-        shouldReturnFocus: false
-      }, _View || (_View = /*#__PURE__*/_react.default.createElement(_View2.View, null, "This is a custom child")), /*#__PURE__*/_react.default.createElement(_index.Modal.Body, null, bodyText))),
+        shouldReturnFocus: false,
+        children: [_View || (_View = (0, _jsxRuntime.jsx)(_View2.View, {
+          children: "This is a custom child"
+        })), (0, _jsxRuntime.jsx)(_index.Modal.Body, {
+          children: bodyText
+        })]
+      })),
       findByText = _render7.findByText;
     const modalBody = await findByText(bodyText);
     const customChild = await findByText('This is a custom child');
@@ -163,11 +191,14 @@ describe('<Modal />', () => {
     expect(customChild).toBeInTheDocument();
   });
   it('should apply the aria attributes', async () => {
-    const _render8 = (0, _react2.render)(_Modal5 || (_Modal5 = /*#__PURE__*/_react.default.createElement(_index.Modal, {
+    const _render8 = (0, _react2.render)(_Modal5 || (_Modal5 = (0, _jsxRuntime.jsx)(_index.Modal, {
         open: true,
         label: "Modal Dialog",
-        shouldReturnFocus: false
-      }, /*#__PURE__*/_react.default.createElement(_index.Modal.Body, null, "Foo Bar Baz")))),
+        shouldReturnFocus: false,
+        children: (0, _jsxRuntime.jsx)(_index.Modal.Body, {
+          children: "Foo Bar Baz"
+        })
+      }))),
       findByRole = _render8.findByRole;
     const dialog = await findByRole('dialog');
     expect(dialog).toBeInTheDocument();
@@ -177,15 +208,18 @@ describe('<Modal />', () => {
     const onEnter = _vitest.vi.fn();
     const onEntering = _vitest.vi.fn();
     const onEntered = _vitest.vi.fn();
-    const _render9 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Modal, {
+    const _render9 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Modal, {
         open: true,
         onEnter: onEnter,
         onEntering: onEntering,
         onEntered: onEntered,
         transition: "fade",
         label: "Modal Dialog",
-        shouldReturnFocus: false
-      }, _Modal$Body2 || (_Modal$Body2 = /*#__PURE__*/_react.default.createElement(_index.Modal.Body, null, "Foo Bar Baz")))),
+        shouldReturnFocus: false,
+        children: _Modal$Body2 || (_Modal$Body2 = (0, _jsxRuntime.jsx)(_index.Modal.Body, {
+          children: "Foo Bar Baz"
+        }))
+      })),
       findByRole = _render9.findByRole;
     const dialog = await findByRole('dialog');
     expect(dialog).toBeInTheDocument();
@@ -197,12 +231,15 @@ describe('<Modal />', () => {
   });
   it('should support onOpen prop', async () => {
     const onOpen = _vitest.vi.fn();
-    const _render10 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Modal, {
+    const _render10 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Modal, {
         open: true,
         onOpen: onOpen,
         label: "Modal Dialog",
-        shouldReturnFocus: false
-      }, _Modal$Body3 || (_Modal$Body3 = /*#__PURE__*/_react.default.createElement(_index.Modal.Body, null, "Foo Bar Baz")))),
+        shouldReturnFocus: false,
+        children: _Modal$Body3 || (_Modal$Body3 = (0, _jsxRuntime.jsx)(_index.Modal.Body, {
+          children: "Foo Bar Baz"
+        }))
+      })),
       findByRole = _render10.findByRole;
     const dialog = await findByRole('dialog');
     expect(dialog).toBeInTheDocument();
@@ -212,34 +249,43 @@ describe('<Modal />', () => {
   });
   it('should support onClose prop', async () => {
     const onClose = _vitest.vi.fn();
-    const _render11 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Modal, {
+    const _render11 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Modal, {
         open: true,
         onClose: onClose,
         label: "Modal Dialog",
-        shouldReturnFocus: false
-      }, _Modal$Body4 || (_Modal$Body4 = /*#__PURE__*/_react.default.createElement(_index.Modal.Body, null, "Foo Bar Baz")))),
+        shouldReturnFocus: false,
+        children: _Modal$Body4 || (_Modal$Body4 = (0, _jsxRuntime.jsx)(_index.Modal.Body, {
+          children: "Foo Bar Baz"
+        }))
+      })),
       findByRole = _render11.findByRole,
       rerender = _render11.rerender;
     const dialog = await findByRole('dialog');
     expect(dialog).toBeInTheDocument();
-    rerender(/*#__PURE__*/_react.default.createElement(_index.Modal, {
+    rerender((0, _jsxRuntime.jsx)(_index.Modal, {
       open: false,
       onClose: onClose,
       label: "Modal Dialog",
-      shouldReturnFocus: false
-    }, _Modal$Body5 || (_Modal$Body5 = /*#__PURE__*/_react.default.createElement(_index.Modal.Body, null, "Foo Bar Baz"))));
+      shouldReturnFocus: false,
+      children: _Modal$Body5 || (_Modal$Body5 = (0, _jsxRuntime.jsx)(_index.Modal.Body, {
+        children: "Foo Bar Baz"
+      }))
+    }));
     await (0, _react2.waitFor)(() => {
       expect(onClose).toHaveBeenCalled();
     });
   });
   it('should dismiss when overlay clicked by default', async () => {
     const onDismiss = _vitest.vi.fn();
-    const _render12 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Modal, {
+    const _render12 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Modal, {
         open: true,
         onDismiss: onDismiss,
         label: "Modal Dialog",
-        shouldReturnFocus: false
-      }, _Modal$Body6 || (_Modal$Body6 = /*#__PURE__*/_react.default.createElement(_index.Modal.Body, null, "Modal Text")))),
+        shouldReturnFocus: false,
+        children: _Modal$Body6 || (_Modal$Body6 = (0, _jsxRuntime.jsx)(_index.Modal.Body, {
+          children: "Modal Text"
+        }))
+      })),
       findByText = _render12.findByText;
     const modalBody = await findByText('Modal Text');
     expect(modalBody).toBeInTheDocument();
@@ -251,16 +297,24 @@ describe('<Modal />', () => {
   it('should NOT dismiss when overlay clicked with shouldCloseOnDocumentClick=false', async () => {
     const onDismiss = _vitest.vi.fn();
     const onClickOuter = _vitest.vi.fn();
-    const _render13 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
-        "data-testid": "outer-element",
-        onClick: onClickOuter
-      }, "for dismiss"), /*#__PURE__*/_react.default.createElement(_index.Modal, {
-        open: true,
-        onDismiss: onDismiss,
-        label: "Modal Dialog",
-        shouldReturnFocus: false,
-        shouldCloseOnDocumentClick: false
-      }, _Modal$Body7 || (_Modal$Body7 = /*#__PURE__*/_react.default.createElement(_index.Modal.Body, null, "Foo Bar Baz ", /*#__PURE__*/_react.default.createElement("button", null, "click me")))))),
+    const _render13 = (0, _react2.render)((0, _jsxRuntime.jsxs)("div", {
+        children: [(0, _jsxRuntime.jsx)("button", {
+          "data-testid": "outer-element",
+          onClick: onClickOuter,
+          children: "for dismiss"
+        }), (0, _jsxRuntime.jsx)(_index.Modal, {
+          open: true,
+          onDismiss: onDismiss,
+          label: "Modal Dialog",
+          shouldReturnFocus: false,
+          shouldCloseOnDocumentClick: false,
+          children: _Modal$Body7 || (_Modal$Body7 = (0, _jsxRuntime.jsxs)(_index.Modal.Body, {
+            children: ["Foo Bar Baz ", (0, _jsxRuntime.jsx)("button", {
+              children: "click me"
+            })]
+          }))
+        })]
+      })),
       findByRole = _render13.findByRole,
       getByTestId = _render13.getByTestId;
     const dialog = await findByRole('dialog');
@@ -273,22 +327,36 @@ describe('<Modal />', () => {
     });
   });
   it('should render children', async () => {
-    const _render14 = (0, _react2.render)(_Modal6 || (_Modal6 = /*#__PURE__*/_react.default.createElement(_index.Modal, {
+    const _render14 = (0, _react2.render)(_Modal6 || (_Modal6 = (0, _jsxRuntime.jsx)(_index.Modal, {
         open: true,
         label: "Modal Dialog",
-        shouldReturnFocus: false
-      }, /*#__PURE__*/_react.default.createElement(_index.Modal.Body, null, /*#__PURE__*/_react.default.createElement("button", null, "Cancel"))))),
+        shouldReturnFocus: false,
+        children: (0, _jsxRuntime.jsx)(_index.Modal.Body, {
+          children: (0, _jsxRuntime.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 = (0, _react2.render)(_Modal7 || (_Modal7 = /*#__PURE__*/_react.default.createElement(_index.Modal, {
+      const _render15 = (0, _react2.render)(_Modal7 || (_Modal7 = (0, _jsxRuntime.jsxs)(_index.Modal, {
           open: true,
           label: "Modal Dialog",
-          shouldReturnFocus: false
-        }, /*#__PURE__*/_react.default.createElement(_index.Modal.Header, null, "Hello World"), /*#__PURE__*/_react.default.createElement(_index.Modal.Body, null, "Foo Bar Baz"), /*#__PURE__*/_react.default.createElement(_index.Modal.Footer, null, /*#__PURE__*/_react.default.createElement("button", null, "Cancel"))))),
+          shouldReturnFocus: false,
+          children: [(0, _jsxRuntime.jsx)(_index.Modal.Header, {
+            children: "Hello World"
+          }), (0, _jsxRuntime.jsx)(_index.Modal.Body, {
+            children: "Foo Bar Baz"
+          }), (0, _jsxRuntime.jsx)(_index.Modal.Footer, {
+            children: (0, _jsxRuntime.jsx)("button", {
+              children: "Cancel"
+            })
+          })]
+        }))),
         findByRole = _render15.findByRole;
       const dialog = await findByRole('dialog');
       expect(dialog).toBeInTheDocument();
@@ -298,18 +366,22 @@ describe('<Modal />', () => {
       let headerRef = null;
       let bodyRef = null;
       let footerRef = null;
-      const _render16 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Modal, {
+      const _render16 = (0, _react2.render)((0, _jsxRuntime.jsxs)(_index.Modal, {
           open: true,
           label: "Dark Modal",
           shouldReturnFocus: false,
-          variant: "inverse"
-        }, /*#__PURE__*/_react.default.createElement(_index.Modal.Header, {
-          ref: el => headerRef = el
-        }, "header"), /*#__PURE__*/_react.default.createElement(_index.Modal.Body, {
-          ref: el => bodyRef = el
-        }, "body"), /*#__PURE__*/_react.default.createElement(_index.Modal.Footer, {
-          ref: el => footerRef = el
-        }, "footer"))),
+          variant: "inverse",
+          children: [(0, _jsxRuntime.jsx)(_index.Modal.Header, {
+            ref: el => headerRef = el,
+            children: "header"
+          }), (0, _jsxRuntime.jsx)(_index.Modal.Body, {
+            ref: el => bodyRef = el,
+            children: "body"
+          }), (0, _jsxRuntime.jsx)(_index.Modal.Footer, {
+            ref: el => footerRef = el,
+            children: "footer"
+          })]
+        })),
         findByRole = _render16.findByRole;
       const dialog = await findByRole('dialog');
       expect(dialog).toBeInTheDocument();
@@ -319,14 +391,16 @@ describe('<Modal />', () => {
     });
     it('should pass overflow to Modal.Body', async () => {
       let bodyRef = null;
-      const _render17 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Modal, {
+      const _render17 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Modal, {
           open: true,
           label: "Modal",
           shouldReturnFocus: false,
-          overflow: "fit"
-        }, /*#__PURE__*/_react.default.createElement(_index.Modal.Body, {
-          ref: el => bodyRef = el
-        }, "body"))),
+          overflow: "fit",
+          children: (0, _jsxRuntime.jsx)(_index.Modal.Body, {
+            ref: el => bodyRef = el,
+            children: "body"
+          })
+        })),
         findByRole = _render17.findByRole;
       const dialog = await findByRole('dialog');
       expect(dialog).toBeInTheDocument();
@@ -335,24 +409,38 @@ describe('<Modal />', () => {
   });
   describe('managed focus', () => {
     var _ModalExample2;
-    class ModalExample extends _react.default.Component {
+    class ModalExample extends _react.Component {
       render() {
         const _this$props = this.props,
           label = _this$props.label,
           props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-        return /*#__PURE__*/_react.default.createElement("div", null, _input || (_input = /*#__PURE__*/_react.default.createElement("input", {
-          type: "text"
-        })), /*#__PURE__*/_react.default.createElement(_index.Modal, Object.assign({
-          label: label
-        }, props), _Modal$Header || (_Modal$Header = /*#__PURE__*/_react.default.createElement(_index.Modal.Header, null, /*#__PURE__*/_react.default.createElement("button", null, "Close"))), _Modal$Body8 || (_Modal$Body8 = /*#__PURE__*/_react.default.createElement(_index.Modal.Body, null, /*#__PURE__*/_react.default.createElement("input", {
-          type: "text",
-          id: "input-one",
-          "data-testid": "input-first"
-        }), /*#__PURE__*/_react.default.createElement("input", {
-          type: "text",
-          id: "input-two",
-          "data-testid": "input-second"
-        }))), _Modal$Footer || (_Modal$Footer = /*#__PURE__*/_react.default.createElement(_index.Modal.Footer, null, /*#__PURE__*/_react.default.createElement("button", null, "Cancel")))));
+        return (0, _jsxRuntime.jsxs)("div", {
+          children: [_input || (_input = (0, _jsxRuntime.jsx)("input", {
+            type: "text"
+          })), (0, _jsxRuntime.jsxs)(_index.Modal, {
+            label: label,
+            ...props,
+            children: [_Modal$Header || (_Modal$Header = (0, _jsxRuntime.jsx)(_index.Modal.Header, {
+              children: (0, _jsxRuntime.jsx)("button", {
+                children: "Close"
+              })
+            })), _Modal$Body8 || (_Modal$Body8 = (0, _jsxRuntime.jsxs)(_index.Modal.Body, {
+              children: [(0, _jsxRuntime.jsx)("input", {
+                type: "text",
+                id: "input-one",
+                "data-testid": "input-first"
+              }), (0, _jsxRuntime.jsx)("input", {
+                type: "text",
+                id: "input-two",
+                "data-testid": "input-second"
+              })]
+            })), _Modal$Footer || (_Modal$Footer = (0, _jsxRuntime.jsx)(_index.Modal.Footer, {
+              children: (0, _jsxRuntime.jsx)("button", {
+                children: "Cancel"
+              })
+            }))]
+          })]
+        });
       }
     }
     ModalExample.displayName = "ModalExample";
@@ -361,7 +449,7 @@ describe('<Modal />', () => {
       ..._index.Modal.propTypes
     };
     it('should focus closeButton by default', async () => {
-      const _render18 = (0, _react2.render)(_ModalExample2 || (_ModalExample2 = /*#__PURE__*/_react.default.createElement(ModalExample, {
+      const _render18 = (0, _react2.render)(_ModalExample2 || (_ModalExample2 = (0, _jsxRuntime.jsx)(ModalExample, {
           open: true,
           label: "A Modal"
         }))),
@@ -373,7 +461,7 @@ describe('<Modal />', () => {
       });
     });
     it('should take a prop for finding default focus', async () => {
-      const _render19 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(ModalExample, {
+      const _render19 = (0, _react2.render)((0, _jsxRuntime.jsx)(ModalExample, {
           open: true,
           label: "A Modal",
           defaultFocusElement: () => document.getElementById('input-one')

package/lib/Modal/index.js

@@ -42,6 +42,7 @@ var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["open", "onOpen", "onClose", "mountNode", "insertAt", "transition", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "constrain", "overflow"];
 var _dec, _dec2, _class, _Modal;
 /*
@@ -67,7 +68,6 @@ var _dec, _dec2, _class, _Modal;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
 /**
 ---
 category: components
@@ -198,9 +198,10 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
 
     // Adds the <div> to the beginning of the filteredChildren array
     if (headerAndBody.length > 0) {
-      filteredChildren.unshift((0, _emotion.jsx)("div", {
-        css: styles === null || styles === void 0 ? void 0 : styles.joinedHeaderAndBody
-      }, headerAndBody));
+      filteredChildren.unshift((0, _jsxRuntime.jsx)("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.joinedHeaderAndBody,
+        children: headerAndBody
+      }));
     }
     return _react.Children.map(filteredChildren, child => {
       if (!child) return; // ignore null, falsy children
@@ -230,7 +231,8 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
       as = _this$props5.as,
       styles = _this$props5.styles;
     const isFullScreen = size === 'fullscreen';
-    const dialog = (0, _emotion.jsx)(_Dialog.Dialog, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
+    const dialog = (0, _jsxRuntime.jsx)(_Dialog.Dialog, {
+      ...(0, _passthroughProps.passthroughProps)(props),
       as: as,
       open: true,
       label: label,
@@ -244,15 +246,18 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
       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 (0, _emotion.jsx)(_Mask.Mask, {
+      ,
+      children: this.renderChildren()
+    });
+    return (0, _jsxRuntime.jsx)(_Mask.Mask, {
       placement: this.maskPlacement,
       fullscreen: constrain === 'window',
       themeOverride: isFullScreen ? {
         borderRadius: '0em',
         borderWidth: '0em'
-      } : {}
-    }, dialog);
+      } : {},
+      children: dialog
+    });
   }
   render() {
     var _this$props$styles;
@@ -273,24 +278,27 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
       overflow = _this$props6.overflow,
       passthroughProps = (0, _objectWithoutProperties2.default)(_this$props6, _excluded);
     const portalIsOpen = this.state.open || this.state.transitioning;
-    return (0, _emotion.jsx)(_Portal.Portal, {
+    return (0, _jsxRuntime.jsx)(_Portal.Portal, {
       mountNode: mountNode,
       insertAt: insertAt,
       open: portalIsOpen,
-      onOpen: this.handlePortalOpen
-    }, (0, _emotion.jsx)(_Transition.Transition, {
-      in: open,
-      transitionOnMount: true,
-      type: transition,
-      onEnter: onEnter,
-      onEntering: onEntering,
-      onEntered: (0, _createChainedFunction.createChainedFunction)(this.handleTransitionComplete, onEntered, onOpen),
-      onExit: onExit,
-      onExiting: onExiting,
-      onExited: (0, _createChainedFunction.createChainedFunction)(this.handleTransitionComplete, onExited, onClose)
-    }, constrain === 'parent' ? (0, _emotion.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: (0, _jsxRuntime.jsx)(_Transition.Transition, {
+        in: open,
+        transitionOnMount: true,
+        type: transition,
+        onEnter: onEnter,
+        onEntering: onEntering,
+        onEntered: (0, _createChainedFunction.createChainedFunction)(this.handleTransitionComplete, onEntered, onOpen),
+        onExit: onExit,
+        onExiting: onExiting,
+        onExited: (0, _createChainedFunction.createChainedFunction)(this.handleTransitionComplete, onExited, onClose),
+        children: constrain === 'parent' ? (0, _jsxRuntime.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 = _props.propTypes, _Modal.allowedProps = _props.allowedProps, _Modal.defaultProps = {
   open: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-modal",
-  "version": "10.16.1-snapshot-0",
+  "version": "10.16.1",
   "description": "A component for displaying content in a dialog overlay",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,30 +24,30 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.16.1-snapshot-0",
-    "@instructure/emotion": "10.16.1-snapshot-0",
-    "@instructure/shared-types": "10.16.1-snapshot-0",
-    "@instructure/ui-buttons": "10.16.1-snapshot-0",
-    "@instructure/ui-dialog": "10.16.1-snapshot-0",
-    "@instructure/ui-dom-utils": "10.16.1-snapshot-0",
-    "@instructure/ui-motion": "10.16.1-snapshot-0",
-    "@instructure/ui-overlays": "10.16.1-snapshot-0",
-    "@instructure/ui-portal": "10.16.1-snapshot-0",
-    "@instructure/ui-prop-types": "10.16.1-snapshot-0",
-    "@instructure/ui-react-utils": "10.16.1-snapshot-0",
-    "@instructure/ui-testable": "10.16.1-snapshot-0",
-    "@instructure/ui-utils": "10.16.1-snapshot-0",
-    "@instructure/ui-view": "10.16.1-snapshot-0",
+    "@instructure/console": "10.16.1",
+    "@instructure/emotion": "10.16.1",
+    "@instructure/shared-types": "10.16.1",
+    "@instructure/ui-buttons": "10.16.1",
+    "@instructure/ui-dialog": "10.16.1",
+    "@instructure/ui-dom-utils": "10.16.1",
+    "@instructure/ui-motion": "10.16.1",
+    "@instructure/ui-overlays": "10.16.1",
+    "@instructure/ui-portal": "10.16.1",
+    "@instructure/ui-prop-types": "10.16.1",
+    "@instructure/ui-react-utils": "10.16.1",
+    "@instructure/ui-testable": "10.16.1",
+    "@instructure/ui-utils": "10.16.1",
+    "@instructure/ui-view": "10.16.1",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {
     "react": ">=16.14 <=18"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.16.1-snapshot-0",
-    "@instructure/ui-color-utils": "10.16.1-snapshot-0",
-    "@instructure/ui-position": "10.16.1-snapshot-0",
-    "@instructure/ui-themes": "10.16.1-snapshot-0",
+    "@instructure/ui-babel-preset": "10.16.1",
+    "@instructure/ui-color-utils": "10.16.1",
+    "@instructure/ui-position": "10.16.1",
+    "@instructure/ui-themes": "10.16.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",