@adaptabletools/adaptable 16.2.4 → 17.0.0-canary.1

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

@@ -1,15 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CellPopup = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const InfiniteTable_1 = require("../../../components/InfiniteTable");
-const utils_1 = require("../../../components/OverlayTrigger/utils");
-const AdaptableContext_1 = require("../../AdaptableContext");
-const UIHelper_1 = require("../../UIHelper");
+import * as React from 'react';
+import { useOverlay } from '../../../components/InfiniteTable';
+import { getRect } from '../../../components/OverlayTrigger/utils';
+import { useAdaptable } from '../../AdaptableContext';
+import { isBrowserDocumentAvailable } from '../../UIHelper';
 let portalElement;
 const ensurePortalElement = () => {
-    if (!(0, UIHelper_1.isBrowserDocumentAvailable)()) {
+    if (!isBrowserDocumentAvailable()) {
         return;
     }
     if (portalElement) {
@@ -22,10 +18,10 @@ const ensurePortalElement = () => {
     portalElement.style.left = '0px';
     document.body.appendChild(portalElement);
 };
-exports.CellPopup = React.forwardRef((props, ref) => {
+export const CellPopup = React.forwardRef((props, ref) => {
     ensurePortalElement();
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const { showOverlay, clearAll: clearAllOverlays, hideOverlay, portal, } = (0, InfiniteTable_1.useOverlay)({
+    const adaptable = useAdaptable();
+    const { showOverlay, clearAll: clearAllOverlays, hideOverlay, portal, } = useOverlay({
         portalContainer: portalElement,
     });
     const OVERLAY_ID = 'cell-overlay';
@@ -47,7 +43,7 @@ exports.CellPopup = React.forwardRef((props, ref) => {
                 ['BottomCenter', 'TopCenter'],
             ],
             constrainTo: (_a = adaptable.getAgGridContainerElement()) !== null && _a !== void 0 ? _a : true,
-            alignTo: (0, utils_1.getRect)(alignTo),
+            alignTo: getRect(alignTo),
         };
         showOverlay(() => props.children, showOverlayOptions);
     };

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { AdaptableColumn } from '../../../types';
-declare type NewColumnSelectorProps = {
+type NewColumnSelectorProps = {
     availableColumns: AdaptableColumn[];
     selected: string[];
     singleSelect?: boolean;

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

@@ -1,18 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NewColumnSelector = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("react");
-const ValueSelector_1 = require("../ValueSelector");
-const NewColumnSelector = (props) => {
+import * as React from 'react';
+import { useMemo } from 'react';
+import { ValueSelector } from '../ValueSelector';
+export const NewColumnSelector = (props) => {
     const { columnFilterText, availableColumns, selected, onChange, singleSelect } = props;
-    const filterFn = (0, react_1.useMemo)(() => {
+    const filterFn = useMemo(() => {
         return columnFilterText
             ? (c) => c.friendlyName.toLowerCase().indexOf(columnFilterText.toLowerCase()) != -1
             : null;
     }, [columnFilterText]);
-    return (React.createElement(ValueSelector_1.ValueSelector, { value: selected, options: availableColumns, filter: filterFn, singleSelect: singleSelect, allowReorder: false, onChange: (colIds) => {
+    return (React.createElement(ValueSelector, { value: selected, options: availableColumns, filter: filterFn, singleSelect: singleSelect, allowReorder: false, onChange: (colIds) => {
             if (singleSelect) {
                 onChange(colIds.length ? [colIds.pop()] : []);
             }
@@ -23,7 +19,6 @@ const NewColumnSelector = (props) => {
             ? () => null
             : (count) => (count > 1 ? `You selected ${count} columns.` : 'You selected one column.') }));
 };
-exports.NewColumnSelector = NewColumnSelector;
-exports.NewColumnSelector.defaultProps = {
+NewColumnSelector.defaultProps = {
     allowReorder: true,
 };

package/src/View/Components/EntityRowItem.js

@@ -1,13 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EntityRowItem = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-class EntityRowItem extends React.Component {
+import * as React from 'react';
+export class EntityRowItem extends React.Component {
     render() {
         return React.createElement("span", null,
             " ",
             this.props.Content);
     }
 }
-exports.EntityRowItem = EntityRowItem;

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

@@ -1,17 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EntityRulePredicateEditor = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
-const AdaptableContext_1 = require("../../../AdaptableContext");
-const PredicateEditor_1 = require("../../PredicateEditor/PredicateEditor");
-const EntityRulePredicateEditor = (props) => {
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import DropdownButton from '../../../../components/DropdownButton';
+import FormLayout, { FormRow } from '../../../../components/FormLayout';
+import SimpleButton from '../../../../components/SimpleButton';
+import { useAdaptable } from '../../../AdaptableContext';
+import { PredicateEditor } from '../../PredicateEditor/PredicateEditor';
+export const EntityRulePredicateEditor = (props) => {
     var _a, _b, _c, _d, _e;
-    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const { api } = useAdaptable();
     const { predicate } = props;
     const allColumns = React.useMemo(() => {
         return api.columnApi.getColumns().map((column) => ({
@@ -72,14 +68,13 @@ const EntityRulePredicateEditor = (props) => {
     else if ('ColumnIds' in props.data.Scope && ((_c = (_b = props.data.Scope) === null || _b === void 0 ? void 0 : _b.ColumnIds) === null || _c === void 0 ? void 0 : _c[0])) {
         predicateColumnId = (_e = (_d = props.data.Scope) === null || _d === void 0 ? void 0 : _d.ColumnIds) === null || _e === void 0 ? void 0 : _e[0];
     }
-    return (React.createElement(rebass_1.Flex, { className: "ab-EntityRulePredicateEditor", p: 3, mb: 3 },
-        React.createElement(rebass_1.Box, { flex: 1 },
-            React.createElement(FormLayout_1.default, null,
-                columnIdPredicateScopeEnabled && (React.createElement(FormLayout_1.FormRow, { label: "Column" },
-                    React.createElement(DropdownButton_1.default, { width: "100%", columns: ['label'], items: columnOptions }, columnFriendlyName !== null && columnFriendlyName !== void 0 ? columnFriendlyName : 'Select Column'))),
-                React.createElement(FormLayout_1.FormRow, { label: "Predicate" },
-                    React.createElement(PredicateEditor_1.PredicateEditor, { columnId: predicateColumnId, predicateDefs: predicateDefs, predicate: predicate, onChange: handlePredicateChange, onClear: handleClear })))),
-        React.createElement(rebass_1.Box, null,
-            React.createElement(SimpleButton_1.default, { disabled: !predicate, ml: 2, onClick: handleClear, icon: "delete" }))));
+    return (React.createElement(Flex, { className: "ab-EntityRulePredicateEditor", p: 3, mb: 3 },
+        React.createElement(Box, { flex: 1 },
+            React.createElement(FormLayout, null,
+                columnIdPredicateScopeEnabled && (React.createElement(FormRow, { label: "Column" },
+                    React.createElement(DropdownButton, { width: "100%", columns: ['label'], items: columnOptions }, columnFriendlyName !== null && columnFriendlyName !== void 0 ? columnFriendlyName : 'Select Column'))),
+                React.createElement(FormRow, { label: "Predicate" },
+                    React.createElement(PredicateEditor, { columnId: predicateColumnId, predicateDefs: predicateDefs, predicate: predicate, onChange: handlePredicateChange, onClear: handleClear })))),
+        React.createElement(Box, null,
+            React.createElement(SimpleButton, { disabled: !predicate, ml: 2, onClick: handleClear, icon: "delete" }))));
 };
-exports.EntityRulePredicateEditor = EntityRulePredicateEditor;

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

@@ -1,21 +1,17 @@
-"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) => {
+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) => {
     var _a, _b, _c, _d, _e;
-    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const { api } = 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
@@ -52,20 +48,20 @@ const EntityRulePredicatesEditor = (props) => {
                 ],
             } }));
     };
-    const scopeString = (0, getScopeViewItems_1.getScopeViewItems)(props.data.Scope, api).values.join(', ');
+    const scopeString = 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(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 },
+        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 },
                 "Active Column:",
                 ' ',
-                React.createElement(Tag_1.Tag, { ml: 1, mr: 1 }, scopeString || 'Not Defined'),
+                React.createElement(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)"))),
+            React.createElement(Radio, { "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;
@@ -73,15 +69,14 @@ 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(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 })));
+                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 })));
         }),
-        showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", mt: 3, mb: 2, style: {
+        showDocumentationLinks && (React.createElement(HelpBlock, { "data-name": "query-documentation", mt: 3, mb: 2, style: {
                 fontSize: 'var(--ab-font-size-3)',
                 padding: 0,
             } },
-            React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, onClick: () => window.open(DocumentationLinkConstants_1.PredicateDocsLink, '_blank') }),
+            React.createElement(ButtonInfo, { mr: 2, onClick: () => window.open(PredicateDocsLink, '_blank') }),
             "See Predicate documentation for more details and examples"))));
 };
-exports.EntityRulePredicatesEditor = EntityRulePredicatesEditor;

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

@@ -1,5 +1 @@
-"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; } });
+export { EntityRulePredicatesEditor } from './EntityRulePredicatesEditor';

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

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isAdaptableRuleValid = void 0;
-const isAdaptableRuleValid = (abObject, api, context) => {
+export 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)) {
@@ -31,4 +28,3 @@ 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,49 +1,53 @@
-"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");
+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';
 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" },
+    const { type, label, disabled = false } = props, tabProps = __rest(props, ["type", "label", "disabled"]);
+    const text = (React.createElement(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)));
+        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)));
 };
 // needed here to be considered a child Tab component, inside the Tabs component
 QueryTab.defaultProps = {
     isTabsTab: true,
 };
-const EntityRulesSummary = (props) => {
+export const EntityRulesSummary = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const { data } = props;
-    const { api: { predicateApi, internalApi }, } = (0, AdaptableContext_1.useAdaptable)();
+    const { api: { predicateApi, internalApi }, } = 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(rebass_1.Text, { fontSize: 2 }, "No Rule defined");
+        return React.createElement(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) => (
-    // 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))))));
+    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) => (
+        // 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_1.default, { tabIndex: -1, margin: 0, checked: props.checked }, props.children)) : (React.createElement(React.Fragment, null, "props.children"));
+    return props.showRadio ? (React.createElement(Radio, { tabIndex: -1, margin: 0, checked: props.checked }, props.children)) : (React.createElement(React.Fragment, null, "props.children"));
 };
-const EntityRulesEditor = (props) => {
+export 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 } = (0, AdaptableContext_1.useAdaptable)();
+    const { api } = useAdaptable();
     const numberOfTabs = [
         showNoRule,
         showPredicate,
@@ -109,27 +113,26 @@ const EntityRulesEditor = (props) => {
     const setAggregationExpression = (expression) => {
         props.onChange(Object.assign(Object.assign({}, data), { Rule: { AggregatedBooleanExpression: expression } }));
     };
-    const initialData = (0, react_1.useMemo)(() => api.internalApi.getQueryPreviewData(), []);
+    const initialData = 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(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(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(RuleTabTitle, { showRadio: showRadioButtons, 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 } },
+            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 } },
                 React.createElement(RuleTabTitle, { showRadio: showRadioButtons, checked: type === 'Predicate' }, "Predicate"))) : 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,
+            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,
             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', 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,
+            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,
             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', 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,
+            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,
             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', 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)));
+            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)));
 };
-exports.EntityRulesEditor = EntityRulesEditor;

package/src/View/Components/ExpressionWizard.js

@@ -1,16 +1,12 @@
-"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 {
+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 {
     constructor(props) {
         var _a, _b;
         super(props);
@@ -30,29 +26,29 @@ class ExpressionWizard extends React.Component {
         };
     }
     render() {
-        const initialData = (0, react_1.useMemo)(() => this.props.api.internalApi.getQueryPreviewData(), []);
+        const initialData = 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.getNamedQueries(), api: this.props.api }),
+            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(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({
+            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({
                         saveToNamedQueries: checked,
                     }, () => this.props.updateGoBackState()) }, "Save as new Named Query"),
-                this.state.saveToNamedQueries && (React.createElement(Input_1.default, { marginLeft: 2, style: { minWidth: '20rem' }, value: this.state.newNamedQuery, onChange: (e) => this.setState({
+                this.state.saveToNamedQueries && (React.createElement(Input, { marginLeft: 2, style: { minWidth: '20rem' }, value: this.state.newNamedQuery, onChange: (e) => this.setState({
                         newNamedQuery: e.target.value,
                     }, () => this.props.updateGoBackState()) })))));
     }
     isValidExpression() {
-        return (StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.state.expression) &&
+        return (StringExtensions.IsNotNullOrEmpty(this.state.expression) &&
             this.props.api.internalApi
                 .getQueryLanguageService()
-                .validateBoolean(this.state.expression, ModuleConstants_1.QueryModuleId).isValid);
+                .validateBoolean(this.state.expression, NamedQueryModuleId).isValid);
     }
     canNext() {
         if (this.isValidExpression() == false) {
             return false;
         }
-        if (this.state.saveToNamedQueries && StringExtensions_1.StringExtensions.IsNullOrEmpty(this.state.newNamedQuery)) {
+        if (this.state.saveToNamedQueries && StringExtensions.IsNullOrEmpty(this.state.newNamedQuery)) {
             return false;
         }
         return true;
@@ -80,4 +76,3 @@ 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,13 +1,10 @@
-"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"]);
+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"]);
     const ref = React.useRef();
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptable = useAdaptable();
     const [contentsHTML, setContentsHTML] = React.useState('');
     React.useLayoutEffect(() => {
         const element = ref.current;
@@ -45,4 +42,3 @@ const ExternalRenderer = (_a) => {
     }, []);
     return React.createElement("div", Object.assign({}, rest, { dangerouslySetInnerHTML: { __html: contentsHTML }, ref: ref }));
 };
-exports.ExternalRenderer = ExternalRenderer;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColumnFilterContext } from '../../../Utilities/Interface/ColumnFilterContext';
+import { ColumnFilterProps } from '../../../Utilities/Interface/ColumnFilterProps';
 import { ColumnMenuTab } from '../../../PredefinedConfig/Common/Enums';
 import { ColumnFilter } from '../../../types';
 export interface FilterFormState {
@@ -15,4 +15,4 @@ export interface FilterFormState {
     currentTab: 'values' | 'predicates';
     suppressClientSideFilter: boolean;
 }
-export declare const FilterFormReact: (FilterContext: ColumnFilterContext) => JSX.Element;
+export declare const FilterFormReact: (columnFilterProps: ColumnFilterProps) => JSX.Element;