@instructure/quiz-core 18.2.1-rc.3 → 18.2.1-rc.5

package/es/banks/components/AddToBankModal/presenter.js

@@ -241,7 +241,7 @@ export var AddToBankModal = /*#__PURE__*/function (_Component) {
           content = /*#__PURE__*/React.createElement(Flex, null, _ref3, /*#__PURE__*/React.createElement(Flex.Item, {
             shouldShrink: true
           }, /*#__PURE__*/React.createElement(Text, {
-            color: "error"
+            color: "danger"
           }, t('You are attempting to add content containing course links which may not work when used in other courses.'))));
         } else {
           content = /*#__PURE__*/React.createElement(Text, {

package/es/banks/components/BankEntry/presenter.js

@@ -619,7 +619,7 @@ export var BankEntry = (_dec = themeable(theme, styles), _dec(_class = (_temp =
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: styles.entryEdit
       }, /*#__PURE__*/React.createElement(WarningWrapper, versioningProps, canEdit && /*#__PURE__*/React.createElement(Alert, {
-        closeButtonLabel: t('Dismiss'),
+        renderCloseButtonLabel: t('Dismiss'),
         margin: "0 0 medium 0"
       }, /*#__PURE__*/React.createElement(Text, {
         color: "primary"

package/es/banks/components/Banks/index.js

@@ -13,9 +13,10 @@ function mapStateToProps(state, props) {
   var pageData = state.getIn(['ui', BANKS_BANK_FILTERS], Map());
   var scopeType = pageData.get('scopeType', (props.scope || {}).type || 'user');
   var sortBy = pageData.get('sortBy', 'name');
-  var sortOrder = pageData.get('sortOrder', 'ASC');
+  var sortOrder = pageData.get('sortOrder', 'ascending');
   var searchTerms = pageData.get('searchTerms', null);
   return {
+    itemBankSearchTableEnabled: featureOn('item_bank_search_table'),
     filtersEnabled: featureOn('improved_bank_sharing'),
     newItemBankFilterNamesEnabled: featureOn('new_item_bank_filter_names'),
     usedByCourseEnabled: featureOn('filter_item_banks_used_by_course'),

package/es/banks/components/Banks/presenter.js

@@ -42,8 +42,8 @@ var styles = {
 };
 import theme from "./theme.js";
 var sortOrderIcons = {
-  ASC: IconArrowUpLine,
-  DESC: IconArrowDownLine
+  ascending: IconArrowUpLine,
+  descending: IconArrowDownLine
 };
 
 var _ref4 = /*#__PURE__*/React.createElement(Img, {
@@ -93,8 +93,8 @@ export var Banks = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
         params['sort_by'] = _this.props.sortBy;
       }
 
-      if (_this.props.sortOrder === 'DESC') {
-        params['sort_order'] = _this.props.sortOrder;
+      if (_this.props.sortOrder === 'descending') {
+        params['sort_order'] = 'DESC';
       }
 
       if (_this.props.searchTerms) {
@@ -134,13 +134,13 @@ export var Banks = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
 
     _this.getSortAssistiveText = function () {
       return t('Change sort direction. Direction is currently { sortDirection }', {
-        sortDirection: _this.props.sortOrder === 'ASC' ? t('ascending') : t('descending')
+        sortDirection: _this.props.sortOrder === 'ascending' ? t('ascending') : t('descending')
       });
     };
 
     _this.handleSortingButtonClick = function () {
       _this.props.merge(BANKS_BANK_FILTERS, {
-        sortOrder: _this.props.sortOrder === 'ASC' ? 'DESC' : 'ASC'
+        sortOrder: _this.props.sortOrder === 'ascending' ? 'descending' : 'ascending'
       });
     };
 
@@ -152,6 +152,22 @@ export var Banks = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
       });
     };
 
+    _this.handleTableSortChange = function (sortBy, sortOrder) {
+      return function () {
+        var newSortOrder = sortOrder;
+
+        if (_this.props.sortBy === sortBy) {
+          // toggle sort order
+          sortOrder === 'ascending' ? newSortOrder = 'descending' : newSortOrder = 'ascending';
+        }
+
+        _this.props.merge(BANKS_BANK_FILTERS, {
+          sortOrder: newSortOrder,
+          sortBy: sortBy
+        });
+      };
+    };
+
     _this.handleSearchInputChange = function (_ref3) {
       var value = _ref3.target.value;
 
@@ -164,17 +180,22 @@ export var Banks = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
 
     _this.renderRecords = function (recordIds) {
       return /*#__PURE__*/React.createElement(BanksList, {
-        focusCreateBankButton: _this.focusCreateBankButton,
         createBankButton: _this.createBankButton,
         currentUser: _this.props.currentUser,
+        focusCreateBankButton: _this.focusCreateBankButton,
         getCourseInfo: _this.props.getCourseInfo,
         getUserInfo: _this.props.getUserInfo,
         getShareableCourses: _this.props.getShareableCourses,
         getShareableUsers: _this.props.getShareableUsers,
+        isCompact: _this.props.isCompact,
+        itemBankSearchTableEnabled: _this.props.itemBankSearchTableEnabled,
         minChars: _this.props.minChars,
         navigateToBank: _this.props.navigateToBank,
+        onChangeSort: _this.handleTableSortChange,
         onShare: _this.props.onShare,
-        recordIds: recordIds
+        order: _this.props.sortOrder,
+        recordIds: recordIds,
+        sort: _this.props.sortBy
       });
     };
 
@@ -236,17 +257,26 @@ export var Banks = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
           slug: 'course',
           translation: this.props.newItemBankFilterNamesEnabled ? t('This Course') : t('Course Banks')
         });
-      }
+      } // display options are displayed when using banks list
+      // non-display options are used for sorting of banks table
+
 
       var sortingCriteriaOptions = [{
         slug: 'name',
-        translation: t('Bank Name')
+        translation: t('Bank Name'),
+        display: true
       }, {
         slug: 'last_used',
-        translation: t('Last Used')
+        translation: t('Last Used'),
+        display: true
       }, {
         slug: 'updated_at',
-        translation: t('Last Updated')
+        translation: t('Last Updated'),
+        display: true
+      }, {
+        slug: 'created_at',
+        translation: t('Created Date'),
+        display: false
       }];
       var searchFiltersSelectOptionIdPrefix = 'banks-search-filters-select-option-';
       var searchFilters = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -284,7 +314,9 @@ export var Banks = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
         value: this.props.sortBy,
         width: "10rem",
         onChange: this.handleSortByChange
-      }, sortingCriteriaOptions.map(function (option) {
+      }, sortingCriteriaOptions.filter(function (option) {
+        return option.display === true;
+      }).map(function (option) {
         return /*#__PURE__*/React.createElement(SimpleSelect.Option, {
           id: sortingFiltersSelectOptionIdPrefix + option.slug,
           key: option.slug,
@@ -309,7 +341,7 @@ export var Banks = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
           className: classNames(styles.filters, styles.borderedBottom)
         }, /*#__PURE__*/React.createElement("div", {
           className: styles.filtersRow
-        }, searchFilters), /*#__PURE__*/React.createElement("div", {
+        }, searchFilters), !this.props.itemBankSearchTableEnabled && /*#__PURE__*/React.createElement("div", {
           className: styles.filtersRow
         }, sortingFilters));
       } else {
@@ -317,7 +349,7 @@ export var Banks = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
           className: classNames(styles.filters, styles.borderedBottom)
         }, /*#__PURE__*/React.createElement("div", {
           className: styles.filtersRow
-        }, searchFilters, sortingFilters));
+        }, searchFilters, !this.props.itemBankSearchTableEnabled && sortingFilters));
       }
     }
   }, {
@@ -356,16 +388,21 @@ export var Banks = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
       });
     }
   }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/React.createElement(Page, null, this.renderNav(), /*#__PURE__*/React.createElement("div", {
-        className: styles.content
-      }, this.renderHeader(), this.props.filtersEnabled && this.renderFilters(), /*#__PURE__*/React.createElement(PaginatedCollection, {
+    key: "renderBanksSearchResults",
+    value: function renderBanksSearchResults() {
+      return /*#__PURE__*/React.createElement(PaginatedCollection, {
         empty: this.emptyPage(),
         getPage: this.getPage,
         renderRecords: this.renderRecords,
         stateKey: BANKS_BANK_PAGINATION
-      }), /*#__PURE__*/React.createElement(CreateBankModal, {
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(Page, null, this.renderNav(), /*#__PURE__*/React.createElement("div", {
+        className: styles.content
+      }, this.renderHeader(), this.props.filtersEnabled && this.renderFilters(), this.renderBanksSearchResults(), /*#__PURE__*/React.createElement(CreateBankModal, {
         itemBanksScope: this.props.scope
       })));
     }
@@ -420,7 +457,8 @@ export var Banks = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
   searchTerms: PropTypes.string,
   sortBy: PropTypes.string,
   sortOrder: PropTypes.string,
-  usedByCourseEnabled: PropTypes.bool
+  usedByCourseEnabled: PropTypes.bool,
+  itemBankSearchTableEnabled: PropTypes.bool
 }, _class2.defaultProps = {
   closeTray: null,
   currentUser: null,
@@ -440,10 +478,11 @@ export var Banks = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
   filtersEnabled: false,
   scopeType: 'user',
   sortBy: 'name',
-  sortOrder: 'ASC',
+  sortOrder: 'ascending',
   searchTerms: null,
   newItemBankFilterNamesEnabled: false,
-  usedByCourseEnabled: false
+  usedByCourseEnabled: false,
+  itemBankSearchTableEnabled: false
 }, _class2.contextTypes = {
   locale: PropTypes.string
 }, _temp)) || _class);

package/es/banks/components/BanksList/presenter.js

@@ -21,6 +21,7 @@ import { Button } from '@instructure/ui-buttons';
 import { IconEditLine, IconTrashLine, IconShareSolid, IconCopyLine } from '@instructure/ui-icons';
 import { Alert } from '@instructure/ui-alerts';
 import { Spinner } from '@instructure/ui-spinner';
+import { Table } from '@instructure/ui-table';
 import { themeable } from '@instructure/ui-themeable';
 import { EDIT_BANK_MODAL, withI18nSupport } from '@instructure/quiz-common';
 import CustomPropTypes from "../../../common/util/CustomPropTypes.js";
@@ -29,25 +30,29 @@ import EditBankModal from "../EditBankModal/index.js";
 import SharingModal from "../SharingModal/index.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 var styles = {
-  componentId: 'dgJJi',
+  componentId: 'DyOOn',
   template: function template(theme) {
-    return "\n\n.dgJJi_dIMK{border-bottom:".concat(theme.bankRowBorderWidth || 'inherit', " solid ").concat(theme.bankRowBorderColor || 'inherit', ";display:flex;flex-direction:row}\n\n.dgJJi_Zupb{flex:1;margin:").concat(theme.bankInfoMargin || 'inherit', " 0}\n\n.dgJJi_qnWp{font-size:").concat(theme.bankTitleFontSize || 'inherit', ";padding-bottom:").concat(theme.bankTitlePadding || 'inherit', "}\n\n.dgJJi_ciks{color:").concat(theme.bankDetailsColor || 'inherit', ";font-size:").concat(theme.bankDetailsFontSize || 'inherit', "}\n\n.dgJJi_cCNg{align-items:center;display:flex;flex-direction:row;margin:").concat(theme.bankOptionsMargin || 'inherit', " 0}\n\n.dgJJi_bISW{font-size:").concat(theme.BankOptionIconFontSize || 'inherit', ";margin-right:").concat(theme.BankOptionIconMargin || 'inherit', ";vertical-align:middle}\n\n.dgJJi_AHIw{display:block}\n\n.dgJJi_eTBd{margin-bottom:").concat(theme.deletePrefaceMargin || 'inherit', "}");
+    return "\n\n.DyOOn_dIMK{border-bottom:".concat(theme.bankRowBorderWidth || 'inherit', " solid ").concat(theme.bankRowBorderColor || 'inherit', ";display:flex;flex-direction:row}\n\n.DyOOn_Zupb{flex:1;margin:").concat(theme.bankInfoMargin || 'inherit', " 0}\n\n.DyOOn_qnWp{font-size:").concat(theme.bankTitleFontSize || 'inherit', ";padding-bottom:").concat(theme.bankTitlePadding || 'inherit', "}\n\n.DyOOn_ciks{color:").concat(theme.bankDetailsColor || 'inherit', ";font-size:").concat(theme.bankDetailsFontSize || 'inherit', "}\n\n.DyOOn_cCNg{align-items:center;display:flex;flex-direction:row}\n\n.DyOOn_bISW{font-size:").concat(theme.BankOptionIconFontSize || 'inherit', ";margin-right:").concat(theme.BankOptionIconMargin || 'inherit', ";vertical-align:middle}\n\n.DyOOn_AHIw{display:block}\n\n.DyOOn_eTBd{margin-bottom:").concat(theme.deletePrefaceMargin || 'inherit', "}\n\n.DyOOn_fXqC{display:flex;justify-content:space-between}");
   },
-  'bankRow': 'dgJJi_dIMK',
-  'bankInfo': 'dgJJi_Zupb',
-  'bankTitle': 'dgJJi_qnWp',
-  'bankDetails': 'dgJJi_ciks',
-  'bankOptions': 'dgJJi_cCNg',
-  'bankOptionIcon': 'dgJJi_bISW',
-  'deleteAlert': 'dgJJi_AHIw',
-  'deletePreface': 'dgJJi_eTBd'
+  'bankRow': 'DyOOn_dIMK',
+  'bankInfo': 'DyOOn_Zupb',
+  'bankTitle': 'DyOOn_qnWp',
+  'bankDetails': 'DyOOn_ciks',
+  'bankOptions': 'DyOOn_cCNg',
+  'bankOptionIcon': 'DyOOn_bISW',
+  'deleteAlert': 'DyOOn_AHIw',
+  'deletePreface': 'DyOOn_eTBd',
+  'rowHeader': 'DyOOn_fXqC'
 };
 import theme from "./theme.js";
 
-var _ref4 = /*#__PURE__*/React.createElement(Spinner, {
-  renderTitle: "Loading",
-  size: "x-small"
-});
+var _ref4 = /*#__PURE__*/React.createElement(Table.Cell, null);
+
+var _ref5 = /*#__PURE__*/React.createElement(Table.Cell, null);
+
+var _ref6 = /*#__PURE__*/React.createElement(Table.Cell, null);
+
+var _ref7 = /*#__PURE__*/React.createElement(Table.Cell, null);
 
 export var BanksList = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
   _inherits(BanksList, _withI18nSupport);
@@ -237,7 +242,7 @@ export var BanksList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
         };
       };
 
-      if (bank.status == 'copying') {
+      if (bank.status === 'copying') {
         return /*#__PURE__*/React.createElement("div", {
           className: styles.bankInfo,
           "data-automation": "sdk-bank-info",
@@ -313,10 +318,14 @@ export var BanksList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
         name: bank.title
       })));
 
-      if (bank.status == 'copying') {
+      if (bank.status === 'copying') {
         return /*#__PURE__*/React.createElement("div", {
           className: styles.bankOptions
-        }, _ref4);
+        }, t('Duplicating'), /*#__PURE__*/React.createElement(Spinner, {
+          renderTitle: t('Loading'),
+          size: "x-small",
+          margin: "0 0 0 small"
+        }));
       } else {
         return /*#__PURE__*/React.createElement("div", {
           className: styles.bankOptions
@@ -404,10 +413,93 @@ export var BanksList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
         updateSharedCount: this.updateSharedCount
       });
     }
+  }, {
+    key: "renderTableRowHeader",
+    value: function renderTableRowHeader(bank) {
+      var _this3 = this;
+
+      if (bank.status === 'copying') {
+        return /*#__PURE__*/React.createElement(Table.RowHeader, null, /*#__PURE__*/React.createElement("div", {
+          className: styles.rowHeader
+        }, /*#__PURE__*/React.createElement(Heading, {
+          as: "h2",
+          level: "reset",
+          "data-automation": "sdk-banks-list-bank-title-heading"
+        }, bank.title), this.props.isCompact && this.renderBankOptions(bank)));
+      } else {
+        var navigateToBank = function navigateToBank(bankId) {
+          return function () {
+            return _this3.props.navigateToBank(bankId);
+          };
+        };
+
+        return /*#__PURE__*/React.createElement(Table.RowHeader, null, /*#__PURE__*/React.createElement("div", {
+          className: styles.rowHeader
+        }, /*#__PURE__*/React.createElement(EditBankModal, {
+          workingBank: bank.getWorkingInstance()
+        }), /*#__PURE__*/React.createElement(Link, {
+          isWithinText: false,
+          onClick: navigateToBank(bank.id),
+          "data-automation": "sdk-banks-list-bank-title-link"
+        }, /*#__PURE__*/React.createElement(Heading, {
+          as: "h2",
+          level: "reset",
+          "data-automation": "sdk-banks-list-bank-title-heading"
+        }, bank.title)), this.props.isCompact && this.renderBankOptions(bank)));
+      }
+    }
+  }, {
+    key: "renderTableRow",
+    value: function renderTableRow(bank) {
+      if (bank.status === 'copying') {
+        return /*#__PURE__*/React.createElement(Table.Row, {
+          key: bank.id
+        }, this.renderTableRowHeader(bank), _ref4, _ref5, _ref6, _ref7, !this.props.isCompact && /*#__PURE__*/React.createElement(Table.Cell, {
+          textAlign: "end"
+        }, this.renderBankOptions(bank)));
+      } else {
+        return /*#__PURE__*/React.createElement(Table.Row, {
+          key: bank.id
+        }, this.renderTableRowHeader(bank), /*#__PURE__*/React.createElement(Table.Cell, null, this.formatDateMedium(bank.updatedAt())), /*#__PURE__*/React.createElement(Table.Cell, null, bank.itemEntryCount), /*#__PURE__*/React.createElement(Table.Cell, null, bank.lastUsed() ? this.formatDateMedium(bank.lastUsed()) : ''), /*#__PURE__*/React.createElement(Table.Cell, null, this.formatDateMedium(bank.createdAt())), !this.props.isCompact && /*#__PURE__*/React.createElement(Table.Cell, {
+          textAlign: "end"
+        }, this.renderBankOptions(bank)));
+      }
+    }
+  }, {
+    key: "renderTableSortHeader",
+    value: function renderTableSortHeader(headerId, headerText) {
+      return /*#__PURE__*/React.createElement(Table.ColHeader, {
+        id: headerId,
+        key: headerId,
+        onRequestSort: this.props.onChangeSort(headerId, this.props.order),
+        sortDirection: this.props.sort === headerId ? this.props.order : 'none'
+      }, headerText);
+    }
+  }, {
+    key: "renderTable",
+    value: function renderTable() {
+      var _this4 = this;
+
+      return /*#__PURE__*/React.createElement(Table, {
+        margin: "small 0",
+        caption: t('Banks'),
+        layout: this.props.isCompact ? 'stacked' : 'auto'
+      }, /*#__PURE__*/React.createElement(Table.Head, {
+        renderSortLabel: t('Sort By')
+      }, /*#__PURE__*/React.createElement(Table.Row, null, this.renderTableSortHeader('name', t('Bank')), this.renderTableSortHeader('updated_at', t('Updated')), /*#__PURE__*/React.createElement(Table.ColHeader, {
+        id: "header-num-questions",
+        width: "1"
+      }, t('Questions')), this.renderTableSortHeader('last_used', t('Last Used')), this.renderTableSortHeader('created_at', t('Created')), !this.props.isCompact && /*#__PURE__*/React.createElement(Table.ColHeader, {
+        id: "header-option-links",
+        width: "1"
+      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Bank option links'))))), /*#__PURE__*/React.createElement(Table.Body, null, (this.props.banks.toArray() || []).map(function (bank) {
+        return _this4.renderTableRow(bank);
+      })));
+    }
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", null, this.state.sharingModalBank && this.renderSharingModal(), this.props.banks.toArray().map(this.renderBank));
+      return /*#__PURE__*/React.createElement("div", null, this.state.sharingModalBank && this.renderSharingModal(), this.props.itemBankSearchTableEnabled ? this.renderTable() : this.props.banks.toArray().map(this.renderBank));
     }
   }]);
 

package/es/banks/components/SharingModal/asyncSearch.js

@@ -13,12 +13,6 @@ import { Select } from '@instructure/ui-select';
 import { Spinner } from '@instructure/ui-spinner';
 import TagWrapper from "../../../common/components/shared/TagWrapper/index.js";
 import { SHARED_WITH_USER, SHARED_WITH_COURSE, SELECT_EMPTY_OPTION } from '@instructure/quiz-common';
-
-var _ref3 = /*#__PURE__*/React.createElement(Spinner, {
-  renderTitle: "Loading",
-  size: "x-small"
-});
-
 export var AsyncSearch = /*#__PURE__*/function (_Component) {
   _inherits(AsyncSearch, _Component);
 
@@ -322,7 +316,10 @@ export var AsyncSearch = /*#__PURE__*/function (_Component) {
       return groups.length ? groups : /*#__PURE__*/React.createElement(Select.Option, {
         id: SELECT_EMPTY_OPTION,
         key: SELECT_EMPTY_OPTION
-      }, this.state.isLoading ? _ref3 : this.emptyOption());
+      }, this.state.isLoading ? /*#__PURE__*/React.createElement(Spinner, {
+        renderTitle: t('Loading'),
+        size: "x-small"
+      }) : this.emptyOption());
     }
   }, {
     key: "render",

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

@@ -224,10 +224,10 @@ export var QuizEntryEditFooter = (_dec = themeable(theme, styles), _dec(_class =
     value: function render() {
       return /*#__PURE__*/React.createElement(View, {
         as: "div",
-        background: "light",
+        background: "secondary",
         padding: "xx-small none"
       }, /*#__PURE__*/React.createElement(Flex, {
-        wrapItems: true,
+        wrap: "wrap",
         justifyItems: "space-between",
         alignItems: "center"
       }, /*#__PURE__*/React.createElement(Flex.Item, {

package/es/common/components/alerts/presenter.js

@@ -52,7 +52,7 @@ export var Alerts = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
         }, /*#__PURE__*/React.createElement(Alert, {
           variant: "error",
           onDismiss: closeAlert,
-          closeButtonLabel: t('Close'),
+          renderCloseButtonLabel: t('Close'),
           transition: "none"
         }, alert.message));
       }
@@ -63,7 +63,7 @@ export var Alerts = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
       }, /*#__PURE__*/React.createElement(Alert, {
         variant: alert.variant,
         onDismiss: closeAlert,
-        closeButtonLabel: t('Close'),
+        renderCloseButtonLabel: t('Close'),
         transition: "none"
       }, alert.message));
     };

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

@@ -51,8 +51,8 @@ export var Title = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
         return /*#__PURE__*/React.createElement(AccessibleContent, {
           alt: title
         }, /*#__PURE__*/React.createElement(Tooltip, {
-          tip: title,
-          variant: "inverse"
+          renderTip: title,
+          color: "primary"
         }, this.renderTitle(truncatedTitle)));
       }
 

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

@@ -61,7 +61,7 @@ export var AddContentPopover = (_dec = themeable(theme, styles), _dec(_class = (
       return /*#__PURE__*/React.createElement(Popover, {
         on: "click",
         onToggle: _this.toggle,
-        show: _this.props.isEditing,
+        isShowingContent: _this.props.isEditing,
         shouldCloseOnEscape: true,
         shouldContainFocus: true
       }, /*#__PURE__*/React.createElement(Popover.Trigger, null, _this.renderAddContentButton()), /*#__PURE__*/React.createElement(Popover.Content, null, /*#__PURE__*/React.createElement(AddContentBody, {

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

@@ -28,7 +28,7 @@ var StimulusShowInfo = /*#__PURE__*/function (_Component) {
         as: "div",
         padding: "small",
         margin: "x-small 0 0 0",
-        background: "light"
+        background: "secondary"
       }, /*#__PURE__*/React.createElement(View, {
         as: "div"
       }, /*#__PURE__*/React.createElement(Text, {

package/es/moderating/components/resources/AccommodationsModal/index.js

@@ -52,7 +52,7 @@ export var AccommodationModal = /*#__PURE__*/function (_Component) {
         display: "inline-block",
         borderRadius: "small",
         position: "relative",
-        focused: _this.state.isTruncated && focused,
+        withFocusOutline: _this.state.isTruncated && focused,
         as: "div",
         tabIndex: _this.state.isTruncated ? 0 : null
       }, /*#__PURE__*/React.createElement(TruncateText, {
@@ -72,7 +72,7 @@ export var AccommodationModal = /*#__PURE__*/function (_Component) {
       }
 
       return /*#__PURE__*/React.createElement(Heading, null, /*#__PURE__*/React.createElement(ScreenReaderContent, null, studentName), _this.state.isTruncated ? /*#__PURE__*/React.createElement(Tooltip, {
-        tip: studentName,
+        renderTip: studentName,
         mountNode: mountNode
       }, _this.renderName) : _this.renderName());
     };

package/es/moderating/components/sidebar/ModerateTray/presenter.js

@@ -88,7 +88,7 @@ export var ModerateTray = /*#__PURE__*/function (_Component) {
           display: "block",
           borderRadius: "small",
           position: "relative",
-          focused: this.state.isTruncated && focused,
+          withFocusOutline: this.state.isTruncated && focused,
           as: "h2",
           tabIndex: this.state.isTruncated ? 0 : null
         }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, this.labelText()), /*#__PURE__*/React.createElement(TruncateText, {
@@ -134,7 +134,7 @@ export var ModerateTray = /*#__PURE__*/function (_Component) {
         padding: "medium"
       }, this.state.isTruncated ? /*#__PURE__*/React.createElement(Tooltip, {
         placement: "start",
-        tip: this.labelText(),
+        renderTip: this.labelText(),
         mountNode: this.getTrayRef || null
       }, function (_ref) {
         var focused = _ref.focused;

package/lib/banks/components/AddToBankModal/presenter.js

@@ -274,7 +274,7 @@ var AddToBankModal = /*#__PURE__*/function (_Component) {
           content = /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, null, _ref3, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
             shouldShrink: true
           }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
-            color: "error"
+            color: "danger"
           }, (0, _formatMessage.default)('You are attempting to add content containing course links which may not work when used in other courses.'))));
         } else {
           content = /*#__PURE__*/_react.default.createElement(_uiText.Text, {

package/lib/banks/components/BankEntry/presenter.js

@@ -671,7 +671,7 @@ var BankEntry = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
       return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
         className: styles.entryEdit
       }, /*#__PURE__*/_react.default.createElement(_index9.default, versioningProps, canEdit && /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
-        closeButtonLabel: (0, _formatMessage.default)('Dismiss'),
+        renderCloseButtonLabel: (0, _formatMessage.default)('Dismiss'),
         margin: "0 0 medium 0"
       }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
         color: "primary"

package/lib/banks/components/Banks/index.js

@@ -31,9 +31,10 @@ function mapStateToProps(state, props) {
   var pageData = state.getIn(['ui', _quizCommon.BANKS_BANK_FILTERS], (0, _immutable.Map)());
   var scopeType = pageData.get('scopeType', (props.scope || {}).type || 'user');
   var sortBy = pageData.get('sortBy', 'name');
-  var sortOrder = pageData.get('sortOrder', 'ASC');
+  var sortOrder = pageData.get('sortOrder', 'ascending');
   var searchTerms = pageData.get('searchTerms', null);
   return {
+    itemBankSearchTableEnabled: (0, _featureCheck.featureOn)('item_bank_search_table'),
     filtersEnabled: (0, _featureCheck.featureOn)('improved_bank_sharing'),
     newItemBankFilterNamesEnabled: (0, _featureCheck.featureOn)('new_item_bank_filter_names'),
     usedByCourseEnabled: (0, _featureCheck.featureOn)('filter_item_banks_used_by_course'),

package/lib/banks/components/Banks/presenter.js

@@ -80,8 +80,8 @@ var styles = {
   'searchBarContainer': 'cYUUC_bYSL'
 };
 var sortOrderIcons = {
-  ASC: _uiIcons.IconArrowUpLine,
-  DESC: _uiIcons.IconArrowDownLine
+  ascending: _uiIcons.IconArrowUpLine,
+  descending: _uiIcons.IconArrowDownLine
 };
 
 var _ref4 = /*#__PURE__*/_react.default.createElement(_uiImg.Img, {
@@ -130,8 +130,8 @@ var Banks = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
         params['sort_by'] = _this.props.sortBy;
       }
 
-      if (_this.props.sortOrder === 'DESC') {
-        params['sort_order'] = _this.props.sortOrder;
+      if (_this.props.sortOrder === 'descending') {
+        params['sort_order'] = 'DESC';
       }
 
       if (_this.props.searchTerms) {
@@ -171,13 +171,13 @@ var Banks = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
 
     _this.getSortAssistiveText = function () {
       return (0, _formatMessage.default)('Change sort direction. Direction is currently { sortDirection }', {
-        sortDirection: _this.props.sortOrder === 'ASC' ? (0, _formatMessage.default)('ascending') : (0, _formatMessage.default)('descending')
+        sortDirection: _this.props.sortOrder === 'ascending' ? (0, _formatMessage.default)('ascending') : (0, _formatMessage.default)('descending')
       });
     };
 
     _this.handleSortingButtonClick = function () {
       _this.props.merge(_quizCommon.BANKS_BANK_FILTERS, {
-        sortOrder: _this.props.sortOrder === 'ASC' ? 'DESC' : 'ASC'
+        sortOrder: _this.props.sortOrder === 'ascending' ? 'descending' : 'ascending'
       });
     };
 
@@ -189,6 +189,22 @@ var Banks = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
       });
     };
 
+    _this.handleTableSortChange = function (sortBy, sortOrder) {
+      return function () {
+        var newSortOrder = sortOrder;
+
+        if (_this.props.sortBy === sortBy) {
+          // toggle sort order
+          sortOrder === 'ascending' ? newSortOrder = 'descending' : newSortOrder = 'ascending';
+        }
+
+        _this.props.merge(_quizCommon.BANKS_BANK_FILTERS, {
+          sortOrder: newSortOrder,
+          sortBy: sortBy
+        });
+      };
+    };
+
     _this.handleSearchInputChange = function (_ref3) {
       var value = _ref3.target.value;
 
@@ -201,17 +217,22 @@ var Banks = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
 
     _this.renderRecords = function (recordIds) {
       return /*#__PURE__*/_react.default.createElement(_index3.default, {
-        focusCreateBankButton: _this.focusCreateBankButton,
         createBankButton: _this.createBankButton,
         currentUser: _this.props.currentUser,
+        focusCreateBankButton: _this.focusCreateBankButton,
         getCourseInfo: _this.props.getCourseInfo,
         getUserInfo: _this.props.getUserInfo,
         getShareableCourses: _this.props.getShareableCourses,
         getShareableUsers: _this.props.getShareableUsers,
+        isCompact: _this.props.isCompact,
+        itemBankSearchTableEnabled: _this.props.itemBankSearchTableEnabled,
         minChars: _this.props.minChars,
         navigateToBank: _this.props.navigateToBank,
+        onChangeSort: _this.handleTableSortChange,
         onShare: _this.props.onShare,
-        recordIds: recordIds
+        order: _this.props.sortOrder,
+        recordIds: recordIds,
+        sort: _this.props.sortBy
       });
     };
 
@@ -273,17 +294,26 @@ var Banks = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
           slug: 'course',
           translation: this.props.newItemBankFilterNamesEnabled ? (0, _formatMessage.default)('This Course') : (0, _formatMessage.default)('Course Banks')
         });
-      }
+      } // display options are displayed when using banks list
+      // non-display options are used for sorting of banks table
+
 
       var sortingCriteriaOptions = [{
         slug: 'name',
-        translation: (0, _formatMessage.default)('Bank Name')
+        translation: (0, _formatMessage.default)('Bank Name'),
+        display: true
       }, {
         slug: 'last_used',
-        translation: (0, _formatMessage.default)('Last Used')
+        translation: (0, _formatMessage.default)('Last Used'),
+        display: true
       }, {
         slug: 'updated_at',
-        translation: (0, _formatMessage.default)('Last Updated')
+        translation: (0, _formatMessage.default)('Last Updated'),
+        display: true
+      }, {
+        slug: 'created_at',
+        translation: (0, _formatMessage.default)('Created Date'),
+        display: false
       }];
       var searchFiltersSelectOptionIdPrefix = 'banks-search-filters-select-option-';
 
@@ -324,7 +354,9 @@ var Banks = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
         value: this.props.sortBy,
         width: "10rem",
         onChange: this.handleSortByChange
-      }, sortingCriteriaOptions.map(function (option) {
+      }, sortingCriteriaOptions.filter(function (option) {
+        return option.display === true;
+      }).map(function (option) {
         return /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
           id: sortingFiltersSelectOptionIdPrefix + option.slug,
           key: option.slug,
@@ -349,7 +381,7 @@ var Banks = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
           className: (0, _classnames.default)(styles.filters, styles.borderedBottom)
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: styles.filtersRow
-        }, searchFilters), /*#__PURE__*/_react.default.createElement("div", {
+        }, searchFilters), !this.props.itemBankSearchTableEnabled && /*#__PURE__*/_react.default.createElement("div", {
           className: styles.filtersRow
         }, sortingFilters));
       } else {
@@ -357,7 +389,7 @@ var Banks = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
           className: (0, _classnames.default)(styles.filters, styles.borderedBottom)
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: styles.filtersRow
-        }, searchFilters, sortingFilters));
+        }, searchFilters, !this.props.itemBankSearchTableEnabled && sortingFilters));
       }
     }
   }, {
@@ -396,16 +428,21 @@ var Banks = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
       });
     }
   }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_index.default, null, this.renderNav(), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.content
-      }, this.renderHeader(), this.props.filtersEnabled && this.renderFilters(), /*#__PURE__*/_react.default.createElement(_index2.default, {
+    key: "renderBanksSearchResults",
+    value: function renderBanksSearchResults() {
+      return /*#__PURE__*/_react.default.createElement(_index2.default, {
         empty: this.emptyPage(),
         getPage: this.getPage,
         renderRecords: this.renderRecords,
         stateKey: _quizCommon.BANKS_BANK_PAGINATION
-      }), /*#__PURE__*/_react.default.createElement(_index4.default, {
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_index.default, null, this.renderNav(), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.content
+      }, this.renderHeader(), this.props.filtersEnabled && this.renderFilters(), this.renderBanksSearchResults(), /*#__PURE__*/_react.default.createElement(_index4.default, {
         itemBanksScope: this.props.scope
       })));
     }
@@ -459,7 +496,8 @@ var Banks = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
   searchTerms: _propTypes.default.string,
   sortBy: _propTypes.default.string,
   sortOrder: _propTypes.default.string,
-  usedByCourseEnabled: _propTypes.default.bool
+  usedByCourseEnabled: _propTypes.default.bool,
+  itemBankSearchTableEnabled: _propTypes.default.bool
 }, _class2.defaultProps = {
   closeTray: null,
   currentUser: null,
@@ -479,10 +517,11 @@ var Banks = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
   filtersEnabled: false,
   scopeType: 'user',
   sortBy: 'name',
-  sortOrder: 'ASC',
+  sortOrder: 'ascending',
   searchTerms: null,
   newItemBankFilterNamesEnabled: false,
-  usedByCourseEnabled: false
+  usedByCourseEnabled: false,
+  itemBankSearchTableEnabled: false
 }, _class2.contextTypes = {
   locale: _propTypes.default.string
 }, _temp)) || _class);

package/lib/banks/components/BanksList/presenter.js

@@ -47,6 +47,8 @@ var _uiAlerts = require("@instructure/ui-alerts");
 
 var _uiSpinner = require("@instructure/ui-spinner");
 
+var _uiTable = require("@instructure/ui-table");
+
 var _uiThemeable = require("@instructure/ui-themeable");
 
 var _quizCommon = require("@instructure/quiz-common");
@@ -66,24 +68,28 @@ var _theme = _interopRequireDefault(require("./theme.js"));
 var _dec, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'dgJJi',
+  componentId: 'DyOOn',
   template: function template(theme) {
-    return "\n\n.dgJJi_dIMK{border-bottom:".concat(theme.bankRowBorderWidth || 'inherit', " solid ").concat(theme.bankRowBorderColor || 'inherit', ";display:flex;flex-direction:row}\n\n.dgJJi_Zupb{flex:1;margin:").concat(theme.bankInfoMargin || 'inherit', " 0}\n\n.dgJJi_qnWp{font-size:").concat(theme.bankTitleFontSize || 'inherit', ";padding-bottom:").concat(theme.bankTitlePadding || 'inherit', "}\n\n.dgJJi_ciks{color:").concat(theme.bankDetailsColor || 'inherit', ";font-size:").concat(theme.bankDetailsFontSize || 'inherit', "}\n\n.dgJJi_cCNg{align-items:center;display:flex;flex-direction:row;margin:").concat(theme.bankOptionsMargin || 'inherit', " 0}\n\n.dgJJi_bISW{font-size:").concat(theme.BankOptionIconFontSize || 'inherit', ";margin-right:").concat(theme.BankOptionIconMargin || 'inherit', ";vertical-align:middle}\n\n.dgJJi_AHIw{display:block}\n\n.dgJJi_eTBd{margin-bottom:").concat(theme.deletePrefaceMargin || 'inherit', "}");
+    return "\n\n.DyOOn_dIMK{border-bottom:".concat(theme.bankRowBorderWidth || 'inherit', " solid ").concat(theme.bankRowBorderColor || 'inherit', ";display:flex;flex-direction:row}\n\n.DyOOn_Zupb{flex:1;margin:").concat(theme.bankInfoMargin || 'inherit', " 0}\n\n.DyOOn_qnWp{font-size:").concat(theme.bankTitleFontSize || 'inherit', ";padding-bottom:").concat(theme.bankTitlePadding || 'inherit', "}\n\n.DyOOn_ciks{color:").concat(theme.bankDetailsColor || 'inherit', ";font-size:").concat(theme.bankDetailsFontSize || 'inherit', "}\n\n.DyOOn_cCNg{align-items:center;display:flex;flex-direction:row}\n\n.DyOOn_bISW{font-size:").concat(theme.BankOptionIconFontSize || 'inherit', ";margin-right:").concat(theme.BankOptionIconMargin || 'inherit', ";vertical-align:middle}\n\n.DyOOn_AHIw{display:block}\n\n.DyOOn_eTBd{margin-bottom:").concat(theme.deletePrefaceMargin || 'inherit', "}\n\n.DyOOn_fXqC{display:flex;justify-content:space-between}");
   },
-  'bankRow': 'dgJJi_dIMK',
-  'bankInfo': 'dgJJi_Zupb',
-  'bankTitle': 'dgJJi_qnWp',
-  'bankDetails': 'dgJJi_ciks',
-  'bankOptions': 'dgJJi_cCNg',
-  'bankOptionIcon': 'dgJJi_bISW',
-  'deleteAlert': 'dgJJi_AHIw',
-  'deletePreface': 'dgJJi_eTBd'
+  'bankRow': 'DyOOn_dIMK',
+  'bankInfo': 'DyOOn_Zupb',
+  'bankTitle': 'DyOOn_qnWp',
+  'bankDetails': 'DyOOn_ciks',
+  'bankOptions': 'DyOOn_cCNg',
+  'bankOptionIcon': 'DyOOn_bISW',
+  'deleteAlert': 'DyOOn_AHIw',
+  'deletePreface': 'DyOOn_eTBd',
+  'rowHeader': 'DyOOn_fXqC'
 };
 
-var _ref4 = /*#__PURE__*/_react.default.createElement(_uiSpinner.Spinner, {
-  renderTitle: "Loading",
-  size: "x-small"
-});
+var _ref4 = /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null);
+
+var _ref5 = /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null);
+
+var _ref6 = /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null);
+
+var _ref7 = /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null);
 
 var BanksList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
   (0, _inherits2.default)(BanksList, _withI18nSupport);
@@ -273,7 +279,7 @@ var BanksList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
         };
       };
 
-      if (bank.status == 'copying') {
+      if (bank.status === 'copying') {
         return /*#__PURE__*/_react.default.createElement("div", {
           className: styles.bankInfo,
           "data-automation": "sdk-bank-info",
@@ -350,10 +356,14 @@ var BanksList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
         name: bank.title
       })));
 
-      if (bank.status == 'copying') {
+      if (bank.status === 'copying') {
         return /*#__PURE__*/_react.default.createElement("div", {
           className: styles.bankOptions
-        }, _ref4);
+        }, (0, _formatMessage.default)('Duplicating'), /*#__PURE__*/_react.default.createElement(_uiSpinner.Spinner, {
+          renderTitle: (0, _formatMessage.default)('Loading'),
+          size: "x-small",
+          margin: "0 0 0 small"
+        }));
       } else {
         return /*#__PURE__*/_react.default.createElement("div", {
           className: styles.bankOptions
@@ -443,10 +453,93 @@ var BanksList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
         updateSharedCount: this.updateSharedCount
       });
     }
+  }, {
+    key: "renderTableRowHeader",
+    value: function renderTableRowHeader(bank) {
+      var _this3 = this;
+
+      if (bank.status === 'copying') {
+        return /*#__PURE__*/_react.default.createElement(_uiTable.Table.RowHeader, null, /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.rowHeader
+        }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+          as: "h2",
+          level: "reset",
+          "data-automation": "sdk-banks-list-bank-title-heading"
+        }, bank.title), this.props.isCompact && this.renderBankOptions(bank)));
+      } else {
+        var navigateToBank = function navigateToBank(bankId) {
+          return function () {
+            return _this3.props.navigateToBank(bankId);
+          };
+        };
+
+        return /*#__PURE__*/_react.default.createElement(_uiTable.Table.RowHeader, null, /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.rowHeader
+        }, /*#__PURE__*/_react.default.createElement(_index2.default, {
+          workingBank: bank.getWorkingInstance()
+        }), /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+          isWithinText: false,
+          onClick: navigateToBank(bank.id),
+          "data-automation": "sdk-banks-list-bank-title-link"
+        }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+          as: "h2",
+          level: "reset",
+          "data-automation": "sdk-banks-list-bank-title-heading"
+        }, bank.title)), this.props.isCompact && this.renderBankOptions(bank)));
+      }
+    }
+  }, {
+    key: "renderTableRow",
+    value: function renderTableRow(bank) {
+      if (bank.status === 'copying') {
+        return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, {
+          key: bank.id
+        }, this.renderTableRowHeader(bank), _ref4, _ref5, _ref6, _ref7, !this.props.isCompact && /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
+          textAlign: "end"
+        }, this.renderBankOptions(bank)));
+      } else {
+        return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, {
+          key: bank.id
+        }, this.renderTableRowHeader(bank), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null, this.formatDateMedium(bank.updatedAt())), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null, bank.itemEntryCount), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null, bank.lastUsed() ? this.formatDateMedium(bank.lastUsed()) : ''), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null, this.formatDateMedium(bank.createdAt())), !this.props.isCompact && /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
+          textAlign: "end"
+        }, this.renderBankOptions(bank)));
+      }
+    }
+  }, {
+    key: "renderTableSortHeader",
+    value: function renderTableSortHeader(headerId, headerText) {
+      return /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+        id: headerId,
+        key: headerId,
+        onRequestSort: this.props.onChangeSort(headerId, this.props.order),
+        sortDirection: this.props.sort === headerId ? this.props.order : 'none'
+      }, headerText);
+    }
+  }, {
+    key: "renderTable",
+    value: function renderTable() {
+      var _this4 = this;
+
+      return /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
+        margin: "small 0",
+        caption: (0, _formatMessage.default)('Banks'),
+        layout: this.props.isCompact ? 'stacked' : 'auto'
+      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Head, {
+        renderSortLabel: (0, _formatMessage.default)('Sort By')
+      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, null, this.renderTableSortHeader('name', (0, _formatMessage.default)('Bank')), this.renderTableSortHeader('updated_at', (0, _formatMessage.default)('Updated')), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+        id: "header-num-questions",
+        width: "1"
+      }, (0, _formatMessage.default)('Questions')), this.renderTableSortHeader('last_used', (0, _formatMessage.default)('Last Used')), this.renderTableSortHeader('created_at', (0, _formatMessage.default)('Created')), !this.props.isCompact && /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+        id: "header-option-links",
+        width: "1"
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Bank option links'))))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, (this.props.banks.toArray() || []).map(function (bank) {
+        return _this4.renderTableRow(bank);
+      })));
+    }
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement("div", null, this.state.sharingModalBank && this.renderSharingModal(), this.props.banks.toArray().map(this.renderBank));
+      return /*#__PURE__*/_react.default.createElement("div", null, this.state.sharingModalBank && this.renderSharingModal(), this.props.itemBankSearchTableEnabled ? this.renderTable() : this.props.banks.toArray().map(this.renderBank));
     }
   }]);
   BanksList.displayName = "BanksList";

package/lib/banks/components/SharingModal/asyncSearch.js

@@ -39,11 +39,6 @@ var _index = _interopRequireDefault(require("../../../common/components/shared/T
 
 var _quizCommon = require("@instructure/quiz-common");
 
-var _ref3 = /*#__PURE__*/_react.default.createElement(_uiSpinner.Spinner, {
-  renderTitle: "Loading",
-  size: "x-small"
-});
-
 var AsyncSearch = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(AsyncSearch, _Component);
 
@@ -346,7 +341,10 @@ var AsyncSearch = /*#__PURE__*/function (_Component) {
       return groups.length ? groups : /*#__PURE__*/_react.default.createElement(_uiSelect.Select.Option, {
         id: _quizCommon.SELECT_EMPTY_OPTION,
         key: _quizCommon.SELECT_EMPTY_OPTION
-      }, this.state.isLoading ? _ref3 : this.emptyOption());
+      }, this.state.isLoading ? /*#__PURE__*/_react.default.createElement(_uiSpinner.Spinner, {
+        renderTitle: (0, _formatMessage.default)('Loading'),
+        size: "x-small"
+      }) : this.emptyOption());
     }
   }, {
     key: "render",

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

@@ -254,10 +254,10 @@ var QuizEntryEditFooter = (_dec = (0, _uiThemeable.themeable)(_theme.default, st
     value: function render() {
       return /*#__PURE__*/_react.default.createElement(_uiView.View, {
         as: "div",
-        background: "light",
+        background: "secondary",
         padding: "xx-small none"
       }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
-        wrapItems: true,
+        wrap: "wrap",
         justifyItems: "space-between",
         alignItems: "center"
       }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {

package/lib/common/components/alerts/presenter.js

@@ -75,7 +75,7 @@ var Alerts = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_
         }, /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
           variant: "error",
           onDismiss: closeAlert,
-          closeButtonLabel: (0, _formatMessage.default)('Close'),
+          renderCloseButtonLabel: (0, _formatMessage.default)('Close'),
           transition: "none"
         }, alert.message));
       }
@@ -86,7 +86,7 @@ var Alerts = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_
       }, /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
         variant: alert.variant,
         onDismiss: closeAlert,
-        closeButtonLabel: (0, _formatMessage.default)('Close'),
+        renderCloseButtonLabel: (0, _formatMessage.default)('Close'),
         transition: "none"
       }, alert.message));
     };

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

@@ -71,8 +71,8 @@ var Title = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
         return /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
           alt: title
         }, /*#__PURE__*/_react.default.createElement(_uiTooltip.Tooltip, {
-          tip: title,
-          variant: "inverse"
+          renderTip: title,
+          color: "primary"
         }, this.renderTitle(truncatedTitle)));
       }
 

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

@@ -86,7 +86,7 @@ var AddContentPopover = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
       return /*#__PURE__*/_react.default.createElement(_uiPopover.Popover, {
         on: "click",
         onToggle: _this.toggle,
-        show: _this.props.isEditing,
+        isShowingContent: _this.props.isEditing,
         shouldCloseOnEscape: true,
         shouldContainFocus: true
       }, /*#__PURE__*/_react.default.createElement(_uiPopover.Popover.Trigger, null, _this.renderAddContentButton()), /*#__PURE__*/_react.default.createElement(_uiPopover.Popover.Content, null, /*#__PURE__*/_react.default.createElement(_index2.default, {

package/lib/common/components/resources/stimulus/StimulusShowInfo/index.js

@@ -48,7 +48,7 @@ var StimulusShowInfo = /*#__PURE__*/function (_Component) {
         as: "div",
         padding: "small",
         margin: "x-small 0 0 0",
-        background: "light"
+        background: "secondary"
       }, /*#__PURE__*/_react.default.createElement(_uiView.View, {
         as: "div"
       }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {

package/lib/moderating/components/resources/AccommodationsModal/index.js

@@ -77,7 +77,7 @@ var AccommodationModal = /*#__PURE__*/function (_Component) {
         display: "inline-block",
         borderRadius: "small",
         position: "relative",
-        focused: _this.state.isTruncated && focused,
+        withFocusOutline: _this.state.isTruncated && focused,
         as: "div",
         tabIndex: _this.state.isTruncated ? 0 : null
       }, /*#__PURE__*/_react.default.createElement(_uiTruncateText.TruncateText, {
@@ -97,7 +97,7 @@ var AccommodationModal = /*#__PURE__*/function (_Component) {
       }
 
       return /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, null, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, studentName), _this.state.isTruncated ? /*#__PURE__*/_react.default.createElement(_uiTooltip.Tooltip, {
-        tip: studentName,
+        renderTip: studentName,
         mountNode: mountNode
       }, _this.renderName) : _this.renderName());
     };

package/lib/moderating/components/sidebar/ModerateTray/presenter.js

@@ -113,7 +113,7 @@ var ModerateTray = /*#__PURE__*/function (_Component) {
           display: "block",
           borderRadius: "small",
           position: "relative",
-          focused: this.state.isTruncated && focused,
+          withFocusOutline: this.state.isTruncated && focused,
           as: "h2",
           tabIndex: this.state.isTruncated ? 0 : null
         }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, this.labelText()), /*#__PURE__*/_react.default.createElement(_uiTruncateText.TruncateText, {
@@ -159,7 +159,7 @@ var ModerateTray = /*#__PURE__*/function (_Component) {
         padding: "medium"
       }, this.state.isTruncated ? /*#__PURE__*/_react.default.createElement(_uiTooltip.Tooltip, {
         placement: "start",
-        tip: this.labelText(),
+        renderTip: this.labelText(),
         mountNode: this.getTrayRef || null
       }, function (_ref) {
         var focused = _ref.focused;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "18.2.1-rc.3+5badd9b9f",
+  "version": "18.2.1-rc.5+e6c543201",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -42,11 +42,11 @@
   "dependencies": {
     "@instructure/grading-utils": "^1.0.0",
     "@instructure/outcomes-ui": "^2.1.9",
-    "@instructure/quiz-common": "18.2.1-rc.3+5badd9b9f",
-    "@instructure/quiz-i18n": "18.2.1-rc.3+5badd9b9f",
-    "@instructure/quiz-interactions": "18.2.1-rc.3+5badd9b9f",
-    "@instructure/quiz-number-input": "18.2.1-rc.3+5badd9b9f",
-    "@instructure/quiz-rce": "18.2.1-rc.3+5badd9b9f",
+    "@instructure/quiz-common": "18.2.1-rc.5+e6c543201",
+    "@instructure/quiz-i18n": "18.2.1-rc.5+e6c543201",
+    "@instructure/quiz-interactions": "18.2.1-rc.5+e6c543201",
+    "@instructure/quiz-number-input": "18.2.1-rc.5+e6c543201",
+    "@instructure/quiz-rce": "18.2.1-rc.5+e6c543201",
     "@instructure/ui-a11y-content": "^7.20.0",
     "@instructure/ui-alerts": "^7.20.0",
     "@instructure/ui-avatar": "^7.20.0",
@@ -107,7 +107,7 @@
     "eventemitter3": "^3.1.0",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "18.2.1-rc.3+5badd9b9f",
+    "instructure-validations": "18.2.1-rc.5+e6c543201",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -158,7 +158,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "18.2.1-rc.3+5badd9b9f",
+    "quiz-presets": "18.2.1-rc.5+e6c543201",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -174,5 +174,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5badd9b9ff7affd155df7fa64e894861b843ae32"
+  "gitHead": "e6c5432010054a85b9ff7ced508614d42cd74938"
 }