@adaptabletools/adaptable 22.0.0-canary.7 → 22.0.0-canary.9

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
@@ -39,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[];
     }>;
-    manageGridRows(dataRows: {
-        add?: any[];
-        update?: any[];
-        delete?: 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;

package/src/agGrid/AdaptableAgGrid.js

@@ -6,6 +6,7 @@ import { PrimaryKeyDocsLink } from '../Utilities/Constants/DocumentationLinkCons
 import StringExtensions from '../Utilities/Extensions/StringExtensions';
 import Emitter from '../Utilities/Emitter';
 import { applyDefaultAdaptableOptions } from '../AdaptableOptions/DefaultAdaptableOptions';
+import { resolveContainerElement } from '../Utilities/resolveContainerElement';
 import { AgGridAdapter } from './AgGridAdapter';
 import * as GeneralConstants from '../Utilities/Constants/GeneralConstants';
 import { AG_GRID_GRAND_TOTAL_ROW_ID, AG_GRID_GROUPED_COLUMN, AUTOGENERATED_PK_COLUMN, ERROR_LAYOUT, GROUP_PATH_SEPARATOR, HALF_SECOND, QUARTER_SECOND, } from '../Utilities/Constants/GeneralConstants';
@@ -221,6 +222,8 @@ export class AdaptableAgGrid {
      * Temporary, these are MIGRATION technical debts, and should be removed as soon as possible
      */
     adaptableStatusPanelKeys = [];
+    adaptableStatusPanelDefs = [];
+    hasAdaptableStatusBar;
     // see #no_additional_react_root
     _PRIVATE_adaptableJSXElement;
     _prevLayout;
@@ -755,6 +758,82 @@ export class AdaptableAgGrid {
     hideQuickFilter() {
         this.agGridAdapter.getAgGridApi().setGridOption('floatingFiltersHeight', 0);
     }
+    showAdaptableToolPanel() {
+        if (!this.hasAdaptableToolPanel) {
+            // don't re-add the ToolPanel if it's hidden by entitlement
+            if (this.api.entitlementApi.isModuleHiddenEntitlement('ToolPanel')) {
+                return;
+            }
+            const currentSideBar = this.agGridAdapter.getGridOption('sideBar');
+            if (currentSideBar?.toolPanels) {
+                const updatedSideBar = {
+                    ...currentSideBar,
+                    toolPanels: [...currentSideBar.toolPanels, this.buildAdaptableToolPanelDef()],
+                };
+                this.agGridAdapter.setGridOption('sideBar', updatedSideBar);
+                this.hasAdaptableToolPanel = true;
+            }
+        }
+    }
+    hideAdaptableToolPanel() {
+        if (this.hasAdaptableToolPanel) {
+            // close the tool panel if it's currently open
+            this.api.toolPanelApi.closeAdapTableToolPanel();
+            const currentSideBar = this.agGridAdapter.getGridOption('sideBar');
+            if (currentSideBar?.toolPanels) {
+                const updatedSideBar = {
+                    ...currentSideBar,
+                    toolPanels: currentSideBar.toolPanels.filter((toolPanelDef) => {
+                        if (typeof toolPanelDef === 'string') {
+                            return toolPanelDef !== GeneralConstants.ADAPTABLE_TOOLPANEL_ID;
+                        }
+                        return toolPanelDef.id !== GeneralConstants.ADAPTABLE_TOOLPANEL_ID;
+                    }),
+                };
+                this.agGridAdapter.setGridOption('sideBar', updatedSideBar);
+            }
+            this.hasAdaptableToolPanel = false;
+        }
+    }
+    buildAdaptableToolPanelDef() {
+        return {
+            id: GeneralConstants.ADAPTABLE_TOOLPANEL_ID,
+            toolPanel: GeneralConstants.ADAPTABLE_TOOLPANEL_COMPONENT,
+            labelDefault: GeneralConstants.ADAPTABLE,
+            labelKey: 'adaptable',
+            iconKey: 'menu',
+            width: UIHelper.getAdaptableToolPanelWidth(),
+            minWidth: UIHelper.getAdaptableToolPanelWidth(),
+        };
+    }
+    showAdaptableStatusBar() {
+        if (!this.hasAdaptableStatusBar && this.adaptableStatusPanelDefs.length > 0) {
+            const currentStatusBar = this.agGridAdapter.getGridOption('statusBar');
+            if (currentStatusBar) {
+                // filter out any Adaptable panels that may already exist to avoid duplicates
+                const existingNonAdaptablePanels = (currentStatusBar.statusPanels ?? []).filter((panel) => !this.adaptableStatusPanelKeys.includes(panel.key));
+                const updatedStatusBar = {
+                    ...currentStatusBar,
+                    statusPanels: [...existingNonAdaptablePanels, ...this.adaptableStatusPanelDefs],
+                };
+                this.agGridAdapter.setGridOption('statusBar', updatedStatusBar);
+                this.hasAdaptableStatusBar = true;
+            }
+        }
+    }
+    hideAdaptableStatusBar() {
+        if (this.hasAdaptableStatusBar) {
+            const currentStatusBar = this.agGridAdapter.getGridOption('statusBar');
+            if (currentStatusBar?.statusPanels) {
+                const updatedStatusBar = {
+                    ...currentStatusBar,
+                    statusPanels: currentStatusBar.statusPanels.filter((panel) => !this.adaptableStatusPanelKeys.includes(panel.key)),
+                };
+                this.agGridAdapter.setGridOption('statusBar', updatedStatusBar);
+            }
+            this.hasAdaptableStatusBar = false;
+        }
+    }
     normalizeAdaptableOptions(adaptableOptions) {
         if (this.hasAutogeneratedPrimaryKey) {
             this.logger.warn(`Autogenerated primary key is enabled (adaptableOptions.autogeneratedPrimaryKey = true). This should be a last resort as it limits some Adaptable features. See: ${PrimaryKeyDocsLink}`);
@@ -1157,16 +1236,7 @@ export class AdaptableAgGrid {
                     return original_sideBar;
                 }
                 const isAdaptableToolPanelHidden = this.api.entitlementApi.isModuleHiddenEntitlement('ToolPanel');
-                const adaptableToolPanelDef = {
-                    id: GeneralConstants.ADAPTABLE_TOOLPANEL_ID,
-                    toolPanel: GeneralConstants.ADAPTABLE_TOOLPANEL_COMPONENT,
-                    labelDefault: GeneralConstants.ADAPTABLE,
-                    labelKey: 'adaptable',
-                    iconKey: 'menu',
-                    width: UIHelper.getAdaptableToolPanelWidth(),
-                    minWidth: UIHelper.getAdaptableToolPanelWidth(),
-                    // maxWidth = undefined,
-                };
+                const adaptableToolPanelDef = this.buildAdaptableToolPanelDef();
                 const mapToolPanelDefs = (toolPanelDefs = []) => {
                     // if it's an alias for the adaptable tool panel, map it to a ToolPanelDef, otherwise return it as it is
                     return toolPanelDefs.map((toolPanelDef) => toolPanelDef === GeneralConstants.ADAPTABLE_TOOLPANEL_ID
@@ -1241,19 +1311,29 @@ export class AdaptableAgGrid {
             this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'statusBar', (original_statusBar) => {
                 const statusPanels = (original_statusBar?.statusPanels ?? [])?.map((statusPanel) => {
                     if (statusPanel.statusPanel === ADAPTABLE_STATUS_PANEL) {
+                        if (!statusPanel.key) {
+                            this.logger.consoleWarn('AdaptableStatusPanel is missing a "key" property. This panel will not be managed by HideAdaptableUI. Please provide a unique key.');
+                            return statusPanel;
+                        }
                         this.adaptableStatusPanelKeys.push(statusPanel.key);
                         const context = {
                             Key: statusPanel.key,
                         };
-                        return {
+                        const adaptablePanelDef = {
                             ...statusPanel,
                             statusPanel: createAgStatusPanelComponent(AdaptableStatusBar, this, context),
                         };
+                        this.adaptableStatusPanelDefs.push(adaptablePanelDef);
+                        return adaptablePanelDef;
                     }
                     return statusPanel;
                 });
                 return { ...original_statusBar, statusPanels };
             });
+            this.hasAdaptableStatusBar = this.adaptableStatusPanelKeys.length > 0;
+        }
+        else {
+            this.hasAdaptableStatusBar = false;
         }
         /**
          * `getRowStyle`
@@ -1441,21 +1521,22 @@ export class AdaptableAgGrid {
     useRowNodeLookUp() {
         return this.agGridAdapter.getAgGridApi().getGridOption('getRowId') != undefined;
     }
+    buildInitContainerContext() {
+        return {
+            adaptableId: this.adaptableOptions?.adaptableId ?? '',
+            adaptableStateKey: this.adaptableOptions?.adaptableStateKey ?? '',
+            adaptableContext: this.adaptableOptions?.adaptableContext,
+        };
+    }
     getAgGridContainerElement() {
         if (!this.DANGER_USE_GETTER_agGridContainerElement) {
-            this.DANGER_USE_GETTER_agGridContainerElement =
-                typeof this.adaptableOptions?.containerOptions?.agGridContainer === 'string'
-                    ? document.getElementById(this.adaptableOptions?.containerOptions?.agGridContainer)
-                    : this.adaptableOptions?.containerOptions?.agGridContainer;
+            this.DANGER_USE_GETTER_agGridContainerElement = resolveContainerElement(this.adaptableOptions?.containerOptions?.agGridContainer, this.buildInitContainerContext());
         }
         return this.DANGER_USE_GETTER_agGridContainerElement;
     }
     getAdaptableContainerElement() {
         if (!this.DANGER_USE_GETTER_adaptableContainerElement) {
-            this.DANGER_USE_GETTER_adaptableContainerElement =
-                typeof this.adaptableOptions?.containerOptions?.adaptableContainer === 'string'
-                    ? document.getElementById(this.adaptableOptions?.containerOptions?.adaptableContainer)
-                    : this.adaptableOptions?.containerOptions?.adaptableContainer;
+            this.DANGER_USE_GETTER_adaptableContainerElement = resolveContainerElement(this.adaptableOptions?.containerOptions?.adaptableContainer, this.buildInitContainerContext());
         }
         return this.DANGER_USE_GETTER_adaptableContainerElement;
     }
@@ -2454,31 +2535,31 @@ export class AdaptableAgGrid {
             });
         }
     }
-    async manageGridRows(dataRows, config = {}) {
+    async manageGridRows(dataRowConfig, dataUpdateConfig = {}) {
         const result = {
             addedRows: [],
             updatedRows: [],
             removedRows: [],
         };
-        if (!dataRows) {
+        if (!dataRowConfig || !dataRowConfig.dataRows) {
             return result;
         }
-        const addDataRows = dataRows.add;
-        const updateDataRows = dataRows.update;
-        const removeDataRows = dataRows.delete;
+        const addDataRows = dataRowConfig.dataRows.add;
+        const updateDataRows = dataRowConfig.dataRows.update;
+        const removeDataRows = dataRowConfig.dataRows.delete;
         if (this.hasAutogeneratedPrimaryKey) {
             this.addSyntheticPrimaryKeyIfMissing(addDataRows);
         }
-        if (config.runAsync) {
+        if (dataUpdateConfig.runAsync) {
             return new Promise((resolve) => {
                 this.applyAgGridTransactionAsync({
                     update: updateDataRows,
                     add: addDataRows,
                     remove: removeDataRows,
-                    addIndex: config.addIndex,
+                    addIndex: dataUpdateConfig.addIndex,
                 }, (transaction) => {
-                    if (typeof config.callback === 'function') {
-                        config.callback(transaction);
+                    if (typeof dataUpdateConfig.callback === 'function') {
+                        dataUpdateConfig.callback(transaction);
                     }
                     if (transaction?.add) {
                         this.updateRowGroupsAndColumnGroupsExpandedState();
@@ -2489,7 +2570,7 @@ export class AdaptableAgGrid {
                         removedRows: transaction?.remove,
                     });
                 });
-                if (config.flushAsync) {
+                if (dataUpdateConfig.flushAsync) {
                     this.agGridAdapter.getAgGridApi().flushAsyncTransactions();
                 }
             });
@@ -2499,12 +2580,12 @@ export class AdaptableAgGrid {
                 update: updateDataRows,
                 add: addDataRows,
                 remove: removeDataRows,
-                addIndex: config.addIndex,
+                addIndex: dataUpdateConfig.addIndex,
             });
             if (transaction?.add) {
                 this.updateRowGroupsAndColumnGroupsExpandedState();
             }
-            if (config.flushAsync) {
+            if (dataUpdateConfig.flushAsync) {
                 this.agGridAdapter.getAgGridApi().flushAsyncTransactions();
             }
             return Promise.resolve({

package/src/agGrid/AgGridFloatingFilterAdapter.js

@@ -54,7 +54,7 @@ export const AgGridFloatingFilterAdapterFactory = (adaptable) => {
         // Find and update header cell
         const headerCell = findParentWithClass(filterContainer, 'ag-header-cell', stopClasses);
         if (headerCell?.classList.contains('ag-floating-filter')) {
-            headerCell.style.padding = 'var(--ab-space-1)';
+            headerCell.style.padding = 'var(--ab-base-space)';
         }
     }
     return class AgGridFloatingFilterAdapter {

package/src/agGrid/AgGridMenuAdapter.js

@@ -17,12 +17,16 @@ export class AgGridMenuAdapter {
         this._adaptableInstance = null;
     }
     buildColumnMenu(params, originalGetMainMenuItems) {
-        const columnMenuOptions = this.adaptableOptions.columnMenuOptions;
         const agGridMenuItems = (params.defaultItems ? [...params.defaultItems] : []);
         if (!params.column) {
             // return only AG Grid context if the Adaptable column is not found (should not happen)
             return agGridMenuItems;
         }
+        // If Adaptable UI is hidden, return only AG Grid default items
+        if (!this.adaptableApi.userInterfaceApi.isAdaptableUIVisible()) {
+            return agGridMenuItems;
+        }
+        const columnMenuOptions = this.adaptableOptions.columnMenuOptions;
         const adaptableColumn = this.adaptableApi.columnApi.getColumnWithColumnId(params.column?.getColId());
         const menuContext = this.createColumnMenuContextObject(adaptableColumn, params.column);
         /**
@@ -60,6 +64,10 @@ export class AgGridMenuAdapter {
         if (!params.column) {
             return [];
         }
+        // If Adaptable UI is hidden, return only AG Grid default items
+        if (!this.adaptableApi.userInterfaceApi.isAdaptableUIVisible()) {
+            return (params.defaultItems ? [...params.defaultItems] : []);
+        }
         // we do this in order to refresh the internal state of selected cells (technically query the AG Grid cellRanges)
         // (right-click selected the current cell, but this was not reflected in the internal state of the selected cells)
         this._adaptableInstance.refreshSelectedCellsState();

package/src/components/CheckBox/index.js

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 const Square = (props) => {
     return React.createElement("div", { className: `ab-CheckBox__square ab-CheckBox__square--${props.type}` });
 };
-const CheckBox = ({ children, checked, onChange, value, name, disabled, readOnly, variant = 'default', gapDistance = 'var(--ab-space-1)', childrenPosition = 'end', as = 'label', ...props }) => {
+const CheckBox = ({ children, checked, onChange, value, name, disabled, readOnly, variant = 'default', gapDistance = 'var(--ab-base-space)', childrenPosition = 'end', as = 'label', ...props }) => {
     const [stateChecked, setStateChecked] = useState(false);
     const computedChecked = checked !== undefined ? checked : stateChecked;
     const onInputChange = (event) => {

package/src/components/Dropdown/Arrows.js

@@ -8,7 +8,7 @@ const Arrows = () => {
             // background: 'var(--ab-color-defaultbackground)',
             fill: 'var(--ab-cmp-dropdown__fill)',
             top: '50%',
-            right: 'var(--ab-space-1)',
+            right: 'var(--ab-base-space)',
             transform: 'translate3d(0px, -50%, 0px)',
             cursor: 'pointer',
         } },

package/src/components/ExpressionEditor/DataTableEditor.js

@@ -35,11 +35,11 @@ export const DataTableEditor = ({ fields, dataFormatter, data: initialData, type
             hasFriendlyNames && (React.createElement(CheckBox, { checked: showColumnIds, onChange: (checked) => setShowValues(checked), style: {
                     float: 'right',
                     margin: 0,
-                    paddingTop: 'var(--ab-space-1)',
-                    paddingBottom: 'var(--ab-space-1)',
+                    paddingTop: 'var(--ab-base-space)',
+                    paddingBottom: 'var(--ab-base-space)',
                 } }, labels?.showIds ?? 'Show Column IDs')),
             React.createElement(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: labels?.filterPlaceholder ?? 'Filter columns...', style: { flex: 1, marginBottom: 3 } })),
-        React.createElement(FormLayout, { className: "ab-ExpressionEditor__columns", gridColumnGap: "var(--ab-space-1)", gridRowGap: "var(--ab-space-1)", sizes: ['auto', '1fr'], style: { alignItems: 'stretch', overflow: 'auto' } }, fields
+        React.createElement(FormLayout, { className: "ab-ExpressionEditor__columns", gridColumnGap: "var(--ab-base-space)", gridRowGap: "var(--ab-base-space)", sizes: ['auto', '1fr'], style: { alignItems: 'stretch', overflow: 'auto' } }, fields
             .filter((field) => {
             if (!searchInputValue) {
                 return true;

package/src/components/FormLayout/index.js

@@ -14,7 +14,7 @@ const defaultColumns = {
 };
 const PLACEHOLDER = React.createElement("div", null);
 const FormLayout = (props) => {
-    let { placeholder = PLACEHOLDER, columns = ['label', 'children'], defaultComponent = Box, sizes = ['auto', '1fr'], gridColumnGap = 'var(--ab-space-2)', gridRowGap = 'var(--ab-space-2)', style, childrenToColumns = true, ...boxProps } = props;
+    let { placeholder = PLACEHOLDER, columns = ['label', 'children'], defaultComponent = Box, sizes = ['auto', '1fr'], gridColumnGap = 'calc(var(--ab-base-space) * 2)', gridRowGap = 'calc(var(--ab-base-space) * 2)', style, childrenToColumns = true, ...boxProps } = props;
     columns = columns.map((c) => {
         if (typeof c === 'string' || typeof c === 'number') {
             c = {

package/src/components/Select/Select.js

@@ -699,7 +699,7 @@ export const Select = function (props) {
                 valueContainer: (baseStyle) => {
                     return {
                         ...baseStyle,
-                        padding: props.size === 'small' ? `0 var(--ab-space-1)` : baseStyle.padding,
+                        padding: props.size === 'small' ? `0 var(--ab-base-space)` : baseStyle.padding,
                         ...props.styles?.valueContainer,
                     };
                 },

package/src/components/Tree/TreeDropdown/index.js

@@ -221,7 +221,7 @@ export function TreeDropdown(props) {
                     };
                 if (!hasChildren) {
                     // @ts-ignore - don't leave any space for the > expand icon, as there are no children
-                    treeListStyle['--infinite-group-row-column-nesting'] = 'var(--ab-space-2)';
+                    treeListStyle['--infinite-group-row-column-nesting'] = 'calc(var(--ab-base-space) * 2)';
                 }
                 const treeList = (React.createElement(TreeList, { primaryKey: props.primaryKey ?? 'id', treeFilterFunction: filterFunction, columnHeaderHeight: 30, onReady: ({ api }) => {
                         setTreeListApi(api);

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     NEXT_PUBLIC_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: 1770740667502 || Date.now(),
-    VERSION: "22.0.0-canary.7" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1770908579112 || Date.now(),
+    VERSION: "22.0.0-canary.9" || '--current-version--',
 };

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

@@ -314,6 +314,16 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt: boolean;
         }[];
     };
+    AdaptableColumnsContext: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
     AdaptableColumnSummary: {
         name: string;
         kind: string;
@@ -364,6 +374,11 @@ export declare const ADAPTABLE_METAMODEL: {
             ref: string;
         }[];
     };
+    AdaptableContainerValue: {
+        name: string;
+        kind: string;
+        desc: string;
+    };
     AdaptableContextMenuItem: {
         name: string;
         kind: string;
@@ -384,6 +399,16 @@ export declare const ADAPTABLE_METAMODEL: {
             desc: string;
         }[];
     };
+    AdaptableCSSSelector: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
     AdaptableCustomIcon: {
         name: string;
         kind: string;
@@ -889,6 +914,16 @@ export declare const ADAPTABLE_METAMODEL: {
             desc: string;
         }[];
     };
+    AdaptableRowContext: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
     AdaptableSaveStateFunction: {
         name: string;
         kind: string;
@@ -2244,6 +2279,11 @@ export declare const ADAPTABLE_METAMODEL: {
             ref: string;
         })[];
     };
+    ContainerContext: {
+        name: string;
+        kind: string;
+        desc: string;
+    };
     ContainerOptions: {
         name: string;
         kind: string;
@@ -4148,6 +4188,16 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt?: undefined;
         })[];
     };
+    InitContainerContext: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+        }[];
+    };
     InitialState: {
         name: string;
         kind: string;
@@ -6310,6 +6360,18 @@ export declare const ADAPTABLE_METAMODEL: {
             noCode?: undefined;
         })[];
     };
+    UserInterfaceState: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+            defVal: string;
+        }[];
+    };
     UserMenuItem: {
         name: string;
         kind: string;