@adaptabletools/adaptable-cjs 19.2.3 → 20.0.0-canary.0

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

@@ -12,52 +12,58 @@ const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/S
 const Tag_1 = require("../../../../components/Tag");
 const EntityRulePredicateEditor_1 = require("./EntityRulePredicateEditor");
 const Radio_1 = tslib_1.__importDefault(require("../../../../components/Radio"));
-const getScopeViewItems_1 = require("../../../../Strategy/Utilities/getScopeViewItems");
+const getScopeViewItems_1 = require("../../../../Utilities/getScopeViewItems");
 const EntityRulePredicatesEditor = (props) => {
-    var _a, _b, _c, _d, _e;
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
     const columnPredicateEnabled = props.data.Rule.Predicates.some((predicate) => predicate.ColumnId !== undefined);
     // filter out predicates that are already in use
     const defaultPredicateDefs = props.predicateDefs.filter((predicateDef) => {
-        var _a, _b;
-        return (_b = (_a = props.data.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.every((rulePrediate) => rulePrediate.PredicateId !== predicateDef.id);
+        return props.data.Rule?.Predicates?.every((rulePrediate) => rulePrediate.PredicateId !== predicateDef.id);
     });
     const handlePredicateScopeTypeChange = (columnPredicateEnabled) => {
         if (columnPredicateEnabled) {
-            props.onChange(Object.assign(Object.assign({}, props.data), { Rule: {
+            props.onChange({
+                ...props.data,
+                Rule: {
                     Predicates: [
                         {
                             PredicateId: null,
                             ColumnId: '',
                         },
                     ],
-                } }));
+                },
+            });
         }
         else {
-            props.onChange(Object.assign(Object.assign({}, props.data), { Rule: {
+            props.onChange({
+                ...props.data,
+                Rule: {
                     Predicates: [],
-                } }));
+                },
+            });
         }
     };
     const handleAddNewPredicate = () => {
-        var _a;
-        props.onChange(Object.assign(Object.assign({}, props.data), { Rule: {
+        props.onChange({
+            ...props.data,
+            Rule: {
                 Predicates: [
-                    ...(((_a = props.data.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) || []),
+                    ...(props.data.Rule?.Predicates || []),
                     {
                         PredicateId: defaultPredicateDefs[0].id,
                         Inputs: [],
                     },
                 ],
-            } }));
+            },
+        });
     };
     const scopeString = (0, getScopeViewItems_1.getScopeViewItems)(props.data.Scope, api).values.join(', ');
-    const enablePredicateColumnId = (_a = props.enablePredicateColumnId) !== null && _a !== void 0 ? _a : true;
+    const enablePredicateColumnId = props.enablePredicateColumnId ?? true;
     return (React.createElement(React.Fragment, null,
         React.createElement(rebass_1.Flex, { mb: 2, justifyContent: "space-between" },
             React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, props.descriptions.selectPredicate),
-            React.createElement(SimpleButton_1.default, { disabled: !((_c = (_b = props.data.Rule) === null || _b === void 0 ? void 0 : _b.Predicates) === null || _c === void 0 ? void 0 : _c.length), onClick: handleAddNewPredicate, icon: "plus", variant: "raised" }, "Add Predicate")),
+            React.createElement(SimpleButton_1.default, { disabled: !props.data.Rule?.Predicates?.length, onClick: handleAddNewPredicate, icon: "plus", variant: "raised" }, "Add Predicate")),
         enablePredicateColumnId && (React.createElement(rebass_1.Flex, { className: "ab-EntityRulePredicateEditor-ScopeTypeSelector", p: 2, mb: 2, flexDirection: "column" },
             React.createElement(rebass_1.Text, { mb: 2 }, "Create Predicate Rule(s) using"),
             React.createElement(Radio_1.default, { "data-name": "entity-scope", onClick: () => handlePredicateScopeTypeChange(false), mr: 3, checked: !columnPredicateEnabled },
@@ -66,13 +72,13 @@ const EntityRulePredicatesEditor = (props) => {
                 React.createElement(Tag_1.Tag, { ml: 1, mr: 1 }, scopeString || 'Not Defined'),
                 ' '),
             React.createElement(Radio_1.default, { "data-name": "column-scope", onClick: () => handlePredicateScopeTypeChange(true), checked: columnPredicateEnabled }, "Selected Columns (overriding Active Column)"))),
-        (((_e = (_d = props.data.Rule) === null || _d === void 0 ? void 0 : _d.Predicates) === null || _e === void 0 ? void 0 : _e.length) ? props.data.Rule.Predicates : [null]).map((predicate, index) => {
-            const currentPredicatDef = props.predicateDefs.find((pd) => pd.id === (predicate === null || predicate === void 0 ? void 0 : predicate.PredicateId));
+        (props.data.Rule?.Predicates?.length ? props.data.Rule.Predicates : [null]).map((predicate, index) => {
+            const currentPredicatDef = props.predicateDefs.find((pd) => pd.id === predicate?.PredicateId);
             let editorPredicateDefs = defaultPredicateDefs;
             if (currentPredicatDef) {
                 editorPredicateDefs = [currentPredicatDef, ...defaultPredicateDefs];
             }
-            return (React.createElement(React.Fragment, { key: `${index}-${predicate === null || predicate === void 0 ? void 0 : predicate.PredicateId}` },
+            return (React.createElement(React.Fragment, { key: `${index}-${predicate?.PredicateId}` },
                 index > 0 && (React.createElement(rebass_1.Box, null,
                     React.createElement(Tag_1.Tag, { mb: 3 }, "AND"))),
                 React.createElement(EntityRulePredicateEditor_1.EntityRulePredicateEditor, { data: props.data, predicate: predicate, onChange: props.onChange, predicateDefs: editorPredicateDefs, getPredicateDefsForColId: props.getPredicateDefsForColId, columnPredicateEnabled: columnPredicateEnabled })));

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

@@ -2,29 +2,28 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isAdaptableRuleValid = void 0;
 const isAdaptableRuleValid = (abObject, api, context) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-    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) {
-        if (!api.predicateApi.isEveryPredicateValid((_c = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _c === void 0 ? void 0 : _c.Predicates)) {
-            return `The Predicate${((_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) === 1 ? ' is' : 's are'} not valid`;
+    if (abObject?.Rule?.Predicates?.length) {
+        if (!api.predicateApi.isEveryPredicateValid(abObject?.Rule?.Predicates)) {
+            return `The Predicate${abObject?.Rule?.Predicates?.length === 1 ? ' is' : 's are'} not valid`;
         }
     }
-    if ((_f = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _f === void 0 ? void 0 : _f.BooleanExpression) {
-        if (!api.expressionApi.isValidBooleanExpression((_g = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _g === void 0 ? void 0 : _g.BooleanExpression, context.moduleInfo.ModuleName)) {
+    if (abObject?.Rule?.BooleanExpression) {
+        if (!api.expressionApi.isValidBooleanExpression(abObject?.Rule?.BooleanExpression, context.moduleInfo.ModuleName)) {
             return 'The Expression is not a valid Boolean Expression';
         }
     }
-    if ((_h = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _h === void 0 ? void 0 : _h.ObservableExpression) {
-        if (!api.expressionApi.isValidObservableExpression((_j = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _j === void 0 ? void 0 : _j.ObservableExpression, context.moduleInfo.ModuleName)) {
+    if (abObject?.Rule?.ObservableExpression) {
+        if (!api.expressionApi.isValidObservableExpression(abObject?.Rule?.ObservableExpression, context.moduleInfo.ModuleName)) {
             return 'The Expression is not a valid Observable Expression';
         }
     }
-    if ((_k = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _k === void 0 ? void 0 : _k.AggregatedBooleanExpression) {
-        if (!api.expressionApi.isValidAggregatedBooleanExpression((_l = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _l === void 0 ? void 0 : _l.AggregatedBooleanExpression, context.moduleInfo.ModuleName)) {
+    if (abObject?.Rule?.AggregatedBooleanExpression) {
+        if (!api.expressionApi.isValidAggregatedBooleanExpression(abObject?.Rule?.AggregatedBooleanExpression, context.moduleInfo.ModuleName)) {
             return 'The Expression is not a valid Aggregated Boolean Expression';
         }
     }
-    if ((_o = (_m = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _m === void 0 ? void 0 : _m.Predicates) === null || _o === void 0 ? void 0 : _o.length) {
-        const isAPredicateWithInvalidColumnId = (_q = (_p = abObject === null || abObject === void 0 ? void 0 : abObject.Rule) === null || _p === void 0 ? void 0 : _p.Predicates) === null || _q === void 0 ? void 0 : _q.some((predicate) => predicate.ColumnId !== undefined && predicate.ColumnId === '');
+    if (abObject?.Rule?.Predicates?.length) {
+        const isAPredicateWithInvalidColumnId = abObject?.Rule?.Predicates?.some((predicate) => predicate.ColumnId !== undefined && predicate.ColumnId === '');
         if (isAPredicateWithInvalidColumnId) {
             return 'Predicates with custom scope need a valid column';
         }

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

@@ -36,8 +36,8 @@ export declare const EntityRulesSummary: <T extends {
     data: T;
     renderPredicate: (content: string) => React.ReactNode;
     renderQueryExpression: (content: string) => React.ReactNode;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export declare const EntityRulesEditor: <T extends {
     Rule: RuleType;
     Scope: ColumnScope;
-}>(props: EntityRulesEditorProps<T>) => JSX.Element;
+}>(props: EntityRulesEditorProps<T>) => React.JSX.Element;

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

@@ -12,29 +12,28 @@ const AdaptableContext_1 = require("../../AdaptableContext");
 const EntityRulePredicatesEditor_1 = require("./EntityRulePredicatesEditor");
 const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
 const QueryTab = (props) => {
-    const { type, label, disabled = false } = props, tabProps = tslib_1.__rest(props, ["type", "label", "disabled"]);
+    const { type, label, disabled = false, ...tabProps } = props;
     const text = (React.createElement(rebass_1.Flex, { flexDirection: "column" },
         label,
         " ",
         React.createElement(rebass_1.Text, { fontSize: 2 }, "query")));
-    return (React.createElement(Tabs_1.Tabs.Tab, Object.assign({ style: { flex: 1 } }, tabProps), !disabled && props.showRadio ? (React.createElement(Radio_1.default, { tabIndex: -1, margin: 0, checked: type === props.value, style: { alignItems: 'baseline' } }, text)) : (text)));
+    return (React.createElement(Tabs_1.Tabs.Tab, { style: { flex: 1 }, ...tabProps }, !disabled && props.showRadio ? (React.createElement(Radio_1.default, { tabIndex: -1, margin: 0, checked: type === props.value, style: { alignItems: 'baseline' } }, text)) : (text)));
 };
 // needed here to be considered a child Tab component, inside the Tabs component
 Tabs_1.SupportedTabMenuComps.add(QueryTab);
 const EntityRulesSummary = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
     const { data } = props;
     const { api: { predicateApi, internalApi }, } = (0, AdaptableContext_1.useAdaptable)();
-    if (!((_b = (_a = data === null || data === void 0 ? void 0 : data.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.length) &&
-        !((_c = data === null || data === void 0 ? void 0 : data.Rule) === null || _c === void 0 ? void 0 : _c.BooleanExpression) &&
-        !((_d = data === null || data === void 0 ? void 0 : data.Rule) === null || _d === void 0 ? void 0 : _d.ObservableExpression) &&
-        !((_e = data === null || data === void 0 ? void 0 : data.Rule) === null || _e === void 0 ? void 0 : _e.AggregatedBooleanExpression)) {
+    if (!data?.Rule?.Predicates?.length &&
+        !data?.Rule?.BooleanExpression &&
+        !data?.Rule?.ObservableExpression &&
+        !data?.Rule?.AggregatedBooleanExpression) {
         return React.createElement(rebass_1.Text, { fontSize: 2 }, "No Rule defined");
     }
     return (React.createElement(
         rebass_1.Text,
         { fontSize: 2 },
-        data.Rule.Predicates ? (React.createElement(React.Fragment, null, (_h = (_g = (_f = data.Rule) === null || _f === void 0 ? void 0 : _f.Predicates) === null || _g === void 0 ? void 0 : _g.map) === null || _h === void 0 ? void 0 : _h.call(_g, (predicate, index) => (
+        data.Rule.Predicates ? (React.createElement(React.Fragment, null, data.Rule?.Predicates?.map?.((predicate, index) => (
         // predicate id is not unique
         (React.createElement(
             React.Fragment,
@@ -48,7 +47,6 @@ const RuleTabTitle = (props) => {
     return props.showRadio ? (React.createElement(Radio_1.default, { tabIndex: -1, margin: 0, checked: props.checked }, props.children)) : (React.createElement(React.Fragment, null, "props.children"));
 };
 const EntityRulesEditor = (props) => {
-    var _a, _b;
     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 numberOfTabs = [
@@ -73,34 +71,48 @@ const EntityRulesEditor = (props) => {
         setSelectedTab(type);
         if (type === 'NoRule' && showNoRule) {
             delete data.Rule;
-            props.onChange(Object.assign({}, data));
+            props.onChange({
+                ...data,
+            });
         }
         else if (type === 'BooleanExpression' && showBoolean) {
-            props.onChange(Object.assign(Object.assign({}, data), { Rule: {
+            props.onChange({
+                ...data,
+                Rule: {
                     BooleanExpression: '',
-                } }));
+                },
+            });
         }
         else if (type === 'ObservableExpression' && showObservable) {
-            props.onChange(Object.assign(Object.assign({}, data), { Rule: {
+            props.onChange({
+                ...data,
+                Rule: {
                     ObservableExpression: '',
-                } }));
+                },
+            });
         }
         else if (type === 'AggregatedBooleanExpression' && showAggregation) {
-            props.onChange(Object.assign(Object.assign({}, data), { Rule: {
+            props.onChange({
+                ...data,
+                Rule: {
                     AggregatedBooleanExpression: '',
-                } }));
+                },
+            });
         }
         else {
-            props.onChange(Object.assign(Object.assign({}, data), { Rule: {
+            props.onChange({
+                ...data,
+                Rule: {
                     Predicates: [
                         {
                             PredicateId: props.defaultPredicateId,
                         },
                     ],
-                } }));
+                },
+            });
         }
     };
-    const isValuesPredicateDef = (colDef) => colDef && ['Values', 'ExcludeValues'].includes(colDef.id);
+    const isValuesPredicateDef = (colDef) => colDef && ['In', 'NotIn'].includes(colDef.id);
     const filteredPredicateDefs = predicateDefs.filter((def) => {
         if (isValuesPredicateDef(def)) {
             return 'ColumnIds' in data.Scope && data.Scope.ColumnIds.length === 1;
@@ -108,17 +120,26 @@ const EntityRulesEditor = (props) => {
         return true;
     });
     const setBooleanExpression = (expression) => {
-        props.onChange(Object.assign(Object.assign({}, data), { Rule: { BooleanExpression: expression } }));
+        props.onChange({
+            ...data,
+            Rule: { BooleanExpression: expression },
+        });
     };
     const setReactiveExpression = (expression) => {
-        props.onChange(Object.assign(Object.assign({}, data), { Rule: { ObservableExpression: expression } }));
+        props.onChange({
+            ...data,
+            Rule: { ObservableExpression: expression },
+        });
     };
     const setAggregationExpression = (expression) => {
-        props.onChange(Object.assign(Object.assign({}, data), { Rule: { AggregatedBooleanExpression: expression } }));
+        props.onChange({
+            ...data,
+            Rule: { AggregatedBooleanExpression: expression },
+        });
     };
     const initialData = (0, react_1.useMemo)(() => api.internalApi.getQueryPreviewData(), []);
     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) }),
+    return (React.createElement(rebass_1.Flex, { className: baseClassName, flexDirection: "column", padding: 2, pt: 0, pl: 0, ...flexProps, style: { height: '100%', ...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 } },
@@ -131,15 +152,14 @@ const EntityRulesEditor = (props) => {
                 React.createElement(EntityRulePredicatesEditor_1.EntityRulePredicatesEditor, { enablePredicateColumnId: props.enablePredicateColumnId, data: data, descriptions: descriptions, predicateDefs: filteredPredicateDefs, getPredicateDefsForColId: props.getPredicateDefsForColId, onChange: props.onChange }))) : null,
             showBoolean ? (React.createElement(QueryTab, { showRadio: showRadioButtons, value: "BooleanExpression", type: type, label: "Boolean" })) : null,
             showBoolean ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "BooleanExpression", value: 'BooleanExpression' }, (() => {
-                var _a;
-                const editor = (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(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api, showQueryBuilder: props.showQueryBuilder }));
+                const editor = (React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', module: module, value: data.Rule?.BooleanExpression, onChange: setBooleanExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api, showQueryBuilder: props.showQueryBuilder }));
                 return props.showQueryBuilder ? React.createElement(Panel_1.default, null, editor) : editor;
             })())) : null,
             showObservable ? (React.createElement(QueryTab, { showRadio: showRadioButtons, value: "ObservableExpression", type: type, label: "Observable" })) : null,
             showObservable ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "ObservableExpression", value: 'ObservableExpression' },
-                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'observable', module: module, value: (_a = data.Rule) === null || _a === void 0 ? void 0 : _a.ObservableExpression, onChange: setReactiveExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }))) : null,
+                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'observable', module: module, value: data.Rule?.ObservableExpression, onChange: setReactiveExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }))) : null,
             showAggregation ? (React.createElement(QueryTab, { showRadio: showRadioButtons, value: "AggregatedBooleanExpression", type: type, label: "Aggregated Boolean" })) : null,
             showAggregation ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "AggregatedBooleanExpression", value: 'AggregatedBooleanExpression' },
-                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'aggregatedBoolean', module: module, value: (_b = data.Rule) === null || _b === void 0 ? void 0 : _b.AggregatedBooleanExpression, onChange: setAggregationExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }))) : null)));
+                React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'aggregatedBoolean', module: module, value: data.Rule?.AggregatedBooleanExpression, onChange: setAggregationExpression, initialData: initialData, columns: api.columnApi.getQueryableColumns(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }))) : null)));
 };
 exports.EntityRulesEditor = EntityRulesEditor;

package/src/View/Components/ExpressionWizard.d.ts

@@ -12,7 +12,7 @@ export interface ExpressionWizardState {
 }
 export declare class ExpressionWizard extends React.Component<ExpressionWizardProps, ExpressionWizardState> implements AdaptableWizardStep {
     constructor(props: ExpressionWizardProps);
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     isValidExpression(): boolean;
     handleCustomExpressionChange: (expression: string) => void;
     canNext(): boolean;

package/src/View/Components/ExpressionWizard.js

@@ -12,7 +12,6 @@ const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
 const react_1 = require("react");
 class ExpressionWizard extends React.Component {
     constructor(props) {
-        var _a, _b;
         super(props);
         this.handleCustomExpressionChange = (expression) => {
             this.setState({
@@ -23,8 +22,8 @@ class ExpressionWizard extends React.Component {
             // 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
-                : (_b = this.props.data.Rule) === null || _b === void 0 ? void 0 : _b.BooleanExpression,
+                ? this.props.data.Query?.BooleanExpression
+                : this.props.data.Rule?.BooleanExpression,
             saveToNamedQueries: false,
             newNamedQuery: '',
         };

package/src/View/Components/ExternalRenderer.js

@@ -4,9 +4,8 @@ exports.ExternalRenderer = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const AdaptableContext_1 = require("../AdaptableContext");
-const ExternalRenderer = (_a) => {
-    var { render, frameworkComponent, componentName = 'N/A', onDestroy } = _a, rest = tslib_1.__rest(_a, ["render", "frameworkComponent", "componentName", "onDestroy"]);
-    const ref = React.useRef();
+const ExternalRenderer = ({ render, frameworkComponent, componentName = 'N/A', onDestroy, ...rest }) => {
+    const ref = React.useRef(null);
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const [contentsHTML, setContentsHTML] = React.useState('');
     React.useLayoutEffect(() => {
@@ -14,12 +13,9 @@ const ExternalRenderer = (_a) => {
         const adaptableApi = adaptable.api;
         if (render) {
             const html = render({
-                visible: true,
                 phase: 'onMount',
                 element,
-                adaptableApi,
-                userName: adaptableApi.optionsApi.getUserName(),
-                adaptableId: adaptableApi.optionsApi.getAdaptableId(),
+                ...adaptableApi.internalApi.buildBaseContext(),
             });
             setContentsHTML(html);
         }
@@ -29,16 +25,13 @@ const ExternalRenderer = (_a) => {
         return () => {
             if (render) {
                 render({
-                    visible: false,
                     phase: 'onDestroy',
                     element: element,
-                    adaptableApi,
-                    userName: adaptableApi.optionsApi.getUserName(),
-                    adaptableId: adaptableApi.optionsApi.getAdaptableId(),
+                    ...adaptableApi.internalApi.buildBaseContext(),
                 });
             }
             else if (frameworkComponent) {
-                onDestroy === null || onDestroy === void 0 ? void 0 : onDestroy();
+                onDestroy?.();
                 adaptableApi.internalApi.destroyFrameworkComponent(element, frameworkComponent, 
                 // @ts-ignore
                 componentName);
@@ -46,7 +39,7 @@ const ExternalRenderer = (_a) => {
         };
     }, []);
     const RFC = adaptable.variant === 'react' ? frameworkComponent : null;
-    return RFC ? (React.createElement("div", Object.assign({}, rest, { ref: ref }),
-        React.createElement(RFC, { adaptableApi: adaptable.api }))) : (React.createElement("div", Object.assign({}, rest, { dangerouslySetInnerHTML: { __html: contentsHTML }, ref: ref })));
+    return RFC ? (React.createElement("div", { ...rest, ref: ref },
+        React.createElement(RFC, { adaptableApi: adaptable.api }))) : (React.createElement("div", { ...rest, dangerouslySetInnerHTML: { __html: contentsHTML }, ref: ref }));
 };
 exports.ExternalRenderer = ExternalRenderer;

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

@@ -1,23 +1,16 @@
 import * as React from 'react';
 import { AdaptableColumn, AdaptableColumnDataType } from '../../../PredefinedConfig/Common/AdaptableColumn';
-import { ListGroupProps } from '../../../components/List/ListGroup';
-export interface ListBoxFilterFormProps extends ListGroupProps {
-    currentColumn: AdaptableColumn;
-    columns: AdaptableColumn[];
-    useAgGridStyle?: boolean;
-    columnDistinctValues: {
+import { SelectProps } from '../../../components/Select';
+export interface ColumnValuesSelectProps {
+    column: AdaptableColumn;
+    options: {
         label: string;
         value: any;
     }[];
-    uiSelectedColumnValues: Array<string>;
-    onColumnValueSelectedChange: (SelectedValues: Array<any>) => void;
+    value: Array<string>;
+    onChange: (value: Array<any>) => void;
     dataType: AdaptableColumnDataType;
     isLoading?: boolean;
-    suppressClientSideFilter?: boolean;
-    onFilterChange?: (filter: string) => void;
+    selectProps?: Partial<SelectProps<any, false>>;
 }
-export interface ListBoxFilterFormState extends React.ClassAttributes<any> {
-    UiSelectedColumnValues: Array<string>;
-    FilterValue: string;
-}
-export declare const ListBoxFilterForm: (props: ListBoxFilterFormProps) => JSX.Element;
+export declare const ColumnValuesSelect: (props: ColumnValuesSelectProps) => React.JSX.Element;

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

@@ -1,91 +1,45 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListBoxFilterForm = void 0;
+exports.ColumnValuesSelect = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
-const ListGroupItem_1 = tslib_1.__importDefault(require("../../../components/List/ListGroupItem"));
-const rebass_1 = require("rebass");
-const CheckBox_1 = require("../../../components/CheckBox");
-const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
-const AdaptableFormControlTextClear_1 = require("../Forms/AdaptableFormControlTextClear");
-const GridList_1 = tslib_1.__importDefault(require("../../../components/List/GridList"));
-const react_1 = require("react");
-const Loader_1 = require("../../../components/Loader");
 const isEqual_1 = tslib_1.__importDefault(require("date-fns/isEqual"));
 const DateHelper_1 = require("../../../Utilities/Helpers/DateHelper");
-const ListBoxFilterForm = (props) => {
-    const [FilterValue, setFilterValue] = (0, react_1.useState)('');
-    const handleFilterValueChange = React.useCallback((newValue) => {
-        setFilterValue(newValue);
-        props === null || props === void 0 ? void 0 : props.onFilterChange(newValue);
-    }, [props.onFilterChange]);
-    const [UiSelectedColumnValues, internalUpdateUISelectedColumnValues] = (0, react_1.useState)(props.uiSelectedColumnValues);
-    const setUiSelectedColumnValues = (values) => {
-        internalUpdateUISelectedColumnValues(values);
-        props.onColumnValueSelectedChange(values);
-    };
-    (0, react_1.useEffect)(() => {
-        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, title: typeof props.children === 'string' ? props.children : null })));
-    };
-    const onClickItemColumnValue = (item) => {
-        let index = UiSelectedColumnValues.indexOf(item);
-        if (item instanceof Date) {
-            index = UiSelectedColumnValues.findIndex((selectedValue) => (0, isEqual_1.default)((0, DateHelper_1.parseDateValue)(selectedValue), (0, DateHelper_1.parseDateValue)(item)));
-        }
-        if (index >= 0) {
-            const newArray = [...UiSelectedColumnValues];
-            newArray.splice(index, 1);
-            setUiSelectedColumnValues(newArray);
-        }
-        else {
-            setUiSelectedColumnValues([...UiSelectedColumnValues, item]);
-        }
-    };
-    const permittedValuesOptions = props.columnDistinctValues;
-    const columnValuesItemsElements = permittedValuesOptions.map((distinctValue, index) => {
-        let isActive = UiSelectedColumnValues.indexOf(distinctValue.value) >= 0;
+const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
+const Select_1 = require("../../../components/Select");
+const baseClassName = 'ab-ListBoxFilterForm';
+const ColumnValuesSelect = (props) => {
+    const column = props.column;
+    const selectedColumnValues = props.value;
+    const value = [];
+    const options = props.options.filter((distinctValue, index) => {
+        let isActive = selectedColumnValues.indexOf(distinctValue.value) >= 0;
         // special case for date objects, need to check against string values
         if (!isActive && distinctValue.value && distinctValue.value instanceof Date) {
-            isActive = UiSelectedColumnValues.some((dateStr) => (0, isEqual_1.default)((0, DateHelper_1.parseDateValue)(dateStr), (0, DateHelper_1.parseDateValue)(distinctValue.value)));
+            isActive = selectedColumnValues.some((dateStr) => (0, isEqual_1.default)((0, DateHelper_1.parseDateValue)(dateStr), (0, DateHelper_1.parseDateValue)(distinctValue.value)));
         }
         const columnLabel = distinctValue.label;
         if (StringExtensions_1.StringExtensions.IsNullOrEmpty(columnLabel)) {
-            return null;
-        }
-        const noMatch = StringExtensions_1.StringExtensions.IsNullOrEmpty(FilterValue.toLocaleLowerCase()) ||
-            StringExtensions_1.StringExtensions.IsNullOrEmpty(columnLabel === null || columnLabel === void 0 ? void 0 : columnLabel.toLocaleLowerCase()) ||
-            columnLabel.toLocaleLowerCase().indexOf(FilterValue.toLocaleLowerCase()) < 0;
-        if (!props.suppressClientSideFilter &&
-            StringExtensions_1.StringExtensions.IsNotNullOrEmpty(FilterValue) &&
-            noMatch) {
-            return null;
+            return false;
         }
-        if (props.useAgGridStyle) {
-            return renderItemForAgGridStyle({
-                key: 'columnValue' + index,
-                children: distinctValue.label,
-                checked: isActive,
-                onChange: () => onClickItemColumnValue(distinctValue.value),
-                disabled: props.disabled,
-                style: { width: '100%' },
-            });
+        if (isActive) {
+            value.push(distinctValue.value);
         }
-        return (React.createElement(ListGroupItem_1.default, { noZebra: props.useAgGridStyle, key: 'columnValue' + index, onClick: () => onClickItemColumnValue(distinctValue.value), active: isActive, value: distinctValue.value }, distinctValue.label));
+        return true;
     });
-    const textClear = (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { autoFocus: false, type: "text", placeholder: "Search Column Values", value: FilterValue, style: {
-            paddingTop: 'var(--ab-space-1)',
-            paddingBottom: 'var(--ab-space-1)',
-        }, inputStyle: { padding: 'var(--ab-space-1)' }, OnTextChange: handleFilterValueChange }));
-    const baseClassName = 'ab-ListBoxFilterForm';
-    return (React.createElement("div", { className: (0, join_1.default)(baseClassName, props.useAgGridStyle ? `${baseClassName}--aggrid-style` : null, props.isLoading && `${baseClassName}--loading`) },
-        React.createElement(rebass_1.Box, { px: 2 },
-            React.createElement(rebass_1.Box, { mx: props.useAgGridStyle ? 0 : '2px', marginBottom: 2 },
-                textClear,
-                props.isLoading && React.createElement(Loader_1.Loader, null, "Loading"))),
-        !props.isLoading && (React.createElement(GridList_1.default, { showZebraRows: false, className: !props.useAgGridStyle ? 'ab-padding-horizontal-0' : '' }, columnValuesItemsElements))));
+    const component = (React.createElement(Select_1.Select, { isMulti: true, searchable: true, closeMenuOnSelect: false, size: "small", menuStyle: {
+            minWidth: `var(--ab-cmp-select-column-menu-${column.columnId}__min-width, var(--ab-cmp-select-column-menu__min-width, 260px))`,
+        }, ...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`), onKeyDownCapture: (e) => {
+            const event = e.nativeEvent || e;
+            event.stopPropagation = () => {
+                // see #ensure-keyboard-navigation-works-in-column-values-filter
+                // we want to prevent ag grid from stopping the propagation of the event
+                // so that the event can be handled by the select component and thus makes keyboard navigation work
+                //
+                // the solution is to reassign the stopPropagation method to a function that does nothing
+            };
+        } }, component));
 };
-exports.ListBoxFilterForm = ListBoxFilterForm;
+exports.ColumnValuesSelect = ColumnValuesSelect;

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

@@ -9,6 +9,6 @@ export interface ListBoxMenuState extends React.ClassAttributes<ListBoxMenu> {
 }
 export declare class ListBoxMenu extends React.Component<ListBoxMenuProps, ListBoxMenuState> {
     constructor(props: ListBoxMenuProps);
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     onClick(menuItem: AdaptableMenuItem): void;
 }

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

@@ -7,8 +7,8 @@ const rebass_1 = require("rebass");
 const refresh_1 = tslib_1.__importDefault(require("../../../components/icons/refresh"));
 class Waiting extends React.Component {
     render() {
-        const _a = this.props, { WaitingMessage } = _a, props = tslib_1.__rest(_a, ["WaitingMessage"]);
-        return (React.createElement(rebass_1.Flex, Object.assign({ flexDirection: "column", marginTop: 2, marginBottom: 2 }, props),
+        const { WaitingMessage, ...props } = this.props;
+        return (React.createElement(rebass_1.Flex, { flexDirection: "column", marginTop: 2, marginBottom: 2, ...props },
             React.createElement(rebass_1.Flex, { flexDirection: "row", justifyContent: "center" },
                 React.createElement(refresh_1.default, null)),
             React.createElement(rebass_1.Flex, { flexDirection: "row", justifyContent: "center" },

package/src/View/Components/Forms/AdaptableFormControlTextClear.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { InputProps } from '../../../components/Input';
 import { CSSProperties } from 'react';
 export type AdaptableFormControlTextClearProps = {
@@ -6,4 +7,4 @@ export type AdaptableFormControlTextClearProps = {
     autoFocus?: boolean;
     inputStyle?: CSSProperties;
 } & InputProps;
-export declare const AdaptableFormControlTextClear: (props: AdaptableFormControlTextClearProps) => JSX.Element;
+export declare const AdaptableFormControlTextClear: React.ForwardRefExoticComponent<Omit<AdaptableFormControlTextClearProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/src/View/Components/Forms/AdaptableFormControlTextClear.js

@@ -11,7 +11,12 @@ exports.AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
     let closeButtonTooltip = props.value ? 'Clear' : null;
     const inputRef = React.useRef(null);
     const { focusOnClear = true } = props;
-    return (React.createElement(FieldWrap_1.default, { onClick: props.onClick, className: props.className, style: Object.assign({ background: 'var(--ab-color-defaultbackground)', overflow: 'visible', width: '100%' }, props.style) },
+    return (React.createElement(FieldWrap_1.default, { onClick: props.onClick, className: props.className, style: {
+            background: 'var(--ab-color-defaultbackground)',
+            overflow: 'visible',
+            width: '100%',
+            ...props.style,
+        } },
         React.createElement(Input_1.default, { autoFocus: props.autoFocus, style: props.inputStyle, ref: (r) => {
                 inputRef.current = r;
                 if (!ref) {

package/src/View/Components/ListBox/DualListBoxEditor.d.ts

@@ -19,4 +19,4 @@ export interface DualListBoxEditorState extends React.ClassAttributes<any> {
     SelectedValuesSortOrder: SortOrder;
     AllValues: Array<any>;
 }
-export declare const DualListBoxEditor: (props: DualListBoxEditorProps) => JSX.Element;
+export declare const DualListBoxEditor: (props: DualListBoxEditorProps) => React.JSX.Element;