studiokit-scaffolding-js 5.1.0 → 5.1.2

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/ManageTable.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -10,6 +21,10 @@ 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 table_2 = require("../utils/table");
+var ManageTableNoDataComponent_1 = require("./ManageTableNoDataComponent");
+var PaginationNextButton_1 = require("./PaginationNextButton");
+var PaginationPreviousButton_1 = require("./PaginationPreviousButton");
 var RefreshIndicator_1 = require("./RefreshIndicator");
 var ManageTable = function (_a) {
     //#region Data
@@ -62,33 +77,15 @@ var ManageTable = function (_a) {
     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 NoDataComponent = react_1.useMemo(function () { return (react_2.default.createElement(ManageTableNoDataComponent_1.ManageTableNoDataComponent, __assign({}, { canQueryAll: canQueryAll, entityName: entityName, getTabName: getTabName, hasSearched: hasSearched, isFiltered: isFiltered, queryAll: queryAll, selectedTab: selectedTab }))); }, [canQueryAll, entityName, getTabName, hasSearched, isFiltered, queryAll, selectedTab]);
     var NoDataComponentCallback = react_1.useCallback(function () { return NoDataComponent; }, [NoDataComponent]);
     var Table = react_1.useMemo(function () {
-        var _a;
+        // show pagination if there are more rows than the default page size
         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 }));
+        var pageSizeOptions = table_2.getPageSizeOptions(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: pageSize, page: pageForTab, pageSizeOptions: pageSizeOptions, minRows: 0, columns: columns, onSortedChange: setSortingRules, onPageSizeChange: setPageSize, onPageChange: setPage, NextComponent: PaginationNextButton_1.PaginationNextButton, PreviousComponent: PaginationPreviousButton_1.PaginationPreviousButton, NoDataComponent: NoDataComponentCallback }));
     }, [
         NoDataComponentCallback,
         columns,

package/lib/components/ManageTableNoDataComponent.d.ts

@@ -0,0 +1,11 @@
+import { FunctionComponent } from 'react';
+export interface ManageTableNoDataComponentProps {
+    entityName: string;
+    selectedTab?: number;
+    getTabName: (tab?: number) => string;
+    queryAll?: boolean;
+    canQueryAll?: boolean;
+    isFiltered?: boolean;
+    hasSearched?: boolean;
+}
+export declare const ManageTableNoDataComponent: FunctionComponent<ManageTableNoDataComponentProps>;

package/lib/components/ManageTableNoDataComponent.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ManageTableNoDataComponent = void 0;
+var react_1 = __importDefault(require("react"));
+var ManageTableNoDataComponent = function (_a) {
+    var entityName = _a.entityName, selectedTab = _a.selectedTab, getTabName = _a.getTabName, queryAll = _a.queryAll, canQueryAll = _a.canQueryAll, isFiltered = _a.isFiltered, hasSearched = _a.hasSearched;
+    return (react_1.default.createElement("p", { className: "pt4 tc" }, hasSearched ? (react_1.default.createElement(react_1.default.Fragment, null,
+        "No ",
+        entityName.toLocaleLowerCase(),
+        " matched your search.",
+        canQueryAll && !queryAll && (react_1.default.createElement(react_1.default.Fragment, null,
+            " You might want to try again with \"Search All ",
+            entityName,
+            "\" checked.")))) : (react_1.default.createElement(react_1.default.Fragment, null,
+        "No ",
+        getTabName(selectedTab).toLowerCase(),
+        " ",
+        entityName.toLocaleLowerCase(),
+        ' ',
+        isFiltered ? 'matched your search' : 'found',
+        "."))));
+};
+exports.ManageTableNoDataComponent = ManageTableNoDataComponent;

package/lib/components/PaginationNextButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from '@material-ui/core';
+import { FunctionComponent } from 'react';
+export declare const PaginationNextButton: FunctionComponent<ButtonProps>;

package/lib/components/PaginationNextButton.js

@@ -0,0 +1,24 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationNextButton = void 0;
+var core_1 = require("@material-ui/core");
+var KeyboardArrowRight_1 = __importDefault(require("@material-ui/icons/KeyboardArrowRight"));
+var react_1 = __importDefault(require("react"));
+var PaginationNextButton = function (props) { return (react_1.default.createElement(core_1.Button, __assign({ className: "btn-text color-primary w-100" }, props),
+    "Next ",
+    react_1.default.createElement(KeyboardArrowRight_1.default, null))); };
+exports.PaginationNextButton = PaginationNextButton;

package/lib/components/PaginationPreviousButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from '@material-ui/core';
+import { FunctionComponent } from 'react';
+export declare const PaginationPreviousButton: FunctionComponent<ButtonProps>;

package/lib/components/PaginationPreviousButton.js

@@ -0,0 +1,24 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationPreviousButton = void 0;
+var core_1 = require("@material-ui/core");
+var KeyboardArrowLeft_1 = __importDefault(require("@material-ui/icons/KeyboardArrowLeft"));
+var react_1 = __importDefault(require("react"));
+var PaginationPreviousButton = function (props) { return (react_1.default.createElement(core_1.Button, __assign({ className: "btn-text color-primary w-100" }, props),
+    react_1.default.createElement(KeyboardArrowLeft_1.default, null),
+    " Previous")); };
+exports.PaginationPreviousButton = PaginationPreviousButton;

package/lib/components/SearchControls.js

@@ -25,7 +25,7 @@ var SearchControls = function (_a) {
             react_1.default.createElement(DateField_1.DateField, { id: "date", onChange: handleDateChange, label: "Date", "aria-label": "Active date", className: "fl-ns mw5-ns mr3-ns mb3 mb0-ns w-100-lt-xs date-align", value: dateString }))),
         react_1.default.createElement("div", { className: "fl-ns mt3-ns pt3-ns w-100-lt-xs" },
             canReadAnyGlobally && !!setQueryAll && (react_1.default.createElement(react_bootstrap_1.FormCheck, { name: "queryAll", id: "queryAll", checked: queryAll, disabled: canReadAnyGlobally && !canReadSome, onChange: setQueryAll, className: "fl-ns f6 mr2-ns mb3 mt2 w-100-lt-xs", label: react_1.default.createElement("span", { className: "b black" }, queryAllText || 'Search All') })),
-            canReadAnyGlobally && queryAll && (react_1.default.createElement(Button_1.default, { className: "btn-primary fr-ns ml2-ns mb3 w-100-lt-xs search-button", onClick: handleSearchClick, color: "primary", disabled: !keywords || keywords.length < 3 || !!invalidKeywords },
+            canReadAnyGlobally && queryAll && (react_1.default.createElement(Button_1.default, { className: "btn-primary fr-ns ml2-ns mb3 w-100-lt-xs search-button", onClick: handleSearchClick, color: "primary", disabled: (!keywords || keywords.length < 3 || !!invalidKeywords) && !dateString },
                 react_1.default.createElement(Search_1.default, null),
                 "Search")),
             react_1.default.createElement(Button_1.default, { className: "btn-text color-pink fr-ns mb3 w-100-lt-xs", onClick: resetSearch },

package/lib/css/components/_tables.css

@@ -62,6 +62,39 @@ th,
  * react table
  */
 
+.table-container {
+	width: 100%;
+	overflow-x: auto;
+}
+
+.table-search-container {
+	padding: 0 !important;
+	text-align: left;
+	background: white;
+	border: 1px solid rgba(0, 0, 0, 0.1);
+	border-radius: 3px;
+	width: 100%;
+
+	& .MuiSvgIcon-root {
+		margin-top: 0.55rem;
+	}
+
+	& .table-search-input {
+		text-align: left;
+		outline: none !important;
+		border: none !important;
+		width: 100%;
+	}
+
+	& input[type=search] {
+		-webkit-appearance: none;
+	}
+
+	& input[type=search]::-webkit-search-cancel-button {
+		-webkit-appearance: searchfield-cancel-button;
+	}
+}
+
 .ReactTable {
 	& .rt-thead .rt-tr {
 		background-color: var(--color-off-white);
@@ -88,10 +121,81 @@ th,
 		overflow: visible;
 	}
 
-	& .-pagination .-btn[disabled] {
-		opacity: 1 !important;
-		background-color: var(--color-light-grey) !important;
-		color: var(--color-dark-grey) !important;
+	& .pagination-top,
+	& .pagination-bottom {
+		background-color: var(--color-off-white);
+
+		& .-pagination {
+			padding: 0.5rem 0.6rem;
+			border-top: none;
+		}
+	}
+
+	& .pagination-top .-pagination {
+		border-bottom: 1px solid var(--color-light-grey);
+	}
+
+	& .pagination-bottom .-pagination {
+		border-top: 1px solid var(--color-light-grey);
+	}
+
+	& .-pagination .-previous,
+	& .-pagination .-next {
+		& .MuiButton-text {
+			background-color: var(--color-white);
+			border: 1px solid var(--color-light-grey);
+
+			&[disabled] {
+				background-color: var(--color-light-grey);
+			}
+
+			& .MuiButton-label .MuiSvgIcon-root {
+				margin: 0;
+			}
+		}
+	}
+
+	/* duplicate .form-control styles */
+	& .-pagination input,
+	.-pagination select {
+		display: block;
+		width: 100%;
+		height: calc(1.5em + 0.75rem + 2px);
+		font-size: 1rem;
+		font-weight: 400;
+		line-height: 1.5;
+		color: #495057;
+		background-color: #fff;
+		background-clip: padding-box;
+		border: 1px solid #ced4da;
+		border-radius: 0.25rem;
+		transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+		font-family: var(--text-font-stack);
+		padding: 0.5rem;
+		border-color: var(--color-light-grey);
+		box-shadow: none;
+
+		&:focus {
+			border-color: #80bdff;
+			outline: 0;
+			-webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+			box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+		}
+
+		&::placeholder {
+			color: #6c757d;
+			opacity: 1;
+		}
+	}
+
+	& .-pagination .-pageSizeOptions.select {
+		padding: 0.375rem 0.75rem;
+	}
+
+	&.single-row-action-button {
+		& .rt-tbody {
+			padding-bottom: 108px;
+		}
 	}
 
 	& .rt-noData {
@@ -113,39 +217,6 @@ th,
 	}
 }
 
-.table-container {
-	width: 100%;
-	overflow-x: auto;
-}
-
-.table-search-container {
-	padding: 0 !important;
-	text-align: left;
-	background: white;
-	border: 1px solid rgba(0, 0, 0, 0.1);
-	border-radius: 3px;
-	width: 100%;
-
-	& .MuiSvgIcon-root {
-		margin-top: 0.55rem;
-	}
-
-	& .table-search-input {
-		text-align: left;
-		outline: none !important;
-		border: none !important;
-		width: 100%;
-	}
-
-	& input[type=search] {
-		-webkit-appearance: none;
-	}
-
-	& input[type=search]::-webkit-search-cancel-button {
-		-webkit-appearance: searchfield-cancel-button;
-	}
-}
-
 .striped-table tr:nth-child(even) {
 	background-color: var(--color-light-blue) !important;
 }

package/lib/redux/reducers/modalsReducer.d.ts

@@ -1,8 +1,12 @@
 import { Dictionary } from 'lodash';
 import { Action } from 'redux';
-export interface ModalAction extends Action {
+export interface ModalActionValue {
+    index: number;
+    isFullscreen: boolean;
+}
+export interface ModalAction extends Action, ModalActionValue {
     guid: string;
 }
-export interface ModalsState extends Dictionary<boolean> {
+export interface ModalsState extends Dictionary<ModalActionValue> {
 }
 export default function modalsReducer(state: ModalsState | undefined, action: ModalAction): ModalsState;

package/lib/redux/reducers/modalsReducer.js

@@ -29,13 +29,17 @@ function modalsReducer(state, action) {
     var _a;
     if (state === void 0) { state = initialState; }
     var guid;
+    var index;
+    var isFullscreen;
     switch (action.type) {
         case actions_1.ACTION.MODAL_ENTERING: {
             guid = action.guid;
+            index = action.index;
+            isFullscreen = action.isFullscreen;
             if (state[guid]) {
                 return state;
             }
-            var newState = __assign(__assign({}, state), (_a = {}, _a["" + guid] = true, _a));
+            var newState = __assign(__assign({}, state), (_a = {}, _a["" + guid] = { index: index, isFullscreen: isFullscreen }, _a));
             return newState;
         }
         case actions_1.ACTION.MODAL_EXITED: {

package/lib/utils/table.d.ts

@@ -0,0 +1,7 @@
+export declare const getManageTableTabName: (selectedTab?: number | undefined) => "" | "Available" | "Deleted";
+export declare const getGroupManageTableTabName: (selectedTab?: number | undefined) => "" | "Deleted" | "Current" | "Past";
+/**
+ * return page size options that are less than or equal to the total data length,
+ * and one that is greater (if it exists) to allow viewing all data on one page.
+ * */
+export declare const getPageSizeOptions: (dataLength?: number | undefined) => number[];

package/lib/utils/{manageTable.js → table.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getGroupManageTableTabName = exports.getManageTableTabName = void 0;
+exports.getPageSizeOptions = exports.getGroupManageTableTabName = exports.getManageTableTabName = void 0;
 var table_1 = require("../constants/table");
 var getManageTableTabName = function (selectedTab) {
     switch (selectedTab) {
@@ -26,3 +26,17 @@ var getGroupManageTableTabName = function (selectedTab) {
     }
 };
 exports.getGroupManageTableTabName = getGroupManageTableTabName;
+/**
+ * return page size options that are less than or equal to the total data length,
+ * and one that is greater (if it exists) to allow viewing all data on one page.
+ * */
+var getPageSizeOptions = function (dataLength) {
+    return table_1.TABLE_PAGE_SIZE_OPTIONS.reduce(function (options, option, currentIndex) {
+        var prevOption = currentIndex > 0 ? options[currentIndex - 1] : undefined;
+        if (!dataLength || option < dataLength || (prevOption && prevOption < dataLength)) {
+            options.push(option);
+        }
+        return options;
+    }, []);
+};
+exports.getPageSizeOptions = getPageSizeOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "studiokit-scaffolding-js",
-	"version": "5.1.0",
+	"version": "5.1.2",
 	"description": "Common scaffolding for Studio apps at Purdue",
 	"repository": "https://gitlab.com/purdue-informatics/studiokit/studiokit-scaffolding-js",
 	"license": "MIT",

package/lib/utils/manageTable.d.ts

@@ -1,2 +0,0 @@
-export declare const getManageTableTabName: (selectedTab?: number | undefined) => "" | "Available" | "Deleted";
-export declare const getGroupManageTableTabName: (selectedTab?: number | undefined) => "" | "Deleted" | "Current" | "Past";