studiokit-scaffolding-js 5.1.4 → 5.1.5

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,134 +1,134 @@
-# 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`
-	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`
+	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,20 +1,20 @@
-import { FunctionComponent } from 'react';
-import { Model } from '../types';
-export interface ActionListProps {
-    actions?: ListAction[];
-    model: Model | null;
-    className?: string;
-    /** Even when there is a single ListAction, show the kebab menu */
-    alwaysShowKebab?: boolean;
-}
-export interface ListAction {
-    predicate: boolean;
-    action: () => void;
-    name: string;
-    icon: JSX.Element;
-    className: string;
-    id: string;
-    isDefault?: boolean;
-    disabled?: boolean;
-}
-export declare const ActionList: FunctionComponent<ActionListProps>;
+import { FunctionComponent } from 'react';
+import { Model } from '../types';
+export interface ActionListProps {
+    actions?: ListAction[];
+    model: Model | null;
+    className?: string;
+    /** Even when there is a single ListAction, show the kebab menu */
+    alwaysShowKebab?: boolean;
+}
+export interface ListAction {
+    predicate: boolean;
+    action: () => void;
+    name: string;
+    icon: JSX.Element;
+    className: string;
+    id: string;
+    isDefault?: boolean;
+    disabled?: boolean;
+}
+export declare const ActionList: FunctionComponent<ActionListProps>;

package/lib/components/ActionList.js

@@ -1,94 +1,94 @@
-"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]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : 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 __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 () {
-        setInfoMenuAnchorElement(undefined);
-        action === null || action === void 0 ? void 0 : action();
-    }; };
-    var handleListKeyDown = function (event) {
-        var _a;
-        if (event.key === 'Tab' || event.key === 'Escape' || event.key === 'Esc') {
-            event.preventDefault();
-            setInfoMenuAnchorElement(undefined);
-            (_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; });
-    if (defaultAction) {
-        allowedActions = allowedActions.filter(function (a) { return 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;
-                            }))))));
-            })))));
-};
-exports.ActionList = ActionList;
+"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]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : 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 __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 () {
+        setInfoMenuAnchorElement(undefined);
+        action === null || action === void 0 ? void 0 : action();
+    }; };
+    var handleListKeyDown = function (event) {
+        var _a;
+        if (event.key === 'Tab' || event.key === 'Escape' || event.key === 'Esc') {
+            event.preventDefault();
+            setInfoMenuAnchorElement(undefined);
+            (_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; });
+    if (defaultAction) {
+        allowedActions = allowedActions.filter(function (a) { return 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;
+                            }))))));
+            })))));
+};
+exports.ActionList = ActionList;

package/lib/components/AlertDialog.d.ts

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

package/lib/components/AlertDialog.js

@@ -1,22 +1,22 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": 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')))));
-};
-exports.AlertDialog = AlertDialog;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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')))));
+};
+exports.AlertDialog = AlertDialog;