@uipath/apollo-wind 2.69.0 → 2.71.0

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

@@ -11,7 +11,7 @@ import { AiAssistAction } from "../../field-actions/ai-assist-action.js";
 import { COLLAPSED_HIDDEN, COLLAPSED_ICON_PADDING, COLLAPSED_ONLY } from "../../field-actions/collapse.js";
 import { InsertVariableAction } from "../../field-actions/insert-variable-action.js";
 import { FIELD_TYPE_META, FIELD_TYPE_ORDER } from "../types.js";
-function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTypes = FIELD_TYPE_ORDER, onFieldTypeChange, onRequiredChange, compact, showFieldActions, onValueChange, variables, onGenerateWithAi, onInsertVariable, strings, headerActions }) {
+function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTypes = FIELD_TYPE_ORDER, onFieldTypeChange, onRequiredChange, compact, disabled, isExpression, showFieldActions, onValueChange, variables, onGenerateWithAi, onInsertVariable, strings, headerActions }) {
     const [pickerItems, optionsBySelectionId] = useMemo(()=>{
         const byId = new Map();
         const toItem = (v, id)=>{
@@ -69,7 +69,8 @@ function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTyp
                                                     children: /*#__PURE__*/ jsxs("button", {
                                                         type: "button",
                                                         "aria-label": strings.fieldTypeAriaLabel,
-                                                        className: cn('flex h-7 items-center gap-1 rounded-lg px-2 text-[11px] text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground', collapsedPaddingClass),
+                                                        disabled: disabled,
+                                                        className: cn('flex h-7 items-center gap-1 rounded-lg px-2 text-[11px] text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground disabled:pointer-events-none disabled:opacity-50', collapsedPaddingClass),
                                                         children: [
                                                             /*#__PURE__*/ jsx(typeMeta.icon, {
                                                                 size: 12
@@ -127,6 +128,7 @@ function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTyp
                                                             size: "sm",
                                                             checked: !!required,
                                                             onCheckedChange: onRequiredChange,
+                                                            disabled: disabled,
                                                             className: "data-[state=checked]:bg-brand data-[state=unchecked]:bg-foreground-subtle",
                                                             "aria-label": required ? strings.requiredAriaLabel : strings.optionalAriaLabel
                                                         })
@@ -151,7 +153,8 @@ function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTyp
                                                                 children: /*#__PURE__*/ jsx("button", {
                                                                     type: "button",
                                                                     "aria-label": required ? strings.requiredAriaLabel : strings.optionalAriaLabel,
-                                                                    className: "grid size-7 place-items-center rounded-lg text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground",
+                                                                    disabled: disabled,
+                                                                    className: "grid size-7 place-items-center rounded-lg text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground disabled:pointer-events-none disabled:opacity-50",
                                                                     children: /*#__PURE__*/ jsx(Asterisk, {
                                                                         size: 12
                                                                     })
@@ -177,6 +180,7 @@ function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTyp
                                                                 size: "sm",
                                                                 checked: !!required,
                                                                 onCheckedChange: onRequiredChange,
+                                                                disabled: disabled,
                                                                 className: "data-[state=checked]:bg-brand data-[state=unchecked]:bg-foreground-subtle",
                                                                 "aria-label": required ? strings.requiredAriaLabel : strings.optionalAriaLabel
                                                             })
@@ -192,7 +196,8 @@ function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTyp
                                 children: [
                                     onGenerateWithAi && /*#__PURE__*/ jsx(AiAssistAction, {
                                         onGenerate: onGenerateWithAi,
-                                        hint: strings.aiOutputHint(strings.aiOutputLabel(typeLabel, typeMeta.supportsExpression)),
+                                        disabled: disabled,
+                                        hint: strings.aiOutputHint(strings.aiOutputLabel(typeLabel, isExpression)),
                                         strings: {
                                             trigger: strings.aiAssistAriaLabel,
                                             tooltip: strings.aiAssistTooltip,

package/dist/components/ui/quick-form-field/components/lock-toggle-button.cjs

@@ -30,8 +30,8 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_lucide_react_namespaceObject = require("lucide-react");
 const external_input_group_cjs_namespaceObject = require("../../input-group.cjs");
 const external_tooltip_cjs_namespaceObject = require("../../tooltip.cjs");
-function LockToggleButton({ locked, onLockedChange, strings }) {
-    const interactive = !!onLockedChange;
+function LockToggleButton({ locked, onLockedChange, disabled, strings }) {
+    const interactive = !!onLockedChange && !disabled;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipProvider, {
         delayDuration: 300,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_tooltip_cjs_namespaceObject.Tooltip, {

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

@@ -1,12 +1,13 @@
 import type { QuickFormFieldStrings } from '../types';
 /**
- * The lock/unlock toggle shared by both the InputGroup and plain-Input
- * layouts. Disabled (and its label adjusted) when onLockedChange isn't
- * provided, since clicking it wouldn't do anything otherwise.
+ * The lock/unlock toggle in the field's leading addon. Disabled (and its label
+ * adjusted) with the field, or when onLockedChange isn't provided, since
+ * clicking it wouldn't do anything otherwise.
  */
-export declare function LockToggleButton({ locked, onLockedChange, strings, }: {
+export declare function LockToggleButton({ locked, onLockedChange, disabled, strings, }: {
     locked: boolean;
     onLockedChange?: (locked: boolean) => void;
+    disabled?: boolean;
     /** See QuickFormFieldStrings. */
     strings: QuickFormFieldStrings;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/quick-form-field/components/lock-toggle-button.js

@@ -2,8 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { LockKeyhole, LockKeyholeOpen } from "lucide-react";
 import { InputGroupButton } from "../../input-group.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../tooltip.js";
-function LockToggleButton({ locked, onLockedChange, strings }) {
-    const interactive = !!onLockedChange;
+function LockToggleButton({ locked, onLockedChange, disabled, strings }) {
+    const interactive = !!onLockedChange && !disabled;
     return /*#__PURE__*/ jsx(TooltipProvider, {
         delayDuration: 300,
         children: /*#__PURE__*/ jsxs(Tooltip, {

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

@@ -1,3 +1,3 @@
 export { QuickFormField } from './quick-form-field';
-export type { QuickFieldType, QuickFormFieldMode, QuickFormFieldMoreActions, QuickFormFieldOption, QuickFormFieldProps, QuickFormFieldStrings, VariableInsertContext, } from './types';
+export type { QuickFieldType, QuickFormFieldControlProps, QuickFormFieldMode, QuickFormFieldMoreActions, QuickFormFieldOption, QuickFormFieldProps, QuickFormFieldStrings, VariableInsertContext, } from './types';
 export { DEFAULT_QUICK_FORM_FIELD_STRINGS, FIELD_TYPE_META, FIELD_TYPE_ORDER } from './types';

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

@@ -38,12 +38,13 @@ const external_popover_cjs_namespaceObject = require("../popover.cjs");
 const external_select_cjs_namespaceObject = require("../select.cjs");
 const external_switch_cjs_namespaceObject = require("../switch.cjs");
 const index_cjs_namespaceObject = require("../../../lib/index.cjs");
+const date_value_cjs_namespaceObject = require("../../../lib/date-value.cjs");
 const field_menu_cjs_namespaceObject = require("../field-addons/field-menu.cjs");
 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 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 }) {
+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 = 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
@@ -59,13 +60,12 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
     const fieldId = id ?? generatedId;
     const validationId = errorId ?? `${fieldId}-error`;
     const typeMeta = external_types_cjs_namespaceObject.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,
@@ -82,13 +82,11 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
             }
         ] : []
     ];
-    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,
+    const builtInMenu = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(field_menu_cjs_namespaceObject.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,
@@ -98,20 +96,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 = (0, external_react_namespaceObject.useRef)(mode);
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (modeOnMount.current === mode) return;
@@ -127,7 +127,7 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
         }
         if ('Escape' === e.key) {
             e.preventDefault();
-            onValueChange?.(committedRef.current);
+            editableOnValueChange?.(committedRef.current);
             e.currentTarget.blur();
         }
     };
@@ -149,7 +149,139 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
             input.setSelectionRange(next_caret, next_caret);
         });
     };
-    const lockedDisplayValue = (0, external_utils_cjs_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "flex h-full flex-1 items-center px-3",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_switch_cjs_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
+        open: datePopoverOpen,
+        onOpenChange: (open)=>{
+            setDatePopoverOpen(open);
+            if (!open) onValueBlur?.();
+        },
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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 ? (0, external_utils_cjs_namespaceObject.formatDateValue)(value) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: "text-muted-foreground",
+                        children: strings.pickDate
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverContent, {
+                align: "start",
+                className: "w-auto p-0",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_calendar_cjs_namespaceObject.Calendar, {
+                    mode: "single",
+                    selected: (0, date_value_cjs_namespaceObject.toDateValue)(value),
+                    onSelect: (date)=>editableOnValueChange?.(date ? (0, external_utils_cjs_namespaceObject.toDateOnlyString)(date) : ''),
+                    initialFocus: true
+                })
+            })
+        ]
+    }) : 'datetime' === fieldType ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_datetime_picker_cjs_namespaceObject.DateTimePicker, {
+        id: fieldId,
+        value: (0, date_value_cjs_namespaceObject.toDateValue)(value),
+        onValueChange: (date)=>editableOnValueChange?.(date ? date.toISOString() : ''),
+        onOpenChange: (open)=>{
+            if (!open) onValueBlur?.();
+        },
+        disabled: !editableOnValueChange,
+        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),
+        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__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_select_cjs_namespaceObject.Select, {
+        open: selectOpen,
+        onOpenChange: (open)=>{
+            setSelectOpen(open);
+            if (!open && selectOpen) onValueBlur?.();
+        },
+        value: value || void 0,
+        onValueChange: editableOnValueChange,
+        disabled: !editableOnValueChange,
+        children: [
+            /*#__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: strings.selectOption
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_select_cjs_namespaceObject.SelectContent, {
+                children: options.map((option)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_select_cjs_namespaceObject.SelectItem, {
+                        value: option.value,
+                        children: option.label
+                    }, option.value))
+            })
+        ]
+    }) : 'multi-select' === fieldType ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_multi_select_cjs_namespaceObject.MultiSelect, {
+        id: fieldId,
+        options: options,
+        selected: (0, external_utils_cjs_namespaceObject.parseListValue)(value),
+        onChange: (selected)=>editableOnValueChange?.(JSON.stringify(selected)),
+        placeholder: strings.selectOptions,
+        disabled: !editableOnValueChange,
+        onBlur: onValueBlur
+    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupInput, {
+        ...textInputProps,
+        type: 'integer' === fieldType || 'double' === fieldType ? 'number' : 'text',
+        step: 'double' === fieldType ? 'any' : void 0
+    });
     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: [
@@ -163,6 +295,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,
@@ -174,224 +308,26 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
                 headerActions: headerActions,
                 strings: strings
             }),
-            typeMeta.supportsExpression ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_input_group_cjs_namespaceObject.InputGroup, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_input_group_cjs_namespaceObject.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__*/ (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,
+                            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__*/ (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),
-                        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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupInput, {
+                        ...textInputProps,
                         className: "font-mono"
-                    }) : locked ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupInput, {
-                        id: fieldId,
-                        readOnly: true,
-                        value: lockedDisplayValue,
-                        placeholder: valuePlaceholder,
-                        onBlur: onValueBlur
-                    }) : 'boolean' === fieldType ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                        className: "flex h-full flex-1 items-center px-3",
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_switch_cjs_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
-                        open: datePopoverOpen,
-                        onOpenChange: (open)=>{
-                            setDatePopoverOpen(open);
-                            if (!open) onValueBlur?.();
-                        },
-                        children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
-                                asChild: true,
-                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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 ? (0, external_utils_cjs_namespaceObject.formatDateValue)(value) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                        className: "text-muted-foreground",
-                                        children: strings.pickDate
-                                    })
-                                })
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverContent, {
-                                align: "start",
-                                className: "w-auto p-0",
-                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_calendar_cjs_namespaceObject.Calendar, {
-                                    mode: "single",
-                                    selected: (0, external_utils_cjs_namespaceObject.parseDateValue)(value),
-                                    onSelect: (date)=>onValueChange?.(date ? (0, external_utils_cjs_namespaceObject.toDateOnlyString)(date) : ''),
-                                    initialFocus: true
-                                })
-                            })
-                        ]
-                    }) : '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),
-                        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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupAddon, {
-                        align: "inline-end",
-                        className: "cursor-default",
-                        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,
-                            strings: strings
-                        })
-                    }),
-                    modeControl ?? (locked ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupInput, {
-                        id: fieldId,
-                        readOnly: true,
-                        value: lockedDisplayValue,
-                        placeholder: valuePlaceholder,
-                        className: "min-w-0",
-                        onBlur: onValueBlur
-                    }) : 'single-select' === fieldType ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_select_cjs_namespaceObject.Select, {
-                        open: selectOpen,
-                        onOpenChange: (open)=>{
-                            setSelectOpen(open);
-                            if (!open && selectOpen) onValueBlur?.();
-                        },
-                        value: value || void 0,
-                        onValueChange: onValueChange,
-                        disabled: !onValueChange,
-                        children: [
-                            /*#__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: strings.selectOption
-                                })
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_select_cjs_namespaceObject.SelectContent, {
-                                children: options.map((option)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_select_cjs_namespaceObject.SelectItem, {
-                                        value: option.value,
-                                        children: option.label
-                                    }, option.value))
-                            })
-                        ]
-                    }) : 'multi-select' === fieldType ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_multi_select_cjs_namespaceObject.MultiSelect, {
-                        id: fieldId,
-                        options: options,
-                        selected: (0, external_utils_cjs_namespaceObject.parseListValue)(value),
-                        onChange: (selected)=>onValueChange?.(JSON.stringify(selected)),
-                        placeholder: strings.selectOptions,
-                        disabled: !onValueChange,
-                        onBlur: onValueBlur
-                    }) : null),
-                    null !== trailingAddon && (void 0 !== trailingAddon || builtInMenu) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupAddon, {
+                    }) : literalControl),
+                    null !== trailingAddon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupAddon, {
                         align: "inline-end",
                         className: "cursor-default",
                         children: void 0 !== trailingAddon ? trailingAddon : builtInMenu

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

@@ -2,9 +2,9 @@ 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`.
+ * configuration controls: a lock that marks it read-only for the person filling
+ * in the form, 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
@@ -12,6 +12,8 @@ import type { QuickFormFieldProps } from './types';
  *
  * - Literal and expression have built-in controls; `renderModeControl`
  *   supplies the control for any mode, and `variable` / `prompt` need it.
+ * - `locked` is configuration the author sets, so the value stays editable;
+ *   `disabled` is what stops the author editing the field.
  * - `fieldTypes` chooses which types the picker offers.
  * - Insert variable renders `variables` as supplied and splices at the caret;
  *   `onInsertVariable` takes over what inserting means.
@@ -23,4 +25,4 @@ import type { QuickFormFieldProps } from './types';
  * 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;
+export declare function QuickFormField({ value, onValueChange, onValueBlur, locked, onLockedChange, showLock, disabled, 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;