@uxf/form 11.74.0 → 11.74.1

package/file-input/translations.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    "uxf-form-file-input": {
+        validation: {
+            required: {
+                cs: "Toto pole je povinné",
+                en: "This field is required",
+                sk: "Toto pole je povinné",
+                de: "Dieses Feld ist erforderlich",
+            },
+        },
+    },
+};

package/form/form.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode, Ref } from "react";
+import { FieldValues, SubmitErrorHandler, SubmitHandler, UseFormReturn } from "react-hook-form";
+export type FormProps<TFieldValues extends FieldValues> = {
+    children: ReactNode;
+    className?: string;
+    formApi: UseFormReturn<TFieldValues>;
+    forwardRef?: Ref<HTMLFormElement> | undefined;
+    id: string;
+    method?: "get" | "post";
+    onError?: SubmitErrorHandler<TFieldValues>;
+    onSubmit: SubmitHandler<TFieldValues>;
+    shouldOmitSubmitInput?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+};
+export declare function Form<TFieldValues extends FieldValues = FieldValues>(props: FormProps<TFieldValues>): React.JSX.Element;
+export declare namespace Form {
+    var displayName: string;
+}

package/form/form.js

@@ -0,0 +1,25 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Form = Form;
+const sr_only_1 = require("@uxf/styles/mixins/sr-only");
+const react_1 = __importDefault(require("react"));
+const react_hook_form_1 = require("react-hook-form");
+const form_context_1 = require("../form-id-context/form-context");
+function Form(props) {
+    var _a;
+    const context = {
+        formId: props.id,
+        isFormDisabled: Boolean(props.isDisabled),
+        isFormReadOnly: Boolean(props.isReadOnly),
+    };
+    return (react_1.default.createElement(form_context_1.FormContextProvider, { value: context },
+        react_1.default.createElement(react_hook_form_1.FormProvider, { ...props.formApi },
+            react_1.default.createElement("form", { className: props.className, id: props.id, method: (_a = props.method) !== null && _a !== void 0 ? _a : "post", noValidate: true, onSubmit: props.formApi.handleSubmit(props.onSubmit, props.onError), ref: props.forwardRef },
+                props.children,
+                !props.shouldOmitSubmitInput && react_1.default.createElement("input", { style: sr_only_1.srOnly, type: "submit" })))));
+}
+Form.displayName = "UxfForm";

package/form/form.stories.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { Form } from "./form";
+declare const _default: {
+    title: string;
+    component: typeof Form;
+};
+export default _default;
+export declare function Default(): React.JSX.Element;

package/form/form.stories.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = Default;
+const button_1 = require("@uxf/ui/button");
+const react_1 = __importDefault(require("react"));
+const react_hook_form_1 = require("react-hook-form");
+const text_input_1 = require("../text-input");
+const form_1 = require("./form");
+exports.default = {
+    title: "Form/Form",
+    component: form_1.Form,
+};
+function Default() {
+    const formApi = (0, react_hook_form_1.useForm)();
+    return (
+    // eslint-disable-next-line no-console
+    react_1.default.createElement(form_1.Form, { formApi: formApi, id: "form", onSubmit: console.log },
+        react_1.default.createElement("div", { className: "mb-4 space-y-4 p-4" },
+            react_1.default.createElement(text_input_1.TextInput, { control: formApi.control, isRequired: true, label: "Default input", name: "default" }),
+            react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit"))));
+}

package/form/index.d.ts

@@ -0,0 +1 @@
+export * from "./form";

package/form/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./form"), exports);

package/form-id-context/form-context.d.ts

@@ -0,0 +1,7 @@
+export interface FormContextType {
+    formId: string;
+    isFormDisabled: boolean;
+    isFormReadOnly: boolean;
+}
+export declare const FormContextProvider: import("react").Provider<FormContextType>;
+export declare const useFormContext: () => FormContextType;

package/form-id-context/form-context.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormContext = exports.FormContextProvider = void 0;
+const react_1 = require("react");
+const FormContext = (0, react_1.createContext)({
+    formId: "",
+    isFormDisabled: false,
+    isFormReadOnly: false,
+});
+exports.FormContextProvider = FormContext.Provider;
+const useFormContext = () => (0, react_1.useContext)(FormContext);
+exports.useFormContext = useFormContext;

package/form-id-context/form-id-context.d.ts

@@ -0,0 +1,2 @@
+/** @deprecated use useFormContext().formId */
+export declare const useFormIdContext: () => string;

package/form-id-context/form-id-context.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormIdContext = void 0;
+const form_context_1 = require("./form-context");
+/** @deprecated use useFormContext().formId */
+const useFormIdContext = () => (0, form_context_1.useFormContext)().formId;
+exports.useFormIdContext = useFormIdContext;

package/form-id-context/index.d.ts

@@ -0,0 +1 @@
+export * from "./form-id-context";

package/form-id-context/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./form-id-context"), exports);

package/form-renderer/big-test-schema.d.ts

@@ -0,0 +1,33 @@
+export declare const schema: {
+    fields: ({
+        name: string;
+        type: string;
+        label: string;
+        required: boolean;
+        readOnly: boolean;
+        editable: boolean;
+        autocomplete: string;
+        options: null;
+        fields: never[];
+    } | {
+        name: string;
+        type: string;
+        label: string;
+        required: boolean;
+        readOnly: boolean;
+        editable: boolean;
+        autocomplete: null;
+        options: null;
+        fields: {
+            name: string;
+            type: string;
+            label: string;
+            required: boolean;
+            readOnly: boolean;
+            editable: boolean;
+            autocomplete: null;
+            options: null;
+            fields: never[];
+        }[];
+    })[];
+};

package/form-renderer/big-test-schema.js

@@ -0,0 +1,295 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.schema = void 0;
+exports.schema = {
+    fields: [
+        {
+            name: "id",
+            type: "integer",
+            label: "Id",
+            required: true,
+            readOnly: true,
+            editable: true,
+            autocomplete: null,
+            options: null,
+            fields: [],
+        },
+        {
+            name: "textRequired",
+            type: "string",
+            label: "Text required",
+            required: true,
+            readOnly: false,
+            editable: true,
+            autocomplete: null,
+            options: null,
+            fields: [],
+        },
+        {
+            name: "textNotRequired",
+            type: "string",
+            label: "Text optional",
+            required: false,
+            readOnly: false,
+            editable: true,
+            autocomplete: null,
+            options: null,
+            fields: [],
+        },
+        {
+            name: "longTextRequired",
+            type: "text",
+            label: "LongText required",
+            required: true,
+            readOnly: false,
+            editable: true,
+            autocomplete: null,
+            options: null,
+            fields: [],
+        },
+        {
+            name: "longTextNotRequired",
+            type: "text",
+            label: "LongText optional",
+            required: false,
+            readOnly: false,
+            editable: true,
+            autocomplete: null,
+            options: null,
+            fields: [],
+        },
+        {
+            name: "imageNotRequired",
+            type: "image",
+            label: "Image optional",
+            required: false,
+            readOnly: false,
+            editable: true,
+            autocomplete: null,
+            options: null,
+            fields: [],
+        },
+        {
+            name: "fileNotRequired",
+            type: "file",
+            label: "File optional",
+            required: false,
+            readOnly: false,
+            editable: true,
+            autocomplete: null,
+            options: null,
+            fields: [],
+        },
+        {
+            name: "images",
+            type: "images",
+            label: "Images",
+            required: false,
+            readOnly: false,
+            editable: true,
+            autocomplete: null,
+            options: null,
+            fields: [],
+        },
+        {
+            name: "dateRequired",
+            type: "date",
+            label: "Date required",
+            required: true,
+            readOnly: false,
+            editable: true,
+            autocomplete: null,
+            options: null,
+            fields: [],
+        },
+        {
+            name: "dateNotRequired",
+            type: "date",
+            label: "Date optional",
+            required: false,
+            readOnly: false,
+            editable: true,
+            autocomplete: null,
+            options: null,
+            fields: [],
+        },
+        {
+            name: "dateTimeRequired",
+            type: "datetime",
+            label: "DateTime required",
+            required: true,
+            readOnly: false,
+            editable: true,
+            autocomplete: null,
+            options: null,
+            fields: [],
+        },
+        {
+            name: "dateTimeNotRequired",
+            type: "datetime",
+            label: "DateTime optional",
+            required: false,
+            readOnly: false,
+            editable: true,
+            autocomplete: null,
+            options: null,
+            fields: [],
+        },
+        {
+            name: "timeRequired",
+            type: "time",
+            label: "Time required",
+            required: true,
+            readOnly: false,
+            editable: true,
+            autocomplete: null,
+            options: null,
+            fields: [],
+        },
+        {
+            name: "timeNotRequired",
+            type: "time",
+            label: "Time optional",
+            required: false,
+            readOnly: false,
+            editable: true,
+            autocomplete: null,
+            options: null,
+            fields: [],
+        },
+        {
+            name: "integerRequired",
+            type: "integer",
+            label: "Integer required",
+            required: true,
+            readOnly: false,
+            editable: true,
+            autocomplete: null,
+            options: null,
+            fields: [],
+        },
+        {
+            name: "integerNotRequired",
+            type: "integer",
+            label: "Integer optional",
+            required: false,
+            readOnly: false,
+            editable: true,
+            autocomplete: null,
+            options: null,
+            fields: [],
+        },
+        {
+            name: "isBooleanNotRequired",
+            type: "boolean",
+            label: "Boolean optional",
+            required: false,
+            readOnly: false,
+            editable: true,
+            autocomplete: null,
+            options: null,
+            fields: [],
+        },
+        {
+            name: "manyToManyBigTest",
+            type: "manyToMany",
+            label: "ManyToMany",
+            required: false,
+            readOnly: false,
+            editable: true,
+            autocomplete: "big-test",
+            options: null,
+            fields: [],
+        },
+        {
+            name: "manyToOneBigTest",
+            type: "manyToOne",
+            label: "ManyToOne",
+            required: false,
+            readOnly: false,
+            editable: true,
+            autocomplete: "big-test",
+            options: null,
+            fields: [],
+        },
+        {
+            name: "embedded",
+            type: "embedded",
+            label: "Embedded",
+            required: true,
+            readOnly: false,
+            editable: true,
+            autocomplete: null,
+            options: null,
+            fields: [
+                {
+                    name: "value",
+                    type: "integer",
+                    label: "value",
+                    required: true,
+                    readOnly: false,
+                    editable: true,
+                    autocomplete: null,
+                    options: null,
+                    fields: [],
+                },
+                {
+                    name: "label",
+                    type: "string",
+                    label: "label",
+                    required: true,
+                    readOnly: false,
+                    editable: true,
+                    autocomplete: null,
+                    options: null,
+                    fields: [],
+                },
+            ],
+        },
+        {
+            name: "oneToMany",
+            type: "oneToMany",
+            label: "OneToMany",
+            required: true,
+            readOnly: false,
+            editable: true,
+            autocomplete: null,
+            options: null,
+            fields: [
+                {
+                    name: "id",
+                    type: "integer",
+                    label: "Id",
+                    required: true,
+                    readOnly: true,
+                    editable: true,
+                    autocomplete: null,
+                    options: null,
+                    fields: [],
+                },
+                {
+                    name: "value",
+                    type: "integer",
+                    label: "Big test one to many value",
+                    required: true,
+                    readOnly: false,
+                    editable: true,
+                    autocomplete: null,
+                    options: null,
+                    fields: [],
+                },
+                {
+                    name: "label",
+                    type: "string",
+                    label: "Big test one to many label",
+                    required: true,
+                    readOnly: false,
+                    editable: true,
+                    autocomplete: null,
+                    options: null,
+                    fields: [],
+                },
+            ],
+        },
+    ],
+};

package/form-renderer/field/base-field.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { FieldProps } from "../types";
+export declare function BaseField(props: FieldProps): React.JSX.Element;
+export default BaseField;

package/form-renderer/field/base-field.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseField = BaseField;
+const translations_1 = require("@uxf/core-react/translations");
+const autocomplete_1 = require("@uxf/core/api/autocomplete");
+const upload_file_1 = require("@uxf/core/api/upload-file");
+const empty_array_1 = require("@uxf/core/constants/empty-array");
+const checkbox_input_1 = require("@uxf/form/checkbox-input");
+const combobox_1 = require("@uxf/form/combobox");
+const date_picker_input_1 = require("@uxf/form/date-picker-input");
+const datetime_picker_input_1 = require("@uxf/form/datetime-picker-input");
+const dropzone_input_1 = require("@uxf/form/dropzone/dropzone-input");
+const dropzone_list_1 = require("@uxf/form/dropzone/dropzone-list");
+const file_input_1 = require("@uxf/form/file-input");
+const multi_combobox_1 = require("@uxf/form/multi-combobox");
+const number_input_1 = require("@uxf/form/number-input");
+const select_1 = require("@uxf/form/select");
+const text_input_1 = require("@uxf/form/text-input");
+const textarea_1 = require("@uxf/form/textarea");
+const time_picker_input_1 = require("@uxf/form/time-picker-input");
+const label_1 = require("@uxf/ui/label");
+const react_1 = __importDefault(require("react"));
+const defaultUploadHandler = (0, upload_file_1.createUploadHandler)("default");
+// eslint-disable-next-line complexity
+function BaseField(props) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { editable, label, name, readOnly, type } = props.fieldSchema;
+    const fieldName = `${(_a = props.prefix) !== null && _a !== void 0 ? _a : ""}${name}`;
+    const t = (0, translations_1.useUxfTranslation)();
+    const isDisabled = readOnly || (props.isEditing && !editable);
+    const isRequired = !isDisabled && props.fieldSchema.required;
+    const autocompleteHandler = (_c = (_b = props.overrides) === null || _b === void 0 ? void 0 : _b.autocomplete) !== null && _c !== void 0 ? _c : autocomplete_1.autocomplete;
+    const uploadHandler = (_e = (_d = props.overrides) === null || _d === void 0 ? void 0 : _d.upload) !== null && _e !== void 0 ? _e : defaultUploadHandler;
+    /*eslint complexity: ["error", 21]*/
+    switch (type) {
+        case "file":
+        case "logo":
+        case "image":
+            return (react_1.default.createElement(file_input_1.FileInput, { control: props.control, id: fieldName, isClearable: !isRequired, isDisabled: isDisabled, isRequired: isRequired, label: label, name: fieldName, onUploadFile: uploadHandler }));
+        case "enum":
+            return (react_1.default.createElement(select_1.Select, { control: props.control, isClearable: !isRequired, isDisabled: isDisabled, isRequired: isRequired, label: label, name: fieldName, options: (_f = props.fieldSchema.options) !== null && _f !== void 0 ? _f : empty_array_1.EMPTY_ARRAY }));
+        case "boolean":
+            return (react_1.default.createElement(checkbox_input_1.CheckboxInput, { control: props.control, isDisabled: isDisabled, isRequired: isRequired, label: label, name: fieldName }));
+        case "date":
+            return (react_1.default.createElement(date_picker_input_1.DatePickerInput, { control: props.control, isClearable: !isRequired, isDisabled: isDisabled, isRequired: isRequired, label: label, name: fieldName }));
+        case "datetime":
+            return (react_1.default.createElement(datetime_picker_input_1.DatetimePickerInput, { control: props.control, isClearable: !isRequired, isDisabled: isDisabled, isRequired: isRequired, label: label, name: fieldName }));
+        case "time":
+            return (react_1.default.createElement(time_picker_input_1.TimePickerInput, { control: props.control, isClearable: !isRequired, isDisabled: isDisabled, isRequired: isRequired, label: label, name: fieldName }));
+        case "files":
+        case "images":
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(label_1.Label, { isRequired: isRequired }, label),
+                react_1.default.createElement("div", { className: "mb-3" },
+                    react_1.default.createElement(dropzone_input_1.DropzoneInput, { control: props.control, isRequired: isRequired, label: label, name: fieldName, onUploadFile: uploadHandler })),
+                react_1.default.createElement(dropzone_list_1.DropzoneList, { control: props.control, errorText: t("uxf-form-form-renderer:file-upload-error"), name: fieldName, onRemoveConfirm: (_g = props.overrides) === null || _g === void 0 ? void 0 : _g.onRemoveConfirm })));
+        case "manyToMany":
+            return (react_1.default.createElement(multi_combobox_1.MultiCombobox, { control: props.control, isDisabled: isDisabled, isRequired: isRequired, label: label, loadOptions: (term) => { var _a; return autocompleteHandler((_a = props.fieldSchema.autocomplete) !== null && _a !== void 0 ? _a : "", term); }, name: fieldName }));
+        case "manyToOne":
+            return (react_1.default.createElement(combobox_1.Combobox, { control: props.control, isClearable: !isRequired, isDisabled: isDisabled, isRequired: isRequired, label: label, loadOptions: (term) => { var _a; return autocompleteHandler((_a = props.fieldSchema.autocomplete) !== null && _a !== void 0 ? _a : "", term); }, name: fieldName }));
+        case "integer":
+            return (react_1.default.createElement(number_input_1.NumberInput, { control: props.control, isDisabled: isDisabled, isRequired: isRequired, label: label, name: fieldName }));
+        case "text":
+            return (react_1.default.createElement(textarea_1.Textarea, { control: props.control, isDisabled: isDisabled, isRequired: isRequired, label: label, name: fieldName }));
+        default:
+            return (react_1.default.createElement(text_input_1.TextInput, { control: props.control, isDisabled: isDisabled, isRequired: isRequired, label: label, name: fieldName }));
+    }
+}
+exports.default = BaseField;

package/form-renderer/field/embedded.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { FieldProps } from "../types";
+declare function Field(props: FieldProps): React.JSX.Element | null;
+export default Field;

package/form-renderer/field/embedded.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+function Field(props) {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (props.fieldSchema.fields === null) {
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: "grid gap-2" }, props.fieldSchema.fields.map((schema, i) => {
+        var _a;
+        const FieldComponent = (_a = props.fields[schema.type]) !== null && _a !== void 0 ? _a : props.fields.default;
+        return (react_1.default.createElement("div", { key: i },
+            react_1.default.createElement(FieldComponent, { ...props, fieldSchema: { ...schema, label: `${props.fieldSchema.label} ${schema.label}` }, prefix: `${props.fieldSchema.name}.` })));
+    })));
+}
+exports.default = Field;

package/form-renderer/field/one-to-many.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { FieldProps } from "../types";
+declare function Field(props: FieldProps): React.JSX.Element;
+export default Field;

package/form-renderer/field/one-to-many.js

@@ -0,0 +1,52 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const translations_1 = require("@uxf/core-react/translations");
+const icon_button_1 = require("@uxf/ui/icon-button");
+const react_1 = __importStar(require("react"));
+const react_hook_form_1 = require("react-hook-form");
+function Field(props) {
+    const { fields, remove, append } = (0, react_hook_form_1.useFieldArray)({ control: props.control, name: props.fieldSchema.name });
+    const t = (0, translations_1.useUxfTranslation)();
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("p", { className: "mb-2 font-medium" }, props.fieldSchema.label),
+        react_1.default.createElement("div", { className: "grid gap-2" }, fields.map((name, index) => (react_1.default.createElement(react_1.Fragment, { key: name.id },
+            props.fieldSchema.fields.map((schema, i) => {
+                var _a;
+                if (schema.name === "id") {
+                    return react_1.default.createElement("input", { key: `${schema.name}-${i}`, name: "id", type: "hidden" });
+                }
+                const FieldComponent = (_a = props.fields[schema.type]) !== null && _a !== void 0 ? _a : props.fields.default;
+                return (react_1.default.createElement("div", { key: `${schema.name}-${i}` },
+                    react_1.default.createElement(FieldComponent, { ...props, fieldSchema: schema, prefix: props.prefix
+                            ? `${props.prefix}.${props.fieldSchema.name}.${index}.`
+                            : `${props.fieldSchema.name}.${index}.` })));
+            }),
+            react_1.default.createElement("div", { className: "flex justify-end" },
+                react_1.default.createElement(icon_button_1.IconButton, { iconName: "trash", label: t("uxf-form-form-renderer:fields.one-to-many.delete-item"), onClick: () => remove(index), variant: "secondary" })))))),
+        react_1.default.createElement("div", { className: "mt-2" },
+            react_1.default.createElement(icon_button_1.IconButton, { iconName: "plus", label: t("uxf-form-form-renderer:fields.one-to-many.add-item"), onClick: () => append({ id: null }), variant: "secondary" }))));
+}
+exports.default = Field;