@adaptabletools/adaptable-cjs 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,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -11,6 +11,7 @@ const ObjectFactory_1 = tslib_1.__importDefault(require("../../Utilities/ObjectF
 const AdaptableAlert_1 = require("../../AdaptableState/Common/AdaptableAlert");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
 const AlertInternalApi_1 = require("../Internal/AlertInternalApi");
+const resolveContainerElement_1 = require("../../Utilities/resolveContainerElement");
 class AlertApiImpl extends ApiBase_1.ApiBase {
     internalApi;
     constructor(_adaptable) {
@@ -66,12 +67,7 @@ class AlertApiImpl extends ApiBase_1.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 = (0, resolveContainerElement_1.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

@@ -99,18 +99,18 @@ class GridApiImpl extends ApiBase_1.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;
@@ -611,9 +611,9 @@ class GridApiImpl extends ApiBase_1.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: windowFactory_1.WINDOW_SHOW_TRANSPOSED_VIEW,
             factoryId: windowFactory_1.WINDOW_SHOW_TRANSPOSED_VIEW,
@@ -622,9 +622,9 @@ class GridApiImpl extends ApiBase_1.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

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

package/src/Api/Implementation/SystemStatusApiImpl.js

@@ -11,6 +11,7 @@ const react_1 = require("react");
 const UIHelper_1 = tslib_1.__importDefault(require("../../View/UIHelper"));
 const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
 const SystemStatusInternalApi_1 = require("../Internal/SystemStatusInternalApi");
+const resolveContainerElement_1 = require("../../Utilities/resolveContainerElement");
 class SystemStatusApiImpl extends ApiBase_1.ApiBase {
     systemStatusDiv;
     internalApi;
@@ -52,11 +53,7 @@ class SystemStatusApiImpl extends ApiBase_1.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 = (0, resolveContainerElement_1.resolveContainerElement)(this.getContainerOptions().systemStatusContainer, this.getAdaptableInternalApi().buildBaseContext());
         }
         if (this.systemStatusDiv) {
             if (StringExtensions_1.default.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

@@ -8,6 +8,7 @@ const WindowPopups_1 = require("../../View/Components/Popups/WindowPopups/Window
 const UserInterfaceInternalApi_1 = require("../Internal/UserInterfaceInternalApi");
 const ApiBase_1 = require("./ApiBase");
 const PopupRedux_1 = require("../../Redux/ActionsReducers/PopupRedux");
+const UserInterfaceRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/UserInterfaceRedux"));
 class UserInterfaceApiImpl extends ApiBase_1.ApiBase {
     internalApi;
     showProgressIndicatorTimeout = null;
@@ -132,5 +133,17 @@ class UserInterfaceApiImpl extends ApiBase_1.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));
+    }
 }
 exports.UserInterfaceApiImpl = UserInterfaceApiImpl;

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,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserInterfaceReducer = exports.UserInterfaceSetHideAdaptableUI = exports.USER_INTERFACE_SET_HIDE_ADAPTABLE_UI = void 0;
+/**
+ * @ReduxAction Sets whether all AdapTable UI elements are hidden
+ */
+exports.USER_INTERFACE_SET_HIDE_ADAPTABLE_UI = 'USER_INTERFACE_SET_HIDE_ADAPTABLE_UI';
+const UserInterfaceSetHideAdaptableUI = (hideAdaptableUI) => ({
+    type: exports.USER_INTERFACE_SET_HIDE_ADAPTABLE_UI,
+    hideAdaptableUI,
+});
+exports.UserInterfaceSetHideAdaptableUI = UserInterfaceSetHideAdaptableUI;
+const initialState = {
+    HideAdaptableUI: false,
+};
+const UserInterfaceReducer = (state = initialState, action) => {
+    switch (action.type) {
+        case exports.USER_INTERFACE_SET_HIDE_ADAPTABLE_UI:
+            return Object.assign({}, state, {
+                HideAdaptableUI: action.hideAdaptableUI,
+            });
+        default:
+            return state;
+    }
+};
+exports.UserInterfaceReducer = UserInterfaceReducer;

package/src/Redux/Store/AdaptableStore.js

@@ -42,6 +42,7 @@ const InternalRedux = tslib_1.__importStar(require("../ActionsReducers/InternalR
 const TeamSharingRedux = tslib_1.__importStar(require("../ActionsReducers/TeamSharingRedux"));
 const ThemeRedux = tslib_1.__importStar(require("../ActionsReducers/ThemeRedux"));
 const ToolPanelRedux = tslib_1.__importStar(require("../ActionsReducers/ToolPanelRedux"));
+const UserInterfaceRedux = tslib_1.__importStar(require("../ActionsReducers/UserInterfaceRedux"));
 const devTools_1 = require("../../devTools");
 const TeamSharingState_1 = require("../../AdaptableState/TeamSharingState");
 const buildAdaptableStateFunctionConfig_1 = require("./buildAdaptableStateFunctionConfig");
@@ -127,6 +128,7 @@ 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) => {
@@ -999,6 +1001,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,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveContainerElement = resolveContainerElement;
+/**
+ * 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.
+ */
+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

@@ -97,7 +97,7 @@ const ColumnFilterInput = (props) => {
     return (React.createElement(AdaptableInput_1.default, { 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

@@ -13,6 +13,7 @@ const AdaptablePopupBody_1 = require("./AdaptablePopupBody");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const CustomSettingsPanelView_1 = require("./CustomSettingsPanelView");
 const useMenuItems_1 = require("./useMenuItems");
+const resolveContainerElement_1 = require("../../../../Utilities/resolveContainerElement");
 const AdaptablePopupDialog_1 = require("./AdaptablePopupDialog");
 const Flex_1 = require("../../../../components/Flex");
 const AdaptablePopup = (props) => {
@@ -21,7 +22,7 @@ const AdaptablePopup = (props) => {
     const settingsPanelTitle = adaptable.ModuleService.getModuleFriendlyName('SettingsPanel');
     const menuItems = (0, useMenuItems_1.useMenuItems)();
     const isWindowModal = settingsPanelOptions.popupType === 'window';
-    const modalContainer = adaptable.adaptableOptions?.containerOptions?.modalContainer;
+    const modalContainer = (0, resolveContainerElement_1.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

@@ -7,7 +7,7 @@ const UIHelper_1 = require("../../../UIHelper");
 const AdaptableViewFactory_1 = require("../../../AdaptableViewFactory");
 const AdaptablePopupModuleView_1 = require("./AdaptablePopupModuleView");
 const AdaptablePopupBody = (props) => {
-    const modalContainer = UIHelper_1.UIHelper.getModalContainer(props.api.optionsApi.getAdaptableOptions(), document);
+    const modalContainer = UIHelper_1.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

@@ -47,14 +47,7 @@ const PopupDialog = (props) => {
 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 (0, react_dom_1.createPortal)(React.createElement(Dialog_1.default, { "data-name": props.dataName, modal: false, fixed: false, onDismiss: onHide, className: className }, children), ref);
+        return (0, react_dom_1.createPortal)(React.createElement(Dialog_1.default, { "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

@@ -3,9 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WindowPopups = exports.CUSTOM_WINDOW_FACTORY_ID = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
+const react_dom_1 = require("react-dom");
 const react_redux_1 = require("react-redux");
 const Dialog_1 = tslib_1.__importDefault(require("../../../../components/Dialog"));
 const PopupRedux_1 = require("../../../../Redux/ActionsReducers/PopupRedux");
+const resolveContainerElement_1 = require("../../../../Utilities/resolveContainerElement");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const ExternalRenderer_1 = require("../../ExternalRenderer");
 const PanelWithImage_1 = require("../../Panels/PanelWithImage");
@@ -15,6 +17,32 @@ const NoopComponent = () => {
     return React.createElement(React.Fragment, null);
 };
 exports.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 (0, react_dom_1.createPortal)(children, container);
+};
 const WindowPopups = () => {
     const [windowModalSettings, setWindowModalSettings] = React.useState({});
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -41,6 +69,13 @@ 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 === windowFactory_1.WINDOW_SHOW_TRANSPOSED_VIEW) {
+            const transposedContainer = (0, resolveContainerElement_1.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_1.default, { "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

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

package/src/View/Dashboard/CustomToolbar.js

@@ -79,7 +79,7 @@ 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(AdaptableButton_1.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(AdaptableButton_1.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

@@ -31,7 +31,7 @@ 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_1.Flex, { className: "ab-DataChangeHistoryPanel--button-panel", style: { gap: gap, paddingBlock: buttonsPaddingY } },
         disabled && (React.createElement(ButtonPlay_1.ButtonPlay, { "aria-label": "Enable Data Change History", className: "ab-DataChangeHistoryPanel--button-activate", "data-name": 'data-change-history--button-activate', tooltip: '', onClick: () => onChangeHistoryEnable() })),