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

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

@@ -1,8 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
+var _react = require("@testing-library/react");
 var _vitest = require("vitest");
 require("@testing-library/jest-dom");
 var _uiColorUtils = require("@instructure/ui-color-utils");
@@ -10,6 +9,7 @@ var _uiThemes = _interopRequireDefault(require("@instructure/ui-themes"));
 var _View = require("@instructure/ui-view/lib/View");
 var _index = require("../index");
 var _theme = _interopRequireDefault(require("../theme"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _ModalBody, _ModalBody2, _ModalBody3;
 /*
  * The MIT License (MIT)
@@ -37,16 +37,19 @@ var _ModalBody, _ModalBody2, _ModalBody3;
 const BODY_TEXT = 'Modal-body-text';
 describe('<ModalBody />', () => {
   it('should render', async () => {
-    const _render = (0, _react2.render)(_ModalBody || (_ModalBody = /*#__PURE__*/_react.default.createElement(_index.ModalBody, null, BODY_TEXT))),
+    const _render = (0, _react.render)(_ModalBody || (_ModalBody = (0, _jsxRuntime.jsx)(_index.ModalBody, {
+        children: BODY_TEXT
+      }))),
       findByText = _render.findByText;
     const modalBody = await findByText(BODY_TEXT);
     expect(modalBody).toBeInTheDocument();
   });
   it('should set inverse styles', async () => {
     const themeVariables = (0, _theme.default)(_uiThemes.default);
-    const _render2 = (0, _react2.render)(_ModalBody2 || (_ModalBody2 = /*#__PURE__*/_react.default.createElement(_index.ModalBody, {
-        variant: "inverse"
-      }, BODY_TEXT))),
+    const _render2 = (0, _react.render)(_ModalBody2 || (_ModalBody2 = (0, _jsxRuntime.jsx)(_index.ModalBody, {
+        variant: "inverse",
+        children: BODY_TEXT
+      }))),
       findByText = _render2.findByText;
     const modalBody = await findByText(BODY_TEXT);
     const modalBodyStyle = window.getComputedStyle(modalBody);
@@ -55,14 +58,16 @@ describe('<ModalBody />', () => {
     expect(bodyBackground).toBe(themeVariables.inverseBackground);
   });
   it('should set the same width and height as the parent when overflow is set to fit', async () => {
-    const _render3 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement("div", {
+    const _render3 = (0, _react.render)((0, _jsxRuntime.jsx)("div", {
         style: {
           width: '500px',
           height: '600px'
-        }
-      }, _ModalBody3 || (_ModalBody3 = /*#__PURE__*/_react.default.createElement(_index.ModalBody, {
-        overflow: "fit"
-      }, BODY_TEXT)))),
+        },
+        children: _ModalBody3 || (_ModalBody3 = (0, _jsxRuntime.jsx)(_index.ModalBody, {
+          overflow: "fit",
+          children: BODY_TEXT
+        }))
+      })),
       findByText = _render3.findByText;
     const modalBody = await findByText(BODY_TEXT);
     const modalBodyStyle = window.getComputedStyle(modalBody);
@@ -83,7 +88,9 @@ describe('<ModalBody />', () => {
           const props = {
             [prop]: allowedProps[prop]
           };
-          (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ModalBody, props));
+          (0, _react.render)((0, _jsxRuntime.jsx)(_index.ModalBody, {
+            ...props
+          }));
           expect(consoleErrorSpy).not.toHaveBeenCalled();
           consoleErrorSpy.mockRestore();
         });
@@ -94,7 +101,9 @@ describe('<ModalBody />', () => {
           const props = {
             [prop]: 'NOT_ALLOWED_VALUE'
           };
-          (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ModalBody, props));
+          (0, _react.render)((0, _jsxRuntime.jsx)(_index.ModalBody, {
+            ...props
+          }));
           expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
           consoleErrorSpy.mockRestore();
         });

package/lib/Modal/ModalBody/index.js

@@ -15,6 +15,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 = ["as", "elementRef", "overflow", "variant", "padding", "children"];
 var _dec, _dec2, _class, _ModalBody;
 /*
@@ -40,7 +41,6 @@ var _dec, _dec2, _class, _ModalBody;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
 /**
 ---
 parent: Modal
@@ -91,7 +91,8 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyle)(_styles.defa
       rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(rest, ModalBody.allowedProps), ModalBody);
     const isFit = overflow === 'fit';
-    return (0, _emotion.jsx)(_View.View, Object.assign({}, passthroughProps, {
+    return (0, _jsxRuntime.jsx)(_View.View, {
+      ...passthroughProps,
       display: "block",
       width: isFit ? '100%' : void 0,
       height: isFit ? '100%' : void 0,
@@ -103,9 +104,12 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyle)(_styles.defa
       //  the container focusable when it is scrollable.
       //  This is a feature, not a bug, but it prevents VoiceOver
       //  to correctly focus inside the body in other browsers.
-    }, this.state.isFirefox && {
-      tabIndex: -1
-    }), children);
+      ,
+      ...(this.state.isFirefox && {
+        tabIndex: -1
+      }),
+      children: children
+    });
   }
 }, _ModalBody.displayName = "ModalBody", _ModalBody.componentId = 'Modal.Body', _ModalBody.propTypes = _props.propTypes, _ModalBody.allowedProps = _props.allowedProps, _ModalBody.defaultProps = {
   padding: 'medium',

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

@@ -1,13 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
+var _react = require("@testing-library/react");
 require("@testing-library/jest-dom");
 var _uiThemes = _interopRequireDefault(require("@instructure/ui-themes"));
 var _uiColorUtils = require("@instructure/ui-color-utils");
 var _index = require("../index");
 var _theme = _interopRequireDefault(require("../theme"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _ModalFooter, _ModalFooter2;
 /*
  * The MIT License (MIT)
@@ -35,16 +35,19 @@ var _ModalFooter, _ModalFooter2;
 const FOOTER_TEXT = 'Modal-footer-text';
 describe('<ModalFooter />', () => {
   it('should render', async () => {
-    const _render = (0, _react2.render)(_ModalFooter || (_ModalFooter = /*#__PURE__*/_react.default.createElement(_index.ModalFooter, null, FOOTER_TEXT))),
+    const _render = (0, _react.render)(_ModalFooter || (_ModalFooter = (0, _jsxRuntime.jsx)(_index.ModalFooter, {
+        children: FOOTER_TEXT
+      }))),
       findByText = _render.findByText;
     const modalFooter = await findByText(FOOTER_TEXT);
     expect(modalFooter).toBeInTheDocument();
   });
   it('should set inverse styles', async () => {
     const themeVariables = (0, _theme.default)(_uiThemes.default);
-    const _render2 = (0, _react2.render)(_ModalFooter2 || (_ModalFooter2 = /*#__PURE__*/_react.default.createElement(_index.ModalFooter, {
-        variant: "inverse"
-      }, FOOTER_TEXT))),
+    const _render2 = (0, _react.render)(_ModalFooter2 || (_ModalFooter2 = (0, _jsxRuntime.jsx)(_index.ModalFooter, {
+        variant: "inverse",
+        children: FOOTER_TEXT
+      }))),
       findByText = _render2.findByText;
     const modalFooter = await findByText(FOOTER_TEXT);
     const modalFooterStyle = window.getComputedStyle(modalFooter);

package/lib/Modal/ModalFooter/index.js

@@ -13,6 +13,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 = ["children"];
 var _dec, _dec2, _class, _ModalFooter;
 /*
@@ -38,7 +39,6 @@ var _dec, _dec2, _class, _ModalFooter;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
 /**
 ---
 parent: Modal
@@ -66,11 +66,12 @@ let ModalFooter = exports.ModalFooter = (_dec = (0, _emotion.withStyle)(_styles.
     const _this$props3 = this.props,
       children = _this$props3.children,
       rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
-    return (0, _emotion.jsx)("div", Object.assign({
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalFooter
-    }, (0, _passthroughProps.passthroughProps)(rest), {
-      ref: this.handleRef
-    }), children);
+    return (0, _jsxRuntime.jsx)("div", {
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalFooter,
+      ...(0, _passthroughProps.passthroughProps)(rest),
+      ref: this.handleRef,
+      children: children
+    });
   }
 }, _ModalFooter.displayName = "ModalFooter", _ModalFooter.componentId = 'Modal.Footer', _ModalFooter.propTypes = _props.propTypes, _ModalFooter.allowedProps = _props.allowedProps, _ModalFooter.defaultProps = {
   variant: 'default'

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

@@ -1,13 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
+var _react = require("@testing-library/react");
 require("@testing-library/jest-dom");
 var _uiThemes = _interopRequireDefault(require("@instructure/ui-themes"));
 var _uiColorUtils = require("@instructure/ui-color-utils");
 var _index = require("../index");
 var _theme = _interopRequireDefault(require("../theme"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _ModalHeader, _ModalHeader2, _ModalHeader3, _ModalHeader4, _ModalHeader5;
 /*
  * The MIT License (MIT)
@@ -35,16 +35,19 @@ var _ModalHeader, _ModalHeader2, _ModalHeader3, _ModalHeader4, _ModalHeader5;
 const HEADER_TEXT = 'Modal-footer-text';
 describe('<ModalHeader />', () => {
   it('should render', async () => {
-    const _render = (0, _react2.render)(_ModalHeader || (_ModalHeader = /*#__PURE__*/_react.default.createElement(_index.ModalHeader, null, HEADER_TEXT))),
+    const _render = (0, _react.render)(_ModalHeader || (_ModalHeader = (0, _jsxRuntime.jsx)(_index.ModalHeader, {
+        children: HEADER_TEXT
+      }))),
       findByText = _render.findByText;
     const modalHeader = await findByText(HEADER_TEXT);
     expect(modalHeader).toBeInTheDocument();
   });
   it('should set inverse styles', async () => {
     const themeVariables = (0, _theme.default)(_uiThemes.default);
-    const _render2 = (0, _react2.render)(_ModalHeader2 || (_ModalHeader2 = /*#__PURE__*/_react.default.createElement(_index.ModalHeader, {
-        variant: "inverse"
-      }, HEADER_TEXT))),
+    const _render2 = (0, _react.render)(_ModalHeader2 || (_ModalHeader2 = (0, _jsxRuntime.jsx)(_index.ModalHeader, {
+        variant: "inverse",
+        children: HEADER_TEXT
+      }))),
       findByText = _render2.findByText;
     const modalHeader = await findByText(HEADER_TEXT);
     const modalHeaderStyle = window.getComputedStyle(modalHeader);
@@ -57,7 +60,9 @@ describe('<ModalHeader />', () => {
   describe('spacing prop', () => {
     it('should be correct by default', async () => {
       const themeVariables = (0, _theme.default)(_uiThemes.default);
-      const _render3 = (0, _react2.render)(_ModalHeader3 || (_ModalHeader3 = /*#__PURE__*/_react.default.createElement(_index.ModalHeader, null, HEADER_TEXT))),
+      const _render3 = (0, _react.render)(_ModalHeader3 || (_ModalHeader3 = (0, _jsxRuntime.jsx)(_index.ModalHeader, {
+          children: HEADER_TEXT
+        }))),
         findByText = _render3.findByText;
       const modalHeader = await findByText(HEADER_TEXT);
       const modalHeaderStyle = window.getComputedStyle(modalHeader);
@@ -67,9 +72,10 @@ describe('<ModalHeader />', () => {
     });
     it('should correctly set default spacing', async () => {
       const themeVariables = (0, _theme.default)(_uiThemes.default);
-      const _render4 = (0, _react2.render)(_ModalHeader4 || (_ModalHeader4 = /*#__PURE__*/_react.default.createElement(_index.ModalHeader, {
-          spacing: "default"
-        }, HEADER_TEXT))),
+      const _render4 = (0, _react.render)(_ModalHeader4 || (_ModalHeader4 = (0, _jsxRuntime.jsx)(_index.ModalHeader, {
+          spacing: "default",
+          children: HEADER_TEXT
+        }))),
         findByText = _render4.findByText;
       const modalHeader = await findByText(HEADER_TEXT);
       const modalHeaderStyle = window.getComputedStyle(modalHeader);
@@ -79,9 +85,10 @@ describe('<ModalHeader />', () => {
     });
     it('should correctly set compact spacing', async () => {
       const themeVariables = (0, _theme.default)(_uiThemes.default);
-      const _render5 = (0, _react2.render)(_ModalHeader5 || (_ModalHeader5 = /*#__PURE__*/_react.default.createElement(_index.ModalHeader, {
-          spacing: "compact"
-        }, HEADER_TEXT))),
+      const _render5 = (0, _react.render)(_ModalHeader5 || (_ModalHeader5 = (0, _jsxRuntime.jsx)(_index.ModalHeader, {
+          spacing: "compact",
+          children: HEADER_TEXT
+        }))),
         findByText = _render5.findByText;
       const modalHeader = await findByText(HEADER_TEXT);
       const modalHeaderStyle = window.getComputedStyle(modalHeader);

package/lib/Modal/ModalHeader/index.js

@@ -1,13 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ModalHeader = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 var _testable = require("@instructure/ui-testable/lib/testable.js");
@@ -16,6 +15,7 @@ var _CloseButton = require("@instructure/ui-buttons/lib/CloseButton");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["children"];
 var _dec, _dec2, _class, _ModalHeader;
 /*
@@ -41,7 +41,6 @@ var _dec, _dec2, _class, _ModalHeader;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
 /**
 ---
 parent: Modal
@@ -71,7 +70,7 @@ let ModalHeader = exports.ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.
   }
   get usesCloseButton() {
     let hasCloseButton = false;
-    _react.default.Children.forEach(this.props.children, child => {
+    _react.Children.forEach(this.props.children, child => {
       if (child && (0, _matchComponentTypes.matchComponentTypes)(child, [_CloseButton.CloseButton])) {
         hasCloseButton = true;
       }
@@ -83,11 +82,12 @@ let ModalHeader = exports.ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.
     const _this$props3 = this.props,
       children = _this$props3.children,
       rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
-    return (0, _emotion.jsx)("div", Object.assign({
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalHeader
-    }, (0, _passthroughProps.passthroughProps)(rest), {
-      ref: this.handleRef
-    }), children);
+    return (0, _jsxRuntime.jsx)("div", {
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalHeader,
+      ...(0, _passthroughProps.passthroughProps)(rest),
+      ref: this.handleRef,
+      children: children
+    });
   }
 }, _ModalHeader.displayName = "ModalHeader", _ModalHeader.componentId = 'Modal.Header', _ModalHeader.propTypes = _props.propTypes, _ModalHeader.allowedProps = _props.allowedProps, _ModalHeader.defaultProps = {
   variant: 'default',