@instructure/quiz-core 20.34.1-undefined.0 → 20.35.0

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

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
@@ -5,16 +6,10 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { List } from 'immutable';
-import { Select } from '@instructure/ui-select';
-import { omitProps } from '@instructure/ui-react-utils';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { toErrors } from "../../../util/instUIMessages.js";
-import { SELECT_BANKS_OPTIONS, SELECT_EMPTY_OPTION, SELECT_EMPTY_OPTION_TEXT } from '@instructure/quiz-common';
-var _ref4 = /*#__PURE__*/React.createElement(Select.Option, {
-  id: SELECT_EMPTY_OPTION,
-  key: SELECT_EMPTY_OPTION
-}, SELECT_EMPTY_OPTION_TEXT);
+import { simpleFetchBanks } from "../../../../banks/api/banks.js";
+import { GenericAsyncSearch } from "../../shared/GenericAsyncSearch/GenericAsyncSearch.js";
 export var BankSelection = /*#__PURE__*/function (_Component) {
   _inherits(BankSelection, _Component);
   var _super = _createSuper(BankSelection);
@@ -25,112 +20,31 @@ export var BankSelection = /*#__PURE__*/function (_Component) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    _this.state = {
-      inputValue: _this.props.selectedBank ? _this.props.selectedBank.title : '',
-      isShowingOptions: false,
-      highlightedOptionId: null,
-      filteredOptions: _this.props.banks ? _this.props.banks.toArray() : []
-    };
-    _this.filterOptions = function (value) {
-      return _this.props.banks.toArray().filter(function (option) {
-        return option.title.toLowerCase().startsWith(value.toLowerCase());
-      });
-    };
-    _this.handleShowOptions = function () {
-      _this.setState({
-        filteredOptions: _this.props.banks.toArray(),
-        isShowingOptions: true
-      });
-    };
-    _this.handleHideOptions = function () {
-      var _this$state = _this.state,
-        filteredOptions = _this$state.filteredOptions,
-        inputValue = _this$state.inputValue;
-      var index = filteredOptions.findIndex(function (option) {
-        return option.title.toLowerCase() === inputValue.toLowerCase();
-      });
-      if (index !== -1) {
-        _this.handleSelectOption({}, {
-          id: filteredOptions[index].id
-        });
-      } else {
-        _this.setState({
-          isShowingOptions: false,
-          highlightedOptionId: null,
-          inputValue: _this.props.selectedBank ? _this.props.selectedBank.title : ''
+    _this.searchBanks = function (search) {
+      return _this.props.simpleFetchBanks({
+        search: search
+      }).then(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 1),
+          banks = _ref2[0];
+        return banks.map(function (b) {
+          return {
+            id: b.id,
+            text: b.title,
+            archived: b.archived
+          };
         });
-      }
-    };
-    _this.handleBlur = function () {
-      _this.setState({
-        highlightedOptionId: null
-      });
-    };
-    _this.handleHighlightOption = function (event, _ref) {
-      var id = _ref.id;
-      event.persist();
-      var option = _this.getOptionById(id);
-      if (!option) return;
-      _this.setState({
-        highlightedOptionId: id,
-        inputValue: event.type === 'keydown' ? option.title : _this.state.inputValue
-      });
-    };
-    _this.handleSelectOption = function (event, _ref2) {
-      var id = _ref2.id;
-      if (!id || id === SELECT_EMPTY_OPTION) return;
-      var option = _this.getOptionById(id);
-      _this.props.onBankSelection(event, {
-        value: id
-      });
-      _this.setState({
-        inputValue: option.title,
-        isShowingOptions: false,
-        filteredOptions: _this.props.banks.toArray()
       });
     };
-    _this.handleInputChange = function (event) {
-      var value = event.target.value;
-      var newOptions = _this.filterOptions(value);
-      _this.setState({
-        inputValue: value,
-        filteredOptions: newOptions,
-        highlightedOptionId: newOptions.length > 0 ? newOptions[0].id : null,
-        isShowingOptions: true
+    _this.onSelect = function (e, bankOption) {
+      return _this.props.onBankSelection(e, {
+        id: parseInt(bankOption.id),
+        title: bankOption.text,
+        archived: bankOption.archived
       });
     };
     return _this;
   }
   _createClass(BankSelection, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-      return this.props.getAllBanks().then(function (bankIds) {
-        return _this2.props.setUi(SELECT_BANKS_OPTIONS, List(bankIds));
-      });
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      if (prevProps.banks !== this.props.banks) {
-        this.setState({
-          filteredOptions: this.props.banks.toArray()
-        });
-      }
-    }
-  }, {
-    key: "renderOptions",
-    value: function renderOptions() {
-      var _this3 = this;
-      return this.props.banks.toArray().map(function (bank) {
-        return /*#__PURE__*/React.createElement(Select.Option, {
-          key: bank.id,
-          id: bank.id,
-          isSelected: bank.id === _this3.props.selectedBank.id && !bank.archived
-        }, bank.title);
-      });
-    }
-  }, {
     key: "getErrors",
     value: function getErrors() {
       var selectedBank = this.props.selectedBank;
@@ -141,58 +55,42 @@ export var BankSelection = /*#__PURE__*/function (_Component) {
       }
     }
   }, {
-    key: "getOptionById",
-    value: function getOptionById(queryId) {
-      return this.props.banks.toArray().find(function (_ref3) {
-        var id = _ref3.id;
-        return id === queryId;
-      });
+    key: "selectedOption",
+    value: function selectedOption() {
+      var selectedBank = this.props.selectedBank;
+      return selectedBank ? {
+        id: selectedBank.id,
+        text: selectedBank.title,
+        archived: selectedBank.archived
+      } : null;
     }
   }, {
     key: "render",
     value: function render() {
-      var _this4 = this;
-      var _this$state2 = this.state,
-        inputValue = _this$state2.inputValue,
-        isShowingOptions = _this$state2.isShowingOptions,
-        filteredOptions = _this$state2.filteredOptions,
-        highlightedOptionId = _this$state2.highlightedOptionId;
-      return /*#__PURE__*/React.createElement(Select, Object.assign({}, omitProps(this.props, BankSelection.propTypes), {
-        renderLabel: this.props.label || t('Select the destination bank'),
-        inputValue: inputValue,
-        isShowingOptions: isShowingOptions,
-        onBlur: this.handleBlur,
-        onInputChange: this.handleInputChange,
-        onRequestShowOptions: this.handleShowOptions,
-        onRequestHideOptions: this.handleHideOptions,
-        onRequestHighlightOption: this.handleHighlightOption,
-        onRequestSelectOption: this.handleSelectOption,
-        "data-automation": "sdk-item-bank-modal",
-        messages: this.getErrors()
-      }), filteredOptions && filteredOptions.length > 0 ? filteredOptions.map(function (bank) {
-        return /*#__PURE__*/React.createElement(Select.Option, {
-          id: bank.id,
-          key: bank.id,
-          isHighlighted: bank.id === highlightedOptionId,
-          isSelected: _this4.props.selectedBank && bank.id === _this4.props.selectedBank.id && !bank.archived
-        }, bank.title);
-      }) : _ref4);
+      return /*#__PURE__*/React.createElement(GenericAsyncSearch, {
+        onSelectionChange: this.onSelect,
+        label: this.props.label || t('Select the destination bank'),
+        placeholder: t('Search for a bank'),
+        selectedOption: this.selectedOption(),
+        getOptions: this.searchBanks,
+        messages: this.getErrors(),
+        selectAutomation: 'sdk-item-bank-modal'
+      });
     }
   }]);
   BankSelection.displayName = "BankSelection";
   return BankSelection;
 }(Component);
 BankSelection.propTypes = {
-  banks: ImmutablePropTypes.list.isRequired,
-  getAllBanks: PropTypes.func.isRequired,
   label: PropTypes.string,
   onBankSelection: PropTypes.func,
   selectedBank: ImmutablePropTypes.record,
-  setUi: PropTypes.func.isRequired
+  simpleFetchBanks: PropTypes.func
 };
 BankSelection.defaultProps = {
   label: null,
   onBankSelection: function onBankSelection() {},
-  selectedBank: null
+  selectedBank: null,
+  simpleFetchBanks: simpleFetchBanks
 };
 export default BankSelection;

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

@@ -9,11 +9,12 @@ import PropTypes from 'prop-types';
 import { Alert } from '@instructure/ui-alerts';
 import { Button } from '@instructure/ui-buttons';
 import { Text } from '@instructure/ui-text';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-export var WarningWrapper = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_WarningWrapper = /*#__PURE__*/function (_Component) {
+import { withStyleOverrides } from '@instructure/quiz-common';
+export var WarningWrapper = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_WarningWrapper = /*#__PURE__*/function (_Component) {
   _inherits(WarningWrapper, _Component);
   var _super = _createSuper(WarningWrapper);
   function WarningWrapper() {
@@ -97,7 +98,7 @@ export var WarningWrapper = (_dec = withStyle(generateStyle, generateComponentTh
   }]);
   WarningWrapper.displayName = "WarningWrapper";
   return WarningWrapper;
-}(Component), _WarningWrapper.propTypes = {
+}(Component), _WarningWrapper.displayName = 'WarningWrapper', _WarningWrapper.componentId = "Quizzes".concat(_WarningWrapper.displayName), _WarningWrapper.propTypes = {
   alertType: PropTypes.oneOf(['info', 'success', 'warning', 'error']),
   cancelActionCallback: PropTypes.func,
   cancelActionText: PropTypes.string,

package/es/common/components/resources/positionBox/PositionBox.js

@@ -8,10 +8,11 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Heading } from '@instructure/ui-heading';
 import { ScreenReaderContent, PresentationContent } from '@instructure/ui-a11y-content';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-export var PositionBox = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_PositionBox = /*#__PURE__*/function (_Component) {
+import { withStyleOverrides } from '@instructure/quiz-common';
+export var PositionBox = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_PositionBox = /*#__PURE__*/function (_Component) {
   _inherits(PositionBox, _Component);
   var _super = _createSuper(PositionBox);
   function PositionBox() {
@@ -35,7 +36,7 @@ export var PositionBox = (_dec = withStyle(generateStyle, generateComponentTheme
   }]);
   PositionBox.displayName = "PositionBox";
   return PositionBox;
-}(Component), _PositionBox.propTypes = {
+}(Component), _PositionBox.displayName = 'PositionBox', _PositionBox.componentId = "Quizzes".concat(_PositionBox.displayName), _PositionBox.propTypes = {
   headingText: PropTypes.string.isRequired,
   headingLevel: PropTypes.string,
   position: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,

package/es/common/components/resources/quiz/AddContent/Body/presenter.js

@@ -13,14 +13,14 @@ import { IconButton } from '@instructure/ui-buttons';
 import { Grid } from '@instructure/ui-grid';
 import { View } from '@instructure/ui-view';
 import { Text } from '@instructure/ui-text';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import InteractionTypes from "../../../../shared/InteractionTypes/index.js";
 import t from '@instructure/quiz-i18n/es/format-message';
-import { BUILD_TRAY_OPEN, BUILD_TRAY_POSITION, BUILD_TRAY_STIMULUS_ID } from '@instructure/quiz-common';
+import { BUILD_TRAY_OPEN, BUILD_TRAY_POSITION, BUILD_TRAY_STIMULUS_ID, withStyleOverrides } from '@instructure/quiz-common';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 var _ref = jsx(IconBankLine, null);
-export var AddContentBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_AddContentBody = /*#__PURE__*/function (_Component) {
+export var AddContentBody = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_AddContentBody = /*#__PURE__*/function (_Component) {
   _inherits(AddContentBody, _Component);
   var _super = _createSuper(AddContentBody);
   function AddContentBody() {
@@ -125,7 +125,7 @@ export var AddContentBody = (_dec = withStyle(generateStyle, generateComponentTh
   }]);
   AddContentBody.displayName = "AddContentBody";
   return AddContentBody;
-}(Component), _AddContentBody.propTypes = {
+}(Component), _AddContentBody.displayName = 'AddContentBody', _AddContentBody.componentId = "Quizzes".concat(_AddContentBody.displayName), _AddContentBody.propTypes = {
   allowStimulusCreation: PropTypes.bool.isRequired,
   createItem: PropTypes.func.isRequired,
   createStimulus: PropTypes.func.isRequired,

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

@@ -9,12 +9,12 @@ import PropTypes from 'prop-types';
 import { IconPlusLine } from '@instructure/ui-icons';
 import { PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Button } from '@instructure/ui-buttons';
-import { withStyle, jsx } from '@instructure/emotion';
+import { 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) {
+import { END_EDITING_TRIGGER_CLASSNAME, withStyleOverrides } from '@instructure/quiz-common';
+export var AddContentButton = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_AddContentButton = /*#__PURE__*/function (_Component) {
   _inherits(AddContentButton, _Component);
   var _super = _createSuper(AddContentButton);
   function AddContentButton() {
@@ -82,7 +82,7 @@ export var AddContentButton = (_dec = withStyle(generateStyle, generateComponent
   }]);
   AddContentButton.displayName = "AddContentButton";
   return AddContentButton;
-}(Component), _AddContentButton.propTypes = {
+}(Component), _AddContentButton.displayName = 'AddContentButton', _AddContentButton.componentId = "Quizzes".concat(_AddContentButton.displayName), _AddContentButton.propTypes = {
   isEditing: PropTypes.bool.isRequired,
   onClick: PropTypes.func,
   position: PropTypes.number,

package/es/common/components/resources/quiz/AddContent/Popover/presenter.js

@@ -7,16 +7,16 @@ var _dec, _class, _AddContentPopover;
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Popover } from '@instructure/ui-popover';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import CustomPropTypes from "../../../../../util/CustomPropTypes.js";
 import elementsForSelectors from "../../../../../util/ElementsForSelectors.js";
 import { onPhone, onTablet } from "../../../../../util/windowChecks.js";
 import AddContentButton from "../Button/index.js";
 import AddContentBody from "../Body/index.js";
-import { DELETED_QUIZ_ENTRY } from '@instructure/quiz-common';
+import { DELETED_QUIZ_ENTRY, withStyleOverrides } from '@instructure/quiz-common';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-export var AddContentPopover = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_AddContentPopover = /*#__PURE__*/function (_Component) {
+export var AddContentPopover = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_AddContentPopover = /*#__PURE__*/function (_Component) {
   _inherits(AddContentPopover, _Component);
   var _super = _createSuper(AddContentPopover);
   function AddContentPopover() {
@@ -110,7 +110,7 @@ export var AddContentPopover = (_dec = withStyle(generateStyle, generateComponen
   }]);
   AddContentPopover.displayName = "AddContentPopover";
   return AddContentPopover;
-}(Component), _AddContentPopover.propTypes = {
+}(Component), _AddContentPopover.displayName = 'AddContentPopover', _AddContentPopover.componentId = "Quizzes".concat(_AddContentPopover.displayName), _AddContentPopover.propTypes = {
   appContainer: CustomPropTypes.selectors.isRequired,
   allowStimulusCreation: PropTypes.bool,
   clearUi: PropTypes.func.isRequired,

package/es/common/components/resources/quiz/instructions/Instructions.js

@@ -8,7 +8,7 @@ var _dec, _class, _QuizInstructions;
 import { Component } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import { RichContentRenderer } from '@instructure/quiz-rce';
 import makeScrollable from "../../../shared/functionality/makeScrollable.js"; // ================================
 // renders the quiz instructions on
@@ -16,7 +16,8 @@ import makeScrollable from "../../../shared/functionality/makeScrollable.js"; //
 // ================================
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-export var QuizInstructions = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_QuizInstructions = /*#__PURE__*/function (_Component) {
+import { withStyleOverrides } from '@instructure/quiz-common';
+export var QuizInstructions = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_QuizInstructions = /*#__PURE__*/function (_Component) {
   _inherits(QuizInstructions, _Component);
   var _super = _createSuper(QuizInstructions);
   function QuizInstructions() {
@@ -40,7 +41,7 @@ export var QuizInstructions = (_dec = withStyle(generateStyle, generateComponent
   }]);
   QuizInstructions.displayName = "QuizInstructions";
   return QuizInstructions;
-}(Component), _QuizInstructions.propTypes = {
+}(Component), _QuizInstructions.displayName = 'QuizInstructions', _QuizInstructions.componentId = "Quizzes".concat(_QuizInstructions.displayName), _QuizInstructions.propTypes = {
   quiz: ImmutablePropTypes.record.isRequired,
   styles: PropTypes.object
 }, _QuizInstructions)) || _class);

package/es/common/components/resources/quiz/title/Title.js

@@ -8,14 +8,15 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Heading } from '@instructure/ui-heading';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import makeScrollable from "../../../shared/functionality/makeScrollable.js"; // ==========================
 // renders the quiz title on
 // the Preview and Take pages
 // ==========================
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-export var QuizTitle = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_QuizTitle = /*#__PURE__*/function (_Component) {
+import { withStyleOverrides } from '@instructure/quiz-common';
+export var QuizTitle = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_QuizTitle = /*#__PURE__*/function (_Component) {
   _inherits(QuizTitle, _Component);
   var _super = _createSuper(QuizTitle);
   function QuizTitle() {
@@ -38,7 +39,7 @@ export var QuizTitle = (_dec = withStyle(generateStyle, generateComponentTheme),
   }]);
   QuizTitle.displayName = "QuizTitle";
   return QuizTitle;
-}(Component), _QuizTitle.propTypes = {
+}(Component), _QuizTitle.displayName = 'QuizTitle', _QuizTitle.componentId = "Quizzes".concat(_QuizTitle.displayName), _QuizTitle.propTypes = {
   quiz: ImmutablePropTypes.record.isRequired,
   styles: PropTypes.object
 }, _QuizTitle)) || _class);

package/es/common/components/resources/quizSessionResult/Header/index.js

@@ -9,11 +9,12 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Heading } from '@instructure/ui-heading';
 import { Alert } from '@instructure/ui-alerts';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-export var QuizSessionResultHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_QuizSessionResultHeader = /*#__PURE__*/function (_Component) {
+import { withStyleOverrides } from '@instructure/quiz-common';
+export var QuizSessionResultHeader = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_QuizSessionResultHeader = /*#__PURE__*/function (_Component) {
   _inherits(QuizSessionResultHeader, _Component);
   var _super = _createSuper(QuizSessionResultHeader);
   function QuizSessionResultHeader() {
@@ -65,7 +66,7 @@ export var QuizSessionResultHeader = (_dec = withStyle(generateStyle, generateCo
   }]);
   QuizSessionResultHeader.displayName = "QuizSessionResultHeader";
   return QuizSessionResultHeader;
-}(Component), _QuizSessionResultHeader.propTypes = {
+}(Component), _QuizSessionResultHeader.displayName = 'QuizSessionResultHeader', _QuizSessionResultHeader.componentId = "Quizzes".concat(_QuizSessionResultHeader.displayName), _QuizSessionResultHeader.propTypes = {
   quizSession: ImmutablePropTypes.record.isRequired,
   regradedSessionItemResults: ImmutablePropTypes.list,
   studentDescription: PropTypes.node,

package/es/common/components/resources/quizSessionResult/Info/index.js

@@ -14,16 +14,16 @@ import { Text } from '@instructure/ui-text';
 import { ProgressCircle } from '@instructure/ui-progress';
 import { Heading } from '@instructure/ui-heading';
 import { View } from '@instructure/ui-view';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { scoreToLetterGrade } from '@instructure/grading-utils';
-import { withI18nSupport } from '@instructure/quiz-common';
+import { withI18nSupport, withStyleOverrides } from '@instructure/quiz-common';
 import FormattedDuration from "../../../shared/FormattedDuration/index.js";
 import { formatTime } from "../../../../util/formatTimespan.js";
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 var unknownPercentageValue = 'UNKNOWN_PERCENTAGE';
-export var Info = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Info = /*#__PURE__*/function (_withI18nSupport) {
+export var Info = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_Info = /*#__PURE__*/function (_withI18nSupport) {
   _inherits(Info, _withI18nSupport);
   var _super = _createSuper(Info);
   function Info(props) {
@@ -279,7 +279,7 @@ export var Info = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   }]);
   Info.displayName = "Info";
   return Info;
-}(withI18nSupport(Component)), _Info.propTypes = {
+}(withI18nSupport(Component)), _Info.displayName = 'QuizSessionResultInfo', _Info.componentId = "Quizzes".concat(_Info.displayName), _Info.propTypes = {
   gradingScheme: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string,
     value: PropTypes.number

package/es/common/components/resources/sessionItemResult/ResultStimulus/index.js

@@ -7,12 +7,13 @@ var _dec, _class, _ResultStimulus;
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import { RichContentRenderer } from '@instructure/quiz-rce';
 import t from '@instructure/quiz-i18n/es/format-message';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-export var ResultStimulus = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_ResultStimulus = /*#__PURE__*/function (_Component) {
+import { withStyleOverrides } from '@instructure/quiz-common';
+export var ResultStimulus = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_ResultStimulus = /*#__PURE__*/function (_Component) {
   _inherits(ResultStimulus, _Component);
   var _super = _createSuper(ResultStimulus);
   function ResultStimulus() {
@@ -79,7 +80,7 @@ export var ResultStimulus = (_dec = withStyle(generateStyle, generateComponentTh
   }]);
   ResultStimulus.displayName = "ResultStimulus";
   return ResultStimulus;
-}(Component), _ResultStimulus.propTypes = {
+}(Component), _ResultStimulus.displayName = 'ResultStimulus', _ResultStimulus.componentId = "Quizzes".concat(_ResultStimulus.displayName), _ResultStimulus.propTypes = {
   stimulus: ImmutablePropTypes.record.isRequired,
   sessionItem: ImmutablePropTypes.record.isRequired,
   renderItem: PropTypes.func.isRequired,

package/es/common/components/resources/sessionItemResult/SessionItemResult/presenter.js

@@ -13,17 +13,17 @@ import { Text } from '@instructure/ui-text';
 import { Heading } from '@instructure/ui-heading';
 import { View } from '@instructure/ui-view';
 import { PresentationContent } from '@instructure/ui-a11y-content';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import { RichContentRenderer } from '@instructure/quiz-rce';
 import t from '@instructure/quiz-i18n/es/format-message';
 import PositionBox from "../../positionBox/PositionBox.js";
-import { COMPONENT_RESULT } from '@instructure/quiz-common';
+import { COMPONENT_RESULT, withStyleOverrides } from '@instructure/quiz-common';
 import componentForItem from "../../../../util/componentForItem.js";
 import CustomPropTypes from "../../../../util/CustomPropTypes.js";
 import keyboardClickable from "../../../../util/keyboardClickable.js";
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-export var SessionItemResult = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_SessionItemResult = /*#__PURE__*/function (_Component) {
+export var SessionItemResult = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_SessionItemResult = /*#__PURE__*/function (_Component) {
   _inherits(SessionItemResult, _Component);
   var _super = _createSuper(SessionItemResult);
   function SessionItemResult() {
@@ -310,7 +310,7 @@ export var SessionItemResult = (_dec = withStyle(generateStyle, generateComponen
   }]);
   SessionItemResult.displayName = "SessionItemResult";
   return SessionItemResult;
-}(Component), _SessionItemResult.propTypes = {
+}(Component), _SessionItemResult.displayName = 'SessionItemResult', _SessionItemResult.componentId = "Quizzes".concat(_SessionItemResult.displayName), _SessionItemResult.propTypes = {
   appContainer: CustomPropTypes.selectors.isRequired,
   editGraderFeedback: PropTypes.func,
   hideGraderFeedback: PropTypes.bool,

package/es/common/components/resources/sessionItemResult/SessionItemResultsList/index.js

@@ -8,7 +8,7 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Heading } from '@instructure/ui-heading';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import CustomPropTypes from "../../../../util/CustomPropTypes.js";
 import SessionItemResult from "../SessionItemResult/index.js";
@@ -16,7 +16,8 @@ import ResultStimulus from "../ResultStimulus/index.js";
 import generateDisplayPositions from "../../../../util/generateDisplayPositions.js";
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-export var SessionItemResultsList = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_SessionItemResultsList = /*#__PURE__*/function (_Component) {
+import { withStyleOverrides } from '@instructure/quiz-common';
+export var SessionItemResultsList = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_SessionItemResultsList = /*#__PURE__*/function (_Component) {
   _inherits(SessionItemResultsList, _Component);
   var _super = _createSuper(SessionItemResultsList);
   function SessionItemResultsList() {
@@ -73,7 +74,7 @@ export var SessionItemResultsList = (_dec = withStyle(generateStyle, generateCom
   }]);
   SessionItemResultsList.displayName = "SessionItemResultsList";
   return SessionItemResultsList;
-}(Component), _SessionItemResultsList.propTypes = {
+}(Component), _SessionItemResultsList.displayName = 'SessionItemResultsList', _SessionItemResultsList.componentId = "Quizzes".concat(_SessionItemResultsList.displayName), _SessionItemResultsList.propTypes = {
   appContainer: CustomPropTypes.selectors.isRequired,
   restrictQuantitativeData: PropTypes.bool,
   sessionItems: ImmutablePropTypes.list.isRequired,

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

@@ -9,18 +9,18 @@ import PropTypes from 'prop-types';
 import { DragSource } from 'react-dnd';
 import { List, Map } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import AddContentPopover from "../../quiz/AddContent/Popover/index.js";
 import StimulusEdit from "../StimulusEdit/index.js";
 import StimulusShow from "../StimulusShow/index.js";
 import DragAndDropZone from "../../../shared/drag_and_drop/DragAndDropZone/index.js";
 import { ItemTypes, dragSource, collectDrag } from "../../../../../common/components/shared/drag_and_drop/dragAndDropUtils.js";
 import wrapWithOutsideClickEmotion from "../../../shared/functionality/componentWithOutsideClickEmotion.js";
-import { DELETE_STIMULUS_DATA } from '@instructure/quiz-common';
+import { DELETE_STIMULUS_DATA, withStyleOverrides } from '@instructure/quiz-common';
 import ConnectedQuizEntry from "../../../../../building/components/resources/quizEntry/QuizEntry/index.js";
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-export var Stimulus = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Stimulus = /*#__PURE__*/function (_Component) {
+export var Stimulus = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_Stimulus = /*#__PURE__*/function (_Component) {
   _inherits(Stimulus, _Component);
   var _super = _createSuper(Stimulus);
   function Stimulus() {
@@ -160,7 +160,7 @@ export var Stimulus = (_dec = withStyle(generateStyle, generateComponentTheme),
   }]);
   Stimulus.displayName = "Stimulus";
   return Stimulus;
-}(Component), _Stimulus.propTypes = {
+}(Component), _Stimulus.displayName = 'Stimulus', _Stimulus.componentId = "Quizzes".concat(_Stimulus.displayName), _Stimulus.propTypes = {
   bankEntryWarningWrapperProps: PropTypes.func,
   childEntries: ImmutablePropTypes.listOf(ImmutablePropTypes.record).isRequired,
   connectDragPreview: PropTypes.func.isRequired,

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

@@ -14,8 +14,8 @@ import partial from 'lodash/partial';
 import ReactDOM from 'react-dom';
 import { Button } from '@instructure/ui-buttons';
 import { ToggleDetails } from '@instructure/ui-toggle-details';
-import { withStyle, jsx } from '@instructure/emotion';
-import { FILE_UPLOAD_SUCCESS, SHOULD_CLONE_ITEM, DELETED_QUIZ_ENTRY } from '@instructure/quiz-common';
+import { jsx } from '@instructure/emotion';
+import { FILE_UPLOAD_SUCCESS, SHOULD_CLONE_ITEM, DELETED_QUIZ_ENTRY, withStyleOverrides } from '@instructure/quiz-common';
 import { propsForStimulusVersioningWrapper, propsForBankEntryVersioningWrapper } from "../../../../util/warningHelpers.js";
 import AddToBankModal from "../../../../../banks/components/AddToBankModal/index.js";
 import AddToBankOptions from "../../../../../building/components/resources/AddToBankOptions/index.js";
@@ -29,7 +29,7 @@ import ActionButtons from "../../../../../building/components/resources/ActionBu
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 import t from '@instructure/quiz-i18n/es/format-message';
-export var StimulusEdit = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_StimulusEdit = /*#__PURE__*/function (_Component) {
+export var StimulusEdit = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_StimulusEdit = /*#__PURE__*/function (_Component) {
   _inherits(StimulusEdit, _Component);
   var _super = _createSuper(StimulusEdit);
   function StimulusEdit() {
@@ -402,7 +402,7 @@ export var StimulusEdit = (_dec = withStyle(generateStyle, generateComponentThem
   }]);
   StimulusEdit.displayName = "StimulusEdit";
   return StimulusEdit;
-}(Component), _StimulusEdit.propTypes = {
+}(Component), _StimulusEdit.displayName = 'StimulusEdit', _StimulusEdit.componentId = "Quizzes".concat(_StimulusEdit.displayName), _StimulusEdit.propTypes = {
   addContentPopoverOpen: PropTypes.bool.isRequired,
   appContainer: CustomPropTypes.selectors.isRequired,
   bankEntryWarningWrapperProps: PropTypes.func,