@uipath/apollo-wind 2.69.0 → 2.71.0

package/dist/components/ui/quick-form-field/quick-form-field.js

@@ -10,12 +10,13 @@ import { Popover, PopoverContent, PopoverTrigger } from "../popover.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select.js";
 import { Switch } from "../switch.js";
 import { cn } from "../../../lib/index.js";
+import { toDateValue } from "../../../lib/date-value.js";
 import { FieldMenu } from "../field-addons/field-menu.js";
 import { FieldHeader } from "./components/field-header.js";
 import { LockToggleButton } from "./components/lock-toggle-button.js";
 import { DEFAULT_QUICK_FORM_FIELD_STRINGS, FIELD_TYPE_META } from "./types.js";
-import { DEFAULT_SELECT_OPTIONS, formatDateValue, getLockedDisplayValue, parseDateValue, parseListValue, toDateOnlyString } from "./utils.js";
-function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true, onLockedChange, showLock = true, leadingAddon, trailingAddon, more, mode = 'literal', onModeChange, renderExpressionEditor, renderModeControl, fieldType = 'string', fieldTypes, onFieldTypeChange, required, onRequiredChange, label, strings: stringOverrides, placeholder, error, errorId, belowValue, fileUploadAriaLabel, headerActions, compact, showFieldActions = true, options = DEFAULT_SELECT_OPTIONS, onGenerateWithAi, onInsertVariable, variables = [], id, className }) {
+import { DEFAULT_SELECT_OPTIONS, formatDateValue, parseListValue, toDateOnlyString } from "./utils.js";
+function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true, onLockedChange, showLock = true, disabled = false, leadingAddon, trailingAddon, more, mode = 'literal', onModeChange, renderExpressionEditor, renderModeControl, fieldType = 'string', fieldTypes, onFieldTypeChange, required, onRequiredChange, label, strings: stringOverrides, placeholder, error, errorId, belowValue, fileUploadAriaLabel, headerActions, compact, showFieldActions = true, options = DEFAULT_SELECT_OPTIONS, onGenerateWithAi, onInsertVariable, variables = [], id, className }) {
     const strings = useMemo(()=>({
             ...DEFAULT_QUICK_FORM_FIELD_STRINGS,
             ...stringOverrides
@@ -31,13 +32,12 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
     const fieldId = id ?? generatedId;
     const validationId = errorId ?? `${fieldId}-error`;
     const typeMeta = FIELD_TYPE_META[fieldType];
-    const effectiveMode = 'expression' !== mode || typeMeta.supportsExpression ? mode : 'literal';
-    const editableOnValueChange = locked ? void 0 : onValueChange;
+    const editableOnValueChange = disabled ? void 0 : onValueChange;
     const typeLabel = strings.typeLabels[fieldType] ?? typeMeta.label;
-    const fieldLabel = 'expression' === effectiveMode ? strings.expressionFieldLabel(typeLabel) : strings.valueFieldLabel(typeLabel);
+    const fieldLabel = 'expression' === mode ? strings.expressionFieldLabel(typeLabel) : strings.valueFieldLabel(typeLabel);
     const valuePlaceholder = placeholder ?? fieldLabel;
     const menuActions = [
-        ...more?.onClear && !locked ? [
+        ...more?.onClear ? [
             {
                 id: 'clear',
                 label: strings.clearValue,
@@ -54,13 +54,11 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
             }
         ] : []
     ];
-    const offersModes = typeMeta.supportsExpression && !!onModeChange;
-    const showsMenu = typeMeta.supportsExpression || menuActions.length > 0;
-    const builtInMenu = showsMenu ? /*#__PURE__*/ jsx(FieldMenu, {
-        mode: effectiveMode,
+    const builtInMenu = /*#__PURE__*/ jsx(FieldMenu, {
+        mode: mode,
         onSelect: (next)=>onModeChange?.(next),
-        modesDisabled: !offersModes && menuActions.length > 0,
-        disabled: !offersModes && 0 === menuActions.length,
+        modesDisabled: !onModeChange && menuActions.length > 0,
+        disabled: disabled || !onModeChange && 0 === menuActions.length,
         actions: menuActions,
         triggerLabel: strings.valueModeAriaLabel,
         literalDescription: strings.literalDescriptions[fieldType] ?? typeMeta.fixedDescription,
@@ -70,20 +68,22 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
             expressionDescription: strings.expressionDescription,
             fieldActions: strings.moreActionsAriaLabel
         }
-    }) : null;
-    const modeControl = renderModeControl?.(mode, {
+    });
+    const controlProps = {
         id: fieldId,
         value,
         onValueChange: editableOnValueChange,
         onBlur: onValueBlur,
         readOnly: !editableOnValueChange,
+        disabled,
         placeholder: valuePlaceholder,
         fieldType,
         'aria-invalid': error ? true : void 0,
         'aria-describedby': error ? validationId : void 0,
         'aria-errormessage': error ? validationId : void 0,
         'data-slot': 'input-group-control'
-    }) ?? null;
+    };
+    const modeControl = renderModeControl?.(mode, controlProps) ?? null;
     const modeOnMount = useRef(mode);
     useEffect(()=>{
         if (modeOnMount.current === mode) return;
@@ -99,7 +99,7 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
         }
         if ('Escape' === e.key) {
             e.preventDefault();
-            onValueChange?.(committedRef.current);
+            editableOnValueChange?.(committedRef.current);
             e.currentTarget.blur();
         }
     };
@@ -121,7 +121,139 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
             input.setSelectionRange(next_caret, next_caret);
         });
     };
-    const lockedDisplayValue = getLockedDisplayValue(fieldType, value, options, strings);
+    const textInputProps = {
+        id: fieldId,
+        ref: valueInputRef,
+        readOnly: !editableOnValueChange,
+        disabled,
+        value,
+        onChange: (e)=>editableOnValueChange?.(e.target.value),
+        onFocus: (e)=>{
+            committedRef.current = value;
+            caretRef.current = {
+                start: e.currentTarget.selectionStart ?? value.length,
+                end: e.currentTarget.selectionEnd ?? value.length
+            };
+        },
+        onSelect: (e)=>{
+            const el = e.currentTarget;
+            caretRef.current = {
+                start: el.selectionStart ?? 0,
+                end: el.selectionEnd ?? el.selectionStart ?? 0
+            };
+        },
+        onKeyDown: handleValueKeyDown,
+        onBlur: (e)=>{
+            caretRef.current = {
+                start: e.currentTarget.selectionStart ?? value.length,
+                end: e.currentTarget.selectionEnd ?? value.length
+            };
+            onValueBlur?.();
+        },
+        placeholder: valuePlaceholder
+    };
+    const literalControl = 'boolean' === fieldType ? /*#__PURE__*/ jsx("div", {
+        className: "flex h-full flex-1 items-center px-3",
+        children: /*#__PURE__*/ jsx(Switch, {
+            id: fieldId,
+            "aria-invalid": controlProps['aria-invalid'],
+            "aria-describedby": controlProps['aria-describedby'],
+            "aria-errormessage": controlProps['aria-errormessage'],
+            checked: 'true' === value,
+            onCheckedChange: (checked)=>editableOnValueChange?.(String(checked)),
+            onBlur: onValueBlur,
+            disabled: !editableOnValueChange
+        })
+    }) : 'date' === fieldType ? /*#__PURE__*/ jsxs(Popover, {
+        open: datePopoverOpen,
+        onOpenChange: (open)=>{
+            setDatePopoverOpen(open);
+            if (!open) onValueBlur?.();
+        },
+        children: [
+            /*#__PURE__*/ jsx(PopoverTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    id: fieldId,
+                    "data-slot": "input-group-control",
+                    "aria-invalid": controlProps['aria-invalid'],
+                    "aria-describedby": controlProps['aria-describedby'],
+                    "aria-errormessage": controlProps['aria-errormessage'],
+                    disabled: !editableOnValueChange,
+                    className: "flex h-full flex-1 items-center text-left text-sm text-foreground outline-none disabled:cursor-not-allowed disabled:opacity-50",
+                    children: value ? formatDateValue(value) : /*#__PURE__*/ jsx("span", {
+                        className: "text-muted-foreground",
+                        children: strings.pickDate
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(PopoverContent, {
+                align: "start",
+                className: "w-auto p-0",
+                children: /*#__PURE__*/ jsx(Calendar, {
+                    mode: "single",
+                    selected: toDateValue(value),
+                    onSelect: (date)=>editableOnValueChange?.(date ? toDateOnlyString(date) : ''),
+                    initialFocus: true
+                })
+            })
+        ]
+    }) : 'datetime' === fieldType ? /*#__PURE__*/ jsx(DateTimePicker, {
+        id: fieldId,
+        value: toDateValue(value),
+        onValueChange: (date)=>editableOnValueChange?.(date ? date.toISOString() : ''),
+        onOpenChange: (open)=>{
+            if (!open) onValueBlur?.();
+        },
+        disabled: !editableOnValueChange,
+        placeholder: valuePlaceholder
+    }) : 'file' === fieldType ? /*#__PURE__*/ jsx(FileUpload, {
+        id: fieldId,
+        ariaLabel: fileUploadAriaLabel ?? ('string' == typeof label ? label : fieldLabel),
+        className: "flex-1",
+        onFilesChange: (files)=>editableOnValueChange?.(files.map((f)=>f.name).join(', ')),
+        disabled: !editableOnValueChange,
+        onBlur: onValueBlur,
+        "aria-invalid": controlProps['aria-invalid'],
+        "aria-describedby": controlProps['aria-describedby'],
+        "aria-errormessage": controlProps['aria-errormessage']
+    }) : 'single-select' === fieldType ? /*#__PURE__*/ jsxs(Select, {
+        open: selectOpen,
+        onOpenChange: (open)=>{
+            setSelectOpen(open);
+            if (!open && selectOpen) onValueBlur?.();
+        },
+        value: value || void 0,
+        onValueChange: editableOnValueChange,
+        disabled: !editableOnValueChange,
+        children: [
+            /*#__PURE__*/ jsx(SelectTrigger, {
+                id: fieldId,
+                children: /*#__PURE__*/ jsx(SelectValue, {
+                    placeholder: strings.selectOption
+                })
+            }),
+            /*#__PURE__*/ jsx(SelectContent, {
+                children: options.map((option)=>/*#__PURE__*/ jsx(SelectItem, {
+                        value: option.value,
+                        children: option.label
+                    }, option.value))
+            })
+        ]
+    }) : 'multi-select' === fieldType ? /*#__PURE__*/ jsx(MultiSelect, {
+        id: fieldId,
+        options: options,
+        selected: parseListValue(value),
+        onChange: (selected)=>editableOnValueChange?.(JSON.stringify(selected)),
+        placeholder: strings.selectOptions,
+        disabled: !editableOnValueChange,
+        onBlur: onValueBlur
+    }) : /*#__PURE__*/ jsx(InputGroupInput, {
+        ...textInputProps,
+        type: 'integer' === fieldType || 'double' === fieldType ? 'number' : 'text',
+        step: 'double' === fieldType ? 'any' : void 0
+    });
     return /*#__PURE__*/ jsxs("div", {
         className: cn('@container group flex flex-col gap-1.5 [&>[data-slot=form-field-error]]:mt-0', className),
         children: [
@@ -135,6 +267,8 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
                 onFieldTypeChange: onFieldTypeChange,
                 onRequiredChange: onRequiredChange,
                 compact: compact,
+                disabled: disabled,
+                isExpression: 'expression' === mode,
                 showFieldActions: showFieldActions,
                 onValueChange: editableOnValueChange,
                 variables: variables,
@@ -146,224 +280,26 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
                 headerActions: headerActions,
                 strings: strings
             }),
-            typeMeta.supportsExpression ? /*#__PURE__*/ jsxs(InputGroup, {
+            /*#__PURE__*/ jsxs(InputGroup, {
                 error: error,
                 errorId: validationId,
-                layout: 'file' !== fieldType || locked || 'literal' !== effectiveMode ? 'row' : 'grow',
+                disabled: disabled,
+                layout: 'literal' === mode && ('file' === fieldType || 'multi-select' === fieldType) ? 'grow' : 'row',
                 children: [
                     (showLock || void 0 !== leadingAddon) && null !== leadingAddon && /*#__PURE__*/ jsx(InputGroupAddon, {
                         align: "inline-start",
                         children: void 0 !== leadingAddon ? leadingAddon : showLock && /*#__PURE__*/ jsx(LockToggleButton, {
                             locked: locked,
                             onLockedChange: onLockedChange,
+                            disabled: disabled,
                             strings: strings
                         })
                     }),
-                    modeControl ?? ('expression' === effectiveMode ? renderExpressionEditor ? renderExpressionEditor({
-                        id: fieldId,
-                        value,
-                        onValueChange: editableOnValueChange,
-                        onBlur: onValueBlur,
-                        readOnly: !editableOnValueChange,
-                        placeholder: valuePlaceholder,
-                        fieldType,
-                        'aria-invalid': error ? true : void 0,
-                        'aria-describedby': error ? validationId : void 0,
-                        'aria-errormessage': error ? validationId : void 0,
-                        'data-slot': 'input-group-control'
-                    }) : /*#__PURE__*/ jsx(InputGroupInput, {
-                        id: fieldId,
-                        ref: valueInputRef,
-                        readOnly: !editableOnValueChange,
-                        value: value,
-                        onChange: (e)=>editableOnValueChange?.(e.target.value),
-                        onFocus: (e)=>{
-                            committedRef.current = value;
-                            caretRef.current = {
-                                start: e.currentTarget.selectionStart ?? value.length,
-                                end: e.currentTarget.selectionEnd ?? value.length
-                            };
-                        },
-                        onSelect: (e)=>{
-                            const el = e.currentTarget;
-                            caretRef.current = {
-                                start: el.selectionStart ?? 0,
-                                end: el.selectionEnd ?? el.selectionStart ?? 0
-                            };
-                        },
-                        onKeyDown: handleValueKeyDown,
-                        onBlur: (e)=>{
-                            caretRef.current = {
-                                start: e.currentTarget.selectionStart ?? value.length,
-                                end: e.currentTarget.selectionEnd ?? value.length
-                            };
-                            onValueBlur?.();
-                        },
-                        placeholder: valuePlaceholder,
+                    modeControl ?? ('expression' === mode ? renderExpressionEditor ? renderExpressionEditor(controlProps) : /*#__PURE__*/ jsx(InputGroupInput, {
+                        ...textInputProps,
                         className: "font-mono"
-                    }) : locked ? /*#__PURE__*/ jsx(InputGroupInput, {
-                        id: fieldId,
-                        readOnly: true,
-                        value: lockedDisplayValue,
-                        placeholder: valuePlaceholder,
-                        onBlur: onValueBlur
-                    }) : 'boolean' === fieldType ? /*#__PURE__*/ jsx("div", {
-                        className: "flex h-full flex-1 items-center px-3",
-                        children: /*#__PURE__*/ jsx(Switch, {
-                            id: fieldId,
-                            "aria-invalid": error ? true : void 0,
-                            "aria-describedby": error ? validationId : void 0,
-                            "aria-errormessage": error ? validationId : void 0,
-                            checked: 'true' === value,
-                            onCheckedChange: (checked)=>onValueChange?.(String(checked)),
-                            onBlur: onValueBlur,
-                            disabled: !onValueChange
-                        })
-                    }) : 'date' === fieldType ? /*#__PURE__*/ jsxs(Popover, {
-                        open: datePopoverOpen,
-                        onOpenChange: (open)=>{
-                            setDatePopoverOpen(open);
-                            if (!open) onValueBlur?.();
-                        },
-                        children: [
-                            /*#__PURE__*/ jsx(PopoverTrigger, {
-                                asChild: true,
-                                children: /*#__PURE__*/ jsx("button", {
-                                    type: "button",
-                                    id: fieldId,
-                                    "data-slot": "input-group-control",
-                                    "aria-invalid": error ? true : void 0,
-                                    "aria-describedby": error ? validationId : void 0,
-                                    "aria-errormessage": error ? validationId : void 0,
-                                    disabled: !onValueChange,
-                                    className: "flex h-full flex-1 items-center text-left text-sm text-foreground outline-none disabled:cursor-not-allowed disabled:opacity-50",
-                                    children: value ? formatDateValue(value) : /*#__PURE__*/ jsx("span", {
-                                        className: "text-muted-foreground",
-                                        children: strings.pickDate
-                                    })
-                                })
-                            }),
-                            /*#__PURE__*/ jsx(PopoverContent, {
-                                align: "start",
-                                className: "w-auto p-0",
-                                children: /*#__PURE__*/ jsx(Calendar, {
-                                    mode: "single",
-                                    selected: parseDateValue(value),
-                                    onSelect: (date)=>onValueChange?.(date ? toDateOnlyString(date) : ''),
-                                    initialFocus: true
-                                })
-                            })
-                        ]
-                    }) : 'datetime' === fieldType ? /*#__PURE__*/ jsx(DateTimePicker, {
-                        id: fieldId,
-                        value: parseDateValue(value),
-                        onValueChange: (date)=>onValueChange?.(date ? date.toISOString() : ''),
-                        onOpenChange: (open)=>{
-                            if (!open) onValueBlur?.();
-                        },
-                        disabled: !onValueChange,
-                        placeholder: valuePlaceholder
-                    }) : 'file' === fieldType ? /*#__PURE__*/ jsx(FileUpload, {
-                        id: fieldId,
-                        ariaLabel: fileUploadAriaLabel ?? ('string' == typeof label ? label : fieldLabel),
-                        className: "flex-1",
-                        onFilesChange: (files)=>onValueChange?.(files.map((f)=>f.name).join(', ')),
-                        disabled: !onValueChange,
-                        onBlur: onValueBlur,
-                        "aria-invalid": error ? true : void 0,
-                        "aria-describedby": error ? validationId : void 0,
-                        "aria-errormessage": error ? validationId : void 0
-                    }) : /*#__PURE__*/ jsx(InputGroupInput, {
-                        id: fieldId,
-                        ref: valueInputRef,
-                        type: 'integer' === fieldType || 'double' === fieldType ? 'number' : 'text',
-                        step: 'double' === fieldType ? 'any' : void 0,
-                        readOnly: !onValueChange,
-                        value: value,
-                        onChange: (e)=>onValueChange?.(e.target.value),
-                        onFocus: (e)=>{
-                            committedRef.current = value;
-                            caretRef.current = {
-                                start: e.currentTarget.selectionStart ?? value.length,
-                                end: e.currentTarget.selectionEnd ?? value.length
-                            };
-                        },
-                        onSelect: (e)=>{
-                            const el = e.currentTarget;
-                            caretRef.current = {
-                                start: el.selectionStart ?? 0,
-                                end: el.selectionEnd ?? el.selectionStart ?? 0
-                            };
-                        },
-                        onKeyDown: handleValueKeyDown,
-                        onBlur: (e)=>{
-                            caretRef.current = {
-                                start: e.currentTarget.selectionStart ?? value.length,
-                                end: e.currentTarget.selectionEnd ?? value.length
-                            };
-                            onValueBlur?.();
-                        },
-                        placeholder: valuePlaceholder
-                    })),
-                    null !== trailingAddon && (void 0 !== trailingAddon || builtInMenu) && /*#__PURE__*/ jsx(InputGroupAddon, {
-                        align: "inline-end",
-                        className: "cursor-default",
-                        children: void 0 !== trailingAddon ? trailingAddon : builtInMenu
-                    })
-                ]
-            }) : /*#__PURE__*/ jsxs(InputGroup, {
-                error: error,
-                errorId: validationId,
-                layout: 'multi-select' !== fieldType || locked ? 'row' : 'grow',
-                children: [
-                    (showLock || void 0 !== leadingAddon) && null !== leadingAddon && /*#__PURE__*/ jsx(InputGroupAddon, {
-                        align: "inline-start",
-                        children: void 0 !== leadingAddon ? leadingAddon : showLock && /*#__PURE__*/ jsx(LockToggleButton, {
-                            locked: locked,
-                            onLockedChange: onLockedChange,
-                            strings: strings
-                        })
-                    }),
-                    modeControl ?? (locked ? /*#__PURE__*/ jsx(InputGroupInput, {
-                        id: fieldId,
-                        readOnly: true,
-                        value: lockedDisplayValue,
-                        placeholder: valuePlaceholder,
-                        className: "min-w-0",
-                        onBlur: onValueBlur
-                    }) : 'single-select' === fieldType ? /*#__PURE__*/ jsxs(Select, {
-                        open: selectOpen,
-                        onOpenChange: (open)=>{
-                            setSelectOpen(open);
-                            if (!open && selectOpen) onValueBlur?.();
-                        },
-                        value: value || void 0,
-                        onValueChange: onValueChange,
-                        disabled: !onValueChange,
-                        children: [
-                            /*#__PURE__*/ jsx(SelectTrigger, {
-                                id: fieldId,
-                                children: /*#__PURE__*/ jsx(SelectValue, {
-                                    placeholder: strings.selectOption
-                                })
-                            }),
-                            /*#__PURE__*/ jsx(SelectContent, {
-                                children: options.map((option)=>/*#__PURE__*/ jsx(SelectItem, {
-                                        value: option.value,
-                                        children: option.label
-                                    }, option.value))
-                            })
-                        ]
-                    }) : 'multi-select' === fieldType ? /*#__PURE__*/ jsx(MultiSelect, {
-                        id: fieldId,
-                        options: options,
-                        selected: parseListValue(value),
-                        onChange: (selected)=>onValueChange?.(JSON.stringify(selected)),
-                        placeholder: strings.selectOptions,
-                        disabled: !onValueChange,
-                        onBlur: onValueBlur
-                    }) : null),
-                    null !== trailingAddon && (void 0 !== trailingAddon || builtInMenu) && /*#__PURE__*/ jsx(InputGroupAddon, {
+                    }) : literalControl),
+                    null !== trailingAddon && /*#__PURE__*/ jsx(InputGroupAddon, {
                         align: "inline-end",
                         className: "cursor-default",
                         children: void 0 !== trailingAddon ? trailingAddon : builtInMenu

package/dist/components/ui/quick-form-field/types.cjs

@@ -75,14 +75,14 @@ const FIELD_TYPE_META = {
     'single-select': {
         label: 'Single select',
         icon: external_lucide_react_namespaceObject.List,
-        supportsExpression: false,
+        supportsExpression: true,
         fixedLabel: 'Fixed value',
         fixedDescription: 'Choose one option'
     },
     'multi-select': {
         label: 'Multi select',
         icon: external_lucide_react_namespaceObject.ListChecks,
-        supportsExpression: false,
+        supportsExpression: true,
         fixedLabel: 'Fixed value',
         fixedDescription: 'Choose one or more options'
     },

package/dist/components/ui/quick-form-field/types.d.ts

@@ -6,6 +6,10 @@ export type QuickFieldType = 'string' | 'integer' | 'double' | 'date' | 'datetim
 interface FieldTypeMeta {
     label: string;
     icon: LucideIcon;
+    /**
+     * @deprecated Will expand mode support in future update. Currently unused.
+     * Removed in the next major release.
+     */
     supportsExpression: boolean;
     fixedLabel: string;
     fixedDescription: string;
@@ -32,8 +36,9 @@ export interface QuickFormFieldStrings {
     valueFieldLabel: (typeLabel: string) => string;
     /** The computed field name in expression mode, from the (localized) type label. */
     expressionFieldLabel: (typeLabel: string) => string;
-    /** A locked boolean's displayed text. */
+    /** @deprecated No longer rendered: a locked boolean keeps its Switch. Removed in the next major release. */
     trueLabel: string;
+    /** @deprecated No longer rendered: a locked boolean keeps its Switch. Removed in the next major release. */
     falseLabel: string;
     requiredTooltip: string;
     requiredAriaLabel: string;
@@ -99,33 +104,59 @@ export interface VariableInsertContext {
         end: number;
     } | null;
 }
+/** What a consumer-rendered value control receives from `renderModeControl` or `renderExpressionEditor`. */
+export interface QuickFormFieldControlProps {
+    id: string;
+    value: string;
+    /** Omitted while the field is disabled or has no `onValueChange`. */
+    onValueChange?: (value: string) => void;
+    onBlur?: () => void;
+    readOnly: boolean;
+    disabled: boolean;
+    placeholder: string;
+    fieldType: QuickFieldType;
+    'aria-invalid'?: AriaAttributes['aria-invalid'];
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
+    'data-slot'?: string;
+}
 export interface QuickFormFieldProps {
     /** Current field value. Encoding depends on fieldType (e.g. multi-select is a JSON array string). */
     value?: string;
-    /** Called when the user edits the value (only fires while unlocked). */
+    /** Called when the user edits the value. Never fires while `disabled`. */
     onValueChange?: (value: string) => void;
     /** Called when the active value control loses focus. */
     onValueBlur?: () => void;
-    /** Whether the field is read-only. Defaults to true. */
+    /**
+     * Whether the value is read-only for the person filling in the form. It is
+     * configuration the author sets, so the value stays editable here; use
+     * `disabled` to stop editing. Defaults to true.
+     */
     locked?: boolean;
     /** Called when the user toggles the lock. */
     onLockedChange?: (locked: boolean) => void;
     /** Whether the built-in lock control renders. Defaults to true. */
     showLock?: boolean;
+    /**
+     * Disables every built-in control: the value control, the lock, the mode and
+     * actions menu, and the header's type picker, Required switch, Insert
+     * variable and AI assist. `headerActions` are the consumer's to disable.
+     */
+    disabled?: boolean;
     /**
      * Replaces the leading lock toggle with a semantic prefix such as `=`.
      * Pass `null` to suppress the built-in toggle; omitting the prop preserves it.
      */
     leadingAddon?: ReactNode;
     /**
-     * Replaces the trailing fixed/expression menu with a consumer-provided action
-     * for expression-capable field types. Pass `null` to suppress the built-in
+     * Replaces the trailing fixed/expression menu with a consumer-provided
+     * action. Pass `null` to suppress the built-in
      * menu; omitting the prop preserves it.
      */
     trailingAddon?: ReactNode;
     /** Adds a field-level overflow menu beside the value control. */
     more?: QuickFormFieldMoreActions;
-    /** How the value is expressed. Defaults to 'literal'; `expression` falls back to `literal` for types that cannot hold one. */
+    /** How the value is expressed. Defaults to 'literal'. */
     mode?: QuickFormFieldMode;
     /** Called when the user switches modes. */
     onModeChange?: (mode: QuickFormFieldMode) => void;
@@ -137,19 +168,7 @@ export interface QuickFormFieldProps {
      * existing callers; `renderModeControl` wins when both are supplied and it
      * returns something for `expression`.
      */
-    renderExpressionEditor?: (props: {
-        id: string;
-        value: string;
-        onValueChange?: (value: string) => void;
-        onBlur?: () => void;
-        readOnly: boolean;
-        placeholder: string;
-        fieldType: QuickFieldType;
-        'aria-invalid'?: AriaAttributes['aria-invalid'];
-        'aria-describedby'?: string;
-        'aria-errormessage'?: string;
-        'data-slot'?: string;
-    }) => ReactNode;
+    renderExpressionEditor?: (props: QuickFormFieldControlProps) => ReactNode;
     /**
      * Renders the value control for a given mode, replacing the built-in one.
      * `variable` and `prompt` have no built-in editor, and a surface that authors
@@ -159,19 +178,7 @@ export interface QuickFormFieldProps {
      * for the field's type, so an unhandled mode degrades to the literal editor
      * rather than rendering an empty row.
      */
-    renderModeControl?: (mode: QuickFormFieldMode, props: {
-        id: string;
-        value: string;
-        onValueChange?: (value: string) => void;
-        onBlur?: () => void;
-        readOnly: boolean;
-        placeholder: string;
-        fieldType: QuickFieldType;
-        'aria-invalid'?: AriaAttributes['aria-invalid'];
-        'aria-describedby'?: string;
-        'aria-errormessage'?: string;
-        'data-slot'?: string;
-    }) => ReactNode;
+    renderModeControl?: (mode: QuickFormFieldMode, props: QuickFormFieldControlProps) => ReactNode;
     /**
      * Takes over what choosing a variable does to the value. The component owns
      * the picker and hands back the chosen entry exactly as supplied in

package/dist/components/ui/quick-form-field/types.js

@@ -45,14 +45,14 @@ const FIELD_TYPE_META = {
     'single-select': {
         label: 'Single select',
         icon: List,
-        supportsExpression: false,
+        supportsExpression: true,
         fixedLabel: 'Fixed value',
         fixedDescription: 'Choose one option'
     },
     'multi-select': {
         label: 'Multi select',
         icon: ListChecks,
-        supportsExpression: false,
+        supportsExpression: true,
         fixedLabel: 'Fixed value',
         fixedDescription: 'Choose one or more options'
     },