@uipath/apollo-wind 2.59.0 → 2.60.1
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/README.md +13 -0
- package/dist/components/ui/accordion.cjs +1 -0
- package/dist/components/ui/accordion.js +1 -0
- 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/dialog.cjs +1 -0
- package/dist/components/ui/dialog.js +1 -0
- package/dist/components/ui/drawer.cjs +1 -1
- package/dist/components/ui/drawer.js +1 -1
- 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 +97 -86
- 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/components/ui/sheet.cjs +2 -2
- package/dist/components/ui/sheet.js +2 -2
- package/dist/index.cjs +9 -2
- package/dist/index.d.ts +4 -2
- package/dist/index.js +3 -2
- package/dist/styles.css +53 -0
- package/dist/tailwind.css +72 -0
- 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
|
@@ -0,0 +1,265 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __webpack_require__ = {};
|
|
3
|
+
(()=>{
|
|
4
|
+
__webpack_require__.d = (exports1, definition)=>{
|
|
5
|
+
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: definition[key]
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
})();
|
|
11
|
+
(()=>{
|
|
12
|
+
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
13
|
+
})();
|
|
14
|
+
(()=>{
|
|
15
|
+
__webpack_require__.r = (exports1)=>{
|
|
16
|
+
if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
17
|
+
value: 'Module'
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(exports1, '__esModule', {
|
|
20
|
+
value: true
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
})();
|
|
24
|
+
var __webpack_exports__ = {};
|
|
25
|
+
__webpack_require__.r(__webpack_exports__);
|
|
26
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
27
|
+
FieldHeader: ()=>FieldHeader
|
|
28
|
+
});
|
|
29
|
+
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
30
|
+
const external_lucide_react_namespaceObject = require("lucide-react");
|
|
31
|
+
const external_react_namespaceObject = require("react");
|
|
32
|
+
const external_dropdown_menu_cjs_namespaceObject = require("../../dropdown-menu.cjs");
|
|
33
|
+
const external_form_field_cjs_namespaceObject = require("../../form-field.cjs");
|
|
34
|
+
const external_popover_cjs_namespaceObject = require("../../popover.cjs");
|
|
35
|
+
const external_switch_cjs_namespaceObject = require("../../switch.cjs");
|
|
36
|
+
const external_tooltip_cjs_namespaceObject = require("../../tooltip.cjs");
|
|
37
|
+
const index_cjs_namespaceObject = require("../../../../lib/index.cjs");
|
|
38
|
+
const ai_assist_action_cjs_namespaceObject = require("../../field-actions/ai-assist-action.cjs");
|
|
39
|
+
const collapse_cjs_namespaceObject = require("../../field-actions/collapse.cjs");
|
|
40
|
+
const insert_variable_action_cjs_namespaceObject = require("../../field-actions/insert-variable-action.cjs");
|
|
41
|
+
const external_types_cjs_namespaceObject = require("../types.cjs");
|
|
42
|
+
function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTypes = external_types_cjs_namespaceObject.FIELD_TYPE_ORDER, onFieldTypeChange, onRequiredChange, compact, showFieldActions, onValueChange, variables, onGenerateWithAi, onInsertVariable, strings, headerActions }) {
|
|
43
|
+
const [pickerItems, optionsBySelectionId] = (0, external_react_namespaceObject.useMemo)(()=>{
|
|
44
|
+
const byId = new Map();
|
|
45
|
+
const toItem = (v, id)=>{
|
|
46
|
+
byId.set(id, v);
|
|
47
|
+
return {
|
|
48
|
+
id,
|
|
49
|
+
label: v.label,
|
|
50
|
+
...v.value ? {
|
|
51
|
+
value: v.value
|
|
52
|
+
} : {},
|
|
53
|
+
...v.type ? {
|
|
54
|
+
type: v.type
|
|
55
|
+
} : {},
|
|
56
|
+
...v.children ? {
|
|
57
|
+
children: v.children.map((c, i)=>toItem(c, `${id}/${i}`))
|
|
58
|
+
} : {}
|
|
59
|
+
};
|
|
60
|
+
};
|
|
61
|
+
return [
|
|
62
|
+
variables.map((v, i)=>toItem(v, String(i))),
|
|
63
|
+
byId
|
|
64
|
+
];
|
|
65
|
+
}, [
|
|
66
|
+
variables
|
|
67
|
+
]);
|
|
68
|
+
const typeMeta = external_types_cjs_namespaceObject.FIELD_TYPE_META[fieldType];
|
|
69
|
+
const typeLabel = strings.typeLabels[fieldType] ?? typeMeta.label;
|
|
70
|
+
const collapsedTextClass = (0, index_cjs_namespaceObject.cn)(collapse_cjs_namespaceObject.COLLAPSED_HIDDEN, compact && '!hidden');
|
|
71
|
+
const collapsedPaddingClass = (0, index_cjs_namespaceObject.cn)(collapse_cjs_namespaceObject.COLLAPSED_ICON_PADDING, compact && '!px-1.5');
|
|
72
|
+
const compactOnlyClass = (0, index_cjs_namespaceObject.cn)(collapse_cjs_namespaceObject.COLLAPSED_ONLY, compact && '!block');
|
|
73
|
+
const hasActions = !!onFieldTypeChange || !!onRequiredChange || showFieldActions || null != headerActions;
|
|
74
|
+
if (null != label && !hasActions) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
|
|
75
|
+
children: label
|
|
76
|
+
});
|
|
77
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipProvider, {
|
|
78
|
+
delayDuration: 300,
|
|
79
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldHeader, {
|
|
80
|
+
label: null == label ? fieldLabel : void 0,
|
|
81
|
+
htmlFor: fieldId,
|
|
82
|
+
required: required,
|
|
83
|
+
leading: label,
|
|
84
|
+
actions: hasActions ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
|
|
85
|
+
children: [
|
|
86
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
|
|
87
|
+
className: "flex items-center gap-0.5",
|
|
88
|
+
children: [
|
|
89
|
+
onFieldTypeChange && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenu, {
|
|
90
|
+
children: [
|
|
91
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_tooltip_cjs_namespaceObject.Tooltip, {
|
|
92
|
+
children: [
|
|
93
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipTrigger, {
|
|
94
|
+
asChild: true,
|
|
95
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuTrigger, {
|
|
96
|
+
asChild: true,
|
|
97
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
|
|
98
|
+
type: "button",
|
|
99
|
+
"aria-label": strings.fieldTypeAriaLabel,
|
|
100
|
+
className: (0, index_cjs_namespaceObject.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),
|
|
101
|
+
children: [
|
|
102
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(typeMeta.icon, {
|
|
103
|
+
size: 12
|
|
104
|
+
}),
|
|
105
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
106
|
+
className: collapsedTextClass,
|
|
107
|
+
children: typeLabel
|
|
108
|
+
}),
|
|
109
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
|
|
110
|
+
size: 9,
|
|
111
|
+
className: collapsedTextClass
|
|
112
|
+
})
|
|
113
|
+
]
|
|
114
|
+
})
|
|
115
|
+
})
|
|
116
|
+
}),
|
|
117
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipContent, {
|
|
118
|
+
children: strings.fieldTypeTooltip
|
|
119
|
+
})
|
|
120
|
+
]
|
|
121
|
+
}),
|
|
122
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuContent, {
|
|
123
|
+
align: "end",
|
|
124
|
+
className: "w-44",
|
|
125
|
+
children: fieldTypes.map((type)=>{
|
|
126
|
+
const meta = external_types_cjs_namespaceObject.FIELD_TYPE_META[type];
|
|
127
|
+
const isActive = type === fieldType;
|
|
128
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuItem, {
|
|
129
|
+
onClick: ()=>onFieldTypeChange(type),
|
|
130
|
+
children: [
|
|
131
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(meta.icon, {
|
|
132
|
+
className: isActive ? 'text-brand' : 'text-foreground-muted'
|
|
133
|
+
}),
|
|
134
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
135
|
+
className: (0, index_cjs_namespaceObject.cn)(isActive && 'font-medium text-brand'),
|
|
136
|
+
children: strings.typeLabels[type] ?? meta.label
|
|
137
|
+
})
|
|
138
|
+
]
|
|
139
|
+
}, type);
|
|
140
|
+
})
|
|
141
|
+
})
|
|
142
|
+
]
|
|
143
|
+
}),
|
|
144
|
+
onRequiredChange && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
|
|
145
|
+
children: [
|
|
146
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
147
|
+
className: collapsedTextClass,
|
|
148
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_tooltip_cjs_namespaceObject.Tooltip, {
|
|
149
|
+
children: [
|
|
150
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipTrigger, {
|
|
151
|
+
asChild: true,
|
|
152
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
153
|
+
className: "inline-flex",
|
|
154
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_switch_cjs_namespaceObject.Switch, {
|
|
155
|
+
size: "sm",
|
|
156
|
+
checked: !!required,
|
|
157
|
+
onCheckedChange: onRequiredChange,
|
|
158
|
+
className: "data-[state=checked]:bg-brand data-[state=unchecked]:bg-foreground-subtle",
|
|
159
|
+
"aria-label": required ? strings.requiredAriaLabel : strings.optionalAriaLabel
|
|
160
|
+
})
|
|
161
|
+
})
|
|
162
|
+
}),
|
|
163
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipContent, {
|
|
164
|
+
children: strings.requiredTooltip
|
|
165
|
+
})
|
|
166
|
+
]
|
|
167
|
+
})
|
|
168
|
+
}),
|
|
169
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
170
|
+
className: compactOnlyClass,
|
|
171
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
|
|
172
|
+
children: [
|
|
173
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_tooltip_cjs_namespaceObject.Tooltip, {
|
|
174
|
+
children: [
|
|
175
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipTrigger, {
|
|
176
|
+
asChild: true,
|
|
177
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
|
|
178
|
+
asChild: true,
|
|
179
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
|
|
180
|
+
type: "button",
|
|
181
|
+
"aria-label": required ? strings.requiredAriaLabel : strings.optionalAriaLabel,
|
|
182
|
+
className: "grid size-7 place-items-center rounded-lg text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground",
|
|
183
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Asterisk, {
|
|
184
|
+
size: 12
|
|
185
|
+
})
|
|
186
|
+
})
|
|
187
|
+
})
|
|
188
|
+
}),
|
|
189
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipContent, {
|
|
190
|
+
children: strings.requiredTooltip
|
|
191
|
+
})
|
|
192
|
+
]
|
|
193
|
+
}),
|
|
194
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverContent, {
|
|
195
|
+
align: "end",
|
|
196
|
+
className: "w-48",
|
|
197
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
|
|
198
|
+
className: "flex items-center justify-between gap-3",
|
|
199
|
+
children: [
|
|
200
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
201
|
+
className: "text-xs font-medium text-foreground",
|
|
202
|
+
children: strings.requiredTooltip
|
|
203
|
+
}),
|
|
204
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_switch_cjs_namespaceObject.Switch, {
|
|
205
|
+
size: "sm",
|
|
206
|
+
checked: !!required,
|
|
207
|
+
onCheckedChange: onRequiredChange,
|
|
208
|
+
className: "data-[state=checked]:bg-brand data-[state=unchecked]:bg-foreground-subtle",
|
|
209
|
+
"aria-label": required ? strings.requiredAriaLabel : strings.optionalAriaLabel
|
|
210
|
+
})
|
|
211
|
+
]
|
|
212
|
+
})
|
|
213
|
+
})
|
|
214
|
+
]
|
|
215
|
+
})
|
|
216
|
+
})
|
|
217
|
+
]
|
|
218
|
+
}),
|
|
219
|
+
showFieldActions && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
|
|
220
|
+
children: [
|
|
221
|
+
onGenerateWithAi && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ai_assist_action_cjs_namespaceObject.AiAssistAction, {
|
|
222
|
+
onGenerate: onGenerateWithAi,
|
|
223
|
+
hint: strings.aiOutputHint(strings.aiOutputLabel(typeLabel, typeMeta.supportsExpression)),
|
|
224
|
+
strings: {
|
|
225
|
+
trigger: strings.aiAssistAriaLabel,
|
|
226
|
+
tooltip: strings.aiAssistTooltip,
|
|
227
|
+
prompt: strings.aiPromptLabel,
|
|
228
|
+
promptPlaceholder: strings.aiPromptPlaceholder,
|
|
229
|
+
generate: strings.aiGenerate,
|
|
230
|
+
generating: strings.aiGenerating,
|
|
231
|
+
error: strings.aiError
|
|
232
|
+
}
|
|
233
|
+
}),
|
|
234
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(insert_variable_action_cjs_namespaceObject.InsertVariableAction, {
|
|
235
|
+
variables: pickerItems,
|
|
236
|
+
compact: compact,
|
|
237
|
+
disabled: !onValueChange,
|
|
238
|
+
strings: {
|
|
239
|
+
label: strings.insertLabel,
|
|
240
|
+
ariaLabel: strings.insertAriaLabel,
|
|
241
|
+
searchPlaceholder: strings.insertSearchPlaceholder,
|
|
242
|
+
empty: strings.insertEmpty
|
|
243
|
+
},
|
|
244
|
+
onInsert: onInsertVariable && ((value, item)=>onInsertVariable(optionsBySelectionId.get(item.id) ?? {
|
|
245
|
+
label: item.label,
|
|
246
|
+
value
|
|
247
|
+
}))
|
|
248
|
+
})
|
|
249
|
+
]
|
|
250
|
+
})
|
|
251
|
+
]
|
|
252
|
+
}),
|
|
253
|
+
headerActions
|
|
254
|
+
]
|
|
255
|
+
}) : void 0
|
|
256
|
+
})
|
|
257
|
+
});
|
|
258
|
+
}
|
|
259
|
+
exports.FieldHeader = __webpack_exports__.FieldHeader;
|
|
260
|
+
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
261
|
+
"FieldHeader"
|
|
262
|
+
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
263
|
+
Object.defineProperty(exports, '__esModule', {
|
|
264
|
+
value: true
|
|
265
|
+
});
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import type { QuickFieldType, QuickFormFieldOption, QuickFormFieldStrings } from '../types';
|
|
3
|
+
export declare function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTypes, onFieldTypeChange, onRequiredChange, compact, showFieldActions, onValueChange, variables, onGenerateWithAi, onInsertVariable, strings, headerActions, }: {
|
|
4
|
+
label?: ReactNode;
|
|
5
|
+
fieldId: string;
|
|
6
|
+
fieldLabel: string;
|
|
7
|
+
required?: boolean;
|
|
8
|
+
fieldType: QuickFieldType;
|
|
9
|
+
/** See QuickFormFieldProps.fieldTypes. */
|
|
10
|
+
fieldTypes?: readonly QuickFieldType[];
|
|
11
|
+
onFieldTypeChange?: (fieldType: QuickFieldType) => void;
|
|
12
|
+
onRequiredChange?: (required: boolean) => void;
|
|
13
|
+
compact?: boolean;
|
|
14
|
+
showFieldActions: boolean;
|
|
15
|
+
onValueChange?: (value: string) => void;
|
|
16
|
+
variables: QuickFormFieldOption[];
|
|
17
|
+
onGenerateWithAi?: (prompt: string) => void;
|
|
18
|
+
/** See QuickFormFieldProps.onInsertVariable. */
|
|
19
|
+
onInsertVariable?: (variable: QuickFormFieldOption) => void;
|
|
20
|
+
/** See QuickFormFieldStrings. */
|
|
21
|
+
strings: QuickFormFieldStrings;
|
|
22
|
+
headerActions?: ReactNode;
|
|
23
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,231 @@
|
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Asterisk, ChevronDown } from "lucide-react";
|
|
3
|
+
import { useMemo } from "react";
|
|
4
|
+
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../dropdown-menu.js";
|
|
5
|
+
import { FormFieldHeader } from "../../form-field.js";
|
|
6
|
+
import { Popover, PopoverContent, PopoverTrigger } from "../../popover.js";
|
|
7
|
+
import { Switch } from "../../switch.js";
|
|
8
|
+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../tooltip.js";
|
|
9
|
+
import { cn } from "../../../../lib/index.js";
|
|
10
|
+
import { AiAssistAction } from "../../field-actions/ai-assist-action.js";
|
|
11
|
+
import { COLLAPSED_HIDDEN, COLLAPSED_ICON_PADDING, COLLAPSED_ONLY } from "../../field-actions/collapse.js";
|
|
12
|
+
import { InsertVariableAction } from "../../field-actions/insert-variable-action.js";
|
|
13
|
+
import { FIELD_TYPE_META, FIELD_TYPE_ORDER } from "../types.js";
|
|
14
|
+
function FieldHeader({ label, fieldId, fieldLabel, required, fieldType, fieldTypes = FIELD_TYPE_ORDER, onFieldTypeChange, onRequiredChange, compact, showFieldActions, onValueChange, variables, onGenerateWithAi, onInsertVariable, strings, headerActions }) {
|
|
15
|
+
const [pickerItems, optionsBySelectionId] = useMemo(()=>{
|
|
16
|
+
const byId = new Map();
|
|
17
|
+
const toItem = (v, id)=>{
|
|
18
|
+
byId.set(id, v);
|
|
19
|
+
return {
|
|
20
|
+
id,
|
|
21
|
+
label: v.label,
|
|
22
|
+
...v.value ? {
|
|
23
|
+
value: v.value
|
|
24
|
+
} : {},
|
|
25
|
+
...v.type ? {
|
|
26
|
+
type: v.type
|
|
27
|
+
} : {},
|
|
28
|
+
...v.children ? {
|
|
29
|
+
children: v.children.map((c, i)=>toItem(c, `${id}/${i}`))
|
|
30
|
+
} : {}
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
return [
|
|
34
|
+
variables.map((v, i)=>toItem(v, String(i))),
|
|
35
|
+
byId
|
|
36
|
+
];
|
|
37
|
+
}, [
|
|
38
|
+
variables
|
|
39
|
+
]);
|
|
40
|
+
const typeMeta = FIELD_TYPE_META[fieldType];
|
|
41
|
+
const typeLabel = strings.typeLabels[fieldType] ?? typeMeta.label;
|
|
42
|
+
const collapsedTextClass = cn(COLLAPSED_HIDDEN, compact && '!hidden');
|
|
43
|
+
const collapsedPaddingClass = cn(COLLAPSED_ICON_PADDING, compact && '!px-1.5');
|
|
44
|
+
const compactOnlyClass = cn(COLLAPSED_ONLY, compact && '!block');
|
|
45
|
+
const hasActions = !!onFieldTypeChange || !!onRequiredChange || showFieldActions || null != headerActions;
|
|
46
|
+
if (null != label && !hasActions) return /*#__PURE__*/ jsx(Fragment, {
|
|
47
|
+
children: label
|
|
48
|
+
});
|
|
49
|
+
return /*#__PURE__*/ jsx(TooltipProvider, {
|
|
50
|
+
delayDuration: 300,
|
|
51
|
+
children: /*#__PURE__*/ jsx(FormFieldHeader, {
|
|
52
|
+
label: null == label ? fieldLabel : void 0,
|
|
53
|
+
htmlFor: fieldId,
|
|
54
|
+
required: required,
|
|
55
|
+
leading: label,
|
|
56
|
+
actions: hasActions ? /*#__PURE__*/ jsxs(Fragment, {
|
|
57
|
+
children: [
|
|
58
|
+
/*#__PURE__*/ jsxs("div", {
|
|
59
|
+
className: "flex items-center gap-0.5",
|
|
60
|
+
children: [
|
|
61
|
+
onFieldTypeChange && /*#__PURE__*/ jsxs(DropdownMenu, {
|
|
62
|
+
children: [
|
|
63
|
+
/*#__PURE__*/ jsxs(Tooltip, {
|
|
64
|
+
children: [
|
|
65
|
+
/*#__PURE__*/ jsx(TooltipTrigger, {
|
|
66
|
+
asChild: true,
|
|
67
|
+
children: /*#__PURE__*/ jsx(DropdownMenuTrigger, {
|
|
68
|
+
asChild: true,
|
|
69
|
+
children: /*#__PURE__*/ jsxs("button", {
|
|
70
|
+
type: "button",
|
|
71
|
+
"aria-label": strings.fieldTypeAriaLabel,
|
|
72
|
+
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),
|
|
73
|
+
children: [
|
|
74
|
+
/*#__PURE__*/ jsx(typeMeta.icon, {
|
|
75
|
+
size: 12
|
|
76
|
+
}),
|
|
77
|
+
/*#__PURE__*/ jsx("span", {
|
|
78
|
+
className: collapsedTextClass,
|
|
79
|
+
children: typeLabel
|
|
80
|
+
}),
|
|
81
|
+
/*#__PURE__*/ jsx(ChevronDown, {
|
|
82
|
+
size: 9,
|
|
83
|
+
className: collapsedTextClass
|
|
84
|
+
})
|
|
85
|
+
]
|
|
86
|
+
})
|
|
87
|
+
})
|
|
88
|
+
}),
|
|
89
|
+
/*#__PURE__*/ jsx(TooltipContent, {
|
|
90
|
+
children: strings.fieldTypeTooltip
|
|
91
|
+
})
|
|
92
|
+
]
|
|
93
|
+
}),
|
|
94
|
+
/*#__PURE__*/ jsx(DropdownMenuContent, {
|
|
95
|
+
align: "end",
|
|
96
|
+
className: "w-44",
|
|
97
|
+
children: fieldTypes.map((type)=>{
|
|
98
|
+
const meta = FIELD_TYPE_META[type];
|
|
99
|
+
const isActive = type === fieldType;
|
|
100
|
+
return /*#__PURE__*/ jsxs(DropdownMenuItem, {
|
|
101
|
+
onClick: ()=>onFieldTypeChange(type),
|
|
102
|
+
children: [
|
|
103
|
+
/*#__PURE__*/ jsx(meta.icon, {
|
|
104
|
+
className: isActive ? 'text-brand' : 'text-foreground-muted'
|
|
105
|
+
}),
|
|
106
|
+
/*#__PURE__*/ jsx("span", {
|
|
107
|
+
className: cn(isActive && 'font-medium text-brand'),
|
|
108
|
+
children: strings.typeLabels[type] ?? meta.label
|
|
109
|
+
})
|
|
110
|
+
]
|
|
111
|
+
}, type);
|
|
112
|
+
})
|
|
113
|
+
})
|
|
114
|
+
]
|
|
115
|
+
}),
|
|
116
|
+
onRequiredChange && /*#__PURE__*/ jsxs(Fragment, {
|
|
117
|
+
children: [
|
|
118
|
+
/*#__PURE__*/ jsx("div", {
|
|
119
|
+
className: collapsedTextClass,
|
|
120
|
+
children: /*#__PURE__*/ jsxs(Tooltip, {
|
|
121
|
+
children: [
|
|
122
|
+
/*#__PURE__*/ jsx(TooltipTrigger, {
|
|
123
|
+
asChild: true,
|
|
124
|
+
children: /*#__PURE__*/ jsx("span", {
|
|
125
|
+
className: "inline-flex",
|
|
126
|
+
children: /*#__PURE__*/ jsx(Switch, {
|
|
127
|
+
size: "sm",
|
|
128
|
+
checked: !!required,
|
|
129
|
+
onCheckedChange: onRequiredChange,
|
|
130
|
+
className: "data-[state=checked]:bg-brand data-[state=unchecked]:bg-foreground-subtle",
|
|
131
|
+
"aria-label": required ? strings.requiredAriaLabel : strings.optionalAriaLabel
|
|
132
|
+
})
|
|
133
|
+
})
|
|
134
|
+
}),
|
|
135
|
+
/*#__PURE__*/ jsx(TooltipContent, {
|
|
136
|
+
children: strings.requiredTooltip
|
|
137
|
+
})
|
|
138
|
+
]
|
|
139
|
+
})
|
|
140
|
+
}),
|
|
141
|
+
/*#__PURE__*/ jsx("div", {
|
|
142
|
+
className: compactOnlyClass,
|
|
143
|
+
children: /*#__PURE__*/ jsxs(Popover, {
|
|
144
|
+
children: [
|
|
145
|
+
/*#__PURE__*/ jsxs(Tooltip, {
|
|
146
|
+
children: [
|
|
147
|
+
/*#__PURE__*/ jsx(TooltipTrigger, {
|
|
148
|
+
asChild: true,
|
|
149
|
+
children: /*#__PURE__*/ jsx(PopoverTrigger, {
|
|
150
|
+
asChild: true,
|
|
151
|
+
children: /*#__PURE__*/ jsx("button", {
|
|
152
|
+
type: "button",
|
|
153
|
+
"aria-label": required ? strings.requiredAriaLabel : strings.optionalAriaLabel,
|
|
154
|
+
className: "grid size-7 place-items-center rounded-lg text-foreground-subtle transition hover:bg-surface-overlay hover:text-foreground",
|
|
155
|
+
children: /*#__PURE__*/ jsx(Asterisk, {
|
|
156
|
+
size: 12
|
|
157
|
+
})
|
|
158
|
+
})
|
|
159
|
+
})
|
|
160
|
+
}),
|
|
161
|
+
/*#__PURE__*/ jsx(TooltipContent, {
|
|
162
|
+
children: strings.requiredTooltip
|
|
163
|
+
})
|
|
164
|
+
]
|
|
165
|
+
}),
|
|
166
|
+
/*#__PURE__*/ jsx(PopoverContent, {
|
|
167
|
+
align: "end",
|
|
168
|
+
className: "w-48",
|
|
169
|
+
children: /*#__PURE__*/ jsxs("div", {
|
|
170
|
+
className: "flex items-center justify-between gap-3",
|
|
171
|
+
children: [
|
|
172
|
+
/*#__PURE__*/ jsx("span", {
|
|
173
|
+
className: "text-xs font-medium text-foreground",
|
|
174
|
+
children: strings.requiredTooltip
|
|
175
|
+
}),
|
|
176
|
+
/*#__PURE__*/ jsx(Switch, {
|
|
177
|
+
size: "sm",
|
|
178
|
+
checked: !!required,
|
|
179
|
+
onCheckedChange: onRequiredChange,
|
|
180
|
+
className: "data-[state=checked]:bg-brand data-[state=unchecked]:bg-foreground-subtle",
|
|
181
|
+
"aria-label": required ? strings.requiredAriaLabel : strings.optionalAriaLabel
|
|
182
|
+
})
|
|
183
|
+
]
|
|
184
|
+
})
|
|
185
|
+
})
|
|
186
|
+
]
|
|
187
|
+
})
|
|
188
|
+
})
|
|
189
|
+
]
|
|
190
|
+
}),
|
|
191
|
+
showFieldActions && /*#__PURE__*/ jsxs(Fragment, {
|
|
192
|
+
children: [
|
|
193
|
+
onGenerateWithAi && /*#__PURE__*/ jsx(AiAssistAction, {
|
|
194
|
+
onGenerate: onGenerateWithAi,
|
|
195
|
+
hint: strings.aiOutputHint(strings.aiOutputLabel(typeLabel, typeMeta.supportsExpression)),
|
|
196
|
+
strings: {
|
|
197
|
+
trigger: strings.aiAssistAriaLabel,
|
|
198
|
+
tooltip: strings.aiAssistTooltip,
|
|
199
|
+
prompt: strings.aiPromptLabel,
|
|
200
|
+
promptPlaceholder: strings.aiPromptPlaceholder,
|
|
201
|
+
generate: strings.aiGenerate,
|
|
202
|
+
generating: strings.aiGenerating,
|
|
203
|
+
error: strings.aiError
|
|
204
|
+
}
|
|
205
|
+
}),
|
|
206
|
+
/*#__PURE__*/ jsx(InsertVariableAction, {
|
|
207
|
+
variables: pickerItems,
|
|
208
|
+
compact: compact,
|
|
209
|
+
disabled: !onValueChange,
|
|
210
|
+
strings: {
|
|
211
|
+
label: strings.insertLabel,
|
|
212
|
+
ariaLabel: strings.insertAriaLabel,
|
|
213
|
+
searchPlaceholder: strings.insertSearchPlaceholder,
|
|
214
|
+
empty: strings.insertEmpty
|
|
215
|
+
},
|
|
216
|
+
onInsert: onInsertVariable && ((value, item)=>onInsertVariable(optionsBySelectionId.get(item.id) ?? {
|
|
217
|
+
label: item.label,
|
|
218
|
+
value
|
|
219
|
+
}))
|
|
220
|
+
})
|
|
221
|
+
]
|
|
222
|
+
})
|
|
223
|
+
]
|
|
224
|
+
}),
|
|
225
|
+
headerActions
|
|
226
|
+
]
|
|
227
|
+
}) : void 0
|
|
228
|
+
})
|
|
229
|
+
});
|
|
230
|
+
}
|
|
231
|
+
export { FieldHeader };
|
|
@@ -30,7 +30,7 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
|
30
30
|
const external_lucide_react_namespaceObject = require("lucide-react");
|
|
31
31
|
const external_input_group_cjs_namespaceObject = require("../../input-group.cjs");
|
|
32
32
|
const external_tooltip_cjs_namespaceObject = require("../../tooltip.cjs");
|
|
33
|
-
function LockToggleButton({ locked, onLockedChange }) {
|
|
33
|
+
function LockToggleButton({ locked, onLockedChange, strings }) {
|
|
34
34
|
const interactive = !!onLockedChange;
|
|
35
35
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipProvider, {
|
|
36
36
|
delayDuration: 300,
|
|
@@ -43,7 +43,7 @@ function LockToggleButton({ locked, onLockedChange }) {
|
|
|
43
43
|
size: "3xs",
|
|
44
44
|
disabled: !interactive,
|
|
45
45
|
onClick: ()=>onLockedChange?.(!locked),
|
|
46
|
-
"aria-label": interactive ? locked ?
|
|
46
|
+
"aria-label": interactive ? locked ? strings.lockedHint : strings.unlockedHint : locked ? strings.lockedLabel : strings.unlockedLabel,
|
|
47
47
|
children: locked ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.LockKeyhole, {
|
|
48
48
|
size: 16
|
|
49
49
|
}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.LockKeyholeOpen, {
|
|
@@ -52,7 +52,7 @@ function LockToggleButton({ locked, onLockedChange }) {
|
|
|
52
52
|
})
|
|
53
53
|
}),
|
|
54
54
|
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipContent, {
|
|
55
|
-
children: locked ?
|
|
55
|
+
children: locked ? strings.lockedLabel : strings.unlockedLabel
|
|
56
56
|
})
|
|
57
57
|
]
|
|
58
58
|
})
|
|
@@ -1,9 +1,12 @@
|
|
|
1
|
+
import type { QuickFormFieldStrings } from '../types';
|
|
1
2
|
/**
|
|
2
3
|
* The lock/unlock toggle shared by both the InputGroup and plain-Input
|
|
3
4
|
* layouts. Disabled (and its label adjusted) when onLockedChange isn't
|
|
4
5
|
* provided, since clicking it wouldn't do anything otherwise.
|
|
5
6
|
*/
|
|
6
|
-
export declare function LockToggleButton({ locked, onLockedChange, }: {
|
|
7
|
+
export declare function LockToggleButton({ locked, onLockedChange, strings, }: {
|
|
7
8
|
locked: boolean;
|
|
8
9
|
onLockedChange?: (locked: boolean) => void;
|
|
10
|
+
/** See QuickFormFieldStrings. */
|
|
11
|
+
strings: QuickFormFieldStrings;
|
|
9
12
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { LockKeyhole, LockKeyholeOpen } from "lucide-react";
|
|
3
3
|
import { InputGroupButton } from "../../input-group.js";
|
|
4
4
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../tooltip.js";
|
|
5
|
-
function LockToggleButton({ locked, onLockedChange }) {
|
|
5
|
+
function LockToggleButton({ locked, onLockedChange, strings }) {
|
|
6
6
|
const interactive = !!onLockedChange;
|
|
7
7
|
return /*#__PURE__*/ jsx(TooltipProvider, {
|
|
8
8
|
delayDuration: 300,
|
|
@@ -15,7 +15,7 @@ function LockToggleButton({ locked, onLockedChange }) {
|
|
|
15
15
|
size: "3xs",
|
|
16
16
|
disabled: !interactive,
|
|
17
17
|
onClick: ()=>onLockedChange?.(!locked),
|
|
18
|
-
"aria-label": interactive ? locked ?
|
|
18
|
+
"aria-label": interactive ? locked ? strings.lockedHint : strings.unlockedHint : locked ? strings.lockedLabel : strings.unlockedLabel,
|
|
19
19
|
children: locked ? /*#__PURE__*/ jsx(LockKeyhole, {
|
|
20
20
|
size: 16
|
|
21
21
|
}) : /*#__PURE__*/ jsx(LockKeyholeOpen, {
|
|
@@ -24,7 +24,7 @@ function LockToggleButton({ locked, onLockedChange }) {
|
|
|
24
24
|
})
|
|
25
25
|
}),
|
|
26
26
|
/*#__PURE__*/ jsx(TooltipContent, {
|
|
27
|
-
children: locked ?
|
|
27
|
+
children: locked ? strings.lockedLabel : strings.unlockedLabel
|
|
28
28
|
})
|
|
29
29
|
]
|
|
30
30
|
})
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __webpack_require__ = {};
|
|
3
|
+
(()=>{
|
|
4
|
+
__webpack_require__.d = (exports1, definition)=>{
|
|
5
|
+
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: definition[key]
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
})();
|
|
11
|
+
(()=>{
|
|
12
|
+
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
13
|
+
})();
|
|
14
|
+
(()=>{
|
|
15
|
+
__webpack_require__.r = (exports1)=>{
|
|
16
|
+
if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
17
|
+
value: 'Module'
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(exports1, '__esModule', {
|
|
20
|
+
value: true
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
})();
|
|
24
|
+
var __webpack_exports__ = {};
|
|
25
|
+
__webpack_require__.r(__webpack_exports__);
|
|
26
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
27
|
+
FIELD_TYPE_META: ()=>external_types_cjs_namespaceObject.FIELD_TYPE_META,
|
|
28
|
+
QuickFormField: ()=>external_quick_form_field_cjs_namespaceObject.QuickFormField,
|
|
29
|
+
FIELD_TYPE_ORDER: ()=>external_types_cjs_namespaceObject.FIELD_TYPE_ORDER,
|
|
30
|
+
DEFAULT_QUICK_FORM_FIELD_STRINGS: ()=>external_types_cjs_namespaceObject.DEFAULT_QUICK_FORM_FIELD_STRINGS
|
|
31
|
+
});
|
|
32
|
+
const external_quick_form_field_cjs_namespaceObject = require("./quick-form-field.cjs");
|
|
33
|
+
const external_types_cjs_namespaceObject = require("./types.cjs");
|
|
34
|
+
exports.DEFAULT_QUICK_FORM_FIELD_STRINGS = __webpack_exports__.DEFAULT_QUICK_FORM_FIELD_STRINGS;
|
|
35
|
+
exports.FIELD_TYPE_META = __webpack_exports__.FIELD_TYPE_META;
|
|
36
|
+
exports.FIELD_TYPE_ORDER = __webpack_exports__.FIELD_TYPE_ORDER;
|
|
37
|
+
exports.QuickFormField = __webpack_exports__.QuickFormField;
|
|
38
|
+
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
39
|
+
"DEFAULT_QUICK_FORM_FIELD_STRINGS",
|
|
40
|
+
"FIELD_TYPE_META",
|
|
41
|
+
"FIELD_TYPE_ORDER",
|
|
42
|
+
"QuickFormField"
|
|
43
|
+
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
44
|
+
Object.defineProperty(exports, '__esModule', {
|
|
45
|
+
value: true
|
|
46
|
+
});
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { QuickFormField } from './quick-form-field';
|
|
2
|
+
export type { QuickFieldType, QuickFormFieldMode, QuickFormFieldMoreActions, QuickFormFieldOption, QuickFormFieldProps, QuickFormFieldStrings, VariableInsertContext, } from './types';
|
|
3
|
+
export { DEFAULT_QUICK_FORM_FIELD_STRINGS, FIELD_TYPE_META, FIELD_TYPE_ORDER } from './types';
|