@instructure/ui-modal 10.13.0 → 10.13.1-pr-snapshot-1741357986437

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.13.1-pr-snapshot-1741357986437](https://github.com/instructure/instructure-ui/compare/v10.13.0...v10.13.1-pr-snapshot-1741357986437) (2025-03-07)
+
+**Note:** Version bump only for package @instructure/ui-modal
+
+
+
+
+
 # [10.13.0](https://github.com/instructure/instructure-ui/compare/v10.12.0...v10.13.0) (2025-03-06)
 
 **Note:** Version bump only for package @instructure/ui-modal

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

@@ -7,7 +7,7 @@ var _vitest = require("vitest");
 require("@testing-library/jest-dom");
 var _uiColorUtils = require("@instructure/ui-color-utils");
 var _uiThemes = _interopRequireDefault(require("@instructure/ui-themes"));
-var _View = require("@instructure/ui-view/lib/View");
+var _uiView = require("@instructure/ui-view");
 var _index = require("../index");
 var _theme = _interopRequireDefault(require("../theme"));
 var _ModalBody, _ModalBody2, _ModalBody3;
@@ -75,7 +75,7 @@ describe('<ModalBody />', () => {
       elementRef: () => {},
       as: 'section'
     };
-    const allProps = _View.View.allowedProps.filter(prop => prop !== 'children');
+    const allProps = _uiView.View.allowedProps.filter(prop => prop !== 'children');
     allProps.forEach(prop => {
       if (prop in allowedProps) {
         it(`should allow the '${prop}' prop`, () => {

package/lib/Modal/ModalBody/index.js

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.ModalBody = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
-var _View = require("@instructure/ui-view/lib/View");
-var _testable = require("@instructure/ui-testable/lib/testable.js");
-var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-var _getComputedStyle = require("@instructure/ui-dom-utils/lib/getComputedStyle.js");
+var _uiView = require("@instructure/ui-view");
+var _uiTestable = require("@instructure/ui-testable");
+var _uiReactUtils = require("@instructure/ui-react-utils");
+var _uiDomUtils = require("@instructure/ui-dom-utils");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
@@ -47,7 +47,7 @@ parent: Modal
 id: Modal.Body
 ---
 **/
-let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_ModalBody = class ModalBody extends _react.Component {
+let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = (_ModalBody = class ModalBody extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -67,7 +67,7 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyle)(_styles.defa
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
 
     // We detect if -moz- prefixed style is present to identify whether we are in Firefox browser
-    const style = this.ref && (0, _getComputedStyle.getComputedStyle)(this.ref);
+    const style = this.ref && (0, _uiDomUtils.getComputedStyle)(this.ref);
     const isFirefox = !!(style && Array.prototype.slice.call(style).join('').match(/(?:-moz-)/));
     if (isFirefox) {
       this.setState({
@@ -89,9 +89,9 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyle)(_styles.defa
       padding = _this$props3.padding,
       children = _this$props3.children,
       rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
-    const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(rest, ModalBody.allowedProps), ModalBody);
+    const passthroughProps = _uiView.View.omitViewProps((0, _uiReactUtils.omitProps)(rest, ModalBody.allowedProps), ModalBody);
     const isFit = overflow === 'fit';
-    return (0, _emotion.jsx)(_View.View, Object.assign({}, passthroughProps, {
+    return (0, _emotion.jsx)(_uiView.View, Object.assign({}, passthroughProps, {
       display: "block",
       width: isFit ? '100%' : void 0,
       height: isFit ? '100%' : void 0,

package/lib/Modal/ModalFooter/index.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.ModalFooter = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
-var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
-var _testable = require("@instructure/ui-testable/lib/testable.js");
+var _uiReactUtils = require("@instructure/ui-react-utils");
+var _uiTestable = require("@instructure/ui-testable");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
@@ -45,7 +45,7 @@ parent: Modal
 id: Modal.Footer
 ---
 **/
-let ModalFooter = exports.ModalFooter = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_ModalFooter = class ModalFooter extends _react.Component {
+let ModalFooter = exports.ModalFooter = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = (_ModalFooter = class ModalFooter extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -68,7 +68,7 @@ let ModalFooter = exports.ModalFooter = (_dec = (0, _emotion.withStyle)(_styles.
       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), {
+    }, (0, _uiReactUtils.passthroughProps)(rest), {
       ref: this.handleRef
     }), children);
   }

package/lib/Modal/ModalHeader/index.js

@@ -8,11 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.ModalHeader = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(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");
+var _uiReactUtils = require("@instructure/ui-react-utils");
+var _uiTestable = require("@instructure/ui-testable");
 var _emotion = require("@instructure/emotion");
-var _CloseButton = require("@instructure/ui-buttons/lib/CloseButton");
+var _uiButtons = require("@instructure/ui-buttons");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
@@ -48,7 +47,7 @@ parent: Modal
 id: Modal.Header
 ---
 **/
-let ModalHeader = exports.ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_ModalHeader = class ModalHeader extends _react.Component {
+let ModalHeader = exports.ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = (_ModalHeader = class ModalHeader extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -72,7 +71,7 @@ let ModalHeader = exports.ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.
   get usesCloseButton() {
     let hasCloseButton = false;
     _react.default.Children.forEach(this.props.children, child => {
-      if (child && (0, _matchComponentTypes.matchComponentTypes)(child, [_CloseButton.CloseButton])) {
+      if (child && (0, _uiReactUtils.matchComponentTypes)(child, [_uiButtons.CloseButton])) {
         hasCloseButton = true;
       }
     });
@@ -85,7 +84,7 @@ let ModalHeader = exports.ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.
       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), {
+    }, (0, _uiReactUtils.passthroughProps)(rest), {
       ref: this.handleRef
     }), children);
   }

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

@@ -8,7 +8,7 @@ var _vitest = require("vitest");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
 var _index = require("../index");
-var _View2 = require("@instructure/ui-view/lib/View");
+var _uiView = require("@instructure/ui-view");
 const _excluded = ["label"];
 var _Modal, _Modal2, _Modal$Body, _Modal3, _Modal4, _View, _Modal5, _Modal$Body2, _Modal$Body3, _Modal$Body4, _Modal$Body5, _Modal$Body6, _Modal$Body7, _Modal6, _Modal7, _input, _Modal$Header, _Modal$Body8, _Modal$Footer;
 /*
@@ -155,7 +155,7 @@ describe('<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))),
+      }, _View || (_View = /*#__PURE__*/_react.default.createElement(_uiView.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');

package/lib/Modal/index.js

@@ -26,15 +26,14 @@ Object.defineProperty(exports, "ModalHeader", {
 exports.default = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 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 _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
-var _testable = require("@instructure/ui-testable/lib/testable.js");
-var _canUseDOM = require("@instructure/ui-dom-utils/lib/canUseDOM.js");
-var _Transition = require("@instructure/ui-motion/lib/Transition");
-var _Portal = require("@instructure/ui-portal/lib/Portal");
-var _Dialog = require("@instructure/ui-dialog/lib/Dialog");
-var _Mask = require("@instructure/ui-overlays/lib/Mask");
+var _uiReactUtils = require("@instructure/ui-react-utils");
+var _uiUtils = require("@instructure/ui-utils");
+var _uiTestable = require("@instructure/ui-testable");
+var _uiDomUtils = require("@instructure/ui-dom-utils");
+var _uiMotion = require("@instructure/ui-motion");
+var _uiPortal = require("@instructure/ui-portal");
+var _uiDialog = require("@instructure/ui-dialog");
+var _uiOverlays = require("@instructure/ui-overlays");
 var _ModalHeader = require("./ModalHeader");
 var _ModalBody = require("./ModalBody");
 var _ModalFooter = require("./ModalFooter");
@@ -74,7 +73,7 @@ category: components
 tags: overlay, portal, dialog
 ---
 **/
-let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_Modal = class Modal extends _react.Component {
+let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = (_Modal = class Modal extends _react.Component {
   constructor(props) {
     var _props$open;
     super(props);
@@ -105,7 +104,7 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
     };
     this.getWindowHeightInRem = () => {
       var _getComputedStyle;
-      if (!_canUseDOM.canUseDOM) {
+      if (!_uiDomUtils.canUseDOM) {
         return Infinity;
       }
       const rootFontSize = parseFloat(((_getComputedStyle = getComputedStyle(document.documentElement)) === null || _getComputedStyle === void 0 ? void 0 : _getComputedStyle.fontSize) || '16');
@@ -183,7 +182,7 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
       if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
         if (child.type === Modal.Header || child.type === Modal.Body) {
           if (child.type === Modal.Header) {
-            const headerWithProp = (0, _safeCloneElement.safeCloneElement)(child, {
+            const headerWithProp = (0, _uiReactUtils.safeCloneElement)(child, {
               smallViewPort: true
             });
             headerAndBody.push(headerWithProp);
@@ -210,7 +209,7 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
   cloneChildWithProps(child, variant, overflow) {
     if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
       var _child$props;
-      return (0, _safeCloneElement.safeCloneElement)(child, {
+      return (0, _uiReactUtils.safeCloneElement)(child, {
         variant: variant,
         overflow: (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.overflow) || overflow
       });
@@ -230,7 +229,7 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
       as = _this$props5.as,
       styles = _this$props5.styles;
     const isFullScreen = size === 'fullscreen';
-    const dialog = (0, _emotion.jsx)(_Dialog.Dialog, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
+    const dialog = (0, _emotion.jsx)(_uiDialog.Dialog, Object.assign({}, (0, _uiReactUtils.passthroughProps)(props), {
       as: as,
       open: true,
       label: label,
@@ -245,7 +244,7 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
       ref: this.contentRef
       // aria-modal="true" see VO bug https://bugs.webkit.org/show_bug.cgi?id=174667
     }), this.renderChildren());
-    return (0, _emotion.jsx)(_Mask.Mask, {
+    return (0, _emotion.jsx)(_uiOverlays.Mask, {
       placement: this.maskPlacement,
       fullscreen: constrain === 'window',
       themeOverride: isFullScreen ? {
@@ -273,21 +272,21 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
       overflow = _this$props6.overflow,
       passthroughProps = (0, _objectWithoutProperties2.default)(_this$props6, _excluded);
     const portalIsOpen = this.state.open || this.state.transitioning;
-    return (0, _emotion.jsx)(_Portal.Portal, {
+    return (0, _emotion.jsx)(_uiPortal.Portal, {
       mountNode: mountNode,
       insertAt: insertAt,
       open: portalIsOpen,
       onOpen: this.handlePortalOpen
-    }, (0, _emotion.jsx)(_Transition.Transition, {
+    }, (0, _emotion.jsx)(_uiMotion.Transition, {
       in: open,
       transitionOnMount: true,
       type: transition,
       onEnter: onEnter,
       onEntering: onEntering,
-      onEntered: (0, _createChainedFunction.createChainedFunction)(this.handleTransitionComplete, onEntered, onOpen),
+      onEntered: (0, _uiUtils.createChainedFunction)(this.handleTransitionComplete, onEntered, onOpen),
       onExit: onExit,
       onExiting: onExiting,
-      onExited: (0, _createChainedFunction.createChainedFunction)(this.handleTransitionComplete, onExited, onClose)
+      onExited: (0, _uiUtils.createChainedFunction)(this.handleTransitionComplete, onExited, onClose)
     }, constrain === 'parent' ? (0, _emotion.jsx)("span", {
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.constrainContext
     }, this.renderDialog(passthroughProps)) : this.renderDialog(passthroughProps)));

package/lib/Modal/props.js

@@ -6,7 +6,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 _uiPropTypes = require("@instructure/ui-prop-types");
 var _uiMotion = require("@instructure/ui-motion");
 /*
  * The MIT License (MIT)
@@ -46,9 +46,9 @@ const propTypes = exports.propTypes = {
   onClose: _propTypes.default.func,
   onDismiss: _propTypes.default.func,
   contentRef: _propTypes.default.func,
-  mountNode: _propTypes.default.oneOfType([_element.element, _propTypes.default.func]),
+  mountNode: _propTypes.default.oneOfType([_uiPropTypes.element, _propTypes.default.func]),
   insertAt: _propTypes.default.oneOf(['bottom', 'top']),
-  liveRegion: _propTypes.default.oneOfType([_element.element, _propTypes.default.arrayOf(_element.element), _propTypes.default.func]),
+  liveRegion: _propTypes.default.oneOfType([_uiPropTypes.element, _propTypes.default.arrayOf(_uiPropTypes.element), _propTypes.default.func]),
   transition: _uiMotion.transitionTypePropType,
   onEnter: _propTypes.default.func,
   onEntering: _propTypes.default.func,

package/package.json

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