@instructure/ui-modal 8.33.1 → 8.33.2

package/lib/Modal/index.js

@@ -1,9 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -27,47 +25,26 @@ Object.defineProperty(exports, "ModalHeader", {
   }
 });
 exports.default = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
-
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
-
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
-
 var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-
 var _Transition = require("@instructure/ui-motion/lib/Transition");
-
 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 _ModalHeader = require("./ModalHeader");
-
 var _ModalBody = require("./ModalBody");
-
 var _ModalFooter = require("./ModalFooter");
-
 var _emotion = require("@instructure/emotion");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 const _excluded = ["open", "onOpen", "onClose", "mountNode", "insertAt", "transition", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "constrain", "overflow"];
-
 var _dec, _dec2, _class, _class2;
-
 /**
 ---
 category: components
@@ -81,65 +58,50 @@ let Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
     this._DOMNode = null;
     this._content = null;
     this.ref = null;
-
     this.handleRef = el => {
       this.ref = el;
     };
-
     this.handlePortalOpen = DOMNode => {
       this.DOMNode = DOMNode;
     };
-
     this.handleTransitionExited = () => {
       this.setState({
         transitioning: false
       });
     };
-
     this.contentRef = el => {
       this._content = el;
-
       if (typeof this.props.contentRef === 'function') {
         this.props.contentRef(el);
       }
     };
-
     this.state = {
       transitioning: false
     };
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
-
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
-
   componentDidUpdate(prevProps) {
     var _this$props$makeStyle2, _this$props2;
-
     if (prevProps.open && !this.props.open) {
       // closing
       this.setState({
         transitioning: prevProps.transition !== null
       });
     }
-
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
-
   get defaultFocusElement() {
     return this.props.defaultFocusElement;
   }
-
   get DOMNode() {
     return this._DOMNode;
   }
-
   set DOMNode(el) {
     this._DOMNode = el;
   }
-
   get maskPlacement() {
     if (this.props.overflow === 'fit') {
       return 'stretch';
@@ -147,12 +109,11 @@ let Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
       return 'center';
     }
   }
-
   renderChildren() {
     const _this$props3 = this.props,
-          children = _this$props3.children,
-          variant = _this$props3.variant,
-          overflow = _this$props3.overflow;
+      children = _this$props3.children,
+      variant = _this$props3.variant,
+      overflow = _this$props3.overflow;
     return _react.Children.map(children, child => {
       if (!child) return; // ignore null, falsy children
 
@@ -168,18 +129,17 @@ let Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
       }
     });
   }
-
   renderDialog(props) {
     const _this$props4 = this.props,
-          onDismiss = _this$props4.onDismiss,
-          label = _this$props4.label,
-          shouldCloseOnDocumentClick = _this$props4.shouldCloseOnDocumentClick,
-          shouldReturnFocus = _this$props4.shouldReturnFocus,
-          liveRegion = _this$props4.liveRegion,
-          size = _this$props4.size,
-          constrain = _this$props4.constrain,
-          as = _this$props4.as,
-          styles = _this$props4.styles;
+      onDismiss = _this$props4.onDismiss,
+      label = _this$props4.label,
+      shouldCloseOnDocumentClick = _this$props4.shouldCloseOnDocumentClick,
+      shouldReturnFocus = _this$props4.shouldReturnFocus,
+      liveRegion = _this$props4.liveRegion,
+      size = _this$props4.size,
+      constrain = _this$props4.constrain,
+      as = _this$props4.as,
+      styles = _this$props4.styles;
     const isFullScreen = size === 'fullscreen';
     const dialog = (0, _emotion.jsx)(_Dialog.Dialog, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
       as: as,
@@ -193,8 +153,8 @@ let Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
       liveRegion: liveRegion,
       onDismiss: onDismiss,
       css: styles === null || styles === void 0 ? void 0 : styles.modal,
-      ref: this.contentRef // aria-modal="true" see VO bug https://bugs.webkit.org/show_bug.cgi?id=174667
-
+      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, {
       placement: this.maskPlacement,
@@ -205,26 +165,24 @@ let Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
       } : {}
     }, dialog);
   }
-
   render() {
     var _this$props$styles;
-
     const _this$props5 = this.props,
-          open = _this$props5.open,
-          onOpen = _this$props5.onOpen,
-          onClose = _this$props5.onClose,
-          mountNode = _this$props5.mountNode,
-          insertAt = _this$props5.insertAt,
-          transition = _this$props5.transition,
-          onEnter = _this$props5.onEnter,
-          onEntering = _this$props5.onEntering,
-          onEntered = _this$props5.onEntered,
-          onExit = _this$props5.onExit,
-          onExiting = _this$props5.onExiting,
-          onExited = _this$props5.onExited,
-          constrain = _this$props5.constrain,
-          overflow = _this$props5.overflow,
-          passthroughProps = (0, _objectWithoutProperties2.default)(_this$props5, _excluded);
+      open = _this$props5.open,
+      onOpen = _this$props5.onOpen,
+      onClose = _this$props5.onClose,
+      mountNode = _this$props5.mountNode,
+      insertAt = _this$props5.insertAt,
+      transition = _this$props5.transition,
+      onEnter = _this$props5.onEnter,
+      onEntering = _this$props5.onEntering,
+      onEntered = _this$props5.onEntered,
+      onExit = _this$props5.onExit,
+      onExiting = _this$props5.onExiting,
+      onExited = _this$props5.onExited,
+      constrain = _this$props5.constrain,
+      overflow = _this$props5.overflow,
+      passthroughProps = (0, _objectWithoutProperties2.default)(_this$props5, _excluded);
     const portalIsOpen = open || this.state.transitioning;
     return (0, _emotion.jsx)(_Portal.Portal, {
       mountNode: mountNode,
@@ -248,7 +206,6 @@ let Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
       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)));
   }
-
 }, _class2.displayName = "Modal", _class2.componentId = 'Modal', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   open: false,
   size: 'auto',

package/lib/Modal/locator.js

@@ -10,9 +10,7 @@ Object.defineProperty(exports, "ModalLocator", {
   }
 });
 exports.default = void 0;
-
 var _ModalLocator = require("./ModalLocator");
-
 /*
  * The MIT License (MIT)
  *

package/lib/Modal/props.js

@@ -1,26 +1,17 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = exports.allowedProps = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _element = require("@instructure/ui-prop-types/lib/element.js");
-
 var _Children = require("@instructure/ui-prop-types/lib/Children.js");
-
 var _uiMotion = require("@instructure/ui-motion");
-
 var _ModalHeader = require("./ModalHeader");
-
 var _ModalBody = require("./ModalBody");
-
 var _ModalFooter = require("./ModalFooter");
-
 /*
  * The MIT License (MIT)
  *
@@ -44,6 +35,7 @@ var _ModalFooter = require("./ModalFooter");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   label: _propTypes.default.string.isRequired,
   children: _Children.Children.enforceOrder([_ModalHeader.ModalHeader, _ModalBody.ModalBody, _ModalFooter.ModalFooter], [_ModalHeader.ModalHeader, _ModalBody.ModalBody], [_ModalBody.ModalBody, _ModalFooter.ModalFooter], [_ModalBody.ModalBody]),

package/lib/Modal/styles.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -41,8 +40,8 @@ exports.default = void 0;
  */
 const generateStyle = (componentTheme, props) => {
   const size = props.size,
-        variant = props.variant,
-        overflow = props.overflow;
+    variant = props.variant,
+    overflow = props.overflow;
   const commonSizeStyleExceptForFullscreen = {
     maxWidth: '95%',
     maxHeight: '95%',
@@ -108,6 +107,5 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 };
-
 var _default = generateStyle;
 exports.default = _default;

package/lib/Modal/theme.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -36,11 +35,11 @@ exports.default = void 0;
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        typography = theme.typography,
-        borders = theme.borders,
-        breakpoints = theme.breakpoints,
-        shadows = theme.shadows,
-        stacking = theme.stacking;
+    typography = theme.typography,
+    borders = theme.borders,
+    breakpoints = theme.breakpoints,
+    shadows = theme.shadows,
+    stacking = theme.stacking;
   const componentVariables = {
     fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
     textColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
@@ -56,9 +55,9 @@ const generateComponentTheme = theme => {
     boxShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth3,
     zIndex: stacking === null || stacking === void 0 ? void 0 : stacking.topmost
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 var _default = generateComponentTheme;
 exports.default = _default;

package/lib/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "Modal", {
     return _Modal.Modal;
   }
 });
-
 var _Modal = require("./Modal");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-modal",
-  "version": "8.33.1",
+  "version": "8.33.2",
   "description": "A component for displaying content in a dialog overlay",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,31 +24,32 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.33.1",
-    "@instructure/emotion": "8.33.1",
-    "@instructure/shared-types": "8.33.1",
-    "@instructure/ui-buttons": "8.33.1",
-    "@instructure/ui-dialog": "8.33.1",
-    "@instructure/ui-motion": "8.33.1",
-    "@instructure/ui-overlays": "8.33.1",
-    "@instructure/ui-portal": "8.33.1",
-    "@instructure/ui-prop-types": "8.33.1",
-    "@instructure/ui-react-utils": "8.33.1",
-    "@instructure/ui-testable": "8.33.1",
-    "@instructure/ui-utils": "8.33.1",
-    "@instructure/ui-view": "8.33.1",
+    "@instructure/console": "8.33.2",
+    "@instructure/emotion": "8.33.2",
+    "@instructure/shared-types": "8.33.2",
+    "@instructure/ui-buttons": "8.33.2",
+    "@instructure/ui-dialog": "8.33.2",
+    "@instructure/ui-dom-utils": "8.33.2",
+    "@instructure/ui-motion": "8.33.2",
+    "@instructure/ui-overlays": "8.33.2",
+    "@instructure/ui-portal": "8.33.2",
+    "@instructure/ui-prop-types": "8.33.2",
+    "@instructure/ui-react-utils": "8.33.2",
+    "@instructure/ui-testable": "8.33.2",
+    "@instructure/ui-utils": "8.33.2",
+    "@instructure/ui-view": "8.33.2",
     "prop-types": "^15"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.33.1",
-    "@instructure/ui-color-utils": "8.33.1",
-    "@instructure/ui-position": "8.33.1",
-    "@instructure/ui-test-locator": "8.33.1",
-    "@instructure/ui-test-utils": "8.33.1",
-    "@instructure/ui-themes": "8.33.1"
+    "@instructure/ui-babel-preset": "8.33.2",
+    "@instructure/ui-color-utils": "8.33.2",
+    "@instructure/ui-position": "8.33.2",
+    "@instructure/ui-test-locator": "8.33.2",
+    "@instructure/ui-test-utils": "8.33.2",
+    "@instructure/ui-themes": "8.33.2"
   },
   "publishConfig": {
     "access": "public"

package/src/Modal/ModalBody/index.tsx

@@ -28,13 +28,14 @@ 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 generateStyle from './styles'
 import generateComponentTheme from './theme'
 
 import { propTypes, allowedProps } from './props'
-import type { ModalBodyProps } from './props'
+import type { ModalBodyProps, ModalBodyState } from './props'
 
 /**
 ---
@@ -45,7 +46,7 @@ id: Modal.Body
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
-class ModalBody extends Component<ModalBodyProps> {
+class ModalBody extends Component<ModalBodyProps, ModalBodyState> {
   static readonly componentId = 'Modal.Body'
 
   static propTypes = propTypes
@@ -68,8 +69,30 @@ class ModalBody extends Component<ModalBodyProps> {
     }
   }
 
+  constructor(props: ModalBodyProps) {
+    super(props)
+
+    this.state = {
+      isFirefox: false
+    }
+  }
+
   componentDidMount() {
     this.props.makeStyles?.()
+
+    // We detect if -moz- prefixed style is present to identify whether we are in Firefox browser
+    const style = this.ref && getComputedStyle(this.ref)
+    const isFirefox = !!(
+      style &&
+      Array.prototype.slice
+        .call(style)
+        .join('')
+        .match(/(?:-moz-)/)
+    )
+
+    if (isFirefox) {
+      this.setState({ isFirefox })
+    }
   }
 
   componentDidUpdate() {
@@ -96,7 +119,11 @@ class ModalBody extends Component<ModalBodyProps> {
         as={as}
         css={this.props.styles?.modalBody}
         padding={padding}
-        tabIndex={-1} // prevent FF from focusing view when scrollable
+        // We have to make an exception in Firefox, because it makes
+        //  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}
       </View>

package/src/Modal/ModalBody/props.ts

@@ -58,6 +58,10 @@ type ModalBodyProps = ModalBodyOwnProps &
 
 type ModalBodyStyle = ComponentStyle<'modalBody'>
 
+type ModalBodyState = {
+  isFirefox: boolean
+}
+
 const propTypes: PropValidators<PropKeys> = {
   children: PropTypes.node,
   padding: ThemeablePropTypes.spacing,
@@ -79,5 +83,5 @@ const allowedProps: AllowedPropKeys = [
   'overflow'
 ]
 
-export type { ModalBodyProps, ModalBodyStyle }
+export type { ModalBodyProps, ModalBodyState, ModalBodyStyle }
 export { propTypes, allowedProps }

package/tsconfig.build.json

@@ -12,6 +12,7 @@
     { "path": "../shared-types/tsconfig.build.json" },
     { "path": "../ui-buttons/tsconfig.build.json" },
     { "path": "../ui-dialog/tsconfig.build.json" },
+    { "path": "../ui-dom-utils/tsconfig.build.json" },
     { "path": "../ui-motion/tsconfig.build.json" },
     { "path": "../ui-overlays/tsconfig.build.json" },
     { "path": "../ui-portal/tsconfig.build.json" },