@instructure/quiz-core 22.10.2 → 22.11.1-rc.165

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

@@ -1,38 +1,224 @@
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _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, _SharingModalPresenter;
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-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;
+/** @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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+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 _possible_constructor_return(self, call) {
+    if (call && (_type_of(call) === "object" || typeof call === "function")) {
+        return call;
+    }
+    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 {
-      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-    } catch (e) {
-      return false;
+        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;
+}
+function _ts_generator(thisArg, body) {
+    var f, y, t, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    }, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(g && (g = 0, op[0] && (_ = 0)), _)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
     }
-  }
-  derived = _getPrototypeOf(derived);
-  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));
 }
-/** @jsx jsx */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { List, Map } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import partial from 'lodash/partial';
-import { Modal, ModalHeader, ModalBody, ModalFooter, CAN_EDIT, READ_ONLY, REMOVED_ACCESS, SHARED_WITH_USER, SHARED_WITH_COURSE, SHARED_WITH_ACCOUNT, SimpleSelect, withStyleOverrides } from '@instructure/quiz-common';
+import debounce from 'lodash/debounce';
+import { Modal, ModalHeader, ModalBody, ModalFooter, CAN_EDIT, READ_ONLY, REMOVED_ACCESS, SHARED_WITH_USER, SHARED_WITH_COURSE, SHARED_WITH_ACCOUNT, SimpleSelect, withStyleOverrides, TextInput } from '@instructure/quiz-common';
 import { Heading } from '@instructure/ui-heading';
-import { Button, CloseButton } from '@instructure/ui-buttons';
+import { Button, CloseButton, CondensedButton, IconButton } from '@instructure/ui-buttons';
 import { View } from '@instructure/ui-view';
 import { Grid } from '@instructure/ui-grid';
 import { Tabs } from '@instructure/ui-tabs';
@@ -42,508 +228,572 @@ import CustomPropTypes from '../../../common/util/CustomPropTypes';
 import ShareList from './ShareList';
 import AsyncSearch from '../AsyncSearch';
 import RootAccountSharing from './RootAccountSharing';
-import Spinner from '../../../common/components/shared/spinner/Spinner';
+import { Spinner } from '../../../common/components/shared/spinner/Spinner';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import t from '@instructure/quiz-i18n/es/format-message';
-var noop = function noop() {};
-export var SharingModalPresenter = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_SharingModalPresenter = /*#__PURE__*/function (_Component) {
-  function SharingModalPresenter() {
-    var _this2;
-    _classCallCheck(this, SharingModalPresenter);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this2 = _callSuper(this, SharingModalPresenter, [].concat(args));
-    _defineProperty(_this2, "state", {
-      accountPermission: null,
-      shares: List(),
-      newEntities: List(),
-      searchSelection: [],
-      searchPermission: READ_ONLY,
-      entitiesWithChangedPermission: {},
-      selectedTabIndex: 0
-    });
-    _defineProperty(_this2, "shareListRef", null);
-    _defineProperty(_this2, "shareButtonRef", null);
-    // =============
-    //   LIFECYCLE
-    // =============
-    _defineProperty(_this2, "checkForSharedBanks", function () {
-      var size = _this2.props.sharedBanks.size;
-      if (size >= 0 && size !== _this2.props.bank.sharedCount || size === 0) {
-        _this2.props.getSharedBanks(_this2.props.bank, _this2.props.getUserInfo, _this2.props.getCourseInfo, _this2.props.getSubaccountInfo);
-      } else {
-        _this2.setState({
-          shares: _this2.props.sharedBanks
+import t from '@instructure/quiz-i18n/format-message';
+import { IconSearchLine, IconTroubleLine } from '@instructure/ui-icons';
+var noop = function() {};
+export var SharingModalPresenter = /*#__PURE__*/ function(Component) {
+    "use strict";
+    _inherits(SharingModalPresenter, Component);
+    function SharingModalPresenter(props) {
+        _class_call_check(this, SharingModalPresenter);
+        var _this;
+        var _this1;
+        _this = _call_super(this, SharingModalPresenter, [
+            props
+        ]), _this1 = _this, _define_property(_this1, "state", {
+            accountPermission: null,
+            shares: List(),
+            newEntities: List(),
+            searchSelection: [],
+            searchPermission: READ_ONLY,
+            selectedTabIndex: 0,
+            value: '',
+            startingPoint: 0,
+            numOfResults: 0,
+            searchValue: '',
+            displayEntities: []
+        }), _define_property(_this1, "shareListRef", null), _define_property(_this1, "shareButtonRef", null), _define_property(_this1, "checkForSharedBanks", function() {
+            var size = _this1.props.sharedBanks.size;
+            if (size >= 0 && size !== _this1.props.bank.sharedCount || size === 0) {
+                _this1.props.getSharedBanks(_this1.props.bank, _this1.props.getUserInfo, _this1.props.getCourseInfo, _this1.props.getSubaccountInfo);
+            } else {
+                _this1.setState({
+                    shares: _this1.props.sharedBanks
+                });
+            }
+        }), _define_property(_this1, "normalizeText", function(text) {
+            return text.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();
+        }), // =============
+        //   HELPERS
+        // =============
+        _define_property(_this1, "createFilteredList", function() {
+            var entities = _this1.state.shares;
+            var users = entities.filter(function(s) {
+                return s.get('entityType') === SHARED_WITH_USER;
+            });
+            var courses = entities.filter(function(s) {
+                return s.get('entityType') === SHARED_WITH_COURSE;
+            });
+            var accounts = entities.filter(function(s) {
+                return s.get('entityType') === SHARED_WITH_ACCOUNT;
+            });
+            switch(_this1.state.selectedTabIndex){
+                case 0:
+                    {
+                        var displayedUsers = users.filter(function(item) {
+                            return _this1.normalizeText(item.get('title')).includes(_this1.normalizeText(_this1.state.searchValue));
+                        });
+                        _this1.setState({
+                            numOfResults: displayedUsers.size,
+                            displayEntities: displayedUsers.slice(0, _this1.state.startingPoint + _this1.props.limit)
+                        });
+                        _this1.debouncedStopLoading();
+                        break;
+                    }
+                case 1:
+                    {
+                        var displayedCourses = courses.filter(function(item) {
+                            return _this1.normalizeText(item.get('title')).includes(_this1.normalizeText(_this1.state.searchValue));
+                        });
+                        _this1.setState({
+                            numOfResults: displayedCourses.size,
+                            displayEntities: displayedCourses.slice(0, _this1.state.startingPoint + _this1.props.limit)
+                        });
+                        _this1.debouncedStopLoading();
+                        break;
+                    }
+                case 2:
+                    {
+                        var displayedAccounts = accounts.filter(function(item) {
+                            return _this1.normalizeText(item.get('title')).includes(_this1.normalizeText(_this1.state.searchValue));
+                        });
+                        _this1.setState({
+                            numOfResults: displayedAccounts.size,
+                            displayEntities: displayedAccounts.slice(0, _this1.state.startingPoint + _this1.props.limit)
+                        });
+                        _this1.debouncedStopLoading();
+                        break;
+                    }
+            }
+        }), _define_property(_this1, "handleTabChange", function(event, param) {
+            var index = param.index;
+            _this1.setState({
+                selectedTabIndex: index,
+                startingPoint: 0,
+                value: ''
+            }, function() {
+                _this1.checkForSharedBanks();
+            });
+        }), _define_property(_this1, "modalDismissCleanup", function() {
+            _this1.props.onDismiss();
+            if (_this1.props.modalTrigger) {
+                _this1.props.modalTrigger.focus();
+            }
+            // removes the creator's temporary sharedBank record
+            _this1.props.removeSharedBank('-1');
+        }), _define_property(_this1, "isSharedWithAccount", function() {
+            var state = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : _this1.state;
+            return [
+                READ_ONLY,
+                CAN_EDIT
+            ].includes(state.accountPermission);
+        }), // =============
+        //   HANDLERS
+        // =============
+        _define_property(_this1, "handleDismiss", function(e) {
+            _this1.props.updateSharedCount(null);
+            _this1.modalDismissCleanup();
+        }), _define_property(_this1, "handleSearchSelectionChange", function(searchSelection) {
+            _this1.setState({
+                searchSelection: searchSelection
+            });
+        }), _define_property(_this1, "originalPermissionForEntity", function(entity) {
+            var originalEntity = _this1.props.sharedBanks.find(function(sb) {
+                return sb.get('id') == entity.get('id');
+            }) || Map();
+            return originalEntity.get('permission', CAN_EDIT);
+        }), _define_property(_this1, "handleEntityRemove", function(entity, undoRemove) {
+            _this1.confirmPermissionChange(entity, REMOVED_ACCESS);
+        }), _define_property(_this1, "handleSearchPermissionChange", function(e, param) {
+            var value = param.value;
+            _this1.setState({
+                searchPermission: value
+            });
+        }), _define_property(_this1, "handleSearchFilter", function(searchResults) {
+            return searchResults.filter(function(result) {
+                return !_this1.props.sharedBanks.some(function(entity) {
+                    return entity.get('entityId') === result.uuid;
+                }) && (result.uuid !== _this1.props.bank.creator || _this1.props.bank.sharedCount > 0);
+            });
+        }), _define_property(_this1, "handleShare", function() {
+            var newEntities = List(_this1.state.searchSelection.map(function(entity) {
+                return Map({
+                    id: entity.uuid,
+                    entityType: entity.entityType,
+                    entityId: entity.uuid,
+                    title: entity.fullName || entity.title || entity.name,
+                    avatar: entity.avatar,
+                    email: entity.email,
+                    permission: _this1.state.searchPermission
+                });
+            }));
+            newEntities.forEach(function(entity) {
+                _this1.props.onShare(entity.toJS());
+                _this1.props.shareBank(_this1.sharedBankForEntity(entity), _this1.props.getUserInfo);
+            });
+            _this1.setState({
+                searchSelection: []
+            });
+        }), _define_property(_this1, "updatePermission", function(entity, permission) {
+            return _async_to_generator(function() {
+                var _this_props, updateSharedBankPermission, getBank, bank;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            _this_props = _this1.props, updateSharedBankPermission = _this_props.updateSharedBankPermission, getBank = _this_props.getBank, bank = _this_props.bank;
+                            return [
+                                4,
+                                updateSharedBankPermission(bank.id, entity.get('id'), permission)
+                            ];
+                        case 1:
+                            _state.sent();
+                            getBank(bank.id); // make sure the user still has access to the bank
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        }), _define_property(_this1, "translatedPermissionLevel", function(permission) {
+            var _obj;
+            return (_obj = {}, _define_property(_obj, CAN_EDIT, t('edit')), _define_property(_obj, READ_ONLY, t('view')), _obj)[permission];
+        }), _define_property(_this1, "confirmPermissionChange", function(entity, permission) {
+            var confirmText = permission === REMOVED_ACCESS ? t('You are about to remove { accessLevel } access for { entityTitle } to this bank.', {
+                accessLevel: _this1.translatedPermissionLevel(_this1.originalPermissionForEntity(entity)),
+                entityTitle: entity.get('title')
+            }) : t('You are about to change access level for { entityTitle } from { originalAccessLevel } to { permission }.', {
+                entityTitle: entity.get('title'),
+                originalAccessLevel: _this1.translatedPermissionLevel(_this1.originalPermissionForEntity(entity)),
+                permission: _this1.translatedPermissionLevel(permission)
+            });
+            _this1.props.withConfirm(partial(_this1.updatePermission, entity, permission), {
+                title: t('Change Permission'),
+                text: confirmText,
+                continueText: t('Confirm')
+            });
+        }), _define_property(_this1, "handleEntityPermissionChange", function(entity, permission) {
+            _this1.confirmPermissionChange(entity, permission);
+        }), _define_property(_this1, "toggleAccountShare", function(event) {
+            _this1.setState(function(prevState) {
+                return {
+                    accountPermission: _this1.isSharedWithAccount(prevState) ? REMOVED_ACCESS : READ_ONLY
+                };
+            });
+        }), _define_property(_this1, "handleAccountPermissionChange", function(e, param) {
+            var value = param.value;
+            return _this1.setState({
+                accountPermission: value
+            });
+        }), _define_property(_this1, "handleShareButtonRef", function(node) {
+            _this1.shareButtonRef = node;
+        }), _define_property(_this1, "handleChange", function(e, value) {
+            _this1.setState({
+                value: value
+            });
+        }), _define_property(_this1, "handleClear", function(e) {
+            e.stopPropagation();
+            _this1.handleChange(e, '');
+        }), _define_property(_this1, "renderSearchSection", function(searchType) {
+            if (_this1.props.bank.canEdit()) {
+                return /*#__PURE__*/ jsx(React.Fragment, null, /*#__PURE__*/ jsx(Grid, {
+                    vAlign: "bottom",
+                    colSpacing: "small"
+                }, /*#__PURE__*/ jsx(Grid.Row, null, /*#__PURE__*/ jsx(Grid.Col, null, /*#__PURE__*/ jsx(AsyncSearch, {
+                    getShareableCourses: _this1.props.getShareableCourses,
+                    getShareableUsers: _this1.props.getShareableUsers,
+                    getShareableSubaccounts: _this1.props.getShareableSubaccounts,
+                    minChars: _this1.props.minChars,
+                    onSelectionChange: _this1.handleSearchSelectionChange,
+                    searchType: searchType,
+                    selectedOption: _this1.state.searchSelection,
+                    selectionFilter: _this1.handleSearchFilter,
+                    searchLabel: t('Share With')
+                })), /*#__PURE__*/ jsx(Grid.Col, {
+                    width: "auto"
+                }, /*#__PURE__*/ jsx(SimpleSelect, {
+                    onChange: _this1.handleSearchPermissionChange,
+                    value: _this1.state.searchPermission,
+                    renderLabel: t('Access')
+                }, /*#__PURE__*/ jsx(SimpleSelect.Option, {
+                    id: "sharing-modal-search-section-select-option-can-view",
+                    value: READ_ONLY
+                }, t('Can view')), /*#__PURE__*/ jsx(SimpleSelect.Option, {
+                    id: "sharing-modal-search-section-select-option-can-edit",
+                    value: CAN_EDIT
+                }, t('Can edit')))), /*#__PURE__*/ jsx(Grid.Col, {
+                    width: "auto"
+                }, /*#__PURE__*/ jsx(Button, {
+                    "data-automation": "sdk-shared-bank-add-user-button",
+                    ref: _this1.handleShareButtonRef,
+                    onClick: _this1.handleShare,
+                    color: _this1.state.searchSelection.length ? 'success' : 'secondary'
+                }, t('Add'))))), /*#__PURE__*/ jsx("div", {
+                    css: _this1.props.styles.separator
+                }));
+            }
+        }), _define_property(_this1, "renderShareList", function() {
+            if (_this1.props.loading) {
+                return /*#__PURE__*/ jsx(View, {
+                    height: "12em",
+                    as: "div"
+                }, /*#__PURE__*/ jsx(View, {
+                    position: "absolute",
+                    as: "div",
+                    insetBlockEnd: "0"
+                }, /*#__PURE__*/ jsx(Spinner, {
+                    renderTitle: "Loading...",
+                    size: "small",
+                    fontSize: "medium"
+                })));
+            }
+            if (_this1.state.displayEntities.size > 0) {
+                return /*#__PURE__*/ jsx(View, {
+                    height: "12em",
+                    overflowY: "auto",
+                    overflowX: "hidden",
+                    as: "div",
+                    padding: "xx-small xx-small none"
+                }, /*#__PURE__*/ jsx(ShareList, {
+                    canEdit: _this1.props.bank.canEdit(),
+                    entities: _this1.state.displayEntities,
+                    onPermissionChange: _this1.handleEntityPermissionChange,
+                    onEntityRemove: _this1.handleEntityRemove,
+                    sharedBanks: _this1.props.sharedBanks
+                }), /*#__PURE__*/ jsx("div", null, _this1.renderShowMoreButton()));
+            }
+            return /*#__PURE__*/ jsx(View, {
+                height: "12em",
+                as: "div"
+            }, t('No results found'));
+        }), _define_property(_this1, "showMoreResult", function() {
+            _this1.setState({
+                startingPoint: _this1.state.startingPoint + _this1.props.limit
+            });
+        }), _define_property(_this1, "renderShowMoreButton", function() {
+            var shouldShowButton = _this1.state.startingPoint + _this1.props.limit < _this1.state.numOfResults;
+            if (!shouldShowButton) {
+                return null;
+            }
+            return /*#__PURE__*/ jsx(View, {
+                css: {
+                    display: shouldShowButton
+                },
+                background: "primary",
+                padding: "small none",
+                as: "div"
+            }, /*#__PURE__*/ jsx(CondensedButton, {
+                onClick: function(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    _this1.showMoreResult();
+                }
+            }, t('Show more')));
+        }), _define_property(_this1, "renderClearButton", function() {
+            if (!_this1.state.value.length || _this1.state.readOnly || _this1.state.disabled) return null;
+            return /*#__PURE__*/ jsx(IconButton, {
+                type: "button",
+                size: "small",
+                withBackground: false,
+                withBorder: false,
+                screenReaderLabel: "Clear search",
+                disabled: _this1.state.disabled || _this1.state.readOnly,
+                onClick: _this1.handleClear
+            }, /*#__PURE__*/ jsx(IconTroubleLine, null));
+        }), _define_property(_this1, "renderSharedSearch", function() {
+            return /*#__PURE__*/ jsx(View, {
+                margin: "none large none medium"
+            }, /*#__PURE__*/ jsx(TextInput, {
+                size: 'medium',
+                placeholder: t('Search...'),
+                value: _this1.state.value,
+                onChange: _this1.handleChange,
+                interaction: 'enabled',
+                inputRef: function(el) {
+                    return _this1.inputRef = el;
+                },
+                renderBeforeInput: /*#__PURE__*/ jsx(IconSearchLine, {
+                    inline: false
+                }),
+                renderAfterInput: _this1.renderClearButton(),
+                shouldNotWrap: true
+            }));
         });
-      }
-    });
-    // =============
-    //   HELPERS
-    // =============
-    _defineProperty(_this2, "handleTabChange", function (event, _ref) {
-      var index = _ref.index;
-      _this2.setState({
-        selectedTabIndex: index
-      });
-    });
-    _defineProperty(_this2, "modalDismissCleanup", function () {
-      var focusCreateBank = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      _this2.props.onDismiss();
-      if (_this2.props.modalTrigger && !focusCreateBank) {
-        _this2.props.modalTrigger.focus();
-      } else {
-        setTimeout(_this2.props.focusCreateBankButton, 100);
-      }
-      // removes the creator's temporary sharedBank record
-      _this2.props.removeSharedBank('-1');
-    });
-    _defineProperty(_this2, "numEntitiesToRemove", function () {
-      var permissions = Object.values(_this2.state.entitiesWithChangedPermission);
-      return permissions.reduce(function (count, val) {
-        return val === REMOVED_ACCESS ? count + 1 : count;
-      }, 0);
-    });
-    _defineProperty(_this2, "newEntitiesToSubmit", function () {
-      var newEntities = _this2.state.newEntities.filter(function (entity) {
-        return _this2.state.entitiesWithChangedPermission[entity.get('id')] !== REMOVED_ACCESS;
-      });
-
-      // special case if the creator tries to change their own permissions before
-      // first share, since they don't have a SharedBank record to update
-      var newCreatorPerm = _this2.state.entitiesWithChangedPermission['-1'];
-      if (newCreatorPerm && newCreatorPerm !== CAN_EDIT) {
-        var creatorSharedBank = _this2.props.sharedBanks.find(function (sharedBank) {
-          return sharedBank.get('id') == '-1';
-        });
-        newEntities = newEntities.push(Map(_objectSpread(_objectSpread({}, creatorSharedBank.toJS()), {}, {
-          permission: newCreatorPerm
-        })));
-      }
-      return newEntities;
-    });
-    _defineProperty(_this2, "isSharedWithAccount", function () {
-      var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this2.state;
-      return [READ_ONLY, CAN_EDIT].includes(state.accountPermission);
-    });
-    // =============
-    //   HANDLERS
-    // =============
-    _defineProperty(_this2, "handleDismiss", function (e) {
-      _this2.props.updateSharedCount(null);
-      _this2.modalDismissCleanup();
-    });
-    _defineProperty(_this2, "handleSubmit", function () {
-      // calls the sharedBank api with the new entities you shared the current bank with
-      var promises = [];
-      if (_this2.state.accountPermission !== _this2.props.bank.accountPermission) {
-        var updatedBank = _this2.props.bank.set('accountPermission', _this2.state.accountPermission);
-        promises.push(_this2.props.updateBank(updatedBank));
-      }
-      _this2.newEntitiesToSubmit().forEach(function (entity) {
-        _this2.props.onShare(entity.toJS());
-        promises.push(_this2.props.shareBank(_this2.sharedBankForEntity(entity), _this2.props.getUserInfo));
-      });
-
-      // call the update api if any shared bank permission was updated
-      Object.entries(_this2.state.entitiesWithChangedPermission).forEach(function (_ref2) {
-        var _ref3 = _slicedToArray(_ref2, 2),
-          sharedBankId = _ref3[0],
-          permission = _ref3[1];
-        var sharedBank = _this2.props.sharedBanks.find(function (sharedBank) {
-          return sharedBank.get('id') === sharedBankId;
-        });
-        if (sharedBank && sharedBank.get('permission') !== permission && sharedBankId != '-1') {
-          promises.push(_this2.props.updateSharedBankPermission(_this2.props.bank.id, sharedBankId, permission));
-        }
-      });
-
-      // waits till all the calls to the shareBank and updateSharedBank apis have completed
-      Promise.all(promises).then(function (values) {
-        // calls getBank for the current bank to update the sharedCount
-        _this2.props.getBank(_this2.props.bank.id);
-      });
-      _this2.setState({
-        newEntities: List()
-      });
-      _this2.modalDismissCleanup(!!_this2.numEntitiesToRemove());
-    });
-    _defineProperty(_this2, "handleSearchSelectionChange", function (searchSelection) {
-      _this2.setState({
-        searchSelection: searchSelection
-      });
-    });
-    _defineProperty(_this2, "updateEntitiesCount", function () {
-      // state.shares is a list containing everyone in the list,
-      _this2.props.updateSharedCount(_this2.state.shares.size - _this2.numEntitiesToRemove());
-    });
-    _defineProperty(_this2, "originalPermissionForEntity", function (entity) {
-      var originalEntity = _this2.props.sharedBanks.find(function (sb) {
-        return sb.get('id') == entity.get('id');
-      }) || Map();
-      return originalEntity.get('permission', CAN_EDIT);
-    });
-    _defineProperty(_this2, "handleEntityRemove", function (entity, undoRemove) {
-      _this2.confirmPermissionChange(entity, REMOVED_ACCESS);
-    });
-    _defineProperty(_this2, "handleSearchPermissionChange", function (e, _ref4) {
-      var value = _ref4.value;
-      _this2.setState({
-        searchPermission: value
-      });
-    });
-    _defineProperty(_this2, "handleSearchFilter", function (searchResults) {
-      return searchResults.filter(function (result) {
-        return !_this2.state.shares.some(function (entity) {
-          return entity.get('entityId') === result.uuid;
-        }) && (result.uuid !== _this2.props.bank.creator || _this2.props.bank.sharedCount > 0);
-      });
-    });
-    _defineProperty(_this2, "handleShare", function () {
-      var newEntities = List(_this2.state.searchSelection.map(function (entity) {
-        return Map({
-          id: entity.uuid,
-          entityType: entity.entityType,
-          entityId: entity.uuid,
-          title: entity.fullName || entity.title || entity.name,
-          avatar: entity.avatar,
-          email: entity.email,
-          permission: _this2.state.searchPermission
-        });
-      }));
-      newEntities.forEach(function (entity) {
-        _this2.props.onShare(entity.toJS());
-        _this2.props.shareBank(_this2.sharedBankForEntity(entity), _this2.props.getUserInfo);
-      });
-      _this2.setState({
-        searchSelection: []
-      });
-    });
-    _defineProperty(_this2, "updatePermission", /*#__PURE__*/function () {
-      var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(entity, permission) {
-        var _this2$props, updateSharedBankPermission, getBank, bank;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              _this2$props = _this2.props, updateSharedBankPermission = _this2$props.updateSharedBankPermission, getBank = _this2$props.getBank, bank = _this2$props.bank;
-              _context.next = 3;
-              return updateSharedBankPermission(bank.id, entity.get('id'), permission);
-            case 3:
-              getBank(bank.id); // make sure the user still has access to the bank
-            case 4:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      return function (_x, _x2) {
-        return _ref5.apply(this, arguments);
-      };
-    }());
-    _defineProperty(_this2, "translatedPermissionLevel", function (permission) {
-      return _defineProperty(_defineProperty({}, CAN_EDIT, t('edit')), READ_ONLY, t('view'))[permission];
-    });
-    _defineProperty(_this2, "confirmPermissionChange", function (entity, permission) {
-      var confirmText = permission === REMOVED_ACCESS ? t('You are about to remove { accessLevel } access for { entityTitle } to this bank.', {
-        accessLevel: _this2.translatedPermissionLevel(_this2.originalPermissionForEntity(entity)),
-        entityTitle: entity.get('title')
-      }) : t('You are about to change access level for { entityTitle } from { originalAccessLevel } to { permission }.', {
-        entityTitle: entity.get('title'),
-        originalAccessLevel: _this2.translatedPermissionLevel(_this2.originalPermissionForEntity(entity)),
-        permission: _this2.translatedPermissionLevel(permission)
-      });
-      _this2.props.withConfirm(partial(_this2.updatePermission, entity, permission), {
-        title: t('Change Permission'),
-        text: confirmText,
-        continueText: t('Confirm')
-      });
-    });
-    _defineProperty(_this2, "handleEntityPermissionChange", function (entity, permission) {
-      _this2.confirmPermissionChange(entity, permission);
-    });
-    _defineProperty(_this2, "toggleAccountShare", function (event) {
-      _this2.setState(function (prevState) {
-        return {
-          accountPermission: _this2.isSharedWithAccount(prevState) ? REMOVED_ACCESS : READ_ONLY
-        };
-      });
-    });
-    _defineProperty(_this2, "handleAccountPermissionChange", function (e, _ref6) {
-      var value = _ref6.value;
-      return _this2.setState({
-        accountPermission: value
-      });
-    });
-    _defineProperty(_this2, "handleShareListRef", function (node) {
-      _this2.shareListRef = node;
-    });
-    _defineProperty(_this2, "handleShareButtonRef", function (node) {
-      _this2.shareButtonRef = node;
-    });
-    _defineProperty(_this2, "renderSearchSection", function (searchType) {
-      if (_this2.props.bank.canEdit()) {
-        return jsx(React.Fragment, null, jsx(Grid, {
-          vAlign: "bottom",
-          colSpacing: "small"
-        }, jsx(Grid.Row, null, jsx(Grid.Col, null, jsx(AsyncSearch, {
-          getShareableCourses: _this2.props.getShareableCourses,
-          getShareableUsers: _this2.props.getShareableUsers,
-          getShareableSubaccounts: _this2.props.getShareableSubaccounts,
-          minChars: _this2.props.minChars,
-          onSelectionChange: _this2.handleSearchSelectionChange,
-          searchType: searchType,
-          selectedOption: _this2.state.searchSelection,
-          selectionFilter: _this2.handleSearchFilter
-        })), jsx(Grid.Col, {
-          width: "auto"
-        }, jsx(SimpleSelect, {
-          onChange: _this2.handleSearchPermissionChange,
-          value: _this2.state.searchPermission,
-          renderLabel: t('Access')
-        }, jsx(SimpleSelect.Option, {
-          id: "sharing-modal-search-section-select-option-can-view",
-          value: READ_ONLY
-        }, t('Can view')), jsx(SimpleSelect.Option, {
-          id: "sharing-modal-search-section-select-option-can-edit",
-          value: CAN_EDIT
-        }, t('Can edit')))), jsx(Grid.Col, {
-          width: "auto"
-        }, jsx(Button, {
-          "data-automation": "sdk-shared-bank-add-user-button",
-          ref: _this2.handleShareButtonRef,
-          onClick: _this2.handleShare,
-          color: _this2.state.searchSelection.length ? 'success' : 'secondary'
-        }, t('Add'))))), jsx("div", {
-          css: _this2.props.styles.separator
-        }));
-      }
-    });
-    _defineProperty(_this2, "renderShareList", function (entities) {
-      return jsx(ShareList, {
-        canEdit: _this2.props.bank.canEdit(),
-        entities: entities,
-        onPermissionChange: _this2.handleEntityPermissionChange,
-        onEntityRemove: _this2.handleEntityRemove,
-        sharedBanks: _this2.props.sharedBanks
-      });
-    });
-    return _this2;
-  }
-  _inherits(SharingModalPresenter, _Component);
-  return _createClass(SharingModalPresenter, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.setState({
-        accountPermission: this.props.bank.accountPermission,
-        shares: this.props.sharedBanks
-      });
-    }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      this.setState({
-        accountPermission: nextProps.bank.accountPermission,
-        shares: nextProps.sharedBanks
-      });
+        _this1.debouncedSearch = debounce(function() {
+            _this1.setState({
+                searchValue: _this1.state.value
+            });
+        }, 300);
+        _this1.debouncedStopLoading = debounce(function() {
+            if (_this1.props.loading != false) _this1.props.changeSharedBankLoading(false);
+        }, 300);
+        return _this;
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      if (this.state.accountPermission !== prevState.accountPermission && this.state.accountPermission !== this.props.bank.accountPermission) {
-        var updatedBank = this.props.bank.set('accountPermission', this.state.accountPermission);
-        this.props.updateBank(updatedBank, false);
-      }
-    }
-  }, {
-    key: "sharedBankForEntity",
-    value: function sharedBankForEntity(entity) {
-      return {
-        entityType: entity.get('entityType'),
-        entityId: entity.get('entityId'),
-        title: entity.get('title'),
-        bankId: this.props.bank.id,
-        permission: entity.get('permission')
-      };
-    }
-  }, {
-    key: "renderRootAccountSharing",
-    value:
-    // =============
-    //   RENDERING
-    // =============
-
-    function renderRootAccountSharing() {
-      var _this$props$currentUs;
-      return jsx(RootAccountSharing, {
-        accountName: (_this$props$currentUs = this.props.currentUser) === null || _this$props$currentUs === void 0 ? void 0 : _this$props$currentUs.account_name,
-        onShareChange: this.toggleAccountShare,
-        onShareTypeChange: this.handleAccountPermissionChange,
-        accountPermission: this.state.accountPermission
-      });
-    }
-  }, {
-    key: "renderSubaccountSharingEnabledEntities",
-    value: function renderSubaccountSharingEnabledEntities(existingPeople, existingCourses, existingAccounts) {
-      var currentUser = this.props.currentUser;
-      return jsx(View, {
-        as: "div",
-        "data-automation": "sdk-shared-bank-user-list"
-      }, jsx(Tabs, {
-        onRequestTabChange: this.handleTabChange
-      }, jsx(Tabs.Panel, {
-        renderTitle: t('People ({ peopleCount })', {
-          peopleCount: existingPeople.size
-        }),
-        isSelected: this.state.selectedTabIndex === 0,
-        padding: "large small small small"
-      }, this.renderSearchSection(SHARED_WITH_USER), jsx(Text, {
-        as: "div",
-        weight: "bold",
-        lineHeight: "double"
-      }, t('Currently shared with')), this.renderShareList(existingPeople)), jsx(Tabs.Panel, {
-        renderTitle: t('Courses ({ coursesCount })', {
-          coursesCount: existingCourses.size
-        }),
-        isSelected: this.state.selectedTabIndex === 1,
-        padding: "large small small small"
-      }, this.renderSearchSection(SHARED_WITH_COURSE), jsx(Text, {
-        as: "div",
-        weight: "bold",
-        lineHeight: "double"
-      }, t('Currently shared with')), this.renderShareList(existingCourses)), ((currentUser === null || currentUser === void 0 ? void 0 : currentUser.bank_admin) || (currentUser === null || currentUser === void 0 ? void 0 : currentUser.can_share_banks_with_subaccounts)) && jsx(Tabs.Panel, {
-        renderTitle: t('Accounts ({ accountsCount })', {
-          accountsCount: existingAccounts.size
-        }),
-        isSelected: this.state.selectedTabIndex === 2,
-        padding: "large small small small"
-      }, (currentUser === null || currentUser === void 0 ? void 0 : currentUser.bank_admin) && this.renderRootAccountSharing(), (currentUser === null || currentUser === void 0 ? void 0 : currentUser.can_share_banks_with_subaccounts) && this.renderSearchSection(SHARED_WITH_ACCOUNT), jsx(Text, {
-        as: "div",
-        weight: "bold",
-        lineHeight: "double"
-      }, t('Currently shared with')), this.renderShareList(existingAccounts))));
-    }
-  }, {
-    key: "renderOriginalDesignEntities",
-    value: function renderOriginalDesignEntities(existingPeople, existingCourses) {
-      return jsx("div", {
-        className: "fs-mask"
-      }, jsx(Text, {
-        as: "div",
-        weight: "bold"
-      }, t('Currently shared with')), jsx(View, {
-        as: "div",
-        "data-automation": "sdk-shared-bank-user-list"
-      }, !this.state.newEntities.isEmpty() && jsx(View, {
-        as: "div",
-        margin: "0 0 medium 0"
-      }, this.renderShareList(this.state.newEntities)), jsx(Tabs, {
-        onRequestTabChange: this.handleTabChange
-      }, jsx(Tabs.Panel, {
-        renderTitle: t('People ({ peopleCount })', {
-          peopleCount: existingPeople.size
-        }),
-        isSelected: this.state.selectedTabIndex === 0,
-        padding: "large small small small"
-      }, this.renderShareList(existingPeople)), !existingCourses.isEmpty() && jsx(Tabs.Panel, {
-        renderTitle: t('Courses ({ coursesCount })', {
-          coursesCount: existingCourses.size
-        }),
-        isSelected: this.state.selectedTabIndex === 1,
-        padding: "large small small small"
-      }, this.renderShareList(existingCourses)))));
-    }
-  }, {
-    key: "renderEntitiesSection",
-    value: function renderEntitiesSection() {
-      var newEntityIds = this.state.newEntities.map(function (e) {
-        return e.get('id');
-      });
-      var existingShares = this.state.shares.filterNot(function (s) {
-        return newEntityIds.includes(s.get('id'));
-      });
-      var existingPeople = existingShares.filter(function (s) {
-        return s.get('entityType') === SHARED_WITH_USER;
-      });
-      var existingCourses = existingShares.filter(function (s) {
-        return s.get('entityType') === SHARED_WITH_COURSE;
-      });
-      var existingAccounts = existingShares.filter(function (s) {
-        return s.get('entityType') === SHARED_WITH_ACCOUNT;
-      });
-      return this.renderSubaccountSharingEnabledEntities(existingPeople, existingCourses, existingAccounts);
-    }
-  }, {
-    key: "renderFooter",
-    value: function renderFooter() {
-      return jsx(Button, {
-        color: "primary",
-        margin: "0 x-small 0 0",
-        onClick: this.handleDismiss
-      }, t('Close'));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return jsx(Modal, {
-        open: this.props.isOpen,
-        onDismiss: this.handleDismiss,
-        size: "medium",
-        label: t('Sharing'),
-        shouldCloseOnDocumentClick: true,
-        onOpen: this.checkForSharedBanks
-      }, jsx(ModalHeader, null, jsx(Heading, null, this.props.bank.title), jsx(CloseButton, {
-        onClick: this.handleDismiss,
-        placement: "end",
-        offset: "medium",
-        screenReaderLabel: t('Close')
-      })), jsx(ModalBody, null, this.state.shares.size >= 0 ? this.renderEntitiesSection() : jsx(Spinner, null)), jsx(ModalFooter, null, this.renderFooter()));
-    }
-  }]);
-}(Component), _defineProperty(_SharingModalPresenter, "displayName", 'SharingModalPresenter'), _defineProperty(_SharingModalPresenter, "componentId", "Quizzes".concat(_SharingModalPresenter.displayName)), _defineProperty(_SharingModalPresenter, "propTypes", {
-  appContainer: CustomPropTypes.selectors.isRequired,
-  bank: ImmutablePropTypes.record.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
-  }),
-  focusCreateBankButton: PropTypes.func.isRequired,
-  getBank: PropTypes.func.isRequired,
-  getShareableCourses: PropTypes.func.isRequired,
-  getCourseInfo: PropTypes.func.isRequired,
-  getShareableUsers: PropTypes.func.isRequired,
-  getSharedBanks: PropTypes.func.isRequired,
-  getUserInfo: PropTypes.func.isRequired,
-  getShareableSubaccounts: PropTypes.func.isRequired,
-  getSubaccountInfo: PropTypes.func.isRequired,
-  isOpen: PropTypes.bool,
-  minChars: PropTypes.number,
-  modalTrigger: PropTypes.node,
-  // html or react element that triggered this Modal
-  onDismiss: PropTypes.func,
-  onShare: PropTypes.func,
-  removeSharedBank: PropTypes.func.isRequired,
-  shareBank: PropTypes.func.isRequired,
-  sharedBanks: ImmutablePropTypes.list,
-  updateBank: PropTypes.func.isRequired,
-  updateSharedBankPermission: PropTypes.func.isRequired,
-  updateSharedCount: PropTypes.func,
-  withConfirm: PropTypes.func.isRequired,
-  styles: PropTypes.object
-}), _defineProperty(_SharingModalPresenter, "defaultProps", {
-  bank: null,
-  currentUser: null,
-  isOpen: false,
-  minChars: void 0,
-  modalTrigger: null,
-  onDismiss: noop,
-  onShare: function onShare() {},
-  sharedBanks: List(),
-  updateSharedCount: Function.prototype
-}), _SharingModalPresenter)) || _class);
-export default SharingModalPresenter;
+    _create_class(SharingModalPresenter, [
+        {
+            key: "componentDidMount",
+            value: function componentDidMount() {
+                this.setState({
+                    accountPermission: this.props.bank.accountPermission,
+                    shares: this.props.sharedBanks
+                });
+            }
+        },
+        {
+            key: "UNSAFE_componentWillReceiveProps",
+            value: function UNSAFE_componentWillReceiveProps(nextProps) {
+                this.setState({
+                    accountPermission: nextProps.bank.accountPermission,
+                    shares: nextProps.sharedBanks
+                });
+            }
+        },
+        {
+            key: "componentDidUpdate",
+            value: function componentDidUpdate(prevProps, prevState) {
+                if (this.state.accountPermission !== prevState.accountPermission && this.state.accountPermission !== this.props.bank.accountPermission) {
+                    var updatedBank = this.props.bank.set('accountPermission', this.state.accountPermission);
+                    this.props.updateBank(updatedBank, false);
+                }
+                if (prevState.value !== this.state.value) {
+                    if (this.props.loading == false) this.props.changeSharedBankLoading(true);
+                    this.setState({
+                        startingPoint: 0
+                    });
+                    this.debouncedSearch();
+                }
+                if (prevState.searchValue !== this.state.searchValue || prevState.startingPoint !== this.state.startingPoint || prevState.selectedTabIndex !== this.state.selectedTabIndex || prevState.shares !== this.state.shares) {
+                    this.createFilteredList();
+                }
+            }
+        },
+        {
+            key: "sharedBankForEntity",
+            value: function sharedBankForEntity(entity) {
+                return {
+                    entityType: entity.get('entityType'),
+                    entityId: entity.get('entityId'),
+                    title: entity.get('title'),
+                    bankId: this.props.bank.id,
+                    permission: entity.get('permission')
+                };
+            }
+        },
+        {
+            // =============
+            //   RENDERING
+            // =============
+            key: "renderRootAccountSharing",
+            value: function renderRootAccountSharing() {
+                var _this_props_currentUser;
+                return /*#__PURE__*/ jsx(RootAccountSharing, {
+                    accountName: (_this_props_currentUser = this.props.currentUser) === null || _this_props_currentUser === void 0 ? void 0 : _this_props_currentUser.account_name,
+                    onShareChange: this.toggleAccountShare,
+                    onShareTypeChange: this.handleAccountPermissionChange,
+                    accountPermission: this.state.accountPermission
+                });
+            }
+        },
+        {
+            key: "renderSubaccountSharingEnabledEntities",
+            value: function renderSubaccountSharingEnabledEntities(existingPeople, existingCourses, existingAccounts) {
+                var currentUser = this.props.currentUser;
+                return /*#__PURE__*/ jsx(View, {
+                    as: "div",
+                    "data-automation": "sdk-shared-bank-user-list"
+                }, /*#__PURE__*/ jsx(Tabs, {
+                    onRequestTabChange: this.handleTabChange
+                }, /*#__PURE__*/ jsx(Tabs.Panel, {
+                    renderTitle: t('People ({ peopleCount })', {
+                        peopleCount: existingPeople.size
+                    }),
+                    isSelected: this.state.selectedTabIndex === 0,
+                    padding: "large small small small"
+                }, this.renderSearchSection(SHARED_WITH_USER), /*#__PURE__*/ jsx(Text, {
+                    as: "div",
+                    weight: "bold",
+                    lineHeight: "double"
+                }, t('Currently shared with')), this.renderSharedSearch(), this.renderShareList()), /*#__PURE__*/ jsx(Tabs.Panel, {
+                    renderTitle: t('Courses ({ coursesCount })', {
+                        coursesCount: existingCourses.size
+                    }),
+                    isSelected: this.state.selectedTabIndex === 1,
+                    padding: "large small small small"
+                }, this.renderSearchSection(SHARED_WITH_COURSE), /*#__PURE__*/ jsx(Text, {
+                    as: "div",
+                    weight: "bold",
+                    lineHeight: "double"
+                }, t('Currently shared with')), this.renderSharedSearch(), this.renderShareList()), ((currentUser === null || currentUser === void 0 ? void 0 : currentUser.bank_admin) || (currentUser === null || currentUser === void 0 ? void 0 : currentUser.can_share_banks_with_subaccounts)) && /*#__PURE__*/ jsx(Tabs.Panel, {
+                    renderTitle: t('Accounts ({ accountsCount })', {
+                        accountsCount: existingAccounts.size
+                    }),
+                    isSelected: this.state.selectedTabIndex === 2,
+                    padding: "large small small small"
+                }, (currentUser === null || currentUser === void 0 ? void 0 : currentUser.bank_admin) && this.renderRootAccountSharing(), (currentUser === null || currentUser === void 0 ? void 0 : currentUser.can_share_banks_with_subaccounts) && this.renderSearchSection(SHARED_WITH_ACCOUNT), /*#__PURE__*/ jsx(Text, {
+                    as: "div",
+                    weight: "bold",
+                    lineHeight: "double"
+                }, t('Currently shared with')), this.renderSharedSearch(), this.renderShareList())));
+            }
+        },
+        {
+            key: "renderEntitiesSection",
+            value: function renderEntitiesSection() {
+                var newEntityIds = this.state.newEntities.map(function(e) {
+                    return e.get('id');
+                });
+                var existingShares = this.state.shares.filterNot(function(s) {
+                    return newEntityIds.includes(s.get('id'));
+                });
+                var existingPeople = existingShares.filter(function(s) {
+                    return s.get('entityType') === SHARED_WITH_USER;
+                });
+                var existingCourses = existingShares.filter(function(s) {
+                    return s.get('entityType') === SHARED_WITH_COURSE;
+                });
+                var existingAccounts = existingShares.filter(function(s) {
+                    return s.get('entityType') === SHARED_WITH_ACCOUNT;
+                });
+                return this.renderSubaccountSharingEnabledEntities(existingPeople, existingCourses, existingAccounts);
+            }
+        },
+        {
+            key: "renderFooter",
+            value: function renderFooter() {
+                return /*#__PURE__*/ jsx(Button, {
+                    color: "primary",
+                    margin: "0 x-small 0 0",
+                    onClick: this.handleDismiss
+                }, t('Close'));
+            }
+        },
+        {
+            key: "render",
+            value: function render() {
+                return /*#__PURE__*/ jsx(Modal, {
+                    open: this.props.isOpen,
+                    onDismiss: this.handleDismiss,
+                    size: "medium",
+                    label: t('Sharing'),
+                    shouldCloseOnDocumentClick: true,
+                    onOpen: this.checkForSharedBanks
+                }, /*#__PURE__*/ jsx(ModalHeader, null, /*#__PURE__*/ jsx(Heading, null, this.props.bank.title), /*#__PURE__*/ jsx(CloseButton, {
+                    onClick: this.handleDismiss,
+                    placement: "end",
+                    offset: "medium",
+                    screenReaderLabel: t('Close')
+                })), /*#__PURE__*/ jsx(ModalBody, null, this.state.shares.size >= 0 ? this.renderEntitiesSection() : /*#__PURE__*/ jsx(Spinner, null)), /*#__PURE__*/ jsx(ModalFooter, null, this.renderFooter()));
+            }
+        }
+    ]);
+    return SharingModalPresenter;
+}(Component);
+_define_property(SharingModalPresenter, "displayName", 'SharingModalPresenter');
+_define_property(SharingModalPresenter, "componentId", "Quizzes".concat(SharingModalPresenter.displayName));
+_define_property(SharingModalPresenter, "propTypes", {
+    appContainer: CustomPropTypes.selectors.isRequired,
+    bank: ImmutablePropTypes.record.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
+    }),
+    focusCreateBankButton: PropTypes.func.isRequired,
+    getBank: PropTypes.func.isRequired,
+    getShareableCourses: PropTypes.func.isRequired,
+    getCourseInfo: PropTypes.func.isRequired,
+    getShareableUsers: PropTypes.func.isRequired,
+    getSharedBanks: PropTypes.func.isRequired,
+    getUserInfo: PropTypes.func.isRequired,
+    getShareableSubaccounts: PropTypes.func.isRequired,
+    getSubaccountInfo: PropTypes.func.isRequired,
+    isOpen: PropTypes.bool,
+    minChars: PropTypes.number,
+    modalTrigger: PropTypes.node,
+    onDismiss: PropTypes.func,
+    onShare: PropTypes.func,
+    removeSharedBank: PropTypes.func.isRequired,
+    shareBank: PropTypes.func.isRequired,
+    sharedBanks: ImmutablePropTypes.list,
+    updateBank: PropTypes.func.isRequired,
+    updateSharedBankPermission: PropTypes.func.isRequired,
+    updateSharedCount: PropTypes.func,
+    withConfirm: PropTypes.func.isRequired,
+    styles: PropTypes.object,
+    limit: PropTypes.number,
+    loading: PropTypes.bool,
+    changeSharedBankLoading: PropTypes.func.isRequired
+});
+_define_property(SharingModalPresenter, "defaultProps", {
+    bank: null,
+    currentUser: null,
+    isOpen: false,
+    minChars: void 0,
+    modalTrigger: null,
+    onDismiss: noop,
+    onShare: function onShare() {},
+    sharedBanks: List(),
+    updateSharedCount: Function.prototype,
+    limit: 10,
+    loading: false
+});
+SharingModalPresenter = _ts_decorate([
+    withStyleOverrides(generateStyle, generateComponentTheme)
+], SharingModalPresenter);
+export default SharingModalPresenter;