@instructure/quiz-core 20.34.0 → 20.34.1-snapshot.10

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,

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

@@ -10,14 +10,14 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { TextInput } from '@instructure/ui-text-input';
 import { FormField, FormFieldGroup } from '@instructure/ui-form-field';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import { Heading } from '@instructure/ui-heading';
 import { RichContentInput, RCE_SINGLE_LINE_HEIGHT } from '@instructure/quiz-rce';
 import { toErrors } from "../../../../util/instUIMessages.js";
 import { SimpleSelect } from '@instructure/ui-simple-select';
 import { IconUpdownLine } from '@instructure/ui-icons';
 import { ToggleDetails } from '@instructure/ui-toggle-details';
-import { TOP } from '@instructure/quiz-common';
+import { TOP, withStyleOverrides } from '@instructure/quiz-common';
 import t from '@instructure/quiz-i18n/es/format-message';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
@@ -25,7 +25,7 @@ var _ref3 = jsx(IconUpdownLine, {
   rotate: "90"
 });
 var _ref4 = jsx(IconUpdownLine, null);
-export var StimulusEditInfo = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_StimulusEditInfo = /*#__PURE__*/function (_Component) {
+export var StimulusEditInfo = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_StimulusEditInfo = /*#__PURE__*/function (_Component) {
   _inherits(StimulusEditInfo, _Component);
   var _super = _createSuper(StimulusEditInfo);
   function StimulusEditInfo() {
@@ -161,7 +161,7 @@ export var StimulusEditInfo = (_dec = withStyle(generateStyle, generateComponent
   }]);
   StimulusEditInfo.displayName = "StimulusEditInfo";
   return StimulusEditInfo;
-}(Component), _StimulusEditInfo.propTypes = {
+}(Component), _StimulusEditInfo.displayName = 'StimulusEditInfo', _StimulusEditInfo.componentId = "Quizzes".concat(_StimulusEditInfo.displayName), _StimulusEditInfo.propTypes = {
   isBankedContent: PropTypes.bool,
   stimulus: ImmutablePropTypes.record.isRequired,
   workingStimulus: ImmutablePropTypes.record.isRequired,

package/es/common/components/resources/stimulus/StimulusShow/index.js

@@ -9,15 +9,16 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { IconBankLine } from '@instructure/ui-icons';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import StimulusShowInfo from "../StimulusShowInfo/index.js";
 import ActionButtons from "../../../../../building/components/resources/ActionButtons/index.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 import Overlay from "../../../shared/overlay/index.js";
+import { withStyleOverrides } from '@instructure/quiz-common';
 var _ref = jsx(IconBankLine, null);
-export var StimulusShow = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_StimulusShow = /*#__PURE__*/function (_Component) {
+export var StimulusShow = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_StimulusShow = /*#__PURE__*/function (_Component) {
   _inherits(StimulusShow, _Component);
   var _super = _createSuper(StimulusShow);
   function StimulusShow() {
@@ -80,7 +81,7 @@ export var StimulusShow = (_dec = withStyle(generateStyle, generateComponentThem
   }]);
   StimulusShow.displayName = "StimulusShow";
   return StimulusShow;
-}(Component), _StimulusShow.propTypes = {
+}(Component), _StimulusShow.displayName = 'StimulusShow', _StimulusShow.componentId = "Quizzes".concat(_StimulusShow.displayName), _StimulusShow.propTypes = {
   connectDragSource: PropTypes.func.isRequired,
   displayPosition: PropTypes.number.isRequired,
   isBankedContent: PropTypes.bool,

package/es/common/components/shared/Card/CardContent/index.js

@@ -7,11 +7,12 @@ var _dec, _class, _CardContent;
 /** @jsx jsx */
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import { View } from '@instructure/ui-view';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-export var CardContent = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_CardContent = /*#__PURE__*/function (_Component) {
+import { withStyleOverrides } from '@instructure/quiz-common';
+export var CardContent = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_CardContent = /*#__PURE__*/function (_Component) {
   _inherits(CardContent, _Component);
   var _super = _createSuper(CardContent);
   function CardContent() {
@@ -31,7 +32,7 @@ export var CardContent = (_dec = withStyle(generateStyle, generateComponentTheme
   }]);
   CardContent.displayName = "CardContent";
   return CardContent;
-}(Component), _CardContent.propTypes = {
+}(Component), _CardContent.displayName = 'CardContent', _CardContent.componentId = "Quizzes".concat(_CardContent.displayName), _CardContent.propTypes = {
   children: PropTypes.node.isRequired,
   customStyles: PropTypes.object,
   styles: PropTypes.object,

package/es/common/components/shared/Card/CardWrapper/index.js

@@ -7,11 +7,12 @@ var _dec, _class, _CardWrapper;
 /** @jsx jsx */
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import { View } from '@instructure/ui-view';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-export var CardWrapper = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_CardWrapper = /*#__PURE__*/function (_Component) {
+import { withStyleOverrides } from '@instructure/quiz-common';
+export var CardWrapper = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_CardWrapper = /*#__PURE__*/function (_Component) {
   _inherits(CardWrapper, _Component);
   var _super = _createSuper(CardWrapper);
   function CardWrapper() {
@@ -31,7 +32,7 @@ export var CardWrapper = (_dec = withStyle(generateStyle, generateComponentTheme
   }]);
   CardWrapper.displayName = "CardWrapper";
   return CardWrapper;
-}(Component), _CardWrapper.propTypes = {
+}(Component), _CardWrapper.displayName = 'CardWrapper', _CardWrapper.componentId = "Quizzes".concat(_CardWrapper.displayName), _CardWrapper.propTypes = {
   children: PropTypes.node.isRequired,
   customStyles: PropTypes.object,
   styles: PropTypes.object

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

@@ -8,11 +8,12 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { IconArrowOpenDownLine } from '@instructure/ui-icons';
 import { IconButton } from '@instructure/ui-buttons';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import { omitProps } from '@instructure/ui-react-utils';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-export var ExpandButton = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_ExpandButton = /*#__PURE__*/function (_Component) {
+import { withStyleOverrides } from '@instructure/quiz-common';
+export var ExpandButton = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_ExpandButton = /*#__PURE__*/function (_Component) {
   _inherits(ExpandButton, _Component);
   var _super = _createSuper(ExpandButton);
   function ExpandButton() {
@@ -53,7 +54,7 @@ export var ExpandButton = (_dec = withStyle(generateStyle, generateComponentThem
   }]);
   ExpandButton.displayName = "ExpandButton";
   return ExpandButton;
-}(Component), _ExpandButton.propTypes = {
+}(Component), _ExpandButton.displayName = 'ExpandButton', _ExpandButton.componentId = "Quizzes".concat(_ExpandButton.displayName), _ExpandButton.propTypes = {
   isExpanded: PropTypes.bool.isRequired,
   title: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,

package/es/common/components/shared/GenericAsyncSearch/GenericAsyncSearch.js

@@ -0,0 +1,178 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import debounce from 'lodash/fp/debounce';
+import { Select } from '@instructure/ui-select';
+import { Spinner } from '@instructure/ui-spinner';
+import t from '@instructure/quiz-i18n/es/format-message';
+import { SELECT_EMPTY_OPTION } from '@instructure/quiz-common';
+export var GenericAsyncSearch = /*#__PURE__*/function (_Component) {
+  _inherits(GenericAsyncSearch, _Component);
+  var _super = _createSuper(GenericAsyncSearch);
+  function GenericAsyncSearch() {
+    var _this;
+    _classCallCheck(this, GenericAsyncSearch);
+    _this = _super.apply(this, arguments);
+    _this.setInputRef = function (inputRef) {
+      _this.inputRef = inputRef;
+    };
+    _this.state = {
+      inputValue: _this.props.selectedOption ? _this.props.selectedOption.text : '',
+      isShowingOptions: false,
+      isLoading: false,
+      highlightedOptionId: null,
+      shareableSubaccounts: [],
+      options: []
+    };
+    _this.handleShowOptions = function () {
+      _this.setState({
+        isShowingOptions: true
+      });
+    };
+    _this.close = function (inputValue) {
+      return _this.setState({
+        isShowingOptions: false,
+        highlightedOptionId: null,
+        inputValue: inputValue
+      });
+    };
+    _this.handleBlur = function () {
+      var _this$props$selectedO;
+      return _this.close(((_this$props$selectedO = _this.props.selectedOption) === null || _this$props$selectedO === void 0 ? void 0 : _this$props$selectedO.text) || '');
+    };
+    _this.handleHighlightOption = function (event, optionIdentifier) {
+      event.persist();
+      var option = _this.getOption(optionIdentifier.id);
+      _this.setState({
+        highlightedOptionId: option === null || option === void 0 ? void 0 : option.id,
+        inputValue: event.type === 'keydown' ? option === null || option === void 0 ? void 0 : option.text : _this.state.inputValue
+      });
+    };
+    _this.handleSelectOption = function (event, optionIdentifier) {
+      if (!optionIdentifier || !optionIdentifier.id || optionIdentifier.id === SELECT_EMPTY_OPTION) return;
+      var option = _this.getOption(optionIdentifier.id);
+      _this.props.onSelectionChange(event, option);
+      _this.close(option.text);
+    };
+    _this.handleInputChange = function (event) {
+      var value = event.target.value;
+      var shouldSearch = !!value && value.length >= _this.props.minChars;
+      _this.setState({
+        inputValue: value,
+        isShowingOptions: true
+      });
+      if (shouldSearch) {
+        _this.setState({
+          isLoading: true,
+          options: [],
+          highlightedOptionId: null
+        });
+        _this.search(value);
+      }
+    };
+    _this.handleKeyDown = function (event) {
+      if (event.keyCode === 8 && _this.state.inputValue === '') {
+        // when backspace key is pressed
+        _this.setState({
+          highlightedOptionId: null
+        });
+      }
+    };
+    _this.actualOptions = function () {
+      return _this.state.options.map(function (option) {
+        return /*#__PURE__*/React.createElement(Select.Option, {
+          id: option.id,
+          key: option.id,
+          isHighlighted: option.id === _this.state.highlightedOptionId
+        }, option.text);
+      });
+    };
+    _this.emptyOptionText = function () {
+      if (_this.props.minChars > 1 && _this.state.inputValue < _this.props.minChars) {
+        return t('Search term must be at least { minChars } characters', {
+          minChars: _this.props.minChars
+        });
+      }
+      return _this.state.inputValue === '' ? t('Write to search') : t('No Results');
+    };
+    _this.emptyOrLoadingOption = function () {
+      return /*#__PURE__*/React.createElement(Select.Option, {
+        id: SELECT_EMPTY_OPTION,
+        key: SELECT_EMPTY_OPTION
+      }, _this.state.isLoading ? /*#__PURE__*/React.createElement(Spinner, {
+        renderTitle: t('Loading'),
+        size: "x-small"
+      }) : _this.emptyOptionText());
+    };
+    _this.renderOptions = function () {
+      return _this.state.options.length ? _this.actualOptions() : _this.emptyOrLoadingOption();
+    };
+    _this.search = debounce(_this.props.debounceDelay, function (value) {
+      _this.props.getOptions(value).then(function (options) {
+        var _options$;
+        _this.setState({
+          options: options,
+          highlightedOptionId: ((_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.id) || null,
+          isLoading: false
+        });
+      });
+    });
+    return _this;
+  }
+  _createClass(GenericAsyncSearch, [{
+    key: "getOption",
+    value: function getOption(queryId) {
+      return this.state.options.find(function (_ref) {
+        var id = _ref.id;
+        return id === queryId;
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(Select, {
+        "data-automation": this.props.selectAutomation,
+        renderLabel: this.props.label,
+        placeholder: this.props.placeholder,
+        inputValue: this.state.inputValue,
+        isShowingOptions: this.state.isShowingOptions,
+        inputRef: this.setInputRef,
+        onBlur: this.handleBlur,
+        onRequestHideOptions: this.handleBlur,
+        onInputChange: this.handleInputChange,
+        onRequestShowOptions: this.handleShowOptions,
+        onRequestHighlightOption: this.handleHighlightOption,
+        onRequestSelectOption: this.handleSelectOption,
+        onKeyDown: this.handleKeyDown,
+        messages: this.props.messages
+      }, this.renderOptions());
+    }
+  }]);
+  GenericAsyncSearch.displayName = "GenericAsyncSearch";
+  return GenericAsyncSearch;
+}(Component);
+GenericAsyncSearch.propTypes = {
+  debounceDelay: PropTypes.number,
+  minChars: PropTypes.number,
+  onSelectionChange: PropTypes.func.isRequired,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  selectedOption: PropTypes.shape({
+    id: PropTypes.number,
+    text: PropTypes.string
+  }),
+  messages: PropTypes.array,
+  selectAutomation: PropTypes.string,
+  getOptions: PropTypes.func.isRequired
+};
+GenericAsyncSearch.defaultProps = {
+  debounceDelay: 500,
+  minChars: 3,
+  label: null,
+  placeholder: null,
+  selectAutomation: null
+};
+export default GenericAsyncSearch;

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

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import partial from 'lodash/partial';
 import { List } from 'immutable';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import { Button } from '@instructure/ui-buttons';
 import { Text } from '@instructure/ui-text';
 import { IconPlusLine } from '@instructure/ui-icons';
@@ -19,7 +19,8 @@ import { interactionTypeMetadata } from "../../../util/interactionTypeMetadata.j
 import t from '@instructure/quiz-i18n/es/format-message';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-export var InteractionTypes = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_InteractionTypes = /*#__PURE__*/function (_Component) {
+import { withStyleOverrides } from '@instructure/quiz-common';
+export var InteractionTypes = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_InteractionTypes = /*#__PURE__*/function (_Component) {
   _inherits(InteractionTypes, _Component);
   var _super = _createSuper(InteractionTypes);
   function InteractionTypes() {
@@ -133,7 +134,7 @@ export var InteractionTypes = (_dec = withStyle(generateStyle, generateComponent
   }]);
   InteractionTypes.displayName = "InteractionTypes";
   return InteractionTypes;
-}(Component), _InteractionTypes.propTypes = {
+}(Component), _InteractionTypes.displayName = 'InteractionTypes', _InteractionTypes.componentId = "Quizzes".concat(_InteractionTypes.displayName), _InteractionTypes.propTypes = {
   columns: PropTypes.number.isRequired,
   addItem: PropTypes.func.isRequired,
   addStimulus: PropTypes.func.isRequired,

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

@@ -11,7 +11,7 @@ import { Component } from 'react';
 import * as Immutable from 'immutable';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import Paginator from "../Paginator/index.js";
 import Spinner from "../spinner/Spinner.js";
 /**
@@ -29,8 +29,9 @@ import Spinner from "../spinner/Spinner.js";
  */
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
+import { withStyleOverrides } from '@instructure/quiz-common';
 var _ref2 = jsx(Spinner, null);
-export var PaginatedCollection = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_PaginatedCollection = /*#__PURE__*/function (_Component) {
+export var PaginatedCollection = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_PaginatedCollection = /*#__PURE__*/function (_Component) {
   _inherits(PaginatedCollection, _Component);
   var _super = _createSuper(PaginatedCollection);
   function PaginatedCollection() {
@@ -155,7 +156,7 @@ export var PaginatedCollection = (_dec = withStyle(generateStyle, generateCompon
   }]);
   PaginatedCollection.displayName = "PaginatedCollection";
   return PaginatedCollection;
-}(Component), _PaginatedCollection.propTypes = {
+}(Component), _PaginatedCollection.displayName = 'PaginatedCollection', _PaginatedCollection.componentId = "Quizzes".concat(_PaginatedCollection.displayName), _PaginatedCollection.propTypes = {
   currentPage: PropTypes.number.isRequired,
   contents: ImmutablePropTypes.map.isRequired,
   empty: PropTypes.node,

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

@@ -7,11 +7,12 @@ var _dec, _class, _Paginator;
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Pagination } from '@instructure/ui-pagination';
-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 Paginator = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Paginator = /*#__PURE__*/function (_Component) {
+import { withStyleOverrides } from '@instructure/quiz-common';
+export var Paginator = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_Paginator = /*#__PURE__*/function (_Component) {
   _inherits(Paginator, _Component);
   var _super = _createSuper(Paginator);
   function Paginator() {
@@ -46,7 +47,7 @@ export var Paginator = (_dec = withStyle(generateStyle, generateComponentTheme),
   }]);
   Paginator.displayName = "Paginator";
   return Paginator;
-}(Component), _Paginator.propTypes = {
+}(Component), _Paginator.displayName = 'Paginator', _Paginator.componentId = "Quizzes".concat(_Paginator.displayName), _Paginator.propTypes = {
   children: PropTypes.node.isRequired,
   currentPage: PropTypes.number.isRequired,
   onPageChange: PropTypes.func.isRequired,

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

@@ -10,10 +10,11 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { AccessibleContent } from '@instructure/ui-a11y-content';
 import { Text } from '@instructure/ui-text';
 import { Tag } from '@instructure/ui-tag';
-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";
-export var TagDisplay = (_dec = withStyle(generateStyle, null), _dec(_class = (_TagDisplay = /*#__PURE__*/function (_Component) {
+import { withStyleOverrides } from '@instructure/quiz-common';
+export var TagDisplay = (_dec = withStyleOverrides(generateStyle, null), _dec(_class = (_TagDisplay = /*#__PURE__*/function (_Component) {
   _inherits(TagDisplay, _Component);
   var _super = _createSuper(TagDisplay);
   function TagDisplay() {
@@ -58,7 +59,7 @@ export var TagDisplay = (_dec = withStyle(generateStyle, null), _dec(_class = (_
   }]);
   TagDisplay.displayName = "TagDisplay";
   return TagDisplay;
-}(Component), _TagDisplay.propTypes = {
+}(Component), _TagDisplay.displayName = 'TagDisplay', _TagDisplay.componentId = "Quizzes".concat(_TagDisplay.displayName), _TagDisplay.propTypes = {
   display: PropTypes.number,
   tagAssociations: ImmutablePropTypes.listOf(ImmutablePropTypes.map),
   styles: PropTypes.object

package/es/common/components/shared/drag_and_drop/DragAndDropZone/index.js

@@ -6,11 +6,12 @@ var _dec, _class, _DragAndDropZone;
 /** @jsx jsx */
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-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 DragAndDropZone = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_DragAndDropZone = /*#__PURE__*/function (_Component) {
+import { withStyleOverrides } from '@instructure/quiz-common';
+export var DragAndDropZone = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_DragAndDropZone = /*#__PURE__*/function (_Component) {
   _inherits(DragAndDropZone, _Component);
   var _super = _createSuper(DragAndDropZone);
   function DragAndDropZone() {
@@ -82,7 +83,7 @@ export var DragAndDropZone = (_dec = withStyle(generateStyle, generateComponentT
   }]);
   DragAndDropZone.displayName = "DragAndDropZone";
   return DragAndDropZone;
-}(Component), _DragAndDropZone.propTypes = {
+}(Component), _DragAndDropZone.displayName = 'DragAndDropZone', _DragAndDropZone.componentId = "Quizzes".concat(_DragAndDropZone.displayName), _DragAndDropZone.propTypes = {
   draggingAboveHalf: PropTypes.bool.isRequired,
   draggingOver: PropTypes.bool.isRequired,
   dropIntoEmptyStimulus: PropTypes.bool,