studiokit-scaffolding-js 7.0.11-alpha.7 → 7.0.12-next.1.1

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2019 Purdue Informatics / StudioKit
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2019 Purdue Informatics / StudioKit
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,137 +1,137 @@
-# studiokit-scaffolding-js
-
-**studiokit-scaffolding-js** provides a common scaffolding for react apps.
-
-1. [Installation](#installation)
-1. [Usage](#usage)
-1. [Development](#development)
-
-# Installation
-
-## Install this library and call startup methods
-1. `yarn add studiokit-scaffolding-js`
-1. (Optional) Call configurable extensions in your main entry file
-	* `redux/sagas/rootSaga`
-		* `setOtherDependentSagas` to add more sagas
-	* `redux/sagas/postLoginDataSaga`
-		* `setOnPostLogin` to load more data after login
-	* `redux/configureReducers`
-		* `updatePersistBlacklist` and `setOtherReducers` to add more reducers
-1. In your main entry file call `startup`
-	```js
-	import { startup, endpointMappings } from 'studiokit-scaffolding-js'
-
-	const appConfig = {/* AppConfiguration */}
-	const endpointMappings = {...endpointMappings, .../* App EndpointMappings */}
-	const { history, store, persistor } = startup(appConfig, endpointMappings)
-
-	// render using history, store, persistor
-	ReactDOM.render(
-		...
-	)
-	```
-## Styles
-
-### Basic Setup
-
-In your project’s startup `index.tsx` file, import the scaffolding styles as follows
-
-```ts
-...third party css...
-
-import 'studiokit-scaffolding-js/lib/css/index-with-variables.css'
-
-...project specific css...
-```
-
-In `config-overrides.js` when setting up `react-app-require-postcss`, in order for css variables to work, the `importFrom` array should look like the following:
-
-```js
-importFrom: [
-	'node_modules/studiokit-scaffolding-js/lib/css/variables.css'
-]
-```
-### Variable Override Setup
-
-In order to override certain color variables from `variables.css`, they must be overridden _before_ scaffolding’s `index.css` file is imported.
-
-In your project’s startup `index.tsx` file, import the scaffolding styles as follows
-
-```ts
-...third party css...
-
-import 'studiokit-scaffolding-js/lib/css/variables.css'
-import './css/variables.css'
-import 'studiokit-scaffolding-js/lib/css/index.css'
-import './css/index.css'
-```
-
-In `config-overrides.js` when setting up `react-app-require-postcss`, in order for css variables to work, the `importFrom` array should look like the following:
-
-```js
-importFrom: [
-	'node_modules/studiokit-scaffolding-js/lib/css/variables.css',
-	'src/css/variables.css'
-]
-```
-
-# Usage
-
-## Components and Utils
-
-Components and utils can be imported from `studiokit-scaffolding-js/lib/...`
-
-# Development
-
-## Branches
-
-1. Create a new branch
-	* **Feature/Issue**: In GitLab from an issue, create a branch off of `develop`
-	* **Hotfix**: Create a `hotfix` branch off of `master` (manually or in GitLab by making an MR)
-1. Update the version number
-	* **Feature/Issue**
-		* append `-next.1.1`
-		* e.g. If the current version is `1.0.0`, the new branch should be `1.0.0-next.1.1`
-	* **Hotfix**
-		* increase the version number and append `-alpha.1`
-		* e.g. If the current version is `1.0.0`, the new branch should be `1.0.1-alpha.1` for hotfix
-	* **NOTE:** if **more than one** branch is being developed on at the same time, simply increment the **first** number after "next"
-		* e.g. `1.0.0-next.2.1` for the second issue branch (this won't apply for hotfixes)
-1. Development Loop
-	1. Add/update new components, utils, or styles
-	1. Add/update unit tests for those components or utils to confirm basic functionality
-	1. Increment the **last** number in the version
-		* e.g. `1.0.0-next.2.1` => `1.0.0-next.2.2` for a feature/issue branch
-		* e.g. `1.0.1-alpha.1` => `1.0.1-alpha.2` for a hotfix branch
-	1. Push to gitlab. Azure DevOps will run a pipeline and publish this version to npmjs.org
-	1. Install the new version in the project(s) you are working on by updating its `package.json` and running `yarn`
-		  * As an alternative to the two steps above, if you don't need to make changes available to other devs yet you can:
-		    1. In the studiokit directory, run `yarn build` then `yarn pack`. You'll still need to have incremented the version number to avoid having it cached.
-			1. Over in the Circuit/Variate/etc. directory, run `yarn add ../studiokit-scaffolding-js/package.tgz`. 
-	1. Repeat as needed
-1. Merging
-	* After the Merge Request is approved, **remove** the "next" or "alpha" suffix from the version **before** merging to develop or master
-	* For **hotfix** branches, the version number should be the new patch number, e.g. `1.0.1`
-1. Release
-	* **Feature/Issue**: After merging, create a new "release" branch from `develop` and follow the "git flow" release steps as normal
-	* **Hotfix**: Finish the "git flow" hotfix steps as normal from the hotfix branch
-	* Azure DevOps will run a pipeline to publish the version merged to `master` to npmjs.org
-
-## Styles
-
-Styles are organized into the following folders and files inside of `src/css`
-
-1. `variables.css`
-	* Global constant variables
-	* Common app-specific variables
-1. `utils`
-	* Assorted utility styles, similar to tachyons
-	* Break out similar styles into separate files once a few similar ones exist
-		* e.g. `_display.css` contains all `display: ...;` related modifier styles
-1. `base`
-	* `_base.css`: Generic tags, .skip-main link, and .main-content
-	* `_typography.css`: Default fonts, font scale, and text colors
-1. `components`
-	* Global component specific styles (e.g. not functional like tachyons)
-
-Your project’s css folders and files should follow this same pattern.
+# studiokit-scaffolding-js
+
+**studiokit-scaffolding-js** provides a common scaffolding for react apps.
+
+1. [Installation](#installation)
+1. [Usage](#usage)
+1. [Development](#development)
+
+# Installation
+
+## Install this library and call startup methods
+1. `yarn add studiokit-scaffolding-js`
+1. (Optional) Call configurable extensions in your main entry file
+	* `redux/sagas/rootSaga`
+		* `setOtherDependentSagas` to add more sagas
+	* `redux/sagas/postLoginDataSaga`
+		* `setOnPostLogin` to load more data after login
+	* `redux/configureReducers`
+		* `updatePersistBlacklist` and `setOtherReducers` to add more reducers
+1. In your main entry file call `startup`
+	```js
+	import { startup, endpointMappings } from 'studiokit-scaffolding-js'
+
+	const appConfig = {/* AppConfiguration */}
+	const endpointMappings = {...endpointMappings, .../* App EndpointMappings */}
+	const { history, store, persistor } = startup(appConfig, endpointMappings)
+
+	// render using history, store, persistor
+	ReactDOM.render(
+		...
+	)
+	```
+## Styles
+
+### Basic Setup
+
+In your project’s startup `index.tsx` file, import the scaffolding styles as follows
+
+```ts
+...third party css...
+
+import 'studiokit-scaffolding-js/lib/css/index-with-variables.css'
+
+...project specific css...
+```
+
+In `config-overrides.js` when setting up `react-app-require-postcss`, in order for css variables to work, the `importFrom` array should look like the following:
+
+```js
+importFrom: [
+	'node_modules/studiokit-scaffolding-js/lib/css/variables.css'
+]
+```
+### Variable Override Setup
+
+In order to override certain color variables from `variables.css`, they must be overridden _before_ scaffolding’s `index.css` file is imported.
+
+In your project’s startup `index.tsx` file, import the scaffolding styles as follows
+
+```ts
+...third party css...
+
+import 'studiokit-scaffolding-js/lib/css/variables.css'
+import './css/variables.css'
+import 'studiokit-scaffolding-js/lib/css/index.css'
+import './css/index.css'
+```
+
+In `config-overrides.js` when setting up `react-app-require-postcss`, in order for css variables to work, the `importFrom` array should look like the following:
+
+```js
+importFrom: [
+	'node_modules/studiokit-scaffolding-js/lib/css/variables.css',
+	'src/css/variables.css'
+]
+```
+
+# Usage
+
+## Components and Utils
+
+Components and utils can be imported from `studiokit-scaffolding-js/lib/...`
+
+# Development
+
+## Branches
+
+1. Create a new branch
+	* **Feature/Issue**: In GitLab from an issue, create a branch off of `develop`
+	* **Hotfix**: Create a `hotfix` branch off of `master` (manually or in GitLab by making an MR)
+1. Update the version number
+	* **Feature/Issue**
+		* append `-next.1.1`
+		* e.g. If the current version is `1.0.0`, the new branch should be `1.0.0-next.1.1`
+	* **Hotfix**
+		* increase the version number and append `-alpha.1`
+		* e.g. If the current version is `1.0.0`, the new branch should be `1.0.1-alpha.1` for hotfix
+	* **NOTE:** if **more than one** branch is being developed on at the same time, simply increment the **first** number after "next"
+		* e.g. `1.0.0-next.2.1` for the second issue branch (this won't apply for hotfixes)
+1. Development Loop
+	1. Add/update new components, utils, or styles
+	1. Add/update unit tests for those components or utils to confirm basic functionality
+	1. Increment the **last** number in the version
+		* e.g. `1.0.0-next.2.1` => `1.0.0-next.2.2` for a feature/issue branch
+		* e.g. `1.0.1-alpha.1` => `1.0.1-alpha.2` for a hotfix branch
+	1. Push to gitlab. Azure DevOps will run a pipeline and publish this version to npmjs.org
+	1. Install the new version in the project(s) you are working on by updating its `package.json` and running `yarn`
+		  * As an alternative to the two steps above, if you don't need to make changes available to other devs yet you can:
+		    1. In the studiokit directory, run `yarn build` then `yarn pack`. You'll still need to have incremented the version number to avoid having it cached.
+			1. Over in the Circuit/Variate/etc. directory, run `yarn add ../studiokit-scaffolding-js/package.tgz`. 
+	1. Repeat as needed
+1. Merging
+	* After the Merge Request is approved, **remove** the "next" or "alpha" suffix from the version **before** merging to develop or master
+	* For **hotfix** branches, the version number should be the new patch number, e.g. `1.0.1`
+1. Release
+	* **Feature/Issue**: After merging, create a new "release" branch from `develop` and follow the "git flow" release steps as normal
+	* **Hotfix**: Finish the "git flow" hotfix steps as normal from the hotfix branch
+	* Azure DevOps will run a pipeline to publish the version merged to `master` to npmjs.org
+
+## Styles
+
+Styles are organized into the following folders and files inside of `src/css`
+
+1. `variables.css`
+	* Global constant variables
+	* Common app-specific variables
+1. `utils`
+	* Assorted utility styles, similar to tachyons
+	* Break out similar styles into separate files once a few similar ones exist
+		* e.g. `_display.css` contains all `display: ...;` related modifier styles
+1. `base`
+	* `_base.css`: Generic tags, .skip-main link, and .main-content
+	* `_typography.css`: Default fonts, font scale, and text colors
+1. `components`
+	* Global component specific styles (e.g. not functional like tachyons)
+
+Your project’s css folders and files should follow this same pattern.

package/lib/components/ActionList.d.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react';
+import React, { FunctionComponent } from 'react';
 import { Model } from '../types';
 export interface ActionListProps {
     actions?: ListAction[];
@@ -11,7 +11,7 @@ export interface ListAction {
     predicate: boolean;
     action: () => void;
     name: string;
-    icon: JSX.Element;
+    icon: React.JSX.Element;
     className: string;
     id: string;
     isDefault?: boolean;

package/lib/components/ActionList.js

@@ -1,18 +1,11 @@
 "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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -22,37 +15,40 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionList = void 0;
-var core_1 = require("@material-ui/core");
-var MoreVert_1 = __importDefault(require("@material-ui/icons/MoreVert"));
-var react_1 = __importStar(require("react"));
-var ActionList = function (_a) {
-    var _b = _a.actions, actions = _b === void 0 ? [] : _b, _c = _a.model, model = _c === void 0 ? null : _c, className = _a.className, alwaysShowKebab = _a.alwaysShowKebab;
-    var anchorRef = react_1.default.useRef(null);
-    var _d = react_1.useState(undefined), infoMenuAnchorElement = _d[0], setInfoMenuAnchorElement = _d[1];
-    var onActionItemClick = function (action) { return function () {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@material-ui/core");
+const MoreVert_1 = __importDefault(require("@material-ui/icons/MoreVert"));
+const react_1 = __importStar(require("react"));
+const ActionList = ({ actions = [], model = null, className, alwaysShowKebab }) => {
+    const anchorRef = react_1.default.useRef(null);
+    const [infoMenuAnchorElement, setInfoMenuAnchorElement] = (0, react_1.useState)(undefined);
+    const onActionItemClick = (action) => () => {
         setInfoMenuAnchorElement(undefined);
         action === null || action === void 0 ? void 0 : action();
-    }; };
-    var handleListKeyDown = function (event) {
+    };
+    const handleListKeyDown = (event) => {
         var _a;
         if (event.key === 'Tab' || event.key === 'Escape' || event.key === 'Esc') {
             event.preventDefault();
@@ -60,35 +56,21 @@ var ActionList = function (_a) {
             (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     };
-    var allowedActions = actions.filter(function (a) { return a.predicate; });
-    var actionCount = allowedActions.length;
-    var defaultAction = actionCount === 1 && !alwaysShowKebab ? allowedActions[0] : allowedActions.find(function (a) { return !!a.isDefault; });
+    let allowedActions = actions.filter((a) => a.predicate);
+    const actionCount = allowedActions.length;
+    const defaultAction = actionCount === 1 && !alwaysShowKebab ? allowedActions[0] : allowedActions.find(a => !!a.isDefault);
     if (defaultAction) {
-        allowedActions = allowedActions.filter(function (a) { return a !== defaultAction; });
+        allowedActions = allowedActions.filter(a => a !== defaultAction);
     }
-    return (react_1.default.createElement("div", { className: !!defaultAction && !!model && (actionCount > 1 || alwaysShowKebab) ? 'inline-flex' : 'di' },
-        !!defaultAction && (react_1.default.createElement(core_1.Button, { color: "primary", onClick: defaultAction.action, id: defaultAction.id, className: defaultAction.className || '', disabled: defaultAction.disabled },
-            defaultAction.icon,
-            defaultAction.name)),
-        !!model && (actionCount > 1 || alwaysShowKebab) && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(core_1.Button, { ref: anchorRef, onClick: function (event) { return setInfoMenuAnchorElement(event.currentTarget); }, "aria-label": "Actions", "aria-haspopup": "true", "aria-controls": infoMenuAnchorElement ? "info-menu-" + model.id : undefined, className: "action-list-text-button" + (defaultAction ? ' with-default-action' : ''), color: "primary" },
-                "Actions",
-                react_1.default.createElement(MoreVert_1.default, { color: "primary" })),
-            react_1.default.createElement(core_1.IconButton, { ref: anchorRef, onClick: function (event) { return setInfoMenuAnchorElement(event.currentTarget); }, "aria-label": "Actions", "aria-haspopup": "true", "aria-controls": infoMenuAnchorElement ? "info-menu-" + model.id : undefined, className: "action-list-icon-button" + (defaultAction ? ' with-default-action' : '') },
-                react_1.default.createElement(MoreVert_1.default, { color: "primary" })),
-            react_1.default.createElement(core_1.Popper, { open: !!infoMenuAnchorElement, anchorEl: infoMenuAnchorElement, placement: "bottom-end", className: "z-1" + (className ? " " + className : ''), transition: true }, function (_a) {
-                var TransitionProps = _a.TransitionProps, placement = _a.placement;
-                return (react_1.default.createElement(core_1.Grow, __assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom-end' ? 'top right' : 'bottom right' } }),
-                    react_1.default.createElement(core_1.Paper, null,
-                        react_1.default.createElement(core_1.ClickAwayListener, { onClickAway: onActionItemClick() },
-                            react_1.default.createElement(core_1.MenuList, { id: "info-menu-" + model.id, autoFocusItem: !!infoMenuAnchorElement, onKeyDown: handleListKeyDown, className: "action-list shadow-large" }, allowedActions.map(function (a, index) {
-                                return a.predicate
-                                    ? __spreadArrays((index > 0 ? [react_1.default.createElement(core_1.Divider, null)] : []), [
-                                        react_1.default.createElement(core_1.MenuItem, { key: a.id, className: "action-list-menu mv1 pv2 " + a.className, onClick: onActionItemClick(a.action), color: "primary", disabled: a.disabled },
-                                            a.icon,
-                                            a.name)
-                                    ]) : undefined;
-                            }))))));
-            })))));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: !!defaultAction && !!model && (actionCount > 1 || alwaysShowKebab) ? 'inline-flex' : 'di', children: [!!defaultAction && ((0, jsx_runtime_1.jsxs)(core_1.Button, { color: "primary", onClick: defaultAction.action, id: defaultAction.id, className: defaultAction.className || '', disabled: defaultAction.disabled, children: [defaultAction.icon, defaultAction.name] })), !!model && (actionCount > 1 || alwaysShowKebab) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(core_1.Button, { ref: anchorRef, onClick: event => {
+                            setInfoMenuAnchorElement(event.currentTarget);
+                        }, "aria-label": "Actions", "aria-haspopup": "true", "aria-controls": infoMenuAnchorElement ? `info-menu-${model.id}` : undefined, className: `action-list-text-button${defaultAction ? ' with-default-action' : ''}`, color: "primary", children: ["Actions", (0, jsx_runtime_1.jsx)(MoreVert_1.default, { color: "primary" })] }), (0, jsx_runtime_1.jsx)(core_1.IconButton, { ref: anchorRef, onClick: event => {
+                            setInfoMenuAnchorElement(event.currentTarget);
+                        }, "aria-label": "Actions", "aria-haspopup": "true", "aria-controls": infoMenuAnchorElement ? `info-menu-${model.id}` : undefined, className: `action-list-icon-button${defaultAction ? ' with-default-action' : ''}`, children: (0, jsx_runtime_1.jsx)(MoreVert_1.default, { color: "primary" }) }), (0, jsx_runtime_1.jsx)(core_1.Popper, { open: !!infoMenuAnchorElement, anchorEl: infoMenuAnchorElement, placement: "bottom-end", className: `z-1${className ? ` ${className}` : ''}`, transition: true, children: ({ TransitionProps, placement }) => ((0, jsx_runtime_1.jsx)(core_1.Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom-end' ? 'top right' : 'bottom right' }, children: (0, jsx_runtime_1.jsx)(core_1.Paper, { children: (0, jsx_runtime_1.jsx)(core_1.ClickAwayListener, { onClickAway: onActionItemClick(), children: (0, jsx_runtime_1.jsx)(core_1.MenuList, { id: `info-menu-${model.id}`, autoFocusItem: !!infoMenuAnchorElement, onKeyDown: handleListKeyDown, className: "action-list shadow-large", children: allowedActions.map((a, index) => a.predicate
+                                            ? [
+                                                ...(index > 0 ? [(0, jsx_runtime_1.jsx)(core_1.Divider, {})] : []),
+                                                (0, jsx_runtime_1.jsxs)(core_1.MenuItem, { className: `action-list-menu mv1 pv2 ${a.className}`, onClick: onActionItemClick(a.action), color: "primary", disabled: a.disabled, children: [a.icon, a.name] }, a.id)
+                                            ]
+                                            : undefined) }) }) }) }))) })] }))] }));
 };
 exports.ActionList = ActionList;

package/lib/components/AlertDialog.d.ts

@@ -1,9 +1,9 @@
-import { FunctionComponent, MouseEventHandler } from 'react';
+import React, { FunctionComponent, MouseEventHandler } from 'react';
 export interface AlertDialogProps {
     id?: string;
     isOpen: boolean;
-    title: string | JSX.Element;
-    description?: string | JSX.Element | void;
+    title: string | React.JSX.Element;
+    description?: string | React.JSX.Element;
     onProceed?: MouseEventHandler<HTMLElement>;
     proceedText?: string;
     /** onCancel is needed for closing using the X button, clicking the backdrop, or clicking the cancel button*/

package/lib/components/AlertDialog.js

@@ -4,19 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertDialog = void 0;
-var Button_1 = __importDefault(require("@material-ui/core/Button"));
-var react_1 = __importDefault(require("react"));
-var react_bootstrap_1 = require("react-bootstrap");
-var ConnectedModal_1 = __importDefault(require("./ConnectedModal"));
-var AlertDialog = function (props) {
-    var isOpen = props.isOpen, title = props.title, description = props.description, onProceed = props.onProceed, proceedText = props.proceedText, onCancel = props.onCancel, cancelText = props.cancelText, hideCancel = props.hideCancel, onDestroy = props.onDestroy, destroyText = props.destroyText, manualBackground = props.manualBackground;
-    return (react_1.default.createElement(ConnectedModal_1.default, { show: isOpen, onHide: onCancel, className: "z-9999" + (manualBackground ? ' bg-black-50' : '') },
-        react_1.default.createElement(react_bootstrap_1.Modal.Header, { closeButton: true },
-            react_1.default.createElement(react_bootstrap_1.Modal.Title, null, title)),
-        !!description && react_1.default.createElement(react_bootstrap_1.Modal.Body, null, description),
-        react_1.default.createElement(react_bootstrap_1.Modal.Footer, null,
-            !!onProceed && (react_1.default.createElement(Button_1.default, { id: "alert-dialog-proceed-btn", "aria-label": proceedText || 'Confirm', className: "btn-primary ttc fr mb1", color: "primary", onClick: onProceed }, proceedText || 'Confirm')),
-            !hideCancel && (react_1.default.createElement(Button_1.default, { id: "alert-dialog-cancel-btn", color: "primary", "aria-label": cancelText || 'Cancel', className: "btn-text ttc" + (onDestroy ? ' fr' : ' fl') + " " + (onProceed ? ' mr1' : ''), onClick: onCancel }, cancelText || 'Cancel')),
-            !!onDestroy && (react_1.default.createElement(Button_1.default, { id: "alert-dialog-destroy-btn", "aria-label": destroyText || 'Destroy', color: "secondary", className: "btn-text color-red ttc fl", onClick: onDestroy }, destroyText || 'Destroy')))));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = __importDefault(require("@material-ui/core/Button"));
+const react_bootstrap_1 = require("react-bootstrap");
+const ConnectedModal_1 = __importDefault(require("./ConnectedModal"));
+const AlertDialog = (props) => {
+    const { isOpen, title, description, onProceed, proceedText, onCancel, cancelText, hideCancel, onDestroy, destroyText, manualBackground } = props;
+    return ((0, jsx_runtime_1.jsxs)(ConnectedModal_1.default, { show: isOpen, onHide: onCancel, className: `z-9999${manualBackground ? ' bg-black-50' : ''}`, children: [(0, jsx_runtime_1.jsx)(react_bootstrap_1.Modal.Header, { closeButton: true, children: (0, jsx_runtime_1.jsx)(react_bootstrap_1.Modal.Title, { children: title }) }), !!description && (0, jsx_runtime_1.jsx)(react_bootstrap_1.Modal.Body, { children: description }), (0, jsx_runtime_1.jsxs)(react_bootstrap_1.Modal.Footer, { children: [!!onProceed && ((0, jsx_runtime_1.jsx)(Button_1.default, { id: "alert-dialog-proceed-btn", "aria-label": proceedText || 'Confirm', className: "btn-primary ttc fr mb1", color: "primary", onClick: onProceed, children: proceedText || 'Confirm' })), !hideCancel && ((0, jsx_runtime_1.jsx)(Button_1.default, { id: "alert-dialog-cancel-btn", color: "primary", "aria-label": cancelText || 'Cancel', className: `btn-text ttc${onDestroy ? ' fr' : ' fl'} ${onProceed ? ' mr1' : ''}`, onClick: onCancel, children: cancelText || 'Cancel' })), !!onDestroy && ((0, jsx_runtime_1.jsx)(Button_1.default, { id: "alert-dialog-destroy-btn", "aria-label": destroyText || 'Destroy', color: "secondary", className: "btn-text color-red ttc fl", onClick: onDestroy, children: destroyText || 'Destroy' }))] })] }));
 };
 exports.AlertDialog = AlertDialog;

package/lib/components/AlertWithIcon.js

@@ -1,15 +1,4 @@
 "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 __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -26,33 +15,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertWithIcon = void 0;
-var CheckCircle_1 = __importDefault(require("@material-ui/icons/CheckCircle"));
-var Error_1 = __importDefault(require("@material-ui/icons/Error"));
-var Info_1 = __importDefault(require("@material-ui/icons/Info"));
-var Warning_1 = __importDefault(require("@material-ui/icons/Warning"));
-var react_1 = __importDefault(require("react"));
-var react_bootstrap_1 = require("react-bootstrap");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CheckCircle_1 = __importDefault(require("@material-ui/icons/CheckCircle"));
+const Error_1 = __importDefault(require("@material-ui/icons/Error"));
+const Info_1 = __importDefault(require("@material-ui/icons/Info"));
+const Warning_1 = __importDefault(require("@material-ui/icons/Warning"));
+const react_bootstrap_1 = require("react-bootstrap");
 function getIconForVariant(variant, iconClassName) {
-    var combinedIconClassName = "self-start mr2 " + (iconClassName ? " " + iconClassName : '');
+    const combinedIconClassName = `self-start mr2 ${iconClassName ? ` ${iconClassName}` : ''}`;
     switch (variant) {
         case 'success':
-            return react_1.default.createElement(CheckCircle_1.default, { className: combinedIconClassName });
+            return (0, jsx_runtime_1.jsx)(CheckCircle_1.default, { className: combinedIconClassName });
         case 'info':
-            return react_1.default.createElement(Info_1.default, { className: combinedIconClassName });
+            return (0, jsx_runtime_1.jsx)(Info_1.default, { className: combinedIconClassName });
         case 'warning':
-            return react_1.default.createElement(Warning_1.default, { className: combinedIconClassName });
+            return (0, jsx_runtime_1.jsx)(Warning_1.default, { className: combinedIconClassName });
         case 'danger':
-            return react_1.default.createElement(Error_1.default, { className: combinedIconClassName });
+            return (0, jsx_runtime_1.jsx)(Error_1.default, { className: combinedIconClassName });
         default:
             return null;
     }
 }
-var AlertWithIcon = function (props) {
-    var iconClassName = props.iconClassName, className = props.className, children = props.children, variant = props.variant, otherProps = __rest(props, ["iconClassName", "className", "children", "variant"]);
-    var combinedClassName = "alert-with-icon" + (className ? " " + className : '');
-    var Icon = getIconForVariant(variant, iconClassName);
-    return (react_1.default.createElement(react_bootstrap_1.Alert, __assign({ className: combinedClassName, variant: variant }, otherProps),
-        Icon,
-        props.children));
+const AlertWithIcon = props => {
+    const { iconClassName, className, children, variant } = props, otherProps = __rest(props, ["iconClassName", "className", "children", "variant"]);
+    const combinedClassName = `alert-with-icon${className ? ` ${className}` : ''}`;
+    const Icon = getIconForVariant(variant, iconClassName);
+    return ((0, jsx_runtime_1.jsxs)(react_bootstrap_1.Alert, Object.assign({ className: combinedClassName, variant: variant }, otherProps, { children: [Icon, props.children] })));
 };
 exports.AlertWithIcon = AlertWithIcon;

package/lib/components/ConnectedModal.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import { ModalProps } from 'react-bootstrap';
-declare const _default: React.ComponentClass<ModalProps, any>;
 /**
  * Wrapped version of "react-bootstrap"'s `Modal` component. Uses `ConnectedModalComponent` to coordinate modal state in redux.
  */
+declare const _default: import("react").ComponentClass<ModalProps, any>;
 export default _default;