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

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.
 
-## [10.16.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-0) (2025-04-15)
+## [10.16.1](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1) (2025-04-22)
 
 **Note:** Version bump only for package @instructure/ui-modal
 

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

@@ -23,7 +23,6 @@ var _ModalBody, _ModalBody2, _ModalBody3;
  * SOFTWARE.
  */
 
-import React from 'react';
 import { render } from '@testing-library/react';
 import { vi } from 'vitest';
 import '@testing-library/jest-dom';
@@ -32,19 +31,23 @@ import canvas from '@instructure/ui-themes';
 import { View } from '@instructure/ui-view';
 import { ModalBody } from '../index';
 import generateComponentTheme from '../theme';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 const BODY_TEXT = 'Modal-body-text';
 describe('<ModalBody />', () => {
   it('should render', async () => {
-    const _render = render(_ModalBody || (_ModalBody = /*#__PURE__*/React.createElement(ModalBody, null, BODY_TEXT))),
+    const _render = render(_ModalBody || (_ModalBody = _jsx(ModalBody, {
+        children: 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))),
+    const _render2 = render(_ModalBody2 || (_ModalBody2 = _jsx(ModalBody, {
+        variant: "inverse",
+        children: BODY_TEXT
+      }))),
       findByText = _render2.findByText;
     const modalBody = await findByText(BODY_TEXT);
     const modalBodyStyle = window.getComputedStyle(modalBody);
@@ -53,14 +56,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 = render(/*#__PURE__*/React.createElement("div", {
+    const _render3 = render(_jsx("div", {
         style: {
           width: '500px',
           height: '600px'
-        }
-      }, _ModalBody3 || (_ModalBody3 = /*#__PURE__*/React.createElement(ModalBody, {
-        overflow: "fit"
-      }, BODY_TEXT)))),
+        },
+        children: _ModalBody3 || (_ModalBody3 = _jsx(ModalBody, {
+          overflow: "fit",
+          children: BODY_TEXT
+        }))
+      })),
       findByText = _render3.findByText;
     const modalBody = await findByText(BODY_TEXT);
     const modalBodyStyle = window.getComputedStyle(modalBody);
@@ -81,7 +86,9 @@ describe('<ModalBody />', () => {
           const props = {
             [prop]: allowedProps[prop]
           };
-          render(/*#__PURE__*/React.createElement(ModalBody, props));
+          render(_jsx(ModalBody, {
+            ...props
+          }));
           expect(consoleErrorSpy).not.toHaveBeenCalled();
           consoleErrorSpy.mockRestore();
         });
@@ -92,7 +99,9 @@ describe('<ModalBody />', () => {
           const props = {
             [prop]: 'NOT_ALLOWED_VALUE'
           };
-          render(/*#__PURE__*/React.createElement(ModalBody, props));
+          render(_jsx(ModalBody, {
+            ...props
+          }));
           expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
           consoleErrorSpy.mockRestore();
         });

package/es/Modal/ModalBody/index.js

@@ -25,16 +25,16 @@ var _dec, _dec2, _class, _ModalBody;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Component } from 'react';
 import { View } from '@instructure/ui-view';
 import { testable } from '@instructure/ui-testable';
 import { omitProps } from '@instructure/ui-react-utils';
 import { getComputedStyle } from '@instructure/ui-dom-utils';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
 parent: Modal
@@ -85,7 +85,8 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
       rest = _objectWithoutProperties(_this$props3, _excluded);
     const passthroughProps = View.omitViewProps(omitProps(rest, ModalBody.allowedProps), ModalBody);
     const isFit = overflow === 'fit';
-    return jsx(View, Object.assign({}, passthroughProps, {
+    return _jsx(View, {
+      ...passthroughProps,
       display: "block",
       width: isFit ? '100%' : void 0,
       height: isFit ? '100%' : void 0,
@@ -97,9 +98,12 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
       //  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 = propTypes, _ModalBody.allowedProps = allowedProps, _ModalBody.defaultProps = {
   padding: 'medium',

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

@@ -23,26 +23,29 @@ var _ModalFooter, _ModalFooter2;
  * 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';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 const FOOTER_TEXT = 'Modal-footer-text';
 describe('<ModalFooter />', () => {
   it('should render', async () => {
-    const _render = render(_ModalFooter || (_ModalFooter = /*#__PURE__*/React.createElement(ModalFooter, null, FOOTER_TEXT))),
+    const _render = render(_ModalFooter || (_ModalFooter = _jsx(ModalFooter, {
+        children: 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))),
+    const _render2 = render(_ModalFooter2 || (_ModalFooter2 = _jsx(ModalFooter, {
+        variant: "inverse",
+        children: FOOTER_TEXT
+      }))),
       findByText = _render2.findByText;
     const modalFooter = await findByText(FOOTER_TEXT);
     const modalFooterStyle = window.getComputedStyle(modalFooter);

package/es/Modal/ModalFooter/index.js

@@ -25,14 +25,14 @@ var _dec, _dec2, _class, _ModalFooter;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Component } from 'react';
 import { passthroughProps } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
 parent: Modal
@@ -60,11 +60,12 @@ let ModalFooter = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
     const _this$props3 = this.props,
       children = _this$props3.children,
       rest = _objectWithoutProperties(_this$props3, _excluded);
-    return jsx("div", Object.assign({
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalFooter
-    }, passthroughProps(rest), {
-      ref: this.handleRef
-    }), children);
+    return _jsx("div", {
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalFooter,
+      ...passthroughProps(rest),
+      ref: this.handleRef,
+      children: children
+    });
   }
 }, _ModalFooter.displayName = "ModalFooter", _ModalFooter.componentId = 'Modal.Footer', _ModalFooter.propTypes = propTypes, _ModalFooter.allowedProps = allowedProps, _ModalFooter.defaultProps = {
   variant: 'default'

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

@@ -23,26 +23,29 @@ var _ModalHeader, _ModalHeader2, _ModalHeader3, _ModalHeader4, _ModalHeader5;
  * 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';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 const HEADER_TEXT = 'Modal-footer-text';
 describe('<ModalHeader />', () => {
   it('should render', async () => {
-    const _render = render(_ModalHeader || (_ModalHeader = /*#__PURE__*/React.createElement(ModalHeader, null, HEADER_TEXT))),
+    const _render = render(_ModalHeader || (_ModalHeader = _jsx(ModalHeader, {
+        children: 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))),
+    const _render2 = render(_ModalHeader2 || (_ModalHeader2 = _jsx(ModalHeader, {
+        variant: "inverse",
+        children: HEADER_TEXT
+      }))),
       findByText = _render2.findByText;
     const modalHeader = await findByText(HEADER_TEXT);
     const modalHeaderStyle = window.getComputedStyle(modalHeader);
@@ -55,7 +58,9 @@ describe('<ModalHeader />', () => {
   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))),
+      const _render3 = render(_ModalHeader3 || (_ModalHeader3 = _jsx(ModalHeader, {
+          children: HEADER_TEXT
+        }))),
         findByText = _render3.findByText;
       const modalHeader = await findByText(HEADER_TEXT);
       const modalHeaderStyle = window.getComputedStyle(modalHeader);
@@ -65,9 +70,10 @@ describe('<ModalHeader />', () => {
     });
     it('should correctly set default spacing', async () => {
       const themeVariables = generateComponentTheme(canvas);
-      const _render4 = render(_ModalHeader4 || (_ModalHeader4 = /*#__PURE__*/React.createElement(ModalHeader, {
-          spacing: "default"
-        }, HEADER_TEXT))),
+      const _render4 = render(_ModalHeader4 || (_ModalHeader4 = _jsx(ModalHeader, {
+          spacing: "default",
+          children: HEADER_TEXT
+        }))),
         findByText = _render4.findByText;
       const modalHeader = await findByText(HEADER_TEXT);
       const modalHeaderStyle = window.getComputedStyle(modalHeader);
@@ -77,9 +83,10 @@ describe('<ModalHeader />', () => {
     });
     it('should correctly set compact spacing', async () => {
       const themeVariables = generateComponentTheme(canvas);
-      const _render5 = render(_ModalHeader5 || (_ModalHeader5 = /*#__PURE__*/React.createElement(ModalHeader, {
-          spacing: "compact"
-        }, HEADER_TEXT))),
+      const _render5 = render(_ModalHeader5 || (_ModalHeader5 = _jsx(ModalHeader, {
+          spacing: "compact",
+          children: HEADER_TEXT
+        }))),
         findByText = _render5.findByText;
       const modalHeader = await findByText(HEADER_TEXT);
       const modalHeaderStyle = window.getComputedStyle(modalHeader);

package/es/Modal/ModalHeader/index.js

@@ -25,15 +25,15 @@ var _dec, _dec2, _class, _ModalHeader;
  * SOFTWARE.
  */
 
-/** @jsx jsx */
-import React, { Component } from 'react';
+import { Children, Component } from 'react';
 import { matchComponentTypes, passthroughProps } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
-import { withStyle, jsx } from '@instructure/emotion';
+import { withStyle } from '@instructure/emotion';
 import { CloseButton } from '@instructure/ui-buttons';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
 parent: Modal
@@ -63,7 +63,7 @@ let ModalHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   }
   get usesCloseButton() {
     let hasCloseButton = false;
-    React.Children.forEach(this.props.children, child => {
+    Children.forEach(this.props.children, child => {
       if (child && matchComponentTypes(child, [CloseButton])) {
         hasCloseButton = true;
       }
@@ -75,11 +75,12 @@ let ModalHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
     const _this$props3 = this.props,
       children = _this$props3.children,
       rest = _objectWithoutProperties(_this$props3, _excluded);
-    return jsx("div", Object.assign({
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalHeader
-    }, passthroughProps(rest), {
-      ref: this.handleRef
-    }), children);
+    return _jsx("div", {
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalHeader,
+      ...passthroughProps(rest),
+      ref: this.handleRef,
+      children: children
+    });
   }
 }, _ModalHeader.displayName = "ModalHeader", _ModalHeader.componentId = 'Modal.Header', _ModalHeader.propTypes = propTypes, _ModalHeader.allowedProps = allowedProps, _ModalHeader.defaultProps = {
   variant: 'default',