@adaptabletools/adaptable-cjs 20.3.0 → 21.0.0-canary.1

package/src/View/Components/ColumnFilter/AdaptableColumnFilter.d.ts

@@ -4,7 +4,6 @@ export interface AdaptableColumnFilterProps {
     columnId: string;
     padding?: BoxProps['p'];
     wrapperProps?: BoxProps;
-    onChange?: () => void;
 }
 /**
  * This wrapper knows about predicates.

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

@@ -10,10 +10,9 @@ const useAdaptableFilterWrapper_1 = require("./useAdaptableFilterWrapper");
  * It transforms predicates in QlPredicates.
  */
 const AdaptableColumnFilter = (props) => {
-    const { qlPredicate, qlPredicateDefs, columnFilter, handlePredicateChange } = (0, useAdaptableFilterWrapper_1.useAdaptableFilterWrapper)(props.columnId);
+    const { qlPredicate, qlPredicateDefs, columnFilter, handlePredicateChange } = (0, useAdaptableFilterWrapper_1.useAdaptableFilterWrapper)(props.columnId, 'FilterForm');
     return (React.createElement(ColumnFilter_1.ColumnFilterComponent, { wrapperProps: props.wrapperProps, columnId: props.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: React.useCallback((predicate) => {
             handlePredicateChange(predicate);
-            props.onChange?.();
-        }, [handlePredicateChange, props.onChange]) }));
+        }, [handlePredicateChange]) }));
 };
 exports.AdaptableColumnFilter = AdaptableColumnFilter;

package/src/View/Components/ColumnFilter/AdaptableFloatingFilter.d.ts

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import { ColumnFilterProps } from '../../../Utilities/Interface/ColumnFilterProps';
 export interface AdaptableColumnFilterProps extends ColumnFilterProps {
-    onClear?: () => void;
-    onChange?: () => void;
 }
 /**
  * This wrapper knows about predicates.

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

@@ -12,15 +12,13 @@ const useAdaptableFilterWrapper_1 = require("./useAdaptableFilterWrapper");
  */
 const AdaptableFloatingFilter = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const { qlPredicate, qlPredicateDefs, columnFilter, column, handlePredicateChange, handleOnChange, handleClear, } = (0, useAdaptableFilterWrapper_1.useAdaptableFilterWrapper)(props.Column.columnId);
+    const { qlPredicate, qlPredicateDefs, columnFilter, column, handlePredicateChange, handleOnChange, handleClear, } = (0, useAdaptableFilterWrapper_1.useAdaptableFilterWrapper)(props.Column.columnId, 'FilterBar');
     const onClear = React.useCallback(() => {
         handleClear();
-        props.onClear?.();
-    }, [handleClear, props.onClear]);
+    }, [handleClear]);
     const onPredicateChange = React.useCallback((newPredicate) => {
         handlePredicateChange(newPredicate);
-        props.onChange?.();
-    }, [handlePredicateChange, props.onChange]);
+    }, [handlePredicateChange]);
     if (!column) {
         return null;
     }
@@ -36,8 +34,7 @@ const AdaptableFloatingFilter = (props) => {
                         Inputs: [],
                     },
                 ]);
-                props.onChange?.();
             }
-        }, onClear: onClear, columnId: props.Column.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: onPredicateChange, onChange: props.onChange }));
+        }, onClear: onClear, columnId: props.Column.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: onPredicateChange }));
 };
 exports.AdaptableFloatingFilter = AdaptableFloatingFilter;

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

@@ -66,7 +66,7 @@ const AndOrInput = (props) => {
 };
 const ColumnFilterComponent = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const autoApplyColumnFilter = adaptable.adaptableOptions.filterOptions.columnFilterOptions?.autoApplyColumnFilter ?? true;
+    const autoApplyColumnFilter = adaptable.api.filterApi.columnFilterApi.internalApi.shouldAutoApplyColumnFilter(props.columnId);
     const [predicateNotYetApplied, setPredicateNotYetApplied] = React.useState(props.predicate);
     const applyFilter = () => {
         props.onPredicateChange(currentPredicateRef.current);
@@ -120,7 +120,7 @@ const ColumnFilterComponent = (props) => {
             React.createElement(AndOrInput, { onChange: onCombineChange, operator: currentPredicate.operator }),
             React.createElement(SimpleButton_1.default, { ml: 2, onClick: () => onPredicateChange(null) }, "Clear All")),
         React.createElement(rebass_1.Flex, { flexDirection: "column", className: "ab-ColumnFilter", flex: 1, minHeight: 0, ...props.wrapperProps },
-            React.createElement(rebass_1.Box, { flex: 1, style: { overflow: 'auto' } },
+            React.createElement(rebass_1.Box, { style: { overflow: 'auto' } },
                 currentPredicate.args.map((predicate, index) => {
                     return (React.createElement(ColumnFilterEditor, { deleteDisabled: currentPredicate.args.length < 2, onDelete: () => {
                             const currentPredicate = currentPredicateRef.current;
@@ -145,7 +145,14 @@ const ColumnFilterComponent = (props) => {
                         } }));
                 }),
                 isLastPredicateValid && filterPredicateDropdown),
-            !autoApplyColumnFilter ? (React.createElement(rebass_1.Box, { pt: 2 },
-                React.createElement(SimpleButton_1.default, { tone: "accent", variant: "raised", onClick: applyFilter }, "Apply Filter"))) : null)));
+            !autoApplyColumnFilter ? (React.createElement(React.Fragment, null,
+                React.createElement(rebass_1.Box, { flex: 1, "data-name": "spacer" }),
+                React.createElement(rebass_1.Flex, { pt: 2, className: "ab-ColumnFilter-actions", justifyContent: "space-between" },
+                    React.createElement(rebass_1.Box, { className: "ab-ColumnFilter-action-apply" },
+                        React.createElement(SimpleButton_1.default, { tone: "accent", variant: "raised", onClick: applyFilter }, "Apply Filter")),
+                    React.createElement(rebass_1.Box, { className: "ab-ColumnFilter-action-reset" },
+                        React.createElement(SimpleButton_1.default, { tone: "neutral", variant: "raised", onClick: () => {
+                                setPredicateNotYetApplied(props.predicate);
+                            } }, "Reset Filter"))))) : null)));
 };
 exports.ColumnFilterComponent = ColumnFilterComponent;

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

@@ -33,6 +33,6 @@ const ColumnFilterWindow = (props) => {
                             }
                             return label;
                         }, onChange: (column) => setColumnId(column), filterColumn: (column) => column.queryable, isMulti: false, value: columnId })))),
-        React.createElement(AdaptableColumnFilter_1.AdaptableColumnFilter, { columnId: columnId, onChange: onChange })));
+        React.createElement(AdaptableColumnFilter_1.AdaptableColumnFilter, { columnId: columnId })));
 };
 exports.ColumnFilterWindow = ColumnFilterWindow;

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

@@ -13,13 +13,12 @@ const FloatingFilterInputList_1 = require("./components/FloatingFilterInputList"
 const utils_1 = require("./utils");
 const FloatingFilter = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const columnFilterOptions = adaptable.adaptableOptions.filterOptions.columnFilterOptions;
     /**
      * We always have a syntetic predicate with AND or OR, so the logic is easyer.
      * The wrapper is in charge of constructing the correct column filter.
      */
     const isMultiple = props.predicate?.args?.length > 1;
-    const isManualApply = !columnFilterOptions.autoApplyColumnFilter;
+    const isManualApply = !adaptable.api.filterApi.columnFilterApi.internalApi.shouldAutoApplyColumnFilter(props.columnId);
     const isInlineEditable = !isMultiple && !isManualApply;
     // only used when there is only one filter selected
     let singleFilterPredicateDef = null;

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

@@ -14,7 +14,7 @@ const LayoutColumnFilter = (props) => {
     const predicateDefs = api.filterApi.columnFilterApi.getFilterPredicateDefsForColumn(column);
     const qlDataType = (0, adaptableQlUtils_1.mapColumnDataTypeToExpressionFunctionType)(column.dataType);
     const qlPredicateDefs = predicateDefs.map((predDef) => (0, utils_1.mapAdaptablePredicateDefToQlPredicateDef)(predDef, qlDataType));
-    const qlPredicate = (0, utils_1.mapColumnFilterToQlPredicate)(props.columnFilter, column, qlPredicateDefs, columnFilterOptions, api);
+    const qlPredicate = (0, utils_1.mapColumnFilterToQlPredicate)(props.columnFilter, column, qlPredicateDefs, columnFilterOptions, 'FilterForm', api);
     const handlePredicateChange = (newPredicate) => {
         const newAdaptablePredicates = newPredicate.args.map(utils_1.mapQlPredicateToAdaptablePredicate);
         const newFilter = {

package/src/View/Components/ColumnFilter/components/ColumnFilterInput.js

@@ -74,7 +74,7 @@ const ColumnFilterInput = ({ type, value, onChange: onChangeProp, onClear: onCle
         }
     };
     if (type === 'date' && !showDatePicker) {
-        return (React.createElement(AdaptableDateInlineInput_1.AdaptableDateInlineInput, { value: liveValue, disabled: disabled, onFocus: onFocus, onBlur: onBlur, pr: 0, style: { border: 'none' }, onKeyDownCapture: onKeyDownCapture, onChange: (value) => {
+        return (React.createElement(AdaptableDateInlineInput_1.AdaptableDateInlineInput, { "data-name": "floating-filter-input", value: liveValue, disabled: disabled, onFocus: onFocus, onBlur: onBlur, pr: 0, style: { border: 'none' }, onKeyDownCapture: onKeyDownCapture, onChange: (value) => {
                 onChange(value);
                 setLiveValue(value);
             } }));
@@ -100,7 +100,7 @@ const ColumnFilterInput = ({ type, value, onChange: onChangeProp, onClear: onCle
                 borderRadius: 0,
                 border: 'none',
             }
-            : {}, onFocus: onFocus, onBlur: onBlur, disabled: disabled, type: type === 'number' ? 'text' : type, 
+            : {}, "data-name": "floating-filter-input", onFocus: onFocus, onBlur: onBlur, disabled: disabled, type: type === 'number' ? 'text' : type, 
         // autoFocus has to be FALSE because if the input receives focus in the init phase,
         // it may scroll the AG Grid header viewport into view and de-synchronize it (relative to the content viewport)
         autoFocus: false, value: liveValue ?? '', onKeyDown: onKeyDown, showClearButton: false, onChange: (e) => {

package/src/View/Components/ColumnFilter/components/FloatingFilterValues.js

@@ -37,8 +37,8 @@ function useDistinctFilterColumnValues(options) {
         let ignore = false;
         setIsDistinctColumnValuesLoading(true);
         let searchValueUsedInFilterValue = false;
-        api.gridApi.internalApi
-            .getDistinctFilterDisplayValuesForColumn({
+        api.filterApi.columnFilterApi.internalApi
+            .getColumnFilterValues({
             columnId,
             get currentSearchValue() {
                 searchValueUsedInFilterValue = true;

package/src/View/Components/ColumnFilter/useAdaptableFilterWrapper.d.ts

@@ -1,7 +1,7 @@
 import { QlLogicalOperator, QlPredicate } from '../../../parser/src/predicate';
 import * as LayoutRedux from '../../../Redux/ActionsReducers/LayoutRedux';
 import { AdaptablePredicate, ColumnFilter } from '../../../types';
-export declare const useAdaptableFilterWrapper: (columnId: string, handleOnChangeOverride?: (columnFilter: ColumnFilter) => void) => {
+export declare const useAdaptableFilterWrapper: (columnId: string, filterComponent: 'FilterBar' | 'FilterForm', handleOnChangeOverride?: (columnFilter: ColumnFilter) => void) => {
     qlPredicate: QlPredicate;
     qlPredicateDefs: import("@adaptabletools/adaptable/src/parser/src/predicate/types").QlPredicateDef[];
     columnFilter: ColumnFilter;

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

@@ -10,7 +10,7 @@ const LayoutRedux_1 = require("../../../Redux/ActionsReducers/LayoutRedux");
 const adaptableQlUtils_1 = require("../../../Utilities/adaptableQlUtils");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const utils_1 = require("./utils");
-const useAdaptableFilterWrapper = (columnId, handleOnChangeOverride) => {
+const useAdaptableFilterWrapper = (columnId, filterComponent, handleOnChangeOverride) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const dispatch = (0, react_redux_1.useDispatch)();
     const api = adaptable.api;
@@ -27,7 +27,7 @@ const useAdaptableFilterWrapper = (columnId, handleOnChangeOverride) => {
         return currentLayout?.ColumnFilters?.find((cf) => cf.ColumnId === columnId);
     }, [currentLayout?.ColumnFilters, columnId]);
     const qlPredicate = column
-        ? (0, utils_1.mapColumnFilterToQlPredicate)(columnFilter, column, qlPredicateDefs, columnFilterOptions, api)
+        ? (0, utils_1.mapColumnFilterToQlPredicate)(columnFilter, column, qlPredicateDefs, columnFilterOptions, filterComponent, api)
         : null;
     const handleOnChange = (adaptablePredicate, logic = 'AND') => {
         // make sure we always have the latest columnFiler

package/src/View/Components/ColumnFilter/utils.d.ts

@@ -1,8 +1,8 @@
 import { QlPredicate, QlPredicateDef } from '../../../parser/src/predicate';
-import { AdaptableApi, AdaptableColumn, AdaptablePredicate, AdaptablePredicateDef, ColumnFilter, ColumnFilterOptions, ExpressionFunctionInputType } from '../../../types';
+import { AdaptableApi, AdaptableColumn, AdaptableFilterComponentLocation, AdaptablePredicate, AdaptablePredicateDef, ColumnFilter, ColumnFilterOptions, ExpressionFunctionInputType } from '../../../types';
 export declare const mapAdaptablePredicateDefToQlPredicateDef: (adaptablePredicateDef: AdaptablePredicateDef, dataType: ExpressionFunctionInputType) => QlPredicateDef;
 export declare const mapAdaptablePredicateToQlPredicate: (adaptablePredicate: AdaptablePredicate) => QlPredicate;
 export declare const mapQlPredicateToAdaptablePredicate: (qlPredicate: QlPredicate) => AdaptablePredicate;
 export declare const qlPredicateToString: (qlPredicate: QlPredicate, predicateDefs: QlPredicateDef[]) => string;
 export declare const isPredicateEmpty: (predicate: QlPredicate, predicateDef: QlPredicateDef) => boolean;
-export declare const mapColumnFilterToQlPredicate: (columnFilter: ColumnFilter, abColumn: AdaptableColumn, qlPredicateDefs: QlPredicateDef[], columnFilterOptions: ColumnFilterOptions, api: AdaptableApi) => QlPredicate;
+export declare const mapColumnFilterToQlPredicate: (columnFilter: ColumnFilter, abColumn: AdaptableColumn, qlPredicateDefs: QlPredicateDef[], columnFilterOptions: ColumnFilterOptions, filterComponent: AdaptableFilterComponentLocation, api: AdaptableApi) => QlPredicate;

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

@@ -91,7 +91,7 @@ const isPredicateEmpty = (predicate, predicateDef) => {
         predicate.args.every((arg) => arg == undefined));
 };
 exports.isPredicateEmpty = isPredicateEmpty;
-const mapColumnFilterToQlPredicate = (columnFilter, abColumn, qlPredicateDefs, columnFilterOptions, api) => {
+const mapColumnFilterToQlPredicate = (columnFilter, abColumn, qlPredicateDefs, columnFilterOptions, filterComponent, api) => {
     const combinator = columnFilter?.PredicatesOperator ?? 'AND';
     const qlPredicate = {
         operator: combinator,
@@ -108,6 +108,7 @@ const mapColumnFilterToQlPredicate = (columnFilter, abColumn, qlPredicateDefs, c
                     if (typeof defaultNumericColumnFilter === 'function') {
                         const context = {
                             column: abColumn,
+                            filterComponent,
                             ...api.internalApi.buildBaseContext(),
                         };
                         defaultQlNumberPredicate = defaultNumericColumnFilter(context);
@@ -127,6 +128,7 @@ const mapColumnFilterToQlPredicate = (columnFilter, abColumn, qlPredicateDefs, c
                     if (typeof defaultTextColumnFilter === 'function') {
                         const context = {
                             column: abColumn,
+                            filterComponent,
                             ...api.internalApi.buildBaseContext(),
                         };
                         defaultQlTextPredicate = defaultTextColumnFilter(context);
@@ -140,12 +142,14 @@ const mapColumnFilterToQlPredicate = (columnFilter, abColumn, qlPredicateDefs, c
                     : { 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);
@@ -169,6 +173,7 @@ const mapColumnFilterToQlPredicate = (columnFilter, abColumn, qlPredicateDefs, c
                     if (typeof defaultArrayColumnFilter === 'function') {
                         const context = {
                             column: abColumn,
+                            filterComponent,
                             ...api.internalApi.buildBaseContext(),
                         };
                         defaultQlArrayPredicate = defaultArrayColumnFilter(context);

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

@@ -112,9 +112,8 @@ 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

@@ -33,7 +33,7 @@ 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_1.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_1.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: (0, join_1.default)(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

@@ -117,16 +117,16 @@ const AdaptablePopupModuleView = (props) => {
         .getModuleService()
         .getModuleById(props.module.moduleInfo.ModuleName);
     const dispatch = (0, react_redux_1.useDispatch)();
-    const showLayoutNotAssociatedObjects = (0, react_redux_1.useSelector)((state) => state.Internal.Layout.ShowLayoutNotAssociatedObjects);
-    const toggleButtonShowLayoutAssociatedObjects = () => {
-        if (!adaptableModule?.canBeAssociatedWithLayouts()) {
+    const showLayoutNonExtendedObjects = (0, react_redux_1.useSelector)((state) => state.Internal.Layout.showLayoutNonExtendedObjects);
+    const toggleButtonShowLayoutExtensionObjects = () => {
+        if (!adaptableModule?.containsLayoutExtensions()) {
             return;
         }
         if (!props.api.layoutApi.internalApi.hasLayoutSpecificObjects()) {
             return;
         }
         return (React.createElement(rebass_1.Flex, { justifyContent: "flex-start" },
-            React.createElement(CheckBox_1.CheckBox, { padding: 0, margin: 0, checked: showLayoutNotAssociatedObjects, onChange: (checked) => dispatch((0, InternalRedux_1.LayoutShowNotAssociatedObjects)(checked)) },
+            React.createElement(CheckBox_1.CheckBox, { padding: 0, margin: 0, checked: showLayoutNonExtendedObjects, onChange: (checked) => dispatch((0, InternalRedux_1.LayoutShowNonExtendedObjects)(checked)) },
                 "Show ",
                 moduleInfo.FriendlyName,
                 "s not available in current Layout")));
@@ -136,7 +136,7 @@ const AdaptablePopupModuleView = (props) => {
             " ",
             newButton), infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() },
         moduleViewProperties.HeaderComponent && React.createElement(moduleViewProperties.HeaderComponent, null),
-        toggleButtonShowLayoutAssociatedObjects(),
+        toggleButtonShowLayoutExtensionObjects(),
         items?.length ? (React.createElement(AdaptableObjectList_1.AdaptableObjectList, { module: props.module, items: items })) : (React.createElement(EmptyContent_1.default, 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

@@ -14,7 +14,6 @@ const ListBoxFilterForm_1 = require("../FilterForm/ListBoxFilterForm");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const FloatingFilterValues_1 = require("../ColumnFilter/components/FloatingFilterValues");
 const react_1 = require("react");
-const isValuesPredicateDef = (colDef) => colDef && ['In', 'NotIn'].includes(colDef.id);
 const PredicateEditor = (props) => {
     const baseClassName = 'ab-PredicateEditor';
     const predicateDefsOptions = React.useMemo(() => props?.predicateDefs?.map((item) => ({
@@ -72,7 +71,7 @@ const PredicateEditor = (props) => {
             index > 0 && React.createElement(HelpBlock_1.default, { margin: 2 }, "AND"),
             React.createElement(rebass_1.Flex, { key: index, flex: 1, flexDirection: "column" },
                 React.createElement(AdaptableInput_1.default, { "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(rebass_1.Box, { mt: 2 },
+        adaptable.api.predicateApi.internalApi.IsInorNotInPredicateDef(currentPredicateDef) && (React.createElement(rebass_1.Box, { mt: 2 },
             React.createElement(ListBoxFilterForm_1.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

@@ -21,7 +21,7 @@ const BulkUpdateValueSelector = (props) => {
     // which is then triggering a get all values
     // not sure that we need to
     const permittedValueSelector = (React.createElement(rebass_1.Box, null,
-        React.createElement(PermittedValuesSelector_1.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: (0, react_1.useCallback)(({ currentSearchValue }) => {
+        React.createElement(PermittedValuesSelector_1.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: (0, react_1.useCallback)(({ currentSearchValue }) => {
                 if (!columnId || !props.selectedGridCells.length) {
                     return Promise.resolve([]);
                 }

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

@@ -28,7 +28,7 @@ const ColumnSelector = function (props) {
         }
         return true;
     });
-    return (React.createElement(Select_1.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_1.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

@@ -15,7 +15,7 @@ const FieldSelector = (props) => {
         value: field.name,
     }));
     return (React.createElement(React.Fragment, null,
-        React.createElement(Select_1.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_1.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

@@ -35,7 +35,7 @@ const PermittedValuesSelector = function (props) {
                         return currentSearchValue;
                     },
                 })
-                : adaptable.api.gridApi.internalApi.getDistinctFilterDisplayValuesForColumn({
+                : adaptable.api.filterApi.columnFilterApi.internalApi.getColumnFilterValues({
                     columnId: props.columnId,
                     get currentSearchValue() {
                         searchValueUsedInFilterValue = true;
@@ -101,6 +101,6 @@ const PermittedValuesSelector = function (props) {
             reload();
         }
     };
-    return (React.createElement(Select_1.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_1.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 }));
 };
 exports.PermittedValuesSelector = PermittedValuesSelector;

package/src/View/Dashboard/Dashboard.js

@@ -37,7 +37,7 @@ const DashboardComponent = (props) => {
             }
             else {
                 const moduleToolbarName = visibleToolbarName;
-                if (props.api.internalApi.getModuleService().isModuleAvailable(moduleToolbarName)) {
+                if (props.api.internalApi.getModuleService().isAdapTableModulePresent(moduleToolbarName)) {
                     let moduleToolbarView = AdaptableViewFactory_1.AdaptableViewPanelFactory.get(moduleToolbarName);
                     if (moduleToolbarView) {
                         let moduleInfo = props.api.internalApi
@@ -96,7 +96,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(ModuleConstants_1.QuickSearchModuleId).isModuleAvailable();
+        props.api.internalApi.getModuleService().isAdapTableModulePresent(ModuleConstants_1.QuickSearchModuleId);
     const applicationIcon = props.api.optionsApi.getUserInterfaceOptions().applicationIcon;
     if (props.DashboardState.IsHidden) {
         return React.createElement("div", null);

package/src/View/Dashboard/DashboardPopup.js

@@ -44,7 +44,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

@@ -11,7 +11,7 @@ const PinnedDashboard = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const dashboardState = (0, react_redux_1.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

@@ -22,7 +22,7 @@ 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_1.AdaptableAgGrid._initInternal({
                 variant: 'vanilla',
                 adaptableOptions,
@@ -145,8 +145,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',
@@ -218,49 +224,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

@@ -125,53 +125,90 @@ 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 = (0, uniq_1.default)(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 = [
             AdaptableColumn_1.PIVOT_ANY_TOTAL_COLUMN_TYPE,
             AdaptableColumn_1.PIVOT_GRAND_TOTAL_COLUMN_TYPE,
             AdaptableColumn_1.PIVOT_COLUMN_TOTAL_COLUMN_TYPE,
             AdaptableColumn_1.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;