@uipath/apollo-wind 2.79.2 → 2.80.0

package/dist/components/ui/index.d.ts

@@ -31,6 +31,7 @@ export * from './drawer';
 export * from './dropdown-menu';
 export * from './dropzone-overlay';
 export * from './editable-cell';
+export * from './editable-text';
 export * from './empty-state';
 export * from './field-actions';
 export * from './field-addons';

package/dist/components/ui/index.js

@@ -34,6 +34,7 @@ export * from "./drawer.js";
 export * from "./dropdown-menu.js";
 export * from "./dropzone-overlay.js";
 export * from "./editable-cell.js";
+export * from "./editable-text.js";
 export * from "./empty-state.js";
 export * from "./field-actions/index.js";
 export * from "./field-addons/index.js";

package/dist/components/ui/input-group.cjs

@@ -64,13 +64,17 @@ const BOXED = [
     'outline',
     'agent'
 ];
+const ADDON_BUTTON_TRIMS = 'has-[>[data-slot=input-group-addon][data-align=inline-start]_button]:pl-2 has-[>[data-slot=input-group-addon][data-align=inline-end]_button]:pr-2';
 const inputGroupVariants = (0, external_class_variance_authority_namespaceObject.cva)([
     'group/input-group relative flex w-full items-center gap-2 transition-colors has-[>textarea]:h-auto has-[>textarea]:items-start',
     'has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:opacity-50'
 ], {
     variants: {
         size: {
-            default: 'h-9 rounded-md px-3 py-1 future:h-10 future:rounded-xl future:py-2 has-[>[data-slot=input-group-addon][data-align=inline-end]]:pr-2 future:has-[>[data-slot=input-group-addon][data-align=inline-end]]:pr-2',
+            default: [
+                'h-9 rounded-md px-3 py-1 future:h-10 future:rounded-xl future:py-2',
+                ADDON_BUTTON_TRIMS
+            ],
             xs: 'h-6 gap-1 rounded px-2'
         },
         layout: {
@@ -99,7 +103,7 @@ const inputGroupVariants = (0, external_class_variance_authority_namespaceObject
         {
             variant: 'none',
             layout: ROW_LAYOUTS,
-            class: 'px-0 pr-3'
+            class: 'px-0'
         },
         {
             layout: ROW_LAYOUTS,
@@ -257,7 +261,7 @@ const InputGroupRow = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ref: ref,
         "data-slot": "input-group-row",
-        className: (0, index_cjs_namespaceObject.cn)('flex min-h-9 min-w-0 items-stretch gap-2 px-3 has-[>[data-slot=input-group-addon][data-align=inline-end]]:pr-2 future:min-h-10', 'rounded-[inherit] has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-inset has-[[data-slot=input-group-control]_:focus-visible]:ring-2 has-[[data-slot=input-group-control]_:focus-visible]:ring-inset has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]:focus-visible]:ring-error has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]_:focus-visible]:ring-error', flagged ? 'has-[[data-slot=input-group-control]:focus-visible]:ring-error has-[[data-slot=input-group-control]_:focus-visible]:ring-error' : 'has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]_:focus-visible]:ring-ring future:has-[[data-slot=input-group-control]:focus-visible]:ring-primary future:has-[[data-slot=input-group-control]_:focus-visible]:ring-primary', className),
+        className: (0, index_cjs_namespaceObject.cn)('flex min-h-9 min-w-0 items-stretch gap-2 px-3 future:min-h-10', ADDON_BUTTON_TRIMS, 'rounded-[inherit] has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-inset has-[[data-slot=input-group-control]_:focus-visible]:ring-2 has-[[data-slot=input-group-control]_:focus-visible]:ring-inset has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]:focus-visible]:ring-error has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]_:focus-visible]:ring-error', flagged ? 'has-[[data-slot=input-group-control]:focus-visible]:ring-error has-[[data-slot=input-group-control]_:focus-visible]:ring-error' : 'has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]_:focus-visible]:ring-ring future:has-[[data-slot=input-group-control]:focus-visible]:ring-primary future:has-[[data-slot=input-group-control]_:focus-visible]:ring-primary', className),
         ...props
     });
 });

package/dist/components/ui/input-group.d.ts

@@ -53,7 +53,7 @@ export interface InputGroupRowProps extends React.HTMLAttributes<HTMLDivElement>
 }
 /**
  * The first row of a `layout="block"` group, holding the control and its addons. The box has no
- * padding in that layout, so the row carries the box's usual padding and trailing trim. Padding the
+ * padding in that layout, so the row carries the box's usual padding and addon trims. Padding the
  * control instead would inset its caret out of line with other fields.
  */
 declare const InputGroupRow: React.ForwardRefExoticComponent<InputGroupRowProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/input-group.js

@@ -25,13 +25,17 @@ const BOXED = [
     'outline',
     'agent'
 ];
+const ADDON_BUTTON_TRIMS = 'has-[>[data-slot=input-group-addon][data-align=inline-start]_button]:pl-2 has-[>[data-slot=input-group-addon][data-align=inline-end]_button]:pr-2';
 const inputGroupVariants = cva([
     'group/input-group relative flex w-full items-center gap-2 transition-colors has-[>textarea]:h-auto has-[>textarea]:items-start',
     'has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:opacity-50'
 ], {
     variants: {
         size: {
-            default: 'h-9 rounded-md px-3 py-1 future:h-10 future:rounded-xl future:py-2 has-[>[data-slot=input-group-addon][data-align=inline-end]]:pr-2 future:has-[>[data-slot=input-group-addon][data-align=inline-end]]:pr-2',
+            default: [
+                'h-9 rounded-md px-3 py-1 future:h-10 future:rounded-xl future:py-2',
+                ADDON_BUTTON_TRIMS
+            ],
             xs: 'h-6 gap-1 rounded px-2'
         },
         layout: {
@@ -60,7 +64,7 @@ const inputGroupVariants = cva([
         {
             variant: 'none',
             layout: ROW_LAYOUTS,
-            class: 'px-0 pr-3'
+            class: 'px-0'
         },
         {
             layout: ROW_LAYOUTS,
@@ -218,7 +222,7 @@ const InputGroupRow = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
         "data-slot": "input-group-row",
-        className: cn('flex min-h-9 min-w-0 items-stretch gap-2 px-3 has-[>[data-slot=input-group-addon][data-align=inline-end]]:pr-2 future:min-h-10', 'rounded-[inherit] has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-inset has-[[data-slot=input-group-control]_:focus-visible]:ring-2 has-[[data-slot=input-group-control]_:focus-visible]:ring-inset has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]:focus-visible]:ring-error has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]_:focus-visible]:ring-error', flagged ? 'has-[[data-slot=input-group-control]:focus-visible]:ring-error has-[[data-slot=input-group-control]_:focus-visible]:ring-error' : 'has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]_:focus-visible]:ring-ring future:has-[[data-slot=input-group-control]:focus-visible]:ring-primary future:has-[[data-slot=input-group-control]_:focus-visible]:ring-primary', className),
+        className: cn('flex min-h-9 min-w-0 items-stretch gap-2 px-3 future:min-h-10', ADDON_BUTTON_TRIMS, 'rounded-[inherit] has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-inset has-[[data-slot=input-group-control]_:focus-visible]:ring-2 has-[[data-slot=input-group-control]_:focus-visible]:ring-inset has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]:focus-visible]:ring-error has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]_:focus-visible]:ring-error', flagged ? 'has-[[data-slot=input-group-control]:focus-visible]:ring-error has-[[data-slot=input-group-control]_:focus-visible]:ring-error' : 'has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]_:focus-visible]:ring-ring future:has-[[data-slot=input-group-control]:focus-visible]:ring-primary future:has-[[data-slot=input-group-control]_:focus-visible]:ring-primary', className),
         ...props
     });
 });

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

@@ -24,14 +24,15 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    GROW_WHILE_EDITING: ()=>GROW_WHILE_EDITING,
     FieldHeader: ()=>FieldHeader
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_lucide_react_namespaceObject = require("lucide-react");
-const external_react_namespaceObject = require("react");
 const external_button_cjs_namespaceObject = require("../../button.cjs");
 const external_dropdown_menu_cjs_namespaceObject = require("../../dropdown-menu.cjs");
 const external_form_field_cjs_namespaceObject = require("../../form-field.cjs");
+const external_info_tooltip_cjs_namespaceObject = require("../../info-tooltip.cjs");
 const external_popover_cjs_namespaceObject = require("../../popover.cjs");
 const external_switch_cjs_namespaceObject = require("../../switch.cjs");
 const external_tooltip_cjs_namespaceObject = require("../../tooltip.cjs");
@@ -40,47 +41,50 @@ const ai_assist_action_cjs_namespaceObject = require("../../field-actions/ai-ass
 const collapse_cjs_namespaceObject = require("../../field-actions/collapse.cjs");
 const insert_variable_action_cjs_namespaceObject = require("../../field-actions/insert-variable-action.cjs");
 const external_types_cjs_namespaceObject = require("../types.cjs");
-function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTypes = external_types_cjs_namespaceObject.FIELD_TYPE_ORDER, onFieldTypeChange, onRequiredChange, compact, disabled, isExpression, showFieldActions, onValueChange, variables, onGenerateWithAi, onInsertVariable, strings, headerActions }) {
-    const [pickerItems, optionsBySelectionId] = (0, external_react_namespaceObject.useMemo)(()=>{
-        const byId = new Map();
-        const toItem = (v, id)=>{
-            byId.set(id, v);
-            return {
-                id,
-                label: v.label,
-                ...v.value ? {
-                    value: v.value
-                } : {},
-                ...v.type ? {
-                    type: v.type
-                } : {},
-                ...v.children ? {
-                    children: v.children.map((c, i)=>toItem(c, `${id}/${i}`))
-                } : {}
-            };
-        };
-        return [
-            variables.map((v, i)=>toItem(v, String(i))),
-            byId
-        ];
-    }, [
-        variables
-    ]);
+const GROW_WHILE_EDITING = 'has-[[data-slot=editable-text-input]]:flex-1';
+function FieldHeader({ label, labelAddon, tooltip, fieldId, fieldLabel, required, fieldType, fieldTypes = external_types_cjs_namespaceObject.FIELD_TYPE_ORDER, onFieldTypeChange, onRequiredChange, compact, disabled, isExpression, showFieldActions, onValueChange, variables, onGenerateWithAi, onInsertVariable, strings, headerActions }) {
     const typeMeta = external_types_cjs_namespaceObject.FIELD_TYPE_META[fieldType];
     const typeLabel = strings.typeLabels[fieldType] ?? typeMeta.label;
     const collapsedTextClass = (0, index_cjs_namespaceObject.cn)(collapse_cjs_namespaceObject.COLLAPSED_HIDDEN, compact && '!hidden');
     const compactOnlyClass = (0, index_cjs_namespaceObject.cn)(collapse_cjs_namespaceObject.COLLAPSED_ONLY, compact && '!flex');
     const hasActions = !!onFieldTypeChange || !!onRequiredChange || showFieldActions || null != headerActions;
-    if (null != label && !hasActions) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
-        children: label
-    });
+    const hasTooltip = null != tooltip && false !== tooltip && !('string' == typeof tooltip && !tooltip.trim());
+    const ownLabel = null != label && hasTooltip ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+        className: (0, index_cjs_namespaceObject.cn)('flex min-w-0 items-center', GROW_WHILE_EDITING, '[&:has([data-slot=editable-text-input])>[data-slot=info-tooltip]]:hidden'),
+        children: [
+            label,
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_info_tooltip_cjs_namespaceObject.InfoTooltip, {
+                content: tooltip,
+                "aria-label": strings.tooltipAriaLabel
+            })
+        ]
+    }) : label;
+    const leading = null != labelAddon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            labelAddon,
+            ownLabel
+        ]
+    }) : ownLabel;
+    if (null != label && !hasActions) {
+        const alone = null != labelAddon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            className: (0, index_cjs_namespaceObject.cn)('flex min-w-0 items-center gap-2', GROW_WHILE_EDITING),
+            children: leading
+        }) : ownLabel;
+        return hasTooltip ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipProvider, {
+            delayDuration: 300,
+            children: alone
+        }) : alone;
+    }
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipProvider, {
         delayDuration: 300,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldHeader, {
+            className: "[&:has([data-slot=editable-text-input])>:first-child]:flex-1 [&:has([data-slot=editable-text-input])>:nth-child(2)]:!hidden",
             label: null == label ? fieldLabel : void 0,
             htmlFor: fieldId,
             required: required,
-            leading: label,
+            tooltip: null == label ? tooltip : void 0,
+            tooltipAriaLabel: strings.tooltipAriaLabel,
+            leading: leading,
             actions: hasActions ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
@@ -236,8 +240,8 @@ function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTyp
                                             error: strings.aiError
                                         }
                                     }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(insert_variable_action_cjs_namespaceObject.InsertVariableAction, {
-                                        variables: pickerItems,
+                                    onInsertVariable && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(insert_variable_action_cjs_namespaceObject.InsertVariableAction, {
+                                        variables: variables.items,
                                         compact: compact,
                                         disabled: !onValueChange,
                                         strings: {
@@ -246,10 +250,7 @@ function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTyp
                                             searchPlaceholder: strings.insertSearchPlaceholder,
                                             empty: strings.insertEmpty
                                         },
-                                        onInsert: onInsertVariable && ((value, item)=>onInsertVariable(optionsBySelectionId.get(item.id) ?? {
-                                                label: item.label,
-                                                value
-                                            }))
+                                        onInsert: (_, item)=>onInsertVariable(variables.resolve(item))
                                     })
                                 ]
                             })
@@ -262,8 +263,10 @@ function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTyp
     });
 }
 exports.FieldHeader = __webpack_exports__.FieldHeader;
+exports.GROW_WHILE_EDITING = __webpack_exports__.GROW_WHILE_EDITING;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "FieldHeader"
+    "FieldHeader",
+    "GROW_WHILE_EDITING"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

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

@@ -1,7 +1,16 @@
 import type { ReactNode } from 'react';
 import type { QuickFieldType, QuickFormFieldOption, QuickFormFieldStrings } from '../types';
-export declare function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTypes, onFieldTypeChange, onRequiredChange, compact, disabled, isExpression, showFieldActions, onValueChange, variables, onGenerateWithAi, onInsertVariable, strings, headerActions, }: {
+import type { VariablePickerSource } from '../utils';
+/**
+ * While the editable label is open, each box around it grows to the header's actions, so the
+ * editor fills that space instead of an `<input>`'s default width. Read mode keeps them sized to
+ * the label, so the asterisk and info icon stay beside the text.
+ */
+export declare const GROW_WHILE_EDITING = "has-[[data-slot=editable-text-input]]:flex-1";
+export declare function FieldHeader({ label, labelAddon, tooltip, fieldId, fieldLabel, required, fieldType, fieldTypes, onFieldTypeChange, onRequiredChange, compact, disabled, isExpression, showFieldActions, onValueChange, variables, onGenerateWithAi, onInsertVariable, strings, headerActions, }: {
     label?: ReactNode;
+    labelAddon?: ReactNode;
+    tooltip?: ReactNode;
     fieldId: string;
     fieldLabel: string;
     required?: boolean;
@@ -16,11 +25,11 @@ export declare function FieldHeader({ label, fieldId, fieldLabel, required, fiel
     isExpression: boolean;
     showFieldActions: boolean;
     onValueChange?: (value: string) => void;
-    variables: QuickFormFieldOption[];
+    variables: VariablePickerSource;
     onGenerateWithAi?: (prompt: string) => void;
-    /** See QuickFormFieldProps.onInsertVariable. */
+    /** See QuickFormFieldProps.onInsertVariable. Omitted, the Insert action does not render. */
     onInsertVariable?: (variable: QuickFormFieldOption) => void;
     /** See QuickFormFieldStrings. */
     strings: QuickFormFieldStrings;
     headerActions?: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;

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

@@ -1,9 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Asterisk, ChevronDown } from "lucide-react";
-import { useMemo } from "react";
 import { Button } from "../../button.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../dropdown-menu.js";
 import { FormFieldHeader } from "../../form-field.js";
+import { InfoTooltip } from "../../info-tooltip.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../popover.js";
 import { Switch } from "../../switch.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../tooltip.js";
@@ -12,47 +12,50 @@ import { AiAssistAction } from "../../field-actions/ai-assist-action.js";
 import { COLLAPSED_HIDDEN, COLLAPSED_ONLY, FIELD_ACTION_CLASS } 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, disabled, isExpression, showFieldActions, onValueChange, variables, onGenerateWithAi, onInsertVariable, strings, headerActions }) {
-    const [pickerItems, optionsBySelectionId] = useMemo(()=>{
-        const byId = new Map();
-        const toItem = (v, id)=>{
-            byId.set(id, v);
-            return {
-                id,
-                label: v.label,
-                ...v.value ? {
-                    value: v.value
-                } : {},
-                ...v.type ? {
-                    type: v.type
-                } : {},
-                ...v.children ? {
-                    children: v.children.map((c, i)=>toItem(c, `${id}/${i}`))
-                } : {}
-            };
-        };
-        return [
-            variables.map((v, i)=>toItem(v, String(i))),
-            byId
-        ];
-    }, [
-        variables
-    ]);
+const GROW_WHILE_EDITING = 'has-[[data-slot=editable-text-input]]:flex-1';
+function FieldHeader({ label, labelAddon, tooltip, fieldId, fieldLabel, required, fieldType, fieldTypes = FIELD_TYPE_ORDER, onFieldTypeChange, onRequiredChange, compact, disabled, isExpression, showFieldActions, onValueChange, variables, onGenerateWithAi, onInsertVariable, strings, headerActions }) {
     const typeMeta = FIELD_TYPE_META[fieldType];
     const typeLabel = strings.typeLabels[fieldType] ?? typeMeta.label;
     const collapsedTextClass = cn(COLLAPSED_HIDDEN, compact && '!hidden');
     const compactOnlyClass = cn(COLLAPSED_ONLY, compact && '!flex');
     const hasActions = !!onFieldTypeChange || !!onRequiredChange || showFieldActions || null != headerActions;
-    if (null != label && !hasActions) return /*#__PURE__*/ jsx(Fragment, {
-        children: label
-    });
+    const hasTooltip = null != tooltip && false !== tooltip && !('string' == typeof tooltip && !tooltip.trim());
+    const ownLabel = null != label && hasTooltip ? /*#__PURE__*/ jsxs("span", {
+        className: cn('flex min-w-0 items-center', GROW_WHILE_EDITING, '[&:has([data-slot=editable-text-input])>[data-slot=info-tooltip]]:hidden'),
+        children: [
+            label,
+            /*#__PURE__*/ jsx(InfoTooltip, {
+                content: tooltip,
+                "aria-label": strings.tooltipAriaLabel
+            })
+        ]
+    }) : label;
+    const leading = null != labelAddon ? /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            labelAddon,
+            ownLabel
+        ]
+    }) : ownLabel;
+    if (null != label && !hasActions) {
+        const alone = null != labelAddon ? /*#__PURE__*/ jsx("div", {
+            className: cn('flex min-w-0 items-center gap-2', GROW_WHILE_EDITING),
+            children: leading
+        }) : ownLabel;
+        return hasTooltip ? /*#__PURE__*/ jsx(TooltipProvider, {
+            delayDuration: 300,
+            children: alone
+        }) : alone;
+    }
     return /*#__PURE__*/ jsx(TooltipProvider, {
         delayDuration: 300,
         children: /*#__PURE__*/ jsx(FormFieldHeader, {
+            className: "[&:has([data-slot=editable-text-input])>:first-child]:flex-1 [&:has([data-slot=editable-text-input])>:nth-child(2)]:!hidden",
             label: null == label ? fieldLabel : void 0,
             htmlFor: fieldId,
             required: required,
-            leading: label,
+            tooltip: null == label ? tooltip : void 0,
+            tooltipAriaLabel: strings.tooltipAriaLabel,
+            leading: leading,
             actions: hasActions ? /*#__PURE__*/ jsxs(Fragment, {
                 children: [
                     /*#__PURE__*/ jsxs("div", {
@@ -208,8 +211,8 @@ function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTyp
                                             error: strings.aiError
                                         }
                                     }),
-                                    /*#__PURE__*/ jsx(InsertVariableAction, {
-                                        variables: pickerItems,
+                                    onInsertVariable && /*#__PURE__*/ jsx(InsertVariableAction, {
+                                        variables: variables.items,
                                         compact: compact,
                                         disabled: !onValueChange,
                                         strings: {
@@ -218,10 +221,7 @@ function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTyp
                                             searchPlaceholder: strings.insertSearchPlaceholder,
                                             empty: strings.insertEmpty
                                         },
-                                        onInsert: onInsertVariable && ((value, item)=>onInsertVariable(optionsBySelectionId.get(item.id) ?? {
-                                                label: item.label,
-                                                value
-                                            }))
+                                        onInsert: (_, item)=>onInsertVariable(variables.resolve(item))
                                     })
                                 ]
                             })
@@ -233,4 +233,4 @@ function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTyp
         })
     });
 }
-export { FieldHeader };
+export { FieldHeader, GROW_WHILE_EDITING };

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

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