@adaptabletools/adaptable 17.0.0-canary.0 → 17.0.0-canary.10

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

@@ -1,17 +1,21 @@
-import * as React from 'react';
-import { Box, Flex, Text } from 'rebass';
-import HelpBlock from '../../../../components/HelpBlock';
-import { useAdaptable } from '../../../AdaptableContext';
-import { ButtonInfo } from '../../Buttons/ButtonInfo';
-import { PredicateDocsLink } from '../../../../Utilities/Constants/DocumentationLinkConstants';
-import SimpleButton from '../../../../components/SimpleButton';
-import { Tag } from '../../../../components/Tag';
-import { EntityRulePredicateEditor } from './EntityRulePredicateEditor';
-import Radio from '../../../../components/Radio';
-import { getScopeViewItems } from '../../../../Strategy/Utilities/getScopeViewItems';
-export const EntityRulePredicatesEditor = (props) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EntityRulePredicatesEditor = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const ButtonInfo_1 = require("../../Buttons/ButtonInfo");
+const DocumentationLinkConstants_1 = require("../../../../Utilities/Constants/DocumentationLinkConstants");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
+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 EntityRulePredicatesEditor = (props) => {
     var _a, _b, _c, _d, _e;
-    const { api } = useAdaptable();
+    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
@@ -48,20 +52,20 @@ export const EntityRulePredicatesEditor = (props) => {
                 ],
             } }));
     };
-    const scopeString = getScopeViewItems(props.data.Scope, api).values.join(', ');
+    const scopeString = (0, getScopeViewItems_1.getScopeViewItems)(props.data.Scope, api).values.join(', ');
     const enablePredicateColumnId = (_a = props.enablePredicateColumnId) !== null && _a !== void 0 ? _a : true;
     return (React.createElement(React.Fragment, null,
-        React.createElement(Flex, { mb: 2, justifyContent: "space-between" },
-            React.createElement(Text, { fontSize: 2, mb: 2 }, props.descriptions.selectPredicate),
-            React.createElement(SimpleButton, { 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")),
-        enablePredicateColumnId && (React.createElement(Flex, { className: "ab-EntityRulePredicateEditor-ScopeTypeSelector", p: 2, mb: 2, flexDirection: "column" },
-            React.createElement(Text, { mb: 2 }, "Create Predicate Rule(s) using"),
-            React.createElement(Radio, { "data-name": "entity-scope", onClick: () => handlePredicateScopeTypeChange(false), mr: 3, checked: !columnPredicateEnabled },
+        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")),
+        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 },
                 "Active Column:",
                 ' ',
-                React.createElement(Tag, { ml: 1, mr: 1 }, scopeString || 'Not Defined'),
+                React.createElement(Tag_1.Tag, { ml: 1, mr: 1 }, scopeString || 'Not Defined'),
                 ' '),
-            React.createElement(Radio, { "data-name": "column-scope", onClick: () => handlePredicateScopeTypeChange(true), checked: columnPredicateEnabled }, "Selected Columns (overriding Active Column)"))),
+            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));
             let editorPredicateDefs = defaultPredicateDefs;
@@ -69,14 +73,15 @@ export const EntityRulePredicatesEditor = (props) => {
                 editorPredicateDefs = [currentPredicatDef, ...defaultPredicateDefs];
             }
             return (React.createElement(React.Fragment, { key: `${index}-${predicate === null || predicate === void 0 ? void 0 : predicate.PredicateId}` },
-                index > 0 && (React.createElement(Box, null,
-                    React.createElement(Tag, { mb: 3 }, "AND"))),
-                React.createElement(EntityRulePredicateEditor, { data: props.data, predicate: predicate, onChange: props.onChange, predicateDefs: editorPredicateDefs, getPredicateDefsForColId: props.getPredicateDefsForColId, columnPredicateEnabled: columnPredicateEnabled })));
+                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 })));
         }),
-        showDocumentationLinks && (React.createElement(HelpBlock, { "data-name": "query-documentation", mt: 3, mb: 2, style: {
+        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, { mr: 2, onClick: () => window.open(PredicateDocsLink, '_blank') }),
+            React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, onClick: () => window.open(DocumentationLinkConstants_1.PredicateDocsLink, '_blank') }),
             "See Predicate documentation for more details and examples"))));
 };
+exports.EntityRulePredicatesEditor = EntityRulePredicatesEditor;

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

@@ -1 +1,5 @@
-export { EntityRulePredicatesEditor } from './EntityRulePredicatesEditor';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EntityRulePredicatesEditor = void 0;
+var EntityRulePredicatesEditor_1 = require("./EntityRulePredicatesEditor");
+Object.defineProperty(exports, "EntityRulePredicatesEditor", { enumerable: true, get: function () { return EntityRulePredicatesEditor_1.EntityRulePredicatesEditor; } });

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

@@ -1,4 +1,7 @@
-export const isAdaptableRuleValid = (abObject, api, context) => {
+"use strict";
+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)) {
@@ -28,3 +31,4 @@ export const isAdaptableRuleValid = (abObject, api, context) => {
     }
     return true;
 };
+exports.isAdaptableRuleValid = isAdaptableRuleValid;

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

@@ -3,10 +3,10 @@ import { FlexProps } from 'rebass';
 import type { AdaptableColumnPredicate, AdaptableModule, AdaptablePredicateDef, AdaptableScope } from '../../../types';
 import type { XOR } from '../../../Utilities/Extensions/TypeExtensions';
 import { AdaptableQuery } from '../../../PredefinedConfig/Common/AdaptableQuery';
-export declare type RuleType = XOR<{
+export type RuleType = XOR<{
     Predicates: AdaptableColumnPredicate[];
 }, AdaptableQuery>;
-export declare type EntityRulesEditorProps<T> = {
+export type EntityRulesEditorProps<T> = {
     data: T;
     module: AdaptableModule;
     showNoRule?: boolean;

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

@@ -1,45 +1,49 @@
-import { __rest } from "tslib";
-import * as React from 'react';
-import { useMemo } from 'react';
-import { Flex, Text } from 'rebass';
-import { Tabs } from '../../../components/Tabs';
-import Radio from '../../../components/Radio';
-import { ExpressionEditor } from '../../../components/ExpressionEditor';
-import { useAdaptable } from '../../AdaptableContext';
-import { EntityRulePredicatesEditor } from './EntityRulePredicatesEditor';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 ExpressionEditor_1 = require("../../../components/ExpressionEditor");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const EntityRulePredicatesEditor_1 = require("./EntityRulePredicatesEditor");
 const QueryTab = (props) => {
-    const { type, label, disabled = false } = props, tabProps = __rest(props, ["type", "label", "disabled"]);
-    const text = (React.createElement(Flex, { flexDirection: "column" },
+    const { type, label, disabled = false } = props, tabProps = tslib_1.__rest(props, ["type", "label", "disabled"]);
+    const text = (React.createElement(rebass_1.Flex, { flexDirection: "column" },
         label,
         " ",
-        React.createElement(Text, { fontSize: 2 }, "query")));
-    return (React.createElement(Tabs.Tab, Object.assign({ style: { flex: 1 } }, tabProps), !disabled && props.showRadio ? (React.createElement(Radio, { tabIndex: -1, margin: 0, checked: type === props.value, style: { alignItems: 'baseline' } }, text)) : (text)));
+        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)));
 };
 // needed here to be considered a child Tab component, inside the Tabs component
 QueryTab.defaultProps = {
     isTabsTab: true,
 };
-export const EntityRulesSummary = (props) => {
+const EntityRulesSummary = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const { data } = props;
-    const { api: { predicateApi, internalApi }, } = useAdaptable();
+    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)) {
-        return React.createElement(Text, { fontSize: 2 }, "No Rule defined");
+        return React.createElement(rebass_1.Text, { fontSize: 2 }, "No Rule defined");
     }
-    return (React.createElement(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) => (
+    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) => (
     // 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 RuleTabTitle = (props) => {
-    return props.showRadio ? (React.createElement(Radio, { tabIndex: -1, margin: 0, checked: props.checked }, props.children)) : (React.createElement(React.Fragment, null, "props.children"));
+    return props.showRadio ? (React.createElement(Radio_1.default, { tabIndex: -1, margin: 0, checked: props.checked }, props.children)) : (React.createElement(React.Fragment, null, "props.children"));
 };
-export const EntityRulesEditor = (props) => {
+const EntityRulesEditor = (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 } = useAdaptable();
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
     const numberOfTabs = [
         showNoRule,
         showPredicate,
@@ -105,26 +109,27 @@ export const EntityRulesEditor = (props) => {
     const setAggregationExpression = (expression) => {
         props.onChange(Object.assign(Object.assign({}, data), { Rule: { AggregatedBooleanExpression: expression } }));
     };
-    const initialData = useMemo(() => api.internalApi.getQueryPreviewData(), []);
+    const initialData = (0, react_1.useMemo)(() => api.internalApi.getQueryPreviewData(), []);
     const baseClassName = 'ab-EntityRulesEditor';
-    return (React.createElement(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, 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, { onValueChange: setType, value: selectedTab, pt: 2, pl: 2, style: { flex: 1, overflow: 'auto' } },
-            showNoRule ? (React.createElement(Tabs.Tab, { value: 'NoRule', style: { flex: 1 } },
+        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(RuleTabTitle, { showRadio: showRadioButtons, checked: type === 'NoRule' }, "No Condition"))) : null,
-            showNoRule ? (React.createElement(Tabs.Content, { value: 'NoRule' },
-                React.createElement(Text, { fontSize: 2, mb: 2 }, 'Format Column is always applied'))) : null,
-            showPredicate ? (React.createElement(Tabs.Tab, { value: 'Predicate', style: { flex: 1 } },
+            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(RuleTabTitle, { showRadio: showRadioButtons, checked: type === 'Predicate' }, "Predicate"))) : null,
-            showPredicate ? (React.createElement(Tabs.Content, { "data-name": "Predicate", value: "Predicate" },
-                React.createElement(EntityRulePredicatesEditor, { enablePredicateColumnId: props.enablePredicateColumnId, data: data, descriptions: descriptions, predicateDefs: filteredPredicateDefs, getPredicateDefsForColId: props.getPredicateDefsForColId, onChange: props.onChange }))) : null,
+            showPredicate ? (React.createElement(Tabs_1.Tabs.Content, { "data-name": "Predicate", value: "Predicate" },
+                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.Content, { "data-name": "BooleanExpression", value: 'BooleanExpression', paddingLeft: 0 },
-                React.createElement(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.namedQueryApi.getNamedQueries(), 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.namedQueryApi.getNamedQueries(), api: api }))) : null,
             showObservable ? (React.createElement(QueryTab, { showRadio: showRadioButtons, value: "ObservableExpression", type: type, label: "Observable" })) : null,
-            showObservable ? (React.createElement(Tabs.Content, { "data-name": "ObservableExpression", value: 'ObservableExpression', paddingLeft: 0 },
-                React.createElement(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.namedQueryApi.getNamedQueries(), 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.namedQueryApi.getNamedQueries(), api: api }))) : null,
             showAggregation ? (React.createElement(QueryTab, { showRadio: showRadioButtons, value: "AggregatedBooleanExpression", type: type, label: "Aggregated Boolean" })) : null,
-            showAggregation ? (React.createElement(Tabs.Content, { "data-name": "AggregatedBooleanExpression", value: 'AggregatedBooleanExpression', paddingLeft: 0 },
-                React.createElement(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.namedQueryApi.getNamedQueries(), 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.namedQueryApi.getNamedQueries(), api: api }))) : null)));
 };
+exports.EntityRulesEditor = EntityRulesEditor;

package/src/View/Components/ExpressionWizard.js

@@ -1,12 +1,16 @@
-import * as React from 'react';
-import { Flex } from 'rebass';
-import { CheckBox } from '../../components/CheckBox';
-import { ExpressionEditor } from '../../components/ExpressionEditor';
-import Input from '../../components/Input';
-import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
-import { NamedQueryModuleId } from '../../Utilities/Constants/ModuleConstants';
-import { useMemo } from 'react';
-export class ExpressionWizard extends React.Component {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpressionWizard = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const CheckBox_1 = require("../../components/CheckBox");
+const ExpressionEditor_1 = require("../../components/ExpressionEditor");
+const Input_1 = tslib_1.__importDefault(require("../../components/Input"));
+const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
+const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
+const react_1 = require("react");
+class ExpressionWizard extends React.Component {
     constructor(props) {
         var _a, _b;
         super(props);
@@ -26,29 +30,29 @@ export class ExpressionWizard extends React.Component {
         };
     }
     render() {
-        const initialData = useMemo(() => this.props.api.internalApi.getQueryPreviewData(), []);
+        const initialData = (0, react_1.useMemo)(() => this.props.api.internalApi.getQueryPreviewData(), []);
         return (React.createElement(React.Fragment, null,
-            React.createElement(ExpressionEditor, { type: 'boolean', module: NamedQueryModuleId, value: this.state.expression, onChange: this.handleCustomExpressionChange, initialData: initialData, columns: this.props.api.columnApi.getQueryableColumns(), namedQueries: this.props.api.namedQueryApi.getNamedQueries(), api: this.props.api }),
+            React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'boolean', module: ModuleConstants_1.NamedQueryModuleId, value: this.state.expression, onChange: this.handleCustomExpressionChange, initialData: initialData, columns: this.props.api.columnApi.getQueryableColumns(), namedQueries: this.props.api.namedQueryApi.getNamedQueries(), api: this.props.api }),
             ' ',
-            React.createElement(Flex, { flexDirection: "row", padding: 1, marginBottom: 2, marginLeft: 1, alignItems: "center", "data-name": "expression-wizard-save-option" },
-                React.createElement(CheckBox, { marginLeft: 2, disabled: !this.isValidExpression(), marginBottom: 2, checked: this.state.saveToNamedQueries, onChange: (checked) => this.setState({
+            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({
                         saveToNamedQueries: checked,
                     }, () => this.props.updateGoBackState()) }, "Save as new Named Query"),
-                this.state.saveToNamedQueries && (React.createElement(Input, { marginLeft: 2, style: { minWidth: '20rem' }, value: this.state.newNamedQuery, onChange: (e) => this.setState({
+                this.state.saveToNamedQueries && (React.createElement(Input_1.default, { marginLeft: 2, style: { minWidth: '20rem' }, value: this.state.newNamedQuery, onChange: (e) => this.setState({
                         newNamedQuery: e.target.value,
                     }, () => this.props.updateGoBackState()) })))));
     }
     isValidExpression() {
-        return (StringExtensions.IsNotNullOrEmpty(this.state.expression) &&
+        return (StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.state.expression) &&
             this.props.api.internalApi
                 .getQueryLanguageService()
-                .validateBoolean(this.state.expression, NamedQueryModuleId).isValid);
+                .validateBoolean(this.state.expression, ModuleConstants_1.NamedQueryModuleId).isValid);
     }
     canNext() {
         if (this.isValidExpression() == false) {
             return false;
         }
-        if (this.state.saveToNamedQueries && StringExtensions.IsNullOrEmpty(this.state.newNamedQuery)) {
+        if (this.state.saveToNamedQueries && StringExtensions_1.StringExtensions.IsNullOrEmpty(this.state.newNamedQuery)) {
             return false;
         }
         return true;
@@ -76,3 +80,4 @@ export class ExpressionWizard extends React.Component {
         return 1;
     }
 }
+exports.ExpressionWizard = ExpressionWizard;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { CustomRenderContext } from '../../../types';
 import { AdaptableFrameworkComponent } from '../../types';
-declare type Render = (customRenderContext: CustomRenderContext) => string | null;
+type Render = (customRenderContext: CustomRenderContext) => string | null;
 interface ExternalRendererProps {
     componentName?: string;
     render?: Render;

package/src/View/Components/ExternalRenderer.js

@@ -1,10 +1,13 @@
-import { __rest } from "tslib";
-import * as React from 'react';
-import { useAdaptable } from '../AdaptableContext';
-export const ExternalRenderer = (_a) => {
-    var { render, frameworkComponent, componentName = 'N/A', onDestroy } = _a, rest = __rest(_a, ["render", "frameworkComponent", "componentName", "onDestroy"]);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 adaptable = useAdaptable();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const [contentsHTML, setContentsHTML] = React.useState('');
     React.useLayoutEffect(() => {
         const element = ref.current;
@@ -42,3 +45,4 @@ export const ExternalRenderer = (_a) => {
     }, []);
     return React.createElement("div", Object.assign({}, rest, { dangerouslySetInnerHTML: { __html: contentsHTML }, ref: ref }));
 };
+exports.ExternalRenderer = ExternalRenderer;

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

@@ -1,69 +1,52 @@
-import * as React from 'react';
-import { connect } from 'react-redux';
-import * as LayoutRedux from '../../../Redux/ActionsReducers/LayoutRedux';
-import { getColumnFilterSelector } from '../../../Redux/ActionsReducers/LayoutRedux';
-import * as SystemRedux from '../../../Redux/ActionsReducers/SystemRedux';
-import { ColumnMenuTab } from '../../../PredefinedConfig/Common/Enums';
-import { ListBoxFilterForm } from './ListBoxFilterForm';
-import { ButtonClose } from '../Buttons/ButtonClose';
-import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
-import { ButtonClear } from '../Buttons/ButtonClear';
-import { ListBoxMenu } from './ListBoxMenu';
-import { FilterFormPanel } from '../Panels/FilterFormPanel';
-import { ObjectFactory } from '../../../Utilities/ObjectFactory';
-import HelpBlock from '../../../components/HelpBlock';
-import { Flex } from 'rebass';
-import Radio from '../../../components/Radio';
-import Helper from '../../../Utilities/Helpers/Helper';
-import AdaptableInput from '../AdaptableInput';
-import { renderWithAdaptableContext } from '../../renderWithAdaptableContext';
-import { CheckBox } from '../../../components/CheckBox';
-import { runIfNotResolvedIn } from '../../../Utilities/runIfNotResolvedIn';
-import { getDefaultColumnFilterPredicate } from './getDefaultColumnFilterPredicate';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterFormReact = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const LayoutRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/LayoutRedux"));
+const LayoutRedux_1 = require("../../../Redux/ActionsReducers/LayoutRedux");
+const SystemRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/SystemRedux"));
+const Enums_1 = require("../../../PredefinedConfig/Common/Enums");
+const ListBoxFilterForm_1 = require("./ListBoxFilterForm");
+const ButtonClose_1 = require("../Buttons/ButtonClose");
+const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
+const ButtonClear_1 = require("../Buttons/ButtonClear");
+const ListBoxMenu_1 = require("./ListBoxMenu");
+const FilterFormPanel_1 = require("../Panels/FilterFormPanel");
+const ObjectFactory_1 = require("../../../Utilities/ObjectFactory");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
+const rebass_1 = require("rebass");
+const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
+const Helper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/Helper"));
+const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
+const renderWithAdaptableContext_1 = require("../../renderWithAdaptableContext");
+const CheckBox_1 = require("../../../components/CheckBox");
+const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
+const getDefaultColumnFilterPredicate_1 = require("./getDefaultColumnFilterPredicate");
 const panelStyle = {
     width: '100%',
     minWidth: 150,
 };
 class FilterFormComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this._isMounted = false;
-        this.handleFilterChange = (filter) => {
-            if (this.state.suppressClientSideFilter) {
-                this.loadPermittedValues(filter);
-            }
-        };
-        this._isMounted = true;
-        const existingColumnFilter = FilterFormComponent.createColumnFilterFromProps(this.props);
-        this.state = {
-            columnFilters: props.columnFilters,
-            distinctColumnValues: [],
-            isDistinctColumnValuesLoading: false,
-            showTab: true,
-            selectedTab: ColumnMenuTab.Filter,
-            editedColumnFilter: existingColumnFilter,
-            currentTab: FilterFormComponent.getCurrentTab(existingColumnFilter),
-            suppressClientSideFilter: false,
-        };
-    }
     static createColumnFilterFromProps(props) {
         let existingColumnFilter = props.columnFilters.find((cf) => cf.ColumnId == props.currentColumn.columnId);
         if (!existingColumnFilter) {
             const columnFilterOptions = props.api.optionsApi.getColumnFilterOptions();
-            if (columnFilterOptions.defaultFilterFormTab == 'Values') {
-                return ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, 'Values', []);
+            if (columnFilterOptions.filterFormOptions.defaultFilterFormTab == 'Values') {
+                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, 'Values', []);
             }
             if (props.currentColumn.dataType === 'Number') {
-                return ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, getDefaultColumnFilterPredicate(props.currentColumn, columnFilterOptions.defaultNumericColumnFilter), ['']);
+                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, (0, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate)(props.currentColumn, columnFilterOptions.defaultNumericColumnFilter), ['']);
             }
             if (props.currentColumn.dataType === 'String') {
-                return ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, getDefaultColumnFilterPredicate(props.currentColumn, columnFilterOptions.defaultStringColumnFilter), ['']);
+                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, (0, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate)(props.currentColumn, columnFilterOptions.defaultStringColumnFilter), ['']);
             }
             if (props.currentColumn.dataType === 'Date') {
-                return ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, getDefaultColumnFilterPredicate(props.currentColumn, columnFilterOptions.defaultDateColumnFilter), ['']);
+                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, (0, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate)(props.currentColumn, columnFilterOptions.defaultDateColumnFilter), ['']);
             }
             if (props.currentColumn.dataType === 'Boolean') {
-                return ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, 'BooleanToggle', [
+                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, 'BooleanToggle', [
                     'all',
                 ]);
             }
@@ -97,6 +80,27 @@ class FilterFormComponent extends React.Component {
                 : state.currentTab,
         };
     }
+    constructor(props) {
+        super(props);
+        this._isMounted = false;
+        this.handleFilterChange = (filter) => {
+            if (this.state.suppressClientSideFilter) {
+                this.loadPermittedValues(filter);
+            }
+        };
+        this._isMounted = true;
+        const existingColumnFilter = FilterFormComponent.createColumnFilterFromProps(this.props);
+        this.state = {
+            columnFilters: props.columnFilters,
+            distinctColumnValues: [],
+            isDistinctColumnValuesLoading: false,
+            showTab: true,
+            selectedTab: Enums_1.ColumnMenuTab.Filter,
+            editedColumnFilter: existingColumnFilter,
+            currentTab: FilterFormComponent.getCurrentTab(existingColumnFilter),
+            suppressClientSideFilter: false,
+        };
+    }
     componentWillUnmount() {
         this._isMounted = false;
     }
@@ -106,7 +110,8 @@ class FilterFormComponent extends React.Component {
         }
     }
     async loadPermittedValues(filter = '') {
-        const { values: distinctColumnValues, suppressClientSideFilter } = await runIfNotResolvedIn(this.props.api.gridApi.internalApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter, this.props.api.optionsApi.getColumnFilterOptions().showDistinctFilteredValuesOnly), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
+        const { values: distinctColumnValues, suppressClientSideFilter } = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(this.props.api.gridApi.internalApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter, this.props.api.optionsApi.getColumnFilterOptions().valuesFilterOptions
+            .showDistinctFilteredValuesOnly), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
         if (this._isMounted) {
             this.setState({
                 distinctColumnValues,
@@ -125,40 +130,40 @@ class FilterFormComponent extends React.Component {
         let uiSelectedColumnValues = ((_b = (_a = this.state.editedColumnFilter) === null || _a === void 0 ? void 0 : _a.Predicate) === null || _b === void 0 ? void 0 : _b.PredicateId) === 'Values'
             ? this.state.editedColumnFilter.Predicate.Inputs
             : [];
-        let isEmptyFilter = Helper.objectNotExists(this.state.editedColumnFilter) ||
-            Helper.objectNotExists(this.state.editedColumnFilter.Predicate) ||
-            Helper.objectNotExists(this.state.editedColumnFilter.Predicate.PredicateId);
-        let closeButton = (React.createElement(ButtonClose, { onClick: () => this.onCloseForm(), tooltip: null, accessLevel: 'Full' }));
-        let clearFilterButton = (React.createElement(ButtonClear, { onClick: () => this.onClearFilter(), disabled: isEmptyFilter, tooltip: null, accessLevel: 'Full', showText: true, showIcon: false }));
-        const useAgGridStyle = !!columnFilterOptions.useAgGridFilterFormStyle;
-        return (React.createElement("div", { className: "ab-FilterForm", "data-name": "filter-form" }, StringExtensions.IsNullOrEmpty(isFilterable) ? (React.createElement(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: columnFilterOptions.autoApplyFilter ? true : false, useAgGridStyle: useAgGridStyle, applyFilterButtonDisabled: isEmptyFilter, onColumnFilterApplied: () => this.onColumnFilterApplied() }, this.state.selectedTab == ColumnMenuTab.Menu ? (React.createElement(ListBoxMenu, { MenuItems: this.props.api.gridApi.internalApi.buildStandaloneColumnHeader(this.props.currentColumn), onMenuItemClick: (menuItem) => this.onMenuItemClick(menuItem) })) : (React.createElement(React.Fragment, null,
+        let isEmptyFilter = Helper_1.default.objectNotExists(this.state.editedColumnFilter) ||
+            Helper_1.default.objectNotExists(this.state.editedColumnFilter.Predicate) ||
+            Helper_1.default.objectNotExists(this.state.editedColumnFilter.Predicate.PredicateId);
+        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 = !!columnFilterOptions.filterFormOptions.useAgGridFilterFormStyle;
+        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: columnFilterOptions.autoApplyFilter ? true : false, useAgGridStyle: useAgGridStyle, applyFilterButtonDisabled: isEmptyFilter, onColumnFilterApplied: () => this.onColumnFilterApplied() }, 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, { "data-name": "values", flex: 1, marginLeft: 1, checked: this.state.currentTab == 'values', onChange: () => this.setState({ currentTab: 'values' }) },
-                    React.createElement(Flex, { fontSize: 'var( --ab-font-size-2)' }, "Column Values")),
-                React.createElement(Radio, { "data-name": "predicates", marginLeft: 2, flex: 1, checked: this.state.currentTab == 'predicates', onChange: () => this.setState({ currentTab: 'predicates' }) },
-                    React.createElement(Flex, { fontSize: 'var( --ab-font-size-2)' }, "Filters")))),
-            this.state.currentTab === 'values' && (React.createElement(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) })),
+                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, { "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(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
                     .filter((p) => p.id !== 'Values' && p.id !== 'ExcludeValues')
-                    .map((predicateDef, index) => this.renderColumnPredicate(predicateDef, index)))))))) : (React.createElement(HelpBlock, null, isFilterable))));
+                    .map((predicateDef, index) => this.renderColumnPredicate(predicateDef, index)))))))) : (React.createElement(HelpBlock_1.default, null, isFilterable))));
     }
     renderColumnPredicate(predicateDef, index) {
         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(Flex, { className: "ab-FilterForm__predicate", key: index, flexDirection: "column" },
-            React.createElement(Radio, { "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(Flex, { className: "ab-FilterForm__predicate_inputs", 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(Flex, { className: "ab-FilterForm__predicate-input", flexDirection: "row", flex: 1, justifyContent: "center", alignItems: "center" },
-                React.createElement(CheckBox, { disabled: this.isFilterDisabled(), checked: filter.Predicate.Inputs[0] === 'true'
+            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'
                             ? false
@@ -173,8 +178,14 @@ class FilterFormComponent extends React.Component {
                         this.changeColumnPredicateInput(newCheckedValue, 0);
                     } })));
         }
-        return (_a = predicateDef.inputs) === null || _a === void 0 ? void 0 : _a.map((predicateInput, index) => (React.createElement(Flex, { key: index, flexDirection: "row" },
-            React.createElement(AdaptableInput, { 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 }))));
+        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, { onMouseDown: (event) => {
+                    console.log('onMouseDown', predicateInput.type, event);
+                    if (predicateInput.type === 'date') {
+                        // This prevents the ag-grid dropdown closing when a date is selected
+                        event.stopPropagation();
+                    }
+                }, 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;
@@ -261,7 +272,7 @@ function mapStateToProps(state, ownProps) {
     return {
         currentColumn: ownProps.currentColumn,
         columns: state.Grid.Columns,
-        columnFilters: getColumnFilterSelector(state),
+        columnFilters: (0, LayoutRedux_1.getColumnFilterSelector)(state),
         showCloseButton: ownProps.showCloseButton,
     };
 }
@@ -275,5 +286,6 @@ function mapDispatchToProps(dispatch) {
         onHideFilterForm: () => dispatch(SystemRedux.SystemFilterFormHide()),
     };
 }
-const FilterForm = connect(mapStateToProps, mapDispatchToProps)(FilterFormComponent);
-export const FilterFormReact = (columnFilterProps) => renderWithAdaptableContext(React.createElement(FilterForm, { api: columnFilterProps.Adaptable.api, currentColumn: columnFilterProps.Column, teamSharingActivated: false, embedColumnMenu: columnFilterProps.Adaptable.embedColumnMenu, showCloseButton: columnFilterProps.ShowCloseButton }), columnFilterProps.Adaptable);
+const FilterForm = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(FilterFormComponent);
+const FilterFormReact = (columnFilterProps) => (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(FilterForm, { api: columnFilterProps.Adaptable.api, currentColumn: columnFilterProps.Column, teamSharingActivated: false, embedColumnMenu: columnFilterProps.Adaptable.embedColumnMenu, showCloseButton: columnFilterProps.ShowCloseButton }), columnFilterProps.Adaptable);
+exports.FilterFormReact = FilterFormReact;