@adaptabletools/adaptable 14.0.0-canary.0 → 14.0.0-canary.1

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isRuleValid = void 0;
+const isRuleValid = (abObject, api, context) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (!((_b = (_a = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.length) && !((_c = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _c === void 0 ? void 0 : _c.BooleanExpression)) {
+        return 'No valid Condition is specified';
+    }
+    if ((_e = (_d = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _d === void 0 ? void 0 : _d.Predicates) === null || _e === void 0 ? void 0 : _e.length) {
+        if (!api.predicateApi.isEveryPredicateValid((_f = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _f === void 0 ? void 0 : _f.Predicates)) {
+            return 'The Predicates are not valid';
+        }
+    }
+    if ((_g = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _g === void 0 ? void 0 : _g.BooleanExpression) {
+        if (!api.queryLanguageApi.isValidBooleanExpression((_h = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _h === void 0 ? void 0 : _h.BooleanExpression, context.moduleInfo.ModuleName)) {
+            return 'The Expression is not a valid Boolean Expression';
+        }
+    }
+    return true;
+};
+exports.isRuleValid = isRuleValid;

package/src/View/Components/EntityRulesEditor/index.d.ts

@@ -1,18 +1,15 @@
 import * as React from 'react';
 import { FlexProps } from 'rebass';
-import type { AdaptablePredicate, AdaptablePredicateDef, AdaptableScope, AdaptableApi, AdaptableModule } from '../../../types';
+import type { AdaptableModule, AdaptablePredicate, AdaptablePredicateDef, AdaptableScope } from '../../../types';
 import type { XOR } from '../../../Utilities/Extensions/TypeExtensions';
 import { AdaptableQuery } from '../../../PredefinedConfig/Common/AdaptableQuery';
-import { OnePageAdaptableWizardContextType } from '../../Wizard/OnePageAdaptableWizard';
-declare type RuleType = XOR<{
-    Predicate: AdaptablePredicate;
+export declare type RuleType = XOR<{
+    Predicates: AdaptablePredicate[];
 }, AdaptableQuery>;
-export declare const isRuleValid: (abObject: {
-    Rule?: RuleType;
-}, api: AdaptableApi, context: OnePageAdaptableWizardContextType<unknown>) => true | "No valid Condition is specified" | "The Predicate is not valid" | "The Expression is not a valid Boolean Expression";
-declare type EntityRulesEditorProps<T> = {
+export declare type EntityRulesEditorProps<T> = {
     data: T;
     module: AdaptableModule;
+    showNoRule?: boolean;
     showPredicate?: boolean;
     showObservable?: boolean;
     showAggregation?: boolean;
@@ -41,4 +38,3 @@ export declare const EntityRulesEditor: <T extends {
     Rule: RuleType;
     Scope: AdaptableScope;
 }>(props: EntityRulesEditorProps<T>) => JSX.Element;
-export {};

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

@@ -1,38 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EntityRulesEditor = exports.EntityRulesSummary = exports.isRuleValid = void 0;
+exports.EntityRulesEditor = exports.EntityRulesSummary = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
 const rebass_1 = require("rebass");
 const Tabs_1 = require("../../../components/Tabs");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
 const ExpressionEditor_1 = require("../../../components/ExpressionEditor");
-const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
-const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
 const AdaptableContext_1 = require("../../AdaptableContext");
-const ButtonInfo_1 = require("../Buttons/ButtonInfo");
-const DocumentationLinkConstants_1 = require("../../../Utilities/Constants/DocumentationLinkConstants");
-const react_1 = require("react");
-const PermittedValuesSelector_1 = require("../PermittedValuesSelector");
-const isRuleValid = (abObject, api, context) => {
-    var _a, _b, _c, _d, _e, _f;
-    if (!((_a = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _a === void 0 ? void 0 : _a.Predicate) && !((_b = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _b === void 0 ? void 0 : _b.BooleanExpression)) {
-        return 'No valid Condition is specified';
-    }
-    if ((_c = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _c === void 0 ? void 0 : _c.Predicate) {
-        if (!api.predicateApi.isValidPredicate((_d = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _d === void 0 ? void 0 : _d.Predicate)) {
-            return 'The Predicate is not valid';
-        }
-    }
-    if ((_e = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _e === void 0 ? void 0 : _e.BooleanExpression) {
-        if (!api.queryLanguageApi.isValidBooleanExpression((_f = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _f === void 0 ? void 0 : _f.BooleanExpression, context.moduleInfo.ModuleName)) {
-            return 'The Expression is not a valid Boolean Expression';
-        }
-    }
-    return true;
-};
-exports.isRuleValid = isRuleValid;
+const PredicatesEditor_1 = require("./PredicatesEditor");
 const QueryTab = (props) => {
     const { type, label, disabled = false } = props, tabProps = tslib_1.__rest(props, ["type", "label", "disabled"]);
     const text = (React.createElement(rebass_1.Flex, { flexDirection: "column" },
@@ -46,26 +23,35 @@ QueryTab.defaultProps = {
     isTabsTab: true,
 };
 const EntityRulesSummary = (props) => {
+    var _a, _b, _c;
     const { data } = props;
     const { api: { predicateApi, internalApi }, } = (0, AdaptableContext_1.useAdaptable)();
-    return (React.createElement(rebass_1.Text, { fontSize: 2 }, data.Rule.Predicate ? (React.createElement(React.Fragment, null, props.renderPredicate(predicateApi.predicateToString(data.Rule.Predicate)))) : (React.createElement(React.Fragment, null, props.renderQueryExpression(internalApi.getAdaptableQueryExpressionText(data.Rule))))));
+    return (React.createElement(rebass_1.Text, { fontSize: 2 }, data.Rule.Predicates ? (React.createElement(React.Fragment, null, (_c = (_b = (_a = data.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.call(_b, (predicate, index) => (
+    // predicate id is not unique
+    React.createElement(React.Fragment, { key: index }, props.renderPredicate(predicateApi.predicateToString(predicate))))))) : (React.createElement(React.Fragment, null, props.renderQueryExpression(internalApi.getAdaptableQueryExpressionText(data.Rule))))));
 };
 exports.EntityRulesSummary = EntityRulesSummary;
 const EntityRulesEditor = (props) => {
-    var _a, _b;
-    const { data, children, descriptions, predicateDefs, showPredicate = true, showObservable = true, showBoolean = true, showAggregation = true, flexProps, module, } = props;
+    var _a, _b, _c;
+    const { data, children, descriptions, predicateDefs, showNoRule = false, showPredicate = true, showObservable = true, showBoolean = true, showAggregation = true, flexProps, module, } = props;
     const { api } = (0, AdaptableContext_1.useAdaptable)();
-    const type = data.Rule.BooleanExpression != undefined
-        ? 'BooleanExpression'
-        : data.Rule.ObservableExpression != undefined && showObservable
-            ? 'ObservableExpression'
-            : data.Rule.AggregatedBooleanExpression != undefined && showAggregation
-                ? 'AggregatedBooleanExpression'
-                : 'Predicate';
+    const type = data.Rule == undefined
+        ? 'NoRule'
+        : data.Rule.BooleanExpression != undefined
+            ? 'BooleanExpression'
+            : data.Rule.ObservableExpression != undefined && showObservable
+                ? 'ObservableExpression'
+                : data.Rule.AggregatedBooleanExpression != undefined && showAggregation
+                    ? 'AggregatedBooleanExpression'
+                    : 'Predicate';
     const [selectedTab, setSelectedTab] = React.useState(type);
     const setType = (type) => {
         setSelectedTab(type);
-        if (type === 'BooleanExpression' && showBoolean) {
+        if (type === 'NoRule' && showNoRule) {
+            delete data.Rule;
+            props.onChange(Object.assign({}, data));
+        }
+        else if (type === 'BooleanExpression' && showBoolean) {
             props.onChange(Object.assign(Object.assign({}, data), { Rule: {
                     BooleanExpression: '',
                 } }));
@@ -82,68 +68,21 @@ const EntityRulesEditor = (props) => {
         }
         else {
             props.onChange(Object.assign(Object.assign({}, data), { Rule: {
-                    Predicate: {
-                        PredicateId: props.defaultPredicateId,
-                    },
+                    Predicates: [
+                        {
+                            PredicateId: props.defaultPredicateId,
+                        },
+                    ],
                 } }));
         }
     };
-    const predicateId = data.Rule.Predicate != undefined ? data.Rule.Predicate.PredicateId : undefined;
-    const predicateInputs = predicateId ? (_a = data.Rule.Predicate.Inputs) !== null && _a !== void 0 ? _a : [] : [];
-    const currentPredicateDef = api.predicateApi.getPredicateDefById(predicateId);
     const isValuesPredicateDef = (colDef) => colDef && ['Values', 'ExcludeValues'].includes(colDef.id);
-    const predicateDefsOptions = predicateDefs
-        .filter((def) => {
+    const filteredPredicateDefs = predicateDefs.filter((def) => {
         if (isValuesPredicateDef(def)) {
             return 'ColumnIds' in data.Scope && data.Scope.ColumnIds.length === 1;
         }
         return true;
-    })
-        .map((item) => ({
-        value: item.id,
-        label: item.label,
-        onClick: () => onPredicateChange(item),
-    }));
-    const onPredicateInputChange = (e, index) => {
-        const { value } = e.target;
-        const newInputs = [...predicateInputs];
-        newInputs[index] = value;
-        props.onChange(Object.assign(Object.assign({}, data), { Rule: {
-                Predicate: {
-                    PredicateId: predicateId,
-                    Inputs: newInputs,
-                },
-            } }));
-    };
-    const onPredicateValuesChange = (inputs) => {
-        props.onChange(Object.assign(Object.assign({}, data), { Rule: {
-                Predicate: {
-                    PredicateId: predicateId,
-                    Inputs: inputs,
-                },
-            } }));
-    };
-    const onPredicateChange = (item) => {
-        var _a;
-        if (item) {
-            props.onChange(Object.assign(Object.assign({}, data), { Rule: {
-                    Predicate: {
-                        PredicateId: item.id,
-                        Inputs: ((_a = item === null || item === void 0 ? void 0 : item.inputs) !== null && _a !== void 0 ? _a : []).map((input) => { var _a; return (_a = input.defaultValue) !== null && _a !== void 0 ? _a : ''; }),
-                    },
-                } }));
-        }
-        else {
-            props.onChange(Object.assign(Object.assign({}, data), { Rule: {
-                    BooleanExpression: '',
-                } }));
-        }
-    };
-    const clearPredicate = () => {
-        props.onChange(Object.assign(Object.assign({}, data), { Rule: {
-                Predicate: undefined,
-            } }));
-    };
+    });
     const setBooleanExpression = (expression) => {
         props.onChange(Object.assign(Object.assign({}, data), { Rule: { BooleanExpression: expression } }));
     };
@@ -154,45 +93,26 @@ const EntityRulesEditor = (props) => {
         props.onChange(Object.assign(Object.assign({}, data), { Rule: { AggregatedBooleanExpression: expression } }));
     };
     const initialData = (0, react_1.useMemo)(() => api.internalApi.getQueryPreviewData(), []);
-    const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
-    return (React.createElement(rebass_1.Flex, Object.assign({ flexDirection: "column", padding: 2, pt: 0, pl: 0 }, flexProps, { style: Object.assign({ height: '100%' }, flexProps === null || flexProps === void 0 ? void 0 : flexProps.style) }),
+    const baseClassName = 'ab-EntityRulesEditor';
+    return (React.createElement(rebass_1.Flex, Object.assign({ className: baseClassName, flexDirection: "column", padding: 2, pt: 0, pl: 0 }, flexProps, { style: Object.assign({ height: '100%' }, flexProps === null || flexProps === void 0 ? void 0 : flexProps.style) }),
         children,
         React.createElement(Tabs_1.Tabs, { onValueChange: setType, value: selectedTab, pt: 2, pl: 2, style: { flex: 1, overflow: 'auto' } },
+            showNoRule ? (React.createElement(Tabs_1.Tabs.Tab, { value: 'NoRule', style: { flex: 1 } },
+                React.createElement(Radio_1.default, { tabIndex: -1, margin: 0, checked: type === 'NoRule' }, "No Condition"))) : null,
+            showNoRule ? (React.createElement(Tabs_1.Tabs.Content, { value: 'NoRule' },
+                React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, 'Format Column is always applied'))) : null,
             showPredicate ? (React.createElement(Tabs_1.Tabs.Tab, { value: 'Predicate', style: { flex: 1 } },
                 React.createElement(Radio_1.default, { tabIndex: -1, margin: 0, checked: type === 'Predicate' }, "Predicate"))) : null,
-            showPredicate ? (React.createElement(Tabs_1.Tabs.Content, { value: "Predicate" },
-                React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, descriptions.selectPredicate),
-                React.createElement(DropdownButton_1.default, { style: {
-                        minWidth: '15rem',
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        maxWidth: 'inherit',
-                    }, placeholder: "Select Rule", showClearButton: !!data.Rule.Predicate, onClear: clearPredicate, items: predicateDefsOptions, columns: ['label'] }, currentPredicateDef ? currentPredicateDef.label : 'Select Rule'), (_b = currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.inputs) === null || _b === void 0 ? void 0 :
-                _b.map((predicateDefInput, index) => (React.createElement(rebass_1.Flex, { key: predicateId + index, flexDirection: "column" },
-                    index > 0 && React.createElement(HelpBlock_1.default, { marginTop: 2 }, "AND"),
-                    React.createElement(AdaptableInput_1.default, { marginTop: 2, type: predicateDefInput.type, autoFocus: index === 0, value: predicateInputs[index], onChange: (e) => onPredicateInputChange(e, index) })))),
-                isValuesPredicateDef(currentPredicateDef) &&
-                    'ColumnIds' in data.Scope &&
-                    data.Scope.ColumnIds.length === 1 && (React.createElement(PermittedValuesSelector_1.PermitedValuesSelector, { onPredicateValuesChange: onPredicateValuesChange, predicate: data.Rule.Predicate, scope: data.Scope })),
-                showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", mt: 3, mb: 2, style: {
-                        fontSize: 'var(--ab-font-size-3)',
-                        padding: 0,
-                    } },
-                    React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, style: {
-                            color: 'var(--ab-color-text-on-add)',
-                            fill: 'var(--ab-color-text-on-add)',
-                            background: 'var(--ab-color-action-add)',
-                        }, onClick: () => window.open(DocumentationLinkConstants_1.PredicateDocsLink, '_blank') }),
-                    "See Predicate documentation for more details and examples")))) : null,
+            showPredicate ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "Predicate", value: "Predicate" },
+                React.createElement(PredicatesEditor_1.PredicatesEditor, { data: data, descriptions: descriptions, predicateDefs: filteredPredicateDefs, onChange: props.onChange }))) : null,
             showBoolean ? React.createElement(QueryTab, { value: "BooleanExpression", type: type, label: "Boolean" }) : null,
-            showBoolean ? (React.createElement(Tabs_1.Tabs.Content, { value: 'BooleanExpression', paddingLeft: 0 },
-                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', module: module, value: data.Rule.BooleanExpression, onChange: setBooleanExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null,
+            showBoolean ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "BooleanExpression", value: 'BooleanExpression', paddingLeft: 0 },
+                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', module: module, value: (_a = data.Rule) === null || _a === void 0 ? void 0 : _a.BooleanExpression, onChange: setBooleanExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getNamedQueries(), api: api }))) : null,
             showObservable ? (React.createElement(QueryTab, { value: "ObservableExpression", type: type, label: "Observable" })) : null,
-            showObservable ? (React.createElement(Tabs_1.Tabs.Content, { value: 'ObservableExpression', paddingLeft: 0 },
-                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'observable', module: module, value: data.Rule.ObservableExpression, onChange: setReactiveExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null,
+            showObservable ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "ObservableExpression", value: 'ObservableExpression', paddingLeft: 0 },
+                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'observable', module: module, value: (_b = data.Rule) === null || _b === void 0 ? void 0 : _b.ObservableExpression, onChange: setReactiveExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getNamedQueries(), api: api }))) : null,
             showAggregation ? (React.createElement(QueryTab, { value: "AggregatedBooleanExpression", type: type, label: "Aggregated Boolean" })) : null,
-            showAggregation ? (React.createElement(Tabs_1.Tabs.Content, { value: 'AggregatedBooleanExpression', paddingLeft: 0 },
-                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'aggregatedBoolean', module: module, value: data.Rule.AggregatedBooleanExpression, onChange: setAggregationExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), api: api }))) : null)));
+            showAggregation ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "AggregatedBooleanExpression", value: 'AggregatedBooleanExpression', paddingLeft: 0 },
+                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'aggregatedBoolean', module: module, value: (_c = data.Rule) === null || _c === void 0 ? void 0 : _c.AggregatedBooleanExpression, onChange: setAggregationExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getNamedQueries(), api: api }))) : null)));
 };
 exports.EntityRulesEditor = EntityRulesEditor;

package/src/View/Components/ExpressionWizard.js

@@ -20,7 +20,7 @@ class ExpressionWizard extends React.Component {
             }, () => this.props.updateGoBackState());
         };
         this.state = {
-            // this is realy horrible but its only way to use the Expression Wizard for both Report (that has Query) and Conditional Style (that has Rule)
+            // this is realy horrible but its only way to use the Expression Wizard for both Report (that has Query) and Format Column (that has Rule)
             // once we move to the new Wizard we can remove this monstrosity
             expression: this.props.callingModule && this.props.callingModule == 'Export'
                 ? (_a = this.props.data.Query) === null || _a === void 0 ? void 0 : _a.BooleanExpression
@@ -32,7 +32,7 @@ class ExpressionWizard extends React.Component {
     render() {
         const initialData = (0, react_1.useMemo)(() => this.props.api.internalApi.getQueryPreviewData(), []);
         return (React.createElement(React.Fragment, null,
-            React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', module: ModuleConstants_1.QueryModuleId, value: this.state.expression, onChange: this.handleCustomExpressionChange, initialData: initialData, columns: this.props.api.columnApi.getQueryableColumns(), namedQueries: this.props.api.queryApi.getAllNamedQuery(), api: this.props.api }),
+            React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', module: ModuleConstants_1.QueryModuleId, value: this.state.expression, onChange: this.handleCustomExpressionChange, initialData: initialData, columns: this.props.api.columnApi.getQueryableColumns(), namedQueries: this.props.api.queryApi.getNamedQueries(), api: this.props.api }),
             ' ',
             React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 1, marginBottom: 2, marginLeft: 1, alignItems: "center", "data-name": "expression-wizard-save-option" },
                 React.createElement(CheckBox_1.CheckBox, { marginLeft: 2, disabled: !this.isValidExpression(), marginBottom: 2, checked: this.state.saveToNamedQueries, onChange: (checked) => this.setState({

package/src/View/Components/ExternalRenderer.js

@@ -24,7 +24,9 @@ const ExternalRenderer = (_a) => {
                 render({ visible: false, element: element, adaptableApi });
             }
             else if (frameworkComponent) {
-                adaptableApi.internalApi.destroyFrameworkComponent(element, frameworkComponent, componentName);
+                adaptableApi.internalApi.destroyFrameworkComponent(element, frameworkComponent, 
+                // @ts-ignore
+                componentName);
             }
         };
     }, []);

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

@@ -110,7 +110,7 @@ class FilterFormComponent extends React.Component {
         }
     }
     async loadPermittedValues(filter = '') {
-        const { values: distinctColumnValues, suppressClientSideFilter } = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(this.props.api.columnApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter, this.props.api.internalApi.getAdaptableOptions().filterOptions
+        const { values: distinctColumnValues, suppressClientSideFilter } = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(this.props.api.gridApi.internalApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter, this.props.api.internalApi.getAdaptableOptions().filterOptions
             .showDistinctFilteredValuesOnly), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
         if (!this._isMounted) {
             return;
@@ -137,15 +137,14 @@ class FilterFormComponent extends React.Component {
         let closeButton = (React.createElement(ButtonClose_1.ButtonClose, { onClick: () => this.onCloseForm(), tooltip: null, accessLevel: 'Full' }));
         let clearFilterButton = (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => this.onClearFilter(), disabled: isEmptyFilter, tooltip: null, accessLevel: 'Full', showText: true, showIcon: false }));
         const useAgGridStyle = !!filterOptions.useAgGridFilterFormStyle;
-        return (React.createElement("div", { "data-name": "filter-form" }, StringExtensions_1.StringExtensions.IsNullOrEmpty(isFilterable) ? (React.createElement(FilterFormPanel_1.FilterFormPanel, { style: panelStyle, ColumnMenuTab: this.state.selectedTab, ColumnMenuTabChanged: (e) => this.onSelectTab(e), IsAlwaysFilter: this.props.embedColumnMenu, clearFilterButton: clearFilterButton, closeButton: closeButton, showCloseButton: this.props.showCloseButton, autoApplyFilter: filterOptions.autoApplyFilter ? true : false, useAgGridStyle: useAgGridStyle, applyFilterButtonDisabled: isEmptyFilter, onFilterApplied: () => this.onFilterApplied() }, this.state.selectedTab == Enums_1.ColumnMenuTab.Menu ? (React.createElement(ListBoxMenu_1.ListBoxMenu, { MenuItems: this.props.api.internalApi.buildStandaloneColumnHeader(this.props.currentColumn), onMenuItemClick: (menuItem) => this.onMenuItemClick(menuItem) })) : (React.createElement("div", null,
-            this.state.showTab && (React.createElement("div", null,
-                React.createElement(Radio_1.default, { marginLeft: 1, flex: 1, checked: this.state.currentTab == 'values', onChange: () => this.setState({ currentTab: 'values' }) },
+        return (React.createElement("div", { className: "ab-FilterForm", "data-name": "filter-form" }, StringExtensions_1.StringExtensions.IsNullOrEmpty(isFilterable) ? (React.createElement(FilterFormPanel_1.FilterFormPanel, { style: panelStyle, ColumnMenuTab: this.state.selectedTab, ColumnMenuTabChanged: (e) => this.onSelectTab(e), IsAlwaysFilter: this.props.embedColumnMenu, clearFilterButton: clearFilterButton, closeButton: closeButton, showCloseButton: this.props.showCloseButton, autoApplyFilter: filterOptions.autoApplyFilter ? true : false, useAgGridStyle: useAgGridStyle, applyFilterButtonDisabled: isEmptyFilter, onFilterApplied: () => this.onFilterApplied() }, this.state.selectedTab == Enums_1.ColumnMenuTab.Menu ? (React.createElement(ListBoxMenu_1.ListBoxMenu, { MenuItems: this.props.api.gridApi.internalApi.buildStandaloneColumnHeader(this.props.currentColumn), onMenuItemClick: (menuItem) => this.onMenuItemClick(menuItem) })) : (React.createElement(React.Fragment, null,
+            this.state.showTab && (React.createElement(React.Fragment, null,
+                React.createElement(Radio_1.default, { "data-name": "values", flex: 1, marginLeft: 1, checked: this.state.currentTab == 'values', onChange: () => this.setState({ currentTab: 'values' }) },
                     React.createElement(rebass_1.Flex, { fontSize: 'var( --ab-font-size-2)' }, "Column Values")),
-                React.createElement(Radio_1.default, { marginLeft: 2, flex: 1, checked: this.state.currentTab == 'predicates', onChange: () => this.setState({ currentTab: 'predicates' }) },
+                React.createElement(Radio_1.default, { "data-name": "predicates", marginLeft: 2, flex: 1, checked: this.state.currentTab == 'predicates', onChange: () => this.setState({ currentTab: 'predicates' }) },
                     React.createElement(rebass_1.Flex, { fontSize: 'var( --ab-font-size-2)' }, "Filters")))),
-            this.state.currentTab === 'values' && (React.createElement("div", null,
-                React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { disabled: this.isFilterDisabled(), suppressClientSideFilter: this.state.suppressClientSideFilter, isLoading: this.state.isDistinctColumnValuesLoading, onFilterChange: this.handleFilterChange, currentColumn: this.props.currentColumn, columns: this.props.columns, columnDistinctValues: this.state.distinctColumnValues, dataType: this.props.currentColumn.dataType, uiSelectedColumnValues: uiSelectedColumnValues, useAgGridStyle: useAgGridStyle, onColumnValueSelectedChange: (list) => this.onColumnValuesChange(list) }))),
-            this.state.currentTab === 'predicates' && (React.createElement("div", null,
+            this.state.currentTab === 'values' && (React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { disabled: this.isFilterDisabled(), suppressClientSideFilter: this.state.suppressClientSideFilter, isLoading: this.state.isDistinctColumnValuesLoading, onFilterChange: this.handleFilterChange, currentColumn: this.props.currentColumn, columns: this.props.columns, columnDistinctValues: this.state.distinctColumnValues, dataType: this.props.currentColumn.dataType, uiSelectedColumnValues: uiSelectedColumnValues, useAgGridStyle: useAgGridStyle, onColumnValueSelectedChange: (list) => this.onColumnValuesChange(list) })),
+            this.state.currentTab === 'predicates' && (React.createElement(React.Fragment, null,
                 ' ',
                 this.state.showTab && React.createElement("hr", null),
                 predicateDefs
@@ -156,15 +155,15 @@ class FilterFormComponent extends React.Component {
         var _a;
         const { editedColumnFilter } = this.state;
         const checked = ((_a = editedColumnFilter === null || editedColumnFilter === void 0 ? void 0 : editedColumnFilter.Predicate) === null || _a === void 0 ? void 0 : _a.PredicateId) === predicateDef.id;
-        return (React.createElement(rebass_1.Flex, { key: index, flexDirection: "column" },
-            React.createElement(Radio_1.default, { disabled: this.isFilterDisabled(), fontSize: 'var(--ab-font-size-2)', margin: 1, flex: 1, checked: checked, onChange: () => this.selectColumnPredicate(predicateDef) }, predicateDef.label),
-            React.createElement(rebass_1.Flex, { flexDirection: "column", flex: 0, marginLeft: 3, marginRight: 2 }, checked && this.renderPredicateInput(predicateDef, editedColumnFilter))));
+        return (React.createElement(rebass_1.Flex, { className: "ab-FilterForm__predicate", key: index, flexDirection: "column" },
+            React.createElement(Radio_1.default, { "data-name": predicateDef.id, disabled: this.isFilterDisabled(), fontSize: 'var(--ab-font-size-2)', margin: 1, flex: 1, checked: checked, onChange: () => this.selectColumnPredicate(predicateDef) }, predicateDef.label),
+            React.createElement(rebass_1.Flex, { className: "ab-FilterForm__predicate_inputs", flexDirection: "column", flex: 0, marginLeft: 3, marginRight: 2 }, checked && this.renderPredicateInput(predicateDef, editedColumnFilter))));
     }
     renderPredicateInput(predicateDef, filter) {
         var _a;
         if ((predicateDef === null || predicateDef === void 0 ? void 0 : predicateDef.id) === 'BooleanToggle') {
             // custom tri-state checkbox: true, false, all(indeterminate)
-            return (React.createElement(rebass_1.Flex, { flexDirection: "row", flex: 1, justifyContent: "center", alignItems: "center" },
+            return (React.createElement(rebass_1.Flex, { className: "ab-FilterForm__predicate-input", flexDirection: "row", flex: 1, justifyContent: "center", alignItems: "center" },
                 React.createElement(CheckBox_1.CheckBox, { disabled: this.isFilterDisabled(), checked: filter.Predicate.Inputs[0] === 'true'
                         ? true
                         : filter.Predicate.Inputs[0] === 'false'
@@ -181,11 +180,7 @@ class FilterFormComponent extends React.Component {
                     } })));
         }
         return (_a = predicateDef.inputs) === null || _a === void 0 ? void 0 : _a.map((predicateInput, index) => (React.createElement(rebass_1.Flex, { key: index, flexDirection: "row" },
-            React.createElement(AdaptableInput_1.default, { disabled: this.isFilterDisabled(), type: predicateInput.type, autoFocus: index === 0, value: filter.Predicate.Inputs[index], onChange: (e) => this.changeColumnPredicateInput(e.target.value, index), style: {
-                    marginBottom: 5,
-                    flex: 1,
-                    fontSize: 'var( --ab-font-size-2)',
-                } }))));
+            React.createElement(AdaptableInput_1.default, { disabled: this.isFilterDisabled(), type: predicateInput.type, autoFocus: index === 0, value: filter.Predicate.Inputs[index], onChange: (e) => this.changeColumnPredicateInput(e.target.value, index), mb: 1, flex: 1, fontSize: 2 }))));
     }
     isFilterDisabled() {
         var _a;
@@ -215,7 +210,7 @@ class FilterFormComponent extends React.Component {
         if (editedColumnFilter.Predicate === undefined ||
             (editedColumnFilter.Predicate.PredicateId === 'Values' &&
                 editedColumnFilter.Predicate.Inputs.length === 0)) {
-            this.props.api.filterApi.clearColumnFilterByColumn(editedColumnFilter.ColumnId);
+            this.props.api.filterApi.clearColumnFilterForColumn(editedColumnFilter.ColumnId);
             this.onCloseForm();
         }
         else {

package/src/View/Components/FilterForm/ListBoxFilterForm.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AdaptableColumn } from '../../../PredefinedConfig/Common/AdaptableColumn';
+import { AdaptableColumn, AdaptableColumnDataType } from '../../../PredefinedConfig/Common/AdaptableColumn';
 import { ListGroupProps } from '../../../components/List/ListGroup';
 export interface ListBoxFilterFormProps extends ListGroupProps {
     currentColumn: AdaptableColumn;
@@ -11,7 +11,7 @@ export interface ListBoxFilterFormProps extends ListGroupProps {
     }[];
     uiSelectedColumnValues: Array<string>;
     onColumnValueSelectedChange: (SelectedValues: Array<any>) => void;
-    dataType: 'String' | 'Number' | 'NumberArray' | 'Boolean' | 'Date' | 'Object' | 'Unknown';
+    dataType: AdaptableColumnDataType;
     isLoading?: boolean;
     suppressClientSideFilter?: boolean;
     onFilterChange?: (filter: string) => void;

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

@@ -27,7 +27,7 @@ const ListBoxFilterForm = (props) => {
         internalUpdateUISelectedColumnValues(props.uiSelectedColumnValues);
     }, [props.uiSelectedColumnValues]);
     const renderItemForAgGridStyle = (props) => {
-        return (React.createElement(CheckBox_1.CheckBox, Object.assign({}, props, { variant: "agGrid", fontSize: 2, marginTop: 1, marginBottom: 1, marginLeft: 1, marginRight: 1 })));
+        return (React.createElement(CheckBox_1.CheckBox, Object.assign({}, props, { variant: "agGrid", fontSize: 2, marginTop: 1, marginBottom: 1, marginLeft: 1, marginRight: 1, title: typeof props.children === 'string' ? props.children : null })));
     };
     const onClickItemColumnValue = (item) => {
         const index = UiSelectedColumnValues.indexOf(item);
@@ -59,6 +59,7 @@ const ListBoxFilterForm = (props) => {
                 checked: isActive,
                 onChange: () => onClickItemColumnValue(distinctValue.value),
                 disabled: props.disabled,
+                style: { width: '100%' },
             });
         }
         return (React.createElement(ListGroupItem_1.default, { noZebra: props.useAgGridStyle, key: 'columnValue' + index, onClick: () => onClickItemColumnValue(distinctValue.value), active: isActive, value: distinctValue.value }, distinctValue.label));

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

@@ -32,7 +32,7 @@ class QuickFilterFormComponent extends React.Component {
             }
         };
         this.loadPermittedValues = async (filter = '') => {
-            const { values, suppressClientSideFilter } = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(this.props.api.columnApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter, this.props.api.internalApi.getAdaptableOptions().filterOptions
+            const { values, suppressClientSideFilter } = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(this.props.api.gridApi.internalApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter, this.props.api.internalApi.getAdaptableOptions().filterOptions
                 .showDistinctFilteredValuesOnly), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
             if (!this._isMounted) {
                 return;
@@ -142,21 +142,15 @@ class QuickFilterFormComponent extends React.Component {
             showQuickFilterInput = !hideQuickFilterInputFunction(this.props.currentColumn);
         }
         return (React.createElement(React.Fragment, null,
-            showQuickFilterDropdown && (React.createElement(OverlayTrigger_1.default, { showEvent: showEvent, hideEvent: hideEvent, preventPortalEventPropagation: showEvent === 'click', alignHorizontal: "left", targetOffset: 10, hideDelay: 300, "data-name": "quick-filter-overlay", style: {
-                    overflowY: 'auto',
-                    fontSize: 'var(--ab-font-size-2)',
-                    border: '1px solid var(--ab-color-primarydark)',
-                    background: 'var(--ab-color-defaultbackground)',
-                }, render: () => (React.createElement(rebass_1.Flex, { flexDirection: "column", "data-name": "quick-filter" },
-                    (filter === null || filter === void 0 ? void 0 : filter.Predicate.PredicateId) && (React.createElement(React.Fragment, null,
-                        React.createElement(SimpleButton_1.default, { p: 2, variant: "text", onClick: () => this.clearFilter() },
-                            React.createElement("span", { style: { width: 20, marginRight: 10 } },
-                                React.createElement(icons_1.Icon, { name: "delete" })),
-                            "Clear"))),
-                    predicateDefs.map((p) => (React.createElement(SimpleButton_1.default, { disabled: this.isFilterDisabled(), key: p.id, p: 2, variant: "text", tone: (filter === null || filter === void 0 ? void 0 : filter.Predicate.PredicateId) === p.id ? 'info' : 'none', onClick: () => this.selectColumnPredicate(p.id) },
+            showQuickFilterDropdown && (React.createElement(OverlayTrigger_1.default, { className: "ab-QuickFilter", showEvent: showEvent, hideEvent: hideEvent, preventPortalEventPropagation: showEvent === 'click', targetOffset: 10, hideDelay: 300, "data-name": "quick-filter-overlay", render: () => (React.createElement(rebass_1.Flex, { className: "ab-QuickFilter__dropdown", flexDirection: "column", "data-name": "quick-filter", fontSize: 2 },
+                    (filter === null || filter === void 0 ? void 0 : filter.Predicate.PredicateId) && (React.createElement(SimpleButton_1.default, { p: 2, variant: "text", onClick: () => this.clearFilter() },
+                        React.createElement("span", { style: { width: 20, marginRight: 10 } },
+                            React.createElement(icons_1.Icon, { name: "delete" })),
+                        "Clear")),
+                    predicateDefs.map((p) => (React.createElement(SimpleButton_1.default, { "data-name": filter.Predicate.PredicateId, disabled: this.isFilterDisabled(), key: p.id, p: 2, variant: "text", tone: (filter === null || filter === void 0 ? void 0 : filter.Predicate.PredicateId) === p.id ? 'info' : 'none', onClick: () => this.selectColumnPredicate(p.id) },
                         React.createElement("span", { style: { width: 20, marginRight: 10 } }, this.renderPredicateIcon(p)),
                         p.label))))) },
-                React.createElement(SimpleButton_1.default, { style: {
+                React.createElement(SimpleButton_1.default, { "data-name": filter.Predicate.PredicateId, style: {
                         borderRadius: 0,
                         borderColor: 'var(--ab-color-primarydark)',
                     } }, this.renderPredicateIcon(activePredicateDef)))),
@@ -216,8 +210,8 @@ class QuickFilterFormComponent extends React.Component {
                         e.nativeEvent.stopPropagation();
                         this.clearFilter();
                     }
-                }, flex: 1, style: {
-                    minWidth: 0,
+                }, style: {
+                    width: '100%',
                     padding: 'var(--ab-space-1)',
                     borderRadius: 0,
                     borderLeftWidth: 0,
@@ -253,7 +247,7 @@ class QuickFilterFormComponent extends React.Component {
                 return label !== null && label !== void 0 ? label : input;
             }).join(', ');
         }
-        return (React.createElement(OverlayTrigger_1.default, { alignHorizontal: "left", showEvent: showEvent, 
+        return (React.createElement(OverlayTrigger_1.default, { showEvent: showEvent, 
             // cannot hide on blur, because the form input receives the input when this is opened
             hideEvent: "mouseleave", hideDelay: 300, ref: (api) => {
                 this.valuesDropdown = api;
@@ -279,7 +273,7 @@ class QuickFilterFormComponent extends React.Component {
                             false && (React.createElement(SimpleButton_1.default, { ml: 2, onClick: () => this.updateFilter(this.state.filter) }, "Apply Filter"))),
                     React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { disabled: this.isFilterDisabled(), suppressClientSideFilter: this.state.suppressClientSideFilter, isLoading: this.state.isDistinctColumnValuesLoading, onFilterChange: this.handleFilterChange, currentColumn: this.props.currentColumn, columns: [], columnDistinctValues: this.state.distinctColumnValues, dataType: this.props.currentColumn.dataType, uiSelectedColumnValues: this.state.filter.Predicate.Inputs.filter((input) => input !== ''), useAgGridStyle: true, onColumnValueSelectedChange: (list) => this.onColumnValuesChange(list) })));
             } },
-            React.createElement(SimpleButton_1.default, { style: {
+            React.createElement(SimpleButton_1.default, { "data-name": 'Select Values', style: {
                     flex: 1,
                     whiteSpace: 'nowrap',
                     overflow: 'hidden',
@@ -352,14 +346,14 @@ class QuickFilterFormComponent extends React.Component {
     }
     getPredicateIdForShortcutValue(value) {
         var _a;
-        return (_a = this.props.api.filterApi.findPredicateDefByShortcut(value, this.props.currentColumn)) === null || _a === void 0 ? void 0 : _a.id;
+        return (_a = this.props.api.filterApi.internalApi.findPredicateDefByShortcut(value, this.props.currentColumn)) === null || _a === void 0 ? void 0 : _a.id;
     }
     clearFilter() {
         const { filter } = this.state;
-        this.props.api.filterApi.clearColumnFilterByColumn(filter.ColumnId);
+        this.props.api.filterApi.clearColumnFilterForColumn(filter.ColumnId);
     }
     hasValuesPredicate(predicate) {
-        return this.props.api.predicateApi.hasPredicateValues(predicate);
+        return this.props.api.predicateApi.internalApi.hasPredicateValues(predicate);
     }
 }
 function mapStateToProps(state, ownProps) {

package/src/View/Components/NewScopeComponent.js

@@ -130,9 +130,9 @@ const NewScopeComponent = (props) => {
     }
     return (React.createElement(Tabs_1.Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: scopeChoice, style: Object.assign({ height: '100%' }, props.style), onValueChange: onScopeSelectChanged },
         props.hideWholeRow ? null : (React.createElement(Tabs_1.Tabs.Tab, { value: "Row" },
-            React.createElement(Radio_1.default, { margin: 0, checked: scopeChoice == 'All', tabIndex: -1 }, "Whole Row"))),
+            React.createElement(Radio_1.default, { margin: 0, checked: scopeChoice == 'All', tabIndex: -1 }, "All Columns"))),
         React.createElement(Tabs_1.Tabs.Tab, { value: "Column" },
-            React.createElement(Radio_1.default, { margin: 0, value: "Column", checked: scopeChoice == 'Column', tabIndex: -1 }, "Columns")),
+            React.createElement(Radio_1.default, { margin: 0, value: "Column", checked: scopeChoice == 'Column', tabIndex: -1 }, "Selected Columns")),
         React.createElement(Tabs_1.Tabs.Tab, { value: "DataType" },
             React.createElement(Radio_1.default, { margin: 0, value: "DataType", checked: scopeChoice == 'DataType', tabIndex: -1 }, "Data Types")),
         props.hideWholeRow ? null : (React.createElement(Tabs_1.Tabs.Content, { value: "Row", style: { flex: 'none' }, "data-name": "row-scope" },
@@ -144,6 +144,6 @@ const NewScopeComponent = (props) => {
                 React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })),
             React.createElement(rebass_1.Flex, { paddingLeft: 2, flex: 1, style: { overflow: 'hidden' } },
                 React.createElement(ColumnSelector_1.NewColumnSelector, { columnFilterText: columnsSearchText, allowReorder: false, availableColumns: scopeColumns, selected: scopeApi.getColumnIdsInScope(props.scope), onChange: onColumnsSelectedChanged }))),
-        React.createElement(Tabs_1.Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox_1.CheckBox, { key: dataTypeOption.value, "data-name": "scope", checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label))))));
+        React.createElement(Tabs_1.Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, key: dataTypeOption.value, checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label))))));
 };
 exports.NewScopeComponent = NewScopeComponent;

package/src/View/Components/Panels/PanelWithButton.js

@@ -21,11 +21,7 @@ class PanelWithButton extends React.Component {
                 React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-before" }),
                 this.props.headerText,
                 React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-after" }),
-                this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { style: {
-                        color: 'var(--ab-color-text-on-add)',
-                        fill: 'var(--ab-color-text-on-add)',
-                        background: 'var(--ab-color-action-add)',
-                    }, onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
+                this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
                     ) }))),
             React.createElement(rebass_1.Box, { style: { flex: 1 } }),
             buttonContent ? (React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", disabled: this.props.buttonDisabled, onClick: () => (this.props.buttonClick ? this.props.buttonClick() : null) }, buttonContent)) : null,

package/src/View/Components/Panels/PanelWithImage.js

@@ -26,11 +26,7 @@ class PanelWithImageCmp extends React.Component {
                     React.createElement(rebass_1.Box, { marginRight: 2 }),
                     this.props.header,
                     React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-after" }),
-                    this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { style: {
-                            color: 'var(--ab-color-text-on-add)',
-                            fill: 'var(--ab-color-text-on-add)',
-                            background: 'var(--ab-color-action-add)',
-                        }, onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
+                    this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
                         ) }))),
                 React.createElement(rebass_1.Box, { flex: 1 }),
                 this.props.button && React.cloneElement(this.props.button))));

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

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { ScopeColumnIds } from '../../../PredefinedConfig/Common/AdaptableScope';
 import { AdaptablePredicate } from '../../../types';
 export interface PermitedValuesSelectorProps {
-    scope: ScopeColumnIds;
+    columnId: string;
     onPredicateValuesChange: (inputs: any[]) => void;
     predicate: AdaptablePredicate;
 }

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

@@ -9,14 +9,13 @@ const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/Simp
 const AdaptableContext_1 = require("../../AdaptableContext");
 const ListBoxFilterForm_1 = require("../FilterForm/ListBoxFilterForm");
 const PermitedValuesSelector = (props) => {
-    var _a;
+    var _a, _b, _c;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const columnId = props.scope.ColumnIds[0];
-    const column = adaptable.api.columnApi.getColumnFromId(columnId);
-    const distinctValues = ((_a = adaptable.api.columnApi.getDistinctDisplayValuesForColumn(columnId)) !== null && _a !== void 0 ? _a : []).map((value) => ({ value: value, label: value }));
-    const predicateInputs = props.predicate.Inputs;
-    const isClearDisabled = predicateInputs.filter((item) => item !== undefined || item !== null || item !== '')
-        .length === 0;
+    const columnId = props.columnId;
+    const column = adaptable.api.columnApi.getColumnWithColumnId(columnId);
+    const distinctValues = ((_a = adaptable.api.gridApi.internalApi.getDistinctDisplayValuesForColumn(columnId)) !== null && _a !== void 0 ? _a : []).map((value) => { var _a; return ({ value: value, label: value.toString ? (_a = value.toString) === null || _a === void 0 ? void 0 : _a.call(value) : value }); });
+    const predicateInputs = (_b = props.predicate.Inputs) !== null && _b !== void 0 ? _b : [];
+    const isClearDisabled = ((_c = predicateInputs === null || predicateInputs === void 0 ? void 0 : predicateInputs.filter) === null || _c === void 0 ? void 0 : _c.call(predicateInputs, (item) => item !== undefined || item !== null || item !== '').length) === 0;
     const popupContent = (React.createElement(rebass_1.Flex, { className: "ab-PermitedValuesSelector__PopupContent", padding: 1, flexDirection: "column" },
         React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { currentColumn: column, columns: [], columnDistinctValues: distinctValues, dataType: column.dataType, uiSelectedColumnValues: props.predicate.Inputs, useAgGridStyle: true, onColumnValueSelectedChange: (list) => props.onPredicateValuesChange(list) })));
     return (React.createElement(rebass_1.Box, { className: "ab-PermitedValuesSelector", mt: 2 },