sti-antd-package 0.0.6 → 0.0.7

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

@@ -1,9 +1,12 @@
 import { CardProps } from "antd";
+import { CardSize } from "antd/es/card/Card";
 export interface CardComponentProps {
+    size?: CardSize;
     title?: React.ReactNode;
     onClick?: React.MouseEventHandler<HTMLElement>;
     classNames?: string[];
     className?: CardProps['classNames'];
     style?: React.CSSProperties;
+    styles?: CardProps['styles'];
     children?: React.ReactNode;
 }

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

@@ -4,6 +4,7 @@ import { SizeType } from "antd/es/config-provider/SizeContext";
 import { ValidateStatus } from "antd/es/form/FormItem";
 import { CascaderProps, DefaultOptionType } from "rc-cascader";
 import { Rule, RuleObject } from "rc-field-form/es/interface";
+import { NamePath } from "rc-field-form/lib/interface";
 import { Ref } from "react";
 export interface CascaderComponentRef<OptionType extends DefaultOptionType, ValueField extends keyof OptionType> {
     value: () => CascaderProps<OptionType, ValueField>['value'];
@@ -26,7 +27,7 @@ export interface CascaderComponentProps<OptionType extends DefaultOptionType, Va
     onChange?: CascaderProps<OptionType, ValueField>['onChange'];
     onSearch?: (value: string) => void;
     formColLayout?: typeof formColLayout;
-    name?: string;
+    name?: NamePath;
     label?: React.ReactNode;
     required?: boolean;
     rules?: Rule[];

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

@@ -1,7 +1,8 @@
 import { formColLayout } from "../../constants";
 import { CheckboxChangeEvent } from "antd";
 import { ValidateStatus } from "antd/es/form/FormItem";
-import { Rule, RuleObject } from "rc-field-form/lib/interface";
+import { ShouldUpdate } from "rc-field-form/lib/Field";
+import { NamePath, Rule, RuleObject } from "rc-field-form/lib/interface";
 import { Ref } from "react";
 export interface CheckboxComponentRef {
     checked: () => boolean;
@@ -13,9 +14,9 @@ export interface CheckboxComponentProps {
     disabled?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;
-    onChange?: (name: string | undefined, event: CheckboxChangeEvent) => void;
+    onChange?: (name: NamePath | undefined, event: CheckboxChangeEvent) => void;
     formColLayout?: typeof formColLayout;
-    name?: string;
+    name?: NamePath;
     label?: React.ReactNode;
     required?: boolean;
     rules?: Rule[];
@@ -23,6 +24,7 @@ export interface CheckboxComponentProps {
     ruleMessage?: string;
     validateStatus?: ValidateStatus;
     help?: React.ReactNode;
+    shouldUpdate?: ShouldUpdate<string | string[]>;
     children?: React.ReactNode;
     ref?: Ref<CheckboxComponentRef>;
 }

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

@@ -5,6 +5,8 @@ import { DatePickerProps } from "antd/es/date-picker";
 import { Rule, RuleObject } from "antd/es/form";
 import { ValidateStatus } from "antd/es/form/FormItem";
 import { Dayjs } from "dayjs";
+import { ShouldUpdate } from "rc-field-form/lib/Field";
+import { NamePath } from "rc-field-form/lib/interface";
 import { SemanticStructure } from "rc-picker/lib/interface";
 import { Ref } from "react";
 export interface DatePickerComponentRef {
@@ -22,10 +24,10 @@ export interface DatePickerComponentProps {
     disabledTime?: DatePickerProps['disabledTime'];
     value?: DatePickerProps['value'];
     defaultValue?: DatePickerProps['value'];
-    onChange?: (name: string | undefined, date: Dayjs, dateStrings: string | string[]) => void;
+    onChange?: (name: NamePath | undefined, date: Dayjs, dateStrings: string | string[]) => void;
     style?: React.CSSProperties;
     formColLayout?: typeof formColLayout;
-    name?: string;
+    name?: NamePath;
     label?: React.ReactNode;
     classNames?: string[];
     className?: Partial<Record<SemanticStructure, string>>;
@@ -35,5 +37,6 @@ export interface DatePickerComponentProps {
     ruleMessage?: string;
     validateStatus?: ValidateStatus;
     help?: React.ReactNode;
+    shouldUpdate?: ShouldUpdate<string | string[]>;
     ref?: Ref<DatePickerComponentRef>;
 }

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

@@ -5,7 +5,8 @@ import { SizeType } from "antd/es/config-provider/SizeContext";
 import { RangePickerProps } from "antd/es/date-picker";
 import { ValidateStatus } from "antd/es/form/FormItem";
 import dayjs from "dayjs";
-import { Rule, RuleObject } from "rc-field-form/lib/interface";
+import { ShouldUpdate } from "rc-field-form/lib/Field";
+import { NamePath, Rule, RuleObject } from "rc-field-form/lib/interface";
 import { SemanticStructure } from "rc-picker/lib/interface";
 import { RangeValueType } from "rc-picker/lib/PickerInput/RangePicker";
 import { Ref } from "react";
@@ -24,10 +25,10 @@ export interface DateRangePickerComponentProps {
     disabledTime?: RangePickerProps['disabledTime'];
     value?: RangePickerProps['value'];
     defaultValue?: RangePickerProps['value'];
-    onChange?: (name: string | undefined, date: Parameters<NonNullable<React.ComponentProps<typeof DatePicker.RangePicker>['onChange']>>[0], dateStrings: Parameters<NonNullable<React.ComponentProps<typeof DatePicker.RangePicker>['onChange']>>[1]) => void;
+    onChange?: (name: NamePath | undefined, date: Parameters<NonNullable<React.ComponentProps<typeof DatePicker.RangePicker>['onChange']>>[0], dateStrings: Parameters<NonNullable<React.ComponentProps<typeof DatePicker.RangePicker>['onChange']>>[1]) => void;
     style?: React.CSSProperties;
     formColLayout?: typeof formColLayout;
-    name?: string;
+    name?: NamePath;
     label?: React.ReactNode;
     classNames?: string[];
     className?: Partial<Record<SemanticStructure, string>>;
@@ -37,5 +38,6 @@ export interface DateRangePickerComponentProps {
     ruleMessage?: string;
     validateStatus?: ValidateStatus;
     help?: React.ReactNode;
+    shouldUpdate?: ShouldUpdate<string | string[]>;
     ref?: Ref<DateRangePickerComponentRef>;
 }

package/dist/components/DropdownButton/Component.d.ts

@@ -1,4 +1,4 @@
 import { DropdownButtonComponentProps } from "./types";
 import React from "react";
-declare const DropdownButtonComponent: <T>({ triger, placement, menuItems, disabled, data, }: DropdownButtonComponentProps<T>) => React.ReactElement;
+declare const DropdownButtonComponent: <T>({ trigger, placement, menuItems, disabled, data, }: DropdownButtonComponentProps<T>) => React.ReactElement;
 export default DropdownButtonComponent;

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

@@ -8,7 +8,7 @@ export interface DropdownButtonMenuItem<T> {
     onClick?: (data?: T) => void;
 }
 export interface DropdownButtonComponentProps<T> {
-    triger?: DropDownProps['trigger'];
+    trigger?: DropDownProps['trigger'];
     placement?: DropDownProps['placement'];
     menuItems?: DropdownButtonMenuItem<T>[];
     disabled?: boolean;

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

@@ -1,11 +1,12 @@
 import { formColLayout } from "../../constants";
 import { ValidateStatus } from "antd/es/form/FormItem";
-import { Rule, RuleObject, Store, StoreValue } from "rc-field-form/lib/interface";
+import { ShouldUpdate } from "rc-field-form/lib/Field";
+import { NamePath, Rule, RuleObject, Store, StoreValue } from "rc-field-form/lib/interface";
 import React from "react";
 export interface FormItemComponentProps {
     noItem?: boolean;
     formColLayout?: typeof formColLayout;
-    name?: string;
+    name?: NamePath;
     label?: React.ReactNode;
     normalize?: ((value: StoreValue, prevValue: StoreValue, allValues: Store) => StoreValue);
     required?: boolean;
@@ -17,5 +18,6 @@ export interface FormItemComponentProps {
     valuePropName?: string;
     validateStatus?: ValidateStatus;
     help?: React.ReactNode;
+    shouldUpdate?: ShouldUpdate<string | string[]>;
     children?: React.ReactNode;
 }

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

@@ -3,7 +3,8 @@ import { Variant } from "antd/es/config-provider";
 import { SizeType } from "antd/es/config-provider/SizeContext";
 import { ValidateStatus } from "antd/es/form/FormItem";
 import { valueType } from "antd/es/statistic/utils";
-import { Rule, RuleObject } from "rc-field-form/lib/interface";
+import { ShouldUpdate } from "rc-field-form/lib/Field";
+import { NamePath, Rule, RuleObject } from "rc-field-form/lib/interface";
 import { Ref } from "react";
 export interface InputComponentRef {
     value: () => valueType;
@@ -30,7 +31,7 @@ export interface InputComponentProps {
     placeholder?: string;
     value?: valueType;
     defaultValue?: valueType;
-    onChange?: (name: string | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (name: NamePath | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
     onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
     onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
     onMouseEnter?: React.MouseEventHandler<HTMLInputElement>;
@@ -39,7 +40,7 @@ export interface InputComponentProps {
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
     formColLayout?: typeof formColLayout;
-    name?: string;
+    name?: NamePath;
     label?: React.ReactNode;
     uppercase?: boolean;
     number?: boolean;
@@ -51,5 +52,6 @@ export interface InputComponentProps {
     ruleMax?: number;
     validateStatus?: ValidateStatus;
     help?: React.ReactNode;
+    shouldUpdate?: ShouldUpdate<string | string[]>;
     ref?: Ref<InputComponentRef>;
 }

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

@@ -1,6 +1,7 @@
 import { formColLayout } from "../../constants";
 import { valueType } from "antd/es/statistic/utils";
-import { Rule, RuleObject } from "rc-field-form/lib/interface";
+import { ShouldUpdate } from "rc-field-form/lib/Field";
+import { NamePath, Rule, RuleObject } from "rc-field-form/lib/interface";
 import { Ref } from "react";
 import { SourceInfo } from "react-number-format";
 export interface NumberFormatComponentRef {
@@ -23,7 +24,7 @@ export interface NumberFormatComponentProps {
     allowNegative?: boolean;
     value?: valueType;
     defaultValue?: valueType;
-    onChange?: (name: string | undefined, info: SourceInfo) => void;
+    onChange?: (name: NamePath | undefined, info: SourceInfo) => void;
     style?: React.CSSProperties;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
     onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
@@ -32,7 +33,7 @@ export interface NumberFormatComponentProps {
     onFocus?: React.FocusEventHandler<HTMLDivElement>;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     formColLayout?: typeof formColLayout;
-    name?: string;
+    name?: NamePath;
     label?: React.ReactNode;
     required?: boolean;
     rules?: Rule[];
@@ -42,5 +43,6 @@ export interface NumberFormatComponentProps {
     ruleMax?: number;
     validateStatus?: 'error';
     help?: React.ReactNode;
+    shouldUpdate?: ShouldUpdate<string | string[]>;
     ref?: Ref<NumberFormatComponentRef>;
 }

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

@@ -24,7 +24,7 @@ export interface SelectComponentProps {
     placeholder?: React.ReactNode;
     value?: any;
     defaultValue?: any;
-    onChange?: (name: string | undefined, value: any, option?: SelectOption | SelectOption[]) => void;
+    onChange?: (name: string | string[] | undefined, value: any, option?: SelectOption | SelectOption[]) => void;
     onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
     onSearch?: (value: string) => void;
     onFocus?: React.FocusEventHandler<HTMLElement>;
@@ -36,7 +36,7 @@ export interface SelectComponentProps {
         onClick?: (value: string) => void;
     };
     formColLayout?: typeof formColLayout;
-    name?: string;
+    name?: string | string[];
     label?: React.ReactNode;
     required?: boolean;
     rules?: Rule[];

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

@@ -1,6 +1,7 @@
 import { formColLayout } from "../../constants";
 import { ValidateStatus } from "antd/es/form/FormItem";
-import { Rule, RuleObject } from "rc-field-form/lib/interface";
+import { ShouldUpdate } from "rc-field-form/lib/Field";
+import { NamePath, Rule, RuleObject } from "rc-field-form/lib/interface";
 import React from "react";
 export interface SwitchComponentProps {
     noItem?: boolean;
@@ -11,14 +12,15 @@ export interface SwitchComponentProps {
     disabled?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;
-    onChange?: (name: string | undefined, checked: boolean, event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    onChange?: (name: NamePath | undefined, checked: boolean, event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
     formColLayout?: typeof formColLayout;
-    name?: string;
+    name?: NamePath;
     label?: React.ReactNode;
     required?: boolean;
     rules?: Rule[];
     ruleType?: RuleObject['type'];
     ruleMessage?: string;
     validateStatus?: ValidateStatus;
+    shouldUpdate?: ShouldUpdate<string | string[]>;
     help?: React.ReactNode;
 }

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

@@ -3,7 +3,8 @@ import { Variant } from "antd/es/config-provider";
 import { SizeType } from "antd/es/config-provider/SizeContext";
 import { ValidateStatus } from "antd/es/form/FormItem";
 import { valueType } from "antd/es/statistic/utils";
-import { Rule, RuleObject } from "rc-field-form/lib/interface";
+import { ShouldUpdate } from "rc-field-form/lib/Field";
+import { NamePath, Rule, RuleObject } from "rc-field-form/lib/interface";
 import { Ref } from "react";
 export interface TextAreaComponentRef {
     value: () => valueType;
@@ -22,17 +23,16 @@ export interface TextAreaComponentProps {
     placeholder?: string;
     value?: valueType;
     defaultValue?: valueType;
-    onChange?: (name: string | undefined, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onChange?: (name: NamePath | undefined, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
     formColLayout?: typeof formColLayout;
-    name?: string;
+    name?: NamePath;
     label?: React.ReactNode;
     required?: boolean;
     rules?: Rule[];
     ruleType?: RuleObject['type'];
     ruleMessage?: string;
-    ruleMin?: number;
-    ruleMax?: number;
     validateStatus?: ValidateStatus;
     help?: React.ReactNode;
+    shouldUpdate?: ShouldUpdate<string | string[]>;
     ref?: Ref<TextAreaComponentRef>;
 }

package/dist/hooks/useRemoveError/hook.d.ts

@@ -1,4 +1,4 @@
 declare const useRemoveError: (setInputErrors: React.Dispatch<React.SetStateAction<{
     [key: string]: any;
-}>>) => (name?: string) => void;
+}>>) => (name?: string | string[]) => void;
 export default useRemoveError;

package/dist/index.d.ts

@@ -3,11 +3,13 @@ import { SizeType } from 'antd/es/config-provider/SizeContext';
 import { TooltipPlacement } from 'antd/es/tooltip';
 import React$1, { Ref, JSXElementConstructor } from 'react';
 import { CardProps, CheckboxChangeEvent, DatePickerProps as DatePickerProps$1, DatePicker, DropDownProps, SelectProps, ThemeConfig, TablePaginationConfig as TablePaginationConfig$1, FormInstance, TagProps } from 'antd';
+import { CardSize } from 'antd/es/card/Card';
 import { Variant } from 'antd/es/config-provider';
 import { ValidateStatus } from 'antd/es/form/FormItem';
 import { DefaultOptionType, CascaderProps } from 'rc-cascader';
 import { Rule, RuleObject } from 'rc-field-form/es/interface';
-import { Rule as Rule$1, RuleObject as RuleObject$1, StoreValue, Store } from 'rc-field-form/lib/interface';
+import { NamePath, Rule as Rule$1, RuleObject as RuleObject$1, StoreValue, Store } from 'rc-field-form/lib/interface';
+import { ShouldUpdate } from 'rc-field-form/lib/Field';
 import { DatePickerProps, RangePickerProps } from 'antd/es/date-picker';
 import { Rule as Rule$2, RuleObject as RuleObject$2 } from 'antd/es/form';
 import dayjs, { Dayjs } from 'dayjs';
@@ -124,11 +126,13 @@ interface ButtonGroupEditComponentProps {
 declare const ButtonGroupEditComponent: React$1.FC<ButtonGroupEditComponentProps>;
 
 interface CardComponentProps {
+    size?: CardSize;
     title?: React.ReactNode;
     onClick?: React.MouseEventHandler<HTMLElement>;
     classNames?: string[];
     className?: CardProps['classNames'];
     style?: React.CSSProperties;
+    styles?: CardProps['styles'];
     children?: React.ReactNode;
 }
 
@@ -155,7 +159,7 @@ interface CascaderComponentProps<OptionType extends DefaultOptionType, ValueFiel
     onChange?: CascaderProps<OptionType, ValueField>['onChange'];
     onSearch?: (value: string) => void;
     formColLayout?: typeof _default;
-    name?: string;
+    name?: NamePath;
     label?: React.ReactNode;
     required?: boolean;
     rules?: Rule[];
@@ -178,9 +182,9 @@ interface CheckboxComponentProps {
     disabled?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;
-    onChange?: (name: string | undefined, event: CheckboxChangeEvent) => void;
+    onChange?: (name: NamePath | undefined, event: CheckboxChangeEvent) => void;
     formColLayout?: typeof _default;
-    name?: string;
+    name?: NamePath;
     label?: React.ReactNode;
     required?: boolean;
     rules?: Rule$1[];
@@ -188,6 +192,7 @@ interface CheckboxComponentProps {
     ruleMessage?: string;
     validateStatus?: ValidateStatus;
     help?: React.ReactNode;
+    shouldUpdate?: ShouldUpdate<string | string[]>;
     children?: React.ReactNode;
     ref?: Ref<CheckboxComponentRef>;
 }
@@ -209,10 +214,10 @@ interface DatePickerComponentProps {
     disabledTime?: DatePickerProps['disabledTime'];
     value?: DatePickerProps['value'];
     defaultValue?: DatePickerProps['value'];
-    onChange?: (name: string | undefined, date: Dayjs, dateStrings: string | string[]) => void;
+    onChange?: (name: NamePath | undefined, date: Dayjs, dateStrings: string | string[]) => void;
     style?: React.CSSProperties;
     formColLayout?: typeof _default;
-    name?: string;
+    name?: NamePath;
     label?: React.ReactNode;
     classNames?: string[];
     className?: Partial<Record<SemanticStructure, string>>;
@@ -222,6 +227,7 @@ interface DatePickerComponentProps {
     ruleMessage?: string;
     validateStatus?: ValidateStatus;
     help?: React.ReactNode;
+    shouldUpdate?: ShouldUpdate<string | string[]>;
     ref?: Ref<DatePickerComponentRef>;
 }
 
@@ -242,10 +248,10 @@ interface DateRangePickerComponentProps {
     disabledTime?: RangePickerProps['disabledTime'];
     value?: RangePickerProps['value'];
     defaultValue?: RangePickerProps['value'];
-    onChange?: (name: string | undefined, date: Parameters<NonNullable<React.ComponentProps<typeof DatePicker.RangePicker>['onChange']>>[0], dateStrings: Parameters<NonNullable<React.ComponentProps<typeof DatePicker.RangePicker>['onChange']>>[1]) => void;
+    onChange?: (name: NamePath | undefined, date: Parameters<NonNullable<React.ComponentProps<typeof DatePicker.RangePicker>['onChange']>>[0], dateStrings: Parameters<NonNullable<React.ComponentProps<typeof DatePicker.RangePicker>['onChange']>>[1]) => void;
     style?: React.CSSProperties;
     formColLayout?: typeof _default;
-    name?: string;
+    name?: NamePath;
     label?: React.ReactNode;
     classNames?: string[];
     className?: Partial<Record<SemanticStructure, string>>;
@@ -255,6 +261,7 @@ interface DateRangePickerComponentProps {
     ruleMessage?: string;
     validateStatus?: ValidateStatus;
     help?: React.ReactNode;
+    shouldUpdate?: ShouldUpdate<string | string[]>;
     ref?: Ref<DateRangePickerComponentRef>;
 }
 
@@ -269,19 +276,19 @@ interface DropdownButtonMenuItem<T> {
     onClick?: (data?: T) => void;
 }
 interface DropdownButtonComponentProps<T> {
-    triger?: DropDownProps['trigger'];
+    trigger?: DropDownProps['trigger'];
     placement?: DropDownProps['placement'];
     menuItems?: DropdownButtonMenuItem<T>[];
     disabled?: boolean;
     data?: T;
 }
 
-declare const DropdownButtonComponent: <T>({ triger, placement, menuItems, disabled, data, }: DropdownButtonComponentProps<T>) => React$1.ReactElement;
+declare const DropdownButtonComponent: <T>({ trigger, placement, menuItems, disabled, data, }: DropdownButtonComponentProps<T>) => React$1.ReactElement;
 
 interface FormItemComponentProps {
     noItem?: boolean;
     formColLayout?: typeof _default;
-    name?: string;
+    name?: NamePath;
     label?: React$1.ReactNode;
     normalize?: ((value: StoreValue, prevValue: StoreValue, allValues: Store) => StoreValue);
     required?: boolean;
@@ -293,6 +300,7 @@ interface FormItemComponentProps {
     valuePropName?: string;
     validateStatus?: ValidateStatus;
     help?: React$1.ReactNode;
+    shouldUpdate?: ShouldUpdate<string | string[]>;
     children?: React$1.ReactNode;
 }
 
@@ -331,7 +339,7 @@ interface InputComponentProps {
     placeholder?: string;
     value?: valueType;
     defaultValue?: valueType;
-    onChange?: (name: string | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (name: NamePath | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
     onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
     onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
     onMouseEnter?: React.MouseEventHandler<HTMLInputElement>;
@@ -340,7 +348,7 @@ interface InputComponentProps {
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
     formColLayout?: typeof _default;
-    name?: string;
+    name?: NamePath;
     label?: React.ReactNode;
     uppercase?: boolean;
     number?: boolean;
@@ -352,6 +360,7 @@ interface InputComponentProps {
     ruleMax?: number;
     validateStatus?: ValidateStatus;
     help?: React.ReactNode;
+    shouldUpdate?: ShouldUpdate<string | string[]>;
     ref?: Ref<InputComponentRef>;
 }
 
@@ -384,7 +393,7 @@ interface NumberFormatComponentProps {
     allowNegative?: boolean;
     value?: valueType;
     defaultValue?: valueType;
-    onChange?: (name: string | undefined, info: SourceInfo) => void;
+    onChange?: (name: NamePath | undefined, info: SourceInfo) => void;
     style?: React.CSSProperties;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
     onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
@@ -393,7 +402,7 @@ interface NumberFormatComponentProps {
     onFocus?: React.FocusEventHandler<HTMLDivElement>;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     formColLayout?: typeof _default;
-    name?: string;
+    name?: NamePath;
     label?: React.ReactNode;
     required?: boolean;
     rules?: Rule$1[];
@@ -403,6 +412,7 @@ interface NumberFormatComponentProps {
     ruleMax?: number;
     validateStatus?: 'error';
     help?: React.ReactNode;
+    shouldUpdate?: ShouldUpdate<string | string[]>;
     ref?: Ref<NumberFormatComponentRef>;
 }
 
@@ -427,7 +437,7 @@ interface SelectComponentProps {
     placeholder?: React.ReactNode;
     value?: any;
     defaultValue?: any;
-    onChange?: (name: string | undefined, value: any, option?: SelectOption | SelectOption[]) => void;
+    onChange?: (name: string | string[] | undefined, value: any, option?: SelectOption | SelectOption[]) => void;
     onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
     onSearch?: (value: string) => void;
     onFocus?: React.FocusEventHandler<HTMLElement>;
@@ -439,7 +449,7 @@ interface SelectComponentProps {
         onClick?: (value: string) => void;
     };
     formColLayout?: typeof _default;
-    name?: string;
+    name?: string | string[];
     label?: React.ReactNode;
     required?: boolean;
     rules?: Rule$2[];
@@ -511,15 +521,16 @@ interface SwitchComponentProps {
     disabled?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;
-    onChange?: (name: string | undefined, checked: boolean, event: React$1.MouseEvent<HTMLButtonElement> | React$1.KeyboardEvent<HTMLButtonElement>) => void;
+    onChange?: (name: NamePath | undefined, checked: boolean, event: React$1.MouseEvent<HTMLButtonElement> | React$1.KeyboardEvent<HTMLButtonElement>) => void;
     formColLayout?: typeof _default;
-    name?: string;
+    name?: NamePath;
     label?: React$1.ReactNode;
     required?: boolean;
     rules?: Rule$1[];
     ruleType?: RuleObject$1['type'];
     ruleMessage?: string;
     validateStatus?: ValidateStatus;
+    shouldUpdate?: ShouldUpdate<string | string[]>;
     help?: React$1.ReactNode;
 }
 
@@ -861,18 +872,17 @@ interface TextAreaComponentProps {
     placeholder?: string;
     value?: valueType;
     defaultValue?: valueType;
-    onChange?: (name: string | undefined, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onChange?: (name: NamePath | undefined, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
     formColLayout?: typeof _default;
-    name?: string;
+    name?: NamePath;
     label?: React.ReactNode;
     required?: boolean;
     rules?: Rule$1[];
     ruleType?: RuleObject$1['type'];
     ruleMessage?: string;
-    ruleMin?: number;
-    ruleMax?: number;
     validateStatus?: ValidateStatus;
     help?: React.ReactNode;
+    shouldUpdate?: ShouldUpdate<string | string[]>;
     ref?: Ref<TextAreaComponentRef>;
 }
 
@@ -887,7 +897,7 @@ declare enum DateFormat {
 
 declare const useRemoveError: (setInputErrors: React.Dispatch<React.SetStateAction<{
     [key: string]: any;
-}>>) => (name?: string) => void;
+}>>) => (name?: string | string[]) => void;
 
 export { BaseModel, ButtonComponent, ButtonGroupAddComponent, ButtonGroupEditComponent, CardComponent, CascaderComponent, CheckboxComponent, ConfigProvider, DateFormat, DatePickerComponent, DateRangePickerComponent, DropdownButtonComponent, FeedbackProvider, FormItemComponent, IconCheckOrClose, InputComponent, LinkComponent, NumberFormatComponent, SelectAsyncComponent, SelectComponent, SwitchComponent, TableAsyncComponent, TableAsyncSearchComponent, TableCellEditableComponent, TableComponent, TableRowProvider, TabsComponent, TagComponent, TextAreaComponent, TransformBoolean, TransformDayjs, TransformNumber, colLayout, datePickerFormat, _default as formColLayout, getTableAsyncName, getTableFilterStorage, selectAsync, styleCSS, toCamel, useConfig, useFeedback, useRemoveError, useTableAsyncSearch, useTableRow };
 export type { ButtonComponentProps, ButtonComponentRef, ButtonGroupAddComponentProps, ButtonGroupEditComponentProps, CardComponentProps, CascaderComponentProps, CascaderComponentRef, CheckboxComponentProps, CheckboxComponentRef, ConfigContextType, ConfigProviderProps, DatePickerComponentProps, DatePickerComponentRef, DateRangePickerComponentProps, DateRangePickerComponentRef, DefaultColumn, DefaultParams, DropdownButtonComponentProps, DropdownButtonMenuItem, FeedbackContextType, FormColLayout, FormColSizeSpan, FormItemComponentProps, IconCheckOrCloseProps, InputComponentProps, InputComponentRef, LinkComponentProps, LinkType, NumberFormatComponentProps, NumberFormatComponentRef, SelectAsyncComponentProps, SelectAsyncComponentRef, SelectAsyncFormat, SelectAsyncProps, SelectComponentProps, SelectOption, SwitchComponentProps, TableAsyncComponentProps, TableAsyncComponentRef, TableAsyncSearchCheckbox, TableAsyncSearchComponentProps, TableAsyncSearchContextType, TableAsyncSearchDate, TableAsyncSearchDateRange, TableAsyncSearchFetchSelectMultiple, TableAsyncSearchItem, TableAsyncSearchItemType, TableAsyncSearchLocalSelectMultiple, TableAsyncSearchProviderProps, TableAsyncSearchSelect, TableAsyncSearchSelectMultiple, TableAsyncSearchSwitch, TableAsyncSearchText, TableAsyncType, TableButtonMiddle, TableCellEditableProps, TableComponentProps, TableParams, TableParamsFormatter, TableRowContextType, TableRowProviderProps, TabsComponentProps, TagComponentProps, TextAreaComponentProps, TextAreaComponentRef, YajraColumn, YajraColumnParams, YajraOrderParams, YajraParams, YajraSearchParams };

package/dist/index.esm.js

@@ -3815,11 +3815,23 @@ const ButtonGroupEditComponent = ({ formColLayout, disabled, loading, allowEdit
     return col ? (jsxRuntimeExports.jsx(Row, { children: jsxRuntimeExports.jsx(Col, Object.assign({}, col, { children: buttonGroup })) })) : buttonGroup;
 };
 
-const CardComponent = ({ title, onClick, classNames, className, style, children, }) => {
-    return (jsxRuntimeExports.jsx(Card, { title: title, onClick: onClick, className: classNames === null || classNames === void 0 ? void 0 : classNames.join(' '), classNames: className, style: style, children: children }));
+const CardComponent = ({ size, title, onClick, classNames, className, style, styles, children, }) => {
+    return (jsxRuntimeExports.jsx(Card, { size: size, title: title, onClick: onClick, className: classNames === null || classNames === void 0 ? void 0 : classNames.join(' '), classNames: className, style: style, styles: styles, children: children }));
+};
+
+const { Item: Item$1 } = Form$2;
+const FormItemComponent = ({ noItem, formColLayout, name, label, normalize, required, rules, ruleType, ruleMessage, ruleMin, ruleMax, valuePropName, validateStatus, help, shouldUpdate, children, }) => {
+    const rule = {
+        required: required,
+        message: ruleMessage,
+        type: ruleType,
+        whitespace: true,
+        max: ruleMax,
+        min: ruleMin,
+    };
+    return !noItem ? (jsxRuntimeExports.jsx(Item$1, Object.assign({}, formColLayout, { name: name, label: label, normalize: normalize, required: required, rules: rules !== null && rules !== void 0 ? rules : [rule], valuePropName: valuePropName, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: children }))) : children;
 };
 
-const { Item: Item$2 } = Form$2;
 const CascaderComponent = ({ noItem, size, classNames, variant, expandTrigger, open, disabled, suffixIcon, placeholder, value, defaultValue, options, displayRender, onChange, onSearch, formColLayout, name, label, required, rules, ruleType, ruleMessage, validateStatus, help, ref, }) => {
     const [valueCascader, setValueCascader] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : []);
     useImperativeHandle(ref, () => ({
@@ -3829,30 +3841,11 @@ const CascaderComponent = ({ noItem, size, classNames, variant, expandTrigger, o
     const cascader = (jsxRuntimeExports.jsx(Cascader, { allowClear: !required, size: size, className: classNames === null || classNames === void 0 ? void 0 : classNames.join(' '), variant: variant, expandTrigger: expandTrigger, open: open, disabled: disabled, suffixIcon: suffixIcon, placeholder: placeholder, value: value !== null && value !== void 0 ? value : valueCascader, defaultValue: defaultValue, options: options === null || options === void 0 ? void 0 : options.filter(item => item.value !== undefined), displayRender: displayRender, showSearch: {
             filter: (search, path) => path.some(option => option.search.toLowerCase().indexOf(search.toLowerCase()) > -1),
         }, onChange: onChange, onSearch: onSearch }));
-    const rule = {
-        required: required,
-        message: ruleMessage,
-        type: ruleType,
-        whitespace: true,
-    };
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(Item$2, Object.assign({}, formColLayout, { name: name, label: label, required: required, rules: rules !== null && rules !== void 0 ? rules : [rule], validateStatus: validateStatus, help: help, children: cascader })))
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, rules: rules, validateStatus: validateStatus, help: help, children: cascader })))
             : cascader }));
 };
 
-const { Item: Item$1 } = Form$2;
-const FormItemComponent = ({ noItem, formColLayout, name, label, normalize, required, rules, ruleType, ruleMessage, ruleMin, ruleMax, valuePropName, validateStatus, help, children, }) => {
-    const rule = {
-        required: required,
-        message: ruleMessage,
-        type: ruleType,
-        whitespace: true,
-        max: ruleMax,
-        min: ruleMin,
-    };
-    return !noItem ? (jsxRuntimeExports.jsx(Item$1, Object.assign({}, formColLayout, { name: name, label: label, normalize: normalize, required: required, rules: rules !== null && rules !== void 0 ? rules : [rule], valuePropName: valuePropName, validateStatus: validateStatus, help: help, children: children }))) : children;
-};
-
-const CheckboxComponent = ({ noItem, loading, disabled, checked, defaultChecked, onChange, formColLayout, name, label, required, rules, ruleType, ruleMessage, validateStatus, help, children, ref, }) => {
+const CheckboxComponent = ({ noItem, loading, disabled, checked, defaultChecked, onChange, formColLayout, name, label, required, rules, ruleType, ruleMessage, validateStatus, help, shouldUpdate, children, ref, }) => {
     const [checkedValue, setCheckedValue] = useState(defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : false);
     const handleChange = (event) => {
         var _a;
@@ -3864,7 +3857,7 @@ const CheckboxComponent = ({ noItem, loading, disabled, checked, defaultChecked,
         setChecked: setCheckedValue,
     }));
     const checkbox = !loading ? (jsxRuntimeExports.jsx(Checkbox, { disabled: disabled, checked: checked !== null && checked !== void 0 ? checked : checkedValue, defaultChecked: checkedValue, onChange: handleChange, children: children })) : jsxRuntimeExports.jsx(Skeleton.Input, { active: true });
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, rules: rules, valuePropName: "checked", validateStatus: validateStatus, help: help, children: checkbox })))
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, rules: rules, valuePropName: "checked", validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: checkbox })))
             : checkbox }));
 };
 
@@ -3910,7 +3903,7 @@ var formColLayout = {
     notInline: {},
 };
 
-const DatePickerComponent = ({ noItem, size, variant, picker, disabledDate, disabledTime, loading, disabled, value, defaultValue, onChange, style, formColLayout, name, label, classNames = [], className, required, rules, ruleType, ruleMessage, validateStatus, help, ref, }) => {
+const DatePickerComponent = ({ noItem, size, variant, picker, disabledDate, disabledTime, loading, disabled, value, defaultValue, onChange, style, formColLayout, name, label, classNames = [], className, required, rules, ruleType, ruleMessage, validateStatus, help, shouldUpdate, ref, }) => {
     const [valueDate, setValueDate] = useState(defaultValue);
     const handleChange = (date, dateString) => {
         setValueDate(date);
@@ -3922,13 +3915,13 @@ const DatePickerComponent = ({ noItem, size, variant, picker, disabledDate, disa
     }));
     const classDate = [styleCSS['w-100']];
     classNames && classDate.push(...classNames);
-    const datePicker = !loading ? (jsxRuntimeExports.jsx(DatePicker, { name: name, className: classDate === null || classDate === void 0 ? void 0 : classDate.join(' '), classNames: className, size: size !== null && size !== void 0 ? size : 'middle', variant: variant, picker: picker, format: datePickerFormat[picker !== null && picker !== void 0 ? picker : 'default'], allowClear: !required, disabled: disabled, disabledDate: disabledDate, disabledTime: disabledTime, value: value !== null && value !== void 0 ? value : valueDate, onChange: handleChange, style: style })) : jsxRuntimeExports.jsx(Skeleton.Input, { block: true, active: true });
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, rules: rules, validateStatus: validateStatus, help: help, children: datePicker })))
+    const datePicker = !loading ? (jsxRuntimeExports.jsx(DatePicker, { className: classDate === null || classDate === void 0 ? void 0 : classDate.join(' '), classNames: className, size: size !== null && size !== void 0 ? size : 'middle', variant: variant, picker: picker, format: datePickerFormat[picker !== null && picker !== void 0 ? picker : 'default'], allowClear: !required, disabled: disabled, disabledDate: disabledDate, disabledTime: disabledTime, value: value !== null && value !== void 0 ? value : valueDate, onChange: handleChange, style: style })) : jsxRuntimeExports.jsx(Skeleton.Input, { block: true, active: true });
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, rules: rules, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: datePicker })))
             : datePicker }));
 };
 
 const { RangePicker } = DatePicker;
-const DateRangePickerComponent = ({ noItem, size, variant, picker, disabledDate, disabledTime, loading, disabled, value, defaultValue, onChange, style, formColLayout, name, label, classNames = [], className, required, rules, ruleType, ruleMessage, validateStatus, help, ref, }) => {
+const DateRangePickerComponent = ({ noItem, size, variant, picker, disabledDate, disabledTime, loading, disabled, value, defaultValue, onChange, style, formColLayout, name, label, classNames = [], className, required, rules, ruleType, ruleMessage, validateStatus, help, shouldUpdate, ref, }) => {
     var _a;
     const [valueDateRange, setValueDateRange] = useState(defaultValue);
     const handleChange = (date, dateStrings) => {
@@ -3941,8 +3934,8 @@ const DateRangePickerComponent = ({ noItem, size, variant, picker, disabledDate,
     }));
     const classDateRange = [styleCSS['w-100']];
     classNames && classDateRange.push(...classNames);
-    const datePicker = !loading ? (jsxRuntimeExports.jsx(RangePicker, { name: name, className: classDateRange.join(' '), classNames: className, size: size !== null && size !== void 0 ? size : 'middle', variant: variant, picker: picker, format: datePickerFormat[(_a = picker === null || picker === void 0 ? void 0 : picker.toString()) !== null && _a !== void 0 ? _a : 'default'], allowClear: !required, disabled: disabled, disabledDate: disabledDate, disabledTime: disabledTime, value: value !== null && value !== void 0 ? value : valueDateRange, onChange: handleChange, style: style })) : jsxRuntimeExports.jsx(Skeleton.Input, { block: true, active: true });
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, rules: rules, validateStatus: validateStatus, help: help, children: datePicker })))
+    const datePicker = !loading ? (jsxRuntimeExports.jsx(RangePicker, { className: classDateRange.join(' '), classNames: className, size: size !== null && size !== void 0 ? size : 'middle', variant: variant, picker: picker, format: datePickerFormat[(_a = picker === null || picker === void 0 ? void 0 : picker.toString()) !== null && _a !== void 0 ? _a : 'default'], allowClear: !required, disabled: disabled, disabledDate: disabledDate, disabledTime: disabledTime, value: value !== null && value !== void 0 ? value : valueDateRange, onChange: handleChange, style: style })) : jsxRuntimeExports.jsx(Skeleton.Input, { block: true, active: true });
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, rules: rules, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: datePicker })))
             : datePicker }));
 };
 
@@ -5939,7 +5932,7 @@ const LinkComponent = ({ href, children, }) => {
     return (jsxRuntimeExports.jsx(Link$1, { to: href, children: children }));
 };
 
-const DropdownButtonComponent = ({ triger, placement, menuItems, disabled, data, }) => {
+const DropdownButtonComponent = ({ trigger, placement, menuItems, disabled, data, }) => {
     const items = menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(menu => {
         const classMenuItem = [];
         switch (menu.type) {
@@ -5961,7 +5954,7 @@ const DropdownButtonComponent = ({ triger, placement, menuItems, disabled, data,
             onClick: () => { var _a; return (_a = menu.onClick) === null || _a === void 0 ? void 0 : _a.call(menu, data); },
         };
     });
-    return (jsxRuntimeExports.jsx(Dropdown, { menu: { items }, placement: placement !== null && placement !== void 0 ? placement : 'bottomRight', trigger: triger !== null && triger !== void 0 ? triger : ['hover'], disabled: disabled, children: jsxRuntimeExports.jsx(ButtonComponent, { size: "small", icon: jsxRuntimeExports.jsx(RefIcon$8, {}) }) }));
+    return (jsxRuntimeExports.jsx(Dropdown, { menu: { items }, placement: placement !== null && placement !== void 0 ? placement : 'bottomRight', trigger: trigger !== null && trigger !== void 0 ? trigger : ['hover'], disabled: disabled, children: jsxRuntimeExports.jsx(ButtonComponent, { size: "small", icon: jsxRuntimeExports.jsx(RefIcon$8, {}) }) }));
 };
 
 var css_248z$8 = ".style-module_icon__GHpNO {\n  size: 1.5rem;\n}";
@@ -5975,12 +5968,10 @@ const IconCheckOrClose = ({ check, classNames, style, }) => {
     return (jsxRuntimeExports.jsx(Icon, { className: classIcon.join(' '), style: style }));
 };
 
-const InputComponent = ({ noItem, password, autoFocus, allowClear, size, classNames, variant, loading, disabled, readOnly, maxLength, addonBefore, addonAfter, prefix, suffix, placeholder, value, onChange, onKeyDown, onPressEnter, onMouseEnter, onMouseLeave, onClick, onFocus, onBlur, defaultValue, formColLayout, name, label, uppercase, number, required, rules, ruleType, ruleMessage, ruleMin, ruleMax, validateStatus, help, ref, }) => {
+const InputComponent = ({ noItem, password, autoFocus, allowClear, size, classNames, variant, loading, disabled, readOnly, maxLength, addonBefore, addonAfter, prefix, suffix, placeholder, value, onChange, onKeyDown, onPressEnter, onMouseEnter, onMouseLeave, onClick, onFocus, onBlur, defaultValue, formColLayout, name, label, uppercase, number, required, rules, ruleType, ruleMessage, ruleMin, ruleMax, validateStatus, help, shouldUpdate, ref, }) => {
     const [valueInput, setValueInput] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
     const handleChange = (event) => {
         setValueInput(event.target.value);
-        if (noItem && name)
-            event.target.id = name;
         onChange === null || onChange === void 0 ? void 0 : onChange(name, event);
     };
     useImperativeHandle(ref, () => ({
@@ -5996,7 +5987,7 @@ const InputComponent = ({ noItem, password, autoFocus, allowClear, size, classNa
             return value.replace(/\D/g, '');
         return value;
     };
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, normalize: normalize, required: required, ruleMessage: ruleMessage, ruleType: ruleType, ruleMax: ruleMax, ruleMin: ruleMin, rules: rules, validateStatus: validateStatus, help: help, children: input })))
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, normalize: normalize, required: required, ruleMessage: ruleMessage, ruleType: ruleType, ruleMax: ruleMax, ruleMin: ruleMin, rules: rules, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: input })))
             : input }));
 };
 
@@ -6033,7 +6024,7 @@ var css_248z$5 = ".style-module_number-format__F9NKi {\n  box-sizing: border-box
 var styleNumberFormat = {"number-format":"style-module_number-format__F9NKi","number-format-borderless":"style-module_number-format-borderless__DOdb8","number-format-underlined":"style-module_number-format-underlined__hUCaf","number-format-error":"style-module_number-format-error__rOvyp","number-format-sm":"style-module_number-format-sm__iLZdH","number-format-align-right":"style-module_number-format-align-right__qOFmQ"};
 styleInject(css_248z$5);
 
-const NumberFormatComponent = ({ noItem, text, size, align, className, variant, trailing: trailingProps, prefix, suffix, placeholder, disabled, readOnly, allowNegative, value, defaultValue, onChange, style, onBlur, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onClick, formColLayout, name, label, required, rules, ruleType, ruleMessage, ruleMin, ruleMax, validateStatus, help, ref, }) => {
+const NumberFormatComponent = ({ noItem, text, size, align, className, variant, trailing: trailingProps, prefix, suffix, placeholder, disabled, readOnly, allowNegative, value, defaultValue, onChange, style, onBlur, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onClick, formColLayout, name, label, required, rules, ruleType, ruleMessage, ruleMin, ruleMax, validateStatus, help, shouldUpdate, ref, }) => {
     const { trailing } = useConfig$1();
     const { messageApi } = useFeedback();
     const [valueNumberFormat, setValueNumberFormat] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
@@ -6071,7 +6062,7 @@ const NumberFormatComponent = ({ noItem, text, size, align, className, variant,
                     return formattedValue === '' || floatValue <= ruleMax;
                 return true;
             }, fixedDecimalScale: true, style: style, value: value !== null && value !== void 0 ? value : valueNumberFormat, onValueChange: handleChange, onBlur: onBlur, onKeyDown: onKeyDown }) })));
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, ruleMax: ruleMax, ruleMin: ruleMin, rules: rules, validateStatus: validateStatus, help: help, children: numberFormat })))
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, ruleMax: ruleMax, ruleMin: ruleMin, rules: rules, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: numberFormat })))
             : numberFormat }));
 };
 
@@ -6815,7 +6806,7 @@ const SelectAsyncComponent = (_a) => {
         }, onFocus: (!options.length || isInit) ? debounceFetcher : undefined, onSearch: debounceFetcher, notFoundContent: fetching ? jsxRuntimeExports.jsx(Spin, { size: "small" }) : null, options: getOptions() })));
 };
 
-const SwitchComponent = ({ noItem, icon, checkedChildren, unCheckedChildren, loading, disabled, checked, defaultChecked, onChange, formColLayout, name, label, required, rules, ruleType, ruleMessage, validateStatus, help, }) => {
+const SwitchComponent = ({ noItem, icon, checkedChildren, unCheckedChildren, loading, disabled, checked, defaultChecked, onChange, formColLayout, name, label, required, rules, ruleType, ruleMessage, validateStatus, help, shouldUpdate, }) => {
     const [checkedSwitch, setCheckedSwitch] = useState(defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : false);
     const handleChange = (value, event) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(name, value, event);
@@ -6829,7 +6820,7 @@ const SwitchComponent = ({ noItem, icon, checkedChildren, unCheckedChildren, loa
         unCheckedChildren,
     };
     const switchComponent = !loading ? (jsxRuntimeExports.jsx(Switch, Object.assign({}, checkChildren, { onChange: handleChange, disabled: disabled, checked: checked !== null && checked !== void 0 ? checked : checkedSwitch, defaultChecked: checked !== null && checked !== void 0 ? checked : checkedSwitch }))) : jsxRuntimeExports.jsx(Skeleton.Input, { active: true });
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, rules: rules, validateStatus: validateStatus, help: help, children: switchComponent })))
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, rules: rules, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: switchComponent })))
             : switchComponent }));
 };
 
@@ -23143,15 +23134,13 @@ const TextArea = /*#__PURE__*/forwardRef((props, ref) => {
   }))));
 });
 
-const TextAreaComponent = ({ noItem, noResize, size, className, rows, variant, loading, disabled, readOnly, placeholder, value, defaultValue, onChange, formColLayout, name, label, required, rules, ruleType, ruleMessage, ruleMin, ruleMax, validateStatus, help, ref, }) => {
+const TextAreaComponent = ({ noItem, noResize, size, className, rows, variant, loading, disabled, readOnly, placeholder, value, defaultValue, onChange, formColLayout, name, label, required, rules, ruleType, ruleMessage, validateStatus, help, shouldUpdate, ref, }) => {
     const classTextArea = [];
     className && classTextArea.push(...className);
     noResize && classTextArea.push(styleTextArea['resize-none']);
     const [valueTextArea, setValueTextArea] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
     const handleChange = (event) => {
         setValueTextArea(event.target.value);
-        if (noItem && name)
-            event.target.id = name;
         onChange === null || onChange === void 0 ? void 0 : onChange(name, event);
     };
     useImperativeHandle(ref, () => ({
@@ -23159,13 +23148,13 @@ const TextAreaComponent = ({ noItem, noResize, size, className, rows, variant, l
         setValue: () => setValueTextArea,
     }));
     const textArea = !loading ? (jsxRuntimeExports.jsx(TextArea, { size: size, className: className === null || className === void 0 ? void 0 : className.join(' '), rows: rows, variant: variant, disabled: disabled, readOnly: readOnly, onChange: handleChange, placeholder: placeholder, value: value !== null && value !== void 0 ? value : valueTextArea })) : jsxRuntimeExports.jsx(Skeleton.Input, { block: true, active: true });
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, rules: rules, validateStatus: validateStatus, help: help, children: textArea })))
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, rules: rules, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: textArea })))
             : textArea }));
 };
 
 const useRemoveError = (setInputErrors) => {
     const removeError = (name) => {
-        name && setInputErrors(prevState => Object.keys(prevState)
+        name && typeof name === 'string' && setInputErrors(prevState => Object.keys(prevState)
             .filter(key => key !== name)
             .reduce((result, current) => {
             result[current] = prevState[current];

package/dist/index.js

@@ -3835,11 +3835,23 @@ const ButtonGroupEditComponent = ({ formColLayout, disabled, loading, allowEdit
     return col ? (jsxRuntimeExports.jsx(antd.Row, { children: jsxRuntimeExports.jsx(antd.Col, Object.assign({}, col, { children: buttonGroup })) })) : buttonGroup;
 };
 
-const CardComponent = ({ title, onClick, classNames, className, style, children, }) => {
-    return (jsxRuntimeExports.jsx(antd.Card, { title: title, onClick: onClick, className: classNames === null || classNames === void 0 ? void 0 : classNames.join(' '), classNames: className, style: style, children: children }));
+const CardComponent = ({ size, title, onClick, classNames, className, style, styles, children, }) => {
+    return (jsxRuntimeExports.jsx(antd.Card, { size: size, title: title, onClick: onClick, className: classNames === null || classNames === void 0 ? void 0 : classNames.join(' '), classNames: className, style: style, styles: styles, children: children }));
+};
+
+const { Item: Item$1 } = antd.Form;
+const FormItemComponent = ({ noItem, formColLayout, name, label, normalize, required, rules, ruleType, ruleMessage, ruleMin, ruleMax, valuePropName, validateStatus, help, shouldUpdate, children, }) => {
+    const rule = {
+        required: required,
+        message: ruleMessage,
+        type: ruleType,
+        whitespace: true,
+        max: ruleMax,
+        min: ruleMin,
+    };
+    return !noItem ? (jsxRuntimeExports.jsx(Item$1, Object.assign({}, formColLayout, { name: name, label: label, normalize: normalize, required: required, rules: rules !== null && rules !== void 0 ? rules : [rule], valuePropName: valuePropName, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: children }))) : children;
 };
 
-const { Item: Item$2 } = antd.Form;
 const CascaderComponent = ({ noItem, size, classNames, variant, expandTrigger, open, disabled, suffixIcon, placeholder, value, defaultValue, options, displayRender, onChange, onSearch, formColLayout, name, label, required, rules, ruleType, ruleMessage, validateStatus, help, ref, }) => {
     const [valueCascader, setValueCascader] = React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : []);
     React.useImperativeHandle(ref, () => ({
@@ -3849,30 +3861,11 @@ const CascaderComponent = ({ noItem, size, classNames, variant, expandTrigger, o
     const cascader = (jsxRuntimeExports.jsx(antd.Cascader, { allowClear: !required, size: size, className: classNames === null || classNames === void 0 ? void 0 : classNames.join(' '), variant: variant, expandTrigger: expandTrigger, open: open, disabled: disabled, suffixIcon: suffixIcon, placeholder: placeholder, value: value !== null && value !== void 0 ? value : valueCascader, defaultValue: defaultValue, options: options === null || options === void 0 ? void 0 : options.filter(item => item.value !== undefined), displayRender: displayRender, showSearch: {
             filter: (search, path) => path.some(option => option.search.toLowerCase().indexOf(search.toLowerCase()) > -1),
         }, onChange: onChange, onSearch: onSearch }));
-    const rule = {
-        required: required,
-        message: ruleMessage,
-        type: ruleType,
-        whitespace: true,
-    };
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(Item$2, Object.assign({}, formColLayout, { name: name, label: label, required: required, rules: rules !== null && rules !== void 0 ? rules : [rule], validateStatus: validateStatus, help: help, children: cascader })))
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, rules: rules, validateStatus: validateStatus, help: help, children: cascader })))
             : cascader }));
 };
 
-const { Item: Item$1 } = antd.Form;
-const FormItemComponent = ({ noItem, formColLayout, name, label, normalize, required, rules, ruleType, ruleMessage, ruleMin, ruleMax, valuePropName, validateStatus, help, children, }) => {
-    const rule = {
-        required: required,
-        message: ruleMessage,
-        type: ruleType,
-        whitespace: true,
-        max: ruleMax,
-        min: ruleMin,
-    };
-    return !noItem ? (jsxRuntimeExports.jsx(Item$1, Object.assign({}, formColLayout, { name: name, label: label, normalize: normalize, required: required, rules: rules !== null && rules !== void 0 ? rules : [rule], valuePropName: valuePropName, validateStatus: validateStatus, help: help, children: children }))) : children;
-};
-
-const CheckboxComponent = ({ noItem, loading, disabled, checked, defaultChecked, onChange, formColLayout, name, label, required, rules, ruleType, ruleMessage, validateStatus, help, children, ref, }) => {
+const CheckboxComponent = ({ noItem, loading, disabled, checked, defaultChecked, onChange, formColLayout, name, label, required, rules, ruleType, ruleMessage, validateStatus, help, shouldUpdate, children, ref, }) => {
     const [checkedValue, setCheckedValue] = React.useState(defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : false);
     const handleChange = (event) => {
         var _a;
@@ -3884,7 +3877,7 @@ const CheckboxComponent = ({ noItem, loading, disabled, checked, defaultChecked,
         setChecked: setCheckedValue,
     }));
     const checkbox = !loading ? (jsxRuntimeExports.jsx(antd.Checkbox, { disabled: disabled, checked: checked !== null && checked !== void 0 ? checked : checkedValue, defaultChecked: checkedValue, onChange: handleChange, children: children })) : jsxRuntimeExports.jsx(antd.Skeleton.Input, { active: true });
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, rules: rules, valuePropName: "checked", validateStatus: validateStatus, help: help, children: checkbox })))
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, rules: rules, valuePropName: "checked", validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: checkbox })))
             : checkbox }));
 };
 
@@ -3930,7 +3923,7 @@ var formColLayout = {
     notInline: {},
 };
 
-const DatePickerComponent = ({ noItem, size, variant, picker, disabledDate, disabledTime, loading, disabled, value, defaultValue, onChange, style, formColLayout, name, label, classNames = [], className, required, rules, ruleType, ruleMessage, validateStatus, help, ref, }) => {
+const DatePickerComponent = ({ noItem, size, variant, picker, disabledDate, disabledTime, loading, disabled, value, defaultValue, onChange, style, formColLayout, name, label, classNames = [], className, required, rules, ruleType, ruleMessage, validateStatus, help, shouldUpdate, ref, }) => {
     const [valueDate, setValueDate] = React.useState(defaultValue);
     const handleChange = (date, dateString) => {
         setValueDate(date);
@@ -3942,13 +3935,13 @@ const DatePickerComponent = ({ noItem, size, variant, picker, disabledDate, disa
     }));
     const classDate = [styleCSS['w-100']];
     classNames && classDate.push(...classNames);
-    const datePicker = !loading ? (jsxRuntimeExports.jsx(antd.DatePicker, { name: name, className: classDate === null || classDate === void 0 ? void 0 : classDate.join(' '), classNames: className, size: size !== null && size !== void 0 ? size : 'middle', variant: variant, picker: picker, format: datePickerFormat[picker !== null && picker !== void 0 ? picker : 'default'], allowClear: !required, disabled: disabled, disabledDate: disabledDate, disabledTime: disabledTime, value: value !== null && value !== void 0 ? value : valueDate, onChange: handleChange, style: style })) : jsxRuntimeExports.jsx(antd.Skeleton.Input, { block: true, active: true });
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, rules: rules, validateStatus: validateStatus, help: help, children: datePicker })))
+    const datePicker = !loading ? (jsxRuntimeExports.jsx(antd.DatePicker, { className: classDate === null || classDate === void 0 ? void 0 : classDate.join(' '), classNames: className, size: size !== null && size !== void 0 ? size : 'middle', variant: variant, picker: picker, format: datePickerFormat[picker !== null && picker !== void 0 ? picker : 'default'], allowClear: !required, disabled: disabled, disabledDate: disabledDate, disabledTime: disabledTime, value: value !== null && value !== void 0 ? value : valueDate, onChange: handleChange, style: style })) : jsxRuntimeExports.jsx(antd.Skeleton.Input, { block: true, active: true });
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, rules: rules, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: datePicker })))
             : datePicker }));
 };
 
 const { RangePicker } = antd.DatePicker;
-const DateRangePickerComponent = ({ noItem, size, variant, picker, disabledDate, disabledTime, loading, disabled, value, defaultValue, onChange, style, formColLayout, name, label, classNames = [], className, required, rules, ruleType, ruleMessage, validateStatus, help, ref, }) => {
+const DateRangePickerComponent = ({ noItem, size, variant, picker, disabledDate, disabledTime, loading, disabled, value, defaultValue, onChange, style, formColLayout, name, label, classNames = [], className, required, rules, ruleType, ruleMessage, validateStatus, help, shouldUpdate, ref, }) => {
     var _a;
     const [valueDateRange, setValueDateRange] = React.useState(defaultValue);
     const handleChange = (date, dateStrings) => {
@@ -3961,8 +3954,8 @@ const DateRangePickerComponent = ({ noItem, size, variant, picker, disabledDate,
     }));
     const classDateRange = [styleCSS['w-100']];
     classNames && classDateRange.push(...classNames);
-    const datePicker = !loading ? (jsxRuntimeExports.jsx(RangePicker, { name: name, className: classDateRange.join(' '), classNames: className, size: size !== null && size !== void 0 ? size : 'middle', variant: variant, picker: picker, format: datePickerFormat[(_a = picker === null || picker === void 0 ? void 0 : picker.toString()) !== null && _a !== void 0 ? _a : 'default'], allowClear: !required, disabled: disabled, disabledDate: disabledDate, disabledTime: disabledTime, value: value !== null && value !== void 0 ? value : valueDateRange, onChange: handleChange, style: style })) : jsxRuntimeExports.jsx(antd.Skeleton.Input, { block: true, active: true });
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, rules: rules, validateStatus: validateStatus, help: help, children: datePicker })))
+    const datePicker = !loading ? (jsxRuntimeExports.jsx(RangePicker, { className: classDateRange.join(' '), classNames: className, size: size !== null && size !== void 0 ? size : 'middle', variant: variant, picker: picker, format: datePickerFormat[(_a = picker === null || picker === void 0 ? void 0 : picker.toString()) !== null && _a !== void 0 ? _a : 'default'], allowClear: !required, disabled: disabled, disabledDate: disabledDate, disabledTime: disabledTime, value: value !== null && value !== void 0 ? value : valueDateRange, onChange: handleChange, style: style })) : jsxRuntimeExports.jsx(antd.Skeleton.Input, { block: true, active: true });
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, rules: rules, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: datePicker })))
             : datePicker }));
 };
 
@@ -5959,7 +5952,7 @@ const LinkComponent = ({ href, children, }) => {
     return (jsxRuntimeExports.jsx(Link$1, { to: href, children: children }));
 };
 
-const DropdownButtonComponent = ({ triger, placement, menuItems, disabled, data, }) => {
+const DropdownButtonComponent = ({ trigger, placement, menuItems, disabled, data, }) => {
     const items = menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(menu => {
         const classMenuItem = [];
         switch (menu.type) {
@@ -5981,7 +5974,7 @@ const DropdownButtonComponent = ({ triger, placement, menuItems, disabled, data,
             onClick: () => { var _a; return (_a = menu.onClick) === null || _a === void 0 ? void 0 : _a.call(menu, data); },
         };
     });
-    return (jsxRuntimeExports.jsx(antd.Dropdown, { menu: { items }, placement: placement !== null && placement !== void 0 ? placement : 'bottomRight', trigger: triger !== null && triger !== void 0 ? triger : ['hover'], disabled: disabled, children: jsxRuntimeExports.jsx(ButtonComponent, { size: "small", icon: jsxRuntimeExports.jsx(RefIcon$8, {}) }) }));
+    return (jsxRuntimeExports.jsx(antd.Dropdown, { menu: { items }, placement: placement !== null && placement !== void 0 ? placement : 'bottomRight', trigger: trigger !== null && trigger !== void 0 ? trigger : ['hover'], disabled: disabled, children: jsxRuntimeExports.jsx(ButtonComponent, { size: "small", icon: jsxRuntimeExports.jsx(RefIcon$8, {}) }) }));
 };
 
 var css_248z$8 = ".style-module_icon__GHpNO {\n  size: 1.5rem;\n}";
@@ -5995,12 +5988,10 @@ const IconCheckOrClose = ({ check, classNames, style, }) => {
     return (jsxRuntimeExports.jsx(Icon, { className: classIcon.join(' '), style: style }));
 };
 
-const InputComponent = ({ noItem, password, autoFocus, allowClear, size, classNames, variant, loading, disabled, readOnly, maxLength, addonBefore, addonAfter, prefix, suffix, placeholder, value, onChange, onKeyDown, onPressEnter, onMouseEnter, onMouseLeave, onClick, onFocus, onBlur, defaultValue, formColLayout, name, label, uppercase, number, required, rules, ruleType, ruleMessage, ruleMin, ruleMax, validateStatus, help, ref, }) => {
+const InputComponent = ({ noItem, password, autoFocus, allowClear, size, classNames, variant, loading, disabled, readOnly, maxLength, addonBefore, addonAfter, prefix, suffix, placeholder, value, onChange, onKeyDown, onPressEnter, onMouseEnter, onMouseLeave, onClick, onFocus, onBlur, defaultValue, formColLayout, name, label, uppercase, number, required, rules, ruleType, ruleMessage, ruleMin, ruleMax, validateStatus, help, shouldUpdate, ref, }) => {
     const [valueInput, setValueInput] = React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
     const handleChange = (event) => {
         setValueInput(event.target.value);
-        if (noItem && name)
-            event.target.id = name;
         onChange === null || onChange === void 0 ? void 0 : onChange(name, event);
     };
     React.useImperativeHandle(ref, () => ({
@@ -6016,7 +6007,7 @@ const InputComponent = ({ noItem, password, autoFocus, allowClear, size, classNa
             return value.replace(/\D/g, '');
         return value;
     };
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, normalize: normalize, required: required, ruleMessage: ruleMessage, ruleType: ruleType, ruleMax: ruleMax, ruleMin: ruleMin, rules: rules, validateStatus: validateStatus, help: help, children: input })))
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, normalize: normalize, required: required, ruleMessage: ruleMessage, ruleType: ruleType, ruleMax: ruleMax, ruleMin: ruleMin, rules: rules, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: input })))
             : input }));
 };
 
@@ -6053,7 +6044,7 @@ var css_248z$5 = ".style-module_number-format__F9NKi {\n  box-sizing: border-box
 var styleNumberFormat = {"number-format":"style-module_number-format__F9NKi","number-format-borderless":"style-module_number-format-borderless__DOdb8","number-format-underlined":"style-module_number-format-underlined__hUCaf","number-format-error":"style-module_number-format-error__rOvyp","number-format-sm":"style-module_number-format-sm__iLZdH","number-format-align-right":"style-module_number-format-align-right__qOFmQ"};
 styleInject(css_248z$5);
 
-const NumberFormatComponent = ({ noItem, text, size, align, className, variant, trailing: trailingProps, prefix, suffix, placeholder, disabled, readOnly, allowNegative, value, defaultValue, onChange, style, onBlur, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onClick, formColLayout, name, label, required, rules, ruleType, ruleMessage, ruleMin, ruleMax, validateStatus, help, ref, }) => {
+const NumberFormatComponent = ({ noItem, text, size, align, className, variant, trailing: trailingProps, prefix, suffix, placeholder, disabled, readOnly, allowNegative, value, defaultValue, onChange, style, onBlur, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onClick, formColLayout, name, label, required, rules, ruleType, ruleMessage, ruleMin, ruleMax, validateStatus, help, shouldUpdate, ref, }) => {
     const { trailing } = useConfig$1();
     const { messageApi } = useFeedback();
     const [valueNumberFormat, setValueNumberFormat] = React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
@@ -6091,7 +6082,7 @@ const NumberFormatComponent = ({ noItem, text, size, align, className, variant,
                     return formattedValue === '' || floatValue <= ruleMax;
                 return true;
             }, fixedDecimalScale: true, style: style, value: value !== null && value !== void 0 ? value : valueNumberFormat, onValueChange: handleChange, onBlur: onBlur, onKeyDown: onKeyDown }) })));
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, ruleMax: ruleMax, ruleMin: ruleMin, rules: rules, validateStatus: validateStatus, help: help, children: numberFormat })))
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, ruleMax: ruleMax, ruleMin: ruleMin, rules: rules, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: numberFormat })))
             : numberFormat }));
 };
 
@@ -6835,7 +6826,7 @@ const SelectAsyncComponent = (_a) => {
         }, onFocus: (!options.length || isInit) ? debounceFetcher : undefined, onSearch: debounceFetcher, notFoundContent: fetching ? jsxRuntimeExports.jsx(antd.Spin, { size: "small" }) : null, options: getOptions() })));
 };
 
-const SwitchComponent = ({ noItem, icon, checkedChildren, unCheckedChildren, loading, disabled, checked, defaultChecked, onChange, formColLayout, name, label, required, rules, ruleType, ruleMessage, validateStatus, help, }) => {
+const SwitchComponent = ({ noItem, icon, checkedChildren, unCheckedChildren, loading, disabled, checked, defaultChecked, onChange, formColLayout, name, label, required, rules, ruleType, ruleMessage, validateStatus, help, shouldUpdate, }) => {
     const [checkedSwitch, setCheckedSwitch] = React.useState(defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : false);
     const handleChange = (value, event) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(name, value, event);
@@ -6849,7 +6840,7 @@ const SwitchComponent = ({ noItem, icon, checkedChildren, unCheckedChildren, loa
         unCheckedChildren,
     };
     const switchComponent = !loading ? (jsxRuntimeExports.jsx(antd.Switch, Object.assign({}, checkChildren, { onChange: handleChange, disabled: disabled, checked: checked !== null && checked !== void 0 ? checked : checkedSwitch, defaultChecked: checked !== null && checked !== void 0 ? checked : checkedSwitch }))) : jsxRuntimeExports.jsx(antd.Skeleton.Input, { active: true });
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, rules: rules, validateStatus: validateStatus, help: help, children: switchComponent })))
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, rules: rules, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: switchComponent })))
             : switchComponent }));
 };
 
@@ -23163,15 +23154,13 @@ const TextArea = /*#__PURE__*/React.forwardRef((props, ref) => {
   }))));
 });
 
-const TextAreaComponent = ({ noItem, noResize, size, className, rows, variant, loading, disabled, readOnly, placeholder, value, defaultValue, onChange, formColLayout, name, label, required, rules, ruleType, ruleMessage, ruleMin, ruleMax, validateStatus, help, ref, }) => {
+const TextAreaComponent = ({ noItem, noResize, size, className, rows, variant, loading, disabled, readOnly, placeholder, value, defaultValue, onChange, formColLayout, name, label, required, rules, ruleType, ruleMessage, validateStatus, help, shouldUpdate, ref, }) => {
     const classTextArea = [];
     className && classTextArea.push(...className);
     noResize && classTextArea.push(styleTextArea['resize-none']);
     const [valueTextArea, setValueTextArea] = React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
     const handleChange = (event) => {
         setValueTextArea(event.target.value);
-        if (noItem && name)
-            event.target.id = name;
         onChange === null || onChange === void 0 ? void 0 : onChange(name, event);
     };
     React.useImperativeHandle(ref, () => ({
@@ -23179,13 +23168,13 @@ const TextAreaComponent = ({ noItem, noResize, size, className, rows, variant, l
         setValue: () => setValueTextArea,
     }));
     const textArea = !loading ? (jsxRuntimeExports.jsx(TextArea, { size: size, className: className === null || className === void 0 ? void 0 : className.join(' '), rows: rows, variant: variant, disabled: disabled, readOnly: readOnly, onChange: handleChange, placeholder: placeholder, value: value !== null && value !== void 0 ? value : valueTextArea })) : jsxRuntimeExports.jsx(antd.Skeleton.Input, { block: true, active: true });
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, rules: rules, validateStatus: validateStatus, help: help, children: textArea })))
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !noItem ? (jsxRuntimeExports.jsx(FormItemComponent, Object.assign({}, formColLayout, { name: name, label: label, required: required, ruleMessage: ruleMessage, ruleType: ruleType, rules: rules, validateStatus: validateStatus, help: help, shouldUpdate: shouldUpdate, children: textArea })))
             : textArea }));
 };
 
 const useRemoveError = (setInputErrors) => {
     const removeError = (name) => {
-        name && setInputErrors(prevState => Object.keys(prevState)
+        name && typeof name === 'string' && setInputErrors(prevState => Object.keys(prevState)
             .filter(key => key !== name)
             .reduce((result, current) => {
             result[current] = prevState[current];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sti-antd-package",
   "description": "STI ANT Design",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",