@uipath/apollo-wind 2.59.0 → 2.60.1

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

@@ -0,0 +1,3 @@
+import { QuickFormField } from "./quick-form-field.js";
+import { DEFAULT_QUICK_FORM_FIELD_STRINGS, FIELD_TYPE_META, FIELD_TYPE_ORDER } from "./types.js";
+export { DEFAULT_QUICK_FORM_FIELD_STRINGS, FIELD_TYPE_META, FIELD_TYPE_ORDER, QuickFormField };

package/dist/components/ui/{lockable-value-field/lockable-value-field.cjs → quick-form-field/quick-form-field.cjs}

@@ -24,13 +24,13 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    LockableValueField: ()=>LockableValueField
+    QuickFormField: ()=>QuickFormField
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
 const external_calendar_cjs_namespaceObject = require("../calendar.cjs");
-const external_dropdown_menu_cjs_namespaceObject = require("../dropdown-menu.cjs");
+const external_datetime_picker_cjs_namespaceObject = require("../datetime-picker.cjs");
 const external_file_upload_cjs_namespaceObject = require("../file-upload.cjs");
 const external_input_group_cjs_namespaceObject = require("../input-group.cjs");
 const external_multi_select_cjs_namespaceObject = require("../multi-select.cjs");
@@ -43,59 +43,113 @@ const field_header_cjs_namespaceObject = require("./components/field-header.cjs"
 const lock_toggle_button_cjs_namespaceObject = require("./components/lock-toggle-button.cjs");
 const external_types_cjs_namespaceObject = require("./types.cjs");
 const external_utils_cjs_namespaceObject = require("./utils.cjs");
-function MoreActionsMenu({ more, locked }) {
-    const onClear = locked ? void 0 : more.onClear;
-    const onRefresh = more.onRefresh;
-    if (!onClear && !onRefresh) return null;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenu, {
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuTrigger, {
-                asChild: true,
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupButton, {
-                    icon: true,
-                    size: "3xs",
-                    "aria-label": "More value actions",
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.MoreHorizontal, {})
-                })
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuContent, {
-                align: "end",
-                className: "w-40",
-                children: [
-                    onClear && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuItem, {
-                        className: "text-error focus:text-error",
-                        onClick: onClear,
-                        children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Trash2, {}),
-                            "Clear value"
-                        ]
-                    }),
-                    onRefresh && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuItem, {
-                        onClick: onRefresh,
-                        children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.RefreshCw, {}),
-                            "Force refresh"
-                        ]
-                    })
-                ]
-            })
-        ]
-    });
-}
-function LockableValueField({ value = '', onValueChange, onValueBlur, locked = true, onLockedChange, showLock = true, leadingAddon, trailingAddon, more, mode = 'fixed', onModeChange, renderExpressionEditor, fieldType = 'string', onFieldTypeChange, required, onRequiredChange, label, error, errorId, belowValue, fileUploadAriaLabel, headerActions, compact, showFieldActions = true, showAiAssist = true, options = external_utils_cjs_namespaceObject.DEFAULT_SELECT_OPTIONS, onGenerateWithAi, variables = [], id, className }) {
+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 = external_utils_cjs_namespaceObject.DEFAULT_SELECT_OPTIONS, onGenerateWithAi, onInsertVariable, variables = [], id, className }) {
+    const strings = (0, external_react_namespaceObject.useMemo)(()=>({
+            ...external_types_cjs_namespaceObject.DEFAULT_QUICK_FORM_FIELD_STRINGS,
+            ...stringOverrides
+        }), [
+        stringOverrides
+    ]);
     const generatedId = (0, external_react_namespaceObject.useId)().replace(/:/g, '');
+    const valueInputRef = (0, external_react_namespaceObject.useRef)(null);
+    const committedRef = (0, external_react_namespaceObject.useRef)(value);
+    const caretRef = (0, external_react_namespaceObject.useRef)(null);
     const [datePopoverOpen, setDatePopoverOpen] = (0, external_react_namespaceObject.useState)(false);
     const [selectOpen, setSelectOpen] = (0, external_react_namespaceObject.useState)(false);
     const fieldId = id ?? generatedId;
     const validationId = errorId ?? `${fieldId}-error`;
     const typeMeta = external_types_cjs_namespaceObject.FIELD_TYPE_META[fieldType];
-    const effectiveMode = typeMeta.supportsExpression ? mode : 'fixed';
+    const effectiveMode = 'expression' !== mode || typeMeta.supportsExpression ? mode : 'literal';
     const editableOnValueChange = locked ? void 0 : onValueChange;
-    const fieldTypeLabel = typeMeta.label.toLowerCase();
-    const expressionArticle = /^[aeiou]/.test(fieldTypeLabel) ? 'an' : 'a';
-    const fieldLabel = 'expression' === effectiveMode ? `Write ${expressionArticle} ${fieldTypeLabel} expression` : `${typeMeta.label} value`;
-    const hasMoreActions = Boolean(more?.onRefresh || !locked && more?.onClear);
-    const lockedDisplayValue = (0, external_utils_cjs_namespaceObject.getLockedDisplayValue)(fieldType, value, options);
+    const typeLabel = strings.typeLabels[fieldType] ?? typeMeta.label;
+    const fieldLabel = 'expression' === effectiveMode ? strings.expressionFieldLabel(typeLabel) : strings.valueFieldLabel(typeLabel);
+    const valuePlaceholder = placeholder ?? fieldLabel;
+    const menuActions = [
+        ...more?.onClear && !locked ? [
+            {
+                id: 'clear',
+                label: strings.clearValue,
+                icon: external_lucide_react_namespaceObject.Trash2,
+                onSelect: more.onClear
+            }
+        ] : [],
+        ...more?.onRefresh ? [
+            {
+                id: 'refresh',
+                label: strings.forceRefresh,
+                icon: external_lucide_react_namespaceObject.RefreshCw,
+                onSelect: more.onRefresh
+            }
+        ] : []
+    ];
+    const offersModes = typeMeta.supportsExpression && !!onModeChange;
+    const showsMenu = typeMeta.supportsExpression || menuActions.length > 0;
+    const builtInMenu = showsMenu ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(field_menu_cjs_namespaceObject.FieldMenu, {
+        mode: effectiveMode,
+        onSelect: (next)=>onModeChange?.(next),
+        modesDisabled: !offersModes && menuActions.length > 0,
+        disabled: !offersModes && 0 === menuActions.length,
+        actions: menuActions,
+        triggerLabel: strings.valueModeAriaLabel,
+        literalDescription: strings.literalDescriptions[fieldType] ?? typeMeta.fixedDescription,
+        strings: {
+            literalTitle: strings.literalLabels[fieldType] ?? typeMeta.fixedLabel,
+            expressionTitle: strings.expressionLabel,
+            expressionDescription: strings.expressionDescription,
+            fieldActions: strings.moreActionsAriaLabel
+        }
+    }) : null;
+    const modeControl = renderModeControl?.(mode, {
+        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'
+    }) ?? null;
+    const modeOnMount = (0, external_react_namespaceObject.useRef)(mode);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (modeOnMount.current === mode) return;
+        modeOnMount.current = mode;
+        valueInputRef.current?.focus();
+    }, [
+        mode
+    ]);
+    const handleValueKeyDown = (e)=>{
+        if ('Enter' === e.key) {
+            e.preventDefault();
+            e.currentTarget.blur();
+        }
+        if ('Escape' === e.key) {
+            e.preventDefault();
+            onValueChange?.(committedRef.current);
+            e.currentTarget.blur();
+        }
+    };
+    const insertVariableAtCaret = (insertText)=>{
+        const input = valueInputRef.current;
+        const caret = caretRef.current;
+        if (!input || !caret) return void onValueChange?.(value ? `${value} ${insertText}` : insertText);
+        const start = Math.min(caret.start, value.length);
+        const end = Math.min(Math.max(caret.end, start), value.length);
+        const next = value.slice(0, start) + insertText + value.slice(end);
+        onValueChange?.(next);
+        const next_caret = start + insertText.length;
+        caretRef.current = {
+            start: next_caret,
+            end: next_caret
+        };
+        requestAnimationFrame(()=>{
+            input.focus();
+            input.setSelectionRange(next_caret, next_caret);
+        });
+    };
+    const lockedDisplayValue = (0, external_utils_cjs_namespaceObject.getLockedDisplayValue)(fieldType, value, options, strings);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         className: (0, index_cjs_namespaceObject.cn)('@container group flex flex-col gap-1.5 [&>[data-slot=form-field-error]]:mt-0', className),
         children: [
@@ -105,36 +159,41 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                 fieldLabel: fieldLabel,
                 required: required,
                 fieldType: fieldType,
+                fieldTypes: fieldTypes,
                 onFieldTypeChange: onFieldTypeChange,
                 onRequiredChange: onRequiredChange,
                 compact: compact,
                 showFieldActions: showFieldActions,
-                showAiAssist: showAiAssist,
-                value: value,
                 onValueChange: editableOnValueChange,
                 variables: variables,
                 onGenerateWithAi: onGenerateWithAi,
-                headerActions: headerActions
+                onInsertVariable: (variable)=>onInsertVariable ? onInsertVariable(variable, {
+                        value,
+                        caret: caretRef.current
+                    }) : insertVariableAtCaret(variable.value),
+                headerActions: headerActions,
+                strings: strings
             }),
             typeMeta.supportsExpression ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_input_group_cjs_namespaceObject.InputGroup, {
                 error: error,
                 errorId: validationId,
-                className: (0, index_cjs_namespaceObject.cn)('file' === fieldType && !locked && 'fixed' === effectiveMode && 'h-auto items-stretch'),
+                layout: 'file' !== fieldType || locked || 'literal' !== effectiveMode ? 'row' : 'grow',
                 children: [
                     (showLock || void 0 !== leadingAddon) && null !== leadingAddon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupAddon, {
                         align: "inline-start",
                         children: void 0 !== leadingAddon ? leadingAddon : showLock && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(lock_toggle_button_cjs_namespaceObject.LockToggleButton, {
                             locked: locked,
-                            onLockedChange: onLockedChange
+                            onLockedChange: onLockedChange,
+                            strings: strings
                         })
                     }),
-                    'expression' === effectiveMode ? renderExpressionEditor ? renderExpressionEditor({
+                    modeControl ?? ('expression' === effectiveMode ? renderExpressionEditor ? renderExpressionEditor({
                         id: fieldId,
                         value,
                         onValueChange: editableOnValueChange,
                         onBlur: onValueBlur,
                         readOnly: !editableOnValueChange,
-                        placeholder: fieldLabel,
+                        placeholder: valuePlaceholder,
                         fieldType,
                         'aria-invalid': error ? true : void 0,
                         'aria-describedby': error ? validationId : void 0,
@@ -142,17 +201,39 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                         'data-slot': 'input-group-control'
                     }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupInput, {
                         id: fieldId,
+                        ref: valueInputRef,
                         readOnly: !editableOnValueChange,
                         value: value,
                         onChange: (e)=>editableOnValueChange?.(e.target.value),
-                        onBlur: onValueBlur,
-                        placeholder: fieldLabel,
+                        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,
                         className: "font-mono"
                     }) : locked ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupInput, {
                         id: fieldId,
                         readOnly: true,
                         value: lockedDisplayValue,
-                        placeholder: fieldLabel,
+                        placeholder: valuePlaceholder,
                         onBlur: onValueBlur
                     }) : 'boolean' === fieldType ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                         className: "flex h-full flex-1 items-center px-3",
@@ -186,7 +267,7 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                                     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 ? (0, external_utils_cjs_namespaceObject.formatDateValue)(value) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                                         className: "text-muted-foreground",
-                                        children: "Pick a date"
+                                        children: strings.pickDate
                                     })
                                 })
                             }),
@@ -201,6 +282,15 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                                 })
                             })
                         ]
+                    }) : 'datetime' === fieldType ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_datetime_picker_cjs_namespaceObject.DateTimePicker, {
+                        id: fieldId,
+                        value: (0, external_utils_cjs_namespaceObject.parseDateValue)(value),
+                        onValueChange: (date)=>onValueChange?.(date ? date.toISOString() : ''),
+                        onOpenChange: (open)=>{
+                            if (!open) onValueBlur?.();
+                        },
+                        disabled: !onValueChange,
+                        placeholder: valuePlaceholder
                     }) : 'file' === fieldType ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_file_upload_cjs_namespaceObject.FileUpload, {
                         id: fieldId,
                         ariaLabel: fileUploadAriaLabel ?? ('string' == typeof label ? label : fieldLabel),
@@ -213,76 +303,60 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                         "aria-errormessage": error ? validationId : void 0
                     }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupInput, {
                         id: fieldId,
-                        type: 'integer' === fieldType ? 'number' : 'text',
+                        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),
-                        onBlur: onValueBlur,
-                        placeholder: fieldLabel
-                    }),
-                    null !== trailingAddon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupAddon, {
+                        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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupAddon, {
                         align: "inline-end",
                         className: "cursor-default",
-                        children: void 0 !== trailingAddon ? trailingAddon : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
-                            children: [
-                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenu, {
-                                    children: [
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuTrigger, {
-                                            asChild: true,
-                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupButton, {
-                                                icon: true,
-                                                size: "3xs",
-                                                disabled: !onModeChange,
-                                                "aria-label": "Choose value type",
-                                                children: 'expression' === effectiveMode ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Code2, {}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Type, {})
-                                            })
-                                        }),
-                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuContent, {
-                                            align: "end",
-                                            className: "w-56",
-                                            children: [
-                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(field_menu_cjs_namespaceObject.ValueModeMenuItem, {
-                                                    icon: external_lucide_react_namespaceObject.Type,
-                                                    label: typeMeta.fixedLabel,
-                                                    description: typeMeta.fixedDescription,
-                                                    active: 'fixed' === effectiveMode,
-                                                    onClick: ()=>onModeChange?.('fixed')
-                                                }),
-                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(field_menu_cjs_namespaceObject.ValueModeMenuItem, {
-                                                    icon: external_lucide_react_namespaceObject.Code2,
-                                                    label: "Expression",
-                                                    description: "Use a JS expression",
-                                                    active: 'expression' === effectiveMode,
-                                                    onClick: ()=>onModeChange?.('expression')
-                                                })
-                                            ]
-                                        })
-                                    ]
-                                }),
-                                hasMoreActions && more && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MoreActionsMenu, {
-                                    more: more,
-                                    locked: locked
-                                })
-                            ]
-                        })
+                        children: void 0 !== trailingAddon ? trailingAddon : builtInMenu
                     })
                 ]
             }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_input_group_cjs_namespaceObject.InputGroup, {
                 error: error,
                 errorId: validationId,
+                layout: 'multi-select' !== fieldType || locked ? 'row' : 'grow',
                 children: [
                     (showLock || void 0 !== leadingAddon) && null !== leadingAddon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupAddon, {
                         align: "inline-start",
                         children: void 0 !== leadingAddon ? leadingAddon : showLock && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(lock_toggle_button_cjs_namespaceObject.LockToggleButton, {
                             locked: locked,
-                            onLockedChange: onLockedChange
+                            onLockedChange: onLockedChange,
+                            strings: strings
                         })
                     }),
-                    locked ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupInput, {
+                    modeControl ?? (locked ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupInput, {
                         id: fieldId,
                         readOnly: true,
                         value: lockedDisplayValue,
-                        placeholder: fieldLabel,
+                        placeholder: valuePlaceholder,
                         className: "min-w-0",
                         onBlur: onValueBlur
                     }) : 'single-select' === fieldType ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_select_cjs_namespaceObject.Select, {
@@ -298,7 +372,7 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_select_cjs_namespaceObject.SelectTrigger, {
                                 id: fieldId,
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_select_cjs_namespaceObject.SelectValue, {
-                                    placeholder: "Select an option"
+                                    placeholder: strings.selectOption
                                 })
                             }),
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_select_cjs_namespaceObject.SelectContent, {
@@ -313,17 +387,14 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
                         options: options,
                         selected: (0, external_utils_cjs_namespaceObject.parseListValue)(value),
                         onChange: (selected)=>onValueChange?.(JSON.stringify(selected)),
-                        placeholder: "Select options...",
+                        placeholder: strings.selectOptions,
                         disabled: !onValueChange,
                         onBlur: onValueBlur
-                    }) : null,
-                    hasMoreActions && more && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupAddon, {
+                    }) : null),
+                    null !== trailingAddon && (void 0 !== trailingAddon || builtInMenu) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupAddon, {
                         align: "inline-end",
                         className: "cursor-default",
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MoreActionsMenu, {
-                            more: more,
-                            locked: locked
-                        })
+                        children: void 0 !== trailingAddon ? trailingAddon : builtInMenu
                     })
                 ]
             }),
@@ -331,9 +402,9 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
         ]
     });
 }
-exports.LockableValueField = __webpack_exports__.LockableValueField;
+exports.QuickFormField = __webpack_exports__.QuickFormField;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "LockableValueField"
+    "QuickFormField"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

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

@@ -0,0 +1,26 @@
+import type { QuickFormFieldProps } from './types';
+/**
+ * A Quick Form is assembled by end users, like a form builder. QuickFormField is
+ * the control for an individual field within it, and carries its own
+ * configuration controls: a lock that makes it read-only, a data-type switch
+ * that swaps the control, a Required toggle, and a value-mode switch across
+ * `literal`, `expression`, `variable` and `prompt`.
+ *
+ * Only use it within a quick form builder. For standard forms, compose the
+ * form-field anatomy (`FormField`, `FormFieldLabel`, `InputGroup`, …) or
+ * describe them to `MetadataForm`.
+ *
+ * - Literal and expression have built-in controls; `renderModeControl`
+ *   supplies the control for any mode, and `variable` / `prompt` need it.
+ * - `fieldTypes` chooses which types the picker offers.
+ * - Insert variable renders `variables` as supplied and splices at the caret;
+ *   `onInsertVariable` takes over what inserting means.
+ * - Enter commits through `onValueBlur`, Escape restores the value as of focus.
+ * - Every user-visible string can be overridden through `strings`.
+ *
+ * The expression mode is styled as code but not highlighted or evaluated.
+ * Select options default to a small demo set unless `options` is provided. The
+ * AI-assist button renders only with `onGenerateWithAi`, and file uploads
+ * aren't persisted anywhere.
+ */
+export declare function QuickFormField({ value, onValueChange, onValueBlur, locked, onLockedChange, showLock, leadingAddon, trailingAddon, more, mode, onModeChange, renderExpressionEditor, renderModeControl, fieldType, fieldTypes, onFieldTypeChange, required, onRequiredChange, label, strings: stringOverrides, placeholder, error, errorId, belowValue, fileUploadAriaLabel, headerActions, compact, showFieldActions, options, onGenerateWithAi, onInsertVariable, variables, id, className, }: QuickFormFieldProps): import("react/jsx-runtime").JSX.Element;