@bsol-oss/react-datatable5 12.0.0-beta.8 → 12.0.0-beta.80

package/dist/index.d.ts

@@ -1,23 +1,23 @@
 /// <reference types="react" />
 import { Row, RowData, OnChangeFn, Updater, FilterFn, ColumnDef, RowSelectionState, ColumnOrderState, ColumnFiltersState, PaginationState, SortingState, VisibilityState, Table as Table$1, Column } from '@tanstack/react-table';
-import * as React$1 from 'react';
-import React__default, { ReactNode, Dispatch, SetStateAction } from 'react';
+import * as react from 'react';
+import react__default, { ReactNode, Dispatch, SetStateAction } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ImageProps, TableHeaderProps as TableHeaderProps$1, TableRootProps, GridProps, CardBodyProps, FlexProps, TextProps, BoxProps } from '@chakra-ui/react';
+import { ImageProps, GridProps, TableRootProps, TableHeaderProps as TableHeaderProps$1, TableRowProps, BoxProps, FlexProps, CardBodyProps, TextProps } from '@chakra-ui/react';
 import { IconType } from 'react-icons';
 import * as react_i18next from 'react-i18next';
 import { UseTranslationResponse } from 'react-i18next';
 import { RankingInfo } from '@tanstack/match-sorter-utils';
 import { UseQueryResult } from '@tanstack/react-query';
 import { JSONSchema7 } from 'json-schema';
-import { ForeignKeyProps } from '@/components/Form/components/fields/StringInputField';
+import { ForeignKeyProps as ForeignKeyProps$1 } from '@/components/Form/components/fields/StringInputField';
 import { AxiosRequestConfig } from 'axios';
 import * as react_hook_form from 'react-hook-form';
-import { FieldValues, UseFormReturn, SubmitHandler } from 'react-hook-form';
+import { UseFormReturn, FieldValues, SubmitHandler } from 'react-hook-form';
 import { RenderProps, Props } from '@bsol-oss/dayzed-react19';
 
 interface DensityToggleButtonProps {
-    icon?: React__default.ReactElement;
+    icon?: react__default.ReactElement;
     text?: string;
 }
 declare const DensityToggleButton: ({ text, icon, }: DensityToggleButtonProps) => react_jsx_runtime.JSX.Element;
@@ -41,25 +41,16 @@ declare const PageSizeControl: ({ pageSizes, }: PageSizeControlProps) => react_j
 
 declare const Pagination: () => react_jsx_runtime.JSX.Element;
 
-interface ResetFilteringButtonProps {
-    text?: string;
-}
-declare const ResetFilteringButton: ({ text, }: ResetFilteringButtonProps) => react_jsx_runtime.JSX.Element;
+declare const ResetFilteringButton: () => react_jsx_runtime.JSX.Element;
 
-interface ResetSelectionButtonProps {
-    text?: string;
-}
-declare const ResetSelectionButton: ({ text, }: ResetSelectionButtonProps) => react_jsx_runtime.JSX.Element;
+declare const ResetSelectionButton: () => react_jsx_runtime.JSX.Element;
 
-interface ResetSortingButtonProps {
-    text?: string;
-}
-declare const ResetSortingButton: ({ text, }: ResetSortingButtonProps) => react_jsx_runtime.JSX.Element;
+declare const ResetSortingButton: () => react_jsx_runtime.JSX.Element;
 
 declare const RowCountText: () => react_jsx_runtime.JSX.Element;
 
 interface EditViewButtonProps {
-    icon?: React__default.ReactElement;
+    icon?: react__default.ReactElement;
 }
 declare const ViewDialog: ({ icon }: EditViewButtonProps) => react_jsx_runtime.JSX.Element;
 
@@ -107,7 +98,7 @@ declare module "@tanstack/react-table" {
     }
 }
 
-declare module "@tanstack/react-table" {
+declare module '@tanstack/react-table' {
     interface FilterFns {
         fuzzy: FilterFn<unknown>;
     }
@@ -121,6 +112,9 @@ interface DataTableProps<TData = unknown> {
      * Data array for the table.
      *
      * It will pass into as the data in `@tanstack/react-table`
+     * Do not toggle the data array, it will cause the table to re-render in infinite loop.
+     *
+     * @default []
      *
      */
     data: TData[];
@@ -153,6 +147,7 @@ interface DataTableProps<TData = unknown> {
     setDensity: OnChangeFn<DensityState>;
     setColumnVisibility: OnChangeFn<VisibilityState>;
     translate: UseTranslationResponse<any, any>;
+    tableLabel?: DataTableLabel;
 }
 /**
  * DataTable will create a context to hold all values to
@@ -164,18 +159,35 @@ interface DataTableProps<TData = unknown> {
  *
  * @link https://tanstack.com/table/latest/docs/guide/column-defs
  */
-declare function DataTable<TData = unknown>({ columns, data, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, translate, children, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+declare function DataTable<TData = unknown>({ columns, data, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, translate, children, tableLabel, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
 
-interface DataTableContext<TData = unknown> extends DataTableProps {
+interface DataTableLabel {
+    view: string;
+    edit: string;
+    filterButtonText: string;
+    filterTitle: string;
+    filterReset: string;
+    filterClose: string;
+    reloadTooltip: string;
+    reloadButtonText: string;
+    resetSelection: string;
+    resetSorting: string;
+    rowCountText: string;
+    hasErrorText: string;
+    globalFilterPlaceholder: string;
+    trueLabel: string;
+    falseLabel: string;
+}
+interface DataTableContextProps<TData = unknown> extends DataTableProps {
     table: Table$1<TData>;
     globalFilter: string;
     setGlobalFilter: OnChangeFn<string>;
     type: "client" | "server";
-    translate: UseTranslationResponse<any, any>;
+    translate: UseTranslationResponse<any, unknown>;
+    tableLabel: DataTableLabel;
 }
-declare const DataTableContext: React$1.Context<DataTableContext<unknown>>;
 
-declare const useDataTableContext: <TData>() => DataTableContext<TData>;
+declare const useDataTableContext: <TData>() => DataTableContextProps<TData>;
 
 interface DataDisplayProps {
     variant?: "horizontal" | "stats" | "";
@@ -218,7 +230,7 @@ interface UseDataTableReturn {
 }
 declare const useDataTable: ({ default: { sorting: defaultSorting, pagination: defaultPagination, rowSelection: defaultRowSelection, columnFilters: defaultColumnFilters, columnOrder: defaultColumnOrder, columnVisibility: defaultColumnVisibility, globalFilter: defaultGlobalFilter, density: defaultDensity, }, keyPrefix, }?: UseDataTableProps) => UseDataTableReturn;
 
-interface UseDataTableServerProps extends UseDataTableProps {
+interface UseDataTableServerProps<TData> extends UseDataTableProps {
     /**
      * Delay to send the request if the `refreshData` called multiple times
      *
@@ -231,7 +243,51 @@ interface UseDataTableServerProps extends UseDataTableProps {
      * default: `1000`
      */
     debounceDelay?: number;
-    url: string;
+    /**
+     * The url to fetch the data from.
+     *
+     * Remark:
+     * it is the server responsibility to handle the params and return the data.
+     * especially the pagination and sorting.
+     *
+     * The response must be like this:
+     * ```ts
+     * {
+     *   data: TData[],
+     *   count: number,
+     * }
+     * ```
+     *
+     * Example:
+     * ```ts
+     * const url = "https://jsonplaceholder.typicode.com/posts";
+     * ```
+     *
+     * If not provided, the `queryFn` will be used.
+     *
+     * @default undefined
+     */
+    url?: string;
+    placeholderData?: DataResponse<TData>;
+    /**
+     * The query function to fetch the data from.
+     *
+     * Remark:
+     * it is the server responsibility to handle the params and return the data.
+     * especially the pagination and sorting.
+     *
+     * Example:
+     * ```ts
+     * const queryFn = (params: QueryParams) => {
+     *   return axios.get<DataResponse<TData>>(url, { params });
+     * };
+     * ```
+     *
+     * If not provided, the `url` will be used.
+     *
+     * @default undefined
+     */
+    queryFn?: (params: QueryParams) => Promise<DataResponse<TData>>;
 }
 interface UseDataTableServerReturn<TData> extends UseDataTableReturn {
     query: UseQueryResult<DataResponse<TData>, Error>;
@@ -242,9 +298,16 @@ interface Result<T = unknown> {
 interface DataResponse<T = unknown> extends Result<T> {
     count: number;
 }
-declare const useDataTableServer: <TData>({ url, default: { sorting: defaultSorting, pagination: defaultPagination, rowSelection: defaultRowSelection, columnFilters: defaultColumnFilters, columnOrder: defaultColumnOrder, columnVisibility: defaultColumnVisibility, globalFilter: defaultGlobalFilter, density: defaultDensity, }, keyPrefix, }: UseDataTableServerProps) => UseDataTableServerReturn<TData>;
+interface QueryParams {
+    offset: number;
+    limit: number;
+    sorting: SortingState;
+    where: ColumnFiltersState;
+    searching: string;
+}
+declare const useDataTableServer: <TData>(props: UseDataTableServerProps<TData>) => UseDataTableServerReturn<TData>;
 
-interface DataTableServerProps<TData extends DataResponse = DataResponse<unknown>> {
+interface DataTableServerProps<TData = unknown> {
     children: ReactNode | ReactNode[];
     /**
      * Column definitions for the table.
@@ -273,9 +336,10 @@ interface DataTableServerProps<TData extends DataResponse = DataResponse<unknown
     setColumnOrder: OnChangeFn<ColumnOrderState>;
     setDensity: OnChangeFn<DensityState>;
     setColumnVisibility: OnChangeFn<VisibilityState>;
-    query: UseQueryResult<TData>;
-    url: string;
+    query: UseQueryResult<DataResponse<TData>>;
+    url?: string;
     translate: UseTranslationResponse<any, any>;
+    tableLabel?: DataTableLabel;
 }
 /**
  * DataTableServer will create a context to hold all values to
@@ -288,28 +352,7 @@ interface DataTableServerProps<TData extends DataResponse = DataResponse<unknown
  *
  * @link https://tanstack.com/table/latest/docs/guide/column-defs
  */
-declare function DataTableServer<TData extends DataResponse = DataResponse<unknown>>({ columns, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, query, url, translate, children, }: DataTableServerProps<TData>): react_jsx_runtime.JSX.Element;
-
-interface TableBodyProps {
-    pinnedBgColor?: {
-        light: string;
-        dark: string;
-    };
-    showSelector?: boolean;
-    alwaysShowSelector?: boolean;
-    canResize?: boolean;
-}
-interface TableRowSelectorProps<TData> {
-    index: number;
-    row: Row<TData>;
-    hoveredRow: number;
-    pinnedBgColor?: {
-        light: string;
-        dark: string;
-    };
-    alwaysShowSelector?: boolean;
-}
-declare const TableBody: ({ pinnedBgColor, showSelector, alwaysShowSelector, canResize, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
+declare function DataTableServer<TData = unknown>({ columns, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, query, url, translate, children, tableLabel, }: DataTableServerProps<TData>): react_jsx_runtime.JSX.Element;
 
 interface TableControlsProps {
     totalText?: string;
@@ -325,69 +368,154 @@ interface TableControlsProps {
     showPageSizeControl?: boolean;
     showPageCountText?: boolean;
     showView?: boolean;
-    filterOptions?: string[];
+    filterTagsOptions?: {
+        column: string;
+        options: {
+            label: string;
+            value: string;
+        }[];
+    }[];
     extraItems?: ReactNode;
     loading?: boolean;
     hasError?: boolean;
+    gridProps?: GridProps;
 }
-declare const TableControls: ({ fitTableWidth, fitTableHeight, children, showGlobalFilter, showFilter, showFilterName, showFilterTags, showReload, showPagination, showPageSizeControl, showPageCountText, showView, filterOptions, extraItems, loading, hasError, }: TableControlsProps) => react_jsx_runtime.JSX.Element;
+declare const TableControls: ({ fitTableWidth, fitTableHeight, children, showGlobalFilter, showFilter, showFilterName, showFilterTags, showReload, showPagination, showPageSizeControl, showPageCountText, showView, filterTagsOptions, extraItems, loading, hasError, gridProps, }: TableControlsProps) => react_jsx_runtime.JSX.Element;
 
-interface TableFooterProps {
+interface TableProps extends TableRootProps {
+    showLoading?: boolean;
+    loadingComponent?: ReactNode;
+    emptyComponent?: ReactNode;
+    canResize?: boolean;
+    children: ReactNode;
+}
+declare const Table: ({ children, emptyComponent, canResize, showLoading, ...props }: TableProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
+
+interface TableBodyProps {
     pinnedBgColor?: {
         light: string;
         dark: string;
     };
     showSelector?: boolean;
     alwaysShowSelector?: boolean;
-}
-declare const TableFooter: ({ pinnedBgColor, showSelector, alwaysShowSelector, }: TableFooterProps) => react_jsx_runtime.JSX.Element;
-
-interface TableHeaderProps {
     canResize?: boolean;
+}
+interface TableRowSelectorProps<TData> {
+    index: number;
+    row: Row<TData>;
+    hoveredRow: number;
     pinnedBgColor?: {
         light: string;
         dark: string;
     };
+}
+declare const TableBody: ({ showSelector, canResize, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
+
+interface TableFooterProps {
     showSelector?: boolean;
-    isSticky?: boolean;
     alwaysShowSelector?: boolean;
-    tHeadProps?: TableHeaderProps$1;
 }
-declare const TableHeader: ({ canResize, pinnedBgColor, showSelector, isSticky, alwaysShowSelector, tHeadProps, }: TableHeaderProps) => react_jsx_runtime.JSX.Element;
+declare const TableFooter: ({ showSelector, alwaysShowSelector, }: TableFooterProps) => react_jsx_runtime.JSX.Element;
 
-interface TableProps extends TableRootProps {
-    showLoading?: boolean;
-    loadingComponent?: ReactNode;
-    emptyComponent?: ReactNode;
+interface TableHeaderTexts {
+    pinColumn?: string;
+    cancelPin?: string;
+    sortAscending?: string;
+    sortDescending?: string;
+    clearSorting?: string;
+}
+interface TableHeaderProps {
     canResize?: boolean;
-    children: ReactNode;
+    showSelector?: boolean;
+    isSticky?: boolean;
+    tableHeaderProps?: TableHeaderProps$1;
+    tableRowProps?: TableRowProps;
+    /**
+     * Default text configuration for all columns.
+     * Can be overridden per column via meta.headerTexts.
+     */
+    defaultTexts?: TableHeaderTexts;
 }
-declare const Table: ({ children, emptyComponent, canResize, ...props }: TableProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
+/**
+ * TableHeader component with configurable text strings.
+ *
+ * @example
+ * // Using default texts
+ * <TableHeader />
+ *
+ * @example
+ * // Customizing default texts for all columns
+ * <TableHeader
+ *   defaultTexts={{
+ *     pinColumn: "Pin This Column",
+ *     sortAscending: "Sort A-Z"
+ *   }}
+ * />
+ *
+ * @example
+ * // Customizing texts per column via meta
+ * const columns = [
+ *   columnHelper.accessor("name", {
+ *     header: "Name",
+ *     meta: {
+ *       headerTexts: {
+ *         pinColumn: "Pin Name Column",
+ *         sortAscending: "Sort Names A-Z"
+ *       }
+ *     }
+ *   })
+ * ];
+ */
+declare const TableHeader: ({ canResize, showSelector, isSticky, tableHeaderProps, tableRowProps, defaultTexts, }: TableHeaderProps) => react_jsx_runtime.JSX.Element;
 
 interface DefaultTableProps {
     showFooter?: boolean;
-    showSelector?: boolean;
-    tableProps?: Omit<TableProps, "children">;
-    tHeadProps?: TableHeaderProps$1;
-    controlProps?: TableControlsProps;
-    tableFooterProps?: TableFooterProps;
-    tableBodyProps?: TableBodyProps;
+    tableProps?: Omit<TableProps, 'children'>;
     tableHeaderProps?: TableHeaderProps;
-    variant?: "" | "greedy";
+    tableBodyProps?: TableBodyProps;
+    tableFooterProps?: TableFooterProps;
+    controlProps?: TableControlsProps;
+    variant?: '' | 'greedy';
+    isLoading?: boolean;
+}
+declare const DefaultTable: ({ showFooter, tableProps, tableHeaderProps, tableBodyProps, tableFooterProps, controlProps, variant, isLoading, }: DefaultTableProps) => react_jsx_runtime.JSX.Element;
+
+interface DefaultTableServerProps extends DefaultTableProps {
+    /**
+     * Optional isLoading prop to override auto-detected loading state.
+     * If not provided, will automatically detect from DataTableServerContext.
+     */
+    isLoading?: boolean;
 }
-declare const DefaultTable: ({ showFooter, tableProps, tableHeaderProps, tableBodyProps, controlProps, tableFooterProps, variant, }: DefaultTableProps) => react_jsx_runtime.JSX.Element;
+/**
+ * DefaultTableServer is a wrapper around DefaultTable that automatically
+ * detects server-side loading state from DataTableServerContext.
+ *
+ * Use this component when working with DataTableServer to automatically
+ * show skeleton loading state during data fetching.
+ *
+ * @example
+ * ```tsx
+ * <DataTableServer columns={columns} {...datatableServer}>
+ *   <DefaultTableServer />
+ * </DataTableServer>
+ * ```
+ */
+declare const DefaultTableServer: ({ isLoading: isLoadingOverride, ...props }: DefaultTableServerProps) => react_jsx_runtime.JSX.Element;
 
 interface ReloadButtonProps {
-    text?: string;
     variant?: string;
 }
-declare const ReloadButton: ({ text, variant, }: ReloadButtonProps) => react_jsx_runtime.JSX.Element;
+declare const ReloadButton: ({ variant, }: ReloadButtonProps) => react_jsx_runtime.JSX.Element;
 
-interface TableCardContainerProps extends GridProps {
+interface TableCardContainerProps extends BoxProps {
     children: ReactNode;
     variant?: "carousel" | "";
+    gap?: string;
+    gridTemplateColumns?: string;
+    direction?: FlexProps["direction"];
 }
-declare const TableCardContainer: ({ children, variant, ...props }: TableCardContainerProps) => react_jsx_runtime.JSX.Element;
+declare const TableCardContainer: ({ children, variant, gap, gridTemplateColumns, direction, ...props }: TableCardContainerProps) => react_jsx_runtime.JSX.Element;
 
 interface TableCardsProps<TData> {
     isSelectable?: boolean;
@@ -399,9 +527,9 @@ declare const DefaultCardTitle: () => react_jsx_runtime.JSX.Element;
 declare const TableCards: <TData>({ isSelectable, showDisplayNameOnly, renderTitle, cardBodyProps, }: TableCardsProps<TData>) => react_jsx_runtime.JSX.Element;
 
 interface TableRendererProps<TData> {
-    render: (render: Table$1<TData>) => React__default.ReactElement;
+    render: (render: Table$1<TData>) => react__default.ReactElement;
 }
-declare const TableComponent: <TData>({ render, }: TableRendererProps<TData>) => React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>>;
+declare const TableComponent: <TData>({ render, }: TableRendererProps<TData>) => react__default.ReactElement<unknown, string | react__default.JSXElementConstructor<any>>;
 
 declare const TableFilter: () => react_jsx_runtime.JSX.Element;
 
@@ -441,17 +569,347 @@ interface GetColumnsConfigs<K extends RowData> {
 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, translate, }: GetColumnsConfigs<TData>) => ColumnDef<TData>[];
 
-declare const TableDataDisplay: () => react_jsx_runtime.JSX.Element;
+interface TableDataDisplayProps {
+    colorPalette?: string;
+    emptyComponent?: ReactNode;
+}
+declare const TableDataDisplay: ({ colorPalette, emptyComponent, }: TableDataDisplayProps) => react_jsx_runtime.JSX.Element;
 
-interface FilterOptionsProps {
+declare const GlobalFilter: () => react_jsx_runtime.JSX.Element;
+
+interface CustomQueryFnResponse {
+    /**
+     * The data of the query
+     */
+    data: any;
+    /**
+     * The id map of the data
+     */
+    idMap: Record<string, any>;
+}
+interface CustomQueryFnParams {
+    searching: string;
+    limit: number;
+    offset: number;
+}
+type CustomQueryFn = (params: CustomQueryFnParams) => Promise<CustomQueryFnResponse>;
+interface ForeignKeyProps {
     column: string;
+    table: string;
+    display_column: string;
+    customQueryFn?: CustomQueryFn;
 }
-declare const FilterOptions: ({ column }: FilterOptionsProps) => react_jsx_runtime.JSX.Element;
 
-declare const GlobalFilter: () => react_jsx_runtime.JSX.Element;
+/**
+ * Type definitions for error message configuration
+ */
+/**
+ * Common validation error types that can be customized
+ */
+type ValidationErrorType = 'minLength' | 'maxLength' | 'pattern' | 'minimum' | 'maximum' | 'multipleOf' | 'format' | 'type' | 'enum' | 'required' | 'minItems' | 'maxItems' | 'uniqueItems' | 'minProperties' | 'maxProperties' | 'anyOf' | 'oneOf' | 'allOf' | 'const' | 'additionalProperties' | 'dependencies';
+/**
+ * Configuration for field-specific validation errors
+ */
+type FieldErrorConfig = Partial<Record<ValidationErrorType, string>>;
+/**
+ * Configuration for building error messages
+ */
+interface ErrorMessageConfig {
+    /**
+     * Required field error messages
+     * Maps field names to their required error messages
+     * Supports both plain strings and i18n translation keys
+     *
+     * @example
+     * ```typescript
+     * required: {
+     *   username: "Username is required", // plain string
+     *   email: "user.email.field_required" // i18n key
+     * }
+     * ```
+     */
+    required?: Record<string, string>;
+    /**
+     * Field-specific validation error messages
+     * Maps field names to their validation error configurations
+     *
+     * @example
+     * ```typescript
+     * properties: {
+     *   username: {
+     *     minLength: "Username must be at least 3 characters",
+     *     pattern: "Username can only contain letters and numbers"
+     *   },
+     *   age: {
+     *     minimum: "Age must be at least 18",
+     *     maximum: "Age cannot exceed 120"
+     *   }
+     * }
+     * ```
+     */
+    properties?: Record<string, FieldErrorConfig>;
+    /**
+     * Global fallback error messages for validation types
+     * These are used when no field-specific message is provided
+     *
+     * @example
+     * ```typescript
+     * {
+     *   minLength: "This field is too short",
+     *   minimum: "Value is too small"
+     * }
+     * ```
+     */
+    [key: string]: any;
+}
+/**
+ * Result of buildErrorMessages that follows ajv-errors format
+ */
+interface ErrorMessageResult {
+    required?: Record<string, string>;
+    properties?: Record<string, FieldErrorConfig>;
+    [key: string]: any;
+}
+/**
+ * Schema-level error message builder
+ *
+ * Builds a complete errorMessage object compatible with ajv-errors plugin.
+ * Supports both i18n translation keys and plain string messages.
+ *
+ * @param config - Error message configuration
+ * @returns Complete errorMessage object for JSON Schema
+ *
+ * @example
+ * ```typescript
+ * // Simple required field errors
+ * const errorMessage = buildErrorMessages({
+ *   required: {
+ *     username: "Username is required",
+ *     email: "user.email.field_required" // i18n key
+ *   }
+ * });
+ *
+ * // With validation rules
+ * const errorMessage = buildErrorMessages({
+ *   required: {
+ *     password: "Password is required"
+ *   },
+ *   properties: {
+ *     password: {
+ *       minLength: "Password must be at least 8 characters",
+ *       pattern: "Password must contain letters and numbers"
+ *     },
+ *     age: {
+ *       minimum: "Must be 18 or older",
+ *       maximum: "Must be under 120"
+ *     }
+ *   }
+ * });
+ *
+ * // With global fallbacks
+ * const errorMessage = buildErrorMessages({
+ *   required: {
+ *     email: "Email is required"
+ *   },
+ *   minLength: "This field is too short", // applies to all fields
+ *   minimum: "Value is too small"
+ * });
+ * ```
+ */
+declare const buildErrorMessages: (config: ErrorMessageConfig) => ErrorMessageResult;
+/**
+ * Converts buildErrorMessages result to ajv-errors compatible format
+ */
+declare const convertToAjvErrorsFormat: (errorMessages: ErrorMessageResult) => Record<string, any>;
+/**
+ * Helper function to build required field errors
+ *
+ * Simplifies creating required field error messages, especially useful
+ * for generating i18n translation keys following a pattern.
+ *
+ * @param fields - Array of required field names
+ * @param messageOrGenerator - Either a string template or function to generate messages
+ * @returns Required field error configuration
+ *
+ * @example
+ * ```typescript
+ * // Plain string messages
+ * const required = buildRequiredErrors(
+ *   ["username", "email", "password"],
+ *   (field) => `${field} is required`
+ * );
+ * // Result: { username: "username is required", email: "email is required", ... }
+ *
+ * // i18n translation keys
+ * const required = buildRequiredErrors(
+ *   ["username", "email"],
+ *   (field) => `user.${field}.field_required`
+ * );
+ * // Result: { username: "user.username.field_required", email: "user.email.field_required" }
+ *
+ * // Same message for all fields
+ * const required = buildRequiredErrors(
+ *   ["username", "email"],
+ *   "This field is required"
+ * );
+ * // Result: { username: "This field is required", email: "This field is required" }
+ *
+ * // With keyPrefix for i18n
+ * const required = buildRequiredErrors(
+ *   ["username", "email"],
+ *   (field) => `${field}.field_required`,
+ *   "user"
+ * );
+ * // Result: { username: "user.username.field_required", email: "user.email.field_required" }
+ * ```
+ */
+declare const buildRequiredErrors: (fields: string[], messageOrGenerator: string | ((field: string) => string), keyPrefix?: string) => Record<string, string>;
+/**
+ * Helper function to build field-specific validation errors
+ *
+ * Creates property-specific error messages for multiple fields at once.
+ *
+ * @param config - Maps field names to their validation error configurations
+ * @returns Properties error configuration
+ *
+ * @example
+ * ```typescript
+ * const properties = buildFieldErrors({
+ *   username: {
+ *     minLength: "Username must be at least 3 characters",
+ *     pattern: "Username can only contain letters and numbers"
+ *   },
+ *   age: {
+ *     minimum: "Must be 18 or older",
+ *     maximum: "Must be under 120"
+ *   },
+ *   email: {
+ *     format: "Please enter a valid email address"
+ *   }
+ * });
+ * ```
+ */
+declare const buildFieldErrors: (config: Record<string, FieldErrorConfig>) => Record<string, FieldErrorConfig>;
+/**
+ * Helper function to create a complete error message configuration in one call
+ *
+ * Convenient wrapper that combines required and validation errors.
+ *
+ * @param required - Required field error messages
+ * @param properties - Field-specific validation error messages
+ * @param globalFallbacks - Global fallback error messages
+ * @returns Complete error message configuration
+ *
+ * @example
+ * ```typescript
+ * const errorMessage = createErrorMessage(
+ *   {
+ *     username: "Username is required",
+ *     email: "Email is required"
+ *   },
+ *   {
+ *     username: {
+ *       minLength: "Username must be at least 3 characters"
+ *     },
+ *     email: {
+ *       format: "Please enter a valid email"
+ *     }
+ *   },
+ *   {
+ *     minLength: "This field is too short",
+ *     format: "Invalid format"
+ *   }
+ * );
+ * ```
+ */
+declare const createErrorMessage: (required?: Record<string, string>, properties?: Record<string, FieldErrorConfig>, globalFallbacks?: Partial<Record<ValidationErrorType, string>>) => ErrorMessageResult;
+
+interface DateTimePickerLabels {
+    monthNamesShort?: string[];
+    weekdayNamesShort?: string[];
+    backButtonLabel?: string;
+    forwardButtonLabel?: string;
+}
+interface IdPickerLabels {
+    undefined?: string;
+    addMore?: string;
+    typeToSearch?: string;
+    total?: string;
+    showing?: string;
+    perPage?: string;
+    emptySearchResult?: string;
+    initialResults?: string;
+}
+interface EnumPickerLabels {
+    undefined?: string;
+    addMore?: string;
+    typeToSearch?: string;
+    total?: string;
+    showing?: string;
+    perPage?: string;
+    emptySearchResult?: string;
+    initialResults?: string;
+}
+interface FilePickerLabels {
+    fileDropzone?: string;
+    browseLibrary?: string;
+    dialogTitle?: string;
+    searchPlaceholder?: string;
+    loading?: string;
+    loadingFailed?: string;
+    noFilesFound?: string;
+    cancel?: string;
+    select?: string;
+}
+interface CustomJSONSchema7 extends JSONSchema7 {
+    gridColumn?: string;
+    gridRow?: string;
+    foreign_key?: ForeignKeyProps;
+    variant?: string;
+    renderDisplay?: (item: unknown) => ReactNode;
+    inputRender?: (props: {
+        column: string;
+        schema: CustomJSONSchema7;
+        prefix: string;
+        formContext: UseFormReturn;
+    }) => ReactNode;
+    inputViewerRender?: (props: {
+        column: string;
+        schema: CustomJSONSchema7;
+        prefix: string;
+        formContext: UseFormReturn;
+    }) => ReactNode;
+    dateFormat?: string;
+    displayDateFormat?: string;
+    timeFormat?: string;
+    displayTimeFormat?: string;
+    showLabel?: boolean;
+    formatOptions?: Intl.NumberFormatOptions;
+    numberStorageType?: 'string' | 'number';
+    errorMessages?: Partial<Record<ValidationErrorType | string, string>>;
+    filePicker?: FilePickerProps;
+}
+interface TagPickerProps {
+    column: string;
+    schema: CustomJSONSchema7;
+    prefix: string;
+}
+interface FilePickerMediaFile {
+    id: string;
+    name: string;
+    url?: string;
+    size?: string | number;
+    comment?: string;
+    type?: string;
+}
+interface FilePickerProps {
+    onFetchFiles?: (search: string) => Promise<FilePickerMediaFile[]>;
+    enableMediaLibrary?: boolean;
+    filterImageOnly?: boolean;
+}
 
 interface FormRootProps<TData extends FieldValues> {
-    schema: JSONSchema7;
+    schema: CustomJSONSchema7;
     serverUrl: string;
     requestUrl?: string;
     idMap: Record<string, object>;
@@ -466,6 +924,18 @@ interface FormRootProps<TData extends FieldValues> {
     rowNumber?: number | string;
     requestOptions?: AxiosRequestConfig;
     getUpdatedData?: () => TData | Promise<TData> | void;
+    customErrorRenderer?: (error: unknown) => ReactNode;
+    customSuccessRenderer?: (resetHandler: () => void | Promise<void>) => ReactNode;
+    displayConfig?: {
+        showSubmitButton?: boolean;
+        showResetButton?: boolean;
+        showTitle?: boolean;
+    };
+    requireConfirmation?: boolean;
+    dateTimePickerLabels?: DateTimePickerLabels;
+    idPickerLabels?: IdPickerLabels;
+    enumPickerLabels?: EnumPickerLabels;
+    filePickerLabels?: FilePickerLabels;
 }
 interface CustomJSONSchema7Definition extends JSONSchema7 {
     variant: string;
@@ -474,7 +944,7 @@ interface CustomJSONSchema7Definition extends JSONSchema7 {
     display_column: string;
     gridColumn: string;
     gridRow: string;
-    foreign_key: ForeignKeyProps;
+    foreign_key: ForeignKeyProps$1;
     children: ReactNode;
 }
 declare const idPickerSanityCheck: (column: string, foreign_key?: {
@@ -482,26 +952,29 @@ declare const idPickerSanityCheck: (column: string, foreign_key?: {
     column?: string | undefined;
     display_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, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
+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, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
 
 interface DefaultFormProps<TData extends FieldValues> {
     formConfig: Omit<FormRootProps<TData>, "children">;
+    showTitle?: boolean;
 }
 declare const DefaultForm: <TData extends FieldValues>({ formConfig, }: DefaultFormProps<TData>) => react_jsx_runtime.JSX.Element;
 
 declare const FormTitle: () => react_jsx_runtime.JSX.Element;
 
-declare const FormBody: <TData extends object>() => react_jsx_runtime.JSX.Element;
+declare const FormBody: <TData extends object>() => string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
 
 interface UseFormProps {
     preLoadedValues?: FieldValues | undefined;
     keyPrefix?: string;
+    namespace?: string;
+    schema?: JSONSchema7;
 }
-declare const useForm: ({ preLoadedValues, keyPrefix }: UseFormProps) => {
+declare const useForm: ({ preLoadedValues, keyPrefix, namespace, schema, }: UseFormProps) => {
     form: react_hook_form.UseFormReturn<FieldValues, any, undefined>;
     idMap: Record<string, object>;
-    setIdMap: React$1.Dispatch<React$1.SetStateAction<Record<string, object>>>;
-    translate: react_i18next.UseTranslationResponse<"", string>;
+    setIdMap: react.Dispatch<react.SetStateAction<Record<string, object>>>;
+    translate: react_i18next.UseTranslationResponse<string, string>;
 };
 
 interface CalendarProps extends RenderProps {
@@ -518,6 +991,29 @@ interface GetVariantProps {
     selectable: boolean;
 }
 interface DatePickerProps extends Props {
+    onDateSelected?: (obj: {
+        date: Date;
+    }) => void;
+    selected: Date | Date[];
+    firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    showOutsideDays?: boolean;
+    date?: Date;
+    minDate?: Date;
+    maxDate?: Date;
+    monthsToDisplay?: number;
+    labels?: {
+        monthNamesShort: string[];
+        weekdayNamesShort: string[];
+        backButtonLabel?: string;
+        forwardButtonLabel?: string;
+    };
+    render?: (dayzedData: any) => react__default.ReactNode;
+}
+interface DatePickerLabels {
+    monthNamesShort: string[];
+    weekdayNamesShort: string[];
+    backButtonLabel?: string;
+    forwardButtonLabel?: string;
 }
 
 interface GetMultiDatesProps {
@@ -568,6 +1064,17 @@ declare module "@tanstack/react-table" {
          * The display name of the column, used for rendering headers.
          */
         displayName?: string;
+        /**
+         * Text configuration for the column header menu items.
+         * These strings can be customized per column.
+         */
+        headerTexts?: {
+            pinColumn?: string;
+            cancelPin?: string;
+            sortAscending?: string;
+            sortDescending?: string;
+            clearSorting?: string;
+        };
         /**
          * Specifies the type of filter to be used for the column.
          *
@@ -588,7 +1095,10 @@ declare module "@tanstack/react-table" {
         /**
          * Options for the select filter variant, if applicable.
          */
-        filterOptions?: string[];
+        filterOptions?: {
+            label: string;
+            value: string;
+        }[];
         /**
          * Configuration for the range filter variant, if applicable.
          *
@@ -614,4 +1124,4 @@ declare module "@tanstack/react-table" {
     }
 }
 
-export { type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, type DatePickerProps, DefaultCardTitle, DefaultForm, type DefaultFormProps, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, ErrorAlert, type ErrorAlertProps, FilterDialog, FilterOptions, type FilterOptionsProps, FormBody, FormRoot, type FormRootProps, FormTitle, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, PageSizeControl, type PageSizeControlProps, Pagination, type RangeCalendarProps, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, type ResetFilteringButtonProps, ResetSelectionButton, type ResetSelectionButtonProps, ResetSortingButton, type ResetSortingButtonProps, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableDataDisplay, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, TableLoadingComponent, type TableLoadingComponentProps, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, ViewDialog, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };
+export { type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, 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, FormRoot, type FormRootProps, FormTitle, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, type IdPickerLabels, PageSizeControl, type PageSizeControlProps, Pagination, type QueryParams, type RangeCalendarProps, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, RowCountText, 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 UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, type ValidationErrorType, ViewDialog, buildErrorMessages, buildFieldErrors, buildRequiredErrors, convertToAjvErrorsFormat, createErrorMessage, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };