@adaptabletools/adaptable 11.1.1 → 11.1.4

package/src/Utilities/ExpressionFunctions/scalarExpressionFunctions.js

@@ -93,9 +93,6 @@ exports.scalarExpressionFunctions = {
             if (!column.queryable) {
                 throw new ExpressionEvaluationError_1.ExpressionEvaluationError('COL', `Column name "${columnId}" is not queryable`);
             }
-            // return context.api?.gridApi.getNormalisedValueFromRowNode(context.node, columnId);
-            // const gridCell = context.api?.gridApi.getGridCellFromRowNode(context.node, columnId);
-            // return gridCell.rawValue;
             return (_b = context.api) === null || _b === void 0 ? void 0 : _b.gridApi.getRawValueFromRowNode(context.node, columnId);
         },
         description: 'Returns the value of a column',

package/src/Utilities/Helpers/StyleHelper.d.ts

@@ -7,3 +7,4 @@ export declare const toStyle: (style?: AdaptableStyle) => {
     borderWidth: number;
     borderStyle: string;
 };
+export declare const getVariableColor: (variable: string) => string;

package/src/Utilities/Helpers/StyleHelper.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toStyle = exports.convertCSSAbsoluteFontSizeToPt = exports.convertAdaptableStyleToCSS = void 0;
+exports.getVariableColor = exports.toStyle = exports.convertCSSAbsoluteFontSizeToPt = exports.convertAdaptableStyleToCSS = void 0;
 const EnumExtensions_1 = require("../Extensions/EnumExtensions");
 exports.convertAdaptableStyleToCSS = (style) => {
     let result = {};
@@ -45,3 +45,15 @@ exports.convertCSSAbsoluteFontSizeToPt = (fontSize) => {
 exports.toStyle = (style) => {
     return Object.assign(Object.assign({}, exports.convertAdaptableStyleToCSS(style !== null && style !== void 0 ? style : {})), { borderWidth: (style === null || style === void 0 ? void 0 : style.BorderColor) ? 2 : 0, borderStyle: 'solid' });
 };
+exports.getVariableColor = (variable) => {
+    var _a;
+    const isVariable = (_a = variable === null || variable === void 0 ? void 0 : variable.startsWith) === null || _a === void 0 ? void 0 : _a.call(variable, 'var(');
+    if (!isVariable) {
+        return variable;
+    }
+    const match = /\((.+)\)/.exec(variable);
+    if (!match) {
+        return variable;
+    }
+    return getComputedStyle(document.documentElement).getPropertyValue(match[1]).trim();
+};

package/src/Utilities/Interface/MessagePopups.d.ts

@@ -3,6 +3,7 @@ import { ModuleParams } from '../../View/Components/SharedProps/ModuleViewPopupP
 import { AdaptableModule } from '../../PredefinedConfig/Common/Types';
 import { AdaptableMessageType } from '../../PredefinedConfig/Common/AdaptableMessageType';
 import { AdaptableAlert } from '../../PredefinedConfig/Common/AdaptableAlert';
+import { AdaptableForm, ButtonContext } from '../../types';
 export interface UIConfirmation {
     Header: string;
     Msg: string;
@@ -71,3 +72,14 @@ export interface WindowPopup {
         Icon?: string;
     }[];
 }
+export interface FormPopup {
+    FormList: {
+        Id: string;
+        FormProps: any;
+        /**
+         * Allows to customise the context before submitting the form
+         */
+        prepareContext?: (context: ButtonContext) => Promise<ButtonContext> | ButtonContext;
+        Form: AdaptableForm<ButtonContext>;
+    }[];
+}

package/src/View/AdaptableView.js

@@ -12,10 +12,10 @@ const AdaptablePopupConfirmation_1 = require("./Components/Popups/AdaptablePopup
 const AdaptableLoadingScreen_1 = require("./Components/Popups/AdaptableLoadingScreen");
 const renderWithAdaptableContext_1 = require("./renderWithAdaptableContext");
 const License_1 = require("./License");
-const ExportCustomDestinationFormPopups_1 = require("./Export/ExportCustomDestinationFormPopups");
 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");
 class AdaptableView extends React.Component {
     render() {
         var _a, _b, _c, _d;
@@ -26,11 +26,11 @@ 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(ExportCustomDestinationFormPopups_1.ExportCustomDestinationFormPopups, { api: this.props.AdaptableApi }),
             React.createElement(react_toastify_1.ToastContainer, { limit: this.props.AdaptableApi.internalApi.getAdaptableOptions().notificationsOptions
                     .maxNotifications, closeButton: false, icon: false, theme: "colored" }),
             (watermark === null || watermark === void 0 ? void 0 : watermark.show) && React.createElement(License_1.LicenseWatermark, null, watermark === null || watermark === void 0 ? void 0 : watermark.text),
             React.createElement(WindowPopups_1.WindowPopups, null),
+            React.createElement(FormPopups_1.FormPopups, null),
             React.createElement(ProgressIndicator_1.ProgressIndicator, null)));
     }
 }

package/src/View/AdaptableViewFactory.js

@@ -4,10 +4,8 @@ exports.AdaptableViewPanelFactory = exports.AdaptableViewFactory = void 0;
 const tslib_1 = require("tslib");
 const SmartEditPopup_1 = require("./SmartEdit/SmartEditPopup");
 const QuickSearchPopup_1 = require("./QuickSearch/QuickSearchPopup");
-const ExpandedQueryPopup_1 = require("./Query/ExpandedQueryPopup");
 const ThemePopup_1 = require("./Theme/ThemePopup");
 const ToolPanelPopup_1 = require("./Components/ToolPanel/ToolPanelPopup");
-const LayoutPopup_1 = require("./Layout/LayoutPopup");
 const GridInfoPopup_1 = require("./GridInfo/GridInfoPopup");
 const TeamSharingPopup_1 = require("./TeamSharing/TeamSharingPopup");
 const DashboardPopup_1 = require("./Dashboard/DashboardPopup");
@@ -33,12 +31,12 @@ const DataChangeHistoryPopup_1 = require("./DataChangeHistory/DataChangeHistoryP
 const DataChangeHistoryViewPanel_1 = require("./DataChangeHistory/DataChangeHistoryViewPanel");
 const StateManagementViewPanel_1 = require("./StateManagement/StateManagementViewPanel");
 exports.AdaptableViewFactory = {
-    ExpandedQueryPopup: ExpandedQueryPopup_1.ExpandedQueryPopup,
+    // ExpandedQueryPopup,
     BulkUpdatePopup: BulkUpdatePopup_1.BulkUpdatePopup,
     DashboardPopup: DashboardPopup_1.DashboardPopup,
     StateManagementPopup: StateManagementPopup_1.StateManagementPopup,
     GridInfoPopup: GridInfoPopup_1.GridInfoPopup,
-    LayoutPopup: LayoutPopup_1.LayoutPopup,
+    // LayoutPopup,
     QuickSearchPopup: QuickSearchPopup_1.QuickSearchPopup,
     CellSummaryPopup: CellSummaryPopup_1.CellSummaryPopup,
     SmartEditPopup: SmartEditPopup_1.SmartEditPopup,

package/src/View/ColorPicker.d.ts

@@ -2,7 +2,9 @@ import * as React from 'react';
 import { HTMLProps } from 'react';
 import { BoxProps } from 'rebass';
 import { AdaptableApi } from '../Api/AdaptableApi';
-export declare type ColorPickerProps = HTMLProps<HTMLInputElement> & {
+export declare type ColorPickerProps = Omit<HTMLProps<HTMLInputElement>, 'onChange'> & {
     api: AdaptableApi;
-} & BoxProps;
+    onChange: (color: string) => void;
+    value: string;
+} & Omit<BoxProps, 'onChange'>;
 export declare const ColorPicker: React.ForwardRefExoticComponent<Pick<ColorPickerProps, "max" | "required" | "default" | "high" | "low" | "disabled" | "start" | "open" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "m" | "color" | "content" | "size" | "flex" | "wrap" | "padding" | "multiple" | "alignSelf" | "backgroundColor" | "fontSize" | "height" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "translate" | "width" | "margin" | "children" | "key" | "list" | "step" | "contextMenu" | "api" | "type" | "min" | "rows" | "download" | "value" | "checked" | "onClick" | "name" | "colSpan" | "rowSpan" | "className" | "id" | "lang" | "method" | "target" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as" | "hrefLang" | "integrity" | "rel" | "sizes" | "charSet" | "kind" | "src" | "srcLang" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "maxLength" | "minLength" | "readOnly" | "htmlFor" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "headers" | "scope" | "cols" | "poster" | "challenge" | "keyType" | "keyParams" | "mt" | "mb" | "ml" | "mr" | "my" | "marginY" | "mx" | "marginX" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "css" | "bg"> & React.RefAttributes<unknown>>;

package/src/View/ColorPicker.js

@@ -4,17 +4,29 @@ exports.ColorPicker = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const Input_1 = tslib_1.__importDefault(require("../components/Input"));
+const StyleHelper_1 = require("../Utilities/Helpers/StyleHelper");
 const tinycolor = require('tinycolor2');
 exports.ColorPicker = React.forwardRef((props, ref) => {
     const ColorPalette = props.api.userInterfaceApi.getColorPalette();
     let { api, value } = props, restProps = tslib_1.__rest(props, ["api", "value"]);
-    const ABcolorChoicesOptions = ColorPalette.map((x) => (React.createElement("option", { key: x, value: x }, x)));
+    const optionsMap = ColorPalette.reduce((acc, colorItem) => (Object.assign(Object.assign({}, acc), { [StyleHelper_1.getVariableColor(colorItem)]: colorItem })), {});
+    const ABcolorChoicesOptions = Object.keys(optionsMap).map((x) => {
+        return (React.createElement("option", { key: x, value: x }, x));
+    });
     const ABcolorChoices = React.createElement("datalist", { id: 'ABcolorChoices' }, ABcolorChoicesOptions);
-    value = React.useMemo(() => {
-        return tinycolor(value).toHexString();
+    const preparedValue = React.useMemo(() => {
+        const color = StyleHelper_1.getVariableColor(value);
+        return tinycolor(color).toHexString();
     }, [value]);
     return (React.createElement("div", { className: 'ColorPicker' },
-        React.createElement(Input_1.default, Object.assign({}, restProps, { value: value, ref: ref, type: "color", style: {
+        React.createElement(Input_1.default, Object.assign({}, restProps, { onChange: (event) => {
+                var _a;
+                /**
+                 * The value is not in the map when the color is not in the palette.
+                 */
+                const color = (_a = optionsMap[event.target.value]) !== null && _a !== void 0 ? _a : event.target.value;
+                props.onChange(color);
+            }, value: preparedValue, ref: ref, type: "color", style: {
                 width: 70,
                 padding: 0 /* we need this to be 0, since otherwise on Windows browsers, the chosen color cannot be seen */,
             }, list: "ABcolorChoices" })),

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

@@ -15,15 +15,16 @@ const ButtonEdit_1 = require("../Buttons/ButtonEdit");
 const ButtonShare_1 = require("../Buttons/ButtonShare");
 const SuspendToggleButton_1 = require("../Buttons/SuspendToggleButton/SuspendToggleButton");
 const ValueSelector_1 = require("../ValueSelector");
+const ICON_SIZE = 26;
 exports.AdaptableObjectListItem = (props) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const adaptable = AdaptableContext_1.useAdaptable();
     const dispatch = react_redux_1.useDispatch();
     const [isEditWizardVisible, setIsEditWizardVisible] = React.useState(false);
     const [wizardStepName, setWizardStepName] = React.useState(null);
-    const viewOptions = (_a = props.module) === null || _a === void 0 ? void 0 : _a.getViewProperties();
-    const EditWizard = (_b = viewOptions.getEditWizard) === null || _b === void 0 ? void 0 : _b.call(viewOptions, props.data.abObject);
-    const deleteAction = (_c = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.getDeleteAction) === null || _c === void 0 ? void 0 : _c.call(viewOptions, props.data.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 EditWizard = (_c = viewOptions.getEditWizard) === null || _c === void 0 ? void 0 : _c.call(viewOptions, props.data.abObject);
+    const deleteAction = (_d = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.getDeleteAction) === null || _d === void 0 ? void 0 : _d.call(viewOptions, props.data.abObject);
     const teamSharingActivated = adaptable.api.teamSharingApi.isTeamSharingActivated() &&
         adaptable.api.teamSharingApi.hasTeamSharingFullRights();
     const entityType = props.module.moduleInfo.FriendlyName;
@@ -33,46 +34,50 @@ exports.AdaptableObjectListItem = (props) => {
     const accessLevel = AdaptableHelper_1.default.getAppropriateAccessLevel(props.data.abObject, moduleAccessLevel);
     const baseClassName = `${props.baseClassName}__Item`;
     const itemClassName = join_1.default(baseClassName, props.data.abObject.IsSuspended && `${baseClassName}--is-suspended`);
-    const handleCloseWizard = () => {
+    const handleCloseWizard = React.useCallback(() => {
         setIsEditWizardVisible(false);
         setWizardStepName(null);
-    };
-    const handleOpenWizard = (sectionName) => {
-        setIsEditWizardVisible(true);
-        if (sectionName) {
-            setWizardStepName(sectionName);
+    }, []);
+    const handleOnEdit = React.useCallback((sectionName) => {
+        var _a;
+        if (EditWizard) {
+            setIsEditWizardVisible(true);
+            if (sectionName) {
+                setWizardStepName(sectionName);
+            }
         }
-    };
+        (_a = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.onOpenEditPopup) === null || _a === void 0 ? void 0 : _a.call(viewOptions, props.data.abObject);
+    }, []);
     const hasSuspend = Boolean(viewOptions.getSuspendAction);
-    const actions = (_e = (_d = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.actions) === null || _d === void 0 ? void 0 : _d.map) === null || _e === void 0 ? void 0 : _e.call(_d, (component, index) => {
+    const actions = (_f = (_e = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.actions) === null || _e === void 0 ? void 0 : _e.map) === null || _f === void 0 ? void 0 : _f.call(_e, (component, index) => {
         return React.createElement(component, {
             data: props.data.abObject,
             key: index,
         });
     });
-    const iconSize = 26;
+    const isEditDisabled = !Boolean(EditWizard || viewOptions.onOpenEditPopup);
     return (React.createElement(rebass_1.Flex, { as: "li", mb: 3, className: itemClassName },
-        React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__rows` }, (_f = props.data.items) === null || _f === void 0 ? void 0 : _f.map((tag, index) => {
+        React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__rows` }, (_g = props.data.items) === null || _g === void 0 ? void 0 : _g.map((tag, index) => {
             var _a;
             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 },
                     tag.label || tag.name,
                     EditWizard && (React.createElement(SimpleButton_1.default, { accessLevel: accessLevel, className: `${baseClassName}__edit-property`, ml: 1, icon: "edit", tooltip: "edit", iconSize: 18, variant: "text", onClick: () => {
-                            handleOpenWizard(tag.name);
+                            handleOnEdit(tag.name);
                         } }))),
                 React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__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, { readOnly: true, options: tag.values, value: tag.values, allowWrap: true, toIdentifier: (c) => c, toLabel: (c) => React.createElement(React.Fragment, null, c) })))));
+                    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) })))));
         })),
         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: iconSize, Header: `TeamSharing ${entityType}`, accessLevel: accessLevel, onShare: (config) => dispatch(TeamSharingRedux_1.TeamSharingShare(props.data.abObject, props.module.moduleInfo.ModuleName, config)) })),
-                deleteAction && (React.createElement(ButtonDelete_1.ButtonDelete, { iconSize: iconSize, ConfirmationMsg: `Are you sure you want to delete this ${entityType}?`, ConfirmationTitle: `Delete ${entityType}`, ConfirmAction: deleteAction, accessLevel: accessLevel })),
-                React.createElement(ButtonEdit_1.ButtonEdit, { iconSize: iconSize, disabled: !Boolean(EditWizard), accessLevel: accessLevel, onClick: () => handleOpenWizard() })),
+                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)) })),
+                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 }),
             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 })))),

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupBody.js

@@ -31,5 +31,7 @@ exports.AdaptablePopupBody = (props) => {
         moduleInfo,
     };
     const BodyComponent = (AdaptableViewFactory_1.AdaptableViewFactory === null || AdaptableViewFactory_1.AdaptableViewFactory === void 0 ? void 0 : AdaptableViewFactory_1.AdaptableViewFactory[(_a = props === null || props === void 0 ? void 0 : props.componentName) !== null && _a !== void 0 ? _a : moduleInfo.Popup]) || AdaptablePopupModuleView_1.AdaptablePopupModuleView;
-    return React.createElement(BodyComponent, Object.assign({ module: props.module }, moduleProps));
+    // key is to make sure state is reset between views
+    // most of the views use the `AdaptablePopupModuleView` component
+    return React.createElement(BodyComponent, Object.assign({ key: props === null || props === void 0 ? void 0 : props.componentName, module: props.module }, moduleProps));
 };

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupModuleView.js

@@ -17,21 +17,29 @@ exports.AdaptablePopupModuleView = (props) => {
      * Not sure yet how to trigger this component to render when an item is edited.
      */
     react_redux_1.useSelector((state) => state);
+    const [abObjectType, setAbObjectType] = React.useState(null);
+    const moduleInfo = props.module.moduleInfo;
+    const items = (_a = props.module) === null || _a === void 0 ? void 0 : _a.toViewAll();
+    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';
     });
+    const handleOpenEditPopup = React.useCallback(() => {
+        if (EditWizard) {
+            setIsWizardOpen(true);
+        }
+        if (moduleViewProperties.onOpenEditPopup) {
+            moduleViewProperties.onOpenEditPopup();
+        }
+    }, []);
     React.useEffect(() => {
         var _a, _b;
         if (((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'New' || ((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.action) === 'Edit') {
-            setIsWizardOpen(true);
+            handleOpenEditPopup();
         }
-    }, [(_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action]);
-    const [abObjectType, setAbObjectType] = React.useState(null);
-    const moduleInfo = props.module.moduleInfo;
-    const items = (_b = props.module) === null || _b === void 0 ? void 0 : _b.toViewAll();
-    const moduleViewProperties = props.module.getViewProperties();
-    const EditWizard = (_c = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.getEditWizard) === null || _c === void 0 ? void 0 : _c.call(moduleViewProperties);
+    }, [(_c = props.popupParams) === null || _c === void 0 ? void 0 : _c.action]);
     const emptyView = moduleViewProperties.emptyView;
     let emptyContent = null;
     if (typeof emptyView === 'function') {
@@ -44,23 +52,23 @@ exports.AdaptablePopupModuleView = (props) => {
     // e.g. filter
     let newButton = null;
     if ((_d = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes) === null || _d === void 0 ? void 0 : _d.length) {
-        const items = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes.map((abObjctType) => {
+        const items = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes.map((abObjectType) => {
             var _a;
             return {
-                disabled: (abObjctType === null || abObjctType === void 0 ? void 0 : abObjctType.accessLevel) === 'ReadOnly',
+                disabled: (abObjectType === null || abObjectType === void 0 ? void 0 : abObjectType.accessLevel) === 'ReadOnly',
                 onClick: () => {
-                    setAbObjectType(abObjctType);
-                    setIsWizardOpen(true);
+                    setAbObjectType(abObjectType);
+                    handleOpenEditPopup();
                 },
-                label: (_a = abObjctType.label) !== null && _a !== void 0 ? _a : abObjctType.name,
+                label: (_a = abObjectType.label) !== null && _a !== void 0 ? _a : abObjectType.name,
             };
         });
         newButton = (React.createElement(DropdownButton_1.default, { tone: "accent", variant: "raised", columns: ['label'], items: items, tooltip: 'Create ' + moduleInfo.FriendlyName },
             React.createElement(icons_1.Icon, { name: "plus" }),
             " New"));
     }
-    else if (EditWizard) {
-        newButton = (React.createElement(ButtonNew_1.ButtonNew, { onClick: () => setIsWizardOpen(true), tooltip: 'Create ' + moduleInfo.FriendlyName, accessLevel: props.accessLevel, style: {
+    else if (EditWizard || moduleViewProperties.onOpenEditPopup) {
+        newButton = (React.createElement(ButtonNew_1.ButtonNew, { onClick: () => handleOpenEditPopup(), tooltip: 'Create ' + moduleInfo.FriendlyName, accessLevel: props.accessLevel, style: {
                 color: 'var(--ab-color-text-on-add)',
                 fill: 'var(--ab-color-text-on-add)',
                 background: 'var(--ab-color-action-add)',
@@ -76,5 +84,5 @@ exports.AdaptablePopupModuleView = (props) => {
     };
     return (React.createElement(PopupPanel_1.PopupPanel, { glyphicon: moduleInfo.Glyph, infoLink: moduleInfo.HelpPage, headerText: moduleInfo.FriendlyName, button: newButton },
         (items === null || items === void 0 ? void 0 : items.length) ? (React.createElement(AdaptableObjectList_1.AdaptableObjectList, { module: props.module, items: items })) : (React.createElement(EmptyContent_1.default, null, emptyContent !== null && emptyContent !== void 0 ? emptyContent : `Click 'New' to create a new ${moduleInfo.FriendlyName}`)),
-        isWizardOpen && (React.createElement(EditWizard, { abObjectType: abObjectType, moduleInfo: moduleInfo, data: null, popupParams: props.popupParams, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));
+        isWizardOpen && EditWizard && (React.createElement(EditWizard, { abObjectType: abObjectType, moduleInfo: moduleInfo, data: null, popupParams: props.popupParams, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));
 };

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { AdaptableForm, ButtonContext } from '../../../../../types';
+export interface FormDialogProps {
+    id: string;
+    formProps: any;
+    prepareContext: (context: ButtonContext) => Promise<ButtonContext> | ButtonContext;
+    form: AdaptableForm<ButtonContext>;
+}
+export declare const FormDialog: React.FunctionComponent<FormDialogProps>;
+export declare const FormPopups: React.FunctionComponent;

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormPopups = exports.FormDialog = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const rebass_1 = require("rebass");
+const AdaptableFormComponent_1 = require("../../../../components/AdaptableFormComponent");
+const Dialog_1 = tslib_1.__importDefault(require("../../../../components/Dialog"));
+const AdaptableForm_1 = require("../../../../PredefinedConfig/Common/AdaptableForm");
+const PopupRedux_1 = require("../../../../Redux/ActionsReducers/PopupRedux");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+exports.FormDialog = ({ id, formProps, form, prepareContext, }) => {
+    const dispatch = react_redux_1.useDispatch();
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const [data, setData] = React.useState(() => {
+        return AdaptableForm_1.getDefaultAdaptableFormData(form);
+    });
+    const handleDismiss = () => {
+        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 },
+            React.createElement(AdaptableFormComponent_1.AdaptableFormComponent, { formDef: form, data: data, context: context, onChange: setData, api: adaptable.api, displayTitle: true, onButtonClick: async (button) => {
+                    var _a;
+                    handleDismiss();
+                    const preparedContext = typeof prepareContext === 'function' ? await prepareContext(context) : context;
+                    (_a = button.onClick) === null || _a === void 0 ? void 0 : _a.call(button, button, preparedContext);
+                } }))));
+};
+exports.FormPopups = () => {
+    const forms = react_redux_1.useSelector((state) => state.Popup.FormPopup.FormList);
+    return (React.createElement(React.Fragment, null, forms.map((form) => {
+        return (React.createElement(exports.FormDialog, { key: form.Id, prepareContext: form.prepareContext, id: form.Id, formProps: form.FormProps, form: form.Form }));
+    })));
+};

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

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { AdaptableApi } from '../../../../../types';
 export interface WindowPopupChildProps {
     onDismiss: () => void;
     popupProps: any;
+    api: AdaptableApi;
 }
 export declare const WindowPopups: React.FunctionComponent;

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

@@ -6,6 +6,8 @@ const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const Dialog_1 = tslib_1.__importDefault(require("../../../../components/Dialog"));
 const PopupRedux_1 = require("../../../../Redux/ActionsReducers/PopupRedux");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const PanelWithImage_1 = require("../../Panels/PanelWithImage");
 const Utilities_1 = require("../Utilities");
 const windowFactory_1 = require("./windowFactory");
 const NoopComponent = () => {
@@ -13,20 +15,22 @@ const NoopComponent = () => {
 };
 exports.WindowPopups = () => {
     const [windowModalSettings, setWindowModalSettings] = React.useState({});
+    const adaptable = AdaptableContext_1.useAdaptable();
     const dispatch = react_redux_1.useDispatch();
     const windowItems = react_redux_1.useSelector((state) => state.Popup.WindowPopup.PopupList);
     return (React.createElement(React.Fragment, null, windowItems === null || windowItems === void 0 ? void 0 : windowItems.map((windowItem, index) => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         const Component = (_a = windowFactory_1.windowFactory[windowItem.Id]) !== null && _a !== void 0 ? _a : NoopComponent;
-        const _f = windowItem.PopupProps, { windowModalProps } = _f, restPopupProps = tslib_1.__rest(_f, ["windowModalProps"]);
+        const _g = (_b = windowItem === null || windowItem === void 0 ? void 0 : windowItem.PopupProps) !== null && _b !== void 0 ? _b : {}, { windowModalProps } = _g, restPopupProps = tslib_1.__rest(_g, ["windowModalProps"]);
         const handleDismiss = () => {
-            dispatch(PopupRedux_1.PopupWindowHide(windowItem.Id));
+            dispatch(PopupRedux_1.PopupHideWindow(windowItem.Id));
         };
-        const size = (_c = (_b = windowModalSettings === null || windowModalSettings === void 0 ? void 0 : windowModalSettings[windowItem.Id]) === null || _b === void 0 ? void 0 : _b.size) !== null && _c !== void 0 ? _c : Utilities_1.getWindowPopupSize();
-        const position = (_e = (_d = windowModalSettings === null || windowModalSettings === void 0 ? void 0 : windowModalSettings[windowItem.Id]) === null || _d === void 0 ? void 0 : _d.position) !== null && _e !== void 0 ? _e : Utilities_1.getMiddlePosition(size);
+        const size = (_d = (_c = windowModalSettings === null || windowModalSettings === void 0 ? void 0 : windowModalSettings[windowItem.Id]) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : Utilities_1.getWindowPopupSize();
+        const position = (_f = (_e = windowModalSettings === null || windowModalSettings === void 0 ? void 0 : windowModalSettings[windowItem.Id]) === null || _e === void 0 ? void 0 : _e.position) !== null && _f !== void 0 ? _f : Utilities_1.getMiddlePosition(size);
         return (React.createElement(Dialog_1.default, { "data-name": windowItem.Id, style: { height: '100%' }, className: "ab-Window-Modal", key: windowItem.Id, windowModal: true, windowModalProps: Object.assign(Object.assign({}, windowModalProps), { onChange: (settings) => {
                     setWindowModalSettings((settingsMap) => (Object.assign(Object.assign({}, settingsMap), { [windowItem.Id]: settings })));
                 }, handleSelector: '.ab-Window-Modal .ab-Panel__header', size: size, position: position }), fixed: false, padding: 0, onDismiss: handleDismiss, isOpen: true, showCloseButton: true },
-            React.createElement(Component, { onDismiss: handleDismiss, popupProps: restPopupProps })));
+            React.createElement(PanelWithImage_1.PanelWithImage, { style: { height: '100%' }, bodyProps: { padding: 0, height: '100%' }, header: windowItem.Title, glyphicon: windowItem.Icon, variant: "primary" },
+                React.createElement(Component, { api: adaptable.api, onDismiss: handleDismiss, popupProps: restPopupProps }))));
     })));
 };

package/src/View/Components/Popups/WindowPopups/windowFactory.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
 import { WindowPopupChildProps } from './WindowPopups';
 export declare const WINDOW_LAYOUT_EDITOR = "WINDOW_LAYOUT_EDITOR";
+export declare const WINDOW_QUERY_EDITOR = "WINDOW_QUERY_EDITOR";
 export declare const windowFactory: Record<string, React.FunctionComponent<WindowPopupChildProps>>;

package/src/View/Components/Popups/WindowPopups/windowFactory.js

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.windowFactory = exports.WINDOW_LAYOUT_EDITOR = void 0;
+exports.windowFactory = exports.WINDOW_QUERY_EDITOR = exports.WINDOW_LAYOUT_EDITOR = void 0;
 const LayoutEditorStandalonePopup_1 = require("../../../Layout/LayoutEditorStandalonePopup");
+const ExpandedQueryPopup_1 = require("../../../Query/ExpandedQueryPopup");
 exports.WINDOW_LAYOUT_EDITOR = 'WINDOW_LAYOUT_EDITOR';
+exports.WINDOW_QUERY_EDITOR = 'WINDOW_QUERY_EDITOR';
 exports.windowFactory = {
     [exports.WINDOW_LAYOUT_EDITOR]: LayoutEditorStandalonePopup_1.LayoutEditorStandalonePopup,
+    [exports.WINDOW_QUERY_EDITOR]: ExpandedQueryPopup_1.ExpandedQueryPopup,
 };

package/src/View/Components/RangesComponent.js

@@ -63,9 +63,8 @@ class RangesComponent extends React.Component {
                                 const { value } = event.target;
                                 this.changeRangeMax(index, value);
                             }, mr: 2 }),
-                        React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: range.Color, onChange: (event) => {
-                                const { value } = event.target;
-                                this.changeRangeColor(index, value);
+                        React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
+                                this.changeRangeColor(index, color);
                             }, mr: 2, height: "100%" }),
                         this.props.showRangeDirection && (React.createElement(CheckBox_1.CheckBox, { marginLeft: 2, marginRight: 2, checked: range.ReverseGradient && range.ReverseGradient == true, onChange: (checked) => this.changeRangeDirectionUp(index, checked) }, "Reverse Gradient")),
                         React.createElement(SimpleButton_1.default, { icon: "delete", disabled: this.state.ranges && this.state.ranges.length == 1, onClick: () => this.removeRange(index) })))),
@@ -84,9 +83,8 @@ class RangesComponent extends React.Component {
                             React.createElement(FormLayout_1.FormRow, { label: "Max Value:", first: React.createElement(Input_1.default, { type: "number", value: comparisonMaxValueNumber, onChange: (e) => {
                                         this.changeColumnComparisonMaxValue(e);
                                     } }), or: "OR", second: React.createElement(ColumnSelector_1.ColumnSelector, { style: { maxWidth: '15rem' }, SelectedColumnIds: [comparisonMaxValueColumnId], ColumnList: this.props.api.columnApi.getNumericColumns(), onColumnChange: (columns) => this.onMaxColumnSelectedChanged(columns), SelectionMode: Enums_1.SelectionMode.Single }) }),
-                            React.createElement(FormLayout_1.FormRow, { label: "Bar Colour:", first: React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: comparisonColor, onChange: (event) => {
-                                        const { value } = event.target;
-                                        this.changeColumnComparisonColor(value);
+                            React.createElement(FormLayout_1.FormRow, { label: "Bar Colour:", first: React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: comparisonColor, onChange: (color) => {
+                                        this.changeColumnComparisonColor(color);
                                     } }) }))))))));
     }
     onRangesTypeChanged(checked) {

package/src/View/Components/StyleComponent.js

@@ -120,19 +120,16 @@ class StyleComponent extends React.Component {
         this.state.componentStyle.FontSize = checked ? Enums_1.FontSize.Medium : null;
         this.props.UpdateStyle(this.state.componentStyle);
     }
-    onBackColorSelectChange(event) {
-        let e = event.target;
-        this.state.componentStyle.BackColor = e.value;
+    onBackColorSelectChange(color) {
+        this.state.componentStyle.BackColor = color;
         this.props.UpdateStyle(this.state.componentStyle);
     }
-    onForeColorSelectChange(event) {
-        let e = event.target;
-        this.state.componentStyle.ForeColor = e.value;
+    onForeColorSelectChange(color) {
+        this.state.componentStyle.ForeColor = color;
         this.props.UpdateStyle(this.state.componentStyle);
     }
-    onBorderColorSelectChange(event) {
-        let e = event.target;
-        this.state.componentStyle.BorderColor = e.value;
+    onBorderColorSelectChange(color) {
+        this.state.componentStyle.BorderColor = color;
         this.props.UpdateStyle(this.state.componentStyle);
     }
     onFontWeightChange(checked) {

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

@@ -25,6 +25,7 @@ export declare namespace ValueSelector {
     };
 }
 declare type ValueOptionsTagsProps<OPTION_TYPE, ID_TYPE extends number | string> = {
+    style?: React.CSSProperties;
     options: OPTION_TYPE[];
     value: ID_TYPE[];
     selectedMap?: Map<ID_TYPE, OPTION_TYPE>;

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

@@ -198,6 +198,6 @@ function ValueOptionsTags(props) {
             " ",
             remaining > 1 ? 'others' : 'other'));
     }, []);
-    return (React.createElement(EllipsisContainer_1.EllipsisContainer, { marginRight: 4, my: 1, allowWrap: allowWrap, count: value.length, direction: "horizontal", renderItem: renderOptionTag, renderEllipsis: renderEllipsis }));
+    return (React.createElement(EllipsisContainer_1.EllipsisContainer, { style: props.style, marginRight: 4, my: 1, allowWrap: allowWrap, count: value.length, direction: "horizontal", renderItem: renderOptionTag, renderEllipsis: renderEllipsis }));
 }
 exports.ValueOptionsTags = ValueOptionsTags;

package/src/View/Dashboard/CustomToolbarWrapper.js

@@ -11,6 +11,8 @@ exports.CustomToolbarWrapper = (props) => {
     let contentsDivId = 'ab-CustomToolbar__' + props.customToolbar.name + '__contents';
     let buttonsDivId = 'ab-CustomToolbar__' + props.customToolbar.name + '__buttons';
     const [contentsHTML, setContentsHTML] = react_1.useState('');
+    // dummy object which is used to force a re-render of the toolbar
+    const [revision, setRevision] = react_1.useState(1);
     const contentsDivRef = react_1.useRef(null);
     const { api } = AdaptableContext_1.useAdaptable();
     react_1.useLayoutEffect(() => {
@@ -65,7 +67,13 @@ exports.CustomToolbarWrapper = (props) => {
                 const disabled = button.disabled && button.disabled(button, dashboardContext);
                 let buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'outlined';
                 let buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'neutral';
-                return (React.createElement(SimpleButton_1.default, { style: { marginLeft: index ? 'var(--ab-space-1)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, variant: buttonVariant, tone: buttonTone, onClick: () => (button.onClick ? button.onClick(button, dashboardContext) : null) },
+                return (React.createElement(SimpleButton_1.default, { style: { marginLeft: index ? 'var(--ab-space-1)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, variant: buttonVariant, tone: buttonTone, onClick: () => {
+                        button.onClick ? button.onClick(button, dashboardContext) : null;
+                        setTimeout(() => {
+                            // mutate state to force a re-rendering
+                            setRevision(revision + 1);
+                        }, 16);
+                    } },
                     button.icon ? React.createElement("img", Object.assign({}, button.icon)) : null,
                     buttonLabel));
             }))));

package/src/View/DataSource/DataSourceViewPanel.d.ts

@@ -1,11 +1,11 @@
 import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
 import { DataSource } from '../../PredefinedConfig/DataSourceState';
-import * as DataSourceRedux from '../../Redux/ActionsReducers/DataSourceRedux';
 import * as React from 'react';
+import * as Redux from 'redux';
 export interface DataSourceViewPanelComponentProps extends ViewPanelProps {
     CurrentDataSourceName: string;
     DataSources: DataSource[];
-    onSelectDataSource: (DataSource: DataSource) => DataSourceRedux.DataSourceSelectAction;
+    onSelectDataSource: (DataSource: DataSource) => Redux.Action;
 }
 interface DataSourceViewPanelComponentState {
     CurrentDataSource: DataSource;
@@ -15,5 +15,5 @@ declare class DataSourceViewPanelComponent extends React.Component<DataSourceVie
     render(): JSX.Element;
     onSelectedDataSourceChanged(dataSourceName: string): void;
 }
-export declare let DataSourceViewPanelControl: import("react-redux").ConnectedComponent<typeof DataSourceViewPanelComponent, any>;
+export declare let DataSourceViewPanelControl: import("react-redux").ConnectedComponent<typeof DataSourceViewPanelComponent, Pick<React.ClassAttributes<DataSourceViewPanelComponent> & DataSourceViewPanelComponentProps, "ref" | "key">>;
 export {};