@pdg/react-form 1.0.19 → 1.0.21

package/dist/FormItemCustom/FormAutocomplete/FormAutocomplete.types.d.ts

@@ -27,6 +27,7 @@ export interface FormAutocompleteProps extends CommonSxProps, Omit<FormValueItem
     disableClearable?: boolean;
     async?: boolean;
     onLoadItems?: (inputValue?: string) => Promise<FormAutocompleteItem[]>;
+    onAsyncLoadValueItem?: (value: FormAutocompleteValue) => Promise<FormAutocompleteComponentValue>;
     onRenderItem?: (item: FormAutocompleteItem) => ReactNode;
     onRenderTag?: (item: FormAutocompleteItem) => ReactNode;
     onValue?: (value: FormAutocompleteValue) => FormAutocompleteValue;

package/dist/index.esm.js

@@ -949,35 +949,25 @@ FormDivider.defaultProps = FormDividerDefaultProps;function useFirstSkipEffect$1
         return v1 === v2;
     }
     return true;
-};function useFirstSkipLayoutEffect(effect, deps) {
-    var firstRef = useRef(true);
-    useLayoutEffect(function () {
-        if (firstRef.current) {
-            firstRef.current = false;
-        }
-        else {
-            effect();
-        }
-    }, deps);
-}function useAutoUpdateLayoutState(p1, p2) {
+};function useAutoUpdateState$1(p1, p2) {
     var state = typeof p1 === 'function' ? undefined : p1;
     var finalStateCallback = typeof p1 === 'function' ? p1 : p2;
     var _a = useState(0), setUpdateKey = _a[1];
     var _initState = useState(function () {
-        return finalStateCallback ? finalStateCallback(state, 0) : state;
+        return finalStateCallback ? finalStateCallback(state) : state;
     })[0];
     var _state = useRef(_initState);
     var forceUpdate = useCallback(function () {
         setUpdateKey(function (updateKey) { return updateKey + 1; });
     }, []);
-    useFirstSkipLayoutEffect(function () {
+    useFirstSkipEffect$1(function () {
         var newState = finalStateCallback ? finalStateCallback(state) : state;
         if (!isSame$1(newState, _state.current)) {
             _state.current = newState;
             forceUpdate();
         }
     }, [state]);
-    useFirstSkipLayoutEffect(function () {
+    useFirstSkipEffect$1(function () {
         var newState = finalStateCallback ? finalStateCallback(_state.current) : _state.current;
         if (!isSame$1(newState, _state.current)) {
             _state.current = newState;
@@ -1012,7 +1002,7 @@ var templateObject_1$2;var FormBlock = React__default.forwardRef(function (_a, r
     var labelShrink = useMemo(function () { return (initLabelShrink == null ? formLabelShrink : initLabelShrink); }, [initLabelShrink, formLabelShrink]);
     var fullWidth = useMemo(function () { return (initFullWidth == null ? formFullWidth : initFullWidth); }, [initFullWidth, formFullWidth]);
     // State -------------------------------------------------------------------------------------------------------------
-    var _c = useAutoUpdateLayoutState(initCollapseIn), collapseIn = _c[0], setCollapseIn = _c[1];
+    var _c = useAutoUpdateState$1(initCollapseIn), collapseIn = _c[0], setCollapseIn = _c[1];
     // Memo --------------------------------------------------------------------------------------------------------------
     var style = useMemo(function () {
         if (hidden) {
@@ -1978,7 +1968,7 @@ function useResizeDetector(props) {
     // ResizeDetector --------------------------------------------------------------------------------------------------
     var _c = useResizeDetector(), formColWidth = _c.width, resizeDetectorRef = _c.ref;
     // State - style ---------------------------------------------------------------------------------------------------
-    var style = useAutoUpdateLayoutState(useCallback(function () {
+    var style = useAutoUpdateState$1(useCallback(function () {
         if (hidden) {
             return __assign$4(__assign$4({}, initStyle), { display: 'none' });
         }
@@ -2072,10 +2062,10 @@ styleInject(css_248z$j);var FormTextField = React__default.forwardRef(function (
     var labelShrink = useMemo(function () { return (initLabelShrink == null ? formLabelShrink : initLabelShrink); }, [initLabelShrink, formLabelShrink]);
     var fullWidth = useMemo(function () { return (initFullWidth == null ? formFullWidth : initFullWidth); }, [initFullWidth, formFullWidth]);
     // State -----------------------------------------------------------------------------------------------------------
-    var _d = useAutoUpdateLayoutState(initError), error = _d[0], setError = _d[1];
-    var _e = useAutoUpdateLayoutState(initHelperText), helperText = _e[0], setHelperText = _e[1];
+    var _d = useAutoUpdateState$1(initError), error = _d[0], setError = _d[1];
+    var _e = useAutoUpdateState$1(initHelperText), helperText = _e[0], setHelperText = _e[1];
     var _f = useState(false), showClear = _f[0], setShowClear = _f[1];
-    var _g = useAutoUpdateLayoutState(initDisabled), disabled = _g[0], setDisabled = _g[1];
+    var _g = useAutoUpdateState$1(initDisabled), disabled = _g[0], setDisabled = _g[1];
     // Memo - muiInputLabelProps ---------------------------------------------------------------------------------------
     var muiInputLabelProps = useMemo(function () {
         if (labelShrink || placeholder) {
@@ -2118,7 +2108,7 @@ styleInject(css_248z$j);var FormTextField = React__default.forwardRef(function (
         return onValue ? onValue(value) : value;
     }, [onValue]);
     // State - value ---------------------------------------------------------------------------------------------------
-    var _h = useAutoUpdateLayoutState(initValue, getFinalValue), value = _h[0], setValue = _h[1];
+    var _h = useAutoUpdateState$1(initValue, getFinalValue), value = _h[0], setValue = _h[1];
     useEffect(function () {
         setShowClear(clear ? notEmpty(value) : false);
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2361,7 +2351,7 @@ styleInject(css_248z$h);var FormTag = React__default.forwardRef(function (_a, re
     var className = _a.className, name = _a.name, initValue = _a.value, exceptValue = _a.exceptValue, required = _a.required, readOnly = _a.readOnly, maxLength = _a.maxLength, disabled = _a.disabled, initFullWidth = _a.fullWidth, initError = _a.error, initHelperText = _a.helperText, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, onValidate = _a.onValidate, onKeyDown = _a.onKeyDown, onChange = _a.onChange, onValue = _a.onValue, onBlur = _a.onBlur, props = __rest$2(_a, ["className", "name", "value", "exceptValue", "required", "readOnly", "maxLength", "disabled", "fullWidth", "error", "helperText", "formValueSeparator", "formValueSort", "onValidate", "onKeyDown", "onChange", "onValue", "onBlur"]);
     var _b = useFormState(), formFullWidth = _b.fullWidth, onAddValueItem = _b.onAddValueItem, onValueChange = _b.onValueChange, onValueChangeByUser = _b.onValueChangeByUser, onRequestSearchSubmit = _b.onRequestSearchSubmit, otherFormState = __rest$2(_b, ["fullWidth", "onAddValueItem", "onValueChange", "onValueChangeByUser", "onRequestSearchSubmit"]);
     // State - FormState -----------------------------------------------------------------------------------------------
-    var fullWidth = useAutoUpdateLayoutState(initFullWidth == null ? formFullWidth : initFullWidth)[0];
+    var fullWidth = useAutoUpdateState$1(initFullWidth == null ? formFullWidth : initFullWidth)[0];
     // Function - getFinalValue ----------------------------------------------------------------------------------------
     var getFinalValue = useCallback(function (value) {
         var finalValue;
@@ -2379,7 +2369,7 @@ styleInject(css_248z$h);var FormTag = React__default.forwardRef(function (_a, re
     var _c = useState(function () {
         return new Set(getFinalValue(initValue));
     }), valueSet = _c[0], setValueSet = _c[1];
-    var _d = useAutoUpdateLayoutState(initValue, getFinalValue), value = _d[0], setValue = _d[1];
+    var _d = useAutoUpdateState$1(initValue, getFinalValue), value = _d[0], setValue = _d[1];
     useFirstSkipEffect$1(function () {
         if (error)
             validate(value);
@@ -2389,8 +2379,8 @@ styleInject(css_248z$h);var FormTag = React__default.forwardRef(function (_a, re
     }, [value]);
     //------------------------------------------------------------------------------------------------------------------
     var _e = useState(''), inputValue = _e[0], setInputValue = _e[1];
-    var _f = useAutoUpdateLayoutState(initError), error = _f[0], setError = _f[1];
-    var _g = useAutoUpdateLayoutState(initHelperText), helperText = _g[0], setHelperText = _g[1];
+    var _f = useAutoUpdateState$1(initError), error = _f[0], setError = _f[1];
+    var _g = useAutoUpdateState$1(initHelperText), helperText = _g[0], setHelperText = _g[1];
     // Effect ----------------------------------------------------------------------------------------------------------
     useEffect(function () {
         if (!isSame$2(value, initValue)) {
@@ -4132,7 +4122,7 @@ styleInject(css_248z$d);var FormSelect = React__default.forwardRef(function (_a,
         }
     }, [initStartAdornment, isOnGetItemLoading, loading]);
     // State - items ---------------------------------------------------------------------------------------------------
-    var _g = useAutoUpdateLayoutState(initItems), items = _g[0], setItems = _g[1];
+    var _g = useAutoUpdateState$1(initItems), items = _g[0], setItems = _g[1];
     useEffect(function () {
         if (items) {
             setItemValueLabels(items.reduce(function (res, item) {
@@ -4163,7 +4153,7 @@ styleInject(css_248z$d);var FormSelect = React__default.forwardRef(function (_a,
         }
     }, [items]);
     // State - inputLabelProps -----------------------------------------------------------------------------------------
-    var inputLabelProps = useAutoUpdateLayoutState(useCallback(function () {
+    var inputLabelProps = useAutoUpdateState$1(useCallback(function () {
         if (hasEmptyValue || (!hasEmptyValue && placeholder)) {
             return __assign$4(__assign$4({}, initInputLabelProps), { shrink: true });
         }
@@ -4220,14 +4210,14 @@ styleInject(css_248z$d);var FormSelect = React__default.forwardRef(function (_a,
         return onValue ? onValue(finalValue) : finalValue;
     }, [multiple, formValueSeparator, itemsValues, onValue]);
     // State - value ---------------------------------------------------------------------------------------------------
-    var _h = useAutoUpdateLayoutState(initValue, getFinalValue), value = _h[0], setValue = _h[1];
+    var _h = useAutoUpdateState$1(initValue, getFinalValue), value = _h[0], setValue = _h[1];
     useFirstSkipEffect$1(function () {
         if (onChange)
             onChange(value);
         onValueChange(name, value);
     }, [value]);
     // State - isSelectedPlaceholder -----------------------------------------------------------------------------------
-    var isSelectedPlaceholder = useAutoUpdateLayoutState(useCallback(function () {
+    var isSelectedPlaceholder = useAutoUpdateState$1(useCallback(function () {
         return notEmpty(items) && empty$1(value) && !!placeholder && !hasEmptyValue;
     }, [items, value, placeholder, hasEmptyValue]))[0];
     // Effect ----------------------------------------------------------------------------------------------------------
@@ -4484,13 +4474,13 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React__default.forw
     // ResizeDetector --------------------------------------------------------------------------------------------------
     var _c = useResizeDetector(), width = _c.width, height = _c.height, resizeDetectorRef = _c.ref;
     // State -----------------------------------------------------------------------------------------------------------
-    var _d = useAutoUpdateLayoutState(initValue), value = _d[0], setValue = _d[1];
-    var _e = useAutoUpdateLayoutState(initUncheckedValue), uncheckedValue = _e[0], setUncheckedValue = _e[1];
-    var _f = useAutoUpdateLayoutState(initError), error = _f[0], setError = _f[1];
-    var _g = useAutoUpdateLayoutState(initHelperText), helperText = _g[0], setHelperText = _g[1];
-    var _h = useAutoUpdateLayoutState(initDisabled), disabled = _h[0], setDisabled = _h[1];
+    var _d = useAutoUpdateState$1(initValue), value = _d[0], setValue = _d[1];
+    var _e = useAutoUpdateState$1(initUncheckedValue), uncheckedValue = _e[0], setUncheckedValue = _e[1];
+    var _f = useAutoUpdateState$1(initError), error = _f[0], setError = _f[1];
+    var _g = useAutoUpdateState$1(initHelperText), helperText = _g[0], setHelperText = _g[1];
+    var _h = useAutoUpdateState$1(initDisabled), disabled = _h[0], setDisabled = _h[1];
     // State - checked -------------------------------------------------------------------------------------------------
-    var _j = useAutoUpdateLayoutState(initChecked), checked = _j[0], setChecked = _j[1];
+    var _j = useAutoUpdateState$1(initChecked), checked = _j[0], setChecked = _j[1];
     useFirstSkipEffect$1(function () {
         if (error)
             validate(checked);
@@ -4654,20 +4644,20 @@ var FormRadioGroup = React__default.forwardRef(function (_a, ref) {
     var color = useMemo(function () { return (initColor == null ? formColor : initColor); }, [initColor, formColor]);
     var focused = useMemo(function () { return (initFocused == null ? formFocused : initFocused); }, [initFocused, formFocused]);
     // State - FormState -----------------------------------------------------------------------------------------------
-    var _c = useAutoUpdateLayoutState(initFullWidth == null ? formFullWidth : initFullWidth), fullWidth = _c[0], setFullWidth = _c[1];
+    var _c = useAutoUpdateState$1(initFullWidth == null ? formFullWidth : initFullWidth), fullWidth = _c[0], setFullWidth = _c[1];
     // Theme -----------------------------------------------------------------------------------------------------------
     var theme = useTheme();
     // Ref -------------------------------------------------------------------------------------------------------------
     var baseRef = useRef(null);
     var firstInputRef = useRef(null);
     // State -----------------------------------------------------------------------------------------------------------
-    var _d = useAutoUpdateLayoutState(initItems), items = _d[0], setItems = _d[1];
-    var _e = useAutoUpdateLayoutState(initError), error = _e[0], setError = _e[1];
-    var _f = useAutoUpdateLayoutState(initHelperText), helperText = _f[0], setHelperText = _f[1];
-    var _g = useAutoUpdateLayoutState(initDisabled), disabled = _g[0], setDisabled = _g[1];
+    var _d = useAutoUpdateState$1(initItems), items = _d[0], setItems = _d[1];
+    var _e = useAutoUpdateState$1(initError), error = _e[0], setError = _e[1];
+    var _f = useAutoUpdateState$1(initHelperText), helperText = _f[0], setHelperText = _f[1];
+    var _g = useAutoUpdateState$1(initDisabled), disabled = _g[0], setDisabled = _g[1];
     var _h = useState(false), isOnGetItemLoading = _h[0], setIsOnGetItemLoading = _h[1];
-    var _j = useAutoUpdateLayoutState(initLoading), loading = _j[0], setLoading = _j[1];
-    var _k = useAutoUpdateLayoutState(initWidth || '100%'), width = _k[0], setWidth = _k[1];
+    var _j = useAutoUpdateState$1(initLoading), loading = _j[0], setLoading = _j[1];
+    var _k = useAutoUpdateState$1(initWidth || '100%'), width = _k[0], setWidth = _k[1];
     var _l = useState(), formColWrapRect = _l[0], setFormColWrapRect = _l[1];
     // State - radioGroupNoWrapRect (ResizeDetector) -------------------------------------------------------------------
     var _m = useState(), radioGroupNoWrapRect = _m[0], setRadioGroupNoWrapRect = _m[1];
@@ -4686,7 +4676,7 @@ var FormRadioGroup = React__default.forwardRef(function (_a, ref) {
         return onValue ? onValue(value) : value;
     }, [onValue]);
     // State - value ---------------------------------------------------------------------------------------------------
-    var _p = useAutoUpdateLayoutState(initValue, getFinalValue), value = _p[0], setValue = _p[1];
+    var _p = useAutoUpdateState$1(initValue, getFinalValue), value = _p[0], setValue = _p[1];
     useFirstSkipEffect$1(function () {
         if (error)
             validate(value);
@@ -4960,7 +4950,7 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default.forwardRef(fu
     var color = useMemo(function () { return (initColor == null ? formColor : initColor); }, [initColor, formColor]);
     var fullWidth = useMemo(function () { return (initFullWidth == null ? formFullWidth : initFullWidth); }, [initFullWidth, formFullWidth]);
     // State - FormState -----------------------------------------------------------------------------------------------
-    var _c = useAutoUpdateLayoutState(initFocused == null ? formFocused : initFocused), focused = _c[0], setFocused = _c[1];
+    var _c = useAutoUpdateState$1(initFocused == null ? formFocused : initFocused), focused = _c[0], setFocused = _c[1];
     // Theme -----------------------------------------------------------------------------------------------------------
     var theme = useTheme();
     // State - width (ResizeDetector) ----------------------------------------------------------------------------------
@@ -4981,11 +4971,11 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default.forwardRef(fu
     }).ref;
     // State -----------------------------------------------------------------------------------------------------------
     var _f = useState(false), isOnGetItemLoading = _f[0], setIsOnGetItemLoading = _f[1];
-    var _g = useAutoUpdateLayoutState(initItems), items = _g[0], setItems = _g[1];
-    var _h = useAutoUpdateLayoutState(initError), error = _h[0], setError = _h[1];
-    var _j = useAutoUpdateLayoutState(initHelperText), helperText = _j[0], setHelperText = _j[1];
-    var _k = useAutoUpdateLayoutState(initLoading), loading = _k[0], setLoading = _k[1];
-    var _l = useAutoUpdateLayoutState(initDisabled), disabled = _l[0], setDisabled = _l[1];
+    var _g = useAutoUpdateState$1(initItems), items = _g[0], setItems = _g[1];
+    var _h = useAutoUpdateState$1(initError), error = _h[0], setError = _h[1];
+    var _j = useAutoUpdateState$1(initHelperText), helperText = _j[0], setHelperText = _j[1];
+    var _k = useAutoUpdateState$1(initLoading), loading = _k[0], setLoading = _k[1];
+    var _l = useAutoUpdateState$1(initDisabled), disabled = _l[0], setDisabled = _l[1];
     // Memo --------------------------------------------------------------------------------------------------------------
     var itemsValues = useMemo(function () {
         if (items) {
@@ -5071,7 +5061,7 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default.forwardRef(fu
         return onValue ? onValue(finalValue) : finalValue;
     }, [multiple, formValueSeparator, itemsValues, onValue]);
     // State - value ---------------------------------------------------------------------------------------------------
-    var _m = useAutoUpdateLayoutState(initValue, getFinalValue), value = _m[0], setValue = _m[1];
+    var _m = useAutoUpdateState$1(initValue, getFinalValue), value = _m[0], setValue = _m[1];
     // Effect ----------------------------------------------------------------------------------------------------------
     useEffect(function () {
         if (value !== initValue) {
@@ -5337,13 +5327,13 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
     var size = useMemo(function () { return (initSize == null ? formSize : initSize); }, [initSize, formSize]);
     var color = useMemo(function () { return (initColor == null ? formColor : initColor); }, [initColor, formColor]);
     // State - FormState -----------------------------------------------------------------------------------------------
-    var _c = useAutoUpdateLayoutState(initFocused == null ? formFocused : initFocused), focused = _c[0], setFocused = _c[1];
+    var _c = useAutoUpdateState$1(initFocused == null ? formFocused : initFocused), focused = _c[0], setFocused = _c[1];
     // Ref -------------------------------------------------------------------------------------------------------------
     var inputRef = useRef();
     // State -----------------------------------------------------------------------------------------------------------
-    var _d = useAutoUpdateLayoutState(initError), error = _d[0], setError = _d[1];
-    var _e = useAutoUpdateLayoutState(initHelperText), helperText = _e[0], setHelperText = _e[1];
-    var _f = useAutoUpdateLayoutState(initDisabled), disabled = _f[0], setDisabled = _f[1];
+    var _d = useAutoUpdateState$1(initError), error = _d[0], setError = _d[1];
+    var _e = useAutoUpdateState$1(initHelperText), helperText = _e[0], setHelperText = _e[1];
+    var _f = useAutoUpdateState$1(initDisabled), disabled = _f[0], setDisabled = _f[1];
     // State - width, height -------------------------------------------------------------------------------------------
     var _g = useResizeDetector(), width = _g.width, height = _g.height, resizeDetectorRef = _g.ref;
     // Function - getFinalValue ----------------------------------------------------------------------------------------
@@ -5351,7 +5341,7 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
         return onValue ? onValue(value) : value;
     }, [onValue]);
     // State - value ---------------------------------------------------------------------------------------------------
-    var _h = useAutoUpdateLayoutState(initValue || 0, getFinalValue), value = _h[0], setValue = _h[1];
+    var _h = useAutoUpdateState$1(initValue || 0, getFinalValue), value = _h[0], setValue = _h[1];
     useFirstSkipEffect$1(function () {
         if (error)
             validate(value);
@@ -7230,12 +7220,12 @@ styleInject(css_248z$a);var FormTextEditor = React__default.forwardRef(function
     var size = useMemo(function () { return (initSize == null ? formSize : initSize); }, [initSize, formSize]);
     var color = useMemo(function () { return (initColor == null ? formColor : initColor); }, [initColor, formColor]);
     // State - FormState -----------------------------------------------------------------------------------------------
-    var _c = useAutoUpdateLayoutState(initFocused == null ? formFocused : initFocused), focused = _c[0], setFocused = _c[1];
+    var _c = useAutoUpdateState$1(initFocused == null ? formFocused : initFocused), focused = _c[0], setFocused = _c[1];
     // Ref -------------------------------------------------------------------------------------------------------------
     var editorRef = useRef(null);
     var keyDownTime = useRef(0);
     // State - value ---------------------------------------------------------------------------------------------------
-    var _d = useAutoUpdateLayoutState(initValue), value = _d[0], setValue = _d[1];
+    var _d = useAutoUpdateState$1(initValue), value = _d[0], setValue = _d[1];
     useFirstSkipEffect$1(function () {
         if (error)
             validate(value);
@@ -7244,10 +7234,10 @@ styleInject(css_248z$a);var FormTextEditor = React__default.forwardRef(function
         onValueChange(name, value);
     }, [value]);
     // State -----------------------------------------------------------------------------------------------------------
-    var _e = useAutoUpdateLayoutState(initError), error = _e[0], setError = _e[1];
-    var _f = useAutoUpdateLayoutState(initHelperText), helperText = _f[0], setHelperText = _f[1];
+    var _e = useAutoUpdateState$1(initError), error = _e[0], setError = _e[1];
+    var _f = useAutoUpdateState$1(initHelperText), helperText = _f[0], setHelperText = _f[1];
     var _g = useState(false), initialized = _g[0], setInitialized = _g[1];
-    var _h = useAutoUpdateLayoutState(initDisabled), disabled = _h[0], setDisabled = _h[1];
+    var _h = useAutoUpdateState$1(initDisabled), disabled = _h[0], setDisabled = _h[1];
     // Function - focus ------------------------------------------------------------------------------------------------
     var focus = useCallback(function () {
         var _a, _b;
@@ -7404,7 +7394,7 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
     // ID --------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, 
     //----------------------------------------------------------------------------------------------------------------
-    name = _a.name, labelIcon = _a.labelIcon, label = _a.label, initLoading = _a.loading, initItems = _a.items, initValue = _a.value, initError = _a.error, initHelperText = _a.helperText, initDisabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, exceptValue = _a.exceptValue, width = _a.width, placeholder = _a.placeholder, multiple = _a.multiple, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, disablePortal = _a.disablePortal, noOptionsText = _a.noOptionsText, loadingText = _a.loadingText, limitTags = _a.limitTags, openOnFocus = _a.openOnFocus, disableClearable = _a.disableClearable, async = _a.async, onLoadItems = _a.onLoadItems, onRenderItem = _a.onRenderItem, onRenderTag = _a.onRenderTag, onAddItem = _a.onAddItem, 
+    name = _a.name, labelIcon = _a.labelIcon, label = _a.label, initLoading = _a.loading, initItems = _a.items, initValue = _a.value, initError = _a.error, initHelperText = _a.helperText, initDisabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, exceptValue = _a.exceptValue, width = _a.width, placeholder = _a.placeholder, multiple = _a.multiple, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, disablePortal = _a.disablePortal, noOptionsText = _a.noOptionsText, loadingText = _a.loadingText, limitTags = _a.limitTags, openOnFocus = _a.openOnFocus, disableClearable = _a.disableClearable, async = _a.async, onLoadItems = _a.onLoadItems, onAsyncLoadValueItem = _a.onAsyncLoadValueItem, onRenderItem = _a.onRenderItem, onRenderTag = _a.onRenderTag, onAddItem = _a.onAddItem, 
     //----------------------------------------------------------------------------------------------------------------
     onChange = _a.onChange, onValue = _a.onValue, onValidate = _a.onValidate, 
     //----------------------------------------------------------------------------------------------------------------
@@ -7413,6 +7403,7 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
     // Ref -------------------------------------------------------------------------------------------------------------
     var textFieldRef = useRef(null);
     var asyncTimerRef = useRef(null);
+    var oldComponentValueRef = useRef(null);
     // FormState -------------------------------------------------------------------------------------------------------
     var _b = useFormState(), formVariant = _b.variant, formSize = _b.size, formColor = _b.color, formFocused = _b.focused, formLabelShrink = _b.labelShrink, formFullWidth = _b.fullWidth, onAddValueItem = _b.onAddValueItem, onRemoveValueItem = _b.onRemoveValueItem, onValueChange = _b.onValueChange, onValueChangeByUser = _b.onValueChangeByUser, onRequestSearchSubmit = _b.onRequestSearchSubmit;
     // Memo - FormState ------------------------------------------------------------------------------------------------
@@ -7424,11 +7415,11 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
     var fullWidth = useMemo(function () { return (initFullWidth == null ? formFullWidth : initFullWidth); }, [initFullWidth, formFullWidth]);
     // State -----------------------------------------------------------------------------------------------------------
     var _c = useState(false), isOnGetItemLoading = _c[0], setIsOnGetItemLoading = _c[1];
-    var _d = useAutoUpdateLayoutState(initItems), items = _d[0], setItems = _d[1];
-    var _e = useAutoUpdateLayoutState(initError), error = _e[0], setError = _e[1];
-    var _f = useAutoUpdateLayoutState(initHelperText), helperText = _f[0], setHelperText = _f[1];
-    var _g = useAutoUpdateLayoutState(initLoading), loading = _g[0], setLoading = _g[1];
-    var _h = useAutoUpdateLayoutState(initDisabled), disabled = _h[0], setDisabled = _h[1];
+    var _d = useAutoUpdateState$1(initItems), items = _d[0], setItems = _d[1];
+    var _e = useAutoUpdateState$1(initError), error = _e[0], setError = _e[1];
+    var _f = useAutoUpdateState$1(initHelperText), helperText = _f[0], setHelperText = _f[1];
+    var _g = useAutoUpdateState$1(initLoading), loading = _g[0], setLoading = _g[1];
+    var _h = useAutoUpdateState$1(initDisabled), disabled = _h[0], setDisabled = _h[1];
     var _j = useState(undefined), inputValue = _j[0], setInputValue = _j[1];
     // Memo --------------------------------------------------------------------------------------------------------------
     var itemsValues = useMemo(function () {
@@ -7499,7 +7490,8 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
         return onValue ? onValue(finalValue) : finalValue;
     }, [multiple, formValueSeparator, itemsValues, onValue]);
     // State - value ---------------------------------------------------------------------------------------------------
-    var _k = useAutoUpdateLayoutState(initValue, getFinalValue), value = _k[0], setValue = _k[1];
+    var _k = useAutoUpdateState$1(initValue, getFinalValue), value = _k[0], setValue = _k[1];
+    var _l = useState(null), valueItem = _l[0], setValueItem = _l[1];
     var componentValue = useMemo(function () {
         var finalValue = value;
         if (finalValue != null) {
@@ -7517,18 +7509,60 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
         else {
             finalValue = multiple ? [] : undefined;
         }
-        if (notEmpty(finalValue) && items) {
-            if (Array.isArray(finalValue)) {
-                return items.filter(function (info) { return Array.isArray(finalValue) && finalValue.includes(info.value); });
+        var newComponentValue = multiple ? [] : null;
+        if (notEmpty(finalValue)) {
+            if (items) {
+                if (Array.isArray(finalValue)) {
+                    newComponentValue = items.filter(function (info) { return Array.isArray(finalValue) && finalValue.includes(info.value); });
+                }
+                else {
+                    newComponentValue = items.find(function (info) { return info.value === value; }) || (multiple ? [] : null);
+                }
             }
-            else {
-                return items.find(function (info) { return info.value === value; }) || (multiple ? [] : null);
+            if (empty$1(newComponentValue) && valueItem) {
+                if (Array.isArray(finalValue)) {
+                    if (Array.isArray(valueItem)) {
+                        newComponentValue = valueItem.filter(function (info) { return Array.isArray(finalValue) && finalValue.includes(info.value); });
+                    }
+                }
+                else {
+                    if (!Array.isArray(valueItem) && finalValue === valueItem.value) {
+                        newComponentValue = valueItem;
+                    }
+                }
             }
         }
+        if ((oldComponentValueRef.current, isSame$2(oldComponentValueRef.current, newComponentValue))) {
+            return oldComponentValueRef.current;
+        }
         else {
-            return multiple ? [] : null;
+            oldComponentValueRef.current = newComponentValue;
+            return newComponentValue;
+        }
+    }, [value, multiple, items, valueItem]);
+    useEffect(function () {
+        if (async && onAsyncLoadValueItem) {
+            if (value != null) {
+                if (!valueItem) {
+                    onAsyncLoadValueItem(value).then(function (valueItem) {
+                        setValueItem(valueItem);
+                        if (valueItem) {
+                            if (Array.isArray(valueItem)) {
+                                setItems(valueItem);
+                            }
+                            else {
+                                setItems([valueItem]);
+                            }
+                        }
+                    });
+                }
+            }
+            else {
+                setValueItem(null);
+            }
         }
-    }, [value, multiple, items]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [async, value, valueItem]);
     // Function ----------------------------------------------------------------------------------------------------------
     var showOnGetItemLoading = useCallback(function () {
         setIsOnGetItemLoading(true);
@@ -7566,22 +7600,50 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
         onValueChange(name, value);
     }, [value]);
     useEffect(function () {
-        if (async && onLoadItems && inputValue != null) {
+        if (async && onLoadItems) {
             if (asyncTimerRef.current) {
                 clearTimeout(asyncTimerRef.current);
                 asyncTimerRef.current = null;
             }
-            showOnGetItemLoading();
-            asyncTimerRef.current = setTimeout(function () {
-                asyncTimerRef.current = null;
-                onLoadItems(inputValue)
-                    .then(function (items) {
-                    setItems(items);
-                })
-                    .finally(function () {
-                    hideOnGetItemLoading();
-                });
-            }, 300);
+            if (inputValue != null) {
+                showOnGetItemLoading();
+                asyncTimerRef.current = setTimeout(function () {
+                    asyncTimerRef.current = null;
+                    onLoadItems(inputValue)
+                        .then(function (items) {
+                        if (componentValue) {
+                            if (Array.isArray(componentValue)) {
+                                var exceptValues_1 = componentValue.map(function (info) { return info.value; });
+                                setItems(__spreadArray(__spreadArray([], componentValue, true), items.filter(function (info) { return !exceptValues_1.includes(info.value); }), true));
+                            }
+                            else {
+                                var exceptValue_1 = componentValue.value;
+                                setItems(__spreadArray([componentValue], items.filter(function (info) { return info.value !== exceptValue_1; }), true));
+                            }
+                        }
+                        else {
+                            setItems(items);
+                        }
+                    })
+                        .finally(function () {
+                        hideOnGetItemLoading();
+                    });
+                }, 300);
+            }
+            else {
+                if (Array.isArray(componentValue)) {
+                    setItems(componentValue);
+                }
+                else {
+                    if (componentValue) {
+                        setItems([componentValue]);
+                    }
+                    else {
+                        setItems([]);
+                    }
+                }
+                hideOnGetItemLoading();
+            }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [async, inputValue]);
@@ -7722,6 +7784,7 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
             var finalValue = getFinalValue(newValue);
             if (!isSame$2(value, finalValue)) {
                 setValue(finalValue);
+                setValueItem(componentValue);
                 nextTick(function () {
                     onValueChangeByUser(name, finalValue);
                     onRequestSearchSubmit(name, finalValue);
@@ -7754,6 +7817,9 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
             if (reason === 'input') {
                 setInputValue(newInputValue);
             }
+            else if (reason === 'reset') {
+                setInputValue(undefined);
+            }
         }, renderTags: function (value, getTagProps) {
             return value.map(function (option, index) { return (React__default.createElement(Chip, __assign$4({ size: 'small', label: onRenderTag ? onRenderTag(option) : option.label }, getTagProps({ index: index })))); });
         }, renderInput: function (params) { return (React__default.createElement(FormTextField, __assign$4({}, params, { ref: textFieldRef, name: name, variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, labelShrink: labelShrink, required: required, focused: focused, error: error, helperText: helperText, placeholder: placeholder, noFormValueItem: true, InputProps: __assign$4(__assign$4({}, params.InputProps), { endAdornment: (React__default.createElement(React__default.Fragment, null,
@@ -14590,10 +14656,10 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default.forwardRef(functi
     // State - open ----------------------------------------------------------------------------------------------------
     var _c = useState(false), open = _c[0], setOpen = _c[1];
     // State -----------------------------------------------------------------------------------------------------------
-    var _d = useAutoUpdateLayoutState(initError), error = _d[0], setError = _d[1];
+    var _d = useAutoUpdateState$1(initError), error = _d[0], setError = _d[1];
     var _e = useState(null), timeError = _e[0], setTimeError = _e[1];
-    var _f = useAutoUpdateLayoutState(initHelperText), helperText = _f[0], setHelperText = _f[1];
-    var _g = useAutoUpdateLayoutState(initDisabled), disabled = _g[0], setDisabled = _g[1];
+    var _f = useAutoUpdateState$1(initHelperText), helperText = _f[0], setHelperText = _f[1];
+    var _g = useAutoUpdateState$1(initDisabled), disabled = _g[0], setDisabled = _g[1];
     // Memo --------------------------------------------------------------------------------------------------------------
     var label = useMemo(function () {
         if (labelIcon) {
@@ -14621,7 +14687,7 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default.forwardRef(functi
     }, [initFormValueFormat, time, type]);
     var availableDate = useMemo(function () { return makeAvailableDate(minDate, maxDate, !!disablePast, !!disableFuture); }, [disableFuture, disablePast, maxDate, minDate]);
     // State - style ---------------------------------------------------------------------------------------------------
-    var style = useAutoUpdateLayoutState(useCallback(function () {
+    var style = useAutoUpdateState$1(useCallback(function () {
         if (width != null) {
             return __assign$4(__assign$4({}, initStyle), { width: width });
         }
@@ -14634,7 +14700,7 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default.forwardRef(functi
         return value;
     }, []);
     // State - value ---------------------------------------------------------------------------------------------------
-    var _h = useAutoUpdateLayoutState(initValue || null, getFinalValue), value = _h[0], setValue = _h[1];
+    var _h = useAutoUpdateState$1(initValue || null, getFinalValue), value = _h[0], setValue = _h[1];
     var _j = useState(null), inputValue = _j[0], setInputValue = _j[1];
     // Effect ----------------------------------------------------------------------------------------------------------
     useEffect(function () {
@@ -15015,7 +15081,7 @@ FormTimePicker.defaultProps = FormTimePickerDefaultProps;var FormDateRangePicker
 styleInject(css_248z$4);var CustomDatePicker = React__default.forwardRef(function (_a, ref) {
     // State -----------------------------------------------------------------------------------------------------------
     var selectType = _a.selectType, initValue = _a.value, focusedDate = _a.focusedDate, month = _a.month, disableFuture = _a.disableFuture, disablePast = _a.disablePast, minDate = _a.minDate, maxDate = _a.maxDate, onValueChange = _a.onValueChange, onMouseEnterPickersDay = _a.onMouseEnterPickersDay, onMonthChange = _a.onMonthChange;
-    var value = useAutoUpdateLayoutState(useCallback(function () {
+    var value = useAutoUpdateState$1(useCallback(function () {
         return initValue ? initValue : [null, null];
     }, [initValue]))[0];
     var _b = useState(null), activeMonthValue = _b[0], setActiveMonthValue = _b[1];
@@ -15536,11 +15602,11 @@ var FormDateRangePicker = React__default.forwardRef(function (_a, ref) {
     var endInputDatePickerErrorRef = useRef(null);
     var openValueRef = useRef();
     // State -----------------------------------------------------------------------------------------------------------
-    var _c = useAutoUpdateLayoutState(initError), error = _c[0], setError = _c[1];
+    var _c = useAutoUpdateState$1(initError), error = _c[0], setError = _c[1];
     var _d = useState(false), startError = _d[0], setStartError = _d[1];
     var _e = useState(false), endError = _e[0], setEndError = _e[1];
-    var _f = useAutoUpdateLayoutState(initDisabled), disabled = _f[0], setDisabled = _f[1];
-    var _g = useAutoUpdateLayoutState(initHelperText), helperText = _g[0], setHelperText = _g[1];
+    var _f = useAutoUpdateState$1(initDisabled), disabled = _f[0], setDisabled = _f[1];
+    var _g = useAutoUpdateState$1(initHelperText), helperText = _g[0], setHelperText = _g[1];
     // Memo --------------------------------------------------------------------------------------------------------------
     var format = useMemo(function () { return initFormat || DEFAULT_FORMAT; }, [initFormat]);
     // Function - getFinalValue ----------------------------------------------------------------------------------------
@@ -15656,10 +15722,10 @@ var FormDateRangePicker = React__default.forwardRef(function (_a, ref) {
     // State -----------------------------------------------------------------------------------------------------------
     var _h = useState(false), open = _h[0], setOpen = _h[1];
     var _j = useState('start'), selectType = _j[0], setSelectType = _j[1];
-    var _k = useAutoUpdateLayoutState(useCallback(function () {
+    var _k = useAutoUpdateState$1(useCallback(function () {
         return initValue || DEFAULT_VALUE;
     }, [initValue])), value = _k[0], setValue = _k[1];
-    var calendarCount = useAutoUpdateLayoutState(initCalendarCount || 2)[0];
+    var calendarCount = useAutoUpdateState$1(initCalendarCount || 2)[0];
     var _l = useState(function () {
         var now = dayjs();
         return [now, now.add(1, 'month'), now.add(2, 'month')];
@@ -16100,7 +16166,7 @@ styleInject(css_248z$1);var FormFile = React__default.forwardRef(function (_a, r
     var textFieldRef = useRef(null);
     var fileUploadBtnRef = useRef(null);
     // State - value ---------------------------------------------------------------------------------------------------
-    var _c = useAutoUpdateLayoutState(initValue), value = _c[0], setValue = _c[1];
+    var _c = useAutoUpdateState$1(initValue), value = _c[0], setValue = _c[1];
     var fileValue = useState('')[0];
     useFirstSkipEffect$1(function () {
         if (error)
@@ -16110,9 +16176,9 @@ styleInject(css_248z$1);var FormFile = React__default.forwardRef(function (_a, r
         onValueChange(name, value);
     }, [value]);
     // State -----------------------------------------------------------------------------------------------------------
-    var _d = useAutoUpdateLayoutState(initError), error = _d[0], setError = _d[1];
-    var _e = useAutoUpdateLayoutState(initHelperText), helperText = _e[0], setHelperText = _e[1];
-    var _f = useAutoUpdateLayoutState(initDisabled), disabled = _f[0], setDisabled = _f[1];
+    var _d = useAutoUpdateState$1(initError), error = _d[0], setError = _d[1];
+    var _e = useAutoUpdateState$1(initHelperText), helperText = _e[0], setHelperText = _e[1];
+    var _f = useAutoUpdateState$1(initDisabled), disabled = _f[0], setDisabled = _f[1];
     var _g = useState(false), isOpenLinkDialog = _g[0], setIsOpenLinkDialog = _g[1];
     var _h = useState({ open: false }), alertDialogProps = _h[0], setAlertDialogProps = _h[1];
     // Memo --------------------------------------------------------------------------------------------------------------
@@ -16353,7 +16419,7 @@ FormFile.displayName = 'FormFile';
 FormFile.defaultProps = FormFileDefaultProps;var FormImageFileDefaultProps = __assign$4(__assign$4({}, FormFileDefaultProps), { accept: '.jpg,.jpeg,.png' });var css_248z = ".FormImageFile .preview-img {\n  max-width: 100%;\n}\n.FormImageFile:not(.hide-file-name):not(.variant-standard) .preview-img {\n  padding-right: 14px;\n}";
 styleInject(css_248z);var FormImageFile = React__default.forwardRef(function (_a, ref) {
     var className = _a.className, imageSize = _a.imageSize, preview = _a.preview, previewMaxHeight = _a.previewMaxHeight, initValue = _a.value, onChange = _a.onChange, onFile = _a.onFile, onLink = _a.onLink, props = __rest$2(_a, ["className", "imageSize", "preview", "previewMaxHeight", "value", "onChange", "onFile", "onLink"]);
-    var _b = useAutoUpdateLayoutState(initValue), value = _b[0], setValue = _b[1];
+    var _b = useAutoUpdateState$1(initValue), value = _b[0], setValue = _b[1];
     var _c = useState(), previewNode = _c[0], setPreviewNode = _c[1];
     var _d = useState({
         open: false,