@adaptabletools/adaptable 18.0.12 → 18.1.0-canary.0

package/src/agGrid/editors/AdaptablePercentageEditor/index.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { ICellEditorComp } from '@ag-grid-community/core';
+import { AdaptableNumberCellEditorParams } from '../AdaptableNumberEditor';
+/**
+ * Adaptable percentage editor parameters extending the number editor params.
+ */
+export interface AdaptablePercentageCellEditorParams extends AdaptableNumberCellEditorParams {
+}
+export declare const AdaptableReactPercentageEditor: React.ForwardRefExoticComponent<AdaptablePercentageCellEditorParams & React.RefAttributes<unknown>>;
+/**
+ * Used by default for all `abColDefNumber` columns.
+ *
+ * You can configure it by specifying `cellEditorParams` in the colDef:
+ *
+ * colDef {
+ *   field: 'stars',
+ *   type: 'abColDefNumber',
+ *   cellEditorParams: {
+ *     emptyValue: 5, // defaults to ''
+ *     showClearButton: false
+ *   }
+ * }
+ *
+ * For now, there are 2 editor params you can configure:
+ *
+ * cellEditorParams.showClearButton - defaults to `true` - whether to show the clear button. If `true`, it works together with `cellEditorParams.emptyValue`
+ * cellEditorParams.emptyValue - defaults to `''` (empty string) - value to set for the cell, when the clear button is pressed.
+ *
+ * When the colDef has a `valueParser` provided as a function, it will be used before setting the value for the cell.
+ */
+export declare class AdaptablePercentageEditor implements ICellEditorComp {
+    private value;
+    private columnId;
+    private el;
+    private params;
+    private editor;
+    private valueParser;
+    private unmountReactRoot?;
+    init(params: AdaptablePercentageCellEditorParams): void;
+    getGui(): HTMLDivElement;
+    getValue(): any;
+    focusIn(): void;
+    focusOut(): void;
+    afterGuiAttached(): void;
+    destroy(): void;
+    private onValueChange;
+}

package/src/agGrid/editors/AdaptablePercentageEditor/index.js

@@ -0,0 +1,148 @@
+import * as React from 'react';
+import { renderWithAdaptableContext } from '../../../View/renderWithAdaptableContext';
+import { InternalAdaptablePercentageEditor, } from './InternalAdaptablePercentageEditor';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { getStartValue } from '../AdaptableNumberEditor';
+import { times100 } from '../../../Utilities/times100';
+import { divideBy100 } from '../../../Utilities/divideBy100';
+const defaultValueParser = ({ newValue, oldValue: _ }) => {
+    return newValue;
+};
+const style = {
+    position: 'absolute',
+    top: '0px',
+    left: '0px',
+    right: '0px',
+    bottom: '0px',
+};
+export const AdaptableReactPercentageEditor = forwardRef((props, ref) => {
+    var _a, _b;
+    const [initialValue] = useState(() => times100(getStartValue(props)));
+    const valueRef = useRef(initialValue);
+    const columnId = props.column.getColId();
+    const adaptable = props.context.__adaptable;
+    const colValueParser = props.column.getColDef().valueParser;
+    const valueParser = typeof colValueParser === 'function' ? colValueParser : defaultValueParser;
+    function onValueChange(value) {
+        var _a;
+        const newValue = valueParser
+            ? valueParser(Object.assign(Object.assign({}, props), { oldValue: props.value, newValue: value }))
+            : value;
+        valueRef.current = newValue;
+        (_a = props.onValueChange) === null || _a === void 0 ? void 0 : _a.call(props, divideBy100(newValue));
+    }
+    const editorRef = useRef(null);
+    useImperativeHandle(ref, () => {
+        return {
+            focusIn() {
+                var _a;
+                (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            },
+            // the final value to send to the grid, on completion of editing
+            getValue() {
+                return divideBy100(valueRef.current);
+            },
+        };
+    });
+    const editorElement = (React.createElement(InternalAdaptablePercentageEditor, { defaultValue: initialValue, showClearButton: (_a = props.showClearButton) !== null && _a !== void 0 ? _a : true, emptyValue: (_b = props.emptyValue) !== null && _b !== void 0 ? _b : '', onValueChange: onValueChange, ref: (editor) => {
+            editorRef.current = editor;
+            editor === null || editor === void 0 ? void 0 : editor.focus();
+        } }));
+    function onKeyDown(keyDownEvent) {
+        adaptable._emit('CellEditorKeyDown', {
+            keyDownEvent,
+            cellValue: valueRef.current,
+            columnId,
+            updateValueCallback: (updatedValue) => {
+                editorRef.current.setValue(updatedValue);
+            },
+        });
+    }
+    return (React.createElement("div", { style: style, onKeyDown: onKeyDown }, renderWithAdaptableContext(editorElement, adaptable)));
+});
+AdaptableReactPercentageEditor.displayName = 'AdaptableReactPercentageEditor';
+/**
+ * Used by default for all `abColDefNumber` columns.
+ *
+ * You can configure it by specifying `cellEditorParams` in the colDef:
+ *
+ * colDef {
+ *   field: 'stars',
+ *   type: 'abColDefNumber',
+ *   cellEditorParams: {
+ *     emptyValue: 5, // defaults to ''
+ *     showClearButton: false
+ *   }
+ * }
+ *
+ * For now, there are 2 editor params you can configure:
+ *
+ * cellEditorParams.showClearButton - defaults to `true` - whether to show the clear button. If `true`, it works together with `cellEditorParams.emptyValue`
+ * cellEditorParams.emptyValue - defaults to `''` (empty string) - value to set for the cell, when the clear button is pressed.
+ *
+ * When the colDef has a `valueParser` provided as a function, it will be used before setting the value for the cell.
+ */
+export class AdaptablePercentageEditor {
+    constructor() {
+        this.valueParser = defaultValueParser;
+        this.onValueChange = (value) => {
+            const newValue = this.valueParser
+                ? this.valueParser(Object.assign(Object.assign({}, this.params), { oldValue: this.params.value, newValue: value }))
+                : value;
+            this.value = divideBy100(newValue);
+        };
+    }
+    init(params) {
+        this.value = getStartValue(params);
+        this.params = params;
+        this.columnId = params.column.getColId();
+        const { valueParser } = params.column.getColDef();
+        if (typeof valueParser === 'function') {
+            this.valueParser = valueParser;
+        }
+        this.el = document.createElement('div');
+        Object.keys(style).forEach((key) => {
+            //@ts-ignore
+            this.el.style[key] = style[key];
+        });
+    }
+    /* Component Editor Lifecycle methods */
+    // gets called once when grid ready to insert the element
+    getGui() {
+        return this.el;
+    }
+    // the final value to send to the grid, on completion of editing
+    getValue() {
+        return this.value;
+    }
+    focusIn() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    focusOut() { }
+    // after this component has been created and inserted into the grid
+    afterGuiAttached() {
+        var _a, _b;
+        const adaptable = this.params.context.__adaptable;
+        const defaultValue = times100(this.value);
+        const editorElement = (React.createElement(InternalAdaptablePercentageEditor, { defaultValue: defaultValue, showClearButton: (_a = this.params.showClearButton) !== null && _a !== void 0 ? _a : true, emptyValue: (_b = this.params.emptyValue) !== null && _b !== void 0 ? _b : '', onValueChange: this.onValueChange, ref: (editor) => {
+                this.editor = editor;
+                editor === null || editor === void 0 ? void 0 : editor.focus();
+            } }));
+        this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(editorElement, adaptable), this.el);
+        this.getGui().addEventListener('keydown', (keyDownEvent) => {
+            adaptable._emit('CellEditorKeyDown', {
+                keyDownEvent,
+                cellValue: this.value,
+                columnId: this.columnId,
+                updateValueCallback: (updatedValue) => {
+                    this.editor.setValue(updatedValue);
+                },
+            });
+        });
+    }
+    destroy() {
+        var _a;
+        (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+}

package/src/components/Accordion.js

@@ -26,7 +26,7 @@ export const Accordion = ({ title, children }) => {
         setIsOpen(!isOpen);
     };
     return (React.createElement(Panel, { className: "ab-Accordion" },
-        React.createElement(SimpleButton, { iconPosition: 'end', icon: isOpen ? 'expand-all' : 'collapse-all', variant: "text", onClick: toggleAccordion, style: { width: '100%', textAlign: 'left' } }, title),
+        React.createElement(SimpleButton, { iconPosition: "end", icon: isOpen ? 'expand-all' : 'collapse-all', variant: "text", onClick: toggleAccordion, style: { width: '100%', textAlign: 'left' } }, title),
         React.createElement("div", { ref: content, style: {
                 maxHeight: `${height}`,
                 overflow: 'hidden',

package/src/components/Datepicker/DatepickerContext.d.ts

@@ -2,10 +2,8 @@ import * as React from 'react';
 export declare const DatepickerContext: React.Context<{
     onHide?: (keyboardEventKey?: string) => void;
     onShow?: VoidFunction;
-    showClearButton?: boolean;
 }>;
 export declare const useDatepickerContext: () => {
     onHide?: (keyboardEventKey?: string) => void;
     onShow?: VoidFunction;
-    showClearButton?: boolean;
 };

package/src/components/Datepicker/index.js

@@ -34,9 +34,8 @@ const DatepickerOverlay = ({ onHide, children, onKeyDown, onMouseDown, }) => {
 };
 export const Datepicker = React.forwardRef((props, ref) => {
     var _a;
-    const { dateProps, required, disabled, style, placeholder, showWeekNumber, showOutsideDays, value: _, defaultValue: __, onChange: ___, showClearButton: showClearButtonFromProps, datepickerButtons } = props, boxProps = __rest(props, ["dateProps", "required", "disabled", "style", "placeholder", "showWeekNumber", "showOutsideDays", "value", "defaultValue", "onChange", "showClearButton", "datepickerButtons"]);
+    const { dateProps, required, disabled, style, placeholder, showWeekNumber, showOutsideDays, value: _, defaultValue: __, onChange: ___, datepickerButtons } = props, boxProps = __rest(props, ["dateProps", "required", "disabled", "style", "placeholder", "showWeekNumber", "showOutsideDays", "value", "defaultValue", "onChange", "datepickerButtons"]);
     const datepickerContext = useDatepickerContext();
-    const showClearButton = (showClearButtonFromProps !== null && showClearButtonFromProps !== void 0 ? showClearButtonFromProps : datepickerContext.showClearButton) === false ? false : true;
     let [value, setValue] = useProperty(props, 'value', undefined, {
         onChange: props.onChange,
     });
@@ -79,10 +78,10 @@ export const Datepicker = React.forwardRef((props, ref) => {
         '|': React.createElement("hr", { style: { width: '100%', height: 0, margin: 0, border: 'none' } }),
     };
     const footerButtons = datepickerButtons.map((buttonKey, index) => React.cloneElement(footerButtonsMap[buttonKey], { key: index }));
-    const clearButton = showClearButton ? (React.createElement(SimpleButton, { "data-name": "clear", variant: "text", tooltip: "Clear", iconSize: 20, padding: 0, icon: "close", onMouseDown: (e) => {
+    const clearButton = (React.createElement(SimpleButton, { "data-name": "clear", variant: "text", tooltip: "Clear", iconSize: 20, padding: 0, icon: "close", onMouseDown: (e) => {
             e.preventDefault();
             clearValue();
-        }, accessLevel: 'Full' })) : null;
+        }, accessLevel: 'Full' }));
     const calendarButton = (React.createElement(SimpleButton, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, px: 0, py: 0, onClick: () => setVisible(true) }));
     return (React.createElement(Flex, null,
         React.createElement(OverlayTrigger, { visible: visible, render: () => (React.createElement(DatepickerOverlay, { onMouseDown: props.onMouseDown, onHide: () => setVisible(false), onKeyDown: (e) => {

package/src/components/ExpressionEditor/DataTableEditor.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { AdaptableColumnDataType } from '../../types';
+export declare const DataTableEditor: ({ fields, dataFormatter, data: initialData, type, labels, }: {
+    fields: {
+        label: string;
+        value: string;
+        dataType: AdaptableColumnDataType;
+        readOnly?: boolean;
+    }[];
+    type: string;
+    dataFormatter: (field: string) => string;
+    data: any;
+    labels?: {
+        showIds?: string;
+        filterPlaceholder?: string;
+    };
+}) => JSX.Element;

package/src/components/ExpressionEditor/DataTableEditor.js

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { Flex } from 'rebass';
+import { baseClassName } from '.';
+import { CheckBox } from '../CheckBox';
+import { AdaptableFormControlTextClear } from '../../View/Components/Forms/AdaptableFormControlTextClear';
+import FormLayout, { FormRow } from '../FormLayout';
+import EditorButton from './EditorButton';
+import Input from '../Input';
+import { isValueValidDate } from '../../Utilities/Helpers/DateHelper';
+import { useAdaptable } from '../../View/AdaptableContext';
+import AdaptableInput from '../../View/Components/AdaptableInput';
+export const DataTableEditor = ({ fields, dataFormatter, data: initialData, type = 'column', labels, }) => {
+    var _a, _b;
+    const adaptable = useAdaptable();
+    const [data, setData] = React.useState(initialData);
+    const [showColumnIds, setShowValues] = React.useState(false);
+    const [searchInputValue, setSearchInputValue] = React.useState('');
+    const getColValue = (fieldValue) => {
+        return adaptable.api.internalApi.getValueUsingField(data, fieldValue);
+    };
+    const updateColValue = (rowData, fielValue, newValue) => {
+        const updatedRowData = adaptable.api.internalApi.setValueUsingField(rowData, fielValue, newValue);
+        return Object.assign({}, updatedRowData);
+    };
+    const getColDateValue = (fieldValue) => {
+        const colValue = getColValue(fieldValue);
+        return colValue && isValueValidDate(colValue)
+            ? new Date(colValue).toISOString().substr(0, 10)
+            : '';
+    };
+    const hasFriendlyNames = React.useMemo(() => {
+        return fields.some((field) => field.label !== field.value);
+    }, []);
+    return (React.createElement(Flex, { flexDirection: "column", "data-name": `expression-${type}-picker`, style: { height: '100%' } },
+        React.createElement(Flex, { className: `${baseClassName}__${type}-list`, flexDirection: "column", alignItems: "start", style: { marginTop: 2 }, mb: 2 },
+            hasFriendlyNames && (React.createElement(CheckBox, { checked: showColumnIds, onChange: (checked) => setShowValues(checked), style: {
+                    float: 'right',
+                    margin: 0,
+                    paddingTop: 'var(--ab-space-1)',
+                    paddingBottom: 'var(--ab-space-1)',
+                } }, (_a = labels === null || labels === void 0 ? void 0 : labels.showIds) !== null && _a !== void 0 ? _a : 'Show Column IDs')),
+            React.createElement(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: (_b = labels === null || labels === void 0 ? void 0 : labels.filterPlaceholder) !== null && _b !== void 0 ? _b : 'Filter columns...', style: { flex: 1, marginBottom: 3 } })),
+        React.createElement(FormLayout, { className: "ab-ExpressionEditor__columns", gridColumnGap: "var(--ab-space-1)", gridRowGap: "var(--ab-space-1)", sizes: ['auto', '1fr'], style: { alignItems: 'stretch', overflow: 'auto' } }, fields
+            .filter((field) => {
+            var _a, _b;
+            if (!searchInputValue) {
+                return true;
+            }
+            return (field.label.includes(searchInputValue) || ((_b = (_a = field.value) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, searchInputValue)));
+        })
+            .map((field) => {
+            var _a, _b, _c;
+            const label = showColumnIds ? `[${field.value}]` : field.label;
+            return (React.createElement(FormRow, { key: field.label, label: React.createElement(EditorButton, { width: "100%", height: "100%", style: {
+                        background: 'var(--ab-color-primary)',
+                        cursor: 'grab',
+                        marginRight: 'var(--ab-space-1)',
+                    }, data: dataFormatter(field.value), "data-name": type, "data-value": field.value, icon: "drag" },
+                    React.createElement(Flex, { flexDirection: "column", alignItems: "start" }, label)) }, field.dataType === 'Number' ? (React.createElement(Input, { type: "number", "data-name": `${type}-input`, "data-value": field.value, value: (_a = getColValue(field.value)) !== null && _a !== void 0 ? _a : '', onChange: (e) => setData(updateColValue(data, field.value, Number(e.target.value))), width: "100%", disabled: field.readOnly })) : field.dataType === 'String' ? (React.createElement(Input, { type: "text", "data-name": `${type}-input`, "data-value": field.value, value: (_b = getColValue(field.value)) !== null && _b !== void 0 ? _b : '', onChange: (e) => setData(updateColValue(data, field.value, e.target.value)), width: "100%", disabled: field.readOnly })) : field.dataType === 'Date' ? (React.createElement(AdaptableInput, { type: "date", "data-name": `${type}-input`, "data-value": field.value, value: (_c = getColDateValue(field.value)) !== null && _c !== void 0 ? _c : '', onChange: (e) => {
+                    setData(updateColValue(data, field.value, new Date(e.target.value)));
+                }, style: { width: '100%' }, disabled: field.readOnly })) : field.dataType === 'Boolean' ? (React.createElement(CheckBox, { "data-name": `${type}-input`, "data-value": field.value, checked: Boolean(getColValue(field.value)), onChange: (checked) => setData(updateColValue(data, field.value, checked)), disabled: field.readOnly })) : null));
+        }))));
+};

package/src/components/ExpressionEditor/EditorInput.js

@@ -5,7 +5,7 @@ import { editorButtonsSearch } from './editorButtonsSearch';
 import { useExpressionEditor } from './EditorContext';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import { editorButtonsAggregatedScalar } from './editorButtonsAggregatedScalar';
-import { aggregatedExpressionFunctions, cumulativeAggregatedExpressionFunctions, quantileAggregatedExpressionFunctions, } from '../../Utilities/ExpressionFunctions/aggregatedScalarExpressionFunctions';
+import { cumulativeAggregatedExpressionFunctions, quantileAggregatedExpressionFunctions, } from '../../Utilities/ExpressionFunctions/aggregatedScalarExpressionFunctions';
 import { editorButtonsCumulativeAggregatedScalar } from './editorButtonsCumulativeAggregatedScalar';
 import { editorButtonsQuantileAggregatedScalar } from './editorButtonsQuantileAggregatedScalar';
 function EditorInput(props) {
@@ -13,14 +13,27 @@ function EditorInput(props) {
         .getQueryLanguageService()
         .getModuleExpressionFunctionsMap(props.module);
     const getFilteredAggregatedExpressionFunctions = (availableAggregatedExpressionFunctions, type) => {
-        const sourceExpressionFunctions = type === 'cumulativeAggregatedScalar'
-            ? cumulativeAggregatedExpressionFunctions
-            : type === 'quantileAggregatedScalar'
-                ? quantileAggregatedExpressionFunctions
-                : aggregatedExpressionFunctions;
-        return Object.keys(availableAggregatedExpressionFunctions)
-            .filter((key) => sourceExpressionFunctions.includes(key))
-            .reduce((obj, key) => {
+        let filteredCollection = [];
+        if (type === 'aggregatedScalar') {
+            const excludeSet = new Set([
+                // we cannot have a hardcodede set of functions,
+                // we need to allow custom expresions
+                ...cumulativeAggregatedExpressionFunctions,
+                ...quantileAggregatedExpressionFunctions,
+            ]);
+            filteredCollection = Object.keys(availableAggregatedExpressionFunctions).filter((key) => 
+            //  need to allow standard ones
+            cumulativeAggregatedExpressionFunctions.includes(key) ||
+                // and anything else that is not cumul or quantile
+                !excludeSet.has(key));
+        }
+        else {
+            const includeExpressionFunctions = type === 'cumulativeAggregatedScalar'
+                ? cumulativeAggregatedExpressionFunctions
+                : quantileAggregatedExpressionFunctions;
+            filteredCollection = Object.keys(availableAggregatedExpressionFunctions).filter((key) => includeExpressionFunctions.includes(key));
+        }
+        return filteredCollection.reduce((obj, key) => {
             obj[key] = availableAggregatedExpressionFunctions[key];
             return obj;
         }, {});

package/src/components/ExpressionEditor/NamedQueryEditor.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { NamedQuery } from '../../types';
+export declare const NamedQueryEditor: (props: {
+    namedQueries: NamedQuery[];
+}) => JSX.Element;

package/src/components/ExpressionEditor/NamedQueryEditor.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Flex } from 'rebass';
+import { useAdaptable } from '../../View/AdaptableContext';
+import { CheckBox } from '../CheckBox';
+import EditorButton from './EditorButton';
+export const NamedQueryEditor = (props) => {
+    const adaptable = useAdaptable();
+    const [showColumnIds, setShowColumnIds] = React.useState(false);
+    const [inlineQuery, setInlineQuery] = React.useState(false);
+    return (React.createElement(Flex, { flexDirection: "column", alignItems: "start", style: { marginTop: 2 } },
+        React.createElement(CheckBox, { checked: showColumnIds, onChange: (checked) => setShowColumnIds(checked) }, "Show Column IDs"),
+        React.createElement(CheckBox, { checked: inlineQuery, onChange: (checked) => setInlineQuery(checked) }, "Inline Query"),
+        props.namedQueries.map((namedQuery) => (React.createElement(Flex, { key: namedQuery.Uuid, flexDirection: "column", alignItems: "start", style: {
+                padding: 3,
+                marginTop: 'var(--ab-space-2)',
+                marginBottom: 'var(--ab-space-2)',
+                width: '100%',
+            }, backgroundColor: "primarylight" },
+            ' ',
+            React.createElement(EditorButton, { width: "100%", height: "100%", style: {
+                    background: 'var(--ab-color-primary)',
+                    cursor: 'grab',
+                }, data: inlineQuery ? namedQuery.BooleanExpression : `QUERY("${namedQuery.Name}")`, "data-name": "column", icon: "drag" },
+                React.createElement(Flex, { flexDirection: "column", alignItems: "start" }, namedQuery.Name)),
+            React.createElement(Flex, { alignItems: "start", style: {
+                    padding: 5,
+                } }, showColumnIds
+                ? namedQuery.BooleanExpression
+                : adaptable.api.expressionApi.getAdaptableQueryExpressionWithColumnFriendlyNames(namedQuery)))))));
+};

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilder.d.ts

@@ -7,10 +7,20 @@ interface QueryBuilderProps {
         value: string;
         type: AdaptableColumnDataType;
     }[];
+    getFields: (type?: AdaptableColumnDataType) => {
+        label?: string;
+        value: string;
+        type: AdaptableColumnDataType;
+    }[];
     onChange: (query: string) => void;
     module: AdaptableModule;
 }
 export declare function useQueryBuilderContext(): {
+    getColumns: (type?: AdaptableColumnDataType) => {
+        label?: string;
+        value: string;
+        type: AdaptableColumnDataType;
+    }[];
     getFields: (type?: AdaptableColumnDataType) => {
         label?: string;
         value: string;

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilder.js

@@ -54,7 +54,8 @@ export const QueryBuilder = (props) => {
     }, []);
     const context = React.useMemo(() => {
         return {
-            getFields: props.getColumns,
+            getColumns: props.getColumns,
+            getFields: props.getFields,
             getExpressions: (columnType) => {
                 return booleanExpressions
                     ? getFunctionsForColumnType(columnType, Object.keys(booleanExpressions))
@@ -66,10 +67,12 @@ export const QueryBuilder = (props) => {
     const clearExpressionButton = (React.createElement(SimpleButton, { onClick: () => {
             clearExpression();
         } }, "Clear Expression"));
-    const unsupportedExpressionFunction = getUnsuportedExpressionFromQlPredicate(qlPredicate);
+    const unsupportedExpressionFunction = getUnsuportedExpressionFromQlPredicate(qlPredicate, {
+        supportedFields: props.getFields(),
+    });
     let errorOrEditor = null;
     if (qlPredicate && 'errorMessage' in qlPredicate) {
-        errorOrEditor = ((_b = (_a = props.query) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, 'QUERY')) ? (React.createElement(WarningBox, null,
+        errorOrEditor = ((_b = (_a = props.query) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, 'QUERY')) ? (React.createElement(WarningBox, { "data-name": "unsupported-query-warning" },
             React.createElement(Flex, { alignItems: "center" },
                 "Named Queries are not supported in the Query Builder",
                 React.createElement(Box, { flex: 1 }),
@@ -80,7 +83,7 @@ export const QueryBuilder = (props) => {
                 clearExpressionButton)));
     }
     else if (unsupportedExpressionFunction) {
-        errorOrEditor = React.createElement(WarningBox, null, unsupportedExpressionFunction);
+        errorOrEditor = (React.createElement(WarningBox, { "data-name": "unsupported-expression-warning" }, unsupportedExpressionFunction));
     }
     else if (qlPredicate && !('errorMessage' in qlPredicate)) {
         errorOrEditor = (React.createElement(QueryPredicateBuilder, { isRoot: true, index: 0, id: "0", predicate: qlPredicate, onNewPredicate: (type) => {

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilderInputs.d.ts

@@ -2,10 +2,11 @@
 import { QlLogicalOperator } from '../../../parser/src/predicate';
 import { ExpressionFunctionInputType } from '../../../parser/src/types';
 import { AdaptableColumn, AdaptableColumnDataType, BooleanFunctionName } from '../../../types';
-export declare const PrimitiveColumnSelector: (props: {
-    columnId: string;
+export declare const PrimitiveColumnOrFieldSelector: (props: {
+    fieldOrColumn: string;
     type?: AdaptableColumnDataType;
     onChange: (colId: string) => void;
+    hideFields?: boolean;
 }) => JSX.Element;
 export declare const PrimiteValueInput: (props: {
     inputType: ExpressionFunctionInputType;

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilderInputs.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { Box, Flex, Text } from 'rebass';
 import { getQlPredicateSymbol } from '../../../parser/src/predicate/mapQlPredicateToExpression';
+import { useAdaptable } from '../../../View/AdaptableContext';
 import AdaptableInput from '../../../View/Components/AdaptableInput';
 import { ColumnSelector } from '../../../View/Components/Selectors/ColumnSelector';
+import { FieldSelector } from '../../../View/Components/Selectors/FieldSelector';
 import { PermittedValuesSelector } from '../../../View/Components/Selectors/PermittedValuesSelector';
 import { CheckBox } from '../../CheckBox';
 import DropdownButton from '../../DropdownButton';
@@ -10,20 +12,61 @@ import { Icon } from '../../icons';
 import { InputGroup } from '../../InputGroup';
 import { Select } from '../../Select';
 import { useQueryBuilderContext } from './QueryBuilder';
-import { mapExpressionFunctionTypeToColumnDataType } from './utils';
-export const PrimitiveColumnSelector = (props) => {
-    return (React.createElement(Box, null,
-        React.createElement(ColumnSelector, { value: props.columnId, type: props.type, onChange: (columnId) => {
+import { isFieldValue, mapColumnExpressionToColumnId, mapExpressionFunctionTypeToColumnDataType, mapExpressionToFieldValue, mapFieldValueToExpression, } from './utils';
+export const PrimitiveColumnOrFieldSelector = (props) => {
+    const adaptable = useAdaptable();
+    const [type, setType] = React.useState(() => {
+        return (
+            // default to column
+            (!props.fieldOrColumn || props.fieldOrColumn.includes('[') ? 'column' : 'field')
+        );
+    });
+    const hasFields = React.useMemo(() => {
+        var _a;
+        return ((_a = adaptable.api.expressionApi.internalApi.getAvailableFields()) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    }, []);
+    const hasFieldsOrValueIsField = hasFields || isFieldValue(props.fieldOrColumn);
+    let input = null;
+    if (type === 'column') {
+        const columnId = mapColumnExpressionToColumnId(props.fieldOrColumn);
+        input = (React.createElement(ColumnSelector, { value: columnId, type: props.type, onChange: (columnId) => {
                 props.onChange(`[${columnId}]`);
-            } })));
+            } }));
+    }
+    else {
+        input = (React.createElement(FieldSelector, { value: mapExpressionToFieldValue(props.fieldOrColumn), type: props.type, onChange: (fieldValue) => {
+                props.onChange(mapFieldValueToExpression(fieldValue));
+            } }));
+    }
+    const typeOptions = [
+        { label: 'Column', value: 'column', icon: 'grid' },
+        { label: 'Field', value: 'field', icon: 'column-outline' },
+    ];
+    return !hasFieldsOrValueIsField || props.hideFields ? (React.createElement(Box, null, input)) : (React.createElement(InputGroup, { Component: Flex, "data-id": "query-first-arg-wrapper" },
+        React.createElement(Select, { renderSingleValue: (value) => {
+                return React.createElement(React.Fragment, null, type === 'column' ? React.createElement(Icon, { name: "grid" }) : React.createElement(Icon, { name: "column-outline" }));
+            }, value: type, options: typeOptions, onChange: (value) => {
+                props.onChange(null);
+                setType(value);
+            } }),
+        input));
 };
 export const PrimiteValueInput = (props) => {
-    var _a, _b;
-    const [type, setType] = React.useState(() => {
+    const adaptable = useAdaptable();
+    const hasFields = React.useMemo(() => {
         var _a;
-        return typeof (props === null || props === void 0 ? void 0 : props.value) === 'string' && ((_a = props === null || props === void 0 ? void 0 : props.value) === null || _a === void 0 ? void 0 : _a.includes('['))
-            ? 'column-name'
-            : 'input-value';
+        return ((_a = adaptable.api.expressionApi.internalApi.getAvailableFields()) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    }, []);
+    const hasFieldsOrValueIsField = hasFields || isFieldValue(props.value);
+    const [type, setType] = React.useState(() => {
+        var _a, _b;
+        if (typeof (props === null || props === void 0 ? void 0 : props.value) === 'string' && ((_a = props === null || props === void 0 ? void 0 : props.value) === null || _a === void 0 ? void 0 : _a.includes('['))) {
+            return 'column-name';
+        }
+        if (typeof (props === null || props === void 0 ? void 0 : props.value) === 'string' && ((_b = props === null || props === void 0 ? void 0 : props.value) === null || _b === void 0 ? void 0 : _b.includes('FIELD'))) {
+            return 'field';
+        }
+        return 'input-value';
     });
     const handleTypeChange = (newType) => {
         if (type !== newType) {
@@ -67,12 +110,18 @@ export const PrimiteValueInput = (props) => {
     };
     let editor = null;
     if (type === 'column-name') {
-        const columnId = props.value ? (_b = (_a = props === null || props === void 0 ? void 0 : props.value) === null || _a === void 0 ? void 0 : _a.replace) === null || _b === void 0 ? void 0 : _b.call(_a, '[', '').replace(']', '') : undefined;
         const abColType = mapExpressionFunctionTypeToColumnDataType(props.inputType);
-        editor = (React.createElement(PrimitiveColumnSelector, { columnId: columnId, onChange: (col) => props.onChange(col), type: abColType }));
+        editor = (React.createElement(PrimitiveColumnOrFieldSelector, { hideFields: true, fieldOrColumn: props.value, type: abColType, onChange: (columnId) => {
+                props.onChange(columnId);
+            } }));
+    }
+    else if (type === 'field') {
+        editor = (React.createElement(FieldSelector, { value: mapExpressionToFieldValue(props.value), onChange: (fieldValue) => {
+                props.onChange(mapFieldValueToExpression(fieldValue));
+            } }));
     }
     else if (!['date', 'boolean'].includes(props.inputType)) {
-        editor = (React.createElement(PermittedValuesSelector, { allowNewValues: true, value: props.value, columnId: props.lefthandColumnIdParam, onChange: (value) => {
+        editor = (React.createElement(PermittedValuesSelector, { allowNewValues: true, value: props.value, columnId: mapColumnExpressionToColumnId(props.lefthandColumnIdParam), onChange: (value) => {
                 props.onChange(value);
             } }));
     }
@@ -95,6 +144,15 @@ export const PrimiteValueInput = (props) => {
             value: 'input-value',
         },
     ];
+    if (hasFieldsOrValueIsField || type === 'field') {
+        options.push({
+            label: (React.createElement(Flex, null,
+                React.createElement(Icon, { name: "column-outline" }),
+                React.createElement(Text, { ml: 2 }, "Field"))),
+            icon: 'column-outline',
+            value: 'field',
+        });
+    }
     const typeOption = options.find((option) => option.value === type);
     return (React.createElement(InputGroup, { Component: Flex, "data-id": "query-input-wrapper", mr: 2 },
         React.createElement(Select, { renderSingleValue: (value) => {