@bsol-oss/react-datatable5 12.0.0-beta.62 → 12.0.0-beta.64

package/dist/index.d.ts

@@ -253,7 +253,7 @@ interface DataResponse<T = unknown> extends Result<T> {
 }
 declare const useDataTableServer: <TData>({ url, default: { sorting: defaultSorting, pagination: defaultPagination, rowSelection: defaultRowSelection, columnFilters: defaultColumnFilters, columnOrder: defaultColumnOrder, columnVisibility: defaultColumnVisibility, globalFilter: defaultGlobalFilter, density: defaultDensity, }, keyPrefix, }: UseDataTableServerProps) => UseDataTableServerReturn<TData>;
 
-interface DataTableServerProps<TData extends DataResponse = DataResponse<unknown>> {
+interface DataTableServerProps<TData = unknown> {
     children: ReactNode | ReactNode[];
     /**
      * Column definitions for the table.
@@ -282,10 +282,10 @@ interface DataTableServerProps<TData extends DataResponse = DataResponse<unknown
     setColumnOrder: OnChangeFn<ColumnOrderState>;
     setDensity: OnChangeFn<DensityState>;
     setColumnVisibility: OnChangeFn<VisibilityState>;
-    query: UseQueryResult<TData>;
+    query: UseQueryResult<DataResponse<TData>>;
     url: string;
     translate: UseTranslationResponse<any, any>;
-    tableLabel: DataTableLabel;
+    tableLabel?: DataTableLabel;
 }
 /**
  * DataTableServer will create a context to hold all values to
@@ -298,7 +298,7 @@ interface DataTableServerProps<TData extends DataResponse = DataResponse<unknown
  *
  * @link https://tanstack.com/table/latest/docs/guide/column-defs
  */
-declare function DataTableServer<TData extends DataResponse = DataResponse<unknown>>({ columns, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, query, url, translate, children, tableLabel, }: DataTableServerProps<TData>): react_jsx_runtime.JSX.Element;
+declare function DataTableServer<TData = unknown>({ columns, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, query, url, translate, children, tableLabel, }: DataTableServerProps<TData>): react_jsx_runtime.JSX.Element;
 
 interface TableControlsProps {
     totalText?: string;
@@ -547,6 +547,11 @@ interface FormRootProps<TData extends FieldValues> {
     requestOptions?: AxiosRequestConfig;
     getUpdatedData?: () => TData | Promise<TData> | void;
     customErrorRenderer?: (error: unknown) => ReactNode;
+    displayConfig?: {
+        showSubmitButton?: boolean;
+        showResetButton?: boolean;
+        showTitle?: boolean;
+    };
 }
 interface CustomJSONSchema7Definition extends JSONSchema7 {
     variant: string;
@@ -563,13 +568,13 @@ declare const idPickerSanityCheck: (column: string, foreign_key?: {
     column?: string | undefined;
     display_column?: string | undefined;
 } | undefined) => void;
-declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
+declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, displayConfig, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
 
 interface DefaultFormProps<TData extends FieldValues> {
     formConfig: Omit<FormRootProps<TData>, "children">;
     showTitle?: boolean;
 }
-declare const DefaultForm: <TData extends FieldValues>({ formConfig, showTitle, }: DefaultFormProps<TData>) => react_jsx_runtime.JSX.Element;
+declare const DefaultForm: <TData extends FieldValues>({ formConfig, }: DefaultFormProps<TData>) => react_jsx_runtime.JSX.Element;
 
 declare const FormTitle: () => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -29,13 +29,13 @@ var gr = require('react-icons/gr');
 var reactI18next = require('react-i18next');
 var axios = require('axios');
 var reactHookForm = require('react-hook-form');
+var Ajv = require('ajv');
+var addFormats = require('ajv-formats');
+var addErrors = require('ajv-errors');
 var dayjs = require('dayjs');
 var utc = require('dayjs/plugin/utc');
 var timezone = require('dayjs/plugin/timezone');
 var ti = require('react-icons/ti');
-var Ajv = require('ajv');
-var addFormats = require('ajv-formats');
-var addErrors = require('ajv-errors');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -3693,6 +3693,11 @@ const SchemaFormContext = React.createContext({
     rowNumber: 0,
     requestOptions: {},
     timezone: 'Asia/Hong_Kong',
+    displayConfig: {
+        showSubmitButton: true,
+        showResetButton: true,
+        showTitle: true,
+    },
 });
 
 const useSchemaContext = () => {
@@ -3703,6 +3708,23 @@ const clearEmptyString = (object) => {
     return Object.fromEntries(Object.entries(object).filter(([, value]) => value !== ""));
 };
 
+const validateData = (data, schema) => {
+    const ajv = new Ajv({
+        strict: false,
+        allErrors: true,
+    });
+    addFormats(ajv);
+    addErrors(ajv);
+    const validate = ajv.compile(schema);
+    const validationResult = validate(data);
+    const errors = validate.errors;
+    return {
+        isValid: validationResult,
+        validate,
+        errors,
+    };
+};
+
 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.`);
@@ -3718,7 +3740,11 @@ const idPickerSanityCheck = (column, foreign_key) => {
         throw new Error(`The key column does not exist in properties of column ${column} when using id-picker.`);
     }
 };
-const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, customErrorRenderer, }) => {
+const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, customErrorRenderer, displayConfig = {
+    showSubmitButton: true,
+    showResetButton: true,
+    showTitle: true,
+}, }) => {
     const [isSuccess, setIsSuccess] = React.useState(false);
     const [isError, setIsError] = React.useState(false);
     const [isSubmiting, setIsSubmiting] = React.useState(false);
@@ -3752,6 +3778,7 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
             setError,
             getUpdatedData,
             customErrorRenderer,
+            displayConfig,
         }, children: jsxRuntime.jsx(reactHookForm.FormProvider, { ...form, children: children }) }));
 };
 
@@ -4076,14 +4103,14 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
                         if (!!item === false) {
                             return jsxRuntime.jsx(jsxRuntime.Fragment, {});
                         }
-                        return (jsxRuntime.jsx(Tag, { closable: true, onClick: () => {
+                        return (jsxRuntime.jsx(Tag, { size: "lg", closable: true, onClick: () => {
                                 setValue(column, watchEnums.filter((id) => id != item));
                             }, children: !!renderDisplay === true
                                 ? renderDisplay(item)
-                                : translate.t(removeIndex(`${colLabel}.${item}`)) }));
-                    }), jsxRuntime.jsx(Tag, { cursor: "pointer", onClick: () => {
+                                : translate.t(removeIndex(`${colLabel}.${item}`)) }, item));
+                    }), jsxRuntime.jsx(Tag, { size: "lg", cursor: "pointer", onClick: () => {
                             setOpenSearchResult(true);
-                        }, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
+                        }, children: translate.t(removeIndex(`${colLabel}.add_more`)) }, `${colLabel}-add-more-tag`)] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
                     setOpenSearchResult(true);
                 }, justifyContent: "start", children: !!watchEnum === false
                     ? ""
@@ -4904,13 +4931,101 @@ const TagPicker = ({ column, schema, prefix }) => {
             }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
 };
 
+const Textarea = React.forwardRef(({ value, defaultValue, placeholder, onChange, onFocus, onBlur, disabled = false, readOnly = false, className, rows = 4, maxLength, autoFocus = false, invalid = false, required = false, label, helperText, errorText, ...props }, ref) => {
+    const contentEditableRef = React.useRef(null);
+    const isControlled = value !== undefined;
+    // Handle input changes
+    const handleInput = (e) => {
+        const text = e.currentTarget.textContent || "";
+        // Check maxLength if specified
+        if (maxLength && text.length > maxLength) {
+            e.currentTarget.textContent = text.slice(0, maxLength);
+            // Move cursor to end
+            const selection = window.getSelection();
+            if (selection) {
+                selection.selectAllChildren(e.currentTarget);
+                selection.collapseToEnd();
+            }
+            return;
+        }
+        onChange?.(text);
+    };
+    // Handle paste events to strip formatting and respect maxLength
+    const handlePaste = (e) => {
+        e.preventDefault();
+        const text = e.clipboardData.getData('text/plain');
+        const currentText = e.currentTarget.textContent || "";
+        let pasteText = text;
+        if (maxLength) {
+            const remainingLength = maxLength - currentText.length;
+            pasteText = text.slice(0, remainingLength);
+        }
+        document.execCommand('insertText', false, pasteText);
+    };
+    // Set initial content
+    React.useEffect(() => {
+        if (contentEditableRef.current && !isControlled) {
+            const initialValue = defaultValue || "";
+            if (contentEditableRef.current.textContent !== initialValue) {
+                contentEditableRef.current.textContent = initialValue;
+            }
+        }
+    }, [defaultValue, isControlled]);
+    // Update content when value changes (controlled mode)
+    React.useEffect(() => {
+        if (contentEditableRef.current && isControlled && value !== undefined) {
+            if (contentEditableRef.current.textContent !== value) {
+                contentEditableRef.current.textContent = value;
+            }
+        }
+    }, [value, isControlled]);
+    // Auto focus
+    React.useEffect(() => {
+        if (autoFocus && contentEditableRef.current) {
+            contentEditableRef.current.focus();
+        }
+    }, [autoFocus]);
+    // Forward ref
+    React.useEffect(() => {
+        if (typeof ref === 'function') {
+            ref(contentEditableRef.current);
+        }
+        else if (ref) {
+            ref.current = contentEditableRef.current;
+        }
+    }, [ref]);
+    const textareaElement = (jsxRuntime.jsx(react.Box, { ref: contentEditableRef, contentEditable: !disabled && !readOnly, onInput: handleInput, onPaste: handlePaste, onFocus: onFocus, onBlur: onBlur, className: className, minHeight: `${rows * 1.5}em`, padding: "2", border: "1px solid", borderColor: invalid ? "red.500" : "gray.200", borderRadius: "md", outline: "none", _focus: {
+            borderColor: invalid ? "red.500" : "blue.500",
+            boxShadow: `0 0 0 1px ${invalid ? "red.500" : "blue.500"}`,
+        }, _disabled: {
+            opacity: 0.6,
+            cursor: "not-allowed",
+            bg: "gray.50",
+        }, _empty: {
+            _before: {
+                content: placeholder ? `"${placeholder}"` : undefined,
+                color: "gray.400",
+                pointerEvents: "none",
+            }
+        }, whiteSpace: "pre-wrap", overflowWrap: "break-word", overflow: "auto", maxHeight: `${rows * 4}em`, suppressContentEditableWarning: true, ...props }));
+    // If we have additional field props, wrap in Field component
+    if (label || helperText || errorText || required) {
+        return (jsxRuntime.jsxs(react.Field.Root, { invalid: invalid, required: required, children: [label && (jsxRuntime.jsxs(react.Field.Label, { children: [label, required && jsxRuntime.jsx(react.Field.RequiredIndicator, {})] })), textareaElement, helperText && jsxRuntime.jsx(react.Field.HelperText, { children: helperText }), errorText && jsxRuntime.jsx(react.Field.ErrorText, { children: errorText })] }));
+    }
+    return textareaElement;
+});
+Textarea.displayName = "Textarea";
+
 const TextAreaInput = ({ column, schema, prefix, }) => {
     const { register, formState: { errors }, } = reactHookForm.useFormContext();
     const { translate } = useSchemaContext();
     const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsxRuntime.jsx(react.Textarea, { ...register(`${colLabel}`, { required: isRequired }), autoComplete: "off" }), errors[colLabel] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
+    const form = reactHookForm.useFormContext();
+    const { setValue, watch } = form;
+    const watchValue = watch(colLabel);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", display: "grid", children: [jsxRuntime.jsx(Textarea, { value: watchValue, onChange: (value) => setValue(colLabel, value) }), errors[colLabel] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
 };
 
 function TimePicker$1({ hour, setHour, minute, setMinute, meridiem, setMeridiem, meridiemLabel = {
@@ -5402,6 +5517,15 @@ const SchemaRenderer = ({ schema, prefix, column, }) => {
         if (variant === "file-picker") {
             return jsxRuntime.jsx(FilePicker, { schema: colSchema, prefix, column });
         }
+        if (variant === "enum-picker") {
+            const { items } = colSchema;
+            const { enum: enumItems } = items;
+            const enumSchema = {
+                type: "string",
+                enum: enumItems,
+            };
+            return (jsxRuntime.jsx(EnumPicker, { isMultiple: true, schema: enumSchema, prefix, column }));
+        }
         if (items) {
             return jsxRuntime.jsx(ArrayRenderer, { schema: colSchema, prefix, column });
         }
@@ -5493,9 +5617,9 @@ const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
                     if (item === undefined) {
                         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "undefined" });
                     }
-                    return (jsxRuntime.jsx(Tag, { children: !!renderDisplay === true
+                    return (jsxRuntime.jsx(Tag, { size: "lg", children: !!renderDisplay === true
                             ? renderDisplay(item)
-                            : customTranslate(item) }));
+                            : customTranslate(item) }, item));
                 }) })), !isMultiple && jsxRuntime.jsx(react.Text, { children: customTranslate(watchEnum) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: customTranslate(`field_required`) }))] }));
 };
 
@@ -5809,6 +5933,15 @@ const SchemaViewer = ({ schema, prefix, column, }) => {
         if (variant === "file-picker") {
             return jsxRuntime.jsx(FileViewer, { schema: colSchema, prefix, column });
         }
+        if (variant === "enum-picker") {
+            const { items } = schema;
+            const { enum: enumItems } = items;
+            const enumSchema = {
+                type: "string",
+                enum: enumItems,
+            };
+            return (jsxRuntime.jsx(EnumViewer, { isMultiple: true, schema: enumSchema, prefix, column }));
+        }
         if (items) {
             return jsxRuntime.jsx(ArrayViewer, { schema: colSchema, prefix, column });
         }
@@ -5836,16 +5969,12 @@ const SubmitButton = () => {
     const methods = reactHookForm.useFormContext();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const onValid = (data) => {
-        // Validate data using AJV before proceeding to confirmation
-        const validate = new Ajv({
-            strict: false,
-            allErrors: true,
-        }).compile(schema);
-        const validationResult = validate(data);
-        // @ts-expect-error TODO: find appropriate type
-        const errors = validationResult.errors;
-        if (errors && errors.length > 0) {
-            setError(errors);
+        const { isValid, errors } = validateData(data, schema);
+        if (!isValid) {
+            setError({
+                type: "validation",
+                errors,
+            });
             setIsError(true);
             return;
         }
@@ -5860,7 +5989,8 @@ const SubmitButton = () => {
 };
 
 const FormBody = () => {
-    const { schema, requestUrl, order, ignore, include, onSubmit, rowNumber, translate, requestOptions, isSuccess, setIsSuccess, isError, setIsError, isSubmiting, setIsSubmiting, isConfirming, setIsConfirming, validatedData, setValidatedData, error, setError, getUpdatedData, customErrorRenderer, } = useSchemaContext();
+    const { schema, requestUrl, order, ignore, include, onSubmit, translate, requestOptions, isSuccess, setIsSuccess, isError, setIsError, isSubmiting, setIsSubmiting, isConfirming, setIsConfirming, validatedData, setValidatedData, error, setError, getUpdatedData, customErrorRenderer, displayConfig, } = useSchemaContext();
+    const { showSubmitButton, showResetButton } = displayConfig;
     const methods = reactHookForm.useFormContext();
     const { properties } = schema;
     const onBeforeSubmit = () => {
@@ -5876,24 +6006,11 @@ const FormBody = () => {
     const onSubmitSuccess = () => {
         setIsSuccess(true);
     };
-    // Enhanced validation function using AJV with i18n support
     const validateFormData = (data) => {
         try {
-            const ajv = new Ajv({
-                strict: false,
-                allErrors: true,
-            });
-            addFormats(ajv);
-            addErrors(ajv);
-            const validate = ajv.compile(schema);
-            const validationResult = validate(data);
-            const errors = validate.errors;
-            console.log({
-                isValid: validationResult,
-                errors,
-            }, "plkdfs");
+            const { isValid, errors } = validateData(data, schema);
             return {
-                isValid: validationResult,
+                isValid,
                 errors,
             };
         }
@@ -5953,10 +6070,7 @@ const FormBody = () => {
     };
     // Custom error renderer for validation errors with i18n support
     const renderValidationErrors = (validationErrors) => {
-        return (jsxRuntime.jsx(AccordionRoot, { backgroundColor: {
-                base: "red.50",
-                _dark: "red.950",
-            }, p: "4", colorPalette: "red", collapsible: true, defaultValue: [], children: jsxRuntime.jsxs(AccordionItem, { value: "validation-errors", children: [jsxRuntime.jsx(AccordionItemTrigger, { children: translate.t("validation_error") }), jsxRuntime.jsx(AccordionItemContent, { display: "flex", flexFlow: "column", gap: "2", children: validationErrors.map((err, index) => (jsxRuntime.jsxs(react.AlertRoot, { status: "error", display: "flex", alignItems: "center", children: [jsxRuntime.jsx(react.AlertIndicator, {}), jsxRuntime.jsx(react.AlertContent, { children: jsxRuntime.jsx(react.AlertDescription, { children: err.message }) })] }))) })] }) }));
+        return (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "2", children: validationErrors.map((err, index) => (jsxRuntime.jsxs(react.Alert.Root, { status: "error", display: "flex", alignItems: "center", children: [jsxRuntime.jsx(react.Alert.Indicator, {}), jsxRuntime.jsx(react.Alert.Content, { children: jsxRuntime.jsx(react.Alert.Description, { children: err.message }) })] }, index))) }));
     };
     const renderColumns = ({ order, keys, ignore, include, }) => {
         const included = include.length > 0 ? include : keys;
@@ -5972,7 +6086,7 @@ const FormBody = () => {
         include,
     });
     if (isSuccess) {
-        return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "2", children: [jsxRuntime.jsxs(react.Alert.Root, { status: "success", children: [jsxRuntime.jsx(react.Alert.Indicator, {}), jsxRuntime.jsx(react.Alert.Title, { children: translate.t("submit_success") })] }), jsxRuntime.jsx(react.Flex, { justifyContent: "end", children: jsxRuntime.jsx(react.Button, { onClick: async () => {
+        return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "2", children: [jsxRuntime.jsxs(react.Alert.Root, { status: "success", children: [jsxRuntime.jsx(react.Alert.Indicator, {}), jsxRuntime.jsx(react.Alert.Content, { children: jsxRuntime.jsx(react.Alert.Title, { children: translate.t("submit_success") }) })] }), jsxRuntime.jsx(react.Flex, { justifyContent: "end", children: jsxRuntime.jsx(react.Button, { onClick: async () => {
                             setIsError(false);
                             setIsSubmiting(false);
                             setIsSuccess(false);
@@ -5994,7 +6108,7 @@ const FormBody = () => {
                             }, variant: "subtle", children: translate.t("cancel") }), jsxRuntime.jsx(react.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: customErrorRenderer ? (customErrorRenderer(error)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: error?.type === "validation" &&
-                            error?.errors ? (renderValidationErrors(error.errors)) : (jsxRuntime.jsx(react.Alert.Root, { status: "error", children: jsxRuntime.jsx(react.Alert.Title, { children: jsxRuntime.jsx(AccordionRoot, { collapsible: true, defaultValue: [], children: jsxRuntime.jsxs(AccordionItem, { value: "b", children: [jsxRuntime.jsxs(AccordionItemTrigger, { children: [jsxRuntime.jsx(react.Alert.Indicator, {}), `${error}`] }), jsxRuntime.jsx(AccordionItemContent, { children: `${JSON.stringify(error)}` })] }) }) }) })) })) }))] }));
+                            error?.errors ? (renderValidationErrors(error.errors)) : (jsxRuntime.jsxs(react.Alert.Root, { status: "error", children: [jsxRuntime.jsx(react.Alert.Indicator, {}), jsxRuntime.jsxs(react.Alert.Content, { children: [jsxRuntime.jsx(react.Alert.Title, { children: "Error" }), jsxRuntime.jsx(react.Alert.Description, { children: jsxRuntime.jsx(AccordionRoot, { collapsible: true, defaultValue: [], children: jsxRuntime.jsxs(AccordionItem, { value: "b", children: [jsxRuntime.jsx(AccordionItemTrigger, { children: `${error}` }), jsxRuntime.jsx(AccordionItemContent, { children: `${JSON.stringify(error)}` })] }) }) })] })] })) })) }))] }));
     }
     return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "2", children: [jsxRuntime.jsx(react.Grid, { gap: "4", gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", children: ordered.map((column) => {
                     return (jsxRuntime.jsx(ColumnRenderer
@@ -6002,10 +6116,10 @@ const FormBody = () => {
                     , { 
                         // @ts-expect-error find suitable types
                         properties: properties, prefix: ``, column }, `form-input-${column}`));
-                }) }), jsxRuntime.jsxs(react.Flex, { justifyContent: "end", gap: "2", children: [jsxRuntime.jsx(react.Button, { onClick: () => {
+                }) }), jsxRuntime.jsxs(react.Flex, { justifyContent: "end", gap: "2", children: [showResetButton && (jsxRuntime.jsx(react.Button, { onClick: () => {
                             methods.reset();
-                        }, variant: "subtle", children: translate.t("reset") }), jsxRuntime.jsx(SubmitButton, {})] }), isError && error?.type === "validation" && (jsxRuntime.jsx(react.Box, { mt: 4, children: error?.errors &&
-                    renderValidationErrors(error.errors) }))] }));
+                        }, variant: "subtle", children: translate.t("reset") })), showSubmitButton && jsxRuntime.jsx(SubmitButton, {})] }), isError && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: customErrorRenderer ? (customErrorRenderer(error)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: error?.type === "validation" &&
+                        error?.errors ? (renderValidationErrors(error.errors)) : (jsxRuntime.jsxs(react.Alert.Root, { status: "error", children: [jsxRuntime.jsx(react.Alert.Indicator, {}), jsxRuntime.jsxs(react.Alert.Content, { children: [jsxRuntime.jsx(react.Alert.Title, { children: "Error" }), jsxRuntime.jsx(react.Alert.Description, { children: jsxRuntime.jsx(AccordionRoot, { collapsible: true, defaultValue: [], children: jsxRuntime.jsxs(AccordionItem, { value: "b", children: [jsxRuntime.jsx(AccordionItemTrigger, { children: `${error}` }), jsxRuntime.jsx(AccordionItemContent, { children: `${JSON.stringify(error)}` })] }) }) })] })] })) })) }))] }));
 };
 
 const FormTitle = () => {
@@ -6013,7 +6127,8 @@ const FormTitle = () => {
     return jsxRuntime.jsx(react.Heading, { children: translate.t("title") });
 };
 
-const DefaultForm = ({ formConfig, showTitle = true, }) => {
+const DefaultForm = ({ formConfig, }) => {
+    const { showTitle } = formConfig.displayConfig ?? {};
     return (jsxRuntime.jsx(FormRoot, { ...formConfig, children: jsxRuntime.jsxs(react.Grid, { gap: "2", children: [showTitle && jsxRuntime.jsx(FormTitle, {}), jsxRuntime.jsx(FormBody, {})] }) }));
 };
 

package/dist/index.mjs

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal, Dialog, Flex, Text, useDisclosure, DialogBackdrop, RadioGroup as RadioGroup$1, Grid, Box, Slider as Slider$1, HStack, For, Tag as Tag$1, Input, Menu, createRecipeContext, createContext as createContext$1, Pagination as Pagination$1, usePaginationContext, CheckboxCard as CheckboxCard$1, Image, EmptyState as EmptyState$2, VStack, Alert, Card, Group, InputElement, Tooltip as Tooltip$1, Icon, List, Table as Table$1, Checkbox as Checkbox$1, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, Accordion, Field as Field$1, Popover, NumberInput, Show, RadioCard, CheckboxGroup, Textarea, Center, AlertRoot, AlertIndicator, AlertContent, AlertDescription, Heading } from '@chakra-ui/react';
+import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal, Dialog, Flex, Text, useDisclosure, DialogBackdrop, RadioGroup as RadioGroup$1, Grid, Box, Slider as Slider$1, HStack, For, Tag as Tag$1, Input, Menu, createRecipeContext, createContext as createContext$1, Pagination as Pagination$1, usePaginationContext, CheckboxCard as CheckboxCard$1, Image, EmptyState as EmptyState$2, VStack, Alert, Card, Group, InputElement, Tooltip as Tooltip$1, Icon, List, Table as Table$1, Checkbox as Checkbox$1, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, Accordion, Field as Field$1, Popover, NumberInput, Show, RadioCard, CheckboxGroup, Center, Heading } 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';
+import React__default, { createContext, useContext, useState, useEffect, useRef, forwardRef } from 'react';
 import { LuX, LuCheck, LuChevronRight, LuChevronDown } from 'react-icons/lu';
 import { MdOutlineSort, MdFilterAlt, MdSearch, MdOutlineViewColumn, MdFilterListAlt, MdPushPin, MdCancel, MdClear, MdOutlineChecklist, MdDateRange } from 'react-icons/md';
 import { FaUpDown, FaGripLinesVertical, FaTrash } from 'react-icons/fa6';
@@ -28,13 +28,13 @@ import { GrAscend, GrDescend } from 'react-icons/gr';
 import { useTranslation } from 'react-i18next';
 import axios from 'axios';
 import { FormProvider, useFormContext, useForm as useForm$1 } from 'react-hook-form';
+import Ajv from 'ajv';
+import addFormats from 'ajv-formats';
+import addErrors from 'ajv-errors';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import { TiDeleteOutline } from 'react-icons/ti';
-import Ajv from 'ajv';
-import addFormats from 'ajv-formats';
-import addErrors from 'ajv-errors';
 
 const DataTableContext = createContext({
     table: {},
@@ -3673,6 +3673,11 @@ const SchemaFormContext = createContext({
     rowNumber: 0,
     requestOptions: {},
     timezone: 'Asia/Hong_Kong',
+    displayConfig: {
+        showSubmitButton: true,
+        showResetButton: true,
+        showTitle: true,
+    },
 });
 
 const useSchemaContext = () => {
@@ -3683,6 +3688,23 @@ const clearEmptyString = (object) => {
     return Object.fromEntries(Object.entries(object).filter(([, value]) => value !== ""));
 };
 
+const validateData = (data, schema) => {
+    const ajv = new Ajv({
+        strict: false,
+        allErrors: true,
+    });
+    addFormats(ajv);
+    addErrors(ajv);
+    const validate = ajv.compile(schema);
+    const validationResult = validate(data);
+    const errors = validate.errors;
+    return {
+        isValid: validationResult,
+        validate,
+        errors,
+    };
+};
+
 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.`);
@@ -3698,7 +3720,11 @@ const idPickerSanityCheck = (column, foreign_key) => {
         throw new Error(`The key column does not exist in properties of column ${column} when using id-picker.`);
     }
 };
-const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, customErrorRenderer, }) => {
+const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, customErrorRenderer, displayConfig = {
+    showSubmitButton: true,
+    showResetButton: true,
+    showTitle: true,
+}, }) => {
     const [isSuccess, setIsSuccess] = useState(false);
     const [isError, setIsError] = useState(false);
     const [isSubmiting, setIsSubmiting] = useState(false);
@@ -3732,6 +3758,7 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
             setError,
             getUpdatedData,
             customErrorRenderer,
+            displayConfig,
         }, children: jsx(FormProvider, { ...form, children: children }) }));
 };
 
@@ -4056,14 +4083,14 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
                         if (!!item === false) {
                             return jsx(Fragment, {});
                         }
-                        return (jsx(Tag, { closable: true, onClick: () => {
+                        return (jsx(Tag, { size: "lg", closable: true, onClick: () => {
                                 setValue(column, watchEnums.filter((id) => id != item));
                             }, children: !!renderDisplay === true
                                 ? renderDisplay(item)
-                                : translate.t(removeIndex(`${colLabel}.${item}`)) }));
-                    }), jsx(Tag, { cursor: "pointer", onClick: () => {
+                                : translate.t(removeIndex(`${colLabel}.${item}`)) }, item));
+                    }), jsx(Tag, { size: "lg", cursor: "pointer", onClick: () => {
                             setOpenSearchResult(true);
-                        }, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsx(Button, { variant: "outline", onClick: () => {
+                        }, children: translate.t(removeIndex(`${colLabel}.add_more`)) }, `${colLabel}-add-more-tag`)] })), !isMultiple && (jsx(Button, { variant: "outline", onClick: () => {
                     setOpenSearchResult(true);
                 }, justifyContent: "start", children: !!watchEnum === false
                     ? ""
@@ -4884,13 +4911,101 @@ const TagPicker = ({ column, schema, prefix }) => {
             }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
 };
 
+const Textarea = forwardRef(({ value, defaultValue, placeholder, onChange, onFocus, onBlur, disabled = false, readOnly = false, className, rows = 4, maxLength, autoFocus = false, invalid = false, required = false, label, helperText, errorText, ...props }, ref) => {
+    const contentEditableRef = useRef(null);
+    const isControlled = value !== undefined;
+    // Handle input changes
+    const handleInput = (e) => {
+        const text = e.currentTarget.textContent || "";
+        // Check maxLength if specified
+        if (maxLength && text.length > maxLength) {
+            e.currentTarget.textContent = text.slice(0, maxLength);
+            // Move cursor to end
+            const selection = window.getSelection();
+            if (selection) {
+                selection.selectAllChildren(e.currentTarget);
+                selection.collapseToEnd();
+            }
+            return;
+        }
+        onChange?.(text);
+    };
+    // Handle paste events to strip formatting and respect maxLength
+    const handlePaste = (e) => {
+        e.preventDefault();
+        const text = e.clipboardData.getData('text/plain');
+        const currentText = e.currentTarget.textContent || "";
+        let pasteText = text;
+        if (maxLength) {
+            const remainingLength = maxLength - currentText.length;
+            pasteText = text.slice(0, remainingLength);
+        }
+        document.execCommand('insertText', false, pasteText);
+    };
+    // Set initial content
+    useEffect(() => {
+        if (contentEditableRef.current && !isControlled) {
+            const initialValue = defaultValue || "";
+            if (contentEditableRef.current.textContent !== initialValue) {
+                contentEditableRef.current.textContent = initialValue;
+            }
+        }
+    }, [defaultValue, isControlled]);
+    // Update content when value changes (controlled mode)
+    useEffect(() => {
+        if (contentEditableRef.current && isControlled && value !== undefined) {
+            if (contentEditableRef.current.textContent !== value) {
+                contentEditableRef.current.textContent = value;
+            }
+        }
+    }, [value, isControlled]);
+    // Auto focus
+    useEffect(() => {
+        if (autoFocus && contentEditableRef.current) {
+            contentEditableRef.current.focus();
+        }
+    }, [autoFocus]);
+    // Forward ref
+    useEffect(() => {
+        if (typeof ref === 'function') {
+            ref(contentEditableRef.current);
+        }
+        else if (ref) {
+            ref.current = contentEditableRef.current;
+        }
+    }, [ref]);
+    const textareaElement = (jsx(Box, { ref: contentEditableRef, contentEditable: !disabled && !readOnly, onInput: handleInput, onPaste: handlePaste, onFocus: onFocus, onBlur: onBlur, className: className, minHeight: `${rows * 1.5}em`, padding: "2", border: "1px solid", borderColor: invalid ? "red.500" : "gray.200", borderRadius: "md", outline: "none", _focus: {
+            borderColor: invalid ? "red.500" : "blue.500",
+            boxShadow: `0 0 0 1px ${invalid ? "red.500" : "blue.500"}`,
+        }, _disabled: {
+            opacity: 0.6,
+            cursor: "not-allowed",
+            bg: "gray.50",
+        }, _empty: {
+            _before: {
+                content: placeholder ? `"${placeholder}"` : undefined,
+                color: "gray.400",
+                pointerEvents: "none",
+            }
+        }, whiteSpace: "pre-wrap", overflowWrap: "break-word", overflow: "auto", maxHeight: `${rows * 4}em`, suppressContentEditableWarning: true, ...props }));
+    // If we have additional field props, wrap in Field component
+    if (label || helperText || errorText || required) {
+        return (jsxs(Field$1.Root, { invalid: invalid, required: required, children: [label && (jsxs(Field$1.Label, { children: [label, required && jsx(Field$1.RequiredIndicator, {})] })), textareaElement, helperText && jsx(Field$1.HelperText, { children: helperText }), errorText && jsx(Field$1.ErrorText, { children: errorText })] }));
+    }
+    return textareaElement;
+});
+Textarea.displayName = "Textarea";
+
 const TextAreaInput = ({ column, schema, prefix, }) => {
     const { register, formState: { errors }, } = useFormContext();
     const { translate } = useSchemaContext();
     const { required, gridColumn = "span 4", gridRow = "span 1" } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
-    return (jsx(Fragment, { children: jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsx(Textarea, { ...register(`${colLabel}`, { required: isRequired }), autoComplete: "off" }), errors[colLabel] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
+    const form = useFormContext();
+    const { setValue, watch } = form;
+    const watchValue = watch(colLabel);
+    return (jsx(Fragment, { children: jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", display: "grid", children: [jsx(Textarea, { value: watchValue, onChange: (value) => setValue(colLabel, value) }), errors[colLabel] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
 };
 
 function TimePicker$1({ hour, setHour, minute, setMinute, meridiem, setMeridiem, meridiemLabel = {
@@ -5382,6 +5497,15 @@ const SchemaRenderer = ({ schema, prefix, column, }) => {
         if (variant === "file-picker") {
             return jsx(FilePicker, { schema: colSchema, prefix, column });
         }
+        if (variant === "enum-picker") {
+            const { items } = colSchema;
+            const { enum: enumItems } = items;
+            const enumSchema = {
+                type: "string",
+                enum: enumItems,
+            };
+            return (jsx(EnumPicker, { isMultiple: true, schema: enumSchema, prefix, column }));
+        }
         if (items) {
             return jsx(ArrayRenderer, { schema: colSchema, prefix, column });
         }
@@ -5473,9 +5597,9 @@ const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
                     if (item === undefined) {
                         return jsx(Fragment, { children: "undefined" });
                     }
-                    return (jsx(Tag, { children: !!renderDisplay === true
+                    return (jsx(Tag, { size: "lg", children: !!renderDisplay === true
                             ? renderDisplay(item)
-                            : customTranslate(item) }));
+                            : customTranslate(item) }, item));
                 }) })), !isMultiple && jsx(Text, { children: customTranslate(watchEnum) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: customTranslate(`field_required`) }))] }));
 };
 
@@ -5789,6 +5913,15 @@ const SchemaViewer = ({ schema, prefix, column, }) => {
         if (variant === "file-picker") {
             return jsx(FileViewer, { schema: colSchema, prefix, column });
         }
+        if (variant === "enum-picker") {
+            const { items } = schema;
+            const { enum: enumItems } = items;
+            const enumSchema = {
+                type: "string",
+                enum: enumItems,
+            };
+            return (jsx(EnumViewer, { isMultiple: true, schema: enumSchema, prefix, column }));
+        }
         if (items) {
             return jsx(ArrayViewer, { schema: colSchema, prefix, column });
         }
@@ -5816,16 +5949,12 @@ const SubmitButton = () => {
     const methods = useFormContext();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const onValid = (data) => {
-        // Validate data using AJV before proceeding to confirmation
-        const validate = new Ajv({
-            strict: false,
-            allErrors: true,
-        }).compile(schema);
-        const validationResult = validate(data);
-        // @ts-expect-error TODO: find appropriate type
-        const errors = validationResult.errors;
-        if (errors && errors.length > 0) {
-            setError(errors);
+        const { isValid, errors } = validateData(data, schema);
+        if (!isValid) {
+            setError({
+                type: "validation",
+                errors,
+            });
             setIsError(true);
             return;
         }
@@ -5840,7 +5969,8 @@ const SubmitButton = () => {
 };
 
 const FormBody = () => {
-    const { schema, requestUrl, order, ignore, include, onSubmit, rowNumber, translate, requestOptions, isSuccess, setIsSuccess, isError, setIsError, isSubmiting, setIsSubmiting, isConfirming, setIsConfirming, validatedData, setValidatedData, error, setError, getUpdatedData, customErrorRenderer, } = useSchemaContext();
+    const { schema, requestUrl, order, ignore, include, onSubmit, translate, requestOptions, isSuccess, setIsSuccess, isError, setIsError, isSubmiting, setIsSubmiting, isConfirming, setIsConfirming, validatedData, setValidatedData, error, setError, getUpdatedData, customErrorRenderer, displayConfig, } = useSchemaContext();
+    const { showSubmitButton, showResetButton } = displayConfig;
     const methods = useFormContext();
     const { properties } = schema;
     const onBeforeSubmit = () => {
@@ -5856,24 +5986,11 @@ const FormBody = () => {
     const onSubmitSuccess = () => {
         setIsSuccess(true);
     };
-    // Enhanced validation function using AJV with i18n support
     const validateFormData = (data) => {
         try {
-            const ajv = new Ajv({
-                strict: false,
-                allErrors: true,
-            });
-            addFormats(ajv);
-            addErrors(ajv);
-            const validate = ajv.compile(schema);
-            const validationResult = validate(data);
-            const errors = validate.errors;
-            console.log({
-                isValid: validationResult,
-                errors,
-            }, "plkdfs");
+            const { isValid, errors } = validateData(data, schema);
             return {
-                isValid: validationResult,
+                isValid,
                 errors,
             };
         }
@@ -5933,10 +6050,7 @@ const FormBody = () => {
     };
     // Custom error renderer for validation errors with i18n support
     const renderValidationErrors = (validationErrors) => {
-        return (jsx(AccordionRoot, { backgroundColor: {
-                base: "red.50",
-                _dark: "red.950",
-            }, p: "4", colorPalette: "red", collapsible: true, defaultValue: [], children: jsxs(AccordionItem, { value: "validation-errors", children: [jsx(AccordionItemTrigger, { children: translate.t("validation_error") }), jsx(AccordionItemContent, { display: "flex", flexFlow: "column", gap: "2", children: validationErrors.map((err, index) => (jsxs(AlertRoot, { status: "error", display: "flex", alignItems: "center", children: [jsx(AlertIndicator, {}), jsx(AlertContent, { children: jsx(AlertDescription, { children: err.message }) })] }))) })] }) }));
+        return (jsx(Flex, { flexFlow: "column", gap: "2", children: validationErrors.map((err, index) => (jsxs(Alert.Root, { status: "error", display: "flex", alignItems: "center", children: [jsx(Alert.Indicator, {}), jsx(Alert.Content, { children: jsx(Alert.Description, { children: err.message }) })] }, index))) }));
     };
     const renderColumns = ({ order, keys, ignore, include, }) => {
         const included = include.length > 0 ? include : keys;
@@ -5952,7 +6066,7 @@ const FormBody = () => {
         include,
     });
     if (isSuccess) {
-        return (jsxs(Flex, { flexFlow: "column", gap: "2", children: [jsxs(Alert.Root, { status: "success", children: [jsx(Alert.Indicator, {}), jsx(Alert.Title, { children: translate.t("submit_success") })] }), jsx(Flex, { justifyContent: "end", children: jsx(Button$1, { onClick: async () => {
+        return (jsxs(Flex, { flexFlow: "column", gap: "2", children: [jsxs(Alert.Root, { status: "success", children: [jsx(Alert.Indicator, {}), jsx(Alert.Content, { children: jsx(Alert.Title, { children: translate.t("submit_success") }) })] }), jsx(Flex, { justifyContent: "end", children: jsx(Button$1, { onClick: async () => {
                             setIsError(false);
                             setIsSubmiting(false);
                             setIsSuccess(false);
@@ -5974,7 +6088,7 @@ const FormBody = () => {
                             }, variant: "subtle", children: translate.t("cancel") }), jsx(Button$1, { 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: customErrorRenderer ? (customErrorRenderer(error)) : (jsx(Fragment, { children: error?.type === "validation" &&
-                            error?.errors ? (renderValidationErrors(error.errors)) : (jsx(Alert.Root, { status: "error", children: jsx(Alert.Title, { children: jsx(AccordionRoot, { collapsible: true, defaultValue: [], children: jsxs(AccordionItem, { value: "b", children: [jsxs(AccordionItemTrigger, { children: [jsx(Alert.Indicator, {}), `${error}`] }), jsx(AccordionItemContent, { children: `${JSON.stringify(error)}` })] }) }) }) })) })) }))] }));
+                            error?.errors ? (renderValidationErrors(error.errors)) : (jsxs(Alert.Root, { status: "error", children: [jsx(Alert.Indicator, {}), jsxs(Alert.Content, { children: [jsx(Alert.Title, { children: "Error" }), jsx(Alert.Description, { children: jsx(AccordionRoot, { collapsible: true, defaultValue: [], children: jsxs(AccordionItem, { value: "b", children: [jsx(AccordionItemTrigger, { children: `${error}` }), jsx(AccordionItemContent, { children: `${JSON.stringify(error)}` })] }) }) })] })] })) })) }))] }));
     }
     return (jsxs(Flex, { flexFlow: "column", gap: "2", children: [jsx(Grid, { gap: "4", gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", children: ordered.map((column) => {
                     return (jsx(ColumnRenderer
@@ -5982,10 +6096,10 @@ const FormBody = () => {
                     , { 
                         // @ts-expect-error find suitable types
                         properties: properties, prefix: ``, column }, `form-input-${column}`));
-                }) }), jsxs(Flex, { justifyContent: "end", gap: "2", children: [jsx(Button$1, { onClick: () => {
+                }) }), jsxs(Flex, { justifyContent: "end", gap: "2", children: [showResetButton && (jsx(Button$1, { onClick: () => {
                             methods.reset();
-                        }, variant: "subtle", children: translate.t("reset") }), jsx(SubmitButton, {})] }), isError && error?.type === "validation" && (jsx(Box, { mt: 4, children: error?.errors &&
-                    renderValidationErrors(error.errors) }))] }));
+                        }, variant: "subtle", children: translate.t("reset") })), showSubmitButton && jsx(SubmitButton, {})] }), isError && (jsx(Fragment, { children: customErrorRenderer ? (customErrorRenderer(error)) : (jsx(Fragment, { children: error?.type === "validation" &&
+                        error?.errors ? (renderValidationErrors(error.errors)) : (jsxs(Alert.Root, { status: "error", children: [jsx(Alert.Indicator, {}), jsxs(Alert.Content, { children: [jsx(Alert.Title, { children: "Error" }), jsx(Alert.Description, { children: jsx(AccordionRoot, { collapsible: true, defaultValue: [], children: jsxs(AccordionItem, { value: "b", children: [jsx(AccordionItemTrigger, { children: `${error}` }), jsx(AccordionItemContent, { children: `${JSON.stringify(error)}` })] }) }) })] })] })) })) }))] }));
 };
 
 const FormTitle = () => {
@@ -5993,7 +6107,8 @@ const FormTitle = () => {
     return jsx(Heading, { children: translate.t("title") });
 };
 
-const DefaultForm = ({ formConfig, showTitle = true, }) => {
+const DefaultForm = ({ formConfig, }) => {
+    const { showTitle } = formConfig.displayConfig ?? {};
     return (jsx(FormRoot, { ...formConfig, children: jsxs(Grid, { gap: "2", children: [showTitle && jsx(FormTitle, {}), jsx(FormBody, {})] }) }));
 };
 

package/dist/types/components/DataTable/DataTableServer.d.ts

@@ -5,7 +5,7 @@ import { DensityState } from "./controls/DensityFeature";
 import { DataTableLabel } from "./context/DataTableContext";
 import { DataResponse } from "./useDataTableServer";
 import { UseTranslationResponse } from "react-i18next";
-export interface DataTableServerProps<TData extends DataResponse = DataResponse<unknown>> {
+export interface DataTableServerProps<TData = unknown> {
     children: ReactNode | ReactNode[];
     /**
      * Column definitions for the table.
@@ -34,10 +34,10 @@ export interface DataTableServerProps<TData extends DataResponse = DataResponse<
     setColumnOrder: OnChangeFn<ColumnOrderState>;
     setDensity: OnChangeFn<DensityState>;
     setColumnVisibility: OnChangeFn<VisibilityState>;
-    query: UseQueryResult<TData>;
+    query: UseQueryResult<DataResponse<TData>>;
     url: string;
     translate: UseTranslationResponse<any, any>;
-    tableLabel: DataTableLabel;
+    tableLabel?: DataTableLabel;
 }
 /**
  * DataTableServer will create a context to hold all values to
@@ -50,4 +50,4 @@ export interface DataTableServerProps<TData extends DataResponse = DataResponse<
  *
  * @link https://tanstack.com/table/latest/docs/guide/column-defs
  */
-export declare function DataTableServer<TData extends DataResponse = DataResponse<unknown>>({ columns, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, query, url, translate, children, tableLabel, }: DataTableServerProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableServer<TData = unknown>({ columns, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, query, url, translate, children, tableLabel, }: DataTableServerProps<TData>): import("react/jsx-runtime").JSX.Element;

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

@@ -31,5 +31,10 @@ export interface SchemaFormContext<TData extends FieldValues> {
     getUpdatedData: () => TData | Promise<TData>;
     customErrorRenderer?: (error: unknown) => ReactNode;
     timezone?: string;
+    displayConfig: {
+        showSubmitButton?: boolean;
+        showResetButton?: boolean;
+        showTitle?: boolean;
+    };
 }
 export declare const SchemaFormContext: import("react").Context<SchemaFormContext<unknown>>;

package/dist/types/components/Form/components/core/DefaultForm.d.ts

@@ -4,4 +4,4 @@ export interface DefaultFormProps<TData extends FieldValues> {
     formConfig: Omit<FormRootProps<TData>, "children">;
     showTitle?: boolean;
 }
-export declare const DefaultForm: <TData extends FieldValues>({ formConfig, showTitle, }: DefaultFormProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const DefaultForm: <TData extends FieldValues>({ formConfig, }: DefaultFormProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/components/core/FormRoot.d.ts

@@ -22,6 +22,11 @@ export interface FormRootProps<TData extends FieldValues> {
     requestOptions?: AxiosRequestConfig;
     getUpdatedData?: () => TData | Promise<TData> | void;
     customErrorRenderer?: (error: unknown) => ReactNode;
+    displayConfig?: {
+        showSubmitButton?: boolean;
+        showResetButton?: boolean;
+        showTitle?: boolean;
+    };
 }
 export interface CustomJSONSchema7Definition extends JSONSchema7 {
     variant: string;
@@ -38,4 +43,4 @@ export declare const idPickerSanityCheck: (column: string, foreign_key?: {
     column?: string | undefined;
     display_column?: string | undefined;
 } | undefined) => void;
-export declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, }: FormRootProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, displayConfig, }: FormRootProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/utils/validateData.d.ts

@@ -0,0 +1,9 @@
+import { ErrorObject, ValidateFunction } from "ajv";
+import { JSONSchema7 } from "json-schema";
+type ValidateDataResult = {
+    isValid: boolean;
+    validate: ValidateFunction;
+    errors: ErrorObject<string, Record<string, any>, unknown>[] | null | undefined;
+};
+export declare const validateData: (data: unknown, schema: JSONSchema7) => ValidateDataResult;
+export {};

package/dist/types/components/TextArea/TextArea.d.ts

@@ -0,0 +1,22 @@
+import type React from "react";
+interface CustomTextareaProps {
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    onChange?: (value: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    className?: string;
+    rows?: number;
+    maxLength?: number;
+    autoFocus?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+}
+declare const Textarea: React.ForwardRefExoticComponent<CustomTextareaProps & React.RefAttributes<HTMLDivElement>>;
+export { Textarea };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "12.0.0-beta.62",
+  "version": "12.0.0-beta.64",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -75,8 +75,8 @@
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
     "ajv": "^8.12.0",
-    "ajv-formats": "^3.0.1",
     "ajv-errors": "^3.0.0",
+    "ajv-formats": "^3.0.1",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",