@adaptabletools/adaptable 20.3.0 → 21.0.0-canary.1

package/src/View/Components/ColumnFilter/utils.js

@@ -82,7 +82,7 @@ export const isPredicateEmpty = (predicate, predicateDef) => {
         predicate.args.length === 0 ||
         predicate.args.every((arg) => arg == undefined));
 };
-export const mapColumnFilterToQlPredicate = (columnFilter, abColumn, qlPredicateDefs, columnFilterOptions, api) => {
+export const mapColumnFilterToQlPredicate = (columnFilter, abColumn, qlPredicateDefs, columnFilterOptions, filterComponent, api) => {
     const combinator = columnFilter?.PredicatesOperator ?? 'AND';
     const qlPredicate = {
         operator: combinator,
@@ -99,6 +99,7 @@ export const mapColumnFilterToQlPredicate = (columnFilter, abColumn, qlPredicate
                     if (typeof defaultNumericColumnFilter === 'function') {
                         const context = {
                             column: abColumn,
+                            filterComponent,
                             ...api.internalApi.buildBaseContext(),
                         };
                         defaultQlNumberPredicate = defaultNumericColumnFilter(context);
@@ -118,6 +119,7 @@ export const mapColumnFilterToQlPredicate = (columnFilter, abColumn, qlPredicate
                     if (typeof defaultTextColumnFilter === 'function') {
                         const context = {
                             column: abColumn,
+                            filterComponent,
                             ...api.internalApi.buildBaseContext(),
                         };
                         defaultQlTextPredicate = defaultTextColumnFilter(context);
@@ -131,12 +133,14 @@ export const mapColumnFilterToQlPredicate = (columnFilter, abColumn, qlPredicate
                     : { operator: 'Contains', args: [] };
                 break;
             case 'date':
+            case 'dateString':
                 let defaultQlDatePredicate;
                 const defaultDateColumnFilter = columnFilterOptions.defaultDateColumnFilter;
                 if (defaultDateColumnFilter) {
                     if (typeof defaultDateColumnFilter === 'function') {
                         const context = {
                             column: abColumn,
+                            filterComponent,
                             ...api.internalApi.buildBaseContext(),
                         };
                         defaultQlDatePredicate = defaultDateColumnFilter(context);
@@ -160,6 +164,7 @@ export const mapColumnFilterToQlPredicate = (columnFilter, abColumn, qlPredicate
                     if (typeof defaultArrayColumnFilter === 'function') {
                         const context = {
                             column: abColumn,
+                            filterComponent,
                             ...api.internalApi.buildBaseContext(),
                         };
                         defaultQlArrayPredicate = defaultArrayColumnFilter(context);

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

@@ -107,9 +107,8 @@ export const EntityRulesEditor = (props) => {
             });
         }
     };
-    const isValuesPredicateDef = (colDef) => colDef && ['In', 'NotIn'].includes(colDef.id);
     const filteredPredicateDefs = predicateDefs.filter((def) => {
-        if (isValuesPredicateDef(def)) {
+        if (api.predicateApi.internalApi.IsInorNotInPredicateDef(def)) {
             return 'ColumnIds' in data.Scope && data.Scope.ColumnIds.length === 1;
         }
         return true;

package/src/View/Components/FilterForm/ListBoxFilterForm.js

@@ -29,7 +29,7 @@ export const ColumnValuesSelect = (props) => {
             minWidth: `var(--ab-cmp-select-column-menu-${column.columnId}__min-width, var(--ab-cmp-select-column-menu__min-width, 160px))`,
         };
     }, [column.columnId]);
-    const component = (React.createElement(Select, { key: "select", isMulti: true, resizable: true, showHeaderSelectionCheckbox: true, searchable: true, closeMenuOnSelect: false, menuStyle: menuStyle, ...props.selectProps, options: options, value: value, isLoading: props.isLoading, onChange: props.onChange }));
+    const component = (React.createElement(Select, { key: "select", isMulti: true, resizable: true, showHeaderSelectionCheckbox: true, searchable: 'menulist', closeMenuOnSelect: false, menuStyle: menuStyle, ...props.selectProps, options: options, value: value, isLoading: props.isLoading, onChange: props.onChange }));
     return (React.createElement("div", { className: join(baseClassName, props.isLoading && `${baseClassName}--loading`, !value.length && `${baseClassName}--empty`), onKeyDownCapture: (e) => {
             const event = e.nativeEvent || e;
             event.stopPropagation = () => {

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

@@ -8,7 +8,7 @@ import { ButtonNew } from '../../Buttons/ButtonNew';
 import { PopupPanel } from './PopupPanel';
 import { Flex } from 'rebass';
 import { CheckBox } from '../../../../components/CheckBox';
-import { LayoutShowNotAssociatedObjects } from '../../../../Redux/ActionsReducers/InternalRedux';
+import { LayoutShowNonExtendedObjects } from '../../../../Redux/ActionsReducers/InternalRedux';
 import SimpleButton from '../../../../components/SimpleButton';
 import { useAdaptable } from '../../../AdaptableContext';
 import { useEffect } from 'react';
@@ -113,16 +113,16 @@ export const AdaptablePopupModuleView = (props) => {
         .getModuleService()
         .getModuleById(props.module.moduleInfo.ModuleName);
     const dispatch = useDispatch();
-    const showLayoutNotAssociatedObjects = useSelector((state) => state.Internal.Layout.ShowLayoutNotAssociatedObjects);
-    const toggleButtonShowLayoutAssociatedObjects = () => {
-        if (!adaptableModule?.canBeAssociatedWithLayouts()) {
+    const showLayoutNonExtendedObjects = useSelector((state) => state.Internal.Layout.showLayoutNonExtendedObjects);
+    const toggleButtonShowLayoutExtensionObjects = () => {
+        if (!adaptableModule?.containsLayoutExtensions()) {
             return;
         }
         if (!props.api.layoutApi.internalApi.hasLayoutSpecificObjects()) {
             return;
         }
         return (React.createElement(Flex, { justifyContent: "flex-start" },
-            React.createElement(CheckBox, { padding: 0, margin: 0, checked: showLayoutNotAssociatedObjects, onChange: (checked) => dispatch(LayoutShowNotAssociatedObjects(checked)) },
+            React.createElement(CheckBox, { padding: 0, margin: 0, checked: showLayoutNonExtendedObjects, onChange: (checked) => dispatch(LayoutShowNonExtendedObjects(checked)) },
                 "Show ",
                 moduleInfo.FriendlyName,
                 "s not available in current Layout")));
@@ -132,7 +132,7 @@ export const AdaptablePopupModuleView = (props) => {
             " ",
             newButton), infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() },
         moduleViewProperties.HeaderComponent && React.createElement(moduleViewProperties.HeaderComponent, null),
-        toggleButtonShowLayoutAssociatedObjects(),
+        toggleButtonShowLayoutExtensionObjects(),
         items?.length ? (React.createElement(AdaptableObjectList, { module: props.module, items: items })) : (React.createElement(EmptyContent, null, emptyContent ?? `Click 'New' to create a new ${moduleInfo.FriendlyName}`)),
         isWizardOpen && EditWizard && (React.createElement(EditWizard, { abObjectType: abObjectType, moduleInfo: moduleInfo, data: null, popupParams: props.popupParams, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));
 };

package/src/View/Components/PredicateEditor/PredicateEditor.js

@@ -10,7 +10,6 @@ import { ColumnValuesSelect } from '../FilterForm/ListBoxFilterForm';
 import { useAdaptable } from '../../AdaptableContext';
 import { useDistinctFilterColumnValues } from '../ColumnFilter/components/FloatingFilterValues';
 import { useEffect } from 'react';
-const isValuesPredicateDef = (colDef) => colDef && ['In', 'NotIn'].includes(colDef.id);
 export const PredicateEditor = (props) => {
     const baseClassName = 'ab-PredicateEditor';
     const predicateDefsOptions = React.useMemo(() => props?.predicateDefs?.map((item) => ({
@@ -68,7 +67,7 @@ export const PredicateEditor = (props) => {
             index > 0 && React.createElement(HelpBlock, { margin: 2 }, "AND"),
             React.createElement(Flex, { key: index, flex: 1, flexDirection: "column" },
                 React.createElement(AdaptableInput, { "data-name": `predicate-input-${index}`, marginTop: 2, type: predicateDefInput.type, autoFocus: index === 0, value: props.predicate.Inputs?.[index] ?? '', onChange: (e) => handlePredicateInputChange(e, index) })))))),
-        isValuesPredicateDef(currentPredicateDef) && (React.createElement(Box, { mt: 2 },
+        adaptable.api.predicateApi.internalApi.IsInorNotInPredicateDef(currentPredicateDef) && (React.createElement(Box, { mt: 2 },
             React.createElement(ColumnValuesSelect, { isLoading: isDistinctColumnValuesLoading, column: column, options: quickFilterValues.values, selectProps: {
                     onMenuOpen,
                 }, dataType: column.dataType, value: props.predicate.Inputs, onChange: handlePredicateValuesChange })))));

package/src/View/Components/Selectors/BulkUpdateValueSelector.js

@@ -17,7 +17,7 @@ export const BulkUpdateValueSelector = (props) => {
     // which is then triggering a get all values
     // not sure that we need to
     const permittedValueSelector = (React.createElement(Box, null,
-        React.createElement(PermittedValuesSelector, { allowNewValues: true, disabled: props.disabled || !props.selectedColumn, value: props.selectedColumnValue === '' ? null : props.selectedColumnValue, columnId: columnId, placeholder: isDateType ? 'Select' : 'Select or type new value', loadValues: useCallback(({ currentSearchValue }) => {
+        React.createElement(PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', disabled: props.disabled || !props.selectedColumn, value: props.selectedColumnValue === '' ? null : props.selectedColumnValue, columnId: columnId, placeholder: isDateType ? 'Select' : 'Select or type new value', loadValues: useCallback(({ currentSearchValue }) => {
                 if (!columnId || !props.selectedGridCells.length) {
                     return Promise.resolve([]);
                 }

package/src/View/Components/Selectors/ColumnSelector.js

@@ -24,7 +24,7 @@ export const ColumnSelector = function (props) {
         }
         return true;
     });
-    return (React.createElement(Select, { "data-name": "column-selector", disabled: props.disabled, isMulti: props.isMulti, menuPosition: props.menuPosition, value: props.value, placeholder: props.placeholder ?? 'Select Column', onChange: (colId) => {
+    return (React.createElement(Select, { "data-name": "column-selector", searchable: 'inline', disabled: props.disabled, isMulti: props.isMulti, menuPosition: props.menuPosition, value: props.value, placeholder: props.placeholder ?? 'Select Column', onChange: (colId) => {
             props.onChange(colId);
         }, options: options }));
 };

package/src/View/Components/Selectors/FieldSelector.js

@@ -11,7 +11,7 @@ export const FieldSelector = (props) => {
         value: field.name,
     }));
     return (React.createElement(React.Fragment, null,
-        React.createElement(Select, { "data-name": "column-selector", disabled: props.disabled, isMulti: false, menuPosition: props.menuPosition, value: props.value || undefined, placeholder: props.placeholder ?? 'Select Field', onChange: (fieldValue) => {
+        React.createElement(Select, { "data-name": "column-selector", searchable: 'inline', disabled: props.disabled, isMulti: false, menuPosition: props.menuPosition, value: props.value || undefined, placeholder: props.placeholder ?? 'Select Field', onChange: (fieldValue) => {
                 props.onChange(fieldValue);
             }, options: options })));
 };

package/src/View/Components/Selectors/PermittedValuesSelector.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { SelectProps } from '../../../components/Select';
 export type ValueType = number | string | Date;
 interface PermittedValuesSelectorProps<Value extends ValueType, IsMulti extends boolean> {
+    searchable?: false | 'inline' | 'menulist';
     isMulti?: IsMulti;
     columnId: string;
     value: IsMulti extends true ? Value[] : Value;

package/src/View/Components/Selectors/PermittedValuesSelector.js

@@ -31,7 +31,7 @@ export const PermittedValuesSelector = function (props) {
                         return currentSearchValue;
                     },
                 })
-                : adaptable.api.gridApi.internalApi.getDistinctFilterDisplayValuesForColumn({
+                : adaptable.api.filterApi.columnFilterApi.internalApi.getColumnFilterValues({
                     columnId: props.columnId,
                     get currentSearchValue() {
                         searchValueUsedInFilterValue = true;
@@ -97,5 +97,5 @@ export const PermittedValuesSelector = function (props) {
             reload();
         }
     };
-    return (React.createElement(Select, { "aria-label": "Permitted Values Selector", menuPortalTarget: props.menuPortalTarget, size: props.size, isMulti: props.isMulti, className: props.className, disabled: props.disabled, closeMenuOnSelect: !props.isMulti, "data-name": "permitted-values-selector", placeholder: props.placeholder || (props.allowNewValues ? 'Select or type new value' : 'Select value'), isCreatable: isCreatable, isClearable: true, onMenuOpen: reload, options: options, isLoading: isLoading, onInputChange: onInputChange, onChange: handleOnChange, onFocus: props.onFocus, onBlur: props.onBlur, value: props.value }));
+    return (React.createElement(Select, { "aria-label": "Permitted Values Selector", menuPortalTarget: props.menuPortalTarget, searchable: props.searchable, size: props.size, isMulti: props.isMulti, className: props.className, disabled: props.disabled, closeMenuOnSelect: !props.isMulti, "data-name": "permitted-values-selector", placeholder: props.placeholder || (props.allowNewValues ? 'Select or type new value' : 'Select value'), isCreatable: isCreatable, isClearable: true, onMenuOpen: reload, options: options, isLoading: isLoading, onInputChange: onInputChange, onChange: handleOnChange, onFocus: props.onFocus, onBlur: props.onBlur, value: props.value }));
 };

package/src/View/Dashboard/Dashboard.js

@@ -33,7 +33,7 @@ const DashboardComponent = (props) => {
             }
             else {
                 const moduleToolbarName = visibleToolbarName;
-                if (props.api.internalApi.getModuleService().isModuleAvailable(moduleToolbarName)) {
+                if (props.api.internalApi.getModuleService().isAdapTableModulePresent(moduleToolbarName)) {
                     let moduleToolbarView = AdaptableViewPanelFactory.get(moduleToolbarName);
                     if (moduleToolbarView) {
                         let moduleInfo = props.api.internalApi
@@ -92,7 +92,7 @@ const DashboardComponent = (props) => {
     let instanceName = props.api.internalApi.getToolbarTitle();
     let dashboardOptions = props.api.optionsApi.getDashboardOptions();
     const shouldRenderQuickSearchHeader = dashboardOptions.showQuickSearchInHeader &&
-        props.api.internalApi.getModuleService().getModuleById(QuickSearchModuleId).isModuleAvailable();
+        props.api.internalApi.getModuleService().isAdapTableModulePresent(QuickSearchModuleId);
     const applicationIcon = props.api.optionsApi.getUserInterfaceOptions().applicationIcon;
     if (props.DashboardState.IsHidden) {
         return React.createElement("div", null);

package/src/View/Dashboard/DashboardPopup.js

@@ -40,7 +40,9 @@ class DashboardPopupComponent extends React.Component {
                     .find((ct) => ct.name === vt);
                 return customToolbar
                     ? true
-                    : this.props.api.internalApi.getModuleService().isModuleAvailable(vt);
+                    : this.props.api.internalApi
+                        .getModuleService()
+                        .isAdapTableModulePresent(vt);
             });
             return { ...tab, Toolbars };
         });

package/src/View/Dashboard/PinnedDashboard.js

@@ -7,7 +7,7 @@ export const PinnedDashboard = (props) => {
     const adaptable = useAdaptable();
     const dashboardState = useSelector((state) => state.Dashboard);
     const pinnedToolbars = (dashboardState.PinnedToolbars ?? []).filter((tb) => adaptable.api.dashboardApi.internalApi.isToolbarCustom(tb) ||
-        adaptable.api.internalApi.getModuleService().isModuleAvailable(tb));
+        adaptable.api.internalApi.getModuleService().isAdapTableModulePresent(tb));
     if (!pinnedToolbars || pinnedToolbars.length == 0) {
         return React.createElement(React.Fragment, null);
     }

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -18,7 +18,7 @@ export const DataChangeHistoryGrid = (props) => {
         const initializeAdaptableGrid = async () => {
             const gridOptions = buildGridOptions(mainAdaptableInstance, changeHistoryLog);
             const adaptableOptions = buildAdaptableOptions(mainAdaptableInstance, adaptableContainerId, agGridContainerId, undoChangeEnabled, onUndoChange, onClearRow);
-            const modules = mainAdaptableInstance.getAgGridRegisteredModules();
+            const modules = mainAdaptableInstance.agGridModulesAdapter.getAgGridRegisteredModules();
             const dataChangeHistoryAdaptableApi = await AdaptableAgGrid._initInternal({
                 variant: 'vanilla',
                 adaptableOptions,
@@ -140,8 +140,14 @@ const buildAdaptableOptions = (mainAdaptableInstance, adaptableContainerId, agGr
                                 SortOrder: 'Desc',
                             },
                         ],
-                        ColumnWidths: {
-                            undoActionColumn: 110,
+                        ColumnSizing: {
+                            'changeInfo.primaryKeyValue': { Flex: 3 },
+                            changedColumnLabel: { Flex: 3 },
+                            'changeInfo.oldValue': { Flex: 3 },
+                            'changeInfo.newValue': { Flex: 3 },
+                            'changeInfo.changedAt': { Flex: 3 },
+                            changeTriggerLabel: { Flex: 2 },
+                            undoActionColumn: { Width: 110 },
                         },
                         ColumnPinning: {
                             undoActionColumn: 'right',
@@ -213,49 +219,31 @@ const buildGridOptions = (mainAdaptableInstance, changeHistoryLog) => {
                 headerName: `Row (${mainPrimaryKeyColumnHeader})`,
                 field: 'changeInfo.primaryKeyValue',
                 cellDataType: 'text',
-                suppressAutoSize: false,
-                flex: 3,
-                initialFlex: 3,
             },
             {
                 headerName: 'Column',
                 field: 'changedColumnLabel',
                 cellDataType: 'text',
-                suppressAutoSize: false,
-                flex: 3,
-                initialFlex: 3,
             },
             {
                 headerName: 'Previous',
                 field: 'changeInfo.oldValue',
                 cellDataType: 'text',
-                suppressAutoSize: false,
-                flex: 3,
-                initialFlex: 3,
             },
             {
                 headerName: 'New',
                 field: 'changeInfo.newValue',
                 cellDataType: 'text',
-                suppressAutoSize: false,
-                flex: 3,
-                initialFlex: 3,
             },
             {
                 headerName: 'Changed',
                 field: 'changeInfo.changedAt',
                 cellDataType: 'date',
-                suppressAutoSize: false,
-                flex: 3,
-                initialFlex: 3,
             },
             {
                 headerName: 'Source',
                 field: 'changeTriggerLabel',
                 cellDataType: 'text',
-                suppressAutoSize: false,
-                flex: 2,
-                initialFlex: 2,
             },
         ],
         rowData: mapChangeHistoryRowData(changeHistoryLog, mainAdaptableInstance),

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -119,53 +119,90 @@ export const getFormatDisplayTypeForScope = (scope, api) => {
     if ('All' in scope) {
         return undefined;
     }
-    // need to see if all columns are numeric or date
+    // Date-related data types that should all be treated as 'date'
+    const dateTypes = api.columnApi.internalApi.getColumnDateTypes();
+    // Check for ColumnIds in scope
     if ('ColumnIds' in scope) {
         const columns = scope.ColumnIds.map((c) => api.columnApi.getColumnWithColumnId(c)).filter(Boolean);
         const columnDataTypes = uniq(columns.map((c) => c.dataType));
-        if (columnDataTypes.length == 1 && columnDataTypes[0] == 'number') {
+        // If there's only one data type
+        if (columnDataTypes.length === 1) {
+            const dataType = columnDataTypes[0];
+            if (dataType === 'number') {
+                return 'number';
+            }
+            if (dateTypes.includes(dataType)) {
+                return 'date';
+            }
+            if (dataType === 'text') {
+                return 'text';
+            }
+        }
+        // If there are multiple data types but they're all date types
+        else if (columnDataTypes.length > 0 &&
+            columnDataTypes.every((type) => dateTypes.includes(type))) {
+            return 'date';
+        }
+        return undefined;
+    }
+    // Check for DataTypes in scope
+    if ('DataTypes' in scope && scope.DataTypes.length === 1) {
+        const dataType = scope.DataTypes[0];
+        if (dataType === 'number') {
             return 'number';
         }
-        if (columnDataTypes.length == 1 && columnDataTypes[0] == 'date') {
+        if (dateTypes.includes(dataType)) {
             return 'date';
         }
-        if (columnDataTypes.length == 1 && columnDataTypes[0] == 'text') {
+        if (dataType === 'text') {
             return 'text';
         }
-        return undefined;
-    }
-    if ('DataTypes' in scope && scope.DataTypes.length == 1 && scope.DataTypes[0] == 'number') {
-        return 'number';
     }
-    if ('DataTypes' in scope && scope.DataTypes.length == 1 && scope.DataTypes[0] == 'date') {
+    // If there are multiple data types but they're all date types
+    else if ('DataTypes' in scope &&
+        scope.DataTypes.length > 0 &&
+        scope.DataTypes.every((type) => dateTypes.includes(type))) {
         return 'date';
     }
-    if ('DataTypes' in scope && scope.DataTypes.length == 1 && scope.DataTypes[0] == 'text') {
-        return 'text';
-    }
+    // Check for ColumnTypes in scope
     if ('ColumnTypes' in scope && scope.ColumnTypes.length) {
-        // if a Pivot Total Column Type is specified, we can safely assume that the data type is number
+        // If a Pivot Total Column Type is specified, we can safely assume that the data type is number
         const pivotTotalTypes = [
             PIVOT_ANY_TOTAL_COLUMN_TYPE,
             PIVOT_GRAND_TOTAL_COLUMN_TYPE,
             PIVOT_COLUMN_TOTAL_COLUMN_TYPE,
             PIVOT_AGGREGATION_TOTAL_COLUMN_TYPE,
         ];
-        // if all column types are pivot total types, we can safely assume that the data type is number
+        // If all column types are pivot total types, we can safely assume that the data type is number
         if (scope.ColumnTypes.length > 0 &&
             scope.ColumnTypes.every((type) => pivotTotalTypes.includes(type))) {
             return 'number';
         }
-        // need to check if all column with this column type has the same data type and return that particular one
+        // Check if all columns with this column type have the same data type
         const columns = scope.ColumnTypes.flatMap((columnType) => {
             return api.columnApi.getColumnsByColumnType(columnType);
         });
-        // check if all have the same type
-        if (columns.length &&
-            columns.every((column) => column.dataType === columns[0].dataType) &&
-            // supported data types
-            ['number', 'date', 'text'].includes(columns[0].dataType)) {
-            return columns[0].dataType;
+        if (columns.length) {
+            // Check if all columns have the same type
+            const allSameType = columns.every((column) => column.dataType === columns[0].dataType);
+            // Handle specific data types
+            if (allSameType) {
+                const dataType = columns[0].dataType;
+                if (dataType === 'number') {
+                    return 'number';
+                }
+                if (dateTypes.includes(dataType)) {
+                    return 'date';
+                }
+                if (dataType === 'text') {
+                    return 'text';
+                }
+            }
+            // Check if all columns are date types (even if they're different date types)
+            const allDateTypes = columns.every((column) => dateTypes.includes(column.dataType));
+            if (allDateTypes) {
+                return 'date';
+            }
         }
     }
     return undefined;

package/src/View/FormatColumn/Wizard/FormatColumnSettingsWizardSection.js

@@ -83,18 +83,18 @@ export const FormatColumnSettingsWizardSection = (props) => {
         React.createElement(Tabs.Content, null,
             React.createElement(Flex, { flexDirection: "row" },
                 React.createElement(FormLayout, null,
+                    React.createElement(FormRow, { label: "Cell Alignment" },
+                        React.createElement(ToggleGroup, null,
+                            React.createElement(Toggle, { icon: "align-left", pressed: data.CellAlignment === 'Left', onPressedChange: (pressed) => pressed
+                                    ? onCellAlignmentSelectChanged('Left')
+                                    : onCellAlignmentSelectChanged(null) }),
+                            React.createElement(Toggle, { icon: "align-center", pressed: data.CellAlignment === 'Center', onPressedChange: (pressed) => pressed
+                                    ? onCellAlignmentSelectChanged('Center')
+                                    : onCellAlignmentSelectChanged(null) }),
+                            React.createElement(Toggle, { icon: "align-right", pressed: data.CellAlignment === 'Right', onPressedChange: (pressed) => pressed
+                                    ? onCellAlignmentSelectChanged('Right')
+                                    : onCellAlignmentSelectChanged(null) }))),
                     data.Target === 'cell' && (React.createElement(React.Fragment, null,
-                        React.createElement(FormRow, { label: "Cell Alignment" },
-                            React.createElement(ToggleGroup, null,
-                                React.createElement(Toggle, { icon: "align-left", pressed: data.CellAlignment === 'Left', onPressedChange: (pressed) => pressed
-                                        ? onCellAlignmentSelectChanged('Left')
-                                        : onCellAlignmentSelectChanged(null) }),
-                                React.createElement(Toggle, { icon: "align-center", pressed: data.CellAlignment === 'Center', onPressedChange: (pressed) => pressed
-                                        ? onCellAlignmentSelectChanged('Center')
-                                        : onCellAlignmentSelectChanged(null) }),
-                                React.createElement(Toggle, { icon: "align-right", pressed: data.CellAlignment === 'Right', onPressedChange: (pressed) => pressed
-                                        ? onCellAlignmentSelectChanged('Right')
-                                        : onCellAlignmentSelectChanged(null) }))),
                         React.createElement(FormRow, { label: "Exclude Data Rows:" },
                             React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
                                 React.createElement(CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: data.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, mr: 2 }))),

package/src/View/GridInfo/GridInfoPopup/AdaptableObjectsSummary.js

@@ -13,7 +13,7 @@ export const AdaptableObjectsSummary = () => {
     const modules = adaptable.ModuleService.getModuleCollection();
     const baseClassName = 'ab-AdaptableObjectsSummary';
     return (React.createElement(Box, { className: baseClassName }, [...modules].map(([moduleName, module]) => {
-        if (!module.isModuleAvailable()) {
+        if (!module.isModuleVisible()) {
             return null;
         }
         const items = module?.toViewAll?.();

package/src/View/GridInfo/GridInfoPopup/GridInfoPopup.js

@@ -10,7 +10,7 @@ import { AdaptableObjectRow } from '../../Components/AdaptableObjectRow';
 import { PopupPanel } from '../../Components/Popups/AdaptablePopup/PopupPanel';
 import { AdaptableObjectsSummary } from './AdaptableObjectsSummary';
 import { ADAPTABLE_VERSION } from '../../../EnvVars';
-import { AG_GRID_VERSION } from '../../../agGrid/agGridModules';
+import { AG_GRID_VERSION } from '../../../agGrid/AgGridModulesAdapter';
 const adaptableVersion = ADAPTABLE_VERSION;
 const agGridVersion = AG_GRID_VERSION;
 export const GridInfoPopup = (props) => {

package/src/View/Layout/TransposedPopup.js

@@ -28,7 +28,7 @@ export const TransposedPopup = (props) => {
         // customisable
         return visibleColumns
             ? adaptable.api.columnApi.getVisibleColumns()
-            : adaptable.api.columnApi.getColumns();
+            : adaptable.api.columnApi.getUIAvailableColumns();
     }, []);
     /**
      * This is used as first field
@@ -158,7 +158,7 @@ export const TransposedPopup = (props) => {
             rowData: transposedRowsAndColumns.transposedRows,
             sideBar: false,
         };
-        const modules = adaptable.getAgGridRegisteredModules();
+        const modules = adaptable.agGridModulesAdapter.getAgGridRegisteredModules();
         AdaptableAgGrid._initInternal({
             variant: 'vanilla',
             adaptableOptions,

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import * as LayoutRedux from '../../../Redux/ActionsReducers/LayoutRedux';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
-import ObjectFactory from '../../../Utilities/ObjectFactory';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
 import { SettingsSection, SettingsSectionSummary } from './sections/SettingsSection';
 import { Box } from 'rebass';
@@ -29,17 +28,17 @@ export const LayoutWizard = (props) => {
         if (initialLayout) {
             preparedLayout = cloneObject(initialLayout);
             if (props?.popupParams?.action === 'Clone') {
-                preparedLayout.Name = '';
-                delete preparedLayout.Uuid;
+                preparedLayout = {
+                    ...adaptable.api.layoutApi.internalApi.cloneLayout(preparedLayout),
+                    Name: '',
+                };
             }
         }
         else {
             const shouldCreatePivot = props.popupParams?.config?.layoutType === 'pivot' ||
                 props.abObjectType?.name?.toLowerCase().includes('pivot') ||
                 false;
-            preparedLayout = shouldCreatePivot
-                ? ObjectFactory.CreateEmptyPivotLayout({ Name: '' })
-                : ObjectFactory.CreateEmptyLayout({ Name: '' });
+            preparedLayout = adaptable.api.layoutApi.internalApi.buildInitialLayout({ Name: '' }, shouldCreatePivot ? 'pivot' : 'table');
         }
         if (preparedLayout.SuppressAggFuncInHeader === undefined) {
             preparedLayout.SuppressAggFuncInHeader =
@@ -62,7 +61,6 @@ export const LayoutWizard = (props) => {
                 break;
             case 'Clone':
                 const clonedLayout = { ...layout };
-                delete clonedLayout.Uuid;
                 dispatch(LayoutRedux.LayoutAdd(clonedLayout));
                 dispatch(LayoutRedux.LayoutSelect(clonedLayout.Name));
                 break;