@adaptabletools/adaptable 12.0.8 → 12.1.0-canary.1

package/src/Utilities/ObjectFactory.js

@@ -4,7 +4,7 @@ exports.ObjectFactory = exports.CreateToastOptions = exports.CreateCustomDisplay
 const Enums_1 = require("../PredefinedConfig/Common/Enums");
 const GeneralConstants_1 = require("./Constants/GeneralConstants");
 const Uuid_1 = require("../PredefinedConfig/Uuid");
-const react_toastify_1 = require("react-toastify");
+const { toast, Bounce, Flip, Slide, Zoom } = require('react-toastify/dist/react-toastify.js');
 function CreateEmptyCustomSort() {
     return { Uuid: Uuid_1.createUuid(), ColumnId: GeneralConstants_1.EMPTY_STRING, SortedValues: [] };
 }
@@ -146,6 +146,7 @@ function CreateEmptyReminderSchedule() {
         Message: GeneralConstants_1.EMPTY_STRING,
         MessageType: 'Info',
         DisplayNotification: true,
+        DisplaySystemStatusMessage: false,
     };
 }
 exports.CreateEmptyReminderSchedule = CreateEmptyReminderSchedule;
@@ -392,29 +393,29 @@ exports.CreateToastOptions = CreateToastOptions;
 function getToastPosition(position) {
     switch (position) {
         case 'BottomLeft':
-            return react_toastify_1.toast.POSITION.BOTTOM_LEFT;
+            return toast.POSITION.BOTTOM_LEFT;
         case 'BottomCenter':
-            return react_toastify_1.toast.POSITION.BOTTOM_CENTER;
+            return toast.POSITION.BOTTOM_CENTER;
         case 'BottomRight':
-            return react_toastify_1.toast.POSITION.BOTTOM_RIGHT;
+            return toast.POSITION.BOTTOM_RIGHT;
         case 'TopLeft':
-            return react_toastify_1.toast.POSITION.TOP_LEFT;
+            return toast.POSITION.TOP_LEFT;
         case 'TopCenter':
-            return react_toastify_1.toast.POSITION.TOP_CENTER;
+            return toast.POSITION.TOP_CENTER;
         case 'TopRight':
-            return react_toastify_1.toast.POSITION.TOP_RIGHT;
+            return toast.POSITION.TOP_RIGHT;
     }
 }
 function getToastTransition(transition) {
     switch (transition) {
         case 'Bounce':
-            return react_toastify_1.Bounce;
+            return Bounce;
         case 'Slide':
-            return react_toastify_1.Slide;
+            return Slide;
         case 'Zoom':
-            return react_toastify_1.Zoom;
+            return Zoom;
         case 'Flip':
-            return react_toastify_1.Flip;
+            return Flip;
     }
 }
 exports.ObjectFactory = {

package/src/Utilities/Services/CalculatedColumnExpressionService.js

@@ -29,6 +29,16 @@ class CalculatedColumnExpressionService {
                 this.adaptableApi.gridApi.refreshCells(null, refreshedCalculatedColumns);
             }
         });
+        this.adaptableApi.eventApi.on('GridDataChanged', () => {
+            const refreshedCalculatedColumns = [];
+            this.aggregatedScalarCalculatedColumnsMap.forEach((aggregatedScalarCalculatedColumn) => {
+                aggregatedScalarCalculatedColumn.refreshAggregatedColumnValue();
+                refreshedCalculatedColumns.push(aggregatedScalarCalculatedColumn.getCalculatedColumnId());
+            });
+            if (refreshedCalculatedColumns.length) {
+                this.adaptableApi.gridApi.refreshCells(null, refreshedCalculatedColumns);
+            }
+        });
     }
     destroy() {
         [...this.aggregatedScalarCalculatedColumnsMap.values()].forEach((aggregatedScalarCalculatedColumn) => aggregatedScalarCalculatedColumn.destroy());
@@ -112,15 +122,17 @@ class CalculatedColumnExpressionService {
         }
     }
     createAggregatedScalarCalculatedColumn(calculatedColumn) {
-        var _a;
+        var _a, _b;
         // if there is already an aggregated scalar, delete it (possible when editing)
         this.destroyAggregatedScalarCalculatedColumn(calculatedColumn);
         if ((_a = calculatedColumn.Query) === null || _a === void 0 ? void 0 : _a.AggregatedScalarExpression) {
-            const aggregationConfig = this.adaptableApi.internalApi
-                .getQueryLanguageService()
-                .evaluateAggregatedScalarExpression(calculatedColumn.Query.AggregatedScalarExpression, ModuleConstants_1.CalculatedColumnModuleId);
-            const aggregatedScalarCalculatedColumn = new AggregatedScalarCalculatedColumn(aggregationConfig.value, calculatedColumn, this.adaptableApi);
-            this.aggregatedScalarCalculatedColumnsMap.set(calculatedColumn.Uuid, aggregatedScalarCalculatedColumn);
+            try {
+                const aggregatedScalarCalculatedColumn = new AggregatedScalarCalculatedColumn(calculatedColumn, this.adaptableApi);
+                this.aggregatedScalarCalculatedColumnsMap.set(calculatedColumn.Uuid, aggregatedScalarCalculatedColumn);
+            }
+            catch (e) {
+                LoggingHelper_1.LogAdaptableError(`Creating CalculatedColumn ('${(_b = calculatedColumn.Query) === null || _b === void 0 ? void 0 : _b.AggregatedScalarExpression}') failed!\n${e.message}`);
+            }
         }
     }
     destroyAggregatedScalarCalculatedColumn(calculatedColumn) {
@@ -131,13 +143,16 @@ class CalculatedColumnExpressionService {
 }
 exports.CalculatedColumnExpressionService = CalculatedColumnExpressionService;
 class AggregatedScalarCalculatedColumn {
-    constructor(expressionEvaluation, calculatedColumn, adaptableApi) {
-        this.expressionEvaluation = expressionEvaluation;
+    constructor(calculatedColumn, adaptableApi) {
         this.calculatedColumn = calculatedColumn;
         this.adaptableApi = adaptableApi;
-        this.aggregationResult = this.computeAggregatedValue(expressionEvaluation);
+        const aggregationConfig = this.adaptableApi.internalApi
+            .getQueryLanguageService()
+            .evaluateAggregatedScalarExpression(calculatedColumn.Query.AggregatedScalarExpression, ModuleConstants_1.CalculatedColumnModuleId);
+        this.expressionEvaluation = aggregationConfig.value;
+        this.aggregationResult = this.computeAggregatedValue(this.expressionEvaluation);
         // currently we support only one reducer
-        this.aggregationReducerName = Object.keys(expressionEvaluation.aggregationParams.reducers)[0];
+        this.aggregationReducerName = Object.keys(this.expressionEvaluation.aggregationParams.reducers)[0];
     }
     destroy() {
         this.expressionEvaluation = null;
@@ -153,6 +168,10 @@ class AggregatedScalarCalculatedColumn {
         return aggregationValue;
     }
     refreshAggregatedColumnValue() {
+        const aggregationConfig = this.adaptableApi.internalApi
+            .getQueryLanguageService()
+            .evaluateAggregatedScalarExpression(this.calculatedColumn.Query.AggregatedScalarExpression, ModuleConstants_1.CalculatedColumnModuleId);
+        this.expressionEvaluation = aggregationConfig.value;
         this.aggregationResult = this.computeAggregatedValue(this.expressionEvaluation);
     }
     getCalculatedColumnId() {
@@ -167,11 +186,13 @@ class AggregatedScalarCalculatedColumn {
         // we iterate over the RowNode list (we need this to handle complex column values (nested values, valueGetters etc)
         // so we will map the fieldNames to RowNode.data
         const mapReducerValueGetter = (fieldName) => {
-            return (rowNode) => this.adaptableApi.gridApi.getRawValueFromRowNode(rowNode, fieldName);
+            return (rowNode) => {
+                return this.adaptableApi.gridApi.getRawValueFromRowNode(rowNode, fieldName);
+            };
         };
         Object.values(expressionEvaluation.aggregationParams.reducers).forEach((aggregationReducer) => {
             aggregationReducer.getter = mapReducerValueGetter(aggregationReducer.field);
-            // nullify the getter to force the fallback on the getter fn
+            // nullify the field to force the fallback on the getter fn
             aggregationReducer.field = null;
         });
         const mapGroupByToKey = (fieldName) => {
@@ -181,7 +202,30 @@ class AggregatedScalarCalculatedColumn {
             groupByDef.toKey = mapGroupByToKey(groupByDef.field);
         });
         if (!expressionEvaluation.cumulateOver) {
-            return scalarAggregationHelper_1.aggregate(expressionEvaluation.aggregationParams, gridRowNodes);
+            let aggregatedRowNodes = gridRowNodes;
+            if (expressionEvaluation.sortByColumn) {
+                const sortByColumn = expressionEvaluation.sortByColumn;
+                const getRowNodeValue = (rowNode, columnId) => this.adaptableApi.gridApi.getRawValueFromRowNode(rowNode, columnId);
+                if (expressionEvaluation.filterUndefinedValues) {
+                    aggregatedRowNodes = gridRowNodes.filter((node) => {
+                        const rowValue = getRowNodeValue(node, sortByColumn);
+                        return rowValue != undefined;
+                    });
+                }
+                // currently, we support only ascending sorting
+                aggregatedRowNodes.sort((first, second) => {
+                    const firstValue = getRowNodeValue(first, sortByColumn);
+                    const secondValue = getRowNodeValue(second, sortByColumn);
+                    if (firstValue < secondValue) {
+                        return -1;
+                    }
+                    if (firstValue > secondValue) {
+                        return 1;
+                    }
+                    return 0;
+                });
+            }
+            return scalarAggregationHelper_1.aggregate(expressionEvaluation.aggregationParams, aggregatedRowNodes);
         }
         else {
             // 1. sort grid data by given OVER column

package/src/View/AdaptableView.js

@@ -13,9 +13,9 @@ const AdaptableLoadingScreen_1 = require("./Components/Popups/AdaptableLoadingSc
 const renderWithAdaptableContext_1 = require("./renderWithAdaptableContext");
 const License_1 = require("./License");
 const ProgressIndicator_1 = require("../components/ProgressIndicator/ProgressIndicator");
-const react_toastify_1 = require("react-toastify");
 const WindowPopups_1 = require("./Components/Popups/WindowPopups/WindowPopups");
 const FormPopups_1 = require("./Components/Popups/FormPopups/FormPopups");
+const { ToastContainer } = require('react-toastify/dist/react-toastify.js');
 class AdaptableView extends React.Component {
     render() {
         var _a, _b, _c, _d;
@@ -27,7 +27,7 @@ class AdaptableView extends React.Component {
             this.props.PopupState.PromptPopup.ShowPromptPopup && (React.createElement(AdaptablePopupPrompt_1.AdaptablePopupPrompt, { message: this.props.PopupState.PromptPopup.Message, header: this.props.PopupState.PromptPopup.Header, onClose: this.props.onClosePromptPopup, onConfirm: this.props.onConfirmPromptPopup, onConfirmActionCreator: this.props.PopupState.PromptPopup.ConfirmActionCreator, defaultValue: this.props.PopupState.PromptPopup.DefaultValue })),
             React.createElement(AdaptablePopupConfirmation_1.AdaptablePopupConfirmation, { header: this.props.PopupState.ConfirmationPopup.Header, messsage: this.props.PopupState.ConfirmationPopup.Msg, showPopup: this.props.PopupState.ConfirmationPopup.ShowConfirmationPopup, cancelButtonText: this.props.PopupState.ConfirmationPopup.CancelButtonText, confirmButtonText: this.props.PopupState.ConfirmationPopup.ConfirmButtonText, onCancel: this.props.onCancelConfirmationPopup, onConfirm: this.props.onConfirmConfirmationPopup, showInputBox: this.props.PopupState.ConfirmationPopup.ShowInputBox, messageType: this.props.PopupState.ConfirmationPopup.MessageType, api: this.props.AdaptableApi }),
             Boolean(this.props.PopupState.ScreenPopup.ShowScreenPopup) && (React.createElement(AdaptablePopup_1.AdaptablePopup, { componentName: this.props.PopupState.ScreenPopup.ComponentName, componentModule: this.props.PopupState.ScreenPopup.ComponentModule, onHide: this.props.onCloseScreenPopup, api: this.props.AdaptableApi, onClearParams: () => this.props.onClearPopupParams(), moduleParams: this.props.PopupState.ScreenPopup.Params, moduleProps: this.props.PopupState.ScreenPopup.PopupProps })),
-            React.createElement(react_toastify_1.ToastContainer
+            React.createElement(ToastContainer
             // we NEEEEED!!!! this containerId, otherwise, toastify will have memory leaks when the adaptable
             // instance is destroyed and re-created many times
             , { 

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

@@ -1,5 +1,30 @@
 import * as React from 'react';
-import { AdaptableObjectView, IModule } from '../../../Strategy/Interface/IModule';
+import { Action } from 'redux';
+import { AdaptableObject } from '../../../PredefinedConfig/Common/AdaptableObject';
+import { AdaptableObjectItemView, AdaptableObjectView, IModule } from '../../../Strategy/Interface/IModule';
+import { AccessLevel, SharedEntityConfig } from '../../../types';
+export declare const AdaptableObjectListItemView: React.FunctionComponent<{
+    abObject: AdaptableObject;
+    accessLevel?: AccessLevel;
+    actions?: React.ReactElement[];
+    className?: string;
+    deleteAction?: Action;
+    onDelete?: () => void;
+    deleteDisabled?: boolean;
+    deleteTooltip?: string;
+    editDisabled?: boolean;
+    entityType: string;
+    handleOnEdit?: (tagName?: string) => void;
+    items: AdaptableObjectItemView[];
+    onShare?: (config: SharedEntityConfig) => void;
+    onSuspend?: () => void;
+    onUnSuspend?: () => void;
+    showActions?: boolean;
+    showEditButton?: boolean;
+    style?: React.CSSProperties;
+    suspendedEnabled?: boolean;
+    teamSharingActivated?: boolean;
+}>;
 interface AdaptableObjectListItemProps {
     data: AdaptableObjectView;
     module: IModule;
@@ -21,6 +46,7 @@ export declare const AdaptableObjectListItem: React.FunctionComponent<AdaptableO
 interface AdaptableObjectListProps {
     items: AdaptableObjectView[];
     module: IModule;
+    itemProps?: Partial<AdaptableObjectListItemProps>;
 }
 export declare const AdaptableObjectList: React.FunctionComponent<AdaptableObjectListProps>;
 export {};

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableObjectList = exports.AdaptableObjectListItem = void 0;
+exports.AdaptableObjectList = exports.AdaptableObjectListItem = exports.AdaptableObjectListItemView = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
@@ -15,9 +15,46 @@ const ButtonShare_1 = require("../Buttons/ButtonShare");
 const SuspendToggleButton_1 = require("../Buttons/SuspendToggleButton/SuspendToggleButton");
 const ValueSelector_1 = require("../ValueSelector");
 const ICON_SIZE = 26;
-const baseClassName = 'ab-Adaptable-Object-List';
+const LIST_BASE_CLASS_NAME = 'ab-Adaptable-Object-List';
+const ITEM_BASE_CLASS_NAME = `${LIST_BASE_CLASS_NAME}__Item`;
+const AdaptableObjectListItemView = (props) => {
+    var _a, _b, _c;
+    const baseClassName = ITEM_BASE_CLASS_NAME;
+    return (React.createElement(rebass_1.Flex, { "data-name": "adaptable-object-list-item", "data-value": props.abObject.Uuid, as: "li", mb: 3, className: join_1.default(props.className, baseClassName), style: props.style },
+        React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__rows` }, (_c = (_b = (_a = props.items).filter) === null || _b === void 0 ? void 0 : _b.call(_a, Boolean)) === null || _c === void 0 ? void 0 : _c.map((tag, index) => {
+            var _a;
+            let labelEl = tag.label;
+            if (typeof tag.label === 'function') {
+                labelEl = React.createElement(tag.label, { data: props.abObject });
+            }
+            labelEl = labelEl !== null && labelEl !== void 0 ? labelEl : tag.name;
+            return (React.createElement(rebass_1.Flex, { "data-name": tag.name, key: index, mb: 2, className: `${baseClassName}__row` },
+                React.createElement(rebass_1.Box, { className: `${baseClassName}__label`, mr: 3 },
+                    labelEl,
+                    props.showEditButton && (React.createElement(SimpleButton_1.default, { accessLevel: props.accessLevel, className: `${baseClassName}__edit-property`, ml: 1, icon: "edit", tooltip: "edit", iconSize: 18, variant: "text", onClick: () => {
+                            props.handleOnEdit(tag.name);
+                        } }))),
+                React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__values` },
+                    tag.view &&
+                        React.createElement(tag.view, {
+                            data: props.abObject,
+                        }),
+                    Boolean((tag === null || tag === void 0 ? void 0 : tag.values) && ((_a = tag === null || tag === void 0 ? void 0 : tag.values) === null || _a === void 0 ? void 0 : _a.length)) && (React.createElement(ValueSelector_1.ValueOptionsTags, { style: { marginRight: 0 }, readOnly: true, options: tag.values, value: tag.values, allowWrap: true, toIdentifier: (c) => c, toLabel: (c) => React.createElement(React.Fragment, null, c) })))));
+        })),
+        props.showActions && (React.createElement(rebass_1.Flex, { flexDirection: "column", className: `${baseClassName}__buttons` },
+            React.createElement(rebass_1.Flex, { justifyContent: "end" },
+                props.actions,
+                props.teamSharingActivated && (React.createElement(ButtonShare_1.ButtonShare, { iconSize: ICON_SIZE, Header: `TeamSharing ${props.entityType}`, accessLevel: props.accessLevel, onShare: props.onShare })),
+                props.onDelete && (React.createElement(SimpleButton_1.default, { "data-name": "delete", disabled: props.deleteDisabled, iconSize: ICON_SIZE, tooltip: props.deleteTooltip, icon: "trash", onClick: props.onDelete, variant: "text" })),
+                props.deleteAction && (React.createElement(ButtonDelete_1.ButtonDelete, { disabled: props.deleteDisabled, tooltip: props.deleteTooltip, iconSize: ICON_SIZE, ConfirmationMsg: `Are you sure you want to delete this ${props.entityType}?`, ConfirmationTitle: `Delete ${props.entityType}`, ConfirmAction: props.deleteAction, accessLevel: props.accessLevel })),
+                props.showEditButton && (React.createElement(ButtonEdit_1.ButtonEdit, { iconSize: ICON_SIZE, disabled: props.editDisabled, accessLevel: props.accessLevel, onClick: () => props.handleOnEdit() }))),
+            React.createElement(rebass_1.Box, { flex: 1 }),
+            props.suspendedEnabled && (React.createElement(rebass_1.Flex, { justifyContent: "end" },
+                React.createElement(SuspendToggleButton_1.SuspendToggleButton, { onSuspend: props.onSuspend, onUnSuspend: props.onUnSuspend, suspendableObject: props.abObject, accessLevel: props.accessLevel })))))));
+};
+exports.AdaptableObjectListItemView = AdaptableObjectListItemView;
 const AdaptableObjectListItem = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f;
     const adaptable = AdaptableContext_1.useAdaptable();
     const dispatch = react_redux_1.useDispatch();
     const [isEditWizardVisible, setIsEditWizardVisible] = React.useState(false);
@@ -34,8 +71,8 @@ const AdaptableObjectListItem = (props) => {
         .getEntitlementService()
         .getEntitlementAccessLevelForModule(props.module.moduleInfo.ModuleName);
     const accessLevel = AdaptableHelper_1.default.getAppropriateAccessLevel(props.data.abObject, moduleAccessLevel);
-    const itemBaseClassName = `${baseClassName}__Item`;
-    const itemClassName = join_1.default(props.data.className, itemBaseClassName, props.data.abObject.IsSuspended && `${itemBaseClassName}--is-suspended`);
+    const itemClassName = join_1.default(props.data.className, ITEM_BASE_CLASS_NAME, props.data.abObject.IsSuspended &&
+        `${ITEM_BASE_CLASS_NAME}--is-suspended`);
     const handleCloseWizard = React.useCallback(() => {
         setIsEditWizardVisible(false);
         setWizardStepName(null);
@@ -60,41 +97,14 @@ const AdaptableObjectListItem = (props) => {
     });
     const isEditDisabled = !Boolean(EditWizard || viewOptions.onOpenEditPopup);
     const showActions = !props.hideControls;
-    return (React.createElement(rebass_1.Flex, { "data-name": "adaptable-object-list-item", "data-value": props.data.abObject.Uuid, as: "li", mb: 3, className: itemClassName, style: props.data.style },
-        React.createElement(rebass_1.Box, { flex: 1, className: `${itemBaseClassName}__rows` }, (_j = (_h = (_g = props.data.items).filter) === null || _h === void 0 ? void 0 : _h.call(_g, Boolean)) === null || _j === void 0 ? void 0 : _j.map((tag, index) => {
-            var _a;
-            let labelEl = tag.label;
-            if (typeof tag.label === 'function') {
-                labelEl = React.createElement(tag.label, { data: props.data.abObject });
-            }
-            labelEl = labelEl !== null && labelEl !== void 0 ? labelEl : tag.name;
-            return (React.createElement(rebass_1.Flex, { "data-name": tag.name, key: index, mb: 2, className: `${itemBaseClassName}__row` },
-                React.createElement(rebass_1.Box, { className: `${itemBaseClassName}__label`, mr: 3 },
-                    labelEl,
-                    EditWizard && (React.createElement(SimpleButton_1.default, { accessLevel: accessLevel, className: `${itemBaseClassName}__edit-property`, ml: 1, icon: "edit", tooltip: "edit", iconSize: 18, variant: "text", onClick: () => {
-                            handleOnEdit(tag.name);
-                        } }))),
-                React.createElement(rebass_1.Box, { flex: 1, className: `${itemBaseClassName}__values` },
-                    tag.view &&
-                        React.createElement(tag.view, {
-                            data: props.data.abObject,
-                        }),
-                    Boolean((tag === null || tag === void 0 ? void 0 : tag.values) && ((_a = tag === null || tag === void 0 ? void 0 : tag.values) === null || _a === void 0 ? void 0 : _a.length)) && (React.createElement(ValueSelector_1.ValueOptionsTags, { style: { marginRight: 0 }, readOnly: true, options: tag.values, value: tag.values, allowWrap: true, toIdentifier: (c) => c, toLabel: (c) => React.createElement(React.Fragment, null, c) })))));
-        })),
-        showActions && (React.createElement(rebass_1.Flex, { flexDirection: "column", className: `${itemBaseClassName}__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) => adaptable.api.teamSharingApi.shareEntity(props.data.abObject, props.module.moduleInfo.ModuleName, config) })),
-                deleteAction && (React.createElement(ButtonDelete_1.ButtonDelete, { disabled: props.deleteDisabled, tooltip: props.deleteTooltip, 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 }),
-            hasSuspend && (React.createElement(rebass_1.Flex, { justifyContent: "end" },
-                React.createElement(SuspendToggleButton_1.SuspendToggleButton, { onSuspend: () => dispatch(viewOptions.getSuspendAction(props.data.abObject)), onUnSuspend: () => dispatch(viewOptions.getUnSuspendAction(props.data.abObject)), suspendableObject: props.data.abObject, accessLevel: accessLevel }))))),
+    const showEditButton = Boolean(EditWizard);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(exports.AdaptableObjectListItemView, { abObject: props.data.abObject, accessLevel: accessLevel, actions: actions, className: itemClassName, handleOnEdit: handleOnEdit, items: props.data.items, showActions: showActions, showEditButton: showEditButton, style: props.data.style, teamSharingActivated: teamSharingActivated, onShare: (config) => adaptable.api.teamSharingApi.shareEntity(props.data.abObject, props.module.moduleInfo.ModuleName, config), entityType: entityType, deleteAction: deleteAction, deleteDisabled: props.deleteDisabled, deleteTooltip: props.deleteTooltip, editDisabled: isEditDisabled, suspendedEnabled: hasSuspend, onSuspend: () => dispatch(viewOptions.getSuspendAction(props.data.abObject)), onUnSuspend: () => dispatch(viewOptions.getUnSuspendAction(props.data.abObject)) }),
         isEditWizardVisible && EditWizard && (React.createElement(EditWizard, { defaultCurrentSectionName: wizardStepName, moduleInfo: props.module.moduleInfo, data: props.data.abObject, configEntities: null, onCloseWizard: handleCloseWizard, onFinishWizard: handleCloseWizard }))));
 };
 exports.AdaptableObjectListItem = AdaptableObjectListItem;
 const AdaptableObjectList = (props) => {
     var _a;
-    return (React.createElement("ul", { className: baseClassName }, (_a = props === null || props === void 0 ? void 0 : props.items) === null || _a === void 0 ? void 0 : _a.map((item) => (React.createElement(exports.AdaptableObjectListItem, { key: item.abObject.Uuid, data: item, module: props.module })))));
+    return (React.createElement("ul", { className: LIST_BASE_CLASS_NAME }, (_a = props === null || props === void 0 ? void 0 : props.items) === null || _a === void 0 ? void 0 : _a.map((item) => (React.createElement(exports.AdaptableObjectListItem, Object.assign({ key: item.abObject.Uuid, data: item, module: props.module }, props.itemProps))))));
 };
 exports.AdaptableObjectList = AdaptableObjectList;

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

@@ -41,14 +41,15 @@ const ListBoxFilterForm = (props) => {
         }
     };
     const columnValuesItemsElements = props.columnDistinctValues.map((distinctValue, index) => {
+        var _a, _b, _c;
         const isActive = UiSelectedColumnValues.indexOf(distinctValue.value) >= 0;
-        const columnValue = distinctValue.value;
-        if (StringExtensions_1.StringExtensions.IsNullOrEmpty(columnValue)) {
+        const columnLabel = distinctValue.label;
+        if (StringExtensions_1.StringExtensions.IsNullOrEmpty(columnLabel)) {
             return null;
         }
         if (!props.suppressClientSideFilter &&
             StringExtensions_1.StringExtensions.IsNotNullOrEmpty(FilterValue) &&
-            columnValue.toLocaleLowerCase().indexOf(FilterValue.toLocaleLowerCase()) < 0) {
+            ((_c = (_a = columnLabel === null || columnLabel === void 0 ? void 0 : columnLabel.toLocaleLowerCase) === null || _a === void 0 ? void 0 : (_b = _a.call(columnLabel)).indexOf) === null || _c === void 0 ? void 0 : _c.call(_b, FilterValue.toLocaleLowerCase())) < 0) {
             return null;
         }
         if (props.useAgGridStyle) {
@@ -59,7 +60,7 @@ const ListBoxFilterForm = (props) => {
                 onChange: () => onClickItemColumnValue(distinctValue.value),
             });
         }
-        return (React.createElement(ListGroupItem_1.default, { noZebra: props.useAgGridStyle, key: 'columnValue' + index, onClick: () => onClickItemColumnValue(distinctValue.value), active: isActive, value: columnValue }, distinctValue.label));
+        return (React.createElement(ListGroupItem_1.default, { noZebra: props.useAgGridStyle, key: 'columnValue' + index, onClick: () => onClickItemColumnValue(distinctValue.value), active: isActive, value: distinctValue.value }, 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/Popups/AdaptablePopup/AdaptablePopupModuleView.js

@@ -26,8 +26,10 @@ const AdaptablePopupModuleView = (props) => {
     const moduleViewProperties = props.module.getViewProperties();
     const EditWizard = (_b = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.getEditWizard) === null || _b === void 0 ? void 0 : _b.call(moduleViewProperties);
     const [isWizardOpen, setIsWizardOpen] = React.useState(() => {
-        var _a, _b;
-        return ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'New' || ((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.action) === 'Edit';
+        var _a, _b, _c;
+        return (((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'New' ||
+            ((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.action) === 'Edit' ||
+            ((_c = props.popupParams) === null || _c === void 0 ? void 0 : _c.action) === 'Clone');
     });
     const handleOpenEditPopup = React.useCallback(() => {
         if (EditWizard) {

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

@@ -5,61 +5,43 @@ const tslib_1 = require("tslib");
 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();
+const { toast } = require('react-toastify/dist/react-toastify.js');
 const 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
-    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
-        let weakMapKey = weakMapKeys.get(adaptableId);
-        if (weakMapKey) {
-            apiInstances.delete(weakMapKey);
-            weakMapKeys.delete(adaptableId);
-        }
+    let api = props.api;
+    const off = api.eventApi.on('AdaptableDestroy', () => {
+        toast.dismiss(toastId);
+        api = null;
     });
-    apiInstances.set(weakMapKey, props.api);
+    const adaptableOptions = props.api.internalApi.getAdaptableOptions();
     const toastProps = ObjectFactory_1.default.CreateToastOptions(adaptableOptions.notificationsOptions, {
-        containerId: adaptableId,
+        containerId: adaptableOptions.adaptableId,
         onClose: () => {
-            const weakMapKey = weakMapKeys.get(adaptableId);
-            const adaptableApi = weakMapKey ? apiInstances.get(weakMapKey) : null;
-            if (adaptableApi) {
+            if (api) {
                 off();
-                if (!adaptableApi.isDestroyed()) {
-                    adaptableApi.internalApi.hidePopupAlert();
-                }
-                else {
-                    apiInstances.delete(weakMapKey);
-                    weakMapKeys.delete(adaptableId);
+                if (!api.isDestroyed()) {
+                    api.internalApi.hidePopupAlert();
                 }
             }
         },
     });
     const content = (React.createElement(AdaptablePopupAlert_1.AdaptablePopupAlert, { headless: true, adaptableAlert: props.adaptableAlert, onClose: () => {
-            react_toastify_1.toast.dismiss(toastId);
+            toast.dismiss(toastId);
         } }));
     let toastId;
     switch (props.adaptableAlert.alertDefinition.MessageType) {
         case 'Info':
-            toastId = react_toastify_1.toast.info(content, toastProps);
+            toastId = toast.info(content, toastProps);
             break;
         case 'Error':
-            toastId = react_toastify_1.toast.error(content, toastProps);
+            toastId = toast.error(content, toastProps);
             break;
         case 'Success':
-            toastId = react_toastify_1.toast.success(content, toastProps);
+            toastId = toast.success(content, toastProps);
             break;
         case 'Warning':
-            toastId = react_toastify_1.toast.warn(content, toastProps);
+            toastId = toast.warn(content, toastProps);
             break;
     }
 };

package/src/View/Components/ValueSelector/index.d.ts

@@ -5,13 +5,22 @@ export declare type ValueSelectorProps<OPTION_TYPE, ID_TYPE extends number | str
     value: ID_TYPE[];
     onChange: (selected: ID_TYPE[], selectedMap: Map<ID_TYPE, OPTION_TYPE>) => void;
     allowReorder?: boolean | ((option: OPTION_TYPE) => boolean);
-    filter?: null | ((o: OPTION_TYPE) => boolean);
+    filter?: null | ((o: OPTION_TYPE, searchValue: string) => boolean);
+    /**
+     * To show the filter input, filter needs also to be defined.
+     */
+    showFilterInput?: boolean;
     singleSelect?: boolean;
     toIdentifier: (v: OPTION_TYPE) => ID_TYPE;
     toLabel: (v: OPTION_TYPE) => string | React.ReactElement;
+    /**
+     * Used to render list items, this extra prop allows to have different rendering for list & bottom tags.
+     */
+    toListLabel?: (v: OPTION_TYPE) => string | React.ReactElement;
     noSelectionLabel?: ReactNode;
     clearSelectionLabel?: ReactNode;
     showSelectedOnlyLabel?: ReactNode;
+    showSelectedOnlyPosition?: 'floating' | 'top';
     xSelectedLabel?: (count: number) => ReactNode;
     selectionBoxPosition?: 'top' | 'bottom';
     onShowSelectedOnlyChange?: (selectedOnly: boolean) => void;

package/src/View/Components/ValueSelector/index.js

@@ -13,6 +13,7 @@ const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/Simp
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const reorder_1 = require("../../../Utilities/reorder");
 const Tag_1 = require("../../../components/Tag");
+const AdaptableFormControlTextClear_1 = require("../Forms/AdaptableFormControlTextClear");
 function useValuesMap({ options, value, toIdentifier, selectedMap, }) {
     const optionsMap = react_1.useMemo(() => {
         if (selectedMap) {
@@ -38,7 +39,10 @@ function useValuesMap({ options, value, toIdentifier, selectedMap, }) {
     return { selectedMap: result, optionsMap };
 }
 function ValueSelector(props) {
-    const { options, value, filter, onChange, allowReorder, singleSelect, toLabel, toIdentifier, noSelectionLabel, clearSelectionLabel, showSelectedOnlyLabel, xSelectedLabel, selectionBoxPosition = 'bottom', onShowSelectedOnlyChange, isOptionDisabled, disabled, } = props;
+    var _a;
+    const { options, value, filter, onChange, allowReorder, singleSelect, toLabel, toListLabel, toIdentifier, noSelectionLabel, clearSelectionLabel, showSelectedOnlyLabel, showFilterInput, xSelectedLabel, selectionBoxPosition = 'bottom', onShowSelectedOnlyChange, isOptionDisabled, disabled, } = props;
+    const [searchInputValue, setSearchInputValue] = React.useState('');
+    const preparedToLabel = toListLabel !== null && toListLabel !== void 0 ? toListLabel : toLabel;
     const [selectedOnly, doSetSelectedOnly] = react_1.useState(false);
     const setSelectedOnly = react_1.useCallback((selectedOnly) => {
         doSetSelectedOnly(selectedOnly);
@@ -58,11 +62,11 @@ function ValueSelector(props) {
     }, [onChange, selectedOnly, selectedMap]);
     const renderOption = (option, index) => {
         const identifier = toIdentifier(option);
-        const label = !allowReorder ? toLabel(option) : null;
+        const label = !allowReorder ? preparedToLabel(option) : null;
         const reorderable = typeof allowReorder === 'function' ? allowReorder(option) : allowReorder;
         const renderNode = (props, dragHandleProps) => {
             return (React.createElement(rebass_1.Flex, Object.assign({ alignItems: "center", mt: index ? 1 : 0, key: identifier, backgroundColor: 'primary', padding: 2, "data-index": index, "data-id": identifier, "data-name": "option" }, props, { style: Object.assign({ borderRadius: 'var(--ab__border-radius)' }, props === null || props === void 0 ? void 0 : props.style) }),
-                React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center" },
+                React.createElement(rebass_1.Flex, { flex: 1, flexDirection: "row", alignItems: "center" },
                     reorderable ? (React.createElement(rebass_1.Box, Object.assign({ mr: 3 }, dragHandleProps),
                         React.createElement(icons_1.Icon, { name: "drag", style: { cursor: 'grab' } }))) : null,
                     singleSelect ? (React.createElement(Radio_1.default, { checked: selectedMap.has(identifier), "data-name": identifier, onChange: (checked) => {
@@ -83,7 +87,7 @@ function ValueSelector(props) {
                             }
                             notifyChange();
                         }, checked: selectedMap.has(identifier) }, label)),
-                    React.createElement(rebass_1.Text, { ml: 2 }, allowReorder ? toLabel(option) : null))));
+                    React.createElement(rebass_1.Text, { flex: 1, ml: 2 }, allowReorder ? preparedToLabel(option) : null))));
         };
         return (React.createElement(react_beautiful_dnd_1.Draggable, { key: identifier, index: index, draggableId: `${identifier}`, isDragDisabled: !reorderable }, (draggableProvided) => {
             return renderNode(Object.assign(Object.assign({ ref: draggableProvided.innerRef }, draggableProvided.draggableProps), { style: draggableProvided.draggableProps.style }), draggableProvided.dragHandleProps);
@@ -108,9 +112,14 @@ function ValueSelector(props) {
             selectionBox,
             React.createElement(ValueOptionsTags, { options: options, value: value, selectedMap: selectedMap, toLabel: toLabel, toIdentifier: toIdentifier, onClearOption: notifyChange, readOnly: disabled })));
     };
+    const showOnlySelectedCheckbox = (React.createElement(CheckBox_1.CheckBox, { disabled: !value.length, checked: selectedOnly, onChange: setSelectedOnly }, showSelectedOnlyLabel !== null && showSelectedOnlyLabel !== void 0 ? showSelectedOnlyLabel : 'Show Selected Only'));
+    const showSelectedOnlyPosition = (_a = props.showSelectedOnlyPosition) !== null && _a !== void 0 ? _a : 'floating';
     return (React.createElement(rebass_1.Flex, { flexDirection: "column", flex: 1, className: "ab-ValueSelector", style: {
             overflow: 'hidden',
         } },
+        React.createElement(rebass_1.Flex, { mb: 1 },
+            showFilterInput && filter ? (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", style: { flex: 1, border: 0, margin: 3 } })) : (React.createElement(rebass_1.Box, { flex: 1 })),
+            showSelectedOnlyPosition === 'top' && React.createElement(rebass_1.Box, { ml: 20 }, showOnlySelectedCheckbox)),
         selectionBoxPosition === 'top' && renderSelectionSection(),
         React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: (result) => {
                 const { source, destination } = result;
@@ -136,7 +145,7 @@ function ValueSelector(props) {
                 notifyChange();
             } },
             React.createElement(rebass_1.Flex, { flexDirection: "column", flex: 1, style: { overflow: 'auto' } },
-                React.createElement(rebass_1.Box, { style: {
+                showSelectedOnlyPosition === 'floating' && (React.createElement(rebass_1.Box, { style: {
                         position: 'sticky',
                         top: 0,
                         zIndex: 10000,
@@ -147,15 +156,14 @@ function ValueSelector(props) {
                             right: 0,
                             borderRadius: 'var(--ab__border-radius)',
                             overflow: 'hidden',
-                        }, fontSize: 2, backgroundColor: "defaultbackground" },
-                        React.createElement(CheckBox_1.CheckBox, { disabled: !value.length, checked: selectedOnly, onChange: setSelectedOnly }, showSelectedOnlyLabel !== null && showSelectedOnlyLabel !== void 0 ? showSelectedOnlyLabel : 'Show Selected Only'))),
+                        }, fontSize: 2, backgroundColor: "defaultbackground" }, showOnlySelectedCheckbox))),
                 React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, (droppableProvided) => {
                     return (React.createElement("div", Object.assign({ ref: droppableProvided.innerRef }, droppableProvided.droppableProps),
                         options
                             .filter((option) => {
                             let result = true;
                             if (filter) {
-                                result = filter(option);
+                                result = filter(option, searchInputValue);
                             }
                             result =
                                 result && (selectedOnly ? selectedMap.has(toIdentifier(option)) : true);

package/src/View/FormatColumn/FormatColumnSummary.js

@@ -68,7 +68,8 @@ class FormatColumnSummaryComponent extends React.Component {
         });
     }
     onCloseWizard() {
-        this.setState({
+        var _a;
+        (_a = this === null || this === void 0 ? void 0 : this.setState) === null || _a === void 0 ? void 0 : _a.call(this, {
             editedAdaptableObject: null,
             wizardStartIndex: 0,
             wizardStatus: EditableConfigEntityState_1.WizardStatus.None,

package/src/View/Layout/Wizard/LayoutEditor/index.js

@@ -226,7 +226,7 @@ exports.LayoutEditor = React.memo((props) => {
                         const initialHeader = api.columnApi.getFriendlyNameFromColumnId(c.columnId);
                         return (React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "stretch", "data-name": "drag-item", "data-col-id": c.columnId },
                             React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", backgroundColor: "secondary", color: "text-on-secondary" },
-                                React.createElement(rebass_1.Flex, { flex: 1, alignItems: "center" },
+                                React.createElement(rebass_1.Flex, { alignItems: "center" },
                                     React.createElement(rebass_1.Box, { ml: 2, mr: 2 },
                                         React.createElement(icons_1.Icon, { name: "drag", size: 30 })),
                                     initialHeader,

package/src/View/Layout/Wizard/LayoutWizard.d.ts

@@ -1,9 +1,6 @@
 import * as React from 'react';
-import { AdaptableObjectAdaptableWizardProps } from '../../Wizard/Interface/IAdaptableWizard';
-import { ColumnSort } from '../../../PredefinedConfig/Common/ColumnSort';
-export interface LayoutWizardProps extends AdaptableObjectAdaptableWizardProps<LayoutWizard> {
-    ColumnSorts: ColumnSort[];
-}
-export declare class LayoutWizard extends React.Component<LayoutWizardProps, {}> {
-    render(): JSX.Element;
+import { AdaptableOnePageWizardProps } from '../../Wizard/Interface/IAdaptableWizard';
+import { Layout } from '../../../../types';
+export interface LayoutWizardProps extends AdaptableOnePageWizardProps<Layout> {
 }
+export declare const LayoutWizard: React.FunctionComponent<LayoutWizardProps>;