@instructure/quiz-core 20.10.1-rc.0 → 20.10.1-rc.2

package/lib/building/components/resources/quiz/title/Title/presenter.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,7 +15,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -27,7 +25,7 @@ var _partial = _interopRequireDefault(require("lodash/partial"));
 
 var _uiHeading = require("@instructure/ui-heading");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _EditButton = _interopRequireDefault(require("../../editButton/EditButton.js"));
 
@@ -35,28 +33,19 @@ var _index = _interopRequireDefault(require("../Edit/index.js"));
 
 var _index2 = _interopRequireDefault(require("../Show/index.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'bpmxb',
-  template: function template(theme) {
-    return "\n\n.bpmxb_qYhL{border-bottom:".concat(theme.titleShowWrapperBottomBorder || 'inherit', ";display:flex;justify-content:space-between}\n\n.bpmxb_qYhL.bpmxb_cocM{border-bottom:solid;border-color:").concat(theme.titleEditWrapperBorderColor || 'inherit', ";border-width:").concat(theme.titleEditWrapperBorderWidth || 'inherit', "}\n\n.bpmxb_DlrZ{display:flex;flex-direction:column;flex-grow:1;min-width:0}\n\n.bpmxb_blJt{color:").concat(theme.labelColor || 'inherit', ";font-size:").concat(theme.labelFontSize || 'inherit', ";padding:").concat(theme.labelPadding || 'inherit', ";padding-bottom:").concat(theme.labelBottomPadding || 'inherit', ";padding-left:").concat(theme.labelLeftPadding || 'inherit', "}\n\n.bpmxb_UraS{align-self:flex-end;margin-right:").concat(theme.editButtonWrapperRightMargin || 'inherit', ";padding-top:").concat(theme.labelPadding || 'inherit', "}\n\n@media print{.bpmxb_qYhL{display:none}}");
-  },
-  'topRow': 'bpmxb_qYhL',
-  'editing': 'bpmxb_cocM',
-  'flexContainer': 'bpmxb_DlrZ',
-  'label': 'bpmxb_blJt',
-  'editButtonWrapper': 'bpmxb_UraS'
-};
 // ================================
 // renders the editable quiz title
 // input/display component
 // ================================
-var QuizTitlePresenter = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var QuizTitlePresenter = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(QuizTitlePresenter, _Component);
 
   var _super = (0, _createSuper2.default)(QuizTitlePresenter);
@@ -117,10 +106,20 @@ var QuizTitlePresenter = (_dec = (0, _uiThemeable.themeable)(_theme.default, sty
   }
 
   (0, _createClass2.default)(QuizTitlePresenter, [{
-    key: "quizID",
-    // ===========
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    } // ===========
     //   helpers
     // ===========
+
+  }, {
+    key: "quizID",
     value: function quizID() {
       return this.props.quiz.id;
     }
@@ -157,7 +156,7 @@ var QuizTitlePresenter = (_dec = (0, _uiThemeable.themeable)(_theme.default, sty
     // ===============
     value: function renderEdit() {
       var quizTitleEditKey = 'quiz_title_edit';
-      return /*#__PURE__*/_react.default.createElement(_index.default, {
+      return (0, _emotion.jsx)(_index.default, {
         isValid: this.isValid(),
         showError: (0, _partial.default)(this.props.showError, quizTitleEditKey),
         hideError: (0, _partial.default)(this.props.hideError, quizTitleEditKey),
@@ -171,7 +170,7 @@ var QuizTitlePresenter = (_dec = (0, _uiThemeable.themeable)(_theme.default, sty
   }, {
     key: "renderShow",
     value: function renderShow() {
-      return /*#__PURE__*/_react.default.createElement(_index2.default, {
+      return (0, _emotion.jsx)(_index2.default, {
         switchOnEditing: this.props.switchOnEditing,
         defaultTitle: this.workingTitle(),
         contentLocked: this.isContentLocked(),
@@ -181,21 +180,20 @@ var QuizTitlePresenter = (_dec = (0, _uiThemeable.themeable)(_theme.default, sty
   }, {
     key: "render",
     value: function render() {
-      var classnames = "".concat(styles.topRow, " ").concat(this.props.isEditing ? styles.editing : '');
       var content = this.props.isEditing ? this.renderEdit() : this.renderShow();
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _emotion.jsx)("div", {
         tabIndex: "-1",
-        className: classnames
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.flexContainer
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.label
-      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        css: this.props.styles.topRow
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.flexContainer
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.label
+      }, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "h4",
         as: "h2"
-      }, (0, _formatMessage.default)('Title'))), /*#__PURE__*/_react.default.createElement("div", null, content)), /*#__PURE__*/_react.default.createElement("div", null, !this.props.isEditing && !this.isContentLocked() && /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.editButtonWrapper
-      }, /*#__PURE__*/_react.default.createElement(_EditButton.default, {
+      }, (0, _formatMessage.default)('Title'))), (0, _emotion.jsx)("div", null, content)), (0, _emotion.jsx)("div", null, !this.props.isEditing && !this.isContentLocked() && (0, _emotion.jsx)("div", {
+        css: this.props.styles.editButtonWrapper
+      }, (0, _emotion.jsx)(_EditButton.default, {
         ref: this.handleEditButtonRef,
         screenreaderText: (0, _formatMessage.default)('Edit Title'),
         scrollKey: this.props.scrollKey,
@@ -223,7 +221,9 @@ var QuizTitlePresenter = (_dec = (0, _uiThemeable.themeable)(_theme.default, sty
   // injected by makeEditable
   switchOnEditing: _propTypes.default.func.isRequired,
   // injected by makeEditable
-  workingQuiz: _reactImmutableProptypes.default.record.isRequired
+  workingQuiz: _reactImmutableProptypes.default.record.isRequired,
+  makeStyles: _propTypes.default.func,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   scrollKey: void 0
 }, _temp)) || _class);

package/lib/building/components/resources/quiz/title/Title/styles.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  var mp = '@media print';
+  return {
+    topRow: (0, _objectSpread3.default)((0, _defineProperty2.default)({
+      display: 'flex',
+      justifyContent: 'space-between',
+      borderBottom: componentTheme.titleShowWrapperBottomBorder
+    }, mp, {
+      display: 'none'
+    }), props.isEditing && {
+      borderBottom: 'solid',
+      borderWidth: componentTheme.titleEditWrapperBorderWidth,
+      borderColor: componentTheme.titleEditWrapperBorderColor
+    }),
+    flexContainer: {
+      display: 'flex',
+      flexDirection: 'column',
+      flexGrow: '1',
+      minWidth: '0'
+    },
+    label: {
+      padding: componentTheme.labelPadding,
+      paddingLeft: componentTheme.labelLeftPadding,
+      paddingBottom: componentTheme.labelBottomPadding,
+      fontSize: componentTheme.labelFontSize,
+      color: componentTheme.labelColor
+    },
+    editButtonWrapper: {
+      alignSelf: 'flex-end',
+      marginRight: componentTheme.editButtonWrapperRightMargin,
+      paddingTop: componentTheme.labelPadding
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/shared/functionality/componentWithOutsideClickEmotion.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+var _reduxStore = _interopRequireDefault(require("../../../../reduxStore.js"));
+
+var _react = _interopRequireDefault(require("react"));
+
+// ======================================================
+// this component extends another component and will run
+// the 'clickedOutside' function defined on that component
+// if users click outside of it
+// clickedOutside: called when the user clicks outside node
+// ignoreClickOutsideIf: if returns true then do not run
+// the clickedOutside callback
+// ======================================================
+var wrapWithOutsideClickEmotion = function wrapWithOutsideClickEmotion(ComposedComponent) {
+  return /*#__PURE__*/function (_React$Component) {
+    (0, _inherits2.default)(wrappedWithOutsideClick, _React$Component);
+
+    var _super = (0, _createSuper2.default)(wrappedWithOutsideClick);
+
+    function wrappedWithOutsideClick(props) {
+      var _this;
+
+      (0, _classCallCheck2.default)(this, wrappedWithOutsideClick);
+      _this = _super.call(this, props);
+      _this.checkForOutsideClick = _this.checkForOutsideClick.bind((0, _assertThisInitialized2.default)(_this));
+      return _this;
+    }
+
+    (0, _createClass2.default)(wrappedWithOutsideClick, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        this.mouseDownEventCb = (0, _debounce.default)(this.checkForOutsideClick, 300, {
+          leading: true,
+          trailing: false
+        });
+        document.addEventListener('click', this.mouseDownEventCb, true);
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        document.removeEventListener('click', this.mouseDownEventCb, true);
+      }
+    }, {
+      key: "checkcomponentRef",
+      value: function checkcomponentRef() {
+        return this.composedComponentRef && this.composedComponentRef.current;
+      }
+    }, {
+      key: "checkForOutsideClick",
+      value: function checkForOutsideClick(e) {
+        var isModalOpen = _reduxStore.default.getAppState().getIn(['modal', 'isOpen']);
+
+        if (this.checkcomponentRef() && this.composedComponentRef.current.ignoreClickOutsideIf && this.composedComponentRef.current.ignoreClickOutsideIf(e) || isModalOpen) {
+          return;
+        }
+
+        if (this.checkcomponentRef() && this.composedComponentRef.current.clickedOutside) {
+          var domNode = _reactDom.default.findDOMNode(this);
+
+          if (!(domNode && domNode.contains(e.target))) {
+            this.composedComponentRef.current.clickedOutside(e);
+          }
+        }
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        this.composedComponentRef = /*#__PURE__*/_react.default.createRef();
+        return /*#__PURE__*/_react.default.createElement(ComposedComponent, Object.assign({
+          ref: this.composedComponentRef
+        }, this.props));
+      }
+    }]);
+    wrappedWithOutsideClick.displayName = "wrappedWithOutsideClick";
+    return wrappedWithOutsideClick;
+  }(_react.default.Component);
+};
+
+var _default = wrapWithOutsideClickEmotion;
+exports.default = _default;

package/lib/common/components/shared/overlayEmotion/index.js

@@ -68,6 +68,7 @@ var OverlayEmotion = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
           }
         }
       }), (0, _emotion.jsx)("div", {
+        className: "overlay",
         css: [this.props.styles.root, wrapperStyles],
         "data-testid": "overlay-wrapper",
         tabIndex: tabIndex,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "20.10.1-rc.0+1c610750b",
+  "version": "20.10.1-rc.2+d7cf7930e",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -44,11 +44,11 @@
     "@instructure/emotion": "^8.51.0",
     "@instructure/grading-utils": "^1.0.0",
     "@instructure/outcomes-ui": "^3.1.0",
-    "@instructure/quiz-common": "20.10.1-rc.0+1c610750b",
-    "@instructure/quiz-i18n": "20.10.1-rc.0+1c610750b",
-    "@instructure/quiz-interactions": "20.10.1-rc.0+1c610750b",
-    "@instructure/quiz-number-input": "20.10.1-rc.0+1c610750b",
-    "@instructure/quiz-rce": "20.10.1-rc.0+1c610750b",
+    "@instructure/quiz-common": "20.10.1-rc.2+d7cf7930e",
+    "@instructure/quiz-i18n": "20.10.1-rc.2+d7cf7930e",
+    "@instructure/quiz-interactions": "20.10.1-rc.2+d7cf7930e",
+    "@instructure/quiz-number-input": "20.10.1-rc.2+d7cf7930e",
+    "@instructure/quiz-rce": "20.10.1-rc.2+d7cf7930e",
     "@instructure/ui-a11y-content": "^8.51.0",
     "@instructure/ui-alerts": "^8.51.0",
     "@instructure/ui-avatar": "^8.51.0",
@@ -112,7 +112,7 @@
     "file-saver": "~2.0.5",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "20.10.1-rc.0+1c610750b",
+    "instructure-validations": "20.10.1-rc.2+d7cf7930e",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -163,7 +163,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "20.10.1-rc.0+1c610750b",
+    "quiz-presets": "20.10.1-rc.2+d7cf7930e",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -179,5 +179,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1c610750bebb717a3c0cb8bd4ea9eaea9cbb55fd"
+  "gitHead": "d7cf7930e666e5646438cd6e3e124841d779de2d"
 }