@uipath/apollo-wind 2.50.0 → 2.52.0

package/dist/components/forms/field-renderer.cjs

@@ -46,6 +46,7 @@ const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const external_data_fetcher_cjs_namespaceObject = require("./data-fetcher.cjs");
 const external_form_schema_cjs_namespaceObject = require("./form-schema.cjs");
 const external_rules_engine_cjs_namespaceObject = require("./rules-engine.cjs");
+const external_string_list_field_cjs_namespaceObject = require("./string-list-field.cjs");
 function FormFieldRenderer({ field, context, customComponents, disabled: formDisabled = false }) {
     const { control, watch, getValues } = (0, external_react_hook_form_namespaceObject.useFormContext)();
     const contextRef = (0, external_react_namespaceObject.useRef)(context);
@@ -187,7 +188,7 @@ function FormFieldRenderer({ field, context, customComponents, disabled: formDis
                 name: field.name,
                 control: control,
                 defaultValue: field.defaultValue,
-                render: ({ field: formField, fieldState: { error } })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CustomComponent, {
+                render: ({ field: { ref: _ref, ...formField }, fieldState: { error } })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CustomComponent, {
                         ...formField,
                         ...field.componentProps,
                         field: field,
@@ -222,10 +223,14 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
             return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(form_field_cjs_namespaceObject.FormField, {
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldLabel, {
+                        htmlFor: field.name,
                         required: required,
+                        tooltip: field.tooltip,
+                        tooltipAriaLabel: field.tooltipAriaLabel,
                         children: field.label
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
+                        id: field.name,
                         value: formField.value,
                         onChange: (e)=>formField.onChange(e.target.value),
                         onBlur: formField.onBlur,
@@ -234,6 +239,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         type: field.type,
                         placeholder: field.placeholder,
                         disabled: disabled,
+                        "aria-invalid": error ? true : void 0,
                         "aria-label": field.ariaLabel
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldDescription, {
@@ -248,10 +254,14 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
             return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(form_field_cjs_namespaceObject.FormField, {
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldLabel, {
+                        htmlFor: field.name,
                         required: required,
+                        tooltip: field.tooltip,
+                        tooltipAriaLabel: field.tooltipAriaLabel,
                         children: field.label
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
+                        id: field.name,
                         value: formField.value,
                         onBlur: formField.onBlur,
                         name: formField.name,
@@ -262,6 +272,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         step: field.step,
                         placeholder: field.placeholder,
                         disabled: disabled,
+                        "aria-invalid": error ? true : void 0,
                         onChange: (e)=>formField.onChange(parseFloat(e.target.value))
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldDescription, {
@@ -276,10 +287,14 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
             return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(form_field_cjs_namespaceObject.FormField, {
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldLabel, {
+                        htmlFor: field.name,
                         required: required,
+                        tooltip: field.tooltip,
+                        tooltipAriaLabel: field.tooltipAriaLabel,
                         children: field.label
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(textarea_cjs_namespaceObject.Textarea, {
+                        id: field.name,
                         value: formField.value,
                         onChange: (e)=>formField.onChange(e.target.value),
                         onBlur: formField.onBlur,
@@ -287,7 +302,13 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         ref: formField.ref,
                         placeholder: field.placeholder,
                         disabled: disabled,
-                        rows: field.rows || 4
+                        maxLength: field.maxLength,
+                        "aria-invalid": error ? true : void 0,
+                        ...null != field.minRows ? {
+                            minRows: field.minRows
+                        } : {
+                            rows: field.rows || 4
+                        }
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldDescription, {
                         children: field.description
@@ -301,7 +322,10 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
             return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(form_field_cjs_namespaceObject.FormField, {
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldLabel, {
+                        htmlFor: field.name,
                         required: required,
+                        tooltip: field.tooltip,
+                        tooltipAriaLabel: field.tooltipAriaLabel,
                         children: field.label
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(select_cjs_namespaceObject.Select, {
@@ -310,7 +334,9 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         disabled: disabled,
                         children: [
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectTrigger, {
+                                id: field.name,
                                 "aria-label": field.label,
+                                "aria-invalid": error ? true : void 0,
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectValue, {
                                     placeholder: field.placeholder || 'Select...'
                                 })
@@ -336,10 +362,14 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
             return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(form_field_cjs_namespaceObject.FormField, {
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldLabel, {
+                        htmlFor: field.name,
                         required: required,
+                        tooltip: field.tooltip,
+                        tooltipAriaLabel: field.tooltipAriaLabel,
                         children: field.label
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(multi_select_cjs_namespaceObject.MultiSelect, {
+                        id: field.name,
                         selected: formField.value || [],
                         onChange: formField.onChange,
                         options: options.map((opt)=>({
@@ -348,9 +378,10 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                             })),
                         disabled: disabled,
                         placeholder: field.placeholder || 'Select items...',
-                        emptyMessage: "No items found.",
-                        searchPlaceholder: "Search...",
-                        maxSelected: field.maxSelected
+                        emptyMessage: field.emptyMessage ?? 'No items found.',
+                        searchPlaceholder: field.searchPlaceholder ?? 'Search...',
+                        maxSelected: field.maxSelected,
+                        "aria-invalid": error ? true : void 0
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldDescription, {
                         children: field.description
@@ -370,6 +401,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                                 checked: true === formField.value,
                                 onCheckedChange: (checked)=>formField.onChange(true === checked),
                                 disabled: disabled,
+                                "aria-invalid": error ? true : void 0,
                                 id: field.name
                             }),
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
@@ -377,6 +409,8 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                                 children: [
                                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldLabel, {
                                         htmlFor: field.name,
+                                        tooltip: field.tooltip,
+                                        tooltipAriaLabel: field.tooltipAriaLabel,
                                         className: "font-normal",
                                         children: field.label
                                     }),
@@ -402,6 +436,10 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                                 className: "space-y-0.5",
                                 children: [
                                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldLabel, {
+                                        htmlFor: field.name,
+                                        required: required,
+                                        tooltip: field.tooltip,
+                                        tooltipAriaLabel: field.tooltipAriaLabel,
                                         children: field.label
                                     }),
                                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldDescription, {
@@ -410,9 +448,11 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                                 ]
                             }),
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(switch_cjs_namespaceObject.Switch, {
+                                id: field.name,
                                 checked: true === formField.value,
                                 onCheckedChange: (checked)=>formField.onChange(true === checked),
-                                disabled: disabled
+                                disabled: disabled,
+                                "aria-invalid": error ? true : void 0
                             })
                         ]
                     }),
@@ -425,13 +465,18 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
             return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(form_field_cjs_namespaceObject.FormField, {
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldLabel, {
+                        id: `${field.name}-label`,
                         required: required,
+                        tooltip: field.tooltip,
+                        tooltipAriaLabel: field.tooltipAriaLabel,
                         children: field.label
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(radio_group_cjs_namespaceObject.RadioGroup, {
+                        "aria-labelledby": `${field.name}-label`,
                         value: formField.value,
                         onValueChange: formField.onChange,
                         disabled: disabled,
+                        "aria-invalid": error ? true : void 0,
                         children: options.map((option)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                                 className: "flex items-center space-x-2",
                                 children: [
@@ -469,6 +514,8 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldLabel, {
                         required: required,
+                        tooltip: field.tooltip,
+                        tooltipAriaLabel: field.tooltipAriaLabel,
                         children: field.label
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(date_picker_cjs_namespaceObject.DatePicker, {
@@ -489,10 +536,15 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
             return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(form_field_cjs_namespaceObject.FormField, {
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldLabel, {
+                        id: `${field.name}-label`,
                         required: required,
+                        tooltip: field.tooltip,
+                        tooltipAriaLabel: field.tooltipAriaLabel,
                         children: field.label
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(datetime_picker_cjs_namespaceObject.DateTimePicker, {
+                        "aria-labelledby": `${field.name}-label`,
+                        "aria-invalid": error ? true : void 0,
                         value: formField.value,
                         onValueChange: formField.onChange,
                         disabled: disabled,
@@ -511,10 +563,16 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
             return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(form_field_cjs_namespaceObject.FormField, {
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldLabel, {
+                        htmlFor: field.name,
                         required: required,
+                        tooltip: field.tooltip,
+                        tooltipAriaLabel: field.tooltipAriaLabel,
                         children: field.label
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(file_upload_cjs_namespaceObject.FileUpload, {
+                        id: field.name,
+                        ariaLabel: field.ariaLabel ?? field.label,
+                        "aria-invalid": error ? true : void 0,
                         accept: field.accept,
                         multiple: field.multiple,
                         disabled: disabled,
@@ -532,6 +590,17 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                     })
                 ]
             });
+        case 'string-list':
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_string_list_field_cjs_namespaceObject.StringListField, {
+                field: field,
+                inputRef: formField.ref,
+                value: formField.value,
+                onChange: formField.onChange,
+                onBlur: formField.onBlur,
+                error: error,
+                disabled: disabled,
+                required: required
+            });
         default:
             return null;
     }
@@ -562,7 +631,10 @@ function SliderField({ field, formField, error, disabled, required }) {
                 className: "flex justify-between",
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(form_field_cjs_namespaceObject.FormFieldLabel, {
+                        id: `${field.name}-label`,
                         required: required,
+                        tooltip: field.tooltip,
+                        tooltipAriaLabel: field.tooltipAriaLabel,
                         children: field.label
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
@@ -572,6 +644,8 @@ function SliderField({ field, formField, error, disabled, required }) {
                 ]
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(slider_cjs_namespaceObject.Slider, {
+                "aria-labelledby": `${field.name}-label`,
+                "aria-invalid": error ? true : void 0,
                 value: [
                     displayValue ?? field.min ?? 0
                 ],

package/dist/components/forms/field-renderer.js

@@ -18,6 +18,7 @@ import { deepEqual } from "../../lib/index.js";
 import { DataFetcher } from "./data-fetcher.js";
 import { hasOptions, isCustomField } from "./form-schema.js";
 import { RulesEngine } from "./rules-engine.js";
+import { StringListField } from "./string-list-field.js";
 function FormFieldRenderer({ field, context, customComponents, disabled: formDisabled = false }) {
     const { control, watch, getValues } = useFormContext();
     const contextRef = useRef(context);
@@ -159,7 +160,7 @@ function FormFieldRenderer({ field, context, customComponents, disabled: formDis
                 name: field.name,
                 control: control,
                 defaultValue: field.defaultValue,
-                render: ({ field: formField, fieldState: { error } })=>/*#__PURE__*/ jsx(CustomComponent, {
+                render: ({ field: { ref: _ref, ...formField }, fieldState: { error } })=>/*#__PURE__*/ jsx(CustomComponent, {
                         ...formField,
                         ...field.componentProps,
                         field: field,
@@ -194,10 +195,14 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
             return /*#__PURE__*/ jsxs(FormField, {
                 children: [
                     /*#__PURE__*/ jsx(FormFieldLabel, {
+                        htmlFor: field.name,
                         required: required,
+                        tooltip: field.tooltip,
+                        tooltipAriaLabel: field.tooltipAriaLabel,
                         children: field.label
                     }),
                     /*#__PURE__*/ jsx(Input, {
+                        id: field.name,
                         value: formField.value,
                         onChange: (e)=>formField.onChange(e.target.value),
                         onBlur: formField.onBlur,
@@ -206,6 +211,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         type: field.type,
                         placeholder: field.placeholder,
                         disabled: disabled,
+                        "aria-invalid": error ? true : void 0,
                         "aria-label": field.ariaLabel
                     }),
                     /*#__PURE__*/ jsx(FormFieldDescription, {
@@ -220,10 +226,14 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
             return /*#__PURE__*/ jsxs(FormField, {
                 children: [
                     /*#__PURE__*/ jsx(FormFieldLabel, {
+                        htmlFor: field.name,
                         required: required,
+                        tooltip: field.tooltip,
+                        tooltipAriaLabel: field.tooltipAriaLabel,
                         children: field.label
                     }),
                     /*#__PURE__*/ jsx(Input, {
+                        id: field.name,
                         value: formField.value,
                         onBlur: formField.onBlur,
                         name: formField.name,
@@ -234,6 +244,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         step: field.step,
                         placeholder: field.placeholder,
                         disabled: disabled,
+                        "aria-invalid": error ? true : void 0,
                         onChange: (e)=>formField.onChange(parseFloat(e.target.value))
                     }),
                     /*#__PURE__*/ jsx(FormFieldDescription, {
@@ -248,10 +259,14 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
             return /*#__PURE__*/ jsxs(FormField, {
                 children: [
                     /*#__PURE__*/ jsx(FormFieldLabel, {
+                        htmlFor: field.name,
                         required: required,
+                        tooltip: field.tooltip,
+                        tooltipAriaLabel: field.tooltipAriaLabel,
                         children: field.label
                     }),
                     /*#__PURE__*/ jsx(Textarea, {
+                        id: field.name,
                         value: formField.value,
                         onChange: (e)=>formField.onChange(e.target.value),
                         onBlur: formField.onBlur,
@@ -259,7 +274,13 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         ref: formField.ref,
                         placeholder: field.placeholder,
                         disabled: disabled,
-                        rows: field.rows || 4
+                        maxLength: field.maxLength,
+                        "aria-invalid": error ? true : void 0,
+                        ...null != field.minRows ? {
+                            minRows: field.minRows
+                        } : {
+                            rows: field.rows || 4
+                        }
                     }),
                     /*#__PURE__*/ jsx(FormFieldDescription, {
                         children: field.description
@@ -273,7 +294,10 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
             return /*#__PURE__*/ jsxs(FormField, {
                 children: [
                     /*#__PURE__*/ jsx(FormFieldLabel, {
+                        htmlFor: field.name,
                         required: required,
+                        tooltip: field.tooltip,
+                        tooltipAriaLabel: field.tooltipAriaLabel,
                         children: field.label
                     }),
                     /*#__PURE__*/ jsxs(Select, {
@@ -282,7 +306,9 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                         disabled: disabled,
                         children: [
                             /*#__PURE__*/ jsx(SelectTrigger, {
+                                id: field.name,
                                 "aria-label": field.label,
+                                "aria-invalid": error ? true : void 0,
                                 children: /*#__PURE__*/ jsx(SelectValue, {
                                     placeholder: field.placeholder || 'Select...'
                                 })
@@ -308,10 +334,14 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
             return /*#__PURE__*/ jsxs(FormField, {
                 children: [
                     /*#__PURE__*/ jsx(FormFieldLabel, {
+                        htmlFor: field.name,
                         required: required,
+                        tooltip: field.tooltip,
+                        tooltipAriaLabel: field.tooltipAriaLabel,
                         children: field.label
                     }),
                     /*#__PURE__*/ jsx(MultiSelect, {
+                        id: field.name,
                         selected: formField.value || [],
                         onChange: formField.onChange,
                         options: options.map((opt)=>({
@@ -320,9 +350,10 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                             })),
                         disabled: disabled,
                         placeholder: field.placeholder || 'Select items...',
-                        emptyMessage: "No items found.",
-                        searchPlaceholder: "Search...",
-                        maxSelected: field.maxSelected
+                        emptyMessage: field.emptyMessage ?? 'No items found.',
+                        searchPlaceholder: field.searchPlaceholder ?? 'Search...',
+                        maxSelected: field.maxSelected,
+                        "aria-invalid": error ? true : void 0
                     }),
                     /*#__PURE__*/ jsx(FormFieldDescription, {
                         children: field.description
@@ -342,6 +373,7 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                                 checked: true === formField.value,
                                 onCheckedChange: (checked)=>formField.onChange(true === checked),
                                 disabled: disabled,
+                                "aria-invalid": error ? true : void 0,
                                 id: field.name
                             }),
                             /*#__PURE__*/ jsxs("div", {
@@ -349,6 +381,8 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                                 children: [
                                     /*#__PURE__*/ jsx(FormFieldLabel, {
                                         htmlFor: field.name,
+                                        tooltip: field.tooltip,
+                                        tooltipAriaLabel: field.tooltipAriaLabel,
                                         className: "font-normal",
                                         children: field.label
                                     }),
@@ -374,6 +408,10 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                                 className: "space-y-0.5",
                                 children: [
                                     /*#__PURE__*/ jsx(FormFieldLabel, {
+                                        htmlFor: field.name,
+                                        required: required,
+                                        tooltip: field.tooltip,
+                                        tooltipAriaLabel: field.tooltipAriaLabel,
                                         children: field.label
                                     }),
                                     /*#__PURE__*/ jsx(FormFieldDescription, {
@@ -382,9 +420,11 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                                 ]
                             }),
                             /*#__PURE__*/ jsx(Switch, {
+                                id: field.name,
                                 checked: true === formField.value,
                                 onCheckedChange: (checked)=>formField.onChange(true === checked),
-                                disabled: disabled
+                                disabled: disabled,
+                                "aria-invalid": error ? true : void 0
                             })
                         ]
                     }),
@@ -397,13 +437,18 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
             return /*#__PURE__*/ jsxs(FormField, {
                 children: [
                     /*#__PURE__*/ jsx(FormFieldLabel, {
+                        id: `${field.name}-label`,
                         required: required,
+                        tooltip: field.tooltip,
+                        tooltipAriaLabel: field.tooltipAriaLabel,
                         children: field.label
                     }),
                     /*#__PURE__*/ jsx(RadioGroup, {
+                        "aria-labelledby": `${field.name}-label`,
                         value: formField.value,
                         onValueChange: formField.onChange,
                         disabled: disabled,
+                        "aria-invalid": error ? true : void 0,
                         children: options.map((option)=>/*#__PURE__*/ jsxs("div", {
                                 className: "flex items-center space-x-2",
                                 children: [
@@ -441,6 +486,8 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                 children: [
                     /*#__PURE__*/ jsx(FormFieldLabel, {
                         required: required,
+                        tooltip: field.tooltip,
+                        tooltipAriaLabel: field.tooltipAriaLabel,
                         children: field.label
                     }),
                     /*#__PURE__*/ jsx(DatePicker, {
@@ -461,10 +508,15 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
             return /*#__PURE__*/ jsxs(FormField, {
                 children: [
                     /*#__PURE__*/ jsx(FormFieldLabel, {
+                        id: `${field.name}-label`,
                         required: required,
+                        tooltip: field.tooltip,
+                        tooltipAriaLabel: field.tooltipAriaLabel,
                         children: field.label
                     }),
                     /*#__PURE__*/ jsx(DateTimePicker, {
+                        "aria-labelledby": `${field.name}-label`,
+                        "aria-invalid": error ? true : void 0,
                         value: formField.value,
                         onValueChange: formField.onChange,
                         disabled: disabled,
@@ -483,10 +535,16 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
             return /*#__PURE__*/ jsxs(FormField, {
                 children: [
                     /*#__PURE__*/ jsx(FormFieldLabel, {
+                        htmlFor: field.name,
                         required: required,
+                        tooltip: field.tooltip,
+                        tooltipAriaLabel: field.tooltipAriaLabel,
                         children: field.label
                     }),
                     /*#__PURE__*/ jsx(FileUpload, {
+                        id: field.name,
+                        ariaLabel: field.ariaLabel ?? field.label,
+                        "aria-invalid": error ? true : void 0,
                         accept: field.accept,
                         multiple: field.multiple,
                         disabled: disabled,
@@ -504,6 +562,17 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                     })
                 ]
             });
+        case 'string-list':
+            return /*#__PURE__*/ jsx(StringListField, {
+                field: field,
+                inputRef: formField.ref,
+                value: formField.value,
+                onChange: formField.onChange,
+                onBlur: formField.onBlur,
+                error: error,
+                disabled: disabled,
+                required: required
+            });
         default:
             return null;
     }
@@ -534,7 +603,10 @@ function SliderField({ field, formField, error, disabled, required }) {
                 className: "flex justify-between",
                 children: [
                     /*#__PURE__*/ jsx(FormFieldLabel, {
+                        id: `${field.name}-label`,
                         required: required,
+                        tooltip: field.tooltip,
+                        tooltipAriaLabel: field.tooltipAriaLabel,
                         children: field.label
                     }),
                     /*#__PURE__*/ jsx("span", {
@@ -544,6 +616,8 @@ function SliderField({ field, formField, error, disabled, required }) {
                 ]
             }),
             /*#__PURE__*/ jsx(Slider, {
+                "aria-labelledby": `${field.name}-label`,
+                "aria-invalid": error ? true : void 0,
                 value: [
                     displayValue ?? field.min ?? 0
                 ],

package/dist/components/forms/form-designer.cjs

@@ -27,22 +27,22 @@ __webpack_require__.d(__webpack_exports__, {
     FormDesigner: ()=>FormDesigner
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
-const external_schema_serializer_cjs_namespaceObject = require("./schema-serializer.cjs");
-const external_metadata_form_cjs_namespaceObject = require("./metadata-form.cjs");
+const accordion_cjs_namespaceObject = require("../ui/accordion.cjs");
 const button_cjs_namespaceObject = require("../ui/button.cjs");
+const card_cjs_namespaceObject = require("../ui/card.cjs");
+const checkbox_cjs_namespaceObject = require("../ui/checkbox.cjs");
 const input_cjs_namespaceObject = require("../ui/input.cjs");
 const label_cjs_namespaceObject = require("../ui/label.cjs");
-const textarea_cjs_namespaceObject = require("../ui/textarea.cjs");
+const grid_cjs_namespaceObject = require("../ui/layout/grid.cjs");
 const select_cjs_namespaceObject = require("../ui/select.cjs");
-const card_cjs_namespaceObject = require("../ui/card.cjs");
-const tabs_cjs_namespaceObject = require("../ui/tabs.cjs");
-const checkbox_cjs_namespaceObject = require("../ui/checkbox.cjs");
-const switch_cjs_namespaceObject = require("../ui/switch.cjs");
-const external_lucide_react_namespaceObject = require("lucide-react");
 const separator_cjs_namespaceObject = require("../ui/separator.cjs");
-const accordion_cjs_namespaceObject = require("../ui/accordion.cjs");
-const grid_cjs_namespaceObject = require("../ui/layout/grid.cjs");
+const switch_cjs_namespaceObject = require("../ui/switch.cjs");
+const tabs_cjs_namespaceObject = require("../ui/tabs.cjs");
+const textarea_cjs_namespaceObject = require("../ui/textarea.cjs");
+const external_metadata_form_cjs_namespaceObject = require("./metadata-form.cjs");
+const external_schema_serializer_cjs_namespaceObject = require("./schema-serializer.cjs");
 const FIELD_TYPE_METADATA = [
     {
         value: 'text',

package/dist/components/forms/form-designer.js

@@ -1,20 +1,20 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertTriangle, Asterisk, Ban, ChevronRight, Code, Database, Eye, EyeOff, GitBranch, GripVertical, Layers, MoveDown, MoveUp, Plus, Settings, Trash2, View } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
-import { schemaToJson } from "./schema-serializer.js";
-import { MetadataForm } from "./metadata-form.js";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../ui/accordion.js";
 import { Button } from "../ui/button.js";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card.js";
+import { Checkbox } from "../ui/checkbox.js";
 import { Input } from "../ui/input.js";
 import { Label, RequiredIndicator } from "../ui/label.js";
-import { Textarea } from "../ui/textarea.js";
+import { Grid } from "../ui/layout/grid.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select.js";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card.js";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs.js";
-import { Checkbox } from "../ui/checkbox.js";
-import { Switch } from "../ui/switch.js";
-import { AlertTriangle, Asterisk, Ban, ChevronRight, Code, Database, Eye, EyeOff, GitBranch, GripVertical, Layers, MoveDown, MoveUp, Plus, Settings, Trash2, View } from "lucide-react";
 import { Separator } from "../ui/separator.js";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../ui/accordion.js";
-import { Grid } from "../ui/layout/grid.js";
+import { Switch } from "../ui/switch.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs.js";
+import { Textarea } from "../ui/textarea.js";
+import { MetadataForm } from "./metadata-form.js";
+import { schemaToJson } from "./schema-serializer.js";
 const FIELD_TYPE_METADATA = [
     {
         value: 'text',