@bsol-oss/react-datatable5 13.0.1-beta.1 → 13.0.1-beta.3

package/dist/index.d.ts

@@ -817,12 +817,25 @@ interface TimePickerLabels {
     placeholder?: string;
     emptyMessage?: string;
 }
+interface LoadInitialValuesParams {
+    ids: string[];
+    foreign_key: ForeignKeyProps;
+    setIdMap: React__default.Dispatch<React__default.SetStateAction<Record<string, object>>>;
+}
+interface LoadInitialValuesResult {
+    data: {
+        data: Record<string, any>[];
+        count: number;
+    };
+    idMap: Record<string, object>;
+}
 interface CustomJSONSchema7 extends JSONSchema7 {
     gridColumn?: string;
     gridRow?: string;
     foreign_key?: ForeignKeyProps;
     variant?: string;
     renderDisplay?: (item: unknown) => ReactNode;
+    loadInitialValues?: (params: LoadInitialValuesParams) => Promise<LoadInitialValuesResult>;
     inputRender?: (props: {
         column: string;
         schema: CustomJSONSchema7;
@@ -844,6 +857,24 @@ interface CustomJSONSchema7 extends JSONSchema7 {
     numberStorageType?: 'string' | 'number';
     errorMessages?: Partial<Record<ValidationErrorType | string, string>>;
     filePicker?: FilePickerProps;
+    tagPicker?: {
+        queryFn?: (params: {
+            in_table: string;
+            where?: {
+                id: string;
+                value: string[];
+            }[];
+            limit?: number;
+            offset?: number;
+            searching?: string;
+        }) => Promise<{
+            data: {
+                data: any[];
+                count: number;
+            };
+            idMap?: Record<string, object>;
+        }>;
+    };
 }
 declare const defaultRenderDisplay: (item: unknown) => ReactNode;
 interface TagPickerProps {
@@ -869,7 +900,6 @@ interface FilePickerProps {
 
 interface FormRootProps<TData extends FieldValues> {
     schema: CustomJSONSchema7;
-    serverUrl: string;
     requestUrl?: string;
     idMap: Record<string, object>;
     setIdMap: Dispatch<SetStateAction<Record<string, object>>>;
@@ -913,7 +943,7 @@ declare const idPickerSanityCheck: (column: string, foreign_key?: {
     table?: string | undefined;
     column?: string | undefined;
 } | undefined) => void;
-declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, requireConfirmation, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
+declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, requireConfirmation, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
 
 interface DefaultFormProps<TData extends FieldValues> {
     formConfig: Omit<FormRootProps<TData>, "children">;
@@ -1388,4 +1418,4 @@ declare module '@tanstack/react-table' {
     }
 }
 
-export { CalendarDisplay, type CalendarDisplayProps, type CalendarEvent, type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, DatePickerInput, type DatePickerInputProps, type DatePickerLabels, type DatePickerProps, type DateTimePickerLabels, DefaultCardTitle, DefaultForm, type DefaultFormProps, DefaultTable, type DefaultTableProps, DefaultTableServer, type DefaultTableServerProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, type EnumPickerLabels, ErrorAlert, type ErrorAlertProps, type ErrorMessageConfig, type ErrorMessageResult, type FieldErrorConfig, type FilePickerLabels, type FilePickerMediaFile, type FilePickerProps, FilterDialog, FormBody, type FormButtonLabels, FormRoot, type FormRootProps, FormTitle, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, type IdPickerLabels, MediaLibraryBrowser, type MediaLibraryBrowserProps, PageSizeControl, type PageSizeControlProps, Pagination, type QueryParams, type RangeCalendarProps, type RangeDatePickerLabels, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, RowCountText, SelectAllRowsToggle, type SelectAllRowsToggleProps, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableDataDisplay, type TableDataDisplayProps, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, type TableHeaderTexts, TableLoadingComponent, type TableLoadingComponentProps, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, type TagPickerProps, TextCell, type TextCellProps, type TimePickerLabels, type Translate, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, type ValidationErrorType, ViewDialog, buildErrorMessages, buildFieldErrors, buildRequiredErrors, convertToAjvErrorsFormat, createErrorMessage, defaultRenderDisplay, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };
+export { CalendarDisplay, type CalendarDisplayProps, type CalendarEvent, type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, DatePickerInput, type DatePickerInputProps, type DatePickerLabels, type DatePickerProps, type DateTimePickerLabels, DefaultCardTitle, DefaultForm, type DefaultFormProps, DefaultTable, type DefaultTableProps, DefaultTableServer, type DefaultTableServerProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, type EnumPickerLabels, ErrorAlert, type ErrorAlertProps, type ErrorMessageConfig, type ErrorMessageResult, type FieldErrorConfig, type FilePickerLabels, type FilePickerMediaFile, type FilePickerProps, FilterDialog, FormBody, type FormButtonLabels, FormRoot, type FormRootProps, FormTitle, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, type IdPickerLabels, type LoadInitialValuesParams, type LoadInitialValuesResult, MediaLibraryBrowser, type MediaLibraryBrowserProps, PageSizeControl, type PageSizeControlProps, Pagination, type QueryParams, type RangeCalendarProps, type RangeDatePickerLabels, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, RowCountText, SelectAllRowsToggle, type SelectAllRowsToggleProps, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableDataDisplay, type TableDataDisplayProps, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, type TableHeaderTexts, TableLoadingComponent, type TableLoadingComponentProps, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, type TagPickerProps, TextCell, type TextCellProps, type TimePickerLabels, type Translate, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, type ValidationErrorType, ViewDialog, buildErrorMessages, buildFieldErrors, buildRequiredErrors, convertToAjvErrorsFormat, createErrorMessage, defaultRenderDisplay, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };

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
@@ -4036,7 +4036,6 @@ const getColumns = ({ schema, include = [], ignore = [], width = [], meta = {},
 //@ts-expect-error TODO: find appropriate type
 const SchemaFormContext = React.createContext({
     schema: {},
-    serverUrl: '',
     requestUrl: '',
     order: [],
     ignore: [],
@@ -4276,7 +4275,7 @@ 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, customSuccessRenderer, displayConfig = {
+const FormRoot = ({ schema, idMap, setIdMap, form, translate, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, customErrorRenderer, customSuccessRenderer, displayConfig = {
     showSubmitButton: true,
     showResetButton: true,
     showTitle: true,
@@ -4317,9 +4316,11 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
         }
     };
     const defaultSubmitPromise = (data) => {
+        if (!requestOptions.url) {
+            throw new Error('requestOptions.url is required when onSubmit is not provided');
+        }
         const options = {
             method: 'POST',
-            url: `${serverUrl}`,
             data: clearEmptyString(data),
             ...requestOptions,
         };
@@ -4337,7 +4338,6 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
     };
     return (jsxRuntime.jsx(SchemaFormContext.Provider, { value: {
             schema,
-            serverUrl,
             order,
             ignore,
             include,
@@ -5618,106 +5618,20 @@ const FormMediaLibraryBrowser = ({ column, schema, prefix, }) => {
                 }) })] }));
 };
 
-const getTableData = async ({ serverUrl, in_table, searching = "", where = [], limit = 10, offset = 0, }) => {
-    if (serverUrl === undefined || serverUrl.length == 0) {
-        throw new Error("The serverUrl is missing");
-    }
-    if (in_table === undefined || in_table.length == 0) {
-        throw new Error("The in_table is missing");
-    }
-    const options = {
-        method: "GET",
-        url: `${serverUrl}/api/g/${in_table}`,
-        params: {
-            searching,
-            where,
-            limit,
-            offset
-        },
-    };
-    try {
-        const { data } = await axios.request(options);
-        console.log(data);
-        return data;
-    }
-    catch (error) {
-        console.error(error);
-        throw error;
-    }
-};
-
 // Default renderDisplay function that stringifies JSON
 const defaultRenderDisplay = (item) => {
     return JSON.stringify(item);
 };
 
-/**
- * Load initial values for IdPicker fields into idMap
- * Uses customQueryFn if available, otherwise falls back to getTableData
- *
- * @param params - Configuration for loading initial values
- * @returns Promise with fetched data and idMap
- */
-const loadInitialValues = async ({ ids, foreign_key, serverUrl, setIdMap, }) => {
-    if (!ids || ids.length === 0) {
-        return { data: { data: [], count: 0 }, idMap: {} };
-    }
-    const { table, column: column_ref, customQueryFn } = foreign_key;
-    // Filter out IDs that are already in idMap (optional optimization)
-    // For now, we'll fetch all requested IDs to ensure consistency
-    if (customQueryFn) {
-        const { data, idMap: returnedIdMap } = await customQueryFn({
-            searching: '',
-            limit: ids.length,
-            offset: 0,
-            where: [
-                {
-                    id: column_ref,
-                    value: ids.length === 1 ? ids[0] : ids, // CustomQueryFn accepts string | string[]
-                },
-            ],
-        });
-        // Update idMap with returned values
-        if (returnedIdMap && Object.keys(returnedIdMap).length > 0) {
-            setIdMap((state) => {
-                return { ...state, ...returnedIdMap };
-            });
-        }
-        return { data, idMap: returnedIdMap || {} };
-    }
-    // Fallback to default getTableData
-    const data = await getTableData({
-        serverUrl,
-        searching: '',
-        in_table: table,
-        limit: ids.length,
-        offset: 0,
-        where: [
-            {
-                id: column_ref,
-                value: ids, // Always pass as array
-            },
-        ],
-    });
-    // Build idMap from fetched data
-    const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
-        return [
-            item[column_ref],
-            {
-                ...item,
-            },
-        ];
-    }));
-    // Update idMap state
-    setIdMap((state) => {
-        return { ...state, ...newMap };
-    });
-    return { data: data, idMap: newMap };
-};
 const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
     const { watch, getValues, formState: { errors }, setValue, } = reactHookForm.useFormContext();
-    const { serverUrl, idMap, setIdMap, idPickerLabels, insideDialog } = useSchemaContext();
-    const { renderDisplay, foreign_key } = schema;
+    const { idMap, setIdMap, idPickerLabels, insideDialog } = useSchemaContext();
+    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' && !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;
     const [searchText, setSearchText] = React.useState('');
     const [debouncedSearchText, setDebouncedSearchText] = React.useState('');
@@ -5762,60 +5676,57 @@ 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 the reusable loadInitialValues function
+            // Use schema's loadInitialValues (required for id-picker)
+            if (!loadInitialValues) {
+                throw new Error(`loadInitialValues is required in schema for IdPicker field '${column}'.`);
+            }
             const result = await loadInitialValues({
                 ids: missingIds,
                 foreign_key: foreign_key,
-                serverUrl,
                 setIdMap,
             });
             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)
     const query = reactQuery.useQuery({
         queryKey: [`idpicker`, { column, searchText: debouncedSearchText, limit }],
         queryFn: async () => {
-            if (customQueryFn) {
-                const { data, idMap } = await customQueryFn({
-                    searching: debouncedSearchText ?? '',
-                    limit: limit,
-                    offset: 0,
-                });
-                setIdMap((state) => {
-                    return { ...state, ...idMap };
-                });
-                return data;
+            // customQueryFn is required when serverUrl is not available
+            if (!customQueryFn) {
+                throw new Error(`customQueryFn is required in foreign_key for table ${table}. serverUrl has been removed.`);
             }
-            const data = await getTableData({
-                serverUrl,
+            const { data, idMap } = await customQueryFn({
                 searching: debouncedSearchText ?? '',
-                in_table: table,
                 limit: limit,
                 offset: 0,
             });
-            const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
-                return [
-                    item[column_ref],
-                    {
-                        ...item,
-                    },
-                ];
-            }));
-            setIdMap((state) => {
-                return { ...state, ...newMap };
-            });
+            // Update idMap with returned values
+            if (idMap && Object.keys(idMap).length > 0) {
+                setIdMap((state) => {
+                    return { ...state, ...idMap };
+                });
+            }
             return data;
         },
         enabled: true, // Always enabled for combobox
@@ -5939,6 +5850,7 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
         idPickerLabels,
         insideDialog: insideDialog ?? false,
         renderDisplay,
+        loadInitialValues: loadInitialValues, // Required for id-picker, checked above
         column_ref,
         errors,
         setValue,
@@ -6232,31 +6144,35 @@ react.RadioCard.ItemIndicator;
 
 const TagPicker = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
-    const { serverUrl } = useSchemaContext();
     if (schema.properties == undefined) {
-        throw new Error("schema properties undefined when using DatePicker");
+        throw new Error('schema properties undefined when using DatePicker');
     }
-    const { gridColumn, gridRow, in_table, object_id_column } = schema;
+    const { gridColumn, gridRow, in_table, object_id_column, tagPicker } = schema;
     if (in_table === undefined) {
-        throw new Error("in_table is undefined when using TagPicker");
+        throw new Error('in_table is undefined when using TagPicker');
     }
     if (object_id_column === undefined) {
-        throw new Error("object_id_column is undefined when using TagPicker");
+        throw new Error('object_id_column is undefined when using TagPicker');
+    }
+    if (!tagPicker?.queryFn) {
+        throw new Error('tagPicker.queryFn is required in schema. serverUrl has been removed.');
     }
     const query = reactQuery.useQuery({
         queryKey: [`tagpicker`, in_table],
         queryFn: async () => {
-            return await getTableData({
-                serverUrl,
-                in_table: "tables_tags_view",
+            const result = await tagPicker.queryFn({
+                in_table: 'tables_tags_view',
                 where: [
                     {
-                        id: "table_name",
+                        id: 'table_name',
                         value: [in_table],
                     },
                 ],
                 limit: 100,
+                offset: 0,
+                searching: '',
             });
+            return result.data || { data: [] };
         },
         staleTime: 10000,
     });
@@ -6264,17 +6180,19 @@ const TagPicker = ({ column, schema, prefix }) => {
     const existingTagsQuery = reactQuery.useQuery({
         queryKey: [`existing`, { in_table, object_id_column }, object_id],
         queryFn: async () => {
-            return await getTableData({
-                serverUrl,
+            const result = await tagPicker.queryFn({
                 in_table: in_table,
                 where: [
                     {
                         id: object_id_column,
-                        value: object_id[0],
+                        value: [object_id[0]],
                     },
                 ],
                 limit: 100,
+                offset: 0,
+                searching: '',
             });
+            return result.data || { data: [] };
         },
         enabled: object_id != undefined,
         staleTime: 10000,
@@ -6285,9 +6203,9 @@ const TagPicker = ({ column, schema, prefix }) => {
     if (!!object_id === false) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     }
-    return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: 4, gridColumn,
+    return (jsxRuntime.jsxs(react.Flex, { flexFlow: 'column', gap: 4, gridColumn,
         gridRow, children: [isFetching && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isFetching" }), isLoading && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isLoading" }), isPending && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isPending" }), isError && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isError" }), dataList.map(({ parent_tag_name, all_tags, is_mutually_exclusive }) => {
-                return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: 2, children: [jsxRuntime.jsx(react.Text, { children: parent_tag_name }), is_mutually_exclusive && (jsxRuntime.jsx(RadioCardRoot, { defaultValue: "next", variant: "surface", onValueChange: (tagIds) => {
+                return (jsxRuntime.jsxs(react.Flex, { flexFlow: 'column', gap: 2, children: [jsxRuntime.jsx(react.Text, { children: parent_tag_name }), is_mutually_exclusive && (jsxRuntime.jsx(RadioCardRoot, { defaultValue: "next", variant: 'surface', onValueChange: (tagIds) => {
                                 const existedTags = Object.values(all_tags)
                                     .filter(({ id }) => {
                                     return existingTagList.some(({ tag_id }) => tag_id === id);
@@ -6299,20 +6217,20 @@ const TagPicker = ({ column, schema, prefix }) => {
                                     tagIds.value,
                                 ]);
                                 setValue(`${column}.${parent_tag_name}.old`, existedTags);
-                            }, children: jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
+                            }, children: jsxRuntime.jsx(react.Flex, { flexFlow: 'wrap', gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
                                     if (existingTagList.some(({ tag_id }) => tag_id === id)) {
-                                        return (jsxRuntime.jsx(RadioCardItem, { label: tagName, value: id, flex: "0 0 0%", disabled: true }, `${tagName}-${id}`));
+                                        return (jsxRuntime.jsx(RadioCardItem, { label: tagName, value: id, flex: '0 0 0%', disabled: true }, `${tagName}-${id}`));
                                     }
-                                    return (jsxRuntime.jsx(RadioCardItem, { label: tagName, value: id, flex: "0 0 0%", colorPalette: "blue" }, `${tagName}-${id}`));
+                                    return (jsxRuntime.jsx(RadioCardItem, { label: tagName, value: id, flex: '0 0 0%', colorPalette: 'blue' }, `${tagName}-${id}`));
                                 }) }) })), !is_mutually_exclusive && (jsxRuntime.jsx(react.CheckboxGroup, { onValueChange: (tagIds) => {
                                 setValue(`${column}.${parent_tag_name}.current`, tagIds);
-                            }, children: jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
+                            }, children: jsxRuntime.jsx(react.Flex, { flexFlow: 'wrap', gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
                                     if (existingTagList.some(({ tag_id }) => tag_id === id)) {
-                                        return (jsxRuntime.jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%", disabled: true, colorPalette: "blue" }, `${tagName}-${id}`));
+                                        return (jsxRuntime.jsx(CheckboxCard, { label: tagName, value: id, flex: '0 0 0%', disabled: true, colorPalette: 'blue' }, `${tagName}-${id}`));
                                     }
-                                    return (jsxRuntime.jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%" }, `${tagName}-${id}`));
+                                    return (jsxRuntime.jsx(CheckboxCard, { label: tagName, value: id, flex: '0 0 0%' }, `${tagName}-${id}`));
                                 }) }) }))] }, `tag-${parent_tag_name}`));
-            }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
+            }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: 'red.400', children: (errors[`${column}`]?.message ?? 'No error message') }))] }));
 };
 
 const Textarea = React.forwardRef(({ value, defaultValue, placeholder, onChange, onFocus, onBlur, disabled = false, readOnly = false, className, rows = 4, maxLength, autoFocus = false, invalid = false, required = false, label, helperText, errorText, ...props }, ref) => {
@@ -7994,31 +7912,35 @@ const StringViewer = ({ column, schema, prefix, }) => {
 
 const TagViewer = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
-    const { serverUrl } = useSchemaContext();
     if (schema.properties == undefined) {
-        throw new Error("schema properties undefined when using DatePicker");
+        throw new Error('schema properties undefined when using DatePicker');
     }
-    const { gridColumn, gridRow, in_table, object_id_column } = schema;
+    const { gridColumn, gridRow, in_table, object_id_column, tagPicker } = schema;
     if (in_table === undefined) {
-        throw new Error("in_table is undefined when using TagPicker");
+        throw new Error('in_table is undefined when using TagPicker');
     }
     if (object_id_column === undefined) {
-        throw new Error("object_id_column is undefined when using TagPicker");
+        throw new Error('object_id_column is undefined when using TagPicker');
+    }
+    if (!tagPicker?.queryFn) {
+        throw new Error('tagPicker.queryFn is required in schema. serverUrl has been removed.');
     }
     const query = reactQuery.useQuery({
         queryKey: [`tagpicker`, in_table],
         queryFn: async () => {
-            return await getTableData({
-                serverUrl,
-                in_table: "tables_tags_view",
+            const result = await tagPicker.queryFn({
+                in_table: 'tables_tags_view',
                 where: [
                     {
-                        id: "table_name",
+                        id: 'table_name',
                         value: [in_table],
                     },
                 ],
                 limit: 100,
+                offset: 0,
+                searching: '',
             });
+            return result.data || { data: [] };
         },
         staleTime: 10000,
     });
@@ -8026,17 +7948,19 @@ const TagViewer = ({ column, schema, prefix }) => {
     const existingTagsQuery = reactQuery.useQuery({
         queryKey: [`existing`, { in_table, object_id_column }, object_id],
         queryFn: async () => {
-            return await getTableData({
-                serverUrl,
+            const result = await tagPicker.queryFn({
                 in_table: in_table,
                 where: [
                     {
                         id: object_id_column,
-                        value: object_id[0],
+                        value: [object_id[0]],
                     },
                 ],
                 limit: 100,
+                offset: 0,
+                searching: '',
             });
+            return result.data || { data: [] };
         },
         enabled: object_id != undefined,
         staleTime: 10000,
@@ -8047,9 +7971,9 @@ const TagViewer = ({ column, schema, prefix }) => {
     if (!!object_id === false) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     }
-    return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: 4, gridColumn,
+    return (jsxRuntime.jsxs(react.Flex, { flexFlow: 'column', gap: 4, gridColumn,
         gridRow, children: [isFetching && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isFetching" }), isLoading && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isLoading" }), isPending && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isPending" }), isError && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isError" }), dataList.map(({ parent_tag_name, all_tags, is_mutually_exclusive }) => {
-                return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: 2, children: [jsxRuntime.jsx(react.Text, { children: parent_tag_name }), is_mutually_exclusive && (jsxRuntime.jsx(RadioCardRoot, { defaultValue: "next", variant: "surface", onValueChange: (tagIds) => {
+                return (jsxRuntime.jsxs(react.Flex, { flexFlow: 'column', gap: 2, children: [jsxRuntime.jsx(react.Text, { children: parent_tag_name }), is_mutually_exclusive && (jsxRuntime.jsx(RadioCardRoot, { defaultValue: "next", variant: 'surface', onValueChange: (tagIds) => {
                                 const existedTags = Object.values(all_tags)
                                     .filter(({ id }) => {
                                     return existingTagList.some(({ tag_id }) => tag_id === id);
@@ -8061,20 +7985,20 @@ const TagViewer = ({ column, schema, prefix }) => {
                                     tagIds.value,
                                 ]);
                                 setValue(`${column}.${parent_tag_name}.old`, existedTags);
-                            }, children: jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
+                            }, children: jsxRuntime.jsx(react.Flex, { flexFlow: 'wrap', gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
                                     if (existingTagList.some(({ tag_id }) => tag_id === id)) {
-                                        return (jsxRuntime.jsx(RadioCardItem, { label: tagName, value: id, flex: "0 0 0%", disabled: true }, `${tagName}-${id}`));
+                                        return (jsxRuntime.jsx(RadioCardItem, { label: tagName, value: id, flex: '0 0 0%', disabled: true }, `${tagName}-${id}`));
                                     }
-                                    return (jsxRuntime.jsx(RadioCardItem, { label: tagName, value: id, flex: "0 0 0%", colorPalette: "blue" }, `${tagName}-${id}`));
+                                    return (jsxRuntime.jsx(RadioCardItem, { label: tagName, value: id, flex: '0 0 0%', colorPalette: 'blue' }, `${tagName}-${id}`));
                                 }) }) })), !is_mutually_exclusive && (jsxRuntime.jsx(react.CheckboxGroup, { onValueChange: (tagIds) => {
                                 setValue(`${column}.${parent_tag_name}.current`, tagIds);
-                            }, children: jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
+                            }, children: jsxRuntime.jsx(react.Flex, { flexFlow: 'wrap', gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
                                     if (existingTagList.some(({ tag_id }) => tag_id === id)) {
-                                        return (jsxRuntime.jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%", disabled: true, colorPalette: "blue" }, `${tagName}-${id}`));
+                                        return (jsxRuntime.jsx(CheckboxCard, { label: tagName, value: id, flex: '0 0 0%', disabled: true, colorPalette: 'blue' }, `${tagName}-${id}`));
                                     }
-                                    return (jsxRuntime.jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%" }, `${tagName}-${id}`));
+                                    return (jsxRuntime.jsx(CheckboxCard, { label: tagName, value: id, flex: '0 0 0%' }, `${tagName}-${id}`));
                                 }) }) }))] }, `tag-${parent_tag_name}`));
-            }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
+            }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: 'red.400', children: (errors[`${column}`]?.message ?? 'No error message') }))] }));
 };
 
 const TextAreaViewer = ({ column, schema, prefix, }) => {

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
@@ -4016,7 +4016,6 @@ const getColumns = ({ schema, include = [], ignore = [], width = [], meta = {},
 //@ts-expect-error TODO: find appropriate type
 const SchemaFormContext = createContext({
     schema: {},
-    serverUrl: '',
     requestUrl: '',
     order: [],
     ignore: [],
@@ -4256,7 +4255,7 @@ 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, customSuccessRenderer, displayConfig = {
+const FormRoot = ({ schema, idMap, setIdMap, form, translate, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, customErrorRenderer, customSuccessRenderer, displayConfig = {
     showSubmitButton: true,
     showResetButton: true,
     showTitle: true,
@@ -4297,9 +4296,11 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
         }
     };
     const defaultSubmitPromise = (data) => {
+        if (!requestOptions.url) {
+            throw new Error('requestOptions.url is required when onSubmit is not provided');
+        }
         const options = {
             method: 'POST',
-            url: `${serverUrl}`,
             data: clearEmptyString(data),
             ...requestOptions,
         };
@@ -4317,7 +4318,6 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
     };
     return (jsx(SchemaFormContext.Provider, { value: {
             schema,
-            serverUrl,
             order,
             ignore,
             include,
@@ -5598,106 +5598,20 @@ const FormMediaLibraryBrowser = ({ column, schema, prefix, }) => {
                 }) })] }));
 };
 
-const getTableData = async ({ serverUrl, in_table, searching = "", where = [], limit = 10, offset = 0, }) => {
-    if (serverUrl === undefined || serverUrl.length == 0) {
-        throw new Error("The serverUrl is missing");
-    }
-    if (in_table === undefined || in_table.length == 0) {
-        throw new Error("The in_table is missing");
-    }
-    const options = {
-        method: "GET",
-        url: `${serverUrl}/api/g/${in_table}`,
-        params: {
-            searching,
-            where,
-            limit,
-            offset
-        },
-    };
-    try {
-        const { data } = await axios.request(options);
-        console.log(data);
-        return data;
-    }
-    catch (error) {
-        console.error(error);
-        throw error;
-    }
-};
-
 // Default renderDisplay function that stringifies JSON
 const defaultRenderDisplay = (item) => {
     return JSON.stringify(item);
 };
 
-/**
- * Load initial values for IdPicker fields into idMap
- * Uses customQueryFn if available, otherwise falls back to getTableData
- *
- * @param params - Configuration for loading initial values
- * @returns Promise with fetched data and idMap
- */
-const loadInitialValues = async ({ ids, foreign_key, serverUrl, setIdMap, }) => {
-    if (!ids || ids.length === 0) {
-        return { data: { data: [], count: 0 }, idMap: {} };
-    }
-    const { table, column: column_ref, customQueryFn } = foreign_key;
-    // Filter out IDs that are already in idMap (optional optimization)
-    // For now, we'll fetch all requested IDs to ensure consistency
-    if (customQueryFn) {
-        const { data, idMap: returnedIdMap } = await customQueryFn({
-            searching: '',
-            limit: ids.length,
-            offset: 0,
-            where: [
-                {
-                    id: column_ref,
-                    value: ids.length === 1 ? ids[0] : ids, // CustomQueryFn accepts string | string[]
-                },
-            ],
-        });
-        // Update idMap with returned values
-        if (returnedIdMap && Object.keys(returnedIdMap).length > 0) {
-            setIdMap((state) => {
-                return { ...state, ...returnedIdMap };
-            });
-        }
-        return { data, idMap: returnedIdMap || {} };
-    }
-    // Fallback to default getTableData
-    const data = await getTableData({
-        serverUrl,
-        searching: '',
-        in_table: table,
-        limit: ids.length,
-        offset: 0,
-        where: [
-            {
-                id: column_ref,
-                value: ids, // Always pass as array
-            },
-        ],
-    });
-    // Build idMap from fetched data
-    const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
-        return [
-            item[column_ref],
-            {
-                ...item,
-            },
-        ];
-    }));
-    // Update idMap state
-    setIdMap((state) => {
-        return { ...state, ...newMap };
-    });
-    return { data: data, idMap: newMap };
-};
 const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
     const { watch, getValues, formState: { errors }, setValue, } = useFormContext();
-    const { serverUrl, idMap, setIdMap, idPickerLabels, insideDialog } = useSchemaContext();
-    const { renderDisplay, foreign_key } = schema;
+    const { idMap, setIdMap, idPickerLabels, insideDialog } = useSchemaContext();
+    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' && !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;
     const [searchText, setSearchText] = useState('');
     const [debouncedSearchText, setDebouncedSearchText] = useState('');
@@ -5742,60 +5656,57 @@ 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 the reusable loadInitialValues function
+            // Use schema's loadInitialValues (required for id-picker)
+            if (!loadInitialValues) {
+                throw new Error(`loadInitialValues is required in schema for IdPicker field '${column}'.`);
+            }
             const result = await loadInitialValues({
                 ids: missingIds,
                 foreign_key: foreign_key,
-                serverUrl,
                 setIdMap,
             });
             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)
     const query = useQuery({
         queryKey: [`idpicker`, { column, searchText: debouncedSearchText, limit }],
         queryFn: async () => {
-            if (customQueryFn) {
-                const { data, idMap } = await customQueryFn({
-                    searching: debouncedSearchText ?? '',
-                    limit: limit,
-                    offset: 0,
-                });
-                setIdMap((state) => {
-                    return { ...state, ...idMap };
-                });
-                return data;
+            // customQueryFn is required when serverUrl is not available
+            if (!customQueryFn) {
+                throw new Error(`customQueryFn is required in foreign_key for table ${table}. serverUrl has been removed.`);
             }
-            const data = await getTableData({
-                serverUrl,
+            const { data, idMap } = await customQueryFn({
                 searching: debouncedSearchText ?? '',
-                in_table: table,
                 limit: limit,
                 offset: 0,
             });
-            const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
-                return [
-                    item[column_ref],
-                    {
-                        ...item,
-                    },
-                ];
-            }));
-            setIdMap((state) => {
-                return { ...state, ...newMap };
-            });
+            // Update idMap with returned values
+            if (idMap && Object.keys(idMap).length > 0) {
+                setIdMap((state) => {
+                    return { ...state, ...idMap };
+                });
+            }
             return data;
         },
         enabled: true, // Always enabled for combobox
@@ -5919,6 +5830,7 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
         idPickerLabels,
         insideDialog: insideDialog ?? false,
         renderDisplay,
+        loadInitialValues: loadInitialValues, // Required for id-picker, checked above
         column_ref,
         errors,
         setValue,
@@ -6212,31 +6124,35 @@ RadioCard.ItemIndicator;
 
 const TagPicker = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
-    const { serverUrl } = useSchemaContext();
     if (schema.properties == undefined) {
-        throw new Error("schema properties undefined when using DatePicker");
+        throw new Error('schema properties undefined when using DatePicker');
     }
-    const { gridColumn, gridRow, in_table, object_id_column } = schema;
+    const { gridColumn, gridRow, in_table, object_id_column, tagPicker } = schema;
     if (in_table === undefined) {
-        throw new Error("in_table is undefined when using TagPicker");
+        throw new Error('in_table is undefined when using TagPicker');
     }
     if (object_id_column === undefined) {
-        throw new Error("object_id_column is undefined when using TagPicker");
+        throw new Error('object_id_column is undefined when using TagPicker');
+    }
+    if (!tagPicker?.queryFn) {
+        throw new Error('tagPicker.queryFn is required in schema. serverUrl has been removed.');
     }
     const query = useQuery({
         queryKey: [`tagpicker`, in_table],
         queryFn: async () => {
-            return await getTableData({
-                serverUrl,
-                in_table: "tables_tags_view",
+            const result = await tagPicker.queryFn({
+                in_table: 'tables_tags_view',
                 where: [
                     {
-                        id: "table_name",
+                        id: 'table_name',
                         value: [in_table],
                     },
                 ],
                 limit: 100,
+                offset: 0,
+                searching: '',
             });
+            return result.data || { data: [] };
         },
         staleTime: 10000,
     });
@@ -6244,17 +6160,19 @@ const TagPicker = ({ column, schema, prefix }) => {
     const existingTagsQuery = useQuery({
         queryKey: [`existing`, { in_table, object_id_column }, object_id],
         queryFn: async () => {
-            return await getTableData({
-                serverUrl,
+            const result = await tagPicker.queryFn({
                 in_table: in_table,
                 where: [
                     {
                         id: object_id_column,
-                        value: object_id[0],
+                        value: [object_id[0]],
                     },
                 ],
                 limit: 100,
+                offset: 0,
+                searching: '',
             });
+            return result.data || { data: [] };
         },
         enabled: object_id != undefined,
         staleTime: 10000,
@@ -6265,9 +6183,9 @@ const TagPicker = ({ column, schema, prefix }) => {
     if (!!object_id === false) {
         return jsx(Fragment, {});
     }
-    return (jsxs(Flex, { flexFlow: "column", gap: 4, gridColumn,
+    return (jsxs(Flex, { flexFlow: 'column', gap: 4, gridColumn,
         gridRow, children: [isFetching && jsx(Fragment, { children: "isFetching" }), isLoading && jsx(Fragment, { children: "isLoading" }), isPending && jsx(Fragment, { children: "isPending" }), isError && jsx(Fragment, { children: "isError" }), dataList.map(({ parent_tag_name, all_tags, is_mutually_exclusive }) => {
-                return (jsxs(Flex, { flexFlow: "column", gap: 2, children: [jsx(Text, { children: parent_tag_name }), is_mutually_exclusive && (jsx(RadioCardRoot, { defaultValue: "next", variant: "surface", onValueChange: (tagIds) => {
+                return (jsxs(Flex, { flexFlow: 'column', gap: 2, children: [jsx(Text, { children: parent_tag_name }), is_mutually_exclusive && (jsx(RadioCardRoot, { defaultValue: "next", variant: 'surface', onValueChange: (tagIds) => {
                                 const existedTags = Object.values(all_tags)
                                     .filter(({ id }) => {
                                     return existingTagList.some(({ tag_id }) => tag_id === id);
@@ -6279,20 +6197,20 @@ const TagPicker = ({ column, schema, prefix }) => {
                                     tagIds.value,
                                 ]);
                                 setValue(`${column}.${parent_tag_name}.old`, existedTags);
-                            }, children: jsx(Flex, { flexFlow: "wrap", gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
+                            }, children: jsx(Flex, { flexFlow: 'wrap', gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
                                     if (existingTagList.some(({ tag_id }) => tag_id === id)) {
-                                        return (jsx(RadioCardItem, { label: tagName, value: id, flex: "0 0 0%", disabled: true }, `${tagName}-${id}`));
+                                        return (jsx(RadioCardItem, { label: tagName, value: id, flex: '0 0 0%', disabled: true }, `${tagName}-${id}`));
                                     }
-                                    return (jsx(RadioCardItem, { label: tagName, value: id, flex: "0 0 0%", colorPalette: "blue" }, `${tagName}-${id}`));
+                                    return (jsx(RadioCardItem, { label: tagName, value: id, flex: '0 0 0%', colorPalette: 'blue' }, `${tagName}-${id}`));
                                 }) }) })), !is_mutually_exclusive && (jsx(CheckboxGroup, { onValueChange: (tagIds) => {
                                 setValue(`${column}.${parent_tag_name}.current`, tagIds);
-                            }, children: jsx(Flex, { flexFlow: "wrap", gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
+                            }, children: jsx(Flex, { flexFlow: 'wrap', gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
                                     if (existingTagList.some(({ tag_id }) => tag_id === id)) {
-                                        return (jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%", disabled: true, colorPalette: "blue" }, `${tagName}-${id}`));
+                                        return (jsx(CheckboxCard, { label: tagName, value: id, flex: '0 0 0%', disabled: true, colorPalette: 'blue' }, `${tagName}-${id}`));
                                     }
-                                    return (jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%" }, `${tagName}-${id}`));
+                                    return (jsx(CheckboxCard, { label: tagName, value: id, flex: '0 0 0%' }, `${tagName}-${id}`));
                                 }) }) }))] }, `tag-${parent_tag_name}`));
-            }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
+            }), errors[`${column}`] && (jsx(Text, { color: 'red.400', children: (errors[`${column}`]?.message ?? 'No error message') }))] }));
 };
 
 const Textarea = forwardRef(({ value, defaultValue, placeholder, onChange, onFocus, onBlur, disabled = false, readOnly = false, className, rows = 4, maxLength, autoFocus = false, invalid = false, required = false, label, helperText, errorText, ...props }, ref) => {
@@ -7974,31 +7892,35 @@ const StringViewer = ({ column, schema, prefix, }) => {
 
 const TagViewer = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
-    const { serverUrl } = useSchemaContext();
     if (schema.properties == undefined) {
-        throw new Error("schema properties undefined when using DatePicker");
+        throw new Error('schema properties undefined when using DatePicker');
     }
-    const { gridColumn, gridRow, in_table, object_id_column } = schema;
+    const { gridColumn, gridRow, in_table, object_id_column, tagPicker } = schema;
     if (in_table === undefined) {
-        throw new Error("in_table is undefined when using TagPicker");
+        throw new Error('in_table is undefined when using TagPicker');
     }
     if (object_id_column === undefined) {
-        throw new Error("object_id_column is undefined when using TagPicker");
+        throw new Error('object_id_column is undefined when using TagPicker');
+    }
+    if (!tagPicker?.queryFn) {
+        throw new Error('tagPicker.queryFn is required in schema. serverUrl has been removed.');
     }
     const query = useQuery({
         queryKey: [`tagpicker`, in_table],
         queryFn: async () => {
-            return await getTableData({
-                serverUrl,
-                in_table: "tables_tags_view",
+            const result = await tagPicker.queryFn({
+                in_table: 'tables_tags_view',
                 where: [
                     {
-                        id: "table_name",
+                        id: 'table_name',
                         value: [in_table],
                     },
                 ],
                 limit: 100,
+                offset: 0,
+                searching: '',
             });
+            return result.data || { data: [] };
         },
         staleTime: 10000,
     });
@@ -8006,17 +7928,19 @@ const TagViewer = ({ column, schema, prefix }) => {
     const existingTagsQuery = useQuery({
         queryKey: [`existing`, { in_table, object_id_column }, object_id],
         queryFn: async () => {
-            return await getTableData({
-                serverUrl,
+            const result = await tagPicker.queryFn({
                 in_table: in_table,
                 where: [
                     {
                         id: object_id_column,
-                        value: object_id[0],
+                        value: [object_id[0]],
                     },
                 ],
                 limit: 100,
+                offset: 0,
+                searching: '',
             });
+            return result.data || { data: [] };
         },
         enabled: object_id != undefined,
         staleTime: 10000,
@@ -8027,9 +7951,9 @@ const TagViewer = ({ column, schema, prefix }) => {
     if (!!object_id === false) {
         return jsx(Fragment, {});
     }
-    return (jsxs(Flex, { flexFlow: "column", gap: 4, gridColumn,
+    return (jsxs(Flex, { flexFlow: 'column', gap: 4, gridColumn,
         gridRow, children: [isFetching && jsx(Fragment, { children: "isFetching" }), isLoading && jsx(Fragment, { children: "isLoading" }), isPending && jsx(Fragment, { children: "isPending" }), isError && jsx(Fragment, { children: "isError" }), dataList.map(({ parent_tag_name, all_tags, is_mutually_exclusive }) => {
-                return (jsxs(Flex, { flexFlow: "column", gap: 2, children: [jsx(Text, { children: parent_tag_name }), is_mutually_exclusive && (jsx(RadioCardRoot, { defaultValue: "next", variant: "surface", onValueChange: (tagIds) => {
+                return (jsxs(Flex, { flexFlow: 'column', gap: 2, children: [jsx(Text, { children: parent_tag_name }), is_mutually_exclusive && (jsx(RadioCardRoot, { defaultValue: "next", variant: 'surface', onValueChange: (tagIds) => {
                                 const existedTags = Object.values(all_tags)
                                     .filter(({ id }) => {
                                     return existingTagList.some(({ tag_id }) => tag_id === id);
@@ -8041,20 +7965,20 @@ const TagViewer = ({ column, schema, prefix }) => {
                                     tagIds.value,
                                 ]);
                                 setValue(`${column}.${parent_tag_name}.old`, existedTags);
-                            }, children: jsx(Flex, { flexFlow: "wrap", gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
+                            }, children: jsx(Flex, { flexFlow: 'wrap', gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
                                     if (existingTagList.some(({ tag_id }) => tag_id === id)) {
-                                        return (jsx(RadioCardItem, { label: tagName, value: id, flex: "0 0 0%", disabled: true }, `${tagName}-${id}`));
+                                        return (jsx(RadioCardItem, { label: tagName, value: id, flex: '0 0 0%', disabled: true }, `${tagName}-${id}`));
                                     }
-                                    return (jsx(RadioCardItem, { label: tagName, value: id, flex: "0 0 0%", colorPalette: "blue" }, `${tagName}-${id}`));
+                                    return (jsx(RadioCardItem, { label: tagName, value: id, flex: '0 0 0%', colorPalette: 'blue' }, `${tagName}-${id}`));
                                 }) }) })), !is_mutually_exclusive && (jsx(CheckboxGroup, { onValueChange: (tagIds) => {
                                 setValue(`${column}.${parent_tag_name}.current`, tagIds);
-                            }, children: jsx(Flex, { flexFlow: "wrap", gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
+                            }, children: jsx(Flex, { flexFlow: 'wrap', gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
                                     if (existingTagList.some(({ tag_id }) => tag_id === id)) {
-                                        return (jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%", disabled: true, colorPalette: "blue" }, `${tagName}-${id}`));
+                                        return (jsx(CheckboxCard, { label: tagName, value: id, flex: '0 0 0%', disabled: true, colorPalette: 'blue' }, `${tagName}-${id}`));
                                     }
-                                    return (jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%" }, `${tagName}-${id}`));
+                                    return (jsx(CheckboxCard, { label: tagName, value: id, flex: '0 0 0%' }, `${tagName}-${id}`));
                                 }) }) }))] }, `tag-${parent_tag_name}`));
-            }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
+            }), errors[`${column}`] && (jsx(Text, { color: 'red.400', children: (errors[`${column}`]?.message ?? 'No error message') }))] }));
 };
 
 const TextAreaViewer = ({ column, schema, prefix, }) => {

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

@@ -6,7 +6,6 @@ import { Translate } from './useForm';
 import { DateTimePickerLabels, IdPickerLabels, EnumPickerLabels, FilePickerLabels, FormButtonLabels, TimePickerLabels } from './components/types/CustomJSONSchema7';
 export interface SchemaFormContext<TData extends FieldValues> {
     schema: JSONSchema7;
-    serverUrl: string;
     requestUrl: string;
     order: string[];
     ignore: string[];

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

@@ -7,7 +7,6 @@ import { Translate } from '../../useForm';
 import { CustomJSONSchema7, DateTimePickerLabels, IdPickerLabels, EnumPickerLabels, FilePickerLabels, FormButtonLabels, TimePickerLabels } from '../types/CustomJSONSchema7';
 export interface FormRootProps<TData extends FieldValues> {
     schema: CustomJSONSchema7;
-    serverUrl: string;
     requestUrl?: string;
     idMap: Record<string, object>;
     setIdMap: Dispatch<SetStateAction<Record<string, object>>>;
@@ -51,4 +50,4 @@ export declare const idPickerSanityCheck: (column: string, foreign_key?: {
     table?: string | undefined;
     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, requireConfirmation, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog, }: FormRootProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, requireConfirmation, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog, }: FormRootProps<TData>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { TagPickerProps } from "../types/CustomJSONSchema7";
+import { TagPickerProps } from '../types/CustomJSONSchema7';
 export interface Tag {
     id: string;
     name: string;

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

@@ -1,30 +1,9 @@
 import React from 'react';
-import { ForeignKeyProps } from './StringInputField';
-import { CustomJSONSchema7 } from '../types/CustomJSONSchema7';
+import { CustomJSONSchema7, LoadInitialValuesParams, LoadInitialValuesResult } from '../types/CustomJSONSchema7';
 export interface RecordType {
     [key: string]: any;
 }
-export interface LoadInitialValuesParams {
-    ids: string[];
-    foreign_key: ForeignKeyProps;
-    serverUrl: string;
-    setIdMap: React.Dispatch<React.SetStateAction<Record<string, object>>>;
-}
-export interface LoadInitialValuesResult {
-    data: {
-        data: RecordType[];
-        count: number;
-    };
-    idMap: Record<string, object>;
-}
-/**
- * Load initial values for IdPicker fields into idMap
- * Uses customQueryFn if available, otherwise falls back to getTableData
- *
- * @param params - Configuration for loading initial values
- * @returns Promise with fetched data and idMap
- */
-export declare const loadInitialValues: ({ ids, foreign_key, serverUrl, setIdMap, }: LoadInitialValuesParams) => Promise<LoadInitialValuesResult>;
+export type { LoadInitialValuesParams, LoadInitialValuesResult, } from '../types/CustomJSONSchema7';
 export interface UseIdPickerDataProps {
     column: string;
     schema: CustomJSONSchema7;
@@ -61,6 +40,7 @@ export interface UseIdPickerDataReturn {
     idPickerLabels: any;
     insideDialog: boolean;
     renderDisplay: ((item: RecordType) => React.ReactNode) | undefined;
+    loadInitialValues: (params: LoadInitialValuesParams) => Promise<LoadInitialValuesResult>;
     column_ref: string;
     errors: any;
     setValue: (name: string, value: any) => void;

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

@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 import { ForeignKeyProps } from '../fields/StringInputField';
 import { UseFormReturn } from 'react-hook-form';
 import { ValidationErrorType } from '../../utils/buildErrorMessages';
+import React from 'react';
 export interface DateTimePickerLabels {
     monthNamesShort?: string[];
     weekdayNamesShort?: string[];
@@ -60,12 +61,25 @@ export interface TimePickerLabels {
     placeholder?: string;
     emptyMessage?: string;
 }
+export interface LoadInitialValuesParams {
+    ids: string[];
+    foreign_key: ForeignKeyProps;
+    setIdMap: React.Dispatch<React.SetStateAction<Record<string, object>>>;
+}
+export interface LoadInitialValuesResult {
+    data: {
+        data: Record<string, any>[];
+        count: number;
+    };
+    idMap: Record<string, object>;
+}
 export interface CustomJSONSchema7 extends JSONSchema7 {
     gridColumn?: string;
     gridRow?: string;
     foreign_key?: ForeignKeyProps;
     variant?: string;
     renderDisplay?: (item: unknown) => ReactNode;
+    loadInitialValues?: (params: LoadInitialValuesParams) => Promise<LoadInitialValuesResult>;
     inputRender?: (props: {
         column: string;
         schema: CustomJSONSchema7;
@@ -87,6 +101,24 @@ export interface CustomJSONSchema7 extends JSONSchema7 {
     numberStorageType?: 'string' | 'number';
     errorMessages?: Partial<Record<ValidationErrorType | string, string>>;
     filePicker?: FilePickerProps;
+    tagPicker?: {
+        queryFn?: (params: {
+            in_table: string;
+            where?: {
+                id: string;
+                value: string[];
+            }[];
+            limit?: number;
+            offset?: number;
+            searching?: string;
+        }) => Promise<{
+            data: {
+                data: any[];
+                count: number;
+            };
+            idMap?: Record<string, object>;
+        }>;
+    };
 }
 export declare const defaultRenderDisplay: (item: unknown) => ReactNode;
 export interface TagPickerProps {

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

@@ -1,4 +1,4 @@
-import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
+import { CustomJSONSchema7 } from '../types/CustomJSONSchema7';
 export interface Tag {
     id: string;
     name: string;

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

@@ -1,5 +1,4 @@
 export interface GetTableDataConfig {
-    serverUrl: string;
     in_table: string;
     limit?: number;
     offset?: number;
@@ -13,4 +12,4 @@ export interface GetTableResponse {
     data?: object[];
     count: number;
 }
-export declare const getTableData: ({ serverUrl, in_table, searching, where, limit, offset, }: GetTableDataConfig) => Promise<any>;
+export declare const getTableData: ({ in_table, searching, where, limit, offset, }: GetTableDataConfig) => Promise<never>;

package/package.json

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