npm - @bsol-oss/react-datatable5 - Versions diffs - 13.0.1-beta.1 → 13.0.1-beta.2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/index.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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: schemaLoadInitialValues, 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) {
+        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('');
@@ -5770,11 +5684,13 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
             if (missingIds.length === 0) {
                 return { data: [], count: 0 };
             }
-            // Use the reusable loadInitialValues function
-            const result = await loadInitialValues({
+            // Use schema's loadInitialValues (required for id-picker)
+            if (!schemaLoadInitialValues) {
+                throw new Error(`loadInitialValues is required in schema for IdPicker field '${column}'.`);
+            }
+            const result = await schemaLoadInitialValues({
                 ids: missingIds,
                 foreign_key: foreign_key,
-                serverUrl,
                 setIdMap,
             });
             return result.data;
@@ -5787,35 +5703,21 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
     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 +5841,7 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
         idPickerLabels,
         insideDialog: insideDialog ?? false,
         renderDisplay,
+        loadInitialValues: schemaLoadInitialValues, // Required for id-picker, checked above
         column_ref,
         errors,
         setValue,
@@ -6232,31 +6135,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 +6171,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 +6194,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 +6208,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 +7903,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 +7939,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 +7962,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 +7976,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 CHANGED Viewed

@@ -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: schemaLoadInitialValues, 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) {
+        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('');
@@ -5750,11 +5664,13 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
             if (missingIds.length === 0) {
                 return { data: [], count: 0 };
             }
-            // Use the reusable loadInitialValues function
-            const result = await loadInitialValues({
+            // Use schema's loadInitialValues (required for id-picker)
+            if (!schemaLoadInitialValues) {
+                throw new Error(`loadInitialValues is required in schema for IdPicker field '${column}'.`);
+            }
+            const result = await schemaLoadInitialValues({
                 ids: missingIds,
                 foreign_key: foreign_key,
-                serverUrl,
                 setIdMap,
             });
             return result.data;
@@ -5767,35 +5683,21 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
     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 +5821,7 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
         idPickerLabels,
         insideDialog: insideDialog ?? false,
         renderDisplay,
+        loadInitialValues: schemaLoadInitialValues, // Required for id-picker, checked above
         column_ref,
         errors,
         setValue,
@@ -6212,31 +6115,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 +6151,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 +6174,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 +6188,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 +7883,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 +7919,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 +7942,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 +7956,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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