@bsol-oss/react-datatable5 12.0.0-beta.6 → 12.0.0-beta.60

package/README.md

@@ -8,6 +8,12 @@ The datetable package is built on top of `@tanstack/react-table` and `chakra-ui`
 npm install @tanstack/react-table @chakra-ui/react @emotion/react @bsol-oss/react-datatable5
 ```
 
+For form validation features with internationalization support, also install:
+
+```bash
+npm install ajv ajv-formats ajv-i18n
+```
+
 ## Usage
 
 ### Hook
@@ -82,6 +88,192 @@ GET http://localhost:8081/api/g/core_people?offset=0&limit=10&sorting[0][id]=id&
 </DataTable>
 ```
 
+### Form Validation with AJV and Internationalization
+
+The package now includes built-in JSON Schema validation using AJV (Another JSON Schema Validator) with format support and comprehensive internationalization (i18n) capabilities, including full Traditional Chinese (Hong Kong/Taiwan) support.
+
+#### Features
+
+- **JSON Schema Validation**: Full JSON Schema Draft 7 support
+- **Format Validation**: Built-in support for date, time, email, UUID, and other formats via `ajv-formats`
+- **Multi-language Support**: Complete i18n support with Traditional Chinese (Hong Kong/Taiwan) and Simplified Chinese
+- **Enhanced Error Messages**: Culturally appropriate error messages in multiple languages
+- **Automatic Validation**: Validation occurs before form submission and confirmation
+- **Custom Error Display**: Collapsible error panels with localized validation feedback
+
+#### Supported Languages
+
+- **🇺🇸 English (en)** - Default language
+- **🇭🇰 Traditional Chinese - Hong Kong (zh-HK)** - 繁體中文（香港）
+- **🇹🇼 Traditional Chinese - Taiwan (zh-TW)** - 繁體中文（台灣）
+- **🇨🇳 Simplified Chinese (zh-CN, zh)** - 简体中文
+
+#### Basic Usage with Internationalization
+
+```tsx
+import { FormRoot, FormBody, validateData, SupportedLocale } from "@bsol-oss/react-datatable5";
+
+const schema = {
+  type: "object",
+  required: ["email", "age"],
+  properties: {
+    email: {
+      type: "string",
+      format: "email"
+    },
+    age: {
+      type: "integer",
+      minimum: 18,
+      maximum: 120
+    },
+    name: {
+      type: "string",
+      minLength: 2,
+      maxLength: 50
+    }
+  }
+};
+
+// Use Traditional Chinese (Hong Kong) for validation errors
+<FormRoot 
+  schema={schema} 
+  validationLocale="zh-HK"
+  /* other props */
+>
+  <FormBody />
+</FormRoot>
+```
+
+#### Language-specific Examples
+
+**Traditional Chinese (Hong Kong):**
+```tsx
+<FormRoot 
+  schema={schema} 
+  validationLocale="zh-HK"
+  /* other props */
+>
+  <FormBody />
+</FormRoot>
+```
+
+**Traditional Chinese (Taiwan):**
+```tsx
+<FormRoot 
+  schema={schema} 
+  validationLocale="zh-TW"
+  /* other props */
+>
+  <FormBody />
+</FormRoot>
+```
+
+**Simplified Chinese:**
+```tsx
+<FormRoot 
+  schema={schema} 
+  validationLocale="zh-CN"
+  /* other props */
+>
+  <FormBody />
+</FormRoot>
+```
+
+#### Manual Validation with Internationalization
+
+You can also use the validation utilities directly with language support:
+
+```tsx
+import { validateData, ValidationResult, SupportedLocale } from "@bsol-oss/react-datatable5";
+
+// Validate with Traditional Chinese (Hong Kong) error messages
+const result: ValidationResult = validateData(formData, schema, { 
+  locale: 'zh-HK' 
+});
+
+if (!result.isValid) {
+  console.log("驗證錯誤:", result.errors);
+  // Error messages will be in Traditional Chinese
+}
+
+// Check supported locales
+import { getSupportedLocales, isLocaleSupported } from "@bsol-oss/react-datatable5";
+
+const supportedLocales = getSupportedLocales(); // ['en', 'zh-HK', 'zh-TW', 'zh-CN', 'zh']
+const isSupported = isLocaleSupported('zh-HK'); // true
+```
+
+#### Validation Error Structure
+
+```tsx
+interface ValidationError {
+  field: string;        // The field that failed validation
+  message: string;      // User-friendly error message (localized)
+  value?: unknown;      // The current value that failed
+  schemaPath?: string;  // JSON Schema path for debugging
+}
+```
+
+#### Dynamic Language Switching
+
+```tsx
+import { SupportedLocale } from "@bsol-oss/react-datatable5";
+
+const MyForm = () => {
+  const [locale, setLocale] = useState<SupportedLocale>('zh-HK');
+  
+  return (
+    <div>
+      {/* Language selector */}
+      <select value={locale} onChange={(e) => setLocale(e.target.value as SupportedLocale)}>
+        <option value="en">English</option>
+        <option value="zh-HK">繁體中文（香港）</option>
+        <option value="zh-TW">繁體中文（台灣）</option>
+        <option value="zh-CN">简体中文</option>
+      </select>
+      
+      {/* Form with dynamic locale */}
+      <FormRoot 
+        schema={schema} 
+        validationLocale={locale}
+        /* other props */
+      >
+        <FormBody />
+      </FormRoot>
+    </div>
+  );
+};
+```
+
+#### Example Validation Messages
+
+**English:**
+- "email is required"
+- "Invalid email format"
+- "Must be at least 18"
+
+**Traditional Chinese (Hong Kong/Taiwan):**
+- "email 為必填"
+- "無效的 email 格式"
+- "必須至少為 18"
+
+**Simplified Chinese:**
+- "email 为必填"
+- "无效的 email 格式"
+- "必须至少为 18"
+
+#### Supported Validation Types
+
+- **Type validation**: string, number, integer, boolean, object, array
+- **Format validation**: email, date, time, date-time, uuid, uri, etc.
+- **String constraints**: minLength, maxLength, pattern (regex)
+- **Numeric constraints**: minimum, maximum, multipleOf
+- **Array constraints**: minItems, maxItems, uniqueItems
+- **Object constraints**: required properties, additionalProperties
+- **Enum validation**: restricted value sets
+
+All validation types are fully supported across all languages with culturally appropriate translations.
+
 For more details of props and examples, please review the stories in storybook platform.
 
 ## Development

package/dist/index.d.ts

@@ -1,19 +1,19 @@
 /// <reference types="react" />
-import { Row, Table as Table$1, OnChangeFn, RowData, Updater, FilterFn, ColumnDef, RowSelectionState, ColumnOrderState, ColumnFiltersState, PaginationState, SortingState, VisibilityState, Column } from '@tanstack/react-table';
+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_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 {
@@ -41,20 +41,11 @@ 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;
 
@@ -85,23 +76,6 @@ interface ErrorAlertProps {
 }
 declare const ErrorAlert: ({ showMessage }: ErrorAlertProps) => react_jsx_runtime.JSX.Element;
 
-interface DataTableContext<TData = unknown> {
-    table: Table$1<TData>;
-    globalFilter: string;
-    setGlobalFilter: OnChangeFn<string>;
-    type: "client" | "server";
-    translate: UseTranslationResponse<any, any>;
-}
-declare const DataTableContext: React$1.Context<DataTableContext<unknown>>;
-
-declare const useDataTableContext: <TData>() => DataTableContext<TData>;
-
-interface DataDisplayProps {
-    variant?: "horizontal" | "stats" | "";
-    translate?: UseTranslationResponse<any, any>;
-}
-declare const DataDisplay: ({ variant }: DataDisplayProps) => react_jsx_runtime.JSX.Element;
-
 type DensityState = "sm" | "md" | "lg";
 interface DensityTableState {
     density: DensityState;
@@ -170,6 +144,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
@@ -181,7 +156,41 @@ 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 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, unknown>;
+    tableLabel: DataTableLabel;
+}
+
+declare const useDataTableContext: <TData>() => DataTableContextProps<TData>;
+
+interface DataDisplayProps {
+    variant?: "horizontal" | "stats" | "";
+    translate?: UseTranslationResponse<any, any>;
+}
+declare const DataDisplay: ({ variant }: DataDisplayProps) => react_jsx_runtime.JSX.Element;
 
 interface DataTableDefaultState {
     sorting?: SortingState;
@@ -276,6 +285,7 @@ interface DataTableServerProps<TData extends DataResponse = DataResponse<unknown
     query: UseQueryResult<TData>;
     url: string;
     translate: UseTranslationResponse<any, any>;
+    tableLabel: DataTableLabel;
 }
 /**
  * DataTableServer will create a context to hold all values to
@@ -288,28 +298,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 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, tableLabel, }: DataTableServerProps<TData>): react_jsx_runtime.JSX.Element;
 
 interface TableControlsProps {
     totalText?: string;
@@ -325,69 +314,130 @@ 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, ...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;
+
+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;
     tableHeaderProps?: TableHeaderProps;
+    tableBodyProps?: TableBodyProps;
+    tableFooterProps?: TableFooterProps;
+    controlProps?: TableControlsProps;
     variant?: "" | "greedy";
 }
-declare const DefaultTable: ({ showFooter, tableProps, tableHeaderProps, tableBodyProps, controlProps, tableFooterProps, variant, }: DefaultTableProps) => react_jsx_runtime.JSX.Element;
+declare const DefaultTable: ({ showFooter, tableProps, tableHeaderProps, tableBodyProps, tableFooterProps, controlProps, variant, }: DefaultTableProps) => 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;
@@ -441,15 +491,47 @@ 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>[];
 
-interface FilterOptionsProps {
-    column: string;
+interface TableDataDisplayProps {
+    colorPalette?: string;
+    emptyComponent?: ReactNode;
 }
-declare const FilterOptions: ({ column }: FilterOptionsProps) => react_jsx_runtime.JSX.Element;
+declare const TableDataDisplay: ({ colorPalette, emptyComponent, }: TableDataDisplayProps) => react_jsx_runtime.JSX.Element;
 
 declare const GlobalFilter: () => react_jsx_runtime.JSX.Element;
 
+interface ForeignKeyProps {
+    column: string;
+    table: string;
+    display_column: 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;
+}
+
 interface FormRootProps<TData extends FieldValues> {
-    schema: JSONSchema7;
+    schema: CustomJSONSchema7;
     serverUrl: string;
     requestUrl?: string;
     idMap: Record<string, object>;
@@ -464,6 +546,7 @@ interface FormRootProps<TData extends FieldValues> {
     rowNumber?: number | string;
     requestOptions?: AxiosRequestConfig;
     getUpdatedData?: () => TData | Promise<TData> | void;
+    customErrorRenderer?: (error: unknown) => ReactNode;
 }
 interface CustomJSONSchema7Definition extends JSONSchema7 {
     variant: string;
@@ -472,7 +555,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?: {
@@ -480,12 +563,13 @@ 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, }: 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 DefaultForm: <TData extends FieldValues>({ formConfig, showTitle, }: DefaultFormProps<TData>) => react_jsx_runtime.JSX.Element;
 
 declare const FormTitle: () => react_jsx_runtime.JSX.Element;
 
@@ -516,6 +600,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 {
@@ -566,6 +673,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.
          *
@@ -586,7 +704,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.
          *
@@ -612,4 +733,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, 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 CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, type DatePickerLabels, 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, 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, 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, TextCell, type TextCellProps, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, ViewDialog, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };