@adaptabletools/adaptable 23.1.0 → 24.0.0-canary.0

package/src/components/aql/QueryBuilder/PrimitiveEditor.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { emptyQlGroup, emptyQlPrimitive, isQlList, isSubjectArg, readRhsSlots, writeRhsSlots, } from "../../../../vendor/aql/index.js";
+import { mapColumnDataTypeToExpressionFunctionType } from '../../../aql/adaptableQlUtils';
+import { cn } from '../../../lib/utils';
+import { Box, Flex } from '../../Flex';
+import { ExpressionSelector, PrimitiveColumnOrFieldSelector, PrimitiveMultiValueInput, PrimitiveValueInput, } from './QueryBuilderInputs';
+import { useQueryBuilder } from './context';
+import { RowActions } from './RowActions';
+const newNode = (kind) => kind === 'condition' ? emptyQlPrimitive() : emptyQlGroup();
+export const PrimitiveEditor = ({ node, path, dispatch, hideAdd, hideDelete, }) => {
+    const qb = useQueryBuilder();
+    const locked = qb.lockedSubject;
+    const lockedColRef = locked
+        ? { kind: 'col', columnId: locked.columnId }
+        : undefined;
+    const rowMode = !locked && qb.isRowFormOperator(node.operator, node.args);
+    const hasSubject = locked
+        ? true
+        : rowMode
+            ? false
+            : node.operator
+                ? qb.operatorHasSubject(node.operator)
+                : true;
+    const subjectArg = locked
+        ? lockedColRef
+        : hasSubject
+            ? node.args[0]
+            : undefined;
+    const replace = (next) => dispatch({ type: 'replace', path, node: next });
+    const lhsKind = locked
+        ? 'column'
+        : rowMode
+            ? 'row'
+            : subjectArg && isSubjectArg(subjectArg)
+                ? subjectArg.kind === 'scope'
+                    ? 'scope'
+                    : subjectArg.kind === 'field'
+                        ? 'field'
+                        : 'column'
+                : undefined;
+    const [pendingLhsKind, setPendingLhsKind] = React.useState();
+    const effectiveLhsKind = locked
+        ? 'column'
+        : lhsKind ?? pendingLhsKind;
+    if (!locked && !rowMode && hasSubject && subjectArg && !isSubjectArg(subjectArg)) {
+        return null;
+    }
+    const columnOrFieldDataType = locked
+        ? locked.dataType
+        : rowMode
+            ? undefined
+            : qb.resolveSubjectDataType(subjectArg);
+    const subjectDataTypes = locked
+        ? [locked.dataType]
+        : rowMode
+            ? undefined
+            : hasSubject
+                ? qb.resolveSubjectDataTypes(subjectArg)
+                : undefined;
+    const lefthandColumnId = locked
+        ? locked.columnId
+        : rowMode
+            ? undefined
+            : qb.resolveLefthandColumnId(subjectArg);
+    const subjectInputType = columnOrFieldDataType
+        ? mapColumnDataTypeToExpressionFunctionType(columnOrFieldDataType)
+        : undefined;
+    const slots = node.operator ? qb.resolveOperatorSlots(node.operator, subjectInputType) : [];
+    const subjectArgCount = hasSubject ? 1 : 0;
+    const slotValues = readRhsSlots(node, slots, subjectArgCount);
+    const commitSlotValue = (index, value) => {
+        const nextSlotValues = [...slotValues];
+        nextSlotValues[index] = value;
+        const base = locked ? { ...node, args: [lockedColRef, ...node.args.slice(1)] } : node;
+        replace(writeRhsSlots(base, nextSlotValues, slots, subjectArgCount));
+    };
+    const handleOperatorChange = (newOperator) => {
+        if (locked) {
+            const newArgs = [lockedColRef];
+            if (locked.dataType === 'boolean' && newOperator !== 'NOT') {
+                newArgs.push({ kind: 'literal', type: 'boolean', value: true });
+            }
+            replace({ ...node, operator: newOperator, args: newArgs });
+            return;
+        }
+        const newFn = qb.getFunctionDef(newOperator);
+        if (newFn?.appliesTo === 'row' ||
+            (newFn?.appliesTo === 'column-or-row' && (rowMode || !subjectArg))) {
+            const rhsOnly = hasSubject ? node.args.slice(1) : node.args;
+            const newSlots = qb.resolveOperatorSlots(newOperator, undefined);
+            replace({
+                ...node,
+                operator: newOperator,
+                args: newSlots.length === 0 ? [] : rhsOnly,
+            });
+            return;
+        }
+        if (newFn?.appliesTo === 'column-or-row' && subjectArg) {
+            replace({ ...node, operator: newOperator, args: [subjectArg] });
+            return;
+        }
+        const newHasSubject = qb.operatorHasSubject(newOperator);
+        const newArgs = newHasSubject && subjectArg ? [subjectArg] : [];
+        if (newHasSubject && columnOrFieldDataType === 'boolean' && newOperator !== 'NOT') {
+            newArgs.push({ kind: 'literal', type: 'boolean', value: true });
+        }
+        replace({ ...node, operator: newOperator, args: newArgs });
+    };
+    const handleSubjectKindChange = (kind) => {
+        if (kind === 'row') {
+            setPendingLhsKind(undefined);
+            replace({ ...node, operator: qb.getDefaultRowOperator(), args: [] });
+            return;
+        }
+        setPendingLhsKind(kind);
+    };
+    const operatorEnabled = locked
+        ? true
+        : rowMode
+            ? true
+            : !!subjectArg;
+    const isStackedLayout = qb.layout === 'stacked';
+    const lhsContent = locked ? (!qb.hideLockedSubject && (_jsx(Box, { "data-name": "qb2-lhs", className: "ab-QueryBuilder__lhs", children: _jsx(Box, { "data-name": "qb2-locked-subject", "data-slot": "select-trigger", title: locked.friendlyName, className: 'twa:flex twa:items-center twa:px-2.5 twa:h-9 twa:text-sm twa:whitespace-nowrap ' +
+                'twa:border twa:border-input twa:rounded-md twa:bg-(--ab-cmp-input__background) twa:shadow-xs', children: _jsx("span", { className: "twa:min-w-0 twa:truncate", children: locked.friendlyName }) }) }))) : (_jsx(Box, { "data-name": "qb2-lhs", className: "ab-QueryBuilder__lhs", children: _jsx(PrimitiveColumnOrFieldSelector, { value: subjectArg, subjectKind: effectiveLhsKind, onSubjectKindChange: handleSubjectKindChange, onChange: (colOrField) => {
+                if (!colOrField) {
+                    replace({ ...node, args: [], operator: undefined });
+                    return;
+                }
+                setPendingLhsKind(undefined);
+                const newDataType = qb.resolveSubjectDataType(colOrField);
+                const sameType = !rowMode &&
+                    !!node.operator &&
+                    !!columnOrFieldDataType &&
+                    newDataType === columnOrFieldDataType;
+                if (sameType) {
+                    replace({ ...node, args: [colOrField, ...node.args.slice(1)] });
+                }
+                else {
+                    replace({ ...node, args: [colOrField], operator: undefined });
+                }
+            } }) }));
+    const operator = (_jsx(ExpressionSelector, { dataTypes: subjectDataTypes, rowMode: rowMode, disabled: !operatorEnabled, onExpressionChange: handleOperatorChange, value: node.operator }));
+    const actionsRail = (_jsx(Box, { className: "ab-QueryBuilder__actions-rail", children: _jsx(RowActions, { rail: qb.hideInlineAdd ? 'compact' : 'full', hideAdd: hideAdd || qb.hideInlineAdd, hideDelete: hideDelete, hideAddGroup: qb.hideAddGroup, onAdd: (kind) => dispatch({ type: 'insertSiblingAfter', path, node: newNode(kind) }), onDelete: () => dispatch({ type: 'delete', path }) }) }));
+    const rhsRow = (_jsx(Flex, { className: cn('ab-QueryBuilder__rhs-row twa:min-w-0', isStackedLayout ? 'twa:w-full twa:flex-col twa:gap-1' : ''), children: slots.map((slot, index) => {
+            const key = slot.type + index;
+            if (slot.multi) {
+                const slotList = slotValues[index];
+                return (_jsx(PrimitiveMultiValueInput, { slotIndex: index, lefthandColumnId: lefthandColumnId, inputType: slot.type, operator: node.operator, value: isQlList(slotList) ? slotList.items : [], onChange: (values) => commitSlotValue(index, { kind: 'list', items: values }) }, key));
+            }
+            return (_jsx(PrimitiveValueInput, { slotIndex: index, lefthandColumnId: lefthandColumnId, inputType: slot.type, allowedModes: slot.modes, valueEditor: slot.valueEditor, label: slot.label, value: slotValues[index], onChange: (value) => {
+                    commitSlotValue(index, value);
+                } }, key));
+        }) }));
+    if (isStackedLayout) {
+        return (_jsxs(Flex, { flexDirection: "column", "data-name": "qb2-condition", "data-operator": node.operator ?? '', className: "ab-QueryBuilder__primitive ab-QueryBuilder__primitive--stacked twa:my-1 twa:gap-1 twa:w-full", children: [_jsxs(Flex, { className: "ab-QueryBuilder__stacked-toolbar twa:w-full twa:gap-0.5", alignItems: "center", children: [lhsContent, _jsx(Box, { className: "ab-QueryBuilder__stacked-operator twa:flex-1 twa:min-w-0", children: operator }), slots.length === 0 && _jsx(Box, { className: "twa:flex-1" }), actionsRail] }), slots.length > 0 && rhsRow] }));
+    }
+    return (_jsxs(Flex, { alignItems: "center", "data-name": "qb2-condition", "data-operator": node.operator ?? '', className: "ab-QueryBuilder__primitive twa:my-1 twa:gap-0.5 twa:w-full", children: [lhsContent, operator, rhsRow, slots.length === 0 && _jsx(Box, { className: "ab-QueryBuilder__arity-spacer twa:flex-1" }), actionsRail] }));
+};

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

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { QlPredicate } from "../../../../vendor/aql/index.js";
+import { AdaptableColumnDataType, AdaptableModule, ColumnScope } from '../../../types';
+import { QueryBuilderSubject, QueryBuilderLayoutMode } from './context';
+/**
+ * Public contract — identical to the existing `QueryBuilder` so v2 is a
+ * drop-in replacement for `queryBuilderElement` (spec §4.2).
+ */
+export interface QueryBuilderProps {
+    query: string;
+    /**
+     * Optional model-level seed for the initial editor state. When provided it
+     * takes precedence over parsing `query`, letting the host seed *incomplete*
+     * predicates (operator chosen, rhs pending) that don't survive a string
+     * round-trip — e.g. the ColumnFilter editor's default `[col] <op>` seed.
+     * The editor stays uncontrolled afterwards (re-seed by remounting).
+     */
+    initialPredicate?: QlPredicate;
+    getColumns: (type?: AdaptableColumnDataType) => {
+        label?: string;
+        value: string;
+        type: AdaptableColumnDataType;
+    }[];
+    getFields: (type?: AdaptableColumnDataType) => {
+        label?: string;
+        value: string;
+        type: AdaptableColumnDataType;
+    }[];
+    onChange: (query: string) => void;
+    /**
+     * Optional lossless companion to `onChange`. Fires with the editor's
+     * `QlPredicate` **model** on every edit (alongside the `onChange` string).
+     * Hosts that need to persist partially-built trees should use this: the
+     * printed string drops or mangles incomplete rows (e.g. an INFIX row whose
+     * rhs is not yet typed serialises to invalid AQL), so re-parsing the string
+     * is lossy. The model keeps every row intact for the host to sanitize
+     * (e.g. keep only the complete conditions).
+     */
+    onPredicateChange?: (predicate: QlPredicate) => void;
+    module: AdaptableModule;
+    columnScope?: ColumnScope;
+    /**
+     * Subject (LHS) policy. Defaults to `{ mode: 'free' }` — the user picks a
+     * column / field / `$SCOPE` per condition. `{ mode: 'locked', columnId }`
+     * fixes the LHS of every condition to one column and renders it readonly
+     * (used by the ColumnFilter editor, which always filters one column).
+     */
+    subject?: QueryBuilderSubject;
+    /**
+     * Hide the read-only AdaptableQL expression preview panel shown below the
+     * editor, for a compact embedding.
+     */
+    hideExpressionPreview?: boolean;
+    /**
+     * Hide the inline "add" affordance on the right of each condition row.
+     * The group-level add under the row stays (preferred "create something
+     * new here" entry point). Defaults to `true`.
+     *
+     * @defaultValue true
+     */
+    hideInlineAdd?: boolean;
+    /**
+     * Hide the "Add Group" affordance so the user can only add flat
+     * conditions. Groups already present in the seeded expression still
+     * render and remain editable/deletable — this only stops *new* group
+     * creation. Use for hosts whose persistence model is a single flat
+     * group (ColumnFilter, Badge rules).
+     */
+    hideAddGroup?: boolean;
+    /**
+     * When `subject.mode === 'locked'`, hide the readonly LHS subject pill
+     * on every condition row. Use when the surrounding UI already names the
+     * column (ColumnFilter window, Badge rule editor) so repeating it on
+     * each row is redundant chrome. No-op in free-subject mode.
+     */
+    hideLockedSubject?: boolean;
+    /**
+     * Hide per-row drag handles. Reordering is meaningless for flat AND/OR
+     * groups (ColumnFilter, Badge rules). Saves horizontal space in narrow
+     * embeds such as the filters tool panel.
+     */
+    hideDragHandles?: boolean;
+    /**
+     * Condition-row layout for narrow embeds. `stacked` puts the value
+     * control on a second row (e.g. the AG Grid filters tool panel).
+     * `auto` stacks when the editor container is narrow.
+     *
+     * @defaultValue 'auto'
+     */
+    layout?: QueryBuilderLayoutMode;
+}
+export declare const QueryBuilder: React.FunctionComponent<QueryBuilderProps>;

package/src/components/aql/QueryBuilder/QueryBuilder.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { applyTreeAction, emptyQlGroup, isQlGroup, isQlPredicateError, wrapRootAsGroup, } from "../../../../vendor/aql/index.js";
+import { useAdaptable } from '../../../View/AdaptableContext';
+import HelpBlock from '../../HelpBlock';
+import { Card } from '../../Card';
+import { Box, Flex } from '../../Flex';
+import { DragDropProvider } from '../../dnd';
+import SimpleButton from '../../SimpleButton';
+import { Tag } from '../../Tag';
+import { getBooleanExpressionValidity, getExpressionTypeIssues, getQueryBuilderCannotDisplayReason, getUnsupportedReasonForNode, } from './utils';
+import { buildQueryBuilderMapper, } from './mapper';
+import { NodeEditor } from './NodeEditor';
+import { QueryBuilderProvider } from './context';
+import { AqlHighlightedExpression } from './AqlHighlightedExpression';
+import { formatAqlExpression } from '../ExpressionEditor/formatAqlExpression';
+import { twMerge } from '../../../twMerge';
+const QUERY_BUILDER_CLASSNAME = 'ab-QueryBuilder';
+const QUERY_BUILDER_LAYOUT_CLASS = {
+    inline: 'ab-QueryBuilder--layout-inline',
+    stacked: 'ab-QueryBuilder--layout-stacked',
+    auto: 'ab-QueryBuilder--layout-auto',
+};
+export const QueryBuilder = (props) => {
+    const adaptable = useAdaptable();
+    const mapper = React.useMemo(() => buildQueryBuilderMapper(adaptable.api, props.module), [adaptable.api, props.module]);
+    const [root, setRoot] = React.useState(() => wrapRootAsGroup(props.initialPredicate ?? mapper.parse(props.query)));
+    const [seedTypeIssues, setSeedTypeIssues] = React.useState(() => getExpressionTypeIssues(adaptable.api, props.module, props.query));
+    const dispatch = React.useCallback((action) => {
+        if (isQlPredicateError(root))
+            return;
+        const next = wrapRootAsGroup(applyTreeAction(root, action));
+        setRoot(next);
+        if (!isQlPredicateError(next)) {
+            props.onChange(mapper.print(next));
+            props.onPredicateChange?.(next);
+        }
+    }, [root, mapper, props.onChange, props.onPredicateChange]);
+    const expressionStr = isQlPredicateError(root) ? '' : mapper.print(root);
+    const rawPreviewExpression = (expressionStr || props.query || '').trim();
+    const previewExpression = React.useMemo(() => rawPreviewExpression
+        ? formatAqlExpression(rawPreviewExpression) ?? rawPreviewExpression
+        : rawPreviewExpression, [rawPreviewExpression]);
+    const outputExpressionValidity = React.useMemo(() => getBooleanExpressionValidity(adaptable.api, props.module, previewExpression), [adaptable.api, previewExpression, props.module]);
+    const showInvalidExpressionTag = outputExpressionValidity === 'invalid';
+    const showNonBooleanExpressionTag = outputExpressionValidity === 'scalar';
+    const previewTypeWarnings = React.useMemo(() => {
+        if (outputExpressionValidity !== 'boolean' || !previewExpression) {
+            return [];
+        }
+        return getExpressionTypeIssues(adaptable.api, props.module, previewExpression).filter((issue) => issue.severity === 'warning');
+    }, [adaptable.api, outputExpressionValidity, previewExpression, props.module]);
+    const previewColumnDataTypes = React.useMemo(() => {
+        const map = new Map();
+        for (const column of adaptable.api.columnApi.getColumns()) {
+            map.set(column.columnId, column.dataType);
+        }
+        return map;
+    }, [adaptable.api]);
+    const showExpressionWarningTag = previewTypeWarnings.length > 0;
+    const clearExpression = () => {
+        const empty = emptyQlGroup();
+        setRoot(empty);
+        setSeedTypeIssues([]);
+        props.onChange('');
+        props.onPredicateChange?.(empty);
+    };
+    const clearExpressionButton = (_jsx(SimpleButton, { "data-name": "query-builder2-clear", onClick: clearExpression, children: "Clear Expression" }));
+    const unsupportedReason = isQlPredicateError(root)
+        ? null
+        : getUnsupportedReasonForNode(root, {
+            supportedFields: props.getFields(),
+            columnScope: props.columnScope,
+        });
+    let body = null;
+    const cannotDisplayReason = getQueryBuilderCannotDisplayReason({
+        root,
+        outputExpressionValidity,
+        unsupportedReason,
+        seedTypeIssues,
+    });
+    const cannotDisplayInQueryBuilder = cannotDisplayReason != null;
+    if (cannotDisplayInQueryBuilder) {
+        const primaryLine = cannotDisplayReason === 'advanced'
+            ? 'This Expression is too complex for the Query Builder (advanced keywords or a shape it cannot display without losing clauses).'
+            : cannotDisplayReason === 'observable-call'
+                ? 'This Expression uses a live function (a read over change history), which the Query Builder cannot display.'
+                : cannotDisplayReason === 'scalar'
+                    ? 'The Query Builder only supports boolean expressions, and the current Expression returns a value.'
+                    : cannotDisplayReason === 'type-mismatch'
+                        ? 'This Expression has type or column validation issues that Query Builder cannot safely display.'
+                        : 'The current Expression is invalid and cannot be edited in the Query Builder.';
+        const typeMismatchMessages = cannotDisplayReason === 'type-mismatch'
+            ? [...new Set(seedTypeIssues.map((issue) => issue.message))]
+            : [];
+        body = (_jsx(HelpBlock, { "data-name": cannotDisplayReason === 'advanced'
+                ? 'query-builder2-unsupported-expression'
+                : cannotDisplayReason === 'observable-call'
+                    ? 'query-builder2-observable-expression'
+                    : cannotDisplayReason === 'scalar'
+                        ? 'query-builder2-scalar-expression'
+                        : cannotDisplayReason === 'type-mismatch'
+                            ? 'query-builder2-type-mismatch-expression'
+                            : 'query-builder2-invalid-expression', className: "twa:my-2 twa:w-full twa:max-w-full twa:text-2 twa:leading-snug twa:bg-background twa:text-foreground", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3", alignItems: "flex-start", children: [_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsx(Box, { children: primaryLine }), typeMismatchMessages.map((message) => (_jsx(Box, { children: message }, message))), _jsx(Box, { children: "Please edit the Expression in the Expression Editor." })] }), clearExpressionButton] }) }));
+    }
+    else if (!isQlPredicateError(root) && isQlGroup(root)) {
+        body = (_jsx(QueryBuilderProvider, { module: props.module, columnScope: props.columnScope, getColumns: props.getColumns, getFields: props.getFields, subject: props.subject, hideInlineAdd: props.hideInlineAdd ?? true, hideAddGroup: props.hideAddGroup, hideLockedSubject: props.hideLockedSubject, hideDragHandles: props.hideDragHandles, layout: props.layout ?? 'auto', children: props.hideDragHandles ? (_jsx(Box, { "data-name": "query-builder2-editor", className: "twa:my-2", children: _jsx(NodeEditor, { node: root, path: [], isRoot: true, dispatch: dispatch }) })) : (_jsx(DragDropProvider, { children: _jsx(Box, { "data-name": "query-builder2-editor", className: "twa:my-2", children: _jsx(NodeEditor, { node: root, path: [], isRoot: true, dispatch: dispatch }) }) })) }));
+    }
+    return (_jsxs(Box, { className: twMerge(QUERY_BUILDER_CLASSNAME, QUERY_BUILDER_LAYOUT_CLASS[props.layout ?? 'auto']), children: [body, !props.hideExpressionPreview && (_jsxs(Card, { shadow: false, className: "twa:mt-12", children: [_jsxs(Card.Title, { className: "twa:justify-between twa:gap-2", children: [_jsxs(Flex, { flexDirection: "column", className: "twa:min-w-0 twa:gap-0.5", children: [_jsx(Box, { className: "twa:font-medium", children: "Output Expression" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal", children: cannotDisplayInQueryBuilder
+                                            ? 'Readonly view of the current Expression'
+                                            : 'Live preview of the Expression built using the conditions above' })] }), showInvalidExpressionTag && (_jsx(Tag, { "data-name": "query-builder2-invalid-expression-tag", className: "twa:shrink-0 twa:bg-destructive twa:text-destructive-foreground twa:text-1 twa:py-1 twa:px-2 twa:font-medium", children: "Invalid Expression" })), showNonBooleanExpressionTag && (_jsx(Tag, { "data-name": "query-builder2-non-boolean-expression-tag", className: "twa:shrink-0 twa:bg-warn twa:text-warn-foreground twa:text-1 twa:py-1 twa:px-2 twa:font-medium", children: "Not a Boolean Expression" })), showExpressionWarningTag && (_jsx(Tag, { "data-name": "query-builder2-expression-warning-tag", className: "twa:shrink-0 twa:bg-warn twa:text-warn-foreground twa:text-1 twa:py-1 twa:px-2 twa:font-medium", title: previewTypeWarnings.map((issue) => issue.message).join('\n'), children: "Possibly Incorrect" }))] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Box, { "data-name": "query-builder2-expression-preview", className: twMerge(`${QUERY_BUILDER_CLASSNAME}__expression`, 'twa:min-h-[48px] twa:p-3 twa:rounded-standard twa:font-mono twa:break-words twa:whitespace-pre-wrap'), children: previewExpression ? (_jsx(AqlHighlightedExpression, { expression: previewExpression, dataTypeByColumnId: previewColumnDataTypes })) : (_jsx(Box, { as: "span", className: "twa:opacity-60 twa:italic twa:font-sans twa:text-foreground", children: "Output Expression will display here" })) }) })] }))] }));
+};

package/src/components/aql/QueryBuilder/QueryBuilderColumnSelector.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { AdaptableColumnDataType } from '../../../types';
+export type QueryBuilderColumnSelectorProps<IsMulti extends boolean = false> = {
+    className?: string;
+    type?: AdaptableColumnDataType;
+    isMulti?: IsMulti;
+    disabled?: boolean;
+    value?: IsMulti extends true ? string[] : string;
+    onChange: (column: IsMulti extends true ? string[] : string) => void;
+    placeholder?: string;
+};
+/**
+ * Column picker for Query Builder — uses the host `getColumns` provider
+ * (same queryable-column list as Expression Editor / `getQueryableColumnsForUIEditor`).
+ */
+export declare const QueryBuilderColumnSelector: <IsMulti extends boolean = false>(props: QueryBuilderColumnSelectorProps<IsMulti>) => React.JSX.Element;

package/src/components/aql/QueryBuilder/QueryBuilderColumnSelector.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { MultiCombobox, SingleCombobox, } from '../../Combobox';
+import { useQueryBuilder } from './context';
+export const QueryBuilderColumnSelector = function (props) {
+    const { getColumns } = useQueryBuilder();
+    const options = React.useMemo(() => getColumns(props.type).map((column) => {
+        const textLabel = column.label ?? column.value;
+        return {
+            label: textLabel,
+            textLabel,
+            tooltip: textLabel,
+            value: column.value,
+        };
+    }), [getColumns, props.type]);
+    const comboBoxProps = {
+        ['data-name']: 'column-selector',
+        disabled: props.disabled,
+        className: props.className,
+        virtualized: true,
+        items: options,
+        showClear: false,
+        showItemTooltip: true,
+        onValueChange: (colId) => {
+            if (colId === null) {
+                return;
+            }
+            props.onChange(colId);
+        },
+        value: props.value,
+        placeholder: props.placeholder ?? 'Select Column',
+    };
+    if (props.isMulti) {
+        return _jsx(MultiCombobox, { ...comboBoxProps });
+    }
+    return _jsx(SingleCombobox, { ...comboBoxProps });
+};

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

@@ -0,0 +1,102 @@
+import React from 'react';
+import { QlArg, QlColRef, QlFieldRef, QlScopeRef } from "../../../../vendor/aql/index.js";
+import type { ExpressionFunctionInputType, QueryBuilderInputMode, QueryBuilderValueEditor } from "../../../../vendor/aql/index.js";
+import { AdaptableColumn, AdaptableColumnDataType } from '../../../types';
+export type QueryBuilderSubjectKind = 'column' | 'field' | 'scope' | 'row';
+export declare const PrimitiveColumnOrFieldSelector: (props: {
+    /**
+     * Current subject `QlArg`. Undefined when no subject has been picked
+     * yet (e.g. fresh "+ Add Condition" primitive). The selector
+     * discriminates by `arg.kind` instead of string sniffing.
+     */
+    value: QlArg | undefined;
+    /**
+     * Forced / parent-owned kind (e.g. `'row'` when the operator is
+     * `ANY_CONTAINS` / `ANY_CHANGE()`). When omitted, kind is inferred from `value`.
+     */
+    subjectKind?: QueryBuilderSubjectKind;
+    onSubjectKindChange?: (kind: QueryBuilderSubjectKind) => void;
+    type?: AdaptableColumnDataType;
+    onChange: (arg: QlColRef | QlFieldRef | QlScopeRef | undefined) => void;
+    /**
+     * When true, hides the type SingleSelect entirely and forces column
+     * mode. Used inside value slots where surfacing field/scope would
+     * confuse the read (e.g. `[colA] = [colB]`).
+     */
+    hideFields?: boolean;
+}) => React.JSX.Element;
+export declare const PrimitiveValueInput: (props: {
+    inputType: ExpressionFunctionInputType;
+    /**
+     * Position of this slot within the operator's rhs slots (0-based).
+     * Surfaced as `data-slot-index` on the wrapper so tests can target a
+     * specific operand when an operator exposes multiple rhs slots.
+     */
+    slotIndex?: number;
+    /**
+     * Current value `QlArg`. `undefined` when the slot is empty. Allowed
+     * shapes:
+     *   - `QlLiteral`  — typed user input (text / number / boolean / date)
+     *   - `QlColRef`   — when the user picked "Column" mode (e.g. `[a] = [b]`)
+     *   - `QlFieldRef` — when the user picked "Field" mode
+     * Anything else (a nested fnCall, a list) currently displays as empty.
+     */
+    value: QlArg | undefined;
+    onChange(value: QlArg | undefined): void;
+    /**
+     * Column id used by `PermittedValuesSelector` to load suggestions.
+     * Resolved from the lefthand subject upstream — see
+     * `resolveLefthandColumnIdForValueEditors` in utils.ts.
+     */
+    lefthandColumnId: string | undefined;
+    /**
+     * Restrict which input modes (Column / Value / Field) the slot offers.
+     * Defaults to all three. When the resulting list contains a single
+     * mode, the type SingleSelect is hidden entirely.
+     */
+    allowedModes?: QueryBuilderInputMode[];
+    /**
+     * Editor used when the user is in 'input-value' mode. Defaults to
+     * 'permitted-values' for text/number slots (column-aware suggestions);
+     * pass 'free' to force a plain typed editor or `{ enum: [...] }` to
+     * render a SingleSelect of literal values.
+     */
+    valueEditor?: QueryBuilderValueEditor;
+    /** Optional placeholder label, e.g. "Pattern", "Lower". */
+    label?: string;
+}) => React.JSX.Element;
+export declare const PrimitiveMultiValueInput: (props: {
+    inputType: ExpressionFunctionInputType;
+    /** The primitive's operator (e.g. `IN` / `NOT_IN`), when known. */
+    operator?: string;
+    /** See {@link PrimitiveValueInput}'s `slotIndex`. */
+    slotIndex?: number;
+    /**
+     * Current value list. Each entry is a `QlArg`; in practice the
+     * multi-value editor only stores `QlLiteral`s (it's used for `IN`
+     * operators whose rhs entries are concrete values). Non-literal
+     * entries are tolerated on read (they pass through unchanged) but the
+     * editor never produces them.
+     */
+    value: QlArg[];
+    onChange(values: QlArg[]): void;
+    lefthandColumnId: string | undefined;
+}) => React.JSX.Element;
+export declare const ExpressionSelector: (props: {
+    value: string | undefined;
+    /**
+     * Lefthand subject's data type(s). One entry for a column/field or
+     * homogeneous scope; multiple for mixed `$SCOPE` (operators = intersection).
+     * Ignored when `rowMode` is true.
+     */
+    dataTypes?: AdaptableColumn["dataType"][];
+    /** When true, list only whole-row operators (e.g. ANY_CONTAINS / ANY_CHANGE). */
+    rowMode?: boolean;
+    /** Disable the operator picker (e.g. until a LHS subject is chosen). */
+    disabled?: boolean;
+    onExpressionChange(expression: string): void;
+}) => React.JSX.Element;
+export declare const CombinatorSelector: (props: {
+    value: "AND" | "OR";
+    onChange(combinator: "AND" | "OR"): void;
+}) => React.JSX.Element;