@bsol-oss/react-datatable5 13.0.1-beta.2 → 13.0.1-beta.4

package/dist/index.js

@@ -3714,7 +3714,7 @@ const TextWithCopy = ({ text, globalFilter, highlightedText, }) => {
     const displayText = highlightedText !== undefined
         ? highlightedText
         : highlightText$1(textValue, globalFilter);
-    return (jsxRuntime.jsxs(react.HStack, { gap: 2, alignItems: "center", children: [jsxRuntime.jsx(react.Text, { as: "span", children: displayText }), jsxRuntime.jsx(react.Clipboard.Root, { value: textValue, children: jsxRuntime.jsx(react.Clipboard.Trigger, { asChild: true, children: jsxRuntime.jsx(react.IconButton, { size: "xs", variant: "ghost", "aria-label": "Copy", fontSize: "1em", children: jsxRuntime.jsx(react.Clipboard.Indicator, { copied: jsxRuntime.jsx(lu.LuCheck, {}), children: jsxRuntime.jsx(lu.LuCopy, {}) }) }) }) })] }));
+    return (jsxRuntime.jsxs(react.HStack, { gap: 2, alignItems: "center", children: [jsxRuntime.jsx(react.Text, { as: "span", children: displayText }), jsxRuntime.jsx(react.Clipboard.Root, { value: textValue, children: jsxRuntime.jsx(react.Clipboard.Trigger, { asChild: true, children: jsxRuntime.jsx(react.IconButton, { size: "2xs", variant: "ghost", "aria-label": "Copy", fontSize: "1em", children: jsxRuntime.jsx(react.Clipboard.Indicator, { copied: jsxRuntime.jsx(lu.LuCheck, {}), children: jsxRuntime.jsx(lu.LuCopy, {}) }) }) }) })] }));
 };
 
 // Helper function to highlight matching text
@@ -4146,6 +4146,22 @@ const convertAjvErrorsToFieldErrors = (errors, schema) => {
             // Get the schema node for this field to check for custom error messages
             const fieldSchema = getSchemaNodeForField(schema, fieldName);
             const customMessage = fieldSchema?.errorMessages?.[error.keyword];
+            // Debug log when error message is missing
+            if (!customMessage) {
+                console.debug(`[Form Validation] Missing error message for field '${fieldName}' with keyword '${error.keyword}'. Add errorMessages.${error.keyword} to schema for field '${fieldName}'`, {
+                    fieldName,
+                    keyword: error.keyword,
+                    instancePath: error.instancePath,
+                    schemaPath: error.schemaPath,
+                    params: error.params,
+                    fieldSchema: fieldSchema
+                        ? {
+                            type: fieldSchema.type,
+                            errorMessages: fieldSchema.errorMessages,
+                        }
+                        : undefined,
+                });
+            }
             // Provide helpful fallback message if no custom message is provided
             const fallbackMessage = customMessage ||
                 `Missing error message for ${error.keyword}. Add errorMessages.${error.keyword} to schema for field '${fieldName}'`;
@@ -4388,7 +4404,7 @@ function removeIndex(str) {
  *
  * @param column - The column name
  * @param prefix - The prefix for the field (usually empty string or parent path)
- * @param schema - Optional schema object with title property
+ * @param schema - Required schema object with title property
  * @returns Object with label helper functions
  *
  * @example
@@ -4421,9 +4437,21 @@ const useFormI18n = (column, prefix = '', schema) => {
          * Uses schema.title if available, otherwise: translate.t(removeIndex(`${colLabel}.field_label`))
          */
         label: (options) => {
-            if (schema?.title) {
+            if (schema.title) {
                 return schema.title;
             }
+            // Debug log when field title is missing
+            console.debug(`[Form Field Label] Missing title for field '${colLabel}'. Add title property to schema for field '${colLabel}'.`, {
+                fieldName: column,
+                colLabel,
+                prefix,
+                schema: {
+                    type: schema.type,
+                    errorMessages: schema.errorMessages
+                        ? Object.keys(schema.errorMessages)
+                        : undefined,
+                },
+            });
             return translate.t(removeIndex(`${colLabel}.field_label`), options);
         },
         /**
@@ -4700,7 +4728,7 @@ dayjs.extend(timezone);
 const DateRangePicker = ({ column, schema, prefix, }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
     const { timezone, insideDialog } = useSchemaContext();
-    const formI18n = useFormI18n(column, prefix);
+    const formI18n = useFormI18n(column, prefix, 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;
@@ -5345,7 +5373,7 @@ const MediaLibraryBrowser = ({ onFetchFiles, filterImageOnly = false, labels, en
                     }) })) }))] }));
 };
 
-function MediaBrowserDialog({ open, onClose, onSelect, title, filterImageOnly = false, onFetchFiles, onUploadFile, enableUpload = false, labels, colLabel, }) {
+function MediaBrowserDialog({ open, onClose, onSelect, title, filterImageOnly = false, onFetchFiles, onUploadFile, enableUpload = false, labels, }) {
     const [selectedFile, setSelectedFile] = React.useState(undefined);
     const [activeTab, setActiveTab] = React.useState('browse');
     const [uploadingFiles, setUploadingFiles] = React.useState(new Set());
@@ -5429,7 +5457,7 @@ function MediaBrowserDialog({ open, onClose, onSelect, title, filterImageOnly =
 const FilePicker = ({ column, schema, prefix }) => {
     const { setValue, formState: { errors }, watch, } = reactHookForm.useFormContext();
     const { filePickerLabels } = useSchemaContext();
-    const formI18n = useFormI18n(column, prefix);
+    const formI18n = useFormI18n(column, prefix, schema);
     const { required, gridColumn = 'span 12', gridRow = 'span 1', type, } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const isSingleSelect = type === 'string';
@@ -5505,7 +5533,7 @@ const FilePicker = ({ column, schema, prefix }) => {
 const FormMediaLibraryBrowser = ({ column, schema, prefix, }) => {
     const { setValue, formState: { errors }, watch, } = reactHookForm.useFormContext();
     const { filePickerLabels } = useSchemaContext();
-    const formI18n = useFormI18n(column, prefix);
+    const formI18n = useFormI18n(column, prefix, schema);
     const { required, gridColumn = 'span 12', gridRow = 'span 1', filePicker, type, } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const isSingleSelect = type === 'string';
@@ -5600,9 +5628,7 @@ const FormMediaLibraryBrowser = ({ column, schema, prefix, }) => {
     return (jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
         gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: [jsxRuntime.jsx(react.VStack, { align: "stretch", gap: 2, children: jsxRuntime.jsx(react.Button, { variant: "outline", onClick: () => setDialogOpen(true), borderColor: "border.default", bg: "bg.panel", _hover: { bg: 'bg.muted' }, children: filePickerLabels?.browseLibrary ??
                         formI18n.t('browse_library') ??
-                        'Browse from Library' }) }), jsxRuntime.jsx(MediaBrowserDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSelect: handleMediaLibrarySelect, title: filePickerLabels?.dialogTitle ??
-                    filePickerLabels?.dialogTitle ??
-                    'Select File', filterImageOnly: filterImageOnly, onFetchFiles: onFetchFiles, onUploadFile: onUploadFile, enableUpload: enableUpload, labels: filePickerLabels, colLabel: colLabel }), jsxRuntime.jsx(react.Flex, { flexFlow: 'column', gap: 1, children: currentFileIds.map((fileId, index) => {
+                        'Browse from Library' }) }), jsxRuntime.jsx(MediaBrowserDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSelect: handleMediaLibrarySelect, title: filePickerLabels?.dialogTitle ?? formI18n.label() ?? 'Select File', filterImageOnly: filterImageOnly, onFetchFiles: onFetchFiles, onUploadFile: onUploadFile, enableUpload: enableUpload, labels: filePickerLabels, colLabel: colLabel }), jsxRuntime.jsx(react.Flex, { flexFlow: 'column', gap: 1, children: currentFileIds.map((fileId, index) => {
                     const file = fileMap.get(fileId);
                     const isImage = file
                         ? /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file.name)
@@ -5626,10 +5652,10 @@ const defaultRenderDisplay = (item) => {
 const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
     const { watch, getValues, formState: { errors }, setValue, } = reactHookForm.useFormContext();
     const { idMap, setIdMap, idPickerLabels, insideDialog } = useSchemaContext();
-    const { renderDisplay, loadInitialValues: schemaLoadInitialValues, foreign_key, variant, } = schema;
+    const { renderDisplay, loadInitialValues, foreign_key, variant } = schema;
     // loadInitialValues must be provided in schema for id-picker fields
     // It's used to load the record of the id so the display is human-readable
-    if (variant === 'id-picker' && !schemaLoadInitialValues) {
+    if (variant === 'id-picker' && !loadInitialValues) {
         throw new Error(`loadInitialValues is required in schema for IdPicker field '${column}'. Please provide loadInitialValues function in the schema to load records for human-readable display.`);
     }
     const { table, column: column_ref, customQueryFn, } = foreign_key;
@@ -5676,19 +5702,27 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
     const missingIdsKey = React.useMemo(() => {
         return JSON.stringify([...missingIds].sort());
     }, [missingIds]);
+    // Include idMap state in query key to force refetch when idMap is reset (e.g., on remount from another page)
+    // This ensures the query runs even if React Query has cached data for the same missing IDs
+    const idMapStateKey = React.useMemo(() => {
+        // Create a key based on whether the required IDs are in idMap
+        const hasRequiredIds = currentValue.every((id) => idMap[id]);
+        return hasRequiredIds ? 'complete' : 'incomplete';
+    }, [currentValue, idMap]);
     // Query to fetch initial values that are missing from idMap
     // This query runs automatically when missingIds.length > 0 and updates idMap
     const initialValuesQuery = reactQuery.useQuery({
-        queryKey: [`idpicker-initial`, column, missingIdsKey],
+        queryKey: [`idpicker-initial`, column, missingIdsKey, idMapStateKey],
         queryFn: async () => {
             if (missingIds.length === 0) {
                 return { data: [], count: 0 };
             }
             // Use schema's loadInitialValues (required for id-picker)
-            if (!schemaLoadInitialValues) {
-                throw new Error(`loadInitialValues is required in schema for IdPicker field '${column}'.`);
+            if (!loadInitialValues) {
+                console.warn(`loadInitialValues is required in schema for IdPicker field '${column}'. Returning empty idMap.`);
+                return { data: [], count: 0 };
             }
-            const result = await schemaLoadInitialValues({
+            const result = await loadInitialValues({
                 ids: missingIds,
                 foreign_key: foreign_key,
                 setIdMap,
@@ -5696,7 +5730,9 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
             return result.data;
         },
         enabled: missingIds.length > 0, // Only fetch if there are missing IDs
-        staleTime: 300000,
+        staleTime: 0, // Always consider data stale to refetch on remount
+        refetchOnMount: true, // Always refetch when component remounts (e.g., from another page)
+        refetchOnWindowFocus: false, // Don't refetch on window focus
     });
     const { isLoading: isLoadingInitialValues, isFetching: isFetchingInitialValues, } = initialValuesQuery;
     // Query for search results (async loading)
@@ -5841,7 +5877,7 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
         idPickerLabels,
         insideDialog: insideDialog ?? false,
         renderDisplay,
-        loadInitialValues: schemaLoadInitialValues, // Required for id-picker, checked above
+        loadInitialValues: loadInitialValues, // Required for id-picker, checked above
         column_ref,
         errors,
         setValue,
@@ -7767,15 +7803,15 @@ const DateViewer = ({ column, schema, prefix }) => {
 
 const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
     const { watch, formState: { errors }, } = reactHookForm.useFormContext();
-    const formI18n = useFormI18n(column, prefix);
+    const formI18n = useFormI18n(column, prefix, schema);
     const { required } = 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 colLabel = formI18n.colLabel;
     const watchEnum = watch(colLabel);
     const watchEnums = (watch(colLabel) ?? []);
-    return (jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [isMultiple && (jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", gap: 1, children: watchEnums.map((enumValue) => {
+    return (jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, children: [isMultiple && (jsxRuntime.jsx(react.Flex, { flexFlow: 'wrap', gap: 1, children: watchEnums.map((enumValue) => {
                     const item = enumValue;
                     if (item === undefined) {
                         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "undefined" });
@@ -7783,7 +7819,7 @@ const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
                     return (jsxRuntime.jsx(Tag, { size: "lg", children: !!renderDisplay === true
                             ? renderDisplay(item)
                             : formI18n.t(item) }, item));
-                }) })), !isMultiple && jsxRuntime.jsx(react.Text, { children: formI18n.t(watchEnum) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: formI18n.required() }))] }));
+                }) })), !isMultiple && jsxRuntime.jsx(react.Text, { children: formI18n.t(watchEnum) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: 'red.400', children: formI18n.required() }))] }));
 };
 
 const FileViewer = ({ column, schema, prefix }) => {
@@ -8196,6 +8232,17 @@ const FormBody = () => {
 
 const FormTitle = () => {
     const { schema } = useSchemaContext();
+    // Debug log when form title is missing
+    if (!schema.title) {
+        console.debug('[Form Title] Missing title in root schema. Add title property to schema.', {
+            schema: {
+                type: schema.type,
+                properties: schema.properties
+                    ? Object.keys(schema.properties)
+                    : undefined,
+            },
+        });
+    }
     return jsxRuntime.jsx(react.Heading, { children: schema.title ?? 'Form' });
 };
 

package/dist/index.mjs

@@ -3694,7 +3694,7 @@ const TextWithCopy = ({ text, globalFilter, highlightedText, }) => {
     const displayText = highlightedText !== undefined
         ? highlightedText
         : highlightText$1(textValue, globalFilter);
-    return (jsxs(HStack, { gap: 2, alignItems: "center", children: [jsx(Text, { as: "span", children: displayText }), jsx(Clipboard.Root, { value: textValue, children: jsx(Clipboard.Trigger, { asChild: true, children: jsx(IconButton, { size: "xs", variant: "ghost", "aria-label": "Copy", fontSize: "1em", children: jsx(Clipboard.Indicator, { copied: jsx(LuCheck, {}), children: jsx(LuCopy, {}) }) }) }) })] }));
+    return (jsxs(HStack, { gap: 2, alignItems: "center", children: [jsx(Text, { as: "span", children: displayText }), jsx(Clipboard.Root, { value: textValue, children: jsx(Clipboard.Trigger, { asChild: true, children: jsx(IconButton, { size: "2xs", variant: "ghost", "aria-label": "Copy", fontSize: "1em", children: jsx(Clipboard.Indicator, { copied: jsx(LuCheck, {}), children: jsx(LuCopy, {}) }) }) }) })] }));
 };
 
 // Helper function to highlight matching text
@@ -4126,6 +4126,22 @@ const convertAjvErrorsToFieldErrors = (errors, schema) => {
             // Get the schema node for this field to check for custom error messages
             const fieldSchema = getSchemaNodeForField(schema, fieldName);
             const customMessage = fieldSchema?.errorMessages?.[error.keyword];
+            // Debug log when error message is missing
+            if (!customMessage) {
+                console.debug(`[Form Validation] Missing error message for field '${fieldName}' with keyword '${error.keyword}'. Add errorMessages.${error.keyword} to schema for field '${fieldName}'`, {
+                    fieldName,
+                    keyword: error.keyword,
+                    instancePath: error.instancePath,
+                    schemaPath: error.schemaPath,
+                    params: error.params,
+                    fieldSchema: fieldSchema
+                        ? {
+                            type: fieldSchema.type,
+                            errorMessages: fieldSchema.errorMessages,
+                        }
+                        : undefined,
+                });
+            }
             // Provide helpful fallback message if no custom message is provided
             const fallbackMessage = customMessage ||
                 `Missing error message for ${error.keyword}. Add errorMessages.${error.keyword} to schema for field '${fieldName}'`;
@@ -4368,7 +4384,7 @@ function removeIndex(str) {
  *
  * @param column - The column name
  * @param prefix - The prefix for the field (usually empty string or parent path)
- * @param schema - Optional schema object with title property
+ * @param schema - Required schema object with title property
  * @returns Object with label helper functions
  *
  * @example
@@ -4401,9 +4417,21 @@ const useFormI18n = (column, prefix = '', schema) => {
          * Uses schema.title if available, otherwise: translate.t(removeIndex(`${colLabel}.field_label`))
          */
         label: (options) => {
-            if (schema?.title) {
+            if (schema.title) {
                 return schema.title;
             }
+            // Debug log when field title is missing
+            console.debug(`[Form Field Label] Missing title for field '${colLabel}'. Add title property to schema for field '${colLabel}'.`, {
+                fieldName: column,
+                colLabel,
+                prefix,
+                schema: {
+                    type: schema.type,
+                    errorMessages: schema.errorMessages
+                        ? Object.keys(schema.errorMessages)
+                        : undefined,
+                },
+            });
             return translate.t(removeIndex(`${colLabel}.field_label`), options);
         },
         /**
@@ -4680,7 +4708,7 @@ dayjs.extend(timezone);
 const DateRangePicker = ({ column, schema, prefix, }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
     const { timezone, insideDialog } = useSchemaContext();
-    const formI18n = useFormI18n(column, prefix);
+    const formI18n = useFormI18n(column, prefix, 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;
@@ -5325,7 +5353,7 @@ const MediaLibraryBrowser = ({ onFetchFiles, filterImageOnly = false, labels, en
                     }) })) }))] }));
 };
 
-function MediaBrowserDialog({ open, onClose, onSelect, title, filterImageOnly = false, onFetchFiles, onUploadFile, enableUpload = false, labels, colLabel, }) {
+function MediaBrowserDialog({ open, onClose, onSelect, title, filterImageOnly = false, onFetchFiles, onUploadFile, enableUpload = false, labels, }) {
     const [selectedFile, setSelectedFile] = useState(undefined);
     const [activeTab, setActiveTab] = useState('browse');
     const [uploadingFiles, setUploadingFiles] = useState(new Set());
@@ -5409,7 +5437,7 @@ function MediaBrowserDialog({ open, onClose, onSelect, title, filterImageOnly =
 const FilePicker = ({ column, schema, prefix }) => {
     const { setValue, formState: { errors }, watch, } = useFormContext();
     const { filePickerLabels } = useSchemaContext();
-    const formI18n = useFormI18n(column, prefix);
+    const formI18n = useFormI18n(column, prefix, schema);
     const { required, gridColumn = 'span 12', gridRow = 'span 1', type, } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const isSingleSelect = type === 'string';
@@ -5485,7 +5513,7 @@ const FilePicker = ({ column, schema, prefix }) => {
 const FormMediaLibraryBrowser = ({ column, schema, prefix, }) => {
     const { setValue, formState: { errors }, watch, } = useFormContext();
     const { filePickerLabels } = useSchemaContext();
-    const formI18n = useFormI18n(column, prefix);
+    const formI18n = useFormI18n(column, prefix, schema);
     const { required, gridColumn = 'span 12', gridRow = 'span 1', filePicker, type, } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const isSingleSelect = type === 'string';
@@ -5580,9 +5608,7 @@ const FormMediaLibraryBrowser = ({ column, schema, prefix, }) => {
     return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
         gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: [jsx(VStack, { align: "stretch", gap: 2, children: jsx(Button$1, { variant: "outline", onClick: () => setDialogOpen(true), borderColor: "border.default", bg: "bg.panel", _hover: { bg: 'bg.muted' }, children: filePickerLabels?.browseLibrary ??
                         formI18n.t('browse_library') ??
-                        'Browse from Library' }) }), jsx(MediaBrowserDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSelect: handleMediaLibrarySelect, title: filePickerLabels?.dialogTitle ??
-                    filePickerLabels?.dialogTitle ??
-                    'Select File', filterImageOnly: filterImageOnly, onFetchFiles: onFetchFiles, onUploadFile: onUploadFile, enableUpload: enableUpload, labels: filePickerLabels, colLabel: colLabel }), jsx(Flex, { flexFlow: 'column', gap: 1, children: currentFileIds.map((fileId, index) => {
+                        'Browse from Library' }) }), jsx(MediaBrowserDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSelect: handleMediaLibrarySelect, title: filePickerLabels?.dialogTitle ?? formI18n.label() ?? 'Select File', filterImageOnly: filterImageOnly, onFetchFiles: onFetchFiles, onUploadFile: onUploadFile, enableUpload: enableUpload, labels: filePickerLabels, colLabel: colLabel }), jsx(Flex, { flexFlow: 'column', gap: 1, children: currentFileIds.map((fileId, index) => {
                     const file = fileMap.get(fileId);
                     const isImage = file
                         ? /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file.name)
@@ -5606,10 +5632,10 @@ const defaultRenderDisplay = (item) => {
 const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
     const { watch, getValues, formState: { errors }, setValue, } = useFormContext();
     const { idMap, setIdMap, idPickerLabels, insideDialog } = useSchemaContext();
-    const { renderDisplay, loadInitialValues: schemaLoadInitialValues, foreign_key, variant, } = schema;
+    const { renderDisplay, loadInitialValues, foreign_key, variant } = schema;
     // loadInitialValues must be provided in schema for id-picker fields
     // It's used to load the record of the id so the display is human-readable
-    if (variant === 'id-picker' && !schemaLoadInitialValues) {
+    if (variant === 'id-picker' && !loadInitialValues) {
         throw new Error(`loadInitialValues is required in schema for IdPicker field '${column}'. Please provide loadInitialValues function in the schema to load records for human-readable display.`);
     }
     const { table, column: column_ref, customQueryFn, } = foreign_key;
@@ -5656,19 +5682,27 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
     const missingIdsKey = useMemo(() => {
         return JSON.stringify([...missingIds].sort());
     }, [missingIds]);
+    // Include idMap state in query key to force refetch when idMap is reset (e.g., on remount from another page)
+    // This ensures the query runs even if React Query has cached data for the same missing IDs
+    const idMapStateKey = useMemo(() => {
+        // Create a key based on whether the required IDs are in idMap
+        const hasRequiredIds = currentValue.every((id) => idMap[id]);
+        return hasRequiredIds ? 'complete' : 'incomplete';
+    }, [currentValue, idMap]);
     // Query to fetch initial values that are missing from idMap
     // This query runs automatically when missingIds.length > 0 and updates idMap
     const initialValuesQuery = useQuery({
-        queryKey: [`idpicker-initial`, column, missingIdsKey],
+        queryKey: [`idpicker-initial`, column, missingIdsKey, idMapStateKey],
         queryFn: async () => {
             if (missingIds.length === 0) {
                 return { data: [], count: 0 };
             }
             // Use schema's loadInitialValues (required for id-picker)
-            if (!schemaLoadInitialValues) {
-                throw new Error(`loadInitialValues is required in schema for IdPicker field '${column}'.`);
+            if (!loadInitialValues) {
+                console.warn(`loadInitialValues is required in schema for IdPicker field '${column}'. Returning empty idMap.`);
+                return { data: [], count: 0 };
             }
-            const result = await schemaLoadInitialValues({
+            const result = await loadInitialValues({
                 ids: missingIds,
                 foreign_key: foreign_key,
                 setIdMap,
@@ -5676,7 +5710,9 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
             return result.data;
         },
         enabled: missingIds.length > 0, // Only fetch if there are missing IDs
-        staleTime: 300000,
+        staleTime: 0, // Always consider data stale to refetch on remount
+        refetchOnMount: true, // Always refetch when component remounts (e.g., from another page)
+        refetchOnWindowFocus: false, // Don't refetch on window focus
     });
     const { isLoading: isLoadingInitialValues, isFetching: isFetchingInitialValues, } = initialValuesQuery;
     // Query for search results (async loading)
@@ -5821,7 +5857,7 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
         idPickerLabels,
         insideDialog: insideDialog ?? false,
         renderDisplay,
-        loadInitialValues: schemaLoadInitialValues, // Required for id-picker, checked above
+        loadInitialValues: loadInitialValues, // Required for id-picker, checked above
         column_ref,
         errors,
         setValue,
@@ -7747,15 +7783,15 @@ const DateViewer = ({ column, schema, prefix }) => {
 
 const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
     const { watch, formState: { errors }, } = useFormContext();
-    const formI18n = useFormI18n(column, prefix);
+    const formI18n = useFormI18n(column, prefix, schema);
     const { required } = 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 colLabel = formI18n.colLabel;
     const watchEnum = watch(colLabel);
     const watchEnums = (watch(colLabel) ?? []);
-    return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [isMultiple && (jsx(Flex, { flexFlow: "wrap", gap: 1, children: watchEnums.map((enumValue) => {
+    return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, children: [isMultiple && (jsx(Flex, { flexFlow: 'wrap', gap: 1, children: watchEnums.map((enumValue) => {
                     const item = enumValue;
                     if (item === undefined) {
                         return jsx(Fragment, { children: "undefined" });
@@ -7763,7 +7799,7 @@ const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
                     return (jsx(Tag, { size: "lg", children: !!renderDisplay === true
                             ? renderDisplay(item)
                             : formI18n.t(item) }, item));
-                }) })), !isMultiple && jsx(Text, { children: formI18n.t(watchEnum) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: formI18n.required() }))] }));
+                }) })), !isMultiple && jsx(Text, { children: formI18n.t(watchEnum) }), errors[`${column}`] && (jsx(Text, { color: 'red.400', children: formI18n.required() }))] }));
 };
 
 const FileViewer = ({ column, schema, prefix }) => {
@@ -8176,6 +8212,17 @@ const FormBody = () => {
 
 const FormTitle = () => {
     const { schema } = useSchemaContext();
+    // Debug log when form title is missing
+    if (!schema.title) {
+        console.debug('[Form Title] Missing title in root schema. Add title property to schema.', {
+            schema: {
+                type: schema.type,
+                properties: schema.properties
+                    ? Object.keys(schema.properties)
+                    : undefined,
+            },
+        });
+    }
     return jsx(Heading, { children: schema.title ?? 'Form' });
 };
 

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

@@ -12,6 +12,6 @@ interface MediaBrowserDialogProps {
     labels?: FilePickerLabels;
     colLabel: string;
 }
-export declare function MediaBrowserDialog({ open, onClose, onSelect, title, filterImageOnly, onFetchFiles, onUploadFile, enableUpload, labels, colLabel, }: MediaBrowserDialogProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function MediaBrowserDialog({ open, onClose, onSelect, title, filterImageOnly, onFetchFiles, onUploadFile, enableUpload, labels, }: MediaBrowserDialogProps): import("react/jsx-runtime").JSX.Element | null;
 export declare const FilePicker: ({ column, schema, prefix }: InputDefaultProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/Form/components/viewers/EnumViewer.d.ts

@@ -1,4 +1,4 @@
-import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
+import { CustomJSONSchema7 } from '../types/CustomJSONSchema7';
 export interface EnumViewerProps {
     column: string;
     isMultiple?: boolean;

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

@@ -5,7 +5,7 @@
  *
  * @param column - The column name
  * @param prefix - The prefix for the field (usually empty string or parent path)
- * @param schema - Optional schema object with title property
+ * @param schema - Required schema object with title property
  * @returns Object with label helper functions
  *
  * @example
@@ -25,7 +25,7 @@
  * const colLabel = formI18n.colLabel;
  * ```
  */
-export declare const useFormI18n: (column: string, prefix?: string, schema?: {
+export declare const useFormI18n: (column: string, prefix: string | undefined, schema: {
     title?: string;
 }) => {
     /**

package/package.json

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