@bsol-oss/react-datatable5 12.0.0-beta.72 → 12.0.0-beta.74

package/dist/index.mjs

@@ -3671,16 +3671,14 @@ const SchemaFormContext = createContext({
         showResetButton: true,
         showTitle: true,
     },
+    requireConfirmation: false,
+    onFormSubmit: async () => { },
 });
 
 const useSchemaContext = () => {
     return useContext(SchemaFormContext);
 };
 
-const clearEmptyString = (object) => {
-    return Object.fromEntries(Object.entries(object).filter(([, value]) => value !== ""));
-};
-
 const validateData = (data, schema) => {
     const ajv = new Ajv({
         strict: false,
@@ -3699,6 +3697,10 @@ const validateData = (data, schema) => {
     };
 };
 
+const clearEmptyString = (object) => {
+    return Object.fromEntries(Object.entries(object).filter(([, value]) => value !== ""));
+};
+
 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,13 +3720,88 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
     showSubmitButton: true,
     showResetButton: true,
     showTitle: true,
-}, dateTimePickerLabels, idPickerLabels, }) => {
+}, requireConfirmation = false, dateTimePickerLabels, idPickerLabels, enumPickerLabels, }) => {
     const [isSuccess, setIsSuccess] = useState(false);
     const [isError, setIsError] = useState(false);
     const [isSubmiting, setIsSubmiting] = useState(false);
     const [isConfirming, setIsConfirming] = useState(false);
     const [validatedData, setValidatedData] = useState();
     const [error, setError] = useState();
+    const onBeforeSubmit = () => {
+        setIsSubmiting(true);
+    };
+    const onAfterSubmit = () => {
+        setIsSubmiting(false);
+    };
+    const onSubmitError = (error) => {
+        setIsError(true);
+        setError(error);
+    };
+    const onSubmitSuccess = () => {
+        setIsSuccess(true);
+    };
+    const validateFormData = (data) => {
+        try {
+            const { isValid, errors } = validateData(data, schema);
+            return {
+                isValid,
+                errors,
+            };
+        }
+        catch (error) {
+            return {
+                isValid: false,
+                errors: [
+                    {
+                        field: 'validation',
+                        message: error instanceof Error ? error.message : 'Unknown error',
+                    },
+                ],
+            };
+        }
+    };
+    const defaultOnSubmit = async (promise) => {
+        try {
+            onBeforeSubmit();
+            await promise;
+            onSubmitSuccess();
+        }
+        catch (error) {
+            onSubmitError(error);
+        }
+        finally {
+            onAfterSubmit();
+        }
+    };
+    const defaultSubmitPromise = (data) => {
+        const options = {
+            method: 'POST',
+            url: `${requestUrl}`,
+            data: clearEmptyString(data),
+            ...requestOptions,
+        };
+        return axios.request(options);
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const onFormSubmit = async (data) => {
+        // Validate data using AJV before submission
+        const validationResult = validateFormData(data);
+        if (!validationResult.isValid) {
+            // Set validation errors
+            const validationErrorMessage = {
+                type: 'validation',
+                errors: validationResult.errors,
+                message: translate.t('validation_error'),
+            };
+            onSubmitError(validationErrorMessage);
+            return;
+        }
+        if (onSubmit === undefined) {
+            await defaultOnSubmit(defaultSubmitPromise(data));
+            return;
+        }
+        await defaultOnSubmit(onSubmit(data));
+    };
     return (jsx(SchemaFormContext.Provider, { value: {
             schema,
             serverUrl,
@@ -3754,8 +3831,11 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
             customErrorRenderer,
             customSuccessRenderer,
             displayConfig,
+            requireConfirmation,
+            onFormSubmit,
             dateTimePickerLabels,
             idPickerLabels,
+            enumPickerLabels,
         }, children: jsx(FormProvider, { ...form, children: children }) }));
 };
 
@@ -4014,14 +4094,16 @@ dayjs.extend(utc);
 dayjs.extend(timezone);
 const DatePicker = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
-    const { timezone } = useSchemaContext();
+    const { timezone, dateTimePickerLabels } = useSchemaContext();
     const formI18n = useFormI18n(column, prefix);
-    const { required, gridColumn = "span 12", gridRow = "span 1", displayDateFormat = "YYYY-MM-DD", dateFormat = "YYYY-MM-DD", } = schema;
+    const { required, gridColumn = 'span 12', gridRow = 'span 1', displayDateFormat = 'YYYY-MM-DD', dateFormat = 'YYYY-MM-DD', } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = formI18n.colLabel;
     const [open, setOpen] = useState(false);
     const selectedDate = watch(colLabel);
-    const displayDate = dayjs(selectedDate).tz(timezone).format(displayDateFormat);
+    const displayDate = dayjs(selectedDate)
+        .tz(timezone)
+        .format(displayDateFormat);
     useEffect(() => {
         try {
             if (selectedDate) {
@@ -4045,45 +4127,83 @@ const DatePicker = ({ column, schema, prefix }) => {
             console.error(e);
         }
     }, [selectedDate, dateFormat, colLabel, setValue]);
-    return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: "stretch", gridColumn,
+    return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
         gridRow, children: [jsxs(PopoverRoot, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsx(PopoverTrigger, { asChild: true, children: jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
                                 setOpen(true);
-                            }, justifyContent: "start", children: [jsx(MdDateRange, {}), selectedDate !== undefined ? `${displayDate}` : ""] }) }), jsx(PopoverContent, { children: jsxs(PopoverBody, { children: [jsx(PopoverTitle, {}), jsx(DatePicker$1, { selected: new Date(selectedDate), onDateSelected: ({ date }) => {
+                            }, justifyContent: 'start', children: [jsx(MdDateRange, {}), selectedDate !== undefined ? `${displayDate}` : ''] }) }), jsx(PopoverContent, { children: jsxs(PopoverBody, { children: [jsx(PopoverTitle, {}), jsx(DatePicker$1, { selected: new Date(selectedDate), onDateSelected: ({ date }) => {
                                         setValue(colLabel, dayjs(date).format(dateFormat));
                                         setOpen(false);
                                     }, labels: {
-                                        monthNamesShort: [
-                                            formI18n.translate.t(`common.month_1`, { defaultValue: "January" }),
-                                            formI18n.translate.t(`common.month_2`, { defaultValue: "February" }),
-                                            formI18n.translate.t(`common.month_3`, { defaultValue: "March" }),
-                                            formI18n.translate.t(`common.month_4`, { defaultValue: "April" }),
-                                            formI18n.translate.t(`common.month_5`, { defaultValue: "May" }),
-                                            formI18n.translate.t(`common.month_6`, { defaultValue: "June" }),
-                                            formI18n.translate.t(`common.month_7`, { defaultValue: "July" }),
-                                            formI18n.translate.t(`common.month_8`, { defaultValue: "August" }),
-                                            formI18n.translate.t(`common.month_9`, { defaultValue: "September" }),
-                                            formI18n.translate.t(`common.month_10`, { defaultValue: "October" }),
-                                            formI18n.translate.t(`common.month_11`, { defaultValue: "November" }),
-                                            formI18n.translate.t(`common.month_12`, { defaultValue: "December" }),
+                                        monthNamesShort: dateTimePickerLabels?.monthNamesShort ?? [
+                                            formI18n.translate.t(`common.month_1`, {
+                                                defaultValue: 'January',
+                                            }),
+                                            formI18n.translate.t(`common.month_2`, {
+                                                defaultValue: 'February',
+                                            }),
+                                            formI18n.translate.t(`common.month_3`, {
+                                                defaultValue: 'March',
+                                            }),
+                                            formI18n.translate.t(`common.month_4`, {
+                                                defaultValue: 'April',
+                                            }),
+                                            formI18n.translate.t(`common.month_5`, {
+                                                defaultValue: 'May',
+                                            }),
+                                            formI18n.translate.t(`common.month_6`, {
+                                                defaultValue: 'June',
+                                            }),
+                                            formI18n.translate.t(`common.month_7`, {
+                                                defaultValue: 'July',
+                                            }),
+                                            formI18n.translate.t(`common.month_8`, {
+                                                defaultValue: 'August',
+                                            }),
+                                            formI18n.translate.t(`common.month_9`, {
+                                                defaultValue: 'September',
+                                            }),
+                                            formI18n.translate.t(`common.month_10`, {
+                                                defaultValue: 'October',
+                                            }),
+                                            formI18n.translate.t(`common.month_11`, {
+                                                defaultValue: 'November',
+                                            }),
+                                            formI18n.translate.t(`common.month_12`, {
+                                                defaultValue: 'December',
+                                            }),
                                         ],
-                                        weekdayNamesShort: [
-                                            formI18n.translate.t(`common.weekday_1`, { defaultValue: "Sun" }),
-                                            formI18n.translate.t(`common.weekday_2`, { defaultValue: "Mon" }),
-                                            formI18n.translate.t(`common.weekday_3`, { defaultValue: "Tue" }),
+                                        weekdayNamesShort: dateTimePickerLabels?.weekdayNamesShort ?? [
+                                            formI18n.translate.t(`common.weekday_1`, {
+                                                defaultValue: 'Sun',
+                                            }),
+                                            formI18n.translate.t(`common.weekday_2`, {
+                                                defaultValue: 'Mon',
+                                            }),
+                                            formI18n.translate.t(`common.weekday_3`, {
+                                                defaultValue: 'Tue',
+                                            }),
                                             formI18n.translate.t(`common.weekday_4`, {
-                                                defaultValue: "Wed",
+                                                defaultValue: 'Wed',
+                                            }),
+                                            formI18n.translate.t(`common.weekday_5`, {
+                                                defaultValue: 'Thu',
+                                            }),
+                                            formI18n.translate.t(`common.weekday_6`, {
+                                                defaultValue: 'Fri',
+                                            }),
+                                            formI18n.translate.t(`common.weekday_7`, {
+                                                defaultValue: 'Sat',
                                             }),
-                                            formI18n.translate.t(`common.weekday_5`, { defaultValue: "Thu" }),
-                                            formI18n.translate.t(`common.weekday_6`, { defaultValue: "Fri" }),
-                                            formI18n.translate.t(`common.weekday_7`, { defaultValue: "Sat" }),
                                         ],
-                                        backButtonLabel: formI18n.translate.t(`common.back_button`, {
-                                            defaultValue: "Back",
-                                        }),
-                                        forwardButtonLabel: formI18n.translate.t(`common.forward_button`, {
-                                            defaultValue: "Forward",
-                                        }),
-                                    } })] }) })] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: formI18n.required() }))] }));
+                                        backButtonLabel: dateTimePickerLabels?.backButtonLabel ??
+                                            formI18n.translate.t(`common.back_button`, {
+                                                defaultValue: 'Back',
+                                            }),
+                                        forwardButtonLabel: dateTimePickerLabels?.forwardButtonLabel ??
+                                            formI18n.translate.t(`common.forward_button`, {
+                                                defaultValue: 'Forward',
+                                            }),
+                                    } })] }) })] }), errors[`${column}`] && (jsx(Text, { color: 'red.400', children: formI18n.required() }))] }));
 };
 
 function filterArray(array, searchTerm) {
@@ -4098,10 +4218,10 @@ function filterArray(array, searchTerm) {
 
 const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLimit = false, }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
-    const { translate } = useSchemaContext();
+    const { translate, enumPickerLabels } = useSchemaContext();
     const { required, variant } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
-    const { gridColumn = "span 12", gridRow = "span 1", renderDisplay } = schema;
+    const { gridColumn = 'span 12', gridRow = 'span 1', renderDisplay } = schema;
     const [searchText, setSearchText] = useState();
     const [limit, setLimit] = useState(10);
     const [openSearchResult, setOpenSearchResult] = useState();
@@ -4116,9 +4236,9 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
         setSearchText(event.target.value);
         setLimit(10);
     };
-    if (variant === "radio") {
-        return (jsx(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
-            gridRow, children: jsx(RadioGroup$1.Root, { defaultValue: "1", children: jsx(HStack, { gap: "6", children: filterArray(dataList, searchText ?? "").map((item) => {
+    if (variant === 'radio') {
+        return (jsx(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: 'stretch', gridColumn,
+            gridRow, children: jsx(RadioGroup$1.Root, { defaultValue: "1", children: jsx(HStack, { gap: "6", children: filterArray(dataList, searchText ?? '').map((item) => {
                         return (jsxs(RadioGroup$1.Item, { onClick: () => {
                                 if (!isMultiple) {
                                     setOpenSearchResult(false);
@@ -4132,8 +4252,8 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
                                         : translate.t(removeIndex(`${colLabel}.${item}`)) })] }, `${colLabel}-${item}`));
                     }) }) }) }));
     }
-    return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [isMultiple && (jsxs(Flex, { flexFlow: "wrap", gap: 1, children: [watchEnums.map((enumValue) => {
+    return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, children: [isMultiple && (jsxs(Flex, { flexFlow: 'wrap', gap: 1, children: [watchEnums.map((enumValue) => {
                         const item = enumValue;
                         if (!!item === false) {
                             return jsx(Fragment, {});
@@ -4143,18 +4263,20 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
                             }, children: !!renderDisplay === true
                                 ? renderDisplay(item)
                                 : translate.t(removeIndex(`${colLabel}.${item}`)) }, item));
-                    }), jsx(Tag, { size: "lg", cursor: "pointer", onClick: () => {
+                    }), jsx(Tag, { size: "lg", cursor: 'pointer', onClick: () => {
                             setOpenSearchResult(true);
-                        }, children: translate.t(removeIndex(`${colLabel}.add_more`)) }, `${colLabel}-add-more-tag`)] })), !isMultiple && (jsx(Button, { variant: "outline", onClick: () => {
+                        }, children: enumPickerLabels?.addMore ??
+                            translate.t(removeIndex(`${colLabel}.add_more`)) }, `${colLabel}-add-more-tag`)] })), !isMultiple && (jsx(Button, { variant: 'outline', onClick: () => {
                     setOpenSearchResult(true);
-                }, justifyContent: "start", children: !!watchEnum === false
-                    ? ""
-                    : translate.t(removeIndex(`${colLabel}.${watchEnum ?? "null"}`)) })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { portalled: false, children: jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsx(Input, { placeholder: translate.t(`${colLabel}.type_to_search`), onChange: (event) => {
+                }, justifyContent: 'start', children: !!watchEnum === false
+                    ? ''
+                    : translate.t(removeIndex(`${colLabel}.${watchEnum ?? 'null'}`)) })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: 'bottom-start' }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { portalled: false, children: jsxs(PopoverBody, { display: 'grid', gap: 1, children: [jsx(Input, { placeholder: enumPickerLabels?.typeToSearch ??
+                                        translate.t(`${colLabel}.type_to_search`), onChange: (event) => {
                                         onSearchChange(event);
                                         setOpenSearchResult(true);
-                                    }, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}), showTotalAndLimit && (jsx(Text, { children: `${translate.t(removeIndex(`${colLabel}.total`))}: ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit}` })), jsxs(Grid, { overflow: "auto", maxHeight: "20rem", children: [jsx(Flex, { flexFlow: "column wrap", children: dataList
+                                    }, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}), showTotalAndLimit && (jsx(Text, { children: `${enumPickerLabels?.total ?? translate.t(removeIndex(`${colLabel}.total`))}: ${count}, ${enumPickerLabels?.showing ?? translate.t(removeIndex(`${colLabel}.showing`))} ${limit}` })), jsxs(Grid, { overflow: 'auto', maxHeight: '20rem', children: [jsx(Flex, { flexFlow: 'column wrap', children: dataList
                                                 .filter((item) => {
-                                                const searchTerm = (searchText || "").toLowerCase();
+                                                const searchTerm = (searchText || '').toLowerCase();
                                                 if (!searchTerm)
                                                     return true;
                                                 // Check if the original enum value contains the search text
@@ -4174,7 +4296,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
                                                 const selected = isMultiple
                                                     ? watchEnums.some((enumValue) => item === enumValue)
                                                     : watchEnum == item;
-                                                return (jsx(Box, { cursor: "pointer", onClick: () => {
+                                                return (jsx(Box, { cursor: 'pointer', onClick: () => {
                                                         if (!isMultiple) {
                                                             setOpenSearchResult(false);
                                                             setValue(colLabel, item);
@@ -4182,10 +4304,11 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
                                                         }
                                                         const newSet = new Set([...(watchEnums ?? []), item]);
                                                         setValue(colLabel, [...newSet]);
-                                                    }, ...(selected ? { color: "colorPalette.400/50" } : {}), children: !!renderDisplay === true
+                                                    }, ...(selected ? { color: 'colorPalette.400/50' } : {}), children: !!renderDisplay === true
                                                         ? renderDisplay(item)
                                                         : translate.t(removeIndex(`${colLabel}.${item}`)) }, `${colLabel}-${item}`));
-                                            }) }), isDirty && (jsx(Fragment, { children: dataList.length <= 0 && (jsx(Fragment, { children: translate.t(removeIndex(`${colLabel}.empty_search_result`)) })) }))] })] }) })] }), errors[`${colLabel}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
+                                            }) }), isDirty && (jsx(Fragment, { children: dataList.length <= 0 && (jsx(Fragment, { children: enumPickerLabels?.emptySearchResult ??
+                                                    translate.t(removeIndex(`${colLabel}.empty_search_result`)) })) }))] })] }) })] }), errors[`${colLabel}`] && (jsx(Text, { color: 'red.400', children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
 };
 
 function isEnteringWindow(_ref) {
@@ -4810,13 +4933,13 @@ NumberInput.Label;
 const NumberInputField = ({ schema, column, prefix, }) => {
     const { setValue, formState: { errors }, watch, } = useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn = "span 12", gridRow = "span 1" } = schema;
+    const { required, gridColumn = 'span 12', gridRow = 'span 1' } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const value = watch(`${colLabel}`);
-    return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn, gridRow, children: [jsx(NumberInputRoot, { children: jsx(NumberInputField$1, { required: isRequired, value: value, onChange: (event) => {
-                        setValue(`${colLabel}`, Number(event.target.value));
-                    } }) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
+    return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn, gridRow, children: [jsx(NumberInputRoot, { value: value, onValueChange: (details) => {
+                    setValue(`${colLabel}`, details.value); // Store as string to avoid floating-point precision issues
+                }, min: schema.minimum, max: schema.maximum, step: schema.multipleOf || 0.01, allowOverflow: false, clampValueOnBlur: false, inputMode: "decimal", formatOptions: schema.formatOptions, children: jsx(NumberInputField$1, { required: isRequired }) }), errors[`${column}`] && (jsx(Text, { color: 'red.400', children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
 };
 
 const ObjectInput = ({ schema, column, prefix }) => {
@@ -5758,11 +5881,29 @@ const IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
 const NumberViewer = ({ schema, column, prefix, }) => {
     const { watch, formState: { errors }, } = useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn = "span 12", gridRow = "span 1" } = schema;
+    const { required, gridColumn = 'span 12', gridRow = 'span 1' } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const value = watch(colLabel);
-    return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn, gridRow, children: [jsx(Text, { children: value }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
+    // Format the value for display if formatOptions are provided
+    const formatValue = (val) => {
+        if (val === undefined || val === null || val === '')
+            return '';
+        const numValue = typeof val === 'string' ? parseFloat(val) : val;
+        if (isNaN(numValue))
+            return String(val);
+        // Use formatOptions if available, otherwise display as-is
+        if (schema.formatOptions) {
+            try {
+                return new Intl.NumberFormat(undefined, schema.formatOptions).format(numValue);
+            }
+            catch {
+                return String(val);
+            }
+        }
+        return String(val);
+    };
+    return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn, gridRow, children: [jsx(Text, { children: formatValue(value) }), errors[`${column}`] && (jsx(Text, { color: 'red.400', children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
 };
 
 const ObjectViewer = ({ schema, column, prefix }) => {
@@ -6054,112 +6195,46 @@ const ColumnViewer = ({ column, properties, prefix, }) => {
 };
 
 const SubmitButton = () => {
-    const { translate, setValidatedData, setIsError, setIsConfirming, setError, schema, } = useSchemaContext();
+    const { translate, setValidatedData, setIsError, setIsConfirming, setError, schema, requireConfirmation, onFormSubmit, } = useSchemaContext();
     const methods = useFormContext();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const onValid = (data) => {
         const { isValid, errors } = validateData(data, schema);
         if (!isValid) {
             setError({
-                type: "validation",
+                type: 'validation',
                 errors,
             });
             setIsError(true);
             return;
         }
-        // If validation passes, proceed to confirmation
-        setValidatedData(data);
-        setIsError(false);
-        setIsConfirming(true);
+        // If validation passes, check if confirmation is required
+        if (requireConfirmation) {
+            // Show confirmation (existing behavior)
+            setValidatedData(data);
+            setIsError(false);
+            setIsConfirming(true);
+        }
+        else {
+            // Skip confirmation and submit directly
+            setValidatedData(data);
+            setIsError(false);
+            onFormSubmit(data);
+        }
     };
     return (jsx(Button$1, { onClick: () => {
             methods.handleSubmit(onValid)();
-        }, formNoValidate: true, children: translate.t("submit") }));
+        }, formNoValidate: true, children: translate.t('submit') }));
 };
 
 const FormBody = () => {
-    const { schema, requestUrl, order, ignore, include, onSubmit, translate, requestOptions, isSuccess, setIsSuccess, isError, setIsError, isSubmiting, setIsSubmiting, isConfirming, setIsConfirming, validatedData, setValidatedData, error, setError, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, } = useSchemaContext();
+    const { schema, order, ignore, include, translate, isSuccess, setIsSuccess, isError, setIsError, isSubmiting, setIsSubmiting, isConfirming, setIsConfirming, validatedData, setValidatedData, error, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, onFormSubmit, } = useSchemaContext();
     const { showSubmitButton, showResetButton } = displayConfig;
     const methods = useFormContext();
     const { properties } = schema;
-    const onBeforeSubmit = () => {
-        setIsSubmiting(true);
-    };
-    const onAfterSubmit = () => {
-        setIsSubmiting(false);
-    };
-    const onSubmitError = (error) => {
-        setIsError(true);
-        setError(error);
-    };
-    const onSubmitSuccess = () => {
-        setIsSuccess(true);
-    };
-    const validateFormData = (data) => {
-        try {
-            const { isValid, errors } = validateData(data, schema);
-            return {
-                isValid,
-                errors,
-            };
-        }
-        catch (error) {
-            return {
-                isValid: false,
-                errors: [
-                    {
-                        field: "validation",
-                        message: error instanceof Error ? error.message : "Unknown error",
-                    },
-                ],
-            };
-        }
-    };
-    const defaultOnSubmit = async (promise) => {
-        try {
-            onBeforeSubmit();
-            await promise;
-            onSubmitSuccess();
-        }
-        catch (error) {
-            onSubmitError(error);
-        }
-        finally {
-            onAfterSubmit();
-        }
-    };
-    const defaultSubmitPromise = (data) => {
-        const options = {
-            method: "POST",
-            url: `${requestUrl}`,
-            data: clearEmptyString(data),
-            ...requestOptions,
-        };
-        return axios.request(options);
-    };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const onFormSubmit = async (data) => {
-        // Validate data using AJV before submission
-        const validationResult = validateFormData(data);
-        if (!validationResult.isValid) {
-            // Set validation errors
-            const validationErrorMessage = {
-                type: "validation",
-                errors: validationResult.errors,
-                message: translate.t("validation_error"),
-            };
-            onSubmitError(validationErrorMessage);
-            return;
-        }
-        if (onSubmit === undefined) {
-            await defaultOnSubmit(defaultSubmitPromise(data));
-            return;
-        }
-        await defaultOnSubmit(onSubmit(data));
-    };
     // Custom error renderer for validation errors with i18n support
     const renderValidationErrors = (validationErrors) => {
-        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))) }));
+        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;
@@ -6187,32 +6262,32 @@ const FormBody = () => {
         if (customSuccessRenderer) {
             return customSuccessRenderer(resetHandler);
         }
-        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: resetHandler, formNoValidate: true, children: translate.t("submit_again") }) })] }));
+        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: resetHandler, formNoValidate: true, children: translate.t('submit_again') }) })] }));
     }
     if (isConfirming) {
-        return (jsxs(Flex, { flexFlow: "column", gap: "2", children: [jsx(Grid, { gap: 4, gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: "repeat(12, max-content)", autoFlow: "row", children: ordered.map((column) => {
+        return (jsxs(Flex, { flexFlow: 'column', gap: "2", children: [jsx(Grid, { gap: 4, gridTemplateColumns: 'repeat(12, 1fr)', gridTemplateRows: 'repeat(12, max-content)', autoFlow: 'row', children: ordered.map((column) => {
                         return (jsx(ColumnViewer
                         // @ts-expect-error find suitable types
                         , { 
                             // @ts-expect-error find suitable types
                             properties: properties, prefix: ``, column }, `form-viewer-${column}`));
-                    }) }), jsxs(Flex, { justifyContent: "end", gap: "2", children: [jsx(Button$1, { onClick: () => {
+                    }) }), jsxs(Flex, { justifyContent: 'end', gap: '2', children: [jsx(Button$1, { onClick: () => {
                                 setIsConfirming(false);
-                            }, variant: "subtle", children: translate.t("cancel") }), jsx(Button$1, { onClick: () => {
+                            }, 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)) : (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)}` })] }) }) })] })] })) })) }))] }));
+                            }, 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)) : (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 (jsxs(Flex, { flexFlow: 'column', gap: "2", children: [jsx(Grid, { gap: "4", gridTemplateColumns: 'repeat(12, 1fr)', autoFlow: 'row', children: ordered.map((column) => {
                     return (jsx(ColumnRenderer
                     // @ts-expect-error find suitable types
                     , { 
                         // @ts-expect-error find suitable types
                         properties: properties, prefix: ``, column }, `form-input-${column}`));
-                }) }), jsxs(Flex, { justifyContent: "end", gap: "2", children: [showResetButton && (jsx(Button$1, { onClick: () => {
+                }) }), jsxs(Flex, { justifyContent: 'end', gap: "2", children: [showResetButton && (jsx(Button$1, { onClick: () => {
                             methods.reset();
-                        }, 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)}` })] }) }) })] })] })) })) }))] }));
+                        }, 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 = () => {

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

@@ -3,7 +3,7 @@ import { JSONSchema7 } from 'json-schema';
 import { Dispatch, ReactNode, SetStateAction } from 'react';
 import { FieldValues } from 'react-hook-form';
 import { UseTranslationResponse } from 'react-i18next';
-import { DateTimePickerLabels, IdPickerLabels } from './components/types/CustomJSONSchema7';
+import { DateTimePickerLabels, IdPickerLabels, EnumPickerLabels } from './components/types/CustomJSONSchema7';
 export interface SchemaFormContext<TData extends FieldValues> {
     schema: JSONSchema7;
     serverUrl: string;
@@ -38,7 +38,10 @@ export interface SchemaFormContext<TData extends FieldValues> {
         showResetButton?: boolean;
         showTitle?: boolean;
     };
+    requireConfirmation: boolean;
+    onFormSubmit: (data: TData) => Promise<void>;
     dateTimePickerLabels?: DateTimePickerLabels;
     idPickerLabels?: IdPickerLabels;
+    enumPickerLabels?: EnumPickerLabels;
 }
 export declare const SchemaFormContext: import("react").Context<SchemaFormContext<unknown>>;

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

@@ -4,7 +4,7 @@ import { JSONSchema7 } from 'json-schema';
 import { Dispatch, ReactNode, SetStateAction } from 'react';
 import { FieldValues, SubmitHandler, UseFormReturn } from 'react-hook-form';
 import { UseTranslationResponse } from 'react-i18next';
-import { CustomJSONSchema7, DateTimePickerLabels, IdPickerLabels } from '../types/CustomJSONSchema7';
+import { CustomJSONSchema7, DateTimePickerLabels, IdPickerLabels, EnumPickerLabels } from '../types/CustomJSONSchema7';
 export interface FormRootProps<TData extends FieldValues> {
     schema: CustomJSONSchema7;
     serverUrl: string;
@@ -28,8 +28,10 @@ export interface FormRootProps<TData extends FieldValues> {
         showResetButton?: boolean;
         showTitle?: boolean;
     };
+    requireConfirmation?: boolean;
     dateTimePickerLabels?: DateTimePickerLabels;
     idPickerLabels?: IdPickerLabels;
+    enumPickerLabels?: EnumPickerLabels;
 }
 export interface CustomJSONSchema7Definition extends JSONSchema7 {
     variant: string;
@@ -46,4 +48,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, customSuccessRenderer, displayConfig, dateTimePickerLabels, idPickerLabels, }: 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, customSuccessRenderer, displayConfig, requireConfirmation, dateTimePickerLabels, idPickerLabels, enumPickerLabels, }: FormRootProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/components/fields/DatePicker.d.ts

@@ -1,2 +1,2 @@
-import { InputDefaultProps } from "./types";
+import { InputDefaultProps } from './types';
 export declare const DatePicker: ({ column, schema, prefix }: InputDefaultProps) => import("react/jsx-runtime").JSX.Element;