@adaptabletools/adaptable 11.0.0-canary.0 → 11.0.0-canary.4

package/src/View/Schedule/Wizard/ScheduleWizard.js

@@ -13,39 +13,39 @@ const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/Obje
 const react_redux_1 = require("react-redux");
 const ScheduleRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ScheduleRedux"));
 exports.ScheduleWizard = (props) => {
-    var _a;
-    const scheduleType = props.data
-        ? props.data.ScheduleType
-        : (_a = props === null || props === void 0 ? void 0 : props.abObjectType) === null || _a === void 0 ? void 0 : _a.name;
+    var _a, _b;
+    const data = (_a = props.data) !== null && _a !== void 0 ? _a : props.popupParams.value;
+    const isNew = props.popupParams.action ? props.popupParams.action === 'New' : !props.data;
+    const scheduleType = data ? data.ScheduleType : (_b = props === null || props === void 0 ? void 0 : props.abObjectType) === null || _b === void 0 ? void 0 : _b.name;
     const [schedule, setSchedule] = React.useState(() => {
-        if (props.data) {
-            return props.data;
+        if (data) {
+            return data;
         }
-        let data = null;
+        let scheduleState = null;
         switch (scheduleType) {
             case Enums_1.ScheduleType.Reminder:
-                data = ObjectFactory_1.default.CreateEmptyReminderSchedule();
+                scheduleState = ObjectFactory_1.default.CreateEmptyReminderSchedule();
                 break;
             case Enums_1.ScheduleType.Report:
-                data = ObjectFactory_1.default.CreateEmptyReportSchedule();
+                scheduleState = ObjectFactory_1.default.CreateEmptyReportSchedule();
                 break;
             case Enums_1.ScheduleType.ipushpull:
-                data = ObjectFactory_1.default.CreateEmptyIPushPullSchedule();
+                scheduleState = ObjectFactory_1.default.CreateEmptyIPushPullSchedule();
                 break;
             case Enums_1.ScheduleType.Glue42:
-                data = ObjectFactory_1.default.CreateEmptyGlue42Schedule();
+                scheduleState = ObjectFactory_1.default.CreateEmptyGlue42Schedule();
                 break;
             case Enums_1.ScheduleType.OpenFin:
-                data = ObjectFactory_1.default.CreateEmptyOpenFinSchedule();
+                scheduleState = ObjectFactory_1.default.CreateEmptyOpenFinSchedule();
                 break;
         }
-        return data;
+        return scheduleState;
     });
     const [isOneOff, setIsOneOff] = React.useState(false);
     const dispatch = react_redux_1.useDispatch();
     const handleFinish = () => {
         let action = null;
-        if (props.data) {
+        if (!isNew) {
             switch (scheduleType) {
                 case Enums_1.ScheduleType.Reminder:
                     action = ScheduleRedux.ReminderScheduleEdit(schedule);

package/src/View/SpecialColumnSettingsWizardStep.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { SpecialColumnSettings } from '../../types';
+interface SpecialColumnTypeSettingsProps {
+    settings: SpecialColumnSettings;
+    onChange: (settings: SpecialColumnSettings) => void;
+    isEditable?: boolean;
+}
+export declare const SpecialColumnSettingsWizardStep: React.FunctionComponent<SpecialColumnTypeSettingsProps>;
+export {};

package/src/View/SpecialColumnSettingsWizardStep.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpecialColumnSettingsWizardStep = void 0;
+const tslib_1 = require("tslib");
+const chunk_1 = tslib_1.__importDefault(require("lodash/chunk"));
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const CheckBox_1 = require("../components/CheckBox");
+const FormLayout_1 = tslib_1.__importStar(require("../components/FormLayout"));
+const Tabs_1 = require("../components/Tabs");
+const AdaptableContext_1 = require("./AdaptableContext");
+exports.SpecialColumnSettingsWizardStep = (props) => {
+    var _a, _b;
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const possibleColumnTypes = adaptable.api.internalApi.getAdaptableOptions().userInterfaceOptions.columnTypes;
+    const { Filterable, Resizable, Groupable, Sortable, Pivotable, Aggregatable, SuppressMenu, SuppressMovable, } = (_a = props.settings) !== null && _a !== void 0 ? _a : {};
+    const handleColumnTypeChange = (columnType, checked) => {
+        var _a, _b, _c;
+        const columnTypes = (_b = (_a = props.settings) === null || _a === void 0 ? void 0 : _a.ColumnTypes) !== null && _b !== void 0 ? _b : [];
+        if (checked) {
+            props.onChange(Object.assign(Object.assign({}, props.settings), { ColumnTypes: [...columnTypes, columnType] }));
+        }
+        else {
+            props.onChange(Object.assign(Object.assign({}, props.settings), { ColumnTypes: (_c = columnTypes === null || columnTypes === void 0 ? void 0 : columnTypes.filter) === null || _c === void 0 ? void 0 : _c.call(columnTypes, (item) => item !== columnType) }));
+        }
+    };
+    const onSettingsChange = (values) => {
+        props.onChange(Object.assign(Object.assign({}, props.settings), values));
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Tabs_1.Tabs, { marginTop: 2, autoFocus: false },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Column Properties"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(rebass_1.Flex, { flexDirection: "row" },
+                    React.createElement(FormLayout_1.default, { style: { width: '100%' }, columns: [
+                            { name: 'first', size: '30%' },
+                            { size: '30%', name: 'second' },
+                            { size: '30%', name: 'third' },
+                        ] },
+                        React.createElement(FormLayout_1.FormRow, null,
+                            React.createElement(CheckBox_1.CheckBox, { checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !adaptable.api.internalApi.getAdaptableOptions().filterOptions
+                                    .enableFilterOnSpecialColumns }, "Filterable"),
+                            React.createElement(CheckBox_1.CheckBox, { checked: Resizable, onChange: (Resizable) => onSettingsChange({ Resizable }) }, "Resizable"),
+                            React.createElement(CheckBox_1.CheckBox, { checked: Groupable, onChange: (Groupable) => onSettingsChange({ Groupable }) }, "Groupable")),
+                        React.createElement(FormLayout_1.FormRow, null,
+                            React.createElement(CheckBox_1.CheckBox, { checked: Sortable, onChange: (Sortable) => onSettingsChange({ Sortable }) }, "Sortable"),
+                            React.createElement(CheckBox_1.CheckBox, { checked: Pivotable, onChange: (Pivotable) => onSettingsChange({ Pivotable }) }, "Pivotable"),
+                            React.createElement(CheckBox_1.CheckBox, { checked: Aggregatable, onChange: (Aggregatable) => onSettingsChange({ Aggregatable }) }, "Aggregatable")),
+                        React.createElement(FormLayout_1.FormRow, null,
+                            React.createElement(CheckBox_1.CheckBox, { checked: SuppressMenu, onChange: (SuppressMenu) => onSettingsChange({ SuppressMenu }) }, "Suppress Menu"),
+                            React.createElement(CheckBox_1.CheckBox, { checked: SuppressMovable, onChange: (SuppressMovable) => onSettingsChange({ SuppressMovable }) }, "Suppress Movable"),
+                            React.createElement(CheckBox_1.CheckBox, { disabled: true, checked: props.isEditable }, "Editable")))))),
+        Boolean(possibleColumnTypes === null || possibleColumnTypes === void 0 ? void 0 : possibleColumnTypes.length) && (React.createElement(Tabs_1.Tabs, { marginTop: 2, autoFocus: false },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Column Types"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(FormLayout_1.default, { columns: [{ name: 'first', size: '30%' }, { name: 'second' }] }, (_b = chunk_1.default(possibleColumnTypes !== null && possibleColumnTypes !== void 0 ? possibleColumnTypes : [], 2)) === null || _b === void 0 ? void 0 : _b.map(([first, second]) => {
+                    var _a, _b, _c, _d, _e, _f;
+                    return (React.createElement(FormLayout_1.FormRow, { key: first },
+                        first && (React.createElement(CheckBox_1.CheckBox, { onChange: (checked) => handleColumnTypeChange(first, checked), checked: (_c = (_b = (_a = props.settings) === null || _a === void 0 ? void 0 : _a.ColumnTypes) === null || _b === void 0 ? void 0 : _b.includes) === null || _c === void 0 ? void 0 : _c.call(_b, first) }, first)),
+                        second && (React.createElement(CheckBox_1.CheckBox, { onChange: (checked) => handleColumnTypeChange(second, checked), checked: (_f = (_e = (_d = props.settings) === null || _d === void 0 ? void 0 : _d.ColumnTypes) === null || _e === void 0 ? void 0 : _e.includes) === null || _f === void 0 ? void 0 : _f.call(_e, second) }, second))));
+                })))))));
+};

package/src/View/Wizard/AdaptableWizard.js

@@ -9,7 +9,7 @@ const rebass_1 = require("rebass");
 const Dialog_1 = tslib_1.__importDefault(require("../../components/Dialog"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
-const kebabCase_1 = tslib_1.__importDefault(require("lodash-es/kebabCase"));
+const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
 exports.AdaptableWizardContext = React.createContext({
     data: null,
     updateGoBackState: () => { },

package/src/View/Wizard/Interface/IAdaptableWizard.d.ts

@@ -2,6 +2,7 @@
 import { AdaptableObject } from '../../../PredefinedConfig/Common/AdaptableObject';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 import { ModuleInfo } from '../../../Strategy/Interface/IModule';
+import { ModuleParams } from '../../Components/SharedProps/ModuleViewPopupProps';
 export interface AdaptableWizardStep {
     canNext(): boolean;
     canBack(): boolean;
@@ -44,4 +45,5 @@ export interface AdaptableOnePageWizardProps<T extends AdaptableObject> {
         name: string;
         label?: string;
     };
+    popupParams?: ModuleParams;
 }

package/src/View/Wizard/OnePageAdaptableWizard.js

@@ -9,7 +9,7 @@ const rebass_1 = require("rebass");
 const QueryRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/QueryRedux"));
 const Dialog_1 = tslib_1.__importDefault(require("../../components/Dialog"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
-const kebabCase_1 = tslib_1.__importDefault(require("lodash-es/kebabCase"));
+const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
 const useProperty_1 = tslib_1.__importDefault(require("../../components/utils/useProperty"));
 const AdaptableContext_1 = require("../AdaptableContext");
 const isMacLike_1 = require("../../Utilities/isMacLike");

package/src/agGrid/Adaptable.d.ts

@@ -129,8 +129,6 @@ export declare class Adaptable implements IAdaptable {
     private getAlertCellClass;
     private getAlertRowClass;
     private getAlertRowStyle;
-    private getFlashingCellRowStyle;
-    private getFlashingCellStyleFor;
     private getFlashingCellStyle;
     private getCellHighlightStyle;
     private getRowHighlightStyle;

package/src/agGrid/Adaptable.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.bindAdaptableAgGrid = exports.AdaptableNoCodeWizard = exports.Adaptable = void 0;
 const tslib_1 = require("tslib");
 const all_modules_1 = require("@ag-grid-community/all-modules");
-const debounce_1 = tslib_1.__importDefault(require("lodash-es/debounce"));
-const isEqual_1 = tslib_1.__importDefault(require("lodash-es/isEqual"));
-const throttle_1 = tslib_1.__importDefault(require("lodash-es/throttle"));
-const uniqBy_1 = tslib_1.__importDefault(require("lodash-es/uniqBy"));
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
+const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
+const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
+const uniqBy_1 = tslib_1.__importDefault(require("lodash/uniqBy"));
 const React = tslib_1.__importStar(require("react"));
 const ReactDOM = tslib_1.__importStar(require("react-dom"));
-const clamp_1 = tslib_1.__importDefault(require("lodash-es/clamp"));
+const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
 const AdaptableApiImpl_1 = require("../Api/Implementation/AdaptableApiImpl");
 const Enums_1 = require("../PredefinedConfig/Common/Enums");
 const Uuid_1 = require("../PredefinedConfig/Uuid");
@@ -903,13 +903,12 @@ class Adaptable {
         }
         return null;
     }
-    getFlashingCellRowStyle(params) {
-        const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(params.node);
-        return this.getFlashingCellStyleFor(primaryKeyValue);
-    }
-    getFlashingCellStyleFor(primaryKey, colId) {
+    getFlashingCellStyle(col, params) {
         var _a;
-        const flashingCell = this.api.internalApi.getAdaptableFlashingCellFor(primaryKey, colId);
+        const primaryKey = params.node.aggData
+            ? params.node.id
+            : this.getPrimaryKeyValueFromRowNode(params.node);
+        const flashingCell = this.api.internalApi.getAdaptableFlashingCellFor(primaryKey, col.columnId);
         if (!flashingCell) {
             return {};
         }
@@ -919,10 +918,6 @@ class Adaptable {
                 ? flashingCell.flashingCellDefinition.DownChangeStyle
                 : flashingCell.flashingCellDefinition.NeutralChangeStyle)) !== null && _a !== void 0 ? _a : {});
     }
-    getFlashingCellStyle(col, params) {
-        const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(params.node);
-        return this.getFlashingCellStyleFor(primaryKeyValue, col.columnId);
-    }
     getCellHighlightStyle(col, params) {
         const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(params.node);
         const cellHightlight = this.api.internalApi
@@ -1951,6 +1946,7 @@ class Adaptable {
         const specialColumnsAreFilterable = this.api.internalApi.getAdaptableOptions().filterOptions.enableFilterOnSpecialColumns;
         const defaultFreeTextColumnSettings = ObjectFactory_1.CreateEmptyFreeTextColumn(specialColumnsAreFilterable).FreeTextColumnSettings;
         return this.api.freeTextColumnApi.getAllFreeTextColumn().map((freeTextColumn) => {
+            var _a;
             const freeTextColumnSettings = Object.assign(Object.assign({}, defaultFreeTextColumnSettings), freeTextColumn.FreeTextColumnSettings);
             const dataTypeEditor = freeTextColumn.DataType === 'Number'
                 ? AdaptableNumberEditor_1.AdaptableNumberEditor
@@ -1962,8 +1958,7 @@ class Adaptable {
                 GeneralConstants_1.AB_SPECIAL_COLUMN,
                 this.agGridHelper.getAgGridDataType(freeTextColumn.DataType),
             ];
-            if (freeTextColumn.FreeTextColumnSettings &&
-                ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(freeTextColumn.FreeTextColumnSettings.ColumnTypes)) {
+            if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty((_a = freeTextColumn === null || freeTextColumn === void 0 ? void 0 : freeTextColumn.FreeTextColumnSettings) === null || _a === void 0 ? void 0 : _a.ColumnTypes)) {
                 columnTypes.push(...freeTextColumn.FreeTextColumnSettings.ColumnTypes);
             }
             return {
@@ -2443,7 +2438,6 @@ class Adaptable {
          */
         this.gridOptions.api.addEventListener(all_modules_1.Events.EVENT_COLUMN_RESIZED, (params) => {
             if (params.finished == true && params.type == 'columnResized' && params.column) {
-                this._emit('ColumnResized', params.column.getColId());
                 this.debouncedSaveGridLayout();
             }
         });
@@ -3156,14 +3150,30 @@ class Adaptable {
         if (oldValue == newValue) {
             return;
         }
-        const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(rowNode);
-        if (!primaryKeyValue) {
-            return;
-        }
         const abColumn = this.api.columnApi.getColumnFromId(colId);
         if (!abColumn) {
             return;
         }
+        if (this.isGroupRowNode(rowNode)) {
+            const dataChangedInfo = this.api.internalApi.buildDataChangedInfo({
+                oldValue: oldValue,
+                newValue: newValue,
+                column: abColumn,
+                /**
+                 * A grouped row does not have an underling data item.
+                 * Because of this we use the rowNode.id as an identifier.
+                 */
+                primaryKeyValue: rowNode.id,
+                rowNode: rowNode,
+                trigger: 'aggChange',
+            });
+            this.DataService.CreateDataChangedEvent(dataChangedInfo);
+            return;
+        }
+        const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(rowNode);
+        if (!primaryKeyValue) {
+            return;
+        }
         const dataChangedInfo = this.api.internalApi.buildDataChangedInfo({
             oldValue: oldValue,
             newValue: newValue,

package/src/agGrid/agGridHelper.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.agGridHelper = void 0;
 const tslib_1 = require("tslib");
-const clamp_1 = tslib_1.__importDefault(require("lodash-es/clamp"));
+const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
 const Enums_1 = require("../PredefinedConfig/Common/Enums");
 const Uuid_1 = require("../PredefinedConfig/Uuid");
 const AlertModule_1 = require("../Strategy/AlertModule");
@@ -248,8 +248,7 @@ class agGridHelper {
             }
         }
         // lets set this here one as the function cannot change the result so dont need to run it each time
-        let excludeColumnFromQuickSearch = this.adaptable.adaptableOptions.searchOptions
-            .excludeColumnFromQuickSearch;
+        let excludeColumnFromQuickSearch = this.adaptable.adaptableOptions.searchOptions.excludeColumnFromQuickSearch;
         if (excludeColumnFromQuickSearch) {
             if (excludeColumnFromQuickSearch(abColumn)) {
                 abColumn.isExcludedFromQuickSearch = true;

package/src/agGrid/agGridMenuHelper.js

@@ -4,7 +4,7 @@ exports.agGridMenuHelper = void 0;
 const tslib_1 = require("tslib");
 const ArrayExtensions_1 = require("../Utilities/Extensions/ArrayExtensions");
 const icons_1 = require("../components/icons");
-const flatten_1 = tslib_1.__importDefault(require("lodash-es/flatten"));
+const flatten_1 = tslib_1.__importDefault(require("lodash/flatten"));
 // tslint:disable-next-line: class-name
 class agGridMenuHelper {
     constructor(adaptable, gridOptions) {
@@ -21,8 +21,7 @@ class agGridMenuHelper {
         let userColumnMenuItems = [];
         //First get Ag Grid Column Items
         agGridColumnMenuItems.push(...this.createAgGridColumnMenuItems(originalgetMainMenuItems, params));
-        let showAdaptableColumnMenu = this.adaptable.adaptableOptions.menuOptions
-            .showAdaptableColumnMenu;
+        let showAdaptableColumnMenu = this.adaptable.adaptableOptions.menuOptions.showAdaptableColumnMenu;
         let hasAdaptableColumnMenuItems = showAdaptableColumnMenu == null || showAdaptableColumnMenu !== false;
         if (hasAdaptableColumnMenuItems) {
             agGridColumnMenuItems.push('separator');
@@ -56,8 +55,7 @@ class agGridMenuHelper {
         let agGridContextMenuItems = [];
         let adaptableContextMenuItems = [];
         let userContextMenuItems = [];
-        let showAdaptableContextMenu = this.adaptable.adaptableOptions.menuOptions
-            .showAdaptableContextMenu;
+        let showAdaptableContextMenu = this.adaptable.adaptableOptions.menuOptions.showAdaptableContextMenu;
         let hasAdaptableContextMenuItems = showAdaptableContextMenu == null || showAdaptableContextMenu !== false;
         let userDefinedContextMenuItems = this.adaptable.adaptableOptions.menuOptions.contextMenuItems;
         let hasUserDefinedContextMenuItems = ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(userDefinedContextMenuItems);
@@ -285,8 +283,7 @@ class agGridMenuHelper {
         // here we create agGrid Menu items based on Adaptable Menu Items
         // user has ability to decide whether to show or not
         let contextMenuItems = [];
-        let showAdaptableContextMenu = this.adaptable.adaptableOptions.menuOptions
-            .showAdaptableContextMenu;
+        let showAdaptableContextMenu = this.adaptable.adaptableOptions.menuOptions.showAdaptableContextMenu;
         if (showAdaptableContextMenu == null || showAdaptableContextMenu !== false) {
             adaptableMenuItems.forEach((adaptableMenuItem) => {
                 if (adaptableMenuItem) {
@@ -321,8 +318,7 @@ class agGridMenuHelper {
     // method to get all the Adaptable Menu Items - together with running the function where user can choose whether or not to display
     getAdaptableMenuItemsColumnHeader(adaptableColumn, menuContext) {
         const adaptableMenuItems = [];
-        let showAdaptableColumnMenu = this.adaptable.adaptableOptions.menuOptions
-            .showAdaptableColumnMenu;
+        let showAdaptableColumnMenu = this.adaptable.adaptableOptions.menuOptions.showAdaptableColumnMenu;
         let runCheck = showAdaptableColumnMenu == null || showAdaptableColumnMenu !== false;
         //  if (adaptableColumn != null) {
         this.adaptable.adaptableModules.forEach((s) => {

package/src/components/Dashboard/Dashboard.js

@@ -29,7 +29,7 @@ function Dashboard(props) {
         top: position.y,
     };
     const renderTabs = () => (React.createElement("div", { className: "ab-Dashboard__tabs" }, children &&
-        React.Children.map(children, (child, index) => (React.createElement("button", { className: join_1.default('ab-Dashboard__tab', !collapsed && activeTabIndex === index ? 'ab-Dashboard__tab--active' : ''), key: index, onClick: () => {
+        React.Children.map(children, (child, index) => (React.createElement("button", { type: "button", className: join_1.default('ab-Dashboard__tab', !collapsed && activeTabIndex === index ? 'ab-Dashboard__tab--active' : ''), key: index, onClick: () => {
                 if (activeTabIndex === index) {
                     setCollapsed(!collapsed);
                 }

package/src/components/Dashboard/DashboardManager.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { DashboardTab } from '../../PredefinedConfig/DashboardState';
 import { AdaptableDashboardToolbar } from '../../PredefinedConfig/Common/Types';
 import { AdaptableApi } from '../../Api/AdaptableApi';
@@ -6,10 +6,12 @@ export interface DashboardToolbar {
     Id: AdaptableDashboardToolbar | string;
     Title: string;
 }
-declare function DashboardManager({ tabs, onTabsChange, availableToolbars, api, }: {
+interface DashboardManagerProps {
     tabs: DashboardTab[];
     onTabsChange: (tabs: DashboardTab[]) => void;
     availableToolbars: DashboardToolbar[];
     api: AdaptableApi;
-}): JSX.Element;
+    disabled: boolean;
+}
+declare const DashboardManager: React.FunctionComponent<DashboardManagerProps>;
 export default DashboardManager;

package/src/components/Dashboard/DashboardManager.js

@@ -14,22 +14,22 @@ const getToolbarTitle = (availableToolbars, toolbarId) => {
     const found = availableToolbars.find((t) => t.Id === toolbarId);
     return found ? found.Title : toolbarId;
 };
-function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTabName, }) {
+function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, }) {
     return (React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "MAIN", type: "TAB", direction: "horizontal" }, (provided) => (React.createElement("div", Object.assign({ ref: provided.innerRef }, provided.droppableProps, { style: { display: 'flex' }, "data-name": "dashboard-tabs" }),
-        tabs.map((tab, tabIndex) => (React.createElement(TabItem, { key: tabIndex, tabIndex: tabIndex, tab: tab, onRemove: () => onRemoveTab(tabIndex), onRemoveToolbar: (toolbarIndex) => onRemoveToolbar(tabIndex, toolbarIndex), onChangeTabName: (tabName) => onChangeTabName(tabIndex, tabName) }))),
+        tabs.map((tab, tabIndex) => (React.createElement(TabItem, { disabled: disabled, key: tabIndex, tabIndex: tabIndex, tab: tab, onRemove: () => onRemoveTab(tabIndex), onRemoveToolbar: (toolbarIndex) => onRemoveToolbar(tabIndex, toolbarIndex), onChangeTabName: (tabName) => onChangeTabName(tabIndex, tabName) }))),
         provided.placeholder))));
 }
-function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, }) {
-    return (React.createElement(react_beautiful_dnd_1.Draggable, { draggableId: String(tabIndex), index: tabIndex }, (provided) => (React.createElement("div", Object.assign({ "data-name": "dashboard-tab", ref: provided.innerRef }, provided.draggableProps, { style: Object.assign(Object.assign({}, provided.draggableProps.style), { boxSizing: 'border-box', border: '1px solid var(--ab-color-primarydark)', borderRadius: 'var(--ab__border-radius)', marginRight: 'var(--ab-space-2)', width: 160, display: 'flex', flexDirection: 'column' }) }),
+function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, disabled, }) {
+    return (React.createElement(react_beautiful_dnd_1.Draggable, { isDragDisabled: disabled, draggableId: String(tabIndex), index: tabIndex }, (provided) => (React.createElement("div", Object.assign({ "data-name": "dashboard-tab", ref: provided.innerRef }, provided.draggableProps, { style: Object.assign(Object.assign({}, (disabled ? {} : provided.draggableProps.style)), { boxSizing: 'border-box', border: '1px solid var(--ab-color-primarydark)', borderRadius: 'var(--ab__border-radius)', marginRight: 'var(--ab-space-2)', width: 160, display: 'flex', flexDirection: 'column' }) }),
         React.createElement("div", { style: {
                 display: 'flex',
                 alignItems: 'center',
                 padding: 'var(--ab-space-1)',
                 borderBottom: '1px solid var(--ab-color-primarydark)',
             } },
-            React.createElement("div", Object.assign({}, provided.dragHandleProps, { style: {} }),
+            React.createElement("div", Object.assign({}, (disabled ? {} : provided.dragHandleProps), { style: {} }),
                 React.createElement(icons_1.Icon, { name: "drag" })),
-            React.createElement("input", { type: "text", value: tab.Name, style: {
+            React.createElement("input", { type: "text", disabled: disabled, value: tab.Name, style: {
                     flex: 1,
                     width: '100%',
                     border: 'none',
@@ -41,11 +41,11 @@ function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, })
                 }, onChange: (event) => {
                     onChangeTabName(event.target.value);
                 } }),
-            React.createElement(SimpleButton_1.default, { icon: "delete", variant: "text", onClick: onRemove })),
-        React.createElement(ToolbarList, { toolbars: tab.Toolbars, droppableId: String(tabIndex), onRemove: onRemoveToolbar })))));
+            React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove })),
+        React.createElement(ToolbarList, { disabled: disabled, toolbars: tab.Toolbars, droppableId: String(tabIndex), onRemove: onRemoveToolbar })))));
 }
-function ToolbarList({ toolbars, droppableId, onRemove, }) {
-    return (React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: droppableId, type: "TOOLBAR" }, (provided, snapshot) => (React.createElement("div", Object.assign({ ref: provided.innerRef }, provided.droppableProps, { "data-name": "dashboard-toolbar-drop-target", style: {
+function ToolbarList({ toolbars, droppableId, onRemove, disabled, }) {
+    return (React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: droppableId, type: "TOOLBAR" }, (provided, snapshot) => (React.createElement("div", Object.assign({ ref: provided.innerRef }, (disabled ? {} : provided.droppableProps), { "data-name": "dashboard-toolbar-drop-target", style: {
             flex: 1,
             padding: 4,
             paddingBottom: 0,
@@ -54,18 +54,18 @@ function ToolbarList({ toolbars, droppableId, onRemove, }) {
                 : '',
             minHeight: 200,
         } }),
-        toolbars.map((toolbar, toolbarIndex) => (React.createElement(ToolbarItem, { key: toolbar, toolbar: toolbar, toolbarIndex: toolbarIndex, onRemove: () => onRemove(toolbarIndex) }))),
+        toolbars.map((toolbar, toolbarIndex) => (React.createElement(ToolbarItem, { disabled: disabled, key: toolbar, toolbar: toolbar, toolbarIndex: toolbarIndex, onRemove: () => onRemove(toolbarIndex) }))),
         provided.placeholder))));
 }
-function ToolbarItem({ toolbar, toolbarIndex, onRemove, }) {
+function ToolbarItem({ toolbar, toolbarIndex, onRemove, disabled, }) {
     const { availableToolbars } = react_1.useContext(DashboardManagerContext);
-    return (React.createElement(react_beautiful_dnd_1.Draggable, { draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => (React.createElement("div", Object.assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: Object.assign(Object.assign({}, provided.draggableProps.style), { display: 'flex', alignItems: 'center', border: '1px solid var(--ab-color-primary)', backgroundColor: snapshot.isDragging
+    return (React.createElement(react_beautiful_dnd_1.Draggable, { isDragDisabled: disabled, draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => (React.createElement("div", Object.assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: Object.assign(Object.assign({}, provided.draggableProps.style), { display: 'flex', alignItems: 'center', border: '1px solid var(--ab-color-primary)', backgroundColor: snapshot.isDragging
                 ? 'var(--ab-dashboard-toolbar-drag__background)'
                 : 'var(--ab-color-primarylight)', paddingLeft: 'var(--ab-space-1)', marginBottom: 'var(--ab-space-1)' }) }),
         React.createElement("div", { style: { flex: 1 } }, getToolbarTitle(availableToolbars, toolbar)),
-        React.createElement(SimpleButton_1.default, { icon: "clear", variant: "text", padding: 1, onClick: onRemove })))));
+        React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "clear", variant: "text", padding: 1, onClick: onRemove })))));
 }
-function UnusedPanel({ toolbars }) {
+function UnusedPanel({ toolbars, disabled }) {
     return (React.createElement("div", { "data-name": "dashboard-toolbars", style: {
             border: '1px solid var(--ab-color-primarydark)',
             borderRadius: 'var(--ab__border-radius)',
@@ -76,9 +76,9 @@ function UnusedPanel({ toolbars }) {
         React.createElement("div", { style: { padding: 'var(--ab-space-2)' } },
             React.createElement("b", null, "Available Toolbars"),
             " (drag into a Tab below)"),
-        React.createElement(UnusedToolbarList, { toolbars: toolbars })));
+        React.createElement(UnusedToolbarList, { disabled: disabled, toolbars: toolbars })));
 }
-function UnusedToolbarList({ toolbars }) {
+function UnusedToolbarList({ toolbars, disabled }) {
     return (React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "UNUSED", type: "TOOLBAR", isDropDisabled: true, direction: "horizontal" }, (provided) => (React.createElement("div", Object.assign({ ref: provided.innerRef, "data-name": "dashboard-toolbars-list" }, provided.droppableProps, { style: {
             display: 'flex',
             flexDirection: 'row',
@@ -86,16 +86,22 @@ function UnusedToolbarList({ toolbars }) {
             paddingLeft: 'var(--ab-space-2)',
             paddingRight: 'var(--ab-space-2)',
         } }),
-        toolbars.map((toolbar, toolbarIndex) => (React.createElement(UnusedToolbarItem, { key: toolbar, toolbar: toolbar, toolbarIndex: toolbarIndex }))),
+        toolbars.map((toolbar, toolbarIndex) => (React.createElement(UnusedToolbarItem, { disabled: disabled, key: toolbar, toolbar: toolbar, toolbarIndex: toolbarIndex }))),
         provided.placeholder))));
 }
-function UnusedToolbarItem({ toolbar, toolbarIndex }) {
+function UnusedToolbarItem({ toolbar, toolbarIndex, disabled, }) {
     const { availableToolbars } = react_1.useContext(DashboardManagerContext);
-    return (React.createElement(react_beautiful_dnd_1.Draggable, { draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => (React.createElement("div", Object.assign({ "data-name": "dashboard-toolbar", ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: Object.assign(Object.assign({}, provided.draggableProps.style), { border: '1px solid var(--ab-color-primary)', backgroundColor: snapshot.isDragging
-                ? 'var(--ab-dashboard-toolbar-drag__background)'
-                : 'var(--ab-color-primarylight)', padding: 'var(--ab-space-1) var(--ab-space-2)', marginRight: 'var(--ab-space-1)', marginBottom: 'var(--ab-space-1)' }) }), getToolbarTitle(availableToolbars, toolbar)))));
+    return (React.createElement(react_beautiful_dnd_1.Draggable, { isDragDisabled: disabled, draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => {
+        const eventHandlers = disabled
+            ? {}
+            : Object.assign(Object.assign({}, provided.draggableProps), provided.dragHandleProps);
+        const dragStyle = disabled ? {} : provided.draggableProps.style;
+        return (React.createElement("div", Object.assign({ "data-name": "dashboard-toolbar", ref: provided.innerRef }, eventHandlers, { style: Object.assign(Object.assign({}, dragStyle), { border: '1px solid var(--ab-color-primary)', backgroundColor: snapshot.isDragging
+                    ? 'var(--ab-dashboard-toolbar-drag__background)'
+                    : 'var(--ab-color-primarylight)', padding: 'var(--ab-space-1) var(--ab-space-2)', marginRight: 'var(--ab-space-1)', marginBottom: 'var(--ab-space-1)' }) }), getToolbarTitle(availableToolbars, toolbar)));
+    }));
 }
-function DashboardManager({ tabs, onTabsChange, availableToolbars, api, }) {
+const DashboardManager = ({ tabs, onTabsChange, availableToolbars, api, disabled, }) => {
     const moduleService = api.internalApi.getModuleService();
     const moduleInfo = moduleService.getModuleInfoByModule('Dashboard');
     const contextValue = react_1.useMemo(() => ({
@@ -157,9 +163,9 @@ function DashboardManager({ tabs, onTabsChange, availableToolbars, api, }) {
         } },
         React.createElement(DashboardManagerContext.Provider, { value: contextValue },
             React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
-                React.createElement(UnusedPanel, { toolbars: unusedToolbars }),
-                React.createElement(PanelWithButton_1.PanelWithButton, { headerText: moduleInfo.FriendlyName + ' Tabs', button: React.createElement(SimpleButton_1.default, { onClick: handleTabAdd }, "Add Tab") },
+                React.createElement(UnusedPanel, { disabled: disabled, toolbars: unusedToolbars }),
+                React.createElement(PanelWithButton_1.PanelWithButton, { headerText: moduleInfo.FriendlyName + ' Tabs', button: React.createElement(SimpleButton_1.default, { disabled: disabled, onClick: handleTabAdd }, "Add Tab") },
                     React.createElement("div", { style: { display: 'flex', flex: 1 } },
-                        React.createElement(TabList, { tabs: tabs, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName })))))));
-}
+                        React.createElement(TabList, { disabled: disabled, tabs: tabs, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName })))))));
+};
 exports.default = DashboardManager;

package/src/components/DropdownButton/renderItem.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const isPlainObject_1 = tslib_1.__importDefault(require("lodash-es/isPlainObject"));
+const isPlainObject_1 = tslib_1.__importDefault(require("lodash/isPlainObject"));
 exports.default = ({ domProps, item, onItemClick, index, columns, className, idProperty, style, }) => {
     const key = item[idProperty] || index;
     if (!isPlainObject_1.default(item)) {

package/src/components/FormLayout/index.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
 const react_1 = require("react");
-const merge_1 = tslib_1.__importDefault(require("lodash-es/merge"));
+const merge_1 = tslib_1.__importDefault(require("lodash/merge"));
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const FormLayoutContext = react_1.createContext(null);
 const defaultColumns = {

package/src/components/OverlayTrigger/Overlay.js

@@ -6,7 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const batchUpdate_1 = tslib_1.__importDefault(require("../utils/batchUpdate"));
 const usePrevious_1 = tslib_1.__importDefault(require("../utils/usePrevious"));
-const isEqual_1 = tslib_1.__importDefault(require("lodash-es/isEqual"));
+const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const utils_1 = require("./utils");
 exports.useRefresh = () => {
     const [x, update] = react_1.useState(0);

package/src/components/WindowModal/WindowModal.js

@@ -5,6 +5,20 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const re_resizable_1 = require("re-resizable");
 const useDraggable_1 = tslib_1.__importDefault(require("../utils/useDraggable"));
+const UIHelper_1 = require("../../View/UIHelper");
+const react_dom_1 = require("react-dom");
+let portalElement;
+const ensurePortalElement = () => {
+    if (!UIHelper_1.isBrowserDocumentAvailable()) {
+        return;
+    }
+    if (portalElement) {
+        return;
+    }
+    portalElement = document.createElement('div');
+    portalElement.classList.add('ab-cmp-modal-window');
+    document.body.appendChild(portalElement);
+};
 const getResizePositionDelta = (direction, delta) => {
     const positionDelta = { x: 0, y: 0 };
     const left = -delta.width;
@@ -26,6 +40,7 @@ const getResizePositionDelta = (direction, delta) => {
     return null;
 };
 exports.WindowModal = (props) => {
+    ensurePortalElement();
     const positionDeltaRef = React.useRef(null);
     const positionRef = React.useRef(props.position);
     /**
@@ -77,11 +92,11 @@ exports.WindowModal = (props) => {
             applyTransform(positionDelta.x, positionDelta.y);
         }
     }, []);
-    return (React.createElement("div", { style: style, 
+    return react_dom_1.createPortal(React.createElement("div", { style: style, 
         //@ts-ignore
         ref: targetRef },
         React.createElement(re_resizable_1.Resizable, { onResizeStop: handleResizeStop, onResize: handleResize, bounds: "window", defaultSize: {
                 width: props.size.width,
                 height: props.size.height,
-            } }, props.children)));
+            } }, props.children)), portalElement);
 };

package/src/components/utils/useDraggable.js

@@ -26,7 +26,8 @@ function useDraggable({ onMove, onDrop, getBoundingRect = () => document.body.ge
              * This gives time react to render the node handle.
              */
             setTimeout(() => {
-                const node = document.querySelector(handleSelector);
+                var _a;
+                const node = (_a = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(handleSelector);
                 node && handleRefCallback(node);
             }, 16);
         }

package/src/metamodel/adaptable.metamodel.d.ts

@@ -873,6 +873,14 @@ export declare const ADAPTABLE_METAMODEL: {
             kind: string;
             description: string;
             uiLabel: string;
+            reference?: undefined;
+            isOptional?: undefined;
+        } | {
+            name: string;
+            kind: string;
+            description: string;
+            uiLabel: string;
+            reference: string;
             isOptional?: undefined;
         } | {
             name: string;
@@ -880,6 +888,7 @@ export declare const ADAPTABLE_METAMODEL: {
             description: string;
             uiLabel: string;
             isOptional: boolean;
+            reference?: undefined;
         })[];
     };
     CellSummaryApi: {