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

package/src/AdaptableState/UserInterfaceState.d.ts

@@ -0,0 +1,14 @@
+import { BaseState } from './BaseState';
+/**
+ * Adaptable State Section for the User Interface
+ *
+ * Controls the visibility and behaviour of AdapTable UI elements
+ */
+export interface UserInterfaceState extends BaseState {
+    /**
+     * Whether to hide all AdapTable UI elements (Dashboard, Tool Panel, Status Bar, Column and Context Menus etc.)
+     *
+     * @defaultValue false
+     */
+    HideAdaptableUI?: boolean;
+}

package/src/AdaptableState/UserInterfaceState.js

@@ -0,0 +1 @@
+export {};

package/src/Api/GridApi.d.ts

@@ -2,7 +2,7 @@ import { SelectedCellInfo } from '../AdaptableState/Selection/SelectedCellInfo';
 import { SelectedRowInfo } from '../AdaptableState/Selection/SelectedRowInfo';
 import { ColumnSort } from '../AdaptableState/Common/ColumnSort';
 import { CellUpdateRequest, GridCell } from '../AdaptableState/Selection/GridCell';
-import { DataUpdateConfig } from '../AdaptableState/Common/DataUpdateConfig';
+import { DataRowConfig, DataUpdateConfig } from '../AdaptableState/Common/DataUpdateConfig';
 import { CellDataChangedInfo } from '../AdaptableState/Common/CellDataChangedInfo';
 import { CellHighlightInfo } from '../AdaptableState/Common/CellHighlightInfo';
 import { RowHighlightInfo } from '../AdaptableState/Common/RowHighlightInfo';
@@ -71,15 +71,11 @@ export interface GridApi {
      */
     deleteGridData(dataRows: any[], config?: DataUpdateConfig): Promise<IRowNode[]>;
     /**
-     * Applies a data transaction (add, update, remove) to AdapTable (and AG Grid)
-     * @param dataRows - Rows to add, update or remove (via transaction)
-     * @param config - batch option and callback function to run post transaction
+     * Adds, Updates or Deletes rows in AdapTable (and AG Grid) in single transaction
+     * @param dataRowConfig - Rows to add, update or remove
+     * @param dataUpdateConfig - batch option and callback function to run post transaction
      */
-    manageGridData(dataRows: {
-        add?: any[];
-        update?: any[];
-        delete?: any[];
-    }, config?: DataUpdateConfig): Promise<{
+    manageGridData(dataRowConfig: DataRowConfig, dataUpdateConfig?: DataUpdateConfig): Promise<{
         addedRows: IRowNode[];
         updatedRows: IRowNode[];
         removedRows: IRowNode[];

package/src/Api/Implementation/AlertApiImpl.js

@@ -7,6 +7,7 @@ import ObjectFactory from '../../Utilities/ObjectFactory';
 import { isAdaptableCellChangedAlert, isAdaptableRowChangedAlert, } from '../../AdaptableState/Common/AdaptableAlert';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import { AlertInternalApi } from '../Internal/AlertInternalApi';
+import { resolveContainerElement } from '../../Utilities/resolveContainerElement';
 export class AlertApiImpl extends ApiBase {
     internalApi;
     constructor(_adaptable) {
@@ -62,12 +63,7 @@ export class AlertApiImpl extends ApiBase {
             }
             // Show Alert in a Div (if one has been set)
             if (alertProperties.ShowInDiv) {
-                let alertDiv;
-                let optionsDiv = this.getContainerOptions().alertContainer;
-                if (optionsDiv) {
-                    alertDiv =
-                        typeof optionsDiv === 'string' ? document.getElementById(optionsDiv) : optionsDiv;
-                }
+                const alertDiv = resolveContainerElement(this.getContainerOptions().alertContainer, this.getAdaptableInternalApi().buildBaseContext());
                 if (alertDiv) {
                     let alertString = alertToShow.header + ': ' + alertToShow.message;
                     alertDiv.innerHTML = alertString;

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

@@ -4,7 +4,7 @@ import { SelectedCellInfo } from '../../AdaptableState/Selection/SelectedCellInf
 import { SelectedRowInfo } from '../../AdaptableState/Selection/SelectedRowInfo';
 import { CellUpdateRequest, GridCell } from '../../AdaptableState/Selection/GridCell';
 import { ColumnSort } from '../../AdaptableState/Common/ColumnSort';
-import { DataUpdateConfig } from '../../AdaptableState/Common/DataUpdateConfig';
+import { DataRowConfig, DataUpdateConfig } from '../../AdaptableState/Common/DataUpdateConfig';
 import { CellHighlightInfo } from '../../AdaptableState/Common/CellHighlightInfo';
 import { RowHighlightInfo } from '../../AdaptableState/Common/RowHighlightInfo';
 import { ColDef, ColGroupDef, Column, ColumnState, IRowNode, RowModelType } from 'ag-grid-enterprise';
@@ -35,11 +35,7 @@ export declare class GridApiImpl extends ApiBase implements GridApi {
     addGridData(dataRows: any[], dataUpdateConfig?: DataUpdateConfig): Promise<IRowNode[]>;
     undoCellEdit(cellDataChangedInfo: CellDataChangedInfo): boolean;
     deleteGridData(dataRows: any[], dataUpdateConfig?: DataUpdateConfig): Promise<IRowNode[]>;
-    manageGridData(dataRows: {
-        add?: any[];
-        update?: any[];
-        delete?: any[];
-    }, config?: DataUpdateConfig): Promise<{
+    manageGridData(dataRowConfig: DataRowConfig, dataUpdateConfig?: DataUpdateConfig): Promise<{
         addedRows: IRowNode[];
         updatedRows: IRowNode[];
         removedRows: IRowNode[];

package/src/Api/Implementation/GridApiImpl.js

@@ -95,18 +95,18 @@ export class GridApiImpl extends ApiBase {
         }
         return [];
     }
-    async manageGridData(dataRows, config) {
-        const transactionResult = await this._adaptable.manageGridRows(dataRows, config);
+    async manageGridData(dataRowConfig, dataUpdateConfig) {
+        const transactionResult = await this._adaptable.manageGridRows(dataRowConfig, dataUpdateConfig);
         if (Array.isArray(transactionResult.removedRows) && transactionResult.removedRows.length) {
-            const rowDataChangedInfo = this.getAdaptableInternalApi().buildRowDataChangedInfo(dataRows.delete, transactionResult.removedRows, 'Delete');
+            const rowDataChangedInfo = this.getAdaptableInternalApi().buildRowDataChangedInfo(dataRowConfig.dataRows.delete, transactionResult.removedRows, 'Delete');
             this.getAdaptableInternalApi().getDataService().CreateRowDataChangedEvent(rowDataChangedInfo);
         }
         if (Array.isArray(transactionResult.updatedRows) && transactionResult.updatedRows.length) {
-            const rowDataChangedInfo = this.getAdaptableInternalApi().buildRowDataChangedInfo(dataRows.update, transactionResult.updatedRows, 'Update');
+            const rowDataChangedInfo = this.getAdaptableInternalApi().buildRowDataChangedInfo(dataRowConfig.dataRows.update, transactionResult.updatedRows, 'Update');
             this.getAdaptableInternalApi().getDataService().CreateRowDataChangedEvent(rowDataChangedInfo);
         }
         if (Array.isArray(transactionResult.addedRows) && transactionResult.addedRows.length) {
-            const rowDataChangedInfo = this.getAdaptableInternalApi().buildRowDataChangedInfo(dataRows.add, transactionResult.addedRows, 'Add');
+            const rowDataChangedInfo = this.getAdaptableInternalApi().buildRowDataChangedInfo(dataRowConfig.dataRows.add, transactionResult.addedRows, 'Add');
             this.getAdaptableInternalApi().getDataService().CreateRowDataChangedEvent(rowDataChangedInfo);
         }
         return transactionResult;
@@ -607,9 +607,9 @@ export class GridApiImpl extends ApiBase {
     showTransposedView(transposeConfig = {}) {
         const transposedColumnId = transposeConfig.transposedColumnId ?? this.getOptionsApi().getPrimaryKey();
         const hideTransposedColumn = transposeConfig.hideTransposedColumn ?? true;
-        const visibleColumns = transposeConfig.visibleColumns ?? false;
-        const visibleRows = transposeConfig.visibleRows ?? false;
         const autosize = transposeConfig.autosize ?? true;
+        const columnsToTranspose = transposeConfig.columnsToTranspose;
+        const rowsToTranspose = transposeConfig.rowsToTranspose;
         this.getAdaptableInternalApi().showPopupWindow({
             id: WINDOW_SHOW_TRANSPOSED_VIEW,
             factoryId: WINDOW_SHOW_TRANSPOSED_VIEW,
@@ -618,9 +618,9 @@ export class GridApiImpl extends ApiBase {
             popupProps: {
                 transposedColumnId,
                 hideTransposedColumn,
-                visibleColumns,
-                visibleRows,
                 autosize,
+                columnsToTranspose,
+                rowsToTranspose,
             },
         });
     }

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

@@ -24,6 +24,7 @@ export declare class LayoutApiImpl extends ApiBase implements LayoutApi {
     getCurrentLayoutColumnSort(columnId: string): ColumnSort['SortOrder'] | null;
     getCurrentLayoutName(): string;
     getLayoutByName(layoutName: string): Layout | null;
+    setExtendedLayout(extendedLayout: ExtendedLayout): void;
     createOrUpdateExtendedLayout(extendedLayoutInfo: ExtendedLayout): void;
     getExtendedLayoutByName(layoutName: string): ExtendedLayout | undefined;
     cloneExtendedLayout(extendedLayoutToClone: ExtendedLayout, layoutName: string): ExtendedLayout | false;

package/src/Api/Implementation/LayoutApiImpl.js

@@ -90,6 +90,9 @@ export class LayoutApiImpl extends ApiBase {
             }
         }
     }
+    setExtendedLayout(extendedLayout) {
+        this.setLayout(extendedLayout.Layout.Name);
+    }
     createOrUpdateExtendedLayout(extendedLayoutInfo) {
         const config = {
             includeLayoutNotExtendedObjects: true,

package/src/Api/Implementation/SystemStatusApiImpl.js

@@ -7,6 +7,7 @@ import { createElement } from 'react';
 import UIHelper from '../../View/UIHelper';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import { SystemStatusInternalApi } from '../Internal/SystemStatusInternalApi';
+import { resolveContainerElement } from '../../Utilities/resolveContainerElement';
 export class SystemStatusApiImpl extends ApiBase {
     systemStatusDiv;
     internalApi;
@@ -48,11 +49,7 @@ export class SystemStatusApiImpl extends ApiBase {
     }
     displayMessageInDiv(statusMessage, statusFurtherInformation, messageType) {
         if (!this.systemStatusDiv) {
-            let optionsDiv = this.getContainerOptions().systemStatusContainer;
-            if (optionsDiv) {
-                this.systemStatusDiv =
-                    typeof optionsDiv === 'string' ? document.getElementById(optionsDiv) : optionsDiv;
-            }
+            this.systemStatusDiv = resolveContainerElement(this.getContainerOptions().systemStatusContainer, this.getAdaptableInternalApi().buildBaseContext());
         }
         if (this.systemStatusDiv) {
             if (StringExtensions.IsNotNullOrEmpty(statusFurtherInformation)) {

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

@@ -6,6 +6,7 @@ import { UserInterfaceInternalApi } from '../Internal/UserInterfaceInternalApi';
 import { UserInterfaceApi } from '../UserInterfaceApi';
 import { ProgressIndicatorConfig } from '../../AdaptableState/Common/ProgressIndicatorConfig';
 import { ApiBase } from './ApiBase';
+import { UserInterfaceState } from '../../AdaptableState/UserInterfaceState';
 export declare class UserInterfaceApiImpl extends ApiBase implements UserInterfaceApi {
     internalApi: UserInterfaceInternalApi;
     private showProgressIndicatorTimeout;
@@ -26,4 +27,8 @@ export declare class UserInterfaceApiImpl extends ApiBase implements UserInterfa
         close: () => void;
     };
     closeCustomWindowPopup(windowId: string): void;
+    getUserInterfaceState(): UserInterfaceState;
+    isAdaptableUIVisible(): boolean;
+    hideAdaptableUI(): void;
+    showAdaptableUI(): void;
 }

package/src/Api/Implementation/UserInterfaceApiImpl.js

@@ -4,6 +4,7 @@ import { CUSTOM_WINDOW_FACTORY_ID } from '../../View/Components/Popups/WindowPop
 import { UserInterfaceInternalApi } from '../Internal/UserInterfaceInternalApi';
 import { ApiBase } from './ApiBase';
 import { ProgressIndicatorHide, ProgressIndicatorShow, } from '../../Redux/ActionsReducers/PopupRedux';
+import * as UserInterfaceRedux from '../../Redux/ActionsReducers/UserInterfaceRedux';
 export class UserInterfaceApiImpl extends ApiBase {
     internalApi;
     showProgressIndicatorTimeout = null;
@@ -128,4 +129,16 @@ export class UserInterfaceApiImpl extends ApiBase {
     closeCustomWindowPopup(windowId) {
         this.dispatchAction(PopupRedux.PopupHideWindow(windowId));
     }
+    getUserInterfaceState() {
+        return this.getAdaptableState().UserInterface;
+    }
+    isAdaptableUIVisible() {
+        return !(this.getUserInterfaceState().HideAdaptableUI ?? false);
+    }
+    hideAdaptableUI() {
+        this.dispatchAction(UserInterfaceRedux.UserInterfaceSetHideAdaptableUI(true));
+    }
+    showAdaptableUI() {
+        this.dispatchAction(UserInterfaceRedux.UserInterfaceSetHideAdaptableUI(false));
+    }
 }

package/src/Api/LayoutApi.d.ts

@@ -57,6 +57,12 @@ export interface LayoutApi {
      */
     getLayoutByName(layoutName: string): Layout | null;
     /**
+     * Sets (i.e. selects) the Extended Layout
+     * @param extendedLayout Extended Layout to set
+     */
+    setExtendedLayout(extendedLayout: ExtendedLayout): void;
+    /**
+     *
      * Retrieves Layout with the given name
      * @param layoutName Layout to retrieve
      * @returns layout

package/src/Api/UserInterfaceApi.d.ts

@@ -3,6 +3,7 @@ import { AdaptableObject, AdaptableObjectTag } from '../AdaptableState/Common/Ad
 import { AdaptableModule, CustomIcon } from '../types';
 import { CustomWindowConfig } from '../AdaptableState/Common/CustomWindowConfig';
 import { ProgressIndicatorConfig } from '../AdaptableState/Common/ProgressIndicatorConfig';
+import { UserInterfaceState } from '../AdaptableState/UserInterfaceState';
 /**
  * Functions relating to User Interface section of Adaptable State
  */
@@ -78,4 +79,20 @@ export interface UserInterfaceApi {
      * @param windowId window popup id
      */
     closeCustomWindowPopup(windowId: string): void;
+    /**
+     * Retrieves the current User Interface State
+     */
+    getUserInterfaceState(): UserInterfaceState;
+    /**
+     * Returns whether the AdapTable UI is currently visible
+     */
+    isAdaptableUIVisible(): boolean;
+    /**
+     * Hides all AdapTable UI elements (Dashboard, Tool Panel, Status Bar, Column and Context Menus etc.)
+     */
+    hideAdaptableUI(): void;
+    /**
+     * Shows all AdapTable UI elements (Dashboard, Tool Panel, Status Bar, Column and Context Menus etc.)
+     */
+    showAdaptableUI(): void;
 }

package/src/Redux/ActionsReducers/UserInterfaceRedux.d.ts

@@ -0,0 +1,11 @@
+import * as Redux from 'redux';
+import { UserInterfaceState } from '../../AdaptableState/UserInterfaceState';
+/**
+ * @ReduxAction Sets whether all AdapTable UI elements are hidden
+ */
+export declare const USER_INTERFACE_SET_HIDE_ADAPTABLE_UI = "USER_INTERFACE_SET_HIDE_ADAPTABLE_UI";
+export interface UserInterfaceSetHideAdaptableUIAction extends Redux.Action {
+    hideAdaptableUI: boolean;
+}
+export declare const UserInterfaceSetHideAdaptableUI: (hideAdaptableUI: boolean) => UserInterfaceSetHideAdaptableUIAction;
+export declare const UserInterfaceReducer: Redux.Reducer<UserInterfaceState>;

package/src/Redux/ActionsReducers/UserInterfaceRedux.js

@@ -0,0 +1,21 @@
+/**
+ * @ReduxAction Sets whether all AdapTable UI elements are hidden
+ */
+export const USER_INTERFACE_SET_HIDE_ADAPTABLE_UI = 'USER_INTERFACE_SET_HIDE_ADAPTABLE_UI';
+export const UserInterfaceSetHideAdaptableUI = (hideAdaptableUI) => ({
+    type: USER_INTERFACE_SET_HIDE_ADAPTABLE_UI,
+    hideAdaptableUI,
+});
+const initialState = {
+    HideAdaptableUI: false,
+};
+export const UserInterfaceReducer = (state = initialState, action) => {
+    switch (action.type) {
+        case USER_INTERFACE_SET_HIDE_ADAPTABLE_UI:
+            return Object.assign({}, state, {
+                HideAdaptableUI: action.hideAdaptableUI,
+            });
+        default:
+            return state;
+    }
+};

package/src/Redux/Store/AdaptableStore.js

@@ -38,6 +38,7 @@ import * as InternalRedux from '../ActionsReducers/InternalRedux';
 import * as TeamSharingRedux from '../ActionsReducers/TeamSharingRedux';
 import * as ThemeRedux from '../ActionsReducers/ThemeRedux';
 import * as ToolPanelRedux from '../ActionsReducers/ToolPanelRedux';
+import * as UserInterfaceRedux from '../ActionsReducers/UserInterfaceRedux';
 import { areAdaptableProfileTracksEnabled, getMarker } from '../../devTools';
 import { isAdaptableSharedEntity, isCustomSharedEntity, } from '../../AdaptableState/TeamSharingState';
 import { buildAdaptableStateFunctionConfig } from './buildAdaptableStateFunctionConfig';
@@ -121,6 +122,7 @@ export class AdaptableStore {
             TeamSharing: TeamSharingRedux.TeamSharingReducer,
             Theme: ThemeRedux.ThemeReducer,
             ToolPanel: ToolPanelRedux.ToolPanelReducer,
+            UserInterface: UserInterfaceRedux.UserInterfaceReducer,
         };
         // allow plugins to participate in the root reducer
         adaptable.forPlugins((plugin) => {
@@ -992,6 +994,31 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                     module.setUpScheduleJobs();
                     return returnAction;
                 }
+                /*******************
+                 * USER INTERFACE ACTIONS
+                 *******************/
+                case UserInterfaceRedux.USER_INTERFACE_SET_HIDE_ADAPTABLE_UI: {
+                    const returnAction = next(action);
+                    const { hideAdaptableUI } = action;
+                    // Hide or show Dashboard
+                    middlewareAPI.dispatch(DashboardRedux.DashboardSetIsHidden(hideAdaptableUI));
+                    // Hide or show Adaptable ToolPanel in the AG Grid sidebar
+                    if (hideAdaptableUI) {
+                        adaptable.hideAdaptableToolPanel();
+                    }
+                    else {
+                        adaptable.showAdaptableToolPanel();
+                    }
+                    // Hide or show Adaptable StatusBar panels
+                    if (hideAdaptableUI) {
+                        adaptable.hideAdaptableStatusBar();
+                    }
+                    else {
+                        adaptable.showAdaptableStatusBar();
+                    }
+                    // Column and Context Menus are handled in the AgGridMenuAdapter
+                    return returnAction;
+                }
                 /*******************
                  * DASHBOARD ACTIONS
                  *******************/

package/src/Utilities/resolveContainerElement.d.ts

@@ -0,0 +1,23 @@
+import type { AdaptableContainerValue, ContainerContext, InitContainerContext } from '../AdaptableOptions/ContainerOptions';
+/**
+ * The union type representing any container option value (static or function).
+ */
+type AnyContainerOption = AdaptableContainerValue | ((context: any) => AdaptableContainerValue);
+/**
+ * Resolves a container option value to an `HTMLElement`.
+ *
+ * Resolution order:
+ * 1. If `container` is `null`/`undefined`, returns `null`.
+ * 2. If `container` is a function, it is called with the provided `context` and the result is resolved.
+ * 3. If the value is an `HTMLElement`, it is returned directly.
+ * 4. If the value is an `AdaptableCSSSelector` (`{ selector: string }`), `document.querySelectorAll` is used.
+ *    If multiple elements match, the first is returned and a console warning is logged.
+ * 5. If the value is a `string`, it is treated as an element ID and `document.getElementById` is used.
+ *
+ * @param container - The container reference to resolve.
+ * @param context - Optional context passed to the function form of the container.
+ * @param doc - The document to query against (defaults to `globalThis.document`).
+ * @returns The resolved `HTMLElement`, or `null` if not found.
+ */
+export declare function resolveContainerElement(container: AnyContainerOption | undefined | null, context?: ContainerContext | InitContainerContext, doc?: Document): HTMLElement | null;
+export {};

package/src/Utilities/resolveContainerElement.js

@@ -0,0 +1,44 @@
+/**
+ * Resolves a container option value to an `HTMLElement`.
+ *
+ * Resolution order:
+ * 1. If `container` is `null`/`undefined`, returns `null`.
+ * 2. If `container` is a function, it is called with the provided `context` and the result is resolved.
+ * 3. If the value is an `HTMLElement`, it is returned directly.
+ * 4. If the value is an `AdaptableCSSSelector` (`{ selector: string }`), `document.querySelectorAll` is used.
+ *    If multiple elements match, the first is returned and a console warning is logged.
+ * 5. If the value is a `string`, it is treated as an element ID and `document.getElementById` is used.
+ *
+ * @param container - The container reference to resolve.
+ * @param context - Optional context passed to the function form of the container.
+ * @param doc - The document to query against (defaults to `globalThis.document`).
+ * @returns The resolved `HTMLElement`, or `null` if not found.
+ */
+export function resolveContainerElement(container, context, doc = globalThis.document) {
+    if (container == null) {
+        return null;
+    }
+    // Unwrap function form — pass context if the container is a function
+    const value = typeof container === 'function' ? container(context) : container;
+    // Guard against null/undefined returned by a callback (e.g. document.getElementById(...))
+    if (value == null) {
+        return null;
+    }
+    // Direct HTMLElement reference
+    if (value instanceof HTMLElement) {
+        return value;
+    }
+    // CSS Selector object
+    if (typeof value === 'object' && 'selector' in value) {
+        const matches = doc.querySelectorAll(value.selector);
+        if (matches.length > 1) {
+            console.warn(`[AdapTable] CSS selector "${value.selector}" matched ${matches.length} elements. Using the first match. Consider using a more specific selector.`);
+        }
+        return matches[0] ?? null;
+    }
+    // String element ID
+    if (typeof value === 'string') {
+        return doc.getElementById(value);
+    }
+    return null;
+}

package/src/View/Components/ColumnFilter/components/ColumnFilterInput.js

@@ -93,7 +93,7 @@ export const ColumnFilterInput = (props) => {
     return (React.createElement(AdaptableInput, { style: filterType === 'floating'
             ? {
                 width: '100%',
-                padding: 'var(--ab-space-1)',
+                padding: 'var(--ab-base-space)',
                 borderRadius: 0,
                 border: 'none',
             }

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopup.js

@@ -9,6 +9,7 @@ import { AdaptablePopupBody } from './AdaptablePopupBody';
 import { useAdaptable } from '../../../AdaptableContext';
 import { CustomSettingsPanelView } from './CustomSettingsPanelView';
 import { useMenuItems } from './useMenuItems';
+import { resolveContainerElement } from '../../../../Utilities/resolveContainerElement';
 import { AdaptablePopupDialog } from './AdaptablePopupDialog';
 import { Box } from '../../../../components/Flex';
 export const AdaptablePopup = (props) => {
@@ -17,7 +18,7 @@ export const AdaptablePopup = (props) => {
     const settingsPanelTitle = adaptable.ModuleService.getModuleFriendlyName('SettingsPanel');
     const menuItems = useMenuItems();
     const isWindowModal = settingsPanelOptions.popupType === 'window';
-    const modalContainer = adaptable.adaptableOptions?.containerOptions?.modalContainer;
+    const modalContainer = resolveContainerElement(adaptable.adaptableOptions?.containerOptions?.modalContainer, props.api.internalApi.buildBaseContext());
     let friendlyName = null;
     /**
      * This means that it is not rendered in the context of Settings Panel

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupBody.js

@@ -3,7 +3,7 @@ import { UIHelper } from '../../../UIHelper';
 import { AdaptableViewFactory } from '../../../AdaptableViewFactory';
 import { AdaptablePopupModuleView } from './AdaptablePopupModuleView';
 export const AdaptablePopupBody = (props) => {
-    const modalContainer = UIHelper.getModalContainer(props.api.optionsApi.getAdaptableOptions(), document);
+    const modalContainer = UIHelper.getModalContainer(props.api.optionsApi.getAdaptableOptions(), document, props.api.internalApi.buildBaseContext());
     const moduleName = props.module.moduleInfo.ModuleName;
     const accessLevel = props.api.entitlementApi.getEntitlementAccessLevelForModule(moduleName);
     const moduleInfo = props.api.internalApi.getModuleService().getModuleInfoByModule(moduleName);

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupDialog.d.ts

@@ -7,6 +7,6 @@ export declare const AdaptablePopupDialog: React.FunctionComponent<React.PropsWi
     isWindowModal: boolean;
     onHide: () => void;
     style?: React.CSSProperties;
-    modalContainer?: string | HTMLElement;
+    modalContainer?: HTMLElement;
     dataName?: string;
 }>>;

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupDialog.js

@@ -43,14 +43,7 @@ const PopupDialog = (props) => {
 export const AdaptablePopupDialog = (props) => {
     const { isActionModule, style, friendlyName, baseClassName, className, children, onHide, isWindowModal, modalContainer, } = props;
     if (modalContainer) {
-        let ref = null;
-        if (typeof modalContainer === 'string') {
-            ref = globalThis.document.querySelector(modalContainer);
-        }
-        else {
-            ref = modalContainer;
-        }
-        return createPortal(React.createElement(Dialog, { "data-name": props.dataName, modal: false, fixed: false, onDismiss: onHide, className: className }, children), ref);
+        return createPortal(React.createElement(Dialog, { "data-name": props.dataName, modal: false, fixed: false, onDismiss: onHide, className: className }, children), modalContainer);
     }
     if (isWindowModal) {
         const settingsPanelOptionsKey = isActionModule ? `action-${friendlyName}` : 'settings';

package/src/View/Components/Popups/WindowPopups/WindowPopups.js

@@ -1,16 +1,44 @@
 import * as React from 'react';
+import { createPortal } from 'react-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import Dialog from '../../../../components/Dialog';
 import { PopupHideWindow } from '../../../../Redux/ActionsReducers/PopupRedux';
+import { resolveContainerElement } from '../../../../Utilities/resolveContainerElement';
 import { useAdaptable } from '../../../AdaptableContext';
 import { ExternalRenderer } from '../../ExternalRenderer';
 import { PanelWithImage } from '../../Panels/PanelWithImage';
 import { getMiddlePosition, getWindowPopupSize } from '../Utilities';
-import { windowFactory } from './windowFactory';
+import { WINDOW_SHOW_TRANSPOSED_VIEW, windowFactory } from './windowFactory';
 const NoopComponent = () => {
     return React.createElement(React.Fragment, null);
 };
 export const CUSTOM_WINDOW_FACTORY_ID = 'CUSTOM_WINDOW_FACTORY_ID';
+/**
+ * Portals children into a target container element.
+ * Monitors the container with a MutationObserver — if the container is removed
+ * from the DOM, `onContainerRemoved` is called so callers can clean up React/Redux state.
+ */
+const ContainerPortal = ({ container, onContainerRemoved, children }) => {
+    React.useEffect(() => {
+        // If the container is already detached, clean up immediately
+        if (!document.contains(container)) {
+            onContainerRemoved();
+            return;
+        }
+        const observer = new MutationObserver(() => {
+            if (!document.contains(container)) {
+                onContainerRemoved();
+                observer.disconnect();
+            }
+        });
+        // Observe the entire document body for subtree removals
+        observer.observe(document.body, { childList: true, subtree: true });
+        return () => {
+            observer.disconnect();
+        };
+    }, [container, onContainerRemoved]);
+    return createPortal(children, container);
+};
 export const WindowPopups = () => {
     const [windowModalSettings, setWindowModalSettings] = React.useState({});
     const adaptable = useAdaptable();
@@ -37,6 +65,13 @@ export const WindowPopups = () => {
             Component = Component ?? NoopComponent;
             componentNode = (React.createElement(Component, { api: adaptable.api, onDismiss: handleDismiss, popupProps: restPopupProps }));
         }
+        // Transposed View: portal into custom container if configured
+        if (windowItem.FactoryId === WINDOW_SHOW_TRANSPOSED_VIEW) {
+            const transposedContainer = resolveContainerElement(adaptable.adaptableOptions?.containerOptions?.transposedViewContainer, adaptable.api.internalApi.buildBaseContext());
+            if (transposedContainer) {
+                return (React.createElement(ContainerPortal, { key: windowItem.Id, container: transposedContainer, onContainerRemoved: handleDismiss }, componentNode));
+            }
+        }
         return (React.createElement(Dialog, { "data-name": windowItem.Id, className: "ab-Window-Modal twa:h-full twa:p-0", key: windowItem.Id, windowModal: true, windowModalProps: {
                 ...windowModalProps,
                 onChange: (settings) => {

package/src/View/Components/WizardSummaryPage.js

@@ -9,7 +9,7 @@ const tableDOMProps = {
     className: 'ab-WizardSummary__list',
     style: {
         height: '100%',
-        margin: 'var(--ab-space-2)',
+        margin: 'calc(var(--ab-base-space) * 2)',
     },
 };
 export const WizardSummaryPage = (props) => {

package/src/View/Dashboard/CustomToolbar.js

@@ -75,7 +75,7 @@ export const CustomToolbarCmp = (props) => {
             const disabled = button.disabled && button.disabled(button, dashboardContext);
             let buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'outlined';
             let buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'neutral';
-            return (React.createElement(AdaptableButtonComponent, { style: { marginLeft: index ? 'var(--ab-space-1)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, variant: buttonVariant, tone: buttonTone, className: buttonStyle?.className || '', onClick: () => {
+            return (React.createElement(AdaptableButtonComponent, { style: { marginLeft: index ? 'var(--ab-base-space)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, variant: buttonVariant, tone: buttonTone, className: buttonStyle?.className || '', onClick: () => {
                     button.onClick ? button.onClick(button, dashboardContext) : null;
                     setTimeout(() => {
                         // mutate state to force a re-rendering

package/src/View/DataChangeHistory/DataChangeHistoryViewPanel.js

@@ -27,7 +27,7 @@ export const DataChangeHistoryViewPanelControl = (props) => {
     const enabled = changeHistoryMode === 'ACTIVE';
     const disabled = changeHistoryMode === 'INACTIVE';
     const suspended = changeHistoryMode === 'SUSPENDED';
-    const gap = props.gap ?? 'var(--ab-space-1)';
+    const gap = props.gap ?? 'var(--ab-base-space)';
     const buttonsPaddingY = props.buttonsPaddingY ?? 2;
     const buttonPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPanel--button-panel", style: { gap: gap, paddingBlock: buttonsPaddingY } },
         disabled && (React.createElement(ButtonPlay, { "aria-label": "Enable Data Change History", className: "ab-DataChangeHistoryPanel--button-activate", "data-name": 'data-change-history--button-activate', tooltip: '', onClick: () => onChangeHistoryEnable() })),