@instructure/ui-modal 11.7.4-snapshot-53 → 11.7.4-snapshot-80

package/CHANGELOG.md

@@ -3,9 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.4-snapshot-53](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-53) (2026-06-22)
+## [11.7.4-snapshot-80](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-80) (2026-07-07)
 
-**Note:** Version bump only for package @instructure/ui-modal
+
+### Bug Fixes
+
+* **ui-modal:** restore Modal open/close transition animation ([ef6b3d1](https://github.com/instructure/instructure-ui/commit/ef6b3d14de2db187934b4e7a54276ee38fce6b0b))
+* **ui-modal:** skip Modal.Body tab stop when it has focusable children ([25e4261](https://github.com/instructure/instructure-ui/commit/25e42617898fa6584da0b33eed589e2710875570))
 
 
 

package/es/Modal/v1/ModalBody/index.js

@@ -26,7 +26,7 @@ var _dec, _class;
 import { Component } from 'react';
 import { View } from '@instructure/ui-view/v11_6';
 import { omitProps } from '@instructure/ui-react-utils';
-import { getCSSStyleDeclaration } from '@instructure/ui-dom-utils';
+import { getCSSStyleDeclaration, findTabbable } from '@instructure/ui-dom-utils';
 import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles.js';
 import generateComponentTheme from './theme.js';
@@ -50,6 +50,8 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
     variant: 'default'
   };
   ref = null;
+  resizeObserver;
+  mutationObserver;
   handleRef = el => {
     const {
       elementRef
@@ -73,10 +75,26 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
         isFirefox
       });
     }
+    const finalRef = this.getFinalRef(this.ref);
+    if (finalRef && typeof ResizeObserver !== 'undefined') {
+      this.resizeObserver = new ResizeObserver(() => this.forceUpdate());
+      this.resizeObserver.observe(finalRef);
+      this.mutationObserver = new MutationObserver(() => this.forceUpdate());
+      this.mutationObserver.observe(finalRef, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['disabled', 'tabindex', 'hidden', 'href', 'contenteditable', 'type', 'class', 'style']
+      });
+    }
   }
   componentDidUpdate() {
     this.props.makeStyles?.();
   }
+  componentWillUnmount() {
+    this.resizeObserver?.disconnect();
+    this.mutationObserver?.disconnect();
+  }
   getFinalRef(el) {
     if (!el) {
       return undefined;
@@ -106,6 +124,8 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
     // components. See INSTUI-4674
     const finalRef = this.getFinalRef(this.ref);
     const hasScrollbar = finalRef && Math.abs((finalRef.scrollHeight ?? 0) - (finalRef.getBoundingClientRect()?.height ?? 0)) > 1;
+    const hasTabbableChildren = !!finalRef && findTabbable(finalRef).length > 0;
+    const needsTabIndex = hasScrollbar && !hasTabbableChildren;
     return _jsx(ModalContext.Consumer, {
       children: value => _jsx(View, {
         ...passthroughProps,
@@ -117,9 +137,10 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
         as: as,
         css: this.props.styles?.modalBody,
         padding: padding
-        // check if there is a scrollbar, if so, the element has to be tabbable
+        // check if there is a scrollbar and no focusable children, if so, the
+        // element has to be tabbable
         ,
-        ...(hasScrollbar ? {
+        ...(needsTabIndex ? {
           tabIndex: 0,
           'aria-label': value.bodyScrollAriaLabel
         } : {}),

package/es/Modal/v1/index.js

@@ -89,6 +89,14 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
         transitioning: true,
         open: !!this.props.open
       });
+      // When closing, release focus from the Dialog.
+      // The Dialog stays open so its content can fade out, but the
+      // Transition marks the exiting subtree aria-hidden -- keeping focus inside
+      // it would hide a focused element from assistive tech resulting in a
+      // console warning
+      if (prevProps.open && !this.props.open) {
+        this._content?.blur();
+      }
     }
     this.props.makeStyles?.();
   }
@@ -235,23 +243,23 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
       open: portalIsOpen,
       onOpen: this.handlePortalOpen,
       "data-cid": "Modal",
-      children: _jsx(Transition, {
-        in: open,
-        transitionOnMount: true,
-        type: transition,
-        onEnter: onEnter,
-        onEntering: onEntering,
-        onEntered: createChainedFunction(this.handleTransitionComplete, onEntered, onOpen),
-        onExit: onExit,
-        onExiting: onExiting,
-        onExited: createChainedFunction(this.handleTransitionComplete, onExited, onClose),
-        children: _jsx(ModalContext.Provider, {
-          value: {
-            bodyScrollAriaLabel: this.state.bodyScrollAriaLabel,
-            setBodyScrollAriaLabel: txt => this.setState({
-              bodyScrollAriaLabel: txt
-            })
-          },
+      children: _jsx(ModalContext.Provider, {
+        value: {
+          bodyScrollAriaLabel: this.state.bodyScrollAriaLabel,
+          setBodyScrollAriaLabel: txt => this.setState({
+            bodyScrollAriaLabel: txt
+          })
+        },
+        children: _jsx(Transition, {
+          in: open,
+          transitionOnMount: true,
+          type: transition,
+          onEnter: onEnter,
+          onEntering: onEntering,
+          onEntered: createChainedFunction(this.handleTransitionComplete, onEntered, onOpen),
+          onExit: onExit,
+          onExiting: onExiting,
+          onExited: createChainedFunction(this.handleTransitionComplete, onExited, onClose),
           children: constrain === 'parent' ? _jsx("span", {
             css: this.props.styles?.constrainContext,
             children: this.renderDialog(passthroughProps)

package/es/Modal/v2/ModalBody/index.js

@@ -26,7 +26,7 @@ var _dec, _class;
 import { Component } from 'react';
 import { View } from '@instructure/ui-view/latest';
 import { omitProps } from '@instructure/ui-react-utils';
-import { getCSSStyleDeclaration } from '@instructure/ui-dom-utils';
+import { getCSSStyleDeclaration, findTabbable } from '@instructure/ui-dom-utils';
 import { withStyleNew } from '@instructure/emotion';
 import generateStyle from './styles.js';
 import { allowedProps } from './props.js';
@@ -50,6 +50,8 @@ let ModalBody = (_dec = withStyleNew(generateStyle, 'ModalBody'), _dec(_class =
     variant: 'default'
   };
   ref = null;
+  resizeObserver;
+  mutationObserver;
   handleRef = el => {
     const {
       elementRef
@@ -73,10 +75,26 @@ let ModalBody = (_dec = withStyleNew(generateStyle, 'ModalBody'), _dec(_class =
         isFirefox
       });
     }
+    const finalRef = this.getFinalRef(this.ref);
+    if (finalRef && typeof ResizeObserver !== 'undefined') {
+      this.resizeObserver = new ResizeObserver(() => this.forceUpdate());
+      this.resizeObserver.observe(finalRef);
+      this.mutationObserver = new MutationObserver(() => this.forceUpdate());
+      this.mutationObserver.observe(finalRef, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['disabled', 'tabindex', 'hidden', 'href', 'contenteditable', 'type', 'class', 'style']
+      });
+    }
   }
   componentDidUpdate() {
     this.props.makeStyles?.();
   }
+  componentWillUnmount() {
+    this.resizeObserver?.disconnect();
+    this.mutationObserver?.disconnect();
+  }
   getFinalRef(el) {
     if (!el) {
       return undefined;
@@ -107,6 +125,8 @@ let ModalBody = (_dec = withStyleNew(generateStyle, 'ModalBody'), _dec(_class =
     // components. See INSTUI-4674
     const finalRef = this.getFinalRef(this.ref);
     const hasScrollbar = finalRef && Math.abs((finalRef.scrollHeight ?? 0) - (finalRef.getBoundingClientRect()?.height ?? 0)) > 1;
+    const hasTabbableChildren = !!finalRef && findTabbable(finalRef).length > 0;
+    const needsTabIndex = hasScrollbar && !hasTabbableChildren;
     return _jsx(ModalContext.Consumer, {
       children: value => _jsx(View, {
         ...passthroughProps,
@@ -118,9 +138,10 @@ let ModalBody = (_dec = withStyleNew(generateStyle, 'ModalBody'), _dec(_class =
         as: as,
         css: this.props.styles?.modalBody,
         padding: spacing ? undefined : padding
-        // check if there is a scrollbar, if so, the element has to be tabbable
+        // check if there is a scrollbar and no focusable children, if so, the
+        // element has to be tabbable
         ,
-        ...(hasScrollbar ? {
+        ...(needsTabIndex ? {
           tabIndex: 0,
           'aria-label': value.bodyScrollAriaLabel
         } : {}),

package/es/Modal/v2/index.js

@@ -88,6 +88,14 @@ let Modal = (_dec = withStyleNew(generateStyle), _dec(_class = class Modal exten
         transitioning: true,
         open: !!this.props.open
       });
+      // When closing, release focus from the Dialog.
+      // The Dialog stays open so its content can fade out, but the
+      // Transition marks the exiting subtree aria-hidden -- keeping focus inside
+      // it would hide a focused element from assistive tech resulting in a
+      // console warning
+      if (prevProps.open && !this.props.open) {
+        this._content?.blur();
+      }
     }
     this.props.makeStyles?.();
   }
@@ -167,7 +175,7 @@ let Modal = (_dec = withStyleNew(generateStyle), _dec(_class = class Modal exten
       return child;
     }
   }
-  renderDialog(props, open) {
+  renderDialog(props) {
     const {
       onDismiss,
       label,
@@ -183,7 +191,7 @@ let Modal = (_dec = withStyleNew(generateStyle), _dec(_class = class Modal exten
     const dialog = _jsx(Dialog, {
       ...passthroughProps(props),
       as: as,
-      open: open && !this.state.transitioning,
+      open: true,
       label: label,
       defaultFocusElement: this.defaultFocusElement,
       shouldCloseOnDocumentClick: shouldCloseOnDocumentClick,
@@ -234,27 +242,27 @@ let Modal = (_dec = withStyleNew(generateStyle), _dec(_class = class Modal exten
       open: portalIsOpen,
       onOpen: this.handlePortalOpen,
       "data-cid": "Modal",
-      children: _jsx(Transition, {
-        in: open,
-        transitionOnMount: true,
-        type: transition,
-        onEnter: onEnter,
-        onEntering: onEntering,
-        onEntered: createChainedFunction(this.handleTransitionComplete, onEntered, onOpen),
-        onExit: onExit,
-        onExiting: onExiting,
-        onExited: createChainedFunction(this.handleTransitionComplete, onExited, onClose),
-        children: _jsx(ModalContext.Provider, {
-          value: {
-            bodyScrollAriaLabel: this.state.bodyScrollAriaLabel,
-            setBodyScrollAriaLabel: txt => this.setState({
-              bodyScrollAriaLabel: txt
-            })
-          },
+      children: _jsx(ModalContext.Provider, {
+        value: {
+          bodyScrollAriaLabel: this.state.bodyScrollAriaLabel,
+          setBodyScrollAriaLabel: txt => this.setState({
+            bodyScrollAriaLabel: txt
+          })
+        },
+        children: _jsx(Transition, {
+          in: open,
+          transitionOnMount: true,
+          type: transition,
+          onEnter: onEnter,
+          onEntering: onEntering,
+          onEntered: createChainedFunction(this.handleTransitionComplete, onEntered, onOpen),
+          onExit: onExit,
+          onExiting: onExiting,
+          onExited: createChainedFunction(this.handleTransitionComplete, onExited, onClose),
           children: constrain === 'parent' ? _jsx("span", {
             css: this.props.styles?.constrainContext,
-            children: this.renderDialog(passthroughProps, open)
-          }) : this.renderDialog(passthroughProps, open)
+            children: this.renderDialog(passthroughProps)
+          }) : this.renderDialog(passthroughProps)
         })
       })
     });

package/lib/Modal/v1/ModalBody/index.js

@@ -9,6 +9,7 @@ var _react = require("react");
 var _v11_ = require("@instructure/ui-view/v11_6");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _getCSSStyleDeclaration = require("@instructure/ui-dom-utils/lib/getCSSStyleDeclaration.js");
+var _findTabbable = require("@instructure/ui-dom-utils/lib/findTabbable.js");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles.js"));
 var _theme = _interopRequireDefault(require("./theme.js"));
@@ -55,6 +56,8 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyle)(_styles.defa
     variant: 'default'
   };
   ref = null;
+  resizeObserver;
+  mutationObserver;
   handleRef = el => {
     const {
       elementRef
@@ -78,10 +81,26 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyle)(_styles.defa
         isFirefox
       });
     }
+    const finalRef = this.getFinalRef(this.ref);
+    if (finalRef && typeof ResizeObserver !== 'undefined') {
+      this.resizeObserver = new ResizeObserver(() => this.forceUpdate());
+      this.resizeObserver.observe(finalRef);
+      this.mutationObserver = new MutationObserver(() => this.forceUpdate());
+      this.mutationObserver.observe(finalRef, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['disabled', 'tabindex', 'hidden', 'href', 'contenteditable', 'type', 'class', 'style']
+      });
+    }
   }
   componentDidUpdate() {
     this.props.makeStyles?.();
   }
+  componentWillUnmount() {
+    this.resizeObserver?.disconnect();
+    this.mutationObserver?.disconnect();
+  }
   getFinalRef(el) {
     if (!el) {
       return undefined;
@@ -111,6 +130,8 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyle)(_styles.defa
     // components. See INSTUI-4674
     const finalRef = this.getFinalRef(this.ref);
     const hasScrollbar = finalRef && Math.abs((finalRef.scrollHeight ?? 0) - (finalRef.getBoundingClientRect()?.height ?? 0)) > 1;
+    const hasTabbableChildren = !!finalRef && (0, _findTabbable.findTabbable)(finalRef).length > 0;
+    const needsTabIndex = hasScrollbar && !hasTabbableChildren;
     return (0, _jsxRuntime.jsx)(_ModalContext.default.Consumer, {
       children: value => (0, _jsxRuntime.jsx)(_v11_.View, {
         ...passthroughProps,
@@ -122,9 +143,10 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyle)(_styles.defa
         as: as,
         css: this.props.styles?.modalBody,
         padding: padding
-        // check if there is a scrollbar, if so, the element has to be tabbable
+        // check if there is a scrollbar and no focusable children, if so, the
+        // element has to be tabbable
         ,
-        ...(hasScrollbar ? {
+        ...(needsTabIndex ? {
           tabIndex: 0,
           'aria-label': value.bodyScrollAriaLabel
         } : {}),

package/lib/Modal/v1/index.js

@@ -114,6 +114,14 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
         transitioning: true,
         open: !!this.props.open
       });
+      // When closing, release focus from the Dialog.
+      // The Dialog stays open so its content can fade out, but the
+      // Transition marks the exiting subtree aria-hidden -- keeping focus inside
+      // it would hide a focused element from assistive tech resulting in a
+      // console warning
+      if (prevProps.open && !this.props.open) {
+        this._content?.blur();
+      }
     }
     this.props.makeStyles?.();
   }
@@ -260,23 +268,23 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
       open: portalIsOpen,
       onOpen: this.handlePortalOpen,
       "data-cid": "Modal",
-      children: (0, _jsxRuntime.jsx)(_Transition.Transition, {
-        in: open,
-        transitionOnMount: true,
-        type: transition,
-        onEnter: onEnter,
-        onEntering: onEntering,
-        onEntered: (0, _createChainedFunction.createChainedFunction)(this.handleTransitionComplete, onEntered, onOpen),
-        onExit: onExit,
-        onExiting: onExiting,
-        onExited: (0, _createChainedFunction.createChainedFunction)(this.handleTransitionComplete, onExited, onClose),
-        children: (0, _jsxRuntime.jsx)(_ModalContext.default.Provider, {
-          value: {
-            bodyScrollAriaLabel: this.state.bodyScrollAriaLabel,
-            setBodyScrollAriaLabel: txt => this.setState({
-              bodyScrollAriaLabel: txt
-            })
-          },
+      children: (0, _jsxRuntime.jsx)(_ModalContext.default.Provider, {
+        value: {
+          bodyScrollAriaLabel: this.state.bodyScrollAriaLabel,
+          setBodyScrollAriaLabel: txt => this.setState({
+            bodyScrollAriaLabel: txt
+          })
+        },
+        children: (0, _jsxRuntime.jsx)(_Transition.Transition, {
+          in: open,
+          transitionOnMount: true,
+          type: transition,
+          onEnter: onEnter,
+          onEntering: onEntering,
+          onEntered: (0, _createChainedFunction.createChainedFunction)(this.handleTransitionComplete, onEntered, onOpen),
+          onExit: onExit,
+          onExiting: onExiting,
+          onExited: (0, _createChainedFunction.createChainedFunction)(this.handleTransitionComplete, onExited, onClose),
           children: constrain === 'parent' ? (0, _jsxRuntime.jsx)("span", {
             css: this.props.styles?.constrainContext,
             children: this.renderDialog(passthroughProps)

package/lib/Modal/v2/ModalBody/index.js

@@ -9,6 +9,7 @@ var _react = require("react");
 var _latest = require("@instructure/ui-view/latest");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _getCSSStyleDeclaration = require("@instructure/ui-dom-utils/lib/getCSSStyleDeclaration.js");
+var _findTabbable = require("@instructure/ui-dom-utils/lib/findTabbable.js");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles.js"));
 var _props = require("./props.js");
@@ -55,6 +56,8 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyleNew)(_styles.d
     variant: 'default'
   };
   ref = null;
+  resizeObserver;
+  mutationObserver;
   handleRef = el => {
     const {
       elementRef
@@ -78,10 +81,26 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyleNew)(_styles.d
         isFirefox
       });
     }
+    const finalRef = this.getFinalRef(this.ref);
+    if (finalRef && typeof ResizeObserver !== 'undefined') {
+      this.resizeObserver = new ResizeObserver(() => this.forceUpdate());
+      this.resizeObserver.observe(finalRef);
+      this.mutationObserver = new MutationObserver(() => this.forceUpdate());
+      this.mutationObserver.observe(finalRef, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['disabled', 'tabindex', 'hidden', 'href', 'contenteditable', 'type', 'class', 'style']
+      });
+    }
   }
   componentDidUpdate() {
     this.props.makeStyles?.();
   }
+  componentWillUnmount() {
+    this.resizeObserver?.disconnect();
+    this.mutationObserver?.disconnect();
+  }
   getFinalRef(el) {
     if (!el) {
       return undefined;
@@ -112,6 +131,8 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyleNew)(_styles.d
     // components. See INSTUI-4674
     const finalRef = this.getFinalRef(this.ref);
     const hasScrollbar = finalRef && Math.abs((finalRef.scrollHeight ?? 0) - (finalRef.getBoundingClientRect()?.height ?? 0)) > 1;
+    const hasTabbableChildren = !!finalRef && (0, _findTabbable.findTabbable)(finalRef).length > 0;
+    const needsTabIndex = hasScrollbar && !hasTabbableChildren;
     return (0, _jsxRuntime.jsx)(_ModalContext.default.Consumer, {
       children: value => (0, _jsxRuntime.jsx)(_latest.View, {
         ...passthroughProps,
@@ -123,9 +144,10 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyleNew)(_styles.d
         as: as,
         css: this.props.styles?.modalBody,
         padding: spacing ? undefined : padding
-        // check if there is a scrollbar, if so, the element has to be tabbable
+        // check if there is a scrollbar and no focusable children, if so, the
+        // element has to be tabbable
         ,
-        ...(hasScrollbar ? {
+        ...(needsTabIndex ? {
           tabIndex: 0,
           'aria-label': value.bodyScrollAriaLabel
         } : {}),

package/lib/Modal/v2/index.js

@@ -113,6 +113,14 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyleNew)(_styles.default),
         transitioning: true,
         open: !!this.props.open
       });
+      // When closing, release focus from the Dialog.
+      // The Dialog stays open so its content can fade out, but the
+      // Transition marks the exiting subtree aria-hidden -- keeping focus inside
+      // it would hide a focused element from assistive tech resulting in a
+      // console warning
+      if (prevProps.open && !this.props.open) {
+        this._content?.blur();
+      }
     }
     this.props.makeStyles?.();
   }
@@ -192,7 +200,7 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyleNew)(_styles.default),
       return child;
     }
   }
-  renderDialog(props, open) {
+  renderDialog(props) {
     const {
       onDismiss,
       label,
@@ -208,7 +216,7 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyleNew)(_styles.default),
     const dialog = (0, _jsxRuntime.jsx)(_Dialog.Dialog, {
       ...(0, _passthroughProps.passthroughProps)(props),
       as: as,
-      open: open && !this.state.transitioning,
+      open: true,
       label: label,
       defaultFocusElement: this.defaultFocusElement,
       shouldCloseOnDocumentClick: shouldCloseOnDocumentClick,
@@ -259,27 +267,27 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyleNew)(_styles.default),
       open: portalIsOpen,
       onOpen: this.handlePortalOpen,
       "data-cid": "Modal",
-      children: (0, _jsxRuntime.jsx)(_Transition.Transition, {
-        in: open,
-        transitionOnMount: true,
-        type: transition,
-        onEnter: onEnter,
-        onEntering: onEntering,
-        onEntered: (0, _createChainedFunction.createChainedFunction)(this.handleTransitionComplete, onEntered, onOpen),
-        onExit: onExit,
-        onExiting: onExiting,
-        onExited: (0, _createChainedFunction.createChainedFunction)(this.handleTransitionComplete, onExited, onClose),
-        children: (0, _jsxRuntime.jsx)(_ModalContext.default.Provider, {
-          value: {
-            bodyScrollAriaLabel: this.state.bodyScrollAriaLabel,
-            setBodyScrollAriaLabel: txt => this.setState({
-              bodyScrollAriaLabel: txt
-            })
-          },
+      children: (0, _jsxRuntime.jsx)(_ModalContext.default.Provider, {
+        value: {
+          bodyScrollAriaLabel: this.state.bodyScrollAriaLabel,
+          setBodyScrollAriaLabel: txt => this.setState({
+            bodyScrollAriaLabel: txt
+          })
+        },
+        children: (0, _jsxRuntime.jsx)(_Transition.Transition, {
+          in: open,
+          transitionOnMount: true,
+          type: transition,
+          onEnter: onEnter,
+          onEntering: onEntering,
+          onEntered: (0, _createChainedFunction.createChainedFunction)(this.handleTransitionComplete, onEntered, onOpen),
+          onExit: onExit,
+          onExiting: onExiting,
+          onExited: (0, _createChainedFunction.createChainedFunction)(this.handleTransitionComplete, onExited, onClose),
           children: constrain === 'parent' ? (0, _jsxRuntime.jsx)("span", {
             css: this.props.styles?.constrainContext,
-            children: this.renderDialog(passthroughProps, open)
-          }) : this.renderDialog(passthroughProps, open)
+            children: this.renderDialog(passthroughProps)
+          }) : this.renderDialog(passthroughProps)
         })
       })
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-modal",
-  "version": "11.7.4-snapshot-53",
+  "version": "11.7.4-snapshot-80",
   "description": "A component for displaying content in a dialog overlay",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -14,29 +14,29 @@
   "bugs": "https://github.com/instructure/instructure-ui/issues",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.29.2",
-    "@instructure/emotion": "11.7.4-snapshot-53",
-    "@instructure/shared-types": "11.7.4-snapshot-53",
-    "@instructure/ui-buttons": "11.7.4-snapshot-53",
-    "@instructure/console": "11.7.4-snapshot-53",
-    "@instructure/ui-dialog": "11.7.4-snapshot-53",
-    "@instructure/ui-dom-utils": "11.7.4-snapshot-53",
-    "@instructure/ui-motion": "11.7.4-snapshot-53",
-    "@instructure/ui-overlays": "11.7.4-snapshot-53",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-53",
-    "@instructure/ui-themes": "11.7.4-snapshot-53",
-    "@instructure/ui-utils": "11.7.4-snapshot-53",
-    "@instructure/ui-portal": "11.7.4-snapshot-53",
-    "@instructure/ui-view": "11.7.4-snapshot-53"
+    "@babel/runtime": "^7.29.7",
+    "@instructure/emotion": "11.7.4-snapshot-80",
+    "@instructure/console": "11.7.4-snapshot-80",
+    "@instructure/shared-types": "11.7.4-snapshot-80",
+    "@instructure/ui-buttons": "11.7.4-snapshot-80",
+    "@instructure/ui-dialog": "11.7.4-snapshot-80",
+    "@instructure/ui-dom-utils": "11.7.4-snapshot-80",
+    "@instructure/ui-motion": "11.7.4-snapshot-80",
+    "@instructure/ui-overlays": "11.7.4-snapshot-80",
+    "@instructure/ui-portal": "11.7.4-snapshot-80",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-80",
+    "@instructure/ui-themes": "11.7.4-snapshot-80",
+    "@instructure/ui-view": "11.7.4-snapshot-80",
+    "@instructure/ui-utils": "11.7.4-snapshot-80"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "15.0.7",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-53",
-    "@instructure/ui-position": "11.7.4-snapshot-53",
-    "@instructure/ui-color-utils": "11.7.4-snapshot-53"
+    "vitest": "^4.1.9",
+    "@instructure/ui-color-utils": "11.7.4-snapshot-80",
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-80",
+    "@instructure/ui-position": "11.7.4-snapshot-80"
   },
   "peerDependencies": {
     "react": ">=18 <=19"