@adaptabletools/adaptable 22.0.0-canary.1 → 22.0.0-canary.11

package/src/View/SmartEdit/SmartEditViewPanel.js

@@ -13,6 +13,7 @@ import { connect } from 'react-redux';
 import { Select } from '../../components/Select';
 import { Flex } from '../../components/Flex';
 class SmartEditViewPanelComponent extends React.Component {
+    cleanupEvent;
     constructor(props) {
         super(props);
         this.state = {

package/src/View/StateManagement/handleExportState.js

@@ -6,7 +6,7 @@ export const handleExportState = (type, name, state, api) => {
             Helper.copyToClipboard(stringifiedState);
             break;
         case 'Console':
-            api.consoleLog('Adaptable State: ', state);
+            api.consoleLog('Adaptable state:', state);
             break;
         case 'JSON':
             const jsonFileName = name + '.json';

package/src/View/StyledColumn/Wizard/StyledColumnWizardColumnSection.js

@@ -15,7 +15,7 @@ export const renderStyledColumnColumnSummary = (data) => {
 };
 export const isValidStyledColumnColumn = (data) => {
     if (!data.ColumnId) {
-        return 'You have to select a Column for Styled Column';
+        return 'Please select a column for the Styled Column.';
     }
     return true;
 };

package/src/View/Theme/ThemePopup.js

@@ -11,22 +11,6 @@ import { Icon } from '../../components/icons';
 import { ThemeSelector } from './ThemeSelector';
 import { Box } from '../../components/Flex';
 class ThemePopupComponent extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.handleCreateNewTheme = (variant) => {
-            let nthItem = this.props.UserThemes.length + 1;
-            let name = 'Custom-Theme-' + nthItem;
-            // make sure it is unique
-            while (this.props.UserThemes.some((theme) => theme.Name === name)) {
-                nthItem++;
-                name = 'Custom-Theme-' + nthItem;
-            }
-            const newTheme = ObjectFactory.CreateEmptyTheme(name);
-            newTheme.Variant = variant;
-            this.props.api.themeApi.addUserTheme(newTheme);
-            this.props.api.themeApi.loadTheme(newTheme.Name);
-        };
-    }
     render() {
         const isCustomTheme = this.props.api.themeApi
             .getUserThemes()
@@ -59,6 +43,19 @@ class ThemePopupComponent extends React.Component {
     onChangeTheme(value) {
         this.props.SelectTheme(value);
     }
+    handleCreateNewTheme = (variant) => {
+        let nthItem = this.props.UserThemes.length + 1;
+        let name = 'Custom-Theme-' + nthItem;
+        // make sure it is unique
+        while (this.props.UserThemes.some((theme) => theme.Name === name)) {
+            nthItem++;
+            name = 'Custom-Theme-' + nthItem;
+        }
+        const newTheme = ObjectFactory.CreateEmptyTheme(name);
+        newTheme.Variant = variant;
+        this.props.api.themeApi.addUserTheme(newTheme);
+        this.props.api.themeApi.loadTheme(newTheme.Name);
+    };
 }
 function mapStateToProps(state, ownProps) {
     return {

package/src/View/UIHelper.d.ts

@@ -6,6 +6,7 @@ import { Schedule, Weekday } from '../AdaptableState/Common/Schedule';
 import { AdaptableColumnDataType, AdaptableSystemIconName, AdaptableOptions } from '../types';
 import { AdaptableAlert } from '../AdaptableState/Common/AdaptableAlert';
 import { AdaptableMessageType } from '../AdaptableState/Common/AdaptableMessageType';
+import type { ContainerContext } from '../AdaptableOptions/ContainerOptions';
 export declare const BLACK: string;
 export declare const WHITE: string;
 export declare const LIGHT_GRAY: string;
@@ -31,13 +32,14 @@ export declare function getDefaultColors(): string[];
 export declare function getEmptyConfigState(): EditableConfigEntityState;
 export declare function getDescriptionForDataType(dataType: AdaptableColumnDataType): "text" | "number" | "date";
 export declare function getPlaceholderForDataType(dataType: AdaptableColumnDataType): "Enter Value" | "Enter Number" | "Enter Date";
-export declare function getModalContainer(adaptableOptions: AdaptableOptions, document: Document): HTMLElement;
+export declare function getModalContainer(adaptableOptions: AdaptableOptions, document: Document, context?: ContainerContext): HTMLElement;
 export declare function IsEmptyStyle(style: AdaptableStyle): boolean;
 export declare function IsNotEmptyStyle(style: AdaptableStyle): boolean;
 export declare function getMessageTypeByStatusColour(statusColour: StatusColour): AdaptableMessageType;
 export declare function getButtonToneByMessageType(messageType: AdaptableMessageType): 'success' | 'error' | 'neutral' | 'none' | 'warning' | 'info' | 'accent';
 export declare function getGlyphByMessageType(messageType: AdaptableMessageType): AdaptableSystemIconName;
 export declare function getColorByMessageType(messageType: AdaptableMessageType): string;
+export declare function getCSSColorByMessageType(messageType: AdaptableMessageType): string;
 export declare function getStyleForStatusColour(statusColour: StatusColour): CSSProperties;
 export declare function getStyleForMessageType(messageType: AdaptableMessageType): CSSProperties;
 export declare function getGlyphForStatusColour(statusColour: StatusColour): string;
@@ -75,6 +77,7 @@ export declare const UIHelper: {
     getGlyphForMessageType: typeof getGlyphForMessageType;
     getStyleForMessageType: typeof getStyleForMessageType;
     getMessageTypeFromAdaptableAlerts: typeof getMessageTypeFromAdaptableAlerts;
+    getCSSColorByMessageType: typeof getCSSColorByMessageType;
     getButtonColourForAdaptableAlerts: typeof getButtonColourForAdaptableAlerts;
     getButtonTextColourForArrayandMessageType: typeof getButtonTextColourForArrayandMessageType;
     getButtonTextColourForMessageType: typeof getButtonTextColourForMessageType;

package/src/View/UIHelper.js

@@ -2,6 +2,7 @@ import { WizardStatus, } from './Components/SharedProps/EditableConfigEntityStat
 import { FontWeight, FontStyle, StatusColour } from '../AdaptableState/Common/Enums';
 import { StringExtensions } from '../Utilities/Extensions/StringExtensions';
 import ArrayExtensions from '../Utilities/Extensions/ArrayExtensions';
+import { resolveContainerElement } from '../Utilities/resolveContainerElement';
 export const BLACK = 'Black';
 export const WHITE = 'White';
 export const LIGHT_GRAY = 'LightGray';
@@ -120,19 +121,12 @@ export function getPlaceholderForDataType(dataType) {
             return 'Enter Date';
     }
 }
-export function getModalContainer(adaptableOptions, document) {
-    let modalContainer;
-    if (adaptableOptions.containerOptions.modalContainer) {
-        // this has been set, so we use the property
-        modalContainer =
-            typeof adaptableOptions.containerOptions.modalContainer === 'string'
-                ? document.getElementById(adaptableOptions.containerOptions.modalContainer)
-                : adaptableOptions.containerOptions.modalContainer;
-        if (modalContainer) {
-            const modalContainerClassName = ' modal-container';
-            if (!modalContainer.className.includes(modalContainerClassName)) {
-                modalContainer.className += modalContainerClassName;
-            }
+export function getModalContainer(adaptableOptions, document, context) {
+    let modalContainer = resolveContainerElement(adaptableOptions.containerOptions.modalContainer, context, document);
+    if (modalContainer) {
+        const modalContainerClassName = ' modal-container';
+        if (!modalContainer.className.includes(modalContainerClassName)) {
+            modalContainer.className += modalContainerClassName;
         }
     }
     if (!modalContainer) {
@@ -202,6 +196,20 @@ export function getColorByMessageType(messageType) {
             return 'var(--ab-color-info)';
     }
 }
+export function getCSSColorByMessageType(messageType) {
+    switch (messageType) {
+        case 'Error':
+            return 'error';
+        case 'Warning':
+            return 'warn';
+        case 'Success':
+            return 'success';
+        case 'Info':
+            return 'info';
+        default:
+            return '';
+    }
+}
 export function getStyleForStatusColour(statusColour) {
     let result;
     switch (statusColour) {
@@ -409,7 +417,7 @@ export function getAdaptableToolPanelWidth() {
     return getNumericCSSVariableValue(getCSSVariableValue('--ab-cmp-toolpanel__width'), 200);
 }
 export function getSimpleButtonPaddingWidth() {
-    return getNumericCSSVariableValue(getCSSVariableValue('--ab-space-1'), 4);
+    return getNumericCSSVariableValue(getCSSVariableValue('--ab-base-space'), 4);
 }
 export function getCSSVariableValue(cssVariable) {
     if (!isBrowserDocumentAvailable()) {
@@ -449,6 +457,7 @@ export const UIHelper = {
     getGlyphForMessageType,
     getStyleForMessageType,
     getMessageTypeFromAdaptableAlerts,
+    getCSSColorByMessageType,
     getButtonColourForAdaptableAlerts,
     getButtonTextColourForArrayandMessageType,
     getButtonTextColourForMessageType,

package/src/agGrid/Adaptable.js

@@ -5,6 +5,7 @@ import { AdaptableAgGrid } from './AdaptableAgGrid';
 import { getDefaultAdaptableOptions } from '../AdaptableOptions/DefaultAdaptableOptions';
 import { renderReactRoot as defaultRenderReactRoot } from '../renderReactRoot';
 import AdaptableWizardView from '../View/AdaptableWizardView';
+import { resolveContainerElement } from '../Utilities/resolveContainerElement';
 export class Adaptable {
     /**
      * Initializer for Adaptable
@@ -21,6 +22,10 @@ export class Adaptable {
     }
 }
 export class AdaptableNoCodeWizard {
+    init;
+    adaptableOptions;
+    extraOptions;
+    agGridModules;
     /**
      * @param adaptableOptions
      */
@@ -35,19 +40,18 @@ export class AdaptableNoCodeWizard {
         this.render();
     }
     render(container) {
-        let id = getDefaultAdaptableOptions().containerOptions.adaptableContainer || 'adaptable';
         if (!container) {
-            let containerOptionsContainer = this.adaptableOptions.containerOptions?.adaptableContainer;
-            if (containerOptionsContainer) {
-                if (typeof containerOptionsContainer === 'string') {
-                    id = containerOptionsContainer ?? id;
-                }
-                else {
-                    container = containerOptionsContainer;
-                }
-            }
+            const initContext = {
+                adaptableId: this.adaptableOptions?.adaptableId ?? '',
+                adaptableStateKey: this.adaptableOptions?.adaptableStateKey ?? '',
+                adaptableContext: this.adaptableOptions?.adaptableContext,
+            };
+            container = resolveContainerElement(this.adaptableOptions.containerOptions?.adaptableContainer, initContext);
+        }
+        if (!container) {
+            const defaultId = getDefaultAdaptableOptions().containerOptions.adaptableContainer || 'adaptable';
+            container = document.getElementById(defaultId);
         }
-        container = container || document.getElementById(id);
         if (!container) {
             throw new Error('Cannot find container in which to render Adaptable No Code Wizard');
         }

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -1,5 +1,5 @@
 import { AdaptableOptions } from '../AdaptableOptions/AdaptableOptions';
-import { ChartRef, Column, GridApi, GridOptions, IRowNode, Module, RowModelType } from 'ag-grid-enterprise';
+import { ChartRef, Column, GridApi, GridOptions, IRowNode, Module, RowModelType, StatusPanelDef } from 'ag-grid-enterprise';
 import { AdaptableLogger } from './AdaptableLogger';
 import { AdaptableApi, DestroyConfig } from '../Api/AdaptableApi';
 import { AdaptableVariant, IAdaptable, NormalizeAdaptableStateOptions } from '../AdaptableInterfaces/IAdaptable';
@@ -20,7 +20,7 @@ import { Fdc3Service } from '../Utilities/Services/Fdc3Service';
 import { AnnotationsService } from '../Utilities/Services/AnnotationsService';
 import { IModuleCollection } from '../Strategy/Interface/IModule';
 import { AgGridMenuAdapter } from './AgGridMenuAdapter';
-import { AdaptableColumn, AdaptableTheme, ChartDefinition, ColumnSort, DataUpdateConfig, GridCell, InFilterValueResult, Layout, SelectedCellInfo, SelectedRowInfo } from '../types';
+import { AdaptableColumn, AdaptableTheme, ChartDefinition, ColumnSort, DataRowConfig, DataUpdateConfig, GridCell, InFilterValueResult, Layout, SelectedCellInfo, SelectedRowInfo } from '../types';
 import { RenderReactRootFn } from '../renderReactRoot';
 import { AgGridOptionsService } from './AgGridOptionsService';
 import { AgGridColumnAdapter } from './AgGridColumnAdapter';
@@ -119,6 +119,8 @@ export declare class AdaptableAgGrid implements IAdaptable {
      * Temporary, these are MIGRATION technical debts, and should be removed as soon as possible
      */
     private adaptableStatusPanelKeys;
+    private adaptableStatusPanelDefs;
+    hasAdaptableStatusBar: boolean;
     _PRIVATE_adaptableJSXElement: React.JSX.Element;
     private _prevLayout;
     private __prevLayoutForRefresh;
@@ -163,6 +165,11 @@ export declare class AdaptableAgGrid implements IAdaptable {
     private refreshInitialSortIfNeeded;
     showQuickFilter(): void;
     hideQuickFilter(): void;
+    showAdaptableToolPanel(): void;
+    hideAdaptableToolPanel(): void;
+    private buildAdaptableToolPanelDef;
+    showAdaptableStatusBar(): void;
+    hideAdaptableStatusBar(): void;
     private normalizeAdaptableOptions;
     private setInitialGridOptions;
     /**
@@ -170,6 +177,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
      */
     private initializeAgGrid;
     useRowNodeLookUp(): boolean;
+    private buildInitContainerContext;
     getAgGridContainerElement(): HTMLElement | null;
     getAdaptableContainerElement(): HTMLElement;
     refreshSelectedCellsState(): SelectedCellInfo | undefined;
@@ -257,11 +265,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
         added: IRowNode[];
         updated: IRowNode[];
     }>;
-    applyGridDataTransaction(dataTransaction: {
-        add?: any[];
-        update?: any[];
-        remove?: any[];
-    }, config?: DataUpdateConfig): Promise<{
+    manageGridRows(dataRowConfig: DataRowConfig, dataUpdateConfig?: DataUpdateConfig): Promise<{
         addedRows: IRowNode[];
         updatedRows: IRowNode[];
         removedRows: IRowNode[];
@@ -292,7 +296,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
     getGridCellsForColumn(columnId: string, onlyVisibleRows?: boolean): GridCell[] | undefined;
     getRowNodesForPrimaryKeys(primaryKeyValues: any[]): any[];
     getRowNodeByIndex(index: number): IRowNode;
-    getAgGridStatusPanels(): import("ag-grid-enterprise").StatusPanelDef[];
+    getAgGridStatusPanels(): StatusPanelDef[];
     setDataValue(value: any, column: AdaptableColumn, primaryKeyValue: any, rowNode?: IRowNode): void;
     forAllRowNodesDo(func: (rowNode: IRowNode, rowIndex: number) => void, config?: {
         includeGroupRows?: boolean;