@bsol-oss/react-datatable5 13.0.1-beta.21 → 13.0.1-beta.22

package/dist/index.d.ts

@@ -7,8 +7,8 @@ import { TableHeaderProps as TableHeaderProps$1, TableRowProps, GridProps, Table
 import { IconType } from 'react-icons';
 import { UseQueryResult } from '@tanstack/react-query';
 import { RankingInfo } from '@tanstack/match-sorter-utils';
-import { JSONSchema7 } from 'json-schema';
 import { AxiosRequestConfig } from 'axios';
+import { JSONSchema7 } from 'json-schema';
 import * as react_hook_form from 'react-hook-form';
 import { UseFormReturn, FieldValues, SubmitHandler } from 'react-hook-form';
 
@@ -488,19 +488,6 @@ interface DataTableContextProps<TData = unknown> extends Omit<DataTableProps, 't
 
 declare const useDataTableContext: <TData>() => DataTableContextProps<TData>;
 
-interface GetColumnsConfigs<K extends RowData> {
-    schema: JSONSchema7;
-    include?: K[];
-    ignore?: K[];
-    width?: number[];
-    meta?: {
-        [key in K as string]?: object;
-    };
-    defaultWidth?: number;
-}
-declare const widthSanityCheck: <K extends unknown>(widthList: number[], ignoreList: K[], properties: { [key in K as string]?: object | undefined; }) => void;
-declare const getColumns: <TData extends unknown>({ schema, include, ignore, width, meta, defaultWidth, }: GetColumnsConfigs<TData>) => ColumnDef<TData>[];
-
 interface CustomQueryFnResponse {
     /**
      * The data of the query
@@ -591,7 +578,6 @@ interface TimePickerLabels {
 interface LoadInitialValuesParams {
     ids: string[];
     customQueryFn: CustomQueryFn;
-    idColumn: string;
     setIdMap: React__default.Dispatch<React__default.SetStateAction<Record<string, object>>>;
 }
 interface LoadInitialValuesResult {
@@ -605,7 +591,6 @@ interface CustomJSONSchema7 extends JSONSchema7 {
     gridColumn?: string;
     gridRow?: string;
     customQueryFn?: CustomQueryFn;
-    idColumn?: string;
     variant?: string;
     renderDisplay?: (item: unknown) => ReactNode;
     itemToValue?: (item: unknown) => string;
@@ -740,10 +725,8 @@ interface CustomJSONSchema7Definition extends JSONSchema7 {
     gridColumn: string;
     gridRow: string;
     customQueryFn: any;
-    idColumn: string;
     children: ReactNode;
 }
-declare const idPickerSanityCheck: (column: string, customQueryFn?: any, idColumn?: string) => void;
 declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
 
 interface DefaultFormProps<TData extends FieldValues> {
@@ -1253,4 +1236,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, DatePickerContext, 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 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, type TableFilterTagsProps, 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, 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, DatePickerContext, 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 FilePickerLabels, type FilePickerMediaFile, type FilePickerProps, FilterDialog, FormBody, type FormButtonLabels, FormRoot, type FormRootProps, FormTitle, 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, type TableFilterTagsProps, 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, defaultRenderDisplay, getMultiDates, getRangeDates, useDataTable, useDataTableContext, useDataTableServer, useForm };

package/dist/index.js

@@ -4186,88 +4186,6 @@ const useDataTableServer = (props) => {
     };
 };
 
-const idListSanityCheck = (param, idList, properties) => {
-    const allKeyExists = idList.every((key) => Object.keys(properties).some((column) => column == key));
-    if (!allKeyExists) {
-        const wrongKey = idList.find((key) => !Object.keys(properties).some((column) => column == key));
-        throw new Error(`The key ${wrongKey} in ${param} does not exist in schema.`);
-    }
-};
-
-const snakeToLabel = (str) => {
-    return str
-        .split("_") // Split by underscore
-        .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) // Capitalize each word
-        .join(" "); // Join with space
-};
-
-const RecordDisplay = ({ object, boxProps, prefix = '', }) => {
-    const getColumn = ({ field }) => {
-        return snakeToLabel(field);
-    };
-    if (object === null) {
-        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "null" });
-    }
-    return (jsxRuntime.jsx(react.Grid, { rowGap: 1, padding: 1, overflow: 'auto', ...boxProps, children: Object.entries(object).map(([field, value], index) => {
-            const uniqueKey = `${prefix}${field}-${index}`;
-            return (jsxRuntime.jsxs(react.Grid, { columnGap: 2, gridTemplateColumns: 'auto 1fr', children: [jsxRuntime.jsx(react.Text, { color: 'colorPalette.400', children: getColumn({ field }) }), typeof value === 'object' && value !== null ? (jsxRuntime.jsx(RecordDisplay, { object: value, prefix: `${prefix}${field}.` })) : (jsxRuntime.jsx(react.Text, { children: JSON.stringify(value) }))] }, uniqueKey));
-        }) }));
-};
-
-const widthSanityCheck = (widthList, ignoreList, properties) => {
-    const widthListToolong = widthList.length > Object.keys(properties).length;
-    if (widthListToolong) {
-        throw new Error(`The width list is too long given from the number of properties.`);
-    }
-    const widthListToolongWithIgnore = widthList.length > Object.keys(properties).length - ignoreList.length;
-    if (widthListToolongWithIgnore) {
-        throw new Error(`The width list is too long given from the number of remaining properties after ignore some.`);
-    }
-};
-const getColumns = ({ schema, include = [], ignore = [], width = [], meta = {}, defaultWidth = 400, }) => {
-    const { properties } = schema;
-    idListSanityCheck('ignore', ignore, properties);
-    widthSanityCheck(width, ignore, properties);
-    idListSanityCheck('meta', Object.keys(meta), properties);
-    const getColumn = ({ column }) => {
-        return snakeToLabel(column);
-    };
-    const keys = Object.keys(properties);
-    const included = include.length > 0 ? include : keys;
-    const ignored = included.filter((key) => {
-        return !ignore.some((shouldIgnoreKey) => key === shouldIgnoreKey);
-    });
-    const columnHelper = reactTable.createColumnHelper();
-    const columns = [
-        ...ignored.map((column, index) => {
-            // @ts-expect-error column accessor type issue with generic TData
-            return columnHelper.accessor(column, {
-                cell: (props) => {
-                    // @ts-expect-error find type for unknown
-                    const value = props.row.original[column];
-                    if (typeof value === 'object') {
-                        return (jsxRuntime.jsx(react.Grid, { overflow: 'auto', children: jsxRuntime.jsx(RecordDisplay, { object: value }) }));
-                    }
-                    return jsxRuntime.jsx(TextCell, { children: value });
-                },
-                header: (columnHeader) => {
-                    const displayName = columnHeader.column.columnDef.meta?.displayName ??
-                        getColumn({ column });
-                    return jsxRuntime.jsx("span", { children: displayName });
-                },
-                footer: (columnFooter) => {
-                    const displayName = columnFooter.column.columnDef.meta?.displayName ??
-                        getColumn({ column });
-                    return jsxRuntime.jsx("span", { children: displayName });
-                },
-                size: width[index] ?? defaultWidth,
-                meta: Object.keys(meta).length > 0 ? meta[column] : {},
-            });
-        }),
-    ];
-    return columns;
-};
-
 //@ts-expect-error TODO: find appropriate type
 const SchemaFormContext = React.createContext({
     schema: {},
@@ -4291,114 +4209,6 @@ const useSchemaContext = () => {
     return React.useContext(SchemaFormContext);
 };
 
-const clearEmptyString = (object) => {
-    return Object.fromEntries(Object.entries(object).filter(([, value]) => value !== ""));
-};
-
-const idPickerSanityCheck = (column, customQueryFn, idColumn) => {
-    if (!customQueryFn) {
-        throw new Error(`customQueryFn is required in properties of column ${column} when using id-picker.`);
-    }
-    if (!idColumn) {
-        throw new Error(`idColumn is required in properties of column ${column} when using id-picker.`);
-    }
-};
-const FormRoot = ({ schema, idMap, setIdMap, form, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, customErrorRenderer, customSuccessRenderer, displayConfig = {
-    showSubmitButton: true,
-    showResetButton: true,
-    showTitle: true,
-}, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog = false, }) => {
-    const [isSuccess, setIsSuccess] = React.useState(false);
-    const [isError, setIsError] = React.useState(false);
-    const [isSubmiting, setIsSubmiting] = React.useState(false);
-    const [validatedData, setValidatedData] = React.useState();
-    const [error, setError] = React.useState();
-    const onBeforeSubmit = () => {
-        setIsSubmiting(true);
-    };
-    const onAfterSubmit = () => {
-        setIsSubmiting(false);
-    };
-    const onSubmitError = (error) => {
-        setIsError(true);
-        setError(error);
-    };
-    const onSubmitSuccess = () => {
-        setIsSuccess(true);
-    };
-    const defaultOnSubmit = async (promise) => {
-        try {
-            console.log('onBeforeSubmit');
-            onBeforeSubmit();
-            await promise;
-            console.log('onSubmitSuccess');
-            onSubmitSuccess();
-        }
-        catch (error) {
-            console.log('onSubmitError', error);
-            onSubmitError(error);
-        }
-        finally {
-            onAfterSubmit();
-        }
-    };
-    const defaultSubmitPromise = (data) => {
-        if (!requestOptions.url) {
-            throw new Error('requestOptions.url is required when onSubmit is not provided');
-        }
-        const options = {
-            method: 'POST',
-            data: clearEmptyString(data),
-            ...requestOptions,
-        };
-        return axios.request(options);
-    };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const onFormSubmit = async (data) => {
-        // Validation is handled by react-hook-form
-        // This function will only be called if validation passes
-        if (onSubmit === undefined) {
-            await defaultOnSubmit(Promise.resolve(defaultSubmitPromise(data)));
-            return;
-        }
-        await defaultOnSubmit(Promise.resolve(onSubmit(data)));
-    };
-    return (jsxRuntime.jsx(SchemaFormContext.Provider, { value: {
-            schema,
-            order,
-            ignore,
-            include,
-            // @ts-expect-error TODO: find appropriate types
-            onSubmit,
-            rowNumber,
-            idMap,
-            setIdMap,
-            requestOptions,
-            isSuccess,
-            setIsSuccess,
-            isError,
-            setIsError,
-            isSubmiting,
-            setIsSubmiting,
-            validatedData,
-            setValidatedData,
-            error,
-            setError,
-            getUpdatedData,
-            customErrorRenderer,
-            customSuccessRenderer,
-            displayConfig,
-            onFormSubmit,
-            dateTimePickerLabels,
-            idPickerLabels,
-            enumPickerLabels,
-            filePickerLabels,
-            formButtonLabels,
-            timePickerLabels,
-            insideDialog,
-        }, children: jsxRuntime.jsx(reactHookForm.FormProvider, { ...form, children: children }) }));
-};
-
 const useFormLabel = (column, prefix = '', schema) => {
     const colLabel = `${prefix}${column}`;
     return {
@@ -6012,13 +5822,12 @@ const defaultRenderDisplay = (item) => {
 const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
     const { watch, getValues, formState: { errors }, setValue, } = reactHookForm.useFormContext();
     const { idMap, setIdMap, idPickerLabels, insideDialog } = useSchemaContext();
-    const { renderDisplay, itemToValue: schemaItemToValue, loadInitialValues, customQueryFn, idColumn, variant, } = schema;
+    const { renderDisplay, itemToValue: schemaItemToValue, loadInitialValues, customQueryFn, variant, } = schema;
     // loadInitialValues should 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) {
         console.warn(`loadInitialValues is recommended in schema for IdPicker field '${column}'. Please provide loadInitialValues function in the schema to load records for human-readable display.`);
     }
-    const column_ref = idColumn || 'id';
     const [searchText, setSearchText] = React.useState('');
     const debouncedSearchText = usehooks.useDebounce(searchText, 300);
     const [limit] = React.useState(50); // Increased limit for combobox
@@ -6078,7 +5887,6 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
             const result = await loadInitialValues({
                 ids: missingIds,
                 customQueryFn: customQueryFn,
-                idColumn: column_ref,
                 setIdMap,
             });
             return result.data;
@@ -6139,12 +5947,15 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
         // Depend on idMapKey which only changes when items we care about change
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentValueKey, idMapKey]);
-    // Default itemToValue function: extract value from item using column_ref
-    const defaultItemToValue = (item) => String(item[column_ref]);
-    // Use schema's itemToValue if provided, otherwise use default
+    // Use schema's itemToValue if provided, otherwise throw error
+    // schemaItemToValue should be provided in schema for id-picker fields
     const itemToValueFn = schemaItemToValue
         ? (item) => schemaItemToValue(item)
-        : defaultItemToValue;
+        : (item) => {
+            console.warn(`itemToValue is required in schema for IdPicker field '${column}'. Please provide itemToValue function in the schema. Currently trying to get 'id' field as last resort`);
+            // Fallback: try to get 'id' field as last resort
+            return String(item?.id ?? item);
+        };
     // itemToString function: convert item to readable string using renderDisplay
     // This ensures items can always be displayed as readable strings in the combobox
     const renderFn = renderDisplay || defaultRenderDisplay;
@@ -6206,7 +6017,7 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
         })
             .filter((item) => item !== null);
         return [...itemsFromIdMap, ...itemsFromDataList];
-    }, [dataList, column_ref, renderDisplay, idMapItems, itemToValueFn]);
+    }, [dataList, renderDisplay, idMapItems, itemToValueFn]);
     // Use filter hook for combobox
     const { contains } = react.useFilter({ sensitivity: 'base' });
     // Create collection for combobox
@@ -6272,7 +6083,6 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
         itemToString: itemToStringFn,
         loadInitialValues: loadInitialValues ??
             (async () => ({ data: { data: [], count: 0 }, idMap: {} })), // Fallback if not provided
-        column_ref,
         errors,
         setValue,
     };
@@ -8121,7 +7931,7 @@ const DateTimePicker = ({ column, schema, prefix, }) => {
 
 const SchemaRenderer = ({ schema, prefix, column, }) => {
     const colSchema = schema;
-    const { type, variant, properties: innerProperties, customQueryFn, idColumn, format, items, } = schema;
+    const { type, variant, properties: innerProperties, format, items } = schema;
     if (variant === 'custom-input') {
         return jsxRuntime.jsx(CustomInput, { schema: colSchema, prefix, column });
     }
@@ -8130,7 +7940,6 @@ const SchemaRenderer = ({ schema, prefix, column, }) => {
             return jsxRuntime.jsx(EnumPicker, { schema: colSchema, prefix, column });
         }
         if (variant === 'id-picker') {
-            idPickerSanityCheck(column, customQueryFn, idColumn);
             return jsxRuntime.jsx(IdPickerSingle, { schema: colSchema, prefix, column });
         }
         if (format === 'date') {
@@ -8164,7 +7973,6 @@ const SchemaRenderer = ({ schema, prefix, column, }) => {
     }
     if (type === 'array') {
         if (variant === 'id-picker') {
-            idPickerSanityCheck(column, customQueryFn, idColumn);
             return jsxRuntime.jsx(IdPickerMultiple, { schema: colSchema, prefix, column });
         }
         if (variant === 'tag-picker') {
@@ -8278,6 +8086,106 @@ const FormTitle = () => {
     return jsxRuntime.jsx(react.Heading, { children: schema.title ?? 'Form' });
 };
 
+const clearEmptyString = (object) => {
+    return Object.fromEntries(Object.entries(object).filter(([, value]) => value !== ""));
+};
+
+const FormRoot = ({ schema, idMap, setIdMap, form, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, customErrorRenderer, customSuccessRenderer, displayConfig = {
+    showSubmitButton: true,
+    showResetButton: true,
+    showTitle: true,
+}, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog = false, }) => {
+    const [isSuccess, setIsSuccess] = React.useState(false);
+    const [isError, setIsError] = React.useState(false);
+    const [isSubmiting, setIsSubmiting] = React.useState(false);
+    const [validatedData, setValidatedData] = React.useState();
+    const [error, setError] = React.useState();
+    const onBeforeSubmit = () => {
+        setIsSubmiting(true);
+    };
+    const onAfterSubmit = () => {
+        setIsSubmiting(false);
+    };
+    const onSubmitError = (error) => {
+        setIsError(true);
+        setError(error);
+    };
+    const onSubmitSuccess = () => {
+        setIsSuccess(true);
+    };
+    const defaultOnSubmit = async (promise) => {
+        try {
+            console.log('onBeforeSubmit');
+            onBeforeSubmit();
+            await promise;
+            console.log('onSubmitSuccess');
+            onSubmitSuccess();
+        }
+        catch (error) {
+            console.log('onSubmitError', error);
+            onSubmitError(error);
+        }
+        finally {
+            onAfterSubmit();
+        }
+    };
+    const defaultSubmitPromise = (data) => {
+        if (!requestOptions.url) {
+            throw new Error('requestOptions.url is required when onSubmit is not provided');
+        }
+        const options = {
+            method: 'POST',
+            data: clearEmptyString(data),
+            ...requestOptions,
+        };
+        return axios.request(options);
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const onFormSubmit = async (data) => {
+        // Validation is handled by react-hook-form
+        // This function will only be called if validation passes
+        if (onSubmit === undefined) {
+            await defaultOnSubmit(Promise.resolve(defaultSubmitPromise(data)));
+            return;
+        }
+        await defaultOnSubmit(Promise.resolve(onSubmit(data)));
+    };
+    return (jsxRuntime.jsx(SchemaFormContext.Provider, { value: {
+            schema,
+            order,
+            ignore,
+            include,
+            // @ts-expect-error TODO: find appropriate types
+            onSubmit,
+            rowNumber,
+            idMap,
+            setIdMap,
+            requestOptions,
+            isSuccess,
+            setIsSuccess,
+            isError,
+            setIsError,
+            isSubmiting,
+            setIsSubmiting,
+            validatedData,
+            setValidatedData,
+            error,
+            setError,
+            getUpdatedData,
+            customErrorRenderer,
+            customSuccessRenderer,
+            displayConfig,
+            onFormSubmit,
+            dateTimePickerLabels,
+            idPickerLabels,
+            enumPickerLabels,
+            filePickerLabels,
+            formButtonLabels,
+            timePickerLabels,
+            insideDialog,
+        }, children: jsxRuntime.jsx(reactHookForm.FormProvider, { ...form, children: children }) }));
+};
+
 const DefaultForm = ({ formConfig, }) => {
     const { showTitle } = formConfig.displayConfig ?? {};
     return (jsxRuntime.jsx(FormRoot, { ...formConfig, children: jsxRuntime.jsxs(react.Grid, { gap: "2", children: [showTitle && jsxRuntime.jsx(FormTitle, {}), jsxRuntime.jsx(FormBody, {})] }) }));
@@ -8526,6 +8434,26 @@ const getMultiDates = ({ selected, selectedDate, selectedDates, selectable, }) =
     }
 };
 
+const snakeToLabel = (str) => {
+    return str
+        .split("_") // Split by underscore
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) // Capitalize each word
+        .join(" "); // Join with space
+};
+
+const RecordDisplay = ({ object, boxProps, prefix = '', }) => {
+    const getColumn = ({ field }) => {
+        return snakeToLabel(field);
+    };
+    if (object === null) {
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "null" });
+    }
+    return (jsxRuntime.jsx(react.Grid, { rowGap: 1, padding: 1, overflow: 'auto', ...boxProps, children: Object.entries(object).map(([field, value], index) => {
+            const uniqueKey = `${prefix}${field}-${index}`;
+            return (jsxRuntime.jsxs(react.Grid, { columnGap: 2, gridTemplateColumns: 'auto 1fr', children: [jsxRuntime.jsx(react.Text, { color: 'colorPalette.400', children: getColumn({ field }) }), typeof value === 'object' && value !== null ? (jsxRuntime.jsx(RecordDisplay, { object: value, prefix: `${prefix}${field}.` })) : (jsxRuntime.jsx(react.Text, { children: JSON.stringify(value) }))] }, uniqueKey));
+        }) }));
+};
+
 const TableDataDisplay = ({ colorPalette, emptyComponent, }) => {
     const { columns, data } = useDataTableContext();
     const columnsMap = Object.fromEntries(columns.map((def) => {
@@ -9457,12 +9385,9 @@ exports.TableViewer = TableViewer;
 exports.TextCell = TextCell;
 exports.ViewDialog = ViewDialog;
 exports.defaultRenderDisplay = defaultRenderDisplay;
-exports.getColumns = getColumns;
 exports.getMultiDates = getMultiDates;
 exports.getRangeDates = getRangeDates;
-exports.idPickerSanityCheck = idPickerSanityCheck;
 exports.useDataTable = useDataTable;
 exports.useDataTableContext = useDataTableContext;
 exports.useDataTableServer = useDataTableServer;
 exports.useForm = useForm;
-exports.widthSanityCheck = widthSanityCheck;

package/dist/index.mjs

@@ -21,10 +21,10 @@ import { IoReload } from 'react-icons/io5';
 import { useDebounce } from '@uidotdev/usehooks';
 import { BsExclamationCircleFill, BsClock } from 'react-icons/bs';
 import { HiColorSwatch } from 'react-icons/hi';
-import { flexRender, createColumnHelper, makeStateUpdater, functionalUpdate, useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel } from '@tanstack/react-table';
+import { flexRender, makeStateUpdater, functionalUpdate, useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel } from '@tanstack/react-table';
 import { GrAscend, GrDescend } from 'react-icons/gr';
 import axios from 'axios';
-import { FormProvider, useFormContext, useForm as useForm$1 } from 'react-hook-form';
+import { useFormContext, FormProvider, useForm as useForm$1 } from 'react-hook-form';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import timezone from 'dayjs/plugin/timezone';
@@ -4166,88 +4166,6 @@ const useDataTableServer = (props) => {
     };
 };
 
-const idListSanityCheck = (param, idList, properties) => {
-    const allKeyExists = idList.every((key) => Object.keys(properties).some((column) => column == key));
-    if (!allKeyExists) {
-        const wrongKey = idList.find((key) => !Object.keys(properties).some((column) => column == key));
-        throw new Error(`The key ${wrongKey} in ${param} does not exist in schema.`);
-    }
-};
-
-const snakeToLabel = (str) => {
-    return str
-        .split("_") // Split by underscore
-        .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) // Capitalize each word
-        .join(" "); // Join with space
-};
-
-const RecordDisplay = ({ object, boxProps, prefix = '', }) => {
-    const getColumn = ({ field }) => {
-        return snakeToLabel(field);
-    };
-    if (object === null) {
-        return jsx(Fragment, { children: "null" });
-    }
-    return (jsx(Grid, { rowGap: 1, padding: 1, overflow: 'auto', ...boxProps, children: Object.entries(object).map(([field, value], index) => {
-            const uniqueKey = `${prefix}${field}-${index}`;
-            return (jsxs(Grid, { columnGap: 2, gridTemplateColumns: 'auto 1fr', children: [jsx(Text, { color: 'colorPalette.400', children: getColumn({ field }) }), typeof value === 'object' && value !== null ? (jsx(RecordDisplay, { object: value, prefix: `${prefix}${field}.` })) : (jsx(Text, { children: JSON.stringify(value) }))] }, uniqueKey));
-        }) }));
-};
-
-const widthSanityCheck = (widthList, ignoreList, properties) => {
-    const widthListToolong = widthList.length > Object.keys(properties).length;
-    if (widthListToolong) {
-        throw new Error(`The width list is too long given from the number of properties.`);
-    }
-    const widthListToolongWithIgnore = widthList.length > Object.keys(properties).length - ignoreList.length;
-    if (widthListToolongWithIgnore) {
-        throw new Error(`The width list is too long given from the number of remaining properties after ignore some.`);
-    }
-};
-const getColumns = ({ schema, include = [], ignore = [], width = [], meta = {}, defaultWidth = 400, }) => {
-    const { properties } = schema;
-    idListSanityCheck('ignore', ignore, properties);
-    widthSanityCheck(width, ignore, properties);
-    idListSanityCheck('meta', Object.keys(meta), properties);
-    const getColumn = ({ column }) => {
-        return snakeToLabel(column);
-    };
-    const keys = Object.keys(properties);
-    const included = include.length > 0 ? include : keys;
-    const ignored = included.filter((key) => {
-        return !ignore.some((shouldIgnoreKey) => key === shouldIgnoreKey);
-    });
-    const columnHelper = createColumnHelper();
-    const columns = [
-        ...ignored.map((column, index) => {
-            // @ts-expect-error column accessor type issue with generic TData
-            return columnHelper.accessor(column, {
-                cell: (props) => {
-                    // @ts-expect-error find type for unknown
-                    const value = props.row.original[column];
-                    if (typeof value === 'object') {
-                        return (jsx(Grid, { overflow: 'auto', children: jsx(RecordDisplay, { object: value }) }));
-                    }
-                    return jsx(TextCell, { children: value });
-                },
-                header: (columnHeader) => {
-                    const displayName = columnHeader.column.columnDef.meta?.displayName ??
-                        getColumn({ column });
-                    return jsx("span", { children: displayName });
-                },
-                footer: (columnFooter) => {
-                    const displayName = columnFooter.column.columnDef.meta?.displayName ??
-                        getColumn({ column });
-                    return jsx("span", { children: displayName });
-                },
-                size: width[index] ?? defaultWidth,
-                meta: Object.keys(meta).length > 0 ? meta[column] : {},
-            });
-        }),
-    ];
-    return columns;
-};
-
 //@ts-expect-error TODO: find appropriate type
 const SchemaFormContext = createContext({
     schema: {},
@@ -4271,114 +4189,6 @@ const useSchemaContext = () => {
     return useContext(SchemaFormContext);
 };
 
-const clearEmptyString = (object) => {
-    return Object.fromEntries(Object.entries(object).filter(([, value]) => value !== ""));
-};
-
-const idPickerSanityCheck = (column, customQueryFn, idColumn) => {
-    if (!customQueryFn) {
-        throw new Error(`customQueryFn is required in properties of column ${column} when using id-picker.`);
-    }
-    if (!idColumn) {
-        throw new Error(`idColumn is required in properties of column ${column} when using id-picker.`);
-    }
-};
-const FormRoot = ({ schema, idMap, setIdMap, form, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, customErrorRenderer, customSuccessRenderer, displayConfig = {
-    showSubmitButton: true,
-    showResetButton: true,
-    showTitle: true,
-}, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog = false, }) => {
-    const [isSuccess, setIsSuccess] = useState(false);
-    const [isError, setIsError] = useState(false);
-    const [isSubmiting, setIsSubmiting] = useState(false);
-    const [validatedData, setValidatedData] = useState();
-    const [error, setError] = useState();
-    const onBeforeSubmit = () => {
-        setIsSubmiting(true);
-    };
-    const onAfterSubmit = () => {
-        setIsSubmiting(false);
-    };
-    const onSubmitError = (error) => {
-        setIsError(true);
-        setError(error);
-    };
-    const onSubmitSuccess = () => {
-        setIsSuccess(true);
-    };
-    const defaultOnSubmit = async (promise) => {
-        try {
-            console.log('onBeforeSubmit');
-            onBeforeSubmit();
-            await promise;
-            console.log('onSubmitSuccess');
-            onSubmitSuccess();
-        }
-        catch (error) {
-            console.log('onSubmitError', error);
-            onSubmitError(error);
-        }
-        finally {
-            onAfterSubmit();
-        }
-    };
-    const defaultSubmitPromise = (data) => {
-        if (!requestOptions.url) {
-            throw new Error('requestOptions.url is required when onSubmit is not provided');
-        }
-        const options = {
-            method: 'POST',
-            data: clearEmptyString(data),
-            ...requestOptions,
-        };
-        return axios.request(options);
-    };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const onFormSubmit = async (data) => {
-        // Validation is handled by react-hook-form
-        // This function will only be called if validation passes
-        if (onSubmit === undefined) {
-            await defaultOnSubmit(Promise.resolve(defaultSubmitPromise(data)));
-            return;
-        }
-        await defaultOnSubmit(Promise.resolve(onSubmit(data)));
-    };
-    return (jsx(SchemaFormContext.Provider, { value: {
-            schema,
-            order,
-            ignore,
-            include,
-            // @ts-expect-error TODO: find appropriate types
-            onSubmit,
-            rowNumber,
-            idMap,
-            setIdMap,
-            requestOptions,
-            isSuccess,
-            setIsSuccess,
-            isError,
-            setIsError,
-            isSubmiting,
-            setIsSubmiting,
-            validatedData,
-            setValidatedData,
-            error,
-            setError,
-            getUpdatedData,
-            customErrorRenderer,
-            customSuccessRenderer,
-            displayConfig,
-            onFormSubmit,
-            dateTimePickerLabels,
-            idPickerLabels,
-            enumPickerLabels,
-            filePickerLabels,
-            formButtonLabels,
-            timePickerLabels,
-            insideDialog,
-        }, children: jsx(FormProvider, { ...form, children: children }) }));
-};
-
 const useFormLabel = (column, prefix = '', schema) => {
     const colLabel = `${prefix}${column}`;
     return {
@@ -5992,13 +5802,12 @@ const defaultRenderDisplay = (item) => {
 const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
     const { watch, getValues, formState: { errors }, setValue, } = useFormContext();
     const { idMap, setIdMap, idPickerLabels, insideDialog } = useSchemaContext();
-    const { renderDisplay, itemToValue: schemaItemToValue, loadInitialValues, customQueryFn, idColumn, variant, } = schema;
+    const { renderDisplay, itemToValue: schemaItemToValue, loadInitialValues, customQueryFn, variant, } = schema;
     // loadInitialValues should 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) {
         console.warn(`loadInitialValues is recommended in schema for IdPicker field '${column}'. Please provide loadInitialValues function in the schema to load records for human-readable display.`);
     }
-    const column_ref = idColumn || 'id';
     const [searchText, setSearchText] = useState('');
     const debouncedSearchText = useDebounce(searchText, 300);
     const [limit] = useState(50); // Increased limit for combobox
@@ -6058,7 +5867,6 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
             const result = await loadInitialValues({
                 ids: missingIds,
                 customQueryFn: customQueryFn,
-                idColumn: column_ref,
                 setIdMap,
             });
             return result.data;
@@ -6119,12 +5927,15 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
         // Depend on idMapKey which only changes when items we care about change
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentValueKey, idMapKey]);
-    // Default itemToValue function: extract value from item using column_ref
-    const defaultItemToValue = (item) => String(item[column_ref]);
-    // Use schema's itemToValue if provided, otherwise use default
+    // Use schema's itemToValue if provided, otherwise throw error
+    // schemaItemToValue should be provided in schema for id-picker fields
     const itemToValueFn = schemaItemToValue
         ? (item) => schemaItemToValue(item)
-        : defaultItemToValue;
+        : (item) => {
+            console.warn(`itemToValue is required in schema for IdPicker field '${column}'. Please provide itemToValue function in the schema. Currently trying to get 'id' field as last resort`);
+            // Fallback: try to get 'id' field as last resort
+            return String(item?.id ?? item);
+        };
     // itemToString function: convert item to readable string using renderDisplay
     // This ensures items can always be displayed as readable strings in the combobox
     const renderFn = renderDisplay || defaultRenderDisplay;
@@ -6186,7 +5997,7 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
         })
             .filter((item) => item !== null);
         return [...itemsFromIdMap, ...itemsFromDataList];
-    }, [dataList, column_ref, renderDisplay, idMapItems, itemToValueFn]);
+    }, [dataList, renderDisplay, idMapItems, itemToValueFn]);
     // Use filter hook for combobox
     const { contains } = useFilter({ sensitivity: 'base' });
     // Create collection for combobox
@@ -6252,7 +6063,6 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
         itemToString: itemToStringFn,
         loadInitialValues: loadInitialValues ??
             (async () => ({ data: { data: [], count: 0 }, idMap: {} })), // Fallback if not provided
-        column_ref,
         errors,
         setValue,
     };
@@ -8101,7 +7911,7 @@ const DateTimePicker = ({ column, schema, prefix, }) => {
 
 const SchemaRenderer = ({ schema, prefix, column, }) => {
     const colSchema = schema;
-    const { type, variant, properties: innerProperties, customQueryFn, idColumn, format, items, } = schema;
+    const { type, variant, properties: innerProperties, format, items } = schema;
     if (variant === 'custom-input') {
         return jsx(CustomInput, { schema: colSchema, prefix, column });
     }
@@ -8110,7 +7920,6 @@ const SchemaRenderer = ({ schema, prefix, column, }) => {
             return jsx(EnumPicker, { schema: colSchema, prefix, column });
         }
         if (variant === 'id-picker') {
-            idPickerSanityCheck(column, customQueryFn, idColumn);
             return jsx(IdPickerSingle, { schema: colSchema, prefix, column });
         }
         if (format === 'date') {
@@ -8144,7 +7953,6 @@ const SchemaRenderer = ({ schema, prefix, column, }) => {
     }
     if (type === 'array') {
         if (variant === 'id-picker') {
-            idPickerSanityCheck(column, customQueryFn, idColumn);
             return jsx(IdPickerMultiple, { schema: colSchema, prefix, column });
         }
         if (variant === 'tag-picker') {
@@ -8258,6 +8066,106 @@ const FormTitle = () => {
     return jsx(Heading, { children: schema.title ?? 'Form' });
 };
 
+const clearEmptyString = (object) => {
+    return Object.fromEntries(Object.entries(object).filter(([, value]) => value !== ""));
+};
+
+const FormRoot = ({ schema, idMap, setIdMap, form, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, customErrorRenderer, customSuccessRenderer, displayConfig = {
+    showSubmitButton: true,
+    showResetButton: true,
+    showTitle: true,
+}, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog = false, }) => {
+    const [isSuccess, setIsSuccess] = useState(false);
+    const [isError, setIsError] = useState(false);
+    const [isSubmiting, setIsSubmiting] = useState(false);
+    const [validatedData, setValidatedData] = useState();
+    const [error, setError] = useState();
+    const onBeforeSubmit = () => {
+        setIsSubmiting(true);
+    };
+    const onAfterSubmit = () => {
+        setIsSubmiting(false);
+    };
+    const onSubmitError = (error) => {
+        setIsError(true);
+        setError(error);
+    };
+    const onSubmitSuccess = () => {
+        setIsSuccess(true);
+    };
+    const defaultOnSubmit = async (promise) => {
+        try {
+            console.log('onBeforeSubmit');
+            onBeforeSubmit();
+            await promise;
+            console.log('onSubmitSuccess');
+            onSubmitSuccess();
+        }
+        catch (error) {
+            console.log('onSubmitError', error);
+            onSubmitError(error);
+        }
+        finally {
+            onAfterSubmit();
+        }
+    };
+    const defaultSubmitPromise = (data) => {
+        if (!requestOptions.url) {
+            throw new Error('requestOptions.url is required when onSubmit is not provided');
+        }
+        const options = {
+            method: 'POST',
+            data: clearEmptyString(data),
+            ...requestOptions,
+        };
+        return axios.request(options);
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const onFormSubmit = async (data) => {
+        // Validation is handled by react-hook-form
+        // This function will only be called if validation passes
+        if (onSubmit === undefined) {
+            await defaultOnSubmit(Promise.resolve(defaultSubmitPromise(data)));
+            return;
+        }
+        await defaultOnSubmit(Promise.resolve(onSubmit(data)));
+    };
+    return (jsx(SchemaFormContext.Provider, { value: {
+            schema,
+            order,
+            ignore,
+            include,
+            // @ts-expect-error TODO: find appropriate types
+            onSubmit,
+            rowNumber,
+            idMap,
+            setIdMap,
+            requestOptions,
+            isSuccess,
+            setIsSuccess,
+            isError,
+            setIsError,
+            isSubmiting,
+            setIsSubmiting,
+            validatedData,
+            setValidatedData,
+            error,
+            setError,
+            getUpdatedData,
+            customErrorRenderer,
+            customSuccessRenderer,
+            displayConfig,
+            onFormSubmit,
+            dateTimePickerLabels,
+            idPickerLabels,
+            enumPickerLabels,
+            filePickerLabels,
+            formButtonLabels,
+            timePickerLabels,
+            insideDialog,
+        }, children: jsx(FormProvider, { ...form, children: children }) }));
+};
+
 const DefaultForm = ({ formConfig, }) => {
     const { showTitle } = formConfig.displayConfig ?? {};
     return (jsx(FormRoot, { ...formConfig, children: jsxs(Grid, { gap: "2", children: [showTitle && jsx(FormTitle, {}), jsx(FormBody, {})] }) }));
@@ -8506,6 +8414,26 @@ const getMultiDates = ({ selected, selectedDate, selectedDates, selectable, }) =
     }
 };
 
+const snakeToLabel = (str) => {
+    return str
+        .split("_") // Split by underscore
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) // Capitalize each word
+        .join(" "); // Join with space
+};
+
+const RecordDisplay = ({ object, boxProps, prefix = '', }) => {
+    const getColumn = ({ field }) => {
+        return snakeToLabel(field);
+    };
+    if (object === null) {
+        return jsx(Fragment, { children: "null" });
+    }
+    return (jsx(Grid, { rowGap: 1, padding: 1, overflow: 'auto', ...boxProps, children: Object.entries(object).map(([field, value], index) => {
+            const uniqueKey = `${prefix}${field}-${index}`;
+            return (jsxs(Grid, { columnGap: 2, gridTemplateColumns: 'auto 1fr', children: [jsx(Text, { color: 'colorPalette.400', children: getColumn({ field }) }), typeof value === 'object' && value !== null ? (jsx(RecordDisplay, { object: value, prefix: `${prefix}${field}.` })) : (jsx(Text, { children: JSON.stringify(value) }))] }, uniqueKey));
+        }) }));
+};
+
 const TableDataDisplay = ({ colorPalette, emptyComponent, }) => {
     const { columns, data } = useDataTableContext();
     const columnsMap = Object.fromEntries(columns.map((def) => {
@@ -9389,4 +9317,4 @@ function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSel
         }, children: jsx(DataTableServerContext.Provider, { value: { url: url ?? '', query }, children: children }) }));
 }
 
-export { CalendarDisplay, CardHeader, DataDisplay, DataTable, DataTableServer, DatePickerContext, DatePickerInput, DefaultCardTitle, DefaultForm, DefaultTable, DefaultTableServer, DensityToggleButton, EditSortingButton, EmptyState, ErrorAlert, FilterDialog, FormBody, FormRoot, FormTitle, GlobalFilter, MediaLibraryBrowser, PageSizeControl, Pagination, RecordDisplay, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, SelectAllRowsToggle, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableDataDisplay, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableSelector, TableSorter, TableViewer, TextCell, ViewDialog, defaultRenderDisplay, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };
+export { CalendarDisplay, CardHeader, DataDisplay, DataTable, DataTableServer, DatePickerContext, DatePickerInput, DefaultCardTitle, DefaultForm, DefaultTable, DefaultTableServer, DensityToggleButton, EditSortingButton, EmptyState, ErrorAlert, FilterDialog, FormBody, FormRoot, FormTitle, GlobalFilter, MediaLibraryBrowser, PageSizeControl, Pagination, RecordDisplay, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, SelectAllRowsToggle, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableDataDisplay, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableSelector, TableSorter, TableViewer, TextCell, ViewDialog, defaultRenderDisplay, getMultiDates, getRangeDates, useDataTable, useDataTableContext, useDataTableServer, useForm };

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

@@ -62,8 +62,6 @@ export interface CustomJSONSchema7Definition extends JSONSchema7 {
     gridColumn: string;
     gridRow: string;
     customQueryFn: any;
-    idColumn: string;
     children: ReactNode;
 }
-export declare const idPickerSanityCheck: (column: string, customQueryFn?: any, idColumn?: string) => void;
 export declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog, }: FormRootProps<TData>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CustomJSONSchema7, LoadInitialValuesParams, LoadInitialValuesResult } from '../types/CustomJSONSchema7';
+import { CustomJSONSchema7, IdPickerLabels, LoadInitialValuesParams, LoadInitialValuesResult } from '../types/CustomJSONSchema7';
 export interface RecordType {
     [key: string]: any;
 }
@@ -39,13 +39,12 @@ export interface UseIdPickerDataReturn {
         raw: RecordType;
     }>) => void;
     idMap: Record<string, object>;
-    idPickerLabels: any;
+    idPickerLabels?: IdPickerLabels;
     insideDialog: boolean;
     renderDisplay: ((item: RecordType) => React.ReactNode) | undefined;
     itemToValue: (item: RecordType) => string;
     itemToString: (item: RecordType) => string;
     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

@@ -72,7 +72,6 @@ export interface TimePickerLabels {
 export interface LoadInitialValuesParams {
     ids: string[];
     customQueryFn: CustomQueryFn;
-    idColumn: string;
     setIdMap: React.Dispatch<React.SetStateAction<Record<string, object>>>;
 }
 export interface LoadInitialValuesResult {
@@ -86,7 +85,6 @@ export interface CustomJSONSchema7 extends JSONSchema7 {
     gridColumn?: string;
     gridRow?: string;
     customQueryFn?: CustomQueryFn;
-    idColumn?: string;
     variant?: string;
     renderDisplay?: (item: unknown) => ReactNode;
     itemToValue?: (item: unknown) => string;

package/dist/types/index.d.ts

@@ -123,7 +123,6 @@ export * from './components/DataTable/display/ErrorAlert';
 export * from './components/DataTable/useDataTable';
 export * from './components/DataTable/useDataTableServer';
 export * from './components/DataTable/context/useDataTableContext';
-export * from './components/DataTable/utils/getColumns';
 export * from './components/Form/components/core/DefaultForm';
 export * from './components/Form/components/core/FormRoot';
 export * from './components/Form/components/core/FormTitle';

package/package.json

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

package/dist/types/components/DataTable/utils/getColumns.d.ts

@@ -1,14 +0,0 @@
-import { ColumnDef, RowData } from '@tanstack/react-table';
-import { JSONSchema7 } from 'json-schema';
-export interface GetColumnsConfigs<K extends RowData> {
-    schema: JSONSchema7;
-    include?: K[];
-    ignore?: K[];
-    width?: number[];
-    meta?: {
-        [key in K as string]?: object;
-    };
-    defaultWidth?: number;
-}
-export declare const widthSanityCheck: <K extends unknown>(widthList: number[], ignoreList: K[], properties: { [key in K as string]?: object | undefined; }) => void;
-export declare const getColumns: <TData extends unknown>({ schema, include, ignore, width, meta, defaultWidth, }: GetColumnsConfigs<TData>) => ColumnDef<TData>[];

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

@@ -1 +0,0 @@
-export declare const idListSanityCheck: (param: string, idList: string[], properties: object) => void;