@bsol-oss/react-datatable5 13.0.1-beta.14 → 13.0.1-beta.16

package/dist/index.d.ts

@@ -130,8 +130,6 @@ interface TableControlsProps {
     children?: ReactNode;
     showGlobalFilter?: boolean;
     showFilter?: boolean;
-    showFilterName?: boolean;
-    showFilterTags?: boolean;
     showReload?: boolean;
     showPagination?: boolean;
     showPageSizeControl?: boolean;
@@ -149,7 +147,7 @@ interface TableControlsProps {
     hasError?: boolean;
     gridProps?: GridProps;
 }
-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;
+declare const TableControls: ({ fitTableWidth, fitTableHeight, children, showGlobalFilter, showFilter, showReload, showPagination, showPageSizeControl, showPageCountText, showView, filterTagsOptions, extraItems, loading, hasError, gridProps, }: TableControlsProps) => react_jsx_runtime.JSX.Element;
 
 declare const TableFilter: () => react_jsx_runtime.JSX.Element;
 
@@ -322,7 +320,7 @@ interface UseDataTableReturn {
 }
 declare const useDataTable: ({ default: { sorting: defaultSorting, pagination: defaultPagination, rowSelection: defaultRowSelection, columnFilters: defaultColumnFilters, columnOrder: defaultColumnOrder, columnVisibility: defaultColumnVisibility, globalFilter: defaultGlobalFilter, density: defaultDensity, }, }?: UseDataTableProps) => UseDataTableReturn;
 
-interface UseDataTableServerProps<TData> extends Omit<UseDataTableProps, 'keyPrefix'> {
+interface UseDataTableServerProps<TData> extends UseDataTableProps {
     /**
      * Delay to send the request if the `refreshData` called multiple times
      *
@@ -511,11 +509,10 @@ interface Translate {
 }
 interface UseFormProps {
     preLoadedValues?: FieldValues | undefined;
-    keyPrefix?: string;
     namespace?: string;
     schema?: JSONSchema7;
 }
-declare const useForm: ({ preLoadedValues, keyPrefix: _keyPrefix, namespace: _namespace, schema, }: UseFormProps) => {
+declare const useForm: ({ preLoadedValues, namespace: _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>>>;
@@ -702,16 +699,15 @@ declare const convertToAjvErrorsFormat: (errorMessages: ErrorMessageResult) => R
  * );
  * // Result: { username: "This field is required", email: "This field is required" }
  *
- * // With keyPrefix for i18n
+ * // With prefix in generator function
  * const required = buildRequiredErrors(
  *   ["username", "email"],
- *   (field) => `${field}.field_required`,
- *   "user"
+ *   (field) => `user.${field}.field_required`
  * );
  * // 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>;
+declare const buildRequiredErrors: (fields: string[], messageOrGenerator: string | ((field: string) => string)) => Record<string, string>;
 /**
  * Helper function to build field-specific validation errors
  *

package/dist/index.js

@@ -3198,19 +3198,31 @@ const TableSelector = () => {
                 }, "aria-label": 'reset selection', children: jsxRuntime.jsx(md.MdClear, {}) }))] }));
 };
 
+const Tag = React__namespace.forwardRef(function Tag(props, ref) {
+    const { startElement, endElement, onClose, closable = !!onClose, children, ...rest } = props;
+    return (jsxRuntime.jsxs(react.Tag.Root, { ref: ref, ...rest, children: [startElement && (jsxRuntime.jsx(react.Tag.StartElement, { children: startElement })), jsxRuntime.jsx(react.Tag.Label, { children: children }), endElement && (jsxRuntime.jsx(react.Tag.EndElement, { children: endElement })), closable && (jsxRuntime.jsx(react.Tag.EndElement, { children: jsxRuntime.jsx(react.Tag.CloseTrigger, { onClick: onClose }) }))] }));
+});
+
 const Checkbox = React__namespace.forwardRef(function Checkbox(props, ref) {
     const { icon, children, inputProps, rootRef, ...rest } = props;
     return (jsxRuntime.jsxs(react.Checkbox.Root, { ref: rootRef, ...rest, children: [jsxRuntime.jsx(react.Checkbox.HiddenInput, { ref: ref, ...inputProps }), jsxRuntime.jsx(react.Checkbox.Control, { children: icon || jsxRuntime.jsx(react.Checkbox.Indicator, {}) }), children != null && (jsxRuntime.jsx(react.Checkbox.Label, { children: children }))] }));
 });
 
-const ColumnFilterMenu = ({ displayName, filterOptions, filterVariant, colorPalette, value: controlledValue, onChange, labels, }) => {
+const ColumnFilterMenu = ({ displayName, filterOptions, filterVariant, colorPalette, value: controlledValue, onChange, labels, open: controlledOpen, onOpenChange, }) => {
     const [searchTerm, setSearchTerm] = React.useState('');
     const debouncedSearchTerm = usehooks.useDebounce(searchTerm, 300);
-    const [isOpen, setIsOpen] = React.useState(false);
+    const [internalOpen, setInternalOpen] = React.useState(false);
+    // Use controlled open state if provided, otherwise use internal state
+    const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
+    const handleOpenChange = (details) => {
+        if (onOpenChange) {
+            onOpenChange(details.open);
+        }
+        else {
+            setInternalOpen(details.open);
+        }
+    };
     const [internalValue, setInternalValue] = React.useState(undefined);
-    const [pendingFilterValue, setPendingFilterValue] = React.useState(undefined);
-    const debouncedFilterValue = usehooks.useDebounce(pendingFilterValue, 300);
-    const lastAppliedValueRef = React.useRef('__INITIAL__');
     // Use controlled value if provided, otherwise use internal state
     const currentFilterValue = controlledValue !== undefined ? controlledValue : internalValue;
     const isArrayFilter = filterVariant === 'tag';
@@ -3221,31 +3233,20 @@ const ColumnFilterMenu = ({ displayName, filterOptions, filterVariant, colorPale
         noFiltersMatchText: 'No filters match your search',
     };
     const finalLabels = { ...defaultLabels, ...labels };
-    // Apply debounced filter value via onChange callback
+    // Reset search term when menu closes
     React.useEffect(() => {
-        const currentKey = JSON.stringify(debouncedFilterValue);
-        // Only apply if the value has changed from what we last applied
-        if (currentKey !== lastAppliedValueRef.current) {
-            if (onChange) {
-                onChange(debouncedFilterValue);
-            }
-            else {
-                setInternalValue(debouncedFilterValue);
-            }
-            lastAppliedValueRef.current = currentKey;
+        if (!isOpen) {
+            setSearchTerm('');
+        }
+    }, [isOpen]);
+    // Filter update function
+    const setFilterValue = (value) => {
+        if (onChange) {
+            onChange(value);
+        }
+        else {
+            setInternalValue(value);
         }
-    }, [debouncedFilterValue, onChange]);
-    // Sync internal value when controlled value changes
-    React.useEffect(() => {
-        if (controlledValue !== undefined) {
-            setInternalValue(controlledValue);
-            setPendingFilterValue(controlledValue);
-            lastAppliedValueRef.current = JSON.stringify(controlledValue);
-        }
-    }, [controlledValue]);
-    // Debounced filter update function
-    const debouncedSetFilterValue = (value) => {
-        setPendingFilterValue(value);
     };
     // Get active count for this column
     const activeCount = React.useMemo(() => {
@@ -3264,7 +3265,7 @@ const ColumnFilterMenu = ({ displayName, filterOptions, filterVariant, colorPale
         const searchLower = debouncedSearchTerm.toLowerCase();
         return filterOptions.filter((option) => option.label.toLowerCase().includes(searchLower));
     }, [filterOptions, debouncedSearchTerm]);
-    return (jsxRuntime.jsxs(MenuRoot, { open: isOpen, onOpenChange: (details) => setIsOpen(details.open), children: [jsxRuntime.jsx(MenuTrigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { variant: "outline", size: "sm", gap: 2, children: [jsxRuntime.jsx(react.Icon, { as: md.MdFilterList }), jsxRuntime.jsxs(react.Text, { children: [displayName, " ", activeCount > 0 && `(${activeCount})`] })] }) }), jsxRuntime.jsx(MenuContent, { maxW: "20rem", minW: "18rem", children: jsxRuntime.jsxs(react.VStack, { align: "stretch", gap: 2, p: 2, children: [jsxRuntime.jsxs(react.Heading, { size: "sm", px: 2, children: [finalLabels.filterByLabel, " ", displayName] }), jsxRuntime.jsx(InputGroup, { startElement: jsxRuntime.jsx(react.Icon, { as: md.MdSearch }), children: jsxRuntime.jsx(react.Input, { placeholder: finalLabels.filterLabelsPlaceholder, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value) }) }), jsxRuntime.jsx(react.Box, { maxH: "20rem", overflowY: "auto", css: {
+    return (jsxRuntime.jsxs(MenuRoot, { open: isOpen, onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(MenuTrigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { variant: "outline", size: "sm", gap: 2, children: [jsxRuntime.jsx(react.Icon, { as: md.MdFilterList }), jsxRuntime.jsxs(react.Text, { children: [displayName, " ", activeCount > 0 && `(${activeCount})`] })] }) }), jsxRuntime.jsx(MenuContent, { maxW: "20rem", minW: "18rem", children: jsxRuntime.jsxs(react.VStack, { align: "stretch", gap: 2, p: 2, children: [jsxRuntime.jsxs(react.Heading, { size: "sm", px: 2, children: [finalLabels.filterByLabel, " ", displayName] }), jsxRuntime.jsx(InputGroup, { startElement: jsxRuntime.jsx(react.Icon, { as: md.MdSearch }), children: jsxRuntime.jsx(react.Input, { placeholder: finalLabels.filterLabelsPlaceholder, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value) }) }), jsxRuntime.jsx(react.Box, { maxH: "20rem", overflowY: "auto", css: {
                                 '&::-webkit-scrollbar': {
                                     width: '8px',
                                 },
@@ -3290,29 +3291,26 @@ const ColumnFilterMenu = ({ displayName, filterOptions, filterVariant, colorPale
                                                 // Remove from filter
                                                 const newArray = currentArray.filter((v) => v !== option.value);
                                                 if (newArray.length === 0) {
-                                                    debouncedSetFilterValue(undefined);
+                                                    setFilterValue(undefined);
                                                 }
                                                 else {
-                                                    debouncedSetFilterValue(newArray);
+                                                    setFilterValue(newArray);
                                                 }
                                             }
                                             else {
                                                 // Add to filter
                                                 if (!currentArray.includes(option.value)) {
-                                                    debouncedSetFilterValue([
-                                                        ...currentArray,
-                                                        option.value,
-                                                    ]);
+                                                    setFilterValue([...currentArray, option.value]);
                                                 }
                                             }
                                         }
                                         else {
                                             // Handle single value filters (select variant)
                                             if (isActive) {
-                                                debouncedSetFilterValue(undefined);
+                                                setFilterValue(undefined);
                                             }
                                             else {
-                                                debouncedSetFilterValue(option.value);
+                                                setFilterValue(option.value);
                                             }
                                         }
                                     };
@@ -3327,7 +3325,7 @@ const ColumnFilterMenu = ({ displayName, filterOptions, filterVariant, colorPale
                                                                 if (details.checked) {
                                                                     // Add to filter
                                                                     if (!currentArray.includes(option.value)) {
-                                                                        debouncedSetFilterValue([
+                                                                        setFilterValue([
                                                                             ...currentArray,
                                                                             option.value,
                                                                         ]);
@@ -3337,20 +3335,20 @@ const ColumnFilterMenu = ({ displayName, filterOptions, filterVariant, colorPale
                                                                     // Remove from filter
                                                                     const newArray = currentArray.filter((v) => v !== option.value);
                                                                     if (newArray.length === 0) {
-                                                                        debouncedSetFilterValue(undefined);
+                                                                        setFilterValue(undefined);
                                                                     }
                                                                     else {
-                                                                        debouncedSetFilterValue(newArray);
+                                                                        setFilterValue(newArray);
                                                                     }
                                                                 }
                                                             }
                                                             else {
                                                                 // Handle single value filters (select variant)
                                                                 if (details.checked) {
-                                                                    debouncedSetFilterValue(option.value);
+                                                                    setFilterValue(option.value);
                                                                 }
                                                                 else {
-                                                                    debouncedSetFilterValue(undefined);
+                                                                    setFilterValue(undefined);
                                                                 }
                                                             }
                                                         } }) }), jsxRuntime.jsx(react.Box, { flex: 1, minW: 0, children: jsxRuntime.jsxs(react.HStack, { gap: 2, align: "center", children: [jsxRuntime.jsx(react.Box, { w: 3, h: 3, borderRadius: "full", bg: `${colorPalette}.500`, flexShrink: 0 }), jsxRuntime.jsx(react.Text, { fontSize: "sm", fontWeight: "medium", truncate: true, children: option.label })] }) })] }) }, option.value));
@@ -3418,10 +3416,64 @@ const TableFilterTags = ({ filterTagsOptions = [], } = {}) => {
         }) }));
 };
 
-const TableControls = ({ fitTableWidth = false, fitTableHeight = false, children = jsxRuntime.jsx(jsxRuntime.Fragment, {}), showGlobalFilter = false, showFilter = false, showFilterName = false, showFilterTags = false, showReload = false, showPagination = true, showPageSizeControl = true, showPageCountText = true, showView = true, filterTagsOptions = [], extraItems = jsxRuntime.jsx(jsxRuntime.Fragment, {}), loading = false, hasError = false, gridProps = {}, }) => {
-    const { tableLabel, table } = useDataTableContext();
+const TableControls = ({ fitTableWidth = false, fitTableHeight = false, children = jsxRuntime.jsx(jsxRuntime.Fragment, {}), showGlobalFilter = false, showFilter = false, showReload = false, showPagination = true, showPageSizeControl = true, showPageCountText = true, showView = true, filterTagsOptions = [], extraItems = jsxRuntime.jsx(jsxRuntime.Fragment, {}), loading = false, hasError = false, gridProps = {}, }) => {
+    const { tableLabel, table, columnFilters, setColumnFilters } = useDataTableContext();
     const { hasErrorText } = tableLabel;
-    return (jsxRuntime.jsxs(react.Grid, { templateRows: 'auto 1fr', width: fitTableWidth ? 'fit-content' : '100%', height: fitTableHeight ? 'fit-content' : '100%', gap: '0.5rem', p: 1, ...gridProps, children: [jsxRuntime.jsxs(react.Flex, { flexFlow: 'column', gap: 2, children: [jsxRuntime.jsxs(react.Flex, { justifyContent: 'space-between', children: [jsxRuntime.jsx(react.Box, { children: showView && jsxRuntime.jsx(ViewDialog, { icon: jsxRuntime.jsx(md.MdOutlineViewColumn, {}) }) }), jsxRuntime.jsxs(react.Flex, { gap: '0.5rem', alignItems: 'center', justifySelf: 'end', children: [loading && jsxRuntime.jsx(react.Spinner, { size: 'sm' }), hasError && (jsxRuntime.jsx(Tooltip, { content: hasErrorText, children: jsxRuntime.jsx(react.Icon, { as: bs.BsExclamationCircleFill, color: 'red.400' }) })), showGlobalFilter && jsxRuntime.jsx(GlobalFilter, {}), showFilter && jsxRuntime.jsx(FilterDialog, {}), showReload && jsxRuntime.jsx(ReloadButton, {}), extraItems] })] }), showFilterTags && (jsxRuntime.jsx(TableFilterTags, { filterTagsOptions: filterTagsOptions }))] }), jsxRuntime.jsx(react.Grid, { children: children }), (showPageSizeControl || showPageCountText || showPagination) && (jsxRuntime.jsxs(react.Flex, { justifyContent: 'space-between', children: [jsxRuntime.jsxs(react.Flex, { gap: '1rem', alignItems: 'center', children: [showPageSizeControl && jsxRuntime.jsx(PageSizeControl, {}), showPageCountText && jsxRuntime.jsx(RowCountText, {})] }), jsxRuntime.jsx(react.Box, { justifySelf: 'end', children: showPagination && jsxRuntime.jsx(Pagination, {}) })] }))] }));
+    // Get applied filters with display information
+    const appliedFilters = React.useMemo(() => {
+        return columnFilters
+            .map((filter) => {
+            const column = table.getColumn(filter.id);
+            if (!column)
+                return null;
+            const meta = column.columnDef.meta;
+            const displayName = meta?.displayName ?? filter.id;
+            const filterValue = filter.value;
+            // Handle array values (tag filters)
+            if (Array.isArray(filterValue)) {
+                return {
+                    columnId: filter.id,
+                    displayName,
+                    values: filterValue,
+                    isArray: true,
+                };
+            }
+            // Handle single values (select filters)
+            if (filterValue !== undefined &&
+                filterValue !== null &&
+                filterValue !== '') {
+                return {
+                    columnId: filter.id,
+                    displayName,
+                    value: String(filterValue),
+                    isArray: false,
+                };
+            }
+            return null;
+        })
+            .filter((filter) => filter !== null);
+    }, [columnFilters, table]);
+    const handleRemoveFilter = (columnId) => {
+        setColumnFilters(columnFilters.filter((f) => f.id !== columnId));
+    };
+    return (jsxRuntime.jsxs(react.Grid, { templateRows: 'auto 1fr', width: fitTableWidth ? 'fit-content' : '100%', height: fitTableHeight ? 'fit-content' : '100%', gap: '0.5rem', p: 1, ...gridProps, children: [jsxRuntime.jsx(react.Flex, { flexFlow: 'column', gap: 2, children: jsxRuntime.jsxs(react.Flex, { justifyContent: 'space-between', children: [jsxRuntime.jsxs(react.Flex, { gap: 2, alignItems: 'center', flexWrap: 'wrap', children: [showView && jsxRuntime.jsx(ViewDialog, { icon: jsxRuntime.jsx(md.MdOutlineViewColumn, {}) }), appliedFilters.length > 0 && (jsxRuntime.jsx(react.Flex, { gap: 1.5, alignItems: 'center', flexWrap: 'wrap', children: appliedFilters.map((filter) => {
+                                        if (filter.isArray) {
+                                            return filter.values.map((value, index) => (jsxRuntime.jsxs(Tag, { size: "sm", colorPalette: "blue", onClose: () => {
+                                                    const column = table.getColumn(filter.columnId);
+                                                    if (column) {
+                                                        const currentValue = column.getFilterValue() ?? [];
+                                                        const newValue = currentValue.filter((v) => v !== value);
+                                                        if (newValue.length === 0) {
+                                                            handleRemoveFilter(filter.columnId);
+                                                        }
+                                                        else {
+                                                            column.setFilterValue(newValue);
+                                                        }
+                                                    }
+                                                }, children: [filter.displayName, ": ", value] }, `${filter.columnId}-${value}-${index}`)));
+                                        }
+                                        return (jsxRuntime.jsxs(Tag, { size: "sm", colorPalette: "blue", onClose: () => handleRemoveFilter(filter.columnId), children: [filter.displayName, ": ", filter.value] }, filter.columnId));
+                                    }) }))] }), jsxRuntime.jsxs(react.Flex, { gap: '0.5rem', alignItems: 'center', justifySelf: 'end', children: [loading && jsxRuntime.jsx(react.Spinner, { size: 'sm' }), hasError && (jsxRuntime.jsx(Tooltip, { content: hasErrorText, children: jsxRuntime.jsx(react.Icon, { as: bs.BsExclamationCircleFill, color: 'red.400' }) })), showGlobalFilter && jsxRuntime.jsx(GlobalFilter, {}), filterTagsOptions.length > 0 && (jsxRuntime.jsx(TableFilterTags, { filterTagsOptions: filterTagsOptions })), showFilter && jsxRuntime.jsx(FilterDialog, {}), showReload && jsxRuntime.jsx(ReloadButton, {}), extraItems] })] }) }), jsxRuntime.jsx(react.Grid, { children: children }), (showPageSizeControl || showPageCountText || showPagination) && (jsxRuntime.jsxs(react.Flex, { justifyContent: 'space-between', children: [jsxRuntime.jsxs(react.Flex, { gap: '1rem', alignItems: 'center', children: [showPageSizeControl && jsxRuntime.jsx(PageSizeControl, {}), showPageCountText && jsxRuntime.jsx(RowCountText, {})] }), jsxRuntime.jsx(react.Box, { justifySelf: 'end', children: showPagination && jsxRuntime.jsx(Pagination, {}) })] }))] }));
 };
 
 const EmptyState$1 = React__namespace.forwardRef(function EmptyState(props, ref) {
@@ -3989,11 +4041,6 @@ label, containerProps = {}, textProps = {}, children, }) => {
     return (jsxRuntime.jsx(react.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", wordBreak: "break-all", overflow: "auto", display: "flex", alignItems: "center", justifyContent: alignEnd ? 'flex-end' : undefined, height: "100%", textAlign: alignEnd ? 'right' : undefined, children: jsxRuntime.jsx(RenderValue, { text: displayValue, href: href, onClick: onClick, isCopyable: isCopyable, isBadge: isBadge, badgeColor: badgeColor, colorPalette: colorPalette, globalFilter: globalFilter, alignEnd: alignEnd }) }));
 };
 
-const Tag = React__namespace.forwardRef(function Tag(props, ref) {
-    const { startElement, endElement, onClose, closable = !!onClose, children, ...rest } = props;
-    return (jsxRuntime.jsxs(react.Tag.Root, { ref: ref, ...rest, children: [startElement && (jsxRuntime.jsx(react.Tag.StartElement, { children: startElement })), jsxRuntime.jsx(react.Tag.Label, { children: children }), endElement && (jsxRuntime.jsx(react.Tag.EndElement, { children: endElement })), closable && (jsxRuntime.jsx(react.Tag.EndElement, { children: jsxRuntime.jsx(react.Tag.CloseTrigger, { onClick: onClose }) }))] }));
-});
-
 const CardHeader = ({ row, imageColumnId = undefined, titleColumnId = undefined, tagColumnId = undefined, tagIcon = undefined, showTag = true, imageProps = {}, }) => {
     if (!!row.original === false) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
@@ -8985,8 +9032,7 @@ const DefaultForm = ({ formConfig, }) => {
     return (jsxRuntime.jsx(FormRoot, { ...formConfig, children: jsxRuntime.jsxs(react.Grid, { gap: "2", children: [showTitle && jsxRuntime.jsx(FormTitle, {}), jsxRuntime.jsx(FormBody, {})] }) }));
 };
 
-const useForm = ({ preLoadedValues, keyPrefix: _keyPrefix, // Deprecated: kept for backward compatibility
-namespace: _namespace, // Deprecated: kept for backward compatibility
+const useForm = ({ preLoadedValues, namespace: _namespace, // Deprecated: kept for backward compatibility
 schema, }) => {
     const form = reactHookForm.useForm({
         values: preLoadedValues,
@@ -9159,21 +9205,19 @@ const convertToAjvErrorsFormat = (errorMessages) => {
  * );
  * // Result: { username: "This field is required", email: "This field is required" }
  *
- * // With keyPrefix for i18n
+ * // With prefix in generator function
  * const required = buildRequiredErrors(
  *   ["username", "email"],
- *   (field) => `${field}.field_required`,
- *   "user"
+ *   (field) => `user.${field}.field_required`
  * );
  * // Result: { username: "user.username.field_required", email: "user.email.field_required" }
  * ```
  */
-const buildRequiredErrors = (fields, messageOrGenerator, keyPrefix = '') => {
+const buildRequiredErrors = (fields, messageOrGenerator) => {
     const result = {};
     fields.forEach((field) => {
         if (typeof messageOrGenerator === 'function') {
-            const message = messageOrGenerator(field);
-            result[field] = keyPrefix ? `${keyPrefix}.${message}` : message;
+            result[field] = messageOrGenerator(field);
         }
         else {
             result[field] = messageOrGenerator;

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal, Dialog, Flex, Text, useDisclosure, DialogBackdrop, RadioGroup as RadioGroup$1, Grid, Box, Slider as Slider$1, HStack, For, CheckboxCard as CheckboxCard$1, Input, Menu, createRecipeContext, createContext as createContext$1, Pagination as Pagination$1, usePaginationContext, Tooltip as Tooltip$1, Group, InputElement, Checkbox as Checkbox$1, Icon, VStack, Heading, EmptyState as EmptyState$2, List, Table as Table$1, Card, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, Clipboard, Badge, Link, Tag as Tag$1, Image, Alert, Field as Field$1, Popover, useFilter, useListCollection, Combobox, Tabs, useCombobox, Show, Skeleton, NumberInput, RadioCard, CheckboxGroup, Textarea as Textarea$1, InputGroup as InputGroup$1, Select, Center, Stack } from '@chakra-ui/react';
+import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal, Dialog, Flex, Text, useDisclosure, DialogBackdrop, RadioGroup as RadioGroup$1, Grid, Box, Slider as Slider$1, HStack, For, CheckboxCard as CheckboxCard$1, Input, Menu, createRecipeContext, createContext as createContext$1, Pagination as Pagination$1, usePaginationContext, Tooltip as Tooltip$1, Group, InputElement, Tag as Tag$1, Checkbox as Checkbox$1, Icon, VStack, Heading, EmptyState as EmptyState$2, List, Table as Table$1, Card, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, Clipboard, Badge, Link, Image, Alert, Field as Field$1, Popover, useFilter, useListCollection, Combobox, Tabs, useCombobox, Show, Skeleton, NumberInput, RadioCard, CheckboxGroup, Textarea as Textarea$1, InputGroup as InputGroup$1, Select, Center, Stack } from '@chakra-ui/react';
 import { AiOutlineColumnWidth } from 'react-icons/ai';
 import * as React from 'react';
 import { createContext, useContext, useState, useMemo, useCallback, useEffect, useRef } from 'react';
@@ -3178,19 +3178,31 @@ const TableSelector = () => {
                 }, "aria-label": 'reset selection', children: jsx(MdClear, {}) }))] }));
 };
 
+const Tag = React.forwardRef(function Tag(props, ref) {
+    const { startElement, endElement, onClose, closable = !!onClose, children, ...rest } = props;
+    return (jsxs(Tag$1.Root, { ref: ref, ...rest, children: [startElement && (jsx(Tag$1.StartElement, { children: startElement })), jsx(Tag$1.Label, { children: children }), endElement && (jsx(Tag$1.EndElement, { children: endElement })), closable && (jsx(Tag$1.EndElement, { children: jsx(Tag$1.CloseTrigger, { onClick: onClose }) }))] }));
+});
+
 const Checkbox = React.forwardRef(function Checkbox(props, ref) {
     const { icon, children, inputProps, rootRef, ...rest } = props;
     return (jsxs(Checkbox$1.Root, { ref: rootRef, ...rest, children: [jsx(Checkbox$1.HiddenInput, { ref: ref, ...inputProps }), jsx(Checkbox$1.Control, { children: icon || jsx(Checkbox$1.Indicator, {}) }), children != null && (jsx(Checkbox$1.Label, { children: children }))] }));
 });
 
-const ColumnFilterMenu = ({ displayName, filterOptions, filterVariant, colorPalette, value: controlledValue, onChange, labels, }) => {
+const ColumnFilterMenu = ({ displayName, filterOptions, filterVariant, colorPalette, value: controlledValue, onChange, labels, open: controlledOpen, onOpenChange, }) => {
     const [searchTerm, setSearchTerm] = useState('');
     const debouncedSearchTerm = useDebounce(searchTerm, 300);
-    const [isOpen, setIsOpen] = useState(false);
+    const [internalOpen, setInternalOpen] = useState(false);
+    // Use controlled open state if provided, otherwise use internal state
+    const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
+    const handleOpenChange = (details) => {
+        if (onOpenChange) {
+            onOpenChange(details.open);
+        }
+        else {
+            setInternalOpen(details.open);
+        }
+    };
     const [internalValue, setInternalValue] = useState(undefined);
-    const [pendingFilterValue, setPendingFilterValue] = useState(undefined);
-    const debouncedFilterValue = useDebounce(pendingFilterValue, 300);
-    const lastAppliedValueRef = useRef('__INITIAL__');
     // Use controlled value if provided, otherwise use internal state
     const currentFilterValue = controlledValue !== undefined ? controlledValue : internalValue;
     const isArrayFilter = filterVariant === 'tag';
@@ -3201,31 +3213,20 @@ const ColumnFilterMenu = ({ displayName, filterOptions, filterVariant, colorPale
         noFiltersMatchText: 'No filters match your search',
     };
     const finalLabels = { ...defaultLabels, ...labels };
-    // Apply debounced filter value via onChange callback
+    // Reset search term when menu closes
     useEffect(() => {
-        const currentKey = JSON.stringify(debouncedFilterValue);
-        // Only apply if the value has changed from what we last applied
-        if (currentKey !== lastAppliedValueRef.current) {
-            if (onChange) {
-                onChange(debouncedFilterValue);
-            }
-            else {
-                setInternalValue(debouncedFilterValue);
-            }
-            lastAppliedValueRef.current = currentKey;
+        if (!isOpen) {
+            setSearchTerm('');
+        }
+    }, [isOpen]);
+    // Filter update function
+    const setFilterValue = (value) => {
+        if (onChange) {
+            onChange(value);
+        }
+        else {
+            setInternalValue(value);
         }
-    }, [debouncedFilterValue, onChange]);
-    // Sync internal value when controlled value changes
-    useEffect(() => {
-        if (controlledValue !== undefined) {
-            setInternalValue(controlledValue);
-            setPendingFilterValue(controlledValue);
-            lastAppliedValueRef.current = JSON.stringify(controlledValue);
-        }
-    }, [controlledValue]);
-    // Debounced filter update function
-    const debouncedSetFilterValue = (value) => {
-        setPendingFilterValue(value);
     };
     // Get active count for this column
     const activeCount = useMemo(() => {
@@ -3244,7 +3245,7 @@ const ColumnFilterMenu = ({ displayName, filterOptions, filterVariant, colorPale
         const searchLower = debouncedSearchTerm.toLowerCase();
         return filterOptions.filter((option) => option.label.toLowerCase().includes(searchLower));
     }, [filterOptions, debouncedSearchTerm]);
-    return (jsxs(MenuRoot, { open: isOpen, onOpenChange: (details) => setIsOpen(details.open), children: [jsx(MenuTrigger, { asChild: true, children: jsxs(Button$1, { variant: "outline", size: "sm", gap: 2, children: [jsx(Icon, { as: MdFilterList }), jsxs(Text, { children: [displayName, " ", activeCount > 0 && `(${activeCount})`] })] }) }), jsx(MenuContent, { maxW: "20rem", minW: "18rem", children: jsxs(VStack, { align: "stretch", gap: 2, p: 2, children: [jsxs(Heading, { size: "sm", px: 2, children: [finalLabels.filterByLabel, " ", displayName] }), jsx(InputGroup, { startElement: jsx(Icon, { as: MdSearch }), children: jsx(Input, { placeholder: finalLabels.filterLabelsPlaceholder, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value) }) }), jsx(Box, { maxH: "20rem", overflowY: "auto", css: {
+    return (jsxs(MenuRoot, { open: isOpen, onOpenChange: handleOpenChange, children: [jsx(MenuTrigger, { asChild: true, children: jsxs(Button$1, { variant: "outline", size: "sm", gap: 2, children: [jsx(Icon, { as: MdFilterList }), jsxs(Text, { children: [displayName, " ", activeCount > 0 && `(${activeCount})`] })] }) }), jsx(MenuContent, { maxW: "20rem", minW: "18rem", children: jsxs(VStack, { align: "stretch", gap: 2, p: 2, children: [jsxs(Heading, { size: "sm", px: 2, children: [finalLabels.filterByLabel, " ", displayName] }), jsx(InputGroup, { startElement: jsx(Icon, { as: MdSearch }), children: jsx(Input, { placeholder: finalLabels.filterLabelsPlaceholder, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value) }) }), jsx(Box, { maxH: "20rem", overflowY: "auto", css: {
                                 '&::-webkit-scrollbar': {
                                     width: '8px',
                                 },
@@ -3270,29 +3271,26 @@ const ColumnFilterMenu = ({ displayName, filterOptions, filterVariant, colorPale
                                                 // Remove from filter
                                                 const newArray = currentArray.filter((v) => v !== option.value);
                                                 if (newArray.length === 0) {
-                                                    debouncedSetFilterValue(undefined);
+                                                    setFilterValue(undefined);
                                                 }
                                                 else {
-                                                    debouncedSetFilterValue(newArray);
+                                                    setFilterValue(newArray);
                                                 }
                                             }
                                             else {
                                                 // Add to filter
                                                 if (!currentArray.includes(option.value)) {
-                                                    debouncedSetFilterValue([
-                                                        ...currentArray,
-                                                        option.value,
-                                                    ]);
+                                                    setFilterValue([...currentArray, option.value]);
                                                 }
                                             }
                                         }
                                         else {
                                             // Handle single value filters (select variant)
                                             if (isActive) {
-                                                debouncedSetFilterValue(undefined);
+                                                setFilterValue(undefined);
                                             }
                                             else {
-                                                debouncedSetFilterValue(option.value);
+                                                setFilterValue(option.value);
                                             }
                                         }
                                     };
@@ -3307,7 +3305,7 @@ const ColumnFilterMenu = ({ displayName, filterOptions, filterVariant, colorPale
                                                                 if (details.checked) {
                                                                     // Add to filter
                                                                     if (!currentArray.includes(option.value)) {
-                                                                        debouncedSetFilterValue([
+                                                                        setFilterValue([
                                                                             ...currentArray,
                                                                             option.value,
                                                                         ]);
@@ -3317,20 +3315,20 @@ const ColumnFilterMenu = ({ displayName, filterOptions, filterVariant, colorPale
                                                                     // Remove from filter
                                                                     const newArray = currentArray.filter((v) => v !== option.value);
                                                                     if (newArray.length === 0) {
-                                                                        debouncedSetFilterValue(undefined);
+                                                                        setFilterValue(undefined);
                                                                     }
                                                                     else {
-                                                                        debouncedSetFilterValue(newArray);
+                                                                        setFilterValue(newArray);
                                                                     }
                                                                 }
                                                             }
                                                             else {
                                                                 // Handle single value filters (select variant)
                                                                 if (details.checked) {
-                                                                    debouncedSetFilterValue(option.value);
+                                                                    setFilterValue(option.value);
                                                                 }
                                                                 else {
-                                                                    debouncedSetFilterValue(undefined);
+                                                                    setFilterValue(undefined);
                                                                 }
                                                             }
                                                         } }) }), jsx(Box, { flex: 1, minW: 0, children: jsxs(HStack, { gap: 2, align: "center", children: [jsx(Box, { w: 3, h: 3, borderRadius: "full", bg: `${colorPalette}.500`, flexShrink: 0 }), jsx(Text, { fontSize: "sm", fontWeight: "medium", truncate: true, children: option.label })] }) })] }) }, option.value));
@@ -3398,10 +3396,64 @@ const TableFilterTags = ({ filterTagsOptions = [], } = {}) => {
         }) }));
 };
 
-const TableControls = ({ fitTableWidth = false, fitTableHeight = false, children = jsx(Fragment, {}), showGlobalFilter = false, showFilter = false, showFilterName = false, showFilterTags = false, showReload = false, showPagination = true, showPageSizeControl = true, showPageCountText = true, showView = true, filterTagsOptions = [], extraItems = jsx(Fragment, {}), loading = false, hasError = false, gridProps = {}, }) => {
-    const { tableLabel, table } = useDataTableContext();
+const TableControls = ({ fitTableWidth = false, fitTableHeight = false, children = jsx(Fragment, {}), showGlobalFilter = false, showFilter = false, showReload = false, showPagination = true, showPageSizeControl = true, showPageCountText = true, showView = true, filterTagsOptions = [], extraItems = jsx(Fragment, {}), loading = false, hasError = false, gridProps = {}, }) => {
+    const { tableLabel, table, columnFilters, setColumnFilters } = useDataTableContext();
     const { hasErrorText } = tableLabel;
-    return (jsxs(Grid, { templateRows: 'auto 1fr', width: fitTableWidth ? 'fit-content' : '100%', height: fitTableHeight ? 'fit-content' : '100%', gap: '0.5rem', p: 1, ...gridProps, children: [jsxs(Flex, { flexFlow: 'column', gap: 2, children: [jsxs(Flex, { justifyContent: 'space-between', children: [jsx(Box, { children: showView && jsx(ViewDialog, { icon: jsx(MdOutlineViewColumn, {}) }) }), jsxs(Flex, { gap: '0.5rem', alignItems: 'center', justifySelf: 'end', children: [loading && jsx(Spinner, { size: 'sm' }), hasError && (jsx(Tooltip, { content: hasErrorText, children: jsx(Icon, { as: BsExclamationCircleFill, color: 'red.400' }) })), showGlobalFilter && jsx(GlobalFilter, {}), showFilter && jsx(FilterDialog, {}), showReload && jsx(ReloadButton, {}), extraItems] })] }), showFilterTags && (jsx(TableFilterTags, { filterTagsOptions: filterTagsOptions }))] }), jsx(Grid, { children: children }), (showPageSizeControl || showPageCountText || showPagination) && (jsxs(Flex, { justifyContent: 'space-between', children: [jsxs(Flex, { gap: '1rem', alignItems: 'center', children: [showPageSizeControl && jsx(PageSizeControl, {}), showPageCountText && jsx(RowCountText, {})] }), jsx(Box, { justifySelf: 'end', children: showPagination && jsx(Pagination, {}) })] }))] }));
+    // Get applied filters with display information
+    const appliedFilters = useMemo(() => {
+        return columnFilters
+            .map((filter) => {
+            const column = table.getColumn(filter.id);
+            if (!column)
+                return null;
+            const meta = column.columnDef.meta;
+            const displayName = meta?.displayName ?? filter.id;
+            const filterValue = filter.value;
+            // Handle array values (tag filters)
+            if (Array.isArray(filterValue)) {
+                return {
+                    columnId: filter.id,
+                    displayName,
+                    values: filterValue,
+                    isArray: true,
+                };
+            }
+            // Handle single values (select filters)
+            if (filterValue !== undefined &&
+                filterValue !== null &&
+                filterValue !== '') {
+                return {
+                    columnId: filter.id,
+                    displayName,
+                    value: String(filterValue),
+                    isArray: false,
+                };
+            }
+            return null;
+        })
+            .filter((filter) => filter !== null);
+    }, [columnFilters, table]);
+    const handleRemoveFilter = (columnId) => {
+        setColumnFilters(columnFilters.filter((f) => f.id !== columnId));
+    };
+    return (jsxs(Grid, { templateRows: 'auto 1fr', width: fitTableWidth ? 'fit-content' : '100%', height: fitTableHeight ? 'fit-content' : '100%', gap: '0.5rem', p: 1, ...gridProps, children: [jsx(Flex, { flexFlow: 'column', gap: 2, children: jsxs(Flex, { justifyContent: 'space-between', children: [jsxs(Flex, { gap: 2, alignItems: 'center', flexWrap: 'wrap', children: [showView && jsx(ViewDialog, { icon: jsx(MdOutlineViewColumn, {}) }), appliedFilters.length > 0 && (jsx(Flex, { gap: 1.5, alignItems: 'center', flexWrap: 'wrap', children: appliedFilters.map((filter) => {
+                                        if (filter.isArray) {
+                                            return filter.values.map((value, index) => (jsxs(Tag, { size: "sm", colorPalette: "blue", onClose: () => {
+                                                    const column = table.getColumn(filter.columnId);
+                                                    if (column) {
+                                                        const currentValue = column.getFilterValue() ?? [];
+                                                        const newValue = currentValue.filter((v) => v !== value);
+                                                        if (newValue.length === 0) {
+                                                            handleRemoveFilter(filter.columnId);
+                                                        }
+                                                        else {
+                                                            column.setFilterValue(newValue);
+                                                        }
+                                                    }
+                                                }, children: [filter.displayName, ": ", value] }, `${filter.columnId}-${value}-${index}`)));
+                                        }
+                                        return (jsxs(Tag, { size: "sm", colorPalette: "blue", onClose: () => handleRemoveFilter(filter.columnId), children: [filter.displayName, ": ", filter.value] }, filter.columnId));
+                                    }) }))] }), jsxs(Flex, { gap: '0.5rem', alignItems: 'center', justifySelf: 'end', children: [loading && jsx(Spinner, { size: 'sm' }), hasError && (jsx(Tooltip, { content: hasErrorText, children: jsx(Icon, { as: BsExclamationCircleFill, color: 'red.400' }) })), showGlobalFilter && jsx(GlobalFilter, {}), filterTagsOptions.length > 0 && (jsx(TableFilterTags, { filterTagsOptions: filterTagsOptions })), showFilter && jsx(FilterDialog, {}), showReload && jsx(ReloadButton, {}), extraItems] })] }) }), jsx(Grid, { children: children }), (showPageSizeControl || showPageCountText || showPagination) && (jsxs(Flex, { justifyContent: 'space-between', children: [jsxs(Flex, { gap: '1rem', alignItems: 'center', children: [showPageSizeControl && jsx(PageSizeControl, {}), showPageCountText && jsx(RowCountText, {})] }), jsx(Box, { justifySelf: 'end', children: showPagination && jsx(Pagination, {}) })] }))] }));
 };
 
 const EmptyState$1 = React.forwardRef(function EmptyState(props, ref) {
@@ -3969,11 +4021,6 @@ label, containerProps = {}, textProps = {}, children, }) => {
     return (jsx(Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", wordBreak: "break-all", overflow: "auto", display: "flex", alignItems: "center", justifyContent: alignEnd ? 'flex-end' : undefined, height: "100%", textAlign: alignEnd ? 'right' : undefined, children: jsx(RenderValue, { text: displayValue, href: href, onClick: onClick, isCopyable: isCopyable, isBadge: isBadge, badgeColor: badgeColor, colorPalette: colorPalette, globalFilter: globalFilter, alignEnd: alignEnd }) }));
 };
 
-const Tag = React.forwardRef(function Tag(props, ref) {
-    const { startElement, endElement, onClose, closable = !!onClose, children, ...rest } = props;
-    return (jsxs(Tag$1.Root, { ref: ref, ...rest, children: [startElement && (jsx(Tag$1.StartElement, { children: startElement })), jsx(Tag$1.Label, { children: children }), endElement && (jsx(Tag$1.EndElement, { children: endElement })), closable && (jsx(Tag$1.EndElement, { children: jsx(Tag$1.CloseTrigger, { onClick: onClose }) }))] }));
-});
-
 const CardHeader = ({ row, imageColumnId = undefined, titleColumnId = undefined, tagColumnId = undefined, tagIcon = undefined, showTag = true, imageProps = {}, }) => {
     if (!!row.original === false) {
         return jsx(Fragment, {});
@@ -8965,8 +9012,7 @@ const DefaultForm = ({ formConfig, }) => {
     return (jsx(FormRoot, { ...formConfig, children: jsxs(Grid, { gap: "2", children: [showTitle && jsx(FormTitle, {}), jsx(FormBody, {})] }) }));
 };
 
-const useForm = ({ preLoadedValues, keyPrefix: _keyPrefix, // Deprecated: kept for backward compatibility
-namespace: _namespace, // Deprecated: kept for backward compatibility
+const useForm = ({ preLoadedValues, namespace: _namespace, // Deprecated: kept for backward compatibility
 schema, }) => {
     const form = useForm$1({
         values: preLoadedValues,
@@ -9139,21 +9185,19 @@ const convertToAjvErrorsFormat = (errorMessages) => {
  * );
  * // Result: { username: "This field is required", email: "This field is required" }
  *
- * // With keyPrefix for i18n
+ * // With prefix in generator function
  * const required = buildRequiredErrors(
  *   ["username", "email"],
- *   (field) => `${field}.field_required`,
- *   "user"
+ *   (field) => `user.${field}.field_required`
  * );
  * // Result: { username: "user.username.field_required", email: "user.email.field_required" }
  * ```
  */
-const buildRequiredErrors = (fields, messageOrGenerator, keyPrefix = '') => {
+const buildRequiredErrors = (fields, messageOrGenerator) => {
     const result = {};
     fields.forEach((field) => {
         if (typeof messageOrGenerator === 'function') {
-            const message = messageOrGenerator(field);
-            result[field] = keyPrefix ? `${keyPrefix}.${message}` : message;
+            result[field] = messageOrGenerator(field);
         }
         else {
             result[field] = messageOrGenerator;

package/dist/types/components/DataTable/controls/ColumnFilterMenu.d.ts

@@ -14,5 +14,7 @@ export interface ColumnFilterMenuProps {
     value?: string[] | string | undefined;
     onChange?: (value: string[] | string | undefined) => void;
     labels?: ColumnFilterMenuLabels;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
 }
-export declare const ColumnFilterMenu: ({ displayName, filterOptions, filterVariant, colorPalette, value: controlledValue, onChange, labels, }: ColumnFilterMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ColumnFilterMenu: ({ displayName, filterOptions, filterVariant, colorPalette, value: controlledValue, onChange, labels, open: controlledOpen, onOpenChange, }: ColumnFilterMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/controls/TableControls.d.ts

@@ -7,8 +7,6 @@ export interface TableControlsProps {
     children?: ReactNode;
     showGlobalFilter?: boolean;
     showFilter?: boolean;
-    showFilterName?: boolean;
-    showFilterTags?: boolean;
     showReload?: boolean;
     showPagination?: boolean;
     showPageSizeControl?: boolean;
@@ -26,4 +24,4 @@ export interface TableControlsProps {
     hasError?: boolean;
     gridProps?: GridProps;
 }
-export declare const TableControls: ({ fitTableWidth, fitTableHeight, children, showGlobalFilter, showFilter, showFilterName, showFilterTags, showReload, showPagination, showPageSizeControl, showPageCountText, showView, filterTagsOptions, extraItems, loading, hasError, gridProps, }: TableControlsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableControls: ({ fitTableWidth, fitTableHeight, children, showGlobalFilter, showFilter, showReload, showPagination, showPageSizeControl, showPageCountText, showView, filterTagsOptions, extraItems, loading, hasError, gridProps, }: TableControlsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/useDataTableServer.d.ts

@@ -1,7 +1,7 @@
 import { UseQueryResult } from '@tanstack/react-query';
 import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
 import { UseDataTableProps, UseDataTableReturn } from './useDataTable';
-export interface UseDataTableServerProps<TData> extends Omit<UseDataTableProps, 'keyPrefix'> {
+export interface UseDataTableServerProps<TData> extends UseDataTableProps {
     /**
      * Delay to send the request if the `refreshData` called multiple times
      *

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

@@ -8,11 +8,10 @@ export interface Translate {
 }
 export interface UseFormProps {
     preLoadedValues?: FieldValues | undefined;
-    keyPrefix?: string;
     namespace?: string;
     schema?: JSONSchema7;
 }
-export declare const useForm: ({ preLoadedValues, keyPrefix: _keyPrefix, namespace: _namespace, schema, }: UseFormProps) => {
+export declare const useForm: ({ preLoadedValues, namespace: _namespace, schema, }: UseFormProps) => {
     form: import("react-hook-form").UseFormReturn<FieldValues, any, undefined>;
     idMap: Record<string, object>;
     setIdMap: import("react").Dispatch<import("react").SetStateAction<Record<string, object>>>;

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

@@ -152,16 +152,15 @@ export declare const convertToAjvErrorsFormat: (errorMessages: ErrorMessageResul
  * );
  * // Result: { username: "This field is required", email: "This field is required" }
  *
- * // With keyPrefix for i18n
+ * // With prefix in generator function
  * const required = buildRequiredErrors(
  *   ["username", "email"],
- *   (field) => `${field}.field_required`,
- *   "user"
+ *   (field) => `user.${field}.field_required`
  * );
  * // Result: { username: "user.username.field_required", email: "user.email.field_required" }
  * ```
  */
-export declare const buildRequiredErrors: (fields: string[], messageOrGenerator: string | ((field: string) => string), keyPrefix?: string) => Record<string, string>;
+export declare const buildRequiredErrors: (fields: string[], messageOrGenerator: string | ((field: string) => string)) => Record<string, string>;
 /**
  * Helper function to build field-specific validation errors
  *

package/package.json

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