@instructure/quiz-core 21.2.0 → 22.1.0

package/lib/common/components/layout/sidebar/Stimulus/Collection/styles.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _presenter = require("../presenter");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var generateStyle = function generateStyle(componentTheme, props) {
   var shouldDisplayAllItems = props.itemCollection.size <= _presenter.DISPLAY_AS_SUMMARY_LIMIT;
   var shouldDisplayAsColumn = props.isShowingItems && !shouldDisplayAllItems && !props.sidebarOpen;

package/lib/common/components/layout/sidebar/Stimulus/Collection/theme.js

@@ -10,7 +10,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     borders = _ref.borders;
   return {
     columnPadding: spacing.xSmall,
-    sidebarIsOpenBottomBorderColor: colors.slate,
+    sidebarIsOpenBottomBorderColor: colors.contrasts.grey4570,
     sidebarIsOpenBottomBorderWidth: borders.widthSmall
   };
 };

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

@@ -22,29 +22,41 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 var _quizCommon = require("@instructure/quiz-common");
 var _dec, _class, _Summary;
 /** @jsx jsx */
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _callSuper(_this, derived, args) {
+  function isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+    try {
+      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    } catch (e) {
+      return false;
+    }
+  }
+  derived = (0, _getPrototypeOf2["default"])(derived);
+  return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
+}
 var Summary = exports.Summary = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_Summary = /*#__PURE__*/function (_Component) {
   function Summary() {
-    var _this;
+    var _this2;
     (0, _classCallCheck2["default"])(this, Summary);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _callSuper(this, Summary, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "handleShowItems", function () {
-      if (_this.props.isDragging) {
+    _this2 = _callSuper(this, Summary, [].concat(args));
+    (0, _defineProperty2["default"])(_this2, "handleShowItems", function () {
+      if (_this2.props.isDragging) {
         return;
       }
-      _this.props.setSidebarStimulusIsShowing(_this.props.stimulusId, !_this.props.isShowingItems);
+      _this2.props.setSidebarStimulusIsShowing(_this2.props.stimulusId, !_this2.props.isShowingItems);
     });
-    (0, _defineProperty2["default"])(_this, "handleKeyDown", function (event) {
+    (0, _defineProperty2["default"])(_this2, "handleKeyDown", function (event) {
       if (event.keyCode === 13 || event.keyCode === 32) {
         // enter or space pressed
-        _this.handleShowItems();
+        _this2.handleShowItems();
       }
     });
-    return _this;
+    return _this2;
   }
   (0, _inherits2["default"])(Summary, _Component);
   return (0, _createClass2["default"])(Summary, [{

package/lib/common/components/layout/sidebar/Stimulus/Summary/theme.js

@@ -9,10 +9,10 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     spacing = _ref.spacing,
     borders = _ref.borders;
   return {
-    itemContainerColor: colors.licorice,
+    itemContainerColor: colors.contrasts.grey125125,
     itemContainerPadding: spacing.xSmall,
     itemContainerBorderWidth: borders.widthSmall,
-    itemContainerBorderColor: colors.licorice,
+    itemContainerBorderColor: colors.contrasts.grey125125,
     summaryMargin: spacing.small,
     summaryMarginLeft: spacing.medium
   };

package/lib/common/components/layout/sidebar/Stimulus/Title/index.js

@@ -21,8 +21,20 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _quizCommon = require("@instructure/quiz-common");
 var _dec, _class, _Title;
 /** @jsx jsx */
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _callSuper(_this, derived, args) {
+  function isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+    try {
+      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    } catch (e) {
+      return false;
+    }
+  }
+  derived = (0, _getPrototypeOf2["default"])(derived);
+  return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
+}
 var DISPLAY_TOOLTIP_LIMIT = 80;
 var Title = exports.Title = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], null), _dec(_class = (_Title = /*#__PURE__*/function (_Component) {
   function Title() {

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

@@ -26,27 +26,41 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 var _quizCommon = require("@instructure/quiz-common");
 var _uiTooltip = require("@instructure/ui-tooltip");
 var _uiA11yContent = require("@instructure/ui-a11y-content");
+var _uiView = require("@instructure/ui-view");
+var _uiText = require("@instructure/ui-text");
 var _dec, _class, _SidebarStimulus;
 /** @jsx jsx */
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _callSuper(_this, derived, args) {
+  function isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+    try {
+      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    } catch (e) {
+      return false;
+    }
+  }
+  derived = (0, _getPrototypeOf2["default"])(derived);
+  return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
+}
 var DISPLAY_AS_SUMMARY_LIMIT = exports.DISPLAY_AS_SUMMARY_LIMIT = 5;
 var SidebarStimulus = exports.SidebarStimulus = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_SidebarStimulus = /*#__PURE__*/function (_Component) {
   function SidebarStimulus() {
-    var _this;
+    var _this2;
     (0, _classCallCheck2["default"])(this, SidebarStimulus);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _callSuper(this, SidebarStimulus, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "scrollToItem", function (e) {
+    _this2 = _callSuper(this, SidebarStimulus, [].concat(args));
+    (0, _defineProperty2["default"])(_this2, "scrollToItem", function (e) {
       e.preventDefault(); // prevent default link navigation
       // this can be a real scroll or a oqaat change
       // depending on whether is is oqaat or not
-      _this.props.scrollToItem(_this.props.stimulusParent.id);
+      _this2.props.scrollToItem(_this2.props.stimulusParent.id);
       e.stopPropagation();
     });
-    return _this;
+    return _this2;
   }
   (0, _inherits2["default"])(SidebarStimulus, _Component);
   return (0, _createClass2["default"])(SidebarStimulus, [{
@@ -59,18 +73,26 @@ var SidebarStimulus = exports.SidebarStimulus = (_dec = (0, _quizCommon.withStyl
     value: function componentDidUpdate() {
       this.props.makeStyles();
     }
+  }, {
+    key: "stimulusIsPassage",
+    value: function stimulusIsPassage() {
+      var _this$props$stimulus;
+      return (_this$props$stimulus = this.props.stimulus) === null || _this$props$stimulus === void 0 ? void 0 : _this$props$stimulus.isPassage;
+    }
   }, {
     key: "renderCollection",
     value: function renderCollection() {
-      if (this.props.isDragging) {
-        return;
-      }
+      var _this$props$stimulus2;
       var _this$props = this.props,
         displayPosition = _this$props.displayPosition,
         isOver = _this$props.isOver,
         isShowingItems = _this$props.isShowingItems,
         renderSidebarItem = _this$props.renderSidebarItem,
-        sidebarOpen = _this$props.sidebarOpen;
+        sidebarOpen = _this$props.sidebarOpen,
+        isDragging = _this$props.isDragging;
+      if (this.stimulusIsPassage() || isDragging) {
+        return null;
+      }
       return (0, _emotion.jsx)(_Collection["default"], {
         firstPosition: displayPosition,
         isOver: isOver,
@@ -78,22 +100,30 @@ var SidebarStimulus = exports.SidebarStimulus = (_dec = (0, _quizCommon.withStyl
         itemCollection: this.props.childEntries,
         renderSidebarItem: renderSidebarItem,
         sidebarOpen: sidebarOpen,
-        stimulusId: this.props.stimulus.id
+        stimulusId: this.props.stimulus.id,
+        isPassage: (_this$props$stimulus2 = this.props.stimulus) === null || _this$props$stimulus2 === void 0 ? void 0 : _this$props$stimulus2.isPassage
       });
     }
   }, {
     key: "renderButton",
     value: function renderButton() {
-      var displayPosition = this.props.displayPosition;
-      var textForNavigation = (0, _formatMessage["default"])('Navigate to stimulus at position {displayPosition}', {
+      var _this$props2 = this.props,
+        displayPosition = _this$props2.displayPosition,
+        sidebarOpen = _this$props2.sidebarOpen;
+      var itemName = this.stimulusIsPassage() ? 'passage' : 'stimulus';
+      var textForNavigation = (0, _formatMessage["default"])('Navigate to {itemName} at position {displayPosition}', {
+        itemName: itemName,
         displayPosition: displayPosition
       });
+      var content = sidebarOpen ? '' : textForNavigation;
+      var tip = (0, _emotion.jsx)(_uiText.Text, {
+        "aria-hidden": !sidebarOpen,
+        "aria-label": content
+      }, content);
       return (0, _emotion.jsx)(_uiTooltip.Tooltip, {
-        renderTip: this.props.sidebarOpen ? '' : (0, _emotion.jsx)("span", {
-          "aria-hidden": "true"
-        }, textForNavigation),
+        renderTip: tip,
         placement: "start",
-        on: this.props.sidebarOpen ? [] : ['hover', 'focus']
+        on: sidebarOpen ? [] : ['hover', 'focus']
       }, (0, _emotion.jsx)(_uiLink.Link, {
         href: "#",
         margin: "small",
@@ -105,33 +135,82 @@ var SidebarStimulus = exports.SidebarStimulus = (_dec = (0, _quizCommon.withStyl
         className: _quizCommon.END_EDITING_TRIGGER_CLASSNAME
       }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, textForNavigation)));
     }
+  }, {
+    key: "infoHeaderLabel",
+    value: function infoHeaderLabel() {
+      return this.stimulusIsPassage() ? (0, _formatMessage["default"])('Passage') : (0, _formatMessage["default"])('Stimulus');
+    }
+  }, {
+    key: "renderSummary",
+    value: function renderSummary() {
+      var _this$props3 = this.props,
+        displayPosition = _this$props3.displayPosition,
+        isDragging = _this$props3.isDragging,
+        isShowingItems = _this$props3.isShowingItems,
+        sidebarOpen = _this$props3.sidebarOpen,
+        stimulus = _this$props3.stimulus;
+      if (this.stimulusIsPassage()) {
+        return null;
+      }
+      return (0, _emotion.jsx)(_Summary["default"], {
+        startPosition: displayPosition,
+        isDragging: isDragging,
+        isShowingItems: isShowingItems,
+        stimulusId: stimulus.id,
+        sidebarOpen: sidebarOpen,
+        numberOfItems: this.props.childEntries.size
+      });
+    }
+  }, {
+    key: "stimulusHoverCss",
+    value: function stimulusHoverCss() {
+      return {
+        // TODO: figure out how to get rid of the last of these styles.
+        ':hover': this.props.styles.onHover
+      };
+    }
   }, {
     key: "renderClosed",
     value: function renderClosed() {
-      return (0, _emotion.jsx)("div", {
-        css: this.props.styles.sidebarItem
-      }, (0, _emotion.jsx)("div", {
-        css: this.props.styles.sidebarItemClosedButton
+      return (0, _emotion.jsx)(_uiView.View, {
+        borderWidth: "0 0 small 0",
+        borderColor: "primary",
+        as: "div"
+      }, (0, _emotion.jsx)(_uiView.View, {
+        textAlign: "center",
+        padding: "xx-small 0",
+        borderWidth: "none large none none",
+        borderColor: "transparent",
+        css: this.stimulusHoverCss(),
+        as: "div"
       }, this.renderButton()), this.renderCollection());
     }
   }, {
     key: "renderOpen",
     value: function renderOpen() {
-      var _this$props2 = this.props,
-        children = _this$props2.children,
-        displayPosition = _this$props2.displayPosition,
-        isDragging = _this$props2.isDragging,
-        isShowingItems = _this$props2.isShowingItems,
-        sidebarOpen = _this$props2.sidebarOpen,
-        stimulus = _this$props2.stimulus;
-      return (0, _emotion.jsx)("div", {
-        css: this.props.styles.sidebarItem
-      }, (0, _emotion.jsx)("div", {
-        css: this.props.styles.stimulusHeader
-      }, (0, _emotion.jsx)("div", {
-        css: this.props.styles.infoHeader
-      }, (0, _formatMessage["default"])('Stimulus')), (0, _emotion.jsx)("div", {
-        css: this.props.styles.stimulusBody
+      var _this$props4 = this.props,
+        stimulus = _this$props4.stimulus,
+        children = _this$props4.children;
+      return (0, _emotion.jsx)(_uiView.View, {
+        borderWidth: "0 0 small 0",
+        borderColor: "primary",
+        as: "div"
+      }, (0, _emotion.jsx)(_uiView.View, {
+        padding: "small 0",
+        borderWidth: "none large none none",
+        borderColor: "transparent",
+        css: this.stimulusHoverCss(),
+        as: "div"
+      }, (0, _emotion.jsx)(_uiView.View, {
+        margin: "auto auto x-small x-small",
+        padding: "auto auto auto x-small",
+        as: "div"
+      }, (0, _emotion.jsx)(_uiText.Text, {
+        size: "x-small",
+        color: "secondary"
+      }, this.infoHeaderLabel())), (0, _emotion.jsx)(_uiView.View, {
+        margin: "auto auto auto small",
+        as: "div"
       }, (0, _emotion.jsx)(_quizCommon.Flex, {
         justifyItems: "space-between"
       }, (0, _emotion.jsx)(_quizCommon.Flex.Item, null, this.renderButton()), (0, _emotion.jsx)(_quizCommon.Flex.Item, {
@@ -141,14 +220,7 @@ var SidebarStimulus = exports.SidebarStimulus = (_dec = (0, _quizCommon.withStyl
         tabIndex: "-1"
       }, (0, _emotion.jsx)(_Title["default"], {
         title: stimulus.title
-      })), (0, _emotion.jsx)(_quizCommon.Flex.Item, null, children)), (0, _emotion.jsx)(_Summary["default"], {
-        startPosition: displayPosition,
-        isDragging: isDragging,
-        isShowingItems: isShowingItems,
-        sidebarOpen: sidebarOpen,
-        stimulusId: stimulus.id,
-        numberOfItems: this.props.childEntries.size
-      }))), this.renderCollection());
+      })), (0, _emotion.jsx)(_quizCommon.Flex.Item, null, children)), this.renderSummary())), this.renderCollection());
     }
   }, {
     key: "render",

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

@@ -6,32 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var generateStyle = function generateStyle(componentTheme) {
   return {
-    sidebarItem: {
-      borderBottom: "".concat(componentTheme.sidebarItemBorderWidth, " solid ").concat(componentTheme.sidebarItemBorderColor)
-    },
-    sidebarItemClosedButton: {
-      borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.borderColor),
-      padding: componentTheme.sidebarClosedButtonPadding,
-      textAlign: 'center',
-      '&:hover': {
-        borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.hoverBorderColor)
-      }
-    },
-    stimulusHeader: {
-      padding: "".concat(componentTheme.sidebarHeaderPadding, " 0"),
-      borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.borderColor),
-      '&:hover:': {
-        borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.hoverBorderColor)
-      }
-    },
-    stimulusBody: {
-      marginLeft: '5%'
-    },
-    infoHeader: {
-      fontSize: componentTheme.sidebarIsOpenInfoHeaderFontSize,
-      color: componentTheme.sidebarIsOpenInfoHeaderColor,
-      marginBottom: componentTheme.sidebarIsOpenInfoHeaderMargin,
-      paddingLeft: componentTheme.sidebarIsOpenInfoHeaderPadding
+    onHover: {
+      borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.hoverBorderColor)
     }
   };
 };

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

@@ -10,17 +10,8 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     borders = _ref.borders,
     typography = _ref.typography;
   return {
-    borderColor: colors.white,
-    hoverBorderColor: colors.electric,
-    hoverBorderWidth: borders.widthLarge,
-    sidebarClosedButtonPadding: "".concat(spacing.xxSmall, " 0"),
-    sidebarHeaderPadding: spacing.small,
-    sidebarItemBorderWidth: borders.widthSmall,
-    sidebarItemBorderColor: colors.tiara,
-    sidebarIsOpenInfoHeaderFontSize: typography.fontSizeXSmall,
-    sidebarIsOpenInfoHeaderPadding: spacing.xSmall,
-    sidebarIsOpenInfoHeaderMargin: spacing.xSmall,
-    sidebarIsOpenInfoHeaderColor: colors.ash
+    borderColor: colors.contrasts.white1010,
+    hoverBorderColor: colors.contrasts.blue4570
   };
 };
 var _default = exports["default"] = generateComponentTheme;

package/lib/common/components/resources/BankSelection/presenter.js

@@ -19,20 +19,34 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 var _instUIMessages = require("../../../util/instUIMessages");
 var _banks = require("../../../../banks/api/banks");
 var _GenericAsyncSearch = require("../../shared/GenericAsyncSearch/GenericAsyncSearch");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _callSuper(_this, derived, args) {
+  function isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+    try {
+      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    } catch (e) {
+      return false;
+    }
+  }
+  derived = (0, _getPrototypeOf2["default"])(derived);
+  return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
+}
 var BankSelection = exports.BankSelection = /*#__PURE__*/function (_Component) {
-  function BankSelection() {
-    var _this;
+  function BankSelection(props) {
+    var _this2;
     (0, _classCallCheck2["default"])(this, BankSelection);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, BankSelection, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "searchBanks", function (search) {
-      return _this.props.simpleFetchBanks({
+    _this2 = _callSuper(this, BankSelection, [props]);
+    (0, _defineProperty2["default"])(_this2, "setInputRef", function (ref) {
+      var _this2$props$inputRef, _this2$props;
+      _this2.inputRef = ref;
+      (_this2$props$inputRef = (_this2$props = _this2.props).inputRef) === null || _this2$props$inputRef === void 0 || _this2$props$inputRef.call(_this2$props, ref);
+    });
+    (0, _defineProperty2["default"])(_this2, "searchBanks", function (search) {
+      return _this2.props.simpleFetchBanks({
         search: search
       }).then(function (_ref) {
         var _ref2 = (0, _slicedToArray2["default"])(_ref, 1),
@@ -46,25 +60,38 @@ var BankSelection = exports.BankSelection = /*#__PURE__*/function (_Component) {
         });
       });
     });
-    (0, _defineProperty2["default"])(_this, "onSelect", function (e, bankOption) {
-      return _this.props.onBankSelection(e, {
+    (0, _defineProperty2["default"])(_this2, "onSelect", function (e, bankOption) {
+      return _this2.props.onBankSelection(e, {
         id: parseInt(bankOption.id),
         title: bankOption.text,
         archived: bankOption.archived
       });
     });
-    return _this;
+    _this2.inputRef = null;
+    return _this2;
   }
   (0, _inherits2["default"])(BankSelection, _Component);
   return (0, _createClass2["default"])(BankSelection, [{
+    key: "focusSelectField",
+    value: function focusSelectField() {
+      if (this.inputRef) {
+        this.inputRef.focus();
+      }
+    }
+  }, {
     key: "getErrors",
     value: function getErrors() {
       var selectedBank = this.props.selectedBank;
       if (selectedBank && selectedBank.archived) {
+        this.focusSelectField();
         return (0, _instUIMessages.toErrors)([(0, _formatMessage["default"])('The item bank "{ bankTitle }" no longer exists. Please select a valid bank.', {
           bankTitle: selectedBank.title
         })]);
       }
+      if (this.props.externalError) {
+        this.focusSelectField();
+        return this.props.externalError;
+      }
     }
   }, {
     key: "selectedOption",
@@ -80,13 +107,15 @@ var BankSelection = exports.BankSelection = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/_react["default"].createElement(_GenericAsyncSearch.GenericAsyncSearch, {
+        inputRef: this.setInputRef,
         onSelectionChange: this.onSelect,
         label: this.props.label || (0, _formatMessage["default"])('Select the destination bank'),
         placeholder: (0, _formatMessage["default"])('Search for a bank'),
         selectedOption: this.selectedOption(),
         getOptions: this.searchBanks,
         messages: this.getErrors(),
-        selectAutomation: 'sdk-item-bank-modal'
+        selectAutomation: 'sdk-item-bank-modal',
+        isRequired: this.props.isRequired
       });
     }
   }]);
@@ -95,12 +124,18 @@ var BankSelection = exports.BankSelection = /*#__PURE__*/function (_Component) {
   label: _propTypes["default"].string,
   onBankSelection: _propTypes["default"].func,
   selectedBank: _reactImmutableProptypes["default"].record,
-  simpleFetchBanks: _propTypes["default"].func
+  simpleFetchBanks: _propTypes["default"].func,
+  externalError: _reactImmutableProptypes["default"].record,
+  inputRef: _propTypes["default"].func,
+  isRequired: _propTypes["default"].bool
 });
 (0, _defineProperty2["default"])(BankSelection, "defaultProps", {
   label: null,
   onBankSelection: function onBankSelection() {},
   selectedBank: null,
-  simpleFetchBanks: _banks.simpleFetchBanks
+  simpleFetchBanks: _banks.simpleFetchBanks,
+  externalError: null,
+  inputRef: function inputRef() {},
+  isRequired: false
 });
 var _default = exports["default"] = BankSelection;

package/lib/common/components/resources/WarningWrapper/index.js

@@ -23,21 +23,33 @@ var _theme = _interopRequireDefault(require("./theme"));
 var _quizCommon = require("@instructure/quiz-common");
 var _dec, _class, _WarningWrapper;
 /** @jsx jsx */
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _callSuper(_this, derived, args) {
+  function isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+    try {
+      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    } catch (e) {
+      return false;
+    }
+  }
+  derived = (0, _getPrototypeOf2["default"])(derived);
+  return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
+}
 var WarningWrapper = exports.WarningWrapper = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_WarningWrapper = /*#__PURE__*/function (_Component) {
   function WarningWrapper() {
-    var _this;
+    var _this2;
     (0, _classCallCheck2["default"])(this, WarningWrapper);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _callSuper(this, WarningWrapper, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "focusRef", null);
-    (0, _defineProperty2["default"])(_this, "setFocusRef", function (element) {
-      _this.focusRef = element;
+    _this2 = _callSuper(this, WarningWrapper, [].concat(args));
+    (0, _defineProperty2["default"])(_this2, "focusRef", null);
+    (0, _defineProperty2["default"])(_this2, "setFocusRef", function (element) {
+      _this2.focusRef = element;
     });
-    return _this;
+    return _this2;
   }
   (0, _inherits2["default"])(WarningWrapper, _Component);
   return (0, _createClass2["default"])(WarningWrapper, [{

package/lib/common/components/resources/WarningWrapper/theme.js

@@ -12,7 +12,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     alertPadding: spacing.medium,
     alertZIndex: '8888',
     containerPadding: spacing.medium,
-    disabledChildrenBackgroundColor: colors.porcelain,
+    disabledChildrenBackgroundColor: colors.contrasts.grey1111,
     disabledChildrenOpacity: '0.6',
     disabledChildrenZIndex: '7777'
   };