@bsol-oss/react-datatable5 12.0.0-beta.7 → 12.0.0-beta.71

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/useFormI18n.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Custom hook to simplify i18n translation for form fields.
+ * Automatically handles colLabel construction and removeIndex logic.
+ *
+ * @param column - The column name
+ * @param prefix - The prefix for the field (usually empty string or parent path)
+ * @returns Object with translation helper functions
+ *
+ * @example
+ * ```tsx
+ * const formI18n = useFormI18n(column, prefix);
+ *
+ * // Get field label
+ * <Field label={formI18n.label()} />
+ *
+ * // Get error message
+ * <Text>{formI18n.required()}</Text>
+ *
+ * // Get custom translation key
+ * <Text>{formI18n.t('add_more')}</Text>
+ *
+ * // Access the raw colLabel
+ * const colLabel = formI18n.colLabel;
+ * ```
+ */
+export declare const useFormI18n: (column: string, prefix?: string) => {
+    /**
+     * The constructed column label (prefix + column)
+     */
+    colLabel: string;
+    /**
+     * Get the field label translation
+     * Equivalent to: translate.t(removeIndex(`${colLabel}.field_label`))
+     */
+    label: (options?: any) => string;
+    /**
+     * Get the required error message translation
+     * Equivalent to: translate.t(removeIndex(`${colLabel}.field_required`))
+     */
+    required: (options?: any) => string;
+    /**
+     * Get a translation for any custom key relative to the field
+     * Equivalent to: translate.t(removeIndex(`${colLabel}.${key}`))
+     *
+     * @param key - The translation key suffix (e.g., 'add_more', 'total', etc.)
+     * @param options - Optional translation options (e.g., defaultValue, interpolation variables)
+     */
+    t: (key: string, options?: any) => string;
+    /**
+     * Access to the original translate object for edge cases
+     */
+    translate: import("react-i18next").UseTranslationResponse<any, any>;
+};

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

@@ -0,0 +1,9 @@
+import { ErrorObject, ValidateFunction } from "ajv";
+import { JSONSchema7 } from "json-schema";
+type ValidateDataResult = {
+    isValid: boolean;
+    validate: ValidateFunction;
+    errors: ErrorObject<string, Record<string, any>, unknown>[] | null | undefined;
+};
+export declare const validateData: (data: unknown, schema: JSONSchema7) => ValidateDataResult;
+export {};

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/TextArea/TextArea.d.ts

@@ -0,0 +1,22 @@
+import type React from "react";
+interface CustomTextareaProps {
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    onChange?: (value: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    className?: string;
+    rows?: number;
+    maxLength?: number;
+    autoFocus?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+}
+declare const Textarea: React.ForwardRefExoticComponent<CustomTextareaProps & React.RefAttributes<HTMLDivElement>>;
+export { Textarea };

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

@@ -0,0 +1,21 @@
+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;
+    };
+    timezone?: string;
+}
+export declare function TimePicker({ hour, setHour, minute, setMinute, meridiem, setMeridiem, meridiemLabel, onChange, timezone, }: 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.
          *
@@ -86,6 +100,7 @@ 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";
@@ -94,12 +109,13 @@ 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";
 export * from "./components/Form/components/core/FormTitle";
 export * from "./components/Form/components/core/FormBody";
+export * from "./components/Form/components/types/CustomJSONSchema7";
 export * from "./components/Form/useForm";
 export * from "./components/DatePicker/DatePicker";
 export * from "./components/DatePicker/getMultiDates";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "12.0.0-beta.7",
+  "version": "12.0.0-beta.71",
   "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-errors": "^3.0.0",
+    "ajv-formats": "^3.0.1",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",