@adaptabletools/adaptable 18.1.9 → 18.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "18.1.9",
+  "version": "18.1.10",
   "description": "Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",

package/src/AdaptableInterfaces/IAdaptable.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ChartModel, ChartRef, Column, GridApi, GridOptions, IRowNode, Module, RowModelType, StatusPanelDef } from '@ag-grid-community/core';
 import { AdaptableApi } from '../Api/AdaptableApi';
 import { AdaptableColumn } from '../PredefinedConfig/Common/AdaptableColumn';
@@ -90,6 +91,7 @@ export interface IAdaptable {
     RowEditService: RowEditService;
     Fdc3Service: Fdc3Service;
     CellPopupService: CellPopupService;
+    _PRIVATE_adaptableJSXElement: JSX.Element;
     /**
      * INTERNAL ADAPTABLE EVENTS
      * These are not called externally - for that we use eventapi

package/src/AdaptableOptions/ContainerOptions.d.ts

@@ -3,42 +3,42 @@
  */
 export interface ContainerOptions {
     /**
-     * Div containing AdapTable - string Id or HTMLElement
+     * Div containing AdapTable; string Id or HTMLElement
      *
      * @defaultValue "adaptable"
      * @gridInfoItem
      */
     adaptableContainer?: string | HTMLElement;
     /**
-     * Div containing AG Grid instance - string Id or HTMLElement
+     * Div containing AG Grid instance; string Id or HTMLElement
      *
      * @defaultValue "grid"
      * @gridInfoItem
      */
     agGridContainer?: string | HTMLElement;
     /**
-     *  How long AdapTable waits for AG Grid before giving up connecting to it
+     *  How long to wait for AG Grid before giving up trying to connect
      *
      * @defaultValue 60s
      * @gridInfoItem
      */
     agGridContainerWaitTimeout?: number;
     /**
-     * Name of div where modals appear (if null, will be centre of page)
+     * Name of div where popups appear
      *
-     * @defaultValue undefined
+     * @defaultValue undefined (centre of screen)
      * @gridInfoItem
      */
     modalContainer?: string | HTMLElement;
     /**
-     * Div to show System Status messages - string Id or HTMLElement
+     * Div to show System Status messages; string Id or HTMLElement
      *
      * @defaultValue undefined
      * @gridInfoItem
      */
     systemStatusContainer?: string | HTMLElement;
     /**
-     * Div to show Alerts - string Id or HTMLElement
+     * Div to display Alert messages; string Id or HTMLElement
      *
      * @defaultValue undefined
      * @gridInfoItem

package/src/AdaptableOptions/DataChangeHistoryOptions.d.ts

@@ -27,6 +27,7 @@ export interface DataChangeHistoryOptions<TData = any> {
     changeHistoryButton?: DataChangeHistoryButton<TData> | DataChangeHistoryButton<TData>[];
     /**
      * Whether to show all changes for each cell or just the last one
+     * @defaultValue true
      */
     showLastDataChangeOnly?: boolean;
 }

package/src/Api/GridApi.d.ts

@@ -11,10 +11,12 @@ import { Column, IRowNode, RowModelType } from '@ag-grid-community/core';
 import { GridCellRange } from '../PredefinedConfig/Selection/GridCellRange';
 import { RowsHighlightInfo } from '../PredefinedConfig/Common/RowsHighlightInfo';
 import { TransposeConfig } from '../PredefinedConfig/Common/TransposeConfig';
+import { AdaptableVariant } from '../AdaptableInterfaces/IAdaptable';
 /**
  * Provides access to important properites of AdapTable e.g. sorting, selected cells etc.
  */
 export interface GridApi {
+    getVariant(): AdaptableVariant;
     /**
      * Returns Grid section from AdapTable State
      */

package/src/Api/Implementation/GridApiImpl.d.ts

@@ -12,12 +12,13 @@ import { Column, IRowNode, RowModelType } from '@ag-grid-community/core';
 import { GridCellRange } from '../../PredefinedConfig/Selection/GridCellRange';
 import { CellDataChangedInfo } from '../../PredefinedConfig/Common/CellDataChangedInfo';
 import { RowsHighlightInfo } from '../../PredefinedConfig/Common/RowsHighlightInfo';
-import { IAdaptable } from '../../AdaptableInterfaces/IAdaptable';
+import { AdaptableVariant, IAdaptable } from '../../AdaptableInterfaces/IAdaptable';
 import { GridInternalApi } from '../Internal/GridInternalApi';
 import { TransposeConfig } from '../../PredefinedConfig/Common/TransposeConfig';
 export declare class GridApiImpl extends ApiBase implements GridApi {
     internalApi: GridInternalApi;
     constructor(adaptable: IAdaptable);
+    getVariant(): AdaptableVariant;
     getGridState(): GridState;
     loadGridData(dataSource: any): void;
     resetGridData(dataSource: any[]): void;

package/src/Api/Implementation/GridApiImpl.js

@@ -12,6 +12,9 @@ export class GridApiImpl extends ApiBase {
         super(adaptable);
         this.internalApi = new GridInternalApi(adaptable);
     }
+    getVariant() {
+        return this.adaptable.variant;
+    }
     getGridState() {
         return this.getAdaptableState().Grid;
     }

package/src/Api/Internal/AdaptableInternalApi.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ApiBase } from '../Implementation/ApiBase';
 import { UIConfirmation } from '../../Utilities/Interface/MessagePopups';
 import { SystemState } from '../../PredefinedConfig/SystemState';
@@ -29,6 +30,7 @@ import { CellPopupService } from '../../Utilities/Services/CellPopupService';
 import { RowEditService } from '../../Utilities/Services/RowEditService';
 export declare class AdaptableInternalApi extends ApiBase {
     getSystemState(): SystemState;
+    getAdaptableJSXElement(): JSX.Element;
     showPopupConfirmation(confirmation: UIConfirmation): void;
     showPopupScreen(module: AdaptableModule, componentName: string, popupParams?: ModuleParams, popupProps?: {
         [key: string]: any;

package/src/Api/Internal/AdaptableInternalApi.js

@@ -12,6 +12,10 @@ export class AdaptableInternalApi extends ApiBase {
     getSystemState() {
         return this.getAdaptableState().System;
     }
+    getAdaptableJSXElement() {
+        var _a;
+        return (_a = this.adaptable._PRIVATE_adaptableJSXElement) !== null && _a !== void 0 ? _a : null;
+    }
     // Popup Redux Actions
     showPopupConfirmation(confirmation) {
         this.dispatchAction(PopupRedux.PopupShowConfirmation(confirmation));

package/src/View/Components/ExternalRenderer.js

@@ -42,5 +42,7 @@ export const ExternalRenderer = (_a) => {
             }
         };
     }, []);
-    return React.createElement("div", Object.assign({}, rest, { dangerouslySetInnerHTML: { __html: contentsHTML }, ref: ref }));
+    const RFC = adaptable.variant === 'react' ? frameworkComponent : null;
+    return RFC ? (React.createElement("div", Object.assign({}, rest, { ref: ref }),
+        React.createElement(RFC, { adaptableApi: adaptable.api }))) : (React.createElement("div", Object.assign({}, rest, { dangerouslySetInnerHTML: { __html: contentsHTML }, ref: ref })));
 };

package/src/View/Dashboard/CustomToolbar.js

@@ -63,6 +63,8 @@ export const CustomToolbarCmp = (props) => {
             }
         };
     }, []);
+    const CustomReactFrameworkComponent = props.customToolbar
+        .frameworkComponent;
     return (React.createElement(React.Fragment, null,
         props.customToolbar.render && (React.createElement("div", { id: renderContentContainerId, ref: renderContentContainerRef, className: `ab-CustomToolbar__rendered-content ab-CustomToolbar--${props.customToolbar.name}`, style: { minHeight: 22 }, dangerouslySetInnerHTML: { __html: renderedContentHTML } })),
         props.customToolbar.toolbarButtons && (React.createElement("div", { id: buttonsContainerId, className: `ab-CustomToolbar__buttons ab-CustomToolbar--${props.customToolbar.name}`, style: { minHeight: 22 } }, props.customToolbar.toolbarButtons.map((button, index) => {
@@ -91,7 +93,7 @@ export const CustomToolbarCmp = (props) => {
                     }, 16);
                 } }, buttonLabel));
         }))),
-        props.customToolbar.frameworkComponent && (React.createElement("div", { id: componentContainerId, ref: componentContainerRef, style: { minHeight: 22 }, className: `ab-CustomToolbar__component ab-CustomToolbar--${props.customToolbar.name}` }))));
+        CustomReactFrameworkComponent && (React.createElement("div", { id: componentContainerId, ref: componentContainerRef, style: { minHeight: 22 }, className: `ab-CustomToolbar__component ab-CustomToolbar--${props.customToolbar.name}` }, api.gridApi.getVariant() === 'react' ? (React.createElement(CustomReactFrameworkComponent, { adaptableApi: api })) : null))));
 };
 export const CustomToolbarWrapper = (props) => {
     const { api } = useAdaptable();

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AdaptableOptions } from '../AdaptableOptions/AdaptableOptions';
 import { ChartRef, Column, GridApi, GridOptions, IRowNode, Module, RowModelType } from '@ag-grid-community/core';
 import { AdaptableLogger } from './AdaptableLogger';
@@ -122,6 +123,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
      * Temporary, these are MIGRATION technical debts, and should be removed as soon as possible
      */
     private adaptableStatusPanelKeys;
+    _PRIVATE_adaptableJSXElement: JSX.Element;
     constructor();
     static forEachAdaptable(fn: (adaptable: AdaptableAgGrid) => void): void;
     private static collectInstance;

package/src/agGrid/AdaptableAgGrid.js

@@ -397,7 +397,19 @@ export class AdaptableAgGrid {
         const adaptableContainerElem = this.getAdaptableContainerElement();
         if (adaptableContainerElem != null) {
             adaptableContainerElem.innerHTML = '';
-            this.unmountReactRoot = this.renderReactRoot(AdaptableApp({ Adaptable: this }), adaptableContainerElem);
+            if (this.variant === 'react') {
+                /**
+                 * #no_additional_react_root
+                 * This is only used for the React variant
+                 * Where we don't want to create a new React render tree here
+                 * by rendering it as a React root, but instead we want to
+                 * render it as is in the React tree of our AdaptableReact component
+                 */
+                this._PRIVATE_adaptableJSXElement = AdaptableApp({ Adaptable: this });
+            }
+            else {
+                this.unmountReactRoot = this.renderReactRoot(AdaptableApp({ Adaptable: this }), adaptableContainerElem);
+            }
         }
         this.lifecycleState = 'ready';
         this.forPlugins((plugin) => plugin.onAdaptableReady(this, this.adaptableOptions));
@@ -3772,7 +3784,7 @@ export class AdaptableAgGrid {
                 // same grid column state as a previous,
                 // so no need to update, as the layout has already been updated
                 // for this grid column state
-                console.log('same state as before');
+                // console.log('same state as before');
                 return;
             }
             this.previousAgGridLayoutState = stringifiedLayoutState;

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1721129456634 || Date.now(),
-    VERSION: "18.1.9" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1721302170891 || Date.now(),
+    VERSION: "18.1.10" || '--current-version--',
 };

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

@@ -2751,14 +2751,6 @@ export declare const ADAPTABLE_METAMODEL: {
             gridInfo: string;
             defVal: string;
             noCode?: undefined;
-        } | {
-            name: string;
-            kind: string;
-            desc: string;
-            isOpt: boolean;
-            gridInfo?: undefined;
-            noCode?: undefined;
-            defVal?: undefined;
         })[];
     };
     DataFormatDataType: {