@adaptabletools/adaptable 20.3.0 → 21.0.0-canary.0

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/sections/ColumnsSection.js

@@ -45,7 +45,7 @@ export const ColumnsSectionSummary = () => {
             }
             const friendlyName = adaptable.api.columnApi.getFriendlyNameForColumnId(columnId, layout);
             const header = layout.ColumnHeaders?.[columnId] ?? '';
-            const columnWidth = layout.ColumnWidths?.[columnId];
+            const columnWidth = layout.ColumnSizing?.[columnId]?.Width;
             const columnPinning = layout.ColumnPinning?.[columnId];
             let agg = (layout.TableAggregationColumns || []).find((agg) => agg.ColumnId === columnId)?.AggFunc;
             agg = typeof agg === 'object' ? agg.type : agg;
@@ -156,7 +156,11 @@ const ColumnRow = (props) => {
     ];
     const { column } = props;
     // width
-    const columnWidth = props.layout.ColumnWidths?.[column.columnId];
+    const columnWidth = props.layout.ColumnSizing?.[column.columnId]?.Width;
+    const columnFlex = props.layout.ColumnSizing?.[column.columnId]?.Flex;
+    const minWidth = props.layout.ColumnSizing?.[column.columnId]?.MinWidth;
+    const maxWidth = props.layout.ColumnSizing?.[column.columnId]?.MaxWidth;
+    const resizable = column.resizable !== false;
     const visible = (!isPivotLayout(props.layout) &&
         props.layout.TableColumns.includes(column.columnId) &&
         props.layout.ColumnVisibility?.[column.columnId] !== false) ||
@@ -186,11 +190,29 @@ const ColumnRow = (props) => {
                                 props.onColumnNameChange(props.column.columnId, event.target.value);
                             }, value: customHeader })),
                     React.createElement(FormRow, { label: "Width" },
-                        React.createElement(Input, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column width", disabled: !props.column.resizable, onChange: (event) => {
+                        React.createElement(Input, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column width", disabled: resizable === false, onChange: (event) => {
                                 let value = parseFloat(event.target.value);
                                 value = typeof value === 'number' && !isNaN(value) ? value : void 0;
                                 props.onColumnWidthChange(props.column.columnId, value);
-                            }, value: columnWidth })),
+                            }, value: columnWidth ?? '' })),
+                    React.createElement(FormRow, { label: "Flex" },
+                        React.createElement(Input, { "data-name": "column-flex", className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column flex", disabled: resizable === false, onChange: (event) => {
+                                let value = parseFloat(event.target.value);
+                                value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                                props.onColumnFlexChange(props.column.columnId, value);
+                            }, value: columnFlex ?? '' })),
+                    React.createElement(FormRow, { label: "Min Width" },
+                        React.createElement(Input, { "data-name": "column-min-width", className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column min width", disabled: resizable === false, onChange: (event) => {
+                                let value = parseFloat(event.target.value);
+                                value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                                props.onColumnMinWidthChange(props.column.columnId, value);
+                            }, value: minWidth ?? '' })),
+                    React.createElement(FormRow, { label: "Max Width" },
+                        React.createElement(Input, { "data-name": "column-max-width", className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column max width", disabled: resizable === false, onChange: (event) => {
+                                let value = parseFloat(event.target.value);
+                                value = typeof value === 'number' && !isNaN(value) ? value : void 0;
+                                props.onColumnMaxWidthChange(props.column.columnId, value);
+                            }, value: maxWidth ?? '' })),
                     React.createElement(FormRow, { label: "Pinning" },
                         React.createElement(DropdownButton, { "data-name": "column-pinning", columns: ['label'], items: pinningOptions }, pinningOptions.find((option) => option.value === columnPinning).label))))))));
 };
@@ -345,12 +367,45 @@ export const ColumnsSection = (props) => {
         });
     };
     const handleColumnWidthChange = (columnId, width) => {
+        const ColumnSizing = { ...layout.ColumnSizing };
+        const colSizingForCol = { ...ColumnSizing[columnId] };
+        delete colSizingForCol.Flex;
+        colSizingForCol.Width = width;
+        ColumnSizing[columnId] = colSizingForCol;
         onChange({
             ...layout,
-            ColumnWidths: {
-                ...layout.ColumnWidths,
-                [columnId]: width,
-            },
+            ColumnSizing,
+        });
+    };
+    const handleColumnFlexChange = (columnId, flex) => {
+        const ColumnSizing = { ...layout.ColumnSizing };
+        const colSizingForCol = { ...ColumnSizing[columnId] };
+        delete colSizingForCol.Width;
+        colSizingForCol.Flex = flex;
+        ColumnSizing[columnId] = colSizingForCol;
+        onChange({
+            ...layout,
+            ColumnSizing,
+        });
+    };
+    const handleColumnMinWidthChange = (columnId, minWidth) => {
+        const ColumnSizing = { ...layout.ColumnSizing };
+        const colSizingForCol = { ...ColumnSizing[columnId] };
+        colSizingForCol.MinWidth = minWidth;
+        ColumnSizing[columnId] = colSizingForCol;
+        onChange({
+            ...layout,
+            ColumnSizing,
+        });
+    };
+    const handleColumnMaxWidthChange = (columnId, maxWidth) => {
+        const ColumnSizing = { ...layout.ColumnSizing };
+        const colSizingForCol = { ...ColumnSizing[columnId] };
+        colSizingForCol.MaxWidth = maxWidth;
+        ColumnSizing[columnId] = colSizingForCol;
+        onChange({
+            ...layout,
+            ColumnSizing,
         });
     };
     const visibleIds = layout.TableColumns.filter((colId) => {
@@ -382,7 +437,7 @@ export const ColumnsSection = (props) => {
             React.createElement(ReorderDraggable, { toIdentifier: (option) => `${option.columnId}`, isOptionDraggable: (option) => {
                     return option.moveable;
                 }, order: currentOrder, renderOption: (option) => {
-                    return (React.createElement(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange, onPinChange: handlePinChange, layout: layout, column: option }));
+                    return (React.createElement(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange, onPinChange: handlePinChange, layout: layout, column: option }));
                 }, onChange: handleColumnsChange }),
             renderSelectionSection({
                 options: visibleIds,

package/src/View/Layout/Wizard/sections/PivotAggregationsSection.js

@@ -327,30 +327,30 @@ export const PivotAggregationsSection = (props) => {
                                     label: StringExtensions.CamelCaseToHumanText(position),
                                     value: position,
                                 };
-                            }), placeholder: "Off", value: layout.GrandTotalRow, onChange: (value) => {
+                            }), placeholder: "[none]", value: layout.GrandTotalRow, onChange: (value) => {
                                 props.onChange({
                                     ...layout,
                                     GrandTotalRow: value,
                                 });
                             }, isClearable: true })),
                     React.createElement(FormRow, { label: 'Pivot Grand Total' },
-                        React.createElement(Select, { style: { width: 120 }, options: ['before', 'after'].map((position) => {
+                        React.createElement(Select, { style: { width: 160 }, options: ['before', 'after'].map((position) => {
                                 return {
                                     label: StringExtensions.CapitaliseFirstLetter(position),
                                     value: position,
                                 };
-                            }), placeholder: "Off", value: layout.PivotGrandTotal, onChange: (value) => {
+                            }), placeholder: "[none]", value: layout.PivotGrandTotal, onChange: (value) => {
                                 props.onChange({
                                     ...layout,
                                     PivotGrandTotal: value,
                                 });
                             }, isClearable: true })),
-                    React.createElement(FormRow, { label: 'Pivot Column Total' }, isPivotColumnTotalEnabled === true ? (React.createElement(Select, { style: { width: 120 }, options: ['before', 'after'].map((position) => {
+                    React.createElement(FormRow, { label: 'Pivot Column Total' }, isPivotColumnTotalEnabled === true ? (React.createElement(Select, { style: { width: 160 }, options: ['before', 'after'].map((position) => {
                             return {
                                 label: StringExtensions.CapitaliseFirstLetter(position),
                                 value: position,
                             };
-                        }), placeholder: "Off", value: layout.PivotColumnTotal, onChange: (value) => {
+                        }), placeholder: "[none]", value: layout.PivotColumnTotal, onChange: (value) => {
                             props.onChange({
                                 ...layout,
                                 PivotColumnTotal: value,

package/src/View/StatusBar/AdaptableStatusBar.js

@@ -18,10 +18,7 @@ export const AdaptableStatusBar = (props) => {
     const allMenuItems = useSelector((state) => state?.Internal?.SettingsPanelModuleEntries);
     return (React.createElement(Flex, { className: "ab-StatusBar-Panel", "data-id": props.context.Key }, statusSubPanels?.StatusBarPanels?.map((subPanel) => {
         const module = adaptable.ModuleService.getModuleById(subPanel);
-        if (!module) {
-            return React.createElement(React.Fragment, { key: subPanel });
-        }
-        if (!module.isModuleAvailable()) {
+        if (!module?.isModuleVisible()) {
             return React.createElement(React.Fragment, { key: subPanel });
         }
         /**

package/src/View/StatusBar/StatusBarPopup.js

@@ -27,7 +27,7 @@ export const StatusBarPopup = (props) => {
     }, [statusPanels]);
     const availableItems = ALL_STATUS_SUB_PANELS.filter((panel) => {
         const module = adaptable.ModuleService.getModuleById(panel);
-        return module && module.isModuleAvailable();
+        return module?.isModuleVisible();
     }).map((panel) => {
         const module = adaptable.ModuleService.getModuleById(panel);
         return { Id: panel, Title: module.moduleInfo.FriendlyName };

package/src/View/Theme/ThemeSelector.js

@@ -23,7 +23,7 @@ export const ThemeSelector = (props) => {
             label: theme.Description,
         };
     });
-    return (React.createElement(Select, { "aria-label": "Select Theme", "data-name": "select-theme-dropdown", searchable: false, options: optionThemes, value: currentTheme, disabled: disabled, size: props.size, onChange: (themeName) => {
+    return (React.createElement(Select, { "aria-label": "Select Theme", "data-name": "select-theme-dropdown", options: optionThemes, value: currentTheme, disabled: disabled, size: props.size, onChange: (themeName) => {
             dispatch(ThemeRedux.ThemeSelect(themeName));
         } }));
 };