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

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

@@ -4,8 +4,9 @@ import { JSONSchema7 } from "json-schema";
 import { Dispatch, ReactNode, SetStateAction } from "react";
 import { FieldValues, SubmitHandler, UseFormReturn } from "react-hook-form";
 import { UseTranslationResponse } from "react-i18next";
+import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
 export interface FormRootProps<TData extends FieldValues> {
-    schema: JSONSchema7;
+    schema: CustomJSONSchema7;
     serverUrl: string;
     requestUrl?: string;
     idMap: Record<string, object>;
@@ -20,6 +21,7 @@ export interface FormRootProps<TData extends FieldValues> {
     rowNumber?: number | string;
     requestOptions?: AxiosRequestConfig;
     getUpdatedData?: () => TData | Promise<TData> | void;
+    customErrorRenderer?: (error: unknown) => ReactNode;
 }
 export interface CustomJSONSchema7Definition extends JSONSchema7 {
     variant: string;
@@ -36,4 +38,4 @@ export declare const idPickerSanityCheck: (column: string, foreign_key?: {
     column?: string | undefined;
     display_column?: string | undefined;
 } | undefined) => void;
-export declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, }: FormRootProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, }: FormRootProps<TData>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
+export interface DatePickerProps {
+    column: string;
+    schema: CustomJSONSchema7;
+    prefix: string;
+}
+export declare const CustomInput: ({ column, schema, prefix }: DatePickerProps) => import("react").ReactNode;

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

@@ -1,7 +1,2 @@
-import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
-export interface DatePickerProps {
-    column: string;
-    schema: CustomJSONSchema7;
-    prefix: string;
-}
-export declare const DatePicker: ({ column, schema, prefix }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+import { InputDefaultProps } from "./types";
+export declare const DatePicker: ({ column, schema, prefix }: InputDefaultProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+import { InputDefaultProps } from "./types";
+export declare const DateTimePicker: ({ column, schema, prefix, }: InputDefaultProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,5 +4,6 @@ export interface IdPickerProps {
     isMultiple?: boolean;
     schema: CustomJSONSchema7;
     prefix: string;
+    showTotalAndLimit?: boolean;
 }
-export declare const EnumPicker: ({ column, isMultiple, schema, prefix, }: IdPickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EnumPicker: ({ column, isMultiple, schema, prefix, showTotalAndLimit, }: IdPickerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,2 @@
-export declare const FilePicker: ({ column, schema, prefix }: {
-    column: any;
-    schema: any;
-    prefix: any;
-}) => import("react/jsx-runtime").JSX.Element;
+import { InputDefaultProps } from "./types";
+export declare const FilePicker: ({ column, schema, prefix }: InputDefaultProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,5 @@
-import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
-export interface StringInputFieldProps {
-    column: string;
-    schema: CustomJSONSchema7;
-    prefix: string;
+import { InputDefaultProps } from "./types";
+export interface StringInputFieldProps extends InputDefaultProps {
 }
 export interface ForeignKeyProps {
     column: string;

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

@@ -0,0 +1,12 @@
+import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
+export interface TextAreaInputProps {
+    column: string;
+    schema: CustomJSONSchema7;
+    prefix: string;
+}
+export interface ForeignKeyProps {
+    column: string;
+    table: string;
+    display_column: string;
+}
+export declare const TextAreaInput: ({ column, schema, prefix, }: TextAreaInputProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
+export interface DatePickerProps {
+    column: string;
+    schema: CustomJSONSchema7;
+    prefix: string;
+}
+export declare const TimePicker: ({ column, schema, prefix }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
+export type InputDefaultProps = {
+    column: string;
+    schema: CustomJSONSchema7;
+    prefix: string;
+};

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

@@ -1,12 +1,30 @@
 import { JSONSchema7 } from "json-schema";
 import { ReactNode } from "react";
 import { ForeignKeyProps } from "../fields/StringInputField";
+import { UseFormReturn } from "react-hook-form";
 export interface CustomJSONSchema7 extends JSONSchema7 {
     gridColumn?: string;
     gridRow?: string;
     foreign_key?: ForeignKeyProps;
     variant?: string;
-    renderDisplay: (item: unknown) => ReactNode;
+    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;
 }
 export interface TagPickerProps {
     column: string;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
+export interface DatePickerProps {
+    column: string;
+    schema: CustomJSONSchema7;
+    prefix: string;
+}
+export declare const CustomViewer: ({ column, schema, prefix }: DatePickerProps) => import("react").ReactNode;

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

@@ -0,0 +1,7 @@
+import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
+export interface DateViewerProps {
+    column: string;
+    schema: CustomJSONSchema7;
+    prefix: string;
+}
+export declare const DateTimeViewer: ({ column, schema, prefix }: DateViewerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
+export interface TextAreaViewerProps {
+    column: string;
+    schema: CustomJSONSchema7;
+    prefix: string;
+}
+export interface ForeignKeyProps {
+    column: string;
+    table: string;
+    display_column: string;
+}
+export declare const TextAreaViewer: ({ column, schema, prefix, }: TextAreaViewerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
+export interface TimeViewerProps {
+    column: string;
+    schema: CustomJSONSchema7;
+    prefix: string;
+}
+export declare const TimeViewer: ({ column, schema, prefix }: TimeViewerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+export declare function translateWrapper({ prefix, column, label, translate, }: {
+    prefix: string;
+    column: string;
+    label: string;
+    translate: any;
+}): any;

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

@@ -0,0 +1,104 @@
+import { JSONSchema7 } from "json-schema";
+declare const errorMessages: {
+    en: {
+        required: (field: string) => string;
+        format: (format: string) => string;
+        type: (expectedType: string, actualType: string) => string;
+        minLength: (limit: number) => string;
+        maxLength: (limit: number) => string;
+        minimum: (limit: number) => string;
+        maximum: (limit: number) => string;
+        pattern: () => string;
+        enum: (allowedValues: string[]) => string;
+        default: () => string;
+    };
+    'zh-HK': {
+        required: (field: string) => string;
+        format: (format: string) => string;
+        type: (expectedType: string, actualType: string) => string;
+        minLength: (limit: number) => string;
+        maxLength: (limit: number) => string;
+        minimum: (limit: number) => string;
+        maximum: (limit: number) => string;
+        pattern: () => string;
+        enum: (allowedValues: string[]) => string;
+        default: () => string;
+    };
+    'zh-TW': {
+        required: (field: string) => string;
+        format: (format: string) => string;
+        type: (expectedType: string, actualType: string) => string;
+        minLength: (limit: number) => string;
+        maxLength: (limit: number) => string;
+        minimum: (limit: number) => string;
+        maximum: (limit: number) => string;
+        pattern: () => string;
+        enum: (allowedValues: string[]) => string;
+        default: () => string;
+    };
+    'zh-CN': {
+        required: (field: string) => string;
+        format: (format: string) => string;
+        type: (expectedType: string, actualType: string) => string;
+        minLength: (limit: number) => string;
+        maxLength: (limit: number) => string;
+        minimum: (limit: number) => string;
+        maximum: (limit: number) => string;
+        pattern: () => string;
+        enum: (allowedValues: string[]) => string;
+        default: () => string;
+    };
+    zh: {
+        required: (field: string) => string;
+        format: (format: string) => string;
+        type: (expectedType: string, actualType: string) => string;
+        minLength: (limit: number) => string;
+        maxLength: (limit: number) => string;
+        minimum: (limit: number) => string;
+        maximum: (limit: number) => string;
+        pattern: () => string;
+        enum: (allowedValues: string[]) => string;
+        default: () => string;
+    };
+};
+export type SupportedLocale = keyof typeof errorMessages;
+export interface ValidationError {
+    field: string;
+    message: string;
+    value?: unknown;
+    schemaPath?: string;
+}
+export interface ValidationResult {
+    isValid: boolean;
+    errors: ValidationError[];
+}
+export interface ValidationOptions {
+    locale?: SupportedLocale;
+}
+/**
+ * Validates data against a JSON Schema using AJV with i18n support
+ * @param data - The data to validate
+ * @param schema - The JSON Schema to validate against
+ * @param options - Validation options including locale
+ * @returns ValidationResult containing validation status and errors
+ */
+export declare const validateData: (data: unknown, schema: JSONSchema7, options?: ValidationOptions) => ValidationResult;
+/**
+ * Creates a reusable validator function for a specific schema with i18n support
+ * @param schema - The JSON Schema to create validator for
+ * @param locale - The locale to use for error messages
+ * @returns A function that validates data against the schema
+ */
+export declare const createSchemaValidator: (schema: JSONSchema7, locale?: SupportedLocale) => (data: unknown) => ValidationResult;
+/**
+ * Get available locales for validation error messages
+ * @returns Array of supported locale codes
+ */
+export declare const getSupportedLocales: () => SupportedLocale[];
+/**
+ * Check if a locale is supported
+ * @param locale - The locale to check
+ * @returns Boolean indicating if the locale is supported
+ */
+export declare const isLocaleSupported: (locale: string) => locale is "en" | "zh-HK" | "zh-TW" | "zh-CN" | "zh";
+export {};

package/dist/types/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,20 @@
+import { Dispatch, SetStateAction } from "react";
+interface TimePickerProps {
+    hour: number | null;
+    setHour: Dispatch<SetStateAction<number | null>>;
+    minute: number | null;
+    setMinute: Dispatch<SetStateAction<number | null>>;
+    meridiem: "am" | "pm" | null;
+    setMeridiem: Dispatch<SetStateAction<"am" | "pm" | null>>;
+    onChange?: (newValue: {
+        hour: number | null;
+        minute: number | null;
+        meridiem: "am" | "pm" | null;
+    }) => void;
+    meridiemLabel?: {
+        am: string;
+        pm: string;
+    };
+}
+export declare function TimePicker({ hour, setHour, minute, setMinute, meridiem, setMeridiem, meridiemLabel, onChange, }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/index.d.ts

@@ -12,6 +12,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.
          *
@@ -32,7 +43,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.
          *
@@ -57,44 +71,45 @@ declare module "@tanstack/react-table" {
         renderFilter?: (column: Column<TData>) => ReactNode;
     }
 }
-export * from "./components/Controls/DensityToggleButton";
-export * from "./components/Controls/EditSortingButton";
-export * from "./components/Controls/FilterDialog";
-export * from "./components/Controls/PageSizeControl";
-export * from "./components/Controls/Pagination";
-export * from "./components/Controls/ResetFilteringButton";
-export * from "./components/Controls/ResetSelectionButton";
-export * from "./components/Controls/ResetSortingButton";
-export * from "./components/Controls/RowCountText";
-export * from "./components/Controls/ViewDialog";
-export * from "./components/DataTable/CardHeader";
-export * from "./components/DataTable/components/EmptyState";
-export * from "./components/DataTable/components/ErrorAlert";
+export * from "./components/DataTable/controls/DensityToggleButton";
+export * from "./components/DataTable/controls/EditSortingButton";
+export * from "./components/DataTable/controls/FilterDialog";
+export * from "./components/DataTable/controls/PageSizeControl";
+export * from "./components/DataTable/controls/Pagination";
+export * from "./components/DataTable/controls/ResetFilteringButton";
+export * from "./components/DataTable/controls/ResetSelectionButton";
+export * from "./components/DataTable/controls/ResetSortingButton";
+export * from "./components/DataTable/controls/RowCountText";
+export * from "./components/DataTable/controls/ViewDialog";
+export * from "./components/DataTable/display/CardHeader";
+export * from "./components/DataTable/display/EmptyState";
+export * from "./components/DataTable/display/ErrorAlert";
 export * from "./components/DataTable/context/useDataTableContext";
-export * from "./components/DataTable/DataDisplay";
+export * from "./components/DataTable/display/DataDisplay";
 export * from "./components/DataTable/DataTable";
 export * from "./components/DataTable/DataTableServer";
 export * from "./components/DataTable/DefaultTable";
-export * from "./components/DataTable/ReloadButton";
-export * from "./components/DataTable/Table";
-export * from "./components/DataTable/TableBody";
-export * from "./components/DataTable/TableCardContainer";
-export * from "./components/DataTable/TableCards";
-export * from "./components/DataTable/TableComponent";
-export * from "./components/DataTable/TableControls";
-export * from "./components/DataTable/TableFilters";
-export * from "./components/DataTable/TableFilterTags";
-export * from "./components/DataTable/TableFooter";
-export * from "./components/DataTable/TableHeader";
-export * from "./components/DataTable/TableLoadingComponent";
-export * from "./components/DataTable/TableSelector";
-export * from "./components/DataTable/TableSorter";
-export * from "./components/DataTable/TableViewer";
-export * from "./components/DataTable/components/TextCell";
+export * from "./components/DataTable/controls/ReloadButton";
+export * from "./components/DataTable/display/Table";
+export * from "./components/DataTable/display/TableBody";
+export * from "./components/DataTable/display/TableCardContainer";
+export * from "./components/DataTable/display/TableCards";
+export * from "./components/DataTable/display/TableComponent";
+export * from "./components/DataTable/controls/TableControls";
+export * from "./components/DataTable/controls/TableFilters";
+export * from "./components/DataTable/controls/TableFilterTags";
+export * from "./components/DataTable/display/TableFooter";
+export * from "./components/DataTable/display/TableHeader";
+export type { TableHeaderTexts } from "./components/DataTable/display/TableHeader";
+export * from "./components/DataTable/display/TableLoadingComponent";
+export * from "./components/DataTable/controls/TableSelector";
+export * from "./components/DataTable/controls/TableSorter";
+export * from "./components/DataTable/controls/TableViewer";
+export * from "./components/DataTable/display/TextCell";
 export * from "./components/DataTable/useDataTable";
 export * from "./components/DataTable/useDataTableServer";
 export * from "./components/DataTable/utils/getColumns";
-export * from "./components/Filter/FilterOptions";
+export * from "./components/DataTable/display/TableDataDisplay";
 export * from "./components/Filter/GlobalFilter";
 export * from "./components/Form/components/core/DefaultForm";
 export * from "./components/Form/components/core/FormRoot";
@@ -105,4 +120,4 @@ export * from "./components/DatePicker/DatePicker";
 export * from "./components/DatePicker/getMultiDates";
 export * from "./components/DatePicker/getRangeDates";
 export * from "./components/DatePicker/RangeDatePicker";
-export * from "./components/DataTable/components/RecordDisplay";
+export * from "./components/DataTable/display/RecordDisplay";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "12.0.0-beta.6",
+  "version": "12.0.0-beta.60",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -37,12 +37,15 @@
   "peerDependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
     "@bsol-oss/dayzed-react19": "^0.0.4",
-    "@chakra-ui/react": "^3.2.3",
+    "@chakra-ui/react": "^3.19.1",
     "@emotion/react": "^11.13.5",
     "@tanstack/match-sorter-utils": "^8.15.1",
     "@tanstack/react-query": "^5.66.9",
     "@tanstack/react-table": "^8.21.2",
     "@uidotdev/usehooks": "^2.4.1",
+    "ajv": "^8.12.0",
+    "ajv-errors": "^3.0.0",
+    "ajv-formats": "^3.0.1",
     "axios": "^1.7.9",
     "dayjs": "^1.11.13",
     "next-themes": "^0.4.4",
@@ -63,6 +66,7 @@
     "@storybook/react": "^8.4.7",
     "@storybook/react-vite": "^8.4.7",
     "@storybook/test": "^8.4.7",
+    "@types/ajv-errors": "^2.0.0",
     "@types/json-schema": "^7.0.15",
     "@types/react": "19.0.2",
     "@types/react-beautiful-dnd": "^13.1.8",
@@ -70,6 +74,9 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "ajv": "^8.12.0",
+    "ajv-formats": "^3.0.1",
+    "ajv-errors": "^3.0.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",