@adaptabletools/adaptable 11.0.0-canary.1 → 11.0.0-canary.5

package/src/View/AdaptablePopover/index.js

@@ -17,7 +17,12 @@ class AdaptablePopover extends React.Component {
         const title = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.headerText)
             ? this.props.headerText
             : '';
-        const popoverClickRootClose = (React.createElement(rebass_1.Box, { className: "ab-Popover", style: { margin: '0px', padding: '0px', minWidth: popoverMinWidth, maxWidth: 300 } },
+        const popoverClickRootClose = (React.createElement(rebass_1.Box, { className: "ab-Popover", style: {
+                margin: '0px',
+                padding: '0px',
+                minWidth: popoverMinWidth,
+                maxWidth: 300,
+            } },
             title ? (React.createElement(rebass_1.Text, { fontSize: 2, padding: 2 },
                 React.createElement("b", null, title))) : null,
             React.createElement(rebass_1.Box, { padding: 2 }, this.props.bodyText.map((textOrHTML, index) => (React.createElement("span", { key: index }, textOrHTML))))));

package/src/View/AdaptableView.js

@@ -22,7 +22,7 @@ class AdaptableView extends React.Component {
         return (React.createElement("div", null,
             this.props.AdaptableApi.internalApi.getModuleService().isModuleAvailable('Dashboard') && (React.createElement(Dashboard_1.Dashboard, { api: this.props.AdaptableApi })),
             React.createElement(AdaptableLoadingScreen_1.AdaptableLoadingScreen, { onClose: this.props.onCloseLoadingPopup, showLoadingScreen: this.props.PopupState.LoadingPopup.ShowLoadingPopup }),
-            React.createElement(AdaptablePopupPrompt_1.AdaptablePopupPrompt, { message: this.props.PopupState.PromptPopup.Message, header: this.props.PopupState.PromptPopup.Header, onClose: this.props.onClosePromptPopup, onConfirm: this.props.onConfirmPromptPopup, showPopup: this.props.PopupState.PromptPopup.ShowPromptPopup }),
+            this.props.PopupState.PromptPopup.ShowPromptPopup && (React.createElement(AdaptablePopupPrompt_1.AdaptablePopupPrompt, { message: this.props.PopupState.PromptPopup.Message, header: this.props.PopupState.PromptPopup.Header, onClose: this.props.onClosePromptPopup, onConfirm: this.props.onConfirmPromptPopup, onConfirmActionCreator: this.props.PopupState.PromptPopup.ConfirmActionCreator, defaultValue: this.props.PopupState.PromptPopup.DefaultValue })),
             React.createElement(AdaptablePopupConfirmation_1.AdaptablePopupConfirmation, { header: this.props.PopupState.ConfirmationPopup.Header, messsage: this.props.PopupState.ConfirmationPopup.Msg, showPopup: this.props.PopupState.ConfirmationPopup.ShowConfirmationPopup, cancelButtonText: this.props.PopupState.ConfirmationPopup.CancelButtonText, confirmButtonText: this.props.PopupState.ConfirmationPopup.ConfirmButtonText, onCancel: this.props.onCancelConfirmationPopup, onConfirm: this.props.onConfirmConfirmationPopup, showInputBox: this.props.PopupState.ConfirmationPopup.ShowInputBox, messageType: this.props.PopupState.ConfirmationPopup.MessageType, api: this.props.AdaptableApi }),
             Boolean(this.props.PopupState.ScreenPopup.ShowScreenPopup) && (React.createElement(AdaptablePopup_1.AdaptablePopup, { componentName: this.props.PopupState.ScreenPopup.ComponentName, componentModule: this.props.PopupState.ScreenPopup.ComponentModule, onHide: this.props.onCloseScreenPopup, api: this.props.AdaptableApi, onClearParams: () => this.props.onClearPopupParams(), moduleParams: this.props.PopupState.ScreenPopup.Params, moduleProps: this.props.PopupState.ScreenPopup.PopupProps })),
             React.createElement(ExportCustomDestinationFormPopups_1.ExportCustomDestinationFormPopups, { api: this.props.AdaptableApi }),

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

@@ -26,7 +26,11 @@ const dataTypes = [
         label: 'Boolean',
     },
 ];
-const inputStyle = { width: '100%', minWidth: 50, textAlign: 'start' };
+const inputStyle = {
+    width: '100%',
+    minWidth: 50,
+    textAlign: 'start',
+};
 const useForceRender = () => {
     const [, setNow] = react_1.useState(Date.now());
     return () => {

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

@@ -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/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,

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 {

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

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/AdaptablePopupModuleView.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { AccessLevel, AdaptableApi } from '../../../../../types';
 import { IModule } from '../../../../Strategy/Interface/IModule';
-export interface AdaptablePopupModuleViewProps {
+import { ModuleParams, ModuleViewPopupProps } from '../../SharedProps/ModuleViewPopupProps';
+export interface AdaptablePopupModuleViewProps extends ModuleViewPopupProps<typeof AdaptablePopupModuleView> {
     module: IModule;
     api: AdaptableApi;
     accessLevel: AccessLevel;
+    popupParams?: ModuleParams;
 }
 export declare const AdaptablePopupModuleView: React.FunctionComponent<AdaptablePopupModuleViewProps>;