@instructure/ui-modal 10.3.1-snapshot-9 → 10.4.0

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.3.1-snapshot-9](https://github.com/instructure/instructure-ui/compare/v10.3.0...v10.3.1-snapshot-9) (2024-10-11)
+# [10.4.0](https://github.com/instructure/instructure-ui/compare/v10.3.0...v10.4.0) (2024-10-16)
 
-**Note:** Version bump only for package @instructure/ui-modal
+
+### Features
+
+* **ui-modal:** modify modal to support less strict children ([40f8ca2](https://github.com/instructure/instructure-ui/commit/40f8ca24e80ceb41e8c5d05d1f9d5e8f77113370))
 
 
 

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

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["label"];
-var _Modal, _Modal2, _Modal$Body, _Modal3, _Modal4, _Modal5, _Modal$Body2, _Modal$Body3, _Modal$Body4, _Modal$Body5, _Modal$Body6, _Modal$Body7, _Modal6, _Modal7, _Modal8, _input, _Modal$Header, _Modal$Body8, _Modal$Footer;
+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;
 /*
  * The MIT License (MIT)
  *
@@ -31,6 +31,7 @@ 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';
 describe('<Modal />', () => {
   let consoleWarningMock;
   let consoleErrorMock;
@@ -146,13 +147,26 @@ describe('<Modal />', () => {
     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, {
+        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))),
+      findByText = _render7.findByText;
+    const modalBody = await findByText(bodyText);
+    const customChild = await findByText('This is a custom child');
+    expect(modalBody).toBeInTheDocument();
+    expect(customChild).toBeInTheDocument();
+  });
   it('should apply the aria attributes', async () => {
-    const _render7 = render(_Modal5 || (_Modal5 = /*#__PURE__*/React.createElement(Modal, {
+    const _render8 = render(_Modal5 || (_Modal5 = /*#__PURE__*/React.createElement(Modal, {
         open: true,
         label: "Modal Dialog",
         shouldReturnFocus: false
       }, /*#__PURE__*/React.createElement(Modal.Body, null, "Foo Bar Baz")))),
-      findByRole = _render7.findByRole;
+      findByRole = _render8.findByRole;
     const dialog = await findByRole('dialog');
     expect(dialog).toBeInTheDocument();
     expect(dialog).toHaveAttribute('aria-label', 'Modal Dialog');
@@ -161,7 +175,7 @@ describe('<Modal />', () => {
     const onEnter = vi.fn();
     const onEntering = vi.fn();
     const onEntered = vi.fn();
-    const _render8 = render(/*#__PURE__*/React.createElement(Modal, {
+    const _render9 = render(/*#__PURE__*/React.createElement(Modal, {
         open: true,
         onEnter: onEnter,
         onEntering: onEntering,
@@ -170,7 +184,7 @@ describe('<Modal />', () => {
         label: "Modal Dialog",
         shouldReturnFocus: false
       }, _Modal$Body2 || (_Modal$Body2 = /*#__PURE__*/React.createElement(Modal.Body, null, "Foo Bar Baz")))),
-      findByRole = _render8.findByRole;
+      findByRole = _render9.findByRole;
     const dialog = await findByRole('dialog');
     expect(dialog).toBeInTheDocument();
     await waitFor(() => {
@@ -181,13 +195,13 @@ describe('<Modal />', () => {
   });
   it('should support onOpen prop', async () => {
     const onOpen = vi.fn();
-    const _render9 = render(/*#__PURE__*/React.createElement(Modal, {
+    const _render10 = render(/*#__PURE__*/React.createElement(Modal, {
         open: true,
         onOpen: onOpen,
         label: "Modal Dialog",
         shouldReturnFocus: false
       }, _Modal$Body3 || (_Modal$Body3 = /*#__PURE__*/React.createElement(Modal.Body, null, "Foo Bar Baz")))),
-      findByRole = _render9.findByRole;
+      findByRole = _render10.findByRole;
     const dialog = await findByRole('dialog');
     expect(dialog).toBeInTheDocument();
     await waitFor(() => {
@@ -196,14 +210,14 @@ describe('<Modal />', () => {
   });
   it('should support onClose prop', async () => {
     const onClose = vi.fn();
-    const _render10 = render(/*#__PURE__*/React.createElement(Modal, {
+    const _render11 = render(/*#__PURE__*/React.createElement(Modal, {
         open: true,
         onClose: onClose,
         label: "Modal Dialog",
         shouldReturnFocus: false
       }, _Modal$Body4 || (_Modal$Body4 = /*#__PURE__*/React.createElement(Modal.Body, null, "Foo Bar Baz")))),
-      findByRole = _render10.findByRole,
-      rerender = _render10.rerender;
+      findByRole = _render11.findByRole,
+      rerender = _render11.rerender;
     const dialog = await findByRole('dialog');
     expect(dialog).toBeInTheDocument();
     rerender(/*#__PURE__*/React.createElement(Modal, {
@@ -218,13 +232,13 @@ describe('<Modal />', () => {
   });
   it('should dismiss when overlay clicked by default', async () => {
     const onDismiss = vi.fn();
-    const _render11 = render(/*#__PURE__*/React.createElement(Modal, {
+    const _render12 = render(/*#__PURE__*/React.createElement(Modal, {
         open: true,
         onDismiss: onDismiss,
         label: "Modal Dialog",
         shouldReturnFocus: false
       }, _Modal$Body6 || (_Modal$Body6 = /*#__PURE__*/React.createElement(Modal.Body, null, "Modal Text")))),
-      findByText = _render11.findByText;
+      findByText = _render12.findByText;
     const modalBody = await findByText('Modal Text');
     expect(modalBody).toBeInTheDocument();
     await waitFor(() => {
@@ -235,7 +249,7 @@ describe('<Modal />', () => {
   it('should NOT dismiss when overlay clicked with shouldCloseOnDocumentClick=false', async () => {
     const onDismiss = vi.fn();
     const onClickOuter = vi.fn();
-    const _render12 = render(/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+    const _render13 = render(/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
         "data-testid": "outer-element",
         onClick: onClickOuter
       }, "for dismiss"), /*#__PURE__*/React.createElement(Modal, {
@@ -245,8 +259,8 @@ describe('<Modal />', () => {
         shouldReturnFocus: false,
         shouldCloseOnDocumentClick: false
       }, _Modal$Body7 || (_Modal$Body7 = /*#__PURE__*/React.createElement(Modal.Body, null, "Foo Bar Baz ", /*#__PURE__*/React.createElement("button", null, "click me")))))),
-      findByRole = _render12.findByRole,
-      getByTestId = _render12.getByTestId;
+      findByRole = _render13.findByRole,
+      getByTestId = _render13.getByTestId;
     const dialog = await findByRole('dialog');
     expect(dialog).toBeInTheDocument();
     userEvent.click(getByTestId('outer-element'));
@@ -257,38 +271,26 @@ describe('<Modal />', () => {
     });
   });
   it('should render children', async () => {
-    const _render13 = render(_Modal6 || (_Modal6 = /*#__PURE__*/React.createElement(Modal, {
+    const _render14 = render(_Modal6 || (_Modal6 = /*#__PURE__*/React.createElement(Modal, {
         open: true,
         label: "Modal Dialog",
         shouldReturnFocus: false
       }, /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement("button", null, "Cancel"))))),
-      findByText = _render13.findByText;
+      findByText = _render14.findByText;
     const cancelButton = await findByText('Cancel');
     expect(cancelButton).toBeInTheDocument();
   });
   describe('children validation', () => {
     it('should pass validation when children are valid', async () => {
-      const _render14 = render(_Modal7 || (_Modal7 = /*#__PURE__*/React.createElement(Modal, {
+      const _render15 = render(_Modal7 || (_Modal7 = /*#__PURE__*/React.createElement(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"))))),
-        findByRole = _render14.findByRole;
-      const dialog = await findByRole('dialog');
-      expect(dialog).toBeInTheDocument();
-      expect(consoleErrorMock).not.toHaveBeenCalled();
-    });
-    it('should not pass validation when children are invalid', async () => {
-      const _render15 = render(_Modal8 || (_Modal8 = /*#__PURE__*/React.createElement(Modal, {
-          open: true,
-          label: "Modal Dialog",
-          shouldReturnFocus: false
-        }, /*#__PURE__*/React.createElement(Modal.Body, null, "Foo Bar Baz"), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement("button", null, "Cancel")), /*#__PURE__*/React.createElement(Modal.Header, null, "Hello World")))),
         findByRole = _render15.findByRole;
       const dialog = await findByRole('dialog');
-      const expectedErrorMessage = 'Expected children of Modal in one of the following formats:';
       expect(dialog).toBeInTheDocument();
-      expect(consoleErrorMock).toHaveBeenCalledWith(expect.any(String), expect.any(String), expect.stringContaining(expectedErrorMessage), expect.any(String));
+      expect(consoleErrorMock).not.toHaveBeenCalled();
     });
     it('should pass inverse variant to children when set', async () => {
       let headerRef = null;

package/es/Modal/index.js

@@ -26,8 +26,8 @@ var _dec, _dec2, _class, _Modal;
  */
 
 /** @jsx jsx */
-import React, { Children, Component } from 'react';
-import { passthroughProps, safeCloneElement, matchComponentTypes } from '@instructure/ui-react-utils';
+import { Children, Component, isValidElement } from 'react';
+import { passthroughProps, safeCloneElement } from '@instructure/ui-react-utils';
 import { createChainedFunction } from '@instructure/ui-utils';
 import { testable } from '@instructure/ui-testable';
 import { Transition } from '@instructure/ui-motion';
@@ -114,15 +114,14 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = te
     return Children.map(children, child => {
       if (!child) return; // ignore null, falsy children
 
-      if (matchComponentTypes(child, [ModalBody])) {
+      if (/*#__PURE__*/isValidElement(child)) {
+        var _child$props;
         return safeCloneElement(child, {
           variant: variant,
-          overflow: child.props.overflow || overflow
+          overflow: (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.overflow) || overflow
         });
       } else {
-        return safeCloneElement(child, {
-          variant: variant
-        });
+        return child;
       }
     });
   }

package/es/Modal/props.js

@@ -23,14 +23,11 @@
  */
 
 import PropTypes from 'prop-types';
-import { element, Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
+import { element } from '@instructure/ui-prop-types';
 import { transitionTypePropType } from '@instructure/ui-motion';
-import { ModalHeader } from './ModalHeader';
-import { ModalBody } from './ModalBody';
-import { ModalFooter } from './ModalFooter';
 const propTypes = {
   label: PropTypes.string.isRequired,
-  children: ChildrenPropTypes.enforceOrder([ModalHeader, ModalBody, ModalFooter], [ModalHeader, ModalBody], [ModalBody, ModalFooter], [ModalBody]),
+  children: PropTypes.node,
   as: PropTypes.elementType,
   size: PropTypes.oneOf(['auto', 'small', 'medium', 'large', 'fullscreen']),
   variant: PropTypes.oneOf(['default', 'inverse']),

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

@@ -8,8 +8,9 @@ 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");
 const _excluded = ["label"];
-var _Modal, _Modal2, _Modal$Body, _Modal3, _Modal4, _Modal5, _Modal$Body2, _Modal$Body3, _Modal$Body4, _Modal$Body5, _Modal$Body6, _Modal$Body7, _Modal6, _Modal7, _Modal8, _input, _Modal$Header, _Modal$Body8, _Modal$Footer;
+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;
 /*
  * The MIT License (MIT)
  *
@@ -148,13 +149,26 @@ describe('<Modal />', () => {
     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, {
+        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))),
+      findByText = _render7.findByText;
+    const modalBody = await findByText(bodyText);
+    const customChild = await findByText('This is a custom child');
+    expect(modalBody).toBeInTheDocument();
+    expect(customChild).toBeInTheDocument();
+  });
   it('should apply the aria attributes', async () => {
-    const _render7 = (0, _react2.render)(_Modal5 || (_Modal5 = /*#__PURE__*/_react.default.createElement(_index.Modal, {
+    const _render8 = (0, _react2.render)(_Modal5 || (_Modal5 = /*#__PURE__*/_react.default.createElement(_index.Modal, {
         open: true,
         label: "Modal Dialog",
         shouldReturnFocus: false
       }, /*#__PURE__*/_react.default.createElement(_index.Modal.Body, null, "Foo Bar Baz")))),
-      findByRole = _render7.findByRole;
+      findByRole = _render8.findByRole;
     const dialog = await findByRole('dialog');
     expect(dialog).toBeInTheDocument();
     expect(dialog).toHaveAttribute('aria-label', 'Modal Dialog');
@@ -163,7 +177,7 @@ describe('<Modal />', () => {
     const onEnter = _vitest.vi.fn();
     const onEntering = _vitest.vi.fn();
     const onEntered = _vitest.vi.fn();
-    const _render8 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Modal, {
+    const _render9 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Modal, {
         open: true,
         onEnter: onEnter,
         onEntering: onEntering,
@@ -172,7 +186,7 @@ describe('<Modal />', () => {
         label: "Modal Dialog",
         shouldReturnFocus: false
       }, _Modal$Body2 || (_Modal$Body2 = /*#__PURE__*/_react.default.createElement(_index.Modal.Body, null, "Foo Bar Baz")))),
-      findByRole = _render8.findByRole;
+      findByRole = _render9.findByRole;
     const dialog = await findByRole('dialog');
     expect(dialog).toBeInTheDocument();
     await (0, _react2.waitFor)(() => {
@@ -183,13 +197,13 @@ describe('<Modal />', () => {
   });
   it('should support onOpen prop', async () => {
     const onOpen = _vitest.vi.fn();
-    const _render9 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Modal, {
+    const _render10 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_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")))),
-      findByRole = _render9.findByRole;
+      findByRole = _render10.findByRole;
     const dialog = await findByRole('dialog');
     expect(dialog).toBeInTheDocument();
     await (0, _react2.waitFor)(() => {
@@ -198,14 +212,14 @@ describe('<Modal />', () => {
   });
   it('should support onClose prop', async () => {
     const onClose = _vitest.vi.fn();
-    const _render10 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Modal, {
+    const _render11 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_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")))),
-      findByRole = _render10.findByRole,
-      rerender = _render10.rerender;
+      findByRole = _render11.findByRole,
+      rerender = _render11.rerender;
     const dialog = await findByRole('dialog');
     expect(dialog).toBeInTheDocument();
     rerender(/*#__PURE__*/_react.default.createElement(_index.Modal, {
@@ -220,13 +234,13 @@ describe('<Modal />', () => {
   });
   it('should dismiss when overlay clicked by default', async () => {
     const onDismiss = _vitest.vi.fn();
-    const _render11 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Modal, {
+    const _render12 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_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")))),
-      findByText = _render11.findByText;
+      findByText = _render12.findByText;
     const modalBody = await findByText('Modal Text');
     expect(modalBody).toBeInTheDocument();
     await (0, _react2.waitFor)(() => {
@@ -237,7 +251,7 @@ describe('<Modal />', () => {
   it('should NOT dismiss when overlay clicked with shouldCloseOnDocumentClick=false', async () => {
     const onDismiss = _vitest.vi.fn();
     const onClickOuter = _vitest.vi.fn();
-    const _render12 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
+    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, {
@@ -247,8 +261,8 @@ describe('<Modal />', () => {
         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")))))),
-      findByRole = _render12.findByRole,
-      getByTestId = _render12.getByTestId;
+      findByRole = _render13.findByRole,
+      getByTestId = _render13.getByTestId;
     const dialog = await findByRole('dialog');
     expect(dialog).toBeInTheDocument();
     _userEvent.default.click(getByTestId('outer-element'));
@@ -259,38 +273,26 @@ describe('<Modal />', () => {
     });
   });
   it('should render children', async () => {
-    const _render13 = (0, _react2.render)(_Modal6 || (_Modal6 = /*#__PURE__*/_react.default.createElement(_index.Modal, {
+    const _render14 = (0, _react2.render)(_Modal6 || (_Modal6 = /*#__PURE__*/_react.default.createElement(_index.Modal, {
         open: true,
         label: "Modal Dialog",
         shouldReturnFocus: false
       }, /*#__PURE__*/_react.default.createElement(_index.Modal.Body, null, /*#__PURE__*/_react.default.createElement("button", null, "Cancel"))))),
-      findByText = _render13.findByText;
+      findByText = _render14.findByText;
     const cancelButton = await findByText('Cancel');
     expect(cancelButton).toBeInTheDocument();
   });
   describe('children validation', () => {
     it('should pass validation when children are valid', async () => {
-      const _render14 = (0, _react2.render)(_Modal7 || (_Modal7 = /*#__PURE__*/_react.default.createElement(_index.Modal, {
+      const _render15 = (0, _react2.render)(_Modal7 || (_Modal7 = /*#__PURE__*/_react.default.createElement(_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"))))),
-        findByRole = _render14.findByRole;
-      const dialog = await findByRole('dialog');
-      expect(dialog).toBeInTheDocument();
-      expect(consoleErrorMock).not.toHaveBeenCalled();
-    });
-    it('should not pass validation when children are invalid', async () => {
-      const _render15 = (0, _react2.render)(_Modal8 || (_Modal8 = /*#__PURE__*/_react.default.createElement(_index.Modal, {
-          open: true,
-          label: "Modal Dialog",
-          shouldReturnFocus: false
-        }, /*#__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")), /*#__PURE__*/_react.default.createElement(_index.Modal.Header, null, "Hello World")))),
         findByRole = _render15.findByRole;
       const dialog = await findByRole('dialog');
-      const expectedErrorMessage = 'Expected children of Modal in one of the following formats:';
       expect(dialog).toBeInTheDocument();
-      expect(consoleErrorMock).toHaveBeenCalledWith(expect.any(String), expect.any(String), expect.stringContaining(expectedErrorMessage), expect.any(String));
+      expect(consoleErrorMock).not.toHaveBeenCalled();
     });
     it('should pass inverse variant to children when set', async () => {
       let headerRef = null;

package/lib/Modal/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -26,10 +25,9 @@ Object.defineProperty(exports, "ModalHeader", {
 });
 exports.default = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
-var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _Transition = require("@instructure/ui-motion/lib/Transition");
@@ -142,15 +140,14 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
     return _react.Children.map(children, child => {
       if (!child) return; // ignore null, falsy children
 
-      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_ModalBody.ModalBody])) {
+      if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
+        var _child$props;
         return (0, _safeCloneElement.safeCloneElement)(child, {
           variant: variant,
-          overflow: child.props.overflow || overflow
+          overflow: (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.overflow) || overflow
         });
       } else {
-        return (0, _safeCloneElement.safeCloneElement)(child, {
-          variant: variant
-        });
+        return child;
       }
     });
   }

package/lib/Modal/props.js

@@ -7,11 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.propTypes = exports.allowedProps = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _element = require("@instructure/ui-prop-types/lib/element.js");
-var _Children = require("@instructure/ui-prop-types/lib/Children.js");
 var _uiMotion = require("@instructure/ui-motion");
-var _ModalHeader = require("./ModalHeader");
-var _ModalBody = require("./ModalBody");
-var _ModalFooter = require("./ModalFooter");
 /*
  * The MIT License (MIT)
  *
@@ -38,7 +34,7 @@ var _ModalFooter = require("./ModalFooter");
 
 const propTypes = exports.propTypes = {
   label: _propTypes.default.string.isRequired,
-  children: _Children.Children.enforceOrder([_ModalHeader.ModalHeader, _ModalBody.ModalBody, _ModalFooter.ModalFooter], [_ModalHeader.ModalHeader, _ModalBody.ModalBody], [_ModalBody.ModalBody, _ModalFooter.ModalFooter], [_ModalBody.ModalBody]),
+  children: _propTypes.default.node,
   as: _propTypes.default.elementType,
   size: _propTypes.default.oneOf(['auto', 'small', 'medium', 'large', 'fullscreen']),
   variant: _propTypes.default.oneOf(['default', 'inverse']),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-modal",
-  "version": "10.3.1-snapshot-9",
+  "version": "10.4.0",
   "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.25.6",
-    "@instructure/console": "10.3.1-snapshot-9",
-    "@instructure/emotion": "10.3.1-snapshot-9",
-    "@instructure/shared-types": "10.3.1-snapshot-9",
-    "@instructure/ui-buttons": "10.3.1-snapshot-9",
-    "@instructure/ui-dialog": "10.3.1-snapshot-9",
-    "@instructure/ui-dom-utils": "10.3.1-snapshot-9",
-    "@instructure/ui-motion": "10.3.1-snapshot-9",
-    "@instructure/ui-overlays": "10.3.1-snapshot-9",
-    "@instructure/ui-portal": "10.3.1-snapshot-9",
-    "@instructure/ui-prop-types": "10.3.1-snapshot-9",
-    "@instructure/ui-react-utils": "10.3.1-snapshot-9",
-    "@instructure/ui-testable": "10.3.1-snapshot-9",
-    "@instructure/ui-utils": "10.3.1-snapshot-9",
-    "@instructure/ui-view": "10.3.1-snapshot-9",
+    "@instructure/console": "10.4.0",
+    "@instructure/emotion": "10.4.0",
+    "@instructure/shared-types": "10.4.0",
+    "@instructure/ui-buttons": "10.4.0",
+    "@instructure/ui-dialog": "10.4.0",
+    "@instructure/ui-dom-utils": "10.4.0",
+    "@instructure/ui-motion": "10.4.0",
+    "@instructure/ui-overlays": "10.4.0",
+    "@instructure/ui-portal": "10.4.0",
+    "@instructure/ui-prop-types": "10.4.0",
+    "@instructure/ui-react-utils": "10.4.0",
+    "@instructure/ui-testable": "10.4.0",
+    "@instructure/ui-utils": "10.4.0",
+    "@instructure/ui-view": "10.4.0",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.3.1-snapshot-9",
-    "@instructure/ui-color-utils": "10.3.1-snapshot-9",
-    "@instructure/ui-position": "10.3.1-snapshot-9",
-    "@instructure/ui-themes": "10.3.1-snapshot-9",
+    "@instructure/ui-babel-preset": "10.4.0",
+    "@instructure/ui-color-utils": "10.4.0",
+    "@instructure/ui-position": "10.4.0",
+    "@instructure/ui-themes": "10.4.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",

package/src/Modal/README.md

@@ -1051,6 +1051,100 @@ On smaller viewports (like mobile devices or scaled-up UI), we don't want to los
   render(<Example />)
   ```
 
+### Using custom children
+
+Occasionally, you might find it useful to incorporate custom components within a `Modal`, such as a higher-order component for `Modal.Header` or `Modal.Body` or not using built in child components at all. Although this approach is typically not advised, it can sometimes aid in code splitting or achieving more streamlined code, especially for more intricate and sizable `Modal`s.
+
+Below example demonstrates how to use a higher-order component for `Modal.Body`. `Modal` consists of a `Modal.Header`, a custom `WrappedModalBody` component, and a `View` component. Properties `variant` and `overflow` are passed down to child components. While the original `Modal.Header`, `Modal.Body` and `Modal.Footer` components use these properties, please note that these might cause unpredictable side effects for custom components.
+
+```js
+---
+type: example
+---
+
+class Example extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      open: false
+    }
+  }
+
+  handleButtonClick = () => {
+    this.setState(function (state) {
+      return { open: !state.open }
+    })
+  };
+
+  renderCloseButton () {
+    return (
+      <CloseButton
+        color="primary-inverse"
+        placement="end"
+        offset="small"
+        onClick={this.handleButtonClick}
+        screenReaderLabel="Close"
+      />
+    )
+  }
+
+  render () {
+    return (
+      <div style={{ padding: '0 0 11rem 0', margin: '0 auto' }}>
+        <Button onClick={this.handleButtonClick}>
+          {this.state.open ? 'Close' : 'Open'} the Modal
+        </Button>
+        <Modal
+          as="form"
+          open={this.state.open}
+          onDismiss={() => { this.setState({ open: false }) }}
+          size="large"
+          label="Modal Dialog: Hello World"
+          shouldCloseOnDocumentClick
+          variant='inverse'
+          overflow='scroll'
+        >
+          <Modal.Header>
+            {this.renderCloseButton()}
+            <Heading>This is a Modal with a Modal.Body wrapped in to a HOC</Heading>
+          </Modal.Header>
+          <WrappedModalBody>
+            <Heading level='h3'>WrappedModalBody inherits the variant and overflow properties automatically</Heading>
+            <Text lineHeight="double">{lorem.paragraphs(5)}</Text>
+          </WrappedModalBody>
+          <View
+            as="div"
+            margin="small"
+            padding="large"
+            background="primary">
+            <Heading level='h3'>This View child does not inherit the variant and overflow properties</Heading>
+            <Text>{lorem.paragraphs(5)}</Text>
+          </View>
+        </Modal>
+      </div>
+    )
+  }
+}
+
+const withLogger = (WrappedComponent) => {
+  class WithLogger extends React.Component {
+    componentDidMount() {
+      console.log('WrappedModelBody mounted');
+    }
+    render() {
+      return <WrappedComponent {...this.props} />;
+    }
+  }
+
+  return WithLogger;
+}
+
+const WrappedModalBody = withLogger(Modal.Body)
+
+render(<Example />)
+```
+
 ### Guidelines
 
 ```js