@adaptabletools/adaptable 20.3.0-canary.2 → 21.0.0-canary.0

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

@@ -6,7 +6,6 @@ import { useAdaptable } from '../../AdaptableContext';
  */
 export const AdaptableIconSelector = (props) => {
     const adaptable = useAdaptable();
-    const userInterfaceOptions = adaptable.api.optionsApi.getAdaptableOptions()?.userInterfaceOptions;
-    const customDefinedIcons = userInterfaceOptions.customIcons ?? [];
-    return React.createElement(IconSelector, { customIcons: customDefinedIcons, ...props });
+    const customIcons = adaptable.api.userInterfaceApi.getCustomIcons();
+    return React.createElement(IconSelector, { customIcons: customIcons, ...props });
 };

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

@@ -6,9 +6,8 @@ import { useAdaptableFilterWrapper } from './useAdaptableFilterWrapper';
  * It transforms predicates in QlPredicates.
  */
 export const AdaptableColumnFilter = (props) => {
-    const { qlPredicate, qlPredicateDefs, columnFilter, handlePredicateChange } = useAdaptableFilterWrapper(props.columnId);
+    const { qlPredicate, qlPredicateDefs, columnFilter, handlePredicateChange } = useAdaptableFilterWrapper(props.columnId, 'FilterForm');
     return (React.createElement(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]) }));
 };

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

@@ -8,15 +8,13 @@ import { useAdaptableFilterWrapper } from './useAdaptableFilterWrapper';
  */
 export const AdaptableFloatingFilter = (props) => {
     const adaptable = useAdaptable();
-    const { qlPredicate, qlPredicateDefs, columnFilter, column, handlePredicateChange, handleOnChange, handleClear, } = useAdaptableFilterWrapper(props.Column.columnId);
+    const { qlPredicate, qlPredicateDefs, columnFilter, column, handlePredicateChange, handleOnChange, handleClear, } = 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;
     }
@@ -32,7 +30,6 @@ export 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 }));
 };

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

@@ -62,7 +62,7 @@ const AndOrInput = (props) => {
 };
 export const ColumnFilterComponent = (props) => {
     const adaptable = 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);
@@ -116,7 +116,7 @@ export const ColumnFilterComponent = (props) => {
             React.createElement(AndOrInput, { onChange: onCombineChange, operator: currentPredicate.operator }),
             React.createElement(SimpleButton, { ml: 2, onClick: () => onPredicateChange(null) }, "Clear All")),
         React.createElement(Flex, { flexDirection: "column", className: "ab-ColumnFilter", flex: 1, minHeight: 0, ...props.wrapperProps },
-            React.createElement(Box, { flex: 1, style: { overflow: 'auto' } },
+            React.createElement(Box, { style: { overflow: 'auto' } },
                 currentPredicate.args.map((predicate, index) => {
                     return (React.createElement(ColumnFilterEditor, { deleteDisabled: currentPredicate.args.length < 2, onDelete: () => {
                             const currentPredicate = currentPredicateRef.current;
@@ -141,6 +141,13 @@ export const ColumnFilterComponent = (props) => {
                         } }));
                 }),
                 isLastPredicateValid && filterPredicateDropdown),
-            !autoApplyColumnFilter ? (React.createElement(Box, { pt: 2 },
-                React.createElement(SimpleButton, { tone: "accent", variant: "raised", onClick: applyFilter }, "Apply Filter"))) : null)));
+            !autoApplyColumnFilter ? (React.createElement(React.Fragment, null,
+                React.createElement(Box, { flex: 1, "data-name": "spacer" }),
+                React.createElement(Flex, { pt: 2, className: "ab-ColumnFilter-actions", justifyContent: "space-between" },
+                    React.createElement(Box, { className: "ab-ColumnFilter-action-apply" },
+                        React.createElement(SimpleButton, { tone: "accent", variant: "raised", onClick: applyFilter }, "Apply Filter")),
+                    React.createElement(Box, { className: "ab-ColumnFilter-action-reset" },
+                        React.createElement(SimpleButton, { tone: "neutral", variant: "raised", onClick: () => {
+                                setPredicateNotYetApplied(props.predicate);
+                            } }, "Reset Filter"))))) : null)));
 };

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

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

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

@@ -9,13 +9,12 @@ import { FloatingFilterInputList } from './components/FloatingFilterInputList';
 import { isPredicateEmpty, qlPredicateToString } from './utils';
 export const FloatingFilter = (props) => {
     const adaptable = 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

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

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

@@ -70,7 +70,7 @@ export const ColumnFilterInput = ({ type, value, onChange: onChangeProp, onClear
         }
     };
     if (type === 'date' && !showDatePicker) {
-        return (React.createElement(AdaptableDateInlineInput, { value: liveValue, disabled: disabled, onFocus: onFocus, onBlur: onBlur, pr: 0, style: { border: 'none' }, onKeyDownCapture: onKeyDownCapture, onChange: (value) => {
+        return (React.createElement(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);
             } }));
@@ -96,7 +96,7 @@ export const ColumnFilterInput = ({ type, value, onChange: onChangeProp, onClear
                 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

@@ -33,8 +33,8 @@ export 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

@@ -6,7 +6,7 @@ import { getCurrentLayoutSelector } from '../../../Redux/ActionsReducers/LayoutR
 import { mapColumnDataTypeToExpressionFunctionType } from '../../../Utilities/adaptableQlUtils';
 import { useAdaptable } from '../../AdaptableContext';
 import { mapAdaptablePredicateDefToQlPredicateDef, mapColumnFilterToQlPredicate, mapQlPredicateToAdaptablePredicate, } from './utils';
-export const useAdaptableFilterWrapper = (columnId, handleOnChangeOverride) => {
+export const useAdaptableFilterWrapper = (columnId, filterComponent, handleOnChangeOverride) => {
     const adaptable = useAdaptable();
     const dispatch = useDispatch();
     const api = adaptable.api;
@@ -23,7 +23,7 @@ export const useAdaptableFilterWrapper = (columnId, handleOnChangeOverride) => {
         return currentLayout?.ColumnFilters?.find((cf) => cf.ColumnId === columnId);
     }, [currentLayout?.ColumnFilters, columnId]);
     const qlPredicate = column
-        ? mapColumnFilterToQlPredicate(columnFilter, column, qlPredicateDefs, columnFilterOptions, api)
+        ? 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

@@ -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/NewScopeComponent.js

@@ -10,6 +10,7 @@ import { AdaptableFormControlTextClear } from './Forms/AdaptableFormControlTextC
 import { useAdaptable } from '../AdaptableContext';
 import { ValueOptionsTags } from './ValueSelector';
 import { getColumnTypeFriendlyName } from '../../AdaptableState/Common/AdaptableColumn';
+import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 export const isScopeValid = ({ Scope }) => {
     const result = [];
     if (!Scope) {
@@ -41,6 +42,9 @@ const DATA_TYPES_MAP = {
         value: 'boolean',
     },
 };
+const renderDataTypeLabel = (c) => {
+    return 'DataType: ' + StringExtensions.CapitaliseFirstLetter(c);
+};
 export const renderScopeSummary = (scope, labels) => {
     const adaptable = useAdaptable();
     const scopeApi = adaptable.api.columnScopeApi;
@@ -53,7 +57,7 @@ export const renderScopeSummary = (scope, labels) => {
             columnsInScope.length ? (React.createElement(ValueOptionsTags, { options: columnsInScope, value: columnsInScope.map((c) => c.columnId), toLabel: (c) => c.friendlyName, allowWrap: true, readOnly: true, renderLabel: (c) => React.createElement(SummaryText, { mb: 0 }, c), toIdentifier: (c) => c.columnId })) : null)) : null),
         React.createElement(Box, null, 'DataTypes' in scope ? (React.createElement(React.Fragment, null,
             React.createElement(Text, { fontSize: 2, mb: 2 }, labels.scopeDataTypes),
-            React.createElement(ValueOptionsTags, { readOnly: true, options: scope.DataTypes, value: scope.DataTypes, toLabel: (c) => c, allowWrap: true, renderLabel: (c) => React.createElement(Text, { fontSize: 2 }, `DataType: ${c}`), toIdentifier: (c) => c }))) : null)));
+            React.createElement(ValueOptionsTags, { readOnly: true, options: scope.DataTypes, value: scope.DataTypes, toLabel: (c) => c, allowWrap: true, renderLabel: (c) => React.createElement(Text, { fontSize: 2 }, renderDataTypeLabel(c)), toIdentifier: (c) => c }))) : null)));
 };
 const DATA_TYPES_OPTIONS = Object.values(DATA_TYPES_MAP);
 export const NewScopeComponent = (props) => {

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