@adaptabletools/adaptable 11.0.0-canary.2 → 11.0.0-canary.6

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ConfigurationForm.js

@@ -9,6 +9,7 @@ const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const rebass_1 = require("rebass");
 const DefaultAdaptableOptions_1 = require("../../../Utilities/Defaults/DefaultAdaptableOptions");
 const ConfigurationForm = (props) => {
+    var _a;
     let abOptions = props.adaptableOptions;
     const layoutOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.layoutOptions), abOptions.layoutOptions);
     const generalOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.generalOptions), abOptions.generalOptions);
@@ -37,10 +38,12 @@ const ConfigurationForm = (props) => {
                         props.onChangeadaptableOptions(abOptions);
                     } })),
             React.createElement(FormLayout_1.FormRow, { label: "Show Quick Filter" },
-                React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.floatingFilter, onChange: (floatingFilter) => {
+                React.createElement(CheckBox_1.CheckBox, { checked: (_a = gridOptions.defaultColDef) === null || _a === void 0 ? void 0 : _a.floatingFilter, onChange: (floatingFilter) => {
                         abOptions = Object.assign({}, abOptions);
                         abOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
-                        abOptions.gridOptions.floatingFilter = floatingFilter;
+                        abOptions.gridOptions.defaultColDef = {
+                            floatingFilter,
+                        };
                         props.onChangeadaptableOptions(abOptions);
                     } })),
             React.createElement(FormLayout_1.FormRow, { label: "Suppress Column Virtualisation" },

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/index.js

@@ -43,7 +43,10 @@ const ConfigurationDialog = (props) => {
         setCurrentStep(1);
     };
     const stepOne = (React.createElement(React.Fragment, null,
-        React.createElement(Panel_1.default, { header: 'Configure AdapTable', border: "none", bodyScroll: false, bodyProps: { padding: 0, style: { overflow: 'auto', display: 'flex', flexFlow: 'column' } }, borderRadius: "none", style: { fontSize: 16, flex: 1 } },
+        React.createElement(Panel_1.default, { header: 'Configure AdapTable', border: "none", bodyScroll: false, bodyProps: {
+                padding: 0,
+                style: { overflow: 'auto', display: 'flex', flexFlow: 'column' },
+            }, borderRadius: "none", style: { fontSize: 16, flex: 1 } },
             React.createElement(Panel_1.default, { border: "none" },
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "AdaptableId" },

package/src/View/AdaptableWizardView/helper.js

@@ -51,7 +51,7 @@ const typeToColType = {
     boolean: 'abColDefBoolean',
     date: 'abColDefDate',
 };
-const abColDefNumberArray = 'abColDefNumberArray';
+const abColDefCustom = 'abColDefCustom';
 exports.getColTypeFromValue = (value) => {
     const dataType = typeof value;
     let columnType = typeToColType[dataType] || typeToColType.string;
@@ -59,7 +59,7 @@ exports.getColTypeFromValue = (value) => {
         columnType = typeToColType.date;
     }
     if (Array.isArray(value) && value.length && typeof value[0] === 'number') {
-        columnType = abColDefNumberArray;
+        columnType = abColDefCustom;
     }
     return columnType;
 };
@@ -80,9 +80,11 @@ exports.prepareGridOptions = (dataSourceInfo) => {
         };
     });
     const gridOptions = {
+        defaultColDef: {
+            floatingFilter: true,
+        },
         rowData: dataSourceInfo.data,
         columnDefs,
-        floatingFilter: true,
         enableRangeSelection: true,
         rowSelection: 'multiple',
         rowHeight: 30,

package/src/View/Alert/Wizard/AlertButtonsEditor.d.ts

@@ -2,7 +2,7 @@
 import { AlertButton } from '../../../PredefinedConfig/AlertState';
 import { AdaptableAlert } from '../../../PredefinedConfig/Common/AdaptableAlert';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
-import { AlertButtonContext } from '../../../AdaptableOptions/NotificationsOptions';
+import { AlertButtonContext } from '../../../types';
 declare type AlertButtonsEditorProps = {
     AlertButtons: AlertButton<AlertButtonContext>[];
     onChange: (buttons: AlertButton<AlertButtonContext>[]) => void;

package/src/View/Alert/Wizard/AlertButtonsEditor.js

@@ -94,7 +94,11 @@ exports.AlertButtonsEditor = (props) => {
                                     ' ',
                                     StringExtensions_1.default.CapitaliseFirstLetter((_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'raised'))),
                             React.createElement(DropdownButton_1.default, { columns: ['label'], marginLeft: 2, style: { minWidth: 120 }, items: [
-                                    { label: 'Use Alert Tone', value: 'text', onClick: () => setTone(null) },
+                                    {
+                                        label: 'Use Alert Tone',
+                                        value: 'text',
+                                        onClick: () => setTone(null),
+                                    },
                                     ...['success', 'info', 'error', 'warning', 'accent', 'neutral'].map((tone) => {
                                         return {
                                             label: StringExtensions_1.default.CapitaliseFirstLetter(tone),

package/src/View/Alert/Wizard/AlertRulesWizardSection.d.ts

@@ -2,7 +2,7 @@
 import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
 declare type AlertRulesWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;
-    module: 'alert' | 'flashingCell';
+    module: 'alert';
 };
 export declare const AlertRulesWizardSection: (props: AlertRulesWizardSectionProps) => JSX.Element;
 export declare const renderAlertRulesSummary: (alertDefinition: AlertDefinition) => JSX.Element;

package/src/View/Alert/Wizard/AlertWizard.js

@@ -26,7 +26,7 @@ exports.AlertWizard = (props) => {
             : ObjectFactory_1.default.CreateEmptyAlertDefinition();
         if (!alertDefinition.Rule.BooleanExpression &&
             !alertDefinition.Rule.ObservableExpression &&
-            !alertDefinition.Rule.AggregationExpression &&
+            !alertDefinition.Rule.AggregatedBooleanExpression &&
             !alertDefinition.Rule.Predicate) {
             alertDefinition.Rule.BooleanExpression = '';
         }
@@ -72,7 +72,7 @@ exports.AlertWizard = (props) => {
                 title: 'Type & Display',
             },
             {
-                details: 'Configure behaviour for the Alert',
+                details: 'Configure Behaviour for the Alert',
                 title: 'Behaviour',
                 render: () => (React.createElement(rebass_1.Box, { padding: 2 },
                     React.createElement(AlertBehaviourWizardSection_1.AlertBehaviourWizardSection, { onChange: setAlertDefinition }))),

package/src/View/Alert/Wizard/BaseAlertRulesWizardSection.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { AlertDefinition } from '../../../types';
-import { FlashingCellDefinition } from '../../../../types';
 export interface BaseAlertRulesWizardSectionProps<T> {
     onChange: (data: T) => void;
-    module: 'alert' | 'flashingCell';
+    module: 'alert';
     wholeRowScope?: boolean;
     children?: React.ReactNode;
 }
-export declare const BaseAlertRulesWizardSection: <T extends AlertDefinition | FlashingCellDefinition>(props: BaseAlertRulesWizardSectionProps<T>) => JSX.Element;
+export declare const BaseAlertRulesWizardSection: <T extends AlertDefinition>(props: BaseAlertRulesWizardSectionProps<T>) => JSX.Element;

package/src/View/Alert/Wizard/BaseAlertRulesWizardSection.js

@@ -8,9 +8,7 @@ const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
 exports.BaseAlertRulesWizardSection = (props) => {
     const { data, api, moduleInfo } = OnePageAdaptableWizard_1.useOnePageWizardContext();
     const wholeRowScope = props.wholeRowScope != null ? props.wholeRowScope : api.scopeApi.scopeIsAll(data.Scope);
-    const predicateDefs = props.module == 'alert'
-        ? api.alertApi.getAlertPredicateDefsForScope(data.Scope)
-        : api.flashingCellApi.getFlashingCellPredicateDefsForScope(data.Scope);
+    const predicateDefs = api.alertApi.getAlertPredicateDefsForScope(data.Scope);
     return (React.createElement(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: "Any", data: data, predicateDefs: predicateDefs, onChange: props.onChange, showAggregation: !wholeRowScope ? false : true, showObservable: !wholeRowScope ? false : true, showBoolean: true, showPredicate: true, descriptions: {
             selectPredicate: 'Select an Alert Rule - to be applied when data changes',
             useBooleanQuery: (React.createElement(React.Fragment, null,
@@ -22,8 +20,8 @@ exports.BaseAlertRulesWizardSection = (props) => {
                 React.createElement("i", null, "Scope"),
                 " is 'Whole Row' - so any data change may be evaluated in a complex ObservableExpression")),
             useAggregationQuery: (React.createElement(React.Fragment, null,
-                "Use an AggregationQuery if ",
+                "Use an AggregatedBooleanQuery if ",
                 React.createElement("i", null, "Scope"),
-                " is 'Whole Row' - so any data change may be evaluated in a complex AggregationExpression")),
+                " is 'Whole Row' - so any data change may be evaluated in a complex AggregatedBooleanExpression")),
         } }));
 };

package/src/View/Alert/Wizard/BaseAlertScopeWizardSection.js

@@ -29,11 +29,12 @@ exports.BaseAlertScopeWizardSection = (props) => {
                     delete newData.Rule.ObservableExpression;
                     newData.Rule.BooleanExpression = '';
                 }
-                if (newData.Rule.AggregationExpression !== undefined && !api.scopeApi.scopeIsAll(Scope)) {
+                if (newData.Rule.AggregatedBooleanExpression !== undefined &&
+                    !api.scopeApi.scopeIsAll(Scope)) {
                     // if it had aggregation expression and the scope is changed to partial
                     // we need to reset to not be an aggregation expression, as aggregation is not supported
                     // for partial scope
-                    delete newData.Rule.AggregationExpression;
+                    delete newData.Rule.AggregatedBooleanExpression;
                     newData.Rule.BooleanExpression = '';
                 }
                 props.onChange(newData);

package/src/View/Alert/Wizard/isValidAlertRules.js

@@ -7,7 +7,7 @@ exports.isValidAlertRules = (alert, api, context) => {
     if (!alert.Rule.Predicate &&
         !alert.Rule.BooleanExpression &&
         !alert.Rule.ObservableExpression &&
-        !alert.Rule.AggregationExpression) {
+        !alert.Rule.AggregatedBooleanExpression) {
         return 'No condition defined for alert';
     }
     if (valid && alert.Rule.Predicate) {
@@ -35,8 +35,8 @@ exports.isValidAlertRules = (alert, api, context) => {
             return 'The query is not a valid observable query';
         }
     }
-    if (valid && alert.Rule.AggregationExpression) {
-        valid = api.queryLanguageApi.isValidAggregationExpression(alert.Rule.AggregationExpression, ModuleConstants_1.AlertModuleId);
+    if (valid && alert.Rule.AggregatedBooleanExpression) {
+        valid = api.queryLanguageApi.isValidAggregatedBooleanExpression(alert.Rule.AggregatedBooleanExpression, ModuleConstants_1.AlertModuleId);
         if (!valid) {
             return 'The query is not a valid aggregation query';
         }

package/src/View/CalculatedColumn/Wizard/CalculatedColumnWizard.js

@@ -14,15 +14,26 @@ const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/Obje
 const react_redux_1 = require("react-redux");
 const CalculatedColumnRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/CalculatedColumnRedux"));
 exports.CalculatedColumnWizard = (props) => {
+    var _a;
     const adaptable = AdaptableContext_1.useAdaptable();
+    const allCalculatedColumns = react_redux_1.useSelector((state) => state.CalculatedColumn.CalculatedColumns);
     const [calculatedColumn, setCalculatedColumn] = react_1.useState(() => {
-        return (props === null || props === void 0 ? void 0 : props.data) ? Helper_1.cloneObject(props.data)
-            : ObjectFactory_1.default.CreateEmptyCalculatedColumn(adaptable.api.internalApi.getAdaptableOptions().filterOptions.enableFilterOnSpecialColumns);
+        var _a;
+        if (props.data) {
+            return Helper_1.cloneObject(props.data);
+        }
+        if ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.column) {
+            const calculatedColumn = allCalculatedColumns.find((calculatedColumn) => calculatedColumn.ColumnId === props.popupParams.column.columnId);
+            if (calculatedColumn) {
+                return calculatedColumn;
+            }
+        }
+        return ObjectFactory_1.default.CreateEmptyCalculatedColumn(adaptable.api.internalApi.getAdaptableOptions().filterOptions.enableFilterOnSpecialColumns);
     });
     const dispatch = react_redux_1.useDispatch();
-    const isEdit = Boolean(props.data);
+    const isEdit = Boolean(props.data) || ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Edit';
     const handleFinish = () => {
-        if (props.data) {
+        if (isEdit) {
             dispatch(CalculatedColumnRedux.CalculatedColumnEdit(calculatedColumn));
         }
         else {
@@ -33,7 +44,7 @@ exports.CalculatedColumnWizard = (props) => {
     return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: calculatedColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Expression',
-                details: 'Specify the calculated column expression',
+                details: 'Specify the Calculated Column Expression',
                 isValid: CalculatedColumnExpressionWizardSection_1.isValidCalculatedColumnExpression,
                 renderSummary: CalculatedColumnExpressionWizardSection_1.renderCalculatedColumnExpressionSummary,
                 render: () => {
@@ -42,7 +53,7 @@ exports.CalculatedColumnWizard = (props) => {
             },
             {
                 title: 'Settings',
-                details: 'Specify column details and properties',
+                details: 'Specify Column details and properties',
                 isValid: CalculatedColumnSettingsWizardSection_1.isValidCalculatedColumnSettings,
                 renderSummary: CalculatedColumnSettingsWizardSection_1.renderCalculatedColumnSettingsSummary,
                 render: () => {

package/src/View/CellSummary/CellSummaryViewPanel.js

@@ -38,8 +38,7 @@ class CellSummaryViewPanelComponent extends React.Component {
                 onClick: () => this.props.onCellSummaryOperationChange(summaryOperation),
             };
         });
-        const cellSummaryOperationDefinitions = this.props.api.internalApi.getAdaptableOptions()
-            .generalOptions.cellSummaryOperations;
+        const cellSummaryOperationDefinitions = this.props.api.internalApi.getAdaptableOptions().generalOptions.cellSummaryOperations;
         const operationDefinitions = ArrayExtensions_1.default.IsNullOrEmpty(cellSummaryOperationDefinitions)
             ? []
             : cellSummaryOperationDefinitions.map((operationDefinition) => {

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

@@ -45,13 +45,16 @@ exports.AdaptableObjectListItem = (props) => {
     };
     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) => {
-        return React.createElement(component, { data: props.data.abObject, key: index });
+        return React.createElement(component, {
+            data: props.data.abObject,
+            key: index,
+        });
     });
     const iconSize = 26;
     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) => {
             var _a;
-            return (React.createElement(rebass_1.Flex, { key: index, mb: 2, className: `${baseClassName}__row` },
+            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: () => {

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

@@ -56,8 +56,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 +72,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 +127,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 +162,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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.QuickFilterFormReact = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const debounce_1 = tslib_1.__importDefault(require("lodash-es/debounce"));
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const FilterRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/FilterRedux"));
 const react_redux_1 = require("react-redux");
 const ObjectFactory_1 = require("../../../Utilities/ObjectFactory");
@@ -16,7 +16,7 @@ const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Ex
 const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
 const renderWithAdaptableContext_1 = require("../../renderWithAdaptableContext");
 const CheckBox_1 = require("../../../components/CheckBox");
-const isEqual_1 = tslib_1.__importDefault(require("lodash-es/isEqual"));
+const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
 const getDefaultColumnFilterPredicate_1 = require("./getDefaultColumnFilterPredicate");
 class QuickFilterFormComponent extends React.Component {
@@ -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/ModuleValueSelector/index.js

@@ -30,5 +30,5 @@ exports.ModuleValueSelector = (props) => {
     const sortedOptions = react_1.useMemo(() => {
         return sortWithOrder_1.sortWithOrderArray(options, value, { sortUnorderedItems: true });
     }, [allowReorder, options, value]);
-    return (React.createElement(ValueSelector_1.ValueSelector, Object.assign({}, valueSelectorProps, { options: sortedOptions, value: value, onChange: onChange, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), selectionBoxPosition: selectionBoxPosition, isDisabled: props.isDisabled })));
+    return (React.createElement(ValueSelector_1.ValueSelector, Object.assign({}, valueSelectorProps, { options: sortedOptions, value: value, onChange: onChange, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), selectionBoxPosition: selectionBoxPosition, isOptionDisabled: props.isOptionDisabled, disabled: props.disabled })));
 };

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

@@ -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,100 +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 = DefaultSettingsPanel_1.ACTION_POPUPS.includes(moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.ModuleName) ||
-        (props.componentName && props.componentName !== 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.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) {
@@ -105,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;
+}>;