@instructure/quiz-core 20.26.0 → 20.26.1-snapshot.5

package/es/building/api/quizzes.js

@@ -231,15 +231,16 @@ export function setFilterIpAddress(quizId, value, completeCb) {
     filter_ip_address: Boolean(value)
   }, changeQuizFilterIpAddress(quizId, value), completeCb);
 }
-export function setIpFiltersUi(quizId, value) {
+export function setIpFiltersUi(quizId, ips, namedIps) {
   return function (dispatch, getState) {
-    dispatch(changeQuizIpFilters(quizId, value));
+    dispatch(changeQuizIpFilters(quizId, ips, namedIps));
   };
 }
-export function setIpFiltersApi(quizId, value, completeCb) {
+export function setIpFiltersApi(quizId, ips, namedIps, completeCb) {
   return setQuizProperty(quizId, {
     filters: {
-      ips: value
+      ips: ips,
+      named_ips: namedIps
     }
   }, null, completeCb);
 }

package/es/building/components/resources/ActionButtons/presenter.js

@@ -13,7 +13,7 @@ import { withStyle, jsx, Global } from '@instructure/emotion';
 import DragHandle from "../../../../common/components/shared/drag_and_drop/DragHandle/index.js";
 import makeScrollable from "../../../../common/components/shared/functionality/makeScrollable.js";
 import noop from "../../../../common/util/noop.js";
-import { EDIT, REMOVE, COPY } from '@instructure/quiz-common';
+import { EDIT, REMOVE, COPY, END_EDITING_TRIGGER_CLASSNAME } from '@instructure/quiz-common';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 var ScrollTargetButton = makeScrollable(IconButton);
@@ -71,8 +71,9 @@ export var ActionButtons = (_dec = withStyle(generateStyle, generateComponentThe
     key: "render",
     value: function render() {
       var hideClass = !this.props.shouldRenderEdit ? 'hide' : '';
+      var parentDivClass = "buttons ".concat(END_EDITING_TRIGGER_CLASSNAME);
       return jsx("div", {
-        className: "buttons",
+        className: parentDivClass,
         tabIndex: "-1",
         onFocus: this.onButtonFocus,
         css: this.props.styles.buttons

package/es/building/components/resources/quiz/instructions/Edit/presenter.js

@@ -10,7 +10,7 @@ import { Button } from '@instructure/ui-buttons';
 import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import CustomPropTypes from "../../../../../../common/util/CustomPropTypes.js";
-import elementsForSelectors from "../../../../../../common/util/ElementsForSelectors.js";
+import { checkClickedNode } from "../../../../../../common/util/clickHandlers.js";
 import { INSTRUCTIONS_EDIT_ID } from '@instructure/quiz-common';
 import { RichContentInput } from '@instructure/quiz-rce';
 import generateStyle from "./styles.js";
@@ -36,10 +36,10 @@ var QuizInstructionsEdit = (_dec = withStyle(generateStyle, generateComponentThe
   }, {
     key: "ignoreClickOutsideIf",
     value: function ignoreClickOutsideIf(e) {
-      var appNodes = elementsForSelectors(this.props.appContainer);
-      return appNodes.every(function (node) {
-        return node && !node.contains(e.target);
-      });
+      var _checkClickedNode = checkClickedNode(e, this.props.appContainer),
+        isEndEditingTrigger = _checkClickedNode.isEndEditingTrigger,
+        outsideApp = _checkClickedNode.outsideApp;
+      return outsideApp || !isEndEditingTrigger;
     }
   }, {
     key: "render",

package/es/building/components/resources/quizEntry/QuizEntryEdit/presenter.js

@@ -16,10 +16,10 @@ import first from 'lodash/first';
 import { withStyle, jsx, Global } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import CustomPropTypes from "../../../../../common/util/CustomPropTypes.js";
-import elementsForSelectors from "../../../../../common/util/ElementsForSelectors.js";
 import AddToBankModal from "../../../../../banks/components/AddToBankModal/index.js";
 import DragAndDropZone from "../../../../../common/components/shared/drag_and_drop/DragAndDropZone/index.js";
 import wrapWithOutsideClickEmotion from "../../../../../common/components/shared/functionality/componentWithOutsideClickEmotion.js";
+import { checkClickedNode } from "../../../../../common/util/clickHandlers.js";
 import QuizEntryEditHeader from "./Header/index.js";
 import QuizEntryEditFooter from "./Footer/index.js";
 import { SHOULD_CLONE_ITEM, TEMPORARY_ITEM_ID, DELETED_QUIZ_ENTRY, API_INPUT_VALIDATION_ERROR, CLEAR_ALL_INPUT_VALIDATION_ERRORS, PARENT_TYPE_ADDING_TO_BANK } from '@instructure/quiz-common';
@@ -294,12 +294,10 @@ var QuizEntryEdit = (_dec = withStyle(generateStyle, generateComponentTheme), _d
   }, {
     key: "ignoreClickOutsideIf",
     value: function ignoreClickOutsideIf(e) {
-      // Need to iterate over the appNodes since Gauge and lti have a different index for the sdk node
-      var appNodes = elementsForSelectors(this.props.appContainer);
-      var outsideApp = appNodes.every(function (node) {
-        return node && !node.contains(e.target);
-      });
-      return this.props.isOccluded || outsideApp;
+      var _checkClickedNode = checkClickedNode(e, this.props.appContainer),
+        isEndEditingTrigger = _checkClickedNode.isEndEditingTrigger,
+        outsideApp = _checkClickedNode.outsideApp;
+      return this.props.isOccluded || outsideApp || !isEndEditingTrigger;
     }
   }, {
     key: "isValid",

package/es/common/actions/modifications.js

@@ -512,14 +512,15 @@ export function changeQuizFilterIpAddress(quizId, value) {
     }
   };
 }
-export function changeQuizIpFilters(quizId, value) {
+export function changeQuizIpFilters(quizId, ips, namedIps) {
   return {
     type: QUIZ_MODIFICATION,
     payload: {
       id: quizId,
       modifications: {
         filters: {
-          ips: value
+          ips: ips,
+          namedIps: namedIps
         }
       }
     }

package/es/common/components/layout/sidebar/Sidebar/index.js

@@ -19,7 +19,7 @@ import { View } from '@instructure/ui-view';
 import { withStyle, jsx, Global } from '@instructure/emotion';
 import { Heading } from '@instructure/ui-heading';
 import t from '@instructure/quiz-i18n/es/format-message';
-import { INSTRUCTIONS_SCROLL_KEY, RESULTS_SCROLL_KEY, SIDEBAR_NAV_ID, TITLE_SCROLL_KEY } from '@instructure/quiz-common';
+import { INSTRUCTIONS_SCROLL_KEY, RESULTS_SCROLL_KEY, SIDEBAR_NAV_ID, TITLE_SCROLL_KEY, END_EDITING_TRIGGER_CLASSNAME } from '@instructure/quiz-common';
 import { onPhone } from "../../../../util/windowChecks.js";
 import CustomPropTypes from "../../../../util/CustomPropTypes.js";
 import noop from "../../../../util/noop.js";
@@ -105,7 +105,8 @@ export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _
         return;
       }
       return jsx("div", {
-        css: this.props.styles.sidebar.actionableInfo
+        css: this.props.styles.sidebar.actionableInfo,
+        className: END_EDITING_TRIGGER_CLASSNAME
       }, jsx(Link, {
         href: "#",
         margin: "small",
@@ -127,7 +128,8 @@ export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _
         return;
       }
       return jsx("div", {
-        css: this.props.styles.sidebar.actionableInfo
+        css: this.props.styles.sidebar.actionableInfo,
+        className: END_EDITING_TRIGGER_CLASSNAME
       }, jsx(Link, {
         href: "#",
         margin: "small",

package/es/common/components/layout/sidebar/SidebarItem/presenter.js

@@ -16,6 +16,7 @@ import t from '@instructure/quiz-i18n/es/format-message';
 import { RichContentRenderer } from '@instructure/quiz-rce';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
+import { END_EDITING_TRIGGER_CLASSNAME } from '@instructure/quiz-common';
 export var SidebarItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_SidebarItem = /*#__PURE__*/function (_Component) {
   _inherits(SidebarItem, _Component);
   var _super = _createSuper(SidebarItem);
@@ -110,7 +111,8 @@ export var SidebarItem = (_dec = withStyle(generateStyle, generateComponentTheme
     key: "renderClosed",
     value: function renderClosed() {
       return jsx("div", {
-        css: this.props.styles.sidebarItem
+        css: this.props.styles.sidebarItem,
+        className: END_EDITING_TRIGGER_CLASSNAME
       }, this.renderButton());
     }
   }, {
@@ -121,8 +123,9 @@ export var SidebarItem = (_dec = withStyle(generateStyle, generateComponentTheme
         itemName = _this$props3.itemName,
         pointsPossible = _this$props3.pointsPossible,
         styles = _this$props3.styles;
+      var parentDivClass = "sidebarIsOpen ".concat(END_EDITING_TRIGGER_CLASSNAME);
       return jsx("div", {
-        className: "sidebarIsOpen",
+        className: parentDivClass,
         css: styles.sidebarItem
       }, jsx(Flex, {
         justifyItems: "space-between"

package/es/common/components/layout/sidebar/Stimulus/presenter.js

@@ -18,6 +18,7 @@ import Summary from "./Summary/index.js";
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 import t from '@instructure/quiz-i18n/es/format-message';
+import { END_EDITING_TRIGGER_CLASSNAME } from '@instructure/quiz-common';
 export var DISPLAY_AS_SUMMARY_LIMIT = 5;
 var _ref = jsx(IconTextLeftLine, {
   color: "primary"
@@ -82,7 +83,8 @@ export var SidebarStimulus = (_dec = withStyle(generateStyle, generateComponentT
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToItem,
-        renderIcon: _ref
+        renderIcon: _ref,
+        className: END_EDITING_TRIGGER_CLASSNAME
       }, jsx(ScreenReaderContent, null, t('Navigate to stimulus at position { displayPosition }', {
         displayPosition: displayPosition
       })));

package/es/common/components/resources/quiz/AddContent/Button/index.js

@@ -13,6 +13,7 @@ import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
+import { END_EDITING_TRIGGER_CLASSNAME } from '@instructure/quiz-common';
 export var AddContentButton = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_AddContentButton = /*#__PURE__*/function (_Component) {
   _inherits(AddContentButton, _Component);
   var _super = _createSuper(AddContentButton);
@@ -60,6 +61,7 @@ export var AddContentButton = (_dec = withStyle(generateStyle, generateComponent
     key: "renderNonStimulus",
     value: function renderNonStimulus() {
       return jsx("div", {
+        className: END_EDITING_TRIGGER_CLASSNAME,
         css: this.props.styles.newItemButtonHolder
       }, jsx("button", {
         ref: this.storeButtonElemRef,

package/es/common/components/resources/stimulus/StimulusEdit/presenter.js

@@ -21,7 +21,7 @@ import AddToBankModal from "../../../../../banks/components/AddToBankModal/index
 import AddToBankOptions from "../../../../../building/components/resources/AddToBankOptions/index.js";
 import WarningWrapper from "../../WarningWrapper/index.js";
 import CustomPropTypes from "../../../../../common/util/CustomPropTypes.js";
-import elementsForSelectors from "../../../../../common/util/ElementsForSelectors.js";
+import { checkClickedNode } from "../../../../../common/util/clickHandlers.js";
 import StimulusShowInfo from "../StimulusShowInfo/index.js";
 import StimulusEditInfo from "../StimulusEditInfo/index.js";
 import wrapWithOutsideClickEmotion from "../../../shared/functionality/componentWithOutsideClickEmotion.js";
@@ -286,12 +286,10 @@ export var StimulusEdit = (_dec = withStyle(generateStyle, generateComponentThem
   }, {
     key: "ignoreClickOutsideIf",
     value: function ignoreClickOutsideIf(e) {
-      // Need to iterate over the appNodes since Gauge and lti have a different index for the sdk node
-      var appNodes = elementsForSelectors(this.props.appContainer);
-      var outsideApp = appNodes.every(function (node) {
-        return node && !node.contains(e.target);
-      });
-      return outsideApp;
+      var _checkClickedNode = checkClickedNode(e, this.props.appContainer),
+        isEndEditingTrigger = _checkClickedNode.isEndEditingTrigger,
+        outsideApp = _checkClickedNode.outsideApp;
+      return outsideApp || !isEndEditingTrigger;
     }
   }, {
     key: "afterSubmit",

package/es/common/components/shared/TagWrapper/presenter.js

@@ -31,7 +31,8 @@ export var TagWrapper = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
         id = _this$props.id,
         text = _this$props.text,
-        index = _this$props.index;
+        index = _this$props.index,
+        themeOverride = _this$props.themeOverride;
       return /*#__PURE__*/React.createElement(Tag, {
         text: /*#__PURE__*/React.createElement(AccessibleContent, {
           alt: t('Remove {label}', {
@@ -41,7 +42,8 @@ export var TagWrapper = /*#__PURE__*/function (_Component) {
         dismissible: true,
         key: id,
         margin: index > 0 ? 'xxx-small 0 xxx-small xx-small' : 'xxx-small 0',
-        onClick: this.dismissTag
+        onClick: this.dismissTag,
+        themeOverride: themeOverride
       });
     }
   }]);
@@ -52,6 +54,10 @@ TagWrapper.propTypes = {
   text: PropTypes.string.isRequired,
   index: PropTypes.number.isRequired,
   id: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired,
+  themeOverride: PropTypes.object
+};
+TagWrapper.defaultProps = {
+  themeOverride: {}
 };
 export default TagWrapper;

package/es/common/components/shared/overlay/index.js

@@ -18,6 +18,7 @@ import PropTypes from 'prop-types';
 import { withStyle, jsx, Global } from '@instructure/emotion';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
+import { END_EDITING_TRIGGER_CLASSNAME } from '@instructure/quiz-common';
 var Overlay = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Overlay = /*#__PURE__*/function (_Component) {
   _inherits(Overlay, _Component);
   var _super = _createSuper(Overlay);
@@ -31,9 +32,10 @@ var Overlay = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_cl
       if (this.props.hideOverlay) {
         return null;
       }
+      var overlayClass = "overlay ".concat(END_EDITING_TRIGGER_CLASSNAME);
       return jsx("div", {
         role: "presentation",
-        className: "overlay",
+        className: overlayClass,
         css: this.props.styles.overlay,
         onClick: this.props.onClick,
         "data-automation": "sdk-overlay"

package/es/common/util/clickHandlers.js

@@ -0,0 +1,19 @@
+import elementsForSelectors from "./ElementsForSelectors.js";
+import { END_EDITING_TRIGGER_CLASSNAME } from '@instructure/quiz-common';
+export function checkClickedNode(e, appContainer) {
+  // Need to iterate over the appNodes since Gauge and lti have a different index for the sdk node
+  var appNodes = elementsForSelectors(appContainer);
+  var outsideApp = appNodes.every(function (node) {
+    return node && !node.contains(e.target);
+  });
+
+  // checking if the click was on an element that should end editing
+  var endEditingNodes = elementsForSelectors(".".concat(END_EDITING_TRIGGER_CLASSNAME));
+  var isEndEditingTrigger = endEditingNodes.some(function (node) {
+    return node && node.contains(e.target);
+  });
+  return {
+    isEndEditingTrigger: isEndEditingTrigger,
+    outsideApp: outsideApp
+  };
+}

package/es/index.js

@@ -75,7 +75,8 @@ export { Errors } from "./common/components/shared/errors/Errors.js";
 export { TimeUnitsInput } from "./common/components/shared/TimeUnitsInput/index.js";
 export { QuizEntry as QuizEntryView } from "./building/components/resources/quizEntry/QuizEntry/index.js";
 export { Provider } from "./common/react-redux.js";
-export { FormattedTimer } from "./common/components/shared/FormattedDuration/index.js"; // Utilities
+export { FormattedTimer } from "./common/components/shared/FormattedDuration/index.js";
+export { default as TagWrapper } from "./common/components/shared/TagWrapper/index.js"; // Utilities
 export { environment as config } from "./config.js";
 export { Fetcher } from "./common/util/Fetcher.js";
 export { httpHeaders } from "./common/util/httpHeaders.js";

package/lib/building/api/quizzes.js

@@ -260,15 +260,16 @@ function setFilterIpAddress(quizId, value, completeCb) {
     filter_ip_address: Boolean(value)
   }, (0, _modifications.changeQuizFilterIpAddress)(quizId, value), completeCb);
 }
-function setIpFiltersUi(quizId, value) {
+function setIpFiltersUi(quizId, ips, namedIps) {
   return function (dispatch, getState) {
-    dispatch((0, _modifications.changeQuizIpFilters)(quizId, value));
+    dispatch((0, _modifications.changeQuizIpFilters)(quizId, ips, namedIps));
   };
 }
-function setIpFiltersApi(quizId, value, completeCb) {
+function setIpFiltersApi(quizId, ips, namedIps, completeCb) {
   return setQuizProperty(quizId, {
     filters: {
-      ips: value
+      ips: ips,
+      named_ips: namedIps
     }
   }, null, completeCb);
 }

package/lib/building/components/resources/ActionButtons/presenter.js

@@ -78,8 +78,9 @@ var ActionButtons = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
     key: "render",
     value: function render() {
       var hideClass = !this.props.shouldRenderEdit ? 'hide' : '';
+      var parentDivClass = "buttons ".concat(_quizCommon.END_EDITING_TRIGGER_CLASSNAME);
       return (0, _emotion.jsx)("div", {
-        className: "buttons",
+        className: parentDivClass,
         tabIndex: "-1",
         onFocus: this.onButtonFocus,
         css: this.props.styles.buttons

package/lib/building/components/resources/quiz/instructions/Edit/presenter.js

@@ -15,7 +15,7 @@ var _uiButtons = require("@instructure/ui-buttons");
 var _emotion = require("@instructure/emotion");
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 var _CustomPropTypes = _interopRequireDefault(require("../../../../../../common/util/CustomPropTypes.js"));
-var _ElementsForSelectors = _interopRequireDefault(require("../../../../../../common/util/ElementsForSelectors.js"));
+var _clickHandlers = require("../../../../../../common/util/clickHandlers.js");
 var _quizCommon = require("@instructure/quiz-common");
 var _quizRce = require("@instructure/quiz-rce");
 var _styles = _interopRequireDefault(require("./styles.js"));
@@ -44,10 +44,10 @@ var QuizInstructionsEdit = (_dec = (0, _emotion.withStyle)(_styles.default, _the
   }, {
     key: "ignoreClickOutsideIf",
     value: function ignoreClickOutsideIf(e) {
-      var appNodes = (0, _ElementsForSelectors.default)(this.props.appContainer);
-      return appNodes.every(function (node) {
-        return node && !node.contains(e.target);
-      });
+      var _checkClickedNode = (0, _clickHandlers.checkClickedNode)(e, this.props.appContainer),
+        isEndEditingTrigger = _checkClickedNode.isEndEditingTrigger,
+        outsideApp = _checkClickedNode.outsideApp;
+      return outsideApp || !isEndEditingTrigger;
     }
   }, {
     key: "render",

package/lib/building/components/resources/quizEntry/QuizEntryEdit/presenter.js

@@ -21,10 +21,10 @@ var _first = _interopRequireDefault(require("lodash/first"));
 var _emotion = require("@instructure/emotion");
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 var _CustomPropTypes = _interopRequireDefault(require("../../../../../common/util/CustomPropTypes.js"));
-var _ElementsForSelectors = _interopRequireDefault(require("../../../../../common/util/ElementsForSelectors.js"));
 var _index = _interopRequireDefault(require("../../../../../banks/components/AddToBankModal/index.js"));
 var _index2 = _interopRequireDefault(require("../../../../../common/components/shared/drag_and_drop/DragAndDropZone/index.js"));
 var _componentWithOutsideClickEmotion = _interopRequireDefault(require("../../../../../common/components/shared/functionality/componentWithOutsideClickEmotion.js"));
+var _clickHandlers = require("../../../../../common/util/clickHandlers.js");
 var _index3 = _interopRequireDefault(require("./Header/index.js"));
 var _index4 = _interopRequireDefault(require("./Footer/index.js"));
 var _quizCommon = require("@instructure/quiz-common");
@@ -302,12 +302,10 @@ var QuizEntryEdit = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
   }, {
     key: "ignoreClickOutsideIf",
     value: function ignoreClickOutsideIf(e) {
-      // Need to iterate over the appNodes since Gauge and lti have a different index for the sdk node
-      var appNodes = (0, _ElementsForSelectors.default)(this.props.appContainer);
-      var outsideApp = appNodes.every(function (node) {
-        return node && !node.contains(e.target);
-      });
-      return this.props.isOccluded || outsideApp;
+      var _checkClickedNode = (0, _clickHandlers.checkClickedNode)(e, this.props.appContainer),
+        isEndEditingTrigger = _checkClickedNode.isEndEditingTrigger,
+        outsideApp = _checkClickedNode.outsideApp;
+      return this.props.isOccluded || outsideApp || !isEndEditingTrigger;
     }
   }, {
     key: "isValid",

package/lib/common/actions/modifications.js

@@ -557,14 +557,15 @@ function changeQuizFilterIpAddress(quizId, value) {
     }
   };
 }
-function changeQuizIpFilters(quizId, value) {
+function changeQuizIpFilters(quizId, ips, namedIps) {
   return {
     type: _quizCommon.QUIZ_MODIFICATION,
     payload: {
       id: quizId,
       modifications: {
         filters: {
-          ips: value
+          ips: ips,
+          namedIps: namedIps
         }
       }
     }

package/lib/common/components/layout/sidebar/Sidebar/index.js

@@ -112,7 +112,8 @@ var Sidebar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
         return;
       }
       return (0, _emotion.jsx)("div", {
-        css: this.props.styles.sidebar.actionableInfo
+        css: this.props.styles.sidebar.actionableInfo,
+        className: _quizCommon.END_EDITING_TRIGGER_CLASSNAME
       }, (0, _emotion.jsx)(_uiLink.Link, {
         href: "#",
         margin: "small",
@@ -134,7 +135,8 @@ var Sidebar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
         return;
       }
       return (0, _emotion.jsx)("div", {
-        css: this.props.styles.sidebar.actionableInfo
+        css: this.props.styles.sidebar.actionableInfo,
+        className: _quizCommon.END_EDITING_TRIGGER_CLASSNAME
       }, (0, _emotion.jsx)(_uiLink.Link, {
         href: "#",
         margin: "small",

package/lib/common/components/layout/sidebar/SidebarItem/presenter.js

@@ -21,6 +21,7 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 var _quizRce = require("@instructure/quiz-rce");
 var _styles = _interopRequireDefault(require("./styles.js"));
 var _theme = _interopRequireDefault(require("./theme.js"));
+var _quizCommon = require("@instructure/quiz-common");
 var _dec, _class, _SidebarItem;
 /** @jsx jsx */
 var SidebarItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_SidebarItem = /*#__PURE__*/function (_Component) {
@@ -117,7 +118,8 @@ var SidebarItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
     key: "renderClosed",
     value: function renderClosed() {
       return (0, _emotion.jsx)("div", {
-        css: this.props.styles.sidebarItem
+        css: this.props.styles.sidebarItem,
+        className: _quizCommon.END_EDITING_TRIGGER_CLASSNAME
       }, this.renderButton());
     }
   }, {
@@ -128,8 +130,9 @@ var SidebarItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
         itemName = _this$props3.itemName,
         pointsPossible = _this$props3.pointsPossible,
         styles = _this$props3.styles;
+      var parentDivClass = "sidebarIsOpen ".concat(_quizCommon.END_EDITING_TRIGGER_CLASSNAME);
       return (0, _emotion.jsx)("div", {
-        className: "sidebarIsOpen",
+        className: parentDivClass,
         css: styles.sidebarItem
       }, (0, _emotion.jsx)(_uiFlex.Flex, {
         justifyItems: "space-between"

package/lib/common/components/layout/sidebar/Stimulus/presenter.js

@@ -23,6 +23,7 @@ var _index3 = _interopRequireDefault(require("./Summary/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 _quizCommon = require("@instructure/quiz-common");
 var _dec, _class, _SidebarStimulus;
 /** @jsx jsx */
 var DISPLAY_AS_SUMMARY_LIMIT = 5;
@@ -90,7 +91,8 @@ var SidebarStimulus = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.de
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToItem,
-        renderIcon: _ref
+        renderIcon: _ref,
+        className: _quizCommon.END_EDITING_TRIGGER_CLASSNAME
       }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Navigate to stimulus at position { displayPosition }', {
         displayPosition: displayPosition
       })));

package/lib/common/components/resources/quiz/AddContent/Button/index.js

@@ -18,6 +18,7 @@ var _emotion = require("@instructure/emotion");
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 var _styles = _interopRequireDefault(require("./styles.js"));
 var _theme = _interopRequireDefault(require("./theme.js"));
+var _quizCommon = require("@instructure/quiz-common");
 var _dec, _class, _AddContentButton;
 /** @jsx jsx */
 var AddContentButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_AddContentButton = /*#__PURE__*/function (_Component) {
@@ -67,6 +68,7 @@ var AddContentButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.d
     key: "renderNonStimulus",
     value: function renderNonStimulus() {
       return (0, _emotion.jsx)("div", {
+        className: _quizCommon.END_EDITING_TRIGGER_CLASSNAME,
         css: this.props.styles.newItemButtonHolder
       }, (0, _emotion.jsx)("button", {
         ref: this.storeButtonElemRef,

package/lib/common/components/resources/stimulus/StimulusEdit/presenter.js

@@ -26,7 +26,7 @@ var _index = _interopRequireDefault(require("../../../../../banks/components/Add
 var _index2 = _interopRequireDefault(require("../../../../../building/components/resources/AddToBankOptions/index.js"));
 var _index3 = _interopRequireDefault(require("../../WarningWrapper/index.js"));
 var _CustomPropTypes = _interopRequireDefault(require("../../../../../common/util/CustomPropTypes.js"));
-var _ElementsForSelectors = _interopRequireDefault(require("../../../../../common/util/ElementsForSelectors.js"));
+var _clickHandlers = require("../../../../../common/util/clickHandlers.js");
 var _index4 = _interopRequireDefault(require("../StimulusShowInfo/index.js"));
 var _index5 = _interopRequireDefault(require("../StimulusEditInfo/index.js"));
 var _componentWithOutsideClickEmotion = _interopRequireDefault(require("../../../shared/functionality/componentWithOutsideClickEmotion.js"));
@@ -293,12 +293,10 @@ var StimulusEdit = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
   }, {
     key: "ignoreClickOutsideIf",
     value: function ignoreClickOutsideIf(e) {
-      // Need to iterate over the appNodes since Gauge and lti have a different index for the sdk node
-      var appNodes = (0, _ElementsForSelectors.default)(this.props.appContainer);
-      var outsideApp = appNodes.every(function (node) {
-        return node && !node.contains(e.target);
-      });
-      return outsideApp;
+      var _checkClickedNode = (0, _clickHandlers.checkClickedNode)(e, this.props.appContainer),
+        isEndEditingTrigger = _checkClickedNode.isEndEditingTrigger,
+        outsideApp = _checkClickedNode.outsideApp;
+      return outsideApp || !isEndEditingTrigger;
     }
   }, {
     key: "afterSubmit",

package/lib/common/components/shared/TagWrapper/presenter.js

@@ -39,7 +39,8 @@ var TagWrapper = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
         id = _this$props.id,
         text = _this$props.text,
-        index = _this$props.index;
+        index = _this$props.index,
+        themeOverride = _this$props.themeOverride;
       return /*#__PURE__*/_react.default.createElement(_uiTag.Tag, {
         text: /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
           alt: (0, _formatMessage.default)('Remove {label}', {
@@ -49,7 +50,8 @@ var TagWrapper = /*#__PURE__*/function (_Component) {
         dismissible: true,
         key: id,
         margin: index > 0 ? 'xxx-small 0 xxx-small xx-small' : 'xxx-small 0',
-        onClick: this.dismissTag
+        onClick: this.dismissTag,
+        themeOverride: themeOverride
       });
     }
   }]);
@@ -61,7 +63,11 @@ TagWrapper.propTypes = {
   text: _propTypes.default.string.isRequired,
   index: _propTypes.default.number.isRequired,
   id: _propTypes.default.string.isRequired,
-  onClick: _propTypes.default.func.isRequired
+  onClick: _propTypes.default.func.isRequired,
+  themeOverride: _propTypes.default.object
+};
+TagWrapper.defaultProps = {
+  themeOverride: {}
 };
 var _default = TagWrapper;
 exports.default = _default;

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

@@ -15,6 +15,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles.js"));
 var _theme = _interopRequireDefault(require("./theme.js"));
+var _quizCommon = require("@instructure/quiz-common");
 var _dec, _class, _Overlay;
 /** @jsx jsx */
 /* eslint "jsx-a11y/click-events-have-key-events": "warn" */
@@ -37,9 +38,10 @@ var Overlay = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
       if (this.props.hideOverlay) {
         return null;
       }
+      var overlayClass = "overlay ".concat(_quizCommon.END_EDITING_TRIGGER_CLASSNAME);
       return (0, _emotion.jsx)("div", {
         role: "presentation",
-        className: "overlay",
+        className: overlayClass,
         css: this.props.styles.overlay,
         onClick: this.props.onClick,
         "data-automation": "sdk-overlay"

package/lib/common/util/clickHandlers.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkClickedNode = checkClickedNode;
+var _ElementsForSelectors = _interopRequireDefault(require("./ElementsForSelectors.js"));
+var _quizCommon = require("@instructure/quiz-common");
+function checkClickedNode(e, appContainer) {
+  // Need to iterate over the appNodes since Gauge and lti have a different index for the sdk node
+  var appNodes = (0, _ElementsForSelectors.default)(appContainer);
+  var outsideApp = appNodes.every(function (node) {
+    return node && !node.contains(e.target);
+  });
+
+  // checking if the click was on an element that should end editing
+  var endEditingNodes = (0, _ElementsForSelectors.default)(".".concat(_quizCommon.END_EDITING_TRIGGER_CLASSNAME));
+  var isEndEditingTrigger = endEditingNodes.some(function (node) {
+    return node && node.contains(e.target);
+  });
+  return {
+    isEndEditingTrigger: isEndEditingTrigger,
+    outsideApp: outsideApp
+  };
+}