@elyx-code/editor-ui 0.0.2

package/src/components/dialogs/search-statement/ValueSelector.tsx

@@ -0,0 +1,766 @@
+import React from 'react';
+import {
+	EntityType,
+	InputMapState,
+	ProjectState,
+	resolveEntityDataTypeLabel,
+	resolveEntityName,
+	searchStatementDefs,
+	searchStatementFunctions,
+	searchStatementState as searchStatementStateLib,
+} from '@elyx-code/project-logic-tree';
+import {
+	Autocomplete,
+	Box,
+	TextField,
+	Tooltip as MuiTooltip,
+	Button,
+} from '@mui/material';
+import { useSearchStatementContext } from './search-statement-context';
+import DataTypeIcon from '../../draggable-entity-card/DataTypeIcon';
+import { ColumnSelectorValue } from './ColumnSelector';
+import LiteralValueField, {
+	fromLiteralValueTypeToReadableLabel,
+	ILiteralValueOption,
+	LiteralArrayBuilder,
+	LiteralValueTypeSelectorValue,
+} from './LiteralValue';
+
+const { ColumnRef, SearchStatementLiteralValue, ValueRef, FunctionCall } =
+	searchStatementStateLib;
+
+const { getFunctionDefinition, SQL_FUNCTION_REGISTRY } =
+	searchStatementFunctions;
+
+const { SearchStatementNodeType, SQLFunctionCategory, SearchLiteralValueType } =
+	searchStatementDefs;
+
+type ColumnRef = searchStatementStateLib.ColumnRef;
+type ValueRef = searchStatementStateLib.ValueRef;
+type SearchStatementLiteralValue =
+	searchStatementStateLib.SearchStatementLiteralValue;
+type FunctionCall = searchStatementStateLib.FunctionCall;
+type SearchLiteralValueType = searchStatementDefs.SearchLiteralValueType;
+type SQLFunctionCategory = searchStatementDefs.SQLFunctionCategory;
+type SQLDataType = searchStatementDefs.SQLDataType;
+
+// --- UTILS ---
+
+export function matchesDataType(
+	entityDataTypeLabel: string,
+	acceptedTypes: SQLDataType[],
+): boolean {
+	if (!acceptedTypes || acceptedTypes.includes('any')) return true;
+	const lowerLabel = (entityDataTypeLabel || '').toLowerCase();
+
+	// NULL is universally accepted — every SQL type allows NULL.
+	if (lowerLabel === 'null') return true;
+
+	// Direct matches.
+	if (lowerLabel === 'text' && acceptedTypes.includes('string')) return true;
+	if (lowerLabel === 'number' && acceptedTypes.includes('number')) return true;
+	if (lowerLabel === 'boolean' && acceptedTypes.includes('boolean'))
+		return true;
+	if (lowerLabel === 'date' && acceptedTypes.includes('date')) return true;
+	if (lowerLabel === 'json' && acceptedTypes.includes('json')) return true;
+	if (
+		(lowerLabel === 'array' || lowerLabel === 'list') &&
+		(acceptedTypes.includes('array') || acceptedTypes.includes('table'))
+	)
+		return true;
+
+	// Castability: types that aren't a direct match but can serve where a
+	// string is expected. Keeps the option enabled in the dropdown rather
+	// than disabling it outright — the SQL coercion at runtime handles the
+	// conversion (UUIDs and enum identifiers are stored as text underneath,
+	// dates serialise as ISO strings, JSON values stringify trivially).
+	if (acceptedTypes.includes('string')) {
+		if (
+			lowerLabel === 'uuid' ||
+			lowerLabel === 'enum' ||
+			lowerLabel === 'date' ||
+			lowerLabel === 'json'
+		)
+			return true;
+	}
+
+	// Castability: numbers can serve where a date is expected (epoch-ish
+	// patterns are common) — kept explicit so it's easy to revisit.
+	if (lowerLabel === 'number' && acceptedTypes.includes('date')) return true;
+
+	return false;
+}
+
+export interface IFunctionOption {
+	type: 'function-option';
+	// The registry definition of the function this option represents. Carrying
+	// it here lets the parent value-picker offer specific functions (UPPER,
+	// LOWER, …) directly as Autocomplete options, instead of a generic
+	// "Function value" option that then required a second dropdown to pick
+	// the actual function.
+	def?: searchStatementFunctions.ISQLFunctionDefinition;
+}
+
+// --- DISPLAY COMPONENTS ---
+
+export const ConditionSelectorValue = ({
+	value,
+}: {
+	value:
+		| SearchStatementLiteralValue
+		| ValueRef
+		| ColumnRef
+		| InputMapState
+		| ILiteralValueOption
+		| IFunctionOption
+		| FunctionCall;
+}) => {
+	const { project } = useSearchStatementContext();
+
+	if (!value) return null;
+
+	if (
+		value.type === SearchStatementNodeType.FunctionCall ||
+		value.type === 'function-option'
+	) {
+		const isInstance = value.type === SearchStatementNodeType.FunctionCall;
+		const optionDef = !isInstance ? (value as IFunctionOption).def : undefined;
+		const name = isInstance
+			? (value as FunctionCall).functionName
+			: optionDef?.name;
+		const label = isInstance
+			? name
+				? `${name}(...)`
+				: 'Function value'
+			: name
+				? `${name}()`
+				: 'Function value';
+		const description =
+			optionDef?.description || 'A dynamically calculated function';
+		return (
+			<span style={{ display: 'flex', flexDirection: 'column' }}>
+				<span
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						gap: 8,
+						color: 'var(--color-main-primary)',
+					}}
+				>
+					<i className='fa-solid fa-function' style={{ fontSize: 12 }} />
+					{label}
+				</span>
+				<p
+					style={{
+						margin: 0,
+						marginLeft: 20,
+						fontSize: 10,
+						color: 'rgba(0,0,0,0.54)',
+					}}
+				>
+					{description}
+				</p>
+			</span>
+		);
+	}
+
+	if (value.type === SearchStatementNodeType.ColumnRef) {
+		return <ColumnSelectorValue value={value as ColumnRef} />;
+	} else if (
+		value.type === SearchStatementNodeType.LiteralValue ||
+		value.type === 'literal-value-option'
+	) {
+		return <LiteralValueTypeSelectorValue value={value as any} />;
+	} else if (value.type === SearchStatementNodeType.ValueRef) {
+		return (
+			<span style={{ display: 'flex', flexDirection: 'column' }}>
+				<span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+					<DataTypeIcon entity={(value as ValueRef).inputMap} size='small' />
+					{resolveEntityName((value as ValueRef).inputMap, project.logic)}
+				</span>
+				<p
+					style={{
+						margin: 0,
+						marginLeft: 20,
+						fontSize: 10,
+						color: 'rgba(0,0,0,0.54)',
+					}}
+				>
+					{resolveEntityDataTypeLabel((value as ValueRef).inputMap)}{' '}
+					<b style={{ color: 'var(--color-main-primary)' }}>external input</b>{' '}
+					value
+				</p>
+			</span>
+		);
+	} else if (value.type === EntityType.InputMap) {
+		return (
+			<span style={{ display: 'flex', flexDirection: 'column' }}>
+				<span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+					<DataTypeIcon entity={value as InputMapState} size='small' />
+					{resolveEntityName(value as InputMapState, project.logic)}
+				</span>
+				<p
+					style={{
+						margin: 0,
+						marginLeft: 20,
+						fontSize: 10,
+						color: 'rgba(0,0,0,0.54)',
+					}}
+				>
+					{resolveEntityDataTypeLabel(value as InputMapState)}{' '}
+					<b style={{ color: 'var(--color-main-primary)' }}>external input</b>{' '}
+					value
+				</p>
+			</span>
+		);
+	}
+
+	return null;
+};
+
+export const FunctionCallSelector = ({
+	value,
+	onChange,
+	options,
+	disabledFunctionCategories,
+	disabled,
+}: {
+	value: FunctionCall;
+	onChange: (value: FunctionCall) => void;
+	options: (InputMapState | ColumnRef | IFunctionOption)[];
+	disabledFunctionCategories?: SQLFunctionCategory[];
+	disabled?: boolean;
+	showFunctionPicker?: boolean;
+}) => {
+	const { searchStatementState } = useSearchStatementContext();
+
+	const selectedDef: searchStatementFunctions.ISQLFunctionDefinition | null =
+		(!!value.functionName ? getFunctionDefinition(value.functionName) : null) ||
+		null;
+
+	return (
+		<div
+			className='test-class'
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				gap: 12,
+				paddingLeft: 16,
+				borderLeft: '2px solid rgba(0,0,0,0.1)',
+				marginTop: 8,
+				width: '100%',
+			}}
+		>
+			{/* Render Arguments */}
+			{selectedDef && (
+				<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+					{(() => {
+						// Render one slot per actual argument the value carries, padded
+						// up to the registry-required count. For variadic functions the
+						// last argDef stays "active" beyond the registry's static list,
+						// so additional user-added args still get a label and accepted-type set.
+						const slotCount = Math.max(
+							value.arguments.length,
+							selectedDef.arguments.length,
+						);
+						const variadicArgDef = selectedDef.arguments.find(
+							(a) => a.isVariadic,
+						);
+						const resolveArgDef = (i: number) =>
+							selectedDef.arguments[i] ||
+							variadicArgDef ||
+							selectedDef.arguments[selectedDef.arguments.length - 1];
+						return Array.from({ length: slotCount }).map((_, i) => {
+							const argDef = resolveArgDef(i);
+							return (
+								<div
+									key={i}
+									style={{
+										display: 'flex',
+										// flex-start so the tick mark stays anchored to the top
+										// of the argument block — when the argument is itself a
+										// nested function whose body is multi-line, alignItems
+										// 'center' would float the tick to the vertical middle of
+										// the whole stack.
+										alignItems: 'flex-start',
+										gap: 8,
+									}}
+								>
+									<div
+										style={{
+											width: 12,
+											height: 1,
+											// Push the 1px tick down to the vertical middle of the
+											// 40px MUI small Autocomplete input row that sits at the
+											// top of the argument block.
+											marginTop: 20,
+											backgroundColor: 'rgba(0,0,0,0.2)',
+											flexShrink: 0,
+										}}
+									/>
+									<ValueSelector
+										value={value.arguments[i] as any}
+										side={argDef.name as any}
+										label={`Argument: ${argDef.name}`}
+										options={options}
+										acceptedTypes={argDef.acceptedTypes}
+										disabledFunctionCategories={disabledFunctionCategories}
+										onChange={(newArg) => {
+											value.arguments[i] = newArg;
+											onChange(value);
+										}}
+										disabled={disabled}
+									/>
+								</div>
+							);
+						});
+					})()}
+
+					{selectedDef.arguments.some((a) => a.isVariadic) && (
+						<Button
+							size='small'
+							disabled={disabled}
+							onClick={() => {
+								value.arguments.push(
+									new SearchStatementLiteralValue(searchStatementState),
+								);
+								onChange(value);
+							}}
+							style={{ alignSelf: 'flex-start', fontSize: 10, marginLeft: 20 }}
+						>
+							+ Add Argument
+						</Button>
+					)}
+				</div>
+			)}
+		</div>
+	);
+};
+
+export const ValueSelector = ({
+	value,
+	onChange,
+	options,
+	side,
+	label,
+	acceptedTypes,
+	disabledFunctionCategories,
+	includeOnlyOptionTypes,
+	disabled,
+	horizontalSeparator,
+}: {
+	value: SearchStatementLiteralValue | ValueRef | ColumnRef | FunctionCall;
+	onChange: (
+		value: SearchStatementLiteralValue | ValueRef | ColumnRef | FunctionCall,
+	) => void;
+	options: (InputMapState | ColumnRef | IFunctionOption)[];
+	side: 'left' | 'right' | string;
+	label?: string;
+	acceptedTypes?: SQLDataType[];
+	disabledFunctionCategories?: SQLFunctionCategory[];
+	includeOnlyOptionTypes?: (
+		| EntityType.InputMap
+		| searchStatementDefs.SearchStatementNodeType.ColumnRef
+		| searchStatementDefs.SearchStatementNodeType.FunctionCall
+		| searchStatementDefs.SearchStatementNodeType.LiteralValue
+	)[];
+	disabled?: boolean;
+	horizontalSeparator?: boolean;
+}) => {
+	const { project, searchStatementState } = useSearchStatementContext();
+
+	const resolveLocalValueFromExternalValue = (
+		val: any,
+	):
+		| ValueRef
+		| ColumnRef
+		| ILiteralValueOption
+		| IFunctionOption
+		| FunctionCall => {
+		if (val?.type === SearchStatementNodeType.LiteralValue) {
+			return { type: 'literal-value-option', valueType: val.valueType };
+		}
+		// FunctionCall is passed through unchanged. The Autocomplete uses
+		// `isOptionEqualToValue` to match it against the corresponding
+		// function-option entry in the option list (by function name).
+		return val;
+	};
+
+	const localValue = resolveLocalValueFromExternalValue(value);
+
+	const getOptionDisabled = (option: any): boolean => {
+		if (option.type === 'literal-value-option') {
+			if (!acceptedTypes || acceptedTypes.includes('any')) return false;
+			const t = option.valueType;
+			if (
+				t === SearchLiteralValueType.String &&
+				acceptedTypes.includes('string')
+			)
+				return false;
+			if (
+				t === SearchLiteralValueType.Number &&
+				acceptedTypes.includes('number')
+			)
+				return false;
+			if (
+				t === SearchLiteralValueType.Boolean &&
+				acceptedTypes.includes('boolean')
+			)
+				return false;
+			if (t === SearchLiteralValueType.Date && acceptedTypes.includes('date'))
+				return false;
+			if (
+				t === SearchLiteralValueType.Array &&
+				(acceptedTypes.includes('array') || acceptedTypes.includes('table'))
+			)
+				return false;
+			if (t === SearchLiteralValueType.Null) return false;
+			return true;
+		}
+
+		if (option.type === 'function-option') {
+			const def = (option as IFunctionOption).def;
+			if (!def) return false;
+			return !!disabledFunctionCategories?.includes(def.category);
+		}
+
+		if (
+			option.type === EntityType.InputMap ||
+			option.type === SearchStatementNodeType.ColumnRef
+		) {
+			const typeLabel = resolveEntityDataTypeLabel(
+				option.type === EntityType.InputMap
+					? option
+					: (option as ColumnRef).property,
+			);
+			return !matchesDataType(typeLabel, acceptedTypes || ['any']);
+		}
+
+		return false;
+	};
+
+	const getOptionTooltip = (option: any): string => {
+		if (getOptionDisabled(option)) {
+			return `This argument expects one of the following types: ${acceptedTypes?.join(', ') || 'None'}`;
+		}
+		return '';
+	};
+
+	let rawOptions: (
+		| ValueRef
+		| ColumnRef
+		| ILiteralValueOption
+		| IFunctionOption
+	)[] = [
+		{ type: 'literal-value-option', valueType: SearchLiteralValueType.String },
+		{ type: 'literal-value-option', valueType: SearchLiteralValueType.Number },
+		{ type: 'literal-value-option', valueType: SearchLiteralValueType.Boolean },
+		{ type: 'literal-value-option', valueType: SearchLiteralValueType.Date },
+		{ type: 'literal-value-option', valueType: SearchLiteralValueType.Null },
+		{ type: 'literal-value-option', valueType: SearchLiteralValueType.Array },
+		// Specific SQL functions are surfaced directly as options here, so the
+		// user picks the function (UPPER, LOWER, …) at this top-level dropdown
+		// rather than picking a generic "Function value" and then disambiguating
+		// in a second dropdown inside FunctionCallSelector.
+		...Object.values(SQL_FUNCTION_REGISTRY).map<IFunctionOption>((def) => ({
+			type: 'function-option',
+			def,
+		})),
+		...(options.map((option) => {
+			if (option.type === EntityType.InputMap) {
+				const newValueRef = new ValueRef(searchStatementState);
+				newValueRef.inputMap = option;
+				return newValueRef;
+			}
+			return option;
+		}) as (ColumnRef | ValueRef)[]),
+	];
+
+	if (!!includeOnlyOptionTypes && !!includeOnlyOptionTypes.length) {
+		rawOptions = rawOptions.filter((op) => {
+			if (
+				includeOnlyOptionTypes.includes(
+					op.type as
+						| EntityType.InputMap
+						| searchStatementDefs.SearchStatementNodeType.ColumnRef
+						| searchStatementDefs.SearchStatementNodeType.FunctionCall
+						| searchStatementDefs.SearchStatementNodeType.LiteralValue,
+				)
+			) {
+				return true;
+			}
+
+			if (
+				includeOnlyOptionTypes.includes(
+					searchStatementDefs.SearchStatementNodeType.LiteralValue,
+				) &&
+				op.type === 'literal-value-option'
+			) {
+				return true;
+			}
+
+			if (
+				includeOnlyOptionTypes.includes(
+					searchStatementDefs.SearchStatementNodeType.FunctionCall,
+				) &&
+				op.type === 'function-option'
+			) {
+				return true;
+			}
+
+			return false;
+		});
+	}
+
+	// Sort disabled options to the bottom!
+	const sanitizedOptions = rawOptions.sort((a, b) => {
+		const aDis = getOptionDisabled(a) ? 1 : 0;
+		const bDis = getOptionDisabled(b) ? 1 : 0;
+		return aDis - bDis;
+	});
+
+	const CLAUSE_ROW_ID = 'value-selector--' + ProjectState.UUID.uuid();
+	const showLiteralValueField =
+		localValue?.type === 'literal-value-option' &&
+		(localValue as ILiteralValueOption).valueType !==
+			SearchLiteralValueType.Null &&
+		(localValue as ILiteralValueOption).valueType !==
+			SearchLiteralValueType.Array;
+	// Check the actual `value`, not the resolved `localValue`: localValue maps
+	// FunctionCall → function-option so the parent Autocomplete can match a
+	// specific function in its option list, but the recursive arg-builder
+	// still needs to render whenever the underlying value is a FunctionCall.
+	const showFunctionBuilder =
+		(value as any)?.type === SearchStatementNodeType.FunctionCall;
+	// Array literal: render the item-list builder BELOW the picker row.
+	const showArrayBuilder =
+		(value as any)?.type === SearchStatementNodeType.LiteralValue &&
+		(value as SearchStatementLiteralValue).valueType ===
+			SearchLiteralValueType.Array;
+
+	return (
+		<span style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+			<span
+				id='field-row'
+				style={{ display: 'flex', gap: 8, alignItems: 'center' }}
+			>
+				<span
+					id='field-group'
+					style={{ display: 'flex', gap: 8, alignItems: 'center' }}
+				>
+					<Autocomplete
+						disablePortal
+						disabled={disabled}
+						options={sanitizedOptions}
+						sx={{ width: 200 }}
+						value={localValue as any}
+						getOptionDisabled={getOptionDisabled}
+						isOptionEqualToValue={(option, val) => {
+							// MUI uses === by default, which would never match because
+							// resolveLocalValueFromExternalValue returns freshly-built
+							// option objects for literal values, and FunctionCall values
+							// must be matched against function-option entries by function
+							// name. Match structurally for both cases.
+							if (!option || !val) return option === val;
+							if (
+								option.type === 'function-option' &&
+								val.type === SearchStatementNodeType.FunctionCall
+							) {
+								return (
+									(option as IFunctionOption).def?.name ===
+									(val as FunctionCall).functionName
+								);
+							}
+							if (
+								option.type === 'literal-value-option' &&
+								val.type === 'literal-value-option'
+							) {
+								return (
+									(option as ILiteralValueOption).valueType ===
+									(val as ILiteralValueOption).valueType
+								);
+							}
+							return option === val;
+						}}
+						getOptionLabel={(option) => {
+							if (option.type === 'literal-value-option')
+								return `${fromLiteralValueTypeToReadableLabel(option.valueType)} value`;
+							if (option.type === 'function-option') {
+								const def = (option as IFunctionOption).def;
+								return def ? `${def.name}()` : 'Function value';
+							}
+							if (option.type === SearchStatementNodeType.FunctionCall) {
+								const fc = option as FunctionCall;
+								return fc.functionName
+									? `${fc.functionName}()`
+									: 'Function value';
+							}
+							if (option.type === SearchStatementNodeType.ValueRef)
+								return resolveEntityName(option.inputMap, project.logic);
+							if (option.type === SearchStatementNodeType.ColumnRef)
+								return option?.as || '';
+							return '';
+						}}
+						onChange={(e, newValue) => {
+							let resolvedNewValue: any;
+
+							if (newValue?.type === 'literal-value-option') {
+								resolvedNewValue = new SearchStatementLiteralValue(
+									searchStatementState,
+								);
+								resolvedNewValue.valueType = newValue.valueType;
+								if (newValue.valueType === SearchLiteralValueType.Null)
+									resolvedNewValue.value = null;
+								else if (newValue.valueType === SearchLiteralValueType.Array)
+									// Arrays default to an empty item list — the user adds
+									// items via the "+ Add Item" button on the array editor.
+									resolvedNewValue.value = [];
+							} else if (newValue?.type === 'function-option') {
+								const def = (newValue as IFunctionOption).def;
+								if (value?.type === SearchStatementNodeType.FunctionCall) {
+									const fc = new FunctionCall(searchStatementState);
+									fc._id = (value as FunctionCall)._id;
+									fc._as = (value as FunctionCall)._as;
+									if (def) {
+										fc.functionName = def.name;
+									}
+									fc.arguments = [];
+									resolvedNewValue = fc;
+								} else {
+									const fc = new FunctionCall(searchStatementState);
+									if (def) {
+										fc.functionName = def.name;
+									}
+									resolvedNewValue = fc;
+								}
+							} else {
+								resolvedNewValue = newValue;
+							}
+
+							onChange(resolvedNewValue);
+						}}
+						renderOption={(props, option) => {
+							const { key, ...optionProps } = props;
+							const isDisabled = getOptionDisabled(option);
+
+							return (
+								<MuiTooltip
+									key={key}
+									placement='right'
+									arrow
+									disableHoverListener={!isDisabled}
+									title={getOptionTooltip(option)}
+								>
+									<Box
+										component='li'
+										{...optionProps}
+										sx={{ opacity: isDisabled ? 0.5 : 1 }}
+									>
+										<ConditionSelectorValue value={option} />
+									</Box>
+								</MuiTooltip>
+							);
+						}}
+						renderInput={(params) => (
+							<span
+								style={{
+									position: 'relative',
+									display: 'block',
+									height: '100%',
+								}}
+							>
+								<span
+									id={CLAUSE_ROW_ID + `--${side}-input-selected-value`}
+									style={{
+										position: 'absolute',
+										top: 8,
+										left: 0,
+										width: '100%',
+										height: '100%',
+										maxHeight: 30,
+										overflowY: 'hidden',
+										paddingLeft: 14,
+										display: 'flex',
+										flexDirection: 'column',
+									}}
+								>
+									<ConditionSelectorValue value={value as any} />
+								</span>
+								<TextField
+									{...params}
+									size='small'
+									label={label || `Select ${side} value`}
+									slotProps={{
+										htmlInput: {
+											...params.inputProps,
+											id: CLAUSE_ROW_ID + `--${side}-input`,
+											style: { opacity: 0 },
+										},
+									}}
+									onFocus={(e) => {
+										e.target.style.opacity = '1';
+										const el = document.getElementById(
+											CLAUSE_ROW_ID + `--${side}-input-selected-value`,
+										);
+										if (el) el.style.visibility = 'hidden';
+									}}
+									onBlur={(e) => {
+										e.target.style.opacity = '0';
+										const el = document.getElementById(
+											CLAUSE_ROW_ID + `--${side}-input-selected-value`,
+										);
+										if (el) el.style.visibility = 'visible';
+									}}
+								/>
+							</span>
+						)}
+					/>
+					{showLiteralValueField && (
+						<LiteralValueField
+							disabled={disabled}
+							value={value as SearchStatementLiteralValue}
+							onChange={onChange}
+						/>
+					)}
+				</span>
+				{showFunctionBuilder && horizontalSeparator && (
+					<hr
+						style={{
+							width: '100%',
+							border: 'none',
+							borderTop: '2px solid rgba(0, 0, 0, 0.1)',
+							margin: '0',
+						}}
+					/>
+				)}
+			</span>
+
+			{/* RECURSIVE FUNCTION BUILDER INJECTION
+				The parent Autocomplete above already lets the user pick the specific
+				function (UPPER, LOWER, …) directly, so the inner builder skips its
+				own picker and only renders the argument list. */}
+			{showFunctionBuilder && (
+				<FunctionCallSelector
+					value={value as FunctionCall}
+					onChange={onChange}
+					options={options}
+					disabledFunctionCategories={disabledFunctionCategories}
+					disabled={disabled}
+				/>
+			)}
+
+			{/* ARRAY LITERAL ITEMS BUILDER
+				Renders the item list below the picker row, mirroring how a
+				function's arguments nest below its name. Each item recursively
+				uses LiteralValueTypeSelector so nested arrays / mixed-type items
+				work without further special-casing here. */}
+			{showArrayBuilder && (
+				<LiteralArrayBuilder
+					value={value as SearchStatementLiteralValue}
+					onChange={(newValue) => onChange(newValue)}
+					disabled={disabled}
+				/>
+			)}
+		</span>
+	);
+};