@bsol-oss/react-datatable5 11.0.0-beta.3 → 11.0.0-beta.5

package/dist/index.js

@@ -28,8 +28,8 @@ var gr = require('react-icons/gr');
 var hi = require('react-icons/hi');
 var reactI18next = require('react-i18next');
 var axios = require('axios');
-var dayjs = require('dayjs');
 var reactHookForm = require('react-hook-form');
+var dayjs = require('dayjs');
 var ti = require('react-icons/ti');
 
 function _interopNamespaceDefault(e) {
@@ -3567,16 +3567,6 @@ const SchemaFormContext = React.createContext({
     requestOptions: {},
 });
 
-const HoverCardContent = React__namespace.forwardRef(function HoverCardContent(props, ref) {
-    const { portalled = true, portalRef, ...rest } = props;
-    return (jsxRuntime.jsx(react.Portal, { disabled: !portalled, container: portalRef, children: jsxRuntime.jsx(react.HoverCard.Positioner, { children: jsxRuntime.jsx(react.HoverCard.Content, { ref: ref, ...rest }) }) }));
-});
-const HoverCardArrow = React__namespace.forwardRef(function HoverCardArrow(props, ref) {
-    return (jsxRuntime.jsx(react.HoverCard.Arrow, { ref: ref, ...props, children: jsxRuntime.jsx(react.HoverCard.ArrowTip, {}) }));
-});
-const HoverCardRoot = react.HoverCard.Root;
-const HoverCardTrigger = react.HoverCard.Trigger;
-
 const useSchemaContext = () => {
     const { schema, serverUrl, requestUrl, order, ignore, onSubmit, rowNumber, idMap, setIdMap, translate, requestOptions, } = React.useContext(SchemaFormContext);
     return {
@@ -3594,22 +3584,6 @@ const useSchemaContext = () => {
     };
 };
 
-const IdViewer = ({ value, column }) => {
-    const { schema, idMap, translate } = useSchemaContext();
-    if (schema.properties == undefined) {
-        throw new Error("schema properties when using DatePicker");
-    }
-    const { foreign_key } = schema.properties[column];
-    if (foreign_key === undefined) {
-        throw new Error("foreign_key when variant is id-picker");
-    }
-    const { display_column } = foreign_key;
-    if (value === undefined) {
-        return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", children: [jsxRuntime.jsx(react.Text, { children: translate.t(`${column}.fieldLabel`) }), jsxRuntime.jsx(react.Text, { children: translate.t(`empty`) })] }));
-    }
-    return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", children: [jsxRuntime.jsx(react.Text, { children: translate.t(`${column}.fieldLabel`) }), jsxRuntime.jsxs(HoverCardRoot, { children: [jsxRuntime.jsx(HoverCardTrigger, { asChild: true, children: jsxRuntime.jsx(react.Text, { cursor: 'pointer', children: idMap[value][display_column] }) }), jsxRuntime.jsxs(HoverCardContent, { children: [jsxRuntime.jsx(HoverCardArrow, {}), jsxRuntime.jsx(RecordDisplay, { object: idMap[value] })] })] })] }));
-};
-
 const clearEmptyString = (object) => {
     return Object.fromEntries(Object.entries(object).filter(([, value]) => value !== ""));
 };
@@ -3624,20 +3598,24 @@ const AccordionItemContent = React__namespace.forwardRef(function AccordionItemC
 const AccordionRoot = react.Accordion.Root;
 const AccordionItem = react.Accordion.Item;
 
-const ToggleTip = React__namespace.forwardRef(function ToggleTip(props, ref) {
-    const { showArrow, children, portalled = true, content, portalRef, ...rest } = props;
-    return (jsxRuntime.jsxs(react.Popover.Root, { ...rest, positioning: { ...rest.positioning, gutter: 4 }, children: [jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: children }), jsxRuntime.jsx(react.Portal, { disabled: !portalled, container: portalRef, children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsxs(react.Popover.Content, { width: "auto", px: "2", py: "1", textStyle: "xs", rounded: "sm", ref: ref, children: [showArrow && (jsxRuntime.jsx(react.Popover.Arrow, { children: jsxRuntime.jsx(react.Popover.ArrowTip, {}) })), content] }) }) })] }));
-});
-const InfoTip = React__namespace.forwardRef(function InfoTip(props, ref) {
-    const { children, ...rest } = props;
-    return (jsxRuntime.jsx(ToggleTip, { content: children, ...rest, ref: ref, children: jsxRuntime.jsx(react.IconButton, { variant: "ghost", "aria-label": "info", size: "2xs", colorPalette: "gray", children: jsxRuntime.jsx(hi.HiOutlineInformationCircle, {}) }) }));
-});
-
-const DataListRoot = react.DataList.Root;
-const DataListItem = React__namespace.forwardRef(function DataListItem(props, ref) {
-    const { label, info, value, children, grow, ...rest } = props;
-    return (jsxRuntime.jsxs(react.DataList.Item, { ref: ref, ...rest, children: [jsxRuntime.jsxs(react.DataList.ItemLabel, { flex: grow ? "1" : undefined, children: [label, info && jsxRuntime.jsx(InfoTip, { children: info })] }), jsxRuntime.jsx(react.DataList.ItemValue, { flex: grow ? "1" : undefined, children: value }), children] }));
-});
+const ArrayRenderer = ({ schema, column, prefix, }) => {
+    const { gridRow, gridColumn = "1/span 12", required, items } = schema;
+    const { translate } = useSchemaContext();
+    const colLabel = `${prefix}${column}`;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const { formState: { errors }, control, } = reactHookForm.useFormContext();
+    const { fields, append, prepend, remove, swap, move, insert } = reactHookForm.useFieldArray({
+        control, // control props comes from useForm (optional: if you are using FormContext)
+        name: "test", // unique name for your Field Array
+    });
+    return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [jsxRuntime.jsxs(react.Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(`${colLabel}.fieldLabel`)}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] }), fields.map((field, index) => (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", children: [jsxRuntime.jsx(react.Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat("auto-fit", auto)`, children: jsxRuntime.jsx(SchemaRenderer, { column: `${column}.${index}`,
+                            prefix: `${prefix}`,
+                            schema: items }, `form-${column}`) }), jsxRuntime.jsx(react.Flex, { justifyContent: "end", children: jsxRuntime.jsx(react.Button, { variant: "ghost", onClick: () => {
+                                remove(index);
+                            }, children: translate.t(`${colLabel}.remove`) }) })] }))), jsxRuntime.jsx(react.Flex, { children: jsxRuntime.jsx(react.Button, { onClick: () => {
+                        append({});
+                    }, children: translate.t(`${colLabel}.add`) }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${colLabel}.fieldRequired`) }))] }));
+};
 
 const Field = React__namespace.forwardRef(function Field(props, ref) {
     const { label, children, helperText, errorText, optionalText, ...rest } = props;
@@ -4350,16 +4328,21 @@ const NumberInputField = ({ schema, column, prefix, }) => {
 };
 
 const ObjectInput = ({ schema, column, prefix }) => {
-    const { properties } = schema;
+    const { properties, gridRow, gridColumn = "1/span 12", required } = schema;
+    const { translate } = useSchemaContext();
+    const colLabel = `${prefix}${column}`;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const { watch, formState: { errors }, setValue, control, } = reactHookForm.useFormContext();
     if (properties === undefined) {
         throw new Error(`properties is undefined when using ObjectInput`);
     }
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: Object.keys(properties ?? {}).map((key) => {
-            console.log(properties, key, "gkor");
-            return (jsxRuntime.jsx(ColumnRenderer, { column: `${key}`,
-                prefix: `${prefix}${column}.`,
-                properties }, `form-${column}`));
-        }) }));
+    return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [jsxRuntime.jsxs(react.Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(`${colLabel}.fieldLabel`)}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] }), jsxRuntime.jsx(react.Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat("auto-fit", auto)`, children: Object.keys(properties ?? {}).map((key) => {
+                    return (
+                    // @ts-expect-error find suitable types
+                    jsxRuntime.jsx(ColumnRenderer, { column: `${key}`,
+                        prefix: `${prefix}${column}.`,
+                        properties }, `form-${column}`));
+                }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${colLabel}.fieldRequired`) }))] }));
 };
 
 const RecordInput = ({ column, schema, prefix }) => {
@@ -4433,13 +4416,13 @@ const RadioCardRoot = react.RadioCard.Root;
 react.RadioCard.Label;
 react.RadioCard.ItemIndicator;
 
-const TagPicker = ({ column }) => {
+const TagPicker = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
-    const { schema, serverUrl } = useSchemaContext();
+    const { serverUrl } = useSchemaContext();
     if (schema.properties == undefined) {
         throw new Error("schema properties undefined when using DatePicker");
     }
-    const { gridColumn, gridRow, in_table, object_id_column } = schema.properties[column];
+    const { gridColumn, gridRow, in_table, object_id_column } = schema;
     if (in_table === undefined) {
         throw new Error("in_table is undefined when using TagPicker");
     }
@@ -4465,7 +4448,7 @@ const TagPicker = ({ column }) => {
     });
     const object_id = watch(object_id_column);
     const existingTagsQuery = reactQuery.useQuery({
-        queryKey: [`existing`, in_table, object_id_column, object_id],
+        queryKey: [`existing`, { in_table, object_id_column }, object_id],
         queryFn: async () => {
             return await getTableData({
                 serverUrl,
@@ -4518,20 +4501,11 @@ const TagPicker = ({ column }) => {
             }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
 };
 
-const ColumnRenderer = ({ column, properties, prefix, }) => {
-    if (properties === undefined) {
-        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    }
-    console.log(`${column} does not exist when using ColumnRenderer`, { properties,
-        column,
-        prefix, }, "fdpok");
-    const colSchema = properties[column];
-    if (colSchema === undefined) {
-        throw new Error(`${column} does not exist when using ColumnRenderer`);
-    }
-    const { type, variant, foreign_key, properties: innerProperties } = colSchema;
+const SchemaRenderer = ({ schema, prefix, column, }) => {
+    const colSchema = schema;
+    const { type, variant, properties: innerProperties, foreign_key, items, } = schema;
     if (type === "string") {
-        if ((properties[column].enum ?? []).length > 0) {
+        if ((schema.enum ?? []).length > 0) {
             return jsxRuntime.jsx(EnumPicker, { schema: colSchema, prefix, column });
         }
         if (variant === "id-picker") {
@@ -4566,6 +4540,9 @@ const ColumnRenderer = ({ column, properties, prefix, }) => {
         if (variant === "file-picker") {
             return jsxRuntime.jsx(FilePicker, { schema: colSchema, prefix, column });
         }
+        if (items) {
+            return jsxRuntime.jsx(ArrayRenderer, { schema: colSchema, prefix, column });
+        }
         return jsxRuntime.jsx(react.Text, { children: `array ${column}` });
     }
     if (type === "null") {
@@ -4574,6 +4551,18 @@ const ColumnRenderer = ({ column, properties, prefix, }) => {
     return jsxRuntime.jsx(react.Text, { children: "missing type" });
 };
 
+const ColumnRenderer = ({ column, properties, prefix, }) => {
+    if (properties === undefined) {
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    }
+    console.log(`${column} does not exist when using ColumnRenderer`, { properties, column, prefix }, "fdpok");
+    const colSchema = properties[column];
+    if (colSchema === undefined) {
+        throw new Error(`${column} does not exist when using ColumnRenderer`);
+    }
+    return jsxRuntime.jsx(SchemaRenderer, { schema: colSchema, prefix, column });
+};
+
 const idPickerSanityCheck = (column, foreign_key) => {
     if (!!foreign_key == false) {
         throw new Error(`The key foreign_key does not exist in properties of column ${column} when using id-picker.`);
@@ -4654,121 +4643,34 @@ const FormInternal = () => {
         return [...order, ...not_exist];
     };
     const ordered = renderOrder(order, Object.keys(properties));
-    const getDataListProps = (value) => {
-        if (value == undefined || value.length <= 0) {
-            return {
-                value: `<${translate.t("empty") ?? "Empty"}>`,
-                color: "gray.400",
-            };
-        }
-        return {
-            value: value,
-        };
-    };
     if (isSuccess) {
-        return (jsxRuntime.jsxs(react.Grid, { gap: 2, children: [jsxRuntime.jsx(react.Heading, { children: translate.t("title") }), jsxRuntime.jsxs(react.Alert.Root, { status: "success", children: [jsxRuntime.jsx(react.Alert.Indicator, {}), jsxRuntime.jsx(react.Alert.Title, { children: translate.t("submitSuccess") })] }), jsxRuntime.jsx(Button, { onClick: () => {
-                        setIsError(false);
-                        setIsSubmiting(false);
-                        setIsSuccess(false);
-                        setIsConfirming(false);
-                        setValidatedData(undefined);
-                        methods.reset();
-                    }, formNoValidate: true, children: translate.t("submitAgain") })] }));
+        return (jsxRuntime.jsxs(react.Grid, { gap: 2, children: [jsxRuntime.jsx(react.Heading, { children: translate.t("title") }), jsxRuntime.jsxs(react.Alert.Root, { status: "success", children: [jsxRuntime.jsx(react.Alert.Indicator, {}), jsxRuntime.jsx(react.Alert.Title, { children: translate.t("submitSuccess") })] }), jsxRuntime.jsx(react.Flex, { justifyContent: "end", children: jsxRuntime.jsx(Button, { onClick: () => {
+                            setIsError(false);
+                            setIsSubmiting(false);
+                            setIsSuccess(false);
+                            setIsConfirming(false);
+                            setValidatedData(undefined);
+                            methods.reset();
+                        }, formNoValidate: true, children: translate.t("submitAgain") }) })] }));
     }
     if (isConfirming) {
-        return (jsxRuntime.jsxs(react.Grid, { gap: 2, children: [jsxRuntime.jsxs(react.Heading, { children: [" ", translate.t("title")] }), jsxRuntime.jsx(DataListRoot, { orientation: "horizontal", gap: 4, display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat(${rowNumber ?? "auto-fit"}, auto)`, children: ordered.map((column) => {
-                        if (properties === undefined) {
-                            return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-                        }
-                        const key = column;
-                        const values = properties[column];
-                        const shouldIgnore = ignore.some((column) => {
-                            return column == key;
-                        });
-                        if (shouldIgnore) {
-                            return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-                        }
-                        const { type, variant, gridColumn, gridRow, foreign_key } = values;
-                        if (type === "string") {
-                            if (variant === "id-picker") {
-                                idPickerSanityCheck(column, foreign_key);
-                                return (jsxRuntime.jsx(IdViewer, { value: (validatedData ?? {})[column], column,
-                                    dataListItemProps: { gridColumn, gridRow } }, `form-${key}`));
-                            }
-                            if (variant === "date-picker") {
-                                const value = (validatedData ?? {})[column];
-                                if (!!value === false) {
-                                    return (jsxRuntime.jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps(undefined) }, `form-${key}`));
-                                }
-                                const date = dayjs(value).format("YYYY-MM-DD");
-                                return (jsxRuntime.jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps(date) }, `form-${key}`));
-                            }
-                            return (jsxRuntime.jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 4", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps((validatedData ?? {})[column]) }, `form-${key}`));
-                        }
-                        if (type === "object") {
-                            const value = (validatedData ?? {})[column];
-                            if (!!value === false) {
-                                return (jsxRuntime.jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps(undefined) }, `form-${key}`));
-                            }
-                            return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: 2, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsxRuntime.jsx(react.Text, { children: translate.t(`input.${column}`) }), jsxRuntime.jsx(DataListRoot, { orientation: "horizontal", padding: 4, borderColor: "gray.200", borderWidth: 1, borderRadius: 4, children: Object.entries(value).map(([key, value]) => {
-                                            return (jsxRuntime.jsx(DataListItem, { label: `${key}`, ...getDataListProps(value) }, `form-${column}-${key}`));
-                                        }) })] }, `form-${key}`));
-                        }
-                        if (type === "boolean") {
-                            return (jsxRuntime.jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 4", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps((validatedData ?? {})[column]) }, `form-${key}`));
-                        }
-                        if (type === "number" || type === "integer") {
-                            return (jsxRuntime.jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 4", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps((validatedData ?? {})[column]) }, `form-${key}`));
-                        }
-                        if (type === "array") {
-                            if (variant === "tag-picker") {
-                                const value = (validatedData ?? {})[column];
-                                return (jsxRuntime.jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps(JSON.stringify(value)) }, `form-${key}`));
-                            }
-                            if (variant === "file-picker") {
-                                const fileNames = ((validatedData ?? {})[column] ?? []).map((file) => {
-                                    return file.name;
-                                });
-                                return (jsxRuntime.jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 4", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps(JSON.stringify(fileNames)) }, `form-${key}`));
-                            }
-                            if (variant === "id-picker") {
-                                const value = (validatedData ?? {})[column];
-                                if (schema.properties == undefined) {
-                                    throw new Error("schema properties when using DatePicker");
-                                }
-                                const { foreign_key } = schema.properties[column];
-                                if (foreign_key === undefined) {
-                                    throw new Error("foreign_key when variant is id-picker");
-                                }
-                                const { display_column } = foreign_key;
-                                const mapped = value.map((item) => {
-                                    return idMap[item][display_column];
-                                });
-                                return (jsxRuntime.jsxs(react.Grid, { flexFlow: "column", gridColumn,
-                                    gridRow, children: [jsxRuntime.jsx(react.Text, { children: translate.t(`input.${column}`) }), jsxRuntime.jsx(RecordDisplay, { object: mapped })] }, `form-${key}`));
-                            }
-                            const objectString = JSON.stringify((validatedData ?? {})[column]);
-                            return (jsxRuntime.jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 4", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps(objectString) }, `form-${key}`));
-                        }
-                        if (type === "null") {
-                            return jsxRuntime.jsx(jsxRuntime.Fragment, { children: `null ${column}` });
-                        }
-                        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: `unknown type ${column}` });
-                    }) }), jsxRuntime.jsx(Button, { onClick: () => {
-                        onFormSubmit(validatedData);
-                    }, children: translate.t("confirm") }), jsxRuntime.jsx(Button, { onClick: () => {
-                        setIsConfirming(false);
-                    }, variant: "subtle", children: translate.t("cancel") }), isSubmiting && (jsxRuntime.jsx(react.Box, { pos: "absolute", inset: "0", bg: "bg/80", children: jsxRuntime.jsx(react.Center, { h: "full", children: jsxRuntime.jsx(react.Spinner, { color: "teal.500" }) }) })), isError && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(react.Alert.Root, { status: "error", children: jsxRuntime.jsx(react.Alert.Title, { children: jsxRuntime.jsx(AccordionRoot, { collapsible: true, defaultValue: ["b"], children: jsxRuntime.jsxs(AccordionItem, { value: "b", children: [jsxRuntime.jsxs(AccordionItemTrigger, { children: [jsxRuntime.jsx(react.Alert.Indicator, {}), `${error}`] }), jsxRuntime.jsx(AccordionItemContent, { children: `${JSON.stringify(error)}` })] }) }) }) }) }))] }));
+        return (jsxRuntime.jsxs(react.Grid, { gap: 2, children: [jsxRuntime.jsxs(react.Heading, { children: [" ", translate.t("title")] }), jsxRuntime.jsx(react.Grid, { gap: 4, gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat(${rowNumber ?? "auto-fit"}, auto)`, children: jsxRuntime.jsx(RecordDisplay, { object: validatedData ?? {}, boxProps: { gridColumn: "1/span12" } }) }), jsxRuntime.jsxs(react.Flex, { justifyContent: "end", gap: "2", children: [jsxRuntime.jsx(Button, { onClick: () => {
+                                setIsConfirming(false);
+                            }, variant: "subtle", children: translate.t("cancel") }), jsxRuntime.jsx(Button, { onClick: () => {
+                                onFormSubmit(validatedData);
+                            }, children: translate.t("confirm") })] }), isSubmiting && (jsxRuntime.jsx(react.Box, { pos: "absolute", inset: "0", bg: "bg/80", children: jsxRuntime.jsx(react.Center, { h: "full", children: jsxRuntime.jsx(react.Spinner, { color: "teal.500" }) }) })), isError && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(react.Alert.Root, { status: "error", children: jsxRuntime.jsx(react.Alert.Title, { children: jsxRuntime.jsx(AccordionRoot, { collapsible: true, defaultValue: ["b"], children: jsxRuntime.jsxs(AccordionItem, { value: "b", children: [jsxRuntime.jsxs(AccordionItemTrigger, { children: [jsxRuntime.jsx(react.Alert.Indicator, {}), `${error}`] }), jsxRuntime.jsx(AccordionItemContent, { children: `${JSON.stringify(error)}` })] }) }) }) }) }))] }));
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(react.Grid, { gap: 2, children: [jsxRuntime.jsxs(react.Heading, { children: [" ", translate.t("title")] }), jsxRuntime.jsx(react.Grid, { gap: 4, gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat(${rowNumber ?? "auto-fit"}, auto)`, children: ordered.map((column) => {
-                            return (jsxRuntime.jsx(ColumnRenderer
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(react.Grid, { gap: "2", children: [jsxRuntime.jsxs(react.Heading, { children: [" ", translate.t("title")] }), jsxRuntime.jsx(react.Grid, { gap: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat(${rowNumber ?? "auto-fit"}, auto)`, children: ordered.map((column) => {
+                        return (jsxRuntime.jsx(ColumnRenderer
+                        // @ts-expect-error find suitable types
+                        , { 
                             // @ts-expect-error find suitable types
-                            , { 
-                                // @ts-expect-error find suitable types
-                                properties: properties, prefix: ``, column }, `form-${column}`));
-                        }) }), jsxRuntime.jsx(Button, { onClick: () => {
-                            methods.handleSubmit(onValid)();
-                        }, formNoValidate: true, children: translate.t("submit") })] }), isError && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["isError", jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" ", `${error}`] })] }))] }));
+                            properties: properties, prefix: ``, column }, `form-${column}`));
+                    }) }), jsxRuntime.jsxs(react.Flex, { justifyContent: "end", gap: "2", children: [jsxRuntime.jsx(Button, { onClick: () => {
+                                methods.reset();
+                            }, variant: "subtle", children: translate.t("reset") }), jsxRuntime.jsx(Button, { onClick: () => {
+                                methods.handleSubmit(onValid)();
+                            }, formNoValidate: true, children: translate.t("submit") })] })] }) }));
 };
 const Form = ({ schema, idMap, setIdMap, form, serverUrl, translate, order = [], ignore = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, }) => {
     const { properties } = schema;
@@ -4790,7 +4692,9 @@ const Form = ({ schema, idMap, setIdMap, form, serverUrl, translate, order = [],
 };
 
 const useForm = ({ preLoadedValues, keyPrefix }) => {
-    const form = reactHookForm.useForm({ values: preLoadedValues });
+    const form = reactHookForm.useForm({
+        values: preLoadedValues,
+    });
     const [idMap, setIdMap] = React.useState({});
     const translate = reactI18next.useTranslation("", { keyPrefix });
     return {

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal, Dialog, RadioGroup as RadioGroup$1, Grid, Box, Slider as Slider$1, HStack, For, Flex, Text, Tag as Tag$1, Input, useDisclosure, DialogBackdrop, CheckboxCard as CheckboxCard$1, Menu, createRecipeContext, createContext as createContext$1, Pagination as Pagination$1, usePaginationContext, Image, Card, DataList, Checkbox as Checkbox$1, Table as Table$1, Tooltip as Tooltip$1, Group, InputElement, Icon, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, EmptyState as EmptyState$2, VStack, List, Alert, HoverCard, Accordion, Popover, Field as Field$1, NumberInput, Show, RadioCard, CheckboxGroup, Heading, Center } from '@chakra-ui/react';
+import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal, Dialog, RadioGroup as RadioGroup$1, Grid, Box, Slider as Slider$1, HStack, For, Flex, Text, Tag as Tag$1, Input, useDisclosure, DialogBackdrop, CheckboxCard as CheckboxCard$1, Menu, createRecipeContext, createContext as createContext$1, Pagination as Pagination$1, usePaginationContext, Image, Card, DataList, Checkbox as Checkbox$1, Table as Table$1, Tooltip as Tooltip$1, Group, InputElement, Icon, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, EmptyState as EmptyState$2, VStack, List, Alert, Accordion, Field as Field$1, Popover, NumberInput, Show, RadioCard, CheckboxGroup, Heading, Center } from '@chakra-ui/react';
 import { AiOutlineColumnWidth } from 'react-icons/ai';
 import * as React from 'react';
 import React__default, { createContext, useContext, useState, useEffect, useRef } from 'react';
@@ -24,11 +24,11 @@ import { useDebounce } from '@uidotdev/usehooks';
 import { useQueryClient, useQuery } from '@tanstack/react-query';
 import { IoReload } from 'react-icons/io5';
 import { GrAscend, GrDescend } from 'react-icons/gr';
-import { HiColorSwatch, HiOutlineInformationCircle } from 'react-icons/hi';
+import { HiColorSwatch } from 'react-icons/hi';
 import { useTranslation } from 'react-i18next';
 import axios from 'axios';
+import { useFormContext, useFieldArray, FormProvider, useForm as useForm$1 } from 'react-hook-form';
 import dayjs from 'dayjs';
-import { useFormContext, FormProvider, useForm as useForm$1 } from 'react-hook-form';
 import { TiDeleteOutline } from 'react-icons/ti';
 
 const DataTableContext = createContext({
@@ -3547,16 +3547,6 @@ const SchemaFormContext = createContext({
     requestOptions: {},
 });
 
-const HoverCardContent = React.forwardRef(function HoverCardContent(props, ref) {
-    const { portalled = true, portalRef, ...rest } = props;
-    return (jsx(Portal, { disabled: !portalled, container: portalRef, children: jsx(HoverCard.Positioner, { children: jsx(HoverCard.Content, { ref: ref, ...rest }) }) }));
-});
-const HoverCardArrow = React.forwardRef(function HoverCardArrow(props, ref) {
-    return (jsx(HoverCard.Arrow, { ref: ref, ...props, children: jsx(HoverCard.ArrowTip, {}) }));
-});
-const HoverCardRoot = HoverCard.Root;
-const HoverCardTrigger = HoverCard.Trigger;
-
 const useSchemaContext = () => {
     const { schema, serverUrl, requestUrl, order, ignore, onSubmit, rowNumber, idMap, setIdMap, translate, requestOptions, } = useContext(SchemaFormContext);
     return {
@@ -3574,22 +3564,6 @@ const useSchemaContext = () => {
     };
 };
 
-const IdViewer = ({ value, column }) => {
-    const { schema, idMap, translate } = useSchemaContext();
-    if (schema.properties == undefined) {
-        throw new Error("schema properties when using DatePicker");
-    }
-    const { foreign_key } = schema.properties[column];
-    if (foreign_key === undefined) {
-        throw new Error("foreign_key when variant is id-picker");
-    }
-    const { display_column } = foreign_key;
-    if (value === undefined) {
-        return (jsxs(Flex, { flexFlow: "column", children: [jsx(Text, { children: translate.t(`${column}.fieldLabel`) }), jsx(Text, { children: translate.t(`empty`) })] }));
-    }
-    return (jsxs(Flex, { flexFlow: "column", children: [jsx(Text, { children: translate.t(`${column}.fieldLabel`) }), jsxs(HoverCardRoot, { children: [jsx(HoverCardTrigger, { asChild: true, children: jsx(Text, { cursor: 'pointer', children: idMap[value][display_column] }) }), jsxs(HoverCardContent, { children: [jsx(HoverCardArrow, {}), jsx(RecordDisplay, { object: idMap[value] })] })] })] }));
-};
-
 const clearEmptyString = (object) => {
     return Object.fromEntries(Object.entries(object).filter(([, value]) => value !== ""));
 };
@@ -3604,20 +3578,24 @@ const AccordionItemContent = React.forwardRef(function AccordionItemContent(prop
 const AccordionRoot = Accordion.Root;
 const AccordionItem = Accordion.Item;
 
-const ToggleTip = React.forwardRef(function ToggleTip(props, ref) {
-    const { showArrow, children, portalled = true, content, portalRef, ...rest } = props;
-    return (jsxs(Popover.Root, { ...rest, positioning: { ...rest.positioning, gutter: 4 }, children: [jsx(Popover.Trigger, { asChild: true, children: children }), jsx(Portal, { disabled: !portalled, container: portalRef, children: jsx(Popover.Positioner, { children: jsxs(Popover.Content, { width: "auto", px: "2", py: "1", textStyle: "xs", rounded: "sm", ref: ref, children: [showArrow && (jsx(Popover.Arrow, { children: jsx(Popover.ArrowTip, {}) })), content] }) }) })] }));
-});
-const InfoTip = React.forwardRef(function InfoTip(props, ref) {
-    const { children, ...rest } = props;
-    return (jsx(ToggleTip, { content: children, ...rest, ref: ref, children: jsx(IconButton, { variant: "ghost", "aria-label": "info", size: "2xs", colorPalette: "gray", children: jsx(HiOutlineInformationCircle, {}) }) }));
-});
-
-const DataListRoot = DataList.Root;
-const DataListItem = React.forwardRef(function DataListItem(props, ref) {
-    const { label, info, value, children, grow, ...rest } = props;
-    return (jsxs(DataList.Item, { ref: ref, ...rest, children: [jsxs(DataList.ItemLabel, { flex: grow ? "1" : undefined, children: [label, info && jsx(InfoTip, { children: info })] }), jsx(DataList.ItemValue, { flex: grow ? "1" : undefined, children: value }), children] }));
-});
+const ArrayRenderer = ({ schema, column, prefix, }) => {
+    const { gridRow, gridColumn = "1/span 12", required, items } = schema;
+    const { translate } = useSchemaContext();
+    const colLabel = `${prefix}${column}`;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const { formState: { errors }, control, } = useFormContext();
+    const { fields, append, prepend, remove, swap, move, insert } = useFieldArray({
+        control, // control props comes from useForm (optional: if you are using FormContext)
+        name: "test", // unique name for your Field Array
+    });
+    return (jsxs(Box, { gridRow, gridColumn, children: [jsxs(Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(`${colLabel}.fieldLabel`)}`, isRequired && jsx("span", { children: "*" })] }), fields.map((field, index) => (jsxs(Flex, { flexFlow: "column", children: [jsx(Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat("auto-fit", auto)`, children: jsx(SchemaRenderer, { column: `${column}.${index}`,
+                            prefix: `${prefix}`,
+                            schema: items }, `form-${column}`) }), jsx(Flex, { justifyContent: "end", children: jsx(Button$1, { variant: "ghost", onClick: () => {
+                                remove(index);
+                            }, children: translate.t(`${colLabel}.remove`) }) })] }))), jsx(Flex, { children: jsx(Button$1, { onClick: () => {
+                        append({});
+                    }, children: translate.t(`${colLabel}.add`) }) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(`${colLabel}.fieldRequired`) }))] }));
+};
 
 const Field = React.forwardRef(function Field(props, ref) {
     const { label, children, helperText, errorText, optionalText, ...rest } = props;
@@ -4330,16 +4308,21 @@ const NumberInputField = ({ schema, column, prefix, }) => {
 };
 
 const ObjectInput = ({ schema, column, prefix }) => {
-    const { properties } = schema;
+    const { properties, gridRow, gridColumn = "1/span 12", required } = schema;
+    const { translate } = useSchemaContext();
+    const colLabel = `${prefix}${column}`;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const { watch, formState: { errors }, setValue, control, } = useFormContext();
     if (properties === undefined) {
         throw new Error(`properties is undefined when using ObjectInput`);
     }
-    return (jsx(Fragment, { children: Object.keys(properties ?? {}).map((key) => {
-            console.log(properties, key, "gkor");
-            return (jsx(ColumnRenderer, { column: `${key}`,
-                prefix: `${prefix}${column}.`,
-                properties }, `form-${column}`));
-        }) }));
+    return (jsxs(Box, { gridRow, gridColumn, children: [jsxs(Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(`${colLabel}.fieldLabel`)}`, isRequired && jsx("span", { children: "*" })] }), jsx(Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat("auto-fit", auto)`, children: Object.keys(properties ?? {}).map((key) => {
+                    return (
+                    // @ts-expect-error find suitable types
+                    jsx(ColumnRenderer, { column: `${key}`,
+                        prefix: `${prefix}${column}.`,
+                        properties }, `form-${column}`));
+                }) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(`${colLabel}.fieldRequired`) }))] }));
 };
 
 const RecordInput = ({ column, schema, prefix }) => {
@@ -4413,13 +4396,13 @@ const RadioCardRoot = RadioCard.Root;
 RadioCard.Label;
 RadioCard.ItemIndicator;
 
-const TagPicker = ({ column }) => {
+const TagPicker = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
-    const { schema, serverUrl } = useSchemaContext();
+    const { serverUrl } = useSchemaContext();
     if (schema.properties == undefined) {
         throw new Error("schema properties undefined when using DatePicker");
     }
-    const { gridColumn, gridRow, in_table, object_id_column } = schema.properties[column];
+    const { gridColumn, gridRow, in_table, object_id_column } = schema;
     if (in_table === undefined) {
         throw new Error("in_table is undefined when using TagPicker");
     }
@@ -4445,7 +4428,7 @@ const TagPicker = ({ column }) => {
     });
     const object_id = watch(object_id_column);
     const existingTagsQuery = useQuery({
-        queryKey: [`existing`, in_table, object_id_column, object_id],
+        queryKey: [`existing`, { in_table, object_id_column }, object_id],
         queryFn: async () => {
             return await getTableData({
                 serverUrl,
@@ -4498,20 +4481,11 @@ const TagPicker = ({ column }) => {
             }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
 };
 
-const ColumnRenderer = ({ column, properties, prefix, }) => {
-    if (properties === undefined) {
-        return jsx(Fragment, {});
-    }
-    console.log(`${column} does not exist when using ColumnRenderer`, { properties,
-        column,
-        prefix, }, "fdpok");
-    const colSchema = properties[column];
-    if (colSchema === undefined) {
-        throw new Error(`${column} does not exist when using ColumnRenderer`);
-    }
-    const { type, variant, foreign_key, properties: innerProperties } = colSchema;
+const SchemaRenderer = ({ schema, prefix, column, }) => {
+    const colSchema = schema;
+    const { type, variant, properties: innerProperties, foreign_key, items, } = schema;
     if (type === "string") {
-        if ((properties[column].enum ?? []).length > 0) {
+        if ((schema.enum ?? []).length > 0) {
             return jsx(EnumPicker, { schema: colSchema, prefix, column });
         }
         if (variant === "id-picker") {
@@ -4546,6 +4520,9 @@ const ColumnRenderer = ({ column, properties, prefix, }) => {
         if (variant === "file-picker") {
             return jsx(FilePicker, { schema: colSchema, prefix, column });
         }
+        if (items) {
+            return jsx(ArrayRenderer, { schema: colSchema, prefix, column });
+        }
         return jsx(Text, { children: `array ${column}` });
     }
     if (type === "null") {
@@ -4554,6 +4531,18 @@ const ColumnRenderer = ({ column, properties, prefix, }) => {
     return jsx(Text, { children: "missing type" });
 };
 
+const ColumnRenderer = ({ column, properties, prefix, }) => {
+    if (properties === undefined) {
+        return jsx(Fragment, {});
+    }
+    console.log(`${column} does not exist when using ColumnRenderer`, { properties, column, prefix }, "fdpok");
+    const colSchema = properties[column];
+    if (colSchema === undefined) {
+        throw new Error(`${column} does not exist when using ColumnRenderer`);
+    }
+    return jsx(SchemaRenderer, { schema: colSchema, prefix, column });
+};
+
 const idPickerSanityCheck = (column, foreign_key) => {
     if (!!foreign_key == false) {
         throw new Error(`The key foreign_key does not exist in properties of column ${column} when using id-picker.`);
@@ -4634,121 +4623,34 @@ const FormInternal = () => {
         return [...order, ...not_exist];
     };
     const ordered = renderOrder(order, Object.keys(properties));
-    const getDataListProps = (value) => {
-        if (value == undefined || value.length <= 0) {
-            return {
-                value: `<${translate.t("empty") ?? "Empty"}>`,
-                color: "gray.400",
-            };
-        }
-        return {
-            value: value,
-        };
-    };
     if (isSuccess) {
-        return (jsxs(Grid, { gap: 2, children: [jsx(Heading, { children: translate.t("title") }), jsxs(Alert.Root, { status: "success", children: [jsx(Alert.Indicator, {}), jsx(Alert.Title, { children: translate.t("submitSuccess") })] }), jsx(Button, { onClick: () => {
-                        setIsError(false);
-                        setIsSubmiting(false);
-                        setIsSuccess(false);
-                        setIsConfirming(false);
-                        setValidatedData(undefined);
-                        methods.reset();
-                    }, formNoValidate: true, children: translate.t("submitAgain") })] }));
+        return (jsxs(Grid, { gap: 2, children: [jsx(Heading, { children: translate.t("title") }), jsxs(Alert.Root, { status: "success", children: [jsx(Alert.Indicator, {}), jsx(Alert.Title, { children: translate.t("submitSuccess") })] }), jsx(Flex, { justifyContent: "end", children: jsx(Button, { onClick: () => {
+                            setIsError(false);
+                            setIsSubmiting(false);
+                            setIsSuccess(false);
+                            setIsConfirming(false);
+                            setValidatedData(undefined);
+                            methods.reset();
+                        }, formNoValidate: true, children: translate.t("submitAgain") }) })] }));
     }
     if (isConfirming) {
-        return (jsxs(Grid, { gap: 2, children: [jsxs(Heading, { children: [" ", translate.t("title")] }), jsx(DataListRoot, { orientation: "horizontal", gap: 4, display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat(${rowNumber ?? "auto-fit"}, auto)`, children: ordered.map((column) => {
-                        if (properties === undefined) {
-                            return jsx(Fragment, {});
-                        }
-                        const key = column;
-                        const values = properties[column];
-                        const shouldIgnore = ignore.some((column) => {
-                            return column == key;
-                        });
-                        if (shouldIgnore) {
-                            return jsx(Fragment, {});
-                        }
-                        const { type, variant, gridColumn, gridRow, foreign_key } = values;
-                        if (type === "string") {
-                            if (variant === "id-picker") {
-                                idPickerSanityCheck(column, foreign_key);
-                                return (jsx(IdViewer, { value: (validatedData ?? {})[column], column,
-                                    dataListItemProps: { gridColumn, gridRow } }, `form-${key}`));
-                            }
-                            if (variant === "date-picker") {
-                                const value = (validatedData ?? {})[column];
-                                if (!!value === false) {
-                                    return (jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps(undefined) }, `form-${key}`));
-                                }
-                                const date = dayjs(value).format("YYYY-MM-DD");
-                                return (jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps(date) }, `form-${key}`));
-                            }
-                            return (jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 4", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps((validatedData ?? {})[column]) }, `form-${key}`));
-                        }
-                        if (type === "object") {
-                            const value = (validatedData ?? {})[column];
-                            if (!!value === false) {
-                                return (jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps(undefined) }, `form-${key}`));
-                            }
-                            return (jsxs(Flex, { flexFlow: "column", gap: 2, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsx(Text, { children: translate.t(`input.${column}`) }), jsx(DataListRoot, { orientation: "horizontal", padding: 4, borderColor: "gray.200", borderWidth: 1, borderRadius: 4, children: Object.entries(value).map(([key, value]) => {
-                                            return (jsx(DataListItem, { label: `${key}`, ...getDataListProps(value) }, `form-${column}-${key}`));
-                                        }) })] }, `form-${key}`));
-                        }
-                        if (type === "boolean") {
-                            return (jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 4", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps((validatedData ?? {})[column]) }, `form-${key}`));
-                        }
-                        if (type === "number" || type === "integer") {
-                            return (jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 4", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps((validatedData ?? {})[column]) }, `form-${key}`));
-                        }
-                        if (type === "array") {
-                            if (variant === "tag-picker") {
-                                const value = (validatedData ?? {})[column];
-                                return (jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps(JSON.stringify(value)) }, `form-${key}`));
-                            }
-                            if (variant === "file-picker") {
-                                const fileNames = ((validatedData ?? {})[column] ?? []).map((file) => {
-                                    return file.name;
-                                });
-                                return (jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 4", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps(JSON.stringify(fileNames)) }, `form-${key}`));
-                            }
-                            if (variant === "id-picker") {
-                                const value = (validatedData ?? {})[column];
-                                if (schema.properties == undefined) {
-                                    throw new Error("schema properties when using DatePicker");
-                                }
-                                const { foreign_key } = schema.properties[column];
-                                if (foreign_key === undefined) {
-                                    throw new Error("foreign_key when variant is id-picker");
-                                }
-                                const { display_column } = foreign_key;
-                                const mapped = value.map((item) => {
-                                    return idMap[item][display_column];
-                                });
-                                return (jsxs(Grid, { flexFlow: "column", gridColumn,
-                                    gridRow, children: [jsx(Text, { children: translate.t(`input.${column}`) }), jsx(RecordDisplay, { object: mapped })] }, `form-${key}`));
-                            }
-                            const objectString = JSON.stringify((validatedData ?? {})[column]);
-                            return (jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 4", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps(objectString) }, `form-${key}`));
-                        }
-                        if (type === "null") {
-                            return jsx(Fragment, { children: `null ${column}` });
-                        }
-                        return jsx(Fragment, { children: `unknown type ${column}` });
-                    }) }), jsx(Button, { onClick: () => {
-                        onFormSubmit(validatedData);
-                    }, children: translate.t("confirm") }), jsx(Button, { onClick: () => {
-                        setIsConfirming(false);
-                    }, variant: "subtle", children: translate.t("cancel") }), isSubmiting && (jsx(Box, { pos: "absolute", inset: "0", bg: "bg/80", children: jsx(Center, { h: "full", children: jsx(Spinner, { color: "teal.500" }) }) })), isError && (jsx(Fragment, { children: jsx(Alert.Root, { status: "error", children: jsx(Alert.Title, { children: jsx(AccordionRoot, { collapsible: true, defaultValue: ["b"], children: jsxs(AccordionItem, { value: "b", children: [jsxs(AccordionItemTrigger, { children: [jsx(Alert.Indicator, {}), `${error}`] }), jsx(AccordionItemContent, { children: `${JSON.stringify(error)}` })] }) }) }) }) }))] }));
+        return (jsxs(Grid, { gap: 2, children: [jsxs(Heading, { children: [" ", translate.t("title")] }), jsx(Grid, { gap: 4, gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat(${rowNumber ?? "auto-fit"}, auto)`, children: jsx(RecordDisplay, { object: validatedData ?? {}, boxProps: { gridColumn: "1/span12" } }) }), jsxs(Flex, { justifyContent: "end", gap: "2", children: [jsx(Button, { onClick: () => {
+                                setIsConfirming(false);
+                            }, variant: "subtle", children: translate.t("cancel") }), jsx(Button, { onClick: () => {
+                                onFormSubmit(validatedData);
+                            }, children: translate.t("confirm") })] }), isSubmiting && (jsx(Box, { pos: "absolute", inset: "0", bg: "bg/80", children: jsx(Center, { h: "full", children: jsx(Spinner, { color: "teal.500" }) }) })), isError && (jsx(Fragment, { children: jsx(Alert.Root, { status: "error", children: jsx(Alert.Title, { children: jsx(AccordionRoot, { collapsible: true, defaultValue: ["b"], children: jsxs(AccordionItem, { value: "b", children: [jsxs(AccordionItemTrigger, { children: [jsx(Alert.Indicator, {}), `${error}`] }), jsx(AccordionItemContent, { children: `${JSON.stringify(error)}` })] }) }) }) }) }))] }));
     }
-    return (jsxs(Fragment, { children: [jsxs(Grid, { gap: 2, children: [jsxs(Heading, { children: [" ", translate.t("title")] }), jsx(Grid, { gap: 4, gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat(${rowNumber ?? "auto-fit"}, auto)`, children: ordered.map((column) => {
-                            return (jsx(ColumnRenderer
+    return (jsx(Fragment, { children: jsxs(Grid, { gap: "2", children: [jsxs(Heading, { children: [" ", translate.t("title")] }), jsx(Grid, { gap: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat(${rowNumber ?? "auto-fit"}, auto)`, children: ordered.map((column) => {
+                        return (jsx(ColumnRenderer
+                        // @ts-expect-error find suitable types
+                        , { 
                             // @ts-expect-error find suitable types
-                            , { 
-                                // @ts-expect-error find suitable types
-                                properties: properties, prefix: ``, column }, `form-${column}`));
-                        }) }), jsx(Button, { onClick: () => {
-                            methods.handleSubmit(onValid)();
-                        }, formNoValidate: true, children: translate.t("submit") })] }), isError && (jsxs(Fragment, { children: ["isError", jsxs(Fragment, { children: [" ", `${error}`] })] }))] }));
+                            properties: properties, prefix: ``, column }, `form-${column}`));
+                    }) }), jsxs(Flex, { justifyContent: "end", gap: "2", children: [jsx(Button, { onClick: () => {
+                                methods.reset();
+                            }, variant: "subtle", children: translate.t("reset") }), jsx(Button, { onClick: () => {
+                                methods.handleSubmit(onValid)();
+                            }, formNoValidate: true, children: translate.t("submit") })] })] }) }));
 };
 const Form = ({ schema, idMap, setIdMap, form, serverUrl, translate, order = [], ignore = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, }) => {
     const { properties } = schema;
@@ -4770,7 +4672,9 @@ const Form = ({ schema, idMap, setIdMap, form, serverUrl, translate, order = [],
 };
 
 const useForm = ({ preLoadedValues, keyPrefix }) => {
-    const form = useForm$1({ values: preLoadedValues });
+    const form = useForm$1({
+        values: preLoadedValues,
+    });
     const [idMap, setIdMap] = useState({});
     const translate = useTranslation("", { keyPrefix });
     return {

package/dist/types/components/Form/components/ArrayRenderer.d.ts

@@ -0,0 +1,7 @@
+import { CustomJSONSchema7 } from "./StringInputField";
+export interface ArrayRendererProps {
+    column: string;
+    schema: CustomJSONSchema7;
+    prefix: string;
+}
+export declare const ArrayRenderer: ({ schema, column, prefix, }: ArrayRendererProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/components/SchemaRenderer.d.ts

@@ -0,0 +1,7 @@
+import { CustomJSONSchema7 } from "./StringInputField";
+export interface SchemaRendererProps {
+    column: string;
+    schema: CustomJSONSchema7;
+    prefix: string;
+}
+export declare const SchemaRenderer: ({ schema, prefix, column, }: SchemaRendererProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/components/TagPicker.d.ts

@@ -1,5 +1,8 @@
+import { CustomJSONSchema7 } from "./StringInputField";
 export interface TagPickerProps {
     column: string;
+    schema: CustomJSONSchema7;
+    prefix: string;
 }
 export interface Tag {
     id: string;
@@ -24,4 +27,4 @@ export interface TagData {
 export interface TagResponse {
     data: TagData[];
 }
-export declare const TagPicker: ({ column }: TagPickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TagPicker: ({ column, schema, prefix }: TagPickerProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "11.0.0-beta.3",
+  "version": "11.0.0-beta.5",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",