@instructure/ui-modal 8.33.1 → 8.33.2

package/lib/Modal/ModalBody/index.js

@@ -1,34 +1,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _emotion = require("@instructure/emotion");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 const _excluded = ["as", "elementRef", "overflow", "variant", "padding", "children"];
-
 var _dec, _dec2, _class, _class2;
-
 /**
 ---
 parent: Modal
@@ -37,46 +25,48 @@ id: Modal.Body
 @tsProps
 **/
 let ModalBody = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class ModalBody extends _react.Component {
-  constructor() {
-    super(...arguments);
+  constructor(props) {
+    super(props);
     this.ref = null;
-
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
       this.ref = el;
-
       if (typeof elementRef === 'function') {
         elementRef(el);
       }
     };
+    this.state = {
+      isFirefox: 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);
-  }
 
+    // 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 isFirefox = !!(style && Array.prototype.slice.call(style).join('').match(/(?:-moz-)/));
+    if (isFirefox) {
+      this.setState({
+        isFirefox
+      });
+    }
+  }
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props2;
-
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
-
   render() {
     var _this$props$styles;
-
     const _this$props3 = this.props,
-          as = _this$props3.as,
-          elementRef = _this$props3.elementRef,
-          overflow = _this$props3.overflow,
-          variant = _this$props3.variant,
-          padding = _this$props3.padding,
-          children = _this$props3.children,
-          rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
-
+      as = _this$props3.as,
+      elementRef = _this$props3.elementRef,
+      overflow = _this$props3.overflow,
+      variant = _this$props3.variant,
+      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 isFit = overflow === 'fit';
     return (0, _emotion.jsx)(_View.View, Object.assign({}, passthroughProps, {
       display: "block",
@@ -85,12 +75,15 @@ let ModalBody = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
       elementRef: this.handleRef,
       as: as,
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalBody,
-      padding: padding,
-      tabIndex: -1 // prevent FF from focusing view when scrollable
-
+      padding: padding
+      // 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);
   }
-
 }, _class2.displayName = "ModalBody", _class2.componentId = 'Modal.Body', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   padding: 'medium',
   as: 'div',

package/lib/Modal/ModalBody/props.js

@@ -1,16 +1,12 @@
 "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 _emotion = require("@instructure/emotion");
-
 /*
  * The MIT License (MIT)
  *
@@ -34,10 +30,10 @@ var _emotion = require("@instructure/emotion");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   children: _propTypes.default.node,
   padding: _emotion.ThemeablePropTypes.spacing,
-
   /**
    * provides a reference to the underlying html root element
    */

package/lib/Modal/ModalBody/styles.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -57,6 +56,5 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 };
-
 var _default = generateStyle;
 exports.default = _default;

package/lib/Modal/ModalBody/theme.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -40,6 +39,5 @@ const generateComponentTheme = theme => {
     inverseBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrandSecondary
   };
 };
-
 var _default = generateComponentTheme;
 exports.default = _default;

package/lib/Modal/ModalFooter/index.js

@@ -1,32 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _emotion = require("@instructure/emotion");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 const _excluded = ["children"];
-
 var _dec, _dec2, _class, _class2;
-
 /**
 ---
 parent: Modal
@@ -38,37 +26,29 @@ let ModalFooter = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   constructor() {
     super(...arguments);
     this.ref = null;
-
     this.handleRef = el => {
       this.ref = el;
     };
   }
-
   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() {
     var _this$props$makeStyle2, _this$props2;
-
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
-
   render() {
     var _this$props$styles;
-
     const _this$props3 = this.props,
-          children = _this$props3.children,
-          rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+      children = _this$props3.children,
+      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), {
       ref: this.handleRef
     }), children);
   }
-
 }, _class2.displayName = "ModalFooter", _class2.componentId = 'Modal.Footer', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   variant: 'default'
 }, _class2)) || _class) || _class);

package/lib/Modal/ModalFooter/props.js

@@ -1,14 +1,11 @@
 "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"));
-
 /*
  * The MIT License (MIT)
  *
@@ -32,6 +29,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   children: _propTypes.default.node,
   variant: _propTypes.default.oneOf(['default', 'inverse'])

package/lib/Modal/ModalFooter/styles.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -62,6 +61,5 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 };
-
 var _default = generateStyle;
 exports.default = _default;

package/lib/Modal/ModalFooter/theme.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -36,8 +35,8 @@ exports.default = void 0;
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        spacing = theme.spacing,
-        borders = theme.borders;
+    spacing = theme.spacing,
+    borders = theme.borders;
   const componentVariables = {
     background: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
     borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
@@ -47,9 +46,9 @@ const generateComponentTheme = theme => {
     inverseBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
     inverseBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 var _default = generateComponentTheme;
 exports.default = _default;

package/lib/Modal/ModalHeader/index.js

@@ -1,38 +1,23 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _emotion = require("@instructure/emotion");
-
 var _CloseButton = require("@instructure/ui-buttons/lib/CloseButton");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 const _excluded = ["children"];
-
 var _dec, _dec2, _class, _class2;
-
 /**
 ---
 parent: Modal
@@ -44,55 +29,43 @@ let ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   constructor() {
     super(...arguments);
     this.ref = null;
-
     this.handleRef = el => {
       this.ref = el;
     };
-
     this.makeStyleProps = () => {
       return {
         withCloseButton: this.usesCloseButton
       };
     };
   }
-
   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, this.makeStyleProps());
   }
-
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props2;
-
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
   }
-
   get usesCloseButton() {
     let hasCloseButton = false;
-
     _react.default.Children.forEach(this.props.children, child => {
       if (child && (0, _matchComponentTypes.matchComponentTypes)(child, [_CloseButton.CloseButton])) {
         hasCloseButton = true;
       }
     });
-
     return hasCloseButton;
   }
-
   render() {
     var _this$props$styles;
-
     const _this$props3 = this.props,
-          children = _this$props3.children,
-          rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+      children = _this$props3.children,
+      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), {
       ref: this.handleRef
     }), children);
   }
-
 }, _class2.displayName = "ModalHeader", _class2.componentId = 'Modal.Header', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   variant: 'default',
   spacing: 'default'

package/lib/Modal/ModalHeader/props.js

@@ -1,14 +1,11 @@
 "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"));
-
 /*
  * The MIT License (MIT)
  *
@@ -32,6 +29,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   children: _propTypes.default.node,
   variant: _propTypes.default.oneOf(['default', 'inverse']),

package/lib/Modal/ModalHeader/styles.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -41,7 +40,7 @@ exports.default = void 0;
  */
 const generateStyle = (componentTheme, props, state) => {
   const variant = props.variant,
-        spacing = props.spacing;
+    spacing = props.spacing;
   const withCloseButton = state.withCloseButton;
   const sizeVariants = {
     default: {
@@ -73,6 +72,5 @@ const generateStyle = (componentTheme, props, state) => {
     }
   };
 };
-
 var _default = generateStyle;
 exports.default = _default;

package/lib/Modal/ModalHeader/theme.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -36,7 +35,7 @@ exports.default = void 0;
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        spacing = theme.spacing;
+    spacing = theme.spacing;
   const componentVariables = {
     background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
     borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
@@ -45,9 +44,9 @@ const generateComponentTheme = theme => {
     inverseBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
     inverseBorderColor: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 var _default = generateComponentTheme;
 exports.default = _default;

package/lib/Modal/ModalLocator.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ModalLocator = void 0;
-
 var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
-
 var _index = require("./index");
-
 /*
  * The MIT License (MIT)
  *
@@ -32,13 +29,15 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
-const ModalHeaderLocator = (0, _locator.locator)(_index.Modal.Header.selector); // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
-
-const ModalBodyLocator = (0, _locator.locator)(_index.Modal.Body.selector); // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 
-const ModalFooterLocator = (0, _locator.locator)(_index.Modal.Footer.selector); // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+const ModalHeaderLocator = (0, _locator.locator)(_index.Modal.Header.selector);
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+const ModalBodyLocator = (0, _locator.locator)(_index.Modal.Body.selector);
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+const ModalFooterLocator = (0, _locator.locator)(_index.Modal.Footer.selector);
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const ModalLocator = (0, _locator.locator)(_index.Modal.selector, {
   findHeader: function () {
     return ModalHeaderLocator.find(...arguments);