@bsol-oss/react-datatable5 12.0.0-beta.71 → 12.0.0-beta.73

package/dist/index.mjs

@@ -3657,8 +3657,8 @@ const AccordionItem = Accordion.Item;
 //@ts-expect-error TODO: find appropriate type
 const SchemaFormContext = createContext({
     schema: {},
-    serverUrl: "",
-    requestUrl: "",
+    serverUrl: '',
+    requestUrl: '',
     order: [],
     ignore: [],
     include: [],
@@ -3714,11 +3714,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, displayConfig = {
+const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, customErrorRenderer, customSuccessRenderer, displayConfig = {
     showSubmitButton: true,
     showResetButton: true,
     showTitle: true,
-}, }) => {
+}, dateTimePickerLabels, idPickerLabels, enumPickerLabels, }) => {
     const [isSuccess, setIsSuccess] = useState(false);
     const [isError, setIsError] = useState(false);
     const [isSubmiting, setIsSubmiting] = useState(false);
@@ -3752,7 +3752,11 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
             setError,
             getUpdatedData,
             customErrorRenderer,
+            customSuccessRenderer,
             displayConfig,
+            dateTimePickerLabels,
+            idPickerLabels,
+            enumPickerLabels,
         }, children: jsx(FormProvider, { ...form, children: children }) }));
 };
 
@@ -4011,14 +4015,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) {
@@ -4042,45 +4048,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) {
@@ -4095,10 +4139,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();
@@ -4113,9 +4157,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);
@@ -4129,8 +4173,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, {});
@@ -4140,18 +4184,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
@@ -4171,7 +4217,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);
@@ -4179,10 +4225,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) {
@@ -4595,12 +4642,12 @@ const getTableData = async ({ serverUrl, in_table, searching = "", where = [], l
 
 const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
-    const { serverUrl, idMap, setIdMap, schema: parentSchema, } = useSchemaContext();
+    const { serverUrl, idMap, setIdMap, schema: parentSchema, idPickerLabels, } = useSchemaContext();
     const formI18n = useFormI18n(column, prefix);
-    const { required, gridColumn = "span 12", gridRow = "span 1", renderDisplay, foreign_key, } = schema;
+    const { required, gridColumn = 'span 12', gridRow = 'span 1', renderDisplay, foreign_key, } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const { table, column: column_ref, display_column, customQueryFn, } = foreign_key;
-    const [searchText, setSearchText] = useState("");
+    const [searchText, setSearchText] = useState('');
     const [limit, setLimit] = useState(10);
     const [openSearchResult, setOpenSearchResult] = useState();
     const [page, setPage] = useState(0);
@@ -4614,7 +4661,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
         queryFn: async () => {
             if (customQueryFn) {
                 const { data, idMap } = await customQueryFn({
-                    searching: searchText ?? "",
+                    searching: searchText ?? '',
                     limit: limit,
                     offset: page * limit,
                 });
@@ -4625,7 +4672,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
             }
             const data = await getTableData({
                 serverUrl,
-                searching: searchText ?? "",
+                searching: searchText ?? '',
                 in_table: table,
                 limit: limit,
                 offset: page * limit,
@@ -4655,7 +4702,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
         queryFn: async () => {
             if (customQueryFn) {
                 const { data, idMap } = await customQueryFn({
-                    searching: watchIds.join(","),
+                    searching: watchIds.join(','),
                     limit: isMultiple ? watchIds.length : 1,
                     offset: 0,
                 });
@@ -4667,7 +4714,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
             if (!watchId && (!watchIds || watchIds.length === 0)) {
                 return { data: [] };
             }
-            const searchValue = isMultiple ? watchIds.join(",") : watchId;
+            const searchValue = isMultiple ? watchIds.join(',') : watchId;
             const data = await getTableData({
                 serverUrl,
                 searching: searchValue,
@@ -4704,7 +4751,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
     useEffect(() => {
         if (openSearchResult) {
             // Reset search text when opening the popover
-            setSearchText("");
+            setSearchText('');
             // Reset page to first page
             setPage(0);
             // Fetch initial data
@@ -4730,44 +4777,44 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
     const count = data?.count ?? 0;
     const getPickedValue = () => {
         if (Object.keys(idMap).length <= 0) {
-            return "";
+            return '';
         }
         const record = idMap[watchId];
         if (record === undefined) {
-            return "";
+            return '';
         }
         if (!!renderDisplay === true) {
             return renderDisplay(record);
         }
         return record[display_column];
     };
-    return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [isMultiple && (jsxs(Flex, { flexFlow: "wrap", gap: 1, children: [watchIds.map((id) => {
+    return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, children: [isMultiple && (jsxs(Flex, { flexFlow: 'wrap', gap: 1, children: [watchIds.map((id) => {
                         const item = idMap[id];
                         if (item === undefined) {
-                            return (jsx(Text, { children: formI18n.t('undefined') }, id));
+                            return (jsx(Text, { children: idPickerLabels?.undefined ?? formI18n.t('undefined') }, id));
                         }
                         return (jsx(Tag, { closable: true, onClick: () => {
                                 setValue(colLabel, watchIds.filter((itemId) => itemId !== item[column_ref]));
                             }, children: !!renderDisplay === true
                                 ? renderDisplay(item)
                                 : item[display_column] }, id));
-                    }), jsx(Tag, { cursor: "pointer", onClick: () => {
+                    }), jsx(Tag, { cursor: 'pointer', onClick: () => {
                             setOpenSearchResult(true);
-                        }, children: formI18n.t('add_more') })] })), !isMultiple && (jsx(Button, { variant: "outline", onClick: () => {
+                        }, children: idPickerLabels?.addMore ?? formI18n.t('add_more') })] })), !isMultiple && (jsx(Button, { variant: 'outline', onClick: () => {
                     setOpenSearchResult(true);
-                }, justifyContent: "start", children: queryDefault.isLoading ? jsx(Spinner, { size: "sm" }) : getPickedValue() })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start", strategy: "fixed" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { portalled: false, children: jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsx(Input, { placeholder: formI18n.t('type_to_search'), onChange: onSearchChange, autoComplete: "off", ref: ref, value: searchText }), jsx(PopoverTitle, {}), openSearchResult && (jsxs(Fragment, { children: [(isFetching || isLoading || isPending) && jsx(Spinner, {}), isError && (jsx(Icon, { color: "red.400", children: jsx(BiError, {}) })), jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxs(Flex, { alignItems: "center", gap: "2", children: [jsx(InfoTip, { children: `${formI18n.t('total')} ${count}, ${formI18n.t('showing')} ${limit} ${formI18n.t('per_page', { defaultValue: 'per page' })}` }), jsxs(Text, { fontSize: "sm", fontWeight: "bold", children: [count, jsxs(Text, { as: "span", fontSize: "xs", ml: "1", color: "gray.500", children: ["/", " ", count > 0
+                }, justifyContent: 'start', children: queryDefault.isLoading ? jsx(Spinner, { size: "sm" }) : getPickedValue() })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: 'bottom-start', strategy: 'fixed' }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { portalled: false, children: jsxs(PopoverBody, { display: 'grid', gap: 1, children: [jsx(Input, { placeholder: idPickerLabels?.typeToSearch ?? formI18n.t('type_to_search'), onChange: onSearchChange, autoComplete: "off", ref: ref, value: searchText }), jsx(PopoverTitle, {}), openSearchResult && (jsxs(Fragment, { children: [(isFetching || isLoading || isPending) && jsx(Spinner, {}), isError && (jsx(Icon, { color: 'red.400', children: jsx(BiError, {}) })), jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxs(Flex, { alignItems: "center", gap: "2", children: [jsx(InfoTip, { children: `${idPickerLabels?.total ?? formI18n.t('total')} ${count}, ${idPickerLabels?.showing ?? formI18n.t('showing')} ${limit} ${idPickerLabels?.perPage ?? formI18n.t('per_page', { defaultValue: 'per page' })}` }), jsxs(Text, { fontSize: "sm", fontWeight: "bold", children: [count, jsxs(Text, { as: "span", fontSize: "xs", ml: "1", color: "gray.500", children: ["/", ' ', count > 0
                                                                             ? `${page * limit + 1}-${Math.min((page + 1) * limit, count)}`
-                                                                            : "0"] })] })] }), jsx(Box, { children: jsxs("select", { value: limit, onChange: handleLimitChange, style: {
-                                                            padding: "4px 8px",
-                                                            borderRadius: "4px",
-                                                            border: "1px solid #ccc",
-                                                            fontSize: "14px",
-                                                        }, children: [jsx("option", { value: "5", children: "5" }), jsx("option", { value: "10", children: "10" }), jsx("option", { value: "20", children: "20" }), jsx("option", { value: "30", children: "30" })] }) })] }), jsx(Grid, { overflowY: "auto", children: dataList.length > 0 ? (jsx(Flex, { flexFlow: "column wrap", gap: 1, children: dataList.map((item) => {
+                                                                            : '0'] })] })] }), jsx(Box, { children: jsxs("select", { value: limit, onChange: handleLimitChange, style: {
+                                                            padding: '4px 8px',
+                                                            borderRadius: '4px',
+                                                            border: '1px solid #ccc',
+                                                            fontSize: '14px',
+                                                        }, children: [jsx("option", { value: "5", children: "5" }), jsx("option", { value: "10", children: "10" }), jsx("option", { value: "20", children: "20" }), jsx("option", { value: "30", children: "30" })] }) })] }), jsx(Grid, { overflowY: 'auto', children: dataList.length > 0 ? (jsx(Flex, { flexFlow: 'column wrap', gap: 1, children: dataList.map((item) => {
                                                     const selected = isMultiple
                                                         ? watchIds.some((id) => item[column_ref] === id)
                                                         : watchId === item[column_ref];
-                                                    return (jsx(Box, { cursor: "pointer", onClick: () => {
+                                                    return (jsx(Box, { cursor: 'pointer', onClick: () => {
                                                             if (!isMultiple) {
                                                                 setOpenSearchResult(false);
                                                                 setValue(colLabel, item[column_ref]);
@@ -4783,15 +4830,17 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
                                                             setValue(colLabel, [...newSet]);
                                                         }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected
                                                             ? {
-                                                                color: "colorPalette.400/50",
-                                                                fontWeight: "bold",
+                                                                color: 'colorPalette.400/50',
+                                                                fontWeight: 'bold',
                                                             }
                                                             : {}), children: !!renderDisplay === true
                                                             ? renderDisplay(item)
                                                             : item[display_column] }, item[column_ref]));
                                                 }) })) : (jsx(Text, { children: searchText
-                                                    ? formI18n.t('empty_search_result')
-                                                    : formI18n.t('initial_results') })) }), jsx(PaginationRoot, { justifySelf: "center", count: count, pageSize: limit, defaultPage: 1, page: page + 1, onPageChange: (e) => setPage(e.page - 1), children: jsxs(HStack, { gap: "4", children: [jsx(PaginationPrevTrigger, {}), count > 0 && jsx(PaginationPageText, {}), jsx(PaginationNextTrigger, {})] }) })] }))] }) })] }), errors[`${colLabel}`] && (jsx(Text, { color: "red.400", children: formI18n.required() }))] }));
+                                                    ? idPickerLabels?.emptySearchResult ??
+                                                        formI18n.t('empty_search_result')
+                                                    : idPickerLabels?.initialResults ??
+                                                        formI18n.t('initial_results') })) }), jsx(PaginationRoot, { justifySelf: 'center', count: count, pageSize: limit, defaultPage: 1, page: page + 1, onPageChange: (e) => setPage(e.page - 1), children: jsxs(HStack, { gap: "4", children: [jsx(PaginationPrevTrigger, {}), count > 0 && jsx(PaginationPageText, {}), jsx(PaginationNextTrigger, {})] }) })] }))] }) })] }), errors[`${colLabel}`] && (jsx(Text, { color: 'red.400', children: formI18n.required() }))] }));
 };
 
 const NumberInputRoot = React.forwardRef(function NumberInput$1(props, ref) {
@@ -5478,7 +5527,7 @@ dayjs.extend(utc);
 dayjs.extend(timezone);
 const DateTimePicker = ({ 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 HH:mm:ss", 
     // with timezone
@@ -5519,7 +5568,7 @@ const DateTimePicker = ({ column, schema, prefix, }) => {
                             }, justifyContent: "start", children: [jsx(MdDateRange, {}), selectedDate !== undefined ? `${displayDate}` : ""] }) }), jsx(PopoverContent, { minW: "450px", children: jsxs(PopoverBody, { children: [jsx(PopoverTitle, {}), jsx(DateTimePicker$1, { value: selectedDate, onChange: (date) => {
                                         setValue(colLabel, dayjs(date).tz(timezone).format(dateFormat));
                                     }, timezone: timezone, labels: {
-                                        monthNamesShort: [
+                                        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" }),
@@ -5533,7 +5582,7 @@ const DateTimePicker = ({ column, schema, prefix, }) => {
                                             formI18n.translate.t(`common.month_11`, { defaultValue: "November" }),
                                             formI18n.translate.t(`common.month_12`, { defaultValue: "December" }),
                                         ],
-                                        weekdayNamesShort: [
+                                        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" }),
@@ -5544,10 +5593,10 @@ const DateTimePicker = ({ column, schema, prefix, }) => {
                                             formI18n.translate.t(`common.weekday_6`, { defaultValue: "Fri" }),
                                             formI18n.translate.t(`common.weekday_7`, { defaultValue: "Sat" }),
                                         ],
-                                        backButtonLabel: formI18n.translate.t(`common.back_button`, {
+                                        backButtonLabel: dateTimePickerLabels?.backButtonLabel ?? formI18n.translate.t(`common.back_button`, {
                                             defaultValue: "Back",
                                         }),
-                                        forwardButtonLabel: formI18n.translate.t(`common.forward_button`, {
+                                        forwardButtonLabel: dateTimePickerLabels?.forwardButtonLabel ?? formI18n.translate.t(`common.forward_button`, {
                                             defaultValue: "Forward",
                                         }),
                                     } })] }) })] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: formI18n.required() }))] }));
@@ -6073,7 +6122,7 @@ const SubmitButton = () => {
 };
 
 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, displayConfig, } = useSchemaContext();
+    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 { showSubmitButton, showResetButton } = displayConfig;
     const methods = useFormContext();
     const { properties } = schema;
@@ -6170,15 +6219,19 @@ const FormBody = () => {
         include,
     });
     if (isSuccess) {
-        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);
-                            setIsConfirming(false);
-                            setValidatedData(undefined);
-                            const data = await getUpdatedData();
-                            methods.reset(data);
-                        }, formNoValidate: true, children: translate.t("submit_again") }) })] }));
+        const resetHandler = async () => {
+            setIsError(false);
+            setIsSubmiting(false);
+            setIsSuccess(false);
+            setIsConfirming(false);
+            setValidatedData(undefined);
+            const data = await getUpdatedData();
+            methods.reset(data);
+        };
+        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") }) })] }));
     }
     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) => {
@@ -6216,12 +6269,12 @@ const DefaultForm = ({ formConfig, }) => {
     return (jsx(FormRoot, { ...formConfig, children: jsxs(Grid, { gap: "2", children: [showTitle && jsx(FormTitle, {}), jsx(FormBody, {})] }) }));
 };
 
-const useForm = ({ preLoadedValues, keyPrefix }) => {
+const useForm = ({ preLoadedValues, keyPrefix, namespace }) => {
     const form = useForm$1({
         values: preLoadedValues,
     });
     const [idMap, setIdMap] = useState({});
-    const translate = useTranslation("", { keyPrefix });
+    const translate = useTranslation(namespace || "", { keyPrefix });
     return {
         form,
         idMap,
@@ -6230,6 +6283,207 @@ const useForm = ({ preLoadedValues, keyPrefix }) => {
     };
 };
 
+/**
+ * Type definitions for error message configuration
+ */
+/**
+ * Schema-level error message builder
+ *
+ * Builds a complete errorMessage object compatible with ajv-errors plugin.
+ * Supports both i18n translation keys and plain string messages.
+ *
+ * @param config - Error message configuration
+ * @returns Complete errorMessage object for JSON Schema
+ *
+ * @example
+ * ```typescript
+ * // Simple required field errors
+ * const errorMessage = buildErrorMessages({
+ *   required: {
+ *     username: "Username is required",
+ *     email: "user.email.field_required" // i18n key
+ *   }
+ * });
+ *
+ * // With validation rules
+ * const errorMessage = buildErrorMessages({
+ *   required: {
+ *     password: "Password is required"
+ *   },
+ *   properties: {
+ *     password: {
+ *       minLength: "Password must be at least 8 characters",
+ *       pattern: "Password must contain letters and numbers"
+ *     },
+ *     age: {
+ *       minimum: "Must be 18 or older",
+ *       maximum: "Must be under 120"
+ *     }
+ *   }
+ * });
+ *
+ * // With global fallbacks
+ * const errorMessage = buildErrorMessages({
+ *   required: {
+ *     email: "Email is required"
+ *   },
+ *   minLength: "This field is too short", // applies to all fields
+ *   minimum: "Value is too small"
+ * });
+ * ```
+ */
+const buildErrorMessages = (config) => {
+    const result = {};
+    // Add required field errors
+    if (config.required && Object.keys(config.required).length > 0) {
+        result.required = config.required;
+    }
+    // Add field-specific validation errors
+    if (config.properties && Object.keys(config.properties).length > 0) {
+        result.properties = config.properties;
+    }
+    // Add global fallback error messages
+    const globalKeys = [
+        "minLength",
+        "maxLength",
+        "pattern",
+        "minimum",
+        "maximum",
+        "multipleOf",
+        "format",
+        "type",
+        "enum",
+    ];
+    globalKeys.forEach((key) => {
+        if (config[key]) {
+            result[key] = config[key];
+        }
+    });
+    return result;
+};
+/**
+ * Helper function to build required field errors
+ *
+ * Simplifies creating required field error messages, especially useful
+ * for generating i18n translation keys following a pattern.
+ *
+ * @param fields - Array of required field names
+ * @param messageOrGenerator - Either a string template or function to generate messages
+ * @returns Required field error configuration
+ *
+ * @example
+ * ```typescript
+ * // Plain string messages
+ * const required = buildRequiredErrors(
+ *   ["username", "email", "password"],
+ *   (field) => `${field} is required`
+ * );
+ * // Result: { username: "username is required", email: "email is required", ... }
+ *
+ * // i18n translation keys
+ * const required = buildRequiredErrors(
+ *   ["username", "email"],
+ *   (field) => `user.${field}.field_required`
+ * );
+ * // Result: { username: "user.username.field_required", email: "user.email.field_required" }
+ *
+ * // Same message for all fields
+ * const required = buildRequiredErrors(
+ *   ["username", "email"],
+ *   "This field is required"
+ * );
+ * // Result: { username: "This field is required", email: "This field is required" }
+ *
+ * // With keyPrefix for i18n
+ * const required = buildRequiredErrors(
+ *   ["username", "email"],
+ *   (field) => `${field}.field_required`,
+ *   "user"
+ * );
+ * // Result: { username: "user.username.field_required", email: "user.email.field_required" }
+ * ```
+ */
+const buildRequiredErrors = (fields, messageOrGenerator, keyPrefix = "") => {
+    const result = {};
+    fields.forEach((field) => {
+        if (typeof messageOrGenerator === "function") {
+            const message = messageOrGenerator(field);
+            result[field] = keyPrefix ? `${keyPrefix}.${message}` : message;
+        }
+        else {
+            result[field] = messageOrGenerator;
+        }
+    });
+    return result;
+};
+/**
+ * Helper function to build field-specific validation errors
+ *
+ * Creates property-specific error messages for multiple fields at once.
+ *
+ * @param config - Maps field names to their validation error configurations
+ * @returns Properties error configuration
+ *
+ * @example
+ * ```typescript
+ * const properties = buildFieldErrors({
+ *   username: {
+ *     minLength: "Username must be at least 3 characters",
+ *     pattern: "Username can only contain letters and numbers"
+ *   },
+ *   age: {
+ *     minimum: "Must be 18 or older",
+ *     maximum: "Must be under 120"
+ *   },
+ *   email: {
+ *     format: "Please enter a valid email address"
+ *   }
+ * });
+ * ```
+ */
+const buildFieldErrors = (config) => {
+    return config;
+};
+/**
+ * Helper function to create a complete error message configuration in one call
+ *
+ * Convenient wrapper that combines required and validation errors.
+ *
+ * @param required - Required field error messages
+ * @param properties - Field-specific validation error messages
+ * @param globalFallbacks - Global fallback error messages
+ * @returns Complete error message configuration
+ *
+ * @example
+ * ```typescript
+ * const errorMessage = createErrorMessage(
+ *   {
+ *     username: "Username is required",
+ *     email: "Email is required"
+ *   },
+ *   {
+ *     username: {
+ *       minLength: "Username must be at least 3 characters"
+ *     },
+ *     email: {
+ *       format: "Please enter a valid email"
+ *     }
+ *   },
+ *   {
+ *     minLength: "This field is too short",
+ *     format: "Invalid format"
+ *   }
+ * );
+ * ```
+ */
+const createErrorMessage = (required, properties, globalFallbacks) => {
+    return buildErrorMessages({
+        required,
+        properties,
+        ...globalFallbacks,
+    });
+};
+
 const getMultiDates = ({ selected, selectedDate, selectedDates, selectable, }) => {
     if (!selectable) {
         return [...selectedDates];
@@ -6246,4 +6500,4 @@ const getMultiDates = ({ selected, selectedDate, selectedDates, selectable, }) =
     }
 };
 
-export { CardHeader, DataDisplay, DataTable, DataTableServer, DefaultCardTitle, DefaultForm, DefaultTable, DensityToggleButton, EditSortingButton, EmptyState$1 as EmptyState, ErrorAlert, FilterDialog, FormBody, FormRoot, FormTitle, GlobalFilter, PageSizeControl, Pagination, RecordDisplay, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableDataDisplay, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableSelector, TableSorter, TableViewer, TextCell, ViewDialog, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };
+export { CardHeader, DataDisplay, DataTable, DataTableServer, DefaultCardTitle, DefaultForm, DefaultTable, DensityToggleButton, EditSortingButton, EmptyState$1 as EmptyState, ErrorAlert, FilterDialog, FormBody, FormRoot, FormTitle, GlobalFilter, PageSizeControl, Pagination, RecordDisplay, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableDataDisplay, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableSelector, TableSorter, TableViewer, TextCell, ViewDialog, buildErrorMessages, buildFieldErrors, buildRequiredErrors, createErrorMessage, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };