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

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() })),

package/src/View/Layout/TransposedPopup.js

@@ -5,72 +5,153 @@ import { useAdaptable } from '../AdaptableContext';
 import { ColumnSelector } from '../Components/Selectors/ColumnSelector';
 import { AdaptableAgGrid } from '../../agGrid/AdaptableAgGrid';
 import { Box, Flex } from '../../components/Flex';
-const adaptableContainerId = `transposed-adaptable-container`;
-const agGridContainerId = `transposed-adaptable-ag-grid-container`;
+import { ExportModuleId } from '../../Utilities/Constants/ModuleConstants';
+import StringExtensions from '../../Utilities/Extensions/StringExtensions';
+const ADAPTABLE_CONTAINER_ID = 'transposed-adaptable-container';
+const AG_GRID_CONTAINER_ID = 'transposed-adaptable-ag-grid-container';
+/** Field used for the first column in transposed grid (hidden, holds column id). */
+const TRANSPOSED_FIRST_COLUMN_FIELD = '_transposed_column_value';
+/** Header used for the first visible column in transposed grid (shows friendly name). */
+const TRANSPOSED_FIRST_COLUMN_HEADER = '_transposed_column_header';
+function buildTransposedAdaptableOptions({ hostOptions, transposedRowsAndColumns, currentTheme, }) {
+    return {
+        primaryKey: TRANSPOSED_FIRST_COLUMN_FIELD,
+        licenseKey: hostOptions.licenseKey,
+        userName: `${hostOptions.userName}`,
+        adaptableId: `${hostOptions.adaptableId}::TransposedView`,
+        containerOptions: {
+            adaptableContainer: ADAPTABLE_CONTAINER_ID,
+            agGridContainer: AG_GRID_CONTAINER_ID,
+        },
+        entitlementOptions: { defaultAccessLevel: 'Hidden' },
+        initialState: {
+            Layout: {
+                Revision: Date.now(),
+                CurrentLayout: 'TransposedView',
+                Layouts: [
+                    {
+                        Name: 'TransposedView',
+                        TableColumns: [
+                            TRANSPOSED_FIRST_COLUMN_HEADER,
+                            ...transposedRowsAndColumns.transposedColumns.map((c) => c.colId),
+                        ],
+                        ColumnPinning: { [TRANSPOSED_FIRST_COLUMN_HEADER]: 'left' },
+                        AutoSizeColumns: true,
+                    },
+                ],
+            },
+            Theme: { CurrentTheme: currentTheme },
+        },
+    };
+}
+function buildTransposedGridOptions({ transposedRowsAndColumns, elevatedColumnId, adaptableApi, }) {
+    const firstColumn = {
+        field: TRANSPOSED_FIRST_COLUMN_HEADER,
+        headerName: adaptableApi.columnApi.getFriendlyNameForColumnId(elevatedColumnId),
+    };
+    return {
+        loading: false,
+        defaultColDef: {
+            floatingFilter: false,
+            filter: false,
+            sortable: true,
+            resizable: true,
+            enableRowGroup: false,
+            editable: false,
+            enablePivot: false,
+            enableValue: false,
+            lockPinned: true,
+            menuTabs: [],
+            width: 120,
+        },
+        columnDefs: [
+            { field: TRANSPOSED_FIRST_COLUMN_FIELD, hide: true },
+            firstColumn,
+            ...transposedRowsAndColumns.transposedColumns.map((col) => ({ field: col.colId, headerName: col.header })),
+        ],
+        rowData: transposedRowsAndColumns.transposedRows,
+        sideBar: false,
+    };
+}
 export const TransposedPopup = (props) => {
     const adaptable = useAdaptable();
-    const { transposedColumnId, hideTransposedColumn, visibleColumns, visibleRows, autosize } = props.popupProps;
-    const rowNodes = React.useMemo(() => {
-        return props.popupProps.visibleRows
-            ? adaptable.api.gridApi.getVisibleRowNodes()
-            : adaptable.api.gridApi.getAllRowNodes();
-    }, [
-    // can be later triggered by tickng data
-    ]);
     const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
-    const [syntheticTransposedByColumnId, doSetSyntheticTransposedByColumnId] = React.useState(transposedColumnId);
-    const setSyntheticTransposedByColumnId = (syntheticTransposedByColumnId) => {
+    const rawConfig = (props.popupProps ?? {});
+    const transposeConfig = {
+        transposedColumnId: rawConfig.transposedColumnId ?? primaryKey,
+        hideTransposedColumn: rawConfig.hideTransposedColumn ?? true,
+        autosize: rawConfig.autosize ?? true,
+        columnsToTranspose: rawConfig.columnsToTranspose,
+        rowsToTranspose: rawConfig.rowsToTranspose,
+    };
+    const rowNodes = React.useMemo(() => {
+        let transposableRowNodes = [];
+        const rowsToTranspose = transposeConfig.rowsToTranspose;
+        if (rowsToTranspose === 'VisibleOnly') {
+            return adaptable.api.gridApi.getVisibleRowNodes();
+        }
+        if (rowsToTranspose === 'All') {
+            return adaptable.api.gridApi.getAllRowNodes();
+        }
+        if (StringExtensions.IsNotNullOrEmpty(rowsToTranspose)) {
+            adaptable.api.gridApi.getAllRowNodes().forEach((rn) => {
+                const shouldTransposeRow = adaptable.api.internalApi
+                    .getQueryLanguageService()
+                    .evaluateBooleanExpression(rowsToTranspose, ExportModuleId, rn);
+                if (shouldTransposeRow) {
+                    transposableRowNodes.push(rn);
+                }
+            });
+            return transposableRowNodes;
+        }
+        return adaptable.api.gridApi.getAllRowNodes();
+    }, [transposeConfig.rowsToTranspose, adaptable.api]);
+    const [elevatedColumnId, setElevatedColumnIdState] = React.useState(() => transposeConfig.transposedColumnId ?? primaryKey);
+    const setElevatedColumnId = (newElevatedColumnId) => {
         transposedAdaptableApiRef.current?.destroy({ unmount: true, destroyAgGrid: true });
-        doSetSyntheticTransposedByColumnId(syntheticTransposedByColumnId);
+        setElevatedColumnIdState(newElevatedColumnId);
     };
     const transposedAdaptableApiRef = React.useRef(null);
     const columns = React.useMemo(() => {
-        // customisable
-        return visibleColumns
-            ? adaptable.api.columnApi.getVisibleColumns()
-            : adaptable.api.columnApi.getUIAvailableColumns();
-    }, []);
+        const allUIColumns = adaptable.api.columnApi.getUIAvailableColumns();
+        const columnsToTranspose = transposeConfig.columnsToTranspose;
+        if (!columnsToTranspose) {
+            return allUIColumns;
+        }
+        const columnIds = typeof columnsToTranspose === 'function'
+            ? columnsToTranspose({
+                ...adaptable.api.internalApi.buildBaseContext(),
+                columns: allUIColumns,
+            })
+            : columnsToTranspose;
+        return columnIds
+            .map((c) => adaptable.api.columnApi.getColumnWithColumnId(c))
+            .filter((col) => col != null);
+    }, [transposeConfig.columnsToTranspose, adaptable.api]);
     /**
-     * This is used as first field
+     * Build transposed structure: original rows become columns (colId = primaryKey value),
+     * original columns become rows. Each transposed row has the column id/header plus
+     * one cell per original row keyed by primaryKey value.
      */
-    const transposedFirstColumnField = '_transposed_column_value';
-    const transposedFirstColumnHeader = '_transposed_column_header';
     const transposedRowsAndColumns = React.useMemo(() => {
-        /**
-         * transposed column values become primaryKey of the new tarnsposed rows
-         * we build row by row, might be easer
-         */
         const transposedColumns = [];
         const transposedRows = [];
         for (const row of rowNodes) {
-            // we force the col-ids to be strings, easer to work with
-            //row[transposeByColumnId] + '';
             const colId = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, primaryKey) + '';
-            //row[synteticTransposedByColumnId] + '';
-            const header = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, syntheticTransposedByColumnId) +
-                '';
-            transposedColumns.push({
-                colId,
-                header,
-            });
+            const header = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, elevatedColumnId) + '';
+            transposedColumns.push({ colId, header });
         }
         for (const column of columns) {
-            /**
-             * We can hide the transposed column, if we want
-             */
-            if (hideTransposedColumn && column.columnId === syntheticTransposedByColumnId) {
+            if (transposeConfig.hideTransposedColumn &&
+                column.columnId === elevatedColumnId) {
                 continue;
             }
             const transposedRow = {
-                // [transposed-by-column-id]: [other column id],
-                // the value can be set to friendlyname
-                [transposedFirstColumnField]: column.columnId,
-                [transposedFirstColumnHeader]: column.friendlyName,
+                [TRANSPOSED_FIRST_COLUMN_FIELD]: column.columnId,
+                [TRANSPOSED_FIRST_COLUMN_HEADER]: column.friendlyName,
             };
-            for (let row of rowNodes) {
-                // [transposed-by-column-value[n]]: [other column value[n]]
+            for (const row of rowNodes) {
                 const key = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, primaryKey);
-                // row[column.field]
                 let value = adaptable.api.gridApi.getDisplayValueFromRowNode(row, column.columnId);
                 if (value instanceof Date) {
                     value = value.toLocaleString();
@@ -79,90 +160,25 @@ export const TransposedPopup = (props) => {
             }
             transposedRows.push(transposedRow);
         }
-        return {
-            transposedColumns,
-            transposedRows,
-        };
-    }, [rowNodes, primaryKey, syntheticTransposedByColumnId]);
+        return { transposedColumns, transposedRows };
+    }, [rowNodes, primaryKey, elevatedColumnId, columns, transposeConfig.hideTransposedColumn, adaptable.api]);
     React.useEffect(() => {
-        // Mounting in an effect, so the nodes are rendered/available
-        const hostAdaptableOptions = adaptable.adaptableOptions;
-        const adaptableOptions = {
-            primaryKey: transposedFirstColumnField,
-            licenseKey: hostAdaptableOptions.licenseKey,
-            userName: `${hostAdaptableOptions.userName}`,
-            adaptableId: `${hostAdaptableOptions.adaptableId}::TransposedView`,
-            containerOptions: {
-                adaptableContainer: adaptableContainerId,
-                agGridContainer: agGridContainerId,
-            },
-            entitlementOptions: {
-                defaultAccessLevel: 'Hidden',
-            },
-            initialState: {
-                Layout: {
-                    Revision: Date.now(),
-                    CurrentLayout: 'TransposedView',
-                    Layouts: [
-                        {
-                            Name: 'TransposedView',
-                            TableColumns: [
-                                transposedFirstColumnHeader,
-                                ...transposedRowsAndColumns.transposedColumns.map((c) => c.colId),
-                            ],
-                            ColumnPinning: {
-                                [transposedFirstColumnHeader]: 'left',
-                            },
-                            AutoSizeColumns: true,
-                        },
-                    ],
-                },
-                Theme: {
-                    CurrentTheme: adaptable.api.themeApi.getCurrentTheme(),
-                },
-            },
-        };
-        const firstColumn = {
-            field: transposedFirstColumnHeader, // use the column friendly name
-            headerName: adaptable.api.columnApi.getFriendlyNameForColumnId(syntheticTransposedByColumnId),
-        };
-        const agGridOptions = {
-            loading: false,
-            defaultColDef: {
-                floatingFilter: false,
-                filter: false,
-                sortable: true,
-                resizable: true,
-                enableRowGroup: false,
-                editable: false,
-                enablePivot: false,
-                enableValue: false,
-                lockPinned: true,
-                menuTabs: [],
-                width: 120,
-            },
-            columnDefs: [
-                {
-                    field: transposedFirstColumnField,
-                    hide: true,
-                },
-                firstColumn,
-                ...transposedRowsAndColumns.transposedColumns.map((col) => {
-                    return {
-                        field: col.colId,
-                        type: null,
-                        headerName: col.header,
-                    };
-                }),
-            ],
-            rowData: transposedRowsAndColumns.transposedRows,
-            sideBar: false,
-        };
+        const hostOptions = adaptable.adaptableOptions;
+        const adaptableOptions = buildTransposedAdaptableOptions({
+            hostOptions,
+            transposedRowsAndColumns,
+            currentTheme: adaptable.api.themeApi.getCurrentTheme(),
+        });
+        const gridOptions = buildTransposedGridOptions({
+            transposedRowsAndColumns,
+            elevatedColumnId,
+            adaptableApi: adaptable.api,
+        });
         const modules = adaptable.agGridModulesAdapter.getAgGridRegisteredModules();
         AdaptableAgGrid._initInternal({
             variant: 'vanilla',
             adaptableOptions,
-            gridOptions: agGridOptions,
+            gridOptions,
             modules,
         }).then((adaptableApi) => {
             transposedAdaptableApiRef.current = adaptableApi;
@@ -170,30 +186,20 @@ export const TransposedPopup = (props) => {
                 transposedAdaptableApiRef.current?.themeApi.loadTheme(typeof event.theme === 'object' ? event.theme.Name : event.theme);
             });
         });
-    }, [syntheticTransposedByColumnId]);
+    }, [elevatedColumnId, adaptable]);
     React.useEffect(() => {
-        // destroy when closing the popup
         return () => {
             requestAnimationFrame(() => {
                 transposedAdaptableApiRef.current?.destroy({ unmount: true, destroyAgGrid: true });
             });
         };
     }, []);
-    /**
-     * Need to get all data, manualy pivot the grid using the primary key.
-     *
-     * 1. get the data, and pivot using the primary key
-     * 2. create the col definitios, a col definition for each row
-     * 3. create the grid
-     */
     return (React.createElement(Flex, { flexDirection: "column", className: "twa:w-full twa:h-full" },
         React.createElement(Panel, null,
             React.createElement(FormLayout, null,
                 React.createElement(FormRow, { label: "Elevated Column" },
-                    React.createElement(ColumnSelector, { value: syntheticTransposedByColumnId, onChange: (colId) => {
-                            setSyntheticTransposedByColumnId(colId);
-                        } })))),
+                    React.createElement(ColumnSelector, { value: elevatedColumnId, onChange: setElevatedColumnId })))),
         React.createElement(Flex, { className: "twa:h-full" },
-            React.createElement(Box, { id: adaptableContainerId }),
-            React.createElement(Box, { className: "twa:h-full twa:w-full", id: agGridContainerId }))));
+            React.createElement(Box, { id: ADAPTABLE_CONTAINER_ID }),
+            React.createElement(Box, { className: "twa:h-full twa:w-full", id: AG_GRID_CONTAINER_ID }))));
 };

package/src/View/Schedule/Wizard/ScheduleSettingsWizard/ScheduleSettingsReminder.js

@@ -53,7 +53,7 @@ export const ScheduleSettingsReminder = (props) => {
             React.createElement(Tabs.Content, null,
                 React.createElement(FormLayout, null,
                     React.createElement(FormRow, { label: "Name" },
-                        React.createElement(Input, { "data-name": "schedule-name", className: "twa:w-[300px]", onChange: handleNameChange, placeholder: "Enter Schedule Name", type: "string", value: props.reminderSchedule?.Name ?? '' })),
+                        React.createElement(Input, { "data-name": "schedule-name", className: "twa:w-[300px]", onChange: handleNameChange, placeholder: "Enter Reminder Name", type: "string", value: props.reminderSchedule?.Name ?? '' })),
                     React.createElement(FormRow, { label: "" },
                         React.createElement(Box, { className: "twa:h-2" })),
                     React.createElement(FormRow, { label: "Header" },

package/src/View/UIHelper.d.ts

@@ -6,6 +6,7 @@ import { Schedule, Weekday } from '../AdaptableState/Common/Schedule';
 import { AdaptableColumnDataType, AdaptableSystemIconName, AdaptableOptions } from '../types';
 import { AdaptableAlert } from '../AdaptableState/Common/AdaptableAlert';
 import { AdaptableMessageType } from '../AdaptableState/Common/AdaptableMessageType';
+import type { ContainerContext } from '../AdaptableOptions/ContainerOptions';
 export declare const BLACK: string;
 export declare const WHITE: string;
 export declare const LIGHT_GRAY: string;
@@ -31,7 +32,7 @@ export declare function getDefaultColors(): string[];
 export declare function getEmptyConfigState(): EditableConfigEntityState;
 export declare function getDescriptionForDataType(dataType: AdaptableColumnDataType): "text" | "number" | "date";
 export declare function getPlaceholderForDataType(dataType: AdaptableColumnDataType): "Enter Value" | "Enter Number" | "Enter Date";
-export declare function getModalContainer(adaptableOptions: AdaptableOptions, document: Document): HTMLElement;
+export declare function getModalContainer(adaptableOptions: AdaptableOptions, document: Document, context?: ContainerContext): HTMLElement;
 export declare function IsEmptyStyle(style: AdaptableStyle): boolean;
 export declare function IsNotEmptyStyle(style: AdaptableStyle): boolean;
 export declare function getMessageTypeByStatusColour(statusColour: StatusColour): AdaptableMessageType;

package/src/View/UIHelper.js

@@ -2,6 +2,7 @@ import { WizardStatus, } from './Components/SharedProps/EditableConfigEntityStat
 import { FontWeight, FontStyle, StatusColour } from '../AdaptableState/Common/Enums';
 import { StringExtensions } from '../Utilities/Extensions/StringExtensions';
 import ArrayExtensions from '../Utilities/Extensions/ArrayExtensions';
+import { resolveContainerElement } from '../Utilities/resolveContainerElement';
 export const BLACK = 'Black';
 export const WHITE = 'White';
 export const LIGHT_GRAY = 'LightGray';
@@ -120,19 +121,12 @@ export function getPlaceholderForDataType(dataType) {
             return 'Enter Date';
     }
 }
-export function getModalContainer(adaptableOptions, document) {
-    let modalContainer;
-    if (adaptableOptions.containerOptions.modalContainer) {
-        // this has been set, so we use the property
-        modalContainer =
-            typeof adaptableOptions.containerOptions.modalContainer === 'string'
-                ? document.getElementById(adaptableOptions.containerOptions.modalContainer)
-                : adaptableOptions.containerOptions.modalContainer;
-        if (modalContainer) {
-            const modalContainerClassName = ' modal-container';
-            if (!modalContainer.className.includes(modalContainerClassName)) {
-                modalContainer.className += modalContainerClassName;
-            }
+export function getModalContainer(adaptableOptions, document, context) {
+    let modalContainer = resolveContainerElement(adaptableOptions.containerOptions.modalContainer, context, document);
+    if (modalContainer) {
+        const modalContainerClassName = ' modal-container';
+        if (!modalContainer.className.includes(modalContainerClassName)) {
+            modalContainer.className += modalContainerClassName;
         }
     }
     if (!modalContainer) {
@@ -423,7 +417,7 @@ export function getAdaptableToolPanelWidth() {
     return getNumericCSSVariableValue(getCSSVariableValue('--ab-cmp-toolpanel__width'), 200);
 }
 export function getSimpleButtonPaddingWidth() {
-    return getNumericCSSVariableValue(getCSSVariableValue('--ab-space-1'), 4);
+    return getNumericCSSVariableValue(getCSSVariableValue('--ab-base-space'), 4);
 }
 export function getCSSVariableValue(cssVariable) {
     if (!isBrowserDocumentAvailable()) {