@adaptabletools/adaptable 11.2.4-canary.0 → 12.0.0-canary.0

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, { 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,10 +1,13 @@
 /// <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: any[];
+    distinctColumnValues: {
+        label: string;
+        value: any;
+    }[];
     isDistinctColumnValuesLoading: boolean;
     showTab: boolean;
     selectedTab: ColumnMenuTab;

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,
@@ -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/ListBoxFilterForm.d.ts

@@ -5,7 +5,10 @@ export interface ListBoxFilterFormProps extends ListGroupProps {
     currentColumn: AdaptableColumn;
     columns: AdaptableColumn[];
     useAgGridStyle?: boolean;
-    columnDistinctValues: any[];
+    columnDistinctValues: {
+        label: string;
+        value: any;
+    }[];
     uiSelectedColumnValues: Array<string>;
     onColumnValueSelectedChange: (SelectedValues: Array<any>) => void;
     dataType: 'String' | 'Number' | 'NumberArray' | 'Boolean' | 'Date' | 'Object' | 'Unknown';

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

@@ -40,9 +40,9 @@ exports.ListBoxFilterForm = (props) => {
             setUiSelectedColumnValues([...UiSelectedColumnValues, item]);
         }
     };
-    const columnValuesItemsElements = props.columnDistinctValues.map((x, y) => {
-        const isActive = UiSelectedColumnValues.indexOf(x) >= 0;
-        const columnValue = x;
+    const columnValuesItemsElements = props.columnDistinctValues.map((distinctValue, index) => {
+        const isActive = UiSelectedColumnValues.indexOf(distinctValue.value) >= 0;
+        const columnValue = distinctValue.value;
         if (StringExtensions_1.StringExtensions.IsNullOrEmpty(columnValue)) {
             return null;
         }
@@ -53,13 +53,13 @@ exports.ListBoxFilterForm = (props) => {
         }
         if (props.useAgGridStyle) {
             return renderItemForAgGridStyle({
-                key: 'columnValue' + y,
-                children: columnValue,
+                key: 'columnValue' + index,
+                children: distinctValue.label,
                 checked: isActive,
-                onChange: () => onClickItemColumnValue(x),
+                onChange: () => onClickItemColumnValue(distinctValue.value),
             });
         }
-        return (React.createElement(ListGroupItem_1.default, { noZebra: props.useAgGridStyle, key: 'columnValue' + y, onClick: () => onClickItemColumnValue(x), active: isActive, value: columnValue }, columnValue));
+        return (React.createElement(ListGroupItem_1.default, { noZebra: props.useAgGridStyle, key: 'columnValue' + index, onClick: () => onClickItemColumnValue(distinctValue.value), active: isActive, value: columnValue }, distinctValue.label));
     });
     const textClear = (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { autoFocus: true, type: "text", placeholder: "Search Column Values", value: FilterValue, style: {
             paddingTop: 'var(--ab-space-1)',

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"));
@@ -19,6 +19,8 @@ const CheckBox_1 = require("../../../components/CheckBox");
 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);
@@ -214,6 +216,19 @@ class QuickFilterFormComponent extends React.Component {
         if (this.props.quickFilterValuesTrigger === 'click') {
             showEvent = 'click';
         }
+        let selectedValues = filter.Predicate.PredicateId === 'Values' ? 'Select Values' : 'Exclude Values';
+        if (filter.Predicate.Inputs.length) {
+            selectedValues = filter.Predicate.Inputs.map((input) => {
+                var _a, _b;
+                const label = (_b = (_a = this.state.distinctColumnValues) === null || _a === void 0 ? void 0 : _a.find((distinctValue) => {
+                    if (input instanceof Date) {
+                        return date_fns_1.isSameDay(input, distinctValue.value);
+                    }
+                    return distinctValue.value === input;
+                })) === null || _b === void 0 ? void 0 : _b.label;
+                return label !== null && label !== void 0 ? label : input;
+            }).join(', ');
+        }
         return (React.createElement(OverlayTrigger_1.default, { alignHorizontal: "left", showEvent: showEvent, 
             // cannot hide on blur, because the form input receives the input when this is opened
             hideEvent: "mouseleave", hideDelay: 300, ref: (api) => {
@@ -248,8 +263,7 @@ class QuickFilterFormComponent extends React.Component {
                     borderRadius: 0,
                     borderLeftWidth: 0,
                     borderColor: 'var(--ab-color-primarydark)',
-                }, disabled: ArrayExtensions_1.default.IsNullOrEmptyOrContainsSingleEmptyValue(this.state.distinctColumnValues) }, filter.Predicate.Inputs.join(', ') ||
-                (filter.Predicate.PredicateId === 'Values' ? 'Select Values' : 'Exclude Values'))));
+                }, disabled: ArrayExtensions_1.default.IsNullOrEmptyOrContainsSingleEmptyValue(this.state.distinctColumnValues) }, selectedValues)));
     }
     onColumnValuesChange(columnValues) {
         var _a;
@@ -307,7 +321,7 @@ class QuickFilterFormComponent extends React.Component {
     }
     clearFilter() {
         const { filter } = this.state;
-        this.props.api.filterApi.clearColumnFilterByColumn(filter.ColumnId);
+        this.props.api.layoutApi.clearColumnFilterByColumn(filter.ColumnId);
     }
     hasValuesPredicate(predicate) {
         return (predicate === null || predicate === void 0 ? void 0 : predicate.PredicateId) === 'Values' || (predicate === null || predicate === void 0 ? void 0 : predicate.PredicateId) === 'ExcludeValues';
@@ -316,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/AdaptablePopup/AdaptablePopupDialog.js

@@ -32,6 +32,8 @@ const WindowDialog = (props) => {
         handleSelector: isActionModule
             ? `.${baseClassName} .ab-Panel__header`
             : '.ab-Adaptable-Popup__TopBar',
+        minHeight: 460,
+        minWidth: 400,
         size: popupSettings.size,
         position: popupSettings.position,
         onChange: handleWindowSettings,

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/Popups/FormPopups/FormPopups.js

@@ -20,8 +20,8 @@ exports.FormDialog = ({ id, formProps, form, prepareContext, }) => {
         dispatch(PopupRedux_1.PopupHideForm(id));
     };
     const context = Object.assign({ adaptableApi: adaptable.api, formData: data }, formProps);
-    return (React.createElement(Dialog_1.default, { isOpen: true, showCloseButton: false, style: { minHeight: 'auto', minWidth: 400 }, onDismiss: handleDismiss },
-        React.createElement(rebass_1.Box, { padding: 4 },
+    return (React.createElement(Dialog_1.default, { isOpen: true, showCloseButton: false, style: { minHeight: 'auto', minWidth: 400, maxHeight: '80vh' }, onDismiss: handleDismiss },
+        React.createElement(rebass_1.Flex, { flexDirection: 'column', "data-name": "form-dialog", padding: 4, height: '100%' },
             React.createElement(AdaptableFormComponent_1.AdaptableFormComponent, { formDef: form, data: data, context: context, onChange: setData, api: adaptable.api, displayTitle: true, onButtonClick: async (button) => {
                     var _a;
                     handleDismiss();

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/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;

package/src/View/Dashboard/CustomDashboardButton.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomDashboardButton = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
+exports.CustomDashboardButton = (props) => {
+    const { button } = props;
+    const [componentRevision, setComponentRevision] = react_1.useState(1);
+    // TODO: variants of this mapping are present in several places (just search for api.internalApi.getStyleForButton() usages)
+    // with the next opportunity we should abstract it
+    const dashboardContext = {
+        adaptableApi: props.api,
+        dashboardState: props.api.dashboardApi.getDashboardState(),
+    };
+    const defaultIconProps = {
+        style: {
+            height: 'var(--ab-cmp-simple-button__height)',
+            width: 'var(--ab-cmp-simple-button__width)',
+        },
+    };
+    const buttonIcon = props.api.internalApi.getIconForButton(button, dashboardContext);
+    const iconProps = buttonIcon && Object.assign({}, defaultIconProps, buttonIcon);
+    //    const iconProps: any = button.icon ? { ...button.icon } : null;
+    //    if (iconProps) {
+    //      delete iconProps.Uuid;
+    //    }
+    let buttonStyle = props.api.internalApi.getStyleForButton(button, dashboardContext);
+    let buttonLabel = props.api.internalApi.getLabelForButton(button, dashboardContext);
+    let buttonTooltip = props.api.internalApi.getTooltipForButton(button, dashboardContext);
+    if (button.hidden && button.hidden(button, dashboardContext)) {
+        return null;
+    }
+    const disabled = button.disabled && button.disabled(button, dashboardContext);
+    return (React.createElement(SimpleButton_1.default, { key: buttonLabel, variant: buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text', tone: buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none', className: `ab-DashboardToolbar__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, disabled: disabled || props.accessLevel == 'ReadOnly', onClick: () => {
+            var _a;
+            (_a = button.onClick) === null || _a === void 0 ? void 0 : _a.call(button, button, dashboardContext);
+            setTimeout(() => {
+                // mutate state to force a re-rendering
+                setComponentRevision(componentRevision + 1);
+            }, 16);
+        }, accessLevel: 'Full' },
+        buttonIcon ? React.createElement("img", Object.assign({}, iconProps)) : null,
+        buttonLabel));
+};

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

@@ -2,6 +2,7 @@
 import { CustomToolbar } from '../../AdaptableOptions/DashboardOptions';
 interface CustomToolbarWrapperProps {
     customToolbar: CustomToolbar;
+    dashboardRevision: number;
 }
 export declare const CustomToolbarWrapper: (props: CustomToolbarWrapperProps) => JSX.Element;
 export {};