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

package/src/Strategy/SmartEditModule.js

@@ -43,8 +43,8 @@ export class SmartEditModule extends AdaptableModuleBase {
             return {
                 Alert: {
                     alertType: 'generic',
-                    header: 'Smart Edit Error',
-                    message: 'Cannot edit while Grid is in Pivot Mode.',
+                    header: 'Smart Edit',
+                    message: 'Editing is not available in Pivot Mode.',
                     alertDefinition: ObjectFactory.CreateInternalAlertDefinitionForMessages('Error'),
                 },
             };
@@ -53,8 +53,8 @@ export class SmartEditModule extends AdaptableModuleBase {
             return {
                 Alert: {
                     alertType: 'generic',
-                    header: 'Smart Edit Error',
-                    message: 'No cells are selected.\nPlease select some cells.',
+                    header: 'Smart Edit',
+                    message: 'No cells selected. Please select one or more cells to continue.',
                     alertDefinition: ObjectFactory.CreateInternalAlertDefinitionForMessages('Error'),
                 },
             };
@@ -63,8 +63,8 @@ export class SmartEditModule extends AdaptableModuleBase {
             return {
                 Alert: {
                     alertType: 'generic',
-                    header: 'Smart Edit Error',
-                    message: 'Smart Edit only supports single column edit.\nPlease adjust cell selection.',
+                    header: 'Smart Edit',
+                    message: 'Smart Edit supports editing a single column at a time. Please adjust your selection.',
                     alertDefinition: ObjectFactory.CreateInternalAlertDefinitionForMessages('Error'),
                 },
             };
@@ -75,8 +75,8 @@ export class SmartEditModule extends AdaptableModuleBase {
                 return {
                     Alert: {
                         alertType: 'generic',
-                        header: 'Smart Edit Error',
-                        message: 'Smart Edit only supports editing of numeric columns.\nPlease adjust the cell selection.',
+                        header: 'Smart Edit',
+                        message: 'Smart Edit only applies to numeric columns. Please adjust your selection.',
                         alertDefinition: ObjectFactory.CreateInternalAlertDefinitionForMessages('Error'),
                     },
                 };
@@ -87,8 +87,8 @@ export class SmartEditModule extends AdaptableModuleBase {
             return {
                 Alert: {
                     alertType: 'generic',
-                    header: 'Smart Edit Error',
-                    message: 'Smart Edit is not permitted on readonly cells.\nPlease adjust the cell selection.',
+                    header: 'Smart Edit',
+                    message: 'Smart Edit is not available for read-only cells. Please adjust your selection.',
                     alertDefinition: ObjectFactory.CreateInternalAlertDefinitionForMessages('Error'),
                 },
             };

package/src/Utilities/Services/DataService.js

@@ -64,7 +64,7 @@ export class DataService {
         // why 2 and not 3 or 1? no good reason, only seems like a reasonable waiting time :)
         const UNDO_WAIT = 2000;
         const timeoutId = setTimeout(() => {
-            this.adaptable.logger.warn(`Undo change was NOT handled, this should NOT happen: PK(${change.primaryKeyValue}) Col(${change.column}) RevertedValue(${change.newValue}) NewValue(${change.oldValue})`);
+            this.adaptable.logger.warn(`Undo change was not handled within timeout: column="${change.column}", primaryKey="${change.primaryKeyValue}", from=${change.newValue} to=${change.oldValue}.`);
             this.extractUndoChange(change);
         }, UNDO_WAIT);
         this.undoChangeTimers.set(undoChangeKey, timeoutId);

package/src/Utilities/Services/Fdc3Service.js

@@ -78,7 +78,7 @@ export class Fdc3Service {
     getDesktopAgent() {
         if (globalThis.fdc3 == null && !this.loggedAgentError) {
             this.loggedAgentError = true;
-            this.adaptableApi.consoleError('FDC3 Desktop Agent not found. This should be provided by the wrapper application.');
+            this.adaptableApi.consoleError('FDC3 Desktop Agent not found. The host application must provide the FDC3 agent on globalThis.fdc3.');
         }
         return globalThis.fdc3;
     }
@@ -161,11 +161,11 @@ export class Fdc3Service {
         if (!this.getFdc3Options().enableLogging) {
             return;
         }
-        this.adaptableApi.consoleLog(`FDC3::${type} - `, params.join(' : '));
+        this.adaptableApi.consoleLog(`FDC3 ${type}: ${params.join(' : ')}`);
     }
     logFdc3Error(error) {
-        this.adaptableApi.consoleError(`FDC3 error`, error);
-        this.adaptableApi.alertApi.showAlertError('FDC3 Error', 'See console for details');
+        this.adaptableApi.consoleError('FDC3 operation failed.', error);
+        this.adaptableApi.alertApi.showAlertError('FDC3', 'An error occurred. See the browser console for details.');
     }
     getFdc3Api() {
         return this.adaptableApi.fdc3Api;

package/src/Utilities/Services/ModuleService.js

@@ -32,9 +32,7 @@ export class ModuleService {
         const registeredAgGridModuleNames = agGridModulesAdapter.getAgGridRegisteredModuleNames();
         const missingAgGridModuleNames = mandatoryAgGridModuleNames.filter((moduleName) => !registeredAgGridModuleNames.includes(moduleName));
         if (missingAgGridModuleNames.length) {
-            this.adaptableApi.consoleError(`AdapTable requires the following AG Grid modules to be registered: ${missingAgGridModuleNames.join(', ')}.
-
-        See for more information: ${AgGridRequiredModulesDocsLink}`);
+            this.adaptableApi.consoleError(`Adaptable requires these AG Grid modules: ${missingAgGridModuleNames.join(', ')}. Please register them. See: ${AgGridRequiredModulesDocsLink}`);
         }
         // log optional missing AG Grid dependencies for all modules
         this.getModuleCollection().forEach((adaptableModule) => {

package/src/Utilities/Services/ThemeService.js

@@ -70,15 +70,11 @@ export class ThemeService {
             return val;
         });
         if (abLoaded !== '777') {
-            logger.consoleError('Please import Adaptable styles from "@adaptabletools/adaptable/index.css"');
+            logger.consoleError('Adaptable styles not detected. Please import "@adaptabletools/adaptable/index.css".');
         }
         const isCustomUserTheme = !this.api.themeApi.internalApi.isSystemTheme(themeName);
         if (!isCustomUserTheme && abThemeLoaded !== themeName) {
-            logger.consoleWarn(`Theme "${themeName}" doesn't seem to be loaded! Make sure you import the css file for the "${themeName}" theme!
-
-If it's an AdapTable system theme, try
-
-import "@adaptabletools/adaptable/themes/${themeName}.css"`);
+            logger.consoleWarn(`Theme "${themeName}" does not appear to be loaded. Ensure the CSS file is imported, e.g.: import "@adaptabletools/adaptable/themes/${themeName}.css".`);
         }
     }
     // prefers-color-scheme

package/src/Utilities/Services/ValidationService.js

@@ -53,7 +53,7 @@ export class ValidationService {
             let alert = {
                 alertType: 'cellChanged',
                 header: 'Alert',
-                message: 'Perform Edit Alert Fired',
+                message: 'A validation rule was triggered for this edit.',
                 alertDefinition: failedRules[0],
                 cellDataChangedInfo: cellDataChangedInfo,
             };

package/src/Utilities/logDeprecation.js

@@ -11,13 +11,12 @@ const doOnce = (func, key) => {
 };
 export const logDeprecation = (logger, typeName, oldProp, newProp, message) => {
     const newPropMsg = newProp ? `Please use '${typeName}.${newProp}()' instead. ` : '';
-    doOnce(() => logger.consoleWarn(`'${typeName}.${oldProp}()' is deprecated. ${newPropMsg}${message ?? ''}`), `Deprecated_${oldProp}`);
+    doOnce(() => logger.consoleWarn(`${typeName}.${oldProp}() is deprecated. ${newPropMsg}${message ?? ''}`), `Deprecated_${oldProp}`);
 };
 export const logDeprecationExternal = (logger, oldTypeName, oldProp, newTypeName, newProp, message) => {
     const newPropMsg = newProp ? `Please use '${newTypeName}.${newProp}()' instead. ` : '';
-    doOnce(() => logger.consoleWarn(`'${oldTypeName}.${oldProp}()' is deprecated. ${newPropMsg}${message ?? ''}`), `Deprecated_${oldProp}`);
+    doOnce(() => logger.consoleWarn(`${oldTypeName}.${oldProp}() is deprecated. ${newPropMsg}${message ?? ''}`), `Deprecated_${oldProp}`);
 };
 export const logDeprecationInternal = (logger, typeName, oldProp) => {
-    doOnce(() => logger.consoleWarn(`'${typeName}.${oldProp}()' is deprecated. The method will be removed in the next major release.
-        Please contact support if you need the missing functionality.`), `Deprecated_${oldProp}`);
+    doOnce(() => logger.consoleWarn(`${typeName}.${oldProp}() is deprecated and will be removed in the next major release. Contact support if you need this functionality.`), `Deprecated_${oldProp}`);
 };

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/Alert/Wizard/isValidAlertRules.js

@@ -4,7 +4,7 @@ export const isValidAlertRules = (alert, api, context) => {
         !alert.Rule.BooleanExpression &&
         !alert.Rule.ObservableExpression &&
         !alert.Rule.AggregatedBooleanExpression) {
-        return 'No Rule defined for Alert';
+        return 'A rule is required for the Alert.';
     }
     const isRuleValid = isAdaptableRuleValid(alert, api, context);
     if (typeof isRuleValid === 'string') {

package/src/View/CalculatedColumn/Wizard/CalculatedColumnDefinitionWizardSection.js

@@ -21,11 +21,11 @@ export const renderCalculatedColumnDefinitionSummary = (data) => {
 export const isValidCalculatedColumnDefinition = (data, api) => {
     const columns = api.columnApi.getColumns();
     if (!data.ColumnId) {
-        return 'Column Id cannot be empty';
+        return 'A Column ID is required.';
     }
     const columnsWithSameIdCount = columns.filter((c) => c.columnId === data.ColumnId).length;
     const hasAlreadyExistingId = data.Uuid ? columnsWithSameIdCount > 1 : columnsWithSameIdCount > 0;
-    return hasAlreadyExistingId ? 'A Column already exists with that id' : true;
+    return hasAlreadyExistingId ? 'A column with this ID already exists.' : true;
 };
 export const CalculatedColumnDefinitionWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();

package/src/View/CalculatedColumn/Wizard/CalculatedColumnExpressionWizardSection.js

@@ -17,11 +17,11 @@ export const isValidCalculatedColumnExpression = (data, api) => {
     const calculatedColumnExpressionService = api.internalApi.getCalculatedColumnExpressionService();
     const expression = api.expressionApi.getAdaptableQueryExpression(data.Query)?.trim();
     if (!expression) {
-        return 'Calculated Column Expression cannot be empty';
+        return 'An expression is required for the Calculated Column.';
     }
     const isValid = calculatedColumnExpressionService.isCalculatedColumnQueryValid(data.Query);
     if (!isValid) {
-        return 'Calculated Column Expression is not valid';
+        return 'The Calculated Column expression is not valid.';
     }
     return true;
 };

package/src/View/CalculatedColumn/Wizard/CalculatedColumnSettingsWizardSection.js

@@ -16,7 +16,7 @@ export const renderCalculatedColumnSettingsSummary = (data) => {
 };
 export const isValidCalculatedColumnSettings = (data) => {
     if (!data.CalculatedColumnSettings?.DataType) {
-        return 'No data type is specified and it could not be inferred from the defined expression';
+        return 'A data type is required. It could not be inferred from the expression.';
     }
     return true;
 };

package/src/View/Charting/ChartingWizard/AgChargingWizard/SettingsSection.js

@@ -5,12 +5,12 @@ import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import AdaptableInput from '../../../Components/AdaptableInput';
 export const isSettingsValid = (chartDefinition, api) => {
     if (!chartDefinition.Name) {
-        return 'Name is mandatory';
+        return 'A name is required.';
     }
     const allChartDefinitions = api.chartingApi.getChartDefinitions();
     if (allChartDefinitions.some((chartDefinitionLoopItem) => chartDefinitionLoopItem.Uuid !== chartDefinition.Uuid &&
         chartDefinitionLoopItem.Name === chartDefinition.Name)) {
-        return 'There is already a chart with this name';
+        return 'A Chart with this name already exists.';
     }
     return true;
 };

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/SettingsSection.js

@@ -3,12 +3,12 @@ import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import AdaptableInput from '../../../Components/AdaptableInput';
 export const isSettingsValid = (chartDefinition, api) => {
     if (!chartDefinition.Name) {
-        return 'Name is mandatory';
+        return 'A name is required.';
     }
     const allChartDefinitions = api.chartingApi.getExternalChartDefinitions();
     if (allChartDefinitions.some((chartDefinitionLoopItem) => chartDefinitionLoopItem.Uuid !== chartDefinition.Uuid &&
         chartDefinitionLoopItem.Name === chartDefinition.Name)) {
-        return 'There is already a chart with this name';
+        return 'A Chart with this name already exists.';
     }
     return true;
 };

package/src/View/Components/CellPopup/index.js

@@ -32,7 +32,7 @@ export const CellPopup = React.forwardRef((props, ref) => {
         const cellSelector = `[row-id="${props.primaryKeyValue}"] [col-id="${props.columnId}"]`;
         const alignTo = document.querySelector(cellSelector);
         if (!alignTo) {
-            adaptable.logger.consoleError(`Could not find cell with selector ${cellSelector} to show popup`);
+            adaptable.logger.consoleError(`Cell not found for selector "${cellSelector}". Unable to display popup.`);
             return;
         }
         const showOverlayOptions = {

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/EntityRulesEditor/Utilities.js

@@ -1,28 +1,28 @@
 export const isAdaptableRuleValid = (abObject, api, context) => {
     if (abObject?.Rule?.Predicates?.length) {
         if (!api.predicateApi.isEveryPredicateValid(abObject?.Rule?.Predicates)) {
-            return `The Predicate${abObject?.Rule?.Predicates?.length === 1 ? ' is' : 's are'} not valid`;
+            return `The predicate${abObject?.Rule?.Predicates?.length === 1 ? ' is' : 's are'} not valid.`;
         }
     }
     if (abObject?.Rule?.BooleanExpression) {
         if (!api.expressionApi.isValidBooleanExpression(abObject?.Rule?.BooleanExpression, context.moduleInfo.ModuleName)) {
-            return 'The Expression is not a valid Boolean Expression';
+            return 'The Boolean expression is not valid.';
         }
     }
     if (abObject?.Rule?.ObservableExpression) {
         if (!api.expressionApi.isValidObservableExpression(abObject?.Rule?.ObservableExpression, context.moduleInfo.ModuleName)) {
-            return 'The Expression is not a valid Observable Expression';
+            return 'The Observable expression is not valid.';
         }
     }
     if (abObject?.Rule?.AggregatedBooleanExpression) {
         if (!api.expressionApi.isValidAggregatedBooleanExpression(abObject?.Rule?.AggregatedBooleanExpression, context.moduleInfo.ModuleName)) {
-            return 'The Expression is not a valid Aggregated Boolean Expression';
+            return 'The Aggregated Boolean expression is not valid.';
         }
     }
     if (abObject?.Rule?.Predicates?.length) {
         const isAPredicateWithInvalidColumnId = abObject?.Rule?.Predicates?.some((predicate) => predicate.ColumnId !== undefined && predicate.ColumnId === '');
         if (isAPredicateWithInvalidColumnId) {
-            return 'Predicates with custom scope need a valid column';
+            return 'Predicates with a custom scope require a valid column.';
         }
     }
     return true;

package/src/View/Components/NewScopeComponent.js

@@ -14,13 +14,13 @@ import { TagList } from '../../components/Tag/Tag';
 export const isScopeValid = ({ Scope }) => {
     const result = [];
     if (!Scope) {
-        return 'No scope specified or scope is empty';
+        return 'A scope is required.';
     }
     if (Scope && 'ColumnIds' in Scope && Scope.ColumnIds.length === 0) {
-        result.push('No Columns selected in Scope');
+        result.push('Please select at least one column for the scope.');
     }
     if (Scope && 'DataTypes' in Scope && Scope.DataTypes.length === 0) {
-        result.push('No Data Types selected in Scope');
+        result.push('Please select at least one data type for the scope.');
     }
     return result.length ? result.join(', ') : true;
 };

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/AdaptablePopupConfirmation.js

@@ -51,7 +51,7 @@ export const AdaptablePopupConfirmation = (props) => {
                             setDisableDeleteConfirmation(!disableDeleteConfirmation);
                         } }, "Do not show this again")),
                 props.showInputBox && (React.createElement(Box, { className: "twa:p-2", "data-name": "body" },
-                    React.createElement("p", null, "Please enter a comment to confirm"),
+                    React.createElement("p", null, "Please enter a comment to confirm."),
                     React.createElement(Input, { className: "twa:mt-2 twa:w-full", value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }))),
                 React.createElement(Flex, { className: "twa:mt-3 twa:p-2", "data-name": "footer", justifyContent: "space-between" },
                     props.cancelButtonText != null ? (React.createElement(SimpleButton, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onCancelForm() }, props.cancelButtonText)) : (React.createElement("div", null)),

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/CustomSort/Wizard/CustomSortColumnWizardSection.js

@@ -18,13 +18,13 @@ export const renderCustomSortColumn = (data) => {
 };
 export const isValidCustomSortColumn = (data, allCustomSorts) => {
     if (!data.Name) {
-        return 'Custom Sort Name cannot be blank';
+        return 'A name is required.';
     }
     if (allCustomSorts.some((customSort) => customSort.Name === data.Name && customSort.Uuid !== data.Uuid)) {
-        return 'A Custom Sort already exists with that name';
+        return 'A Custom Sort with this name already exists.';
     }
     if (!data.ColumnId) {
-        return 'You have to select a Column for Custom Sort';
+        return 'Please select a column for the Custom Sort.';
     }
     return true;
 };

package/src/View/CustomSort/Wizard/CustomSortValuesWizardSection.js

@@ -11,7 +11,7 @@ import { parseToISO } from '../../../Utilities/Helpers/DateHelper';
 import { TagList } from '../../../components/Tag';
 export const isValidCustomSortOrder = (data) => {
     if (!data.SortedValues || !data.SortedValues.length) {
-        return 'You have to specify at least one value for Custom Sort order';
+        return 'At least one value is required for the Custom Sort order.';
     }
     return true;
 };

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/FlashingCell/Wizard/isValidFlashingCellRules.js

@@ -1,7 +1,7 @@
 import { isAdaptableRuleValid } from '../../Components/EntityRulesEditor/Utilities';
 export const isValidFlashingCellRules = (flashingCell, api, context) => {
     if (!flashingCell.Rule?.Predicates?.length && !flashingCell.Rule.BooleanExpression) {
-        return 'No Rule defined for Flashing Cell';
+        return 'A rule is required for the Flashing Cell.';
     }
     const isRuleValid = isAdaptableRuleValid(flashingCell, api, context);
     if (typeof isRuleValid === 'string') {

package/src/View/FreeTextColumn/Wizard/FreeTextColumnSettingsWizardSection.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { FreeTextColumn } from '../../../AdaptableState/FreeTextColumnState';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 export declare const renderFreeTextColumnSummary: (data: FreeTextColumn) => React.JSX.Element;
-export declare const isValidFreeTextColumn: (data: FreeTextColumn, api: AdaptableApi) => true | "Column Id cannot be empty" | "A Column already exists with that id" | "No data type specified for column";
+export declare const isValidFreeTextColumn: (data: FreeTextColumn, api: AdaptableApi) => true | "A Column ID is required." | "A column with this ID already exists." | "A data type is required for the column.";
 export type FreeTextColumnSettingsWizardSectionProps = {
     onChange: (data: FreeTextColumn) => void;
     isEdit: boolean;

package/src/View/FreeTextColumn/Wizard/FreeTextColumnSettingsWizardSection.js

@@ -40,15 +40,15 @@ export const renderFreeTextColumnSummary = (data) => {
 export const isValidFreeTextColumn = (data, api) => {
     const columns = api.columnApi.getUIAvailableColumns();
     if (!data.ColumnId) {
-        return 'Column Id cannot be empty';
+        return 'A Column ID is required.';
     }
     const columnsWithSameIdCount = columns.filter((c) => c.columnId === data.ColumnId).length;
     const hasAlreadyExistingId = data.Uuid ? columnsWithSameIdCount > 1 : columnsWithSameIdCount > 0;
     if (hasAlreadyExistingId) {
-        return 'A Column already exists with that id';
+        return 'A column with this ID already exists.';
     }
     if (!data.FreeTextColumnSettings.DataType) {
-        return 'No data type specified for column';
+        return 'A data type is required for the column.';
     }
     return true;
 };

package/src/View/Layout/LayoutViewPanel.js

@@ -79,7 +79,7 @@ function mapDispatchToProps(dispatch) {
         showMissingLayoutsError: () => {
             dispatch(PopupRedux.PopupShowConfirmation({
                 Header: 'Missing Layouts',
-                Msg: 'You have not defined any Layout! See the console for more details.',
+                Msg: 'No Layouts have been defined. Please check the console for details.',
                 ConfirmAction: null,
                 ConfirmButtonText: 'OK',
                 CancelButtonText: null,