@adaptabletools/adaptable 23.1.0 → 24.0.0-canary.1

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

@@ -0,0 +1,365 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { DEFAULT_QUERY_BUILDER_INPUT_MODES, isQlColRef, isQlFieldRef, isQlLiteral, isQlScopeRef, literalOrPathArg, normalizeGroupColumnInValues, rawValueFromInListItem, } from "../../../../vendor/aql/index.js";
+import { mapColumnDataTypeToExpressionFunctionType, mapExpressionFunctionTypeToColumnDataType, } from '../../../aql/adaptableQlUtils';
+import { AG_GRID_GROUPED_COLUMN } from '../../../Utilities/Constants/GeneralConstants';
+import * as ModuleConstants from '../../../Utilities/Constants/ModuleConstants';
+import { cn } from '../../../lib/utils';
+import { useAdaptable } from '../../../View/AdaptableContext';
+import AdaptableInput from '../../../View/Components/AdaptableInput';
+import { FloatingFilterValues } from '../../../View/Filter/ColumnFilter/components/FloatingFilterValues';
+import { QueryBuilderColumnSelector } from './QueryBuilderColumnSelector';
+import { FieldSelector } from '../../../View/Components/Selectors/FieldSelector';
+import { PermittedValuesSelector } from '../../../View/Components/Selectors/PermittedValuesSelector';
+import { CheckBox } from '../../CheckBox';
+import { NewDropdownButton } from '../../DropdownButton';
+import { Icon } from '../../icons';
+import { InputGroup } from '../../InputGroup';
+import { useQueryBuilder } from './context';
+import { Box, Flex } from '../../Flex';
+import { SingleSelect } from '../../Select';
+import { resolveOperatorLabel, resolveOperatorTriggerLabel, isComparisonOperator } from '../../../aql/resolveOperatorPresentation';
+const inferSubjectKindFromArg = (arg) => {
+    if (!arg)
+        return undefined;
+    if (isQlScopeRef(arg))
+        return 'scope';
+    if (isQlFieldRef(arg))
+        return 'field';
+    return 'column';
+};
+const subjectPillClassName = 'ab-QueryBuilder__atom 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';
+const literalOf = (type, value) => ({
+    kind: 'literal',
+    type,
+    value,
+});
+const literalValue = (arg) => {
+    if (!arg || !isQlLiteral(arg))
+        return undefined;
+    return arg.value;
+};
+const literalTypeForSlot = (slot) => {
+    const base = (typeof slot === 'string' ? slot.replace(/\[\]$/, '') : slot);
+    switch (base) {
+        case 'number':
+            return 'number';
+        case 'boolean':
+            return 'boolean';
+        case 'date':
+            return 'date';
+        case 'text':
+        default:
+            return 'text';
+    }
+};
+const literalFromEditorValue = (slotType, value) => {
+    if (slotType === 'number') {
+        const num = typeof value === 'number' ? value : parseFloat(String(value));
+        if (!Number.isFinite(num))
+            return undefined;
+        return literalOf('number', num);
+    }
+    return literalOf(slotType, value);
+};
+export const PrimitiveColumnOrFieldSelector = (props) => {
+    const adaptable = useAdaptable();
+    const { scopeMeta } = useQueryBuilder();
+    const [type, setType] = React.useState(() => props.subjectKind ?? inferSubjectKindFromArg(props.value) ?? 'column');
+    const incomingKind = props.subjectKind ?? inferSubjectKindFromArg(props.value);
+    if (incomingKind !== undefined && incomingKind !== type) {
+        setType(incomingKind);
+    }
+    const hasFields = React.useMemo(() => {
+        return adaptable.api.expressionApi.internalApi.getAvailableFields()?.length > 0;
+    }, []);
+    const allowScope = !!scopeMeta && !props.hideFields;
+    const valueIsField = !!props.value && isQlFieldRef(props.value);
+    const hasFieldsOrValueIsField = hasFields || valueIsField;
+    let input = null;
+    const atomSelectorClassName = 'twa:w-full twa:min-w-0';
+    if (type === 'column') {
+        const columnId = props.value && isQlColRef(props.value) ? props.value.columnId : '';
+        input = (_jsx(QueryBuilderColumnSelector, { className: atomSelectorClassName, value: columnId, type: props.type, onChange: (nextColumnId) => {
+                props.onChange({ kind: 'col', columnId: nextColumnId });
+            } }));
+    }
+    else if (type === 'field') {
+        const fieldName = props.value && isQlFieldRef(props.value) ? props.value.fieldName : '';
+        input = (_jsx(FieldSelector, { className: atomSelectorClassName, value: fieldName, type: props.type, onChange: (nextFieldName) => {
+                props.onChange({ kind: 'field', fieldName: nextFieldName });
+            } }));
+    }
+    else if (type === 'row') {
+        input = (_jsx(Box, { "data-id": "query-input-row-display", "data-name": "qb2-whole-row", "data-slot": "select-trigger", className: subjectPillClassName, children: "Whole Row" }));
+    }
+    else {
+        input = (_jsx(Box, { "data-id": "query-input-scope-display", "data-slot": "select-trigger", className: subjectPillClassName, children: scopeMeta?.description ?? '$SCOPE' }));
+    }
+    const typeOptions = [
+        {
+            label: (_jsxs(Flex, { alignItems: "center", children: [_jsx(Icon, { name: "columns" }), _jsx(Box, { className: "twa:ml-2", children: "Column" })] })),
+            value: 'column',
+            icon: 'columns',
+        },
+    ];
+    if (hasFieldsOrValueIsField) {
+        typeOptions.push({
+            label: (_jsxs(Flex, { alignItems: "center", children: [_jsx(Icon, { name: "column-outline" }), _jsx(Box, { className: "twa:ml-2", children: "Field" })] })),
+            value: 'field',
+            icon: 'column-outline',
+        });
+    }
+    typeOptions.push({
+        label: (_jsxs(Flex, { alignItems: "center", children: [_jsx(Icon, { name: "rows" }), _jsx(Box, { className: "twa:ml-2", children: "Row" })] })),
+        value: 'row',
+        icon: 'rows',
+    });
+    if (allowScope) {
+        typeOptions.push({
+            label: (_jsxs(Flex, { alignItems: "center", children: [_jsx(Icon, { name: "target" }), _jsx(Box, { className: "twa:ml-2", children: "Scope" })] })),
+            value: 'scope',
+            icon: 'target',
+        });
+    }
+    const showTypeSelector = !props.hideFields;
+    const renderTypeIcon = (kind) => {
+        switch (kind) {
+            case 'column':
+                return _jsx(Icon, { name: "columns" });
+            case 'field':
+                return _jsx(Icon, { name: "column-outline" });
+            case 'row':
+                return _jsx(Icon, { name: "rows" });
+            case 'scope':
+                return _jsx(Icon, { name: "target" });
+        }
+    };
+    return !showTypeSelector ? (_jsx(Box, { className: "twa:w-full", children: input })) : (_jsxs(InputGroup, { Component: Flex, "data-id": "query-first-arg-wrapper", className: "twa:w-full", children: [_jsx(SingleSelect, { "data-name": "qb2-lhs-kind", className: "ab-QueryBuilder__meta twa:max-w-none twa:shrink-0 twa:px-2", chevronIcon: null, value: type, items: typeOptions, onValueChange: (value) => {
+                    const next = value;
+                    setType(next);
+                    if (next === 'row') {
+                        props.onSubjectKindChange?.('row');
+                        return;
+                    }
+                    props.onSubjectKindChange?.(next);
+                    if (next === 'scope') {
+                        props.onChange({ kind: 'scope' });
+                    }
+                    else if (props.value !== undefined) {
+                        props.onChange(undefined);
+                    }
+                }, renderValue: () => renderTypeIcon(type) }), _jsx(Box, { className: "ab-QueryBuilder__atom twa:flex-1 twa:min-w-0", children: input })] }));
+};
+export const PrimitiveValueInput = (props) => {
+    const adaptable = useAdaptable();
+    const { layout } = useQueryBuilder();
+    const isStackedLayout = layout === 'stacked';
+    const allowedModes = props.allowedModes ?? DEFAULT_QUERY_BUILDER_INPUT_MODES;
+    const hasFields = React.useMemo(() => {
+        return adaptable.api.expressionApi.internalApi.getAvailableFields()?.length > 0;
+    }, []);
+    const valueIsField = !!props.value && isQlFieldRef(props.value);
+    const hasFieldsOrValueIsField = hasFields || valueIsField;
+    const inferModeFromValue = (value) => {
+        let inferred = 'input-value';
+        if (value && isQlColRef(value)) {
+            inferred = 'column-name';
+        }
+        else if (value && isQlFieldRef(value)) {
+            inferred = 'field';
+        }
+        if (!allowedModes.includes(inferred)) {
+            return allowedModes[0];
+        }
+        return inferred;
+    };
+    const [type, setType] = React.useState(() => inferModeFromValue(props.value));
+    if (props.value !== undefined) {
+        const incomingMode = inferModeFromValue(props.value);
+        if (incomingMode !== type) {
+            setType(incomingMode);
+        }
+    }
+    const handleTypeChange = (newType) => {
+        if (type !== newType) {
+            props.onChange(undefined);
+            setType(newType);
+        }
+    };
+    const literalSlotType = literalTypeForSlot(props.inputType);
+    const currentLiteralValue = literalValue(props.value);
+    const getEditor = () => {
+        const common = {
+            'data-id': 'query-input',
+            placeholder: props.label,
+        };
+        switch (props.inputType) {
+            case 'boolean':
+                return (_jsx(CheckBox, { ...common, checked: !!currentLiteralValue, onChange: () => props.onChange(literalOf('boolean', !currentLiteralValue)) }));
+            case 'number':
+                return (_jsx(AdaptableInput, { ...common, type: "number", value: currentLiteralValue === undefined || currentLiteralValue === null
+                        ? ''
+                        : String(currentLiteralValue), onChange: (event) => {
+                        const raw = event.target.value;
+                        if (raw === '') {
+                            props.onChange(undefined);
+                        }
+                        else {
+                            props.onChange(literalOf('number', parseFloat(raw)));
+                        }
+                    } }));
+            case 'text':
+                return (_jsx(AdaptableInput, { ...common, type: "text", value: currentLiteralValue == null ? '' : String(currentLiteralValue), onChange: (event) => {
+                        const raw = event.target.value;
+                        props.onChange(literalOf('text', raw));
+                    } }));
+            case 'date': {
+                const dateStr = typeof currentLiteralValue === 'string' ? currentLiteralValue : '';
+                return (_jsx(AdaptableInput, { ...common, type: "date", value: dateStr, onChange: (event) => {
+                        const raw = event.target.value;
+                        props.onChange(literalOf('date', raw));
+                    } }));
+            }
+            default:
+                return _jsx(_Fragment, {});
+        }
+    };
+    const resolvedValueEditor = props.valueEditor ??
+        (['date', 'boolean'].includes(props.inputType) ? 'free' : 'permitted-values');
+    let editor = null;
+    if (type === 'column-name') {
+        const abColType = mapExpressionFunctionTypeToColumnDataType(props.inputType);
+        editor = (_jsx(PrimitiveColumnOrFieldSelector, { hideFields: true, value: props.value, type: abColType, onChange: (next) => {
+                props.onChange(next);
+            } }));
+    }
+    else if (type === 'field') {
+        const fieldName = props.value && isQlFieldRef(props.value) ? props.value.fieldName : '';
+        editor = (_jsx(FieldSelector, { className: "twa:w-full twa:min-w-0", placeholder: props.label, value: fieldName, onChange: (nextFieldName) => {
+                props.onChange({ kind: 'field', fieldName: nextFieldName });
+            } }));
+    }
+    else if (typeof resolvedValueEditor === 'object' &&
+        Array.isArray(resolvedValueEditor.enum)) {
+        const enumValues = resolvedValueEditor.enum;
+        const stringValue = typeof currentLiteralValue === 'string' ? currentLiteralValue : '';
+        editor = (_jsx(SingleSelect, { "data-id": "query-input", className: "twa:min-w-32", placeholder: props.label, value: stringValue, items: enumValues.map((v) => ({ label: v, value: v })), onValueChange: (value) => props.onChange(literalOf('text', value)) }));
+    }
+    else if (resolvedValueEditor === 'free') {
+        editor = getEditor();
+    }
+    else if (resolvedValueEditor === 'permitted-values' && props.lefthandColumnId) {
+        editor = (_jsx(PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', className: "twa:w-full twa:min-w-0", placeholder: props.label, value: currentLiteralValue, columnId: props.lefthandColumnId, onChange: (value) => {
+                props.onChange(literalOf(literalSlotType, value));
+            } }));
+    }
+    else {
+        editor = getEditor();
+    }
+    let options = [
+        {
+            label: (_jsxs(Flex, { alignItems: "center", children: [_jsx(Icon, { name: "edit" }), _jsx(Box, { className: "twa:ml-2", children: "Value" })] })),
+            icon: 'edit',
+            value: 'input-value',
+        },
+        {
+            label: (_jsxs(Flex, { alignItems: "center", children: [_jsx(Icon, { name: "columns" }), _jsx(Box, { className: "twa:ml-2", children: "Column" })] })),
+            icon: 'columns',
+            value: 'column-name',
+        },
+    ];
+    if (hasFieldsOrValueIsField || type === 'field') {
+        options.push({
+            label: (_jsxs(Flex, { alignItems: "center", children: [_jsx(Icon, { name: "column-outline" }), _jsx(Box, { className: "twa:ml-2", children: "Field" })] })),
+            icon: 'column-outline',
+            value: 'field',
+        });
+    }
+    options = options.filter((option) => allowedModes.includes(option.value));
+    const typeOption = options.find((option) => option.value === type);
+    const showTypeSelector = options.length > 1;
+    const renderModeIcon = (mode) => {
+        switch (mode) {
+            case 'column-name':
+                return _jsx(Icon, { name: "columns" });
+            case 'field':
+                return _jsx(Icon, { name: "column-outline" });
+            case 'input-value':
+            default:
+                return _jsx(Icon, { name: "edit" });
+        }
+    };
+    const modeSelector = showTypeSelector ? (_jsx(SingleSelect, { "data-name": "qb2-rhs-mode", className: "ab-QueryBuilder__meta twa:max-w-none twa:shrink-0 twa:px-2", chevronIcon: null, value: typeOption?.value, items: options, onValueChange: (value) => handleTypeChange(value), renderValue: () => renderModeIcon(type) })) : null;
+    if (isStackedLayout) {
+        return (_jsxs(InputGroup, { Component: Flex, "data-id": "query-input-wrapper", "data-name": "qb2-rhs", "data-slot-index": props.slotIndex ?? 0, "data-input-type": props.inputType, className: "ab-QueryBuilder__rhs ab-QueryBuilder__rhs--stacked twa:w-full twa:min-w-0", children: [modeSelector, _jsx("div", { className: "ab-QueryBuilder__atom twa:flex-1 twa:flex twa:min-w-0 twa:w-full", children: editor })] }));
+    }
+    return (_jsxs(InputGroup, { Component: Flex, "data-id": "query-input-wrapper", "data-name": "qb2-rhs", "data-slot-index": props.slotIndex ?? 0, "data-input-type": props.inputType, className: "ab-QueryBuilder__rhs twa:mr-2", children: [modeSelector, _jsx("div", { className: "ab-QueryBuilder__atom twa:flex-1 twa:flex twa:min-w-0 twa:w-full", children: editor })] }));
+};
+export const PrimitiveMultiValueInput = (props) => {
+    const { api } = useAdaptable();
+    const { module, layout } = useQueryBuilder();
+    const isStackedLayout = layout === 'stacked';
+    const itemType = props.inputType.replace('[]', '');
+    const literalSlotType = literalTypeForSlot(itemType);
+    const column = props.lefthandColumnId
+        ? api.columnApi.getColumnWithColumnId(props.lefthandColumnId)
+        : undefined;
+    const isColumnFilterModule = module === ModuleConstants.ColumnFilterModuleId;
+    const enableInFilterFunctions = isColumnFilterModule && props.operator === 'IN';
+    const useColumnValuesSelect = !!props.lefthandColumnId &&
+        (isColumnFilterModule ||
+            props.lefthandColumnId === AG_GRID_GROUPED_COLUMN ||
+            column?.dataType === 'date');
+    const wrapperProps = {
+        'data-name': 'qb2-rhs',
+        'data-slot-index': props.slotIndex ?? 0,
+        'data-input-type': props.inputType,
+        'data-multi': 'true',
+        className: cn('ab-QueryBuilder__rhs', isStackedLayout ? 'twa:w-full twa:mr-0' : 'twa:mr-2 twa:flex twa:min-w-0'),
+    };
+    if (useColumnValuesSelect) {
+        const rawValues = props.value.map(rawValueFromInListItem).filter((v) => v !== undefined);
+        const listValue = props.lefthandColumnId === AG_GRID_GROUPED_COLUMN
+            ? normalizeGroupColumnInValues(rawValues)
+            : rawValues;
+        return (_jsx("div", { ...wrapperProps, children: _jsx(FloatingFilterValues, { columnId: props.lefthandColumnId, disabled: false, type: "In", enableExpressionFunctions: enableInFilterFunctions, value: listValue, onClear: () => props.onChange([]), onChange: (inputs) => {
+                    props.onChange((inputs ?? []).map((item) => literalOrPathArg(item, itemType)));
+                } }) }));
+    }
+    const literalValues = props.value
+        .map((arg) => literalValue(arg))
+        .filter((v) => v !== undefined);
+    return (_jsx("div", { ...wrapperProps, children: _jsx(PermittedValuesSelector, { className: "twa:flex-1 twa:w-full", isMulti: true, allowNewValues: true, value: literalValues, columnId: props.lefthandColumnId ?? '', onChange: (value) => {
+                const list = (value ?? []);
+                props.onChange(list
+                    .map((v) => literalFromEditorValue(literalSlotType, v))
+                    .filter((lit) => lit != null));
+            } }) }));
+};
+export const ExpressionSelector = (props) => {
+    const { getOperators, getRowOperators, getFunctionDef } = useQueryBuilder();
+    const expressions = props.rowMode ? getRowOperators() : getOperators(props.dataTypes);
+    const subjectType = props.dataTypes?.length === 1
+        ? mapColumnDataTypeToExpressionFunctionType(props.dataTypes[0])
+        : undefined;
+    const labelFor = (operator) => resolveOperatorLabel(getFunctionDef(operator), operator, subjectType);
+    const triggerLabelFor = (operator) => resolveOperatorTriggerLabel(getFunctionDef(operator), operator, subjectType);
+    return (_jsx(NewDropdownButton, { "data-id": "expression-selector", "data-name": "qb2-operator", className: "ab-QueryBuilder__operator twa:min-h-input twa:overflow-hidden", "data-value": props.value, disabled: props.disabled, variant: "outlined", tone: "accent", items: expressions.map((expression) => ({
+            dataName: `qb2-operator-item-${expression}`,
+            label: labelFor(expression),
+            onClick: () => {
+                if (expression !== props.value) {
+                    props.onExpressionChange(expression);
+                }
+            },
+        })), children: props.value ? (isComparisonOperator(props.value) ? (_jsx("span", { className: "ab-QueryBuilder__operator-symbol", children: triggerLabelFor(props.value) })) : (triggerLabelFor(props.value))) : (_jsx("span", { className: "ab-QueryBuilder__placeholder", children: "Operator" })) }));
+};
+export const CombinatorSelector = (props) => {
+    return (_jsx(NewDropdownButton, { className: "ab-QueryBuilder__combinator twa:min-h-input twa:pl-3 twa:pr-2", "data-id": "combinator-selector", "data-name": "qb2-combinator", "data-value": props.value, variant: "outlined", tone: "accent", items: [
+            { label: 'AND', onClick: () => props.onChange('AND') },
+            { label: 'OR', onClick: () => props.onChange('OR') },
+        ], children: props.value }));
+};

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+export type AddKind = 'condition' | 'group';
+/**
+ * Shared add / delete affordances for group, primitive, and NOT editors.
+ *
+ * - **Group footer** (no `rail`): labelled "Add Condition" / "Add Group" buttons.
+ * - **Row rail** (`rail` set): compact icon controls for the soft grid
+ *   (inline `+` when enabled, delete).
+ *
+ * The caller decides what add does (append vs insert-sibling) via `onAdd`.
+ */
+export declare const RowActions: React.FunctionComponent<{
+    onAdd?: (kind: AddKind) => void;
+    onDelete?: () => void;
+    hideAdd?: boolean;
+    hideDelete?: boolean;
+    /** Omit Add Group — only Add Condition is offered. */
+    hideAddGroup?: boolean;
+    /**
+     * Render as a fixed-width, right-aligned rail (soft grid).
+     * Row-trailing usages set this so delete
+     * icons line up across rows and group headers, and so rows whose
+     * affordances are hidden (e.g. the transient seed row) reserve the same
+     * width instead of letting their inputs jump. The group-level bottom add
+     * stays left-aligned and unwrapped (labelled buttons).
+     *
+     * `'full'` reserves room for add + delete;
+     * `'compact'` for delete only — the default when inline add is hidden
+     * (`hideInlineAdd`, which is on by default), so rows don't reserve
+     * space for a trailing `+` that lives under the group instead.
+     */
+    rail?: 'full' | 'compact';
+}>;

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { NewDropdownButton } from '../../DropdownButton';
+import { Flex } from '../../Flex';
+import { Icon } from '../../icons';
+import SimpleButton from '../../SimpleButton';
+export const RowActions = ({ onAdd, onDelete, hideAdd, hideDelete, hideAddGroup, rail }) => {
+    const showLabelledAdd = !rail;
+    let addControl = null;
+    if (!hideAdd && onAdd) {
+        if (showLabelledAdd) {
+            addControl = (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1", children: [_jsx(SimpleButton, { "data-name": "qb2-add-condition", icon: "plus", variant: "outlined", tone: "neutral", className: "twa:text-2", onClick: () => onAdd('condition'), children: "Add Condition" }), !hideAddGroup && (_jsx(SimpleButton, { "data-name": "qb2-add-group", icon: "plus", variant: "outlined", tone: "neutral", className: "twa:text-2", onClick: () => onAdd('group'), children: "Add Group" }))] }));
+        }
+        else if (hideAddGroup) {
+            addControl = (_jsx(SimpleButton, { "data-name": "qb2-add", icon: "plus", variant: "text", onClick: () => onAdd('condition') }));
+        }
+        else {
+            addControl = (_jsx(NewDropdownButton, { "data-name": "qb2-add", items: [
+                    { label: 'Condition', onClick: () => onAdd('condition') },
+                    { label: 'Group', onClick: () => onAdd('group') },
+                ], variant: "text", children: _jsx(Icon, { name: "plus" }) }));
+        }
+    }
+    const content = (_jsxs(_Fragment, { children: [addControl, !hideDelete && onDelete && (_jsx(SimpleButton, { "data-name": "qb2-delete", icon: "delete", variant: "text", onClick: onDelete }))] }));
+    if (!rail) {
+        return content;
+    }
+    return (_jsx(Flex, { className: 'ab-QueryBuilder__actions twa:flex-none twa:justify-end ' +
+            (rail === 'compact'
+                ? 'twa:w-(--ab-cmp-query-builder__actions-compact-width)'
+                : 'twa:w-(--ab-cmp-query-builder__actions-width)'), alignItems: "center", children: content }));
+};

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

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import { QlArg, QlPredicate, QlPredicateError, ResolvedOperatorSlot } from "../../../../vendor/aql/index.js";
+import type { ExpressionFunctionInputType } from "../../../../vendor/aql/index.js";
+import type { AdaptableExpressionFunction as ExpressionFunction } from '../../../aql/types';
+import { AdaptableColumnDataType, AdaptableModule, ColumnScope } from '../../../types';
+import { QueryBuilderScopeMeta } from './utils';
+export type QueryBuilderLayoutMode = 'inline' | 'stacked' | 'auto';
+export type GetColumnsOrFields = (type?: AdaptableColumnDataType) => {
+    label?: string;
+    value: string;
+    type: AdaptableColumnDataType;
+}[];
+/**
+ * Subject (LHS) policy for the builder.
+ *  - `free`   — the user picks column / field / `$SCOPE` per condition.
+ *  - `locked` — every condition's LHS is fixed & readonly to one column.
+ */
+export type QueryBuilderSubject = {
+    mode: 'free';
+} | {
+    mode: 'locked';
+    columnId: string;
+};
+/** Resolved metadata for a locked subject column. */
+export interface LockedSubject {
+    columnId: string;
+    dataType: AdaptableColumnDataType;
+    friendlyName: string;
+}
+/**
+ * The single service boundary for QueryBuilder v2 (spec R6.7.3). Every
+ * metadata / resolution / validation fact a leaf editor needs is provided
+ * here, pre-bound to the per-module function pool, the `AdaptableApi`, and
+ * the parent `ColumnScope`. Leaf editors must read from this context and
+ * must never reach into the system function maps directly.
+ *
+ * All members delegate to the shared, pure resolvers in
+ * `../QueryBuilder/utils.ts` — this context only binds their pool / api /
+ * scope arguments so the call sites stay terse and pool-aware (so
+ * host-registered custom functions resolve — spec R6.1.1).
+ */
+export interface QueryBuilderContextValue {
+    /** The host module this QueryBuilder instance is bound to. */
+    module: AdaptableModule;
+    /** Column / field option providers (from the host props). */
+    getColumns: GetColumnsOrFields;
+    getFields: GetColumnsOrFields;
+    /** Parent `ColumnScope` snapshot (undefined ⇒ `$SCOPE` unavailable). */
+    scopeMeta?: QueryBuilderScopeMeta;
+    columnScope?: ColumnScope;
+    /** QB-eligible operator names for Column / Field / Scope (intersection when multi-type). */
+    getOperators: (dataTypes?: AdaptableColumnDataType[]) => string[];
+    /** QB-eligible operator names for the Row (whole-row) LHS kind. */
+    getRowOperators: () => string[];
+    /** Default Rows operator: `ANY_CHANGE` when in the module pool, else `ANY_CONTAINS`. */
+    getDefaultRowOperator: () => string;
+    /** Pool-aware function lookup (boolean wins over scalar). */
+    getFunctionDef: (operator: string) => ExpressionFunction | undefined;
+    /** Whether the operator carries a lefthand subject (unknown ⇒ true). */
+    operatorHasSubject: (operator: string) => boolean;
+    /** Whether the operator can appear under the Rows LHS kind. */
+    isRowCapableOperator: (operator: string) => boolean;
+    /**
+     * Whether this primitive should render in Rows mode (arg-aware for
+     * optional-subject ops such as `ANY_CHANGE`).
+     */
+    isRowFormOperator: (operator: string | undefined, args: readonly QlArg[]) => boolean;
+    /** Resolved rhs slots for an operator given the subject's input type. */
+    resolveOperatorSlots: (operator: string, subjectType?: ExpressionFunctionInputType) => ResolvedOperatorSlot[];
+    /** Subject (column / field / scope) → single data type when homogeneous. */
+    resolveSubjectDataType: (subject: QlArg | undefined) => AdaptableColumnDataType | undefined;
+    /** Subject → all data types (for operator intersection on mixed `$SCOPE`). */
+    resolveSubjectDataTypes: (subject: QlArg | undefined) => AdaptableColumnDataType[] | undefined;
+    /** Subject → representative column id for column-aware value editors. */
+    resolveLefthandColumnId: (subject: QlArg | undefined) => string | undefined;
+    /** Soft, whole-node "why can't this render" reason, or null. */
+    getUnsupportedReason: (node: QlPredicate | QlPredicateError | null) => string | null;
+    /**
+     * When set, the LHS of every condition is fixed & readonly to this column
+     * (subject = `{ kind: 'col', columnId }`). Leaf editors render a readonly
+     * subject pill and force `args[0]` to this column. Undefined ⇒ free mode.
+     */
+    lockedSubject?: LockedSubject;
+    /**
+     * Hide the inline "add" on the right of each condition row.
+     * The under-row group add stays. Defaults to `true`.
+     */
+    hideInlineAdd?: boolean;
+    /**
+     * Hide "Add Group" so only flat conditions can be added. Existing groups
+     * still render — this only stops *new* group creation.
+     */
+    hideAddGroup?: boolean;
+    /**
+     * When locked, hide the readonly LHS subject pill (host already shows
+     * the column name — e.g. ColumnFilter). See `hideLockedSubject` on
+     * `QueryBuilderProps`.
+     */
+    hideLockedSubject?: boolean;
+    /**
+     * Hide per-row drag handles and skip drag-reorder. Use for flat embeds
+     * where sibling order is immaterial (e.g. ColumnFilter).
+     */
+    hideDragHandles?: boolean;
+    /**
+     * Condition-row layout. `inline` is the default soft grid; `stacked`
+     * puts the value editor on a second row (narrow hosts such as the AG
+     * Grid filters tool panel); `auto` stacks when the editor container is
+     * narrow (container query).
+     */
+    layout?: QueryBuilderLayoutMode;
+}
+export declare const useQueryBuilder: () => QueryBuilderContextValue;
+export interface QueryBuilderProviderProps {
+    module: AdaptableModule;
+    columnScope?: ColumnScope;
+    getColumns: GetColumnsOrFields;
+    getFields: GetColumnsOrFields;
+    subject?: QueryBuilderSubject;
+    /** @defaultValue true — prefer the under-row group add over a per-row `+`. */
+    hideInlineAdd?: boolean;
+    hideAddGroup?: boolean;
+    hideLockedSubject?: boolean;
+    hideDragHandles?: boolean;
+    layout?: QueryBuilderLayoutMode;
+    children: React.ReactNode;
+}
+/**
+ * Builds and memoises the `QueryBuilderContextValue` once per
+ * module/scope/props change, mirroring the memoisation the current
+ * `QueryBuilder` does (pool + operator names + scope meta resolved once).
+ */
+export declare const QueryBuilderProvider: React.FunctionComponent<QueryBuilderProviderProps>;

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

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { collectQueryBuilderOperatorNames, getFunctionDef, getOperatorsForRowSubject, isRowCapableOperator, isRowFormOperator, operatorHasSubject, resolveOperandSlots, } from "../../../../vendor/aql/index.js";
+import { useAdaptable } from '../../../View/AdaptableContext';
+import { buildQueryBuilderScopeMeta, getOperatorsForSubjectTypes, getUnsupportedReasonForNode, resolveLefthandColumnIdForValueEditors, resolveSubjectDataType, resolveSubjectDataTypes, } from './utils';
+const QueryBuilderContext = React.createContext(null);
+export const useQueryBuilder = () => {
+    const context = React.useContext(QueryBuilderContext);
+    if (!context) {
+        throw new Error('useQueryBuilder must be used within a QueryBuilderProvider');
+    }
+    return context;
+};
+export const QueryBuilderProvider = ({ module, columnScope, getColumns, getFields, subject, hideInlineAdd, hideAddGroup, hideLockedSubject, hideDragHandles, layout = 'auto', children, }) => {
+    const adaptable = useAdaptable();
+    const api = adaptable.api;
+    const lockedSubject = React.useMemo(() => {
+        if (subject?.mode !== 'locked') {
+            return undefined;
+        }
+        const column = api.columnApi.getColumnWithColumnId(subject.columnId);
+        if (!column) {
+            return undefined;
+        }
+        return {
+            columnId: column.columnId,
+            dataType: column.dataType,
+            friendlyName: column.friendlyName ?? column.columnId,
+        };
+    }, [subject, api]);
+    const pool = React.useMemo(() => {
+        const expressionMap = api.internalApi
+            .getQueryLanguageService()
+            .getModuleExpressionFunctionsMap(module);
+        return {
+            scalarFunctions: expressionMap.scalarFunctions ?? {},
+        };
+    }, [api.internalApi, module]);
+    const operatorNames = React.useMemo(() => collectQueryBuilderOperatorNames(pool), [pool]);
+    const scopeMeta = React.useMemo(() => buildQueryBuilderScopeMeta(columnScope, api), [columnScope, api]);
+    const value = React.useMemo(() => {
+        return {
+            module,
+            getColumns,
+            getFields,
+            scopeMeta,
+            columnScope,
+            getOperators: (dataTypes) => getOperatorsForSubjectTypes(dataTypes, operatorNames, pool),
+            getRowOperators: () => getOperatorsForRowSubject(operatorNames, pool),
+            getDefaultRowOperator: () => {
+                const rowOps = getOperatorsForRowSubject(operatorNames, pool);
+                return rowOps.includes('ANY_CHANGE') ? 'ANY_CHANGE' : 'ANY_CONTAINS';
+            },
+            getFunctionDef: (operator) => getFunctionDef(operator, pool),
+            operatorHasSubject: (operator) => {
+                const fn = getFunctionDef(operator, pool);
+                return fn ? operatorHasSubject(fn) : true;
+            },
+            isRowCapableOperator: (operator) => isRowCapableOperator(getFunctionDef(operator, pool)),
+            isRowFormOperator: (operator, args) => isRowFormOperator(operator, args, pool),
+            resolveOperatorSlots: (operator, subjectType) => resolveOperandSlots(getFunctionDef(operator, pool), subjectType),
+            resolveSubjectDataType: (subject) => resolveSubjectDataType(subject, api, scopeMeta),
+            resolveSubjectDataTypes: (subject) => resolveSubjectDataTypes(subject, api, scopeMeta),
+            resolveLefthandColumnId: (subject) => resolveLefthandColumnIdForValueEditors(subject, scopeMeta),
+            getUnsupportedReason: (node) => getUnsupportedReasonForNode(node, {
+                supportedFields: getFields(),
+                columnScope,
+            }),
+            lockedSubject,
+            hideInlineAdd,
+            hideAddGroup,
+            hideLockedSubject,
+            hideDragHandles,
+            layout,
+        };
+    }, [
+        module,
+        getColumns,
+        getFields,
+        scopeMeta,
+        columnScope,
+        operatorNames,
+        pool,
+        api,
+        lockedSubject,
+        hideInlineAdd,
+        hideAddGroup,
+        hideLockedSubject,
+        hideDragHandles,
+        layout,
+    ]);
+    return _jsx(QueryBuilderContext.Provider, { value: value, children: children });
+};