@instructure/quiz-core 20.34.1-undefined.0 → 20.35.1-rc.10

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,

package/es/common/components/shared/errors/Errors.js

@@ -8,10 +8,11 @@ import { Component } from 'react';
 import { List } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-export var Errors = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Errors = /*#__PURE__*/function (_Component) {
+import { withStyleOverrides } from '@instructure/quiz-common';
+export var Errors = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_Errors = /*#__PURE__*/function (_Component) {
   _inherits(Errors, _Component);
   var _super = _createSuper(Errors);
   function Errors() {
@@ -46,7 +47,7 @@ export var Errors = (_dec = withStyle(generateStyle, generateComponentTheme), _d
   }]);
   Errors.displayName = "Errors";
   return Errors;
-}(Component), _Errors.propTypes = {
+}(Component), _Errors.displayName = 'Errors', _Errors.componentId = "Quizzes".concat(_Errors.displayName), _Errors.propTypes = {
   errorList: ImmutablePropTypes.list,
   styles: PropTypes.object
 }, _Errors.defaultProps = {

package/es/common/components/shared/file_selector/FileSelector.js

@@ -9,10 +9,11 @@ import { List } from 'immutable';
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import Dropzone from 'react-dropzone';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-export var FileSelector = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_FileSelector = /*#__PURE__*/function (_Component) {
+import { withStyleOverrides } from '@instructure/quiz-common';
+export var FileSelector = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_FileSelector = /*#__PURE__*/function (_Component) {
   _inherits(FileSelector, _Component);
   var _super = _createSuper(FileSelector);
   function FileSelector() {
@@ -46,7 +47,7 @@ export var FileSelector = (_dec = withStyle(generateStyle, generateComponentThem
   }]);
   FileSelector.displayName = "FileSelector";
   return FileSelector;
-}(Component), _FileSelector.propTypes = {
+}(Component), _FileSelector.displayName = 'FileSelector', _FileSelector.componentId = "Quizzes".concat(_FileSelector.displayName), _FileSelector.propTypes = {
   acceptAttribute: PropTypes.string.isRequired,
   content: PropTypes.node.isRequired,
   fileHandler: PropTypes.func.isRequired,

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

@@ -14,11 +14,11 @@ import PropTypes from 'prop-types';
  * component but it seems like this is the simplest and best choice for now.
  */
 
-import { withStyle, jsx, Global } from '@instructure/emotion';
+import { jsx, Global } from '@instructure/emotion';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-import { END_EDITING_TRIGGER_CLASSNAME } from '@instructure/quiz-common';
-var Overlay = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Overlay = /*#__PURE__*/function (_Component) {
+import { END_EDITING_TRIGGER_CLASSNAME, withStyleOverrides } from '@instructure/quiz-common';
+var Overlay = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_Overlay = /*#__PURE__*/function (_Component) {
   _inherits(Overlay, _Component);
   var _super = _createSuper(Overlay);
   function Overlay() {
@@ -64,7 +64,7 @@ var Overlay = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_cl
   }]);
   Overlay.displayName = "Overlay";
   return Overlay;
-}(Component), _Overlay.propTypes = {
+}(Component), _Overlay.displayName = 'Overlay', _Overlay.componentId = "Quizzes".concat(_Overlay.displayName), _Overlay.propTypes = {
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired,
   hideOverlay: PropTypes.bool,
   onClick: PropTypes.func.isRequired,

package/es/common/components/shared/spinner/Spinner.js

@@ -9,10 +9,11 @@ import PropTypes from 'prop-types';
 import { Text } from '@instructure/ui-text';
 import { Spinner } from '@instructure/ui-spinner';
 import { PresentationContent } from '@instructure/ui-a11y-content';
-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 QuizzesSpinner = (_dec = withStyle(generateStyle, null), _dec(_class = (_QuizzesSpinner = /*#__PURE__*/function (_Component) {
+import { withStyleOverrides } from '@instructure/quiz-common';
+export var QuizzesSpinner = (_dec = withStyleOverrides(generateStyle, null), _dec(_class = (_QuizzesSpinner = /*#__PURE__*/function (_Component) {
   _inherits(QuizzesSpinner, _Component);
   var _super = _createSuper(QuizzesSpinner);
   function QuizzesSpinner(props) {
@@ -77,7 +78,7 @@ export var QuizzesSpinner = (_dec = withStyle(generateStyle, null), _dec(_class
   }]);
   QuizzesSpinner.displayName = "QuizzesSpinner";
   return QuizzesSpinner;
-}(Component), _QuizzesSpinner.propTypes = {
+}(Component), _QuizzesSpinner.displayName = 'QuizzesSpinner', _QuizzesSpinner.componentId = "Quizzes".concat(_QuizzesSpinner.displayName), _QuizzesSpinner.propTypes = {
   mainText: PropTypes.string,
   fontSize: PropTypes.oneOf(['x-small', 'small', 'medium', 'large', 'x-large', 'xx-large']),
   size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),

package/es/index.js

@@ -78,7 +78,8 @@ export { QuizEntry as QuizEntryView } from "./building/components/resources/quiz
 export { Provider } from "./common/react-redux.js";
 export { FormattedTimer } from "./common/components/shared/FormattedDuration/index.js";
 export { default as TagWrapper } from "./common/components/shared/TagWrapper/index.js";
-export { RetryGradePassbackButton } from "./moderating/components/resources/RetryGradePassbackButton/index.js"; // Utilities
+export { RetryGradePassbackButton } from "./moderating/components/resources/RetryGradePassbackButton/index.js";
+export { GenericAsyncSearch } from "./common/components/shared/GenericAsyncSearch/GenericAsyncSearch.js"; // Utilities
 export { environment as config } from "./config.js";
 export { Fetcher } from "./common/util/Fetcher.js";
 export { httpHeaders } from "./common/util/httpHeaders.js";
@@ -102,7 +103,10 @@ export { connect } from "./common/react-redux.js";
 export { breakdownSeconds, HOUR_IN_SECONDS } from "./common/components/shared/FormattedDuration/index.js";
 export { sessionStore } from "./common/util/sessionStore.js";
 export { printWithCss, ensureImagesLoaded } from "./common/util/printUtils.js";
-export { ensureRCEContentIsLoaded } from "./common/util/rceChecker.js"; // APIs
+export { ensureRCEContentIsLoaded } from "./common/util/rceChecker.js";
+export { applyComponentStyleOverride, withStyleOverrides, getThemeByKey, setThemeByKey, getActiveTheme, setActiveTheme } from '@instructure/quiz-common';
+
+// APIs
 export { createQuizEntryRegrade } from "./grading/api/quizEntryRegrades.js";
 export { getQuizEntry } from "./building/api/quizEntries.js";
 export { getItem } from "./building/api/items.js";

package/es/moderating/components/events/Event.js

@@ -2,6 +2,7 @@ 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";
+var _Event;
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
@@ -75,8 +76,10 @@ export var Event = /*#__PURE__*/function (_Component) {
   Event.displayName = "Event";
   return Event;
 }(Component);
+_Event = Event;
 // This ugly hack is necessary because the InstUI v7 Table.Body only renders components with name 'Row'.
 Event.displayName = 'Row';
+Event.componentId = "Quizzes".concat(_Event.displayName);
 Event.propTypes = {
   event: ImmutablePropTypes.record,
   startTime: PropTypes.instanceOf(Date)

package/es/moderating/components/events/ResponseEvent.js

@@ -11,13 +11,14 @@ import { IconImageSolid } from '@instructure/ui-icons';
 import { Text } from '@instructure/ui-text';
 import { Img } from '@instructure/ui-img';
 import { ToggleDetails } from '@instructure/ui-toggle-details';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { extractTextFromHtml } from '@instructure/quiz-interactions';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
+import { withStyleOverrides } from '@instructure/quiz-common';
 var imgRegex = /<img.*?src=['"](.+)['"]/g;
-export var ResponseEvent = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_ResponseEvent = /*#__PURE__*/function (_Component) {
+export var ResponseEvent = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_ResponseEvent = /*#__PURE__*/function (_Component) {
   _inherits(ResponseEvent, _Component);
   var _super = _createSuper(ResponseEvent);
   function ResponseEvent() {
@@ -97,7 +98,7 @@ export var ResponseEvent = (_dec = withStyle(generateStyle, generateComponentThe
   }]);
   ResponseEvent.displayName = "ResponseEvent";
   return ResponseEvent;
-}(Component), _ResponseEvent.propTypes = {
+}(Component), _ResponseEvent.displayName = 'ResponseEvent', _ResponseEvent.componentId = "Quizzes".concat(_ResponseEvent.displayName), _ResponseEvent.propTypes = {
   event: ImmutablePropTypes.record.isRequired,
   item: ImmutablePropTypes.record.isRequired,
   styles: PropTypes.object