@instructure/quiz-core 22.15.0 → 22.15.1

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

@@ -1,27 +1,110 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _dec, _class, _Banks;
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-function _callSuper(_this, derived, args) {
-  function isNativeReflectConstruct() {
-    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-    if (Reflect.construct.sham) return false;
-    if (typeof Proxy === "function") return true;
-    try {
-      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-    } catch (e) {
-      return false;
+/** @jsx jsx */ function _assert_this_initialized(self) {
+    if (self === void 0) {
+        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+    return self;
+}
+function _call_super(_this, derived, args) {
+    derived = _get_prototype_of(derived);
+    return _possible_constructor_return(_this, _is_native_reflect_construct() ? Reflect.construct(derived, args || [], _get_prototype_of(_this).constructor) : derived.apply(_this, args));
+}
+function _class_call_check(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+        throw new TypeError("Cannot call a class as a function");
+    }
+}
+function _defineProperties(target, props) {
+    for(var i = 0; i < props.length; i++){
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+    }
+}
+function _create_class(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _get_prototype_of(o) {
+    _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) {
+        return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _get_prototype_of(o);
+}
+function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+        throw new TypeError("Super expression must either be null or a function");
+    }
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+        constructor: {
+            value: subClass,
+            writable: true,
+            configurable: true
+        }
+    });
+    if (superClass) _set_prototype_of(subClass, superClass);
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _possible_constructor_return(self, call) {
+    if (call && (_type_of(call) === "object" || typeof call === "function")) {
+        return call;
     }
-  }
-  derived = _getPrototypeOf(derived);
-  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));
+    return _assert_this_initialized(self);
+}
+function _set_prototype_of(o, p) {
+    _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+        o.__proto__ = p;
+        return o;
+    };
+    return _set_prototype_of(o, p);
+}
+function _type_of(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+function _is_native_reflect_construct() {
+    try {
+        var result = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
+    } catch (_) {}
+    return (_is_native_reflect_construct = function() {
+        return !!result;
+    })();
+}
+function _ts_decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-/** @jsx jsx */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
@@ -48,488 +131,493 @@ import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import AsyncSearch from '../AsyncSearch';
 var sortOrderIcons = {
-  ascending: IconArrowUpLine,
-  descending: IconArrowDownLine
+    ascending: IconArrowUpLine,
+    descending: IconArrowDownLine
 };
-export var Banks = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_Banks = /*#__PURE__*/function (_Component) {
-  function Banks(props) {
-    var _this2;
-    _classCallCheck(this, Banks);
-    _this2 = _callSuper(this, Banks, arguments);
-    // We only care about displaying the account search for the Institution Banks and Shared with Me filters
-    _defineProperty(_this2, "hideAccountSearch", function () {
-      if (_this2.props.scopeType === 'course' || _this2.props.scopeType === 'courses' || _this2.props.scopeType === 'this_account') {
-        return true;
-      }
-      return false;
-    });
-    _defineProperty(_this2, "isSubAccountLaunch", function () {
-      return _this2.props.scope.type === 'account' && _this2.props.scope.launch_context_uuid && _this2.props.rootAccountUuid && _this2.props.scope.launch_context_uuid !== _this2.props.rootAccountUuid;
-    });
-    _defineProperty(_this2, "onCreateBank", function () {
-      _this2.props.createBank({
-        language: _this2.context.locale
-      });
-      _this2.props.openModal(CREATE_BANK_MODAL, {
-        modalTrigger: _this2.createBankButton,
-        onCreateBank: _this2.handleBankCreated
-      });
-    });
-    _defineProperty(_this2, "handleBankCreated", function () {
-      _this2.props.merge(BANKS_BANK_FILTERS, {
-        scopeType: 'user'
-      });
-    });
-    _defineProperty(_this2, "getBanksParams", function () {
-      var scope = _this2.props.scope;
-      var params = {};
-      if (_this2.props.scopeType === 'course' && scope.uuid) {
-        params['course_id'] = scope.uuid;
-      } else if (_this2.props.scopeType && _this2.props.scopeType != 'user') {
-        params['scope'] = _this2.props.scopeType;
-      }
-      if (_this2.props.sortBy !== 'name') {
-        params['sort_by'] = _this2.props.sortBy;
-      }
-      if (_this2.props.sortOrder === 'descending') {
-        params['sort_order'] = 'DESC';
-      }
-      if (_this2.props.searchTerms) {
-        params['search'] = _this2.props.searchTerms;
-      }
-      if (_this2.props.scopeType === 'this_account') {
-        params['account_uuids'] = [_this2.props.scope.launch_context_uuid];
-        params['scope'] = 'account';
-      } else if (_this2.props.searchSelection.length > 0) {
-        params['account_uuids'] = _this2.props.searchSelection.map(function (account) {
-          return account.uuid;
+export var Banks = /*#__PURE__*/ function(Component) {
+    "use strict";
+    _inherits(Banks, Component);
+    function Banks(props) {
+        _class_call_check(this, Banks);
+        var _this;
+        _this = _call_super(this, Banks, arguments), // We only care about displaying the account search for the Institution Banks and Shared with Me filters
+        _define_property(_this, "hideAccountSearch", function() {
+            if (_this.props.scopeType === 'course' || _this.props.scopeType === 'courses' || _this.props.scopeType === 'this_account') {
+                return true;
+            }
+            return false;
+        }), _define_property(_this, "isSubAccountLaunch", function() {
+            return _this.props.scope.type === 'account' && _this.props.scope.launch_context_uuid && _this.props.rootAccountUuid && _this.props.scope.launch_context_uuid !== _this.props.rootAccountUuid;
+        }), _define_property(_this, "onCreateBank", function() {
+            _this.props.createBank({
+                language: _this.context.locale
+            });
+            _this.props.openModal(CREATE_BANK_MODAL, {
+                modalTrigger: _this.createBankButton,
+                onCreateBank: _this.handleBankCreated
+            });
+        }), _define_property(_this, "handleBankCreated", function() {
+            _this.props.merge(BANKS_BANK_FILTERS, {
+                scopeType: 'user'
+            });
+        }), _define_property(_this, "getBanksParams", function() {
+            var scope = _this.props.scope;
+            var params = {};
+            if (_this.props.scopeType === 'course' && scope.uuid) {
+                params['course_id'] = scope.uuid;
+            } else if (_this.props.scopeType && _this.props.scopeType != 'user') {
+                params['scope'] = _this.props.scopeType;
+            }
+            if (_this.props.sortBy !== 'name') {
+                params['sort_by'] = _this.props.sortBy;
+            }
+            if (_this.props.sortOrder === 'descending') {
+                params['sort_order'] = 'DESC';
+            }
+            if (_this.props.searchTerms) {
+                params['search'] = _this.props.searchTerms;
+            }
+            if (_this.props.scopeType === 'this_account') {
+                params['account_uuids'] = [
+                    _this.props.scope.launch_context_uuid
+                ];
+                params['scope'] = 'account';
+            } else if (_this.props.searchSelection.length > 0) {
+                params['account_uuids'] = _this.props.searchSelection.map(function(account) {
+                    return account.uuid;
+                });
+            }
+            return params;
+        }), _define_property(_this, "getPage", function(page) {
+            var params = _this.getBanksParams();
+            return _this.props.getBanks(_object_spread({
+                page: page
+            }, params), _this.props.usedByCourseEnabled, _this.props.getCourseAssignments);
+        }), _define_property(_this, "focusCreateBankButton", function() {
+            _this.createBankButton && _this.createBankButton.focus();
+        }), _define_property(_this, "handleCreateBankButtonRef", function(node) {
+            _this.createBankButton = node;
+        }), _define_property(_this, "handleBanksParentChange", function(event, param) {
+            var scopeType = param.value;
+            _this.props.merge(BANKS_BANK_FILTERS, {
+                scopeType: scopeType
+            });
+        }), _define_property(_this, "getSortingOrderIcon", function() {
+            return sortOrderIcons[_this.props.sortOrder];
+        }), _define_property(_this, "getSortAssistiveText", function() {
+            return t('Change sort direction. Direction is currently { sortDirection }', {
+                sortDirection: _this.props.sortOrder === 'ascending' ? t('ascending') : t('descending')
+            });
+        }), _define_property(_this, "handleSortingButtonClick", function() {
+            _this.props.merge(BANKS_BANK_FILTERS, {
+                sortOrder: _this.props.sortOrder === 'ascending' ? 'descending' : 'ascending'
+            });
+        }), _define_property(_this, "handleSortByChange", function(event, param) {
+            var sortBy = param.value;
+            _this.props.merge(BANKS_BANK_FILTERS, {
+                sortBy: sortBy
+            });
+        }), _define_property(_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
+                });
+            };
+        }), _define_property(_this, "handleSearchInputChange", function(param) {
+            var value = param.target.value;
+            _this.setState({
+                searchTerms: value
+            });
+            _this.search(value);
+        }), _define_property(_this, "handleSearchSelectionChange", function(searchSelection) {
+            _this.props.setUI([
+                BANKS_BANK_FILTERS,
+                'searchSelection'
+            ], searchSelection);
+        }), _define_property(_this, "renderRecords", function(recordIds) {
+            return /*#__PURE__*/ jsx(BanksList, {
+                createBankButton: _this.createBankButton,
+                currentUser: _this.props.currentUser,
+                focusCreateBankButton: _this.focusCreateBankButton,
+                getCourseInfo: _this.props.getCourseInfo,
+                getUserInfo: _this.props.getUserInfo,
+                getSubaccountInfo: _this.props.getSubaccountInfo,
+                getShareableCourses: _this.props.getShareableCourses,
+                getShareableUsers: _this.props.getShareableUsers,
+                getShareableSubaccounts: _this.props.getShareableSubaccounts,
+                isCompact: _this.props.isCompact,
+                itemBankSearchTableEnabled: _this.props.itemBankSearchTableEnabled,
+                minChars: _this.props.minChars,
+                navigateToBank: _this.props.navigateToBank,
+                onChangeSort: _this.handleTableSortChange,
+                onShare: _this.props.onShare,
+                order: _this.props.sortOrder,
+                recordIds: recordIds,
+                sort: _this.props.sortBy
+            });
+        }), _define_property(_this, "emptyPage", function() {
+            if (_this.props.searchTerms || _this.props.searchSelection.length > 0) {
+                var message;
+                if (_this.props.scopeType === 'course') {
+                    message = t('Your filter is set to "Courses" which will narrow what you can search for.\n          Try adjusting the filter to "{ topLevelBankFilter }"', {
+                        topLevelBankFilter: _this.topLevelBankFilterName()
+                    });
+                } else if (_this.props.scopeType === 'this_account') {
+                    message = t('Your filter is set to "This Account" which will narrow what you can search for.\n            Try adjusting the filter to "{ topLevelBankFilter }"', {
+                        topLevelBankFilter: _this.topLevelBankFilterName()
+                    });
+                } else if (_this.props.scopeType === 'account') {
+                    message = t('Your filter is set to "Institution" which will narrow what you can search for.\n          Try adjusting the filter to "{ topLevelBankFilter }"', {
+                        topLevelBankFilter: _this.topLevelBankFilterName()
+                    });
+                }
+                return /*#__PURE__*/ jsx(Billboard, {
+                    size: "medium",
+                    heading: t('No Results Found'),
+                    message: message,
+                    hero: /*#__PURE__*/ jsx(Img, {
+                        src: noResults
+                    })
+                });
+            }
+            return t("You don't have any banks yet");
         });
-      }
-      return params;
-    });
-    _defineProperty(_this2, "getPage", function (page) {
-      var params = _this2.getBanksParams();
-      return _this2.props.getBanks(_objectSpread({
-        page: page
-      }, params), _this2.props.usedByCourseEnabled, _this2.props.getCourseAssignments);
-    });
-    _defineProperty(_this2, "focusCreateBankButton", function () {
-      _this2.createBankButton && _this2.createBankButton.focus();
-    });
-    _defineProperty(_this2, "handleCreateBankButtonRef", function (node) {
-      _this2.createBankButton = node;
-    });
-    _defineProperty(_this2, "handleBanksParentChange", function (event, _ref) {
-      var scopeType = _ref.value;
-      _this2.props.merge(BANKS_BANK_FILTERS, {
-        scopeType: scopeType
-      });
-    });
-    _defineProperty(_this2, "getSortingOrderIcon", function () {
-      return sortOrderIcons[_this2.props.sortOrder];
-    });
-    _defineProperty(_this2, "getSortAssistiveText", function () {
-      return t('Change sort direction. Direction is currently { sortDirection }', {
-        sortDirection: _this2.props.sortOrder === 'ascending' ? t('ascending') : t('descending')
-      });
-    });
-    _defineProperty(_this2, "handleSortingButtonClick", function () {
-      _this2.props.merge(BANKS_BANK_FILTERS, {
-        sortOrder: _this2.props.sortOrder === 'ascending' ? 'descending' : 'ascending'
-      });
-    });
-    _defineProperty(_this2, "handleSortByChange", function (event, _ref2) {
-      var sortBy = _ref2.value;
-      _this2.props.merge(BANKS_BANK_FILTERS, {
-        sortBy: sortBy
-      });
-    });
-    _defineProperty(_this2, "handleTableSortChange", function (sortBy, sortOrder) {
-      return function () {
-        var newSortOrder = sortOrder;
-        if (_this2.props.sortBy === sortBy) {
-          // toggle sort order
-          sortOrder === 'ascending' ? newSortOrder = 'descending' : newSortOrder = 'ascending';
-        }
-        _this2.props.merge(BANKS_BANK_FILTERS, {
-          sortOrder: newSortOrder,
-          sortBy: sortBy
-        });
-      };
-    });
-    _defineProperty(_this2, "handleSearchInputChange", function (_ref3) {
-      var value = _ref3.target.value;
-      _this2.setState({
-        searchTerms: value
-      });
-      _this2.search(value);
-    });
-    _defineProperty(_this2, "handleSearchSelectionChange", function (searchSelection) {
-      _this2.props.setUI([BANKS_BANK_FILTERS, 'searchSelection'], searchSelection);
-    });
-    _defineProperty(_this2, "renderRecords", function (recordIds) {
-      return jsx(BanksList, {
-        createBankButton: _this2.createBankButton,
-        currentUser: _this2.props.currentUser,
-        focusCreateBankButton: _this2.focusCreateBankButton,
-        getCourseInfo: _this2.props.getCourseInfo,
-        getUserInfo: _this2.props.getUserInfo,
-        getSubaccountInfo: _this2.props.getSubaccountInfo,
-        getShareableCourses: _this2.props.getShareableCourses,
-        getShareableUsers: _this2.props.getShareableUsers,
-        getShareableSubaccounts: _this2.props.getShareableSubaccounts,
-        isCompact: _this2.props.isCompact,
-        itemBankSearchTableEnabled: _this2.props.itemBankSearchTableEnabled,
-        minChars: _this2.props.minChars,
-        navigateToBank: _this2.props.navigateToBank,
-        onChangeSort: _this2.handleTableSortChange,
-        onShare: _this2.props.onShare,
-        order: _this2.props.sortOrder,
-        recordIds: recordIds,
-        sort: _this2.props.sortBy
-      });
-    });
-    _defineProperty(_this2, "emptyPage", function () {
-      if (_this2.props.searchTerms || _this2.props.searchSelection.length > 0) {
-        var message;
-        if (_this2.props.scopeType === 'course') {
-          message = t("Your filter is set to \"Courses\" which will narrow what you can search for.\n          Try adjusting the filter to \"{ topLevelBankFilter }\"", {
-            topLevelBankFilter: _this2.topLevelBankFilterName()
-          });
-        } else if (_this2.props.scopeType === 'this_account') {
-          message = t("Your filter is set to \"This Account\" which will narrow what you can search for.\n            Try adjusting the filter to \"{ topLevelBankFilter }\"", {
-            topLevelBankFilter: _this2.topLevelBankFilterName()
-          });
-        } else if (_this2.props.scopeType === 'account') {
-          message = t("Your filter is set to \"Institution\" which will narrow what you can search for.\n          Try adjusting the filter to \"{ topLevelBankFilter }\"", {
-            topLevelBankFilter: _this2.topLevelBankFilterName()
-          });
-        }
-        return jsx(Billboard, {
-          size: "medium",
-          heading: t('No Results Found'),
-          message: message,
-          hero: jsx(Img, {
-            src: noResults
-          })
+        _this.state = {
+            searchTerms: _this.props.searchTerms || ''
+        };
+        _this.search = debounce(500, function(searchTerms) {
+            _this.props.merge(BANKS_BANK_FILTERS, {
+                searchTerms: searchTerms
+            });
         });
-      }
-      return t("You don't have any banks yet");
-    });
-    _this2.state = {
-      searchTerms: _this2.props.searchTerms || ''
-    };
-    _this2.search = debounce(500, function (searchTerms) {
-      _this2.props.merge(BANKS_BANK_FILTERS, {
-        searchTerms: searchTerms
-      });
-    });
-    return _this2;
-  }
-  _inherits(Banks, _Component);
-  return _createClass(Banks, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      if (prevProps.sortBy !== this.props.sortBy || prevProps.sortOrder !== this.props.sortOrder || prevProps.searchTerms !== this.props.searchTerms || prevProps.scopeType !== this.props.scopeType || !isEqual(prevProps.searchSelection, this.props.searchSelection)) {
-        this.props.clear(BANKS_BANK_PAGINATION);
-      }
+        return _this;
     }
-  }, {
-    key: "topLevelBankFilterName",
-    value: function topLevelBankFilterName() {
-      return t('Shared with Me');
-    }
-  }, {
-    key: "renderFilters",
-    value: function renderFilters() {
-      var scopeOptions = [{
-        slug: 'user',
-        translation: this.topLevelBankFilterName()
-      }, {
-        slug: 'account',
-        translation: t('Institution Banks')
-      }, {
-        slug: 'courses',
-        translation: t('Shared with Courses')
-      }];
-      if (this.props.scope.uuid) {
-        scopeOptions.push({
-          slug: 'course',
-          translation: t('This Course')
-        });
-      }
-      if (this.isSubAccountLaunch()) {
-        // Put this option below "Insitution Banks"
-        scopeOptions.splice(2, 0, {
-          slug: 'this_account',
-          translation: t('This Account')
-        });
-      }
-
-      // 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'),
-        display: true
-      }, {
-        slug: 'last_used',
-        translation: t('Last Used'),
-        display: true
-      }, {
-        slug: 'updated_at',
-        translation: t('Last Updated'),
-        display: true
-      }, {
-        slug: 'created_at',
-        translation: t('Created Date'),
-        display: false
-      }];
-      var searchFiltersSelectOptionIdPrefix = 'banks-search-filters-select-option-';
-      var searchFilters = jsx(View, {
-        as: "div",
-        width: "100%"
-      }, jsx(Grid, {
-        startAt: "medium",
-        colSpacing: "small",
-        rowSpacing: "small",
-        vAlign: "bottom"
-      }, jsx(Grid.Row, null, jsx(Grid.Col, {
-        width: "auto"
-      }, jsx(SimpleSelect, {
-        onChange: this.handleBanksParentChange,
-        value: this.props.scopeType,
-        renderLabel: t('Filter By'),
-        width: "13rem",
-        "data-automation": "sdk-banks-filter-select"
-      }, scopeOptions.map(function (option) {
-        return jsx(SimpleSelect.Option, {
-          id: searchFiltersSelectOptionIdPrefix + option.slug,
-          key: option.slug,
-          value: option.slug
-        }, option.translation);
-      }))), jsx(Grid.Col, {
-        width: 4
-      }, jsx(TextInput, {
-        renderLabel: t('Bank'),
-        type: "search",
-        value: this.state.searchTerms,
-        onChange: this.handleSearchInputChange,
-        placeholder: t('Search Banks'),
-        "data-automation": "sdk-search-bank-textinput"
-      })), !this.hideAccountSearch() && jsx(Grid.Col, {
-        width: 4
-      }, jsx(AsyncSearch, {
-        getShareableSubaccounts: this.props.getShareableSubaccounts,
-        minChars: this.props.minChars,
-        onSelectionChange: this.handleSearchSelectionChange,
-        searchType: SHARED_WITH_ACCOUNT,
-        selectedOption: this.props.searchSelection,
-        searchLabel: t('Account'),
-        placeholderLabel: t('Search Accounts')
-      })))));
-      var sortingFiltersSelectOptionIdPrefix = 'banks-sorting-filters-select-option-';
-      var sortingFilters = jsx(React.Fragment, null, jsx("div", {
-        display: "inline-block",
-        style: {
-          margin: 'auto 0px auto auto'
-        }
-      }, jsx(SimpleSelect, {
-        renderLabel: jsx(ScreenReaderContent, null, t('Sort by')),
-        value: this.props.sortBy,
-        width: "10rem",
-        onChange: this.handleSortByChange
-      }, sortingCriteriaOptions.filter(function (option) {
-        return option.display === true;
-      }).map(function (option) {
-        return jsx(SimpleSelect.Option, {
-          id: sortingFiltersSelectOptionIdPrefix + option.slug,
-          key: option.slug,
-          value: option.slug
-        }, option.translation);
-      }))), jsx("div", {
-        display: "inline-block",
-        style: {
-          marginLeft: '1rem'
+    _create_class(Banks, [
+        {
+            key: "componentDidUpdate",
+            value: function componentDidUpdate(prevProps, prevState) {
+                if (prevProps.sortBy !== this.props.sortBy || prevProps.sortOrder !== this.props.sortOrder || prevProps.searchTerms !== this.props.searchTerms || prevProps.scopeType !== this.props.scopeType || !isEqual(prevProps.searchSelection, this.props.searchSelection)) {
+                    this.props.clear(BANKS_BANK_PAGINATION);
+                }
+            }
+        },
+        {
+            key: "topLevelBankFilterName",
+            value: function topLevelBankFilterName() {
+                return t('Shared with Me');
+            }
+        },
+        {
+            key: "renderFilters",
+            value: function renderFilters() {
+                var scopeOptions = [
+                    {
+                        slug: 'user',
+                        translation: this.topLevelBankFilterName()
+                    },
+                    {
+                        slug: 'account',
+                        translation: t('Institution Banks')
+                    },
+                    {
+                        slug: 'courses',
+                        translation: t('Shared with Courses')
+                    }
+                ];
+                if (this.props.scope.uuid) {
+                    scopeOptions.push({
+                        slug: 'course',
+                        translation: t('This Course')
+                    });
+                }
+                if (this.isSubAccountLaunch()) {
+                    // Put this option below "Insitution Banks"
+                    scopeOptions.splice(2, 0, {
+                        slug: 'this_account',
+                        translation: t('This Account')
+                    });
+                }
+                // 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'),
+                        display: true
+                    },
+                    {
+                        slug: 'last_used',
+                        translation: t('Last Used'),
+                        display: true
+                    },
+                    {
+                        slug: 'updated_at',
+                        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__*/ jsx(View, {
+                    as: "div",
+                    width: "100%"
+                }, /*#__PURE__*/ jsx(Grid, {
+                    startAt: "medium",
+                    colSpacing: "small",
+                    rowSpacing: "small",
+                    vAlign: "bottom"
+                }, /*#__PURE__*/ jsx(Grid.Row, null, /*#__PURE__*/ jsx(Grid.Col, {
+                    width: "auto"
+                }, /*#__PURE__*/ jsx(SimpleSelect, {
+                    onChange: this.handleBanksParentChange,
+                    value: this.props.scopeType,
+                    renderLabel: t('Filter By'),
+                    width: "13rem",
+                    "data-automation": "sdk-banks-filter-select"
+                }, scopeOptions.map(function(option) {
+                    return /*#__PURE__*/ jsx(SimpleSelect.Option, {
+                        id: searchFiltersSelectOptionIdPrefix + option.slug,
+                        key: option.slug,
+                        value: option.slug
+                    }, option.translation);
+                }))), /*#__PURE__*/ jsx(Grid.Col, {
+                    width: 4
+                }, /*#__PURE__*/ jsx(TextInput, {
+                    renderLabel: t('Bank'),
+                    type: "search",
+                    value: this.state.searchTerms,
+                    onChange: this.handleSearchInputChange,
+                    placeholder: t('Search Banks'),
+                    "data-automation": "sdk-search-bank-textinput"
+                })), !this.hideAccountSearch() && /*#__PURE__*/ jsx(Grid.Col, {
+                    width: 4
+                }, /*#__PURE__*/ jsx(AsyncSearch, {
+                    getShareableSubaccounts: this.props.getShareableSubaccounts,
+                    minChars: this.props.minChars,
+                    onSelectionChange: this.handleSearchSelectionChange,
+                    searchType: SHARED_WITH_ACCOUNT,
+                    selectedOption: this.props.searchSelection,
+                    searchLabel: t('Account'),
+                    placeholderLabel: t('Search Accounts')
+                })))));
+                var sortingFiltersSelectOptionIdPrefix = 'banks-sorting-filters-select-option-';
+                var sortingFilters = /*#__PURE__*/ jsx(React.Fragment, null, /*#__PURE__*/ jsx("div", {
+                    display: "inline-block",
+                    style: {
+                        margin: 'auto 0px auto auto'
+                    }
+                }, /*#__PURE__*/ jsx(SimpleSelect, {
+                    renderLabel: /*#__PURE__*/ jsx(ScreenReaderContent, null, t('Sort by')),
+                    value: this.props.sortBy,
+                    width: "10rem",
+                    onChange: this.handleSortByChange
+                }, sortingCriteriaOptions.filter(function(option) {
+                    return option.display === true;
+                }).map(function(option) {
+                    return /*#__PURE__*/ jsx(SimpleSelect.Option, {
+                        id: sortingFiltersSelectOptionIdPrefix + option.slug,
+                        key: option.slug,
+                        value: option.slug
+                    }, option.translation);
+                }))), /*#__PURE__*/ jsx("div", {
+                    display: "inline-block",
+                    style: {
+                        marginLeft: '1rem'
+                    }
+                }, /*#__PURE__*/ jsx(Button, {
+                    type: "button",
+                    onClick: this.handleSortingButtonClick,
+                    "data-automation": "sdk-sort-banks-button",
+                    renderIcon: this.getSortingOrderIcon()
+                }, /*#__PURE__*/ jsx(AccessibleContent, {
+                    alt: this.getSortAssistiveText()
+                }, t('Sort')))));
+                if (this.props.closeTray) {
+                    return /*#__PURE__*/ jsx("div", {
+                        css: [
+                            this.props.styles.filters,
+                            this.props.styles.borderedBottom
+                        ]
+                    }, /*#__PURE__*/ jsx("div", {
+                        css: this.props.styles.filtersRow
+                    }, searchFilters), !this.props.itemBankSearchTableEnabled && /*#__PURE__*/ jsx("div", {
+                        css: this.props.styles.filtersRow
+                    }, sortingFilters));
+                } else {
+                    return /*#__PURE__*/ jsx("div", {
+                        css: [
+                            this.props.styles.filters,
+                            this.props.styles.borderedBottom
+                        ]
+                    }, /*#__PURE__*/ jsx("div", {
+                        css: this.props.styles.filtersRow
+                    }, searchFilters, !this.props.itemBankSearchTableEnabled && sortingFilters));
+                }
+            }
+        },
+        {
+            key: "renderHeader",
+            value: function renderHeader() {
+                return /*#__PURE__*/ jsx("div", {
+                    css: [
+                        this.props.styles.header
+                    ]
+                }, /*#__PURE__*/ jsx(Heading, {
+                    as: this.props.isCompact ? 'h2' : 'h1',
+                    level: "h1"
+                }, t('Banks')), /*#__PURE__*/ jsx(Button, {
+                    ref: this.handleCreateBankButtonRef,
+                    type: "button",
+                    color: "primary",
+                    onClick: this.onCreateBank,
+                    "data-automation": "sdk-create-new-bank-button",
+                    renderIcon: IconPlusLine
+                }, /*#__PURE__*/ jsx(AccessibleContent, {
+                    alt: t('Create Bank')
+                }, t('Bank'))));
+            }
+        },
+        {
+            key: "renderNav",
+            value: function renderNav() {
+                var _this_props = this.props, scope = _this_props.scope, closeTray = _this_props.closeTray, navigateToBuild = _this_props.navigateToBuild, returnToUrl = _this_props.returnToUrl;
+                var isScopeEmpty = !Object.keys(scope).length;
+                return /*#__PURE__*/ jsx(NavWrapper, {
+                    closeTray: closeTray,
+                    navigateToBuild: navigateToBuild,
+                    returnToUrl: isScopeEmpty ? null : returnToUrl,
+                    scope: scope,
+                    isCompact: this.props.isCompact,
+                    iceTopNavBarEnabled: this.props.iceTopNavBarEnabled,
+                    menuItemPath: "/banks"
+                });
+            }
+        },
+        {
+            key: "renderBanksSearchResults",
+            value: function renderBanksSearchResults() {
+                return /*#__PURE__*/ jsx(PaginatedCollection, {
+                    empty: this.emptyPage(),
+                    getPage: this.getPage,
+                    renderRecords: this.renderRecords,
+                    stateKey: BANKS_BANK_PAGINATION
+                });
+            }
+        },
+        {
+            key: "render",
+            value: function render() {
+                return /*#__PURE__*/ jsx(Page, null, this.renderNav(), /*#__PURE__*/ jsx("div", {
+                    css: this.props.styles.content
+                }, this.props.iceTopNavBarEnabled && /*#__PURE__*/ jsx("div", {
+                    css: this.props.styles.breadcrumb
+                }, /*#__PURE__*/ jsx(HeaderBreadCrumb, {
+                    returnToUrl: this.props.returnToUrl,
+                    scope: this.props.scope,
+                    navigateToBuild: this.props.navigateToBuild
+                })), this.renderHeader(), this.renderFilters(), this.renderBanksSearchResults(), /*#__PURE__*/ jsx(CreateBankModal, {
+                    itemBanksScope: this.props.scope
+                })));
+            }
         }
-      }, jsx(Button, {
-        type: "button",
-        onClick: this.handleSortingButtonClick,
-        "data-automation": "sdk-sort-banks-button",
-        renderIcon: this.getSortingOrderIcon()
-      }, jsx(AccessibleContent, {
-        alt: this.getSortAssistiveText()
-      }, t('Sort')))));
-      if (this.props.closeTray) {
-        return jsx("div", {
-          css: [this.props.styles.filters, this.props.styles.borderedBottom]
-        }, jsx("div", {
-          css: this.props.styles.filtersRow
-        }, searchFilters), !this.props.itemBankSearchTableEnabled && jsx("div", {
-          css: this.props.styles.filtersRow
-        }, sortingFilters));
-      } else {
-        return jsx("div", {
-          css: [this.props.styles.filters, this.props.styles.borderedBottom]
-        }, jsx("div", {
-          css: this.props.styles.filtersRow
-        }, searchFilters, !this.props.itemBankSearchTableEnabled && sortingFilters));
-      }
-    }
-  }, {
-    key: "renderHeader",
-    value: function renderHeader() {
-      return jsx("div", {
-        css: [this.props.styles.header]
-      }, jsx(Heading, {
-        as: this.props.isCompact ? 'h2' : 'h1',
-        level: "h1"
-      }, t('Banks')), jsx(Button, {
-        ref: this.handleCreateBankButtonRef,
-        type: "button",
-        color: "primary",
-        onClick: this.onCreateBank,
-        "data-automation": "sdk-create-new-bank-button",
-        renderIcon: IconPlusLine
-      }, jsx(AccessibleContent, {
-        alt: t('Create Bank')
-      }, t('Bank'))));
-    }
-  }, {
-    key: "renderNav",
-    value: function renderNav() {
-      var _this$props = this.props,
-        scope = _this$props.scope,
-        closeTray = _this$props.closeTray,
-        navigateToBuild = _this$props.navigateToBuild,
-        returnToUrl = _this$props.returnToUrl;
-      var isScopeEmpty = !Object.keys(scope).length;
-      return jsx(NavWrapper, {
-        closeTray: closeTray,
-        navigateToBuild: navigateToBuild,
-        returnToUrl: isScopeEmpty ? null : returnToUrl,
-        scope: scope,
-        isCompact: this.props.isCompact,
-        iceTopNavBarEnabled: this.props.iceTopNavBarEnabled,
-        menuItemPath: "/banks"
-      });
-    }
-  }, {
-    key: "renderBanksSearchResults",
-    value: function renderBanksSearchResults() {
-      return jsx(PaginatedCollection, {
-        empty: this.emptyPage(),
-        getPage: this.getPage,
-        renderRecords: this.renderRecords,
-        stateKey: BANKS_BANK_PAGINATION
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return jsx(Page, null, this.renderNav(), jsx("div", {
-        css: this.props.styles.content
-      }, this.props.iceTopNavBarEnabled && jsx("div", {
-        css: this.props.styles.breadcrumb
-      }, jsx(HeaderBreadCrumb, {
-        returnToUrl: this.props.returnToUrl,
-        scope: this.props.scope,
-        navigateToBuild: this.props.navigateToBuild
-      })), this.renderHeader(), this.renderFilters(), this.renderBanksSearchResults(), jsx(CreateBankModal, {
-        itemBanksScope: this.props.scope
-      })));
-    }
-  }]);
-}(Component), _defineProperty(_Banks, "displayName", 'Banks'), _defineProperty(_Banks, "componentId", "Quizzes".concat(_Banks.displayName)), _defineProperty(_Banks, "propTypes", {
-  closeTray: PropTypes.func,
-  createBank: PropTypes.func.isRequired,
-  currentUser: PropTypes.shape({
-    bank_admin: PropTypes.bool,
-    can_share_banks_with_subaccounts: PropTypes.bool,
-    email: PropTypes.string,
-    enrollment_names: PropTypes.arrayOf(PropTypes.string),
-    full_name: PropTypes.string,
-    uuid: PropTypes.string,
-    account_name: PropTypes.string
-  }),
-  // from consumer
-  clear: PropTypes.func.isRequired,
-  getBanks: PropTypes.func.isRequired,
-  getCourseInfo: PropTypes.func,
-  // from consumer
-  getUserInfo: PropTypes.func,
-  // from consumer
-  getShareableCourses: PropTypes.func,
-  // from consumer
-  getShareableUsers: PropTypes.func,
-  // from consumer
-  getShareableSubaccounts: PropTypes.func,
-  // from consumer
-  getSubaccountInfo: PropTypes.func,
-  // from consumer
-  getCourseAssignments: PropTypes.func,
-  // from consumer
-  isCompact: PropTypes.bool,
-  merge: PropTypes.func.isRequired,
-  minChars: PropTypes.number,
-  navigateToBank: PropTypes.func.isRequired,
-  // can be from consumer
-  navigateToBuild: PropTypes.func,
-  // from consumer
-  onShare: PropTypes.func,
-  // from consumer
-  openModal: PropTypes.func.isRequired,
-  returnToUrl: PropTypes.string,
-  // from consumer
-  scope: PropTypes.shape({
-    type: PropTypes.string,
-    uuid: PropTypes.string,
-    title: PropTypes.string,
-    launch_context_uuid: PropTypes.string,
-    root_account_name: PropTypes.string
-  }).isRequired,
-  scopeType: PropTypes.string,
-  searchTerms: PropTypes.string,
-  searchSelection: PropTypes.arrayOf(PropTypes.shape({
-    avatar: PropTypes.string,
-    fullName: PropTypes.string,
-    title: PropTypes.string,
-    uuid: PropTypes.string.isRequired
-  })),
-  sortBy: PropTypes.string,
-  sortOrder: PropTypes.string,
-  usedByCourseEnabled: PropTypes.bool,
-  itemBankSearchTableEnabled: PropTypes.bool,
-  setUI: PropTypes.func.isRequired,
-  iceTopNavBarEnabled: PropTypes.bool,
-  styles: PropTypes.object,
-  rootAccountUuid: PropTypes.string
-}), _defineProperty(_Banks, "defaultProps", {
-  closeTray: null,
-  currentUser: null,
-  getCourseInfo: null,
-  getUserInfo: null,
-  getShareableCourses: null,
-  getShareableUsers: null,
-  getCourseAssignments: null,
-  getShareableSubaccounts: null,
-  getSubaccountInfo: null,
-  minChars: void 0,
-  isCompact: false,
-  navigateToBuild: null,
-  onShare: function onShare() {},
-  scope: {},
-  returnToUrl: null,
-  scopeType: 'user',
-  sortBy: 'name',
-  sortOrder: 'ascending',
-  searchTerms: null,
-  searchSelection: [],
-  usedByCourseEnabled: false,
-  itemBankSearchTableEnabled: false,
-  iceTopNavBarEnabled: false,
-  rootAccountUuid: null
-}), _defineProperty(_Banks, "contextTypes", {
-  locale: PropTypes.string
-}), _Banks)) || _class);
-export default Banks;
+    ]);
+    return Banks;
+}(Component);
+_define_property(Banks, "displayName", 'Banks');
+_define_property(Banks, "componentId", "Quizzes".concat(Banks.displayName));
+_define_property(Banks, "propTypes", {
+    closeTray: PropTypes.func,
+    createBank: PropTypes.func.isRequired,
+    currentUser: PropTypes.shape({
+        bank_admin: PropTypes.bool,
+        can_share_banks_with_subaccounts: PropTypes.bool,
+        email: PropTypes.string,
+        enrollment_names: PropTypes.arrayOf(PropTypes.string),
+        full_name: PropTypes.string,
+        uuid: PropTypes.string,
+        account_name: PropTypes.string
+    }),
+    clear: PropTypes.func.isRequired,
+    getBanks: PropTypes.func.isRequired,
+    getCourseInfo: PropTypes.func,
+    getUserInfo: PropTypes.func,
+    getShareableCourses: PropTypes.func,
+    getShareableUsers: PropTypes.func,
+    getShareableSubaccounts: PropTypes.func,
+    getSubaccountInfo: PropTypes.func,
+    getCourseAssignments: PropTypes.func,
+    isCompact: PropTypes.bool,
+    merge: PropTypes.func.isRequired,
+    minChars: PropTypes.number,
+    navigateToBank: PropTypes.func.isRequired,
+    navigateToBuild: PropTypes.func,
+    onShare: PropTypes.func,
+    openModal: PropTypes.func.isRequired,
+    returnToUrl: PropTypes.string,
+    scope: PropTypes.shape({
+        type: PropTypes.string,
+        uuid: PropTypes.string,
+        title: PropTypes.string,
+        launch_context_uuid: PropTypes.string,
+        root_account_name: PropTypes.string
+    }).isRequired,
+    scopeType: PropTypes.string,
+    searchTerms: PropTypes.string,
+    searchSelection: PropTypes.arrayOf(PropTypes.shape({
+        avatar: PropTypes.string,
+        fullName: PropTypes.string,
+        title: PropTypes.string,
+        uuid: PropTypes.string.isRequired
+    })),
+    sortBy: PropTypes.string,
+    sortOrder: PropTypes.string,
+    usedByCourseEnabled: PropTypes.bool,
+    itemBankSearchTableEnabled: PropTypes.bool,
+    setUI: PropTypes.func.isRequired,
+    iceTopNavBarEnabled: PropTypes.bool,
+    styles: PropTypes.object,
+    rootAccountUuid: PropTypes.string
+});
+_define_property(Banks, "defaultProps", {
+    closeTray: null,
+    currentUser: null,
+    getCourseInfo: null,
+    getUserInfo: null,
+    getShareableCourses: null,
+    getShareableUsers: null,
+    getCourseAssignments: null,
+    getShareableSubaccounts: null,
+    getSubaccountInfo: null,
+    minChars: void 0,
+    isCompact: false,
+    navigateToBuild: null,
+    onShare: function onShare() {},
+    scope: {},
+    returnToUrl: null,
+    scopeType: 'user',
+    sortBy: 'name',
+    sortOrder: 'ascending',
+    searchTerms: null,
+    searchSelection: [],
+    usedByCourseEnabled: false,
+    itemBankSearchTableEnabled: false,
+    iceTopNavBarEnabled: false,
+    rootAccountUuid: null
+});
+_define_property(Banks, "contextTypes", {
+    locale: PropTypes.string
+});
+Banks = _ts_decorate([
+    withStyleOverrides(generateStyle, generateComponentTheme)
+], Banks);
+export default Banks;