@adaptabletools/adaptable 11.0.0-canary.3 → 11.0.0-canary.7

package/src/View/Components/Buttons/ButtonDelete.d.ts

@@ -14,5 +14,5 @@ declare class ButtonDeleteComponent extends React.Component<DeleteButtonProps, {
     render(): JSX.Element;
     onClick(): void;
 }
-export declare let ButtonDelete: import("react-redux").ConnectedComponent<typeof ButtonDeleteComponent, Pick<React.ClassAttributes<ButtonDeleteComponent> & DeleteButtonProps, "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" | "icon" | "tooltip" | "border" | "padding" | "multiple" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "fontSize" | "fontWeight" | "height" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "translate" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "margin" | "ref" | "children" | "key" | "list" | "step" | "contextMenu" | "type" | "min" | "rows" | "download" | "value" | "checked" | "onClick" | "colSpan" | "rowSpan" | "name" | "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" | "borderX" | "borderY" | "variant" | "tone" | "iconSize" | "iconPosition" | "accessLevel" | "tooltipAnchor" | "onConfirmWarning" | "ConfirmAction" | "ConfirmationMsg" | "ConfirmationTitle" | "onClickAction"> & DeleteButtonProps>;
+export declare let ButtonDelete: import("react-redux").ConnectedComponent<typeof ButtonDeleteComponent, Pick<React.ClassAttributes<ButtonDeleteComponent> & DeleteButtonProps, "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" | "icon" | "tooltip" | "border" | "padding" | "multiple" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "fontSize" | "fontWeight" | "height" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "translate" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "margin" | "ref" | "children" | "key" | "list" | "step" | "contextMenu" | "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" | "borderX" | "borderY" | "variant" | "tone" | "iconSize" | "iconPosition" | "accessLevel" | "tooltipAnchor" | "onConfirmWarning" | "ConfirmAction" | "ConfirmationMsg" | "ConfirmationTitle" | "onClickAction"> & DeleteButtonProps>;
 export {};

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

@@ -10,7 +10,6 @@ const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/Dr
 const ExpressionEditor_1 = require("../../../components/ExpressionEditor");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
-const AdaptableQuery_1 = require("../../../PredefinedConfig/Common/AdaptableQuery");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const ButtonInfo_1 = require("../Buttons/ButtonInfo");
 const DocumentationLinkConstants_1 = require("../../../Utilities/Constants/DocumentationLinkConstants");
@@ -45,8 +44,8 @@ QueryTab.defaultProps = {
 };
 exports.EntityRulesSummary = (props) => {
     const { data } = props;
-    const { api: { predicateApi }, } = AdaptableContext_1.useAdaptable();
-    return (React.createElement(rebass_1.Text, { fontSize: 2 }, data.Rule.Predicate ? (React.createElement(React.Fragment, null, props.renderPredicate(predicateApi.predicateToString(data.Rule.Predicate)))) : (React.createElement(React.Fragment, null, props.renderQueryExpression(AdaptableQuery_1.getAdaptableQueryExpression(data.Rule))))));
+    const { api: { predicateApi, queryLanguageApi }, } = AdaptableContext_1.useAdaptable();
+    return (React.createElement(rebass_1.Text, { fontSize: 2 }, data.Rule.Predicate ? (React.createElement(React.Fragment, null, props.renderPredicate(predicateApi.predicateToString(data.Rule.Predicate)))) : (React.createElement(React.Fragment, null, props.renderQueryExpression(queryLanguageApi.getAdaptableQueryExpression(data.Rule))))));
 };
 exports.EntityRulesEditor = (props) => {
     var _a, _b;
@@ -56,8 +55,8 @@ exports.EntityRulesEditor = (props) => {
         ? 'BooleanExpression'
         : data.Rule.ObservableExpression != undefined && showObservable
             ? 'ObservableExpression'
-            : data.Rule.AggregationExpression != undefined && showAggregation
-                ? 'AggregationExpression'
+            : data.Rule.AggregatedBooleanExpression != undefined && showAggregation
+                ? 'AggregatedBooleanExpression'
                 : 'Predicate';
     const [selectedTab, setSelectedTab] = React.useState(type);
     const setType = (type) => {
@@ -72,9 +71,9 @@ exports.EntityRulesEditor = (props) => {
                     ObservableExpression: '',
                 } }));
         }
-        else if (type === 'AggregationExpression' && showAggregation) {
+        else if (type === 'AggregatedBooleanExpression' && showAggregation) {
             props.onChange(Object.assign(Object.assign({}, data), { Rule: {
-                    AggregationExpression: '',
+                    AggregatedBooleanExpression: '',
                 } }));
         }
         else {
@@ -127,7 +126,7 @@ exports.EntityRulesEditor = (props) => {
         props.onChange(Object.assign(Object.assign({}, data), { Rule: { ObservableExpression: expression } }));
     };
     const setAggregationExpression = (expression) => {
-        props.onChange(Object.assign(Object.assign({}, data), { Rule: { AggregationExpression: expression } }));
+        props.onChange(Object.assign(Object.assign({}, data), { Rule: { AggregatedBooleanExpression: expression } }));
     };
     const initialData = api.internalApi.getQueryPreviewData();
     const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
@@ -162,13 +161,13 @@ exports.EntityRulesEditor = (props) => {
                             background: 'var(--ab-color-action-add)',
                         }, onClick: () => window.open(DocumentationLinkConstants_1.PredicateDocsLink, '_blank') }),
                     "See Predicate documentation for more details and examples")))) : null,
-            showBoolean ? (React.createElement(QueryTab, { value: "BooleanExpression", type: type, label: "Boolean" })) : null,
+            showBoolean ? React.createElement(QueryTab, { value: "BooleanExpression", type: type, label: "Boolean" }) : null,
             showBoolean ? (React.createElement(Tabs_1.Tabs.Content, { value: 'BooleanExpression', paddingLeft: 0 },
                 React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', module: module, value: data.Rule.BooleanExpression, onChange: setBooleanExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null,
             showObservable ? (React.createElement(QueryTab, { value: "ObservableExpression", type: type, label: "Observable" })) : null,
             showObservable ? (React.createElement(Tabs_1.Tabs.Content, { value: 'ObservableExpression', paddingLeft: 0 },
                 React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'observable', module: module, value: data.Rule.ObservableExpression, onChange: setReactiveExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null,
-            showAggregation ? (React.createElement(QueryTab, { value: "AggregationExpression", type: type, label: "Aggregation" })) : null,
-            showAggregation ? (React.createElement(Tabs_1.Tabs.Content, { value: 'AggregationExpression', paddingLeft: 0 },
-                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'aggregation', module: module, value: data.Rule.AggregationExpression, onChange: setAggregationExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null)));
+            showAggregation ? (React.createElement(QueryTab, { value: "AggregatedBooleanExpression", type: type, label: "AggregatedBoolean" })) : null,
+            showAggregation ? (React.createElement(Tabs_1.Tabs.Content, { value: 'AggregatedBooleanExpression', paddingLeft: 0 },
+                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'aggregatedBoolean', module: module, value: data.Rule.AggregatedBooleanExpression, onChange: setAggregationExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null)));
 };

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

@@ -5,7 +5,6 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const FilterRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/FilterRedux"));
-const PopupRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/PopupRedux"));
 const Enums_1 = require("../../../PredefinedConfig/Common/Enums");
 const ListBoxFilterForm_1 = require("./ListBoxFilterForm");
 const ButtonClose_1 = require("../Buttons/ButtonClose");
@@ -276,7 +275,6 @@ function mapDispatchToProps(dispatch) {
         onAddColumnFilter: (columnFilter) => dispatch(FilterRedux.ColumnFilterAdd(columnFilter)),
         onEditColumnFilter: (columnFilter) => dispatch(FilterRedux.ColumnFilterEdit(columnFilter)),
         onSetColumnFilter: (columnFilter) => dispatch(FilterRedux.ColumnFilterSet(columnFilter)),
-        onShowPrompt: (prompt) => dispatch(PopupRedux.PopupShowPrompt(prompt)),
         onHideFilterForm: () => dispatch(FilterRedux.FilterFormHide()),
     };
 }

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

@@ -106,14 +106,12 @@ class QuickFilterFormComponent extends React.Component {
             hideEvent = 'blur';
         }
         let showQuickFilterDropdown = true;
-        let hideQuickFilterDropdownFunction = this.props.api.internalApi.getAdaptableOptions()
-            .filterOptions.hideQuickFilterDropdown;
+        let hideQuickFilterDropdownFunction = this.props.api.internalApi.getAdaptableOptions().filterOptions.hideQuickFilterDropdown;
         if (hideQuickFilterDropdownFunction) {
             showQuickFilterDropdown = !hideQuickFilterDropdownFunction(this.props.currentColumn);
         }
         let showQuickFilterInput = true;
-        let hideQuickFilterInputFunction = this.props.api.internalApi.getAdaptableOptions()
-            .filterOptions.hideQuickFilterInput;
+        let hideQuickFilterInputFunction = this.props.api.internalApi.getAdaptableOptions().filterOptions.hideQuickFilterInput;
         if (hideQuickFilterInputFunction) {
             showQuickFilterInput = !hideQuickFilterInputFunction(this.props.currentColumn);
         }
@@ -132,7 +130,10 @@ class QuickFilterFormComponent extends React.Component {
                     predicateDefs.map((p) => (React.createElement(SimpleButton_1.default, { key: p.id, p: 2, variant: "text", tone: (filter === null || filter === void 0 ? void 0 : filter.Predicate.PredicateId) === p.id ? 'info' : 'none', onClick: () => this.selectColumnPredicate(p.id) },
                         React.createElement("span", { style: { width: 20, marginRight: 10 } }, this.renderPredicateIcon(p)),
                         p.label))))) },
-                React.createElement(SimpleButton_1.default, { style: { borderRadius: 0, borderColor: 'var(--ab-color-primarydark)' } }, this.renderPredicateIcon(activePredicateDef)))),
+                React.createElement(SimpleButton_1.default, { style: {
+                        borderRadius: 0,
+                        borderColor: 'var(--ab-color-primarydark)',
+                    } }, this.renderPredicateIcon(activePredicateDef)))),
             showQuickFilterInput && this.renderLabel(filter, activePredicateDef),
             showQuickFilterInput && this.renderPredicateInput(activePredicateDef, filter)));
     }

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

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

package/src/View/Components/Forms/AdaptableFormControlTextClear.d.ts

@@ -7,4 +7,4 @@ export declare type AdaptableFormControlTextClearProps = {
     autoFocus?: boolean;
     inputStyle?: CSSProperties;
 } & InputProps;
-export declare const AdaptableFormControlTextClear: React.ForwardRefExoticComponent<Pick<AdaptableFormControlTextClearProps, "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" | "type" | "min" | "rows" | "download" | "value" | "checked" | "onClick" | "colSpan" | "rowSpan" | "name" | "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" | "focusOnClear" | "placehoder" | "OnTextChange" | "inputStyle"> & React.RefAttributes<any>>;
+export declare const AdaptableFormControlTextClear: React.ForwardRefExoticComponent<Pick<AdaptableFormControlTextClearProps, "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" | "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" | "focusOnClear" | "placehoder" | "OnTextChange" | "inputStyle"> & React.RefAttributes<any>>;

package/src/View/Components/Panels/PanelWithImage.d.ts

@@ -93,9 +93,9 @@ export declare const PanelWithImage: React.ForwardRefExoticComponent<{
     value?: string | number | readonly string[];
     checked?: boolean;
     onClick?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
+    name?: string;
     colSpan?: number;
     rowSpan?: number;
-    name?: string;
     className?: string;
     id?: string;
     lang?: string;
@@ -148,7 +148,7 @@ export declare const PanelWithImage: React.ForwardRefExoticComponent<{
     'aria-rowspan'?: number;
     'aria-selected'?: boolean | "false" | "true";
     'aria-setsize'?: number;
-    'aria-sort'?: "none" | "ascending" | "descending" | "other";
+    'aria-sort'?: "none" | "other" | "ascending" | "descending";
     'aria-valuemax'?: number;
     'aria-valuemin'?: number;
     'aria-valuenow'?: number;

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

@@ -3,9 +3,6 @@ import * as PopupRedux from '../../../../Redux/ActionsReducers/PopupRedux';
 import { ModuleParams } from '../../SharedProps/ModuleViewPopupProps';
 import { AdaptableModule } from '../../../../PredefinedConfig/Common/Types';
 import { AdaptableApi } from '../../../../Api/AdaptableApi';
-/**
- * This is the main popup that we use - so all Module popups will appear here.
- */
 export interface AdaptablePopupProps {
     componentName?: string;
     componentModule: AdaptableModule;

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

@@ -4,101 +4,65 @@ exports.AdaptablePopup = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
-const react_redux_1 = require("react-redux");
-const PopupRedux = tslib_1.__importStar(require("../../../../Redux/ActionsReducers/PopupRedux"));
 const GeneralConstants = tslib_1.__importStar(require("../../../../Utilities/Constants/GeneralConstants"));
 const TopBar_1 = tslib_1.__importDefault(require("./TopBar"));
 const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
 const Navigation_1 = require("./Navigation");
 const PopupContext_1 = tslib_1.__importDefault(require("./PopupContext"));
 const AdaptablePopupBody_1 = require("./AdaptablePopupBody");
-const Dialog_1 = tslib_1.__importDefault(require("../../../../components/Dialog"));
-const SystemRedux_1 = require("../../../../Redux/ActionsReducers/SystemRedux");
-const Utilities_1 = require("./Utilities");
 const DefaultSettingsPanel_1 = require("../../../../Utilities/Defaults/DefaultSettingsPanel");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const CustomSettingsPanelView_1 = require("./CustomSettingsPanelView");
+const useMenuItems_1 = require("./useMenuItems");
+const AdaptablePopupDialog_1 = require("./AdaptablePopupDialog");
 exports.AdaptablePopup = (props) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b;
     const adaptable = AdaptableContext_1.useAdaptable();
-    const dispatch = react_redux_1.useDispatch();
     const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
     const settingsPanelTitle = adaptable.api.internalApi.getModuleFriendlyName('SettingsPanel');
-    // Navigation
-    const allMenuItems = react_redux_1.useSelector((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.Grid) === null || _a === void 0 ? void 0 : _a.ModuleDropdownMenuItems; });
-    const menuItems = React.useMemo(() => {
-        var _a;
-        let navigationItems = (_a = settingsPanelOptions === null || settingsPanelOptions === void 0 ? void 0 : settingsPanelOptions.navigation) === null || _a === void 0 ? void 0 : _a.items;
-        if (!navigationItems) {
-            navigationItems = [...DefaultSettingsPanel_1.DEFAULT_NAVIGATION_ITEMS];
-            if (settingsPanelOptions.customSettingsPanels) {
-                navigationItems.push(...settingsPanelOptions.customSettingsPanels.map((panel) => panel.name));
-            }
-        }
-        const visibleItems = allMenuItems.filter((item) => item.module !== 'General' && !DefaultSettingsPanel_1.ACTION_POPUPS.includes(item.module) && item.isVisible);
-        return navigationItems
-            .map((moduleName) => {
-            var _a, _b;
-            if (moduleName === '-') {
-                return moduleName;
-            }
-            const customSettingsPanel = (_b = (_a = settingsPanelOptions === null || settingsPanelOptions === void 0 ? void 0 : settingsPanelOptions.customSettingsPanels) === null || _a === void 0 ? void 0 : _a.find) === null || _b === void 0 ? void 0 : _b.call(_a, (panel) => panel.name === moduleName);
-            let customPanelMenuItem = null;
-            if (customSettingsPanel) {
-                customPanelMenuItem = {
-                    label: customSettingsPanel.name,
-                    isVisible: true,
-                    reduxAction: PopupRedux.PopupShowScreen(null, customSettingsPanel.name, null, {
-                        isCustomSettingsPanel: true,
-                    }),
-                };
-            }
-            return customPanelMenuItem || visibleItems.find((item) => item.module === moduleName);
-        })
-            .filter(Boolean);
-    }, [allMenuItems]);
-    const isCustomSettingsPanel = (_a = props.moduleProps) === null || _a === void 0 ? void 0 : _a.isCustomSettingsPanel;
-    const customSettingsPanel = isCustomSettingsPanel &&
-        settingsPanelOptions.customSettingsPanels.find((settingsPanel) => settingsPanel.name === props.componentName);
-    let componentModule = props.componentModule;
-    // When it is opened without specifying a module
-    const firstMenuItem = (_b = menuItems.find((menuItem) => menuItem !== '-')) === null || _b === void 0 ? void 0 : _b.module;
-    if (!customSettingsPanel && !props.componentModule && firstMenuItem !== 'General') {
-        componentModule = firstMenuItem;
-    }
-    const accessLevel = props.api.internalApi
-        .getEntitlementService()
-        .getEntitlementAccessLevelForModule(componentModule);
-    const module = props.api.internalApi.getModuleService().getModuleById(componentModule);
-    const moduleInfo = module === null || module === void 0 ? void 0 : module.moduleInfo;
-    // action popups + non-primary module popups
-    const isActionModule = moduleInfo &&
-        (DefaultSettingsPanel_1.ACTION_POPUPS.includes(moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.ModuleName) ||
-            (props.componentName && props.componentName !== (moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.Popup)));
-    const baseClassName = 'ab-Adaptable-Popup';
-    const className = join_1.default(baseClassName, `${baseClassName}--${(_c = settingsPanelOptions.popupType) !== null && _c !== void 0 ? _c : 'window'}`, isActionModule ? `${baseClassName}--action-popup` : `${baseClassName}--settings-popup`);
+    const menuItems = useMenuItems_1.useMenuItems();
     const isWindowModal = settingsPanelOptions.popupType === 'window';
-    let style = { maxWidth: 1400, maxHeight: 1200 };
-    if (isWindowModal) {
-        style = { height: '100%' };
+    const modalContainer = (_b = (_a = adaptable.adaptableOptions) === null || _a === void 0 ? void 0 : _a.containerOptions) === null || _b === void 0 ? void 0 : _b.modalContainer;
+    let friendlyName = null;
+    let isActionModule = false;
+    let moduleViewContent = null;
+    let activeItem = null;
+    let accessLevel = 'Full';
+    const firstMenuItem = menuItems.find((menuItem) => menuItem !== '-');
+    const firstMenuModule = firstMenuItem === null || firstMenuItem === void 0 ? void 0 : firstMenuItem.module;
+    let componentModule = props.componentModule;
+    let componentName = props.componentName;
+    // ts forces to check for General, there is no menu item General
+    const useFirstItem = !props.componentModule;
+    if (useFirstItem && firstMenuModule !== 'General') {
+        componentModule = firstMenuModule;
     }
-    else if (isActionModule) {
-        style = { maxWidth: 800, maxHeight: 450 };
+    const isCustomSettingsPanel = componentModule === 'CustomSettingsPanelModule';
+    if (isCustomSettingsPanel) {
+        if (useFirstItem) {
+            componentName = firstMenuItem.label;
+        }
+        const customSettingsPanel = settingsPanelOptions.customSettingsPanels.find((settingsPanel) => settingsPanel.name === componentName);
+        friendlyName = customSettingsPanel.name;
+        activeItem = customSettingsPanel.name;
+        moduleViewContent = React.createElement(CustomSettingsPanelView_1.CustomSettingsPanelView, { settingsPanel: customSettingsPanel });
     }
-    const settingsKey = isActionModule ? `action-${moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.FriendlyName}` : 'settings';
-    let popupSettings = react_redux_1.useSelector((state) => { var _a, _b; return (_b = (_a = state === null || state === void 0 ? void 0 : state.System) === null || _a === void 0 ? void 0 : _a.SettingsPanel) === null || _b === void 0 ? void 0 : _b[settingsKey]; });
-    if (!popupSettings) {
-        const size = isActionModule
-            ? Utilities_1.getActionPanelSize()
-            : (_d = settingsPanelOptions.size) !== null && _d !== void 0 ? _d : Utilities_1.getSettingsPanelSize();
-        popupSettings = {
-            size: size,
-            position: (_e = settingsPanelOptions.position) !== null && _e !== void 0 ? _e : Utilities_1.getMiddlePosition(size),
-        };
+    else {
+        const module = props.api.internalApi.getModuleService().getModuleById(componentModule);
+        const moduleInfo = module === null || module === void 0 ? void 0 : module.moduleInfo;
+        accessLevel = props.api.internalApi
+            .getEntitlementService()
+            .getEntitlementAccessLevelForModule(componentModule);
+        friendlyName = moduleInfo.FriendlyName;
+        isActionModule =
+            moduleInfo &&
+                (DefaultSettingsPanel_1.ACTION_POPUPS.includes(moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.ModuleName) ||
+                    (props.componentName && props.componentName !== (moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.Popup)));
+        activeItem = moduleInfo.ModuleName;
+        moduleViewContent = (React.createElement(AdaptablePopupBody_1.AdaptablePopupBody, { api: props.api, module: module, componentName: props.componentName, moduleParams: props.moduleParams, onClearParams: props.onClearParams, onHide: props.onHide }));
     }
-    const handleWindowSettings = (settings) => {
-        dispatch(SystemRedux_1.SystemSettingsPanelSet(settingsKey, settings));
-    };
+    const baseClassName = 'ab-Adaptable-Popup';
+    const className = join_1.default(baseClassName, `${baseClassName}--${isWindowModal ? 'window' : 'modal'}`, isActionModule ? `${baseClassName}--action-popup` : `${baseClassName}--settings-popup`);
     return (React.createElement(PopupContext_1.default.Provider, { value: {
             hidePopup: () => {
                 if (props.onHide) {
@@ -106,16 +70,9 @@ exports.AdaptablePopup = (props) => {
                 }
             },
         } },
-        React.createElement(Dialog_1.default, Object.assign({ windowModal: isWindowModal, fixed: false, windowModalProps: {
-                handleSelector: isActionModule
-                    ? `.${baseClassName} .ab-Panel__header`
-                    : '.ab-Adaptable-Popup__TopBar',
-                size: popupSettings.size,
-                position: popupSettings.position,
-                onChange: handleWindowSettings,
-            }, style: style, padding: 0, height: isWindowModal ? null : '90vh', width: isWindowModal ? null : '90vw', className: className, onDismiss: props.onHide, isOpen: true, showCloseButton: true }, props.moduleProps),
+        React.createElement(AdaptablePopupDialog_1.AdaptablePopupDialog, { baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isActionModule, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer },
             !isActionModule && React.createElement(TopBar_1.default, { icon: settingsPanelOptions.icon }, settingsPanelTitle),
             React.createElement(rebass_1.Flex, { "data-name": props.componentName, flexDirection: "row", flex: "1 1 0", style: { minHeight: 0 }, className: accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '' },
-                !isActionModule && (React.createElement(Navigation_1.Navigation, { menuItems: menuItems, api: props.api, moduleInfo: moduleInfo, activeCustomSettingPanel: customSettingsPanel, customSettingsPanels: settingsPanelOptions.customSettingsPanels })),
-                React.createElement(rebass_1.Flex, { flex: 1, className: "ab-Adaptable-Popup__Body" }, isCustomSettingsPanel ? (React.createElement(CustomSettingsPanelView_1.CustomSettingsPanelView, { settingsPanel: customSettingsPanel })) : (React.createElement(AdaptablePopupBody_1.AdaptablePopupBody, { api: props.api, module: module, componentName: props.componentName, moduleParams: props.moduleParams, onClearParams: props.onClearParams, onHide: props.onHide })))))));
+                !isActionModule && (React.createElement(Navigation_1.Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })),
+                React.createElement(rebass_1.Flex, { flex: 1, className: "ab-Adaptable-Popup__Body" }, moduleViewContent)))));
 };

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupDialog.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export declare const AdaptablePopupDialog: React.FunctionComponent<{
+    baseClassName: string;
+    className: string;
+    friendlyName: string;
+    isActionModule: boolean;
+    isWindowModal: boolean;
+    onHide: () => void;
+    style?: React.CSSProperties;
+    modalContainer?: string | HTMLElement;
+}>;

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

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptablePopupDialog = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_dom_1 = require("react-dom");
+const react_redux_1 = require("react-redux");
+const Dialog_1 = tslib_1.__importDefault(require("../../../../components/Dialog"));
+const SystemRedux_1 = require("../../../../Redux/ActionsReducers/SystemRedux");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const Utilities_1 = require("./Utilities");
+const WindowDialog = (props) => {
+    var _a, _b;
+    const { onChange, style, baseClassName, className, isActionModule, settingsPanelOptionsKey, onHide } = props, dialogProps = tslib_1.__rest(props, ["onChange", "style", "baseClassName", "className", "isActionModule", "settingsPanelOptionsKey", "onHide"]);
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const dispatch = react_redux_1.useDispatch();
+    const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
+    let popupSettings = react_redux_1.useSelector((state) => { var _a, _b; return (_b = (_a = state === null || state === void 0 ? void 0 : state.System) === null || _a === void 0 ? void 0 : _a.SettingsPanel) === null || _b === void 0 ? void 0 : _b[settingsPanelOptionsKey]; });
+    const handleWindowSettings = (settings) => {
+        dispatch(SystemRedux_1.SystemSettingsPanelSet(settingsPanelOptionsKey, settings));
+    };
+    if (!popupSettings) {
+        const size = isActionModule
+            ? Utilities_1.getActionPanelSize()
+            : (_a = settingsPanelOptions.size) !== null && _a !== void 0 ? _a : Utilities_1.getSettingsPanelSize();
+        popupSettings = {
+            size: size,
+            position: (_b = settingsPanelOptions.position) !== null && _b !== void 0 ? _b : Utilities_1.getMiddlePosition(size),
+        };
+    }
+    const windowModalProps = {
+        handleSelector: isActionModule
+            ? `.${baseClassName} .ab-Panel__header`
+            : '.ab-Adaptable-Popup__TopBar',
+        size: popupSettings.size,
+        position: popupSettings.position,
+        onChange: handleWindowSettings,
+    };
+    return (React.createElement(Dialog_1.default, Object.assign({ windowModal: true, fixed: false, windowModalProps: windowModalProps, style: Object.assign(Object.assign({}, props.style), { height: '100%' }), padding: 0, className: className, onDismiss: onHide, isOpen: true, showCloseButton: true }, dialogProps)));
+};
+const PopupDialog = (props) => {
+    const { style, className, onHide, children } = props, dialogProps = tslib_1.__rest(props, ["style", "className", "onHide", "children"]);
+    return (React.createElement(Dialog_1.default, Object.assign({ fixed: false, style: props.style, padding: 0, height: '90vh', width: '90vw', className: className, onDismiss: onHide, isOpen: true, showCloseButton: true }, dialogProps), children));
+};
+exports.AdaptablePopupDialog = (props) => {
+    const { isActionModule, style, friendlyName, baseClassName, className, children, onHide, isWindowModal, modalContainer, } = props;
+    const elementRef = React.useMemo(() => {
+        if (!modalContainer) {
+            return null;
+        }
+        let ref = null;
+        if (typeof modalContainer === 'string') {
+            ref = globalThis.document.querySelector(modalContainer);
+        }
+        else {
+            ref = modalContainer;
+        }
+        return ref;
+    }, [modalContainer]);
+    if (modalContainer) {
+        let ref = null;
+        if (typeof modalContainer === 'string') {
+            ref = globalThis.document.querySelector(modalContainer);
+        }
+        else {
+            ref = modalContainer;
+        }
+        return react_dom_1.createPortal(React.createElement(Dialog_1.default, { modal: false, fixed: false, onDismiss: onHide, className: className }, children), ref);
+    }
+    if (isWindowModal) {
+        const settingsPanelOptionsKey = isActionModule ? `action-${friendlyName}` : 'settings';
+        return (React.createElement(WindowDialog, { settingsPanelOptionsKey: settingsPanelOptionsKey, isActionModule: isActionModule, onHide: onHide, style: style, baseClassName: baseClassName, className: className }, children));
+    }
+    else {
+        const modalStyle = Object.assign(Object.assign({}, style), (isActionModule ? { maxWidth: 800, maxHeight: 600 } : { maxWidth: 1200, maxHeight: 1000 }));
+        return (React.createElement(PopupDialog, { onHide: onHide, style: modalStyle, className: className }, children));
+    }
+};

package/src/View/Components/Popups/AdaptablePopup/Navigation.d.ts

@@ -1,12 +1,10 @@
 import * as React from 'react';
 import { AdaptableApi, AdaptableMenuItem } from '../../../../../types';
 import { CustomSettingsPanel } from '../../../../AdaptableOptions/SettingsPanelOptions';
-import { ModuleInfo } from '../../../../Strategy/Interface/IModule';
 interface NavigationProps {
     api: AdaptableApi;
     menuItems: (AdaptableMenuItem | '-')[];
-    moduleInfo?: ModuleInfo;
-    activeCustomSettingPanel?: CustomSettingsPanel;
+    activeItem: string;
     customSettingsPanels?: CustomSettingsPanel[];
 }
 export declare const Navigation: React.FunctionComponent<NavigationProps>;

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

@@ -9,19 +9,12 @@ const icons_1 = require("../../../../components/icons");
 const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
 const useGlobalEvent_1 = require("../../../../components/utils/useGlobalEvent");
 exports.Navigation = (props) => {
-    var _a;
     const dispatch = react_redux_1.useDispatch();
     const handleKeyPress = React.useCallback((event) => {
         if ((event.ctrlKey || event.metaKey) &&
             (event.code === 'ArrowUp' || event.code === 'ArrowDown')) {
             const isKeyUp = event.code === 'ArrowUp';
-            const currentIndex = props.menuItems.findIndex((item) => {
-                var _a, _b;
-                return item !== '-' &&
-                    (item.module === ((_a = props === null || props === void 0 ? void 0 : props.moduleInfo) === null || _a === void 0 ? void 0 : _a.ModuleName) ||
-                        // in case of custom panel
-                        item.label === ((_b = props === null || props === void 0 ? void 0 : props.activeCustomSettingPanel) === null || _b === void 0 ? void 0 : _b.name));
-            });
+            const currentIndex = props.menuItems.findIndex((item) => item !== '-' && (item.module === props.activeItem || item.label === props.activeItem));
             let nextMenuItem = null;
             if (isKeyUp) {
                 let candidate = props.menuItems[currentIndex - 1] !== '-'
@@ -39,19 +32,18 @@ exports.Navigation = (props) => {
                 dispatch(nextMenuItem.reduxAction);
             }
         }
-    }, [(_a = props.moduleInfo) === null || _a === void 0 ? void 0 : _a.ModuleName, props.menuItems]);
+    }, [props.activeItem, props.menuItems]);
     useGlobalEvent_1.useGlobalEvent('keydown', handleKeyPress);
     return (React.createElement("nav", { className: "ab-Adaptable-Popup__Navigation" },
         React.createElement("ul", { className: "ab-Adaptable-Popup__Navigation__List" }, props.menuItems.map((menuItem, index) => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d;
             const baseClassName = 'ab-Adaptable-Popup__Navigation__List__Item';
             if (menuItem === '-') {
                 return React.createElement("li", { key: `separator-${index}`, className: `${baseClassName}__Separator` });
             }
-            const isActive = ((_a = props === null || props === void 0 ? void 0 : props.moduleInfo) === null || _a === void 0 ? void 0 : _a.ModuleName) === menuItem.module ||
-                menuItem.label === ((_b = props === null || props === void 0 ? void 0 : props.activeCustomSettingPanel) === null || _b === void 0 ? void 0 : _b.name);
+            const isActive = props.activeItem === menuItem.module || menuItem.label === props.activeItem;
             const className = join_1.default(baseClassName, isActive && `${baseClassName}--active`);
-            let customIcon = (_f = (_e = (_d = (_c = props.customSettingsPanels) === null || _c === void 0 ? void 0 : _c.find) === null || _d === void 0 ? void 0 : _d.call(_c, (customSettingPanel) => customSettingPanel.name === menuItem.label)) === null || _e === void 0 ? void 0 : _e.icon) !== null && _f !== void 0 ? _f : null;
+            let customIcon = (_d = (_c = (_b = (_a = props.customSettingsPanels) === null || _a === void 0 ? void 0 : _a.find) === null || _b === void 0 ? void 0 : _b.call(_a, (customSettingPanel) => customSettingPanel.name === menuItem.label)) === null || _c === void 0 ? void 0 : _c.icon) !== null && _d !== void 0 ? _d : null;
             return (React.createElement("li", { className: className, key: menuItem.label },
                 React.createElement("button", { type: "button", className: `${baseClassName}__Button`, onClick: () => {
                         dispatch(menuItem.reduxAction);