@adaptabletools/adaptable 11.3.0 → 12.0.0-canary.2

package/src/View/CellSummary/CellSummaryPopup.js

@@ -9,6 +9,14 @@ const CellSummaryDetails_1 = require("./CellSummaryDetails");
 const PanelWithButton_1 = require("../Components/Panels/PanelWithButton");
 class CellSummaryPopupComponent extends React.Component {
     componentDidMount() {
+        var _a, _b, _c;
+        if (((_a = this.props.popupParams) === null || _a === void 0 ? void 0 : _a.source) === 'ColumnMenu' && ((_b = this.props.popupParams) === null || _b === void 0 ? void 0 : _b.column)) {
+            // if the summary was requested from the column menu, we need to select the entire column
+            // afterwards, we will go on with the cell summary logic, as that will evaluate the current(column) cell selection
+            this.props.api.columnApi.selectColumn((_c = this.props.popupParams) === null || _c === void 0 ? void 0 : _c.column.columnId);
+            // we also need to update the internal state of the selected cells
+            this.props.api.internalApi.getAdaptableInstance().setSelectedCells();
+        }
         this.props.onCreateCellSummary();
     }
     render() {

package/src/View/CellSummary/CellSummaryStatusBarSubPanelPopover.js

@@ -11,5 +11,5 @@ exports.CellSummaryStatusBarSubPanelPopover = () => {
     return cellSummary && cellSummary.Count ? (summary) : (
     // the extra wrapper is added because the empty text is rendered
     // inside a  EmptyContent, hat has position absolute
-    React.createElement("div", { style: { position: 'relative', width: 200, height: 80 } }, summary));
+    React.createElement("div", { style: { position: 'relative', width: '100%', height: 80 } }, summary));
 };

package/src/View/CellSummary/CellSummaryStatusPanel.js

@@ -14,7 +14,7 @@ exports.CellSummaryStatusPanel = () => {
     const adaptable = AdaptableContext_1.useAdaptable();
     const dispatch = react_redux_1.useDispatch();
     const cellSummaryApi = adaptable.api.cellSummaryApi;
-    const cellSummaryModule = adaptable.ModuleService.getModuleById(ModuleConstants.CellSummaryModuleId);
+    const module = adaptable.ModuleService.getModuleById(ModuleConstants.CellSummaryModuleId);
     const text = `${cellSummaryApi.getCurrentCellSummaryOperation()}: ${(_a = cellSummaryApi.getCurrentCellSummaryOperationValue()) !== null && _a !== void 0 ? _a : 'N/A'}`;
     const onAction = () => {
         adaptable.api.cellSummaryApi.showCellSummaryPopup();
@@ -32,5 +32,5 @@ exports.CellSummaryStatusPanel = () => {
         checkSelectedCells();
         return () => cleanupEvent === null || cleanupEvent === void 0 ? void 0 : cleanupEvent();
     }, []);
-    return (React.createElement(StatusBarPanel_1.StatusBarPanel, { icon: cellSummaryModule.moduleInfo.Glyph, onAction: onAction, content: text, popover: CellSummaryStatusBarSubPanelPopover_1.CellSummaryStatusBarSubPanelPopover }));
+    return (React.createElement(StatusBarPanel_1.StatusBarPanel, { tooltip: module.moduleInfo.ModuleName, "data-name": module.moduleInfo.ModuleName, icon: module.moduleInfo.Glyph, onAction: onAction, content: text, popover: CellSummaryStatusBarSubPanelPopover_1.CellSummaryStatusBarSubPanelPopover, popoverMinWidth: 360 }));
 };

package/src/View/CellSummary/CellSummaryViewPanel.js

@@ -67,7 +67,7 @@ class CellSummaryViewPanelComponent extends React.Component {
                 React.createElement(DropdownButton_1.default, { style: { fontSize: 'small', width: '100%' }, marginRight: 2, columns: ['label'], className: `ab-${elementType}__CellSummary__select`, items: [...operationMenuItems, ...operationDefinitions], disabled: shouldDisable, variant: "outlined", tone: 'neutral' }, this.props.CellSummaryOperation)),
             React.createElement(rebass_1.Flex, { alignItems: "center" }, React.createElement(React.Fragment, null,
                 renderOperationValue(),
-                this.props.CellSummary != null && this.props.CellSummary.Count > 0 && (React.createElement(AdaptablePopover_1.AdaptablePopover, { className: "ab-ToolPanel__CellSummary__info", bodyText: [cellSummaryPopover], useButton: true, showEvent: 'focus', hideEvent: "blur" }))))));
+                this.props.CellSummary != null && this.props.CellSummary.Count > 0 && (React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMaxWidth: 360, className: "ab-ToolPanel__CellSummary__info", bodyText: [cellSummaryPopover], useButton: true, showEvent: 'focus', hideEvent: "blur" }))))));
     }
     checkSelectedCells() {
         this.props.onCreateCellSummary();

package/src/View/Components/AdaptableObjectList/AdaptableObjectCompactList.js

@@ -11,31 +11,41 @@ const ValueSelector_1 = require("../ValueSelector");
 const baseClassName = 'ab-Adaptable-Object-Compact-List';
 const ICON_SIZE = 20;
 exports.AdaptableObjectCompactListItem = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const dispatch = react_redux_1.useDispatch();
     const adaptable = AdaptableContext_1.useAdaptable();
     const objectView = props.module.toViewCompact(props.abObject);
     const viewOptions = (_b = (_a = props.module) === null || _a === void 0 ? void 0 : _a.getViewProperties) === null || _b === void 0 ? void 0 : _b.call(_a);
-    const deleteAction = (_c = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.getDeleteAction) === null || _c === void 0 ? void 0 : _c.call(viewOptions, props.abObject);
+    const deleteAction = (_c = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.getCompactDeleteAction) === null || _c === void 0 ? void 0 : _c.call(viewOptions, props.abObject);
     const moduleAccessLevel = adaptable.api.internalApi
         .getEntitlementService()
         .getEntitlementAccessLevelForModule(props.module.moduleInfo.ModuleName);
     const handleDelete = React.useCallback(() => {
         dispatch(deleteAction);
     }, []);
+    const name = (_d = objectView.item.label) !== null && _d !== void 0 ? _d : objectView.item.name;
     return (React.createElement(rebass_1.Flex, { className: `${baseClassName}__Item`, alignItems: "center" },
-        React.createElement(rebass_1.Flex, { className: `${baseClassName}__Item__Name` }, (_d = objectView.item.label) !== null && _d !== void 0 ? _d : objectView.item.name),
+        name && (React.createElement(rebass_1.Flex, { className: `${baseClassName}__Item__Name` }, (_e = objectView.item.label) !== null && _e !== void 0 ? _e : objectView.item.name)),
         React.createElement(rebass_1.Box, { flex: 1 },
             objectView.item.view &&
                 React.createElement(objectView.item.view, {
                     data: props.abObject,
                 }),
-            Boolean(((_e = objectView.item) === null || _e === void 0 ? void 0 : _e.values) && ((_g = (_f = objectView.item) === null || _f === void 0 ? void 0 : _f.values) === null || _g === void 0 ? void 0 : _g.length)) && (React.createElement(rebass_1.Box, { mb: 2, className: `${baseClassName}__Item__Values` },
+            Boolean(((_f = objectView.item) === null || _f === void 0 ? void 0 : _f.values) && ((_h = (_g = objectView.item) === null || _g === void 0 ? void 0 : _g.values) === null || _h === void 0 ? void 0 : _h.length)) && (React.createElement(rebass_1.Box, { mb: 2, className: `${baseClassName}__Item__Values` },
                 React.createElement(ValueSelector_1.ValueOptionsTags, { style: { marginRight: 0 }, readOnly: true, options: objectView.item.values, value: objectView.item.values, allowWrap: true, toIdentifier: (c) => c, toLabel: (c) => React.createElement(React.Fragment, null, c) })))),
-        React.createElement(rebass_1.Flex, null, deleteAction && (React.createElement(SimpleButton_1.default, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onClick: handleDelete, accessLevel: moduleAccessLevel })))));
+        React.createElement(rebass_1.Flex, { ml: 1 }, deleteAction && (React.createElement(SimpleButton_1.default, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onClick: handleDelete, accessLevel: moduleAccessLevel })))));
 };
 exports.AdaptableObjectCompactList = (props) => {
-    return (React.createElement("div", { className: baseClassName }, props.abObjects.map((abObject) => {
-        return (React.createElement(exports.AdaptableObjectCompactListItem, { key: abObject.Uuid, abObject: abObject, module: props.module }));
-    })));
+    var _a, _b, _c;
+    const viewProperties = (_b = (_a = props.module).getViewProperties) === null || _b === void 0 ? void 0 : _b.call(_a);
+    const deleteAllAction = (_c = viewProperties === null || viewProperties === void 0 ? void 0 : viewProperties.getDeleteAllAction) === null || _c === void 0 ? void 0 : _c.call(viewProperties);
+    const dispatch = react_redux_1.useDispatch();
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column", className: baseClassName },
+        React.createElement(rebass_1.Flex, { className: `${baseClassName}__Header`, fontSize: 3 },
+            React.createElement(rebass_1.Box, { className: `${baseClassName}__Title` }, props.module.moduleInfo.FriendlyName),
+            React.createElement(rebass_1.Box, { flex: 1 }),
+            deleteAllAction && (React.createElement(SimpleButton_1.default, { onClick: () => dispatch(deleteAllAction), variant: "raised", tone: "neutral", accessLevel: 'Full' }, "Clear All"))),
+        React.createElement(rebass_1.Box, { className: `${baseClassName}__Body` }, props.abObjects.map((abObject) => {
+            return (React.createElement(exports.AdaptableObjectCompactListItem, { key: abObject.Uuid, abObject: abObject, module: props.module }));
+        }))));
 };

package/src/View/Components/AdaptableObjectList/AdaptableObjectList.js

@@ -7,7 +7,6 @@ const react_redux_1 = require("react-redux");
 const rebass_1 = require("rebass");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
-const TeamSharingRedux_1 = require("../../../Redux/ActionsReducers/TeamSharingRedux");
 const AdaptableHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/AdaptableHelper"));
 const AdaptableContext_1 = require("../../AdaptableContext");
 const ButtonDelete_1 = require("../Buttons/ButtonDelete");
@@ -76,7 +75,7 @@ exports.AdaptableObjectListItem = (props) => {
         React.createElement(rebass_1.Flex, { flexDirection: "column", className: `${baseClassName}__buttons` },
             React.createElement(rebass_1.Flex, { justifyContent: "end" },
                 actions,
-                teamSharingActivated && (React.createElement(ButtonShare_1.ButtonShare, { iconSize: ICON_SIZE, Header: `TeamSharing ${entityType}`, accessLevel: accessLevel, onShare: (config) => dispatch(TeamSharingRedux_1.TeamSharingShare(props.data.abObject, props.module.moduleInfo.ModuleName, config)) })),
+                teamSharingActivated && (React.createElement(ButtonShare_1.ButtonShare, { iconSize: ICON_SIZE, Header: `TeamSharing ${entityType}`, accessLevel: accessLevel, onShare: (config) => adaptable.api.teamSharingApi.shareEntity(props.data.abObject, props.module.moduleInfo.ModuleName, config) })),
                 deleteAction && (React.createElement(ButtonDelete_1.ButtonDelete, { iconSize: ICON_SIZE, ConfirmationMsg: `Are you sure you want to delete this ${entityType}?`, ConfirmationTitle: `Delete ${entityType}`, ConfirmAction: deleteAction, accessLevel: accessLevel })),
                 React.createElement(ButtonEdit_1.ButtonEdit, { iconSize: ICON_SIZE, disabled: isEditDisabled, accessLevel: accessLevel, onClick: () => handleOnEdit() })),
             React.createElement(rebass_1.Box, { flex: 1 }),

package/src/View/Components/ExternalRenderer.d.ts

@@ -1,10 +1,7 @@
 import * as React from 'react';
-import { AdaptableApi, AdaptableFrameworkComponent } from '../../types';
-declare type Render = ({ visible, node, adaptableApi, }: {
-    visible: boolean;
-    node: HTMLDivElement;
-    adaptableApi: AdaptableApi;
-}) => string | null;
+import { CustomRenderContext } from '../../../types';
+import { AdaptableFrameworkComponent } from '../../types';
+declare type Render = (customRenderContext: CustomRenderContext) => string | null;
 interface ExternalRendererProps {
     componentName?: string;
     render?: Render;

package/src/View/Components/ExternalRenderer.js

@@ -10,21 +10,21 @@ exports.ExternalRenderer = (_a) => {
     const adaptable = AdaptableContext_1.useAdaptable();
     const [contentsHTML, setContentsHTML] = React.useState('');
     React.useLayoutEffect(() => {
-        const node = ref.current;
+        const element = ref.current;
         const adaptableApi = adaptable.api;
         if (render) {
-            const html = render({ visible: true, node, adaptableApi });
+            const html = render({ visible: true, element, adaptableApi });
             setContentsHTML(html);
         }
         else if (frameworkComponent) {
-            adaptableApi.internalApi.createFrameworkComponent(node, frameworkComponent, 'toolbar');
+            adaptableApi.internalApi.createFrameworkComponent(element, frameworkComponent, 'toolbar');
         }
         return () => {
             if (render) {
-                render({ visible: false, node, adaptableApi });
+                render({ visible: false, element: element, adaptableApi });
             }
             else if (frameworkComponent) {
-                adaptableApi.internalApi.destroyFrameworkComponent(node, frameworkComponent, componentName);
+                adaptableApi.internalApi.destroyFrameworkComponent(element, frameworkComponent, componentName);
             }
         };
     }, []);

package/src/View/Components/FilterForm/FilterForm.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ColumnFilterContext } from '../../../Utilities/Interface/ColumnFilterContext';
 import { ColumnMenuTab } from '../../../PredefinedConfig/Common/Enums';
-import { ColumnFilter } from '../../../PredefinedConfig/FilterState';
+import { ColumnFilter } from '../../../types';
 export interface FilterFormState {
     columnFilters: ColumnFilter[];
     distinctColumnValues: {

package/src/View/Components/FilterForm/FilterForm.js

@@ -4,7 +4,8 @@ exports.FilterFormReact = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
-const FilterRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/FilterRedux"));
+const LayoutRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/LayoutRedux"));
+const SystemRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/SystemRedux"));
 const Enums_1 = require("../../../PredefinedConfig/Common/Enums");
 const ListBoxFilterForm_1 = require("./ListBoxFilterForm");
 const ButtonClose_1 = require("../Buttons/ButtonClose");
@@ -22,6 +23,7 @@ const renderWithAdaptableContext_1 = require("../../renderWithAdaptableContext")
 const CheckBox_1 = require("../../../components/CheckBox");
 const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
 const getDefaultColumnFilterPredicate_1 = require("./getDefaultColumnFilterPredicate");
+const LayoutRedux_1 = require("../../../Redux/ActionsReducers/LayoutRedux");
 const panelStyle = {
     width: '100%',
     minWidth: 150,
@@ -103,7 +105,7 @@ class FilterFormComponent extends React.Component {
         this._isMounted = false;
     }
     componentDidMount() {
-        if (this.props.currentColumn.dataType != Enums_1.DataType.Boolean) {
+        if (this.props.currentColumn.dataType != 'Boolean') {
             this.loadPermittedValues();
         }
     }
@@ -264,18 +266,18 @@ function mapStateToProps(state, ownProps) {
     return {
         currentColumn: ownProps.currentColumn,
         columns: state.Grid.Columns,
-        columnFilters: state.Filter.ColumnFilters,
+        columnFilters: LayoutRedux_1.getColumnFilterSelector(state),
         showCloseButton: ownProps.showCloseButton,
     };
 }
 function mapDispatchToProps(dispatch) {
     return {
         onMenuItemClick: (action) => dispatch(action),
-        onClearColumnFilter: (columnFilter) => dispatch(FilterRedux.ColumnFilterClear(columnFilter)),
-        onAddColumnFilter: (columnFilter) => dispatch(FilterRedux.ColumnFilterAdd(columnFilter)),
-        onEditColumnFilter: (columnFilter) => dispatch(FilterRedux.ColumnFilterEdit(columnFilter)),
-        onSetColumnFilter: (columnFilter) => dispatch(FilterRedux.ColumnFilterSet(columnFilter)),
-        onHideFilterForm: () => dispatch(FilterRedux.FilterFormHide()),
+        onClearColumnFilter: (columnFilter) => dispatch(LayoutRedux.LayoutColumnFilterClear(columnFilter)),
+        onAddColumnFilter: (columnFilter) => dispatch(LayoutRedux.LayoutColumnFilterAdd(columnFilter)),
+        onEditColumnFilter: (columnFilter) => dispatch(LayoutRedux.LayoutColumnFilterEdit(columnFilter)),
+        onSetColumnFilter: (columnFilter) => dispatch(LayoutRedux.LayoutColumnFilterSet(columnFilter)),
+        onHideFilterForm: () => dispatch(SystemRedux.SystemFilterFormHide()),
     };
 }
 const FilterForm = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(FilterFormComponent);

package/src/View/Components/FilterForm/QuickFilterForm.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ColumnFilterContext } from '../../../Utilities/Interface/ColumnFilterContext';
-import { ColumnFilter } from '../../../PredefinedConfig/FilterState';
+import { ColumnFilter } from '../../../types';
 export interface QuickFilterFormState {
     filter: ColumnFilter;
     distinctColumnValues: any[];

package/src/View/Components/FilterForm/QuickFilterForm.js

@@ -4,7 +4,7 @@ exports.QuickFilterFormReact = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
-const FilterRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/FilterRedux"));
+const LayoutRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/LayoutRedux"));
 const react_redux_1 = require("react-redux");
 const ObjectFactory_1 = require("../../../Utilities/ObjectFactory");
 const OverlayTrigger_1 = tslib_1.__importDefault(require("../../../components/OverlayTrigger"));
@@ -20,6 +20,7 @@ const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
 const getDefaultColumnFilterPredicate_1 = require("./getDefaultColumnFilterPredicate");
 const date_fns_1 = require("date-fns");
+const LayoutRedux_1 = require("../../../Redux/ActionsReducers/LayoutRedux");
 class QuickFilterFormComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -329,13 +330,13 @@ class QuickFilterFormComponent extends React.Component {
 function mapStateToProps(state, ownProps) {
     return {
         currentColumn: ownProps.currentColumn,
-        columnFilters: state.Filter.ColumnFilters,
+        columnFilters: LayoutRedux_1.getColumnFilterSelector(state),
     };
 }
 function mapDispatchToProps(dispatch) {
     return {
-        onAddColumnFilter: (columnFilter) => dispatch(FilterRedux.ColumnFilterAdd(columnFilter)),
-        onEditColumnFilter: (columnFilter) => dispatch(FilterRedux.ColumnFilterEdit(columnFilter)),
+        onAddColumnFilter: (columnFilter) => dispatch(LayoutRedux.LayoutColumnFilterAdd(columnFilter)),
+        onEditColumnFilter: (columnFilter) => dispatch(LayoutRedux.LayoutColumnFilterEdit(columnFilter)),
     };
 }
 const QuickFilterForm = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(QuickFilterFormComponent);

package/src/View/Components/FilterForm/getDefaultColumnFilterPredicate.d.ts

@@ -1,3 +1,3 @@
 import { AdaptableColumn } from '../../../PredefinedConfig/Common/AdaptableColumn';
-import { SystemFilterPredicateId } from '../../../PredefinedConfig/FilterState';
+import { SystemFilterPredicateId } from '../../../types';
 export declare const getDefaultColumnFilterPredicate: (column: AdaptableColumn, defaultColumnFilter: "Before" | "After" | "Blanks" | "NonBlanks" | "Equals" | "NotEquals" | "GreaterThan" | "LessThan" | "Positive" | "Negative" | "Zero" | "Between" | "NotBetween" | "Is" | "IsNot" | "Contains" | "NotContains" | "StartsWith" | "EndsWith" | "Regex" | "Today" | "Yesterday" | "Tomorrow" | "ThisWeek" | "ThisMonth" | "ThisQuarter" | "ThisYear" | "InPast" | "InFuture" | "On" | "NotOn" | "NextWorkDay" | "LastWorkDay" | "True" | "False" | "Values" | "ExcludeValues" | "InRange" | "BooleanToggle" | ((column: AdaptableColumn) => SystemFilterPredicateId)) => SystemFilterPredicateId;

package/src/View/Components/Popups/AdaptablePopupAlert.d.ts

@@ -1,9 +1,7 @@
 /// <reference types="react" />
 import { AdaptableAlert } from '../../../PredefinedConfig/Common/AdaptableAlert';
-import { AdaptableApi } from '../../../Api/AdaptableApi';
 export interface AdaptablePopupAlertProps {
     onClose: () => void;
-    api: AdaptableApi;
     adaptableAlert: AdaptableAlert;
     headless?: boolean;
     focusFirstButton?: boolean;

package/src/View/Components/Popups/AdaptablePopupAlert.js

@@ -43,7 +43,10 @@ exports.AdaptablePopupAlert = (props) => {
         };
     }, [JSON.stringify(formData), props.adaptableAlert]);
     const adaptableForm = React.useMemo(() => {
-        return props.api.internalApi.getAdaptableFormFromAlertForm(props.adaptableAlert.alertDefinition.AlertForm || defaultForm, context, messageType);
+        if (api.isDestroyed()) {
+            return null;
+        }
+        return api.internalApi.getAdaptableFormFromAlertForm(props.adaptableAlert.alertDefinition.AlertForm || defaultForm, context, messageType);
     }, [props.adaptableAlert.alertDefinition.AlertForm, defaultForm, messageType, context]);
     const renderApplicationIcon = (icon) => {
         if (!icon) {
@@ -68,16 +71,15 @@ exports.AdaptablePopupAlert = (props) => {
                                 React.createElement("br", null))));
                     })
                     : msg),
-            React.createElement(rebass_1.Box, { margin: 2 },
-                React.createElement(AdaptableFormComponent_1.AdaptableFormComponent, { focusFirstButton: props.focusFirstButton, data: formData, formDef: adaptableForm, displayTitle: true, onChange: setFormData, api: props.api, context: context, onButtonClick: (button) => {
-                        props.onClose();
-                        // we want to give the current popup time to close
-                        // and we reopen with a delay in case this button action causes another popup
-                        setTimeout(() => {
-                            var _a;
-                            (_a = button.onClick) === null || _a === void 0 ? void 0 : _a.call(button, button, context);
-                        }, 20);
-                    } })))));
+            React.createElement(rebass_1.Box, { margin: 2 }, adaptableForm ? (React.createElement(AdaptableFormComponent_1.AdaptableFormComponent, { focusFirstButton: props.focusFirstButton, data: formData, formDef: adaptableForm, displayTitle: true, onChange: setFormData, api: api, context: context, onButtonClick: (button) => {
+                    props.onClose();
+                    // we want to give the current popup time to close
+                    // and we reopen with a delay in case this button action causes another popup
+                    setTimeout(() => {
+                        var _a;
+                        (_a = button.onClick) === null || _a === void 0 ? void 0 : _a.call(button, button, context);
+                    }, 20);
+                } })) : null))));
     return props.headless ? (content) : (React.createElement(Dialog_1.default, { "data-name": `alert-popup alert-popup-${messageType.toLowerCase()}`, showCloseButton: false, isOpen: true, onDismiss: props.onClose, style: {
             minHeight: 'auto',
             minWidth: '20vw',

package/src/View/Components/Popups/AdaptableToaster.js

@@ -6,27 +6,47 @@ const React = tslib_1.__importStar(require("react"));
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const AdaptablePopupAlert_1 = require("./AdaptablePopupAlert");
 const react_toastify_1 = require("react-toastify");
+const apiInstances = new WeakMap();
+const weakMapKeys = new Map();
 exports.showToast = (props) => {
     // we're doing this hack and not simply using props.api in order not to have a memory
     // leak where the api is still kept around in memory by the toaster
-    let api = props.api;
-    const off = api.eventApi.on('AdaptableDestroy', () => {
+    const adaptableOptions = props.api.internalApi.getAdaptableOptions();
+    const adaptableId = adaptableOptions.adaptableId;
+    let weakMapKey = weakMapKeys.get(adaptableId);
+    if (!weakMapKey) {
+        weakMapKeys.set(adaptableId, { adaptableId });
+    }
+    weakMapKey = weakMapKeys.get(adaptableId);
+    const off = props.api.eventApi.on('AdaptableDestroy', () => {
         react_toastify_1.toast.dismiss(); // remove all toasts
-        api = null;
+        let weakMapKey = weakMapKeys.get(adaptableId);
+        if (weakMapKey) {
+            apiInstances.delete(weakMapKey);
+            weakMapKeys.delete(adaptableId);
+        }
     });
-    const toastProps = ObjectFactory_1.default.CreateToastOptions(props.api.internalApi.getAdaptableOptions().notificationsOptions, {
+    apiInstances.set(weakMapKey, props.api);
+    const toastProps = ObjectFactory_1.default.CreateToastOptions(adaptableOptions.notificationsOptions, {
+        containerId: adaptableId,
         onClose: () => {
-            if (api) {
+            const weakMapKey = weakMapKeys.get(adaptableId);
+            const adaptableApi = weakMapKey ? apiInstances.get(weakMapKey) : null;
+            if (adaptableApi) {
                 off();
-                if (!api.isDestroyed()) {
-                    api.internalApi.hidePopupAlert();
+                if (!adaptableApi.isDestroyed()) {
+                    adaptableApi.internalApi.hidePopupAlert();
+                }
+                else {
+                    apiInstances.delete(weakMapKey);
+                    weakMapKeys.delete(adaptableId);
                 }
             }
         },
     });
-    const content = (React.createElement(AdaptablePopupAlert_1.AdaptablePopupAlert, Object.assign({ headless: true }, props, { onClose: () => {
+    const content = (React.createElement(AdaptablePopupAlert_1.AdaptablePopupAlert, { headless: true, adaptableAlert: props.adaptableAlert, onClose: () => {
             react_toastify_1.toast.dismiss(toastId);
-        } })));
+        } }));
     let toastId;
     switch (props.adaptableAlert.alertDefinition.MessageType) {
         case 'Info':

package/src/View/Components/PreviewResultsPanel.js

@@ -9,9 +9,9 @@ const check_1 = tslib_1.__importDefault(require("../../components/icons/check"))
 const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
 const columnsMap = new Map([
-    ['InitialValue', { field: 'InitialValue', flex: 1, header: 'Current', align: 'center' }],
-    ['ComputedValue', { field: 'ComputedValue', flex: 1, header: 'New', align: 'center' }],
-    ['ValidInfo', { field: 'ValidInfo', width: 80, header: 'Valid', align: 'center' }],
+    ['InitialValue', { field: 'InitialValue', defaultFlex: 1, header: 'Current', align: 'center' }],
+    ['ComputedValue', { field: 'ComputedValue', defaultFlex: 1, header: 'New', align: 'center' }],
+    ['ValidInfo', { field: 'ValidInfo', defaultWidth: 80, header: 'Valid', align: 'center' }],
 ]);
 const tableDOMProps = {
     style: { flex: 1 },

package/src/View/Components/ToolPanel/AdaptableToolPanel.js

@@ -155,11 +155,12 @@ const AdaptableToolPanelComponent = (props) => {
                     width: 'var(--ab-cmp-simple-button__width)',
                 },
             };
-            const iconProps = button.icon && Object.assign({}, defaultIconProps, button.icon);
             const toolPanelContext = {
                 adaptableApi: props.api,
                 toolPanelState: props.api.toolPanelApi.getToolPanelState(),
             };
+            const buttonIcon = props.api.internalApi.getIconForButton(button, toolPanelContext);
+            const iconProps = buttonIcon && Object.assign({}, defaultIconProps, buttonIcon);
             let buttonStyle = props.api.internalApi.getStyleForButton(button, toolPanelContext);
             let buttonLabel = props.api.internalApi.getLabelForButton(button, toolPanelContext);
             let buttonTooltip = props.api.internalApi.getTooltipForButton(button, toolPanelContext);
@@ -171,7 +172,7 @@ const AdaptableToolPanelComponent = (props) => {
             const buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none';
             const uniqueKey = buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : uuid_1.createUuid();
             return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' },
-                button.icon ? React.createElement("img", Object.assign({}, iconProps)) : null,
+                buttonIcon ? React.createElement("img", Object.assign({}, iconProps)) : null,
                 buttonLabel));
         });
     };

package/src/View/Components/ToolPanel/CustomToolPanelContent.js

@@ -17,24 +17,25 @@ exports.CustomToolPanelContent = (props) => {
     const buttonsDivId = `ab-ToolPanel__${customToolPanel.name}__buttons`;
     const [contentsHTML, setContentsHTML] = react_1.useState('');
     react_1.useLayoutEffect(() => {
-        const node = contentsDivDomRef.current;
+        const element = contentsDivDomRef.current;
         if (hasCustomRenderFn(customToolPanel)) {
-            const html = customToolPanel.render({
+            const customRenderContext = {
                 visible: true,
-                node,
+                element,
                 adaptableApi: api,
-            });
+            };
+            const html = customToolPanel.render(customRenderContext);
             setContentsHTML(html);
         }
         else if (hasCustomFrameworkComponent(customToolPanel)) {
-            api.internalApi.createFrameworkComponent(node, customToolPanel.frameworkComponent, 'toolPanel');
+            api.internalApi.createFrameworkComponent(element, customToolPanel.frameworkComponent, 'toolPanel');
         }
         return () => {
             if (hasCustomRenderFn(customToolPanel)) {
-                customToolPanel.render({ visible: false, node, adaptableApi: api });
+                customToolPanel.render({ visible: false, element, adaptableApi: api });
             }
             else if (hasCustomFrameworkComponent(customToolPanel)) {
-                api.internalApi.destroyFrameworkComponent(node, customToolPanel.frameworkComponent, 'toolPanel');
+                api.internalApi.destroyFrameworkComponent(element, customToolPanel.frameworkComponent, 'toolPanel');
             }
         };
     }, []);
@@ -50,12 +51,13 @@ exports.CustomToolPanelContent = (props) => {
                     width: 'var(--ab-cmp-simple-button__width)',
                 },
             };
-            const iconProps = button.icon && Object.assign({}, defaultIconProps, button.icon);
             const toolPanelContext = {
                 adaptableApi: api,
                 toolPanelState: api.toolPanelApi.getToolPanelState(),
                 customToolPanel: customToolPanel,
             };
+            const buttonIcon = api.internalApi.getIconForButton(button, toolPanelContext);
+            const iconProps = buttonIcon && Object.assign({}, defaultIconProps, buttonIcon);
             let buttonStyle = api.internalApi.getStyleForButton(button, toolPanelContext);
             let buttonLabel = api.internalApi.getLabelForButton(button, toolPanelContext);
             let buttonTooltip = api.internalApi.getTooltipForButton(button, toolPanelContext);
@@ -67,7 +69,7 @@ exports.CustomToolPanelContent = (props) => {
             const buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none';
             const uniqueKey = buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : uuid_1.createUuid();
             return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' },
-                button.icon ? React.createElement("img", Object.assign({}, iconProps)) : null,
+                buttonIcon ? React.createElement("img", Object.assign({}, iconProps)) : null,
                 buttonLabel));
         })))));
 };

package/src/View/Components/WizardSummaryPage.js

@@ -6,8 +6,8 @@ const React = tslib_1.__importStar(require("react"));
 const WizardPanel_1 = tslib_1.__importDefault(require("../../components/WizardPanel"));
 const InfiniteTable_1 = require("../../components/InfiniteTable");
 const columnsMap = new Map([
-    ['Key', { field: 'Key', header: 'Property', flex: 1 }],
-    ['Value', { field: 'Value', header: 'Value', flex: 3 }],
+    ['Key', { field: 'Key', header: 'Property', defaultFlex: 1 }],
+    ['Value', { field: 'Value', header: 'Value', defaultFlex: 3 }],
 ]);
 const tableDOMProps = {
     className: 'ab-WizardSummary__list',

package/src/View/ConditionalStyle/Wizard/ConditionalStyleRuleWizardSection.js

@@ -21,7 +21,7 @@ function renderConditionalStyleRuleSummary(data) {
 }
 exports.renderConditionalStyleRuleSummary = renderConditionalStyleRuleSummary;
 function ConditionalStyleRuleWizardSection(props) {
-    const { data, api, moduleInfo } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    const { data, api, moduleInfo } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     return (React.createElement(React.Fragment, null,
         React.createElement(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: props.defaultPredicateId, predicateDefs: api.conditionalStyleApi.getCondStylePredicateDefsForScope(data.Scope), showAggregation: false, showObservable: false, showPredicate: !api.scopeApi.scopeIsAll(data.Scope), data: data, onChange: props.onChange, descriptions: {
                 selectPredicate: 'Select a Conditional Style Rule - to be applied when data changes',

package/src/View/ConditionalStyle/Wizard/ConditionalStyleScopeWizardSection.js

@@ -14,7 +14,7 @@ exports.renderConditionalStyleScopeSummary = (data) => {
     });
 };
 function ConditionalStyleScopeWizardSection(props) {
-    const { data, api } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    const { data, api } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     return (React.createElement(React.Fragment, null,
         React.createElement(NewScopeComponent_1.NewScopeComponent, { scope: data.Scope, descriptions: {
                 rowScope: 'Matching Rows will have the Conditional Style applied',

package/src/View/ConditionalStyle/Wizard/ConditionalStyleSettingsWizardSettings.js

@@ -12,7 +12,7 @@ exports.renderConditionalStyleSettingsSummary = (data) => (React.createElement(r
     React.createElement(rebass_1.Text, null, "Include grouped rows"),
     React.createElement(rebass_1.Text, { mt: 3 }, data.IncludeGroupedRows ? 'Yes' : 'No')));
 exports.ConditionalStyleSettingsWizardSettings = (props) => {
-    const { data } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    const { data } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     const onIncludeGroupedRowsChanged = (checked) => {
         props.onChange(Object.assign(Object.assign({}, data), { IncludeGroupedRows: checked }));
     };

package/src/View/ConditionalStyle/Wizard/ConditionalStyleStyleWizardSection.js

@@ -14,7 +14,7 @@ exports.renderConditionalStyleStyleSummary = (data) => {
     return (React.createElement(rebass_1.Text, { padding: 2, style: toStyle(data.Style) }, "Preview result"));
 };
 function ConditionalStyleStyleWizardSection(props) {
-    const { data, api } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    const { data, api } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     return (React.createElement(StyleComponent_1.StyleComponent, { headless: true, api: api, Style: data.Style, UpdateStyle: (Style) => {
             props.onChange(Object.assign(Object.assign({}, data), { Style }));
         } }));

package/src/View/CustomSort/Wizard/CustomSortColumnWizardSection.js

@@ -9,7 +9,7 @@ const Tag_1 = require("../../../components/Tag");
 const ColumnSelector_1 = require("../../Components/ColumnSelector");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 exports.renderCustomSortColumn = (data) => {
-    const { api } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    const { api } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     return (React.createElement(rebass_1.Text, { pr: 2, py: 2, fontSize: 2 },
         "Custom sort column: ",
         React.createElement(Tag_1.Tag, null, api.columnApi.getFriendlyNameFromColumnId(data.ColumnId))));
@@ -21,7 +21,7 @@ exports.isValidCustomSortColumn = (data) => {
     return true;
 };
 exports.CustomSortColumnWizardSection = (props) => {
-    const { data, api } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    const { data, api } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     const sortableCols = React.useMemo(() => {
         var _a, _b;
         const sortableColumns = api.columnApi.getSortableColumns();

package/src/View/CustomSort/Wizard/CustomSortValuesWizardSection.js

@@ -23,7 +23,7 @@ exports.renderCustomSortValuesSummary = (data) => {
         React.createElement(ValueSelector_1.ValueOptionsTags, { options: data.SortedValues, value: data.SortedValues, toIdentifier: (x) => `${x}`, toLabel: (x) => `${x}`, allowWrap: true, readOnly: true }))) : null;
 };
 exports.CustomSortValuesWizardSection = (props) => {
-    const { data, api } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    const { data, api } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     const [distinctValues, setDistinctValues] = react_1.useState([]);
     const [isDistinctValuesLoading, setIsDistinctValuesLoading] = react_1.useState(false);
     react_1.useEffect(() => {

package/src/View/Dashboard/CustomDashboardButton.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { AdaptableButton } from '../../PredefinedConfig/Common/AdaptableButton';
+import { DashboardButtonContext } from '../../AdaptableOptions/DashboardOptions';
+import { AdaptableApi } from '../../Api/AdaptableApi';
+import { AccessLevel } from '../../PredefinedConfig/Common/Entitlement';
+export interface CustomDashboardButtonProps {
+    button: AdaptableButton<DashboardButtonContext>;
+    api: AdaptableApi;
+    accessLevel: AccessLevel;
+}
+export declare const CustomDashboardButton: (props: CustomDashboardButtonProps) => JSX.Element;