@uipath/apollo-wind 2.59.0 → 2.60.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ui/datetime-picker.cjs +19 -3
- package/dist/components/ui/datetime-picker.d.ts +2 -0
- package/dist/components/ui/datetime-picker.js +19 -3
- package/dist/components/ui/field-actions/insert-variable-action.cjs +1 -1
- package/dist/components/ui/field-actions/insert-variable-action.d.ts +5 -2
- package/dist/components/ui/field-actions/insert-variable-action.js +1 -1
- package/dist/components/ui/field-addons/field-menu.cjs +2 -2
- package/dist/components/ui/field-addons/field-menu.d.ts +4 -2
- package/dist/components/ui/field-addons/field-menu.js +2 -2
- package/dist/components/ui/index.cjs +100 -89
- package/dist/components/ui/index.d.ts +1 -0
- package/dist/components/ui/index.js +1 -0
- package/dist/components/ui/lockable-value-field/index.cjs +5 -5
- package/dist/components/ui/lockable-value-field/index.d.ts +18 -3
- package/dist/components/ui/lockable-value-field/index.js +2 -2
- package/dist/components/ui/quick-form-field/components/field-header.cjs +265 -0
- package/dist/components/ui/quick-form-field/components/field-header.d.ts +23 -0
- package/dist/components/ui/quick-form-field/components/field-header.js +231 -0
- package/dist/components/ui/{lockable-value-field → quick-form-field}/components/lock-toggle-button.cjs +3 -3
- package/dist/components/ui/{lockable-value-field → quick-form-field}/components/lock-toggle-button.d.ts +4 -1
- package/dist/components/ui/{lockable-value-field → quick-form-field}/components/lock-toggle-button.js +3 -3
- package/dist/components/ui/quick-form-field/index.cjs +46 -0
- package/dist/components/ui/quick-form-field/index.d.ts +3 -0
- package/dist/components/ui/quick-form-field/index.js +3 -0
- package/dist/components/ui/{lockable-value-field/lockable-value-field.cjs → quick-form-field/quick-form-field.cjs} +190 -119
- package/dist/components/ui/quick-form-field/quick-form-field.d.ts +26 -0
- package/dist/components/ui/{lockable-value-field/lockable-value-field.js → quick-form-field/quick-form-field.js} +194 -123
- package/dist/components/ui/{lockable-value-field → quick-form-field}/types.cjs +70 -0
- package/dist/components/ui/quick-form-field/types.d.ts +245 -0
- package/dist/components/ui/quick-form-field/types.js +137 -0
- package/dist/components/ui/{lockable-value-field → quick-form-field}/utils.cjs +21 -3
- package/dist/components/ui/{lockable-value-field → quick-form-field}/utils.d.ts +8 -3
- package/dist/components/ui/{lockable-value-field → quick-form-field}/utils.js +19 -4
- package/dist/index.cjs +9 -2
- package/dist/index.d.ts +4 -2
- package/dist/index.js +3 -2
- package/package.json +1 -1
- package/dist/components/ui/lockable-value-field/components/field-header.cjs +0 -242
- package/dist/components/ui/lockable-value-field/components/field-header.d.ts +0 -19
- package/dist/components/ui/lockable-value-field/components/field-header.js +0 -208
- package/dist/components/ui/lockable-value-field/lockable-value-field.d.ts +0 -14
- package/dist/components/ui/lockable-value-field/types.d.ts +0 -109
- package/dist/components/ui/lockable-value-field/types.js +0 -70
|
@@ -1,73 +1,127 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import { useId, useState } from "react";
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { RefreshCw, Trash2 } from "lucide-react";
|
|
3
|
+
import { useEffect, useId, useMemo, useRef, useState } from "react";
|
|
4
4
|
import { Calendar } from "../calendar.js";
|
|
5
|
-
import {
|
|
5
|
+
import { DateTimePicker } from "../datetime-picker.js";
|
|
6
6
|
import { FileUpload } from "../file-upload.js";
|
|
7
|
-
import { InputGroup, InputGroupAddon,
|
|
7
|
+
import { InputGroup, InputGroupAddon, InputGroupInput } from "../input-group.js";
|
|
8
8
|
import { MultiSelect } from "../multi-select.js";
|
|
9
9
|
import { Popover, PopoverContent, PopoverTrigger } from "../popover.js";
|
|
10
10
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select.js";
|
|
11
11
|
import { Switch } from "../switch.js";
|
|
12
12
|
import { cn } from "../../../lib/index.js";
|
|
13
|
-
import {
|
|
13
|
+
import { FieldMenu } from "../field-addons/field-menu.js";
|
|
14
14
|
import { FieldHeader } from "./components/field-header.js";
|
|
15
15
|
import { LockToggleButton } from "./components/lock-toggle-button.js";
|
|
16
|
-
import { FIELD_TYPE_META } from "./types.js";
|
|
16
|
+
import { DEFAULT_QUICK_FORM_FIELD_STRINGS, FIELD_TYPE_META } from "./types.js";
|
|
17
17
|
import { DEFAULT_SELECT_OPTIONS, formatDateValue, getLockedDisplayValue, parseDateValue, parseListValue, toDateOnlyString } from "./utils.js";
|
|
18
|
-
function
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
asChild: true,
|
|
26
|
-
children: /*#__PURE__*/ jsx(InputGroupButton, {
|
|
27
|
-
icon: true,
|
|
28
|
-
size: "3xs",
|
|
29
|
-
"aria-label": "More value actions",
|
|
30
|
-
children: /*#__PURE__*/ jsx(MoreHorizontal, {})
|
|
31
|
-
})
|
|
32
|
-
}),
|
|
33
|
-
/*#__PURE__*/ jsxs(DropdownMenuContent, {
|
|
34
|
-
align: "end",
|
|
35
|
-
className: "w-40",
|
|
36
|
-
children: [
|
|
37
|
-
onClear && /*#__PURE__*/ jsxs(DropdownMenuItem, {
|
|
38
|
-
className: "text-error focus:text-error",
|
|
39
|
-
onClick: onClear,
|
|
40
|
-
children: [
|
|
41
|
-
/*#__PURE__*/ jsx(Trash2, {}),
|
|
42
|
-
"Clear value"
|
|
43
|
-
]
|
|
44
|
-
}),
|
|
45
|
-
onRefresh && /*#__PURE__*/ jsxs(DropdownMenuItem, {
|
|
46
|
-
onClick: onRefresh,
|
|
47
|
-
children: [
|
|
48
|
-
/*#__PURE__*/ jsx(RefreshCw, {}),
|
|
49
|
-
"Force refresh"
|
|
50
|
-
]
|
|
51
|
-
})
|
|
52
|
-
]
|
|
53
|
-
})
|
|
54
|
-
]
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
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 = DEFAULT_SELECT_OPTIONS, onGenerateWithAi, variables = [], id, className }) {
|
|
18
|
+
function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true, onLockedChange, showLock = true, leadingAddon, trailingAddon, more, mode = 'literal', onModeChange, renderExpressionEditor, renderModeControl, fieldType = 'string', fieldTypes, onFieldTypeChange, required, onRequiredChange, label, strings: stringOverrides, placeholder, error, errorId, belowValue, fileUploadAriaLabel, headerActions, compact, showFieldActions = true, options = DEFAULT_SELECT_OPTIONS, onGenerateWithAi, onInsertVariable, variables = [], id, className }) {
|
|
19
|
+
const strings = useMemo(()=>({
|
|
20
|
+
...DEFAULT_QUICK_FORM_FIELD_STRINGS,
|
|
21
|
+
...stringOverrides
|
|
22
|
+
}), [
|
|
23
|
+
stringOverrides
|
|
24
|
+
]);
|
|
58
25
|
const generatedId = useId().replace(/:/g, '');
|
|
26
|
+
const valueInputRef = useRef(null);
|
|
27
|
+
const committedRef = useRef(value);
|
|
28
|
+
const caretRef = useRef(null);
|
|
59
29
|
const [datePopoverOpen, setDatePopoverOpen] = useState(false);
|
|
60
30
|
const [selectOpen, setSelectOpen] = useState(false);
|
|
61
31
|
const fieldId = id ?? generatedId;
|
|
62
32
|
const validationId = errorId ?? `${fieldId}-error`;
|
|
63
33
|
const typeMeta = FIELD_TYPE_META[fieldType];
|
|
64
|
-
const effectiveMode = typeMeta.supportsExpression ? mode : '
|
|
34
|
+
const effectiveMode = 'expression' !== mode || typeMeta.supportsExpression ? mode : 'literal';
|
|
65
35
|
const editableOnValueChange = locked ? void 0 : onValueChange;
|
|
66
|
-
const
|
|
67
|
-
const
|
|
68
|
-
const
|
|
69
|
-
const
|
|
70
|
-
|
|
36
|
+
const typeLabel = strings.typeLabels[fieldType] ?? typeMeta.label;
|
|
37
|
+
const fieldLabel = 'expression' === effectiveMode ? strings.expressionFieldLabel(typeLabel) : strings.valueFieldLabel(typeLabel);
|
|
38
|
+
const valuePlaceholder = placeholder ?? fieldLabel;
|
|
39
|
+
const menuActions = [
|
|
40
|
+
...more?.onClear && !locked ? [
|
|
41
|
+
{
|
|
42
|
+
id: 'clear',
|
|
43
|
+
label: strings.clearValue,
|
|
44
|
+
icon: Trash2,
|
|
45
|
+
onSelect: more.onClear
|
|
46
|
+
}
|
|
47
|
+
] : [],
|
|
48
|
+
...more?.onRefresh ? [
|
|
49
|
+
{
|
|
50
|
+
id: 'refresh',
|
|
51
|
+
label: strings.forceRefresh,
|
|
52
|
+
icon: RefreshCw,
|
|
53
|
+
onSelect: more.onRefresh
|
|
54
|
+
}
|
|
55
|
+
] : []
|
|
56
|
+
];
|
|
57
|
+
const offersModes = typeMeta.supportsExpression && !!onModeChange;
|
|
58
|
+
const showsMenu = typeMeta.supportsExpression || menuActions.length > 0;
|
|
59
|
+
const builtInMenu = showsMenu ? /*#__PURE__*/ jsx(FieldMenu, {
|
|
60
|
+
mode: effectiveMode,
|
|
61
|
+
onSelect: (next)=>onModeChange?.(next),
|
|
62
|
+
modesDisabled: !offersModes && menuActions.length > 0,
|
|
63
|
+
disabled: !offersModes && 0 === menuActions.length,
|
|
64
|
+
actions: menuActions,
|
|
65
|
+
triggerLabel: strings.valueModeAriaLabel,
|
|
66
|
+
literalDescription: strings.literalDescriptions[fieldType] ?? typeMeta.fixedDescription,
|
|
67
|
+
strings: {
|
|
68
|
+
literalTitle: strings.literalLabels[fieldType] ?? typeMeta.fixedLabel,
|
|
69
|
+
expressionTitle: strings.expressionLabel,
|
|
70
|
+
expressionDescription: strings.expressionDescription,
|
|
71
|
+
fieldActions: strings.moreActionsAriaLabel
|
|
72
|
+
}
|
|
73
|
+
}) : null;
|
|
74
|
+
const modeControl = renderModeControl?.(mode, {
|
|
75
|
+
id: fieldId,
|
|
76
|
+
value,
|
|
77
|
+
onValueChange: editableOnValueChange,
|
|
78
|
+
onBlur: onValueBlur,
|
|
79
|
+
readOnly: !editableOnValueChange,
|
|
80
|
+
placeholder: valuePlaceholder,
|
|
81
|
+
fieldType,
|
|
82
|
+
'aria-invalid': error ? true : void 0,
|
|
83
|
+
'aria-describedby': error ? validationId : void 0,
|
|
84
|
+
'aria-errormessage': error ? validationId : void 0,
|
|
85
|
+
'data-slot': 'input-group-control'
|
|
86
|
+
}) ?? null;
|
|
87
|
+
const modeOnMount = useRef(mode);
|
|
88
|
+
useEffect(()=>{
|
|
89
|
+
if (modeOnMount.current === mode) return;
|
|
90
|
+
modeOnMount.current = mode;
|
|
91
|
+
valueInputRef.current?.focus();
|
|
92
|
+
}, [
|
|
93
|
+
mode
|
|
94
|
+
]);
|
|
95
|
+
const handleValueKeyDown = (e)=>{
|
|
96
|
+
if ('Enter' === e.key) {
|
|
97
|
+
e.preventDefault();
|
|
98
|
+
e.currentTarget.blur();
|
|
99
|
+
}
|
|
100
|
+
if ('Escape' === e.key) {
|
|
101
|
+
e.preventDefault();
|
|
102
|
+
onValueChange?.(committedRef.current);
|
|
103
|
+
e.currentTarget.blur();
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
const insertVariableAtCaret = (insertText)=>{
|
|
107
|
+
const input = valueInputRef.current;
|
|
108
|
+
const caret = caretRef.current;
|
|
109
|
+
if (!input || !caret) return void onValueChange?.(value ? `${value} ${insertText}` : insertText);
|
|
110
|
+
const start = Math.min(caret.start, value.length);
|
|
111
|
+
const end = Math.min(Math.max(caret.end, start), value.length);
|
|
112
|
+
const next = value.slice(0, start) + insertText + value.slice(end);
|
|
113
|
+
onValueChange?.(next);
|
|
114
|
+
const next_caret = start + insertText.length;
|
|
115
|
+
caretRef.current = {
|
|
116
|
+
start: next_caret,
|
|
117
|
+
end: next_caret
|
|
118
|
+
};
|
|
119
|
+
requestAnimationFrame(()=>{
|
|
120
|
+
input.focus();
|
|
121
|
+
input.setSelectionRange(next_caret, next_caret);
|
|
122
|
+
});
|
|
123
|
+
};
|
|
124
|
+
const lockedDisplayValue = getLockedDisplayValue(fieldType, value, options, strings);
|
|
71
125
|
return /*#__PURE__*/ jsxs("div", {
|
|
72
126
|
className: cn('@container group flex flex-col gap-1.5 [&>[data-slot=form-field-error]]:mt-0', className),
|
|
73
127
|
children: [
|
|
@@ -77,36 +131,41 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
|
|
|
77
131
|
fieldLabel: fieldLabel,
|
|
78
132
|
required: required,
|
|
79
133
|
fieldType: fieldType,
|
|
134
|
+
fieldTypes: fieldTypes,
|
|
80
135
|
onFieldTypeChange: onFieldTypeChange,
|
|
81
136
|
onRequiredChange: onRequiredChange,
|
|
82
137
|
compact: compact,
|
|
83
138
|
showFieldActions: showFieldActions,
|
|
84
|
-
showAiAssist: showAiAssist,
|
|
85
|
-
value: value,
|
|
86
139
|
onValueChange: editableOnValueChange,
|
|
87
140
|
variables: variables,
|
|
88
141
|
onGenerateWithAi: onGenerateWithAi,
|
|
89
|
-
|
|
142
|
+
onInsertVariable: (variable)=>onInsertVariable ? onInsertVariable(variable, {
|
|
143
|
+
value,
|
|
144
|
+
caret: caretRef.current
|
|
145
|
+
}) : insertVariableAtCaret(variable.value),
|
|
146
|
+
headerActions: headerActions,
|
|
147
|
+
strings: strings
|
|
90
148
|
}),
|
|
91
149
|
typeMeta.supportsExpression ? /*#__PURE__*/ jsxs(InputGroup, {
|
|
92
150
|
error: error,
|
|
93
151
|
errorId: validationId,
|
|
94
|
-
|
|
152
|
+
layout: 'file' !== fieldType || locked || 'literal' !== effectiveMode ? 'row' : 'grow',
|
|
95
153
|
children: [
|
|
96
154
|
(showLock || void 0 !== leadingAddon) && null !== leadingAddon && /*#__PURE__*/ jsx(InputGroupAddon, {
|
|
97
155
|
align: "inline-start",
|
|
98
156
|
children: void 0 !== leadingAddon ? leadingAddon : showLock && /*#__PURE__*/ jsx(LockToggleButton, {
|
|
99
157
|
locked: locked,
|
|
100
|
-
onLockedChange: onLockedChange
|
|
158
|
+
onLockedChange: onLockedChange,
|
|
159
|
+
strings: strings
|
|
101
160
|
})
|
|
102
161
|
}),
|
|
103
|
-
'expression' === effectiveMode ? renderExpressionEditor ? renderExpressionEditor({
|
|
162
|
+
modeControl ?? ('expression' === effectiveMode ? renderExpressionEditor ? renderExpressionEditor({
|
|
104
163
|
id: fieldId,
|
|
105
164
|
value,
|
|
106
165
|
onValueChange: editableOnValueChange,
|
|
107
166
|
onBlur: onValueBlur,
|
|
108
167
|
readOnly: !editableOnValueChange,
|
|
109
|
-
placeholder:
|
|
168
|
+
placeholder: valuePlaceholder,
|
|
110
169
|
fieldType,
|
|
111
170
|
'aria-invalid': error ? true : void 0,
|
|
112
171
|
'aria-describedby': error ? validationId : void 0,
|
|
@@ -114,17 +173,39 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
|
|
|
114
173
|
'data-slot': 'input-group-control'
|
|
115
174
|
}) : /*#__PURE__*/ jsx(InputGroupInput, {
|
|
116
175
|
id: fieldId,
|
|
176
|
+
ref: valueInputRef,
|
|
117
177
|
readOnly: !editableOnValueChange,
|
|
118
178
|
value: value,
|
|
119
179
|
onChange: (e)=>editableOnValueChange?.(e.target.value),
|
|
120
|
-
|
|
121
|
-
|
|
180
|
+
onFocus: (e)=>{
|
|
181
|
+
committedRef.current = value;
|
|
182
|
+
caretRef.current = {
|
|
183
|
+
start: e.currentTarget.selectionStart ?? value.length,
|
|
184
|
+
end: e.currentTarget.selectionEnd ?? value.length
|
|
185
|
+
};
|
|
186
|
+
},
|
|
187
|
+
onSelect: (e)=>{
|
|
188
|
+
const el = e.currentTarget;
|
|
189
|
+
caretRef.current = {
|
|
190
|
+
start: el.selectionStart ?? 0,
|
|
191
|
+
end: el.selectionEnd ?? el.selectionStart ?? 0
|
|
192
|
+
};
|
|
193
|
+
},
|
|
194
|
+
onKeyDown: handleValueKeyDown,
|
|
195
|
+
onBlur: (e)=>{
|
|
196
|
+
caretRef.current = {
|
|
197
|
+
start: e.currentTarget.selectionStart ?? value.length,
|
|
198
|
+
end: e.currentTarget.selectionEnd ?? value.length
|
|
199
|
+
};
|
|
200
|
+
onValueBlur?.();
|
|
201
|
+
},
|
|
202
|
+
placeholder: valuePlaceholder,
|
|
122
203
|
className: "font-mono"
|
|
123
204
|
}) : locked ? /*#__PURE__*/ jsx(InputGroupInput, {
|
|
124
205
|
id: fieldId,
|
|
125
206
|
readOnly: true,
|
|
126
207
|
value: lockedDisplayValue,
|
|
127
|
-
placeholder:
|
|
208
|
+
placeholder: valuePlaceholder,
|
|
128
209
|
onBlur: onValueBlur
|
|
129
210
|
}) : 'boolean' === fieldType ? /*#__PURE__*/ jsx("div", {
|
|
130
211
|
className: "flex h-full flex-1 items-center px-3",
|
|
@@ -158,7 +239,7 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
|
|
|
158
239
|
className: "flex h-full flex-1 items-center text-left text-sm text-foreground outline-none disabled:cursor-not-allowed disabled:opacity-50",
|
|
159
240
|
children: value ? formatDateValue(value) : /*#__PURE__*/ jsx("span", {
|
|
160
241
|
className: "text-muted-foreground",
|
|
161
|
-
children:
|
|
242
|
+
children: strings.pickDate
|
|
162
243
|
})
|
|
163
244
|
})
|
|
164
245
|
}),
|
|
@@ -173,6 +254,15 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
|
|
|
173
254
|
})
|
|
174
255
|
})
|
|
175
256
|
]
|
|
257
|
+
}) : 'datetime' === fieldType ? /*#__PURE__*/ jsx(DateTimePicker, {
|
|
258
|
+
id: fieldId,
|
|
259
|
+
value: parseDateValue(value),
|
|
260
|
+
onValueChange: (date)=>onValueChange?.(date ? date.toISOString() : ''),
|
|
261
|
+
onOpenChange: (open)=>{
|
|
262
|
+
if (!open) onValueBlur?.();
|
|
263
|
+
},
|
|
264
|
+
disabled: !onValueChange,
|
|
265
|
+
placeholder: valuePlaceholder
|
|
176
266
|
}) : 'file' === fieldType ? /*#__PURE__*/ jsx(FileUpload, {
|
|
177
267
|
id: fieldId,
|
|
178
268
|
ariaLabel: fileUploadAriaLabel ?? ('string' == typeof label ? label : fieldLabel),
|
|
@@ -185,76 +275,60 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
|
|
|
185
275
|
"aria-errormessage": error ? validationId : void 0
|
|
186
276
|
}) : /*#__PURE__*/ jsx(InputGroupInput, {
|
|
187
277
|
id: fieldId,
|
|
188
|
-
|
|
278
|
+
ref: valueInputRef,
|
|
279
|
+
type: 'integer' === fieldType || 'double' === fieldType ? 'number' : 'text',
|
|
280
|
+
step: 'double' === fieldType ? 'any' : void 0,
|
|
189
281
|
readOnly: !onValueChange,
|
|
190
282
|
value: value,
|
|
191
283
|
onChange: (e)=>onValueChange?.(e.target.value),
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
284
|
+
onFocus: (e)=>{
|
|
285
|
+
committedRef.current = value;
|
|
286
|
+
caretRef.current = {
|
|
287
|
+
start: e.currentTarget.selectionStart ?? value.length,
|
|
288
|
+
end: e.currentTarget.selectionEnd ?? value.length
|
|
289
|
+
};
|
|
290
|
+
},
|
|
291
|
+
onSelect: (e)=>{
|
|
292
|
+
const el = e.currentTarget;
|
|
293
|
+
caretRef.current = {
|
|
294
|
+
start: el.selectionStart ?? 0,
|
|
295
|
+
end: el.selectionEnd ?? el.selectionStart ?? 0
|
|
296
|
+
};
|
|
297
|
+
},
|
|
298
|
+
onKeyDown: handleValueKeyDown,
|
|
299
|
+
onBlur: (e)=>{
|
|
300
|
+
caretRef.current = {
|
|
301
|
+
start: e.currentTarget.selectionStart ?? value.length,
|
|
302
|
+
end: e.currentTarget.selectionEnd ?? value.length
|
|
303
|
+
};
|
|
304
|
+
onValueBlur?.();
|
|
305
|
+
},
|
|
306
|
+
placeholder: valuePlaceholder
|
|
307
|
+
})),
|
|
308
|
+
null !== trailingAddon && (void 0 !== trailingAddon || builtInMenu) && /*#__PURE__*/ jsx(InputGroupAddon, {
|
|
196
309
|
align: "inline-end",
|
|
197
310
|
className: "cursor-default",
|
|
198
|
-
children: void 0 !== trailingAddon ? trailingAddon :
|
|
199
|
-
children: [
|
|
200
|
-
/*#__PURE__*/ jsxs(DropdownMenu, {
|
|
201
|
-
children: [
|
|
202
|
-
/*#__PURE__*/ jsx(DropdownMenuTrigger, {
|
|
203
|
-
asChild: true,
|
|
204
|
-
children: /*#__PURE__*/ jsx(InputGroupButton, {
|
|
205
|
-
icon: true,
|
|
206
|
-
size: "3xs",
|
|
207
|
-
disabled: !onModeChange,
|
|
208
|
-
"aria-label": "Choose value type",
|
|
209
|
-
children: 'expression' === effectiveMode ? /*#__PURE__*/ jsx(Code2, {}) : /*#__PURE__*/ jsx(Type, {})
|
|
210
|
-
})
|
|
211
|
-
}),
|
|
212
|
-
/*#__PURE__*/ jsxs(DropdownMenuContent, {
|
|
213
|
-
align: "end",
|
|
214
|
-
className: "w-56",
|
|
215
|
-
children: [
|
|
216
|
-
/*#__PURE__*/ jsx(ValueModeMenuItem, {
|
|
217
|
-
icon: Type,
|
|
218
|
-
label: typeMeta.fixedLabel,
|
|
219
|
-
description: typeMeta.fixedDescription,
|
|
220
|
-
active: 'fixed' === effectiveMode,
|
|
221
|
-
onClick: ()=>onModeChange?.('fixed')
|
|
222
|
-
}),
|
|
223
|
-
/*#__PURE__*/ jsx(ValueModeMenuItem, {
|
|
224
|
-
icon: Code2,
|
|
225
|
-
label: "Expression",
|
|
226
|
-
description: "Use a JS expression",
|
|
227
|
-
active: 'expression' === effectiveMode,
|
|
228
|
-
onClick: ()=>onModeChange?.('expression')
|
|
229
|
-
})
|
|
230
|
-
]
|
|
231
|
-
})
|
|
232
|
-
]
|
|
233
|
-
}),
|
|
234
|
-
hasMoreActions && more && /*#__PURE__*/ jsx(MoreActionsMenu, {
|
|
235
|
-
more: more,
|
|
236
|
-
locked: locked
|
|
237
|
-
})
|
|
238
|
-
]
|
|
239
|
-
})
|
|
311
|
+
children: void 0 !== trailingAddon ? trailingAddon : builtInMenu
|
|
240
312
|
})
|
|
241
313
|
]
|
|
242
314
|
}) : /*#__PURE__*/ jsxs(InputGroup, {
|
|
243
315
|
error: error,
|
|
244
316
|
errorId: validationId,
|
|
317
|
+
layout: 'multi-select' !== fieldType || locked ? 'row' : 'grow',
|
|
245
318
|
children: [
|
|
246
319
|
(showLock || void 0 !== leadingAddon) && null !== leadingAddon && /*#__PURE__*/ jsx(InputGroupAddon, {
|
|
247
320
|
align: "inline-start",
|
|
248
321
|
children: void 0 !== leadingAddon ? leadingAddon : showLock && /*#__PURE__*/ jsx(LockToggleButton, {
|
|
249
322
|
locked: locked,
|
|
250
|
-
onLockedChange: onLockedChange
|
|
323
|
+
onLockedChange: onLockedChange,
|
|
324
|
+
strings: strings
|
|
251
325
|
})
|
|
252
326
|
}),
|
|
253
|
-
locked ? /*#__PURE__*/ jsx(InputGroupInput, {
|
|
327
|
+
modeControl ?? (locked ? /*#__PURE__*/ jsx(InputGroupInput, {
|
|
254
328
|
id: fieldId,
|
|
255
329
|
readOnly: true,
|
|
256
330
|
value: lockedDisplayValue,
|
|
257
|
-
placeholder:
|
|
331
|
+
placeholder: valuePlaceholder,
|
|
258
332
|
className: "min-w-0",
|
|
259
333
|
onBlur: onValueBlur
|
|
260
334
|
}) : 'single-select' === fieldType ? /*#__PURE__*/ jsxs(Select, {
|
|
@@ -270,7 +344,7 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
|
|
|
270
344
|
/*#__PURE__*/ jsx(SelectTrigger, {
|
|
271
345
|
id: fieldId,
|
|
272
346
|
children: /*#__PURE__*/ jsx(SelectValue, {
|
|
273
|
-
placeholder:
|
|
347
|
+
placeholder: strings.selectOption
|
|
274
348
|
})
|
|
275
349
|
}),
|
|
276
350
|
/*#__PURE__*/ jsx(SelectContent, {
|
|
@@ -285,17 +359,14 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
|
|
|
285
359
|
options: options,
|
|
286
360
|
selected: parseListValue(value),
|
|
287
361
|
onChange: (selected)=>onValueChange?.(JSON.stringify(selected)),
|
|
288
|
-
placeholder:
|
|
362
|
+
placeholder: strings.selectOptions,
|
|
289
363
|
disabled: !onValueChange,
|
|
290
364
|
onBlur: onValueBlur
|
|
291
|
-
}) : null,
|
|
292
|
-
|
|
365
|
+
}) : null),
|
|
366
|
+
null !== trailingAddon && (void 0 !== trailingAddon || builtInMenu) && /*#__PURE__*/ jsx(InputGroupAddon, {
|
|
293
367
|
align: "inline-end",
|
|
294
368
|
className: "cursor-default",
|
|
295
|
-
children:
|
|
296
|
-
more: more,
|
|
297
|
-
locked: locked
|
|
298
|
-
})
|
|
369
|
+
children: void 0 !== trailingAddon ? trailingAddon : builtInMenu
|
|
299
370
|
})
|
|
300
371
|
]
|
|
301
372
|
}),
|
|
@@ -303,4 +374,4 @@ function LockableValueField({ value = '', onValueChange, onValueBlur, locked = t
|
|
|
303
374
|
]
|
|
304
375
|
});
|
|
305
376
|
}
|
|
306
|
-
export {
|
|
377
|
+
export { QuickFormField };
|
|
@@ -25,6 +25,7 @@ var __webpack_exports__ = {};
|
|
|
25
25
|
__webpack_require__.r(__webpack_exports__);
|
|
26
26
|
__webpack_require__.d(__webpack_exports__, {
|
|
27
27
|
FIELD_TYPE_ORDER: ()=>FIELD_TYPE_ORDER,
|
|
28
|
+
DEFAULT_QUICK_FORM_FIELD_STRINGS: ()=>DEFAULT_QUICK_FORM_FIELD_STRINGS,
|
|
28
29
|
FIELD_TYPE_META: ()=>FIELD_TYPE_META
|
|
29
30
|
});
|
|
30
31
|
const external_lucide_react_namespaceObject = require("lucide-react");
|
|
@@ -43,6 +44,13 @@ const FIELD_TYPE_META = {
|
|
|
43
44
|
fixedLabel: 'Fixed value',
|
|
44
45
|
fixedDescription: 'Use a literal number value'
|
|
45
46
|
},
|
|
47
|
+
double: {
|
|
48
|
+
label: 'Decimal number',
|
|
49
|
+
icon: external_lucide_react_namespaceObject.Sigma,
|
|
50
|
+
supportsExpression: true,
|
|
51
|
+
fixedLabel: 'Fixed value',
|
|
52
|
+
fixedDescription: 'Use a literal decimal value'
|
|
53
|
+
},
|
|
46
54
|
date: {
|
|
47
55
|
label: 'Date',
|
|
48
56
|
icon: external_lucide_react_namespaceObject.Calendar,
|
|
@@ -50,6 +58,13 @@ const FIELD_TYPE_META = {
|
|
|
50
58
|
fixedLabel: 'Fixed date',
|
|
51
59
|
fixedDescription: 'Use a literal date value'
|
|
52
60
|
},
|
|
61
|
+
datetime: {
|
|
62
|
+
label: 'Date and time',
|
|
63
|
+
icon: external_lucide_react_namespaceObject.CalendarClock,
|
|
64
|
+
supportsExpression: true,
|
|
65
|
+
fixedLabel: 'Fixed date and time',
|
|
66
|
+
fixedDescription: 'Use a literal date and time value'
|
|
67
|
+
},
|
|
53
68
|
boolean: {
|
|
54
69
|
label: 'Boolean',
|
|
55
70
|
icon: external_lucide_react_namespaceObject.ToggleLeft,
|
|
@@ -71,6 +86,13 @@ const FIELD_TYPE_META = {
|
|
|
71
86
|
fixedLabel: 'Fixed value',
|
|
72
87
|
fixedDescription: 'Choose one or more options'
|
|
73
88
|
},
|
|
89
|
+
array: {
|
|
90
|
+
label: 'Array',
|
|
91
|
+
icon: external_lucide_react_namespaceObject.Brackets,
|
|
92
|
+
supportsExpression: true,
|
|
93
|
+
fixedLabel: 'Fixed value',
|
|
94
|
+
fixedDescription: 'Use a literal JSON array'
|
|
95
|
+
},
|
|
74
96
|
file: {
|
|
75
97
|
label: 'File',
|
|
76
98
|
icon: external_lucide_react_namespaceObject.File,
|
|
@@ -89,16 +111,64 @@ const FIELD_TYPE_META = {
|
|
|
89
111
|
const FIELD_TYPE_ORDER = [
|
|
90
112
|
'string',
|
|
91
113
|
'integer',
|
|
114
|
+
'double',
|
|
92
115
|
'date',
|
|
116
|
+
'datetime',
|
|
93
117
|
'boolean',
|
|
94
118
|
'single-select',
|
|
95
119
|
'multi-select',
|
|
120
|
+
'array',
|
|
96
121
|
'file',
|
|
97
122
|
'object'
|
|
98
123
|
];
|
|
124
|
+
const DEFAULT_QUICK_FORM_FIELD_STRINGS = {
|
|
125
|
+
fieldTypeTooltip: 'Type',
|
|
126
|
+
fieldTypeAriaLabel: 'Field type',
|
|
127
|
+
typeLabels: {},
|
|
128
|
+
literalLabels: {},
|
|
129
|
+
literalDescriptions: {},
|
|
130
|
+
valueFieldLabel: (typeLabel)=>`${typeLabel} value`,
|
|
131
|
+
expressionFieldLabel: (typeLabel)=>{
|
|
132
|
+
const type = typeLabel.toLowerCase();
|
|
133
|
+
return `Write ${/^[aeiou]/.test(type) ? 'an' : 'a'} ${type} expression`;
|
|
134
|
+
},
|
|
135
|
+
trueLabel: 'True',
|
|
136
|
+
falseLabel: 'False',
|
|
137
|
+
requiredTooltip: 'Required',
|
|
138
|
+
requiredAriaLabel: 'Required field',
|
|
139
|
+
optionalAriaLabel: 'Optional field',
|
|
140
|
+
insertLabel: 'Insert',
|
|
141
|
+
insertAriaLabel: 'Insert variable',
|
|
142
|
+
insertSearchPlaceholder: 'Search variables...',
|
|
143
|
+
insertEmpty: 'No variables found.',
|
|
144
|
+
valueModeAriaLabel: 'Choose value mode',
|
|
145
|
+
expressionLabel: 'Expression',
|
|
146
|
+
expressionDescription: 'Use a JS expression',
|
|
147
|
+
pickDate: 'Pick a date',
|
|
148
|
+
selectOption: 'Select an option',
|
|
149
|
+
selectOptions: 'Select options...',
|
|
150
|
+
moreActionsAriaLabel: 'More value actions',
|
|
151
|
+
clearValue: 'Clear value',
|
|
152
|
+
forceRefresh: 'Force refresh',
|
|
153
|
+
aiAssistAriaLabel: 'AI assist',
|
|
154
|
+
aiAssistTooltip: 'Generate with AI',
|
|
155
|
+
aiPromptLabel: 'Describe what you want',
|
|
156
|
+
aiPromptPlaceholder: 'Display a value from the previous step',
|
|
157
|
+
aiGenerate: 'Generate',
|
|
158
|
+
aiGenerating: 'Generating',
|
|
159
|
+
aiError: 'Could not generate a value. Try again.',
|
|
160
|
+
aiOutputLabel: (typeLabel, isExpression)=>`${typeLabel} ${isExpression ? 'expression' : 'value'}`,
|
|
161
|
+
aiOutputHint: (output)=>`Output: ${output}`,
|
|
162
|
+
lockedLabel: 'Read-only',
|
|
163
|
+
unlockedLabel: 'Editable',
|
|
164
|
+
lockedHint: 'Read-only. Click to make editable.',
|
|
165
|
+
unlockedHint: 'Editable. Click to make read-only.'
|
|
166
|
+
};
|
|
167
|
+
exports.DEFAULT_QUICK_FORM_FIELD_STRINGS = __webpack_exports__.DEFAULT_QUICK_FORM_FIELD_STRINGS;
|
|
99
168
|
exports.FIELD_TYPE_META = __webpack_exports__.FIELD_TYPE_META;
|
|
100
169
|
exports.FIELD_TYPE_ORDER = __webpack_exports__.FIELD_TYPE_ORDER;
|
|
101
170
|
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
171
|
+
"DEFAULT_QUICK_FORM_FIELD_STRINGS",
|
|
102
172
|
"FIELD_TYPE_META",
|
|
103
173
|
"FIELD_TYPE_ORDER"
|
|
104
174
|
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|