@instructure/ui-modal 8.53.3-snapshot-10 → 8.53.3-snapshot-13

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.53.3-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.53.2...v8.53.3-snapshot-10) (2024-02-28)
+## [8.53.3-snapshot-13](https://github.com/instructure/instructure-ui/compare/v8.53.2...v8.53.3-snapshot-13) (2024-02-29)
 
 **Note:** Version bump only for package @instructure/ui-modal
 

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

@@ -0,0 +1,101 @@
+var _ModalBody, _ModalBody2, _ModalBody3;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { color2hex } from '@instructure/ui-color-utils';
+import { canvas } from '@instructure/ui-themes';
+import { View } from '@instructure/ui-view';
+import { ModalBody } from '../index';
+import generateComponentTheme from '../theme';
+const BODY_TEXT = 'Modal-body-text';
+describe('<ModalBody />', () => {
+  it('should render', async () => {
+    const _render = render(_ModalBody || (_ModalBody = /*#__PURE__*/React.createElement(ModalBody, null, BODY_TEXT))),
+      findByText = _render.findByText;
+    const modalBody = await findByText(BODY_TEXT);
+    expect(modalBody).toBeInTheDocument();
+  });
+  it('should set inverse styles', async () => {
+    const themeVariables = generateComponentTheme(canvas);
+    const _render2 = render(_ModalBody2 || (_ModalBody2 = /*#__PURE__*/React.createElement(ModalBody, {
+        variant: "inverse"
+      }, BODY_TEXT))),
+      findByText = _render2.findByText;
+    const modalBody = await findByText(BODY_TEXT);
+    const modalBodyStyle = window.getComputedStyle(modalBody);
+    const bodyBackground = color2hex(modalBodyStyle.getPropertyValue('background-color'));
+    expect(modalBody).toBeInTheDocument();
+    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 = render( /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: '500px',
+          height: '600px'
+        }
+      }, _ModalBody3 || (_ModalBody3 = /*#__PURE__*/React.createElement(ModalBody, {
+        overflow: "fit"
+      }, BODY_TEXT)))),
+      findByText = _render3.findByText;
+    const modalBody = await findByText(BODY_TEXT);
+    const modalBodyStyle = window.getComputedStyle(modalBody);
+    expect(modalBodyStyle.width).toBe('100%');
+    expect(modalBodyStyle.height).toBe('100%');
+  });
+  describe('when passing down props to View', () => {
+    const allowedProps = {
+      padding: 'small',
+      elementRef: () => {},
+      as: 'section'
+    };
+    const allProps = View.allowedProps.filter(prop => prop !== 'children');
+    allProps.forEach(prop => {
+      if (prop in allowedProps) {
+        it(`should allow the '${prop}' prop`, () => {
+          const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+          const props = {
+            [prop]: allowedProps[prop]
+          };
+          render( /*#__PURE__*/React.createElement(ModalBody, props));
+          expect(consoleErrorSpy).not.toHaveBeenCalled();
+          consoleErrorSpy.mockRestore();
+        });
+      } else {
+        it(`should NOT allow the '${prop}' prop`, () => {
+          const expectedErrorMessage = `prop '${prop}' is not allowed.`;
+          const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+          const props = {
+            [prop]: 'NOT_ALLOWED_VALUE'
+          };
+          render( /*#__PURE__*/React.createElement(ModalBody, props));
+          expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
+          consoleErrorSpy.mockRestore();
+        });
+      }
+    });
+  });
+});

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

@@ -0,0 +1,55 @@
+var _ModalFooter, _ModalFooter2;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { canvas } from '@instructure/ui-themes';
+import { color2hex } from '@instructure/ui-color-utils';
+import { ModalFooter } from '../index';
+import generateComponentTheme from '../theme';
+const FOOTER_TEXT = 'Modal-footer-text';
+describe('<ModalFooter />', () => {
+  it('should render', async () => {
+    const _render = render(_ModalFooter || (_ModalFooter = /*#__PURE__*/React.createElement(ModalFooter, null, FOOTER_TEXT))),
+      findByText = _render.findByText;
+    const modalFooter = await findByText(FOOTER_TEXT);
+    expect(modalFooter).toBeInTheDocument();
+  });
+  it('should set inverse styles', async () => {
+    const themeVariables = generateComponentTheme(canvas);
+    const _render2 = render(_ModalFooter2 || (_ModalFooter2 = /*#__PURE__*/React.createElement(ModalFooter, {
+        variant: "inverse"
+      }, FOOTER_TEXT))),
+      findByText = _render2.findByText;
+    const modalFooter = await findByText(FOOTER_TEXT);
+    const modalFooterStyle = window.getComputedStyle(modalFooter);
+    const footerBackground = color2hex(modalFooterStyle.getPropertyValue('background-color'));
+    const footerBorderColor = color2hex(modalFooterStyle.getPropertyValue('border-top-color'));
+    expect(modalFooter).toBeInTheDocument();
+    expect(footerBackground).toBe(themeVariables.inverseBackground);
+    expect(footerBorderColor).toBe(themeVariables.inverseBorderColor);
+  });
+});

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

@@ -0,0 +1,91 @@
+var _ModalHeader, _ModalHeader2, _ModalHeader3, _ModalHeader4, _ModalHeader5;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { canvas } from '@instructure/ui-themes';
+import { color2hex } from '@instructure/ui-color-utils';
+import { ModalHeader } from '../index';
+import generateComponentTheme from '../theme';
+const HEADER_TEXT = 'Modal-footer-text';
+describe('<ModalHeader />', () => {
+  it('should render', async () => {
+    const _render = render(_ModalHeader || (_ModalHeader = /*#__PURE__*/React.createElement(ModalHeader, null, HEADER_TEXT))),
+      findByText = _render.findByText;
+    const modalHeader = await findByText(HEADER_TEXT);
+    expect(modalHeader).toBeInTheDocument();
+  });
+  it('should set inverse styles', async () => {
+    const themeVariables = generateComponentTheme(canvas);
+    const _render2 = render(_ModalHeader2 || (_ModalHeader2 = /*#__PURE__*/React.createElement(ModalHeader, {
+        variant: "inverse"
+      }, HEADER_TEXT))),
+      findByText = _render2.findByText;
+    const modalHeader = await findByText(HEADER_TEXT);
+    const modalHeaderStyle = window.getComputedStyle(modalHeader);
+    const headerBackground = color2hex(modalHeaderStyle.getPropertyValue('background-color'));
+    const headerBorderColor = color2hex(modalHeaderStyle.getPropertyValue('border-bottom-color'));
+    expect(modalHeader).toBeInTheDocument();
+    expect(headerBackground).toBe(themeVariables.inverseBackground);
+    expect(headerBorderColor).toBe(themeVariables.inverseBorderColor);
+  });
+  describe('spacing prop', () => {
+    it('should be correct by default', async () => {
+      const themeVariables = generateComponentTheme(canvas);
+      const _render3 = render(_ModalHeader3 || (_ModalHeader3 = /*#__PURE__*/React.createElement(ModalHeader, null, HEADER_TEXT))),
+        findByText = _render3.findByText;
+      const modalHeader = await findByText(HEADER_TEXT);
+      const modalHeaderStyle = window.getComputedStyle(modalHeader);
+      const headerPadding = modalHeaderStyle.padding;
+      expect(modalHeader).toBeInTheDocument();
+      expect(headerPadding).toBe(themeVariables.padding);
+    });
+    it('should correctly set default spacing', async () => {
+      const themeVariables = generateComponentTheme(canvas);
+      const _render4 = render(_ModalHeader4 || (_ModalHeader4 = /*#__PURE__*/React.createElement(ModalHeader, {
+          spacing: "default"
+        }, HEADER_TEXT))),
+        findByText = _render4.findByText;
+      const modalHeader = await findByText(HEADER_TEXT);
+      const modalHeaderStyle = window.getComputedStyle(modalHeader);
+      const headerPadding = modalHeaderStyle.padding;
+      expect(modalHeader).toBeInTheDocument();
+      expect(headerPadding).toBe(themeVariables.padding);
+    });
+    it('should correctly set compact spacing', async () => {
+      const themeVariables = generateComponentTheme(canvas);
+      const _render5 = render(_ModalHeader5 || (_ModalHeader5 = /*#__PURE__*/React.createElement(ModalHeader, {
+          spacing: "compact"
+        }, HEADER_TEXT))),
+        findByText = _render5.findByText;
+      const modalHeader = await findByText(HEADER_TEXT);
+      const modalHeaderStyle = window.getComputedStyle(modalHeader);
+      const headerPadding = modalHeaderStyle.padding;
+      expect(modalHeader).toBeInTheDocument();
+      expect(headerPadding).toBe(themeVariables.paddingCompact);
+    });
+  });
+});

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

@@ -0,0 +1,369 @@
+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;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { Modal } from '../index';
+describe('<Modal />', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+    jest.restoreAllMocks();
+  });
+  it('should render nothing and have a node with no parent when closed', () => {
+    const _render = render(_Modal || (_Modal = /*#__PURE__*/React.createElement(Modal, {
+        label: "Modal Dialog",
+        shouldReturnFocus: false
+      }, /*#__PURE__*/React.createElement(Modal.Body, null, "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, {
+        open: true,
+        size: "small",
+        label: "Modal Dialog",
+        shouldReturnFocus: false,
+        themeOverride: {
+          fontFamily: testFont
+        }
+      }, /*#__PURE__*/React.createElement(Modal.Body, null, bodyText))),
+      findByText = _render2.findByText,
+      findByRole = _render2.findByRole;
+    const modalBody = await findByText(bodyText);
+    const dialog = await findByRole('dialog');
+    const dialogStyle = window.getComputedStyle(dialog);
+    expect(modalBody).toBeInTheDocument();
+    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, {
+        open: true,
+        label: "Modal Dialog",
+        shouldReturnFocus: false,
+        constrain: "parent"
+      }, /*#__PURE__*/React.createElement(Modal.Body, null, "Foo Bar Baz")))),
+      findByRole = _render3.findByRole;
+    const dialog = await findByRole('dialog');
+    const constrain = document.querySelector("[class*='constrainContext']");
+    expect(dialog).toBeInTheDocument();
+    expect(constrain).toBeInTheDocument();
+  });
+  it("should not inherit its parent's font color", async () => {
+    const _render4 = render( /*#__PURE__*/React.createElement("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"))))),
+      findByRole = _render4.findByRole;
+    const dialog = await findByRole('dialog');
+    const dialogStyle = window.getComputedStyle(dialog);
+    expect(dialog).toBeInTheDocument();
+    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, {
+        open: true,
+        label: "Modal Dialog",
+        shouldReturnFocus: false
+      }, /*#__PURE__*/React.createElement(Modal.Body, null, "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, {
+      as: "form",
+      open: true,
+      label: "Modal Dialog",
+      shouldReturnFocus: false
+    }, /*#__PURE__*/React.createElement(Modal.Body, null, "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, {
+        open: true,
+        label: "Modal Dialog",
+        shouldReturnFocus: false
+      }, null, /*#__PURE__*/React.createElement(Modal.Body, null, bodyText), null)),
+      findByText = _render6.findByText;
+    const modalBody = await findByText(bodyText);
+    expect(modalBody).toBeInTheDocument();
+  });
+  it('should apply the aria attributes', async () => {
+    const _render7 = 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;
+    const dialog = await findByRole('dialog');
+    expect(dialog).toBeInTheDocument();
+    expect(dialog).toHaveAttribute('aria-label', 'Modal Dialog');
+  });
+  it('should use transition', async () => {
+    const onEnter = jest.fn();
+    const onEntering = jest.fn();
+    const onEntered = jest.fn();
+    const _render8 = render( /*#__PURE__*/React.createElement(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")))),
+      findByRole = _render8.findByRole;
+    const dialog = await findByRole('dialog');
+    expect(dialog).toBeInTheDocument();
+    await waitFor(() => {
+      expect(onEnter).toHaveBeenCalled();
+      expect(onEntering).toHaveBeenCalled();
+      expect(onEntered).toHaveBeenCalled();
+    });
+  });
+  it('should support onOpen prop', async () => {
+    const onOpen = jest.fn();
+    const _render9 = 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;
+    const dialog = await findByRole('dialog');
+    expect(dialog).toBeInTheDocument();
+    await waitFor(() => {
+      expect(onOpen).toHaveBeenCalled();
+    });
+  });
+  it('should support onClose prop', async () => {
+    const onClose = jest.fn();
+    const _render10 = 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;
+    const dialog = await findByRole('dialog');
+    expect(dialog).toBeInTheDocument();
+    rerender( /*#__PURE__*/React.createElement(Modal, {
+      open: false,
+      onClose: onClose,
+      label: "Modal Dialog",
+      shouldReturnFocus: false
+    }, _Modal$Body5 || (_Modal$Body5 = /*#__PURE__*/React.createElement(Modal.Body, null, "Foo Bar Baz"))));
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+  it('should dismiss when overlay clicked by default', async () => {
+    const onDismiss = jest.fn();
+    const _render11 = 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;
+    const modalBody = await findByText('Modal Text');
+    expect(modalBody).toBeInTheDocument();
+    await waitFor(() => {
+      userEvent.click(document.body);
+      expect(onDismiss).toHaveBeenCalled();
+    });
+  });
+  it('should NOT dismiss when overlay clicked with shouldCloseOnDocumentClick=false', async () => {
+    const onDismiss = jest.fn();
+    const onClickOuter = jest.fn();
+    const _render12 = 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")))))),
+      findByRole = _render12.findByRole,
+      getByTestId = _render12.getByTestId;
+    const dialog = await findByRole('dialog');
+    expect(dialog).toBeInTheDocument();
+    userEvent.click(getByTestId('outer-element'));
+    await waitFor(() => {
+      expect(onClickOuter).toHaveBeenCalled();
+      expect(onDismiss).not.toHaveBeenCalled();
+      expect(dialog).toBeInTheDocument();
+    });
+  });
+  it('should render children', async () => {
+    const _render13 = 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;
+    const cancelButton = await findByText('Cancel');
+    expect(cancelButton).toBeInTheDocument();
+  });
+  describe('children validation', () => {
+    it('should pass validation when children are valid', async () => {
+      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+      const _render14 = 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(consoleErrorSpy).not.toHaveBeenCalled();
+      consoleErrorSpy.mockRestore();
+    });
+    it('should not pass validation when children are invalid', async () => {
+      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+      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(consoleErrorSpy).toHaveBeenCalledWith(expect.any(String), expect.any(String), expect.stringContaining(expectedErrorMessage), expect.any(String));
+      consoleErrorSpy.mockRestore();
+    });
+    it('should pass inverse variant to children when set', async () => {
+      let headerRef = null;
+      let bodyRef = null;
+      let footerRef = null;
+      const _render16 = render( /*#__PURE__*/React.createElement(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"))),
+        findByRole = _render16.findByRole;
+      const dialog = await findByRole('dialog');
+      expect(dialog).toBeInTheDocument();
+      expect(headerRef.props.variant).toBe('inverse');
+      expect(bodyRef.props.variant).toBe('inverse');
+      expect(footerRef.props.variant).toBe('inverse');
+    });
+    it('should pass overflow to Modal.Body', async () => {
+      let bodyRef = null;
+      const _render17 = render( /*#__PURE__*/React.createElement(Modal, {
+          open: true,
+          label: "Modal",
+          shouldReturnFocus: false,
+          overflow: "fit"
+        }, /*#__PURE__*/React.createElement(Modal.Body, {
+          ref: el => bodyRef = el
+        }, "body"))),
+        findByRole = _render17.findByRole;
+      const dialog = await findByRole('dialog');
+      expect(dialog).toBeInTheDocument();
+      expect(bodyRef.props.overflow).toBe('fit');
+    });
+  });
+  describe('managed focus', () => {
+    var _ModalExample;
+    class ModalExample extends React.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")))));
+      }
+    }
+    ModalExample.displayName = "ModalExample";
+    ModalExample.propTypes = {
+      // eslint-disable-next-line react/forbid-foreign-prop-types
+      ...Modal.propTypes
+    };
+    it('should focus closeButton by default', async () => {
+      const _render18 = render(_ModalExample || (_ModalExample = /*#__PURE__*/React.createElement(ModalExample, {
+          open: true,
+          label: "A Modal"
+        }))),
+        findByText = _render18.findByText;
+      const closeButton = await findByText('Close');
+      expect(closeButton).toBeInTheDocument();
+      await waitFor(() => {
+        expect(document.activeElement).toBe(closeButton);
+      });
+    });
+    it('should take a prop for finding default focus', async () => {
+      const _render19 = render( /*#__PURE__*/React.createElement(ModalExample, {
+          open: true,
+          label: "A Modal",
+          defaultFocusElement: () => document.getElementById('input-one')
+        })),
+        findByTestId = _render19.findByTestId;
+      const input = await findByTestId('input-first');
+      await waitFor(() => {
+        expect(input).toHaveFocus();
+      });
+    });
+  });
+});