studiokit-scaffolding-js 5.0.0 → 5.1.0-next.1.2

package/lib/components/HOC/CollectionComponent.d.ts

@@ -1,14 +1,14 @@
 import React, { ComponentClass, ComponentType } from 'react';
 import { RouteComponentProps } from 'react-router';
 import { MODEL_STATUS } from '../../constants/modelStatus';
-import { BaseReduxState, Model } from '../../types';
-import { CollectionCommonProps, CollectionCommonState, CollectionCreateParams, CollectionDeleteParams, CollectionLoadParams, CollectionMethodConfiguration, CollectionMethods, CollectionReduxResponse, CollectionUpdateParams } from '../../types/Collection';
+import { BaseReduxState, Model, ModelCollection } from '../../types';
+import { CollectionCommonProps, CollectionCommonState, CollectionCreateParams, CollectionDeleteParams, CollectionDerivedProps, CollectionLoadParams, CollectionMethodConfiguration, CollectionMethods, CollectionReduxResponse, CollectionUpdateParams } from '../../types/Collection';
 import { GuidComponentWrappedProps } from './GuidComponent';
 /** The props passed into `CollectionComponent` from the user and other HOCs. */
 export interface CollectionComponentProps<TModel extends Model> extends CollectionCommonProps, GuidComponentWrappedProps, RouteComponentProps, CollectionReduxResponse<TModel> {
 }
 /** The props passed down to the `WrappedComponent`. */
-export interface CollectionComponentWrappedProps<TModel extends Model> extends Omit<CollectionComponentProps<TModel>, keyof RouteComponentProps>, CollectionMethods, CollectionCommonState {
+export interface CollectionComponentWrappedProps<TModel extends Model> extends Omit<CollectionComponentProps<TModel>, keyof RouteComponentProps>, CollectionDerivedProps<TModel>, CollectionMethods, CollectionCommonState {
 }
 export declare function configureCollectionComponent<TModel extends Model, TOwnProps extends {}>(WrappedComponent: ComponentType<TOwnProps & CollectionComponentWrappedProps<TModel>>, LoaderComponent?: ComponentType): {
     new (props: TOwnProps & CollectionComponentProps<TModel>): {
@@ -22,6 +22,7 @@ export declare function configureCollectionComponent<TModel extends Model, TOwnP
         create: (params: CollectionCreateParams) => void;
         update: (params: CollectionUpdateParams) => void;
         delete: (params: CollectionDeleteParams) => void;
+        getModelArray: import("memoize-one").MemoizedFn<(model: ModelCollection<TModel>, guid?: string | undefined) => TModel[]>;
         render(): JSX.Element;
         context: any;
         setState<K extends "modelStatus" | "previousModelStatus" | "fetchingId">(state: CollectionCommonState | ((prevState: Readonly<CollectionCommonState>, props: Readonly<TOwnProps & CollectionComponentProps<TModel>>) => CollectionCommonState | Pick<CollectionCommonState, K> | null) | Pick<CollectionCommonState, K> | null, callback?: (() => void) | undefined): void;

package/lib/components/HOC/CollectionComponent.js

@@ -58,6 +58,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.configureMapStateToProps = exports.configureCollectionComponent = void 0;
+var memoize_one_1 = __importDefault(require("memoize-one"));
 var react_1 = __importStar(require("react"));
 var react_redux_1 = require("react-redux");
 var react_router_1 = require("react-router");
@@ -110,6 +111,7 @@ function configureCollectionComponent(WrappedComponent, LoaderComponent) {
             _this.delete = function (params) {
                 collection_1.deleteItemFromCollection(_this.getCollectionMethodConfig(), params);
             };
+            _this.getModelArray = memoize_one_1.default(function (model, guid) { return model_1.getModelArray(model, guid); });
             _this.state = {
                 // initializing until model is loaded
                 modelStatus: modelStatus_1.MODEL_STATUS.UNINITIALIZED,
@@ -139,7 +141,7 @@ function configureCollectionComponent(WrappedComponent, LoaderComponent) {
             if (modelStatus === modelStatus_1.MODEL_STATUS.UNINITIALIZED) {
                 return react_1.default.createElement(LoaderComponent, null);
             }
-            return (react_1.default.createElement(WrappedComponent, __assign({}, otherProps, { modelStatus: modelStatus, previousModelStatus: previousModelStatus, fetchingId: fetchingId, load: this.load, stopPeriodicLoad: this.stopPeriodicLoad, create: this.create, update: this.update, delete: this.delete })));
+            return (react_1.default.createElement(WrappedComponent, __assign({}, otherProps, { modelArray: this.getModelArray(this.props.model, this.props.guid), modelStatus: modelStatus, previousModelStatus: previousModelStatus, fetchingId: fetchingId, load: this.load, stopPeriodicLoad: this.stopPeriodicLoad, create: this.create, update: this.update, delete: this.delete })));
         };
         return CollectionComponent;
     }(react_1.Component));

package/lib/components/HOC/CollectionFirstItemComponent.d.ts

@@ -1,8 +1,8 @@
 import React, { ComponentClass, ComponentType } from 'react';
-import { CollectionItemReduxResponse, Model } from '../../types';
+import { CollectionItemDerivedProps, CollectionItemReduxResponse, Model, ModelCollection } from '../../types';
 import { CollectionComponentWrappedProps } from './CollectionComponent';
 /** The props passed into `WrappedComponent`. */
-export interface CollectionFirstItemComponentWrappedProps<TModel extends Model> extends Omit<CollectionComponentWrappedProps<TModel>, 'model'>, CollectionItemReduxResponse<TModel> {
+export interface CollectionFirstItemComponentWrappedProps<TModel extends Model> extends Omit<CollectionComponentWrappedProps<TModel>, 'model'>, CollectionItemReduxResponse<TModel>, CollectionItemDerivedProps<TModel> {
 }
 /**
  * HOC meant to pass the first collection item to the wrapped component as its model.
@@ -10,6 +10,8 @@ export interface CollectionFirstItemComponentWrappedProps<TModel extends Model>
  */
 export declare function configureCollectionFirstItemComponent<TModel extends Model, TOwnProps extends {}>(WrappedComponent: ComponentType<TOwnProps & CollectionFirstItemComponentWrappedProps<TModel>>): {
     new (props: (TOwnProps & CollectionComponentWrappedProps<TModel>) | Readonly<TOwnProps & CollectionComponentWrappedProps<TModel>>): {
+        getModelArray: import("memoize-one").MemoizedFn<(model: ModelCollection<TModel>, guid?: string | undefined) => TModel[]>;
+        getModelMinusRelations: import("memoize-one").MemoizedFn<(model: TModel) => Partial<TModel>>;
         getFirstItem: () => TModel;
         render(): JSX.Element;
         context: any;
@@ -36,6 +38,8 @@ export declare function configureCollectionFirstItemComponent<TModel extends Mod
         UNSAFE_componentWillUpdate?(nextProps: Readonly<TOwnProps & CollectionComponentWrappedProps<TModel>>, nextState: Readonly<{}>, nextContext: any): void;
     };
     new (props: TOwnProps & CollectionComponentWrappedProps<TModel>, context: any): {
+        getModelArray: import("memoize-one").MemoizedFn<(model: ModelCollection<TModel>, guid?: string | undefined) => TModel[]>;
+        getModelMinusRelations: import("memoize-one").MemoizedFn<(model: TModel) => Partial<TModel>>;
         getFirstItem: () => TModel;
         render(): JSX.Element;
         context: any;

package/lib/components/HOC/CollectionFirstItemComponent.js

@@ -49,8 +49,12 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
             r[k] = a[j];
     return r;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.configureCollectionFirstItemComponent = void 0;
+var memoize_one_1 = __importDefault(require("memoize-one"));
 var react_1 = __importStar(require("react"));
 var model_1 = require("../../utils/model");
 /**
@@ -62,8 +66,11 @@ function configureCollectionFirstItemComponent(WrappedComponent) {
         __extends(CollectionFirstItemComponent, _super);
         function CollectionFirstItemComponent() {
             var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.getModelArray = memoize_one_1.default(function (model, guid) { return model_1.getModelArray(model, guid); });
+            _this.getModelMinusRelations = memoize_one_1.default(function (model) { return model_1.getModelMinusRelations(model); });
             _this.getFirstItem = function () {
-                var _a = _this.props, model = _a.model, modelArray = _a.modelArray, guid = _a.guid;
+                var _a = _this.props, model = _a.model, guid = _a.guid;
+                var modelArray = _this.getModelArray(model, guid);
                 var singleItem = modelArray.length > 0
                     ? modelArray[0]
                     : model[guid]
@@ -76,7 +83,7 @@ function configureCollectionFirstItemComponent(WrappedComponent) {
         CollectionFirstItemComponent.prototype.render = function () {
             var pathParams = this.props.pathParams;
             var firstItem = this.getFirstItem();
-            var modelMinusRelations = model_1.getModelMinusRelations(firstItem);
+            var modelMinusRelations = this.getModelMinusRelations(firstItem);
             var p = __spreadArrays(pathParams);
             if (firstItem.id) {
                 p.push(firstItem.id.toString());

package/lib/components/HOC/CollectionItemComponent.d.ts

@@ -1,13 +1,13 @@
 import React, { ComponentClass, ComponentType } from 'react';
 import { RouteComponentProps } from 'react-router';
 import { MODEL_STATUS } from '../../constants/modelStatus';
-import { BaseReduxState, CollectionCommonProps, CollectionCommonState, CollectionCreateParams, CollectionItemDeleteParams, CollectionItemLoadParams, CollectionItemMethods, CollectionItemReduxResponse, CollectionItemUpdateParams, CollectionMethodConfiguration, Model } from '../../types';
+import { BaseReduxState, CollectionCommonProps, CollectionCommonState, CollectionCreateParams, CollectionItemDeleteParams, CollectionItemDerivedProps, CollectionItemLoadParams, CollectionItemMethods, CollectionItemReduxResponse, CollectionItemUpdateParams, CollectionMethodConfiguration, Model } from '../../types';
 import { GuidComponentWrappedProps } from './GuidComponent';
 /** The props passed into `CollectionItemComponent` from the user and other HOCs. */
 export interface CollectionItemComponentProps<TModel extends Model> extends CollectionCommonProps, GuidComponentWrappedProps, RouteComponentProps, CollectionItemReduxResponse<TModel> {
 }
 /** The props passed down to the `WrappedComponent`. */
-export interface CollectionItemComponentWrappedProps<TModel extends Model> extends Omit<CollectionItemComponentProps<TModel>, keyof RouteComponentProps>, CollectionItemMethods, CollectionCommonState {
+export interface CollectionItemComponentWrappedProps<TModel extends Model> extends Omit<CollectionItemComponentProps<TModel>, keyof RouteComponentProps>, CollectionItemDerivedProps<TModel>, CollectionItemMethods, CollectionCommonState {
 }
 export declare function configureCollectionItemComponent<TModel extends Model, TOwnProps extends {}>(WrappedComponent: ComponentType<TOwnProps & CollectionItemComponentWrappedProps<TModel>>, LoaderComponent?: ComponentType): {
     new (props: TOwnProps & CollectionItemComponentProps<TModel>): {
@@ -20,6 +20,7 @@ export declare function configureCollectionItemComponent<TModel extends Model, T
         create: (params: CollectionCreateParams) => void;
         update: (params: CollectionItemUpdateParams) => void;
         delete: (params?: CollectionItemDeleteParams) => void;
+        getModelMinusRelations: import("memoize-one").MemoizedFn<(model: TModel) => Partial<TModel>>;
         render(): JSX.Element;
         context: any;
         setState<K extends "modelStatus" | "previousModelStatus" | "fetchingId">(state: CollectionCommonState | ((prevState: Readonly<CollectionCommonState>, props: Readonly<TOwnProps & CollectionItemComponentProps<TModel>>) => CollectionCommonState | Pick<CollectionCommonState, K> | null) | Pick<CollectionCommonState, K> | null, callback?: (() => void) | undefined): void;

package/lib/components/HOC/CollectionItemComponent.js

@@ -58,6 +58,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.configureMapStateToProps = exports.configureCollectionItemComponent = void 0;
+var memoize_one_1 = __importDefault(require("memoize-one"));
 var react_1 = __importStar(require("react"));
 var react_redux_1 = require("react-redux");
 var react_router_1 = require("react-router");
@@ -113,6 +114,7 @@ function configureCollectionItemComponent(WrappedComponent, LoaderComponent) {
                 var model = _this.props.model;
                 collection_1.deleteCollectionItem(model, _this.getCollectionMethodConfig(), params);
             };
+            _this.getModelMinusRelations = memoize_one_1.default(function (model) { return model_1.getModelMinusRelations(model); });
             _this.state = {
                 // initializing until model is loaded, or if no model
                 modelStatus: modelStatus_1.MODEL_STATUS.UNINITIALIZED,
@@ -136,7 +138,7 @@ function configureCollectionItemComponent(WrappedComponent, LoaderComponent) {
             if (modelStatus === modelStatus_1.MODEL_STATUS.UNINITIALIZED) {
                 return react_1.default.createElement(LoaderComponent, null);
             }
-            return (react_1.default.createElement(WrappedComponent, __assign({}, otherProps, { model: this.props.model, modelMinusRelations: this.props.modelMinusRelations, modelStatus: modelStatus, previousModelStatus: previousModelStatus, load: this.load, stopPeriodicLoad: this.stopPeriodicLoad, create: this.create, update: this.update, delete: this.delete })));
+            return (react_1.default.createElement(WrappedComponent, __assign({}, otherProps, { model: this.props.model, modelMinusRelations: this.getModelMinusRelations(this.props.model), modelStatus: modelStatus, previousModelStatus: previousModelStatus, load: this.load, stopPeriodicLoad: this.stopPeriodicLoad, create: this.create, update: this.update, delete: this.delete })));
         };
         return CollectionItemComponent;
     }(react_1.Component));

package/lib/components/HOC/ConnectedModalComponent.d.ts

@@ -1,26 +1,64 @@
-import { ComponentClass, ComponentType } from 'react';
+import React, { ComponentClass, ComponentType } from 'react';
+import { ModalsState } from '../../redux/reducers/modalsReducer';
+import { BaseReduxState } from '../../types';
 import { GuidComponentWrappedProps } from '../HOC/GuidComponent';
 export interface ConnectedModalWrappedProps {
     onEntering: () => void;
     onExited: () => void;
+    isTopOpenFullscreenModal?: boolean;
 }
 export interface ConnectedModalState {
     isModalOpen: boolean;
 }
+export declare type ConnectedModalReduxProps = {
+    modals: ModalsState;
+};
+export declare const configureMapStateToProps: () => (state: BaseReduxState) => ConnectedModalReduxProps;
 /**
  * HOC that provides modal lifecycle event methods to coordinate modal state in redux.
  *
  * NOTE: Meant for testing. Should be wrapped in `guidComponent` to provide the `guid` prop normally.
  *
  * @param {*} WrappedComponent The component to wrap.
+ * @param {*} isFullscreen Are we rendering a fullscreen modal?
  */
-export declare function configureConnectedModalComponent<TOwnProps extends {}>(WrappedComponent: ComponentType<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps>): ComponentClass<TOwnProps & GuidComponentWrappedProps>;
+export declare function configureConnectedModalComponent<TOwnProps extends {}>(WrappedComponent: ComponentType<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps>, isFullscreen?: boolean): {
+    new (props: TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps & ConnectedModalReduxProps): {
+        componentWillUnmount(): void;
+        onEntering: () => void;
+        onExited: () => void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends "isModalOpen">(state: ConnectedModalState | ((prevState: Readonly<ConnectedModalState>, props: Readonly<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps & ConnectedModalReduxProps>) => ConnectedModalState | Pick<ConnectedModalState, K> | null) | Pick<ConnectedModalState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps & ConnectedModalReduxProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<ConnectedModalState>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps & ConnectedModalReduxProps>, nextState: Readonly<ConnectedModalState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps & ConnectedModalReduxProps>, prevState: Readonly<ConnectedModalState>): any;
+        componentDidUpdate?(prevProps: Readonly<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps & ConnectedModalReduxProps>, prevState: Readonly<ConnectedModalState>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps & ConnectedModalReduxProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps & ConnectedModalReduxProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps & ConnectedModalReduxProps>, nextState: Readonly<ConnectedModalState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps & ConnectedModalReduxProps>, nextState: Readonly<ConnectedModalState>, nextContext: any): void;
+    };
+    contextType?: React.Context<any> | undefined;
+};
 /**
  * HOC that provides modal lifecycle event methods to coordinate modal state in redux.
  *
  * Uses `guidComponent`.
  *
  * @param {*} WrappedComponent The component to wrap.
+ * @param {*} isFullscreen Are we rendering a fullscreen modal?
  */
-export declare function connectedModalComponent<TOwnProps extends {}>(WrappedComponent: ComponentType<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps>): ComponentClass<TOwnProps>;
+export declare function connectedModalComponent<TOwnProps extends {}>(WrappedComponent: ComponentType<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps>, isFullscreen?: boolean): ComponentClass<TOwnProps>;
 export default connectedModalComponent;

package/lib/components/HOC/ConnectedModalComponent.js

@@ -46,26 +46,39 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.connectedModalComponent = exports.configureConnectedModalComponent = void 0;
+exports.connectedModalComponent = exports.configureConnectedModalComponent = exports.configureMapStateToProps = void 0;
+var lodash_1 = require("lodash");
 var react_1 = __importStar(require("react"));
+var react_redux_1 = require("react-redux");
 var actionCreator_1 = require("../../redux/actionCreator");
 var actions_1 = require("../../redux/actions");
 var GuidComponent_1 = __importDefault(require("../HOC/GuidComponent"));
+var configureMapStateToProps = function () { return function (state) {
+    return {
+        modals: state.modals
+    };
+}; };
+exports.configureMapStateToProps = configureMapStateToProps;
 /**
  * HOC that provides modal lifecycle event methods to coordinate modal state in redux.
  *
  * NOTE: Meant for testing. Should be wrapped in `guidComponent` to provide the `guid` prop normally.
  *
  * @param {*} WrappedComponent The component to wrap.
+ * @param {*} isFullscreen Are we rendering a fullscreen modal?
  */
-function configureConnectedModalComponent(WrappedComponent) {
+function configureConnectedModalComponent(WrappedComponent, isFullscreen) {
+    if (isFullscreen === void 0) { isFullscreen = false; }
     return /** @class */ (function (_super) {
         __extends(ConnectedModalComponent, _super);
         function ConnectedModalComponent(props) {
             var _this = _super.call(this, props) || this;
             _this.onEntering = function () {
-                var guid = _this.props.guid;
-                actionCreator_1.dispatchAction(actions_1.ACTION.MODAL_ENTERING, { guid: guid });
+                var _a;
+                var _b = _this.props, guid = _b.guid, modals = _b.modals;
+                // Store each modal's GUID in redux with a zero-based index to determine the order in which they were opened
+                var maxModal = lodash_1.maxBy(Object.values(modals), function (modal) { return modal.index; });
+                actionCreator_1.dispatchAction(actions_1.ACTION.MODAL_ENTERING, { guid: guid, index: ((_a = maxModal === null || maxModal === void 0 ? void 0 : maxModal.index) !== null && _a !== void 0 ? _a : -1) + 1, isFullscreen: isFullscreen });
                 _this.setState({
                     isModalOpen: true
                 });
@@ -89,7 +102,12 @@ function configureConnectedModalComponent(WrappedComponent) {
             this.onExited();
         };
         ConnectedModalComponent.prototype.render = function () {
-            return react_1.default.createElement(WrappedComponent, __assign({}, this.props, { onEntering: this.onEntering, onExited: this.onExited }));
+            var _a, _b;
+            var _c = this.props, modals = _c.modals, guid = _c.guid;
+            var topOpenFullscreenModal = lodash_1.maxBy(Object.values(modals).filter(function (m) { return m.isFullscreen; }), function (modal) { return modal.index; });
+            var thisModalIndex = (_b = (_a = modals[guid]) === null || _a === void 0 ? void 0 : _a.index) !== null && _b !== void 0 ? _b : null;
+            var isTopOpenFullscreenModal = (topOpenFullscreenModal === null || topOpenFullscreenModal === void 0 ? void 0 : topOpenFullscreenModal.index) === thisModalIndex;
+            return (react_1.default.createElement(WrappedComponent, __assign({}, this.props, { onEntering: this.onEntering, onExited: this.onExited, isTopOpenFullscreenModal: isTopOpenFullscreenModal })));
         };
         return ConnectedModalComponent;
     }(react_1.Component));
@@ -101,10 +119,14 @@ exports.configureConnectedModalComponent = configureConnectedModalComponent;
  * Uses `guidComponent`.
  *
  * @param {*} WrappedComponent The component to wrap.
+ * @param {*} isFullscreen Are we rendering a fullscreen modal?
  */
-function connectedModalComponent(WrappedComponent) {
-    var component = configureConnectedModalComponent(WrappedComponent);
-    return GuidComponent_1.default(component);
+function connectedModalComponent(WrappedComponent, isFullscreen) {
+    if (isFullscreen === void 0) { isFullscreen = false; }
+    var component = configureConnectedModalComponent(WrappedComponent, isFullscreen);
+    var mapStateToProps = exports.configureMapStateToProps();
+    // @ts-ignore: could not match inferred type from the `connect` HOC
+    return react_redux_1.connect(mapStateToProps)(GuidComponent_1.default(component));
 }
 exports.connectedModalComponent = connectedModalComponent;
 exports.default = connectedModalComponent;

package/lib/components/HOC/FullscreenModalComponent.js

@@ -122,7 +122,7 @@ function configureFullscreenModalComponent(WrappedComponent) {
             });
         };
         FullscreenModalComponent.prototype.render = function () {
-            var contentLabel = this.props.contentLabel;
+            var _a = this.props, contentLabel = _a.contentLabel, isTopOpenFullscreenModal = _a.isTopOpenFullscreenModal;
             var isOpen = this.state.isOpen;
             return (react_1.default.createElement(react_modal_1.default, { isOpen: isOpen, contentLabel: contentLabel, style: {
                     content: {
@@ -144,7 +144,9 @@ function configureFullscreenModalComponent(WrappedComponent) {
                         bottom: 0,
                         zIndex: 2000
                     }
-                }, shouldCloseOnOverlayClick: false },
+                }, 
+                // hide the rendered portal if this is not the top open fullscreen modal
+                portalClassName: "ReactModalPortal" + (!isTopOpenFullscreenModal ? ' dn' : ''), shouldCloseOnOverlayClick: false },
                 react_1.default.createElement(WrappedComponent, __assign({}, this.props, { closeModal: this.closeModal }))));
         };
         return FullscreenModalComponent;
@@ -167,7 +169,7 @@ exports.configureFullscreenModalComponent = configureFullscreenModalComponent;
  */
 function fullscreenModalComponent(WrappedComponent) {
     var component = configureFullscreenModalComponent(WrappedComponent);
-    return ConnectedModalComponent_1.connectedModalComponent(component);
+    return ConnectedModalComponent_1.connectedModalComponent(component, true);
 }
 exports.fullscreenModalComponent = fullscreenModalComponent;
 exports.default = fullscreenModalComponent;

package/lib/components/HOC/SearchPersistorComponent.d.ts

@@ -1,4 +1,5 @@
 import { ComponentClass, ComponentType } from 'react';
+import { SortingRule } from 'react-table';
 import { Dispatch } from 'redux';
 import { BaseReduxState, Search } from '../../types';
 export interface SearchPersistorProps<T extends Search = Search> {
@@ -7,13 +8,16 @@ export interface SearchPersistorProps<T extends Search = Search> {
 }
 export interface SearchPersistorMethods<T extends Search = Search> {
     setSearchDefaults: (doSearch: () => void, search: T) => void;
-    updateAndPersistSearch: (search?: Search | T, callback?: () => void) => void;
+    updateAndPersistSearch: (search?: T, callback?: () => void) => void;
+    resetSearch: () => void;
     handleSearchClick: () => void;
-    handleChangeTab: (selectedTab: number) => void;
-    handleKeywordsChange: (event: any) => void;
+    setKeywords: (event: any) => void;
     handleKeywordsKeyDown: (event: any) => void;
-    handleQueryAllChange: (event: any) => void;
-    resetSearch: () => void;
+    setQueryAll: (event: any) => void;
+    setSelectedTab: (selectedTab: number) => void;
+    setSortingRules: (newSortingRules: SortingRule[]) => void;
+    setPageSize: (newPageSize: number, newPage: number) => void;
+    setPage: (newPage: number) => void;
 }
 export interface SearchPersistorWrappedProps<T extends Search = Search> extends SearchPersistorProps<T>, SearchPersistorMethods<T> {
     search?: T;

package/lib/components/HOC/SearchPersistorComponent.js

@@ -44,6 +44,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.configureMapDispatchToProps = exports.configureMapStateToProps = exports.configureSearchPersistorComponent = void 0;
+var lodash_1 = require("lodash");
 var react_1 = __importStar(require("react"));
 var react_redux_1 = require("react-redux");
 var actions_1 = require("../../redux/actions");
@@ -93,28 +94,72 @@ function configureSearchPersistorComponent(WrappedComponent) {
                     invalidKeywords: false
                 }, _this.doSearch);
             };
-            _this.handleChangeTab = function (selectedTab) {
-                _this.updateAndPersistSearch({ selectedTab: selectedTab });
+            _this.resetSearch = function () {
+                var _a;
+                var search = (_a = _this.state.search) !== null && _a !== void 0 ? _a : {};
+                _this.updateAndPersistSearch(
+                // preserve items related to filtering results
+                lodash_1.merge({}, _this.state.defaultSearch, {
+                    selectedTab: search.selectedTab,
+                    sortingRules: search.sortingRules,
+                    pageSize: search.pageSize,
+                    pageByTab: search.pageByTab
+                }), 
+                // do not trigger a re-load unless queryAll is true
+                search.queryAll ? _this.doSearch : undefined);
+            };
+            _this.setSelectedTab = function (selectedTab) {
+                var _a, _b;
+                var pageByTab = __assign({}, ((_b = (_a = _this.state.search) === null || _a === void 0 ? void 0 : _a.pageByTab) !== null && _b !== void 0 ? _b : {}));
+                // if not set, default page to zero when switching tabs
+                if (!pageByTab[selectedTab])
+                    pageByTab[selectedTab] = 0;
+                _this.updateAndPersistSearch({
+                    selectedTab: selectedTab,
+                    pageByTab: pageByTab
+                });
             };
-            _this.handleKeywordsChange = function (event) {
+            _this.setKeywords = function (event) {
                 _this.updateAndPersistSearch({
                     keywords: event.target.value
                 });
             };
             _this.handleKeywordsKeyDown = function (event) {
-                if (event.key === 'Enter') {
+                var _a;
+                if (event.key === 'Enter' && ((_a = _this.state.search) === null || _a === void 0 ? void 0 : _a.queryAll)) {
                     _this.handleSearchClick();
                 }
             };
-            _this.handleQueryAllChange = function (event) {
+            _this.setQueryAll = function (event) {
                 var queryAll = event.target.checked;
                 _this.updateAndPersistSearch({
                     queryAll: queryAll,
                     requiredMessage: !queryAll ? null : _this.state.search ? _this.state.search.requiredMessage : null
+                }, _this.doSearch);
+            };
+            _this.setSortingRules = function (newSortingRules) {
+                _this.updateAndPersistSearch({
+                    sortingRules: newSortingRules
                 });
             };
-            _this.resetSearch = function () {
-                _this.updateAndPersistSearch(_this.state.defaultSearch, _this.doSearch);
+            _this.setPageSize = function (newPageSize, newPage) {
+                var _a, _b, _c, _d;
+                var pageByTab = __assign({}, ((_b = (_a = _this.state.search) === null || _a === void 0 ? void 0 : _a.pageByTab) !== null && _b !== void 0 ? _b : {}));
+                var selectedTab = (_d = (_c = _this.state.search) === null || _c === void 0 ? void 0 : _c.selectedTab) !== null && _d !== void 0 ? _d : 1;
+                pageByTab[selectedTab] = newPage;
+                _this.updateAndPersistSearch({
+                    pageSize: newPageSize,
+                    pageByTab: pageByTab
+                });
+            };
+            _this.setPage = function (newPage) {
+                var _a, _b, _c, _d;
+                var pageByTab = __assign({}, ((_b = (_a = _this.state.search) === null || _a === void 0 ? void 0 : _a.pageByTab) !== null && _b !== void 0 ? _b : {}));
+                var selectedTab = (_d = (_c = _this.state.search) === null || _c === void 0 ? void 0 : _c.selectedTab) !== null && _d !== void 0 ? _d : 1;
+                pageByTab[selectedTab] = newPage;
+                _this.updateAndPersistSearch({
+                    pageByTab: pageByTab
+                });
             };
             _this.state = {
                 search: undefined,
@@ -130,7 +175,7 @@ function configureSearchPersistorComponent(WrappedComponent) {
         };
         //#endregion handlers
         SearchPersistorComponent.prototype.render = function () {
-            return (react_1.default.createElement(WrappedComponent, __assign({ updateAndPersistSearch: this.updateAndPersistSearch, setSearchDefaults: this.setSearchDefaults, search: this.state.search, handleSearchClick: this.handleSearchClick, handleChangeTab: this.handleChangeTab, handleKeywordsChange: this.handleKeywordsChange, handleKeywordsKeyDown: this.handleKeywordsKeyDown, handleQueryAllChange: this.handleQueryAllChange, resetSearch: this.resetSearch }, this.props)));
+            return (react_1.default.createElement(WrappedComponent, __assign({ search: this.state.search, setSearchDefaults: this.setSearchDefaults, updateAndPersistSearch: this.updateAndPersistSearch, resetSearch: this.resetSearch, handleSearchClick: this.handleSearchClick, setKeywords: this.setKeywords, handleKeywordsKeyDown: this.handleKeywordsKeyDown, setQueryAll: this.setQueryAll, setSelectedTab: this.setSelectedTab, setSortingRules: this.setSortingRules, setPageSize: this.setPageSize, setPage: this.setPage }, this.props)));
         };
         return SearchPersistorComponent;
     }(react_1.Component));

package/lib/components/ManageTable.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { Column, SortingRule } from 'react-table';
+import { Model, Search } from '../types';
+export interface ManageTableProps<TModel, TSearchDataParams> {
+    search: Search;
+    isFiltered: boolean;
+    setSelectedTab: (selectedTab: number) => void;
+    setSortingRules: (newSortingRules: SortingRule[]) => void;
+    setPageSize: (newPageSize: number, newPage: number) => void;
+    setPage: (newPage: number) => void;
+    tabs: number[];
+    getTabName: (tab?: number) => string;
+    searchData: (params: TSearchDataParams) => Record<number, TModel[]>;
+    searchDataParams: TSearchDataParams;
+    columns: Column<TModel>[];
+    entityName: string;
+    canQueryAll?: boolean;
+}
+export declare const ManageTable: <TModel extends Model, TSearchDataParams extends {}>({ search: { hasSearched, queryAll, selectedTab, sortingRules, pageSize, pageByTab }, isFiltered, setSelectedTab, setSortingRules, setPageSize, setPage, tabs, getTabName, searchData, searchDataParams, columns, entityName, canQueryAll }: ManageTableProps<TModel, TSearchDataParams>) => JSX.Element;

package/lib/components/ManageTable.js

@@ -0,0 +1,112 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ManageTable = void 0;
+var lodash_1 = require("lodash");
+var react_1 = require("react");
+var react_2 = __importDefault(require("react"));
+var react_bootstrap_1 = require("react-bootstrap");
+var react_table_1 = __importDefault(require("react-table"));
+var table_1 = require("../constants/table");
+var RefreshIndicator_1 = require("./RefreshIndicator");
+var ManageTable = function (_a) {
+    //#region Data
+    var _b = _a.search, hasSearched = _b.hasSearched, queryAll = _b.queryAll, selectedTab = _b.selectedTab, sortingRules = _b.sortingRules, pageSize = _b.pageSize, pageByTab = _b.pageByTab, isFiltered = _a.isFiltered, setSelectedTab = _a.setSelectedTab, setSortingRules = _a.setSortingRules, setPageSize = _a.setPageSize, setPage = _a.setPage, tabs = _a.tabs, getTabName = _a.getTabName, searchData = _a.searchData, searchDataParams = _a.searchDataParams, columns = _a.columns, entityName = _a.entityName, canQueryAll = _a.canQueryAll;
+    var _c = react_1.useState(), dataByTab = _c[0], setDataByTab = _c[1];
+    var isInitialized = dataByTab !== undefined;
+    // search and set state, which can be debounced as a single unit of work
+    var searchAndSetData = react_1.useCallback(function (params, setDataByTab) {
+        setDataByTab(searchData(params));
+    }, [searchData]);
+    // search is debounced to prevent it being rapidly called
+    // useMemo with no dependencies ensures we keep the same debounced function between renders
+    var debouncedSearchAndSetData = react_1.useMemo(function () { return lodash_1.debounce(searchAndSetData); }, [searchAndSetData]);
+    // search once without debounce to initialize dataByTab state
+    react_1.useEffect(function () {
+        if (!isInitialized) {
+            setDataByTab(searchData(searchDataParams));
+        }
+    }, [isInitialized, searchData, searchDataParams]);
+    // search using debounced method when searchDataParams changes, after initialization
+    // use `isMounted` to not call the callback unless the component is mounted
+    react_1.useEffect(function () {
+        var isMounted = true;
+        if (isInitialized) {
+            debouncedSearchAndSetData(searchDataParams, function (dataByTab) {
+                if (isMounted)
+                    setDataByTab(dataByTab);
+            });
+        }
+        return function () {
+            isMounted = false;
+        };
+    }, [debouncedSearchAndSetData, isInitialized, searchDataParams]);
+    //#endregion Data
+    var noResultsFound = isFiltered && !!dataByTab && Object.values(dataByTab).every(function (d) { return d.length === 0; });
+    var currentTab = selectedTab !== null && selectedTab !== void 0 ? selectedTab : 1;
+    var data = dataByTab === null || dataByTab === void 0 ? void 0 : dataByTab[currentTab];
+    //#region Tabs
+    var onTabSelect = react_1.useCallback(function (eventKey) {
+        setSelectedTab(Number(eventKey));
+    }, [setSelectedTab]);
+    var dataLengthByTab = react_1.useMemo(function () {
+        var value = {};
+        tabs.forEach(function (tab) {
+            var _a;
+            value[tab] = (_a = dataByTab === null || dataByTab === void 0 ? void 0 : dataByTab[tab].length) !== null && _a !== void 0 ? _a : 0;
+        });
+        return value;
+    }, [dataByTab, tabs]);
+    var SearchTabs = react_1.useMemo(function () { return (react_2.default.createElement(react_bootstrap_1.Tabs, { activeKey: selectedTab, id: "search-tabs", onSelect: onTabSelect }, tabs.map(function (tab) { return (react_2.default.createElement(react_bootstrap_1.Tab, { key: tab, eventKey: tab.toString(), title: getTabName(tab) + " (" + dataLengthByTab[tab] + ")", disabled: noResultsFound })); }))); }, [dataLengthByTab, getTabName, noResultsFound, onTabSelect, selectedTab, tabs]);
+    //#endregion Tabs
+    //#region Table
+    var NoDataComponent = react_1.useMemo(function () {
+        return hasSearched ? (react_2.default.createElement("p", { className: "pt4 tc" },
+            "No ",
+            entityName.toLocaleLowerCase(),
+            " matched your search.",
+            canQueryAll && !queryAll && (react_2.default.createElement(react_2.default.Fragment, null,
+                " You might want to try again with \"Search All ",
+                entityName,
+                "\" checked.")))) : (react_2.default.createElement("p", { className: "pt4 tc" },
+            "No ",
+            getTabName(selectedTab).toLowerCase(),
+            " ",
+            entityName.toLocaleLowerCase(),
+            ' ',
+            isFiltered ? 'matched your search' : 'found',
+            "."));
+    }, [canQueryAll, entityName, getTabName, hasSearched, isFiltered, queryAll, selectedTab]);
+    var NoDataComponentCallback = react_1.useCallback(function () { return NoDataComponent; }, [NoDataComponent]);
+    var Table = react_1.useMemo(function () {
+        var _a;
+        var showPagination = !!data && data.length > table_1.TABLE_DEFAULT_PAGE_SIZE;
+        // if pagination is not enabled, or page is not set, ensure page is 0, the first page
+        var pageForTab = showPagination && pageByTab && selectedTab ? pageByTab[selectedTab] : 0;
+        // if there are less items to display than the page size, shrink the page size so there are not empty rows
+        var currentPageSize = Math.min((_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : table_1.TABLE_DEFAULT_PAGE_SIZE, pageSize !== null && pageSize !== void 0 ? pageSize : table_1.TABLE_DEFAULT_PAGE_SIZE);
+        var pageSizeOptions = table_1.TABLE_PAGE_SIZE_OPTIONS.filter(function (s) { return !(data === null || data === void 0 ? void 0 : data.length) || s <= (data === null || data === void 0 ? void 0 : data.length); });
+        return (react_2.default.createElement(react_table_1.default, { "aria-describedby": "search-results-label", className: "manage-table -striped cb" + ((data === null || data === void 0 ? void 0 : data.length) === 1 ? ' single-row-action-button' : ''), data: data, showPagination: showPagination, showPaginationTop: true, sorted: sortingRules, pageSize: currentPageSize, page: pageForTab, pageSizeOptions: pageSizeOptions, columns: columns, onSortedChange: setSortingRules, onPageSizeChange: setPageSize, onPageChange: setPage, NoDataComponent: NoDataComponentCallback }));
+    }, [
+        NoDataComponentCallback,
+        columns,
+        data,
+        pageByTab,
+        pageSize,
+        selectedTab,
+        setPage,
+        setPageSize,
+        setSortingRules,
+        sortingRules
+    ]);
+    //#endregion Table
+    if (!dataByTab)
+        return react_2.default.createElement(RefreshIndicator_1.RefreshIndicator, { label: "Loading...", labelClassName: "color-white" });
+    return (react_2.default.createElement(react_2.default.Fragment, null,
+        react_2.default.createElement("h3", { id: "search-results-label", className: "visually-hidden" }, "Search Results"),
+        SearchTabs,
+        Table));
+};
+exports.ManageTable = ManageTable;

package/lib/components/SearchControls.d.ts

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react';
 import { Search } from '../types';
 import { SearchPersistorMethods } from './HOC/SearchPersistorComponent';
-interface SearchControlsMethods extends Pick<SearchPersistorMethods, 'handleSearchClick' | 'handleKeywordsChange' | 'handleKeywordsKeyDown' | 'resetSearch'>, Partial<Pick<SearchPersistorMethods, 'handleQueryAllChange'>> {
+interface SearchControlsMethods extends Pick<SearchPersistorMethods, 'handleSearchClick' | 'setKeywords' | 'handleKeywordsKeyDown' | 'resetSearch'>, Partial<Pick<SearchPersistorMethods, 'setQueryAll'>> {
 }
 export interface SearchControlsProps extends Search, SearchControlsMethods {
     keywordPlaceholder: string;