@uipath/apollo-wind 2.40.0 → 2.41.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/forms/field-renderer.cjs +61 -94
- package/dist/components/forms/field-renderer.d.ts +1 -1
- package/dist/components/forms/field-renderer.js +50 -83
- package/dist/components/ui/form-field.cjs +90 -0
- package/dist/components/ui/form-field.d.ts +26 -0
- package/dist/components/ui/form-field.js +47 -0
- package/dist/components/ui/index.cjs +125 -115
- package/dist/components/ui/index.d.ts +1 -0
- package/dist/components/ui/index.js +1 -0
- package/dist/components/ui/input-group.cjs +3 -4
- package/dist/components/ui/input-group.js +3 -4
- package/dist/components/ui/input.cjs +3 -4
- package/dist/components/ui/input.js +3 -4
- package/dist/components/ui/label.cjs +18 -5
- package/dist/components/ui/label.d.ts +26 -4
- package/dist/components/ui/label.js +18 -5
- package/dist/components/ui/lockable-value-field/lockable-value-field.cjs +3 -4
- package/dist/components/ui/lockable-value-field/lockable-value-field.js +3 -4
- package/dist/index.cjs +16 -3
- package/dist/index.d.ts +3 -1
- package/dist/index.js +2 -1
- package/package.json +1 -1
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useMemo, useRef, useState } from "react";
|
|
3
3
|
import { Controller, useFormContext } from "react-hook-form";
|
|
4
|
-
import { hasOptions, isCustomField } from "./form-schema.js";
|
|
5
|
-
import { RulesEngine } from "./rules-engine.js";
|
|
6
|
-
import { DataFetcher } from "./data-fetcher.js";
|
|
7
|
-
import { Input } from "../ui/input.js";
|
|
8
|
-
import { Textarea } from "../ui/textarea.js";
|
|
9
|
-
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select.js";
|
|
10
|
-
import { MultiSelect } from "../ui/multi-select.js";
|
|
11
4
|
import { Checkbox } from "../ui/checkbox.js";
|
|
12
|
-
import { Switch } from "../ui/switch.js";
|
|
13
|
-
import { RadioGroup, RadioGroupItem } from "../ui/radio-group.js";
|
|
14
|
-
import { Slider } from "../ui/slider.js";
|
|
15
|
-
import { Label, RequiredIndicator } from "../ui/label.js";
|
|
16
5
|
import { DatePicker } from "../ui/date-picker.js";
|
|
17
6
|
import { DateTimePicker } from "../ui/datetime-picker.js";
|
|
18
7
|
import { FileUpload } from "../ui/file-upload.js";
|
|
19
|
-
import {
|
|
8
|
+
import { FormField, FormFieldDescription, FormFieldError, FormFieldLabel } from "../ui/form-field.js";
|
|
9
|
+
import { Input } from "../ui/input.js";
|
|
10
|
+
import { Label } from "../ui/label.js";
|
|
11
|
+
import { MultiSelect } from "../ui/multi-select.js";
|
|
12
|
+
import { RadioGroup, RadioGroupItem } from "../ui/radio-group.js";
|
|
13
|
+
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select.js";
|
|
14
|
+
import { Slider } from "../ui/slider.js";
|
|
15
|
+
import { Switch } from "../ui/switch.js";
|
|
16
|
+
import { Textarea } from "../ui/textarea.js";
|
|
17
|
+
import { deepEqual } from "../../lib/index.js";
|
|
18
|
+
import { DataFetcher } from "./data-fetcher.js";
|
|
19
|
+
import { hasOptions, isCustomField } from "./form-schema.js";
|
|
20
|
+
import { RulesEngine } from "./rules-engine.js";
|
|
20
21
|
function FormFieldRenderer({ field, context, customComponents, disabled: formDisabled = false }) {
|
|
21
22
|
const { control, watch, getValues } = useFormContext();
|
|
22
23
|
const contextRef = useRef(context);
|
|
@@ -188,7 +189,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
|
|
|
188
189
|
case 'email':
|
|
189
190
|
return /*#__PURE__*/ jsxs(FormField, {
|
|
190
191
|
children: [
|
|
191
|
-
/*#__PURE__*/ jsx(
|
|
192
|
+
/*#__PURE__*/ jsx(FormFieldLabel, {
|
|
192
193
|
required: required,
|
|
193
194
|
children: field.label
|
|
194
195
|
}),
|
|
@@ -203,10 +204,10 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
|
|
|
203
204
|
disabled: disabled,
|
|
204
205
|
"aria-label": field.ariaLabel
|
|
205
206
|
}),
|
|
206
|
-
/*#__PURE__*/ jsx(
|
|
207
|
+
/*#__PURE__*/ jsx(FormFieldDescription, {
|
|
207
208
|
children: field.description
|
|
208
209
|
}),
|
|
209
|
-
/*#__PURE__*/ jsx(
|
|
210
|
+
/*#__PURE__*/ jsx(FormFieldError, {
|
|
210
211
|
children: error
|
|
211
212
|
})
|
|
212
213
|
]
|
|
@@ -214,7 +215,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
|
|
|
214
215
|
case 'number':
|
|
215
216
|
return /*#__PURE__*/ jsxs(FormField, {
|
|
216
217
|
children: [
|
|
217
|
-
/*#__PURE__*/ jsx(
|
|
218
|
+
/*#__PURE__*/ jsx(FormFieldLabel, {
|
|
218
219
|
required: required,
|
|
219
220
|
children: field.label
|
|
220
221
|
}),
|
|
@@ -231,10 +232,10 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
|
|
|
231
232
|
disabled: disabled,
|
|
232
233
|
onChange: (e)=>formField.onChange(parseFloat(e.target.value))
|
|
233
234
|
}),
|
|
234
|
-
/*#__PURE__*/ jsx(
|
|
235
|
+
/*#__PURE__*/ jsx(FormFieldDescription, {
|
|
235
236
|
children: field.description
|
|
236
237
|
}),
|
|
237
|
-
/*#__PURE__*/ jsx(
|
|
238
|
+
/*#__PURE__*/ jsx(FormFieldError, {
|
|
238
239
|
children: error
|
|
239
240
|
})
|
|
240
241
|
]
|
|
@@ -242,7 +243,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
|
|
|
242
243
|
case 'textarea':
|
|
243
244
|
return /*#__PURE__*/ jsxs(FormField, {
|
|
244
245
|
children: [
|
|
245
|
-
/*#__PURE__*/ jsx(
|
|
246
|
+
/*#__PURE__*/ jsx(FormFieldLabel, {
|
|
246
247
|
required: required,
|
|
247
248
|
children: field.label
|
|
248
249
|
}),
|
|
@@ -256,10 +257,10 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
|
|
|
256
257
|
disabled: disabled,
|
|
257
258
|
rows: field.rows || 4
|
|
258
259
|
}),
|
|
259
|
-
/*#__PURE__*/ jsx(
|
|
260
|
+
/*#__PURE__*/ jsx(FormFieldDescription, {
|
|
260
261
|
children: field.description
|
|
261
262
|
}),
|
|
262
|
-
/*#__PURE__*/ jsx(
|
|
263
|
+
/*#__PURE__*/ jsx(FormFieldError, {
|
|
263
264
|
children: error
|
|
264
265
|
})
|
|
265
266
|
]
|
|
@@ -267,7 +268,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
|
|
|
267
268
|
case 'select':
|
|
268
269
|
return /*#__PURE__*/ jsxs(FormField, {
|
|
269
270
|
children: [
|
|
270
|
-
/*#__PURE__*/ jsx(
|
|
271
|
+
/*#__PURE__*/ jsx(FormFieldLabel, {
|
|
271
272
|
required: required,
|
|
272
273
|
children: field.label
|
|
273
274
|
}),
|
|
@@ -291,10 +292,10 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
|
|
|
291
292
|
})
|
|
292
293
|
]
|
|
293
294
|
}),
|
|
294
|
-
/*#__PURE__*/ jsx(
|
|
295
|
+
/*#__PURE__*/ jsx(FormFieldDescription, {
|
|
295
296
|
children: field.description
|
|
296
297
|
}),
|
|
297
|
-
/*#__PURE__*/ jsx(
|
|
298
|
+
/*#__PURE__*/ jsx(FormFieldError, {
|
|
298
299
|
children: error
|
|
299
300
|
})
|
|
300
301
|
]
|
|
@@ -302,7 +303,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
|
|
|
302
303
|
case 'multiselect':
|
|
303
304
|
return /*#__PURE__*/ jsxs(FormField, {
|
|
304
305
|
children: [
|
|
305
|
-
/*#__PURE__*/ jsx(
|
|
306
|
+
/*#__PURE__*/ jsx(FormFieldLabel, {
|
|
306
307
|
required: required,
|
|
307
308
|
children: field.label
|
|
308
309
|
}),
|
|
@@ -319,10 +320,10 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
|
|
|
319
320
|
searchPlaceholder: "Search...",
|
|
320
321
|
maxSelected: field.maxSelected
|
|
321
322
|
}),
|
|
322
|
-
/*#__PURE__*/ jsx(
|
|
323
|
+
/*#__PURE__*/ jsx(FormFieldDescription, {
|
|
323
324
|
children: field.description
|
|
324
325
|
}),
|
|
325
|
-
/*#__PURE__*/ jsx(
|
|
326
|
+
/*#__PURE__*/ jsx(FormFieldError, {
|
|
326
327
|
children: error
|
|
327
328
|
})
|
|
328
329
|
]
|
|
@@ -342,19 +343,19 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
|
|
|
342
343
|
/*#__PURE__*/ jsxs("div", {
|
|
343
344
|
className: "space-y-1 leading-none",
|
|
344
345
|
children: [
|
|
345
|
-
/*#__PURE__*/ jsx(
|
|
346
|
+
/*#__PURE__*/ jsx(FormFieldLabel, {
|
|
346
347
|
htmlFor: field.name,
|
|
347
348
|
className: "font-normal",
|
|
348
349
|
children: field.label
|
|
349
350
|
}),
|
|
350
|
-
/*#__PURE__*/ jsx(
|
|
351
|
+
/*#__PURE__*/ jsx(FormFieldDescription, {
|
|
351
352
|
children: field.description
|
|
352
353
|
})
|
|
353
354
|
]
|
|
354
355
|
})
|
|
355
356
|
]
|
|
356
357
|
}),
|
|
357
|
-
/*#__PURE__*/ jsx(
|
|
358
|
+
/*#__PURE__*/ jsx(FormFieldError, {
|
|
358
359
|
children: error
|
|
359
360
|
})
|
|
360
361
|
]
|
|
@@ -368,10 +369,10 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
|
|
|
368
369
|
/*#__PURE__*/ jsxs("div", {
|
|
369
370
|
className: "space-y-0.5",
|
|
370
371
|
children: [
|
|
371
|
-
/*#__PURE__*/ jsx(
|
|
372
|
+
/*#__PURE__*/ jsx(FormFieldLabel, {
|
|
372
373
|
children: field.label
|
|
373
374
|
}),
|
|
374
|
-
/*#__PURE__*/ jsx(
|
|
375
|
+
/*#__PURE__*/ jsx(FormFieldDescription, {
|
|
375
376
|
children: field.description
|
|
376
377
|
})
|
|
377
378
|
]
|
|
@@ -383,7 +384,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
|
|
|
383
384
|
})
|
|
384
385
|
]
|
|
385
386
|
}),
|
|
386
|
-
/*#__PURE__*/ jsx(
|
|
387
|
+
/*#__PURE__*/ jsx(FormFieldError, {
|
|
387
388
|
children: error
|
|
388
389
|
})
|
|
389
390
|
]
|
|
@@ -391,7 +392,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
|
|
|
391
392
|
case 'radio':
|
|
392
393
|
return /*#__PURE__*/ jsxs(FormField, {
|
|
393
394
|
children: [
|
|
394
|
-
/*#__PURE__*/ jsx(
|
|
395
|
+
/*#__PURE__*/ jsx(FormFieldLabel, {
|
|
395
396
|
required: required,
|
|
396
397
|
children: field.label
|
|
397
398
|
}),
|
|
@@ -408,16 +409,17 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
|
|
|
408
409
|
disabled: 'disabled' in option ? Boolean(option.disabled) : false
|
|
409
410
|
}),
|
|
410
411
|
/*#__PURE__*/ jsx(Label, {
|
|
412
|
+
variant: "muted",
|
|
411
413
|
htmlFor: `${field.name}-${option.value}`,
|
|
412
414
|
children: option.label
|
|
413
415
|
})
|
|
414
416
|
]
|
|
415
417
|
}, String(option.value)))
|
|
416
418
|
}),
|
|
417
|
-
/*#__PURE__*/ jsx(
|
|
419
|
+
/*#__PURE__*/ jsx(FormFieldDescription, {
|
|
418
420
|
children: field.description
|
|
419
421
|
}),
|
|
420
|
-
/*#__PURE__*/ jsx(
|
|
422
|
+
/*#__PURE__*/ jsx(FormFieldError, {
|
|
421
423
|
children: error
|
|
422
424
|
})
|
|
423
425
|
]
|
|
@@ -433,7 +435,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
|
|
|
433
435
|
case 'date':
|
|
434
436
|
return /*#__PURE__*/ jsxs(FormField, {
|
|
435
437
|
children: [
|
|
436
|
-
/*#__PURE__*/ jsx(
|
|
438
|
+
/*#__PURE__*/ jsx(FormFieldLabel, {
|
|
437
439
|
required: required,
|
|
438
440
|
children: field.label
|
|
439
441
|
}),
|
|
@@ -443,10 +445,10 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
|
|
|
443
445
|
disabled: disabled,
|
|
444
446
|
placeholder: field.placeholder
|
|
445
447
|
}),
|
|
446
|
-
/*#__PURE__*/ jsx(
|
|
448
|
+
/*#__PURE__*/ jsx(FormFieldDescription, {
|
|
447
449
|
children: field.description
|
|
448
450
|
}),
|
|
449
|
-
/*#__PURE__*/ jsx(
|
|
451
|
+
/*#__PURE__*/ jsx(FormFieldError, {
|
|
450
452
|
children: error
|
|
451
453
|
})
|
|
452
454
|
]
|
|
@@ -454,7 +456,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
|
|
|
454
456
|
case 'datetime':
|
|
455
457
|
return /*#__PURE__*/ jsxs(FormField, {
|
|
456
458
|
children: [
|
|
457
|
-
/*#__PURE__*/ jsx(
|
|
459
|
+
/*#__PURE__*/ jsx(FormFieldLabel, {
|
|
458
460
|
required: required,
|
|
459
461
|
children: field.label
|
|
460
462
|
}),
|
|
@@ -465,10 +467,10 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
|
|
|
465
467
|
placeholder: field.placeholder,
|
|
466
468
|
use12Hour: field.use12Hour
|
|
467
469
|
}),
|
|
468
|
-
/*#__PURE__*/ jsx(
|
|
470
|
+
/*#__PURE__*/ jsx(FormFieldDescription, {
|
|
469
471
|
children: field.description
|
|
470
472
|
}),
|
|
471
|
-
/*#__PURE__*/ jsx(
|
|
473
|
+
/*#__PURE__*/ jsx(FormFieldError, {
|
|
472
474
|
children: error
|
|
473
475
|
})
|
|
474
476
|
]
|
|
@@ -476,7 +478,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
|
|
|
476
478
|
case 'file':
|
|
477
479
|
return /*#__PURE__*/ jsxs(FormField, {
|
|
478
480
|
children: [
|
|
479
|
-
/*#__PURE__*/ jsx(
|
|
481
|
+
/*#__PURE__*/ jsx(FormFieldLabel, {
|
|
480
482
|
required: required,
|
|
481
483
|
children: field.label
|
|
482
484
|
}),
|
|
@@ -490,10 +492,10 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
|
|
|
490
492
|
formField.onChange(field.multiple ? files : files[0]);
|
|
491
493
|
}
|
|
492
494
|
}),
|
|
493
|
-
/*#__PURE__*/ jsx(
|
|
495
|
+
/*#__PURE__*/ jsx(FormFieldDescription, {
|
|
494
496
|
children: field.description
|
|
495
497
|
}),
|
|
496
|
-
/*#__PURE__*/ jsx(
|
|
498
|
+
/*#__PURE__*/ jsx(FormFieldError, {
|
|
497
499
|
children: error
|
|
498
500
|
})
|
|
499
501
|
]
|
|
@@ -502,41 +504,6 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
|
|
|
502
504
|
return null;
|
|
503
505
|
}
|
|
504
506
|
}
|
|
505
|
-
function FormField({ children, className = '' }) {
|
|
506
|
-
return /*#__PURE__*/ jsx("div", {
|
|
507
|
-
"data-slot": "form-field",
|
|
508
|
-
className: cn('grid gap-1.5', className),
|
|
509
|
-
children: children
|
|
510
|
-
});
|
|
511
|
-
}
|
|
512
|
-
function FormLabel({ children, required, htmlFor, className = '' }) {
|
|
513
|
-
return /*#__PURE__*/ jsxs(Label, {
|
|
514
|
-
"data-slot": "form-label",
|
|
515
|
-
htmlFor: htmlFor,
|
|
516
|
-
className: className,
|
|
517
|
-
children: [
|
|
518
|
-
children,
|
|
519
|
-
required && /*#__PURE__*/ jsx(RequiredIndicator, {
|
|
520
|
-
className: "ml-1"
|
|
521
|
-
})
|
|
522
|
-
]
|
|
523
|
-
});
|
|
524
|
-
}
|
|
525
|
-
function FormDescription({ children }) {
|
|
526
|
-
if (!children) return null;
|
|
527
|
-
return /*#__PURE__*/ jsx("p", {
|
|
528
|
-
"data-slot": "form-description",
|
|
529
|
-
className: "text-sm text-muted-foreground",
|
|
530
|
-
children: children
|
|
531
|
-
});
|
|
532
|
-
}
|
|
533
|
-
function FormError({ children }) {
|
|
534
|
-
if (!children) return null;
|
|
535
|
-
return /*#__PURE__*/ jsx("p", {
|
|
536
|
-
className: "text-sm text-destructive",
|
|
537
|
-
children: children
|
|
538
|
-
});
|
|
539
|
-
}
|
|
540
507
|
function SliderField({ field, formField, error, disabled, required }) {
|
|
541
508
|
const { watch } = useFormContext();
|
|
542
509
|
const watchedMax = field.maxRef ? watch(field.maxRef.fromField) : void 0;
|
|
@@ -562,7 +529,7 @@ function SliderField({ field, formField, error, disabled, required }) {
|
|
|
562
529
|
/*#__PURE__*/ jsxs("div", {
|
|
563
530
|
className: "flex justify-between",
|
|
564
531
|
children: [
|
|
565
|
-
/*#__PURE__*/ jsx(
|
|
532
|
+
/*#__PURE__*/ jsx(FormFieldLabel, {
|
|
566
533
|
required: required,
|
|
567
534
|
children: field.label
|
|
568
535
|
}),
|
|
@@ -582,10 +549,10 @@ function SliderField({ field, formField, error, disabled, required }) {
|
|
|
582
549
|
step: field.step || 1,
|
|
583
550
|
disabled: disabled
|
|
584
551
|
}),
|
|
585
|
-
/*#__PURE__*/ jsx(
|
|
552
|
+
/*#__PURE__*/ jsx(FormFieldDescription, {
|
|
586
553
|
children: field.description
|
|
587
554
|
}),
|
|
588
|
-
/*#__PURE__*/ jsx(
|
|
555
|
+
/*#__PURE__*/ jsx(FormFieldError, {
|
|
589
556
|
children: error
|
|
590
557
|
})
|
|
591
558
|
]
|
|
@@ -0,0 +1,90 @@
|
|
|
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
|
+
FormFieldLabel: ()=>FormFieldLabel,
|
|
28
|
+
FormFieldError: ()=>FormFieldError,
|
|
29
|
+
FormFieldDescription: ()=>FormFieldDescription,
|
|
30
|
+
FormField: ()=>FormField
|
|
31
|
+
});
|
|
32
|
+
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
33
|
+
const external_react_namespaceObject = require("react");
|
|
34
|
+
const external_label_cjs_namespaceObject = require("./label.cjs");
|
|
35
|
+
const index_cjs_namespaceObject = require("../../lib/index.cjs");
|
|
36
|
+
const FormField = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ children, className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
37
|
+
ref: ref,
|
|
38
|
+
"data-slot": "form-field",
|
|
39
|
+
className: (0, index_cjs_namespaceObject.cn)('grid gap-1.5', className),
|
|
40
|
+
...props,
|
|
41
|
+
children: children
|
|
42
|
+
}));
|
|
43
|
+
FormField.displayName = 'FormField';
|
|
44
|
+
const FormFieldLabel = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ children, required = false, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_label_cjs_namespaceObject.Label, {
|
|
45
|
+
ref: ref,
|
|
46
|
+
"data-slot": "form-field-label",
|
|
47
|
+
...props,
|
|
48
|
+
children: [
|
|
49
|
+
children,
|
|
50
|
+
required && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_label_cjs_namespaceObject.RequiredIndicator, {})
|
|
51
|
+
]
|
|
52
|
+
}));
|
|
53
|
+
FormFieldLabel.displayName = 'FormFieldLabel';
|
|
54
|
+
const FormFieldDescription = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ children, className, ...props }, ref)=>{
|
|
55
|
+
if (!children) return null;
|
|
56
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
|
|
57
|
+
ref: ref,
|
|
58
|
+
"data-slot": "form-field-description",
|
|
59
|
+
className: (0, index_cjs_namespaceObject.cn)('text-xs leading-4 text-foreground-muted', className),
|
|
60
|
+
...props,
|
|
61
|
+
children: children
|
|
62
|
+
});
|
|
63
|
+
});
|
|
64
|
+
FormFieldDescription.displayName = "FormFieldDescription";
|
|
65
|
+
const FormFieldError = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ children, className, ...props }, ref)=>{
|
|
66
|
+
if (!children) return null;
|
|
67
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
|
|
68
|
+
ref: ref,
|
|
69
|
+
"data-slot": "form-field-error",
|
|
70
|
+
"aria-live": "polite",
|
|
71
|
+
"aria-atomic": "true",
|
|
72
|
+
className: (0, index_cjs_namespaceObject.cn)('text-xs leading-4 text-error', className),
|
|
73
|
+
...props,
|
|
74
|
+
children: children
|
|
75
|
+
});
|
|
76
|
+
});
|
|
77
|
+
FormFieldError.displayName = 'FormFieldError';
|
|
78
|
+
exports.FormField = __webpack_exports__.FormField;
|
|
79
|
+
exports.FormFieldDescription = __webpack_exports__.FormFieldDescription;
|
|
80
|
+
exports.FormFieldError = __webpack_exports__.FormFieldError;
|
|
81
|
+
exports.FormFieldLabel = __webpack_exports__.FormFieldLabel;
|
|
82
|
+
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
83
|
+
"FormField",
|
|
84
|
+
"FormFieldDescription",
|
|
85
|
+
"FormFieldError",
|
|
86
|
+
"FormFieldLabel"
|
|
87
|
+
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
88
|
+
Object.defineProperty(exports, '__esModule', {
|
|
89
|
+
value: true
|
|
90
|
+
});
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Label } from './label';
|
|
3
|
+
export type FormFieldProps = React.ComponentPropsWithoutRef<'div'>;
|
|
4
|
+
/**
|
|
5
|
+
* Vertical field anatomy: label, control, supporting text, validation message.
|
|
6
|
+
*
|
|
7
|
+
* These parts are presentational and hold no form state, so they compose the
|
|
8
|
+
* same way inside a metadata-driven form as they do in hand-built panels.
|
|
9
|
+
*/
|
|
10
|
+
declare const FormField: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
11
|
+
export interface FormFieldLabelProps extends React.ComponentPropsWithoutRef<typeof Label> {
|
|
12
|
+
/** Appends the required indicator after the label text. */
|
|
13
|
+
required?: boolean;
|
|
14
|
+
}
|
|
15
|
+
/** Names the field. Pair with a control via `htmlFor`. */
|
|
16
|
+
declare const FormFieldLabel: React.ForwardRefExoticComponent<FormFieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
|
|
17
|
+
export type FormFieldDescriptionProps = React.ComponentPropsWithoutRef<'p'>;
|
|
18
|
+
/** Supporting guidance rendered below a field control. */
|
|
19
|
+
declare const FormFieldDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
20
|
+
export type FormFieldErrorProps = React.ComponentPropsWithoutRef<'p'>;
|
|
21
|
+
/**
|
|
22
|
+
* Validation message rendered below a field control. Uses the `error` token
|
|
23
|
+
* rather than `destructive`, which some themes resolve to a different color.
|
|
24
|
+
*/
|
|
25
|
+
declare const FormFieldError: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
26
|
+
export { FormField, FormFieldDescription, FormFieldError, FormFieldLabel };
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
import { Label, RequiredIndicator } from "./label.js";
|
|
4
|
+
import { cn } from "../../lib/index.js";
|
|
5
|
+
const FormField = /*#__PURE__*/ forwardRef(({ children, className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
|
|
6
|
+
ref: ref,
|
|
7
|
+
"data-slot": "form-field",
|
|
8
|
+
className: cn('grid gap-1.5', className),
|
|
9
|
+
...props,
|
|
10
|
+
children: children
|
|
11
|
+
}));
|
|
12
|
+
FormField.displayName = 'FormField';
|
|
13
|
+
const FormFieldLabel = /*#__PURE__*/ forwardRef(({ children, required = false, ...props }, ref)=>/*#__PURE__*/ jsxs(Label, {
|
|
14
|
+
ref: ref,
|
|
15
|
+
"data-slot": "form-field-label",
|
|
16
|
+
...props,
|
|
17
|
+
children: [
|
|
18
|
+
children,
|
|
19
|
+
required && /*#__PURE__*/ jsx(RequiredIndicator, {})
|
|
20
|
+
]
|
|
21
|
+
}));
|
|
22
|
+
FormFieldLabel.displayName = 'FormFieldLabel';
|
|
23
|
+
const FormFieldDescription = /*#__PURE__*/ forwardRef(({ children, className, ...props }, ref)=>{
|
|
24
|
+
if (!children) return null;
|
|
25
|
+
return /*#__PURE__*/ jsx("p", {
|
|
26
|
+
ref: ref,
|
|
27
|
+
"data-slot": "form-field-description",
|
|
28
|
+
className: cn('text-xs leading-4 text-foreground-muted', className),
|
|
29
|
+
...props,
|
|
30
|
+
children: children
|
|
31
|
+
});
|
|
32
|
+
});
|
|
33
|
+
FormFieldDescription.displayName = "FormFieldDescription";
|
|
34
|
+
const FormFieldError = /*#__PURE__*/ forwardRef(({ children, className, ...props }, ref)=>{
|
|
35
|
+
if (!children) return null;
|
|
36
|
+
return /*#__PURE__*/ jsx("p", {
|
|
37
|
+
ref: ref,
|
|
38
|
+
"data-slot": "form-field-error",
|
|
39
|
+
"aria-live": "polite",
|
|
40
|
+
"aria-atomic": "true",
|
|
41
|
+
className: cn('text-xs leading-4 text-error', className),
|
|
42
|
+
...props,
|
|
43
|
+
children: children
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
FormFieldError.displayName = 'FormFieldError';
|
|
47
|
+
export { FormField, FormFieldDescription, FormFieldError, FormFieldLabel };
|